tera-system-ui 0.1.76 → 0.2.2

package/registry/date-range-picker.json

@@ -0,0 +1,48 @@
+{
+  "$schema": "https://tera-system-ui/registry-item.schema.json",
+  "name": "date-range-picker",
+  "type": "registry:component",
+  "description": "",
+  "recipe": "src/lib/components/date-range-picker/DateRangePicker.recipe.ts",
+  "files": [
+    {
+      "path": "src/lib/components/date-range-picker/DateRangePicker.recipe.ts",
+      "target": "DateRangePicker.recipe.ts",
+      "type": "recipe",
+      "content": "import {tv, type VariantProps} from \"tailwind-variants\";\nimport type {Snippet} from \"svelte\";\nimport type {CalendarDate} from \"@internationalized/date\";\n\n/**\n * DateRangePicker recipe — the canonical styled layer for the base design language.\n *\n * Composite component (built on bits-ui RangeCalendar + Popover + DateRangeField,\n * with the mobile branch wrapped in the Tera Dialog). The recipe is slotted by\n * role so an app can restyle any region independently:\n *   trigger / field / segment / iconBtn — the input row;\n *   panel — the popover surface;\n *   navBtn / monthLabel / weekday / cell / day — the calendar grid;\n *   presetSidebar / presetHeading / presetItem / presetPill — quick-select;\n *   timeBar / timeLabel / timeArrow / timeInput — the optional time pickers;\n *   footer / footerReset / footerApply — the action row;\n *   dialogHeader / dialogTitle / pillBar — the mobile sheet chrome.\n *\n * The hardcoded glyphs are exposed as snippet seams on the component\n * (calendarIcon / clearIcon / prevIcon / nextIcon / closeIcon).\n *\n * Primary customization surface: extend with `tv({ extend: dateRangePickerRecipe,\n * ... })` in typed code. Lighter rung: the per-component CSS vars\n * (--tera-date-range-picker-radius on the trigger, --tera-date-range-picker-panel-radius\n * on the panel) let a theme retune corner radius with no code change; they default\n * to global axis tokens via inline fallbacks. See docs/ARCHITECTURE.md for worked\n * examples (kept out of this JSDoc so the llms doc generator doesn't grep its tokens).\n */\nexport const dateRangePickerRecipe = tv({\n    slots: {\n        // ── Trigger (input row) ───────────────────────────────────────────\n        trigger: `inline-flex items-center gap-2 h-[var(--tera-control-height-md)] px-[var(--tera-control-px-md)] rounded-[var(--tera-date-range-picker-radius,var(--tera-radius-base))] text-sm w-full\n                border border-border-default bg-surface-control\n                focus-within:border-interactive-hover focus-within:shadow-focus\n                data-[state=open]:border-interactive-hover data-[state=open]:shadow-focus\n                transition-[border-color,box-shadow] ease-ui duration-[var(--tera-duration-fast)]\n                cursor-text`,\n        field: 'drp-field flex items-center gap-0.5 min-w-0 flex-1',\n        segment: `inline-block rounded-sm px-0.5 text-sm tabular-nums caret-transparent select-none outline-none\n                text-text-primary\n                data-[placeholder]:text-text-tertiary\n                focus:bg-interactive-subtle focus:text-interactive-text`,\n        iconBtn: `inline-flex items-center justify-center size-6 rounded shrink-0 cursor-pointer\n                text-text-tertiary hover:bg-surface-hover hover:text-text-primary\n                transition-colors ease-ui duration-[var(--tera-duration-micro)]`,\n\n        // ── Panel (popover surface) ───────────────────────────────────────\n        panel: `z-50 overflow-hidden bg-surface rounded-[var(--tera-date-range-picker-panel-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        // ── Calendar grid ─────────────────────────────────────────────────\n        navBtn: `inline-flex items-center justify-center size-7 rounded-md text-text-tertiary\n                hover:bg-surface-hover hover:text-text-primary\n                transition-colors ease-ui duration-[var(--tera-duration-micro)]\n                disabled:opacity-30 disabled:pointer-events-none`,\n        monthLabel: 'text-sm font-medium text-text-primary whitespace-nowrap',\n        weekday: 'w-9 h-8 text-xs font-medium text-text-tertiary flex items-center justify-center',\n        cell: 'relative size-9 p-0 text-center',\n        day: `inline-flex items-center justify-center size-full rounded-md text-sm cursor-pointer select-none\n                transition-colors ease-ui duration-[var(--tera-duration-micro)]\n                hover:bg-surface-hover text-text-primary\n                data-[outside-month]:opacity-0 data-[outside-month]:pointer-events-none\n                data-[today]:ring-1 data-[today]:ring-inset data-[today]:ring-border-default\n                data-[selected]:bg-primary-600 data-[selected]:text-white data-[selected]:hover:bg-primary-500 data-[selected]:ring-0\n                data-[range-middle]:bg-interactive-subtle data-[range-middle]:text-interactive-text data-[range-middle]:rounded-none data-[range-middle]:hover:bg-interactive-border\n                data-[range-start]:rounded-r-none\n                data-[range-end]:rounded-l-none\n                data-[disabled]:opacity-30 data-[disabled]:pointer-events-none\n                data-[unavailable]:opacity-30 data-[unavailable]:pointer-events-none`,\n\n        // ── Quick-select presets ──────────────────────────────────────────\n        presetSidebar: 'border-r border-border-default p-2 flex flex-col gap-0.5 w-36 shrink-0',\n        presetHeading: 'px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-text-tertiary',\n        presetItem: `w-full text-left px-2 py-1.5 rounded text-sm cursor-pointer\n                transition-colors ease-ui duration-[var(--tera-duration-micro)]`,\n        presetPill: `shrink-0 px-2.5 py-1 rounded-full text-xs border cursor-pointer whitespace-nowrap\n                transition-colors ease-ui duration-[var(--tera-duration-micro)]`,\n\n        // ── Time pickers ──────────────────────────────────────────────────\n        timeBar: 'border-t border-border-default px-4 py-3 flex items-center gap-2',\n        timeLabelStart: 'text-xs font-medium text-text-tertiary w-9 shrink-0',\n        timeLabelEnd: 'text-xs font-medium text-text-tertiary w-6 shrink-0',\n        timeArrow: 'text-text-tertiary mx-1 shrink-0',\n        timeInput: `h-7 px-2 text-sm text-text-primary border border-border-default rounded-md bg-surface-control\n                focus:border-interactive-hover focus:shadow-focus outline-none\n                transition-[border-color,box-shadow] ease-ui duration-[var(--tera-duration-fast)]`,\n\n        // ── Footer (action row) ───────────────────────────────────────────\n        footer: 'border-t border-border-default px-4 py-3 flex items-center justify-between gap-3',\n        footerReset: `inline-flex items-center h-8 px-3 text-sm rounded-md cursor-pointer shadow-xs\n                border border-border-default bg-surface-control text-text-primary\n                hover:bg-surface-raised hover:border-border-strong active:bg-surface-sunken\n                transition-[background-color,border-color,color] ease-ui duration-[var(--tera-duration-fast)]`,\n        footerApply: `inline-flex items-center h-8 px-4 text-sm rounded-md cursor-pointer\n                bg-primary-600 text-white border border-primary-600\n                hover:bg-primary-500 hover:border-primary-500\n                disabled:opacity-40 disabled:cursor-not-allowed disabled:pointer-events-none\n                transition-[background-color,border-color,opacity] ease-ui duration-[var(--tera-duration-fast)]`,\n\n        // ── Mobile sheet chrome ───────────────────────────────────────────\n        dialogHeader: 'flex items-center justify-between px-4 py-3 border-b border-border-default shrink-0',\n        dialogTitle: 'text-sm font-semibold text-text-primary',\n        pillBar: 'flex gap-1.5 px-3 py-2.5 overflow-x-auto border-b border-border-default shrink-0',\n    },\n    variants: {\n        // Toggles the active highlight on a quick-select sidebar entry.\n        presetActive: {\n            true: {presetItem: 'bg-interactive/10 text-interactive font-medium'},\n            false: {presetItem: 'text-text-primary hover:bg-surface-hover'},\n        },\n        // Toggles the active highlight on a mobile quick-select pill.\n        pillActive: {\n            true: {presetPill: 'bg-interactive/10 text-interactive border-interactive font-medium'},\n            false: {presetPill: 'border-border-default text-text-secondary hover:border-interactive hover:text-interactive'},\n        },\n        // Disabled state on the trigger row.\n        disabled: {\n            true: {trigger: 'opacity-50 pointer-events-none'},\n        },\n    },\n});\n\nexport type DateRangePickerRecipeProps = VariantProps<typeof dateRangePickerRecipe>;\n\n/**\n * @component DateRangePicker - Date range picker with quick-select presets, optional time support, and popover/drawer UI.\n * Built on BitsUI RangeCalendar and Popover primitives.\n */\nexport interface DateRangePickerProps {\n    /** The currently selected date range as a two-element array [start, end]. Bindable. */\n    dateRange?: Date[];\n    /** Called when the user applies a new date range. */\n    onchange?: (date: Date[]) => void;\n    /** When true, shows hour and minute pickers alongside the calendar. */\n    enableTime?: boolean;\n    /** Placeholder text shown in the trigger when no range is selected. */\n    placeholder?: string;\n    /** Prevents all interaction. */\n    disabled?: boolean;\n    /** Additional CSS classes for the trigger button. */\n    class?: string;\n    /**\n     * Earliest selectable date.\n     * Use `import { CalendarDate } from '@internationalized/date'` to construct values.\n     */\n    minValue?: CalendarDate;\n    /**\n     * Latest selectable date.\n     * Use `import { CalendarDate } from '@internationalized/date'` to construct values.\n     */\n    maxValue?: CalendarDate;\n    /** Returns true for dates that should be shown as disabled and unselectable. */\n    isDateDisabled?: (date: CalendarDate) => boolean;\n    /** Number of calendar months shown side-by-side (desktop only). Defaults to 2. */\n    numberOfMonths?: 1 | 2;\n    /**\n     * Day of the week the calendar grid starts on.\n     * 0 = Sunday, 1 = Monday, … 6 = Saturday.\n     */\n    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n    /** Replace the calendar (trigger) icon with custom markup (structural seam). */\n    calendarIcon?: Snippet;\n    /** Replace the clear (×) icon with custom markup (structural seam). */\n    clearIcon?: Snippet;\n    /** Replace the previous-month chevron with custom markup (structural seam). */\n    prevIcon?: Snippet;\n    /** Replace the next-month chevron with custom markup (structural seam). */\n    nextIcon?: Snippet;\n    /** Replace the mobile dialog close (×) icon with custom markup (structural seam). */\n    closeIcon?: Snippet;\n}\n"
+    },
+    {
+      "path": "src/lib/components/date-range-picker/DateRangePicker.svelte",
+      "target": "DateRangePicker.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\n    import type {DateRange} from 'bits-ui';\n    import {DateRangeField, Popover as PopoverPrimitive, RangeCalendar as CalendarPrimitive} from 'bits-ui';\n    import {CalendarDate} from '@internationalized/date';\n    import IconCalendar from \"@tabler/icons-svelte/icons/calendar\";\n    import IconChevronLeft from \"@tabler/icons-svelte/icons/chevron-left\";\n    import IconChevronRight from \"@tabler/icons-svelte/icons/chevron-right\";\n    import {IconX} from '$lib/internal/icons';\n    import {cn} from '$lib/utils/utils.js';\n    import {untrack} from 'svelte';\n    import {innerWidth} from 'svelte/reactivity/window';\n    import {Dialog} from '$lib/components/dialog/index.js';\n    import {dateRangePickerRecipe, type DateRangePickerProps} from './DateRangePicker.recipe.js';\n\n    let {\n        dateRange = $bindable([]),\n        onchange,\n        enableTime = false,\n        placeholder = 'Select date range',\n        disabled = false,\n        class: className,\n        minValue,\n        maxValue,\n        isDateDisabled,\n        numberOfMonths: numberOfMonthsProp,\n        weekStartsOn,\n        calendarIcon,\n        clearIcon,\n        prevIcon,\n        nextIcon,\n        closeIcon,\n    }: DateRangePickerProps = $props();\n\n    const styles = dateRangePickerRecipe();\n\n    const isDesktop = $derived((innerWidth.current ?? 768) >= 768);\n\n    let open = $state(false);\n\n    // ── Date-field value: drives DateRangeField segments ──────────────────\n    function toCalendarDate(date: Date): CalendarDate {\n        return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate());\n    }\n\n    function fromCalendarDate(date: CalendarDate, timeStr: string): Date {\n        const [h, m] = timeStr.split(':').map(Number);\n        return new Date(date.year, date.month - 1, date.day, h, m);\n    }\n\n    const [initD0, initD1] = dateRange;\n    let fieldValue = $state<DateRange>({\n        start: initD0 ? toCalendarDate(initD0) : undefined,\n        end: initD1 ? toCalendarDate(initD1) : undefined,\n    });\n\n    // ── Pending: temporary calendar state while picker is open ────────────\n    let pendingRange = $state<DateRange>({start: undefined, end: undefined});\n    let startTime = $state('00:00');\n    let endTime = $state('23:59');\n    // Derived: highlight whichever quick-select preset matches the current\n    // pendingRange (works for manual picks, quick-select clicks, and pre-set values).\n    const activeQuickSelect = $derived.by((): string | null => {\n        if (!pendingRange.start || !pendingRange.end) return null;\n        const ps = pendingRange.start as CalendarDate;\n        const pe = pendingRange.end as CalendarDate;\n        for (const {key} of quickRanges) {\n            const {start, end} = getQuickRange(key);\n            if (ps.compare(toCalendarDate(start)) === 0 &&\n                pe.compare(toCalendarDate(end)) === 0) {\n                return key;\n            }\n        }\n        return null;\n    });\n\n    const hasRange = $derived(dateRange.length >= 2);\n    const canApply = $derived(!!pendingRange.start && !!pendingRange.end);\n\n    // ── Field direct-edit handler ─────────────────────────────────────────\n    function handleFieldChange(range: DateRange | undefined) {\n        if (!range) return;\n        fieldValue = range;\n        if (range.start && range.end) {\n            const result: Date[] = [\n                fromCalendarDate(range.start as CalendarDate, enableTime ? startTime : '00:00'),\n                fromCalendarDate(range.end as CalendarDate, enableTime ? endTime : '23:59'),\n            ];\n            dateRange = result;\n            onchange?.(result);\n        } else if (!range.start && !range.end && dateRange.length > 0) {\n            dateRange = [];\n            onchange?.([]);\n        }\n    }\n\n    // ── Picker open: copy fieldValue → pendingRange ───────────────────────\n    function initPendingState() {\n        pendingRange = {start: fieldValue.start, end: fieldValue.end};\n        const [d0, d1] = dateRange;\n        if (enableTime && d0 && d1) {\n            const sh = d0.getHours(), sm = d0.getMinutes();\n            const eh = d1.getHours(), em = d1.getMinutes();\n            startTime = `${String(sh).padStart(2, '0')}:${String(sm).padStart(2, '0')}`;\n            endTime = `${String(eh).padStart(2, '0')}:${String(em).padStart(2, '0')}`;\n        } else {\n            startTime = '00:00';\n            endTime = '23:59';\n        }\n    }\n\n    $effect(() => {\n        if (open) untrack(initPendingState);\n    });\n\n    // ── Apply / Reset ─────────────────────────────────────────────────────\n    function applyRange() {\n        if (!pendingRange.start || !pendingRange.end) return;\n        const start = pendingRange.start as CalendarDate;\n        const end = pendingRange.end as CalendarDate;\n        fieldValue = {start, end};\n        const result: Date[] = [\n            fromCalendarDate(start, enableTime ? startTime : '00:00'),\n            fromCalendarDate(end, enableTime ? endTime : '23:59'),\n        ];\n        dateRange = result;\n        onchange?.(result);\n        open = false;\n    }\n\n    function resetRange() {\n        fieldValue = {start: undefined, end: undefined};\n        dateRange = [];\n        onchange?.([]);\n        open = false;\n    }\n\n    // ── Quick select ──────────────────────────────────────────────────────\n    function applyQuickSelect(key: string) {\n        const {start, end} = getQuickRange(key);\n        pendingRange = {start: toCalendarDate(start), end: toCalendarDate(end)};\n    }\n\n    function getQuickRange(key: string): { start: Date; end: Date } {\n        const now = new Date();\n        const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());\n        switch (key) {\n            case 'today':\n                return {start: new Date(today), end: new Date(today)};\n            case 'yesterday': {\n                const y = new Date(today);\n                y.setDate(today.getDate() - 1);\n                return {start: y, end: new Date(y)};\n            }\n            case 'thisWeek': {\n                const dow = today.getDay();\n                const mon = new Date(today);\n                mon.setDate(today.getDate() - (dow === 0 ? 6 : dow - 1));\n                return {start: mon, end: new Date(today)};\n            }\n            case 'last7': {\n                const s = new Date(today);\n                s.setDate(today.getDate() - 6);\n                return {start: s, end: new Date(today)};\n            }\n            case 'last30': {\n                const s = new Date(today);\n                s.setDate(today.getDate() - 29);\n                return {start: s, end: new Date(today)};\n            }\n            case 'thisMonth':\n                return {\n                    start: new Date(today.getFullYear(), today.getMonth(), 1),\n                    end: new Date(today.getFullYear(), today.getMonth() + 1, 0)\n                };\n            case 'lastMonth':\n                return {\n                    start: new Date(today.getFullYear(), today.getMonth() - 1, 1),\n                    end: new Date(today.getFullYear(), today.getMonth(), 0)\n                };\n            case 'thisQuarter': {\n                const q = Math.floor(today.getMonth() / 3);\n                return {\n                    start: new Date(today.getFullYear(), q * 3, 1),\n                    end: new Date(today.getFullYear(), q * 3 + 3, 0)\n                };\n            }\n            case 'last3Months':\n                return {\n                    start: new Date(today.getFullYear(), today.getMonth() - 3, today.getDate()),\n                    end: new Date(today)\n                };\n            default:\n                return {start: new Date(today), end: new Date(today)};\n        }\n    }\n\n    const quickRanges = [\n        {key: 'today', label: 'Today'},\n        {key: 'yesterday', label: 'Yesterday'},\n        {key: 'thisWeek', label: 'This week'},\n        {key: 'last7', label: 'Last 7 days'},\n        {key: 'last30', label: 'Last 30 days'},\n        {key: 'thisMonth', label: 'This month'},\n        {key: 'lastMonth', label: 'Last month'},\n        {key: 'thisQuarter', label: 'This quarter'},\n        {key: 'last3Months', label: 'Last 3 months'},\n    ];\n\n    // ── Styles (recipe-driven) ────────────────────────────────────────────\n    const triggerStyles = $derived(styles.trigger({disabled}));\n    const iconBtnStyles = styles.iconBtn();\n    const segmentStyles = styles.segment();\n    const dayStyles = styles.day();\n    const popoverContentStyles = styles.panel();\n</script>\n\n<!-- ─── Shared snippets ──────────────────────────────────────────────────── -->\n\n{#snippet dateField()}\n    <DateRangeField.Root\n            bind:value={fieldValue}\n            onValueChange={handleFieldChange}\n            {disabled}\n            class={styles.field()}\n    >\n        <DateRangeField.Input type=\"start\" class=\"flex items-center gap-0\">\n            {#snippet children({segments})}\n                {#each segments as {part, value}, si (si)}\n                    {#if part === 'literal'}\n                        <span class=\"text-text-tertiary text-sm select-none\">{value}</span>\n                    {:else}\n                        <DateRangeField.Segment {part} class={segmentStyles}>{value}</DateRangeField.Segment>\n                    {/if}\n                {/each}\n            {/snippet}\n        </DateRangeField.Input>\n\n        <span class=\"text-text-tertiary text-sm mx-1.5 select-none shrink-0\">–</span>\n\n        <DateRangeField.Input type=\"end\" class=\"flex items-center gap-0\">\n            {#snippet children({segments})}\n                {#each segments as {part, value}, si (si)}\n                    {#if part === 'literal'}\n                        <span class=\"text-text-tertiary text-sm select-none\">{value}</span>\n                    {:else}\n                        <DateRangeField.Segment {part} class={segmentStyles}>{value}</DateRangeField.Segment>\n                    {/if}\n                {/each}\n            {/snippet}\n        </DateRangeField.Input>\n    </DateRangeField.Root>\n{/snippet}\n\n{#snippet calendarGrid(numberOfMonths: number)}\n    <CalendarPrimitive.Root\n            bind:value={pendingRange}\n            {numberOfMonths}\n            weekdayFormat=\"short\"\n            fixedWeeks\n            {minValue}\n            {maxValue}\n            isDateDisabled={isDateDisabled ? (d) => isDateDisabled(d as CalendarDate) : undefined}\n            weekStartsOn={weekStartsOn}\n    >\n        {#snippet children({months, weekdays})}\n            <div class={cn('flex justify-center', numberOfMonths > 1 && 'gap-6')}>\n                {#each months as month, i (month.value.toString())}\n                    <div class=\"flex flex-col gap-2\">\n                        <!-- Month heading -->\n                        <div class=\"flex items-center justify-between gap-2\">\n                            {#if i === 0}\n                                <CalendarPrimitive.PrevButton class={styles.navBtn()}>\n                                    {#if prevIcon}{@render prevIcon()}{:else}\n                                        <IconChevronLeft class=\"size-4\"/>\n                                    {/if}\n                                </CalendarPrimitive.PrevButton>\n                            {:else}\n                                <div class=\"size-7 shrink-0\"></div>\n                            {/if}\n\n                            <span class={styles.monthLabel()}>\n                                {new Date(month.value.year, month.value.month - 1)\n                                    .toLocaleDateString('en-US', {month: 'long', year: 'numeric'})}\n                            </span>\n\n                            {#if i === months.length - 1}\n                                <CalendarPrimitive.NextButton class={styles.navBtn()}>\n                                    {#if nextIcon}{@render nextIcon()}{:else}\n                                        <IconChevronRight class=\"size-4\"/>\n                                    {/if}\n                                </CalendarPrimitive.NextButton>\n                            {:else}\n                                <div class=\"size-7 shrink-0\"></div>\n                            {/if}\n                        </div>\n\n                        <!-- Grid -->\n                        <CalendarPrimitive.Grid class=\"w-full border-collapse\">\n                            <CalendarPrimitive.GridHead>\n                                <CalendarPrimitive.GridRow class=\"flex\">\n                                    {#each weekdays as day (day)}\n                                        <CalendarPrimitive.HeadCell class={styles.weekday()}>\n                                            {day}\n                                        </CalendarPrimitive.HeadCell>\n                                    {/each}\n                                </CalendarPrimitive.GridRow>\n                            </CalendarPrimitive.GridHead>\n                            <CalendarPrimitive.GridBody>\n                                {#each month.weeks as weekDates, wi (wi)}\n                                    <CalendarPrimitive.GridRow class=\"flex mt-0.5\">\n                                        {#each weekDates as date (date.toString())}\n                                            <CalendarPrimitive.Cell\n                                                    {date}\n                                                    month={month.value}\n                                                    class={styles.cell()}\n                                            >\n                                                <CalendarPrimitive.Day class={dayStyles}/>\n                                            </CalendarPrimitive.Cell>\n                                        {/each}\n                                    </CalendarPrimitive.GridRow>\n                                {/each}\n                            </CalendarPrimitive.GridBody>\n                        </CalendarPrimitive.Grid>\n                    </div>\n                {/each}\n            </div>\n        {/snippet}\n    </CalendarPrimitive.Root>\n{/snippet}\n\n{#snippet timePickers()}\n    <div class={styles.timeBar()}>\n        <span class={styles.timeLabelStart()}>Start</span>\n        <input\n                type=\"time\"\n                bind:value={startTime}\n                class={styles.timeInput()}\n        />\n        <span class={styles.timeArrow()}>→</span>\n        <span class={styles.timeLabelEnd()}>End</span>\n        <input\n                type=\"time\"\n                bind:value={endTime}\n                class={styles.timeInput()}\n        />\n    </div>\n{/snippet}\n\n{#snippet pickerFooter()}\n    <div class={styles.footer()}>\n        <button\n                class={styles.footerReset()}\n                onclick={resetRange}\n        >\n            Reset\n        </button>\n        <button\n                disabled={!canApply}\n                class={styles.footerApply()}\n                onclick={applyRange}\n        >\n            Apply\n        </button>\n    </div>\n{/snippet}\n\n<!-- ─── Root ─────────────────────────────────────────────────────────────── -->\n\n<div class={cn('inline-flex w-full', className)}>\n    {#if isDesktop}\n        <!-- ── DESKTOP: Popover anchored to the whole trigger container ── -->\n        <PopoverPrimitive.Root bind:open>\n            <PopoverPrimitive.Trigger class={triggerStyles}>\n                {#snippet child({props: triggerProps})}\n                    <!--\n                        Intercept clicks: only toggle the popover when clicking\n                        outside the date-field area (calendar icon, empty space).\n                    -->\n                    <div\n                            {...triggerProps}\n                            onclick={(e) => {\n                            if (!(e.target as HTMLElement).closest('.drp-field')) {\n                                (triggerProps.onclick as EventListener | undefined)?.(e);\n                            }\n                        }}\n                            class={triggerStyles}\n                    >\n                        {@render dateField()}\n\n                        <div class=\"flex items-center gap-1 shrink-0 ml-1\">\n                            {#if calendarIcon}{@render calendarIcon()}{:else}\n                                <IconCalendar class=\"size-4 text-text-tertiary pointer-events-none\"/>\n                            {/if}\n                            {#if hasRange}\n                                <button\n                                        type=\"button\"\n                                        class={iconBtnStyles}\n                                        aria-label=\"Clear date range\"\n                                        onclick={(e) => { e.stopPropagation(); resetRange(); }}\n                                >\n                                    {#if clearIcon}{@render clearIcon()}{:else}\n                                        <IconX class=\"size-3\"/>\n                                    {/if}\n                                </button>\n                            {/if}\n                        </div>\n                    </div>\n                {/snippet}\n            </PopoverPrimitive.Trigger>\n\n            <PopoverPrimitive.Portal>\n                <PopoverPrimitive.Content sideOffset={4} align=\"start\" class={popoverContentStyles}>\n                    <div class=\"flex\">\n                        <!-- Quick-select sidebar -->\n                        <div class={styles.presetSidebar()}>\n                            <p class={styles.presetHeading()}>\n                                Quick Select\n                            </p>\n                            {#each quickRanges as range (range.key)}\n                                <button\n                                        class={styles.presetItem({presetActive: activeQuickSelect === range.key})}\n                                        onclick={() => applyQuickSelect(range.key)}\n                                >\n                                    {range.label}\n                                </button>\n                            {/each}\n                        </div>\n\n                        <!-- Calendar + time + footer -->\n                        <div class=\"flex flex-col min-w-0\">\n                            <div class=\"p-4\">\n                                {@render calendarGrid(numberOfMonthsProp ?? 2)}\n                            </div>\n                            {#if enableTime}{@render timePickers()}{/if}\n                            {@render pickerFooter()}\n                        </div>\n                    </div>\n                </PopoverPrimitive.Content>\n            </PopoverPrimitive.Portal>\n        </PopoverPrimitive.Root>\n\n    {:else}\n        <!-- ── MOBILE: plain trigger → Dialog (bottom-sheet style) ─────── -->\n        <div class={triggerStyles}>\n            {@render dateField()}\n\n            <div class=\"flex items-center gap-1 shrink-0 ml-1\">\n                <button\n                        class={iconBtnStyles}\n                        aria-label=\"Open date picker\"\n                        onclick={() => (open = true)}\n                >\n                    {#if calendarIcon}{@render calendarIcon()}{:else}\n                        <IconCalendar class=\"size-4\"/>\n                    {/if}\n                </button>\n                {#if hasRange}\n                    <button class={iconBtnStyles} aria-label=\"Clear date range\" onclick={resetRange}>\n                        {#if clearIcon}{@render clearIcon()}{:else}\n                            <IconX class=\"size-3\"/>\n                        {/if}\n                    </button>\n                {/if}\n            </div>\n        </div>\n\n        <Dialog bind:open size=\"sm\" closeButton={false} padding=\"none\">\n            <div class=\"flex flex-col\">\n                <!-- Dialog header -->\n                <div class={styles.dialogHeader()}>\n                    <span class={styles.dialogTitle()}>Select Date Range</span>\n                    <button class={iconBtnStyles} aria-label=\"Close\" onclick={() => (open = false)}>\n                        {#if closeIcon}{@render closeIcon()}{:else}\n                            <IconX class=\"size-4\"/>\n                        {/if}\n                    </button>\n                </div>\n\n                <!-- Horizontal quick-select pills -->\n                <div class={styles.pillBar()}\n                     style=\"scrollbar-width:none;-ms-overflow-style:none;\">\n                    {#each quickRanges as range (range.key)}\n                        <button\n                                class={styles.presetPill({pillActive: activeQuickSelect === range.key})}\n                                onclick={() => applyQuickSelect(range.key)}\n                        >\n                            {range.label}\n                        </button>\n                    {/each}\n                </div>\n\n                <!-- Single-month calendar -->\n                <div class=\"p-4 overflow-auto\">\n                    {@render calendarGrid(1)}\n                </div>\n\n                {#if enableTime}{@render timePickers()}{/if}\n                {@render pickerFooter()}\n            </div>\n        </Dialog>\n    {/if}\n</div>\n"
+    },
+    {
+      "path": "src/lib/components/date-range-picker/index.ts",
+      "target": "index.ts",
+      "type": "ts",
+      "content": "export { default as DateRangePicker } from './DateRangePicker.svelte';\nexport { dateRangePickerRecipe } from './DateRangePicker.recipe.js';\nexport type { DateRangePickerProps, DateRangePickerRecipeProps } from './DateRangePicker.recipe.js';\n"
+    }
+  ],
+  "dependencies": [
+    "bits-ui",
+    "@tabler/icons-svelte",
+    "@internationalized/date",
+    "tailwind-variants"
+  ],
+  "peerDependencies": [
+    "svelte"
+  ],
+  "registryDependencies": [
+    "dialog"
+  ],
+  "sharedModules": {
+    "utils": true,
+    "icons": true,
+    "hooks": false
+  },
+  "exports": [
+    "DateRangePicker",
+    "dateRangePickerRecipe"
+  ]
+}

