Skip to content

Commit 8f6d800

Browse files
WarningImHack3rWarningImHack3r
committed
Update shadcn-svelte
1 parent 2fc5a69 commit 8f6d800

File tree

10 files changed

+89
-94
lines changed

10 files changed

+89
-94
lines changed

‎components.json‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@
88
},
99
"aliases": {
1010
"components": "$lib/components",
11-
"utils": "$lib/utils"
12-
}
11+
"utils": "$lib/utils",
12+
"ui": "$lib/components/ui",
13+
"hooks": "$lib/hooks"
14+
},
15+
"typescript": true
1316
}

‎package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
},
1515
"devDependencies": {
1616
"@neoconfetti/svelte": "^2.2.1",
17-
"@octokit/graphql-schema": "^15.25.0",
17+
"@octokit/graphql-schema": "^15.25.0",
1818
"@shikijs/rehype": "^1.23.1",
1919
"@sveltejs/adapter-vercel": "^5.4.8",
2020
"@sveltejs/kit": "^2.8.5",
@@ -26,7 +26,7 @@
2626
"@vercel/speed-insights": "^1.1.0",
2727
"arctic": "^1.9.2",
2828
"autoprefixer": "^10.4.20",
29-
"bits-ui": "^1.0.0-next.28",
29+
"bits-ui": "^1.0.0-next.64",
3030
"clsx": "^2.1.1",
3131
"eslint": "^9.15.0",
3232
"eslint-config-prettier": "^9.1.0",
@@ -53,6 +53,7 @@
5353
"tailwind-merge": "^2.5.5",
5454
"tailwind-variants": "^0.3.0",
5555
"tailwindcss": "^3.4.15",
56+
"tailwindcss-animate": "^1.0.7",
5657
"tslib": "^2.8.1",
5758
"typescript": "^5.7.2",
5859
"typescript-eslint": "^8.16.0",

‎pnpm-lock.yaml‎

Lines changed: 13 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/lib/components/ui/checkbox/checkbox.svelte‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
let {
88
ref = $bindable(null),
99
checked = $bindable(false),
10+
indeterminate = $bindable(false),
1011
class: className,
1112
...restProps
1213
}: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props();
@@ -19,11 +20,12 @@
1920
className
2021
)}
2122
bind:checked
23+
bind:indeterminate
2224
{...restProps}
2325
>
24-
{#snippet children({ checked })}
26+
{#snippet children({ checked, indeterminate })}
2527
<div class="flex size-4 items-center justify-center text-current">
26-
{#if checked === "indeterminate"}
28+
{#if indeterminate}
2729
<Minus class="size-3.5" />
2830
{:else}
2931
<Check class={cn("size-3.5", !checked && "text-transparent")} />

‎src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,40 @@
11
<script lang="ts">
2-
import { DropdownMenu as DropdownMenuPrimitive, type WithoutChild } from "bits-ui";
2+
import { DropdownMenu as DropdownMenuPrimitive, type WithoutChildrenOrChild } from "bits-ui";
33
import Check from "lucide-svelte/icons/check";
44
import Minus from "lucide-svelte/icons/minus";
55
import { cn } from "$lib/utils.js";
6+
import type { Snippet } from "svelte";
67
78
let {
89
ref = $bindable(null),
910
checked = $bindable(false),
11+
indeterminate = $bindable(false),
1012
class: className,
1113
children: childrenProp,
1214
...restProps
13-
}: WithoutChild<DropdownMenuPrimitive.CheckboxItemProps> = $props();
15+
}: WithoutChildrenOrChild<DropdownMenuPrimitive.CheckboxItemProps> & {
16+
children?: Snippet;
17+
} = $props();
1418
</script>
1519

1620
<DropdownMenuPrimitive.CheckboxItem
1721
bind:ref
1822
bind:checked
23+
bind:indeterminate
1924
class={cn(
2025
"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
2126
className
2227
)}
2328
{...restProps}
2429
>
25-
{#snippet children({ checked })}
30+
{#snippet children({ checked, indeterminate })}
2631
<span class="absolute left-2 flex size-3.5 items-center justify-center">
27-
{#if checked === "indeterminate"}
32+
{#if indeterminate}
2833
<Minus class="size-4" />
2934
{:else}
3035
<Check class={cn("size-4", !checked && "text-transparent")} />
3136
{/if}
3237
</span>
33-
{@render childrenProp?.({ checked })}
38+
{@render childrenProp?.()}
3439
{/snippet}
3540
</DropdownMenuPrimitive.CheckboxItem>

‎src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,22 @@
55
let {
66
ref = $bindable(null),
77
sideOffset = 4,
8+
portalProps,
89
class: className,
910
...restProps
10-
}: DropdownMenuPrimitive.ContentProps = $props();
11+
}: DropdownMenuPrimitive.ContentProps & {
12+
portalProps?: DropdownMenuPrimitive.PortalProps;
13+
} = $props();
1114
</script>
1215

13-
<DropdownMenuPrimitive.Content
14-
bind:ref
15-
{sideOffset}
16-
class={cn(
17-
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md outline-none",
18-
className
19-
)}
20-
{...restProps}
21-
/>
16+
<DropdownMenuPrimitive.Portal {...portalProps}>
17+
<DropdownMenuPrimitive.Content
18+
bind:ref
19+
{sideOffset}
20+
class={cn(
21+
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md outline-none",
22+
className
23+
)}
24+
{...restProps}
25+
/>
26+
</DropdownMenuPrimitive.Portal>

‎src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,12 @@
1717
<DropdownMenuPrimitive.SubTrigger
1818
bind:ref
1919
class={cn(
20-
"data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
20+
"data-[highlighted]:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
2121
inset && "pl-8",
2222
className
2323
)}
2424
{...restProps}
2525
>
2626
{@render children?.()}
27-
<ChevronRight class="ml-auto size-4" />
27+
<ChevronRight class="ml-auto" />
2828
</DropdownMenuPrimitive.SubTrigger>

‎src/lib/components/ui/tooltip/tooltip-content.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
bind:ref
1515
{sideOffset}
1616
class={cn(
17-
"bg-popover text-popover-foreground z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md",
17+
"bg-popover text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md",
1818
className
1919
)}
2020
{...restProps}

‎src/lib/utils.ts‎

Lines changed: 1 addition & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,6 @@
11
import { type ClassValue, clsx } from "clsx";
22
import { twMerge } from "tailwind-merge";
3-
import { cubicOut } from "svelte/easing";
4-
import type { TransitionConfig } from "svelte/transition";
53

64
export function cn(...inputs: ClassValue[]) {
7-
return twMerge(clsx(inputs));
5+
return twMerge(clsx(inputs));
86
}
9-
10-
type FlyAndScaleParams = {
11-
y?: number;
12-
x?: number;
13-
start?: number;
14-
duration?: number;
15-
};
16-
17-
export const flyAndScale = (
18-
node: Element,
19-
params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 }
20-
): TransitionConfig => {
21-
const style = getComputedStyle(node);
22-
const transform = style.transform === "none" ? "" : style.transform;
23-
24-
const scaleConversion = (
25-
valueA: number,
26-
scaleA: [number, number],
27-
scaleB: [number, number]
28-
) => {
29-
const [minA, maxA] = scaleA;
30-
const [minB, maxB] = scaleB;
31-
32-
const percentage = (valueA - minA) / (maxA - minA);
33-
const valueB = percentage * (maxB - minB) + minB;
34-
35-
return valueB;
36-
};
37-
38-
const styleToString = (
39-
style: Record<string, number | string | undefined>
40-
): string => {
41-
return Object.keys(style).reduce((str, key) => {
42-
if (style[key] === undefined) return str;
43-
return str + `${key}:${style[key]};`;
44-
}, "");
45-
};
46-
47-
return {
48-
duration: params.duration ?? 200,
49-
delay: 0,
50-
css: (t) => {
51-
const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
52-
const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
53-
const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
54-
55-
return styleToString({
56-
transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
57-
opacity: t
58-
});
59-
},
60-
easing: cubicOut
61-
};
62-
};

‎tailwind.config.ts‎

Lines changed: 35 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import type { Config } from "tailwindcss";
22
import defaultTheme from "tailwindcss/defaultTheme";
3-
import typography from "@tailwindcss/typography";
3+
import tailwindcssAnimate from "tailwindcss-animate";
44

5-
export default {
5+
const config: Config = {
66
darkMode: ["class"],
77
content: ["./src/**/*.{html,js,svelte,ts}"],
88
safelist: ["dark"],
@@ -52,26 +52,49 @@ export default {
5252
card: {
5353
DEFAULT: "hsl(var(--card) / <alpha-value>)",
5454
foreground: "hsl(var(--card-foreground) / <alpha-value>)"
55+
},
56+
sidebar: {
57+
DEFAULT: "hsl(var(--sidebar-background))",
58+
foreground: "hsl(var(--sidebar-foreground))",
59+
primary: "hsl(var(--sidebar-primary))",
60+
"primary-foreground": "hsl(var(--sidebar-primary-foreground))",
61+
accent: "hsl(var(--sidebar-accent))",
62+
"accent-foreground": "hsl(var(--sidebar-accent-foreground))",
63+
border: "hsl(var(--sidebar-border))",
64+
ring: "hsl(var(--sidebar-ring))"
5565
}
5666
},
5767
borderRadius: {
68+
xl: "calc(var(--radius) + 4px)",
5869
lg: "var(--radius)",
5970
md: "calc(var(--radius) - 2px)",
6071
sm: "calc(var(--radius) - 4px)"
6172
},
6273
fontFamily: {
6374
sans: [...defaultTheme.fontFamily.sans]
6475
},
65-
typography: () => ({
66-
DEFAULT: {
67-
css: {
68-
a: {
69-
color: 'theme("colors.primary.DEFAULT")'
70-
}
71-
}
76+
keyframes: {
77+
"accordion-down": {
78+
from: { height: "0" },
79+
to: { height: "var(--bits-accordion-content-height)" }
80+
},
81+
"accordion-up": {
82+
from: { height: "var(--bits-accordion-content-height)" },
83+
to: { height: "0" }
84+
},
85+
"caret-blink": {
86+
"0%,70%,100%": { opacity: "1" },
87+
"20%,50%": { opacity: "0" }
7288
}
73-
})
89+
},
90+
animation: {
91+
"accordion-down": "accordion-down 0.2s ease-out",
92+
"accordion-up": "accordion-up 0.2s ease-out",
93+
"caret-blink": "caret-blink 1.25s ease-out infinite"
94+
}
7495
}
7596
},
76-
plugins: [typography]
77-
} satisfies Config;
97+
plugins: [tailwindcssAnimate]
98+
};
99+
100+
export default config;

0 commit comments

Comments
 (0)