@calliopelabs/ui 0.7.0 → 0.11.0

package/dist/primitives/Field.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+/** The props a Field hands its control. Input, Textarea, Select, Switch and Checkbox all take them. */
+export interface FieldControlProps {
+    id?: string;
+    "aria-describedby"?: string;
+    "aria-invalid"?: boolean;
+    required?: boolean;
+}
+export interface FieldProps {
+    label: React.ReactNode;
+    /** Under the label: what the value means or how it is used. */
+    hint?: React.ReactNode;
+    /** Why the value is refused. Marks the control invalid and is read with it. */
+    error?: React.ReactNode;
+    required?: boolean;
+    /** The control's id; generated when absent. */
+    id?: string;
+    /**
+     * `vertical` (the default): label, hint, control, error. `horizontal`: the
+     * label and hint beside the control, for a Switch or a Checkbox.
+     */
+    orientation?: "vertical" | "horizontal";
+    /** The control. It receives the id, the description, the invalid state and `required`. */
+    children: React.ReactElement<FieldControlProps>;
+    className?: string;
+}
+/**
+ * A labelled form control with its hint and error, wired for screen readers:
+ * the label's `for` is the control's id, the hint and error are its
+ * description (`aria-describedby`), and an error sets `aria-invalid`. A
+ * description the control already has is kept.
+ */
+export declare function Field({ label, hint, error, required, id: idProp, orientation, children, className, }: FieldProps): React.JSX.Element;

package/dist/primitives/Field.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+/**
+ * A labelled form control with its hint and error, wired for screen readers:
+ * the label's `for` is the control's id, the hint and error are its
+ * description (`aria-describedby`), and an error sets `aria-invalid`. A
+ * description the control already has is kept.
+ */
+export function Field({ label, hint, error, required, id: idProp, orientation = "vertical", children, className, }) {
+    const generated = React.useId();
+    const id = idProp ?? children.props.id ?? generated;
+    const hintId = hint ? `${id}-hint` : undefined;
+    const errorId = error ? `${id}-error` : undefined;
+    const describedBy = [children.props["aria-describedby"], hintId, errorId].filter(Boolean).join(" ") || undefined;
+    const control = React.cloneElement(children, {
+        id,
+        "aria-describedby": describedBy,
+        "aria-invalid": error ? true : children.props["aria-invalid"],
+        required: required ?? children.props.required,
+    });
+    const labelEl = (_jsxs("label", { htmlFor: id, className: "text-sm leading-snug font-medium", children: [label, required && (_jsxs("span", { "aria-hidden": true, className: "text-muted-foreground", children: [" ", "*"] }))] }));
+    const hintEl = hint && (_jsx("p", { id: hintId, className: "text-xs text-muted-foreground", children: hint }));
+    const errorEl = error && (_jsx("p", { id: errorId, className: "text-xs text-danger-fg", children: error }));
+    if (orientation === "horizontal") {
+        return (_jsxs("div", { "data-slot": "field", className: cn("flex min-w-0 flex-col gap-1.5", className), children: [_jsxs("div", { className: "flex min-w-0 items-start justify-between gap-3", children: [_jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [labelEl, hintEl] }), control] }), errorEl] }));
+    }
+    return (_jsxs("div", { "data-slot": "field", className: cn("flex min-w-0 flex-col gap-1.5", className), children: [labelEl, hintEl, control, errorEl] }));
+}

package/dist/primitives/Segmented.d.ts

