@nibapp/ui 0.0.0-stage → 0.1.0

package/dist/components/disclosure.d.ts

@@ -0,0 +1,33 @@
+import { Collapsible } from "@base-ui/react/collapsible";
+import { ChevronRight } from "lucide-react";
+import type { ComponentProps, ReactNode } from "react";
+export interface DisclosureChevronProps extends Omit<ComponentProps<typeof ChevronRight>, "children"> {
+    /**
+     * Whether what it heads is open. Leave it out inside a Base UI Collapsible or Accordion trigger: the
+     * chevron follows that trigger's state.
+     */
+    readonly open?: boolean | undefined;
+}
+/**
+ * The chevron of anything that opens in place (a tool call, a file's diff, a tree node, a quiet
+ * fold): forward while closed, turned down while open. It turns by transform on the snappy spring,
+ * at once under reduced motion; 14 px unless the caller sizes it, in the colour of the text around it.
+ */
+export declare function DisclosureChevron({ open, className, ...props }: DisclosureChevronProps): import("react").JSX.Element;
+/**
+ * Progressive disclosure: a quiet text button with a chevron that hides
+ * the less common options ("Advanced", "More options"). One level only — an advanced area that needs
+ * its own sections is a page. A list of things that each open (files, messages) is an `Accordion`.
+ */
+export interface DisclosureProps extends Omit<ComponentProps<typeof Collapsible.Root>, "children" | "render"> {
+    /** What's inside, in plain words ("Advanced", "Network and proxy"). */
+    readonly label: ReactNode;
+    /** Optional one-line hint after the label, e.g. how many options are inside. */
+    readonly hint?: ReactNode;
+    readonly children: ReactNode;
+    /** Classes for the panel's inner column. */
+    readonly panelClassName?: string;
+    /** `md` (default) heads a group of options; `sm` sits inline under a sentence. */
+    readonly size?: "sm" | "md";
+}
+export declare function Disclosure({ label, hint, children, size, className, panelClassName, ...props }: DisclosureProps): import("react").JSX.Element;

package/dist/components/disclosure.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Collapsible } from "@base-ui/react/collapsible";
+import { ChevronRight } from "lucide-react";
+import { cn, resolveClassName, tv } from "../lib/cn.js";
+const disclosureStyles = tv({
+    slots: {
+        trigger: [
+            // The padding gives the focus ring room and the margin keeps the label in line; the cap counts
+            // both, or a label in a column only as wide as itself (an empty state's Details) is cut.
+            // A small text control: under a coarse pointer, `touch-target` grows its hit area to 44 px.
+            "relative touch-target -mx-1 flex w-fit max-w-[calc(100%+0.5rem)] items-center px-1",
+            "text-fg-muted outline-none control-motion hover:text-fg focus-visible:ring-focus",
+        ],
+        chevron: "",
+        panel: "flex flex-col",
+    },
+    variants: {
+        size: {
+            /**
+             * Inline under a sentence in a toast, banner or row (a failure's Details): caption text, and the
+             * chevron in the text's colour, which holds on danger and warning tints too.
+             */
+            sm: { trigger: "gap-1 rounded-sm text-xs", chevron: "size-3", panel: "gap-1 pt-1" },
+            md: {
+                trigger: "gap-1.5 rounded-md py-0.5 text-sm font-medium",
+                chevron: "size-3.5 text-fg-subtle",
+                panel: "gap-4 pt-3",
+            },
+        },
+    },
+    defaultVariants: { size: "md" },
+});
+/**
+ * The chevron of anything that opens in place (a tool call, a file's diff, a tree node, a quiet
+ * fold): forward while closed, turned down while open. It turns by transform on the snappy spring,
+ * at once under reduced motion; 14 px unless the caller sizes it, in the colour of the text around it.
+ */
+export function DisclosureChevron({ open, className, ...props }) {
+    return (_jsx(ChevronRight, { "aria-hidden": true, "data-slot": "disclosure-chevron", className: cn("size-3.5 shrink-0 transition-transform duration-(--duration-spring-snappy) ease-(--ease-spring-snappy)", "motion-reduce:transition-none", 
+        // Mirrored right to left (base.css), so it turns the other way to point down.
+        open === undefined
+            ? "in-data-panel-open:rotate-90 rtl:in-data-panel-open:-rotate-90"
+            : open && "rotate-90 rtl:-rotate-90", className), ...props }));
+}
+export function Disclosure({ label, hint, children, size, className, panelClassName, ...props }) {
+    const styles = disclosureStyles({ size });
+    return (_jsxs(Collapsible.Root, { "data-slot": "disclosure", className: (state) => cn("flex flex-col", resolveClassName(className, state)), ...props, children: [_jsxs(Collapsible.Trigger, { "data-slot": "disclosure-trigger", className: styles.trigger(), children: [_jsx(DisclosureChevron, { className: styles.chevron() }), _jsx("span", { className: "min-w-0 truncate", children: label }), hint !== undefined && _jsx("span", { className: "shrink-0 font-normal text-fg-subtle", children: hint })] }), _jsx(Collapsible.Panel, { "data-slot": "disclosure-panel", className: cn(
+                // Opens at its full height at once (no layout motion); only the content fades in.
+                "transition-opacity duration-(--duration-fast) ease-standard", "data-starting-style:opacity-0 data-ending-style:opacity-0 motion-reduce:transition-none"), children: _jsx("div", { className: styles.panel({ className: panelClassName }), children: children }) })] }));
+}