package/registry/dialog.json

@@ -0,0 +1,50 @@
+{
+  "$schema": "https://tera-system-ui/registry-item.schema.json",
+  "name": "dialog",
+  "type": "registry:component",
+  "description": "Modal dialog with header/footer slots and size variants.",
+  "recipe": "src/lib/components/dialog/Dialog.recipe.ts",
+  "files": [
+    {
+      "path": "src/lib/components/dialog/Dialog.recipe.ts",
+      "target": "Dialog.recipe.ts",
+      "type": "recipe",
+      "content": "import {tv, type VariantProps} from \"tailwind-variants\";\nimport type {Snippet} from \"svelte\";\n\n/**\n * Dialog recipe — the canonical styled layer for the base design language.\n *\n * Multi-part component (built on bits-ui Dialog): the recipe is slotted by role\n * — overlay / content / close / header / body / footer — so an app can restyle\n * any region independently. The `content` slot carries the visual variants\n * (size, position, full-screen layout); `padding` tunes the container/body\n * insets. The hardcoded close glyph is exposed as a `closeIcon` snippet seam.\n *\n * Primary customization surface: extend with `tv({ extend: dialogRecipe, ... })`\n * in typed code. Lighter rung: the per-component CSS var (--tera-dialog-radius)\n * lets a theme retune corner radius with no code change; it defaults to the\n * global container-radius token via an inline fallback. See docs/ARCHITECTURE.md\n * for worked examples (kept out of this JSDoc so the llms doc generator doesn't\n * grep its tokens).\n */\nexport const dialogRecipe = tv({\n    slots: {\n        overlay: `fixed inset-0 z-50 bg-overlay backdrop-blur-[4px]\n                animate-in fade-in duration-[var(--tera-duration-base)]\n                data-[state=closed]:animate-out data-[state=closed]:fade-out\n                data-[state=closed]:hidden`,\n        content: `fixed z-50 w-full bg-surface shadow-lg border-border-default flex flex-col overflow-hidden\n                animate-in fade-in zoom-in-95 duration-[var(--tera-duration-base)] ease-spring\n                data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95 data-[state=closed]:duration-[var(--tera-duration-base)]`,\n        close: 'absolute right-2 top-2 z-10 size-8 flex items-center justify-center rounded hover:bg-surface-hover text-text-tertiary hover:text-text-primary transition-colors',\n        container: 'grid grid-rows-[auto_1fr_auto] h-full overflow-hidden',\n        header: 'font-display font-bold px-4 mb-2',\n        body: 'overflow-auto',\n        footer: 'mt-3 px-4 flex items-center justify-end gap-2.5',\n    },\n    variants: {\n        size: {\n            xs: {content: 'max-w-[min(24rem,calc(100vw-2rem))]'},\n            sm: {content: 'max-w-[min(30rem,calc(100vw-2rem))]'},\n            md: {content: 'max-w-[min(40rem,calc(100vw-2rem))]'},\n            lg: {content: 'max-w-[min(50rem,calc(100vw-2rem))]'},\n            full: {content: 'max-w-full w-screen rounded-none'},\n            auto: {content: 'w-fit'},\n        },\n        // Position only applies on the non-full layout branch — see compoundVariants.\n        position: {\n            top: {},\n            center: {},\n        },\n        full: {\n            true: {content: 'inset-0 h-screen border-0'},\n            false: {content: 'rounded-[var(--tera-dialog-radius,var(--border-radius-container))] max-h-[min(calc(100svh-2rem),55rem)]'},\n        },\n        padding: {\n            none: {container: 'py-0', body: 'px-0'},\n            normal: {container: 'py-4', body: 'px-4'},\n        },\n    },\n    compoundVariants: [\n        // The original markup only applies positioning on the non-full path; the\n        // full-screen branch relies on `inset-0` instead.\n        {full: false, position: 'top', class: {content: 'top-4 left-1/2 -translate-x-1/2'}},\n        {full: false, position: 'center', class: {content: 'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'}},\n    ],\n    defaultVariants: {\n        size: 'sm',\n        position: 'center',\n        full: false,\n        padding: 'normal',\n    },\n});\n\nexport type DialogRecipeProps = VariantProps<typeof dialogRecipe>;\n\n/**\n * @component Dialog - Modal dialog with header/footer snippet slots, size variants, and focus management.\n * Built on BitsUI Dialog primitive.\n */\nexport type DialogProps = {\n    children?: Snippet;\n    /** Snippet rendered in the dialog header area. */\n    header?: Snippet;\n    /** Snippet rendered in the dialog footer area. */\n    footer?: Snippet;\n\n    /** Whether the dialog is open. Bindable. */\n    open?: boolean;\n    /** Additional CSS classes for the dialog content panel. */\n    class?: string;\n\n    // Layout\n    /** Controls the maximum width of the dialog panel. */\n    size?: 'xs' | 'sm' | 'md' | 'lg' | 'full' | 'auto';\n    /** Vertical alignment of the dialog on screen. */\n    position?: 'top' | 'center';\n    /** Set to 'none' to remove internal padding. */\n    padding?: 'none' | undefined;\n\n    // Behaviour\n    /** Whether clicking the backdrop closes the dialog. */\n    closeOnClickOutside?: boolean;\n    /** Whether pressing the browser Back button closes the dialog. Default true. */\n    closeOnNavigateBack?: boolean;\n    /** Whether to render a close (×) button in the header. */\n    closeButton?: boolean;\n    /** Replace the default close (×) icon with custom markup (structural seam). */\n    closeIcon?: Snippet;\n\n    /**\n     * When true the dialog DOM is kept alive after close — children preserve\n     * internal state between open/close cycles.\n     */\n    staticRender?: boolean;\n\n    /** Prevent the page from scrolling while the dialog is open. */\n    preventScroll?: boolean;\n\n    /** Called after the open or close animation has fully completed.\n     * Note: This callback only fires when the internal component mutates the open state, not when the state is changed by outside)\n     */\n    onOpenChangeComplete?: (open: boolean) => void;\n\n    /** Element to return focus to when the dialog closes. */\n    triggerRef?: HTMLElement | null;\n    /** Focus triggerRef after close (default true when triggerRef is provided). */\n    focusTriggerAfterClose?: boolean;\n\n    // Class overrides for sub-regions\n    /** Additional classes applied to the outer container div. */\n    containerClass?: string;\n    /** Additional classes applied to the header region. */\n    headerClass?: string;\n    /** Additional classes applied to the body/content region. */\n    bodyClass?: string;\n    /** Additional classes applied to the footer region. */\n    footerClass?: string;\n\n    /** Bindable reference to the dialog content element. */\n    ref?: HTMLElement | null;\n    [key: string]: unknown;\n}\n\nexport type DialogPropsAstro = Omit<DialogProps, 'children' | 'open' | 'ref'>\n"
+    },
+    {
+      "path": "src/lib/components/dialog/dialog.scss",
+      "target": "dialog.scss",
+      "type": "style",
+      "content": ""
+    },
+    {
+      "path": "src/lib/components/dialog/Dialog.svelte",
+      "target": "Dialog.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\n    import {Dialog as DialogPrimitive} from 'bits-ui';\n    import {type DialogProps, dialogRecipe} from './Dialog.recipe';\n    import {IconX} from '$lib/internal/icons';\n    import {cn} from '$lib/utils/index.js';\n    import {closeOnBackNavigation} from '$lib/hooks';\n\n    let {\n        children,\n        open = $bindable(false),\n        ref = $bindable(null),\n        closeOnClickOutside = true,\n        closeOnNavigateBack = true,\n        closeButton = true,\n        size = 'sm',\n        header,\n        footer,\n        class: className,\n        position = 'center',\n        padding,\n        staticRender = false,\n        preventScroll,\n        onOpenChangeComplete,\n        triggerRef,\n        focusTriggerAfterClose = true,\n        containerClass,\n        headerClass,\n        bodyClass,\n        footerClass,\n        closeIcon,\n        ...props\n    }: DialogProps = $props();\n\n    const isFull = $derived(size === 'full');\n\n    const r = $derived(\n        dialogRecipe({\n            size,\n            position,\n            full: isFull,\n            padding: padding === 'none' ? 'none' : 'normal',\n        })\n    );\n\n    function handleCloseAutoFocus(e: Event) {\n        if (triggerRef && focusTriggerAfterClose) {\n            e.preventDefault();\n            triggerRef.focus();\n        }\n    }\n\n    closeOnBackNavigation({\n        enabled: () => closeOnNavigateBack,\n        isOpen: () => open,\n        close: () => { open = false; },\n    });\n</script>\n\n<DialogPrimitive.Root bind:open onOpenChangeComplete={onOpenChangeComplete}>\n    <DialogPrimitive.Portal>\n        <!-- Backdrop -->\n        <DialogPrimitive.Overlay class={r.overlay()} />\n\n        <!--\n            We use the `child` snippet (bits-ui \"asChild\" pattern) so that bits-ui gates its\n            internal <ScrollLock> on `open.current`. Without this, the `children` branch renders\n            <ScrollLock> unconditionally — with forceMount the lock never releases, leaving\n            `document.body { pointer-events:none; overflow:hidden }` active even when closed.\n        -->\n        <DialogPrimitive.Content\n            bind:ref\n            forceMount={staticRender || undefined}\n            interactOutsideBehavior={closeOnClickOutside ? 'close' : 'ignore'}\n            preventScroll={preventScroll}\n            onCloseAutoFocus={handleCloseAutoFocus}\n            {...props}\n        >\n            {#snippet child({ props: contentProps })}\n                <div\n                    {...contentProps}\n                    inert={staticRender && !open ? true : undefined}\n                    class={cn(\n                        contentProps.class,\n                        r.content(),\n                        staticRender && 'data-[state=closed]:hidden',\n                        className\n                    )}\n                >\n                    {#if closeButton}\n                        <DialogPrimitive.Close\n                            class={r.close()}\n                            aria-label=\"Close\"\n                        >\n                            {#if closeIcon}\n                                {@render closeIcon()}\n                            {:else}\n                                <IconX class=\"size-4\"/>\n                            {/if}\n                        </DialogPrimitive.Close>\n                    {/if}\n\n                    <div class={r.container({ class: containerClass })}>\n                        {#if header}\n                            <header class={r.header({ class: headerClass })}>\n                                {@render header()}\n                            </header>\n                        {/if}\n\n                        <main class={r.body({ class: bodyClass })}>\n                            {@render children?.()}\n                        </main>\n\n                        {#if footer}\n                            <footer class={r.footer({ class: footerClass })}>\n                                {@render footer()}\n                            </footer>\n                        {/if}\n                    </div>\n                </div>\n            {/snippet}\n        </DialogPrimitive.Content>\n    </DialogPrimitive.Portal>\n</DialogPrimitive.Root>\n"
+    },
+    {
+      "path": "src/lib/components/dialog/index.ts",
+      "target": "index.ts",
+      "type": "ts",
+      "content": "export {default as Dialog} from './Dialog.svelte'\r\nexport {dialogRecipe} from './Dialog.recipe'\r\nexport type {DialogProps, DialogPropsAstro, DialogRecipeProps} from './Dialog.recipe'\r\n\r\n\r\n"
+    }
+  ],
+  "dependencies": [
+    "bits-ui",
+    "tailwind-variants"
+  ],
+  "peerDependencies": [
+    "svelte"
+  ],
+  "registryDependencies": [],
+  "sharedModules": {
+    "utils": true,
+    "icons": true,
+    "hooks": true
+  },
+  "exports": [
+    "Dialog",
+    "dialogRecipe"
+  ]
+}

