@cloudflare/kumo 1.1.0 → 1.2.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.
Files changed (145) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/LICENSE +21 -0
  3. package/ai/component-registry.json +21 -2
  4. package/ai/component-registry.md +15 -2
  5. package/ai/schemas.ts +3 -1
  6. package/dist/.build-complete +1 -1
  7. package/dist/{breadcrumbs-B5SY2CWj.js → breadcrumbs-DyKi7BcP.js} +2 -2
  8. package/dist/{breadcrumbs-B5SY2CWj.js.map → breadcrumbs-DyKi7BcP.js.map} +1 -1
  9. package/dist/{button-E2-hZMZE.js → button-Bh96oxRL.js} +3 -3
  10. package/dist/{button-E2-hZMZE.js.map → button-Bh96oxRL.js.map} +1 -1
  11. package/dist/catalog.js +1 -1
  12. package/dist/{checkbox-BexIU_lZ.js → checkbox-C1LPq8eL.js} +3 -3
  13. package/dist/{checkbox-BexIU_lZ.js.map → checkbox-C1LPq8eL.js.map} +1 -1
  14. package/dist/{clipboard-text-BFHWMjmr.js → clipboard-text-CJSI9X2m.js} +3 -3
  15. package/dist/{clipboard-text-BFHWMjmr.js.map → clipboard-text-CJSI9X2m.js.map} +1 -1
  16. package/dist/{combobox-Dld0kS0U.js → combobox-CWxn5aHA.js} +4 -4
  17. package/dist/{combobox-Dld0kS0U.js.map → combobox-CWxn5aHA.js.map} +1 -1
  18. package/dist/command-line/cli.js +0 -0
  19. package/dist/command-line/commands/add.js +0 -0
  20. package/dist/command-line/commands/blocks.js +0 -0
  21. package/dist/command-line/commands/doc.js +0 -0
  22. package/dist/command-line/commands/init.js +0 -0
  23. package/dist/command-line/commands/ls.js +0 -0
  24. package/dist/{command-palette-BgQ680BG.js → command-palette-BxmGYxBv.js} +2 -2
  25. package/dist/{command-palette-BgQ680BG.js.map → command-palette-BxmGYxBv.js.map} +1 -1
  26. package/dist/components/breadcrumbs.js +1 -1
  27. package/dist/components/button.js +1 -1
  28. package/dist/components/checkbox.js +1 -1
  29. package/dist/components/clipboard-text.js +1 -1
  30. package/dist/components/combobox.js +1 -1
  31. package/dist/components/command-palette.js +1 -1
  32. package/dist/components/dialog.js +1 -1
  33. package/dist/components/dropdown.js +1 -1
  34. package/dist/components/empty.js +1 -1
  35. package/dist/components/field.js +1 -1
  36. package/dist/components/input.js +3 -3
  37. package/dist/components/label.js +1 -1
  38. package/dist/components/link.js +1 -1
  39. package/dist/components/menubar.js +1 -1
  40. package/dist/components/meter.js +1 -1
  41. package/dist/components/pagination.js +1 -1
  42. package/dist/components/popover.js +1 -1
  43. package/dist/components/radio.js +1 -1
  44. package/dist/components/select.js +1 -1
  45. package/dist/components/sensitive-input.js +1 -1
  46. package/dist/components/switch.js +1 -1
  47. package/dist/components/table.js +1 -1
  48. package/dist/components/tabs.js +1 -1
  49. package/dist/components/toast.js +6 -4
  50. package/dist/components/tooltip.js +1 -1
  51. package/dist/{dialog-B1TaN0oR.js → dialog-BxXPA2vI.js} +2 -2
  52. package/dist/{dialog-B1TaN0oR.js.map → dialog-BxXPA2vI.js.map} +1 -1
  53. package/dist/{dropdown-D0rhYKeG.js → dropdown-BAyk1knz.js} +7 -7
  54. package/dist/{dropdown-D0rhYKeG.js.map → dropdown-BAyk1knz.js.map} +1 -1
  55. package/dist/{empty-DzCqjea-.js → empty-D03cbzRS.js} +2 -2
  56. package/dist/{empty-DzCqjea-.js.map → empty-D03cbzRS.js.map} +1 -1
  57. package/dist/{field-V3J0Ql_V.js → field-B7ORz5ej.js} +3 -3
  58. package/dist/{field-V3J0Ql_V.js.map → field-B7ORz5ej.js.map} +1 -1
  59. package/dist/index.js +66 -65
  60. package/dist/{input-Dqvc2AB_.js → input-D6YgDfDG.js} +3 -3
  61. package/dist/{input-Dqvc2AB_.js.map → input-D6YgDfDG.js.map} +1 -1
  62. package/dist/{input-area-B9qajxvZ.js → input-area-DN_Ncliw.js} +10 -10
  63. package/dist/{input-area-B9qajxvZ.js.map → input-area-DN_Ncliw.js.map} +1 -1
  64. package/dist/{input-group-Bl6tgD5-.js → input-group-BXzBwH4p.js} +29 -29
  65. package/dist/{input-group-Bl6tgD5-.js.map → input-group-BXzBwH4p.js.map} +1 -1
  66. package/dist/{label-87HQArUG.js → label-B4FY8MX_.js} +2 -2
  67. package/dist/{label-87HQArUG.js.map → label-B4FY8MX_.js.map} +1 -1
  68. package/dist/{link-6TIZ4JIw.js → link-CcuZKqob.js} +8 -8
  69. package/dist/{link-6TIZ4JIw.js.map → link-CcuZKqob.js.map} +1 -1
  70. package/dist/{menubar-DLwLRFB1.js → menubar-CzimiryS.js} +2 -2
  71. package/dist/{menubar-DLwLRFB1.js.map → menubar-CzimiryS.js.map} +1 -1
  72. package/dist/{meter-DKUuvXxS.js → meter-BrJnHJ3Q.js} +2 -2
  73. package/dist/{meter-DKUuvXxS.js.map → meter-BrJnHJ3Q.js.map} +1 -1
  74. package/dist/{pagination-C4HQqodz.js → pagination-D0x9KQSk.js} +2 -2
  75. package/dist/{pagination-C4HQqodz.js.map → pagination-D0x9KQSk.js.map} +1 -1
  76. package/dist/{popover-DhdIqrP7.js → popover-BfGLC2s6.js} +4 -4
  77. package/dist/{popover-DhdIqrP7.js.map → popover-BfGLC2s6.js.map} +1 -1
  78. package/dist/primitives/accordion.js +1 -1
  79. package/dist/primitives/alert-dialog.js +1 -1
  80. package/dist/primitives/autocomplete.js +1 -1
  81. package/dist/primitives/avatar.js +1 -1
  82. package/dist/primitives/button.js +1 -1
  83. package/dist/primitives/checkbox-group.js +1 -1
  84. package/dist/primitives/checkbox.js +1 -1
  85. package/dist/primitives/collapsible.js +1 -1
  86. package/dist/primitives/combobox.js +1 -1
  87. package/dist/primitives/context-menu.js +1 -1
  88. package/dist/primitives/dialog.js +1 -1
  89. package/dist/primitives/direction-provider.js +1 -1
  90. package/dist/primitives/field.js +1 -1
  91. package/dist/primitives/fieldset.js +1 -1
  92. package/dist/primitives/form.js +1 -1
  93. package/dist/primitives/input.js +1 -1
  94. package/dist/primitives/menu.js +1 -1
  95. package/dist/primitives/menubar.js +1 -1
  96. package/dist/primitives/meter.js +1 -1
  97. package/dist/primitives/navigation-menu.js +1 -1
  98. package/dist/primitives/number-field.js +1 -1
  99. package/dist/primitives/popover.js +1 -1
  100. package/dist/primitives/preview-card.js +1 -1
  101. package/dist/primitives/progress.js +1 -1
  102. package/dist/primitives/radio-group.js +1 -1
  103. package/dist/primitives/radio.js +1 -1
  104. package/dist/primitives/scroll-area.js +1 -1
  105. package/dist/primitives/select.js +1 -1
  106. package/dist/primitives/separator.js +1 -1
  107. package/dist/primitives/slider.js +1 -1
  108. package/dist/primitives/switch.js +1 -1
  109. package/dist/primitives/tabs.js +1 -1
  110. package/dist/primitives/toast.js +1 -1
  111. package/dist/primitives/toggle-group.js +1 -1
  112. package/dist/primitives/toggle.js +1 -1
  113. package/dist/primitives/toolbar.js +1 -1
  114. package/dist/primitives/tooltip.js +1 -1
  115. package/dist/primitives.js +1 -1
  116. package/dist/{radio-BVAG7hNp.js → radio-CYejLANA.js} +6 -6
  117. package/dist/{radio-BVAG7hNp.js.map → radio-CYejLANA.js.map} +1 -1
  118. package/dist/{schemas-Cbid4MwW.js → schemas-C2YJKpDC.js} +5 -1
  119. package/dist/{schemas-Cbid4MwW.js.map → schemas-C2YJKpDC.js.map} +1 -1
  120. package/dist/{select-B5Vb3zou.js → select-D4rKQAax.js} +4 -4
  121. package/dist/{select-B5Vb3zou.js.map → select-D4rKQAax.js.map} +1 -1
  122. package/dist/{sensitive-input-D5HCV04N.js → sensitive-input-DYvAmxkN.js} +19 -19
  123. package/dist/{sensitive-input-D5HCV04N.js.map → sensitive-input-DYvAmxkN.js.map} +1 -1
  124. package/dist/src/components/toast/index.d.ts +2 -0
  125. package/dist/src/components/toast/index.d.ts.map +1 -1
  126. package/dist/src/components/toast/toast.d.ts +53 -3
  127. package/dist/src/components/toast/toast.d.ts.map +1 -1
  128. package/dist/src/index.d.ts +1 -1
  129. package/dist/src/index.d.ts.map +1 -1
  130. package/dist/styles/kumo-standalone.css +1 -1
  131. package/dist/{switch-D4duMhJ0.js → switch-z7FE1nQE.js} +3 -3
  132. package/dist/{switch-D4duMhJ0.js.map → switch-z7FE1nQE.js.map} +1 -1
  133. package/dist/{table-KuvHGpL8.js → table-Sd2Etb1N.js} +2 -2
  134. package/dist/{table-KuvHGpL8.js.map → table-Sd2Etb1N.js.map} +1 -1
  135. package/dist/{tabs-lQup-IbT.js → tabs-DAEeuQLd.js} +2 -2
  136. package/dist/{tabs-lQup-IbT.js.map → tabs-DAEeuQLd.js.map} +1 -1
  137. package/dist/toast-B8ebpHaU.js +248 -0
  138. package/dist/toast-B8ebpHaU.js.map +1 -0
  139. package/dist/{tooltip-DJWsDTWJ.js → tooltip-C4DRhJi1.js} +6 -6
  140. package/dist/{tooltip-DJWsDTWJ.js.map → tooltip-C4DRhJi1.js.map} +1 -1
  141. package/dist/{vendor-base-ui-DWIDNgE1.js → vendor-base-ui-kX0wjdav.js} +32 -31
  142. package/dist/{vendor-base-ui-DWIDNgE1.js.map → vendor-base-ui-kX0wjdav.js.map} +1 -1
  143. package/package.json +46 -46
  144. package/dist/toast-8YyyQuqZ.js +0 -69
  145. package/dist/toast-8YyyQuqZ.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"empty-DzCqjea-.js","sources":["../src/components/empty/empty.tsx"],"sourcesContent":["import { CheckIcon, CopyIcon } from \"@phosphor-icons/react\";\nimport { useState } from \"react\";\nimport { Button } from \"../../components/button\";\nimport { cn } from \"../../utils/cn\";\n\nexport const KUMO_EMPTY_VARIANTS = {\n size: {\n sm: {\n classes: \"px-6 py-8 gap-4\",\n description: \"Compact empty state for smaller containers\",\n },\n base: {\n classes: \"px-10 py-16 gap-6\",\n description: \"Default empty state size\",\n },\n lg: {\n classes: \"px-12 py-20 gap-8\",\n description: \"Large empty state for prominent placement\",\n },\n },\n} as const;\n\nexport const KUMO_EMPTY_DEFAULT_VARIANTS = {\n size: \"base\",\n} as const;\n\nexport type KumoEmptySize = keyof typeof KUMO_EMPTY_VARIANTS.size;\n\nexport interface KumoEmptyVariantsProps {\n size?: KumoEmptySize;\n}\n\nexport function emptyVariants({\n size = KUMO_EMPTY_DEFAULT_VARIANTS.size,\n}: KumoEmptyVariantsProps = {}) {\n return cn(\n \"flex w-full flex-col items-center rounded-xl border border-kumo-fill bg-kumo-control text-kumo-default\",\n KUMO_EMPTY_VARIANTS.size[size].classes,\n );\n}\n\nexport interface EmptyProps extends KumoEmptyVariantsProps {\n icon?: React.ReactNode;\n title: string;\n description?: string;\n commandLine?: string;\n contents?: React.ReactNode;\n className?: string;\n}\n\nexport function Empty({\n icon,\n title,\n description,\n commandLine,\n contents,\n size = \"base\",\n className,\n}: EmptyProps) {\n const [emptyStateCopied, setEmptyStateCopied] = useState<boolean>(false);\n\n return (\n <div className={cn(emptyVariants({ size }), className)}>\n {icon}\n <h2 className=\"text-2xl font-semibold\">{title}</h2>\n\n {description && (\n <p className=\"max-w-140 text-center text-kumo-strong\">{description}</p>\n )}\n\n {commandLine && (\n <div\n className={cn(\n \"group/cmd relative inline-flex h-10 max-w-8/10 transform-gpu items-center gap-2 rounded-lg font-mono shadow-sm\",\n \"bg-kumo-overlay pr-2 pl-3\",\n \"transition-all duration-300 hover:border-kumo-interact/80 hover:shadow-md\",\n \"border border-kumo-fill/60\",\n )}\n >\n <span className=\"text-xs text-kumo-inactive select-none\">$</span>\n <span className=\"no-scrollbar overflow-scroll text-[14px] whitespace-nowrap text-kumo-brand\">\n {commandLine}\n </span>\n <Button\n className=\"group\"\n size=\"sm\"\n variant=\"ghost\"\n shape=\"square\"\n aria-label=\"Copy command\"\n onClick={async () => {\n setEmptyStateCopied(true);\n setTimeout(() => {\n setEmptyStateCopied(false);\n }, 1000);\n await navigator.clipboard.writeText(commandLine);\n }}\n >\n {emptyStateCopied ? (\n <CheckIcon size={16} className=\"animate-bounce-in text-kumo-success\" />\n ) : (\n <CopyIcon\n size={16}\n className=\"text-kumo-inactive group-hover:text-kumo-brand\"\n />\n )}\n </Button>\n </div>\n )}\n\n {contents}\n </div>\n );\n}\n"],"names":["KUMO_EMPTY_VARIANTS","KUMO_EMPTY_DEFAULT_VARIANTS","emptyVariants","size","cn","Empty","icon","title","description","commandLine","contents","className","emptyStateCopied","setEmptyStateCopied","useState","jsxs","jsx","Button","CheckIcon","CopyIcon"],"mappings":";;;;;;AAKO,MAAMA,IAAsB;AAAA,EACjC,MAAM;AAAA,IACJ,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA8B;AAAA,EACzC,MAAM;AACR;AAQO,SAASC,EAAc;AAAA,EAC5B,MAAAC,IAAOF,EAA4B;AACrC,IAA4B,IAAI;AAC9B,SAAOG;AAAA,IACL;AAAA,IACAJ,EAAoB,KAAKG,CAAI,EAAE;AAAA,EAAA;AAEnC;AAWO,SAASE,EAAM;AAAA,EACpB,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAP,IAAO;AAAA,EACP,WAAAQ;AACF,GAAe;AACb,QAAM,CAACC,GAAkBC,CAAmB,IAAIC,EAAkB,EAAK;AAEvE,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAWX,EAAGF,EAAc,EAAE,MAAAC,EAAA,CAAM,GAAGQ,CAAS,GAClD,UAAA;AAAA,IAAAL;AAAA,IACD,gBAAAU,EAAC,MAAA,EAAG,WAAU,0BAA0B,UAAAT,GAAM;AAAA,IAE7CC,KACC,gBAAAQ,EAAC,KAAA,EAAE,WAAU,0CAA0C,UAAAR,GAAY;AAAA,IAGpEC,KACC,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWX;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAGF,UAAA;AAAA,UAAA,gBAAAY,EAAC,QAAA,EAAK,WAAU,0CAAyC,UAAA,KAAC;AAAA,UAC1D,gBAAAA,EAAC,QAAA,EAAK,WAAU,8EACb,UAAAP,GACH;AAAA,UACA,gBAAAO;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,OAAM;AAAA,cACN,cAAW;AAAA,cACX,SAAS,YAAY;AACnB,gBAAAJ,EAAoB,EAAI,GACxB,WAAW,MAAM;AACf,kBAAAA,EAAoB,EAAK;AAAA,gBAC3B,GAAG,GAAI,GACP,MAAM,UAAU,UAAU,UAAUJ,CAAW;AAAA,cACjD;AAAA,cAEC,cACC,gBAAAO,EAACE,GAAA,EAAU,MAAM,IAAI,WAAU,uCAAsC,IAErE,gBAAAF;AAAA,gBAACG;AAAA,gBAAA;AAAA,kBACC,MAAM;AAAA,kBACN,WAAU;AAAA,gBAAA;AAAA,cAAA;AAAA,YACZ;AAAA,UAAA;AAAA,QAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,IAIHT;AAAA,EAAA,GACH;AAEJ;"}
