twico-ui 1.29.0 → 1.31.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. */
@@ -1814,6 +1822,15 @@ interface DatatableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivEleme
   quickFilter?: string;
   /** Fires with the new quick-search string as the user types (and when a host sets it). */
   onQuickFilterChange?: (value: string) => void;
+  /** #330: how the filter clauses combine — `"and"` (all must match) or `"or"` (any). A single, set-wide
+   *  connective (matching MUI DataGrid's `logicOperator`), surfaced as the per-row And/Or connector in the
+   *  Filters panel and included as `filterLogic` in the `onServerChange` query. Pass this (with
+   *  `onFilterLogicChange`) to control it; omit for uncontrolled (seeded by `defaultFilterLogic`). */
+  filterLogic?: "and" | "or";
+  /** #330: initial And/Or connective when `filterLogic` is uncontrolled. @default "and" */
+  defaultFilterLogic?: "and" | "or";
+  /** #330: fires with the new connective (`"and"` | `"or"`) when the user changes the per-row And/Or select. */
+  onFilterLogicChange?: (logic: "and" | "or") => void;
   /** Custom node rendered in a **leading slot** of the toolbar row, before the built-in Columns/Filters
    *  cluster (#286) — for host controls like an "Add row" button or bulk actions. Mirrors `CardGrid`'s
    *  `toolbar` prop, so no internal-class/absolute-position hacks are needed. */
@@ -2704,6 +2721,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 +3032,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 +3408,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 +3790,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. */
@@ -1814,6 +1822,15 @@ interface DatatableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivEleme
   quickFilter?: string;
   /** Fires with the new quick-search string as the user types (and when a host sets it). */
   onQuickFilterChange?: (value: string) => void;
+  /** #330: how the filter clauses combine — `"and"` (all must match) or `"or"` (any). A single, set-wide
+   *  connective (matching MUI DataGrid's `logicOperator`), surfaced as the per-row And/Or connector in the
+   *  Filters panel and included as `filterLogic` in the `onServerChange` query. Pass this (with
+   *  `onFilterLogicChange`) to control it; omit for uncontrolled (seeded by `defaultFilterLogic`). */
+  filterLogic?: "and" | "or";
+  /** #330: initial And/Or connective when `filterLogic` is uncontrolled. @default "and" */
+  defaultFilterLogic?: "and" | "or";
+  /** #330: fires with the new connective (`"and"` | `"or"`) when the user changes the per-row And/Or select. */
+  onFilterLogicChange?: (logic: "and" | "or") => void;
   /** Custom node rendered in a **leading slot** of the toolbar row, before the built-in Columns/Filters
    *  cluster (#286) — for host controls like an "Add row" button or bulk actions. Mirrors `CardGrid`'s
    *  `toolbar` prop, so no internal-class/absolute-position hacks are needed. */
@@ -2704,6 +2721,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 +3032,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 +3408,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 +3790,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>`. */