feat(shadcn): add new shadcn components

src/shared/shadcn/ui/checkbox/checkbox.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+import { cn, type WithoutChildrenOrChild } from '$shared/shadcn/utils/shadcn-utils.js';
+import CheckIcon from '@lucide/svelte/icons/check';
+import MinusIcon from '@lucide/svelte/icons/minus';
+import { Checkbox as CheckboxPrimitive } from 'bits-ui';
+
+let {
+    ref = $bindable(null),
+    checked = $bindable(false),
+    indeterminate = $bindable(false),
+    class: className,
+    ...restProps
+}: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props();
+</script>
+
+<CheckboxPrimitive.Root
+    bind:ref
+    data-slot="checkbox"
+    class={cn(
+        'border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive peer flex size-4 shrink-0 items-center justify-center rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+    )}
+    bind:checked
+    bind:indeterminate
+    {...restProps}
+>
+    {#snippet children({ checked, indeterminate })}
+        <div data-slot="checkbox-indicator" class="text-current transition-none">
+            {#if checked}
+                <CheckIcon class="size-3.5" />
+            {:else if indeterminate}
+                <MinusIcon class="size-3.5" />
+            {/if}
+        </div>
+    {/snippet}
+</CheckboxPrimitive.Root>

src/shared/shadcn/ui/checkbox/index.ts

@@ -0,0 +1,6 @@
+import Root from './checkbox.svelte';
+export {
+    Root,
+    //
+    Root as Checkbox,
+};

src/shared/shadcn/ui/collapsible/collapsible-content.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
+
+let { ref = $bindable(null), ...restProps }: CollapsiblePrimitive.ContentProps = $props();
+</script>
+
+<CollapsiblePrimitive.Content bind:ref data-slot="collapsible-content" {...restProps} />

src/shared/shadcn/ui/collapsible/collapsible-trigger.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
+
+let { ref = $bindable(null), ...restProps }: CollapsiblePrimitive.TriggerProps = $props();
+</script>
+
+<CollapsiblePrimitive.Trigger bind:ref data-slot="collapsible-trigger" {...restProps} />

src/shared/shadcn/ui/collapsible/collapsible.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
+
+let {
+    ref = $bindable(null),
+    open = $bindable(false),
+    ...restProps
+}: CollapsiblePrimitive.RootProps = $props();
+</script>
+
+<CollapsiblePrimitive.Root bind:ref bind:open data-slot="collapsible" {...restProps} />

src/shared/shadcn/ui/collapsible/index.ts

@@ -0,0 +1,13 @@
+import Content from './collapsible-content.svelte';
+import Trigger from './collapsible-trigger.svelte';
+import Root from './collapsible.svelte';
+
+export {
+    Content,
+    Content as CollapsibleContent,
+    Root,
+    //
+    Root as Collapsible,
+    Trigger,
+    Trigger as CollapsibleTrigger,
+};

src/shared/shadcn/ui/dialog/dialog-close.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+import { Dialog as DialogPrimitive } from 'bits-ui';
+
+let { ref = $bindable(null), ...restProps }: DialogPrimitive.CloseProps = $props();
+</script>
+
+<DialogPrimitive.Close bind:ref data-slot="dialog-close" {...restProps} />

src/shared/shadcn/ui/dialog/dialog-content.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+import { cn, type WithoutChildrenOrChild } from '$shared/shadcn/utils/shadcn-utils.js';
+import XIcon from '@lucide/svelte/icons/x';
+import { Dialog as DialogPrimitive } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { ComponentProps } from 'svelte';
+import DialogPortal from './dialog-portal.svelte';
+import * as Dialog from './index.js';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    portalProps,
+    children,
+    showCloseButton = true,
+    ...restProps
+}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DialogPortal>>;
+    children: Snippet;
+    showCloseButton?: boolean;
+} = $props();
+</script>
+
+<DialogPortal {...portalProps}>
+    <Dialog.Overlay />
+    <DialogPrimitive.Content
+        bind:ref
+        data-slot="dialog-content"
+        class={cn(
+            'bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+            className,
+        )}
+        {...restProps}
+    >
+        {@render children?.()}
+        {#if showCloseButton}
+            <DialogPrimitive.Close
+                class="ring-offset-background focus:ring-ring absolute end-4 top-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+            >
+                <XIcon />
+                <span class="sr-only">Close</span>
+            </DialogPrimitive.Close>
+        {/if}
+    </DialogPrimitive.Content>
+</DialogPortal>

src/shared/shadcn/ui/dialog/dialog-description.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+import { cn } from '$shared/shadcn/utils/shadcn-utils.js';
+import { Dialog as DialogPrimitive } from 'bits-ui';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+}: DialogPrimitive.DescriptionProps = $props();
+</script>
+
+<DialogPrimitive.Description
+    bind:ref
+    data-slot="dialog-description"
+    class={cn('text-muted-foreground text-sm', className)}
+    {...restProps}
+/>

src/shared/shadcn/ui/dialog/dialog-footer.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
+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="dialog-footer"
+    class={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

src/shared/shadcn/ui/dialog/dialog-header.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+import { cn, type WithElementRef } from '$shared/shadcn/utils/shadcn-utils.js';
+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="dialog-header"
+    class={cn('flex flex-col gap-2 text-center sm:text-start', className)}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

src/shared/shadcn/ui/dialog/dialog-overlay.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+import { cn } from '$shared/shadcn/utils/shadcn-utils.js';
+import { Dialog as DialogPrimitive } from 'bits-ui';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+}: DialogPrimitive.OverlayProps = $props();
+</script>
+
+<DialogPrimitive.Overlay
+    bind:ref
+    data-slot="dialog-overlay"
+    class={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        className,
+    )}
+    {...restProps}
+/>

src/shared/shadcn/ui/dialog/dialog-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+import { Dialog as DialogPrimitive } from 'bits-ui';
+
+let { ...restProps }: DialogPrimitive.PortalProps = $props();
+</script>
+
+<DialogPrimitive.Portal {...restProps} />

src/shared/shadcn/ui/dialog/dialog-title.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+import { cn } from '$shared/shadcn/utils/shadcn-utils.js';
+import { Dialog as DialogPrimitive } from 'bits-ui';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+}: DialogPrimitive.TitleProps = $props();
+</script>
+
+<DialogPrimitive.Title
+    bind:ref
+    data-slot="dialog-title"
+    class={cn('text-lg leading-none font-semibold', className)}
+    {...restProps}
+/>

