@vikram-hegde/skeletal 0.0.1

package/dist/index-rH7TJeJt.d.ts

@@ -0,0 +1,334 @@
+import { n as ButtonProps } from "./button-Dvd4n2U4.js";
+import { SelectArrowProps, SelectBackdropProps, SelectGroupLabelProps, SelectGroupProps, SelectItemIndicatorProps, SelectItemProps, SelectItemTextProps, SelectLabelProps, SelectListProps, SelectPopupProps, SelectPortalProps, SelectPositionerProps, SelectRootProps, SelectScrollDownArrowProps, SelectScrollUpArrowProps, SelectSeparatorProps, SelectTriggerProps, SelectValueProps } from "@base-ui/react/select";
+//#region src/select/select-arrow.d.ts
+/**
+ * A small arrow pointing from the popup to the trigger. Renders a `<div>`
+ * element.
+ *
+ * Place it inside `Select.Popup` (before the list). It orients itself based on
+ * the popup's `data-side` attribute, so it works for any placement. Pair with a
+ * larger `sideOffset` on the `Select.Positioner` so the arrow has room.
+ */
+interface SelectArrowProps$1 extends SelectArrowProps {}
+declare function SelectArrow({ className, ...props }: SelectArrowProps$1): import("react").JSX.Element;
+//#endregion
+//#region src/select/select-backdrop.d.ts
+/**
+ * An overlay rendered beneath the select popup, used when the select is modal.
+ * Renders a `<div>` element.
+ *
+ * Only needed when `Select.Root` is modal (the default). Clicking the backdrop
+ * dismisses the popup. The overlay is translucent; set a fully opaque color
+ * (or remove it) if you prefer a "dimmed page" look vs. a light scrim.
+ */
+interface SelectBackdropProps$1 extends SelectBackdropProps {}
+declare function SelectBackdrop({ className, ...props }: SelectBackdropProps$1): import("react").JSX.Element;
+//#endregion
+//#region src/select/select-group.d.ts
+/**
+ * Groups related select items under an accessible label. Renders a `<div>`
+ * element.
+ *
+ * Pair with `<Select.GroupLabel>` inside the group; Base UI wires the
+ * `aria-labelledby` association automatically.
+ *
+ * Rendered with `display: contents` so its items participate directly in the
+ * popup grid.
+ */
+interface SelectGroupProps$1 extends SelectGroupProps {}
+declare function SelectGroup({ className, ...props }: SelectGroupProps$1): import("react").JSX.Element;
+//#endregion
+//#region src/select/select-group-label.d.ts
+/**
+ * A label for a `<Select.Group>`, automatically associated with it for screen
+ * readers. Renders a `<div>` element.
+ *
+ * Styled small and muted; add a `Select.Separator` before the group to visually
+ * divide it from the items above.
+ */
+interface SelectGroupLabelProps$1 extends SelectGroupLabelProps {}
+declare function SelectGroupLabel({ className, ...props }: SelectGroupLabelProps$1): import("react").JSX.Element;
+//#endregion
+//#region src/select/select-item.d.ts
+/**
+ * An individual option in the select popup. Renders a `<div>` element.
+ *
+ * Accepts all Base UI item props: `value` (any primitive or object), `disabled`,
+ * and `label` for keyboard text navigation. Give each item a unique `value`;
+ * when `Select.Value` renders the label, pass the same `items` to `Select.Root`.
+ *
+ * A selected item shows its `Select.ItemIndicator` (e.g. a check icon) in the
+ * leading column.
+ *
+ * @default value = null
+ * @default disabled = false
+ */
+interface SelectItemProps$1 extends SelectItemProps {}
+declare function SelectItem({ className, ...props }: SelectItemProps$1): import("react").JSX.Element;
+//#endregion
+//#region src/select/select-item-indicator.d.ts
+/**
+ * A checkmark slot shown on the selected item. Renders a `<span>` element.
+ *
+ * Place it as the first child of a `Select.Item`; it sits in the leading grid
+ * column. The indicator (and its children) unmount when the item is not
+ * selected unless `keepMounted` is set. It animates in/out via
+ * `data-starting-style` / `data-ending-style`.
+ *
+ * @default keepMounted = false
+ */
+interface SelectItemIndicatorProps$1 extends SelectItemIndicatorProps {}
+declare function SelectItemIndicator({ className, ...props }: SelectItemIndicatorProps$1): import("react").JSX.Element;
+//#endregion
+//#region src/select/select-item-text.d.ts
+/**
+ * The text label of a select item. Renders a `<div>` element.
+ *
+ * Place it as a child of a `Select.Item`; it fills the trailing grid column and
+ * truncates with an ellipsis when the popup is narrower than its content.
+ */
+interface SelectItemTextProps$1 extends SelectItemTextProps {}
+declare function SelectItemText({ className, ...props }: SelectItemTextProps$1): import("react").JSX.Element;
+//#endregion
+//#region src/select/select-label.d.ts
+/**
+ * An accessible label for the select trigger. Renders a `<div>` element.
+ *
+ * Clicking it focuses the trigger without opening the popup. Place it as a
+ * sibling of the trigger inside `Select.Root`; Base UI wires the
+ * `aria-labelledby` association automatically.
+ *
+ * Styled medium-weight with comfortable spacing below it (0.5rem), so the
+ * label reads as a field caption rather than crowding the trigger. It dims to
+ * the muted color when the select is `disabled`.
+ */
+interface SelectLabelProps$1 extends SelectLabelProps {}
+declare function SelectLabel({ className, ...props }: SelectLabelProps$1): import("react").JSX.Element;
+//#endregion
+//#region src/select/select-list.d.ts
+/**
+ * A scrollable container for the select items. Renders a `<div>` element.
+ *
+ * Constrained by `--available-height` so long lists scroll; wrap it between
+ * the `Select.ScrollUpArrow` and `Select.ScrollDownArrow` for edge scrolling.
+ */
+interface SelectListProps$1 extends SelectListProps {}
+declare function SelectList({ className, ...props }: SelectListProps$1): import("react").JSX.Element;
+//#endregion
+//#region src/select/select-popup.d.ts
+/**
+ * The popup panel that holds the select list. Renders a `<div>` element.
+ *
+ * Accepts all Base UI popup props, including `finalFocus` for controlling
+ * focus when the popup closes. Content animates in/out via the
+ * `data-starting-style` / `data-ending-style` transitions.
+ *
+ * By default the popup is at least as wide as the trigger and never narrower
+ * than 13rem (`min-width: max(var(--anchor-width), 13rem)`), so a small trigger
+ * still gets a comfortable dropdown. Pass `style={{ width: ... }}` or a
+ * `className` to constrain it. In `alignItemWithTrigger` mode (`data-side="none"`)
+ * the popup widens by 1.75rem so the selected item aligns with the trigger's
+ * value text.
+ *
+ * @default finalFocus = true
+ */
+interface SelectPopupProps$1 extends SelectPopupProps {}
+declare function SelectPopup({ className, ...props }: SelectPopupProps$1): import("react").JSX.Element;
+//#endregion
+//#region src/select/select-portal.d.ts
+/**
+ * Moves the select popup to a different part of the DOM, appended to `<body>`
+ * by default. Renders a `<div>` element.
+ *
+ * `container` overrides the portal target.
+ */
+interface SelectPortalProps$1 extends SelectPortalProps {}
+declare function SelectPortal({ className, ...props }: SelectPortalProps$1): import("react").JSX.Element;
+//#endregion
+//#region src/select/select-positioner.d.ts
+/**
+ * Positions the select popup against the trigger. Renders a `<div>` element.
+ *
+ * Accepts all Base UI positioner props: `side`, `align`, `sideOffset`,
+ * `alignOffset`, `collisionAvoidance`, `collisionBoundary`, `collisionPadding`,
+ * `sticky`, `positionMethod`, `arrowPadding`, and `anchor`.
+ *
+ * By default `alignItemWithTrigger` is `true`: the popup overlaps the trigger
+ * so the selected item's text aligns with the trigger's value text (the
+ * `data-side` is `"none"` on the popup in this mode). Set it to `false` for a
+ * plain dropdown that floats below the trigger. Other positioning props like
+ * `side`/`align` only take effect when `alignItemWithTrigger` is `false` or in
+ * fallback mode.
+ *
+ * @default sideOffset = 4
+ * @default alignItemWithTrigger = true
+ */
+interface SelectPositionerProps$1 extends SelectPositionerProps {}
+declare function SelectPositioner({ className, sideOffset, ...props }: SelectPositionerProps$1): import("react").JSX.Element;
+//#endregion
+//#region src/select/select-root.d.ts
+/**
+ * The root of the select, grouping all parts together. Renders no DOM element.
+ *
+ * All Base UI root props are supported: `value` / `defaultValue`,
+ * `onValueChange`, `multiple`, `items`, `itemToStringValue`, `open` /
+ * `defaultOpen`, `onOpenChange`, `disabled`, `readOnly`, `required`,
+ * `modal`, `name`, `form`, and `autoComplete`.
+ *
+ * Pass `items` (an array of `{ value, label }` or a record of label lookups)
+ * so `Select.Value` renders the matching label for the selected value instead
+ * of the raw value. Add `multiple` to allow multi-selection.
+ *
+ * `modal` is `true` by default (pointer outside is blocked and page scroll is
+ * locked while open); set `modal={false}` for a non-blocking dropdown that
+ * dismisses when you click elsewhere.
+ *
+ * @default modal = true
+ */
+interface SelectProps<Value, Multiple extends boolean | undefined = false> extends SelectRootProps<Value, Multiple> {}
+declare function SelectRoot<Value, Multiple extends boolean | undefined = false>(props: SelectProps<Value, Multiple>): import("react").JSX.Element;
+//#endregion
+//#region src/select/select-scroll-down-arrow.d.ts
+/**
+ * A bottom edge arrow that scrolls the select list down while hovered. Renders
+ * a `<div>` element. Hidden when the list is not scrollable (or on touch input).
+ *
+ * Place it below `Select.List` inside the popup and give it a chevron child.
+ * Its background covers the list so items scroll underneath it.
+ *
+ * @default keepMounted = false
+ */
+interface SelectScrollDownArrowProps$1 extends SelectScrollDownArrowProps {}
+declare function SelectScrollDownArrow({ className, ...props }: SelectScrollDownArrowProps$1): import("react").JSX.Element;
+//#endregion
+//#region src/select/select-scroll-up-arrow.d.ts
+/**
+ * A top edge arrow that scrolls the select list up while hovered. Renders a
+ * `<div>` element. Hidden when the list is not scrollable (or on touch input).
+ *
+ * Place it above `Select.List` inside the popup and give it a chevron child.
+ * Its background covers the list so items scroll underneath it.
+ *
+ * @default keepMounted = false
+ */
+interface SelectScrollUpArrowProps$1 extends SelectScrollUpArrowProps {}
+declare function SelectScrollUpArrow({ className, ...props }: SelectScrollUpArrowProps$1): import("react").JSX.Element;
+//#endregion
+//#region src/select/select-separator.d.ts
+/**
+ * A horizontal divider between groups of select items. Renders a `<div>` element.
+ *
+ * It is announced to screen readers via `role="separator"`.
+ *
+ * @default orientation = 'horizontal'
+ */
+interface SelectSeparatorProps$1 extends SelectSeparatorProps {}
+declare function SelectSeparator({ className, ...props }: SelectSeparatorProps$1): import("react").JSX.Element;
+//#endregion
+//#region src/select/select-trigger.d.ts
+/**
+ * A button that opens the select popup. Renders a `<button>` element.
+ *
+ * Composed from the `Button` component via Base UI's `render` prop, so it
+ * accepts all `Button` props (`variant`, `size`, `fullWidth`, `disabled`,
+ * `onClick`, ...) plus the select-trigger props from Base UI. Defaults to the
+ * `outline` variant.
+ *
+ * The trigger always renders the selected `Select.Value` on the left and a
+ * built-in `CaretDown` disclosure chevron on the right (via `BaseSelect.Icon`,
+ * which rotates 180° when open). The layout is `justify-content: space-between`.
+ */
+interface SelectTriggerProps$1 extends ButtonProps, Omit<SelectTriggerProps, "className" | "style" | "render" | "nativeButton"> {}
+declare function SelectTrigger({ className, variant, size, fullWidth, children, ...props }: SelectTriggerProps$1): import("react").JSX.Element;
+//#endregion
+//#region src/select/select-value.d.ts
+/**
+ * The currently selected value shown in the trigger. Renders a `<span>` element.
+ *
+ * By default renders the raw value, or the matching label when `items` is
+ * passed to `Select.Root`. Pass `placeholder` to show hint text when no value
+ * is selected, or a function as `children` to format the value:
+ *
+ * ```tsx
+ * <Select.Value placeholder="Choose a theme">
+ *   {(value) => value ? labels[value] : 'Nothing selected'}
+ * </Select.Value>
+ * ```
+ *
+ * Placeholder text is styled muted via the `data-placeholder` state.
+ */
+interface SelectValueProps$1 extends SelectValueProps {}
+declare function SelectValue({ className, ...props }: SelectValueProps$1): import("react").JSX.Element;
+//#endregion
+//#region src/select/index.d.ts
+/**
+ * Compound component for choosing a predefined value from a dropdown.
+ *
+ * Assemble the parts as properties of the object:
+ *
+ * ```tsx
+ * import { Select } from '@vikram-hegde/skeletal'
+ *
+ * const items = [
+ *   { value: 'system', label: 'System default' },
+ *   { value: 'light', label: 'Light' },
+ *   { value: 'dark', label: 'Dark' },
+ * ]
+ *
+ * <Select.Root items={items} defaultValue="system">
+ *   <Select.Label>Theme</Select.Label>
+ *   <Select.Trigger>
+ *     <Select.Value placeholder="Select theme" />
+ *   </Select.Trigger>
+ *   <Select.Portal>
+ *     <Select.Positioner>
+ *       <Select.Popup>
+ *         <Select.List>
+ *           {items.map((item) => (
+ *             <Select.Item key={item.value} value={item.value}>
+ *               <Select.ItemIndicator>
+ *                 <Icon name={Check} size={14} />
+ *               </Select.ItemIndicator>
+ *               <Select.ItemText>{item.label}</Select.ItemText>
+ *             </Select.Item>
+ *           ))}
+ *         </Select.List>
+ *       </Select.Popup>
+ *     </Select.Positioner>
+ *   </Select.Portal>
+ * </Select.Root>
+ * ```
+ *
+ * Composition follows the Base UI anatomy — `Select.Positioner` floats the
+ * popup against the trigger and handles collision avoidance; by default it
+ * overlaps the trigger so the selected item aligns with the trigger's value
+ * text (`alignItemWithTrigger`). `Select.Portal` moves the popup to `<body>`.
+ * `Select.ScrollUpArrow` / `Select.ScrollDownArrow` give edge scrolling on long
+ * lists. The trigger owns its `CaretDown` chevron — no `Select.Icon` is needed.
+ *
+ * All parts are thin styled wrappers over Base UI's `Select`, so every Base UI
+ * prop, `render` override, and ref behaves the same. Part prop types are
+ * exported separately (`SelectProps`, `SelectItemProps`, etc.).
+ */
+declare const Select$1: {
+  Root: typeof SelectRoot;
+  Label: typeof SelectLabel;
+  Trigger: typeof SelectTrigger;
+  Value: typeof SelectValue;
+  Portal: typeof SelectPortal;
+  Backdrop: typeof SelectBackdrop;
+  Positioner: typeof SelectPositioner;
+  Popup: typeof SelectPopup;
+  List: typeof SelectList;
+  Item: typeof SelectItem;
+  ItemIndicator: typeof SelectItemIndicator;
+  ItemText: typeof SelectItemText;
+  Arrow: typeof SelectArrow;
+  ScrollUpArrow: typeof SelectScrollUpArrow;
+  ScrollDownArrow: typeof SelectScrollDownArrow;
+  Group: typeof SelectGroup;
+  GroupLabel: typeof SelectGroupLabel;
+  Separator: typeof SelectSeparator;
+};
+//#endregion
+export { SelectGroupProps$1 as _, SelectScrollUpArrowProps$1 as a, SelectPositionerProps$1 as c, SelectListProps$1 as d, SelectLabelProps$1 as f, SelectGroupLabelProps$1 as g, SelectItemProps$1 as h, SelectSeparatorProps$1 as i, SelectPortalProps$1 as l, SelectItemIndicatorProps$1 as m, SelectValueProps$1 as n, SelectScrollDownArrowProps$1 as o, SelectItemTextProps$1 as p, SelectTriggerProps$1 as r, SelectProps as s, Select$1 as t, SelectPopupProps$1 as u, SelectBackdropProps$1 as v, SelectArrowProps$1 as y };

