@cloudflare/kumo 1.0.0

package/dist/catalog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"catalog.js","sources":["../src/catalog/catalog.ts","../src/catalog/data.ts","../src/catalog/visibility.ts"],"sourcesContent":["/**\n * Kumo Catalog - Runtime validation and AI prompt generation.\n *\n * Creates a catalog from the auto-generated schemas that:\n * - Validates AI-generated UI trees\n * - Generates prompts for AI describing available components\n * - Provides type-safe component lookup\n */\n\nimport type {\n  KumoCatalog,\n  CatalogConfig,\n  ActionDefinition,\n  ValidationResult,\n  UITree,\n  UIElement,\n} from \"./types\";\n\n// Schema types - will be populated from generated schemas\ninterface SchemasModule {\n  KUMO_COMPONENT_NAMES: readonly string[];\n  UIElementBaseSchema: {\n    safeParse: (data: unknown) => {\n      success: boolean;\n      data?: unknown;\n      error?: { issues: Array<{ message: string; path: (string | number)[] }> };\n    };\n  };\n  validateElementProps: (element: UIElement) => {\n    success: boolean;\n    error?: { issues: Array<{ message: string; path: (string | number)[] }> };\n  };\n  validateUITree: (tree: unknown) => {\n    success: boolean;\n    data?: unknown;\n    error?: { issues: Array<{ message: string; path: (string | number)[] }> };\n  };\n}\n\n// Schemas module reference - loaded asynchronously\nlet schemasModule: SchemasModule | null = null;\nlet schemasLoadPromise: Promise<SchemasModule> | null = null;\n\n/**\n * Load the generated schemas module.\n * This is called automatically when needed.\n */\nexport async function loadSchemas(): Promise<SchemasModule> {\n  if (schemasModule) return schemasModule;\n  if (schemasLoadPromise) return schemasLoadPromise;\n\n  schemasLoadPromise = import(\"../../ai/schemas\").then((mod: unknown) => {\n    schemasModule = mod as unknown as SchemasModule;\n    return schemasModule;\n  });\n\n  return schemasLoadPromise;\n}\n\n/**\n * Get schemas synchronously (throws if not loaded).\n */\nfunction getSchemas(): SchemasModule {\n  if (!schemasModule) {\n    throw new Error(\n      \"Schemas not loaded. Call initCatalog(catalog) first or use async validation.\",\n    );\n  }\n  return schemasModule;\n}\n\n/**\n * Create a Kumo catalog for runtime validation.\n *\n * The catalog:\n * - Uses auto-generated Zod schemas from component-registry.json\n * - Validates UI elements and trees at runtime\n * - Generates AI prompts describing available components\n *\n * @example\n * import { createKumoCatalog, initCatalog } from '@cloudflare/kumo/catalog';\n *\n * const catalog = createKumoCatalog({\n *   actions: {\n *     submit_form: { description: 'Submit the form' },\n *     delete_item: { description: 'Delete selected item' },\n *   },\n * });\n *\n * // Initialize schemas (required before sync validation)\n * await initCatalog(catalog);\n *\n * // Validate AI-generated tree\n * const result = catalog.validateTree(aiGeneratedJson);\n * if (result.success) {\n *   // Render the tree\n * }\n */\nexport function createKumoCatalog(config: CatalogConfig = {}): KumoCatalog {\n  const { actions = {} } = config;\n  const actionNames = Object.keys(actions);\n\n  return {\n    get componentNames(): readonly string[] {\n      const schemas = getSchemas();\n      return schemas.KUMO_COMPONENT_NAMES;\n    },\n\n    get actionNames(): readonly string[] {\n      return actionNames;\n    },\n\n    hasComponent(type: string): boolean {\n      try {\n        const schemas = getSchemas();\n        return schemas.KUMO_COMPONENT_NAMES.includes(type as never);\n      } catch {\n        return false;\n      }\n    },\n\n    hasAction(name: string): boolean {\n      return name in actions;\n    },\n\n    validateElement(element: unknown): ValidationResult {\n      try {\n        const schemas = getSchemas();\n        const result = schemas.UIElementBaseSchema.safeParse(element);\n\n        if (result.success) {\n          // Also validate props against component-specific schema\n          const propsResult = schemas.validateElementProps(\n            result.data as UIElement,\n          );\n          if (!propsResult.success) {\n            return {\n              success: false,\n              error: (\n                propsResult.error as {\n                  issues: Array<{ message: string; path: (string | number)[] }>;\n                }\n              ).issues.map((issue) => ({\n                message: issue.message,\n                path: [\"props\", ...issue.path],\n              })),\n            };\n          }\n          return { success: true, data: result.data };\n        }\n\n        return {\n          success: false,\n          error: result.error?.issues.map((issue) => ({\n            message: issue.message,\n            path: issue.path,\n          })) ?? [{ message: \"Validation failed\", path: [] }],\n        };\n      } catch (err) {\n        return {\n          success: false,\n          error: [\n            {\n              message: err instanceof Error ? err.message : \"Validation failed\",\n              path: [],\n            },\n          ],\n        };\n      }\n    },\n\n    validateTree(tree: unknown): ValidationResult<UITree> {\n      try {\n        const schemas = getSchemas();\n        const result = schemas.validateUITree(tree);\n\n        if (result.success) {\n          return { success: true, data: result.data as UITree };\n        }\n\n        return {\n          success: false,\n          error: (\n            result.error as {\n              issues: Array<{ message: string; path: (string | number)[] }>;\n            }\n          ).issues.map((issue) => ({\n            message: issue.message,\n            path: issue.path,\n          })),\n        };\n      } catch (err) {\n        return {\n          success: false,\n          error: [\n            {\n              message: err instanceof Error ? err.message : \"Validation failed\",\n              path: [],\n            },\n          ],\n        };\n      }\n    },\n\n    generatePrompt(): string {\n      const schemas = getSchemas();\n      const lines: string[] = [\n        \"# Kumo Component Catalog\",\n        \"\",\n        \"You are generating UI using Kumo components. Output must be valid JSON matching the UITree schema.\",\n        \"\",\n        \"## Available Components\",\n        \"\",\n      ];\n\n      // List all components\n      for (const name of schemas.KUMO_COMPONENT_NAMES) {\n        lines.push(`- \\`${name}\\``);\n      }\n\n      // Actions section\n      if (actionNames.length > 0) {\n        lines.push(\"\");\n        lines.push(\"## Available Actions\");\n        lines.push(\"\");\n        for (const [name, def] of Object.entries(actions)) {\n          lines.push(`- \\`${name}\\`: ${(def as ActionDefinition).description}`);\n        }\n      }\n\n      // Output format\n      lines.push(\"\");\n      lines.push(\"## Output Format\");\n      lines.push(\"\");\n      lines.push(\"```json\");\n      lines.push(\"{\");\n      lines.push('  \"root\": \"element-1\",');\n      lines.push('  \"elements\": {');\n      lines.push('    \"element-1\": {');\n      lines.push('      \"key\": \"element-1\",');\n      lines.push('      \"type\": \"ComponentName\",');\n      lines.push('      \"props\": { ... },');\n      lines.push('      \"children\": [\"element-2\"],');\n      lines.push(\n        '      \"visible\": true | { \"path\": \"/data/path\" } | { \"auth\": \"signedIn\" }',\n      );\n      lines.push(\"    }\");\n      lines.push(\"  }\");\n      lines.push(\"}\");\n      lines.push(\"```\");\n      lines.push(\"\");\n\n      // Dynamic values\n      lines.push(\"## Dynamic Values\");\n      lines.push(\"\");\n      lines.push(\n        'Props can reference data model values using `{ path: \"/data/path\" }`:',\n      );\n      lines.push(\"\");\n      lines.push(\"```json\");\n      lines.push(\"{\");\n      lines.push('  \"type\": \"Text\",');\n      lines.push('  \"props\": {');\n      lines.push('    \"children\": { \"path\": \"/user/name\" }');\n      lines.push(\"  }\");\n      lines.push(\"}\");\n      lines.push(\"```\");\n      lines.push(\"\");\n\n      return lines.join(\"\\n\");\n    },\n  };\n}\n\n/**\n * Initialize the catalog by loading schemas.\n * Call this before using synchronous validation methods.\n */\nexport async function initCatalog(catalog: KumoCatalog): Promise<void> {\n  // Trigger a validation to load schemas\n  catalog.validateTree({});\n}\n","/**\n * Data model utilities for dynamic value resolution.\n *\n * Provides JSON Pointer path resolution for data binding.\n */\n\nimport type { DataModel, DynamicValue } from \"./types\";\n\n/**\n * Get a value from an object by JSON Pointer path.\n *\n * @example\n * const data = { user: { name: \"John\", profile: { age: 30 } } };\n * getByPath(data, \"/user/name\") // \"John\"\n * getByPath(data, \"/user/profile/age\") // 30\n * getByPath(data, \"/missing\") // undefined\n */\nexport function getByPath(obj: unknown, path: string): unknown {\n  if (!path || path === \"/\") {\n    return obj;\n  }\n\n  const segments = path.startsWith(\"/\")\n    ? path.slice(1).split(\"/\")\n    : path.split(\"/\");\n\n  let current: unknown = obj;\n\n  for (const segment of segments) {\n    if (current === null || current === undefined) {\n      return undefined;\n    }\n\n    if (typeof current === \"object\") {\n      current = (current as Record<string, unknown>)[segment];\n    } else {\n      return undefined;\n    }\n  }\n\n  return current;\n}\n\n/**\n * Set a value in an object by JSON Pointer path.\n * Creates intermediate objects as needed.\n *\n * @example\n * const data = {};\n * setByPath(data, \"/user/name\", \"John\");\n * // data is now { user: { name: \"John\" } }\n */\nexport function setByPath(\n  obj: Record<string, unknown>,\n  path: string,\n  value: unknown,\n): void {\n  const segments = path.startsWith(\"/\")\n    ? path.slice(1).split(\"/\")\n    : path.split(\"/\");\n\n  if (segments.length === 0) return;\n\n  let current: Record<string, unknown> = obj;\n\n  for (let i = 0; i < segments.length - 1; i++) {\n    const segment = segments[i]!;\n    if (!(segment in current) || typeof current[segment] !== \"object\") {\n      current[segment] = {};\n    }\n    current = current[segment] as Record<string, unknown>;\n  }\n\n  const lastSegment = segments[segments.length - 1]!;\n  current[lastSegment] = value;\n}\n\n/**\n * Check if a value is a dynamic path reference.\n */\nexport function isDynamicPath(value: unknown): value is { path: string } {\n  return (\n    typeof value === \"object\" &&\n    value !== null &&\n    \"path\" in value &&\n    typeof (value as { path: unknown }).path === \"string\"\n  );\n}\n\n/**\n * Resolve a dynamic value against a data model.\n * If the value is a path reference, look it up in the data model.\n * Otherwise, return the literal value.\n *\n * @example\n * const data = { user: { name: \"John\" } };\n * resolveDynamicValue(\"Hello\", data) // \"Hello\"\n * resolveDynamicValue({ path: \"/user/name\" }, data) // \"John\"\n */\nexport function resolveDynamicValue<T>(\n  value: DynamicValue<T>,\n  dataModel: DataModel,\n): T | undefined {\n  if (value === null || value === undefined) {\n    return undefined;\n  }\n\n  if (isDynamicPath(value)) {\n    return getByPath(dataModel, value.path) as T | undefined;\n  }\n\n  return value as T;\n}\n\n/**\n * Resolve all dynamic values in an object.\n * Recursively resolves any { path: string } references.\n */\nexport function resolveProps(\n  props: Record<string, unknown>,\n  dataModel: DataModel,\n): Record<string, unknown> {\n  const resolved: Record<string, unknown> = {};\n\n  for (const [key, value] of Object.entries(props)) {\n    if (isDynamicPath(value)) {\n      resolved[key] = getByPath(dataModel, value.path);\n    } else if (\n      typeof value === \"object\" &&\n      value !== null &&\n      !Array.isArray(value)\n    ) {\n      // Recursively resolve nested objects\n      resolved[key] = resolveProps(value as Record<string, unknown>, dataModel);\n    } else {\n      resolved[key] = value;\n    }\n  }\n\n  return resolved;\n}\n","/**\n * Visibility condition evaluator.\n *\n * Evaluates visibility conditions against data model and auth state.\n */\n\nimport type {\n  VisibilityCondition,\n  LogicExpression,\n  DataModel,\n  AuthState,\n} from \"./types\";\nimport { getByPath, resolveDynamicValue } from \"./data\";\n\n/**\n * Context for evaluating visibility conditions.\n */\nexport interface VisibilityContext {\n  /** Data model for path resolution */\n  data: DataModel;\n  /** Authentication state */\n  auth: AuthState;\n}\n\n/**\n * Check if a value is truthy.\n */\nfunction isTruthy(value: unknown): boolean {\n  if (value === null || value === undefined) return false;\n  if (typeof value === \"boolean\") return value;\n  if (typeof value === \"number\") return value !== 0;\n  if (typeof value === \"string\") return value.length > 0;\n  if (Array.isArray(value)) return value.length > 0;\n  if (typeof value === \"object\") return Object.keys(value).length > 0;\n  return Boolean(value);\n}\n\n/**\n * Evaluate a logic expression.\n */\nfunction evaluateLogicExpression(\n  expr: LogicExpression,\n  ctx: VisibilityContext,\n): boolean {\n  // Path check - truthy test\n  if (\"path\" in expr && !(\"eq\" in expr) && !(\"neq\" in expr)) {\n    const value = getByPath(ctx.data, expr.path);\n    return isTruthy(value);\n  }\n\n  // AND - all must be true\n  if (\"and\" in expr) {\n    return expr.and.every((e) => evaluateLogicExpression(e, ctx));\n  }\n\n  // OR - at least one must be true\n  if (\"or\" in expr) {\n    return expr.or.some((e) => evaluateLogicExpression(e, ctx));\n  }\n\n  // NOT - negate\n  if (\"not\" in expr) {\n    return !evaluateLogicExpression(expr.not, ctx);\n  }\n\n  // Equality check\n  if (\"eq\" in expr) {\n    const eqExpr = expr as { eq: [unknown, unknown] };\n    const valueA = resolveDynamicValue(eqExpr.eq[0], ctx.data);\n    const valueB = resolveDynamicValue(eqExpr.eq[1], ctx.data);\n    return valueA === valueB;\n  }\n\n  // Inequality check\n  if (\"neq\" in expr) {\n    const neqExpr = expr as { neq: [unknown, unknown] };\n    const valueA = resolveDynamicValue(neqExpr.neq[0], ctx.data);\n    const valueB = resolveDynamicValue(neqExpr.neq[1], ctx.data);\n    return valueA !== valueB;\n  }\n\n  // Greater than\n  if (\"gt\" in expr) {\n    const gtExpr = expr as { gt: [unknown, unknown] };\n    const valueA = resolveDynamicValue(gtExpr.gt[0], ctx.data) as number;\n    const valueB = resolveDynamicValue(gtExpr.gt[1], ctx.data) as number;\n    return valueA > valueB;\n  }\n\n  // Greater than or equal\n  if (\"gte\" in expr) {\n    const gteExpr = expr as { gte: [unknown, unknown] };\n    const valueA = resolveDynamicValue(gteExpr.gte[0], ctx.data) as number;\n    const valueB = resolveDynamicValue(gteExpr.gte[1], ctx.data) as number;\n    return valueA >= valueB;\n  }\n\n  // Less than\n  if (\"lt\" in expr) {\n    const ltExpr = expr as { lt: [unknown, unknown] };\n    const valueA = resolveDynamicValue(ltExpr.lt[0], ctx.data) as number;\n    const valueB = resolveDynamicValue(ltExpr.lt[1], ctx.data) as number;\n    return valueA < valueB;\n  }\n\n  // Less than or equal\n  if (\"lte\" in expr) {\n    const lteExpr = expr as { lte: [unknown, unknown] };\n    const valueA = resolveDynamicValue(lteExpr.lte[0], ctx.data) as number;\n    const valueB = resolveDynamicValue(lteExpr.lte[1], ctx.data) as number;\n    return valueA <= valueB;\n  }\n\n  // Unknown expression type - default to visible\n  return true;\n}\n\n/**\n * Evaluate a visibility condition.\n *\n * @example\n * // Boolean\n * evaluateVisibility(true, ctx) // true\n *\n * // Path check\n * evaluateVisibility({ path: \"/user/isAdmin\" }, ctx) // depends on data\n *\n * // Auth check\n * evaluateVisibility({ auth: \"signedIn\" }, ctx) // depends on auth state\n *\n * // Complex logic\n * evaluateVisibility({\n *   and: [\n *     { path: \"/user/isAdmin\" },\n *     { auth: \"signedIn\" }\n *   ]\n * }, ctx)\n */\nexport function evaluateVisibility(\n  condition: VisibilityCondition | undefined,\n  ctx: VisibilityContext,\n): boolean {\n  // No condition means always visible\n  if (condition === undefined) {\n    return true;\n  }\n\n  // Boolean literal\n  if (typeof condition === \"boolean\") {\n    return condition;\n  }\n\n  // Auth check\n  if (\"auth\" in condition) {\n    if (condition.auth === \"signedIn\") {\n      return ctx.auth.isSignedIn;\n    }\n    if (condition.auth === \"signedOut\") {\n      return !ctx.auth.isSignedIn;\n    }\n    return true;\n  }\n\n  // Path check (simple truthy test)\n  if (\"path\" in condition && !(\"and\" in condition) && !(\"or\" in condition)) {\n    const value = getByPath(ctx.data, condition.path);\n    return isTruthy(value);\n  }\n\n  // Logic expression\n  return evaluateLogicExpression(condition as LogicExpression, ctx);\n}\n\n/**\n * Create a default visibility context.\n */\nexport function createVisibilityContext(\n  data: DataModel = {},\n  auth: Partial<AuthState> = {},\n): VisibilityContext {\n  return {\n    data,\n    auth: {\n      isSignedIn: auth.isSignedIn ?? false,\n      user: auth.user,\n    },\n  };\n}\n"],"names":["schemasModule","schemasLoadPromise","loadSchemas","mod","getSchemas","createKumoCatalog","config","actions","actionNames","type","name","element","schemas","result","propsResult","issue","err","tree","lines","def","initCatalog","catalog","getByPath","obj","path","segments","current","segment","setByPath","value","i","lastSegment","isDynamicPath","resolveDynamicValue","dataModel","resolveProps","props","resolved","key","isTruthy","evaluateLogicExpression","expr","ctx","e","eqExpr","valueA","valueB","neqExpr","gtExpr","gteExpr","ltExpr","lteExpr","evaluateVisibility","condition","createVisibilityContext","data","auth"],"mappings":"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"}

