@cloudflare/kumo 2.0.0 → 2.0.2

package/ai/component-registry.md

@@ -1315,7 +1315,7 @@ Cloudflare logo component.
         <DropdownMenu.Content>
           <DropdownMenu.Item
             icon={CloudIcon}
-            onSelect={() =>
+            onClick={() =>
               copyToClipboard(
                 generateCloudflareLogoSvg({ variant: "glyph" }),
                 "glyph",
@@ -1326,7 +1326,7 @@ Cloudflare logo component.
           </DropdownMenu.Item>
           <DropdownMenu.Item
             icon={CodeIcon}
-            onSelect={() =>
+            onClick={() =>
               copyToClipboard(
                 generateCloudflareLogoSvg({ variant: "full" }),
                 "full",
@@ -1337,7 +1337,7 @@ Cloudflare logo component.
           </DropdownMenu.Item>
           <DropdownMenu.Item
             icon={DownloadSimpleIcon}
-            onSelect={() =>
+            onClick={() =>
               window.open(
                 "https://www.cloudflare.com/press-kit/",
                 "_blank",
@@ -1350,7 +1350,7 @@ Cloudflare logo component.
           <DropdownMenu.Separator />
           <DropdownMenu.Item
             icon={ArrowSquareOutIcon}
-            onSelect={() =>
+            onClick={() =>
               window.open(
                 "https://www.cloudflare.com/brand-assets/",
                 "_blank",
@@ -1422,12 +1422,12 @@ Code component
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-base`, `border-kumo-fill`, `text-kumo-strong`
+`bg-kumo-base`, `border-kumo-fill`, `text-kumo-subtle`
 
 **Styling:**
 
 - **Dimensions:** `[object Object]`
-- **Base Tokens:** `text-kumo-strong`
+- **Base Tokens:** `text-kumo-subtle`
 
 **Sub-Components:**
 
@@ -1560,6 +1560,21 @@ Props:
     </div>
 ```
 
+```tsx
+<div className="w-full space-y-4">
+      <Collapsible.Root open={isOpen} onOpenChange={setIsOpen}>
+        <Collapsible.DefaultTrigger>Edit details</Collapsible.DefaultTrigger>
+        <Collapsible.DefaultPanel keepMounted>
+          <Text>
+            Type something below, then collapse and re-open — your input is
+            preserved because the panel stays mounted.
+          </Text>
+          <Input label="Name" placeholder="Type here…" />
+        </Collapsible.DefaultPanel>
+      </Collapsible.Root>
+    </div>
+```
+
 ```tsx
 <div className="w-full space-y-2">
       {items.map((item, i) => (
@@ -1628,7 +1643,7 @@ Combobox — autocomplete input with filterable dropdown list.  Compound compone
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-base`, `bg-kumo-fill-hover`, `bg-kumo-overlay`, `bg-kumo-tint`, `border-kumo-hairline`, `ring-kumo-hairline`, `ring-kumo-line`, `text-kumo-default`, `text-kumo-strong`, `text-kumo-subtle`
+`bg-kumo-base`, `bg-kumo-fill-hover`, `bg-kumo-overlay`, `bg-kumo-tint`, `border-kumo-hairline`, `ring-kumo-hairline`, `ring-kumo-line`, `text-kumo-default`, `text-kumo-subtle`
 
 **Sub-Components:**
 
@@ -2037,7 +2052,7 @@ CommandPalette — accessible command palette / spotlight search overlay.  Compo
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-base`, `bg-kumo-elevated`, `bg-kumo-overlay`, `bg-kumo-warning`, `ring-kumo-brand`, `ring-kumo-hairline`, `text-kumo-default`, `text-kumo-strong`, `text-kumo-subtle`
+`bg-kumo-base`, `bg-kumo-elevated`, `bg-kumo-overlay`, `bg-kumo-warning`, `ring-kumo-brand`, `ring-kumo-hairline`, `text-kumo-default`, `text-kumo-subtle`
 
 **Examples:**
 
@@ -2458,7 +2473,7 @@ DatePicker — a date selection calendar.  Built on [react-day-picker](https://d
                   className={`rounded-md px-3 py-1.5 text-left whitespace-nowrap ${
                     isActive
                       ? "bg-kumo-bg-inverse text-kumo-text-inverse"
-                      : "text-kumo-strong hover:bg-kumo-control"
+                      : "text-kumo-subtle hover:bg-kumo-control"
                   }`}
                 >
                   {preset.label}
@@ -2530,7 +2545,7 @@ DateRangePicker — dual-calendar date range selector.  Renders two side-by-side
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-base`, `bg-kumo-contrast`, `bg-kumo-fill`, `bg-kumo-interact`, `bg-kumo-overlay`, `ring-kumo-focus`, `text-kumo-default`, `text-kumo-inverse`, `text-kumo-strong`, `text-kumo-subtle`
+`bg-kumo-base`, `bg-kumo-contrast`, `bg-kumo-fill`, `bg-kumo-interact`, `bg-kumo-overlay`, `ring-kumo-focus`, `text-kumo-default`, `text-kumo-inverse`, `text-kumo-subtle`
 
 **Styling:**
 
@@ -2932,6 +2947,10 @@ Sub sub-component (wraps DropdownMenuPrimitive)
 
 SubTrigger sub-component
 
+Props:
+- `icon`: Icon - Icon displayed before the label.
+- `inset`: boolean - Adds left padding to align with items that have icons.
+
 #### DropdownMenu.SubContent
 
 SubContent sub-component
@@ -2940,26 +2959,67 @@ SubContent sub-component
 
 Content sub-component
 
+Props:
+- `sideOffset`: number [default: 8] - Distance in pixels from the trigger.
+- `container`: PortalContainer - Container element for the portal. Use this to render inside a Shadow DOM or custom container.
+
 #### DropdownMenu.Item
 
 Item sub-component
 
+Props:
+- `icon`: Icon | ReactNode - Icon displayed before the label.
+- `variant`: "default" | "danger" [default: "default"] - Visual style of the item.
+- `selected`: boolean - Shows a check mark indicator when true.
+- `inset`: boolean - Adds left padding to align with items that have icons.
+- `onClick`: (event: React.MouseEvent) => void - Callback when the item is clicked.
+- `closeOnClick`: boolean [default: true] - Whether the menu closes after clicking this item.
+- `disabled`: boolean - When true, the item cannot be interacted with.
+
 #### DropdownMenu.LinkItem
 
 LinkItem sub-component
 
+Props:
+- `href`: string - URL to navigate to when clicked.
+- `icon`: Icon | ReactNode - Icon displayed before the label.
+- `variant`: "default" | "danger" [default: "default"] - Visual style of the item.
+- `inset`: boolean - Adds left padding to align with items that have icons.
+- `target`: string - Link target attribute (e.g. "_blank" for new tab).
+- `render`: ReactElement | ((props, state) => ReactElement) - Custom element to render as the link. Use to integrate with framework routers (e.g. Next.js Link).
+
 #### DropdownMenu.CheckboxItem
 
 CheckboxItem sub-component
 
+Props:
+- `checked`: boolean - Whether the item is checked.
+- `defaultChecked`: boolean [default: false] - Whether the item is initially checked (uncontrolled).
+- `onCheckedChange`: (checked: boolean, event: ChangeEventDetails) => void - Callback when the checked state changes.
+- `closeOnClick`: boolean [default: false] - Whether the menu closes after clicking this item.
+- `disabled`: boolean - When true, the item cannot be interacted with.
+
 #### DropdownMenu.RadioGroup
 
 RadioGroup sub-component (wraps DropdownMenuPrimitive)
 
+Props:
+- `value`: any - The controlled value of the currently selected radio item.
+- `defaultValue`: any - The initially selected value (uncontrolled).
+- `onValueChange`: (value: any, event: ChangeEventDetails) => void - Callback when the selected value changes.
+- `disabled`: boolean - When true, all radio items in the group are disabled.
+
 #### DropdownMenu.RadioItem
 
 RadioItem sub-component
 
+Props:
+- `value`: any (required) - The value of this radio item.
+- `icon`: Icon | ReactNode - Icon displayed before the label.
+- `inset`: boolean - Adds left padding to align with items that have icons.
+- `closeOnClick`: boolean [default: false] - Whether the menu closes after clicking this item.
+- `disabled`: boolean - When true, the item cannot be interacted with.
+
 #### DropdownMenu.RadioItemIndicator
 
 RadioItemIndicator sub-component
@@ -2968,6 +3028,9 @@ RadioItemIndicator sub-component
 
 Label sub-component
 
+Props:
+- `inset`: boolean - Adds left padding to align with items that have icons.
+
 #### DropdownMenu.Separator
 
 Separator sub-component
@@ -2981,6 +3044,199 @@ Shortcut sub-component
 Group sub-component (wraps DropdownMenuPrimitive)
 
 
+**Examples:**
+
+```tsx
+<DropdownMenu>
+      <DropdownMenu.Trigger render={<Button icon={PlusIcon}>Add</Button>} />
+      <DropdownMenu.Content>
+        <DropdownMenu.Item>Worker</DropdownMenu.Item>
+        <DropdownMenu.Item>Pages</DropdownMenu.Item>
+        <DropdownMenu.Item>KV Namespace</DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu>
+```
+
+```tsx
+<DropdownMenu>
+      <DropdownMenu.Trigger render={<Button>View Options</Button>} />
+      <DropdownMenu.Content>
+        <DropdownMenu.Group>
+          <DropdownMenu.Label>Display</DropdownMenu.Label>
+          <DropdownMenu.CheckboxItem
+            checked={showSidebar}
+            onCheckedChange={setShowSidebar}
+          >
+            Show sidebar
+          </DropdownMenu.CheckboxItem>
+          <DropdownMenu.CheckboxItem
+            checked={showLineNumbers}
+            onCheckedChange={setShowLineNumbers}
+          >
+            Show line numbers
+          </DropdownMenu.CheckboxItem>
+          <DropdownMenu.CheckboxItem
+            checked={wordWrap}
+            onCheckedChange={setWordWrap}
+          >
+            Word wrap
+          </DropdownMenu.CheckboxItem>
+        </DropdownMenu.Group>
+      </DropdownMenu.Content>
+    </DropdownMenu>
+```
+
+```tsx
+<DropdownMenu>
+      <DropdownMenu.Trigger render={<Button icon={UserIcon}>Account</Button>} />
+      <DropdownMenu.Content>
+        <DropdownMenu.Item icon={UserIcon}>Profile</DropdownMenu.Item>
+        <DropdownMenu.Item icon={CreditCardIcon}>Billing</DropdownMenu.Item>
+        <DropdownMenu.Item icon={MoonIcon}>Dark mode</DropdownMenu.Item>
+
+        {/* Language submenu with RadioGroup */}
+        <DropdownMenu.Sub>
+          <DropdownMenu.SubTrigger>Language</DropdownMenu.SubTrigger>
+          <DropdownMenu.SubContent>
+            <DropdownMenu.Group>
+              <DropdownMenu.RadioGroup
+                value={language}
+                onValueChange={setLanguage}
+              >
+                {languages.map((lang) => (
+                  <DropdownMenu.RadioItem key={lang.code} value={lang.code}>
+                    {lang.label}
+                    <DropdownMenu.RadioItemIndicator />
+                  </DropdownMenu.RadioItem>
+                ))}
+              </DropdownMenu.RadioGroup>
+            </DropdownMenu.Group>
+          </DropdownMenu.SubContent>
+        </DropdownMenu.Sub>
+
+        {/* Timezone submenu with RadioGroup */}
+        <DropdownMenu.Sub>
+          <DropdownMenu.SubTrigger>Set Timezone</DropdownMenu.SubTrigger>
+          <DropdownMenu.SubContent>
+            <DropdownMenu.Group>
+              <DropdownMenu.RadioGroup
+                value={timezone}
+                onValueChange={setTimezone}
+              >
+                {timezones.map((tz) => (
+                  <DropdownMenu.RadioItem key={tz.value} value={tz.value}>
+                    {tz.label}
+                    <DropdownMenu.RadioItemIndicator />
+                  </DropdownMenu.RadioItem>
+                ))}
+              </DropdownMenu.RadioGroup>
+            </DropdownMenu.Group>
+          </DropdownMenu.SubContent>
+        </DropdownMenu.Sub>
+
+        <DropdownMenu.Separator />
+        <DropdownMenu.Item icon={SignOutIcon} variant="danger">
+          Log out
+        </DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu>
+```
+
+```tsx
+<DropdownMenu>
+      <DropdownMenu.Trigger render={<Button>Edit</Button>} />
+      <DropdownMenu.Content>
+        <DropdownMenu.Item icon={PencilSimpleIcon}>Rename</DropdownMenu.Item>
+        <DropdownMenu.Item icon={CopyIcon}>Duplicate</DropdownMenu.Item>
+        <DropdownMenu.Separator />
+        <DropdownMenu.Item inset>Move to folder</DropdownMenu.Item>
+        <DropdownMenu.Item inset>Add to favorites</DropdownMenu.Item>
+        <DropdownMenu.Separator />
+        <DropdownMenu.Item icon={TrashIcon} variant="danger">
+          Delete
+        </DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu>
+```
+
+```tsx
+<div className="flex flex-col items-start gap-2">
+      <DropdownMenu>
+        <DropdownMenu.Trigger render={<Button>Actions</Button>} />
+        <DropdownMenu.Content>
+          <DropdownMenu.Item
+            icon={CopyIcon}
+            onClick={() => setLastAction("Duplicated")}
+          >
+            Duplicate
+          </DropdownMenu.Item>
+          <DropdownMenu.Item
+            icon={PencilSimpleIcon}
+            onClick={() => setLastAction("Renamed")}
+          >
+            Rename
+          </DropdownMenu.Item>
+          <DropdownMenu.Separator />
+          <DropdownMenu.Item
+            icon={TrashIcon}
+            variant="danger"
+            onClick={() => setLastAction("Deleted")}
+          >
+            Delete
+          </DropdownMenu.Item>
+        </DropdownMenu.Content>
+      </DropdownMenu>
+      {lastAction && (
+        <p className="text-sm text-kumo-subtle">
+          Last action: <span className="text-kumo-default">{lastAction}</span>
+        </p>
+      )}
+    </div>
+```
+
+```tsx
+<DropdownMenu>
+      <DropdownMenu.Trigger
+        render={<button type="button" className="rounded-full" />}
+      >
+        <span className="flex h-8 w-8 items-center justify-center rounded-full bg-kumo-brand text-sm font-medium text-white">
+          MR
+        </span>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content>
+        <DropdownMenu.Item icon={UserIcon}>Profile</DropdownMenu.Item>
+        <DropdownMenu.Item icon={GearIcon}>Settings</DropdownMenu.Item>
+        <DropdownMenu.Separator />
+        <DropdownMenu.Item icon={SignOutIcon} variant="danger">
+          Log out
+        </DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu>
+```
+
+```tsx
+<DropdownMenu>
+      <DropdownMenu.Trigger render={<Button>Resources</Button>} />
+      <DropdownMenu.Content>
+        <DropdownMenu.LinkItem href="/settings" icon={GearIcon}>
+          Settings
+        </DropdownMenu.LinkItem>
+        <DropdownMenu.LinkItem href="/docs" icon={BookOpenIcon}>
+          Documentation
+        </DropdownMenu.LinkItem>
+        <DropdownMenu.Separator />
+        <DropdownMenu.LinkItem
+          href="https://developers.cloudflare.com"
+          target="_blank"
+          icon={ArrowSquareOutIcon}
+        >
+          Developer Docs
+        </DropdownMenu.LinkItem>
+      </DropdownMenu.Content>
+    </DropdownMenu>
+```
+
+
 ---
 
 ### Empty
@@ -3014,7 +3270,7 @@ Placeholder shown when a list, table, or page has no content to display.
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-control`, `bg-kumo-overlay`, `border-kumo-fill`, `border-kumo-interact`, `text-kumo-brand`, `text-kumo-default`, `text-kumo-inactive`, `text-kumo-strong`, `text-kumo-success`
+`bg-kumo-control`, `bg-kumo-overlay`, `border-kumo-fill`, `border-kumo-interact`, `text-kumo-brand`, `text-kumo-default`, `text-kumo-inactive`, `text-kumo-subtle`, `text-kumo-success`
 
 **Examples:**
 
@@ -3463,7 +3719,7 @@ Input component
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-control`, `ring-kumo-danger`, `ring-kumo-focus`, `ring-kumo-line`, `text-kumo-default`, `text-kumo-subtle`
+`bg-kumo-control`, `ring-kumo-danger`, `ring-kumo-focus`, `ring-kumo-line`, `text-kumo-default`
 
 **Styling:**
 
@@ -3962,7 +4218,7 @@ Label component for form fields.  Provides a standardized way to display labels
 
 **Colors (kumo tokens used):**
 
-`text-kumo-default`, `text-kumo-strong`
+`text-kumo-default`, `text-kumo-subtle`
 
 **Examples:**
 
@@ -4043,7 +4299,7 @@ Accepts a `ReactElement` or a function that returns the element to render.
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-base`, `bg-kumo-elevated`, `ring-kumo-fill`, `ring-kumo-hairline`, `ring-kumo-line`, `text-kumo-strong`
+`bg-kumo-base`, `bg-kumo-elevated`, `ring-kumo-fill`, `ring-kumo-hairline`, `ring-kumo-line`, `text-kumo-subtle`
 
 **Styling:**
 
@@ -4351,7 +4607,7 @@ Progress bar showing a measured value within a known range (e.g. quota usage).
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-fill`, `text-kumo-default`, `text-kumo-strong`
+`bg-kumo-fill`, `text-kumo-default`, `text-kumo-subtle`
 
 **Examples:**
 
@@ -4415,7 +4671,7 @@ For visible text like "Showing X of Y", use render props on sub-components:
 
 **Colors (kumo tokens used):**
 
-`border-kumo-hairline`, `ring-kumo-hairline`, `text-kumo-strong`
+`border-kumo-hairline`, `ring-kumo-hairline`, `text-kumo-subtle`
 
 **Styling:**
 
@@ -5745,7 +6001,7 @@ Sidebar — responsive navigation panel with expand/collapse support.  Compound
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-base`, `bg-kumo-brand`, `bg-kumo-hairline`, `bg-kumo-overlay`, `bg-kumo-recessed`, `bg-kumo-tint`, `border-kumo-hairline`, `ring-kumo-brand`, `ring-kumo-hairline`, `text-kumo-default`, `text-kumo-strong`, `text-kumo-subtle`
+`bg-kumo-base`, `bg-kumo-brand`, `bg-kumo-hairline`, `bg-kumo-overlay`, `bg-kumo-recessed`, `bg-kumo-tint`, `border-kumo-hairline`, `ring-kumo-brand`, `ring-kumo-hairline`, `text-kumo-default`, `text-kumo-subtle`
 
 **Styling:**
 
@@ -7117,7 +7373,7 @@ Tab navigation component with segmented or underline style. Built on Base UI Tab
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-base`, `bg-kumo-brand`, `bg-kumo-recessed`, `bg-kumo-tint`, `border-kumo-hairline`, `ring-kumo-brand`, `ring-kumo-focus`, `ring-kumo-hairline`, `ring-kumo-line`, `text-kumo-default`, `text-kumo-strong`, `text-kumo-subtle`
+`bg-kumo-base`, `bg-kumo-brand`, `bg-kumo-recessed`, `bg-kumo-tint`, `border-kumo-hairline`, `ring-kumo-brand`, `ring-kumo-focus`, `ring-kumo-hairline`, `ring-kumo-line`, `text-kumo-default`, `text-kumo-subtle`
 
 **Styling:**
 
@@ -7377,11 +7633,20 @@ Toasty — toast notification provider and viewport.  Renders a `Toast.Provider`
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-base`, `bg-kumo-contrast`, `bg-kumo-control`, `bg-kumo-danger`, `bg-kumo-fill-hover`, `bg-kumo-info`, `bg-kumo-success`, `bg-kumo-warning`, `border-kumo-fill`, `ring-kumo-danger`, `ring-kumo-hairline`, `ring-kumo-info`, `ring-kumo-line`, `ring-kumo-success`, `ring-kumo-warning`, `text-kumo-danger`, `text-kumo-default`, `text-kumo-info`, `text-kumo-strong`, `text-kumo-subtle`, `text-kumo-success`, `text-kumo-warning`
+`bg-kumo-base`, `bg-kumo-contrast`, `bg-kumo-control`, `bg-kumo-danger`, `bg-kumo-fill-hover`, `bg-kumo-info`, `bg-kumo-success`, `bg-kumo-warning`, `border-kumo-fill`, `ring-kumo-danger`, `ring-kumo-hairline`, `ring-kumo-info`, `ring-kumo-line`, `ring-kumo-success`, `ring-kumo-warning`, `text-kumo-danger`, `text-kumo-default`, `text-kumo-info`, `text-kumo-subtle`, `text-kumo-success`, `text-kumo-warning`
 
 **Styling:**
 
 
+**Examples:**
+
+```tsx
+<Toasty>
+      <ToastTitleOnlyButton />
+    </Toasty>
+```
+
+
 ---
 
 ### Tooltip
@@ -7412,6 +7677,27 @@ Accessible popup that shows additional information on hover/focus. Wrap your app
 
 `bg-kumo-base`, `fill-kumo-base`, `fill-kumo-tip-shadow`, `fill-kumo-tip-stroke`, `outline-kumo-fill`, `text-kumo-default`
 
+**Sub-Components:**
+
+This is a compound component. Use these sub-components:
+
+#### Tooltip.Provider
+
+Groups multiple tooltips so that after the first tooltip is shown, switching to another skips the open delay. Place once at your app root or layout.
+
+Props:
+- `delay`: number [default: 600] - How long to wait (ms) before opening a tooltip once the pointer enters the trigger.
+- `closeDelay`: number [default: 0] - How long to wait (ms) before closing a tooltip.
+- `timeout`: number [default: 400] - Grace period (ms) during which a just-closed tooltip's delay is skipped when another tooltip opens.
+
+Usage:
+```tsx
+<TooltipProvider>
+  <App />
+</TooltipProvider>
+```
+
+
 **Examples:**
 
 ```tsx

package/dist/.build-complete

@@ -1 +1 @@
-1777563970979
+1777656981695

package/dist/blocks-source/resource-list/resource-list.tsx

@@ -41,7 +41,7 @@ export function ResourceListPage({
               {title}
             </h1>
           </div>
-          <p className="hidden p-0 text-lg leading-normal text-pretty text-kumo-strong md:block">
+          <p className="hidden p-0 text-lg leading-normal text-pretty text-kumo-subtle md:block">
             {description}
           </p>
         </div>

package/dist/chunks/{autocomplete-cs3fwy6lwzlyirpq.js → autocomplete-48aq0d244bs2e8zv.js}

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as t, jsxs as A } from "react/jsx-runtime";
 import { CheckIcon as g } from "@phosphor-icons/react";
-import { K as c, i as y } from "./input-lpa5fc75tgrraafv.js";
+import { K as c, i as y } from "./input-ncfowphv81yq7fyy.js";
 import { c as s } from "./cn-ct4n7r74mh8y0f48.js";
-import { F as C } from "./field-lnj619xpe8zjd26r.js";
+import { F as C } from "./field-c0wf94plit2gci59.js";
 import { a6 as I, ab as T, bu as k, a8 as v, S as G, a9 as L, aa as O, bt as P, am as _, an as w, ao as z, ac as E } from "./vendor-base-ui-ie71jahf0czyf58j.js";
 const D = {
   size: c.size
@@ -171,4 +171,4 @@ export {
   $ as a,
   u as b
 };
-//# sourceMappingURL=autocomplete-cs3fwy6lwzlyirpq.js.map
+//# sourceMappingURL=autocomplete-48aq0d244bs2e8zv.js.map

package/dist/chunks/{autocomplete-cs3fwy6lwzlyirpq.js.map → autocomplete-48aq0d244bs2e8zv.js.map}

@@ -1 +1 @@
-{"version":3,"file":"autocomplete-cs3fwy6lwzlyirpq.js","sources":["../../src/components/autocomplete/autocomplete.tsx"],"sourcesContent":["import { Autocomplete as AutocompleteBase } from \"@base-ui/react/autocomplete\";\nimport { CheckIcon } from \"@phosphor-icons/react\";\nimport { type ReactNode } from \"react\";\nimport { inputVariants, KUMO_INPUT_VARIANTS } from \"../input/input\";\nimport { cn } from \"../../utils/cn\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\n\n/** Autocomplete variant definitions. */\nexport const KUMO_AUTOCOMPLETE_VARIANTS = {\n  size: KUMO_INPUT_VARIANTS.size,\n} as const;\n\nexport const KUMO_AUTOCOMPLETE_DEFAULT_VARIANTS = {\n  size: \"base\",\n} as const;\n\n// Derived types from KUMO_AUTOCOMPLETE_VARIANTS\nexport type KumoAutocompleteSize = keyof typeof KUMO_AUTOCOMPLETE_VARIANTS.size;\n\nexport interface KumoAutocompleteVariantsProps {\n  /**\n   * Size of the autocomplete input. Matches Input component sizes.\n   * - `\"xs\"` — Extra small for compact UIs (h-5 / 20px)\n   * - `\"sm\"` — Small for secondary fields (h-6.5 / 26px)\n   * - `\"base\"` — Default size (h-9 / 36px)\n   * - `\"lg\"` — Large for prominent fields (h-10 / 40px)\n   * @default \"base\"\n   */\n  size?: KumoAutocompleteSize;\n}\n\nexport function autocompleteVariants({\n  size = KUMO_AUTOCOMPLETE_DEFAULT_VARIANTS.size,\n}: KumoAutocompleteVariantsProps = {}) {\n  return cn(KUMO_INPUT_VARIANTS.size[size].classes);\n}\n\n/**\n * Autocomplete component props.\n *\n * Autocomplete provides a free-form text input with optional suggestions in a\n * filterable dropdown. Unlike Combobox, the input value is not constrained to\n * the suggestion list items.\n *\n * @example\n * ```tsx\n * <Autocomplete label=\"Country\" items={countries}>\n *   <Autocomplete.InputGroup />\n *   <Autocomplete.Content>\n *     <Autocomplete.List>\n *       {(item) => <Autocomplete.Item value={item}>{item}</Autocomplete.Item>}\n *     </Autocomplete.List>\n *   </Autocomplete.Content>\n * </Autocomplete>\n * ```\n */\nexport interface AutocompleteProps {\n  /** Array of items to display in the dropdown */\n  items: unknown[];\n  /** The controlled input value */\n  value?: string | number | string[];\n  /** The uncontrolled default input value */\n  defaultValue?: string | number | string[];\n  /** Callback when the input value changes */\n  onValueChange?: AutocompleteBase.Root.Props<unknown>[\"onValueChange\"];\n  /** Whether the popup is open (controlled) */\n  open?: boolean;\n  /** Callback when the popup opens or closes */\n  onOpenChange?: AutocompleteBase.Root.Props<unknown>[\"onOpenChange\"];\n  /** Autocomplete content (input group, popup content) */\n  children: ReactNode;\n  /** Additional CSS classes */\n  className?: string;\n  /** Label content (enables Field wrapper) */\n  label?: ReactNode;\n  /** Whether the field is required */\n  required?: boolean;\n  /** Tooltip content to display next to the label */\n  labelTooltip?: ReactNode;\n  /** Helper text displayed below the field */\n  description?: ReactNode;\n  /** Error message or validation error object */\n  error?: string | { message: ReactNode; match: FieldErrorMatch };\n}\n\nfunction Root<ItemValue>({\n  label,\n  required,\n  labelTooltip,\n  description,\n  error,\n  children,\n  ...props\n}: AutocompleteBase.Root.Props<ItemValue> & {\n  label?: ReactNode;\n  required?: boolean;\n  labelTooltip?: ReactNode;\n  description?: ReactNode;\n  error?: string | { message: ReactNode; match: FieldErrorMatch };\n}) {\n  const rootProps = props as Omit<\n    AutocompleteBase.Root.Props<ItemValue>,\n    \"items\"\n  > & {\n    items?: readonly ItemValue[];\n  };\n  const control = (\n    <AutocompleteBase.Root {...rootProps}>{children}</AutocompleteBase.Root>\n  );\n\n  if (label) {\n    return (\n      <Field\n        label={label}\n        required={required}\n        labelTooltip={labelTooltip}\n        description={description}\n        error={\n          error\n            ? typeof error === \"string\"\n              ? { message: error, match: true }\n              : error\n            : undefined\n        }\n      >\n        {control}\n      </Field>\n    );\n  }\n\n  return control;\n}\n\nfunction InputGroup({\n  className,\n  size = KUMO_AUTOCOMPLETE_DEFAULT_VARIANTS.size,\n  placeholder,\n}: {\n  className?: string;\n  size?: KumoAutocompleteSize;\n  placeholder?: string;\n}) {\n  return (\n    <AutocompleteBase.Input\n      className={cn(\n        inputVariants({ size, focusIndicator: true }),\n        \"w-full\",\n        className,\n      )}\n      placeholder={placeholder}\n    />\n  );\n}\n\nfunction Content({\n  children,\n  className,\n  align = \"start\",\n  sideOffset = 4,\n  alignOffset,\n  side,\n}: {\n  children?: ReactNode;\n  className?: string;\n  align?: AutocompleteBase.Positioner.Props[\"align\"];\n  alignOffset?: AutocompleteBase.Positioner.Props[\"alignOffset\"];\n  side?: AutocompleteBase.Positioner.Props[\"side\"];\n  sideOffset?: AutocompleteBase.Positioner.Props[\"sideOffset\"];\n}) {\n  return (\n    <AutocompleteBase.Portal>\n      <AutocompleteBase.Positioner\n        className=\"outline-none\"\n        align={align}\n        sideOffset={sideOffset}\n        alignOffset={alignOffset}\n        side={side}\n      >\n        <AutocompleteBase.Popup\n          className={(state: AutocompleteBase.Popup.State) =>\n            cn(\n              \"flex flex-col\",\n              \"max-h-[min(var(--available-height),24rem)] max-w-(--available-width) min-w-(--anchor-width) py-1.5\",\n              \"bg-kumo-control text-kumo-default\",\n              \"rounded-lg shadow-lg ring ring-kumo-line\",\n              state.empty && \"hidden\",\n              className,\n            )\n          }\n        >\n          {children}\n        </AutocompleteBase.Popup>\n      </AutocompleteBase.Positioner>\n    </AutocompleteBase.Portal>\n  );\n}\n\nfunction List({\n  className,\n  ...props\n}: AutocompleteBase.List.Props & { className?: string }) {\n  return (\n    <AutocompleteBase.List\n      {...props}\n      className={cn(\n        \"min-h-0 flex-1 overflow-y-auto overscroll-contain scroll-pt-2 scroll-pb-2\",\n        className,\n      )}\n    />\n  );\n}\n\nfunction Item({ children, ...props }: AutocompleteBase.Item.Props) {\n  return (\n    <AutocompleteBase.Item\n      {...props}\n      className=\"group mx-1.5 grid cursor-pointer grid-cols-[1fr_16px] gap-2 rounded px-2 py-1.5 text-base data-highlighted:bg-kumo-overlay data-selected:font-medium\"\n    >\n      <div className=\"col-start-1\">{children}</div>\n      <span className=\"col-start-2 hidden items-center group-data-selected:flex\">\n        <CheckIcon size={14} />\n      </span>\n    </AutocompleteBase.Item>\n  );\n}\n\nfunction GroupLabel(props: AutocompleteBase.GroupLabel.Props) {\n  return (\n    <AutocompleteBase.GroupLabel\n      {...props}\n      className={cn(\n        \"mx-1.5 px-2 py-1.5 text-sm text-kumo-strong\",\n        props.className,\n      )}\n    />\n  );\n}\n\nfunction Group(props: AutocompleteBase.Group.Props) {\n  return (\n    <AutocompleteBase.Group\n      {...props}\n      className=\"border-t border-kumo-line mt-2 pt-2 first:border-t-0 first:mt-0 first:pt-0\"\n    />\n  );\n}\n\nfunction Separator(props: AutocompleteBase.Separator.Props) {\n  return (\n    <AutocompleteBase.Separator\n      {...props}\n      className={cn(\"mx-0 my-1 h-px bg-kumo-line\", props.className)}\n    />\n  );\n}\n\nRoot.displayName = \"Autocomplete.Root\";\nInputGroup.displayName = \"Autocomplete.InputGroup\";\nContent.displayName = \"Autocomplete.Content\";\nItem.displayName = \"Autocomplete.Item\";\nGroupLabel.displayName = \"Autocomplete.GroupLabel\";\nGroup.displayName = \"Autocomplete.Group\";\nSeparator.displayName = \"Autocomplete.Separator\";\n\n/**\n * Autocomplete — free-form text input with an optional filtered suggestion list.\n *\n * Unlike Combobox, the input value is not restricted to items in the list.\n * Use Combobox when the selected value must come from the list.\n *\n * Compound component: `Autocomplete` (Root), `.InputGroup`, `.Content`, `.Item`,\n * `.GroupLabel`, `.Group`, `.Separator`, `.List`, `.Collection`.\n *\n * `InputGroup` renders the text input with Input component styling.\n * Pass a `size` prop to `InputGroup` to match the Input component sizes.\n *\n * @example\n * ```tsx\n * <Autocomplete items={fruits} label=\"Fruit\">\n *   <Autocomplete.InputGroup size=\"base\" />\n *   <Autocomplete.Content>\n *     <Autocomplete.List>\n *       {(item) => <Autocomplete.Item value={item}>{item}</Autocomplete.Item>}\n *     </Autocomplete.List>\n *   </Autocomplete.Content>\n * </Autocomplete>\n * ```\n *\n * @see https://base-ui.com/react/components/autocomplete\n */\nexport const Autocomplete = Object.assign(Root, {\n  // Styled compound sub-components\n  InputGroup,\n  Content,\n  Item,\n  GroupLabel,\n  Group,\n  Separator,\n  List,\n\n  // Pass-through Base UI sub-components\n  Empty: AutocompleteBase.Empty,\n  Collection: AutocompleteBase.Collection,\n});\n"],"names":["KUMO_AUTOCOMPLETE_VARIANTS","KUMO_INPUT_VARIANTS","KUMO_AUTOCOMPLETE_DEFAULT_VARIANTS","autocompleteVariants","size","cn","Root","label","required","labelTooltip","description","error","children","props","control","jsx","AutocompleteBase.Root","Field","InputGroup","className","placeholder","AutocompleteBase.Input","inputVariants","Content","align","sideOffset","alignOffset","side","AutocompleteBase.Portal","AutocompleteBase.Positioner","AutocompleteBase.Popup","state","List","AutocompleteBase.List","Item","jsxs","AutocompleteBase.Item","CheckIcon","GroupLabel","AutocompleteBase.GroupLabel","Group","AutocompleteBase.Group","Separator","AutocompleteBase.Separator","Autocomplete","AutocompleteBase.Empty","AutocompleteBase.Collection"],"mappings":"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"}
+{"version":3,"file":"autocomplete-48aq0d244bs2e8zv.js","sources":["../../src/components/autocomplete/autocomplete.tsx"],"sourcesContent":["import { Autocomplete as AutocompleteBase } from \"@base-ui/react/autocomplete\";\nimport { CheckIcon } from \"@phosphor-icons/react\";\nimport { type ReactNode } from \"react\";\nimport { inputVariants, KUMO_INPUT_VARIANTS } from \"../input/input\";\nimport { cn } from \"../../utils/cn\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\n\n/** Autocomplete variant definitions. */\nexport const KUMO_AUTOCOMPLETE_VARIANTS = {\n  size: KUMO_INPUT_VARIANTS.size,\n} as const;\n\nexport const KUMO_AUTOCOMPLETE_DEFAULT_VARIANTS = {\n  size: \"base\",\n} as const;\n\n// Derived types from KUMO_AUTOCOMPLETE_VARIANTS\nexport type KumoAutocompleteSize = keyof typeof KUMO_AUTOCOMPLETE_VARIANTS.size;\n\nexport interface KumoAutocompleteVariantsProps {\n  /**\n   * Size of the autocomplete input. Matches Input component sizes.\n   * - `\"xs\"` — Extra small for compact UIs (h-5 / 20px)\n   * - `\"sm\"` — Small for secondary fields (h-6.5 / 26px)\n   * - `\"base\"` — Default size (h-9 / 36px)\n   * - `\"lg\"` — Large for prominent fields (h-10 / 40px)\n   * @default \"base\"\n   */\n  size?: KumoAutocompleteSize;\n}\n\nexport function autocompleteVariants({\n  size = KUMO_AUTOCOMPLETE_DEFAULT_VARIANTS.size,\n}: KumoAutocompleteVariantsProps = {}) {\n  return cn(KUMO_INPUT_VARIANTS.size[size].classes);\n}\n\n/**\n * Autocomplete component props.\n *\n * Autocomplete provides a free-form text input with optional suggestions in a\n * filterable dropdown. Unlike Combobox, the input value is not constrained to\n * the suggestion list items.\n *\n * @example\n * ```tsx\n * <Autocomplete label=\"Country\" items={countries}>\n *   <Autocomplete.InputGroup />\n *   <Autocomplete.Content>\n *     <Autocomplete.List>\n *       {(item) => <Autocomplete.Item value={item}>{item}</Autocomplete.Item>}\n *     </Autocomplete.List>\n *   </Autocomplete.Content>\n * </Autocomplete>\n * ```\n */\nexport interface AutocompleteProps {\n  /** Array of items to display in the dropdown */\n  items: unknown[];\n  /** The controlled input value */\n  value?: string | number | string[];\n  /** The uncontrolled default input value */\n  defaultValue?: string | number | string[];\n  /** Callback when the input value changes */\n  onValueChange?: AutocompleteBase.Root.Props<unknown>[\"onValueChange\"];\n  /** Whether the popup is open (controlled) */\n  open?: boolean;\n  /** Callback when the popup opens or closes */\n  onOpenChange?: AutocompleteBase.Root.Props<unknown>[\"onOpenChange\"];\n  /** Autocomplete content (input group, popup content) */\n  children: ReactNode;\n  /** Additional CSS classes */\n  className?: string;\n  /** Label content (enables Field wrapper) */\n  label?: ReactNode;\n  /** Whether the field is required */\n  required?: boolean;\n  /** Tooltip content to display next to the label */\n  labelTooltip?: ReactNode;\n  /** Helper text displayed below the field */\n  description?: ReactNode;\n  /** Error message or validation error object */\n  error?: string | { message: ReactNode; match: FieldErrorMatch };\n}\n\nfunction Root<ItemValue>({\n  label,\n  required,\n  labelTooltip,\n  description,\n  error,\n  children,\n  ...props\n}: AutocompleteBase.Root.Props<ItemValue> & {\n  label?: ReactNode;\n  required?: boolean;\n  labelTooltip?: ReactNode;\n  description?: ReactNode;\n  error?: string | { message: ReactNode; match: FieldErrorMatch };\n}) {\n  const rootProps = props as Omit<\n    AutocompleteBase.Root.Props<ItemValue>,\n    \"items\"\n  > & {\n    items?: readonly ItemValue[];\n  };\n  const control = (\n    <AutocompleteBase.Root {...rootProps}>{children}</AutocompleteBase.Root>\n  );\n\n  if (label) {\n    return (\n      <Field\n        label={label}\n        required={required}\n        labelTooltip={labelTooltip}\n        description={description}\n        error={\n          error\n            ? typeof error === \"string\"\n              ? { message: error, match: true }\n              : error\n            : undefined\n        }\n      >\n        {control}\n      </Field>\n    );\n  }\n\n  return control;\n}\n\nfunction InputGroup({\n  className,\n  size = KUMO_AUTOCOMPLETE_DEFAULT_VARIANTS.size,\n  placeholder,\n}: {\n  className?: string;\n  size?: KumoAutocompleteSize;\n  placeholder?: string;\n}) {\n  return (\n    <AutocompleteBase.Input\n      className={cn(\n        inputVariants({ size, focusIndicator: true }),\n        \"w-full\",\n        className,\n      )}\n      placeholder={placeholder}\n    />\n  );\n}\n\nfunction Content({\n  children,\n  className,\n  align = \"start\",\n  sideOffset = 4,\n  alignOffset,\n  side,\n}: {\n  children?: ReactNode;\n  className?: string;\n  align?: AutocompleteBase.Positioner.Props[\"align\"];\n  alignOffset?: AutocompleteBase.Positioner.Props[\"alignOffset\"];\n  side?: AutocompleteBase.Positioner.Props[\"side\"];\n  sideOffset?: AutocompleteBase.Positioner.Props[\"sideOffset\"];\n}) {\n  return (\n    <AutocompleteBase.Portal>\n      <AutocompleteBase.Positioner\n        className=\"outline-none\"\n        align={align}\n        sideOffset={sideOffset}\n        alignOffset={alignOffset}\n        side={side}\n      >\n        <AutocompleteBase.Popup\n          className={(state: AutocompleteBase.Popup.State) =>\n            cn(\n              \"flex flex-col\",\n              \"max-h-[min(var(--available-height),24rem)] max-w-(--available-width) min-w-(--anchor-width) py-1.5\",\n              \"bg-kumo-control text-kumo-default\",\n              \"rounded-lg shadow-lg ring ring-kumo-line\",\n              state.empty && \"hidden\",\n              className,\n            )\n          }\n        >\n          {children}\n        </AutocompleteBase.Popup>\n      </AutocompleteBase.Positioner>\n    </AutocompleteBase.Portal>\n  );\n}\n\nfunction List({\n  className,\n  ...props\n}: AutocompleteBase.List.Props & { className?: string }) {\n  return (\n    <AutocompleteBase.List\n      {...props}\n      className={cn(\n        \"min-h-0 flex-1 overflow-y-auto overscroll-contain scroll-pt-2 scroll-pb-2\",\n        className,\n      )}\n    />\n  );\n}\n\nfunction Item({ children, ...props }: AutocompleteBase.Item.Props) {\n  return (\n    <AutocompleteBase.Item\n      {...props}\n      className=\"group mx-1.5 grid cursor-pointer grid-cols-[1fr_16px] gap-2 rounded px-2 py-1.5 text-base data-highlighted:bg-kumo-overlay data-selected:font-medium\"\n    >\n      <div className=\"col-start-1\">{children}</div>\n      <span className=\"col-start-2 hidden items-center group-data-selected:flex\">\n        <CheckIcon size={14} />\n      </span>\n    </AutocompleteBase.Item>\n  );\n}\n\nfunction GroupLabel(props: AutocompleteBase.GroupLabel.Props) {\n  return (\n    <AutocompleteBase.GroupLabel\n      {...props}\n      className={cn(\n        \"mx-1.5 px-2 py-1.5 text-sm text-kumo-strong\",\n        props.className,\n      )}\n    />\n  );\n}\n\nfunction Group(props: AutocompleteBase.Group.Props) {\n  return (\n    <AutocompleteBase.Group\n      {...props}\n      className=\"border-t border-kumo-line mt-2 pt-2 first:border-t-0 first:mt-0 first:pt-0\"\n    />\n  );\n}\n\nfunction Separator(props: AutocompleteBase.Separator.Props) {\n  return (\n    <AutocompleteBase.Separator\n      {...props}\n      className={cn(\"mx-0 my-1 h-px bg-kumo-line\", props.className)}\n    />\n  );\n}\n\nRoot.displayName = \"Autocomplete.Root\";\nInputGroup.displayName = \"Autocomplete.InputGroup\";\nContent.displayName = \"Autocomplete.Content\";\nItem.displayName = \"Autocomplete.Item\";\nGroupLabel.displayName = \"Autocomplete.GroupLabel\";\nGroup.displayName = \"Autocomplete.Group\";\nSeparator.displayName = \"Autocomplete.Separator\";\n\n/**\n * Autocomplete — free-form text input with an optional filtered suggestion list.\n *\n * Unlike Combobox, the input value is not restricted to items in the list.\n * Use Combobox when the selected value must come from the list.\n *\n * Compound component: `Autocomplete` (Root), `.InputGroup`, `.Content`, `.Item`,\n * `.GroupLabel`, `.Group`, `.Separator`, `.List`, `.Collection`.\n *\n * `InputGroup` renders the text input with Input component styling.\n * Pass a `size` prop to `InputGroup` to match the Input component sizes.\n *\n * @example\n * ```tsx\n * <Autocomplete items={fruits} label=\"Fruit\">\n *   <Autocomplete.InputGroup size=\"base\" />\n *   <Autocomplete.Content>\n *     <Autocomplete.List>\n *       {(item) => <Autocomplete.Item value={item}>{item}</Autocomplete.Item>}\n *     </Autocomplete.List>\n *   </Autocomplete.Content>\n * </Autocomplete>\n * ```\n *\n * @see https://base-ui.com/react/components/autocomplete\n */\nexport const Autocomplete = Object.assign(Root, {\n  // Styled compound sub-components\n  InputGroup,\n  Content,\n  Item,\n  GroupLabel,\n  Group,\n  Separator,\n  List,\n\n  // Pass-through Base UI sub-components\n  Empty: AutocompleteBase.Empty,\n  Collection: AutocompleteBase.Collection,\n});\n"],"names":["KUMO_AUTOCOMPLETE_VARIANTS","KUMO_INPUT_VARIANTS","KUMO_AUTOCOMPLETE_DEFAULT_VARIANTS","autocompleteVariants","size","cn","Root","label","required","labelTooltip","description","error","children","props","control","jsx","AutocompleteBase.Root","Field","InputGroup","className","placeholder","AutocompleteBase.Input","inputVariants","Content","align","sideOffset","alignOffset","side","AutocompleteBase.Portal","AutocompleteBase.Positioner","AutocompleteBase.Popup","state","List","AutocompleteBase.List","Item","jsxs","AutocompleteBase.Item","CheckIcon","GroupLabel","AutocompleteBase.GroupLabel","Group","AutocompleteBase.Group","Separator","AutocompleteBase.Separator","Autocomplete","AutocompleteBase.Empty","AutocompleteBase.Collection"],"mappings":"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"}

package/dist/chunks/{checkbox-eren6w2csum1xghg.js → checkbox-hvxfvhtx1qjo2mww.js}

@@ -3,7 +3,7 @@ import { jsx as e, jsxs as x } from "react/jsx-runtime";
 import { forwardRef as p, createContext as B, useContext as F } from "react";
 import { MinusIcon as C, CheckIcon as v } from "@phosphor-icons/react";
 import { c as i } from "./cn-ct4n7r74mh8y0f48.js";
-import { L as E } from "./label-be8m7qzlakzig2sl.js";
+import { L as E } from "./label-c3h9i3y4wiccelt7.js";
 import { L as N, N as y, O as K, P as R, Q as w, C as _, U as G } from "./vendor-base-ui-ie71jahf0czyf58j.js";
 const H = {
   variant: {
@@ -207,4 +207,4 @@ export {
   H as K,
   X as a
 };
-//# sourceMappingURL=checkbox-eren6w2csum1xghg.js.map
+//# sourceMappingURL=checkbox-hvxfvhtx1qjo2mww.js.map