@zyncat/ui 0.10.0 → 0.12.0

package/dist/select.js

@@ -1,19 +1,20 @@
-'use client';import { useListbox, SelectTrigger, ListboxPanel } from './chunk-OMHQ4U4J.js';
-import './chunk-62P3KD57.js';
-import './chunk-RCONNA7I.js';
+'use client';import { useListbox, SelectTrigger, ListboxPanel } from './chunk-43M6GQ4Q.js';
+import './chunk-XNIYSAMJ.js';
+import './chunk-IUQAUBVM.js';
 import './chunk-UE63OOVG.js';
-import './chunk-WM5J5TDI.js';
-import './chunk-NEF5XAHG.js';
-import './chunk-356HZMT4.js';
-import './chunk-XWUWYSCT.js';
-import './chunk-YGCVWGUG.js';
-import './chunk-2ERBBFZS.js';
-import './chunk-3SBCBYB7.js';
+import './chunk-VAXCXZ53.js';
+import './chunk-JY6A2ZJZ.js';
+import './chunk-CNWTIMIP.js';
+import './chunk-DDRSMHN4.js';
+import './chunk-TUTXXC3W.js';
+import './chunk-M43IOM5C.js';
+import './chunk-IJS7TPGV.js';
+import './chunk-3MPF7FZV.js';
+import './chunk-EAI4POPB.js';
 import { useControllable } from './chunk-MMRIQNEN.js';
-import './chunk-S5ZTZANS.js';
-import './chunk-2F5PITAO.js';
-import './chunk-7SZCJ7WI.js';
-import './chunk-VTJTGVZZ.js';
+import './chunk-7IZJERGA.js';
+import './chunk-45R4Z5XN.js';
+import './chunk-DMX2F6B4.js';
 import { cx } from './chunk-QGNC7LH5.js';
 import './select.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -34,6 +35,7 @@ function Select({
   id,
   ariaLabel,
   htmlProps,
+  activateOn = "pointerdown",
   animation,
   triggerProps,
   showCheck = true
@@ -73,6 +75,7 @@ function Select({
             leading: leadingIcon || selected && selected.icon || null,
             text: loading ? "Loading..." : isPlaceholder ? placeholder : selected.label,
             isPlaceholder,
+            activateOn,
             ...triggerProps
           }
         ),
@@ -84,8 +87,8 @@ function Select({
             searchable,
             searchPlaceholder,
             ariaLabel,
+            activateOn,
             animation,
-            size,
             ...!showCheck && { check: () => null }
           }
         )

package/dist/select.js.map

@@ -1 +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"]}
+{"version":3,"sources":["../src/components/composites/select/Select.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAkEO,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,UAAA,GAAa,aAAA;AAAA,EACb,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,YACA,UAAA;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,UAAA;AAAA,YACA,SAAA;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';\n\nimport type { HTMLAttributes, ReactNode } from 'react';\n\nimport type { DataAttributes } from '../../../dom-props';\nimport type { DisableableAnimation } from '../../../motion/timing';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport type { ActivateOn } from '../../internal/utils/activation';\nimport { cx } from '../../internal/utils/cx';\nimport {\n  ListboxPanel,\n  SelectTrigger,\n  useListbox,\n  type SelectGroup,\n  type SelectOption,\n  type SelectTriggerHtmlProps,\n} from './core';\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  /** Whether the trigger and the options fire on `pointerdown` (snappier) or wait for `click`.\n   *  @default 'pointerdown' */\n  activateOn?: ActivateOn;\n  /** Menu open/close timing - motion tokens only, or `null` to disable. @default duration 'base' + ease 'entrance'/'exit' */\n  animation?: DisableableAnimation;\n  /** Standard <button> attributes (className, style, aria-*, data-*, ...) merged onto the trigger.\n   *  `onClick` and `onKeyDown` run before the built-in open/close and arrow-key handling, which\n   *  cannot be replaced - the trigger is the combobox. */\n  triggerProps?: SelectTriggerHtmlProps;\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  activateOn = 'pointerdown',\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        activateOn={activateOn}\n        {...triggerProps}\n      />\n      <ListboxPanel\n        lb={lb}\n        loading={loading}\n        searchable={searchable}\n        searchPlaceholder={searchPlaceholder}\n        ariaLabel={ariaLabel}\n        activateOn={activateOn}\n        animation={animation}\n        {...(!showCheck && { check: () => null })}\n      />\n    </div>\n  );\n}\n"]}

package/dist/sheet.css