package/dist/checkbox-BexIU_lZ.js

@@ -0,0 +1,224 @@
+"use client";
+import { jsx as e, jsxs as C } from "react/jsx-runtime";
+import { forwardRef as y, createContext as F, useContext as K } from "react";
+import { MinusIcon as w, CheckIcon as j } from "@phosphor-icons/react";
+import { c as g } from "./cn-Bhsu1vx2.js";
+import { L as E } from "./label-87HQArUG.js";
+import { H as I, J as L, K as R, L as _, C as G, N as D, O as H } from "./vendor-base-ui-DWIDNgE1.js";
+const J = {
+  variant: {
+    default: {
+      classes: "[&:focus-within>span]:ring-kumo-ring [&:hover>span]:ring-kumo-ring",
+      description: "Default checkbox appearance"
+    },
+    error: {
+      classes: "[&>span]:ring-kumo-danger",
+      description: "Error state for validation failures"
+    }
+  }
+}, W = {
+  variant: "default"
+}, O = F({
+  controlFirst: !0
+}), A = y(
+  ({
+    className: c,
+    checked: l,
+    indeterminate: i,
+    disabled: r,
+    variant: m = "default",
+    label: n,
+    labelTooltip: u,
+    controlFirst: d = !0,
+    onCheckedChange: h,
+    onValueChange: k,
+    onChange: s,
+    required: x,
+    name: p,
+    ...o
+  }, b) => {
+    if (process.env.NODE_ENV !== "production") {
+      const t = !!n, a = !!o["aria-label"], f = !!o["aria-labelledby"];
+      !t && !a && !f && console.warn(
+        `[Kumo Checkbox]: Checkbox must have an accessible name. Provide either:
+  - label prop: <Checkbox label='Accept terms' />
+  - aria-label: <Checkbox aria-label='Select item' />
+  - aria-labelledby for custom label association
+  Note: When used inside Checkbox.Group, label is optional`
+      );
+    }
+    const N = /* @__PURE__ */ e(
+      I,
+      {
+        ref: b,
+        name: p,
+        checked: l,
+        indeterminate: i,
+        disabled: r,
+        onCheckedChange: (t, a) => {
+          if (h?.(t), k?.(t), s) {
+            const f = Object.assign(a.event, {
+              target: { checked: t }
+            });
+            s(f);
+          }
+        },
+        className: g(
+          "flex h-4 w-4 items-center justify-center rounded-sm border-0 bg-kumo-base ring",
+          m === "error" ? "ring-kumo-danger" : "ring-kumo-line",
+          !r && "hover:ring-kumo-ring focus-visible:ring-kumo-ring",
+          "data-[checked]:bg-kumo-contrast data-[indeterminate]:bg-kumo-contrast",
+          r && "cursor-not-allowed opacity-50",
+          c
+        ),
+        ...o,
+        children: /* @__PURE__ */ e(
+          L,
+          {
+            className: "flex items-center justify-center text-kumo-inverse",
+            render: (t, a) => {
+              const f = a.indeterminate ? w : j;
+              return /* @__PURE__ */ e("span", { ...t, children: (a.checked || a.indeterminate) && /* @__PURE__ */ e(f, { weight: "bold", size: 12 }) });
+            }
+          }
+        )
+      }
+    );
+    return n ? /* @__PURE__ */ e(R, { className: "inline-flex", children: /* @__PURE__ */ C(
+      _,
+      {
+        className: g(
+          "inline-flex items-center gap-2",
+          d ? "flex-row" : "flex-row-reverse justify-end",
+          r ? "cursor-not-allowed" : "cursor-pointer"
+        ),
+        children: [
+          N,
+          /* @__PURE__ */ e(
+            E,
+            {
+              showOptional: x === !1,
+              tooltip: u,
+              asContent: !0,
+              children: n
+            }
+          )
+        ]
+      }
+    ) }) : N;
+  }
+);
+A.displayName = "Checkbox";
+const B = y(
+  ({
+    className: c,
+    checked: l,
+    indeterminate: i,
+    disabled: r,
+    variant: m = "default",
+    label: n,
+    value: u,
+    onCheckedChange: d,
+    onValueChange: h,
+    name: k
+  }, s) => {
+    const { controlFirst: x } = K(O), p = (o) => {
+      d?.(o), h?.(o);
+    };
+    return /* @__PURE__ */ C(
+      "label",
+      {
+        className: g(
+          "relative inline-flex items-center gap-2",
+          // Control first (default): checkbox before label
+          // Label first: label before checkbox using flex-row-reverse
+          !x && "flex-row-reverse justify-end",
+          r ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+          c
+        ),
+        children: [
+          /* @__PURE__ */ e(
+            I,
+            {
+              ref: s,
+              value: u,
+              name: k,
+              checked: l,
+              indeterminate: i,
+              disabled: r,
+              onCheckedChange: p,
+              className: g(
+                "peer flex h-4 w-4 items-center justify-center rounded-sm border-0 bg-kumo-base ring",
+                m === "error" ? "ring-kumo-danger" : "ring-kumo-line",
+                !r && "group-hover:ring-kumo-ring hover:ring-kumo-ring focus-visible:ring-kumo-ring",
+                "data-[checked]:bg-kumo-contrast data-[indeterminate]:bg-kumo-contrast"
+              ),
+              children: /* @__PURE__ */ e(
+                L,
+                {
+                  className: "flex items-center justify-center text-kumo-inverse",
+                  render: (o, b) => {
+                    const v = b.indeterminate ? w : j;
+                    return /* @__PURE__ */ e("span", { ...o, children: (b.checked || b.indeterminate) && /* @__PURE__ */ e(v, { weight: "bold", size: 12 }) });
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ e("span", { className: "text-base font-medium text-kumo-default", children: n })
+        ]
+      }
+    );
+  }
+);
+B.displayName = "Checkbox.Item";
+function M({
+  legend: c,
+  children: l,
+  error: i,
+  description: r,
+  defaultValue: m,
+  value: n,
+  onValueChange: u,
+  allValues: d,
+  disabled: h,
+  controlFirst: k = !0,
+  className: s
+}) {
+  return /* @__PURE__ */ e(O.Provider, { value: { controlFirst: k }, children: /* @__PURE__ */ e(
+    G,
+    {
+      defaultValue: m,
+      value: n,
+      onValueChange: u,
+      allValues: d,
+      disabled: h,
+      children: /* @__PURE__ */ C(
+        D,
+        {
+          className: g(
+            "flex flex-col gap-4 rounded-lg border border-kumo-line p-4",
+            s
+          ),
+          children: [
+            /* @__PURE__ */ e(H, { className: "text-lg font-medium text-kumo-default", children: c }),
+            /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: l }),
+            i && /* @__PURE__ */ e("p", { className: "text-sm text-kumo-danger", children: i }),
+            r && /* @__PURE__ */ e("p", { className: "text-sm text-kumo-subtle", children: r })
+          ]
+        }
+      )
+    }
+  ) });
+}
+const S = Object.assign(A, {
+  Item: B,
+  Group: M
+});
+S.displayName = "Checkbox";
+export {
+  S as C,
+  J as K,
+  W as a
+};
+//# sourceMappingURL=checkbox-BexIU_lZ.js.map

package/dist/checkbox-BexIU_lZ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-BexIU_lZ.js","sources":["../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import { forwardRef, createContext, useContext, type ReactNode } from \"react\";\nimport { CheckIcon, MinusIcon } from \"@phosphor-icons/react\";\nimport { cn } from \"../../utils/cn\";\nimport { Label } from \"../label\";\nimport { Fieldset } from \"@base-ui/react/fieldset\";\nimport { Field as FieldBase } from \"@base-ui/react/field\";\nimport { CheckboxGroup as BaseCheckboxGroup } from \"@base-ui/react/checkbox-group\";\nimport {\n  Checkbox as BaseCheckbox,\n  type CheckboxRootChangeEventDetails,\n} from \"@base-ui/react/checkbox\";\n\nexport const KUMO_CHECKBOX_VARIANTS = {\n  variant: {\n    default: {\n      classes: \"[&:focus-within>span]:ring-kumo-ring [&:hover>span]:ring-kumo-ring\",\n      description: \"Default checkbox appearance\",\n    },\n    error: {\n      classes: \"[&>span]:ring-kumo-danger\",\n      description: \"Error state for validation failures\",\n    },\n  },\n} as const;\n\nexport const KUMO_CHECKBOX_DEFAULT_VARIANTS = {\n  variant: \"default\",\n} as const;\n\n// Derived types from KUMO_CHECKBOX_VARIANTS\nexport type KumoCheckboxVariant = keyof typeof KUMO_CHECKBOX_VARIANTS.variant;\n\nexport interface KumoCheckboxVariantsProps {\n  variant?: KumoCheckboxVariant;\n}\n\nexport function checkboxVariants({\n  variant = KUMO_CHECKBOX_DEFAULT_VARIANTS.variant,\n}: KumoCheckboxVariantsProps = {}) {\n  return cn(KUMO_CHECKBOX_VARIANTS.variant[variant].classes);\n}\n\n// Legacy type alias for backwards compatibility\nexport type CheckboxVariant = KumoCheckboxVariant;\n\n// Context for passing controlFirst from Group to Items\nconst CheckboxGroupContext = createContext<{ controlFirst: boolean }>({\n  controlFirst: true,\n});\n\n/**\n * Single checkbox component props with accessibility guidance.\n *\n * **Accessible Name Required:** Checkbox should have one of:\n * 1. `label` prop (recommended) - built-in Field wrapper with horizontal layout\n * 2. `aria-label` - for checkboxes without visible label\n * 3. `aria-labelledby` - for custom label association\n *\n * **Note:** When used inside Checkbox.Group or Dropdown, label is optional (parent provides context).\n *\n * Missing accessible names will trigger console warnings in development (unless inside a group).\n *\n * @example\n * // Recommended: Built-in Field wrapper with label\n * <Checkbox label=\"Accept terms and conditions\" />\n *\n * @example\n * // Control-first layout (checkbox before label)\n * <Checkbox label=\"Remember me\" controlFirst={true} />\n *\n * @example\n * // Label-first layout (label before checkbox)\n * <Checkbox label=\"Enable notifications\" controlFirst={false} />\n *\n * @example\n * // Error variant (visual only, no error text for single checkboxes)\n * <Checkbox label=\"Required field\" variant=\"error\" />\n *\n * @example\n * // Without visible label (aria-label required)\n * <Checkbox aria-label=\"Select all items\" />\n *\n * @example\n * // Custom label association\n * <label id=\"terms-label\">I accept the terms</label>\n * <Checkbox aria-labelledby=\"terms-label\" />\n *\n * @example\n * // Inside Checkbox.Group (label optional)\n * <Checkbox.Group legend=\"Preferences\">\n *   <Checkbox.Item value=\"email\" label=\"Email notifications\" />\n *   <Checkbox.Item value=\"sms\" label=\"SMS notifications\" />\n * </Checkbox.Group>\n */\nexport type CheckboxProps = {\n  /** Visual variant: \"default\" or \"error\" for validation failures (visual only, no error text) */\n  variant?: CheckboxVariant;\n  /** Label content for the checkbox (enables built-in Field wrapper) - can be a string or any React node */\n  label?: ReactNode;\n  /** Tooltip content to display next to the label via an info icon */\n  labelTooltip?: ReactNode;\n  /** When true (default), checkbox appears before label. When false, label appears before checkbox. */\n  controlFirst?: boolean;\n  /** Whether the checkbox is checked (controlled) */\n  checked?: boolean;\n  /** Whether the checkbox is in indeterminate state */\n  indeterminate?: boolean;\n  /** Whether the checkbox is disabled */\n  disabled?: boolean;\n  /** Callback when the checked state changes */\n  onCheckedChange?: (checked: boolean) => void;\n  /** @deprecated Use onCheckedChange instead */\n  onValueChange?: (checked: boolean) => void;\n  /** @deprecated Use onCheckedChange instead */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n  /** Click handler */\n  onClick?: (event: React.MouseEvent) => void;\n  /** Name for form submission */\n  name?: string;\n  /** Whether the field is required */\n  required?: boolean;\n  /** Additional class name */\n  className?: string;\n  /** Accessible label when no visible label is provided */\n  \"aria-label\"?: string;\n  /** ID of element that labels this checkbox */\n  \"aria-labelledby\"?: string;\n};\n\n/**\n * Checkbox group component props (with built-in Fieldset and CheckboxGroup)\n *\n * Usage:\n * ```tsx\n * <Checkbox.Group\n *   legend=\"Choose preferences\"\n *   defaultValue={['email']}\n *   error=\"You must select at least one option\"\n * >\n *   <Checkbox.Item label=\"Email notifications\" value=\"email\" />\n *   <Checkbox.Item label=\"SMS notifications\" value=\"sms\" />\n * </Checkbox.Group>\n * ```\n */\nexport interface CheckboxGroupProps {\n  /** Legend text for the group */\n  legend: string;\n  /** Child Checkbox.Item components */\n  children: ReactNode;\n  /** Error message for the group (only appears in groups, not single checkboxes) */\n  error?: string;\n  /** Helper text for the group */\n  description?: ReactNode;\n  /** Values of checkboxes that should be initially checked (uncontrolled) */\n  defaultValue?: string[];\n  /** Values of checkboxes that should be checked (controlled) */\n  value?: string[];\n  /** Event handler called when checkbox values change */\n  onValueChange?: (value: string[]) => void;\n  /** All possible checkbox values (required for parent checkbox pattern) */\n  allValues?: string[];\n  /** Whether all checkboxes in the group are disabled */\n  disabled?: boolean;\n  /** When true (default), checkbox appears before label. When false, label appears before checkbox. */\n  controlFirst?: boolean;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * Individual checkbox item within a group\n */\nexport type CheckboxItemProps = {\n  /** Visual variant: \"default\" or \"error\" for validation failures */\n  variant?: CheckboxVariant;\n  /** Label text displayed next to checkbox */\n  label: string;\n  /** Value of the checkbox (required when used in Checkbox.Group) */\n  value?: string;\n  /** Additional CSS classes for the label wrapper */\n  className?: string;\n  checked?: boolean;\n  indeterminate?: boolean;\n  disabled?: boolean;\n  /** Callback when the checked state changes */\n  onCheckedChange?: (checked: boolean) => void;\n  /** @deprecated Use onCheckedChange instead */\n  onValueChange?: (checked: boolean) => void;\n  name?: string;\n};\n\n// Single checkbox with built-in Field\nconst CheckboxBase = forwardRef<HTMLButtonElement, CheckboxProps>(\n  (\n    {\n      className,\n      checked,\n      indeterminate,\n      disabled,\n      variant = \"default\",\n      label,\n      labelTooltip,\n      controlFirst = true,\n      onCheckedChange,\n      onValueChange,\n      onChange,\n      required,\n      name,\n      ...props\n    },\n    ref,\n  ) => {\n    // A11y enforcement: warn in dev if no accessible name provided\n    if (process.env.NODE_ENV !== \"production\") {\n      const hasLabel = Boolean(label);\n      const hasAriaLabel = Boolean(props[\"aria-label\"]);\n      const hasAriaLabelledBy = Boolean(props[\"aria-labelledby\"]);\n\n      if (!hasLabel && !hasAriaLabel && !hasAriaLabelledBy) {\n        console.warn(\n          \"[Kumo Checkbox]: Checkbox must have an accessible name. Provide either:\\n\" +\n            \"  - label prop: <Checkbox label='Accept terms' />\\n\" +\n            \"  - aria-label: <Checkbox aria-label='Select item' />\\n\" +\n            \"  - aria-labelledby for custom label association\\n\" +\n            \"  Note: When used inside Checkbox.Group, label is optional\",\n        );\n      }\n    }\n\n    // Handle onCheckedChange (preferred) and deprecated onValueChange/onChange\n    const handleCheckedChange = (\n      newChecked: boolean,\n      eventDetails: CheckboxRootChangeEventDetails,\n    ) => {\n      onCheckedChange?.(newChecked);\n      onValueChange?.(newChecked);\n      if (onChange) {\n        // Backwards compatibility: extend native event with target.checked\n        // so existing code using `e.target.checked` continues to work\n        const event = Object.assign(eventDetails.event, {\n          target: { checked: newChecked },\n        });\n        onChange(event as never);\n      }\n    };\n\n    const checkboxControl = (\n      <BaseCheckbox.Root\n        ref={ref}\n        name={name}\n        checked={checked}\n        indeterminate={indeterminate}\n        disabled={disabled}\n        onCheckedChange={handleCheckedChange}\n        className={cn(\n          \"flex h-4 w-4 items-center justify-center rounded-sm border-0 bg-kumo-base ring\",\n          variant === \"error\" ? \"ring-kumo-danger\" : \"ring-kumo-line\",\n          !disabled && \"hover:ring-kumo-ring focus-visible:ring-kumo-ring\",\n          \"data-[checked]:bg-kumo-contrast data-[indeterminate]:bg-kumo-contrast\",\n          disabled && \"cursor-not-allowed opacity-50\",\n          className,\n        )}\n        {...props}\n      >\n        <BaseCheckbox.Indicator\n          className=\"flex items-center justify-center text-kumo-inverse\"\n          render={(renderProps, state) => {\n            const Icon = state.indeterminate ? MinusIcon : CheckIcon;\n            return (\n              <span {...renderProps}>\n                {(state.checked || state.indeterminate) && (\n                  <Icon weight=\"bold\" size={12} />\n                )}\n              </span>\n            );\n          }}\n        />\n      </BaseCheckbox.Root>\n    );\n\n    // If no label provided, return bare checkbox (for use in other components like Dropdown)\n    if (!label) {\n      return checkboxControl;\n    }\n\n    // Use Field.Root + Field.Label enclosing pattern for proper a11y association\n    // See: https://base-ui.com/react/components/field\n    return (\n      <FieldBase.Root className=\"inline-flex\">\n        <FieldBase.Label\n          className={cn(\n            \"inline-flex items-center gap-2\",\n            controlFirst ? \"flex-row\" : \"flex-row-reverse justify-end\",\n            disabled ? \"cursor-not-allowed\" : \"cursor-pointer\",\n          )}\n        >\n          {checkboxControl}\n          <Label\n            showOptional={required === false}\n            tooltip={labelTooltip}\n            asContent\n          >\n            {label}\n          </Label>\n        </FieldBase.Label>\n      </FieldBase.Root>\n    );\n  },\n);\n\nCheckboxBase.displayName = \"Checkbox\";\n\n// Checkbox.Item for use within Checkbox.Group\nconst CheckboxItem = forwardRef<HTMLButtonElement, CheckboxItemProps>(\n  (\n    {\n      className,\n      checked,\n      indeterminate,\n      disabled,\n      variant = \"default\",\n      label,\n      value,\n      onCheckedChange,\n      onValueChange,\n      name,\n    },\n    ref,\n  ) => {\n    const { controlFirst } = useContext(CheckboxGroupContext);\n\n    // Handle onCheckedChange (preferred) and deprecated onValueChange\n    const handleCheckedChange = (newChecked: boolean) => {\n      onCheckedChange?.(newChecked);\n      onValueChange?.(newChecked);\n    };\n\n    return (\n      <label\n        className={cn(\n          \"relative inline-flex items-center gap-2\",\n          // Control first (default): checkbox before label\n          // Label first: label before checkbox using flex-row-reverse\n          !controlFirst && \"flex-row-reverse justify-end\",\n          disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-pointer\",\n          className,\n        )}\n      >\n        <BaseCheckbox.Root\n          ref={ref}\n          value={value}\n          name={name}\n          checked={checked}\n          indeterminate={indeterminate}\n          disabled={disabled}\n          onCheckedChange={handleCheckedChange}\n          className={cn(\n            \"peer flex h-4 w-4 items-center justify-center rounded-sm border-0 bg-kumo-base ring\",\n            variant === \"error\" ? \"ring-kumo-danger\" : \"ring-kumo-line\",\n            !disabled &&\n              \"group-hover:ring-kumo-ring hover:ring-kumo-ring focus-visible:ring-kumo-ring\",\n            \"data-[checked]:bg-kumo-contrast data-[indeterminate]:bg-kumo-contrast\",\n          )}\n        >\n          <BaseCheckbox.Indicator\n            className=\"flex items-center justify-center text-kumo-inverse\"\n            render={(props, state) => {\n              const Icon = state.indeterminate ? MinusIcon : CheckIcon;\n              return (\n                <span {...props}>\n                  {(state.checked || state.indeterminate) && (\n                    <Icon weight=\"bold\" size={12} />\n                  )}\n                </span>\n              );\n            }}\n          />\n        </BaseCheckbox.Root>\n        <span className=\"text-base font-medium text-kumo-default\">{label}</span>\n      </label>\n    );\n  },\n);\n\nCheckboxItem.displayName = \"Checkbox.Item\";\n\n// Checkbox.Group with built-in Fieldset and CheckboxGroup\nfunction CheckboxGroup({\n  legend,\n  children,\n  error,\n  description,\n  defaultValue,\n  value,\n  onValueChange,\n  allValues,\n  disabled,\n  controlFirst = true,\n  className,\n}: CheckboxGroupProps) {\n  return (\n    <CheckboxGroupContext.Provider value={{ controlFirst }}>\n      <BaseCheckboxGroup\n        defaultValue={defaultValue}\n        value={value}\n        onValueChange={onValueChange}\n        allValues={allValues}\n        disabled={disabled}\n      >\n        <Fieldset.Root\n          className={cn(\n            \"flex flex-col gap-4 rounded-lg border border-kumo-line p-4\",\n            className,\n          )}\n        >\n          <Fieldset.Legend className=\"text-lg font-medium text-kumo-default\">\n            {legend}\n          </Fieldset.Legend>\n          <div className=\"flex flex-col gap-2\">{children}</div>\n          {error && <p className=\"text-sm text-kumo-danger\">{error}</p>}\n          {description && <p className=\"text-sm text-kumo-subtle\">{description}</p>}\n        </Fieldset.Root>\n      </BaseCheckboxGroup>\n    </CheckboxGroupContext.Provider>\n  );\n}\n\n// Compound component\nexport const Checkbox = Object.assign(CheckboxBase, {\n  Item: CheckboxItem,\n  Group: CheckboxGroup,\n});\n\nCheckbox.displayName = \"Checkbox\";\n"],"names":["KUMO_CHECKBOX_VARIANTS","KUMO_CHECKBOX_DEFAULT_VARIANTS","CheckboxGroupContext","createContext","CheckboxBase","forwardRef","className","checked","indeterminate","disabled","variant","label","labelTooltip","controlFirst","onCheckedChange","onValueChange","onChange","required","name","props","ref","hasLabel","hasAriaLabel","hasAriaLabelledBy","checkboxControl","jsx","BaseCheckbox.Root","newChecked","eventDetails","event","cn","BaseCheckbox.Indicator","renderProps","state","Icon","MinusIcon","CheckIcon","FieldBase.Root","jsxs","FieldBase.Label","Label","CheckboxItem","value","useContext","handleCheckedChange","CheckboxGroup","legend","children","error","description","defaultValue","allValues","BaseCheckboxGroup","Fieldset.Root","Fieldset.Legend","Checkbox"],"mappings":"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"}

package/dist/clipboard-text-BFHWMjmr.js

@@ -0,0 +1,108 @@
+"use client";
+import { jsxs as g, jsx as i } from "react/jsx-runtime";
+import { CheckIcon as C, ClipboardIcon as y } from "@phosphor-icons/react";
+import { forwardRef as T, useState as z, useCallback as v, useEffect as h } from "react";
+import { B as A } from "./button-E2-hZMZE.js";
+import { i as S } from "./input-Dqvc2AB_.js";
+import { c as d } from "./cn-Bhsu1vx2.js";
+const p = {
+  size: {
+    sm: {
+      classes: "text-xs",
+      buttonSize: "sm",
+      description: "Small clipboard text for compact UIs"
+    },
+    base: {
+      classes: "text-sm",
+      buttonSize: "base",
+      description: "Default clipboard text size"
+    },
+    lg: {
+      classes: "text-sm",
+      buttonSize: "lg",
+      description: "Large clipboard text for prominent display"
+    }
+  }
+}, m = {
+  size: "lg"
+};
+function R({
+  size: t = m.size
+} = {}) {
+  return d(
+    // Base styles
+    "flex items-center overflow-hidden bg-kumo-base px-0 font-mono",
+    // Apply size styles from KUMO_CLIPBOARD_TEXT_VARIANTS
+    p.size[t].classes
+  );
+}
+const I = T(
+  ({
+    text: t,
+    className: u,
+    size: n = m.size,
+    onCopy: r
+  }, f) => {
+    const [o, s] = z(!1), c = p.size[n], b = v(async () => {
+      try {
+        if (typeof navigator < "u" && navigator.clipboard && typeof navigator.clipboard.writeText == "function") {
+          await navigator.clipboard.writeText(t), s(!0), r?.();
+          return;
+        }
+      } catch {
+      }
+      if (typeof document < "u") {
+        const e = document.createElement("textarea");
+        e.value = t, e.setAttribute("readonly", ""), e.style.position = "absolute", e.style.left = "-9999px", document.body.appendChild(e);
+        const a = document.getSelection(), l = a?.rangeCount ? a.getRangeAt(0) : null;
+        e.select();
+        try {
+          document.execCommand("copy"), s(!0), r?.();
+        } catch (x) {
+          console.warn("Clipboard copy failed", x);
+        } finally {
+          document.body.removeChild(e), l && (a?.removeAllRanges(), a?.addRange(l));
+        }
+      }
+    }, [t, r]);
+    return h(() => {
+      if (o) {
+        const e = setTimeout(() => {
+          s(!1);
+        }, 2e3);
+        return () => clearTimeout(e);
+      }
+    }, [o]), /* @__PURE__ */ g(
+      "div",
+      {
+        ref: f,
+        className: d(
+          S({ size: c.buttonSize }),
+          R({ size: n }),
+          u
+        ),
+        children: [
+          /* @__PURE__ */ i("span", { className: "grow px-4", children: t }),
+          /* @__PURE__ */ i(
+            A,
+            {
+              size: c.buttonSize,
+              variant: "ghost",
+              className: "rounded-none border-l! border-kumo-line! px-3",
+              onClick: b,
+              "aria-label": o ? "Copied" : "Copy to clipboard",
+              "aria-pressed": o,
+              children: o ? /* @__PURE__ */ i(C, {}) : /* @__PURE__ */ i(y, {})
+            }
+          ),
+          /* @__PURE__ */ i("span", { className: "sr-only", "aria-live": "polite", children: o ? "Copied to clipboard" : "" })
+        ]
+      }
+    );
+  }
+);
+I.displayName = "ClipboardText";
+export {
+  I as C
+};
+//# sourceMappingURL=clipboard-text-BFHWMjmr.js.map

package/dist/clipboard-text-BFHWMjmr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clipboard-text-BFHWMjmr.js","sources":["../src/components/clipboard-text/clipboard-text.tsx"],"sourcesContent":["import { CheckIcon, ClipboardIcon } from \"@phosphor-icons/react\";\nimport { forwardRef, useCallback, useEffect, useState } from \"react\";\nimport { Button } from \"../button\";\nimport { inputVariants } from \"../input\";\nimport { cn } from \"../../utils/cn\";\n\nexport const KUMO_CLIPBOARD_TEXT_VARIANTS = {\n  size: {\n    sm: {\n      classes: \"text-xs\",\n      buttonSize: \"sm\" as const,\n      description: \"Small clipboard text for compact UIs\",\n    },\n    base: {\n      classes: \"text-sm\",\n      buttonSize: \"base\" as const,\n      description: \"Default clipboard text size\",\n    },\n    lg: {\n      classes: \"text-sm\",\n      buttonSize: \"lg\" as const,\n      description: \"Large clipboard text for prominent display\",\n    },\n  },\n} as const;\n\nexport const KUMO_CLIPBOARD_TEXT_DEFAULT_VARIANTS = {\n  size: \"lg\",\n} as const;\n\n// Derived types from KUMO_CLIPBOARD_TEXT_VARIANTS\nexport type KumoClipboardTextSize =\n  keyof typeof KUMO_CLIPBOARD_TEXT_VARIANTS.size;\n\nexport interface KumoClipboardTextVariantsProps {\n  size?: KumoClipboardTextSize;\n}\n\nexport function clipboardTextVariants({\n  size = KUMO_CLIPBOARD_TEXT_DEFAULT_VARIANTS.size,\n}: KumoClipboardTextVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"flex items-center overflow-hidden bg-kumo-base px-0 font-mono\",\n    // Apply size styles from KUMO_CLIPBOARD_TEXT_VARIANTS\n    KUMO_CLIPBOARD_TEXT_VARIANTS.size[size].classes,\n  );\n}\n\n// Legacy type alias for backwards compatibility\nexport type ClipboardTextSize = KumoClipboardTextSize;\n\nexport interface ClipboardTextProps extends KumoClipboardTextVariantsProps {\n  /** The text to display and copy to clipboard */\n  text: string;\n  /** Additional CSS classes */\n  className?: string;\n  /** Callback fired after text is copied */\n  onCopy?: () => void;\n}\n\nexport const ClipboardText = forwardRef<HTMLDivElement, ClipboardTextProps>(\n  (\n    {\n      text,\n      className,\n      size = KUMO_CLIPBOARD_TEXT_DEFAULT_VARIANTS.size,\n      onCopy,\n    },\n    ref,\n  ) => {\n    const [copied, setCopied] = useState(false);\n    const sizeConfig = KUMO_CLIPBOARD_TEXT_VARIANTS.size[size];\n\n    const copyToClipboard = useCallback(async () => {\n      try {\n        if (\n          typeof navigator !== \"undefined\" &&\n          navigator.clipboard &&\n          typeof navigator.clipboard.writeText === \"function\"\n        ) {\n          await navigator.clipboard.writeText(text);\n          setCopied(true);\n          onCopy?.();\n          return;\n        }\n      } catch {\n        // Fall through to manual fallback\n      }\n\n      if (typeof document !== \"undefined\") {\n        const textarea = document.createElement(\"textarea\");\n        textarea.value = text;\n        textarea.setAttribute(\"readonly\", \"\");\n        textarea.style.position = \"absolute\";\n        textarea.style.left = \"-9999px\";\n        document.body.appendChild(textarea);\n        const selection = document.getSelection();\n        const previousRange = selection?.rangeCount\n          ? selection.getRangeAt(0)\n          : null;\n        textarea.select();\n        try {\n          document.execCommand(\"copy\");\n          setCopied(true);\n          onCopy?.();\n        } catch (error) {\n          console.warn(\"Clipboard copy failed\", error);\n        } finally {\n          document.body.removeChild(textarea);\n          if (previousRange) {\n            selection?.removeAllRanges();\n            selection?.addRange(previousRange);\n          }\n        }\n      }\n    }, [text, onCopy]);\n\n    useEffect(() => {\n      if (copied) {\n        const timeoutId = setTimeout(() => {\n          setCopied(false);\n        }, 2000);\n\n        return () => clearTimeout(timeoutId);\n      }\n    }, [copied]);\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          inputVariants({ size: sizeConfig.buttonSize }),\n          clipboardTextVariants({ size }),\n          className,\n        )}\n      >\n        <span className=\"grow px-4\">{text}</span>\n        <Button\n          size={sizeConfig.buttonSize}\n          variant=\"ghost\"\n          className=\"rounded-none border-l! border-kumo-line! px-3\"\n          onClick={copyToClipboard}\n          aria-label={copied ? \"Copied\" : \"Copy to clipboard\"}\n          aria-pressed={copied}\n        >\n          {copied ? <CheckIcon /> : <ClipboardIcon />}\n        </Button>\n        <span className=\"sr-only\" aria-live=\"polite\">\n          {copied ? \"Copied to clipboard\" : \"\"}\n        </span>\n      </div>\n    );\n  },\n);\n\nClipboardText.displayName = \"ClipboardText\";\n"],"names":["KUMO_CLIPBOARD_TEXT_VARIANTS","KUMO_CLIPBOARD_TEXT_DEFAULT_VARIANTS","clipboardTextVariants","size","cn","ClipboardText","forwardRef","text","className","onCopy","ref","copied","setCopied","useState","sizeConfig","copyToClipboard","useCallback","textarea","selection","previousRange","error","useEffect","timeoutId","jsxs","inputVariants","jsx","Button","CheckIcon","ClipboardIcon"],"mappings":"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"}