@@ -0,0 +1,30 @@
+import type * as React from "react";
+export interface SegmentedOption<TValue extends string = string> {
+    value: TValue;
+    label: string;
+    /** An icon before the label; with `iconOnly`, the label becomes its accessible name. */
+    icon?: React.ComponentType<{
+        className?: string;
+        "aria-hidden"?: boolean;
+    }>;
+    disabled?: boolean;
+}
+export interface SegmentedProps<TValue extends string = string> {
+    /** Names the group ("View", "Range"). */
+    label: string;
+    options: readonly SegmentedOption<TValue>[];
+    value: TValue;
+    onValueChange: (value: TValue) => void;
+    size?: "sm" | "default";
+    /** Icons alone, each named by its label. */
+    iconOnly?: boolean;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * One of a few mutually exclusive options, side by side: a view (list or
+ * grid), a range (24h, 7d, 30d), a mode. Always one chosen; pressing the
+ * chosen one leaves it chosen. Arrow keys move between options. For views
+ * that are pages of their own, use TabNav (links) instead.
+ */
+export declare function Segmented<TValue extends string = string>({ label, options, value, onValueChange, size, iconOnly, disabled, className, }: SegmentedProps<TValue>): React.JSX.Element;

package/dist/primitives/Segmented.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
+import { cn } from "../lib/cn.js";
+/**
+ * One of a few mutually exclusive options, side by side: a view (list or
+ * grid), a range (24h, 7d, 30d), a mode. Always one chosen; pressing the
+ * chosen one leaves it chosen. Arrow keys move between options. For views
+ * that are pages of their own, use TabNav (links) instead.
+ */
+export function Segmented({ label, options, value, onValueChange, size = "default", iconOnly = false, disabled, className, }) {
+    return (_jsx(ToggleGroupPrimitive.Root, { type: "single", "aria-label": label, value: value, disabled: disabled, onValueChange: (next) => {
+            // Radix clears a single group when the chosen item is pressed again; keep it chosen.
+            if (next)
+                onValueChange(next);
+        }, "data-slot": "segmented", "data-size": size, className: cn("inline-flex w-fit max-w-full items-center gap-0.5 rounded-lg border bg-muted/40 p-0.5", className), children: options.map((option) => {
+            const Icon = option.icon;
+            return (_jsxs(ToggleGroupPrimitive.Item, { value: option.value, disabled: option.disabled, "aria-label": iconOnly ? option.label : undefined, title: iconOnly ? option.label : undefined, className: cn("inline-flex min-w-0 items-center justify-center gap-1.5 rounded-md text-sm whitespace-nowrap text-muted-foreground transition-colors outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-background data-[state=on]:font-medium data-[state=on]:text-foreground data-[state=on]:shadow-xs", size === "sm" ? "h-6 px-2" : "h-7 px-2.5", iconOnly && (size === "sm" ? "w-6 px-0" : "w-7 px-0")), children: [Icon && _jsx(Icon, { className: "size-4 shrink-0", "aria-hidden": true }), !iconOnly && _jsx("span", { className: "truncate", children: option.label })] }, option.value));
+        }) }));
+}

package/dist/primitives/Select.d.ts

@@ -0,0 +1,40 @@
+import { Select as SelectPrimitive } from "radix-ui";
+import * as React from "react";
+export interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+/** What a Field hands its control, passed on to the trigger (the element that takes focus and the label). */
+type TriggerWiring = Pick<React.ComponentProps<"button">, "id" | "aria-describedby" | "aria-invalid" | "aria-label" | "aria-labelledby">;
+export interface SelectProps extends React.ComponentProps<typeof SelectPrimitive.Root>, TriggerWiring {
+    /**
+     * The options, for the common case: the trigger, the value and the list are
+     * drawn for you. Leave it out to compose SelectTrigger, SelectContent and
+     * SelectItem yourself.
+     */
+    options?: readonly SelectOption[];
+    /** Shown in the trigger while nothing is chosen (with `options`). */
+    placeholder?: string;
+    /** The trigger's size (with `options`). */
+    size?: "sm" | "default";
+    /** Classes for the trigger (with `options`). */
+    className?: string;
+}
+/**
+ * A single choice from a list (Radix Select). Inside a Field, the field's
+ * id, description and invalid state reach the trigger, so the label names it.
+ * Radix does not allow an option whose value is the empty string: to offer
+ * "any", give it a value of its own.
+ */
+export declare function Select({ options, placeholder, size, className, id, "aria-describedby": describedBy, "aria-invalid": invalid, "aria-label": label, "aria-labelledby": labelledBy, children, ...props }: SelectProps): React.JSX.Element;
+export declare function SelectValue(props: React.ComponentProps<typeof SelectPrimitive.Value>): React.JSX.Element;
+export declare function SelectTrigger({ className, size, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+    size?: "sm" | "default";
+}): React.JSX.Element;
+export declare function SelectContent({ className, children, position, ...props }: React.ComponentProps<typeof SelectPrimitive.Content>): React.JSX.Element;
+export declare function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>): React.JSX.Element;
+export declare function SelectGroup(props: React.ComponentProps<typeof SelectPrimitive.Group>): React.JSX.Element;
+export declare function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>): React.JSX.Element;
+export declare function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>): React.JSX.Element;
+export {};

