@vamos-ui/react 0.0.0-stage → 0.3.0

package/dist/components/list-layout.d.ts

@@ -0,0 +1,144 @@
+import * as React from "react";
+declare const listLabels: {
+    selected: string;
+    selectAll: string;
+    selectAllCount: string;
+    allSelected: string;
+    clear: string;
+    bulkActions: string;
+    filters: string;
+    filtersCount: string;
+    search: string;
+    view: string;
+    results: string;
+    loading: string;
+    refreshing: string;
+    noResults: string;
+    clearFilters: string;
+    error: string;
+    retry: string;
+};
+export type ListLayoutLabels = Partial<typeof listLabels>;
+export declare const listLayoutVariants: (props?: ({
+    width?: "content" | "full" | "wide" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ListLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** `full` (default) · `wide` 90rem · `content` 76rem. */
+    width?: "full" | "wide" | "content";
+    /** The toolbar (and the bulk bar that replaces it) stick under the top bar. Default `true`. */
+    stickyToolbar?: boolean;
+    /**
+     * Distance from the top of the scroll container where the toolbar sticks. Default
+     * `"var(--topbar-h)"` (under the App shell top bar). Use `0` inside your own scroll box.
+     */
+    stickyTop?: number | string;
+}
+/**
+ * The standard index page: Page header, toolbar (search, filters, saved views, view switch),
+ * bulk-action bar, content (table, grid or board) and footer pagination — with one consistent
+ * set of loading, empty, no-results and error states. Arrangement and states only: filtering,
+ * selection and data fetching stay in your Data Table / Filter bar / data layer.
+ *
+ * ```tsx
+ * <ListLayout>
+ *   <PageHeader title="Contacts" meta={<Badge>1,284</Badge>} actions={<Button variant="primary">New contact</Button>} />
+ *   <ListToolbar search={<Input … />} filters={<FilterBar … />} viewSwitch={<ListViewSwitch … />} />
+ *   <ListBulkBar count={selected.length} total={1284} onClear={clear}>…</ListBulkBar>
+ *   <ListContent state={state}>{table}</ListContent>
+ *   <ListFooter><PaginationBar … /></ListFooter>
+ * </ListLayout>
+ * ```
+ *
+ * Responds to its own width (container queries), so it behaves the same in a split view.
+ */
+export declare const ListLayout: React.ForwardRefExoticComponent<ListLayoutProps & React.RefAttributes<HTMLDivElement>>;
+export interface ListToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The search field. Wrapped in a `role="search"` landmark (only the search, not the whole bar). */
+    search?: React.ReactNode;
+    /** Filter chips / Filter bar. Below ~640px of width they move into a "Filters" sheet. */
+    filters?: React.ReactNode;
+    /** Number of active filters, shown on the collapsed "Filters (3)" button. */
+    filterCount?: number;
+    /** Saved views (tabs or a menu) — the first row on wide screens. */
+    views?: React.ReactNode;
+    /** Table / grid / board switch — `ListViewSwitch`. */
+    viewSwitch?: React.ReactNode;
+    /** Trailing actions: export, column settings, "⋯". */
+    actions?: React.ReactNode;
+    /** Accessible name of the search landmark. Default "Search". */
+    searchLabel?: string;
+    labels?: ListLayoutLabels;
+}
+/**
+ * The row above the content. Sticky under the top bar on the bar surface; while a selection is
+ * active the `ListBulkBar` takes its place.
+ */
+export declare const ListToolbar: React.ForwardRefExoticComponent<ListToolbarProps & React.RefAttributes<HTMLDivElement>>;
+export interface ListViewOption {
+    value: string;
+    label: string;
+    icon?: React.ReactNode;
+}
+export interface ListViewSwitchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "dir"> {
+    options: ListViewOption[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Accessible name of the group. Default "View". */
+    label?: string;
+    labels?: ListLayoutLabels;
+}
+/**
+ * Table / grid / board switch: a segmented radio group (one tab stop, arrow keys move, Space selects). Labels
+ * collapse to icons below ~640px of list width; the accessible name stays.
+ */
+export declare const ListViewSwitch: React.ForwardRefExoticComponent<ListViewSwitchProps & React.RefAttributes<HTMLDivElement>>;
+export interface ListBulkBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Selected rows. The bar shows while `count > 0` and takes the toolbar's place. */
+    count: number;
+    /** Rows across all pages. With `onSelectAll`, shows "Select all {total}". */
+    total?: number;
+    /** Extends the selection to every row that matches the current filters (all pages). */
+    onSelectAll?: () => void;
+    /** `true` once the selection covers all `total` rows ("All 1,284 selected"). */
+    allSelected?: boolean;
+    onClear: () => void;
+    /** Bulk actions (buttons, an ActionMenu). */
+    children?: React.ReactNode;
+    labels?: ListLayoutLabels;
+}
+/**
+ * The selection bar. Presentational: the Data Table (or your list) owns the selection. Announces
+ * "{n} selected" politely; Esc inside the bar clears the selection and focus returns to the toolbar.
+ */
+export declare const ListBulkBar: React.ForwardRefExoticComponent<ListBulkBarProps & React.RefAttributes<HTMLDivElement>>;
+/** What the content area shows. */
+export type ListContentState = "ready" | "loading" | "refreshing" | "empty" | "no-results" | "error";
+export interface ListContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    state?: ListContentState;
+    /** First-use empty state (nothing exists yet). Default: a generic `EmptyState`. */
+    empty?: React.ReactNode;
+    /** Filters match nothing. Default: `EmptyState kind="no-results"` with "Clear filters" when `onClearFilters` is set. */
+    noResults?: React.ReactNode;
+    /** Load failed. Default: `EmptyState kind="error"` with "Try again" when `onRetry` is set. */
+    error?: React.ReactNode;
+    onRetry?: () => void;
+    onClearFilters?: () => void;
+    /** Loading placeholder. Default: skeleton rows. */
+    skeleton?: React.ReactNode;
+    /** Skeleton rows for the default placeholder. Default 6. */
+    skeletonRows?: number;
+    /** Total results, announced politely when the list becomes ready ("1,284 results"). */
+    resultCount?: number;
+    labels?: ListLayoutLabels;
+}
+/**
+ * The content slot (table, grid or board) with every state. `refreshing` keeps the content and
+ * shows a thin indeterminate bar; all states set `aria-busy` while work is pending.
+ */
+export declare const ListContent: React.ForwardRefExoticComponent<ListContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface ListFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+/** The row under the content: `PaginationBar`, "Load more", a summary line. */
+export declare const ListFooter: React.ForwardRefExoticComponent<ListFooterProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/list-layout.js