package/dist/components/drawn-check.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentProps } from "react";
+export type DrawnCheckProps = Omit<ComponentProps<"svg">, "children">;
+/**
+ * The shared "done" glyph: a check whose stroke draws itself on the smooth spring when something
+ * just finished (a tool, a copy, a retry, an approval). Under Reduce Motion it's simply there.
+ * Sized like a 16 px icon; colour follows `currentColor`.
+ */
+export declare function DrawnCheck({ className, ...props }: DrawnCheckProps): import("react").JSX.Element;

package/dist/components/drawn-check.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useReducedMotion } from "motion/react";
+import * as m from "motion/react-m";
+import { cn } from "../lib/cn.js";
+import { KitMotion } from "../lib/kit-motion.js";
+import { spring } from "../lib/motion.js";
+/**
+ * The shared "done" glyph: a check whose stroke draws itself on the smooth spring when something
+ * just finished (a tool, a copy, a retry, an approval). Under Reduce Motion it's simply there.
+ * Sized like a 16 px icon; colour follows `currentColor`.
+ */
+export function DrawnCheck({ className, ...props }) {
+    const animate = useReducedMotion() !== true;
+    return (_jsx("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, "data-slot": "drawn-check", className: cn("size-4 shrink-0", className), ...props, children: _jsx(KitMotion, { children: _jsx(m.path, { d: "M3.5 8.5l3 3 6-7", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", initial: { pathLength: animate ? 0 : 1 }, animate: { pathLength: 1 }, transition: animate ? { ...spring.smooth, delay: 0.04 } : { duration: 0 } }) }) }));
+}

package/dist/components/edge-resizer.d.ts

@@ -0,0 +1,26 @@
+export interface EdgeResizerProps {
+    /**
+     * The box's edge the handle sits on, in the writing direction (`end` is the right edge left to
+     * right, the left edge right to left): dragging away from the box makes it wider.
+     */
+    readonly edge: "start" | "end";
+    /** Accessible name, e.g. "Resize sidebar". */
+    readonly label: string;
+    /** Current width, px. */
+    readonly value: number;
+    readonly min: number;
+    readonly max: number;
+    /** Called with the wanted width; the owner clamps and stores it. */
+    readonly onResize: (width: number) => void;
+    /** Double-click: back to the default width. */
+    readonly onReset: () => void;
+    readonly className?: string;
+}
+/**
+ * A vertical splitter on the edge of a fixed-width box (a sidebar, a floating panel), for
+ * boxes that aren't panels of a ResizablePanelGroup. A focusable `separator` with its value, so it
+ * works from the keyboard (←/→, Home/End) and reads as a splitter, like ResizableHandle. Pointer and
+ * arrow keys move the handle on screen, so in a right-to-left layout the same drag widens the box
+ * from its other side.
+ */
+export declare function EdgeResizer({ edge, label, value, min, max, onResize, onReset, className, }: EdgeResizerProps): import("react").JSX.Element;

