tera-system-ui 0.1.76 → 0.2.2

package/dist/components/popover-responsive/PopoverResponsive.recipe.d.ts

@@ -0,0 +1,85 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Snippet } from "svelte";
+import type { PopoverProps } from '../popover/Popover.recipe';
+import type { DialogProps } from '../dialog/Dialog.recipe';
+/**
+ * PopoverResponsive recipe — the canonical styled layer for the base design
+ * language. Thin composite: renders the Popover on desktop (≥ breakpoint) and the
+ * Dialog on mobile, switching at `desktopBreakpoint`. It owns almost no styling —
+ * the desktop/mobile panels come fully styled from Popover and Dialog, which stay
+ * composed as components (the stable seam). The single owned part is the mobile
+ * wrapper button, an unstyled reset that turns the trigger snippet into a tap
+ * target; it carries no variants.
+ *
+ * Customization surface — three layers, lightest first:
+ *   1. `class` (both panels) / `triggerClass` (mobile button) for one-off classes.
+ *   2. First-class common props (side/sideOffset/align for the popover,
+ *      dialogPosition/dialogPadding + header/footer for the dialog).
+ *   3. `popoverProps` / `dialogProps` — typed escape hatches spread onto the
+ *      underlying component, exposing every child prop and overriding the
+ *      common props above. Any extra top-level prop is forwarded to BOTH.
+ *
+ * Or restyle the underlying look by extending the Popover/Dialog recipes. See
+ * docs/ARCHITECTURE.md for worked examples (kept out of this JSDoc so the llms
+ * doc generator doesn't grep its tokens).
+ */
+export declare const popoverResponsiveRecipe: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            triggerButton?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            triggerButton?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    triggerButton: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            triggerButton?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    triggerButton: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    triggerButton: string;
+}, undefined, unknown, unknown, undefined>>;
+export type PopoverResponsiveRecipeProps = VariantProps<typeof popoverResponsiveRecipe>;
+export interface PopoverResponsiveProps {
+    /** Content rendered inside the popover/dialog panel. */
+    children?: Snippet;
+    /** Snippet used as the clickable trigger. */
+    trigger?: Snippet;
+    /** Whether the panel is open. Bindable. */
+    open?: boolean;
+    /** Additional classes applied to BOTH the desktop popover panel and the mobile dialog panel. */
+    class?: string;
+    /** Additional classes for the mobile trigger wrapper button. */
+    triggerClass?: string;
+    /** Viewport width (px) at/above which the desktop popover is used. Defaults to 640. */
+    desktopBreakpoint?: number;
+    /** Which side of the trigger the desktop popover appears on. */
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    /** Distance in pixels between the trigger and popover (desktop only). */
+    sideOffset?: number;
+    /** Alignment of the popover relative to the trigger (desktop only). */
+    align?: 'start' | 'center' | 'end';
+    /** Vertical placement of the mobile dialog. Defaults to 'top'. */
+    dialogPosition?: DialogProps['position'];
+    /** Inner padding of the mobile dialog. Defaults to 'none'. */
+    dialogPadding?: DialogProps['padding'];
+    /** Snippet rendered in the mobile dialog header area (mobile only). */
+    header?: Snippet;
+    /** Snippet rendered in the mobile dialog footer area (mobile only). */
+    footer?: Snippet;
+    /** Any additional prop forwarded to the desktop `<Popover>`. Overrides the common props above. */
+    popoverProps?: Partial<PopoverProps>;
+    /** Any additional prop forwarded to the mobile `<Dialog>`. Overrides the common props above. */
+    dialogProps?: Partial<DialogProps>;
+    /** Any remaining prop is forwarded to BOTH underlying components. */
+    [key: string]: unknown;
+}

package/dist/components/popover-responsive/PopoverResponsive.recipe.js

