@zyncat/ui 0.8.0

package/dist/select.css

@@ -0,0 +1,416 @@
+/* Select family - <Select> (single) + <MultiSelect>, one .select__* vocabulary (no native <select>). */
+
+.select {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  font-family: var(--font-sans);
+}
+
+.select__trigger {
+  appearance: none;
+  margin: 0;
+  font-family: inherit;
+  cursor: pointer;
+  text-align: left;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  width: 100%;
+  height: var(--control-height);
+  padding: 0 var(--space-3);
+  background: var(--bg-inset);
+  border: var(--border-hairline) solid var(--border-default);
+  border-radius: var(--radius-md);
+  color: var(--text-body);
+  font-size: var(--size-body);
+  line-height: var(--leading-body);
+  font-weight: var(--weight-regular);
+  transition:
+    color var(--duration-base) var(--ease-standard),
+    background-color var(--duration-base) var(--ease-standard),
+    border-color var(--duration-base) var(--ease-standard),
+    box-shadow var(--duration-base) var(--ease-standard);
+}
+.select__trigger:hover {
+  border-color: var(--border-strong);
+  background-color: var(--gray-wash-strong);
+}
+.select__trigger:focus-visible {
+  outline: none;
+  border-color: var(--accent);
+  background: var(--bg-surface);
+  box-shadow: var(--ring-accent);
+}
+.select[data-open='true'] .select__trigger {
+  border-color: var(--accent);
+  background: var(--bg-surface);
+  box-shadow: var(--ring-accent);
+}
+
+.select[data-size='sm'] .select__trigger {
+  height: var(--control-height-sm);
+  padding: 0 var(--space-2);
+  font-size: var(--size-caption);
+  line-height: var(--leading-caption);
+  gap: var(--space-1);
+}
+.select[data-size='lg'] .select__trigger {
+  height: var(--control-height-lg);
+  padding: 0 var(--space-4);
+}
+
+.select[data-invalid='true'] .select__trigger {
+  border-color: var(--danger);
+}
+.select[data-invalid='true'] .select__trigger:focus-visible,
+.select[data-invalid='true'][data-open='true'] .select__trigger {
+  border-color: var(--danger);
+  box-shadow: var(--ring-danger);
+}
+
+.select[data-disabled='true'] .select__trigger {
+  cursor: not-allowed;
+  background: var(--bg-muted);
+  border-color: var(--border-subtle);
+  color: var(--text-disabled);
+  box-shadow: none;
+}
+.select[data-disabled='true'] .select__value,
+.select[data-disabled='true'] .select__leading,
+.select[data-disabled='true'] .select__caret {
+  color: var(--text-disabled);
+}
+
+.select[data-loading='true'] .select__value {
+  color: var(--text-muted);
+}
+
+.select__leading {
+  display: inline-flex;
+  flex: 0 0 auto;
+  font-size: var(--icon-sm);
+  color: var(--text-muted);
+}
+.select__value {
+  flex: 1 1 auto;
+  min-width: 0;
+  color: var(--text-body);
+}
+.select__value[data-placeholder='true'] {
+  color: var(--text-disabled);
+}
+.select__caret {
+  display: inline-flex;
+  flex: 0 0 auto;
+  font-size: var(--icon-sm);
+  color: var(--text-subtle);
+  transition:
+    transform var(--duration-base) var(--ease-entrance),
+    color var(--duration-fast) var(--ease-standard);
+}
+.select[data-open='true'] .select__caret {
+  transform: rotate(180deg);
+  color: var(--text-muted);
+}
+.select__count {
+  flex: 0 0 auto;
+  font-family: var(--font-mono);
+  font-size: var(--size-micro);
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+  color: var(--text-accent);
+  background: var(--accent-wash);
+  padding: var(--space-px) var(--space-1);
+  border-radius: var(--radius-sm);
+}
+
+.select__value,
+.select__option-label,
+.select__option-desc {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Menu enter/exit are Motion-owned inline styles (selectMenuVariants); this sheet only sets the look + transform-origin. */
+.select__menu {
+  position: fixed;
+  margin: 0;
+  inset: auto; /* JS sets top/left/min-width - anchor() needs the top layer, which we don't use */
+  z-index: var(
+    --layer-overlay
+  ); /* base of the overlay band (tokens/layers.css) - plain React-owned node, not the top layer */
+  width: max-content;
+  max-width: min(22rem, 92vw);
+  background: var(--bg-surface-raised);
+  border: var(--border-hairline) solid var(--border-default);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  padding: var(--space-1);
+  transform-origin: top left;
+}
+/* flipped above the trigger (data-side from useAnchorPosition) - scale from the anchored edge */
+.select__menu[data-side='top'] {
+  transform-origin: bottom left;
+}
+
+.select__search {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2);
+  margin: 0 0 var(--space-1);
+  border-bottom: var(--border-hairline) solid var(--border-subtle);
+  font-size: var(--icon-sm);
+  color: var(--text-subtle);
+}
+.select__search-input {
+  appearance: none;
+  border: none;
+  outline: none;
+  background: transparent;
+  width: 100%;
+  padding: 0;
+  font-family: var(--font-sans);
+  font-size: var(--size-body);
+  line-height: var(--leading-body);
+  color: var(--text-body);
+}
+.select__search-input::placeholder {
+  color: var(--text-disabled);
+}
+
+/* Row-height motion is the Collapse primitive, not this scroll container.
+   position: relative anchors the glide pill (a single absolute child) to the scrolled content. */
+.select__list {
+  position: relative;
+  max-height: 16.5rem;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scroll-behavior: smooth;
+  scrollbar-width: none;
+}
+.select__list::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  display: none;
+}
+
+.select__group-label {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--bg-surface-raised);
+  padding: var(--space-2) var(--space-2) var(--space-1);
+  font: var(--type-micro);
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-caps);
+  color: var(--text-subtle);
+}
+.select__group + .select__group .select__group-label {
+  border-top: var(--border-hairline) solid var(--border-subtle);
+  margin-top: var(--space-1);
+}
+
+.select__option {
+  padding: var(--option-padding);
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  color: var(--text-body);
+  user-select: none;
+  transition:
+    background-color var(--duration-base) var(--ease-standard),
+    color var(--duration-base) var(--ease-standard);
+}
+
+.select__option[data-size='sm'] {
+  --option-padding: var(--space-1);
+}
+
+.select__option[data-size='md'] {
+  --option-padding: var(--space-2);
+}
+
+.select__option[data-size='lg'] {
+  --option-padding: var(--space-4);
+}
+
+.select__option-icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  font-size: var(--icon-sm);
+  color: var(--text-muted);
+}
+.select__option-text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-px);
+  min-width: 0;
+  flex: 1 1 auto;
+}
+.select__option-label {
+  font-size: var(--size-body);
+  line-height: var(--leading-body);
+}
+.select__option-desc {
+  font: var(--type-caption);
+  color: var(--text-subtle);
+}
+.select__option-check {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  min-width: var(--icon-sm);
+  font-size: var(--icon-sm);
+  color: var(--accent);
+  opacity: 0;
+  transition: var(--transition-opacity);
+}
+
+/* Hover pill - one persistent fill in the list (../motion/glide) that travels to the active row and
+   animates its real size, so it's never clipped by the searchable rows' collapse and never scales.
+   GlidePill sets x/y/width/height inline; the option (position: relative) paints above it. */
+.select__glide {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 0;
+  border-radius: var(--radius-md);
+  background: var(--neutral-wash);
+  pointer-events: none;
+}
+
+/* Active row: the pill carries the fill; here we only lift the text. Selected rules follow, so source order wins. */
+.select__option[data-active='true'] {
+  color: var(--text-strong);
+}
+.select__option[data-active='true'] .select__option-icon {
+  color: var(--text-body);
+}
+.select__option[data-selected='true'] {
+  background-color: var(--accent-wash);
+}
+.select__option[data-selected='true'] .select__option-label {
+  color: var(--text-accent);
+  font-weight: var(--weight-medium);
+}
+.select__option[data-selected='true'] .select__option-icon {
+  color: var(--text-accent);
+}
+.select__option[data-selected='true'] .select__option-check {
+  opacity: 1;
+}
+.select__option[data-disabled='true'] {
+  cursor: not-allowed;
+  color: var(--text-disabled);
+}
+.select__option[data-disabled='true'] .select__option-icon {
+  color: var(--text-disabled);
+}
+
+/* check lands with a spring when a row becomes selected (remounts via React key) */
+.select__option[data-selected='true'] .select__option-check :is(i, svg) {
+  animation: select-check-in var(--duration-base) var(--ease-spring);
+}
+@keyframes select-check-in {
+  from {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* Multi-select: the reused Checkbox box IS the indicator - no row fill (avoid double-encoding); strip the .cbx standalone chrome. */
+.select__menu[data-multiple='true'] .select__option-check {
+  opacity: 1;
+}
+.select__menu[data-multiple='true'] .select__option .cbx {
+  padding: 0;
+  gap: 0;
+  pointer-events: none;
+}
+.select__menu[data-multiple='true'] .select__option .cbx__box {
+  margin-top: 0;
+}
+
+/* Row owns the press (.cbx is pointer-events:none): dip the box on press - explicit transform,
+   so a checked box (whose resting scale would otherwise dilute --press) still scales from center. */
+.select__menu[data-multiple='true'] .select__option:active:not([data-disabled='true']) .cbx__box {
+  transform: scale(0.86);
+}
+.select__menu[data-multiple='true'] .select__option[data-selected='true'] {
+  background-color: transparent;
+}
+
+.select__empty {
+  padding: var(--space-4) var(--space-3);
+  text-align: center;
+  font: var(--type-caption);
+  color: var(--text-subtle);
+}
+
+.select__loading {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  padding: var(--space-1);
+}
+.select__skeleton {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2);
+}
+.select__skeleton-dot {
+  width: var(--icon-sm);
+  height: var(--icon-sm);
+  border-radius: var(--radius-full);
+  background: var(--bg-muted);
+  flex: 0 0 auto;
+}
+.select__skeleton-bar {
+  height: 0.5rem;
+  border-radius: var(--radius-full);
+  background: var(--bg-muted);
+  flex: 1 1 auto;
+  max-width: 11rem;
+}
+.select__skeleton:nth-child(2) .select__skeleton-bar {
+  max-width: 7rem;
+}
+.select__skeleton:nth-child(3) .select__skeleton-bar {
+  max-width: 9rem;
+}
+.select__loading [data-pulse] {
+  animation: select-pulse var(--duration-spin) var(--ease-standard) infinite alternate;
+}
+@keyframes select-pulse {
+  from {
+    opacity: 0.55;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .select__list {
+    scroll-behavior: auto;
+  }
+  .select__option-check :is(i, svg),
+  .select__loading [data-pulse] {
+    animation: none;
+  }
+  .select__loading [data-pulse] {
+    opacity: 0.7;
+  }
+}

package/dist/select.d.ts

@@ -0,0 +1,49 @@
+import * as react from 'react';
+import { ReactNode, HTMLAttributes } from 'react';
+import { S as SelectOption, a as SelectGroup } from './types-SGMShK7R.js';
+import { ButtonProps } from './button.js';
+import { D as DisableableAnimation } from './timing-7JA_zQHP.js';
+import { D as DataAttributes } from './dom-props-C0jrllBw.js';
+import './motion-scale-Canq4stZ.js';
+
+interface SelectProps {
+    /** The choices - a flat `SelectOption[]`, or `SelectGroup[]` to render labeled sections. @default [] */
+    options: SelectOption[] | SelectGroup[];
+    /** Controlled value - matches an option's `value`, or `null` for none. Omit for uncontrolled (use `defaultValue`). */
+    value?: string | null;
+    /** Initial value when uncontrolled. @default null */
+    defaultValue?: string | null;
+    /** Fires on commit - gets the new `value` and its full `SelectOption`. Committing closes the menu. */
+    onChange?: (value: string, option: SelectOption) => void;
+    /** Trigger text when nothing is selected. @default 'Select an option' */
+    placeholder?: string;
+    /** Control height. @default 'md' */
+    size?: 'sm' | 'md' | 'lg';
+    /** Disabled - trigger is inert and the menu cannot open. @default false */
+    disabled?: boolean;
+    /** Danger ring + border. @default false */
+    invalid?: boolean;
+    /** Skeleton rows in the menu; trigger reads "Loading...". @default false */
+    loading?: boolean;
+    /** Type-to-filter field pinned above the list. @default false */
+    searchable?: boolean;
+    /** Placeholder for the `searchable` filter input. @default 'Filter options' */
+    searchPlaceholder?: string;
+    /** Your own icon node pinned before the trigger label; else the selected option's icon. */
+    leadingIcon?: ReactNode;
+    /** Base id for the trigger/menu/list ids and a11y wiring; auto-generated if omitted. */
+    id?: string;
+    /** Accessible name for the trigger and listbox - supply when there is no visible label. */
+    ariaLabel?: string;
+    /** Standard <div> attributes (className, style, data-*, ...) forwarded to the select root. */
+    htmlProps?: HTMLAttributes<HTMLDivElement> & DataAttributes;
+    /** Menu open/close timing - motion tokens only, or `null` to disable. @default duration 'base' + ease 'entrance'/'exit' */
+    animation?: DisableableAnimation;
+    /** Trigger props */
+    triggerProps?: ButtonProps;
+    /** Show check icon on selected value */
+    showCheck?: boolean;
+}
+declare function Select({ options, value: controlledValue, defaultValue, onChange, placeholder, size, disabled, invalid, loading, searchable, searchPlaceholder, leadingIcon, id, ariaLabel, htmlProps, animation, triggerProps, showCheck, }: SelectProps): react.JSX.Element;
+
+export { Select, SelectGroup, SelectOption, type SelectProps };

package/dist/select.js

@@ -0,0 +1,99 @@
+'use client';import { useListbox, SelectTrigger, ListboxPanel } from './chunk-QMSJZCK3.js';
+import './chunk-EQ32F2QJ.js';
+import './chunk-GY7JOPUQ.js';
+import './chunk-UE63OOVG.js';
+import './chunk-MKIQFK7S.js';
+import './chunk-NEF5XAHG.js';
+import './chunk-MXOPCFWR.js';
+import './chunk-W3SHPKSB.js';
+import './chunk-L3Q3VDIW.js';
+import './chunk-2ERBBFZS.js';
+import './chunk-3SBCBYB7.js';
+import { useControllable } from './chunk-MMRIQNEN.js';
+import './chunk-S5ZTZANS.js';
+import './chunk-U5QQZC3U.js';
+import './chunk-7SZCJ7WI.js';
+import './chunk-VTJTGVZZ.js';
+import { cx } from './chunk-QGNC7LH5.js';
+import './select.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function Select({
+  options = [],
+  value: controlledValue,
+  defaultValue = null,
+  onChange,
+  placeholder = "Select an option",
+  size = "md",
+  disabled = false,
+  invalid = false,
+  loading = false,
+  searchable = false,
+  searchPlaceholder = "Filter options",
+  leadingIcon = null,
+  id,
+  ariaLabel,
+  htmlProps,
+  animation,
+  triggerProps,
+  showCheck = true
+}) {
+  const [value, setValue] = useControllable(controlledValue, defaultValue, onChange);
+  const lb = useListbox({
+    options,
+    disabled,
+    loading,
+    searchable,
+    id,
+    idPrefix: "select-",
+    isSelected: (v) => v === value && value != null,
+    onCommit: (opt) => setValue(opt.value, opt),
+    closeOnCommit: true
+  });
+  const selected = lb.flat.find((o) => o.value === value) || null;
+  const isPlaceholder = !loading && !selected;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...htmlProps,
+      className: cx("select", htmlProps?.className),
+      "data-size": size,
+      "data-open": lb.open ? "true" : void 0,
+      "data-disabled": disabled ? "true" : void 0,
+      "data-invalid": invalid ? "true" : void 0,
+      "data-loading": loading ? "true" : void 0,
+      children: [
+        /* @__PURE__ */ jsx(
+          SelectTrigger,
+          {
+            lb,
+            disabled,
+            invalid,
+            ariaLabel,
+            leading: leadingIcon || selected && selected.icon || null,
+            text: loading ? "Loading..." : isPlaceholder ? placeholder : selected.label,
+            isPlaceholder,
+            ...triggerProps
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ListboxPanel,
+          {
+            lb,
+            loading,
+            searchable,
+            searchPlaceholder,
+            ariaLabel,
+            animation,
+            size,
+            ...!showCheck && { check: () => null }
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { Select };
+//# sourceMappingURL=select.js.map
+//# sourceMappingURL=select.js.map

package/dist/select.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/composites/select/Select.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAoDO,SAAS,MAAA,CAAO;AAAA,EACrB,UAAU,EAAC;AAAA,EACX,KAAA,EAAO,eAAA;AAAA,EACP,YAAA,GAAe,IAAA;AAAA,EACf,QAAA;AAAA,EACA,WAAA,GAAc,kBAAA;AAAA,EACd,IAAA,GAAO,IAAA;AAAA,EACP,QAAA,GAAW,KAAA;AAAA,EACX,OAAA,GAAU,KAAA;AAAA,EACV,OAAA,GAAU,KAAA;AAAA,EACV,UAAA,GAAa,KAAA;AAAA,EACb,iBAAA,GAAoB,gBAAA;AAAA,EACpB,WAAA,GAAc,IAAA;AAAA,EACd,EAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,SAAA,GAAY;AACd,CAAA,EAAgB;AACd,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,IAAI,eAAA,CAA6C,eAAA,EAAiB,cAAc,QAAQ,CAAA;AAE9G,EAAA,MAAM,KAAK,UAAA,CAAW;AAAA,IACpB,OAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,UAAA;AAAA,IACA,EAAA;AAAA,IACA,QAAA,EAAU,SAAA;AAAA,IACV,UAAA,EAAY,CAAC,CAAA,KAAM,CAAA,KAAM,SAAS,KAAA,IAAS,IAAA;AAAA,IAC3C,UAAU,CAAC,GAAA,KAAQ,QAAA,CAAS,GAAA,CAAI,OAAO,GAAG,CAAA;AAAA,IAC1C,aAAA,EAAe;AAAA,GAChB,CAAA;AAED,EAAA,MAAM,QAAA,GAAW,GAAG,IAAA,CAAK,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,KAAA,KAAU,KAAK,CAAA,IAAK,IAAA;AAC3D,EAAA,MAAM,aAAA,GAAgB,CAAC,OAAA,IAAW,CAAC,QAAA;AAEnC,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,SAAA,EAAW,EAAA,CAAG,QAAA,EAAU,SAAA,EAAW,SAAS,CAAA;AAAA,MAC5C,WAAA,EAAW,IAAA;AAAA,MACX,WAAA,EAAW,EAAA,CAAG,IAAA,GAAO,MAAA,GAAS,MAAA;AAAA,MAC9B,eAAA,EAAe,WAAW,MAAA,GAAS,MAAA;AAAA,MACnC,cAAA,EAAc,UAAU,MAAA,GAAS,MAAA;AAAA,MACjC,cAAA,EAAc,UAAU,MAAA,GAAS,MAAA;AAAA,MAEjC,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,aAAA;AAAA,UAAA;AAAA,YACC,EAAA;AAAA,YACA,QAAA;AAAA,YACA,OAAA;AAAA,YACA,SAAA;AAAA,YACA,OAAA,EAAS,WAAA,IAAgB,QAAA,IAAY,QAAA,CAAS,IAAA,IAAS,IAAA;AAAA,YACvD,IAAA,EAAM,OAAA,GAAU,YAAA,GAAe,aAAA,GAAgB,cAAc,QAAA,CAAS,KAAA;AAAA,YACtE,aAAA;AAAA,YACC,GAAG;AAAA;AAAA,SACN;AAAA,wBACA,GAAA;AAAA,UAAC,YAAA;AAAA,UAAA;AAAA,YACC,EAAA;AAAA,YACA,OAAA;AAAA,YACA,UAAA;AAAA,YACA,iBAAA;AAAA,YACA,SAAA;AAAA,YACA,SAAA;AAAA,YACA,IAAA;AAAA,YACC,GAAI,CAAC,SAAA,IAAa,EAAE,KAAA,EAAO,MAAM,IAAA;AAAK;AAAA;AACzC;AAAA;AAAA,GACF;AAEJ","file":"select.js","sourcesContent":["'use client';\n\nimport './select.css';\nimport type { HTMLAttributes, ReactNode } from 'react';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { useListbox, ListboxPanel, SelectTrigger, type SelectOption, type SelectGroup } from './core';\nimport type { DisableableAnimation } from '../../../motion/timing';\nimport type { DataAttributes } from '../../../dom-props';\nimport { ButtonProps } from '../../primitives/button/Button';\nimport { cx } from '../../internal/utils/cx';\n\nexport type { SelectOption, SelectGroup } from './core';\n\nexport interface SelectProps {\n  /** The choices - a flat `SelectOption[]`, or `SelectGroup[]` to render labeled sections. @default [] */\n  options: SelectOption[] | SelectGroup[];\n  /** Controlled value - matches an option's `value`, or `null` for none. Omit for uncontrolled (use `defaultValue`). */\n  value?: string | null;\n  /** Initial value when uncontrolled. @default null */\n  defaultValue?: string | null;\n  /** Fires on commit - gets the new `value` and its full `SelectOption`. Committing closes the menu. */\n  onChange?: (value: string, option: SelectOption) => void;\n  /** Trigger text when nothing is selected. @default 'Select an option' */\n  placeholder?: string;\n  /** Control height. @default 'md' */\n  size?: 'sm' | 'md' | 'lg';\n  /** Disabled - trigger is inert and the menu cannot open. @default false */\n  disabled?: boolean;\n  /** Danger ring + border. @default false */\n  invalid?: boolean;\n  /** Skeleton rows in the menu; trigger reads \"Loading...\". @default false */\n  loading?: boolean;\n  /** Type-to-filter field pinned above the list. @default false */\n  searchable?: boolean;\n  /** Placeholder for the `searchable` filter input. @default 'Filter options' */\n  searchPlaceholder?: string;\n  /** Your own icon node pinned before the trigger label; else the selected option's icon. */\n  leadingIcon?: ReactNode;\n  /** Base id for the trigger/menu/list ids and a11y wiring; auto-generated if omitted. */\n  id?: string;\n  /** Accessible name for the trigger and listbox - supply when there is no visible label. */\n  ariaLabel?: string;\n  /** Standard <div> attributes (className, style, data-*, ...) forwarded to the select root. */\n  htmlProps?: HTMLAttributes<HTMLDivElement> & DataAttributes;\n  /** Menu open/close timing - motion tokens only, or `null` to disable. @default duration 'base' + ease 'entrance'/'exit' */\n  animation?: DisableableAnimation;\n  /** Trigger props */\n  triggerProps?: ButtonProps;\n  /** Show check icon on selected value */\n  showCheck?: boolean;\n}\n\nexport function Select({\n  options = [],\n  value: controlledValue,\n  defaultValue = null,\n  onChange,\n  placeholder = 'Select an option',\n  size = 'md',\n  disabled = false,\n  invalid = false,\n  loading = false,\n  searchable = false,\n  searchPlaceholder = 'Filter options',\n  leadingIcon = null,\n  id,\n  ariaLabel,\n  htmlProps,\n  animation,\n  triggerProps,\n  showCheck = true,\n}: SelectProps) {\n  const [value, setValue] = useControllable<string | null, SelectOption>(controlledValue, defaultValue, onChange);\n\n  const lb = useListbox({\n    options,\n    disabled,\n    loading,\n    searchable,\n    id,\n    idPrefix: 'select-',\n    isSelected: (v) => v === value && value != null,\n    onCommit: (opt) => setValue(opt.value, opt),\n    closeOnCommit: true,\n  });\n\n  const selected = lb.flat.find((o) => o.value === value) || null;\n  const isPlaceholder = !loading && !selected;\n\n  return (\n    <div\n      {...htmlProps}\n      className={cx('select', htmlProps?.className)}\n      data-size={size}\n      data-open={lb.open ? 'true' : undefined}\n      data-disabled={disabled ? 'true' : undefined}\n      data-invalid={invalid ? 'true' : undefined}\n      data-loading={loading ? 'true' : undefined}\n    >\n      <SelectTrigger\n        lb={lb}\n        disabled={disabled}\n        invalid={invalid}\n        ariaLabel={ariaLabel}\n        leading={leadingIcon || (selected && selected.icon) || null}\n        text={loading ? 'Loading...' : isPlaceholder ? placeholder : selected.label}\n        isPlaceholder={isPlaceholder}\n        {...triggerProps}\n      />\n      <ListboxPanel\n        lb={lb}\n        loading={loading}\n        searchable={searchable}\n        searchPlaceholder={searchPlaceholder}\n        ariaLabel={ariaLabel}\n        animation={animation}\n        size={size}\n        {...(!showCheck && { check: () => null })}\n      />\n    </div>\n  );\n}\n"]}

package/dist/sheet.css

@@ -0,0 +1,26 @@
+/* sheet.css - edge-docked placement on the modal shell: sheets dock flush (no layer padding); the panel spans the docked edge. */
+.overlay-layer--sheet-right {
+  align-items: stretch;
+  justify-items: end;
+}
+.overlay-panel--sheet-right {
+  height: 100%;
+  max-width: 100%;
+}
+
+.overlay-layer--sheet-bottom {
+  align-items: end;
+  justify-items: stretch;
+}
+.overlay-panel--sheet-bottom {
+  width: 100%;
+  max-height: 100%;
+}
+
+/* Drag stretch scales the panel away from the edge it is docked to. */
+.overlay-panel--sheet-right {
+  transform-origin: 100% 50%;
+}
+.overlay-panel--sheet-bottom {
+  transform-origin: 50% 100%;
+}

package/dist/sheet.d.ts

@@ -0,0 +1,31 @@
+import * as react from 'react';
+import { ReactElement, HTMLAttributes, ReactNode } from 'react';
+import { D as DisableableAnimation } from './timing-7JA_zQHP.js';
+import { D as DataAttributes } from './dom-props-C0jrllBw.js';
+import './motion-scale-Canq4stZ.js';
+
+interface SheetProps {
+    /** Controlled open state. Omit to stay uncontrolled. */
+    open?: boolean;
+    /** Initial state when uncontrolled. Default false. */
+    defaultOpen?: boolean;
+    /** Fires whenever the open state changes. Pair with `open` for controlled use. */
+    onOpenChange?: (open: boolean) => void;
+    /** Cloned to open the sheet on click. */
+    trigger?: ReactElement | null;
+    /** Edge the sheet slides in from. Default 'right'. */
+    side?: 'right' | 'bottom';
+    /** Scrim/Esc dismissal + drag-to-edge. Default true. */
+    dismissible?: boolean;
+    /** Base id for the panel; drives the trigger's `aria-controls`. Auto-generated when omitted. */
+    id?: string;
+    /** Standard attributes (className, style, data-*, ...) forwarded to the sheet panel. */
+    htmlProps?: HTMLAttributes<HTMLDivElement> & DataAttributes;
+    /** Open/close timing - motion tokens only, or `null` to disable. @default open 'slow'/'entrance', close 'base'/'exit' */
+    animation?: DisableableAnimation;
+    /** The ENTIRE surface - paint AND semantics. Drive dismissal with `open`/`onOpenChange`. */
+    children: ReactNode;
+}
+declare function Sheet({ open: controlledOpen, defaultOpen, onOpenChange, trigger, side, dismissible, id, htmlProps, animation, children, }: SheetProps): react.JSX.Element;
+
+export { Sheet, type SheetProps };

package/dist/sheet.js

@@ -0,0 +1,14 @@
+'use client';export { Sheet } from './chunk-XZAEIQDR.js';
+import './chunk-4R2GQO43.js';
+import './chunk-LDC3RIYA.js';
+import './chunk-GY7JOPUQ.js';
+import './chunk-NEF5XAHG.js';
+import './chunk-MXOPCFWR.js';
+import './chunk-W3SHPKSB.js';
+import './chunk-L3Q3VDIW.js';
+import './chunk-MMRIQNEN.js';
+import './chunk-S5ZTZANS.js';
+import './chunk-VTJTGVZZ.js';
+import './chunk-QGNC7LH5.js';
+//# sourceMappingURL=sheet.js.map
+//# sourceMappingURL=sheet.js.map

package/dist/sheet.js.map

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

package/dist/status-badge.d.ts

@@ -0,0 +1,19 @@
+import * as react from 'react';
+import { BadgeProps } from './badge.js';
+import './dom-props-C0jrllBw.js';
+
+type PostStatus = 'draft' | 'scheduled' | 'processing' | 'published' | 'failed';
+declare const POST_STATUS: Record<PostStatus, {
+    tone: BadgeProps['tone'];
+    label: string;
+    live?: boolean;
+}>;
+interface StatusBadgeProps extends Omit<BadgeProps, 'children' | 'tone'> {
+    /** Lifecycle state - maps to a canonical `tone` + label (`processing` also pulses live). Unknown falls back to `draft`. */
+    status: PostStatus;
+    /** Morph in place as `status` changes instead of swapping. */
+    morph?: boolean;
+}
+declare function StatusBadge({ status, morph, ...rest }: StatusBadgeProps): react.JSX.Element;
+
+export { POST_STATUS, type PostStatus, StatusBadge, type StatusBadgeProps };