package/dist/cn-Bhsu1vx2.js

@@ -0,0 +1,26 @@
+"use client";
+import { t as r, c as s } from "./vendor-styling-BQbxAbdS.js";
+function a(...e) {
+  return r(s(e));
+}
+const c = (e) => e.toString(16).padStart(2, "0");
+function l() {
+  const t = (typeof globalThis < "u" ? globalThis : {}).crypto;
+  if (t && typeof t.randomUUID == "function")
+    return t.randomUUID();
+  if (t && typeof t.getRandomValues == "function") {
+    const n = new Uint8Array(16);
+    t.getRandomValues(n), n[6] = n[6] & 15 | 64, n[8] = n[8] & 63 | 128;
+    const o = Array.from(n, c).join("");
+    return `${o.slice(0, 8)}-${o.slice(8, 12)}-${o.slice(
+      12,
+      16
+    )}-${o.slice(16, 20)}-${o.slice(20)}`;
+  }
+  return `r${Math.random().toString(36).slice(2)}${Date.now().toString(36)}`;
+}
+export {
+  a as c,
+  l as s
+};
+//# sourceMappingURL=cn-Bhsu1vx2.js.map

package/dist/cn-Bhsu1vx2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn-Bhsu1vx2.js","sources":["../src/utils/cn.ts"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\nconst toHex = (n: number) => n.toString(16).padStart(2, \"0\");\n\nexport function safeRandomId(): string {\n  const g: any = typeof globalThis !== \"undefined\" ? (globalThis as any) : {};\n  const c = g.crypto;\n  if (c && typeof c.randomUUID === \"function\") {\n    return c.randomUUID();\n  }\n  // RFC4122 v4 using getRandomValues if available\n  if (c && typeof c.getRandomValues === \"function\") {\n    const bytes = new Uint8Array(16);\n    c.getRandomValues(bytes);\n    bytes[6] = (bytes[6] & 0x0f) | 0x40; // version 4\n    bytes[8] = (bytes[8] & 0x3f) | 0x80; // variant 10\n    const hex = Array.from(bytes, toHex).join(\"\");\n    return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(\n      12,\n      16,\n    )}-${hex.slice(16, 20)}-${hex.slice(20)}`;\n  }\n  // Last-resort fallback\n  return `r${Math.random().toString(36).slice(2)}${Date.now().toString(36)}`;\n}\n"],"names":["cn","inputs","twMerge","clsx","toHex","n","safeRandomId","c","bytes","hex"],"mappings":";;AAGO,SAASA,KAAMC,GAAsB;AAC1C,SAAOC,EAAQC,EAAKF,CAAM,CAAC;AAC7B;AAEA,MAAMG,IAAQ,CAACC,MAAcA,EAAE,SAAS,EAAE,EAAE,SAAS,GAAG,GAAG;AAEpD,SAASC,IAAuB;AAErC,QAAMC,KADS,OAAO,aAAe,MAAe,aAAqB,CAAA,GAC7D;AACZ,MAAIA,KAAK,OAAOA,EAAE,cAAe;AAC/B,WAAOA,EAAE,WAAA;AAGX,MAAIA,KAAK,OAAOA,EAAE,mBAAoB,YAAY;AAChD,UAAMC,IAAQ,IAAI,WAAW,EAAE;AAC/B,IAAAD,EAAE,gBAAgBC,CAAK,GACvBA,EAAM,CAAC,IAAKA,EAAM,CAAC,IAAI,KAAQ,IAC/BA,EAAM,CAAC,IAAKA,EAAM,CAAC,IAAI,KAAQ;AAC/B,UAAMC,IAAM,MAAM,KAAKD,GAAOJ,CAAK,EAAE,KAAK,EAAE;AAC5C,WAAO,GAAGK,EAAI,MAAM,GAAG,CAAC,CAAC,IAAIA,EAAI,MAAM,GAAG,EAAE,CAAC,IAAIA,EAAI;AAAA,MACnD;AAAA,MACA;AAAA,IAAA,CACD,IAAIA,EAAI,MAAM,IAAI,EAAE,CAAC,IAAIA,EAAI,MAAM,EAAE,CAAC;AAAA,EACzC;AAEA,SAAO,IAAI,KAAK,OAAA,EAAS,SAAS,EAAE,EAAE,MAAM,CAAC,CAAC,GAAG,KAAK,IAAA,EAAM,SAAS,EAAE,CAAC;AAC1E;"}