@@ -0,0 +1,27 @@
+import { tv } from "tailwind-variants";
+/**
+ * PopoverResponsive recipe — the canonical styled layer for the base design
+ * language. Thin composite: renders the Popover on desktop (≥ breakpoint) and the
+ * Dialog on mobile, switching at `desktopBreakpoint`. It owns almost no styling —
+ * the desktop/mobile panels come fully styled from Popover and Dialog, which stay
+ * composed as components (the stable seam). The single owned part is the mobile
+ * wrapper button, an unstyled reset that turns the trigger snippet into a tap
+ * target; it carries no variants.
+ *
+ * Customization surface — three layers, lightest first:
+ *   1. `class` (both panels) / `triggerClass` (mobile button) for one-off classes.
+ *   2. First-class common props (side/sideOffset/align for the popover,
+ *      dialogPosition/dialogPadding + header/footer for the dialog).
+ *   3. `popoverProps` / `dialogProps` — typed escape hatches spread onto the
+ *      underlying component, exposing every child prop and overriding the
+ *      common props above. Any extra top-level prop is forwarded to BOTH.
+ *
+ * Or restyle the underlying look by extending the Popover/Dialog recipes. See
+ * docs/ARCHITECTURE.md for worked examples (kept out of this JSDoc so the llms
+ * doc generator doesn't grep its tokens).
+ */
+export const popoverResponsiveRecipe = tv({
+    slots: {
+        triggerButton: 'inline-flex appearance-none bg-transparent p-0 border-0 cursor-pointer',
+    },
+});

package/dist/components/popover-responsive/PopoverResponsive.svelte

@@ -1,25 +1,58 @@
 <script lang="ts">import { innerWidth } from 'svelte/reactivity/window';
 import { Dialog } from '../dialog/index.js';
 import { Popover } from '../popover/index.js';
