@cloudflare/kumo 1.6.0 → 1.7.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @cloudflare/kumo
 
+## 1.7.0
+
+### Minor Changes
+
+- d9b6498: feat(flow): add FlowDiagram components for building directed flow diagrams
+
+  New components for visualizing workflows and data flows:
+  - `FlowDiagram` - Root container with pan/scroll support for large diagrams
+  - `FlowNode` - Individual node with automatic connector points
+  - `FlowNode.Anchor` - Custom attachment points for connectors within nodes
+  - `FlowParallelNode` - Container for parallel branches with junction connectors
+
+  Adds `motion` as a new dependency for smooth panning interactions.
+
+### Patch Changes
+
+- 835a7c0: Deprecate DateRangePicker in favor of DatePicker with `mode="range"`
+  - Added `@deprecated` JSDoc comments to DateRangePicker component and its exports
+  - IDEs will now show deprecation warnings guiding users to use DatePicker instead
+
+- 391f13a: Prevented ClipboardText from overflowing with long text values.
+- d0e1d29: chore(kumo): add test scripts to root package.json
+
 ## 1.6.0
 
 ### Minor Changes

package/ai/component-registry.json

@@ -2344,13 +2344,7 @@
           "description": "Callback when end date changes"
         }
       },
-      "examples": [
-        "<div className=\"flex flex-col gap-4\">\n      <DateRangePicker\n        onStartDateChange={setStartDate}\n        onEndDateChange={setEndDate}\n      />\n      <div className=\"text-sm text-kumo-subtle\">\n        {startDate && endDate ? (\n          <span>\n            Selected: {startDate.toLocaleDateString()} -{\" \"}\n            {endDate.toLocaleDateString()}\n          </span>\n        ) : startDate ? (\n          <span>Start: {startDate.toLocaleDateString()} (select end date)</span>\n        ) : (\n          <span>Select a date range</span>\n        )}\n      </div>\n    </div>",
-        "<div className=\"flex flex-col gap-8\">\n      <div>\n        <p className=\"mb-2 text-sm font-medium text-kumo-default\">Small</p>\n        <DateRangePicker\n          size=\"sm\"\n          onStartDateChange={() => {}}\n          onEndDateChange={() => {}}\n        />\n      </div>\n      <div>\n        <p className=\"mb-2 text-sm font-medium text-kumo-default\">\n          Base (default)\n        </p>\n        <DateRangePicker\n          size=\"base\"\n          onStartDateChange={() => {}}\n          onEndDateChange={() => {}}\n        />\n      </div>\n      <div>\n        <p className=\"mb-2 text-sm font-medium text-kumo-default\">Large</p>\n        <DateRangePicker\n          size=\"lg\"\n          onStartDateChange={() => {}}\n          onEndDateChange={() => {}}\n        />\n      </div>\n    </div>",
-        "<div className=\"flex flex-col gap-8\">\n      <div>\n        <p className=\"mb-2 text-sm font-medium text-kumo-default\">\n          Default variant\n        </p>\n        <DateRangePicker\n          variant=\"default\"\n          onStartDateChange={() => {}}\n          onEndDateChange={() => {}}\n        />\n      </div>\n      <div>\n        <p className=\"mb-2 text-sm font-medium text-kumo-default\">\n          Subtle variant\n        </p>\n        <DateRangePicker\n          variant=\"subtle\"\n          onStartDateChange={() => {}}\n          onEndDateChange={() => {}}\n        />\n      </div>\n    </div>",
-        "<DateRangePicker\n      timezone=\"London, UK (GMT+0)\"\n      onStartDateChange={() => {}}\n      onEndDateChange={() => {}}\n    />",
-        "<div className=\"flex flex-col gap-4\">\n      <DateRangePicker\n        onStartDateChange={setStartDate}\n        onEndDateChange={setEndDate}\n      />\n      <div className=\"rounded-lg bg-kumo-control p-3 text-sm text-kumo-default\">\n        <strong>Selection:</strong> {formatDateRange()}\n      </div>\n    </div>"
-      ],
+      "examples": [],
       "colors": [
         "bg-kumo-base",
         "bg-kumo-contrast",

package/ai/component-registry.md

@@ -1892,94 +1892,6 @@ DateRangePicker — dual-calendar date range selector.  Renders two side-by-side
       - padding: 20
       - gap: 12
 
-**Examples:**
-
-```tsx
-<div className="flex flex-col gap-4">
-      <DateRangePicker
-        onStartDateChange={setStartDate}
-        onEndDateChange={setEndDate}
-      />
-      <div className="text-sm text-kumo-subtle">
-        {startDate && endDate ? (
-          <span>
-            Selected: {startDate.toLocaleDateString()} -{" "}
-            {endDate.toLocaleDateString()}
-          </span>
-        ) : startDate ? (
-          <span>Start: {startDate.toLocaleDateString()} (select end date)</span>
-        ) : (
-          <span>Select a date range</span>
-        )}
-      </div>
-    </div>
-```
-
-```tsx
-<div className="flex flex-col gap-8">
-      <div>
-        <p className="mb-2 text-sm font-medium text-kumo-default">Small</p>
-        <DateRangePicker
-          size="sm"
-          onStartDateChange={() => {}}
-          onEndDateChange={() => {}}
-        />
-      </div>
-      <div>
-        <p className="mb-2 text-sm font-medium text-kumo-default">
-          Base (default)
-        </p>
-        <DateRangePicker
-          size="base"
-          onStartDateChange={() => {}}
-          onEndDateChange={() => {}}
-        />
-      </div>
-      <div>
-        <p className="mb-2 text-sm font-medium text-kumo-default">Large</p>
-        <DateRangePicker
-          size="lg"
-          onStartDateChange={() => {}}
-          onEndDateChange={() => {}}
-        />
-      </div>
-    </div>
-```
-
-```tsx
-<div className="flex flex-col gap-8">
-      <div>
-        <p className="mb-2 text-sm font-medium text-kumo-default">
-          Default variant
-        </p>
-        <DateRangePicker
-          variant="default"
-          onStartDateChange={() => {}}
-          onEndDateChange={() => {}}
-        />
-      </div>
-      <div>
-        <p className="mb-2 text-sm font-medium text-kumo-default">
-          Subtle variant
-        </p>
-        <DateRangePicker
-          variant="subtle"
-          onStartDateChange={() => {}}
-          onEndDateChange={() => {}}
-        />
-      </div>
-    </div>
-```
-
-```tsx
-<DateRangePicker
-      timezone="London, UK (GMT+0)"
-      onStartDateChange={() => {}}
-      onEndDateChange={() => {}}
-    />
-```
-
-
 ---
 
 ### Dialog

package/dist/.build-complete

@@ -1 +1 @@
-1771426000663
+1771589636862

package/dist/{clipboard-text-Bw5rKPXz.js → clipboard-text-CeoyR28P.js}

@@ -149,7 +149,7 @@ const q = A(
           s
         ),
         children: [
-          /* @__PURE__ */ e("span", { className: "grow px-4", children: t }),
+          /* @__PURE__ */ e("span", { className: "grow truncate ps-4 pe-2", children: t }),
           n ? /* @__PURE__ */ e($, { children: /* @__PURE__ */ c(
             V,
             {
@@ -182,4 +182,4 @@ q.displayName = "ClipboardText";
 export {
   q as C
 };
-//# sourceMappingURL=clipboard-text-Bw5rKPXz.js.map
+//# sourceMappingURL=clipboard-text-CeoyR28P.js.map

package/dist/{clipboard-text-Bw5rKPXz.js.map → clipboard-text-CeoyR28P.js.map}

@@ -1 +1 @@
-{"version":3,"file":"clipboard-text-Bw5rKPXz.js","sources":["../src/components/clipboard-text/clipboard-text.tsx"],"sourcesContent":["import { CheckIcon, CopyIcon } from \"@phosphor-icons/react\";\nimport { forwardRef, useCallback, useRef, useState } from \"react\";\nimport { Toast } from \"@base-ui/react/toast\";\nimport { Tooltip } from \"@base-ui/react/tooltip\";\nimport { Button } from \"../button\";\nimport { inputVariants } from \"../input\";\nimport { cn } from \"../../utils/cn\";\n\n// Create a toast manager for anchored \"Copied\" toasts\nconst clipboardToastManager = Toast.createToastManager();\n\n/** ClipboardText size variant definitions mapping sizes to their Tailwind classes. */\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\nconst clipboardTextAnimations = {\n  slide: {\n    initial:\n      \"pointer-events-none absolute inset-0 flex items-center justify-center opacity-0 translate-y-full\",\n    animate: \"translate-y-0 opacity-100\",\n    end: \"pointer-events-none absolute inset-0 flex items-center justify-center opacity-0 -translate-y-full\",\n  },\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  /**\n   * Size of the clipboard text field.\n   * - `\"sm\"` — Small clipboard text for compact UIs\n   * - `\"base\"` — Default clipboard text size\n   * - `\"lg\"` — Large clipboard text for prominent display\n   * @default \"lg\"\n   */\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\n/**\n * ClipboardText component props.\n *\n * @example\n * ```tsx\n * <ClipboardText text=\"sk_live_abc123\" />\n * <ClipboardText text=\"npm install @cloudflare/kumo\" size=\"sm\" />\n * ```\n */\nexport interface ClipboardTextProps extends KumoClipboardTextVariantsProps {\n  /** The text to display and copy to clipboard. */\n  text: string;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /** Callback fired after text is copied to clipboard. */\n  onCopy?: () => void;\n  /**\n   * Tooltip config. Shows tooltip on hover, anchored toast on click.\n   * @example\n   * ```tsx\n   * <ClipboardText\n   *   text=\"abc123\"\n   *   tooltip={{ text: \"Copy\", copiedText: \"Copied!\", side: \"top\" }}\n   * />\n   * ```\n   */\n  tooltip?: {\n    /** Text shown in tooltip on hover. @default \"Copy\" */\n    text?: string;\n    /** Text shown in toast after copying. @default \"Copied\" */\n    copiedText?: string;\n    /** Tooltip/toast placement. @default \"top\" */\n    side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  };\n  /** Accessible labels for i18n. */\n  labels?: {\n    /** @default \"Copy to clipboard\" */\n    copyAction?: string;\n  };\n}\n\n/**\n * Anchored toasts viewport - renders \"Copied\" toasts anchored to buttons\n */\nfunction AnchoredToasts() {\n  const { toasts } = Toast.useToastManager();\n  return (\n    <Toast.Viewport className=\"pointer-events-none fixed inset-0 z-50\">\n      {toasts.map((toast) => (\n        <Toast.Positioner key={toast.id} toast={toast} className=\"absolute\">\n          <Toast.Root\n            toast={toast}\n            className={cn(\n              \"flex origin-[var(--transform-origin)] flex-col rounded-md bg-kumo-base px-3 py-1.5 text-xs text-kumo-default font-sans\",\n              \"shadow-lg shadow-kumo-tip-shadow outline outline-kumo-fill\",\n            )}\n          >\n            <Toast.Description />\n          </Toast.Root>\n        </Toast.Positioner>\n      ))}\n    </Toast.Viewport>\n  );\n}\n\n/**\n * Internal wrapper that provides Toast context when tooltip is enabled.\n */\nfunction TooltipWrapper({ children }: { children: React.ReactNode }) {\n  return (\n    <Tooltip.Provider>\n      <Toast.Provider toastManager={clipboardToastManager}>\n        <AnchoredToasts />\n        {children}\n      </Toast.Provider>\n    </Tooltip.Provider>\n  );\n}\n\n/**\n * Read-only text field with a one-click copy-to-clipboard button.\n *\n * @example\n * ```tsx\n * <ClipboardText text=\"0c239dd2\" />\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      tooltip,\n      labels: { copyAction = \"Copy to clipboard\" } = {},\n    },\n    ref,\n  ) => {\n    const [copied, setCopied] = useState(false);\n    const buttonRef = useRef<HTMLButtonElement | null>(null);\n    const sizeConfig = KUMO_CLIPBOARD_TEXT_VARIANTS.size[size];\n\n    // Destructure tooltip config with defaults\n    const {\n      text: tooltipText = \"Copy\",\n      copiedText = \"Copied\",\n      side: tooltipSide = \"top\",\n    } = tooltip ?? {};\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        } else if (typeof document !== \"undefined\") {\n          // Fallback for older browsers\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          } finally {\n            document.body.removeChild(textarea);\n            if (previousRange) {\n              selection?.removeAllRanges();\n              selection?.addRange(previousRange);\n            }\n          }\n        }\n\n        setCopied(true);\n\n        // Show anchored toast if tooltip mode is enabled\n        if (tooltip) {\n          clipboardToastManager.add({\n            description: copiedText,\n            positionerProps: {\n              anchor: buttonRef.current,\n              side: tooltipSide,\n              sideOffset: 8,\n            },\n            timeout: 1500,\n            onClose() {\n              setCopied(false);\n            },\n          });\n        } else {\n          // Reset copied state after delay when no tooltip\n          setTimeout(() => setCopied(false), 1500);\n        }\n\n        onCopy?.();\n      } catch (error) {\n        console.warn(\"Clipboard copy failed\", error);\n      }\n    }, [text, onCopy, tooltip, copiedText, tooltipSide]);\n\n    const copyButton = (\n      <Button\n        ref={buttonRef}\n        size={sizeConfig.buttonSize}\n        variant=\"ghost\"\n        className=\"rounded-none border-l! border-kumo-line! px-3 relative overflow-hidden transition-all duration-200\"\n        onClick={copyToClipboard}\n        aria-label={copyAction}\n      >\n        <span\n          className={cn(\n            \"flex items-center gap-1 transition-all duration-200\",\n            copied\n              ? clipboardTextAnimations.slide.animate\n              : clipboardTextAnimations.slide.initial,\n          )}\n        >\n          <CheckIcon />\n        </span>\n        <span\n          className={cn(\n            \"flex items-center justify-center transition-all duration-200\",\n            copied\n              ? clipboardTextAnimations.slide.end\n              : clipboardTextAnimations.slide.animate,\n          )}\n        >\n          <CopyIcon />\n        </span>\n      </Button>\n    );\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        {tooltip ? (\n          <TooltipWrapper>\n            <Tooltip.Root\n              disabled={copied}\n              onOpenChange={(open, eventDetails) => {\n                // Prevent tooltip from closing when button is clicked\n                if (eventDetails.reason === \"trigger-press\") {\n                  eventDetails.cancel();\n                }\n              }}\n            >\n              <Tooltip.Trigger render={copyButton} />\n              <Tooltip.Portal>\n                <Tooltip.Positioner side={tooltipSide} sideOffset={8}>\n                  <Tooltip.Popup\n                    className={cn(\n                      \"flex origin-[var(--transform-origin)] flex-col rounded-md bg-kumo-base px-3 py-1.5 text-xs text-kumo-default\",\n                      \"shadow-lg shadow-kumo-tip-shadow outline outline-kumo-fill\",\n                    )}\n                  >\n                    {tooltipText}\n                  </Tooltip.Popup>\n                </Tooltip.Positioner>\n              </Tooltip.Portal>\n            </Tooltip.Root>\n          </TooltipWrapper>\n        ) : (\n          copyButton\n        )}\n        <span className=\"sr-only\" aria-live=\"polite\">\n          {copied ? copiedText : \"\"}\n        </span>\n      </div>\n    );\n  },\n);\n\nClipboardText.displayName = \"ClipboardText\";\n"],"names":["clipboardToastManager","Toast.createToastManager","KUMO_CLIPBOARD_TEXT_VARIANTS","KUMO_CLIPBOARD_TEXT_DEFAULT_VARIANTS","clipboardTextAnimations","clipboardTextVariants","size","cn","AnchoredToasts","toasts","Toast.useToastManager","Toast.Viewport","toast","Toast.Positioner","jsx","Toast.Root","Toast.Description","TooltipWrapper","children","Tooltip.Provider","Toast.Provider","ClipboardText","forwardRef","text","className","onCopy","tooltip","copyAction","ref","copied","setCopied","useState","buttonRef","useRef","sizeConfig","tooltipText","copiedText","tooltipSide","copyToClipboard","useCallback","textarea","selection","previousRange","error","copyButton","jsxs","Button","CheckIcon","CopyIcon","inputVariants","Tooltip.Root","open","eventDetails","Tooltip.Trigger","Tooltip.Portal","Tooltip.Positioner","Tooltip.Popup"],"mappings":"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"}
+{"version":3,"file":"clipboard-text-CeoyR28P.js","sources":["../src/components/clipboard-text/clipboard-text.tsx"],"sourcesContent":["import { CheckIcon, CopyIcon } from \"@phosphor-icons/react\";\nimport { forwardRef, useCallback, useRef, useState } from \"react\";\nimport { Toast } from \"@base-ui/react/toast\";\nimport { Tooltip } from \"@base-ui/react/tooltip\";\nimport { Button } from \"../button\";\nimport { inputVariants } from \"../input\";\nimport { cn } from \"../../utils/cn\";\n\n// Create a toast manager for anchored \"Copied\" toasts\nconst clipboardToastManager = Toast.createToastManager();\n\n/** ClipboardText size variant definitions mapping sizes to their Tailwind classes. */\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\nconst clipboardTextAnimations = {\n  slide: {\n    initial:\n      \"pointer-events-none absolute inset-0 flex items-center justify-center opacity-0 translate-y-full\",\n    animate: \"translate-y-0 opacity-100\",\n    end: \"pointer-events-none absolute inset-0 flex items-center justify-center opacity-0 -translate-y-full\",\n  },\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  /**\n   * Size of the clipboard text field.\n   * - `\"sm\"` — Small clipboard text for compact UIs\n   * - `\"base\"` — Default clipboard text size\n   * - `\"lg\"` — Large clipboard text for prominent display\n   * @default \"lg\"\n   */\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\n/**\n * ClipboardText component props.\n *\n * @example\n * ```tsx\n * <ClipboardText text=\"sk_live_abc123\" />\n * <ClipboardText text=\"npm install @cloudflare/kumo\" size=\"sm\" />\n * ```\n */\nexport interface ClipboardTextProps extends KumoClipboardTextVariantsProps {\n  /** The text to display and copy to clipboard. */\n  text: string;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /** Callback fired after text is copied to clipboard. */\n  onCopy?: () => void;\n  /**\n   * Tooltip config. Shows tooltip on hover, anchored toast on click.\n   * @example\n   * ```tsx\n   * <ClipboardText\n   *   text=\"abc123\"\n   *   tooltip={{ text: \"Copy\", copiedText: \"Copied!\", side: \"top\" }}\n   * />\n   * ```\n   */\n  tooltip?: {\n    /** Text shown in tooltip on hover. @default \"Copy\" */\n    text?: string;\n    /** Text shown in toast after copying. @default \"Copied\" */\n    copiedText?: string;\n    /** Tooltip/toast placement. @default \"top\" */\n    side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  };\n  /** Accessible labels for i18n. */\n  labels?: {\n    /** @default \"Copy to clipboard\" */\n    copyAction?: string;\n  };\n}\n\n/**\n * Anchored toasts viewport - renders \"Copied\" toasts anchored to buttons\n */\nfunction AnchoredToasts() {\n  const { toasts } = Toast.useToastManager();\n  return (\n    <Toast.Viewport className=\"pointer-events-none fixed inset-0 z-50\">\n      {toasts.map((toast) => (\n        <Toast.Positioner key={toast.id} toast={toast} className=\"absolute\">\n          <Toast.Root\n            toast={toast}\n            className={cn(\n              \"flex origin-[var(--transform-origin)] flex-col rounded-md bg-kumo-base px-3 py-1.5 text-xs text-kumo-default font-sans\",\n              \"shadow-lg shadow-kumo-tip-shadow outline outline-kumo-fill\",\n            )}\n          >\n            <Toast.Description />\n          </Toast.Root>\n        </Toast.Positioner>\n      ))}\n    </Toast.Viewport>\n  );\n}\n\n/**\n * Internal wrapper that provides Toast context when tooltip is enabled.\n */\nfunction TooltipWrapper({ children }: { children: React.ReactNode }) {\n  return (\n    <Tooltip.Provider>\n      <Toast.Provider toastManager={clipboardToastManager}>\n        <AnchoredToasts />\n        {children}\n      </Toast.Provider>\n    </Tooltip.Provider>\n  );\n}\n\n/**\n * Read-only text field with a one-click copy-to-clipboard button.\n *\n * @example\n * ```tsx\n * <ClipboardText text=\"0c239dd2\" />\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      tooltip,\n      labels: { copyAction = \"Copy to clipboard\" } = {},\n    },\n    ref,\n  ) => {\n    const [copied, setCopied] = useState(false);\n    const buttonRef = useRef<HTMLButtonElement | null>(null);\n    const sizeConfig = KUMO_CLIPBOARD_TEXT_VARIANTS.size[size];\n\n    // Destructure tooltip config with defaults\n    const {\n      text: tooltipText = \"Copy\",\n      copiedText = \"Copied\",\n      side: tooltipSide = \"top\",\n    } = tooltip ?? {};\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        } else if (typeof document !== \"undefined\") {\n          // Fallback for older browsers\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          } finally {\n            document.body.removeChild(textarea);\n            if (previousRange) {\n              selection?.removeAllRanges();\n              selection?.addRange(previousRange);\n            }\n          }\n        }\n\n        setCopied(true);\n\n        // Show anchored toast if tooltip mode is enabled\n        if (tooltip) {\n          clipboardToastManager.add({\n            description: copiedText,\n            positionerProps: {\n              anchor: buttonRef.current,\n              side: tooltipSide,\n              sideOffset: 8,\n            },\n            timeout: 1500,\n            onClose() {\n              setCopied(false);\n            },\n          });\n        } else {\n          // Reset copied state after delay when no tooltip\n          setTimeout(() => setCopied(false), 1500);\n        }\n\n        onCopy?.();\n      } catch (error) {\n        console.warn(\"Clipboard copy failed\", error);\n      }\n    }, [text, onCopy, tooltip, copiedText, tooltipSide]);\n\n    const copyButton = (\n      <Button\n        ref={buttonRef}\n        size={sizeConfig.buttonSize}\n        variant=\"ghost\"\n        className=\"rounded-none border-l! border-kumo-line! px-3 relative overflow-hidden transition-all duration-200\"\n        onClick={copyToClipboard}\n        aria-label={copyAction}\n      >\n        <span\n          className={cn(\n            \"flex items-center gap-1 transition-all duration-200\",\n            copied\n              ? clipboardTextAnimations.slide.animate\n              : clipboardTextAnimations.slide.initial,\n          )}\n        >\n          <CheckIcon />\n        </span>\n        <span\n          className={cn(\n            \"flex items-center justify-center transition-all duration-200\",\n            copied\n              ? clipboardTextAnimations.slide.end\n              : clipboardTextAnimations.slide.animate,\n          )}\n        >\n          <CopyIcon />\n        </span>\n      </Button>\n    );\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 truncate ps-4 pe-2\">{text}</span>\n        {tooltip ? (\n          <TooltipWrapper>\n            <Tooltip.Root\n              disabled={copied}\n              onOpenChange={(open, eventDetails) => {\n                // Prevent tooltip from closing when button is clicked\n                if (eventDetails.reason === \"trigger-press\") {\n                  eventDetails.cancel();\n                }\n              }}\n            >\n              <Tooltip.Trigger render={copyButton} />\n              <Tooltip.Portal>\n                <Tooltip.Positioner side={tooltipSide} sideOffset={8}>\n                  <Tooltip.Popup\n                    className={cn(\n                      \"flex origin-[var(--transform-origin)] flex-col rounded-md bg-kumo-base px-3 py-1.5 text-xs text-kumo-default\",\n                      \"shadow-lg shadow-kumo-tip-shadow outline outline-kumo-fill\",\n                    )}\n                  >\n                    {tooltipText}\n                  </Tooltip.Popup>\n                </Tooltip.Positioner>\n              </Tooltip.Portal>\n            </Tooltip.Root>\n          </TooltipWrapper>\n        ) : (\n          copyButton\n        )}\n        <span className=\"sr-only\" aria-live=\"polite\">\n          {copied ? copiedText : \"\"}\n        </span>\n      </div>\n    );\n  },\n);\n\nClipboardText.displayName = \"ClipboardText\";\n"],"names":["clipboardToastManager","Toast.createToastManager","KUMO_CLIPBOARD_TEXT_VARIANTS","KUMO_CLIPBOARD_TEXT_DEFAULT_VARIANTS","clipboardTextAnimations","clipboardTextVariants","size","cn","AnchoredToasts","toasts","Toast.useToastManager","Toast.Viewport","toast","Toast.Positioner","jsx","Toast.Root","Toast.Description","TooltipWrapper","children","Tooltip.Provider","Toast.Provider","ClipboardText","forwardRef","text","className","onCopy","tooltip","copyAction","ref","copied","setCopied","useState","buttonRef","useRef","sizeConfig","tooltipText","copiedText","tooltipSide","copyToClipboard","useCallback","textarea","selection","previousRange","error","copyButton","jsxs","Button","CheckIcon","CopyIcon","inputVariants","Tooltip.Root","open","eventDetails","Tooltip.Trigger","Tooltip.Portal","Tooltip.Positioner","Tooltip.Popup"],"mappings":"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"}

package/dist/components/clipboard-text.js

@@ -1,5 +1,5 @@
 "use client";
-import { C as r } from "../clipboard-text-Bw5rKPXz.js";
+import { C as r } from "../clipboard-text-CeoyR28P.js";
 export {
   r as ClipboardText
 };