tera-system-ui 0.1.75 → 0.2.1

package/registry/label.json

@@ -0,0 +1,44 @@
+{
+  "$schema": "https://tera-system-ui/registry-item.schema.json",
+  "name": "label",
+  "type": "registry:component",
+  "description": "Accessible form label.",
+  "recipe": "src/lib/components/label/Label.recipe.ts",
+  "files": [
+    {
+      "path": "src/lib/components/label/index.ts",
+      "target": "index.ts",
+      "type": "ts",
+      "content": "export {default as Label} from './Label.svelte'\nexport {labelRecipe} from './Label.recipe'\nexport type {LabelProps, LabelRecipeProps} from './Label.recipe'\n"
+    },
+    {
+      "path": "src/lib/components/label/Label.recipe.ts",
+      "target": "Label.recipe.ts",
+      "type": "recipe",
+      "content": "import {tv, type VariantProps} from \"tailwind-variants\";\nimport type {Snippet} from \"svelte\";\nimport type {HTMLLabelAttributes} from \"svelte/elements\";\n\n/**\n * Label recipe — the canonical styled layer for the base design language.\n *\n * Primary customization surface: an app owns its look by extending this recipe\n * with `tv({ extend: labelRecipe, ... })` in typed code — base sizing and the\n * required-asterisk treatment are inherited; only the design language changes.\n * See docs/ARCHITECTURE.md for the worked example (kept out of this JSDoc so the\n * llms doc generator doesn't grep its variant tokens).\n */\nexport const labelRecipe = tv({\n    base: 'inline-flex items-center gap-1 select-none font-semibold tracking-tight text-text-primary leading-tight peer-disabled:cursor-not-allowed peer-disabled:text-text-disabled',\n    variants: {\n        size: {\n            sm: 'text-xs tracking-normal text-text-secondary',\n            md: 'text-sm',\n            lg: 'text-base',\n        },\n        required: {\n            true: \"after:content-['*'] after:font-mono after:font-semibold after:leading-none after:-translate-y-px after:text-error-default\",\n        },\n    },\n    compoundVariants: [],\n    defaultVariants: {\n        size: 'md',\n    },\n});\n\nexport type LabelRecipeProps = VariantProps<typeof labelRecipe>;\n\nexport interface LabelProps extends HTMLLabelAttributes, LabelRecipeProps {\n    children?: Snippet;\n    class?: string;\n    ref?: HTMLLabelElement | null;\n}\n"
+    },
+    {
+      "path": "src/lib/components/label/Label.svelte",
+      "target": "Label.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\r\n    import { Label as LabelPrimitive } from \"bits-ui\";\r\n    import { cn } from \"$lib/utils\";\r\n    import { type LabelProps, labelRecipe } from \"./Label.recipe\";\r\n\r\n    let {\r\n        ref = $bindable(null),\r\n        class: className,\r\n        size = 'md',\r\n        required,\r\n        ...restProps\r\n    }: LabelProps = $props();\r\n</script>\r\n\r\n<LabelPrimitive.Root\r\n    bind:ref\r\n    class={cn(labelRecipe({ size, required }), className)}\r\n    {...restProps}\r\n/>"
+    }
+  ],
+  "dependencies": [
+    "bits-ui",
+    "tailwind-variants"
+  ],
+  "peerDependencies": [
+    "svelte"
+  ],
+  "registryDependencies": [],
+  "sharedModules": {
+    "utils": true,
+    "icons": false,
+    "hooks": false
+  },
+  "exports": [
+    "Label",
+    "labelRecipe"
+  ]
+}

package/registry/popover-responsive.json

@@ -0,0 +1,46 @@
+{
+  "$schema": "https://tera-system-ui/registry-item.schema.json",
+  "name": "popover-responsive",
+  "type": "registry:component",
+  "description": "",
+  "recipe": "src/lib/components/popover-responsive/PopoverResponsive.recipe.ts",
+  "files": [
+    {
+      "path": "src/lib/components/popover-responsive/index.ts",
+      "target": "index.ts",
+      "type": "ts",
+      "content": "export {default as PopoverResponsive} from './PopoverResponsive.svelte'\nexport {popoverResponsiveRecipe} from './PopoverResponsive.recipe'\nexport type {PopoverResponsiveProps, PopoverResponsiveRecipeProps} from './PopoverResponsive.recipe'\n"
+    },
+    {
+      "path": "src/lib/components/popover-responsive/PopoverResponsive.recipe.ts",
+      "target": "PopoverResponsive.recipe.ts",
+      "type": "recipe",
+      "content": "import {tv, type VariantProps} from \"tailwind-variants\";\nimport type {Snippet} from \"svelte\";\nimport type {PopoverProps} from '../popover/Popover.recipe';\nimport type {DialogProps} from '../dialog/Dialog.recipe';\n\n/**\n * PopoverResponsive recipe — the canonical styled layer for the base design\n * language. Thin composite: renders the Popover on desktop (≥ breakpoint) and the\n * Dialog on mobile, switching at `desktopBreakpoint`. It owns almost no styling —\n * the desktop/mobile panels come fully styled from Popover and Dialog, which stay\n * composed as components (the stable seam). The single owned part is the mobile\n * wrapper button, an unstyled reset that turns the trigger snippet into a tap\n * target; it carries no variants.\n *\n * Customization surface — three layers, lightest first:\n *   1. `class` (both panels) / `triggerClass` (mobile button) for one-off classes.\n *   2. First-class common props (side/sideOffset/align for the popover,\n *      dialogPosition/dialogPadding + header/footer for the dialog).\n *   3. `popoverProps` / `dialogProps` — typed escape hatches spread onto the\n *      underlying component, exposing every child prop and overriding the\n *      common props above. Any extra top-level prop is forwarded to BOTH.\n *\n * Or restyle the underlying look by extending the Popover/Dialog recipes. See\n * docs/ARCHITECTURE.md for worked examples (kept out of this JSDoc so the llms\n * doc generator doesn't grep its tokens).\n */\nexport const popoverResponsiveRecipe = tv({\n    slots: {\n        triggerButton: 'inline-flex appearance-none bg-transparent p-0 border-0 cursor-pointer',\n    },\n});\n\nexport type PopoverResponsiveRecipeProps = VariantProps<typeof popoverResponsiveRecipe>;\n\nexport interface PopoverResponsiveProps {\n    /** Content rendered inside the popover/dialog panel. */\n    children?: Snippet;\n    /** Snippet used as the clickable trigger. */\n    trigger?: Snippet;\n    /** Whether the panel is open. Bindable. */\n    open?: boolean;\n\n    // ── Styling ──────────────────────────────────────────────────────────────\n    /** Additional classes applied to BOTH the desktop popover panel and the mobile dialog panel. */\n    class?: string;\n    /** Additional classes for the mobile trigger wrapper button. */\n    triggerClass?: string;\n\n    // ── Responsive switch ────────────────────────────────────────────────────\n    /** Viewport width (px) at/above which the desktop popover is used. Defaults to 640. */\n    desktopBreakpoint?: number;\n\n    // ── Desktop popover positioning (common surface) ─────────────────────────\n    /** Which side of the trigger the desktop popover appears on. */\n    side?: 'top' | 'bottom' | 'left' | 'right';\n    /** Distance in pixels between the trigger and popover (desktop only). */\n    sideOffset?: number;\n    /** Alignment of the popover relative to the trigger (desktop only). */\n    align?: 'start' | 'center' | 'end';\n\n    // ── Mobile dialog layout (common surface) ────────────────────────────────\n    /** Vertical placement of the mobile dialog. Defaults to 'top'. */\n    dialogPosition?: DialogProps['position'];\n    /** Inner padding of the mobile dialog. Defaults to 'none'. */\n    dialogPadding?: DialogProps['padding'];\n    /** Snippet rendered in the mobile dialog header area (mobile only). */\n    header?: Snippet;\n    /** Snippet rendered in the mobile dialog footer area (mobile only). */\n    footer?: Snippet;\n\n    // ── Full per-child passthrough (typed escape hatches) ────────────────────\n    /** Any additional prop forwarded to the desktop `<Popover>`. Overrides the common props above. */\n    popoverProps?: Partial<PopoverProps>;\n    /** Any additional prop forwarded to the mobile `<Dialog>`. Overrides the common props above. */\n    dialogProps?: Partial<DialogProps>;\n\n    /** Any remaining prop is forwarded to BOTH underlying components. */\n    [key: string]: unknown;\n}\n"
+    },
+    {
+      "path": "src/lib/components/popover-responsive/PopoverResponsive.svelte",
+      "target": "PopoverResponsive.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\n    import {innerWidth} from 'svelte/reactivity/window';\n    import {Dialog} from '$lib/components/dialog/index.js';\n    import {Popover} from '$lib/components/popover/index.js';\n    import {cn} from '$lib/utils/index.js';\n    import {popoverResponsiveRecipe, type PopoverResponsiveProps} from './PopoverResponsive.recipe.js';\n\n    let {\n        children,\n        trigger,\n        open = $bindable(false),\n\n        // Styling\n        class: className,\n        triggerClass,\n\n        // Responsive switch\n        desktopBreakpoint = 640,\n\n        // Desktop popover positioning\n        side = 'bottom',\n        sideOffset = 4,\n        align = 'start',\n\n        // Mobile dialog layout\n        dialogPosition = 'top',\n        dialogPadding = 'none',\n        header,\n        footer,\n\n        // Full per-child passthrough (override the common props above)\n        popoverProps,\n        dialogProps,\n\n        // Anything else is forwarded to both underlying components\n        ...restProps\n    }: PopoverResponsiveProps = $props();\n\n    const isDesktop = $derived((innerWidth.current ?? desktopBreakpoint) >= desktopBreakpoint);\n\n    const {triggerButton} = popoverResponsiveRecipe();\n</script>\n\n{#if isDesktop}\n    <!-- Desktop: bind open directly so both internal and external close work -->\n    <Popover\n        bind:open\n        {side}\n        {sideOffset}\n        {align}\n        {trigger}\n        {...restProps}\n        {...popoverProps}\n        class={cn(className, popoverProps?.class)}\n    >\n        {@render children?.()}\n    </Popover>\n{:else}\n    <!-- Mobile: bind open directly to Dialog, toggle via wrapper button -->\n    <button\n        type=\"button\"\n        class={triggerButton({class: triggerClass})}\n        onclick={() => open = !open}\n    >\n        {@render trigger?.()}\n    </button>\n    <Dialog\n        bind:open\n        position={dialogPosition}\n        padding={dialogPadding}\n        {header}\n        {footer}\n        {...restProps}\n        {...dialogProps}\n        class={cn(className, dialogProps?.class)}\n    >\n        {@render children?.()}\n    </Dialog>\n{/if}\n"
+    }
+  ],
+  "dependencies": [
+    "tailwind-variants"
+  ],
+  "peerDependencies": [
+    "svelte"
+  ],
+  "registryDependencies": [
+    "dialog",
+    "popover"
+  ],
+  "sharedModules": {
+    "utils": true,
+    "icons": false,
+    "hooks": false
+  },
+  "exports": [
+    "PopoverResponsive",
+    "popoverResponsiveRecipe"
+  ]
+}