-let { children, trigger, class: className, open = $bindable(false), side = 'bottom', sideOffset = 4, align = 'start', ...props } = $props();
-const isDesktop = $derived((innerWidth.current ?? 640) >= 640);
+import { cn } from '../../utils/index.js';
+import { popoverResponsiveRecipe } from './PopoverResponsive.recipe.js';
+let { children, trigger, open = $bindable(false), 
+// Styling
+class: className, triggerClass, 
+// Responsive switch
+desktopBreakpoint = 640, 
+// Desktop popover positioning
+side = 'bottom', sideOffset = 4, align = 'start', 
+// Mobile dialog layout
+dialogPosition = 'top', dialogPadding = 'none', header, footer, 
+// Full per-child passthrough (override the common props above)
+popoverProps, dialogProps, 
+// Anything else is forwarded to both underlying components
+...restProps } = $props();
+const isDesktop = $derived((innerWidth.current ?? desktopBreakpoint) >= desktopBreakpoint);
+const { triggerButton } = popoverResponsiveRecipe();
 </script>
 
 {#if isDesktop}
     <!-- Desktop: bind open directly so both internal and external close work -->
-    <Popover bind:open {side} {sideOffset} {align} {trigger} class={className} {...props}>
+    <Popover
+        bind:open
+        {side}
+        {sideOffset}
+        {align}
+        {trigger}
+        {...restProps}
+        {...popoverProps}
+        class={cn(className, popoverProps?.class)}
+    >
         {@render children?.()}
     </Popover>
 {:else}
     <!-- Mobile: bind open directly to Dialog, toggle via wrapper button -->
     <button
         type="button"
-        class="inline-flex appearance-none bg-transparent p-0 border-0 cursor-pointer"
+        class={triggerButton({class: triggerClass})}
         onclick={() => open = !open}
     >
         {@render trigger?.()}
     </button>
-    <Dialog bind:open position="top" padding="none" class={className}>
+    <Dialog
+        bind:open
+        position={dialogPosition}
+        padding={dialogPadding}
+        {header}
+        {footer}
+        {...restProps}
+        {...dialogProps}
+        class={cn(className, dialogProps?.class)}
+    >
         {@render children?.()}
     </Dialog>
 {/if}

package/dist/components/popover-responsive/PopoverResponsive.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { PopoverResponsiveProps } from './PopoverResponsive.js';
+import { type PopoverResponsiveProps } from './PopoverResponsive.recipe.js';
 declare const PopoverResponsive: import("svelte").Component<PopoverResponsiveProps, {}, "open">;
 type PopoverResponsive = ReturnType<typeof PopoverResponsive>;
 export default PopoverResponsive;

package/dist/components/popover-responsive/index.d.ts

@@ -1,2 +1,3 @@
 export { default as PopoverResponsive } from './PopoverResponsive.svelte';
-export type { PopoverResponsiveProps } from './PopoverResponsive';
+export { popoverResponsiveRecipe } from './PopoverResponsive.recipe';
+export type { PopoverResponsiveProps, PopoverResponsiveRecipeProps } from './PopoverResponsive.recipe';

package/dist/components/popover-responsive/index.js

@@ -1 +1,2 @@
 export { default as PopoverResponsive } from './PopoverResponsive.svelte';
+export { popoverResponsiveRecipe } from './PopoverResponsive.recipe';

package/dist/components/select/Select.recipe.d.ts

@@ -0,0 +1,190 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Snippet } from "svelte";
+/**
+ * Select recipe — the canonical styled layer for the base design language.
+ *
+ * Multi-part component (built on bits-ui Select): the recipe is slotted by role
+ * — trigger / content / viewport / item / group — so an app can restyle any part
+ * independently. The trigger carries the visual variants (look, size, status,
+ * disabled); the dropdown parts are static base strings.
+ *
+ * Primary customization surface: extend with `tv({ extend: selectRecipe, ... })`
+ * in typed code. Lighter rung: the per-component CSS vars (--tera-select-*) let a
+ * theme retune corner radius with no code change; they default to global axis
+ * tokens in tera-ui-base.css. See docs/ARCHITECTURE.md for worked examples (kept
+ * out of this JSDoc so the llms doc generator doesn't grep its tokens).
+ */
+export declare const selectRecipe: import("tailwind-variants").TVReturnType<{
+    variant: {
+        outlined: {
+            trigger: string;
+        };
+        filled: {
+            trigger: string;
+        };
+        borderless: {
+            trigger: string;
+        };
+    };
+    size: {
+        sm: {
+            trigger: string;
+        };
+        md: {
+            trigger: string;
+        };
+        lg: {
+            trigger: string;
+        };
+    };
+    disabled: {
+        true: {
+            trigger: string;
+        };
+    };
+    status: {
+        error: {
+            trigger: string;
+        };
+        warning: {
+            trigger: string;
+        };
+    };
+}, {
+    trigger: string;
+    content: string;
+    viewport: string;
+    group: string;
+    item: string;
+}, undefined, {
+    variant: {
+        outlined: {
+            trigger: string;
+        };
+        filled: {
+            trigger: string;
+        };
+        borderless: {
+            trigger: string;
+        };
+    };
+    size: {
+        sm: {
+            trigger: string;
+        };
+        md: {
+            trigger: string;
+        };
+        lg: {
+            trigger: string;
+        };
+    };
+    disabled: {
+        true: {
+            trigger: string;
+        };
+    };
+    status: {
+        error: {
+            trigger: string;
+        };
+        warning: {
+            trigger: string;
+        };
+    };
+}, {
+    trigger: string;
+    content: string;
+    viewport: string;
+    group: string;
+    item: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        outlined: {
+            trigger: string;
+        };
+        filled: {
+            trigger: string;
+        };
+        borderless: {
+            trigger: string;
+        };
+    };
+    size: {
+        sm: {
+            trigger: string;
+        };
+        md: {
+            trigger: string;
+        };
+        lg: {
+            trigger: string;
+        };
+    };
+    disabled: {
+        true: {
+            trigger: string;
+        };
+    };
+    status: {
+        error: {
+            trigger: string;
+        };
+        warning: {
+            trigger: string;
+        };
+    };
+}, {
+    trigger: string;
+    content: string;
+    viewport: string;
+    group: string;
+    item: string;
+}, undefined, unknown, unknown, undefined>>;
+export type SelectRecipeProps = VariantProps<typeof selectRecipe>;
+export interface SelectOption {
+    /** Unique value submitted or passed to onchange. */
+    value: string;
+    /** Human-readable label shown in the list and trigger. */
+    label: string;
+    /** Prevents selecting this option. */
+    disabled?: boolean;
+}
+export interface SelectGroup {
+    /** Heading label displayed above the group's options. */
+    label: string;
+    /** Options belonging to this group. */
+    options: SelectOption[];
+}
+export interface SelectProps extends SelectRecipeProps {
+    /** Selection mode. Use 'multiple' to allow picking several options. */
+    type?: 'single' | 'multiple';
+    /** Flat list of options. Use `groups` instead for grouped options. */
+    options?: SelectOption[];
+    /** Grouped options — renders labeled sections. Takes precedence over `options`. */
+    groups?: SelectGroup[];
+    /**
+     * Currently selected value(s). Bindable.
+     * A string for type='single', a string[] for type='multiple'.
+     */
+    value?: string | string[];
+    /** Text shown in the trigger when nothing is selected. */
+    placeholder?: string;
+    /** Prevents all interaction. */
+    disabled?: boolean;
+    /** Whether keyboard navigation wraps from the last item to the first. */
+    loop?: boolean;
+    /** Allow deselecting the current value by clicking it again (single mode only). */
+    allowDeselect?: boolean;
+    /** Whether the select is required for form submission. */
+    required?: boolean;
+    /** Name attribute used when submitting within a form. */
+    name?: string;
+    /** Additional CSS classes for the trigger button. */
+    class?: string;
+    /** Replace the default selected-item check mark with custom markup (structural seam). */
+    checkIcon?: Snippet;
+    /** Called when the selected value changes. */
+    onchange?: (value: string | string[]) => void;
+    [key: string]: unknown;
+}

