twico-ui 1.29.0 → 1.30.0

package/dist/index.d.cts

@@ -1536,6 +1536,10 @@ interface Option {
   label: string;
   /** Optional second line shown under the label. */
   description?: string;
+  /** #326: leading icon/swatch node, rendered before the label (mirrors a Command item's icon). */
+  icon?: React.ReactNode;
+  /** #326: trailing hint node, right-aligned after the label (e.g. a code, shortcut, or badge). */
+  hint?: React.ReactNode;
   /** Disable this option — not selectable, skipped by keyboard navigation. */
   disabled?: boolean;
 }
@@ -1601,6 +1605,10 @@ interface ComboboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>
    *  ellipsis — useful when options share a long prefix and differ only in a truncated tail. Takes precedence
    *  over `virtualized` (wrapped rows aren't a fixed height). @default false */
   wrapOptions?: boolean;
+  /** #326: render a custom option row body (twico keeps the checkmark, keyboard nav, and ARIA wiring). For
+   *  lightweight cases prefer the additive `icon`/`hint` fields on an option instead. Disables `virtualized`
+   *  (custom rows aren't a fixed height). */
+  renderOption?: (option: ComboboxOption, state: { selected: boolean; active: boolean }) => React.ReactNode;
   /** Composed with the field's open-on-focus behavior — your handler runs first. */
   onFocus?: React.FocusEventHandler<HTMLInputElement>;
   /** Composed with the field's keyboard navigation (Arrows/Enter/Escape) — your handler runs first; call `event.preventDefault()` to suppress it. */
@@ -2704,6 +2712,10 @@ interface MultiSelectProps extends Omit<React.InputHTMLAttributes<HTMLInputEleme
   virtualized?: boolean;
   /** Extra option rows rendered above/below the viewport when `virtualized`, to smooth fast scrolling. @default 8 */
   overscan?: number;
+  /** #326: render a custom option row body (twico keeps the checkbox, keyboard nav, and ARIA wiring). For
+   *  lightweight cases prefer the additive `icon`/`hint` fields on an option instead. Disables `virtualized`
+   *  (custom rows aren't a fixed height). */
+  renderOption?: (option: MultiSelectOption, state: { selected: boolean; active: boolean }) => React.ReactNode;
   /** Composed with the field's open-on-focus behavior — your handler runs first. */
   onFocus?: React.FocusEventHandler<HTMLInputElement>;
   /** Composed with the field's keyboard navigation (Arrows/Enter/Escape/Backspace) — your handler runs first; call `event.preventDefault()` to suppress it. */
@@ -3011,6 +3023,10 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "
   rightAddon?: React.ReactNode;
   /** With `maxLength`, render a live `current / max` character counter on the hint/error line; danger-toned near the limit. @default false */
   showCount?: boolean;
+  /** #328: show a trailing clear (X) button when the field is non-empty; clicking it empties the field and
+   *  fires `onChange` with the empty value (controlled callers update). Composes with `rightIcon` and, for
+   *  `type="password"`, sits alongside the reveal-eye toggle. @default false */
+  clearable?: boolean;
 }
 
 declare function Input(props: InputProps): React.JSX.Element;
@@ -3383,6 +3399,10 @@ interface SelectProps extends Omit<React.HTMLAttributes<HTMLButtonElement>, "onC
   virtualized?: boolean;
   /** Extra option rows rendered above/below the viewport when `virtualized`, to smooth fast scrolling. @default 8 */
   overscan?: number;
+  /** #326: render a custom option row body (twico keeps the checkmark, keyboard nav, and ARIA wiring). For
+   *  lightweight cases prefer the additive `icon`/`hint` fields on an option instead. Disables `virtualized`
+   *  (custom rows aren't a fixed height). */
+  renderOption?: (option: SelectOption, state: { selected: boolean; active: boolean }) => React.ReactNode;
 }
 
 /** Alias of the shared {@link Option} type (kept for backward-compatible imports). */
@@ -3761,6 +3781,9 @@ interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement
   maxRows?: number;
   /** With `maxLength`, render a live `current / max` character counter; danger-toned near the limit. @default false */
   showCount?: boolean;
+  /** #328: show a trailing clear (X) button (top-inline-end, clear of the resize handle) when non-empty;
+   *  clicking it empties the field and fires `onChange` with the empty value. @default false */
+  clearable?: boolean;
 }
 
 /** Forwards `ref` to the inner `<textarea>`. */

package/dist/index.d.ts

