@uisatin/ui 0.0.0-stage → 0.1.0

package/components/message-actions.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+/**
+ * MessageActions, 1:1 with uiKit `_chat/answerActions` (901:20164): the row under an assistant
+ * reply. Delivery status (16px icon in a 24px box) and time in text/muted medium 13, then like,
+ * dislike and copy as 24px tertiary icon buttons 2px apart, then Share (tertiary xs with a
+ * label). Groups sit 8px apart with 1 × 12 border/default dividers between them.
+ *
+ * Feedback: a clicked thumb stays pressed (border/input fill, icon text/subtle) until the other
+ * one is clicked or it is clicked again; `feedback` sets it, `onFeedback` reports it.
+ * The status and time show only when there is a `timestamp`.
+ */
+export type MessageFeedback = 'like' | 'dislike' | null;
+export interface MessageActionsProps extends React.ComponentProps<'div'> {
+    /** "20 minutes ago". Leave it out to drop the status and time. */
+    timestamp?: string;
+    status?: 'sending' | 'delivered';
+    /** The pressed thumb. Pass it with onFeedback to control it, or once to start from it. */
+    feedback?: MessageFeedback;
+    showShare?: boolean;
+    onFeedback?: (value: MessageFeedback) => void;
+    onCopy?: () => void;
+    onShare?: () => void;
+}
+export declare function MessageActions({ timestamp, status, feedback: feedbackProp, showShare, onFeedback, onCopy, onShare, className, ...props }: MessageActionsProps): React.JSX.Element;

package/components/message-actions.js

@@ -0,0 +1,5 @@
+'use client';export { MessageActions } from '../chunk-AN2RNJLR.js';
+import '../chunk-HNQUX43Z.js';
+import '../chunk-H63FYCMY.js';
+//# sourceMappingURL=message-actions.js.map
+//# sourceMappingURL=message-actions.js.map

package/components/message-actions.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"message-actions.js"}

package/components/message.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { type MessageFeedback } from './message-actions';
+import { type ThinkingStep } from './thinking';
+/**
+ * Message, 1:1 with the uiKit Message docs view (3890:70165), composed from `_chat/userMessage`
+ * (901:20155), `_chat/source` and `_chat/answerActions` (901:20164, see MessageActions).
+ *
+ * user: a right-aligned action/inverse bubble (12px corners, 4px bottom-right), 12 × 8
+ * padding, text/on-inverse 13/19.5, wrapping at 256px of text. A source card sits 8px above
+ * it: bg/canvas, border/subtle, radius 10, 16px logo, title medium 13/18, url 12/12 muted.
+ *
+ * assistant: no bubble, so long answers read like a document — text/default 13/19.5, with
+ * the collapsed Thinking above and the actions below, 12px apart.
+ */
+export interface MessageSource {
+    /** The page or message title, "Q3 pipeline review". */
+    title: React.ReactNode;
+    /** Shown under the title, "docs.sature.app/q3-review". */
+    url?: React.ReactNode;
+    /** A 16px logo or favicon. */
+    icon?: React.ReactNode;
+    /** Makes the card a link. */
+    href?: string;
+}
+export interface MessageProps extends React.ComponentProps<'div'> {
+    role?: 'user' | 'assistant';
+    /** The steps the agent ran; shows a collapsed Thinking above an assistant answer. */
+    thinking?: ThinkingStep[];
+    /** The summary on that Thinking header. */
+    thinkingLabel?: React.ReactNode;
+    /** A page or message the user brought in, shown as a card above their bubble. */
+    source?: MessageSource;
+    /** Feedback, copy and share under an assistant answer. Off while it streams. */
+    actions?: boolean;
+    timestamp?: string;
+    onFeedback?: (value: MessageFeedback) => void;
+    onCopy?: () => void;
+    onShare?: () => void;
+}
+export declare function Message({ role, thinking, thinkingLabel, source, actions, timestamp, onFeedback, onCopy, onShare, className, children, ...props }: MessageProps): React.JSX.Element;

package/components/message.js

@@ -0,0 +1,8 @@
+'use client';export { Message } from '../chunk-PVOLDO4G.js';
+import '../chunk-ESC5JCVQ.js';
+import '../chunk-AN2RNJLR.js';
+import '../chunk-KNUWZNFV.js';
+import '../chunk-HNQUX43Z.js';
+import '../chunk-H63FYCMY.js';
+//# sourceMappingURL=message.js.map
+//# sourceMappingURL=message.js.map