@@ -0,0 +1,210 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
+import { cva } from "class-variance-authority";
+import { SlidersHorizontal, X } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { SrName } from "../lib/sr-name.js";
+import { useLabels } from "../lib/labels.js";
+import { useFormat } from "../lib/locale.js";
+import { Button } from "./button.js";
+import { EmptyState } from "./empty-state.js";
+import { Progress } from "./progress.js";
+import { SkeletonRow } from "./skeleton.js";
+import { Sheet, SheetBody, SheetContent, SheetHeader, SheetTrigger } from "./sheet.js";
+/* ------------------------------------------------------------------ */
+/* Labels & context                                                    */
+/* ------------------------------------------------------------------ */
+const listLabels = {
+    selected: "{count, plural, one {# selected} other {# selected}}",
+    selectAll: "Select all",
+    selectAllCount: "Select all {total}",
+    allSelected: "All {total} selected",
+    clear: "Clear selection",
+    bulkActions: "Bulk actions",
+    filters: "Filters",
+    filtersCount: "Filters ({count})",
+    search: "Search",
+    view: "View",
+    results: "{count, plural, one {# result} other {# results}}",
+    loading: "Loading…",
+    refreshing: "Updating results…",
+    noResults: "No results match your filters",
+    clearFilters: "Clear filters",
+    error: "Couldn't load this list",
+    retry: "Try again",
+};
+const ListLayoutContext = React.createContext(null);
+/* ------------------------------------------------------------------ */
+/* ListLayout                                                          */
+/* ------------------------------------------------------------------ */
+export const listLayoutVariants = cva("@container/list relative mx-auto flex w-full min-w-0 flex-col", {
+    variants: {
+        width: {
+            /** Edge to edge of the page area. */
+            full: "max-w-none",
+            /** 90rem — big tables and boards. */
+            wide: "max-w-(--container-wide)",
+            /** 76rem — most index pages. */
+            content: "max-w-(--container)",
+        },
+    },
+    defaultVariants: { width: "full" },
+});
+/**
+ * The standard index page: Page header, toolbar (search, filters, saved views, view switch),
+ * bulk-action bar, content (table, grid or board) and footer pagination — with one consistent
+ * set of loading, empty, no-results and error states. Arrangement and states only: filtering,
+ * selection and data fetching stay in your Data Table / Filter bar / data layer.
+ *
+ * ```tsx
+ * <ListLayout>
+ *   <PageHeader title="Contacts" meta={<Badge>1,284</Badge>} actions={<Button variant="primary">New contact</Button>} />
+ *   <ListToolbar search={<Input … />} filters={<FilterBar … />} viewSwitch={<ListViewSwitch … />} />
+ *   <ListBulkBar count={selected.length} total={1284} onClear={clear}>…</ListBulkBar>
+ *   <ListContent state={state}>{table}</ListContent>
+ *   <ListFooter><PaginationBar … /></ListFooter>
+ * </ListLayout>
+ * ```
+ *
+ * Responds to its own width (container queries), so it behaves the same in a split view.
+ */
+export const ListLayout = React.forwardRef(function ListLayout({ width = "full", stickyToolbar = true, stickyTop, className, style, ...props }, ref) {
+    const [bulkActive, setBulkActive] = React.useState(false);
+    const toolbarRef = React.useRef(null);
+    const ctx = React.useMemo(() => ({ stickyToolbar, bulkActive, setBulkActive, toolbarRef }), [stickyToolbar, bulkActive]);
+    const top = stickyTop === undefined ? undefined : typeof stickyTop === "number" ? `${stickyTop}px` : stickyTop;
+    return (_jsx(ListLayoutContext.Provider, { value: ctx, children: _jsx("div", { ref: ref, "data-slot": "list-layout", "data-bulk": bulkActive ? "" : undefined, className: cn(listLayoutVariants({ width }), className), style: top !== undefined ? { "--list-sticky-top": top, ...style } : style, ...props }) }));
+});
+const stickyBar = "sticky top-(--list-sticky-top,var(--topbar-h)) z-(--z-sticky)";
+/**
+ * The row above the content. Sticky under the top bar on the bar surface; while a selection is
+ * active the `ListBulkBar` takes its place.
+ */
+export const ListToolbar = React.forwardRef(function ListToolbar({ search, filters, filterCount, views, viewSwitch, actions, searchLabel, labels, className, children, ...props }, ref) {
+    const t = useLabels("list", listLabels, labels);
+    const ctx = React.useContext(ListLayoutContext);
+    const setRefs = React.useCallback((node) => {
+        if (ctx)
+            ctx.toolbarRef.current = node;
+        if (typeof ref === "function")
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    }, [ctx, ref]);
+    const hidden = ctx?.bulkActive ?? false;
+    const sticky = ctx?.stickyToolbar ?? false;
+    const filterLabel = filterCount ? t("filtersCount", { count: filterCount }) : t("filters");
+    return (_jsxs("div", { ref: setRefs, "data-slot": "list-toolbar", hidden: hidden || undefined, className: cn("flex flex-col gap-2.5 py-3", sticky && cn(stickyBar, "surface-bar -mx-[var(--page-px,1.5rem)] border-b px-[var(--page-px,1.5rem)]"), !sticky && "border-b border-line", className), ...props, children: [views ? _jsx("div", { "data-slot": "list-toolbar-views", className: "-mt-1 min-w-0", children: views }) : null, _jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [search ? (_jsx("div", { role: "search", "aria-label": searchLabel ?? t("search"), "data-slot": "list-toolbar-search", className: "min-w-0 flex-[1_1_10rem] @2xl/list:max-w-80", children: search })) : null, filters ? (_jsxs(_Fragment, { children: [_jsx("div", { "data-slot": "list-toolbar-filters", className: "order-last hidden w-full min-w-0 flex-wrap items-center gap-1.5 @2xl/list:flex @5xl/list:order-none @5xl/list:w-auto @5xl/list:flex-[1_1_0]", children: filters }), _jsxs(Sheet, { children: [_jsx(SheetTrigger, { asChild: true, children: _jsx(Button, { className: "@2xl/list:hidden", children: _jsxs(SrName, { name: filterLabel, children: [_jsx(SlidersHorizontal, { "aria-hidden": true }), _jsx("span", { className: "hidden @sm/list:inline", children: t("filters") }), filterCount ? (_jsx("span", { className: "tabular -me-1 inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-accent-soft px-1.5 text-[11px] font-semibold text-accent-ink", children: filterCount })) : null] }) }) }), _jsxs(SheetContent, { side: "end", size: "sm", children: [_jsx(SheetHeader, { title: t("filters") }), _jsx(SheetBody, { children: _jsx("div", { className: "flex flex-col items-stretch gap-2 [&>*]:w-full", children: filters }) })] })] })] })) : (_jsx("div", { className: "flex-1" })), viewSwitch || actions ? (_jsxs("div", { "data-slot": "list-toolbar-end", className: "ms-auto flex shrink-0 items-center gap-2", children: [viewSwitch, actions] })) : null] }), children] }));
+});
+/**
+ * Table / grid / board switch: a segmented radio group (one tab stop, arrow keys move, Space selects). Labels
+ * collapse to icons below ~640px of list width; the accessible name stays.
+ */
+export const ListViewSwitch = React.forwardRef(function ListViewSwitch({ options, value: valueProp, defaultValue, onValueChange, label, labels, className, ...props }, ref) {
+    const t = useLabels("list", listLabels, labels);
+    const [inner, setInner] = React.useState(defaultValue ?? options[0]?.value ?? "");
+    const value = valueProp ?? inner;
+    return (_jsx(ToggleGroupPrimitive.Root, { ref: ref, type: "single", "aria-label": label ?? t("view"), value: value, onValueChange: (next) => {
+            if (!next)
+                return; // a view switch always has a view
+            if (valueProp === undefined)
+                setInner(next);
+            onValueChange?.(next);
+        }, "data-slot": "list-view-switch", className: cn("inline-flex h-(--control-h) items-stretch gap-0.5 rounded-ui border border-line bg-surface-2 p-[3px]", className), ...props, children: options.map((o) => (_jsxs(ToggleGroupPrimitive.Item, { value: o.value, "aria-label": o.label, title: o.label, className: cn("inline-flex items-center gap-1.5 rounded-[calc(var(--radius)-5px)] px-2.5 text-[13px] font-medium text-fg-muted outline-none transition-[color,background-color,box-shadow] duration-150 focus-ring", "hover:text-fg data-[state=on]:bg-surface data-[state=on]:text-fg data-[state=on]:shadow-[0_1px_2px_rgb(0_0_0/0.1),0_0_0_1px_var(--line)] glass:data-[state=on]:bg-field", "[&_svg]:size-4 [&_svg]:shrink-0"), children: [o.icon ? _jsx("span", { "aria-hidden": true, className: "inline-flex", children: o.icon }) : null, _jsx("span", { className: cn(o.icon && "hidden @2xl/list:inline"), children: o.label })] }, o.value))) }));
+});
+/**
+ * The selection bar. Presentational: the Data Table (or your list) owns the selection. Announces
+ * "{n} selected" politely; Esc inside the bar clears the selection and focus returns to the toolbar.
+ */
+export const ListBulkBar = React.forwardRef(function ListBulkBar({ count, total, onSelectAll, allSelected, onClear, labels, className, children, onKeyDown, ...props }, ref) {
+    const t = useLabels("list", listLabels, labels);
+    const f = useFormat();
+    const ctx = React.useContext(ListLayoutContext);
+    const active = count > 0;
+    const setBulkActive = ctx?.setBulkActive;
+    const toolbarRef = ctx?.toolbarRef;
+    const restoreFocus = React.useRef(false);
+    React.useEffect(() => {
+        setBulkActive?.(active);
+        if (!active && restoreFocus.current) {
+            restoreFocus.current = false;
+            // After the toolbar is shown again, put focus back where the user was working.
+            requestAnimationFrame(() => {
+                const first = toolbarRef?.current?.querySelector("input, button:not([disabled]), [href], [tabindex]:not([tabindex='-1'])");
+                first?.focus();
+            });
+        }
+    }, [active, setBulkActive, toolbarRef]);
+    React.useEffect(() => () => setBulkActive?.(false), [setBulkActive]);
+    const clear = () => {
+        restoreFocus.current = true;
+        onClear();
+    };
+    const totalText = total !== undefined ? f.number(total) : "";
+    return (_jsxs(_Fragment, { children: [_jsx("div", { "aria-live": "polite", className: "sr-only", children: active ? (allSelected && total !== undefined ? t("allSelected", { total: totalText }) : t("selected", { count })) : "" }), active ? (_jsxs("div", { ref: ref, role: "region", "aria-label": t("bulkActions"), "data-slot": "list-bulk-bar", className: cn(ctx?.stickyToolbar && stickyBar, "ui-rise my-2 flex min-h-(--control-h) flex-wrap items-center gap-x-3 gap-y-2 rounded-ui-lg py-1.5 ps-1.5 pe-1.5 surface-popover", className), onKeyDown: (e) => {
+                    onKeyDown?.(e);
+                    if (!e.defaultPrevented && e.key === "Escape") {
+                        e.preventDefault();
+                        clear();
+                    }
+                }, ...props, children: [_jsx("span", { className: "tabular inline-flex h-[calc(var(--control-h)-0.75rem)] items-center rounded-[calc(var(--radius)-4px)] bg-accent-soft px-2.5 text-[13px] font-semibold text-accent-ink", children: allSelected && total !== undefined ? t("allSelected", { total: totalText }) : t("selected", { count }) }), onSelectAll && total !== undefined && total > count && !allSelected ? (_jsx(Button, { variant: "link", size: "sm", onClick: onSelectAll, className: "text-[13px]", children: t("selectAllCount", { total: totalText }) })) : null, _jsxs("div", { className: "ms-auto flex flex-wrap items-center gap-1.5", children: [children, _jsx("span", { "aria-hidden": true, className: "mx-0.5 h-5 w-px bg-line" }), _jsxs(Button, { variant: "ghost", size: "sm", onClick: clear, "aria-keyshortcuts": "Escape", children: [_jsx(X, { "aria-hidden": true }), " ", _jsx("span", { className: "hidden @md/list:inline", children: t("clear") }), _jsx("span", { className: "sr-only @md/list:hidden", children: t("clear") })] })] })] })) : null] }));
+});
+/**
+ * The content slot (table, grid or board) with every state. `refreshing` keeps the content and
+ * shows a thin indeterminate bar; all states set `aria-busy` while work is pending.
+ */
+export const ListContent = React.forwardRef(function ListContent({ state = "ready", empty, noResults, error, onRetry, onClearFilters, skeleton, skeletonRows = 6, resultCount, labels, className, children, ...props }, ref) {
+    const t = useLabels("list", listLabels, labels);
+    const busy = state === "loading" || state === "refreshing";
+    // Announce state changes once (not on every render).
+    const [announcement, setAnnouncement] = React.useState("");
+    const prev = React.useRef(null);
+    React.useEffect(() => {
+        if (prev.current === null) {
+            prev.current = state;
+            return;
+        }
+        if (prev.current === state)
+            return;
+        prev.current = state;
+        if (state === "loading")
+            setAnnouncement(t("loading"));
+        else if (state === "refreshing")
+            setAnnouncement(t("refreshing"));
+        else if (state === "no-results")
+            setAnnouncement(t("noResults"));
+        else if (state === "error")
+            setAnnouncement(t("error"));
+        else if (state === "ready" && resultCount !== undefined)
+            setAnnouncement(t("results", { count: resultCount }));
+        else
+            setAnnouncement("");
+    }, [state, resultCount, t]);
+    let body;
+    if (state === "loading") {
+        body = skeleton ?? (_jsx("div", { "data-slot": "list-skeleton", className: "divide-y divide-line overflow-hidden rounded-ui-lg border border-line", children: Array.from({ length: skeletonRows }, (_, i) => (_jsx(SkeletonRow, { columns: 4 }, i))) }));
+    }
+    else if (state === "empty") {
+        body = empty ?? _jsx(EmptyState, { kind: "first-use", size: "lg" });
+    }
+    else if (state === "no-results") {
+        body =
+            noResults ??
+                (_jsx(EmptyState, { kind: "no-results", role: "none", title: t("noResults"), actions: onClearFilters ? _jsx(Button, { onClick: onClearFilters, children: t("clearFilters") }) : undefined }));
+    }
+    else if (state === "error") {
+        body =
+            error ??
+                (_jsx(EmptyState, { kind: "error", title: t("error"), actions: onRetry ? _jsx(Button, { onClick: onRetry, children: t("retry") }) : undefined }));
+    }
+    else {
+        body = children;
+    }
+    return (_jsxs("div", { ref: ref, "data-slot": "list-content", "data-state": state, "aria-busy": busy || undefined, className: cn("relative min-w-0 flex-1 py-4", className), ...props, children: [state === "refreshing" ? (_jsx(Progress, { "aria-label": t("refreshing"), value: null, size: "xs", className: "absolute inset-x-0 top-0 rounded-none bg-transparent" })) : null, _jsx("div", { className: cn(state === "refreshing" && "opacity-70 transition-opacity motion-reduce:transition-none"), children: body }), _jsx("div", { "aria-live": "polite", role: "status", className: "sr-only", children: announcement })] }));
+});
+/** The row under the content: `PaginationBar`, "Load more", a summary line. */
+export const ListFooter = React.forwardRef(function ListFooter({ className, ...props }, ref) {
+    return _jsx("div", { ref: ref, "data-slot": "list-footer", className: cn("flex flex-wrap items-center gap-3 border-t border-line pt-3 pb-1", className), ...props });
+});