package/dist/components/edge-resizer.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { cn } from "../lib/cn.js";
+import { useInlineSign } from "../lib/direction.js";
+const KEY_STEP = 16;
+/**
+ * A vertical splitter on the edge of a fixed-width box (a sidebar, a floating panel), for
+ * boxes that aren't panels of a ResizablePanelGroup. A focusable `separator` with its value, so it
+ * works from the keyboard (←/→, Home/End) and reads as a splitter, like ResizableHandle. Pointer and
+ * arrow keys move the handle on screen, so in a right-to-left layout the same drag widens the box
+ * from its other side.
+ */
+export function EdgeResizer({ edge, label, value, min, max, onResize, onReset, className, }) {
+    const start = useRef(null);
+    const inline = useInlineSign();
+    // +1 when the handle is on the box's right edge on screen: moving it right widens the box. The
+    // end edge is the right one left to right and the left one right to left.
+    const sign = (edge === "end" ? 1 : -1) * inline;
+    const onPointerDown = (event) => {
+        if (event.button !== 0) {
+            return;
+        }
+        event.preventDefault();
+        event.currentTarget.setPointerCapture(event.pointerId);
+        start.current = { x: event.clientX, width: value };
+    };
+    const onPointerMove = (event) => {
+        if (start.current !== null) {
+            onResize(start.current.width + (event.clientX - start.current.x) * sign);
+        }
+    };
+    const onPointerUp = () => {
+        start.current = null;
+    };
+    const onKeyDown = (event) => {
+        const step = (event.shiftKey ? KEY_STEP * 4 : KEY_STEP) * sign;
+        const next = event.key === "ArrowRight"
+            ? value + step
+            : event.key === "ArrowLeft"
+                ? value - step
+                : event.key === "Home"
+                    ? min
+                    : event.key === "End"
+                        ? max
+                        : undefined;
+        if (next !== undefined) {
+            event.preventDefault();
+            onResize(next);
+        }
+    };
+    return (_jsx("div", { role: "separator", "aria-orientation": "vertical", "aria-label": label, "aria-valuenow": Math.round(value), "aria-valuemin": min, "aria-valuemax": max, tabIndex: 0, "data-slot": "edge-resizer", className: cn("group/resizer absolute inset-y-0 z-20 flex w-2 cursor-col-resize touch-none justify-center outline-none", edge === "end" ? "-end-1" : "-start-1", className), onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, onKeyDown: onKeyDown, onDoubleClick: onReset, children: _jsx("span", { "aria-hidden": true, className: cn("h-full w-[3px] scale-x-[0.34] rounded-full bg-transparent", "transition-[background-color,scale] duration-(--duration-spring-snappy) ease-(--ease-spring-snappy) motion-reduce:transition-none", "group-hover/resizer:scale-x-100 group-hover/resizer:bg-border-strong", "group-active/resizer:scale-x-100 group-active/resizer:bg-fg-subtle", "group-focus-visible/resizer:scale-x-100 group-focus-visible/resizer:bg-focus") }) }));
+}

package/dist/components/empty-state.d.ts