package/registry/popover.json

@@ -0,0 +1,44 @@
+{
+  "$schema": "https://tera-system-ui/registry-item.schema.json",
+  "name": "popover",
+  "type": "registry:component",
+  "description": "Floating popover anchored to a trigger.",
+  "recipe": "src/lib/components/popover/Popover.recipe.ts",
+  "files": [
+    {
+      "path": "src/lib/components/popover/index.ts",
+      "target": "index.ts",
+      "type": "ts",
+      "content": "export {default as Popover} from './Popover.svelte'\nexport {popoverRecipe} from './Popover.recipe'\nexport type {PopoverProps, PopoverRecipeProps} from './Popover.recipe'\n"
+    },
+    {
+      "path": "src/lib/components/popover/Popover.recipe.ts",
+      "target": "Popover.recipe.ts",
+      "type": "recipe",
+      "content": "import {tv, type VariantProps} from \"tailwind-variants\";\nimport type {Snippet} from \"svelte\";\n\n/**\n * Popover recipe — the canonical styled layer for the base design language.\n *\n * Multi-part component (built on bits-ui Popover): the recipe is slotted by role\n * — `trigger` (the inline wrapper around the clickable trigger) and `content`\n * (the floating panel with its open/close animations). An app owns its look by\n * extending this recipe with `tv({ extend: popoverRecipe, ... })` in typed code.\n *\n * Restyle-internals (the lighter rung): the per-component CSS var below\n * (--tera-popover-radius) lets a theme/app retune the panel's corner radius with\n * no code change; it defaults to the global container-radius token. See\n * docs/ARCHITECTURE.md for worked examples (kept out of this JSDoc so the llms\n * doc generator doesn't grep its tokens).\n */\nexport const popoverRecipe = tv({\n    slots: {\n        trigger: 'inline-flex',\n        content: `z-50 overflow-hidden bg-surface rounded-[var(--tera-popover-radius,var(--border-radius-container))] border border-border-default shadow-lg\n                animate-in fade-in zoom-in-95 duration-[var(--tera-duration-fast)]\n                data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95`,\n    },\n});\n\nexport type PopoverRecipeProps = VariantProps<typeof popoverRecipe>;\n\nexport interface PopoverProps extends PopoverRecipeProps {\n    children?: Snippet;\n    /** Snippet used as the clickable trigger that opens the popover. */\n    trigger?: Snippet;\n    /** Additional CSS classes for the popover content panel. */\n    class?: string;\n    /** Whether the popover is open. Bindable. */\n    open?: boolean;\n    /** Which side of the trigger the popover appears on. */\n    side?: 'top' | 'bottom' | 'left' | 'right';\n    /** Distance in pixels between the trigger and popover panel. */\n    sideOffset?: number;\n    /** Alignment of the popover relative to the trigger. */\n    align?: 'start' | 'center' | 'end';\n    /** Additional offset in pixels along the alignment axis. */\n    alignOffset?: number;\n    /** Whether clicking outside the popover closes it. */\n    closeOnClickOutside?: boolean;\n    /** Whether pressing Escape closes the popover. Defaults to true. */\n    closeOnEscape?: boolean;\n    /** Whether focus is trapped inside the popover content while open. */\n    trapFocus?: boolean;\n    /** Prevent the page from scrolling while the popover is open. */\n    preventScroll?: boolean;\n    /** Called when the user interacts outside the popover boundaries. */\n    onInteractOutside?: () => void;\n    /** ARIA role for the popover content element. */\n    role?: string;\n    /** Bindable reference to the popover content element. */\n    ref?: HTMLElement | null;\n    [key: string]: unknown;\n}\n"
+    },
+    {
+      "path": "src/lib/components/popover/Popover.svelte",
+      "target": "Popover.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\n    import {Popover as PopoverPrimitive} from 'bits-ui';\n    import {type PopoverProps, popoverRecipe} from './Popover.recipe';\n\n    let {\n        children,\n        trigger,\n        class: className,\n        open = $bindable(false),\n        side = 'bottom',\n        sideOffset = 4,\n        align = 'start',\n        alignOffset,\n        closeOnClickOutside = true,\n        closeOnEscape = true,\n        trapFocus,\n        preventScroll,\n        onInteractOutside,\n        ref = $bindable(null),\n        ...props\n    }: PopoverProps = $props();\n\n    const r = $derived(popoverRecipe());\n</script>\n\n<PopoverPrimitive.Root bind:open>\n    {#if trigger}\n        <PopoverPrimitive.Trigger>\n            {#snippet child({ props: triggerProps })}\n                <span {...triggerProps} class={r.trigger()}>\n                    {@render trigger()}\n                </span>\n            {/snippet}\n        </PopoverPrimitive.Trigger>\n    {/if}\n\n    <PopoverPrimitive.Portal>\n        <PopoverPrimitive.Content\n            bind:ref\n            {side}\n            {sideOffset}\n            {align}\n            {alignOffset}\n            {trapFocus}\n            {preventScroll}\n            interactOutsideBehavior={closeOnClickOutside ? 'close' : 'ignore'}\n            escapeKeydownBehavior={closeOnEscape ? 'close' : 'ignore'}\n            onInteractOutside={() => onInteractOutside?.()}\n            class={r.content({ class: className })}\n            {...props}\n        >\n            {@render children?.()}\n        </PopoverPrimitive.Content>\n    </PopoverPrimitive.Portal>\n</PopoverPrimitive.Root>\n"
+    }
+  ],
+  "dependencies": [
+    "bits-ui",
+    "tailwind-variants"
+  ],
+  "peerDependencies": [
+    "svelte"
+  ],
+  "registryDependencies": [],
+  "sharedModules": {
+    "utils": false,
+    "icons": false,
+    "hooks": false
+  },
+  "exports": [
+    "Popover",
+    "popoverRecipe"
+  ]
+}