package/registry/drawer.json

@@ -0,0 +1,45 @@
+{
+  "$schema": "https://tera-system-ui/registry-item.schema.json",
+  "name": "drawer",
+  "type": "registry:component",
+  "description": "Edge-anchored sliding drawer.",
+  "recipe": "src/lib/components/drawer/Drawer.recipe.ts",
+  "files": [
+    {
+      "path": "src/lib/components/drawer/Drawer.recipe.ts",
+      "target": "Drawer.recipe.ts",
+      "type": "recipe",
+      "content": "import {tv, type VariantProps} from \"tailwind-variants\";\nimport type {Snippet} from \"svelte\";\n\n/**\n * Drawer recipe — the canonical styled layer for the base design language.\n *\n * Multi-part slide-in panel (vaul-style sheet, custom behavior — not bits-ui):\n * the recipe is slotted by role — overlay / content / header / headerClose /\n * body / footer — so an app can restyle any part independently. The `side`\n * variant carries the edge it slides from (left / right / bottom) and its\n * slide-in animation; the `size` variant carries the panel width for the\n * vertical (left / right) edges.\n *\n * Primary customization surface: extend with `tv({ extend: drawerRecipe, ... })`\n * in typed code. Lighter rung: the per-component CSS var (--tera-drawer-radius)\n * lets a theme retune the bottom-sheet corner radius with no code change; it\n * defaults to the prior literal value inline. 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 drawerRecipe = tv({\n    slots: {\n        overlay: 'fixed inset-0 z-40 bg-overlay backdrop-blur-[4px] animate-in fade-in duration-[var(--tera-duration-base)]',\n        content: 'z-50 flex flex-col bg-surface shadow-lg border border-border-default animate-in duration-[var(--tera-duration-slow)] ease-spring',\n        header: 'flex items-center justify-between px-5 py-4 border-b border-border-default shrink-0',\n        headerClose: 'text-text-tertiary hover:text-text-primary transition-colors ml-auto',\n        body: 'flex-1 overflow-y-auto p-5',\n        footer: 'px-5 py-4 border-t border-border-default shrink-0',\n    },\n    variants: {\n        side: {\n            left: {content: 'fixed left-0 top-0 bottom-0 max-w-full slide-in-from-left'},\n            right: {content: 'fixed right-0 top-0 bottom-0 max-w-full slide-in-from-right'},\n            bottom: {content: 'fixed bottom-0 left-0 right-0 max-h-[85vh] rounded-t-[var(--tera-drawer-radius,20px)] slide-in-from-bottom'},\n        },\n        size: {\n            sm: {content: 'w-[320px]'},\n            md: {content: 'w-[480px]'},\n            lg: {content: 'w-[640px]'},\n            full: {content: 'w-[100%]'},\n        },\n    },\n    compoundVariants: [\n        // Width only applies to the vertical (left / right) edges; the bottom\n        // sheet spans the full viewport width and ignores `size`.\n        {side: 'bottom', class: {content: 'w-auto'}},\n    ],\n    defaultVariants: {\n        side: 'right',\n        size: 'md',\n    },\n});\n\nexport type DrawerRecipeProps = VariantProps<typeof drawerRecipe>;\n\nexport interface DrawerProps extends DrawerRecipeProps {\n    /** Whether the drawer is open. Bindable. */\n    open?: boolean;\n    /** Edge the panel slides in from. */\n    side?: 'left' | 'right' | 'bottom';\n    /** Panel width (left / right edges only): sm 320px, md 480px, lg 640px, full 100%. */\n    size?: 'sm' | 'md' | 'lg' | 'full';\n    /** Close the drawer when the backdrop is clicked or Escape is pressed. */\n    closeOnClickOutside?: boolean;\n    /** Header content; renders the header bar with a close button when set. */\n    header?: Snippet;\n    /** Footer content; renders the footer bar when set. */\n    footer?: Snippet;\n    /** Main body content. */\n    children?: Snippet;\n    /** Replace the default close (X) icon with custom markup (structural seam). */\n    closeIcon?: Snippet;\n    /** Called after the drawer closes. */\n    onclose?: () => void;\n}\n"
+    },
+    {
+      "path": "src/lib/components/drawer/Drawer.svelte",
+      "target": "Drawer.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\n    import {type DrawerProps, drawerRecipe} from './Drawer.recipe';\n\n    let {\n        open = $bindable(false),\n        side = 'right',\n        size = 'md',\n        closeOnClickOutside = true,\n        header,\n        footer,\n        children,\n        closeIcon,\n        onclose,\n    }: DrawerProps = $props();\n\n    const r = $derived(drawerRecipe({side, size}));\n\n    function close() {\n        open = false;\n        onclose?.();\n    }\n</script>\n\n{#if open}\n    <!-- Backdrop -->\n    <div\n        role=\"presentation\"\n        class={r.overlay()}\n        onclick={() => closeOnClickOutside && close()}\n        onkeydown={(e) => e.key === 'Escape' && closeOnClickOutside && close()}\n    ></div>\n\n    <!-- Drawer panel -->\n    <div\n        class={r.content()}\n        role=\"dialog\"\n        aria-modal=\"true\"\n    >\n        {#if header}\n            <header class={r.header()}>\n                {@render header()}\n                <button\n                    type=\"button\"\n                    onclick={close}\n                    class={r.headerClose()}\n                    aria-label=\"Close drawer\"\n                >\n                    {#if closeIcon}\n                        {@render closeIcon()}\n                    {:else}\n                        <svg class=\"size-4\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n                            <path d=\"M4 4l8 8M12 4l-8 8\"/>\n                        </svg>\n                    {/if}\n                </button>\n            </header>\n        {/if}\n\n        <main class={r.body()}>\n            {@render children?.()}\n        </main>\n\n        {#if footer}\n            <footer class={r.footer()}>\n                {@render footer()}\n            </footer>\n        {/if}\n    </div>\n{/if}\n"
+    },
+    {
+      "path": "src/lib/components/drawer/index.ts",
+      "target": "index.ts",
+      "type": "ts",
+      "content": "export {default as Drawer} from './Drawer.svelte'\nexport {drawerRecipe, type DrawerRecipeProps, type DrawerProps} from './Drawer.recipe'\n"
+    }
+  ],
+  "dependencies": [
+    "tailwind-variants"
+  ],
+  "peerDependencies": [
+    "svelte"
+  ],
+  "registryDependencies": [],
+  "sharedModules": {
+    "utils": false,
+    "icons": false,
+    "hooks": false
+  },
+  "exports": [
+    "Drawer",
+    "drawerRecipe",
+    "DrawerRecipeProps",
+    "DrawerProps"
+  ]
+}