@@ -0,0 +1,112 @@
+import { type ComponentProps, type ReactNode } from "react";
+import { type VariantProps } from "../lib/cn.js";
+declare const emptyState: import("tailwind-variants").TVReturnType<{
+    size: {
+        compact: {
+            root: string;
+            icon: string;
+            title: string;
+            description: string;
+        };
+        spacious: {
+            root: string;
+            icon: string;
+            title: string;
+            description: string;
+        };
+    };
+}, {
+    root: string;
+    icon: string[];
+    illustration: string;
+    title: string;
+    description: string;
+    actions: string;
+}, undefined, {
+    size: {
+        compact: {
+            root: string;
+            icon: string;
+            title: string;
+            description: string;
+        };
+        spacious: {
+            root: string;
+            icon: string;
+            title: string;
+            description: string;
+        };
+    };
+}, {
+    root: string;
+    icon: string[];
+    illustration: string;
+    title: string;
+    description: string;
+    actions: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        compact: {
+            root: string;
+            icon: string;
+            title: string;
+            description: string;
+        };
+        spacious: {
+            root: string;
+            icon: string;
+            title: string;
+            description: string;
+        };
+    };
+}, {
+    root: string;
+    icon: string[];
+    illustration: string;
+    title: string;
+    description: string;
+    actions: string;
+}>>;
+/** What an empty place is about, which picks its default scene: nothing yet, a failure, no connection, done. */
+export type EmptyStateIntent = "empty" | "error" | "offline" | "success";
+/** The size an empty state draws at, which a scene is drawn for. */
+export type EmptyStateSize = NonNullable<VariantProps<typeof emptyState>["size"]>;
+/** A host's art per intent, drawn at the empty state's size. */
+export type EmptyStateScenes = Partial<Record<EmptyStateIntent, (size: EmptyStateSize) => ReactNode>>;
+/**
+ * Gives every `EmptyState` below a default scene per intent: the art it shows when it's given neither
+ * an `illustration` nor an `icon`. The kit has no art of its own, so without a provider those show none.
+ */
+export declare function EmptyStateScenesProvider({ scenes, children, }: {
+    readonly scenes: EmptyStateScenes;
+    readonly children: ReactNode;
+}): import("react").JSX.Element;
+export interface EmptyStateProps extends Omit<ComponentProps<"div">, "title">, VariantProps<typeof emptyState> {
+    /** Small glyph shown in a raised tile. */
+    icon?: ReactNode;
+    /** Larger artwork (e.g. the mascot); replaces the icon tile. */
+    illustration?: ReactNode;
+    /**
+     * What this place is about (default `empty`): with neither `illustration` nor `icon`, it shows the
+     * scene `EmptyStateScenesProvider` gives for it.
+     */
+    intent?: EmptyStateIntent;
+    /**
+     * Set in the serif. Put one word in `<em>` for its italic accent; a translated string marks it with
+     * `richText` and an `em` element, so each language picks its own word.
+     */
+    title: ReactNode;
+    description?: ReactNode;
+    /** Buttons — usually one primary and one secondary at most. */
+    actions?: ReactNode;
+    /**
+     * The title's heading level: 3 inside a page or panel that has its own heading, 1 when the empty
+     * state is the whole page (a not-found or crash screen).
+     */
+    level?: 1 | 2 | 3;
+    /** Play the staggered entrance. Disable for states that flicker in and out. */
+    animated?: boolean;
+}
+/** Calm placeholder for empty lists, blank sessions and zero-result searches. */
+export declare function EmptyState({ icon, illustration, intent, title, description, actions, level, size, animated, className, ...props }: EmptyStateProps): import("react").JSX.Element;
+export {};

package/dist/components/empty-state.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as m from "motion/react-m";
+import { createContext, use } from "react";
+import { tv } from "../lib/cn.js";
+import { KitMotion } from "../lib/kit-motion.js";
+import { rise, stagger } from "../lib/motion.js";
+const emptyState = tv({
+    slots: {
+        root: "flex w-full flex-col items-center justify-center text-center",
+        icon: [
+            "mb-1 grid shrink-0 place-items-center border border-border bg-surface text-fg-muted",
+            "[box-shadow:var(--shadow-xs),var(--shadow-inset-edge)]",
+        ],
+        illustration: "mb-1 flex justify-center text-fg-subtle",
+        // The editorial serif (BRAND §5), at its regular weight; one word in <em> is the italic accent.
+        title: "font-serif font-normal tracking-tight text-fg text-balance [&_em]:italic",
+        description: "max-w-sm text-fg-muted text-pretty",
+        actions: "mt-2 flex flex-wrap items-center justify-center gap-2",
+    },
+    variants: {
+        size: {
+            compact: {
+                root: "gap-1.5 px-4 py-8",
+                icon: "size-9 rounded-lg [&_svg]:size-4",
+                title: "text-lg",
+                description: "text-sm",
+            },
+            spacious: {
+                root: "gap-2 px-6 py-16",
+                icon: "size-12 rounded-xl [&_svg]:size-5",
+                title: "text-2xl",
+                description: "text-base",
+            },
+        },
+    },
+    defaultVariants: { size: "spacious" },
+});
+const container = stagger(0.05, 0.04);
+const HEADINGS = { 1: m.h1, 2: m.h2, 3: m.h3 };
+const ScenesContext = createContext({});
+/**
+ * Gives every `EmptyState` below a default scene per intent: the art it shows when it's given neither
+ * an `illustration` nor an `icon`. The kit has no art of its own, so without a provider those show none.
+ */
+export function EmptyStateScenesProvider({ scenes, children, }) {
+    return _jsx(ScenesContext, { value: scenes, children: children });
+}
+/** Calm placeholder for empty lists, blank sessions and zero-result searches. */
+export function EmptyState({ icon, illustration, intent = "empty", title, description, actions, level = 3, size, animated = true, className, ...props }) {
+    const styles = emptyState({ size });
+    const scenes = use(ScenesContext);
+    const art = illustration ?? (icon === undefined ? scenes[intent]?.(size ?? "spacious") : undefined);
+    const Heading = HEADINGS[level];
+    return (_jsx("div", { "data-slot": "empty-state", "data-intent": intent, className: styles.root({ className }), ...props, children: _jsx(KitMotion, { children: _jsxs(m.div, { className: "contents", variants: container, initial: animated ? "initial" : false, animate: "animate", children: [art ? (_jsx(m.div, { variants: rise, className: styles.illustration(), children: art })) : (icon && (_jsx(m.div, { variants: rise, "aria-hidden": true, className: styles.icon(), children: icon }))), _jsx(Heading, { variants: rise, className: styles.title(), children: title }), description && (_jsx(m.div, { variants: rise, className: styles.description(), children: description })), actions && (_jsx(m.div, { variants: rise, className: styles.actions(), children: actions }))] }) }) }));
+}