package/registry/select.json

@@ -0,0 +1,51 @@
+{
+  "$schema": "https://tera-system-ui/registry-item.schema.json",
+  "name": "select",
+  "type": "registry:component",
+  "description": "Select dropdown with options/groups and keyboard nav.",
+  "recipe": "src/lib/components/select/Select.recipe.ts",
+  "files": [
+    {
+      "path": "src/lib/components/select/index.ts",
+      "target": "index.ts",
+      "type": "ts",
+      "content": "export {default as Select} from './Select.svelte'\nexport {selectRecipe} from './Select.recipe'\nexport type {SelectProps, SelectOption, SelectGroup, SelectRecipeProps} from './Select.recipe'\n"
+    },
+    {
+      "path": "src/lib/components/select/Select.recipe.ts",
+      "target": "Select.recipe.ts",
+      "type": "recipe",
+      "content": "import {tv, type VariantProps} from \"tailwind-variants\";\nimport type {Snippet} from \"svelte\";\n\n/**\n * Select recipe — the canonical styled layer for the base design language.\n *\n * Multi-part component (built on bits-ui Select): the recipe is slotted by role\n * — trigger / content / viewport / item / group — so an app can restyle any part\n * independently. The trigger carries the visual variants (look, size, status,\n * disabled); the dropdown parts are static base strings.\n *\n * Primary customization surface: extend with `tv({ extend: selectRecipe, ... })`\n * in typed code. Lighter rung: the per-component CSS vars (--tera-select-*) let a\n * theme retune corner radius with no code change; they default to global axis\n * tokens in tera-ui-base.css. See docs/ARCHITECTURE.md for worked examples (kept\n * out of this JSDoc so the llms doc generator doesn't grep its tokens).\n */\nexport const selectRecipe = tv({\n    slots: {\n        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)]',\n        content: `z-50 min-w-[var(--bits-select-anchor-width)] flex flex-col overflow-hidden\n                bg-surface rounded-[var(--tera-select-content-radius,var(--border-radius-container))] border border-border-default shadow-lg\n                animate-in fade-in zoom-in-95 duration-[var(--tera-duration-fast)]\n                data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95`,\n        viewport: 'p-2 flex-1 min-h-0 overflow-y-auto',\n        group: 'px-2 py-1.5 text-xs font-semibold text-text-tertiary uppercase tracking-wide',\n        item: `relative flex w-full cursor-pointer select-none items-center rounded px-2 py-2 text-sm text-text-primary outline-none\n        transition-colors ease-ui duration-[var(--tera-duration-micro)]\n        data-[highlighted]:bg-surface-hover\n        data-[selected]:font-medium data-[selected]:text-interactive\n        data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50`,\n    },\n    variants: {\n        variant: {\n            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'},\n            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'},\n            borderless:{trigger: 'bg-transparent border-0 hover:bg-surface-raised'},\n        },\n        size: {\n            sm: {trigger: 'h-[var(--tera-control-height-sm)] px-[var(--tera-control-px-md)] text-sm'},\n            md: {trigger: 'h-[var(--tera-control-height-md)] px-[var(--tera-control-px-md)] text-sm'},\n            lg: {trigger: 'h-[var(--tera-control-height-lg)] px-[var(--tera-control-px-md)] text-base'},\n        },\n        disabled: {\n            true: {trigger: 'cursor-not-allowed bg-surface-sunken text-text-disabled border-border-default pointer-events-none'},\n        },\n        status: {\n            error:   {trigger: 'border-error-default hover:border-error-hover data-[state=open]:border-error-default data-[state=open]:shadow-focus-error'},\n            warning: {trigger: 'border-warning-default hover:border-warning-hover data-[state=open]:border-warning-default data-[state=open]:shadow-focus-warning'},\n        },\n    },\n    defaultVariants: {variant: 'outlined', size: 'md'},\n});\n\nexport type SelectRecipeProps = VariantProps<typeof selectRecipe>;\n\nexport interface SelectOption {\n    /** Unique value submitted or passed to onchange. */\n    value: string;\n    /** Human-readable label shown in the list and trigger. */\n    label: string;\n    /** Prevents selecting this option. */\n    disabled?: boolean;\n}\n\nexport interface SelectGroup {\n    /** Heading label displayed above the group's options. */\n    label: string;\n    /** Options belonging to this group. */\n    options: SelectOption[];\n}\n\nexport interface SelectProps extends SelectRecipeProps {\n    /** Selection mode. Use 'multiple' to allow picking several options. */\n    type?: 'single' | 'multiple';\n    /** Flat list of options. Use `groups` instead for grouped options. */\n    options?: SelectOption[];\n    /** Grouped options — renders labeled sections. Takes precedence over `options`. */\n    groups?: SelectGroup[];\n    /**\n     * Currently selected value(s). Bindable.\n     * A string for type='single', a string[] for type='multiple'.\n     */\n    value?: string | string[];\n    /** Text shown in the trigger when nothing is selected. */\n    placeholder?: string;\n    /** Prevents all interaction. */\n    disabled?: boolean;\n    /** Whether keyboard navigation wraps from the last item to the first. */\n    loop?: boolean;\n    /** Allow deselecting the current value by clicking it again (single mode only). */\n    allowDeselect?: boolean;\n    /** Whether the select is required for form submission. */\n    required?: boolean;\n    /** Name attribute used when submitting within a form. */\n    name?: string;\n    /** Additional CSS classes for the trigger button. */\n    class?: string;\n    /** Replace the default selected-item check mark with custom markup (structural seam). */\n    checkIcon?: Snippet;\n    /** Called when the selected value changes. */\n    onchange?: (value: string | string[]) => void;\n    [key: string]: unknown;\n}\n"
+    },
+    {
+      "path": "src/lib/components/select/select.scss",
+      "target": "select.scss",
+      "type": "style",
+      "content": ".tera-select {\r\n    option {\r\n        background: var(--color-neutral-token-2);\r\n        color: var(--color-neutral-token-13);\r\n    }\r\n}"
+    },
+    {
+      "path": "src/lib/components/select/Select.svelte",
+      "target": "Select.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\n    import {Select as SelectPrimitive} from 'bits-ui';\n    import {type SelectProps, selectRecipe} from './Select.recipe';\n    import {IconCheck, IconChevronDown} from '$lib/internal/icons';\n    import IconChevronsUp from '@tabler/icons-svelte/icons/chevrons-up';\n    import IconChevronsDown from '@tabler/icons-svelte/icons/chevrons-down';\n\n    let {\n        type = 'single',\n        options = [],\n        groups,\n        value = $bindable(),\n        placeholder = 'Select…',\n        variant,\n        size,\n        disabled,\n        status,\n        loop,\n        allowDeselect,\n        required,\n        name,\n        class: className,\n        checkIcon,\n        onchange,\n    }: SelectProps = $props();\n\n    // All options flat — used for label lookup in multiple mode\n    const allOptions = $derived(\n        groups ? groups.flatMap(g => g.options) : options\n    );\n\n    // Single mode: selected label\n    const selectedLabel = $derived.by(() => {\n        const v = value;\n        if (typeof v !== 'string' || !v) return '';\n        return allOptions.find(o => o.value === v)?.label ?? v;\n    });\n\n    // Multiple mode: selected chips\n    const selectedChips = $derived(\n        Array.isArray(value)\n            ? (value as string[]).map(v => ({ value: v, label: allOptions.find(o => o.value === v)?.label ?? v }))\n            : []\n    );\n\n    const r = $derived(selectRecipe({ variant, size, disabled, status }));\n\n    const minHeight = \"21rem\"\n</script>\n\n{#snippet itemList()}\n    <SelectPrimitive.Viewport class={r.viewport()}>\n        {#if groups && groups.length > 0}\n            {#each groups as group (group.label)}\n                <SelectPrimitive.Group>\n                    <SelectPrimitive.GroupHeading\n                        class={r.group()}\n                    >\n                        {group.label}\n                    </SelectPrimitive.GroupHeading>\n                    {#each group.options as option (option.value)}\n                        {@render renderItem(option)}\n                    {/each}\n                </SelectPrimitive.Group>\n            {/each}\n        {:else}\n            {#each options as option (option.value)}\n                {@render renderItem(option)}\n            {/each}\n        {/if}\n    </SelectPrimitive.Viewport>\n{/snippet}\n\n{#if type === 'multiple'}\n    <SelectPrimitive.Root\n        type=\"multiple\"\n        bind:value={value as string[] | undefined}\n        onValueChange={(v) => onchange?.(v)}\n        {disabled}\n        {loop}\n        {required}\n        {name}\n    >\n        <!--\n            Multiple-mode trigger: chip tags displayed in the button, individual × spans\n            are non-interactive (no onclick) to avoid button-in-button nesting.\n            Managing selection is done exclusively through the dropdown items.\n        -->\n        <SelectPrimitive.Trigger class={r.trigger({ class: `h-auto min-h-[var(--tera-control-height-md)] flex-wrap py-1.5 ${className ?? ''}` })}>\n            {#if selectedChips.length > 0}\n                {#each selectedChips as chip (chip.value)}\n                    <!-- Plain span tag — no interactive elements inside <button> -->\n                    <span class=\"inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs bg-interactive-subtle text-interactive-text border border-interactive-border\">\n                        {chip.label}\n                        <!-- Use span with role for the remove hint; actual removal happens via re-clicking in dropdown -->\n<!--                        <span class=\"flex items-center opacity-60\" aria-hidden=\"true\"><IconX class=\"size-3\" /></span>-->\n                    </span>\n                {/each}\n            {:else}\n                <span class=\"text-text-tertiary flex-1\">{placeholder}</span>\n            {/if}\n            <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\" />\n        </SelectPrimitive.Trigger>\n\n        <SelectPrimitive.Portal>\n            <SelectPrimitive.Content\n                sideOffset={4}\n                class={r.content()}\n                style=\"max-height: min({minHeight}, var(--bits-select-content-available-height))\"\n            >\n                <SelectPrimitive.ScrollUpButton class=\"flex w-full items-center justify-center pt-1 text-text-tertiary cursor-default hover:text-text-primary transition-colors\">\n                    <IconChevronsUp class=\"size-3.5\" />\n                </SelectPrimitive.ScrollUpButton>\n                {@render itemList()}\n                <SelectPrimitive.ScrollDownButton class=\"flex w-full items-center justify-center pb-1 text-text-tertiary cursor-default hover:text-text-primary transition-colors\">\n                    <IconChevronsDown class=\"size-3.5\" />\n                </SelectPrimitive.ScrollDownButton>\n            </SelectPrimitive.Content>\n        </SelectPrimitive.Portal>\n    </SelectPrimitive.Root>\n\n{:else}\n    <SelectPrimitive.Root\n        type=\"single\"\n        bind:value={value as string | undefined}\n        onValueChange={(v) => onchange?.(v)}\n        {disabled}\n        {loop}\n        {allowDeselect}\n        {required}\n        {name}\n    >\n        <SelectPrimitive.Trigger class={r.trigger({ class: className })}>\n            <span class={!value ? 'text-text-tertiary' : 'text-text-primary'}>\n                {value ? selectedLabel : placeholder}\n            </span>\n            <IconChevronDown\n                class=\"size-4 shrink-0 text-text-tertiary transition-transform ease-ui duration-[var(--tera-duration-fast)] data-[state=open]:rotate-180\"\n            />\n        </SelectPrimitive.Trigger>\n\n        <SelectPrimitive.Portal>\n            <SelectPrimitive.Content\n                sideOffset={6}\n                class={r.content()}\n                style=\"max-height: min({minHeight}, var(--bits-select-content-available-height))\"\n            >\n                <SelectPrimitive.ScrollUpButton class=\"flex w-full items-center justify-center pt-1 text-text-tertiary cursor-default hover:text-text-primary transition-colors\">\n                    <IconChevronsUp class=\"size-3.5\" />\n                </SelectPrimitive.ScrollUpButton>\n                {@render itemList()}\n                <SelectPrimitive.ScrollDownButton class=\"flex w-full items-center justify-center pb-1 text-text-tertiary cursor-default hover:text-text-primary transition-colors\">\n                    <IconChevronsDown class=\"size-3.5\" />\n                </SelectPrimitive.ScrollDownButton>\n            </SelectPrimitive.Content>\n        </SelectPrimitive.Portal>\n    </SelectPrimitive.Root>\n{/if}\n\n{#snippet renderItem(option: { value: string; label: string; disabled?: boolean })}\n    <SelectPrimitive.Item\n        value={option.value}\n        label={option.label}\n        disabled={option.disabled}\n        class={r.item()}\n    >\n        {#snippet children({selected})}\n            <span class=\"flex-1\">{option.label}</span>\n            {#if selected}\n                {#if checkIcon}\n                    {@render checkIcon()}\n                {:else}\n                    <IconCheck class=\"size-4 text-interactive shrink-0\"/>\n                {/if}\n            {/if}\n        {/snippet}\n    </SelectPrimitive.Item>\n{/snippet}\n"
+    }
+  ],
+  "dependencies": [
+    "bits-ui",
+    "@tabler/icons-svelte",
+    "tailwind-variants"
+  ],
+  "peerDependencies": [
+    "svelte"
+  ],
+  "registryDependencies": [],
+  "sharedModules": {
+    "utils": false,
+    "icons": true,
+    "hooks": false
+  },
+  "exports": [
+    "Select",
+    "selectRecipe"
+  ]
+}