package/dist/index-rQ7sRkqg.d.ts

@@ -0,0 +1,122 @@
+import { RadioGroupProps } from "@base-ui/react/radio-group";
+import { RadioIndicatorProps, RadioRootProps } from "@base-ui/react/radio";
+//#region src/radio/radio-group.d.ts
+/**
+ * Shared state for a series of radio buttons. Renders a `<div>` laid out as a
+ * vertical stack.
+ *
+ * Place `Radio.Root` items inside; the group owns the selected value, so form
+ * libraries only wire up the group — individual radios just declare their
+ * `value`:
+ *
+ * ```tsx
+ * // react-hook-form
+ * <Controller
+ *   control={control}
+ *   name="plan"
+ *   render={({ field }) => (
+ *     <Radio.Group value={field.value} onValueChange={field.onChange} onBlur={field.onBlur}>
+ *       <label><Radio.Root value="free" /> Free</label>
+ *       <label><Radio.Root value="pro" /> Pro</label>
+ *     </Radio.Group>
+ *   )}
+ * />
+ * ```
+ *
+ * TanStack Form works the same way via `form.Field` (`field.state.value`,
+ * `field.handleChange`). For Formisch / uncontrolled forms, pass `name` —
+ * the hidden input submits the selected radio's value natively.
+ *
+ * Label the group accessibly with `aria-labelledby` or by wrapping in Base
+ * UI's `Fieldset.Root`.
+ */
+interface RadioGroupProps$1<Value = unknown> extends RadioGroupProps<Value> {}
+declare function RadioGroup$1<Value>({ className, ...props }: RadioGroupProps$1<Value>): import("react").JSX.Element;
+//#endregion
+//#region src/radio/radio-indicator.d.ts
+/**
+ * The dot shown when the radio is selected. Renders a `<span>` whose `::before`
+ * draws a circle tinted with the root's foreground color — pass `children` or
+ * `render` to draw something else instead. Unmounts while unchecked unless
+ * `keepMounted` is set. Animates in/out via `data-starting-style` /
+ * `data-ending-style`.
+ *
+ * @default keepMounted = false
+ */
+interface RadioIndicatorProps$1 extends RadioIndicatorProps {}
+declare function RadioIndicator({ className, ...props }: RadioIndicatorProps$1): import("react").JSX.Element;
+//#endregion
+//#region src/radio/radio-root.d.ts
+/**
+ * A single radio button — must sit inside a `Radio.Group`. Renders a `<span>`
+ * with a hidden `<input>` beside it, so it participates in native form
+ * submission and validation without extra wiring.
+ *
+ * Works directly with headless form libraries. Unlike checkboxes, radios are
+ * always string-valued and identified by their `value`, so libraries only
+ * need the group-level handlers:
+ *
+ * - **React Hook Form** — control the group (see `Radio.Group`) and give each
+ *   option its `value`; no per-item registration is needed:
+ *
+ * ```tsx
+ * <Controller
+ *   control={control}
+ *   name="plan"
+ *   render={({ field }) => (
+ *     <Radio.Group value={field.value} onValueChange={field.onChange} onBlur={field.onBlur}>
+ *       <label><Radio.Root value="free" /> Free</label>
+ *       <label><Radio.Root value="pro" /> Pro</label>
+ *     </Radio.Group>
+ *   )}
+ * />
+ * ```
+ *
+ * - **TanStack Form** — same shape via `form.Field` (`field.state.value`,
+ *   `field.handleChange`). **Formisch** / uncontrolled forms — just set the
+ *   group's `name`; the selected radio's hidden input submits natively.
+ *
+ * Validation styling (`data-invalid`, `data-valid`, ...) activates when the
+ * radio is wrapped in Base UI's `Field.Root`.
+ */
+interface RadioProps<Value = unknown> extends RadioRootProps<Value> {}
+declare function RadioRoot<Value>({ className, children, ...props }: RadioProps<Value>): import("react").JSX.Element;
+//#endregion
+//#region src/radio/index.d.ts
+/**
+ * Compound component for picking exactly one option from a set.
+ *
+ * Assemble the parts as properties of the object:
+ *
+ * ```tsx
+ * import { Radio } from '@vikram-hegde/skeletal'
+ *
+ * <Radio.Group defaultValue="free" name="plan">
+ *   <label>
+ *     <Radio.Root value="free">
+ *       <Radio.Indicator />
+ *     </Radio.Root>
+ *     Free
+ *   </label>
+ *   <label>
+ *     <Radio.Root value="pro">
+ *       <Radio.Indicator />
+ *     </Radio.Root>
+ *     Pro
+ *   </label>
+ * </Radio.Group>
+ * ```
+ *
+ * The `Group` owns the value and renders the hidden form input — see its
+ * docs for react-hook-form / TanStack Form wiring. All parts are thin styled
+ * wrappers over Base UI's `Radio` / `RadioGroup`, so every Base UI prop,
+ * `render` override, and ref behaves the same. Part prop types are exported
+ * separately (`RadioProps`, `RadioGroupProps`, ...).
+ */
+declare const Radio$1: {
+  Root: typeof RadioRoot;
+  Group: typeof RadioGroup$1;
+  Indicator: typeof RadioIndicator;
+};
+//#endregion
+export { RadioGroupProps$1 as i, RadioProps as n, RadioIndicatorProps$1 as r, Radio$1 as t };

