@cloudflare/kumo 1.17.0 → 1.18.0

package/ai/component-registry.json

@@ -11,77 +11,65 @@
         "variant": {
           "type": "enum",
           "optional": true,
-          "description": "Color variant of the badge.\n- `\"red\"` / `\"red-subtle\"` — Red badge\n- `\"orange\"` / `\"orange-subtle\"` — Orange badge\n- `\"yellow\"` / `\"yellow-subtle\"` — Yellow badge\n- `\"green\"` / `\"green-subtle\"` — Green badge (emerald scale)\n- `\"teal\"` / `\"teal-subtle\"` — Teal badge\n- `\"blue\"` / `\"blue-subtle\"` — Blue badge\n- `\"neutral\"` / `\"neutral-subtle\"` — Neutral badge\n- `\"inverted\"` — Inverted badge (near-black, white in dark mode)\n- `\"outline\"` — Bordered badge with transparent background\n- `\"beta\"` — Dashed-border badge for beta/experimental features\n- `\"primary\"` — **Deprecated.** Use `\"inverted\"` instead.\n- `\"secondary\"` — **Deprecated.** Use `\"neutral\"` instead.\n- `\"destructive\"` — **Deprecated.** Use `\"red\"` instead.\n- `\"success\"` — **Deprecated.** Use `\"green\"` instead.",
+          "description": "Color variant of the badge. Recommended semantic variants:\n- `\"primary\"` — Primary badge\n- `\"secondary\"` — Secondary badge\n- `\"error\"` — Error badge\n- `\"warning\"` — Warning badge\n- `\"success\"` — Success badge\n- `\"info\"` — Info badge\n\nAdditional token variants:\n- `\"red\"`, `\"orange\"`, `\"green\"`, `\"teal\"`, `\"blue\"`, `\"purple\"`, `\"neutral\"`\n- `\"teal-subtle\"`, `\"neutral-subtle\"`\n- `\"inverted\"`\n- `\"outline\"` — Bordered badge with transparent background\n- `\"beta\"` — Dashed-border badge for beta/experimental features",
           "values": [
+            "primary",
+            "secondary",
+            "error",
+            "warning",
+            "success",
+            "destructive",
+            "info",
+            "beta",
+            "outline",
             "red",
-            "red-subtle",
-            "orange",
-            "orange-subtle",
-            "yellow",
-            "yellow-subtle",
             "green",
-            "green-subtle",
+            "neutral",
+            "orange",
+            "purple",
             "teal",
             "teal-subtle",
-            "blue",
-            "blue-subtle",
-            "neutral",
-            "neutral-subtle",
-            "inverted",
-            "outline",
-            "beta",
-            "primary",
-            "secondary",
-            "destructive",
-            "success"
+            "blue"
           ],
           "descriptions": {
+            "primary": "Primary badge",
+            "secondary": "Secondary badge",
+            "error": "Error badge",
+            "warning": "Warning badge",
+            "success": "Success badge",
+            "destructive": "Deprecated. Use red instead.",
+            "info": "Info badge",
+            "beta": "Indicates beta or experimental features",
+            "outline": "Bordered badge with transparent background",
             "red": "Red badge",
-            "red-subtle": "Subtle red badge",
-            "orange": "Orange badge",
-            "orange-subtle": "Subtle orange badge",
-            "yellow": "Yellow badge",
-            "yellow-subtle": "Subtle yellow badge",
             "green": "Green badge",
-            "green-subtle": "Subtle green badge",
+            "neutral": "Neutral badge",
+            "orange": "Orange badge",
+            "purple": "Purple badge",
             "teal": "Teal badge",
             "teal-subtle": "Subtle teal badge",
-            "blue": "Blue badge",
-            "blue-subtle": "Subtle blue badge",
-            "neutral": "Neutral badge",
-            "neutral-subtle": "Subtle neutral badge",
-            "inverted": "Inverted badge",
-            "outline": "Bordered badge with transparent background",
-            "beta": "Indicates beta or experimental features",
-            "primary": "Deprecated. Use inverted instead.",
-            "secondary": "Deprecated. Use neutral instead.",
-            "destructive": "Deprecated. Use red instead.",
-            "success": "Deprecated. Use green instead."
+            "blue": "Blue badge"
           },
           "classes": {
+            "primary": "bg-kumo-badge-inverted text-kumo-badge-inverted",
+            "secondary": "bg-kumo-fill text-kumo-badge-neutral-subtle",
+            "error": "bg-kumo-danger-tint/60 text-kumo-danger",
+            "warning": "bg-kumo-warning-tint/70 text-kumo-warning",
+            "success": "bg-kumo-success-tint/70 text-kumo-success",
+            "destructive": "bg-kumo-badge-red text-white",
+            "info": "bg-kumo-info-tint/70 text-kumo-info",
+            "beta": "border border-dashed border-kumo-brand bg-transparent text-kumo-link",
+            "outline": "border border-kumo-fill bg-transparent text-kumo-default",
             "red": "bg-kumo-badge-red text-white",
-            "red-subtle": "bg-kumo-badge-red-subtle text-kumo-badge-red-subtle",
-            "orange": "bg-kumo-badge-orange text-white",
-            "orange-subtle": "bg-kumo-badge-orange-subtle text-kumo-badge-orange-subtle",
-            "yellow": "bg-kumo-badge-yellow text-white",
-            "yellow-subtle": "bg-kumo-badge-yellow-subtle text-kumo-badge-yellow-subtle",
             "green": "bg-kumo-badge-green text-white",
-            "green-subtle": "bg-kumo-badge-green-subtle text-kumo-badge-green-subtle",
+            "neutral": "bg-kumo-badge-neutral text-white",
+            "orange": "bg-kumo-badge-orange text-black",
+            "purple": "bg-kumo-badge-purple text-white",
             "teal": "bg-kumo-badge-teal text-white",
             "teal-subtle": "bg-kumo-badge-teal-subtle text-kumo-badge-teal-subtle",
-            "blue": "bg-kumo-badge-blue text-white",
-            "blue-subtle": "bg-kumo-badge-blue-subtle text-kumo-badge-blue-subtle",
-            "neutral": "bg-kumo-badge-neutral text-white",
-            "neutral-subtle": "bg-kumo-fill text-kumo-badge-neutral-subtle",
-            "inverted": "bg-kumo-badge-inverted text-kumo-badge-inverted",
-            "outline": "border border-kumo-fill bg-transparent text-kumo-default",
-            "beta": "border border-dashed border-kumo-brand bg-transparent text-kumo-link",
-            "primary": "bg-kumo-badge-inverted text-kumo-badge-inverted",
-            "secondary": "bg-kumo-badge-neutral text-white",
-            "destructive": "bg-kumo-badge-red text-white",
-            "success": "bg-kumo-badge-green text-white"
+            "blue": "bg-kumo-badge-blue text-white"
           },
-          "default": "neutral"
+          "default": "primary"
         },
         "className": {
           "type": "string",
@@ -95,54 +83,36 @@
         }
       },
       "examples": [
-        "<div className=\"flex flex-wrap items-center gap-2\">\n      <Badge variant=\"red\">Red</Badge>\n      <Badge variant=\"orange\">Orange</Badge>\n      <Badge variant=\"yellow\">Yellow</Badge>\n      <Badge variant=\"green\">Green</Badge>\n      <Badge variant=\"teal\">Teal</Badge>\n      <Badge variant=\"blue\">Blue</Badge>\n      <Badge variant=\"neutral\">Neutral</Badge>\n      <Badge variant=\"inverted\">Inverted</Badge>\n      <Badge variant=\"outline\">Outline</Badge>\n      <Badge variant=\"beta\">Beta</Badge>\n      <Badge variant=\"red-subtle\">Red subtle</Badge>\n      <Badge variant=\"orange-subtle\">Orange subtle</Badge>\n      <Badge variant=\"yellow-subtle\">Yellow subtle</Badge>\n      <Badge variant=\"green-subtle\">Green subtle</Badge>\n      <Badge variant=\"teal-subtle\">Teal subtle</Badge>\n      <Badge variant=\"blue-subtle\">Blue subtle</Badge>\n      <Badge variant=\"neutral-subtle\">Neutral subtle</Badge>\n    </div>",
-        "<Badge variant=\"red\">Red</Badge>",
-        "<Badge variant=\"red-subtle\">Red subtle</Badge>",
-        "<Badge variant=\"orange\">Orange</Badge>",
-        "<Badge variant=\"orange-subtle\">Orange subtle</Badge>",
-        "<Badge variant=\"yellow\">Yellow</Badge>",
-        "<Badge variant=\"yellow-subtle\">Yellow subtle</Badge>",
-        "<Badge variant=\"green\">Green</Badge>",
-        "<Badge variant=\"green-subtle\">Green subtle</Badge>",
-        "<Badge variant=\"teal\">Teal</Badge>",
-        "<Badge variant=\"teal-subtle\">Teal subtle</Badge>",
-        "<Badge variant=\"blue\">Blue</Badge>",
-        "<Badge variant=\"blue-subtle\">Blue subtle</Badge>",
-        "<Badge variant=\"neutral\">Neutral</Badge>",
-        "<Badge variant=\"neutral-subtle\">Neutral subtle</Badge>",
-        "<Badge variant=\"inverted\">Inverted</Badge>",
-        "<Badge variant=\"outline\">Outline</Badge>",
-        "<Badge variant=\"beta\">Beta</Badge>",
-        "<p className=\"flex items-center gap-2\">\n      Workers\n      <Badge variant=\"blue\">New</Badge>\n    </p>"
+        "<div className=\"flex flex-wrap items-center gap-2\">\n      <Badge variant=\"primary\">Primary</Badge>\n      <Badge variant=\"secondary\">Secondary</Badge>\n      <Badge variant=\"error\">Error</Badge>\n      <Badge variant=\"success\">Success</Badge>\n      <Badge variant=\"warning\">Warning</Badge>\n      <Badge variant=\"info\">Info</Badge>\n      <Badge variant=\"outline\">Outline</Badge>\n      <Badge variant=\"beta\">Beta</Badge>\n    </div>",
+        "<div className=\"flex flex-wrap items-center gap-2\">\n      <Badge variant=\"neutral\">Neutral</Badge>\n      <Badge variant=\"red\">Red</Badge>\n      <Badge variant=\"orange\">Orange</Badge>\n      <Badge variant=\"green\">Green</Badge>\n      <Badge variant=\"teal\">Teal</Badge>\n      <Badge variant=\"blue\">Blue</Badge>\n      <Badge variant=\"purple\">Purple</Badge>\n    </div>",
+        "<p className=\"flex items-center gap-2\">\n      Workers\n      <Badge variant=\"secondary\">New</Badge>\n    </p>"
       ],
       "colors": [
         "bg-kumo-badge-blue",
-        "bg-kumo-badge-blue-subtle",
         "bg-kumo-badge-green",
-        "bg-kumo-badge-green-subtle",
         "bg-kumo-badge-inverted",
         "bg-kumo-badge-neutral",
         "bg-kumo-badge-orange",
-        "bg-kumo-badge-orange-subtle",
+        "bg-kumo-badge-purple",
         "bg-kumo-badge-red",
-        "bg-kumo-badge-red-subtle",
         "bg-kumo-badge-teal",
         "bg-kumo-badge-teal-subtle",
-        "bg-kumo-badge-yellow",
-        "bg-kumo-badge-yellow-subtle",
+        "bg-kumo-danger-tint",
         "bg-kumo-fill",
+        "bg-kumo-info-tint",
+        "bg-kumo-success-tint",
+        "bg-kumo-warning-tint",
         "border-kumo-brand",
         "border-kumo-fill",
-        "text-kumo-badge-blue-subtle",
-        "text-kumo-badge-green-subtle",
         "text-kumo-badge-inverted",
         "text-kumo-badge-neutral-subtle",
-        "text-kumo-badge-orange-subtle",
-        "text-kumo-badge-red-subtle",
         "text-kumo-badge-teal-subtle",
-        "text-kumo-badge-yellow-subtle",
+        "text-kumo-danger",
         "text-kumo-default",
-        "text-kumo-link"
+        "text-kumo-info",
+        "text-kumo-link",
+        "text-kumo-success",
+        "text-kumo-warning"
       ],
       "baseStyles": "inline-flex w-fit flex-none shrink-0 items-center justify-self-start rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap"
     },
