@cloudflare/kumo 1.2.0 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @cloudflare/kumo
 
+## 1.3.0
+
+### Minor Changes
+
+- 6a40edf: add 'Delete Resource' block
+
 ## 1.2.0
 
 ### Minor Changes

package/ai/component-registry.json

@@ -1250,7 +1250,7 @@
             "xl": "Extra large dialog for detailed views"
           },
           "classes": {
-            "base": "min-w-96",
+            "base": "sm:min-w-96",
             "sm": "min-w-72",
             "lg": "min-w-[32rem]",
             "xl": "min-w-[48rem]"
@@ -1260,7 +1260,7 @@
       },
       "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              />\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              />\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>\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              />\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          <Button variant=\"secondary\">Cancel</Button>\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"destructive\" {...props}>\n                Delete\n              </Button>\n            )}\n          />\n        </div>\n      </Dialog>\n    </Dialog.Root>"
       ],
       "colors": [
         "bg-kumo-base",
@@ -3505,6 +3505,92 @@
     }
   },
   "blocks": {
+    "DeleteResource": {
+      "name": "DeleteResource",
+      "type": "block",
+      "description": "DeleteResource component",
+      "importPath": "@cloudflare/kumo",
+      "category": "Other",
+      "props": {
+        "size": {
+          "type": "enum",
+          "optional": true,
+          "values": [
+            "sm",
+            "base"
+          ],
+          "descriptions": {
+            "sm": "Small dialog for simple delete confirmations",
+            "base": "Default delete confirmation dialog size"
+          },
+          "default": "base"
+        },
+        "open": {
+          "type": "boolean",
+          "required": true,
+          "description": "Whether the dialog is open"
+        },
+        "resourceType": {
+          "type": "string",
+          "required": true,
+          "description": "The type of resource being deleted (e.g., \"Zone\", \"Worker\", \"KV Namespace\")"
+        },
+        "resourceName": {
+          "type": "string",
+          "required": true,
+          "description": "The name of the specific resource being deleted"
+        },
+        "isDeleting": {
+          "type": "boolean",
+          "optional": true,
+          "description": "Whether the delete action is in progress"
+        },
+        "caseSensitive": {
+          "type": "boolean",
+          "optional": true,
+          "description": "Whether the confirmation input should be case-sensitive (default: true)"
+        },
+        "deleteButtonText": {
+          "type": "string",
+          "optional": true,
+          "description": "Custom delete button text (defaults to \"Delete {resourceType}\")"
+        },
+        "className": {
+          "type": "string",
+          "optional": true,
+          "description": "Additional className for the dialog"
+        },
+        "errorMessage": {
+          "type": "string",
+          "optional": true,
+          "description": "Error message to display if the delete action fails"
+        }
+      },
+      "examples": [
+        "<>\n      <Button variant=\"destructive\" onClick={() => setOpen(true)}>\n        Delete Zone\n      </Button>\n      <DeleteResource\n        open={open}\n        onOpenChange={setOpen}\n        resourceType=\"Zone\"\n        resourceName=\"example.com\"\n        onDelete={handleDelete}\n        isDeleting={isDeleting}\n      />\n    </>",
+        "<>\n      <Button variant=\"destructive\" onClick={() => setOpen(true)}>\n        Delete Worker\n      </Button>\n      <DeleteResource\n        open={open}\n        onOpenChange={setOpen}\n        resourceType=\"Worker\"\n        resourceName=\"api-gateway-worker\"\n        onDelete={handleDelete}\n        isDeleting={isDeleting}\n      />\n    </>",
+        "<>\n      <Button variant=\"destructive\" onClick={() => setOpen(true)}>\n        Delete Zone\n      </Button>\n      <DeleteResource\n        open={open}\n        onOpenChange={setOpen}\n        resourceType=\"Zone\"\n        resourceName=\"example.com\"\n        onDelete={handleDelete}\n        isDeleting={isDeleting}\n        errorMessage={errorMsg}\n      />\n    </>"
+      ],
+      "colors": [
+        "bg-kumo-fill",
+        "bg-kumo-tint",
+        "border-kumo-line",
+        "text-kumo-default",
+        "text-kumo-subtle"
+      ],
+      "files": [
+        "delete-resource/delete-resource.tsx"
+      ],
+      "dependencies": [
+        "Banner",
+        "Button",
+        "Dialog",
+        "DialogClose",
+        "DialogRoot",
+        "DialogTitle",
+        "Input"
+      ]
+    },
     "PageHeader": {
       "name": "PageHeader",
       "type": "block",
@@ -3684,7 +3770,8 @@
         "Label",
         "Link",
         "SensitiveInput",
-        "Table"
+        "Table",
+        "DeleteResource"
       ]
     },
     "byName": [
@@ -3699,6 +3786,7 @@
       "Combobox",
       "CommandPalette",
       "DateRangePicker",
+      "DeleteResource",
       "Dialog",
       "DropdownMenu",
       "Empty",
@@ -3765,6 +3853,7 @@
         "Tooltip"
       ],
       "block": [
+        "DeleteResource",
         "PageHeader",
         "ResourceListPage"
       ]

