@zyncat/ui 0.11.0 → 0.12.0

package/dist/tag.js

@@ -1,11 +1,12 @@
-'use client';import { resolveMotionTiming } from './chunk-NEF5XAHG.js';
-import { Presence } from './chunk-NGTA34V2.js';
-import { Motion } from './chunk-2QWJ6FAX.js';
-import './chunk-XWUWYSCT.js';
-import './chunk-YGCVWGUG.js';
-import { IconSlot } from './chunk-2ERBBFZS.js';
-import './chunk-S5ZTZANS.js';
-import './chunk-VTJTGVZZ.js';
+'use client';import { popOut, popIn } from './chunk-HDSFWZ7L.js';
+import { Presence } from './chunk-DDRSMHN4.js';
+import { resolveMotionTiming } from './chunk-TUTXXC3W.js';
+import { Motion } from './chunk-5PZ43DCG.js';
+import './chunk-M43IOM5C.js';
+import './chunk-IJS7TPGV.js';
+import { IconSlot } from './chunk-3MPF7FZV.js';
+import { UIMotion } from './chunk-7IZJERGA.js';
+import './chunk-DMX2F6B4.js';
 import { cx } from './chunk-QGNC7LH5.js';
 import './tag.css';
 import { createContext, useContext } from 'react';
