@gusnips/react 0.1.0

package/dist/states.d.ts

@@ -0,0 +1,69 @@
+import type { ReactNode } from "react";
+/**
+ * The two contracts that make "never dead-end the user" a compile error instead of a rule
+ * somebody remembers.
+ *
+ * **No component ships here, on purpose.** Seven repos have an `EmptyState.tsx` and an
+ * `ErrorState.tsx`, and read side by side they overlap 9–37%: one draws a tinted icon badge,
+ * one a branded illustration set, one a mascot. What they genuinely share is the PROP SHAPE —
+ * which is the rule itself, and the only part a package can hold without deciding how eight
+ * brands look. Same reasoning as the styled Button: share behaviour, skin per product.
+ *
+ * Import the type, write your own component against it, and the compiler enforces the rest.
+ */
+/**
+ * A panel with nothing in it yet.
+ *
+ * The prop shape IS the rule: somebody who lands here must learn what this panel is FOR
+ * (`title`), what belongs IN it (`description`), and how to FILL it (`action`). The first two
+ * are required because two of the three are what make it an orientation rather than a shrug.
+ * `action` is optional only because some panels fill themselves once a job upstream finishes.
+ */
+export interface EmptyStateProps {
+    /** What this panel is for. "No lookups yet" — not "No results". */
+    title: string;
+    /** What belongs here, and what it will show once it does. */
+    description: ReactNode;
+    /** The way forward, as a control. Usually one button. */
+    action?: ReactNode;
+    /**
+     * `3` inside a panel that already sits under a page heading — the default and the common
+     * case. `1` when this composer IS the page (a 404, a suspended account), which otherwise
+     * ships a document with no `h1` in it at all.
+     *
+     * Only one donor had this, and it is the difference between a screen reader announcing a
+     * page and announcing nothing.
+     */
+    headingLevel?: 1 | 2 | 3;
+    className?: string;
+}
+/**
+ * Something did not work.
+ *
+ * `problem` names what failed, `cause` says why it most likely happened, `fix` says what to do
+ * about it, and `action` is that fix as a control. **`fix` and `action` are both required** — a
+ * required prop is the only version of "never dead-end" that a caller in a hurry cannot skip,
+ * and the donor that made them required is the one whose error screens all have a way out.
+ *
+ * Not a place for a stack trace. `cause` is what a person can act on ("the site answered too
+ * slowly"), with the request id, if there is one, alongside it in `reference`.
+ *
+ * {@link DescribedError} from `describe-error.ts` produces `cause` and `fix` from a thrown
+ * `ApiError`, which is the seam these two were designed against.
+ */
+export interface ErrorStateProps {
+    /** What failed, in the reader's words. "Couldn't load your numbers". */
+    problem: string;
+    /** Why it most likely happened. */
+    cause?: ReactNode;
+    /** The way forward, in words. */
+    fix: ReactNode;
+    /** The way forward, as a control — usually a retry button. */
+    action: ReactNode;
+    /** A request id or code, for a support thread. Set in mono, never shouted. */
+    reference?: ReactNode;
+    /** See {@link EmptyStateProps.headingLevel}. */
+    headingLevel?: 1 | 2 | 3;
+    className?: string;
+}
+//# sourceMappingURL=states.d.ts.map

package/dist/states.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"states.d.ts","sourceRoot":"","sources":["../src/states.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;;;;;;;;GAWG;AAEH;;;;;;;GAOG;AACH,MAAM,WAAW,eAAe;IAC9B,mEAAmE;IACnE,KAAK,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,WAAW,EAAE,SAAS,CAAC;IACvB,yDAAyD;IACzD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,eAAe;IAC9B,wEAAwE;IACxE,OAAO,EAAE,MAAM,CAAC;IAChB,mCAAmC;IACnC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,iCAAiC;IACjC,GAAG,EAAE,SAAS,CAAC;IACf,8DAA8D;IAC9D,MAAM,EAAE,SAAS,CAAC;IAClB,8EAA8E;IAC9E,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,gDAAgD;IAChD,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/states.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=states.js.map

package/dist/states.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"states.js","sourceRoot":"","sources":["../src/states.ts"],"names":[],"mappings":""}

package/dist/ui/class-name.d.ts

@@ -0,0 +1,16 @@
+import type { ClassValue } from "clsx";
+/**
+ * A Base UI part's `className`: a plain string, or a function of that part's own state
+ * (`open`, `transitionStatus`, `highlighted`, …).
+ */
+export type StateClassName<State> = string | ((state: State) => string | undefined) | undefined;
+/**
+ * Merge a wrapper's own classes with the caller's, keeping BOTH forms working.
+ *
+ * `cn()` on its own silently DROPS the function form — clsx walks strings, arrays and plain
+ * objects, and a function is none of the three — so a caller styling by `open` or
+ * `transitionStatus` would get an empty class and no warning. Always returning a function
+ * keeps one code path for both.
+ */
+export declare function mergeClassName<State>(base: ClassValue, extra: StateClassName<State>): (state: State) => string;
+//# sourceMappingURL=class-name.d.ts.map