package/registry/dropdown-menu.json

@@ -0,0 +1,72 @@
+{
+  "$schema": "https://tera-system-ui/registry-item.schema.json",
+  "name": "dropdown-menu",
+  "type": "registry:component",
+  "description": "Contextual dropdown menu.",
+  "recipe": "src/lib/components/dropdown-menu/DropdownMenu.recipe.ts",
+  "files": [
+    {
+      "path": "src/lib/components/dropdown-menu/components/DropdownMenu.svelte",
+      "target": "components/DropdownMenu.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\n    import {DropdownMenu as DropdownMenuPrimitive} from 'bits-ui';\n    import {dropdownMenuRecipe, type DropdownMenuProps} from '../DropdownMenu.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        loop,\n        preventScroll,\n        ...props\n    }: DropdownMenuProps = $props();\n\n    const r = dropdownMenuRecipe();\n</script>\n\n<DropdownMenuPrimitive.Root bind:open>\n    {#if trigger}\n        <DropdownMenuPrimitive.Trigger>\n            {#snippet child({ props: triggerProps })}\n                <span {...triggerProps} class=\"inline-flex\">\n                    {@render trigger()}\n                </span>\n            {/snippet}\n        </DropdownMenuPrimitive.Trigger>\n    {/if}\n\n    <DropdownMenuPrimitive.Portal>\n        <DropdownMenuPrimitive.Content\n            {side}\n            {sideOffset}\n            {align}\n            {loop}\n            {preventScroll}\n            {...props}\n            class={r.content({ class: className })}\n        >\n            {@render children?.()}\n        </DropdownMenuPrimitive.Content>\n    </DropdownMenuPrimitive.Portal>\n</DropdownMenuPrimitive.Root>\n"
+    },
+    {
+      "path": "src/lib/components/dropdown-menu/components/DropdownMenuGroup.svelte",
+      "target": "components/DropdownMenuGroup.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\n    import {DropdownMenu as DropdownMenuPrimitive} from 'bits-ui';\n    import {dropdownMenuRecipe, type DropdownMenuGroupProps} from '../DropdownMenu.recipe';\n\n    let {children, class: className, ...props}: DropdownMenuGroupProps = $props();\n\n    const r = dropdownMenuRecipe();\n</script>\n\n<DropdownMenuPrimitive.Group class={r.group({ class: className })} {...props}>\n    {@render children?.()}\n</DropdownMenuPrimitive.Group>\n"
+    },
+    {
+      "path": "src/lib/components/dropdown-menu/components/DropdownMenuHeader.svelte",
+      "target": "components/DropdownMenuHeader.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\n    import {dropdownMenuRecipe, type DropdownMenuHeaderProps} from '../DropdownMenu.recipe';\n\n    let {children, class: className, ...props}: DropdownMenuHeaderProps = $props();\n\n    const r = dropdownMenuRecipe();\n</script>\n\n<div\n    class={r.header({ class: className })}\n    role=\"presentation\"\n    {...props}\n>\n    {@render children?.()}\n</div>\n"
+    },
+    {
+      "path": "src/lib/components/dropdown-menu/components/DropdownMenuItem.svelte",
+      "target": "components/DropdownMenuItem.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\n    import {DropdownMenu as DropdownMenuPrimitive} from 'bits-ui';\n    import {dropdownMenuRecipe, type DropdownMenuItemProps} from '../DropdownMenu.recipe';\n\n    let {\n        children,\n        class: className,\n        danger,\n        disabled,\n        onclick,\n        href,\n        closeOnSelect,\n        textValue,\n        ...props\n    }: DropdownMenuItemProps = $props();\n\n    const r = $derived(dropdownMenuRecipe({ danger }));\n\n    function handleSelect() {\n        onclick?.(new MouseEvent('click'));\n        if (href) window.location.assign(href as string);\n    }\n</script>\n\n<DropdownMenuPrimitive.Item\n    {disabled}\n    {textValue}\n    closeOnSelect={closeOnSelect}\n    onSelect={handleSelect}\n    class={r.item({ class: className })}\n    {...props}\n>\n    {@render children?.()}\n</DropdownMenuPrimitive.Item>\n"
+    },
+    {
+      "path": "src/lib/components/dropdown-menu/components/DropdownMenuSeparator.svelte",
+      "target": "components/DropdownMenuSeparator.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\n    import {DropdownMenu as DropdownMenuPrimitive} from 'bits-ui';\n    import {dropdownMenuRecipe, type DropdownMenuSeparatorProps} from '../DropdownMenu.recipe';\n\n    let {class: className, ...props}: DropdownMenuSeparatorProps = $props();\n\n    const r = dropdownMenuRecipe();\n</script>\n\n<DropdownMenuPrimitive.Separator\n    class={r.separator({ class: className })}\n    {...props}\n/>\n"
+    },
+    {
+      "path": "src/lib/components/dropdown-menu/DropdownMenu.recipe.ts",
+      "target": "DropdownMenu.recipe.ts",
+      "type": "recipe",
+      "content": "import {tv, type VariantProps} from \"tailwind-variants\";\nimport type {Snippet} from \"svelte\";\n\n/**\n * DropdownMenu recipe — the canonical styled layer for the base design language.\n *\n * Multi-part component (built on bits-ui DropdownMenu): the recipe is slotted by\n * role — content (the popup panel), item (a selectable row), group (a section\n * wrapper), header (a section label), separator (the divider rule). The item\n * slot carries the destructive `danger` look as a variant so an app can restyle\n * it independently.\n *\n * Primary customization surface: extend with `tv({ extend: dropdownMenuRecipe,\n * ... })` in typed code. Lighter rung: the per-component CSS var\n * (--tera-dropdown-radius) lets a theme retune the panel corner radius with no\n * 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 dropdownMenuRecipe = tv({\n    slots: {\n        content: `z-50 min-w-[10rem] overflow-hidden p-1\n                bg-surface rounded-[var(--tera-dropdown-radius,var(--border-radius-container))] border border-border-default shadow-md\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        item: `flex w-full cursor-pointer items-center gap-2 px-2 py-2 rounded text-sm outline-none select-none\n                transition-colors ease-ui duration-[var(--tera-duration-micro)]\n                data-[highlighted]:bg-surface-hover\n                data-[disabled]:pointer-events-none data-[disabled]:opacity-50`,\n        group: 'py-1',\n        header: 'px-2 py-1.5 text-xs font-semibold text-text-tertiary uppercase tracking-wider',\n        separator: '-mx-1 my-1 h-px bg-border-default',\n    },\n    variants: {\n        danger: {\n            true: {item: 'text-error-text data-[highlighted]:bg-error-subtle'},\n            false: {item: 'text-text-primary'},\n        },\n    },\n    defaultVariants: {\n        danger: false,\n    },\n});\n\nexport type DropdownMenuRecipeProps = VariantProps<typeof dropdownMenuRecipe>;\n\nexport interface DropdownMenuProps {\n    children?: Snippet;\n    /** Snippet used as the clickable trigger that opens the menu. */\n    trigger?: Snippet;\n    /** Additional CSS classes for the menu content panel. */\n    class?: string;\n    /** Whether the menu is open. Bindable. */\n    open?: boolean;\n    /** Which side of the trigger the menu appears on. */\n    side?: 'top' | 'bottom' | 'left' | 'right';\n    /** Alignment of the menu relative to the trigger. */\n    align?: 'start' | 'center' | 'end';\n    /** Distance in pixels between the trigger and menu panel. */\n    sideOffset?: number;\n    /** Whether keyboard navigation wraps from the last item back to the first. */\n    loop?: boolean;\n    /** Prevent the page from scrolling while the menu is open. */\n    preventScroll?: boolean;\n    /** Bindable reference to the menu content element. */\n    ref?: HTMLElement | null;\n    [key: string]: unknown;\n}\n\nexport interface DropdownMenuItemProps {\n    children?: Snippet;\n    /** Additional CSS classes for the item. */\n    class?: string;\n    /** Renders the item in a destructive/danger visual style. */\n    danger?: boolean;\n    /** Prevents selecting this item. */\n    disabled?: boolean;\n    /** When set, renders the item as an anchor link instead of a button. */\n    href?: string;\n    /** Called when the item is clicked. */\n    onclick?: (e: MouseEvent) => void;\n    /** Whether selecting this item closes the menu. Defaults to true. */\n    closeOnSelect?: boolean;\n    /** Alternative text value for typeahead matching — defaults to the item's text content. */\n    textValue?: string;\n    /** Bindable reference to the item element. */\n    ref?: HTMLElement | null;\n    [key: string]: unknown;\n}\n\nexport interface DropdownMenuGroupProps {\n    children?: Snippet;\n    /** Additional CSS classes for the group wrapper. */\n    class?: string;\n    ref?: HTMLElement | null;\n    [key: string]: unknown;\n}\n\nexport interface DropdownMenuHeaderProps {\n    children?: Snippet;\n    /** Additional CSS classes for the header. */\n    class?: string;\n    ref?: HTMLElement | null;\n    [key: string]: unknown;\n}\n\nexport interface DropdownMenuSeparatorProps {\n    /** Additional CSS classes for the separator line. */\n    class?: string;\n    ref?: HTMLElement | null;\n    [key: string]: unknown;\n}\n"
+    },
+    {
+      "path": "src/lib/components/dropdown-menu/index.ts",
+      "target": "index.ts",
+      "type": "ts",
+      "content": "export {default as DropdownMenu} from './components/DropdownMenu.svelte'\nexport {default as DropdownMenuItem } from './components/DropdownMenuItem.svelte'\nexport {default as DropdownMenuGroup } from './components/DropdownMenuGroup.svelte'\nexport {default as DropdownMenuHeader } from './components/DropdownMenuHeader.svelte'\nexport {default as DropdownMenuSeparator } from './components/DropdownMenuSeparator.svelte'\n\nexport {dropdownMenuRecipe} from './DropdownMenu.recipe'\n\nexport type {\n    DropdownMenuProps,\n    DropdownMenuItemProps,\n    DropdownMenuGroupProps,\n    DropdownMenuHeaderProps,\n    DropdownMenuSeparatorProps,\n    DropdownMenuRecipeProps\n} from './DropdownMenu.recipe'\n"
+    }
+  ],
+  "dependencies": [
+    "bits-ui",
+    "tailwind-variants"
+  ],
+  "peerDependencies": [
+    "svelte"
+  ],
+  "registryDependencies": [],
+  "sharedModules": {
+    "utils": false,
+    "icons": false,
+    "hooks": false
+  },
+  "exports": [
+    "DropdownMenu",
+    "DropdownMenuItem",
+    "DropdownMenuGroup",
+    "DropdownMenuHeader",
+    "DropdownMenuSeparator",
+    "dropdownMenuRecipe"
+  ]
+}

