@cloudflare/kumo 1.5.1 → 1.7.0

package/CHANGELOG.md

@@ -1,5 +1,118 @@
 # @cloudflare/kumo
 
+## 1.7.0
+
+### Minor Changes
+
+- d9b6498: feat(flow): add FlowDiagram components for building directed flow diagrams
+
+  New components for visualizing workflows and data flows:
+  - `FlowDiagram` - Root container with pan/scroll support for large diagrams
+  - `FlowNode` - Individual node with automatic connector points
+  - `FlowNode.Anchor` - Custom attachment points for connectors within nodes
+  - `FlowParallelNode` - Container for parallel branches with junction connectors
+
+  Adds `motion` as a new dependency for smooth panning interactions.
+
+### Patch Changes
+
+- 835a7c0: Deprecate DateRangePicker in favor of DatePicker with `mode="range"`
+  - Added `@deprecated` JSDoc comments to DateRangePicker component and its exports
+  - IDEs will now show deprecation warnings guiding users to use DatePicker instead
+
+- 391f13a: Prevented ClipboardText from overflowing with long text values.
+- d0e1d29: chore(kumo): add test scripts to root package.json
+
+## 1.6.0
+
+### Minor Changes
+
+- 50d4251: Add DatePicker component built on react-day-picker v9
+
+  **New Component: DatePicker**
+  - Three selection modes: `single`, `multiple`, and `range`
+  - Forwards all react-day-picker props for maximum flexibility
+  - Styled with Kumo tokens (no external CSS import needed)
+  - Supports localization via date-fns locales
+  - Supports timezone via `timeZone` prop
+  - Custom modifiers for highlighting specific dates
+  - Footer prop for messages/usage limits
+  - Accessible keyboard navigation with Kumo-styled focus rings
+
+  **Usage:**
+
+  ```tsx
+  // Single date
+  <DatePicker mode="single" selected={date} onSelect={setDate} />
+
+  // Multiple dates
+  <DatePicker mode="multiple" selected={dates} onSelect={setDates} max={5} />
+
+  // Date range
+  <DatePicker mode="range" selected={range} onSelect={setRange} numberOfMonths={2} />
+  ```
+
+  **Composing with Popover:**
+
+  ```tsx
+  <Popover>
+    <Popover.Trigger asChild>
+      <Button variant="outline" icon={CalendarDotsIcon}>
+        Pick a date
+      </Button>
+    </Popover.Trigger>
+    <Popover.Content className="p-3">
+      <DatePicker mode="single" selected={date} onSelect={setDate} />
+    </Popover.Content>
+  </Popover>
+  ```
+
+  **Note:** Consider using `DatePicker` with `mode="range"` instead of `DateRangePicker` for new projects - it offers more flexibility and a smaller bundle size.
+
+  **Internal changes:**
+  - Added `react-day-picker` v9 as a dependency
+  - Updated lint rule to allow components without KUMO\_\*\_VARIANTS exports
+  - Updated component registry codegen to handle variant-less components
+  - Disabled `jsx-a11y/no-autofocus` rule (intentional prop forwarding)
+
+- 93361ed: feat(clipboard-text): add slide animation with tooltip on copy
+
+### Patch Changes
+
+- c71bd9b: Updated the MenuBar so its child buttons align with the container’s outer corners.
+- 46ecf42: Fix `kumo add` to consolidate imports from `@cloudflare/kumo` into a single statement using inline `type` syntax.
+
+  Previously, running `kumo add DeleteResource` would produce non-conformant code with duplicate imports:
+
+  ```typescript
+  import { Dialog, DialogRoot } from "@cloudflare/kumo";
+  import { Input } from "@cloudflare/kumo";
+  import { Button } from "@cloudflare/kumo";
+  ```
+
+  Now it produces a single consolidated import:
+
+  ```typescript
+  import {
+    Dialog,
+    DialogRoot,
+    Input,
+    Button,
+    type DialogProps,
+  } from "@cloudflare/kumo";
+  ```
+
+  This satisfies ESLint's `import/no-duplicates` rule with `prefer-inline: true`.
+
+- a9167fa: Fix z-index stacking issues with nested portaled components (e.g., Select inside Dialog)
+  - Remove unnecessary z-index values from Dialog, Select, Combobox, and Dropdown
+  - Delete `.z-modal { z-index: 9999 }` - DOM order now handles stacking naturally
+  - Components opened later correctly appear on top without z-index wars
+
+- f02494d: fix(dropdown): improve external link detection to handle http:// and protocol-relative urls
+
+  updated the external link check to use a regex that matches `https://`, `http://`, and protocol-relative URLs (`//`). previously only `https://` links opened in a new tab.
+
 ## 1.5.1
 
 ### Patch Changes

