pika-ux 1.0.0-beta.0

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/button/button.svelte

@@ -0,0 +1,81 @@
+<script lang="ts" module>
+    import { cn, type WithElementRef } from '../utils.js';
+    import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+    import { type VariantProps, tv } from 'tailwind-variants';
+
+    export const buttonVariants = tv({
+        base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        variants: {
+            variant: {
+                default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 active:brightness-90',
+                destructive:
+                    'bg-destructive shadow-xs hover:bg-destructive/90 active:bg-destructive/70 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white',
+                outline:
+                    'bg-background shadow-xs hover:bg-accent hover:text-accent-foreground active:brightness-90 active:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border',
+                secondary:
+                    'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80 active:brightness-90',
+                ghost: 'hover:bg-accent hover:text-accent-foreground active:bg-accent/80 active:brightness-90 dark:hover:bg-accent/50',
+                link: 'text-primary underline-offset-4 hover:underline active:text-primary/70',
+            },
+            size: {
+                default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+                sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',
+                lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+                icon: 'size-9',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+            size: 'default',
+        },
+    });
+
+    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;
+        };
+</script>
+
+<script lang="ts">
+    let {
+        class: className,
+        variant = 'default',
+        size = 'default',
+        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 }), 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 }), 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 "../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.CellProps = $props();
+</script>
+
+<CalendarPrimitive.Cell
+	class={cn(
+		"[&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50 relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md",
+		className
+	)}
+	bind:ref
+	{...restProps}
+/>

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

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { buttonVariants } from "../button/index.js";
+	import { cn } from "../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.DayProps = $props();
+</script>
+
+<CalendarPrimitive.Day
+	class={cn(
+		buttonVariants({ variant: "ghost" }),
+		"size-8 p-0 font-normal",
+		// Today
+		"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground",
+		// Selected
+		"data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground data-[selected]:opacity-100",
+		// Disabled
+		"data-[disabled]:text-muted-foreground data-[disabled]:opacity-50",
+		// Unavailable
+		"data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through",
+		// Outside months
+		"data-[outside-month]:text-muted-foreground [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground data-[outside-month]:pointer-events-none data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:opacity-30",
+		className
+	)}
+	bind:ref
+	{...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 "../utils.js";
+
+	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 "../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.GridHeadProps = $props();
+</script>
+
+<CalendarPrimitive.GridHead bind:ref class={cn(className)} {...restProps} />

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

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

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.GridProps = $props();
+</script>
+
+<CalendarPrimitive.Grid
+	bind:ref
+	class={cn("w-full border-collapse space-y-1", className)}
+	{...restProps}
+/>

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.HeadCellProps = $props();
+</script>
+
+<CalendarPrimitive.HeadCell
+	bind:ref
+	class={cn("text-muted-foreground w-8 rounded-md text-[0.8rem] font-normal", className)}
+	{...restProps}
+/>

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.HeaderProps = $props();
+</script>
+
+<CalendarPrimitive.Header
+	bind:ref
+	class={cn("relative flex w-full items-center justify-between pt-1", className)}
+	{...restProps}
+/>

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

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

package/src/shadcn/calendar/calendar-month-select.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    import { Calendar as CalendarPrimitive } from 'bits-ui';
+    import { cn, type WithoutChildrenOrChild } from '../utils';
+    import ChevronDownIcon from '$icons/lucide/chevron-down';
+
+    let { ref = $bindable(null), class: className, value, onchange, ...restProps }: WithoutChildrenOrChild<CalendarPrimitive.MonthSelectProps> = $props();
+</script>
+
+<span class={cn('has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative flex rounded-md border', className)}>
+    <CalendarPrimitive.MonthSelect bind:ref class="absolute inset-0 opacity-0" {...restProps}>
+        {#snippet child({ props, monthItems, selectedMonthItem })}
+            <select {...props} {value} {onchange}>
+                {#each monthItems as monthItem (monthItem.value)}
+                    <option value={monthItem.value} selected={value !== undefined ? monthItem.value === value : monthItem.value === selectedMonthItem.value}>
+                        {monthItem.label}
+                    </option>
+                {/each}
+            </select>
+            <span class="[&>svg]:text-muted-foreground flex h-8 select-none items-center gap-1 rounded-md pl-2 pr-1 text-sm font-medium [&>svg]:size-3.5" aria-hidden="true">
+                {monthItems.find((item) => item.value === value)?.label || selectedMonthItem.label}
+                <ChevronDownIcon class="size-4" />
+            </span>
+        {/snippet}
+    </CalendarPrimitive.MonthSelect>
+</span>

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

@@ -0,0 +1,15 @@
+<script lang="ts">
+    import { type WithElementRef, cn } from '../utils';
+    import type { HTMLAttributes } from 'svelte/elements';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div {...restProps} bind:this={ref} class={cn('flex flex-col', className)}>
+    {@render children?.()}
+</div>

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	class={cn("mt-4 flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+    import { cn, type WithElementRef } from '../utils';
+    import type { HTMLAttributes } from 'svelte/elements';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        ...restProps
+    }: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<nav
+    {...restProps}
+    bind:this={ref}
+    class={cn('absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1', className)}
+>
+    {@render children?.()}
+</nav>

package/src/shadcn/calendar/calendar-next-button.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+    import { Calendar as CalendarPrimitive } from 'bits-ui';
+    import ChevronRight from '$icons/lucide/chevron-right';
+    import { buttonVariants } from '../button/index.js';
+    import { cn } from '../utils.js';
+
+    let { ref = $bindable(null), class: className, children, ...restProps }: CalendarPrimitive.NextButtonProps = $props();
+</script>
+
+{#snippet Fallback()}
+    <ChevronRight />
+{/snippet}
+
+<CalendarPrimitive.NextButton
+    bind:ref
+    class={cn(buttonVariants({ variant: 'outline' }), 'size-7 bg-transparent p-0 opacity-50 hover:opacity-100', className)}
+    {...restProps}
+    children={children || Fallback}
+/>

package/src/shadcn/calendar/calendar-prev-button.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+    import { Calendar as CalendarPrimitive } from 'bits-ui';
+    import ChevronLeft from '$icons/lucide/chevron-left';
+    import { buttonVariants } from '../button/index.js';
+    import { cn } from '../utils.js';
+
+    let { ref = $bindable(null), class: className, children, ...restProps }: CalendarPrimitive.PrevButtonProps = $props();
+</script>
+
+{#snippet Fallback()}
+    <ChevronLeft />
+{/snippet}
+
+<CalendarPrimitive.PrevButton
+    bind:ref
+    class={cn(buttonVariants({ variant: 'outline' }), 'size-7 bg-transparent p-0 opacity-50 hover:opacity-100', className)}
+    {...restProps}
+    children={children || Fallback}
+/>

package/src/shadcn/calendar/calendar-year-select.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    import { Calendar as CalendarPrimitive } from 'bits-ui';
+    import { cn, type WithoutChildrenOrChild } from '../utils';
+    import ChevronDownIcon from '$icons/lucide/chevron-down';
+
+    let { ref = $bindable(null), class: className, value, ...restProps }: WithoutChildrenOrChild<CalendarPrimitive.YearSelectProps> = $props();
+</script>
+
+<span class={cn('has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative flex rounded-md border', className)}>
+    <CalendarPrimitive.YearSelect bind:ref class="absolute inset-0 opacity-0" {...restProps}>
+        {#snippet child({ props, yearItems, selectedYearItem })}
+            <select {...props} {value}>
+                {#each yearItems as yearItem (yearItem.value)}
+                    <option value={yearItem.value} selected={value !== undefined ? yearItem.value === value : yearItem.value === selectedYearItem.value}>
+                        {yearItem.label}
+                    </option>
+                {/each}
+            </select>
+            <span class="[&>svg]:text-muted-foreground flex h-8 select-none items-center gap-1 rounded-md pl-2 pr-1 text-sm font-medium [&>svg]:size-3.5" aria-hidden="true">
+                {yearItems.find((item) => item.value === value)?.label || selectedYearItem.label}
+                <ChevronDownIcon class="size-4" />
+            </span>
+        {/snippet}
+    </CalendarPrimitive.YearSelect>
+</span>

package/src/shadcn/calendar/calendar.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive, type WithoutChildrenOrChild } from "bits-ui";
+	import * as Calendar from "./index.js";
+	import { cn } from "../utils.js";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		placeholder = $bindable(),
+		class: className,
+		weekdayFormat = "short",
+		...restProps
+	}: WithoutChildrenOrChild<CalendarPrimitive.RootProps> = $props();
+</script>
+
+<!--
+Discriminated Unions + Destructing (required for bindable) do not
+get along, so we shut typescript up by casting `value` to `never`.
+-->
+<CalendarPrimitive.Root
+	bind:value={value as never}
+	bind:ref
+	bind:placeholder
+	{weekdayFormat}
+	class={cn("p-3", className)}
+	{...restProps}
+>
+	{#snippet children({ months, weekdays })}
+		<Calendar.Header>
+			<Calendar.PrevButton />
+			<Calendar.Heading />
+			<Calendar.NextButton />
+		</Calendar.Header>
+		<Calendar.Months>
+			{#each months as month (month)}
+				<Calendar.Grid>
+					<Calendar.GridHead>
+						<Calendar.GridRow class="flex">
+							{#each weekdays as weekday (weekday)}
+								<Calendar.HeadCell>
+									{weekday.slice(0, 2)}
+								</Calendar.HeadCell>
+							{/each}
+						</Calendar.GridRow>
+					</Calendar.GridHead>
+					<Calendar.GridBody>
+						{#each month.weeks as weekDates (weekDates)}
+							<Calendar.GridRow class="mt-2 w-full">
+								{#each weekDates as date (date)}
+									<Calendar.Cell {date} month={month.value}>
+										<Calendar.Day />
+									</Calendar.Cell>
+								{/each}
+							</Calendar.GridRow>
+						{/each}
+					</Calendar.GridBody>
+				</Calendar.Grid>
+			{/each}
+		</Calendar.Months>
+	{/snippet}
+</CalendarPrimitive.Root>

package/src/shadcn/calendar/index.ts

@@ -0,0 +1,30 @@
+import Root from "./calendar.svelte";
+import Cell from "./calendar-cell.svelte";
+import Day from "./calendar-day.svelte";
+import Grid from "./calendar-grid.svelte";
+import Header from "./calendar-header.svelte";
+import Months from "./calendar-months.svelte";
+import GridRow from "./calendar-grid-row.svelte";
+import Heading from "./calendar-heading.svelte";
+import GridBody from "./calendar-grid-body.svelte";
+import GridHead from "./calendar-grid-head.svelte";
+import HeadCell from "./calendar-head-cell.svelte";
+import NextButton from "./calendar-next-button.svelte";
+import PrevButton from "./calendar-prev-button.svelte";
+
+export {
+	Day,
+	Cell,
+	Grid,
+	Header,
+	Months,
+	GridRow,
+	Heading,
+	GridBody,
+	GridHead,
+	HeadCell,
+	NextButton,
+	PrevButton,
+	//
+	Root as Calendar,
+};

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} class={cn("p-6", className)} {...restProps}>
+	{@render children?.()}
+</div>

package/src/shadcn/card/card-description.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
+</script>
+
+<p bind:this={ref} class={cn("text-muted-foreground text-sm", className)} {...restProps}>
+	{@render children?.()}
+</p>

package/src/shadcn/card/card-footer.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} class={cn("flex items-center p-6 pt-0", className)} {...restProps}>
+	{@render children?.()}
+</div>