@kerfjs/ui 5.0.0-beta.9 → 5.0.0-beta.90
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/README.md +540 -132
- package/ai/application-ui-diagnostic-ids-v1.json +113 -0
- package/ai/application-ui-profile-sync.cjs +548 -0
- package/ai/application-ui-profile.d.mts +1 -0
- package/ai/application-ui-profile.d.ts +106 -0
- package/ai/application-ui-profile.defaults.json +96 -0
- package/ai/application-ui-profile.mjs +653 -0
- package/ai/application-ui-profile.schema.json +140 -0
- package/ai/catalog-authoring.json +34 -0
- package/ai/catalog-authoring.schema.json +105 -0
- package/ai/compile-time-contracts-v1.json +149 -0
- package/ai/compile-time-contracts-v1.schema.json +52 -0
- package/ai/component-catalog-extension.schema.json +104 -0
- package/ai/component-catalog.json +4487 -633
- package/ai/component-catalog.schema.json +94 -1
- package/ai/component-class-owners.cjs +83 -0
- package/ai/component-composition-extension.d.ts +7 -0
- package/ai/component-composition-extension.schema.json +7 -0
- package/ai/component-composition-rules.json +520 -0
- package/ai/component-composition.d.ts +129 -0
- package/ai/component-composition.json +7470 -0
- package/ai/component-composition.schema.json +408 -0
- package/ai/components/README.md +172 -0
- package/ai/components/anchored-surface.md +86 -0
- package/ai/components/application-tabs.md +65 -0
- package/ai/components/badge.md +72 -0
- package/ai/components/chip.md +72 -0
- package/ai/components/collapsible-panel.md +102 -0
- package/ai/components/content-item.md +96 -0
- package/ai/components/disclosure-arrow.md +77 -0
- package/ai/components/document-baseline.md +75 -0
- package/ai/components/empty-state.md +80 -0
- package/ai/components/feedback.md +71 -0
- package/ai/components/floating-toolbar.md +82 -0
- package/ai/components/foundation.md +65 -0
- package/ai/components/grid.md +100 -0
- package/ai/components/headers.md +63 -0
- package/ai/components/layout.md +75 -0
- package/ai/components/list-action-row.md +91 -0
- package/ai/components/list-header.md +91 -0
- package/ai/components/list-inset-control.md +74 -0
- package/ai/components/list-inset-text.md +72 -0
- package/ai/components/list-item.md +94 -0
- package/ai/components/list.md +106 -0
- package/ai/components/loading-spinner.md +73 -0
- package/ai/components/lucide-icon.md +97 -0
- package/ai/components/nav-stack.md +105 -0
- package/ai/components/pane.md +106 -0
- package/ai/components/popup-menu.md +171 -0
- package/ai/components/recipe-app-shell.md +57 -0
- package/ai/components/recipe-collapsible-sidebar.md +57 -0
- package/ai/components/recipe-compact-toolbar.md +57 -0
- package/ai/components/recipe-composer-form.md +57 -0
- package/ai/components/recipe-list-detail-dialog.md +57 -0
- package/ai/components/recipe-list-workspace-states.md +57 -0
- package/ai/components/recipe-loading-inspector.md +57 -0
- package/ai/components/recipe-navigation-sidebar.md +57 -0
- package/ai/components/recipe-navigation-stack.md +57 -0
- package/ai/components/recipe-workspace-header.md +57 -0
- package/ai/components/resize.md +106 -0
- package/ai/components/row.md +96 -0
- package/ai/components/segmented-control.md +82 -0
- package/ai/components/select.md +115 -0
- package/ai/components/skeleton.md +84 -0
- package/ai/components/spacer.md +86 -0
- package/ai/components/split-view.md +103 -0
- package/ai/components/state-banner.md +94 -0
- package/ai/components/sunken-panel.md +79 -0
- package/ai/components/surface-scaffold.md +87 -0
- package/ai/components/tab-bar.md +113 -0
- package/ai/components/tab-navigator.md +96 -0
- package/ai/components/tabs.md +95 -0
- package/ai/components/text.md +87 -0
- package/ai/components/token-search-field.md +107 -0
- package/ai/components/toolbar-control-group.md +121 -0
- package/ai/components/toolbar-text.md +98 -0
- package/ai/components/toolbar.md +101 -0
- package/ai/components/value-table.md +73 -0
- package/ai/components/wa-accordion-item.md +55 -0
- package/ai/components/wa-accordion.md +65 -0
- package/ai/components/wa-animated-image.md +55 -0
- package/ai/components/wa-animation.md +55 -0
- package/ai/components/wa-avatar.md +55 -0
- package/ai/components/wa-badge.md +55 -0
- package/ai/components/wa-breadcrumb-item.md +53 -0
- package/ai/components/wa-breadcrumb.md +55 -0
- package/ai/components/wa-button-group.md +59 -0
- package/ai/components/wa-button.md +55 -0
- package/ai/components/wa-callout.md +58 -0
- package/ai/components/wa-card.md +59 -0
- package/ai/components/wa-carousel-item.md +53 -0
- package/ai/components/wa-carousel.md +55 -0
- package/ai/components/wa-checkbox-group.md +55 -0
- package/ai/components/wa-checkbox.md +55 -0
- package/ai/components/wa-color-picker.md +55 -0
- package/ai/components/wa-comparison.md +55 -0
- package/ai/components/wa-copy-button.md +55 -0
- package/ai/components/wa-details.md +61 -0
- package/ai/components/wa-dialog.md +59 -0
- package/ai/components/wa-divider.md +53 -0
- package/ai/components/wa-drawer.md +55 -0
- package/ai/components/wa-dropdown-item.md +60 -0
- package/ai/components/wa-dropdown.md +60 -0
- package/ai/components/wa-format-bytes.md +53 -0
- package/ai/components/wa-format-date.md +53 -0
- package/ai/components/wa-format-number.md +53 -0
- package/ai/components/wa-icon.md +58 -0
- package/ai/components/wa-include.md +53 -0
- package/ai/components/wa-input.md +59 -0
- package/ai/components/wa-intersection-observer.md +53 -0
- package/ai/components/wa-known-date.md +53 -0
- package/ai/components/wa-markdown.md +53 -0
- package/ai/components/wa-mutation-observer.md +53 -0
- package/ai/components/wa-number-input.md +55 -0
- package/ai/components/wa-option.md +59 -0
- package/ai/components/wa-otp-input.md +53 -0
- package/ai/components/wa-page.md +53 -0
- package/ai/components/wa-pagination.md +55 -0
- package/ai/components/wa-popover.md +55 -0
- package/ai/components/wa-popup.md +53 -0
- package/ai/components/wa-progress-bar.md +53 -0
- package/ai/components/wa-progress-ring.md +53 -0
- package/ai/components/wa-qr-code.md +53 -0
- package/ai/components/wa-radio-group.md +59 -0
- package/ai/components/wa-radio.md +55 -0
- package/ai/components/wa-random-content.md +53 -0
- package/ai/components/wa-rating.md +55 -0
- package/ai/components/wa-relative-time.md +53 -0
- package/ai/components/wa-resize-observer.md +53 -0
- package/ai/components/wa-scroller.md +53 -0
- package/ai/components/wa-select.md +63 -0
- package/ai/components/wa-skeleton.md +53 -0
- package/ai/components/wa-slider.md +55 -0
- package/ai/components/wa-spinner.md +58 -0
- package/ai/components/wa-split-panel.md +58 -0
- package/ai/components/wa-switch.md +53 -0
- package/ai/components/wa-tab-group.md +69 -0
- package/ai/components/wa-tab-panel.md +60 -0
- package/ai/components/wa-tab.md +59 -0
- package/ai/components/wa-tag.md +59 -0
- package/ai/components/wa-textarea.md +53 -0
- package/ai/components/wa-time-input.md +55 -0
- package/ai/components/wa-toast-item.md +60 -0
- package/ai/components/wa-toast.md +60 -0
- package/ai/components/wa-tooltip.md +55 -0
- package/ai/components/wa-tree-item.md +55 -0
- package/ai/components/wa-tree.md +55 -0
- package/ai/components/wa-zoomable-frame.md +55 -0
- package/ai/components/workbench.md +119 -0
- package/ai/public-api-signatures-v1.md +2835 -351
- package/ai/skill.md +401 -63
- package/ai/webawesome-jsx-signatures-v1.md +9 -2
- package/analyzer/cli.mjs +49 -0
- package/analyzer/component-ownership.d.mts +72 -0
- package/analyzer/component-ownership.mjs +429 -0
- package/analyzer/index.d.mts +53 -0
- package/analyzer/index.mjs +2346 -0
- package/analyzer/loud-pairs.d.mts +49 -0
- package/analyzer/loud-pairs.mjs +357 -0
- package/analyzer/report.schema.json +66 -0
- package/analyzer/selectors.d.mts +21 -0
- package/analyzer/selectors.mjs +212 -0
- package/catalog-projection-cli.mjs +96 -0
- package/catalog-projection.d.mts +55 -0
- package/catalog-projection.mjs +62 -0
- package/dist/anchored-surface.d.ts +30 -0
- package/dist/anchored-surface.js +3 -0
- package/dist/anchored-surface.js.map +1 -0
- package/dist/app-tab.d.ts +39 -4
- package/dist/app-tab.js +2 -1
- package/dist/badge.d.ts +54 -0
- package/dist/badge.js +3 -0
- package/dist/badge.js.map +1 -0
- package/dist/browser/anchored-surface.js +3 -0
- package/dist/browser/badge.js +3 -0
- package/dist/browser/catalog.js +28 -0
- package/dist/browser/chip.js +3 -0
- package/dist/browser/collapsible-panel.js +9 -0
- package/dist/browser/content-item.js +3 -0
- package/dist/browser/floating-toolbar.js +3 -0
- package/dist/browser/grid.js +3 -0
- package/dist/browser/list-action-row.js +1 -0
- package/dist/browser/list-header.js +3 -1
- package/dist/browser/list-inset-control.js +3 -0
- package/dist/browser/list-inset-text.js +3 -0
- package/dist/browser/list-item.js +1 -0
- package/dist/browser/list.js +3 -0
- package/dist/browser/nav-stack.js +11 -0
- package/dist/browser/pane.js +3 -0
- package/dist/browser/popup-menu.js +3 -0
- package/dist/browser/row.js +3 -0
- package/dist/browser/segmented-control.js +0 -1
- package/dist/browser/select.js +2 -1
- package/dist/browser/spacer.js +3 -0
- package/dist/browser/split-view.js +13 -0
- package/dist/browser/state-banner.js +1 -0
- package/dist/browser/sunken-panel.js +3 -0
- package/dist/browser/surface-scaffold.js +3 -0
- package/dist/browser/tab-navigator.js +4 -0
- package/dist/browser/text.js +3 -0
- package/dist/browser/toolbar-control-group.js +1 -0
- package/dist/browser/workbench.js +14 -0
- package/dist/catalog-resources.d.ts +48 -0
- package/dist/catalog-resources.js +22 -0
- package/dist/catalog-resources.js.map +1 -0
- package/dist/catalog.d.ts +76 -103
- package/dist/catalog.js +566 -87
- package/dist/catalog.js.map +1 -1
- package/dist/chip.d.ts +36 -0
- package/dist/chip.js +3 -0
- package/dist/chip.js.map +1 -0
- package/dist/chunk-2GOCOLQL.js +270 -0
- package/dist/chunk-2GOCOLQL.js.map +1 -0
- package/dist/{chunk-56RJXPHG.js → chunk-2YPPNFYT.js} +7 -4
- package/dist/chunk-2YPPNFYT.js.map +1 -0
- package/dist/chunk-3CXRQAYT.js +288 -0
- package/dist/chunk-3CXRQAYT.js.map +1 -0
- package/dist/chunk-3DXHNLME.js +69 -0
- package/dist/chunk-3DXHNLME.js.map +1 -0
- package/dist/chunk-3PO7JEK7.js +188 -0
- package/dist/chunk-3PO7JEK7.js.map +1 -0
- package/dist/chunk-3XPGJUUQ.js +37 -0
- package/dist/chunk-3XPGJUUQ.js.map +1 -0
- package/dist/chunk-4Y4L5YEI.js +66 -0
- package/dist/chunk-4Y4L5YEI.js.map +1 -0
- package/dist/chunk-5BZBIRQG.js +452 -0
- package/dist/chunk-5BZBIRQG.js.map +1 -0
- package/dist/chunk-6IVNMC6R.js +19 -0
- package/dist/chunk-6IVNMC6R.js.map +1 -0
- package/dist/chunk-7QQ3HE47.js +17 -0
- package/dist/chunk-7QQ3HE47.js.map +1 -0
- package/dist/chunk-A7DYEERU.js +59 -0
- package/dist/chunk-A7DYEERU.js.map +1 -0
- package/dist/chunk-AN5IWMTM.js +24 -0
- package/dist/chunk-AN5IWMTM.js.map +1 -0
- package/dist/chunk-B3TROLC2.js +104 -0
- package/dist/chunk-B3TROLC2.js.map +1 -0
- package/dist/chunk-BYHGRKC3.js +44 -0
- package/dist/chunk-BYHGRKC3.js.map +1 -0
- package/dist/chunk-CD5TOO22.js +82 -0
- package/dist/chunk-CD5TOO22.js.map +1 -0
- package/dist/chunk-CEJ5FK6G.js +288 -0
- package/dist/chunk-CEJ5FK6G.js.map +1 -0
- package/dist/chunk-DL55BSQX.js +52 -0
- package/dist/chunk-DL55BSQX.js.map +1 -0
- package/dist/chunk-DQDTZE4W.js +70 -0
- package/dist/chunk-DQDTZE4W.js.map +1 -0
- package/dist/chunk-FL6J644M.js +116 -0
- package/dist/chunk-FL6J644M.js.map +1 -0
- package/dist/chunk-GPCAXYMT.js +165 -0
- package/dist/chunk-GPCAXYMT.js.map +1 -0
- package/dist/chunk-GS2QD3N7.js +14 -0
- package/dist/chunk-GS2QD3N7.js.map +1 -0
- package/dist/chunk-H45DAZBL.js +491 -0
- package/dist/chunk-H45DAZBL.js.map +1 -0
- package/dist/chunk-IM3GKYOG.js +202 -0
- package/dist/chunk-IM3GKYOG.js.map +1 -0
- package/dist/chunk-IOS2NXW7.js +53 -0
- package/dist/chunk-IOS2NXW7.js.map +1 -0
- package/dist/chunk-J3AWE5I4.js +50 -0
- package/dist/chunk-J3AWE5I4.js.map +1 -0
- package/dist/chunk-JOR5LGYE.js +55 -0
- package/dist/chunk-JOR5LGYE.js.map +1 -0
- package/dist/chunk-KAJVVN7Q.js +138 -0
- package/dist/chunk-KAJVVN7Q.js.map +1 -0
- package/dist/chunk-KL3W6FUN.js +506 -0
- package/dist/chunk-KL3W6FUN.js.map +1 -0
- package/dist/{chunk-7BR3DO2A.js → chunk-LAZLBC2Q.js} +14 -5
- package/dist/chunk-LAZLBC2Q.js.map +1 -0
- package/dist/chunk-LFPW4YC6.js +222 -0
- package/dist/chunk-LFPW4YC6.js.map +1 -0
- package/dist/chunk-MN3POJFN.js +44 -0
- package/dist/chunk-MN3POJFN.js.map +1 -0
- package/dist/chunk-MORVLMDG.js +59 -0
- package/dist/chunk-MORVLMDG.js.map +1 -0
- package/dist/chunk-MTCTX25G.js +139 -0
- package/dist/chunk-MTCTX25G.js.map +1 -0
- package/dist/chunk-MXNIVEVL.js +48 -0
- package/dist/chunk-MXNIVEVL.js.map +1 -0
- package/dist/chunk-NJZMR7HM.js +135 -0
- package/dist/chunk-NJZMR7HM.js.map +1 -0
- package/dist/chunk-NMWDHZVM.js +35 -0
- package/dist/chunk-NMWDHZVM.js.map +1 -0
- package/dist/chunk-NP3FSLNX.js +58 -0
- package/dist/chunk-NP3FSLNX.js.map +1 -0
- package/dist/{chunk-YGN7OMLT.js → chunk-NS2TBYM4.js} +8 -5
- package/dist/chunk-NS2TBYM4.js.map +1 -0
- package/dist/chunk-O27D24CA.js +250 -0
- package/dist/chunk-O27D24CA.js.map +1 -0
- package/dist/chunk-PGL6TXFW.js +48 -0
- package/dist/chunk-PGL6TXFW.js.map +1 -0
- package/dist/chunk-QQICWWNX.js +71 -0
- package/dist/chunk-QQICWWNX.js.map +1 -0
- package/dist/chunk-S3ECMF23.js +33 -0
- package/dist/chunk-S3ECMF23.js.map +1 -0
- package/dist/chunk-S4ZGTDSG.js +18 -0
- package/dist/chunk-S4ZGTDSG.js.map +1 -0
- package/dist/chunk-SJW5BCEQ.js +174 -0
- package/dist/chunk-SJW5BCEQ.js.map +1 -0
- package/dist/chunk-TTGIHMDR.js +149 -0
- package/dist/chunk-TTGIHMDR.js.map +1 -0
- package/dist/chunk-U657IHFB.js +158 -0
- package/dist/chunk-U657IHFB.js.map +1 -0
- package/dist/chunk-VLGQIYZ5.js +295 -0
- package/dist/chunk-VLGQIYZ5.js.map +1 -0
- package/dist/chunk-XK4E225T.js +34 -0
- package/dist/chunk-XK4E225T.js.map +1 -0
- package/dist/chunk-XKZPBRU7.js +135 -0
- package/dist/chunk-XKZPBRU7.js.map +1 -0
- package/dist/chunk-XNXKIPU5.js +779 -0
- package/dist/chunk-XNXKIPU5.js.map +1 -0
- package/dist/chunk-Y43B6DS3.js +66 -0
- package/dist/chunk-Y43B6DS3.js.map +1 -0
- package/dist/chunk-Y6KT7ZTR.js +109 -0
- package/dist/chunk-Y6KT7ZTR.js.map +1 -0
- package/dist/chunk-YOKEL75M.js +48 -0
- package/dist/chunk-YOKEL75M.js.map +1 -0
- package/dist/collapsible-panel.d.ts +137 -0
- package/dist/collapsible-panel.js +136 -0
- package/dist/collapsible-panel.js.map +1 -0
- package/dist/content-item.d.ts +99 -0
- package/dist/content-item.js +4 -0
- package/dist/content-item.js.map +1 -0
- package/dist/css-values.d.ts +119 -0
- package/dist/css-values.js +3 -0
- package/dist/css-values.js.map +1 -0
- package/dist/device-class.js +34 -6
- package/dist/device-class.js.map +1 -1
- package/dist/disclosure-arrow.d.ts +6 -1
- package/dist/disclosure-arrow.js +2 -1
- package/dist/empty-state.d.ts +5 -2
- package/dist/empty-state.js +2 -1
- package/dist/flex-alignment-4ms8ZbV8.d.ts +5 -0
- package/dist/floating-toolbar.d.ts +51 -0
- package/dist/floating-toolbar.js +3 -0
- package/dist/floating-toolbar.js.map +1 -0
- package/dist/grid.d.ts +58 -0
- package/dist/grid.js +6 -0
- package/dist/grid.js.map +1 -0
- package/dist/help-tags-register.d.ts +13 -0
- package/dist/help-tags-register.js +9 -0
- package/dist/help-tags-register.js.map +1 -0
- package/dist/index.d.ts +41 -17
- package/dist/index.js +46 -23
- package/dist/list-action-row.d.ts +15 -3
- package/dist/list-action-row.js +4 -1
- package/dist/list-header.d.ts +65 -10
- package/dist/list-header.js +4 -1
- package/dist/list-inset-control.d.ts +22 -0
- package/dist/list-inset-control.js +3 -0
- package/dist/list-inset-control.js.map +1 -0
- package/dist/list-inset-text.d.ts +30 -0
- package/dist/list-inset-text.js +4 -0
- package/dist/list-inset-text.js.map +1 -0
- package/dist/list-item.d.ts +34 -5
- package/dist/list-item.js +4 -1
- package/dist/list.d.ts +64 -0
- package/dist/list.js +7 -0
- package/dist/list.js.map +1 -0
- package/dist/loading-spinner.d.ts +12 -2
- package/dist/loading-spinner.js +2 -1
- package/dist/lucide-icon.d.ts +14 -2
- package/dist/lucide-icon.js +2 -1
- package/dist/nav-stack-BvSKY448.d.ts +109 -0
- package/dist/nav-stack.d.ts +13 -38
- package/dist/nav-stack.js +11 -1
- package/dist/pane.d.ts +116 -0
- package/dist/pane.js +4 -0
- package/dist/pane.js.map +1 -0
- package/dist/panel-toolbar-CL9tYOkh.d.ts +72 -0
- package/dist/popup-menu-register.d.ts +9 -0
- package/dist/popup-menu-register.js +244 -0
- package/dist/popup-menu-register.js.map +1 -0
- package/dist/popup-menu.d.ts +100 -0
- package/dist/popup-menu.js +3 -0
- package/dist/popup-menu.js.map +1 -0
- package/dist/resizable-region.d.ts +32 -3
- package/dist/resizable-region.js +1 -1
- package/dist/row.d.ts +49 -0
- package/dist/row.js +7 -0
- package/dist/row.js.map +1 -0
- package/dist/segmented-control.d.ts +12 -9
- package/dist/segmented-control.js +1 -2
- package/dist/select-register.d.ts +5 -1
- package/dist/select-register.js +247 -3
- package/dist/select-register.js.map +1 -1
- package/dist/select.d.ts +103 -8
- package/dist/select.js +3 -1
- package/dist/semantic-content-BbzjvSu9.d.ts +14 -0
- package/dist/semantic-tone-CdW013KF.d.ts +4 -0
- package/dist/sides-BPSWde0A.d.ts +4 -0
- package/dist/skeleton.d.ts +14 -7
- package/dist/skeleton.js +2 -1
- package/dist/spacer.d.ts +18 -0
- package/dist/spacer.js +4 -0
- package/dist/spacer.js.map +1 -0
- package/dist/split-view.d.ts +43 -6
- package/dist/split-view.js +125 -10
- package/dist/split-view.js.map +1 -1
- package/dist/state-banner.d.ts +21 -7
- package/dist/state-banner.js +3 -1
- package/dist/styles/anchored-surface.css +15 -0
- package/dist/styles/app-tab.css +232 -0
- package/dist/styles/badge.css +118 -0
- package/dist/styles/catalog/components/catalog-example-stack.css +9 -0
- package/dist/styles/catalog/components/catalog-example.css +167 -0
- package/dist/styles/catalog/components/catalog-stage.css +54 -0
- package/dist/styles/catalog/components/catalog.css +26 -0
- package/dist/styles/catalog.css +5 -482
- package/dist/styles/chip.css +138 -0
- package/dist/styles/collapsible-panel.css +580 -0
- package/dist/styles/components/actions/floating-toolbar/floating-toolbar.css +119 -0
- package/dist/styles/components/actions/popup-menu/popup-menu.css +285 -0
- package/dist/styles/components/actions/toolbar/toolbar.css +417 -0
- package/dist/styles/components/actions/toolbar-control-group/toolbar-control-group.css +891 -0
- package/dist/styles/components/actions/toolbar-text/toolbar-text.css +171 -0
- package/dist/styles/components/collections/list/list.css +136 -0
- package/dist/styles/components/collections/list-action-row/list-action-row.css +258 -0
- package/dist/styles/components/collections/list-header/list-header.css +229 -0
- package/dist/styles/components/collections/list-inset-control/list-inset-control.css +30 -0
- package/dist/styles/components/collections/list-inset-text/list-inset-text.css +29 -0
- package/dist/styles/components/collections/list-item/list-item.css +255 -0
- package/dist/styles/components/data-display/value-table/value-table.css +107 -0
- package/dist/styles/components/feedback/anchored-surface/anchored-surface.css +15 -0
- package/dist/styles/components/feedback/badge/badge.css +118 -0
- package/dist/styles/components/feedback/chip/chip.css +138 -0
- package/dist/styles/components/feedback/empty-state/empty-state.css +47 -0
- package/dist/styles/components/feedback/loading-spinner/loading-spinner.css +25 -0
- package/dist/styles/components/feedback/skeleton/skeleton.css +92 -0
- package/dist/styles/components/feedback/state-banner/state-banner.css +248 -0
- package/dist/styles/components/forms/segmented-control/segmented-control.css +196 -0
- package/dist/styles/components/forms/select/select.css +454 -0
- package/dist/styles/components/forms/token-search-field/token-search-field.css +392 -0
- package/dist/styles/components/layout/collapsible-panel/collapsible-panel.css +580 -0
- package/dist/styles/components/layout/grid/grid.css +88 -0
- package/dist/styles/components/layout/pane/pane.css +309 -0
- package/dist/styles/components/layout/resizable-region/resizable-region.css +545 -0
- package/dist/styles/components/layout/row/row.css +114 -0
- package/dist/styles/components/layout/spacer/spacer.css +11 -0
- package/dist/styles/components/layout/split-view/split-view.css +146 -0
- package/dist/styles/components/layout/workbench/workbench.css +1092 -0
- package/dist/styles/components/media/lucide-icon/lucide-icon.css +15 -0
- package/dist/styles/components/navigation/app-tab/app-tab.css +384 -0
- package/dist/styles/components/navigation/disclosure-arrow/disclosure-arrow.css +23 -0
- package/dist/styles/components/navigation/nav-stack/nav-stack.css +258 -0
- package/dist/styles/components/navigation/tab-bar/tab-bar.css +186 -0
- package/dist/styles/components/navigation/tab-navigator/tab-navigator.css +253 -0
- package/dist/styles/components/surfaces/content-item/content-item.css +120 -0
- package/dist/styles/components/surfaces/sunken-panel/sunken-panel.css +34 -0
- package/dist/styles/components/surfaces/surface-scaffold/surface-scaffold.css +111 -0
- package/dist/styles/components/typography/text/text.css +158 -0
- package/dist/styles/content-item.css +120 -0
- package/dist/styles/document.css +33 -0
- package/dist/styles/floating-toolbar.css +119 -0
- package/dist/styles/foundation.css +187 -45
- package/dist/styles/grid.css +88 -0
- package/dist/styles/layout.css +3 -41
- package/dist/styles/list-action-row.css +104 -6
- package/dist/styles/list-header.css +128 -59
- package/dist/styles/list-inset-control.css +30 -0
- package/dist/styles/list-inset-text.css +29 -0
- package/dist/styles/list-item.css +165 -33
- package/dist/styles/list.css +136 -0
- package/dist/styles/loading-spinner.css +4 -0
- package/dist/styles/lucide-icon.css +9 -0
- package/dist/styles/nav-stack.css +196 -50
- package/dist/styles/pane.css +309 -0
- package/dist/styles/popup-menu.css +285 -0
- package/dist/styles/resizable-region.css +438 -4
- package/dist/styles/row.css +114 -0
- package/dist/styles/segmented-control.css +36 -9
- package/dist/styles/select.css +337 -21
- package/dist/styles/skeleton.css +64 -3
- package/dist/styles/spacer.css +11 -0
- package/dist/styles/split-view.css +114 -3
- package/dist/styles/state-banner.css +94 -19
- package/dist/styles/styles.css +10 -1
- package/dist/styles/sunken-panel.css +34 -0
- package/dist/styles/surface-scaffold.css +111 -0
- package/dist/styles/tab-bar.css +150 -9
- package/dist/styles/tab-navigator.css +253 -0
- package/dist/styles/text.css +158 -0
- package/dist/styles/token-search-field.css +167 -56
- package/dist/styles/toolbar-control-group.css +710 -30
- package/dist/styles/toolbar-text.css +139 -8
- package/dist/styles/toolbar.css +367 -11
- package/dist/styles/value-table.css +39 -7
- package/dist/styles/webawesome.css +392 -17
- package/dist/styles/workbench.css +1005 -7
- package/dist/sunken-panel.d.ts +31 -0
- package/dist/sunken-panel.js +3 -0
- package/dist/sunken-panel.js.map +1 -0
- package/dist/surface-scaffold-register.d.ts +4 -0
- package/dist/surface-scaffold-register.js +59 -0
- package/dist/surface-scaffold-register.js.map +1 -0
- package/dist/surface-scaffold.d.ts +38 -0
- package/dist/surface-scaffold.js +3 -0
- package/dist/surface-scaffold.js.map +1 -0
- package/dist/tab-bar.d.ts +39 -6
- package/dist/tab-bar.js +1 -1
- package/dist/tab-navigator.d.ts +93 -0
- package/dist/tab-navigator.js +97 -0
- package/dist/tab-navigator.js.map +1 -0
- package/dist/text.d.ts +63 -0
- package/dist/text.js +3 -0
- package/dist/text.js.map +1 -0
- package/dist/token-search-field.d.ts +3 -43
- package/dist/token-search-field.js +2 -1
- package/dist/token-search-model-DTcTXWMS.d.ts +154 -0
- package/dist/token-search-model.d.ts +3 -0
- package/dist/token-search-model.js +3 -0
- package/dist/token-search-model.js.map +1 -0
- package/dist/toolbar-control-group.d.ts +89 -7
- package/dist/toolbar-control-group.js +3 -1
- package/dist/toolbar-text.d.ts +45 -9
- package/dist/toolbar-text.js +2 -1
- package/dist/toolbar.d.ts +59 -7
- package/dist/toolbar.js +1 -1
- package/dist/types-oLe_N1w0.d.ts +130 -0
- package/dist/value-table.d.ts +11 -3
- package/dist/value-table.js +2 -1
- package/dist/webawesome.d.ts +8 -1
- package/dist/wire-catalog.d.ts +76 -4
- package/dist/wire-catalog.js +250 -14
- package/dist/wire-catalog.js.map +1 -1
- package/dist/wire-content-items.d.ts +11 -0
- package/dist/wire-content-items.js +139 -0
- package/dist/wire-content-items.js.map +1 -0
- package/dist/wire-nav-stack.d.ts +4 -1
- package/dist/wire-nav-stack.js +191 -15
- package/dist/wire-nav-stack.js.map +1 -1
- package/dist/wire-resizable-regions.d.ts +2 -1
- package/dist/wire-resizable-regions.js +2 -1
- package/dist/wire-scroll-dividers.d.ts +72 -0
- package/dist/wire-scroll-dividers.js +3 -0
- package/dist/wire-scroll-dividers.js.map +1 -0
- package/dist/wire-sidebar.d.ts +63 -0
- package/dist/wire-sidebar.js +231 -0
- package/dist/wire-sidebar.js.map +1 -0
- package/dist/wire-tab-bars.d.ts +19 -2
- package/dist/wire-tab-bars.js +1 -1
- package/dist/wire-tab-navigator.d.ts +11 -0
- package/dist/wire-tab-navigator.js +21 -0
- package/dist/wire-tab-navigator.js.map +1 -0
- package/dist/wire-token-search-fields.d.ts +65 -3
- package/dist/wire-token-search-fields.js +2 -1
- package/dist/wire-toolbar-visibility.d.ts +13 -0
- package/dist/wire-toolbar-visibility.js +3 -0
- package/dist/wire-toolbar-visibility.js.map +1 -0
- package/dist/wire-workbench.d.ts +116 -0
- package/dist/wire-workbench.js +6 -0
- package/dist/wire-workbench.js.map +1 -0
- package/dist/workbench.d.ts +246 -9
- package/dist/workbench.js +18 -15
- package/dist/workbench.js.map +1 -1
- package/docs/accessibility.md +495 -24
- package/docs/anchored-surface.md +51 -0
- package/docs/app-layouts.md +141 -10
- package/docs/apple-hig.md +1 -0
- package/docs/catalog.md +395 -62
- package/docs/collapsible-panel.md +382 -0
- package/docs/component-contract.md +740 -53
- package/docs/component-integration.md +75 -0
- package/docs/component-selection.md +682 -97
- package/docs/design/templates/empty-state/filtered-dark.svg +1 -0
- package/docs/design/templates/empty-state/filtered.svg +1 -0
- package/docs/design/templates/empty-state/with-action-dark.svg +1 -0
- package/docs/design/templates/empty-state/with-action.svg +1 -0
- package/docs/design/templates/empty-state-dark.svg +1 -0
- package/docs/design/templates/empty-state.svg +1 -0
- package/docs/design/templates/list/compact-dark.svg +1 -0
- package/docs/design/templates/list/compact.svg +1 -0
- package/docs/design/templates/list/stack-dark.svg +1 -0
- package/docs/design/templates/list/stack.svg +1 -0
- package/docs/design/templates/list-action-row/default-dark.svg +1 -0
- package/docs/design/templates/list-action-row/default.svg +1 -0
- package/docs/design/templates/list-action-row/selected-dark.svg +1 -0
- package/docs/design/templates/list-action-row/selected.svg +1 -0
- package/docs/design/templates/list-action-row-dark.svg +1 -0
- package/docs/design/templates/list-action-row.svg +1 -0
- package/docs/design/templates/list-dark.svg +1 -0
- package/docs/design/templates/list-header/action-dark.svg +1 -0
- package/docs/design/templates/list-header/action.svg +1 -0
- package/docs/design/templates/list-header/count-dark.svg +1 -0
- package/docs/design/templates/list-header/count.svg +1 -0
- package/docs/design/templates/list-header/inline-action-dark.svg +1 -0
- package/docs/design/templates/list-header/inline-action.svg +1 -0
- package/docs/design/templates/list-header/size-l-dark.svg +1 -0
- package/docs/design/templates/list-header/size-l.svg +1 -0
- package/docs/design/templates/list-header/size-m-dark.svg +1 -0
- package/docs/design/templates/list-header/size-m.svg +1 -0
- package/docs/design/templates/list-header/size-xl-dark.svg +1 -0
- package/docs/design/templates/list-header/size-xl.svg +1 -0
- package/docs/design/templates/list-header/size-xs-dark.svg +1 -0
- package/docs/design/templates/list-header/size-xs.svg +1 -0
- package/docs/design/templates/list-header/toggle-collapsed-dark.svg +1 -0
- package/docs/design/templates/list-header/toggle-collapsed.svg +1 -0
- package/docs/design/templates/list-header/toggle-expanded-dark.svg +1 -0
- package/docs/design/templates/list-header/toggle-expanded.svg +1 -0
- package/docs/design/templates/list-header-dark.svg +1 -0
- package/docs/design/templates/list-header.svg +1 -0
- package/docs/design/templates/list-item/default-dark.svg +1 -0
- package/docs/design/templates/list-item/default.svg +1 -0
- package/docs/design/templates/list-item/multiline-dark.svg +1 -0
- package/docs/design/templates/list-item/multiline.svg +1 -0
- package/docs/design/templates/list-item/selected-dark.svg +1 -0
- package/docs/design/templates/list-item/selected.svg +1 -0
- package/docs/design/templates/list-item/trailing-dark.svg +1 -0
- package/docs/design/templates/list-item/trailing.svg +1 -0
- package/docs/design/templates/list-item-dark.svg +1 -0
- package/docs/design/templates/list-item.svg +1 -0
- package/docs/design/templates/list.svg +1 -0
- package/docs/design/templates/segmented-control/equal-dark.svg +1 -0
- package/docs/design/templates/segmented-control/equal.svg +1 -0
- package/docs/design/templates/segmented-control/pill-small-dark.svg +1 -0
- package/docs/design/templates/segmented-control/pill-small.svg +1 -0
- package/docs/design/templates/segmented-control-dark.svg +1 -0
- package/docs/design/templates/segmented-control.svg +1 -0
- package/docs/design/templates/skeleton/avatar-dark.svg +1 -0
- package/docs/design/templates/skeleton/avatar.svg +1 -0
- package/docs/design/templates/skeleton/block-dark.svg +1 -0
- package/docs/design/templates/skeleton/block.svg +1 -0
- package/docs/design/templates/skeleton/lines-dark.svg +1 -0
- package/docs/design/templates/skeleton/lines.svg +1 -0
- package/docs/design/templates/skeleton-dark.svg +1 -0
- package/docs/design/templates/skeleton.svg +1 -0
- package/docs/design/templates/state-banner/danger-dark.svg +1 -0
- package/docs/design/templates/state-banner/danger.svg +1 -0
- package/docs/design/templates/state-banner/info-badge-dark.svg +1 -0
- package/docs/design/templates/state-banner/info-badge.svg +1 -0
- package/docs/design/templates/state-banner/info-dark.svg +1 -0
- package/docs/design/templates/state-banner/info.svg +1 -0
- package/docs/design/templates/state-banner/success-dark.svg +1 -0
- package/docs/design/templates/state-banner/success.svg +1 -0
- package/docs/design/templates/state-banner/warning-dark.svg +1 -0
- package/docs/design/templates/state-banner/warning.svg +1 -0
- package/docs/design/templates/state-banner-dark.svg +1 -0
- package/docs/design/templates/state-banner.svg +1 -0
- package/docs/design/templates/tab-bar/workspace-tabs-dark.svg +1 -0
- package/docs/design/templates/tab-bar/workspace-tabs.svg +1 -0
- package/docs/design/templates/tab-bar-dark.svg +1 -0
- package/docs/design/templates/tab-bar.svg +1 -0
- package/docs/design/templates/token-search-field/empty-dark.svg +1 -0
- package/docs/design/templates/token-search-field/empty.svg +1 -0
- package/docs/design/templates/token-search-field/tokens-dark.svg +1 -0
- package/docs/design/templates/token-search-field/tokens.svg +1 -0
- package/docs/design/templates/token-search-field-dark.svg +1 -0
- package/docs/design/templates/token-search-field.svg +1 -0
- package/docs/design/templates/toolbar/title-and-actions-dark.svg +1 -0
- package/docs/design/templates/toolbar/title-and-actions.svg +1 -0
- package/docs/design/templates/toolbar/width-visibility-320-dark.svg +1 -0
- package/docs/design/templates/toolbar/width-visibility-320.svg +1 -0
- package/docs/design/templates/toolbar/width-visibility-600-dark.svg +1 -0
- package/docs/design/templates/toolbar/width-visibility-600.svg +1 -0
- package/docs/design/templates/toolbar-control-group/borderless-single-dark.svg +1 -0
- package/docs/design/templates/toolbar-control-group/borderless-single.svg +1 -0
- package/docs/design/templates/toolbar-control-group/icon-buttons-dark.svg +1 -0
- package/docs/design/templates/toolbar-control-group/icon-buttons.svg +1 -0
- package/docs/design/templates/toolbar-control-group/icon-tile-brand-dark.svg +1 -0
- package/docs/design/templates/toolbar-control-group/icon-tile-brand.svg +1 -0
- package/docs/design/templates/toolbar-control-group/icon-tile-danger-dark.svg +1 -0
- package/docs/design/templates/toolbar-control-group/icon-tile-danger.svg +1 -0
- package/docs/design/templates/toolbar-control-group/icon-tile-neutral-dark.svg +1 -0
- package/docs/design/templates/toolbar-control-group/icon-tile-neutral.svg +1 -0
- package/docs/design/templates/toolbar-control-group/icon-tile-success-dark.svg +1 -0
- package/docs/design/templates/toolbar-control-group/icon-tile-success.svg +1 -0
- package/docs/design/templates/toolbar-control-group/icon-tile-warning-dark.svg +1 -0
- package/docs/design/templates/toolbar-control-group/icon-tile-warning.svg +1 -0
- package/docs/design/templates/toolbar-control-group/push-buttons-dark.svg +1 -0
- package/docs/design/templates/toolbar-control-group/push-buttons.svg +1 -0
- package/docs/design/templates/toolbar-control-group/with-text-dark.svg +1 -0
- package/docs/design/templates/toolbar-control-group/with-text.svg +1 -0
- package/docs/design/templates/toolbar-control-group-dark.svg +1 -0
- package/docs/design/templates/toolbar-control-group.svg +1 -0
- package/docs/design/templates/toolbar-dark.svg +1 -0
- package/docs/design/templates/toolbar-text/dark-tone-dark.svg +1 -0
- package/docs/design/templates/toolbar-text/dark-tone.svg +1 -0
- package/docs/design/templates/toolbar-text/default-dark.svg +1 -0
- package/docs/design/templates/toolbar-text/default.svg +1 -0
- package/docs/design/templates/toolbar-text/large-dark.svg +1 -0
- package/docs/design/templates/toolbar-text/large.svg +1 -0
- package/docs/design/templates/toolbar-text/small-dark.svg +1 -0
- package/docs/design/templates/toolbar-text/small.svg +1 -0
- package/docs/design/templates/toolbar-text-dark.svg +1 -0
- package/docs/design/templates/toolbar-text.svg +1 -0
- package/docs/design/templates/toolbar.svg +1 -0
- package/docs/design/templates/value-table/details-dark.svg +1 -0
- package/docs/design/templates/value-table/details.svg +1 -0
- package/docs/design/templates/value-table-dark.svg +1 -0
- package/docs/design/templates/value-table.svg +1 -0
- package/docs/design/templates.md +140 -0
- package/docs/design-philosophy.md +56 -19
- package/docs/device-class.md +10 -9
- package/docs/document-baseline.md +42 -0
- package/docs/examples/application-ui-profile.json +60 -0
- package/docs/examples/command-palette-adapter.tsx +69 -17
- package/docs/examples/component-catalog-extension.json +52 -0
- package/docs/examples/component-composition-extension.json +80 -0
- package/docs/layout.md +612 -53
- package/docs/nav-stack.md +163 -14
- package/docs/recipes.md +127 -52
- package/docs/split-view.md +76 -5
- package/docs/sunken-panel.md +93 -0
- package/docs/surface-scaffold.md +74 -0
- package/docs/tab-navigator.md +218 -0
- package/docs/type-contracts.md +137 -0
- package/docs/ui-analyzer.md +404 -0
- package/docs/ui-doctor.md +202 -0
- package/docs/ui-evaluator.md +139 -0
- package/docs/ux-demo.md +45 -15
- package/docs/webawesome-theme.md +204 -16
- package/docs/workbench.md +623 -12
- package/doctor/cli.mjs +120 -0
- package/doctor/component-style-checks.mjs +457 -0
- package/doctor/config.schema.json +94 -0
- package/doctor/eslint-diagnostics.d.mts +24 -0
- package/doctor/eslint-diagnostics.mjs +24 -0
- package/doctor/index.d.mts +122 -0
- package/doctor/index.mjs +1403 -0
- package/doctor/report.schema.json +118 -0
- package/evaluator/cli.mjs +89 -0
- package/evaluator/index.d.mts +90 -0
- package/evaluator/index.mjs +1203 -0
- package/evaluator/report.schema.json +152 -0
- package/llms.txt +562 -49
- package/package.json +247 -27
- package/scripts/component-catalog-extension-validation.mjs +28 -0
- package/traversal-exclusions.mjs +27 -0
- package/ux-demo/recipes/app-shell.tsx +204 -16
- package/ux-demo/recipes/collapsible-sidebar.tsx +260 -0
- package/ux-demo/recipes/compact-toolbar.tsx +135 -14
- package/ux-demo/recipes/composer-form.tsx +133 -21
- package/ux-demo/recipes/list-detail-dialog.tsx +255 -14
- package/ux-demo/recipes/list-workspace-states.tsx +183 -11
- package/ux-demo/recipes/loaders.ts +11 -3
- package/ux-demo/recipes/loading-inspector.tsx +161 -36
- package/ux-demo/recipes/mount-recipe.ts +28 -10
- package/ux-demo/recipes/navigation-sidebar.tsx +137 -11
- package/ux-demo/recipes/navigation-stack.tsx +79 -24
- package/ux-demo/recipes/types.ts +23 -2
- package/ux-demo/recipes/workspace-header.tsx +86 -5
- package/dist/browser/panel-header.js +0 -7
- package/dist/chunk-2RJBFNB6.js +0 -172
- package/dist/chunk-2RJBFNB6.js.map +0 -1
- package/dist/chunk-2TS7ZSYX.js +0 -20
- package/dist/chunk-2TS7ZSYX.js.map +0 -1
- package/dist/chunk-2Z5TWHKQ.js +0 -34
- package/dist/chunk-2Z5TWHKQ.js.map +0 -1
- package/dist/chunk-37T3VNIZ.js +0 -19
- package/dist/chunk-37T3VNIZ.js.map +0 -1
- package/dist/chunk-55DATV3A.js +0 -10
- package/dist/chunk-55DATV3A.js.map +0 -1
- package/dist/chunk-56RJXPHG.js.map +0 -1
- package/dist/chunk-7BR3DO2A.js.map +0 -1
- package/dist/chunk-7JB7VPRI.js +0 -34
- package/dist/chunk-7JB7VPRI.js.map +0 -1
- package/dist/chunk-7LDCTU7D.js +0 -134
- package/dist/chunk-7LDCTU7D.js.map +0 -1
- package/dist/chunk-AQNKJRFH.js +0 -79
- package/dist/chunk-AQNKJRFH.js.map +0 -1
- package/dist/chunk-B24C4A6T.js +0 -22
- package/dist/chunk-B24C4A6T.js.map +0 -1
- package/dist/chunk-BLK3UEEI.js +0 -23
- package/dist/chunk-BLK3UEEI.js.map +0 -1
- package/dist/chunk-DAFFDO33.js +0 -14
- package/dist/chunk-DAFFDO33.js.map +0 -1
- package/dist/chunk-I7INRJO4.js +0 -17
- package/dist/chunk-I7INRJO4.js.map +0 -1
- package/dist/chunk-L4OKFDJY.js +0 -24
- package/dist/chunk-L4OKFDJY.js.map +0 -1
- package/dist/chunk-LC3YSAZC.js +0 -39
- package/dist/chunk-LC3YSAZC.js.map +0 -1
- package/dist/chunk-M5JRI6MN.js +0 -27
- package/dist/chunk-M5JRI6MN.js.map +0 -1
- package/dist/chunk-MBR3TYNL.js +0 -14
- package/dist/chunk-MBR3TYNL.js.map +0 -1
- package/dist/chunk-MFKMHK5W.js +0 -10
- package/dist/chunk-MFKMHK5W.js.map +0 -1
- package/dist/chunk-MQIZAD4A.js +0 -227
- package/dist/chunk-MQIZAD4A.js.map +0 -1
- package/dist/chunk-RUNWEPR4.js +0 -10
- package/dist/chunk-RUNWEPR4.js.map +0 -1
- package/dist/chunk-W2FK7ZNY.js +0 -26
- package/dist/chunk-W2FK7ZNY.js.map +0 -1
- package/dist/chunk-W5EQ3HYQ.js +0 -42
- package/dist/chunk-W5EQ3HYQ.js.map +0 -1
- package/dist/chunk-WVPYVDXY.js +0 -15
- package/dist/chunk-WVPYVDXY.js.map +0 -1
- package/dist/chunk-YGN7OMLT.js.map +0 -1
- package/dist/panel-header.d.ts +0 -36
- package/dist/panel-header.js +0 -7
- package/dist/panel-header.js.map +0 -1
- package/dist/styles/panel-header.css +0 -64
- package/dist/styles/tab-scaffold.css +0 -84
- package/dist/tab-scaffold.d.ts +0 -30
- package/dist/tab-scaffold.js +0 -16
- package/dist/tab-scaffold.js.map +0 -1
- package/dist/wire-tab-scaffold.d.ts +0 -11
- package/dist/wire-tab-scaffold.js +0 -16
- package/dist/wire-tab-scaffold.js.map +0 -1
- package/docs/tab-scaffold.md +0 -41
- package/ux-demo/recipes/recipes.css +0 -361
package/dist/chunk-7LDCTU7D.js
DELETED
|
@@ -1,134 +0,0 @@
|
|
|
1
|
-
import { LucideIcon } from './chunk-W2FK7ZNY.js';
|
|
2
|
-
import { Search, X } from 'lucide';
|
|
3
|
-
import { jsx, jsxs, Fragment } from 'kerfjs/jsx-runtime';
|
|
4
|
-
|
|
5
|
-
function orderedParts(query, tokens) {
|
|
6
|
-
const ordered = tokens.map((token, index) => ({ token, index, offset: Math.max(0, Math.min(query.length, token.offset ?? query.length)) })).sort((left, right) => left.offset - right.offset || left.index - right.index);
|
|
7
|
-
const parts = [];
|
|
8
|
-
let cursor = 0;
|
|
9
|
-
for (const { token, offset } of ordered) {
|
|
10
|
-
parts.push({ kind: "text", value: query.slice(cursor, offset) });
|
|
11
|
-
parts.push({ kind: "token", token: { ...token, offset } });
|
|
12
|
-
cursor = offset;
|
|
13
|
-
}
|
|
14
|
-
parts.push({ kind: "text", value: query.slice(cursor) });
|
|
15
|
-
return parts;
|
|
16
|
-
}
|
|
17
|
-
function CloseIcon() {
|
|
18
|
-
return /* @__PURE__ */ jsx(LucideIcon, { icon: X, name: "x" });
|
|
19
|
-
}
|
|
20
|
-
function TokenSearchField({
|
|
21
|
-
id,
|
|
22
|
-
label,
|
|
23
|
-
query = "",
|
|
24
|
-
tokens = [],
|
|
25
|
-
placeholder = "Search",
|
|
26
|
-
tokenPlaceholder = "Add search\u2026",
|
|
27
|
-
disabled = false,
|
|
28
|
-
autofocus = false,
|
|
29
|
-
collapsible = false,
|
|
30
|
-
expanded = false,
|
|
31
|
-
expandAction = "expand-token-search",
|
|
32
|
-
expandLabel,
|
|
33
|
-
leading,
|
|
34
|
-
trailing,
|
|
35
|
-
editAction = "edit-search-token",
|
|
36
|
-
removeAction = "remove-search-token",
|
|
37
|
-
clearAction = "clear-token-search",
|
|
38
|
-
clearLabel = "Clear search",
|
|
39
|
-
className = "",
|
|
40
|
-
editorAttributes = {}
|
|
41
|
-
}) {
|
|
42
|
-
const parts = orderedParts(query, tokens);
|
|
43
|
-
const key = `${id}:${tokens.map((token) => token.value).join("|")}`;
|
|
44
|
-
const resolvedExpanded = !collapsible || expanded || query.length > 0 || tokens.length > 0;
|
|
45
|
-
return /* @__PURE__ */ jsx("div", { class: `kui-token-search ${className}`.trim(), "data-component": "token-search-field", "data-token-search-id": id, "data-disabled": String(disabled), "data-collapsible": String(collapsible), "data-expanded": String(resolvedExpanded), "data-has-trailing": String(Boolean(trailing)), children: !resolvedExpanded ? /* @__PURE__ */ jsx("button", { type: "button", class: "kui-token-search__expand", "data-action": expandAction, "aria-label": expandLabel ?? label, title: expandLabel ?? label, disabled, children: /* @__PURE__ */ jsx(LucideIcon, { icon: Search, name: "search" }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
46
|
-
/* @__PURE__ */ jsx("span", { class: "kui-token-search__leading", "aria-hidden": "true", children: leading ?? /* @__PURE__ */ jsx(LucideIcon, { icon: Search, name: "search" }) }),
|
|
47
|
-
/* @__PURE__ */ jsx(
|
|
48
|
-
"div",
|
|
49
|
-
{
|
|
50
|
-
...editorAttributes,
|
|
51
|
-
class: "kui-token-search__editor",
|
|
52
|
-
"data-key": key,
|
|
53
|
-
"data-morph-skip": true,
|
|
54
|
-
"data-token-search-editor": id,
|
|
55
|
-
"data-token-count": tokens.length,
|
|
56
|
-
"data-placeholder": tokens.length ? tokenPlaceholder : placeholder,
|
|
57
|
-
role: "searchbox",
|
|
58
|
-
"aria-label": label,
|
|
59
|
-
"aria-disabled": disabled ? "true" : void 0,
|
|
60
|
-
contenteditable: disabled ? "false" : "true",
|
|
61
|
-
spellcheck: "false",
|
|
62
|
-
autofocus,
|
|
63
|
-
children: parts.map((part) => part.kind === "text" ? /* @__PURE__ */ jsx("span", { "data-token-search-text": true, "data-empty": String(part.value.length === 0), children: part.value || (tokens.length ? "\u200B" : "") }) : /* @__PURE__ */ jsxs("span", { class: "kui-token-search__token", contenteditable: "false", "data-component": "token-search-token", "data-token-value": part.token.value, children: [
|
|
64
|
-
/* @__PURE__ */ jsx("button", { type: "button", class: "kui-token-search__token-edit", "data-action": editAction, "data-token-value": part.token.value, "aria-label": `Edit ${part.token.accessibleLabel ?? part.token.label}`, disabled, children: part.token.label }),
|
|
65
|
-
/* @__PURE__ */ jsx("button", { type: "button", class: "kui-token-search__token-remove", "data-action": removeAction, "data-token-value": part.token.value, "aria-label": `Remove ${part.token.accessibleLabel ?? part.token.label}`, disabled, children: /* @__PURE__ */ jsx(CloseIcon, {}) })
|
|
66
|
-
] }))
|
|
67
|
-
}
|
|
68
|
-
),
|
|
69
|
-
(query || tokens.length > 0) && /* @__PURE__ */ jsx("button", { type: "button", class: "kui-token-search__clear", "data-action": clearAction, "aria-label": clearLabel, title: clearLabel, disabled, children: /* @__PURE__ */ jsx(CloseIcon, {}) }),
|
|
70
|
-
trailing && /* @__PURE__ */ jsx("span", { class: "kui-token-search__trailing", children: trailing })
|
|
71
|
-
] }) });
|
|
72
|
-
}
|
|
73
|
-
function readTokenSearchField(editor, knownTokens = []) {
|
|
74
|
-
let query = "";
|
|
75
|
-
const tokens = [];
|
|
76
|
-
const visit = (node) => {
|
|
77
|
-
if (node.nodeType === Node.TEXT_NODE) {
|
|
78
|
-
query += (node.textContent ?? "").replaceAll("\xA0", " ").replaceAll("\u200B", "");
|
|
79
|
-
return;
|
|
80
|
-
}
|
|
81
|
-
if (!(node instanceof HTMLElement)) return;
|
|
82
|
-
if (node.matches('[data-component="token-search-token"]')) {
|
|
83
|
-
const value = node.dataset.tokenValue;
|
|
84
|
-
const known = knownTokens.find((token) => token.value === value);
|
|
85
|
-
if (known) tokens.push({ ...known, offset: query.length });
|
|
86
|
-
else if (value) tokens.push({ value, label: value, offset: query.length });
|
|
87
|
-
return;
|
|
88
|
-
}
|
|
89
|
-
if (node.tagName === "BR") {
|
|
90
|
-
query += " ";
|
|
91
|
-
return;
|
|
92
|
-
}
|
|
93
|
-
for (const child of node.childNodes) visit(child);
|
|
94
|
-
};
|
|
95
|
-
for (const child of editor.childNodes) visit(child);
|
|
96
|
-
return { query, tokens };
|
|
97
|
-
}
|
|
98
|
-
function placeTokenSearchCaret(editor, offset) {
|
|
99
|
-
editor.focus({ preventScroll: true });
|
|
100
|
-
const selection = globalThis.getSelection();
|
|
101
|
-
if (!selection) return;
|
|
102
|
-
const range = document.createRange();
|
|
103
|
-
if (offset === void 0) {
|
|
104
|
-
range.selectNodeContents(editor);
|
|
105
|
-
range.collapse(false);
|
|
106
|
-
} else {
|
|
107
|
-
let remaining = Math.max(0, offset);
|
|
108
|
-
let found = false;
|
|
109
|
-
const walker = document.createTreeWalker(editor, NodeFilter.SHOW_TEXT, {
|
|
110
|
-
acceptNode: (node) => node.parentElement?.closest('[data-component="token-search-token"]') ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT
|
|
111
|
-
});
|
|
112
|
-
for (let node = walker.nextNode(); node; node = walker.nextNode()) {
|
|
113
|
-
const source = node.textContent ?? "";
|
|
114
|
-
const length = source.replaceAll("\u200B", "").length;
|
|
115
|
-
if (remaining <= length) {
|
|
116
|
-
range.setStart(node, source === "\u200B" ? 0 : Math.min(remaining, source.length));
|
|
117
|
-
range.collapse(true);
|
|
118
|
-
found = true;
|
|
119
|
-
break;
|
|
120
|
-
}
|
|
121
|
-
remaining -= length;
|
|
122
|
-
}
|
|
123
|
-
if (!found) {
|
|
124
|
-
range.selectNodeContents(editor);
|
|
125
|
-
range.collapse(false);
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
|
-
selection.removeAllRanges();
|
|
129
|
-
selection.addRange(range);
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField };
|
|
133
|
-
|
|
134
|
-
//# sourceMappingURL=chunk-7LDCTU7D.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/token-search-field.tsx"],"names":[],"mappings":"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","file":"chunk-7LDCTU7D.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport { Search, X } from 'lucide';\n\nimport { LucideIcon } from './lucide-icon.js';\n\nexport interface TokenSearchToken {\n value: string;\n label: string;\n offset?: number;\n accessibleLabel?: string;\n}\n\nexport interface TokenSearchFieldProps {\n id: string;\n label: string;\n query?: string;\n tokens?: readonly TokenSearchToken[];\n placeholder?: string;\n tokenPlaceholder?: string;\n disabled?: boolean;\n autofocus?: boolean;\n /** Allow an empty field to render as one iconic action. */\n collapsible?: boolean;\n /** Keep an empty collapsible field open while the application owns focus. */\n expanded?: boolean;\n expandAction?: string;\n expandLabel?: string;\n leading?: SafeHtml;\n trailing?: SafeHtml;\n editAction?: string;\n removeAction?: string;\n clearAction?: string;\n clearLabel?: string;\n className?: string;\n editorAttributes?: Readonly<Record<`data-${string}`, string>>;\n}\n\nexport interface TokenSearchFieldValue {\n query: string;\n tokens: TokenSearchToken[];\n}\n\ntype TokenSearchPart =\n | { kind: 'text'; value: string }\n | { kind: 'token'; token: TokenSearchToken };\n\nfunction orderedParts(query: string, tokens: readonly TokenSearchToken[]): TokenSearchPart[] {\n const ordered = tokens\n .map((token, index) => ({ token, index, offset: Math.max(0, Math.min(query.length, token.offset ?? query.length)) }))\n .sort((left, right) => left.offset - right.offset || left.index - right.index);\n const parts: TokenSearchPart[] = [];\n let cursor = 0;\n for (const { token, offset } of ordered) {\n parts.push({ kind: 'text', value: query.slice(cursor, offset) });\n parts.push({ kind: 'token', token: { ...token, offset } });\n cursor = offset;\n }\n parts.push({ kind: 'text', value: query.slice(cursor) });\n return parts;\n}\n\nfunction CloseIcon() {\n return <LucideIcon icon={X} name=\"x\" />;\n}\n\nexport function TokenSearchField({\n id,\n label,\n query = '',\n tokens = [],\n placeholder = 'Search',\n tokenPlaceholder = 'Add search…',\n disabled = false,\n autofocus = false,\n collapsible = false,\n expanded = false,\n expandAction = 'expand-token-search',\n expandLabel,\n leading,\n trailing,\n editAction = 'edit-search-token',\n removeAction = 'remove-search-token',\n clearAction = 'clear-token-search',\n clearLabel = 'Clear search',\n className = '',\n editorAttributes = {},\n}: TokenSearchFieldProps) {\n const parts = orderedParts(query, tokens);\n const key = `${id}:${tokens.map((token) => token.value).join('|')}`;\n const resolvedExpanded = !collapsible || expanded || query.length > 0 || tokens.length > 0;\n return <div class={`kui-token-search ${className}`.trim()} data-component=\"token-search-field\" data-token-search-id={id} data-disabled={String(disabled)} data-collapsible={String(collapsible)} data-expanded={String(resolvedExpanded)} data-has-trailing={String(Boolean(trailing))}>\n {!resolvedExpanded\n ? <button type=\"button\" class=\"kui-token-search__expand\" data-action={expandAction} aria-label={expandLabel ?? label} title={expandLabel ?? label} disabled={disabled}><LucideIcon icon={Search} name=\"search\" /></button>\n : <>\n <span class=\"kui-token-search__leading\" aria-hidden=\"true\">{leading ?? <LucideIcon icon={Search} name=\"search\" />}</span>\n <div\n {...editorAttributes}\n class=\"kui-token-search__editor\"\n data-key={key}\n data-morph-skip\n data-token-search-editor={id}\n data-token-count={tokens.length}\n data-placeholder={tokens.length ? tokenPlaceholder : placeholder}\n role=\"searchbox\"\n aria-label={label}\n aria-disabled={disabled ? 'true' : undefined}\n contenteditable={disabled ? 'false' : 'true'}\n spellcheck=\"false\"\n autofocus={autofocus}\n >{parts.map((part) => part.kind === 'text'\n ? <span data-token-search-text data-empty={String(part.value.length === 0)}>{part.value || (tokens.length ? '\\u200b' : '')}</span>\n : <span class=\"kui-token-search__token\" contenteditable=\"false\" data-component=\"token-search-token\" data-token-value={part.token.value}>\n <button type=\"button\" class=\"kui-token-search__token-edit\" data-action={editAction} data-token-value={part.token.value} aria-label={`Edit ${part.token.accessibleLabel ?? part.token.label}`} disabled={disabled}>{part.token.label}</button>\n <button type=\"button\" class=\"kui-token-search__token-remove\" data-action={removeAction} data-token-value={part.token.value} aria-label={`Remove ${part.token.accessibleLabel ?? part.token.label}`} disabled={disabled}><CloseIcon /></button>\n </span>)}</div>\n {(query || tokens.length > 0) && <button type=\"button\" class=\"kui-token-search__clear\" data-action={clearAction} aria-label={clearLabel} title={clearLabel} disabled={disabled}><CloseIcon /></button>}\n {trailing && <span class=\"kui-token-search__trailing\">{trailing}</span>}\n </>}\n </div>;\n}\n\n/** Read editable text and ordered token offsets from a rendered TokenSearchField editor. */\nexport function readTokenSearchField(editor: HTMLElement, knownTokens: readonly TokenSearchToken[] = []): TokenSearchFieldValue {\n let query = '';\n const tokens: TokenSearchToken[] = [];\n const visit = (node: Node): void => {\n if (node.nodeType === Node.TEXT_NODE) {\n query += (node.textContent ?? '').replaceAll('\\u00a0', ' ').replaceAll('\\u200b', '');\n return;\n }\n if (!(node instanceof HTMLElement)) return;\n if (node.matches('[data-component=\"token-search-token\"]')) {\n const value = node.dataset.tokenValue;\n const known = knownTokens.find((token) => token.value === value);\n if (known) tokens.push({ ...known, offset: query.length });\n else if (value) tokens.push({ value, label: value, offset: query.length });\n return;\n }\n if (node.tagName === 'BR') {\n query += ' ';\n return;\n }\n for (const child of node.childNodes) visit(child);\n };\n for (const child of editor.childNodes) visit(child);\n return { query, tokens };\n}\n\n/** Focus an editor and place its caret at a text offset, skipping atomic token chips. */\nexport function placeTokenSearchCaret(editor: HTMLElement, offset?: number): void {\n editor.focus({ preventScroll: true });\n const selection = globalThis.getSelection();\n if (!selection) return;\n const range = document.createRange();\n if (offset === undefined) {\n range.selectNodeContents(editor);\n range.collapse(false);\n } else {\n let remaining = Math.max(0, offset);\n let found = false;\n const walker = document.createTreeWalker(editor, NodeFilter.SHOW_TEXT, {\n acceptNode: (node) => node.parentElement?.closest('[data-component=\"token-search-token\"]')\n ? NodeFilter.FILTER_REJECT\n : NodeFilter.FILTER_ACCEPT,\n });\n for (let node = walker.nextNode(); node; node = walker.nextNode()) {\n const source = node.textContent ?? '';\n const length = source.replaceAll('\\u200b', '').length;\n if (remaining <= length) {\n range.setStart(node, source === '\\u200b' ? 0 : Math.min(remaining, source.length));\n range.collapse(true);\n found = true;\n break;\n }\n remaining -= length;\n }\n if (!found) {\n range.selectNodeContents(editor);\n range.collapse(false);\n }\n }\n selection.removeAllRanges();\n selection.addRange(range);\n}\n"]}
|
package/dist/chunk-AQNKJRFH.js
DELETED
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
import { resizeRegionFromPointer, clampRegionSize } from './chunk-M5JRI6MN.js';
|
|
2
|
-
import { delegate } from 'kerfjs';
|
|
3
|
-
|
|
4
|
-
function regionState(handle) {
|
|
5
|
-
const region = handle.closest('[data-component="resizable-region"]');
|
|
6
|
-
if (!(region instanceof HTMLElement) || !(handle instanceof HTMLElement)) return void 0;
|
|
7
|
-
const id = region.dataset.regionId;
|
|
8
|
-
const axis = region.dataset.axis;
|
|
9
|
-
const edge = region.dataset.edge;
|
|
10
|
-
const min = Number(handle.getAttribute("aria-valuemin"));
|
|
11
|
-
const max = Number(handle.getAttribute("aria-valuemax"));
|
|
12
|
-
const size = Number(handle.getAttribute("aria-valuenow"));
|
|
13
|
-
if (!id || axis !== "horizontal" && axis !== "vertical" || edge !== "start" && edge !== "end" || !Number.isFinite(min) || !Number.isFinite(max) || !Number.isFinite(size)) return void 0;
|
|
14
|
-
return { region, handle, id, axis, edge, min, max, size };
|
|
15
|
-
}
|
|
16
|
-
function preview(state, size, onPreview) {
|
|
17
|
-
const next = clampRegionSize(size, state.min, state.max);
|
|
18
|
-
state.region.style.setProperty("--kui-resizable-region-size", `${next}px`);
|
|
19
|
-
state.handle.setAttribute("aria-valuenow", String(next));
|
|
20
|
-
onPreview?.({ id: state.id, size: next, source: "pointer" });
|
|
21
|
-
return next;
|
|
22
|
-
}
|
|
23
|
-
function wireResizableRegions(root, { step = 16, largeStep = 64, onPreview, onCommit }) {
|
|
24
|
-
let stopPointer;
|
|
25
|
-
const stopKeydown = delegate(root, "keydown", "[data-kui-resize-handle]", (event, handle) => {
|
|
26
|
-
const keyboardEvent = event;
|
|
27
|
-
const state = regionState(handle);
|
|
28
|
-
if (!state) return;
|
|
29
|
-
let next;
|
|
30
|
-
if (keyboardEvent.key === "Home") next = state.min;
|
|
31
|
-
if (keyboardEvent.key === "End") next = state.max;
|
|
32
|
-
const increment = keyboardEvent.shiftKey ? largeStep : step;
|
|
33
|
-
if (state.axis === "horizontal" && keyboardEvent.key === "ArrowLeft") next = resizeRegionFromPointer(state.size, -increment, state.edge);
|
|
34
|
-
if (state.axis === "horizontal" && keyboardEvent.key === "ArrowRight") next = resizeRegionFromPointer(state.size, increment, state.edge);
|
|
35
|
-
if (state.axis === "vertical" && keyboardEvent.key === "ArrowUp") next = resizeRegionFromPointer(state.size, -increment, state.edge);
|
|
36
|
-
if (state.axis === "vertical" && keyboardEvent.key === "ArrowDown") next = resizeRegionFromPointer(state.size, increment, state.edge);
|
|
37
|
-
if (next === void 0) return;
|
|
38
|
-
keyboardEvent.preventDefault();
|
|
39
|
-
const size = clampRegionSize(next, state.min, state.max);
|
|
40
|
-
state.region.style.setProperty("--kui-resizable-region-size", `${size}px`);
|
|
41
|
-
state.handle.setAttribute("aria-valuenow", String(size));
|
|
42
|
-
onCommit({ id: state.id, size, source: "keyboard" });
|
|
43
|
-
});
|
|
44
|
-
const stopPointerDown = delegate(root, "pointerdown", "[data-kui-resize-handle]", (event, handle) => {
|
|
45
|
-
const pointerEvent = event;
|
|
46
|
-
if (pointerEvent.button !== 0) return;
|
|
47
|
-
const state = regionState(handle);
|
|
48
|
-
if (!state) return;
|
|
49
|
-
pointerEvent.preventDefault();
|
|
50
|
-
state.handle.setPointerCapture?.(pointerEvent.pointerId);
|
|
51
|
-
const startCoordinate = state.axis === "horizontal" ? pointerEvent.clientX : pointerEvent.clientY;
|
|
52
|
-
let next = state.size;
|
|
53
|
-
const move = (moveEvent) => {
|
|
54
|
-
const coordinate = state.axis === "horizontal" ? moveEvent.clientX : moveEvent.clientY;
|
|
55
|
-
next = preview(state, resizeRegionFromPointer(state.size, coordinate - startCoordinate, state.edge), onPreview);
|
|
56
|
-
};
|
|
57
|
-
const finish = () => {
|
|
58
|
-
root.removeEventListener("pointermove", move);
|
|
59
|
-
root.removeEventListener("pointerup", finish);
|
|
60
|
-
root.removeEventListener("pointercancel", finish);
|
|
61
|
-
stopPointer = void 0;
|
|
62
|
-
onCommit({ id: state.id, size: next, source: "pointer" });
|
|
63
|
-
};
|
|
64
|
-
stopPointer?.();
|
|
65
|
-
stopPointer = finish;
|
|
66
|
-
root.addEventListener("pointermove", move);
|
|
67
|
-
root.addEventListener("pointerup", finish, { once: true });
|
|
68
|
-
root.addEventListener("pointercancel", finish, { once: true });
|
|
69
|
-
});
|
|
70
|
-
return () => {
|
|
71
|
-
stopPointer?.();
|
|
72
|
-
stopKeydown();
|
|
73
|
-
stopPointerDown();
|
|
74
|
-
};
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
export { wireResizableRegions };
|
|
78
|
-
|
|
79
|
-
//# sourceMappingURL=chunk-AQNKJRFH.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/wire-resizable-regions.ts"],"names":[],"mappings":";;;AA4BA,SAAS,YAAY,MAAA,EAA0C;AAC7D,EAAA,MAAM,MAAA,GAAS,MAAA,CAAO,OAAA,CAAqB,qCAAqC,CAAA;AAChF,EAAA,IAAI,EAAE,MAAA,YAAkB,WAAA,CAAA,IAAgB,EAAE,MAAA,YAAkB,cAAc,OAAO,MAAA;AACjF,EAAA,MAAM,EAAA,GAAK,OAAO,OAAA,CAAQ,QAAA;AAC1B,EAAA,MAAM,IAAA,GAAO,OAAO,OAAA,CAAQ,IAAA;AAC5B,EAAA,MAAM,IAAA,GAAO,OAAO,OAAA,CAAQ,IAAA;AAC5B,EAAA,MAAM,GAAA,GAAM,MAAA,CAAO,MAAA,CAAO,YAAA,CAAa,eAAe,CAAC,CAAA;AACvD,EAAA,MAAM,GAAA,GAAM,MAAA,CAAO,MAAA,CAAO,YAAA,CAAa,eAAe,CAAC,CAAA;AACvD,EAAA,MAAM,IAAA,GAAO,MAAA,CAAO,MAAA,CAAO,YAAA,CAAa,eAAe,CAAC,CAAA;AACxD,EAAA,IAAI,CAAC,EAAA,IAAO,IAAA,KAAS,YAAA,IAAgB,IAAA,KAAS,cAAgB,IAAA,KAAS,OAAA,IAAW,IAAA,KAAS,KAAA,IAAU,CAAC,MAAA,CAAO,SAAS,GAAG,CAAA,IAAK,CAAC,MAAA,CAAO,QAAA,CAAS,GAAG,CAAA,IAAK,CAAC,MAAA,CAAO,QAAA,CAAS,IAAI,CAAA,EAAG,OAAO,MAAA;AACtL,EAAA,OAAO,EAAE,QAAQ,MAAA,EAAQ,EAAA,EAAI,MAAM,IAAA,EAAM,GAAA,EAAK,KAAK,IAAA,EAAK;AAC1D;AAEA,SAAS,OAAA,CAAQ,KAAA,EAAoB,IAAA,EAAc,SAAA,EAA4C;AAC7F,EAAA,MAAM,OAAO,eAAA,CAAgB,IAAA,EAAM,KAAA,CAAM,GAAA,EAAK,MAAM,GAAG,CAAA;AACvD,EAAA,KAAA,CAAM,OAAO,KAAA,CAAM,WAAA,CAAY,6BAAA,EAA+B,CAAA,EAAG,IAAI,CAAA,EAAA,CAAI,CAAA;AACzE,EAAA,KAAA,CAAM,MAAA,CAAO,YAAA,CAAa,eAAA,EAAiB,MAAA,CAAO,IAAI,CAAC,CAAA;AACvD,EAAA,SAAA,GAAY,EAAE,IAAI,KAAA,CAAM,EAAA,EAAI,MAAM,IAAA,EAAM,MAAA,EAAQ,WAAW,CAAA;AAC3D,EAAA,OAAO,IAAA;AACT;AAGO,SAAS,oBAAA,CAAqB,MAAmB,EAAE,IAAA,GAAO,IAAI,SAAA,GAAY,EAAA,EAAI,SAAA,EAAW,QAAA,EAAS,EAAgC;AACvI,EAAA,IAAI,WAAA;AAEJ,EAAA,MAAM,cAAc,QAAA,CAAS,IAAA,EAAM,WAAW,0BAAA,EAA4B,CAAC,OAAO,MAAA,KAAW;AAC3F,IAAA,MAAM,aAAA,GAAgB,KAAA;AACtB,IAAA,MAAM,KAAA,GAAQ,YAAY,MAAM,CAAA;AAChC,IAAA,IAAI,CAAC,KAAA,EAAO;AACZ,IAAA,IAAI,IAAA;AACJ,IAAA,IAAI,aAAA,CAAc,GAAA,KAAQ,MAAA,EAAQ,IAAA,GAAO,KAAA,CAAM,GAAA;AAC/C,IAAA,IAAI,aAAA,CAAc,GAAA,KAAQ,KAAA,EAAO,IAAA,GAAO,KAAA,CAAM,GAAA;AAC9C,IAAA,MAAM,SAAA,GAAY,aAAA,CAAc,QAAA,GAAW,SAAA,GAAY,IAAA;AACvD,IAAA,IAAI,KAAA,CAAM,IAAA,KAAS,YAAA,IAAgB,aAAA,CAAc,GAAA,KAAQ,WAAA,EAAa,IAAA,GAAO,uBAAA,CAAwB,KAAA,CAAM,IAAA,EAAM,CAAC,SAAA,EAAW,MAAM,IAAI,CAAA;AACvI,IAAA,IAAI,KAAA,CAAM,IAAA,KAAS,YAAA,IAAgB,aAAA,CAAc,GAAA,KAAQ,YAAA,EAAc,IAAA,GAAO,uBAAA,CAAwB,KAAA,CAAM,IAAA,EAAM,SAAA,EAAW,KAAA,CAAM,IAAI,CAAA;AACvI,IAAA,IAAI,KAAA,CAAM,IAAA,KAAS,UAAA,IAAc,aAAA,CAAc,GAAA,KAAQ,SAAA,EAAW,IAAA,GAAO,uBAAA,CAAwB,KAAA,CAAM,IAAA,EAAM,CAAC,SAAA,EAAW,MAAM,IAAI,CAAA;AACnI,IAAA,IAAI,KAAA,CAAM,IAAA,KAAS,UAAA,IAAc,aAAA,CAAc,GAAA,KAAQ,WAAA,EAAa,IAAA,GAAO,uBAAA,CAAwB,KAAA,CAAM,IAAA,EAAM,SAAA,EAAW,KAAA,CAAM,IAAI,CAAA;AACpI,IAAA,IAAI,SAAS,MAAA,EAAW;AACxB,IAAA,aAAA,CAAc,cAAA,EAAe;AAC7B,IAAA,MAAM,OAAO,eAAA,CAAgB,IAAA,EAAM,KAAA,CAAM,GAAA,EAAK,MAAM,GAAG,CAAA;AACvD,IAAA,KAAA,CAAM,OAAO,KAAA,CAAM,WAAA,CAAY,6BAAA,EAA+B,CAAA,EAAG,IAAI,CAAA,EAAA,CAAI,CAAA;AACzE,IAAA,KAAA,CAAM,MAAA,CAAO,YAAA,CAAa,eAAA,EAAiB,MAAA,CAAO,IAAI,CAAC,CAAA;AACvD,IAAA,QAAA,CAAS,EAAE,EAAA,EAAI,KAAA,CAAM,IAAI,IAAA,EAAM,MAAA,EAAQ,YAAY,CAAA;AAAA,EACrD,CAAC,CAAA;AAED,EAAA,MAAM,kBAAkB,QAAA,CAAS,IAAA,EAAM,eAAe,0BAAA,EAA4B,CAAC,OAAO,MAAA,KAAW;AACnG,IAAA,MAAM,YAAA,GAAe,KAAA;AACrB,IAAA,IAAI,YAAA,CAAa,WAAW,CAAA,EAAG;AAC/B,IAAA,MAAM,KAAA,GAAQ,YAAY,MAAM,CAAA;AAChC,IAAA,IAAI,CAAC,KAAA,EAAO;AACZ,IAAA,YAAA,CAAa,cAAA,EAAe;AAC5B,IAAA,KAAA,CAAM,MAAA,CAAO,iBAAA,GAAoB,YAAA,CAAa,SAAS,CAAA;AACvD,IAAA,MAAM,kBAAkB,KAAA,CAAM,IAAA,KAAS,YAAA,GAAe,YAAA,CAAa,UAAU,YAAA,CAAa,OAAA;AAC1F,IAAA,IAAI,OAAO,KAAA,CAAM,IAAA;AACjB,IAAA,MAAM,IAAA,GAAO,CAAC,SAAA,KAA4B;AACxC,MAAA,MAAM,aAAa,KAAA,CAAM,IAAA,KAAS,YAAA,GAAe,SAAA,CAAU,UAAU,SAAA,CAAU,OAAA;AAC/E,MAAA,IAAA,GAAO,OAAA,CAAQ,KAAA,EAAO,uBAAA,CAAwB,KAAA,CAAM,IAAA,EAAM,aAAa,eAAA,EAAiB,KAAA,CAAM,IAAI,CAAA,EAAG,SAAS,CAAA;AAAA,IAChH,CAAA;AACA,IAAA,MAAM,SAAS,MAAM;AACnB,MAAA,IAAA,CAAK,mBAAA,CAAoB,eAAe,IAAI,CAAA;AAC5C,MAAA,IAAA,CAAK,mBAAA,CAAoB,aAAa,MAAM,CAAA;AAC5C,MAAA,IAAA,CAAK,mBAAA,CAAoB,iBAAiB,MAAM,CAAA;AAChD,MAAA,WAAA,GAAc,MAAA;AACd,MAAA,QAAA,CAAS,EAAE,IAAI,KAAA,CAAM,EAAA,EAAI,MAAM,IAAA,EAAM,MAAA,EAAQ,WAAW,CAAA;AAAA,IAC1D,CAAA;AACA,IAAA,WAAA,IAAc;AACd,IAAA,WAAA,GAAc,MAAA;AACd,IAAA,IAAA,CAAK,gBAAA,CAAiB,eAAe,IAAI,CAAA;AACzC,IAAA,IAAA,CAAK,iBAAiB,WAAA,EAAa,MAAA,EAAQ,EAAE,IAAA,EAAM,MAAM,CAAA;AACzD,IAAA,IAAA,CAAK,iBAAiB,eAAA,EAAiB,MAAA,EAAQ,EAAE,IAAA,EAAM,MAAM,CAAA;AAAA,EAC/D,CAAC,CAAA;AAED,EAAA,OAAO,MAAM;AACX,IAAA,WAAA,IAAc;AACd,IAAA,WAAA,EAAY;AACZ,IAAA,eAAA,EAAgB;AAAA,EAClB,CAAA;AACF","file":"chunk-AQNKJRFH.js","sourcesContent":["import { delegate } from 'kerfjs';\n\nimport { clampRegionSize, type ResizableRegionAxis, type ResizableRegionEdge, resizeRegionFromPointer } from './resizable-region.js';\n\nexport interface ResizeCommit {\n id: string;\n size: number;\n source: 'keyboard' | 'pointer';\n}\n\nexport interface WireResizableRegionsOptions {\n step?: number;\n largeStep?: number;\n onPreview?: (change: ResizeCommit) => void;\n onCommit: (change: ResizeCommit) => void;\n}\n\ninterface RegionState {\n region: HTMLElement;\n handle: HTMLElement;\n id: string;\n axis: ResizableRegionAxis;\n edge: ResizableRegionEdge;\n min: number;\n max: number;\n size: number;\n}\n\nfunction regionState(handle: Element): RegionState | undefined {\n const region = handle.closest<HTMLElement>('[data-component=\"resizable-region\"]');\n if (!(region instanceof HTMLElement) || !(handle instanceof HTMLElement)) return undefined;\n const id = region.dataset.regionId;\n const axis = region.dataset.axis;\n const edge = region.dataset.edge;\n const min = Number(handle.getAttribute('aria-valuemin'));\n const max = Number(handle.getAttribute('aria-valuemax'));\n const size = Number(handle.getAttribute('aria-valuenow'));\n if (!id || (axis !== 'horizontal' && axis !== 'vertical') || (edge !== 'start' && edge !== 'end') || !Number.isFinite(min) || !Number.isFinite(max) || !Number.isFinite(size)) return undefined;\n return { region, handle, id, axis, edge, min, max, size };\n}\n\nfunction preview(state: RegionState, size: number, onPreview?: (change: ResizeCommit) => void) {\n const next = clampRegionSize(size, state.min, state.max);\n state.region.style.setProperty('--kui-resizable-region-size', `${next}px`);\n state.handle.setAttribute('aria-valuenow', String(next));\n onPreview?.({ id: state.id, size: next, source: 'pointer' });\n return next;\n}\n\n/** Wire pointer and separator-keyboard behavior for every ResizableRegion below root. */\nexport function wireResizableRegions(root: HTMLElement, { step = 16, largeStep = 64, onPreview, onCommit }: WireResizableRegionsOptions) {\n let stopPointer: (() => void) | undefined;\n\n const stopKeydown = delegate(root, 'keydown', '[data-kui-resize-handle]', (event, handle) => {\n const keyboardEvent = event as KeyboardEvent;\n const state = regionState(handle);\n if (!state) return;\n let next: number | undefined;\n if (keyboardEvent.key === 'Home') next = state.min;\n if (keyboardEvent.key === 'End') next = state.max;\n const increment = keyboardEvent.shiftKey ? largeStep : step;\n if (state.axis === 'horizontal' && keyboardEvent.key === 'ArrowLeft') next = resizeRegionFromPointer(state.size, -increment, state.edge);\n if (state.axis === 'horizontal' && keyboardEvent.key === 'ArrowRight') next = resizeRegionFromPointer(state.size, increment, state.edge);\n if (state.axis === 'vertical' && keyboardEvent.key === 'ArrowUp') next = resizeRegionFromPointer(state.size, -increment, state.edge);\n if (state.axis === 'vertical' && keyboardEvent.key === 'ArrowDown') next = resizeRegionFromPointer(state.size, increment, state.edge);\n if (next === undefined) return;\n keyboardEvent.preventDefault();\n const size = clampRegionSize(next, state.min, state.max);\n state.region.style.setProperty('--kui-resizable-region-size', `${size}px`);\n state.handle.setAttribute('aria-valuenow', String(size));\n onCommit({ id: state.id, size, source: 'keyboard' });\n });\n\n const stopPointerDown = delegate(root, 'pointerdown', '[data-kui-resize-handle]', (event, handle) => {\n const pointerEvent = event as PointerEvent;\n if (pointerEvent.button !== 0) return;\n const state = regionState(handle);\n if (!state) return;\n pointerEvent.preventDefault();\n state.handle.setPointerCapture?.(pointerEvent.pointerId);\n const startCoordinate = state.axis === 'horizontal' ? pointerEvent.clientX : pointerEvent.clientY;\n let next = state.size;\n const move = (moveEvent: PointerEvent) => {\n const coordinate = state.axis === 'horizontal' ? moveEvent.clientX : moveEvent.clientY;\n next = preview(state, resizeRegionFromPointer(state.size, coordinate - startCoordinate, state.edge), onPreview);\n };\n const finish = () => {\n root.removeEventListener('pointermove', move);\n root.removeEventListener('pointerup', finish);\n root.removeEventListener('pointercancel', finish);\n stopPointer = undefined;\n onCommit({ id: state.id, size: next, source: 'pointer' });\n };\n stopPointer?.();\n stopPointer = finish;\n root.addEventListener('pointermove', move);\n root.addEventListener('pointerup', finish, { once: true });\n root.addEventListener('pointercancel', finish, { once: true });\n });\n\n return () => {\n stopPointer?.();\n stopKeydown();\n stopPointerDown();\n };\n}\n"]}
|
package/dist/chunk-B24C4A6T.js
DELETED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'kerfjs/jsx-runtime';
|
|
2
|
-
|
|
3
|
-
// src/skeleton.tsx
|
|
4
|
-
function blockStyle(width, height, radius) {
|
|
5
|
-
const parts = [
|
|
6
|
-
width && `width:${width}`,
|
|
7
|
-
height && `height:${height}`,
|
|
8
|
-
radius && `--kui-skeleton-radius:${radius}`
|
|
9
|
-
].filter(Boolean);
|
|
10
|
-
return parts.length ? parts.join(";") : void 0;
|
|
11
|
-
}
|
|
12
|
-
function Skeleton({ width, height, radius, lines, label, className = "" }) {
|
|
13
|
-
const a11y = { role: label ? "img" : void 0, "aria-label": label, "aria-hidden": label ? void 0 : "true" };
|
|
14
|
-
if (lines && lines > 1) {
|
|
15
|
-
return /* @__PURE__ */ jsx("span", { class: `kui-skeleton-lines ${className}`.trim(), "data-component": "skeleton", style: width ? `width:${width}` : void 0, ...a11y, children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx("span", { class: "kui-skeleton", "aria-hidden": "true", style: blockStyle(index === lines - 1 ? "60%" : void 0, height, radius) })) });
|
|
16
|
-
}
|
|
17
|
-
return /* @__PURE__ */ jsx("span", { class: `kui-skeleton ${className}`.trim(), "data-component": "skeleton", style: blockStyle(width, height, radius), ...a11y });
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
export { Skeleton };
|
|
21
|
-
|
|
22
|
-
//# sourceMappingURL=chunk-B24C4A6T.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/skeleton.tsx"],"names":[],"mappings":";;;AAcA,SAAS,UAAA,CAAW,KAAA,EAAgB,MAAA,EAAiB,MAAA,EAAqC;AACxF,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,KAAA,IAAS,SAAS,KAAK,CAAA,CAAA;AAAA,IACvB,MAAA,IAAU,UAAU,MAAM,CAAA,CAAA;AAAA,IAC1B,MAAA,IAAU,yBAAyB,MAAM,CAAA;AAAA,GAC3C,CAAE,OAAO,OAAO,CAAA;AAChB,EAAA,OAAO,KAAA,CAAM,MAAA,GAAS,KAAA,CAAM,IAAA,CAAK,GAAG,CAAA,GAAI,MAAA;AAC1C;AAQO,SAAS,QAAA,CAAS,EAAE,KAAA,EAAO,MAAA,EAAQ,QAAQ,KAAA,EAAO,KAAA,EAAO,SAAA,GAAY,EAAA,EAAG,EAAkB;AAC/F,EAAA,MAAM,IAAA,GAAO,EAAE,IAAA,EAAM,KAAA,GAAQ,KAAA,GAAQ,MAAA,EAAW,YAAA,EAAc,KAAA,EAAO,aAAA,EAAe,KAAA,GAAQ,MAAA,GAAa,MAAA,EAAiB;AAC1H,EAAA,IAAI,KAAA,IAAS,QAAQ,CAAA,EAAG;AACtB,IAAA,uBAAO,GAAA,CAAC,UAAK,KAAA,EAAO,CAAA,mBAAA,EAAsB,SAAS,CAAA,CAAA,CAAG,IAAA,IAAQ,gBAAA,EAAe,UAAA,EAAW,OAAO,KAAA,GAAQ,CAAA,MAAA,EAAS,KAAK,CAAA,CAAA,GAAK,MAAA,EAAY,GAAG,IAAA,EACtI,QAAA,EAAA,KAAA,CAAM,KAAK,EAAE,MAAA,EAAQ,OAAM,EAAG,CAAC,GAAG,KAAA,qBAAU,GAAA,CAAC,UAAK,KAAA,EAAM,cAAA,EAAe,eAAY,MAAA,EAAO,KAAA,EAAO,WAAW,KAAA,KAAU,KAAA,GAAQ,IAAI,KAAA,GAAQ,MAAA,EAAW,QAAQ,MAAM,CAAA,EAAG,CAAO,CAAA,EAChL,CAAA;AAAA,EACF;AACA,EAAA,2BAAQ,MAAA,EAAA,EAAK,KAAA,EAAO,CAAA,aAAA,EAAgB,SAAS,GAAG,IAAA,EAAK,EAAG,gBAAA,EAAe,UAAA,EAAW,OAAO,UAAA,CAAW,KAAA,EAAO,QAAQ,MAAM,CAAA,EAAI,GAAG,IAAA,EAAM,CAAA;AACxI","file":"chunk-B24C4A6T.js","sourcesContent":["export interface SkeletonProps {\n /** Width as any CSS length (e.g. `remify(120px)`, `60%`). Defaults to filling its slot. */\n width?: string;\n /** Height as any CSS length. Defaults to a single text line. */\n height?: string;\n /** Corner radius override (a CSS length). Defaults to the small radius token. */\n radius?: string;\n /** Render this many stacked lines (the last one shorter), for multi-line text. */\n lines?: number;\n /** Accessible label. Omit to keep the block decorative (`aria-hidden`). */\n label?: string;\n className?: string;\n}\n\nfunction blockStyle(width?: string, height?: string, radius?: string): string | undefined {\n const parts = [\n width && `width:${width}`,\n height && `height:${height}`,\n radius && `--kui-skeleton-radius:${radius}`,\n ].filter(Boolean);\n return parts.length ? parts.join(';') : undefined;\n}\n\n/**\n * A subtle, deliberately **unanimated** loading placeholder block. Use it for a\n * value slot whose content is not yet known, on its own or via a component's\n * `placeholder` prop. Decorative by default (`aria-hidden`); pass `label` to\n * announce it. Sizes to its slot unless `width`/`height` are given.\n */\nexport function Skeleton({ width, height, radius, lines, label, className = '' }: SkeletonProps) {\n const a11y = { role: label ? 'img' : undefined, 'aria-label': label, 'aria-hidden': label ? undefined : ('true' as const) };\n if (lines && lines > 1) {\n return <span class={`kui-skeleton-lines ${className}`.trim()} data-component=\"skeleton\" style={width ? `width:${width}` : undefined} {...a11y}>\n {Array.from({ length: lines }, (_, index) => <span class=\"kui-skeleton\" aria-hidden=\"true\" style={blockStyle(index === lines - 1 ? '60%' : undefined, height, radius)}></span>)}\n </span>;\n }\n return <span class={`kui-skeleton ${className}`.trim()} data-component=\"skeleton\" style={blockStyle(width, height, radius)} {...a11y}></span>;\n}\n"]}
|
package/dist/chunk-BLK3UEEI.js
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { ToolbarText } from './chunk-RUNWEPR4.js';
|
|
2
|
-
import { jsxs, jsx } from 'kerfjs/jsx-runtime';
|
|
3
|
-
|
|
4
|
-
function NavStack({ id, label, views, backLabel = "Back", hideToolbar = false, bottomToolbar, className = "" }) {
|
|
5
|
-
const topIndex = views.length - 1;
|
|
6
|
-
const top = views[topIndex];
|
|
7
|
-
const canPop = views.length > 1;
|
|
8
|
-
return /* @__PURE__ */ jsxs("section", { class: `kui-nav-stack ${className}`.trim(), id, "data-component": "nav-stack", "data-nav-stack-id": id, "data-depth": String(views.length), "aria-label": label, children: [
|
|
9
|
-
!hideToolbar && /* @__PURE__ */ jsxs("header", { class: "kui-nav-stack__chrome", "data-nav-stack-chrome": true, children: [
|
|
10
|
-
/* @__PURE__ */ jsxs("div", { class: "kui-nav-stack__lead", children: [
|
|
11
|
-
canPop && /* @__PURE__ */ jsx("button", { type: "button", class: "kui-nav-stack__back", "data-nav-back": true, "aria-label": backLabel, children: /* @__PURE__ */ jsx("svg", { class: "kui-nav-stack__back-icon", viewBox: "0 0 24 24", width: "18", height: "18", "aria-hidden": "true", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" }) }) }),
|
|
12
|
-
/* @__PURE__ */ jsx(ToolbarText, { text: top?.title ?? "", size: "large", className: "kui-nav-stack__title" })
|
|
13
|
-
] }),
|
|
14
|
-
top?.toolbar && /* @__PURE__ */ jsx("div", { class: "kui-nav-stack__actions", children: top.toolbar })
|
|
15
|
-
] }),
|
|
16
|
-
/* @__PURE__ */ jsx("div", { class: "kui-nav-stack__viewport", "data-nav-stack-viewport": true, children: views.map((view, index) => /* @__PURE__ */ jsx("article", { class: "kui-nav-stack__view", "data-key": view.key, "data-nav-key": view.key, "data-nav-active": String(index === topIndex), "aria-hidden": String(index !== topIndex), children: view.content })) }),
|
|
17
|
-
bottomToolbar && /* @__PURE__ */ jsx("footer", { class: "kui-nav-stack__bottom", "data-nav-stack-bottom": true, children: bottomToolbar })
|
|
18
|
-
] });
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
export { NavStack };
|
|
22
|
-
|
|
23
|
-
//# sourceMappingURL=chunk-BLK3UEEI.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/nav-stack.tsx"],"names":[],"mappings":";;;AAuCO,SAAS,QAAA,CAAS,EAAE,EAAA,EAAI,KAAA,EAAO,KAAA,EAAO,SAAA,GAAY,MAAA,EAAQ,WAAA,GAAc,KAAA,EAAO,aAAA,EAAe,SAAA,GAAY,EAAA,EAAG,EAAkB;AACpI,EAAA,MAAM,QAAA,GAAW,MAAM,MAAA,GAAS,CAAA;AAChC,EAAA,MAAM,GAAA,GAAM,MAAM,QAAQ,CAAA;AAC1B,EAAA,MAAM,MAAA,GAAS,MAAM,MAAA,GAAS,CAAA;AAC9B,EAAA,4BAAQ,SAAA,EAAA,EAAQ,KAAA,EAAO,iBAAiB,SAAS,CAAA,CAAA,CAAG,MAAK,EAAG,EAAA,EAAQ,kBAAe,WAAA,EAAY,mBAAA,EAAmB,IAAI,YAAA,EAAY,MAAA,CAAO,MAAM,MAAM,CAAA,EAAG,cAAY,KAAA,EACjK,QAAA,EAAA;AAAA,IAAA,CAAC,+BAAe,IAAA,CAAC,QAAA,EAAA,EAAO,KAAA,EAAM,uBAAA,EAAwB,yBAAqB,IAAA,EAC1E,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,OAAM,qBAAA,EACR,QAAA,EAAA;AAAA,QAAA,MAAA,wBAAW,QAAA,EAAA,EAAO,IAAA,EAAK,QAAA,EAAS,KAAA,EAAM,uBAAsB,eAAA,EAAa,IAAA,EAAC,YAAA,EAAY,SAAA,EACrF,8BAAC,KAAA,EAAA,EAAI,KAAA,EAAM,0BAAA,EAA2B,OAAA,EAAQ,aAAY,KAAA,EAAM,IAAA,EAAK,MAAA,EAAO,IAAA,EAAK,eAAY,MAAA,EAAO,IAAA,EAAK,MAAA,EAAO,MAAA,EAAO,gBAAe,cAAA,EAAa,GAAA,EAAI,gBAAA,EAAe,OAAA,EAAQ,mBAAgB,OAAA,EAAQ,QAAA,kBAAA,GAAA,CAAC,UAAK,CAAA,EAAE,gBAAA,EAAiB,GAAE,CAAA,EACnO,CAAA;AAAA,wBACA,GAAA,CAAC,eAAY,IAAA,EAAM,GAAA,EAAK,SAAS,EAAA,EAAI,IAAA,EAAK,OAAA,EAAQ,SAAA,EAAU,sBAAA,EAAuB;AAAA,OAAA,EACrF,CAAA;AAAA,MACC,KAAK,OAAA,oBAAW,GAAA,CAAC,SAAI,KAAA,EAAM,wBAAA,EAA0B,cAAI,OAAA,EAAQ;AAAA,KAAA,EACpE,CAAA;AAAA,oBACA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,yBAAA,EAA0B,2BAAuB,IAAA,EACzD,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,MAAM,KAAA,qBAAU,GAAA,CAAC,SAAA,EAAA,EAAQ,KAAA,EAAM,uBAAsB,UAAA,EAAU,IAAA,CAAK,GAAA,EAAK,cAAA,EAAc,IAAA,CAAK,GAAA,EAAK,iBAAA,EAAiB,MAAA,CAAO,UAAU,QAAQ,CAAA,EAAG,aAAA,EAAa,MAAA,CAAO,UAAU,QAAQ,CAAA,EAAI,QAAA,EAAA,IAAA,CAAK,OAAA,EAAQ,CAAU,CAAA,EAC7N,CAAA;AAAA,IACC,iCAAiB,GAAA,CAAC,QAAA,EAAA,EAAO,OAAM,uBAAA,EAAwB,uBAAA,EAAqB,MAAE,QAAA,EAAA,aAAA,EAAc;AAAA,GAAA,EAC/F,CAAA;AACF","file":"chunk-BLK3UEEI.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { ToolbarText } from './toolbar-text.js';\n\n/**\n * One entry in a {@link NavStack}. The app owns the stack as an array (usually a\n * signal); `NavStack` renders it and `wireNavStack` animates the transitions.\n */\nexport interface NavStackView {\n /** Stable identity for keyed reconcile and transition direction. */\n key: string;\n content: SafeHtml;\n /** Title shown in the top toolbar for this view. */\n title?: string;\n /** Trailing actions for this view's top toolbar. */\n toolbar?: SafeHtml;\n}\n\nexport interface NavStackProps {\n id: string;\n /** Accessible name for the stack region. */\n label: string;\n /** The stack, root first; the last entry is the active top view. */\n views: NavStackView[];\n /** Accessible label for the back control (default \"Back\"). */\n backLabel?: string;\n /** Hide the top toolbar entirely (rare — a fully custom-chrome view). */\n hideToolbar?: boolean;\n /** Optional persistent bottom toolbar. */\n bottomToolbar?: SafeHtml;\n className?: string;\n}\n\n/**\n * A navigation stack (iOS-style push/pop). Renders every entry stacked, the last\n * one active; `@kerfjs/ui/wire-nav-stack`'s `wireNavStack` slides the content and\n * cross-fades the chrome across a change. A single-pane layout is a `NavStack`\n * with one entry. See `docs/23-app-layouts.md` §3.1.\n */\nexport function NavStack({ id, label, views, backLabel = 'Back', hideToolbar = false, bottomToolbar, className = '' }: NavStackProps) {\n const topIndex = views.length - 1;\n const top = views[topIndex];\n const canPop = views.length > 1;\n return <section class={`kui-nav-stack ${className}`.trim()} id={id} data-component=\"nav-stack\" data-nav-stack-id={id} data-depth={String(views.length)} aria-label={label}>\n {!hideToolbar && <header class=\"kui-nav-stack__chrome\" data-nav-stack-chrome>\n <div class=\"kui-nav-stack__lead\">\n {canPop && <button type=\"button\" class=\"kui-nav-stack__back\" data-nav-back aria-label={backLabel}>\n <svg class=\"kui-nav-stack__back-icon\" viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" aria-hidden=\"true\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m15 18-6-6 6-6\" /></svg>\n </button>}\n <ToolbarText text={top?.title ?? ''} size=\"large\" className=\"kui-nav-stack__title\" />\n </div>\n {top?.toolbar && <div class=\"kui-nav-stack__actions\">{top.toolbar}</div>}\n </header>}\n <div class=\"kui-nav-stack__viewport\" data-nav-stack-viewport>\n {views.map((view, index) => <article class=\"kui-nav-stack__view\" data-key={view.key} data-nav-key={view.key} data-nav-active={String(index === topIndex)} aria-hidden={String(index !== topIndex)}>{view.content}</article>)}\n </div>\n {bottomToolbar && <footer class=\"kui-nav-stack__bottom\" data-nav-stack-bottom>{bottomToolbar}</footer>}\n </section>;\n}\n"]}
|
package/dist/chunk-DAFFDO33.js
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { jsxs, jsx } from 'kerfjs/jsx-runtime';
|
|
2
|
-
|
|
3
|
-
// src/toolbar.tsx
|
|
4
|
-
function Toolbar({ leading, center, trailing, label, divider = true, className = "" }) {
|
|
5
|
-
return /* @__PURE__ */ jsxs("header", { class: `kui-toolbar ${className}`.trim(), "data-component": "toolbar", "data-divider": String(divider), "data-has-center": String(Boolean(center)), "aria-label": label, children: [
|
|
6
|
-
/* @__PURE__ */ jsx("div", { class: "kui-toolbar__leading", children: leading }),
|
|
7
|
-
/* @__PURE__ */ jsx("div", { class: "kui-toolbar__center", children: center }),
|
|
8
|
-
/* @__PURE__ */ jsx("div", { class: "kui-toolbar__trailing", children: trailing })
|
|
9
|
-
] });
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
export { Toolbar };
|
|
13
|
-
|
|
14
|
-
//# sourceMappingURL=chunk-DAFFDO33.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/toolbar.tsx"],"names":[],"mappings":";;;AAWO,SAAS,OAAA,CAAQ,EAAE,OAAA,EAAS,MAAA,EAAQ,QAAA,EAAU,OAAO,OAAA,GAAU,IAAA,EAAM,SAAA,GAAY,EAAA,EAAG,EAAiB;AAC1G,EAAA,uBAAO,IAAA,CAAC,YAAO,KAAA,EAAO,CAAA,YAAA,EAAe,SAAS,CAAA,CAAA,CAAG,IAAA,IAAQ,gBAAA,EAAe,SAAA,EAAU,gBAAc,MAAA,CAAO,OAAO,GAAG,iBAAA,EAAiB,MAAA,CAAO,QAAQ,MAAM,CAAC,CAAA,EAAG,YAAA,EAAY,KAAA,EACrK,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,sBAAA,EAAwB,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,oBAC3C,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,qBAAA,EAAuB,QAAA,EAAA,MAAA,EAAO,CAAA;AAAA,oBACzC,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,uBAAA,EAAyB,QAAA,EAAA,QAAA,EAAS;AAAA,GAAA,EAC/C,CAAA;AACF","file":"chunk-DAFFDO33.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nexport interface ToolbarProps {\n leading?: SafeHtml;\n center?: SafeHtml;\n trailing?: SafeHtml;\n label?: string;\n divider?: boolean;\n className?: string;\n}\n\nexport function Toolbar({ leading, center, trailing, label, divider = true, className = '' }: ToolbarProps) {\n return <header class={`kui-toolbar ${className}`.trim()} data-component=\"toolbar\" data-divider={String(divider)} data-has-center={String(Boolean(center))} aria-label={label}>\n <div class=\"kui-toolbar__leading\">{leading}</div>\n <div class=\"kui-toolbar__center\">{center}</div>\n <div class=\"kui-toolbar__trailing\">{trailing}</div>\n </header>;\n}\n"]}
|
package/dist/chunk-I7INRJO4.js
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { Skeleton } from './chunk-B24C4A6T.js';
|
|
2
|
-
import { jsxs, jsx } from 'kerfjs/jsx-runtime';
|
|
3
|
-
|
|
4
|
-
function StateBanner({ title, detail, icon, action, tone = "info", urgency = "status", className = "", placeholder = false }) {
|
|
5
|
-
return /* @__PURE__ */ jsxs("section", { class: `kui-state-banner ${className}`.trim(), "data-component": "state-banner", "data-tone": tone, "data-placeholder": placeholder ? "true" : void 0, role: urgency, "aria-live": urgency === "alert" ? "assertive" : "polite", "aria-busy": placeholder ? "true" : void 0, children: [
|
|
6
|
-
icon && /* @__PURE__ */ jsx("span", { class: "kui-state-banner__icon", children: icon }),
|
|
7
|
-
/* @__PURE__ */ jsxs("div", { class: "kui-state-banner__copy", children: [
|
|
8
|
-
/* @__PURE__ */ jsx("strong", { children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: "10em" }) : title }),
|
|
9
|
-
(placeholder || detail) && /* @__PURE__ */ jsx("span", { children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: "16em" }) : detail })
|
|
10
|
-
] }),
|
|
11
|
-
action && /* @__PURE__ */ jsx("div", { class: "kui-state-banner__action", children: action })
|
|
12
|
-
] });
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
export { StateBanner };
|
|
16
|
-
|
|
17
|
-
//# sourceMappingURL=chunk-I7INRJO4.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/state-banner.tsx"],"names":[],"mappings":";;;AAkBO,SAAS,WAAA,CAAY,EAAE,KAAA,EAAO,MAAA,EAAQ,MAAM,MAAA,EAAQ,IAAA,GAAO,MAAA,EAAQ,OAAA,GAAU,QAAA,EAAU,SAAA,GAAY,EAAA,EAAI,WAAA,GAAc,OAAM,EAAqB;AACrJ,EAAA,uBAAO,IAAA,CAAC,SAAA,EAAA,EAAQ,KAAA,EAAO,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK,EAAG,gBAAA,EAAe,cAAA,EAAe,WAAA,EAAW,IAAA,EAAM,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA,EAAW,IAAA,EAAM,OAAA,EAAS,WAAA,EAAW,OAAA,KAAY,OAAA,GAAU,WAAA,GAAc,QAAA,EAAU,WAAA,EAAW,WAAA,GAAc,MAAA,GAAS,MAAA,EACzQ,QAAA,EAAA;AAAA,IAAA,IAAA,oBAAQ,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,wBAAA,EAA0B,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,oBACpD,IAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,wBAAA,EAAyB,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,YAAQ,QAAA,EAAA,WAAA,mBAAc,GAAA,CAAC,YAAS,KAAA,EAAM,MAAA,EAAO,IAAK,KAAA,EAAM,CAAA;AAAA,MAAA,CAAW,WAAA,IAAe,MAAA,qBAAW,GAAA,CAAC,MAAA,EAAA,EAAM,QAAA,EAAA,WAAA,uBAAe,QAAA,EAAA,EAAS,KAAA,EAAM,MAAA,EAAO,CAAA,GAAK,MAAA,EAAO;AAAA,KAAA,EAAQ,CAAA;AAAA,IACjM,MAAA,oBAAU,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,4BAA4B,QAAA,EAAA,MAAA,EAAO;AAAA,GAAA,EAC3D,CAAA;AACF","file":"chunk-I7INRJO4.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { Skeleton } from './skeleton.js';\n\nexport type StateBannerTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';\n\nexport interface StateBannerProps {\n title: string;\n detail?: string;\n icon?: SafeHtml;\n action?: SafeHtml;\n tone?: StateBannerTone;\n urgency?: 'status' | 'alert';\n className?: string;\n /** Render the title and detail as unanimated loading skeletons, keeping the icon and tone. */\n placeholder?: boolean;\n}\n\nexport function StateBanner({ title, detail, icon, action, tone = 'info', urgency = 'status', className = '', placeholder = false }: StateBannerProps) {\n return <section class={`kui-state-banner ${className}`.trim()} data-component=\"state-banner\" data-tone={tone} data-placeholder={placeholder ? 'true' : undefined} role={urgency} aria-live={urgency === 'alert' ? 'assertive' : 'polite'} aria-busy={placeholder ? 'true' : undefined}>\n {icon && <span class=\"kui-state-banner__icon\">{icon}</span>}\n <div class=\"kui-state-banner__copy\"><strong>{placeholder ? <Skeleton width=\"10em\" /> : title}</strong>{(placeholder || detail) && <span>{placeholder ? <Skeleton width=\"16em\" /> : detail}</span>}</div>\n {action && <div class=\"kui-state-banner__action\">{action}</div>}\n </section>;\n}\n"]}
|
package/dist/chunk-L4OKFDJY.js
DELETED
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { filterDataAttributes } from './chunk-7BR3DO2A.js';
|
|
2
|
-
import { Skeleton } from './chunk-B24C4A6T.js';
|
|
3
|
-
import { jsxs, jsx } from 'kerfjs/jsx-runtime';
|
|
4
|
-
|
|
5
|
-
var PROTECTED_ROOT_DATA_ATTRIBUTES = /* @__PURE__ */ new Set([
|
|
6
|
-
"data-component",
|
|
7
|
-
"data-action",
|
|
8
|
-
"data-item-id",
|
|
9
|
-
"data-has-icon",
|
|
10
|
-
"data-multiline",
|
|
11
|
-
"data-state"
|
|
12
|
-
]);
|
|
13
|
-
function ListItem({ label, icon, trailing, selected = false, action, itemId, className = "", style, pressed, accessibleLabel, title, multiline = false, state, disabled = false, tabIndex, placeholder = false, rootAttributes = {} }) {
|
|
14
|
-
const extensionAttributes = filterDataAttributes(rootAttributes, PROTECTED_ROOT_DATA_ATTRIBUTES);
|
|
15
|
-
return /* @__PURE__ */ jsxs("button", { ...extensionAttributes, type: "button", class: `kui-list-item ${className}`.trim(), style, title: placeholder ? void 0 : title, disabled: disabled || placeholder, tabindex: placeholder ? -1 : tabIndex, "data-component": "list-item", "data-action": placeholder ? void 0 : action, "data-item-id": itemId, "data-has-icon": String(Boolean(icon)), "data-multiline": multiline ? "true" : void 0, "data-state": state, "data-placeholder": placeholder ? "true" : void 0, "aria-label": accessibleLabel, "aria-current": selected ? "page" : void 0, "aria-pressed": pressed === void 0 ? void 0 : String(pressed), "aria-busy": placeholder ? "true" : void 0, children: [
|
|
16
|
-
icon && /* @__PURE__ */ jsx("span", { class: "kui-list-item__icon", children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: "1em", height: "1em" }) : icon }),
|
|
17
|
-
/* @__PURE__ */ jsx("span", { class: "kui-list-item__label", children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: "9em" }) : label }),
|
|
18
|
-
trailing && /* @__PURE__ */ jsx("span", { class: "kui-list-item__trailing", children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: "2.5em" }) : trailing })
|
|
19
|
-
] });
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
export { ListItem };
|
|
23
|
-
|
|
24
|
-
//# sourceMappingURL=chunk-L4OKFDJY.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/list-item.tsx"],"names":[],"mappings":";;;;AAKA,IAAM,8BAAA,uBAAqC,GAAA,CAAI;AAAA,EAC7C,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA;AACF,CAAC,CAAA;AAkCM,SAAS,QAAA,CAAS,EAAE,KAAA,EAAO,IAAA,EAAM,QAAA,EAAU,QAAA,GAAW,KAAA,EAAO,MAAA,EAAQ,MAAA,EAAQ,SAAA,GAAY,EAAA,EAAI,KAAA,EAAO,OAAA,EAAS,iBAAiB,KAAA,EAAO,SAAA,GAAY,KAAA,EAAO,KAAA,EAAO,QAAA,GAAW,KAAA,EAAO,QAAA,EAAU,WAAA,GAAc,KAAA,EAAO,cAAA,GAAiB,EAAC,EAAE,EAAkB;AAC3P,EAAA,MAAM,mBAAA,GAAsB,oBAAA,CAAqB,cAAA,EAAgB,8BAA8B,CAAA;AAC/F,EAAA,uBAAO,IAAA,CAAC,QAAA,EAAA,EAAQ,GAAG,mBAAA,EAAqB,IAAA,EAAK,QAAA,EAAS,KAAA,EAAO,CAAA,cAAA,EAAiB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK,EAAG,OAAc,KAAA,EAAO,WAAA,GAAc,MAAA,GAAY,KAAA,EAAO,QAAA,EAAU,QAAA,IAAY,WAAA,EAAa,QAAA,EAAU,WAAA,GAAc,EAAA,GAAK,QAAA,EAAU,gBAAA,EAAe,WAAA,EAAY,aAAA,EAAa,WAAA,GAAc,MAAA,GAAY,QAAQ,cAAA,EAAc,MAAA,EAAQ,eAAA,EAAe,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,CAAA,EAAG,gBAAA,EAAgB,SAAA,GAAY,MAAA,GAAS,MAAA,EAAW,YAAA,EAAY,KAAA,EAAO,kBAAA,EAAkB,WAAA,GAAc,SAAS,MAAA,EAAW,YAAA,EAAY,eAAA,EAAiB,cAAA,EAAc,QAAA,GAAW,MAAA,GAAS,MAAA,EAAW,cAAA,EAAc,OAAA,KAAY,MAAA,GAAY,MAAA,GAAY,MAAA,CAAO,OAAO,CAAA,EAAG,WAAA,EAAW,WAAA,GAAc,SAAS,MAAA,EAC3oB,QAAA,EAAA;AAAA,IAAA,IAAA,oBAAQ,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,qBAAA,EAAuB,QAAA,EAAA,WAAA,mBAAc,GAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAM,KAAA,EAAM,MAAA,EAAO,KAAA,EAAM,CAAA,GAAK,IAAA,EAAK,CAAA;AAAA,oBACvG,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,sBAAA,EAAwB,QAAA,EAAA,WAAA,uBAAe,QAAA,EAAA,EAAS,KAAA,EAAM,KAAA,EAAM,CAAA,GAAK,KAAA,EAAM,CAAA;AAAA,IAClF,QAAA,oBAAY,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,yBAAA,EAA2B,QAAA,EAAA,WAAA,mBAAc,GAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAM,OAAA,EAAQ,CAAA,GAAK,QAAA,EAAS;AAAA,GAAA,EAC1G,CAAA;AACF","file":"chunk-L4OKFDJY.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { filterDataAttributes } from './extension-attributes.js';\nimport { Skeleton } from './skeleton.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n 'data-component',\n 'data-action',\n 'data-item-id',\n 'data-has-icon',\n 'data-multiline',\n 'data-state',\n]);\n\ntype ListItemRootAttributes = Readonly<\n Record<`data-${string}`, string | undefined> & {\n 'data-component'?: never;\n 'data-action'?: never;\n 'data-item-id'?: never;\n 'data-has-icon'?: never;\n 'data-multiline'?: never;\n 'data-state'?: never;\n }\n>;\n\nexport interface ListItemProps {\n label: string | SafeHtml;\n icon?: SafeHtml;\n trailing?: SafeHtml;\n selected?: boolean;\n action: string;\n itemId?: string;\n className?: string;\n style?: string;\n pressed?: boolean;\n accessibleLabel?: string;\n title?: string;\n multiline?: boolean;\n state?: string;\n disabled?: boolean;\n tabIndex?: number;\n /** Render the row as an unanimated loading skeleton, disabling its action. */\n placeholder?: boolean;\n rootAttributes?: ListItemRootAttributes;\n}\n\nexport function ListItem({ label, icon, trailing, selected = false, action, itemId, className = '', style, pressed, accessibleLabel, title, multiline = false, state, disabled = false, tabIndex, placeholder = false, rootAttributes = {} }: ListItemProps) {\n const extensionAttributes = filterDataAttributes(rootAttributes, PROTECTED_ROOT_DATA_ATTRIBUTES);\n return <button {...extensionAttributes} type=\"button\" class={`kui-list-item ${className}`.trim()} style={style} title={placeholder ? undefined : title} disabled={disabled || placeholder} tabindex={placeholder ? -1 : tabIndex} data-component=\"list-item\" data-action={placeholder ? undefined : action} data-item-id={itemId} data-has-icon={String(Boolean(icon))} data-multiline={multiline ? 'true' : undefined} data-state={state} data-placeholder={placeholder ? 'true' : undefined} aria-label={accessibleLabel} aria-current={selected ? 'page' : undefined} aria-pressed={pressed === undefined ? undefined : String(pressed)} aria-busy={placeholder ? 'true' : undefined}>\n {icon && <span class=\"kui-list-item__icon\">{placeholder ? <Skeleton width=\"1em\" height=\"1em\" /> : icon}</span>}\n <span class=\"kui-list-item__label\">{placeholder ? <Skeleton width=\"9em\" /> : label}</span>\n {trailing && <span class=\"kui-list-item__trailing\">{placeholder ? <Skeleton width=\"2.5em\" /> : trailing}</span>}\n </button>;\n}\n"]}
|
package/dist/chunk-LC3YSAZC.js
DELETED
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import { LucideIcon } from './chunk-W2FK7ZNY.js';
|
|
2
|
-
import { Skeleton } from './chunk-B24C4A6T.js';
|
|
3
|
-
import { ChevronDown } from 'lucide';
|
|
4
|
-
import { jsxs, jsx, Fragment } from 'kerfjs/jsx-runtime';
|
|
5
|
-
|
|
6
|
-
function Select({ name, value, label, ariaLabel, choices, className = "", placeholderText, disabled = false, fitMenu = false, renderSelected, placeholder = false }) {
|
|
7
|
-
if (placeholder) {
|
|
8
|
-
return /* @__PURE__ */ jsxs("div", { class: `kui-select kui-select--placeholder ${className}`.trim(), "data-component": "select", "data-placeholder": "true", "aria-busy": "true", children: [
|
|
9
|
-
label && /* @__PURE__ */ jsx("span", { class: "kui-select__placeholder-label", children: label }),
|
|
10
|
-
/* @__PURE__ */ jsxs("span", { class: "kui-select__placeholder-box", "aria-label": ariaLabel, role: "img", children: [
|
|
11
|
-
/* @__PURE__ */ jsx(Skeleton, { width: "10em" }),
|
|
12
|
-
/* @__PURE__ */ jsx("span", { class: "kui-select__placeholder-chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx(LucideIcon, { icon: ChevronDown, name: "chevron-down" }) })
|
|
13
|
-
] })
|
|
14
|
-
] });
|
|
15
|
-
}
|
|
16
|
-
const selected = choices.find((choice) => choice.value === value);
|
|
17
|
-
const icon = (choice, selectedIcon = false) => /* @__PURE__ */ jsx("span", { "data-key": `${name}:${choice.value}:${selectedIcon ? "selected" : "option"}`, "data-morph-skip": true, slot: "start", class: `kui-select__icon${selectedIcon ? " kui-select__icon--selected" : ""}`, style: choice.color ? `color:${choice.color}` : void 0, children: choice.icon ? /* @__PURE__ */ jsx(LucideIcon, { icon: choice.icon, name: choice.iconName ?? choice.label.toLowerCase().replaceAll(" ", "-") }) : null });
|
|
18
|
-
const option = (choice) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
19
|
-
choice.separatorBefore && /* @__PURE__ */ jsx("wa-divider", {}),
|
|
20
|
-
/* @__PURE__ */ jsxs("wa-option", { value: choice.value, children: [
|
|
21
|
-
choice.icon ? icon(choice) : null,
|
|
22
|
-
choice.label
|
|
23
|
-
] })
|
|
24
|
-
] });
|
|
25
|
-
const groups = [...new Set(choices.map((choice) => choice.group).filter((group) => Boolean(group)))];
|
|
26
|
-
const ungrouped = choices.filter((choice) => !choice.group);
|
|
27
|
-
return /* @__PURE__ */ jsxs("wa-select", { class: `kui-select${renderSelected ? " kui-select--custom-selected" : ""}${fitMenu ? " kui-select--fit-menu" : ""} ${className}`.trim(), "data-component": "select", name, label, "aria-label": ariaLabel, value, placeholder: placeholderText, disabled, children: [
|
|
28
|
-
selected && (renderSelected ? /* @__PURE__ */ jsx("span", { "data-key": `${name}:${value}:custom-selected`, slot: "start", class: "kui-select__custom-selected", children: renderSelected(selected) }) : selected.icon ? icon(selected, true) : null),
|
|
29
|
-
ungrouped.map(option),
|
|
30
|
-
groups.map((group, index) => /* @__PURE__ */ jsxs("div", { class: `kui-select__group${index > 0 || ungrouped.length > 0 ? " kui-select__group--separated" : ""}`, role: "group", "aria-label": group, children: [
|
|
31
|
-
/* @__PURE__ */ jsx("span", { class: "kui-select__group-title", children: group }),
|
|
32
|
-
choices.filter((choice) => choice.group === group).map(option)
|
|
33
|
-
] }))
|
|
34
|
-
] });
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
export { Select };
|
|
38
|
-
|
|
39
|
-
//# sourceMappingURL=chunk-LC3YSAZC.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/select.tsx"],"names":[],"mappings":"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","file":"chunk-LC3YSAZC.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport { ChevronDown } from 'lucide';\n\nimport { LucideIcon, type LucideNode } from './lucide-icon.js';\nimport { Skeleton } from './skeleton.js';\n\nexport interface SelectChoice<Value extends string = string> {\n value: Value;\n label: string;\n icon?: LucideNode;\n iconName?: string;\n color?: string;\n group?: string;\n separatorBefore?: boolean;\n}\n\nexport interface SelectProps<Value extends string = string> {\n name: string;\n value: Value;\n label?: string;\n ariaLabel?: string;\n choices: readonly SelectChoice<Value>[];\n className?: string;\n /** Empty-value hint text shown in the closed control (the native select placeholder). */\n placeholderText?: string;\n disabled?: boolean;\n fitMenu?: boolean;\n renderSelected?: (choice: SelectChoice<Value>) => SafeHtml;\n /** Render as an unanimated loading skeleton: the label above a static, empty control box. */\n placeholder?: boolean;\n}\n\nexport function Select<Value extends string>({ name, value, label, ariaLabel, choices, className = '', placeholderText, disabled = false, fitMenu = false, renderSelected, placeholder = false }: SelectProps<Value>) {\n if (placeholder) {\n return <div class={`kui-select kui-select--placeholder ${className}`.trim()} data-component=\"select\" data-placeholder=\"true\" aria-busy=\"true\">\n {label && <span class=\"kui-select__placeholder-label\">{label}</span>}\n <span class=\"kui-select__placeholder-box\" aria-label={ariaLabel} role=\"img\">\n <Skeleton width=\"10em\" />\n <span class=\"kui-select__placeholder-chevron\" aria-hidden=\"true\"><LucideIcon icon={ChevronDown} name=\"chevron-down\" /></span>\n </span>\n </div>;\n }\n const selected = choices.find((choice) => choice.value === value);\n const icon = (choice: SelectChoice<Value>, selectedIcon = false) => <span data-key={`${name}:${choice.value}:${selectedIcon ? 'selected' : 'option'}`} data-morph-skip slot=\"start\" class={`kui-select__icon${selectedIcon ? ' kui-select__icon--selected' : ''}`} style={choice.color ? `color:${choice.color}` : undefined}>{choice.icon ? <LucideIcon icon={choice.icon} name={choice.iconName ?? choice.label.toLowerCase().replaceAll(' ', '-')} /> : null}</span>;\n const option = (choice: SelectChoice<Value>) => <>{choice.separatorBefore && <wa-divider></wa-divider>}<wa-option value={choice.value}>{choice.icon ? icon(choice) : null}{choice.label}</wa-option></>;\n const groups = [...new Set(choices.map((choice) => choice.group).filter((group): group is string => Boolean(group)))];\n const ungrouped = choices.filter((choice) => !choice.group);\n return <wa-select class={`kui-select${renderSelected ? ' kui-select--custom-selected' : ''}${fitMenu ? ' kui-select--fit-menu' : ''} ${className}`.trim()} data-component=\"select\" name={name} label={label} aria-label={ariaLabel} value={value} placeholder={placeholderText} disabled={disabled}>\n {selected && (renderSelected ? <span data-key={`${name}:${value}:custom-selected`} slot=\"start\" class=\"kui-select__custom-selected\">{renderSelected(selected)}</span> : selected.icon ? icon(selected, true) : null)}\n {ungrouped.map(option)}\n {groups.map((group, index) => <div class={`kui-select__group${index > 0 || ungrouped.length > 0 ? ' kui-select__group--separated' : ''}`} role=\"group\" aria-label={group}><span class=\"kui-select__group-title\">{group}</span>{choices.filter((choice) => choice.group === group).map(option)}</div>)}\n </wa-select>;\n}\n"]}
|
package/dist/chunk-M5JRI6MN.js
DELETED
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import { jsxs, jsx, Fragment } from 'kerfjs/jsx-runtime';
|
|
2
|
-
|
|
3
|
-
// src/resizable-region.tsx
|
|
4
|
-
var clampRegionSize = (size, min, max) => Math.min(max, Math.max(min, Math.round(size)));
|
|
5
|
-
var resizeRegionFromPointer = (startSize, delta, edge) => startSize + delta * (edge === "start" ? -1 : 1);
|
|
6
|
-
function ResizeGrip({ axis }) {
|
|
7
|
-
return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", children: axis === "horizontal" ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
8
|
-
/* @__PURE__ */ jsx("path", { d: "M9 6v12" }),
|
|
9
|
-
/* @__PURE__ */ jsx("path", { d: "M15 6v12" })
|
|
10
|
-
] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
11
|
-
/* @__PURE__ */ jsx("path", { d: "M6 9h12" }),
|
|
12
|
-
/* @__PURE__ */ jsx("path", { d: "M6 15h12" })
|
|
13
|
-
] }) });
|
|
14
|
-
}
|
|
15
|
-
function ResizableRegion({ id, label, size, min, max, axis = "horizontal", edge = "end", collapsed = false, transitioning = false, handleIcon, children }) {
|
|
16
|
-
const expandedSize = clampRegionSize(size, min, max);
|
|
17
|
-
const resolved = collapsed ? 0 : expandedSize;
|
|
18
|
-
const orientation = axis === "horizontal" ? "vertical" : "horizontal";
|
|
19
|
-
return /* @__PURE__ */ jsxs("section", { class: "kui-resizable-region", "data-component": "resizable-region", "data-region-id": id, "data-axis": axis, "data-edge": edge, "data-collapsed": String(collapsed), "data-transitioning": String(transitioning), style: `--kui-resizable-region-size:${resolved}px;--kui-resizable-region-expanded-size:${expandedSize}px`, "aria-label": label, children: [
|
|
20
|
-
/* @__PURE__ */ jsx("div", { class: "kui-resizable-region__content", children }),
|
|
21
|
-
/* @__PURE__ */ jsx("div", { class: "kui-resizable-region__handle", role: "separator", tabindex: "0", "aria-label": `Resize ${label}`, "aria-orientation": orientation, "aria-valuemin": collapsed ? 0 : min, "aria-valuemax": max, "aria-valuenow": resolved, "data-kui-resize-handle": true, "data-region-id": id, children: /* @__PURE__ */ jsx("span", { class: "kui-resizable-region__handle-icon", "aria-hidden": "true", children: handleIcon ?? /* @__PURE__ */ jsx(ResizeGrip, { axis }) }) })
|
|
22
|
-
] });
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
export { ResizableRegion, clampRegionSize, resizeRegionFromPointer };
|
|
26
|
-
|
|
27
|
-
//# sourceMappingURL=chunk-M5JRI6MN.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/resizable-region.tsx"],"names":[],"mappings":";;;AAoBO,IAAM,eAAA,GAAkB,CAAC,IAAA,EAAc,GAAA,EAAa,QAAgB,IAAA,CAAK,GAAA,CAAI,GAAA,EAAK,IAAA,CAAK,IAAI,GAAA,EAAK,IAAA,CAAK,KAAA,CAAM,IAAI,CAAC,CAAC;AACjH,IAAM,uBAAA,GAA0B,CAAC,SAAA,EAAmB,KAAA,EAAe,SAA8B,SAAA,GAAY,KAAA,IAAS,IAAA,KAAS,OAAA,GAAU,EAAA,GAAK,CAAA;AAErJ,SAAS,UAAA,CAAW,EAAE,IAAA,EAAK,EAAkC;AAC3D,EAAA,2BAAQ,KAAA,EAAA,EAAI,aAAA,EAAY,MAAA,EAAO,OAAA,EAAQ,aAAY,IAAA,EAAK,MAAA,EAAO,MAAA,EAAO,cAAA,EAAe,gBAAa,GAAA,EAAI,gBAAA,EAAe,OAAA,EAClH,QAAA,EAAA,IAAA,KAAS,+BACN,IAAA,CAAA,QAAA,EAAA,EAAE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,GAAE,SAAA,EAAU,CAAA;AAAA,oBAAO,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,UAAA,EAAW;AAAA,GAAA,EAAO,oBACrD,IAAA,CAAA,QAAA,EAAA,EAAE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,GAAE,SAAA,EAAU,CAAA;AAAA,oBAAO,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,UAAA,EAAW;AAAA,GAAA,EAAO,CAAA,EAC3D,CAAA;AACF;AAEO,SAAS,gBAAgB,EAAE,EAAA,EAAI,KAAA,EAAO,IAAA,EAAM,KAAK,GAAA,EAAK,IAAA,GAAO,YAAA,EAAc,IAAA,GAAO,OAAO,SAAA,GAAY,KAAA,EAAO,gBAAgB,KAAA,EAAO,UAAA,EAAY,UAAS,EAAyB;AACtL,EAAA,MAAM,YAAA,GAAe,eAAA,CAAgB,IAAA,EAAM,GAAA,EAAK,GAAG,CAAA;AACnD,EAAA,MAAM,QAAA,GAAW,YAAY,CAAA,GAAI,YAAA;AACjC,EAAA,MAAM,WAAA,GAAc,IAAA,KAAS,YAAA,GAAe,UAAA,GAAa,YAAA;AACzD,EAAA,uBAAO,IAAA,CAAC,SAAA,EAAA,EAAQ,KAAA,EAAM,sBAAA,EAAuB,gBAAA,EAAe,kBAAA,EAAmB,gBAAA,EAAgB,EAAA,EAAI,WAAA,EAAW,IAAA,EAAM,WAAA,EAAW,IAAA,EAAM,gBAAA,EAAgB,MAAA,CAAO,SAAS,CAAA,EAAG,oBAAA,EAAoB,MAAA,CAAO,aAAa,CAAA,EAAG,KAAA,EAAO,CAAA,4BAAA,EAA+B,QAAQ,CAAA,wCAAA,EAA2C,YAAY,CAAA,EAAA,CAAA,EAAM,YAAA,EAAY,KAAA,EACxU,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,+BAAA,EAAiC,QAAA,EAAS,CAAA;AAAA,wBACpD,KAAA,EAAA,EAAI,KAAA,EAAM,8BAAA,EAA+B,IAAA,EAAK,aAAY,QAAA,EAAS,GAAA,EAAI,YAAA,EAAY,CAAA,OAAA,EAAU,KAAK,CAAA,CAAA,EAAI,kBAAA,EAAkB,WAAA,EAAa,eAAA,EAAe,YAAY,CAAA,GAAI,GAAA,EAAK,eAAA,EAAe,GAAA,EAAK,iBAAe,QAAA,EAAU,wBAAA,EAAsB,IAAA,EAAC,gBAAA,EAAgB,IAC5P,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,mCAAA,EAAoC,eAAY,MAAA,EAAQ,QAAA,EAAA,UAAA,wBAAe,UAAA,EAAA,EAAW,IAAA,EAAY,GAAG,CAAA,EAC/G;AAAA,GAAA,EACF,CAAA;AACF","file":"chunk-M5JRI6MN.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nexport type ResizableRegionAxis = 'horizontal' | 'vertical';\nexport type ResizableRegionEdge = 'start' | 'end';\n\nexport interface ResizableRegionProps {\n id: string;\n label: string;\n size: number;\n min: number;\n max: number;\n axis?: ResizableRegionAxis;\n edge?: ResizableRegionEdge;\n collapsed?: boolean;\n transitioning?: boolean;\n /** Decorative dormant content for the separator handle. Must not contain interactive descendants. */\n handleIcon?: SafeHtml;\n children: SafeHtml | SafeHtml[];\n}\n\nexport const clampRegionSize = (size: number, min: number, max: number) => Math.min(max, Math.max(min, Math.round(size)));\nexport const resizeRegionFromPointer = (startSize: number, delta: number, edge: ResizableRegionEdge) => startSize + delta * (edge === 'start' ? -1 : 1);\n\nfunction ResizeGrip({ axis }: { axis: ResizableRegionAxis }) {\n return <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n {axis === 'horizontal'\n ? <><path d=\"M9 6v12\"></path><path d=\"M15 6v12\"></path></>\n : <><path d=\"M6 9h12\"></path><path d=\"M6 15h12\"></path></>}\n </svg>;\n}\n\nexport function ResizableRegion({ id, label, size, min, max, axis = 'horizontal', edge = 'end', collapsed = false, transitioning = false, handleIcon, children }: ResizableRegionProps) {\n const expandedSize = clampRegionSize(size, min, max);\n const resolved = collapsed ? 0 : expandedSize;\n const orientation = axis === 'horizontal' ? 'vertical' : 'horizontal';\n return <section class=\"kui-resizable-region\" data-component=\"resizable-region\" data-region-id={id} data-axis={axis} data-edge={edge} data-collapsed={String(collapsed)} data-transitioning={String(transitioning)} style={`--kui-resizable-region-size:${resolved}px;--kui-resizable-region-expanded-size:${expandedSize}px`} aria-label={label}>\n <div class=\"kui-resizable-region__content\">{children}</div>\n <div class=\"kui-resizable-region__handle\" role=\"separator\" tabindex=\"0\" aria-label={`Resize ${label}`} aria-orientation={orientation} aria-valuemin={collapsed ? 0 : min} aria-valuemax={max} aria-valuenow={resolved} data-kui-resize-handle data-region-id={id}>\n <span class=\"kui-resizable-region__handle-icon\" aria-hidden=\"true\">{handleIcon ?? <ResizeGrip axis={axis} />}</span>\n </div>\n </section>;\n}\n"]}
|
package/dist/chunk-MBR3TYNL.js
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { jsxs, jsx } from 'kerfjs/jsx-runtime';
|
|
2
|
-
|
|
3
|
-
// src/tab-bar.tsx
|
|
4
|
-
function TabBar({ id, label, children, leading, trailing, className = "" }) {
|
|
5
|
-
return /* @__PURE__ */ jsxs("nav", { class: `kui-tab-bar ${className}`.trim(), "data-component": "tab-bar", "data-tab-bar-id": id, "aria-label": label, children: [
|
|
6
|
-
leading && /* @__PURE__ */ jsx("div", { class: "kui-tab-bar__leading", children: leading }),
|
|
7
|
-
/* @__PURE__ */ jsx("div", { class: "kui-tab-bar__tabs", role: "tablist", "aria-label": label, "data-kui-tab-list": true, children }),
|
|
8
|
-
trailing && /* @__PURE__ */ jsx("div", { class: "kui-tab-bar__trailing", children: trailing })
|
|
9
|
-
] });
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
export { TabBar };
|
|
13
|
-
|
|
14
|
-
//# sourceMappingURL=chunk-MBR3TYNL.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/tab-bar.tsx"],"names":[],"mappings":";;;AAYO,SAAS,MAAA,CAAO,EAAE,EAAA,EAAI,KAAA,EAAO,UAAU,OAAA,EAAS,QAAA,EAAU,SAAA,GAAY,EAAA,EAAG,EAAgB;AAC9F,EAAA,uBAAO,IAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,CAAA,YAAA,EAAe,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK,EAAG,gBAAA,EAAe,SAAA,EAAU,iBAAA,EAAiB,EAAA,EAAI,cAAY,KAAA,EAC7G,QAAA,EAAA;AAAA,IAAA,OAAA,oBAAW,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,sBAAA,EAAwB,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,oBACvD,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,mBAAA,EAAoB,IAAA,EAAK,WAAU,YAAA,EAAY,KAAA,EAAO,mBAAA,EAAiB,IAAA,EAAE,QAAA,EAAS,CAAA;AAAA,IAC5F,QAAA,oBAAY,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,yBAAyB,QAAA,EAAA,QAAA,EAAS;AAAA,GAAA,EAC5D,CAAA;AACF","file":"chunk-MBR3TYNL.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nexport interface TabBarProps {\n id: string;\n label: string;\n children: SafeHtml | readonly SafeHtml[];\n leading?: SafeHtml;\n trailing?: SafeHtml;\n className?: string;\n}\n\n/** Render a controlled tab strip. The application owns selection, order, and persistence. */\nexport function TabBar({ id, label, children, leading, trailing, className = '' }: TabBarProps) {\n return <nav class={`kui-tab-bar ${className}`.trim()} data-component=\"tab-bar\" data-tab-bar-id={id} aria-label={label}>\n {leading && <div class=\"kui-tab-bar__leading\">{leading}</div>}\n <div class=\"kui-tab-bar__tabs\" role=\"tablist\" aria-label={label} data-kui-tab-list>{children}</div>\n {trailing && <div class=\"kui-tab-bar__trailing\">{trailing}</div>}\n </nav>;\n}\n"]}
|
package/dist/chunk-MFKMHK5W.js
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'kerfjs/jsx-runtime';
|
|
2
|
-
|
|
3
|
-
// src/toolbar-control-group.tsx
|
|
4
|
-
function ToolbarControlGroup({ children, label, className = "", expanded = false, single = false, appearance = "contained", tone = "default", buttonAppearance = "plain" }) {
|
|
5
|
-
return /* @__PURE__ */ jsx("div", { class: `kui-toolbar-control-group ${className}`.trim(), "data-component": "toolbar-control-group", role: label ? "group" : void 0, "aria-label": label, "data-appearance": appearance, "data-tone": tone, "data-button-appearance": buttonAppearance, "data-expanded": String(expanded), "data-single": String(single), children });
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
export { ToolbarControlGroup };
|
|
9
|
-
|
|
10
|
-
//# sourceMappingURL=chunk-MFKMHK5W.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/toolbar-control-group.tsx"],"names":[],"mappings":";;;AAaO,SAAS,oBAAoB,EAAE,QAAA,EAAU,KAAA,EAAO,SAAA,GAAY,IAAI,QAAA,GAAW,KAAA,EAAO,MAAA,GAAS,KAAA,EAAO,aAAa,WAAA,EAAa,IAAA,GAAO,SAAA,EAAW,gBAAA,GAAmB,SAAQ,EAA6B;AAC3M,EAAA,uBAAO,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,CAAA,0BAAA,EAA6B,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK,EAAG,gBAAA,EAAe,uBAAA,EAAwB,IAAA,EAAM,KAAA,GAAQ,UAAU,MAAA,EAAW,YAAA,EAAY,KAAA,EAAO,iBAAA,EAAiB,UAAA,EAAY,WAAA,EAAW,IAAA,EAAM,wBAAA,EAAwB,gBAAA,EAAkB,eAAA,EAAe,MAAA,CAAO,QAAQ,CAAA,EAAG,aAAA,EAAa,MAAA,CAAO,MAAM,GAAI,QAAA,EAAS,CAAA;AACnU","file":"chunk-MFKMHK5W.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nexport interface ToolbarControlGroupProps {\n children: SafeHtml | SafeHtml[];\n label?: string;\n className?: string;\n expanded?: boolean;\n single?: boolean;\n appearance?: 'contained' | 'borderless';\n tone?: 'default' | 'dark';\n buttonAppearance?: 'plain' | 'push';\n}\n\nexport function ToolbarControlGroup({ children, label, className = '', expanded = false, single = false, appearance = 'contained', tone = 'default', buttonAppearance = 'plain' }: ToolbarControlGroupProps) {\n return <div class={`kui-toolbar-control-group ${className}`.trim()} data-component=\"toolbar-control-group\" role={label ? 'group' : undefined} aria-label={label} data-appearance={appearance} data-tone={tone} data-button-appearance={buttonAppearance} data-expanded={String(expanded)} data-single={String(single)}>{children}</div>;\n}\n"]}
|