package/ai/component-registry.json

@@ -647,17 +647,30 @@
           "type": "string",
           "optional": true,
           "description": "Additional CSS classes merged via `cn()`."
+        },
+        "tooltip": {
+          "type": "object",
+          "optional": true,
+          "description": "Tooltip config. Shows tooltip on hover, anchored toast on click."
+        },
+        "labels": {
+          "type": "object",
+          "optional": true,
+          "description": "Accessible labels for i18n."
         }
       },
       "examples": [
         "<ClipboardText text=\"0c239dd2\" />",
         "<ClipboardText text=\"abc123\" />",
         "<ClipboardText text=\"sk_live_51H8...\" />",
-        "<ClipboardText text=\"https://example.com/very/long/url/path\" />"
+        "<ClipboardText text=\"https://example.com/very/long/url/path\" />",
+        "<ClipboardText\n      text=\"npx kumo add button\"\n      tooltip={{ text: \"Copy\", copiedText: \"Copied!\", side: \"top\" }}\n    />"
       ],
       "colors": [
         "bg-kumo-base",
-        "border-kumo-line"
+        "border-kumo-line",
+        "outline-kumo-fill",
+        "text-kumo-default"
       ],
       "styling": {
         "baseTokens": [
@@ -2236,6 +2249,36 @@
         "text-kumo-subtle"
       ]
     },
+    "DatePicker": {
+      "name": "DatePicker",
+      "type": "component",
+      "description": "DatePicker — a date selection calendar.  Built on [react-day-picker](https://daypicker.dev) with Kumo styling. Supports three selection modes: single, multiple, and range.",
+      "importPath": "@cloudflare/kumo",
+      "category": "Other",
+      "props": {
+        "className": {
+          "type": "string",
+          "description": "Additional CSS classes"
+        },
+        "children": {
+          "type": "ReactNode",
+          "description": "Child elements"
+        }
+      },
+      "examples": [
+        "<div className=\"flex flex-col gap-4\">\n      <DatePicker mode=\"single\" selected={date} onChange={d => {\n        if (d) {\n          setDate(d);\n        }\n      }} />\n      <p className=\"text-sm text-kumo-subtle\">\n        Selected: {date ? date.toLocaleDateString() : \"None\"}\n      </p>\n    </div>",
+        "<div className=\"flex flex-col gap-4\">\n      <DatePicker\n        mode=\"multiple\"\n        selected={dates}\n        onChange={setDates}\n        max={5}\n      />\n      <p className=\"text-sm text-kumo-subtle\">\n        Selected: {dates?.length ?? 0} date(s)\n      </p>\n    </div>",
+        "<div className=\"flex flex-col gap-4\">\n      <DatePicker\n        mode=\"range\"\n        selected={range}\n        onChange={setRange}\n        numberOfMonths={2}\n      />\n      <p className=\"text-sm text-kumo-subtle\">\n        Range:{\" \"}\n        {range?.from\n          ? `${range.from.toLocaleDateString()} - ${range.to?.toLocaleDateString() ?? \"...\"}`\n          : \"None\"}\n      </p>\n    </div>",
+        "<div className=\"flex flex-col gap-4\">\n      <DatePicker\n        mode=\"range\"\n        selected={range}\n        onChange={setRange}\n        min={3}\n        max={7}\n        footer={\n          <span className=\"text-xs text-kumo-subtle\">Select 3-7 nights</span>\n        }\n      />\n    </div>",
+        "<Popover>\n      <Popover.Trigger asChild>\n        <Button variant=\"outline\" icon={CalendarDotsIcon}>\n          {date ? date.toLocaleDateString() : \"Pick a date\"}\n        </Button>\n      </Popover.Trigger>\n      <Popover.Content className=\"p-3\">\n        <DatePicker mode=\"single\" selected={date} onChange={setDate} />\n      </Popover.Content>\n    </Popover>",
+        "<Popover>\n      <Popover.Trigger asChild>\n        <Button variant=\"outline\" icon={CalendarDotsIcon}>\n          {formatRange()}\n        </Button>\n      </Popover.Trigger>\n      <Popover.Content className=\"p-3\">\n        <DatePicker\n          mode=\"range\"\n          selected={range}\n          onChange={setRange}\n          numberOfMonths={2}\n        />\n      </Popover.Content>\n    </Popover>",
+        "<Popover>\n      <Popover.Trigger asChild>\n        <Button variant=\"outline\" icon={CalendarDotsIcon}>\n          {formatRange()}\n        </Button>\n      </Popover.Trigger>\n      <Popover.Content className=\"p-0\">\n        <div className=\"flex\">\n          <div className=\"flex flex-col gap-1 border-r border-kumo-line p-2 text-sm\">\n            {presets.map((preset) => {\n              const isActive = isPresetActive(preset);\n              return (\n                <button\n                  key={preset.label}\n                  type=\"button\"\n                  onClick={() => handlePresetClick(preset)}\n                  className={`rounded-md px-3 py-1.5 text-left whitespace-nowrap ${isActive\n                    ? \"bg-kumo-bg-inverse text-kumo-text-inverse\"\n                    : \"text-kumo-strong hover:bg-kumo-control\"\n                    }`}\n                >\n                  {preset.label}\n                </button>\n              );\n            })}\n          </div>\n          <div className=\"p-3\">\n            <DatePicker\n              mode=\"range\"\n              selected={range}\n              onChange={setRange}\n              month={month}\n              onMonthChange={setMonth}\n              numberOfMonths={2}\n            />\n          </div>\n        </div>\n      </Popover.Content>\n    </Popover>",
+        "<DatePicker\n      mode=\"multiple\"\n      selected={dates}\n      onChange={setDates}\n      max={maxDays}\n      disabled={unavailableDates}\n      fixedWeeks\n      footer={\n        <p className=\"text-xs text-kumo-subtle pt-2 w-full\">\n          {selectedCount}/{maxDays} days selected. Grayed dates are unavailable.\n        </p>\n      }\n    />"
+      ],
+      "colors": [
+        "bg-kumo-base"
+      ]
+    },
     "DateRangePicker": {
       "name": "DateRangePicker",
       "type": "component",
@@ -2301,13 +2344,7 @@
           "description": "Callback when end date changes"
         }
       },
