@shellicar/ui-shadcn 1.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Stephen Hellicar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,13 @@
+# @shellicar/ui-shadcn
+
+Svelte UI component library based on shadcn.
+
+## Installation
+
+```sh
+npm i --save @shellicar/ui-shadcn
+```
+
+```sh
+pnpm add @shellicar/ui-shadcn
+```

package/dist/app.css

@@ -0,0 +1,70 @@
+@layer theme, base, utilities;
+
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/preflight.css" layer(base);
+@import "tailwindcss/utilities.css" layer(utilities);
+
+@import "tw-animate-css";
+
+@source ".";
+
+@plugin "@tailwindcss/typography";
+@plugin "@tailwindcss/forms";
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  button,
+  a[href],
+  [role="button"] {
+    touch-action: manipulation;
+  }
+}
+
+@layer utilities {
+  .touch-manipulation {
+    touch-action: manipulation;
+  }
+}

package/dist/components/page/HomeButton.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+import MoveLeft from '@lucide/svelte/icons/move-left';
+</script>
+
+<a href="/" class="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors py-2 px-1 -ml-1 min-h-[44px] w-fit">
+	<MoveLeft class="h-4 w-4 stroke-[1.5]" />
+	<span>Home</span>
+</a>

package/dist/components/page/HomeButton.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const HomeButton: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type HomeButton = InstanceType<typeof HomeButton>;
+export default HomeButton;

package/dist/components/page/PageHeader.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+type Props = {
+  title: string;
+  description?: string;
+};
+
+const { title, description }: Props = $props();
+</script>
+
+<header class="flex flex-col gap-2">
+	<h1 class="text-4xl sm:text-5xl font-extrabold tracking-tight text-foreground">{title}</h1>
+	{#if description}
+		<p class="max-w-2xl text-base sm:text-lg text-muted-foreground">{description}</p>
+	{/if}
+</header>

package/dist/components/page/PageHeader.svelte.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    title: string;
+    description?: string;
+};
+declare const PageHeader: import("svelte").Component<Props, {}, "">;
+type PageHeader = ReturnType<typeof PageHeader>;
+export default PageHeader;

package/dist/components/page/PageSection.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+import type { Snippet } from 'svelte';
+import { cn } from '../../utils.js';
+import HomeButton from './HomeButton.svelte';
+import PageHeader from './PageHeader.svelte';
+
+interface Props {
+  header?: {
+    title: string;
+    description?: string;
+  };
+  children?: Snippet;
+  class?: string;
+  showHomeButton?: boolean;
+}
+
+const { header, children, class: className = '', showHomeButton = false }: Props = $props();
+</script>
+
+<section class="w-full">
+	<div class={cn('mx-auto max-w-3xl lg:max-w-4xl xl:max-w-5xl 2xl:max-w-6xl px-4 sm:px-6 lg:px-8 xl:px-12 py-6 sm:py-8 lg:py-12 xl:py-16 flex flex-col gap-6 lg:gap-8 xl:gap-10', className)}>
+		{#if showHomeButton}
+			<HomeButton />
+		{/if}
+
+		{#if header}
+			<PageHeader title={header.title} description={header.description} />
+		{/if}
+
+		{@render children?.()}
+	</div>
+</section>

package/dist/components/page/PageSection.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    header?: {
+        title: string;
+        description?: string;
+    };
+    children?: Snippet;
+    class?: string;
+    showHomeButton?: boolean;
+}
+declare const PageSection: import("svelte").Component<Props, {}, "">;
+type PageSection = ReturnType<typeof PageSection>;
+export default PageSection;

package/dist/components/page/index.d.ts

@@ -0,0 +1,4 @@
+import { default as HomeButton } from './HomeButton.svelte';
+import { default as PageHeader } from './PageHeader.svelte';
+import { default as PageSection } from './PageSection.svelte';
+export { HomeButton, PageHeader, PageSection };

package/dist/components/page/index.js

@@ -0,0 +1,4 @@
+import { default as HomeButton } from './HomeButton.svelte';
+import { default as PageHeader } from './PageHeader.svelte';
+import { default as PageSection } from './PageSection.svelte';
+export { HomeButton, PageHeader, PageSection };

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

@@ -0,0 +1,80 @@
+<script lang="ts" module>
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+import { tv, type VariantProps } from 'tailwind-variants';
+import { cn, type WithElementRef } from '../../../utils.js';
+
+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 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  variants: {
+    variant: {
+      default: 'bg-primary text-primary-foreground hover:bg-primary/90 shadow-xs',
+      destructive: 'bg-destructive hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white shadow-xs',
+      outline: 'bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border shadow-xs',
+      secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-xs',
+      ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+      link: 'text-primary underline-offset-4 hover:underline',
+    },
+    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',
+      'icon-sm': 'size-8',
+      'icon-lg': 'size-10',
+    },
+  },
+  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/dist/components/ui/button/button.svelte.d.ts

