ui-lab-registry 0.3.44 → 0.3.45
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/dist/components/Anchor/examples/01-inline-text.d.ts +6 -0
- package/dist/components/Anchor/examples/01-inline-text.d.ts.map +1 -0
- package/dist/components/Anchor/examples/01-inline-text.js +10 -0
- package/dist/components/Anchor/examples/01-inline-text.js.map +1 -0
- package/dist/components/Anchor/examples/02-underline-variants.d.ts +6 -0
- package/dist/components/Anchor/examples/02-underline-variants.d.ts.map +1 -0
- package/dist/components/Anchor/examples/02-underline-variants.js +10 -0
- package/dist/components/Anchor/examples/02-underline-variants.js.map +1 -0
- package/dist/components/Anchor/examples/03-preview-tooltip.d.ts +6 -0
- package/dist/components/Anchor/examples/03-preview-tooltip.d.ts.map +1 -0
- package/dist/components/Anchor/examples/03-preview-tooltip.js +10 -0
- package/dist/components/Anchor/examples/03-preview-tooltip.js.map +1 -0
- package/dist/components/Anchor/examples/04-breadcrumb.d.ts +6 -0
- package/dist/components/Anchor/examples/04-breadcrumb.d.ts.map +1 -0
- package/dist/components/Anchor/examples/04-breadcrumb.js +15 -0
- package/dist/components/Anchor/examples/04-breadcrumb.js.map +1 -0
- package/dist/components/Anchor/examples/index.d.ts +8 -1
- package/dist/components/Anchor/examples/index.d.ts.map +1 -1
- package/dist/components/Anchor/examples/index.js +8 -1
- package/dist/components/Anchor/examples/index.js.map +1 -1
- package/dist/components/Anchor/examples.json +19 -4
- package/dist/components/Anchor/index.d.ts.map +1 -1
- package/dist/components/Anchor/index.js +8 -2
- package/dist/components/Anchor/index.js.map +1 -1
- package/dist/components/Badge/examples/01-status-badges.d.ts +6 -0
- package/dist/components/Badge/examples/01-status-badges.d.ts.map +1 -0
- package/dist/components/Badge/examples/01-status-badges.js +10 -0
- package/dist/components/Badge/examples/01-status-badges.js.map +1 -0
- package/dist/components/Badge/examples/02-icon-position.d.ts +6 -0
- package/dist/components/Badge/examples/02-icon-position.d.ts.map +1 -0
- package/dist/components/Badge/examples/02-icon-position.js +11 -0
- package/dist/components/Badge/examples/02-icon-position.js.map +1 -0
- package/dist/components/Badge/examples/02-variants-and-sizes.d.ts.map +1 -1
- package/dist/components/Badge/examples/02-variants-and-sizes.js +3 -3
- package/dist/components/Badge/examples/02-variants-and-sizes.js.map +1 -1
- package/dist/components/Badge/examples/03-selectable-tags.d.ts +6 -0
- package/dist/components/Badge/examples/03-selectable-tags.d.ts.map +1 -0
- package/dist/components/Badge/examples/03-selectable-tags.js +21 -0
- package/dist/components/Badge/examples/03-selectable-tags.js.map +1 -0
- package/dist/components/Badge/examples/04-dismissible.d.ts +6 -0
- package/dist/components/Badge/examples/04-dismissible.d.ts.map +1 -0
- package/dist/components/Badge/examples/04-dismissible.js +14 -0
- package/dist/components/Badge/examples/04-dismissible.js.map +1 -0
- package/dist/components/Badge/examples/05-semantic-colors.d.ts +6 -0
- package/dist/components/Badge/examples/05-semantic-colors.d.ts.map +1 -0
- package/dist/components/Badge/examples/05-semantic-colors.js +10 -0
- package/dist/components/Badge/examples/05-semantic-colors.js.map +1 -0
- package/dist/components/Badge/examples/index.d.ts +10 -4
- package/dist/components/Badge/examples/index.d.ts.map +1 -1
- package/dist/components/Badge/examples/index.js +10 -4
- package/dist/components/Badge/examples/index.js.map +1 -1
- package/dist/components/Badge/examples.json +24 -9
- package/dist/components/Badge/index.d.ts.map +1 -1
- package/dist/components/Badge/index.js +12 -15
- package/dist/components/Badge/index.js.map +1 -1
- package/dist/components/Banner/examples/01-variants.d.ts +6 -0
- package/dist/components/Banner/examples/01-variants.d.ts.map +1 -0
- package/dist/components/Banner/examples/01-variants.js +10 -0
- package/dist/components/Banner/examples/01-variants.js.map +1 -0
- package/dist/components/Banner/examples/02-dismissible.d.ts +6 -0
- package/dist/components/Banner/examples/02-dismissible.d.ts.map +1 -0
- package/dist/components/Banner/examples/02-dismissible.js +13 -0
- package/dist/components/Banner/examples/02-dismissible.js.map +1 -0
- package/dist/components/Banner/examples/03-form-feedback.d.ts +6 -0
- package/dist/components/Banner/examples/03-form-feedback.d.ts.map +1 -0
- package/dist/components/Banner/examples/03-form-feedback.js +21 -0
- package/dist/components/Banner/examples/03-form-feedback.js.map +1 -0
- package/dist/components/Banner/examples/04-settings-panel.d.ts +6 -0
- package/dist/components/Banner/examples/04-settings-panel.d.ts.map +1 -0
- package/dist/components/Banner/examples/04-settings-panel.js +10 -0
- package/dist/components/Banner/examples/04-settings-panel.js.map +1 -0
- package/dist/components/Banner/examples/05-body-only.d.ts +6 -0
- package/dist/components/Banner/examples/05-body-only.d.ts.map +1 -0
- package/dist/components/Banner/examples/05-body-only.js +10 -0
- package/dist/components/Banner/examples/05-body-only.js.map +1 -0
- package/dist/components/Banner/examples/index.d.ts +10 -2
- package/dist/components/Banner/examples/index.d.ts.map +1 -1
- package/dist/components/Banner/examples/index.js +10 -2
- package/dist/components/Banner/examples/index.js.map +1 -1
- package/dist/components/Banner/examples.json +24 -4
- package/dist/components/Banner/index.d.ts.map +1 -1
- package/dist/components/Banner/index.js +13 -16
- package/dist/components/Banner/index.js.map +1 -1
- package/dist/components/Button/examples/01-variants.d.ts.map +1 -1
- package/dist/components/Button/examples/01-variants.js +12 -4
- package/dist/components/Button/examples/01-variants.js.map +1 -1
- package/dist/components/Button/examples/02-multi-actions.d.ts.map +1 -1
- package/dist/components/Button/examples/02-multi-actions.js.map +1 -1
- package/dist/components/Button/examples/04-sub-stack-actions.js +1 -1
- package/dist/components/Button/examples/04-sub-stack-actions.js.map +1 -1
- package/dist/components/Button/examples/06-icons.d.ts +6 -0
- package/dist/components/Button/examples/06-icons.d.ts.map +1 -0
- package/dist/components/Button/examples/06-icons.js +11 -0
- package/dist/components/Button/examples/06-icons.js.map +1 -0
- package/dist/components/Button/examples/07-split-button.d.ts +6 -0
- package/dist/components/Button/examples/07-split-button.d.ts.map +1 -0
- package/dist/components/Button/examples/07-split-button.js +20 -0
- package/dist/components/Button/examples/07-split-button.js.map +1 -0
- package/dist/components/Button/examples/08-button-group.d.ts +6 -0
- package/dist/components/Button/examples/08-button-group.d.ts.map +1 -0
- package/dist/components/Button/examples/08-button-group.js +14 -0
- package/dist/components/Button/examples/08-button-group.js.map +1 -0
- package/dist/components/Button/examples/index.d.ts +6 -0
- package/dist/components/Button/examples/index.d.ts.map +1 -1
- package/dist/components/Button/examples/index.js +6 -0
- package/dist/components/Button/examples/index.js.map +1 -1
- package/dist/components/Button/examples.json +19 -4
- package/dist/components/Button/index.d.ts.map +1 -1
- package/dist/components/Button/index.js +6 -0
- package/dist/components/Button/index.js.map +1 -1
- package/dist/components/Card/examples/01-notification.d.ts +6 -0
- package/dist/components/Card/examples/01-notification.d.ts.map +1 -0
- package/dist/components/Card/examples/01-notification.js +13 -0
- package/dist/components/Card/examples/01-notification.js.map +1 -0
- package/dist/components/Card/examples/02-settings-panel.d.ts +6 -0
- package/dist/components/Card/examples/02-settings-panel.d.ts.map +1 -0
- package/dist/components/Card/examples/02-settings-panel.js +18 -0
- package/dist/components/Card/examples/02-settings-panel.js.map +1 -0
- package/dist/components/Card/examples/03-task-progress.d.ts +6 -0
- package/dist/components/Card/examples/03-task-progress.d.ts.map +1 -0
- package/dist/components/Card/examples/03-task-progress.js +17 -0
- package/dist/components/Card/examples/03-task-progress.js.map +1 -0
- package/dist/components/Card/examples/index.d.ts +6 -2
- package/dist/components/Card/examples/index.d.ts.map +1 -1
- package/dist/components/Card/examples/index.js +6 -2
- package/dist/components/Card/examples/index.js.map +1 -1
- package/dist/components/Card/examples.json +14 -4
- package/dist/components/Card/index.d.ts.map +1 -1
- package/dist/components/Card/index.js +6 -2
- package/dist/components/Card/index.js.map +1 -1
- package/dist/components/Checkbox/examples/01-basic-states.d.ts +6 -0
- package/dist/components/Checkbox/examples/01-basic-states.d.ts.map +1 -0
- package/dist/components/Checkbox/examples/01-basic-states.js +10 -0
- package/dist/components/Checkbox/examples/01-basic-states.js.map +1 -0
- package/dist/components/Checkbox/examples/02-helper-text.d.ts +6 -0
- package/dist/components/Checkbox/examples/02-helper-text.d.ts.map +1 -0
- package/dist/components/Checkbox/examples/02-helper-text.js +10 -0
- package/dist/components/Checkbox/examples/02-helper-text.js.map +1 -0
- package/dist/components/Checkbox/examples/03-controlled.d.ts +6 -0
- package/dist/components/Checkbox/examples/03-controlled.d.ts.map +1 -0
- package/dist/components/Checkbox/examples/03-controlled.js +13 -0
- package/dist/components/Checkbox/examples/03-controlled.js.map +1 -0
- package/dist/components/Checkbox/examples/04-group.d.ts +6 -0
- package/dist/components/Checkbox/examples/04-group.d.ts.map +1 -0
- package/dist/components/Checkbox/examples/04-group.js +25 -0
- package/dist/components/Checkbox/examples/04-group.js.map +1 -0
- package/dist/components/Checkbox/examples/05-indeterminate.d.ts +6 -0
- package/dist/components/Checkbox/examples/05-indeterminate.d.ts.map +1 -0
- package/dist/components/Checkbox/examples/05-indeterminate.js +26 -0
- package/dist/components/Checkbox/examples/05-indeterminate.js.map +1 -0
- package/dist/components/Checkbox/examples/06-consent-form.d.ts +6 -0
- package/dist/components/Checkbox/examples/06-consent-form.d.ts.map +1 -0
- package/dist/components/Checkbox/examples/06-consent-form.js +14 -0
- package/dist/components/Checkbox/examples/06-consent-form.js.map +1 -0
- package/dist/components/Checkbox/examples/index.d.ts +12 -4
- package/dist/components/Checkbox/examples/index.d.ts.map +1 -1
- package/dist/components/Checkbox/examples/index.js +12 -4
- package/dist/components/Checkbox/examples/index.js.map +1 -1
- package/dist/components/Checkbox/examples.json +29 -9
- package/dist/components/Checkbox/index.d.ts.map +1 -1
- package/dist/components/Checkbox/index.js +13 -16
- package/dist/components/Checkbox/index.js.map +1 -1
- package/dist/components/Color/examples/01-basic-color-picker.d.ts +6 -0
- package/dist/components/Color/examples/01-basic-color-picker.d.ts.map +1 -0
- package/dist/components/Color/examples/01-basic-color-picker.js +11 -0
- package/dist/components/Color/examples/01-basic-color-picker.js.map +1 -0
- package/dist/components/Color/examples/02-color-picker-opacity.d.ts +6 -0
- package/dist/components/Color/examples/02-color-picker-opacity.d.ts.map +1 -0
- package/dist/components/Color/examples/02-color-picker-opacity.js +13 -0
- package/dist/components/Color/examples/02-color-picker-opacity.js.map +1 -0
- package/dist/components/Color/examples/03-color-picker-preview.d.ts +6 -0
- package/dist/components/Color/examples/03-color-picker-preview.d.ts.map +1 -0
- package/dist/components/Color/examples/03-color-picker-preview.js +13 -0
- package/dist/components/Color/examples/03-color-picker-preview.js.map +1 -0
- package/dist/components/Color/examples/04-color-slider-primitive.d.ts +6 -0
- package/dist/components/Color/examples/04-color-slider-primitive.d.ts.map +1 -0
- package/dist/components/Color/examples/04-color-slider-primitive.js +16 -0
- package/dist/components/Color/examples/04-color-slider-primitive.js.map +1 -0
- package/dist/components/Color/examples/index.d.ts +8 -3
- package/dist/components/Color/examples/index.d.ts.map +1 -1
- package/dist/components/Color/examples/index.js +8 -3
- package/dist/components/Color/examples/index.js.map +1 -1
- package/dist/components/Color/examples.json +18 -8
- package/dist/components/Color/index.d.ts.map +1 -1
- package/dist/components/Color/index.js +8 -4
- package/dist/components/Color/index.js.map +1 -1
- package/dist/components/Expand/examples/01-basic.d.ts +6 -0
- package/dist/components/Expand/examples/01-basic.d.ts.map +1 -0
- package/dist/components/Expand/examples/01-basic.js +10 -0
- package/dist/components/Expand/examples/01-basic.js.map +1 -0
- package/dist/components/Expand/examples/02-accordion.d.ts +6 -0
- package/dist/components/Expand/examples/02-accordion.d.ts.map +1 -0
- package/dist/components/Expand/examples/02-accordion.js +30 -0
- package/dist/components/Expand/examples/02-accordion.js.map +1 -0
- package/dist/components/Expand/examples/03-custom-trigger.d.ts +6 -0
- package/dist/components/Expand/examples/03-custom-trigger.d.ts.map +1 -0
- package/dist/components/Expand/examples/03-custom-trigger.js +11 -0
- package/dist/components/Expand/examples/03-custom-trigger.js.map +1 -0
- package/dist/components/Expand/examples/04-directions.d.ts +6 -0
- package/dist/components/Expand/examples/04-directions.d.ts.map +1 -0
- package/dist/components/Expand/examples/04-directions.js +10 -0
- package/dist/components/Expand/examples/04-directions.js.map +1 -0
- package/dist/components/Expand/examples/05-settings-panel.d.ts +6 -0
- package/dist/components/Expand/examples/05-settings-panel.d.ts.map +1 -0
- package/dist/components/Expand/examples/05-settings-panel.js +11 -0
- package/dist/components/Expand/examples/05-settings-panel.js.map +1 -0
- package/dist/components/Expand/examples/06-disabled.d.ts +6 -0
- package/dist/components/Expand/examples/06-disabled.d.ts.map +1 -0
- package/dist/components/Expand/examples/06-disabled.js +10 -0
- package/dist/components/Expand/examples/06-disabled.js.map +1 -0
- package/dist/components/Expand/examples/07-inline-info.d.ts +6 -0
- package/dist/components/Expand/examples/07-inline-info.d.ts.map +1 -0
- package/dist/components/Expand/examples/07-inline-info.js +11 -0
- package/dist/components/Expand/examples/07-inline-info.js.map +1 -0
- package/dist/components/Expand/examples/index.d.ts +14 -2
- package/dist/components/Expand/examples/index.d.ts.map +1 -1
- package/dist/components/Expand/examples/index.js +14 -2
- package/dist/components/Expand/examples/index.js.map +1 -1
- package/dist/components/Expand/examples.json +34 -4
- package/dist/components/Expand/index.d.ts.map +1 -1
- package/dist/components/Expand/index.js +14 -2
- package/dist/components/Expand/index.js.map +1 -1
- package/dist/components/Flex/examples/01-axis-control.d.ts +11 -0
- package/dist/components/Flex/examples/01-axis-control.d.ts.map +1 -0
- package/dist/components/Flex/examples/01-axis-control.js +149 -0
- package/dist/components/Flex/examples/01-axis-control.js.map +1 -0
- package/dist/components/Flex/examples/02-wrap-overflow.d.ts +11 -0
- package/dist/components/Flex/examples/02-wrap-overflow.d.ts.map +1 -0
- package/dist/components/Flex/examples/02-wrap-overflow.js +147 -0
- package/dist/components/Flex/examples/02-wrap-overflow.js.map +1 -0
- package/dist/components/Flex/examples/03-container-query-reflow.d.ts +11 -0
- package/dist/components/Flex/examples/03-container-query-reflow.d.ts.map +1 -0
- package/dist/components/Flex/examples/03-container-query-reflow.js +151 -0
- package/dist/components/Flex/examples/03-container-query-reflow.js.map +1 -0
- package/dist/components/Flex/examples/index.d.ts +6 -2
- package/dist/components/Flex/examples/index.d.ts.map +1 -1
- package/dist/components/Flex/examples/index.js +6 -2
- package/dist/components/Flex/examples/index.js.map +1 -1
- package/dist/components/Flex/examples.json +14 -4
- package/dist/components/Flex/index.d.ts.map +1 -1
- package/dist/components/Flex/index.js +12 -8
- package/dist/components/Flex/index.js.map +1 -1
- package/dist/components/Gallery/examples/01-grid-composition.d.ts +11 -0
- package/dist/components/Gallery/examples/01-grid-composition.d.ts.map +1 -0
- package/dist/components/Gallery/examples/01-grid-composition.js +95 -0
- package/dist/components/Gallery/examples/01-grid-composition.js.map +1 -0
- package/dist/components/Gallery/examples/02-item-orientation.d.ts +11 -0
- package/dist/components/Gallery/examples/02-item-orientation.d.ts.map +1 -0
- package/dist/components/Gallery/examples/02-item-orientation.js +106 -0
- package/dist/components/Gallery/examples/02-item-orientation.js.map +1 -0
- package/dist/components/Gallery/examples/03-span-layout.d.ts +11 -0
- package/dist/components/Gallery/examples/03-span-layout.d.ts.map +1 -0
- package/dist/components/Gallery/examples/03-span-layout.js +95 -0
- package/dist/components/Gallery/examples/03-span-layout.js.map +1 -0
- package/dist/components/Gallery/examples/index.d.ts +6 -2
- package/dist/components/Gallery/examples/index.d.ts.map +1 -1
- package/dist/components/Gallery/examples/index.js +6 -2
- package/dist/components/Gallery/examples/index.js.map +1 -1
- package/dist/components/Gallery/examples.json +14 -4
- package/dist/components/Gallery/index.d.ts.map +1 -1
- package/dist/components/Gallery/index.js +6 -2
- package/dist/components/Gallery/index.js.map +1 -1
- package/dist/components/Grid/examples/02-track-placement.d.ts +11 -0
- package/dist/components/Grid/examples/02-track-placement.d.ts.map +1 -0
- package/dist/components/Grid/examples/02-track-placement.js +181 -0
- package/dist/components/Grid/examples/02-track-placement.js.map +1 -0
- package/dist/components/Grid/examples/03-editorial-spans.d.ts +11 -0
- package/dist/components/Grid/examples/03-editorial-spans.d.ts.map +1 -0
- package/dist/components/Grid/examples/03-editorial-spans.js +167 -0
- package/dist/components/Grid/examples/03-editorial-spans.js.map +1 -0
- package/dist/components/Grid/examples/04-responsive-card-rail.d.ts +11 -0
- package/dist/components/Grid/examples/04-responsive-card-rail.d.ts.map +1 -0
- package/dist/components/Grid/examples/04-responsive-card-rail.js +126 -0
- package/dist/components/Grid/examples/04-responsive-card-rail.js.map +1 -0
- package/dist/components/Grid/examples/index.d.ts +6 -0
- package/dist/components/Grid/examples/index.d.ts.map +1 -1
- package/dist/components/Grid/examples/index.js +6 -0
- package/dist/components/Grid/examples/index.js.map +1 -1
- package/dist/components/Grid/examples.json +15 -0
- package/dist/components/Grid/index.d.ts.map +1 -1
- package/dist/components/Grid/index.js +6 -0
- package/dist/components/Grid/index.js.map +1 -1
- package/dist/components/Group/examples/02-create-project.d.ts +6 -0
- package/dist/components/Group/examples/02-create-project.d.ts.map +1 -0
- package/dist/components/Group/examples/02-create-project.js +11 -0
- package/dist/components/Group/examples/02-create-project.js.map +1 -0
- package/dist/components/Group/examples/03-filter-bar.d.ts +6 -0
- package/dist/components/Group/examples/03-filter-bar.d.ts.map +1 -0
- package/dist/components/Group/examples/03-filter-bar.js +14 -0
- package/dist/components/Group/examples/03-filter-bar.js.map +1 -0
- package/dist/components/Group/examples/04-documentation-search.d.ts +6 -0
- package/dist/components/Group/examples/04-documentation-search.d.ts.map +1 -0
- package/dist/components/Group/examples/04-documentation-search.js +11 -0
- package/dist/components/Group/examples/04-documentation-search.js.map +1 -0
- package/dist/components/Group/examples/05-email-signup.d.ts +6 -0
- package/dist/components/Group/examples/05-email-signup.d.ts.map +1 -0
- package/dist/components/Group/examples/05-email-signup.js +11 -0
- package/dist/components/Group/examples/05-email-signup.js.map +1 -0
- package/dist/components/Group/examples/06-copy-command.d.ts +6 -0
- package/dist/components/Group/examples/06-copy-command.d.ts.map +1 -0
- package/dist/components/Group/examples/06-copy-command.js +11 -0
- package/dist/components/Group/examples/06-copy-command.js.map +1 -0
- package/dist/components/Group/examples/07-delete-confirmation.d.ts +6 -0
- package/dist/components/Group/examples/07-delete-confirmation.d.ts.map +1 -0
- package/dist/components/Group/examples/07-delete-confirmation.js +11 -0
- package/dist/components/Group/examples/07-delete-confirmation.js.map +1 -0
- package/dist/components/Group/examples/08-slider-integration.d.ts +6 -0
- package/dist/components/Group/examples/08-slider-integration.d.ts.map +1 -0
- package/dist/components/Group/examples/08-slider-integration.js +19 -0
- package/dist/components/Group/examples/08-slider-integration.js.map +1 -0
- package/dist/components/Group/examples/index.d.ts +14 -0
- package/dist/components/Group/examples/index.d.ts.map +1 -1
- package/dist/components/Group/examples/index.js +14 -0
- package/dist/components/Group/examples/index.js.map +1 -1
- package/dist/components/Group/examples.json +35 -0
- package/dist/components/Group/index.d.ts.map +1 -1
- package/dist/components/Group/index.js +14 -0
- package/dist/components/Group/index.js.map +1 -1
- package/dist/components/Input/examples/03-sign-in.d.ts +6 -0
- package/dist/components/Input/examples/03-sign-in.d.ts.map +1 -0
- package/dist/components/Input/examples/03-sign-in.js +22 -0
- package/dist/components/Input/examples/03-sign-in.js.map +1 -0
- package/dist/components/Input/examples/04-search.d.ts +6 -0
- package/dist/components/Input/examples/04-search.d.ts.map +1 -0
- package/dist/components/Input/examples/04-search.js +16 -0
- package/dist/components/Input/examples/04-search.js.map +1 -0
- package/dist/components/Input/examples/05-user-handle.d.ts +6 -0
- package/dist/components/Input/examples/05-user-handle.d.ts.map +1 -0
- package/dist/components/Input/examples/05-user-handle.js +27 -0
- package/dist/components/Input/examples/05-user-handle.js.map +1 -0
- package/dist/components/Input/examples/06-api-key.d.ts +6 -0
- package/dist/components/Input/examples/06-api-key.d.ts.map +1 -0
- package/dist/components/Input/examples/06-api-key.js +35 -0
- package/dist/components/Input/examples/06-api-key.js.map +1 -0
- package/dist/components/Input/examples/07-url-validation.d.ts +6 -0
- package/dist/components/Input/examples/07-url-validation.d.ts.map +1 -0
- package/dist/components/Input/examples/07-url-validation.js +23 -0
- package/dist/components/Input/examples/07-url-validation.js.map +1 -0
- package/dist/components/Input/examples/08-quantity.d.ts +6 -0
- package/dist/components/Input/examples/08-quantity.d.ts.map +1 -0
- package/dist/components/Input/examples/08-quantity.js +13 -0
- package/dist/components/Input/examples/08-quantity.js.map +1 -0
- package/dist/components/Input/examples/index.d.ts +12 -0
- package/dist/components/Input/examples/index.d.ts.map +1 -1
- package/dist/components/Input/examples/index.js +12 -0
- package/dist/components/Input/examples/index.js.map +1 -1
- package/dist/components/Input/examples.json +30 -0
- package/dist/components/Input/index.d.ts.map +1 -1
- package/dist/components/Input/index.js +12 -0
- package/dist/components/Input/index.js.map +1 -1
- package/dist/components/List/examples/02-review-queue.d.ts +6 -0
- package/dist/components/List/examples/02-review-queue.d.ts.map +1 -0
- package/dist/components/List/examples/02-review-queue.js +32 -0
- package/dist/components/List/examples/02-review-queue.js.map +1 -0
- package/dist/components/List/examples/03-notification-rules.d.ts +6 -0
- package/dist/components/List/examples/03-notification-rules.d.ts.map +1 -0
- package/dist/components/List/examples/03-notification-rules.js +40 -0
- package/dist/components/List/examples/03-notification-rules.js.map +1 -0
- package/dist/components/List/examples/04-quota-editor.d.ts +6 -0
- package/dist/components/List/examples/04-quota-editor.d.ts.map +1 -0
- package/dist/components/List/examples/04-quota-editor.js +40 -0
- package/dist/components/List/examples/04-quota-editor.js.map +1 -0
- package/dist/components/List/examples/05-permissions-matrix.d.ts +6 -0
- package/dist/components/List/examples/05-permissions-matrix.d.ts.map +1 -0
- package/dist/components/List/examples/05-permissions-matrix.js +39 -0
- package/dist/components/List/examples/05-permissions-matrix.js.map +1 -0
- package/dist/components/List/examples/index.d.ts +8 -0
- package/dist/components/List/examples/index.d.ts.map +1 -1
- package/dist/components/List/examples/index.js +8 -0
- package/dist/components/List/examples/index.js.map +1 -1
- package/dist/components/List/examples.json +20 -0
- package/dist/components/List/index.d.ts.map +1 -1
- package/dist/components/List/index.js +10 -2
- package/dist/components/List/index.js.map +1 -1
- package/dist/components/Menu/examples/03-toolbar-dropdown.d.ts +6 -0
- package/dist/components/Menu/examples/03-toolbar-dropdown.d.ts.map +1 -0
- package/dist/components/Menu/examples/03-toolbar-dropdown.js +11 -0
- package/dist/components/Menu/examples/03-toolbar-dropdown.js.map +1 -0
- package/dist/components/Menu/examples/04-table-row-actions.d.ts +6 -0
- package/dist/components/Menu/examples/04-table-row-actions.d.ts.map +1 -0
- package/dist/components/Menu/examples/04-table-row-actions.js +16 -0
- package/dist/components/Menu/examples/04-table-row-actions.js.map +1 -0
- package/dist/components/Menu/examples/05-context-menu.d.ts +6 -0
- package/dist/components/Menu/examples/05-context-menu.d.ts.map +1 -0
- package/dist/components/Menu/examples/05-context-menu.js +10 -0
- package/dist/components/Menu/examples/05-context-menu.js.map +1 -0
- package/dist/components/Menu/examples/06-view-options.d.ts +6 -0
- package/dist/components/Menu/examples/06-view-options.d.ts.map +1 -0
- package/dist/components/Menu/examples/06-view-options.js +15 -0
- package/dist/components/Menu/examples/06-view-options.js.map +1 -0
- package/dist/components/Menu/examples/index.d.ts +8 -0
- package/dist/components/Menu/examples/index.d.ts.map +1 -1
- package/dist/components/Menu/examples/index.js +8 -0
- package/dist/components/Menu/examples/index.js.map +1 -1
- package/dist/components/Menu/examples.json +20 -0
- package/dist/components/Menu/index.d.ts.map +1 -1
- package/dist/components/Menu/index.js +8 -0
- package/dist/components/Menu/index.js.map +1 -1
- package/dist/components/Modal/examples/02-form-modal.js +1 -1
- package/dist/components/Modal/examples/02-form-modal.js.map +1 -1
- package/dist/components/Modal/examples/03-delete-confirmation.d.ts +6 -0
- package/dist/components/Modal/examples/03-delete-confirmation.d.ts.map +1 -0
- package/dist/components/Modal/examples/03-delete-confirmation.js +13 -0
- package/dist/components/Modal/examples/03-delete-confirmation.js.map +1 -0
- package/dist/components/Modal/examples/04-create-api-key.d.ts +6 -0
- package/dist/components/Modal/examples/04-create-api-key.d.ts.map +1 -0
- package/dist/components/Modal/examples/04-create-api-key.js +14 -0
- package/dist/components/Modal/examples/04-create-api-key.js.map +1 -0
- package/dist/components/Modal/examples/05-notification-settings.d.ts +6 -0
- package/dist/components/Modal/examples/05-notification-settings.d.ts.map +1 -0
- package/dist/components/Modal/examples/05-notification-settings.js +19 -0
- package/dist/components/Modal/examples/05-notification-settings.js.map +1 -0
- package/dist/components/Modal/examples/index.d.ts +6 -0
- package/dist/components/Modal/examples/index.d.ts.map +1 -1
- package/dist/components/Modal/examples/index.js +6 -0
- package/dist/components/Modal/examples/index.js.map +1 -1
- package/dist/components/Modal/examples.json +16 -1
- package/dist/components/Modal/index.d.ts.map +1 -1
- package/dist/components/Modal/index.js +8 -0
- package/dist/components/Modal/index.js.map +1 -1
- package/dist/components/Panel/examples/01-sidebar-toggle.d.ts +6 -0
- package/dist/components/Panel/examples/01-sidebar-toggle.d.ts.map +1 -0
- package/dist/components/Panel/examples/01-sidebar-toggle.js +10 -0
- package/dist/components/Panel/examples/01-sidebar-toggle.js.map +1 -0
- package/dist/components/Panel/examples/index.d.ts +3 -0
- package/dist/components/Panel/examples/index.d.ts.map +1 -0
- package/dist/components/Panel/examples/index.js +3 -0
- package/dist/components/Panel/examples/index.js.map +1 -0
- package/dist/components/Panel/examples.json +7 -0
- package/dist/components/Panel/index.d.ts +1 -0
- package/dist/components/Panel/index.d.ts.map +1 -1
- package/dist/components/Panel/index.js +8 -0
- package/dist/components/Panel/index.js.map +1 -1
- package/dist/components/Path/examples/01-basic-path.js +2 -2
- package/dist/components/Path/examples/01-basic-path.js.map +1 -1
- package/dist/components/Path/examples/02-custom-separator.d.ts +6 -0
- package/dist/components/Path/examples/02-custom-separator.d.ts.map +1 -0
- package/dist/components/Path/examples/02-custom-separator.js +11 -0
- package/dist/components/Path/examples/02-custom-separator.js.map +1 -0
- package/dist/components/Path/examples/03-collapsed-breadcrumb.d.ts +6 -0
- package/dist/components/Path/examples/03-collapsed-breadcrumb.d.ts.map +1 -0
- package/dist/components/Path/examples/03-collapsed-breadcrumb.js +16 -0
- package/dist/components/Path/examples/03-collapsed-breadcrumb.js.map +1 -0
- package/dist/components/Path/examples/index.d.ts +4 -0
- package/dist/components/Path/examples/index.d.ts.map +1 -1
- package/dist/components/Path/examples/index.js +4 -0
- package/dist/components/Path/examples/index.js.map +1 -1
- package/dist/components/Path/examples.json +11 -1
- package/dist/components/Path/index.d.ts.map +1 -1
- package/dist/components/Path/index.js +11 -7
- package/dist/components/Path/index.js.map +1 -1
- package/dist/components/Popover/examples/01-basic-popover.d.ts.map +1 -1
- package/dist/components/Popover/examples/01-basic-popover.js +5 -4
- package/dist/components/Popover/examples/01-basic-popover.js.map +1 -1
- package/dist/components/Popover/examples/02-toggleable-options.d.ts +6 -0
- package/dist/components/Popover/examples/02-toggleable-options.d.ts.map +1 -0
- package/dist/components/Popover/examples/02-toggleable-options.js +23 -0
- package/dist/components/Popover/examples/02-toggleable-options.js.map +1 -0
- package/dist/components/Popover/examples/03-table-row-actions.d.ts +6 -0
- package/dist/components/Popover/examples/03-table-row-actions.d.ts.map +1 -0
- package/dist/components/Popover/examples/03-table-row-actions.js +17 -0
- package/dist/components/Popover/examples/03-table-row-actions.js.map +1 -0
- package/dist/components/Popover/examples/04-input-form.d.ts +6 -0
- package/dist/components/Popover/examples/04-input-form.d.ts.map +1 -0
- package/dist/components/Popover/examples/04-input-form.js +14 -0
- package/dist/components/Popover/examples/04-input-form.js.map +1 -0
- package/dist/components/Popover/examples/05-arrow-positions.d.ts +6 -0
- package/dist/components/Popover/examples/05-arrow-positions.d.ts.map +1 -0
- package/dist/components/Popover/examples/05-arrow-positions.js +11 -0
- package/dist/components/Popover/examples/05-arrow-positions.js.map +1 -0
- package/dist/components/Popover/examples/index.d.ts +8 -0
- package/dist/components/Popover/examples/index.d.ts.map +1 -1
- package/dist/components/Popover/examples/index.js +8 -0
- package/dist/components/Popover/examples/index.js.map +1 -1
- package/dist/components/Popover/examples.json +23 -3
- package/dist/components/Popover/index.d.ts.map +1 -1
- package/dist/components/Popover/index.js +8 -0
- package/dist/components/Popover/index.js.map +1 -1
- package/dist/components/Progress/examples/01-basic-progress.d.ts.map +1 -1
- package/dist/components/Progress/examples/01-basic-progress.js +20 -5
- package/dist/components/Progress/examples/01-basic-progress.js.map +1 -1
- package/dist/components/Progress/examples/02-storage-quota.d.ts +6 -0
- package/dist/components/Progress/examples/02-storage-quota.d.ts.map +1 -0
- package/dist/components/Progress/examples/02-storage-quota.js +12 -0
- package/dist/components/Progress/examples/02-storage-quota.js.map +1 -0
- package/dist/components/Progress/examples/03-onboarding-steps.d.ts +6 -0
- package/dist/components/Progress/examples/03-onboarding-steps.d.ts.map +1 -0
- package/dist/components/Progress/examples/03-onboarding-steps.js +14 -0
- package/dist/components/Progress/examples/03-onboarding-steps.js.map +1 -0
- package/dist/components/Progress/examples/04-indeterminate.d.ts +6 -0
- package/dist/components/Progress/examples/04-indeterminate.d.ts.map +1 -0
- package/dist/components/Progress/examples/04-indeterminate.js +19 -0
- package/dist/components/Progress/examples/04-indeterminate.js.map +1 -0
- package/dist/components/Progress/examples/05-skill-levels.d.ts +6 -0
- package/dist/components/Progress/examples/05-skill-levels.d.ts.map +1 -0
- package/dist/components/Progress/examples/05-skill-levels.js +15 -0
- package/dist/components/Progress/examples/05-skill-levels.js.map +1 -0
- package/dist/components/Progress/examples/index.d.ts +8 -0
- package/dist/components/Progress/examples/index.d.ts.map +1 -1
- package/dist/components/Progress/examples/index.js +8 -0
- package/dist/components/Progress/examples/index.js.map +1 -1
- package/dist/components/Progress/examples.json +23 -3
- package/dist/components/Progress/index.d.ts.map +1 -1
- package/dist/components/Progress/index.js +11 -14
- package/dist/components/Progress/index.js.map +1 -1
- package/dist/components/Scroll/examples/01-basic-scroll.d.ts.map +1 -1
- package/dist/components/Scroll/examples/01-basic-scroll.js +29 -3
- package/dist/components/Scroll/examples/01-basic-scroll.js.map +1 -1
- package/dist/components/Scroll/examples/02-settings-panel.d.ts +6 -0
- package/dist/components/Scroll/examples/02-settings-panel.d.ts.map +1 -0
- package/dist/components/Scroll/examples/02-settings-panel.js +21 -0
- package/dist/components/Scroll/examples/02-settings-panel.js.map +1 -0
- package/dist/components/Scroll/examples/03-horizontal-tags.d.ts +6 -0
- package/dist/components/Scroll/examples/03-horizontal-tags.d.ts.map +1 -0
- package/dist/components/Scroll/examples/03-horizontal-tags.js +24 -0
- package/dist/components/Scroll/examples/03-horizontal-tags.js.map +1 -0
- package/dist/components/Scroll/examples/index.d.ts +4 -0
- package/dist/components/Scroll/examples/index.d.ts.map +1 -1
- package/dist/components/Scroll/examples/index.js +4 -0
- package/dist/components/Scroll/examples/index.js.map +1 -1
- package/dist/components/Scroll/examples.json +13 -3
- package/dist/components/Scroll/index.d.ts.map +1 -1
- package/dist/components/Scroll/index.js +4 -0
- package/dist/components/Scroll/index.js.map +1 -1
- package/dist/components/Select/examples/03-country-select.d.ts +6 -0
- package/dist/components/Select/examples/03-country-select.d.ts.map +1 -0
- package/dist/components/Select/examples/03-country-select.js +28 -0
- package/dist/components/Select/examples/03-country-select.js.map +1 -0
- package/dist/components/Select/examples/index.d.ts +2 -0
- package/dist/components/Select/examples/index.d.ts.map +1 -1
- package/dist/components/Select/examples/index.js +2 -0
- package/dist/components/Select/examples/index.js.map +1 -1
- package/dist/components/Select/examples.json +5 -0
- package/dist/components/Select/index.d.ts.map +1 -1
- package/dist/components/Select/index.js +2 -0
- package/dist/components/Select/index.js.map +1 -1
- package/dist/components/Slider/examples/01-basic-slider.d.ts.map +1 -1
- package/dist/components/Slider/examples/01-basic-slider.js +7 -4
- package/dist/components/Slider/examples/01-basic-slider.js.map +1 -1
- package/dist/components/Slider/examples/02-settings-panel.d.ts +6 -0
- package/dist/components/Slider/examples/02-settings-panel.d.ts.map +1 -0
- package/dist/components/Slider/examples/02-settings-panel.js +20 -0
- package/dist/components/Slider/examples/02-settings-panel.js.map +1 -0
- package/dist/components/Slider/examples/03-price-range.d.ts +6 -0
- package/dist/components/Slider/examples/03-price-range.d.ts.map +1 -0
- package/dist/components/Slider/examples/03-price-range.js +13 -0
- package/dist/components/Slider/examples/03-price-range.js.map +1 -0
- package/dist/components/Slider/examples/04-step-slider.d.ts +6 -0
- package/dist/components/Slider/examples/04-step-slider.d.ts.map +1 -0
- package/dist/components/Slider/examples/04-step-slider.js +13 -0
- package/dist/components/Slider/examples/04-step-slider.js.map +1 -0
- package/dist/components/Slider/examples/05-disabled-state.d.ts +6 -0
- package/dist/components/Slider/examples/05-disabled-state.d.ts.map +1 -0
- package/dist/components/Slider/examples/05-disabled-state.js +10 -0
- package/dist/components/Slider/examples/05-disabled-state.js.map +1 -0
- package/dist/components/Slider/examples/06-vertical-mixer.d.ts +6 -0
- package/dist/components/Slider/examples/06-vertical-mixer.d.ts.map +1 -0
- package/dist/components/Slider/examples/06-vertical-mixer.js +17 -0
- package/dist/components/Slider/examples/06-vertical-mixer.js.map +1 -0
- package/dist/components/Slider/examples/index.d.ts +10 -0
- package/dist/components/Slider/examples/index.d.ts.map +1 -1
- package/dist/components/Slider/examples/index.js +10 -0
- package/dist/components/Slider/examples/index.js.map +1 -1
- package/dist/components/Slider/examples.json +28 -3
- package/dist/components/Slider/index.d.ts.map +1 -1
- package/dist/components/Slider/index.js +10 -0
- package/dist/components/Slider/index.js.map +1 -1
- package/dist/components/Switch/examples/01-basic-switch.d.ts.map +1 -1
- package/dist/components/Switch/examples/01-basic-switch.js +7 -4
- package/dist/components/Switch/examples/01-basic-switch.js.map +1 -1
- package/dist/components/Switch/examples/02-settings-panel.d.ts +6 -0
- package/dist/components/Switch/examples/02-settings-panel.d.ts.map +1 -0
- package/dist/components/Switch/examples/02-settings-panel.js +20 -0
- package/dist/components/Switch/examples/02-settings-panel.js.map +1 -0
- package/dist/components/Switch/examples/03-disabled-state.d.ts +6 -0
- package/dist/components/Switch/examples/03-disabled-state.d.ts.map +1 -0
- package/dist/components/Switch/examples/03-disabled-state.js +10 -0
- package/dist/components/Switch/examples/03-disabled-state.js.map +1 -0
- package/dist/components/Switch/examples/04-small-size.d.ts +6 -0
- package/dist/components/Switch/examples/04-small-size.d.ts.map +1 -0
- package/dist/components/Switch/examples/04-small-size.js +13 -0
- package/dist/components/Switch/examples/04-small-size.js.map +1 -0
- package/dist/components/Switch/examples/05-controlled-toggle.d.ts +6 -0
- package/dist/components/Switch/examples/05-controlled-toggle.d.ts.map +1 -0
- package/dist/components/Switch/examples/05-controlled-toggle.js +13 -0
- package/dist/components/Switch/examples/05-controlled-toggle.js.map +1 -0
- package/dist/components/Switch/examples/index.d.ts +8 -0
- package/dist/components/Switch/examples/index.d.ts.map +1 -1
- package/dist/components/Switch/examples/index.js +8 -0
- package/dist/components/Switch/examples/index.js.map +1 -1
- package/dist/components/Switch/examples.json +23 -3
- package/dist/components/Switch/index.d.ts.map +1 -1
- package/dist/components/Switch/index.js +8 -0
- package/dist/components/Switch/index.js.map +1 -1
- package/dist/components/Table/index.d.ts.map +1 -1
- package/dist/components/Table/index.js.map +1 -1
- package/dist/components/Tabs/examples/03-underline-tabs.d.ts +6 -0
- package/dist/components/Tabs/examples/03-underline-tabs.d.ts.map +1 -0
- package/dist/components/Tabs/examples/03-underline-tabs.js +13 -0
- package/dist/components/Tabs/examples/03-underline-tabs.js.map +1 -0
- package/dist/components/Tabs/examples/04-vertical-underline-tabs.d.ts +6 -0
- package/dist/components/Tabs/examples/04-vertical-underline-tabs.d.ts.map +1 -0
- package/dist/components/Tabs/examples/04-vertical-underline-tabs.js +13 -0
- package/dist/components/Tabs/examples/04-vertical-underline-tabs.js.map +1 -0
- package/dist/components/Tabs/examples/index.d.ts +4 -0
- package/dist/components/Tabs/examples/index.d.ts.map +1 -1
- package/dist/components/Tabs/examples/index.js +4 -0
- package/dist/components/Tabs/examples/index.js.map +1 -1
- package/dist/components/Tabs/examples.json +10 -0
- package/dist/components/Tabs/index.d.ts.map +1 -1
- package/dist/components/Tabs/index.js +4 -0
- package/dist/components/Tabs/index.js.map +1 -1
- package/dist/components/Textarea/examples/01-basic-textarea.d.ts.map +1 -1
- package/dist/components/Textarea/examples/01-basic-textarea.js +8 -5
- package/dist/components/Textarea/examples/01-basic-textarea.js.map +1 -1
- package/dist/components/Textarea/examples/02-bio-settings.d.ts +6 -0
- package/dist/components/Textarea/examples/02-bio-settings.d.ts.map +1 -0
- package/dist/components/Textarea/examples/02-bio-settings.js +13 -0
- package/dist/components/Textarea/examples/02-bio-settings.js.map +1 -0
- package/dist/components/Textarea/examples/03-error-state.d.ts +6 -0
- package/dist/components/Textarea/examples/03-error-state.d.ts.map +1 -0
- package/dist/components/Textarea/examples/03-error-state.js +14 -0
- package/dist/components/Textarea/examples/03-error-state.js.map +1 -0
- package/dist/components/Textarea/examples/04-disabled-readonly.d.ts +6 -0
- package/dist/components/Textarea/examples/04-disabled-readonly.d.ts.map +1 -0
- package/dist/components/Textarea/examples/04-disabled-readonly.js +10 -0
- package/dist/components/Textarea/examples/04-disabled-readonly.js.map +1 -0
- package/dist/components/Textarea/examples/05-scrolling.d.ts +6 -0
- package/dist/components/Textarea/examples/05-scrolling.d.ts.map +1 -0
- package/dist/components/Textarea/examples/05-scrolling.js +13 -0
- package/dist/components/Textarea/examples/05-scrolling.js.map +1 -0
- package/dist/components/Textarea/examples/index.d.ts +8 -0
- package/dist/components/Textarea/examples/index.d.ts.map +1 -1
- package/dist/components/Textarea/examples/index.js +8 -0
- package/dist/components/Textarea/examples/index.js.map +1 -1
- package/dist/components/Textarea/examples.json +23 -3
- package/dist/components/Textarea/index.d.ts.map +1 -1
- package/dist/components/Textarea/index.js +8 -0
- package/dist/components/Textarea/index.js.map +1 -1
- package/dist/components/Toast/index.d.ts.map +1 -1
- package/dist/components/Toast/index.js +1 -1
- package/dist/components/Toast/index.js.map +1 -1
- package/dist/generated-data.d.ts.map +1 -1
- package/dist/generated-data.js +999 -429
- package/dist/generated-data.js.map +1 -1
- package/dist/generated-styles.d.ts.map +1 -1
- package/dist/generated-styles.js +1135 -203
- package/dist/generated-styles.js.map +1 -1
- package/dist/generated-styles.json +1135 -203
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js.map +1 -1
- package/dist/patterns/data/badge-row/variations/main/index.js +1 -1
- package/dist/patterns/data/badge-row/variations/main/index.js.map +1 -1
- package/dist/patterns/data/badge-row/variations/mixed/index.js +1 -1
- package/dist/patterns/data/badge-row/variations/mixed/index.js.map +1 -1
- package/dist/patterns/data/badge-row/variations/outline/index.js +1 -1
- package/dist/patterns/data/badge-row/variations/outline/index.js.map +1 -1
- package/dist/patterns/data/data-table-row/variations/expandable/index.js +1 -1
- package/dist/patterns/data/data-table-row/variations/expandable/index.js.map +1 -1
- package/dist/patterns/data/data-table-row/variations/main/index.js +1 -1
- package/dist/patterns/data/data-table-row/variations/main/index.js.map +1 -1
- package/dist/patterns/data/data-table-row/variations/selectable/index.js +1 -1
- package/dist/patterns/data/data-table-row/variations/selectable/index.js.map +1 -1
- package/dist/patterns/interaction/tab-content-header/variations/with-badge/index.js +1 -1
- package/dist/patterns/interaction/tab-content-header/variations/with-badge/index.js.map +1 -1
- package/dist/patterns/layout/split-row/variations/main/index.js +1 -1
- package/dist/patterns/layout/split-row/variations/main/index.js.map +1 -1
- package/dist/registry.d.ts.map +1 -1
- package/dist/registry.js +536 -61
- package/dist/registry.js.map +1 -1
- package/dist/types.d.ts +18 -1
- package/dist/types.d.ts.map +1 -1
- package/dist/utils/load-component-examples.d.ts +4 -7
- package/dist/utils/load-component-examples.d.ts.map +1 -1
- package/dist/utils/load-component-examples.js +4 -7
- package/dist/utils/load-component-examples.js.map +1 -1
- package/package.json +2 -2
- package/src/components/Anchor/examples/01-inline-text.tsx +22 -0
- package/src/components/Anchor/examples/02-underline-variants.tsx +24 -0
- package/src/components/Anchor/examples/03-preview-tooltip.tsx +27 -0
- package/src/components/Anchor/examples/04-breadcrumb.tsx +29 -0
- package/src/components/Anchor/examples/index.ts +11 -1
- package/src/components/Anchor/examples.json +19 -4
- package/src/components/Anchor/index.tsx +8 -2
- package/src/components/Badge/examples/01-status-badges.tsx +17 -0
- package/src/components/Badge/examples/02-icon-position.tsx +18 -0
- package/src/components/Badge/examples/03-selectable-tags.tsx +40 -0
- package/src/components/Badge/examples/04-dismissible.tsx +37 -0
- package/src/components/Badge/examples/05-semantic-colors.tsx +18 -0
- package/src/components/Badge/examples/index.ts +13 -4
- package/src/components/Badge/examples.json +24 -9
- package/src/components/Badge/index.tsx +11 -15
- package/src/components/Banner/examples/01-variants.tsx +33 -0
- package/src/components/Banner/examples/02-dismissible.tsx +31 -0
- package/src/components/Banner/examples/03-form-feedback.tsx +47 -0
- package/src/components/Banner/examples/04-settings-panel.tsx +21 -0
- package/src/components/Banner/examples/05-body-only.tsx +22 -0
- package/src/components/Banner/examples/index.ts +14 -2
- package/src/components/Banner/examples.json +24 -4
- package/src/components/Banner/index.tsx +12 -16
- package/src/components/Button/examples/01-variants.tsx +18 -52
- package/src/components/Button/examples/02-multi-actions.tsx +0 -1
- package/src/components/Button/examples/04-sub-stack-actions.tsx +1 -1
- package/src/components/Button/examples/06-icons.tsx +25 -0
- package/src/components/Button/examples/07-split-button.tsx +47 -0
- package/src/components/Button/examples/08-button-group.tsx +30 -0
- package/src/components/Button/examples/index.ts +6 -0
- package/src/components/Button/examples.json +19 -4
- package/src/components/Button/index.tsx +6 -0
- package/src/components/Card/examples/01-notification.tsx +37 -0
- package/src/components/Card/examples/02-settings-panel.tsx +48 -0
- package/src/components/Card/examples/03-task-progress.tsx +43 -0
- package/src/components/Card/examples/index.ts +8 -2
- package/src/components/Card/examples.json +14 -4
- package/src/components/Card/index.tsx +6 -2
- package/src/components/Card/metadata.json +42 -0
- package/src/components/Checkbox/examples/01-basic-states.tsx +17 -0
- package/src/components/Checkbox/examples/02-helper-text.tsx +26 -0
- package/src/components/Checkbox/examples/03-controlled.tsx +28 -0
- package/src/components/Checkbox/examples/04-group.tsx +49 -0
- package/src/components/Checkbox/examples/05-indeterminate.tsx +56 -0
- package/src/components/Checkbox/examples/06-consent-form.tsx +35 -0
- package/src/components/Checkbox/examples/index.ts +16 -4
- package/src/components/Checkbox/examples.json +29 -9
- package/src/components/Checkbox/index.tsx +12 -16
- package/src/components/Color/examples/01-basic-color-picker.tsx +18 -0
- package/src/components/Color/examples/02-color-picker-opacity.tsx +29 -0
- package/src/components/Color/examples/03-color-picker-preview.tsx +27 -0
- package/src/components/Color/examples/04-color-slider-primitive.tsx +47 -0
- package/src/components/Color/examples/index.ts +11 -3
- package/src/components/Color/examples.json +18 -8
- package/src/components/Color/index.tsx +8 -4
- package/src/components/Expand/examples/01-basic.tsx +18 -0
- package/src/components/Expand/examples/02-accordion.tsx +46 -0
- package/src/components/Expand/examples/03-custom-trigger.tsx +30 -0
- package/src/components/Expand/examples/04-directions.tsx +33 -0
- package/src/components/Expand/examples/05-settings-panel.tsx +54 -0
- package/src/components/Expand/examples/06-disabled.tsx +19 -0
- package/src/components/Expand/examples/07-inline-info.tsx +29 -0
- package/src/components/Expand/examples/index.ts +20 -2
- package/src/components/Expand/examples.json +34 -4
- package/src/components/Expand/index.tsx +14 -2
- package/src/components/Flex/examples/01-axis-control.tsx +199 -0
- package/src/components/Flex/examples/02-wrap-overflow.tsx +183 -0
- package/src/components/Flex/examples/03-container-query-reflow.tsx +198 -0
- package/src/components/Flex/examples/index.ts +8 -2
- package/src/components/Flex/examples.json +14 -4
- package/src/components/Flex/index.tsx +12 -8
- package/src/components/Gallery/examples/01-grid-composition.tsx +121 -0
- package/src/components/Gallery/examples/02-item-orientation.tsx +133 -0
- package/src/components/Gallery/examples/03-span-layout.tsx +130 -0
- package/src/components/Gallery/examples/index.ts +8 -2
- package/src/components/Gallery/examples.json +14 -4
- package/src/components/Gallery/index.tsx +6 -2
- package/src/components/Grid/examples/02-track-placement.tsx +210 -0
- package/src/components/Grid/examples/03-editorial-spans.tsx +196 -0
- package/src/components/Grid/examples/04-responsive-card-rail.tsx +153 -0
- package/src/components/Grid/examples/index.ts +6 -0
- package/src/components/Grid/examples.json +15 -0
- package/src/components/Grid/index.tsx +6 -0
- package/src/components/Group/examples/02-create-project.tsx +19 -0
- package/src/components/Group/examples/03-filter-bar.tsx +34 -0
- package/src/components/Group/examples/04-documentation-search.tsx +21 -0
- package/src/components/Group/examples/05-email-signup.tsx +21 -0
- package/src/components/Group/examples/06-copy-command.tsx +17 -0
- package/src/components/Group/examples/07-delete-confirmation.tsx +19 -0
- package/src/components/Group/examples/08-slider-integration.tsx +30 -0
- package/src/components/Group/examples/index.ts +14 -0
- package/src/components/Group/examples.json +35 -0
- package/src/components/Group/index.tsx +14 -0
- package/src/components/Input/examples/03-sign-in.tsx +41 -0
- package/src/components/Input/examples/04-search.tsx +31 -0
- package/src/components/Input/examples/05-user-handle.tsx +40 -0
- package/src/components/Input/examples/06-api-key.tsx +48 -0
- package/src/components/Input/examples/07-url-validation.tsx +36 -0
- package/src/components/Input/examples/08-quantity.tsx +26 -0
- package/src/components/Input/examples/index.ts +12 -0
- package/src/components/Input/examples.json +30 -0
- package/src/components/Input/index.tsx +12 -0
- package/src/components/List/examples/02-review-queue.tsx +54 -0
- package/src/components/List/examples/03-notification-rules.tsx +80 -0
- package/src/components/List/examples/04-quota-editor.tsx +71 -0
- package/src/components/List/examples/05-permissions-matrix.tsx +91 -0
- package/src/components/List/examples/index.ts +8 -0
- package/src/components/List/examples.json +20 -0
- package/src/components/List/index.tsx +10 -2
- package/src/components/Menu/examples/03-toolbar-dropdown.tsx +35 -0
- package/src/components/Menu/examples/04-table-row-actions.tsx +60 -0
- package/src/components/Menu/examples/05-context-menu.tsx +36 -0
- package/src/components/Menu/examples/06-view-options.tsx +39 -0
- package/src/components/Menu/examples/index.ts +8 -0
- package/src/components/Menu/examples.json +20 -0
- package/src/components/Menu/index.tsx +8 -0
- package/src/components/Modal/examples/02-form-modal.tsx +1 -1
- package/src/components/Modal/examples/03-delete-confirmation.tsx +42 -0
- package/src/components/Modal/examples/04-create-api-key.tsx +54 -0
- package/src/components/Modal/examples/05-notification-settings.tsx +58 -0
- package/src/components/Modal/examples/index.ts +6 -0
- package/src/components/Modal/examples.json +16 -1
- package/src/components/Modal/index.tsx +8 -0
- package/src/components/Modal/metadata.json +41 -1
- package/src/components/Panel/examples/01-sidebar-toggle.tsx +20 -0
- package/src/components/Panel/examples/index.ts +2 -0
- package/src/components/Panel/examples.json +7 -1
- package/src/components/Panel/index.tsx +9 -0
- package/src/components/Path/examples/01-basic-path.tsx +5 -5
- package/src/components/Path/examples/02-custom-separator.tsx +17 -0
- package/src/components/Path/examples/03-collapsed-breadcrumb.tsx +37 -0
- package/src/components/Path/examples/index.ts +4 -0
- package/src/components/Path/examples.json +11 -1
- package/src/components/Path/index.tsx +15 -11
- package/src/components/Popover/examples/01-basic-popover.tsx +24 -5
- package/src/components/Popover/examples/02-toggleable-options.tsx +58 -0
- package/src/components/Popover/examples/03-table-row-actions.tsx +64 -0
- package/src/components/Popover/examples/04-input-form.tsx +46 -0
- package/src/components/Popover/examples/05-arrow-positions.tsx +27 -0
- package/src/components/Popover/examples/index.ts +8 -0
- package/src/components/Popover/examples.json +23 -3
- package/src/components/Popover/index.tsx +8 -0
- package/src/components/Progress/examples/01-basic-progress.tsx +34 -5
- package/src/components/Progress/examples/02-storage-quota.tsx +22 -0
- package/src/components/Progress/examples/03-onboarding-steps.tsx +34 -0
- package/src/components/Progress/examples/04-indeterminate.tsx +33 -0
- package/src/components/Progress/examples/05-skill-levels.tsx +22 -0
- package/src/components/Progress/examples/index.ts +8 -0
- package/src/components/Progress/examples.json +23 -3
- package/src/components/Progress/index.tsx +10 -14
- package/src/components/Scroll/examples/01-basic-scroll.tsx +45 -12
- package/src/components/Scroll/examples/02-settings-panel.tsx +40 -0
- package/src/components/Scroll/examples/03-horizontal-tags.tsx +38 -0
- package/src/components/Scroll/examples/index.ts +4 -0
- package/src/components/Scroll/examples.json +13 -3
- package/src/components/Scroll/index.tsx +4 -0
- package/src/components/Select/examples/03-country-select.tsx +55 -0
- package/src/components/Select/examples/index.ts +2 -0
- package/src/components/Select/examples.json +5 -0
- package/src/components/Select/index.tsx +2 -0
- package/src/components/Slider/examples/01-basic-slider.tsx +19 -4
- package/src/components/Slider/examples/02-settings-panel.tsx +33 -0
- package/src/components/Slider/examples/03-price-range.tsx +34 -0
- package/src/components/Slider/examples/04-step-slider.tsx +35 -0
- package/src/components/Slider/examples/05-disabled-state.tsx +21 -0
- package/src/components/Slider/examples/06-vertical-mixer.tsx +34 -0
- package/src/components/Slider/examples/index.ts +10 -0
- package/src/components/Slider/examples.json +28 -3
- package/src/components/Slider/index.tsx +10 -0
- package/src/components/Switch/examples/01-basic-switch.tsx +20 -4
- package/src/components/Switch/examples/02-settings-panel.tsx +32 -0
- package/src/components/Switch/examples/03-disabled-state.tsx +21 -0
- package/src/components/Switch/examples/04-small-size.tsx +25 -0
- package/src/components/Switch/examples/05-controlled-toggle.tsx +32 -0
- package/src/components/Switch/examples/index.ts +8 -0
- package/src/components/Switch/examples.json +23 -3
- package/src/components/Switch/index.tsx +8 -0
- package/src/components/Table/index.tsx +0 -1
- package/src/components/Tabs/examples/03-underline-tabs.tsx +23 -0
- package/src/components/Tabs/examples/04-vertical-underline-tabs.tsx +23 -0
- package/src/components/Tabs/examples/index.ts +4 -0
- package/src/components/Tabs/examples.json +10 -0
- package/src/components/Tabs/index.tsx +4 -0
- package/src/components/Textarea/examples/01-basic-textarea.tsx +21 -8
- package/src/components/Textarea/examples/02-bio-settings.tsx +30 -0
- package/src/components/Textarea/examples/03-error-state.tsx +31 -0
- package/src/components/Textarea/examples/04-disabled-readonly.tsx +25 -0
- package/src/components/Textarea/examples/05-scrolling.tsx +26 -0
- package/src/components/Textarea/examples/index.ts +8 -0
- package/src/components/Textarea/examples.json +23 -3
- package/src/components/Textarea/index.tsx +8 -0
- package/src/components/Toast/index.tsx +1 -4
- package/src/generated-data.ts +999 -429
- package/src/generated-styles.ts +1135 -203
- package/src/index.ts +2 -0
- package/src/patterns/data/badge-row/variations/main/index.tsx +1 -1
- package/src/patterns/data/badge-row/variations/mixed/index.tsx +1 -1
- package/src/patterns/data/badge-row/variations/outline/index.tsx +1 -1
- package/src/patterns/data/data-table-row/variations/expandable/index.tsx +1 -1
- package/src/patterns/data/data-table-row/variations/main/index.tsx +1 -1
- package/src/patterns/data/data-table-row/variations/selectable/index.tsx +1 -1
- package/src/patterns/interaction/tab-content-header/variations/with-badge/index.tsx +1 -1
- package/src/patterns/layout/split-row/variations/main/index.tsx +1 -1
- package/src/registry.ts +536 -61
- package/src/types.ts +20 -1
- package/src/utils/load-component-examples.ts +8 -7
- package/src/components/Anchor/examples/01-basic-anchor.tsx +0 -18
- package/src/components/Badge/examples/01-basic-badge.tsx +0 -11
- package/src/components/Badge/examples/02-variants-and-sizes.tsx +0 -71
- package/src/components/Banner/examples/01-basic-banner.tsx +0 -15
- package/src/components/Card/examples/01-basic-card.tsx +0 -22
- package/src/components/Checkbox/examples/01-basic-checkbox.tsx +0 -21
- package/src/components/Checkbox/examples/02-checkbox-group-with-descriptions.tsx +0 -59
- package/src/components/Color/examples/01-basic-color.tsx +0 -25
- package/src/components/Color/examples/02-opacity-slider.tsx +0 -26
- package/src/components/Color/examples/03-format-switching.tsx +0 -46
- package/src/components/Expand/examples/01-basic-expand.tsx +0 -18
- package/src/components/Flex/examples/01-basic-flex.tsx +0 -17
- package/src/components/Gallery/examples/01-basic-gallery.tsx +0 -28
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"04-indeterminate.d.ts","sourceRoot":"","sources":["../../../../src/components/Progress/examples/04-indeterminate.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO,4CAsB9B"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useState, useEffect } from 'react';
|
|
4
|
+
import { Progress, Flex, Button } from 'ui-lab-components';
|
|
5
|
+
export const metadata = {
|
|
6
|
+
title: 'Indeterminate Loading',
|
|
7
|
+
description: 'Animated bar for unknown-duration operations — switches to complete when done.'
|
|
8
|
+
};
|
|
9
|
+
export default function Example() {
|
|
10
|
+
const [loading, setLoading] = useState(true);
|
|
11
|
+
useEffect(() => {
|
|
12
|
+
if (!loading)
|
|
13
|
+
return;
|
|
14
|
+
const t = setTimeout(() => setLoading(false), 3000);
|
|
15
|
+
return () => clearTimeout(t);
|
|
16
|
+
}, [loading]);
|
|
17
|
+
return (_jsxs(Flex, { direction: "column", gap: "md", style: { width: 320 }, children: [_jsxs(Flex, { direction: "column", gap: "xs", children: [_jsx("span", { style: { fontSize: "var(--text-sm)", color: "var(--foreground-muted)" }, children: loading ? "Fetching results…" : "Results loaded" }), _jsx(Progress, { indeterminate: loading, value: loading ? 0 : 100 })] }), _jsx(Button, { variant: "ghost", onClick: () => setLoading(true), disabled: loading, children: "Reload" })] }));
|
|
18
|
+
}
|
|
19
|
+
//# sourceMappingURL=04-indeterminate.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"04-indeterminate.js","sourceRoot":"","sources":["../../../../src/components/Progress/examples/04-indeterminate.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3D,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,uBAAuB;IAC9B,WAAW,EAAE,gFAAgF;CAC9F,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAE7C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO;YAAE,OAAO;QACrB,MAAM,CAAC,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAAC;QACpD,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IAC/B,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,aACrD,MAAC,IAAI,IAAC,SAAS,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,aAC/B,eAAM,KAAK,EAAE,EAAE,QAAQ,EAAE,gBAAgB,EAAE,KAAK,EAAE,yBAAyB,EAAE,YAC1E,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,gBAAgB,GAC5C,EACP,KAAC,QAAQ,IAAC,aAAa,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,GAAI,IACzD,EACP,KAAC,MAAM,IAAC,OAAO,EAAC,OAAO,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,OAAO,uBAEjE,IACJ,CACR,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"05-skill-levels.d.ts","sourceRoot":"","sources":["../../../../src/components/Progress/examples/05-skill-levels.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAQF,MAAM,CAAC,OAAO,UAAU,OAAO,4CAQ9B"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Progress, Flex } from 'ui-lab-components';
|
|
3
|
+
export const metadata = {
|
|
4
|
+
title: 'Skill Levels',
|
|
5
|
+
description: 'Stacked progress bars in a profile or stats context with labels and values.'
|
|
6
|
+
};
|
|
7
|
+
const skills = [
|
|
8
|
+
{ name: "TypeScript", value: 92 },
|
|
9
|
+
{ name: "Rust", value: 54 },
|
|
10
|
+
{ name: "Go", value: 38 },
|
|
11
|
+
];
|
|
12
|
+
export default function Example() {
|
|
13
|
+
return (_jsx(Flex, { direction: "column", gap: "sm", style: { width: 300 }, children: skills.map((s) => (_jsx(Progress, { value: s.value, label: s.name, showValue: true }, s.name))) }));
|
|
14
|
+
}
|
|
15
|
+
//# sourceMappingURL=05-skill-levels.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"05-skill-levels.js","sourceRoot":"","sources":["../../../../src/components/Progress/examples/05-skill-levels.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEnD,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,cAAc;IACrB,WAAW,EAAE,6EAA6E;CAC3F,CAAC;AAEF,MAAM,MAAM,GAAG;IACb,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE,EAAE;IACjC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3B,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE;CAC1B,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,OAAO,CACL,KAAC,IAAI,IAAC,SAAS,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,YACpD,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CACjB,KAAC,QAAQ,IAAc,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,UAAhD,CAAC,CAAC,IAAI,CAA6C,CACnE,CAAC,GACG,CACR,CAAC;AACJ,CAAC"}
|
|
@@ -1,3 +1,11 @@
|
|
|
1
1
|
export { default as Example1 } from './01-basic-progress.js';
|
|
2
2
|
export { metadata as metadata1 } from './01-basic-progress.js';
|
|
3
|
+
export { default as Example2 } from './02-storage-quota.js';
|
|
4
|
+
export { metadata as metadata2 } from './02-storage-quota.js';
|
|
5
|
+
export { default as Example3 } from './03-onboarding-steps.js';
|
|
6
|
+
export { metadata as metadata3 } from './03-onboarding-steps.js';
|
|
7
|
+
export { default as Example4 } from './04-indeterminate.js';
|
|
8
|
+
export { metadata as metadata4 } from './04-indeterminate.js';
|
|
9
|
+
export { default as Example5 } from './05-skill-levels.js';
|
|
10
|
+
export { metadata as metadata5 } from './05-skill-levels.js';
|
|
3
11
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Progress/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Progress/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC"}
|
|
@@ -1,3 +1,11 @@
|
|
|
1
1
|
export { default as Example1 } from './01-basic-progress.js';
|
|
2
2
|
export { metadata as metadata1 } from './01-basic-progress.js';
|
|
3
|
+
export { default as Example2 } from './02-storage-quota.js';
|
|
4
|
+
export { metadata as metadata2 } from './02-storage-quota.js';
|
|
5
|
+
export { default as Example3 } from './03-onboarding-steps.js';
|
|
6
|
+
export { metadata as metadata3 } from './03-onboarding-steps.js';
|
|
7
|
+
export { default as Example4 } from './04-indeterminate.js';
|
|
8
|
+
export { metadata as metadata4 } from './04-indeterminate.js';
|
|
9
|
+
export { default as Example5 } from './05-skill-levels.js';
|
|
10
|
+
export { metadata as metadata5 } from './05-skill-levels.js';
|
|
3
11
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Progress/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Progress/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC"}
|
|
@@ -1,7 +1,27 @@
|
|
|
1
1
|
{
|
|
2
2
|
"01-basic-progress": {
|
|
3
|
-
"title": "
|
|
4
|
-
"description": "
|
|
5
|
-
"code": "
|
|
3
|
+
"title": "File Upload",
|
|
4
|
+
"description": "Simulated upload progress with a label and live percentage — starts on button click.",
|
|
5
|
+
"code": "\"use client\";\n\nimport { useState, useEffect } from 'react';\nimport { Progress, Flex, Button } from 'ui-lab-components';\n\nexport default function Example() {\n const [progress, setProgress] = useState(0);\n const [running, setRunning] = useState(false);\n\n useEffect(() => {\n if (!running) return;\n if (progress >= 100) { setRunning(false); return; }\n const t = setTimeout(() => setProgress((p) => Math.min(p + Math.random() * 12, 100)), 200);\n return () => clearTimeout(t);\n }, [running, progress]);\n\n const reset = () => { setProgress(0); setRunning(false); };\n\n return (\n <Flex direction=\"column\" gap=\"md\" style={{ width: 340 }}>\n <Flex direction=\"column\" gap=\"xs\">\n <span style={{ fontSize: \"var(--text-sm)\", color: \"var(--foreground-muted)\" }}>\n report-q4-2025.pdf\n </span>\n <Progress value={progress} label=\"Uploading\" showValue />\n </Flex>\n <Flex gap=\"sm\">\n <Button variant=\"primary\" onClick={() => setRunning(true)} disabled={running || progress === 100}>\n {progress === 100 ? \"Done\" : \"Upload\"}\n </Button>\n <Button variant=\"ghost\" onClick={reset}>Reset</Button>\n </Flex>\n </Flex>\n );\n}"
|
|
6
|
+
},
|
|
7
|
+
"02-storage-quota": {
|
|
8
|
+
"title": "Storage Quota",
|
|
9
|
+
"description": "Fixed progress bar showing disk usage relative to a custom max value.",
|
|
10
|
+
"code": "import { Progress, Flex } from 'ui-lab-components';\n\nconst used = 7.4;\nconst total = 10;\n\nexport default function Example() {\n return (\n <Flex direction=\"column\" gap=\"md\" style={{ width: 300 }}>\n <Flex direction=\"column\" gap=\"xs\">\n <Progress value={used} max={total} label=\"Storage\" showValue />\n <span style={{ fontSize: \"var(--text-xs)\", color: \"var(--foreground-muted)\" }}>\n {used} GB of {total} GB used\n </span>\n </Flex>\n </Flex>\n );\n}"
|
|
11
|
+
},
|
|
12
|
+
"03-onboarding-steps": {
|
|
13
|
+
"title": "Onboarding Steps",
|
|
14
|
+
"description": "Step tracker using value/max to represent wizard completion.",
|
|
15
|
+
"code": "\"use client\";\n\nimport { useState } from 'react';\nimport { Progress, Flex, Button } from 'ui-lab-components';\n\nconst steps = [\"Profile\", \"Preferences\", \"Integrations\", \"Invite team\"];\n\nexport default function Example() {\n const [step, setStep] = useState(1);\n\n return (\n <Flex direction=\"column\" gap=\"md\" style={{ width: 340 }}>\n <Flex direction=\"column\" gap=\"xs\">\n <Progress value={step} max={steps.length} />\n <span style={{ fontSize: \"var(--text-sm)\", color: \"var(--foreground-muted)\" }}>\n Step {step} of {steps.length} — {steps[step - 1]}\n </span>\n </Flex>\n <Flex gap=\"sm\">\n <Button variant=\"ghost\" onClick={() => setStep((s) => Math.max(1, s - 1))} disabled={step === 1}>\n Back\n </Button>\n <Button variant=\"primary\" onClick={() => setStep((s) => Math.min(steps.length, s + 1))} disabled={step === steps.length}>\n Next\n </Button>\n </Flex>\n </Flex>\n );\n}"
|
|
16
|
+
},
|
|
17
|
+
"04-indeterminate": {
|
|
18
|
+
"title": "Indeterminate Loading",
|
|
19
|
+
"description": "Animated bar for unknown-duration operations — switches to complete when done.",
|
|
20
|
+
"code": "\"use client\";\n\nimport { useState, useEffect } from 'react';\nimport { Progress, Flex, Button } from 'ui-lab-components';\n\nexport default function Example() {\n const [loading, setLoading] = useState(true);\n\n useEffect(() => {\n if (!loading) return;\n const t = setTimeout(() => setLoading(false), 3000);\n return () => clearTimeout(t);\n }, [loading]);\n\n return (\n <Flex direction=\"column\" gap=\"md\" style={{ width: 320 }}>\n <Flex direction=\"column\" gap=\"xs\">\n <span style={{ fontSize: \"var(--text-sm)\", color: \"var(--foreground-muted)\" }}>\n {loading ? \"Fetching results…\" : \"Results loaded\"}\n </span>\n <Progress indeterminate={loading} value={loading ? 0 : 100} />\n </Flex>\n <Button variant=\"ghost\" onClick={() => setLoading(true)} disabled={loading}>\n Reload\n </Button>\n </Flex>\n );\n}"
|
|
21
|
+
},
|
|
22
|
+
"05-skill-levels": {
|
|
23
|
+
"title": "Skill Levels",
|
|
24
|
+
"description": "Stacked progress bars in a profile or stats context with labels and values.",
|
|
25
|
+
"code": "import { Progress, Flex } from 'ui-lab-components';\n\nconst skills = [\n { name: \"TypeScript\", value: 92 },\n { name: \"Rust\", value: 54 },\n { name: \"Go\", value: 38 },\n];\n\nexport default function Example() {\n return (\n <Flex direction=\"column\" gap=\"sm\" style={{ width: 300 }}>\n {skills.map((s) => (\n <Progress key={s.name} value={s.value} label={s.name} showValue />\n ))}\n </Flex>\n );\n}"
|
|
6
26
|
}
|
|
7
27
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAkBtD,QAAA,MAAM,gBAAgB,EAAE,UAAU,EAsCjC,CAAA;AAQD,eAAO,MAAM,cAAc,EAAE,eAoD5B,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAC5B,cAAc,qBAAqB,CAAC"}
|
|
@@ -1,23 +1,20 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Progress } from 'ui-lab-components';
|
|
3
3
|
import Example1, { metadata as metadata1 } from './examples/01-basic-progress.js';
|
|
4
|
+
import Example2, { metadata as metadata2 } from './examples/02-storage-quota.js';
|
|
5
|
+
import Example3, { metadata as metadata3 } from './examples/03-onboarding-steps.js';
|
|
6
|
+
import Example4, { metadata as metadata4 } from './examples/04-indeterminate.js';
|
|
7
|
+
import Example5, { metadata as metadata5 } from './examples/05-skill-levels.js';
|
|
4
8
|
import examplesJson from './examples.json' with { type: 'json' };
|
|
5
9
|
import { loadComponentExamples } from '../../utils/load-component-examples.js';
|
|
6
10
|
const examplesData = [
|
|
7
11
|
{ id: '01-basic-progress', Component: Example1, metadata: metadata1 },
|
|
12
|
+
{ id: '02-storage-quota', Component: Example2, metadata: metadata2 },
|
|
13
|
+
{ id: '03-onboarding-steps', Component: Example3, metadata: metadata3 },
|
|
14
|
+
{ id: '04-indeterminate', Component: Example4, metadata: metadata4 },
|
|
15
|
+
{ id: '05-skill-levels', Component: Example5, metadata: metadata5 },
|
|
8
16
|
];
|
|
9
17
|
const progressControls = [
|
|
10
|
-
{
|
|
11
|
-
name: "size",
|
|
12
|
-
label: "Size",
|
|
13
|
-
type: "select",
|
|
14
|
-
options: [
|
|
15
|
-
{ label: "Small", value: "sm" },
|
|
16
|
-
{ label: "Medium", value: "md" },
|
|
17
|
-
{ label: "Large", value: "lg" },
|
|
18
|
-
],
|
|
19
|
-
defaultValue: "md",
|
|
20
|
-
},
|
|
21
18
|
{
|
|
22
19
|
name: "variant",
|
|
23
20
|
label: "Variant",
|
|
@@ -64,8 +61,8 @@ export function Example() {
|
|
|
64
61
|
export const progressDetail = {
|
|
65
62
|
id: "progress",
|
|
66
63
|
name: "Progress",
|
|
67
|
-
description: "A horizontal progress bar with configurable value
|
|
68
|
-
overview: (_jsxs("div", { className: "space-y-4 text-foreground-300", children: [_jsx("p", { children: "The Progress component displays a horizontal bar that fills based on a percentage value. It's ideal for showing loading states, upload progress, completion status, and other metrics." }), _jsx("p", { children: "Progress bars support
|
|
64
|
+
description: "A horizontal progress bar with configurable value and variants. Supports determinate and indeterminate states.",
|
|
65
|
+
overview: (_jsxs("div", { className: "space-y-4 text-foreground-300", children: [_jsx("p", { children: "The Progress component displays a horizontal bar that fills based on a percentage value. It's ideal for showing loading states, upload progress, completion status, and other metrics." }), _jsx("p", { children: "Progress bars support semantic color variants and an indeterminate mode for unknown durations. Labels and percentage values can be displayed for additional context." })] })),
|
|
69
66
|
examples: [
|
|
70
67
|
{
|
|
71
68
|
id: "preview",
|
|
@@ -74,7 +71,7 @@ export const progressDetail = {
|
|
|
74
71
|
code: progressBasicCode,
|
|
75
72
|
preview: _jsx(Progress, { value: 60 }),
|
|
76
73
|
controls: progressControls,
|
|
77
|
-
renderPreview: (props) => (_jsx(Progress, { value: parseInt(props.value),
|
|
74
|
+
renderPreview: (props) => (_jsx(Progress, { value: parseInt(props.value), variant: props.variant, indeterminate: props.indeterminate, showValue: props.showValue })),
|
|
78
75
|
},
|
|
79
76
|
...loadComponentExamples(examplesData, examplesJson),
|
|
80
77
|
],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Progress/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,QAAQ,EAAE,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAClF,OAAO,YAAY,MAAM,iBAAiB,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAC;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAC;AAE/E,MAAM,YAAY,GAAG;IACnB,EAAE,EAAE,EAAE,mBAAmB,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Progress/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"01-basic-scroll.d.ts","sourceRoot":"","sources":["../../../../src/components/Scroll/examples/01-basic-scroll.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;
|
|
1
|
+
{"version":3,"file":"01-basic-scroll.d.ts","sourceRoot":"","sources":["../../../../src/components/Scroll/examples/01-basic-scroll.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAkBF,MAAM,CAAC,OAAO,UAAU,OAAO,4CA+B9B"}
|
|
@@ -1,10 +1,36 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Scroll } from 'ui-lab-components';
|
|
3
3
|
export const metadata = {
|
|
4
|
-
title: '
|
|
5
|
-
description: '
|
|
4
|
+
title: 'Log Viewer',
|
|
5
|
+
description: 'Vertically scrollable log output with fade mask to hint at overflow content.'
|
|
6
6
|
};
|
|
7
|
+
const LOG_ENTRIES = [
|
|
8
|
+
{ level: "info", msg: "Server started on port 3000" },
|
|
9
|
+
{ level: "info", msg: "Connected to database" },
|
|
10
|
+
{ level: "warn", msg: "Slow query detected: users.findAll (342ms)" },
|
|
11
|
+
{ level: "error", msg: "Failed to send email: SMTP timeout" },
|
|
12
|
+
{ level: "info", msg: "Cache warmed: 1,204 keys loaded" },
|
|
13
|
+
{ level: "info", msg: "Background job 'sync-orders' started" },
|
|
14
|
+
{ level: "warn", msg: "Memory usage at 78%" },
|
|
15
|
+
{ level: "info", msg: "Background job 'sync-orders' completed" },
|
|
16
|
+
{ level: "error", msg: "Unhandled rejection: Cannot read property 'id' of undefined" },
|
|
17
|
+
{ level: "info", msg: "Health check passed" },
|
|
18
|
+
{ level: "warn", msg: "Rate limit reached for IP 192.168.1.42" },
|
|
19
|
+
{ level: "info", msg: "User #4821 logged in" },
|
|
20
|
+
{ level: "info", msg: "Deployment complete: v2.14.0" },
|
|
21
|
+
];
|
|
7
22
|
export default function Example() {
|
|
8
|
-
return (
|
|
23
|
+
return (_jsxs("div", { style: { width: 480, display: 'flex', flexDirection: 'column', gap: 4 }, children: [_jsx("span", { style: { fontSize: 11, color: 'var(--color-muted)', textTransform: 'uppercase', letterSpacing: '0.08em' }, children: "Application Logs" }), _jsx("div", { style: { border: '1px solid var(--color-border)', borderRadius: 6, background: 'var(--color-background-900)', overflow: 'hidden' }, children: _jsx(Scroll, { maxHeight: "200px", "fade-y": true, fadeDistance: 8, fadeSize: 5, children: _jsx("div", { style: { padding: '8px 0' }, children: LOG_ENTRIES.map((entry, i) => (_jsxs("div", { style: {
|
|
24
|
+
display: 'flex',
|
|
25
|
+
gap: 10,
|
|
26
|
+
padding: '3px 12px',
|
|
27
|
+
fontSize: 12,
|
|
28
|
+
fontFamily: 'var(--font-mono, monospace)',
|
|
29
|
+
color: entry.level === 'error'
|
|
30
|
+
? 'var(--color-destructive)'
|
|
31
|
+
: entry.level === 'warn'
|
|
32
|
+
? 'var(--color-warning, var(--color-muted))'
|
|
33
|
+
: 'var(--color-foreground)',
|
|
34
|
+
}, children: [_jsx("span", { style: { color: 'var(--color-muted)', minWidth: 36 }, children: entry.level }), _jsx("span", { children: entry.msg })] }, i))) }) }) })] }));
|
|
9
35
|
}
|
|
10
36
|
//# sourceMappingURL=01-basic-scroll.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"01-basic-scroll.js","sourceRoot":"","sources":["../../../../src/components/Scroll/examples/01-basic-scroll.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"01-basic-scroll.js","sourceRoot":"","sources":["../../../../src/components/Scroll/examples/01-basic-scroll.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,YAAY;IACnB,WAAW,EAAE,8EAA8E;CAC5F,CAAC;AAEF,MAAM,WAAW,GAAG;IAClB,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,6BAA6B,EAAE;IACrD,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,uBAAuB,EAAE;IAC/C,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,4CAA4C,EAAE;IACpE,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,oCAAoC,EAAE;IAC7D,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,iCAAiC,EAAE;IACzD,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,sCAAsC,EAAE;IAC9D,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,qBAAqB,EAAE;IAC7C,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,wCAAwC,EAAE;IAChE,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,6DAA6D,EAAE;IACtF,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,qBAAqB,EAAE;IAC7C,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,wCAAwC,EAAE;IAChE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,sBAAsB,EAAE;IAC9C,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,8BAA8B,EAAE;CACvD,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,OAAO,CACL,eAAK,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC1E,eAAM,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,oBAAoB,EAAE,aAAa,EAAE,WAAW,EAAE,aAAa,EAAE,QAAQ,EAAE,iCAExG,EACP,cAAK,KAAK,EAAE,EAAE,MAAM,EAAE,+BAA+B,EAAE,YAAY,EAAE,CAAC,EAAE,UAAU,EAAE,6BAA6B,EAAE,QAAQ,EAAE,QAAQ,EAAE,YACrI,KAAC,MAAM,IAAC,SAAS,EAAC,OAAO,kBAAQ,YAAY,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,YAC3D,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,YAC7B,WAAW,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,CAC7B,eAAa,KAAK,EAAE;gCAClB,OAAO,EAAE,MAAM;gCACf,GAAG,EAAE,EAAE;gCACP,OAAO,EAAE,UAAU;gCACnB,QAAQ,EAAE,EAAE;gCACZ,UAAU,EAAE,6BAA6B;gCACzC,KAAK,EAAE,KAAK,CAAC,KAAK,KAAK,OAAO;oCAC5B,CAAC,CAAC,0BAA0B;oCAC5B,CAAC,CAAC,KAAK,CAAC,KAAK,KAAK,MAAM;wCACtB,CAAC,CAAC,0CAA0C;wCAC5C,CAAC,CAAC,yBAAyB;6BAChC,aACC,eAAM,KAAK,EAAE,EAAE,KAAK,EAAE,oBAAoB,EAAE,QAAQ,EAAE,EAAE,EAAE,YAAG,KAAK,CAAC,KAAK,GAAQ,EAChF,yBAAO,KAAK,CAAC,GAAG,GAAQ,KAbhB,CAAC,CAcL,CACP,CAAC,GACE,GACC,GACL,IACF,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"02-settings-panel.d.ts","sourceRoot":"","sources":["../../../../src/components/Scroll/examples/02-settings-panel.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAOF,MAAM,CAAC,OAAO,UAAU,OAAO,4CA2B9B"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Scroll } from 'ui-lab-components';
|
|
3
|
+
export const metadata = {
|
|
4
|
+
title: 'Settings Panel',
|
|
5
|
+
description: 'Constrained-height settings list with a custom scrollbar shown on hover.'
|
|
6
|
+
};
|
|
7
|
+
const SETTINGS_ITEMS = Array.from({ length: 18 }, (_, i) => ({
|
|
8
|
+
label: `Option ${i + 1}`,
|
|
9
|
+
description: `Configure behavior for setting ${i + 1}`,
|
|
10
|
+
}));
|
|
11
|
+
export default function Example() {
|
|
12
|
+
return (_jsxs("div", { style: { width: 320, border: '1px solid var(--color-border)', borderRadius: 8, overflow: 'hidden', background: 'var(--color-background)' }, children: [_jsx("div", { style: { padding: '12px 16px', borderBottom: '1px solid var(--color-border)', fontSize: 13, fontWeight: 500 }, children: "Preferences" }), _jsx(Scroll, { maxHeight: "240px", children: _jsx("div", { style: { padding: '8px 0' }, children: SETTINGS_ITEMS.map((item, i) => (_jsx("div", { style: {
|
|
13
|
+
display: 'flex',
|
|
14
|
+
justifyContent: 'space-between',
|
|
15
|
+
alignItems: 'center',
|
|
16
|
+
padding: '8px 16px',
|
|
17
|
+
fontSize: 13,
|
|
18
|
+
borderBottom: i < SETTINGS_ITEMS.length - 1 ? '1px solid var(--color-border)' : undefined,
|
|
19
|
+
}, children: _jsxs("div", { children: [_jsx("div", { style: { color: 'var(--color-foreground)' }, children: item.label }), _jsx("div", { style: { fontSize: 11, color: 'var(--color-muted)', marginTop: 1 }, children: item.description })] }) }, i))) }) })] }));
|
|
20
|
+
}
|
|
21
|
+
//# sourceMappingURL=02-settings-panel.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"02-settings-panel.js","sourceRoot":"","sources":["../../../../src/components/Scroll/examples/02-settings-panel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,gBAAgB;IACvB,WAAW,EAAE,0EAA0E;CACxF,CAAC;AAEF,MAAM,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IAC3D,KAAK,EAAE,UAAU,CAAC,GAAG,CAAC,EAAE;IACxB,WAAW,EAAE,kCAAkC,CAAC,GAAG,CAAC,EAAE;CACvD,CAAC,CAAC,CAAC;AAEJ,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,OAAO,CACL,eAAK,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,+BAA+B,EAAE,YAAY,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,yBAAyB,EAAE,aAC7I,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,+BAA+B,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,4BAE5G,EACN,KAAC,MAAM,IAAC,SAAS,EAAC,OAAO,YACvB,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,YAC7B,cAAc,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CAC/B,cAAa,KAAK,EAAE;4BAClB,OAAO,EAAE,MAAM;4BACf,cAAc,EAAE,eAAe;4BAC/B,UAAU,EAAE,QAAQ;4BACpB,OAAO,EAAE,UAAU;4BACnB,QAAQ,EAAE,EAAE;4BACZ,YAAY,EAAE,CAAC,GAAG,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,SAAS;yBAC1F,YACC,0BACE,cAAK,KAAK,EAAE,EAAE,KAAK,EAAE,yBAAyB,EAAE,YAAG,IAAI,CAAC,KAAK,GAAO,EACpE,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,CAAC,EAAE,YAAG,IAAI,CAAC,WAAW,GAAO,IAC7F,IAXE,CAAC,CAYL,CACP,CAAC,GACE,GACC,IACL,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"03-horizontal-tags.d.ts","sourceRoot":"","sources":["../../../../src/components/Scroll/examples/03-horizontal-tags.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAQF,MAAM,CAAC,OAAO,UAAU,OAAO,4CAwB9B"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Scroll } from 'ui-lab-components';
|
|
3
|
+
export const metadata = {
|
|
4
|
+
title: 'Horizontal Tag List',
|
|
5
|
+
description: 'Horizontally scrollable row of filter tags that overflow their container.'
|
|
6
|
+
};
|
|
7
|
+
const TAGS = [
|
|
8
|
+
"authentication", "payments", "webhooks", "analytics", "notifications",
|
|
9
|
+
"billing", "user-management", "api-keys", "rate-limiting", "audit-logs",
|
|
10
|
+
"exports", "integrations", "search", "permissions", "reports",
|
|
11
|
+
];
|
|
12
|
+
export default function Example() {
|
|
13
|
+
return (_jsxs("div", { style: { width: 420, display: 'flex', flexDirection: 'column', gap: 6 }, children: [_jsx("span", { style: { fontSize: 12, color: 'var(--color-muted)' }, children: "Filter by topic" }), _jsx(Scroll, { direction: "horizontal", maxWidth: "420px", hide: false, inline: true, children: _jsx("div", { style: { display: 'flex', gap: 6, padding: '2px 0' }, children: TAGS.map((tag) => (_jsx("span", { style: {
|
|
14
|
+
whiteSpace: 'nowrap',
|
|
15
|
+
padding: '3px 10px',
|
|
16
|
+
border: '1px solid var(--color-border)',
|
|
17
|
+
borderRadius: 4,
|
|
18
|
+
fontSize: 12,
|
|
19
|
+
color: 'var(--color-foreground)',
|
|
20
|
+
cursor: 'default',
|
|
21
|
+
background: 'var(--color-background-900)',
|
|
22
|
+
}, children: tag }, tag))) }) })] }));
|
|
23
|
+
}
|
|
24
|
+
//# sourceMappingURL=03-horizontal-tags.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"03-horizontal-tags.js","sourceRoot":"","sources":["../../../../src/components/Scroll/examples/03-horizontal-tags.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,KAAK,EAAE,qBAAqB;IAC5B,WAAW,EAAE,2EAA2E;CACzF,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,gBAAgB,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,eAAe;IACtE,SAAS,EAAE,iBAAiB,EAAE,UAAU,EAAE,eAAe,EAAE,YAAY;IACvE,SAAS,EAAE,cAAc,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS;CAC9D,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,OAAO,CACL,eAAK,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC1E,eAAM,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,oBAAoB,EAAE,gCAAwB,EAClF,KAAC,MAAM,IAAC,SAAS,EAAC,YAAY,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAE,KAAK,EAAE,MAAM,kBACjE,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,YACtD,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACjB,eAAgB,KAAK,EAAE;4BACrB,UAAU,EAAE,QAAQ;4BACpB,OAAO,EAAE,UAAU;4BACnB,MAAM,EAAE,+BAA+B;4BACvC,YAAY,EAAE,CAAC;4BACf,QAAQ,EAAE,EAAE;4BACZ,KAAK,EAAE,yBAAyB;4BAChC,MAAM,EAAE,SAAS;4BACjB,UAAU,EAAE,6BAA6B;yBAC1C,YACE,GAAG,IAVK,GAAG,CAWP,CACR,CAAC,GACE,GACC,IACL,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -1,3 +1,7 @@
|
|
|
1
1
|
export { default as Example1 } from './01-basic-scroll.js';
|
|
2
2
|
export { metadata as metadata1 } from './01-basic-scroll.js';
|
|
3
|
+
export { default as Example2 } from './02-settings-panel.js';
|
|
4
|
+
export { metadata as metadata2 } from './02-settings-panel.js';
|
|
5
|
+
export { default as Example3 } from './03-horizontal-tags.js';
|
|
6
|
+
export { metadata as metadata3 } from './03-horizontal-tags.js';
|
|
3
7
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Scroll/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Scroll/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,yBAAyB,CAAC"}
|
|
@@ -1,3 +1,7 @@
|
|
|
1
1
|
export { default as Example1 } from './01-basic-scroll.js';
|
|
2
2
|
export { metadata as metadata1 } from './01-basic-scroll.js';
|
|
3
|
+
export { default as Example2 } from './02-settings-panel.js';
|
|
4
|
+
export { metadata as metadata2 } from './02-settings-panel.js';
|
|
5
|
+
export { default as Example3 } from './03-horizontal-tags.js';
|
|
6
|
+
export { metadata as metadata3 } from './03-horizontal-tags.js';
|
|
3
7
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Scroll/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Scroll/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,yBAAyB,CAAC"}
|
|
@@ -1,7 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"01-basic-scroll": {
|
|
3
|
-
"title": "
|
|
4
|
-
"description": "
|
|
5
|
-
"code": "import { Scroll } from 'ui-lab-components';\n\nexport default function Example() {\n return (\n <div
|
|
3
|
+
"title": "Log Viewer",
|
|
4
|
+
"description": "Vertically scrollable log output with fade mask to hint at overflow content.",
|
|
5
|
+
"code": "import { Scroll } from 'ui-lab-components';\n\nconst LOG_ENTRIES = [\n { level: \"info\", msg: \"Server started on port 3000\" },\n { level: \"info\", msg: \"Connected to database\" },\n { level: \"warn\", msg: \"Slow query detected: users.findAll (342ms)\" },\n { level: \"error\", msg: \"Failed to send email: SMTP timeout\" },\n { level: \"info\", msg: \"Cache warmed: 1,204 keys loaded\" },\n { level: \"info\", msg: \"Background job 'sync-orders' started\" },\n { level: \"warn\", msg: \"Memory usage at 78%\" },\n { level: \"info\", msg: \"Background job 'sync-orders' completed\" },\n { level: \"error\", msg: \"Unhandled rejection: Cannot read property 'id' of undefined\" },\n { level: \"info\", msg: \"Health check passed\" },\n { level: \"warn\", msg: \"Rate limit reached for IP 192.168.1.42\" },\n { level: \"info\", msg: \"User #4821 logged in\" },\n { level: \"info\", msg: \"Deployment complete: v2.14.0\" },\n];\n\nexport default function Example() {\n return (\n <div style={{ width: 480, display: 'flex', flexDirection: 'column', gap: 4 }}>\n <span style={{ fontSize: 11, color: 'var(--color-muted)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>\n Application Logs\n </span>\n <div style={{ border: '1px solid var(--color-border)', borderRadius: 6, background: 'var(--color-background-900)', overflow: 'hidden' }}>\n <Scroll maxHeight=\"200px\" fade-y fadeDistance={8} fadeSize={5}>\n <div style={{ padding: '8px 0' }}>\n {LOG_ENTRIES.map((entry, i) => (\n <div key={i} style={{\n display: 'flex',\n gap: 10,\n padding: '3px 12px',\n fontSize: 12,\n fontFamily: 'var(--font-mono, monospace)',\n color: entry.level === 'error'\n ? 'var(--color-destructive)'\n : entry.level === 'warn'\n ? 'var(--color-warning, var(--color-muted))'\n : 'var(--color-foreground)',\n }}>\n <span style={{ color: 'var(--color-muted)', minWidth: 36 }}>{entry.level}</span>\n <span>{entry.msg}</span>\n </div>\n ))}\n </div>\n </Scroll>\n </div>\n </div>\n );\n}"
|
|
6
|
+
},
|
|
7
|
+
"02-settings-panel": {
|
|
8
|
+
"title": "Settings Panel",
|
|
9
|
+
"description": "Constrained-height settings list with a custom scrollbar shown on hover.",
|
|
10
|
+
"code": "import { Scroll } from 'ui-lab-components';\n\nconst SETTINGS_ITEMS = Array.from({ length: 18 }, (_, i) => ({\n label: `Option ${i + 1}`,\n description: `Configure behavior for setting ${i + 1}`,\n}));\n\nexport default function Example() {\n return (\n <div style={{ width: 320, border: '1px solid var(--color-border)', borderRadius: 8, overflow: 'hidden', background: 'var(--color-background)' }}>\n <div style={{ padding: '12px 16px', borderBottom: '1px solid var(--color-border)', fontSize: 13, fontWeight: 500 }}>\n Preferences\n </div>\n <Scroll maxHeight=\"240px\">\n <div style={{ padding: '8px 0' }}>\n {SETTINGS_ITEMS.map((item, i) => (\n <div key={i} style={{\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n padding: '8px 16px',\n fontSize: 13,\n borderBottom: i < SETTINGS_ITEMS.length - 1 ? '1px solid var(--color-border)' : undefined,\n }}>\n <div>\n <div style={{ color: 'var(--color-foreground)' }}>{item.label}</div>\n <div style={{ fontSize: 11, color: 'var(--color-muted)', marginTop: 1 }}>{item.description}</div>\n </div>\n </div>\n ))}\n </div>\n </Scroll>\n </div>\n );\n}"
|
|
11
|
+
},
|
|
12
|
+
"03-horizontal-tags": {
|
|
13
|
+
"title": "Horizontal Tag List",
|
|
14
|
+
"description": "Horizontally scrollable row of filter tags that overflow their container.",
|
|
15
|
+
"code": "import { Scroll } from 'ui-lab-components';\n\nconst TAGS = [\n \"authentication\", \"payments\", \"webhooks\", \"analytics\", \"notifications\",\n \"billing\", \"user-management\", \"api-keys\", \"rate-limiting\", \"audit-logs\",\n \"exports\", \"integrations\", \"search\", \"permissions\", \"reports\",\n];\n\nexport default function Example() {\n return (\n <div style={{ width: 420, display: 'flex', flexDirection: 'column', gap: 6 }}>\n <span style={{ fontSize: 12, color: 'var(--color-muted)' }}>Filter by topic</span>\n <Scroll direction=\"horizontal\" maxWidth=\"420px\" hide={false} inline>\n <div style={{ display: 'flex', gap: 6, padding: '2px 0' }}>\n {TAGS.map((tag) => (\n <span key={tag} style={{\n whiteSpace: 'nowrap',\n padding: '3px 10px',\n border: '1px solid var(--color-border)',\n borderRadius: 4,\n fontSize: 12,\n color: 'var(--color-foreground)',\n cursor: 'default',\n background: 'var(--color-background-900)',\n }}>\n {tag}\n </span>\n ))}\n </div>\n </Scroll>\n </div>\n );\n}"
|
|
6
16
|
}
|
|
7
17
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Scroll/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Scroll/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAetD,QAAA,MAAM,cAAc,EAAE,UAAU,EAY/B,CAAC;AAkBF,eAAO,MAAM,YAAY,EAAE,eAiF1B,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC;AAC1B,cAAc,qBAAqB,CAAC"}
|
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Scroll } from 'ui-lab-components';
|
|
3
3
|
import Example1, { metadata as metadata1 } from './examples/01-basic-scroll.js';
|
|
4
|
+
import Example2, { metadata as metadata2 } from './examples/02-settings-panel.js';
|
|
5
|
+
import Example3, { metadata as metadata3 } from './examples/03-horizontal-tags.js';
|
|
4
6
|
import examplesJson from './examples.json' with { type: 'json' };
|
|
5
7
|
import { loadComponentExamples } from '../../utils/load-component-examples.js';
|
|
6
8
|
const examplesData = [
|
|
7
9
|
{ id: '01-basic-scroll', Component: Example1, metadata: metadata1 },
|
|
10
|
+
{ id: '02-settings-panel', Component: Example2, metadata: metadata2 },
|
|
11
|
+
{ id: '03-horizontal-tags', Component: Example3, metadata: metadata3 },
|
|
8
12
|
];
|
|
9
13
|
const scrollControls = [
|
|
10
14
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Scroll/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAW,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,QAAQ,EAAE,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAChF,OAAO,YAAY,MAAM,iBAAiB,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAC;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAC;AAE/E,MAAM,YAAY,GAAG;IACnB,EAAE,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Scroll/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"03-country-select.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/examples/03-country-select.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAiBF,MAAM,CAAC,OAAO,UAAU,OAAO,4CA6B9B"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useState } from 'react';
|
|
4
|
+
import { Select, Searchable } from 'ui-lab-components';
|
|
5
|
+
export const metadata = {
|
|
6
|
+
title: 'Country Selector',
|
|
7
|
+
description: 'Button trigger reveals a searchable country list with flags and dial codes inside the dropdown content.'
|
|
8
|
+
};
|
|
9
|
+
const countries = [
|
|
10
|
+
{ value: "us", label: "United States", flag: "🇺🇸", code: "+1" },
|
|
11
|
+
{ value: "gb", label: "United Kingdom", flag: "🇬🇧", code: "+44" },
|
|
12
|
+
{ value: "de", label: "Germany", flag: "🇩🇪", code: "+49" },
|
|
13
|
+
{ value: "fr", label: "France", flag: "🇫🇷", code: "+33" },
|
|
14
|
+
{ value: "jp", label: "Japan", flag: "🇯🇵", code: "+81" },
|
|
15
|
+
{ value: "kr", label: "South Korea", flag: "🇰🇷", code: "+82" },
|
|
16
|
+
{ value: "cn", label: "China", flag: "🇨🇳", code: "+86" },
|
|
17
|
+
{ value: "in", label: "India", flag: "🇮🇳", code: "+91" },
|
|
18
|
+
{ value: "br", label: "Brazil", flag: "🇧🇷", code: "+55" },
|
|
19
|
+
{ value: "au", label: "Australia", flag: "🇦🇺", code: "+61" },
|
|
20
|
+
{ value: "ca", label: "Canada", flag: "🇨🇦", code: "+1" },
|
|
21
|
+
{ value: "mx", label: "Mexico", flag: "🇲🇽", code: "+52" },
|
|
22
|
+
];
|
|
23
|
+
export default function Example() {
|
|
24
|
+
const [country, setCountry] = useState("us");
|
|
25
|
+
const selected = countries.find(c => c.value === country);
|
|
26
|
+
return (_jsxs(Select, { selectedKey: country, valueLabel: selected?.label, onSelectionChange: setCountry, className: "w-72", children: [_jsx(Select.Trigger, { children: _jsx(Select.Value, { placeholder: "Choose a country...", icon: selected && _jsx("span", { className: "text-sm", children: selected.flag }) }) }), _jsx(Searchable.Content, { searchPlaceholder: "Search countries...", children: countries.map((c) => (_jsx(Select.Item, { value: c.value, textValue: c.label, icon: _jsx("span", { className: "text-md", children: c.flag }), children: _jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsx("span", { children: c.label }), _jsx("span", { className: "ml-2 text-sm text-foreground-400", children: c.code })] }) }, c.value))) })] }));
|
|
27
|
+
}
|
|
28
|
+
//# sourceMappingURL=03-country-select.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"03-country-select.js","sourceRoot":"","sources":["../../../../src/components/Select/examples/03-country-select.tsx"],"names":[],"mappings":"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"}
|
|
@@ -2,4 +2,6 @@ export { default as Example1 } from './01-basic-select.js';
|
|
|
2
2
|
export { metadata as metadata1 } from './01-basic-select.js';
|
|
3
3
|
export { default as Example2 } from './02-searchable-select.js';
|
|
4
4
|
export { metadata as metadata2 } from './02-searchable-select.js';
|
|
5
|
+
export { default as Example3 } from './03-country-select.js';
|
|
6
|
+
export { metadata as metadata3 } from './03-country-select.js';
|
|
5
7
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,2BAA2B,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC"}
|
|
@@ -2,4 +2,6 @@ export { default as Example1 } from './01-basic-select.js';
|
|
|
2
2
|
export { metadata as metadata1 } from './01-basic-select.js';
|
|
3
3
|
export { default as Example2 } from './02-searchable-select.js';
|
|
4
4
|
export { metadata as metadata2 } from './02-searchable-select.js';
|
|
5
|
+
export { default as Example3 } from './03-country-select.js';
|
|
6
|
+
export { metadata as metadata3 } from './03-country-select.js';
|
|
5
7
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Select/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,2BAA2B,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Select/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,QAAQ,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC"}
|
|
@@ -8,5 +8,10 @@
|
|
|
8
8
|
"title": "Searchable Select",
|
|
9
9
|
"description": "A filterable select component with search input. Type to filter through a large list of options.",
|
|
10
10
|
"code": "import React from 'react';\nimport { Select, Searchable } from 'ui-lab-components';\n\nconst countries = [\n { value: 'us', label: 'United States' },\n { value: 'ca', label: 'Canada' },\n { value: 'mx', label: 'Mexico' },\n { value: 'br', label: 'Brazil' },\n { value: 'ar', label: 'Argentina' },\n { value: 'uk', label: 'United Kingdom' },\n { value: 'fr', label: 'France' },\n { value: 'de', label: 'Germany' },\n { value: 'it', label: 'Italy' },\n { value: 'es', label: 'Spain' },\n { value: 'pt', label: 'Portugal' },\n { value: 'nl', label: 'Netherlands' },\n { value: 'be', label: 'Belgium' },\n { value: 'ch', label: 'Switzerland' },\n { value: 'at', label: 'Austria' },\n { value: 'se', label: 'Sweden' },\n { value: 'no', label: 'Norway' },\n { value: 'dk', label: 'Denmark' },\n { value: 'fi', label: 'Finland' },\n { value: 'pl', label: 'Poland' },\n { value: 'jp', label: 'Japan' },\n { value: 'cn', label: 'China' },\n { value: 'kr', label: 'South Korea' },\n { value: 'in', label: 'India' },\n { value: 'au', label: 'Australia' },\n { value: 'nz', label: 'New Zealand' },\n];\n\nexport default function Example() {\n return (\n <Select>\n <Searchable.Input placeholder=\"Search countries...\" />\n <Searchable.Content searchPlaceholder=\"Type to filter...\">\n {countries.map((country) => (\n <Select.Item key={country.value} value={country.value} textValue={country.label}>\n {country.label}\n </Select.Item>\n ))}\n </Searchable.Content>\n </Select>\n );\n}"
|
|
11
|
+
},
|
|
12
|
+
"03-country-select": {
|
|
13
|
+
"title": "Country Selector",
|
|
14
|
+
"description": "Button trigger reveals a searchable country list with flags and dial codes inside the dropdown content.",
|
|
15
|
+
"code": "\"use client\";\n\nimport { useState } from 'react';\nimport { Select, Searchable } from 'ui-lab-components';\n\nconst countries = [\n { value: \"us\", label: \"United States\", flag: \"🇺🇸\", code: \"+1\" },\n { value: \"gb\", label: \"United Kingdom\", flag: \"🇬🇧\", code: \"+44\" },\n { value: \"de\", label: \"Germany\", flag: \"🇩🇪\", code: \"+49\" },\n { value: \"fr\", label: \"France\", flag: \"🇫🇷\", code: \"+33\" },\n { value: \"jp\", label: \"Japan\", flag: \"🇯🇵\", code: \"+81\" },\n { value: \"kr\", label: \"South Korea\", flag: \"🇰🇷\", code: \"+82\" },\n { value: \"cn\", label: \"China\", flag: \"🇨🇳\", code: \"+86\" },\n { value: \"in\", label: \"India\", flag: \"🇮🇳\", code: \"+91\" },\n { value: \"br\", label: \"Brazil\", flag: \"🇧🇷\", code: \"+55\" },\n { value: \"au\", label: \"Australia\", flag: \"🇦🇺\", code: \"+61\" },\n { value: \"ca\", label: \"Canada\", flag: \"🇨🇦\", code: \"+1\" },\n { value: \"mx\", label: \"Mexico\", flag: \"🇲🇽\", code: \"+52\" },\n];\n\nexport default function Example() {\n const [country, setCountry] = useState<string | number | null>(\"us\");\n const selected = countries.find(c => c.value === country);\n\n return (\n <Select\n selectedKey={country}\n valueLabel={selected?.label}\n onSelectionChange={setCountry}\n className=\"w-72\"\n >\n <Select.Trigger>\n <Select.Value\n placeholder=\"Choose a country...\"\n icon={selected && <span className=\"text-sm\">{selected.flag}</span>}\n />\n </Select.Trigger>\n <Searchable.Content searchPlaceholder=\"Search countries...\">\n {countries.map((c) => (\n <Select.Item key={c.value} value={c.value} textValue={c.label} icon={<span className=\"text-md\">{c.flag}</span>}>\n <div className=\"flex items-center justify-between w-full\">\n <span>{c.label}</span>\n <span className=\"ml-2 text-sm text-foreground-400\">{c.code}</span>\n </div>\n </Select.Item>\n ))}\n </Searchable.Content>\n </Select>\n );\n}"
|
|
11
16
|
}
|
|
12
17
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AActD,QAAA,MAAM,cAAc,EAAE,UAAU,EAG/B,CAAC;AAqBF,eAAO,MAAM,YAAY,EAAE,eAsE1B,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC;AAC1B,cAAc,qBAAqB,CAAC"}
|