package/components/message.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"message.js"}

package/components/number-input.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+/**
+ * NumberInput, 1:1 with the uiKit design (🆕 input otp & number): Input's field skin and sizes
+ * (sm 28, md 32, lg 36) with − and + at its ends and the value centred, tabular. The buttons are
+ * 24px squares (radius-md, hover bg/hover, text/muted → text/default); at `min` or `max` the one
+ * that would cross it fades to 40% and stops.
+ *
+ * It's a spinbutton: ArrowUp / ArrowDown step, PageUp / PageDown step ten times, Home / End jump
+ * to `min` / `max`. Typing is free while focused; Enter or leaving the field clamps it, snaps it to
+ * `step` and commits; Escape puts the last value back.
+ */
+export interface NumberInputProps {
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    size?: 'sm' | 'md' | 'lg';
+    /** How the value reads in the field and to screen readers. */
+    formatValue?: (value: number) => string;
+    label?: React.ReactNode;
+    hint?: React.ReactNode;
+    error?: React.ReactNode | boolean;
+    disabled?: boolean;
+    id?: string;
+    name?: string;
+    'aria-label'?: string;
+    /** Classes for the outer wrapper (label + field + hint). `className` styles the field. */
+    wrapperClassName?: string;
+    className?: string;
+}
+export declare function NumberInput({ value: valueProp, defaultValue, onValueChange, min, max, step, size, formatValue, label, hint, error, disabled, id, name, wrapperClassName, className, ...props }: NumberInputProps): React.JSX.Element;

package/components/number-input.js

@@ -0,0 +1,8 @@
+'use client';export { NumberInput } from '../chunk-LW3TRU5W.js';
+import '../chunk-72OCFAPT.js';
+import '../chunk-UBNHSZSE.js';
+import '../chunk-3DINAQLL.js';
+import '../chunk-BKZBWPUH.js';
+import '../chunk-H63FYCMY.js';
+//# sourceMappingURL=number-input.js.map
+//# sourceMappingURL=number-input.js.map

package/components/number-input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"number-input.js"}

package/components/pagination.d.ts

@@ -0,0 +1,45 @@
+import * as React from 'react';
+/**
+ * Pagination, 1:1 with the uiKit `Pagination` set (4025:3807), two layouts:
+ * - full: Previous and Next (tertiary md buttons with their arrows) around the page numbers,
+ *   4px apart: the first and last page, the current one with `siblings` on each side, and an
+ *   ellipsis where pages are skipped. Pages are 28px squares, radius 10, 13px text/muted;
+ *   hover bg/hover and text/default; the current page bg/selected, text/default, medium.
+ * - compact: icon-only Previous and Next around "Page 5 of 12" (13px, text/muted), 8px apart.
+ *
+ * Moving between pages (`motion`), the pages keep their places and only their numbers change:
+ * - scroll (default): the pages are a strip. Each page slides from where it was to its new place,
+ *   a page coming into view slides out from under the ellipsis on the side the reader pages
+ *   towards, one leaving slides under the other and fades, and the pill under the current
+ *   page moves on the same 300 ms curve (sliding-indicator.tsx, shared with Tabs and the
+ *   Segmented control). Nothing is clipped and no number changes in place.
+ * - slide: the current page's bg/selected pill slides under the numbers to the new
+ *   page, like the Segmented control's, 200 ms on ease-out; a number that changes in place
+ *   fades out before the new one fades in.
+ * - none: no motion; the current page simply takes the pill.
+ *
+ * Previous and Next are disabled at the ends. With `getHref`, every page is a link (for pages
+ * the server renders); without it they are buttons that call `onPageChange`.
+ *
+ * A `nav` named "Pagination"; the current page has aria-current="page".
+ */
+export interface PaginationProps extends Omit<React.ComponentProps<'nav'>, 'children'> {
+    /** How many pages there are. */
+    pageCount: number;
+    /** The current page, from 1. */
+    page?: number;
+    defaultPage?: number;
+    onPageChange?: (page: number) => void;
+    /** Each page's URL: pages become links. */
+    getHref?: (page: number) => string;
+    layout?: 'full' | 'compact';
+    /** Pages shown on each side of the current one (full layout). */
+    siblings?: number;
+    previousLabel?: string;
+    nextLabel?: string;
+    /** How the row moves when the page changes. */
+    motion?: 'slide' | 'scroll' | 'none';
+}
+/** The pages to show, with 'gap' where an ellipsis stands for skipped ones. Always 2 × siblings + 5 slots when there are enough pages, so the bar keeps its width. */
+export declare function paginationRange(page: number, pageCount: number, siblings?: number): (number | 'gap')[];
+export declare function Pagination({ pageCount, page: pageProp, defaultPage, onPageChange, getHref, layout, siblings, previousLabel, nextLabel, motion, className, 'aria-label': ariaLabel, ...props }: PaginationProps): React.JSX.Element;

