@cloudflare/kumo 1.14.1 → 1.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +45 -0
- package/ai/component-registry.json +405 -19
- package/ai/component-registry.md +539 -28
- package/ai/schemas.ts +19 -3
- package/dist/.build-complete +1 -1
- package/dist/ai/schemas.d.ts +61 -2
- package/dist/ai/schemas.d.ts.map +1 -1
- package/dist/ai/schemas.js +367 -342
- package/dist/ai/schemas.js.map +1 -1
- package/dist/chunks/{Legend-mkh1v83sz972e29d.js → Legend-bov5dqf08wemc2qj.js} +112 -100
- package/dist/chunks/Legend-bov5dqf08wemc2qj.js.map +1 -0
- package/dist/chunks/{breadcrumbs-gr907zcoo65rpn90.js → breadcrumbs-m79gm4gjwbfajpna.js} +2 -2
- package/dist/chunks/{breadcrumbs-gr907zcoo65rpn90.js.map → breadcrumbs-m79gm4gjwbfajpna.js.map} +1 -1
- package/dist/chunks/{button-d82sexqgnd834eaa.js → button-j0hi0afn33w9lxgi.js} +2 -2
- package/dist/chunks/button-j0hi0afn33w9lxgi.js.map +1 -0
- package/dist/chunks/{checkbox-f4qsbq6xycaji7qw.js → checkbox-lawmt1894wr6rpgi.js} +3 -3
- package/dist/chunks/{checkbox-f4qsbq6xycaji7qw.js.map → checkbox-lawmt1894wr6rpgi.js.map} +1 -1
- package/dist/chunks/{clipboard-text-fvggzgqrza82t5om.js → clipboard-text-ohx8kkpxisz382rj.js} +4 -4
- package/dist/chunks/{clipboard-text-fvggzgqrza82t5om.js.map → clipboard-text-ohx8kkpxisz382rj.js.map} +1 -1
- package/dist/chunks/{combobox-om4zw74o076sa00p.js → combobox-ft0u7rfaxawk0r0c.js} +4 -4
- package/dist/chunks/{combobox-om4zw74o076sa00p.js.map → combobox-ft0u7rfaxawk0r0c.js.map} +1 -1
- package/dist/chunks/{command-palette-ejoszjfivybu9yi5.js → command-palette-b31nq4wk7o7gx4sa.js} +2 -2
- package/dist/chunks/{command-palette-ejoszjfivybu9yi5.js.map → command-palette-b31nq4wk7o7gx4sa.js.map} +1 -1
- package/dist/chunks/{dialog-gkmecnx48ge38jrr.js → dialog-l5tmwxrzp9g83jmw.js} +2 -2
- package/dist/chunks/{dialog-gkmecnx48ge38jrr.js.map → dialog-l5tmwxrzp9g83jmw.js.map} +1 -1
- package/dist/chunks/{dropdown-i8n7nv3cvkvb1x3e.js → dropdown-icy3xatdwhzr4une.js} +2 -2
- package/dist/chunks/{dropdown-i8n7nv3cvkvb1x3e.js.map → dropdown-icy3xatdwhzr4une.js.map} +1 -1
- package/dist/chunks/{empty-h3qhwtx0z8arupc9.js → empty-hrwtammqp0b2nvtf.js} +2 -2
- package/dist/chunks/{empty-h3qhwtx0z8arupc9.js.map → empty-hrwtammqp0b2nvtf.js.map} +1 -1
- package/dist/chunks/{field-lc4gr226y5aqlctf.js → field-csje72m7j9403fj5.js} +3 -3
- package/dist/chunks/{field-lc4gr226y5aqlctf.js.map → field-csje72m7j9403fj5.js.map} +1 -1
- package/dist/chunks/hcl-hcu7d6ja6t540ijn.js +8 -0
- package/dist/chunks/hcl-hcu7d6ja6t540ijn.js.map +1 -0
- package/dist/chunks/{input-area-ce3bf8m8wvot44kg.js → input-area-jko15sbc6zeage3l.js} +4 -4
- package/dist/chunks/{input-area-ce3bf8m8wvot44kg.js.map → input-area-jko15sbc6zeage3l.js.map} +1 -1
- package/dist/chunks/{input-nvne68upfj8b2bk6.js → input-c8jmidy7gdqfiky1.js} +3 -3
- package/dist/chunks/{input-nvne68upfj8b2bk6.js.map → input-c8jmidy7gdqfiky1.js.map} +1 -1
- package/dist/chunks/{input-group-kttdor9mr32k289o.js → input-group-cjsy8kh4vf9312xl.js} +3 -3
- package/dist/chunks/{input-group-kttdor9mr32k289o.js.map → input-group-cjsy8kh4vf9312xl.js.map} +1 -1
- package/dist/chunks/{label-e42o95ab0dxmchxb.js → label-i46xnnzdh9bsxk6a.js} +3 -3
- package/dist/chunks/{label-e42o95ab0dxmchxb.js.map → label-i46xnnzdh9bsxk6a.js.map} +1 -1
- package/dist/chunks/{link-lpzl5s47pmobk361.js → link-o7yfj4kwgl19fklp.js} +2 -2
- package/dist/chunks/{link-lpzl5s47pmobk361.js.map → link-o7yfj4kwgl19fklp.js.map} +1 -1
- package/dist/chunks/{menubar-ifxxdoa35zz79z1q.js → menubar-g1wqqjuyyfvsim83.js} +2 -2
- package/dist/chunks/{menubar-ifxxdoa35zz79z1q.js.map → menubar-g1wqqjuyyfvsim83.js.map} +1 -1
- package/dist/chunks/{meter-fbtqfg0okpwmaiju.js → meter-cqkrg5axjenbsuue.js} +2 -2
- package/dist/chunks/{meter-fbtqfg0okpwmaiju.js.map → meter-cqkrg5axjenbsuue.js.map} +1 -1
- package/dist/chunks/{pagination-owm6h66jjgv1tjoe.js → pagination-e3dp8bd80s35f7sd.js} +3 -3
- package/dist/chunks/{pagination-owm6h66jjgv1tjoe.js.map → pagination-e3dp8bd80s35f7sd.js.map} +1 -1
- package/dist/chunks/{popover-dd7hi5ajeoq9od1i.js → popover-jurf834u2uywluux.js} +2 -2
- package/dist/chunks/{popover-dd7hi5ajeoq9od1i.js.map → popover-jurf834u2uywluux.js.map} +1 -1
- package/dist/chunks/{radio-ff1csb328f12smd4.js → radio-l9dzm6sohcvvrsdc.js} +32 -32
- package/dist/chunks/{radio-ff1csb328f12smd4.js.map → radio-l9dzm6sohcvvrsdc.js.map} +1 -1
- package/dist/chunks/{select-go7a0z3evkh9cfxq.js → select-hnt87e3cfos48qql.js} +4 -4
- package/dist/chunks/{select-go7a0z3evkh9cfxq.js.map → select-hnt87e3cfos48qql.js.map} +1 -1
- package/dist/chunks/{sensitive-input-gtzk3vit4i35n95g.js → sensitive-input-lvtccf3iqc06lj7b.js} +4 -4
- package/dist/chunks/{sensitive-input-gtzk3vit4i35n95g.js.map → sensitive-input-lvtccf3iqc06lj7b.js.map} +1 -1
- package/dist/chunks/sidebar-l6rk9o5qf8k5vth1.js +875 -0
- package/dist/chunks/sidebar-l6rk9o5qf8k5vth1.js.map +1 -0
- package/dist/chunks/{switch-cpbp0i75jnazkani.js → switch-fukrbip86khvqjn7.js} +3 -3
- package/dist/chunks/{switch-cpbp0i75jnazkani.js.map → switch-fukrbip86khvqjn7.js.map} +1 -1
- package/dist/chunks/{table-g41yb7ruredizqr8.js → table-orfgzwvxh8yr90dk.js} +2 -2
- package/dist/chunks/{table-g41yb7ruredizqr8.js.map → table-orfgzwvxh8yr90dk.js.map} +1 -1
- package/dist/chunks/{tabs-hy6oa7xtf96d9mxt.js → tabs-n0t7iro7wr0pzgk2.js} +2 -2
- package/dist/chunks/{tabs-hy6oa7xtf96d9mxt.js.map → tabs-n0t7iro7wr0pzgk2.js.map} +1 -1
- package/dist/chunks/{toast-j5gtfc50xpzzd0hc.js → toast-r9ajsces7xp8l85w.js} +179 -100
- package/dist/chunks/toast-r9ajsces7xp8l85w.js.map +1 -0
- package/dist/chunks/{tooltip-k68wcv9mrigb7rcb.js → tooltip-hnc71tg4gz2gpcvc.js} +2 -2
- package/dist/chunks/{tooltip-k68wcv9mrigb7rcb.js.map → tooltip-hnc71tg4gz2gpcvc.js.map} +1 -1
- package/dist/chunks/{vendor-base-ui-cpvkrhz4zgw9nw2b.js → vendor-base-ui-ccr5l0ynrievzzv3.js} +564 -563
- package/dist/chunks/{vendor-base-ui-cpvkrhz4zgw9nw2b.js.map → vendor-base-ui-ccr5l0ynrievzzv3.js.map} +1 -1
- package/dist/code/server.js +2 -1
- package/dist/code/server.js.map +1 -1
- package/dist/code.js +15 -14
- package/dist/code.js.map +1 -1
- package/dist/components/breadcrumbs.js +1 -1
- package/dist/components/button.js +1 -1
- package/dist/components/chart.js +1 -1
- package/dist/components/checkbox.js +1 -1
- package/dist/components/clipboard-text.js +1 -1
- package/dist/components/combobox.js +1 -1
- package/dist/components/command-palette.js +1 -1
- package/dist/components/dialog.js +1 -1
- package/dist/components/dropdown.js +1 -1
- package/dist/components/empty.js +1 -1
- package/dist/components/field.js +1 -1
- package/dist/components/flow.js +2138 -2087
- package/dist/components/flow.js.map +1 -1
- package/dist/components/input.js +3 -3
- package/dist/components/label.js +1 -1
- package/dist/components/link.js +1 -1
- package/dist/components/menubar.js +1 -1
- package/dist/components/meter.js +1 -1
- package/dist/components/pagination.js +1 -1
- package/dist/components/popover.js +1 -1
- package/dist/components/radio.js +1 -1
- package/dist/components/select.js +1 -1
- package/dist/components/sensitive-input.js +1 -1
- package/dist/components/sidebar.js +35 -0
- package/dist/components/sidebar.js.map +1 -0
- package/dist/components/switch.js +1 -1
- package/dist/components/table.js +1 -1
- package/dist/components/tabs.js +1 -1
- package/dist/components/toast.js +2 -2
- package/dist/components/tooltip.js +1 -1
- package/dist/index.js +196 -165
- package/dist/index.js.map +1 -1
- package/dist/primitives/accordion.js +1 -1
- package/dist/primitives/alert-dialog.js +1 -1
- package/dist/primitives/autocomplete.js +1 -1
- package/dist/primitives/avatar.js +1 -1
- package/dist/primitives/button.js +1 -1
- package/dist/primitives/checkbox-group.js +1 -1
- package/dist/primitives/checkbox.js +1 -1
- package/dist/primitives/collapsible.js +1 -1
- package/dist/primitives/combobox.js +1 -1
- package/dist/primitives/context-menu.js +1 -1
- package/dist/primitives/csp-provider.js +1 -1
- package/dist/primitives/dialog.js +1 -1
- package/dist/primitives/direction-provider.js +1 -1
- package/dist/primitives/drawer.js +1 -1
- package/dist/primitives/field.js +1 -1
- package/dist/primitives/fieldset.js +1 -1
- package/dist/primitives/form.js +1 -1
- package/dist/primitives/input.js +1 -1
- package/dist/primitives/menu.js +1 -1
- package/dist/primitives/menubar.js +1 -1
- package/dist/primitives/meter.js +1 -1
- package/dist/primitives/navigation-menu.js +1 -1
- package/dist/primitives/number-field.js +1 -1
- package/dist/primitives/popover.js +1 -1
- package/dist/primitives/preview-card.js +1 -1
- package/dist/primitives/progress.js +1 -1
- package/dist/primitives/radio-group.js +1 -1
- package/dist/primitives/radio.js +1 -1
- package/dist/primitives/scroll-area.js +1 -1
- package/dist/primitives/select.js +1 -1
- package/dist/primitives/separator.js +1 -1
- package/dist/primitives/slider.js +1 -1
- package/dist/primitives/switch.js +1 -1
- package/dist/primitives/tabs.js +1 -1
- package/dist/primitives/toast.js +1 -1
- package/dist/primitives/toggle-group.js +1 -1
- package/dist/primitives/toggle.js +1 -1
- package/dist/primitives/toolbar.js +1 -1
- package/dist/primitives/tooltip.js +1 -1
- package/dist/primitives.js +1 -1
- package/dist/src/code/provider.d.ts.map +1 -1
- package/dist/src/code/server.d.ts.map +1 -1
- package/dist/src/code/types.d.ts +1 -1
- package/dist/src/code/types.d.ts.map +1 -1
- package/dist/src/components/button/button.d.ts +1 -1
- package/dist/src/components/chart/EChart.d.ts.map +1 -1
- package/dist/src/components/chart/TimeseriesChart.d.ts +11 -1
- package/dist/src/components/chart/TimeseriesChart.d.ts.map +1 -1
- package/dist/src/components/flow/diagram.d.ts.map +1 -1
- package/dist/src/components/flow/node.d.ts.map +1 -1
- package/dist/src/components/flow/parallel.d.ts.map +1 -1
- package/dist/src/components/radio/radio.d.ts +1 -1
- package/dist/src/components/radio/radio.d.ts.map +1 -1
- package/dist/src/components/sidebar/index.d.ts +2 -0
- package/dist/src/components/sidebar/index.d.ts.map +1 -0
- package/dist/src/components/sidebar/sidebar.d.ts +556 -0
- package/dist/src/components/sidebar/sidebar.d.ts.map +1 -0
- package/dist/src/components/toast/toast.d.ts +12 -2
- package/dist/src/components/toast/toast.d.ts.map +1 -1
- package/dist/src/index.d.ts +1 -0
- package/dist/src/index.d.ts.map +1 -1
- package/dist/styles/kumo-standalone.css +1 -1
- package/package.json +6 -2
- package/scripts/component-registry/index.ts +12 -0
- package/dist/chunks/Legend-mkh1v83sz972e29d.js.map +0 -1
- package/dist/chunks/button-d82sexqgnd834eaa.js.map +0 -1
- package/dist/chunks/toast-j5gtfc50xpzzd0hc.js.map +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"hcl-hcu7d6ja6t540ijn.js","sources":["../../../../node_modules/.pnpm/@shikijs+langs@4.0.0/node_modules/@shikijs/langs/dist/hcl.mjs"],"sourcesContent":["const lang = Object.freeze(JSON.parse(\"{\\\"displayName\\\":\\\"HashiCorp HCL\\\",\\\"fileTypes\\\":[\\\"hcl\\\"],\\\"name\\\":\\\"hcl\\\",\\\"patterns\\\":[{\\\"include\\\":\\\"#comments\\\"},{\\\"include\\\":\\\"#attribute_definition\\\"},{\\\"include\\\":\\\"#block\\\"},{\\\"include\\\":\\\"#expressions\\\"}],\\\"repository\\\":{\\\"attribute_access\\\":{\\\"begin\\\":\\\"\\\\\\\\.(?!\\\\\\\\*)\\\",\\\"beginCaptures\\\":{\\\"0\\\":{\\\"name\\\":\\\"keyword.operator.accessor.hcl\\\"}},\\\"end\\\":\\\"\\\\\\\\p{alpha}[-\\\\\\\\w]*|\\\\\\\\d*\\\",\\\"endCaptures\\\":{\\\"0\\\":{\\\"patterns\\\":[{\\\"match\\\":\\\"(?!null|false|true)\\\\\\\\p{alpha}[-\\\\\\\\w]*\\\",\\\"name\\\":\\\"variable.other.member.hcl\\\"},{\\\"match\\\":\\\"\\\\\\\\d+\\\",\\\"name\\\":\\\"constant.numeric.integer.hcl\\\"}]}}},\\\"attribute_definition\\\":{\\\"captures\\\":{\\\"1\\\":{\\\"name\\\":\\\"punctuation.section.parens.begin.hcl\\\"},\\\"2\\\":{\\\"name\\\":\\\"variable.other.readwrite.hcl\\\"},\\\"3\\\":{\\\"name\\\":\\\"punctuation.section.parens.end.hcl\\\"},\\\"4\\\":{\\\"name\\\":\\\"keyword.operator.assignment.hcl\\\"}},\\\"match\\\":\\\"(\\\\\\\\()?\\\\\\\\b((?!(?:null|false|true)\\\\\\\\b)\\\\\\\\p{alpha}[-_[:alnum:]]*)(\\\\\\\\))?\\\\\\\\s*(=(?![=>]))\\\\\\\\s*\\\",\\\"name\\\":\\\"variable.declaration.hcl\\\"},\\\"attribute_splat\\\":{\\\"begin\\\":\\\"\\\\\\\\.\\\",\\\"beginCaptures\\\":{\\\"0\\\":{\\\"name\\\":\\\"keyword.operator.accessor.hcl\\\"}},\\\"end\\\":\\\"\\\\\\\\*\\\",\\\"endCaptures\\\":{\\\"0\\\":{\\\"name\\\":\\\"keyword.operator.splat.hcl\\\"}}},\\\"block\\\":{\\\"begin\\\":\\\"(\\\\\\\\w[-\\\\\\\\w]*)(([^\\\\\\\\n\\\\\\\\r\\\\\\\\S]+(\\\\\\\\w[-_\\\\\\\\w]*|\\\\\\\"[^\\\\\\\\n\\\\\\\\r\\\\\\\"]*\\\\\\\"))*)[^\\\\\\\\n\\\\\\\\r\\\\\\\\S]*(\\\\\\\\{)\\\",\\\"beginCaptures\\\":{\\\"1\\\":{\\\"patterns\\\":[{\\\"match\\\":\\\"\\\\\\\\b(?!null|false|true)\\\\\\\\p{alpha}[-_[:alnum:]]*\\\\\\\\b\\\",\\\"name\\\":\\\"entity.name.type.hcl\\\"}]},\\\"2\\\":{\\\"patterns\\\":[{\\\"match\\\":\\\"\\\\\\\"[^\\\\\\\\n\\\\\\\\r\\\\\\\"]*\\\\\\\"\\\",\\\"name\\\":\\\"variable.other.enummember.hcl\\\"},{\\\"match\\\":\\\"\\\\\\\\p{alpha}[-_[:alnum:]]*\\\",\\\"name\\\":\\\"variable.other.enummember.hcl\\\"}]},\\\"5\\\":{\\\"name\\\":\\\"punctuation.section.block.begin.hcl\\\"}},\\\"end\\\":\\\"}\\\",\\\"endCaptures\\\":{\\\"0\\\":{\\\"name\\\":\\\"punctuation.section.block.end.hcl\\\"}},\\\"name\\\":\\\"meta.block.hcl\\\",\\\"patterns\\\":[{\\\"include\\\":\\\"#comments\\\"},{\\\"include\\\":\\\"#attribute_definition\\\"},{\\\"include\\\":\\\"#expressions\\\"},{\\\"include\\\":\\\"#block\\\"}]},\\\"block_inline_comments\\\":{\\\"begin\\\":\\\"/\\\\\\\\*\\\",\\\"captures\\\":{\\\"0\\\":{\\\"name\\\":\\\"punctuation.definition.comment.hcl\\\"}},\\\"end\\\":\\\"\\\\\\\\*/\\\",\\\"name\\\":\\\"comment.block.hcl\\\"},\\\"brackets\\\":{\\\"begin\\\":\\\"\\\\\\\\[\\\",\\\"beginCaptures\\\":{\\\"0\\\":{\\\"name\\\":\\\"punctuation.section.brackets.begin.hcl\\\"}},\\\"end\\\":\\\"]\\\",\\\"endCaptures\\\":{\\\"0\\\":{\\\"name\\\":\\\"punctuation.section.brackets.end.hcl\\\"}},\\\"patterns\\\":[{\\\"match\\\":\\\"\\\\\\\\*\\\",\\\"name\\\":\\\"keyword.operator.splat.hcl\\\"},{\\\"include\\\":\\\"#comma\\\"},{\\\"include\\\":\\\"#comments\\\"},{\\\"include\\\":\\\"#inline_for_expression\\\"},{\\\"include\\\":\\\"#inline_if_expression\\\"},{\\\"include\\\":\\\"#expressions\\\"},{\\\"include\\\":\\\"#local_identifiers\\\"}]},\\\"char_escapes\\\":{\\\"match\\\":\\\"\\\\\\\\\\\\\\\\(?:[\\\\\\\"\\\\\\\\\\\\\\\\nrt]|u(\\\\\\\\h{8}|\\\\\\\\h{4}))\\\",\\\"name\\\":\\\"constant.character.escape.hcl\\\"},\\\"comma\\\":{\\\"match\\\":\\\",\\\",\\\"name\\\":\\\"punctuation.separator.hcl\\\"},\\\"comments\\\":{\\\"patterns\\\":[{\\\"include\\\":\\\"#hash_line_comments\\\"},{\\\"include\\\":\\\"#double_slash_line_comments\\\"},{\\\"include\\\":\\\"#block_inline_comments\\\"}]},\\\"double_slash_line_comments\\\":{\\\"begin\\\":\\\"//\\\",\\\"captures\\\":{\\\"0\\\":{\\\"name\\\":\\\"punctuation.definition.comment.hcl\\\"}},\\\"end\\\":\\\"$\\\\\\\\n?\\\",\\\"name\\\":\\\"comment.line.double-slash.hcl\\\"},\\\"expressions\\\":{\\\"patterns\\\":[{\\\"include\\\":\\\"#literal_values\\\"},{\\\"include\\\":\\\"#operators\\\"},{\\\"include\\\":\\\"#tuple_for_expression\\\"},{\\\"include\\\":\\\"#object_for_expression\\\"},{\\\"include\\\":\\\"#brackets\\\"},{\\\"include\\\":\\\"#objects\\\"},{\\\"include\\\":\\\"#attribute_access\\\"},{\\\"include\\\":\\\"#attribute_splat\\\"},{\\\"include\\\":\\\"#functions\\\"},{\\\"include\\\":\\\"#parens\\\"}]},\\\"for_expression_body\\\":{\\\"patterns\\\":[{\\\"match\\\":\\\"\\\\\\\\bin\\\\\\\\b\\\",\\\"name\\\":\\\"keyword.operator.word.hcl\\\"},{\\\"match\\\":\\\"\\\\\\\\bif\\\\\\\\b\\\",\\\"name\\\":\\\"keyword.control.conditional.hcl\\\"},{\\\"match\\\":\\\":\\\",\\\"name\\\":\\\"keyword.operator.hcl\\\"},{\\\"include\\\":\\\"#expressions\\\"},{\\\"include\\\":\\\"#comments\\\"},{\\\"include\\\":\\\"#comma\\\"},{\\\"include\\\":\\\"#local_identifiers\\\"}]},\\\"functions\\\":{\\\"begin\\\":\\\"([-:\\\\\\\\w]+)(\\\\\\\\()\\\",\\\"beginCaptures\\\":{\\\"1\\\":{\\\"patterns\\\":[{\\\"match\\\":\\\"\\\\\\\\b\\\\\\\\p{alpha}[-_\\\\\\\\w]*::(\\\\\\\\p{alpha}[-_\\\\\\\\w]*::)?\\\\\\\\p{alpha}[-_\\\\\\\\w]*\\\\\\\\b\\\",\\\"name\\\":\\\"support.function.namespaced.hcl\\\"},{\\\"match\\\":\\\"\\\\\\\\b\\\\\\\\p{alpha}[-_\\\\\\\\w]*\\\\\\\\b\\\",\\\"name\\\":\\\"support.function.builtin.hcl\\\"}]},\\\"2\\\":{\\\"name\\\":\\\"punctuation.section.parens.begin.hcl\\\"}},\\\"end\\\":\\\"\\\\\\\\)\\\",\\\"endCaptures\\\":{\\\"0\\\":{\\\"name\\\":\\\"punctuation.section.parens.end.hcl\\\"}},\\\"name\\\":\\\"meta.function-call.hcl\\\",\\\"patterns\\\":[{\\\"include\\\":\\\"#comments\\\"},{\\\"include\\\":\\\"#expressions\\\"},{\\\"include\\\":\\\"#comma\\\"}]},\\\"hash_line_comments\\\":{\\\"begin\\\":\\\"#\\\",\\\"captures\\\":{\\\"0\\\":{\\\"name\\\":\\\"punctuation.definition.comment.hcl\\\"}},\\\"end\\\":\\\"$\\\\\\\\n?\\\",\\\"name\\\":\\\"comment.line.number-sign.hcl\\\"},\\\"hcl_type_keywords\\\":{\\\"match\\\":\\\"\\\\\\\\b(any|string|number|bool|list|set|map|tuple|object)\\\\\\\\b\\\",\\\"name\\\":\\\"storage.type.hcl\\\"},\\\"heredoc\\\":{\\\"begin\\\":\\\"(<<-?)\\\\\\\\s*(\\\\\\\\w+)\\\\\\\\s*$\\\",\\\"beginCaptures\\\":{\\\"1\\\":{\\\"name\\\":\\\"keyword.operator.heredoc.hcl\\\"},\\\"2\\\":{\\\"name\\\":\\\"keyword.control.heredoc.hcl\\\"}},\\\"end\\\":\\\"^\\\\\\\\s*\\\\\\\\2\\\\\\\\s*$\\\",\\\"endCaptures\\\":{\\\"0\\\":{\\\"name\\\":\\\"keyword.control.heredoc.hcl\\\"}},\\\"name\\\":\\\"string.unquoted.heredoc.hcl\\\",\\\"patterns\\\":[{\\\"include\\\":\\\"#string_interpolation\\\"}]},\\\"inline_for_expression\\\":{\\\"captures\\\":{\\\"1\\\":{\\\"name\\\":\\\"keyword.control.hcl\\\"},\\\"2\\\":{\\\"patterns\\\":[{\\\"match\\\":\\\"=>\\\",\\\"name\\\":\\\"storage.type.function.hcl\\\"},{\\\"include\\\":\\\"#for_expression_body\\\"}]}},\\\"match\\\":\\\"(for)\\\\\\\\b(.*)\\\\\\\\n\\\"},\\\"inline_if_expression\\\":{\\\"begin\\\":\\\"(if)\\\\\\\\b\\\",\\\"beginCaptures\\\":{\\\"1\\\":{\\\"name\\\":\\\"keyword.control.conditional.hcl\\\"}},\\\"end\\\":\\\"\\\\\\\\n\\\",\\\"patterns\\\":[{\\\"include\\\":\\\"#expressions\\\"},{\\\"include\\\":\\\"#comments\\\"},{\\\"include\\\":\\\"#comma\\\"},{\\\"include\\\":\\\"#local_identifiers\\\"}]},\\\"language_constants\\\":{\\\"match\\\":\\\"\\\\\\\\b(true|false|null)\\\\\\\\b\\\",\\\"name\\\":\\\"constant.language.hcl\\\"},\\\"literal_values\\\":{\\\"patterns\\\":[{\\\"include\\\":\\\"#numeric_literals\\\"},{\\\"include\\\":\\\"#language_constants\\\"},{\\\"include\\\":\\\"#string_literals\\\"},{\\\"include\\\":\\\"#heredoc\\\"},{\\\"include\\\":\\\"#hcl_type_keywords\\\"}]},\\\"local_identifiers\\\":{\\\"match\\\":\\\"\\\\\\\\b(?!null|false|true)\\\\\\\\p{alpha}[-_[:alnum:]]*\\\\\\\\b\\\",\\\"name\\\":\\\"variable.other.readwrite.hcl\\\"},\\\"numeric_literals\\\":{\\\"patterns\\\":[{\\\"captures\\\":{\\\"1\\\":{\\\"name\\\":\\\"punctuation.separator.exponent.hcl\\\"}},\\\"match\\\":\\\"\\\\\\\\b\\\\\\\\d+([Ee][-+]?)\\\\\\\\d+\\\\\\\\b\\\",\\\"name\\\":\\\"constant.numeric.float.hcl\\\"},{\\\"captures\\\":{\\\"1\\\":{\\\"name\\\":\\\"punctuation.separator.decimal.hcl\\\"},\\\"2\\\":{\\\"name\\\":\\\"punctuation.separator.exponent.hcl\\\"}},\\\"match\\\":\\\"\\\\\\\\b\\\\\\\\d+(\\\\\\\\.)\\\\\\\\d+(?:([Ee][-+]?)\\\\\\\\d+)?\\\\\\\\b\\\",\\\"name\\\":\\\"constant.numeric.float.hcl\\\"},{\\\"match\\\":\\\"\\\\\\\\b\\\\\\\\d+\\\\\\\\b\\\",\\\"name\\\":\\\"constant.numeric.integer.hcl\\\"}]},\\\"object_for_expression\\\":{\\\"begin\\\":\\\"(\\\\\\\\{)\\\\\\\\s?(for)\\\\\\\\b\\\",\\\"beginCaptures\\\":{\\\"1\\\":{\\\"name\\\":\\\"punctuation.section.braces.begin.hcl\\\"},\\\"2\\\":{\\\"name\\\":\\\"keyword.control.hcl\\\"}},\\\"end\\\":\\\"}\\\",\\\"endCaptures\\\":{\\\"0\\\":{\\\"name\\\":\\\"punctuation.section.braces.end.hcl\\\"}},\\\"patterns\\\":[{\\\"match\\\":\\\"=>\\\",\\\"name\\\":\\\"storage.type.function.hcl\\\"},{\\\"include\\\":\\\"#for_expression_body\\\"}]},\\\"object_key_values\\\":{\\\"patterns\\\":[{\\\"include\\\":\\\"#comments\\\"},{\\\"include\\\":\\\"#literal_values\\\"},{\\\"include\\\":\\\"#operators\\\"},{\\\"include\\\":\\\"#tuple_for_expression\\\"},{\\\"include\\\":\\\"#object_for_expression\\\"},{\\\"include\\\":\\\"#heredoc\\\"},{\\\"include\\\":\\\"#functions\\\"}]},\\\"objects\\\":{\\\"begin\\\":\\\"\\\\\\\\{\\\",\\\"beginCaptures\\\":{\\\"0\\\":{\\\"name\\\":\\\"punctuation.section.braces.begin.hcl\\\"}},\\\"end\\\":\\\"}\\\",\\\"endCaptures\\\":{\\\"0\\\":{\\\"name\\\":\\\"punctuation.section.braces.end.hcl\\\"}},\\\"name\\\":\\\"meta.braces.hcl\\\",\\\"patterns\\\":[{\\\"include\\\":\\\"#comments\\\"},{\\\"include\\\":\\\"#objects\\\"},{\\\"include\\\":\\\"#inline_for_expression\\\"},{\\\"include\\\":\\\"#inline_if_expression\\\"},{\\\"captures\\\":{\\\"1\\\":{\\\"name\\\":\\\"meta.mapping.key.hcl variable.other.readwrite.hcl\\\"},\\\"2\\\":{\\\"name\\\":\\\"keyword.operator.assignment.hcl\\\"}},\\\"match\\\":\\\"\\\\\\\\b((?!null|false|true)\\\\\\\\p{alpha}[-_[:alnum:]]*)\\\\\\\\s*(=(?!=))\\\\\\\\s*\\\"},{\\\"captures\\\":{\\\"1\\\":{\\\"name\\\":\\\"meta.mapping.key.hcl string.quoted.double.hcl\\\"},\\\"2\\\":{\\\"name\\\":\\\"punctuation.definition.string.begin.hcl\\\"},\\\"3\\\":{\\\"name\\\":\\\"punctuation.definition.string.end.hcl\\\"},\\\"4\\\":{\\\"name\\\":\\\"keyword.operator.hcl\\\"}},\\\"match\\\":\\\"^\\\\\\\\s*((\\\\\\\").*(\\\\\\\"))\\\\\\\\s*(=)\\\\\\\\s*\\\"},{\\\"begin\\\":\\\"^\\\\\\\\s*\\\\\\\\(\\\",\\\"beginCaptures\\\":{\\\"0\\\":{\\\"name\\\":\\\"punctuation.section.parens.begin.hcl\\\"}},\\\"end\\\":\\\"(\\\\\\\\))\\\\\\\\s*([:=])\\\\\\\\s*\\\",\\\"endCaptures\\\":{\\\"1\\\":{\\\"name\\\":\\\"punctuation.section.parens.end.hcl\\\"},\\\"2\\\":{\\\"name\\\":\\\"keyword.operator.hcl\\\"}},\\\"name\\\":\\\"meta.mapping.key.hcl\\\",\\\"patterns\\\":[{\\\"include\\\":\\\"#attribute_access\\\"},{\\\"include\\\":\\\"#attribute_splat\\\"}]},{\\\"include\\\":\\\"#object_key_values\\\"}]},\\\"operators\\\":{\\\"patterns\\\":[{\\\"match\\\":\\\">=\\\",\\\"name\\\":\\\"keyword.operator.hcl\\\"},{\\\"match\\\":\\\"<=\\\",\\\"name\\\":\\\"keyword.operator.hcl\\\"},{\\\"match\\\":\\\"==\\\",\\\"name\\\":\\\"keyword.operator.hcl\\\"},{\\\"match\\\":\\\"!=\\\",\\\"name\\\":\\\"keyword.operator.hcl\\\"},{\\\"match\\\":\\\"\\\\\\\\+\\\",\\\"name\\\":\\\"keyword.operator.arithmetic.hcl\\\"},{\\\"match\\\":\\\"-\\\",\\\"name\\\":\\\"keyword.operator.arithmetic.hcl\\\"},{\\\"match\\\":\\\"\\\\\\\\*\\\",\\\"name\\\":\\\"keyword.operator.arithmetic.hcl\\\"},{\\\"match\\\":\\\"/\\\",\\\"name\\\":\\\"keyword.operator.arithmetic.hcl\\\"},{\\\"match\\\":\\\"%\\\",\\\"name\\\":\\\"keyword.operator.arithmetic.hcl\\\"},{\\\"match\\\":\\\"&&\\\",\\\"name\\\":\\\"keyword.operator.logical.hcl\\\"},{\\\"match\\\":\\\"\\\\\\\\|\\\\\\\\|\\\",\\\"name\\\":\\\"keyword.operator.logical.hcl\\\"},{\\\"match\\\":\\\"!\\\",\\\"name\\\":\\\"keyword.operator.logical.hcl\\\"},{\\\"match\\\":\\\">\\\",\\\"name\\\":\\\"keyword.operator.hcl\\\"},{\\\"match\\\":\\\"<\\\",\\\"name\\\":\\\"keyword.operator.hcl\\\"},{\\\"match\\\":\\\"\\\\\\\\?\\\",\\\"name\\\":\\\"keyword.operator.hcl\\\"},{\\\"match\\\":\\\"\\\\\\\\.\\\\\\\\.\\\\\\\\.\\\",\\\"name\\\":\\\"keyword.operator.hcl\\\"},{\\\"match\\\":\\\":\\\",\\\"name\\\":\\\"keyword.operator.hcl\\\"},{\\\"match\\\":\\\"=>\\\",\\\"name\\\":\\\"keyword.operator.hcl\\\"}]},\\\"parens\\\":{\\\"begin\\\":\\\"\\\\\\\\(\\\",\\\"beginCaptures\\\":{\\\"0\\\":{\\\"name\\\":\\\"punctuation.section.parens.begin.hcl\\\"}},\\\"end\\\":\\\"\\\\\\\\)\\\",\\\"endCaptures\\\":{\\\"0\\\":{\\\"name\\\":\\\"punctuation.section.parens.end.hcl\\\"}},\\\"patterns\\\":[{\\\"include\\\":\\\"#comments\\\"},{\\\"include\\\":\\\"#expressions\\\"}]},\\\"string_interpolation\\\":{\\\"begin\\\":\\\"(?<![$%])([$%]\\\\\\\\{)\\\",\\\"beginCaptures\\\":{\\\"1\\\":{\\\"name\\\":\\\"keyword.other.interpolation.begin.hcl\\\"}},\\\"end\\\":\\\"}\\\",\\\"endCaptures\\\":{\\\"0\\\":{\\\"name\\\":\\\"keyword.other.interpolation.end.hcl\\\"}},\\\"name\\\":\\\"meta.interpolation.hcl\\\",\\\"patterns\\\":[{\\\"match\\\":\\\"~\\\\\\\\s\\\",\\\"name\\\":\\\"keyword.operator.template.left.trim.hcl\\\"},{\\\"match\\\":\\\"\\\\\\\\s~\\\",\\\"name\\\":\\\"keyword.operator.template.right.trim.hcl\\\"},{\\\"match\\\":\\\"\\\\\\\\b(if|else|endif|for|in|endfor)\\\\\\\\b\\\",\\\"name\\\":\\\"keyword.control.hcl\\\"},{\\\"include\\\":\\\"#expressions\\\"},{\\\"include\\\":\\\"#local_identifiers\\\"}]},\\\"string_literals\\\":{\\\"begin\\\":\\\"\\\\\\\"\\\",\\\"beginCaptures\\\":{\\\"0\\\":{\\\"name\\\":\\\"punctuation.definition.string.begin.hcl\\\"}},\\\"end\\\":\\\"\\\\\\\"\\\",\\\"endCaptures\\\":{\\\"0\\\":{\\\"name\\\":\\\"punctuation.definition.string.end.hcl\\\"}},\\\"name\\\":\\\"string.quoted.double.hcl\\\",\\\"patterns\\\":[{\\\"include\\\":\\\"#string_interpolation\\\"},{\\\"include\\\":\\\"#char_escapes\\\"}]},\\\"tuple_for_expression\\\":{\\\"begin\\\":\\\"(\\\\\\\\[)\\\\\\\\s?(for)\\\\\\\\b\\\",\\\"beginCaptures\\\":{\\\"1\\\":{\\\"name\\\":\\\"punctuation.section.brackets.begin.hcl\\\"},\\\"2\\\":{\\\"name\\\":\\\"keyword.control.hcl\\\"}},\\\"end\\\":\\\"]\\\",\\\"endCaptures\\\":{\\\"0\\\":{\\\"name\\\":\\\"punctuation.section.brackets.end.hcl\\\"}},\\\"patterns\\\":[{\\\"include\\\":\\\"#for_expression_body\\\"}]}},\\\"scopeName\\\":\\\"source.hcl\\\"}\"))\n\nexport default [\nlang\n]\n"],"names":["lang","hcl"],"mappings":";AAAA,MAAMA,IAAO,OAAO,OAAO,KAAK,MAAM,qwTAA4hW,CAAC,GAEnkWC,IAAe;AAAA,EACfD;AACA;","x_google_ignoreList":[0]}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as r } from "react/jsx-runtime";
|
|
3
|
-
import { i as x } from "./input-
|
|
3
|
+
import { i as x } from "./input-c8jmidy7gdqfiky1.js";
|
|
4
4
|
import { c as N } from "./cn-ct4n7r74mh8y0f48.js";
|
|
5
5
|
import * as b from "react";
|
|
6
6
|
import { useCallback as I } from "react";
|
|
7
|
-
import { F as y } from "./field-
|
|
8
|
-
import { aP as F } from "./vendor-base-ui-
|
|
7
|
+
import { F as y } from "./field-csje72m7j9403fj5.js";
|
|
8
|
+
import { aP as F } from "./vendor-base-ui-ccr5l0ynrievzzv3.js";
|
|
9
9
|
const c = b.forwardRef(
|
|
10
10
|
(p, o) => {
|
|
11
11
|
const {
|
|
@@ -71,4 +71,4 @@ export {
|
|
|
71
71
|
c as I,
|
|
72
72
|
k as T
|
|
73
73
|
};
|
|
74
|
-
//# sourceMappingURL=input-area-
|
|
74
|
+
//# sourceMappingURL=input-area-jko15sbc6zeage3l.js.map
|
package/dist/chunks/{input-area-ce3bf8m8wvot44kg.js.map → input-area-jko15sbc6zeage3l.js.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-area-
|
|
1
|
+
{"version":3,"file":"input-area-jko15sbc6zeage3l.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 FieldBase } from \"@base-ui/react/field\";\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 textareaClassName = cn(\n inputVariants({ size, variant, focusIndicator: true }),\n \"h-auto py-2\", // Input variant always comes with size, but it does not apply for textarea\n className,\n );\n\n // Render with Field wrapper if label is provided\n // Use FieldBase.Control with render callback to ensure proper label-textarea association.\n // The render callback receives props with the correct id/aria-labelledby from Field context.\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 <FieldBase.Control\n render={(controlProps) => (\n <textarea\n {...controlProps}\n ref={ref}\n className={textareaClassName}\n onChange={handleChange}\n {...inputProps}\n />\n )}\n />\n </KumoField>\n );\n }\n\n // Render bare textarea without Field wrapper\n return (\n <textarea\n ref={ref}\n className={textareaClassName}\n onChange={handleChange}\n {...inputProps}\n />\n );\n },\n);\n\nInputArea.displayName = \"InputArea\";\n\n/** Alias for InputArea — provided for discoverability when migrating from other libraries */\nexport const Textarea = 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","textareaClassName","cn","inputVariants","jsx","KumoField","FieldBase.Control","controlProps","Textarea"],"mappings":";;;;;;;;AAOO,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,IAAoBC;AAAA,MACxBC,EAAc,EAAE,MAAAd,GAAM,SAAAC,GAAS,gBAAgB,IAAM;AAAA,MACrD;AAAA;AAAA,MACAH;AAAA,IAAA;AAMF,WAAIK,IAEA,gBAAAY;AAAA,MAACC;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,QAGN,UAAA,gBAAAS;AAAA,UAACE;AAAAA,UAAA;AAAA,YACC,QAAQ,CAACC,MACP,gBAAAH;AAAA,cAAC;AAAA,cAAA;AAAA,gBACE,GAAGG;AAAA,gBACJ,KAAArB;AAAA,gBACA,WAAWe;AAAA,gBACX,UAAUH;AAAA,gBACT,GAAGF;AAAA,cAAA;AAAA,YAAA;AAAA,UACN;AAAA,QAAA;AAAA,MAEJ;AAAA,IAAA,IAOJ,gBAAAQ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAlB;AAAA,QACA,WAAWe;AAAA,QACX,UAAUH;AAAA,QACT,GAAGF;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEAb,EAAU,cAAc;AAGjB,MAAMyB,IAAWzB;"}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
import { jsx as l } from "react/jsx-runtime";
|
|
3
3
|
import { c as p } from "./cn-ct4n7r74mh8y0f48.js";
|
|
4
4
|
import { forwardRef as I } from "react";
|
|
5
|
-
import { F as k } from "./field-
|
|
6
|
-
import { I as v } from "./vendor-base-ui-
|
|
5
|
+
import { F as k } from "./field-csje72m7j9403fj5.js";
|
|
6
|
+
import { I as v } from "./vendor-base-ui-ccr5l0ynrievzzv3.js";
|
|
7
7
|
const c = {
|
|
8
8
|
size: {
|
|
9
9
|
xs: {
|
|
@@ -106,4 +106,4 @@ export {
|
|
|
106
106
|
c as K,
|
|
107
107
|
N as i
|
|
108
108
|
};
|
|
109
|
-
//# sourceMappingURL=input-
|
|
109
|
+
//# sourceMappingURL=input-c8jmidy7gdqfiky1.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-
|
|
1
|
+
{"version":3,"file":"input-c8jmidy7gdqfiky1.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\n/** Input size and variant definitions mapping names to their Tailwind classes. */\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 /**\n * Input size.\n * - `\"xs\"` — Extra small for compact UIs\n * - `\"sm\"` — Small for secondary fields\n * - `\"base\"` — Default size\n * - `\"lg\"` — Large for prominent fields\n * @default \"base\"\n */\n size?: KumoInputSize;\n /**\n * Visual variant.\n * - `\"default\"` — Standard input\n * - `\"error\"` — Error state for validation failures\n * @default \"default\"\n */\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 (using vanilla CSS class for Chrome compatibility)\n \"kumo-input-placeholder 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":";;;;;;AAUO,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;AAwDO,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;"}
|
|
@@ -3,8 +3,8 @@ import { jsx as e } from "react/jsx-runtime";
|
|
|
3
3
|
import * as d from "react";
|
|
4
4
|
import { useContext as l } from "react";
|
|
5
5
|
import { c as s } from "./cn-ct4n7r74mh8y0f48.js";
|
|
6
|
-
import { i as m, I as p } from "./input-
|
|
7
|
-
import { B as x } from "./button-
|
|
6
|
+
import { i as m, I as p } from "./input-c8jmidy7gdqfiky1.js";
|
|
7
|
+
import { B as x } from "./button-j0hi0afn33w9lxgi.js";
|
|
8
8
|
const I = {
|
|
9
9
|
focusMode: "container"
|
|
10
10
|
}, r = d.createContext(
|
|
@@ -108,4 +108,4 @@ const U = Object.assign(v, {
|
|
|
108
108
|
export {
|
|
109
109
|
U as I
|
|
110
110
|
};
|
|
111
|
-
//# sourceMappingURL=input-group-
|
|
111
|
+
//# sourceMappingURL=input-group-cjsy8kh4vf9312xl.js.map
|
package/dist/chunks/{input-group-kttdor9mr32k289o.js.map → input-group-cjsy8kh4vf9312xl.js.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-group-
|
|
1
|
+
{"version":3,"file":"input-group-cjsy8kh4vf9312xl.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 ? \"isolate 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-1 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-1 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,6BACA;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,4GACA;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,8 +2,8 @@
|
|
|
2
2
|
import { jsx as e, jsxs as c, Fragment as f } from "react/jsx-runtime";
|
|
3
3
|
import { Info as u } from "@phosphor-icons/react";
|
|
4
4
|
import { c as a } from "./cn-ct4n7r74mh8y0f48.js";
|
|
5
|
-
import { B as p } from "./button-
|
|
6
|
-
import { T as d } from "./tooltip-
|
|
5
|
+
import { B as p } from "./button-j0hi0afn33w9lxgi.js";
|
|
6
|
+
import { T as d } from "./tooltip-hnc71tg4gz2gpcvc.js";
|
|
7
7
|
const T = {
|
|
8
8
|
// Label currently has no variant options but structure is ready for future additions
|
|
9
9
|
}, g = {};
|
|
@@ -59,4 +59,4 @@ export {
|
|
|
59
59
|
g as b,
|
|
60
60
|
h as l
|
|
61
61
|
};
|
|
62
|
-
//# sourceMappingURL=label-
|
|
62
|
+
//# sourceMappingURL=label-i46xnnzdh9bsxk6a.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"label-
|
|
1
|
+
{"version":3,"file":"label-i46xnnzdh9bsxk6a.js","sources":["../../src/components/label/label.tsx"],"sourcesContent":["import { Info } from \"@phosphor-icons/react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../button\";\nimport { Tooltip } from \"../tooltip\";\n\n/** Label variant definitions (currently empty, reserved for future additions). */\nexport const KUMO_LABEL_VARIANTS = {\n // Label currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const KUMO_LABEL_DEFAULT_VARIANTS = {} as const;\n\n// Derived types from KUMO_LABEL_VARIANTS\nexport interface KumoLabelVariantsProps {}\n\nexport function labelVariants(_props: KumoLabelVariantsProps = {}) {\n return cn(\n // Base styles - when used standalone, apply text styling\n // When used inside Field, the parent FieldBase.Label provides these styles\n \"m-0 text-base font-medium text-kumo-default\",\n );\n}\n\nexport function labelContentVariants() {\n return cn(\n // Content wrapper styles - always applied\n \"inline-flex items-center gap-1\",\n );\n}\n\n/**\n * Label component props.\n *\n * @example\n * ```tsx\n * <Label>Email</Label>\n * <Label showOptional>Middle Name</Label>\n * <Label tooltip=\"We'll use this to send you updates\">Email</Label>\n * ```\n */\nexport interface LabelProps extends KumoLabelVariantsProps {\n /** The label content — can be a string or any React node. */\n children: ReactNode;\n /** When `true`, shows gray \"(optional)\" text after the label. */\n showOptional?: boolean;\n /** Tooltip content displayed next to the label via an info icon. */\n tooltip?: ReactNode;\n /** Additional CSS classes merged via `cn()`. */\n className?: string;\n /** The id of the form element this label is associated with */\n htmlFor?: string;\n /**\n * When true, only renders the inline content (indicators, tooltip) without\n * the outer label element with font styling. Useful when composed inside another\n * label element that already provides the text styling.\n * @default false\n */\n asContent?: boolean;\n}\n\n/**\n * Label component for form fields.\n *\n * Provides a standardized way to display labels with optional indicators:\n * - Optional indicator: gray \"(optional)\" text when `showOptional={true}`\n * - Tooltip: info icon with hover tooltip for additional context\n *\n * @example\n * // Basic label\n * <Label>Email</Label>\n *\n * @example\n * // Optional field with indicator\n * <Label showOptional>Middle Name</Label>\n *\n * @example\n * // With tooltip\n * <Label tooltip=\"We'll use this to send you updates\">Email</Label>\n *\n * @example\n * // With ReactNode children\n * <Label>\n * <span>Custom label with <strong>bold</strong> text</span>\n * </Label>\n */\nexport function Label({\n children,\n showOptional = false,\n tooltip,\n className,\n htmlFor,\n asContent = false,\n}: LabelProps) {\n const content = (\n <>\n {children}\n {showOptional && (\n <span className=\"font-normal text-kumo-strong\">(optional)</span>\n )}\n {tooltip && (\n <Tooltip content={tooltip} asChild>\n <Button\n variant=\"ghost\"\n size=\"xs\"\n shape=\"square\"\n aria-label=\"More information\"\n >\n <Info className=\"size-4\" />\n </Button>\n </Tooltip>\n )}\n </>\n );\n\n // When used as content inside another styled element, just render inline\n if (asContent) {\n return (\n <span className={cn(labelContentVariants(), className)}>{content}</span>\n );\n }\n\n // When used standalone, render as <label> for accessibility\n return (\n <label\n htmlFor={htmlFor}\n className={cn(labelVariants(), labelContentVariants(), className)}\n >\n {content}\n </label>\n );\n}\n\nLabel.displayName = \"Label\";\n"],"names":["KUMO_LABEL_VARIANTS","KUMO_LABEL_DEFAULT_VARIANTS","labelVariants","_props","cn","labelContentVariants","Label","children","showOptional","tooltip","className","htmlFor","asContent","content","jsxs","Fragment","jsx","Tooltip","Button","Info"],"mappings":";;;;;;AAOO,MAAMA,IAAsB;AAAA;AAEnC,GAEaC,IAA8B,CAAA;AAKpC,SAASC,EAAcC,IAAiC,IAAI;AACjE,SAAOC;AAAA;AAAA;AAAA,IAGL;AAAA,EAAA;AAEJ;AAEO,SAASC,IAAuB;AACrC,SAAOD;AAAA;AAAA,IAEL;AAAA,EAAA;AAEJ;AAyDO,SAASE,EAAM;AAAA,EACpB,UAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAAe;AACb,QAAMC,IACJ,gBAAAC,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAR;AAAA,IACAC,KACC,gBAAAQ,EAAC,QAAA,EAAK,WAAU,gCAA+B,UAAA,cAAU;AAAA,IAE1DP,KACC,gBAAAO,EAACC,GAAA,EAAQ,SAASR,GAAS,SAAO,IAChC,UAAA,gBAAAO;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,OAAM;AAAA,QACN,cAAW;AAAA,QAEX,UAAA,gBAAAF,EAACG,GAAA,EAAK,WAAU,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA,EAC3B,CACF;AAAA,EAAA,GAEJ;AAIF,SAAIP,IAEA,gBAAAI,EAAC,UAAK,WAAWZ,EAAGC,KAAwBK,CAAS,GAAI,UAAAG,GAAQ,IAMnE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAAL;AAAA,MACA,WAAWP,EAAGF,EAAA,GAAiBG,EAAA,GAAwBK,CAAS;AAAA,MAE/D,UAAAG;AAAA,IAAA;AAAA,EAAA;AAGP;AAEAP,EAAM,cAAc;"}
|
|
@@ -3,7 +3,7 @@ import { jsxs as d, jsx as e } from "react/jsx-runtime";
|
|
|
3
3
|
import { forwardRef as k } from "react";
|
|
4
4
|
import { c as t } from "./cn-ct4n7r74mh8y0f48.js";
|
|
5
5
|
import { u as p } from "./link-provider-mn2voeohon7cj9o4.js";
|
|
6
|
-
import { bl as f, bm as L } from "./vendor-base-ui-
|
|
6
|
+
import { bl as f, bm as L } from "./vendor-base-ui-ccr5l0ynrievzzv3.js";
|
|
7
7
|
const i = (n) => /* @__PURE__ */ d(
|
|
8
8
|
"svg",
|
|
9
9
|
{
|
|
@@ -76,4 +76,4 @@ export {
|
|
|
76
76
|
h as a,
|
|
77
77
|
C as l
|
|
78
78
|
};
|
|
79
|
-
//# sourceMappingURL=link-
|
|
79
|
+
//# sourceMappingURL=link-o7yfj4kwgl19fklp.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"link-
|
|
1
|
+
{"version":3,"file":"link-o7yfj4kwgl19fklp.js","sources":["../../src/components/link/link.tsx"],"sourcesContent":["import { forwardRef, type SVGProps } from \"react\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { cn } from \"../../utils/cn\";\nimport {\n useLinkComponent,\n type LinkComponentProps,\n} from \"../../utils/link-provider\";\n\n/**\n * ExternalIcon - Visual indicator for links that open in a new tab/window.\n *\n * Use this as a child of Link to indicate external navigation:\n * ```tsx\n * <Link href=\"https://example.com\" target=\"_blank\" rel=\"noopener noreferrer\">\n * Visit Example <Link.ExternalIcon />\n * </Link>\n * ```\n */\nconst ExternalIcon = (props: SVGProps<SVGSVGElement>) => (\n <svg\n width=\"1em\"\n height=\"1em\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n className=\"link-external-icon\"\n {...props}\n >\n <path d=\"M9 4H8.8C7.11984 4 6.27976 4 5.63803 4.32698C5.07354 4.6146 4.6146 5.07354 4.32698 5.63803C4 6.27976 4 7.11984 4 8.8V15.2C4 16.8802 4 17.7202 4.32698 18.362C4.6146 18.9265 5.07354 19.3854 5.63803 19.673C6.27976 20 7.11984 20 8.8 20H15.2C16.8802 20 17.7202 20 18.362 19.673C18.9265 19.3854 19.3854 18.9265 19.673 18.362C20 17.7202 20 16.8802 20 15.2V15\" />\n <path d=\"M14 4H20M20 4V10M20 4L11 13\" />\n </svg>\n);\n\nExternalIcon.displayName = \"Link.ExternalIcon\";\n\n/** Link variant definitions mapping variant names to their Tailwind classes. */\nexport const KUMO_LINK_VARIANTS = {\n variant: {\n inline: {\n classes:\n // text-kumo-link provides defensive color that won't be overridden by global `a` styles\n \"text-kumo-link underline underline-offset-[0.15em] decoration-[0.0625em] link-current transition-colors\",\n description: \"Inline text link that flows with content\",\n },\n current: {\n classes:\n \"text-current underline underline-offset-[0.15em] decoration-[0.0625em] link-current transition-colors\",\n description: \"Link that inherits color from parent text\",\n },\n plain: {\n classes:\n // text-kumo-link provides defensive color that won't be overridden by global `a` styles\n \"text-kumo-link hover:text-kumo-link/70 transition-colors\",\n description: \"Link without underline decoration\",\n },\n },\n} as const;\n\nexport const KUMO_LINK_DEFAULT_VARIANTS = {\n variant: \"inline\",\n} as const;\n\nexport type KumoLinkVariant = keyof typeof KUMO_LINK_VARIANTS.variant;\n\nexport interface KumoLinkVariantsProps {\n /**\n * Visual style of the link.\n * - `\"inline\"` — Inline text link that flows with content\n * - `\"current\"` — Link that inherits color from parent text\n * - `\"plain\"` — Link without underline decoration\n * @default \"inline\"\n */\n variant?: KumoLinkVariant;\n}\n\nexport function linkVariants({\n variant = KUMO_LINK_DEFAULT_VARIANTS.variant,\n}: KumoLinkVariantsProps = {}) {\n return cn(KUMO_LINK_VARIANTS.variant[variant].classes);\n}\n\n/**\n * Link component props.\n *\n * @example\n * ```tsx\n * <Link href=\"/docs\">Learn more</Link>\n * <Link href=\"https://cloudflare.com\" target=\"_blank\" rel=\"noopener noreferrer\">\n * Visit Cloudflare <Link.ExternalIcon />\n * </Link>\n * <Link render={<RouterLink to=\"/dashboard\" />}>Dashboard</Link>\n * ```\n */\nexport type LinkProps = useRender.ComponentProps<\"a\"> &\n LinkComponentProps &\n KumoLinkVariantsProps;\n\n/**\n * Link component for consistent inline text links.\n *\n * Supports composition via `render` prop for framework-specific routing:\n * - Without render: renders via LinkProvider (default anchor or configured component)\n * - With render: merges props onto the provided element with proper ref/event handling\n *\n * @example Basic usage\n * ```tsx\n * <Link href=\"/docs\">Learn more</Link>\n * ```\n *\n * @example External link with icon\n * ```tsx\n * <Link href=\"https://cloudflare.com\" target=\"_blank\" rel=\"noopener noreferrer\">\n * Visit Cloudflare <Link.ExternalIcon />\n * </Link>\n * ```\n *\n * @example Composition with React Router\n * ```tsx\n * <Link render={<RouterLink to=\"/dashboard\" />} variant=\"inline\">\n * Dashboard\n * </Link>\n * ```\n */\nconst LinkBase = forwardRef<HTMLAnchorElement, LinkProps>(function Link(\n { className, variant = \"inline\", render, ...props },\n ref,\n) {\n const LinkComponent = useLinkComponent();\n\n const defaultProps: useRender.ElementProps<\"a\"> = {\n className: cn(\n linkVariants({ variant }),\n \"group/link inline-flex items-center gap-[0.1875em]\",\n ),\n };\n\n const element = useRender({\n render: render ?? <LinkComponent />,\n ref,\n props: mergeProps<\"a\">(defaultProps, props, { className }),\n });\n\n return element;\n});\n\nLinkBase.displayName = \"Link\";\n\n// Compound component with ExternalIcon subcomponent\nexport const Link = Object.assign(LinkBase, {\n ExternalIcon,\n});\n"],"names":["ExternalIcon","props","jsxs","jsx","KUMO_LINK_VARIANTS","KUMO_LINK_DEFAULT_VARIANTS","linkVariants","variant","cn","LinkBase","forwardRef","className","render","ref","LinkComponent","useLinkComponent","defaultProps","useRender","mergeProps","Link"],"mappings":";;;;;;AAmBA,MAAMA,IAAe,CAACC,MACpB,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,QAAO;AAAA,IACP,eAAc;AAAA,IACd,gBAAe;AAAA,IACf,eAAY;AAAA,IACZ,WAAU;AAAA,IACT,GAAGD;AAAA,IAEJ,UAAA;AAAA,MAAA,gBAAAE,EAAC,QAAA,EAAK,GAAE,kWAAA,CAAkW;AAAA,MAC1W,gBAAAA,EAAC,QAAA,EAAK,GAAE,8BAAA,CAA8B;AAAA,IAAA;AAAA,EAAA;AACxC;AAGFH,EAAa,cAAc;AAGpB,MAAMI,IAAqB;AAAA,EAChC,SAAS;AAAA,IACP,QAAQ;AAAA,MACN;AAAA;AAAA,QAEE;AAAA;AAAA,MACF,aAAa;AAAA,IAAA;AAAA,IAEf,SAAS;AAAA,MACP,SACE;AAAA,MACF,aAAa;AAAA,IAAA;AAAA,IAEf,OAAO;AAAA,MACL;AAAA;AAAA,QAEE;AAAA;AAAA,MACF,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA6B;AAAA,EACxC,SAAS;AACX;AAeO,SAASC,EAAa;AAAA,EAC3B,SAAAC,IAAUF,EAA2B;AACvC,IAA2B,IAAI;AAC7B,SAAOG,EAAGJ,EAAmB,QAAQG,CAAO,EAAE,OAAO;AACvD;AA4CA,MAAME,IAAWC,EAAyC,SACxD,EAAE,WAAAC,GAAW,SAAAJ,IAAU,UAAU,QAAAK,GAAQ,GAAGX,EAAA,GAC5CY,GACA;AACA,QAAMC,IAAgBC,EAAA,GAEhBC,IAA4C;AAAA,IAChD,WAAWR;AAAA,MACTF,EAAa,EAAE,SAAAC,GAAS;AAAA,MACxB;AAAA,IAAA;AAAA,EACF;AASF,SANgBU,EAAU;AAAA,IACxB,QAAQL,KAAU,gBAAAT,EAACW,GAAA,CAAA,CAAc;AAAA,IACjC,KAAAD;AAAA,IACA,OAAOK,EAAgBF,GAAcf,GAAO,EAAE,WAAAU,GAAW;AAAA,EAAA,CAC1D;AAGH,CAAC;AAEDF,EAAS,cAAc;AAGhB,MAAMU,IAAO,OAAO,OAAOV,GAAU;AAAA,EAC1C,cAAAT;AACF,CAAC;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as i } from "react/jsx-runtime";
|
|
3
|
-
import { T as g } from "./tooltip-
|
|
3
|
+
import { T as g } from "./tooltip-hnc71tg4gz2gpcvc.js";
|
|
4
4
|
import { c as h } from "./cn-ct4n7r74mh8y0f48.js";
|
|
5
5
|
import { IconContext as w } from "@phosphor-icons/react";
|
|
6
6
|
import { useRef as p, useEffect as y } from "react";
|
|
@@ -89,4 +89,4 @@ export {
|
|
|
89
89
|
I as M,
|
|
90
90
|
E as u
|
|
91
91
|
};
|
|
92
|
-
//# sourceMappingURL=menubar-
|
|
92
|
+
//# sourceMappingURL=menubar-g1wqqjuyyfvsim83.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menubar-
|
|
1
|
+
{"version":3,"file":"menubar-g1wqqjuyyfvsim83.js","sources":["../../src/components/menubar/use-menu-navigation.ts","../../src/components/menubar/menubar.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\n\ntype UseMenuNavigationProps = {\n menuRef: React.RefObject<HTMLElement | null>;\n direction?: \"horizontal\" | \"vertical\"; // Default: horizontal\n};\n\nexport const useMenuNavigation = ({\n menuRef,\n direction = \"horizontal\",\n}: UseMenuNavigationProps) => {\n const activeElementRef = useRef<HTMLElement | null>(null);\n\n useEffect(() => {\n if (!menuRef.current) return;\n\n const focusableElements = Array.from(\n menuRef.current.querySelectorAll(\n 'a, button, input, textarea, select, details, [tabindex]:not([tabindex=\"-1\"])',\n ),\n ) as HTMLElement[];\n\n if (focusableElements.length === 0) return;\n\n const handleKeyDown = (e: KeyboardEvent) => {\n if (!activeElementRef.current) return;\n\n const currentIndex = focusableElements.indexOf(activeElementRef.current);\n let nextIndex = currentIndex;\n\n const isHorizontal = direction === \"horizontal\";\n const forwardKey = isHorizontal ? \"ArrowRight\" : \"ArrowDown\";\n const backwardKey = isHorizontal ? \"ArrowLeft\" : \"ArrowUp\";\n\n if (e.key === forwardKey) {\n e.preventDefault();\n nextIndex = (currentIndex + 1) % focusableElements.length;\n } else if (e.key === backwardKey) {\n e.preventDefault();\n nextIndex =\n (currentIndex - 1 + focusableElements.length) %\n focusableElements.length;\n } else {\n return;\n }\n\n const nextElement = focusableElements[nextIndex];\n activeElementRef.current = nextElement;\n nextElement.focus();\n };\n\n const addKeyListener = () =>\n document.addEventListener(\"keydown\", handleKeyDown);\n const removeKeyListener = () =>\n document.removeEventListener(\"keydown\", handleKeyDown);\n\n const handleFocusIn = () => {\n activeElementRef.current = document.activeElement as HTMLElement;\n addKeyListener();\n };\n\n const handleFocusOut = () => {\n activeElementRef.current = null;\n removeKeyListener();\n };\n\n menuRef.current.addEventListener(\"focusin\", handleFocusIn);\n menuRef.current.addEventListener(\"focusout\", handleFocusOut);\n\n return () => {\n menuRef.current?.removeEventListener(\"focusin\", handleFocusIn);\n menuRef.current?.removeEventListener(\"focusout\", handleFocusOut);\n removeKeyListener();\n };\n }, [menuRef, direction]);\n};\n","import { Tooltip } from \"../tooltip\";\nimport { cn } from \"../../utils/cn\";\nimport { IconContext } from \"@phosphor-icons/react\";\nimport React, { useRef } from \"react\";\nimport { useMenuNavigation } from \"./use-menu-navigation\";\n\n/** MenuBar variant definitions (currently empty, reserved for future additions). */\nexport const KUMO_MENUBAR_VARIANTS = {\n // MenuBar currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const KUMO_MENUBAR_DEFAULT_VARIANTS = {} as const;\n\n// Derived types from KUMO_MENUBAR_VARIANTS\nexport interface KumoMenuBarVariantsProps {}\n\nexport function menuBarVariants(_props: KumoMenuBarVariantsProps = {}) {\n return cn(\n // Base styles\n \"flex rounded-lg border border-kumo-fill bg-kumo-fill pl-px shadow-xs transition-colors\",\n );\n}\n\n/** Props for an individual menu option within a MenuBar. */\ntype MenuOptionProps = {\n /** Icon element (typically from `@phosphor-icons/react`) rendered at 18px */\n icon: React.ReactNode;\n /** Unique identifier for the option (used when `optionIds` is true) */\n id?: number | string;\n /** Currently active value from the parent MenuBar */\n isActive?: number | boolean | string | undefined;\n /** Callback when this option is clicked */\n onClick: () => void;\n /** Tooltip text shown on hover */\n tooltip: string;\n};\n\nconst MenuOption = ({\n icon,\n id,\n isActive,\n onClick,\n tooltip,\n}: MenuOptionProps) => {\n return (\n <Tooltip content={tooltip} asChild>\n <button\n className={cn(\n \"focus:inset-ring-focus relative -ml-px flex h-full w-11 cursor-pointer items-center justify-center rounded-md border-none bg-kumo-fill first:rounded-l-lg last:rounded-r-lg transition-colors focus:z-1 focus:outline-none focus-visible:z-1 focus-visible:inset-ring-[0.5]\",\n {\n \"z-2 bg-kumo-base shadow-xs transition-colors\": isActive === id,\n },\n )}\n onClick={onClick}\n >\n <IconContext.Provider value={{ size: 18 }} {...({} as any)}>\n {icon}\n </IconContext.Provider>\n </button>\n </Tooltip>\n );\n};\n\n/**\n * MenuBar component props.\n *\n * Horizontal icon-button toolbar with keyboard navigation and tooltip labels.\n *\n * @example\n * ```tsx\n * <MenuBar\n * isActive={activeIndex}\n * options={[\n * { icon: <ListIcon />, tooltip: \"List view\", onClick: () => setView(\"list\") },\n * { icon: <GridFourIcon />, tooltip: \"Grid view\", onClick: () => setView(\"grid\") },\n * ]}\n * />\n * ```\n */\ntype MenuBarProps = {\n /** Additional CSS classes merged via `cn()`. */\n className?: string;\n /** The currently active option value — matched against option index or `id`. */\n isActive: number | boolean | string | undefined;\n /** Array of menu option configurations. */\n options: MenuOptionProps[];\n /** When true, each option's `id` field is used for matching instead of its array index. */\n optionIds?: boolean;\n};\n\n/**\n * MenuBar — horizontal icon-button toolbar with keyboard arrow-key navigation.\n *\n * Each option renders as a `<button>` with a Tooltip. The active option is\n * visually highlighted with an elevated background.\n *\n * @example\n * ```tsx\n * <MenuBar\n * isActive={0}\n * options={[\n * { icon: <ListIcon />, tooltip: \"List\", onClick: () => {} },\n * { icon: <GridFourIcon />, tooltip: \"Grid\", onClick: () => {} },\n * ]}\n * />\n * ```\n */\nexport const MenuBar = ({\n className,\n isActive,\n options,\n optionIds = false, // if option needs an extra unique ID\n}: MenuBarProps) => {\n const menuRef = useRef<HTMLElement | null>(null);\n\n useMenuNavigation({ menuRef, direction: \"horizontal\" });\n\n return (\n <nav\n className={cn(\n \"isolate flex rounded-lg border border-kumo-fill bg-kumo-fill pl-px shadow-xs transition-colors\",\n className,\n )}\n ref={menuRef}\n >\n {options.map((option, index) => (\n <MenuOption\n key={index}\n {...option}\n isActive={isActive}\n id={optionIds ? option.id : index}\n />\n ))}\n </nav>\n );\n};\n"],"names":["useMenuNavigation","menuRef","direction","activeElementRef","useRef","useEffect","focusableElements","handleKeyDown","e","currentIndex","nextIndex","isHorizontal","forwardKey","backwardKey","nextElement","addKeyListener","removeKeyListener","handleFocusIn","handleFocusOut","MenuOption","icon","id","isActive","onClick","tooltip","jsx","Tooltip","cn","IconContext","MenuBar","className","options","optionIds","option","index"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsxs as r, jsx as e, Fragment as d } from "react/jsx-runtime";
|
|
3
3
|
import { c as t } from "./cn-ct4n7r74mh8y0f48.js";
|
|
4
|
-
import { aQ as c, aR as f, aS as x, aT as b, aU as h } from "./vendor-base-ui-
|
|
4
|
+
import { aQ as c, aR as f, aS as x, aT as b, aU as h } from "./vendor-base-ui-ccr5l0ynrievzzv3.js";
|
|
5
5
|
function N({
|
|
6
6
|
value: l,
|
|
7
7
|
customValue: a,
|
|
@@ -48,4 +48,4 @@ function N({
|
|
|
48
48
|
export {
|
|
49
49
|
N as M
|
|
50
50
|
};
|
|
51
|
-
//# sourceMappingURL=meter-
|
|
51
|
+
//# sourceMappingURL=meter-cqkrg5axjenbsuue.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"meter-
|
|
1
|
+
{"version":3,"file":"meter-cqkrg5axjenbsuue.js","sources":["../../src/components/meter/meter.tsx"],"sourcesContent":["import { Meter as BaseMeter } from \"@base-ui/react/meter\";\nimport { type ComponentPropsWithoutRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Meter variant definitions (currently empty, reserved for future additions). */\nexport const KUMO_METER_VARIANTS = {\n // Meter currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const KUMO_METER_DEFAULT_VARIANTS = {} as const;\n\n// Derived types from KUMO_METER_VARIANTS\nexport interface KumoMeterVariantsProps {}\n\nexport function meterVariants(_props: KumoMeterVariantsProps = {}) {\n return cn(\n // Base styles\n \"flex w-full flex-col gap-2\",\n );\n}\n\ntype RootProps = ComponentPropsWithoutRef<typeof BaseMeter.Root>;\n\n/**\n * Meter component props.\n *\n * @example\n * ```tsx\n * <Meter label=\"Storage used\" value={65} />\n * <Meter label=\"API requests\" value={75} customValue=\"750 / 1,000\" />\n * ```\n */\nexport interface MeterProps extends RootProps, KumoMeterVariantsProps {\n /** Custom formatted value text (e.g. \"750 / 1,000\") displayed instead of percentage. */\n customValue?: string;\n /** Label text displayed above the meter track. */\n label: string;\n /**\n * Whether to display the percentage value next to the label.\n * @default true\n */\n showValue?: boolean;\n /** Additional CSS classes for the track (background bar). */\n trackClassName?: string;\n /** Additional CSS classes for the indicator (filled bar). */\n indicatorClassName?: string;\n}\n\n/**\n * Progress bar showing a measured value within a known range (e.g. quota usage).\n *\n * @example\n * ```tsx\n * <Meter label=\"Storage\" value={65} />\n * ```\n */\nexport function Meter({\n value,\n customValue,\n label,\n showValue = true,\n className,\n trackClassName,\n indicatorClassName,\n ...props\n}: MeterProps) {\n return (\n <BaseMeter.Root\n value={value}\n {...props}\n className={cn(\"flex w-full flex-col gap-2\", className)}\n >\n <div className=\"flex items-center justify-between gap-4\">\n <BaseMeter.Label className=\"text-xs text-kumo-strong\">\n {label}\n </BaseMeter.Label>\n {customValue ? (\n <span className=\"text-sm font-medium text-kumo-default tabular-nums\">\n {customValue}\n </span>\n ) : (\n <>\n {showValue && (\n <BaseMeter.Value className=\"text-sm font-medium text-kumo-default tabular-nums\" />\n )}\n </>\n )}\n </div>\n <BaseMeter.Track\n className={cn(\n \"relative h-2 w-full overflow-hidden rounded-full bg-kumo-fill\",\n trackClassName,\n )}\n >\n <BaseMeter.Indicator\n className={cn(\n \"absolute inset-y-0 left-0 rounded-full bg-linear-to-r from-kumo-brand via-kumo-brand to-kumo-brand transition-[width] duration-300 ease-out\",\n indicatorClassName,\n )}\n />\n </BaseMeter.Track>\n </BaseMeter.Root>\n );\n}\n"],"names":["Meter","value","customValue","label","showValue","className","trackClassName","indicatorClassName","props","jsxs","BaseMeter.Root","cn","jsx","BaseMeter.Label","Fragment","BaseMeter.Value","BaseMeter.Track","BaseMeter.Indicator"],"mappings":";;;;AAwDO,SAASA,EAAM;AAAA,EACpB,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,GAAGC;AACL,GAAe;AACb,SACE,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,OAAAT;AAAA,MACC,GAAGO;AAAA,MACJ,WAAWG,EAAG,8BAA8BN,CAAS;AAAA,MAErD,UAAA;AAAA,QAAA,gBAAAI,EAAC,OAAA,EAAI,WAAU,2CACb,UAAA;AAAA,UAAA,gBAAAG,EAACC,GAAA,EAAgB,WAAU,4BACxB,UAAAV,GACH;AAAA,UACCD,IACC,gBAAAU,EAAC,QAAA,EAAK,WAAU,sDACb,UAAAV,EAAA,CACH,IAEA,gBAAAU,EAAAE,GAAA,EACG,UAAAV,uBACEW,GAAA,EAAgB,WAAU,sDAAqD,EAAA,CAEpF;AAAA,QAAA,GAEJ;AAAA,QACA,gBAAAH;AAAA,UAACI;AAAAA,UAAA;AAAA,YACC,WAAWL;AAAA,cACT;AAAA,cACAL;AAAA,YAAA;AAAA,YAGF,UAAA,gBAAAM;AAAA,cAACK;AAAAA,cAAA;AAAA,gBACC,WAAWN;AAAA,kBACT;AAAA,kBACAJ;AAAA,gBAAA;AAAA,cACF;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as a, jsxs as g, Fragment as C } from "react/jsx-runtime";
|
|
3
3
|
import { useState as O, useEffect as R, useMemo as b, createContext as T, useContext as _ } from "react";
|
|
4
|
-
import { I as c } from "./input-group-
|
|
4
|
+
import { I as c } from "./input-group-cjsy8kh4vf9312xl.js";
|
|
5
5
|
import { CaretDoubleLeftIcon as B, CaretLeftIcon as L, CaretRightIcon as D, CaretDoubleRightIcon as F } from "@phosphor-icons/react";
|
|
6
6
|
import { c as u } from "./cn-ct4n7r74mh8y0f48.js";
|
|
7
|
-
import { S as v } from "./select-
|
|
7
|
+
import { S as v } from "./select-hnt87e3cfos48qql.js";
|
|
8
8
|
const V = [25, 50, 100, 250], f = {
|
|
9
9
|
controls: "full"
|
|
10
10
|
}, h = T(null);
|
|
@@ -221,4 +221,4 @@ const q = Object.assign(M, {
|
|
|
221
221
|
export {
|
|
222
222
|
q as P
|
|
223
223
|
};
|
|
224
|
-
//# sourceMappingURL=pagination-
|
|
224
|
+
//# sourceMappingURL=pagination-e3dp8bd80s35f7sd.js.map
|
package/dist/chunks/{pagination-owm6h66jjgv1tjoe.js.map → pagination-e3dp8bd80s35f7sd.js.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pagination-owm6h66jjgv1tjoe.js","sources":["../../src/components/pagination/pagination.tsx"],"sourcesContent":["import {\n createContext,\n useContext,\n useEffect,\n useMemo,\n useState,\n type ReactNode,\n} from \"react\";\nimport { InputGroup } from \"../input\";\nimport {\n CaretDoubleLeftIcon,\n CaretDoubleRightIcon,\n CaretLeftIcon,\n CaretRightIcon,\n} from \"@phosphor-icons/react\";\nimport { cn } from \"../../utils/cn\";\nimport { Select } from \"../select\";\n\nconst DEFAULT_PAGE_SIZE_OPTIONS = [25, 50, 100, 250] as const;\n\n/** Pagination controls variant definitions. */\nexport const KUMO_PAGINATION_VARIANTS = {\n controls: {\n full: {\n classes: \"\",\n description:\n \"Full pagination controls with first, previous, page input, next, and last buttons\",\n },\n simple: {\n classes: \"\",\n description:\n \"Simple pagination controls with only previous and next buttons\",\n },\n },\n} as const;\n\nexport type KumoPaginationControls =\n keyof typeof KUMO_PAGINATION_VARIANTS.controls;\n\nexport const KUMO_PAGINATION_DEFAULT_VARIANTS = {\n controls: \"full\",\n} as const;\n\nexport interface KumoPaginationVariantsProps {\n controls?: KumoPaginationControls;\n}\n\nexport function paginationVariants({\n controls = KUMO_PAGINATION_DEFAULT_VARIANTS.controls,\n}: KumoPaginationVariantsProps = {}) {\n return cn(\n \"flex items-center justify-between gap-2\",\n KUMO_PAGINATION_VARIANTS.controls[controls].classes,\n );\n}\n\n// ============================================================================\n// Pagination Context\n// ============================================================================\n\ninterface PaginationContextValue {\n page: number;\n perPage?: number;\n totalCount?: number;\n maxPage: number;\n pageShowingRange: string;\n setPage: (page: number) => void;\n editingPage: number;\n setEditingPage: (page: number) => void;\n}\n\nconst PaginationContext = createContext<PaginationContextValue | null>(null);\n\nfunction usePaginationContext() {\n const context = useContext(PaginationContext);\n if (!context) {\n throw new Error(\n \"Pagination compound components must be used within a Pagination component\",\n );\n }\n return context;\n}\n\n// ============================================================================\n// Pagination.Info\n// ============================================================================\n\nexport interface PaginationInfoProps {\n /** Custom render function for the info text */\n children?: (props: {\n page: number;\n perPage?: number;\n totalCount?: number;\n pageShowingRange: string;\n }) => ReactNode;\n /** Additional CSS classes */\n className?: string;\n}\n\nfunction PaginationInfo({ children, className }: PaginationInfoProps) {\n const { page, perPage, totalCount, pageShowingRange } =\n usePaginationContext();\n\n const content = children ? (\n children({ page, perPage, totalCount, pageShowingRange })\n ) : totalCount && totalCount > 0 ? (\n <>\n Showing <span className=\"tabular-nums\">{pageShowingRange}</span> of{\" \"}\n <span className=\"tabular-nums\">{totalCount}</span>\n </>\n ) : null;\n\n return (\n <div\n data-slot=\"pagination-info\"\n className={cn(\"text-sm text-kumo-strong\", className)}\n >\n {content}\n </div>\n );\n}\n\nPaginationInfo.displayName = \"Pagination.Info\";\n\n// ============================================================================\n// Pagination.PageSize\n// ============================================================================\n\nexport interface PaginationPageSizeProps {\n /** Current page size value */\n value: number;\n /** Callback when page size changes */\n onChange: (size: number) => void;\n /** Available page size options */\n options?: number[];\n /** Label text shown before the selector */\n label?: ReactNode;\n /** Additional CSS classes */\n className?: string;\n}\n\nfunction PaginationPageSize({\n value,\n onChange,\n options = DEFAULT_PAGE_SIZE_OPTIONS as unknown as number[],\n label = \"Per page:\",\n className,\n}: PaginationPageSizeProps) {\n return (\n <div\n data-slot=\"pagination-page-size\"\n className={cn(\"flex items-center gap-2\", className)}\n >\n {label && <span className=\"text-sm text-kumo-strong\">{label}</span>}\n <Select\n aria-label=\"Page size\"\n value={value}\n onValueChange={(v) => onChange(v as number)}\n >\n {options.map((size) => (\n <Select.Option key={size} value={size}>\n {size}\n </Select.Option>\n ))}\n </Select>\n </div>\n );\n}\n\nPaginationPageSize.displayName = \"Pagination.PageSize\";\n\n// ============================================================================\n// Pagination.Controls\n// ============================================================================\n\nexport interface PaginationControlsProps extends KumoPaginationVariantsProps {\n /** Additional CSS classes */\n className?: string;\n}\n\nfunction PaginationControls({\n controls = KUMO_PAGINATION_DEFAULT_VARIANTS.controls,\n className,\n}: PaginationControlsProps) {\n const { page, maxPage, setPage, editingPage, setEditingPage } =\n usePaginationContext();\n\n return (\n <div\n data-slot=\"pagination-controls\"\n className={cn(\"grow flex flex-col items-end\", className)}\n >\n <div>\n <InputGroup focusMode=\"individual\">\n {controls === \"full\" && (\n <InputGroup.Button\n variant=\"secondary\"\n aria-label=\"First page\"\n disabled={page <= 1}\n onClick={() => {\n setPage(1);\n setEditingPage(1);\n }}\n >\n <CaretDoubleLeftIcon size={16} />\n </InputGroup.Button>\n )}\n <InputGroup.Button\n variant=\"secondary\"\n aria-label=\"Previous page\"\n disabled={page <= 1}\n onClick={() => {\n const previousPage = Math.max(page - 1, 1);\n setPage(previousPage);\n setEditingPage(previousPage);\n }}\n >\n <CaretLeftIcon size={16} />\n </InputGroup.Button>\n {controls === \"full\" && (\n <InputGroup.Input\n style={{ width: 50 }}\n className=\"text-center\"\n aria-label=\"Page number\"\n value={editingPage}\n onValueChange={(value: string) => {\n setEditingPage(Number(value));\n }}\n onBlur={() => {\n let number = Math.max(editingPage, 1);\n number = Math.min(number, maxPage);\n setPage(number);\n setEditingPage(number);\n }}\n // Prevent password managers from auto-filling\n autoComplete=\"off\"\n data-1p-ignore\n data-lpignore=\"true\"\n data-form-type=\"other\"\n />\n )}\n <InputGroup.Button\n variant=\"secondary\"\n aria-label=\"Next page\"\n disabled={page === maxPage}\n onClick={() => {\n const nextPage = Math.min(page + 1, maxPage);\n setPage(nextPage);\n setEditingPage(nextPage);\n }}\n >\n <CaretRightIcon size={16} />\n </InputGroup.Button>\n {controls === \"full\" && (\n <InputGroup.Button\n variant=\"secondary\"\n aria-label=\"Last page\"\n disabled={page === maxPage}\n onClick={() => {\n setPage(maxPage);\n setEditingPage(maxPage);\n }}\n >\n <CaretDoubleRightIcon size={16} />\n </InputGroup.Button>\n )}\n </InputGroup>\n </div>\n </div>\n );\n}\n\nPaginationControls.displayName = \"Pagination.Controls\";\n\n// ============================================================================\n// Pagination.Separator\n// ============================================================================\n\nexport interface PaginationSeparatorProps {\n /** Additional CSS classes */\n className?: string;\n}\n\nfunction PaginationSeparator({ className }: PaginationSeparatorProps) {\n return (\n <div\n data-slot=\"pagination-separator\"\n className={cn(\"mx-2 h-6 border-l border-kumo-line\", className)}\n />\n );\n}\n\nPaginationSeparator.displayName = \"Pagination.Separator\";\n\n// ============================================================================\n// Pagination Root\n// ============================================================================\n\n/** Base props shared by both compound and legacy Pagination APIs */\ninterface PaginationBaseProps {\n /** Callback fired when the current page changes. */\n setPage: (page: number) => void;\n /**\n * Current page number (1-indexed).\n * @default 1\n */\n page?: number;\n /** Number of items displayed per page. */\n perPage?: number;\n /** Total number of items across all pages. */\n totalCount?: number;\n /** Additional CSS classes for the container */\n className?: string;\n}\n\n/**\n * Props for the compound component API (recommended).\n *\n * @example\n * ```tsx\n * <Pagination page={page} setPage={setPage} perPage={perPage} totalCount={500}>\n * <Pagination.Info />\n * <Pagination.PageSize value={perPage} onChange={setPerPage} />\n * <Pagination.Controls />\n * </Pagination>\n * ```\n */\nexport interface PaginationCompoundProps extends PaginationBaseProps {\n /**\n * Compound component children for custom layouts.\n * Use Pagination.Info, Pagination.PageSize, Pagination.Controls, and Pagination.Separator.\n */\n children: ReactNode;\n controls?: never;\n text?: never;\n}\n\n/**\n * Props for the legacy API (deprecated, use compound components instead).\n *\n * @deprecated Use the compound component API with children instead:\n * ```tsx\n * <Pagination page={page} setPage={setPage} perPage={perPage} totalCount={500}>\n * <Pagination.Info />\n * <Pagination.Controls />\n * </Pagination>\n * ```\n *\n * @example\n * ```tsx\n * // Legacy usage (deprecated)\n * <Pagination page={page} setPage={setPage} perPage={10} totalCount={100} />\n * ```\n */\nexport interface PaginationLegacyProps\n extends PaginationBaseProps,\n KumoPaginationVariantsProps {\n children?: never;\n /** @deprecated Use Pagination.Info with children prop instead */\n text?: (props: {\n page?: number;\n perPage?: number;\n totalCount?: number;\n pageShowingRange: string;\n }) => ReactNode;\n}\n\n/**\n * Pagination component props.\n *\n * Prefer the compound component API for new code:\n * @example\n * ```tsx\n * <Pagination page={page} setPage={setPage} perPage={perPage} totalCount={500}>\n * <Pagination.Info />\n * <Pagination.PageSize value={perPage} onChange={setPerPage} />\n * <Pagination.Controls />\n * </Pagination>\n * ```\n */\nexport type PaginationProps = PaginationCompoundProps | PaginationLegacyProps;\n\n/**\n * Page navigation controls with page count display.\n *\n * Supports both compound component and legacy patterns. Prefer compound components for new code:\n *\n * @example\n * // Compound component (recommended)\n * ```tsx\n * <Pagination page={page} setPage={setPage} perPage={perPage} totalCount={500}>\n * <Pagination.Info />\n * <Pagination.Separator />\n * <Pagination.PageSize value={perPage} onChange={setPerPage} />\n * <Pagination.Controls />\n * </Pagination>\n * ```\n *\n * @example\n * // Legacy (deprecated)\n * ```tsx\n * <Pagination page={page} setPage={setPage} perPage={10} totalCount={100} />\n * ```\n */\nfunction PaginationRoot(props: PaginationProps) {\n const { page = 1, perPage, totalCount, setPage, children, className } = props;\n\n // Extract legacy props (only present when children is not provided)\n const text = \"text\" in props ? props.text : undefined;\n const controls =\n \"controls\" in props\n ? (props.controls ?? KUMO_PAGINATION_DEFAULT_VARIANTS.controls)\n : KUMO_PAGINATION_DEFAULT_VARIANTS.controls;\n const [editingPage, setEditingPage] = useState<number>(1);\n\n useEffect(() => {\n setEditingPage(page);\n }, [page]);\n\n const pageShowingRange = useMemo(() => {\n let lower = page * (perPage ?? 1) - (perPage ?? 0) + 1;\n let upper = Math.min(page * (perPage ?? 0), totalCount ?? 0);\n\n if (Number.isNaN(lower)) lower = 0;\n if (Number.isNaN(upper)) upper = 0;\n\n return `${lower}-${upper}`;\n }, [page, perPage, totalCount]);\n\n const maxPage = useMemo(() => {\n return Math.ceil((totalCount ?? 1) / (perPage ?? 1));\n }, [totalCount, perPage]);\n\n const contextValue: PaginationContextValue = {\n page,\n perPage,\n totalCount,\n maxPage,\n pageShowingRange,\n setPage,\n editingPage,\n setEditingPage,\n };\n\n // Compound component mode: render children within context\n if (children) {\n return (\n <PaginationContext.Provider value={contextValue}>\n <div\n data-slot=\"pagination\"\n className={cn(\"flex items-center gap-2 w-full\", className)}\n >\n {children}\n </div>\n </PaginationContext.Provider>\n );\n }\n\n // Legacy mode: render default layout for backwards compatibility\n const getPaginationText = () => {\n if (text) {\n return text({ page, perPage, totalCount, pageShowingRange });\n } else if (totalCount && totalCount > 0) {\n return (\n <>\n Showing <span className=\"tabular-nums\">{pageShowingRange}</span> of{\" \"}\n <span className=\"tabular-nums\">{totalCount}</span>\n </>\n );\n }\n return null;\n };\n\n return (\n <PaginationContext.Provider value={contextValue}>\n <div\n data-slot=\"pagination\"\n className={cn(\"flex items-center gap-2 w-full\", className)}\n >\n <div\n data-slot=\"pagination-info\"\n className=\"grow text-sm text-kumo-strong\"\n >\n {getPaginationText()}\n </div>\n <PaginationControls controls={controls} />\n </div>\n </PaginationContext.Provider>\n );\n}\n\nPaginationRoot.displayName = \"Pagination\";\n\n// ============================================================================\n// Compound Component Export\n// ============================================================================\n\nexport const Pagination = Object.assign(PaginationRoot, {\n Info: PaginationInfo,\n PageSize: PaginationPageSize,\n Controls: PaginationControls,\n Separator: PaginationSeparator,\n});\n\nexport {\n PaginationInfo,\n PaginationPageSize,\n PaginationControls,\n PaginationSeparator,\n};\n"],"names":["DEFAULT_PAGE_SIZE_OPTIONS","KUMO_PAGINATION_DEFAULT_VARIANTS","PaginationContext","createContext","usePaginationContext","context","useContext","PaginationInfo","children","className","page","perPage","totalCount","pageShowingRange","content","jsxs","Fragment","jsx","cn","PaginationPageSize","value","onChange","options","label","Select","v","size","PaginationControls","controls","maxPage","setPage","editingPage","setEditingPage","InputGroup","CaretDoubleLeftIcon","previousPage","CaretLeftIcon","number","nextPage","CaretRightIcon","CaretDoubleRightIcon","PaginationSeparator","PaginationRoot","props","text","useState","useEffect","useMemo","lower","upper","contextValue","getPaginationText","Pagination"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"pagination-e3dp8bd80s35f7sd.js","sources":["../../src/components/pagination/pagination.tsx"],"sourcesContent":["import {\n createContext,\n useContext,\n useEffect,\n useMemo,\n useState,\n type ReactNode,\n} from \"react\";\nimport { InputGroup } from \"../input\";\nimport {\n CaretDoubleLeftIcon,\n CaretDoubleRightIcon,\n CaretLeftIcon,\n CaretRightIcon,\n} from \"@phosphor-icons/react\";\nimport { cn } from \"../../utils/cn\";\nimport { Select } from \"../select\";\n\nconst DEFAULT_PAGE_SIZE_OPTIONS = [25, 50, 100, 250] as const;\n\n/** Pagination controls variant definitions. */\nexport const KUMO_PAGINATION_VARIANTS = {\n controls: {\n full: {\n classes: \"\",\n description:\n \"Full pagination controls with first, previous, page input, next, and last buttons\",\n },\n simple: {\n classes: \"\",\n description:\n \"Simple pagination controls with only previous and next buttons\",\n },\n },\n} as const;\n\nexport type KumoPaginationControls =\n keyof typeof KUMO_PAGINATION_VARIANTS.controls;\n\nexport const KUMO_PAGINATION_DEFAULT_VARIANTS = {\n controls: \"full\",\n} as const;\n\nexport interface KumoPaginationVariantsProps {\n controls?: KumoPaginationControls;\n}\n\nexport function paginationVariants({\n controls = KUMO_PAGINATION_DEFAULT_VARIANTS.controls,\n}: KumoPaginationVariantsProps = {}) {\n return cn(\n \"flex items-center justify-between gap-2\",\n KUMO_PAGINATION_VARIANTS.controls[controls].classes,\n );\n}\n\n// ============================================================================\n// Pagination Context\n// ============================================================================\n\ninterface PaginationContextValue {\n page: number;\n perPage?: number;\n totalCount?: number;\n maxPage: number;\n pageShowingRange: string;\n setPage: (page: number) => void;\n editingPage: number;\n setEditingPage: (page: number) => void;\n}\n\nconst PaginationContext = createContext<PaginationContextValue | null>(null);\n\nfunction usePaginationContext() {\n const context = useContext(PaginationContext);\n if (!context) {\n throw new Error(\n \"Pagination compound components must be used within a Pagination component\",\n );\n }\n return context;\n}\n\n// ============================================================================\n// Pagination.Info\n// ============================================================================\n\nexport interface PaginationInfoProps {\n /** Custom render function for the info text */\n children?: (props: {\n page: number;\n perPage?: number;\n totalCount?: number;\n pageShowingRange: string;\n }) => ReactNode;\n /** Additional CSS classes */\n className?: string;\n}\n\nfunction PaginationInfo({ children, className }: PaginationInfoProps) {\n const { page, perPage, totalCount, pageShowingRange } =\n usePaginationContext();\n\n const content = children ? (\n children({ page, perPage, totalCount, pageShowingRange })\n ) : totalCount && totalCount > 0 ? (\n <>\n Showing <span className=\"tabular-nums\">{pageShowingRange}</span> of{\" \"}\n <span className=\"tabular-nums\">{totalCount}</span>\n </>\n ) : null;\n\n return (\n <div\n data-slot=\"pagination-info\"\n className={cn(\"text-sm text-kumo-strong\", className)}\n >\n {content}\n </div>\n );\n}\n\nPaginationInfo.displayName = \"Pagination.Info\";\n\n// ============================================================================\n// Pagination.PageSize\n// ============================================================================\n\nexport interface PaginationPageSizeProps {\n /** Current page size value */\n value: number;\n /** Callback when page size changes */\n onChange: (size: number) => void;\n /** Available page size options */\n options?: number[];\n /** Label text shown before the selector */\n label?: ReactNode;\n /** Additional CSS classes */\n className?: string;\n}\n\nfunction PaginationPageSize({\n value,\n onChange,\n options = DEFAULT_PAGE_SIZE_OPTIONS as unknown as number[],\n label = \"Per page:\",\n className,\n}: PaginationPageSizeProps) {\n return (\n <div\n data-slot=\"pagination-page-size\"\n className={cn(\"flex items-center gap-2\", className)}\n >\n {label && <span className=\"text-sm text-kumo-strong\">{label}</span>}\n <Select\n aria-label=\"Page size\"\n value={value}\n onValueChange={(v) => onChange(v as number)}\n >\n {options.map((size) => (\n <Select.Option key={size} value={size}>\n {size}\n </Select.Option>\n ))}\n </Select>\n </div>\n );\n}\n\nPaginationPageSize.displayName = \"Pagination.PageSize\";\n\n// ============================================================================\n// Pagination.Controls\n// ============================================================================\n\nexport interface PaginationControlsProps extends KumoPaginationVariantsProps {\n /** Additional CSS classes */\n className?: string;\n}\n\nfunction PaginationControls({\n controls = KUMO_PAGINATION_DEFAULT_VARIANTS.controls,\n className,\n}: PaginationControlsProps) {\n const { page, maxPage, setPage, editingPage, setEditingPage } =\n usePaginationContext();\n\n return (\n <div\n data-slot=\"pagination-controls\"\n className={cn(\"grow flex flex-col items-end\", className)}\n >\n <div>\n <InputGroup focusMode=\"individual\">\n {controls === \"full\" && (\n <InputGroup.Button\n variant=\"secondary\"\n aria-label=\"First page\"\n disabled={page <= 1}\n onClick={() => {\n setPage(1);\n setEditingPage(1);\n }}\n >\n <CaretDoubleLeftIcon size={16} />\n </InputGroup.Button>\n )}\n <InputGroup.Button\n variant=\"secondary\"\n aria-label=\"Previous page\"\n disabled={page <= 1}\n onClick={() => {\n const previousPage = Math.max(page - 1, 1);\n setPage(previousPage);\n setEditingPage(previousPage);\n }}\n >\n <CaretLeftIcon size={16} />\n </InputGroup.Button>\n {controls === \"full\" && (\n <InputGroup.Input\n style={{ width: 50 }}\n className=\"text-center\"\n aria-label=\"Page number\"\n value={editingPage}\n onValueChange={(value: string) => {\n setEditingPage(Number(value));\n }}\n onBlur={() => {\n let number = Math.max(editingPage, 1);\n number = Math.min(number, maxPage);\n setPage(number);\n setEditingPage(number);\n }}\n // Prevent password managers from auto-filling\n autoComplete=\"off\"\n data-1p-ignore\n data-lpignore=\"true\"\n data-form-type=\"other\"\n />\n )}\n <InputGroup.Button\n variant=\"secondary\"\n aria-label=\"Next page\"\n disabled={page === maxPage}\n onClick={() => {\n const nextPage = Math.min(page + 1, maxPage);\n setPage(nextPage);\n setEditingPage(nextPage);\n }}\n >\n <CaretRightIcon size={16} />\n </InputGroup.Button>\n {controls === \"full\" && (\n <InputGroup.Button\n variant=\"secondary\"\n aria-label=\"Last page\"\n disabled={page === maxPage}\n onClick={() => {\n setPage(maxPage);\n setEditingPage(maxPage);\n }}\n >\n <CaretDoubleRightIcon size={16} />\n </InputGroup.Button>\n )}\n </InputGroup>\n </div>\n </div>\n );\n}\n\nPaginationControls.displayName = \"Pagination.Controls\";\n\n// ============================================================================\n// Pagination.Separator\n// ============================================================================\n\nexport interface PaginationSeparatorProps {\n /** Additional CSS classes */\n className?: string;\n}\n\nfunction PaginationSeparator({ className }: PaginationSeparatorProps) {\n return (\n <div\n data-slot=\"pagination-separator\"\n className={cn(\"mx-2 h-6 border-l border-kumo-line\", className)}\n />\n );\n}\n\nPaginationSeparator.displayName = \"Pagination.Separator\";\n\n// ============================================================================\n// Pagination Root\n// ============================================================================\n\n/** Base props shared by both compound and legacy Pagination APIs */\ninterface PaginationBaseProps {\n /** Callback fired when the current page changes. */\n setPage: (page: number) => void;\n /**\n * Current page number (1-indexed).\n * @default 1\n */\n page?: number;\n /** Number of items displayed per page. */\n perPage?: number;\n /** Total number of items across all pages. */\n totalCount?: number;\n /** Additional CSS classes for the container */\n className?: string;\n}\n\n/**\n * Props for the compound component API (recommended).\n *\n * @example\n * ```tsx\n * <Pagination page={page} setPage={setPage} perPage={perPage} totalCount={500}>\n * <Pagination.Info />\n * <Pagination.PageSize value={perPage} onChange={setPerPage} />\n * <Pagination.Controls />\n * </Pagination>\n * ```\n */\nexport interface PaginationCompoundProps extends PaginationBaseProps {\n /**\n * Compound component children for custom layouts.\n * Use Pagination.Info, Pagination.PageSize, Pagination.Controls, and Pagination.Separator.\n */\n children: ReactNode;\n controls?: never;\n text?: never;\n}\n\n/**\n * Props for the legacy API (deprecated, use compound components instead).\n *\n * @deprecated Use the compound component API with children instead:\n * ```tsx\n * <Pagination page={page} setPage={setPage} perPage={perPage} totalCount={500}>\n * <Pagination.Info />\n * <Pagination.Controls />\n * </Pagination>\n * ```\n *\n * @example\n * ```tsx\n * // Legacy usage (deprecated)\n * <Pagination page={page} setPage={setPage} perPage={10} totalCount={100} />\n * ```\n */\nexport interface PaginationLegacyProps\n extends PaginationBaseProps,\n KumoPaginationVariantsProps {\n children?: never;\n /** @deprecated Use Pagination.Info with children prop instead */\n text?: (props: {\n page?: number;\n perPage?: number;\n totalCount?: number;\n pageShowingRange: string;\n }) => ReactNode;\n}\n\n/**\n * Pagination component props.\n *\n * Prefer the compound component API for new code:\n * @example\n * ```tsx\n * <Pagination page={page} setPage={setPage} perPage={perPage} totalCount={500}>\n * <Pagination.Info />\n * <Pagination.PageSize value={perPage} onChange={setPerPage} />\n * <Pagination.Controls />\n * </Pagination>\n * ```\n */\nexport type PaginationProps = PaginationCompoundProps | PaginationLegacyProps;\n\n/**\n * Page navigation controls with page count display.\n *\n * Supports both compound component and legacy patterns. Prefer compound components for new code:\n *\n * @example\n * // Compound component (recommended)\n * ```tsx\n * <Pagination page={page} setPage={setPage} perPage={perPage} totalCount={500}>\n * <Pagination.Info />\n * <Pagination.Separator />\n * <Pagination.PageSize value={perPage} onChange={setPerPage} />\n * <Pagination.Controls />\n * </Pagination>\n * ```\n *\n * @example\n * // Legacy (deprecated)\n * ```tsx\n * <Pagination page={page} setPage={setPage} perPage={10} totalCount={100} />\n * ```\n */\nfunction PaginationRoot(props: PaginationProps) {\n const { page = 1, perPage, totalCount, setPage, children, className } = props;\n\n // Extract legacy props (only present when children is not provided)\n const text = \"text\" in props ? props.text : undefined;\n const controls =\n \"controls\" in props\n ? (props.controls ?? KUMO_PAGINATION_DEFAULT_VARIANTS.controls)\n : KUMO_PAGINATION_DEFAULT_VARIANTS.controls;\n const [editingPage, setEditingPage] = useState<number>(1);\n\n useEffect(() => {\n setEditingPage(page);\n }, [page]);\n\n const pageShowingRange = useMemo(() => {\n let lower = page * (perPage ?? 1) - (perPage ?? 0) + 1;\n let upper = Math.min(page * (perPage ?? 0), totalCount ?? 0);\n\n if (Number.isNaN(lower)) lower = 0;\n if (Number.isNaN(upper)) upper = 0;\n\n return `${lower}-${upper}`;\n }, [page, perPage, totalCount]);\n\n const maxPage = useMemo(() => {\n return Math.ceil((totalCount ?? 1) / (perPage ?? 1));\n }, [totalCount, perPage]);\n\n const contextValue: PaginationContextValue = {\n page,\n perPage,\n totalCount,\n maxPage,\n pageShowingRange,\n setPage,\n editingPage,\n setEditingPage,\n };\n\n // Compound component mode: render children within context\n if (children) {\n return (\n <PaginationContext.Provider value={contextValue}>\n <div\n data-slot=\"pagination\"\n className={cn(\"flex items-center gap-2 w-full\", className)}\n >\n {children}\n </div>\n </PaginationContext.Provider>\n );\n }\n\n // Legacy mode: render default layout for backwards compatibility\n const getPaginationText = () => {\n if (text) {\n return text({ page, perPage, totalCount, pageShowingRange });\n } else if (totalCount && totalCount > 0) {\n return (\n <>\n Showing <span className=\"tabular-nums\">{pageShowingRange}</span> of{\" \"}\n <span className=\"tabular-nums\">{totalCount}</span>\n </>\n );\n }\n return null;\n };\n\n return (\n <PaginationContext.Provider value={contextValue}>\n <div\n data-slot=\"pagination\"\n className={cn(\"flex items-center gap-2 w-full\", className)}\n >\n <div\n data-slot=\"pagination-info\"\n className=\"grow text-sm text-kumo-strong\"\n >\n {getPaginationText()}\n </div>\n <PaginationControls controls={controls} />\n </div>\n </PaginationContext.Provider>\n );\n}\n\nPaginationRoot.displayName = \"Pagination\";\n\n// ============================================================================\n// Compound Component Export\n// ============================================================================\n\nexport const Pagination = Object.assign(PaginationRoot, {\n Info: PaginationInfo,\n PageSize: PaginationPageSize,\n Controls: PaginationControls,\n Separator: PaginationSeparator,\n});\n\nexport {\n PaginationInfo,\n PaginationPageSize,\n PaginationControls,\n PaginationSeparator,\n};\n"],"names":["DEFAULT_PAGE_SIZE_OPTIONS","KUMO_PAGINATION_DEFAULT_VARIANTS","PaginationContext","createContext","usePaginationContext","context","useContext","PaginationInfo","children","className","page","perPage","totalCount","pageShowingRange","content","jsxs","Fragment","jsx","cn","PaginationPageSize","value","onChange","options","label","Select","v","size","PaginationControls","controls","maxPage","setPage","editingPage","setEditingPage","InputGroup","CaretDoubleLeftIcon","previousPage","CaretLeftIcon","number","nextPage","CaretRightIcon","CaretDoubleRightIcon","PaginationSeparator","PaginationRoot","props","text","useState","useEffect","useMemo","lower","upper","contextValue","getPaginationText","Pagination"],"mappings":";;;;;;;AAkBA,MAAMA,IAA4B,CAAC,IAAI,IAAI,KAAK,GAAG,GAqBtCC,IAAmC;AAAA,EAC9C,UAAU;AACZ,GA8BMC,IAAoBC,EAA6C,IAAI;AAE3E,SAASC,IAAuB;AAC9B,QAAMC,IAAUC,EAAWJ,CAAiB;AAC5C,MAAI,CAACG;AACH,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAGJ,SAAOA;AACT;AAkBA,SAASE,EAAe,EAAE,UAAAC,GAAU,WAAAC,KAAkC;AACpE,QAAM,EAAE,MAAAC,GAAM,SAAAC,GAAS,YAAAC,GAAY,kBAAAC,EAAA,IACjCT,EAAA,GAEIU,IAAUN,IACdA,EAAS,EAAE,MAAAE,GAAM,SAAAC,GAAS,YAAAC,GAAY,kBAAAC,EAAA,CAAkB,IACtDD,KAAcA,IAAa,IAC7B,gBAAAG,EAAAC,GAAA,EAAE,UAAA;AAAA,IAAA;AAAA,IACQ,gBAAAC,EAAC,QAAA,EAAK,WAAU,gBAAgB,UAAAJ,GAAiB;AAAA,IAAO;AAAA,IAAI;AAAA,IACpE,gBAAAI,EAAC,QAAA,EAAK,WAAU,gBAAgB,UAAAL,EAAA,CAAW;AAAA,EAAA,EAAA,CAC7C,IACE;AAEJ,SACE,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC,EAAG,4BAA4BT,CAAS;AAAA,MAElD,UAAAK;AAAA,IAAA;AAAA,EAAA;AAGP;AAEAP,EAAe,cAAc;AAmB7B,SAASY,EAAmB;AAAA,EAC1B,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC,IAAUtB;AAAA,EACV,OAAAuB,IAAQ;AAAA,EACR,WAAAd;AACF,GAA4B;AAC1B,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWG,EAAG,2BAA2BT,CAAS;AAAA,MAEjD,UAAA;AAAA,QAAAc,KAAS,gBAAAN,EAAC,QAAA,EAAK,WAAU,4BAA4B,UAAAM,GAAM;AAAA,QAC5D,gBAAAN;AAAA,UAACO;AAAA,UAAA;AAAA,YACC,cAAW;AAAA,YACX,OAAAJ;AAAA,YACA,eAAe,CAACK,MAAMJ,EAASI,CAAW;AAAA,YAEzC,UAAAH,EAAQ,IAAI,CAACI,MACZ,gBAAAT,EAACO,EAAO,QAAP,EAAyB,OAAOE,GAC9B,UAAAA,EAAA,GADiBA,CAEpB,CACD;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAGN;AAEAP,EAAmB,cAAc;AAWjC,SAASQ,EAAmB;AAAA,EAC1B,UAAAC,IAAW3B,EAAiC;AAAA,EAC5C,WAAAQ;AACF,GAA4B;AAC1B,QAAM,EAAE,MAAAC,GAAM,SAAAmB,GAAS,SAAAC,GAAS,aAAAC,GAAa,gBAAAC,EAAA,IAC3C5B,EAAA;AAEF,SACE,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC,EAAG,gCAAgCT,CAAS;AAAA,MAEvD,UAAA,gBAAAQ,EAAC,OAAA,EACC,UAAA,gBAAAF,EAACkB,GAAA,EAAW,WAAU,cACnB,UAAA;AAAA,QAAAL,MAAa,UACZ,gBAAAX;AAAA,UAACgB,EAAW;AAAA,UAAX;AAAA,YACC,SAAQ;AAAA,YACR,cAAW;AAAA,YACX,UAAUvB,KAAQ;AAAA,YAClB,SAAS,MAAM;AACb,cAAAoB,EAAQ,CAAC,GACTE,EAAe,CAAC;AAAA,YAClB;AAAA,YAEA,UAAA,gBAAAf,EAACiB,GAAA,EAAoB,MAAM,GAAA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAGnC,gBAAAjB;AAAA,UAACgB,EAAW;AAAA,UAAX;AAAA,YACC,SAAQ;AAAA,YACR,cAAW;AAAA,YACX,UAAUvB,KAAQ;AAAA,YAClB,SAAS,MAAM;AACb,oBAAMyB,IAAe,KAAK,IAAIzB,IAAO,GAAG,CAAC;AACzC,cAAAoB,EAAQK,CAAY,GACpBH,EAAeG,CAAY;AAAA,YAC7B;AAAA,YAEA,UAAA,gBAAAlB,EAACmB,GAAA,EAAc,MAAM,GAAA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAE1BR,MAAa,UACZ,gBAAAX;AAAA,UAACgB,EAAW;AAAA,UAAX;AAAA,YACC,OAAO,EAAE,OAAO,GAAA;AAAA,YAChB,WAAU;AAAA,YACV,cAAW;AAAA,YACX,OAAOF;AAAA,YACP,eAAe,CAACX,MAAkB;AAChC,cAAAY,EAAe,OAAOZ,CAAK,CAAC;AAAA,YAC9B;AAAA,YACA,QAAQ,MAAM;AACZ,kBAAIiB,IAAS,KAAK,IAAIN,GAAa,CAAC;AACpC,cAAAM,IAAS,KAAK,IAAIA,GAAQR,CAAO,GACjCC,EAAQO,CAAM,GACdL,EAAeK,CAAM;AAAA,YACvB;AAAA,YAEA,cAAa;AAAA,YACb,kBAAc;AAAA,YACd,iBAAc;AAAA,YACd,kBAAe;AAAA,UAAA;AAAA,QAAA;AAAA,QAGnB,gBAAApB;AAAA,UAACgB,EAAW;AAAA,UAAX;AAAA,YACC,SAAQ;AAAA,YACR,cAAW;AAAA,YACX,UAAUvB,MAASmB;AAAA,YACnB,SAAS,MAAM;AACb,oBAAMS,IAAW,KAAK,IAAI5B,IAAO,GAAGmB,CAAO;AAC3C,cAAAC,EAAQQ,CAAQ,GAChBN,EAAeM,CAAQ;AAAA,YACzB;AAAA,YAEA,UAAA,gBAAArB,EAACsB,GAAA,EAAe,MAAM,GAAA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAE3BX,MAAa,UACZ,gBAAAX;AAAA,UAACgB,EAAW;AAAA,UAAX;AAAA,YACC,SAAQ;AAAA,YACR,cAAW;AAAA,YACX,UAAUvB,MAASmB;AAAA,YACnB,SAAS,MAAM;AACb,cAAAC,EAAQD,CAAO,GACfG,EAAeH,CAAO;AAAA,YACxB;AAAA,YAEA,UAAA,gBAAAZ,EAACuB,GAAA,EAAqB,MAAM,GAAA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,MAClC,EAAA,CAEJ,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;AAEAb,EAAmB,cAAc;AAWjC,SAASc,EAAoB,EAAE,WAAAhC,KAAuC;AACpE,SACE,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC,EAAG,sCAAsCT,CAAS;AAAA,IAAA;AAAA,EAAA;AAGnE;AAEAgC,EAAoB,cAAc;AAgHlC,SAASC,EAAeC,GAAwB;AAC9C,QAAM,EAAE,MAAAjC,IAAO,GAAG,SAAAC,GAAS,YAAAC,GAAY,SAAAkB,GAAS,UAAAtB,GAAU,WAAAC,MAAckC,GAGlEC,IAAO,UAAUD,IAAQA,EAAM,OAAO,QACtCf,IACJ,cAAce,IACTA,EAAM,YAAY1C,EAAiC,WACpDA,EAAiC,UACjC,CAAC8B,GAAaC,CAAc,IAAIa,EAAiB,CAAC;AAExD,EAAAC,EAAU,MAAM;AACd,IAAAd,EAAetB,CAAI;AAAA,EACrB,GAAG,CAACA,CAAI,CAAC;AAET,QAAMG,IAAmBkC,EAAQ,MAAM;AACrC,QAAIC,IAAQtC,KAAQC,KAAW,MAAMA,KAAW,KAAK,GACjDsC,IAAQ,KAAK,IAAIvC,KAAQC,KAAW,IAAIC,KAAc,CAAC;AAE3D,WAAI,OAAO,MAAMoC,CAAK,MAAGA,IAAQ,IAC7B,OAAO,MAAMC,CAAK,MAAGA,IAAQ,IAE1B,GAAGD,CAAK,IAAIC,CAAK;AAAA,EAC1B,GAAG,CAACvC,GAAMC,GAASC,CAAU,CAAC,GAExBiB,IAAUkB,EAAQ,MACf,KAAK,MAAMnC,KAAc,MAAMD,KAAW,EAAE,GAClD,CAACC,GAAYD,CAAO,CAAC,GAElBuC,IAAuC;AAAA,IAC3C,MAAAxC;AAAA,IACA,SAAAC;AAAA,IACA,YAAAC;AAAA,IACA,SAAAiB;AAAA,IACA,kBAAAhB;AAAA,IACA,SAAAiB;AAAA,IACA,aAAAC;AAAA,IACA,gBAAAC;AAAA,EAAA;AAIF,MAAIxB;AACF,WACE,gBAAAS,EAACf,EAAkB,UAAlB,EAA2B,OAAOgD,GACjC,UAAA,gBAAAjC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,aAAU;AAAA,QACV,WAAWC,EAAG,kCAAkCT,CAAS;AAAA,QAExD,UAAAD;AAAA,MAAA;AAAA,IAAA,GAEL;AAKJ,QAAM2C,IAAoB,MACpBP,IACKA,EAAK,EAAE,MAAAlC,GAAM,SAAAC,GAAS,YAAAC,GAAY,kBAAAC,GAAkB,IAClDD,KAAcA,IAAa,IAElC,gBAAAG,EAAAC,GAAA,EAAE,UAAA;AAAA,IAAA;AAAA,IACQ,gBAAAC,EAAC,QAAA,EAAK,WAAU,gBAAgB,UAAAJ,GAAiB;AAAA,IAAO;AAAA,IAAI;AAAA,IACpE,gBAAAI,EAAC,QAAA,EAAK,WAAU,gBAAgB,UAAAL,EAAA,CAAW;AAAA,EAAA,GAC7C,IAGG;AAGT,SACE,gBAAAK,EAACf,EAAkB,UAAlB,EAA2B,OAAOgD,GACjC,UAAA,gBAAAnC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWG,EAAG,kCAAkCT,CAAS;AAAA,MAEzD,UAAA;AAAA,QAAA,gBAAAQ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,aAAU;AAAA,YACV,WAAU;AAAA,YAET,UAAAkC,EAAA;AAAA,UAAkB;AAAA,QAAA;AAAA,QAErB,gBAAAlC,EAACU,KAAmB,UAAAC,EAAA,CAAoB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAE5C;AAEJ;AAEAc,EAAe,cAAc;AAMtB,MAAMU,IAAa,OAAO,OAAOV,GAAgB;AAAA,EACtD,MAAMnC;AAAA,EACN,UAAUY;AAAA,EACV,UAAUQ;AAAA,EACV,WAAWc;AACb,CAAC;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as o, jsxs as i } from "react/jsx-runtime";
|
|
3
3
|
import { c as s } from "./cn-ct4n7r74mh8y0f48.js";
|
|
4
|
-
import { b9 as P, ba as f, bb as b, bc as h, bd as C, be as x, bf as N, bg as y, bh as L } from "./vendor-base-ui-
|
|
4
|
+
import { b9 as P, ba as f, bb as b, bc as h, bd as C, be as x, bf as N, bg as y, bh as L } from "./vendor-base-ui-ccr5l0ynrievzzv3.js";
|
|
5
5
|
const H = {
|
|
6
6
|
side: {
|
|
7
7
|
top: {
|
|
@@ -177,4 +177,4 @@ export {
|
|
|
177
177
|
m as f,
|
|
178
178
|
T as g
|
|
179
179
|
};
|
|
180
|
-
//# sourceMappingURL=popover-
|
|
180
|
+
//# sourceMappingURL=popover-jurf834u2uywluux.js.map
|