package/dist/ui/class-name.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"class-name.d.ts","sourceRoot":"","sources":["../../src/ui/class-name.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAGvC;;;GAGG;AACH,MAAM,MAAM,cAAc,CAAC,KAAK,IAAI,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,KAAK,MAAM,GAAG,SAAS,CAAC,GAAG,SAAS,CAAC;AAEhG;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAClC,IAAI,EAAE,UAAU,EAChB,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,GAC3B,CAAC,KAAK,EAAE,KAAK,KAAK,MAAM,CAE1B"}

package/dist/ui/class-name.js

@@ -0,0 +1,13 @@
+import { cn } from "../cn.js";
+/**
+ * Merge a wrapper's own classes with the caller's, keeping BOTH forms working.
+ *
+ * `cn()` on its own silently DROPS the function form — clsx walks strings, arrays and plain
+ * objects, and a function is none of the three — so a caller styling by `open` or
+ * `transitionStatus` would get an empty class and no warning. Always returning a function
+ * keeps one code path for both.
+ */
+export function mergeClassName(base, extra) {
+    return (state) => cn(base, typeof extra === "function" ? extra(state) : extra);
+}
+//# sourceMappingURL=class-name.js.map

package/dist/ui/class-name.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"class-name.js","sourceRoot":"","sources":["../../src/ui/class-name.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,MAAM,UAAU,CAAC;AAQ9B;;;;;;;GAOG;AACH,MAAM,UAAU,cAAc,CAC5B,IAAgB,EAChB,KAA4B;IAE5B,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;AACjF,CAAC"}

package/dist/ui/combobox.d.ts

@@ -0,0 +1,81 @@
+import { Combobox as Primitive } from "@base-ui/react/combobox";
+import { type ReactNode } from "react";
+import { type StateClassName } from "./class-name.ts";
+export declare const ComboboxRoot: typeof Primitive.Root;
+export declare const ComboboxInput: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").AutocompleteInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export declare const ComboboxInputGroup: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").ComboboxInputGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ComboboxTrigger: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").ComboboxTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const ComboboxClear: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").AutocompleteClearProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const ComboboxPortal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").AutocompletePortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ComboboxPositioner: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").AutocompletePositionerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ComboboxPopup: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").AutocompletePopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ComboboxList: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").AutocompleteListProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ComboboxItem: import("react").NamedExoticComponent<Omit<import("@base-ui/react").ComboboxItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ComboboxEmpty: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").AutocompleteEmptyProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ComboboxGroup: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").AutocompleteGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ComboboxGroupLabel: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").AutocompleteGroupLabelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * What the input shows: the QUERY while the list is open, the selected item's LABEL while it
+ * is closed.
+ *
+ * The two are different strings and swapping them is the whole job. Show the label while
+ * typing and every keystroke is overwritten by the old selection; show the query while
+ * closed and the field goes blank the moment focus leaves, even though a value is set.
+ */
+export declare function comboboxInputValue<T>(open: boolean, query: string, value: T | null, getLabel: (item: T) => string): string;
+/** A loading state needs the line that says so — there is no default, and no English. */
+type ComboboxLoadingState = {
+    loading: boolean;
+    loadingHint: ReactNode;
+} | {
+    loading?: undefined;
+    loadingHint?: undefined;
+};
+export type ComboboxProps<T> = Omit<Primitive.Root.Props<T, false, T>, "children" | "items" | "filteredItems" | "filter" | "value" | "defaultValue" | "multiple" | "open" | "defaultOpen" | "inputValue" | "defaultInputValue" | "onInputValueChange" | "itemToStringLabel" | "isItemEqualToValue"> & {
+    value: T | null;
+    /**
+     * Items for the current query. Filtering is yours: this passes `filter={null}` to Base UI,
+     * so the list shows exactly what you return — a server search, a fuzzy match, a bounded
+     * page. Bound it here if it needs bounding; there is no cap in the wrapper, because a cap
+     * would quietly truncate a list a caller meant to show whole.
+     */
+    search: (query: string) => readonly T[];
+    /** Stable identity of an item: its React key, and how two items are compared. */
+    getKey: (item: T) => string;
+    /** The item's text — what the input shows once it is picked, and what typeahead matches. */
+    getLabel: (item: T) => string;
+    renderItem?: (item: T) => ReactNode;
+    /**
+     * Shown when the query matches nothing. Required: "no results" with no next step is a dead
+     * end, and this is the line that offers one.
+     */
+    emptyHint: ReactNode;
+    /** Label for the clear button. Required — it is a button with an icon and no text. */
+    clearLabel: string;
+    /** Label for the button that opens the list. Required, same reason. */
+    openLabel: string;
+    /** Accessible name for the input, when no visible label points at it. */
+    label?: string;
+    leadingIcon?: ReactNode;
+    /** Classes for the input itself. */
+    className?: StateClassName<Primitive.Input.State>;
+    popupClassName?: StateClassName<Primitive.Popup.State>;
+    inputProps?: Primitive.Input.Props;
+    /**
+     * Positioner props — `align`, `side`, `sideOffset`, `collisionPadding`, and the stacking
+     * order. The default `z-[60]` puts the list above the overlay layer (z-50: dialog, drawer);
+     * raise it with `positionerProps={{ className: "z-[80]" }}` if the app stacks something
+     * higher than a dialog above it.
+     */
+    positionerProps?: Primitive.Positioner.Props;
+} & ComboboxLoadingState;
+/**
+ * A text field that filters a list. `name`, `form`, `required`, `id` and `disabled` pass
+ * straight through to the root, so it submits inside a `<form>`.
+ *
+ * Controlled only: the wrapper owns `open` and the input value, because those two are what
+ * the label/query bridge is made of.
+ */
+export declare function Combobox<T>({ value, search, getKey, getLabel, renderItem, emptyHint, loading, loadingHint, clearLabel, openLabel, label, leadingIcon, className, popupClassName, inputProps, positionerProps, onOpenChange, ...rest }: ComboboxProps<T>): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=combobox.d.ts.map