package/components/pagination.js

@@ -0,0 +1,6 @@
+'use client';export { Pagination, paginationRange } from '../chunk-QS4N4MNP.js';
+import '../chunk-J3NSDRVH.js';
+import '../chunk-HNQUX43Z.js';
+import '../chunk-H63FYCMY.js';
+//# sourceMappingURL=pagination.js.map
+//# sourceMappingURL=pagination.js.map

package/components/pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"pagination.js"}

package/components/popover.d.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { Popover as PopoverPrimitive } from 'radix-ui';
+/**
+ * Popover, 1:1 with the uiKit `Popover` component (613:18781): a 320px popover surface,
+ * radius-xl, border/default, the shadcn `lg` shadow, 10px padding all round. A 13px medium
+ * title (18px line) over a 13px muted description, 2px apart; a 16px close glyph in text/subtle
+ * 10px from the top-right corner; an optional body slot 16px below the header. It opens 8px below its trigger, aligned to the trigger's start.
+ *
+ * Built on the Radix Popover. `children` is the trigger (rendered with `asChild`, so pass a
+ * Button); `body` fills the body slot. Pass `container` to portal it into the docs stage.
+ */
+export interface PopoverProps {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** The trigger. Rendered with `asChild`. */
+    children?: React.ReactNode;
+    /** Figma's body slot: actions or a small form. Keep it to one task. */
+    body?: React.ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    align?: 'start' | 'center' | 'end';
+    sideOffset?: number;
+    /** Show the close glyph in the corner. */
+    closeButton?: boolean;
+    /** Portal target. Defaults to `document.body`. */
+    container?: HTMLElement | null;
+    /** Called when focus moves into the popover on open; `preventDefault()` keeps it where it was. */
+    onOpenAutoFocus?: (event: Event) => void;
+    /** A press or focus outside the popover; `preventDefault()` keeps it open. */
+    onInteractOutside?: (event: Event) => void;
+    className?: string;
+}
+export declare function Popover({ title, description, children, body, open, defaultOpen, onOpenChange, side, align, sideOffset, closeButton, container, onOpenAutoFocus, onInteractOutside, className, }: PopoverProps): React.JSX.Element;
+/**
+ * The popover's panel on its own, in place: no trigger, no positioning. For docs, previews
+ * and layers you anchor yourself. The close button calls `onClose`.
+ */
+export declare function PopoverPanel({ title, description, body, closeButton, onClose, className, }: Pick<PopoverProps, 'title' | 'description' | 'body' | 'closeButton' | 'className'> & {
+    onClose?: () => void;
+}): React.JSX.Element;
+/** Wrap a body button in this to make it close the popover: `<PopoverClose asChild><Button…/></PopoverClose>`. */
+export declare const PopoverClose: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverCloseProps & React.RefAttributes<HTMLButtonElement>>;

package/components/popover.js

@@ -0,0 +1,4 @@
+'use client';export { Popover, PopoverClose, PopoverPanel } from '../chunk-BNZVTLHV.js';
+import '../chunk-H63FYCMY.js';
+//# sourceMappingURL=popover.js.map
+//# sourceMappingURL=popover.js.map

package/components/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"popover.js"}