@@ -60,8 +61,8 @@ function TagGroup({ ariaLabel, className = "", style, children, htmlProps, anima
   const step = resolveMotionTiming(animation, TAG_TIMING);
   const layout = resolveMotionTiming(animation, TAG_LAYOUT_TIMING).open;
   const motion = {
-    animate: { opacity: [0, 1], scale: [0.9, 1], timing: step.open },
-    exit: { opacity: [1, 0], scale: [1, 0.9], timing: step.close },
+    animate: popIn(UIMotion.scale.chip, step.open),
+    exit: popOut(UIMotion.scale.chip, step.close),
     layout: { timing: layout }
   };
   return /* @__PURE__ */ jsx("div", { className: cx("tag-group", className), style, role: "group", "aria-label": ariaLabel, ...htmlProps, children: /* @__PURE__ */ jsx(TagGroupContext.Provider, { value: motion, children: /* @__PURE__ */ jsx(Presence, { initial: false, children }) }) });

package/dist/tag.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/primitives/tag/Tag.tsx"],"names":[],"mappings":"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","file":"tag.js","sourcesContent":["'use client';\n\nimport './tag.css';\nimport { createContext, useContext, type CSSProperties, type HTMLAttributes, type ReactNode, type Ref } from 'react';\nimport { Presence } from '../../../motion/presence';\nimport { Motion } from '../../../motion/element';\nimport { resolveMotionTiming } from '../../../motion/motion-timing';\nimport type { DisableableAnimation } from '../../../motion/timing';\nimport type { FlipTuning } from '../../../motion/flip';\nimport type { Layer } from '../../../engine';\nimport { IconSlot } from '../../internal/icon/IconSlot';\nimport type { DataAttributes } from '../../../dom-props';\nimport { cx } from '../../internal/utils/cx';\n\nconst TAG_TIMING = { open: { duration: 'base', ease: 'entrance' }, close: { duration: 'fast', ease: 'exit' } } as const;\nconst TAG_LAYOUT_TIMING = {\n  open: { duration: 'slow', ease: 'entrance' },\n  close: { duration: 'slow', ease: 'entrance' },\n} as const;\n\ninterface TagGroupMotion {\n  animate: Layer;\n  exit: Layer;\n  layout: FlipTuning;\n}\n\nconst TagGroupContext = createContext<TagGroupMotion | null>(null);\n\ninterface TagOwnProps {\n  /** Tag content; a string label also seeds the default remove-button `aria-label`. */\n  children: ReactNode;\n  /** Your own icon node, sized small and tinted to the tag's text. */\n  icon?: ReactNode | null;\n  /** Presence adds the remove button; called on click - remove the item yourself. */\n  onRemove?: (() => void) | null;\n  /** Accessible label for the remove button. Defaults to \"Remove {label}\" for string labels. */\n  removeLabel?: string;\n  /** 'md' = 28px (default) - 'sm' = 24px for dense rows. */\n  size?: 'md' | 'sm';\n  /** Set `data-disabled` on the tag and disable its remove button. @default false */\n  disabled?: boolean;\n  /** Extra class(es) merged onto the root element. */\n  className?: string;\n  /** Inline styles merged onto the root element. */\n  style?: CSSProperties;\n}\n\n/** Tag - the removable, editable label (stateless; the parent owns the list). */\nexport interface TagProps extends TagOwnProps {\n  /** Standard <span> attributes forwarded to the tag root. */\n  htmlProps?: Omit<HTMLAttributes<HTMLSpanElement>, keyof TagOwnProps> & DataAttributes;\n  /** Ref to the tag root span. */\n  ref?: Ref<HTMLSpanElement>;\n}\n\ninterface TagGroupOwnProps {\n  /** Accessible name for the group (role=\"group\"). */\n  ariaLabel?: string;\n  /** The `Tag`s; adds, removals and reflow are animated. */\n  children?: ReactNode;\n  /** Extra class(es) merged onto the group wrapper. */\n  className?: string;\n  /** Inline styles merged onto the group wrapper. */\n  style?: CSSProperties;\n  /** Add/remove/reflow timing for the member tags - motion tokens only, or `null` to disable. */\n  animation?: DisableableAnimation;\n}\n\n/** TagGroup - wrapping flex row + removal/insertion choreography. */\nexport interface TagGroupProps extends TagGroupOwnProps {\n  /** Standard <div> attributes forwarded to the group wrapper. */\n  htmlProps?: Omit<HTMLAttributes<HTMLDivElement>, keyof TagGroupOwnProps> & DataAttributes;\n}\n\nfunction TagRemoveGlyph() {\n  return (\n    <svg viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M3 3 L9 9 M9 3 L3 9\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n    </svg>\n  );\n}\n\nexport function Tag({\n  children,\n  icon = null,\n  onRemove = null,\n  removeLabel,\n  size = 'md',\n  disabled = false,\n  className = '',\n  style,\n  htmlProps,\n  ref,\n}: TagProps) {\n  const cls = cx('tag', size === 'sm' && 'tag--sm', className);\n  const xLabel = removeLabel || (typeof children === 'string' ? 'Remove ' + children : 'Remove');\n  const group = useContext(TagGroupContext);\n\n  return (\n    <Motion\n      as=\"span\"\n      ref={ref}\n      animate={group?.animate}\n      exit={group?.exit}\n      layout={!!group}\n      layoutTransition={group?.layout}\n      className={cls}\n      style={style}\n      data-disabled={disabled ? 'true' : undefined}\n      {...htmlProps}\n    >\n      {icon && (\n        <span className=\"tag__icon\">\n          <IconSlot size=\"sm\">{icon}</IconSlot>\n        </span>\n      )}\n      <span className=\"tag__label\">{children}</span>\n      {onRemove && (\n        <button type=\"button\" className=\"tag__remove\" aria-label={xLabel} disabled={disabled} onClick={onRemove}>\n          <TagRemoveGlyph />\n        </button>\n      )}\n    </Motion>\n  );\n}\n\nexport function TagGroup({ ariaLabel, className = '', style, children, htmlProps, animation }: TagGroupProps) {\n  const step = resolveMotionTiming(animation, TAG_TIMING);\n  const layout = resolveMotionTiming(animation, TAG_LAYOUT_TIMING).open;\n\n  const motion = {\n    animate: { opacity: [0, 1], scale: [0.9, 1], timing: step.open },\n    exit: { opacity: [1, 0], scale: [1, 0.9], timing: step.close },\n    layout: { timing: layout },\n  };\n\n  return (\n    <div className={cx('tag-group', className)} style={style} role=\"group\" aria-label={ariaLabel} {...htmlProps}>\n      <TagGroupContext.Provider value={motion}>\n        <Presence initial={false}>{children}</Presence>\n      </TagGroupContext.Provider>\n    </div>\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/primitives/tag/Tag.tsx"],"names":[],"mappings":"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","file":"tag.js","sourcesContent":["'use client';\n\nimport './tag.css';\n\nimport { createContext, useContext, type CSSProperties, type HTMLAttributes, type ReactNode, type Ref } from 'react';\n\nimport type { DataAttributes } from '../../../dom-props';\nimport type { Layer } from '../../../engine';\nimport { Motion } from '../../../motion/element';\nimport type { FlipTuning } from '../../../motion/flip';\nimport { resolveMotionTiming } from '../../../motion/motion-timing';\nimport { Presence } from '../../../motion/presence';\nimport { popIn, popOut } from '../../../motion/presets';\nimport type { DisableableAnimation } from '../../../motion/timing';\nimport { UIMotion } from '../../../tokens/motion-tokens';\nimport { IconSlot } from '../../internal/icon/IconSlot';\nimport { cx } from '../../internal/utils/cx';\n\nconst TAG_TIMING = { open: { duration: 'base', ease: 'entrance' }, close: { duration: 'fast', ease: 'exit' } } as const;\nconst TAG_LAYOUT_TIMING = {\n  open: { duration: 'slow', ease: 'entrance' },\n  close: { duration: 'slow', ease: 'entrance' },\n} as const;\n\ninterface TagGroupMotion {\n  animate: Layer;\n  exit: Layer;\n  layout: FlipTuning;\n}\n\nconst TagGroupContext = createContext<TagGroupMotion | null>(null);\n\ninterface TagOwnProps {\n  /** Tag content; a string label also seeds the default remove-button `aria-label`. */\n  children: ReactNode;\n  /** Your own icon node, sized small and tinted to the tag's text. */\n  icon?: ReactNode | null;\n  /** Presence adds the remove button; called on click - remove the item yourself. */\n  onRemove?: (() => void) | null;\n  /** Accessible label for the remove button. Defaults to \"Remove {label}\" for string labels. */\n  removeLabel?: string;\n  /** 'md' = 28px (default) - 'sm' = 24px for dense rows. */\n  size?: 'md' | 'sm';\n  /** Set `data-disabled` on the tag and disable its remove button. @default false */\n  disabled?: boolean;\n  /** Extra class(es) merged onto the root element. */\n  className?: string;\n  /** Inline styles merged onto the root element. */\n  style?: CSSProperties;\n}\n\n/** Tag - the removable, editable label (stateless; the parent owns the list). */\nexport interface TagProps extends TagOwnProps {\n  /** Standard <span> attributes forwarded to the tag root. */\n  htmlProps?: Omit<HTMLAttributes<HTMLSpanElement>, keyof TagOwnProps> & DataAttributes;\n  /** Ref to the tag root span. */\n  ref?: Ref<HTMLSpanElement>;\n}\n\ninterface TagGroupOwnProps {\n  /** Accessible name for the group (role=\"group\"). */\n  ariaLabel?: string;\n  /** The `Tag`s; adds, removals and reflow are animated. */\n  children?: ReactNode;\n  /** Extra class(es) merged onto the group wrapper. */\n  className?: string;\n  /** Inline styles merged onto the group wrapper. */\n  style?: CSSProperties;\n  /** Add/remove/reflow timing for the member tags - motion tokens only, or `null` to disable. */\n  animation?: DisableableAnimation;\n}\n\n/** TagGroup - wrapping flex row + removal/insertion choreography. */\nexport interface TagGroupProps extends TagGroupOwnProps {\n  /** Standard <div> attributes forwarded to the group wrapper. */\n  htmlProps?: Omit<HTMLAttributes<HTMLDivElement>, keyof TagGroupOwnProps> & DataAttributes;\n}\n\nfunction TagRemoveGlyph() {\n  return (\n    <svg viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M3 3 L9 9 M9 3 L3 9\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n    </svg>\n  );\n}\n\nexport function Tag({\n  children,\n  icon = null,\n  onRemove = null,\n  removeLabel,\n  size = 'md',\n  disabled = false,\n  className = '',\n  style,\n  htmlProps,\n  ref,\n}: TagProps) {\n  const cls = cx('tag', size === 'sm' && 'tag--sm', className);\n  const xLabel = removeLabel || (typeof children === 'string' ? 'Remove ' + children : 'Remove');\n  const group = useContext(TagGroupContext);\n\n  return (\n    <Motion\n      as=\"span\"\n      ref={ref}\n      animate={group?.animate}\n      exit={group?.exit}\n      layout={!!group}\n      layoutTransition={group?.layout}\n      className={cls}\n      style={style}\n      data-disabled={disabled ? 'true' : undefined}\n      {...htmlProps}\n    >\n      {icon && (\n        <span className=\"tag__icon\">\n          <IconSlot size=\"sm\">{icon}</IconSlot>\n        </span>\n      )}\n      <span className=\"tag__label\">{children}</span>\n      {onRemove && (\n        <button type=\"button\" className=\"tag__remove\" aria-label={xLabel} disabled={disabled} onClick={onRemove}>\n          <TagRemoveGlyph />\n        </button>\n      )}\n    </Motion>\n  );\n}\n\nexport function TagGroup({ ariaLabel, className = '', style, children, htmlProps, animation }: TagGroupProps) {\n  const step = resolveMotionTiming(animation, TAG_TIMING);\n  const layout = resolveMotionTiming(animation, TAG_LAYOUT_TIMING).open;\n\n  const motion = {\n    animate: popIn(UIMotion.scale.chip, step.open),\n    exit: popOut(UIMotion.scale.chip, step.close),\n    layout: { timing: layout },\n  };\n\n  return (\n    <div className={cx('tag-group', className)} style={style} role=\"group\" aria-label={ariaLabel} {...htmlProps}>\n      <TagGroupContext.Provider value={motion}>\n        <Presence initial={false}>{children}</Presence>\n      </TagGroupContext.Provider>\n    </div>\n  );\n}\n"]}

package/dist/text-field.js

@@ -1,69 +1,9 @@
-'use client';import { IconSlot } from './chunk-2ERBBFZS.js';
-import { resolveFieldMessage, FieldLabel, FieldMessage } from './chunk-I4XQ4PV2.js';
-import { Icon } from './chunk-3SBCBYB7.js';
-import './chunk-7SZCJ7WI.js';
-import './chunk-VTJTGVZZ.js';
-import { cx } from './chunk-QGNC7LH5.js';
-import './input.css';
-import { useRef } from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-function TextField({
-  label,
-  helper,
-  error,
-  warning,
-  success,
-  leadingIcon,
-  clearable,
-  size,
-  value,
-  htmlProps,
-  className,
-  style,
-  optional,
-  ...rest
-}) {
-  const { state, msg, msgIcon } = resolveFieldMessage(error, warning, success, helper);
-  const inputRef = useRef(null);
-  const showClear = clearable && value && !rest.disabled && !rest.readOnly;
-  function clear() {
-    const el = inputRef.current;
-    if (!el) return;
-    const setValue = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value").set;
-    setValue.call(el, "");
-    el.dispatchEvent(new Event("input", { bubbles: true }));
-    el.focus();
-  }
-  const cls = cx(
-    "fld",
-    size === "sm" ? "fld--sm" : size === "lg" ? "fld--lg" : "",
-    leadingIcon && "fld--has-lead",
-    showClear && "fld--has-action",
-    state,
-    className
-  );
-  return /* @__PURE__ */ jsxs("div", { className: cls, style, children: [
-    /* @__PURE__ */ jsx(FieldLabel, { id: rest.id, label, required: rest.required, optional }),
-    /* @__PURE__ */ jsxs("div", { className: "fld__control", children: [
-      leadingIcon && /* @__PURE__ */ jsx("span", { className: "fld__icon fld__icon--lead", children: /* @__PURE__ */ jsx(IconSlot, { size, children: leadingIcon }) }),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          ref: inputRef,
-          className: "fld__input",
-          value,
-          "aria-invalid": error ? true : void 0,
-          ...rest,
-          ...htmlProps
-        }
-      ),
-      showClear && /* @__PURE__ */ jsx("button", { type: "button", className: "fld__action", "aria-label": "Clear", onClick: clear, children: /* @__PURE__ */ jsx(Icon, { name: "close", size }) })
-    ] }),
-    /* @__PURE__ */ jsx(FieldMessage, { message: msg, icon: msgIcon })
-  ] });
-}
-
-export { TextField };
+'use client';export { TextField } from './chunk-TVYH4AN7.js';
+import './chunk-3MPF7FZV.js';
+import './chunk-4BSHB7R3.js';
+import './chunk-EAI4POPB.js';
+import './chunk-45R4Z5XN.js';
+import './chunk-DMX2F6B4.js';
+import './chunk-QGNC7LH5.js';
 //# sourceMappingURL=text-field.js.map
 //# sourceMappingURL=text-field.js.map