package/registry/fonts.json

@@ -0,0 +1,41 @@
+{
+  "$schema": "https://tera-system-ui/registry-item.schema.json",
+  "name": "fonts",
+  "type": "registry:component",
+  "description": "",
+  "recipe": null,
+  "files": [
+    {
+      "path": "src/lib/components/fonts/index.ts",
+      "target": "index.ts",
+      "type": "ts",
+      "content": "export {default as TeraFontSansSerif} from './TeraFontSansSerif.svelte'\r\nexport {default as TeraFontMono} from './TeraFontMono.svelte'\r\n"
+    },
+    {
+      "path": "src/lib/components/fonts/TeraFontMono.svelte",
+      "target": "TeraFontMono.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\n    // Geist Mono first (modern, preferred), fallback to Roboto Mono Variable\n    import '@fontsource-variable/geist-mono';\n    import '@fontsource-variable/roboto-mono';\n</script>\n"
+    },
+    {
+      "path": "src/lib/components/fonts/TeraFontSansSerif.svelte",
+      "target": "TeraFontSansSerif.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\n    // Inter Variable — modern, sharp screen rendering, strong numeral rendering\n    // Supports weights 100–900\n    import '@fontsource-variable/inter';\n</script>\n"
+    }
+  ],
+  "dependencies": [],
+  "peerDependencies": [
+    "svelte"
+  ],
+  "registryDependencies": [],
+  "sharedModules": {
+    "utils": false,
+    "icons": false,
+    "hooks": false
+  },
+  "exports": [
+    "TeraFontSansSerif",
+    "TeraFontMono"
+  ]
+}