package/dist/components/expand-toggle.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+export interface ExpandToggleProps {
+    readonly expanded: boolean;
+    readonly onToggle: () => void;
+    /** The words for the state it switches to ("Show more", "Show all", "Show less"). */
+    readonly children: ReactNode;
+    /** What expanding reveals ("248 lines"), shown after the words while collapsed. */
+    readonly detail?: string | undefined;
+    /** The id of the box it opens and closes. */
+    readonly controls?: string | undefined;
+    /** Opening is under way (a transition): the button says so. */
+    readonly pending?: boolean | undefined;
+    readonly className?: string | undefined;
+}
+/**
+ * The quiet "Show more / Show less" under clamped or capped content: one button, a chevron that
+ * turns, `aria-expanded` (and `aria-controls` when it names the box).
+ */
+export declare function ExpandToggle({ expanded, onToggle, children, detail, controls, pending, className, }: ExpandToggleProps): import("react").JSX.Element;

package/dist/components/expand-toggle.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../lib/cn.js";
+/**
+ * The quiet "Show more / Show less" under clamped or capped content: one button, a chevron that
+ * turns, `aria-expanded` (and `aria-controls` when it names the box).
+ */
+export function ExpandToggle({ expanded, onToggle, children, detail, controls, pending, className, }) {
+    return (_jsxs("button", { type: "button", "data-slot": "expand-toggle", "aria-expanded": expanded, "aria-controls": controls, "aria-busy": pending === true || undefined, onClick: onToggle, className: cn("inline-flex h-6 shrink-0 items-center gap-1 rounded-sm font-sans text-xs text-fg-subtle outline-none", "transition-colors duration-(--duration-fast) hover:text-fg focus-visible:ring-focus", className), children: [children, !expanded && detail !== undefined && _jsxs("span", { className: "text-fg-subtle tabular", children: ["\u00B7 ", detail] }), _jsx(ChevronDown, { "aria-hidden": true, className: cn("size-3 transition-transform duration-(--duration-fast) motion-reduce:transition-none", expanded && "rotate-180") })] }));
+}

package/dist/components/field.d.ts