package/registry/skeleton.json

@@ -0,0 +1,43 @@
+{
+  "$schema": "https://tera-system-ui/registry-item.schema.json",
+  "name": "skeleton",
+  "type": "registry:component",
+  "description": "",
+  "recipe": "src/lib/components/skeleton/Skeleton.recipe.ts",
+  "files": [
+    {
+      "path": "src/lib/components/skeleton/index.ts",
+      "target": "index.ts",
+      "type": "ts",
+      "content": "export {default as Skeleton} from './Skeleton.svelte'\nexport {skeletonRecipe} from './Skeleton.recipe'\nexport type {SkeletonProps, SkeletonRecipeProps, SkeletonVariant} from './Skeleton.recipe'\n"
+    },
+    {
+      "path": "src/lib/components/skeleton/Skeleton.recipe.ts",
+      "target": "Skeleton.recipe.ts",
+      "type": "recipe",
+      "content": "import {tv, type VariantProps} from \"tailwind-variants\";\n\n/**\n * Skeleton recipe — the canonical styled layer for the base design language.\n *\n * Multi-part component: the recipe is slotted by role — root (the labelled\n * loading region) / shape (circle, rect, and each line bar) / lines (the\n * stacked-line wrapper). The `animate` variant swaps the shimmer animation for\n * a flat surface fill; the `variant`/`tone` slots carry the per-shape radius.\n *\n * Primary customization surface: extend with `tv({ extend: skeletonRecipe, ... })`\n * in typed code. Lighter rung: the per-component CSS var (--tera-skeleton-radius)\n * lets a theme retune the rect corner radius with no code change; it defaults to\n * the global base-radius token. See docs/ARCHITECTURE.md for worked examples\n * (kept out of this JSDoc so the llms doc generator doesn't grep its tokens).\n */\nexport const skeletonRecipe = tv({\n    slots: {\n        root: '',\n        lines: 'flex flex-col gap-2',\n        circle: 'rounded-full',\n        rect: 'rounded-[var(--tera-skeleton-radius,var(--border-radius-base))]',\n        line: 'h-3 rounded-full',\n    },\n    variants: {\n        animate: {\n            true: {\n                circle: 'skeleton-shimmer',\n                rect: 'skeleton-shimmer',\n                line: 'skeleton-shimmer',\n            },\n            false: {\n                circle: 'bg-surface-hover',\n                rect: 'bg-surface-hover',\n                line: 'bg-surface-hover',\n            },\n        },\n    },\n    defaultVariants: {\n        animate: true,\n    },\n});\n\nexport type SkeletonRecipeProps = VariantProps<typeof skeletonRecipe>;\n\nexport type SkeletonVariant = 'line' | 'circle' | 'rect';\n\nexport interface SkeletonProps {\n    /** Shape to render: a stack of text lines, a circle (avatar), or a rectangle (media). */\n    variant?: SkeletonVariant;\n    /** CSS width of the placeholder (e.g. '48px', '100%'). Defaults per variant. */\n    width?: string;\n    /** CSS height of the placeholder. Defaults per variant; falls back to `width` for circles. */\n    height?: string;\n    /** Number of line bars rendered for the 'line' variant. */\n    lines?: number;\n    /** Animate with the shimmer sweep; when false, renders a flat surface fill. */\n    animate?: boolean;\n    /** Additional CSS classes for the root region. */\n    class?: string;\n}\n"
+    },
+    {
+      "path": "src/lib/components/skeleton/Skeleton.svelte",
+      "target": "Skeleton.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\n    import {skeletonRecipe, type SkeletonProps} from './Skeleton.recipe';\n\n    let {\n        variant = 'line',\n        width,\n        height,\n        lines = 1,\n        animate = true,\n        class: className = '',\n    }: SkeletonProps = $props();\n\n    const styles = $derived(skeletonRecipe({animate}));\n</script>\n\n<div\n    aria-label=\"Loading...\"\n    aria-busy=\"true\"\n    class={styles.root({class: className})}\n>\n    {#if variant === 'circle'}\n        <div\n            class={styles.circle()}\n            style=\"width:{width ?? '48px'};height:{height ?? width ?? '48px'}\"\n        ></div>\n    {:else if variant === 'rect'}\n        <div\n            class={styles.rect()}\n            style=\"width:{width ?? '100%'};height:{height ?? '120px'}\"\n        ></div>\n    {:else}\n        <div class={styles.lines()} style=\"width:{width ?? '100%'}\">\n            {#each Array(lines) as _, i (i)}\n                <div\n                    class={styles.line()}\n                    style={i === lines - 1 && lines > 1 ? 'width:70%' : 'width:100%'}\n                ></div>\n            {/each}\n        </div>\n    {/if}\n</div>\n\n<style>\n    .skeleton-shimmer {\n        background: linear-gradient(\n            90deg,\n            var(--color-surface-hover) 25%,\n            var(--color-surface-sunken) 50%,\n            var(--color-surface-hover) 75%\n        );\n        background-size: 200% 100%;\n        animation: shimmer 1.5s infinite;\n    }\n\n    @keyframes shimmer {\n        0%   { background-position: 200% 0; }\n        100% { background-position: -200% 0; }\n    }\n</style>\n"
+    }
+  ],
+  "dependencies": [
+    "tailwind-variants"
+  ],
+  "peerDependencies": [
+    "svelte"
+  ],
+  "registryDependencies": [],
+  "sharedModules": {
+    "utils": false,
+    "icons": false,
+    "hooks": false
+  },
+  "exports": [
+    "Skeleton",
+    "skeletonRecipe"
+  ]
+}

