@widgetic/design-system 0.5.22 → 0.5.24

package/dist/components/ui/badge/badge.svelte

@@ -1,17 +1,15 @@
+<!-- Figma: Badge (component set 50:4, node 50:2). -->
 <script lang="ts" module>
-	import { type VariantProps, tv } from "tailwind-variants";
+	import type { VariantProps } from "tailwind-variants";
 
 	export const badgeVariants = tv({
-		base: "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2",
+		base: "inline-flex h-5 max-w-full items-center gap-1.5 rounded-full border border-transparent px-2 text-label-small focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
 		variants: {
 			variant: {
-				default:
-					"bg-primary text-primary-foreground hover:bg-primary/80 border-transparent",
-				secondary:
-					"bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent",
-				destructive:
-					"bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent",
-				outline: "text-foreground",
+				default: "bg-secondary text-secondary-foreground",
+				secondary: "bg-brand-subtle text-brand-foreground",
+				destructive: "bg-destructive text-destructive-foreground",
+				outline: "border-border bg-transparent text-foreground",
 			},
 		},
 		defaultVariants: {
@@ -25,17 +23,19 @@
 <script lang="ts">
 	import type { WithElementRef } from "bits-ui";
 	import type { HTMLAnchorAttributes } from "svelte/elements";
-	import { cn } from "../../../utils.js";
+	import { cn, tv } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
 		href,
 		class: className,
 		variant = "default",
+		showDot = false,
 		children,
 		...restProps
 	}: WithElementRef<HTMLAnchorAttributes> & {
 		variant?: BadgeVariant;
+		showDot?: boolean;
 	} = $props();
 </script>
 
@@ -46,5 +46,17 @@
 	class={cn(badgeVariants({ variant }), className)}
 	{...restProps}
 >
+	{#if showDot}
+		<span
+			class={cn(
+				"size-1.5 shrink-0 rounded-full bg-current",
+				variant === "default" && "bg-secondary-foreground",
+				variant === "secondary" && "bg-brand-foreground",
+				variant === "destructive" && "bg-destructive-foreground",
+				variant === "outline" && "bg-foreground"
+			)}
+			aria-hidden="true"
+		></span>
+	{/if}
 	{@render children?.()}
 </svelte:element>

package/dist/components/ui/badge/badge.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from "tailwind-variants";
+import type { VariantProps } from "tailwind-variants";
 export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
     variant: {
         default: string;
@@ -6,12 +6,17 @@ export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
         destructive: string;
         outline: string;
     };
-}, undefined, "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2", import("tailwind-variants/dist/config.js").TVConfig<{
-    variant: {
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
+}, undefined, "inline-flex h-5 max-w-full items-center gap-1.5 rounded-full border border-transparent px-2 text-label-small focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", {
+    responsiveVariants?: boolean | (string | number | symbol)[] | {
+        variant?: boolean | (string | number | symbol)[] | undefined;
+    } | undefined;
+} & import("tailwind-variants/dist/config.js").TWMConfig & {
+    twMergeConfig: {
+        classGroups: {
+            "font-size": {
+                text: ("display-hero" | "heading-page" | "heading-section" | "body" | "body-medium" | "body-large" | "caption" | "caption-medium" | "label" | "label-small" | "code")[];
+            }[];
+        };
     };
 }, {
     variant: {
@@ -20,13 +25,6 @@ export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
         destructive: string;
         outline: string;
     };
-}>, {
-    variant: {
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
-    };
 }, undefined, import("tailwind-variants").TVReturnType<{
     variant: {
         default: string;
@@ -34,7 +32,7 @@ export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
         destructive: string;
         outline: string;
     };
-}, undefined, "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "inline-flex h-5 max-w-full items-center gap-1.5 rounded-full border border-transparent px-2 text-label-small focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", import("tailwind-variants/dist/config.js").TVConfig<{
     variant: {
         default: string;
         secondary: string;
@@ -54,6 +52,7 @@ import type { WithElementRef } from "bits-ui";
 import type { HTMLAnchorAttributes } from "svelte/elements";
 type $$ComponentProps = WithElementRef<HTMLAnchorAttributes> & {
     variant?: BadgeVariant;
+    showDot?: boolean;
 };
 declare const Badge: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type Badge = ReturnType<typeof Badge>;

package/dist/components/ui/breadcrumb/breadcrumb-ellipsis.svelte

@@ -4,7 +4,7 @@
 </script>
 
 <script lang="ts">
-	import Ellipsis from "lucide-svelte/icons/ellipsis";
+	import IconDots from "@tabler/icons-svelte/icons/dots";
 	import type { WithElementRef, WithoutChildren } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
 	import { cn } from "../../../utils.js";
@@ -23,6 +23,6 @@
 	class={cn("flex size-9 items-center justify-center", className)}
 	{...restProps}
 >
-	<Ellipsis class="size-4" />
+	<IconDots class="size-4 stroke-[1.333]" />
 	<span class="sr-only">More</span>
 </span>

package/dist/components/ui/breadcrumb/breadcrumb-link.svelte

@@ -16,7 +16,7 @@
 	} = $props();
 
 	const attrs = $derived({
-		class: cn("hover:text-foreground transition-colors", className),
+		class: cn("text-caption-medium text-muted-foreground hover:text-foreground transition-colors duration-fast", className),
 		href,
 		...restProps,
 	});

package/dist/components/ui/breadcrumb/breadcrumb-page.svelte

@@ -21,7 +21,7 @@
 	role="link"
 	aria-disabled="true"
 	aria-current="page"
-	class={cn("text-foreground font-normal", className)}
+	class={cn("text-caption-medium text-foreground", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/breadcrumb/breadcrumb-separator.svelte

@@ -4,7 +4,7 @@
 </script>
 
 <script lang="ts">
-	import ChevronRight from "lucide-svelte/icons/chevron-right";
+	import IconChevronRight from "@tabler/icons-svelte/icons/chevron-right";
 	import type { WithElementRef } from "bits-ui";
 	import type { HTMLLiAttributes } from "svelte/elements";
 	import { cn } from "../../../utils.js";
@@ -27,6 +27,6 @@
 	{#if children}
 		{@render children?.()}
 	{:else}
-		<ChevronRight class="rtl:-scale-x-100" />
+		<IconChevronRight class="stroke-[1.333] rtl:-scale-x-100" />
 	{/if}
 </li>

package/dist/components/ui/button/button-padding.d.ts

@@ -0,0 +1,9 @@
+/**
+ * True when a `class` string sets the padding of a side: `p-0`, `px-2`, `ps-4`, `pr-1`, also with a modifier in front
+ * (`!px-3`, `md:px-2`, `[&_svg]:p-0`) or behind it (`px-3!`).
+ *
+ * The Button reads this to leave its icon rule out (Figma pads the icon side by 12 and the label side by 16, see the note
+ * at the top of `button.svelte`): a caller that has chosen the sides itself, like an icon-only button with `p-0`, would
+ * otherwise get one of them changed by a rule it knows nothing about.
+ */
+export declare function classNameSetsPadding(className: string | null | undefined): boolean;

package/dist/components/ui/button/button-padding.js

@@ -0,0 +1,15 @@
+/**
+ * True when a `class` string sets the padding of a side: `p-0`, `px-2`, `ps-4`, `pr-1`, also with a modifier in front
+ * (`!px-3`, `md:px-2`, `[&_svg]:p-0`) or behind it (`px-3!`).
+ *
+ * The Button reads this to leave its icon rule out (Figma pads the icon side by 12 and the label side by 16, see the note
+ * at the top of `button.svelte`): a caller that has chosen the sides itself, like an icon-only button with `p-0`, would
+ * otherwise get one of them changed by a rule it knows nothing about.
+ */
+export function classNameSetsPadding(className) {
+    if (!className)
+        return false;
+    // The utility has to start a class name (`px-` in `placeholder-x` or `peer-x` is not a padding): at the start, after a
+    // space or after the `:` of a modifier. The hyphen after the letters is what tells `pl-` from `placeholder`.
+    return /(^|[\s:])!?-?(?:p|px|ps|pe|pl|pr)-/.test(className);
+}

package/dist/components/ui/button/button.svelte

@@ -1,48 +1,102 @@
+<!--
+	Figma: Button (component set 33:4, page Button); Button Small (33:215) maps to size `sm`.
+	Width: the button pads its sides by 12 (small: 8) and the label sits in a box with 4 more on each side, so a button with
+	only a label is the text + 32 wide (small: + 24). With an icon first it is the text + 48 (small: + 40): the icon touches
+	the 12 and the label keeps its 4 + 12 on the other side; with an icon at each end both sides are 12 (text + 64).
+	The 1px stroke of Outline and Stroke sits inside that padding and takes no room in Figma.
+	With bits-ui triggers (Dialog, DropdownMenu, Tooltip, …), use `{#snippet child({ props })}` and spread
+	`props` onto `<Button {...props}>` — do not wrap `<Button>` inside a default trigger (nested buttons).
+-->
 <script lang="ts" module>
 	import type { WithElementRef } from "bits-ui";
 	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
-	import { type VariantProps, tv } from "tailwind-variants";
+	import type { VariantProps } from "tailwind-variants";
 
 	export const buttonVariants = tv({
-		base: "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+		base: "inline-flex items-center justify-center gap-1 whitespace-nowrap rounded-lg text-label transition-colors duration-fast press-feedback focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.333]",
 		variants: {
 			variant: {
 				default: "bg-primary text-primary-foreground hover:bg-primary/90",
-				destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+				destructive:
+					"bg-destructive text-destructive-foreground hover:bg-destructive/90",
 				outline:
-					"border-input bg-background hover:bg-accent hover:text-accent-foreground border",
-				secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-				ghost: "hover:bg-accent hover:text-accent-foreground",
+					"border border-input bg-background text-foreground hover:bg-accent hover:text-foreground",
+				secondary:
+					"bg-secondary text-secondary-foreground hover:bg-accent hover:text-foreground",
+				ghost: "text-foreground hover:bg-accent hover:text-foreground",
+				accent: "bg-brand text-brand-foreground hover:bg-brand/90",
+				stroke:
+					"border border-border-strong/30 bg-transparent text-foreground hover:bg-accent hover:text-foreground",
 				link: "text-primary underline-offset-4 hover:underline",
 			},
 			size: {
-				default: "h-10 px-4 py-2",
-				sm: "h-9 rounded-md px-3",
-				lg: "h-11 rounded-md px-8",
-				icon: "h-10 w-10",
+				// The 12 of the side (small: 8) and the 4 of the label box (see the note at the top), as Figma
+				default: "h-9 px-4",
+				sm: "h-8 px-3",
+				lg: "h-10 px-6",
+				icon: "h-9 w-9",
+				"icon-sm": "h-8 w-8",
+			},
+			// Switched on by the Button below and not by every caller of `buttonVariants` (a calendar cell or a menu trigger
+			// sets its own padding): an icon sits at the side with no label box, so that side is 12 (small: 8)
+			iconPadding: {
+				true: "",
+				false: "",
 			},
 		},
+		compoundVariants: [
+			// The first icon is taken as the leading one (CSS cannot tell a leading icon from a trailing one, text is no
+			// element); a second icon makes the other side 12 as well. Either way the width is the one Figma draws.
+			{
+				size: "default",
+				iconPadding: true,
+				class: "has-[>svg]:ps-3 has-[>svg:nth-of-type(2)]:pe-3",
+			},
+			{
+				size: "sm",
+				iconPadding: true,
+				class: "has-[>svg]:ps-2 has-[>svg:nth-of-type(2)]:pe-2",
+			},
+			// Figma draws the 1px stroke of Outline and Stroke inside the padding, a CSS border sits outside it: those two take
+			// 1px off every side, so that they are as wide as the other styles
+			{ variant: ["outline", "stroke"], size: "default", class: "px-[15px]" },
+			{ variant: ["outline", "stroke"], size: "sm", class: "px-[11px]" },
+			{
+				variant: ["outline", "stroke"],
+				size: "default",
+				iconPadding: true,
+				class: "has-[>svg]:ps-[11px] has-[>svg:nth-of-type(2)]:pe-[11px]",
+			},
+			{
+				variant: ["outline", "stroke"],
+				size: "sm",
+				iconPadding: true,
+				class: "has-[>svg]:ps-[7px] has-[>svg:nth-of-type(2)]:pe-[7px]",
+			},
+		],
 		defaultVariants: {
 			variant: "default",
 			size: "default",
+			iconPadding: false,
 		},
 	});
 
 	export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
 	export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
 
-    export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
-        WithElementRef<HTMLAnchorAttributes> & {
-            ref?: any;
-            href?: string;
-            class?: string;
-            variant?: ButtonVariant;
-            size?: ButtonSize;
-        };
+	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+		WithElementRef<HTMLAnchorAttributes> & {
+			ref?: any;
+			href?: string;
+			class?: string;
+			variant?: ButtonVariant;
+			size?: ButtonSize;
+		};
 </script>
 
 <script lang="ts">
-	import { cn } from "../../../utils.js";
+	import { cn, tv } from "../../../utils.js";
+	import { classNameSetsPadding } from "./button-padding.js";
 
 	let {
 		class: className,
@@ -54,24 +108,20 @@
 		children,
 		...restProps
 	}: ButtonProps = $props();
+
+	// A caller that sets the padding itself (`p-0` on an icon-only button, `px-2`, `!px-3`, …) has chosen the sides: the rule
+	// for an icon would change one of them, so it stays off then
+	const classes = $derived(
+		cn(buttonVariants({ variant, size, iconPadding: !classNameSetsPadding(className), className })),
+	);
 </script>
 
 {#if href}
-	<a
-		bind:this={ref}
-		class={cn(buttonVariants({ variant, size, className }))}
-		{href}
-		{...restProps}
-	>
+	<a bind:this={ref} class={classes} {href} {...restProps}>
 		{@render children?.()}
 	</a>
 {:else}
-	<button
-		bind:this={ref}
-		class={cn(buttonVariants({ variant, size, className }))}
-		{type}
-		{...restProps}
-	>
+	<button bind:this={ref} class={classes} {type} {...restProps}>
 		{@render children?.()}
 	</button>
 {/if}

package/dist/components/ui/button/button.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { WithElementRef } from "bits-ui";
 import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
-import { type VariantProps } from "tailwind-variants";
+import type { VariantProps } from "tailwind-variants";
 export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
     variant: {
         default: string;
@@ -8,6 +8,8 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         outline: string;
         secondary: string;
         ghost: string;
+        accent: string;
+        stroke: string;
         link: string;
     };
     size: {
@@ -15,21 +17,25 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         sm: string;
         lg: string;
         icon: string;
+        "icon-sm": string;
     };
-}, undefined, "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", import("tailwind-variants/dist/config.js").TVConfig<{
-    variant: {
-        default: string;
-        destructive: string;
-        outline: string;
-        secondary: string;
-        ghost: string;
-        link: string;
+    iconPadding: {
+        true: string;
+        false: string;
     };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-        icon: string;
+}, undefined, "inline-flex items-center justify-center gap-1 whitespace-nowrap rounded-lg text-label transition-colors duration-fast press-feedback focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.333]", {
+    responsiveVariants?: boolean | (string | number | symbol)[] | {
+        size?: boolean | (string | number | symbol)[] | undefined;
+        variant?: boolean | (string | number | symbol)[] | undefined;
+        iconPadding?: boolean | (string | number | symbol)[] | undefined;
+    } | undefined;
+} & import("tailwind-variants/dist/config.js").TWMConfig & {
+    twMergeConfig: {
+        classGroups: {
+            "font-size": {
+                text: ("display-hero" | "heading-page" | "heading-section" | "body" | "body-medium" | "body-large" | "caption" | "caption-medium" | "label" | "label-small" | "code")[];
+            }[];
+        };
     };
 }, {
     variant: {
@@ -38,6 +44,8 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         outline: string;
         secondary: string;
         ghost: string;
+        accent: string;
+        stroke: string;
         link: string;
     };
     size: {
@@ -45,21 +53,11 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         sm: string;
         lg: string;
         icon: string;
+        "icon-sm": string;
     };
-}>, {
-    variant: {
-        default: string;
-        destructive: string;
-        outline: string;
-        secondary: string;
-        ghost: string;
-        link: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-        icon: string;
+    iconPadding: {
+        true: string;
+        false: string;
     };
 }, undefined, import("tailwind-variants").TVReturnType<{
     variant: {
@@ -68,6 +66,8 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         outline: string;
         secondary: string;
         ghost: string;
+        accent: string;
+        stroke: string;
         link: string;
     };
     size: {
@@ -75,14 +75,21 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         sm: string;
         lg: string;
         icon: string;
+        "icon-sm": string;
     };
-}, undefined, "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", import("tailwind-variants/dist/config.js").TVConfig<{
+    iconPadding: {
+        true: string;
+        false: string;
+    };
+}, undefined, "inline-flex items-center justify-center gap-1 whitespace-nowrap rounded-lg text-label transition-colors duration-fast press-feedback focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.333]", import("tailwind-variants/dist/config.js").TVConfig<{
     variant: {
         default: string;
         destructive: string;
         outline: string;
         secondary: string;
         ghost: string;
+        accent: string;
+        stroke: string;
         link: string;
     };
     size: {
@@ -90,6 +97,11 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         sm: string;
         lg: string;
         icon: string;
+        "icon-sm": string;
+    };
+    iconPadding: {
+        true: string;
+        false: string;
     };
 }, {
     variant: {
@@ -98,6 +110,8 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         outline: string;
         secondary: string;
         ghost: string;
+        accent: string;
+        stroke: string;
         link: string;
     };
     size: {
@@ -105,6 +119,11 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         sm: string;
         lg: string;
         icon: string;
+        "icon-sm": string;
+    };
+    iconPadding: {
+        true: string;
+        false: string;
     };
 }>, unknown, unknown, undefined>>;
 export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];

package/dist/components/ui/calendar/calendar-cell.svelte

@@ -16,7 +16,7 @@
 <CalendarPrimitive.Cell
 	bind:ref
 	class={cn(
-		"[&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50 relative size-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md",
+		"[&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50 relative size-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-lg",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/calendar/calendar-head-cell.svelte

@@ -15,6 +15,6 @@
 
 <CalendarPrimitive.HeadCell
 	bind:ref
-	class={cn("text-muted-foreground w-9 rounded-md text-[0.8rem] font-normal", className)}
+	class={cn("text-caption text-muted-foreground w-9 rounded-lg font-normal", className)}
 	{...restProps}
 />

package/dist/components/ui/calendar/calendar-next-button.svelte

@@ -11,7 +11,7 @@
 </script>
 
 <script lang="ts">
-		import ChevronRight from "lucide-svelte/icons/chevron-right";
+	import IconChevronRight from "@tabler/icons-svelte/icons/chevron-right";
 	import { buttonVariants } from "../button/index.js";
 	import { cn } from "../../../utils.js";
 
@@ -25,7 +25,7 @@
 </script>
 
 {#snippet Fallback()}
-	<ChevronRight class="size-4 rtl:-scale-x-100" />
+	<IconChevronRight class="size-4 stroke-[1.333] rtl:-scale-x-100" />
 {/snippet}
 
 <CalendarPrimitive.NextButton

package/dist/components/ui/calendar/calendar-prev-button.svelte

@@ -11,7 +11,7 @@
 </script>
 
 <script lang="ts">
-		import ChevronLeft from "lucide-svelte/icons/chevron-left";
+	import IconChevronLeft from "@tabler/icons-svelte/icons/chevron-left";
 	import { buttonVariants } from "../button/index.js";
 	import { cn } from "../../../utils.js";
 
@@ -25,7 +25,7 @@
 </script>
 
 {#snippet Fallback()}
-	<ChevronLeft class="size-4 rtl:-scale-x-100" />
+	<IconChevronLeft class="size-4 stroke-[1.333] rtl:-scale-x-100" />
 {/snippet}
 
 <CalendarPrimitive.PrevButton

package/dist/components/ui/calendar/calendar.svelte.d.ts

@@ -6,6 +6,6 @@ export type CalendarProps = WithoutChildrenOrChild<CalendarPrimitive.RootProps>
     nextLabel?: string;
 };
 import * as Calendar from "./index.js";
-declare const Calendar: import("svelte").Component<CalendarProps, {}, "placeholder" | "ref" | "value">;
+declare const Calendar: import("svelte").Component<CalendarProps, {}, "ref" | "value" | "placeholder">;
 type Calendar = ReturnType<typeof Calendar>;
 export default Calendar;

package/dist/components/ui/card/card-description.svelte

@@ -16,6 +16,6 @@
 	}: CardDescriptionProps = $props();
 </script>
 
-<p bind:this={ref} class={cn("text-muted-foreground text-sm", className)} {...restProps}>
+<p bind:this={ref} class={cn("text-body text-muted-foreground", className)} {...restProps}>
 	{@render children?.()}
 </p>

package/dist/components/ui/card/card-title.svelte

@@ -18,7 +18,7 @@
 	role="heading"
 	aria-level={level}
 	bind:this={ref}
-	class={cn("text-2xl font-semibold leading-none tracking-tight", className)}
+	class={cn("text-heading-section", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/card/card.svelte

@@ -18,7 +18,7 @@
 
 <div
 	bind:this={ref}
-	class={cn("bg-card text-card-foreground rounded-lg border shadow-2xs", className)}
+	class={cn("bg-card text-card-foreground border-border rounded-card border", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/checkbox/checkbox.svelte

@@ -1,11 +1,12 @@
+<!-- Figma: Checkbox (component set 170:73, node 170:73). -->
 <script lang="ts" module>
 	import { Checkbox as CheckboxPrimitive, type WithoutChildrenOrChild } from "bits-ui";
 	export type CheckboxProps = WithoutChildrenOrChild<CheckboxPrimitive.RootProps>;
 </script>
 
 <script lang="ts">
-		import Check from "lucide-svelte/icons/check";
-	import Minus from "lucide-svelte/icons/minus";
+	import IconCheck from "@tabler/icons-svelte/icons/check";
+	import IconMinus from "@tabler/icons-svelte/icons/minus";
 	import { cn } from "../../../utils.js";
 
 	let {
@@ -20,7 +21,7 @@
 <CheckboxPrimitive.Root
 	bind:ref
 	class={cn(
-		"border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer box-content size-4 shrink-0 rounded-sm border focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50",
+		"peer flex size-4 shrink-0 items-center justify-center rounded-sm border border-input bg-background text-primary-foreground transition-colors duration-fast hover:bg-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary",
 		className
 	)}
 	bind:checked
@@ -30,9 +31,12 @@
 	{#snippet children({ checked, indeterminate })}
 		<div class="flex size-4 items-center justify-center text-current">
 			{#if indeterminate}
-				<Minus class="size-3.5" />
+				<IconMinus class="size-3.5 stroke-[1.333]" aria-hidden="true" />
 			{:else}
-				<Check class={cn("size-3.5", !checked && "text-transparent")} />
+				<IconCheck
+					class={cn("size-3.5 stroke-[1.333]", !checked && "text-transparent")}
+					aria-hidden="true"
+				/>
 			{/if}
 		</div>
 	{/snippet}