package/dist/ui/combobox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../src/ui/combobox.tsx"],"names":[],"mappings":"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"}

package/dist/ui/combobox.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Combobox as Primitive } from "@base-ui/react/combobox";
+import { useMemo, useState } from "react";
+import { mergeClassName } from "./class-name.js";
+import { ChevronGlyph, CloseGlyph } from "./glyphs.js";
+// The parts, for a combobox this wrapper's shape cannot express — multi-select with chips,
+// groups, a virtualised list.
+export const ComboboxRoot = Primitive.Root;
+export const ComboboxInput = Primitive.Input;
+export const ComboboxInputGroup = Primitive.InputGroup;
+export const ComboboxTrigger = Primitive.Trigger;
+export const ComboboxClear = Primitive.Clear;
+export const ComboboxPortal = Primitive.Portal;
+export const ComboboxPositioner = Primitive.Positioner;
+export const ComboboxPopup = Primitive.Popup;
+export const ComboboxList = Primitive.List;
+export const ComboboxItem = Primitive.Item;
+export const ComboboxEmpty = Primitive.Empty;
+export const ComboboxGroup = Primitive.Group;
+export const ComboboxGroupLabel = Primitive.GroupLabel;
+/**
+ * What the input shows: the QUERY while the list is open, the selected item's LABEL while it
+ * is closed.
+ *
+ * The two are different strings and swapping them is the whole job. Show the label while
+ * typing and every keystroke is overwritten by the old selection; show the query while
+ * closed and the field goes blank the moment focus leaves, even though a value is set.
+ */
+export function comboboxInputValue(open, query, value, getLabel) {
+    if (open)
+        return query;
+    return value === null ? "" : getLabel(value);
+}
+/**
+ * A text field that filters a list. `name`, `form`, `required`, `id` and `disabled` pass
+ * straight through to the root, so it submits inside a `<form>`.
+ *
+ * Controlled only: the wrapper owns `open` and the input value, because those two are what
+ * the label/query bridge is made of.
+ */
+export function Combobox({ value, search, getKey, getLabel, renderItem, emptyHint, loading, loadingHint, clearLabel, openLabel, label, leadingIcon, className, popupClassName, inputProps, positionerProps, onOpenChange, ...rest }) {
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState("");
+    const items = useMemo(() => search(query), [query, search]);
+    return (_jsxs(Primitive.Root, { value: value, items: items, open: open, itemToStringLabel: getLabel, isItemEqualToValue: (left, right) => getKey(left) === getKey(right), 
+        // `null` hands filtering to `search`. Base UI's own filter would run a SECOND pass over
+        // an already-filtered list, so a server that matched on something the label does not
+        // contain — an id, a phone number, an accent-stripped name — would return rows the
+        // client then threw away.
+        filter: null, inputValue: comboboxInputValue(open, query, value, getLabel), onInputValueChange: (next) => {
+            setQuery(next);
+            if (!open)
+                setOpen(true);
+        }, onOpenChange: (next, details) => {
+            setOpen(next);
+            // A fresh open starts from the whole list, not from whatever was typed last time.
+            if (next)
+                setQuery("");
+            onOpenChange?.(next, details);
+        }, ...rest, children: [_jsxs(Primitive.InputGroup, { className: "relative", children: [leadingIcon ? (_jsx("span", { className: "pointer-events-none absolute top-1/2 left-3 z-10 -translate-y-1/2 text-muted-foreground", children: leadingIcon })) : null, _jsx(Primitive.Input, { "aria-label": label, autoComplete: "off", ...inputProps, className: mergeClassName([
+                            // No focus style: the field keeps the app's one `:focus-visible` outline. Swapping
+                            // it for a `ring-*` loses forced-colors mode, where a box-shadow is forced to none.
+                            "w-full min-w-0 rounded-md border border-input bg-background py-2 pr-16 pl-3 text-base text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 md:text-sm",
+                            leadingIcon && "pl-9",
+                        ], 
+                        // The caller's classes land BEFORE the space reserved for the buttons is
+                        // re-applied below, so a `px-*` of their own cannot swallow it.
+                        className) }), _jsxs("span", { className: "absolute top-1/2 right-1.5 z-10 flex -translate-y-1/2 items-center gap-0.5", children: [_jsx(Primitive.Clear, { "aria-label": clearLabel, className: "inline-flex rounded-full p-1.5 text-muted-foreground", children: _jsx(CloseGlyph, {}) }), _jsx(Primitive.Trigger, { "aria-label": openLabel, className: "inline-flex rounded-full p-1.5 text-muted-foreground", children: _jsx(ChevronGlyph, {}) })] })] }), _jsx(Primitive.Portal, { children: _jsx(Primitive.Positioner, { sideOffset: 4, ...positionerProps, className: mergeClassName("z-[60] max-w-[var(--available-width)] outline-none", positionerProps?.className), children: _jsxs(Primitive.Popup, { className: mergeClassName("w-[var(--anchor-width)] overflow-hidden border border-border bg-popover text-popover-foreground outline-none transition-[scale,opacity] data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0", popupClassName), children: [_jsx(Primitive.Empty, { children: _jsx("div", { className: "px-3 py-2 text-muted-foreground", children: loading ? loadingHint : emptyHint }) }), _jsx(Primitive.List, { className: "max-h-[var(--available-height)] overflow-y-auto", children: (item) => (_jsx(Primitive.Item, { value: item, className: "cursor-default px-3 py-2 outline-none data-highlighted:bg-accent data-highlighted:text-accent-foreground", children: renderItem ? renderItem(item) : getLabel(item) }, getKey(item))) })] }) }) })] }));
+}
+//# sourceMappingURL=combobox.js.map