package/registry/slider.json

@@ -0,0 +1,44 @@
+{
+  "$schema": "https://tera-system-ui/registry-item.schema.json",
+  "name": "slider",
+  "type": "registry:component",
+  "description": "Range slider for numeric selection.",
+  "recipe": "src/lib/components/slider/Slider.recipe.ts",
+  "files": [
+    {
+      "path": "src/lib/components/slider/index.ts",
+      "target": "index.ts",
+      "type": "ts",
+      "content": "export {default as Slider} from './Slider.svelte'\nexport type {SliderProps} from './Slider.recipe'\nexport {sliderRecipe} from './Slider.recipe'\nexport type {SliderRecipeProps} from './Slider.recipe'\n"
+    },
+    {
+      "path": "src/lib/components/slider/Slider.recipe.ts",
+      "target": "Slider.recipe.ts",
+      "type": "recipe",
+      "content": "import {tv, type VariantProps} from \"tailwind-variants\";\n\n/**\n * Slider recipe — the canonical styled layer for the base design language.\n *\n * Multi-part component (built on bits-ui Slider): the recipe is slotted by role\n * — `root` (the Root wrapper / hit area), `track` (the rail), `range` (the\n * filled portion), `thumb` (the draggable handle). Layout switches on the\n * `orientation` variant (horizontal / vertical), and the `disabled` variant\n * dims the whole control.\n *\n * Primary customization surface: extend with `tv({ extend: sliderRecipe, ... })`\n * in typed code. Lighter rung: the per-component CSS var (--tera-slider-radius)\n * lets a theme retune the thumb corner radius with no code change; it falls back\n * inline to the prior pill shape. See docs/ARCHITECTURE.md for worked examples\n * (kept out of this JSDoc so the llms doc generator doesn't grep its tokens).\n */\nexport const sliderRecipe = tv({\n    slots: {\n        root: 'relative flex touch-none select-none items-center',\n        track: `relative grow rounded-full bg-surface-sunken border border-border-strong\n                    shadow-[inset_0_1px_2px_rgba(15,23,42,0.18)] overflow-hidden`,\n        range: 'absolute bg-interactive rounded-full',\n        thumb: `block size-5 rounded-[var(--tera-slider-radius,9999px)] border-2 border-interactive bg-surface-control shadow-key outline-none\n                    transition-[box-shadow,transform,background-color] ease-spring duration-[var(--tera-duration-fast)]\n                    hover:scale-110 hover:shadow-focus\n                    focus-visible:scale-110 focus-visible:shadow-focus\n                    active:scale-95 active:bg-interactive-subtle\n                    data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:shadow-none`,\n    },\n    variants: {\n        orientation: {\n            horizontal: {\n                root: 'flex w-full py-2.5',\n                track: 'h-2 w-full',\n                range: 'h-full',\n            },\n            vertical: {\n                root: 'flex flex-col h-full px-2.5',\n                track: 'w-2 h-full',\n                range: 'w-full bottom-0',\n            },\n        },\n        disabled: {\n            true: {root: 'opacity-50 pointer-events-none'},\n        },\n    },\n    defaultVariants: {\n        orientation: 'horizontal',\n    },\n});\n\nexport type SliderRecipeProps = VariantProps<typeof sliderRecipe>;\n\nexport interface SliderProps {\n    /** Additional CSS classes for the root element. */\n    class?: string;\n    /** Minimum value of the slider range. */\n    min?: number;\n    /** Maximum value of the slider range. */\n    max?: number;\n    /** Step interval between selectable values. */\n    step?: number;\n    /** Current value. Bindable. */\n    value?: number;\n    /** Prevents all interaction and dims the control. */\n    disabled?: boolean;\n    /**\n     * Layout orientation of the slider track and thumb.\n     * When 'vertical', the parent must have an explicit height.\n     */\n    orientation?: 'horizontal' | 'vertical';\n    /** Fires continuously as the thumb moves during drag. */\n    onchange?: (value: number) => void;\n    /**\n     * Fires once when the user finishes dragging and releases the thumb.\n     * Prefer this over `onchange` when the handler triggers expensive work.\n     */\n    onValueCommit?: (value: number) => void;\n    /** Bindable reference to the root span element. */\n    ref?: HTMLElement | null;\n}\n"
+    },
+    {
+      "path": "src/lib/components/slider/Slider.svelte",
+      "target": "Slider.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\n    import {Slider as SliderPrimitive} from 'bits-ui';\n    import {type SliderProps, sliderRecipe} from './Slider.recipe';\n\n    let {\n        min = 0,\n        max = 100,\n        step = 1,\n        value = $bindable(0),\n        onchange,\n        onValueCommit,\n        disabled,\n        orientation = 'horizontal',\n        class: className = '',\n    }: SliderProps = $props();\n\n    const r = $derived(sliderRecipe({orientation, disabled}));\n</script>\n\n<SliderPrimitive.Root\n    type=\"single\"\n    bind:value\n    onValueChange={onchange}\n    {onValueCommit}\n    {min}\n    {max}\n    {step}\n    {disabled}\n    {orientation}\n    class={r.root({class: className})}\n>\n    {#snippet children({ thumbItems })}\n        <!-- Track wrapper -->\n        <div class={r.track()}>\n            <SliderPrimitive.Range class={r.range()} />\n        </div>\n\n        {#each thumbItems as { index } (index)}\n            <SliderPrimitive.Thumb\n                {index}\n                class={r.thumb()}\n            />\n        {/each}\n    {/snippet}\n</SliderPrimitive.Root>\n"
+    }
+  ],
+  "dependencies": [
+    "bits-ui",
+    "tailwind-variants"
+  ],
+  "peerDependencies": [
+    "svelte"
+  ],
+  "registryDependencies": [],
+  "sharedModules": {
+    "utils": false,
+    "icons": false,
+    "hooks": false
+  },
+  "exports": [
+    "Slider",
+    "sliderRecipe"
+  ]
+}