package/dist/text-field.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/primitives/input/TextField.tsx"],"names":[],"mappings":";;;;;;;;;;AA8CO,SAAS,SAAA,CAAU;AAAA,EACxB,KAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAmB;AACjB,EAAA,MAAM,EAAE,OAAO,GAAA,EAAK,OAAA,KAAY,mBAAA,CAAoB,KAAA,EAAO,OAAA,EAAS,OAAA,EAAS,MAAM,CAAA;AACnF,EAAA,MAAM,QAAA,GAAW,OAAyB,IAAI,CAAA;AAC9C,EAAA,MAAM,YAAY,SAAA,IAAa,KAAA,IAAS,CAAC,IAAA,CAAK,QAAA,IAAY,CAAC,IAAA,CAAK,QAAA;AAEhE,EAAA,SAAS,KAAA,GAAQ;AACf,IAAA,MAAM,KAAK,QAAA,CAAS,OAAA;AACpB,IAAA,IAAI,CAAC,EAAA,EAAI;AACT,IAAA,MAAM,WAAW,MAAA,CAAO,wBAAA,CAAyB,gBAAA,CAAiB,SAAA,EAAW,OAAO,CAAA,CAAG,GAAA;AACvF,IAAA,QAAA,CAAS,IAAA,CAAK,IAAI,EAAE,CAAA;AACpB,IAAA,EAAA,CAAG,aAAA,CAAc,IAAI,KAAA,CAAM,OAAA,EAAS,EAAE,OAAA,EAAS,IAAA,EAAM,CAAC,CAAA;AACtD,IAAA,EAAA,CAAG,KAAA,EAAM;AAAA,EACX;AACA,EAAA,MAAM,GAAA,GAAM,EAAA;AAAA,IACV,KAAA;AAAA,IACA,IAAA,KAAS,IAAA,GAAO,SAAA,GAAY,IAAA,KAAS,OAAO,SAAA,GAAY,EAAA;AAAA,IACxD,WAAA,IAAe,eAAA;AAAA,IACf,SAAA,IAAa,iBAAA;AAAA,IACb,KAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,GAAA,EAAK,KAAA,EACnB,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,IAAI,IAAA,CAAK,EAAA,EAAI,OAAc,QAAA,EAAU,IAAA,CAAK,UAAU,QAAA,EAAoB,CAAA;AAAA,oBACpF,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,cAAA,EACZ,QAAA,EAAA;AAAA,MAAA,WAAA,oBACC,GAAA,CAAC,UAAK,SAAA,EAAU,2BAAA,EACd,8BAAC,QAAA,EAAA,EAAS,IAAA,EAAa,uBAAY,CAAA,EACrC,CAAA;AAAA,sBAEF,GAAA;AAAA,QAAC,OAAA;AAAA,QAAA;AAAA,UACC,GAAA,EAAK,QAAA;AAAA,UACL,SAAA,EAAU,YAAA;AAAA,UACV,KAAA;AAAA,UACA,cAAA,EAAc,QAAQ,IAAA,GAAO,MAAA;AAAA,UAC5B,GAAG,IAAA;AAAA,UACH,GAAG;AAAA;AAAA,OACN;AAAA,MACC,6BACC,GAAA,CAAC,QAAA,EAAA,EAAO,IAAA,EAAK,QAAA,EAAS,WAAU,aAAA,EAAc,YAAA,EAAW,OAAA,EAAQ,OAAA,EAAS,OACxE,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAK,OAAA,EAAQ,MAAY,CAAA,EACjC;AAAA,KAAA,EAEJ,CAAA;AAAA,oBACA,GAAA,CAAC,YAAA,EAAA,EAAa,OAAA,EAAS,GAAA,EAAK,MAAM,OAAA,EAAS;AAAA,GAAA,EAC7C,CAAA;AAEJ","file":"text-field.js","sourcesContent":["'use client';\n\nimport './input.css';\nimport { useRef } from 'react';\nimport type { CSSProperties, InputHTMLAttributes, ReactNode } from 'react';\nimport { Icon } from '../../internal/icon/Icon';\nimport { IconSlot } from '../../internal/icon/IconSlot';\nimport { FieldLabel, FieldMessage, resolveFieldMessage, type FieldMessagingProps } from './field-chrome';\nimport type { DataAttributes } from '../../../dom-props';\nimport { cx } from '../../internal/utils/cx';\n\n/** The native <input> props TextField surfaces at the top level (the rest live in `htmlProps`). */\ntype TextFieldNative = Pick<\n  InputHTMLAttributes<HTMLInputElement>,\n  | 'placeholder'\n  | 'value'\n  | 'onChange'\n  | 'disabled'\n  | 'readOnly'\n  | 'maxLength'\n  | 'minLength'\n  | 'hidden'\n  | 'pattern'\n  | 'onKeyDown'\n>;\n\ninterface TextFieldOwnProps extends FieldMessagingProps, TextFieldNative {\n  /** Leading icon - your own icon node (sized to the control). Decorative. */\n  leadingIcon?: ReactNode;\n  /** Show a clear button when there's a value. */\n  clearable?: boolean;\n  /** Control height: sm 28 - md 36 (default) - lg 40. */\n  size?: 'sm' | 'md' | 'lg';\n  /** Extra class(es) merged onto the field root. */\n  className?: string;\n  /** Inline styles merged onto the field root. */\n  style?: CSSProperties;\n  /** Available text like types */\n  type?: 'text' | 'search' | 'email' | 'url' | 'password';\n}\n\nexport interface TextFieldProps extends TextFieldOwnProps {\n  /** Standard <input> attributes (name, autoComplete, maxLength, aria-*, ...) forwarded to the input. */\n  htmlProps?: Omit<InputHTMLAttributes<HTMLInputElement>, keyof TextFieldOwnProps | 'size'> & DataAttributes;\n}\n\nexport function TextField({\n  label,\n  helper,\n  error,\n  warning,\n  success,\n  leadingIcon,\n  clearable,\n  size,\n  value,\n  htmlProps,\n  className,\n  style,\n  optional,\n  ...rest\n}: TextFieldProps) {\n  const { state, msg, msgIcon } = resolveFieldMessage(error, warning, success, helper);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const showClear = clearable && value && !rest.disabled && !rest.readOnly;\n\n  function clear() {\n    const el = inputRef.current;\n    if (!el) return;\n    const setValue = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!;\n    setValue.call(el, '');\n    el.dispatchEvent(new Event('input', { bubbles: true }));\n    el.focus();\n  }\n  const cls = cx(\n    'fld',\n    size === 'sm' ? 'fld--sm' : size === 'lg' ? 'fld--lg' : '',\n    leadingIcon && 'fld--has-lead',\n    showClear && 'fld--has-action',\n    state,\n    className,\n  );\n\n  return (\n    <div className={cls} style={style}>\n      <FieldLabel id={rest.id} label={label} required={rest.required} optional={optional} />\n      <div className=\"fld__control\">\n        {leadingIcon && (\n          <span className=\"fld__icon fld__icon--lead\">\n            <IconSlot size={size}>{leadingIcon}</IconSlot>\n          </span>\n        )}\n        <input\n          ref={inputRef}\n          className=\"fld__input\"\n          value={value}\n          aria-invalid={error ? true : undefined}\n          {...rest}\n          {...htmlProps}\n        />\n        {showClear && (\n          <button type=\"button\" className=\"fld__action\" aria-label=\"Clear\" onClick={clear}>\n            <Icon name=\"close\" size={size} />\n          </button>\n        )}\n      </div>\n      <FieldMessage message={msg} icon={msgIcon} />\n    </div>\n  );\n}\n"]}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"text-field.js"}