package/dist/code-T2wPDiM0.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsx as o } from "react/jsx-runtime";
+import { c } from "./cn-Bhsu1vx2.js";
+const i = {
+  lang: {
+    ts: {
+      classes: "",
+      description: "TypeScript code"
+    },
+    tsx: {
+      classes: "",
+      description: "TypeScript JSX code"
+    },
+    jsonc: {
+      classes: "",
+      description: "JSON with comments"
+    },
+    bash: {
+      classes: "",
+      description: "Shell/Bash commands"
+    },
+    css: {
+      classes: "",
+      description: "CSS styles"
+    }
+  }
+}, a = {
+  lang: "ts"
+};
+function l({
+  lang: s = a.lang
+} = {}) {
+  return c(
+    // Base styles
+    "m-0 w-auto rounded-none border-none bg-transparent p-0 font-mono text-sm leading-[20px] text-kumo-strong",
+    // Apply lang-specific styles (currently none, but extensible)
+    i.lang[s].classes
+  );
+}
+function n({
+  code: s,
+  lang: e = a.lang,
+  className: r,
+  style: d
+}) {
+  return /* @__PURE__ */ o("pre", { className: c(l({ lang: e }), r), style: d, children: s });
+}
+n.displayName = "Code";
+function t({ code: s, lang: e }) {
+  return /* @__PURE__ */ o("div", { className: "min-w-0 rounded-md border border-kumo-fill bg-kumo-base [&>pre]:p-2.5!", children: /* @__PURE__ */ o(n, { lang: e, code: s }) });
+}
+t.displayName = "CodeBlock";
+const u = Object.assign(n, {
+  Block: t
+}), C = t;
+export {
+  u as C,
+  C as a
+};
+//# sourceMappingURL=code-T2wPDiM0.js.map