@@ -1536,6 +1536,10 @@ interface Option {
   label: string;
   /** Optional second line shown under the label. */
   description?: string;
+  /** #326: leading icon/swatch node, rendered before the label (mirrors a Command item's icon). */
+  icon?: React.ReactNode;
+  /** #326: trailing hint node, right-aligned after the label (e.g. a code, shortcut, or badge). */
+  hint?: React.ReactNode;
   /** Disable this option — not selectable, skipped by keyboard navigation. */
   disabled?: boolean;
 }
@@ -1601,6 +1605,10 @@ interface ComboboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>
    *  ellipsis — useful when options share a long prefix and differ only in a truncated tail. Takes precedence
    *  over `virtualized` (wrapped rows aren't a fixed height). @default false */
   wrapOptions?: boolean;
+  /** #326: render a custom option row body (twico keeps the checkmark, keyboard nav, and ARIA wiring). For
+   *  lightweight cases prefer the additive `icon`/`hint` fields on an option instead. Disables `virtualized`
+   *  (custom rows aren't a fixed height). */
+  renderOption?: (option: ComboboxOption, state: { selected: boolean; active: boolean }) => React.ReactNode;
   /** Composed with the field's open-on-focus behavior — your handler runs first. */
   onFocus?: React.FocusEventHandler<HTMLInputElement>;
   /** Composed with the field's keyboard navigation (Arrows/Enter/Escape) — your handler runs first; call `event.preventDefault()` to suppress it. */
@@ -2704,6 +2712,10 @@ interface MultiSelectProps extends Omit<React.InputHTMLAttributes<HTMLInputEleme
   virtualized?: boolean;
   /** Extra option rows rendered above/below the viewport when `virtualized`, to smooth fast scrolling. @default 8 */
   overscan?: number;
+  /** #326: render a custom option row body (twico keeps the checkbox, keyboard nav, and ARIA wiring). For
+   *  lightweight cases prefer the additive `icon`/`hint` fields on an option instead. Disables `virtualized`
+   *  (custom rows aren't a fixed height). */
+  renderOption?: (option: MultiSelectOption, state: { selected: boolean; active: boolean }) => React.ReactNode;
   /** Composed with the field's open-on-focus behavior — your handler runs first. */
   onFocus?: React.FocusEventHandler<HTMLInputElement>;
   /** Composed with the field's keyboard navigation (Arrows/Enter/Escape/Backspace) — your handler runs first; call `event.preventDefault()` to suppress it. */
@@ -3011,6 +3023,10 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "
   rightAddon?: React.ReactNode;
   /** With `maxLength`, render a live `current / max` character counter on the hint/error line; danger-toned near the limit. @default false */
   showCount?: boolean;
+  /** #328: show a trailing clear (X) button when the field is non-empty; clicking it empties the field and
+   *  fires `onChange` with the empty value (controlled callers update). Composes with `rightIcon` and, for
+   *  `type="password"`, sits alongside the reveal-eye toggle. @default false */
+  clearable?: boolean;
 }
 
 declare function Input(props: InputProps): React.JSX.Element;
@@ -3383,6 +3399,10 @@ interface SelectProps extends Omit<React.HTMLAttributes<HTMLButtonElement>, "onC
   virtualized?: boolean;
   /** Extra option rows rendered above/below the viewport when `virtualized`, to smooth fast scrolling. @default 8 */
   overscan?: number;
+  /** #326: render a custom option row body (twico keeps the checkmark, keyboard nav, and ARIA wiring). For
+   *  lightweight cases prefer the additive `icon`/`hint` fields on an option instead. Disables `virtualized`
+   *  (custom rows aren't a fixed height). */
+  renderOption?: (option: SelectOption, state: { selected: boolean; active: boolean }) => React.ReactNode;
 }
 
 /** Alias of the shared {@link Option} type (kept for backward-compatible imports). */
@@ -3761,6 +3781,9 @@ interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement
   maxRows?: number;
   /** With `maxLength`, render a live `current / max` character counter; danger-toned near the limit. @default false */
   showCount?: boolean;
+  /** #328: show a trailing clear (X) button (top-inline-end, clear of the resize handle) when non-empty;
+   *  clicking it empties the field and fires `onChange` with the empty value. @default false */
+  clearable?: boolean;
 }
 
 /** Forwards `ref` to the inner `<textarea>`. */

package/dist/index.mjs