package/dist/components/native-select.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+/** One option of the `NativeSelect` `items` shorthand. */
+export interface NativeSelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    /** Options with the same `group` render inside one `<optgroup>`. */
+    group?: string;
+}
+export interface NativeSelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "size"> {
+    size?: "sm" | "md" | "lg";
+    /** `"default"` field look · `"ghost"` borderless · `"pill"` rounded. */
+    variant?: "default" | "ghost" | "pill";
+    invalid?: boolean;
+    /** Disabled, empty first option shown until the user picks (use with `required` and `defaultValue=""`). */
+    placeholder?: string;
+    /** Options shorthand; or pass `<option>` / `<optgroup>` children. */
+    items?: NativeSelectOption[];
+    /** Classes for the `<select>`; `className` goes on the wrapper. */
+    selectClassName?: string;
+}
+/**
+ * A styled native `<select>` — the platform picker on phones, zero JavaScript to open, and the
+ * native contract (`value` / `defaultValue` / `onChange(event)`). Use it for mobile-heavy website
+ * forms (booking, contact, checkout). Same box as Input and Select.
+ *
+ * ```tsx
+ * <Field label="Country">
+ *   <NativeSelect name="country" defaultValue="" placeholder="Choose a country" required items={countries} />
+ * </Field>
+ * ```
+ */
+export declare const NativeSelect: React.ForwardRefExoticComponent<NativeSelectProps & React.RefAttributes<HTMLSelectElement>>;