package/components/progress.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+/**
+ * Progress, 1:1 with the uiKit `Progress` set (4025:3851): a bg/muted track, 4px (sm) or 8px
+ * (md), fully rounded, with the done part in action/primary/bg. Above it, optionally, a label
+ * row 8px up: the label (13px medium, text/default) on the left and the percentage (13px,
+ * text/muted) on the right.
+ *
+ * Leave `value` out while the amount is unknown: a third of the track then slides across.
+ * The bar moves to a new value over 300 ms on ease-out.
+ *
+ * A `progressbar` with aria-valuenow (and the label as its name) when there is a value.
+ */
+export interface ProgressProps extends Omit<React.ComponentProps<'div'>, 'children'> {
+    /** 0 to `max`; left out, the bar is indeterminate. */
+    value?: number | null;
+    max?: number;
+    label?: React.ReactNode;
+    /** The percentage at the right of the label row. */
+    showValue?: boolean;
+    size?: 'sm' | 'md';
+    /** How the value reads on the right and to screen readers. Defaults to a whole percentage. */
+    formatValue?: (value: number, max: number) => string;
+}
+export declare function Progress({ value, max, label, showValue, size, formatValue, className, 'aria-label': ariaLabel, ...props }: ProgressProps): React.JSX.Element;

package/components/progress.js

@@ -0,0 +1,4 @@
+'use client';export { Progress } from '../chunk-7TXHCRAG.js';
+import '../chunk-H63FYCMY.js';
+//# sourceMappingURL=progress.js.map
+//# sourceMappingURL=progress.js.map

package/components/progress.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"progress.js"}

package/components/prompt-bar.d.ts

@@ -0,0 +1,63 @@
+import * as React from 'react';
+/**
+ * PromptBar, 1:1 with the uiKit `PromptBar` set (3158:21803), its input row
+ * `_prompterInteractions` (3157:23767), `_dictationButton` (3156:40589), the `Attachment` chips
+ * (3141:20409) and the two menus `_dropdowns/addToConversation` (3157:23548) and
+ * `dropdowns/models`.
+ *
+ * The bar: bg/field, 1px border/default, shadow/xs, 8px padding, rows 8px apart. shape
+ * default = radius 12 with Default buttons; pill = radius-full on one line, radius 20 once
+ * attachments or a second line of text add height, with Rounded buttons. The input row is
+ * add (+), the field (14/21, placeholder text/subtle), then 4px apart the model select, dictation
+ * and send — all 28px DS buttons. Once the text needs a second line the bar expands: the field
+ * takes its own row, with + and the model below on the left and dictation and send on the right. state inactive: border/default and send disabled; active (the
+ * field focused, or text to send): border/strong and send enabled.
+ *
+ * Menus open 8px above: + opens addToConversation across the full width of the bar, the model
+ * select opens the models list (241px, right-aligned); the trigger shows its pressed fill.
+ * Dictation toggles to the primary button with a three-bar wave that moves while it records.
+ * Enter sends, Shift+Enter adds a line.
+ */
+export interface PromptBarModel {
+    value: string;
+    label: string;
+    /** 20px in the menu, 16px on the select. */
+    icon?: React.ReactNode;
+}
+export interface PromptBarAction {
+    id: string;
+    label: string;
+    description?: string;
+    /** 16px icon. */
+    icon?: React.ReactNode;
+    /** Without it, the `upload` action opens the file picker and adds the files as attachments. */
+    onSelect?: () => void;
+}
+export interface PromptBarProps extends Omit<React.ComponentProps<'form'>, 'onSubmit'> {
+    shape?: 'pill' | 'default';
+    /** The text. Pass it with onValueChange to control it. */
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    placeholder?: string;
+    /** Files shown as chips above the field; people can remove them before sending. */
+    attachments?: File[];
+    onAttachmentsChange?: (files: File[]) => void;
+    /** The selected model's value (or its label, when there is no `models` list). */
+    model?: string;
+    /** The models menu. Without it the select shows `model` and opens nothing. */
+    models?: PromptBarModel[];
+    onModelChange?: (value: string) => void;
+    /** Icon on the select when `models` doesn't give one. */
+    modelIcon?: React.ReactNode;
+    /** Rows of the + menu. Defaults to Upload a file and Web search. */
+    actions?: PromptBarAction[];
+    /** The + at the end of the menu's search row. */
+    onAddAgent?: () => void;
+    onDictationChange?: (recording: boolean) => void;
+    disabled?: boolean;
+    onSubmit?: (value: string, attachments: File[]) => void;
+}
+/** Upload a file and Web search: spread them into `actions` to add your own rows after them. */
+export declare const defaultActions: PromptBarAction[];
+export declare function PromptBar({ shape, value: valueProp, defaultValue, onValueChange, placeholder, attachments: attachmentsProp, onAttachmentsChange, model: modelProp, models, onModelChange, modelIcon, actions, onAddAgent, onDictationChange, disabled, onSubmit, className, ...props }: PromptBarProps): React.JSX.Element;