1
+ {"version":3,"file":"empty-D03cbzRS.js","sources":["../src/components/empty/empty.tsx"],"sourcesContent":["import { CheckIcon, CopyIcon } from \"@phosphor-icons/react\";\nimport { useState } from \"react\";\nimport { Button } from \"../../components/button\";\nimport { cn } from \"../../utils/cn\";\n\nexport const KUMO_EMPTY_VARIANTS = {\n size: {\n sm: {\n classes: \"px-6 py-8 gap-4\",\n description: \"Compact empty state for smaller containers\",\n },\n base: {\n classes: \"px-10 py-16 gap-6\",\n description: \"Default empty state size\",\n },\n lg: {\n classes: \"px-12 py-20 gap-8\",\n description: \"Large empty state for prominent placement\",\n },\n },\n} as const;\n\nexport const KUMO_EMPTY_DEFAULT_VARIANTS = {\n size: \"base\",\n} as const;\n\nexport type KumoEmptySize = keyof typeof KUMO_EMPTY_VARIANTS.size;\n\nexport interface KumoEmptyVariantsProps {\n size?: KumoEmptySize;\n}\n\nexport function emptyVariants({\n size = KUMO_EMPTY_DEFAULT_VARIANTS.size,\n}: KumoEmptyVariantsProps = {}) {\n return cn(\n \"flex w-full flex-col items-center rounded-xl border border-kumo-fill bg-kumo-control text-kumo-default\",\n KUMO_EMPTY_VARIANTS.size[size].classes,\n );\n}\n\nexport interface EmptyProps extends KumoEmptyVariantsProps {\n icon?: React.ReactNode;\n title: string;\n description?: string;\n commandLine?: string;\n contents?: React.ReactNode;\n className?: string;\n}\n\nexport function Empty({\n icon,\n title,\n description,\n commandLine,\n contents,\n size = \"base\",\n className,\n}: EmptyProps) {\n const [emptyStateCopied, setEmptyStateCopied] = useState<boolean>(false);\n\n return (\n <div className={cn(emptyVariants({ size }), className)}>\n {icon}\n <h2 className=\"text-2xl font-semibold\">{title}</h2>\n\n {description && (\n <p className=\"max-w-140 text-center text-kumo-strong\">{description}</p>\n )}\n\n {commandLine && (\n <div\n className={cn(\n \"group/cmd relative inline-flex h-10 max-w-8/10 transform-gpu items-center gap-2 rounded-lg font-mono shadow-sm\",\n \"bg-kumo-overlay pr-2 pl-3\",\n \"transition-all duration-300 hover:border-kumo-interact/80 hover:shadow-md\",\n \"border border-kumo-fill/60\",\n )}\n >\n <span className=\"text-xs text-kumo-inactive select-none\">$</span>\n <span className=\"no-scrollbar overflow-scroll text-[14px] whitespace-nowrap text-kumo-brand\">\n {commandLine}\n </span>\n <Button\n className=\"group\"\n size=\"sm\"\n variant=\"ghost\"\n shape=\"square\"\n aria-label=\"Copy command\"\n onClick={async () => {\n setEmptyStateCopied(true);\n setTimeout(() => {\n setEmptyStateCopied(false);\n }, 1000);\n await navigator.clipboard.writeText(commandLine);\n }}\n >\n {emptyStateCopied ? (\n <CheckIcon size={16} className=\"animate-bounce-in text-kumo-success\" />\n ) : (\n <CopyIcon\n size={16}\n className=\"text-kumo-inactive group-hover:text-kumo-brand\"\n />\n )}\n </Button>\n </div>\n )}\n\n {contents}\n </div>\n );\n}\n"],"names":["KUMO_EMPTY_VARIANTS","KUMO_EMPTY_DEFAULT_VARIANTS","emptyVariants","size","cn","Empty","icon","title","description","commandLine","contents","className","emptyStateCopied","setEmptyStateCopied","useState","jsxs","jsx","Button","CheckIcon","CopyIcon"],"mappings":";;;;;;AAKO,MAAMA,IAAsB;AAAA,EACjC,MAAM;AAAA,IACJ,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA8B;AAAA,EACzC,MAAM;AACR;AAQO,SAASC,EAAc;AAAA,EAC5B,MAAAC,IAAOF,EAA4B;AACrC,IAA4B,IAAI;AAC9B,SAAOG;AAAA,IACL;AAAA,IACAJ,EAAoB,KAAKG,CAAI,EAAE;AAAA,EAAA;AAEnC;AAWO,SAASE,EAAM;AAAA,EACpB,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAP,IAAO;AAAA,EACP,WAAAQ;AACF,GAAe;AACb,QAAM,CAACC,GAAkBC,CAAmB,IAAIC,EAAkB,EAAK;AAEvE,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAWX,EAAGF,EAAc,EAAE,MAAAC,EAAA,CAAM,GAAGQ,CAAS,GAClD,UAAA;AAAA,IAAAL;AAAA,IACD,gBAAAU,EAAC,MAAA,EAAG,WAAU,0BAA0B,UAAAT,GAAM;AAAA,IAE7CC,KACC,gBAAAQ,EAAC,KAAA,EAAE,WAAU,0CAA0C,UAAAR,GAAY;AAAA,IAGpEC,KACC,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWX;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAGF,UAAA;AAAA,UAAA,gBAAAY,EAAC,QAAA,EAAK,WAAU,0CAAyC,UAAA,KAAC;AAAA,UAC1D,gBAAAA,EAAC,QAAA,EAAK,WAAU,8EACb,UAAAP,GACH;AAAA,UACA,gBAAAO;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,OAAM;AAAA,cACN,cAAW;AAAA,cACX,SAAS,YAAY;AACnB,gBAAAJ,EAAoB,EAAI,GACxB,WAAW,MAAM;AACf,kBAAAA,EAAoB,EAAK;AAAA,gBAC3B,GAAG,GAAI,GACP,MAAM,UAAU,UAAU,UAAUJ,CAAW;AAAA,cACjD;AAAA,cAEC,cACC,gBAAAO,EAACE,GAAA,EAAU,MAAM,IAAI,WAAU,uCAAsC,IAErE,gBAAAF;AAAA,gBAACG;AAAA,gBAAA;AAAA,kBACC,MAAM;AAAA,kBACN,WAAU;AAAA,gBAAA;AAAA,cAAA;AAAA,YACZ;AAAA,UAAA;AAAA,QAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,IAIHT;AAAA,EAAA,GACH;AAEJ;"}
@@ -1,8 +1,8 @@
1
1
  "use client";
2
2
  import { jsxs as h, jsx as e } from "react/jsx-runtime";
3
3
  import { c as a } from "./cn-Bhsu1vx2.js";
4
- import { L as m } from "./label-87HQArUG.js";
5
- import { K as f, L as p, av as u, aw as x } from "./vendor-base-ui-DWIDNgE1.js";
4
+ import { L as m } from "./label-B4FY8MX_.js";
5
+ import { K as f, L as p, av as u, aw as x } from "./vendor-base-ui-kX0wjdav.js";
6
6
  const g = {
7
7
  // Field currently has no variant options but structure is ready for future additions
8
8
  }, L = {};
@@ -68,4 +68,4 @@ export {
68
68
  L as a,
69
69
  d as f
70
70
  };