@@ -0,0 +1,48 @@
+import { Field as BaseField } from "@base-ui/react/field";
+import { Fieldset as BaseFieldset } from "@base-ui/react/fieldset";
+import type { ComponentProps, ReactNode } from "react";
+/** Groups a control with its label, description and error. Every input in the kit works inside it. */
+export declare function FieldRoot({ className, ...props }: ComponentProps<typeof BaseField.Root>): import("react").JSX.Element;
+export declare function FieldLabel({ className, ...props }: ComponentProps<typeof BaseField.Label>): import("react").JSX.Element;
+export declare function FieldDescription({ className, ...props }: ComponentProps<typeof BaseField.Description>): import("react").JSX.Element;
+/**
+ * Validation message. Without `match` it renders the browser's message whenever the field is
+ * invalid; pass `match={true}` to drive visibility from your own state.
+ */
+export declare function FieldError({ className, children, ...props }: ComponentProps<typeof BaseField.Error>): import("react").JSX.Element;
+/** One option inside a checkbox or radio group that sits within a Field. */
+export declare function FieldItem({ className, ...props }: ComponentProps<typeof BaseField.Item>): import("react").JSX.Element;
+/** A titled group of fields (or of checkboxes/radios via `render={<CheckboxGroup />}`). */
+export declare function Fieldset({ className, ...props }: ComponentProps<typeof BaseFieldset.Root>): import("react").JSX.Element;
+export declare function FieldsetLegend({ className, ...props }: ComponentProps<typeof BaseFieldset.Legend>): import("react").JSX.Element;
+/**
+ * Under a form's fields, the controls that complete it (a role, Send): on one line while the width
+ * holds them, wrapping onto the next when it doesn't, and lined up on their controls. A field in the
+ * row keeps its label and no description, so a hint can't push the others out of line: the hint
+ * belongs to the full-width field above.
+ */
+export declare function FieldActions({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export interface FieldProps extends Omit<ComponentProps<typeof BaseField.Root>, "children"> {
+    label?: ReactNode;
+    /** Muted trailing text in the label row — "Optional", a character count… */
+    hint?: ReactNode;
+    description?: ReactNode;
+    /**
+     * Forces the field invalid and shows this message. Omit to show the browser's validation
+     * message after Base UI validates the control.
+     */
+    error?: ReactNode;
+    /**
+     * `vertical` stacks label → control → description. `horizontal` puts the copy on the left and
+     * the control on the right — the settings-row layout for switches and compact selects.
+     */
+    orientation?: "vertical" | "horizontal";
+    /**
+     * Set to `false` for button controls (Select, Combobox trigger) so clicking the label focuses
+     * rather than presses the trigger.
+     */
+    nativeLabel?: boolean;
+    children: ReactNode;
+}
+/** Label + control + description + error in one. */
+export declare function Field({ label, hint, description, error, orientation, nativeLabel, invalid, className, children, ...props }: FieldProps): import("react").JSX.Element;

package/dist/components/field.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Field as BaseField } from "@base-ui/react/field";
+import { Fieldset as BaseFieldset } from "@base-ui/react/fieldset";
+import { CircleAlert } from "lucide-react";
+import { cn, resolveClassName, withBase } from "../lib/cn.js";
+/* ------------------------------------------------------------------------------------------ */
+/* Parts                                                                                      */
+/* ------------------------------------------------------------------------------------------ */
+/** Groups a control with its label, description and error. Every input in the kit works inside it. */
+export function FieldRoot({ className, ...props }) {
+    return (_jsx(BaseField.Root, { "data-slot": "field", className: withBase("flex min-w-0 flex-col gap-1.5", className), ...props }));
+}
+export function FieldLabel({ className, ...props }) {
+    return (_jsx(BaseField.Label, { "data-slot": "field-label", className: withBase("inline-flex w-fit select-none items-center gap-1.5 text-sm font-medium text-fg data-disabled:opacity-45", className), ...props }));
+}
+export function FieldDescription({ className, ...props }) {
+    return (_jsx(BaseField.Description, { "data-slot": "field-description", 
+        // Stays readable when the field is disabled: it is often what says why.
+        className: withBase("text-sm text-fg-subtle", className), ...props }));
+}
+/**
+ * Validation message. Without `match` it renders the browser's message whenever the field is
+ * invalid; pass `match={true}` to drive visibility from your own state.
+ */
+export function FieldError({ className, children, ...props }) {
+    return (_jsxs(BaseField.Error, { "data-slot": "field-error", className: withBase(cn("flex items-start gap-1.5 text-sm text-danger-fg", "transition-[opacity,translate] duration-(--duration-spring-snappy) ease-(--ease-spring-snappy)", "data-starting-style:-translate-y-0.5 data-starting-style:opacity-0", "data-ending-style:-translate-y-0.5 data-ending-style:opacity-0 motion-reduce:transition-none"), className), ...props, children: [_jsx(CircleAlert, { "aria-hidden": true, className: "mt-[3px] size-3.5 shrink-0" }), _jsx("span", { className: "min-w-0", children: children ?? _jsx(BaseField.Validity, { children: (validity) => validity.error }) })] }));
+}
+/** One option inside a checkbox or radio group that sits within a Field. */
+export function FieldItem({ className, ...props }) {
+    return (_jsx(BaseField.Item, { "data-slot": "field-item", className: withBase("flex min-w-0 flex-col", className), ...props }));
+}
+/** A titled group of fields (or of checkboxes/radios via `render={<CheckboxGroup />}`). */
+export function Fieldset({ className, ...props }) {
+    return (_jsx(BaseFieldset.Root, { "data-slot": "fieldset", className: withBase("m-0 flex min-w-0 flex-col gap-3 border-0 p-0", className), ...props }));
+}
+export function FieldsetLegend({ className, ...props }) {
+    return (_jsx(BaseFieldset.Legend, { "data-slot": "fieldset-legend", className: withBase("p-0 text-base font-medium text-fg data-disabled:opacity-45", className), ...props }));
+}
+/**
+ * Under a form's fields, the controls that complete it (a role, Send): on one line while the width
+ * holds them, wrapping onto the next when it doesn't, and lined up on their controls. A field in the
+ * row keeps its label and no description, so a hint can't push the others out of line: the hint
+ * belongs to the full-width field above.
+ */
+export function FieldActions({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "field-actions", className: cn("flex flex-wrap items-end gap-3", className), ...props }));
+}
+/** Label + control + description + error in one. */
+export function Field({ label, hint, description, error, orientation = "vertical", nativeLabel = true, invalid, className, children, ...props }) {
+    const hasError = error !== undefined && error !== null && error !== false;
+    const labelNode = label === undefined ? null : (_jsx(FieldLabel, { ...(nativeLabel ? {} : { nativeLabel: false, render: _jsx("div", {}) }), children: label }));
+    const labelRow = hint === undefined ? (labelNode) : (_jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [labelNode, _jsx("span", { className: "text-xs text-fg-subtle tabular", children: hint })] }));
+    const errorNode = hasError ? _jsx(FieldError, { match: true, children: error }) : _jsx(FieldError, {});
+    const descriptionNode = description === undefined ? null : _jsx(FieldDescription, { children: description });
+    if (orientation === "horizontal") {
+        return (_jsxs(FieldRoot, { invalid: hasError || invalid, className: (state) => cn("flex-row items-center justify-between gap-6", resolveClassName(className, state)), ...props, children: [_jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [labelRow, descriptionNode, errorNode] }), _jsx("div", { className: "flex shrink-0 items-center", children: children })] }));
+    }
+    return (_jsxs(FieldRoot, { invalid: hasError || invalid, className: className, ...props, children: [labelRow, children, descriptionNode, errorNode] }));
+}