@@ -0,0 +1,64 @@
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+import { type VariantProps } from 'tailwind-variants';
+import { type WithElementRef } from '../../../utils.js';
+export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        destructive: string;
+        outline: string;
+        secondary: string;
+        ghost: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+        icon: string;
+        'icon-sm': string;
+        'icon-lg': string;
+    };
+}, undefined, "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 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+    variant: {
+        default: string;
+        destructive: string;
+        outline: string;
+        secondary: string;
+        ghost: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+        icon: string;
+        'icon-sm': string;
+        'icon-lg': string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        destructive: string;
+        outline: string;
+        secondary: string;
+        ghost: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+        icon: string;
+        'icon-sm': string;
+        'icon-lg': string;
+    };
+}, undefined, "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 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", unknown, unknown, undefined>>;
+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;
+};
+declare const Button: import("svelte").Component<ButtonProps, {}, "ref">;
+type Button = ReturnType<typeof Button>;
+export default Button;

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

@@ -0,0 +1,2 @@
+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/dist/components/ui/button/index.js

@@ -0,0 +1,4 @@
+import Root, { buttonVariants } from './button.svelte';
+export { Root, 
+//
+Root as Button, buttonVariants, };

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

@@ -0,0 +1,15 @@
+<script lang="ts">
+import type { HTMLAttributes } from 'svelte/elements';
+import { cn, type WithElementRef } from '../../../utils.js';
+
+const { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-action"
+	class={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/card/card-action.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+declare const CardAction: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type CardAction = ReturnType<typeof CardAction>;
+export default CardAction;

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

@@ -0,0 +1,10 @@
+<script lang="ts">
+import type { HTMLAttributes } from 'svelte/elements';
+import { cn, type WithElementRef } from '../../../utils.js';
+
+const { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} data-slot="card-content" class={cn("px-6", className)} {...restProps}>
+	{@render children?.()}
+</div>

package/dist/components/ui/card/card-content.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+declare const CardContent: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type CardContent = ReturnType<typeof CardContent>;
+export default CardContent;

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

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

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

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+declare const CardDescription: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLParagraphElement>>, {}, "ref">;
+type CardDescription = ReturnType<typeof CardDescription>;
+export default CardDescription;

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

@@ -0,0 +1,15 @@
+<script lang="ts">
+import type { HTMLAttributes } from 'svelte/elements';
+import { cn, type WithElementRef } from '../../../utils.js';
+
+const { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-footer"
+	class={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/card/card-footer.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+declare const CardFooter: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type CardFooter = ReturnType<typeof CardFooter>;
+export default CardFooter;

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

@@ -0,0 +1,18 @@
+<script lang="ts">
+import type { HTMLAttributes } from 'svelte/elements';
+import { cn, type WithElementRef } from '../../../utils.js';
+
+const { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-header"
+	class={cn(
+		"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/card/card-header.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+declare const CardHeader: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type CardHeader = ReturnType<typeof CardHeader>;
+export default CardHeader;

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

@@ -0,0 +1,15 @@
+<script lang="ts">
+import type { HTMLAttributes } from 'svelte/elements';
+import { cn, type WithElementRef } from '../../../utils.js';
+
+const { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-title"
+	class={cn("leading-none font-semibold", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+declare const CardTitle: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type CardTitle = ReturnType<typeof CardTitle>;
+export default CardTitle;

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

@@ -0,0 +1,18 @@
+<script lang="ts">
+import type { HTMLAttributes } from 'svelte/elements';
+import { cn, type WithElementRef } from '../../../utils.js';
+
+const { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card"
+	class={cn(
+		"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+declare const Card: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/components/ui/card/index.d.ts

@@ -0,0 +1,8 @@
+import Root from './card.svelte';
+import Action from './card-action.svelte';
+import Content from './card-content.svelte';
+import Description from './card-description.svelte';
+import Footer from './card-footer.svelte';
+import Header from './card-header.svelte';
+import Title from './card-title.svelte';
+export { Root, Content, Description, Footer, Header, Title, Action, Root as Card, Content as CardContent, Description as CardDescription, Footer as CardFooter, Header as CardHeader, Title as CardTitle, Action as CardAction, };

package/dist/components/ui/card/index.js

@@ -0,0 +1,10 @@
+import Root from './card.svelte';
+import Action from './card-action.svelte';
+import Content from './card-content.svelte';
+import Description from './card-description.svelte';
+import Footer from './card-footer.svelte';
+import Header from './card-header.svelte';
+import Title from './card-title.svelte';
+export { Root, Content, Description, Footer, Header, Title, Action, 
+//
+Root as Card, Content as CardContent, Description as CardDescription, Footer as CardFooter, Header as CardHeader, Title as CardTitle, Action as CardAction, };

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

@@ -0,0 +1,7 @@
+<script lang="ts">
+import { Button, type ButtonProps } from '../button/index.js';
+
+const { ref = $bindable(null), ...restProps }: ButtonProps = $props();
+</script>
+
+<Button bind:ref type="submit" {...restProps} />

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

@@ -0,0 +1,4 @@
+import { type ButtonProps } from '../button/index.js';
+declare const FormButton: import("svelte").Component<ButtonProps, {}, "ref">;
+type FormButton = ReturnType<typeof FormButton>;
+export default FormButton;

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

@@ -0,0 +1,13 @@
+<script lang="ts">
+import type * as FormPrimitive from 'formsnap';
+import { cn, type WithoutChild } from '../../../utils.js';
+
+const { ref = $bindable(null), class: className, ...restProps }: WithoutChild<FormPrimitive.DescriptionProps> = $props();
+</script>
+
+<FormPrimitive.Description
+	bind:ref
+	data-slot="form-description"
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+/>

package/dist/components/ui/form/form-description.svelte.d.ts

@@ -0,0 +1,4 @@
+import type * as FormPrimitive from 'formsnap';
+declare const FormDescription: import("svelte").Component<Omit<FormPrimitive.DescriptionProps, "child">, {}, "ref">;
+type FormDescription = ReturnType<typeof FormDescription>;
+export default FormDescription;

package/dist/components/ui/form/form-element-field.svelte

@@ -0,0 +1,27 @@
+<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPathLeaves<T>">
+
+	import * as FormPrimitive from "formsnap";
+
+	import type { FormPathLeaves } from "sveltekit-superforms";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	import { cn, type WithElementRef, type WithoutChildren } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		form,
+		name,
+		children: childrenProp,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> &
+		FormPrimitive.ElementFieldProps<T, U> = $props();
+</script>
+
+<FormPrimitive.ElementField {form} {name}>
+	{#snippet children({ constraints, errors, tainted, value })}
+		<div bind:this={ref} class={cn("space-y-2", className)} {...restProps}>
+			{@render childrenProp?.({ constraints, errors, tainted, value: value as T[U] })}
+		</div>
+	{/snippet}
+</FormPrimitive.ElementField>