prime-ui-kit 0.5.1 → 0.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -2
- package/dist/components/accordion/examples/02-settings-panels.d.ts.map +1 -1
- package/dist/components/accordion/examples/04-api-docs-sections.d.ts.map +1 -1
- package/dist/components/accordion/examples/05-knowledge-base-categories.d.ts.map +1 -1
- package/dist/components/avatar/examples/app-header-nav.d.ts.map +1 -1
- package/dist/components/avatar/examples/src-from-state.d.ts.map +1 -1
- package/dist/components/banner/examples/cookie-consent-row.d.ts.map +1 -1
- package/dist/components/banner/examples/feature-promo.d.ts.map +1 -1
- package/dist/components/checkbox/examples/bulk-select-rows.d.ts.map +1 -1
- package/dist/components/checkbox/examples/empty-label-form.d.ts.map +1 -1
- package/dist/components/checkbox/examples/feature-flags-list.d.ts.map +1 -1
- package/dist/components/checkbox/examples/settings-panel.d.ts.map +1 -1
- package/dist/components/color-picker/ColorPicker.d.ts.map +1 -1
- package/dist/components/color-picker/ColorPickerRac.d.ts.map +1 -1
- package/dist/components/color-picker/examples/controlled-form-field.d.ts.map +1 -1
- package/dist/components/color-picker/examples/theme-accent.d.ts.map +1 -1
- package/dist/components/command-menu/examples/composition-tags-footer.d.ts.map +1 -1
- package/dist/components/command-menu/examples/variants-density-items.d.ts.map +1 -1
- package/dist/components/datepicker/examples/full-width-form.d.ts.map +1 -1
- package/dist/components/digit-input/examples/error-state.d.ts.map +1 -1
- package/dist/components/digit-input/examples/resend-and-clear.d.ts.map +1 -1
- package/dist/components/divider/examples/section-breaks.d.ts.map +1 -1
- package/dist/components/dropdown/Dropdown.d.ts +0 -14
- package/dist/components/dropdown/Dropdown.d.ts.map +1 -1
- package/dist/components/dropdown/examples/account-menu.d.ts.map +1 -1
- package/dist/components/dropdown/examples/actions-menu.d.ts.map +1 -1
- package/dist/components/dropdown/examples/full-width.d.ts.map +1 -1
- package/dist/components/empty-page/EmptyPage.d.ts +63 -0
- package/dist/components/empty-page/EmptyPage.d.ts.map +1 -0
- package/dist/components/empty-page/examples/canonical.d.ts +3 -0
- package/dist/components/empty-page/examples/canonical.d.ts.map +1 -0
- package/dist/components/empty-page/examples/sizes.d.ts +3 -0
- package/dist/components/empty-page/examples/sizes.d.ts.map +1 -0
- package/dist/components/empty-page/examples/table-region.d.ts +6 -0
- package/dist/components/empty-page/examples/table-region.d.ts.map +1 -0
- package/dist/components/hint/examples/a11y-describedby.d.ts.map +1 -1
- package/dist/components/hint/examples/error-hint.d.ts.map +1 -1
- package/dist/components/hint/examples/field-help.d.ts.map +1 -1
- package/dist/components/hint/examples/field-states.d.ts.map +1 -1
- package/dist/components/hint/examples/inline-tip-form.d.ts.map +1 -1
- package/dist/components/hint/examples/success-confirmation.d.ts.map +1 -1
- package/dist/components/hint/examples/variants.d.ts.map +1 -1
- package/dist/components/index.css +278 -115
- package/dist/components/index.css.map +4 -4
- package/dist/components/index.d.ts +3 -1
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +376 -356
- package/dist/components/index.js.map +4 -4
- package/dist/components/input/examples/login-email.d.ts.map +1 -1
- package/dist/components/input/examples/search.d.ts.map +1 -1
- package/dist/components/link-button/examples/disabled.d.ts.map +1 -1
- package/dist/components/link-button/examples/external.d.ts.map +1 -1
- package/dist/components/link-button/examples/inline-text-link.d.ts.map +1 -1
- package/dist/components/link-button/examples/navigation-cluster.d.ts.map +1 -1
- package/dist/components/modal/examples/pattern-controlled.d.ts.map +1 -1
- package/dist/components/modal/examples/pattern-portal-and-scroll.d.ts.map +1 -1
- package/dist/components/modal/examples/scenario-multi-field-form.d.ts.map +1 -1
- package/dist/components/notification/examples/action-toast.d.ts.map +1 -1
- package/dist/components/notification/examples/error-success.d.ts.map +1 -1
- package/dist/components/popover/Popover.d.ts +3 -3
- package/dist/components/popover/Popover.d.ts.map +1 -1
- package/dist/components/popover/examples/composition.d.ts +1 -1
- package/dist/components/popover/examples/date-trigger.d.ts.map +1 -1
- package/dist/components/popover/examples/features.d.ts.map +1 -1
- package/dist/components/popover/examples/form-in-popover.d.ts.map +1 -1
- package/dist/components/popover/examples/full-width.d.ts.map +1 -1
- package/dist/components/popover/examples/placement.d.ts.map +1 -1
- package/dist/components/popover/examples/rich-content.d.ts.map +1 -1
- package/dist/components/popover/examples/sizes.d.ts +1 -1
- package/dist/components/progress-bar/examples/step-progress.d.ts.map +1 -1
- package/dist/components/progress-circle/examples/dashboard-ring.d.ts.map +1 -1
- package/dist/components/progress-circle/examples/states.d.ts.map +1 -1
- package/dist/components/radio/examples/plan-picker.d.ts.map +1 -1
- package/dist/components/segmented-control/examples/pricing-toggle.d.ts.map +1 -1
- package/dist/components/segmented-control/examples/view-mode.d.ts.map +1 -1
- package/dist/components/select/examples/01-country.d.ts.map +1 -1
- package/dist/components/select/examples/02-controlled.d.ts.map +1 -1
- package/dist/components/select/examples/03-groups.d.ts.map +1 -1
- package/dist/components/select/examples/04-full-width-form.d.ts.map +1 -1
- package/dist/components/switch/examples/composition.d.ts.map +1 -1
- package/dist/components/switch/examples/scenario-feature-flag.d.ts.map +1 -1
- package/dist/components/tabs/examples/01-settings-vertical-rail.d.ts.map +1 -1
- package/dist/components/tag/examples/controlled.d.ts.map +1 -1
- package/dist/components/textarea/examples/01-support-ticket.d.ts.map +1 -1
- package/dist/components/textarea/examples/02-comment.d.ts.map +1 -1
- package/dist/components/textarea/examples/controlled.d.ts.map +1 -1
- package/dist/components/textarea/examples/features.d.ts.map +1 -1
- package/dist/components/tooltip/examples/composition.d.ts.map +1 -1
- package/dist/index.css +278 -115
- package/dist/index.css.map +4 -4
- package/dist/index.js +378 -357
- package/dist/index.js.map +4 -4
- package/dist/internal/states.d.ts +2 -0
- package/dist/internal/states.d.ts.map +1 -1
- package/dist/layout/app-shell/AppShell.d.ts +0 -8
- package/dist/layout/app-shell/AppShell.d.ts.map +1 -1
- package/dist/layout/index.d.ts +1 -1
- package/dist/layout/index.d.ts.map +1 -1
- package/dist/layout/sidebar/examples/01-app-shell-nav.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/accordion/COMPONENT.md +1 -1
- package/src/components/accordion/examples/01-faq-marketing.tsx +1 -1
- package/src/components/accordion/examples/02-settings-panels.tsx +1 -6
- package/src/components/accordion/examples/03-checkout-order-summary.tsx +1 -1
- package/src/components/accordion/examples/04-api-docs-sections.tsx +0 -1
- package/src/components/accordion/examples/05-knowledge-base-categories.tsx +1 -7
- package/src/components/avatar/COMPONENT.md +2 -2
- package/src/components/avatar/examples/app-header-nav.tsx +5 -13
- package/src/components/avatar/examples/comment-thread.tsx +1 -1
- package/src/components/avatar/examples/src-from-state.tsx +0 -1
- package/src/components/badge/examples/admin-tags.tsx +6 -6
- package/src/components/badge/examples/ecommerce-inventory.tsx +5 -5
- package/src/components/badge/examples/inbox-labels.tsx +5 -5
- package/src/components/badge/examples/status-presence.tsx +4 -4
- package/src/components/banner/examples/controlled-visibility.tsx +1 -1
- package/src/components/banner/examples/cookie-consent-row.tsx +0 -1
- package/src/components/banner/examples/feature-promo.tsx +0 -1
- package/src/components/button/examples/canonical-composition.tsx +4 -4
- package/src/components/button/examples/destructive-confirm.tsx +3 -3
- package/src/components/button/examples/form-submit-row.tsx +2 -2
- package/src/components/button/examples/full-width-stack.tsx +2 -2
- package/src/components/button/examples/icon-composition.tsx +6 -6
- package/src/components/button/examples/toolbar.tsx +4 -4
- package/src/components/button-group/COMPONENT.md +1 -1
- package/src/components/button-group/examples/editor-toolbar.tsx +1 -1
- package/src/components/button-group/examples/form-footer.tsx +1 -1
- package/src/components/button-group/examples/full-width.tsx +1 -1
- package/src/components/button-group/examples/view-switcher.tsx +1 -1
- package/src/components/button-group/examples/wizard-actions.tsx +1 -1
- package/src/components/checkbox/examples/bulk-select-rows.tsx +0 -2
- package/src/components/checkbox/examples/empty-label-form.tsx +1 -2
- package/src/components/checkbox/examples/feature-flags-list.tsx +0 -1
- package/src/components/checkbox/examples/settings-panel.tsx +1 -4
- package/src/components/color-picker/COMPONENT.md +2 -2
- package/src/components/color-picker/examples/brand-kit.tsx +3 -3
- package/src/components/color-picker/examples/controlled-form-field.tsx +4 -6
- package/src/components/color-picker/examples/field-eyedropper.tsx +2 -2
- package/src/components/color-picker/examples/format-variants.tsx +2 -2
- package/src/components/color-picker/examples/full-width.tsx +2 -2
- package/src/components/color-picker/examples/minimal-popover.tsx +2 -2
- package/src/components/color-picker/examples/panel-placement.tsx +4 -4
- package/src/components/color-picker/examples/product-variant-swatch.tsx +2 -2
- package/src/components/color-picker/examples/readout-trigger.tsx +2 -2
- package/src/components/color-picker/examples/states.tsx +4 -4
- package/src/components/color-picker/examples/theme-accent.tsx +2 -7
- package/src/components/command-menu/examples/app-palette.tsx +1 -1
- package/src/components/command-menu/examples/composition-tags-footer.tsx +2 -7
- package/src/components/command-menu/examples/controlled-open-search.tsx +1 -1
- package/src/components/command-menu/examples/disabled-items.tsx +1 -1
- package/src/components/command-menu/examples/file-search.tsx +1 -1
- package/src/components/command-menu/examples/full-width-panel.tsx +1 -1
- package/src/components/command-menu/examples/item-icon-as.tsx +1 -1
- package/src/components/command-menu/examples/quick-actions.tsx +1 -1
- package/src/components/command-menu/examples/variants-density-items.tsx +2 -4
- package/src/components/data-table/COMPONENT.md +2 -0
- package/src/components/datepicker/examples/birthdate.tsx +2 -2
- package/src/components/datepicker/examples/booking.tsx +2 -2
- package/src/components/datepicker/examples/full-width-form.tsx +3 -10
- package/src/components/datepicker/examples/range-report.tsx +2 -2
- package/src/components/digit-input/examples/composition.tsx +3 -3
- package/src/components/digit-input/examples/error-state.tsx +3 -5
- package/src/components/digit-input/examples/otp-login.tsx +3 -3
- package/src/components/digit-input/examples/resend-and-clear.tsx +3 -9
- package/src/components/digit-input/examples/verification-step.tsx +4 -4
- package/src/components/divider/examples/card-splits.tsx +2 -2
- package/src/components/divider/examples/inset-stack.tsx +1 -1
- package/src/components/divider/examples/line-spacing-column.tsx +3 -3
- package/src/components/divider/examples/section-breaks.tsx +2 -6
- package/src/components/drawer/COMPONENT.md +1 -1
- package/src/components/drawer/examples/cart-preview.tsx +4 -4
- package/src/components/drawer/examples/explicit-panel.tsx +3 -3
- package/src/components/drawer/examples/filters-panel.tsx +7 -7
- package/src/components/drawer/examples/mobile-nav-sheet.tsx +3 -3
- package/src/components/drawer/examples/settings-side.tsx +6 -6
- package/src/components/dropdown/COMPONENT.md +5 -18
- package/src/components/dropdown/examples/account-menu.tsx +31 -33
- package/src/components/dropdown/examples/actions-menu.tsx +0 -1
- package/src/components/dropdown/examples/composition.tsx +1 -1
- package/src/components/dropdown/examples/controlled.tsx +1 -1
- package/src/components/dropdown/examples/dropdown-examples.module.css +0 -4
- package/src/components/dropdown/examples/full-width.tsx +0 -1
- package/src/components/dropdown/examples/select-like-list.tsx +1 -1
- package/src/components/dropdown/examples/states.tsx +1 -1
- package/src/components/dropdown/examples/variants.tsx +1 -1
- package/src/components/empty-page/COMPONENT.md +143 -0
- package/src/components/empty-page/examples/canonical.tsx +22 -0
- package/src/components/empty-page/examples/examples-demos.module.css +25 -0
- package/src/components/empty-page/examples/sizes.tsx +23 -0
- package/src/components/empty-page/examples/table-region.tsx +35 -0
- package/src/components/file-upload/examples/full-width.tsx +1 -1
- package/src/components/hint/examples/a11y-describedby.tsx +2 -4
- package/src/components/hint/examples/controlled-variant.tsx +1 -1
- package/src/components/hint/examples/error-hint.tsx +3 -5
- package/src/components/hint/examples/field-help.tsx +3 -5
- package/src/components/hint/examples/field-states.tsx +9 -19
- package/src/components/hint/examples/inline-tip-form.tsx +6 -10
- package/src/components/hint/examples/success-confirmation.tsx +3 -5
- package/src/components/hint/examples/variants.tsx +3 -9
- package/src/components/hint/examples/with-icon.tsx +1 -1
- package/src/components/input/examples/affix-url-and-amount.tsx +2 -2
- package/src/components/input/examples/checkout-full-width.tsx +2 -2
- package/src/components/input/examples/login-email.tsx +1 -5
- package/src/components/input/examples/password-with-hint.tsx +1 -1
- package/src/components/input/examples/search.tsx +0 -1
- package/src/components/kbd/examples/composition-chord-icon.tsx +1 -1
- package/src/components/kbd/examples/toolbar-hints.tsx +2 -2
- package/src/components/label/examples/with-icon.tsx +1 -1
- package/src/components/link-button/COMPONENT.md +1 -1
- package/src/components/link-button/examples/composition.tsx +3 -3
- package/src/components/link-button/examples/disabled.tsx +2 -4
- package/src/components/link-button/examples/external.tsx +1 -6
- package/src/components/link-button/examples/inline-text-link.tsx +2 -4
- package/src/components/link-button/examples/navigation-cluster.tsx +4 -12
- package/src/components/modal/COMPONENT.md +4 -4
- package/src/components/modal/examples/canonical-maximal.tsx +4 -4
- package/src/components/modal/examples/pattern-close-behavior.tsx +3 -3
- package/src/components/modal/examples/pattern-controlled.tsx +3 -5
- package/src/components/modal/examples/pattern-full-width-footer.tsx +3 -3
- package/src/components/modal/examples/pattern-portal-and-scroll.tsx +3 -5
- package/src/components/modal/examples/scenario-confirm-delete.tsx +3 -3
- package/src/components/modal/examples/scenario-edit-entity.tsx +4 -4
- package/src/components/modal/examples/scenario-legal-consent.tsx +2 -2
- package/src/components/modal/examples/scenario-multi-field-form.tsx +7 -13
- package/src/components/notification/examples/action-toast.tsx +0 -2
- package/src/components/notification/examples/error-success.tsx +0 -2
- package/src/components/page-content/COMPONENT.md +10 -5
- package/src/components/popover/COMPONENT.md +1 -1
- package/src/components/popover/examples/as-child.tsx +1 -1
- package/src/components/popover/examples/canonical-panel.tsx +2 -2
- package/src/components/popover/examples/composition.tsx +7 -7
- package/src/components/popover/examples/controlled.tsx +4 -4
- package/src/components/popover/examples/date-trigger.tsx +3 -10
- package/src/components/popover/examples/features.tsx +6 -13
- package/src/components/popover/examples/form-in-popover.tsx +5 -13
- package/src/components/popover/examples/full-width.tsx +2 -9
- package/src/components/popover/examples/inset-variants.tsx +6 -6
- package/src/components/popover/examples/placement.tsx +2 -7
- package/src/components/popover/examples/rich-content.tsx +6 -8
- package/src/components/popover/examples/sizes.tsx +5 -5
- package/src/components/popover/examples/states.tsx +4 -4
- package/src/components/progress-bar/examples/indeterminate-busy-state.tsx +1 -1
- package/src/components/progress-bar/examples/step-progress.tsx +0 -1
- package/src/components/progress-bar/examples/upload-progress.tsx +1 -1
- package/src/components/progress-bar/examples/wizard-composition.tsx +1 -1
- package/src/components/progress-circle/examples/a11y-label.tsx +1 -1
- package/src/components/progress-circle/examples/composition.tsx +2 -2
- package/src/components/progress-circle/examples/dashboard-ring.tsx +1 -6
- package/src/components/progress-circle/examples/max-scale.tsx +3 -3
- package/src/components/progress-circle/examples/states.tsx +5 -13
- package/src/components/radio/examples/notification-channel.tsx +3 -3
- package/src/components/radio/examples/plan-picker.tsx +0 -3
- package/src/components/radio/examples/settings-group.tsx +4 -4
- package/src/components/radio/examples/shipping-method.tsx +3 -3
- package/src/components/segmented-control/examples/canonical-composition.tsx +7 -7
- package/src/components/segmented-control/examples/composition.tsx +7 -7
- package/src/components/segmented-control/examples/features.tsx +3 -3
- package/src/components/segmented-control/examples/full-width.tsx +1 -1
- package/src/components/segmented-control/examples/pricing-toggle.tsx +0 -1
- package/src/components/segmented-control/examples/states.tsx +3 -3
- package/src/components/segmented-control/examples/view-mode.tsx +0 -1
- package/src/components/segmented-progress-bar/examples/size-ladder.tsx +1 -1
- package/src/components/select/COMPONENT.md +3 -3
- package/src/components/select/examples/01-country.tsx +2 -4
- package/src/components/select/examples/02-controlled.tsx +2 -4
- package/src/components/select/examples/03-groups.tsx +2 -4
- package/src/components/select/examples/04-full-width-form.tsx +4 -8
- package/src/components/select/examples/pattern-composition.tsx +1 -1
- package/src/components/select/examples/pattern-controlled.tsx +1 -1
- package/src/components/select/examples/pattern-features.tsx +1 -1
- package/src/components/select/examples/pattern-full-width.tsx +1 -1
- package/src/components/select/examples/pattern-native.tsx +1 -1
- package/src/components/select/examples/pattern-states.tsx +4 -4
- package/src/components/slider/COMPONENT.md +1 -1
- package/src/components/stepper/COMPONENT.md +1 -1
- package/src/components/stepper/examples/01-checkout-horizontal.tsx +1 -1
- package/src/components/stepper/examples/02-onboarding-vertical.tsx +1 -1
- package/src/components/stepper/examples/03-vertical-primitive-rail.tsx +1 -1
- package/src/components/stepper/examples/04-checkout-step-error.tsx +1 -1
- package/src/components/stepper/examples/05-horizontal-primitive.tsx +1 -1
- package/src/components/switch/COMPONENT.md +1 -1
- package/src/components/switch/examples/canonical-maximal.tsx +1 -1
- package/src/components/switch/examples/composition.tsx +1 -2
- package/src/components/switch/examples/controlled.tsx +1 -1
- package/src/components/switch/examples/full-width.tsx +1 -1
- package/src/components/switch/examples/scenario-billing-annual.tsx +1 -1
- package/src/components/switch/examples/scenario-feature-flag.tsx +1 -6
- package/src/components/switch/examples/scenario-settings-toggle.tsx +3 -3
- package/src/components/switch/examples/states.tsx +6 -6
- package/src/components/switch/examples/variants.tsx +2 -2
- package/src/components/tabs/COMPONENT.md +1 -1
- package/src/components/tabs/examples/01-settings-vertical-rail.tsx +1 -6
- package/src/components/tag/COMPONENT.md +1 -1
- package/src/components/tag/examples/01-filter-chips.tsx +1 -1
- package/src/components/tag/examples/02-removable-selected-values.tsx +1 -1
- package/src/components/tag/examples/03-status-metadata.tsx +3 -3
- package/src/components/tag/examples/controlled.tsx +1 -6
- package/src/components/tag/examples/removable.tsx +1 -1
- package/src/components/textarea/examples/01-support-ticket.tsx +0 -1
- package/src/components/textarea/examples/02-comment.tsx +1 -2
- package/src/components/textarea/examples/composition.tsx +2 -2
- package/src/components/textarea/examples/controlled.tsx +0 -1
- package/src/components/textarea/examples/features.tsx +3 -12
- package/src/components/textarea/examples/full-width.tsx +1 -1
- package/src/components/textarea/examples/states.tsx +4 -4
- package/src/components/textarea/examples/variants.tsx +2 -2
- package/src/components/tooltip/COMPONENT.md +0 -1
- package/src/components/tooltip/examples/canonical-icon-hint.tsx +1 -1
- package/src/components/tooltip/examples/composition.tsx +3 -9
- package/src/components/tooltip/examples/controlled.tsx +2 -2
- package/src/components/tooltip/examples/delay.tsx +1 -1
- package/src/components/tooltip/examples/long-content.tsx +2 -2
- package/src/components/tooltip/examples/side.tsx +4 -4
- package/src/components/tooltip/examples/states.tsx +2 -2
- package/src/components/tooltip/examples/surfaces.tsx +2 -2
- package/src/layout/app-shell/COMPONENT.md +77 -27
- package/src/layout/sidebar/COMPONENT.md +1 -1
- package/src/layout/sidebar/examples/01-app-shell-nav.tsx +11 -13
- package/src/layout/sidebar/examples/examples.module.css +0 -10
- package/dist/components/dropdown/examples/inset.d.ts +0 -3
- package/dist/components/dropdown/examples/inset.d.ts.map +0 -1
- package/src/components/dropdown/examples/inset.tsx +0 -51
|
@@ -41,6 +41,7 @@ export declare const componentSizes: {
|
|
|
41
41
|
readonly sidebar: readonly ["s", "m", "l", "xl"];
|
|
42
42
|
readonly drawer: readonly ["s", "m", "l", "xl"];
|
|
43
43
|
readonly dataTable: readonly ["s", "m", "l", "xl"];
|
|
44
|
+
readonly emptyPage: readonly ["s", "m", "l", "xl"];
|
|
44
45
|
};
|
|
45
46
|
export declare const buttonModes: readonly ["filled", "stroke", "lighter", "ghost", "fancy"];
|
|
46
47
|
export type InteractionState = (typeof interactionStates)[number];
|
|
@@ -83,5 +84,6 @@ export type ProgressBarSize = (typeof componentSizes.progressBar)[number];
|
|
|
83
84
|
export type SidebarSize = (typeof componentSizes.sidebar)[number];
|
|
84
85
|
export type DrawerSize = (typeof componentSizes.drawer)[number];
|
|
85
86
|
export type DataTableSize = (typeof componentSizes.dataTable)[number];
|
|
87
|
+
export type EmptyPageSize = (typeof componentSizes.emptyPage)[number];
|
|
86
88
|
export type ButtonMode = (typeof buttonModes)[number];
|
|
87
89
|
//# sourceMappingURL=states.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"states.d.ts","sourceRoot":"","sources":["../../../src/internal/states.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,iBAAiB,+EAOpB,CAAC;AAEX,eAAO,MAAM,eAAe,mDAAoD,CAAC;AAEjF,eAAO,MAAM,gBAAgB,uDAAwD,CAAC;AAEtF,eAAO,MAAM,WAAW,kDAAmD,CAAC;AAE5E,eAAO,MAAM,gBAAgB,6BAA8B,CAAC;AAE5D,eAAO,MAAM,iBAAiB;;;;;;;;;CASpB,CAAC;AAEX,eAAO,MAAM,cAAc
|
|
1
|
+
{"version":3,"file":"states.d.ts","sourceRoot":"","sources":["../../../src/internal/states.ts"],"names":[],"mappings":"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"}
|
|
@@ -16,10 +16,6 @@ export type AppShellMainProps = {
|
|
|
16
16
|
className?: string;
|
|
17
17
|
children?: React.ReactNode;
|
|
18
18
|
} & React.HTMLAttributes<HTMLElement>;
|
|
19
|
-
export type AppShellMainInsetProps = {
|
|
20
|
-
className?: string;
|
|
21
|
-
children?: React.ReactNode;
|
|
22
|
-
} & React.HTMLAttributes<HTMLDivElement>;
|
|
23
19
|
export type AppShellTemplateProps = {
|
|
24
20
|
fillViewport?: boolean;
|
|
25
21
|
className?: string;
|
|
@@ -40,10 +36,6 @@ export declare const AppShell: {
|
|
|
40
36
|
className?: string;
|
|
41
37
|
children?: React.ReactNode;
|
|
42
38
|
} & React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
|
|
43
|
-
MainInset: React.ForwardRefExoticComponent<{
|
|
44
|
-
className?: string;
|
|
45
|
-
children?: React.ReactNode;
|
|
46
|
-
} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
47
39
|
Template: React.ForwardRefExoticComponent<{
|
|
48
40
|
fillViewport?: boolean;
|
|
49
41
|
className?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../../src/layout/app-shell/AppShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,MAAM,MAAM,iBAAiB,GAAG;IAC9B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAmBzC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEzC,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,2CAMtE;kBANQ,WAAW;;;AASpB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../../src/layout/app-shell/AppShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,MAAM,MAAM,iBAAiB,GAAG;IAC9B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAmBzC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEzC,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,2CAMtE;kBANQ,WAAW;;;AASpB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;AAoCtC,MAAM,MAAM,qBAAqB,GAAG;IAClC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC;IAC9C,SAAS,CAAC,EAAE,IAAI,CAAC,iBAAiB,EAAE,UAAU,CAAC,CAAC;CACjD,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,KAAK,CAAC,CAAC;AA6BnE,eAAO,MAAM,QAAQ;;uBAhHJ,OAAO;oBACV,MAAM;mBACP,KAAK,CAAC,SAAS;;;;oBAmCd,MAAM;mBACP,KAAK,CAAC,SAAS;;;uBAsCX,OAAO;oBACV,MAAM;QAClB,2CAA2C;aACtC,KAAK,CAAC,SAAS;mBACT,KAAK,CAAC,SAAS;mBACf,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC;oBACjC,IAAI,CAAC,iBAAiB,EAAE,UAAU,CAAC;;CAmChD,CAAC"}
|
package/dist/layout/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export type {
|
|
1
|
+
export type { AppShellMainProps, AppShellNavProps, AppShellRootProps, AppShellTemplateProps, } from "./app-shell/AppShell";
|
|
2
2
|
export { AppShell } from "./app-shell/AppShell";
|
|
3
3
|
export type { SidebarContentProps, SidebarFooterProps, SidebarGroupLabelProps, SidebarGroupProps, SidebarHeaderMainProps, SidebarHeaderProps, SidebarHeaderRowProps, SidebarIdentityButtonProps, SidebarMenuActionProps, SidebarMenuButtonProps, SidebarMenuIconProps, SidebarMenuItemProps, SidebarMenuLabelProps, SidebarMenuLinkProps, SidebarMenuProps, SidebarMenuRouterLinkProps, SidebarMenuTrailingProps, SidebarNavCategoryCountProps, SidebarNavCategoryLabelProps, SidebarNavCategoryPanelProps, SidebarNavCategoryProps, SidebarNavCategoryTriggerProps, SidebarNavDocTreeProps, SidebarNavPanelBodyProps, SidebarNavPanelHeadingProps, SidebarNavPanelProps, SidebarResponsive, SidebarRootProps, SidebarSize, SidebarTextProps, SidebarToggleButtonProps, } from "./sidebar/Sidebar";
|
|
4
4
|
export { Sidebar, useSidebarContext } from "./sidebar/Sidebar";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/layout/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/layout/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,qBAAqB,GACtB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,YAAY,EACV,mBAAmB,EACnB,kBAAkB,EAClB,sBAAsB,EACtB,iBAAiB,EACjB,sBAAsB,EACtB,kBAAkB,EAClB,qBAAqB,EACrB,0BAA0B,EAC1B,sBAAsB,EACtB,sBAAsB,EACtB,oBAAoB,EACpB,oBAAoB,EACpB,qBAAqB,EACrB,oBAAoB,EACpB,gBAAgB,EAChB,0BAA0B,EAC1B,wBAAwB,EACxB,4BAA4B,EAC5B,4BAA4B,EAC5B,4BAA4B,EAC5B,uBAAuB,EACvB,8BAA8B,EAC9B,sBAAsB,EACtB,wBAAwB,EACxB,2BAA2B,EAC3B,oBAAoB,EACpB,iBAAiB,EACjB,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,wBAAwB,GACzB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAC/D,YAAY,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,EACL,6BAA6B,EAC7B,0BAA0B,EAC1B,0BAA0B,EAC1B,6BAA6B,GAC9B,MAAM,yBAAyB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"01-app-shell-nav.d.ts","sourceRoot":"","sources":["../../../../../src/layout/sidebar/examples/01-app-shell-nav.tsx"],"names":[],"mappings":"AAKA;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,yBAAyB,
|
|
1
|
+
{"version":3,"file":"01-app-shell-nav.d.ts","sourceRoot":"","sources":["../../../../../src/layout/sidebar/examples/01-app-shell-nav.tsx"],"names":[],"mappings":"AAKA;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,yBAAyB,4CA+EhD"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "prime-ui-kit",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.1",
|
|
4
4
|
"description": "React 19 UI kit: CSS Modules, semantic design tokens (--prime-sys-*), composable components — forms, modals, selects, tables, navigation, overlays. TypeScript, ESM, a11y-oriented.",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.js",
|
|
@@ -40,7 +40,7 @@ import { Package, ShieldCheck, Truck } from "lucide-react";
|
|
|
40
40
|
|
|
41
41
|
export function Example() {
|
|
42
42
|
return (
|
|
43
|
-
<Accordion.Root type="single"
|
|
43
|
+
<Accordion.Root type="single" layout="grouped" defaultValue="delivery" collapsible>
|
|
44
44
|
<Accordion.Item value="delivery">
|
|
45
45
|
<Accordion.Header>
|
|
46
46
|
<Accordion.Trigger>
|
|
@@ -9,7 +9,7 @@ import styles from "./examples.module.css";
|
|
|
9
9
|
*/
|
|
10
10
|
export default function AccordionExampleFaqMarketing() {
|
|
11
11
|
return (
|
|
12
|
-
<Accordion.Root type="single"
|
|
12
|
+
<Accordion.Root type="single" layout="grouped" defaultValue="shipping">
|
|
13
13
|
<Accordion.Item value="shipping">
|
|
14
14
|
<Accordion.Header>
|
|
15
15
|
<Accordion.Trigger>
|
|
@@ -10,12 +10,7 @@ import styles from "./examples.module.css";
|
|
|
10
10
|
*/
|
|
11
11
|
export default function AccordionExampleSettingsPanels() {
|
|
12
12
|
return (
|
|
13
|
-
<Accordion.Root
|
|
14
|
-
type="multiple"
|
|
15
|
-
size="m"
|
|
16
|
-
layout="separate"
|
|
17
|
-
defaultValue={["profile", "notifications"]}
|
|
18
|
-
>
|
|
13
|
+
<Accordion.Root type="multiple" layout="separate" defaultValue={["profile", "notifications"]}>
|
|
19
14
|
<Accordion.Item value="profile">
|
|
20
15
|
<Accordion.Header>
|
|
21
16
|
<Accordion.Trigger>
|
|
@@ -10,7 +10,7 @@ import styles from "./examples.module.css";
|
|
|
10
10
|
*/
|
|
11
11
|
export default function AccordionExampleCheckoutOrderSummary() {
|
|
12
12
|
return (
|
|
13
|
-
<Accordion.Root type="single"
|
|
13
|
+
<Accordion.Root type="single" layout="grouped" defaultValue="totals">
|
|
14
14
|
<Accordion.Item value="totals">
|
|
15
15
|
<Accordion.Header>
|
|
16
16
|
<Accordion.Trigger>
|
|
@@ -10,13 +10,7 @@ import styles from "./examples.module.css";
|
|
|
10
10
|
*/
|
|
11
11
|
export default function AccordionExampleKnowledgeBaseCategories() {
|
|
12
12
|
return (
|
|
13
|
-
<Accordion.Root
|
|
14
|
-
type="single"
|
|
15
|
-
size="m"
|
|
16
|
-
layout="separate"
|
|
17
|
-
defaultValue="basics"
|
|
18
|
-
collapsible={false}
|
|
19
|
-
>
|
|
13
|
+
<Accordion.Root type="single" layout="separate" defaultValue="basics" collapsible={false}>
|
|
20
14
|
<Accordion.Item value="basics">
|
|
21
15
|
<Accordion.Header>
|
|
22
16
|
<Accordion.Trigger>
|
|
@@ -46,7 +46,7 @@ export function CanonicalAvatarDemo() {
|
|
|
46
46
|
<Typography as="p" variant="body-small" tone="muted">
|
|
47
47
|
Overlapping group + overflow
|
|
48
48
|
</Typography>
|
|
49
|
-
<Avatar.Group.Root
|
|
49
|
+
<Avatar.Group.Root aria-label="Reviewers: three faces, two not shown">
|
|
50
50
|
<Avatar.Root>
|
|
51
51
|
<Avatar.Image src={sampleSrc} alt="" />
|
|
52
52
|
<Avatar.Fallback>A</Avatar.Fallback>
|
|
@@ -63,7 +63,7 @@ export function CanonicalAvatarDemo() {
|
|
|
63
63
|
<Typography as="p" variant="body-small" tone="muted">
|
|
64
64
|
Icon-only fallback
|
|
65
65
|
</Typography>
|
|
66
|
-
<Avatar.Root
|
|
66
|
+
<Avatar.Root aria-label="Invitee, no photo yet">
|
|
67
67
|
<Avatar.Fallback>
|
|
68
68
|
<Icon name="field.email" size="l" tone="subtle" />
|
|
69
69
|
</Avatar.Fallback>
|
|
@@ -16,25 +16,17 @@ export default function AvatarAppHeaderNavExample() {
|
|
|
16
16
|
Prime Console
|
|
17
17
|
</Typography.Root>
|
|
18
18
|
<nav className={styles.row} aria-label="Primary">
|
|
19
|
-
<LinkButton.Root href="#overview"
|
|
20
|
-
|
|
21
|
-
</LinkButton.Root>
|
|
22
|
-
<LinkButton.Root href="#projects" size="m">
|
|
23
|
-
Projects
|
|
24
|
-
</LinkButton.Root>
|
|
25
|
-
<LinkButton.Root href="#settings" size="m">
|
|
26
|
-
Settings
|
|
27
|
-
</LinkButton.Root>
|
|
19
|
+
<LinkButton.Root href="#overview">Overview</LinkButton.Root>
|
|
20
|
+
<LinkButton.Root href="#projects">Projects</LinkButton.Root>
|
|
21
|
+
<LinkButton.Root href="#settings">Settings</LinkButton.Root>
|
|
28
22
|
</nav>
|
|
29
23
|
</div>
|
|
30
24
|
<div className={styles.navUser}>
|
|
31
|
-
<Avatar.Root
|
|
25
|
+
<Avatar.Root aria-label="Signed in as Jamie Chen">
|
|
32
26
|
<Avatar.Image src={portrait} alt="" />
|
|
33
27
|
<Avatar.Fallback>JC</Avatar.Fallback>
|
|
34
28
|
</Avatar.Root>
|
|
35
|
-
<LinkButton.Root href="#account"
|
|
36
|
-
Account
|
|
37
|
-
</LinkButton.Root>
|
|
29
|
+
<LinkButton.Root href="#account">Account</LinkButton.Root>
|
|
38
30
|
</div>
|
|
39
31
|
</header>
|
|
40
32
|
);
|
|
@@ -38,7 +38,7 @@ export default function AvatarCommentThreadExample() {
|
|
|
38
38
|
<ul className={styles.list} aria-label="Discussion">
|
|
39
39
|
{comments.map((c) => (
|
|
40
40
|
<li key={c.id} className={styles.rowStretch}>
|
|
41
|
-
<Avatar.Root
|
|
41
|
+
<Avatar.Root aria-label={c.author}>
|
|
42
42
|
{c.src ? <Avatar.Image src={c.src} alt="" /> : null}
|
|
43
43
|
<Avatar.Fallback>{c.initials}</Avatar.Fallback>
|
|
44
44
|
</Avatar.Root>
|
|
@@ -12,22 +12,22 @@ const row: CSSProperties = {
|
|
|
12
12
|
export default function BadgeAdminTagsExample() {
|
|
13
13
|
return (
|
|
14
14
|
<div style={row}>
|
|
15
|
-
<Badge.Root color="orange" variant="filled"
|
|
15
|
+
<Badge.Root color="orange" variant="filled">
|
|
16
16
|
Staging
|
|
17
17
|
</Badge.Root>
|
|
18
|
-
<Badge.Root color="green" variant="light"
|
|
18
|
+
<Badge.Root color="green" variant="light">
|
|
19
19
|
Production
|
|
20
20
|
</Badge.Root>
|
|
21
|
-
<Badge.Root color="gray" variant="stroke"
|
|
21
|
+
<Badge.Root color="gray" variant="stroke">
|
|
22
22
|
Internal
|
|
23
23
|
</Badge.Root>
|
|
24
|
-
<Badge.Root color="blue" variant="lighter"
|
|
24
|
+
<Badge.Root color="blue" variant="lighter">
|
|
25
25
|
Beta
|
|
26
26
|
</Badge.Root>
|
|
27
|
-
<Badge.Root color="purple" variant="filled"
|
|
27
|
+
<Badge.Root color="purple" variant="filled">
|
|
28
28
|
Owner
|
|
29
29
|
</Badge.Root>
|
|
30
|
-
<Badge.Root color="yellow" variant="light"
|
|
30
|
+
<Badge.Root color="yellow" variant="light">
|
|
31
31
|
Feature flag: new billing
|
|
32
32
|
</Badge.Root>
|
|
33
33
|
</div>
|
|
@@ -12,19 +12,19 @@ const row: CSSProperties = {
|
|
|
12
12
|
export default function BadgeEcommerceInventoryExample() {
|
|
13
13
|
return (
|
|
14
14
|
<div style={row}>
|
|
15
|
-
<Badge.Root color="green" variant="filled"
|
|
15
|
+
<Badge.Root color="green" variant="filled">
|
|
16
16
|
In stock
|
|
17
17
|
</Badge.Root>
|
|
18
|
-
<Badge.Root color="orange" variant="light"
|
|
18
|
+
<Badge.Root color="orange" variant="light">
|
|
19
19
|
Low stock · 3 left
|
|
20
20
|
</Badge.Root>
|
|
21
|
-
<Badge.Root color="red" variant="lighter"
|
|
21
|
+
<Badge.Root color="red" variant="lighter">
|
|
22
22
|
Out of stock
|
|
23
23
|
</Badge.Root>
|
|
24
|
-
<Badge.Root color="purple" variant="stroke"
|
|
24
|
+
<Badge.Root color="purple" variant="stroke">
|
|
25
25
|
Sale · 20% off
|
|
26
26
|
</Badge.Root>
|
|
27
|
-
<Badge.Root color="teal" variant="filled"
|
|
27
|
+
<Badge.Root color="teal" variant="filled">
|
|
28
28
|
<Badge.Icon>
|
|
29
29
|
<Icon name="status.locked" />
|
|
30
30
|
</Badge.Icon>
|
|
@@ -12,22 +12,22 @@ const row: CSSProperties = {
|
|
|
12
12
|
export default function BadgeInboxLabelsExample() {
|
|
13
13
|
return (
|
|
14
14
|
<div style={row}>
|
|
15
|
-
<Badge.Root color="red" variant="filled"
|
|
15
|
+
<Badge.Root color="red" variant="filled">
|
|
16
16
|
Urgent
|
|
17
17
|
</Badge.Root>
|
|
18
|
-
<Badge.Root color="blue" variant="light"
|
|
18
|
+
<Badge.Root color="blue" variant="light">
|
|
19
19
|
Unread
|
|
20
20
|
</Badge.Root>
|
|
21
|
-
<Badge.Root color="gray" variant="stroke"
|
|
21
|
+
<Badge.Root color="gray" variant="stroke">
|
|
22
22
|
Archived
|
|
23
23
|
</Badge.Root>
|
|
24
|
-
<Badge.Root color="sky" variant="lighter"
|
|
24
|
+
<Badge.Root color="sky" variant="lighter">
|
|
25
25
|
<Badge.Icon>
|
|
26
26
|
<Icon name="field.email" />
|
|
27
27
|
</Badge.Icon>
|
|
28
28
|
Newsletter
|
|
29
29
|
</Badge.Root>
|
|
30
|
-
<Badge.Root color="purple" variant="light"
|
|
30
|
+
<Badge.Root color="purple" variant="light">
|
|
31
31
|
<Badge.Dot />
|
|
32
32
|
VIP list
|
|
33
33
|
</Badge.Root>
|
|
@@ -15,16 +15,16 @@ const row: CSSProperties = {
|
|
|
15
15
|
export default function BadgeStatusPresenceExample() {
|
|
16
16
|
return (
|
|
17
17
|
<div style={row}>
|
|
18
|
-
<Badge.Root variant="status" status="online" label="Alex Morgan is online"
|
|
18
|
+
<Badge.Root variant="status" status="online" label="Alex Morgan is online">
|
|
19
19
|
Online
|
|
20
20
|
</Badge.Root>
|
|
21
|
-
<Badge.Root variant="status" status="offline" label="Alex Morgan is offline"
|
|
21
|
+
<Badge.Root variant="status" status="offline" label="Alex Morgan is offline">
|
|
22
22
|
Offline
|
|
23
23
|
</Badge.Root>
|
|
24
|
-
<Badge.Root variant="status" status="away" label="Alex Morgan is away"
|
|
24
|
+
<Badge.Root variant="status" status="away" label="Alex Morgan is away">
|
|
25
25
|
Away
|
|
26
26
|
</Badge.Root>
|
|
27
|
-
<Badge.Root variant="status" status="busy" label="Alex Morgan is busy"
|
|
27
|
+
<Badge.Root variant="status" status="busy" label="Alex Morgan is busy">
|
|
28
28
|
Busy
|
|
29
29
|
</Badge.Root>
|
|
30
30
|
</div>
|
|
@@ -14,7 +14,7 @@ export default function BannerControlledVisibilityExample() {
|
|
|
14
14
|
</Button.Root>
|
|
15
15
|
) : null}
|
|
16
16
|
{visible ? (
|
|
17
|
-
<Banner.Root
|
|
17
|
+
<Banner.Root status="feature" variant="lighter">
|
|
18
18
|
<Banner.Content>
|
|
19
19
|
<Banner.Icon as={Info} aria-hidden />
|
|
20
20
|
<Banner.Title>Controlled visibility</Banner.Title>
|
|
@@ -21,23 +21,23 @@ export default function CanonicalCompositionExample() {
|
|
|
21
21
|
alignItems: "center",
|
|
22
22
|
}}
|
|
23
23
|
>
|
|
24
|
-
<Button.Root variant="primary" mode="filled"
|
|
24
|
+
<Button.Root variant="primary" mode="filled">
|
|
25
25
|
<Button.Icon>
|
|
26
26
|
<Icon name="action.copy" size="s" />
|
|
27
27
|
</Button.Icon>
|
|
28
28
|
Copy link
|
|
29
29
|
</Button.Root>
|
|
30
|
-
<Button.Root variant="neutral" mode="stroke"
|
|
30
|
+
<Button.Root variant="neutral" mode="stroke">
|
|
31
31
|
<Button.Icon>
|
|
32
32
|
<Icon name="field.email" size="s" tone="subtle" />
|
|
33
33
|
</Button.Icon>
|
|
34
34
|
Contact sales
|
|
35
35
|
</Button.Root>
|
|
36
|
-
<Button.Root variant="error" mode="lighter"
|
|
36
|
+
<Button.Root variant="error" mode="lighter">
|
|
37
37
|
Remove from list
|
|
38
38
|
</Button.Root>
|
|
39
39
|
</div>
|
|
40
|
-
<Button.Root variant="primary" mode="filled"
|
|
40
|
+
<Button.Root variant="primary" mode="filled" loading>
|
|
41
41
|
<Button.Spinner />
|
|
42
42
|
Saving…
|
|
43
43
|
</Button.Root>
|
|
@@ -10,7 +10,7 @@ export default function DestructiveConfirmExample() {
|
|
|
10
10
|
return (
|
|
11
11
|
<Modal.Root open={open} onOpenChange={setOpen}>
|
|
12
12
|
<Modal.Trigger>
|
|
13
|
-
<Button.Root variant="error" mode="stroke"
|
|
13
|
+
<Button.Root variant="error" mode="stroke">
|
|
14
14
|
Delete project
|
|
15
15
|
</Button.Root>
|
|
16
16
|
</Modal.Trigger>
|
|
@@ -19,11 +19,11 @@ export default function DestructiveConfirmExample() {
|
|
|
19
19
|
footer={
|
|
20
20
|
<>
|
|
21
21
|
<Modal.Close>
|
|
22
|
-
<Button.Root variant="neutral" mode="stroke"
|
|
22
|
+
<Button.Root variant="neutral" mode="stroke">
|
|
23
23
|
Cancel
|
|
24
24
|
</Button.Root>
|
|
25
25
|
</Modal.Close>
|
|
26
|
-
<Button.Root variant="error" mode="filled"
|
|
26
|
+
<Button.Root variant="error" mode="filled" onClick={() => setOpen(false)}>
|
|
27
27
|
Delete
|
|
28
28
|
</Button.Root>
|
|
29
29
|
</>
|
|
@@ -21,10 +21,10 @@ export default function FormSubmitRowExample() {
|
|
|
21
21
|
justifyContent: "flex-end",
|
|
22
22
|
}}
|
|
23
23
|
>
|
|
24
|
-
<Button.Root type="button" variant="neutral" mode="stroke"
|
|
24
|
+
<Button.Root type="button" variant="neutral" mode="stroke">
|
|
25
25
|
Cancel
|
|
26
26
|
</Button.Root>
|
|
27
|
-
<Button.Root type="submit" variant="primary" mode="filled"
|
|
27
|
+
<Button.Root type="submit" variant="primary" mode="filled" loading={loading}>
|
|
28
28
|
<Button.Spinner />
|
|
29
29
|
Save changes
|
|
30
30
|
</Button.Root>
|
|
@@ -12,10 +12,10 @@ export default function FullWidthStackExample() {
|
|
|
12
12
|
gap: "var(--prime-sys-spacing-m)",
|
|
13
13
|
}}
|
|
14
14
|
>
|
|
15
|
-
<Button.Root variant="primary" mode="filled"
|
|
15
|
+
<Button.Root variant="primary" mode="filled" fullWidth>
|
|
16
16
|
Button full width primary
|
|
17
17
|
</Button.Root>
|
|
18
|
-
<Button.Root variant="neutral" mode="stroke"
|
|
18
|
+
<Button.Root variant="neutral" mode="stroke" fullWidth>
|
|
19
19
|
Button full width neutral stroke
|
|
20
20
|
</Button.Root>
|
|
21
21
|
</div>
|
|
@@ -21,38 +21,38 @@ export default function IconCompositionExample() {
|
|
|
21
21
|
}}
|
|
22
22
|
>
|
|
23
23
|
<div style={rowStyle}>
|
|
24
|
-
<Button.Root variant="primary" mode="filled"
|
|
24
|
+
<Button.Root variant="primary" mode="filled">
|
|
25
25
|
<Button.Icon>
|
|
26
26
|
<Icon name="field.email" size="s" />
|
|
27
27
|
</Button.Icon>
|
|
28
28
|
Button primary icon left
|
|
29
29
|
</Button.Root>
|
|
30
|
-
<Button.Root variant="primary" mode="filled"
|
|
30
|
+
<Button.Root variant="primary" mode="filled">
|
|
31
31
|
Button primary icon right
|
|
32
32
|
<Button.Icon>
|
|
33
33
|
<Icon name="action.close" size="s" />
|
|
34
34
|
</Button.Icon>
|
|
35
35
|
</Button.Root>
|
|
36
|
-
<Button.Root variant="primary" mode="filled"
|
|
36
|
+
<Button.Root variant="primary" mode="filled" aria-label="Button primary icon only">
|
|
37
37
|
<Button.Icon>
|
|
38
38
|
<Icon name="action.close" size="s" />
|
|
39
39
|
</Button.Icon>
|
|
40
40
|
</Button.Root>
|
|
41
41
|
</div>
|
|
42
42
|
<div style={rowStyle}>
|
|
43
|
-
<Button.Root variant="neutral" mode="stroke"
|
|
43
|
+
<Button.Root variant="neutral" mode="stroke">
|
|
44
44
|
<Button.Icon>
|
|
45
45
|
<Icon name="field.email" size="s" tone="subtle" />
|
|
46
46
|
</Button.Icon>
|
|
47
47
|
Button icon left
|
|
48
48
|
</Button.Root>
|
|
49
|
-
<Button.Root variant="neutral" mode="stroke"
|
|
49
|
+
<Button.Root variant="neutral" mode="stroke">
|
|
50
50
|
Button icon right
|
|
51
51
|
<Button.Icon>
|
|
52
52
|
<Icon name="action.close" size="s" tone="subtle" />
|
|
53
53
|
</Button.Icon>
|
|
54
54
|
</Button.Root>
|
|
55
|
-
<Button.Root variant="neutral" mode="stroke"
|
|
55
|
+
<Button.Root variant="neutral" mode="stroke" aria-label="Button icon only">
|
|
56
56
|
<Button.Icon>
|
|
57
57
|
<Icon name="action.close" size="s" tone="subtle" />
|
|
58
58
|
</Button.Icon>
|
|
@@ -15,19 +15,19 @@ export default function ToolbarExample() {
|
|
|
15
15
|
alignItems: "center",
|
|
16
16
|
}}
|
|
17
17
|
>
|
|
18
|
-
<Button.Root variant="neutral" mode="ghost"
|
|
18
|
+
<Button.Root variant="neutral" mode="ghost">
|
|
19
19
|
Bold
|
|
20
20
|
</Button.Root>
|
|
21
|
-
<Button.Root variant="neutral" mode="ghost"
|
|
21
|
+
<Button.Root variant="neutral" mode="ghost">
|
|
22
22
|
Italic
|
|
23
23
|
</Button.Root>
|
|
24
|
-
<Button.Root variant="neutral" mode="ghost"
|
|
24
|
+
<Button.Root variant="neutral" mode="ghost" aria-label="Insert link">
|
|
25
25
|
<Button.Icon>
|
|
26
26
|
<Icon name="field.email" size="s" tone="subtle" />
|
|
27
27
|
</Button.Icon>
|
|
28
28
|
</Button.Root>
|
|
29
29
|
<span style={{ flex: 1, minWidth: "var(--prime-sys-spacing-m)" }} aria-hidden />
|
|
30
|
-
<Button.Root variant="primary" mode="filled"
|
|
30
|
+
<Button.Root variant="primary" mode="filled">
|
|
31
31
|
<Button.Icon>
|
|
32
32
|
<Icon name="action.upload" size="s" />
|
|
33
33
|
</Button.Icon>
|
|
@@ -62,7 +62,7 @@ import { ButtonGroup } from "prime-ui-kit";
|
|
|
62
62
|
|
|
63
63
|
export function Example() {
|
|
64
64
|
return (
|
|
65
|
-
<ButtonGroup.Root aria-label="Options"
|
|
65
|
+
<ButtonGroup.Root aria-label="Options">
|
|
66
66
|
<ButtonGroup.Item type="button">One</ButtonGroup.Item>
|
|
67
67
|
<ButtonGroup.Item type="button">Two</ButtonGroup.Item>
|
|
68
68
|
</ButtonGroup.Root>
|
|
@@ -10,7 +10,7 @@ export default function EditorToolbarExample() {
|
|
|
10
10
|
const [marks, setMarks] = React.useState({ bold: true, italic: false, underline: false });
|
|
11
11
|
|
|
12
12
|
return (
|
|
13
|
-
<ButtonGroup.Root aria-label="Text formatting"
|
|
13
|
+
<ButtonGroup.Root aria-label="Text formatting">
|
|
14
14
|
<ButtonGroup.Item
|
|
15
15
|
aria-label="Bold"
|
|
16
16
|
pressed={marks.bold}
|
|
@@ -10,7 +10,7 @@ export default function FormFooterExample() {
|
|
|
10
10
|
e.preventDefault();
|
|
11
11
|
}}
|
|
12
12
|
>
|
|
13
|
-
<ButtonGroup.Root aria-label="Save or reset draft"
|
|
13
|
+
<ButtonGroup.Root aria-label="Save or reset draft">
|
|
14
14
|
<ButtonGroup.Item type="submit">Save</ButtonGroup.Item>
|
|
15
15
|
<ButtonGroup.Item type="reset">Reset</ButtonGroup.Item>
|
|
16
16
|
</ButtonGroup.Root>
|
|
@@ -6,7 +6,7 @@ import { ButtonGroup } from "prime-ui-kit";
|
|
|
6
6
|
export default function FullWidthExample() {
|
|
7
7
|
return (
|
|
8
8
|
<div className="w-full max-w-md">
|
|
9
|
-
<ButtonGroup.Root aria-label="Plan tier" className="w-full"
|
|
9
|
+
<ButtonGroup.Root aria-label="Plan tier" className="w-full">
|
|
10
10
|
<ButtonGroup.Item className="min-w-0 flex-1" type="button">
|
|
11
11
|
Basic
|
|
12
12
|
</ButtonGroup.Item>
|
|
@@ -10,7 +10,7 @@ export default function ViewSwitcherExample() {
|
|
|
10
10
|
const [mode, setMode] = React.useState<ViewMode>("list");
|
|
11
11
|
|
|
12
12
|
return (
|
|
13
|
-
<ButtonGroup.Root aria-label="View layout"
|
|
13
|
+
<ButtonGroup.Root aria-label="View layout">
|
|
14
14
|
<ButtonGroup.Item pressed={mode === "list"} type="button" onClick={() => setMode("list")}>
|
|
15
15
|
List
|
|
16
16
|
</ButtonGroup.Item>
|
|
@@ -10,7 +10,7 @@ export default function WizardActionsExample() {
|
|
|
10
10
|
const [step, setStep] = React.useState(0);
|
|
11
11
|
|
|
12
12
|
return (
|
|
13
|
-
<ButtonGroup.Root aria-label="Wizard navigation"
|
|
13
|
+
<ButtonGroup.Root aria-label="Wizard navigation">
|
|
14
14
|
<ButtonGroup.Item
|
|
15
15
|
disabled={step === 0}
|
|
16
16
|
type="button"
|
|
@@ -32,7 +32,6 @@ export function BulkSelectRowsExample() {
|
|
|
32
32
|
return (
|
|
33
33
|
<>
|
|
34
34
|
<Checkbox.Root
|
|
35
|
-
size="m"
|
|
36
35
|
checked={allSelected}
|
|
37
36
|
indeterminate={headerIndeterminate}
|
|
38
37
|
onChange={(e) => toggleAll(e.target.checked)}
|
|
@@ -42,7 +41,6 @@ export function BulkSelectRowsExample() {
|
|
|
42
41
|
{ROW_IDS.map((id) => (
|
|
43
42
|
<Checkbox.Root
|
|
44
43
|
key={id}
|
|
45
|
-
size="m"
|
|
46
44
|
checked={selected.has(id)}
|
|
47
45
|
onChange={(e) => toggleRow(id, e.target.checked)}
|
|
48
46
|
>
|
|
@@ -7,11 +7,10 @@ import { Checkbox } from "prime-ui-kit";
|
|
|
7
7
|
export function EmptyLabelFormExample() {
|
|
8
8
|
return (
|
|
9
9
|
<>
|
|
10
|
-
<Checkbox.Root
|
|
10
|
+
<Checkbox.Root aria-label="Receive digest by email (no visible label)">
|
|
11
11
|
<Checkbox.Label />
|
|
12
12
|
</Checkbox.Root>
|
|
13
13
|
<Checkbox.Root
|
|
14
|
-
size="m"
|
|
15
14
|
name="newsletter"
|
|
16
15
|
value="weekly"
|
|
17
16
|
defaultChecked
|