panelui-web 0.4.0 → 0.6.0

package/dist/components/flow/index.js

@@ -32,6 +32,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * a new `position` and the node goes to it, which is how nodes are driven
  * from outside.
  *
+ * A node drawn inside a `Flow.Group` is positioned within it, and travels
+ * with it. `confine` keeps its drag inside the group's box; `pinned` gives the
+ * drag to the group instead, so the node moves only when the group does.
+ *
  * Edges are drawn from the boxes of the nodes they join, measured off the
  * page. An edge therefore follows a node whatever is inside it, and redraws
  * as either end is dragged.
@@ -94,6 +98,8 @@ const flowVariants = tv({
 });
 const FlowContext = createContext(null);
 const NodeContext = createContext(null);
+/** The group a node is drawn inside, if any. */
+const GroupContext = createContext(null);
 function useFlow(part) {
     const flow = useContext(FlowContext);
     if (!flow)
@@ -111,7 +117,18 @@ function FlowRoot({ defaultViewport = { x: 0, y: 0, zoom: 1 }, minZoom = 0.3, ma
     const slots = flowVariants();
     const root = useRef(null);
     const [viewport, setViewportState] = useState(defaultViewport);
-    const [rects, setRects] = useState({});
+    const [local, setRects] = useState({});
+    const [parents, setParents] = useState({});
+    // A node in a group is placed relative to it; everything that draws or
+    // fits reads the box where it actually is on the graph.
+    const rects = useMemo(() => {
+        const out = {};
+        for (const [id, box] of Object.entries(local)) {
+            const parent = parents[id] ? local[parents[id]] : undefined;
+            out[id] = parent ? { ...box, x: parent.x + box.x, y: parent.y + box.y } : box;
+        }
+        return out;
+    }, [local, parents]);
     const [handles, setHandles] = useState({});
     const [locked, setLocked] = useState(false);
     const [size, setSize] = useState({ width: 0, height: 0 });
@@ -275,7 +292,15 @@ function FlowRoot({ defaultViewport = { x: 0, y: 0, zoom: 1 }, minZoom = 0.3, ma
         window.addEventListener('pointerup', up);
         window.addEventListener('pointercancel', up);
     }, [toGraph]);
-    const place = useCallback((id, position) => {
+    const place = useCallback((id, position, group) => {
+        if (group !== undefined) {
+            setParents((current) => {
+                if ((current[id] ?? null) === group)
+                    return current;
+                const { [id]: _was, ...rest } = current;
+                return group ? { ...rest, [id]: group } : rest;
+            });
+        }
         setRects((current) => {
             const before = current[id];
             if (before && before.x === position.x && before.y === position.y)
@@ -295,6 +320,12 @@ function FlowRoot({ defaultViewport = { x: 0, y: 0, zoom: 1 }, minZoom = 0.3, ma
         });
     }, []);
     const forget = useCallback((id) => {
+        setParents((current) => {
+            if (!(id in current))
+                return current;
+            const { [id]: _gone, ...rest } = current;
+            return rest;
+        });
         setRects((current) => {
             if (!(id in current))
                 return current;
@@ -311,6 +342,7 @@ function FlowRoot({ defaultViewport = { x: 0, y: 0, zoom: 1 }, minZoom = 0.3, ma
     const context = useMemo(() => ({
         viewport,
         rects,
+        local,
         handles,
         locked,
         size,
@@ -328,6 +360,7 @@ function FlowRoot({ defaultViewport = { x: 0, y: 0, zoom: 1 }, minZoom = 0.3, ma
     }), [
         viewport,
         rects,
+        local,
         handles,
         locked,
         size,
@@ -384,16 +417,28 @@ function FlowBackground({ variant = 'dots', gap = 24, size, className }) {
 }
 FlowBackground.displayName = 'Flow.Background';
 /** What a node and a group share: a box on the graph that can be moved. */
-function useMovable({ id, position, draggable, onPress, onDelete, moveStep, }) {
+function useMovable({ id, position, draggable, confine, pinned, group, onPress, onDelete, moveStep, }) {
     const flow = useFlow('Flow.Node');
     const element = useRef(null);
     const { place, measure, forget } = flow;
     const step = moveStep ?? 24;
+    const movable = draggable !== false && !pinned && !flow.locked;
     useLayoutEffect(() => {
-        place(id, position);
+        place(id, position, group);
         // Only when the caller's position changes, not on every drawing.
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [id, position.x, position.y, place]);
+    }, [id, position.x, position.y, group, place]);
+    /** Where a move would put it, held inside its group when it is confined. */
+    const within = (next) => {
+        const box = group && confine ? flow.local[group] : undefined;
+        if (!box || box.width === 0)
+            return next;
+        const self = flow.local[id];
+        return {
+            x: clamp(next.x, 0, Math.max(0, box.width - (self?.width ?? 0))),
+            y: clamp(next.y, 0, Math.max(0, box.height - (self?.height ?? 0))),
+        };
+    };
     useLayoutEffect(() => {
         const node = element.current;
         if (!node)
@@ -405,7 +450,7 @@ function useMovable({ id, position, draggable, onPress, onDelete, moveStep, }) {
         return () => observer.disconnect();
     }, [id, measure]);
     useEffect(() => () => forget(id), [id, forget]);
-    const at = flow.rects[id] ?? { ...position, width: 0, height: 0 };
+    const at = flow.local[id] ?? { ...position, width: 0, height: 0 };
     const drag = useRef(null);
     const latest = useRef(at);
     latest.current = at;
@@ -416,6 +461,10 @@ function useMovable({ id, position, draggable, onPress, onDelete, moveStep, }) {
         if (event.target.closest('[data-flow-handle], button, a, input, textarea, select, [data-no-drag]')) {
             return;
         }
+        // A pinned node lets the press through to the group it is in, which
+        // takes the drag.
+        if (pinned && group)
+            return;
         // Kept from the pane, and from a group this node may be sitting in.
         event.stopPropagation();
         event.currentTarget.setPointerCapture(event.pointerId);
@@ -430,9 +479,9 @@ function useMovable({ id, position, draggable, onPress, onDelete, moveStep, }) {
         if (!state.moved && Math.hypot(dx, dy) < 3)
             return;
         state.moved = true;
-        if (draggable === false || flow.locked)
+        if (!movable)
             return;
-        place(id, { x: state.from.x + dx / flow.viewport.zoom, y: state.from.y + dy / flow.viewport.zoom });
+        place(id, within({ x: state.from.x + dx / flow.viewport.zoom, y: state.from.y + dy / flow.viewport.zoom }));
     };
     const onPointerUp = () => {
         const state = drag.current;
@@ -441,7 +490,7 @@ function useMovable({ id, position, draggable, onPress, onDelete, moveStep, }) {
             return;
         if (!state.moved)
             onPress?.();
-        else if (draggable !== false && !flow.locked) {
+        else if (movable) {
             flow.onNodeDragEnd?.(id, { x: latest.current.x, y: latest.current.y });
         }
     };
@@ -458,11 +507,11 @@ function useMovable({ id, position, draggable, onPress, onDelete, moveStep, }) {
         if (by) {
             // Kept from the canvas, which would pan on the same key.
             event.stopPropagation();
-            if (draggable === false || flow.locked)
+            if (!movable)
                 return;
             event.preventDefault();
             const far = step * (event.shiftKey ? 4 : 1);
-            const next = { x: at.x + by[0] * far, y: at.y + by[1] * far };
+            const next = within({ x: at.x + by[0] * far, y: at.y + by[1] * far });
             place(id, next);
             flow.onNodeDragEnd?.(id, next);
         }
@@ -492,18 +541,19 @@ function useMovable({ id, position, draggable, onPress, onDelete, moveStep, }) {
     };
 }
 /** A box on the graph. Fill it with the node parts below, or with anything of your own. */
-function FlowNode({ id, position, draggable = true, selected = false, onPress, onDelete, moveStep, className, style, children, ...props }) {
-    const movable = useMovable({ id, position, draggable, onPress, onDelete, moveStep });
-    return (_jsx(NodeContext.Provider, { value: id, children: _jsx("div", { ref: movable.element, "data-flow-node": id, tabIndex: 0, "aria-roledescription": "Node", "aria-selected": selected || undefined, className: flowVariants({ selected }).node({ className }), style: { ...movable.style, ...style }, ...movable.handlers, ...props, children: children }) }));
+function FlowNode({ id, position, draggable = true, confine = false, pinned = false, selected = false, onPress, onDelete, moveStep, className, style, children, ...props }) {
+    const group = useContext(GroupContext);
+    const movable = useMovable({ id, position, draggable, confine, pinned, group, onPress, onDelete, moveStep });
+    return (_jsx(NodeContext.Provider, { value: id, children: _jsx("div", { ref: movable.element, "data-flow-node": id, "data-pinned": pinned && group ? '' : undefined, tabIndex: 0, "aria-roledescription": "Node", "aria-selected": selected || undefined, className: flowVariants({ selected }).node({ className }), style: { ...movable.style, ...style }, ...movable.handlers, ...props, children: children }) }));
 }
 FlowNode.displayName = 'Flow.Node';
 /**
  * A dashed box round a few things that belong together. It is a node like any
  * other: it is dragged as one, and an edge can be joined to it.
  */
-function FlowGroup({ id, position, draggable = true, selected: _selected, onPress, onDelete, moveStep, label, className, style, children, ...props }) {
-    const movable = useMovable({ id, position, draggable, onPress, onDelete, moveStep });
-    return (_jsx(NodeContext.Provider, { value: id, children: _jsxs("div", { ref: movable.element, "data-flow-node": id, tabIndex: 0, "aria-roledescription": "Group", className: flowVariants().group({ className }), style: { ...movable.style, ...style }, ...movable.handlers, ...props, children: [label !== undefined ? _jsx("span", { className: flowVariants().groupLabel(), children: label }) : null, children] }) }));
+function FlowGroup({ id, position, draggable = true, selected: _selected, onPress, onDelete, moveStep, label, size, className, style, children, ...props }) {
+    const movable = useMovable({ id, position, draggable, group: null, onPress, onDelete, moveStep });
+    return (_jsx(GroupContext.Provider, { value: id, children: _jsx(NodeContext.Provider, { value: id, children: _jsxs("div", { ref: movable.element, "data-flow-node": id, tabIndex: 0, "aria-roledescription": "Group", className: flowVariants().group({ className }), style: { ...movable.style, ...(size ? { width: size.width, height: size.height } : null), ...style }, ...movable.handlers, ...props, children: [label !== undefined ? _jsx("span", { className: flowVariants().groupLabel(), children: label }) : null, children] }) }) }));
 }
 FlowGroup.displayName = 'Flow.Group';
 /** A strip across the top of a node, ruled off from the rest: a step number and a state. */
@@ -566,7 +616,18 @@ function FlowHandle({ id, position = 'right', offset = 0.5, className, style, ..
         }, ...props }));
 }
 FlowHandle.displayName = 'Flow.Handle';
-const endpoint = (reference) => typeof reference === 'string' ? { node: reference } : reference;
+/**
+ * `"node"`, `"node.handle"` or `{ node, handle }`. A string that is a node's
+ * whole id names that node, so an id with a dot in it still works.
+ */
+const endpoint = (reference, rects) => {
+    if (typeof reference !== 'string')
+        return reference;
+    const dot = reference.lastIndexOf('.');
+    if (dot <= 0 || reference in rects)
+        return { node: reference };
+    return { node: reference.slice(0, dot), handle: reference.slice(dot + 1) };
+};
 /** A line from one node to another, which follows them as they move. */
 function FlowEdge({ from, to, variant = 'bezier', animated = false, dashed = false, color, width = 2, arrow = false, fromSide, toSide, radius = 8, gap = 20, curvature = 0.25, }) {
     const flow = useFlow('Flow.Edge');
@@ -579,8 +640,8 @@ function FlowEdge({ from, to, variant = 'bezier', animated = false, dashed = fal
         query.addEventListener('change', read);
         return () => query.removeEventListener('change', read);
     }, []);
-    const source = endpoint(from);
-    const target = endpoint(to);
+    const source = endpoint(from, flow.rects);
+    const target = endpoint(to, flow.rects);
     const a = flow.rects[source.node];
     const b = flow.rects[target.node];
     // Nothing to draw until both ends have been measured.

package/dist/components/input/index.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Input — a single line to type into.
+ *
+ * ```tsx
+ * <Input placeholder="you@example.com" type="email" />
+ *
+ * <Input.Group>
+ *   <Input.Addon><SearchIcon /></Input.Addon>
+ *   <Input placeholder="Search" />
+ *   <Input.Addon align="end"><kbd>⌘K</kbd></Input.Addon>
+ * </Input.Group>
+ * ```
+ *
+ * ## The group owns the box
+ *
+ * On its own, the input draws its border, background and focus ring. Inside
+ * `Input.Group`, it drops all three and the group draws them around the input
+ * and its addons together, so an icon or a unit reads as part of the field and
+ * the ring goes round the whole of it. Pressing an addon that is not a button
+ * moves focus into the input.
+ */
+import type { ComponentProps } from 'react';
+export type InputSize = 'sm' | 'md' | 'lg';
+export interface InputProps extends Omit<ComponentProps<'input'>, 'size'> {
+    /** Its height and text size. Inside a group, set it on the group instead. Default `md`. */
+    size?: InputSize;
+}
+/** A single-line field. Every attribute of `<input>` passes through. */
+declare function InputRoot({ size, className, type, ...props }: InputProps): import("react").JSX.Element;
+declare namespace InputRoot {
+    var displayName: string;
+}
+export interface InputGroupProps extends ComponentProps<'div'> {
+    /** The height of the input and its addons together. Default `md`. */
+    size?: InputSize;
+}
+/** Draws one box round an input and its addons. */
+declare function InputGroup({ size, className, ...props }: InputGroupProps): import("react").JSX.Element;
+declare namespace InputGroup {
+    var displayName: string;
+}
+export interface InputAddonProps extends ComponentProps<'div'> {
+    /** Which side of the input it sits on, whatever its place in the markup. Default `start`. */
+    align?: 'start' | 'end';
+}
+/** An icon, unit, shortcut or button beside the input, inside its box. */
+declare function InputAddon({ align, className, onMouseDown, ...props }: InputAddonProps): import("react").JSX.Element;
+declare namespace InputAddon {
+    var displayName: string;
+}
+export declare const Input: typeof InputRoot & {
+    Group: typeof InputGroup;
+    Addon: typeof InputAddon;
+};
+export { InputGroup, InputAddon };

package/dist/components/input/index.js

@@ -0,0 +1,89 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { tv } from 'tailwind-variants';
+const inputVariants = tv({
+    slots: {
+        input: [
+            'w-full min-w-0 bg-transparent text-foreground outline-none',
+            'placeholder:text-muted-foreground/80 selection:bg-primary selection:text-primary-foreground',
+            'file:me-3 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground',
+            'disabled:cursor-not-allowed disabled:opacity-50',
+            // Alone, it is the box. In a group, the group is.
+            'not-in-data-[slot=input-group]:rounded-lg not-in-data-[slot=input-group]:border not-in-data-[slot=input-group]:border-input',
+            'not-in-data-[slot=input-group]:bg-background not-in-data-[slot=input-group]:shadow-xs dark:not-in-data-[slot=input-group]:bg-input/30',
+            'not-in-data-[slot=input-group]:transition-[border-color,box-shadow]',
+            'not-in-data-[slot=input-group]:focus-visible:border-ring not-in-data-[slot=input-group]:focus-visible:ring-[3px] not-in-data-[slot=input-group]:focus-visible:ring-ring/30',
+            'aria-invalid:not-in-data-[slot=input-group]:border-destructive aria-invalid:not-in-data-[slot=input-group]:ring-destructive/20',
+        ],
+        group: [
+            'group/input flex w-full min-w-0 items-center rounded-lg border border-input bg-background shadow-xs transition-[border-color,box-shadow] dark:bg-input/30',
+            'has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-[3px] has-[input:focus-visible]:ring-ring/30',
+            'has-[input[aria-invalid=true]]:border-destructive has-[input[aria-invalid=true]]:ring-destructive/20',
+            'has-[input:disabled]:opacity-50',
+        ],
+        addon: [
+            'flex shrink-0 cursor-text items-center gap-1.5 text-sm text-muted-foreground select-none',
+            '[&_svg]:pointer-events-none [&_svg:not([class*=size-])]:size-4',
+            '[&_kbd]:rounded [&_kbd]:border [&_kbd]:bg-muted [&_kbd]:px-1.5 [&_kbd]:font-sans [&_kbd]:text-xs',
+            // Padded to the group's size, read from the group so it is set once.
+            'px-3 group-data-[size=sm]/input:px-2.5 group-data-[size=lg]/input:px-3.5',
+        ],
+    },
+    variants: {
+        size: {
+            sm: { input: 'h-8 px-2.5 text-[0.8125rem]', group: 'h-8' },
+            md: { input: 'h-9 px-3 text-sm', group: 'h-9' },
+            lg: { input: 'h-11 px-3.5 text-[0.9375rem]', group: 'h-11 rounded-xl' },
+        },
+        align: {
+            // An addon sits closer to the text it belongs to than to the edge.
+            start: { addon: 'order-first -me-1.5' },
+            end: { addon: 'order-last -ms-1.5' },
+        },
+    },
+    compoundVariants: [
+        // In a group the input's own height is the group's, minus its border.
+        // Its text and padding follow the group's size too, so the size is set once.
+        {
+            size: ['sm', 'md', 'lg'],
+            className: {
+                input: 'in-data-[slot=input-group]:h-full group-data-[size=sm]/input:px-2.5 group-data-[size=sm]/input:text-[0.8125rem] group-data-[size=lg]/input:px-3.5 group-data-[size=lg]/input:text-[0.9375rem]',
+            },
+        },
+    ],
+    defaultVariants: { size: 'md', align: 'start' },
+});
+/** A single-line field. Every attribute of `<input>` passes through. */
+function InputRoot({ size, className, type = 'text', ...props }) {
+    return (_jsx("input", { type: type, "data-slot": "input", className: inputVariants({ size }).input({ className }), ...props }));
+}
+InputRoot.displayName = 'Input';
+/** Draws one box round an input and its addons. */
+function InputGroup({ size, className, ...props }) {
+    return (_jsx("div", { role: "group", "data-slot": "input-group", "data-size": size ?? 'md', className: inputVariants({ size }).group({ className }), ...props }));
+}
+InputGroup.displayName = 'Input.Group';
+/** An icon, unit, shortcut or button beside the input, inside its box. */
+function InputAddon({ align, className, onMouseDown, ...props }) {
+    // A press on the addon's own surface is a press on the field. A button or
+    // link inside it is left to do what it does.
+    const focusField = (event) => {
+        onMouseDown?.(event);
+        if (event.defaultPrevented)
+            return;
+        if (event.target.closest('button, a, input, select, textarea'))
+            return;
+        const input = event.currentTarget.parentElement?.querySelector('input');
+        if (!input)
+            return;
+        event.preventDefault();
+        input.focus();
+    };
+    return (_jsx("div", { "data-slot": "input-addon", "data-align": align ?? 'start', className: inputVariants({ align }).addon({ className }), onMouseDown: focusField, ...props }));
+}
+InputAddon.displayName = 'Input.Addon';
+export const Input = Object.assign(InputRoot, {
+    Group: InputGroup,
+    Addon: InputAddon,
+});
+export { InputGroup, InputAddon };

package/dist/components/label/index.d.ts

@@ -0,0 +1,89 @@
+/**
+ * Label — the name of a field, and the line it sits on.
+ *
+ * ```tsx
+ * <Label htmlFor="email" required>Email</Label>
+ * <Input id="email" type="email" required />
+ *
+ * <Label htmlFor="password">
+ *   <Label.Text>Password</Label.Text>
+ *   <Label.Action><a href="/reset">Forgot it?</a></Label.Action>
+ * </Label>
+ * ```
+ *
+ * ## One line, three things on it
+ *
+ * A field's label is rarely only its name. It says whether the field must be
+ * filled, it carries a hint (a limit, a format, "Optional"), and it often has
+ * something at the far end: a link to reset a password, a count of what is
+ * left. Putting those on the label's own line, rather than in lines of their
+ * own round the field, keeps a form to one row per field, and keeps the hint
+ * next to the name it qualifies.
+ *
+ * ## The control decides, where it can
+ *
+ * A label wrapped round its control, such as a checkbox, reads that control's
+ * state: it fades when the control is disabled and turns to the destructive
+ * colour when the control is invalid, with nothing passed. A label tied to its
+ * control by `htmlFor` cannot see it, so it takes `invalid` and `disabled`.
+ *
+ * ## It renders on the server
+ *
+ * The state reaches the parts through data attributes and CSS rather than
+ * through context, so a label has no client JavaScript of its own.
+ */
+import type { ComponentProps } from 'react';
+export interface LabelProps extends ComponentProps<'label'> {
+    /**
+     * Marks the field as one that must be filled. The mark is for the eye; set
+     * `required` on the control as well, which is what a screen reader announces.
+     */
+    required?: boolean;
+    /** Shows "Optional" after the text, for a form where most fields are required. */
+    optional?: boolean;
+    /**
+     * Turns the label to the destructive colour. Needed when the label is tied
+     * to its control by `htmlFor`; a label wrapped round its control reads it.
+     */
+    invalid?: boolean;
+    /** Fades the label. As with `invalid`, a wrapped control is read on its own. */
+    disabled?: boolean;
+}
+/**
+ * The label element. A string child is the label's text; for more, compose
+ * `Label.Text`, `Label.Hint` and `Label.Action`.
+ */
+declare function LabelRoot({ required, optional, invalid, disabled, className, children, ...props }: LabelProps): import("react").JSX.Element;
+declare namespace LabelRoot {
+    var displayName: string;
+}
+export interface LabelTextProps extends ComponentProps<'span'> {
+}
+/** The field's name. It truncates rather than pushing the action off the line. */
+declare function LabelText({ className, children, ...props }: LabelTextProps): import("react").JSX.Element;
+declare namespace LabelText {
+    var displayName: string;
+}
+export interface LabelHintProps extends ComponentProps<'span'> {
+}
+/**
+ * A quieter word or two after the name: a limit, a format, a unit. On an
+ * invalid field it takes the destructive colour, so it can say what is wrong.
+ */
+declare function LabelHint({ className, ...props }: LabelHintProps): import("react").JSX.Element;
+declare namespace LabelHint {
+    var displayName: string;
+}
+export interface LabelActionProps extends ComponentProps<'span'> {
+}
+/** Pushed to the far end of the line: a link, a count, a small button. */
+declare function LabelAction({ className, ...props }: LabelActionProps): import("react").JSX.Element;
+declare namespace LabelAction {
+    var displayName: string;
+}
+export declare const Label: typeof LabelRoot & {
+    Text: typeof LabelText;
+    Hint: typeof LabelHint;
+    Action: typeof LabelAction;
+};
+export { LabelText, LabelHint, LabelAction };

package/dist/components/label/index.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tv } from 'tailwind-variants';
+const labelVariants = tv({
+    slots: {
+        root: [
+            'group/label flex w-full min-w-0 items-center gap-2 text-sm font-medium leading-5 text-foreground select-none',
+            // A control wrapped in the label tells it how it is.
+            'has-disabled:cursor-not-allowed has-disabled:opacity-50 has-[[aria-invalid=true]]:text-destructive',
+            'data-disabled:cursor-not-allowed data-disabled:opacity-50 data-invalid:text-destructive',
+        ],
+        // The required mark is drawn after the text by CSS, so it follows the name
+        // however the label is composed, and is not read out as "star".
+        text: [
+            'flex min-w-0 items-baseline',
+            "group-data-required/label:after:ms-0.5 group-data-required/label:after:text-destructive group-data-required/label:after:content-['*']",
+        ],
+        textInner: 'min-w-0 truncate',
+        hint: [
+            'shrink-0 font-normal text-muted-foreground',
+            // An invalid field's hint is the reason, so it takes the colour too.
+            'group-data-invalid/label:text-destructive group-has-[[aria-invalid=true]]/label:text-destructive',
+        ],
+        action: [
+            'order-last ms-auto flex shrink-0 items-center gap-1.5 font-normal text-muted-foreground',
+            '[&_a]:text-foreground [&_a]:underline-offset-4 [&_a]:outline-none [&_a:hover]:underline [&_a:focus-visible]:underline',
+            'group-data-invalid/label:text-destructive',
+        ],
+    },
+});
+/**
+ * The label element. A string child is the label's text; for more, compose
+ * `Label.Text`, `Label.Hint` and `Label.Action`.
+ */
+function LabelRoot({ required = false, optional = false, invalid = false, disabled = false, className, children, ...props }) {
+    const slots = labelVariants();
+    const plain = typeof children === 'string' || typeof children === 'number';
+    return (_jsxs("label", { "data-slot": "label", "data-required": required ? '' : undefined, "data-invalid": invalid ? '' : undefined, "data-disabled": disabled ? '' : undefined, className: slots.root({ className }), ...props, children: [plain ? _jsx(LabelText, { children: children }) : children, optional ? _jsx(LabelHint, { children: "Optional" }) : null] }));
+}
+LabelRoot.displayName = 'Label';
+/** The field's name. It truncates rather than pushing the action off the line. */
+function LabelText({ className, children, ...props }) {
+    const slots = labelVariants();
+    return (_jsx("span", { "data-slot": "label-text", className: slots.text({ className }), ...props, children: _jsx("span", { className: slots.textInner(), children: children }) }));
+}
+LabelText.displayName = 'Label.Text';
+/**
+ * A quieter word or two after the name: a limit, a format, a unit. On an
+ * invalid field it takes the destructive colour, so it can say what is wrong.
+ */
+function LabelHint({ className, ...props }) {
+    return _jsx("span", { "data-slot": "label-hint", className: labelVariants().hint({ className }), ...props });
+}
+LabelHint.displayName = 'Label.Hint';
+/** Pushed to the far end of the line: a link, a count, a small button. */
+function LabelAction({ className, ...props }) {
+    return _jsx("span", { "data-slot": "label-action", className: labelVariants().action({ className }), ...props });
+}
+LabelAction.displayName = 'Label.Action';
+export const Label = Object.assign(LabelRoot, {
+    Text: LabelText,
+    Hint: LabelHint,
+    Action: LabelAction,
+});
+export { LabelText, LabelHint, LabelAction };