package/dist/index.css

@@ -0,0 +1,93 @@
+@layer skeletal {
+  *, :before, :after {
+    box-sizing: border-box;
+  }
+
+  :root {
+    color-scheme: light dark;
+    --sk-background: light-dark(oklch(100% 0 0), oklch(14.5% 0 0));
+    --sk-foreground: light-dark(oklch(14.5% 0 0), oklch(98.5% 0 0));
+    --sk-card: light-dark(oklch(100% 0 0), oklch(20.5% 0 0));
+    --sk-card-foreground: light-dark(oklch(14.5% 0 0), oklch(98.5% 0 0));
+    --sk-popover: light-dark(oklch(100% 0 0), oklch(20.5% 0 0));
+    --sk-popover-foreground: light-dark(oklch(14.5% 0 0), oklch(98.5% 0 0));
+    --sk-primary: light-dark(oklch(14.5% 0 0), oklch(98.5% 0 0));
+    --sk-primary-foreground: light-dark(oklch(98.5% 0 0), oklch(14.5% 0 0));
+    --sk-secondary: light-dark(oklch(96.7% 0 0), oklch(27.4% 0 0));
+    --sk-secondary-foreground: light-dark(oklch(21% 0 0), oklch(98.5% 0 0));
+    --sk-muted: light-dark(oklch(97% 0 0), oklch(26.9% 0 0));
+    --sk-muted-foreground: light-dark(oklch(55.6% 0 0), oklch(70.8% 0 0));
+    --sk-accent: light-dark(oklch(97% 0 0), oklch(26.9% 0 0));
+    --sk-accent-foreground: light-dark(oklch(20.5% 0 0), oklch(98.5% 0 0));
+    --sk-destructive: light-dark(oklch(57.7% .245 27.325), oklch(70.4% .191 22.216));
+    --sk-destructive-foreground: light-dark(oklch(97% 0 0), oklch(12% .021 26.805));
+    --sk-success: light-dark(oklch(62.7% .194 149.214), oklch(69.6% .17 162.48));
+    --sk-success-foreground: oklch(98.5% 0 0);
+    --sk-warning: light-dark(oklch(79.5% .184 86.047), oklch(82.8% .189 84.429));
+    --sk-warning-foreground: oklch(27.9% .077 45.635);
+    --sk-border: light-dark(oklch(92.2% 0 0), oklch(100% 0 0 / .1));
+    --sk-input: light-dark(oklch(92.2% 0 0), oklch(100% 0 0 / .15));
+    --sk-ring: light-dark(oklch(70.8% 0 0), oklch(55.6% 0 0));
+    --sk-chart-1: light-dark(oklch(87% 0 0), oklch(72% 0 0));
+    --sk-chart-2: light-dark(oklch(55.6% 0 0), oklch(66% 0 0));
+    --sk-chart-3: light-dark(oklch(43.9% 0 0), oklch(55% 0 0));
+    --sk-chart-4: light-dark(oklch(37.1% 0 0), oklch(50% 0 0));
+    --sk-chart-5: light-dark(oklch(26.9% 0 0), oklch(45% 0 0));
+    --sk-radius: 0;
+    --sk-shadow-sm: light-dark(0 1px 2px oklch(0% 0 0 / .04), 0 1px 2px oklch(0% 0 0 / .2));
+    --sk-shadow-md: light-dark(0 16px 50px oklch(0% 0 0 / .18), 0 16px 50px oklch(0% 0 0 / .45));
+    --sk-shadow-lg: light-dark(0 24px 60px oklch(0% 0 0 / .22), 0 24px 60px oklch(0% 0 0 / .55));
+    --sk-sidebar: light-dark(oklch(98.5% 0 0), oklch(20.5% 0 0));
+    --sk-sidebar-foreground: light-dark(oklch(14.5% 0 0), oklch(98.5% 0 0));
+    --sk-sidebar-primary: light-dark(oklch(54.6% .245 262.881), oklch(62.3% .214 259.815));
+    --sk-sidebar-primary-foreground: oklch(97% .014 254.604);
+    --sk-sidebar-accent: light-dark(oklch(97% 0 0), oklch(26.9% 0 0));
+    --sk-sidebar-accent-foreground: light-dark(oklch(20.5% 0 0), oklch(98.5% 0 0));
+    --sk-sidebar-border: light-dark(oklch(92.2% 0 0), oklch(100% 0 0 / .1));
+    --sk-sidebar-ring: light-dark(oklch(70.8% 0 0), oklch(55.6% 0 0));
+    --sk-scrollbar-thumb: light-dark(oklch(84% 0 0), oklch(31% 0 0));
+    --sk-scrollbar-thumb-hover: light-dark(oklch(68% 0 0), oklch(45% 0 0));
+  }
+
+  html.dark {
+    color-scheme: dark;
+  }
+
+  html.light {
+    color-scheme: light;
+  }
+
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--sk-scrollbar-thumb) transparent;
+  }
+
+  ::-webkit-scrollbar {
+    width: .625rem;
+    height: .625rem;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: none;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--sk-scrollbar-thumb);
+    background-clip: content-box;
+    border: 2px solid #0000;
+    border-radius: 0;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--sk-scrollbar-thumb-hover);
+    background-clip: content-box;
+  }
+
+  label:has([role="checkbox"]), label:has([role="radio"]), label:has([role="switch"]) {
+    align-items: center;
+    gap: .5rem;
+    min-block-size: 1rem;
+    line-height: 1.25;
+    display: inline-flex;
+  }
+}