package/dist/components/select/Select.recipe.js

@@ -0,0 +1,51 @@
+import { tv } from "tailwind-variants";
+/**
+ * Select recipe — the canonical styled layer for the base design language.
+ *
+ * Multi-part component (built on bits-ui Select): the recipe is slotted by role
+ * — trigger / content / viewport / item / group — so an app can restyle any part
+ * independently. The trigger carries the visual variants (look, size, status,
+ * disabled); the dropdown parts are static base strings.
+ *
+ * Primary customization surface: extend with `tv({ extend: selectRecipe, ... })`
+ * in typed code. Lighter rung: the per-component CSS vars (--tera-select-*) let a
+ * theme retune corner radius with no code change; they default to global axis
+ * tokens in tera-ui-base.css. See docs/ARCHITECTURE.md for worked examples (kept
+ * out of this JSDoc so the llms doc generator doesn't grep its tokens).
+ */
+export const selectRecipe = tv({
+    slots: {
+        trigger: 'w-full inline-flex items-center justify-between gap-2 rounded-[var(--tera-select-radius,var(--tera-radius-base))] outline-none font-normal text-left transition-[border-color,box-shadow,background-color] ease-ui duration-[var(--tera-duration-fast)]',
+        content: `z-50 min-w-[var(--bits-select-anchor-width)] flex flex-col overflow-hidden
+                bg-surface rounded-[var(--tera-select-content-radius,var(--border-radius-container))] border border-border-default shadow-lg
+                animate-in fade-in zoom-in-95 duration-[var(--tera-duration-fast)]
+                data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95`,
+        viewport: 'p-2 flex-1 min-h-0 overflow-y-auto',
+        group: 'px-2 py-1.5 text-xs font-semibold text-text-tertiary uppercase tracking-wide',
+        item: `relative flex w-full cursor-pointer select-none items-center rounded px-2 py-2 text-sm text-text-primary outline-none
+        transition-colors ease-ui duration-[var(--tera-duration-micro)]
+        data-[highlighted]:bg-surface-hover
+        data-[selected]:font-medium data-[selected]:text-interactive
+        data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50`,
+    },
+    variants: {
+        variant: {
+            outlined: { trigger: 'border border-border-default bg-surface-control shadow-xs hover:border-border-strong data-[state=open]:border-interactive data-[state=open]:shadow-focus' },
+            filled: { trigger: 'bg-surface-sunken border border-transparent hover:bg-surface-hover data-[state=open]:bg-surface data-[state=open]:border-interactive data-[state=open]:shadow-focus' },
+            borderless: { trigger: 'bg-transparent border-0 hover:bg-surface-raised' },
+        },
+        size: {
+            sm: { trigger: 'h-[var(--tera-control-height-sm)] px-[var(--tera-control-px-md)] text-sm' },
+            md: { trigger: 'h-[var(--tera-control-height-md)] px-[var(--tera-control-px-md)] text-sm' },
+            lg: { trigger: 'h-[var(--tera-control-height-lg)] px-[var(--tera-control-px-md)] text-base' },
+        },
+        disabled: {
+            true: { trigger: 'cursor-not-allowed bg-surface-sunken text-text-disabled border-border-default pointer-events-none' },
+        },
+        status: {
+            error: { trigger: 'border-error-default hover:border-error-hover data-[state=open]:border-error-default data-[state=open]:shadow-focus-error' },
+            warning: { trigger: 'border-warning-default hover:border-warning-hover data-[state=open]:border-warning-default data-[state=open]:shadow-focus-warning' },
+        },
+    },
+    defaultVariants: { variant: 'outlined', size: 'md' },
+});

