@cloudflare/kumo 2.0.3 → 2.0.4

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.
Files changed (70) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/.build-complete +1 -1
  3. package/dist/chunks/{autocomplete-ln55iimq2n2s5uex.js → autocomplete-hbs51xgjf9iglbmq.js} +3 -3
  4. package/dist/chunks/{autocomplete-ln55iimq2n2s5uex.js.map → autocomplete-hbs51xgjf9iglbmq.js.map} +1 -1
  5. package/dist/chunks/{breadcrumbs-do6uyvm4msqus0sz.js → breadcrumbs-er08s9swoctwoj69.js} +2 -2
  6. package/dist/chunks/{breadcrumbs-do6uyvm4msqus0sz.js.map → breadcrumbs-er08s9swoctwoj69.js.map} +1 -1
  7. package/dist/chunks/{button-dh366jtvswxj0fw3.js → button-fe5rvewji3e5xd7m.js} +35 -20
  8. package/dist/chunks/button-fe5rvewji3e5xd7m.js.map +1 -0
  9. package/dist/chunks/{checkbox-cf2pwdupyjweg184.js → checkbox-l7kc0vcs0o7a6fgn.js} +2 -2
  10. package/dist/chunks/{checkbox-cf2pwdupyjweg184.js.map → checkbox-l7kc0vcs0o7a6fgn.js.map} +1 -1
  11. package/dist/chunks/{clipboard-text-hn2uwdj4ozenezd5.js → clipboard-text-je4e2q880wngmmuc.js} +3 -3
  12. package/dist/chunks/{clipboard-text-hn2uwdj4ozenezd5.js.map → clipboard-text-je4e2q880wngmmuc.js.map} +1 -1
  13. package/dist/chunks/{cloudflare-logo-pbavoe1wu8nr5c4n.js → cloudflare-logo-fya2cd2ljozkzjh8.js} +84 -75
  14. package/dist/chunks/cloudflare-logo-fya2cd2ljozkzjh8.js.map +1 -0
  15. package/dist/chunks/{combobox-fivcg1oorkmmmk78.js → combobox-ck95wketqoqbxjwb.js} +3 -3
  16. package/dist/chunks/{combobox-fivcg1oorkmmmk78.js.map → combobox-ck95wketqoqbxjwb.js.map} +1 -1
  17. package/dist/chunks/{empty-fr78te81o3qaj3in.js → empty-bmacg9ap2gjmyqiw.js} +2 -2
  18. package/dist/chunks/{empty-fr78te81o3qaj3in.js.map → empty-bmacg9ap2gjmyqiw.js.map} +1 -1
  19. package/dist/chunks/{field-dgf36p7cmz1crlnu.js → field-hmucpi6d4sqci1zu.js} +2 -2
  20. package/dist/chunks/{field-dgf36p7cmz1crlnu.js.map → field-hmucpi6d4sqci1zu.js.map} +1 -1
  21. package/dist/chunks/{input-area-i5wulip5pau3u6ss.js → input-area-dpgn5810c269jwbu.js} +3 -3
  22. package/dist/chunks/{input-area-i5wulip5pau3u6ss.js.map → input-area-dpgn5810c269jwbu.js.map} +1 -1
  23. package/dist/chunks/{input-group-bm9wxzovpvzn1c25.js → input-group-k1xa9cu8ochl1arh.js} +4 -4
  24. package/dist/chunks/{input-group-bm9wxzovpvzn1c25.js.map → input-group-k1xa9cu8ochl1arh.js.map} +1 -1
  25. package/dist/chunks/{input-2y9vg81trmamkb6k.js → input-k2ychlh2zo6hsocz.js} +2 -2
  26. package/dist/chunks/{input-2y9vg81trmamkb6k.js.map → input-k2ychlh2zo6hsocz.js.map} +1 -1
  27. package/dist/chunks/{label-efa0uvb8zqyjwpc8.js → label-ni6chzu01wns3cs2.js} +2 -2
  28. package/dist/chunks/{label-efa0uvb8zqyjwpc8.js.map → label-ni6chzu01wns3cs2.js.map} +1 -1
  29. package/dist/chunks/{pagination-fdmcwreb27eej9l3.js → pagination-l9inbujoqp5swmyg.js} +3 -3
  30. package/dist/chunks/{pagination-fdmcwreb27eej9l3.js.map → pagination-l9inbujoqp5swmyg.js.map} +1 -1
  31. package/dist/chunks/{select-j8evv2iblgs5fa9s.js → select-n6u3p44qgtb0in3z.js} +4 -4
  32. package/dist/chunks/{select-j8evv2iblgs5fa9s.js.map → select-n6u3p44qgtb0in3z.js.map} +1 -1
  33. package/dist/chunks/{sensitive-input-cmb9jt42bv8jftei.js → sensitive-input-yoawqvvvmtdod430.js} +3 -3
  34. package/dist/chunks/{sensitive-input-cmb9jt42bv8jftei.js.map → sensitive-input-yoawqvvvmtdod430.js.map} +1 -1
  35. package/dist/chunks/{sidebar-kb9kykqfgy5yzqwr.js → sidebar-jjptencqv1jgztgu.js} +85 -84
  36. package/dist/chunks/sidebar-jjptencqv1jgztgu.js.map +1 -0
  37. package/dist/chunks/{switch-c4qjga6x3axmoi20.js → switch-dsnh8onvu1sxzdoe.js} +2 -2
  38. package/dist/chunks/{switch-c4qjga6x3axmoi20.js.map → switch-dsnh8onvu1sxzdoe.js.map} +1 -1
  39. package/dist/chunks/{table-jvqy3tu48xa75n2t.js → table-ngrghrfy9qsk6091.js} +2 -2
  40. package/dist/chunks/{table-jvqy3tu48xa75n2t.js.map → table-ngrghrfy9qsk6091.js.map} +1 -1
  41. package/dist/chunks/{toast-c7kqwuj7qj9dx6gs.js → toast-ksnnyrf2o8yfvc3m.js} +2 -2
  42. package/dist/chunks/{toast-c7kqwuj7qj9dx6gs.js.map → toast-ksnnyrf2o8yfvc3m.js.map} +1 -1
  43. package/dist/code.js +1 -1
  44. package/dist/components/autocomplete.js +1 -1
  45. package/dist/components/breadcrumbs.js +1 -1
  46. package/dist/components/button.js +1 -1
  47. package/dist/components/checkbox.js +1 -1
  48. package/dist/components/clipboard-text.js +1 -1
  49. package/dist/components/cloudflare-logo.js +1 -1
  50. package/dist/components/combobox.js +1 -1
  51. package/dist/components/empty.js +1 -1
  52. package/dist/components/field.js +1 -1
  53. package/dist/components/input-group.js +1 -1
  54. package/dist/components/input.js +3 -3
  55. package/dist/components/label.js +1 -1
  56. package/dist/components/pagination.js +1 -1
  57. package/dist/components/select.js +1 -1
  58. package/dist/components/sensitive-input.js +1 -1
  59. package/dist/components/sidebar.js +1 -1
  60. package/dist/components/switch.js +1 -1
  61. package/dist/components/table.js +1 -1
  62. package/dist/components/toast.js +1 -1
  63. package/dist/index.js +22 -22
  64. package/dist/src/components/button/button.d.ts.map +1 -1
  65. package/dist/src/components/cloudflare-logo/cloudflare-logo.d.ts.map +1 -1
  66. package/dist/src/components/sidebar/sidebar.d.ts.map +1 -1
  67. package/package.json +1 -1
  68. package/dist/chunks/button-dh366jtvswxj0fw3.js.map +0 -1
  69. package/dist/chunks/cloudflare-logo-pbavoe1wu8nr5c4n.js.map +0 -1
  70. package/dist/chunks/sidebar-kb9kykqfgy5yzqwr.js.map +0 -1