package/dist/components/filter-chip.d.ts

@@ -0,0 +1,47 @@
+import { Toggle as BaseToggle } from "@base-ui/react/toggle";
+import type { ComponentProps, ReactNode } from "react";
+import { type VariantProps } from "../lib/cn.js";
+declare const filterChipStyles: import("tailwind-variants").TVReturnType<{
+    size: {
+        /** Inside a picker or a popup. */
+        sm: "h-6 text-xs [&_svg:not([class*='size-'])]:size-3.5";
+        md: "h-7 text-sm [&_svg:not([class*='size-'])]:size-4";
+    };
+    /** On: ink, like the primary button. Off: a quiet surface with a faint hairline. */
+    pressed: {
+        true: "border-transparent bg-primary text-primary-fg";
+        false: "border-border-subtle bg-surface text-fg-muted hover:border-border hover:text-fg";
+    };
+}, undefined, string[], {
+    size: {
+        /** Inside a picker or a popup. */
+        sm: "h-6 text-xs [&_svg:not([class*='size-'])]:size-3.5";
+        md: "h-7 text-sm [&_svg:not([class*='size-'])]:size-4";
+    };
+    /** On: ink, like the primary button. Off: a quiet surface with a faint hairline. */
+    pressed: {
+        true: "border-transparent bg-primary text-primary-fg";
+        false: "border-border-subtle bg-surface text-fg-muted hover:border-border hover:text-fg";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        /** Inside a picker or a popup. */
+        sm: "h-6 text-xs [&_svg:not([class*='size-'])]:size-3.5";
+        md: "h-7 text-sm [&_svg:not([class*='size-'])]:size-4";
+    };
+    /** On: ink, like the primary button. Off: a quiet surface with a faint hairline. */
+    pressed: {
+        true: "border-transparent bg-primary text-primary-fg";
+        false: "border-border-subtle bg-surface text-fg-muted hover:border-border hover:text-fg";
+    };
+}, undefined>>;
+export interface FilterChipProps extends ComponentProps<typeof BaseToggle>, Omit<VariantProps<typeof filterChipStyles>, "pressed"> {
+    /** Icon or logo before the label. */
+    leading?: ReactNode;
+}
+/**
+ * One filter of a list ("All", "Skills", a provider) as an on/off pill: `aria-pressed`, ink when on.
+ * A row of them narrows a list; one choice of a few that always has one is a SegmentedControl.
+ */
+export declare function FilterChip({ size, leading, className, children, ...props }: FilterChipProps): import("react").JSX.Element;
+export {};