src/shared/shadcn/ui/dialog/dialog-trigger.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+import { Dialog as DialogPrimitive } from 'bits-ui';
+
+let { ref = $bindable(null), ...restProps }: DialogPrimitive.TriggerProps = $props();
+</script>
+
+<DialogPrimitive.Trigger bind:ref data-slot="dialog-trigger" {...restProps} />

src/shared/shadcn/ui/dialog/dialog.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+import { Dialog as DialogPrimitive } from 'bits-ui';
+
+let { open = $bindable(false), ...restProps }: DialogPrimitive.RootProps = $props();
+</script>
+
+<DialogPrimitive.Root bind:open {...restProps} />

src/shared/shadcn/ui/dialog/index.ts

@@ -0,0 +1,34 @@
+import Close from './dialog-close.svelte';
+import Content from './dialog-content.svelte';
+import Description from './dialog-description.svelte';
+import Footer from './dialog-footer.svelte';
+import Header from './dialog-header.svelte';
+import Overlay from './dialog-overlay.svelte';
+import Portal from './dialog-portal.svelte';
+import Title from './dialog-title.svelte';
+import Trigger from './dialog-trigger.svelte';
+import Root from './dialog.svelte';
+
+export {
+    Close,
+    Close as DialogClose,
+    Content,
+    Content as DialogContent,
+    Description,
+    Description as DialogDescription,
+    Footer,
+    Footer as DialogFooter,
+    Header,
+    Header as DialogHeader,
+    Overlay,
+    Overlay as DialogOverlay,
+    Portal,
+    Portal as DialogPortal,
+    Root,
+    //
+    Root as Dialog,
+    Title,
+    Title as DialogTitle,
+    Trigger,
+    Trigger as DialogTrigger,
+};

src/shared/shadcn/ui/label/index.ts

@@ -0,0 +1,7 @@
+import Root from './label.svelte';
+
+export {
+    Root,
+    //
+    Root as Label,
+};

src/shared/shadcn/ui/label/label.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+import { cn } from '$shared/shadcn/utils/shadcn-utils.js';
+import { Label as LabelPrimitive } from 'bits-ui';
+
+let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+}: LabelPrimitive.RootProps = $props();
+</script>
+
+<LabelPrimitive.Root
+    bind:ref
+    data-slot="label"
+    class={cn(
+        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        className,
+    )}
+    {...restProps}
+/>