@cloudflare/kumo 1.1.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudflare/kumo",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "private": false,
   "type": "module",
   "description": "Kumo - Cloudflare's component library for building modern web applications",
@@ -366,30 +366,6 @@
     "access": "public",
     "registry": "https://registry.npmjs.org"
   },
-  "scripts": {
-    "prepublish": "pnpm run clean && pnpm run build && pnpm run test:unit",
-    "build": "vite build --mode production && tsx scripts/css-build.ts && tsx src/command-line/build-cli.ts",
-    "dev": "vite build --watch --mode development",
-    "new:component": "plop component",
-    "clean": "rm -rf dist",
-    "codegen": "pnpm run codegen:primitives && pnpm run codegen:themes && pnpm run codegen:registry",
-    "codegen:themes": "tsx scripts/theme-generator/index.ts",
-    "migrate:tokens": "tsx scripts/theme-generator/migrate.ts",
-    "codegen:primitives": "tsx scripts/generate-primitives.ts",
-    "codegen:registry": "pnpm --filter @cloudflare/kumo-docs-astro codegen:demos && tsx scripts/component-registry/index.ts",
-    "lint": "pnpm run lint:oxlint && pnpm run lint:eslint",
-    "lint:oxlint": "oxlint --config .oxlintrc.json src/** --type-aware",
-    "lint:eslint": "eslint src/",
-    "test": "CI=true vitest run --project=unit",
-    "test:ui": "vitest --ui",
-    "test:run": "vitest run",
-    "test:unit": "vitest run --project=unit",
-    "test:coverage": "vitest run --coverage",
-    "test:exports": "vitest run --project=unit tests/imports/export-path-validation.test.ts",
-    "typecheck": "tsc --noEmit",
-    "validate:build": "vitest run --project=unit tests/imports/export-path-validation.test.ts",
-    "validate:changeset": "tsx ../../ci/scripts/validate-kumo-changeset.ts"
-  },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.10",
     "react": "^18.0.0 || ^19.0.0",
@@ -407,35 +383,59 @@
     "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {
-    "@tailwindcss/cli": "catalog:",
-    "@tailwindcss/vite": "catalog:",
+    "@tailwindcss/cli": "^4.1.17",
+    "@tailwindcss/vite": "^4.1.17",
     "@testing-library/react": "16.3.1",
     "@testing-library/user-event": "14.6.1",
     "@types/glob": "9.0.0",
-    "@types/node": "catalog:",
-    "@types/react": "catalog:",
-    "@types/react-dom": "catalog:",
-    "@vitest/browser": "catalog:",
-    "@vitest/ui": "catalog:",
+    "@types/node": "^22.10.2",
+    "@types/react": "19.2.4",
+    "@types/react-dom": "19.2.3",
+    "@vitest/browser": "^3.2.4",
+    "@vitest/ui": "^3.2.4",
     "esbuild": "0.27.2",
-    "eslint": "catalog:",
-    "eslint-plugin-jsx-a11y": "catalog:",
+    "eslint": "^9.17.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
     "glob": "13.0.0",
-    "happy-dom": "catalog:",
-    "oxlint": "catalog:",
-    "oxlint-tsgolint": "catalog:",
-    "playwright": "catalog:",
+    "happy-dom": "^15.11.7",
+    "oxlint": "1.42.0",
+    "oxlint-tsgolint": "0.11.3",
+    "playwright": "^1.57.0",
     "plop": "4.0.4",
     "rollup-plugin-preserve-directives": "0.4.0",
-    "tailwindcss": "catalog:",
+    "tailwindcss": "^4.1.17",
     "ts-json-schema-generator": "2.4.0",
-    "tsx": "catalog:",
-    "typescript": "catalog:",
+    "tsx": "^4.19.2",
+    "typescript": "^5.9.2",
     "typescript-eslint": "^8.18.1",
-    "vite": "catalog:",
-    "vite-plugin-dts": "catalog:",
-    "vitest": "catalog:",
-    "wrangler": "catalog:",
+    "vite": "^7.1.7",
+    "vite-plugin-dts": "^4.3.0",
+    "vitest": "^3.2.4",
+    "wrangler": "^4.59.1",
     "zod": "^4.0.0"