package/dist/components/select/Select.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">import { Select as SelectPrimitive } from 'bits-ui';
-import { triggerStyles } from './Select.js';
-import { IconCheck, IconChevronDown } from '../icons/index.js';
+import { selectRecipe } from './Select.recipe';
+import { IconCheck, IconChevronDown } from '../../internal/icons';
 import IconChevronsUp from '@tabler/icons-svelte/icons/chevrons-up';
 import IconChevronsDown from '@tabler/icons-svelte/icons/chevrons-down';
-let { type = 'single', options = [], groups, value = $bindable(), placeholder = 'Select…', variant, size, disabled, status, loop, allowDeselect, required, name, class: className, onchange, } = $props();
+let { type = 'single', options = [], groups, value = $bindable(), placeholder = 'Select…', variant, size, disabled, status, loop, allowDeselect, required, name, class: className, checkIcon, onchange, } = $props();
 // All options flat — used for label lookup in multiple mode
 const allOptions = $derived(groups ? groups.flatMap(g => g.options) : options);
 // Single mode: selected label
@@ -17,17 +17,17 @@ const selectedLabel = $derived.by(() => {
 const selectedChips = $derived(Array.isArray(value)
     ? value.map(v => ({ value: v, label: allOptions.find(o => o.value === v)?.label ?? v }))
     : []);
-const triggerClass = $derived(triggerStyles({ variant, size, disabled, status, className }));
+const r = $derived(selectRecipe({ variant, size, disabled, status }));
 const minHeight = "21rem";
 </script>
 
 {#snippet itemList()}
-    <SelectPrimitive.Viewport class="p-2 flex-1 min-h-0 overflow-y-auto">
+    <SelectPrimitive.Viewport class={r.viewport()}>
         {#if groups && groups.length > 0}
             {#each groups as group (group.label)}
                 <SelectPrimitive.Group>
                     <SelectPrimitive.GroupHeading
-                        class="px-2 py-1.5 text-xs font-semibold text-text-tertiary uppercase tracking-wide"
+                        class={r.group()}
                     >
                         {group.label}
                     </SelectPrimitive.GroupHeading>
@@ -59,7 +59,7 @@ const minHeight = "21rem";
             are non-interactive (no onclick) to avoid button-in-button nesting.
             Managing selection is done exclusively through the dropdown items.
         -->
-        <SelectPrimitive.Trigger class={triggerStyles({ variant, size, disabled, status, className: `h-auto min-h-9 flex-wrap py-1.5 ${className ?? ''}` })}>
+        <SelectPrimitive.Trigger class={r.trigger({ class: `h-auto min-h-[var(--tera-control-height-md)] flex-wrap py-1.5 ${className ?? ''}` })}>
             {#if selectedChips.length > 0}
                 {#each selectedChips as chip (chip.value)}
                     <!-- Plain span tag — no interactive elements inside <button> -->
@@ -72,16 +72,13 @@ const minHeight = "21rem";
             {:else}
                 <span class="text-text-tertiary flex-1">{placeholder}</span>
             {/if}
-            <IconChevronDown class="size-4 shrink-0 text-text-tertiary ml-auto transition-transform ease-ui duration-150 data-[state=open]:rotate-180" />
+            <IconChevronDown class="size-4 shrink-0 text-text-tertiary ml-auto transition-transform ease-ui duration-[var(--tera-duration-fast)] data-[state=open]:rotate-180" />
         </SelectPrimitive.Trigger>
 
         <SelectPrimitive.Portal>
             <SelectPrimitive.Content
                 sideOffset={4}
-                class="z-50 min-w-[var(--bits-select-anchor-width)] flex flex-col overflow-hidden
-                bg-surface rounded-container border border-border-default shadow-lg
-                animate-in fade-in zoom-in-95 duration-150
-                data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95"
+                class={r.content()}
                 style="max-height: min({minHeight}, var(--bits-select-content-available-height))"
             >
                 <SelectPrimitive.ScrollUpButton class="flex w-full items-center justify-center pt-1 text-text-tertiary cursor-default hover:text-text-primary transition-colors">
@@ -106,22 +103,19 @@ const minHeight = "21rem";
         {required}
         {name}
     >
-        <SelectPrimitive.Trigger class={triggerClass}>
+        <SelectPrimitive.Trigger class={r.trigger({ class: className })}>
             <span class={!value ? 'text-text-tertiary' : 'text-text-primary'}>
                 {value ? selectedLabel : placeholder}
             </span>
             <IconChevronDown
-                class="size-4 shrink-0 text-text-tertiary transition-transform ease-ui duration-150 data-[state=open]:rotate-180"
+                class="size-4 shrink-0 text-text-tertiary transition-transform ease-ui duration-[var(--tera-duration-fast)] data-[state=open]:rotate-180"
             />
         </SelectPrimitive.Trigger>
 
         <SelectPrimitive.Portal>
             <SelectPrimitive.Content
                 sideOffset={6}
-                class="z-50 min-w-[var(--bits-select-anchor-width)] flex flex-col overflow-hidden
-                bg-surface rounded-container border border-border-default shadow-lg
-                animate-in fade-in zoom-in-95 duration-150
-                data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95"
+                class={r.content()}
                 style="max-height: min({minHeight}, var(--bits-select-content-available-height))"
             >
                 <SelectPrimitive.ScrollUpButton class="flex w-full items-center justify-center pt-1 text-text-tertiary cursor-default hover:text-text-primary transition-colors">
@@ -141,16 +135,16 @@ const minHeight = "21rem";
         value={option.value}
         label={option.label}
         disabled={option.disabled}
-        class="relative flex w-full cursor-pointer select-none items-center rounded px-2 py-2 text-sm text-text-primary outline-none
-        transition-colors ease-ui duration-100
-        data-[highlighted]:bg-surface-hover
-        data-[selected]:font-medium data-[selected]:text-interactive
-        data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
+        class={r.item()}
     >
         {#snippet children({selected})}
             <span class="flex-1">{option.label}</span>
             {#if selected}
-                <IconCheck class="size-4 text-interactive shrink-0"/>
+                {#if checkIcon}
+                    {@render checkIcon()}
+                {:else}
+                    <IconCheck class="size-4 text-interactive shrink-0"/>
+                {/if}
             {/if}
         {/snippet}
     </SelectPrimitive.Item>

package/dist/components/select/Select.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type SelectProps } from './Select.js';
+import { type SelectProps } from './Select.recipe';
 declare const Select: import("svelte").Component<SelectProps, {}, "value">;
 type Select = ReturnType<typeof Select>;
 export default Select;

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

@@ -1,2 +1,3 @@
 export { default as Select } from './Select.svelte';
-export type { SelectProps, SelectOption } from './Select.js';
+export { selectRecipe } from './Select.recipe';
+export type { SelectProps, SelectOption, SelectGroup, SelectRecipeProps } from './Select.recipe';

package/dist/components/select/index.js

@@ -1 +1,2 @@
 export { default as Select } from './Select.svelte';
+export { selectRecipe } from './Select.recipe';

package/dist/components/skeleton/Skeleton.recipe.d.ts

@@ -0,0 +1,89 @@
+import { type VariantProps } from "tailwind-variants";
+/**
+ * Skeleton recipe — the canonical styled layer for the base design language.
+ *
+ * Multi-part component: the recipe is slotted by role — root (the labelled
+ * loading region) / shape (circle, rect, and each line bar) / lines (the
+ * stacked-line wrapper). The `animate` variant swaps the shimmer animation for
+ * a flat surface fill; the `variant`/`tone` slots carry the per-shape radius.
+ *
+ * Primary customization surface: extend with `tv({ extend: skeletonRecipe, ... })`
+ * in typed code. Lighter rung: the per-component CSS var (--tera-skeleton-radius)
+ * lets a theme retune the rect corner radius with no code change; it defaults to
+ * the global base-radius token. See docs/ARCHITECTURE.md for worked examples
+ * (kept out of this JSDoc so the llms doc generator doesn't grep its tokens).
+ */
+export declare const skeletonRecipe: import("tailwind-variants").TVReturnType<{
+    animate: {
+        true: {
+            circle: string;
+            rect: string;
+            line: string;
+        };
+        false: {
+            circle: string;
+            rect: string;
+            line: string;
+        };
+    };
+}, {
+    root: string;
+    lines: string;
+    circle: string;
+    rect: string;
+    line: string;
+}, undefined, {
+    animate: {
+        true: {
+            circle: string;
+            rect: string;
+            line: string;
+        };
+        false: {
+            circle: string;
+            rect: string;
+            line: string;
+        };
+    };
+}, {
+    root: string;
+    lines: string;
+    circle: string;
+    rect: string;
+    line: string;
+}, import("tailwind-variants").TVReturnType<{
+    animate: {
+        true: {
+            circle: string;
+            rect: string;
+            line: string;
+        };
+        false: {
+            circle: string;
+            rect: string;
+            line: string;
+        };
+    };
+}, {
+    root: string;
+    lines: string;
+    circle: string;
+    rect: string;
+    line: string;
+}, undefined, unknown, unknown, undefined>>;
+export type SkeletonRecipeProps = VariantProps<typeof skeletonRecipe>;
+export type SkeletonVariant = 'line' | 'circle' | 'rect';
+export interface SkeletonProps {
+    /** Shape to render: a stack of text lines, a circle (avatar), or a rectangle (media). */
+    variant?: SkeletonVariant;
+    /** CSS width of the placeholder (e.g. '48px', '100%'). Defaults per variant. */
+    width?: string;
+    /** CSS height of the placeholder. Defaults per variant; falls back to `width` for circles. */
+    height?: string;
+    /** Number of line bars rendered for the 'line' variant. */
+    lines?: number;
+    /** Animate with the shimmer sweep; when false, renders a flat surface fill. */
+    animate?: boolean;
+    /** Additional CSS classes for the root region. */
+    class?: string;
+}