71
- //# sourceMappingURL=field-V3J0Ql_V.js.map
71
+ //# sourceMappingURL=field-B7ORz5ej.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"field-V3J0Ql_V.js","sources":["../src/components/field/field.tsx"],"sourcesContent":["import { Field as FieldBase } from \"@base-ui/react/field\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Label } from \"../label\";\n\nexport const KUMO_FIELD_VARIANTS = {\n // Field currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const KUMO_FIELD_DEFAULT_VARIANTS = {} as const;\n\n// Derived types from KUMO_FIELD_VARIANTS\nexport interface KumoFieldVariantsProps {\n /**\n * When true, places the control (checkbox/switch) before the label visually.\n * When false (default), places the label before the control.\n * Used to support different layout patterns (e.g., iOS-style toggles on the right).\n */\n controlFirst?: boolean;\n}\n\nexport function fieldVariants({\n controlFirst = false,\n}: KumoFieldVariantsProps = {}) {\n return cn(\n // Base styles - vertical layout (default)\n \"grid gap-2\",\n\n // Horizontal layout for checkbox and switch\n // Default: Grid auto-reverses in RTL (desired)\n \"has-[input[type=checkbox]]:grid-cols-[auto_1fr] has-[input[type=checkbox]]:items-center\",\n \"has-[[role=switch]]:grid-cols-[auto_1fr] has-[[role=switch]]:items-center\",\n\n // Control first: use flexbox with row-reverse to flip visual order without affecting text direction\n // flex-row-reverse in LTR: Control→Label, in RTL: Label→Control (opposite of grid default)\n controlFirst && [\n \"has-[input[type=checkbox]]:flex has-[input[type=checkbox]]:flex-row-reverse has-[input[type=checkbox]]:flex-wrap has-[input[type=checkbox]]:items-center\",\n \"has-[[role=switch]]:flex has-[[role=switch]]:flex-row-reverse has-[[role=switch]]:flex-wrap has-[[role=switch]]:items-center\",\n \"[&>label]:flex-1\",\n ],\n );\n}\n\n/**\n * Match type for field validation errors.\n * Can be a boolean or a key from the browser's ValidityState interface.\n * Source: BaseErrorProps[\"match\"] (ComponentPropsWithoutRef<typeof FieldBase.Error>)\n */\nexport type FieldErrorMatch =\n | boolean\n | \"badInput\"\n | \"customError\"\n | \"patternMismatch\"\n | \"rangeOverflow\"\n | \"rangeUnderflow\"\n | \"stepMismatch\"\n | \"tooLong\"\n | \"tooShort\"\n | \"typeMismatch\"\n | \"valid\"\n | \"valueMissing\";\n\nexport interface FieldProps extends KumoFieldVariantsProps {\n children: ReactNode;\n /** The label content - can be a string or any React node */\n label: ReactNode;\n /**\n * When explicitly false, shows gray \"(optional)\" text after the label.\n * When true or undefined, no indicator is shown.\n */\n required?: boolean;\n /** Tooltip content to display next to the label via an info icon */\n labelTooltip?: ReactNode;\n error?: {\n message: ReactNode;\n match: FieldErrorMatch;\n };\n description?: ReactNode;\n controlFirst?: boolean;\n}\n\nexport function Field({\n children,\n label,\n required,\n labelTooltip,\n error,\n description,\n controlFirst = false,\n}: FieldProps) {\n // Show \"(optional)\" when required is explicitly false\n const showOptional = required === false;\n\n return (\n <FieldBase.Root className={fieldVariants({ controlFirst })}>\n <FieldBase.Label className=\"text-base font-medium text-kumo-default\">\n <Label showOptional={showOptional} tooltip={labelTooltip} asContent>\n {label}\n </Label>\n </FieldBase.Label>\n {children}\n {error ? (\n <FieldBase.Error\n className={cn(\n \"text-sm text-kumo-danger\",\n // Span full width in horizontal layout\n \"col-span-full\",\n )}\n match={error.match}\n >\n {error.message}\n </FieldBase.Error>\n ) : (\n description && (\n <FieldBase.Description\n className={cn(\n \"text-sm leading-snug text-kumo-subtle\",\n // Span full width in horizontal layout\n \"col-span-full\",\n )}\n >\n {description}\n </FieldBase.Description>\n )\n )}\n </FieldBase.Root>\n );\n}\n"],"names":["KUMO_FIELD_VARIANTS","KUMO_FIELD_DEFAULT_VARIANTS","fieldVariants","controlFirst","cn","Field","children","label","required","labelTooltip","error","description","showOptional","jsxs","FieldBase.Root","jsx","FieldBase.Label","Label","FieldBase.Error","FieldBase.Description"],"mappings":";;;;;AAKO,MAAMA,IAAsB;AAAA;AAEnC,GAEaC,IAA8B,CAAA;AAYpC,SAASC,EAAc;AAAA,EAC5B,cAAAC,IAAe;AACjB,IAA4B,IAAI;AAC9B,SAAOC;AAAA;AAAA,IAEL;AAAA;AAAA;AAAA,IAIA;AAAA,IACA;AAAA;AAAA;AAAA,IAIAD,KAAgB;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EACF;AAEJ;AAwCO,SAASE,EAAM;AAAA,EACpB,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAR,IAAe;AACjB,GAAe;AAEb,QAAMS,IAAeJ,MAAa;AAElC,SACE,gBAAAK,EAACC,GAAA,EAAe,WAAWZ,EAAc,EAAE,cAAAC,EAAA,CAAc,GACvD,UAAA;AAAA,IAAA,gBAAAY,EAACC,GAAA,EAAgB,WAAU,2CACzB,UAAA,gBAAAD,EAACE,GAAA,EAAM,cAAAL,GAA4B,SAASH,GAAc,WAAS,IAChE,aACH,GACF;AAAA,IACCH;AAAA,IACAI,IACC,gBAAAK;AAAA,MAACG;AAAAA,MAAA;AAAA,QACC,WAAWd;AAAA,UACT;AAAA;AAAA,UAEA;AAAA,QAAA;AAAA,QAEF,OAAOM,EAAM;AAAA,QAEZ,UAAAA,EAAM;AAAA,MAAA;AAAA,IAAA,IAGTC,KACE,gBAAAI;AAAA,MAACI;AAAAA,MAAA;AAAA,QACC,WAAWf;AAAA,UACT;AAAA;AAAA,UAEA;AAAA,QAAA;AAAA,QAGD,UAAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAGN;AAEJ;"}
1
+ {"version":3,"file":"field-B7ORz5ej.js","sources":["../src/components/field/field.tsx"],"sourcesContent":["import { Field as FieldBase } from \"@base-ui/react/field\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Label } from \"../label\";\n\nexport const KUMO_FIELD_VARIANTS = {\n // Field currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const KUMO_FIELD_DEFAULT_VARIANTS = {} as const;\n\n// Derived types from KUMO_FIELD_VARIANTS\nexport interface KumoFieldVariantsProps {\n /**\n * When true, places the control (checkbox/switch) before the label visually.\n * When false (default), places the label before the control.\n * Used to support different layout patterns (e.g., iOS-style toggles on the right).\n */\n controlFirst?: boolean;\n}\n\nexport function fieldVariants({\n controlFirst = false,\n}: KumoFieldVariantsProps = {}) {\n return cn(\n // Base styles - vertical layout (default)\n \"grid gap-2\",\n\n // Horizontal layout for checkbox and switch\n // Default: Grid auto-reverses in RTL (desired)\n \"has-[input[type=checkbox]]:grid-cols-[auto_1fr] has-[input[type=checkbox]]:items-center\",\n \"has-[[role=switch]]:grid-cols-[auto_1fr] has-[[role=switch]]:items-center\",\n\n // Control first: use flexbox with row-reverse to flip visual order without affecting text direction\n // flex-row-reverse in LTR: Control→Label, in RTL: Label→Control (opposite of grid default)\n controlFirst && [\n \"has-[input[type=checkbox]]:flex has-[input[type=checkbox]]:flex-row-reverse has-[input[type=checkbox]]:flex-wrap has-[input[type=checkbox]]:items-center\",\n \"has-[[role=switch]]:flex has-[[role=switch]]:flex-row-reverse has-[[role=switch]]:flex-wrap has-[[role=switch]]:items-center\",\n \"[&>label]:flex-1\",\n ],\n );\n}\n\n/**\n * Match type for field validation errors.\n * Can be a boolean or a key from the browser's ValidityState interface.\n * Source: BaseErrorProps[\"match\"] (ComponentPropsWithoutRef<typeof FieldBase.Error>)\n */\nexport type FieldErrorMatch =\n | boolean\n | \"badInput\"\n | \"customError\"\n | \"patternMismatch\"\n | \"rangeOverflow\"\n | \"rangeUnderflow\"\n | \"stepMismatch\"\n | \"tooLong\"\n | \"tooShort\"\n | \"typeMismatch\"\n | \"valid\"\n | \"valueMissing\";\n\nexport interface FieldProps extends KumoFieldVariantsProps {\n children: ReactNode;\n /** The label content - can be a string or any React node */\n label: ReactNode;\n /**\n * When explicitly false, shows gray \"(optional)\" text after the label.\n * When true or undefined, no indicator is shown.\n */\n required?: boolean;\n /** Tooltip content to display next to the label via an info icon */\n labelTooltip?: ReactNode;\n error?: {\n message: ReactNode;\n match: FieldErrorMatch;\n };\n description?: ReactNode;\n controlFirst?: boolean;\n}\n\nexport function Field({\n children,\n label,\n required,\n labelTooltip,\n error,\n description,\n controlFirst = false,\n}: FieldProps) {\n // Show \"(optional)\" when required is explicitly false\n const showOptional = required === false;\n\n return (\n <FieldBase.Root className={fieldVariants({ controlFirst })}>\n <FieldBase.Label className=\"text-base font-medium text-kumo-default\">\n <Label showOptional={showOptional} tooltip={labelTooltip} asContent>\n {label}\n </Label>\n </FieldBase.Label>\n {children}\n {error ? (\n <FieldBase.Error\n className={cn(\n \"text-sm text-kumo-danger\",\n // Span full width in horizontal layout\n \"col-span-full\",\n )}\n match={error.match}\n >\n {error.message}\n </FieldBase.Error>\n ) : (\n description && (\n <FieldBase.Description\n className={cn(\n \"text-sm leading-snug text-kumo-subtle\",\n // Span full width in horizontal layout\n \"col-span-full\",\n )}\n >\n {description}\n </FieldBase.Description>\n )\n )}\n </FieldBase.Root>\n );\n}\n"],"names":["KUMO_FIELD_VARIANTS","KUMO_FIELD_DEFAULT_VARIANTS","fieldVariants","controlFirst","cn","Field","children","label","required","labelTooltip","error","description","showOptional","jsxs","FieldBase.Root","jsx","FieldBase.Label","Label","FieldBase.Error","FieldBase.Description"],"mappings":";;;;;AAKO,MAAMA,IAAsB;AAAA;AAEnC,GAEaC,IAA8B,CAAA;AAYpC,SAASC,EAAc;AAAA,EAC5B,cAAAC,IAAe;AACjB,IAA4B,IAAI;AAC9B,SAAOC;AAAA;AAAA,IAEL;AAAA;AAAA;AAAA,IAIA;AAAA,IACA;AAAA;AAAA;AAAA,IAIAD,KAAgB;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EACF;AAEJ;AAwCO,SAASE,EAAM;AAAA,EACpB,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAR,IAAe;AACjB,GAAe;AAEb,QAAMS,IAAeJ,MAAa;AAElC,SACE,gBAAAK,EAACC,GAAA,EAAe,WAAWZ,EAAc,EAAE,cAAAC,EAAA,CAAc,GACvD,UAAA;AAAA,IAAA,gBAAAY,EAACC,GAAA,EAAgB,WAAU,2CACzB,UAAA,gBAAAD,EAACE,GAAA,EAAM,cAAAL,GAA4B,SAASH,GAAc,WAAS,IAChE,aACH,GACF;AAAA,IACCH;AAAA,IACAI,IACC,gBAAAK;AAAA,MAACG;AAAAA,MAAA;AAAA,QACC,WAAWd;AAAA,UACT;AAAA;AAAA,UAEA;AAAA,QAAA;AAAA,QAEF,OAAOM,EAAM;AAAA,QAEZ,UAAAA,EAAM;AAAA,MAAA;AAAA,IAAA,IAGTC,KACE,gBAAAI;AAAA,MAACI;AAAAA,MAAA;AAAA,QACC,WAAWf;AAAA,UACT;AAAA;AAAA,UAEA;AAAA,QAAA;AAAA,QAGD,UAAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAGN;AAEJ;"}
package/dist/index.js CHANGED
@@ -1,125 +1,126 @@
1
1
  "use client";
2
2
  import { B as r } from "./badge-Dc99vsfo.js";
3
3
  import { B as e, a as t } from "./banner-4fkH6Sbt.js";
4
- import { B as i, L as m, R as A, b as n } from "./button-E2-hZMZE.js";
4
+ import { B as i, L as m, R as A, b as n } from "./button-Bh96oxRL.js";
5
5
  import { D as f } from "./date-range-picker-CbKEQ9pi.js";
6
- import { C as _ } from "./checkbox-BexIU_lZ.js";
7
- import { C as L } from "./clipboard-text-BFHWMjmr.js";
6
+ import { C as _ } from "./checkbox-C1LPq8eL.js";
7
+ import { C as L } from "./clipboard-text-CJSI9X2m.js";
8
8
  import { C as R, a as S } from "./code-T2wPDiM0.js";
9
- import { C as D } from "./combobox-Dld0kS0U.js";
10
- import { D as M, e as U, d as N, a as E, c as O, b as d } from "./dialog-B1TaN0oR.js";
11
- import { D as C } from "./dropdown-D0rhYKeG.js";
12
- import { C as P } from "./collapsible-OBNkTO48.js";
13
- import { F as B, a as c, K as F, f as k } from "./field-V3J0Ql_V.js";
14
- import { b as v, K as h, L as y, a as w, l as j } from "./label-87HQArUG.js";
15
- import { I as z, i as H } from "./input-Dqvc2AB_.js";
16
- import { I as Q } from "./input-area-B9qajxvZ.js";
17
- import { I as X } from "./input-group-Bl6tgD5-.js";
9
+ import { C as D } from "./combobox-CWxn5aHA.js";
10
+ import { D as M, e as U, d as N, a as u, c as E, b as O } from "./dialog-BxXPA2vI.js";
11
+ import { D as C } from "./dropdown-BAyk1knz.js";
12
+ import { C as g } from "./collapsible-OBNkTO48.js";
13
+ import { F as B, a as c, K as F, f as k } from "./field-B7ORz5ej.js";
14
+ import { b as v, K as h, L as y, a as w, l as j } from "./label-B4FY8MX_.js";
15
+ import { I as z, i as H } from "./input-D6YgDfDG.js";
16
+ import { I as Q } from "./input-area-DN_Ncliw.js";
17
+ import { I as X } from "./input-group-BXzBwH4p.js";
18
18
  import { L as Z } from "./layer-card-C8j5Hkkj.js";
19
19
  import { L as aa } from "./loader-DHGMYlC6.js";