package/dist/ui/combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.js","sourceRoot":"","sources":["../../src/ui/combobox.tsx"],"names":[],"mappings":"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"}

package/dist/ui/dialog.d.ts

@@ -0,0 +1,39 @@
+import { Dialog as Primitive } from "@base-ui/react/dialog";
+import { type StateClassName } from "./class-name.ts";
+export declare const Dialog: <Payload>(props: Primitive.Root.Props<Payload>) => React.JSX.Element;
+export declare const DialogTrigger: Primitive.Trigger;
+export declare const DialogTitle: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogTitleProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+export declare const DialogDescription: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogDescriptionProps, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+export declare const DialogClose: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogCloseProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const DialogPortal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DialogBackdrop: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogBackdropProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DialogPopup: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export type DialogContentProps = Primitive.Popup.Props & {
+    /**
+     * Accessible name, for a dialog with no visible `DialogTitle`. With a title, leave this
+     * out: Base UI points the popup's `aria-labelledby` at it, and an `aria-label` here would
+     * override the words the user can actually see.
+     */
+    label?: string;
+    /**
+     * Label for the built-in close button — REQUIRED to get one, which is the whole point:
+     * passing the label is the only way to render the button, so an unlabelled close button
+     * cannot be written. There is no default string, because a default would be English.
+     */
+    closeLabel?: string;
+    backdropClassName?: StateClassName<Primitive.Backdrop.State>;
+    /** Where the portal mounts. Defaults to `<body>`. */
+    container?: Primitive.Portal.Props["container"];
+};
+/**
+ * Portal + backdrop + popup as one part, so a scrimless dialog is not a thing a caller can
+ * ship by forgetting a line. The popup owns the scroll (`overflow-y-auto` plus
+ * `overscroll-contain`, so reaching the end of a long dialog does not start scrolling the
+ * page behind it) and is capped to the viewport, so a tall dialog is never taller than the
+ * screen it opens on.
+ *
+ * Everything else — padding, radius, shadow, type — is the product's. What is here is what
+ * makes the primitive work.
+ */
+export declare function DialogContent({ className, backdropClassName, container, label, closeLabel, children, ...rest }: DialogContentProps): import("react").JSX.Element;
+//# sourceMappingURL=dialog.d.ts.map

package/dist/ui/dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/ui/dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAkB,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAMtE,eAAO,MAAM,MAAM,sEAAiB,CAAC;AACrC,eAAO,MAAM,aAAa,mBAAoB,CAAC;AAC/C,eAAO,MAAM,WAAW,4JAAkB,CAAC;AAC3C,eAAO,MAAM,iBAAiB,oKAAwB,CAAC;AACvD,eAAO,MAAM,WAAW,2JAAkB,CAAC;AAC3C,eAAO,MAAM,YAAY,yJAAmB,CAAC;AAC7C,eAAO,MAAM,cAAc,2JAAqB,CAAC;AACjD,eAAO,MAAM,WAAW,wJAAkB,CAAC;AAE3C,MAAM,MAAM,kBAAkB,GAAG,SAAS,CAAC,KAAK,CAAC,KAAK,GAAG;IACvD;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC7D,qDAAqD;IACrD,SAAS,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;CACjD,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,iBAAiB,EACjB,SAAS,EACT,KAAK,EACL,UAAU,EACV,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,kBAAkB,+BAkCpB"}