package/components/prompt-bar.js

@@ -0,0 +1,6 @@
+'use client';export { PromptBar, defaultActions } from '../chunk-6YXUBP27.js';
+import '../chunk-BKZBWPUH.js';
+import '../chunk-HNQUX43Z.js';
+import '../chunk-H63FYCMY.js';
+//# sourceMappingURL=prompt-bar.js.map
+//# sourceMappingURL=prompt-bar.js.map

package/components/prompt-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"prompt-bar.js"}

package/components/radio.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';
+/**
+ * Radio, 1:1 with the uiKit `_radioBase` (852:22410) and `Radio` (852:22426) sets: a 16px
+ * circle, checked as a solid primary fill with a 6px dot, with an optional label (14/20 medium,
+ * text/default) and description (14/20 regular, muted) 2px apart, 8px from the circle, on either
+ * side. Disabled turns both texts text/subtle. The look of every state is
+ * styles/components/radio.css.
+ *
+ * A Radio lives in a RadioGroup (Radix): the group owns the value, so `checked` (Figma's
+ * property) follows from the group's `value` / `defaultValue`, and arrow keys move between
+ * options. With a label or description the whole field is a `<label>`, so a click anywhere on
+ * it (circle, label, description) picks the option, and hovering it hovers the circle; the label
+ * names the circle, the description is wired with `aria-describedby`.
+ */
+export interface RadioGroupProps extends React.ComponentProps<typeof RadioGroupPrimitive.Root> {
+}
+export declare function RadioGroup({ className, ...props }: RadioGroupProps): React.JSX.Element;
+export interface RadioProps extends React.ComponentProps<typeof RadioGroupPrimitive.Item> {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    /** Which side of the text the circle sits on. */
+    placement?: 'left' | 'right';
+    /** Show a state without interacting, for state sheets. */
+    'data-force'?: 'hover' | 'focus' | 'pressed';
+}
+export declare function Radio({ className, label, description, placement, id, disabled, ...props }: RadioProps): React.JSX.Element;

package/components/radio.js

@@ -0,0 +1,4 @@
+'use client';export { Radio, RadioGroup } from '../chunk-LLHTVIM3.js';
+import '../chunk-H63FYCMY.js';
+//# sourceMappingURL=radio.js.map
+//# sourceMappingURL=radio.js.map

package/components/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"radio.js"}

package/components/search-bar.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+/**
+ * SearchBar, 1:1 with the uiKit `searchBar` (3233:18871): a 32px field for the sidebar that
+ * fills its container. A 16px search icon in text/muted, 13px text (placeholder text/subtle),
+ * 8px padding and gaps, radius-lg, border/default on bg/card with the xs shadow; hover takes
+ * border/strong, focus border/focus with the 2px focus ring. The ⌘K keys (Kbd sm) can be hidden
+ * with `shortcut={false}`.
+ *
+ * With `shortcut`, ⌘K or Ctrl+K anywhere on the page focuses it; Escape clears it.
+ */
+export interface SearchBarProps extends Omit<React.ComponentProps<'input'>, 'size'> {
+    /** Show the ⌘K keycaps and listen for the shortcut. */
+    shortcut?: boolean;
+    /** Listen for ⌘K / Ctrl+K. Defaults to `shortcut`; turn it off when something else owns the
+     *  shortcut (a Command menu this bar opens) but the keycaps should still show. */
+    hotkey?: boolean;
+    /** Classes for the outer field; `className` styles the input. */
+    wrapperClassName?: string;
+}
+export declare const SearchBar: React.ForwardRefExoticComponent<Omit<SearchBarProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/components/search-bar.js

@@ -0,0 +1,5 @@
+'use client';export { SearchBar } from '../chunk-UGRSWP6U.js';
+import '../chunk-BKZBWPUH.js';
+import '../chunk-H63FYCMY.js';
+//# sourceMappingURL=search-bar.js.map
+//# sourceMappingURL=search-bar.js.map

package/components/search-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"search-bar.js"}