package/registry/spinner.json

@@ -0,0 +1,43 @@
+{
+  "$schema": "https://tera-system-ui/registry-item.schema.json",
+  "name": "spinner",
+  "type": "registry:component",
+  "description": "",
+  "recipe": "src/lib/components/spinner/Spinner.recipe.ts",
+  "files": [
+    {
+      "path": "src/lib/components/spinner/index.ts",
+      "target": "index.ts",
+      "type": "ts",
+      "content": "export {default as Spinner} from './Spinner.svelte'\nexport {spinnerRecipe} from './Spinner.recipe'\nexport type {SpinnerRecipeProps, SpinnerProps} from './Spinner.recipe'\n"
+    },
+    {
+      "path": "src/lib/components/spinner/Spinner.recipe.ts",
+      "target": "Spinner.recipe.ts",
+      "type": "recipe",
+      "content": "import {tv, type VariantProps} from \"tailwind-variants\";\nimport type {SVGAttributes} from \"svelte/elements\";\n\n/**\n * Spinner recipe — the canonical styled layer for the loading indicator.\n *\n * A single stylable part (the spinning `<svg>`), so this is a base-string\n * recipe. The base carries the `animate-spin` rotation; the `size` and `color`\n * variants are the typed extension surface. The spinner sizes its viewport and\n * tints its stroke through SVG presentation attributes (numeric width/height and\n * a CSS color), driven by the `sizeMap` / `colorMap` in the component — values a\n * Tailwind utility can't express on an SVG element — so the variant classes\n * themselves stay empty by design and the visual scale/tint is attribute-driven.\n *\n * Primary customization surface: an app owns its look by extending this recipe\n * with `tv({ extend: spinnerRecipe, ... })` in typed code — the rotation is\n * inherited; only the design language changes. See docs/ARCHITECTURE.md for the\n * worked example (kept out of this JSDoc so the llms doc generator doesn't grep\n * its variant tokens).\n */\nexport const spinnerRecipe = tv({\n    base: 'animate-spin',\n    variants: {\n        size: {\n            xs: '',\n            sm: '',\n            md: '',\n            lg: '',\n        },\n        color: {\n            primary: '',\n            white: '',\n            current: '',\n        },\n    },\n    defaultVariants: {\n        size: 'md',\n        color: 'primary',\n    },\n});\n\nexport type SpinnerRecipeProps = VariantProps<typeof spinnerRecipe>;\n\nexport interface SpinnerProps extends Omit<SVGAttributes<SVGSVGElement>, 'color'>, SpinnerRecipeProps {\n    class?: string;\n}\n"
+    },
+    {
+      "path": "src/lib/components/spinner/Spinner.svelte",
+      "target": "Spinner.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\n    import {spinnerRecipe, type SpinnerProps} from './Spinner.recipe';\n\n    type SpinnerSize = NonNullable<SpinnerProps['size']>;\n    type SpinnerColor = NonNullable<SpinnerProps['color']>;\n\n    let {\n        size = 'md',\n        color = 'primary',\n        class: className = '',\n    }: SpinnerProps = $props();\n\n    const sizeMap: Record<SpinnerSize, number> = { xs: 12, sm: 16, md: 20, lg: 28 };\n    const colorMap: Record<SpinnerColor, string> = {\n        primary: 'var(--color-interactive)',\n        white:   '#ffffff',\n        current: 'currentColor',\n    };\n\n    const px = $derived(sizeMap[size]);\n    const stroke = $derived(colorMap[color]);\n    const r = 8;\n    const circumference = 2 * Math.PI * r;\n</script>\n\n<svg\n    class={spinnerRecipe({size, color, class: className})}\n    width={px}\n    height={px}\n    viewBox=\"0 0 20 20\"\n    fill=\"none\"\n    aria-label=\"Loading\"\n    role=\"status\"\n>\n    <circle\n        cx=\"10\" cy=\"10\" r={r}\n        stroke={stroke}\n        stroke-width=\"2\"\n        stroke-opacity=\"0.25\"\n    />\n    <circle\n        cx=\"10\" cy=\"10\" r={r}\n        stroke={stroke}\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-dasharray={circumference}\n        stroke-dashoffset={circumference * 0.75}\n        transform=\"rotate(-90 10 10)\"\n    />\n</svg>\n"
+    }
+  ],
+  "dependencies": [
+    "tailwind-variants"
+  ],
+  "peerDependencies": [
+    "svelte"
+  ],
+  "registryDependencies": [],
+  "sharedModules": {
+    "utils": false,
+    "icons": false,
+    "hooks": false
+  },
+  "exports": [
+    "Spinner",
+    "spinnerRecipe"
+  ]
+}

package/registry/star-rating.json