@@ -1,26 +1,50 @@
-/* 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%;
-}
+@layer zyncat.tokens, zyncat.components;
 
-.overlay-layer--sheet-bottom {
-  align-items: end;
-  justify-items: stretch;
-}
-.overlay-panel--sheet-bottom {
-  width: 100%;
-  max-height: 100%;
-}
+@layer zyncat.components {
+  /* 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%;
+  }
 
-/* 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%;
+  .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%;
+  }
+
+  .overlay-panel--sheet-right[data-drag] {
+    touch-action: pan-y;
+  }
+  .overlay-panel--sheet-bottom[data-drag] {
+    touch-action: none;
+  }
+
+  .overlay-panel--sheet-right,
+  .overlay-panel--sheet-bottom {
+    background: var(--bg-surface);
+    color: var(--text-body);
+    box-shadow: var(--shadow-xl);
+  }
+  .overlay-panel--sheet-right {
+    border-inline-start: var(--border-hairline) solid var(--border-default);
+  }
+  .overlay-panel--sheet-bottom {
+    border-block-start: var(--border-hairline) solid var(--border-default);
+  }
 }

package/dist/sheet.js

@@ -1,14 +1,15 @@
-'use client';export { Sheet } from './chunk-UXONUUPI.js';
-import './chunk-K5X2GCXU.js';
-import './chunk-ZCOUPPTI.js';
-import './chunk-RCONNA7I.js';
-import './chunk-NEF5XAHG.js';
-import './chunk-356HZMT4.js';
-import './chunk-XWUWYSCT.js';
-import './chunk-YGCVWGUG.js';
+'use client';export { Sheet } from './chunk-227ZW4V7.js';
+import './chunk-FONOS5RN.js';
+import './chunk-A5WTZACK.js';
+import './chunk-VAXCXZ53.js';
+import './chunk-JY6A2ZJZ.js';
+import './chunk-DDRSMHN4.js';
+import './chunk-TUTXXC3W.js';
+import './chunk-M43IOM5C.js';
+import './chunk-IJS7TPGV.js';
 import './chunk-MMRIQNEN.js';
-import './chunk-S5ZTZANS.js';
-import './chunk-VTJTGVZZ.js';
+import './chunk-7IZJERGA.js';
+import './chunk-DMX2F6B4.js';
 import './chunk-QGNC7LH5.js';
 //# sourceMappingURL=sheet.js.map
 //# sourceMappingURL=sheet.js.map

package/dist/status-badge.js

@@ -1,6 +1,6 @@
-'use client';import { fireGlint } from './chunk-S7B34VGN.js';
-import { UIMotion } from './chunk-S5ZTZANS.js';
-import { Badge } from './chunk-PMECHR3A.js';
+'use client';import { fireGlint } from './chunk-OWNMRMPN.js';
+import { UIMotion } from './chunk-7IZJERGA.js';
+import { Badge } from './chunk-FQEHSKEI.js';
 import { cx } from './chunk-QGNC7LH5.js';
 import './badge.css';
 import { useRef, useState, useLayoutEffect, useEffect } from 'react';

package/dist/status-badge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/primitives/badge/StatusBadge.tsx"],"names":[],"mappings":"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","file":"status-badge.js","sourcesContent":["'use client';\n\nimport './badge.css';\nimport { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { Badge, type BadgeProps } from './Badge';\nimport { UIMotion } from '../../../tokens/motion-tokens';\nimport { fireGlint } from '../../internal/glass/glint';\nimport { cx } from '../../internal/utils/cx';\n\nconst SM = UIMotion;\n\nexport type PostStatus = 'draft' | 'scheduled' | 'processing' | 'published' | 'failed';\n\nexport const POST_STATUS: Record<PostStatus, { tone: BadgeProps['tone']; label: string; live?: boolean }> = {\n  draft: { tone: 'neutral', label: 'Draft' },\n  scheduled: { tone: 'info', label: 'Scheduled' },\n  processing: { tone: 'warning', label: 'Processing', live: true },\n  published: { tone: 'success', label: 'Published' },\n  failed: { tone: 'danger', label: 'Failed' },\n};\n\nconst TERMINAL: Partial<Record<PostStatus, boolean>> = { published: true, failed: true };\n\nexport interface StatusBadgeProps extends Omit<BadgeProps, 'children' | 'tone'> {\n  /** Lifecycle state - maps to a canonical `tone` + label (`processing` also pulses live). Unknown falls back to `draft`. */\n  status: PostStatus;\n  /** Morph in place as `status` changes instead of swapping. */\n  morph?: boolean;\n}\n\nexport function StatusBadge({ status, morph = false, ...rest }: StatusBadgeProps) {\n  if (!morph) {\n    const s = POST_STATUS[status] || POST_STATUS.draft;\n    return (\n      <Badge tone={s.tone} dot live={!!s.live} {...rest}>\n        {s.label}\n      </Badge>\n    );\n  }\n  return <StatusMorph status={status} {...rest} />;\n}\n\ninterface StatusMorphProps extends Omit<BadgeProps, 'children' | 'tone'> {\n  status: PostStatus;\n}\n\ninterface Word {\n  key: number;\n  label: string;\n  cls: string;\n}\n\nfunction StatusMorph({ status, className = '', ...rest }: StatusMorphProps) {\n  const s = POST_STATUS[status] || POST_STATUS.draft;\n\n  const prev = useRef(status);\n  const keyRef = useRef(1);\n  const labelRef = useRef<HTMLSpanElement>(null);\n  const ghostRef = useRef<HTMLSpanElement>(null);\n  const [words, setWords] = useState<Word[]>([{ key: 0, label: s.label, cls: '' }]);\n  const [boxW, setBoxW] = useState<number>();\n\n  useLayoutEffect(() => {\n    if (ghostRef.current) setBoxW(ghostRef.current.offsetWidth);\n  }, []);\n\n  useEffect(() => {\n    if (prev.current === status) return;\n    prev.current = status;\n    const next = POST_STATUS[status] || POST_STATUS.draft;\n    const nk = keyRef.current++;\n    const nextW = ghostRef.current?.offsetWidth;\n\n    setWords((ws) => ws.concat({ key: nk, label: next.label, cls: 'badge__word--in' }));\n    const raf = requestAnimationFrame(() =>\n      requestAnimationFrame(() => {\n        setWords((ws) => ws.map((w) => (w.key === nk ? { ...w, cls: '' } : { ...w, cls: 'badge__word--out' })));\n        if (nextW) setBoxW(nextW);\n      }),\n    );\n    const drop = setTimeout(\n      () => setWords((ws) => ws.filter((w) => !w.cls.includes('--out'))),\n      SM.dur.base * 1000 + 80,\n    );\n    let stopGlint: (() => void) | undefined;\n    if (TERMINAL[status] && labelRef.current) {\n      const chip = labelRef.current.closest('.badge') as HTMLElement | null;\n      if (chip) stopGlint = fireGlint(chip);\n    }\n    return () => {\n      cancelAnimationFrame(raf);\n      clearTimeout(drop);\n      stopGlint?.();\n    };\n  }, [status]);\n\n  return (\n    <Badge tone={s.tone} dot live={!!s.live} className={cx('badge--morph', className)} {...rest}>\n      <span className=\"badge__morph\" ref={labelRef} style={boxW ? { width: boxW } : undefined}>\n        <span className=\"badge__ghost\" ref={ghostRef} aria-hidden=\"true\">\n          {s.label}\n        </span>\n        {words.map((w) => (\n          <span key={w.key} className={cx('badge__word', w.cls)}>\n            {w.label}\n          </span>\n        ))}\n      </span>\n    </Badge>\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/primitives/badge/StatusBadge.tsx"],"names":[],"mappings":"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","file":"status-badge.js","sourcesContent":["'use client';\n\nimport './badge.css';\n\nimport { useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nimport { UIMotion } from '../../../tokens/motion-tokens';\nimport { fireGlint } from '../../internal/glass/glint';\nimport { cx } from '../../internal/utils/cx';\nimport { Badge, type BadgeProps } from './Badge';\n\nconst SM = UIMotion;\n\nexport type PostStatus = 'draft' | 'scheduled' | 'processing' | 'published' | 'failed';\n\nexport const POST_STATUS: Record<PostStatus, { tone: BadgeProps['tone']; label: string; live?: boolean }> = {\n  draft: { tone: 'neutral', label: 'Draft' },\n  scheduled: { tone: 'info', label: 'Scheduled' },\n  processing: { tone: 'warning', label: 'Processing', live: true },\n  published: { tone: 'success', label: 'Published' },\n  failed: { tone: 'danger', label: 'Failed' },\n};\n\nconst TERMINAL: Partial<Record<PostStatus, boolean>> = { published: true, failed: true };\n\nexport interface StatusBadgeProps extends Omit<BadgeProps, 'children' | 'tone'> {\n  /** Lifecycle state - maps to a canonical `tone` + label (`processing` also pulses live). Unknown falls back to `draft`. */\n  status: PostStatus;\n  /** Morph in place as `status` changes instead of swapping. */\n  morph?: boolean;\n}\n\nexport function StatusBadge({ status, morph = false, ...rest }: StatusBadgeProps) {\n  if (!morph) {\n    const s = POST_STATUS[status] || POST_STATUS.draft;\n    return (\n      <Badge tone={s.tone} dot live={!!s.live} {...rest}>\n        {s.label}\n      </Badge>\n    );\n  }\n  return <StatusMorph status={status} {...rest} />;\n}\n\ninterface StatusMorphProps extends Omit<BadgeProps, 'children' | 'tone'> {\n  status: PostStatus;\n}\n\ninterface Word {\n  key: number;\n  label: string;\n  cls: string;\n}\n\nfunction StatusMorph({ status, className = '', ...rest }: StatusMorphProps) {\n  const s = POST_STATUS[status] || POST_STATUS.draft;\n\n  const prev = useRef(status);\n  const keyRef = useRef(1);\n  const labelRef = useRef<HTMLSpanElement>(null);\n  const ghostRef = useRef<HTMLSpanElement>(null);\n  const [words, setWords] = useState<Word[]>([{ key: 0, label: s.label, cls: '' }]);\n  const [boxW, setBoxW] = useState<number>();\n\n  useLayoutEffect(() => {\n    if (ghostRef.current) setBoxW(ghostRef.current.offsetWidth);\n  }, []);\n\n  useEffect(() => {\n    if (prev.current === status) return;\n    prev.current = status;\n    const next = POST_STATUS[status] || POST_STATUS.draft;\n    const nk = keyRef.current++;\n    const nextW = ghostRef.current?.offsetWidth;\n\n    setWords((ws) => ws.concat({ key: nk, label: next.label, cls: 'badge__word--in' }));\n    const raf = requestAnimationFrame(() =>\n      requestAnimationFrame(() => {\n        setWords((ws) => ws.map((w) => (w.key === nk ? { ...w, cls: '' } : { ...w, cls: 'badge__word--out' })));\n        if (nextW) setBoxW(nextW);\n      }),\n    );\n    const drop = setTimeout(\n      () => setWords((ws) => ws.filter((w) => !w.cls.includes('--out'))),\n      SM.dur.base * 1000 + 80,\n    );\n    let stopGlint: (() => void) | undefined;\n    if (TERMINAL[status] && labelRef.current) {\n      const chip = labelRef.current.closest('.badge') as HTMLElement | null;\n      if (chip) stopGlint = fireGlint(chip);\n    }\n    return () => {\n      cancelAnimationFrame(raf);\n      clearTimeout(drop);\n      stopGlint?.();\n    };\n  }, [status]);\n\n  return (\n    <Badge tone={s.tone} dot live={!!s.live} className={cx('badge--morph', className)} {...rest}>\n      <span className=\"badge__morph\" ref={labelRef} style={boxW ? { width: boxW } : undefined}>\n        <span className=\"badge__ghost\" ref={ghostRef} aria-hidden=\"true\">\n          {s.label}\n        </span>\n        {words.map((w) => (\n          <span key={w.key} className={cx('badge__word', w.cls)}>\n            {w.label}\n          </span>\n        ))}\n      </span>\n    </Badge>\n  );\n}\n"]}