package/dist/index.d.ts

@@ -0,0 +1,26 @@
+import { i as DialogBackdropProps, n as DialogViewportProps } from "./dialog-viewport-CaMWJrCJ.js";
+import { i as ButtonVariant, n as ButtonProps, r as ButtonSize, t as Button } from "./button-Dvd4n2U4.js";
+import { i as DialogDescriptionProps, n as DialogTitleProps, o as DialogCloseProps } from "./dialog-title-jyf86Q8C.js";
+import { a as DialogContentSize, i as DialogContentProps, n as DialogFooterProps } from "./dialog-footer-bNVIVPbu.js";
+import { n as DialogPortalProps } from "./dialog-portal-BF89FBeX.js";
+import { n as AlertDialogTriggerProps, r as AlertDialogProps, t as AlertDialog } from "./index-CbMW32E9.js";
+import { n as BadgeProps, r as BadgeVariant, t as Badge } from "./index-A2QmU5r9.js";
+import "./button/index.js";
+import { i as CheckboxGroupProps, n as CheckboxProps, r as CheckboxIndicatorProps, t as Checkbox } from "./index-CUy-9csi.js";
+import { C as ComboboxChipRemoveProps, E as ComboboxArrowProps, S as ComboboxChipsProps, T as ComboboxBackdropProps, _ as ComboboxGroupLabelProps, a as ComboboxSeparatorProps, b as ComboboxCollectionProps, c as ComboboxPositionerProps, d as ComboboxListProps, f as ComboboxLabelProps, g as ComboboxInputProps, h as ComboboxInputGroupProps, i as ComboboxStatusProps, l as ComboboxPortalProps, m as ComboboxItemProps, n as ComboboxValueProps, o as ComboboxRowProps, p as ComboboxItemIndicatorProps, r as ComboboxTriggerProps, s as ComboboxProps, t as Combobox, u as ComboboxPopupProps, v as ComboboxGroupProps, w as ComboboxChipProps, x as ComboboxClearProps, y as ComboboxEmptyProps } from "./index-Br2NrBW_.js";
+import { a as CommandPaletteItemProps, c as CommandPaletteGroupLabelProps, d as CommandPaletteEmptyProps, f as CommandPaletteContentProps, i as CommandPaletteListProps, l as CommandPaletteGroupProps, n as CommandPaletteOpenChangeDetails, o as CommandPaletteInputGroupProps, r as CommandPaletteRootProps, s as CommandPaletteInputProps, t as CommandPalette, u as CommandPaletteFooterProps } from "./index-BBOkTl3h.js";
+import { n as DialogTriggerProps, r as DialogProps, t as Dialog } from "./index-CznsZ_1M.js";
+import { a as DrawerProps, c as DrawerPopupSize, d as DrawerContentProps, f as DrawerBackdropProps, i as DrawerSwipeAreaProps, l as DrawerHeaderProps, n as DrawerViewportProps, o as DrawerSide, r as DrawerTriggerProps, s as DrawerPopupProps, t as Drawer, u as DrawerFooterProps } from "./index-B0uNLS7z.js";
+import { n as IconProps, t as Icon } from "./index-kpw3_4q_.js";
+import { a as FieldRootProps, c as InputSize, i as FieldLabelProps, n as FieldDescriptionProps, o as Input, r as FieldErrorProps, s as InputProps, t as Field } from "./index-BXPUT5u-.js";
+import { C as Box, S as CenterProps, T as LayoutPrimitiveProps, _ as Container, a as Sidebar, b as ClusterProps, c as ReelProps, d as Grid, f as GridProps, g as CoverProps, h as Cover, i as StackProps, l as Imposter, m as FrameProps, n as SwitcherProps, o as SidebarProps, p as Frame, r as Stack, s as Reel, t as Switcher, u as ImposterProps, v as ContainerProps, w as BoxProps, x as Center, y as Cluster } from "./index-CyTcR6iv.js";
+import { _ as MenuGroupProps, a as MenuSubmenuRootProps, b as MenuBackdropProps, c as MenuRadioItemIndicatorProps, d as MenuPositionerProps, f as MenuPortalProps, g as MenuGroupLabelProps, h as MenuItemProps, i as MenuSubmenuTriggerProps, l as MenuRadioItemProps, m as MenuLinkItemProps, n as MenuViewportProps, o as MenuSeparatorProps, p as MenuPopupProps, r as MenuTriggerProps, s as MenuProps, t as Menu, u as MenuRadioGroupProps, v as MenuCheckboxItemIndicatorProps, x as MenuArrowProps, y as MenuCheckboxItemProps } from "./index-D-6gOciw.js";
+import { i as RadioGroupProps, n as RadioProps, r as RadioIndicatorProps, t as Radio } from "./index-rQ7sRkqg.js";
+import { _ as SelectGroupProps, a as SelectScrollUpArrowProps, c as SelectPositionerProps, d as SelectListProps, f as SelectLabelProps, g as SelectGroupLabelProps, h as SelectItemProps, i as SelectSeparatorProps, l as SelectPortalProps, m as SelectItemIndicatorProps, n as SelectValueProps, o as SelectScrollDownArrowProps, p as SelectItemTextProps, r as SelectTriggerProps, s as SelectProps, t as Select, u as SelectPopupProps, v as SelectBackdropProps, y as SelectArrowProps } from "./index-rH7TJeJt.js";
+import { a as ScrollAreaRootProps, i as ScrollAreaScrollbarProps, n as ScrollAreaViewportProps, o as ScrollAreaCornerProps, r as ScrollAreaThumbProps, s as ScrollAreaContentProps, t as ScrollArea } from "./index-GOGpFujX.js";
+import { n as SkeletonProps, t as Skeleton } from "./index-BLFVnve3.js";
+import { n as SpinnerProps, t as Spinner } from "./index-BngvATZx.js";
+import { n as SwitchThumbProps, r as SwitchProps, t as Switch } from "./index-B63PSP58.js";
+import { a as PopoverTitleProps, c as PopoverPositionerProps, d as PopoverCloseProps, f as PopoverBackdropProps, i as PopoverTriggerProps, l as PopoverPortalProps, n as PopoverHandle, o as PopoverProps, p as PopoverArrowProps, r as PopoverViewportProps, s as PopoverPopupProps, t as Popover, u as PopoverDescriptionProps } from "./index-W3ozKcis.js";
+import { a as TooltipProps, c as TooltipPortalProps, i as TooltipTriggerProps, l as TooltipPopupProps, n as TooltipHandle, o as TooltipProviderProps, r as TooltipViewportProps, s as TooltipPositionerProps, t as Tooltip, u as TooltipArrowProps } from "./index-DdqDyczP.js";
+export { AlertDialog, type AlertDialogProps, type AlertDialogTriggerProps, Badge, type BadgeProps, type BadgeVariant, Box, type BoxProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Center, type CenterProps, Checkbox, type CheckboxGroupProps, type CheckboxIndicatorProps, type CheckboxProps, Cluster, type ClusterProps, Combobox, type ComboboxArrowProps, type ComboboxBackdropProps, type ComboboxChipProps, type ComboboxChipRemoveProps, type ComboboxChipsProps, type ComboboxClearProps, type ComboboxCollectionProps, type ComboboxEmptyProps, type ComboboxGroupLabelProps, type ComboboxGroupProps, type ComboboxInputGroupProps, type ComboboxInputProps, type ComboboxItemIndicatorProps, type ComboboxItemProps, type ComboboxLabelProps, type ComboboxListProps, type ComboboxPopupProps, type ComboboxPortalProps, type ComboboxPositionerProps, type ComboboxProps, type ComboboxRowProps, type ComboboxSeparatorProps, type ComboboxStatusProps, type ComboboxTriggerProps, type ComboboxValueProps, CommandPalette, type CommandPaletteContentProps, type CommandPaletteEmptyProps, type CommandPaletteFooterProps, type CommandPaletteGroupLabelProps, type CommandPaletteGroupProps, type CommandPaletteInputGroupProps, type CommandPaletteInputProps, type CommandPaletteItemProps, type CommandPaletteListProps, type CommandPaletteOpenChangeDetails, type CommandPaletteRootProps, Container, type ContainerProps, Cover, type CoverProps, Dialog, type DialogBackdropProps, type DialogCloseProps, type DialogContentProps, type DialogContentSize, type DialogDescriptionProps, type DialogFooterProps, type DialogPortalProps, type DialogProps, type DialogTitleProps, type DialogTriggerProps, type DialogViewportProps, Drawer, type DrawerBackdropProps, type DrawerContentProps, type DrawerFooterProps, type DrawerHeaderProps, type DrawerPopupProps, type DrawerPopupSize, type DrawerProps, type DrawerSide, type DrawerSwipeAreaProps, type DrawerTriggerProps, type DrawerViewportProps, Field, type FieldDescriptionProps, type FieldErrorProps, type FieldLabelProps, type FieldRootProps, Frame, type FrameProps, Grid, type GridProps, Icon, type IconProps, Imposter, type ImposterProps, Input, type InputProps, type InputSize, type LayoutPrimitiveProps, Menu, type MenuArrowProps, type MenuBackdropProps, type MenuCheckboxItemIndicatorProps, type MenuCheckboxItemProps, type MenuGroupLabelProps, type MenuGroupProps, type MenuItemProps, type MenuLinkItemProps, type MenuPopupProps, type MenuPortalProps, type MenuPositionerProps, type MenuProps, type MenuRadioGroupProps, type MenuRadioItemIndicatorProps, type MenuRadioItemProps, type MenuSeparatorProps, type MenuSubmenuRootProps, type MenuSubmenuTriggerProps, type MenuTriggerProps, type MenuViewportProps, Popover, type PopoverArrowProps, type PopoverBackdropProps, type PopoverCloseProps, type PopoverDescriptionProps, type PopoverHandle, type PopoverPopupProps, type PopoverPortalProps, type PopoverPositionerProps, type PopoverProps, type PopoverTitleProps, type PopoverTriggerProps, type PopoverViewportProps, Radio, type RadioGroupProps, type RadioIndicatorProps, type RadioProps, Reel, type ReelProps, ScrollArea, type ScrollAreaContentProps, type ScrollAreaCornerProps, type ScrollAreaRootProps, type ScrollAreaScrollbarProps, type ScrollAreaThumbProps, type ScrollAreaViewportProps, Select, type SelectArrowProps, type SelectBackdropProps, type SelectGroupLabelProps, type SelectGroupProps, type SelectItemIndicatorProps, type SelectItemProps, type SelectItemTextProps, type SelectLabelProps, type SelectListProps, type SelectPopupProps, type SelectPortalProps, type SelectPositionerProps, type SelectProps, type SelectScrollDownArrowProps, type SelectScrollUpArrowProps, type SelectSeparatorProps, type SelectTriggerProps, type SelectValueProps, Sidebar, type SidebarProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, Stack, type StackProps, Switch, type SwitchProps, type SwitchThumbProps, Switcher, type SwitcherProps, Tooltip, type TooltipArrowProps, type TooltipHandle, type TooltipPopupProps, type TooltipPortalProps, type TooltipPositionerProps, type TooltipProps, type TooltipProviderProps, type TooltipTriggerProps, type TooltipViewportProps };