package/dist/ui/dialog.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog as Primitive } from "@base-ui/react/dialog";
+import { mergeClassName } from "./class-name.js";
+import { CloseGlyph } from "./glyphs.js";
+// The parts, straight through. Base UI already does focus trap, escape, outside-dismiss,
+// scroll lock, focus return and the aria wiring, and a wrapper around any of these would only
+// add a class name — so they are re-exported, not re-implemented.
+export const Dialog = Primitive.Root;
+export const DialogTrigger = Primitive.Trigger;
+export const DialogTitle = Primitive.Title;
+export const DialogDescription = Primitive.Description;
+export const DialogClose = Primitive.Close;
+export const DialogPortal = Primitive.Portal;
+export const DialogBackdrop = Primitive.Backdrop;
+export const DialogPopup = Primitive.Popup;
+/**
+ * Portal + backdrop + popup as one part, so a scrimless dialog is not a thing a caller can
+ * ship by forgetting a line. The popup owns the scroll (`overflow-y-auto` plus
+ * `overscroll-contain`, so reaching the end of a long dialog does not start scrolling the
+ * page behind it) and is capped to the viewport, so a tall dialog is never taller than the
+ * screen it opens on.
+ *
+ * Everything else — padding, radius, shadow, type — is the product's. What is here is what
+ * makes the primitive work.
+ */
+export function DialogContent({ className, backdropClassName, container, label, closeLabel, children, ...rest }) {
+    return (_jsxs(Primitive.Portal, { container: container, children: [_jsx(Primitive.Backdrop, { className: mergeClassName("fixed inset-0 z-50 bg-scrim transition-opacity data-ending-style:opacity-0 data-starting-style:opacity-0", backdropClassName) }), _jsxs(Primitive.Popup, { "aria-label": label, ...rest, className: mergeClassName("fixed top-1/2 left-1/2 z-50 max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2 overflow-y-auto overscroll-contain bg-popover text-popover-foreground outline-none transition-[scale,opacity] data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0", className), children: [children, closeLabel === undefined ? null : (_jsx(Primitive.Close, { "aria-label": closeLabel, 
+                        // 44px square: the close button is often the only way out on a phone, and a
+                        // smaller target is one a thumb misses.
+                        className: "absolute top-0 right-0 inline-flex size-11 items-center justify-center text-muted-foreground", children: _jsx(CloseGlyph, {}) }))] })] }));
+}
+//# sourceMappingURL=dialog.js.map

package/dist/ui/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../src/ui/dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAuB,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,UAAU,EAAE,MAAM,aAAc,CAAC;AAE1C,yFAAyF;AACzF,8FAA8F;AAC9F,kEAAkE;AAClE,MAAM,CAAC,MAAM,MAAM,GAAG,SAAS,CAAC,IAAI,CAAC;AACrC,MAAM,CAAC,MAAM,aAAa,GAAG,SAAS,CAAC,OAAO,CAAC;AAC/C,MAAM,CAAC,MAAM,WAAW,GAAG,SAAS,CAAC,KAAK,CAAC;AAC3C,MAAM,CAAC,MAAM,iBAAiB,GAAG,SAAS,CAAC,WAAW,CAAC;AACvD,MAAM,CAAC,MAAM,WAAW,GAAG,SAAS,CAAC,KAAK,CAAC;AAC3C,MAAM,CAAC,MAAM,YAAY,GAAG,SAAS,CAAC,MAAM,CAAC;AAC7C,MAAM,CAAC,MAAM,cAAc,GAAG,SAAS,CAAC,QAAQ,CAAC;AACjD,MAAM,CAAC,MAAM,WAAW,GAAG,SAAS,CAAC,KAAK,CAAC;AAoB3C;;;;;;;;;GASG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,SAAS,EACT,iBAAiB,EACjB,SAAS,EACT,KAAK,EACL,UAAU,EACV,QAAQ,EACR,GAAG,IAAI,EACY;IACnB,OAAO,CACL,MAAC,SAAS,CAAC,MAAM,IAAC,SAAS,EAAE,SAAS,aACpC,KAAC,SAAS,CAAC,QAAQ,IACjB,SAAS,EAAE,cAAc,CACvB,0GAA0G,EAC1G,iBAAiB,CAClB,GACD,EAIF,MAAC,SAAS,CAAC,KAAK,kBACF,KAAK,KACb,IAAI,EACR,SAAS,EAAE,cAAc,CACvB,sVAAsV,EACtV,SAAS,CACV,aAEA,QAAQ,EACR,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACjC,KAAC,SAAS,CAAC,KAAK,kBACF,UAAU;wBACtB,4EAA4E;wBAC5E,wCAAwC;wBACxC,SAAS,EAAC,8FAA8F,YAExG,KAAC,UAAU,KAAG,GACE,CACnB,IACe,IACD,CACpB,CAAC;AACJ,CAAC"}

package/dist/ui/drawer.d.ts