package/dist/styles.css

@@ -0,0 +1,221 @@
+@layer zyncat.tokens, zyncat.components;
+
+@layer zyncat.components {
+  .on-emoji,
+  .on-emoji *,
+  .on-emoji-body,
+  .on-emoji-body * {
+    box-sizing: border-box;
+  }
+
+  .on-emoji {
+    display: flex;
+    flex-direction: column;
+    width: var(--emoji-picker-width, 23.5rem);
+    height: var(--emoji-picker-height, 26.5rem);
+    background: var(--bg-surface-raised);
+    border: var(--border-hairline) solid var(--border-default);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-lg);
+    color: var(--text-body);
+    font-family: var(--font-sans);
+    font-size: var(--size-body);
+  }
+  .on-emoji-body {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  .on-emoji-search {
+    flex: none;
+    padding: var(--space-2) var(--space-2) var(--space-1);
+  }
+
+  .on-emoji-bar {
+    position: relative;
+    display: flex;
+    flex: none;
+    justify-content: space-between;
+    padding: var(--space-1) var(--space-2);
+    border-bottom: var(--border-hairline) solid var(--border-default);
+  }
+  .on-emoji-cat {
+    position: relative;
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--space-6);
+    height: var(--space-6);
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: var(--text-muted);
+    cursor: pointer;
+    transition: var(--transition-colors);
+  }
+  .on-emoji-cat:hover {
+    color: var(--text-body);
+  }
+  .on-emoji-cat--active {
+    color: var(--text-accent);
+  }
+  .on-emoji-cat > svg {
+    width: var(--icon-sm);
+    height: var(--icon-sm);
+  }
+  .on-emoji-cat-rail {
+    position: absolute;
+    inset-inline: 0;
+    bottom: calc(2px - var(--space-1));
+    width: var(--space-4);
+    height: 2px;
+    margin-inline: auto;
+    border-radius: var(--radius-full);
+    background: var(--accent);
+    pointer-events: none;
+  }
+  .on-emoji-bar-marker,
+  .on-emoji-marker {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
+  .on-emoji-bar-marker {
+    border-radius: var(--radius-sm);
+    background: var(--neutral-wash);
+    will-change: transform, opacity;
+  }
+
+  .on-emoji-scroll {
+    position: relative;
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    scrollbar-width: none;
+  }
+  .on-emoji-scroll::-webkit-scrollbar {
+    display: none;
+  }
+  .on-emoji-marker {
+    width: 0;
+    height: 0;
+    border-radius: var(--radius-md);
+    background: var(--neutral-wash-press);
+    will-change: transform, width, height, opacity;
+  }
+
+  .on-emoji-header {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    padding: var(--space-2) var(--space-3) var(--space-1);
+    background: var(--bg-surface-raised);
+    font: var(--type-micro);
+    letter-spacing: var(--tracking-caps);
+    text-transform: uppercase;
+    color: var(--text-subtle);
+  }
+  .on-emoji-grid {
+    display: grid;
+    grid-template-columns: repeat(var(--cols, 8), 1fr);
+    gap: var(--space-1);
+    padding: 0 var(--space-2) var(--space-1);
+    content-visibility: auto;
+    contain-intrinsic-height: auto calc(var(--rows, 1) * (var(--control-height-lg) + var(--space-1)) - var(--space-1));
+  }
+  .on-emoji-btn {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--control-height-lg);
+    padding: 0;
+    border: 0;
+    border-radius: var(--radius-md);
+    background: transparent;
+    cursor: pointer;
+    font-size: var(--size-title);
+    line-height: 1;
+    scroll-margin-top: var(--control-height);
+    scroll-margin-bottom: var(--space-2);
+  }
+  .on-emoji-btn-img {
+    display: block;
+    width: var(--icon-lg);
+    height: var(--icon-lg);
+    user-select: none;
+  }
+
+  @keyframes on-emoji-tile-in {
+    from {
+      opacity: 0;
+      transform: translateY(var(--distance-sm)) scale(var(--scale-chip));
+    }
+  }
+  .on-emoji-scroll .on-emoji-btn {
+    --emoji-picker-stagger-step: 10ms;
+    animation: on-emoji-tile-in var(--duration-base) var(--ease-entrance) both;
+    animation-delay: min(calc(var(--i, 0) * var(--emoji-picker-stagger-step)), var(--duration-slower));
+  }
+
+  .on-emoji-empty {
+    padding: var(--space-6) var(--space-4);
+    color: var(--text-muted);
+    font: var(--type-caption);
+    text-align: center;
+  }
+
+  .on-emoji-caption {
+    display: flex;
+    flex: none;
+    align-items: center;
+    gap: var(--space-2);
+    height: var(--control-height-lg);
+    padding: 0 var(--space-3);
+    border-top: var(--border-hairline) solid var(--border-default);
+  }
+  .on-emoji-caption-img {
+    flex: none;
+    width: var(--icon-md);
+    height: var(--icon-md);
+    user-select: none;
+  }
+  .on-emoji-caption-name {
+    overflow: hidden;
+    color: var(--text-body);
+    font: var(--type-caption);
+    font-weight: var(--weight-medium);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .on-emoji-caption-name::first-letter {
+    text-transform: uppercase;
+  }
+  .on-emoji-caption-code {
+    flex: none;
+    margin-left: auto;
+    color: var(--text-muted);
+    font: var(--type-mono);
+  }
+  .on-emoji-caption.is-idle .on-emoji-caption-name {
+    color: var(--text-subtle);
+    font-weight: var(--weight-regular);
+  }
+
+  .on-emoji--sheet {
+    width: 100%;
+    height: min(var(--emoji-picker-height, 26.5rem), 70svh);
+    border-right: 0;
+    border-bottom: 0;
+    border-left: 0;
+    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+}