@snap-rail/framework-shadcn 0.0.0-stage → 0.2.0

package/lib/types/ui/schema-form.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * SchemaForm: the settings vocabulary's generic form engine. It renders one
+ * labeled control per property of a JSON Schema (the input-form projection
+ * drivers register with the field base — zod's `toJSONSchema`), on the touch
+ * baseline: enums and literal unions become TouchSelect rows (committing the
+ * literal's own type — a number const rides back as a number), numbers open
+ * the NumberPad, booleans ride a Switch. Property `title`s (zod
+ * `.meta({ title })`) label the fields; the host's zod schemas remain the
+ * only validator — this form shapes input, it does not judge it.
+ *
+ * The vocabulary is meant to grow (discovery pickers, repeatable groups);
+ * what a schema expresses beyond today's subset renders as a plain text
+ * field and still round-trips through the host's validation.
+ *
+ * @module @snap-rail/framework-shadcn/ui/schema-form
+ */
+import {} from 'react';
+import { Input } from "./input.js";
+import { Label } from "./label.js";
+import { NumberInput } from "./number-input.js";
+import { Switch } from "./switch.js";
+import { TouchSelect } from "./touch-select.js";
+import { cn } from "./utils.js";
+function isPropertySchema(raw) {
+    return typeof raw === 'object' && raw !== null;
+}
+/** Plan the renderable fields of an object schema (property order kept). */
+export function planSchemaFields(schema, hidden = []) {
+    const properties = schema.properties;
+    const required = new Set(Array.isArray(schema.required) ? schema.required.filter((name) => typeof name === 'string') : []);
+    const fields = [];
+    if (!isPropertySchema(properties))
+        return fields;
+    for (const [name, rawProperty] of Object.entries(properties)) {
+        if (hidden.includes(name))
+            continue;
+        const property = rawProperty;
+        const label = typeof property.title === 'string' && property.title !== '' ? property.title : name;
+        const field = { name, label, required: required.has(name), kind: 'string' };
+        // zod emits a union of literals either way: plain enums as `enum`, and
+        // `z.union([z.literal(1), …])` as `anyOf: [{const: 1}, …]`.
+        const literals = Array.isArray(property.enum) ? property.enum
+            : Array.isArray(property.anyOf)
+                ? property.anyOf.map(entry => isPropertySchema(entry) && 'const' in entry
+                    ? entry.const
+                    : undefined)
+                : undefined;
+        const typed = literals?.filter((value) => typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean');
+        if (literals !== undefined && typed !== undefined && typed.length > 0 && typed.length === literals.length) {
+            const valueOf = {};
+            field.kind = 'enum';
+            field.options = typed.map(value => {
+                const key = String(value);
+                valueOf[key] = value;
+                return { value: key, label: key };
+            });
+            field.literalOf = valueOf;
+        }
+        else {
+            switch (property.type) {
+                case 'integer':
+                    field.kind = 'integer';
+                    break;
+                case 'number':
+                    field.kind = 'number';
+                    break;
+                case 'boolean':
+                    field.kind = 'boolean';
+                    break;
+                case 'string':
+                    field.kind = 'string';
+                    break;
+                default: field.kind = 'text';
+            }
+        }
+        if (typeof property.description === 'string')
+            field.placeholder = property.description;
+        fields.push(field);
+    }
+    return fields;
+}
+/** Initial values from an object schema's `default`s (create dialogs). */
+export function schemaDefaults(schema) {
+    const value = {};
+    const properties = schema.properties;
+    if (!isPropertySchema(properties))
+        return value;
+    for (const [name, rawProperty] of Object.entries(properties)) {
+        const fallback = rawProperty.default;
+        if (typeof fallback === 'string' || typeof fallback === 'number' || typeof fallback === 'boolean') {
+            value[name] = fallback;
+        }
+    }
+    return value;
+}
+/** Strip keys whose value is `undefined` so unset optionals ride clean. */
+export function compactSchemaValue(value) {
+    const out = {};
+    for (const [key, entry] of Object.entries(value)) {
+        if (entry !== undefined)
+            out[key] = entry;
+    }
+    return out;
+}
+/** One labeled control. */
+function SchemaField(props) {
+    const { field, value, onChange, disabled = false } = props;
+    const setString = (next) => { onChange(next === '' ? undefined : next); };
+    return (_jsxs("div", { className: "grid gap-2", "data-schema-field": field.name, children: [_jsxs(Label, { htmlFor: `schema-${field.name}`, children: [field.label, field.required && _jsx("span", { className: "ml-1 text-destructive", children: "*" })] }), field.kind === 'enum' && field.options !== undefined && (_jsx(TouchSelect, { label: field.label, value: value === undefined ? '' : String(value), options: field.options, onValueChange: next => { onChange(field.literalOf?.[next] ?? next); }, disabled: disabled })), (field.kind === 'integer' || field.kind === 'number') && (_jsx(NumberInput, { label: field.label, value: value === undefined ? '' : String(value), onChange: text => {
+                    if (text === '') {
+                        onChange(undefined);
+                        return;
+                    }
+                    const parsed = field.kind === 'integer' ? Number.parseInt(text, 10) : Number.parseFloat(text);
+                    onChange(Number.isNaN(parsed) ? undefined : parsed);
+                }, allowDecimal: field.kind === 'number', placeholder: field.placeholder ?? '—', disabled: disabled })), field.kind === 'boolean' && (_jsx("div", { className: "flex h-12 items-center", children: _jsx(Switch, { id: `schema-${field.name}`, checked: value === true, onCheckedChange: onChange, disabled: disabled }) })), (field.kind === 'string' || field.kind === 'text') && (_jsx(Input, { id: `schema-${field.name}`, value: value === undefined ? '' : String(value), onChange: event => { setString(event.target.value); }, placeholder: field.placeholder, disabled: disabled }))] }));
+}
+/** A controlled, schema-driven form body (labels + controls, no buttons). */
+export function SchemaForm(props) {
+    const { schema, value, onChange, hidden = [], disabled = false, className } = props;
+    const fields = planSchemaFields(schema, hidden);
+    return (_jsxs("div", { className: cn('grid gap-5', className), "data-schema-form": true, children: [fields.map(field => (_jsx(SchemaField, { field: field, value: value[field.name], disabled: disabled, onChange: next => { onChange({ ...value, [field.name]: next }); } }, field.name))), fields.length === 0 && (_jsx("div", { className: "rounded-md border border-dashed border-border px-4 py-6 text-center text-sm text-muted-foreground", children: "\u6B64\u9A71\u52A8\u65E0\u989D\u5916\u914D\u7F6E\u9879" }))] }));
+}

package/lib/types/ui/scroll-area.d.ts

@@ -0,0 +1,10 @@
+/**
+ * ScrollArea: Radix scroll area with a themed slim scrollbar — panels keep
+ * native scrolling semantics without OS chrome.
+ *
+ * @module @snap-rail/framework-shadcn/ui/scroll-area
+ */
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import type { ComponentProps } from 'react';
+/** A themed scrollable viewport. */
+export declare function ScrollArea({ className, children, ...props }: ComponentProps<typeof ScrollAreaPrimitive.Root>): import("react").JSX.Element;

package/lib/types/ui/scroll-area.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ScrollArea: Radix scroll area with a themed slim scrollbar — panels keep
+ * native scrolling semantics without OS chrome.
+ *
+ * @module @snap-rail/framework-shadcn/ui/scroll-area
+ */
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import { cn } from "./utils.js";
+/** A themed scrollable viewport. */
+export function ScrollArea({ className, children, ...props }) {
+    return (_jsxs(ScrollAreaPrimitive.Root, { className: cn('overflow-hidden', className), ...props, children: [_jsx(ScrollAreaPrimitive.Viewport, { className: "h-full w-full", children: children }), _jsx(ScrollAreaPrimitive.Scrollbar, { orientation: "vertical", className: "flex w-1.5 touch-none select-none border-l border-transparent p-px", children: _jsx(ScrollAreaPrimitive.Thumb, { className: "relative flex-1 rounded-full bg-muted-foreground/40" }) }), _jsx(ScrollAreaPrimitive.Corner, {})] }));
+}

package/lib/types/ui/switch.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Switch: the Radix switch with snap-rail chrome — boolean control for
+ * toggles like the offline simulation.
+ *
+ * @module @snap-rail/framework-shadcn/ui/switch
+ */
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import type { ComponentProps } from 'react';
+/** A themed on/off control. */
+export declare function Switch({ className, ...props }: ComponentProps<typeof SwitchPrimitive.Root>): import("react").JSX.Element;

package/lib/types/ui/switch.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Switch: the Radix switch with snap-rail chrome — boolean control for
+ * toggles like the offline simulation.
+ *
+ * @module @snap-rail/framework-shadcn/ui/switch
+ */
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import { cn } from "./utils.js";
+/** A themed on/off control. */
+export function Switch({ className, ...props }) {
+    return (_jsx(SwitchPrimitive.Root, { className: cn('peer inline-flex h-6 w-12 shrink-0 cursor-pointer items-center rounded-full border border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-secondary', className), ...props, children: _jsx(SwitchPrimitive.Thumb, { className: "pointer-events-none block h-5 w-5 rounded-full bg-foreground shadow transition-transform data-[state=checked]:translate-x-6 data-[state=unchecked]:translate-x-1" }) }));
+}

package/lib/types/ui/table.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Table: the data-table family (table, header, body, row, head, cell) —
+ * themed native elements in the shadcn shape, no behaviour attached.
+ *
+ * @module @snap-rail/framework-shadcn/ui/table
+ */
+import type { ComponentProps } from 'react';
+/** The grid container with a hairline bottom rule; the wrapper pans under
+ * a held mouse drag (see {@link DragScroll}). */
+export declare function Table({ className, ...props }: ComponentProps<'table'>): import("react").JSX.Element;
+/** Header group. */
+export declare function TableHeader({ className, ...props }: ComponentProps<'thead'>): import("react").JSX.Element;
+/** Body group. */
+export declare function TableBody({ className, ...props }: ComponentProps<'tbody'>): import("react").JSX.Element;
+/** One row: hairline separators, hover affordance when interactive. */
+export declare function TableRow({ className, ...props }: ComponentProps<'tr'>): import("react").JSX.Element;
+/** One column head: muted, left-aligned unless overridden. */
+export declare function TableHead({ className, ...props }: ComponentProps<'th'>): import("react").JSX.Element;
+/** One cell. */
+export declare function TableCell({ className, ...props }: ComponentProps<'td'>): import("react").JSX.Element;

package/lib/types/ui/table.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DragScroll } from "./drag-scroll.js";
+import { cn } from "./utils.js";
+/** The grid container with a hairline bottom rule; the wrapper pans under
+ * a held mouse drag (see {@link DragScroll}). */
+export function Table({ className, ...props }) {
+    return (_jsx(DragScroll, { className: "w-full", children: _jsx("table", { className: cn('w-full caption-bottom text-sm', className), ...props }) }));
+}
+/** Header group. */
+export function TableHeader({ className, ...props }) {
+    return _jsx("thead", { className: cn('[&_tr]:border-b', className), ...props });
+}
+/** Body group. */
+export function TableBody({ className, ...props }) {
+    return _jsx("tbody", { className: cn('[&_tr:last-child]:border-0', className), ...props });
+}
+/** One row: hairline separators, hover affordance when interactive. */
+export function TableRow({ className, ...props }) {
+    return (_jsx("tr", { className: cn('border-b border-border transition-colors hover:bg-accent/40 data-[state=selected]:bg-accent', className), ...props }));
+}
+/** One column head: muted, left-aligned unless overridden. */
+export function TableHead({ className, ...props }) {
+    return _jsx("th", { className: cn('h-11 px-3 text-left align-middle text-sm font-medium text-muted-foreground', className), ...props });
+}
+/** One cell. */
+export function TableCell({ className, ...props }) {
+    return _jsx("td", { className: cn('px-3 py-3 align-middle', className), ...props });
+}

package/lib/types/ui/tabs.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Tabs: themed pager over Radix Tabs (list, trigger, content). Icons are
+ * inline strokes so the UI seam needs no icon dependency.
+ *
+ * @module @snap-rail/framework-shadcn/ui/tabs
+ */
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import type { ComponentProps } from 'react';
+/** Controlled/uncontrolled root; re-exported so callers need one import. */
+export declare const Tabs: import("react").ForwardRefExoticComponent<TabsPrimitive.TabsProps & import("react").RefAttributes<HTMLDivElement>>;
+/** The tab strip; triggers rest on the muted surface, the active one lifts. */
+export declare function TabsList({ className, ...props }: ComponentProps<typeof TabsPrimitive.List>): import("react").JSX.Element;
+/** One tab button; the data attributes carry the active/hover styling. */
+export declare function TabsTrigger({ className, ...props }: ComponentProps<typeof TabsPrimitive.Trigger>): import("react").JSX.Element;
+/** The panel of one tab; mounted only while its trigger is active. */
+export declare function TabsContent({ className, ...props }: ComponentProps<typeof TabsPrimitive.Content>): import("react").JSX.Element;

package/lib/types/ui/tabs.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Tabs: themed pager over Radix Tabs (list, trigger, content). Icons are
+ * inline strokes so the UI seam needs no icon dependency.
+ *
+ * @module @snap-rail/framework-shadcn/ui/tabs
+ */
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { cn } from "./utils.js";
+/** Controlled/uncontrolled root; re-exported so callers need one import. */
+export const Tabs = TabsPrimitive.Root;
+/** The tab strip; triggers rest on the muted surface, the active one lifts. */
+export function TabsList({ className, ...props }) {
+    return (_jsx(TabsPrimitive.List, { className: cn('inline-flex h-12 items-center gap-1 rounded-lg bg-muted p-1 text-muted-foreground', className), ...props }));
+}
+/** One tab button; the data attributes carry the active/hover styling. */
+export function TabsTrigger({ className, ...props }) {
+    return (_jsx(TabsPrimitive.Trigger, { className: cn('inline-flex items-center gap-1.5 whitespace-nowrap rounded-md px-5 py-1.5 text-base font-medium', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', 'disabled:pointer-events-none disabled:opacity-50', 'data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm', className), ...props }));
+}
+/** The panel of one tab; mounted only while its trigger is active. */
+export function TabsContent({ className, ...props }) {
+    return (_jsx(TabsPrimitive.Content, { className: cn('mt-4 focus-visible:outline-none', className), ...props }));
+}

package/lib/types/ui/textarea.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Textarea: themed multi-line text entry for prompts, notes, and free-form
+ * descriptions (ported from shadcn/ui's textarea primitive, flattened to
+ * this theme's tokens and touch baseline).
+ *
+ * @module @snap-rail/framework-shadcn/ui/textarea
+ */
+import type { ComponentProps } from 'react';
+/** A themed multi-line text area. */
+export declare function Textarea({ className, ...props }: ComponentProps<'textarea'>): import("react").JSX.Element;

package/lib/types/ui/textarea.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "./utils.js";
+/** A themed multi-line text area. */
+export function Textarea({ className, ...props }) {
+    return (_jsx("textarea", { className: cn('flex min-h-24 w-full rounded-md border border-input bg-transparent px-4 py-3 text-base', 'placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', 'disabled:cursor-not-allowed disabled:opacity-50', className), ...props }));
+}

package/lib/types/ui/theme.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Theme settings: the `ui.theme` settings.json row (a mode choice — the
+ * cobalt accent is fixed per mode) and its DOM application. The renderer
+ * resident that owns the 主题 settings page reads and writes the row; the
+ * `settings/changed` frame hot-applies it on every surface without a
+ * restart.
+ *
+ * @module @snap-rail/framework-shadcn/ui/theme
+ */
+import { z } from 'zod';
+/** settings.json key carrying the theme row. */
+export declare const THEME_SETTINGS_KEY = "ui.theme";
+/** The theme row; invalid stored rows fall back to {@link DEFAULT_THEME}. */
+export declare const themeSettingsSchema: z.ZodObject<{
+    mode: z.ZodEnum<{
+        system: "system";
+        light: "light";
+        dark: "dark";
+    }>;
+}, z.core.$strip>;
+/** Parsed theme row. */
+export type ThemeSettings = z.infer<typeof themeSettingsSchema>;
+/** Applied before any settings arrive; keeps the terminal dark as before. */
+export declare const DEFAULT_THEME: ThemeSettings;
+/** The mode a setting resolves to (`system` consults the OS preference). */
+export declare function resolveThemeMode(mode: ThemeSettings['mode'], prefersLight: boolean): 'light' | 'dark';
+/** Apply a theme row: sets `data-mode` on the document element (the token
+ * blocks in theme.css key off it). A missing matchMedia — as in tests —
+ * resolves `system` to dark. */
+export declare function applyTheme(document: Document, theme: ThemeSettings): void;

package/lib/types/ui/theme.js

@@ -0,0 +1,33 @@
+/**
+ * Theme settings: the `ui.theme` settings.json row (a mode choice — the
+ * cobalt accent is fixed per mode) and its DOM application. The renderer
+ * resident that owns the 主题 settings page reads and writes the row; the
+ * `settings/changed` frame hot-applies it on every surface without a
+ * restart.
+ *
+ * @module @snap-rail/framework-shadcn/ui/theme
+ */
+import { z } from 'zod';
+/** settings.json key carrying the theme row. */
+export const THEME_SETTINGS_KEY = 'ui.theme';
+/** The theme row; invalid stored rows fall back to {@link DEFAULT_THEME}. */
+export const themeSettingsSchema = z.object({
+    mode: z.enum(['system', 'light', 'dark']),
+});
+/** Applied before any settings arrive; keeps the terminal dark as before. */
+export const DEFAULT_THEME = { mode: 'dark' };
+/** The mode a setting resolves to (`system` consults the OS preference). */
+export function resolveThemeMode(mode, prefersLight) {
+    if (mode === 'system')
+        return prefersLight ? 'light' : 'dark';
+    return mode;
+}
+/** Apply a theme row: sets `data-mode` on the document element (the token
+ * blocks in theme.css key off it). A missing matchMedia — as in tests —
+ * resolves `system` to dark. */
+export function applyTheme(document, theme) {
+    const view = document.defaultView;
+    const prefersLight = view !== null && typeof view.matchMedia === 'function'
+        && view.matchMedia('(prefers-color-scheme: light)').matches;
+    document.documentElement.dataset.mode = resolveThemeMode(theme.mode, prefersLight);
+}

package/lib/types/ui/tooltip.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Tooltip: Radix tooltip wrapping its own provider so occupants mount it
+ * standalone (no app-level provider requirement).
+ *
+ * @module @snap-rail/framework-shadcn/ui/tooltip
+ */
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import type { ComponentProps, ReactNode } from 'react';
+/** Props of {@link Tooltip}. */
+export interface TooltipProps {
+    /** The tip text (or node). */
+    content: ReactNode;
+    /** The wrapped trigger; keeps its own markup. */
+    children: ReactNode;
+    /** Open delay in milliseconds; defaults near-instant for chrome controls. */
+    delay?: number;
+}
+/** Hover/focus tip over any trigger. */
+export declare function Tooltip({ content, children, delay }: TooltipProps): import("react").JSX.Element;
+/** Re-export the primitive root for direct composition. */
+export declare const TooltipRoot: import("react").FC<TooltipPrimitive.TooltipProps>;
+/** Props alias for content-side customization. */
+export type TooltipContentProps = ComponentProps<typeof TooltipPrimitive.Content>;

package/lib/types/ui/tooltip.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Tooltip: Radix tooltip wrapping its own provider so occupants mount it
+ * standalone (no app-level provider requirement).
+ *
+ * @module @snap-rail/framework-shadcn/ui/tooltip
+ */
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { cn } from "./utils.js";
+/** Hover/focus tip over any trigger. */
+export function Tooltip({ content, children, delay = 200 }) {
+    return (_jsx(TooltipPrimitive.Provider, { delayDuration: delay, children: _jsxs(TooltipPrimitive.Root, { children: [_jsx(TooltipPrimitive.Trigger, { asChild: true, children: children }), _jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Content, { sideOffset: 4, className: cn('z-50 rounded-md border border-border bg-popover px-2 py-1 text-xs text-popover-foreground'), children: content }) })] }) }));
+}
+/** Re-export the primitive root for direct composition. */
+export const TooltipRoot = TooltipPrimitive.Root;

package/lib/types/ui/touch-select.d.ts

@@ -0,0 +1,29 @@
+/**
+ * TouchSelect: a touch-first single-choice picker. The trigger opens a
+ * modal listing one full-width button row per option — no popover aiming,
+ * every row a 56px target; tapping a row commits and closes. Replaces
+ * dropdown selects across the touch terminal.
+ *
+ * @module @snap-rail/framework-shadcn/ui/touch-select
+ */
+import { type ReactNode } from 'react';
+/** One selectable row: `label`/`hint` render inside the list; `triggerLabel`
+ * is what the closed trigger summarizes (defaults to `label`). */
+export interface TouchSelectOption {
+    value: string;
+    label: ReactNode;
+    hint?: ReactNode;
+    triggerLabel?: ReactNode;
+    disabled?: boolean;
+}
+/** A modal-based picker: an outline trigger plus a Dialog list of rows. */
+export declare function TouchSelect(props: {
+    /** Field name; doubles as the trigger's aria-label and the modal title. */
+    label: string;
+    value: string;
+    options: readonly TouchSelectOption[];
+    onValueChange: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+}): ReactNode;

package/lib/types/ui/touch-select.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * TouchSelect: a touch-first single-choice picker. The trigger opens a
+ * modal listing one full-width button row per option — no popover aiming,
+ * every row a 56px target; tapping a row commits and closes. Replaces
+ * dropdown selects across the touch terminal.
+ *
+ * @module @snap-rail/framework-shadcn/ui/touch-select
+ */
+import { useState } from 'react';
+import { Button } from "./button.js";
+import { Dialog, DialogContent, DialogTitle } from "./dialog.js";
+import { DragScroll } from "./drag-scroll.js";
+import { cn } from "./utils.js";
+/** A chevron pointing up: the picker opens an upward modal, not a dropdown. */
+function ChevronUp() {
+    return (_jsx("svg", { viewBox: "0 0 12 12", className: "h-4 w-4 shrink-0 opacity-60", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "m2.5 7.5 3.5-3.5 3.5 3.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+/** The committed row's check mark, mirroring the Checkbox indicator stroke. */
+function CheckIcon() {
+    return (_jsx("svg", { viewBox: "0 0 12 12", className: "h-4 w-4 text-primary", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M2 6.5 4.8 9 10 3.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+/** A modal-based picker: an outline trigger plus a Dialog list of rows. */
+export function TouchSelect(props) {
+    const { label, value, options, onValueChange, placeholder = '请选择', disabled = false, className } = props;
+    const [open, setOpen] = useState(false);
+    const selected = options.find(option => option.value === value);
+    return (_jsxs(_Fragment, { children: [_jsxs(Button, { type: "button", variant: "outline", disabled: disabled, "aria-label": label, "data-touch-select-trigger": label, className: cn('h-12 w-full justify-between px-4 text-base font-normal', className), onClick: () => { setOpen(true); }, children: [selected === undefined
+                        ? _jsx("span", { className: "truncate text-muted-foreground", children: placeholder })
+                        : _jsx("span", { className: "min-w-0 truncate", children: selected.triggerLabel ?? selected.label }), _jsx(ChevronUp, {})] }), _jsx(Dialog, { open: open, onOpenChange: setOpen, children: _jsxs(DialogContent, { "aria-describedby": undefined, className: "max-w-md p-0", children: [_jsx("div", { className: "border-b border-border px-5 py-4", children: _jsx(DialogTitle, { className: "text-base font-medium", children: label }) }), _jsxs(DragScroll, { className: "max-h-[65vh] p-2", children: [options.length === 0 && (_jsx("div", { className: "px-4 py-6 text-center text-sm text-muted-foreground", children: "\u6682\u65E0\u9009\u9879" })), options.map(option => {
+                                    const isSelected = option.value === value;
+                                    return (_jsxs(Button, { type: "button", variant: "ghost", disabled: option.disabled, "data-option": option.value, "aria-pressed": isSelected, className: cn('h-14 w-full justify-between px-4 text-base font-normal', isSelected && 'bg-secondary channel-keyline'), onClick: () => {
+                                            onValueChange(option.value);
+                                            setOpen(false);
+                                        }, children: [_jsx("span", { className: "min-w-0 truncate", children: option.label }), _jsxs("span", { className: "flex shrink-0 items-center gap-2 text-sm text-muted-foreground", children: [option.hint, isSelected && _jsx(CheckIcon, {})] })] }, option.value));
+                                })] })] }) })] }));
+}

package/lib/types/ui/utils.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Class-name combiner: clsx joins, tailwind-merge resolves conflicting
+ * Tailwind utilities with the last one winning — the shadcn convention.
+ *
+ * @module @snap-rail/framework-shadcn/ui/utils
+ */
+import { type ClassValue } from 'clsx';
+/**
+ * Merge conditional class names into one Tailwind-aware string.
+ * @param inputs - class values (strings, arrays, conditional objects).
+ * @returns the merged class string.
+ */
+export declare function cn(...inputs: ClassValue[]): string;

package/lib/types/ui/utils.js

@@ -0,0 +1,16 @@
+/**
+ * Class-name combiner: clsx joins, tailwind-merge resolves conflicting
+ * Tailwind utilities with the last one winning — the shadcn convention.
+ *
+ * @module @snap-rail/framework-shadcn/ui/utils
+ */
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+/**
+ * Merge conditional class names into one Tailwind-aware string.
+ * @param inputs - class values (strings, arrays, conditional objects).
+ * @returns the merged class string.
+ */
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}