@@ -0,0 +1,43 @@
+{
+  "$schema": "https://tera-system-ui/registry-item.schema.json",
+  "name": "star-rating",
+  "type": "registry:component",
+  "description": "Interactive 1–5 star rating.",
+  "recipe": "src/lib/components/star-rating/StarRating.recipe.ts",
+  "files": [
+    {
+      "path": "src/lib/components/star-rating/index.ts",
+      "target": "index.ts",
+      "type": "ts",
+      "content": "export {default as StarRating} from './StarRating.svelte'\nexport {starRatingRecipe} from './StarRating.recipe'\nexport type {StarRatingProps, StarRatingRecipeProps} from './StarRating.recipe'\n"
+    },
+    {
+      "path": "src/lib/components/star-rating/StarRating.recipe.ts",
+      "target": "StarRating.recipe.ts",
+      "type": "recipe",
+      "content": "import {tv, type VariantProps} from \"tailwind-variants\";\nimport type {Snippet} from \"svelte\";\nimport type {HTMLAttributes} from \"svelte/elements\";\n\n/**\n * StarRating recipe — the canonical styled layer for the interactive 1–5 star\n * control. A single stylable part (each star button), so this is a base-string\n * recipe; the `size` variant scales the hit target and glyph.\n *\n * Primary customization surface: an app owns its look by extending this recipe\n * with `tv({ extend: starRatingRecipe, ... })` in typed code — base sizing is\n * inherited; only the design language changes. See docs/ARCHITECTURE.md for the\n * worked example (kept out of this JSDoc so the llms doc generator doesn't grep\n * its variant tokens).\n *\n * The filled/empty star glyph is a structural seam (`starIcon` snippet prop on\n * the component) so rung-3 owners can swap the icon without forking markup.\n */\nexport const starRatingRecipe = tv({\n    base: '',\n    variants: {\n        size: {\n            sm: 'size-6 p-1',\n            md: 'size-8 p-1',\n            lg: 'size-10 p-1'\n        }\n    },\n    compoundVariants: [\n\n    ],\n    defaultVariants: {\n        size: 'md'\n    },\n});\n\nexport type StarRatingRecipeProps = VariantProps<typeof starRatingRecipe>;\n\nexport interface StarRatingProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onchange'>, StarRatingRecipeProps {\n    children?: Snippet;\n    /** Replace the default star glyph (structural seam). `filled` reflects the active/hovered state. */\n    starIcon?: Snippet<[{ filled: boolean; index: number }]>;\n    class?: string;\n    value?: number;\n    onchange?: (value: number) => void;\n    ref?: HTMLDivElement | null;\n}\n"
+    },
+    {
+      "path": "src/lib/components/star-rating/StarRating.svelte",
+      "target": "StarRating.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\n    import {type StarRatingProps, starRatingRecipe} from \"./StarRating.recipe\";\n\n    let {\n        children,\n        value = $bindable(),\n        onchange,\n        size = 'md',\n        starIcon,\n        ...props\n    }: StarRatingProps = $props();\n\n    let hoverRating = $state(0);\n\n    // Descriptive texts for each star rating\n    const descriptions = [\n        'Very Bad',\n        'Bad',\n        'Okay',\n        'Good',\n        'Excellent'\n    ];\n\n    // Sets the rating when a star is clicked\n    function setRating(v, e) {\n        if (value != v) {\n            value = v;\n        } else {\n            value = undefined\n        }\n\n        onchange?.(v)\n        // console.log('setRating', e.type)\n\n    }\n\n    // Updates hover state when hovering over a star\n    function setHover(v, e) {\n        hoverRating = v;\n        // console.log('setHover', v, e.type)\n    }\n\n    // Resets hover state when leaving the star area\n    function resetHover(e) {\n\n        hoverRating = 0;\n        // console.log('resetHover', e.type)\n    }\n\n</script>\n\n<div\n        tabindex=\"0\"\n        role=\"radiogroup\"\n        class=\"star-rating-container inline-flex items-center\">\n    {#each Array(5) as _, index (index)}\n        <button role=\"radio\"\n                tabindex=\"0\"\n                aria-checked={(hoverRating || value) > index}\n                aria-posinset={index + 1}\n                aria-setsize=\"5\"\n                data-rating-icon\n                data-hovering={hoverRating === (index + 1)}\n                aria-label={`Rate ${index + 1} out of 5 stars`}\n                onpointerenter={(e) => setHover(index + 1, e)}\n                onpointerleave={resetHover}\n                ontouchendcapture={resetHover}\n                onclick={(e) => setRating(index + 1, e)}\n                class={starRatingRecipe({size})}>\n            {#if starIcon}\n                {@render starIcon({ filled: (hoverRating || (value ?? 0)) > index, index })}\n            {:else}\n                <svg\n                        viewBox=\"64 64 896 896\" focusable=\"true\" data-icon=\"star\" width=\"1em\" height=\"1em\"\n                        fill=\"currentColor\"\n                        class=\"h-full w-full fill-inherit\"\n                        aria-hidden=\"true\">\n                    <path d=\"M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z\"></path>\n                </svg>\n            {/if}\n        </button>\n    {/each}\n</div>\n\n\n<style lang=\"scss\">\n    [data-rating-icon] {\n        &:first-child {\n            padding-left: 0;\n        }\n\n        &:last-child {\n            padding-right: 0;\n        }\n\n        fill: var(--color-neutral-token-5);\n        transition: all var(--duration-element-react);\n\n        &[aria-checked=\"true\"] {\n            fill: var(--color-yellow-400);\n        }\n\n        &[data-hovering=\"true\"] {\n            transform: scale(1.1);\n        }\n    }\n\n</style>\n"
+    }
+  ],
+  "dependencies": [
+    "tailwind-variants"
+  ],
+  "peerDependencies": [
+    "svelte"
+  ],
+  "registryDependencies": [],
+  "sharedModules": {
+    "utils": false,
+    "icons": false,
+    "hooks": false
+  },
+  "exports": [
+    "StarRating",
+    "starRatingRecipe"
+  ]
+}

package/registry/switch.json

@@ -0,0 +1,44 @@
+{
+  "$schema": "https://tera-system-ui/registry-item.schema.json",
+  "name": "switch",
+  "type": "registry:component",
+  "description": "Toggle switch for boolean state.",
+  "recipe": "src/lib/components/switch/Switch.recipe.ts",
+  "files": [
+    {
+      "path": "src/lib/components/switch/index.ts",
+      "target": "index.ts",
+      "type": "ts",
+      "content": "export {default as Switch} from './Switch.svelte'\nexport {switchRecipe} from './Switch.recipe'\nexport type {SwitchProps, SwitchRecipeProps} from './Switch.recipe'\n"
+    },
+    {
+      "path": "src/lib/components/switch/Switch.recipe.ts",
+      "target": "Switch.recipe.ts",
+      "type": "recipe",
+      "content": "import {tv, type VariantProps} from \"tailwind-variants\";\nimport type {Snippet} from \"svelte\";\n\n/**\n * Switch recipe — the canonical styled layer for the toggle switch.\n *\n * Built on the bits-ui Switch primitive: a pill `root` track holding two\n * decorative state indicators (a line for on, a ring for off) and a sliding\n * `thumb`. Each part is a slot, so an app can restyle one part without forking\n * the markup. The primary customization surface is `tv({ extend: switchRecipe })`\n * in typed code; see docs/ARCHITECTURE.md for the worked example (kept out of\n * this JSDoc so the llms doc generator doesn't grep its tokens).\n *\n * Restyle-internals: the per-component CSS var --tera-switch-radius lets a\n * theme/app retune the track + thumb corner radius (e.g. a squared-off switch)\n * with no code change; it defaults to a full pill in tera-ui-base.css.\n */\nexport const switchRecipe = tv({\n    slots: {\n        root: [\n            \"relative group peer h-6 w-[46px] shrink-0 cursor-pointer items-center rounded-[var(--tera-switch-radius,9999px)] transition-[background-color,border-color,box-shadow] ease-ui duration-[var(--tera-duration-base)]\",\n            \"focus-visible:outline-none focus-visible:shadow-focus\",\n            \"border border-border-strong\",\n            \"shadow-[inset_0_1px_3px_rgba(15,23,42,0.18)]\",\n            \"data-[state=checked]:bg-interactive data-[state=checked]:border-interactive\",\n            \"data-[state=checked]:shadow-[inset_0_1px_2px_rgba(15,23,42,0.28)]\",\n            \"data-[state=unchecked]:bg-surface-sunken hover:data-[state=unchecked]:border-border-strong hover:data-[state=unchecked]:bg-neutral-token-3\",\n            \"disabled:cursor-not-allowed disabled:opacity-50\",\n            \"overflow-hidden\",\n        ],\n        lineIndicator: \"h-[11px] w-[2px] rounded-full bg-interactive-on absolute top-[6px] left-[10px] transition-all ease-ui duration-[var(--tera-duration-base)] group-data-[state=unchecked]:opacity-0 group-data-[state=checked]:opacity-100\",\n        dotIndicator: \"size-[7px] border-[1.5px] border-border-strong absolute top-[7px] right-[10px] rounded-full transition-all ease-ui duration-[var(--tera-duration-base)] group-data-[state=unchecked]:opacity-100 group-data-[state=checked]:opacity-0\",\n        thumb: [\n            \"pointer-events-none block size-5 rounded-[var(--tera-switch-radius,9999px)] bg-surface-raised transition-transform ease-spring duration-[var(--tera-duration-base)]\",\n            \"shadow-[0_1px_2px_rgba(15,23,42,0.4),inset_0_1px_0_rgba(255,255,255,0.6)]\",\n            \"group-active:scale-90\",\n            \"data-[state=checked]:translate-x-[24px] data-[state=unchecked]:translate-x-[2px]\",\n        ],\n    },\n});\n\nexport type SwitchRecipeProps = VariantProps<typeof switchRecipe>;\n\nexport interface SwitchProps extends SwitchRecipeProps {\n    /** Additional CSS classes for the root element. */\n    class?: string;\n    /** Whether the switch is on. Bindable. */\n    checked?: boolean;\n    /** Prevents all interaction and dims the control. */\n    disabled?: boolean;\n    /** Whether the switch is required for form submission. */\n    required?: boolean;\n    /** Name attribute used when submitting within a form. */\n    name?: string;\n    /** Value sent with the form when the switch is checked. */\n    value?: string;\n    /** Called when the checked state changes. */\n    onCheckedChange?: (checked: boolean) => void;\n    /** Replace the default thumb markup (structural seam). */\n    thumb?: Snippet;\n    /** Bindable reference to the root button element. */\n    ref?: HTMLButtonElement | null;\n    [key: string]: unknown;\n}\n"
+    },
+    {
+      "path": "src/lib/components/switch/Switch.svelte",
+      "target": "Switch.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\n\n    import {Switch as SwitchPrimitive} from \"bits-ui\";\n    import {type SwitchProps, switchRecipe} from './Switch.recipe';\n\n    let {\n        ref = $bindable(null),\n        class: className,\n        checked = $bindable(false),\n        disabled,\n        required,\n        name,\n        value,\n        onCheckedChange,\n        thumb,\n        ...restProps\n    }: SwitchProps = $props();\n\n    const r = switchRecipe();\n\n</script>\n\n<SwitchPrimitive.Root\n        {...restProps}\n        bind:checked\n        bind:ref\n        {disabled}\n        {required}\n        {name}\n        {value}\n        {onCheckedChange}\n        class={r.root({ class: className })}\n>\n    <!-- Internal line indicator (like Ant Design) -->\n    <div class={r.lineIndicator()}></div>\n    <div class={r.dotIndicator()}></div>\n\n    {#if thumb}\n        {@render thumb()}\n    {:else}\n        <SwitchPrimitive.Thumb class={r.thumb()} />\n    {/if}\n</SwitchPrimitive.Root>\n\n"
+    }
+  ],
+  "dependencies": [
+    "bits-ui",
+    "tailwind-variants"
+  ],
+  "peerDependencies": [
+    "svelte"
+  ],
+  "registryDependencies": [],
+  "sharedModules": {
+    "utils": false,
+    "icons": false,
+    "hooks": false
+  },
+  "exports": [
+    "Switch",
+    "switchRecipe"
+  ]
+}