-      "examples": [
-        "<div className=\"flex flex-col gap-4\">\n      <DateRangePicker\n        onStartDateChange={setStartDate}\n        onEndDateChange={setEndDate}\n      />\n      <div className=\"text-sm text-kumo-subtle\">\n        {startDate && endDate ? (\n          <span>\n            Selected: {startDate.toLocaleDateString()} -{\" \"}\n            {endDate.toLocaleDateString()}\n          </span>\n        ) : startDate ? (\n          <span>Start: {startDate.toLocaleDateString()} (select end date)</span>\n        ) : (\n          <span>Select a date range</span>\n        )}\n      </div>\n    </div>",
-        "<div className=\"flex flex-col gap-8\">\n      <div>\n        <p className=\"mb-2 text-sm font-medium text-kumo-default\">Small</p>\n        <DateRangePicker\n          size=\"sm\"\n          onStartDateChange={() => {}}\n          onEndDateChange={() => {}}\n        />\n      </div>\n      <div>\n        <p className=\"mb-2 text-sm font-medium text-kumo-default\">\n          Base (default)\n        </p>\n        <DateRangePicker\n          size=\"base\"\n          onStartDateChange={() => {}}\n          onEndDateChange={() => {}}\n        />\n      </div>\n      <div>\n        <p className=\"mb-2 text-sm font-medium text-kumo-default\">Large</p>\n        <DateRangePicker\n          size=\"lg\"\n          onStartDateChange={() => {}}\n          onEndDateChange={() => {}}\n        />\n      </div>\n    </div>",
-        "<div className=\"flex flex-col gap-8\">\n      <div>\n        <p className=\"mb-2 text-sm font-medium text-kumo-default\">\n          Default variant\n        </p>\n        <DateRangePicker\n          variant=\"default\"\n          onStartDateChange={() => {}}\n          onEndDateChange={() => {}}\n        />\n      </div>\n      <div>\n        <p className=\"mb-2 text-sm font-medium text-kumo-default\">\n          Subtle variant\n        </p>\n        <DateRangePicker\n          variant=\"subtle\"\n          onStartDateChange={() => {}}\n          onEndDateChange={() => {}}\n        />\n      </div>\n    </div>",
-        "<DateRangePicker\n      timezone=\"London, UK (GMT+0)\"\n      onStartDateChange={() => {}}\n      onEndDateChange={() => {}}\n    />",
-        "<div className=\"flex flex-col gap-4\">\n      <DateRangePicker\n        onStartDateChange={setStartDate}\n        onEndDateChange={setEndDate}\n      />\n      <div className=\"rounded-lg bg-kumo-control p-3 text-sm text-kumo-default\">\n        <strong>Selection:</strong> {formatDateRange()}\n      </div>\n    </div>"
-      ],
+      "examples": [],
       "colors": [
         "bg-kumo-base",
         "bg-kumo-contrast",
@@ -2408,7 +2445,10 @@
       "examples": [
         "<Dialog.Root>\n      <Dialog.Trigger render={(p) => <Button {...p}>Click me</Button>} />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-start justify-between gap-4\">\n          <Dialog.Title className=\"text-2xl font-semibold\">\n            Modal Title\n          </Dialog.Title>\n          <Dialog.Close\n            aria-label=\"Close\"\n            render={(props) => (\n              <Button\n                {...props}\n                variant=\"secondary\"\n                shape=\"square\"\n                icon={<X />}\n                aria-label=\"Close\"\n              />\n            )}\n          />\n        </div>\n        <Dialog.Description className=\"text-kumo-subtle\">\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n          eiusmod tempor incididunt ut labore et dolore magna aliqua.\n        </Dialog.Description>\n      </Dialog>\n    </Dialog.Root>",
         "<Dialog.Root>\n      <Dialog.Trigger render={(p) => <Button {...p}>Delete</Button>} />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-start justify-between gap-4\">\n          <Dialog.Title className=\"text-2xl font-semibold\">\n            Modal Title\n          </Dialog.Title>\n          <Dialog.Close\n            aria-label=\"Close\"\n            render={(props) => (\n              <Button\n                {...props}\n                variant=\"secondary\"\n                shape=\"square\"\n                icon={<X />}\n                aria-label=\"Close\"\n              />\n            )}\n          />\n        </div>\n        <Dialog.Description className=\"text-kumo-subtle\">\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n          eiusmod tempor incididunt ut labore et dolore magna aliqua.\n        </Dialog.Description>\n        <div className=\"mt-8 flex justify-end gap-2\">\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"secondary\" {...props}>\n                Cancel\n              </Button>\n            )}\n          />\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"destructive\" {...props}>\n                Delete\n              </Button>\n            )}\n          />\n        </div>\n      </Dialog>\n    </Dialog.Root>",
-        "<Dialog.Root disablePointerDismissal>\n      <Dialog.Trigger\n        render={(p) => (\n          <Button {...p} variant=\"destructive\">\n            Delete Project\n          </Button>\n        )}\n      />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-center gap-3\">\n          <div className=\"flex h-10 w-10 items-center justify-center rounded-full bg-kumo-danger/20\">\n            <Warning size={20} className=\"text-kumo-danger\" />\n          </div>\n          <Dialog.Title className=\"text-xl font-semibold\">\n            Delete Project?\n          </Dialog.Title>\n        </div>\n        <Dialog.Description className=\"text-kumo-subtle\">\n          This action cannot be undone. This will permanently delete the project\n          and all associated data.\n        </Dialog.Description>\n        <div className=\"mt-8 flex justify-end gap-2\">\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"secondary\" {...props}>\n                Cancel\n              </Button>\n            )}\n          />\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"destructive\" {...props}>\n                Delete\n              </Button>\n            )}\n          />\n        </div>\n      </Dialog>\n    </Dialog.Root>"
+        "<Dialog.Root disablePointerDismissal>\n      <Dialog.Trigger\n        render={(p) => (\n          <Button {...p} variant=\"destructive\">\n            Delete Project\n          </Button>\n        )}\n      />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-center gap-3\">\n          <div className=\"flex h-10 w-10 items-center justify-center rounded-full bg-kumo-danger/20\">\n            <Warning size={20} className=\"text-kumo-danger\" />\n          </div>\n          <Dialog.Title className=\"text-xl font-semibold\">\n            Delete Project?\n          </Dialog.Title>\n        </div>\n        <Dialog.Description className=\"text-kumo-subtle\">\n          This action cannot be undone. This will permanently delete the project\n          and all associated data.\n        </Dialog.Description>\n        <div className=\"mt-8 flex justify-end gap-2\">\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"secondary\" {...props}>\n                Cancel\n              </Button>\n            )}\n          />\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"destructive\" {...props}>\n                Delete\n              </Button>\n            )}\n          />\n        </div>\n      </Dialog>\n    </Dialog.Root>",
+        "<Dialog.Root>\n      <Dialog.Trigger render={(p) => <Button {...p}>Open Form</Button>} />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-start justify-between gap-4\">\n          <Dialog.Title className=\"text-2xl font-semibold\">\n            Create Resource\n          </Dialog.Title>\n          <Dialog.Close\n            aria-label=\"Close\"\n            render={(props) => (\n              <Button\n                {...props}\n                variant=\"secondary\"\n                shape=\"square\"\n                icon={<X />}\n                aria-label=\"Close\"\n              />\n            )}\n          />\n        </div>\n        <Dialog.Description className=\"mb-4 text-kumo-subtle\">\n          Select a region for your new resource.\n        </Dialog.Description>\n        <Select\n          className=\"w-full\"\n          renderValue={(v) =>\n            regions.find((r) => r.value === v)?.label ?? \"Select region...\"\n          }\n        >\n          {regions.map((region) => (\n            <Select.Option key={region.value} value={region.value}>\n              {region.label}\n            </Select.Option>\n          ))}\n        </Select>\n        <div className=\"mt-8 flex justify-end gap-2\">\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"secondary\" {...props}>\n                Cancel\n              </Button>\n            )}\n          />\n          <Button variant=\"primary\">Create</Button>\n        </div>\n      </Dialog>\n    </Dialog.Root>",
+        "<Dialog.Root>\n      <Dialog.Trigger render={(p) => <Button {...p}>Open Form</Button>} />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-start justify-between gap-4\">\n          <Dialog.Title className=\"text-2xl font-semibold\">\n            Create Resource\n          </Dialog.Title>\n          <Dialog.Close\n            aria-label=\"Close\"\n            render={(props) => (\n              <Button\n                {...props}\n                variant=\"secondary\"\n                shape=\"square\"\n                icon={<X />}\n                aria-label=\"Close\"\n              />\n            )}\n          />\n        </div>\n        <Dialog.Description className=\"mb-4 text-kumo-subtle\">\n          Search and select a region for your new resource.\n        </Dialog.Description>\n        <Combobox value={value} onValueChange={setValue} items={regions}>\n          <Combobox.TriggerInput\n            className=\"w-full\"\n            placeholder=\"Search regions...\"\n          />\n          <Combobox.Content>\n            <Combobox.Empty>No regions found</Combobox.Empty>\n            <Combobox.List>\n              {(item: { value: string; label: string }) => (\n                <Combobox.Item key={item.value} value={item}>\n                  {item.label}\n                </Combobox.Item>\n              )}\n            </Combobox.List>\n          </Combobox.Content>\n        </Combobox>\n        <div className=\"mt-8 flex justify-end gap-2\">\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"secondary\" {...props}>\n                Cancel\n              </Button>\n            )}\n          />\n          <Button variant=\"primary\">Create</Button>\n        </div>\n      </Dialog>\n    </Dialog.Root>",
+        "<Dialog.Root>\n      <Dialog.Trigger render={(p) => <Button {...p}>Open Form</Button>} />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-start justify-between gap-4\">\n          <Dialog.Title className=\"text-2xl font-semibold\">\n            Resource Actions\n          </Dialog.Title>\n          <Dialog.Close\n            aria-label=\"Close\"\n            render={(props) => (\n              <Button\n                {...props}\n                variant=\"secondary\"\n                shape=\"square\"\n                icon={<X />}\n                aria-label=\"Close\"\n              />\n            )}\n          />\n        </div>\n        <Dialog.Description className=\"mb-4 text-kumo-subtle\">\n          Choose an action for the selected resource.\n        </Dialog.Description>\n        <DropdownMenu>\n          <DropdownMenu.Trigger render={<Button>Actions</Button>} />\n          <DropdownMenu.Content>\n            <DropdownMenu.Item>Edit</DropdownMenu.Item>\n            <DropdownMenu.Item>Duplicate</DropdownMenu.Item>\n            <DropdownMenu.Separator />\n            <DropdownMenu.Item variant=\"danger\">Delete</DropdownMenu.Item>\n          </DropdownMenu.Content>\n        </DropdownMenu>\n        <div className=\"mt-8 flex justify-end\">\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"secondary\" {...props}>\n                Close\n              </Button>\n            )}\n          />\n        </div>\n      </Dialog>\n    </Dialog.Root>"
       ],
       "colors": [
         "bg-kumo-base",
@@ -4859,6 +4899,7 @@
       ],
       "Other": [
         "CloudflareLogo",
+        "DatePicker",
         "Label",
         "Link",
         "SensitiveInput",
@@ -4896,6 +4937,7 @@
       "Collapsible",
       "Combobox",
       "CommandPalette",
+      "DatePicker",
       "DateRangePicker",
       "DeleteResource",
       "Dialog",
@@ -4938,6 +4980,7 @@
         "Collapsible",
         "Combobox",
         "CommandPalette",
+        "DatePicker",
         "DateRangePicker",
         "Dialog",
         "DropdownMenu",