@@ -1 +0,0 @@
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 +0,0 @@
1
- {"version":3,"file":"sidebar-kb9kykqfgy5yzqwr.js","sources":["../../src/components/sidebar/sidebar.tsx"],"sourcesContent":["import React, {\n type ComponentPropsWithoutRef,\n type CSSProperties,\n type ReactNode,\n createContext,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { Collapsible as CollapsibleBase } from \"@base-ui/react/collapsible\";\nimport { Dialog as DialogBase } from \"@base-ui/react/dialog\";\n\nimport {\n CaretRightIcon,\n MagnifyingGlassIcon,\n SidebarSimpleIcon,\n} from \"@phosphor-icons/react\";\nimport { cn } from \"../../utils/cn\";\nimport { useLinkComponent } from \"../../utils/link-provider\";\nimport { Tooltip, TooltipProvider } from \"../tooltip\";\n\n// ============================================================================\n// Variants (required by Kumo convention)\n// ============================================================================\n\n/** Sidebar variant definitions mapping layout, collapse, and side options. */\nexport const KUMO_SIDEBAR_VARIANTS = {\n variant: {\n sidebar: {\n classes: \"\",\n description: \"Standard sidebar with border separator\",\n },\n floating: {\n classes: \"\",\n description: \"Floating sidebar with shadow and rounded corners\",\n },\n inset: {\n classes: \"\",\n description: \"Inset sidebar within the content area\",\n },\n },\n collapsible: {\n icon: {\n classes: \"\",\n description: \"Collapses to show icons only\",\n },\n offcanvas: {\n classes: \"\",\n description: \"Slides off screen when collapsed\",\n },\n none: {\n classes: \"\",\n description: \"Cannot be collapsed\",\n },\n },\n side: {\n left: {\n classes: \"\",\n description: \"Left-aligned sidebar\",\n },\n right: {\n classes: \"\",\n description: \"Right-aligned sidebar\",\n },\n },\n} as const;\n\nexport const KUMO_SIDEBAR_DEFAULT_VARIANTS = {\n variant: \"sidebar\",\n collapsible: \"icon\",\n side: \"left\",\n} as const;\n\nexport const KUMO_SIDEBAR_STYLING = {\n width: {\n expanded: \"16rem\",\n icon: \"3rem\",\n },\n mobile: {\n breakpoint: 768,\n },\n} as const;\n\nexport type SidebarSide = \"left\" | \"right\";\nexport type SidebarVariant = \"sidebar\" | \"floating\" | \"inset\";\nexport type SidebarCollapsible = \"icon\" | \"offcanvas\" | \"none\";\n\n// ============================================================================\n// Constants\n// ============================================================================\n\nconst SIDEBAR_WIDTH = \"16rem\";\nconst SIDEBAR_WIDTH_ICON = \"3rem\";\nconst MOBILE_BREAKPOINT = 768;\n\n// ============================================================================\n// Mobile detection hook\n// ============================================================================\n\nfunction useIsMobile() {\n const [isMobile, setIsMobile] = useState(false);\n\n useEffect(() => {\n const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n const onChange = () => setIsMobile(mql.matches);\n mql.addEventListener(\"change\", onChange);\n setIsMobile(mql.matches);\n return () => mql.removeEventListener(\"change\", onChange);\n }, []);\n\n return isMobile;\n}\n\n// ============================================================================\n// Context\n// ============================================================================\n\nexport interface SidebarContextValue {\n state: \"expanded\" | \"collapsed\";\n open: boolean;\n setOpen: (open: boolean) => void;\n openMobile: boolean;\n setOpenMobile: (open: boolean) => void;\n isMobile: boolean;\n toggleSidebar: () => void;\n variant: \"sidebar\" | \"floating\" | \"inset\";\n side: \"left\" | \"right\";\n collapsible: \"icon\" | \"offcanvas\" | \"none\";\n width: number;\n resizable: boolean;\n minWidth: number;\n maxWidth: number;\n isResizing: boolean;\n setIsResizing: (resizing: boolean) => void;\n setWidth: (width: number) => void;\n}\n\nconst SidebarContext = createContext<SidebarContextValue | null>(null);\n\n/**\n * Hook to access sidebar state and actions from any descendant component.\n *\n * @example\n * ```tsx\n * const { state, open, toggleSidebar, isMobile } = useSidebar();\n * ```\n *\n * @throws Error if used outside a `Sidebar.Provider`.\n */\nexport function useSidebar() {\n const context = useContext(SidebarContext);\n if (!context) {\n throw new Error(\"useSidebar must be used within a Sidebar.Provider\");\n }\n return context;\n}\n\n// ============================================================================\n// Provider\n// ============================================================================\n\nexport interface SidebarProviderProps {\n /** Initial open state when uncontrolled. @default true */\n defaultOpen?: boolean;\n /** Controlled open state. */\n open?: boolean;\n /** Callback when open state changes (controlled mode). */\n onOpenChange?: (open: boolean) => void;\n /** Sidebar layout variant. @default \"sidebar\" */\n variant?: SidebarVariant;\n /** Which side the sidebar is on. @default \"left\" */\n side?: SidebarSide;\n collapsible?: \"icon\" | \"offcanvas\" | \"none\";\n /** Enable drag-to-resize on the sidebar edge. @default false */\n resizable?: boolean;\n /** Initial width in pixels when resizable. @default 256 */\n defaultWidth?: number;\n /** Minimum width in pixels when resizing. @default 200 */\n minWidth?: number;\n /** Maximum width in pixels when resizing. @default 480 */\n maxWidth?: number;\n /** Callback when width changes during resize. */\n onWidthChange?: (width: number) => void;\n /** Content — typically `<Sidebar>` + main content. */\n children: ReactNode;\n /** Additional CSS classes for the wrapper div. */\n className?: string;\n /** Inline styles for the wrapper div. */\n style?: CSSProperties;\n}\n\n/**\n * Sidebar context provider. Manages expand/collapse state and mobile detection.\n * Renders a flex wrapper div with CSS custom properties for sidebar width.\n *\n * @example\n * ```tsx\n * <Sidebar.Provider defaultOpen>\n * <Sidebar>{...}</Sidebar>\n * <main className=\"flex-1\">{...}</main>\n * </Sidebar.Provider>\n * ```\n */\nconst DEFAULT_WIDTH_PX = 256;\nconst MIN_WIDTH_PX = 200;\nconst MAX_WIDTH_PX = 480;\n\nfunction SidebarProvider({\n defaultOpen = true,\n open: openProp,\n onOpenChange: setOpenProp,\n variant = KUMO_SIDEBAR_DEFAULT_VARIANTS.variant,\n side = KUMO_SIDEBAR_DEFAULT_VARIANTS.side,\n collapsible = KUMO_SIDEBAR_DEFAULT_VARIANTS.collapsible,\n resizable = false,\n defaultWidth = DEFAULT_WIDTH_PX,\n minWidth = MIN_WIDTH_PX,\n maxWidth = MAX_WIDTH_PX,\n onWidthChange,\n children,\n className,\n style,\n}: SidebarProviderProps) {\n const isMobile = useIsMobile();\n const [openMobile, setOpenMobile] = useState(false);\n const [width, setWidthState] = useState(defaultWidth);\n const [isResizing, setIsResizing] = useState(false);\n\n const setWidth = useCallback(\n (newWidth: number) => {\n const clamped = Math.min(maxWidth, Math.max(minWidth, newWidth));\n setWidthState(clamped);\n onWidthChange?.(clamped);\n },\n [minWidth, maxWidth, onWidthChange],\n );\n\n const [_open, _setOpen] = useState(defaultOpen);\n const open = openProp ?? _open;\n const setOpen = useCallback(\n (value: boolean | ((prev: boolean) => boolean)) => {\n const next = typeof value === \"function\" ? value(open) : value;\n setOpenProp?.(next);\n _setOpen(next);\n },\n [setOpenProp, open],\n );\n\n const toggleSidebar = useCallback(() => {\n if (isMobile) {\n setOpenMobile((prev) => !prev);\n } else {\n setOpen((prev: boolean) => !prev);\n }\n }, [isMobile, setOpen]);\n\n const state = open ? \"expanded\" : \"collapsed\";\n\n const sidebarWidthValue = resizable ? `${width}px` : SIDEBAR_WIDTH;\n\n const contextValue = useMemo<SidebarContextValue>(\n () => ({\n state,\n open,\n setOpen,\n openMobile,\n setOpenMobile,\n isMobile,\n toggleSidebar,\n variant,\n side,\n collapsible,\n width,\n resizable,\n minWidth,\n maxWidth,\n isResizing,\n setIsResizing,\n setWidth,\n }),\n [\n state,\n open,\n setOpen,\n openMobile,\n setOpenMobile,\n isMobile,\n toggleSidebar,\n variant,\n side,\n collapsible,\n width,\n resizable,\n minWidth,\n maxWidth,\n isResizing,\n setIsResizing,\n setWidth,\n ],\n );\n\n return (\n <SidebarContext.Provider value={contextValue}>\n <div\n data-sidebar-wrapper=\"\"\n data-state={state}\n data-side={side}\n style={\n {\n \"--sidebar-width\": sidebarWidthValue,\n \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n ...style,\n } as CSSProperties\n }\n className={cn(\n \"group/sidebar-wrapper flex min-h-svh w-full\",\n \"has-data-[variant=inset]:bg-kumo-recessed\",\n isResizing && \"select-none\",\n className,\n )}\n >\n {children}\n </div>\n </SidebarContext.Provider>\n );\n}\n\nSidebarProvider.displayName = \"Sidebar.Provider\";\n\n// ============================================================================\n// Sidebar Root\n// ============================================================================\n\nexport interface SidebarRootProps extends ComponentPropsWithoutRef<\"aside\"> {\n /** Additional CSS classes for the sidebar element. */\n className?: string;\n /** Sidebar content — Header, Content, Footer, etc. */\n children: ReactNode;\n}\n\n/**\n * Main sidebar container. Renders as `<aside>` on desktop, Dialog sheet on mobile.\n * Must be used inside `Sidebar.Provider`.\n *\n * @example\n * ```tsx\n * <Sidebar.Provider>\n * <Sidebar>\n * <Sidebar.Header>...</Sidebar.Header>\n * <Sidebar.Content>...</Sidebar.Content>\n * <Sidebar.Footer>...</Sidebar.Footer>\n * </Sidebar>\n * </Sidebar.Provider>\n * ```\n */\nconst SidebarRoot = forwardRef<HTMLElement, SidebarRootProps>(\n ({ className, children, ...props }, ref) => {\n const {\n state,\n isMobile,\n openMobile,\n setOpenMobile,\n side,\n variant,\n collapsible,\n isResizing,\n resizable,\n width,\n } = useSidebar();\n\n if (collapsible === \"none\") {\n return (\n <aside\n ref={ref}\n data-state=\"expanded\"\n data-side={side}\n data-variant={variant}\n data-sidebar=\"sidebar\"\n style={{\n width: \"var(--sidebar-width)\",\n minWidth: \"var(--sidebar-width)\",\n maxWidth: \"var(--sidebar-width)\",\n }}\n className={cn(\n \"relative flex h-full shrink-0 grow-0 flex-col overflow-hidden bg-kumo-base text-kumo-default\",\n variant === \"sidebar\" &&\n (side === \"left\"\n ? \"border-r border-kumo-hairline\"\n : \"border-l border-kumo-hairline\"),\n variant === \"floating\" &&\n \"m-2 rounded-lg border border-kumo-hairline shadow-lg\",\n className,\n )}\n {...props}\n >\n {children}\n </aside>\n );\n }\n\n if (isMobile) {\n return (\n <DialogBase.Root open={openMobile} onOpenChange={setOpenMobile}>\n <DialogBase.Portal>\n <DialogBase.Backdrop className=\"fixed inset-0 z-50 bg-black/50 transition-opacity duration-200 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0\" />\n <DialogBase.Popup\n className={cn(\n \"fixed inset-y-0 z-50 flex w-[--sidebar-width] flex-col bg-kumo-base p-0\",\n \"duration-200 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0\",\n side === \"left\" &&\n \"left-0 data-[ending-style]:-translate-x-full data-[starting-style]:-translate-x-full\",\n side === \"right\" &&\n \"right-0 data-[ending-style]:translate-x-full data-[starting-style]:translate-x-full\",\n )}\n style={\n {\n \"--sidebar-width\": SIDEBAR_WIDTH,\n transitionProperty: \"transform, opacity\",\n transitionTimingFunction:\n \"var(--default-transition-timing-function)\",\n } as CSSProperties\n }\n >\n <div\n data-sidebar=\"sidebar\"\n data-mobile=\"true\"\n className={cn(\n \"flex h-full w-full flex-col bg-kumo-base text-kumo-default\",\n className,\n )}\n >\n {children}\n </div>\n </DialogBase.Popup>\n </DialogBase.Portal>\n </DialogBase.Root>\n );\n }\n\n // Resolve the target width from CSS variables or literal values\n const collapsedWidth =\n collapsible === \"icon\" ? \"var(--sidebar-width-icon)\" : \"0px\";\n const expandedWidth = resizable ? `${width}px` : \"var(--sidebar-width)\";\n const targetWidth = state === \"expanded\" ? expandedWidth : collapsedWidth;\n\n return (\n <aside\n ref={ref}\n data-state={state}\n data-side={side}\n data-variant={variant}\n data-collapsible={collapsible}\n data-sidebar=\"sidebar\"\n style={{ width: targetWidth }}\n className={cn(\n \"group/sidebar relative flex h-full shrink-0 grow-0 flex-col\",\n // overflow-hidden makes flex min-width resolve to 0 (per spec),\n // preventing children from pushing the sidebar wider than its width\n \"min-w-0 overflow-hidden whitespace-nowrap\",\n \"bg-kumo-base text-kumo-default\",\n // Transition width — matches production SidebarNav curve exactly\n \"transition-[width] duration-250 ease-[cubic-bezier(0.77,0,0.175,1)] will-change-[width]\",\n \"motion-reduce:transition-none\",\n // Disable transition during resize drag\n isResizing && \"transition-none!\",\n variant === \"sidebar\" &&\n (side === \"left\"\n ? \"border-r border-kumo-hairline\"\n : \"border-l border-kumo-hairline\"),\n variant === \"floating\" &&\n \"m-2 rounded-lg border border-kumo-hairline shadow-lg\",\n className,\n )}\n {...props}\n >\n {/* TooltipProvider groups all collapsed-state tooltips so hovering\n between icons shows tooltips instantly (no repeated delay). */}\n <TooltipProvider>{children}</TooltipProvider>\n </aside>\n );\n },\n);\n\nSidebarRoot.displayName = \"Sidebar\";\n\n// ============================================================================\n// Sidebar Header\n// ============================================================================\n\n/**\n * Top section of the sidebar. Typically contains a logo, title, and action button.\n *\n * @example\n * ```tsx\n * <Sidebar.Header>\n * <CloudflareLogo />\n * <span>Design Engineering</span>\n * <Button shape=\"square\" icon={CaretUpDownIcon} aria-label=\"Switch\" />\n * </Sidebar.Header>\n * ```\n */\nconst SidebarHeader = forwardRef<\n HTMLDivElement,\n ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n data-sidebar=\"header\"\n className={cn(\n \"flex items-center gap-2 border-b border-kumo-hairline px-2 py-3\",\n \"overflow-hidden\",\n // Collapsed: just remove border, keep same height\n \"group-data-[state=collapsed]/sidebar:border-b-0\",\n className,\n )}\n {...props}\n />\n));\n\nSidebarHeader.displayName = \"Sidebar.Header\";\n\n// ============================================================================\n// Sidebar Content\n// ============================================================================\n\n/**\n * Scrollable middle section of the sidebar. Contains nav groups and menus.\n *\n * @example\n * ```tsx\n * <Sidebar.Content>\n * <Sidebar.Group>...</Sidebar.Group>\n * </Sidebar.Content>\n * ```\n */\nconst SidebarContent = forwardRef<\n HTMLDivElement,\n ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n data-sidebar=\"content\"\n className={cn(\n \"flex min-w-0 flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden px-2 py-2\",\n // Collapsed: flatten spacing so icons are evenly spaced\n \"group-data-[state=collapsed]/sidebar:gap-0 group-data-[state=collapsed]/sidebar:py-0\",\n \"group-data-[state=collapsed]/sidebar:overflow-x-hidden\",\n className,\n )}\n {...props}\n />\n));\n\nSidebarContent.displayName = \"Sidebar.Content\";\n\n// ============================================================================\n// Sidebar Footer\n// ============================================================================\n\n/**\n * Bottom-pinned section of the sidebar. Typically contains toggle button and help actions.\n *\n * @example\n * ```tsx\n * <Sidebar.Footer>\n * <Sidebar.Trigger />\n * <Button shape=\"square\" icon={InfoIcon} aria-label=\"Help\" />\n * </Sidebar.Footer>\n * ```\n */\nconst SidebarFooter = forwardRef<\n HTMLDivElement,\n ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n data-sidebar=\"footer\"\n className={cn(\n \"flex min-w-0 flex-col gap-2 border-t border-kumo-hairline px-2 py-2\",\n // Collapsed: remove border, tighten padding\n \"group-data-[state=collapsed]/sidebar:border-t-0 group-data-[state=collapsed]/sidebar:py-1\",\n className,\n )}\n {...props}\n />\n));\n\nSidebarFooter.displayName = \"Sidebar.Footer\";\n\n// ============================================================================\n// Sidebar Group\n// ============================================================================\n\n/** Context to signal children they're inside a collapsible group and provide open state. */\ninterface SidebarGroupCollapsibleContextValue {\n isCollapsible: boolean;\n isOpen: boolean;\n}\nconst SidebarGroupCollapsibleContext =\n createContext<SidebarGroupCollapsibleContextValue>({\n isCollapsible: false,\n isOpen: true,\n });\n\nexport interface SidebarGroupProps extends ComponentPropsWithoutRef<\"div\"> {\n /** When true, the group can be expanded/collapsed via its label. @default false */\n collapsible?: boolean;\n /** Initial open state when collapsible and uncontrolled. @default true */\n defaultOpen?: boolean;\n /** Controlled open state (collapsible mode only). */\n open?: boolean;\n /** Callback when open state changes (collapsible mode only). */\n onOpenChange?: (open: boolean) => void;\n}\n\n/**\n * Groups related menu items with an optional label.\n * When `collapsible` is set, wraps content with Base UI Collapsible for\n * animated expand/collapse via the group label.\n *\n * @example Non-collapsible group\n * ```tsx\n * <Sidebar.Group>\n * <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>\n * <Sidebar.Menu>...</Sidebar.Menu>\n * </Sidebar.Group>\n * ```\n *\n * @example Collapsible group (requires GroupContent for animation)\n * ```tsx\n * <Sidebar.Group collapsible defaultOpen>\n * <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>\n * <Sidebar.GroupContent>\n * <Sidebar.Menu>...</Sidebar.Menu>\n * </Sidebar.GroupContent>\n * </Sidebar.Group>\n * ```\n */\nconst SidebarGroup = forwardRef<HTMLDivElement, SidebarGroupProps>(\n (\n {\n className,\n collapsible = false,\n defaultOpen = true,\n open: openProp,\n onOpenChange,\n children,\n ...props\n },\n ref,\n ) => {\n // Track internal open state for uncontrolled mode\n const [internalOpen, setInternalOpen] = useState(defaultOpen);\n const isOpen = openProp ?? internalOpen;\n\n const handleOpenChange = useCallback(\n (newOpen: boolean) => {\n setInternalOpen(newOpen);\n onOpenChange?.(newOpen);\n },\n [onOpenChange],\n );\n\n const contextValue = useMemo(\n () => ({ isCollapsible: collapsible, isOpen }),\n [collapsible, isOpen],\n );\n\n const content = (\n <div\n ref={ref}\n data-sidebar=\"group\"\n className={cn(\n \"flex min-w-0 flex-col gap-0.5\",\n // Collapsed: remove internal gap so icons stack uniformly\n \"group-data-[state=collapsed]/sidebar:gap-0\",\n className,\n )}\n {...props}\n >\n {children}\n </div>\n );\n\n if (!collapsible) {\n return (\n <SidebarGroupCollapsibleContext.Provider value={contextValue}>\n {content}\n </SidebarGroupCollapsibleContext.Provider>\n );\n }\n\n return (\n <SidebarGroupCollapsibleContext.Provider value={contextValue}>\n <CollapsibleBase.Root\n defaultOpen={defaultOpen}\n open={openProp}\n onOpenChange={handleOpenChange}\n className=\"min-w-0\"\n >\n {content}\n </CollapsibleBase.Root>\n </SidebarGroupCollapsibleContext.Provider>\n );\n },\n);\n\nSidebarGroup.displayName = \"Sidebar.Group\";\n\n// ============================================================================\n// Sidebar GroupLabel\n// ============================================================================\n\n/**\n * Section label for a sidebar group (e.g., \"Build\", \"Protect & Connect\").\n * Hidden when the sidebar is collapsed to icon-only mode.\n *\n * When used inside a collapsible `Sidebar.Group`, renders as a\n * `Collapsible.Trigger` with an auto-rotating chevron.\n *\n * @example\n * ```tsx\n * <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>\n * ```\n */\nconst SidebarGroupLabel = forwardRef<\n HTMLDivElement,\n ComponentPropsWithoutRef<\"div\">\n>(({ className, children, ...props }, ref) => {\n const { isCollapsible } = useContext(SidebarGroupCollapsibleContext);\n\n if (isCollapsible) {\n return (\n <CollapsibleBase.Trigger\n ref={ref as React.Ref<HTMLButtonElement>}\n data-sidebar=\"group-label\"\n className={cn(\n \"group/group-label flex w-full cursor-pointer items-center px-3 py-1 text-xs font-medium text-kumo-subtle\",\n \"group-data-[state=collapsed]/sidebar:hidden\",\n className,\n )}\n {...(props as ComponentPropsWithoutRef<\"button\">)}\n >\n <span className=\"flex-1 truncate text-left\">{children}</span>\n <CaretRightIcon\n className={cn(\n \"ml-auto size-3 shrink-0 text-kumo-subtle transition-transform duration-200\",\n \"group-data-[panel-open]/group-label:rotate-90\",\n )}\n />\n </CollapsibleBase.Trigger>\n );\n }\n\n return (\n <div\n ref={ref}\n data-sidebar=\"group-label\"\n className={cn(\n \"truncate px-3 py-1 text-xs font-medium text-kumo-subtle\",\n \"group-data-[state=collapsed]/sidebar:hidden\",\n className,\n )}\n {...props}\n >\n {children}\n </div>\n );\n});\n\nSidebarGroupLabel.displayName = \"Sidebar.GroupLabel\";\n\n// ============================================================================\n// Sidebar GroupContent\n// ============================================================================\n\n/**\n * Animation wrapper for collapsible group content. Uses CSS grid-rows\n * for smooth height transitions when the group is expanded/collapsed.\n *\n * **Only needed for collapsible groups.** For non-collapsible groups,\n * place `Menu` directly inside `Group` — no wrapper required.\n *\n * @example Collapsible group (GroupContent required)\n * ```tsx\n * <Sidebar.Group collapsible defaultOpen>\n * <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>\n * <Sidebar.GroupContent>\n * <Sidebar.Menu>...</Sidebar.Menu>\n * </Sidebar.GroupContent>\n * </Sidebar.Group>\n * ```\n *\n * @example Non-collapsible group (no GroupContent needed)\n * ```tsx\n * <Sidebar.Group>\n * <Sidebar.GroupLabel>Overview</Sidebar.GroupLabel>\n * <Sidebar.Menu>...</Sidebar.Menu>\n * </Sidebar.Group>\n * ```\n */\nconst SidebarGroupContent = forwardRef<\n HTMLDivElement,\n ComponentPropsWithoutRef<\"div\">\n>(({ className, children, ...props }, ref) => {\n const { isCollapsible, isOpen } = useContext(SidebarGroupCollapsibleContext);\n\n if (isCollapsible) {\n return (\n <div\n ref={ref}\n data-sidebar=\"group-content\"\n className={cn(\n \"grid\",\n // Animate height via grid-rows — matches production NavGroup pattern\n \"transition-[grid-template-rows] duration-250 ease-[cubic-bezier(0.77,0,0.175,1)]\",\n \"motion-reduce:transition-none\",\n // Default: collapsed\n \"grid-rows-[0fr]\",\n // When sidebar is expanded, respect group open/close state\n isOpen\n ? \"group-data-[state=expanded]/sidebar:grid-rows-[1fr]\"\n : \"group-data-[state=expanded]/sidebar:grid-rows-[0fr]\",\n className,\n )}\n {...props}\n >\n <div className=\"overflow-hidden\">{children}</div>\n </div>\n );\n }\n\n return (\n <div\n ref={ref}\n data-sidebar=\"group-content\"\n className={cn(\"flex flex-col\", className)}\n {...props}\n >\n {children}\n </div>\n );\n});\n\nSidebarGroupContent.displayName = \"Sidebar.GroupContent\";\n\n// ============================================================================\n// MenuItem / MenuSubItem auto-wrap contexts\n// ============================================================================\n\n/**\n * When `true`, indicates the component is already wrapped in a `MenuItem` `<li>`.\n * `MenuButton` checks this: if `false`, it auto-wraps itself in an `<li>`.\n */\nconst MenuItemContext = createContext(false);\n\n/**\n * When `true`, indicates the component is already wrapped in a `MenuSubItem` `<li>`.\n * `MenuSubButton` checks this: if `false`, it auto-wraps itself in an `<li>`.\n */\nconst MenuSubItemContext = createContext(false);\n\n// ============================================================================\n// Sidebar Menu\n// ============================================================================\n\n/**\n * Navigation menu list. Renders as `<ul>`.\n *\n * `MenuButton` auto-wraps in `<li>` so `MenuItem` is optional for simple items.\n *\n * @example Simple usage\n * ```tsx\n * <Sidebar.Menu>\n * <Sidebar.MenuButton icon={HouseIcon} active>Account home</Sidebar.MenuButton>\n * <Sidebar.MenuButton icon={GlobeIcon}>Domains</Sidebar.MenuButton>\n * </Sidebar.Menu>\n * ```\n *\n * @example With explicit MenuItem (needed for MenuAction sibling)\n * ```tsx\n * <Sidebar.Menu>\n * <Sidebar.MenuItem>\n * <Sidebar.MenuButton icon={GearIcon}>Settings</Sidebar.MenuButton>\n * <Sidebar.MenuAction><PencilIcon /></Sidebar.MenuAction>\n * </Sidebar.MenuItem>\n * </Sidebar.Menu>\n * ```\n */\nconst SidebarMenu = forwardRef<\n HTMLUListElement,\n ComponentPropsWithoutRef<\"ul\">\n>(({ className, ...props }, ref) => (\n <ul\n ref={ref}\n data-sidebar=\"menu\"\n className={cn(\n \"m-0 flex min-w-0 list-none flex-col gap-0.5 p-0\",\n \"group-data-[state=collapsed]/sidebar:gap-0\",\n className,\n )}\n {...props}\n />\n));\n\nSidebarMenu.displayName = \"Sidebar.Menu\";\n\n// ============================================================================\n// Sidebar MenuItem\n// ============================================================================\n\n/**\n * Individual menu list item. Renders as `<li>`.\n *\n * **Optional when using `MenuButton` directly** — `MenuButton` auto-wraps\n * itself in a `<li>` when not already inside a `MenuItem`. Use `MenuItem`\n * explicitly when you need to place siblings (e.g., `MenuAction`) alongside\n * a `MenuButton`.\n *\n * @example Explicit usage (needed for MenuAction sibling)\n * ```tsx\n * <Sidebar.MenuItem>\n * <Sidebar.MenuButton icon={GearIcon}>Settings</Sidebar.MenuButton>\n * <Sidebar.MenuAction><PencilIcon /></Sidebar.MenuAction>\n * </Sidebar.MenuItem>\n * ```\n */\nconst SidebarMenuItem = forwardRef<\n HTMLLIElement,\n ComponentPropsWithoutRef<\"li\">\n>(({ className, children, ...props }, ref) => (\n <MenuItemContext.Provider value={true}>\n <li\n ref={ref}\n data-sidebar=\"menu-item\"\n className={cn(\"relative\", className)}\n {...props}\n >\n {children}\n </li>\n </MenuItemContext.Provider>\n));\n\nSidebarMenuItem.displayName = \"Sidebar.MenuItem\";\n\n// ============================================================================\n// Sidebar MenuButton\n// ============================================================================\n\nexport type SidebarMenuButtonSize = \"base\" | \"sm\";\n\nexport interface SidebarMenuButtonProps extends Omit<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n \"className\" | \"children\"\n> {\n icon?: React.ComponentType<{ className?: string }> | React.ReactNode;\n active?: boolean;\n /**\n * Button size.\n * - `\"base\"` — Standard nav item\n * - `\"sm\"` — Compact nav item\n * @default \"base\"\n */\n size?: SidebarMenuButtonSize;\n href?: string;\n tooltip?: string;\n className?: string;\n children?: ReactNode;\n}\n\n/**\n * Primary interactive element inside a menu item. Renders as a `<button>` or link.\n * Supports icons, active state, and auto-tooltip when the sidebar is collapsed.\n *\n * **Auto-wraps in `<li>`** when not already inside a `Sidebar.MenuItem`.\n * Use `MenuItem` explicitly only when you need siblings (e.g., `MenuAction`).\n *\n * When used as a `Collapsible.Trigger` via `render` prop, the expand/collapse chevron\n * auto-rotates thanks to Base UI's `data-panel-open` attribute combined with\n * `group/menu-button` CSS grouping.\n *\n * @example Simple usage (auto-wrapped in `<li>`)\n * ```tsx\n * <Sidebar.Menu>\n * <Sidebar.MenuButton icon={GlobeIcon} active>Domains</Sidebar.MenuButton>\n * <Sidebar.MenuButton icon={ClockIcon} href=\"/recents\">Recents</Sidebar.MenuButton>\n * </Sidebar.Menu>\n * ```\n *\n * @example With MenuAction sibling (explicit MenuItem needed)\n * ```tsx\n * <Sidebar.MenuItem>\n * <Sidebar.MenuButton icon={GearIcon}>Settings</Sidebar.MenuButton>\n * <Sidebar.MenuAction><PencilIcon /></Sidebar.MenuAction>\n * </Sidebar.MenuItem>\n * ```\n */\nconst SidebarMenuButton = forwardRef<HTMLButtonElement, SidebarMenuButtonProps>(\n (\n {\n className,\n icon: IconProp,\n active = false,\n size = \"base\",\n href,\n tooltip,\n children,\n ...props\n },\n ref,\n ) => {\n const { state } = useSidebar();\n const LinkComponent = useLinkComponent();\n const isInsideMenuItem = useContext(MenuItemContext);\n\n // Render icon — supports both component types and React elements\n const iconNode = (() => {\n if (!IconProp) return null;\n if (React.isValidElement(IconProp)) return IconProp;\n const Comp = IconProp as React.ComponentType<{ className?: string }>;\n return (\n <Comp\n className={cn(\"shrink-0\", size === \"base\" ? \"size-4\" : \"size-3.5\")}\n />\n );\n })();\n\n const content = (\n <>\n {iconNode}\n <span\n className={cn(\n \"flex flex-1 items-center min-w-0 text-left overflow-hidden\",\n \"group-data-[state=collapsed]/sidebar:hidden\",\n )}\n >\n {children}\n </span>\n </>\n );\n\n const buttonClasses = cn(\n // Layout\n \"group/menu-button flex w-full min-w-0 items-center gap-2 rounded-lg cursor-pointer\",\n // Sizing\n size === \"base\" && \"min-h-[34px] px-3 py-1.5 text-sm font-medium\",\n size === \"sm\" && \"min-h-[28px] px-2 py-1 text-sm\",\n // Default state — transition includes padding so collapsed centering animates smoothly\n \"text-kumo-default\",\n \"transition-[color,background-color,padding] duration-0 ease-[cubic-bezier(0.77,0,0.175,1)]\",\n // Icon color\n \"[&>svg]:text-kumo-subtle\",\n !active && \"hover:bg-kumo-tint\",\n // Active state\n active && \"bg-kumo-tint\",\n // When a child sub-button is active, don't show active styling on the parent trigger\n \"has-[[data-active]]:bg-transparent has-[[data-active]]:hover:bg-kumo-tint\",\n // Focus\n \"focus-visible:ring-2 focus-visible:ring-kumo-brand\",\n // Collapsed: px-2 centers the icon (48px sidebar − 16px content padding = 32px;\n // 32px − 2×8px padding = 16px = icon size). Padding transition keeps it smooth.\n \"group-data-[state=collapsed]/sidebar:px-2\",\n className,\n );\n\n let button: React.ReactNode;\n\n if (href) {\n button = (\n <LinkComponent\n ref={ref as React.Ref<HTMLAnchorElement>}\n className={cn(buttonClasses, \"no-underline!\")}\n href={href}\n to={href}\n data-active={active || undefined}\n data-sidebar=\"menu-button\"\n data-size={size}\n onClick={\n props.onClick as unknown as React.MouseEventHandler<HTMLAnchorElement>\n }\n >\n {content}\n </LinkComponent>\n );\n } else {\n button = (\n <button\n ref={ref}\n type=\"button\"\n className={buttonClasses}\n data-active={active || undefined}\n data-sidebar=\"menu-button\"\n data-size={size}\n {...props}\n >\n {content}\n </button>\n );\n }\n\n // Wrap in Tooltip when collapsed and tooltip text is provided.\n // Use render prop so Tooltip merges onto the button/link\n // instead of wrapping it in another <button> (which would cause invalid nesting).\n if (state === \"collapsed\" && tooltip) {\n button = <Tooltip content={tooltip} side=\"right\" render={button} />;\n }\n\n // Auto-wrap in <li> when not already inside a MenuItem\n if (!isInsideMenuItem) {\n return (\n <li data-sidebar=\"menu-item\" className=\"relative\">\n {button}\n </li>\n );\n }\n\n return button;\n },\n);\n\nSidebarMenuButton.displayName = \"Sidebar.MenuButton\";\n\n// ============================================================================\n// Sidebar MenuAction\n// ============================================================================\n\n/**\n * Right-aligned action button inside a menu item (e.g., settings gear, plus icon).\n * Positioned absolutely so it overlays the menu button.\n * Hidden when the sidebar is collapsed.\n */\nconst SidebarMenuAction = forwardRef<\n HTMLButtonElement,\n ComponentPropsWithoutRef<\"button\">\n>(({ className, ...props }, ref) => (\n <button\n ref={ref}\n type=\"button\"\n data-sidebar=\"menu-action\"\n className={cn(\n \"absolute right-1.5 top-1/2 flex -translate-y-1/2 items-center justify-center rounded-md p-1\",\n \"text-kumo-subtle hover:bg-kumo-overlay\",\n \"focus-visible:ring-2 focus-visible:ring-kumo-brand\",\n \"transition-colors duration-150\",\n \"group-data-[state=collapsed]/sidebar:hidden\",\n className,\n )}\n {...props}\n />\n));\n\nSidebarMenuAction.displayName = \"Sidebar.MenuAction\";\n\n// ============================================================================\n// Sidebar MenuBadge\n// ============================================================================\n\n/**\n * Badge pill displayed inside a menu button (e.g., \"Beta\", \"New\").\n * Uses dashed border styling matching the Cloudflare design system.\n *\n * @example\n * ```tsx\n * <Sidebar.MenuSubButton>\n * Containers\n * <Sidebar.MenuBadge>Beta</Sidebar.MenuBadge>\n * </Sidebar.MenuSubButton>\n * ```\n */\nconst SidebarMenuBadge = forwardRef<\n HTMLSpanElement,\n ComponentPropsWithoutRef<\"span\">\n>(({ className, ...props }, ref) => (\n <span\n ref={ref}\n data-sidebar=\"menu-badge\"\n className={cn(\n \"inline-flex shrink-0 items-center rounded-full border border-dashed border-kumo-hairline\",\n \"select-none px-1.5 py-0.5 text-[11px]/none font-medium text-kumo-subtle\",\n // Hidden when collapsed\n \"group-data-[state=collapsed]/sidebar:hidden\",\n className,\n )}\n {...props}\n />\n));\n\nSidebarMenuBadge.displayName = \"Sidebar.MenuBadge\";\n\n// ============================================================================\n// Sidebar MenuSub\n// ============================================================================\n\n/**\n * Indented sub-menu container for child navigation items. Renders as `<ul>` with\n * a left border accent for visual hierarchy.\n *\n * `MenuSubButton` auto-wraps in `<li>` so `MenuSubItem` is optional.\n *\n * @example\n * ```tsx\n * <Sidebar.MenuSub>\n * <Sidebar.MenuSubButton active>Workers & Pages</Sidebar.MenuSubButton>\n * <Sidebar.MenuSubButton>Durable Objects</Sidebar.MenuSubButton>\n * </Sidebar.MenuSub>\n * ```\n */\nconst SidebarMenuSub = forwardRef<\n HTMLUListElement,\n ComponentPropsWithoutRef<\"ul\">\n>(({ className, ...props }, ref) => (\n <ul\n ref={ref}\n data-sidebar=\"menu-sub\"\n className={cn(\n \"m-0 ml-3.5 flex min-w-0 list-none flex-col gap-0.5 border-l border-kumo-hairline p-0 pl-2.5\",\n // Hidden when collapsed\n \"group-data-[state=collapsed]/sidebar:hidden\",\n className,\n )}\n {...props}\n />\n));\n\nSidebarMenuSub.displayName = \"Sidebar.MenuSub\";\n\n// ============================================================================\n// Sidebar MenuSubItem\n// ============================================================================\n\n/**\n * Individual item inside a sub-menu. Renders as `<li>`.\n *\n * **Optional when using `MenuSubButton` directly** — `MenuSubButton` auto-wraps\n * itself in a `<li>` when not already inside a `MenuSubItem`.\n */\nconst SidebarMenuSubItem = forwardRef<\n HTMLLIElement,\n ComponentPropsWithoutRef<\"li\">\n>(({ className, children, ...props }, ref) => (\n <MenuSubItemContext.Provider value={true}>\n <li\n ref={ref}\n data-sidebar=\"menu-sub-item\"\n className={cn(\"relative\", className)}\n {...props}\n >\n {children}\n </li>\n </MenuSubItemContext.Provider>\n));\n\nSidebarMenuSubItem.displayName = \"Sidebar.MenuSubItem\";\n\n// ============================================================================\n// Sidebar MenuSubButton\n// ============================================================================\n\nexport interface SidebarMenuSubButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n /** Marks this sub-item as currently active/selected. @default false */\n active?: boolean;\n /** Navigation URL. When set, renders as a link via LinkProvider. */\n href?: string;\n}\n\n/**\n * Button inside a sub-menu item. Does not render an icon (sub-items are\n * indented instead). Supports active state and link rendering.\n *\n * **Auto-wraps in `<li>`** when not already inside a `Sidebar.MenuSubItem`.\n *\n * @example Simple usage (auto-wrapped in `<li>`)\n * ```tsx\n * <Sidebar.MenuSub>\n * <Sidebar.MenuSubButton active>Workers & Pages</Sidebar.MenuSubButton>\n * <Sidebar.MenuSubButton href=\"/observability\">Observability</Sidebar.MenuSubButton>\n * </Sidebar.MenuSub>\n * ```\n */\nconst SidebarMenuSubButton = forwardRef<\n HTMLButtonElement,\n SidebarMenuSubButtonProps\n>(({ className, active = false, href, children, ...props }, ref) => {\n const LinkComponent = useLinkComponent();\n const isInsideMenuSubItem = useContext(MenuSubItemContext);\n\n const buttonClasses = cn(\n \"flex w-full min-w-0 items-center gap-2 rounded-lg min-h-[34px] px-3 py-1 text-sm font-medium\",\n \"text-kumo-default transition-colors duration-150\",\n !active && \"hover:bg-kumo-tint\",\n active && \"bg-kumo-tint\",\n \"focus-visible:ring-2 focus-visible:ring-kumo-brand\",\n className,\n );\n\n const content = <span className=\"flex-1 truncate text-left\">{children}</span>;\n\n let button: React.ReactNode;\n\n if (href) {\n button = (\n <LinkComponent\n ref={ref as React.Ref<HTMLAnchorElement>}\n className={cn(buttonClasses, \"no-underline!\")}\n href={href}\n to={href}\n data-active={active || undefined}\n data-sidebar=\"menu-sub-button\"\n onClick={\n props.onClick as unknown as React.MouseEventHandler<HTMLAnchorElement>\n }\n >\n {content}\n </LinkComponent>\n );\n } else {\n button = (\n <button\n ref={ref}\n type=\"button\"\n className={buttonClasses}\n data-active={active || undefined}\n data-sidebar=\"menu-sub-button\"\n {...props}\n >\n {content}\n </button>\n );\n }\n\n // Auto-wrap in <li> when not already inside a MenuSubItem\n if (!isInsideMenuSubItem) {\n return (\n <li data-sidebar=\"menu-sub-item\" className=\"relative\">\n {button}\n </li>\n );\n }\n\n return button;\n});\n\nSidebarMenuSubButton.displayName = \"Sidebar.MenuSubButton\";\n\n// ============================================================================\n// Sidebar Separator\n// ============================================================================\n\n/**\n * Horizontal divider line between sidebar sections.\n */\nconst SidebarSeparator = forwardRef<\n HTMLHRElement,\n ComponentPropsWithoutRef<\"hr\">\n>(({ className, ...props }, ref) => (\n <hr\n ref={ref}\n data-sidebar=\"separator\"\n className={cn(\"mx-2 min-h-px h-px border-0 bg-kumo-hairline\", className)}\n {...props}\n />\n));\n\nSidebarSeparator.displayName = \"Sidebar.Separator\";\n\n// ============================================================================\n// Sidebar Input\n// ============================================================================\n\nexport interface SidebarInputProps extends ComponentPropsWithoutRef<\"button\"> {\n /** Placeholder text displayed inside the search trigger. @default \"Search...\" */\n placeholder?: string;\n /** Keyboard shortcut hint (e.g., \"⌘K\"). */\n shortcut?: string;\n}\n\n/**\n * Search trigger button styled as an input. Typically opens a command palette.\n *\n * @example\n * ```tsx\n * <Sidebar.Input placeholder=\"Quick search...\" shortcut=\"⌘K\" onClick={openSearch} />\n * ```\n */\nconst SidebarInput = forwardRef<HTMLButtonElement, SidebarInputProps>(\n (\n { className, placeholder = \"Search...\", shortcut, children, ...props },\n ref,\n ) => (\n <button\n ref={ref}\n type=\"button\"\n data-sidebar=\"input\"\n className={cn(\n \"flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm\",\n \"bg-kumo-base text-kumo-subtle ring ring-kumo-hairline\",\n \"transition-[color,background-color,padding,box-shadow] duration-250 ease-[cubic-bezier(0.77,0,0.175,1)]\",\n \"hover:bg-kumo-overlay\",\n \"focus-visible:ring-2 focus-visible:ring-kumo-brand\",\n // Collapsed: icon-only, padding centers icon, ring fades via box-shadow transition\n \"group-data-[state=collapsed]/sidebar:px-2 group-data-[state=collapsed]/sidebar:ring-0\",\n className,\n )}\n {...props}\n >\n <MagnifyingGlassIcon className=\"size-4 shrink-0 text-kumo-subtle\" />\n <span className=\"flex-1 truncate text-left group-data-[state=collapsed]/sidebar:hidden\">\n {children ?? placeholder}\n </span>\n {shortcut && (\n <kbd className=\"ml-auto font-sans text-xs text-kumo-subtle group-data-[state=collapsed]/sidebar:hidden\">\n {shortcut}\n </kbd>\n )}\n </button>\n ),\n);\n\nSidebarInput.displayName = \"Sidebar.Input\";\n\n// ============================================================================\n// Sidebar Trigger\n// ============================================================================\n\n/**\n * Button that toggles the sidebar open/collapsed. Uses `toggleSidebar()` from context.\n * Defaults to a `SidebarSimpleIcon`, left-aligned.\n *\n * @example\n * ```tsx\n * <Sidebar.Trigger />\n * <Sidebar.Trigger><PanelLeftIcon className=\"size-5\" /></Sidebar.Trigger>\n * ```\n */\nconst SidebarTrigger = forwardRef<\n HTMLButtonElement,\n ComponentPropsWithoutRef<\"button\">\n>(({ className, children, onClick, ...props }, ref) => {\n const { toggleSidebar } = useSidebar();\n\n return (\n <button\n ref={ref}\n type=\"button\"\n data-sidebar=\"trigger\"\n aria-label=\"Toggle sidebar\"\n className={cn(\n \"flex items-center rounded-md p-1.5\",\n \"text-kumo-subtle hover:text-kumo-default hover:bg-kumo-overlay\",\n \"focus-visible:ring-2 focus-visible:ring-kumo-brand\",\n \"transition-colors duration-150\",\n className,\n )}\n onClick={(e) => {\n onClick?.(e);\n toggleSidebar();\n }}\n {...props}\n >\n {children ?? <SidebarSimpleIcon className=\"size-5\" />}\n </button>\n );\n});\n\nSidebarTrigger.displayName = \"Sidebar.Trigger\";\n\n// ============================================================================\n// Sidebar Rail\n// ============================================================================\n\n/**\n * Invisible interaction strip at the sidebar edge for click-to-toggle.\n * Renders a thin hover-sensitive area between the sidebar and main content.\n */\nconst SidebarRail = forwardRef<\n HTMLButtonElement,\n ComponentPropsWithoutRef<\"button\">\n>(({ className, ...props }, ref) => {\n const { toggleSidebar } = useSidebar();\n\n return (\n <button\n ref={ref}\n type=\"button\"\n data-sidebar=\"rail\"\n aria-label=\"Toggle sidebar\"\n tabIndex={-1}\n className={cn(\n \"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 cursor-pointer transition-all\",\n \"after:absolute after:inset-y-0 after:left-1/2 after:w-0.5\",\n \"hover:after:bg-kumo-brand/20\",\n \"group-data-[side=left]/sidebar-wrapper:right-0\",\n \"group-data-[side=right]/sidebar-wrapper:left-0\",\n \"sm:flex\",\n className,\n )}\n onClick={toggleSidebar}\n {...props}\n />\n );\n});\n\nSidebarRail.displayName = \"Sidebar.Rail\";\n\n// ============================================================================\n// Sidebar ResizeHandle\n// ============================================================================\n\n/**\n * Drag handle for resizing the sidebar. Renders when `resizable` is true in\n * both expanded and collapsed states.\n *\n * - **Expanded → drag inward past `minWidth`**: auto-collapses to icon-only.\n * - **Collapsed → drag outward past `minWidth`**: auto-expands and begins\n * tracking width from `minWidth`.\n */\nconst SidebarResizeHandle = forwardRef<\n HTMLDivElement,\n ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => {\n const { side, resizable, setIsResizing, setWidth, setOpen, open, minWidth } =\n useSidebar();\n const startX = useRef(0);\n const startWidth = useRef(0);\n const wasCollapsed = useRef(false);\n\n if (!resizable) return null;\n\n const handlePointerDown = (e: React.PointerEvent<HTMLDivElement>) => {\n e.preventDefault();\n setIsResizing(true);\n startX.current = e.clientX;\n wasCollapsed.current = !open;\n\n const wrapper = (e.currentTarget as HTMLElement).closest(\n \"[data-sidebar-wrapper]\",\n );\n const sidebar = wrapper?.querySelector(\"[data-sidebar='sidebar']\");\n startWidth.current = sidebar?.getBoundingClientRect().width ?? 0;\n\n const cleanup = () => {\n setIsResizing(false);\n document.removeEventListener(\"pointermove\", handlePointerMove);\n document.removeEventListener(\"pointerup\", handlePointerUp);\n };\n\n const handlePointerMove = (moveEvent: PointerEvent) => {\n const delta =\n side === \"left\"\n ? moveEvent.clientX - startX.current\n : startX.current - moveEvent.clientX;\n const rawWidth = startWidth.current + delta;\n\n if (wasCollapsed.current) {\n // Dragging outward from collapsed — expand once past minWidth\n if (rawWidth >= minWidth) {\n wasCollapsed.current = false;\n setOpen(true);\n setWidth(rawWidth);\n }\n return;\n }\n\n // Dragging inward while expanded — collapse when below minWidth\n if (rawWidth < minWidth) {\n setOpen(false);\n wasCollapsed.current = true;\n return;\n }\n\n setWidth(rawWidth);\n };\n\n const handlePointerUp = () => {\n cleanup();\n };\n\n document.addEventListener(\"pointermove\", handlePointerMove);\n document.addEventListener(\"pointerup\", handlePointerUp);\n };\n\n return (\n <div\n ref={ref}\n data-sidebar=\"resize-handle\"\n className={cn(\n \"absolute inset-y-0 z-20 hidden w-1 cursor-col-resize transition-colors sm:block\",\n \"hover:bg-kumo-brand/30 active:bg-kumo-brand/50\",\n side === \"left\" && \"right-0\",\n side === \"right\" && \"left-0\",\n className,\n )}\n onPointerDown={handlePointerDown}\n {...props}\n />\n );\n});\n\nSidebarResizeHandle.displayName = \"Sidebar.ResizeHandle\";\n\n// ============================================================================\n// Sidebar MenuChevron\n// ============================================================================\n\n/**\n * Auto-rotating chevron for collapsible menu items. When the parent\n * `MenuButton` is used as a `Collapsible.Trigger`, Base UI sets\n * `data-panel-open` on the trigger — the chevron rotates automatically via CSS.\n *\n * @example\n * ```tsx\n * <Sidebar.CollapsibleTrigger render={<Sidebar.MenuButton icon={ComputeIcon} />}>\n * Compute\n * <Sidebar.MenuChevron />\n * </Sidebar.CollapsibleTrigger>\n * ```\n */\nfunction SidebarMenuChevron({ className }: { className?: string }) {\n return (\n <CaretRightIcon\n className={cn(\n \"ml-auto size-4 shrink-0 text-kumo-subtle transition-transform duration-200\",\n // Auto-rotate when inside an open Collapsible trigger\n \"group-data-[panel-open]/menu-button:rotate-90\",\n // Hidden when collapsed\n \"group-data-[state=collapsed]/sidebar:hidden\",\n className,\n )}\n />\n );\n}\n\nSidebarMenuChevron.displayName = \"Sidebar.MenuChevron\";\n\n// ============================================================================\n// Collapsible re-exports\n// ============================================================================\n\n/**\n * Base UI Collapsible.Root for sidebar sub-menu expand/collapse.\n * @see https://base-ui.com/react/components/collapsible\n */\nconst SidebarCollapsible = CollapsibleBase.Root;\n\n/**\n * Base UI Collapsible.Trigger for sidebar sub-menu toggle.\n * Use `render` prop to compose with `Sidebar.MenuButton`.\n *\n * @example\n * ```tsx\n * <Sidebar.CollapsibleTrigger render={<Sidebar.MenuButton icon={DiamondIcon} />}>\n * Compute\n * <Sidebar.MenuChevron />\n * </Sidebar.CollapsibleTrigger>\n * ```\n */\nconst SidebarCollapsibleTrigger = CollapsibleBase.Trigger;\n\n/**\n * Animated collapsible panel for sidebar sub-menu content.\n * Wraps Base UI `Collapsible.Panel` with a height transition driven by the\n * `--collapsible-panel-height` CSS variable that Base UI measures automatically.\n *\n * Uses `keepMounted` by default so the exit animation plays before removal.\n *\n * Animation flow:\n * - **Opening**: `data-starting-style` (h=0) → `data-open` (h=measured) — transition up\n * - **Closing**: `data-open` removed, measured height retained until `data-ending-style` (h=0) — transition down\n * - **Closed**: `data-closed` while hidden/mounted; no extra height override needed\n */\nconst SidebarCollapsibleContent = forwardRef<\n HTMLDivElement,\n ComponentPropsWithoutRef<typeof CollapsibleBase.Panel>\n>(({ className, keepMounted = true, ...props }, ref) => (\n <CollapsibleBase.Panel\n ref={ref}\n keepMounted={keepMounted}\n className={cn(\n \"overflow-hidden\",\n // Default: keep the measured height that Base UI writes to --collapsible-panel-height.\n // This must also remain true during the initial close frame so the exit transition has\n // a real starting height before data-ending-style flips it to 0.\n \"h-[var(--collapsible-panel-height)]\",\n // Transition height — matches production NavGroup easing\n \"transition-[height] duration-250 ease-[cubic-bezier(0.77,0,0.175,1)]\",\n \"motion-reduce:transition-none\",\n // Only force height 0 during the active enter/exit transition phases.\n // Applying h-0 for data-closed snaps the panel shut before Base UI adds\n // data-ending-style, skipping the collapse animation.\n \"data-[starting-style]:h-0 data-[ending-style]:h-0\",\n className,\n )}\n {...props}\n />\n));\n\nSidebarCollapsibleContent.displayName = \"Sidebar.CollapsibleContent\";\n\n// ============================================================================\n// Compound Component Export\n// ============================================================================\n\n/**\n * Sidebar — responsive navigation panel with expand/collapse support.\n *\n * Compound component: `Sidebar` (root `<aside>`), `.Provider`, `.Header`,\n * `.Content`, `.Footer`, `.Group`, `.GroupLabel`, `.GroupContent`,\n * `.Menu`, `.MenuItem`, `.MenuButton`, `.MenuAction`, `.MenuBadge`,\n * `.MenuSub`, `.MenuSubItem`, `.MenuSubButton`, `.Separator`,\n * `.Input`, `.Trigger`, `.Rail`, `.MenuChevron`,\n * `.Collapsible`, `.CollapsibleTrigger`, `.CollapsibleContent`.\n *\n * Built on `@base-ui/react/collapsible` + `@base-ui/react/dialog`.\n *\n * @example\n * ```tsx\n * <Sidebar.Provider defaultOpen>\n * <Sidebar>\n * <Sidebar.Content>\n * <Sidebar.Group>\n * <Sidebar.GroupLabel>Overview</Sidebar.GroupLabel>\n * <Sidebar.Menu>\n * <Sidebar.MenuButton icon={HouseIcon} active>Home</Sidebar.MenuButton>\n * <Sidebar.MenuButton icon={GlobeIcon}>Domains</Sidebar.MenuButton>\n * </Sidebar.Menu>\n * </Sidebar.Group>\n * </Sidebar.Content>\n * <Sidebar.Footer>\n * <Sidebar.Trigger />\n * </Sidebar.Footer>\n * </Sidebar>\n * </Sidebar.Provider>\n * ```\n */\nexport const Sidebar = Object.assign(SidebarRoot, {\n Provider: SidebarProvider,\n Header: SidebarHeader,\n Content: SidebarContent,\n Footer: SidebarFooter,\n Group: SidebarGroup,\n GroupLabel: SidebarGroupLabel,\n GroupContent: SidebarGroupContent,\n Menu: SidebarMenu,\n MenuItem: SidebarMenuItem,\n MenuButton: SidebarMenuButton,\n MenuAction: SidebarMenuAction,\n MenuBadge: SidebarMenuBadge,\n MenuSub: SidebarMenuSub,\n MenuSubItem: SidebarMenuSubItem,\n MenuSubButton: SidebarMenuSubButton,\n Separator: SidebarSeparator,\n Input: SidebarInput,\n Trigger: SidebarTrigger,\n Rail: SidebarRail,\n ResizeHandle: SidebarResizeHandle,\n MenuChevron: SidebarMenuChevron,\n Collapsible: SidebarCollapsible,\n CollapsibleTrigger: SidebarCollapsibleTrigger,\n CollapsibleContent: SidebarCollapsibleContent,\n});\n\nexport {\n SidebarProvider,\n SidebarRoot,\n SidebarHeader,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupLabel,\n SidebarGroupContent,\n SidebarMenu,\n SidebarMenuItem,\n SidebarMenuButton,\n SidebarMenuAction,\n SidebarMenuBadge,\n SidebarMenuSub,\n SidebarMenuSubItem,\n SidebarMenuSubButton,\n SidebarSeparator,\n SidebarInput,\n SidebarTrigger,\n SidebarRail,\n SidebarResizeHandle,\n SidebarMenuChevron,\n SidebarCollapsible,\n SidebarCollapsibleTrigger,\n SidebarCollapsibleContent,\n};\n"],"names":["KUMO_SIDEBAR_VARIANTS","KUMO_SIDEBAR_DEFAULT_VARIANTS","KUMO_SIDEBAR_STYLING","SIDEBAR_WIDTH","SIDEBAR_WIDTH_ICON","MOBILE_BREAKPOINT","useIsMobile","isMobile","setIsMobile","useState","useEffect","mql","onChange","SidebarContext","createContext","useSidebar","context","useContext","DEFAULT_WIDTH_PX","MIN_WIDTH_PX","MAX_WIDTH_PX","SidebarProvider","defaultOpen","openProp","setOpenProp","variant","side","collapsible","resizable","defaultWidth","minWidth","maxWidth","onWidthChange","children","className","style","openMobile","setOpenMobile","width","setWidthState","isResizing","setIsResizing","setWidth","useCallback","newWidth","clamped","_open","_setOpen","open","setOpen","value","next","toggleSidebar","prev","state","sidebarWidthValue","contextValue","useMemo","jsx","cn","SidebarRoot","forwardRef","props","ref","DialogBase.Root","jsxs","DialogBase.Portal","DialogBase.Backdrop","DialogBase.Popup","collapsedWidth","expandedWidth","TooltipProvider","SidebarHeader","SidebarContent","SidebarFooter","SidebarGroupCollapsibleContext","SidebarGroup","onOpenChange","internalOpen","setInternalOpen","isOpen","handleOpenChange","newOpen","content","CollapsibleBase.Root","SidebarGroupLabel","isCollapsible","CollapsibleBase.Trigger","CaretRightIcon","SidebarGroupContent","MenuItemContext","MenuSubItemContext","SidebarMenu","SidebarMenuItem","SidebarMenuButton","IconProp","active","size","href","tooltip","LinkComponent","useLinkComponent","isInsideMenuItem","iconNode","React","Fragment","buttonClasses","button","Tooltip","SidebarMenuAction","SidebarMenuBadge","SidebarMenuSub","SidebarMenuSubItem","SidebarMenuSubButton","isInsideMenuSubItem","SidebarSeparator","SidebarInput","placeholder","shortcut","MagnifyingGlassIcon","SidebarTrigger","onClick","e","SidebarSimpleIcon","SidebarRail","SidebarResizeHandle","startX","useRef","startWidth","wasCollapsed","handlePointerDown","sidebar","cleanup","handlePointerMove","handlePointerUp","moveEvent","delta","rawWidth","SidebarMenuChevron","SidebarCollapsible","SidebarCollapsibleTrigger","SidebarCollapsibleContent","keepMounted","CollapsibleBase.Panel","Sidebar"],"mappings":"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"}