package/dist/code-T2wPDiM0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-T2wPDiM0.js","sources":["../src/components/code/code.tsx"],"sourcesContent":["import { type CSSProperties } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport const KUMO_CODE_VARIANTS = {\n  lang: {\n    ts: {\n      classes: \"\",\n      description: \"TypeScript code\",\n    },\n    tsx: {\n      classes: \"\",\n      description: \"TypeScript JSX code\",\n    },\n    jsonc: {\n      classes: \"\",\n      description: \"JSON with comments\",\n    },\n    bash: {\n      classes: \"\",\n      description: \"Shell/Bash commands\",\n    },\n    css: {\n      classes: \"\",\n      description: \"CSS styles\",\n    },\n  },\n} as const;\n\nexport const KUMO_CODE_DEFAULT_VARIANTS = {\n  lang: \"ts\",\n} as const;\n\n/**\n * Styling metadata for Code component (for AI/Figma plugin consumption)\n */\nexport const KUMO_CODE_STYLING = {\n  /** Base semantic tokens used */\n  baseTokens: [\"text-kumo-strong\"],\n  /** Typography and layout */\n  typography: {\n    fontFamily: \"font-mono\",\n    fontSize: \"text-sm\",\n    lineHeight: \"leading-[20px]\",\n  },\n  /** Container dimensions */\n  dimensions: {\n    margin: \"m-0\",\n    padding: \"p-0\",\n    width: \"w-auto\",\n  },\n  /** Border and background */\n  appearance: {\n    borderRadius: \"rounded-none\",\n    border: \"border-none\",\n    background: \"bg-transparent\",\n  },\n} as const;\n\n/**\n * Styling metadata for CodeBlock component (for AI/Figma plugin consumption)\n */\nexport const KUMO_CODEBLOCK_STYLING = {\n  /** Base semantic tokens used */\n  baseTokens: [\"bg-kumo-base\", \"border-kumo-fill\"],\n  /** Container styling */\n  container: {\n    minWidth: \"min-w-0\",\n    borderRadius: \"rounded-md\",\n    border: \"border border-kumo-fill\",\n    background: \"bg-kumo-base\",\n  },\n  /** Inner code element padding */\n  innerPadding: \"[&>pre]:p-2.5\",\n  /** Parsed dimensions */\n  dimensions: {\n    borderRadius: 6, // md = 6px\n    padding: 10, // p-2.5 = 10px\n  },\n} as const;\n\n// Derived types from KUMO_CODE_VARIANTS\nexport type KumoCodeLang = keyof typeof KUMO_CODE_VARIANTS.lang;\n\nexport interface KumoCodeVariantsProps {\n  lang?: KumoCodeLang;\n}\n\nexport function codeVariants({\n  lang = KUMO_CODE_DEFAULT_VARIANTS.lang,\n}: KumoCodeVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"m-0 w-auto rounded-none border-none bg-transparent p-0 font-mono text-sm leading-[20px] text-kumo-strong\",\n    // Apply lang-specific styles (currently none, but extensible)\n    KUMO_CODE_VARIANTS.lang[lang].classes,\n  );\n}\n\n// Legacy type alias for backwards compatibility\nexport type CodeLang = KumoCodeLang;\n\n/** @deprecated Use CodeLang instead */\nexport type BundledLanguage = CodeLang;\n\nexport interface CodeProps extends KumoCodeVariantsProps {\n  /** The code content to display */\n  code: string;\n  /** Template values for interpolation */\n  values?: Record<\n    string,\n    {\n      value: string;\n      highlight?: boolean;\n    }\n  >;\n  /** Additional CSS classes */\n  className?: string;\n  /** Inline styles */\n  style?: CSSProperties;\n}\n\n/**\n * Simple code component without syntax highlighting.\n *\n * Renders code in a monospace font with customizable language metadata.\n * For a bordered container version, use `Code.Block` or `CodeBlock`.\n *\n * **Styling:**\n * - Typography: `font-mono text-sm leading-[20px]`\n * - Colors: `text-kumo-strong` with `bg-transparent`\n * - No borders or padding (use CodeBlock for styled container)\n * - Supports all semantic tokens via className prop\n */\nfunction CodeComponent({\n  code,\n  lang = KUMO_CODE_DEFAULT_VARIANTS.lang,\n  className,\n  style,\n}: CodeProps) {\n  return (\n    <pre className={cn(codeVariants({ lang }), className)} style={style}>\n      {code}\n    </pre>\n  );\n}\n\nCodeComponent.displayName = \"Code\";\n\nexport interface CodeBlockProps {\n  /** The code content to display */\n  code: string;\n  /** Language for syntax highlighting metadata */\n  lang?: CodeLang;\n}\n\n/**\n * Code block with border and background container.\n *\n * A styled wrapper around Code that adds a bordered container with surface background.\n * Useful for displaying code snippets with visual separation from surrounding content.\n *\n * **Styling:**\n * - Container: `min-w-0 rounded-md border border-kumo-fill bg-kumo-base`\n * - Inner padding: `p-2.5` (10px)\n * - Uses semantic tokens: `bg-kumo-base`, `border-kumo-fill`\n */\nfunction CodeBlockComponent({ code, lang }: CodeBlockProps) {\n  return (\n    <div className=\"min-w-0 rounded-md border border-kumo-fill bg-kumo-base [&>pre]:p-2.5!\">\n      <CodeComponent lang={lang} code={code} />\n    </div>\n  );\n}\n\nCodeBlockComponent.displayName = \"CodeBlock\";\n\n// Export Code with Block sub-component (for registry detection)\nexport const Code = Object.assign(CodeComponent, {\n  Block: CodeBlockComponent,\n});\n\n// Backward-compatible standalone export\nexport const CodeBlock = CodeBlockComponent;\n"],"names":["KUMO_CODE_VARIANTS","KUMO_CODE_DEFAULT_VARIANTS","codeVariants","lang","cn","CodeComponent","code","className","style","jsx","CodeBlockComponent","Code","CodeBlock"],"mappings":";;;AAGO,MAAMA,IAAqB;AAAA,EAChC,MAAM;AAAA,IACJ,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,KAAK;AAAA,MACH,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,OAAO;AAAA,MACL,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,KAAK;AAAA,MACH,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA6B;AAAA,EACxC,MAAM;AACR;AAyDO,SAASC,EAAa;AAAA,EAC3B,MAAAC,IAAOF,EAA2B;AACpC,IAA2B,IAAI;AAC7B,SAAOG;AAAA;AAAA,IAEL;AAAA;AAAA,IAEAJ,EAAmB,KAAKG,CAAI,EAAE;AAAA,EAAA;AAElC;AAqCA,SAASE,EAAc;AAAA,EACrB,MAAAC;AAAA,EACA,MAAAH,IAAOF,EAA2B;AAAA,EAClC,WAAAM;AAAA,EACA,OAAAC;AACF,GAAc;AACZ,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAWL,EAAGF,EAAa,EAAE,MAAAC,EAAA,CAAM,GAAGI,CAAS,GAAG,OAAAC,GACpD,UAAAF,EAAA,CACH;AAEJ;AAEAD,EAAc,cAAc;AAoB5B,SAASK,EAAmB,EAAE,MAAAJ,GAAM,MAAAH,KAAwB;AAC1D,SACE,gBAAAM,EAAC,SAAI,WAAU,0EACb,4BAACJ,GAAA,EAAc,MAAAF,GAAY,MAAAG,GAAY,EAAA,CACzC;AAEJ;AAEAI,EAAmB,cAAc;AAG1B,MAAMC,IAAO,OAAO,OAAON,GAAe;AAAA,EAC/C,OAAOK;AACT,CAAC,GAGYE,IAAYF;"}

package/dist/collapsible-OBNkTO48.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsxs as a, jsx as l } from "react/jsx-runtime";
+import { CaretDownIcon as d } from "@phosphor-icons/react";
+import { forwardRef as p, useId as u, useCallback as f } from "react";
+import { c as t } from "./cn-Bhsu1vx2.js";
+function b(e = {}) {
+  return t(
+    // Base styles for the trigger
+    "flex cursor-pointer items-center gap-1 text-sm text-kumo-link select-none"
+  );
+}
+const x = p(
+  ({ label: e, open: r, onOpenChange: o, children: i, className: n }, c) => {
+    const s = u(), m = f(() => {
+      o?.(!r);
+    }, [r, o]);
+    return /* @__PURE__ */ a("div", { ref: c, children: [
+      /* @__PURE__ */ a(
+        "button",
+        {
+          type: "button",
+          "aria-expanded": r,
+          "aria-controls": s,
+          className: b(),
+          onClick: m,
+          children: [
+            e,
+            " ",
+            /* @__PURE__ */ l(
+              d,
+              {
+                className: t("h-4 w-4 transition-transform", r && "rotate-180")
+              }
+            )
+          ]
+        }
+      ),
+      r && /* @__PURE__ */ l(
+        "div",
+        {
+          id: s,
+          className: t(
+            "my-2 space-y-4 border-l-2 border-kumo-fill pl-4",
+            n
+          ),
+          children: i
+        }
+      )
+    ] });
+  }
+);
+x.displayName = "Collapsible";
+export {
+  x as C
+};
+//# sourceMappingURL=collapsible-OBNkTO48.js.map