20
20
  import { S as ra } from "./skeleton-line-CtpS1u1J.js";
21
- import { M as ea, u as ta } from "./menubar-DLwLRFB1.js";
22
- import { M as ia } from "./meter-DKUuvXxS.js";
23
- import { P as Aa } from "./pagination-C4HQqodz.js";
24
- import { S as Ta } from "./select-B5Vb3zou.js";
21
+ import { M as ea, u as ta } from "./menubar-CzimiryS.js";
22
+ import { M as ia } from "./meter-BrJnHJ3Q.js";
23
+ import { P as Aa } from "./pagination-D0x9KQSk.js";
24
+ import { S as Ta } from "./select-D4rKQAax.js";
25
25
  import { S as xa } from "./surface-BIC6CXiz.js";
26
- import { S as Ia } from "./switch-D4duMhJ0.js";
27
- import { T as la } from "./tabs-lQup-IbT.js";
28
- import { T as Sa } from "./table-KuvHGpL8.js";
26
+ import { S as Ia } from "./switch-z7FE1nQE.js";
27
+ import { T as la } from "./tabs-DAEeuQLd.js";
28
+ import { T as Sa } from "./table-Sd2Etb1N.js";
29
29
  import { T as Da } from "./text-BEhqwMfe.js";
30
- import { T as Ma } from "./toast-8YyyQuqZ.js";
31
- import { T as Na, a as Ea } from "./tooltip-DJWsDTWJ.js";
32
- import { a as da, K as ua, P as Ca } from "./popover-DhdIqrP7.js";
33
- import { a as Pa, K as ga, S as Ba } from "./sensitive-input-D5HCV04N.js";
34
- import { b as Fa, K as ka, R as Ga, a as va } from "./radio-BVAG7hNp.js";
35
- import { C as ya, a as wa, K as ja } from "./command-palette-BgQ680BG.js";
36
- import { a as za, K as Ha, L as Ja, l as Qa } from "./link-6TIZ4JIw.js";
37
- import { B as Xa } from "./breadcrumbs-B5SY2CWj.js";
38
- import { E as Za } from "./empty-DzCqjea-.js";
39
- import { G as ao, a as oo, c as ro, K as so, b as eo, g as to } from "./grid-DKajRHh8.js";
40
- import { c as io, s as mo } from "./cn-Bhsu1vx2.js";
41
- import { L as no, u as To } from "./link-provider-DPBGo-0n.js";
42
- import { i as xo } from "./vendor-base-ui-DWIDNgE1.js";
30
+ import { T as Ma, u as Ua } from "./toast-B8ebpHaU.js";
31
+ import { T as ua, a as Ea } from "./tooltip-C4DRhJi1.js";
32
+ import { a as da, K as Ca, P as ba } from "./popover-BfGLC2s6.js";
33
+ import { a as Pa, K as Ba, S as ca } from "./sensitive-input-DYvAmxkN.js";
34
+ import { b as ka, K as Ga, R as va, a as ha } from "./radio-CYejLANA.js";
35
+ import { C as wa, a as ja, K as qa } from "./command-palette-BxmGYxBv.js";
36
+ import { a as Ha, K as Ja, L as Qa, l as Wa } from "./link-CcuZKqob.js";
37
+ import { B as Ya } from "./breadcrumbs-DyKi7BcP.js";
38
+ import { E as $a } from "./empty-D03cbzRS.js";
39
+ import { G as oo, a as ro, c as so, K as eo, b as to, g as po } from "./grid-DKajRHh8.js";
40
+ import { c as mo, s as Ao } from "./cn-Bhsu1vx2.js";
41
+ import { L as To, u as fo } from "./link-provider-DPBGo-0n.js";
42
+ import { i as _o } from "./vendor-base-ui-kX0wjdav.js";
43
43
  export {
44
44
  r as Badge,
45
45
  e as Banner,
46
46
  t as BannerVariant,
47
- Xa as Breadcrumbs,
47
+ Ya as Breadcrumbs,
48
48
  i as Button,
49
49
  _ as Checkbox,
50
50
  L as ClipboardText,
51
51
  R as Code,
52
52
  S as CodeBlock,
53
- P as Collapsible,
53
+ g as Collapsible,
54
54
  D as Combobox,
55
- ya as CommandPalette,
55
+ wa as CommandPalette,
56
56
  f as DateRangePicker,
57
57
  M as Dialog,
58
58
  U as DialogClose,
59
59
  N as DialogDescription,
60
- E as DialogRoot,
61
- O as DialogTitle,
62
- d as DialogTrigger,
60
+ u as DialogRoot,
61
+ E as DialogTitle,
62
+ O as DialogTrigger,
63
63
  C as DropdownMenu,
64
- Za as Empty,
64
+ $a as Empty,
65
65
  B as Field,
66
- ao as Grid,
67
- oo as GridItem,
66
+ oo as Grid,
67
+ ro as GridItem,
68
68
  z as Input,
69
69
  Q as InputArea,
70
70
  X as InputGroup,
71
- wa as KUMO_COMMAND_PALETTE_DEFAULT_VARIANTS,
72
- ja as KUMO_COMMAND_PALETTE_VARIANTS,
71
+ ja as KUMO_COMMAND_PALETTE_DEFAULT_VARIANTS,
72
+ qa as KUMO_COMMAND_PALETTE_VARIANTS,
73
73
  c as KUMO_FIELD_DEFAULT_VARIANTS,
74
74
  F as KUMO_FIELD_VARIANTS,
75
- ro as KUMO_GRID_DEFAULT_VARIANTS,
76
- so as KUMO_GRID_VARIANTS,
75
+ so as KUMO_GRID_DEFAULT_VARIANTS,
76
+ eo as KUMO_GRID_VARIANTS,
77
77
  v as KUMO_LABEL_DEFAULT_VARIANTS,
78
78
  h as KUMO_LABEL_VARIANTS,
79
- za as KUMO_LINK_DEFAULT_VARIANTS,
80
- Ha as KUMO_LINK_VARIANTS,
79
+ Ha as KUMO_LINK_DEFAULT_VARIANTS,
80
+ Ja as KUMO_LINK_VARIANTS,
81
81
  da as KUMO_POPOVER_DEFAULT_VARIANTS,
82
- ua as KUMO_POPOVER_VARIANTS,
83
- Fa as KUMO_RADIO_DEFAULT_VARIANTS,
84
- ka as KUMO_RADIO_VARIANTS,
82
+ Ca as KUMO_POPOVER_VARIANTS,
83
+ ka as KUMO_RADIO_DEFAULT_VARIANTS,
84
+ Ga as KUMO_RADIO_VARIANTS,
85
85
  Pa as KUMO_SENSITIVE_INPUT_DEFAULT_VARIANTS,
86
- ga as KUMO_SENSITIVE_INPUT_VARIANTS,
86
+ Ba as KUMO_SENSITIVE_INPUT_VARIANTS,
87
87
  y as Label,
88
88
  Z as LayerCard,
89
- Ja as Link,
89
+ Qa as Link,
90
90
  m as LinkButton,
91
- no as LinkProvider,
91
+ To as LinkProvider,
92
92
  aa as Loader,
93
93
  ea as MenuBar,
94
94
  ia as Meter,
95
95
  Aa as Pagination,
96
- Ca as Popover,
97
- Ga as Radio,
98
- va as RadioGroup,
96
+ ba as Popover,
97
+ va as Radio,
98
+ ha as RadioGroup,
99
99
  A as RefreshButton,
100
100
  Ta as Select,
101
- Ba as SensitiveInput,
101
+ ca as SensitiveInput,
102
102
  ra as SkeletonLine,
103
103
  xa as Surface,
104
104
  Ia as Switch,
105
105
  Sa as Table,
106
106
  la as Tabs,
107
107
  Da as Text,
108
- xo as Toast,
108
+ _o as Toast,
109
109
  Ma as Toasty,
110
- Na as Tooltip,
110
+ ua as Tooltip,
111
111
  Ea as TooltipProvider,
112
112
  n as buttonVariants,
113
- io as cn,
113
+ mo as cn,
114
114
  k as fieldVariants,
115
- eo as gridItemVariants,
116
- to as gridVariants,
115
+ to as gridItemVariants,
116
+ po as gridVariants,
117
117
  H as inputVariants,
118
118
  w as labelContentVariants,
119
119
  j as labelVariants,
120
- Qa as linkVariants,
121
- mo as safeRandomId,
122
- To as useLinkComponent,
120
+ Wa as linkVariants,
121
+ Ao as safeRandomId,
122
+ Ua as useKumoToastManager,
123
+ fo as useLinkComponent,
123
124
  ta as useMenuNavigation
124
125
  };
125
126
  //# sourceMappingURL=index.js.map
@@ -2,8 +2,8 @@
2
2
  import { jsx as l } from "react/jsx-runtime";
3
3
  import { c as p } from "./cn-Bhsu1vx2.js";
4
4
  import { forwardRef as I } from "react";