package/registry/index.json

@@ -0,0 +1,193 @@
+{
+  "components": [
+    {
+      "name": "accordion",
+      "description": "Collapsible accordion (single/multi-open).",
+      "recipe": true,
+      "registryDependencies": []
+    },
+    {
+      "name": "alert",
+      "description": "Contextual alert banner for status messages.",
+      "recipe": true,
+      "registryDependencies": []
+    },
+    {
+      "name": "avatar",
+      "description": "User avatar with image + initials fallback.",
+      "recipe": true,
+      "registryDependencies": []
+    },
+    {
+      "name": "badge",
+      "description": "Compact label for counts, status, or categories.",
+      "recipe": true,
+      "registryDependencies": []
+    },
+    {
+      "name": "bottom-sheet",
+      "description": "Draggable iOS-style bottom sheet with snap points, container-scale effect, and stacking.",
+      "recipe": true,
+      "registryDependencies": []
+    },
+    {
+      "name": "button",
+      "description": "Interactive button with variants, sizes, loading, danger, link mode.",
+      "recipe": true,
+      "registryDependencies": []
+    },
+    {
+      "name": "card",
+      "description": "Content container with elevation, border, padding variants.",
+      "recipe": true,
+      "registryDependencies": []
+    },
+    {
+      "name": "checkbox",
+      "description": "Checkbox input with indeterminate support.",
+      "recipe": true,
+      "registryDependencies": []
+    },
+    {
+      "name": "combobox",
+      "description": "Searchable combobox with autocomplete.",
+      "recipe": true,
+      "registryDependencies": []
+    },
+    {
+      "name": "command",
+      "description": "Command palette.",
+      "recipe": true,
+      "registryDependencies": [
+        "input"
+      ]
+    },
+    {
+      "name": "date-range-picker",
+      "description": "",
+      "recipe": true,
+      "registryDependencies": [
+        "dialog"
+      ]
+    },
+    {
+      "name": "dialog",
+      "description": "Modal dialog with header/footer slots and size variants.",
+      "recipe": true,
+      "registryDependencies": []
+    },
+    {
+      "name": "drawer",
+      "description": "Edge-anchored sliding drawer.",
+      "recipe": true,
+      "registryDependencies": []
+    },
+    {
+      "name": "dropdown-menu",
+      "description": "Contextual dropdown menu.",
+      "recipe": true,
+      "registryDependencies": []
+    },
+    {
+      "name": "fonts",
+      "description": "",
+      "recipe": false,
+      "registryDependencies": []
+    },
+    {
+      "name": "input",
+      "description": "Text input with prefix/suffix slots, clear button, status variants.",
+      "recipe": true,
+      "registryDependencies": []
+    },
+    {
+      "name": "label",
+      "description": "Accessible form label.",
+      "recipe": true,
+      "registryDependencies": []
+    },
+    {
+      "name": "popover",
+      "description": "Floating popover anchored to a trigger.",
+      "recipe": true,
+      "registryDependencies": []
+    },
+    {
+      "name": "popover-responsive",
+      "description": "",
+      "recipe": true,
+      "registryDependencies": [
+        "dialog",
+        "popover"
+      ]
+    },
+    {
+      "name": "select",
+      "description": "Select dropdown with options/groups and keyboard nav.",
+      "recipe": true,
+      "registryDependencies": []
+    },
+    {
+      "name": "skeleton",
+      "description": "",
+      "recipe": true,
+      "registryDependencies": []
+    },
+    {
+      "name": "slider",
+      "description": "Range slider for numeric selection.",
+      "recipe": true,
+      "registryDependencies": []
+    },
+    {
+      "name": "spinner",
+      "description": "",
+      "recipe": true,
+      "registryDependencies": []
+    },
+    {
+      "name": "star-rating",
+      "description": "Interactive 1–5 star rating.",
+      "recipe": true,
+      "registryDependencies": []
+    },
+    {
+      "name": "switch",
+      "description": "Toggle switch for boolean state.",
+      "recipe": true,
+      "registryDependencies": []
+    },
+    {
+      "name": "table",
+      "description": "Data table with striped rows and loading skeleton.",
+      "recipe": true,
+      "registryDependencies": [
+        "skeleton"
+      ]
+    },
+    {
+      "name": "tabs",
+      "description": "Tabbed content panels (line + iOS variants).",
+      "recipe": true,
+      "registryDependencies": []
+    },
+    {
+      "name": "text-area",
+      "description": "Multi-line text input with auto-resize.",
+      "recipe": true,
+      "registryDependencies": []
+    },
+    {
+      "name": "toast",
+      "description": "",
+      "recipe": false,
+      "registryDependencies": []
+    },
+    {
+      "name": "tooltip",
+      "description": "Floating tooltip shown on hover/focus.",
+      "recipe": true,
+      "registryDependencies": []
+    }
+  ]
+}

