@reforma/components 0.0.0-stage → 0.1.0

package/dist/Select/Select.js

@@ -0,0 +1,152 @@
+import { ChevronDown as U } from "@reforma/icons/10";
+import { cn as i } from "@reforma/lib";
+import { useState as Y } from "react";
+import { useFilter as j, Select as k, Label as M, Button as Q, SelectValue as g, Virtualizer as $, ListLayout as G } from "react-aria-components";
+import { Autocomplete as Z } from "../Autocomplete/Autocomplete.js";
+import { ListBox as q } from "../List/ListBox.js";
+import { Popover as J } from "../Popover/Popover.js";
+import { Show as d } from "../Show/Show.js";
+import { useSlotContextProps as K } from "../Slot/Slot.js";
+import e from "./Select.module.css.js";
+import { jsxs as N, jsx as a } from "react/jsx-runtime";
+const W = {
+  xs: 24,
+  sm: 30,
+  md: 36,
+  lg: 56
+}, ee = 4, ae = 4, x = "16rem", oe = {
+  sm: {
+    rowSize: 30,
+    gap: 2
+  },
+  md: {
+    rowSize: 36,
+    gap: 2
+  },
+  lg: {
+    rowSize: 56,
+    gap: 2
+  }
+};
+function te(y) {
+  const L = K(y), {
+    label: r,
+    size: t = "md",
+    variant: O = "filled",
+    color: _ = "default",
+    placeholder: p,
+    className: b,
+    triggerClassName: w,
+    popoverClassName: z,
+    placement: C = "bottom",
+    offset: E,
+    shouldFlip: T,
+    icon: c,
+    iconColor: A = "default",
+    isActive: I,
+    showSearch: l = !1,
+    searchPlaceholder: P = "Search…",
+    isVirtualized: s = !1,
+    valueDisplay: B = "item",
+    items: F,
+    children: V,
+    onOpenChange: H,
+    maxHeight: R,
+    ...h
+  } = L, u = t === "xs" ? "sm" : t, n = h["aria-label"] ?? (typeof r == "string" ? r : void 0), [X, f] = Y(""), {
+    contains: D
+  } = j({
+    sensitivity: "base"
+  }), S = (o, m = !1) => {
+    const v = /* @__PURE__ */ a(q, {
+      "aria-label": n,
+      size: u,
+      autoFocus: o,
+      className: i(e.listBox, s && e.virtualizedListBox),
+      items: F,
+      renderEmptyState: m ? () => /* @__PURE__ */ a("div", {
+        className: e.empty,
+        children: "Nothing found"
+      }) : void 0,
+      style: s ? {
+        maxHeight: x
+      } : void 0,
+      children: V
+    });
+    return s ? /* @__PURE__ */ a($, {
+      layout: G,
+      layoutOptions: oe[u],
+      children: v
+    }) : v;
+  };
+  return /* @__PURE__ */ N(k, {
+    ...h,
+    className: i(e.select, b),
+    placeholder: p,
+    "data-size": t,
+    "data-show-search": l || void 0,
+    onOpenChange: (o) => {
+      o || f(""), H?.(o);
+    },
+    children: [r != null && /* @__PURE__ */ a(M, {
+      className: e.label,
+      children: r
+    }), /* @__PURE__ */ N(Q, {
+      className: i(e.trigger, w),
+      "data-size": t,
+      "data-variant": O,
+      "data-color": _,
+      "data-active": I || void 0,
+      children: [/* @__PURE__ */ a(d, {
+        when: c != null,
+        children: /* @__PURE__ */ a("span", {
+          className: e.icon,
+          "data-color": A,
+          children: c
+        })
+      }), /* @__PURE__ */ a(d, {
+        when: c != null || B === "text",
+        fallback: /* @__PURE__ */ a(g, {
+          className: e.value
+        }),
+        children: /* @__PURE__ */ a(g, {
+          className: e.value,
+          children: ({
+            selectedText: o,
+            isPlaceholder: m
+          }) => m ? p : o
+        })
+      }), /* @__PURE__ */ a(U, {
+        className: e.chevron,
+        "aria-hidden": !0
+      })]
+    }), /* @__PURE__ */ a(J, {
+      className: i(e.popover, l && e.popoverOverlay, z),
+      spacing: "xs",
+      placement: C,
+      offset: l ? -(W[t] + ee) : E ?? ae,
+      shouldFlip: T ?? !l,
+      maxHeight: R,
+      children: /* @__PURE__ */ a(d, {
+        when: l,
+        fallback: S(!0),
+        children: /* @__PURE__ */ a(Z, {
+          inputValue: X,
+          onInputChange: f,
+          filter: D,
+          maxHeight: x,
+          placeholder: P,
+          "aria-label": n ? `Search ${n}` : "Search options",
+          inputClassName: e.overlaySearch,
+          childrenOwnScroll: s,
+          children: S(!1, !0)
+        })
+      })
+    })]
+  });
+}
+te.displayName = "Select";
+export {
+  te as Select
+};
+//# sourceMappingURL=Select.js.map

