@tangible/ui 0.0.1 → 0.0.2

package/tui-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.0.1",
-  "generated": "2026-01-31T03:28:47.490Z",
+  "version": "0.0.2",
+  "generated": "2026-02-17T04:01:35.339Z",
   "components": {
     "Accordion": {
       "props": {
@@ -354,7 +354,8 @@
         },
         "onClick": {
           "type": "MouseEventHandler<HTMLElement>",
-          "required": false
+          "required": false,
+          "description": "@deprecated Use Card.Link for interactive cards. onClick without Card.Link has no keyboard/screen-reader semantics."
         },
         "title": {
           "type": "string",
@@ -434,6 +435,59 @@
         "Notice"
       ]
     },
+    "Checkbox": {
+      "props": {
+        "disabled": {
+          "type": "boolean",
+          "required": false
+        },
+        "size": {
+          "type": "number",
+          "required": false
+        },
+        "className": {
+          "type": "string",
+          "required": false
+        },
+        "id": {
+          "type": "string",
+          "required": false
+        },
+        "style": {
+          "type": "CSSProperties",
+          "required": false
+        },
+        "title": {
+          "type": "string",
+          "required": false
+        },
+        "rel": {
+          "type": "string",
+          "required": false
+        },
+        "onClick": {
+          "type": "MouseEventHandler<HTMLInputElement>",
+          "required": false
+        },
+        "label": {
+          "type": "ReactNode",
+          "required": false
+        }
+      },
+      "cssTokens": [],
+      "story": {
+        "title": "Forms/Checkbox",
+        "tags": [
+          "autodocs",
+          "lms"
+        ]
+      },
+      "subcomponents": null,
+      "description": null,
+      "gotchas": null,
+      "examples": null,
+      "related": null
+    },
     "Chip": {
       "props": {
         "as": {
@@ -496,6 +550,11 @@
           "type": "MouseEventHandler<HTMLElement>",
           "required": false
         },
+        "value": {
+          "type": "OptionValue",
+          "required": false,
+          "description": "When inside ChipGroup, identifies this chip for selection tracking"
+        },
         "id": {
           "type": "string",
           "required": false
@@ -531,6 +590,50 @@
       "examples": null,
       "related": null
     },
+    "ChipGroup": {
+      "props": {
+        "disabled": {
+          "type": "boolean",
+          "required": false
+        },
+        "density": {
+          "type": "\"xs\" | \"sm\" | \"md\"",
+          "required": false,
+          "description": "Gap between chips. Default 'sm'."
+        },
+        "direction": {
+          "type": "\"inline\" | \"stack\"",
+          "required": false,
+          "description": "Layout direction. Default 'inline' (row wrap)."
+        },
+        "alignment": {
+          "type": "\"start\" | \"center\" | \"end\"",
+          "required": false,
+          "description": "Alignment along main axis."
+        },
+        "className": {
+          "type": "string",
+          "required": false
+        },
+        "onValueChange": {
+          "type": "((value: OptionValue) => void) | ((value: OptionValue[]) => void)",
+          "required": false
+        }
+      },
+      "cssTokens": [],
+      "story": {
+        "title": "Primitives/ChipGroup",
+        "tags": [
+          "autodocs",
+          "stable"
+        ]
+      },
+      "subcomponents": null,
+      "description": null,
+      "gotchas": null,
+      "examples": null,
+      "related": null
+    },
     "Chips": {
       "props": {
         "density": {
@@ -563,6 +666,77 @@
       "examples": null,
       "related": null
     },
+    "Combobox": {
+      "props": {
+        "size": {
+          "type": "\"sm\" | \"md\" | \"lg\"",
+          "required": false,
+          "defaultValue": "'md'",
+          "description": "Control size."
+        },
+        "value": {
+          "type": "OptionValue",
+          "required": false,
+          "description": "Controlled selected value."
+        },
+        "onValueChange": {
+          "type": "(value: OptionValue) => void",
+          "required": false,
+          "description": "Callback when selection changes.\nCalled with the option's value when user selects, or undefined when cleared.\nDoes NOT mutate inputValue — consumer should update inputValue in handler if desired."
+        },
+        "inputValue": {
+          "type": "string",
+          "required": false,
+          "description": "Controlled input value for search/filter."
+        },
+        "filterMode": {
+          "type": "\"always\" | \"when-searching\"",
+          "required": false,
+          "defaultValue": "'always'",
+          "description": "Controls filtering behavior.\n- 'always': Filter on inputValue at all times (default)\n- 'when-searching': Query is empty when not actively typing,\n  so consumers can show all options when user is browsing a selection"
+        },
+        "open": {
+          "type": "boolean",
+          "required": false,
+          "description": "Controlled open state."
+        },
+        "defaultOpen": {
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Default open state for uncontrolled usage."
+        },
+        "disabled": {
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Whether the combobox is disabled."
+        },
+        "openOnFocus": {
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "true",
+          "description": "Whether to open the listbox when the input receives focus."
+        },
+        "inputClassName": {
+          "type": "string",
+          "required": false,
+          "description": "Class name applied directly to the `<input>` element.\nUse for utilities like `tui-input-reset` that must target the input itself."
+        }
+      },
+      "cssTokens": [],
+      "story": {
+        "title": "Forms/Combobox",
+        "tags": [
+          "lms"
+        ]
+      },
+      "subcomponents": null,
+      "description": null,
+      "gotchas": null,
+      "examples": null,
+      "related": null
+    },
     "ContentIndicator": {
       "props": {
         "icon": {
@@ -642,6 +816,53 @@
       "examples": null,
       "related": null
     },
+    "Field": {
+      "props": {
+        "error": {
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the field has an error state"
+        },
+        "required": {
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the field is required"
+        },
+        "disabled": {
+          "type": "boolean",
+          "required": false,
+          "description": "Whether the field is disabled"
+        },
+        "inline": {
+          "type": "boolean",
+          "required": false,
+          "description": "Inline layout: label and control on same row"
+        },
+        "className": {
+          "type": "string",
+          "required": false,
+          "description": "Additional class name for the field wrapper"
+        }
+      },
+      "cssTokens": [
+        "--tui-field-gap",
+        "--tui-field-label-fg",
+        "--tui-field-helper-fg",
+        "--tui-field-error-fg"
+      ],
+      "story": {
+        "title": "Forms/Field",
+        "tags": [
+          "stable",
+          "lms"
+        ]
+      },
+      "subcomponents": null,
+      "description": null,
+      "gotchas": null,
+      "examples": null,
+      "related": null
+    },
     "Icon": {
       "props": {
         "name": {
@@ -833,7 +1054,7 @@
       "description": "Accessible dialog with focus trap, backdrop, and portal rendering",
       "gotchas": [
         {
-          "note": "Always provide labelledBy pointing to a heading id for accessibility"
+          "note": "Always provide aria-labelledby pointing to a heading id for accessibility"
         },
         {
           "note": "Body uses two-layer wrapper for scroll + :has() composition"
@@ -851,17 +1072,89 @@
       "examples": [
         {
           "name": "Basic",
-          "code": "<Modal isOpen={open} onClose={close} labelledBy=\"modal-title\">\n  <Modal.Head><h2 id=\"modal-title\">Title</h2></Modal.Head>\n  <Modal.Body>Content</Modal.Body>\n  <Modal.Foot><Button label=\"Close\" onClick={close} /></Modal.Foot>\n</Modal>"
+          "code": "<Modal open={open} onClose={close} aria-labelledby=\"modal-title\">\n  <Modal.Head><h2 id=\"modal-title\">Title</h2></Modal.Head>\n  <Modal.Body>Content</Modal.Body>\n  <Modal.Foot><Button label=\"Close\" onClick={close} /></Modal.Foot>\n</Modal>"
         },
         {
           "name": "With close button",
-          "code": "<Modal isOpen={open} onClose={close} showCloseButton labelledBy=\"title\">\n  <Modal.Head><h2 id=\"title\">Confirm</h2></Modal.Head>\n  <Modal.Body>Are you sure?</Modal.Body>\n</Modal>"
+          "code": "<Modal open={open} onClose={close} showCloseButton aria-labelledby=\"title\">\n  <Modal.Head><h2 id=\"title\">Confirm</h2></Modal.Head>\n  <Modal.Body>Are you sure?</Modal.Body>\n</Modal>"
         }
       ],
       "related": [
         "Notice"
       ]
     },
+    "MultiSelect": {
+      "props": {
+        "size": {
+          "type": "\"sm\" | \"md\" | \"lg\"",
+          "required": false,
+          "defaultValue": "'md'",
+          "description": "Control size."
+        },
+        "value": {
+          "type": "MultiSelectValue",
+          "required": false,
+          "description": "Controlled selected values."
+        },
+        "onValueChange": {
+          "type": "(value: MultiSelectValue) => void",
+          "required": false,
+          "description": "Callback when selection changes."
+        },
+        "open": {
+          "type": "boolean",
+          "required": false,
+          "description": "Controlled open state."
+        },
+        "defaultOpen": {
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Default open state for uncontrolled usage."
+        },
+        "disabled": {
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Whether the entire select is disabled."
+        },
+        "display": {
+          "type": "\"count\" | \"chips\"",
+          "required": false,
+          "defaultValue": "'count'",
+          "description": "Display mode for the trigger.\n- 'count': Shows \"N selected\"\n- 'chips': Shows visual chips for selected items"
+        },
+        "maxChips": {
+          "type": "number",
+          "required": false,
+          "defaultValue": "3",
+          "description": "Maximum number of chips to show before \"+N more\" badge.\nOnly applies when display='chips'."
+        },
+        "max": {
+          "type": "number",
+          "required": false,
+          "description": "Maximum number of selections allowed.\nWhen reached, unselected options become disabled."
+        },
+        "id": {
+          "type": "string",
+          "required": false,
+          "description": "Optional trigger ID override.\nUseful for Field integration via htmlFor."
+        }
+      },
+      "cssTokens": [],
+      "story": {
+        "title": "Forms/MultiSelect",
+        "tags": [
+          "autodocs",
+          "lms"
+        ]
+      },
+      "subcomponents": null,
+      "description": null,
+      "gotchas": null,
+      "examples": null,
+      "related": null
+    },
     "Notice": {
       "props": {
         "inline": {
@@ -911,11 +1204,6 @@
           "required": false,
           "description": "Controls screen-reader announcement behavior.\n- off: no live region\n- polite: role=status\n- assertive: role=alert"
         },
-        "ariaLabel": {
-          "type": "string",
-          "required": false,
-          "description": "Accessible name when there is no visible title in Notice.Head.\nOnly use when Notice.Head has no title prop - if both exist, the visible title takes precedence."
-        },
         "dismissible": {
           "type": "boolean",
           "required": false,
@@ -1161,20 +1449,10 @@
           "defaultValue": "true",
           "description": "Whether to display labels.\nWhen false, hides all label content regardless of other props."
         },
-        "labelledBy": {
-          "type": "string",
-          "required": false,
-          "description": "ARIA: ID of an element that labels this progress bar.\nTakes precedence over `ariaLabel` and `defaultLabel`."
-        },
-        "ariaLabel": {
-          "type": "string",
-          "required": false,
-          "description": "ARIA: Accessible name for the progress bar.\nUse when no visible label exists. Takes precedence over `defaultLabel`."
-        },
         "defaultLabel": {
           "type": "string",
           "required": false,
-          "description": "Fallback accessible name, rendered as visually-hidden text.\nOnly used if neither `labelledBy` nor `ariaLabel` is provided."
+          "description": "Fallback accessible name, rendered as visually-hidden text.\nOnly used if neither `aria-labelledby` nor `aria-label` is provided."
         },
         "className": {
           "type": "string",
@@ -1241,26 +1519,56 @@
       "examples": null,
       "related": null
     },
-    "Rating": {
+    "Radio": {
       "props": {
-        "value": {
-          "type": "number",
-          "required": false,
-          "description": "Controlled value (1..max). Use with onChange"
-        },
-        "max": {
-          "type": "number",
-          "required": false,
-          "defaultValue": "5",
-          "description": "Maximum icons shown"
+        "label": {
+          "type": "ReactNode",
+          "required": false
         },
         "disabled": {
           "type": "boolean",
           "required": false,
-          "description": "Disable interaction (keeps semantics)"
+          "defaultValue": "false"
         },
-        "readOnly": {
-          "type": "boolean",
+        "className": {
+          "type": "string",
+          "required": false
+        }
+      },
+      "cssTokens": [],
+      "story": {
+        "title": "Forms/RadioGroup",
+        "tags": [
+          "autodocs",
+          "lms"
+        ]
+      },
+      "subcomponents": null,
+      "description": null,
+      "gotchas": null,
+      "examples": null,
+      "related": null
+    },
+    "Rating": {
+      "props": {
+        "value": {
+          "type": "number",
+          "required": false,
+          "description": "Controlled value (1..max). Use with onValueChange"
+        },
+        "max": {
+          "type": "number",
+          "required": false,
+          "defaultValue": "5",
+          "description": "Maximum icons shown"
+        },
+        "disabled": {
+          "type": "boolean",
+          "required": false,
+          "description": "Disable interaction (keeps semantics)"
+        },
+        "readOnly": {
+          "type": "boolean",
           "required": false,
           "description": "Presentational readOnly (no form semantics)"
         },
@@ -1281,10 +1589,10 @@
           "defaultValue": "secondary",
           "description": "Theme feeds foreground color tokens"
         },
-        "onChange": {
+        "onValueChange": {
           "type": "(value: number) => void",
           "required": false,
-          "description": "Called on change (controlled or uncontrolled)"
+          "description": "Called when the value changes"
         },
         "allowClear": {
           "type": "boolean",
@@ -1299,11 +1607,6 @@
           "type": "string",
           "required": false,
           "description": "Gap override (e.g. '0.25rem') – otherwise uses density utilities"
-        },
-        "ariaLabel": {
-          "type": "string",
-          "required": false,
-          "description": "Accessible label for the rating group. Defaults to \"Rating: X of Y\""
         }
       },
       "cssTokens": [],
@@ -1377,6 +1680,85 @@
       "examples": null,
       "related": null
     },
+    "Select": {
+      "props": {
+        "size": {
+          "type": "\"sm\" | \"md\" | \"lg\"",
+          "required": false,
+          "defaultValue": "'md'",
+          "description": "Control size."
+        },
+        "value": {
+          "type": "OptionValue",
+          "required": false,
+          "description": "Controlled selected value."
+        },
+        "onValueChange": {
+          "type": "(value: OptionValue) => void",
+          "required": false,
+          "description": "Callback when selection changes.\nCalled with undefined when selection is cleared."
+        },
+        "open": {
+          "type": "boolean",
+          "required": false,
+          "description": "Controlled open state."
+        },
+        "defaultOpen": {
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Default open state for uncontrolled usage."
+        },
+        "disabled": {
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Whether the entire select is disabled."
+        },
+        "side": {
+          "type": "\"top\" | \"bottom\"",
+          "required": false,
+          "defaultValue": "'bottom'",
+          "description": "Preferred side of the trigger to place the listbox."
+        },
+        "align": {
+          "type": "\"start\" | \"center\" | \"end\"",
+          "required": false,
+          "defaultValue": "'start'",
+          "description": "Alignment along the side."
+        },
+        "sideOffset": {
+          "type": "number",
+          "required": false,
+          "defaultValue": "4",
+          "description": "Distance from the trigger in pixels."
+        },
+        "clearable": {
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Whether the selection can be cleared with a clear button."
+        },
+        "id": {
+          "type": "string",
+          "required": false,
+          "description": "Optional trigger ID override.\nUseful for Field integration via htmlFor."
+        }
+      },
+      "cssTokens": [],
+      "story": {
+        "title": "Forms/Select",
+        "tags": [
+          "autodocs",
+          "lms"
+        ]
+      },
+      "subcomponents": null,
+      "description": null,
+      "gotchas": null,
+      "examples": null,
+      "related": null
+    },
     "Sidebar": {
       "props": {
         "position": {
@@ -1391,7 +1773,7 @@
           "defaultValue": "false",
           "description": "Enable drawer mode (mobile overlay).\nWhen true, sidebar renders via portal with backdrop and focus trap."
         },
-        "isOpen": {
+        "open": {
           "type": "boolean",
           "required": false,
           "description": "Drawer open state. Required when `drawer={true}`."
@@ -1401,11 +1783,6 @@
           "required": false,
           "description": "Callback to close the drawer.\nCalled when ESC is pressed or backdrop is clicked."
         },
-        "ariaLabel": {
-          "type": "string",
-          "required": false,
-          "description": "Accessible label for the aside landmark.\nTypically omit this if using `ariaLabel` on `Sidebar.Nav` instead."
-        },
         "children": {
           "type": "ReactNode",
           "required": true,
@@ -1490,16 +1867,6 @@
     },
     "StepList": {
       "props": {
-        "ariaLabel": {
-          "type": "string",
-          "required": false,
-          "description": "Accessible label for the navigation landmark.\nUse either `ariaLabel` or `ariaLabelledBy`, not both."
-        },
-        "ariaLabelledBy": {
-          "type": "string",
-          "required": false,
-          "description": "ID of a visible heading that labels the navigation.\nUse either `ariaLabel` or `ariaLabelledBy`, not both."
-        },
         "ariaCurrent": {
           "type": "\"step\" | \"page\"",
           "required": false,
@@ -1537,6 +1904,60 @@
       "examples": null,
       "related": null
     },
+    "Switch": {
+      "props": {
+        "disabled": {
+          "type": "boolean",
+          "required": false
+        },
+        "className": {
+          "type": "string",
+          "required": false
+        },
+        "id": {
+          "type": "string",
+          "required": false
+        },
+        "style": {
+          "type": "CSSProperties",
+          "required": false
+        },
+        "title": {
+          "type": "string",
+          "required": false
+        },
+        "rel": {
+          "type": "string",
+          "required": false
+        },
+        "onClick": {
+          "type": "MouseEventHandler<HTMLButtonElement>",
+          "required": false
+        },
+        "size": {
+          "type": "\"sm\" | \"md\" | \"lg\"",
+          "required": false,
+          "defaultValue": "md"
+        },
+        "label": {
+          "type": "ReactNode",
+          "required": false
+        }
+      },
+      "cssTokens": [],
+      "story": {
+        "title": "Forms/Switch",
+        "tags": [
+          "autodocs",
+          "lms"
+        ]
+      },
+      "subcomponents": null,
+      "description": null,
+      "gotchas": null,
+      "examples": null,
+      "related": null
+    },
     "Tabs": {
       "props": {
         "variant": {
@@ -1634,6 +2055,156 @@
         "SegmentedControl"
       ]
     },
+    "Textarea": {
+      "props": {
+        "disabled": {
+          "type": "boolean",
+          "required": false
+        },
+        "onChange": {
+          "type": "ChangeEventHandler<HTMLTextAreaElement>",
+          "required": false
+        },
+        "className": {
+          "type": "string",
+          "required": false,
+          "description": "Class name applied to the textarea element."
+        },
+        "id": {
+          "type": "string",
+          "required": false
+        },
+        "style": {
+          "type": "CSSProperties",
+          "required": false
+        },
+        "title": {
+          "type": "string",
+          "required": false
+        },
+        "role": {
+          "type": "AriaRole",
+          "required": false
+        },
+        "rel": {
+          "type": "string",
+          "required": false
+        },
+        "onClick": {
+          "type": "MouseEventHandler<HTMLTextAreaElement>",
+          "required": false
+        },
+        "size": {
+          "type": "\"sm\" | \"md\" | \"lg\"",
+          "required": false,
+          "defaultValue": "md",
+          "description": "Control size."
+        },
+        "resize": {
+          "type": "\"none\" | \"vertical\" | \"horizontal\" | \"both\"",
+          "required": false,
+          "defaultValue": "vertical",
+          "description": "Resize behaviour.\nIgnored when `autoResize` is true (resize is disabled to avoid conflict)."
+        },
+        "autoResize": {
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Automatically grow height to fit content.\nDisables manual resize and scrollbar."
+        }
+      },
+      "cssTokens": [],
+      "story": {
+        "title": "Forms/Textarea",
+        "tags": [
+          "autodocs",
+          "stable",
+          "lms"
+        ]
+      },
+      "subcomponents": null,
+      "description": null,
+      "gotchas": null,
+      "examples": null,
+      "related": null
+    },
+    "TextInput": {
+      "props": {
+        "disabled": {
+          "type": "boolean",
+          "required": false
+        },
+        "onChange": {
+          "type": "ChangeEventHandler<HTMLInputElement>",
+          "required": false
+        },
+        "className": {
+          "type": "string",
+          "required": false,
+          "description": "Additional class name applied to the root wrapper element."
+        },
+        "id": {
+          "type": "string",
+          "required": false
+        },
+        "style": {
+          "type": "CSSProperties",
+          "required": false
+        },
+        "title": {
+          "type": "string",
+          "required": false
+        },
+        "role": {
+          "type": "AriaRole",
+          "required": false
+        },
+        "rel": {
+          "type": "string",
+          "required": false
+        },
+        "onClick": {
+          "type": "MouseEventHandler<HTMLInputElement>",
+          "required": false
+        },
+        "type": {
+          "type": "\"number\" | \"text\" | \"email\" | \"password\" | \"url\" | \"tel\" | \"search\"",
+          "required": false,
+          "defaultValue": "text",
+          "description": "Input type."
+        },
+        "size": {
+          "type": "\"sm\" | \"md\" | \"lg\"",
+          "required": false,
+          "defaultValue": "md",
+          "description": "Control size."
+        },
+        "suffix": {
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content to render after the input (icon, button)."
+        },
+        "inputClassName": {
+          "type": "string",
+          "required": false,
+          "description": "Class name applied directly to the `<input>` element.\nUse for utilities like `tui-input-reset` that must target the input itself."
+        }
+      },
+      "cssTokens": [],
+      "story": {
+        "title": "Forms/TextInput",
+        "tags": [
+          "autodocs",
+          "stable",
+          "lms"
+        ]
+      },
+      "subcomponents": null,
+      "description": null,
+      "gotchas": null,
+      "examples": null,
+      "related": null
+    },
     "Toolbar": {
       "props": {
         "orientation": {
@@ -1850,9 +2421,9 @@
       "lms": 7,
       "player": 24,
       "reaction": 36,
-      "system": 74
+      "system": 75
     },
-    "total": 153,
+    "total": 154,
     "manifest": "./icons/manifest.json"
   }
 }