+  },
+  "scripts": {
+    "prepublish": "pnpm run clean && pnpm run build && pnpm run test:unit",
+    "build": "vite build --mode production && tsx scripts/css-build.ts && tsx src/command-line/build-cli.ts",
+    "dev": "vite build --watch --mode development",
+    "new:component": "plop component",
+    "clean": "rm -rf dist",
+    "codegen": "pnpm run codegen:primitives && pnpm run codegen:themes && pnpm run codegen:registry",
+    "codegen:themes": "tsx scripts/theme-generator/index.ts",
+    "migrate:tokens": "tsx scripts/theme-generator/migrate.ts",
+    "codegen:primitives": "tsx scripts/generate-primitives.ts",
+    "codegen:registry": "pnpm --filter @cloudflare/kumo-docs-astro codegen:demos && tsx scripts/component-registry/index.ts",
+    "lint": "pnpm run lint:oxlint && pnpm run lint:eslint",
+    "lint:oxlint": "oxlint --config .oxlintrc.json src/** --type-aware",
+    "lint:eslint": "eslint src/",
+    "test": "CI=true vitest run --project=unit",
+    "test:ui": "vitest --ui",
+    "test:run": "vitest run",
+    "test:unit": "vitest run --project=unit",
+    "test:coverage": "vitest run --coverage",
+    "test:exports": "vitest run --project=unit tests/imports/export-path-validation.test.ts",
+    "typecheck": "tsc --noEmit",
+    "validate:build": "vitest run --project=unit tests/imports/export-path-validation.test.ts",
+    "validate:changeset": "tsx ../../ci/scripts/validate-kumo-changeset.ts"
   }
-}
+}

package/dist/toast-8YyyQuqZ.js

@@ -1,69 +0,0 @@
-"use client";
-import { jsxs as e, jsx as t } from "react/jsx-runtime";
-import { c as r } from "./cn-Bhsu1vx2.js";
-import { aS as o, aT as n, aU as i, aV as d, aW as l, aX as c, aY as m, aZ as p, a_ as f } from "./vendor-base-ui-DWIDNgE1.js";
-function x({ children: a }) {
-  return /* @__PURE__ */ e(o, { children: [
-    a,
-    /* @__PURE__ */ t(n, { children: /* @__PURE__ */ t(i, { className: "fixed top-auto right-4 bottom-4 z-10 mx-auto flex w-[250px] sm:right-8 sm:bottom-8 sm:w-[300px]", children: /* @__PURE__ */ t(v, {}) }) })
-  ] });
-}
-function v() {
-  const { toasts: a } = d();
-  return a.map((s) => /* @__PURE__ */ t(
-    l,
-    {
-      toast: s,
-      className: r(
-        "absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 h-[var(--height)] w-full origin-bottom rounded-lg border border-kumo-fill bg-kumo-control bg-clip-padding p-4 shadow-lg select-none",
-        "[--gap:0.75rem] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))]",
-        "[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]",
-        "after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']",
-        "data-[ending-style]:opacity-0 data-[expanded]:h-[var(--toast-height)] data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-[limited]:opacity-0 data-[starting-style]:[transform:translateY(150%)]",
-        "data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]",
-        "data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]",
-        "data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]",
-        "data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]",
-        "[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)]"
-      ),
-      children: /* @__PURE__ */ e(c, { className: "overflow-hidden transition-opacity [transition-duration:250ms] data-[behind]:pointer-events-none data-[behind]:opacity-0 data-[expanded]:pointer-events-auto data-[expanded]:opacity-100", children: [
-        /* @__PURE__ */ t(m, { className: "text-[0.975rem] leading-5 font-medium text-kumo-default" }),
-        /* @__PURE__ */ t(p, { className: "text-[0.925rem] leading-5 text-kumo-subtle" }),
-        /* @__PURE__ */ t(
-          f,
-          {
-            className: "absolute top-2 right-2 flex h-5 w-5 items-center justify-center rounded border-none bg-transparent text-kumo-subtle hover:bg-kumo-fill-hover hover:text-kumo-strong",
-            "aria-label": "Close",
-            children: /* @__PURE__ */ t(h, { className: "h-4 w-4" })
-          }
-        )
-      ] })
-    },
-    s.id
-  ));
-}
-function h(a) {
-  return /* @__PURE__ */ e(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "24",
-      height: "24",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      ...a,
-      children: [
-        /* @__PURE__ */ t("path", { d: "M18 6 6 18" }),
-        /* @__PURE__ */ t("path", { d: "m6 6 12 12" })
-      ]
-    }
-  );
-}
-export {
-  x as T
-};
-//# sourceMappingURL=toast-8YyyQuqZ.js.map

