@zyncat/ui 0.8.0

package/dist/text-field.js

@@ -0,0 +1,69 @@
+'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 };
+//# sourceMappingURL=text-field.js.map
+//# sourceMappingURL=text-field.js.map

package/dist/text-field.js.map

@@ -0,0 +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"]}

package/dist/textarea.css

@@ -0,0 +1,219 @@
+/* textarea.css - Textarea (multiline composer): the .txa box over the .fld shell, auto-grow, char meter, over-limit highlight. */
+
+.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);
+}
+
+/* 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);
+}
+
+/* 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__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);
+}
+
+.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.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.d.ts

@@ -0,0 +1,38 @@
+import * as react from 'react';
+import { TextareaHTMLAttributes, ChangeEventHandler, ReactNode, CSSProperties } from 'react';
+import { b as FieldMessagingProps } from './field-chrome-CMPOQSLs.js';
+import { D as DataAttributes } from './dom-props-C0jrllBw.js';
+
+/** The native <textarea> props Textarea surfaces at the top level (the rest live in `htmlProps`). */
+type TextareaNative = Pick<TextareaHTMLAttributes<HTMLTextAreaElement>, 'placeholder' | 'disabled' | 'readOnly' | 'onKeyDown'>;
+interface TextareaOwnProps extends FieldMessagingProps, TextareaNative {
+    /** Controlled text value. @default '' */
+    value?: string;
+    /** Change handler - fired on each edit with the textarea change event. */
+    onChange?: ChangeEventHandler<HTMLTextAreaElement>;
+    /** Fired on ⌘/Ctrl+Enter with the current text. */
+    onSubmit?: (value: string) => void;
+    /** Soft char limit: shows the meter + over-limit highlight. Does NOT truncate (use native maxLength for a hard stop). */
+    max?: number;
+    /** Rows shown before auto-grow kicks in. @default 3 */
+    minRows?: number;
+    /** Row cap - grows up to this, then the box scrolls. @default 10 */
+    maxRows?: number;
+    /** Remaining-chars threshold that flips the meter amber. Default 20. */
+    warnAt?: number;
+    /** Footer hint, left of the meter - e.g. a ⌘↵ affordance. */
+    hint?: ReactNode;
+    /** md (default) - lg (prominent composer). */
+    size?: 'md' | 'lg';
+    /** Extra class(es) merged onto the field root. */
+    className?: string;
+    /** Inline styles merged onto the field root. */
+    style?: CSSProperties;
+}
+interface TextareaProps extends TextareaOwnProps {
+    /** Standard <textarea> attributes (name, maxLength, aria-*, onKeyDown, ...) forwarded to the textarea. */
+    htmlProps?: Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, keyof TextareaOwnProps | 'rows'> & DataAttributes;
+}
+declare function Textarea({ id, label, required, optional, placeholder, helper, error, warning, success, value, onChange, onKeyDown, onSubmit, max, minRows, maxRows, warnAt, hint, size, disabled, readOnly, className, style, htmlProps, }: TextareaProps): react.JSX.Element;
+
+export { Textarea, type TextareaProps };

package/dist/textarea.js