package/components/segmented-control.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+/**
+ * SegmentedControl, from the uiKit `segmented control` page: 2–5 segments that switch
+ * views or filters in place. One segment is always selected; the selected pill slides under
+ * the labels to the new segment, as in Tabs and Pagination (sliding-indicator.tsx: 300 ms,
+ * the leading edge first): a white card with Shadow/sm in Light. Arrow keys move between segments.
+ * Values 1:1 with the uiKit `_segmentedControl/item` (3080:20278) and `SegmentedControl` (3080:21247) sets.
+ */
+type Size = 'xs' | 'md' | 'lg';
+type Shape = 'default' | 'rounded';
+export interface SegmentedControlItem {
+    value: string;
+    label: React.ReactNode;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+}
+export interface SegmentedControlProps {
+    items: SegmentedControlItem[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    size?: Size;
+    shape?: Shape;
+    /** A 1px border-subtle outline around the track. */
+    border?: boolean;
+    fullWidth?: boolean;
+    /** Required when the segments have no visible text of their own. */
+    'aria-label'?: string;
+    className?: string;
+}
+export declare function SegmentedControl({ items, value: valueProp, defaultValue, onValueChange, size, shape, border, fullWidth, className, ...aria }: SegmentedControlProps): React.JSX.Element;
+export {};

package/components/segmented-control.js

@@ -0,0 +1,5 @@
+'use client';export { SegmentedControl } from '../chunk-WTMZT3IT.js';
+import '../chunk-J3NSDRVH.js';
+import '../chunk-H63FYCMY.js';
+//# sourceMappingURL=segmented-control.js.map
+//# sourceMappingURL=segmented-control.js.map

package/components/segmented-control.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"segmented-control.js"}

package/components/select.d.ts