package/dist/collapsible-OBNkTO48.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible-OBNkTO48.js","sources":["../src/components/collapsible/collapsible.tsx"],"sourcesContent":["import { CaretDownIcon } from \"@phosphor-icons/react\";\nimport { type PropsWithChildren, forwardRef, useCallback, useId } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport const KUMO_COLLAPSIBLE_VARIANTS = {} as const;\n\nexport const KUMO_COLLAPSIBLE_DEFAULT_VARIANTS = {} as const;\n\nexport interface KumoCollapsibleVariantsProps {}\n\nexport function collapsibleVariants(_props: KumoCollapsibleVariantsProps = {}) {\n  return cn(\n    // Base styles for the trigger\n    \"flex cursor-pointer items-center gap-1 text-sm text-kumo-link select-none\",\n  );\n}\n\nexport type CollapsibleProps = PropsWithChildren<\n  KumoCollapsibleVariantsProps & {\n    /** Text label displayed in the trigger button */\n    label: string;\n    /** Whether the collapsible content is visible */\n    open?: boolean;\n    /** Callback fired when the open state changes */\n    onOpenChange?: (open: boolean) => void;\n    /** Additional CSS classes for the content panel */\n    className?: string;\n  }\n>;\n\n/**\n * Collapsible component for showing/hiding content.\n *\n * Features:\n * - Animated chevron indicator (rotates 180° when open)\n * - Accessible with aria-expanded and aria-controls\n * - Content panel with left border accent\n *\n * @example\n * ```tsx\n * const [open, setOpen] = useState(false);\n *\n * <Collapsible label=\"Show details\" open={open} onOpenChange={setOpen}>\n *   <Text>Hidden content revealed when expanded.</Text>\n * </Collapsible>\n * ```\n *\n * @example Controlled accordion pattern\n * ```tsx\n * const [activeIndex, setActiveIndex] = useState<number | null>(null);\n *\n * {items.map((item, i) => (\n *   <Collapsible\n *     key={i}\n *     label={item.title}\n *     open={activeIndex === i}\n *     onOpenChange={(open) => setActiveIndex(open ? i : null)}\n *   >\n *     {item.content}\n *   </Collapsible>\n * ))}\n * ```\n */\nexport const Collapsible = forwardRef<HTMLDivElement, CollapsibleProps>(\n  ({ label, open, onOpenChange, children, className }, ref) => {\n    const contentId = useId();\n\n    const handleOpen = useCallback(() => {\n      onOpenChange?.(!open);\n    }, [open, onOpenChange]);\n\n    return (\n      <div ref={ref}>\n        <button\n          type=\"button\"\n          aria-expanded={open}\n          aria-controls={contentId}\n          className={collapsibleVariants()}\n          onClick={handleOpen}\n        >\n          {label}{\" \"}\n          <CaretDownIcon\n            className={cn(\"h-4 w-4 transition-transform\", open && \"rotate-180\")}\n          />\n        </button>\n        {open && (\n          <div\n            id={contentId}\n            className={cn(\n              \"my-2 space-y-4 border-l-2 border-kumo-fill pl-4\",\n              className,\n            )}\n          >\n            {children}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nCollapsible.displayName = \"Collapsible\";\n"],"names":["collapsibleVariants","_props","cn","Collapsible","forwardRef","label","open","onOpenChange","children","className","ref","contentId","useId","handleOpen","useCallback","jsxs","jsx","CaretDownIcon"],"mappings":";;;;;AAUO,SAASA,EAAoBC,IAAuC,IAAI;AAC7E,SAAOC;AAAA;AAAA,IAEL;AAAA,EAAA;AAEJ;AAgDO,MAAMC,IAAcC;AAAA,EACzB,CAAC,EAAE,OAAAC,GAAO,MAAAC,GAAM,cAAAC,GAAc,UAAAC,GAAU,WAAAC,EAAA,GAAaC,MAAQ;AAC3D,UAAMC,IAAYC,EAAA,GAEZC,IAAaC,EAAY,MAAM;AACnC,MAAAP,IAAe,CAACD,CAAI;AAAA,IACtB,GAAG,CAACA,GAAMC,CAAY,CAAC;AAEvB,WACE,gBAAAQ,EAAC,SAAI,KAAAL,GACH,UAAA;AAAA,MAAA,gBAAAK;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,iBAAeT;AAAA,UACf,iBAAeK;AAAA,UACf,WAAWX,EAAA;AAAA,UACX,SAASa;AAAA,UAER,UAAA;AAAA,YAAAR;AAAA,YAAO;AAAA,YACR,gBAAAW;AAAA,cAACC;AAAA,cAAA;AAAA,gBACC,WAAWf,EAAG,gCAAgCI,KAAQ,YAAY;AAAA,cAAA;AAAA,YAAA;AAAA,UACpE;AAAA,QAAA;AAAA,MAAA;AAAA,MAEDA,KACC,gBAAAU;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAIL;AAAA,UACJ,WAAWT;AAAA,YACT;AAAA,YACAO;AAAA,UAAA;AAAA,UAGD,UAAAD;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GAEJ;AAAA,EAEJ;AACF;AAEAL,EAAY,cAAc;"}