@@ -0,0 +1,63 @@
+import { Drawer as Primitive } from "@base-ui/react/drawer";
+import type { ReactNode } from "react";
+import { type StateClassName } from "./class-name.ts";
+export declare const DrawerRoot: typeof Primitive.Root;
+export declare const DrawerTrigger: Primitive.Trigger;
+export declare const DrawerPortal: Primitive.Portal;
+export declare const DrawerBackdrop: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").DrawerBackdropProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DrawerViewport: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").DrawerViewportProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DrawerPopup: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").DrawerPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DrawerContent: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").DrawerContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DrawerHandle: typeof Primitive.Handle;
+export declare const DrawerSwipeArea: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").DrawerSwipeAreaProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DrawerTitle: Primitive.Title;
+export declare const DrawerDescription: Primitive.Description;
+export declare const DrawerClose: Primitive.Close;
+export type DrawerSide = "left" | "right" | "bottom";
+/**
+ * Where the portal mounts, and whether the drawer covers the page or a box inside it.
+ *
+ * A scoped drawer positions itself `absolute` against a container instead of `fixed` against
+ * the viewport — so it MUST be given that container, or it lands in `<body>` and positions
+ * against a box that is not there. The two travel together in the type.
+ *
+ * The container also needs a positioning context of its own (`relative`): `absolute` walks up
+ * to the nearest positioned ancestor, so a static container hands the drawer the whole page
+ * and the "scoped" part quietly does not happen.
+ */
+type DrawerPortalTarget = {
+    scoped: true;
+    container: NonNullable<Primitive.Portal.Props["container"]>;
+} | {
+    scoped?: false;
+    container?: Primitive.Portal.Props["container"];
+};
+export type DrawerProps<Payload = unknown> = Omit<Primitive.Root.Props<Payload>, "children" | "swipeDirection"> & DrawerPortalTarget & {
+    /**
+     * Which edge it comes from. This also sets `swipeDirection` on the root — the two must
+     * agree, and a mismatch is silent: the drawer looks right and dismisses on a swipe
+     * towards the screen it is attached to.
+     */
+    side?: DrawerSide;
+    /** Accessible name, for a drawer with no visible `DrawerTitle`. */
+    label?: string;
+    children?: ReactNode;
+    /** Classes for the popup — the panel itself. */
+    className?: StateClassName<Primitive.Popup.State>;
+    backdropClassName?: StateClassName<Primitive.Backdrop.State>;
+    viewportClassName?: StateClassName<Primitive.Viewport.State>;
+    contentClassName?: StateClassName<Primitive.Content.State>;
+    /** Popup-level props the wrapper does not own — `initialFocus`, `finalFocus`, `data-*`. */
+    popupProps?: Primitive.Popup.Props;
+};
+/**
+ * A panel that slides in from an edge. Root → portal → backdrop → viewport → popup → content,
+ * composed once here because the parts have to be arranged in exactly this order to work at
+ * all, and because two of the four rules below cost someone a bug that no test would catch.
+ *
+ * Everything the root takes — `open`, `onOpenChange`, `modal`, `snapPoints`, `actionsRef`,
+ * `data-*` — passes straight through.
+ */
+export declare function Drawer<Payload = unknown>({ side, label, scoped, container, className, backdropClassName, viewportClassName, contentClassName, popupProps, children, ...rest }: DrawerProps<Payload>): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=drawer.d.ts.map

package/dist/ui/drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../src/ui/drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAkB,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGtE,eAAO,MAAM,UAAU,uBAAiB,CAAC;AACzC,eAAO,MAAM,aAAa,mBAAoB,CAAC;AAC/C,eAAO,MAAM,YAAY,kBAAmB,CAAC;AAC7C,eAAO,MAAM,cAAc,sJAAqB,CAAC;AACjD,eAAO,MAAM,cAAc,sJAAqB,CAAC;AACjD,eAAO,MAAM,WAAW,mJAAkB,CAAC;AAC3C,eAAO,MAAM,aAAa,qJAAoB,CAAC;AAC/C,eAAO,MAAM,YAAY,yBAAmB,CAAC;AAC7C,eAAO,MAAM,eAAe,uJAAsB,CAAC;AACnD,eAAO,MAAM,WAAW,iBAAkB,CAAC;AAC3C,eAAO,MAAM,iBAAiB,uBAAwB,CAAC;AACvD,eAAO,MAAM,WAAW,iBAAkB,CAAC;AAE3C,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAmBrD;;;;;;;;;;GAUG;AACH,KAAK,kBAAkB,GACnB;IAAE,MAAM,EAAE,IAAI,CAAC;IAAC,SAAS,EAAE,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAA;CAAE,GAC7E;IAAE,MAAM,CAAC,EAAE,KAAK,CAAC;IAAC,SAAS,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,CAAA;CAAE,CAAC;AAExE,MAAM,MAAM,WAAW,CAAC,OAAO,GAAG,OAAO,IAAI,IAAI,CAC/C,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,EAC7B,UAAU,GAAG,gBAAgB,CAC9B,GACC,kBAAkB,GAAG;IACnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,gDAAgD;IAChD,SAAS,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAClD,iBAAiB,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC7D,iBAAiB,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC7D,gBAAgB,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IAC3D,2FAA2F;IAC3F,UAAU,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC;CACpC,CAAC;AAEJ;;;;;;;GAOG;AACH,wBAAgB,MAAM,CAAC,OAAO,GAAG,OAAO,EAAE,EACxC,IAAc,EACd,KAAK,EACL,MAAc,EACd,SAAS,EACT,SAAS,EACT,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,UAAU,EACV,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,WAAW,CAAC,OAAO,CAAC,+BAiEtB"}