package/dist/components/filter-chip.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Toggle as BaseToggle } from "@base-ui/react/toggle";
+import { cn, resolveClassName, tv } from "../lib/cn.js";
+const filterChipStyles = tv({
+    base: [
+        "relative inline-flex shrink-0 select-none items-center justify-center gap-1.5 whitespace-nowrap rounded-full border px-3 touch-target",
+        "outline-none transition-[background-color,border-color,color] duration-(--duration-fast) ease-(--ease-standard)",
+        "focus-visible:ring-focus",
+        "data-disabled:pointer-events-none data-disabled:opacity-45",
+        "[&_svg]:shrink-0",
+    ],
+    variants: {
+        size: {
+            /** Inside a picker or a popup. */
+            sm: "h-6 text-xs [&_svg:not([class*='size-'])]:size-3.5",
+            md: "h-7 text-sm [&_svg:not([class*='size-'])]:size-4",
+        },
+        /** On: ink, like the primary button. Off: a quiet surface with a faint hairline. */
+        pressed: {
+            true: "border-transparent bg-primary text-primary-fg",
+            false: "border-border-subtle bg-surface text-fg-muted hover:border-border hover:text-fg",
+        },
+    },
+    defaultVariants: { size: "md", pressed: false },
+});
+/**
+ * One filter of a list ("All", "Skills", a provider) as an on/off pill: `aria-pressed`, ink when on.
+ * A row of them narrows a list; one choice of a few that always has one is a SegmentedControl.
+ */
+export function FilterChip({ size, leading, className, children, ...props }) {
+    return (_jsxs(BaseToggle, { "data-slot": "filter-chip", className: (state) => cn(filterChipStyles({ size, pressed: state.pressed }), resolveClassName(className, state)), ...props, children: [leading, children] }));
+}

package/dist/components/group.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentProps } from "react";
+export interface GroupProps extends Omit<ComponentProps<"div">, "role"> {
+    /** What the group is, for assistive tech (`aria-label`). */
+    readonly label?: string | undefined;
+}
+/**
+ * A labelled group (`role="group"`) that isn't a form: a row of toggle buttons, a stack of avatars,
+ * a run of status text. A `<fieldset>` is for form controls and brings its own border and legend.
+ */
+export declare function Group({ label, ...props }: GroupProps): import("react").JSX.Element;

package/dist/components/group.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A labelled group (`role="group"`) that isn't a form: a row of toggle buttons, a stack of avatars,
+ * a run of status text. A `<fieldset>` is for form controls and brings its own border and legend.
+ */
+export function Group({ label, ...props }) {
+    // biome-ignore lint/a11y/useSemanticElements: this is the one non-form group; <fieldset> is for form controls.
+    return _jsx("div", { role: "group", "aria-label": label, ...props });
+}

package/dist/components/icon-text.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentProps, ReactNode } from "react";
+export interface IconTextProps extends ComponentProps<"span"> {
+    /** Decorative: the words say what it marks. */
+    icon: ReactNode;
+}
+/**
+ * An icon and the words it marks, kept together in any language and at any width: the icon sits on
+ * the text's first line and the text wraps beside it, never under an icon left alone on a line. The
+ * icon's box is one line of the text's height; gap, colour and size come from `className`.
+ */
+export declare function IconText({ icon, className, children, ...props }: IconTextProps): import("react").JSX.Element;

package/dist/components/icon-text.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+/**
+ * An icon and the words it marks, kept together in any language and at any width: the icon sits on
+ * the text's first line and the text wraps beside it, never under an icon left alone on a line. The
+ * icon's box is one line of the text's height; gap, colour and size come from `className`.
+ */
+export function IconText({ icon, className, children, ...props }) {
+    return (_jsxs("span", { "data-slot": "icon-text", className: cn("flex min-w-0 items-start gap-2", className), ...props, children: [_jsx("span", { "aria-hidden": true, className: "flex h-lh shrink-0 items-center", children: icon }), _jsx("span", { className: "min-w-0", children: children })] }));
+}