package/dist/components/native-select.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useFieldControl } from "../lib/field-context.js";
+import { controlVariants } from "../lib/variants.js";
+/**
+ * A styled native `<select>` — the platform picker on phones, zero JavaScript to open, and the
+ * native contract (`value` / `defaultValue` / `onChange(event)`). Use it for mobile-heavy website
+ * forms (booking, contact, checkout). Same box as Input and Select.
+ *
+ * ```tsx
+ * <Field label="Country">
+ *   <NativeSelect name="country" defaultValue="" placeholder="Choose a country" required items={countries} />
+ * </Field>
+ * ```
+ */
+export const NativeSelect = React.forwardRef(function NativeSelect({ className, selectClassName, size = "md", variant = "default", invalid, placeholder, items, children, ...rest }, ref) {
+    const props = useFieldControl({ ...rest, "aria-invalid": invalid ? true : rest["aria-invalid"] });
+    const { readOnly, ...selectProps } = props;
+    let options = children;
+    if (items) {
+        const groups = new Map();
+        for (const item of items) {
+            const key = item.group ?? "";
+            groups.set(key, [...(groups.get(key) ?? []), item]);
+        }
+        options = [...groups.entries()].map(([group, list]) => {
+            const opts = list.map((o) => (_jsx("option", { value: o.value, disabled: o.disabled, children: o.label }, o.value)));
+            return group ? (_jsx("optgroup", { label: group, children: opts }, group)) : (_jsx(React.Fragment, { children: opts }, "_"));
+        });
+    }
+    return (_jsxs("div", { "data-slot": "native-select", "data-size": size, "data-readonly": readOnly ? "" : undefined, className: cn(controlVariants({ size, variant: variant === "pill" ? "default" : variant, pill: variant === "pill" }), "gap-0 px-0", className), children: [_jsxs("select", { ref: ref, ...selectProps, "aria-readonly": readOnly || undefined, onChange: readOnly ? undefined : selectProps.onChange, onKeyDown: (e) => {
+                    if (readOnly && e.key !== "Tab")
+                        e.preventDefault();
+                    selectProps.onKeyDown?.(e);
+                }, onMouseDown: (e) => {
+                    if (readOnly)
+                        e.preventDefault();
+                    selectProps.onMouseDown?.(e);
+                }, className: cn("h-full w-full min-w-0 cursor-pointer appearance-none truncate rounded-[inherit] bg-transparent text-[length:inherit] text-fg outline-none", "disabled:cursor-not-allowed [&:has(option[value='']:checked)]:text-fg-subtle", size === "sm" ? "ps-2.5 pe-7" : size === "lg" ? "ps-3.5 pe-10" : "ps-3 pe-9", 
+                // the dropdown list itself uses the system colours
+                "[&_option]:bg-popover [&_option]:text-fg", readOnly && "cursor-default", selectClassName), children: [placeholder !== undefined ? (
+                    // Hidden, not disabled: a disabled selected option is painted as GrayText (fails 4.5:1);
+                    // an empty value still fails `required`, and the list no longer offers it as a choice.
+                    _jsx("option", { value: "", hidden: true, children: placeholder })) : null, options] }), readOnly ? null : (_jsx(ChevronDown, { "aria-hidden": true, className: cn("pointer-events-none absolute text-fg-subtle", size === "sm" ? "end-2.5" : size === "lg" ? "end-3.5" : "end-3") }))] }));
+});