package/dist/textarea.css

@@ -1,219 +1,213 @@
-/* textarea.css - Textarea (multiline composer): the .txa box over the .fld shell, auto-grow, char meter, over-limit highlight. */
+@layer zyncat.tokens, zyncat.components;
 
-.txa {
-  --txa-pad-y: var(--space-3);
-  --txa-pad-x: var(--space-4);
-  --txa-lh: var(--leading-body);
-  --txa-min-rows: 3;
-  --txa-max-rows: 10;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  background: var(--bg-inset);
-  border: var(--border-hairline) solid var(--border-default);
-  border-radius: var(--radius-lg);
-  transition: var(--transition-control);
-}
-.txa:hover:not(.is-disabled):not(.is-readonly):not(:focus-within) {
-  border-color: var(--border-strong);
-}
-.txa:focus-within {
-  border-color: var(--accent);
-  background: var(--bg-surface);
-  box-shadow: var(--ring-accent);
-}
-.txa.is-disabled {
-  background: var(--bg-muted);
-}
-.txa.is-readonly {
-  background: var(--bg-subtle);
-}
+@layer zyncat.components {
+  /* textarea.css - Textarea (multiline composer): the .txa box over the .fld shell, auto-grow, char meter, over-limit highlight. */
 
-/* The .txa__stack wrapper owns the height and is the only thing that animates; overflow:clip while growing (a clip box can't scroll to the caret - no jump), flipped to auto by JS only past max-rows. */
-.txa__stack {
-  position: relative;
-  min-height: calc(var(--txa-min-rows) * var(--txa-lh) + 2 * var(--txa-pad-y));
-  max-height: calc(var(--txa-max-rows) * var(--txa-lh) + 2 * var(--txa-pad-y));
-  overflow: clip;
-  transition: height var(--duration-base) var(--ease-standard);
-}
-.txa__input,
-.txa__mirror {
-  box-sizing: border-box;
-  width: 100%;
-  font: var(--type-body);
-  padding: var(--txa-pad-y) var(--txa-pad-x);
-  border-radius: inherit;
-  white-space: pre-wrap;
-  overflow-wrap: break-word;
-  word-break: break-word;
-}
-.txa__input {
-  position: relative;
-  z-index: 1;
-  display: block;
-  margin: 0;
-  border: 0;
-  background: transparent;
-  resize: none;
-  appearance: none;
-  -webkit-appearance: none;
-  outline: none;
-  color: var(--text-strong);
-  overflow: hidden;
-}
-.txa__input::placeholder {
-  color: var(--text-disabled);
-}
-.txa__input:disabled {
-  color: var(--text-disabled);
-  cursor: not-allowed;
-}
-.txa__input[readonly] {
-  color: var(--text-body);
-}
+  .txa {
+    --txa-pad-y: var(--space-3);
+    --txa-pad-x: var(--space-4);
+    --txa-lh: var(--leading-body);
+    --txa-min-rows: 3;
+    --txa-max-rows: 10;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    background: var(--bg-surface);
+    border: var(--border-hairline) solid var(--border-default);
+    border-radius: var(--radius-lg);
+    transition: var(--transition-control);
+  }
+  .txa:hover:not(.is-disabled):not(.is-readonly):not(:focus-within) {
+    border-color: var(--border-strong);
+  }
+  .txa:focus-within {
+    border-color: var(--accent);
+    background: var(--bg-surface);
+    box-shadow: var(--ring-accent);
+  }
+  .txa.is-disabled {
+    background: var(--bg-muted);
+  }
+  .txa.is-readonly {
+    background: var(--bg-subtle);
+  }
 
-/* over-limit highlight: faint tint + a danger underline on the excess chars */
-.txa__mirror {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 0;
-  color: transparent;
-  pointer-events: none;
-  user-select: none;
-}
-.txa__mirror mark {
-  color: transparent;
-  background: var(--danger-subtle);
-  border-radius: var(--radius-sm);
-  text-decoration: underline;
-  text-decoration-color: var(--danger);
-  text-decoration-thickness: 2px;
-  text-underline-offset: 3px;
-  -webkit-box-decoration-break: clone;
-  box-decoration-break: clone;
-}
+  /* The .txa__stack wrapper owns the height and is the only thing that animates; overflow:clip while growing (a clip box can't scroll to the caret - no jump), flipped to auto by JS only past max-rows. */
+  .txa__stack {
+    position: relative;
+    min-height: calc(var(--txa-min-rows) * var(--txa-lh) + 2 * var(--txa-pad-y));
+    max-height: calc(var(--txa-max-rows) * var(--txa-lh) + 2 * var(--txa-pad-y));
+    overflow: clip;
+    transition: height var(--duration-base) var(--ease-standard);
+  }
+  .txa__input,
+  .txa__mirror {
+    box-sizing: border-box;
+    width: 100%;
+    font: var(--type-body);
+    padding: var(--txa-pad-y) var(--txa-pad-x);
+    border-radius: inherit;
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    word-break: break-word;
+  }
+  .txa__input {
+    position: relative;
+    z-index: 1;
+    display: block;
+    margin: 0;
+    border: 0;
+    background: transparent;
+    resize: none;
+    appearance: none;
+    -webkit-appearance: none;
+    outline: none;
+    color: var(--text-strong);
+    overflow: hidden;
+  }
+  .txa__input::placeholder {
+    color: var(--text-disabled);
+  }
+  .txa__input:disabled {
+    color: var(--text-disabled);
+    cursor: not-allowed;
+  }
+  .txa__input[readonly] {
+    color: var(--text-body);
+  }
 
-.txa__bar {
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
-  padding: var(--space-2) var(--space-3);
-  border-top: var(--border-hairline) solid var(--border-subtle);
-  transition: border-color var(--duration-fast) var(--ease-standard);
-}
-.txa:focus-within .txa__bar {
-  border-top-color: var(--border-default);
-}
-.txa__hint {
-  font: var(--type-micro);
-  color: var(--text-subtle);
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-1);
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.txa__kbd {
-  font-family: var(--font-mono);
-  font-size: var(--size-micro);
-  line-height: 1;
-  color: var(--text-muted);
-  padding: var(--space-1);
-  border: var(--border-hairline) solid var(--border-default);
-  border-radius: var(--radius-sm);
-  background: var(--bg-surface);
-}
+  /* over-limit highlight: faint tint + a danger underline on the excess chars */
+  .txa__mirror {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 0;
+    color: transparent;
+    pointer-events: none;
+    user-select: none;
+  }
+  .txa__mirror mark {
+    color: transparent;
+    background: var(--danger-subtle);
+    border-radius: var(--radius-sm);
+    text-decoration: underline;
+    text-decoration-color: var(--danger);
+    text-decoration-thickness: 2px;
+    text-underline-offset: 3px;
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
+  }
 
-.txa__meter {
-  margin-left: auto;
-  flex: none;
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-2);
-}
-.txa__count {
-  font-family: var(--font-mono);
-  font-size: var(--size-micro);
-  line-height: 1;
-  font-variant-numeric: tabular-nums;
-  color: var(--text-subtle);
-  white-space: nowrap;
-  transition: color var(--duration-fast) var(--ease-standard);
-}
-.txa__ring {
-  width: var(--icon-sm);
-  height: var(--icon-sm);
-  flex: none;
-  transform: rotate(-90deg);
-}
-.txa__ring circle {
-  fill: none;
-  stroke-width: 2;
-}
-.txa__ring .txa__ring-trk {
-  stroke: var(--border-default);
-}
-.txa__ring .txa__ring-prg {
-  stroke: var(--accent);
-  stroke-linecap: round;
-  stroke-dasharray: var(--txa-ring-c);
-  stroke-dashoffset: calc(var(--txa-ring-c) * (1 - var(--txa-ring-p, 0)));
-  transition:
-    stroke-dashoffset var(--duration-base) var(--ease-standard),
-    stroke var(--duration-fast) var(--ease-standard);
-}
-.txa__meter.is-near .txa__ring-prg {
-  stroke: var(--warning);
-}
-.txa__meter.is-near .txa__count {
-  color: var(--warning-text);
-}
-.txa__meter.is-over .txa__ring-prg {
-  stroke: var(--danger);
-}
-.txa__meter.is-over .txa__count {
-  color: var(--danger-text);
-  font-weight: var(--weight-medium);
-}
+  .txa__bar {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-2) var(--space-3);
+    border-top: var(--border-hairline) solid var(--border-subtle);
+    transition: border-color var(--duration-fast) var(--ease-standard);
+  }
+  .txa:focus-within .txa__bar {
+    border-top-color: var(--border-default);
+  }
+  .txa__hint {
+    font: var(--type-micro);
+    color: var(--text-subtle);
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 
-.fld.is-error .txa {
-  border-color: var(--danger);
-}
-.fld.is-error .txa:hover:not(.is-disabled):not(.is-readonly):not(:focus-within) {
-  border-color: var(--danger-text);
-}
-.fld.is-error .txa:focus-within {
-  box-shadow: var(--ring-danger);
-}
-.fld.is-warning .txa {
-  border-color: var(--warning);
-}
-.fld.is-warning .txa:hover:not(.is-disabled):not(.is-readonly):not(:focus-within) {
-  border-color: var(--warning-text);
-}
-.fld.is-warning .txa:focus-within {
-  box-shadow: var(--ring-warning);
-}
-.fld.is-success .txa {
-  border-color: var(--success);
-}
-.fld.is-success .txa:hover:not(.is-disabled):not(.is-readonly):not(:focus-within) {
-  border-color: var(--success-text);
-}
-.fld.is-success .txa:focus-within {
-  box-shadow: var(--ring-success);
-}
+  .txa__meter {
+    margin-left: auto;
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
+  .txa__count {
+    font-family: var(--font-mono);
+    font-size: var(--size-micro);
+    line-height: 1;
+    font-variant-numeric: tabular-nums;
+    color: var(--text-subtle);
+    white-space: nowrap;
+    transition: color var(--duration-fast) var(--ease-standard);
+  }
+  .txa__ring {
+    width: var(--icon-sm);
+    height: var(--icon-sm);
+    flex: none;
+    transform: rotate(-90deg);
+  }
+  .txa__ring circle {
+    fill: none;
+    stroke-width: 2;
+  }
+  .txa__ring .txa__ring-trk {
+    stroke: var(--border-default);
+  }
+  .txa__ring .txa__ring-prg {
+    stroke: var(--accent);
+    stroke-linecap: round;
+    stroke-dasharray: var(--txa-ring-c);
+    stroke-dashoffset: calc(var(--txa-ring-c) * (1 - var(--txa-ring-p, 0)));
+    transition:
+      stroke-dashoffset var(--duration-base) var(--ease-standard),
+      stroke var(--duration-fast) var(--ease-standard);
+  }
+  .txa__meter.is-near .txa__ring-prg {
+    stroke: var(--warning);
+  }
+  .txa__meter.is-near .txa__count {
+    color: var(--warning-text);
+  }
+  .txa__meter.is-over .txa__ring-prg {
+    stroke: var(--danger);
+  }
+  .txa__meter.is-over .txa__count {
+    color: var(--danger-text);
+    font-weight: var(--weight-medium);
+  }
 
-.fld--txa.fld--lg .txa {
-  --txa-pad-y: var(--space-4);
-  --txa-lh: var(--leading-body-lg);
-}
-.fld--txa.fld--lg .txa__input,
-.fld--txa.fld--lg .txa__mirror {
-  font: var(--type-body-lg);
+  .fld.is-error .txa {
+    border-color: var(--danger);
+  }
+  .fld.is-error .txa:hover:not(.is-disabled):not(.is-readonly):not(:focus-within) {
+    border-color: var(--danger-text);
+  }
+  .fld.is-error .txa:focus-within {
+    box-shadow: var(--ring-danger);
+  }
+  .fld.is-warning .txa {
+    border-color: var(--warning);
+  }
+  .fld.is-warning .txa:hover:not(.is-disabled):not(.is-readonly):not(:focus-within) {
+    border-color: var(--warning-text);
+  }
+  .fld.is-warning .txa:focus-within {
+    box-shadow: var(--ring-warning);
+  }
+  .fld.is-success .txa {
+    border-color: var(--success);
+  }
+  .fld.is-success .txa:hover:not(.is-disabled):not(.is-readonly):not(:focus-within) {
+    border-color: var(--success-text);
+  }
+  .fld.is-success .txa:focus-within {
+    box-shadow: var(--ring-success);
+  }
+
+  .fld--txa.fld--lg .txa {
+    --txa-pad-y: var(--space-4);
+    --txa-lh: var(--leading-body-lg);
+  }
+  .fld--txa.fld--lg .txa__input,
+  .fld--txa.fld--lg .txa__mirror {
+    font: var(--type-body-lg);
+  }
 }

package/dist/textarea.js

@@ -1,10 +1,10 @@
-'use client';import { resolveFieldMessage, FieldLabel, FieldMessage } from './chunk-I4XQ4PV2.js';
-import './chunk-3SBCBYB7.js';
-import './chunk-7SZCJ7WI.js';
-import './chunk-VTJTGVZZ.js';
+'use client';import { resolveFieldMessage, fieldMessageId, FieldLabel, joinIds, FieldMessage } from './chunk-4BSHB7R3.js';
+import './chunk-EAI4POPB.js';
+import './chunk-45R4Z5XN.js';
+import './chunk-DMX2F6B4.js';
 import { cx } from './chunk-QGNC7LH5.js';
 import './textarea.css';
-import { useRef, useLayoutEffect, useEffect } from 'react';
+import { useRef, useId, useLayoutEffect, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var RING_C = (2 * Math.PI * 7).toFixed(2);
@@ -43,6 +43,8 @@ function Textarea({
   const remaining = max ? max - count : 0;
   const meterState = over ? "is-over" : max && remaining <= warnAt ? "is-near" : "";
   const { state, msg, msgIcon } = resolveFieldMessage(error, warning, success, helper);
+  const autoId = useId();
+  const msgId = fieldMessageId(id ?? autoId, msg);
   const resize = () => {
     const el = taRef.current, stack = stackRef.current;
     if (!el || !stack) return;
@@ -52,11 +54,8 @@ function Textarea({
     const content = el.offsetHeight;
     const maxPx = parseFloat(getComputedStyle(stack).maxHeight) || Infinity;
     const target = Math.min(content, maxPx);
-    if (target === start) {
-      stack.style.overflowY = content > maxPx ? "auto" : "clip";
-      return;
-    }
-    stack.style.overflowY = "clip";
+    stack.style.overflowY = content > maxPx ? "auto" : "clip";
+    if (target === start) return;
     stack.style.height = start + "px";
     void stack.offsetHeight;
     stack.style.height = target + "px";
@@ -111,7 +110,8 @@ function Textarea({
               if (mirrorRef.current) mirrorRef.current.scrollTop = taRef.current.scrollTop;
             },
             "aria-invalid": error ? true : void 0,
-            ...htmlProps
+            ...htmlProps,
+            "aria-describedby": joinIds(msgId, htmlProps?.["aria-describedby"])
           }
         )
       ] }),
@@ -135,7 +135,7 @@ function Textarea({
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx(FieldMessage, { message: msg, icon: msgIcon })
+    /* @__PURE__ */ jsx(FieldMessage, { id: msgId, message: msg, icon: msgIcon })
   ] });
 }