@@ -0,0 +1,97 @@
+import * as React from 'react';
+import { type MenuItemContentProps } from './dropdown';
+/**
+ * Select, 1:1 with the uiKit `Select` set (4022:3531): the field around it is Input's (a 13px
+ * medium label 8px above, a 13px hint or error under it), the trigger is Input's skin with the
+ * value and a 16px chevron (sm 28, md 32, lg 36; 12px in, 8px gaps), an optional 16px leading
+ * icon (by default the picked option's own icon, when the options have icons). Placeholder is text/muted, a value text/default. While the list is open the trigger
+ * keeps the focus border and ring.
+ *
+ * The list is the Dropdown menu: the same surface, rows, groups and options, so every option
+ * takes what a `DropdownMenuItem` takes (icon, description, stacked or inline layout, 20px
+ * icons, a shortcut) and the current one is marked with the check. It opens 4px under the
+ * trigger, at least as wide.
+ *
+ * Built on the Radix Select: arrow keys, typeahead, Home/End, Escape, a native form value
+ * (`name`), and focus back on the trigger. Inside a FormField, leave out `label`, `hint` and
+ * `error`.
+ */
+export interface SelectOption extends Omit<MenuItemContentProps, 'label' | 'selected' | 'renderLabel' | 'layout' | 'iconSize'> {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface SelectGroup {
+    label?: React.ReactNode;
+    options: SelectOption[];
+}
+export interface SelectProps {
+    /** Options, or titled groups of options. */
+    options: SelectOption[] | SelectGroup[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    placeholder?: string;
+    label?: React.ReactNode;
+    hint?: React.ReactNode;
+    /** An error message (replaces the hint), or `true` to mark the field invalid without one. */
+    error?: React.ReactNode | boolean;
+    size?: 'sm' | 'md' | 'lg';
+    /** A 16px icon before the value. Left out, the picked option's own icon shows there. */
+    leadingIcon?: React.ReactNode;
+    /** Row layout of every option: description under the label, or after it. */
+    layout?: MenuItemContentProps['layout'];
+    /** Option icon size; 20 suits stacked two-line options. */
+    iconSize?: MenuItemContentProps['iconSize'];
+    disabled?: boolean;
+    required?: boolean;
+    /** Form field name, for a native form submit. */
+    name?: string;
+    id?: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Portal target. Defaults to `document.body`. */
+    container?: HTMLElement | null;
+    'aria-label'?: string;
+    /** Classes for the outer wrapper (label + field + hint). `className` styles the trigger. */
+    wrapperClassName?: string;
+    className?: string;
+    /** Show a state without interacting, for state sheets. */
+    'data-force'?: 'hover' | 'focus';
+}
+export declare const isOptionGroups: <T>(o: T[] | {
+    options: T[];
+}[]) => o is {
+    options: T[];
+}[];
+/** Ids and state for a field with a label, a hint or an error, inside or outside a FormField. */
+export declare function useFieldChrome({ id, disabled, error, hint, }: {
+    id?: string;
+    disabled?: boolean;
+    error?: React.ReactNode | boolean;
+    hint?: React.ReactNode;
+}): {
+    controlId: string;
+    disabled: boolean;
+    invalid: boolean;
+    required: boolean | undefined;
+    describedBy: string | undefined;
+    message: React.ReactNode;
+    messageId: string | undefined;
+    isError: boolean;
+};
+/** Label 8px above the control, hint or error 8px under it: Input's field, for Select and Combobox. */
+export declare function FieldChrome({ label, action, chrome, className, children, }: {
+    label?: React.ReactNode;
+    /** On the label's line, at the field's right edge: the smallest button, e.g. Clear. */
+    action?: React.ReactNode;
+    chrome: ReturnType<typeof useFieldChrome>;
+    className?: string;
+    children: React.ReactNode;
+}): React.JSX.Element;
+/** The trigger's chevron, 16px in the icon colour. */
+export declare function SelectChevron({ className }: {
+    className?: string;
+}): React.JSX.Element;
+export declare function Select({ options, value, defaultValue, onValueChange, placeholder, label, hint, error, size, leadingIcon, layout, iconSize, disabled, required, name, id, open, defaultOpen, onOpenChange, container, wrapperClassName, className, 'data-force': force, ...props }: SelectProps): React.JSX.Element;

package/components/select.js

@@ -0,0 +1,7 @@
+'use client';export { FieldChrome, Select, SelectChevron, isOptionGroups, useFieldChrome } from '../chunk-72OCFAPT.js';
+import '../chunk-UBNHSZSE.js';
+import '../chunk-3DINAQLL.js';
+import '../chunk-BKZBWPUH.js';
+import '../chunk-H63FYCMY.js';
+//# sourceMappingURL=select.js.map
+//# sourceMappingURL=select.js.map

package/components/select.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"select.js"}

package/components/sheet.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { Dialog as DialogPrimitive } from 'radix-ui';
+/**
+ * Sheet, 1:1 with the uiKit `Sheet` set (4025:3504): a panel that slides in from an edge and sits
+ * flush with it, square and borderless on that side. bottom for phones (full width, radius-2xl
+ * on the top corners, a 24px handle band with a 36 × 4 border/strong grip); right or left for
+ * wider screens (400px, full height, radius-2xl on the inner corners, the Dialog's 36px close
+ * button 7px from the top-right corner). Both are bg/card with a
+ * border/subtle edge on the open side and the shadcn `lg` shadow, 16px in and 16px between a
+ * header (14px medium title over a 13px muted description, 2px apart), the content and a
+ * right-aligned footer of buttons 8px apart (on the bottom sheet they share the width).
+ *
+ * Built on the Radix Dialog: focus moves in on open and back to the trigger on close; Escape,
+ * the backdrop or the handle closes it. It slides in over 250 ms on ease-out and out over 200.
+ */
+export interface SheetProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Optional element that opens the sheet (rendered with `asChild`, so pass a Button). */
+    trigger?: React.ReactNode;
+    side?: 'bottom' | 'right' | 'left';
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** The buttons at the bottom. Wrap one in `SheetClose` to make it close the sheet. */
+    footer?: React.ReactNode;
+    children?: React.ReactNode;
+    /** Modal blocks the page and shows the overlay; turn it off for inline previews. */
+    modal?: boolean;
+    /** Portal target. Defaults to `document.body`. */
+    container?: HTMLElement | null;
+    onOpenAutoFocus?: (event: Event) => void;
+    className?: string;
+}
+export declare function Sheet({ open, defaultOpen, onOpenChange, trigger, side, title, description, footer, children, modal, container, onOpenAutoFocus, className, }: SheetProps): React.JSX.Element;
+/** Wrap a footer button in this to make it close the sheet: `<SheetClose asChild><Button…/></SheetClose>`. */
+export declare const SheetClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;

package/components/sheet.js

@@ -0,0 +1,6 @@
+'use client';export { Sheet, SheetClose } from '../chunk-TKO44NDI.js';
+import '../chunk-JPNWHWAQ.js';
+import '../chunk-HNQUX43Z.js';
+import '../chunk-H63FYCMY.js';
+//# sourceMappingURL=sheet.js.map
+//# sourceMappingURL=sheet.js.map

package/components/sheet.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"sheet.js"}