package/dist/toast-8YyyQuqZ.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"toast-8YyyQuqZ.js","sources":["../src/components/toast/toast.tsx"],"sourcesContent":["import { Toast } from \"@base-ui/react/toast\";\nimport type React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/**\n * Toast styling configuration for Figma plugin consumption.\n * Toast has no user-facing variants but documents the styling structure.\n */\nexport const KUMO_TOAST_VARIANTS = {\n  root: {\n    classes: \"rounded-lg border border-kumo-fill bg-kumo-control p-4 shadow-lg\",\n    description: \"Toast container with background, border, and shadow\",\n  },\n  title: {\n    classes: \"text-[0.975rem] leading-5 font-medium text-kumo-default\",\n    description: \"Toast title with primary text color\",\n  },\n  description: {\n    classes: \"text-[0.925rem] leading-5 text-kumo-subtle\",\n    description: \"Toast description with muted text color\",\n  },\n  close: {\n    classes:\n      \"absolute top-2 right-2 flex h-5 w-5 items-center justify-center rounded border-none bg-transparent text-kumo-subtle hover:bg-kumo-fill-hover hover:text-kumo-strong\",\n    description: \"Close button with X icon\",\n  },\n} as const;\n\nexport const KUMO_TOAST_DEFAULT_VARIANTS = {} as const;\n\n/**\n * Toast styling configuration for Figma plugin consumption.\n * Provides structured metadata for generating Toast components in Figma.\n */\nexport const KUMO_TOAST_STYLING = {\n  container: {\n    width: 300,\n    padding: 16,\n    borderRadius: 8,\n    background: \"color-secondary\",\n    border: \"color-color\",\n    shadow: \"shadow-lg\",\n    gap: 4,\n  },\n  title: {\n    fontSize: 16,\n    fontWeight: 500,\n    color: \"text-color-surface\",\n  },\n  description: {\n    fontSize: 15,\n    fontWeight: 400,\n    color: \"text-color-muted\",\n  },\n  closeButton: {\n    size: 20,\n    iconSize: 16,\n    iconName: \"ph-x\",\n    iconColor: \"text-color-muted\",\n    hoverBackground: \"color-color-2\",\n    hoverColor: \"text-color-label\",\n    borderRadius: 4,\n  },\n} as const;\n\n// Derived types from KUMO_TOAST_VARIANTS\nexport interface KumoToastVariantsProps {}\n\nexport function toastVariants(_props: KumoToastVariantsProps = {}) {\n  return cn(\n    // Base styles for toast root\n    \"absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 h-[var(--height)] w-full origin-bottom rounded-lg border border-kumo-fill bg-kumo-control bg-clip-padding p-4 shadow-lg select-none\",\n  );\n}\n\nexport interface ToastyProps extends KumoToastVariantsProps {\n  children: React.ReactNode;\n}\n\nexport function Toasty({ children }: ToastyProps) {\n  return (\n    <Toast.Provider>\n      {children}\n      <Toast.Portal>\n        <Toast.Viewport className=\"fixed top-auto right-4 bottom-4 z-10 mx-auto flex w-[250px] sm:right-8 sm:bottom-8 sm:w-[300px]\">\n          <ToastList />\n        </Toast.Viewport>\n      </Toast.Portal>\n    </Toast.Provider>\n  );\n}\n\nfunction ToastList() {\n  const { toasts } = Toast.useToastManager();\n  return toasts.map((toast) => (\n    <Toast.Root\n      key={toast.id}\n      toast={toast}\n      className={cn(\n        \"absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 h-[var(--height)] w-full origin-bottom rounded-lg border border-kumo-fill bg-kumo-control bg-clip-padding p-4 shadow-lg select-none\",\n        \"[--gap:0.75rem] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))]\",\n        \"[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]\",\n        \"after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']\",\n        \"data-[ending-style]:opacity-0 data-[expanded]:h-[var(--toast-height)] data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-[limited]:opacity-0 data-[starting-style]:[transform:translateY(150%)]\",\n        \"data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]\",\n        \"data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]\",\n        \"data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]\",\n        \"data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]\",\n        \"[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)]\",\n      )}\n    >\n      <Toast.Content className=\"overflow-hidden transition-opacity [transition-duration:250ms] data-[behind]:pointer-events-none data-[behind]:opacity-0 data-[expanded]:pointer-events-auto data-[expanded]:opacity-100\">\n        <Toast.Title className=\"text-[0.975rem] leading-5 font-medium text-kumo-default\" />\n        <Toast.Description className=\"text-[0.925rem] leading-5 text-kumo-subtle\" />\n        <Toast.Close\n          className=\"absolute top-2 right-2 flex h-5 w-5 items-center justify-center rounded border-none bg-transparent text-kumo-subtle hover:bg-kumo-fill-hover hover:text-kumo-strong\"\n          aria-label=\"Close\"\n        >\n          <XIcon className=\"h-4 w-4\" />\n        </Toast.Close>\n      </Toast.Content>\n    </Toast.Root>\n  ));\n}\n\nfunction XIcon(props: React.ComponentProps<\"svg\">) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <path d=\"M18 6 6 18\" />\n      <path d=\"m6 6 12 12\" />\n    </svg>\n  );\n}\n"],"names":["Toasty","children","jsxs","Toast.Provider","jsx","Toast.Portal","Toast.Viewport","ToastList","toasts","Toast.useToastManager","toast","Toast.Root","cn","Toast.Content","Toast.Title","Toast.Description","Toast.Close","XIcon","props"],"mappings":";;;;AA+EO,SAASA,EAAO,EAAE,UAAAC,KAAyB;AAChD,SACE,gBAAAC,EAACC,GAAA,EACE,UAAA;AAAA,IAAAF;AAAA,IACD,gBAAAG,EAACC,GAAA,EACC,UAAA,gBAAAD,EAACE,GAAA,EAAe,WAAU,mGACxB,UAAA,gBAAAF,EAACG,GAAA,CAAA,CAAU,GACb,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;AAEA,SAASA,IAAY;AACnB,QAAM,EAAE,QAAAC,EAAA,IAAWC,EAAM;AACzB,SAAOD,EAAO,IAAI,CAACE,MACjB,gBAAAN;AAAA,IAACO;AAAAA,IAAA;AAAA,MAEC,OAAAD;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAGF,UAAA,gBAAAV,EAACW,GAAA,EAAc,WAAU,4LACvB,UAAA;AAAA,QAAA,gBAAAT,EAACU,GAAA,EAAY,WAAU,0DAAA,CAA0D;AAAA,QACjF,gBAAAV,EAACW,GAAA,EAAkB,WAAU,6CAAA,CAA6C;AAAA,QAC1E,gBAAAX;AAAA,UAACY;AAAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,cAAW;AAAA,YAEX,UAAA,gBAAAZ,EAACa,GAAA,EAAM,WAAU,UAAA,CAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MAC7B,EAAA,CACF;AAAA,IAAA;AAAA,IAxBKP,EAAM;AAAA,EAAA,CA0Bd;AACH;AAEA,SAASO,EAAMC,GAAoC;AACjD,SACE,gBAAAhB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAY;AAAA,MACZ,eAAc;AAAA,MACd,gBAAe;AAAA,MACd,GAAGgB;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAd,EAAC,QAAA,EAAK,GAAE,aAAA,CAAa;AAAA,QACrB,gBAAAA,EAAC,QAAA,EAAK,GAAE,aAAA,CAAa;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG3B;"}