package/dist/components/navigation-menu.d.ts

@@ -0,0 +1,127 @@
+import * as React from "react";
+import { NavigationMenu as RadixNav } from "radix-ui";
+declare const navLabels: {
+    label: string;
+    open: string;
+    close: string;
+    title: string;
+};
+type NavLabels = Partial<typeof navLabels>;
+/**
+ * A site navigation entry. One source for the desktop `NavigationMenu` and the mobile `MobileNav`.
+ * `children` makes it a dropdown; `featured` adds a highlighted card to the panel.
+ */
+export interface SiteNavItem {
+    id?: string;
+    label: string;
+    href?: string;
+    description?: string;
+    icon?: React.ReactNode;
+    children?: SiteNavItem[];
+    /** Panel layout for an item with children. Default `"list"`. */
+    layout?: NavigationMenuLayout;
+    /** `layout="featured"`: the highlighted card on the start side of the panel. */
+    featured?: {
+        title: string;
+        description?: string;
+        href: string;
+        eyebrow?: string;
+    };
+}
+type NavigationMenuLayout = "list" | "grid-2" | "featured";
+export interface NavigationMenuProps extends React.ComponentPropsWithoutRef<typeof RadixNav.Root> {
+    /** `bar` (in a header, default) or `floating` (glass pill). */
+    variant?: "bar" | "floating";
+    /** Render the shared animated panel (`NavigationMenuViewport`). Default `true`; `false` drops each panel under its trigger. */
+    viewport?: boolean;
+    /** Data-driven menu. Or compose `NavigationMenuList` children yourself. */
+    items?: SiteNavItem[];
+    labels?: NavLabels;
+}
+/**
+ * A website's top navigation, including mega menus (Radix NavigationMenu: disclosure-based site
+ * navigation with hover intent, arrow keys and Escape). Admin panels use Sidebar instead.
+ *
+ * ```tsx
+ * <NavigationMenu items={nav} />                 // data-driven
+ * <NavigationMenu>
+ *   <NavigationMenuList>
+ *     <NavigationMenuItem>
+ *       <NavigationMenuTrigger>Products</NavigationMenuTrigger>
+ *       <NavigationMenuContent layout="grid-2">
+ *         <NavigationMenuLink href="/vtag" title="vTag" description="NFC business cards" />
+ *       </NavigationMenuContent>
+ *     </NavigationMenuItem>
+ *     <NavigationMenuItem><NavigationMenuLink href="/pricing" variant="top">Pricing</NavigationMenuLink></NavigationMenuItem>
+ *   </NavigationMenuList>
+ * </NavigationMenu>
+ * ```
+ */
+export declare const NavigationMenu: React.ForwardRefExoticComponent<NavigationMenuProps & React.RefAttributes<HTMLElement>>;
+/** The row of top-level items. */
+export declare const NavigationMenuList: React.ForwardRefExoticComponent<Omit<RadixNav.NavigationMenuListProps & React.RefAttributes<HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
+/** One top-level item (a trigger + content, or a plain link). */
+export declare const NavigationMenuItem: React.ForwardRefExoticComponent<Omit<RadixNav.NavigationMenuItemProps & React.RefAttributes<HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+/** Opens a panel. Hover (with intent delay), click, Enter/Space or ↓. */
+export declare const NavigationMenuTrigger: React.ForwardRefExoticComponent<Omit<RadixNav.NavigationMenuTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export interface NavigationMenuContentProps extends React.ComponentPropsWithoutRef<typeof RadixNav.Content> {
+    /** `list` (one column) · `grid-2` (two columns) · `featured` (highlight card + list). */
+    layout?: NavigationMenuLayout;
+    /** Without the shared viewport: render the panel as its own popover under the trigger. */
+    inline?: boolean;
+}
+/** The panel of an item. */
+export declare const NavigationMenuContent: React.ForwardRefExoticComponent<NavigationMenuContentProps & React.RefAttributes<HTMLDivElement>>;
+/** The shared, animated container all panels render into. Rendered by `NavigationMenu` unless `viewport={false}`. */
+export declare const NavigationMenuViewport: React.ForwardRefExoticComponent<Omit<RadixNav.NavigationMenuViewportProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/** A list of links inside a panel (`ul`). */
+export declare const NavigationMenuGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLUListElement> & {
+    heading?: React.ReactNode;
+} & React.RefAttributes<HTMLUListElement>>;
+export interface NavigationMenuLinkProps extends Omit<React.ComponentPropsWithoutRef<typeof RadixNav.Link>, "title" | "href"> {
+    href: string;
+    /** `panel` (rich link in a panel, default) or `top` (a top-level link in the bar). */
+    variant?: "panel" | "top";
+    /** Panel links: the bold line. Falls back to `children`. */
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: React.ReactNode;
+    /** Current page. Default: derived from `currentPath` (VamosProvider). */
+    active?: boolean;
+}
+/** A link — in the bar (`variant="top"`) or in a panel with icon and description. Uses the app's router `Link`. */
+export declare const NavigationMenuLink: React.ForwardRefExoticComponent<NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+/** The highlighted card of a `featured` panel. */
+export declare function NavigationMenuFeatured({ title, description, href, eyebrow, className }: {
+    title: string;
+    description?: string;
+    href: string;
+    eyebrow?: string;
+    className?: string;
+}): React.JSX.Element;
+/** Optional arrow under the open trigger. */
+export declare const NavigationMenuIndicator: React.ForwardRefExoticComponent<Omit<RadixNav.NavigationMenuIndicatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface MobileNavProps {
+    items: SiteNavItem[];
+    /** Extra content at the bottom of the sheet (CTA buttons, language switch). */
+    footer?: React.ReactNode;
+    /** Brand or title shown in the sheet header. Default "Menu". */
+    title?: React.ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Class names for the trigger button. Hide it on desktop, e.g. `"md:hidden"`. */
+    className?: string;
+    labels?: NavLabels;
+}
+/**
+ * The mobile counterpart of `NavigationMenu`: a menu button that opens a side sheet with the same
+ * items, groups as an accordion. Following a link closes the sheet.
+ *
+ * ```tsx
+ * <NavigationMenu items={nav} className="max-md:hidden" />
+ * <MobileNav items={nav} className="md:hidden" footer={<Button variant="primary" block>Book a demo</Button>} />
+ * ```
+ */
+export declare function MobileNav({ items, footer, title, open, defaultOpen, onOpenChange, className, labels }: MobileNavProps): React.JSX.Element;
+export {};