package/dist/index.js

@@ -0,0 +1,26 @@
+import './index.css';
+import { t as Button } from "./button-B48UNbaC.js";
+import { t as Stack } from "./stack-BzFVrsmT.js";
+import { t as AlertDialog } from "./alert-dialog-1hxVC_5N.js";
+import { t as Badge } from "./badge-C3p1L0E7.js";
+import "./button/index.js";
+import { t as Checkbox } from "./checkbox-wh2BoiSj.js";
+import { t as Combobox } from "./combobox-DWH7uSsx.js";
+import { t as Icon } from "./icon-DBOdxNvH.js";
+import { t as CommandPalette } from "./command-palette-DF4XJ8qz.js";
+import { t as Cluster } from "./cluster-BJ4m5uGN.js";
+import { t as Dialog } from "./dialog-C4yqxII_.js";
+import { t as Drawer } from "./drawer-DQmz_uCP.js";
+import "./icon/index.js";
+import { n as Input, t as Field } from "./input-CQ_ean8e.js";
+import { a as Grid, c as Container, i as Imposter, l as Center, n as Sidebar, o as Frame, r as Reel, s as Cover, t as Switcher, u as Box } from "./layout-qoyutnKU.js";
+import { t as Menu } from "./menu-DRdGMI_-.js";
+import { t as Radio } from "./radio-BJrvdkga.js";
+import { t as Select } from "./select-BaqBHUac.js";
+import { t as ScrollArea } from "./scroll-area-DkORxJE9.js";
+import { t as Skeleton } from "./skeleton-W6fwO5pf.js";
+import { t as Spinner } from "./spinner-DB6ap8Si.js";
+import { t as Switch } from "./switch-DizP31iF.js";
+import { t as Popover } from "./popover-CenynT0Z.js";
+import { t as Tooltip } from "./tooltip-CQk2WjUS.js";
+export { AlertDialog, Badge, Box, Button, Center, Checkbox, Cluster, Combobox, CommandPalette, Container, Cover, Dialog, Drawer, Field, Frame, Grid, Icon, Imposter, Input, Menu, Popover, Radio, Reel, ScrollArea, Select, Sidebar, Skeleton, Spinner, Stack, Switch, Switcher, Tooltip };

package/dist/input/index.d.ts

@@ -0,0 +1,2 @@
+import { a as FieldRootProps, c as InputSize, i as FieldLabelProps, n as FieldDescriptionProps, o as Input, r as FieldErrorProps, s as InputProps, t as Field } from "../index-BXPUT5u-.js";
+export { Field, type FieldDescriptionProps, type FieldErrorProps, type FieldLabelProps, type FieldRootProps, Input, type InputProps, type InputSize };

package/dist/input/index.js

@@ -0,0 +1,2 @@
+import { n as Input, t as Field } from "../input-CQ_ean8e.js";
+export { Field, Input };