package/ai/component-registry.md

@@ -1530,13 +1530,7 @@ Usage:
           eiusmod tempor incididunt ut labore et dolore magna aliqua.
         </Dialog.Description>
         <div className="mt-8 flex justify-end gap-2">
-          <Dialog.Close
-            render={(props) => (
-              <Button variant="secondary" {...props}>
-                Cancel
-              </Button>
-            )}
-          />
+          <Button variant="secondary">Cancel</Button>
           <Dialog.Close
             render={(props) => (
               <Button variant="destructive" {...props}>
@@ -4032,4 +4026,4 @@ Multi-line textarea input with Input variants and InputArea-specific dimensions
 - **Navigation:** CommandPalette, MenuBar, Pagination, Tabs
 - **Overlay:** Dialog, DropdownMenu, Popover, Tooltip
 - **Layout:** Grid, Surface, PageHeader, ResourceListPage
-- **Other:** Label, Link, SensitiveInput, Table
+- **Other:** Label, Link, SensitiveInput, Table, DeleteResource

package/dist/.build-complete

@@ -1 +1 @@
-1770666153825
+1770731526552

package/dist/components/dialog.js

@@ -1,5 +1,5 @@
 "use client";
-import { D as i, e as l, d as s, a as e, c as g, b as D } from "../dialog-BxXPA2vI.js";
+import { D as i, e as l, d as s, a as e, c as g, b as D } from "../dialog-x9n9wI13.js";
 export {
   i as Dialog,
   l as DialogClose,

package/dist/components/popover.js

@@ -1,5 +1,5 @@
 "use client";
-import { a as r, K as s, P, g as a, d as p, f as t, b as v, e as O, c as i } from "../popover-BfGLC2s6.js";
+import { g as r, K as s, P, f as a, c as p, e as t, a as v, d as O, b as i } from "../popover-CtKDH8Yc.js";
 export {
   r as KUMO_POPOVER_DEFAULT_VARIANTS,
   s as KUMO_POPOVER_VARIANTS,

package/dist/{dialog-BxXPA2vI.js → dialog-x9n9wI13.js}

@@ -1,12 +1,12 @@
 "use client";
-import { jsxs as r, jsx as o } from "react/jsx-runtime";
+import { jsxs as r, jsx as s } from "react/jsx-runtime";
 import { S as c } from "./surface-BIC6CXiz.js";
-import { c as s } from "./cn-Bhsu1vx2.js";
-import { a9 as g, aa as d, ab as p, ac as m, ad as D, ae as f, af as u, ag as x } from "./vendor-base-ui-kX0wjdav.js";
-const y = {
+import { c as o } from "./cn-Bhsu1vx2.js";
+import { a9 as g, aa as d, ab as m, ac as p, ad as D, ae as f, af as u, ag as x } from "./vendor-base-ui-kX0wjdav.js";
+const w = {
   size: {
     base: {
-      classes: "min-w-96",
+      classes: "sm:min-w-96",
       description: "Default dialog width"
     },
     sm: {
@@ -25,14 +25,14 @@ const y = {
 }, t = {
   size: "base"
 };
-function w({
+function y({
   size: i = t.size
 } = {}) {
-  return s(
+  return o(
     // Base styles
-    "shadow-m z-modal fixed top-1/2 left-1/2 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-xl bg-kumo-base text-kumo-default duration-150 data-ending-style:scale-90 data-ending-style:opacity-0 data-starting-style:scale-90 data-starting-style:opacity-0",
+    "shadow-m z-modal fixed top-1/2 left-1/2 w-full sm:w-auto max-w-[calc(100vw-2rem)] sm:max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-xl bg-kumo-base text-kumo-default duration-150 data-ending-style:scale-90 data-ending-style:opacity-0 data-starting-style:scale-90 data-starting-style:opacity-0",
     // Apply size from KUMO_DIALOG_VARIANTS
-    y.size[i].classes
+    w.size[i].classes
   );
 }
 function T({
@@ -42,12 +42,12 @@ function T({
   size: n = t.size
 }) {
   return /* @__PURE__ */ r(f, { children: [
-    /* @__PURE__ */ o(u, { className: "z-modal fixed inset-0 bg-kumo-overlay opacity-80 transition-all duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0" }),
-    /* @__PURE__ */ o(
+    /* @__PURE__ */ s(u, { className: "z-modal fixed inset-0 bg-kumo-overlay opacity-80 transition-all duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0" }),
+    /* @__PURE__ */ s(
       c,
       {
         as: x,
-        className: s(w({ size: n }), i),
+        className: o(y({ size: n }), i),
         style: {
           transitionProperty: "scale, opacity",
           transitionTimingFunction: "var(--default-transition-timing-function)",
@@ -61,17 +61,17 @@ function T({
 }
 const a = Object.assign(T, {
   Root: D,
-  Trigger: m,
-  Title: p,
+  Trigger: p,
+  Title: m,
   Description: d,
   Close: g
-}), h = a.Root, v = a.Trigger, C = a.Title, O = a.Description, S = a.Close;
+}), R = a.Root, h = a.Trigger, C = a.Title, O = a.Description, S = a.Close;
 export {
   a as D,
-  h as a,
-  v as b,
+  R as a,
+  h as b,
   C as c,
   O as d,
   S as e
 };
-//# sourceMappingURL=dialog-BxXPA2vI.js.map
+//# sourceMappingURL=dialog-x9n9wI13.js.map

package/dist/dialog-x9n9wI13.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-x9n9wI13.js","sources":["../src/components/dialog/dialog.tsx"],"sourcesContent":["import type { CSSProperties, FC, ReactNode } from \"react\";\nimport { Dialog as DialogBase } from \"@base-ui/react/dialog\";\nimport { Surface } from \"../surface\";\nimport { cn } from \"../../utils/cn\";\n\nexport const KUMO_DIALOG_VARIANTS = {\n  size: {\n    base: {\n      classes: \"sm:min-w-96\",\n      description: \"Default dialog width\",\n    },\n    sm: {\n      classes: \"min-w-72\",\n      description: \"Small dialog for simple confirmations\",\n    },\n    lg: {\n      classes: \"min-w-[32rem]\",\n      description: \"Large dialog for complex content\",\n    },\n    xl: {\n      classes: \"min-w-[48rem]\",\n      description: \"Extra large dialog for detailed views\",\n    },\n  },\n} as const;\n\nexport const KUMO_DIALOG_DEFAULT_VARIANTS = {\n  size: \"base\",\n} as const;\n\nexport const KUMO_DIALOG_STYLING = {\n  dimensions: {\n    sm: {\n      width: 350,\n      titleSize: 20,\n      descSize: 16,\n      padding: 16,\n      gap: 8,\n      buttonSize: \"sm\",\n    },\n    base: {\n      width: 384,\n      titleSize: 20,\n      descSize: 16,\n      padding: 24,\n      gap: 16,\n      buttonSize: \"base\",\n    },\n    lg: {\n      width: 512,\n      titleSize: 20,\n      descSize: 16,\n      padding: 24,\n      gap: 16,\n      buttonSize: \"base\",\n    },\n    xl: {\n      width: 768,\n      titleSize: 20,\n      descSize: 16,\n      padding: 24,\n      gap: 16,\n      buttonSize: \"base\",\n    },\n  },\n  baseTokens: {\n    background: \"color-surface\",\n    text: \"text-color-surface\",\n    borderRadius: 12,\n    shadow: \"shadow-m\",\n  },\n  backdrop: {\n    background: \"color-surface-secondary\",\n    opacity: 0.8,\n  },\n  header: {\n    title: { fontWeight: 600, color: \"text-color-surface\" },\n    closeIcon: { name: \"ph-x\", size: 20, color: \"text-color-muted\" },\n  },\n  description: {\n    fontWeight: 400,\n    color: \"text-color-muted\",\n  },\n  buttons: {\n    primary: { background: \"color-primary\", text: \"white\" },\n    secondary: { ring: \"color-border\", text: \"text-color-surface\" },\n  },\n} as const;\n\n// Derived types from KUMO_DIALOG_VARIANTS\nexport type KumoDialogSize = keyof typeof KUMO_DIALOG_VARIANTS.size;\n\nexport interface KumoDialogVariantsProps {\n  size?: KumoDialogSize;\n}\n\nexport function dialogVariants({\n  size = KUMO_DIALOG_DEFAULT_VARIANTS.size,\n}: KumoDialogVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"shadow-m z-modal fixed top-1/2 left-1/2 w-full sm:w-auto max-w-[calc(100vw-2rem)] sm:max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-xl bg-kumo-base text-kumo-default duration-150 data-ending-style:scale-90 data-ending-style:opacity-0 data-starting-style:scale-90 data-starting-style:opacity-0\",\n    // Apply size from KUMO_DIALOG_VARIANTS\n    KUMO_DIALOG_VARIANTS.size[size].classes,\n  );\n}\n\nexport type DialogProps = KumoDialogVariantsProps & {\n  className?: string;\n  children: ReactNode;\n  style?: CSSProperties;\n};\n\nfunction DialogContent({\n  className,\n  children,\n  style,\n  size = KUMO_DIALOG_DEFAULT_VARIANTS.size,\n}: DialogProps) {\n  return (\n    <DialogBase.Portal>\n      <DialogBase.Backdrop className=\"z-modal fixed inset-0 bg-kumo-overlay opacity-80 transition-all duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0\" />\n      <Surface\n        as={DialogBase.Popup}\n        className={cn(dialogVariants({ size }), className)}\n        style={\n          {\n            transitionProperty: \"scale, opacity\",\n            transitionTimingFunction:\n              \"var(--default-transition-timing-function)\",\n            \"--tw-shadow\":\n              \"0 20px 25px -5px rgb(0 0 0 / 0.03), 0 8px 10px -6px rgb(0 0 0 / 0.03)\",\n            ...style,\n          } as CSSProperties\n        }\n      >\n        {children}\n      </Surface>\n    </DialogBase.Portal>\n  );\n}\n\ntype DialogComponent = FC<DialogProps> & {\n  Root: typeof DialogBase.Root;\n  Trigger: typeof DialogBase.Trigger;\n  Title: typeof DialogBase.Title;\n  Description: typeof DialogBase.Description;\n  Close: typeof DialogBase.Close;\n};\n\nconst Dialog = Object.assign(DialogContent, {\n  Root: DialogBase.Root,\n  Trigger: DialogBase.Trigger,\n  Title: DialogBase.Title,\n  Description: DialogBase.Description,\n  Close: DialogBase.Close,\n}) as DialogComponent;\n\nconst DialogRoot = Dialog.Root;\nconst DialogTrigger = Dialog.Trigger;\nconst DialogTitle = Dialog.Title;\nconst DialogDescription = Dialog.Description;\nconst DialogClose = Dialog.Close;\n\nexport {\n  Dialog,\n  DialogRoot,\n  DialogTrigger,\n  DialogTitle,\n  DialogDescription,\n  DialogClose,\n};\n"],"names":["KUMO_DIALOG_VARIANTS","KUMO_DIALOG_DEFAULT_VARIANTS","dialogVariants","size","cn","DialogContent","className","children","style","jsxs","DialogBase.Portal","jsx","DialogBase.Backdrop","Surface","DialogBase.Popup","Dialog","DialogBase.Root","DialogBase.Trigger","DialogBase.Title","DialogBase.Description","DialogBase.Close","DialogRoot","DialogTrigger","DialogTitle","DialogDescription","DialogClose"],"mappings":";;;;;AAKO,MAAMA,IAAuB;AAAA,EAClC,MAAM;AAAA,IACJ,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA+B;AAAA,EAC1C,MAAM;AACR;AAoEO,SAASC,EAAe;AAAA,EAC7B,MAAAC,IAAOF,EAA6B;AACtC,IAA6B,IAAI;AAC/B,SAAOG;AAAA;AAAA,IAEL;AAAA;AAAA,IAEAJ,EAAqB,KAAKG,CAAI,EAAE;AAAA,EAAA;AAEpC;AAQA,SAASE,EAAc;AAAA,EACrB,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAL,IAAOF,EAA6B;AACtC,GAAgB;AACd,SACE,gBAAAQ,EAACC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAoB,WAAU,yIAAA,CAAyI;AAAA,IACxK,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,IAAIC;AAAAA,QACJ,WAAWV,EAAGF,EAAe,EAAE,MAAAC,EAAA,CAAM,GAAGG,CAAS;AAAA,QACjD,OACE;AAAA,UACE,oBAAoB;AAAA,UACpB,0BACE;AAAA,UACF,eACE;AAAA,UACF,GAAGE;AAAA,QAAA;AAAA,QAIN,UAAAD;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;AAUA,MAAMQ,IAAS,OAAO,OAAOV,GAAe;AAAA,EAC1C,MAAMW;AAAAA,EACN,SAASC;AAAAA,EACT,OAAOC;AAAAA,EACP,aAAaC;AAAAA,EACb,OAAOC;AACT,CAAC,GAEKC,IAAaN,EAAO,MACpBO,IAAgBP,EAAO,SACvBQ,IAAcR,EAAO,OACrBS,IAAoBT,EAAO,aAC3BU,IAAcV,EAAO;"}