package/dist/ui/drawer.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Drawer as Primitive } from "@base-ui/react/drawer";
+import { mergeClassName } from "./class-name.js";
+// The parts, for a drawer that needs a shape this wrapper does not give it.
+export const DrawerRoot = Primitive.Root;
+export const DrawerTrigger = Primitive.Trigger;
+export const DrawerPortal = Primitive.Portal;
+export const DrawerBackdrop = Primitive.Backdrop;
+export const DrawerViewport = Primitive.Viewport;
+export const DrawerPopup = Primitive.Popup;
+export const DrawerContent = Primitive.Content;
+export const DrawerHandle = Primitive.Handle;
+export const DrawerSwipeArea = Primitive.SwipeArea;
+export const DrawerTitle = Primitive.Title;
+export const DrawerDescription = Primitive.Description;
+export const DrawerClose = Primitive.Close;
+const viewportSide = {
+    left: "items-stretch justify-start",
+    right: "items-stretch justify-end",
+    bottom: "items-end",
+};
+// The translate pair is what Base UI animates between: `data-starting-style` is the frame
+// before it opens, `data-ending-style` the frame it leaves on. Same class both ways, so the
+// drawer goes back out the side it came in.
+const popupSide = {
+    left: "w-[min(24rem,calc(100vw-1rem))] data-ending-style:-translate-x-full data-starting-style:-translate-x-full",
+    right: "w-[min(24rem,calc(100vw-1rem))] data-ending-style:translate-x-full data-starting-style:translate-x-full",
+    bottom: "max-h-[90svh] w-full data-ending-style:translate-y-full data-starting-style:translate-y-full",
+};
+/**
+ * A panel that slides in from an edge. Root → portal → backdrop → viewport → popup → content,
+ * composed once here because the parts have to be arranged in exactly this order to work at
+ * all, and because two of the four rules below cost someone a bug that no test would catch.
+ *
+ * Everything the root takes — `open`, `onOpenChange`, `modal`, `snapPoints`, `actionsRef`,
+ * `data-*` — passes straight through.
+ */
+export function Drawer({ side = "right", label, scoped = false, container, className, backdropClassName, viewportClassName, contentClassName, popupProps, children, ...rest }) {
+    return (_jsx(Primitive.Root, { swipeDirection: side === "bottom" ? "down" : side, ...rest, children: _jsxs(Primitive.Portal, { container: container, children: [_jsx(Primitive.Backdrop, { className: mergeClassName([
+                        scoped ? "absolute" : "fixed",
+                        "inset-0 z-40 bg-scrim transition-opacity data-ending-style:opacity-0 data-starting-style:opacity-0",
+                    ], backdropClassName) }), _jsx(Primitive.Viewport, { className: mergeClassName([scoped ? "absolute" : "fixed", "inset-0 z-50 flex", viewportSide[side]], viewportClassName), children: _jsx(Primitive.Popup, { "aria-label": label, ...popupProps, className: mergeClassName([
+                            "pointer-events-auto flex flex-col overflow-y-auto overscroll-contain bg-background text-foreground outline-none transition-transform",
+                            popupSide[side],
+                        ], className), children: _jsx(Primitive.Content, { className: mergeClassName([
+                                "flex w-full flex-1 flex-col",
+                                // A side drawer has a definite height (the viewport's), so cap the content
+                                // to it. Without `min-h-0` a child with its own scroll region grows the
+                                // popup instead of scrolling inside it, and the footer that was meant to
+                                // stay pinned ends up at the bottom of one long page scroll. A bottom
+                                // drawer sizes from its content, so it keeps the default `min-height: auto`.
+                                side !== "bottom" && "min-h-0",
+                            ], contentClassName), children: children }) }) })] }) }));
+}
+//# sourceMappingURL=drawer.js.map

package/dist/ui/drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../src/ui/drawer.tsx"],"names":[],"mappings":"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"}

package/dist/ui/glyphs.d.ts

@@ -0,0 +1,4 @@
+export declare function ChevronGlyph(): import("react").JSX.Element;
+export declare function CheckGlyph(): import("react").JSX.Element;
+export declare function CloseGlyph(): import("react").JSX.Element;
+//# sourceMappingURL=glyphs.d.ts.map

package/dist/ui/glyphs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"glyphs.d.ts","sourceRoot":"","sources":["../../src/ui/glyphs.tsx"],"names":[],"mappings":"AAwBA,wBAAgB,YAAY,gCAE3B;AAED,wBAAgB,UAAU,gCAEzB;AAED,wBAAgB,UAAU,gCAEzB"}