package/registry/table.json

@@ -0,0 +1,45 @@
+{
+  "$schema": "https://tera-system-ui/registry-item.schema.json",
+  "name": "table",
+  "type": "registry:component",
+  "description": "Data table with striped rows and loading skeleton.",
+  "recipe": "src/lib/components/table/Table.recipe.ts",
+  "files": [
+    {
+      "path": "src/lib/components/table/index.ts",
+      "target": "index.ts",
+      "type": "ts",
+      "content": "export {default as Table} from './Table.svelte'\nexport {tableRecipe} from './Table.recipe'\nexport type {TableProps, TableColumn, TableRecipeProps} from './Table.recipe'\n"
+    },
+    {
+      "path": "src/lib/components/table/Table.recipe.ts",
+      "target": "Table.recipe.ts",
+      "type": "recipe",
+      "content": "import {tv, type VariantProps} from \"tailwind-variants\";\nimport type {Snippet} from \"svelte\";\n\n/**\n * Table recipe — the canonical styled layer for the base design language.\n *\n * Custom multi-part component (no bits-ui): the recipe is slotted by role —\n * root / table / thead / headerCell / row / cell / loadingCell / empty — so an\n * app can restyle any part independently. The striped zebra background and the\n * sticky header are toggled through slot-scoped variants; the per-row stripe and\n * clickable affordance are driven by booleans computed in markup.\n *\n * Primary customization surface: extend with `tv({ extend: tableRecipe, ... })`\n * in typed code. Lighter rung: the per-component CSS var (--tera-table-radius)\n * lets a theme retune the wrapper corner radius with no code change; it defaults\n * to a global axis token via the inline fallback. See docs/ARCHITECTURE.md for\n * worked examples (kept out of this JSDoc so the llms doc generator doesn't grep\n * its tokens).\n */\nexport const tableRecipe = tv({\n    slots: {\n        root: 'w-full overflow-auto rounded-[var(--tera-table-radius,var(--border-radius-container))] border border-border-default',\n        table: 'w-full text-sm text-left border-collapse',\n        thead: 'bg-surface-sunken',\n        headerCell: 'px-4 py-2.5 text-xs font-semibold uppercase tracking-wide text-text-tertiary whitespace-nowrap border-b border-border-default',\n        row: 'border-b border-border-default last:border-0 transition-colors ease-ui duration-[var(--tera-duration-micro)] hover:bg-surface-hover',\n        cell: 'px-4 py-3 text-text-primary',\n        loadingCell: 'px-4 py-3 border-b border-border-default',\n        empty: 'px-4 py-10 text-center text-text-tertiary',\n    },\n    variants: {\n        stickyHeader: {\n            true: {thead: 'sticky top-0 z-10'},\n        },\n        stripedRow: {\n            true: {row: 'bg-surface-sunken'},\n            false: {row: 'bg-transparent'},\n        },\n        clickable: {\n            true: {row: 'cursor-pointer'},\n        },\n    },\n    defaultVariants: {\n        stripedRow: false,\n    },\n});\n\nexport type TableRecipeProps = VariantProps<typeof tableRecipe>;\n\nexport interface TableColumn<R = Record<string, unknown>> {\n    /** Unique key — used for the column id and to read the cell value from the row. */\n    key: string;\n    /** Column heading text. */\n    label: string;\n    /** Optional fixed width (any CSS length), applied to the header cell. */\n    width?: string;\n    /** Horizontal alignment for the header and body cells. */\n    align?: 'left' | 'center' | 'right';\n    /** Custom cell renderer — receives the row; overrides the default value read. */\n    render?: Snippet<[R]>;\n}\n\nexport interface TableProps<T extends Record<string, unknown> = Record<string, unknown>> {\n    /** Column definitions in display order. */\n    columns: TableColumn<T>[];\n    /** Row data. */\n    data: T[];\n    /** Show skeleton placeholder rows instead of data. */\n    loading?: boolean;\n    /** Custom content rendered when there are no rows. Defaults to \"No data\". */\n    empty?: Snippet;\n    /** Zebra-stripe alternating rows. */\n    striped?: boolean;\n    /** Keep the header visible while the body scrolls. */\n    stickyHeader?: boolean;\n    /** Called when a row is clicked — also adds a pointer affordance. */\n    onRowClick?: (row: T) => void;\n    /** Additional CSS classes for the scroll wrapper. */\n    class?: string;\n}\n"
+    },
+    {
+      "path": "src/lib/components/table/Table.svelte",
+      "target": "Table.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\" generics=\"T extends Record<string, unknown>\">\n    import {Skeleton} from '$lib/components/skeleton/index.js';\n    import {tableRecipe, type TableProps} from './Table.recipe';\n\n    let {\n        columns,\n        data,\n        loading,\n        empty,\n        striped,\n        stickyHeader,\n        onRowClick,\n        class: className = '',\n    }: TableProps<T> = $props();\n\n    const r = $derived(tableRecipe({stickyHeader, clickable: !!onRowClick}));\n</script>\n\n<div class={r.root({class: className})}>\n    <table class={r.table()}>\n        <thead class={r.thead()}>\n            <tr>\n                {#each columns as col (col.key)}\n                    <th\n                        class={r.headerCell()}\n                        style={col.width ? `width:${col.width}` : ''}\n                        class:text-center={col.align === 'center'}\n                        class:text-right={col.align === 'right'}\n                    >\n                        {col.label}\n                    </th>\n                {/each}\n            </tr>\n        </thead>\n        <tbody>\n            {#if loading}\n                {#each Array(4) as _, i (i)}\n                    <tr>\n                        {#each columns as col (col.key)}\n                            <td class={r.loadingCell()}>\n                                <Skeleton variant=\"line\" />\n                            </td>\n                        {/each}\n                    </tr>\n                {/each}\n            {:else if data.length === 0}\n                <tr>\n                    <td colspan={columns.length} class={r.empty()}>\n                        {#if empty}\n                            {@render empty()}\n                        {:else}\n                            No data\n                        {/if}\n                    </td>\n                </tr>\n            {:else}\n                {#each data as row, i (i)}\n                    <tr\n                        class={tableRecipe({clickable: !!onRowClick, stripedRow: !!striped && i % 2 === 1}).row()}\n                        onclick={() => onRowClick?.(row)}\n                    >\n                        {#each columns as col (col.key)}\n                            <td\n                                class={r.cell()}\n                                class:text-center={col.align === 'center'}\n                                class:text-right={col.align === 'right'}\n                            >\n                                {#if col.render}\n                                    {@render col.render(row)}\n                                {:else}\n                                    {row[col.key] ?? ''}\n                                {/if}\n                            </td>\n                        {/each}\n                    </tr>\n                {/each}\n            {/if}\n        </tbody>\n    </table>\n</div>\n"
+    }
+  ],
+  "dependencies": [
+    "tailwind-variants"
+  ],
+  "peerDependencies": [
+    "svelte"
+  ],
+  "registryDependencies": [
+    "skeleton"
+  ],
+  "sharedModules": {
+    "utils": false,
+    "icons": false,
+    "hooks": false
+  },
+  "exports": [
+    "Table",
+    "tableRecipe"
+  ]
+}