@@ -0,0 +1,144 @@
+'use client';import { resolveFieldMessage, FieldLabel, FieldMessage } from './chunk-I4XQ4PV2.js';
+import './chunk-3SBCBYB7.js';
+import './chunk-7SZCJ7WI.js';
+import './chunk-VTJTGVZZ.js';
+import { cx } from './chunk-QGNC7LH5.js';
+import './textarea.css';
+import { useRef, useLayoutEffect, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var RING_C = (2 * Math.PI * 7).toFixed(2);
+function Textarea({
+  id,
+  label,
+  required,
+  optional,
+  placeholder,
+  helper,
+  error,
+  warning,
+  success,
+  value = "",
+  onChange,
+  onKeyDown,
+  onSubmit,
+  max,
+  minRows = 3,
+  maxRows = 10,
+  warnAt = 20,
+  hint,
+  size,
+  disabled,
+  readOnly,
+  className = "",
+  style,
+  htmlProps
+}) {
+  const taRef = useRef(null);
+  const stackRef = useRef(null);
+  const mirrorRef = useRef(null);
+  const text = value ?? "";
+  const count = text.length;
+  const over = max ? Math.max(count - max, 0) : 0;
+  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 resize = () => {
+    const el = taRef.current, stack = stackRef.current;
+    if (!el || !stack) return;
+    const start = stack.offsetHeight;
+    el.style.height = "auto";
+    el.style.height = el.scrollHeight + "px";
+    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.height = start + "px";
+    void stack.offsetHeight;
+    stack.style.height = target + "px";
+  };
+  useLayoutEffect(resize, [text, size]);
+  useEffect(() => {
+    const stack = stackRef.current;
+    if (!stack) return void 0;
+    let w = stack.offsetWidth;
+    const ro = new ResizeObserver(() => {
+      if (stack.offsetWidth !== w) {
+        w = stack.offsetWidth;
+        resize();
+      }
+    });
+    ro.observe(stack);
+    return () => ro.disconnect();
+  }, []);
+  const handleKeyDown = (e) => {
+    if (onSubmit && (e.metaKey || e.ctrlKey) && e.key === "Enter") {
+      e.preventDefault();
+      onSubmit(text);
+    }
+    onKeyDown?.(e);
+  };
+  const cls = cx("fld", "fld--txa", size === "lg" && "fld--lg", state, className);
+  const boxCls = cx("txa", disabled && "is-disabled", readOnly && "is-readonly");
+  return /* @__PURE__ */ jsxs("div", { className: cls, style, children: [
+    /* @__PURE__ */ jsx(FieldLabel, { id, label, required, optional }),
+    /* @__PURE__ */ jsxs("div", { className: boxCls, style: { "--txa-min-rows": minRows, "--txa-max-rows": maxRows }, children: [
+      /* @__PURE__ */ jsxs("div", { className: "txa__stack", ref: stackRef, children: [
+        /* @__PURE__ */ jsxs("div", { className: "txa__mirror", ref: mirrorRef, "aria-hidden": "true", children: [
+          over ? text.slice(0, max) : text,
+          over ? /* @__PURE__ */ jsx("mark", { children: text.slice(max) }) : null,
+          "\n"
+        ] }),
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            id,
+            className: "txa__input",
+            ref: taRef,
+            rows: minRows,
+            value: text,
+            placeholder,
+            required,
+            disabled,
+            readOnly,
+            onChange,
+            onKeyDown: handleKeyDown,
+            onScroll: () => {
+              if (mirrorRef.current) mirrorRef.current.scrollTop = taRef.current.scrollTop;
+            },
+            "aria-invalid": error ? true : void 0,
+            ...htmlProps
+          }
+        )
+      ] }),
+      (max || hint) && /* @__PURE__ */ jsxs("div", { className: "txa__bar", children: [
+        hint && /* @__PURE__ */ jsx("span", { className: "txa__hint", children: hint }),
+        max && /* @__PURE__ */ jsxs("span", { className: cx("txa__meter", meterState), children: [
+          /* @__PURE__ */ jsx("span", { className: "txa__count", children: over || remaining <= warnAt ? remaining : `${count} / ${max}` }),
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              className: "txa__ring",
+              viewBox: "0 0 16 16",
+              "aria-hidden": "true",
+              style: { "--txa-ring-c": RING_C, "--txa-ring-p": Math.min(count / max, 1) },
+              children: [
+                /* @__PURE__ */ jsx("circle", { className: "txa__ring-trk", cx: "8", cy: "8", r: "7" }),
+                /* @__PURE__ */ jsx("circle", { className: "txa__ring-prg", cx: "8", cy: "8", r: "7" })
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(FieldMessage, { message: msg, icon: msgIcon })
+  ] });
+}
+
+export { Textarea };
+//# sourceMappingURL=textarea.js.map
+//# sourceMappingURL=textarea.js.map

package/dist/textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/textarea/Textarea.tsx"],"names":[],"mappings":"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","file":"textarea.js","sourcesContent":["'use client';\n\nimport './textarea.css';\nimport {\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  type ChangeEventHandler,\n  type CSSProperties,\n  type KeyboardEvent,\n  type ReactNode,\n  type TextareaHTMLAttributes,\n} from 'react';\nimport { FieldLabel, FieldMessage, resolveFieldMessage, type FieldMessagingProps } from '../input/field-chrome';\nimport type { DataAttributes } from '../../../dom-props';\nimport { cx } from '../../internal/utils/cx';\n\nconst RING_C = (2 * Math.PI * 7).toFixed(2);\n\n/** The native <textarea> props Textarea surfaces at the top level (the rest live in `htmlProps`). */\ntype TextareaNative = Pick<\n  TextareaHTMLAttributes<HTMLTextAreaElement>,\n  'placeholder' | 'disabled' | 'readOnly' | 'onKeyDown'\n>;\n\ninterface TextareaOwnProps extends FieldMessagingProps, TextareaNative {\n  /** Controlled text value. @default '' */\n  value?: string;\n  /** Change handler - fired on each edit with the textarea change event. */\n  onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n  /** Fired on ⌘/Ctrl+Enter with the current text. */\n  onSubmit?: (value: string) => void;\n  /** Soft char limit: shows the meter + over-limit highlight. Does NOT truncate (use native maxLength for a hard stop). */\n  max?: number;\n  /** Rows shown before auto-grow kicks in. @default 3 */\n  minRows?: number;\n  /** Row cap - grows up to this, then the box scrolls. @default 10 */\n  maxRows?: number;\n  /** Remaining-chars threshold that flips the meter amber. Default 20. */\n  warnAt?: number;\n  /** Footer hint, left of the meter - e.g. a ⌘↵ affordance. */\n  hint?: ReactNode;\n  /** md (default) - lg (prominent composer). */\n  size?: '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}\n\nexport interface TextareaProps extends TextareaOwnProps {\n  /** Standard <textarea> attributes (name, maxLength, aria-*, onKeyDown, ...) forwarded to the textarea. */\n  htmlProps?: Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, keyof TextareaOwnProps | 'rows'> & DataAttributes;\n}\n\nexport function Textarea({\n  id,\n  label,\n  required,\n  optional,\n  placeholder,\n  helper,\n  error,\n  warning,\n  success,\n  value = '',\n  onChange,\n  onKeyDown,\n  onSubmit,\n  max,\n  minRows = 3,\n  maxRows = 10,\n  warnAt = 20,\n  hint,\n  size,\n  disabled,\n  readOnly,\n  className = '',\n  style,\n  htmlProps,\n}: TextareaProps) {\n  const taRef = useRef<HTMLTextAreaElement>(null);\n  const stackRef = useRef<HTMLDivElement>(null);\n  const mirrorRef = useRef<HTMLDivElement>(null);\n  const text = value ?? '';\n  const count = text.length;\n  const over = max ? Math.max(count - max, 0) : 0;\n  const remaining = max ? max - count : 0;\n  const meterState = over ? 'is-over' : max && remaining <= warnAt ? 'is-near' : '';\n\n  const { state, msg, msgIcon } = resolveFieldMessage(error, warning, success, helper);\n\n  const resize = () => {\n    const el = taRef.current,\n      stack = stackRef.current;\n    if (!el || !stack) return;\n    const start = stack.offsetHeight;\n    el.style.height = 'auto';\n    el.style.height = el.scrollHeight + 'px';\n    const content = el.offsetHeight;\n    const maxPx = parseFloat(getComputedStyle(stack).maxHeight) || Infinity;\n    const target = Math.min(content, maxPx);\n    if (target === start) {\n      stack.style.overflowY = content > maxPx ? 'auto' : 'clip';\n      return;\n    }\n    stack.style.overflowY = 'clip';\n    stack.style.height = start + 'px';\n    void stack.offsetHeight;\n    stack.style.height = target + 'px';\n  };\n  useLayoutEffect(resize, [text, size]);\n  useEffect(() => {\n    const stack = stackRef.current;\n    if (!stack) return undefined;\n    let w = stack.offsetWidth;\n    const ro = new ResizeObserver(() => {\n      if (stack.offsetWidth !== w) {\n        w = stack.offsetWidth;\n        resize();\n      }\n    });\n    ro.observe(stack);\n    return () => ro.disconnect();\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {\n    if (onSubmit && (e.metaKey || e.ctrlKey) && e.key === 'Enter') {\n      e.preventDefault();\n      onSubmit(text);\n    }\n    onKeyDown?.(e);\n  };\n\n  const cls = cx('fld', 'fld--txa', size === 'lg' && 'fld--lg', state, className);\n  const boxCls = cx('txa', disabled && 'is-disabled', readOnly && 'is-readonly');\n\n  return (\n    <div className={cls} style={style}>\n      <FieldLabel id={id} label={label} required={required} optional={optional} />\n      <div className={boxCls} style={{ '--txa-min-rows': minRows, '--txa-max-rows': maxRows } as CSSProperties}>\n        <div className=\"txa__stack\" ref={stackRef}>\n          <div className=\"txa__mirror\" ref={mirrorRef} aria-hidden=\"true\">\n            {over ? text.slice(0, max) : text}\n            {over ? <mark>{text.slice(max)}</mark> : null}\n            {'\\n'}\n          </div>\n          <textarea\n            id={id}\n            className=\"txa__input\"\n            ref={taRef}\n            rows={minRows}\n            value={text}\n            placeholder={placeholder}\n            required={required}\n            disabled={disabled}\n            readOnly={readOnly}\n            onChange={onChange}\n            onKeyDown={handleKeyDown}\n            onScroll={() => {\n              if (mirrorRef.current) mirrorRef.current.scrollTop = taRef.current.scrollTop;\n            }}\n            aria-invalid={error ? true : undefined}\n            {...htmlProps}\n          />\n        </div>\n        {(max || hint) && (\n          <div className=\"txa__bar\">\n            {hint && <span className=\"txa__hint\">{hint}</span>}\n            {max && (\n              <span className={cx('txa__meter', meterState)}>\n                <span className=\"txa__count\">{over || remaining <= warnAt ? remaining : `${count} / ${max}`}</span>\n                <svg\n                  className=\"txa__ring\"\n                  viewBox=\"0 0 16 16\"\n                  aria-hidden=\"true\"\n                  style={{ '--txa-ring-c': RING_C, '--txa-ring-p': Math.min(count / max, 1) } as CSSProperties}\n                >\n                  <circle className=\"txa__ring-trk\" cx=\"8\" cy=\"8\" r=\"7\" />\n                  <circle className=\"txa__ring-prg\" cx=\"8\" cy=\"8\" r=\"7\" />\n                </svg>\n              </span>\n            )}\n          </div>\n        )}\n      </div>\n      <FieldMessage message={msg} icon={msgIcon} />\n    </div>\n  );\n}\n"]}

package/dist/time-field.d.ts

@@ -0,0 +1,28 @@
+import * as react from 'react';
+import { D as DateFieldBaseProps } from './field-shell-Cuda-feL.js';
+import './timing-7JA_zQHP.js';
+import './motion-scale-Canq4stZ.js';
+import './dom-props-C0jrllBw.js';
+
+interface TimeFieldProps extends DateFieldBaseProps {
+    /** Controlled value, canonical 'HH:mm' (24h). */
+    value?: string | null;
+    /** Uncontrolled initial value, 'HH:mm' (24h). Use instead of `value`. @default null */
+    defaultValue?: string | null;
+    /** Fires live - the instant both segments exist. */
+    onChange?: (value: string) => void;
+    /** Field label rendered above the box; also the segments' `aria-label` fallback. */
+    label?: string;
+    /** Display only; storage stays 24h. Default '24h'. */
+    format?: '24h' | '12h';
+    /** ↑/↓ step granularity in minutes (typing is exact). Default 5. */
+    minuteStep?: number;
+    /** Lower bound 'HH:mm' - saturates, never errors. */
+    min?: string;
+    /** Upper bound 'HH:mm' - saturates, never errors. */
+    max?: string;
+}
+declare function TimeField({ value, // controlled: 'HH:mm' | null
+defaultValue, onChange, label, format, minuteStep, min, max, required, invalid, message, disabled, className, htmlProps, }: TimeFieldProps): react.JSX.Element;
+
+export { TimeField, type TimeFieldProps };

package/dist/time-field.js

@@ -0,0 +1,66 @@
+'use client';import { TimeSegments } from './chunk-64UU4LGU.js';
+import { FieldShell } from './chunk-YGGCQNNU.js';
+import './chunk-I4XQ4PV2.js';
+import './chunk-3SBCBYB7.js';
+import { useControllable } from './chunk-MMRIQNEN.js';
+import './chunk-7SZCJ7WI.js';
+import './chunk-VTJTGVZZ.js';
+import './chunk-QGNC7LH5.js';
+import './date-picker.css';
+import { jsx } from 'react/jsx-runtime';
+
+function TimeField({
+  value,
+  // controlled: 'HH:mm' | null
+  defaultValue = null,
+  onChange,
+  label,
+  format = "24h",
+  minuteStep = 5,
+  min,
+  max,
+  required = false,
+  invalid = false,
+  message,
+  disabled = false,
+  className = "",
+  htmlProps
+}) {
+  const [val, commit] = useControllable(value, defaultValue, onChange);
+  function onBoxPointerDown(e) {
+    if (disabled || e.target.closest(".tsg__seg")) return;
+    e.preventDefault();
+    const seg = e.currentTarget.querySelector(".tsg__seg");
+    if (seg) seg.focus();
+  }
+  return /* @__PURE__ */ jsx(
+    FieldShell,
+    {
+      variant: "tfd",
+      label,
+      required,
+      invalid,
+      message,
+      icon: "clock",
+      className,
+      htmlProps,
+      children: /* @__PURE__ */ jsx("div", { className: "fld__input tfd__box" + (disabled ? " is-disabled" : ""), onPointerDown: onBoxPointerDown, children: /* @__PURE__ */ jsx(
+        TimeSegments,
+        {
+          value: val,
+          onCommit: commit,
+          format,
+          minuteStep,
+          min,
+          max,
+          disabled,
+          ariaLabel: label || "Time"
+        }
+      ) })
+    }
+  );
+}
+
+export { TimeField };
+//# sourceMappingURL=time-field.js.map
+//# sourceMappingURL=time-field.js.map

package/dist/time-field.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/composites/date-picker/TimeField.tsx"],"names":[],"mappings":";;;;;;;;;;;AA2BO,SAAS,SAAA,CAAU;AAAA,EACxB,KAAA;AAAA;AAAA,EACA,YAAA,GAAe,IAAA;AAAA,EACf,QAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA,GAAS,KAAA;AAAA,EACT,UAAA,GAAa,CAAA;AAAA,EACb,GAAA;AAAA,EACA,GAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,OAAA,GAAU,KAAA;AAAA,EACV,OAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAmB;AACjB,EAAA,MAAM,CAAC,GAAA,EAAK,MAAM,IAAI,eAAA,CAAgB,KAAA,EAAO,cAAc,QAAQ,CAAA;AAEnE,EAAA,SAAS,iBAAiB,CAAA,EAAiC;AACzD,IAAA,IAAI,QAAA,IAAa,CAAA,CAAE,MAAA,CAAuB,OAAA,CAAQ,WAAW,CAAA,EAAG;AAChE,IAAA,CAAA,CAAE,cAAA,EAAe;AACjB,IAAA,MAAM,GAAA,GAAM,CAAA,CAAE,aAAA,CAAc,aAAA,CAAc,WAAW,CAAA;AACrD,IAAA,IAAI,GAAA,MAAS,KAAA,EAAM;AAAA,EACrB;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAQ,KAAA;AAAA,MACR,KAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,IAAA,EAAK,OAAA;AAAA,MACL,SAAA;AAAA,MACA,SAAA;AAAA,MAEA,QAAA,kBAAA,GAAA,CAAC,SAAI,SAAA,EAAW,qBAAA,IAAyB,WAAW,cAAA,GAAiB,EAAA,CAAA,EAAK,eAAe,gBAAA,EACvF,QAAA,kBAAA,GAAA;AAAA,QAAC,YAAA;AAAA,QAAA;AAAA,UACC,KAAA,EAAO,GAAA;AAAA,UACP,QAAA,EAAU,MAAA;AAAA,UACV,MAAA;AAAA,UACA,UAAA;AAAA,UACA,GAAA;AAAA,UACA,GAAA;AAAA,UACA,QAAA;AAAA,UACA,WAAW,KAAA,IAAS;AAAA;AAAA,OACtB,EACF;AAAA;AAAA,GACF;AAEJ","file":"time-field.js","sourcesContent":["'use client';\n\nimport './date-picker.css';\nimport type { PointerEvent } from 'react';\nimport { FieldShell, type DateFieldBaseProps } from './field-shell';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { TimeSegments } from './time-core';\n\nexport interface TimeFieldProps extends DateFieldBaseProps {\n  /** Controlled value, canonical 'HH:mm' (24h). */\n  value?: string | null;\n  /** Uncontrolled initial value, 'HH:mm' (24h). Use instead of `value`. @default null */\n  defaultValue?: string | null;\n  /** Fires live - the instant both segments exist. */\n  onChange?: (value: string) => void;\n  /** Field label rendered above the box; also the segments' `aria-label` fallback. */\n  label?: string;\n  /** Display only; storage stays 24h. Default '24h'. */\n  format?: '24h' | '12h';\n  /** ↑/↓ step granularity in minutes (typing is exact). Default 5. */\n  minuteStep?: number;\n  /** Lower bound 'HH:mm' - saturates, never errors. */\n  min?: string;\n  /** Upper bound 'HH:mm' - saturates, never errors. */\n  max?: string;\n}\n\nexport function TimeField({\n  value, // controlled: 'HH:mm' | null\n  defaultValue = null,\n  onChange,\n  label,\n  format = '24h',\n  minuteStep = 5,\n  min,\n  max,\n  required = false,\n  invalid = false,\n  message,\n  disabled = false,\n  className = '',\n  htmlProps,\n}: TimeFieldProps) {\n  const [val, commit] = useControllable(value, defaultValue, onChange);\n\n  function onBoxPointerDown(e: PointerEvent<HTMLDivElement>) {\n    if (disabled || (e.target as HTMLElement).closest('.tsg__seg')) return;\n    e.preventDefault();\n    const seg = e.currentTarget.querySelector('.tsg__seg') as HTMLElement | null;\n    if (seg) seg.focus();\n  }\n\n  return (\n    <FieldShell\n      variant=\"tfd\"\n      label={label}\n      required={required}\n      invalid={invalid}\n      message={message}\n      icon=\"clock\"\n      className={className}\n      htmlProps={htmlProps}\n    >\n      <div className={'fld__input tfd__box' + (disabled ? ' is-disabled' : '')} onPointerDown={onBoxPointerDown}>\n        <TimeSegments\n          value={val}\n          onCommit={commit}\n          format={format}\n          minuteStep={minuteStep}\n          min={min}\n          max={max}\n          disabled={disabled}\n          ariaLabel={label || 'Time'}\n        />\n      </div>\n    </FieldShell>\n  );\n}\n"]}

package/dist/timing-7JA_zQHP.d.ts

@@ -0,0 +1,27 @@
+import { D as DurationToken, E as EaseToken } from './motion-scale-Canq4stZ.js';
+
+type TimingDirection = 'open' | 'close';
+/** One token for both directions, or split per direction; an omitted direction keeps its default. */
+type DirectionalToken<Token extends string> = Token | {
+    [D in TimingDirection]?: Token;
+};
+/** Timing of an open/close transition, constrained to the motion token vocabulary -
+ *  see DurationToken / EaseToken for what each token means. */
+interface AnimationTiming {
+    /** Duration token(s); an omitted field or direction keeps the component's default. */
+    duration?: DirectionalToken<DurationToken>;
+    /** Ease token(s); an omitted field or direction keeps the component's default. */
+    ease?: DirectionalToken<EaseToken>;
+}
+/** The `animation` prop shape: tokens to retime, omit for the component's defaults, or
+ *  `null` to disable the transition entirely (it plays instantly). */
+type DisableableAnimation = AnimationTiming | null;
+/** Extend this to expose the timing API on a component; redeclare `animation`
+ *  to document the component's own default tokens. */
+interface TimingProps {
+    /** Transition timing - motion tokens only, each field a single token or { open, close };
+     *  `null` disables the transition (it plays instantly). */
+    animation?: DisableableAnimation;
+}
+
+export type { AnimationTiming as A, DisableableAnimation as D, TimingProps as T, DirectionalToken as a };