magnaui 0.1.0

package/dist/components/ui/filter.d.ts

@@ -0,0 +1,53 @@
+import * as React from "react";
+export type ItemProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> & {
+    selected?: boolean;
+    defaultSelected?: boolean;
+    onSelectedChange?: (selected: boolean) => void;
+    icon?: React.ReactNode;
+    showIcon?: boolean;
+};
+export declare const Item: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> & {
+    selected?: boolean;
+    defaultSelected?: boolean;
+    onSelectedChange?: (selected: boolean) => void;
+    icon?: React.ReactNode;
+    showIcon?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;
+export type HeaderProps = React.HTMLAttributes<HTMLDivElement> & {
+    icon?: React.ReactNode;
+    showIcon?: boolean;
+    onClear?: () => void;
+    clearLabel?: string;
+    disabled?: boolean;
+};
+export declare function Header({ children, icon, showIcon, onClear, clearLabel, disabled, className, ...props }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+export type FooterProps = React.HTMLAttributes<HTMLDivElement> & {
+    onClear?: () => void;
+    onApply?: () => void;
+    clearLabel?: string;
+    applyLabel?: string;
+    disabled?: boolean;
+};
+export declare function Footer({ onClear, onApply, clearLabel, applyLabel, disabled, className, ...props }: FooterProps): import("react/jsx-runtime").JSX.Element;
+export type HorizontalValue = {
+    query: string;
+    segment: string;
+    range: string;
+    from: string;
+    to: string;
+    sort: string;
+};
+export type HorizontalProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> & {
+    variant?: 'calendar' | 'table';
+    value?: HorizontalValue;
+    defaultValue?: Partial<HorizontalValue>;
+    onValueChange?: (value: HorizontalValue) => void;
+    showSearch?: boolean;
+    showFilter?: boolean;
+    showSettings?: boolean;
+    showSort?: boolean;
+    onFilter?: () => void;
+    onSettings?: () => void;
+    disabled?: boolean;
+};
+export declare function Horizontal({ variant, value, defaultValue, onValueChange, showSearch, showFilter, showSettings, showSort, onFilter, onSettings, disabled, className, onKeyDown, ...props }: HorizontalProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/filter.js

@@ -0,0 +1,90 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { resolveMagnaAsset as __resolveMagnaAsset_1 } from "../../magna-assets.js";
+/* eslint-disable @next/next/no-img-element */
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+import * as Button from "./button.js";
+import * as Input from "./input.js";
+import * as Select from "./select.js";
+import * as SegmentedControl from "./segmented-control.js";
+import * as Popover from "./popover.js";
+import * as LinkButton from "./link-button.js";
+import * as Kbd from "./kbd.js";
+const image = (name, className) => (_jsx("img", { src: __resolveMagnaAsset_1(`/magna/feeds/${name}.svg`), alt: '', "aria-hidden": 'true', className: cn('block max-w-none shrink-0', className) }));
+export const Item = React.forwardRef(function Item({ selected, defaultSelected = false, onSelectedChange, icon, showIcon = true, children = 'Date', className, onClick, ...props }, ref) {
+    const [internal, setInternal] = React.useState(defaultSelected);
+    const active = selected ?? internal;
+    return (_jsxs(Button.Root, { ...props, ref: ref, type: 'button', variant: 'neutral', mode: 'ghost', size: 'small', "aria-pressed": active, className: cn('group/filter-item w-full max-w-[200px] justify-start gap-2 rounded-lg p-2', active && 'bg-bg-weak-50 text-text-strong-950', className), onClick: (event) => {
+            onClick?.(event);
+            if (!event.defaultPrevented) {
+                if (selected === undefined)
+                    setInternal(!active);
+                onSelectedChange?.(!active);
+            }
+        }, children: [showIcon &&
+                (icon ??
+                    (active ? (image('vertical-calendar-active')) : (_jsxs(_Fragment, { children: [image('vertical-calendar', 'group-hover/filter-item:hidden'), image('vertical-calendar-hover', 'hidden group-hover/filter-item:block')] })))), _jsx("span", { className: 'min-w-0 flex-1 truncate text-start', children: children }), active && image('vertical-arrow', 'rtl:rotate-180')] }));
+});
+export function Header({ children = 'Label', icon, showIcon = true, onClear, clearLabel = 'Clear', disabled = false, className, ...props }) {
+    return (_jsxs("div", { ...props, className: cn('flex w-full items-center gap-2 border-b border-stroke-soft-200 bg-bg-white-0 px-5 pb-[15px] pt-4', className), children: [showIcon && (icon ?? image('header-calendar')), _jsx("div", { className: 'min-w-0 flex-1 text-label-sm text-text-strong-950', children: children }), onClear && (_jsx(LinkButton.Root, { type: 'button', underline: true, onClick: onClear, disabled: disabled, children: clearLabel }))] }));
+}
+export function Footer({ onClear, onApply, clearLabel = 'Clear', applyLabel = 'Apply', disabled = false, className, ...props }) {
+    return (_jsxs("div", { ...props, className: cn('flex w-full items-center gap-4 border-t border-stroke-soft-200 bg-bg-white-0 px-5 pb-4 pt-[15px]', className), children: [_jsx(Button.Root, { type: 'button', size: 'small', variant: 'neutral', mode: 'stroke', className: 'flex-1', disabled: disabled || !onClear, onClick: onClear, children: clearLabel }), _jsx(Button.Root, { type: 'button', size: 'small', className: 'flex-1', disabled: disabled || !onApply, onClick: onApply, children: applyLabel })] }));
+}
+const defaults = {
+    query: '',
+    segment: 'all',
+    range: '7d',
+    from: '2023-08-04',
+    to: '2023-08-11',
+    sort: '',
+};
+const dateText = (date) => {
+    if (!/^\d{4}-\d{2}-\d{2}$/.test(date))
+        return date;
+    const [year, month, day] = date.split('-');
+    return `${['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'][Number(month) - 1]} ${day} ${year}`;
+};
+export function Horizontal({ variant = 'calendar', value, defaultValue, onValueChange, showSearch = true, showFilter = true, showSettings = true, showSort = true, onFilter, onSettings, disabled = false, className, onKeyDown, ...props }) {
+    const searchInput = React.useRef(null);
+    const [internal, setInternal] = React.useState(() => ({
+        ...defaults,
+        ...defaultValue,
+    }));
+    const current = value ?? internal;
+    const update = (next) => {
+        const merged = { ...current, ...next };
+        if (value === undefined)
+            setInternal(merged);
+        onValueChange?.(merged);
+    };
+    const chooseRange = (range) => {
+        if (range === 'custom') {
+            update({ range });
+            return;
+        }
+        const now = new Date();
+        const to = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
+        const start = new Date(now);
+        start.setDate(start.getDate() - (range === '30d' ? 29 : range === '7d' ? 6 : 0));
+        const from = `${start.getFullYear()}-${String(start.getMonth() + 1).padStart(2, '0')}-${String(start.getDate()).padStart(2, '0')}`;
+        update({ range, from, to });
+    };
+    return (_jsxs("div", { ...props, className: cn('flex w-full flex-wrap items-start gap-3', className), onKeyDown: (event) => {
+            onKeyDown?.(event);
+            if (!event.defaultPrevented &&
+                !disabled &&
+                showSearch &&
+                (event.metaKey || event.ctrlKey) &&
+                event.key === '1') {
+                event.preventDefault();
+                searchInput.current?.focus();
+            }
+        }, children: [variant === 'calendar' ? (_jsxs("div", { className: 'flex max-w-full flex-wrap items-center gap-[11px]', children: [_jsx(Button.Root, { type: 'button', size: 'small', variant: 'neutral', mode: 'stroke', disabled: disabled, onClick: () => chooseRange('today'), children: "Today" }), _jsxs("div", { className: 'flex max-w-full items-center overflow-hidden rounded-full ring-1 ring-inset ring-stroke-soft-200', children: [_jsxs(Select.Root, { value: current.range, onValueChange: chooseRange, disabled: disabled, size: 'small', children: [_jsx(Select.Trigger, { "aria-label": 'Date range preset', className: 'rounded-none shadow-none ring-0', children: _jsx(Select.Value, {}) }), _jsxs(Select.Content, { children: [_jsx(Select.Item, { value: 'today', children: "Today" }), _jsx(Select.Item, { value: '7d', children: "Last 7 days" }), _jsx(Select.Item, { value: '30d', children: "Last 30 days" }), _jsx(Select.Item, { value: 'custom', children: "Custom" })] })] }), _jsxs(Popover.Root, { children: [_jsx(Popover.Trigger, { asChild: true, children: _jsxs(Button.Root, { type: 'button', size: 'small', variant: 'neutral', mode: 'ghost', disabled: disabled, className: 'min-w-0 gap-2 rounded-none border-s border-stroke-soft-200 px-3.5', children: [image('calendar'), _jsxs("span", { className: 'truncate', children: [current.from.slice(0, 4) === current.to.slice(0, 4)
+                                                            ? dateText(current.from).slice(0, -5)
+                                                            : dateText(current.from), ' ', "\u2013 ", dateText(current.to)] })] }) }), _jsxs(Popover.Content, { showArrow: false, className: 'w-[min(320px,calc(100vw-32px))] space-y-3', children: [_jsx("div", { className: 'text-label-sm text-text-strong-950', children: "Date range" }), ['from', 'to'].map((field) => (_jsx(Input.Root, { size: 'small', children: _jsxs(Input.Wrapper, { children: [_jsx("span", { className: 'text-paragraph-sm text-text-sub-600', children: field === 'from' ? 'From' : 'To' }), _jsx(Input.Input, { type: 'date', "aria-label": field === 'from' ? 'Start date' : 'End date', value: current[field], max: field === 'from' ? current.to : undefined, min: field === 'to' ? current.from : undefined, onChange: (event) => update({
+                                                                [field]: event.target.value,
+                                                                range: 'custom',
+                                                            }) })] }) }, field))), _jsx(Popover.Close, { asChild: true, children: _jsx(Button.Root, { type: 'button', size: 'small', className: 'w-full', children: "Done" }) })] })] })] })] })) : (_jsx(SegmentedControl.Root, { value: current.segment, onValueChange: (segment) => update({ segment }), className: 'w-full max-w-[320px]', children: _jsxs(SegmentedControl.List, { "aria-label": 'Transaction type', className: 'h-9 p-px', floatingBgClassName: 'inset-y-px border-[0.4px] border-stroke-soft-200 shadow-none', children: [_jsx(SegmentedControl.Trigger, { value: 'all', disabled: disabled, className: 'h-[34px]', children: "All" }), _jsx(SegmentedControl.Trigger, { value: 'income', disabled: disabled, className: 'h-[34px]', children: "Income" }), _jsx(SegmentedControl.Trigger, { value: 'expenses', disabled: disabled, className: 'h-[34px]', children: "Expenses" })] }) })), _jsxs("div", { className: 'ms-auto flex max-w-full flex-1 flex-wrap items-center justify-end gap-3', children: [showSearch && (_jsx(Input.Root, { size: 'small', className: 'min-w-[160px] max-w-[300px] flex-1', children: _jsxs(Input.Wrapper, { children: [image('search'), _jsx(Input.Input, { ref: searchInput, type: 'search', "aria-label": 'Search records', "aria-keyshortcuts": 'Meta+1 Control+1', placeholder: 'Search...', disabled: disabled, value: current.query, onChange: (event) => update({ query: event.target.value }) }), _jsx(Kbd.Root, { className: 'shrink-0 rounded-full', children: "\u23181" })] }) })), showFilter && (_jsxs(Button.Root, { type: 'button', size: 'small', variant: 'neutral', mode: 'stroke', className: 'gap-2', disabled: disabled || !onFilter, onClick: onFilter, children: [image('filter'), "Filter"] })), showSettings && (_jsx(Button.Root, { type: 'button', size: 'small', variant: 'neutral', mode: 'stroke', className: 'size-9 p-2', "aria-label": 'Filter display settings', disabled: disabled || !onSettings, onClick: onSettings, children: image('settings') })), variant === 'table' && showSort && (_jsxs(Select.Root, { value: current.sort, onValueChange: (sort) => update({ sort }), disabled: disabled, size: 'small', children: [_jsxs(Select.Trigger, { "aria-label": 'Sort records', className: 'w-auto gap-2', children: [image('sort'), _jsx(Select.Value, { placeholder: 'Sort by' })] }), _jsxs(Select.Content, { children: [_jsx(Select.Item, { value: 'newest', children: "Newest first" }), _jsx(Select.Item, { value: 'oldest', children: "Oldest first" }), _jsx(Select.Item, { value: 'amount', children: "Amount" })] })] }))] })] }));
+}

package/dist/components/ui/form-asset.d.ts

@@ -0,0 +1,5 @@
+/** A themeable mask using an unmodified Figma glyph export. */
+export declare function FormAsset({ file, className, }: {
+    file: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/form-asset.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { resolveMagnaAsset as __resolveMagnaAsset_1 } from "../../magna-assets.js";
+import { cn } from "../../utils/cn.js";
+/** A themeable mask using an unmodified Figma glyph export. */
+export function FormAsset({ file, className, }) {
+    return (_jsx("span", { "aria-hidden": 'true', className: cn('block size-5 shrink-0 bg-current', className), style: {
+            mask: `url(${__resolveMagnaAsset_1(`/magna/forms/${file}`)}) center / contain no-repeat`,
+            WebkitMask: `url(${__resolveMagnaAsset_1(`/magna/forms/${file}`)}) center / contain no-repeat`,
+        } }));
+}

package/dist/components/ui/hint.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+import type { PolymorphicComponentProps } from "../../utils/polymorphic.js";
+type Appearance = {
+    disabled: boolean;
+    hasError: boolean;
+};
+export declare const hintVariants: (options?: Partial<Appearance> & {
+    class?: import("tailwind-merge").ClassNameValue;
+    className?: import("tailwind-merge").ClassNameValue;
+}) => Record<"root" | "icon", (overrides?: (Partial<Appearance> & {
+    class?: import("tailwind-merge").ClassNameValue;
+    className?: import("tailwind-merge").ClassNameValue;
+}) | undefined) => string>;
+export declare function Root({ disabled, hasError, children, className, ...props }: React.HTMLAttributes<HTMLDivElement> & Partial<Appearance>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Root {
+    var displayName: string;
+}
+export declare function Icon<T extends React.ElementType = 'div'>({ as, className, disabled, hasError, ...props }: PolymorphicComponentProps<T, Partial<Appearance>>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Icon {
+    var displayName: string;
+}
+export {};

package/dist/components/ui/hint.js

@@ -0,0 +1,33 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { mergeOptions, slotRecipe } from "./magna-recipe.js";
+const appearance = React.createContext({});
+export const hintVariants = slotRecipe({ disabled: false, hasError: false }, ({ disabled, hasError }) => {
+    const state = hasError
+        ? 'text-error-base'
+        : disabled
+            ? 'text-text-disabled-300'
+            : undefined;
+    return {
+        root: [
+            'group flex items-center gap-1 text-paragraph-xs',
+            state ?? 'text-text-sub-600',
+        ],
+        icon: ['size-4 shrink-0', state ?? 'text-text-soft-400'],
+    };
+});
+export function Root({ disabled, hasError, children, className, ...props }) {
+    const options = { disabled, hasError };
+    return (_jsx(appearance.Provider, { value: options, children: _jsx("div", { className: hintVariants(options).root({ className }), ...props, children: children }) }));
+}
+Root.displayName = 'HintRoot';
+export function Icon({ as, className, disabled, hasError, ...props }) {
+    const options = mergeOptions(React.useContext(appearance), {
+        disabled,
+        hasError,
+    });
+    const Element = as || 'div';
+    return (_jsx(Element, { className: hintVariants(options).icon({ className }), ...props }));
+}
+Icon.displayName = 'HintIcon';

package/dist/components/ui/horizontal-stepper.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { RiArrowRightSLine } from "@remixicon/react";
+import type { PolymorphicComponentProps } from "../../utils/polymorphic.js";
+type StepState = 'default' | 'active' | 'completed';
+export declare function Root({ asChild, className, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function SeparatorIcon<T extends React.ElementType = typeof RiArrowRightSLine>({ as, className, ...props }: PolymorphicComponentProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare const Item: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    asChild?: boolean;
+    state?: StepState;
+} & React.RefAttributes<HTMLButtonElement>>;
+export declare function ItemIndicator({ state: override, className, children, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+    state?: StepState;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ui/horizontal-stepper.js

@@ -0,0 +1,28 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { RiArrowRightSLine } from "@remixicon/react";
+import { cn } from "../../utils/cn.js";
+const Step = React.createContext('default');
+export function Root({ asChild, className, ...props }) {
+    const Element = asChild ? Slot : 'div';
+    return (_jsx(Element, { ...props, className: cn('flex flex-wrap justify-center gap-4', className) }));
+}
+export function SeparatorIcon({ as, className, ...props }) {
+    const Element = as ?? RiArrowRightSLine;
+    return (_jsx(Element, { ...props, className: cn('size-5 shrink-0 text-text-soft-400', className) }));
+}
+export const Item = React.forwardRef(function Item({ asChild, state = 'default', className, ...props }, ref) {
+    const Element = asChild ? Slot : 'button';
+    return (_jsx(Step.Provider, { value: state, children: _jsx(Element, { type: asChild ? undefined : 'button', ...props, ref: ref, "aria-current": state === 'active' ? 'step' : undefined, className: cn('flex items-center gap-2 text-paragraph-sm', state === 'default' ? 'text-text-sub-600' : 'text-text-strong-950', className) }) }));
+});
+export function ItemIndicator({ state: override, className, children, ...props }) {
+    const inherited = React.useContext(Step);
+    const state = override ?? inherited;
+    return (_jsx("div", { ...props, className: cn('flex size-5 shrink-0 items-center justify-center rounded-full text-label-xs', state === 'completed'
+            ? 'bg-success-base text-static-white'
+            : state === 'active'
+                ? 'bg-primary-base text-static-white'
+                : 'bg-bg-white-0 text-text-sub-600 ring-1 ring-inset ring-stroke-soft-200', className), children: state === 'completed' ? (_jsx("svg", { className: 'size-5', viewBox: '0 0 20 20', "aria-hidden": 'true', fill: 'none', children: _jsx("polyline", { points: '5.54,9.36 8.73,12.55 14.46,6.82', stroke: 'currentColor', strokeWidth: '1.8' }) })) : (children) }));
+}

package/dist/components/ui/inline-input.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+export type InlineInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'value' | 'defaultValue' | 'onChange'> & {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    onCancel?: () => void;
+    leading?: React.ReactNode;
+    hasError?: boolean;
+    editLabel?: string;
+    saveLabel?: string;
+    cancelLabel?: string;
+};
+declare const Root: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "defaultValue" | "value"> & {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    onCancel?: () => void;
+    leading?: React.ReactNode;
+    hasError?: boolean;
+    editLabel?: string;
+    saveLabel?: string;
+    cancelLabel?: string;
+} & React.RefAttributes<HTMLInputElement>>;
+export { Root };

package/dist/components/ui/inline-input.js

@@ -0,0 +1,60 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as CompactButton from "./compact-button.js";
+import { FormAsset } from "./form-asset.js";
+import { cn } from "../../utils/cn.js";
+const Root = React.forwardRef(function InlineInput({ value, defaultValue = '', onValueChange, onCancel, leading, hasError, className, disabled, readOnly, editLabel = 'Edit value', saveLabel = 'Save value', cancelLabel = 'Cancel editing', onKeyDown, ...props }, forwardedRef) {
+    const [internal, setInternal] = React.useState(defaultValue);
+    const current = value ?? internal;
+    const [editing, setEditing] = React.useState(false);
+    const [draft, setDraft] = React.useState(current);
+    const inputRef = React.useRef(null);
+    React.useImperativeHandle(forwardedRef, () => inputRef.current);
+    React.useEffect(() => {
+        if (!editing)
+            setDraft(current);
+    }, [current, editing]);
+    React.useEffect(() => {
+        if (disabled || readOnly)
+            setEditing(false);
+    }, [disabled, readOnly]);
+    const begin = () => {
+        setDraft(current);
+        setEditing(true);
+        requestAnimationFrame(() => inputRef.current?.focus());
+    };
+    const save = () => {
+        if (!inputRef.current?.reportValidity())
+            return;
+        if (value === undefined)
+            setInternal(draft);
+        onValueChange?.(draft);
+        setEditing(false);
+        inputRef.current?.focus();
+    };
+    const cancel = () => {
+        setDraft(current);
+        setEditing(false);
+        onCancel?.();
+        inputRef.current?.focus();
+    };
+    return (_jsxs("div", { className: cn('flex h-9 w-full items-center gap-2 rounded-full py-1.5 pe-1.5 ps-2.5 text-text-sub-600 hover:bg-bg-weak-50', editing &&
+            'bg-bg-white-0 shadow-button-important-focus ring-1 ring-stroke-strong-950 hover:bg-bg-white-0', hasError && 'bg-bg-white-0 shadow-regular-xs ring-1 ring-error-base', disabled && 'pointer-events-none text-text-disabled-300', className), children: [leading && (_jsx("span", { "aria-hidden": 'true', className: 'flex size-5 shrink-0 items-center justify-center', children: leading })), _jsx("input", { ...props, ref: inputRef, value: editing ? draft : current, disabled: disabled, readOnly: !editing || readOnly, "aria-invalid": hasError || props['aria-invalid'], className: 'min-w-0 flex-1 bg-transparent text-paragraph-sm text-text-strong-950 outline-none placeholder:text-text-soft-400 disabled:text-text-disabled-300', onChange: (event) => setDraft(event.target.value), onKeyDown: (event) => {
+                    onKeyDown?.(event);
+                    if (event.defaultPrevented ||
+                        event.nativeEvent.isComposing ||
+                        !editing)
+                        return;
+                    if (event.key === 'Enter') {
+                        event.preventDefault();
+                        save();
+                    }
+                    if (event.key === 'Escape') {
+                        event.preventDefault();
+                        cancel();
+                    }
+                } }), !readOnly &&
+                (editing ? (_jsxs(_Fragment, { children: [_jsx(CompactButton.Root, { type: 'button', variant: 'ghost', fullRadius: false, "aria-label": cancelLabel, onClick: cancel, children: _jsx(FormAsset, { file: 'baff4.svg' }) }), _jsx(CompactButton.Root, { type: 'button', variant: 'ghost', fullRadius: false, "aria-label": saveLabel, onClick: save, children: _jsx(FormAsset, { file: '537d2.svg' }) })] })) : (_jsx(CompactButton.Root, { type: 'button', variant: 'ghost', fullRadius: false, disabled: disabled, "aria-label": editLabel, onClick: begin, children: _jsx(FormAsset, { file: '09fe0.svg' }) })))] }));
+});
+export { Root };

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

@@ -0,0 +1,205 @@
+import * as React from "react";
+import { type VariantProps } from "../../utils/tv.js";
+import type { PolymorphicComponentProps } from "../../utils/polymorphic.js";
+export declare const inputVariants: import("../../vendor/tailwind-variants/index.js").TVReturnType<{
+    size: {
+        medium: {
+            wrapper: string;
+            input: string;
+            affix: string;
+        };
+        small: {
+            wrapper: string;
+            input: string;
+            affix: string;
+        };
+        xsmall: {
+            wrapper: string;
+            input: string;
+            affix: string;
+        };
+    };
+    hasError: {
+        true: {
+            root: string;
+        };
+        false: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    wrapper: string;
+    input: string;
+    icon: string;
+    affix: string;
+    inlineAffix: string;
+}, undefined, {
+    responsiveVariants?: boolean | ("xl" | "lg" | "md" | "sm" | "2xl")[] | {
+        size?: boolean | ("xl" | "lg" | "md" | "sm" | "2xl")[] | undefined;
+        hasError?: boolean | ("xl" | "lg" | "md" | "sm" | "2xl")[] | undefined;
+    } | undefined;
+} & import("../../vendor/tailwind-variants/config.js").TWMConfig & {
+    twMergeConfig: {
+        extend: {
+            classGroups: {
+                'font-size': {
+                    text: string[];
+                }[];
+                shadow: {
+                    shadow: string[];
+                }[];
+                rounded: {
+                    rounded: string[];
+                }[];
+            };
+        };
+    };
+}, {
+    size: {
+        medium: {
+            wrapper: string;
+            input: string;
+            affix: string;
+        };
+        small: {
+            wrapper: string;
+            input: string;
+            affix: string;
+        };
+        xsmall: {
+            wrapper: string;
+            input: string;
+            affix: string;
+        };
+    };
+    hasError: {
+        true: {
+            root: string;
+        };
+        false: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    wrapper: string;
+    input: string;
+    icon: string;
+    affix: string;
+    inlineAffix: string;
+}, import("../../vendor/tailwind-variants/index.js").TVReturnType<{
+    size: {
+        medium: {
+            wrapper: string;
+            input: string;
+            affix: string;
+        };
+        small: {
+            wrapper: string;
+            input: string;
+            affix: string;
+        };
+        xsmall: {
+            wrapper: string;
+            input: string;
+            affix: string;
+        };
+    };
+    hasError: {
+        true: {
+            root: string;
+        };
+        false: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    wrapper: string;
+    input: string;
+    icon: string;
+    affix: string;
+    inlineAffix: string;
+}, undefined, import("../../vendor/tailwind-variants/config.js").TVConfig<{
+    size: {
+        medium: {
+            wrapper: string;
+            input: string;
+            affix: string;
+        };
+        small: {
+            wrapper: string;
+            input: string;
+            affix: string;
+        };
+        xsmall: {
+            wrapper: string;
+            input: string;
+            affix: string;
+        };
+    };
+    hasError: {
+        true: {
+            root: string;
+        };
+        false: {
+            root: string;
+        };
+    };
+}, {
+    size: {
+        medium: {
+            wrapper: string;
+            input: string;
+            affix: string;
+        };
+        small: {
+            wrapper: string;
+            input: string;
+            affix: string;
+        };
+        xsmall: {
+            wrapper: string;
+            input: string;
+            affix: string;
+        };
+    };
+    hasError: {
+        true: {
+            root: string;
+        };
+        false: {
+            root: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
+type FieldStyle = VariantProps<typeof inputVariants>;
+declare function Root({ size, hasError, asChild, className, children, ...props }: React.HTMLAttributes<HTMLDivElement> & FieldStyle & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace Root {
+    var displayName: string;
+}
+declare function Wrapper({ size, hasError, asChild, className, ...props }: React.LabelHTMLAttributes<HTMLLabelElement> & FieldStyle & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace Wrapper {
+    var displayName: string;
+}
+declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & FieldStyle & {
+    asChild?: boolean;
+} & React.RefAttributes<HTMLInputElement>>;
+declare function Icon<T extends React.ElementType = 'div'>({ as, size, hasError, className, ...props }: PolymorphicComponentProps<T, FieldStyle>): import("react/jsx-runtime").JSX.Element;
+declare namespace Icon {
+    var displayName: string;
+}
+declare function Affix({ size, hasError, className, ...props }: React.HTMLAttributes<HTMLDivElement> & FieldStyle): import("react/jsx-runtime").JSX.Element;
+declare namespace Affix {
+    var displayName: string;
+}
+declare function InlineAffix({ size, hasError, className, ...props }: React.HTMLAttributes<HTMLSpanElement> & FieldStyle): import("react/jsx-runtime").JSX.Element;
+declare namespace InlineAffix {
+    var displayName: string;
+}
+export { Root, Wrapper, Input, Icon, Affix, InlineAffix };

package/dist/components/ui/input.js

@@ -0,0 +1,69 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { tv } from "../../utils/tv.js";
+// Field parts inherit their presentation through context, including across custom wrappers.
+export const inputVariants = tv({
+    slots: {
+        root: 'group relative flex w-full divide-x divide-stroke-soft-200 overflow-hidden rounded-full bg-bg-white-0 text-text-strong-950 shadow-regular-xs transition-all duration-200 before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:ring-1 before:ring-inset before:ring-stroke-soft-200 hover:shadow-none has-[input:disabled]:shadow-none has-[input:focus]:shadow-button-important-focus has-[input:disabled]:before:ring-transparent has-[input:focus]:before:ring-stroke-strong-950',
+        wrapper: 'group/input-wrapper flex w-full cursor-text items-center bg-bg-white-0 transition-colors duration-200 has-[input:disabled]:pointer-events-none has-[input:disabled]:bg-bg-weak-50 hover:[&:not(:has(input:focus))]:bg-bg-weak-50',
+        input: 'w-full bg-transparent bg-none text-paragraph-sm text-text-strong-950 outline-none placeholder:select-none placeholder:text-text-soft-400 placeholder:transition-colors focus:placeholder:text-text-sub-600 disabled:text-text-disabled-300 disabled:placeholder:text-text-disabled-300 group-hover/input-wrapper:placeholder:text-text-sub-600',
+        icon: 'flex size-5 shrink-0 select-none items-center justify-center text-text-sub-600 transition-colors group-hover/input-wrapper:text-text-sub-600 group-has-[:placeholder-shown]:text-text-soft-400 group-has-[input:disabled]:text-text-disabled-300 group-has-[input:focus]:text-text-sub-600',
+        affix: 'flex shrink-0 items-center justify-center truncate bg-bg-white-0 text-paragraph-sm text-text-sub-600 group-has-[:placeholder-shown]:text-text-soft-400 group-has-[input:focus]:text-text-sub-600',
+        inlineAffix: 'text-paragraph-sm text-text-sub-600 group-has-[:placeholder-shown]:text-text-soft-400 group-has-[input:focus]:text-text-sub-600',
+    },
+    variants: {
+        size: {
+            medium: { wrapper: 'gap-2 px-3', input: 'h-10', affix: 'px-3' },
+            small: { wrapper: 'gap-2 px-2.5', input: 'h-9', affix: 'px-2.5' },
+            xsmall: { wrapper: 'gap-1.5 px-2', input: 'h-8', affix: 'px-2.5' },
+        },
+        hasError: {
+            true: {
+                root: 'before:ring-error-base hover:before:ring-error-base has-[input:focus]:shadow-button-error-focus has-[input:focus]:before:ring-error-base',
+            },
+            false: {
+                root: 'hover:[&:not(:has(input:focus)):has(>:only-child)]:before:ring-transparent',
+            },
+        },
+    },
+    defaultVariants: { size: 'medium' },
+});
+const FieldContext = React.createContext({});
+function useFieldStyle(options) {
+    const parent = React.useContext(FieldContext);
+    return inputVariants({
+        size: options.size ?? parent.size,
+        hasError: options.hasError ?? parent.hasError,
+    });
+}
+function Root({ size, hasError, asChild, className, children, ...props }) {
+    const Tag = asChild ? Slot : 'div';
+    return (_jsx(FieldContext.Provider, { value: { size, hasError }, children: _jsx(Tag, { ...props, className: inputVariants({ size, hasError }).root({ className }), children: children }) }));
+}
+function Wrapper({ size, hasError, asChild, className, ...props }) {
+    const Tag = asChild ? Slot : 'label';
+    return (_jsx(Tag, { ...props, className: useFieldStyle({ size, hasError }).wrapper({ className }) }));
+}
+const Input = React.forwardRef(function Input({ size, hasError, asChild, className, type = 'text', ...props }, ref) {
+    const Tag = asChild ? Slot : 'input';
+    return (_jsx(Tag, { ...props, type: type, ref: ref, className: useFieldStyle({ size, hasError }).input({ className }) }));
+});
+function Icon({ as, size, hasError, className, ...props }) {
+    const Tag = as || 'div';
+    return (_jsx(Tag, { ...props, className: useFieldStyle({ size, hasError }).icon({ className }) }));
+}
+function Affix({ size, hasError, className, ...props }) {
+    return (_jsx("div", { ...props, className: useFieldStyle({ size, hasError }).affix({ className }) }));
+}
+function InlineAffix({ size, hasError, className, ...props }) {
+    return (_jsx("span", { ...props, className: useFieldStyle({ size, hasError }).inlineAffix({ className }) }));
+}
+Root.displayName = 'InputRoot';
+Wrapper.displayName = 'InputWrapper';
+Input.displayName = 'InputEl';
+Icon.displayName = 'InputIcon';
+Affix.displayName = 'InputAffixButton';
+InlineAffix.displayName = 'InputInlineAffixButton';
+export { Root, Wrapper, Input, Icon, Affix, InlineAffix };

package/dist/components/ui/kbd.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from "react";
+export declare function Root({ className, children, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Root {
+    var displayName: string;
+}

package/dist/components/ui/kbd.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+export function Root({ className, children, ...props }) {
+    return (_jsx("kbd", { ...props, className: cn('flex h-5 items-center gap-0.5 whitespace-nowrap rounded bg-bg-white-0 px-1.5 text-subheading-xs text-text-soft-400 ring-1 ring-inset ring-stroke-soft-200 [font-family:inherit]', className), children: children }));
+}
+Root.displayName = 'KbdRoot';