package/registry/input.json

@@ -0,0 +1,43 @@
+{
+  "$schema": "https://tera-system-ui/registry-item.schema.json",
+  "name": "input",
+  "type": "registry:component",
+  "description": "Text input with prefix/suffix slots, clear button, status variants.",
+  "recipe": "src/lib/components/input/Input.recipe.ts",
+  "files": [
+    {
+      "path": "src/lib/components/input/index.ts",
+      "target": "index.ts",
+      "type": "ts",
+      "content": "export {default as Input} from './Input.svelte'\nexport {inputRecipe} from './Input.recipe'\nexport type {InputProps, InputRecipeProps} from './Input.recipe'\n"
+    },
+    {
+      "path": "src/lib/components/input/Input.recipe.ts",
+      "target": "Input.recipe.ts",
+      "type": "recipe",
+      "content": "import {tv, type VariantProps} from \"tailwind-variants\";\nimport type {Snippet} from \"svelte\";\nimport type {HTMLInputAttributes} from \"svelte/elements\";\n\n/**\n * Input recipe — the canonical styled layer for the base design language.\n *\n * Multi-part component, so it is slotted: `root` (the relative wrapper),\n * `field` (the `<input>` itself, where every variant/size/status lives),\n * `prefix` / `suffix` (the affix spans), and `clear` (the allow-clear button).\n * An app owns its look by extending this recipe with\n * `tv({ extend: inputRecipe, ... })` in typed code; base sizing, focus and\n * status states are inherited. See docs/ARCHITECTURE.md for the worked example\n * (kept out of this JSDoc so the llms doc generator doesn't grep its tokens).\n *\n * Restyle-internals (the lighter rung): the per-component CSS vars below\n * (--tera-input-*) let a theme/app retune corner radius with no code change;\n * they default to global axis tokens in tera-ui-base.css.\n */\nexport const inputRecipe = tv({\n    slots: {\n        root: 'relative inline-flex w-full',\n        field: 'w-full inline-flex items-center justify-center rounded-[var(--tera-input-radius,var(--tera-radius-base))] outline-none font-normal text-text-primary placeholder:text-text-tertiary transition-[border-color,box-shadow,background-color] ease-ui duration-[var(--tera-duration-fast)]',\n        prefix: 'absolute left-3 top-1/2 -translate-y-1/2 text-text-tertiary pointer-events-none',\n        suffix: 'absolute right-3 top-1/2 -translate-y-1/2 text-text-tertiary pointer-events-none',\n        clear: 'absolute right-3 top-1/2 -translate-y-1/2 text-text-tertiary hover:text-neutral-token-10 transition-colors',\n    },\n    variants: {\n        variant: {\n            outlined: {\n                field: 'border border-border-default bg-surface-control hover:border-border-strong focus:border-interactive focus:shadow-focus',\n            },\n            filled: {\n                field: 'bg-surface-sunken border border-transparent shadow-[inset_0_1px_2px_rgba(15,23,42,0.05)] hover:bg-surface-hover focus:bg-surface focus:border-interactive focus:shadow-focus',\n            },\n            borderless: {\n                field: 'bg-transparent border-0 hover:bg-surface-raised focus:bg-surface-raised',\n            },\n        },\n        disabled: {\n            true: {\n                field: 'cursor-not-allowed bg-surface-sunken text-text-disabled border-border-default',\n            },\n            false: {\n                field: 'cursor-text',\n            },\n        },\n        size: {\n            sm: {\n                field: 'h-[var(--tera-control-height-sm)] px-[var(--tera-control-px-md)] text-sm',\n            },\n            md: {\n                field: 'h-[var(--tera-control-height-md)] px-[var(--tera-control-px-md)] text-sm',\n            },\n            lg: {\n                field: 'h-[var(--tera-control-height-lg)] px-[var(--tera-control-px-md)] text-base',\n            },\n        },\n        status: {\n            error: {\n                field: 'border-error-default hover:border-error-hover focus:border-error-default focus:shadow-focus-error',\n            },\n            warning: {\n                field: 'border-warning-default hover:border-warning-hover focus:border-warning-default focus:shadow-focus-warning',\n            },\n        },\n    },\n    compoundVariants: [\n        {\n            variant: 'outlined',\n            disabled: true,\n            class: {field: 'hover:border-border-default'},\n        },\n        {\n            variant: 'filled',\n            disabled: true,\n            class: {field: 'hover:bg-surface-sunken'},\n        },\n        {\n            variant: 'borderless',\n            disabled: true,\n            class: {field: 'hover:bg-transparent'},\n        },\n    ],\n    defaultVariants: {\n        variant: 'outlined',\n        size: 'md',\n    },\n});\n\nexport type InputRecipeProps = VariantProps<typeof inputRecipe>;\n\nexport interface InputProps extends Omit<HTMLInputAttributes, 'disabled' | 'size' | 'value' | 'prefix'>, InputRecipeProps {\n    children?: Snippet;\n    class?: string;\n    value?: string;\n    ref?: HTMLInputElement | null;\n    prefix?: Snippet;\n    suffix?: Snippet;\n    allowClear?: boolean;\n    /** Replace the default clear (X) icon with custom markup (structural seam). */\n    clearIcon?: Snippet;\n}\n"
+    },
+    {
+      "path": "src/lib/components/input/Input.svelte",
+      "target": "Input.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\n    import {type InputProps, inputRecipe} from \"./Input.recipe\";\n    import {IconX} from \"$lib/internal/icons\";\n\n    let {\n        children,\n        class: className,\n        value = $bindable(),\n        ref = $bindable(),\n        size = 'md',\n        disabled,\n        variant = 'outlined',\n        prefix,\n        suffix,\n        allowClear,\n        status,\n        clearIcon,\n        ...props\n    }: InputProps = $props();\n\n    const r = $derived(inputRecipe({ variant, disabled, size, status }));\n\n    function clearInput() {\n        value = '';\n        ref?.focus();\n    }\n</script>\n\n<div class={r.root()}>\n    {#if prefix}\n        <span class={r.prefix()}>\n            {@render prefix()}\n        </span>\n    {/if}\n\n    <input\n            type=\"text\"\n            bind:this={ref}\n            class={r.field({ class: className })}\n            class:pl-9={prefix}\n            class:pr-9={allowClear && value || suffix}\n            {disabled}\n            {...props}\n            bind:value\n    />\n\n    {#if allowClear && value && !disabled}\n        <button\n                type=\"button\"\n                onclick={clearInput}\n                class={r.clear()}\n                tabindex=\"-1\"\n        >\n            {#if clearIcon}\n                {@render clearIcon()}\n            {:else}\n                <IconX class=\"size-3.5\"/>\n            {/if}\n        </button>\n    {:else if suffix}\n        <span class={r.suffix()}>\n            {@render suffix()}\n        </span>\n    {/if}\n</div>\n"
+    }
+  ],
+  "dependencies": [
+    "tailwind-variants"
+  ],
+  "peerDependencies": [
+    "svelte"
+  ],
+  "registryDependencies": [],
+  "sharedModules": {
+    "utils": false,
+    "icons": true,
+    "hooks": false
+  },
+  "exports": [
+    "Input",
+    "inputRecipe"
+  ]
+}