@cloudflare/kumo 1.17.0 → 1.19.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +143 -0
- package/ai/USAGE.md +38 -32
- package/ai/component-registry.json +289 -178
- package/ai/component-registry.md +980 -507
- package/ai/schemas.ts +20 -4
- package/dist/.build-complete +1 -1
- package/dist/ai/schemas.d.ts +95 -56
- package/dist/ai/schemas.d.ts.map +1 -1
- package/dist/ai/schemas.js +165 -148
- package/dist/ai/schemas.js.map +1 -1
- package/dist/chunks/{Legend-o0ntojbaplmszwk0.js → Legend-ks7se6149vsa3tze.js} +127 -118
- package/dist/chunks/Legend-ks7se6149vsa3tze.js.map +1 -0
- package/dist/chunks/badge-dan90i0rzy4pwa1j.js +102 -0
- package/dist/chunks/badge-dan90i0rzy4pwa1j.js.map +1 -0
- package/dist/chunks/{banner-nz0eryqnz3qd86ln.js → banner-eiwcnk7ts21s3bnb.js} +4 -4
- package/dist/chunks/{banner-nz0eryqnz3qd86ln.js.map → banner-eiwcnk7ts21s3bnb.js.map} +1 -1
- package/dist/chunks/{breadcrumbs-cjgn3w4drahvqnuj.js → breadcrumbs-ge20hcb3o5spswrk.js} +2 -2
- package/dist/chunks/{breadcrumbs-cjgn3w4drahvqnuj.js.map → breadcrumbs-ge20hcb3o5spswrk.js.map} +1 -1
- package/dist/chunks/{button-odxi0hp4fvi5i2w3.js → button-oaqi7ykdisyskoos.js} +8 -8
- package/dist/chunks/button-oaqi7ykdisyskoos.js.map +1 -0
- package/dist/chunks/{checkbox-dx8x0rzv582yjv7n.js → checkbox-mwgmohffm22ut13s.js} +15 -15
- package/dist/chunks/checkbox-mwgmohffm22ut13s.js.map +1 -0
- package/dist/chunks/{clipboard-text-kyk51d1ze7zvdn4q.js → clipboard-text-dxczqon3d27xp6f0.js} +10 -10
- package/dist/chunks/{clipboard-text-kyk51d1ze7zvdn4q.js.map → clipboard-text-dxczqon3d27xp6f0.js.map} +1 -1
- package/dist/chunks/{cloudflare-logo-bgts2jgsdh7sslw4.js → cloudflare-logo-pbavoe1wu8nr5c4n.js} +9 -9
- package/dist/chunks/{cloudflare-logo-bgts2jgsdh7sslw4.js.map → cloudflare-logo-pbavoe1wu8nr5c4n.js.map} +1 -1
- package/dist/chunks/{code-liq1g6f5lhee305d.js → code-cz0w1y5z4h29a9eg.js} +18 -18
- package/dist/chunks/code-cz0w1y5z4h29a9eg.js.map +1 -0
- package/dist/chunks/{combobox-9fhjzprab46csmon.js → combobox-eaowwt1xr4d23gsn.js} +113 -101
- package/dist/chunks/combobox-eaowwt1xr4d23gsn.js.map +1 -0
- package/dist/chunks/{command-palette-kenx2bbdzd4kpx36.js → command-palette-maqtbmpfev9mysqd.js} +20 -20
- package/dist/chunks/command-palette-maqtbmpfev9mysqd.js.map +1 -0
- package/dist/chunks/{dialog-e05ysa8t2fklw065.js → dialog-e3m5bhs7fds26p9y.js} +25 -25
- package/dist/chunks/dialog-e3m5bhs7fds26p9y.js.map +1 -0
- package/dist/chunks/{dropdown-g587px7zv3ssaxr4.js → dropdown-ewte287db3vyt8t5.js} +94 -92
- package/dist/chunks/{dropdown-g587px7zv3ssaxr4.js.map → dropdown-ewte287db3vyt8t5.js.map} +1 -1
- package/dist/chunks/{empty-fuz1un7r7mbz0kim.js → empty-dr1eckm2z40euns6.js} +2 -2
- package/dist/chunks/{empty-fuz1un7r7mbz0kim.js.map → empty-dr1eckm2z40euns6.js.map} +1 -1
- package/dist/chunks/{field-fq504lyu7ttsh5m9.js → field-bo5gmna16odrrb1q.js} +3 -3
- package/dist/chunks/{field-fq504lyu7ttsh5m9.js.map → field-bo5gmna16odrrb1q.js.map} +1 -1
- package/dist/chunks/{grid-m9r71jxo2b8q1972.js → grid-hj1ylz16p7g5uelh.js} +2 -2
- package/dist/chunks/{grid-m9r71jxo2b8q1972.js.map → grid-hj1ylz16p7g5uelh.js.map} +1 -1
- package/dist/chunks/input-area-jkkkjej6luumrqpa.js +78 -0
- package/dist/chunks/input-area-jkkkjej6luumrqpa.js.map +1 -0
- package/dist/chunks/input-cw05pbqdburghkus.js +113 -0
- package/dist/chunks/input-cw05pbqdburghkus.js.map +1 -0
- package/dist/chunks/{input-group-hbebbyh8fo6aqydn.js → input-group-lfugneuz71g42n0w.js} +27 -27
- package/dist/chunks/input-group-lfugneuz71g42n0w.js.map +1 -0
- package/dist/chunks/label-cvyvbqmt4mt757ff.js +68 -0
- package/dist/chunks/{label-j9owppbgnn35mebg.js.map → label-cvyvbqmt4mt757ff.js.map} +1 -1
- package/dist/chunks/layer-card-ljqth3yxgnk04v2o.js +46 -0
- package/dist/chunks/layer-card-ljqth3yxgnk04v2o.js.map +1 -0
- package/dist/chunks/{link-hmmf3k1xn6rm72rt.js → link-fjnhtxvfe5ieamjf.js} +2 -2
- package/dist/chunks/{link-hmmf3k1xn6rm72rt.js.map → link-fjnhtxvfe5ieamjf.js.map} +1 -1
- package/dist/chunks/{loader-m5wfmqwgucrr4i5v.js → loader-hr2w7cpqeev3p3vl.js} +9 -6
- package/dist/chunks/loader-hr2w7cpqeev3p3vl.js.map +1 -0
- package/dist/chunks/menubar-e5e4zwfagr0wx023.js +96 -0
- package/dist/chunks/menubar-e5e4zwfagr0wx023.js.map +1 -0
- package/dist/chunks/{meter-i84dte2f82qmvn7y.js → meter-duj3micor1lqj3y2.js} +2 -2
- package/dist/chunks/{meter-i84dte2f82qmvn7y.js.map → meter-duj3micor1lqj3y2.js.map} +1 -1
- package/dist/chunks/pagination-olaypvwr8swsmn8m.js +266 -0
- package/dist/chunks/pagination-olaypvwr8swsmn8m.js.map +1 -0
- package/dist/chunks/{popover-i951xjcgezeqr4iv.js → popover-nv9cmzbo7mf6bky0.js} +68 -72
- package/dist/chunks/popover-nv9cmzbo7mf6bky0.js.map +1 -0
- package/dist/chunks/{radio-l2vkcue40d84fmo1.js → radio-ihxbe37us2jnqtzf.js} +38 -38
- package/dist/chunks/radio-ihxbe37us2jnqtzf.js.map +1 -0
- package/dist/chunks/select-nx6ded5swra74iar.js +213 -0
- package/dist/chunks/select-nx6ded5swra74iar.js.map +1 -0
- package/dist/chunks/{sensitive-input-kznmknpp5h1grc6k.js → sensitive-input-00fujb510rrn61v9.js} +34 -34
- package/dist/chunks/{sensitive-input-kznmknpp5h1grc6k.js.map → sensitive-input-00fujb510rrn61v9.js.map} +1 -1
- package/dist/chunks/{sidebar-jepeq7gaf4issuw6.js → sidebar-ltbfius1eolkl8tb.js} +24 -28
- package/dist/chunks/sidebar-ltbfius1eolkl8tb.js.map +1 -0
- package/dist/chunks/surface-dfgurg5eu3et4vw1.js +29 -0
- package/dist/chunks/surface-dfgurg5eu3et4vw1.js.map +1 -0
- package/dist/chunks/{switch-i0zwcp3wq6vsxm1c.js → switch-fbv3iawqo3o3jgap.js} +104 -102
- package/dist/chunks/switch-fbv3iawqo3o3jgap.js.map +1 -0
- package/dist/chunks/table-of-contents-f813ivi7ta23vqdm.js +88 -0
- package/dist/chunks/table-of-contents-f813ivi7ta23vqdm.js.map +1 -0
- package/dist/chunks/table-olwwulga2l3hdwlx.js +189 -0
- package/dist/chunks/table-olwwulga2l3hdwlx.js.map +1 -0
- package/dist/chunks/{tabs-bw92jb303zxw7w4f.js → tabs-lohcglgppp6gj0hp.js} +16 -16
- package/dist/chunks/{tabs-bw92jb303zxw7w4f.js.map → tabs-lohcglgppp6gj0hp.js.map} +1 -1
- package/dist/chunks/{toast-lrnwby56drs7vtae.js → toast-dg52x89yd231mxhe.js} +30 -30
- package/dist/chunks/{toast-lrnwby56drs7vtae.js.map → toast-dg52x89yd231mxhe.js.map} +1 -1
- package/dist/chunks/{tooltip-cit9ltlxfuhwctuj.js → tooltip-hikjvdbg3xghnq1x.js} +38 -33
- package/dist/chunks/tooltip-hikjvdbg3xghnq1x.js.map +1 -0
- package/dist/chunks/{vendor-base-ui-n30qblevnpk9cc5c.js → vendor-base-ui-m5pz3e8c4grg5qmj.js} +46 -43
- package/dist/chunks/{vendor-base-ui-n30qblevnpk9cc5c.js.map → vendor-base-ui-m5pz3e8c4grg5qmj.js.map} +1 -1
- package/dist/code.js +1 -1
- package/dist/components/badge.js +1 -1
- package/dist/components/banner.js +1 -1
- package/dist/components/breadcrumbs.js +1 -1
- package/dist/components/button.js +1 -1
- package/dist/components/chart.js +1 -1
- package/dist/components/checkbox.js +1 -1
- package/dist/components/clipboard-text.js +1 -1
- package/dist/components/cloudflare-logo.js +1 -1
- package/dist/components/code.js +1 -1
- package/dist/components/combobox.js +1 -1
- package/dist/components/command-palette.js +1 -1
- package/dist/components/dialog.js +1 -1
- package/dist/components/dropdown.js +1 -1
- package/dist/components/empty.js +1 -1
- package/dist/components/field.js +1 -1
- package/dist/components/flow.js +2 -2
- package/dist/components/flow.js.map +1 -1
- package/dist/components/grid.js +1 -1
- package/dist/components/input.js +3 -3
- package/dist/components/label.js +1 -1
- package/dist/components/layer-card.js +1 -1
- package/dist/components/link.js +1 -1
- package/dist/components/loader.js +1 -1
- package/dist/components/menubar.js +1 -1
- package/dist/components/meter.js +1 -1
- package/dist/components/pagination.js +1 -1
- package/dist/components/popover.js +1 -1
- package/dist/components/radio.js +1 -1
- package/dist/components/select.js +1 -1
- package/dist/components/sensitive-input.js +1 -1
- package/dist/components/sidebar.js +1 -1
- package/dist/components/surface.js +1 -1
- package/dist/components/switch.js +1 -1
- package/dist/components/table-of-contents.js +8 -0
- package/dist/components/table-of-contents.js.map +1 -0
- package/dist/components/table.js +1 -1
- package/dist/components/tabs.js +1 -1
- package/dist/components/toast.js +2 -2
- package/dist/components/tooltip.js +1 -1
- package/dist/index.js +128 -124
- package/dist/index.js.map +1 -1
- package/dist/primitives/accordion.js +1 -1
- package/dist/primitives/alert-dialog.js +1 -1
- package/dist/primitives/autocomplete.js +1 -1
- package/dist/primitives/avatar.js +1 -1
- package/dist/primitives/button.js +1 -1
- package/dist/primitives/checkbox-group.js +1 -1
- package/dist/primitives/checkbox.js +1 -1
- package/dist/primitives/collapsible.js +1 -1
- package/dist/primitives/combobox.js +1 -1
- package/dist/primitives/context-menu.js +1 -1
- package/dist/primitives/csp-provider.js +1 -1
- package/dist/primitives/dialog.js +1 -1
- package/dist/primitives/direction-provider.js +1 -1
- package/dist/primitives/drawer.js +1 -1
- package/dist/primitives/field.js +1 -1
- package/dist/primitives/fieldset.js +1 -1
- package/dist/primitives/form.js +1 -1
- package/dist/primitives/input.js +1 -1
- package/dist/primitives/menu.js +1 -1
- package/dist/primitives/menubar.js +1 -1
- package/dist/primitives/meter.js +1 -1
- package/dist/primitives/navigation-menu.js +1 -1
- package/dist/primitives/number-field.js +1 -1
- package/dist/primitives/popover.js +1 -1
- package/dist/primitives/preview-card.js +1 -1
- package/dist/primitives/progress.js +1 -1
- package/dist/primitives/radio-group.js +1 -1
- package/dist/primitives/radio.js +1 -1
- package/dist/primitives/scroll-area.js +1 -1
- package/dist/primitives/select.js +1 -1
- package/dist/primitives/separator.js +1 -1
- package/dist/primitives/slider.js +1 -1
- package/dist/primitives/switch.js +1 -1
- package/dist/primitives/tabs.js +1 -1
- package/dist/primitives/toast.js +1 -1
- package/dist/primitives/toggle-group.js +1 -1
- package/dist/primitives/toggle.js +1 -1
- package/dist/primitives/toolbar.js +1 -1
- package/dist/primitives/tooltip.js +1 -1
- package/dist/primitives.js +1 -1
- package/dist/scripts/theme-generator/config.d.ts.map +1 -1
- package/dist/scripts/theme-generator/config.js +32 -113
- package/dist/scripts/theme-generator/config.js.map +1 -1
- package/dist/src/components/badge/badge.d.ts +61 -79
- package/dist/src/components/badge/badge.d.ts.map +1 -1
- package/dist/src/components/banner/banner.d.ts +3 -3
- package/dist/src/components/button/button.d.ts +3 -3
- package/dist/src/components/button/button.d.ts.map +1 -1
- package/dist/src/components/chart/EChart.d.ts +18 -2
- package/dist/src/components/chart/EChart.d.ts.map +1 -1
- package/dist/src/components/chart/TimeseriesChart.d.ts.map +1 -1
- package/dist/src/components/chart/index.d.ts +1 -1
- package/dist/src/components/chart/index.d.ts.map +1 -1
- package/dist/src/components/checkbox/checkbox.d.ts +1 -1
- package/dist/src/components/code/code.d.ts.map +1 -1
- package/dist/src/components/combobox/combobox.d.ts +16 -2
- package/dist/src/components/combobox/combobox.d.ts.map +1 -1
- package/dist/src/components/dropdown/dropdown.d.ts.map +1 -1
- package/dist/src/components/input/input-area.d.ts.map +1 -1
- package/dist/src/components/input/input.d.ts +1 -2
- package/dist/src/components/input/input.d.ts.map +1 -1
- package/dist/src/components/label/label.d.ts.map +1 -1
- package/dist/src/components/layer-card/layer-card.d.ts +39 -5
- package/dist/src/components/layer-card/layer-card.d.ts.map +1 -1
- package/dist/src/components/loader/loader.d.ts +7 -1
- package/dist/src/components/loader/loader.d.ts.map +1 -1
- package/dist/src/components/menubar/menubar.d.ts.map +1 -1
- package/dist/src/components/pagination/pagination.d.ts +62 -2
- package/dist/src/components/pagination/pagination.d.ts.map +1 -1
- package/dist/src/components/popover/popover.d.ts +35 -8
- package/dist/src/components/popover/popover.d.ts.map +1 -1
- package/dist/src/components/radio/radio.d.ts +2 -2
- package/dist/src/components/select/select.d.ts +115 -7
- package/dist/src/components/select/select.d.ts.map +1 -1
- package/dist/src/components/sensitive-input/sensitive-input.d.ts +1 -1
- package/dist/src/components/sidebar/sidebar.d.ts +2 -2
- package/dist/src/components/sidebar/sidebar.d.ts.map +1 -1
- package/dist/src/components/surface/index.d.ts +3 -0
- package/dist/src/components/surface/index.d.ts.map +1 -1
- package/dist/src/components/surface/surface.d.ts +14 -10
- package/dist/src/components/surface/surface.d.ts.map +1 -1
- package/dist/src/components/switch/switch.d.ts.map +1 -1
- package/dist/src/components/table/table.d.ts.map +1 -1
- package/dist/src/components/table-of-contents/index.d.ts +2 -0
- package/dist/src/components/table-of-contents/index.d.ts.map +1 -0
- package/dist/src/components/table-of-contents/table-of-contents.d.ts +70 -0
- package/dist/src/components/table-of-contents/table-of-contents.d.ts.map +1 -0
- package/dist/src/components/toast/toast.d.ts +1 -1
- package/dist/src/components/tooltip/tooltip.d.ts +25 -6
- package/dist/src/components/tooltip/tooltip.d.ts.map +1 -1
- package/dist/src/index.d.ts +6 -2
- package/dist/src/index.d.ts.map +1 -1
- package/dist/styles/kumo-binding.css +4 -0
- package/dist/styles/kumo-standalone.css +1 -1
- package/dist/styles/theme-fedramp.css +3 -3
- package/dist/styles/theme-kumo.css +66 -127
- package/package.json +5 -1
- package/scripts/component-registry/index.test.ts +4 -4
- package/scripts/component-registry/metadata.ts +3 -3
- package/scripts/theme-generator/config.ts +37 -116
- package/dist/chunks/Legend-o0ntojbaplmszwk0.js.map +0 -1
- package/dist/chunks/badge-n80t3z8u9ttlxi20.js +0 -120
- package/dist/chunks/badge-n80t3z8u9ttlxi20.js.map +0 -1
- package/dist/chunks/button-odxi0hp4fvi5i2w3.js.map +0 -1
- package/dist/chunks/checkbox-dx8x0rzv582yjv7n.js.map +0 -1
- package/dist/chunks/code-liq1g6f5lhee305d.js.map +0 -1
- package/dist/chunks/combobox-9fhjzprab46csmon.js.map +0 -1
- package/dist/chunks/command-palette-kenx2bbdzd4kpx36.js.map +0 -1
- package/dist/chunks/dialog-e05ysa8t2fklw065.js.map +0 -1
- package/dist/chunks/input-area-nq40szg9110on89c.js +0 -74
- package/dist/chunks/input-area-nq40szg9110on89c.js.map +0 -1
- package/dist/chunks/input-group-hbebbyh8fo6aqydn.js.map +0 -1
- package/dist/chunks/input-kvhyo3p4859bexvx.js +0 -109
- package/dist/chunks/input-kvhyo3p4859bexvx.js.map +0 -1
- package/dist/chunks/label-j9owppbgnn35mebg.js +0 -62
- package/dist/chunks/layer-card-l5yjvrxry1dhte57.js +0 -44
- package/dist/chunks/layer-card-l5yjvrxry1dhte57.js.map +0 -1
- package/dist/chunks/loader-m5wfmqwgucrr4i5v.js.map +0 -1
- package/dist/chunks/menubar-abojnm0uwjuni8ok.js +0 -92
- package/dist/chunks/menubar-abojnm0uwjuni8ok.js.map +0 -1
- package/dist/chunks/pagination-pbd7qqik97ac0l7m.js +0 -224
- package/dist/chunks/pagination-pbd7qqik97ac0l7m.js.map +0 -1
- package/dist/chunks/popover-i951xjcgezeqr4iv.js.map +0 -1
- package/dist/chunks/radio-l2vkcue40d84fmo1.js.map +0 -1
- package/dist/chunks/select-paedwa3nlhpq82ua.js +0 -132
- package/dist/chunks/select-paedwa3nlhpq82ua.js.map +0 -1
- package/dist/chunks/sidebar-jepeq7gaf4issuw6.js.map +0 -1
- package/dist/chunks/surface-blo81kgy9g0sexgm.js +0 -36
- package/dist/chunks/surface-blo81kgy9g0sexgm.js.map +0 -1
- package/dist/chunks/switch-i0zwcp3wq6vsxm1c.js.map +0 -1
- package/dist/chunks/table-nrcw19tlpduayukl.js +0 -183
- package/dist/chunks/table-nrcw19tlpduayukl.js.map +0 -1
- package/dist/chunks/tooltip-cit9ltlxfuhwctuj.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"clipboard-text-kyk51d1ze7zvdn4q.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 /** If provided, this text will be copied to clipboard instead of the `text` prop. */\n textToCopy?: 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 isolate\">\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 textToCopy,\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(textToCopy ?? text);\n } else if (typeof document !== \"undefined\") {\n // Fallback for older browsers\n const textarea = document.createElement(\"textarea\");\n textarea.value = textToCopy ?? 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","textToCopy","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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"}
|
|
1
|
+
{"version":3,"file":"clipboard-text-dxczqon3d27xp6f0.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 /** If provided, this text will be copied to clipboard instead of the `text` prop. */\n textToCopy?: 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 isolate\">\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 textToCopy,\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(textToCopy ?? text);\n } else if (typeof document !== \"undefined\") {\n // Fallback for older browsers\n const textarea = document.createElement(\"textarea\");\n textarea.value = textToCopy ?? 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-hairline! 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","textToCopy","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/chunks/{cloudflare-logo-bgts2jgsdh7sslw4.js → cloudflare-logo-pbavoe1wu8nr5c4n.js}
RENAMED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsxs as h, jsx as t } from "react/jsx-runtime";
|
|
3
3
|
import { forwardRef as L } from "react";
|
|
4
|
-
import { c as
|
|
4
|
+
import { c as i } from "./cn-ct4n7r74mh8y0f48.js";
|
|
5
5
|
const m = "#F48120", v = "#FAAD3F", w = "#404041", p = "M33.204 20.4C33.3649 19.9741 33.4217 19.5159 33.3695 19.0636C33.3173 18.6113 33.1577 18.1781 32.904 17.8C32.6435 17.4876 32.3239 17.2297 31.9636 17.0409C31.6032 16.8522 31.2092 16.7363 30.804 16.7L13.404 16.5C13.304 16.5 13.204 16.4 13.104 16.4C13.0808 16.3825 13.0618 16.3599 13.0488 16.3339C13.0358 16.3078 13.029 16.2791 13.029 16.25C13.029 16.2209 13.0358 16.1922 13.0488 16.1662C13.0618 16.1401 13.0808 16.1175 13.104 16.1C13.204 15.9 13.304 15.8 13.504 15.8L31.004 15.6C32.115 15.4767 33.1731 15.0597 34.0695 14.3918C34.9659 13.7239 35.6681 12.8293 36.104 11.8L37.104 9.20002C37.104 9.10002 37.204 9.00001 37.104 8.90001C36.5604 6.47843 35.2411 4.30052 33.3466 2.69721C31.4521 1.09391 29.086 0.152865 26.6079 0.0170769C24.1298 -0.118712 21.675 0.558179 19.6167 1.94489C17.5584 3.33161 16.009 5.35233 15.204 7.70002C14.159 6.95365 12.8843 6.59957 11.604 6.70002C10.4291 6.83102 9.33369 7.35777 8.49774 8.19372C7.66179 9.02966 7.13505 10.1251 7.00404 11.3C6.93745 11.9014 6.97125 12.5097 7.10404 13.1C5.20298 13.1526 3.39743 13.9448 2.07147 15.3081C0.745511 16.6714 0.00377461 18.4982 0.00403983 20.4C-0.0123708 20.7695 0.0212659 21.1395 0.104038 21.5C0.10863 21.5781 0.141713 21.6517 0.19701 21.707C0.252307 21.7623 0.325975 21.7954 0.404041 21.8H32.504C32.704 21.8 32.904 21.7 32.904 21.5L33.204 20.4Z", u = "M38.704 9.20002H38.204C38.104 9.20002 38.004 9.30001 37.904 9.40001L37.204 11.8C37.0431 12.2259 36.9864 12.6841 37.0386 13.1364C37.0908 13.5887 37.2504 14.0219 37.504 14.4C37.7646 14.7124 38.0842 14.9704 38.4445 15.1591C38.8049 15.3479 39.1989 15.4637 39.604 15.5L43.304 15.7C43.404 15.7 43.504 15.8 43.604 15.8C43.6273 15.8175 43.6462 15.8401 43.6592 15.8662C43.6723 15.8922 43.679 15.9209 43.679 15.95C43.679 15.9791 43.6723 16.0078 43.6592 16.0339C43.6462 16.0599 43.6273 16.0826 43.604 16.1C43.504 16.3 43.404 16.4 43.204 16.4L39.404 16.6C38.293 16.7233 37.2349 17.1403 36.3386 17.8082C35.4422 18.4761 34.74 19.3707 34.304 20.4L34.104 21.3C34.004 21.4 34.104 21.6 34.304 21.6H47.504C47.5448 21.6058 47.5863 21.6021 47.6254 21.5891C47.6644 21.5761 47.6999 21.5541 47.729 21.525C47.7581 21.4959 47.7801 21.4604 47.7931 21.4214C47.8061 21.3823 47.8099 21.3408 47.804 21.3C48.0421 20.4527 48.1764 19.5797 48.204 18.7C48.1882 16.1854 47.1822 13.7782 45.404 12C43.6259 10.2218 41.2187 9.21587 38.704 9.20002Z", A = "M100.5,27.2a.9.9,0,1,1,.9-.9.89626.89626,0,0,1-.9.9m0-1.6a.7.7,0,1,0,.7.7.68354.68354,0,0,0-.7-.7m.4,1.2h-.2l-.2-.3h-.2v.3h-.2v-.9h.5a.26517.26517,0,0,1,.3.3c0,.1-.1.2-.2.3l.2.3Zm-.3-.5c.1,0,.1,0,.1-.1a.09794.09794,0,0,0-.1-.1h-.3v.3h.3Zm-89.7-.9h2.2v6h3.8v1.9h-6Zm8.3,3.9a4.10491,4.10491,0,0,1,4.3-4.1,4.02,4.02,0,0,1,4.2,4.1,4.10491,4.10491,0,0,1-4.3,4.1,4.07888,4.07888,0,0,1-4.2-4.1m6.3,0a2.05565,2.05565,0,0,0-2-2.2,2.1025,2.1025,0,0,0,0,4.2c1.2.2,2-.8,2-2m4.9.5V25.4h2.2v4.4c0,1.1.6,1.7,1.5,1.7a1.39926,1.39926,0,0,0,1.5-1.6V25.4h2.2v4.4c0,2.6-1.5,3.7-3.7,3.7-2.3-.1-3.7-1.2-3.7-3.7m10.7-4.4h3.1c2.8,0,4.5,1.6,4.5,3.9s-1.7,4-4.5,4h-3V25.4Zm3.1,5.9a2.00909,2.00909,0,1,0,0-4h-.9v4Zm7.6-5.9h6.3v1.9H54v1.3h3.7v1.8H54v2.9H51.8Zm9.4,0h2.2v6h3.8v1.9h-6Zm11.7-.1h2.2l3.4,8H76.1l-.6-1.4H72.4l-.6,1.4H69.5Zm2,4.9L74,28l-.9,2.2Zm6.4-4.8H85a3.41818,3.41818,0,0,1,2.6.9,2.62373,2.62373,0,0,1-.9,4.2l1.9,2.8H86.1l-1.6-2.4h-1v2.4H81.3Zm3.6,3.8c.7,0,1.2-.4,1.2-.9,0-.6-.5-.9-1.2-.9H83.5v1.9h1.4Zm6.5-3.8h6.4v1.8H93.6v1.2h3.8v1.8H93.6v1.2h4.3v1.9H91.4ZM6.1,30.3a1.97548,1.97548,0,0,1-1.8,1.2,2.1025,2.1025,0,0,1,0-4.2,2.0977,2.0977,0,0,1,1.9,1.3H8.5a4.13459,4.13459,0,0,0-4.2-3.3A4.1651,4.1651,0,0,0,0,29.4a4.07888,4.07888,0,0,0,4.2,4.1,4.31812,4.31812,0,0,0,4.2-3.2Z", O = "M84.2,20.4a2.85546,2.85546,0,0,0-.3-2.6,3.09428,3.09428,0,0,0-2.1-1.1l-17.4-.2c-.1,0-.2-.1-.3-.1a.1875.1875,0,0,1,0-.3c.1-.2.2-.3.4-.3L82,15.6a6.29223,6.29223,0,0,0,5.1-3.8l1-2.6c0-.1.1-.2,0-.3A11.39646,11.39646,0,0,0,66.2,7.7a5.45941,5.45941,0,0,0-3.6-1A5.20936,5.20936,0,0,0,58,11.3a5.46262,5.46262,0,0,0,.1,1.8A7.30177,7.30177,0,0,0,51,20.4a4.102,4.102,0,0,0,.1,1.1.3193.3193,0,0,0,.3.3H83.5c.2,0,.4-.1.4-.3Z", _ = "M89.7,9.2h-.5c-.1,0-.2.1-.3.2l-.7,2.4a2.85546,2.85546,0,0,0,.3,2.6,3.09428,3.09428,0,0,0,2.1,1.1l3.7.2c.1,0,.2.1.3.1a.1875.1875,0,0,1,0,.3c-.1.2-.2.3-.4.3l-3.8.2a6.29223,6.29223,0,0,0-5.1,3.8l-.2.9c-.1.1,0,.3.2.3H98.5a.26517.26517,0,0,0,.3-.3,10.87184,10.87184,0,0,0,.4-2.6,9.56045,9.56045,0,0,0-9.5-9.5", d = "0 0 49 22", g = "0 0 101.4 33.5", k = {
|
|
6
6
|
variant: {
|
|
7
7
|
glyph: {
|
|
@@ -32,7 +32,7 @@ const m = "#F48120", v = "#FAAD3F", w = "#404041", p = "M33.204 20.4C33.3649 19.
|
|
|
32
32
|
className: a,
|
|
33
33
|
...e
|
|
34
34
|
}, C) => {
|
|
35
|
-
const r = o === "glyph", c = l === "color" ? m : "currentColor",
|
|
35
|
+
const r = o === "glyph", c = l === "color" ? m : "currentColor", n = l === "color" ? v : "currentColor", H = "currentColor";
|
|
36
36
|
return r ? /* @__PURE__ */ h(
|
|
37
37
|
"svg",
|
|
38
38
|
{
|
|
@@ -42,7 +42,7 @@ const m = "#F48120", v = "#FAAD3F", w = "#404041", p = "M33.204 20.4C33.3649 19.
|
|
|
42
42
|
xmlns: "http://www.w3.org/2000/svg",
|
|
43
43
|
role: "img",
|
|
44
44
|
"aria-label": "Cloudflare logo",
|
|
45
|
-
className:
|
|
45
|
+
className: i(
|
|
46
46
|
l === "white" && "text-white",
|
|
47
47
|
l === "black" && "text-black",
|
|
48
48
|
a
|
|
@@ -60,7 +60,7 @@ const m = "#F48120", v = "#FAAD3F", w = "#404041", p = "M33.204 20.4C33.3649 19.
|
|
|
60
60
|
"path",
|
|
61
61
|
{
|
|
62
62
|
d: "M38.704 9.20002H38.204C38.104 9.20002 38.004 9.30001 37.904 9.40001L37.204 11.8C37.0431 12.2259 36.9864 12.6841 37.0386 13.1364C37.0908 13.5887 37.2504 14.0219 37.504 14.4C37.7646 14.7124 38.0842 14.9704 38.4445 15.1591C38.8049 15.3479 39.1989 15.4637 39.604 15.5L43.304 15.7C43.404 15.7 43.504 15.8 43.604 15.8C43.6273 15.8175 43.6462 15.8401 43.6592 15.8662C43.6723 15.8922 43.679 15.9209 43.679 15.95C43.679 15.9791 43.6723 16.0078 43.6592 16.0339C43.6462 16.0599 43.6273 16.0826 43.604 16.1C43.504 16.3 43.404 16.4 43.204 16.4L39.404 16.6C38.293 16.7233 37.2349 17.1403 36.3386 17.8082C35.4422 18.4761 34.74 19.3707 34.304 20.4L34.104 21.3C34.004 21.4 34.104 21.6 34.304 21.6H47.504C47.5448 21.6058 47.5863 21.6021 47.6254 21.5891C47.6644 21.5761 47.6999 21.5541 47.729 21.525C47.7581 21.4959 47.7801 21.4604 47.7931 21.4214C47.8061 21.3823 47.8099 21.3408 47.804 21.3C48.0421 20.4527 48.1764 19.5797 48.204 18.7C48.1882 16.1854 47.1822 13.7782 45.404 12C43.6259 10.2218 41.2187 9.21587 38.704 9.20002Z",
|
|
63
|
-
fill:
|
|
63
|
+
fill: n
|
|
64
64
|
}
|
|
65
65
|
)
|
|
66
66
|
]
|
|
@@ -74,7 +74,7 @@ const m = "#F48120", v = "#FAAD3F", w = "#404041", p = "M33.204 20.4C33.3649 19.
|
|
|
74
74
|
xmlns: "http://www.w3.org/2000/svg",
|
|
75
75
|
role: "img",
|
|
76
76
|
"aria-label": "Cloudflare logo",
|
|
77
|
-
className:
|
|
77
|
+
className: i(
|
|
78
78
|
// Wordmark text color - respects dark mode
|
|
79
79
|
l === "color" && "text-kumo-default",
|
|
80
80
|
l === "white" && "text-white",
|
|
@@ -94,7 +94,7 @@ const m = "#F48120", v = "#FAAD3F", w = "#404041", p = "M33.204 20.4C33.3649 19.
|
|
|
94
94
|
"path",
|
|
95
95
|
{
|
|
96
96
|
d: "M89.7,9.2h-.5c-.1,0-.2.1-.3.2l-.7,2.4a2.85546,2.85546,0,0,0,.3,2.6,3.09428,3.09428,0,0,0,2.1,1.1l3.7.2c.1,0,.2.1.3.1a.1875.1875,0,0,1,0,.3c-.1.2-.2.3-.4.3l-3.8.2a6.29223,6.29223,0,0,0-5.1,3.8l-.2.9c-.1.1,0,.3.2.3H98.5a.26517.26517,0,0,0,.3-.3,10.87184,10.87184,0,0,0,.4-2.6,9.56045,9.56045,0,0,0-9.5-9.5",
|
|
97
|
-
fill:
|
|
97
|
+
fill: n
|
|
98
98
|
}
|
|
99
99
|
),
|
|
100
100
|
/* @__PURE__ */ t(
|
|
@@ -123,12 +123,12 @@ const Z = L(
|
|
|
123
123
|
href: l,
|
|
124
124
|
target: "_blank",
|
|
125
125
|
rel: "noopener noreferrer",
|
|
126
|
-
className:
|
|
126
|
+
className: i(
|
|
127
127
|
// Base badge styles
|
|
128
128
|
"inline-flex items-center gap-2 rounded-lg py-2 pl-2.5 pr-3 text-sm font-medium",
|
|
129
129
|
"ring-1 ring-inset transition-all hover:shadow-sm",
|
|
130
130
|
// Color variants using semantic tokens
|
|
131
|
-
o === "color" && "bg-kumo-base text-kumo-default ring-kumo-
|
|
131
|
+
o === "color" && "bg-kumo-base text-kumo-default ring-kumo-hairline",
|
|
132
132
|
o === "black" && "bg-white text-black ring-black/20",
|
|
133
133
|
o === "white" && "bg-black text-white ring-white/20",
|
|
134
134
|
a
|
|
@@ -163,4 +163,4 @@ export {
|
|
|
163
163
|
s as a,
|
|
164
164
|
R as g
|
|
165
165
|
};
|
|
166
|
-
//# sourceMappingURL=cloudflare-logo-
|
|
166
|
+
//# sourceMappingURL=cloudflare-logo-pbavoe1wu8nr5c4n.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cloudflare-logo-bgts2jgsdh7sslw4.js","sources":["../../src/components/cloudflare-logo/cloudflare-logo.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n// =============================================================================\n// Brand Colors (internal)\n// =============================================================================\n\nconst CLOUDFLARE_ORANGE = \"#F48120\";\nconst CLOUDFLARE_YELLOW = \"#FAAD3F\";\nconst CLOUDFLARE_TEXT_GRAY = \"#404041\";\n\n// =============================================================================\n// SVG Path Data (internal)\n// =============================================================================\n\nconst CLOUDFLARE_GLYPH_ORANGE_PATH =\n \"M33.204 20.4C33.3649 19.9741 33.4217 19.5159 33.3695 19.0636C33.3173 18.6113 33.1577 18.1781 32.904 17.8C32.6435 17.4876 32.3239 17.2297 31.9636 17.0409C31.6032 16.8522 31.2092 16.7363 30.804 16.7L13.404 16.5C13.304 16.5 13.204 16.4 13.104 16.4C13.0808 16.3825 13.0618 16.3599 13.0488 16.3339C13.0358 16.3078 13.029 16.2791 13.029 16.25C13.029 16.2209 13.0358 16.1922 13.0488 16.1662C13.0618 16.1401 13.0808 16.1175 13.104 16.1C13.204 15.9 13.304 15.8 13.504 15.8L31.004 15.6C32.115 15.4767 33.1731 15.0597 34.0695 14.3918C34.9659 13.7239 35.6681 12.8293 36.104 11.8L37.104 9.20002C37.104 9.10002 37.204 9.00001 37.104 8.90001C36.5604 6.47843 35.2411 4.30052 33.3466 2.69721C31.4521 1.09391 29.086 0.152865 26.6079 0.0170769C24.1298 -0.118712 21.675 0.558179 19.6167 1.94489C17.5584 3.33161 16.009 5.35233 15.204 7.70002C14.159 6.95365 12.8843 6.59957 11.604 6.70002C10.4291 6.83102 9.33369 7.35777 8.49774 8.19372C7.66179 9.02966 7.13505 10.1251 7.00404 11.3C6.93745 11.9014 6.97125 12.5097 7.10404 13.1C5.20298 13.1526 3.39743 13.9448 2.07147 15.3081C0.745511 16.6714 0.00377461 18.4982 0.00403983 20.4C-0.0123708 20.7695 0.0212659 21.1395 0.104038 21.5C0.10863 21.5781 0.141713 21.6517 0.19701 21.707C0.252307 21.7623 0.325975 21.7954 0.404041 21.8H32.504C32.704 21.8 32.904 21.7 32.904 21.5L33.204 20.4Z\";\n\nconst CLOUDFLARE_GLYPH_YELLOW_PATH =\n \"M38.704 9.20002H38.204C38.104 9.20002 38.004 9.30001 37.904 9.40001L37.204 11.8C37.0431 12.2259 36.9864 12.6841 37.0386 13.1364C37.0908 13.5887 37.2504 14.0219 37.504 14.4C37.7646 14.7124 38.0842 14.9704 38.4445 15.1591C38.8049 15.3479 39.1989 15.4637 39.604 15.5L43.304 15.7C43.404 15.7 43.504 15.8 43.604 15.8C43.6273 15.8175 43.6462 15.8401 43.6592 15.8662C43.6723 15.8922 43.679 15.9209 43.679 15.95C43.679 15.9791 43.6723 16.0078 43.6592 16.0339C43.6462 16.0599 43.6273 16.0826 43.604 16.1C43.504 16.3 43.404 16.4 43.204 16.4L39.404 16.6C38.293 16.7233 37.2349 17.1403 36.3386 17.8082C35.4422 18.4761 34.74 19.3707 34.304 20.4L34.104 21.3C34.004 21.4 34.104 21.6 34.304 21.6H47.504C47.5448 21.6058 47.5863 21.6021 47.6254 21.5891C47.6644 21.5761 47.6999 21.5541 47.729 21.525C47.7581 21.4959 47.7801 21.4604 47.7931 21.4214C47.8061 21.3823 47.8099 21.3408 47.804 21.3C48.0421 20.4527 48.1764 19.5797 48.204 18.7C48.1882 16.1854 47.1822 13.7782 45.404 12C43.6259 10.2218 41.2187 9.21587 38.704 9.20002Z\";\n\nconst CLOUDFLARE_WORDMARK_PATH =\n \"M100.5,27.2a.9.9,0,1,1,.9-.9.89626.89626,0,0,1-.9.9m0-1.6a.7.7,0,1,0,.7.7.68354.68354,0,0,0-.7-.7m.4,1.2h-.2l-.2-.3h-.2v.3h-.2v-.9h.5a.26517.26517,0,0,1,.3.3c0,.1-.1.2-.2.3l.2.3Zm-.3-.5c.1,0,.1,0,.1-.1a.09794.09794,0,0,0-.1-.1h-.3v.3h.3Zm-89.7-.9h2.2v6h3.8v1.9h-6Zm8.3,3.9a4.10491,4.10491,0,0,1,4.3-4.1,4.02,4.02,0,0,1,4.2,4.1,4.10491,4.10491,0,0,1-4.3,4.1,4.07888,4.07888,0,0,1-4.2-4.1m6.3,0a2.05565,2.05565,0,0,0-2-2.2,2.1025,2.1025,0,0,0,0,4.2c1.2.2,2-.8,2-2m4.9.5V25.4h2.2v4.4c0,1.1.6,1.7,1.5,1.7a1.39926,1.39926,0,0,0,1.5-1.6V25.4h2.2v4.4c0,2.6-1.5,3.7-3.7,3.7-2.3-.1-3.7-1.2-3.7-3.7m10.7-4.4h3.1c2.8,0,4.5,1.6,4.5,3.9s-1.7,4-4.5,4h-3V25.4Zm3.1,5.9a2.00909,2.00909,0,1,0,0-4h-.9v4Zm7.6-5.9h6.3v1.9H54v1.3h3.7v1.8H54v2.9H51.8Zm9.4,0h2.2v6h3.8v1.9h-6Zm11.7-.1h2.2l3.4,8H76.1l-.6-1.4H72.4l-.6,1.4H69.5Zm2,4.9L74,28l-.9,2.2Zm6.4-4.8H85a3.41818,3.41818,0,0,1,2.6.9,2.62373,2.62373,0,0,1-.9,4.2l1.9,2.8H86.1l-1.6-2.4h-1v2.4H81.3Zm3.6,3.8c.7,0,1.2-.4,1.2-.9,0-.6-.5-.9-1.2-.9H83.5v1.9h1.4Zm6.5-3.8h6.4v1.8H93.6v1.2h3.8v1.8H93.6v1.2h4.3v1.9H91.4ZM6.1,30.3a1.97548,1.97548,0,0,1-1.8,1.2,2.1025,2.1025,0,0,1,0-4.2,2.0977,2.0977,0,0,1,1.9,1.3H8.5a4.13459,4.13459,0,0,0-4.2-3.3A4.1651,4.1651,0,0,0,0,29.4a4.07888,4.07888,0,0,0,4.2,4.1,4.31812,4.31812,0,0,0,4.2-3.2Z\";\n\nconst CLOUDFLARE_FULL_LOGO_ORANGE_PATH =\n \"M84.2,20.4a2.85546,2.85546,0,0,0-.3-2.6,3.09428,3.09428,0,0,0-2.1-1.1l-17.4-.2c-.1,0-.2-.1-.3-.1a.1875.1875,0,0,1,0-.3c.1-.2.2-.3.4-.3L82,15.6a6.29223,6.29223,0,0,0,5.1-3.8l1-2.6c0-.1.1-.2,0-.3A11.39646,11.39646,0,0,0,66.2,7.7a5.45941,5.45941,0,0,0-3.6-1A5.20936,5.20936,0,0,0,58,11.3a5.46262,5.46262,0,0,0,.1,1.8A7.30177,7.30177,0,0,0,51,20.4a4.102,4.102,0,0,0,.1,1.1.3193.3193,0,0,0,.3.3H83.5c.2,0,.4-.1.4-.3Z\";\n\nconst CLOUDFLARE_FULL_LOGO_YELLOW_PATH =\n \"M89.7,9.2h-.5c-.1,0-.2.1-.3.2l-.7,2.4a2.85546,2.85546,0,0,0,.3,2.6,3.09428,3.09428,0,0,0,2.1,1.1l3.7.2c.1,0,.2.1.3.1a.1875.1875,0,0,1,0,.3c-.1.2-.2.3-.4.3l-3.8.2a6.29223,6.29223,0,0,0-5.1,3.8l-.2.9c-.1.1,0,.3.2.3H98.5a.26517.26517,0,0,0,.3-.3,10.87184,10.87184,0,0,0,.4-2.6,9.56045,9.56045,0,0,0-9.5-9.5\";\n\nconst CLOUDFLARE_GLYPH_VIEWBOX = \"0 0 49 22\";\nconst CLOUDFLARE_FULL_LOGO_VIEWBOX = \"0 0 101.4 33.5\";\n\n// =============================================================================\n// Component Variants\n// =============================================================================\n\nexport const KUMO_CLOUDFLARE_LOGO_VARIANTS = {\n variant: {\n glyph: {\n description: \"Cloud glyph only (logomark)\",\n },\n full: {\n description: \"Full logo with cloud glyph and wordmark stacked\",\n },\n },\n color: {\n color: {\n description:\n \"Brand colors (orange/yellow gradient cloud, dark gray text)\",\n },\n black: {\n description: \"Solid black logo\",\n },\n white: {\n description: \"Solid white logo (for dark backgrounds)\",\n },\n },\n} as const;\n\nexport const KUMO_CLOUDFLARE_LOGO_DEFAULT_VARIANTS = {\n variant: \"full\",\n color: \"color\",\n} as const;\n\nexport type CloudflareLogoVariant =\n keyof typeof KUMO_CLOUDFLARE_LOGO_VARIANTS.variant;\nexport type CloudflareLogoColor =\n keyof typeof KUMO_CLOUDFLARE_LOGO_VARIANTS.color;\n\nexport interface CloudflareLogoProps\n extends React.SVGAttributes<SVGSVGElement> {\n /**\n * Logo variant\n * - `glyph`: Cloud icon only\n * - `full`: Cloud icon with \"CLOUDFLARE\" wordmark below\n * @default \"full\"\n */\n variant?: CloudflareLogoVariant;\n /**\n * Color scheme\n * - `color`: Brand colors (orange/yellow cloud, dark gray wordmark)\n * - `black`: Solid black\n * - `white`: Solid white (for dark backgrounds)\n * @default \"color\"\n */\n color?: CloudflareLogoColor;\n}\n\n/**\n * Cloudflare logo component.\n *\n * @example Glyph only (cloud icon)\n * ```tsx\n * <CloudflareLogo variant=\"glyph\" className=\"w-12\" />\n * ```\n *\n * @example Full logo with wordmark\n * ```tsx\n * <CloudflareLogo variant=\"full\" className=\"w-40\" />\n * ```\n *\n * @example White logo for dark backgrounds\n * ```tsx\n * <CloudflareLogo color=\"white\" className=\"w-32\" />\n * ```\n *\n * @example Black logo\n * ```tsx\n * <CloudflareLogo color=\"black\" className=\"w-32\" />\n * ```\n */\nexport const CloudflareLogo = forwardRef<SVGSVGElement, CloudflareLogoProps>(\n (\n {\n variant = KUMO_CLOUDFLARE_LOGO_DEFAULT_VARIANTS.variant,\n color = KUMO_CLOUDFLARE_LOGO_DEFAULT_VARIANTS.color,\n className,\n ...props\n },\n ref,\n ) => {\n const isGlyph = variant === \"glyph\";\n\n // Determine fill colors\n // Cloud glyph always uses brand colors when color=\"color\", otherwise currentColor\n const fillOrange = color === \"color\" ? CLOUDFLARE_ORANGE : \"currentColor\";\n const fillYellow = color === \"color\" ? CLOUDFLARE_YELLOW : \"currentColor\";\n // Wordmark uses currentColor to respect dark mode (via text-kumo-default class)\n const fillText = \"currentColor\";\n\n if (isGlyph) {\n return (\n <svg\n ref={ref}\n viewBox={CLOUDFLARE_GLYPH_VIEWBOX}\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n role=\"img\"\n aria-label=\"Cloudflare logo\"\n className={cn(\n color === \"white\" && \"text-white\",\n color === \"black\" && \"text-black\",\n className,\n )}\n {...props}\n >\n <path\n d=\"M33.204 20.4C33.3649 19.9741 33.4217 19.5159 33.3695 19.0636C33.3173 18.6113 33.1577 18.1781 32.904 17.8C32.6435 17.4876 32.3239 17.2297 31.9636 17.0409C31.6032 16.8522 31.2092 16.7363 30.804 16.7L13.404 16.5C13.304 16.5 13.204 16.4 13.104 16.4C13.0808 16.3825 13.0618 16.3599 13.0488 16.3339C13.0358 16.3078 13.029 16.2791 13.029 16.25C13.029 16.2209 13.0358 16.1922 13.0488 16.1662C13.0618 16.1401 13.0808 16.1175 13.104 16.1C13.204 15.9 13.304 15.8 13.504 15.8L31.004 15.6C32.115 15.4767 33.1731 15.0597 34.0695 14.3918C34.9659 13.7239 35.6681 12.8293 36.104 11.8L37.104 9.20002C37.104 9.10002 37.204 9.00001 37.104 8.90001C36.5604 6.47843 35.2411 4.30052 33.3466 2.69721C31.4521 1.09391 29.086 0.152865 26.6079 0.0170769C24.1298 -0.118712 21.675 0.558179 19.6167 1.94489C17.5584 3.33161 16.009 5.35233 15.204 7.70002C14.159 6.95365 12.8843 6.59957 11.604 6.70002C10.4291 6.83102 9.33369 7.35777 8.49774 8.19372C7.66179 9.02966 7.13505 10.1251 7.00404 11.3C6.93745 11.9014 6.97125 12.5097 7.10404 13.1C5.20298 13.1526 3.39743 13.9448 2.07147 15.3081C0.745511 16.6714 0.00377461 18.4982 0.00403983 20.4C-0.0123708 20.7695 0.0212659 21.1395 0.104038 21.5C0.10863 21.5781 0.141713 21.6517 0.19701 21.707C0.252307 21.7623 0.325975 21.7954 0.404041 21.8H32.504C32.704 21.8 32.904 21.7 32.904 21.5L33.204 20.4Z\"\n fill={fillOrange}\n />\n <path\n d=\"M38.704 9.20002H38.204C38.104 9.20002 38.004 9.30001 37.904 9.40001L37.204 11.8C37.0431 12.2259 36.9864 12.6841 37.0386 13.1364C37.0908 13.5887 37.2504 14.0219 37.504 14.4C37.7646 14.7124 38.0842 14.9704 38.4445 15.1591C38.8049 15.3479 39.1989 15.4637 39.604 15.5L43.304 15.7C43.404 15.7 43.504 15.8 43.604 15.8C43.6273 15.8175 43.6462 15.8401 43.6592 15.8662C43.6723 15.8922 43.679 15.9209 43.679 15.95C43.679 15.9791 43.6723 16.0078 43.6592 16.0339C43.6462 16.0599 43.6273 16.0826 43.604 16.1C43.504 16.3 43.404 16.4 43.204 16.4L39.404 16.6C38.293 16.7233 37.2349 17.1403 36.3386 17.8082C35.4422 18.4761 34.74 19.3707 34.304 20.4L34.104 21.3C34.004 21.4 34.104 21.6 34.304 21.6H47.504C47.5448 21.6058 47.5863 21.6021 47.6254 21.5891C47.6644 21.5761 47.6999 21.5541 47.729 21.525C47.7581 21.4959 47.7801 21.4604 47.7931 21.4214C47.8061 21.3823 47.8099 21.3408 47.804 21.3C48.0421 20.4527 48.1764 19.5797 48.204 18.7C48.1882 16.1854 47.1822 13.7782 45.404 12C43.6259 10.2218 41.2187 9.21587 38.704 9.20002Z\"\n fill={fillYellow}\n />\n </svg>\n );\n }\n\n // Full logo with wordmark\n return (\n <svg\n ref={ref}\n viewBox={CLOUDFLARE_FULL_LOGO_VIEWBOX}\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n role=\"img\"\n aria-label=\"Cloudflare logo\"\n className={cn(\n // Wordmark text color - respects dark mode\n color === \"color\" && \"text-kumo-default\",\n color === \"white\" && \"text-white\",\n color === \"black\" && \"text-black\",\n className,\n )}\n {...props}\n >\n {/* Cloud glyph */}\n <path\n d=\"M84.2,20.4a2.85546,2.85546,0,0,0-.3-2.6,3.09428,3.09428,0,0,0-2.1-1.1l-17.4-.2c-.1,0-.2-.1-.3-.1a.1875.1875,0,0,1,0-.3c.1-.2.2-.3.4-.3L82,15.6a6.29223,6.29223,0,0,0,5.1-3.8l1-2.6c0-.1.1-.2,0-.3A11.39646,11.39646,0,0,0,66.2,7.7a5.45941,5.45941,0,0,0-3.6-1A5.20936,5.20936,0,0,0,58,11.3a5.46262,5.46262,0,0,0,.1,1.8A7.30177,7.30177,0,0,0,51,20.4a4.102,4.102,0,0,0,.1,1.1.3193.3193,0,0,0,.3.3H83.5c.2,0,.4-.1.4-.3Z\"\n fill={fillOrange}\n />\n <path\n d=\"M89.7,9.2h-.5c-.1,0-.2.1-.3.2l-.7,2.4a2.85546,2.85546,0,0,0,.3,2.6,3.09428,3.09428,0,0,0,2.1,1.1l3.7.2c.1,0,.2.1.3.1a.1875.1875,0,0,1,0,.3c-.1.2-.2.3-.4.3l-3.8.2a6.29223,6.29223,0,0,0-5.1,3.8l-.2.9c-.1.1,0,.3.2.3H98.5a.26517.26517,0,0,0,.3-.3,10.87184,10.87184,0,0,0,.4-2.6,9.56045,9.56045,0,0,0-9.5-9.5\"\n fill={fillYellow}\n />\n {/* Wordmark */}\n <path\n d=\"M100.5,27.2a.9.9,0,1,1,.9-.9.89626.89626,0,0,1-.9.9m0-1.6a.7.7,0,1,0,.7.7.68354.68354,0,0,0-.7-.7m.4,1.2h-.2l-.2-.3h-.2v.3h-.2v-.9h.5a.26517.26517,0,0,1,.3.3c0,.1-.1.2-.2.3l.2.3Zm-.3-.5c.1,0,.1,0,.1-.1a.09794.09794,0,0,0-.1-.1h-.3v.3h.3Zm-89.7-.9h2.2v6h3.8v1.9h-6Zm8.3,3.9a4.10491,4.10491,0,0,1,4.3-4.1,4.02,4.02,0,0,1,4.2,4.1,4.10491,4.10491,0,0,1-4.3,4.1,4.07888,4.07888,0,0,1-4.2-4.1m6.3,0a2.05565,2.05565,0,0,0-2-2.2,2.1025,2.1025,0,0,0,0,4.2c1.2.2,2-.8,2-2m4.9.5V25.4h2.2v4.4c0,1.1.6,1.7,1.5,1.7a1.39926,1.39926,0,0,0,1.5-1.6V25.4h2.2v4.4c0,2.6-1.5,3.7-3.7,3.7-2.3-.1-3.7-1.2-3.7-3.7m10.7-4.4h3.1c2.8,0,4.5,1.6,4.5,3.9s-1.7,4-4.5,4h-3V25.4Zm3.1,5.9a2.00909,2.00909,0,1,0,0-4h-.9v4Zm7.6-5.9h6.3v1.9H54v1.3h3.7v1.8H54v2.9H51.8Zm9.4,0h2.2v6h3.8v1.9h-6Zm11.7-.1h2.2l3.4,8H76.1l-.6-1.4H72.4l-.6,1.4H69.5Zm2,4.9L74,28l-.9,2.2Zm6.4-4.8H85a3.41818,3.41818,0,0,1,2.6.9,2.62373,2.62373,0,0,1-.9,4.2l1.9,2.8H86.1l-1.6-2.4h-1v2.4H81.3Zm3.6,3.8c.7,0,1.2-.4,1.2-.9,0-.6-.5-.9-1.2-.9H83.5v1.9h1.4Zm6.5-3.8h6.4v1.8H93.6v1.2h3.8v1.8H93.6v1.2h4.3v1.9H91.4ZM6.1,30.3a1.97548,1.97548,0,0,1-1.8,1.2,2.1025,2.1025,0,0,1,0-4.2,2.0977,2.0977,0,0,1,1.9,1.3H8.5a4.13459,4.13459,0,0,0-4.2-3.3A4.1651,4.1651,0,0,0,0,29.4a4.07888,4.07888,0,0,0,4.2,4.1,4.31812,4.31812,0,0,0,4.2-3.2Z\"\n fill={fillText}\n />\n </svg>\n );\n },\n);\n\nCloudflareLogo.displayName = \"CloudflareLogo\";\n\n// =============================================================================\n// PoweredByCloudflare Component\n// =============================================================================\n\nexport interface PoweredByCloudflareProps\n extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n /**\n * Color scheme for the logo and text\n * @default \"color\"\n */\n color?: CloudflareLogoColor;\n}\n\n/**\n * \"Powered by Cloudflare\" badge component.\n *\n * Renders a link to cloudflare.com with the Cloudflare glyph and \"Powered by Cloudflare\" text.\n *\n * @example Basic usage\n * ```tsx\n * <PoweredByCloudflare />\n * ```\n *\n * @example White variant for dark backgrounds\n * ```tsx\n * <PoweredByCloudflare color=\"white\" />\n * ```\n *\n * @example Custom link\n * ```tsx\n * <PoweredByCloudflare href=\"https://cloudflare.com/products/workers\" />\n * ```\n */\nexport const PoweredByCloudflare = forwardRef<\n HTMLAnchorElement,\n PoweredByCloudflareProps\n>(\n (\n {\n color = \"color\",\n href = \"https://www.cloudflare.com\",\n className,\n ...props\n },\n ref,\n ) => {\n return (\n <a\n ref={ref}\n href={href}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className={cn(\n // Base badge styles\n \"inline-flex items-center gap-2 rounded-lg py-2 pl-2.5 pr-3 text-sm font-medium\",\n \"ring-1 ring-inset transition-all hover:shadow-sm\",\n // Color variants using semantic tokens\n color === \"color\" && \"bg-kumo-base text-kumo-default ring-kumo-line\",\n color === \"black\" && \"bg-white text-black ring-black/20\",\n color === \"white\" && \"bg-black text-white ring-white/20\",\n className,\n )}\n {...props}\n >\n <CloudflareLogo variant=\"glyph\" color={color} className=\"h-4 w-auto\" />\n <span>\n Powered by <span className=\"font-semibold\">Cloudflare</span>\n </span>\n </a>\n );\n },\n);\n\nPoweredByCloudflare.displayName = \"PoweredByCloudflare\";\n\n// =============================================================================\n// SVG Generation Helper\n// =============================================================================\n\nexport type CloudflareLogoSvgVariant = \"glyph\" | \"full\";\nexport type CloudflareLogoSvgColor = \"color\" | \"black\" | \"white\";\n\nexport interface GenerateCloudflareLogoSvgOptions {\n /**\n * Logo variant\n * - `glyph`: Cloud icon only\n * - `full`: Cloud icon with \"CLOUDFLARE\" wordmark\n * @default \"full\"\n */\n variant?: CloudflareLogoSvgVariant;\n /**\n * Color scheme\n * - `color`: Brand colors (orange/yellow cloud, dark gray wordmark)\n * - `black`: Solid black\n * - `white`: Solid white\n * @default \"color\"\n */\n color?: CloudflareLogoSvgColor;\n}\n\n/**\n * Generates SVG markup string for the Cloudflare logo.\n *\n * Useful for copying to clipboard or embedding in non-React contexts.\n *\n * @example Copy glyph SVG to clipboard\n * ```tsx\n * const svg = generateCloudflareLogoSvg({ variant: \"glyph\" });\n * await navigator.clipboard.writeText(svg);\n * ```\n *\n * @example Generate full logo in black\n * ```tsx\n * const svg = generateCloudflareLogoSvg({ variant: \"full\", color: \"black\" });\n * ```\n */\nexport function generateCloudflareLogoSvg(\n options: GenerateCloudflareLogoSvgOptions = {},\n): string {\n const { variant = \"full\", color = \"color\" } = options;\n\n const isGlyph = variant === \"glyph\";\n\n // Determine fill colors\n const fillOrange = color === \"color\" ? CLOUDFLARE_ORANGE : color;\n const fillYellow = color === \"color\" ? CLOUDFLARE_YELLOW : color;\n const fillText = color === \"color\" ? CLOUDFLARE_TEXT_GRAY : color;\n\n if (isGlyph) {\n return `<svg viewBox=\"${CLOUDFLARE_GLYPH_VIEWBOX}\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-label=\"Cloudflare logo\">\n <path d=\"${CLOUDFLARE_GLYPH_ORANGE_PATH}\" fill=\"${fillOrange}\"/>\n <path d=\"${CLOUDFLARE_GLYPH_YELLOW_PATH}\" fill=\"${fillYellow}\"/>\n</svg>`;\n }\n\n // Full logo with wordmark\n return `<svg viewBox=\"${CLOUDFLARE_FULL_LOGO_VIEWBOX}\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-label=\"Cloudflare logo\">\n <path d=\"${CLOUDFLARE_FULL_LOGO_ORANGE_PATH}\" fill=\"${fillOrange}\"/>\n <path d=\"${CLOUDFLARE_FULL_LOGO_YELLOW_PATH}\" fill=\"${fillYellow}\"/>\n <path d=\"${CLOUDFLARE_WORDMARK_PATH}\" fill=\"${fillText}\"/>\n</svg>`;\n}\n"],"names":["CLOUDFLARE_ORANGE","CLOUDFLARE_YELLOW","CLOUDFLARE_TEXT_GRAY","CLOUDFLARE_GLYPH_ORANGE_PATH","CLOUDFLARE_GLYPH_YELLOW_PATH","CLOUDFLARE_WORDMARK_PATH","CLOUDFLARE_FULL_LOGO_ORANGE_PATH","CLOUDFLARE_FULL_LOGO_YELLOW_PATH","CLOUDFLARE_GLYPH_VIEWBOX","CLOUDFLARE_FULL_LOGO_VIEWBOX","KUMO_CLOUDFLARE_LOGO_VARIANTS","KUMO_CLOUDFLARE_LOGO_DEFAULT_VARIANTS","CloudflareLogo","forwardRef","variant","color","className","props","ref","isGlyph","fillOrange","fillYellow","fillText","jsxs","cn","jsx","PoweredByCloudflare","href","generateCloudflareLogoSvg","options"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"cloudflare-logo-pbavoe1wu8nr5c4n.js","sources":["../../src/components/cloudflare-logo/cloudflare-logo.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n// =============================================================================\n// Brand Colors (internal)\n// =============================================================================\n\nconst CLOUDFLARE_ORANGE = \"#F48120\";\nconst CLOUDFLARE_YELLOW = \"#FAAD3F\";\nconst CLOUDFLARE_TEXT_GRAY = \"#404041\";\n\n// =============================================================================\n// SVG Path Data (internal)\n// =============================================================================\n\nconst CLOUDFLARE_GLYPH_ORANGE_PATH =\n \"M33.204 20.4C33.3649 19.9741 33.4217 19.5159 33.3695 19.0636C33.3173 18.6113 33.1577 18.1781 32.904 17.8C32.6435 17.4876 32.3239 17.2297 31.9636 17.0409C31.6032 16.8522 31.2092 16.7363 30.804 16.7L13.404 16.5C13.304 16.5 13.204 16.4 13.104 16.4C13.0808 16.3825 13.0618 16.3599 13.0488 16.3339C13.0358 16.3078 13.029 16.2791 13.029 16.25C13.029 16.2209 13.0358 16.1922 13.0488 16.1662C13.0618 16.1401 13.0808 16.1175 13.104 16.1C13.204 15.9 13.304 15.8 13.504 15.8L31.004 15.6C32.115 15.4767 33.1731 15.0597 34.0695 14.3918C34.9659 13.7239 35.6681 12.8293 36.104 11.8L37.104 9.20002C37.104 9.10002 37.204 9.00001 37.104 8.90001C36.5604 6.47843 35.2411 4.30052 33.3466 2.69721C31.4521 1.09391 29.086 0.152865 26.6079 0.0170769C24.1298 -0.118712 21.675 0.558179 19.6167 1.94489C17.5584 3.33161 16.009 5.35233 15.204 7.70002C14.159 6.95365 12.8843 6.59957 11.604 6.70002C10.4291 6.83102 9.33369 7.35777 8.49774 8.19372C7.66179 9.02966 7.13505 10.1251 7.00404 11.3C6.93745 11.9014 6.97125 12.5097 7.10404 13.1C5.20298 13.1526 3.39743 13.9448 2.07147 15.3081C0.745511 16.6714 0.00377461 18.4982 0.00403983 20.4C-0.0123708 20.7695 0.0212659 21.1395 0.104038 21.5C0.10863 21.5781 0.141713 21.6517 0.19701 21.707C0.252307 21.7623 0.325975 21.7954 0.404041 21.8H32.504C32.704 21.8 32.904 21.7 32.904 21.5L33.204 20.4Z\";\n\nconst CLOUDFLARE_GLYPH_YELLOW_PATH =\n \"M38.704 9.20002H38.204C38.104 9.20002 38.004 9.30001 37.904 9.40001L37.204 11.8C37.0431 12.2259 36.9864 12.6841 37.0386 13.1364C37.0908 13.5887 37.2504 14.0219 37.504 14.4C37.7646 14.7124 38.0842 14.9704 38.4445 15.1591C38.8049 15.3479 39.1989 15.4637 39.604 15.5L43.304 15.7C43.404 15.7 43.504 15.8 43.604 15.8C43.6273 15.8175 43.6462 15.8401 43.6592 15.8662C43.6723 15.8922 43.679 15.9209 43.679 15.95C43.679 15.9791 43.6723 16.0078 43.6592 16.0339C43.6462 16.0599 43.6273 16.0826 43.604 16.1C43.504 16.3 43.404 16.4 43.204 16.4L39.404 16.6C38.293 16.7233 37.2349 17.1403 36.3386 17.8082C35.4422 18.4761 34.74 19.3707 34.304 20.4L34.104 21.3C34.004 21.4 34.104 21.6 34.304 21.6H47.504C47.5448 21.6058 47.5863 21.6021 47.6254 21.5891C47.6644 21.5761 47.6999 21.5541 47.729 21.525C47.7581 21.4959 47.7801 21.4604 47.7931 21.4214C47.8061 21.3823 47.8099 21.3408 47.804 21.3C48.0421 20.4527 48.1764 19.5797 48.204 18.7C48.1882 16.1854 47.1822 13.7782 45.404 12C43.6259 10.2218 41.2187 9.21587 38.704 9.20002Z\";\n\nconst CLOUDFLARE_WORDMARK_PATH =\n \"M100.5,27.2a.9.9,0,1,1,.9-.9.89626.89626,0,0,1-.9.9m0-1.6a.7.7,0,1,0,.7.7.68354.68354,0,0,0-.7-.7m.4,1.2h-.2l-.2-.3h-.2v.3h-.2v-.9h.5a.26517.26517,0,0,1,.3.3c0,.1-.1.2-.2.3l.2.3Zm-.3-.5c.1,0,.1,0,.1-.1a.09794.09794,0,0,0-.1-.1h-.3v.3h.3Zm-89.7-.9h2.2v6h3.8v1.9h-6Zm8.3,3.9a4.10491,4.10491,0,0,1,4.3-4.1,4.02,4.02,0,0,1,4.2,4.1,4.10491,4.10491,0,0,1-4.3,4.1,4.07888,4.07888,0,0,1-4.2-4.1m6.3,0a2.05565,2.05565,0,0,0-2-2.2,2.1025,2.1025,0,0,0,0,4.2c1.2.2,2-.8,2-2m4.9.5V25.4h2.2v4.4c0,1.1.6,1.7,1.5,1.7a1.39926,1.39926,0,0,0,1.5-1.6V25.4h2.2v4.4c0,2.6-1.5,3.7-3.7,3.7-2.3-.1-3.7-1.2-3.7-3.7m10.7-4.4h3.1c2.8,0,4.5,1.6,4.5,3.9s-1.7,4-4.5,4h-3V25.4Zm3.1,5.9a2.00909,2.00909,0,1,0,0-4h-.9v4Zm7.6-5.9h6.3v1.9H54v1.3h3.7v1.8H54v2.9H51.8Zm9.4,0h2.2v6h3.8v1.9h-6Zm11.7-.1h2.2l3.4,8H76.1l-.6-1.4H72.4l-.6,1.4H69.5Zm2,4.9L74,28l-.9,2.2Zm6.4-4.8H85a3.41818,3.41818,0,0,1,2.6.9,2.62373,2.62373,0,0,1-.9,4.2l1.9,2.8H86.1l-1.6-2.4h-1v2.4H81.3Zm3.6,3.8c.7,0,1.2-.4,1.2-.9,0-.6-.5-.9-1.2-.9H83.5v1.9h1.4Zm6.5-3.8h6.4v1.8H93.6v1.2h3.8v1.8H93.6v1.2h4.3v1.9H91.4ZM6.1,30.3a1.97548,1.97548,0,0,1-1.8,1.2,2.1025,2.1025,0,0,1,0-4.2,2.0977,2.0977,0,0,1,1.9,1.3H8.5a4.13459,4.13459,0,0,0-4.2-3.3A4.1651,4.1651,0,0,0,0,29.4a4.07888,4.07888,0,0,0,4.2,4.1,4.31812,4.31812,0,0,0,4.2-3.2Z\";\n\nconst CLOUDFLARE_FULL_LOGO_ORANGE_PATH =\n \"M84.2,20.4a2.85546,2.85546,0,0,0-.3-2.6,3.09428,3.09428,0,0,0-2.1-1.1l-17.4-.2c-.1,0-.2-.1-.3-.1a.1875.1875,0,0,1,0-.3c.1-.2.2-.3.4-.3L82,15.6a6.29223,6.29223,0,0,0,5.1-3.8l1-2.6c0-.1.1-.2,0-.3A11.39646,11.39646,0,0,0,66.2,7.7a5.45941,5.45941,0,0,0-3.6-1A5.20936,5.20936,0,0,0,58,11.3a5.46262,5.46262,0,0,0,.1,1.8A7.30177,7.30177,0,0,0,51,20.4a4.102,4.102,0,0,0,.1,1.1.3193.3193,0,0,0,.3.3H83.5c.2,0,.4-.1.4-.3Z\";\n\nconst CLOUDFLARE_FULL_LOGO_YELLOW_PATH =\n \"M89.7,9.2h-.5c-.1,0-.2.1-.3.2l-.7,2.4a2.85546,2.85546,0,0,0,.3,2.6,3.09428,3.09428,0,0,0,2.1,1.1l3.7.2c.1,0,.2.1.3.1a.1875.1875,0,0,1,0,.3c-.1.2-.2.3-.4.3l-3.8.2a6.29223,6.29223,0,0,0-5.1,3.8l-.2.9c-.1.1,0,.3.2.3H98.5a.26517.26517,0,0,0,.3-.3,10.87184,10.87184,0,0,0,.4-2.6,9.56045,9.56045,0,0,0-9.5-9.5\";\n\nconst CLOUDFLARE_GLYPH_VIEWBOX = \"0 0 49 22\";\nconst CLOUDFLARE_FULL_LOGO_VIEWBOX = \"0 0 101.4 33.5\";\n\n// =============================================================================\n// Component Variants\n// =============================================================================\n\nexport const KUMO_CLOUDFLARE_LOGO_VARIANTS = {\n variant: {\n glyph: {\n description: \"Cloud glyph only (logomark)\",\n },\n full: {\n description: \"Full logo with cloud glyph and wordmark stacked\",\n },\n },\n color: {\n color: {\n description:\n \"Brand colors (orange/yellow gradient cloud, dark gray text)\",\n },\n black: {\n description: \"Solid black logo\",\n },\n white: {\n description: \"Solid white logo (for dark backgrounds)\",\n },\n },\n} as const;\n\nexport const KUMO_CLOUDFLARE_LOGO_DEFAULT_VARIANTS = {\n variant: \"full\",\n color: \"color\",\n} as const;\n\nexport type CloudflareLogoVariant =\n keyof typeof KUMO_CLOUDFLARE_LOGO_VARIANTS.variant;\nexport type CloudflareLogoColor =\n keyof typeof KUMO_CLOUDFLARE_LOGO_VARIANTS.color;\n\nexport interface CloudflareLogoProps\n extends React.SVGAttributes<SVGSVGElement> {\n /**\n * Logo variant\n * - `glyph`: Cloud icon only\n * - `full`: Cloud icon with \"CLOUDFLARE\" wordmark below\n * @default \"full\"\n */\n variant?: CloudflareLogoVariant;\n /**\n * Color scheme\n * - `color`: Brand colors (orange/yellow cloud, dark gray wordmark)\n * - `black`: Solid black\n * - `white`: Solid white (for dark backgrounds)\n * @default \"color\"\n */\n color?: CloudflareLogoColor;\n}\n\n/**\n * Cloudflare logo component.\n *\n * @example Glyph only (cloud icon)\n * ```tsx\n * <CloudflareLogo variant=\"glyph\" className=\"w-12\" />\n * ```\n *\n * @example Full logo with wordmark\n * ```tsx\n * <CloudflareLogo variant=\"full\" className=\"w-40\" />\n * ```\n *\n * @example White logo for dark backgrounds\n * ```tsx\n * <CloudflareLogo color=\"white\" className=\"w-32\" />\n * ```\n *\n * @example Black logo\n * ```tsx\n * <CloudflareLogo color=\"black\" className=\"w-32\" />\n * ```\n */\nexport const CloudflareLogo = forwardRef<SVGSVGElement, CloudflareLogoProps>(\n (\n {\n variant = KUMO_CLOUDFLARE_LOGO_DEFAULT_VARIANTS.variant,\n color = KUMO_CLOUDFLARE_LOGO_DEFAULT_VARIANTS.color,\n className,\n ...props\n },\n ref,\n ) => {\n const isGlyph = variant === \"glyph\";\n\n // Determine fill colors\n // Cloud glyph always uses brand colors when color=\"color\", otherwise currentColor\n const fillOrange = color === \"color\" ? CLOUDFLARE_ORANGE : \"currentColor\";\n const fillYellow = color === \"color\" ? CLOUDFLARE_YELLOW : \"currentColor\";\n // Wordmark uses currentColor to respect dark mode (via text-kumo-default class)\n const fillText = \"currentColor\";\n\n if (isGlyph) {\n return (\n <svg\n ref={ref}\n viewBox={CLOUDFLARE_GLYPH_VIEWBOX}\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n role=\"img\"\n aria-label=\"Cloudflare logo\"\n className={cn(\n color === \"white\" && \"text-white\",\n color === \"black\" && \"text-black\",\n className,\n )}\n {...props}\n >\n <path\n d=\"M33.204 20.4C33.3649 19.9741 33.4217 19.5159 33.3695 19.0636C33.3173 18.6113 33.1577 18.1781 32.904 17.8C32.6435 17.4876 32.3239 17.2297 31.9636 17.0409C31.6032 16.8522 31.2092 16.7363 30.804 16.7L13.404 16.5C13.304 16.5 13.204 16.4 13.104 16.4C13.0808 16.3825 13.0618 16.3599 13.0488 16.3339C13.0358 16.3078 13.029 16.2791 13.029 16.25C13.029 16.2209 13.0358 16.1922 13.0488 16.1662C13.0618 16.1401 13.0808 16.1175 13.104 16.1C13.204 15.9 13.304 15.8 13.504 15.8L31.004 15.6C32.115 15.4767 33.1731 15.0597 34.0695 14.3918C34.9659 13.7239 35.6681 12.8293 36.104 11.8L37.104 9.20002C37.104 9.10002 37.204 9.00001 37.104 8.90001C36.5604 6.47843 35.2411 4.30052 33.3466 2.69721C31.4521 1.09391 29.086 0.152865 26.6079 0.0170769C24.1298 -0.118712 21.675 0.558179 19.6167 1.94489C17.5584 3.33161 16.009 5.35233 15.204 7.70002C14.159 6.95365 12.8843 6.59957 11.604 6.70002C10.4291 6.83102 9.33369 7.35777 8.49774 8.19372C7.66179 9.02966 7.13505 10.1251 7.00404 11.3C6.93745 11.9014 6.97125 12.5097 7.10404 13.1C5.20298 13.1526 3.39743 13.9448 2.07147 15.3081C0.745511 16.6714 0.00377461 18.4982 0.00403983 20.4C-0.0123708 20.7695 0.0212659 21.1395 0.104038 21.5C0.10863 21.5781 0.141713 21.6517 0.19701 21.707C0.252307 21.7623 0.325975 21.7954 0.404041 21.8H32.504C32.704 21.8 32.904 21.7 32.904 21.5L33.204 20.4Z\"\n fill={fillOrange}\n />\n <path\n d=\"M38.704 9.20002H38.204C38.104 9.20002 38.004 9.30001 37.904 9.40001L37.204 11.8C37.0431 12.2259 36.9864 12.6841 37.0386 13.1364C37.0908 13.5887 37.2504 14.0219 37.504 14.4C37.7646 14.7124 38.0842 14.9704 38.4445 15.1591C38.8049 15.3479 39.1989 15.4637 39.604 15.5L43.304 15.7C43.404 15.7 43.504 15.8 43.604 15.8C43.6273 15.8175 43.6462 15.8401 43.6592 15.8662C43.6723 15.8922 43.679 15.9209 43.679 15.95C43.679 15.9791 43.6723 16.0078 43.6592 16.0339C43.6462 16.0599 43.6273 16.0826 43.604 16.1C43.504 16.3 43.404 16.4 43.204 16.4L39.404 16.6C38.293 16.7233 37.2349 17.1403 36.3386 17.8082C35.4422 18.4761 34.74 19.3707 34.304 20.4L34.104 21.3C34.004 21.4 34.104 21.6 34.304 21.6H47.504C47.5448 21.6058 47.5863 21.6021 47.6254 21.5891C47.6644 21.5761 47.6999 21.5541 47.729 21.525C47.7581 21.4959 47.7801 21.4604 47.7931 21.4214C47.8061 21.3823 47.8099 21.3408 47.804 21.3C48.0421 20.4527 48.1764 19.5797 48.204 18.7C48.1882 16.1854 47.1822 13.7782 45.404 12C43.6259 10.2218 41.2187 9.21587 38.704 9.20002Z\"\n fill={fillYellow}\n />\n </svg>\n );\n }\n\n // Full logo with wordmark\n return (\n <svg\n ref={ref}\n viewBox={CLOUDFLARE_FULL_LOGO_VIEWBOX}\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n role=\"img\"\n aria-label=\"Cloudflare logo\"\n className={cn(\n // Wordmark text color - respects dark mode\n color === \"color\" && \"text-kumo-default\",\n color === \"white\" && \"text-white\",\n color === \"black\" && \"text-black\",\n className,\n )}\n {...props}\n >\n {/* Cloud glyph */}\n <path\n d=\"M84.2,20.4a2.85546,2.85546,0,0,0-.3-2.6,3.09428,3.09428,0,0,0-2.1-1.1l-17.4-.2c-.1,0-.2-.1-.3-.1a.1875.1875,0,0,1,0-.3c.1-.2.2-.3.4-.3L82,15.6a6.29223,6.29223,0,0,0,5.1-3.8l1-2.6c0-.1.1-.2,0-.3A11.39646,11.39646,0,0,0,66.2,7.7a5.45941,5.45941,0,0,0-3.6-1A5.20936,5.20936,0,0,0,58,11.3a5.46262,5.46262,0,0,0,.1,1.8A7.30177,7.30177,0,0,0,51,20.4a4.102,4.102,0,0,0,.1,1.1.3193.3193,0,0,0,.3.3H83.5c.2,0,.4-.1.4-.3Z\"\n fill={fillOrange}\n />\n <path\n d=\"M89.7,9.2h-.5c-.1,0-.2.1-.3.2l-.7,2.4a2.85546,2.85546,0,0,0,.3,2.6,3.09428,3.09428,0,0,0,2.1,1.1l3.7.2c.1,0,.2.1.3.1a.1875.1875,0,0,1,0,.3c-.1.2-.2.3-.4.3l-3.8.2a6.29223,6.29223,0,0,0-5.1,3.8l-.2.9c-.1.1,0,.3.2.3H98.5a.26517.26517,0,0,0,.3-.3,10.87184,10.87184,0,0,0,.4-2.6,9.56045,9.56045,0,0,0-9.5-9.5\"\n fill={fillYellow}\n />\n {/* Wordmark */}\n <path\n d=\"M100.5,27.2a.9.9,0,1,1,.9-.9.89626.89626,0,0,1-.9.9m0-1.6a.7.7,0,1,0,.7.7.68354.68354,0,0,0-.7-.7m.4,1.2h-.2l-.2-.3h-.2v.3h-.2v-.9h.5a.26517.26517,0,0,1,.3.3c0,.1-.1.2-.2.3l.2.3Zm-.3-.5c.1,0,.1,0,.1-.1a.09794.09794,0,0,0-.1-.1h-.3v.3h.3Zm-89.7-.9h2.2v6h3.8v1.9h-6Zm8.3,3.9a4.10491,4.10491,0,0,1,4.3-4.1,4.02,4.02,0,0,1,4.2,4.1,4.10491,4.10491,0,0,1-4.3,4.1,4.07888,4.07888,0,0,1-4.2-4.1m6.3,0a2.05565,2.05565,0,0,0-2-2.2,2.1025,2.1025,0,0,0,0,4.2c1.2.2,2-.8,2-2m4.9.5V25.4h2.2v4.4c0,1.1.6,1.7,1.5,1.7a1.39926,1.39926,0,0,0,1.5-1.6V25.4h2.2v4.4c0,2.6-1.5,3.7-3.7,3.7-2.3-.1-3.7-1.2-3.7-3.7m10.7-4.4h3.1c2.8,0,4.5,1.6,4.5,3.9s-1.7,4-4.5,4h-3V25.4Zm3.1,5.9a2.00909,2.00909,0,1,0,0-4h-.9v4Zm7.6-5.9h6.3v1.9H54v1.3h3.7v1.8H54v2.9H51.8Zm9.4,0h2.2v6h3.8v1.9h-6Zm11.7-.1h2.2l3.4,8H76.1l-.6-1.4H72.4l-.6,1.4H69.5Zm2,4.9L74,28l-.9,2.2Zm6.4-4.8H85a3.41818,3.41818,0,0,1,2.6.9,2.62373,2.62373,0,0,1-.9,4.2l1.9,2.8H86.1l-1.6-2.4h-1v2.4H81.3Zm3.6,3.8c.7,0,1.2-.4,1.2-.9,0-.6-.5-.9-1.2-.9H83.5v1.9h1.4Zm6.5-3.8h6.4v1.8H93.6v1.2h3.8v1.8H93.6v1.2h4.3v1.9H91.4ZM6.1,30.3a1.97548,1.97548,0,0,1-1.8,1.2,2.1025,2.1025,0,0,1,0-4.2,2.0977,2.0977,0,0,1,1.9,1.3H8.5a4.13459,4.13459,0,0,0-4.2-3.3A4.1651,4.1651,0,0,0,0,29.4a4.07888,4.07888,0,0,0,4.2,4.1,4.31812,4.31812,0,0,0,4.2-3.2Z\"\n fill={fillText}\n />\n </svg>\n );\n },\n);\n\nCloudflareLogo.displayName = \"CloudflareLogo\";\n\n// =============================================================================\n// PoweredByCloudflare Component\n// =============================================================================\n\nexport interface PoweredByCloudflareProps\n extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n /**\n * Color scheme for the logo and text\n * @default \"color\"\n */\n color?: CloudflareLogoColor;\n}\n\n/**\n * \"Powered by Cloudflare\" badge component.\n *\n * Renders a link to cloudflare.com with the Cloudflare glyph and \"Powered by Cloudflare\" text.\n *\n * @example Basic usage\n * ```tsx\n * <PoweredByCloudflare />\n * ```\n *\n * @example White variant for dark backgrounds\n * ```tsx\n * <PoweredByCloudflare color=\"white\" />\n * ```\n *\n * @example Custom link\n * ```tsx\n * <PoweredByCloudflare href=\"https://cloudflare.com/products/workers\" />\n * ```\n */\nexport const PoweredByCloudflare = forwardRef<\n HTMLAnchorElement,\n PoweredByCloudflareProps\n>(\n (\n {\n color = \"color\",\n href = \"https://www.cloudflare.com\",\n className,\n ...props\n },\n ref,\n ) => {\n return (\n <a\n ref={ref}\n href={href}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className={cn(\n // Base badge styles\n \"inline-flex items-center gap-2 rounded-lg py-2 pl-2.5 pr-3 text-sm font-medium\",\n \"ring-1 ring-inset transition-all hover:shadow-sm\",\n // Color variants using semantic tokens\n color === \"color\" && \"bg-kumo-base text-kumo-default ring-kumo-hairline\",\n color === \"black\" && \"bg-white text-black ring-black/20\",\n color === \"white\" && \"bg-black text-white ring-white/20\",\n className,\n )}\n {...props}\n >\n <CloudflareLogo variant=\"glyph\" color={color} className=\"h-4 w-auto\" />\n <span>\n Powered by <span className=\"font-semibold\">Cloudflare</span>\n </span>\n </a>\n );\n },\n);\n\nPoweredByCloudflare.displayName = \"PoweredByCloudflare\";\n\n// =============================================================================\n// SVG Generation Helper\n// =============================================================================\n\nexport type CloudflareLogoSvgVariant = \"glyph\" | \"full\";\nexport type CloudflareLogoSvgColor = \"color\" | \"black\" | \"white\";\n\nexport interface GenerateCloudflareLogoSvgOptions {\n /**\n * Logo variant\n * - `glyph`: Cloud icon only\n * - `full`: Cloud icon with \"CLOUDFLARE\" wordmark\n * @default \"full\"\n */\n variant?: CloudflareLogoSvgVariant;\n /**\n * Color scheme\n * - `color`: Brand colors (orange/yellow cloud, dark gray wordmark)\n * - `black`: Solid black\n * - `white`: Solid white\n * @default \"color\"\n */\n color?: CloudflareLogoSvgColor;\n}\n\n/**\n * Generates SVG markup string for the Cloudflare logo.\n *\n * Useful for copying to clipboard or embedding in non-React contexts.\n *\n * @example Copy glyph SVG to clipboard\n * ```tsx\n * const svg = generateCloudflareLogoSvg({ variant: \"glyph\" });\n * await navigator.clipboard.writeText(svg);\n * ```\n *\n * @example Generate full logo in black\n * ```tsx\n * const svg = generateCloudflareLogoSvg({ variant: \"full\", color: \"black\" });\n * ```\n */\nexport function generateCloudflareLogoSvg(\n options: GenerateCloudflareLogoSvgOptions = {},\n): string {\n const { variant = \"full\", color = \"color\" } = options;\n\n const isGlyph = variant === \"glyph\";\n\n // Determine fill colors\n const fillOrange = color === \"color\" ? CLOUDFLARE_ORANGE : color;\n const fillYellow = color === \"color\" ? CLOUDFLARE_YELLOW : color;\n const fillText = color === \"color\" ? CLOUDFLARE_TEXT_GRAY : color;\n\n if (isGlyph) {\n return `<svg viewBox=\"${CLOUDFLARE_GLYPH_VIEWBOX}\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-label=\"Cloudflare logo\">\n <path d=\"${CLOUDFLARE_GLYPH_ORANGE_PATH}\" fill=\"${fillOrange}\"/>\n <path d=\"${CLOUDFLARE_GLYPH_YELLOW_PATH}\" fill=\"${fillYellow}\"/>\n</svg>`;\n }\n\n // Full logo with wordmark\n return `<svg viewBox=\"${CLOUDFLARE_FULL_LOGO_VIEWBOX}\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-label=\"Cloudflare logo\">\n <path d=\"${CLOUDFLARE_FULL_LOGO_ORANGE_PATH}\" fill=\"${fillOrange}\"/>\n <path d=\"${CLOUDFLARE_FULL_LOGO_YELLOW_PATH}\" fill=\"${fillYellow}\"/>\n <path d=\"${CLOUDFLARE_WORDMARK_PATH}\" fill=\"${fillText}\"/>\n</svg>`;\n}\n"],"names":["CLOUDFLARE_ORANGE","CLOUDFLARE_YELLOW","CLOUDFLARE_TEXT_GRAY","CLOUDFLARE_GLYPH_ORANGE_PATH","CLOUDFLARE_GLYPH_YELLOW_PATH","CLOUDFLARE_WORDMARK_PATH","CLOUDFLARE_FULL_LOGO_ORANGE_PATH","CLOUDFLARE_FULL_LOGO_YELLOW_PATH","CLOUDFLARE_GLYPH_VIEWBOX","CLOUDFLARE_FULL_LOGO_VIEWBOX","KUMO_CLOUDFLARE_LOGO_VARIANTS","KUMO_CLOUDFLARE_LOGO_DEFAULT_VARIANTS","CloudflareLogo","forwardRef","variant","color","className","props","ref","isGlyph","fillOrange","fillYellow","fillText","jsxs","cn","jsx","PoweredByCloudflare","href","generateCloudflareLogoSvg","options"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as o } from "react/jsx-runtime";
|
|
3
|
-
import { c } from "./cn-ct4n7r74mh8y0f48.js";
|
|
4
|
-
const
|
|
3
|
+
import { c as r } from "./cn-ct4n7r74mh8y0f48.js";
|
|
4
|
+
const a = {
|
|
5
5
|
lang: {
|
|
6
6
|
ts: {
|
|
7
7
|
classes: "",
|
|
@@ -24,37 +24,37 @@ const i = {
|
|
|
24
24
|
description: "CSS styles"
|
|
25
25
|
}
|
|
26
26
|
}
|
|
27
|
-
},
|
|
27
|
+
}, n = {
|
|
28
28
|
lang: "ts"
|
|
29
29
|
};
|
|
30
|
-
function
|
|
31
|
-
lang: s =
|
|
30
|
+
function i({
|
|
31
|
+
lang: s = n.lang
|
|
32
32
|
} = {}) {
|
|
33
|
-
return
|
|
33
|
+
return r(
|
|
34
34
|
// Base styles
|
|
35
35
|
"m-0 w-auto rounded-none border-none bg-transparent p-0 font-mono text-sm leading-[20px] text-kumo-strong",
|
|
36
|
-
// Apply lang-specific styles (
|
|
37
|
-
|
|
36
|
+
// Apply lang-specific styles (fallback to default if lang not in map)
|
|
37
|
+
a.lang[s]?.classes ?? a.lang[n.lang].classes
|
|
38
38
|
);
|
|
39
39
|
}
|
|
40
|
-
function
|
|
40
|
+
function c({
|
|
41
41
|
code: s,
|
|
42
|
-
lang: e =
|
|
43
|
-
className:
|
|
42
|
+
lang: e = n.lang,
|
|
43
|
+
className: l,
|
|
44
44
|
style: d
|
|
45
45
|
}) {
|
|
46
|
-
return /* @__PURE__ */ o("pre", { className:
|
|
46
|
+
return /* @__PURE__ */ o("pre", { className: r(i({ lang: e }), l), style: d, children: s });
|
|
47
47
|
}
|
|
48
|
-
|
|
48
|
+
c.displayName = "Code";
|
|
49
49
|
function t({ code: s, lang: e }) {
|
|
50
|
-
return /* @__PURE__ */ o("div", { className: "min-w-0 rounded-md border border-kumo-fill bg-kumo-base [&>pre]:p-2.5!", children: /* @__PURE__ */ o(
|
|
50
|
+
return /* @__PURE__ */ o("div", { className: "min-w-0 rounded-md border border-kumo-fill bg-kumo-base [&>pre]:p-2.5!", children: /* @__PURE__ */ o(c, { lang: e, code: s }) });
|
|
51
51
|
}
|
|
52
52
|
t.displayName = "CodeBlock";
|
|
53
|
-
const u = Object.assign(
|
|
53
|
+
const u = Object.assign(c, {
|
|
54
54
|
Block: t
|
|
55
|
-
}),
|
|
55
|
+
}), g = t;
|
|
56
56
|
export {
|
|
57
57
|
u as C,
|
|
58
|
-
|
|
58
|
+
g as a
|
|
59
59
|
};
|
|
60
|
-
//# sourceMappingURL=code-
|
|
60
|
+
//# sourceMappingURL=code-cz0w1y5z4h29a9eg.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"code-cz0w1y5z4h29a9eg.js","sources":["../../src/components/code/code.tsx"],"sourcesContent":["import { type CSSProperties } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Code language variant definitions. */\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 /**\n * Language hint for the code content.\n * - `\"ts\"` — TypeScript code\n * - `\"tsx\"` — TypeScript JSX code\n * - `\"jsonc\"` — JSON with comments\n * - `\"bash\"` — Shell/Bash commands\n * - `\"css\"` — CSS styles\n * @default \"ts\"\n */\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 (fallback to default if lang not in map)\n KUMO_CODE_VARIANTS.lang[lang]?.classes ??\n KUMO_CODE_VARIANTS.lang[KUMO_CODE_DEFAULT_VARIANTS.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\n/**\n * Code component props.\n *\n * @example\n * ```tsx\n * <Code code=\"const x = 1;\" lang=\"ts\" />\n * <Code code=\"export API_KEY={{apiKey}}\" lang=\"bash\"\n * values={{ apiKey: { value: \"sk_live_123\", highlight: true } }}\n * />\n * ```\n */\nexport interface CodeProps extends KumoCodeVariantsProps {\n /** The code string to display. */\n code: string;\n /** Template values for `{{key}}` interpolation. Values with `highlight: true` are visually emphasized. */\n values?: Record<\n string,\n {\n value: string;\n highlight?: boolean;\n }\n >;\n /** Additional CSS classes merged via `cn()`. */\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 *\n * @deprecated Use `CodeHighlighted` from `@cloudflare/kumo/code` for syntax highlighting.\n * This component will be removed in v2.0.\n *\n * @example Migration:\n * ```tsx\n * // Before\n * import { Code } from \"@cloudflare/kumo\";\n * <Code code=\"const x = 1;\" lang=\"ts\" />\n *\n * // After\n * import { ShikiProvider, CodeHighlighted } from \"@cloudflare/kumo/code\";\n * <ShikiProvider engine=\"javascript\" languages={['tsx']} themes={{ light: 'github-light', dark: 'github-dark' }}>\n * <CodeHighlighted code=\"const x = 1;\" lang=\"tsx\" />\n * </ShikiProvider>\n * ```\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\n/**\n * CodeBlock component props — code inside a bordered container.\n *\n * @example\n * ```tsx\n * <CodeBlock lang=\"tsx\" code={`const greeting = \"Hello!\";`} />\n * ```\n */\nexport interface CodeBlockProps {\n /** The code string to display. */\n code: string;\n /**\n * Language hint for the code content.\n * @default \"ts\"\n */\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 *\n * @deprecated Use `CodeHighlighted` from `@cloudflare/kumo/code` for syntax highlighting.\n * This component will be removed in v2.0.\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":";;;AAIO,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;AAkEO,SAASC,EAAa;AAAA,EAC3B,MAAAC,IAAOF,EAA2B;AACpC,IAA2B,IAAI;AAC7B,SAAOG;AAAA;AAAA,IAEL;AAAA;AAAA,IAEAJ,EAAmB,KAAKG,CAAI,GAAG,WAC7BH,EAAmB,KAAKC,EAA2B,IAAI,EAAE;AAAA,EAAA;AAE/D;AAgEA,SAASI,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;AAkC5B,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;"}
|