package/dist/ui/glyphs.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// The three affordance marks the wrappers draw by default: the chevron that says "this
+// opens", the check that says "this one is picked", the cross that says "this closes".
+//
+// They are `currentColor` stroke on a 24-grid so a product's own icon set drops in without
+// a size or colour change. Every component that draws one takes it as a prop — these are the
+// zero-config default, never the only option.
+function Glyph({ d }) {
+    return (_jsx("svg", { className: "size-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: d }) }));
+}
+export function ChevronGlyph() {
+    return _jsx(Glyph, { d: "m6 9 6 6 6-6" });
+}
+export function CheckGlyph() {
+    return _jsx(Glyph, { d: "m5 13 4 4 10-10" });
+}
+export function CloseGlyph() {
+    return _jsx(Glyph, { d: "M18 6 6 18M6 6l12 12" });
+}
+//# sourceMappingURL=glyphs.js.map

package/dist/ui/glyphs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"glyphs.js","sourceRoot":"","sources":["../../src/ui/glyphs.tsx"],"names":[],"mappings":";AAAA,uFAAuF;AACvF,uFAAuF;AACvF,EAAE;AACF,2FAA2F;AAC3F,6FAA6F;AAC7F,8CAA8C;AAE9C,SAAS,KAAK,CAAC,EAAE,CAAC,EAAiB;IACjC,OAAO,CACL,cACE,SAAS,EAAC,QAAQ,EAClB,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAE,CAAC,EACd,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,iBACV,MAAM,YAElB,eAAM,CAAC,EAAE,CAAC,GAAI,GACV,CACP,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,YAAY;IAC1B,OAAO,KAAC,KAAK,IAAC,CAAC,EAAC,cAAc,GAAG,CAAC;AACpC,CAAC;AAED,MAAM,UAAU,UAAU;IACxB,OAAO,KAAC,KAAK,IAAC,CAAC,EAAC,iBAAiB,GAAG,CAAC;AACvC,CAAC;AAED,MAAM,UAAU,UAAU;IACxB,OAAO,KAAC,KAAK,IAAC,CAAC,EAAC,sBAAsB,GAAG,CAAC;AAC5C,CAAC"}

package/dist/ui/index.d.ts

@@ -0,0 +1,9 @@
+export { mergeClassName, type StateClassName } from "./class-name.ts";
+export { Dialog, DialogBackdrop, DialogClose, DialogContent, DialogDescription, DialogPopup, DialogPortal, DialogTitle, DialogTrigger, type DialogContentProps, } from "./dialog.tsx";
+export { Drawer, DrawerBackdrop, DrawerClose, DrawerContent, DrawerDescription, DrawerHandle, DrawerPopup, DrawerPortal, DrawerRoot, DrawerSwipeArea, DrawerTitle, DrawerTrigger, DrawerViewport, type DrawerProps, type DrawerSide, } from "./drawer.tsx";
+export { Select, SelectGroup, SelectGroupLabel, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectList, SelectPopup, SelectPortal, SelectPositioner, SelectRoot, SelectSeparator, SelectTrigger, SelectValue, type SelectOption, type SelectProps, } from "./select.tsx";
+export { Combobox, comboboxInputValue, ComboboxClear, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxInputGroup, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxPortal, ComboboxPositioner, ComboboxRoot, ComboboxTrigger, type ComboboxProps, } from "./combobox.tsx";
+export { Input, textareaHeight, type FieldProps, type InputProps, type MultilineInputProps, } from "./input.tsx";
+export { Menu, MenuArrow, MenuBackdrop, MenuCheckboxItem, MenuCheckboxItemIndicator, MenuContent, MenuGroup, MenuItem, MenuLinkItem, MenuPopup, MenuPortal, MenuPositioner, MenuRadioGroup, MenuRadioItem, MenuRadioItemIndicator, MenuSeparator, MenuSubmenuRoot, MenuSubmenuTrigger, MenuTrigger, type MenuContentProps, type MenuRadioItemProps, } from "./menu.tsx";
+export { Tab, TabIndicator, TabList, TabPanel, Tabs, type TabListProps } from "./tabs.tsx";
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AA4BA,OAAO,EAAE,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtE,OAAO,EACL,MAAM,EACN,cAAc,EACd,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,WAAW,EACX,YAAY,EACZ,WAAW,EACX,aAAa,EACb,KAAK,kBAAkB,GACxB,MAAM,cAAc,CAAC;AAEtB,OAAO,EACL,MAAM,EACN,cAAc,EACd,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,UAAU,EACV,eAAe,EACf,WAAW,EACX,aAAa,EACb,cAAc,EACd,KAAK,WAAW,EAChB,KAAK,UAAU,GAChB,MAAM,cAAc,CAAC;AAYtB,OAAO,EACL,MAAM,EACN,WAAW,EACX,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,mBAAmB,EACnB,cAAc,EACd,UAAU,EACV,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,eAAe,EACf,aAAa,EACb,WAAW,EACX,KAAK,YAAY,EACjB,KAAK,WAAW,GACjB,MAAM,cAAc,CAAC;AAEtB,OAAO,EACL,QAAQ,EACR,kBAAkB,EAClB,aAAa,EACb,aAAa,EACb,aAAa,EACb,kBAAkB,EAClB,aAAa,EACb,kBAAkB,EAClB,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,cAAc,EACd,kBAAkB,EAClB,YAAY,EACZ,eAAe,EACf,KAAK,aAAa,GACnB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EACL,KAAK,EACL,cAAc,EACd,KAAK,UAAU,EACf,KAAK,UAAU,EACf,KAAK,mBAAmB,GACzB,MAAM,aAAa,CAAC;AAIrB,OAAO,EACL,IAAI,EACJ,SAAS,EACT,YAAY,EACZ,gBAAgB,EAChB,yBAAyB,EACzB,WAAW,EACX,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,UAAU,EACV,cAAc,EACd,cAAc,EACd,aAAa,EACb,sBAAsB,EACtB,aAAa,EACb,eAAe,EACf,kBAAkB,EAClB,WAAW,EACX,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,GACxB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,GAAG,EAAE,YAAY,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC"}