package/dist/primitives/Select.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { Select as SelectPrimitive } from "radix-ui";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+const TriggerWiringContext = React.createContext({});
+/**
+ * A single choice from a list (Radix Select). Inside a Field, the field's
+ * id, description and invalid state reach the trigger, so the label names it.
+ * Radix does not allow an option whose value is the empty string: to offer
+ * "any", give it a value of its own.
+ */
+export function Select({ options, placeholder, size, className, id, "aria-describedby": describedBy, "aria-invalid": invalid, "aria-label": label, "aria-labelledby": labelledBy, children, ...props }) {
+    const wiring = React.useMemo(() => ({
+        id,
+        "aria-describedby": describedBy,
+        "aria-invalid": invalid,
+        "aria-label": label,
+        "aria-labelledby": labelledBy,
+    }), [id, describedBy, invalid, label, labelledBy]);
+    return (_jsx(TriggerWiringContext.Provider, { value: wiring, children: _jsx(SelectPrimitive.Root, { "data-slot": "select", ...props, children: options ? (_jsxs(_Fragment, { children: [_jsx(SelectTrigger, { size: size, className: className, children: _jsx(SelectValue, { placeholder: placeholder }) }), _jsx(SelectContent, { children: options.map((option) => (_jsx(SelectItem, { value: option.value, disabled: option.disabled, children: option.label }, option.value))) })] })) : (children) }) }));
+}
+export function SelectValue(props) {
+    return _jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
+}
+export function SelectTrigger({ className, size = "default", children, ...props }) {
+    const wiring = React.useContext(TriggerWiringContext);
+    const defined = Object.fromEntries(Object.entries(wiring).filter(([, v]) => v !== undefined));
+    return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, ...defined, ...props, className: cn("flex w-fit max-w-full min-w-0 items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-1 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0", className), children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDownIcon, { className: "size-4 text-muted-foreground", "aria-hidden": true }) })] }));
+}
+export function SelectContent({ className, children, position = "popper", ...props }) {
+    return (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { "data-slot": "select-content", position: position, className: cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10", position === "popper" &&
+                "min-w-(--radix-select-trigger-width) data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1", className), ...props, children: [_jsx(SelectPrimitive.ScrollUpButton, { className: "flex cursor-default items-center justify-center py-1", children: _jsx(ChevronUpIcon, { className: "size-4", "aria-hidden": true }) }), _jsx(SelectPrimitive.Viewport, { className: "p-1", children: children }), _jsx(SelectPrimitive.ScrollDownButton, { className: "flex cursor-default items-center justify-center py-1", children: _jsx(ChevronDownIcon, { className: "size-4", "aria-hidden": true }) })] }) }));
+}
+export function SelectItem({ className, children, ...props }) {
+    return (_jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: cn("relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "size-4", "aria-hidden": true }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] }));
+}
+export function SelectGroup(props) {
+    return _jsx(SelectPrimitive.Group, { "data-slot": "select-group", ...props });
+}
+export function SelectLabel({ className, ...props }) {
+    return (_jsx(SelectPrimitive.Label, { "data-slot": "select-label", className: cn("px-1.5 py-1 text-xs text-muted-foreground", className), ...props }));
+}
+export function SelectSeparator({ className, ...props }) {
+    return (_jsx(SelectPrimitive.Separator, { "data-slot": "select-separator", className: cn("pointer-events-none -mx-1 my-1 h-px bg-border", className), ...props }));
+}

package/dist/primitives/Switch.d.ts

@@ -0,0 +1,7 @@
+import { Switch as SwitchPrimitive } from "radix-ui";
+import type * as React from "react";
+export interface SwitchProps extends React.ComponentProps<typeof SwitchPrimitive.Root> {
+    size?: "sm" | "default";
+}
+/** An on/off setting that applies at once. For a choice submitted with a form, prefer Checkbox. */
+export declare function Switch({ className, size, ...props }: SwitchProps): React.JSX.Element;

package/dist/primitives/Switch.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Switch as SwitchPrimitive } from "radix-ui";
+import { cn } from "../lib/cn.js";
+/** An on/off setting that applies at once. For a choice submitted with a form, prefer Checkbox. */
+export function Switch({ className, size = "default", ...props }) {
+    return (_jsx(SwitchPrimitive.Root, { "data-slot": "switch", "data-size": size, className: cn("peer inline-flex shrink-0 items-center rounded-full border border-transparent transition-colors outline-none focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-5 data-[size=default]:w-9 data-[size=sm]:h-4 data-[size=sm]:w-7 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80", className), ...props, children: _jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: "pointer-events-none block rounded-full bg-background shadow-sm ring-0 transition-transform in-data-[size=default]:size-4 in-data-[size=sm]:size-3 in-data-[size=default]:data-[state=checked]:translate-x-4 in-data-[size=sm]:data-[state=checked]:translate-x-3 data-[state=unchecked]:translate-x-0.5 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground" }) }));
+}

package/dist/primitives/Textarea.d.ts

@@ -0,0 +1,3 @@
+import type * as React from "react";
+/** Multi-line text, on the same tokens as Input; grows with its content where the browser can. */
+export declare function Textarea({ className, ...props }: React.ComponentProps<"textarea">): React.JSX.Element;

package/dist/primitives/Textarea.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+/** Multi-line text, on the same tokens as Input; grows with its content where the browser can. */
+export function Textarea({ className, ...props }) {
+    return (_jsx("textarea", { "data-slot": "textarea", className: cn("flex field-sizing-content min-h-16 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className), ...props }));
+}