package/dist/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":["../../src/Select/Select.tsx"],"sourcesContent":["import { ChevronDown } from '@reforma/icons/10';\nimport { cn } from '@reforma/lib';\nimport { useState } from 'react';\nimport {\n    Button,\n    ListLayout,\n    Label as RACLabel,\n    Select as RACSelect,\n    SelectValue,\n    useFilter,\n    Virtualizer,\n} from 'react-aria-components';\n\nimport { Autocomplete } from '../Autocomplete';\nimport { ListBox } from '../List';\nimport { Popover } from '../Popover';\nimport { Show } from '../Show';\nimport { useSlotContextProps } from '../Slot';\nimport styles from './Select.module.css';\n\nimport type { ReactNode } from 'react';\nimport type { ListLayoutOptions } from 'react-aria-components';\nimport type { ListBoxSize } from '../List';\n\nexport type SelectSize = 'xs' | 'sm' | 'md' | 'lg';\nexport type SelectVariant = 'filled' | 'bordered' | 'transparent';\nexport type SelectColor = 'default' | 'primary';\nexport type SelectValueDisplay = 'item' | 'text';\n\n/** Trigger heights in px (16px root) — negative popover offset covers the trigger like Omnibox. */\nconst OVERLAY_OFFSET_PX: Record<SelectSize, number> = {\n    xs: 24,\n    sm: 30,\n    md: 36,\n    lg: 56,\n};\n\n/** Grow overlay past the trigger so Popover `spacing=xs` (4px) insets align with the input. */\nconst OVERLAY_INSET_PX = 4;\n\n/** Gap between the trigger and its menu. Search overlays cover the trigger instead. */\nconst MENU_OFFSET_PX = 4;\nconst SEARCH_LIST_MAX_HEIGHT = '16rem';\nconst VIRTUALIZED_LIST_LAYOUT_OPTIONS: Record<ListBoxSize, ListLayoutOptions> = {\n    sm: { rowSize: 30, gap: 2 },\n    md: { rowSize: 36, gap: 2 },\n    lg: { rowSize: 56, gap: 2 },\n};\n\nexport interface SelectProps<T extends object = object> {\n    slot?: string;\n    label?: ReactNode;\n    'aria-label'?: string;\n    size?: SelectSize;\n    variant?: SelectVariant;\n    color?: SelectColor;\n    placeholder?: string;\n    isDisabled?: boolean;\n    isRequired?: boolean;\n    isActive?: boolean;\n    /**\n     * Search field in the popover (RAC Autocomplete).\n     * Opens as an Omnibox-style overlay that covers the trigger.\n     */\n    showSearch?: boolean;\n    searchPlaceholder?: string;\n    /**\n     * Only render visible fixed-height ListBox rows.\n     * Use ListBox + Virtualizer directly for sections or variable-height content.\n     */\n    isVirtualized?: boolean;\n    /** Render the selected item's textValue instead of its custom row content. */\n    valueDisplay?: SelectValueDisplay;\n    onOpenChange?: (isOpen: boolean) => void;\n    className?: string;\n    triggerClassName?: string;\n    /** Extra class on the dropdown popover (e.g. a wider min-width for described options). */\n    popoverClassName?: string;\n    /** Which side of the trigger the list opens on. */\n    placement?: 'top' | 'bottom';\n    /** Gap between the trigger and the list, in px. Defaults to 4. */\n    offset?: number;\n    shouldFlip?: boolean;\n    /** Dropdown list max height in px. */\n    maxHeight?: number;\n    icon?: ReactNode;\n    iconColor?: 'default' | 'primary';\n    items?: Iterable<T>;\n    children: (item: T) => ReactNode;\n    [key: string]: unknown;\n}\n\nexport function Select<T extends object>(props: SelectProps<T>) {\n    const merged = useSlotContextProps(props as SelectProps<T> & { slot?: string }) as SelectProps<T>;\n    const {\n        label,\n        size = 'md',\n        variant = 'filled',\n        color = 'default',\n        placeholder,\n        className,\n        triggerClassName,\n        popoverClassName,\n        placement = 'bottom',\n        offset: popoverOffset,\n        shouldFlip,\n        icon,\n        iconColor = 'default',\n        isActive,\n        showSearch = false,\n        searchPlaceholder = 'Search…',\n        isVirtualized = false,\n        valueDisplay = 'item',\n        items,\n        children,\n        onOpenChange,\n        maxHeight,\n        ...selectProps\n    } = merged;\n    // TODO pashtet: тут косяк, нужно добавить xs стиль для ListBox\n    const listBoxSize: ListBoxSize = size === 'xs' ? 'sm' : size;\n    const ariaLabel = selectProps['aria-label'] ?? (typeof label === 'string' ? label : undefined);\n    const [searchQuery, setSearchQuery] = useState('');\n    const { contains } = useFilter({ sensitivity: 'base' });\n\n    const renderListBox = (autoFocus: boolean, showEmptyState = false) => {\n        const listBox = (\n            <ListBox\n                aria-label={ ariaLabel }\n                size={ listBoxSize }\n                autoFocus={ autoFocus }\n                className={ cn(\n                    styles.listBox,\n                    isVirtualized && styles.virtualizedListBox\n                ) }\n                items={ items }\n                renderEmptyState={ showEmptyState\n                    ? () => <div className={ styles.empty }>Nothing found</div>\n                    : undefined }\n                style={ isVirtualized ? { maxHeight: SEARCH_LIST_MAX_HEIGHT } : undefined }\n            >\n                { children }\n            </ListBox>\n        );\n\n        if (!isVirtualized) {\n            return listBox;\n        }\n\n        return (\n            <Virtualizer\n                layout={ ListLayout }\n                layoutOptions={ VIRTUALIZED_LIST_LAYOUT_OPTIONS[listBoxSize] }\n            >\n                { listBox }\n            </Virtualizer>\n        );\n    };\n\n    return (\n        <RACSelect\n            { ...selectProps }\n            className={ cn(styles.select, className) }\n            placeholder={ placeholder }\n            data-size={ size }\n            data-show-search={ showSearch || undefined }\n            onOpenChange={ (isOpen) => {\n                if (!isOpen) {\n                    setSearchQuery('');\n                }\n\n                onOpenChange?.(isOpen);\n            } }\n        >\n            { label != null && (\n                <RACLabel className={ styles.label }>{ label }</RACLabel>\n            ) }\n            <Button\n                className={ cn(styles.trigger, triggerClassName) }\n                data-size={ size }\n                data-variant={ variant }\n                data-color={ color }\n                data-active={ isActive || undefined }\n            >\n                <Show when={ icon != null }>\n                    <span className={ styles.icon } data-color={ iconColor }>{ icon }</span>\n                </Show>\n                <Show\n                    when={ icon != null || valueDisplay === 'text' }\n                    fallback={ <SelectValue className={ styles.value } /> }\n                >\n                    <SelectValue className={ styles.value }>\n                        { ({ selectedText, isPlaceholder }) => (isPlaceholder ? placeholder : selectedText) }\n                    </SelectValue>\n                </Show>\n                <ChevronDown className={ styles.chevron } aria-hidden />\n            </Button>\n\n            <Popover\n                className={ cn(styles.popover, showSearch && styles.popoverOverlay, popoverClassName) }\n                spacing=\"xs\"\n                placement={ placement }\n                // Width is trigger+8px; bottom (center) placement already overhangs ±4px — no crossOffset.\n                offset={ showSearch ? -(OVERLAY_OFFSET_PX[size] + OVERLAY_INSET_PX) : (popoverOffset ?? MENU_OFFSET_PX) }\n                shouldFlip={ shouldFlip ?? !showSearch }\n                maxHeight={ maxHeight }\n            >\n                <Show\n                    when={ showSearch }\n                    fallback={ renderListBox(true) }\n                >\n                    <Autocomplete\n                        inputValue={ searchQuery }\n                        onInputChange={ setSearchQuery }\n                        filter={ contains }\n                        maxHeight={ SEARCH_LIST_MAX_HEIGHT }\n                        placeholder={ searchPlaceholder }\n                        aria-label={ ariaLabel ? `Search ${ ariaLabel }` : 'Search options' }\n                        inputClassName={ styles.overlaySearch }\n                        childrenOwnScroll={ isVirtualized }\n                    >\n                        { renderListBox(false, true) }\n                    </Autocomplete>\n                </Show>\n            </Popover>\n        </RACSelect>\n    );\n}\n\nSelect.displayName = 'Select';\n"],"names":["OVERLAY_OFFSET_PX","OVERLAY_INSET_PX","MENU_OFFSET_PX","SEARCH_LIST_MAX_HEIGHT","VIRTUALIZED_LIST_LAYOUT_OPTIONS","Select","props","merged","useSlotContextProps","label","size","variant","color","placeholder","className","triggerClassName","popoverClassName","placement","popoverOffset","shouldFlip","icon","iconColor","isActive","showSearch","searchPlaceholder","isVirtualized","valueDisplay","items","children","onOpenChange","maxHeight","selectProps","listBoxSize","ariaLabel","searchQuery","setSearchQuery","useState","contains","useFilter","renderListBox","autoFocus","showEmptyState","listBox","ListBox","cn","styles","_jsx","Virtualizer","ListLayout","RACSelect","isOpen","RACLabel","_jsxs","Button","Show","SelectValue","selectedText","isPlaceholder","ChevronDown","Popover","Autocomplete"],"mappings":"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"}

package/dist/Select/Select.module.css

@@ -0,0 +1 @@
+@layer components{.Select_select_cjuteE{display:flex;flex-direction:column;gap:var(--spacing-4);width:100%}.Select_label_6dzvwU{color:var(--color-text);font-weight:400;font-size:var(--text-sm);line-height:var(--leading-sm);font-family:Onest,sans-serif;letter-spacing:0}.Select_trigger_tAy9Ws{--reforma-select-bg: var(--color-secondary);--reforma-select-border: transparent;--reforma-select-color: var(--color-secondary-content);--reforma-select-border-hover: var(--color-secondary-muted-border);--reforma-select-border-focus: var(--color-primary);--reforma-select-radius: var(--radius-lg);display:inline-flex;position:relative;justify-content:space-between;align-items:center;gap:var(--spacing-6);cursor:pointer;box-sizing:border-box;outline:none;border:1px solid var(--reforma-select-border);border-radius:calc(var(--reforma-select-radius) * var(--squircle-radius-factor));background-color:var(--reforma-select-bg);width:100%;min-width:0;overflow:hidden;color:var(--reforma-select-color);font:inherit;text-align:left;white-space:nowrap;corner-shape:superellipse(var(--squircle-value));transition-duration:var(--transition-duration-fast);transition-property:background-color,border-color;transition-timing-function:var(--ease-in-out)}.Select_trigger_tAy9Ws[data-hovered]:not([data-disabled]){border-color:var(--reforma-select-border-hover)}.Select_select_cjuteE[data-open] .Select_trigger_tAy9Ws,.Select_trigger_tAy9Ws[aria-expanded=true],.Select_trigger_tAy9Ws[data-focus-visible],.Select_trigger_tAy9Ws[data-active]{border-color:var(--reforma-select-border-focus)}.Select_trigger_tAy9Ws[data-focus-visible]{outline:var(--spacing-4) solid var(--color-primary-muted-border);outline-offset:0}.Select_value_kCaA3u{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Select_value_kCaA3u[data-placeholder]{color:var(--color-secondary-muted-text)}.Select_icon_JnpjMt{display:flex;flex-shrink:0;align-items:center;color:currentColor}.Select_icon_JnpjMt[data-color=primary]{color:var(--color-primary-text)}.Select_chevron_d40fP0{flex-shrink:0;opacity:var(--opacity-inactive);transition:transform var(--transition-duration-fast) var(--ease-in-out);fill:currentColor}.Select_trigger_tAy9Ws[aria-expanded=true] .Select_chevron_d40fP0,.Select_trigger_tAy9Ws[data-pressed] .Select_chevron_d40fP0{transform:rotate(180deg)}.Select_trigger_tAy9Ws[data-size=xs]{--reforma-select-radius: var(--radius-sm);padding:var(--spacing-2) var(--spacing-8);height:var(--spacing-24);min-height:var(--spacing-24);font-weight:400;font-size:var(--text-sm);line-height:var(--leading-sm);font-family:Onest,sans-serif;letter-spacing:0}.Select_trigger_tAy9Ws[data-size=sm]{--reforma-select-radius: var(--radius-md);padding:var(--spacing-4) var(--spacing-8);height:var(--spacing-30);min-height:var(--spacing-30);font-weight:400;font-size:var(--text-sm);line-height:var(--leading-sm);font-family:Onest,sans-serif;letter-spacing:0}.Select_trigger_tAy9Ws[data-size=md]{--reforma-select-radius: var(--radius-lg);padding:var(--spacing-6) var(--spacing-10);height:var(--spacing-36);min-height:var(--spacing-36);font-weight:400;font-size:var(--text-md);line-height:var(--leading-md);font-family:Onest,sans-serif;letter-spacing:0}.Select_trigger_tAy9Ws[data-size=md] .Select_chevron_d40fP0{width:var(--spacing-lg);height:var(--spacing-lg)}.Select_trigger_tAy9Ws[data-size=lg]{--reforma-select-radius: var(--radius-xl);padding:var(--spacing-12) var(--spacing-16);height:var(--spacing-56);min-height:var(--spacing-56);font-weight:400;font-size:var(--text-lg);line-height:var(--leading-lg);font-family:Onest,sans-serif;letter-spacing:0}.Select_trigger_tAy9Ws[data-size=lg] .Select_chevron_d40fP0{width:var(--spacing-xl);height:var(--spacing-xl)}.Select_trigger_tAy9Ws[data-variant=filled]{--reforma-select-bg: var(--color-secondary);--reforma-select-border: transparent;--reforma-select-color: var(--color-secondary-content);--reforma-select-border-hover: var(--color-secondary-muted-border);--reforma-select-border-focus: var(--color-primary)}.Select_trigger_tAy9Ws[data-variant=bordered]{--reforma-select-bg: transparent;--reforma-select-border: var(--color-secondary-border);--reforma-select-color: var(--color-secondary-content);--reforma-select-border-hover: var(--color-secondary-border-hover);--reforma-select-border-focus: var(--color-primary)}.Select_trigger_tAy9Ws[data-variant=transparent]{--reforma-select-bg: transparent;--reforma-select-border: transparent;--reforma-select-color: var(--color-text);--reforma-select-border-hover: var(--color-secondary-muted);--reforma-select-border-focus: var(--color-secondary-muted)}.Select_trigger_tAy9Ws[data-color=primary]{--reforma-select-color: var(--color-primary-muted-content);--reforma-select-border-focus: var(--color-primary)}.Select_trigger_tAy9Ws[data-color=primary][data-variant=filled]{--reforma-select-bg: var(--color-primary-muted-light);--reforma-select-border-hover: var(--color-primary-muted-border)}.Select_trigger_tAy9Ws[data-color=primary][data-variant=bordered]{--reforma-select-border: var(--color-primary-muted-border);--reforma-select-border-hover: var(--color-primary-border)}.Select_trigger_tAy9Ws[data-color=primary][data-variant=transparent]{--reforma-select-border-hover: var(--color-primary-muted)}.Select_trigger_tAy9Ws[data-disabled]{opacity:var(--opacity-disabled);cursor:not-allowed;pointer-events:none}.Select_trigger_tAy9Ws[data-invalid]{--reforma-select-border: var(--color-danger-border);--reforma-select-border-hover: var(--color-danger-border-hover);--reforma-select-border-focus: var(--color-danger)}.Select_popover_waELrs{min-width:var(--trigger-width);max-height:20rem;overflow:auto}.Select_popoverOverlay_krheMQ{--select-overlay-inset: var(--spacing-xs);display:flex;flex-direction:column;width:calc(var(--trigger-width) + 2 * var(--select-overlay-inset));min-width:calc(var(--trigger-width) + 2 * var(--select-overlay-inset));max-width:none;max-height:20rem;overflow:hidden}.Select_popoverOverlay_krheMQ[data-placement=bottom],.Select_popoverOverlay_krheMQ[data-placement^=bottom]{margin-top:0}.Select_select_cjuteE[data-size=xs] .Select_overlaySearch_tJoFla[data-size][data-variant],.Select_select_cjuteE[data-size=sm] .Select_overlaySearch_tJoFla[data-size][data-variant]{--reforma-input-height: var(--spacing-30);--reforma-input-padding-block: var(--spacing-10);--reforma-input-padding-inline: var(--spacing-md)}.Select_select_cjuteE[data-size=md] .Select_overlaySearch_tJoFla[data-size][data-variant]{--reforma-input-height: var(--spacing-36);--reforma-input-padding-block: var(--spacing-12);--reforma-input-padding-inline: var(--spacing-md)}.Select_select_cjuteE[data-size=lg] .Select_overlaySearch_tJoFla[data-size][data-variant]{--reforma-input-height: var(--spacing-56);--reforma-input-padding-block: var(--spacing-16);--reforma-input-padding-inline: var(--spacing-lg)}.Select_listBox_dbl99G{--reforma-listbox-item-radius: var(--radius-sm) !important;outline:none;border:none;padding:0}.Select_virtualizedListBox_LRIuDM{display:block;position:relative;overflow-y:auto;overscroll-behavior:contain}.Select_empty_XNjJJ3{padding:var(--spacing-md);color:var(--color-secondary-muted-text);font-weight:400;font-size:var(--text-sm);line-height:var(--leading-sm);font-family:Onest,sans-serif;letter-spacing:0;text-align:center}}

package/dist/Select/Select.module.css.js

@@ -0,0 +1,30 @@
+const e = "Select_select_cjuteE", t = "Select_label_6dzvwU", o = "Select_trigger_tAy9Ws", l = "Select_value_kCaA3u", c = "Select_icon_JnpjMt", r = "Select_chevron_d40fP0", s = "Select_popover_waELrs", _ = "Select_popoverOverlay_krheMQ", a = "Select_overlaySearch_tJoFla", v = "Select_listBox_dbl99G", n = "Select_virtualizedListBox_LRIuDM", i = "Select_empty_XNjJJ3", p = {
+  select: e,
+  label: t,
+  trigger: o,
+  value: l,
+  icon: c,
+  chevron: r,
+  popover: s,
+  popoverOverlay: _,
+  overlaySearch: a,
+  listBox: v,
+  virtualizedListBox: n,
+  empty: i
+};
+export {
+  r as chevron,
+  p as default,
+  i as empty,
+  c as icon,
+  t as label,
+  v as listBox,
+  a as overlaySearch,
+  s as popover,
+  _ as popoverOverlay,
+  e as select,
+  o as trigger,
+  l as value,
+  n as virtualizedListBox
+};
+//# sourceMappingURL=Select.module.css.js.map

package/dist/Select/Select.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

package/dist/Select/index.d.ts

@@ -0,0 +1,3 @@
+export { Select } from './Select';
+export type { SelectColor, SelectProps, SelectSize, SelectVariant } from './Select';
+//# sourceMappingURL=index.d.ts.map

package/dist/Select/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC"}

package/dist/Select/index.js

@@ -0,0 +1,5 @@
+import { Select as r } from "./Select.js";
+export {
+  r as Select
+};
+//# sourceMappingURL=index.js.map

package/dist/Select/index.js.map

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

package/dist/Separator/Separator.d.ts

@@ -0,0 +1,12 @@
+import { type SeparatorProps as RACSeparatorProps } from 'react-aria-components';
+import type { Spacing } from '../types.ts';
+export interface SeparatorProps extends RACSeparatorProps {
+    orientation?: 'horizontal' | 'vertical';
+    spacing?: Spacing | 0 | '0';
+    className?: string;
+}
+export declare function Separator({ orientation, spacing, className, ...props }: SeparatorProps): import("react").JSX.Element;
+export declare namespace Separator {
+    var displayName: string;
+}
+//# sourceMappingURL=Separator.d.ts.map

package/dist/Separator/Separator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../../src/Separator/Separator.tsx"],"names":[],"mappings":"AACA,OAAO,EAA6B,KAAK,cAAc,IAAI,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAI5G,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C,MAAM,WAAW,cAAe,SAAQ,iBAAiB;IACrD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,OAAO,CAAC,EAAE,OAAO,GAAG,CAAC,GAAG,GAAG,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AA4BD,wBAAgB,SAAS,CAAC,EACtB,WAA0B,EAC1B,OAAc,EACd,SAAS,EACT,GAAG,KAAK,EACX,EAAE,cAAc,+BAQhB;yBAbe,SAAS"}

package/dist/Separator/Separator.js

@@ -0,0 +1,43 @@
+import { cn as a } from "@reforma/lib";
+import { Separator as o } from "react-aria-components";
+import x from "./Separator.module.css.js";
+import { jsx as t } from "react/jsx-runtime";
+const p = {
+  horizontal: {
+    0: "my-0",
+    xxs: "my-xxs",
+    xs: "my-xs",
+    sm: "my-sm",
+    md: "my-md",
+    lg: "my-lg",
+    xl: "my-xl",
+    xxl: "my-xl"
+  },
+  vertical: {
+    0: "mx-0",
+    xxs: "mx-xxs",
+    xs: "mx-xs",
+    sm: "mx-sm",
+    md: "mx-md",
+    lg: "mx-lg",
+    xl: "mx-xl",
+    xxl: "mx-xl"
+  }
+};
+function y({
+  orientation: m = "horizontal",
+  spacing: r = "md",
+  className: s,
+  ...l
+}) {
+  return /* @__PURE__ */ t(o, {
+    ...l,
+    orientation: m,
+    className: a(x.separator, x[m], p[m][r], s)
+  });
+}
+y.displayName = "Separator";
+export {
+  y as Separator
+};
+//# sourceMappingURL=Separator.js.map

package/dist/Separator/Separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.js","sources":["../../src/Separator/Separator.tsx"],"sourcesContent":["import { cn } from '@reforma/lib';\nimport { Separator as RACSeparator, type SeparatorProps as RACSeparatorProps } from 'react-aria-components';\n\nimport styles from './Separator.module.css';\n\nimport type { Spacing } from '../types.ts';\n\nexport interface SeparatorProps extends RACSeparatorProps {\n    orientation?: 'horizontal' | 'vertical';\n    spacing?: Spacing | 0 | '0';\n    className?: string;\n}\n\nconst ORIENTATION_SPACING_CLASS: Record<\n    NonNullable<SeparatorProps['orientation']>,\n    Record<NonNullable<SeparatorProps['spacing']>, string>\n> = {\n    horizontal: {\n        0: 'my-0',\n        xxs: 'my-xxs',\n        xs: 'my-xs',\n        sm: 'my-sm',\n        md: 'my-md',\n        lg: 'my-lg',\n        xl: 'my-xl',\n        xxl: 'my-xl',\n    },\n    vertical: {\n        0: 'mx-0',\n        xxs: 'mx-xxs',\n        xs: 'mx-xs',\n        sm: 'mx-sm',\n        md: 'mx-md',\n        lg: 'mx-lg',\n        xl: 'mx-xl',\n        xxl: 'mx-xl',\n    },\n};\n\nexport function Separator({\n    orientation = 'horizontal',\n    spacing = 'md',\n    className,\n    ...props\n}: SeparatorProps) {\n    return (\n        <RACSeparator\n            { ...props }\n            orientation={ orientation }\n            className={ cn(styles.separator, styles[orientation], ORIENTATION_SPACING_CLASS[orientation][spacing], className) }\n        />\n    );\n}\n\nSeparator.displayName = 'Separator';\n"],"names":["ORIENTATION_SPACING_CLASS","Separator","orientation","spacing","className","props","RACSeparator","cn","styles"],"mappings":";;;;AAIA,MAAMA,IAA4B;AAAA,EAChC,YAAY;AAAA,IACV,GAAG;AAAA,IACH,KAAK;AAAA,IACL,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,KAAK;AAAA,EAAA;AAAA,EAEP,UAAU;AAAA,IACR,GAAG;AAAA,IACH,KAAK;AAAA,IACL,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,KAAK;AAAA,EAAA;AAET;AACO,SAASC,EAAU;AAAA,EACxB,aAAAC,IAAc;AAAA,EACd,SAAAC,IAAU;AAAA,EACV,WAAAC;AAAA,EACA,GAAGC;AACL,GAAG;AACD,2BAAyBC,GAAc;AAAA,IACrC,GAAGD;AAAA,IACH,aAAAH;AAAA,IACA,WAAWK,EAAGC,EAAO,WAAWA,EAAON,CAAW,GAAGF,EAA0BE,CAAW,EAAEC,CAAO,GAAGC,CAAS;AAAA,EAAA,CAChH;AACH;AACAH,EAAU,cAAc;"}

package/dist/Separator/Separator.module.css

@@ -0,0 +1 @@
+@layer components{.Separator_separator_bXX8ok{border:none;background-color:var(--color-secondary-muted);padding:0}.Separator_separator_bXX8ok.Separator_horizontal_1yI1CL{width:100%;height:1px}.Separator_separator_bXX8ok.Separator_vertical_3FrI8q{align-self:center;width:1px;min-height:max(33.333333%,var(--spacing-18))}}

package/dist/Separator/Separator.module.css.js

@@ -0,0 +1,12 @@
+const a = "Separator_separator_bXX8ok", r = "Separator_horizontal_1yI1CL", t = "Separator_vertical_3FrI8q", o = {
+  separator: a,
+  horizontal: r,
+  vertical: t
+};
+export {
+  o as default,
+  r as horizontal,
+  a as separator,
+  t as vertical
+};
+//# sourceMappingURL=Separator.module.css.js.map

package/dist/Separator/Separator.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/Separator/index.d.ts

@@ -0,0 +1,3 @@
+export { Separator } from './Separator';
+export type { SeparatorProps } from './Separator';
+//# sourceMappingURL=index.d.ts.map

package/dist/Separator/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Separator/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}

package/dist/Separator/index.js

@@ -0,0 +1,5 @@
+import { Separator as a } from "./Separator.js";
+export {
+  a as Separator
+};
+//# sourceMappingURL=index.js.map

package/dist/Separator/index.js.map

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

package/dist/SettingsField/SettingsField.d.ts

@@ -0,0 +1,23 @@
+import { type FormFieldProps } from '../FormField';
+export type SettingsFieldLayout = FormFieldProps['layout'];
+/** `size` densifies padding only — FormField stays `md` so labels keep `heading-5`. */
+export type SettingsFieldProps = Omit<FormFieldProps, 'size'> & {
+    size?: 'sm' | 'md';
+};
+declare function SettingsFieldRoot({ className, size, ...props }: SettingsFieldProps): import("react").JSX.Element;
+export declare const SettingsField: typeof SettingsFieldRoot & {
+    Label: {
+        ({ className, children, ...props }: import("..").FormFieldLabelProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    Description: {
+        ({ className, children }: import("..").FormFieldDescriptionProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    Error: {
+        ({ className, children }: import("..").FormFieldErrorProps): import("react").JSX.Element | null;
+        displayName: string;
+    };
+};
+export {};
+//# sourceMappingURL=SettingsField.d.ts.map

package/dist/SettingsField/SettingsField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsField.d.ts","sourceRoot":"","sources":["../../src/SettingsField/SettingsField.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9D,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAC;AAE3D,uFAAuF;AACvF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC,GAAG;IAC5D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACtB,CAAC;AAEF,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,IAAW,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,+BAQlF;AAED,eAAO,MAAM,aAAa;;;;;;;;;;;;;CAIxB,CAAC"}

package/dist/SettingsField/SettingsField.js

@@ -0,0 +1,25 @@
+import { cn as m } from "@reforma/lib";
+import { FormField as i } from "../FormField/FormField.js";
+import e from "./SettingsField.module.css.js";
+import { jsx as n } from "react/jsx-runtime";
+function r({
+  className: t,
+  size: o = "md",
+  ...s
+}) {
+  return /* @__PURE__ */ n(i, {
+    ...s,
+    size: "md",
+    className: m(e.field, o === "sm" && e.sizeSm, t)
+  });
+}
+const c = Object.assign(r, {
+  Label: i.Label,
+  Description: i.Description,
+  Error: i.Error
+});
+r.displayName = "SettingsField";
+export {
+  c as SettingsField
+};
+//# sourceMappingURL=SettingsField.js.map

package/dist/SettingsField/SettingsField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsField.js","sources":["../../src/SettingsField/SettingsField.tsx"],"sourcesContent":["import { cn } from '@reforma/lib';\n\nimport { FormField, type FormFieldProps } from '../FormField';\nimport styles from './SettingsField.module.css';\n\nexport type SettingsFieldLayout = FormFieldProps['layout'];\n\n/** `size` densifies padding only — FormField stays `md` so labels keep `heading-5`. */\nexport type SettingsFieldProps = Omit<FormFieldProps, 'size'> & {\n    size?: 'sm' | 'md';\n};\n\nfunction SettingsFieldRoot({ className, size = 'md', ...props }: SettingsFieldProps) {\n    return (\n        <FormField\n            { ...props }\n            size=\"md\"\n            className={ cn(styles.field, size === 'sm' && styles.sizeSm, className) }\n        />\n    );\n}\n\nexport const SettingsField = Object.assign(SettingsFieldRoot, {\n    Label: FormField.Label,\n    Description: FormField.Description,\n    Error: FormField.Error,\n});\n\nSettingsFieldRoot.displayName = 'SettingsField';\n"],"names":["SettingsFieldRoot","className","size","props","FormField","cn","styles","SettingsField"],"mappings":";;;;AAMA,SAASA,EAAkB;AAAA,EACzB,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GAAG;AACD,2BAAyBC,GAAW;AAAA,IAClC,GAAGD;AAAA,IACH,MAAM;AAAA,IACN,WAAWE,EAAGC,EAAO,OAAOJ,MAAS,QAAQI,EAAO,QAAQL,CAAS;AAAA,EAAA,CACtE;AACH;AACO,MAAMM,IAAgB,OAAO,OAAOP,GAAmB;AAAA,EAC5D,OAAOI,EAAU;AAAA,EACjB,aAAaA,EAAU;AAAA,EACvB,OAAOA,EAAU;AACnB,CAAC;AACDJ,EAAkB,cAAc;"}

package/dist/SettingsField/SettingsField.module.css

@@ -0,0 +1 @@
+@layer components{.SettingsField_field_dgzFTQ{padding-block:var(--spacing-lg)}.SettingsField_field_dgzFTQ.SettingsField_sizeSm_eO3uQe{padding-block:var(--spacing-md)}.SettingsField_field_dgzFTQ:first-child{padding-top:0}.SettingsField_field_dgzFTQ:last-child{padding-bottom:0}.SettingsField_field_dgzFTQ[data-layout=horizontal]{-moz-column-gap:var(--spacing-xl);column-gap:var(--spacing-xl);row-gap:var(--spacing-xs)}.SettingsField_field_dgzFTQ.SettingsField_sizeSm_eO3uQe[data-layout=horizontal]{-moz-column-gap:var(--spacing-lg);column-gap:var(--spacing-lg)}.SettingsField_field_dgzFTQ[data-layout=vertical]{row-gap:var(--spacing-md)}.SettingsField_field_dgzFTQ.SettingsField_sizeSm_eO3uQe[data-layout=vertical],.SettingsField_field_dgzFTQ[data-layout=vertical] [data-slot=copy]{row-gap:var(--spacing-sm)}}

package/dist/SettingsField/SettingsField.module.css.js

@@ -0,0 +1,10 @@
+const e = "SettingsField_field_dgzFTQ", s = "SettingsField_sizeSm_eO3uQe", i = {
+  field: e,
+  sizeSm: s
+};
+export {
+  i as default,
+  e as field,
+  s as sizeSm
+};
+//# sourceMappingURL=SettingsField.module.css.js.map

package/dist/SettingsField/SettingsField.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsField.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/SettingsField/index.d.ts

@@ -0,0 +1,3 @@
+export { SettingsField } from './SettingsField';
+export type { SettingsFieldLayout, SettingsFieldProps } from './SettingsField';
+//# sourceMappingURL=index.d.ts.map

package/dist/SettingsField/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/SettingsField/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/SettingsField/index.js

@@ -0,0 +1,5 @@
+import { SettingsField as i } from "./SettingsField.js";
+export {
+  i as SettingsField
+};
+//# sourceMappingURL=index.js.map

package/dist/SettingsField/index.js.map

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

package/dist/SettingsLayout/SettingsLayout.d.ts

@@ -0,0 +1,76 @@
+import type { ReactNode, RefObject } from 'react';
+export interface SettingsNavItem {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+}
+export interface SettingsStackItem {
+    id: string;
+    label: string;
+}
+interface SettingsLayoutContextValue {
+    items: readonly SettingsNavItem[];
+    selectedId: string;
+    select: (id: string) => void;
+    stack: readonly SettingsStackItem[];
+    push: (item: SettingsStackItem) => void;
+    rename: (id: string, label: string) => void;
+    pop: () => void;
+    reset: () => void;
+}
+export declare function useSettingsLayout(): SettingsLayoutContextValue;
+type SettingsSaveCopy = {
+    dirty: string;
+    saving: string;
+    saved: string;
+    tooltip?: string;
+};
+type SettingsSaveVerb = 'save' | 'add' | SettingsSaveCopy;
+interface SettingsSaveContextValue {
+    saveRef: RefObject<(() => Promise<boolean>) | null>;
+    onDirtyChange: (dirty: boolean) => void;
+    setSaveVerb: (verb: SettingsSaveVerb) => void;
+}
+export declare function useSettingsSave(): SettingsSaveContextValue;
+export interface SettingsLayoutProps {
+    items: readonly SettingsNavItem[];
+    defaultSelected?: string;
+    defaultStack?: readonly SettingsStackItem[];
+    className?: string;
+    children: ReactNode;
+}
+declare function SettingsLayoutRoot({ items, defaultSelected, defaultStack, className, children, }: SettingsLayoutProps): import("react").JSX.Element;
+export interface SettingsLayoutSidebarProps {
+    title?: string;
+    className?: string;
+    'aria-label'?: string;
+    footer?: ReactNode;
+}
+declare function Sidebar({ title, className, 'aria-label': ariaLabel, footer, }: SettingsLayoutSidebarProps): import("react").JSX.Element;
+export interface SettingsLayoutPaneProps {
+    paneKey?: string;
+    className?: string;
+    children: ReactNode;
+}
+/** Nested view over the content viewport. Previous layer stays mounted (scroll kept). */
+declare function Pane({ paneKey, className, children }: SettingsLayoutPaneProps): import("react").ReactPortal | null;
+declare function Empty({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export interface SettingsLayoutContentProps {
+    headerRight?: ReactNode;
+    /** Pinned under the scrolling pane. */
+    footer?: ReactNode;
+    saveable?: boolean;
+    className?: string;
+    children: ReactNode;
+}
+declare function Content({ headerRight, footer, saveable, className, children }: SettingsLayoutContentProps): import("react").JSX.Element;
+export declare const SettingsLayout: typeof SettingsLayoutRoot & {
+    Sidebar: typeof Sidebar;
+    Content: typeof Content;
+    Pane: typeof Pane;
+    Empty: typeof Empty;
+};
+export {};
+//# sourceMappingURL=SettingsLayout.d.ts.map

package/dist/SettingsLayout/SettingsLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsLayout.d.ts","sourceRoot":"","sources":["../../src/SettingsLayout/SettingsLayout.tsx"],"names":[],"mappings":"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"}