@@ -196,9 +166,9 @@
             "error": "Error banner for critical issues"
           },
           "classes": {
-            "default": "bg-kumo-info/10 border-kumo-info/30 text-kumo-info selection:bg-kumo-info-tint",
-            "alert": "bg-kumo-warning/10 border-kumo-warning/30 text-kumo-warning selection:bg-kumo-warning-tint",
-            "error": "bg-kumo-danger/10 border-kumo-danger/30 text-kumo-danger selection:bg-kumo-danger-tint"
+            "default": "bg-kumo-info-tint/30 border-kumo-info/50 text-kumo-info selection:bg-kumo-info",
+            "alert": "bg-kumo-warning-tint/15 border-kumo-warning/50 text-kumo-warning selection:bg-kumo-warning",
+            "error": "bg-kumo-danger-tint/15 border-kumo-danger/50 text-kumo-danger selection:bg-kumo-danger"
           },
           "default": "default"
         },
@@ -399,11 +369,11 @@
           },
           "classes": {
             "primary": "bg-kumo-brand !text-white hover:bg-kumo-brand-hover focus:bg-kumo-brand-hover disabled:bg-kumo-brand/50",
-            "secondary": "bg-kumo-base !text-kumo-default ring not-disabled:hover:border-secondary! not-disabled:hover:bg-kumo-tint disabled:bg-kumo-base/50 disabled:!text-kumo-default/70 ring-kumo-ring data-[state=open]:bg-kumo-base",
+            "secondary": "bg-kumo-base !text-kumo-default ring not-disabled:hover:border-secondary! not-disabled:hover:bg-kumo-tint disabled:bg-kumo-base/50 disabled:!text-kumo-default/70 ring-kumo-hairline data-[state=open]:bg-kumo-base",
             "ghost": "text-kumo-default hover:bg-kumo-tint shadow-none bg-inherit",
             "destructive": "bg-kumo-danger !text-white hover:bg-kumo-danger/70",
             "secondary-destructive": "bg-kumo-base !text-kumo-danger ring not-disabled:hover:border-secondary! not-disabled:hover:bg-kumo-base disabled:bg-kumo-base/50 disabled:!text-kumo-danger/70 ring-kumo-line data-[state=open]:bg-kumo-base",
-            "outline": "bg-transparent text-kumo-default ring ring-kumo-ring"
+            "outline": "bg-transparent text-kumo-default ring ring-kumo-hairline"
           },
           "stateClasses": {
             "primary": {
@@ -504,8 +474,8 @@
         "bg-kumo-brand-hover",
         "bg-kumo-danger",
         "bg-kumo-tint",
+        "ring-kumo-hairline",
         "ring-kumo-line",
-        "ring-kumo-ring",
         "text-kumo-danger",
         "text-kumo-default",
         "text-kumo-subtle"
@@ -531,13 +501,13 @@
             "error": "Error state for validation failures"
           },
           "classes": {
-            "default": "[&:focus-within>span]:ring-kumo-ring [&:hover>span]:ring-kumo-ring",
+            "default": "[&:focus-within>span]:ring-kumo-hairline [&:hover>span]:ring-kumo-hairline",
             "error": "[&>span]:ring-kumo-danger"
           },
           "stateClasses": {
             "default": {
-              "focus": "[&:focus-within>span]:ring-kumo-ring",
-              "hover": "[&:hover>span]:ring-kumo-ring"
+              "focus": "[&:focus-within>span]:ring-kumo-hairline",
+              "hover": "[&:hover>span]:ring-kumo-hairline"
             }
           },
           "default": "default"
@@ -608,8 +578,8 @@
         "bg-kumo-contrast",
         "ring-kumo-contrast",
         "ring-kumo-danger",
+        "ring-kumo-hairline",
         "ring-kumo-line",
-        "ring-kumo-ring",
         "text-kumo-danger",
         "text-kumo-default",
         "text-kumo-inverse",
@@ -684,10 +654,10 @@
             "ring-kumo-danger"
           ],
           "hover": [
-            "ring-kumo-ring"
+            "ring-kumo-hairline"
           ],
           "focus": [
-            "ring-kumo-ring"
+            "ring-kumo-hairline"
           ],
           "disabled": [
             "opacity-50",
@@ -3101,12 +3071,12 @@
             "error": "Error state for validation failures"
           },
           "classes": {
-            "default": "focus:ring-kumo-ring",
+            "default": "focus:ring-kumo-hairline",
             "error": "!ring-kumo-danger focus:ring-kumo-danger"
           },
           "stateClasses": {
             "default": {
-              "focus": "focus:ring-kumo-ring"
+              "focus": "focus:ring-kumo-hairline"
             },
             "error": {
               "focus": "focus:ring-kumo-danger"
@@ -3118,8 +3088,8 @@
       "examples": [
         "<Input\n      label=\"Email\"\n      placeholder=\"you@example.com\"\n      description=\"We'll never share your email\"\n    />",
         "<Input\n      label=\"Username\"\n      placeholder=\"Choose a username\"\n      description=\"3-20 characters, alphanumeric only\"\n    />",
-        "<Input\n      label=\"Email\"\n      placeholder=\"you@example.com\"\n      value=\"invalid-email\"\n      variant=\"error\"\n      error=\"Please enter a valid email address\"\n    />",
-        "<Input\n      label=\"Password\"\n      type=\"password\"\n      value=\"short\"\n      variant=\"error\"\n      error={{\n        message: \"Password must be at least 8 characters\",\n        match: \"tooShort\",\n      }}\n      minLength={8}\n    />",
+        "<Input\n      label=\"Email\"\n      placeholder=\"you@example.com\"\n      value=\"invalid-email\"\n      error=\"Please enter a valid email address\"\n    />",
+        "<Input\n      label=\"Password\"\n      type=\"password\"\n      value=\"short\"\n      error={{\n        message: \"Password must be at least 8 characters\",\n        match: \"tooShort\",\n      }}\n      minLength={8}\n    />",
         "<div className=\"flex flex-col gap-4\">\n      <Input size=\"xs\" label=\"Extra Small\" placeholder=\"Extra small input\" />\n      <Input size=\"sm\" label=\"Small\" placeholder=\"Small input\" />\n      <Input label=\"Base\" placeholder=\"Base input (default)\" />\n      <Input size=\"lg\" label=\"Large\" placeholder=\"Large input\" />\n    </div>",
         "<Input label=\"Disabled field\" placeholder=\"Cannot edit\" disabled />",
         "<Input placeholder=\"Search...\" aria-label=\"Search products\" />",
@@ -3131,8 +3101,8 @@
       "colors": [
         "bg-kumo-control",
         "ring-kumo-danger",
+        "ring-kumo-hairline",
         "ring-kumo-line",
-        "ring-kumo-ring",
         "text-kumo-default",
         "text-kumo-subtle"
       ],
@@ -3633,10 +3603,12 @@
         "<Pagination\n      page={page}\n      setPage={setPage}\n      perPage={perPage}\n      totalCount={500}\n    >\n      <Pagination.Info />\n      <Pagination.Separator />\n      <Pagination.PageSize\n        value={perPage}\n        onChange={(size) => {\n          setPerPage(size);\n          setPage(1);\n        }}\n      />\n      <Pagination.Controls />\n    </Pagination>",
         "<Pagination\n      page={page}\n      setPage={setPage}\n      perPage={perPage}\n      totalCount={200}\n    >\n      <Pagination.Info />\n      <Pagination.Separator />\n      <Pagination.PageSize\n        value={perPage}\n        onChange={(size) => {\n          setPerPage(size);\n          setPage(1);\n        }}\n        options={[10, 20, 50]}\n      />\n      <Pagination.Controls />\n    </Pagination>",
         "<Pagination page={page} setPage={setPage} perPage={25} totalCount={100}>\n      <Pagination.Info>\n        {({ page, totalCount }) =>\n          `Page ${page} of ${Math.ceil((totalCount ?? 1) / 25)}`\n        }\n      </Pagination.Info>\n      <Pagination.Controls />\n    </Pagination>",
+        "<Pagination\n      page={page}\n      setPage={setPage}\n      perPage={perPage}\n      totalCount={500}\n    >\n      <Pagination.Info />\n      <Pagination.Separator />\n      <Pagination.PageSize\n        value={perPage}\n        onChange={(size) => {\n          setPerPage(size);\n          setPage(1);\n        }}\n      />\n      <Pagination.Controls pageSelector=\"dropdown\" />\n    </Pagination>",
         "<Pagination\n      page={page}\n      setPage={setPage}\n      perPage={perPage}\n      totalCount={500}\n    >\n      <Pagination.Info />\n      <div className=\"flex items-center gap-2\">\n        <Pagination.Controls />\n        <Pagination.Separator />\n        <Pagination.PageSize\n          value={perPage}\n          onChange={(size) => {\n            setPerPage(size);\n            setPage(1);\n          }}\n        />\n      </div>\n    </Pagination>"
       ],
       "colors": [
         "border-kumo-line",
+        "ring-kumo-line",
         "text-kumo-strong"
       ],
       "subComponents": {
@@ -3692,6 +3664,14 @@
           "name": "Controls",
           "description": "Controls sub-component",
           "props": {
+            "Note": {
+              "type": "** `\"dropdown\"` renders an option for every page",
+              "required": true
+            },
+            "pageSelector": {
+              "type": "\"input\" | \"dropdown\"",
+              "optional": true
+            },
             "className": {
               "type": "string",
               "optional": true
@@ -3830,7 +3810,7 @@
             "card": "Choice card appearance with border, padding, and highlighted selection state"
           },
           "classes": {
-            "card": "rounded-lg border border-kumo-ring bg-kumo-base p-3 transition-colors hover:bg-kumo-tint has-[[data-checked]]:border-kumo-interact has-[[data-checked]]:bg-kumo-tint"
+            "card": "rounded-lg border border-kumo-hairline bg-kumo-base p-3 transition-colors hover:bg-kumo-tint has-[[data-checked]]:border-kumo-interact has-[[data-checked]]:bg-kumo-tint"
           },
           "stateClasses": {
             "card": {
@@ -3895,11 +3875,11 @@
         "bg-kumo-contrast",
         "bg-kumo-tint",
         "border-kumo-danger",
+        "border-kumo-hairline",
         "border-kumo-interact",
-        "border-kumo-ring",
         "ring-kumo-danger",
+        "ring-kumo-hairline",
         "ring-kumo-line",
-        "ring-kumo-ring",
         "text-kumo-danger",
         "text-kumo-default",
         "text-kumo-subtle"
@@ -4057,12 +4037,18 @@
         "<Select\n      label=\"Visible Columns\"\n      className=\"w-[250px]\"\n      multiple\n      renderValue={(value) => {\n        if (value.length > 3) {\n          return (\n            <span className=\"line-clamp-1\">\n              {value.slice(0, 2).join(\", \") + ` and ${value.length - 2} more`}\n            </span>\n          );\n        }\n        return <span>{value.join(\", \")}</span>;\n      }}\n      value={value}\n      onValueChange={(v) => setValue(v as string[])}\n    >\n      <Select.Option value=\"Name\">Name</Select.Option>\n      <Select.Option value=\"Location\">Location</Select.Option>\n      <Select.Option value=\"Size\">Size</Select.Option>\n      <Select.Option value=\"Read\">Read</Select.Option>\n      <Select.Option value=\"Write\">Write</Select.Option>\n      <Select.Option value=\"CreatedAt\">Created At</Select.Option>\n    </Select>",
         "<Select\n      label=\"Compliance Frameworks\"\n      className=\"w-[280px]\"\n      multiple\n      value={value}\n      onValueChange={(v) => setValue(v as string[])}\n    >\n      <Select.Option value=\"European Union Privacy Regulation\">\n        European Union Privacy Regulation\n      </Select.Option>\n      <Select.Option value=\"California Consumer Protection Act\">\n        California Consumer Protection Act\n      </Select.Option>\n      <Select.Option value=\"Health Insurance Portability Act\">\n        Health Insurance Portability Act\n      </Select.Option>\n      <Select.Option value=\"Payment Card Industry Standard\">\n        Payment Card Industry Standard\n      </Select.Option>\n    </Select>",
         "<Select\n      label=\"Issue Types\"\n      className=\"w-[220px]\"\n      multiple\n      renderValue={(selected) => (\n        <span className=\"flex items-center gap-2\">\n          <span>Issue Types</span>\n          {selected.length > 0 && (\n            <Badge variant=\"neutral\">{selected.length}</Badge>\n          )}\n        </span>\n      )}\n      value={value}\n      onValueChange={(v) => setValue(v as string[])}\n    >\n      {allOptions.map((option) => (\n        <Select.Option key={option.value} value={option.value}>\n          {option.label}\n        </Select.Option>\n      ))}\n    </Select>",
-        "<Select\n      label=\"Author\"\n      description=\"Select the primary author for this document\"\n      className=\"w-[200px]\"\n      onValueChange={(v) => setValue(v as (typeof authors)[0] | null)}\n      value={value}\n      isItemEqualToValue={(item, value) => item?.id === value?.id}\n      renderValue={(author) => {\n        return author?.name ?? \"Select an author\";\n      }}\n    >\n      {authors.map((author) => (\n        <Select.Option key={author.id} value={author}>\n          <div className=\"flex w-[300px] items-center justify-between gap-2\">\n            <Text>{author.name}</Text>\n            <Text variant=\"secondary\">{author.title}</Text>\n          </div>\n        </Select.Option>\n      ))}\n    </Select>"
+        "<Select\n      label=\"Author\"\n      description=\"Select the primary author for this document\"\n      className=\"w-[200px]\"\n      onValueChange={(v) => setValue(v as (typeof authors)[0] | null)}\n      value={value}\n      isItemEqualToValue={(item, value) => item?.id === value?.id}\n      renderValue={(author) => {\n        return author?.name ?? \"Select an author\";\n      }}\n    >\n      {authors.map((author) => (\n        <Select.Option key={author.id} value={author}>\n          <div className=\"flex w-[300px] items-center justify-between gap-2\">\n            <Text>{author.name}</Text>\n            <Text variant=\"secondary\">{author.title}</Text>\n          </div>\n        </Select.Option>\n      ))}\n    </Select>",
+        "<Select\n      label=\"Deployment Region\"\n      placeholder=\"Choose a region...\"\n      className=\"w-[250px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as string | null)}\n    >\n      <Select.Option value=\"us-east\">US East</Select.Option>\n      <Select.Option value=\"us-west\">US West</Select.Option>\n      <Select.Option value=\"eu-west\" disabled>\n        EU West\n      </Select.Option>\n      <Select.Option value=\"ap-south\" disabled>\n        AP South\n      </Select.Option>\n    </Select>",
+        "<Select\n      label=\"Plan\"\n      className=\"w-[200px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as string | null)}\n      items={{\n        free: \"Free\",\n        pro: \"Pro\",\n        business: { label: \"Business\", disabled: true },\n        enterprise: { label: \"Enterprise\", disabled: true },\n      }}\n    />",
+        "<Select\n      label=\"Food\"\n      placeholder=\"Pick a food...\"\n      className=\"w-[220px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as string | null)}\n    >\n      <Select.Group>\n        <Select.GroupLabel>Fruits</Select.GroupLabel>\n        <Select.Option value=\"apple\">Apple</Select.Option>\n        <Select.Option value=\"banana\">Banana</Select.Option>\n        <Select.Option value=\"cherry\">Cherry</Select.Option>\n      </Select.Group>\n      <Select.Separator />\n      <Select.Group>\n        <Select.GroupLabel>Vegetables</Select.GroupLabel>\n        <Select.Option value=\"carrot\">Carrot</Select.Option>\n        <Select.Option value=\"broccoli\">Broccoli</Select.Option>\n        <Select.Option value=\"spinach\">Spinach</Select.Option>\n      </Select.Group>\n    </Select>",
+        "<Select\n      label=\"Server Region\"\n      placeholder=\"Select a region...\"\n      className=\"w-[260px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as string | null)}\n    >\n      <Select.Group>\n        <Select.GroupLabel>Available</Select.GroupLabel>\n        <Select.Option value=\"us-east-1\">US East (N. Virginia)</Select.Option>\n        <Select.Option value=\"us-west-2\">US West (Oregon)</Select.Option>\n        <Select.Option value=\"eu-west-1\">EU West (Ireland)</Select.Option>\n      </Select.Group>\n      <Select.Separator />\n      <Select.Group>\n        <Select.GroupLabel>Unavailable</Select.GroupLabel>\n        <Select.Option value=\"ap-south-1\" disabled>\n          AP South (Mumbai)\n        </Select.Option>\n        <Select.Option value=\"sa-east-1\" disabled>\n          SA East (São Paulo)\n        </Select.Option>\n      </Select.Group>\n    </Select>",
+        "<Select\n      label=\"Long List Select\"\n      description=\"Tests scrolling behavior with many options\"\n      placeholder=\"Choose an option...\"\n      className=\"w-[220px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as string | null)}\n    >\n      {longListItems.map((item) => (\n        <Select.Option key={item.value} value={item.value}>\n          {item.label}\n        </Select.Option>\n      ))}\n    </Select>"
       ],
       "colors": [
         "bg-kumo-base",
+        "bg-kumo-line",
         "bg-kumo-tint",
-        "ring-kumo-ring",
+        "ring-kumo-hairline",
         "text-kumo-danger",
         "text-kumo-default",
         "text-kumo-subtle"
@@ -4072,6 +4058,21 @@
           "name": "Option",
           "description": "Option sub-component",
           "props": {}
+        },
+        "Group": {
+          "name": "Group",
+          "description": "Group sub-component",
+          "props": {}
+        },
+        "GroupLabel": {
+          "name": "GroupLabel",
+          "description": "GroupLabel sub-component",
+          "props": {}
+        },
+        "Separator": {
+          "name": "Separator",
+          "description": "Separator sub-component",
+          "props": {}
         }
       },
       "styling": {
@@ -4246,8 +4247,8 @@
       "colors": [
         "bg-kumo-brand",
         "bg-kumo-control",
-        "outline-kumo-ring",
-        "ring-kumo-ring",
+        "outline-kumo-hairline",
+        "ring-kumo-hairline",
         "text-kumo-default",
         "text-kumo-subtle"
       ]
@@ -4361,8 +4362,8 @@
         "bg-kumo-recessed",
         "bg-kumo-tint",
         "border-kumo-line",
+        "ring-kumo-hairline",
         "ring-kumo-line",
-        "ring-kumo-ring",
         "text-kumo-default",
         "text-kumo-strong",
         "text-kumo-subtle"
@@ -4710,7 +4711,8 @@
         "<Switch label=\"Disabled\" checked={false} disabled />",
         "<Switch\n      label=\"Neutral switch\"\n      variant=\"neutral\"\n      checked={checked}\n      onCheckedChange={setChecked}\n    />",
         "<div className=\"flex flex-col gap-4\">\n      <Switch\n        label=\"Neutral off\"\n        variant=\"neutral\"\n        checked={false}\n        onCheckedChange={() => {}}\n      />\n      <Switch\n        label=\"Neutral on\"\n        variant=\"neutral\"\n        checked={true}\n        onCheckedChange={() => {}}\n      />\n      <Switch\n        label=\"Neutral disabled\"\n        variant=\"neutral\"\n        checked={false}\n        disabled\n      />\n    </div>",
-        "<div className=\"grid grid-cols-2 gap-x-8 gap-y-4\">\n      <Switch\n        label=\"Default off\"\n        checked={false}\n        onCheckedChange={() => {}}\n      />\n      <Switch\n        label=\"Default on\"\n        checked={true}\n        onCheckedChange={() => {}}\n      />\n      <Switch\n        label=\"Neutral off\"\n        variant=\"neutral\"\n        checked={false}\n        onCheckedChange={() => {}}\n      />\n      <Switch\n        label=\"Neutral on\"\n        variant=\"neutral\"\n        checked={true}\n        onCheckedChange={() => {}}\n      />\n    </div>",
+        "<div className=\"grid grid-cols-2 gap-x-8 gap-y-4\">\n      <Switch label=\"Default off\" checked={false} onCheckedChange={() => {}} />\n      <Switch label=\"Default on\" checked={true} onCheckedChange={() => {}} />\n      <Switch\n        label=\"Neutral off\"\n        variant=\"neutral\"\n        checked={false}\n        onCheckedChange={() => {}}\n      />\n      <Switch\n        label=\"Neutral on\"\n        variant=\"neutral\"\n        checked={true}\n        onCheckedChange={() => {}}\n      />\n    </div>",
+        "<Switch\n      id=\"my-custom-switch\"\n      label=\"Custom ID\"\n      checked={checked}\n      onCheckedChange={setChecked}\n    />",
         "<div className=\"flex flex-col gap-4\">\n      <Switch\n        label=\"Small\"\n        size=\"sm\"\n        checked={true}\n        onCheckedChange={() => {}}\n      />\n      <Switch\n        label=\"Base (default)\"\n        size=\"base\"\n        checked={true}\n        onCheckedChange={() => {}}\n      />\n      <Switch\n        label=\"Large\"\n        size=\"lg\"\n        checked={true}\n        onCheckedChange={() => {}}\n      />\n    </div>"
       ],
       "colors": [
@@ -4836,7 +4838,7 @@
       "colors": [
         "bg-kumo-base",
         "bg-kumo-elevated",
-        "bg-kumo-ring",
+        "bg-kumo-hairline",
         "bg-kumo-tint",
         "border-kumo-fill",
         "text-kumo-default",
@@ -4960,9 +4962,9 @@
         "bg-kumo-brand",
         "bg-kumo-recessed",
         "bg-kumo-tint",
-        "border-kumo-ring",
+        "border-kumo-hairline",
+        "ring-kumo-hairline",
         "ring-kumo-line",
-        "ring-kumo-ring",
         "text-kumo-default",
         "text-kumo-strong",
         "text-kumo-subtle"
@@ -5168,15 +5170,15 @@
         "bg-kumo-base",
         "bg-kumo-contrast",
         "bg-kumo-control",
-        "bg-kumo-danger-tint",
+        "bg-kumo-danger",
         "bg-kumo-fill-hover",
-        "bg-kumo-info-tint",
-        "bg-kumo-success-tint",
-        "bg-kumo-warning-tint",
+        "bg-kumo-info",
+        "bg-kumo-success",
+        "bg-kumo-warning",
         "border-kumo-fill",
         "ring-kumo-danger",
+        "ring-kumo-hairline",
         "ring-kumo-info",
-        "ring-kumo-ring",
         "ring-kumo-success",
         "ring-kumo-warning",
         "text-kumo-danger",
@@ -5193,7 +5195,7 @@
           "padding": 16,
           "borderRadius": 8,
           "background": "bg-kumo-base",
-          "border": "ring-[0.3px] ring-kumo-ring",
+          "border": "ring-[0.3px] ring-kumo-hairline",
           "shadow": "shadow-lg",
           "gap": 4
         },
@@ -5259,7 +5261,8 @@
         "<TooltipProvider>\n      <Tooltip content=\"Add new item\" asChild>\n        <Button shape=\"square\" icon={PlusIcon} aria-label=\"Add new item\" />\n      </Tooltip>\n    </TooltipProvider>",
         "<TooltipProvider>\n      <Tooltip content=\"Add\" asChild>\n        <Button shape=\"square\" icon={PlusIcon} aria-label=\"Add\" />\n      </Tooltip>\n    </TooltipProvider>",
         "<TooltipProvider>\n      <div className=\"flex gap-2\">\n        <Tooltip content=\"Add\" asChild>\n          <Button shape=\"square\" icon={PlusIcon} aria-label=\"Add\" />\n        </Tooltip>\n        <Tooltip content=\"Change language\" asChild>\n          <Button\n            shape=\"square\"\n            icon={TranslateIcon}\n            aria-label=\"Change language\"\n          />\n        </Tooltip>\n      </div>\n    </TooltipProvider>",
-        "<TooltipProvider>\n      <Tooltip\n        content=\"Click to learn more\"\n        className=\"inline-flex items-center gap-1.5 rounded-full bg-kumo-brand px-3 py-1.5 text-sm font-medium text-white shadow-md transition-transform hover:scale-105 active:scale-95\"\n      >\n        <Info className=\"size-4\" />\n        <span>Help</span>\n      </Tooltip>\n    </TooltipProvider>"
+        "<TooltipProvider>\n      <Tooltip\n        content=\"Click to learn more\"\n        className=\"inline-flex items-center gap-1.5 rounded-full bg-kumo-brand px-3 py-1.5 text-sm font-medium text-white shadow-md transition-transform hover:scale-105 active:scale-95\"\n      >\n        <Info className=\"size-4\" />\n        <span>Help</span>\n      </Tooltip>\n    </TooltipProvider>",
+        "<TooltipProvider>\n      <div className=\"flex gap-4\">\n        <Tooltip content=\"Opens after 1 second\" delay={1000} asChild>\n          <Button variant=\"secondary\">1s open delay</Button>\n        </Tooltip>\n        <Tooltip\n          content=\"Stays open 500ms after leaving\"\n          closeDelay={500}\n          asChild\n        >\n          <Button variant=\"secondary\">500ms close delay</Button>\n        </Tooltip>\n        <Tooltip\n          content=\"Instant open, stays 1s\"\n          delay={0}\n          closeDelay={1000}\n          asChild\n        >\n          <Button variant=\"secondary\">Instant + 1s close</Button>\n        </Tooltip>\n      </div>\n    </TooltipProvider>"
       ],
       "colors": [
         "bg-kumo-base",