5
- import { F as k } from "./field-V3J0Ql_V.js";
6
- import { I as v } from "./vendor-base-ui-DWIDNgE1.js";
5
+ import { F as k } from "./field-B7ORz5ej.js";
6
+ import { I as v } from "./vendor-base-ui-kX0wjdav.js";
7
7
  const u = {
8
8
  size: {
9
9
  xs: {
@@ -106,4 +106,4 @@ export {
106
106
  u as K,
107
107
  N as i
108
108
  };
109
- //# sourceMappingURL=input-Dqvc2AB_.js.map
109
+ //# sourceMappingURL=input-D6YgDfDG.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"input-Dqvc2AB_.js","sources":["../src/components/input/input.tsx"],"sourcesContent":["import { cn } from \"../../utils/cn\";\nimport {\n forwardRef,\n type ComponentPropsWithoutRef,\n type ReactNode,\n} from \"react\";\nimport { Input as BaseInput } from \"@base-ui/react/input\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\n\nexport const KUMO_INPUT_VARIANTS = {\n size: {\n xs: {\n classes: \"h-5 gap-1 rounded-sm px-1.5 text-xs\",\n description: \"Extra small input for compact UIs\",\n },\n sm: {\n classes: \"h-6.5 gap-1 rounded-md px-2 text-xs\",\n description: \"Small input for secondary fields\",\n },\n base: {\n classes: \"h-9 gap-1.5 rounded-lg px-3 text-base\",\n description: \"Default input size\",\n },\n lg: {\n classes: \"h-10 gap-2 rounded-lg px-4 text-base\",\n description: \"Large input for prominent fields\",\n },\n },\n variant: {\n default: {\n classes: \"focus:ring-kumo-ring\",\n description: \"Default input appearance\",\n },\n error: {\n classes: \"!ring-kumo-danger focus:ring-kumo-danger\",\n description: \"Error state for validation failures\",\n },\n },\n} as const;\n\nexport const KUMO_INPUT_DEFAULT_VARIANTS = {\n size: \"base\",\n variant: \"default\",\n} as const;\n\nexport const KUMO_INPUT_STYLING = {\n dimensions: {\n xs: { height: 20, paddingX: 6, fontSize: 12, borderRadius: 2, width: 160 },\n sm: { height: 26, paddingX: 8, fontSize: 12, borderRadius: 6, width: 200 },\n base: {\n height: 36,\n paddingX: 12,\n fontSize: 16,\n borderRadius: 8,\n width: 280,\n },\n lg: { height: 40, paddingX: 16, fontSize: 16, borderRadius: 8, width: 320 },\n },\n baseTokens: {\n background: \"color-secondary\",\n text: \"text-color-surface\",\n placeholder: \"text-color-muted\",\n ring: \"color-border\",\n },\n stateTokens: {\n focus: { ring: \"color-active\" },\n error: { ring: \"color-error\" },\n disabled: { opacity: 0.5, text: \"text-color-muted\" },\n },\n} as const;\n\n// Derived types from KUMO_INPUT_VARIANTS\nexport type KumoInputSize = keyof typeof KUMO_INPUT_VARIANTS.size;\nexport type KumoInputVariant = keyof typeof KUMO_INPUT_VARIANTS.variant;\n\nexport interface KumoInputVariantsProps {\n size?: KumoInputSize;\n variant?: KumoInputVariant;\n parentFocusIndicator?: boolean;\n focusIndicator?: boolean;\n}\n\n// Omit native `size` attribute (number) to avoid conflict with our custom `size` variant\ntype BaseInputProps = Omit<ComponentPropsWithoutRef<typeof BaseInput>, \"size\">;\n\nexport function inputVariants({\n variant = KUMO_INPUT_DEFAULT_VARIANTS.variant,\n size = KUMO_INPUT_DEFAULT_VARIANTS.size,\n parentFocusIndicator = false,\n focusIndicator = false,\n}: KumoInputVariantsProps = {}) {\n return cn(\n // Base styles\n \"border-0 bg-kumo-control text-kumo-default ring ring-kumo-line\",\n // Disabled state and placeholder styles\n \"outline-none placeholder:text-kumo-subtle disabled:text-kumo-subtle\",\n // Apply size styles from KUMO_INPUT_VARIANTS\n KUMO_INPUT_VARIANTS.size[size].classes,\n // Apply variant styles from KUMO_INPUT_VARIANTS\n KUMO_INPUT_VARIANTS.variant[variant].classes,\n // Focus state handling\n parentFocusIndicator && \"[&:has(:focus-within)]:ring-kumo-ring\",\n focusIndicator && \"focus:ring-kumo-ring\",\n );\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {\n const {\n className,\n size = \"base\",\n variant = \"default\",\n label,\n labelTooltip,\n description,\n error,\n ...inputProps\n } = props;\n\n // Extract required from inputProps to pass to Field for label decoration\n const { required } = inputProps;\n\n // A11y enforcement: warn in dev if no accessible name provided\n if (process.env.NODE_ENV !== \"production\") {\n const hasLabel = Boolean(label);\n const hasPlaceholderAndAriaLabel = Boolean(\n inputProps.placeholder && inputProps[\"aria-label\"],\n );\n const hasAriaLabelledBy = Boolean(inputProps[\"aria-labelledby\"]);\n\n if (!hasLabel && !hasPlaceholderAndAriaLabel && !hasAriaLabelledBy) {\n console.warn(\n \"[Kumo Input]: Input must have an accessible name. Provide either:\\n\" +\n \" - label prop: <Input label='Email' />\\n\" +\n \" - placeholder + aria-label: <Input placeholder='Email' aria-label='Email address' />\\n\" +\n \" - aria-labelledby for custom label association\",\n );\n }\n }\n\n const input = (\n <BaseInput\n ref={ref}\n className={cn(\n inputVariants({ size, variant, focusIndicator: true }),\n className,\n )}\n {...inputProps}\n />\n );\n\n // Render with Field wrapper if label is provided\n if (label) {\n return (\n <Field\n label={label}\n required={required}\n labelTooltip={labelTooltip}\n description={description}\n error={\n error\n ? typeof error === \"string\"\n ? { message: error, match: true }\n : error\n : undefined\n }\n >\n {input}\n </Field>\n );\n }\n\n // Render bare input without Field wrapper\n return input;\n});\n\nInput.displayName = \"Input\";\n\n/**\n * Input component props with accessibility guidance.\n *\n * **Accessible Name Required:** Input should have one of:\n * 1. `label` prop (recommended) - enables Field wrapper with label/description/error\n * 2. `placeholder` + `aria-label` - for bare inputs with visual placeholder\n * 3. `aria-labelledby` - for custom label association\n *\n * Missing accessible names will trigger console warnings in development.\n *\n * @example\n * // Recommended: Built-in Field wrapper\n * <Input label=\"Email\" placeholder=\"you@example.com\" />\n *\n * @example\n * // Bare input with placeholder and aria-label\n * <Input placeholder=\"Search...\" aria-label=\"Search products\" />\n *\n * @example\n * // Custom label association\n * <label id=\"email-label\">Email</label>\n * <Input aria-labelledby=\"email-label\" />\n *\n * @example\n * // With description and error\n * <Input\n * label=\"Password\"\n * description=\"Must be at least 8 characters\"\n * error=\"Password is too short\"\n * variant=\"error\"\n * />\n */\nexport type InputProps = Pick<KumoInputVariantsProps, \"size\" | \"variant\"> &\n BaseInputProps & {\n /** Label content for the input (enables Field wrapper) - can be a string or any React node */\n label?: ReactNode;\n /** Tooltip content to display next to the label via an info icon */\n labelTooltip?: ReactNode;\n /** Helper text displayed below the input */\n description?: ReactNode;\n /** Error message or validation error object */\n error?: string | { message: ReactNode; match: FieldErrorMatch };\n };\n"],"names":["KUMO_INPUT_VARIANTS","KUMO_INPUT_DEFAULT_VARIANTS","inputVariants","variant","size","parentFocusIndicator","focusIndicator","cn","Input","forwardRef","props","ref","className","label","labelTooltip","description","error","inputProps","required","hasLabel","hasPlaceholderAndAriaLabel","hasAriaLabelledBy","input","jsx","BaseInput","Field"],"mappings":";;;;;;AASO,MAAMA,IAAsB;AAAA,EACjC,MAAM;AAAA,IACJ,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAAA,EAEF,SAAS;AAAA,IACP,SAAS;AAAA,MACP,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,OAAO;AAAA,MACL,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA8B;AAAA,EACzC,MAAM;AAAA,EACN,SAAS;AACX;AA0CO,SAASC,EAAc;AAAA,EAC5B,SAAAC,IAAUF,EAA4B;AAAA,EACtC,MAAAG,IAAOH,EAA4B;AAAA,EACnC,sBAAAI,IAAuB;AAAA,EACvB,gBAAAC,IAAiB;AACnB,IAA4B,IAAI;AAC9B,SAAOC;AAAA;AAAA,IAEL;AAAA;AAAA,IAEA;AAAA;AAAA,IAEAP,EAAoB,KAAKI,CAAI,EAAE;AAAA;AAAA,IAE/BJ,EAAoB,QAAQG,CAAO,EAAE;AAAA;AAAA,IAErCE,KAAwB;AAAA,IACxBC,KAAkB;AAAA,EAAA;AAEtB;AAEO,MAAME,IAAQC,EAAyC,CAACC,GAAOC,MAAQ;AAC5E,QAAM;AAAA,IACJ,WAAAC;AAAA,IACA,MAAAR,IAAO;AAAA,IACP,SAAAD,IAAU;AAAA,IACV,OAAAU;AAAA,IACA,cAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDP,GAGE,EAAE,UAAAQ,MAAaD;AAGrB,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,UAAME,IAAW,EAAQN,GACnBO,IAA6B,GACjCH,EAAW,eAAeA,EAAW,YAAY,IAE7CI,IAAoB,EAAQJ,EAAW,iBAAiB;AAE9D,IAAI,CAACE,KAAY,CAACC,KAA8B,CAACC,KAC/C,QAAQ;AAAA,MACN;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EAMN;AAEA,QAAMC,IACJ,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAb;AAAA,MACA,WAAWJ;AAAA,QACTL,EAAc,EAAE,MAAAE,GAAM,SAAAD,GAAS,gBAAgB,IAAM;AAAA,QACrDS;AAAA,MAAA;AAAA,MAED,GAAGK;AAAA,IAAA;AAAA,EAAA;AAKR,SAAIJ,IAEA,gBAAAU;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,OAAAZ;AAAA,MACA,UAAAK;AAAA,MACA,cAAAJ;AAAA,MACA,aAAAC;AAAA,MACA,OACEC,IACI,OAAOA,KAAU,WACf,EAAE,SAASA,GAAO,OAAO,GAAA,IACzBA,IACF;AAAA,MAGL,UAAAM;AAAA,IAAA;AAAA,EAAA,IAMAA;AACT,CAAC;AAEDd,EAAM,cAAc;"}
1
+ {"version":3,"file":"input-D6YgDfDG.js","sources":["../src/components/input/input.tsx"],"sourcesContent":["import { cn } from \"../../utils/cn\";\nimport {\n forwardRef,\n type ComponentPropsWithoutRef,\n type ReactNode,\n} from \"react\";\nimport { Input as BaseInput } from \"@base-ui/react/input\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\n\nexport const KUMO_INPUT_VARIANTS = {\n size: {\n xs: {\n classes: \"h-5 gap-1 rounded-sm px-1.5 text-xs\",\n description: \"Extra small input for compact UIs\",\n },\n sm: {\n classes: \"h-6.5 gap-1 rounded-md px-2 text-xs\",\n description: \"Small input for secondary fields\",\n },\n base: {\n classes: \"h-9 gap-1.5 rounded-lg px-3 text-base\",\n description: \"Default input size\",\n },\n lg: {\n classes: \"h-10 gap-2 rounded-lg px-4 text-base\",\n description: \"Large input for prominent fields\",\n },\n },\n variant: {\n default: {\n classes: \"focus:ring-kumo-ring\",\n description: \"Default input appearance\",\n },\n error: {\n classes: \"!ring-kumo-danger focus:ring-kumo-danger\",\n description: \"Error state for validation failures\",\n },\n },\n} as const;\n\nexport const KUMO_INPUT_DEFAULT_VARIANTS = {\n size: \"base\",\n variant: \"default\",\n} as const;\n\nexport const KUMO_INPUT_STYLING = {\n dimensions: {\n xs: { height: 20, paddingX: 6, fontSize: 12, borderRadius: 2, width: 160 },\n sm: { height: 26, paddingX: 8, fontSize: 12, borderRadius: 6, width: 200 },\n base: {\n height: 36,\n paddingX: 12,\n fontSize: 16,\n borderRadius: 8,\n width: 280,\n },\n lg: { height: 40, paddingX: 16, fontSize: 16, borderRadius: 8, width: 320 },\n },\n baseTokens: {\n background: \"color-secondary\",\n text: \"text-color-surface\",\n placeholder: \"text-color-muted\",\n ring: \"color-border\",\n },\n stateTokens: {\n focus: { ring: \"color-active\" },\n error: { ring: \"color-error\" },\n disabled: { opacity: 0.5, text: \"text-color-muted\" },\n },\n} as const;\n\n// Derived types from KUMO_INPUT_VARIANTS\nexport type KumoInputSize = keyof typeof KUMO_INPUT_VARIANTS.size;\nexport type KumoInputVariant = keyof typeof KUMO_INPUT_VARIANTS.variant;\n\nexport interface KumoInputVariantsProps {\n size?: KumoInputSize;\n variant?: KumoInputVariant;\n parentFocusIndicator?: boolean;\n focusIndicator?: boolean;\n}\n\n// Omit native `size` attribute (number) to avoid conflict with our custom `size` variant\ntype BaseInputProps = Omit<ComponentPropsWithoutRef<typeof BaseInput>, \"size\">;\n\nexport function inputVariants({\n variant = KUMO_INPUT_DEFAULT_VARIANTS.variant,\n size = KUMO_INPUT_DEFAULT_VARIANTS.size,\n parentFocusIndicator = false,\n focusIndicator = false,\n}: KumoInputVariantsProps = {}) {\n return cn(\n // Base styles\n \"border-0 bg-kumo-control text-kumo-default ring ring-kumo-line\",\n // Disabled state and placeholder styles\n \"outline-none placeholder:text-kumo-subtle disabled:text-kumo-subtle\",\n // Apply size styles from KUMO_INPUT_VARIANTS\n KUMO_INPUT_VARIANTS.size[size].classes,\n // Apply variant styles from KUMO_INPUT_VARIANTS\n KUMO_INPUT_VARIANTS.variant[variant].classes,\n // Focus state handling\n parentFocusIndicator && \"[&:has(:focus-within)]:ring-kumo-ring\",\n focusIndicator && \"focus:ring-kumo-ring\",\n );\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {\n const {\n className,\n size = \"base\",\n variant = \"default\",\n label,\n labelTooltip,\n description,\n error,\n ...inputProps\n } = props;\n\n // Extract required from inputProps to pass to Field for label decoration\n const { required } = inputProps;\n\n // A11y enforcement: warn in dev if no accessible name provided\n if (process.env.NODE_ENV !== \"production\") {\n const hasLabel = Boolean(label);\n const hasPlaceholderAndAriaLabel = Boolean(\n inputProps.placeholder && inputProps[\"aria-label\"],\n );\n const hasAriaLabelledBy = Boolean(inputProps[\"aria-labelledby\"]);\n\n if (!hasLabel && !hasPlaceholderAndAriaLabel && !hasAriaLabelledBy) {\n console.warn(\n \"[Kumo Input]: Input must have an accessible name. Provide either:\\n\" +\n \" - label prop: <Input label='Email' />\\n\" +\n \" - placeholder + aria-label: <Input placeholder='Email' aria-label='Email address' />\\n\" +\n \" - aria-labelledby for custom label association\",\n );\n }\n }\n\n const input = (\n <BaseInput\n ref={ref}\n className={cn(\n inputVariants({ size, variant, focusIndicator: true }),\n className,\n )}\n {...inputProps}\n />\n );\n\n // Render with Field wrapper if label is provided\n if (label) {\n return (\n <Field\n label={label}\n required={required}\n labelTooltip={labelTooltip}\n description={description}\n error={\n error\n ? typeof error === \"string\"\n ? { message: error, match: true }\n : error\n : undefined\n }\n >\n {input}\n </Field>\n );\n }\n\n // Render bare input without Field wrapper\n return input;\n});\n\nInput.displayName = \"Input\";\n\n/**\n * Input component props with accessibility guidance.\n *\n * **Accessible Name Required:** Input should have one of:\n * 1. `label` prop (recommended) - enables Field wrapper with label/description/error\n * 2. `placeholder` + `aria-label` - for bare inputs with visual placeholder\n * 3. `aria-labelledby` - for custom label association\n *\n * Missing accessible names will trigger console warnings in development.\n *\n * @example\n * // Recommended: Built-in Field wrapper\n * <Input label=\"Email\" placeholder=\"you@example.com\" />\n *\n * @example\n * // Bare input with placeholder and aria-label\n * <Input placeholder=\"Search...\" aria-label=\"Search products\" />\n *\n * @example\n * // Custom label association\n * <label id=\"email-label\">Email</label>\n * <Input aria-labelledby=\"email-label\" />\n *\n * @example\n * // With description and error\n * <Input\n * label=\"Password\"\n * description=\"Must be at least 8 characters\"\n * error=\"Password is too short\"\n * variant=\"error\"\n * />\n */\nexport type InputProps = Pick<KumoInputVariantsProps, \"size\" | \"variant\"> &\n BaseInputProps & {\n /** Label content for the input (enables Field wrapper) - can be a string or any React node */\n label?: ReactNode;\n /** Tooltip content to display next to the label via an info icon */\n labelTooltip?: ReactNode;\n /** Helper text displayed below the input */\n description?: ReactNode;\n /** Error message or validation error object */\n error?: string | { message: ReactNode; match: FieldErrorMatch };\n };\n"],"names":["KUMO_INPUT_VARIANTS","KUMO_INPUT_DEFAULT_VARIANTS","inputVariants","variant","size","parentFocusIndicator","focusIndicator","cn","Input","forwardRef","props","ref","className","label","labelTooltip","description","error","inputProps","required","hasLabel","hasPlaceholderAndAriaLabel","hasAriaLabelledBy","input","jsx","BaseInput","Field"],"mappings":";;;;;;AASO,MAAMA,IAAsB;AAAA,EACjC,MAAM;AAAA,IACJ,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAAA,EAEF,SAAS;AAAA,IACP,SAAS;AAAA,MACP,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,OAAO;AAAA,MACL,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA8B;AAAA,EACzC,MAAM;AAAA,EACN,SAAS;AACX;AA0CO,SAASC,EAAc;AAAA,EAC5B,SAAAC,IAAUF,EAA4B;AAAA,EACtC,MAAAG,IAAOH,EAA4B;AAAA,EACnC,sBAAAI,IAAuB;AAAA,EACvB,gBAAAC,IAAiB;AACnB,IAA4B,IAAI;AAC9B,SAAOC;AAAA;AAAA,IAEL;AAAA;AAAA,IAEA;AAAA;AAAA,IAEAP,EAAoB,KAAKI,CAAI,EAAE;AAAA;AAAA,IAE/BJ,EAAoB,QAAQG,CAAO,EAAE;AAAA;AAAA,IAErCE,KAAwB;AAAA,IACxBC,KAAkB;AAAA,EAAA;AAEtB;AAEO,MAAME,IAAQC,EAAyC,CAACC,GAAOC,MAAQ;AAC5E,QAAM;AAAA,IACJ,WAAAC;AAAA,IACA,MAAAR,IAAO;AAAA,IACP,SAAAD,IAAU;AAAA,IACV,OAAAU;AAAA,IACA,cAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDP,GAGE,EAAE,UAAAQ,MAAaD;AAGrB,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,UAAME,IAAW,EAAQN,GACnBO,IAA6B,GACjCH,EAAW,eAAeA,EAAW,YAAY,IAE7CI,IAAoB,EAAQJ,EAAW,iBAAiB;AAE9D,IAAI,CAACE,KAAY,CAACC,KAA8B,CAACC,KAC/C,QAAQ;AAAA,MACN;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EAMN;AAEA,QAAMC,IACJ,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAb;AAAA,MACA,WAAWJ;AAAA,QACTL,EAAc,EAAE,MAAAE,GAAM,SAAAD,GAAS,gBAAgB,IAAM;AAAA,QACrDS;AAAA,MAAA;AAAA,MAED,GAAGK;AAAA,IAAA;AAAA,EAAA;AAKR,SAAIJ,IAEA,gBAAAU;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,OAAAZ;AAAA,MACA,UAAAK;AAAA,MACA,cAAAJ;AAAA,MACA,aAAAC;AAAA,MACA,OACEC,IACI,OAAOA,KAAU,WACf,EAAE,SAASA,GAAO,OAAO,GAAA,IACzBA,IACF;AAAA,MAGL,UAAAM;AAAA,IAAA;AAAA,EAAA,IAMAA;AACT,CAAC;AAEDd,EAAM,cAAc;"}
@@ -1,16 +1,16 @@
1
1
  "use client";
2
2
  import { jsx as i } from "react/jsx-runtime";
3
- import { i as C } from "./input-Dqvc2AB_.js";
3
+ import { i as C } from "./input-D6YgDfDG.js";
4
4
  import { c as b } from "./cn-Bhsu1vx2.js";
5
5
  import * as x from "react";
6
6
  import { useCallback as I } from "react";
7
- import { F as y } from "./field-V3J0Ql_V.js";
7
+ import { F as y } from "./field-B7ORz5ej.js";
8
8
  const N = x.forwardRef(
9
- (c, l) => {
9
+ (l, m) => {
10
10
  const {
11
- className: m,
11
+ className: p,
12
12
  onValueChange: r,
13
- size: p = "base",
13
+ size: c = "base",
14
14
  variant: u = "default",
15
15
  onChange: e,
16
16
  label: t,
@@ -18,7 +18,7 @@ const N = x.forwardRef(
18
18
  description: d,
19
19
  error: a,
20
20
  ...o
21
- } = c, { required: h } = o, g = I(
21
+ } = l, { required: h } = o, g = I(
22
22
  (n) => {
23
23
  e?.(n), r?.(n.target.value);
24
24
  },
@@ -26,12 +26,12 @@ const N = x.forwardRef(
26
26
  ), s = /* @__PURE__ */ i(
27
27
  "textarea",
28
28
  {
29
- ref: l,
29
+ ref: m,
30
30
  className: b(
31
- C({ size: p, variant: u, focusIndicator: !0 }),
31
+ C({ size: c, variant: u, focusIndicator: !0 }),
32
32
  "h-auto py-2",
33
33
  // Input variant always come with size, but it does not apply for textarea
34
- m
34
+ p
35
35
  ),
36
36
  onChange: g,
37
37
  ...o
@@ -54,4 +54,4 @@ N.displayName = "InputArea";
54
54
  export {
55
55
  N as I
56
56
  };
57
- //# sourceMappingURL=input-area-B9qajxvZ.js.map
57
+ //# sourceMappingURL=input-area-DN_Ncliw.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"input-area-B9qajxvZ.js","sources":["../src/components/input/input-area.tsx"],"sourcesContent":["import { inputVariants } from \"./input\";\nimport { cn } from \"../../utils/cn\";\nimport { useCallback, type ReactNode } from \"react\";\nimport * as React from \"react\";\nimport { Field as KumoField, type FieldErrorMatch } from \"../field/field\";\n\nexport const InputArea = React.forwardRef<HTMLTextAreaElement, InputAreaProps>(\n (props, ref) => {\n const {\n className,\n onValueChange,\n size = \"base\",\n variant = \"default\",\n onChange,\n label,\n labelTooltip,\n description,\n error,\n ...inputProps\n } = props;\n\n // Extract required from inputProps to pass to Field for label decoration\n const { required } = inputProps;\n const handleChange = useCallback(\n (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n onChange?.(event);\n onValueChange?.(event.target.value);\n },\n [onChange, onValueChange],\n );\n\n const textarea = (\n <textarea\n ref={ref}\n className={cn(\n inputVariants({ size, variant, focusIndicator: true }),\n \"h-auto py-2\", // Input variant always come with size, but it does not apply for textarea\n className,\n )}\n onChange={handleChange}\n {...inputProps}\n />\n );\n\n // Render with Field wrapper if label is provided\n if (label) {\n return (\n <KumoField\n label={label}\n required={required}\n labelTooltip={labelTooltip}\n description={description}\n error={\n error\n ? typeof error === \"string\"\n ? { message: error, match: true }\n : error\n : undefined\n }\n >\n {textarea}\n </KumoField>\n );\n }\n\n // Render bare textarea without Field wrapper\n return textarea;\n },\n);\n\nInputArea.displayName = \"InputArea\";\n\n/**\n * InputArea component props\n * @property {ReactNode} [label] - Label content for the textarea (enables Field wrapper)\n * @property {ReactNode} [description] - Helper text displayed below the textarea\n * @property {string | { message: ReactNode, match: FieldErrorMatch }} [error] - Error message or validation error object\n */\nexport type InputAreaProps = {\n onValueChange?: (value: string) => void;\n variant?: \"default\" | \"error\";\n size?: \"xs\" | \"sm\" | \"base\" | \"lg\";\n // Then other custom props\n children?: React.ReactNode;\n className?: string;\n /** Label content for the textarea (enables Field wrapper) - can be a string or any React node */\n label?: ReactNode;\n /** Tooltip content to display next to the label via an info icon */\n labelTooltip?: ReactNode;\n /** Helper text displayed below the textarea */\n description?: ReactNode;\n /** Error message or validation error object */\n error?: string | { message: ReactNode; match: FieldErrorMatch };\n\n // Finally, spread the native input props (least important)\n} & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, \"size\">;\n"],"names":["InputArea","React","props","ref","className","onValueChange","size","variant","onChange","label","labelTooltip","description","error","inputProps","required","handleChange","useCallback","event","textarea","jsx","cn","inputVariants","KumoField"],"mappings":";;;;;;;AAMO,MAAMA,IAAYC,EAAM;AAAA,EAC7B,CAACC,GAAOC,MAAQ;AACd,UAAM;AAAA,MACJ,WAAAC;AAAA,MACA,eAAAC;AAAA,MACA,MAAAC,IAAO;AAAA,MACP,SAAAC,IAAU;AAAA,MACV,UAAAC;AAAA,MACA,OAAAC;AAAA,MACA,cAAAC;AAAA,MACA,aAAAC;AAAA,MACA,OAAAC;AAAA,MACA,GAAGC;AAAA,IAAA,IACDX,GAGE,EAAE,UAAAY,MAAaD,GACfE,IAAeC;AAAA,MACnB,CAACC,MAAkD;AACjD,QAAAT,IAAWS,CAAK,GAChBZ,IAAgBY,EAAM,OAAO,KAAK;AAAA,MACpC;AAAA,MACA,CAACT,GAAUH,CAAa;AAAA,IAAA,GAGpBa,IACJ,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAhB;AAAA,QACA,WAAWiB;AAAA,UACTC,EAAc,EAAE,MAAAf,GAAM,SAAAC,GAAS,gBAAgB,IAAM;AAAA,UACrD;AAAA;AAAA,UACAH;AAAA,QAAA;AAAA,QAEF,UAAUW;AAAA,QACT,GAAGF;AAAA,MAAA;AAAA,IAAA;AAKR,WAAIJ,IAEA,gBAAAU;AAAA,MAACG;AAAAA,MAAA;AAAA,QACC,OAAAb;AAAA,QACA,UAAAK;AAAA,QACA,cAAAJ;AAAA,QACA,aAAAC;AAAA,QACA,OACEC,IACI,OAAOA,KAAU,WACf,EAAE,SAASA,GAAO,OAAO,GAAA,IACzBA,IACF;AAAA,QAGL,UAAAM;AAAA,MAAA;AAAA,IAAA,IAMAA;AAAA,EACT;AACF;AAEAlB,EAAU,cAAc;"}
1
+ {"version":3,"file":"input-area-DN_Ncliw.js","sources":["../src/components/input/input-area.tsx"],"sourcesContent":["import { inputVariants } from \"./input\";\nimport { cn } from \"../../utils/cn\";\nimport { useCallback, type ReactNode } from \"react\";\nimport * as React from \"react\";\nimport { Field as KumoField, type FieldErrorMatch } from \"../field/field\";\n\nexport const InputArea = React.forwardRef<HTMLTextAreaElement, InputAreaProps>(\n (props, ref) => {\n const {\n className,\n onValueChange,\n size = \"base\",\n variant = \"default\",\n onChange,\n label,\n labelTooltip,\n description,\n error,\n ...inputProps\n } = props;\n\n // Extract required from inputProps to pass to Field for label decoration\n const { required } = inputProps;\n const handleChange = useCallback(\n (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n onChange?.(event);\n onValueChange?.(event.target.value);\n },\n [onChange, onValueChange],\n );\n\n const textarea = (\n <textarea\n ref={ref}\n className={cn(\n inputVariants({ size, variant, focusIndicator: true }),\n \"h-auto py-2\", // Input variant always come with size, but it does not apply for textarea\n className,\n )}\n onChange={handleChange}\n {...inputProps}\n />\n );\n\n // Render with Field wrapper if label is provided\n if (label) {\n return (\n <KumoField\n label={label}\n required={required}\n labelTooltip={labelTooltip}\n description={description}\n error={\n error\n ? typeof error === \"string\"\n ? { message: error, match: true }\n : error\n : undefined\n }\n >\n {textarea}\n </KumoField>\n );\n }\n\n // Render bare textarea without Field wrapper\n return textarea;\n },\n);\n\nInputArea.displayName = \"InputArea\";\n\n/**\n * InputArea component props\n * @property {ReactNode} [label] - Label content for the textarea (enables Field wrapper)\n * @property {ReactNode} [description] - Helper text displayed below the textarea\n * @property {string | { message: ReactNode, match: FieldErrorMatch }} [error] - Error message or validation error object\n */\nexport type InputAreaProps = {\n onValueChange?: (value: string) => void;\n variant?: \"default\" | \"error\";\n size?: \"xs\" | \"sm\" | \"base\" | \"lg\";\n // Then other custom props\n children?: React.ReactNode;\n className?: string;\n /** Label content for the textarea (enables Field wrapper) - can be a string or any React node */\n label?: ReactNode;\n /** Tooltip content to display next to the label via an info icon */\n labelTooltip?: ReactNode;\n /** Helper text displayed below the textarea */\n description?: ReactNode;\n /** Error message or validation error object */\n error?: string | { message: ReactNode; match: FieldErrorMatch };\n\n // Finally, spread the native input props (least important)\n} & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, \"size\">;\n"],"names":["InputArea","React","props","ref","className","onValueChange","size","variant","onChange","label","labelTooltip","description","error","inputProps","required","handleChange","useCallback","event","textarea","jsx","cn","inputVariants","KumoField"],"mappings":";;;;;;;AAMO,MAAMA,IAAYC,EAAM;AAAA,EAC7B,CAACC,GAAOC,MAAQ;AACd,UAAM;AAAA,MACJ,WAAAC;AAAA,MACA,eAAAC;AAAA,MACA,MAAAC,IAAO;AAAA,MACP,SAAAC,IAAU;AAAA,MACV,UAAAC;AAAA,MACA,OAAAC;AAAA,MACA,cAAAC;AAAA,MACA,aAAAC;AAAA,MACA,OAAAC;AAAA,MACA,GAAGC;AAAA,IAAA,IACDX,GAGE,EAAE,UAAAY,MAAaD,GACfE,IAAeC;AAAA,MACnB,CAACC,MAAkD;AACjD,QAAAT,IAAWS,CAAK,GAChBZ,IAAgBY,EAAM,OAAO,KAAK;AAAA,MACpC;AAAA,MACA,CAACT,GAAUH,CAAa;AAAA,IAAA,GAGpBa,IACJ,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAhB;AAAA,QACA,WAAWiB;AAAA,UACTC,EAAc,EAAE,MAAAf,GAAM,SAAAC,GAAS,gBAAgB,IAAM;AAAA,UACrD;AAAA;AAAA,UACAH;AAAA,QAAA;AAAA,QAEF,UAAUW;AAAA,QACT,GAAGF;AAAA,MAAA;AAAA,IAAA;AAKR,WAAIJ,IAEA,gBAAAU;AAAA,MAACG;AAAAA,MAAA;AAAA,QACC,OAAAb;AAAA,QACA,UAAAK;AAAA,QACA,cAAAJ;AAAA,QACA,aAAAC;AAAA,QACA,OACEC,IACI,OAAOA,KAAU,WACf,EAAE,SAASA,GAAO,OAAO,GAAA,IACzBA,IACF;AAAA,QAGL,UAAAM;AAAA,MAAA;AAAA,IAAA,IAMAA;AAAA,EACT;AACF;AAEAlB,EAAU,cAAc;"}
@@ -1,10 +1,10 @@
1
1
  "use client";
2
- import { jsx as o } from "react/jsx-runtime";
2
+ import { jsx as e } from "react/jsx-runtime";
3
3
  import * as d from "react";
4
- import { useContext as c } from "react";
4
+ import { useContext as l } from "react";
5
5
  import { c as s } from "./cn-Bhsu1vx2.js";
6
- import { i as m, I as p } from "./input-Dqvc2AB_.js";
7
- import { B as x } from "./button-E2-hZMZE.js";
6
+ import { i as m, I as p } from "./input-D6YgDfDG.js";
7
+ import { B as x } from "./button-Bh96oxRL.js";
8
8
  const I = {
9
9
  focusMode: "container"
10
10
  }, r = d.createContext(
@@ -13,43 +13,43 @@ const I = {
13
13
  function v({
14
14
  size: n,
15
15
  children: i,
16
- className: t,
17
- focusMode: e = I.focusMode
16
+ className: o,
17
+ focusMode: t = I.focusMode
18
18
  }) {
19
- const u = d.useId(), l = d.useId(), f = d.useMemo(
20
- () => ({ size: n, inputId: u, descriptionId: l, focusMode: e }),
21
- [n, u, l, e]
22
- ), a = e === "individual";
23
- return /* @__PURE__ */ o(r.Provider, { value: f, children: /* @__PURE__ */ o(
19
+ const u = d.useId(), c = d.useId(), f = d.useMemo(
20
+ () => ({ size: n, inputId: u, descriptionId: c, focusMode: t }),
21
+ [n, u, c, t]
22
+ ), a = t === "individual";
23
+ return /* @__PURE__ */ e(r.Provider, { value: f, children: /* @__PURE__ */ e(
24
24
  "div",
25
25
  {
26
26
  className: s(
27
27
  m({ size: n, parentFocusIndicator: !a }),
28
28
  "flex w-full gap-0 border-0 px-0",
29
29
  a ? "overflow-visible" : "overflow-hidden shadow-xs ring ring-kumo-line focus-within:ring-kumo-ring",
30
- t
30
+ o
31
31
  ),
32
32
  children: i
33
33
  }
34
34
  ) });
35
35
  }
36
36
  function h({ children: n }) {
37
- const i = c(r), t = i?.focusMode === "individual";
38
- return /* @__PURE__ */ o(
37
+ const i = l(r), o = i?.focusMode === "individual";
38
+ return /* @__PURE__ */ e(
39
39
  "label",
40
40
  {
41
41
  htmlFor: i?.inputId,
42
42
  className: s(
43
43
  "flex h-full items-center p-0 px-2 text-kumo-subtle",
44
- t && "first:rounded-l-[inherit] last:rounded-r-[inherit]"
44
+ o && "first:rounded-l-[inherit] last:rounded-r-[inherit]"
45
45
  ),
46
46
  children: n
47
47
  }
48
48
  );
49
49
  }
50
50
  function b(n) {
51
- const i = c(r), t = i?.focusMode === "individual";
52
- return /* @__PURE__ */ o(
51
+ const i = l(r), o = i?.focusMode === "individual";
52
+ return /* @__PURE__ */ e(
53
53
  p,
54
54
  {
55
55
  id: i?.inputId,
@@ -59,21 +59,21 @@ function b(n) {
59
59
  className: s(
60
60
  "flex h-full items-center rounded-none border-0 bg-kumo-base font-sans",
61
61
  "grow px-2",
62
- t ? "relative ring ring-kumo-line first:rounded-l-[inherit] last:rounded-r-[inherit] focus:z-10 focus:outline" : "focus:border-kumo-fill",
62
+ o ? "relative ring ring-kumo-line first:rounded-l-[inherit] last:rounded-r-[inherit] focus:z-10 focus:outline" : "focus:border-kumo-fill",
63
63
  n.className
64
64
  )
65
65
  }
66
66
  );
67
67
  }
68
68
  function g({ children: n }) {
69
- const i = c(r), t = i?.focusMode === "individual";
70
- return /* @__PURE__ */ o(
69
+ const i = l(r), o = i?.focusMode === "individual";
70
+ return /* @__PURE__ */ e(
71
71
  "span",
72
72
  {
73
73
  id: i?.descriptionId,
74
74
  className: s(
75
75
  "flex h-full items-center p-0 px-2 text-kumo-subtle",
76
- t && "first:rounded-l-[inherit] last:rounded-r-[inherit]"
76
+ o && "first:rounded-l-[inherit] last:rounded-r-[inherit]"
77
77
  ),
78
78
  children: n
79
79
  }
@@ -82,14 +82,14 @@ function g({ children: n }) {
82
82
  function k({
83
83
  children: n,
84
84
  className: i,
85
- ...t
85
+ ...o
86
86
  }) {
87
- const e = c(r), u = e?.focusMode === "individual";
88
- return /* @__PURE__ */ o(
87
+ const t = l(r), u = t?.focusMode === "individual";
88
+ return /* @__PURE__ */ e(
89
89
  x,
90
90
  {
91
- ...t,
92
- size: e?.size,
91
+ ...o,
92
+ size: t?.size,
93
93
  className: s(
94
94
  "h-full! rounded-none disabled:bg-kumo-overlay disabled:text-kumo-inactive!",
95
95
  u && "relative ring ring-kumo-line first:rounded-l-[inherit] last:rounded-r-[inherit] focus:z-10 focus:outline",
@@ -99,13 +99,13 @@ function k({
99
99
  }
100
100
  );
101
101
  }
102
- const R = Object.assign(v, {
102
+ const U = Object.assign(v, {
103
103
  Label: h,
104
104
  Input: b,
105
105
  Button: k,
106
106
  Description: g
107
107
  });
108
108
  export {
109
- R as I
109
+ U as I
110
110
  };
111
- //# sourceMappingURL=input-group-Bl6tgD5-.js.map
111
+ //# sourceMappingURL=input-group-BXzBwH4p.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"input-group-Bl6tgD5-.js","sources":["../src/components/input/input-group.tsx"],"sourcesContent":["import { type PropsWithChildren, useContext } from \"react\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport {\n Input as InputExternal,\n type InputProps,\n inputVariants,\n} from \"./input\";\nimport { type ButtonProps, Button as ButtonExternal } from \"../button/button\";\n\nexport const KUMO_INPUT_GROUP_VARIANTS = {\n focusMode: {\n container: {\n classes: \"\",\n description: \"Focus indicator on container (default behavior)\",\n },\n individual: {\n classes: \"\",\n description: \"Focus indicators on individual elements\",\n },\n },\n} as const;\n\nexport const KUMO_INPUT_GROUP_DEFAULT_VARIANTS = {\n focusMode: \"container\",\n} as const;\n\nexport type KumoInputGroupFocusMode =\n keyof typeof KUMO_INPUT_GROUP_VARIANTS.focusMode;\n\nexport interface KumoInputGroupVariantsProps {\n focusMode?: KumoInputGroupFocusMode;\n}\n\ninterface InputGroupRootProps extends KumoInputGroupVariantsProps {\n className?: string;\n size?: \"xs\" | \"sm\" | \"base\" | \"lg\" | undefined;\n}\n\ninterface InputGroupContextValue extends InputGroupRootProps {\n inputId: string;\n descriptionId: string;\n}\n\nconst InputGroupContext = React.createContext<InputGroupContextValue | null>(\n null,\n);\n\nfunction Root({\n size,\n children,\n className,\n focusMode = KUMO_INPUT_GROUP_DEFAULT_VARIANTS.focusMode,\n}: PropsWithChildren<InputGroupRootProps>) {\n const inputId = React.useId();\n const descriptionId = React.useId();\n const contextValue = React.useMemo(\n () => ({ size, inputId, descriptionId, focusMode }),\n [size, inputId, descriptionId, focusMode],\n );\n\n const isIndividualFocus = focusMode === \"individual\";\n\n return (\n <InputGroupContext.Provider value={contextValue}>\n <div\n className={cn(\n inputVariants({ size, parentFocusIndicator: !isIndividualFocus }),\n \"flex w-full gap-0 border-0 px-0\",\n isIndividualFocus\n ? \"overflow-visible\"\n : \"overflow-hidden shadow-xs ring ring-kumo-line focus-within:ring-kumo-ring\",\n className,\n )}\n >\n {children}\n </div>\n </InputGroupContext.Provider>\n );\n}\n\nfunction Label({ children }: PropsWithChildren<{}>) {\n const context = useContext(InputGroupContext);\n const isIndividualFocus = context?.focusMode === \"individual\";\n\n return (\n <label\n htmlFor={context?.inputId}\n className={cn(\n \"flex h-full items-center p-0 px-2 text-kumo-subtle\",\n isIndividualFocus &&\n \"first:rounded-l-[inherit] last:rounded-r-[inherit]\",\n )}\n >\n {children}\n </label>\n );\n}\n\nfunction Input(props: InputProps) {\n const context = useContext(InputGroupContext);\n const isIndividualFocus = context?.focusMode === \"individual\";\n\n return (\n <InputExternal\n id={context?.inputId}\n aria-describedby={context?.descriptionId}\n size={context?.size}\n {...props}\n className={cn(\n \"flex h-full items-center rounded-none border-0 bg-kumo-base font-sans\",\n \"grow px-2\",\n isIndividualFocus\n ? \"relative ring ring-kumo-line first:rounded-l-[inherit] last:rounded-r-[inherit] focus:z-10 focus:outline\"\n : \"focus:border-kumo-fill\",\n props.className,\n )}\n />\n );\n}\n\nfunction Description({ children }: PropsWithChildren<{}>) {\n const context = useContext(InputGroupContext);\n const isIndividualFocus = context?.focusMode === \"individual\";\n\n return (\n <span\n id={context?.descriptionId}\n className={cn(\n \"flex h-full items-center p-0 px-2 text-kumo-subtle\",\n isIndividualFocus &&\n \"first:rounded-l-[inherit] last:rounded-r-[inherit]\",\n )}\n >\n {children}\n </span>\n );\n}\n\nfunction Button({\n children,\n className,\n ...props\n}: PropsWithChildren<ButtonProps>) {\n const context = useContext(InputGroupContext);\n const isIndividualFocus = context?.focusMode === \"individual\";\n\n return (\n <ButtonExternal\n {...props}\n size={context?.size}\n className={cn(\n \"h-full! rounded-none disabled:bg-kumo-overlay disabled:text-kumo-inactive!\",\n isIndividualFocus &&\n \"relative ring ring-kumo-line first:rounded-l-[inherit] last:rounded-r-[inherit] focus:z-10 focus:outline\",\n className,\n )}\n >\n {children}\n </ButtonExternal>\n );\n}\n\nexport const InputGroup = Object.assign(Root, {\n Label,\n Input,\n Button,\n Description,\n});\n"],"names":["KUMO_INPUT_GROUP_DEFAULT_VARIANTS","InputGroupContext","React","Root","size","children","className","focusMode","inputId","descriptionId","contextValue","isIndividualFocus","jsx","cn","inputVariants","Label","context","useContext","Input","props","InputExternal","Description","Button","ButtonExternal","InputGroup"],"mappings":";;;;;;;AAuBO,MAAMA,IAAoC;AAAA,EAC/C,WAAW;AACb,GAmBMC,IAAoBC,EAAM;AAAA,EAC9B;AACF;AAEA,SAASC,EAAK;AAAA,EACZ,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC,IAAYP,EAAkC;AAChD,GAA2C;AACzC,QAAMQ,IAAUN,EAAM,MAAA,GAChBO,IAAgBP,EAAM,MAAA,GACtBQ,IAAeR,EAAM;AAAA,IACzB,OAAO,EAAE,MAAAE,GAAM,SAAAI,GAAS,eAAAC,GAAe,WAAAF,EAAA;AAAA,IACvC,CAACH,GAAMI,GAASC,GAAeF,CAAS;AAAA,EAAA,GAGpCI,IAAoBJ,MAAc;AAExC,SACE,gBAAAK,EAACX,EAAkB,UAAlB,EAA2B,OAAOS,GACjC,UAAA,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTC,EAAc,EAAE,MAAAV,GAAM,sBAAsB,CAACO,GAAmB;AAAA,QAChE;AAAA,QACAA,IACI,qBACA;AAAA,QACJL;AAAA,MAAA;AAAA,MAGD,UAAAD;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;AAEA,SAASU,EAAM,EAAE,UAAAV,KAAmC;AAClD,QAAMW,IAAUC,EAAWhB,CAAiB,GACtCU,IAAoBK,GAAS,cAAc;AAEjD,SACE,gBAAAJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAASI,GAAS;AAAA,MAClB,WAAWH;AAAA,QACT;AAAA,QACAF,KACE;AAAA,MAAA;AAAA,MAGH,UAAAN;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,SAASa,EAAMC,GAAmB;AAChC,QAAMH,IAAUC,EAAWhB,CAAiB,GACtCU,IAAoBK,GAAS,cAAc;AAEjD,SACE,gBAAAJ;AAAA,IAACQ;AAAAA,IAAA;AAAA,MACC,IAAIJ,GAAS;AAAA,MACb,oBAAkBA,GAAS;AAAA,MAC3B,MAAMA,GAAS;AAAA,MACd,GAAGG;AAAA,MACJ,WAAWN;AAAA,QACT;AAAA,QACA;AAAA,QACAF,IACI,6GACA;AAAA,QACJQ,EAAM;AAAA,MAAA;AAAA,IACR;AAAA,EAAA;AAGN;AAEA,SAASE,EAAY,EAAE,UAAAhB,KAAmC;AACxD,QAAMW,IAAUC,EAAWhB,CAAiB,GACtCU,IAAoBK,GAAS,cAAc;AAEjD,SACE,gBAAAJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAII,GAAS;AAAA,MACb,WAAWH;AAAA,QACT;AAAA,QACAF,KACE;AAAA,MAAA;AAAA,MAGH,UAAAN;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,SAASiB,EAAO;AAAA,EACd,UAAAjB;AAAA,EACA,WAAAC;AAAA,EACA,GAAGa;AACL,GAAmC;AACjC,QAAMH,IAAUC,EAAWhB,CAAiB,GACtCU,IAAoBK,GAAS,cAAc;AAEjD,SACE,gBAAAJ;AAAA,IAACW;AAAAA,IAAA;AAAA,MACE,GAAGJ;AAAA,MACJ,MAAMH,GAAS;AAAA,MACf,WAAWH;AAAA,QACT;AAAA,QACAF,KACE;AAAA,QACFL;AAAA,MAAA;AAAA,MAGD,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP;AAEO,MAAMmB,IAAa,OAAO,OAAOrB,GAAM;AAAA,EAC5C,OAAAY;AAAA,EACA,OAAAG;AAAA,EACA,QAAAI;AAAA,EACA,aAAAD;AACF,CAAC;"}
1
+ {"version":3,"file":"input-group-BXzBwH4p.js","sources":["../src/components/input/input-group.tsx"],"sourcesContent":["import { type PropsWithChildren, useContext } from \"react\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport {\n Input as InputExternal,\n type InputProps,\n inputVariants,\n} from \"./input\";\nimport { type ButtonProps, Button as ButtonExternal } from \"../button/button\";\n\nexport const KUMO_INPUT_GROUP_VARIANTS = {\n focusMode: {\n container: {\n classes: \"\",\n description: \"Focus indicator on container (default behavior)\",\n },\n individual: {\n classes: \"\",\n description: \"Focus indicators on individual elements\",\n },\n },\n} as const;\n\nexport const KUMO_INPUT_GROUP_DEFAULT_VARIANTS = {\n focusMode: \"container\",\n} as const;\n\nexport type KumoInputGroupFocusMode =\n keyof typeof KUMO_INPUT_GROUP_VARIANTS.focusMode;\n\nexport interface KumoInputGroupVariantsProps {\n focusMode?: KumoInputGroupFocusMode;\n}\n\ninterface InputGroupRootProps extends KumoInputGroupVariantsProps {\n className?: string;\n size?: \"xs\" | \"sm\" | \"base\" | \"lg\" | undefined;\n}\n\ninterface InputGroupContextValue extends InputGroupRootProps {\n inputId: string;\n descriptionId: string;\n}\n\nconst InputGroupContext = React.createContext<InputGroupContextValue | null>(\n null,\n);\n\nfunction Root({\n size,\n children,\n className,\n focusMode = KUMO_INPUT_GROUP_DEFAULT_VARIANTS.focusMode,\n}: PropsWithChildren<InputGroupRootProps>) {\n const inputId = React.useId();\n const descriptionId = React.useId();\n const contextValue = React.useMemo(\n () => ({ size, inputId, descriptionId, focusMode }),\n [size, inputId, descriptionId, focusMode],\n );\n\n const isIndividualFocus = focusMode === \"individual\";\n\n return (\n <InputGroupContext.Provider value={contextValue}>\n <div\n className={cn(\n inputVariants({ size, parentFocusIndicator: !isIndividualFocus }),\n \"flex w-full gap-0 border-0 px-0\",\n isIndividualFocus\n ? \"overflow-visible\"\n : \"overflow-hidden shadow-xs ring ring-kumo-line focus-within:ring-kumo-ring\",\n className,\n )}\n >\n {children}\n </div>\n </InputGroupContext.Provider>\n );\n}\n\nfunction Label({ children }: PropsWithChildren<{}>) {\n const context = useContext(InputGroupContext);\n const isIndividualFocus = context?.focusMode === \"individual\";\n\n return (\n <label\n htmlFor={context?.inputId}\n className={cn(\n \"flex h-full items-center p-0 px-2 text-kumo-subtle\",\n isIndividualFocus &&\n \"first:rounded-l-[inherit] last:rounded-r-[inherit]\",\n )}\n >\n {children}\n </label>\n );\n}\n\nfunction Input(props: InputProps) {\n const context = useContext(InputGroupContext);\n const isIndividualFocus = context?.focusMode === \"individual\";\n\n return (\n <InputExternal\n id={context?.inputId}\n aria-describedby={context?.descriptionId}\n size={context?.size}\n {...props}\n className={cn(\n \"flex h-full items-center rounded-none border-0 bg-kumo-base font-sans\",\n \"grow px-2\",\n isIndividualFocus\n ? \"relative ring ring-kumo-line first:rounded-l-[inherit] last:rounded-r-[inherit] focus:z-10 focus:outline\"\n : \"focus:border-kumo-fill\",\n props.className,\n )}\n />\n );\n}\n\nfunction Description({ children }: PropsWithChildren<{}>) {\n const context = useContext(InputGroupContext);\n const isIndividualFocus = context?.focusMode === \"individual\";\n\n return (\n <span\n id={context?.descriptionId}\n className={cn(\n \"flex h-full items-center p-0 px-2 text-kumo-subtle\",\n isIndividualFocus &&\n \"first:rounded-l-[inherit] last:rounded-r-[inherit]\",\n )}\n >\n {children}\n </span>\n );\n}\n\nfunction Button({\n children,\n className,\n ...props\n}: PropsWithChildren<ButtonProps>) {\n const context = useContext(InputGroupContext);\n const isIndividualFocus = context?.focusMode === \"individual\";\n\n return (\n <ButtonExternal\n {...props}\n size={context?.size}\n className={cn(\n \"h-full! rounded-none disabled:bg-kumo-overlay disabled:text-kumo-inactive!\",\n isIndividualFocus &&\n \"relative ring ring-kumo-line first:rounded-l-[inherit] last:rounded-r-[inherit] focus:z-10 focus:outline\",\n className,\n )}\n >\n {children}\n </ButtonExternal>\n );\n}\n\nexport const InputGroup = Object.assign(Root, {\n Label,\n Input,\n Button,\n Description,\n});\n"],"names":["KUMO_INPUT_GROUP_DEFAULT_VARIANTS","InputGroupContext","React","Root","size","children","className","focusMode","inputId","descriptionId","contextValue","isIndividualFocus","jsx","cn","inputVariants","Label","context","useContext","Input","props","InputExternal","Description","Button","ButtonExternal","InputGroup"],"mappings":";;;;;;;AAuBO,MAAMA,IAAoC;AAAA,EAC/C,WAAW;AACb,GAmBMC,IAAoBC,EAAM;AAAA,EAC9B;AACF;AAEA,SAASC,EAAK;AAAA,EACZ,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC,IAAYP,EAAkC;AAChD,GAA2C;AACzC,QAAMQ,IAAUN,EAAM,MAAA,GAChBO,IAAgBP,EAAM,MAAA,GACtBQ,IAAeR,EAAM;AAAA,IACzB,OAAO,EAAE,MAAAE,GAAM,SAAAI,GAAS,eAAAC,GAAe,WAAAF,EAAA;AAAA,IACvC,CAACH,GAAMI,GAASC,GAAeF,CAAS;AAAA,EAAA,GAGpCI,IAAoBJ,MAAc;AAExC,SACE,gBAAAK,EAACX,EAAkB,UAAlB,EAA2B,OAAOS,GACjC,UAAA,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTC,EAAc,EAAE,MAAAV,GAAM,sBAAsB,CAACO,GAAmB;AAAA,QAChE;AAAA,QACAA,IACI,qBACA;AAAA,QACJL;AAAA,MAAA;AAAA,MAGD,UAAAD;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;AAEA,SAASU,EAAM,EAAE,UAAAV,KAAmC;AAClD,QAAMW,IAAUC,EAAWhB,CAAiB,GACtCU,IAAoBK,GAAS,cAAc;AAEjD,SACE,gBAAAJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAASI,GAAS;AAAA,MAClB,WAAWH;AAAA,QACT;AAAA,QACAF,KACE;AAAA,MAAA;AAAA,MAGH,UAAAN;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,SAASa,EAAMC,GAAmB;AAChC,QAAMH,IAAUC,EAAWhB,CAAiB,GACtCU,IAAoBK,GAAS,cAAc;AAEjD,SACE,gBAAAJ;AAAA,IAACQ;AAAAA,IAAA;AAAA,MACC,IAAIJ,GAAS;AAAA,MACb,oBAAkBA,GAAS;AAAA,MAC3B,MAAMA,GAAS;AAAA,MACd,GAAGG;AAAA,MACJ,WAAWN;AAAA,QACT;AAAA,QACA;AAAA,QACAF,IACI,6GACA;AAAA,QACJQ,EAAM;AAAA,MAAA;AAAA,IACR;AAAA,EAAA;AAGN;AAEA,SAASE,EAAY,EAAE,UAAAhB,KAAmC;AACxD,QAAMW,IAAUC,EAAWhB,CAAiB,GACtCU,IAAoBK,GAAS,cAAc;AAEjD,SACE,gBAAAJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAII,GAAS;AAAA,MACb,WAAWH;AAAA,QACT;AAAA,QACAF,KACE;AAAA,MAAA;AAAA,MAGH,UAAAN;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,SAASiB,EAAO;AAAA,EACd,UAAAjB;AAAA,EACA,WAAAC;AAAA,EACA,GAAGa;AACL,GAAmC;AACjC,QAAMH,IAAUC,EAAWhB,CAAiB,GACtCU,IAAoBK,GAAS,cAAc;AAEjD,SACE,gBAAAJ;AAAA,IAACW;AAAAA,IAAA;AAAA,MACE,GAAGJ;AAAA,MACJ,MAAMH,GAAS;AAAA,MACf,WAAWH;AAAA,QACT;AAAA,QACAF,KACE;AAAA,QACFL;AAAA,MAAA;AAAA,MAGD,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP;AAEO,MAAMmB,IAAa,OAAO,OAAOrB,GAAM;AAAA,EAC5C,OAAAY;AAAA,EACA,OAAAG;AAAA,EACA,QAAAI;AAAA,EACA,aAAAD;AACF,CAAC;"}
@@ -2,7 +2,7 @@
2
2
  import { jsx as n, jsxs as c, Fragment as m } from "react/jsx-runtime";
3
3
  import { Info as f } from "@phosphor-icons/react";
4
4
  import { c as e } from "./cn-Bhsu1vx2.js";
5
- import { T as p } from "./tooltip-DJWsDTWJ.js";
5
+ import { T as p } from "./tooltip-C4DRhJi1.js";
6
6
  const h = {
7
7
  // Label currently has no variant options but structure is ready for future additions
8
8
  }, N = {};
@@ -47,4 +47,4 @@ export {
47
47
  N as b,
48
48
  u as l
49
49
  };
50
- //# sourceMappingURL=label-87HQArUG.js.map
50
+ //# sourceMappingURL=label-B4FY8MX_.js.map