@@ -5650,6 +5650,10 @@ var COMBO_CSS = `
 .twc-opt__main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
 .twc-opt__label { line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .twc-opt__desc { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* #326: optional leading icon/swatch + trailing (right-aligned) hint on an option. */
+.twc-opt__icon { flex: none; display: inline-flex; align-items: center; color: var(--color-text-muted); }
+.twc-opt__icon svg { width: 16px; height: 16px; }
+.twc-opt__hint { flex: none; margin-inline-start: auto; padding-inline-start: var(--space-2); color: var(--color-text-muted); font-size: var(--text-xs); white-space: nowrap; }
 /* #300: wrapOptions \u2014 let long labels/descriptions wrap onto multiple lines instead of truncating.
    overflow-wrap: anywhere also breaks a single very long token so it can't overflow the popover edge. */
 .twc-opt[data-wrap="true"] { align-items: flex-start; }
@@ -5717,6 +5721,7 @@ function Combobox({
   virtualized: virtualizedProp = false,
   overscan = 8,
   wrapOptions = false,
+  renderOption,
   id,
   className = "",
   onFocus,
@@ -5724,8 +5729,8 @@ function Combobox({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-combo-styles", COMBO_CSS);
-  if (virtualizedProp && wrapOptions) warnOnce("combobox-wrap-virtualized", "twico-ui Combobox: `wrapOptions` disables `virtualized` \u2014 wrapped option rows aren't a fixed height.");
-  const virtualized = virtualizedProp && !wrapOptions;
+  if (virtualizedProp && (wrapOptions || renderOption)) warnOnce("combobox-var-height-virtualized", "twico-ui Combobox: `wrapOptions`/`renderOption` disable `virtualized` \u2014 those rows aren't a fixed height.");
+  const virtualized = virtualizedProp && !wrapOptions && !renderOption;
   const groups = React51__default.useMemo(() => normalizeGroups(options), [options]);
   const flat = React51__default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
   const autoId = React51__default.useId();
@@ -5896,7 +5901,7 @@ function Combobox({
   const activeId = open && visible[active] ? optionId(active) : void 0;
   const descId = `${fieldId}-desc`;
   const describedBy = error || hint ? descId : void 0;
-  const renderOption = (o, idx) => {
+  const renderRow = (o, idx) => {
     const isSel = o.value === current;
     return /* @__PURE__ */ jsxs(
       "button",
@@ -5919,9 +5924,13 @@ function Combobox({
         onMouseDown: (e) => e.preventDefault(),
         onClick: () => commit(o.value),
         children: [
-          /* @__PURE__ */ jsxs("span", { className: "twc-opt__main", children: [
-            /* @__PURE__ */ jsx("span", { className: "twc-opt__label", children: o.label }),
-            o.description ? /* @__PURE__ */ jsx("span", { className: "twc-opt__desc", children: o.description }) : null
+          renderOption ? /* @__PURE__ */ jsx("span", { className: "twc-opt__main", children: renderOption(o, { selected: isSel, active: idx === active }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            o.icon != null ? /* @__PURE__ */ jsx("span", { className: "twc-opt__icon", "aria-hidden": "true", children: o.icon }) : null,
+            /* @__PURE__ */ jsxs("span", { className: "twc-opt__main", children: [
+              /* @__PURE__ */ jsx("span", { className: "twc-opt__label", children: o.label }),
+              o.description ? /* @__PURE__ */ jsx("span", { className: "twc-opt__desc", children: o.description }) : null
+            ] }),
+            o.hint != null ? /* @__PURE__ */ jsx("span", { className: "twc-opt__hint", children: o.hint }) : null
           ] }),
           isSel ? /* @__PURE__ */ jsx("span", { className: "twc-opt__check", "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.6", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) }) }) : null
         ]
@@ -5943,14 +5952,14 @@ function Combobox({
     "Loading\u2026"
   ] }) : visible.length === 0 ? /* @__PURE__ */ jsx("div", { className: "twc-pop__empty", children: emptyText }) : virtualized ? /* @__PURE__ */ jsxs(Fragment, { children: [
     vTop > 0 ? /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { height: vTop } }) : null,
-    vShown.map((r2) => r2.kind === "group" ? /* @__PURE__ */ jsx("div", { className: "twc-pop__group", children: r2.label }, `g${r2.gi}`) : renderOption(r2.o, r2.idx)),
+    vShown.map((r2) => r2.kind === "group" ? /* @__PURE__ */ jsx("div", { className: "twc-pop__group", children: r2.label }, `g${r2.gi}`) : renderRow(r2.o, r2.idx)),
     vBottom > 0 ? /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { height: vBottom } }) : null
   ] }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxs(React51__default.Fragment, { children: [
     g.group ? /* @__PURE__ */ jsx("div", { className: "twc-pop__group", children: g.group }) : null,
     g.options.map((o) => {
       counter += 1;
       const idx = counter;
-      return renderOption(o, idx);
+      return renderRow(o, idx);
     })
   ] }, gi)) });
   const RD = { createPortal: typeof createPortal === "function" ? createPortal : typeof window !== "undefined" && window.ReactDOM && window.ReactDOM.createPortal };
@@ -6487,6 +6496,10 @@ var SELECT_CSS = `
 .twc-opt__main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
 .twc-opt__label { line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .twc-opt__desc { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* #326: optional leading icon/swatch + trailing (right-aligned) hint on an option. */
+.twc-opt__icon { flex: none; display: inline-flex; align-items: center; color: var(--color-text-muted); }
+.twc-opt__icon svg { width: 16px; height: 16px; }
+.twc-opt__hint { flex: none; margin-inline-start: auto; padding-inline-start: var(--space-2); color: var(--color-text-muted); font-size: var(--text-xs); white-space: nowrap; }
 .twc-opt__check { flex: none; color: var(--color-primary); display: inline-flex; }
 .twc-opt__check svg { width: 16px; height: 16px; }
 .twc-pop__empty { padding: 14px 12px; text-align: center; font-size: var(--text-sm); color: var(--color-text-subtle); }
@@ -6547,8 +6560,9 @@ function Select({
   loading = false,
   emptyText = "No results found",
   name,
-  virtualized = false,
+  virtualized: virtualizedProp = false,
   overscan = 8,
+  renderOption,
   id,
   className = "",
   onClick,
@@ -6556,6 +6570,8 @@ function Select({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-select-styles", SELECT_CSS);
+  if (virtualizedProp && renderOption) warnOnce("select-renderoption-virtualized", "twico-ui Select: `renderOption` disables `virtualized` \u2014 custom rows aren't a fixed height.");
+  const virtualized = virtualizedProp && !renderOption;
   const bufferRef = React51__default.useRef("");
   const bufferTimerRef = React51__default.useRef(null);
   const groups = React51__default.useMemo(() => normalizeGroups2(options), [options]);
@@ -6761,7 +6777,7 @@ function Select({
   const activeId = open && visible[active] ? optionId(active) : void 0;
   const descId = `${fieldId}-desc`;
   const describedBy = error || hint ? descId : void 0;
-  const renderOption = (o, idx) => {
+  const renderRow = (o, idx) => {
     const isSel = o.value === current;
     return /* @__PURE__ */ jsxs(
       "button",
@@ -6783,9 +6799,13 @@ function Select({
         },
         onClick: () => commit(o.value),
         children: [
-          /* @__PURE__ */ jsxs("span", { className: "twc-opt__main", children: [
-            /* @__PURE__ */ jsx("span", { className: "twc-opt__label", children: o.label }),
-            o.description ? /* @__PURE__ */ jsx("span", { className: "twc-opt__desc", children: o.description }) : null
+          renderOption ? /* @__PURE__ */ jsx("span", { className: "twc-opt__main", children: renderOption(o, { selected: isSel, active: idx === active }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            o.icon != null ? /* @__PURE__ */ jsx("span", { className: "twc-opt__icon", "aria-hidden": "true", children: o.icon }) : null,
+            /* @__PURE__ */ jsxs("span", { className: "twc-opt__main", children: [
+              /* @__PURE__ */ jsx("span", { className: "twc-opt__label", children: o.label }),
+              o.description ? /* @__PURE__ */ jsx("span", { className: "twc-opt__desc", children: o.description }) : null
+            ] }),
+            o.hint != null ? /* @__PURE__ */ jsx("span", { className: "twc-opt__hint", children: o.hint }) : null
           ] }),
           isSel ? /* @__PURE__ */ jsx("span", { className: "twc-opt__check", "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.6", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) }) }) : null
         ]
@@ -6833,14 +6853,14 @@ function Select({
       "Loading\u2026"
     ] }) : visible.length === 0 ? /* @__PURE__ */ jsx("div", { className: "twc-pop__empty", children: emptyText }) : virtualized ? /* @__PURE__ */ jsxs(Fragment, { children: [
       vTop > 0 ? /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { height: vTop } }) : null,
-      vShown.map((r2) => r2.kind === "group" ? /* @__PURE__ */ jsx("div", { className: "twc-pop__group", children: r2.label }, `g${r2.gi}`) : renderOption(r2.o, r2.idx)),
+      vShown.map((r2) => r2.kind === "group" ? /* @__PURE__ */ jsx("div", { className: "twc-pop__group", children: r2.label }, `g${r2.gi}`) : renderRow(r2.o, r2.idx)),
       vBottom > 0 ? /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { height: vBottom } }) : null
     ] }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxs(React51__default.Fragment, { children: [
       g.group ? /* @__PURE__ */ jsx("div", { className: "twc-pop__group", children: g.group }) : null,
       g.options.map((o) => {
         counter += 1;
         const idx = counter;
-        return renderOption(o, idx);
+        return renderRow(o, idx);
       })
     ] }, gi)) }),
     /* @__PURE__ */ jsx("div", { className: "twc-sel__sr", role: "status", "aria-live": "polite", children: loading ? "Loading\u2026" : visible.length === 0 ? emptyText : `${visible.length} result${visible.length === 1 ? "" : "s"}` })
@@ -7144,6 +7164,11 @@ var INPUT_EXTRA_CSS = `
 .twc-input__reveal:hover { background: var(--color-surface-sunken); color: var(--color-text); }
 .twc-input__reveal:focus-visible { outline: none; box-shadow: var(--ring); }
 .twc-input__reveal svg { width: 17px; height: 17px; }
+/* #328: trailing clear (X) button \u2014 mirrors the reveal toggle; sits alongside rightIcon / the password eye. */
+.twc-input__clear { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: none; background: transparent; color: var(--color-text-subtle); cursor: pointer; border-radius: var(--radius-sm); flex: none; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
+.twc-input__clear:hover { background: var(--color-surface-sunken); color: var(--color-text); }
+.twc-input__clear:focus-visible { outline: none; box-shadow: var(--ring); }
+.twc-input__clear svg { width: 15px; height: 15px; }
 .twc-input__addon { align-self: stretch; display: inline-flex; align-items: center; padding-inline: var(--space-3);
   background: var(--color-surface-sunken); color: var(--color-text-muted); font-size: var(--text-sm);
   font-weight: var(--font-semibold); white-space: nowrap; flex: none; }
@@ -7165,6 +7190,7 @@ function Input({
   leftAddon,
   rightAddon,
   showCount = false,
+  clearable = false,
   type = "text",
   disabled = false,
   id,
@@ -7186,8 +7212,25 @@ function Input({
   const near = showCounter && count >= Math.floor(max * 0.9);
   const handleChange = (e) => {
     rest.onChange?.(e);
-    if (showCount && !countControlled) setLen(e.target.value.length);
+    if ((showCount || clearable) && !countControlled) setLen(e.target.value.length);
   };
+  const inputRef = React51__default.useRef(null);
+  const userRef = rest.ref;
+  const setRef = React51__default.useCallback((node) => {
+    inputRef.current = node;
+    if (typeof userRef === "function") userRef(node);
+    else if (userRef && typeof userRef === "object") userRef.current = node;
+  }, [userRef]);
+  const clearField = () => {
+    const el = inputRef.current;
+    if (!el) return;
+    const setter = typeof HTMLInputElement !== "undefined" && Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
+    if (setter) setter.call(el, "");
+    else el.value = "";
+    el.dispatchEvent(new Event("input", { bubbles: true }));
+    el.focus();
+  };
+  const showClear = clearable && count > 0 && !disabled && !rest.readOnly;
   const ariaInvalid = invalid ? true : rest["aria-invalid"] ?? void 0;
   const describedBy = [error || hint ? descId : null, showCounter ? countId : null, rest["aria-describedby"]].filter(Boolean).join(" ") || void 0;
   const isPassword = type === "password";
@@ -7234,11 +7277,16 @@ function Input({
           required: required || void 0,
           "aria-required": required || void 0,
           ...rest,
+          ref: setRef,
           onChange: handleChange,
           "aria-invalid": ariaInvalid,
           "aria-describedby": describedBy
         }
       ),
+      showClear ? /* @__PURE__ */ jsx("button", { type: "button", className: "twc-input__clear", "aria-label": "Clear", tabIndex: 0, onMouseDown: (e) => e.preventDefault(), onClick: clearField, children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+      ] }) }) : null,
       suffix,
       rightAddon != null ? /* @__PURE__ */ jsx("span", { className: "twc-input__addon twc-input__addon--end", children: rightAddon }) : null
     ] }),
@@ -7326,6 +7374,10 @@ var MULTI_CSS = `
 .twc-opt__main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
 .twc-opt__label { line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .twc-opt__desc { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* #326: optional leading icon/swatch + trailing (right-aligned) hint on an option. */
+.twc-opt__icon { flex: none; display: inline-flex; align-items: center; color: var(--color-text-muted); }
+.twc-opt__icon svg { width: 16px; height: 16px; }
+.twc-opt__hint { flex: none; margin-inline-start: auto; padding-inline-start: var(--space-2); color: var(--color-text-muted); font-size: var(--text-xs); white-space: nowrap; }
 .twc-pop__empty { padding: 14px 12px; text-align: center; font-size: var(--text-sm); color: var(--color-text-subtle); }
 .twc-opt[data-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
 .twc-pop__loading { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 14px 12px; font-size: var(--text-sm); color: var(--color-text-muted); }
@@ -7387,8 +7439,9 @@ function MultiSelect({
   maxTagCount,
   filter,
   onInputChange,
-  virtualized = false,
+  virtualized: virtualizedProp = false,
   overscan = 8,
+  renderOption,
   id,
   className = "",
   onFocus,
@@ -7396,6 +7449,8 @@ function MultiSelect({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-ms-styles", MULTI_CSS);
+  if (virtualizedProp && renderOption) warnOnce("multiselect-renderoption-virtualized", "twico-ui MultiSelect: `renderOption` disables `virtualized` \u2014 custom rows aren't a fixed height.");
+  const virtualized = virtualizedProp && !renderOption;
   const groups = React51__default.useMemo(() => normalizeGroups3(options), [options]);
   const flat = React51__default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
   const autoId = React51__default.useId();
@@ -7555,7 +7610,7 @@ function MultiSelect({
   const activeId = open && visible[active] ? optionId(active) : void 0;
   const descId = `${fieldId}-desc`;
   const describedBy = error || hint ? descId : void 0;
-  const renderOption = (o, idx) => {
+  const renderRow = (o, idx) => {
     const isSel = selected.includes(o.value);
     const optDisabled = isOptDisabled(o);
     return /* @__PURE__ */ jsxs(
@@ -7579,9 +7634,13 @@ function MultiSelect({
         onClick: () => toggle(o.value),
         children: [
           /* @__PURE__ */ jsx("span", { className: "twc-opt__box", "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) }) }),
-          /* @__PURE__ */ jsxs("span", { className: "twc-opt__main", children: [
-            /* @__PURE__ */ jsx("span", { className: "twc-opt__label", children: o.label }),
-            o.description ? /* @__PURE__ */ jsx("span", { className: "twc-opt__desc", children: o.description }) : null
+          renderOption ? /* @__PURE__ */ jsx("span", { className: "twc-opt__main", children: renderOption(o, { selected: isSel, active: idx === active }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            o.icon != null ? /* @__PURE__ */ jsx("span", { className: "twc-opt__icon", "aria-hidden": "true", children: o.icon }) : null,
+            /* @__PURE__ */ jsxs("span", { className: "twc-opt__main", children: [
+              /* @__PURE__ */ jsx("span", { className: "twc-opt__label", children: o.label }),
+              o.description ? /* @__PURE__ */ jsx("span", { className: "twc-opt__desc", children: o.description }) : null
+            ] }),
+            o.hint != null ? /* @__PURE__ */ jsx("span", { className: "twc-opt__hint", children: o.hint }) : null
           ] })
         ]
       },
@@ -7611,14 +7670,14 @@ function MultiSelect({
         "Loading\u2026"
       ] }) : visible.length === 0 ? /* @__PURE__ */ jsx("div", { className: "twc-pop__empty", children: emptyText }) : virtualized ? /* @__PURE__ */ jsxs(Fragment, { children: [
         vTop > 0 ? /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { height: vTop } }) : null,
-        vShown.map((r2) => r2.kind === "group" ? /* @__PURE__ */ jsx("div", { className: "twc-pop__group", children: r2.label }, `g${r2.gi}`) : renderOption(r2.o, r2.idx)),
+        vShown.map((r2) => r2.kind === "group" ? /* @__PURE__ */ jsx("div", { className: "twc-pop__group", children: r2.label }, `g${r2.gi}`) : renderRow(r2.o, r2.idx)),
         vBottom > 0 ? /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { height: vBottom } }) : null
       ] }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxs(React51__default.Fragment, { children: [
         g.group ? /* @__PURE__ */ jsx("div", { className: "twc-pop__group", children: g.group }) : null,
         g.options.map((o) => {
           counter += 1;
           const idx = counter;
-          return renderOption(o, idx);
+          return renderRow(o, idx);
         })
       ] }, gi))
     }
@@ -8202,6 +8261,11 @@ var DT_CSS = `
   font-size: var(--text-sm); color: var(--color-text); width: 150px; }
 .twc-dt__search input:focus, .twc-dt__search input:focus-visible { outline: none; box-shadow: none; }
 .twc-dt__search input::placeholder { color: var(--color-text-subtle); }
+/* #327: trailing clear (X) for the built-in search inputs (quick-search + column-menu search). */
+.twc-dt__search-clear { border: none; background: transparent; color: var(--color-text-subtle); cursor: pointer; display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border-radius: var(--radius-sm); flex: none; }
+.twc-dt__search-clear:hover { color: var(--color-text); background: var(--color-surface-sunken); }
+.twc-dt__search-clear:focus-visible { outline: none; box-shadow: var(--ring); }
+.twc-dt__search-clear svg { width: 14px; height: 14px; }
 .twc-dt__tlabel { display: inline; }
 /* Narrow grid: collapse the toolbar to icon-only buttons (labels survive as
    hover tooltips via data-tip) and let the search flex so nothing wraps. */
@@ -9570,6 +9634,8 @@ function Datatable({
   const colMenuRef = React51__default.useRef(null);
   const rowMenuRef = React51__default.useRef(null);
   const exportMenuRef = React51__default.useRef(null);
+  const quickSearchRef = React51__default.useRef(null);
+  const colSearchRef = React51__default.useRef(null);
   function focusFirstItem(container) {
     if (!container) return;
     const first = container.querySelector('[role="menuitem"]:not([disabled])');
@@ -11584,7 +11650,11 @@ function Datatable({
       ] }) : null,
       searchable ? /* @__PURE__ */ jsxs("div", { className: "twc-dt__search", children: [
         /* @__PURE__ */ jsx(Svg, { d: I.search }),
-        /* @__PURE__ */ jsx("input", { placeholder: "Search\u2026", "aria-label": "Search rows", value: quick, onChange: (e) => commitQuick(e.target.value) })
+        /* @__PURE__ */ jsx("input", { ref: quickSearchRef, placeholder: "Search\u2026", "aria-label": "Search rows", value: quick, onChange: (e) => commitQuick(e.target.value) }),
+        quick ? /* @__PURE__ */ jsx("button", { type: "button", className: "twc-dt__search-clear", "aria-label": "Clear search", onMouseDown: (e) => e.preventDefault(), onClick: () => {
+          commitQuick("");
+          quickSearchRef.current?.focus();
+        }, children: /* @__PURE__ */ jsx(Svg, { d: I.x }) }) : null
       ] }) : null
     ] }),
     !pivotActive && activeGroupBy.length ? /* @__PURE__ */ jsxs("div", { className: "twc-dt__groupbar", children: [
@@ -12177,7 +12247,11 @@ function Datatable({
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "twc-dt__col-search", children: [
         /* @__PURE__ */ jsx(Svg, { d: I.search }),
-        /* @__PURE__ */ jsx("input", { autoFocus: true, placeholder: "Find column\u2026", "aria-label": "Find column", value: colQuery, onChange: (e) => setColQuery(e.target.value) })
+        /* @__PURE__ */ jsx("input", { ref: colSearchRef, autoFocus: true, placeholder: "Find column\u2026", "aria-label": "Find column", value: colQuery, onChange: (e) => setColQuery(e.target.value) }),
+        colQuery ? /* @__PURE__ */ jsx("button", { type: "button", className: "twc-dt__search-clear", "aria-label": "Clear column search", onMouseDown: (e) => e.preventDefault(), onClick: () => {
+          setColQuery("");
+          colSearchRef.current?.focus();
+        }, children: /* @__PURE__ */ jsx(Svg, { d: I.x }) }) : null
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "twc-dt__col-list", children: [
         rowNumMatch ? /* @__PURE__ */ jsxs("div", { className: "twc-dt__col-row", onClick: () => setShowRowNum((v) => !v), children: [
@@ -12547,6 +12621,7 @@ function Datatable({
                   Input,
                   {
                     size: "sm",
+                    clearable: true,
                     type: filterTypeOf(col) === "number" ? "number" : "text",
                     placeholder: "Value",
                     value: f.value,
@@ -17635,6 +17710,12 @@ var TEXTAREA_CSS = `
 .twc-textarea__el:disabled { background: var(--color-surface-sunken); opacity: 0.7; cursor: not-allowed; }
 .twc-textarea__el[data-readonly] { background: var(--color-surface-sunken); }
 .twc-textarea__el[data-autosize="true"] { resize: none; overflow: hidden; }
+/* #328: clearable (X). Wrap positions the button top-inline-end so it dodges the bottom-right resize handle. */
+.twc-textarea__wrap { position: relative; display: block; }
+.twc-textarea__clear { position: absolute; top: 6px; inset-inline-end: 8px; display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: none; background: var(--color-surface); color: var(--color-text-subtle); cursor: pointer; border-radius: var(--radius-sm); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
+.twc-textarea__clear:hover { background: var(--color-surface-sunken); color: var(--color-text); }
+.twc-textarea__clear:focus-visible { outline: none; box-shadow: var(--ring); }
+.twc-textarea__clear svg { width: 15px; height: 15px; }
 .twc-field__footer { display: flex; align-items: center; gap: var(--space-2); }
 .twc-field__count { margin-inline-start: auto; font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; flex: none; }
 .twc-field__count[data-danger="true"] { color: var(--color-danger-subtle-fg); }
@@ -17651,6 +17732,7 @@ var Textarea = React51__default.forwardRef(function Textarea2({
   minRows,
   maxRows,
   showCount = false,
+  clearable = false,
   disabled = false,
   id,
   className = "",
@@ -17697,8 +17779,18 @@ var Textarea = React51__default.forwardRef(function Textarea2({
   };
   const handleChange = (e) => {
     rest.onChange?.(e);
-    if (showCount && !countControlled) setLen(e.target.value.length);
+    if ((showCount || clearable) && !countControlled) setLen(e.target.value.length);
+  };
+  const clearField = () => {
+    const el = innerRef.current;
+    if (!el) return;
+    const setter = typeof HTMLTextAreaElement !== "undefined" && Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, "value")?.set;
+    if (setter) setter.call(el, "");
+    else el.value = "";
+    el.dispatchEvent(new Event("input", { bubbles: true }));
+    el.focus();
   };
+  const showClear = clearable && count > 0 && !disabled && !rest.readOnly;
   const ariaInvalid = invalid ? true : rest["aria-invalid"] ?? void 0;
   const describedBy = [error || hint ? descId : null, showCounter ? countId : null, rest["aria-describedby"]].filter(Boolean).join(" ") || void 0;
   return /* @__PURE__ */ jsxs("div", { className: `twc-field ${className}`, children: [
@@ -17707,27 +17799,33 @@ var Textarea = React51__default.forwardRef(function Textarea2({
       label,
       required ? /* @__PURE__ */ jsx("span", { className: "twc-field__req", children: "*" }) : null
     ] }) : null,
-    /* @__PURE__ */ jsx(
-      "textarea",
-      {
-        ref: setRef,
-        id: fieldId,
-        className: "twc-textarea__el",
-        "data-size": size,
-        "data-tone": tone,
-        "data-autosize": autosize || void 0,
-        "data-readonly": rest.readOnly || void 0,
-        rows: autosize ? minRows ?? rows : rows,
-        disabled,
-        required: required || void 0,
-        "aria-required": required || void 0,
-        ...rest,
-        onInput: handleInput,
-        onChange: handleChange,
-        "aria-invalid": ariaInvalid,
-        "aria-describedby": describedBy
-      }
-    ),
+    /* @__PURE__ */ jsxs("div", { className: "twc-textarea__wrap", children: [
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ref: setRef,
+          id: fieldId,
+          className: "twc-textarea__el",
+          "data-size": size,
+          "data-tone": tone,
+          "data-autosize": autosize || void 0,
+          "data-readonly": rest.readOnly || void 0,
+          rows: autosize ? minRows ?? rows : rows,
+          disabled,
+          required: required || void 0,
+          "aria-required": required || void 0,
+          ...rest,
+          onInput: handleInput,
+          onChange: handleChange,
+          "aria-invalid": ariaInvalid,
+          "aria-describedby": describedBy
+        }
+      ),
+      showClear ? /* @__PURE__ */ jsx("button", { type: "button", className: "twc-textarea__clear", "aria-label": "Clear", tabIndex: 0, onMouseDown: (e) => e.preventDefault(), onClick: clearField, children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+      ] }) }) : null
+    ] }),
     error || hint || showCounter ? /* @__PURE__ */ jsxs("div", { className: "twc-field__footer", children: [
       error ? /* @__PURE__ */ jsx("span", { id: descId, className: "twc-field__error", children: error }) : hint ? /* @__PURE__ */ jsx("span", { id: descId, className: "twc-field__hint", children: hint }) : null,
       showCounter ? /* @__PURE__ */ jsxs("span", { id: countId, className: "twc-field__count", "data-danger": near || void 0, "aria-live": "polite", children: [