@heyramzi/ui 0.0.0-stage → 6.0.1

package/src/shadcn/breadcrumb/breadcrumb-item.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLLiAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLLiAttributes> = $props();
+</script>
+
+<li
+	bind:this={ref}
+	data-slot="breadcrumb-item"
+	class={cn("inline-flex items-center gap-1.5", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</li>

package/src/shadcn/breadcrumb/breadcrumb-link.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from "svelte/elements";
+	import type { Snippet } from "svelte";
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		href = undefined,
+		child,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
+		child?: Snippet<[{ props: HTMLAnchorAttributes }]>;
+	} = $props();
+
+	const attrs = $derived({
+		"data-slot": "breadcrumb-link",
+		class: cn("hover:text-foreground transition-colors", className),
+		href,
+		...restProps,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: attrs })}
+{:else}
+	<a bind:this={ref} {...attrs}>
+		{@render children?.()}
+	</a>
+{/if}

package/src/shadcn/breadcrumb/breadcrumb-list.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLOlAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLOlAttributes> = $props();
+</script>
+
+<ol
+	bind:this={ref}
+	data-slot="breadcrumb-list"
+	class={cn(
+		"text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+		className,
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</ol>

package/src/shadcn/breadcrumb/breadcrumb-page.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="breadcrumb-page"
+	role="link"
+	aria-disabled="true"
+	aria-current="page"
+	class={cn("text-foreground font-normal", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>

package/src/shadcn/breadcrumb/breadcrumb-separator.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import type { HTMLLiAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLLiAttributes> = $props();
+</script>
+
+<li
+	bind:this={ref}
+	data-slot="breadcrumb-separator"
+	role="presentation"
+	aria-hidden="true"
+	class={cn("[&>svg]:size-3.5", className)}
+	{...restProps}
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		<ChevronRightIcon />
+	{/if}
+</li>

package/src/shadcn/breadcrumb/breadcrumb.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { WithElementRef } from "@heyramzi/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<nav
+	bind:this={ref}
+	data-slot="breadcrumb"
+	class={className}
+	aria-label="breadcrumb"
+	{...restProps}
+>
+	{@render children?.()}
+</nav>

package/src/shadcn/breadcrumb/index.ts

@@ -0,0 +1,25 @@
+import Root from "./breadcrumb.svelte";
+import Ellipsis from "./breadcrumb-ellipsis.svelte";
+import Item from "./breadcrumb-item.svelte";
+import Separator from "./breadcrumb-separator.svelte";
+import Link from "./breadcrumb-link.svelte";
+import List from "./breadcrumb-list.svelte";
+import Page from "./breadcrumb-page.svelte";
+
+export {
+  Root,
+  Ellipsis,
+  Item,
+  Separator,
+  Link,
+  List,
+  Page,
+  //
+  Root as Breadcrumb,
+  Ellipsis as BreadcrumbEllipsis,
+  Item as BreadcrumbItem,
+  Separator as BreadcrumbSeparator,
+  Link as BreadcrumbLink,
+  List as BreadcrumbList,
+  Page as BreadcrumbPage,
+};

package/src/shadcn/bubble/bubble-content.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		child,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+	} = $props();
+
+	const mergedProps = $derived({
+		class: cn(
+			"cn-bubble-content w-fit max-w-full min-w-0 overflow-hidden wrap-break-word [button]:text-left [button,a]:transition-colors rounded-xl border border-transparent px-3 py-2 text-sm leading-relaxed [button,a]:outline-none [button,a]:focus-visible:border-ring [button,a]:focus-visible:ring-3 [button,a]:focus-visible:ring-ring/50 group-data-[align=end]/bubble:self-end",
+			className,
+		),
+		"data-slot": "bubble-content",
+		...restProps,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div bind:this={ref} {...mergedProps}>
+		{@render mergedProps.children?.()}
+	</div>
+{/if}

package/src/shadcn/bubble/bubble-group.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="bubble-group"
+	class={cn("cn-bubble-group flex min-w-0 flex-col gap-2", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/shadcn/bubble/bubble-reactions.svelte

@@ -0,0 +1,52 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const bubbleReactionsVariants = tv({
+		base: "cn-bubble-reactions absolute z-10 flex w-fit items-center justify-center rounded-full ring-3 ring-card bg-muted shrink-0 gap-1 px-1.5 py-0.5 has-[button]:p-0 text-sm",
+		variants: {
+			side: {
+				top: "cn-bubble-reactions-side-top top-0 -translate-y-3/4",
+				bottom: "cn-bubble-reactions-side-bottom bottom-0 translate-y-3/4",
+			},
+			align: {
+				start: "cn-bubble-reactions-align-start left-3",
+				end: "cn-bubble-reactions-align-end right-3",
+			},
+		},
+		defaultVariants: {
+			side: "bottom",
+			align: "end",
+		},
+	});
+
+	export type BubbleReactionsSide = VariantProps<typeof bubbleReactionsVariants>["side"];
+	export type BubbleReactionsAlign = VariantProps<typeof bubbleReactionsVariants>["align"];
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		side = "bottom",
+		align = "end",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		side?: BubbleReactionsSide;
+		align?: BubbleReactionsAlign;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="bubble-reactions"
+	data-align={align}
+	data-side={side}
+	class={cn(bubbleReactionsVariants({ side, align }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/shadcn/bubble/bubble.svelte

@@ -0,0 +1,58 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const bubbleVariants = tv({
+		base: "cn-bubble group/bubble relative flex w-fit min-w-0 flex-col gap-1 data-[align=end]:self-end max-w-[80%] data-[variant=ghost]:max-w-full group-data-[align=end]/message:self-end",
+		variants: {
+			variant: {
+				default:
+					"cn-bubble-variant-default *:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80",
+				secondary:
+					"cn-bubble-variant-secondary *:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]",
+				muted:
+					"cn-bubble-variant-muted *:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]",
+				tinted:
+					"cn-bubble-variant-tinted *:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)]",
+				outline:
+					"cn-bubble-variant-outline *:data-[slot=bubble-content]:bg-background *:data-[slot=bubble-content]:border-border [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30",
+				ghost:
+					"cn-bubble-variant-ghost *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50 border-none",
+				destructive:
+					"cn-bubble-variant-destructive *:data-[slot=bubble-content]:bg-destructive/10 dark:*:data-[slot=bubble-content]:bg-destructive/20 *:data-[slot=bubble-content]:text-destructive [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type BubbleVariant = VariantProps<typeof bubbleVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "default",
+		align = "start",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		variant?: BubbleVariant;
+		align?: "start" | "end";
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="bubble"
+	data-variant={variant}
+	data-align={align}
+	class={cn(bubbleVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/shadcn/bubble/index.ts

@@ -0,0 +1,25 @@
+import Content from "./bubble-content.svelte";
+import Group from "./bubble-group.svelte";
+import Reactions, {
+  bubbleReactionsVariants,
+  type BubbleReactionsAlign,
+  type BubbleReactionsSide,
+} from "./bubble-reactions.svelte";
+import Root, { bubbleVariants, type BubbleVariant } from "./bubble.svelte";
+
+export {
+  Root,
+  Group,
+  Content,
+  Reactions,
+  bubbleVariants,
+  bubbleReactionsVariants,
+  type BubbleVariant,
+  type BubbleReactionsSide,
+  type BubbleReactionsAlign,
+  //
+  Root as Bubble,
+  Group as BubbleGroup,
+  Content as BubbleContent,
+  Reactions as BubbleReactions,
+};

package/src/shadcn/button/button.svelte

@@ -0,0 +1,121 @@
+<script lang="ts" module>
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const buttonVariants = tv({
+		base: "t-press focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		variants: {
+			// Five roles: fill, outline, ghost, destructive, and dashed for an empty
+			// slot. `secondary` and `link` went on 4 Sep 2026, one real caller between
+			// them.
+			variant: {
+				default:
+					"bg-primary text-primary-foreground shadow-key hover:bg-primary/90 active:shadow-none [a]:hover:bg-primary/80",
+				outline:
+					"border-border bg-background shadow-btn hover:bg-muted hover:text-foreground active:shadow-none dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+				ghost:
+					"hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+				destructive:
+					"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive dark:text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
+				// WHY a variant and not a class every call site writes: "add another
+
+				// row", "add a step", "attach a call" is one affordance, and it was hand-drawn eleven times across the app with four radii, three text sizes and three different hover hues.
+
+				// A dashed edge says the slot is empty and the click fills it; nothing else in the set says that.
+				dashed:
+					"border-dashed border-border text-muted-foreground hover:border-muted-foreground/40 hover:bg-muted/40 hover:text-foreground",
+			},
+			// Three heights; a square button is one of them with `icon` set. Eight
+			// until 4 Sep 2026: `icon-lg` had no caller, `xs` drew 24px into a 28px
+			// row.
+
+			// WHY: every height is authored for a mouse. Under a thumb, Apple's floor is 44px, so each size grows wherever a coarse pointer exists.
+
+			// WHY sm carries a hit area: 28px is under the 32px desktop floor and the 40px coarse height is under 44. The ::after box stays the same 32px (44 on coarse) square whatever the visual size, so a dense toolbar keeps its look.
+
+			// Icon buttons grow both axes because they have no label to widen them. any-pointer, not pointer: see the note in tokens.css.
+			size: {
+				sm: "relative after:absolute after:top-1/2 after:left-1/2 after:h-[max(100%,2rem)] after:w-[max(100%,2rem)] after:-translate-x-1/2 after:-translate-y-1/2 any-pointer-coarse:after:h-[max(100%,2.75rem)] any-pointer-coarse:after:w-[max(100%,2.75rem)] h-7 gap-1 px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5 any-pointer-coarse:h-10 any-pointer-coarse:px-3",
+				default:
+					"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 any-pointer-coarse:h-11 any-pointer-coarse:px-3.5",
+				lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3 any-pointer-coarse:h-11 any-pointer-coarse:px-3.5",
+			},
+			/** A glyph with no label: square at the height its size already sets. */
+			icon: { true: "", false: "" },
+		},
+		compoundVariants: [
+			{
+				size: "sm",
+				icon: true,
+				class: "size-7 px-0 any-pointer-coarse:size-10 any-pointer-coarse:px-0",
+			},
+			{
+				size: "default",
+				icon: true,
+				class: "size-8 px-0 any-pointer-coarse:size-11 any-pointer-coarse:px-0",
+			},
+			{
+				size: "lg",
+				icon: true,
+				class: "size-9 px-0 any-pointer-coarse:size-11 any-pointer-coarse:px-0",
+			},
+		],
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+			icon: false,
+		},
+	});
+
+	export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
+	export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
+
+	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+		WithElementRef<HTMLAnchorAttributes> & {
+			variant?: ButtonVariant;
+			size?: ButtonSize;
+			icon?: boolean;
+		};
+</script>
+
+<script lang="ts">
+	let {
+		class: className,
+		variant = "default",
+		size = "default",
+		icon = false,
+		ref = $bindable(null),
+		href = undefined,
+		type = "button",
+		disabled,
+		children,
+		...restProps
+	}: ButtonProps = $props();
+</script>
+
+{#if href}
+	<a
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size, icon }), className)}
+		href={disabled ? undefined : href}
+		aria-disabled={disabled}
+		role={disabled ? "link" : undefined}
+		tabindex={disabled ? -1 : undefined}
+		{...restProps}
+	>
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size, icon }), className)}
+		{type}
+		{disabled}
+		{...restProps}
+	>
+		{@render children?.()}
+	</button>
+{/if}

package/src/shadcn/button/index.ts

@@ -0,0 +1,17 @@
+import Root, {
+  type ButtonProps,
+  type ButtonSize,
+  type ButtonVariant,
+  buttonVariants,
+} from "./button.svelte";
+
+export {
+  Root,
+  type ButtonProps as Props,
+  //
+  Root as Button,
+  buttonVariants,
+  type ButtonProps,
+  type ButtonSize,
+  type ButtonVariant,
+};

package/src/shadcn/calendar/calendar-caption.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import type { ComponentProps } from "svelte";
+	import type Calendar from "./calendar.svelte";
+	import CalendarMonthSelect from "./calendar-month-select.svelte";
+	import CalendarYearSelect from "./calendar-year-select.svelte";
+	import { DateFormatter, getLocalTimeZone, type DateValue } from "@internationalized/date";
+
+	let {
+		captionLayout,
+		months,
+		monthFormat,
+		years,
+		yearFormat,
+		month,
+		locale,
+		placeholder = $bindable(),
+		monthIndex = 0,
+	}: {
+		captionLayout: ComponentProps<typeof Calendar>["captionLayout"];
+		months: ComponentProps<typeof CalendarMonthSelect>["months"];
+		monthFormat: ComponentProps<typeof CalendarMonthSelect>["monthFormat"];
+		years: ComponentProps<typeof CalendarYearSelect>["years"];
+		yearFormat: ComponentProps<typeof CalendarYearSelect>["yearFormat"];
+		month: DateValue;
+		placeholder: DateValue | undefined;
+		locale: string;
+		monthIndex: number;
+	} = $props();
+
+	function formatYear(date: DateValue) {
+		const dateObj = date.toDate(getLocalTimeZone());
+		if (typeof yearFormat === "function") return yearFormat(dateObj.getFullYear());
+		return new DateFormatter(locale, { year: yearFormat }).format(dateObj);
+	}
+
+	function formatMonth(date: DateValue) {
+		const dateObj = date.toDate(getLocalTimeZone());
+		if (typeof monthFormat === "function") return monthFormat(dateObj.getMonth() + 1);
+		return new DateFormatter(locale, { month: monthFormat }).format(dateObj);
+	}
+</script>
+
+{#snippet MonthSelect()}
+	<CalendarMonthSelect
+		{months}
+		{monthFormat}
+		value={month.month}
+		onchange={(e) => {
+			if (!placeholder) return;
+			const v = Number.parseInt(e.currentTarget.value);
+			const newPlaceholder = placeholder.set({ month: v });
+			placeholder = newPlaceholder.subtract({ months: monthIndex });
+		}}
+	/>
+{/snippet}
+
+{#snippet YearSelect()}
+	<CalendarYearSelect {years} {yearFormat} value={month.year} />
+{/snippet}
+
+{#if captionLayout === "dropdown"}
+	{@render MonthSelect()}
+	{@render YearSelect()}
+{:else if captionLayout === "dropdown-months"}
+	{@render MonthSelect()}
+	{#if placeholder}
+		{formatYear(placeholder)}
+	{/if}
+{:else if captionLayout === "dropdown-years"}
+	{#if placeholder}
+		{formatMonth(placeholder)}
+	{/if}
+	{@render YearSelect()}
+{:else}
+	{formatMonth(month)} {formatYear(month)}
+{/if}

package/src/shadcn/calendar/calendar-cell.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "@heyramzi/utils";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.CellProps = $props();
+</script>
+
+<CalendarPrimitive.Cell
+	bind:ref
+	class={cn(
+		"relative size-(--cell-size) p-0 text-center text-sm focus-within:z-20 [&:first-child[data-selected]_[data-bits-day]]:rounded-s-md [&:last-child[data-selected]_[data-bits-day]]:rounded-e-md",
+		className,
+	)}
+	{...restProps}
+/>

package/src/shadcn/calendar/calendar-day.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { buttonVariants } from "../button/index.js";
+	import { cn } from "@heyramzi/utils";
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.DayProps = $props();
+</script>
+
+<CalendarPrimitive.Day
+	bind:ref
+	class={cn(
+		buttonVariants({ variant: "ghost" }),
+		"flex size-(--cell-size) flex-col items-center justify-center gap-1 p-0 leading-none font-normal whitespace-nowrap select-none",
+		"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground [&[data-today][data-disabled]]:text-muted-foreground",
+		"data-[selected]:bg-primary dark:data-[selected]:hover:bg-accent/50 data-[selected]:text-primary-foreground",
+		// Outside months
+		"[&[data-outside-month]:not([data-selected])]:text-muted-foreground [&[data-outside-month]:not([data-selected])]:hover:text-accent-foreground",
+		// Disabled
+		"data-[disabled]:text-muted-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		// Unavailable
+		"data-[unavailable]:text-muted-foreground data-[unavailable]:line-through",
+		// hover
+		"dark:hover:text-accent-foreground",
+		// focus
+		"focus:border-ring focus:ring-ring/50 focus:relative",
+		// inner spans
+		"[&>span]:text-xs [&>span]:opacity-70",
+		className,
+	)}
+	{...restProps}
+/>

package/src/shadcn/calendar/calendar-grid-body.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "@heyramzi/utils";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.GridBodyProps = $props();
+</script>
+
+<CalendarPrimitive.GridBody bind:ref class={cn(className)} {...restProps} />

package/src/shadcn/calendar/calendar-grid-head.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "@heyramzi/utils";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.GridHeadProps = $props();
+</script>
+
+<CalendarPrimitive.GridHead bind:ref class={cn(className)} {...restProps} />