@kushagradhawan/kookie-ui 0.1.28 → 0.1.30
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/components.css +4742 -2680
- package/dist/cjs/components/_internal/base-button.d.ts +36 -0
- package/dist/cjs/components/_internal/base-button.d.ts.map +1 -1
- package/dist/cjs/components/_internal/base-button.js +1 -1
- package/dist/cjs/components/_internal/base-button.js.map +3 -3
- package/dist/cjs/components/_internal/base-button.props.d.ts +61 -0
- package/dist/cjs/components/_internal/base-button.props.d.ts.map +1 -1
- package/dist/cjs/components/_internal/base-button.props.js +1 -1
- package/dist/cjs/components/_internal/base-button.props.js.map +3 -3
- package/dist/cjs/components/_internal/base-checkbox.props.d.ts +6 -1
- package/dist/cjs/components/_internal/base-checkbox.props.d.ts.map +1 -1
- package/dist/cjs/components/_internal/base-checkbox.props.js +1 -1
- package/dist/cjs/components/_internal/base-checkbox.props.js.map +3 -3
- package/dist/cjs/components/_internal/base-menu.props.d.ts +8 -0
- package/dist/cjs/components/_internal/base-menu.props.d.ts.map +1 -1
- package/dist/cjs/components/_internal/base-menu.props.js +1 -1
- package/dist/cjs/components/_internal/base-menu.props.js.map +3 -3
- package/dist/cjs/components/_internal/base-radio.props.d.ts +6 -1
- package/dist/cjs/components/_internal/base-radio.props.d.ts.map +1 -1
- package/dist/cjs/components/_internal/base-radio.props.js +1 -1
- package/dist/cjs/components/_internal/base-radio.props.js.map +3 -3
- package/dist/cjs/components/accordion.d.ts +22 -0
- package/dist/cjs/components/accordion.d.ts.map +1 -0
- package/dist/cjs/components/accordion.js +2 -0
- package/dist/cjs/components/accordion.js.map +7 -0
- package/dist/cjs/components/accordion.props.d.ts +97 -0
- package/dist/cjs/components/accordion.props.d.ts.map +1 -0
- package/dist/cjs/components/accordion.props.js +2 -0
- package/dist/cjs/components/accordion.props.js.map +7 -0
- package/dist/cjs/components/alert-dialog.d.ts.map +1 -1
- package/dist/cjs/components/alert-dialog.js +1 -1
- package/dist/cjs/components/alert-dialog.js.map +3 -3
- package/dist/cjs/components/alert-dialog.props.d.ts +69 -2
- package/dist/cjs/components/alert-dialog.props.d.ts.map +1 -1
- package/dist/cjs/components/alert-dialog.props.js +1 -1
- package/dist/cjs/components/alert-dialog.props.js.map +3 -3
- package/dist/cjs/components/avatar.d.ts.map +1 -1
- package/dist/cjs/components/avatar.js +1 -1
- package/dist/cjs/components/avatar.js.map +3 -3
- package/dist/cjs/components/avatar.props.d.ts +9 -1
- package/dist/cjs/components/avatar.props.d.ts.map +1 -1
- package/dist/cjs/components/avatar.props.js +1 -1
- package/dist/cjs/components/avatar.props.js.map +3 -3
- package/dist/cjs/components/badge.d.ts +8 -1
- package/dist/cjs/components/badge.d.ts.map +1 -1
- package/dist/cjs/components/badge.js +1 -1
- package/dist/cjs/components/badge.js.map +3 -3
- package/dist/cjs/components/badge.props.d.ts +14 -6
- package/dist/cjs/components/badge.props.d.ts.map +1 -1
- package/dist/cjs/components/badge.props.js +1 -1
- package/dist/cjs/components/badge.props.js.map +3 -3
- package/dist/cjs/components/blockquote.props.d.ts +1 -1
- package/dist/cjs/components/button.d.ts +53 -1
- package/dist/cjs/components/button.d.ts.map +1 -1
- package/dist/cjs/components/button.js +1 -1
- package/dist/cjs/components/button.js.map +3 -3
- package/dist/cjs/components/button.props.d.ts +17 -0
- package/dist/cjs/components/button.props.d.ts.map +1 -1
- package/dist/cjs/components/button.props.js.map +2 -2
- package/dist/cjs/components/callout.d.ts +4 -0
- package/dist/cjs/components/callout.d.ts.map +1 -1
- package/dist/cjs/components/callout.js +1 -1
- package/dist/cjs/components/callout.js.map +3 -3
- package/dist/cjs/components/callout.props.d.ts +9 -1
- package/dist/cjs/components/callout.props.d.ts.map +1 -1
- package/dist/cjs/components/callout.props.js +1 -1
- package/dist/cjs/components/callout.props.js.map +3 -3
- package/dist/cjs/components/card.d.ts.map +1 -1
- package/dist/cjs/components/card.js +1 -1
- package/dist/cjs/components/card.js.map +3 -3
- package/dist/cjs/components/card.props.d.ts +5 -0
- package/dist/cjs/components/card.props.d.ts.map +1 -1
- package/dist/cjs/components/card.props.js +1 -1
- package/dist/cjs/components/card.props.js.map +3 -3
- package/dist/cjs/components/checkbox-cards.d.ts.map +1 -1
- package/dist/cjs/components/checkbox-cards.js +1 -1
- package/dist/cjs/components/checkbox-cards.js.map +3 -3
- package/dist/cjs/components/checkbox-cards.props.d.ts +2 -2
- package/dist/cjs/components/checkbox-cards.props.js +1 -1
- package/dist/cjs/components/checkbox-cards.props.js.map +2 -2
- package/dist/cjs/components/checkbox-group.props.d.ts +6 -1
- package/dist/cjs/components/checkbox-group.props.d.ts.map +1 -1
- package/dist/cjs/components/checkbox.d.ts.map +1 -1
- package/dist/cjs/components/checkbox.js +1 -1
- package/dist/cjs/components/checkbox.js.map +3 -3
- package/dist/cjs/components/code.js.map +1 -1
- package/dist/cjs/components/code.props.d.ts +1 -1
- package/dist/cjs/components/context-menu.d.ts +1 -1
- package/dist/cjs/components/context-menu.d.ts.map +1 -1
- package/dist/cjs/components/context-menu.js +1 -1
- package/dist/cjs/components/context-menu.js.map +3 -3
- package/dist/cjs/components/dialog.d.ts.map +1 -1
- package/dist/cjs/components/dialog.js +1 -1
- package/dist/cjs/components/dialog.js.map +3 -3
- package/dist/cjs/components/dialog.props.d.ts +6 -1
- package/dist/cjs/components/dialog.props.d.ts.map +1 -1
- package/dist/cjs/components/dialog.props.js +1 -1
- package/dist/cjs/components/dialog.props.js.map +3 -3
- package/dist/cjs/components/dropdown-menu.d.ts +1 -1
- package/dist/cjs/components/dropdown-menu.d.ts.map +1 -1
- package/dist/cjs/components/dropdown-menu.js +1 -1
- package/dist/cjs/components/dropdown-menu.js.map +3 -3
- package/dist/cjs/components/heading.props.d.ts +1 -1
- package/dist/cjs/components/icon-button.d.ts +79 -1
- package/dist/cjs/components/icon-button.d.ts.map +1 -1
- package/dist/cjs/components/icon-button.js +4 -1
- package/dist/cjs/components/icon-button.js.map +3 -3
- package/dist/cjs/components/image.d.ts +131 -12
- package/dist/cjs/components/image.d.ts.map +1 -1
- package/dist/cjs/components/image.js +1 -1
- package/dist/cjs/components/image.js.map +3 -3
- package/dist/cjs/components/image.props.d.ts +136 -21
- package/dist/cjs/components/image.props.d.ts.map +1 -1
- package/dist/cjs/components/image.props.js +1 -1
- package/dist/cjs/components/image.props.js.map +3 -3
- package/dist/cjs/components/index.d.ts +1 -0
- package/dist/cjs/components/index.d.ts.map +1 -1
- package/dist/cjs/components/index.js +1 -1
- package/dist/cjs/components/index.js.map +3 -3
- package/dist/cjs/components/link.props.d.ts +1 -1
- package/dist/cjs/components/progress.props.d.ts +2 -2
- package/dist/cjs/components/progress.props.js +1 -1
- package/dist/cjs/components/progress.props.js.map +2 -2
- package/dist/cjs/components/radio-cards.d.ts.map +1 -1
- package/dist/cjs/components/radio-cards.js +1 -1
- package/dist/cjs/components/radio-cards.js.map +3 -3
- package/dist/cjs/components/radio-cards.props.d.ts +2 -2
- package/dist/cjs/components/radio-cards.props.js +1 -1
- package/dist/cjs/components/radio-cards.props.js.map +2 -2
- package/dist/cjs/components/radio.d.ts.map +1 -1
- package/dist/cjs/components/radio.js +1 -1
- package/dist/cjs/components/radio.js.map +3 -3
- package/dist/cjs/components/segmented-control.props.d.ts +3 -3
- package/dist/cjs/components/segmented-control.props.js +1 -1
- package/dist/cjs/components/segmented-control.props.js.map +2 -2
- package/dist/cjs/components/select.d.ts.map +1 -1
- package/dist/cjs/components/select.js +1 -1
- package/dist/cjs/components/select.js.map +3 -3
- package/dist/cjs/components/select.props.d.ts +12 -0
- package/dist/cjs/components/select.props.d.ts.map +1 -1
- package/dist/cjs/components/select.props.js +1 -1
- package/dist/cjs/components/select.props.js.map +2 -2
- package/dist/cjs/components/sidebar.d.ts +5 -0
- package/dist/cjs/components/sidebar.d.ts.map +1 -1
- package/dist/cjs/components/sidebar.js +1 -1
- package/dist/cjs/components/sidebar.js.map +3 -3
- package/dist/cjs/components/slider.d.ts +5 -0
- package/dist/cjs/components/slider.d.ts.map +1 -1
- package/dist/cjs/components/slider.js +1 -1
- package/dist/cjs/components/slider.js.map +3 -3
- package/dist/cjs/components/slider.props.d.ts +10 -2
- package/dist/cjs/components/slider.props.d.ts.map +1 -1
- package/dist/cjs/components/slider.props.js +1 -1
- package/dist/cjs/components/slider.props.js.map +2 -2
- package/dist/cjs/components/switch.d.ts.map +1 -1
- package/dist/cjs/components/switch.js +1 -1
- package/dist/cjs/components/switch.js.map +3 -3
- package/dist/cjs/components/switch.props.d.ts +17 -4
- package/dist/cjs/components/switch.props.d.ts.map +1 -1
- package/dist/cjs/components/switch.props.js +1 -1
- package/dist/cjs/components/switch.props.js.map +3 -3
- package/dist/cjs/components/tab-nav.d.ts.map +1 -1
- package/dist/cjs/components/tab-nav.js +1 -1
- package/dist/cjs/components/tab-nav.js.map +3 -3
- package/dist/cjs/components/tabs.d.ts.map +1 -1
- package/dist/cjs/components/tabs.js +1 -1
- package/dist/cjs/components/tabs.js.map +2 -2
- package/dist/cjs/components/text-area.d.ts.map +1 -1
- package/dist/cjs/components/text-area.js +1 -1
- package/dist/cjs/components/text-area.js.map +3 -3
- package/dist/cjs/components/text-area.props.d.ts +29 -0
- package/dist/cjs/components/text-area.props.d.ts.map +1 -1
- package/dist/cjs/components/text-area.props.js +1 -1
- package/dist/cjs/components/text-area.props.js.map +3 -3
- package/dist/cjs/components/text-field.d.ts.map +1 -1
- package/dist/cjs/components/text-field.js +4 -4
- package/dist/cjs/components/text-field.js.map +3 -3
- package/dist/cjs/components/text-field.props.d.ts +29 -0
- package/dist/cjs/components/text-field.props.d.ts.map +1 -1
- package/dist/cjs/components/text-field.props.js +1 -1
- package/dist/cjs/components/text-field.props.js.map +3 -3
- package/dist/cjs/components/text.props.d.ts +1 -1
- package/dist/cjs/components/theme.d.ts +3 -0
- package/dist/cjs/components/theme.d.ts.map +1 -1
- package/dist/cjs/components/theme.js +1 -1
- package/dist/cjs/components/theme.js.map +3 -3
- package/dist/cjs/components/theme.props.d.ts +14 -0
- package/dist/cjs/components/theme.props.d.ts.map +1 -1
- package/dist/cjs/components/theme.props.js +1 -1
- package/dist/cjs/components/theme.props.js.map +3 -3
- package/dist/cjs/components/toggle-button.d.ts +52 -0
- package/dist/cjs/components/toggle-button.d.ts.map +1 -1
- package/dist/cjs/components/toggle-button.js +1 -1
- package/dist/cjs/components/toggle-button.js.map +3 -3
- package/dist/cjs/components/toggle-icon-button.d.ts +84 -2
- package/dist/cjs/components/toggle-icon-button.d.ts.map +1 -1
- package/dist/cjs/components/toggle-icon-button.js +1 -1
- package/dist/cjs/components/toggle-icon-button.js.map +3 -3
- package/dist/cjs/helpers/extract-margin-props.d.ts +7 -7
- package/dist/cjs/hooks/index.d.ts +2 -0
- package/dist/cjs/hooks/index.d.ts.map +1 -0
- package/dist/cjs/hooks/index.js +2 -0
- package/dist/cjs/hooks/index.js.map +7 -0
- package/dist/cjs/hooks/use-live-announcer.d.ts +6 -0
- package/dist/cjs/hooks/use-live-announcer.d.ts.map +1 -0
- package/dist/cjs/hooks/use-live-announcer.js +10 -0
- package/dist/cjs/hooks/use-live-announcer.js.map +7 -0
- package/dist/cjs/index.d.ts +1 -0
- package/dist/cjs/index.d.ts.map +1 -1
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/props/weight.prop.d.ts +1 -1
- package/dist/cjs/props/weight.prop.js +1 -1
- package/dist/cjs/props/weight.prop.js.map +2 -2
- package/dist/esm/components/_internal/base-button.d.ts +36 -0
- package/dist/esm/components/_internal/base-button.d.ts.map +1 -1
- package/dist/esm/components/_internal/base-button.js +1 -1
- package/dist/esm/components/_internal/base-button.js.map +3 -3
- package/dist/esm/components/_internal/base-button.props.d.ts +61 -0
- package/dist/esm/components/_internal/base-button.props.d.ts.map +1 -1
- package/dist/esm/components/_internal/base-button.props.js +1 -1
- package/dist/esm/components/_internal/base-button.props.js.map +3 -3
- package/dist/esm/components/_internal/base-checkbox.props.d.ts +6 -1
- package/dist/esm/components/_internal/base-checkbox.props.d.ts.map +1 -1
- package/dist/esm/components/_internal/base-checkbox.props.js +1 -1
- package/dist/esm/components/_internal/base-checkbox.props.js.map +3 -3
- package/dist/esm/components/_internal/base-menu.props.d.ts +8 -0
- package/dist/esm/components/_internal/base-menu.props.d.ts.map +1 -1
- package/dist/esm/components/_internal/base-menu.props.js +1 -1
- package/dist/esm/components/_internal/base-menu.props.js.map +3 -3
- package/dist/esm/components/_internal/base-radio.props.d.ts +6 -1
- package/dist/esm/components/_internal/base-radio.props.d.ts.map +1 -1
- package/dist/esm/components/_internal/base-radio.props.js +1 -1
- package/dist/esm/components/_internal/base-radio.props.js.map +3 -3
- package/dist/esm/components/accordion.d.ts +22 -0
- package/dist/esm/components/accordion.d.ts.map +1 -0
- package/dist/esm/components/accordion.js +2 -0
- package/dist/esm/components/accordion.js.map +7 -0
- package/dist/esm/components/accordion.props.d.ts +97 -0
- package/dist/esm/components/accordion.props.d.ts.map +1 -0
- package/dist/esm/components/accordion.props.js +2 -0
- package/dist/esm/components/accordion.props.js.map +7 -0
- package/dist/esm/components/alert-dialog.d.ts.map +1 -1
- package/dist/esm/components/alert-dialog.js +1 -1
- package/dist/esm/components/alert-dialog.js.map +3 -3
- package/dist/esm/components/alert-dialog.props.d.ts +69 -2
- package/dist/esm/components/alert-dialog.props.d.ts.map +1 -1
- package/dist/esm/components/alert-dialog.props.js +1 -1
- package/dist/esm/components/alert-dialog.props.js.map +3 -3
- package/dist/esm/components/avatar.d.ts.map +1 -1
- package/dist/esm/components/avatar.js +1 -1
- package/dist/esm/components/avatar.js.map +3 -3
- package/dist/esm/components/avatar.props.d.ts +9 -1
- package/dist/esm/components/avatar.props.d.ts.map +1 -1
- package/dist/esm/components/avatar.props.js +1 -1
- package/dist/esm/components/avatar.props.js.map +3 -3
- package/dist/esm/components/badge.d.ts +8 -1
- package/dist/esm/components/badge.d.ts.map +1 -1
- package/dist/esm/components/badge.js +1 -1
- package/dist/esm/components/badge.js.map +3 -3
- package/dist/esm/components/badge.props.d.ts +14 -6
- package/dist/esm/components/badge.props.d.ts.map +1 -1
- package/dist/esm/components/badge.props.js +1 -1
- package/dist/esm/components/badge.props.js.map +3 -3
- package/dist/esm/components/blockquote.props.d.ts +1 -1
- package/dist/esm/components/button.d.ts +53 -1
- package/dist/esm/components/button.d.ts.map +1 -1
- package/dist/esm/components/button.js +1 -1
- package/dist/esm/components/button.js.map +3 -3
- package/dist/esm/components/button.props.d.ts +17 -0
- package/dist/esm/components/button.props.d.ts.map +1 -1
- package/dist/esm/components/button.props.js.map +2 -2
- package/dist/esm/components/callout.d.ts +4 -0
- package/dist/esm/components/callout.d.ts.map +1 -1
- package/dist/esm/components/callout.js +1 -1
- package/dist/esm/components/callout.js.map +3 -3
- package/dist/esm/components/callout.props.d.ts +9 -1
- package/dist/esm/components/callout.props.d.ts.map +1 -1
- package/dist/esm/components/callout.props.js +1 -1
- package/dist/esm/components/callout.props.js.map +3 -3
- package/dist/esm/components/card.d.ts.map +1 -1
- package/dist/esm/components/card.js +1 -1
- package/dist/esm/components/card.js.map +3 -3
- package/dist/esm/components/card.props.d.ts +5 -0
- package/dist/esm/components/card.props.d.ts.map +1 -1
- package/dist/esm/components/card.props.js +1 -1
- package/dist/esm/components/card.props.js.map +3 -3
- package/dist/esm/components/checkbox-cards.d.ts.map +1 -1
- package/dist/esm/components/checkbox-cards.js +1 -1
- package/dist/esm/components/checkbox-cards.js.map +3 -3
- package/dist/esm/components/checkbox-cards.props.d.ts +2 -2
- package/dist/esm/components/checkbox-cards.props.js +1 -1
- package/dist/esm/components/checkbox-cards.props.js.map +2 -2
- package/dist/esm/components/checkbox-group.props.d.ts +6 -1
- package/dist/esm/components/checkbox-group.props.d.ts.map +1 -1
- package/dist/esm/components/checkbox.d.ts.map +1 -1
- package/dist/esm/components/checkbox.js +1 -1
- package/dist/esm/components/checkbox.js.map +3 -3
- package/dist/esm/components/code.js.map +1 -1
- package/dist/esm/components/code.props.d.ts +1 -1
- package/dist/esm/components/context-menu.d.ts +1 -1
- package/dist/esm/components/context-menu.d.ts.map +1 -1
- package/dist/esm/components/context-menu.js +1 -1
- package/dist/esm/components/context-menu.js.map +3 -3
- package/dist/esm/components/dialog.d.ts.map +1 -1
- package/dist/esm/components/dialog.js +1 -1
- package/dist/esm/components/dialog.js.map +3 -3
- package/dist/esm/components/dialog.props.d.ts +6 -1
- package/dist/esm/components/dialog.props.d.ts.map +1 -1
- package/dist/esm/components/dialog.props.js +1 -1
- package/dist/esm/components/dialog.props.js.map +3 -3
- package/dist/esm/components/dropdown-menu.d.ts +1 -1
- package/dist/esm/components/dropdown-menu.d.ts.map +1 -1
- package/dist/esm/components/dropdown-menu.js +1 -1
- package/dist/esm/components/dropdown-menu.js.map +3 -3
- package/dist/esm/components/heading.props.d.ts +1 -1
- package/dist/esm/components/icon-button.d.ts +79 -1
- package/dist/esm/components/icon-button.d.ts.map +1 -1
- package/dist/esm/components/icon-button.js +4 -1
- package/dist/esm/components/icon-button.js.map +3 -3
- package/dist/esm/components/image.d.ts +131 -12
- package/dist/esm/components/image.d.ts.map +1 -1
- package/dist/esm/components/image.js +1 -1
- package/dist/esm/components/image.js.map +3 -3
- package/dist/esm/components/image.props.d.ts +136 -21
- package/dist/esm/components/image.props.d.ts.map +1 -1
- package/dist/esm/components/image.props.js +1 -1
- package/dist/esm/components/image.props.js.map +3 -3
- package/dist/esm/components/index.d.ts +1 -0
- package/dist/esm/components/index.d.ts.map +1 -1
- package/dist/esm/components/index.js +1 -1
- package/dist/esm/components/index.js.map +3 -3
- package/dist/esm/components/link.props.d.ts +1 -1
- package/dist/esm/components/progress.props.d.ts +2 -2
- package/dist/esm/components/progress.props.js +1 -1
- package/dist/esm/components/progress.props.js.map +2 -2
- package/dist/esm/components/radio-cards.d.ts.map +1 -1
- package/dist/esm/components/radio-cards.js +1 -1
- package/dist/esm/components/radio-cards.js.map +3 -3
- package/dist/esm/components/radio-cards.props.d.ts +2 -2
- package/dist/esm/components/radio-cards.props.js +1 -1
- package/dist/esm/components/radio-cards.props.js.map +2 -2
- package/dist/esm/components/radio.d.ts.map +1 -1
- package/dist/esm/components/radio.js +1 -1
- package/dist/esm/components/radio.js.map +3 -3
- package/dist/esm/components/segmented-control.props.d.ts +3 -3
- package/dist/esm/components/segmented-control.props.js +1 -1
- package/dist/esm/components/segmented-control.props.js.map +2 -2
- package/dist/esm/components/select.d.ts.map +1 -1
- package/dist/esm/components/select.js +1 -1
- package/dist/esm/components/select.js.map +3 -3
- package/dist/esm/components/select.props.d.ts +12 -0
- package/dist/esm/components/select.props.d.ts.map +1 -1
- package/dist/esm/components/select.props.js +1 -1
- package/dist/esm/components/select.props.js.map +2 -2
- package/dist/esm/components/sidebar.d.ts +5 -0
- package/dist/esm/components/sidebar.d.ts.map +1 -1
- package/dist/esm/components/sidebar.js +1 -1
- package/dist/esm/components/sidebar.js.map +3 -3
- package/dist/esm/components/slider.d.ts +5 -0
- package/dist/esm/components/slider.d.ts.map +1 -1
- package/dist/esm/components/slider.js +1 -1
- package/dist/esm/components/slider.js.map +3 -3
- package/dist/esm/components/slider.props.d.ts +10 -2
- package/dist/esm/components/slider.props.d.ts.map +1 -1
- package/dist/esm/components/slider.props.js +1 -1
- package/dist/esm/components/slider.props.js.map +2 -2
- package/dist/esm/components/switch.d.ts.map +1 -1
- package/dist/esm/components/switch.js +1 -1
- package/dist/esm/components/switch.js.map +3 -3
- package/dist/esm/components/switch.props.d.ts +17 -4
- package/dist/esm/components/switch.props.d.ts.map +1 -1
- package/dist/esm/components/switch.props.js +1 -1
- package/dist/esm/components/switch.props.js.map +3 -3
- package/dist/esm/components/tab-nav.d.ts.map +1 -1
- package/dist/esm/components/tab-nav.js +1 -1
- package/dist/esm/components/tab-nav.js.map +3 -3
- package/dist/esm/components/tabs.d.ts.map +1 -1
- package/dist/esm/components/tabs.js +1 -1
- package/dist/esm/components/tabs.js.map +2 -2
- package/dist/esm/components/text-area.d.ts.map +1 -1
- package/dist/esm/components/text-area.js +1 -1
- package/dist/esm/components/text-area.js.map +3 -3
- package/dist/esm/components/text-area.props.d.ts +29 -0
- package/dist/esm/components/text-area.props.d.ts.map +1 -1
- package/dist/esm/components/text-area.props.js +1 -1
- package/dist/esm/components/text-area.props.js.map +3 -3
- package/dist/esm/components/text-field.d.ts.map +1 -1
- package/dist/esm/components/text-field.js +4 -4
- package/dist/esm/components/text-field.js.map +3 -3
- package/dist/esm/components/text-field.props.d.ts +29 -0
- package/dist/esm/components/text-field.props.d.ts.map +1 -1
- package/dist/esm/components/text-field.props.js +1 -1
- package/dist/esm/components/text-field.props.js.map +3 -3
- package/dist/esm/components/text.props.d.ts +1 -1
- package/dist/esm/components/theme.d.ts +3 -0
- package/dist/esm/components/theme.d.ts.map +1 -1
- package/dist/esm/components/theme.js +1 -1
- package/dist/esm/components/theme.js.map +3 -3
- package/dist/esm/components/theme.props.d.ts +14 -0
- package/dist/esm/components/theme.props.d.ts.map +1 -1
- package/dist/esm/components/theme.props.js +1 -1
- package/dist/esm/components/theme.props.js.map +3 -3
- package/dist/esm/components/toggle-button.d.ts +52 -0
- package/dist/esm/components/toggle-button.d.ts.map +1 -1
- package/dist/esm/components/toggle-button.js +1 -1
- package/dist/esm/components/toggle-button.js.map +3 -3
- package/dist/esm/components/toggle-icon-button.d.ts +84 -2
- package/dist/esm/components/toggle-icon-button.d.ts.map +1 -1
- package/dist/esm/components/toggle-icon-button.js +1 -1
- package/dist/esm/components/toggle-icon-button.js.map +3 -3
- package/dist/esm/helpers/extract-margin-props.d.ts +7 -7
- package/dist/esm/hooks/index.d.ts +2 -0
- package/dist/esm/hooks/index.d.ts.map +1 -0
- package/dist/esm/hooks/index.js +2 -0
- package/dist/esm/hooks/index.js.map +7 -0
- package/dist/esm/hooks/use-live-announcer.d.ts +6 -0
- package/dist/esm/hooks/use-live-announcer.d.ts.map +1 -0
- package/dist/esm/hooks/use-live-announcer.js +10 -0
- package/dist/esm/hooks/use-live-announcer.js.map +7 -0
- package/dist/esm/index.d.ts +1 -0
- package/dist/esm/index.d.ts.map +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +2 -2
- package/dist/esm/props/weight.prop.d.ts +1 -1
- package/dist/esm/props/weight.prop.js +1 -1
- package/dist/esm/props/weight.prop.js.map +2 -2
- package/layout/components.css +1 -0
- package/layout.css +1 -0
- package/package.json +2 -1
- package/src/components/_internal/base-button.css +483 -284
- package/src/components/_internal/base-button.props.ts +87 -0
- package/src/components/_internal/base-button.tsx +127 -10
- package/src/components/_internal/base-card.css +866 -83
- package/src/components/_internal/base-checkbox.css +252 -52
- package/src/components/_internal/base-checkbox.props.ts +4 -1
- package/src/components/_internal/base-dialog.css +39 -8
- package/src/components/_internal/base-menu.css +55 -32
- package/src/components/_internal/base-menu.props.ts +10 -0
- package/src/components/_internal/base-radio.css +222 -52
- package/src/components/_internal/base-radio.props.ts +4 -1
- package/src/components/_internal/base-sidebar-menu.css +223 -0
- package/src/components/_internal/base-sidebar.css +141 -0
- package/src/components/_internal/base-tab-list.css +16 -0
- package/src/components/accordion.css +657 -0
- package/src/components/accordion.props.tsx +90 -0
- package/src/components/accordion.tsx +209 -0
- package/src/components/alert-dialog.props.tsx +22 -2
- package/src/components/alert-dialog.tsx +94 -3
- package/src/components/avatar.css +294 -152
- package/src/components/avatar.props.tsx +7 -1
- package/src/components/avatar.tsx +12 -2
- package/src/components/badge.css +160 -138
- package/src/components/badge.props.tsx +10 -3
- package/src/components/badge.tsx +71 -9
- package/src/components/button.css +88 -0
- package/src/components/button.props.tsx +17 -0
- package/src/components/button.tsx +107 -5
- package/src/components/callout.css +122 -35
- package/src/components/callout.props.tsx +7 -1
- package/src/components/callout.tsx +32 -9
- package/src/components/card.css +0 -597
- package/src/components/card.props.tsx +3 -0
- package/src/components/card.tsx +4 -2
- package/src/components/checkbox-cards.css +27 -104
- package/src/components/checkbox-cards.props.tsx +2 -2
- package/src/components/checkbox-cards.tsx +21 -3
- package/src/components/checkbox.tsx +2 -0
- package/src/components/code.css +1 -1
- package/src/components/code.tsx +1 -1
- package/src/components/container.css +1 -0
- package/src/components/context-menu.tsx +54 -12
- package/src/components/dialog.props.tsx +3 -0
- package/src/components/dialog.tsx +93 -3
- package/src/components/dropdown-menu.tsx +49 -12
- package/src/components/icon-button.css +73 -4
- package/src/components/icon-button.tsx +125 -19
- package/src/components/image.css +160 -91
- package/src/components/image.props.ts +152 -15
- package/src/components/image.tsx +290 -247
- package/src/components/index.css +1 -0
- package/src/components/index.tsx +1 -0
- package/src/components/kbd.css +23 -44
- package/src/components/progress.css +130 -149
- package/src/components/progress.props.tsx +2 -2
- package/src/components/radio-cards.css +23 -113
- package/src/components/radio-cards.props.tsx +2 -2
- package/src/components/radio-cards.tsx +45 -18
- package/src/components/radio.tsx +4 -3
- package/src/components/scroll-area.css +1 -1
- package/src/components/segmented-control.css +83 -64
- package/src/components/segmented-control.props.tsx +3 -3
- package/src/components/select.css +502 -224
- package/src/components/select.props.tsx +8 -0
- package/src/components/select.tsx +45 -2
- package/src/components/sidebar.css +186 -630
- package/src/components/sidebar.tsx +61 -5
- package/src/components/slider.css +228 -88
- package/src/components/slider.props.tsx +6 -2
- package/src/components/slider.tsx +201 -24
- package/src/components/spinner.css +12 -0
- package/src/components/switch.css +135 -216
- package/src/components/switch.props.tsx +16 -4
- package/src/components/switch.tsx +5 -3
- package/src/components/tab-nav.tsx +6 -3
- package/src/components/tabs.tsx +2 -0
- package/src/components/text-area.css +222 -140
- package/src/components/text-area.props.tsx +18 -1
- package/src/components/text-area.tsx +58 -7
- package/src/components/text-field.css +214 -131
- package/src/components/text-field.props.tsx +17 -0
- package/src/components/text-field.tsx +79 -28
- package/src/components/theme.props.tsx +12 -0
- package/src/components/theme.tsx +31 -1
- package/src/components/toggle-button.tsx +102 -3
- package/src/components/toggle-icon-button.tsx +150 -7
- package/src/components/tooltip.css +3 -3
- package/src/hooks/index.ts +1 -0
- package/src/hooks/use-live-announcer.ts +52 -0
- package/src/index.ts +1 -0
- package/src/props/weight.prop.ts +1 -1
- package/src/styles/fonts.css +27 -13
- package/src/styles/index.css +1 -1
- package/src/styles/tokens/base.css +2 -0
- package/src/styles/tokens/blur.css +32 -0
- package/src/styles/tokens/color.css +9 -9
- package/src/styles/tokens/constants.css +88 -140
- package/src/styles/tokens/index.css +2 -0
- package/src/styles/tokens/opacity.css +32 -0
- package/src/styles/tokens/radius.css +6 -10
- package/src/styles/tokens/shadow.css +25 -25
- package/src/styles/tokens/transition.css +49 -13
- package/src/styles/tokens/typography.css +7 -3
- package/src/styles/utilities/font-weight.css +16 -0
- package/styles.css +11129 -8945
- package/tokens/base.css +127 -49
- package/tokens.css +158 -114
- package/utilities.css +72 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/dropdown-menu.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { DropdownMenu as DropdownMenuPrimitive, Slot } from 'radix-ui';\n\nimport { ScrollArea } from './scroll-area.js';\nimport {\n dropdownMenuContentPropDefs,\n dropdownMenuItemPropDefs,\n dropdownMenuCheckboxItemPropDefs,\n dropdownMenuRadioItemPropDefs,\n} from './dropdown-menu.props.js';\nimport { Theme, useThemeContext } from './theme.js';\nimport { ChevronDownIcon, ThickCheckIcon, ThickChevronRightIcon, ThickDotIcon } from './icons.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { requireReactElement } from '../helpers/require-react-element.js';\nimport { Kbd } from './kbd.js';\n\nimport type { IconProps } from './icons.js';\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { GetPropDefTypes } from '../props/prop-def.js';\n\ninterface DropdownMenuRootProps\n extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root> {}\nconst DropdownMenuRoot: React.FC<DropdownMenuRootProps> = (props) => (\n <DropdownMenuPrimitive.Root {...props} />\n);\nDropdownMenuRoot.displayName = 'DropdownMenu.Root';\n\ntype DropdownMenuTriggerElement = React.ElementRef<typeof DropdownMenuPrimitive.Trigger>;\ninterface DropdownMenuTriggerProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.Trigger, RemovedProps> {}\nconst DropdownMenuTrigger = React.forwardRef<DropdownMenuTriggerElement, DropdownMenuTriggerProps>(\n ({ children, ...props }, forwardedRef) => (\n <DropdownMenuPrimitive.Trigger {...props} ref={forwardedRef} asChild>\n {requireReactElement(children)}\n </DropdownMenuPrimitive.Trigger>\n ),\n);\nDropdownMenuTrigger.displayName = 'DropdownMenu.Trigger';\n\ntype DropdownMenuContentOwnProps = GetPropDefTypes<typeof dropdownMenuContentPropDefs>;\ntype DropdownMenuContentContextValue = DropdownMenuContentOwnProps;\nconst DropdownMenuContentContext = React.createContext<DropdownMenuContentContextValue>({});\ntype DropdownMenuContentElement = React.ElementRef<typeof DropdownMenuPrimitive.Content>;\ninterface DropdownMenuContentProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.Content, RemovedProps>,\n DropdownMenuContentContextValue {\n container?: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Portal>['container'];\n}\nconst DropdownMenuContent = React.forwardRef<DropdownMenuContentElement, DropdownMenuContentProps>(\n (props, forwardedRef) => {\n const themeContext = useThemeContext();\n const {\n size = dropdownMenuContentPropDefs.size.default,\n variant = dropdownMenuContentPropDefs.variant.default,\n highContrast = dropdownMenuContentPropDefs.highContrast.default,\n panelBackground = props.panelBackground ?? themeContext.panelBackground,\n } = props;\n const {\n className,\n children,\n color,\n container,\n forceMount,\n panelBackground: _,\n ...contentProps\n } = extractProps(props, dropdownMenuContentPropDefs);\n const resolvedColor = color || themeContext.accentColor;\n return (\n <DropdownMenuPrimitive.Portal container={container} forceMount={forceMount}>\n <Theme asChild>\n <DropdownMenuPrimitive.Content\n data-accent-color={resolvedColor}\n data-panel-background={panelBackground}\n align=\"start\"\n sideOffset={4}\n collisionPadding={10}\n {...contentProps}\n asChild={false}\n ref={forwardedRef}\n className={classNames(\n 'rt-PopperContent',\n 'rt-BaseMenuContent',\n 'rt-DropdownMenuContent',\n className,\n )}\n >\n <ScrollArea type=\"auto\">\n <div className={classNames('rt-BaseMenuViewport', 'rt-DropdownMenuViewport')}>\n <DropdownMenuContentContext.Provider\n value={React.useMemo(\n () => ({ size, variant, color: resolvedColor, highContrast, panelBackground }),\n [size, variant, resolvedColor, highContrast, panelBackground],\n )}\n >\n {children}\n </DropdownMenuContentContext.Provider>\n </div>\n </ScrollArea>\n </DropdownMenuPrimitive.Content>\n </Theme>\n </DropdownMenuPrimitive.Portal>\n );\n },\n);\nDropdownMenuContent.displayName = 'DropdownMenu.Content';\n\ntype DropdownMenuLabelElement = React.ElementRef<typeof DropdownMenuPrimitive.Label>;\ninterface DropdownMenuLabelProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.Label, RemovedProps> {}\nconst DropdownMenuLabel = React.forwardRef<DropdownMenuLabelElement, DropdownMenuLabelProps>(\n ({ className, ...props }, forwardedRef) => (\n <DropdownMenuPrimitive.Label\n {...props}\n asChild={false}\n ref={forwardedRef}\n className={classNames('rt-BaseMenuLabel', 'rt-DropdownMenuLabel', className)}\n />\n ),\n);\nDropdownMenuLabel.displayName = 'DropdownMenu.Label';\n\ntype DropdownMenuItemElement = React.ElementRef<typeof DropdownMenuPrimitive.Item>;\ntype DropdownMenuItemOwnProps = GetPropDefTypes<typeof dropdownMenuItemPropDefs>;\ninterface DropdownMenuItemProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.Item, RemovedProps>,\n DropdownMenuItemOwnProps {}\nconst DropdownMenuItem = React.forwardRef<DropdownMenuItemElement, DropdownMenuItemProps>(\n (props, forwardedRef) => {\n const {\n className,\n children,\n color = dropdownMenuItemPropDefs.color.default,\n shortcut,\n ...itemProps\n } = props;\n return (\n <DropdownMenuPrimitive.Item\n data-accent-color={color}\n {...itemProps}\n ref={forwardedRef}\n className={classNames('rt-reset', 'rt-BaseMenuItem', 'rt-DropdownMenuItem', className)}\n >\n <Slot.Slottable>{children}</Slot.Slottable>\n {shortcut && (\n <div className=\"rt-BaseMenuShortcut rt-DropdownMenuShortcut\">\n <Kbd size=\"1\">{shortcut}</Kbd>\n </div>\n )}\n </DropdownMenuPrimitive.Item>\n );\n },\n);\nDropdownMenuItem.displayName = 'DropdownMenu.Item';\n\ntype DropdownMenuGroupElement = React.ElementRef<typeof DropdownMenuPrimitive.Group>;\ninterface DropdownMenuGroupProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.Group, RemovedProps> {}\nconst DropdownMenuGroup = React.forwardRef<DropdownMenuGroupElement, DropdownMenuGroupProps>(\n ({ className, ...props }, forwardedRef) => (\n <DropdownMenuPrimitive.Group\n {...props}\n asChild={false}\n ref={forwardedRef}\n className={classNames('rt-BaseMenuGroup', 'rt-DropdownMenuGroup', className)}\n />\n ),\n);\nDropdownMenuGroup.displayName = 'DropdownMenu.Group';\n\ntype DropdownMenuRadioGroupElement = React.ElementRef<typeof DropdownMenuPrimitive.RadioGroup>;\ninterface DropdownMenuRadioGroupProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.RadioGroup, RemovedProps> {}\nconst DropdownMenuRadioGroup = React.forwardRef<\n DropdownMenuRadioGroupElement,\n DropdownMenuRadioGroupProps\n>(({ className, ...props }, forwardedRef) => (\n <DropdownMenuPrimitive.RadioGroup\n {...props}\n asChild={false}\n ref={forwardedRef}\n className={classNames('rt-BaseMenuRadioGroup', 'rt-DropdownMenuRadioGroup', className)}\n />\n));\nDropdownMenuRadioGroup.displayName = 'DropdownMenu.RadioGroup';\n\ntype DropdownMenuRadioItemElement = React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>;\ntype DropdownMenuRadioItemOwnProps = GetPropDefTypes<typeof dropdownMenuRadioItemPropDefs>;\ninterface DropdownMenuRadioItemProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.RadioItem, RemovedProps>,\n DropdownMenuRadioItemOwnProps {}\nconst DropdownMenuRadioItem = React.forwardRef<\n DropdownMenuRadioItemElement,\n DropdownMenuRadioItemProps\n>((props, forwardedRef) => {\n const {\n children,\n className,\n color = dropdownMenuRadioItemPropDefs.color.default,\n ...itemProps\n } = props;\n return (\n <DropdownMenuPrimitive.RadioItem\n {...itemProps}\n asChild={false}\n ref={forwardedRef}\n data-accent-color={color}\n className={classNames(\n 'rt-BaseMenuItem',\n 'rt-BaseMenuRadioItem',\n 'rt-DropdownMenuItem',\n 'rt-DropdownMenuRadioItem',\n className,\n )}\n >\n {children}\n <DropdownMenuPrimitive.ItemIndicator className=\"rt-BaseMenuItemIndicator rt-DropdownMenuItemIndicator\">\n <ThickDotIcon className=\"rt-BaseMenuItemIndicatorIcon rt-DropdownMenuItemIndicatorIcon\" />\n </DropdownMenuPrimitive.ItemIndicator>\n </DropdownMenuPrimitive.RadioItem>\n );\n});\nDropdownMenuRadioItem.displayName = 'DropdownMenu.RadioItem';\n\ntype DropdownMenuCheckboxItemElement = React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>;\ntype DropdownMenuCheckboxItemOwnProps = GetPropDefTypes<typeof dropdownMenuCheckboxItemPropDefs>;\ninterface DropdownMenuCheckboxItemProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.CheckboxItem, RemovedProps>,\n DropdownMenuCheckboxItemOwnProps {}\nconst DropdownMenuCheckboxItem = React.forwardRef<\n DropdownMenuCheckboxItemElement,\n DropdownMenuCheckboxItemProps\n>((props, forwardedRef) => {\n const {\n children,\n className,\n shortcut,\n color = dropdownMenuCheckboxItemPropDefs.color.default,\n ...itemProps\n } = props;\n return (\n <DropdownMenuPrimitive.CheckboxItem\n {...itemProps}\n asChild={false}\n ref={forwardedRef}\n data-accent-color={color}\n className={classNames(\n 'rt-BaseMenuItem',\n 'rt-BaseMenuCheckboxItem',\n 'rt-DropdownMenuItem',\n 'rt-DropdownMenuCheckboxItem',\n className,\n )}\n >\n {children}\n <DropdownMenuPrimitive.ItemIndicator className=\"rt-BaseMenuItemIndicator rt-DropdownMenuItemIndicator\">\n <ThickCheckIcon className=\"rt-BaseMenuItemIndicatorIcon rt-ContextMenuItemIndicatorIcon\" />\n </DropdownMenuPrimitive.ItemIndicator>\n {shortcut && (\n <div className=\"rt-BaseMenuShortcut rt-DropdownMenuShortcut\">\n <Kbd size=\"1\">{shortcut}</Kbd>\n </div>\n )}\n </DropdownMenuPrimitive.CheckboxItem>\n );\n});\nDropdownMenuCheckboxItem.displayName = 'DropdownMenu.CheckboxItem';\n\ninterface DropdownMenuSubProps\n extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Sub> {}\nconst DropdownMenuSub: React.FC<DropdownMenuSubProps> = (props) => (\n <DropdownMenuPrimitive.Sub {...props} />\n);\nDropdownMenuSub.displayName = 'DropdownMenu.Sub';\n\ntype DropdownMenuSubTriggerElement = React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>;\ninterface DropdownMenuSubTriggerProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.SubTrigger, RemovedProps> {}\nconst DropdownMenuSubTrigger = React.forwardRef<\n DropdownMenuSubTriggerElement,\n DropdownMenuSubTriggerProps\n>((props, forwardedRef) => {\n const { className, children, ...subTriggerProps } = props;\n return (\n <DropdownMenuPrimitive.SubTrigger\n {...subTriggerProps}\n asChild={false}\n ref={forwardedRef}\n className={classNames(\n 'rt-BaseMenuItem',\n 'rt-BaseMenuSubTrigger',\n 'rt-DropdownMenuItem',\n 'rt-DropdownMenuSubTrigger',\n className,\n )}\n >\n {children}\n <div className=\"rt-BaseMenuShortcut rt-DropdownMenuShortcut\">\n <ThickChevronRightIcon className=\"rt-BaseMenuSubTriggerIcon rt-DropdownMenuSubtriggerIcon\" />\n </div>\n </DropdownMenuPrimitive.SubTrigger>\n );\n});\nDropdownMenuSubTrigger.displayName = 'DropdownMenu.SubTrigger';\n\ntype DropdownMenuSubContentElement = React.ElementRef<typeof DropdownMenuPrimitive.SubContent>;\ninterface DropdownMenuSubContentProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.SubContent, RemovedProps> {\n container?: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Portal>['container'];\n}\nconst DropdownMenuSubContent = React.forwardRef<\n DropdownMenuSubContentElement,\n DropdownMenuSubContentProps\n>((props, forwardedRef) => {\n const { size, variant, color, highContrast, panelBackground } = React.useContext(\n DropdownMenuContentContext,\n );\n const {\n className,\n children,\n container,\n forceMount,\n panelBackground: _,\n ...subContentProps\n } = extractProps(\n { size, variant, color, highContrast, panelBackground, ...props },\n dropdownMenuContentPropDefs,\n );\n return (\n <DropdownMenuPrimitive.Portal container={container} forceMount={forceMount}>\n <Theme asChild>\n <DropdownMenuPrimitive.SubContent\n data-accent-color={color}\n data-panel-background={panelBackground}\n alignOffset={-Number(size) * 4}\n // Side offset accounts for the outer solid box-shadow\n sideOffset={1}\n collisionPadding={10}\n {...subContentProps}\n asChild={false}\n ref={forwardedRef}\n className={classNames(\n 'rt-PopperContent',\n 'rt-BaseMenuContent',\n 'rt-BaseMenuSubContent',\n 'rt-DropdownMenuContent',\n 'rt-DropdownMenuSubContent',\n className,\n )}\n >\n <ScrollArea type=\"auto\">\n <div className={classNames('rt-BaseMenuViewport', 'rt-DropdownMenuViewport')}>\n {children}\n </div>\n </ScrollArea>\n </DropdownMenuPrimitive.SubContent>\n </Theme>\n </DropdownMenuPrimitive.Portal>\n );\n});\nDropdownMenuSubContent.displayName = 'DropdownMenu.SubContent';\n\ntype DropdownMenuSeparatorElement = React.ElementRef<typeof DropdownMenuPrimitive.Separator>;\ninterface DropdownMenuSeparatorProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.Separator, RemovedProps> {}\nconst DropdownMenuSeparator = React.forwardRef<\n DropdownMenuSeparatorElement,\n DropdownMenuSeparatorProps\n>(({ className, ...props }, forwardedRef) => (\n <DropdownMenuPrimitive.Separator\n {...props}\n asChild={false}\n ref={forwardedRef}\n className={classNames('rt-BaseMenuSeparator', 'rt-DropdownMenuSeparator', className)}\n />\n));\nDropdownMenuSeparator.displayName = 'DropdownMenu.Separator';\n\ntype DropdownMenuTriggerIconElement = React.ElementRef<'svg'>;\ninterface DropdownMenuTriggerIconProps extends IconProps {}\nconst DropdownMenuTriggerIcon = React.forwardRef<\n DropdownMenuTriggerIconElement,\n DropdownMenuTriggerIconProps\n>((props, forwardedRef) => (\n <ChevronDownIcon {...props} ref={forwardedRef} className=\"rt-DropdownMenuTriggerIcon\" />\n));\nDropdownMenuTriggerIcon.displayName = 'DropdownMenu.TriggerIcon';\n\nexport {\n DropdownMenuRoot as Root,\n DropdownMenuTrigger as Trigger,\n DropdownMenuTriggerIcon as TriggerIcon,\n DropdownMenuContent as Content,\n DropdownMenuLabel as Label,\n DropdownMenuItem as Item,\n DropdownMenuGroup as Group,\n DropdownMenuRadioGroup as RadioGroup,\n DropdownMenuRadioItem as RadioItem,\n DropdownMenuCheckboxItem as CheckboxItem,\n DropdownMenuSub as Sub,\n DropdownMenuSubTrigger as SubTrigger,\n DropdownMenuSubContent as SubContent,\n DropdownMenuSeparator as Separator,\n};\n\nexport type {\n DropdownMenuRootProps as RootProps,\n DropdownMenuTriggerProps as TriggerProps,\n DropdownMenuTriggerIconProps as TriggerIconProps,\n DropdownMenuContentProps as ContentProps,\n DropdownMenuLabelProps as LabelProps,\n DropdownMenuItemProps as ItemProps,\n DropdownMenuGroupProps as GroupProps,\n DropdownMenuRadioGroupProps as RadioGroupProps,\n DropdownMenuRadioItemProps as RadioItemProps,\n DropdownMenuCheckboxItemProps as CheckboxItemProps,\n DropdownMenuSubProps as SubProps,\n DropdownMenuSubTriggerProps as SubTriggerProps,\n DropdownMenuSubContentProps as SubContentProps,\n DropdownMenuSeparatorProps as SeparatorProps,\n};\n"],
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,kBAAAE,EAAA,YAAAC,EAAA,UAAAC,EAAA,SAAAC,EAAA,UAAAC,EAAA,eAAAC,EAAA,cAAAC,EAAA,SAAAC,EAAA,cAAAC,EAAA,QAAAC,EAAA,eAAAC,EAAA,eAAAC,EAAA,YAAAC,EAAA,gBAAAC,IAAA,eAAAC,EAAAhB,GAEA,IAAAiB,EAAuB,oBACvBC,EAAuB,yBACvBC,EAA4D,oBAE5DC,EAA2B,4BAC3BC,EAKO,oCACPC,EAAuC,sBACvCC,EAAqF,sBACrFC,EAA6B,uCAC7BC,EAAoC,+CACpCC,EAAoB,oBAQpB,MAAMjB,EAAqDkB,GACzDV,EAAA,cAAC,EAAAW,aAAsB,KAAtB,CAA4B,GAAGD,EAAO,EAEzClB,EAAiB,YAAc,oBAK/B,MAAMK,EAAsBG,EAAM,WAChC,CAAC,CAAE,SAAAY,EAAU,GAAGF,CAAM,EAAGG,IACvBb,EAAA,cAAC,EAAAW,aAAsB,QAAtB,CAA+B,GAAGD,EAAO,IAAKG,EAAc,QAAO,OACjE,uBAAoBD,CAAQ,CAC/B,CAEJ,EACAf,EAAoB,YAAc,uBAIlC,MAAMiB,EAA6Bd,EAAM,cAA+C,CAAC,CAAC,EAOpFd,EAAsBc,EAAM,WAChC,CAACU,EAAOG,IAAiB,CACvB,MAAME,KAAe,mBAAgB,
|
|
6
|
-
"names": ["dropdown_menu_exports", "__export", "DropdownMenuCheckboxItem", "DropdownMenuContent", "DropdownMenuGroup", "DropdownMenuItem", "DropdownMenuLabel", "DropdownMenuRadioGroup", "DropdownMenuRadioItem", "DropdownMenuRoot", "DropdownMenuSeparator", "DropdownMenuSub", "DropdownMenuSubContent", "DropdownMenuSubTrigger", "DropdownMenuTrigger", "DropdownMenuTriggerIcon", "__toCommonJS", "React", "import_classnames", "import_radix_ui", "import_scroll_area", "import_dropdown_menu_props", "import_theme", "import_icons", "import_extract_props", "import_require_react_element", "import_kbd", "props", "DropdownMenuPrimitive", "children", "forwardedRef", "DropdownMenuContentContext", "themeContext", "size", "variant", "highContrast", "
|
|
4
|
+
"sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { DropdownMenu as DropdownMenuPrimitive, Slot } from 'radix-ui';\n\nimport { ScrollArea } from './scroll-area.js';\nimport {\n dropdownMenuContentPropDefs,\n dropdownMenuItemPropDefs,\n dropdownMenuCheckboxItemPropDefs,\n dropdownMenuRadioItemPropDefs,\n} from './dropdown-menu.props.js';\nimport { Theme, useThemeContext } from './theme.js';\nimport { ChevronDownIcon, ThickCheckIcon, ThickChevronRightIcon, ThickDotIcon } from './icons.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { requireReactElement } from '../helpers/require-react-element.js';\nimport { Kbd } from './kbd.js';\n\nimport type { IconProps } from './icons.js';\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { GetPropDefTypes } from '../props/prop-def.js';\n\ninterface DropdownMenuRootProps\n extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root> {}\nconst DropdownMenuRoot: React.FC<DropdownMenuRootProps> = (props) => (\n <DropdownMenuPrimitive.Root {...props} />\n);\nDropdownMenuRoot.displayName = 'DropdownMenu.Root';\n\ntype DropdownMenuTriggerElement = React.ElementRef<typeof DropdownMenuPrimitive.Trigger>;\ninterface DropdownMenuTriggerProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.Trigger, RemovedProps> {}\nconst DropdownMenuTrigger = React.forwardRef<DropdownMenuTriggerElement, DropdownMenuTriggerProps>(\n ({ children, ...props }, forwardedRef) => (\n <DropdownMenuPrimitive.Trigger {...props} ref={forwardedRef} asChild>\n {requireReactElement(children)}\n </DropdownMenuPrimitive.Trigger>\n ),\n);\nDropdownMenuTrigger.displayName = 'DropdownMenu.Trigger';\n\ntype DropdownMenuContentOwnProps = GetPropDefTypes<typeof dropdownMenuContentPropDefs>;\ntype DropdownMenuContentContextValue = DropdownMenuContentOwnProps;\nconst DropdownMenuContentContext = React.createContext<DropdownMenuContentContextValue>({});\ntype DropdownMenuContentElement = React.ElementRef<typeof DropdownMenuPrimitive.Content>;\ninterface DropdownMenuContentProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.Content, RemovedProps>,\n DropdownMenuContentContextValue {\n container?: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Portal>['container'];\n}\nconst DropdownMenuContent = React.forwardRef<DropdownMenuContentElement, DropdownMenuContentProps>(\n (props, forwardedRef) => {\n const themeContext = useThemeContext();\n\n // Show deprecation warning for panelBackground when used\n React.useEffect(() => {\n if (props.panelBackground !== undefined) {\n console.warn(\n 'Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use `material` prop instead.',\n );\n }\n }, [props.panelBackground]);\n\n // Material takes precedence over panelBackground\n const effectiveMaterial =\n props.material ?? props.panelBackground ?? themeContext.panelBackground;\n\n // Memoize theme context values to prevent unnecessary re-renders\n const memoizedThemeContext = React.useMemo(\n () => ({\n material: effectiveMaterial,\n accentColor: themeContext.accentColor,\n }),\n [effectiveMaterial, themeContext.accentColor],\n );\n\n const {\n size = dropdownMenuContentPropDefs.size.default,\n variant = dropdownMenuContentPropDefs.variant.default,\n highContrast = dropdownMenuContentPropDefs.highContrast.default,\n material = memoizedThemeContext.material,\n } = props;\n const {\n className,\n children,\n color,\n container,\n forceMount,\n material: _,\n panelBackground: __,\n ...contentProps\n } = extractProps(props, dropdownMenuContentPropDefs);\n\n // Memoize color resolution to prevent unnecessary re-renders\n const resolvedColor = React.useMemo(\n () => color || memoizedThemeContext.accentColor,\n [color, memoizedThemeContext.accentColor],\n );\n return (\n <DropdownMenuPrimitive.Portal container={container} forceMount={forceMount}>\n <Theme asChild>\n <DropdownMenuPrimitive.Content\n data-accent-color={resolvedColor}\n data-material={material}\n data-panel-background={material}\n align=\"start\"\n sideOffset={4}\n collisionPadding={10}\n {...contentProps}\n asChild={false}\n ref={forwardedRef}\n className={classNames(\n 'rt-PopperContent',\n 'rt-BaseMenuContent',\n 'rt-DropdownMenuContent',\n className,\n )}\n >\n <ScrollArea type=\"auto\">\n <div className={classNames('rt-BaseMenuViewport', 'rt-DropdownMenuViewport')}>\n <DropdownMenuContentContext.Provider\n value={React.useMemo(\n () => ({ size, variant, color: resolvedColor, highContrast, material }),\n [size, variant, resolvedColor, highContrast, material],\n )}\n >\n {children}\n </DropdownMenuContentContext.Provider>\n </div>\n </ScrollArea>\n </DropdownMenuPrimitive.Content>\n </Theme>\n </DropdownMenuPrimitive.Portal>\n );\n },\n);\nDropdownMenuContent.displayName = 'DropdownMenu.Content';\n\ntype DropdownMenuLabelElement = React.ElementRef<typeof DropdownMenuPrimitive.Label>;\ninterface DropdownMenuLabelProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.Label, RemovedProps> {}\nconst DropdownMenuLabel = React.forwardRef<DropdownMenuLabelElement, DropdownMenuLabelProps>(\n ({ className, ...props }, forwardedRef) => (\n <DropdownMenuPrimitive.Label\n {...props}\n asChild={false}\n ref={forwardedRef}\n className={classNames('rt-BaseMenuLabel', 'rt-DropdownMenuLabel', className)}\n />\n ),\n);\nDropdownMenuLabel.displayName = 'DropdownMenu.Label';\n\ntype DropdownMenuItemElement = React.ElementRef<typeof DropdownMenuPrimitive.Item>;\ntype DropdownMenuItemOwnProps = GetPropDefTypes<typeof dropdownMenuItemPropDefs>;\ninterface DropdownMenuItemProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.Item, RemovedProps>,\n DropdownMenuItemOwnProps {}\nconst DropdownMenuItem = React.forwardRef<DropdownMenuItemElement, DropdownMenuItemProps>(\n (props, forwardedRef) => {\n const {\n className,\n children,\n color = dropdownMenuItemPropDefs.color.default,\n shortcut,\n ...itemProps\n } = props;\n return (\n <DropdownMenuPrimitive.Item\n data-accent-color={color}\n {...itemProps}\n ref={forwardedRef}\n className={classNames('rt-reset', 'rt-BaseMenuItem', 'rt-DropdownMenuItem', className)}\n >\n <Slot.Slottable>{children}</Slot.Slottable>\n {shortcut && (\n <div className=\"rt-BaseMenuShortcut rt-DropdownMenuShortcut\">\n <Kbd size=\"1\">{shortcut}</Kbd>\n </div>\n )}\n </DropdownMenuPrimitive.Item>\n );\n },\n);\nDropdownMenuItem.displayName = 'DropdownMenu.Item';\n\ntype DropdownMenuGroupElement = React.ElementRef<typeof DropdownMenuPrimitive.Group>;\ninterface DropdownMenuGroupProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.Group, RemovedProps> {}\nconst DropdownMenuGroup = React.forwardRef<DropdownMenuGroupElement, DropdownMenuGroupProps>(\n ({ className, ...props }, forwardedRef) => (\n <DropdownMenuPrimitive.Group\n {...props}\n asChild={false}\n ref={forwardedRef}\n className={classNames('rt-BaseMenuGroup', 'rt-DropdownMenuGroup', className)}\n />\n ),\n);\nDropdownMenuGroup.displayName = 'DropdownMenu.Group';\n\ntype DropdownMenuRadioGroupElement = React.ElementRef<typeof DropdownMenuPrimitive.RadioGroup>;\ninterface DropdownMenuRadioGroupProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.RadioGroup, RemovedProps> {}\nconst DropdownMenuRadioGroup = React.forwardRef<\n DropdownMenuRadioGroupElement,\n DropdownMenuRadioGroupProps\n>(({ className, ...props }, forwardedRef) => (\n <DropdownMenuPrimitive.RadioGroup\n {...props}\n asChild={false}\n ref={forwardedRef}\n className={classNames('rt-BaseMenuRadioGroup', 'rt-DropdownMenuRadioGroup', className)}\n />\n));\nDropdownMenuRadioGroup.displayName = 'DropdownMenu.RadioGroup';\n\ntype DropdownMenuRadioItemElement = React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>;\ntype DropdownMenuRadioItemOwnProps = GetPropDefTypes<typeof dropdownMenuRadioItemPropDefs>;\ninterface DropdownMenuRadioItemProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.RadioItem, RemovedProps>,\n DropdownMenuRadioItemOwnProps {}\nconst DropdownMenuRadioItem = React.forwardRef<\n DropdownMenuRadioItemElement,\n DropdownMenuRadioItemProps\n>((props, forwardedRef) => {\n const {\n children,\n className,\n color = dropdownMenuRadioItemPropDefs.color.default,\n ...itemProps\n } = props;\n return (\n <DropdownMenuPrimitive.RadioItem\n {...itemProps}\n asChild={false}\n ref={forwardedRef}\n data-accent-color={color}\n className={classNames(\n 'rt-BaseMenuItem',\n 'rt-BaseMenuRadioItem',\n 'rt-DropdownMenuItem',\n 'rt-DropdownMenuRadioItem',\n className,\n )}\n >\n {children}\n <DropdownMenuPrimitive.ItemIndicator className=\"rt-BaseMenuItemIndicator rt-DropdownMenuItemIndicator\">\n <ThickDotIcon className=\"rt-BaseMenuItemIndicatorIcon rt-DropdownMenuItemIndicatorIcon\" />\n </DropdownMenuPrimitive.ItemIndicator>\n </DropdownMenuPrimitive.RadioItem>\n );\n});\nDropdownMenuRadioItem.displayName = 'DropdownMenu.RadioItem';\n\ntype DropdownMenuCheckboxItemElement = React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>;\ntype DropdownMenuCheckboxItemOwnProps = GetPropDefTypes<typeof dropdownMenuCheckboxItemPropDefs>;\ninterface DropdownMenuCheckboxItemProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.CheckboxItem, RemovedProps>,\n DropdownMenuCheckboxItemOwnProps {}\nconst DropdownMenuCheckboxItem = React.forwardRef<\n DropdownMenuCheckboxItemElement,\n DropdownMenuCheckboxItemProps\n>((props, forwardedRef) => {\n const {\n children,\n className,\n shortcut,\n color = dropdownMenuCheckboxItemPropDefs.color.default,\n ...itemProps\n } = props;\n return (\n <DropdownMenuPrimitive.CheckboxItem\n {...itemProps}\n asChild={false}\n ref={forwardedRef}\n data-accent-color={color}\n className={classNames(\n 'rt-BaseMenuItem',\n 'rt-BaseMenuCheckboxItem',\n 'rt-DropdownMenuItem',\n 'rt-DropdownMenuCheckboxItem',\n className,\n )}\n >\n {children}\n <DropdownMenuPrimitive.ItemIndicator className=\"rt-BaseMenuItemIndicator rt-DropdownMenuItemIndicator\">\n <ThickCheckIcon className=\"rt-BaseMenuItemIndicatorIcon rt-ContextMenuItemIndicatorIcon\" />\n </DropdownMenuPrimitive.ItemIndicator>\n {shortcut && (\n <div className=\"rt-BaseMenuShortcut rt-DropdownMenuShortcut\">\n <Kbd size=\"1\">{shortcut}</Kbd>\n </div>\n )}\n </DropdownMenuPrimitive.CheckboxItem>\n );\n});\nDropdownMenuCheckboxItem.displayName = 'DropdownMenu.CheckboxItem';\n\ninterface DropdownMenuSubProps\n extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Sub> {}\nconst DropdownMenuSub: React.FC<DropdownMenuSubProps> = (props) => (\n <DropdownMenuPrimitive.Sub {...props} />\n);\nDropdownMenuSub.displayName = 'DropdownMenu.Sub';\n\ntype DropdownMenuSubTriggerElement = React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>;\ninterface DropdownMenuSubTriggerProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.SubTrigger, RemovedProps> {}\nconst DropdownMenuSubTrigger = React.forwardRef<\n DropdownMenuSubTriggerElement,\n DropdownMenuSubTriggerProps\n>((props, forwardedRef) => {\n const { className, children, ...subTriggerProps } = props;\n return (\n <DropdownMenuPrimitive.SubTrigger\n {...subTriggerProps}\n asChild={false}\n ref={forwardedRef}\n className={classNames(\n 'rt-BaseMenuItem',\n 'rt-BaseMenuSubTrigger',\n 'rt-DropdownMenuItem',\n 'rt-DropdownMenuSubTrigger',\n className,\n )}\n >\n {children}\n <div className=\"rt-BaseMenuShortcut rt-DropdownMenuShortcut\">\n <ThickChevronRightIcon className=\"rt-BaseMenuSubTriggerIcon rt-DropdownMenuSubtriggerIcon\" />\n </div>\n </DropdownMenuPrimitive.SubTrigger>\n );\n});\nDropdownMenuSubTrigger.displayName = 'DropdownMenu.SubTrigger';\n\ntype DropdownMenuSubContentElement = React.ElementRef<typeof DropdownMenuPrimitive.SubContent>;\ninterface DropdownMenuSubContentProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.SubContent, RemovedProps>,\n DropdownMenuContentContextValue {\n container?: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Portal>['container'];\n}\nconst DropdownMenuSubContent = React.forwardRef<\n DropdownMenuSubContentElement,\n DropdownMenuSubContentProps\n>((props, forwardedRef) => {\n // Memoize context consumption to prevent unnecessary re-renders\n const contextValue = React.useContext(DropdownMenuContentContext);\n const { size, variant, color, highContrast, material } = React.useMemo(\n () => contextValue,\n [contextValue],\n );\n\n const {\n className,\n children,\n container,\n forceMount,\n material: _,\n panelBackground: __,\n ...subContentProps\n } = extractProps(\n { size, variant, color, highContrast, material, ...props },\n dropdownMenuContentPropDefs,\n );\n return (\n <DropdownMenuPrimitive.Portal container={container} forceMount={forceMount}>\n <Theme asChild>\n <DropdownMenuPrimitive.SubContent\n data-accent-color={color}\n data-material={material}\n data-panel-background={material}\n alignOffset={-Number(size) * 4}\n // Side offset accounts for the outer solid box-shadow\n sideOffset={1}\n collisionPadding={10}\n {...subContentProps}\n asChild={false}\n ref={forwardedRef}\n className={classNames(\n 'rt-PopperContent',\n 'rt-BaseMenuContent',\n 'rt-BaseMenuSubContent',\n 'rt-DropdownMenuContent',\n 'rt-DropdownMenuSubContent',\n className,\n )}\n >\n <ScrollArea type=\"auto\">\n <div className={classNames('rt-BaseMenuViewport', 'rt-DropdownMenuViewport')}>\n {children}\n </div>\n </ScrollArea>\n </DropdownMenuPrimitive.SubContent>\n </Theme>\n </DropdownMenuPrimitive.Portal>\n );\n});\nDropdownMenuSubContent.displayName = 'DropdownMenu.SubContent';\n\ntype DropdownMenuSeparatorElement = React.ElementRef<typeof DropdownMenuPrimitive.Separator>;\ninterface DropdownMenuSeparatorProps\n extends ComponentPropsWithout<typeof DropdownMenuPrimitive.Separator, RemovedProps> {}\nconst DropdownMenuSeparator = React.forwardRef<\n DropdownMenuSeparatorElement,\n DropdownMenuSeparatorProps\n>(({ className, ...props }, forwardedRef) => (\n <DropdownMenuPrimitive.Separator\n {...props}\n asChild={false}\n ref={forwardedRef}\n className={classNames('rt-BaseMenuSeparator', 'rt-DropdownMenuSeparator', className)}\n />\n));\nDropdownMenuSeparator.displayName = 'DropdownMenu.Separator';\n\ntype DropdownMenuTriggerIconElement = React.ElementRef<'svg'>;\ninterface DropdownMenuTriggerIconProps extends IconProps {}\nconst DropdownMenuTriggerIcon = React.forwardRef<\n DropdownMenuTriggerIconElement,\n DropdownMenuTriggerIconProps\n>((props, forwardedRef) => (\n <ChevronDownIcon {...props} ref={forwardedRef} className=\"rt-DropdownMenuTriggerIcon\" />\n));\nDropdownMenuTriggerIcon.displayName = 'DropdownMenu.TriggerIcon';\n\nexport {\n DropdownMenuRoot as Root,\n DropdownMenuTrigger as Trigger,\n DropdownMenuTriggerIcon as TriggerIcon,\n DropdownMenuContent as Content,\n DropdownMenuLabel as Label,\n DropdownMenuItem as Item,\n DropdownMenuGroup as Group,\n DropdownMenuRadioGroup as RadioGroup,\n DropdownMenuRadioItem as RadioItem,\n DropdownMenuCheckboxItem as CheckboxItem,\n DropdownMenuSub as Sub,\n DropdownMenuSubTrigger as SubTrigger,\n DropdownMenuSubContent as SubContent,\n DropdownMenuSeparator as Separator,\n};\n\nexport type {\n DropdownMenuRootProps as RootProps,\n DropdownMenuTriggerProps as TriggerProps,\n DropdownMenuTriggerIconProps as TriggerIconProps,\n DropdownMenuContentProps as ContentProps,\n DropdownMenuLabelProps as LabelProps,\n DropdownMenuItemProps as ItemProps,\n DropdownMenuGroupProps as GroupProps,\n DropdownMenuRadioGroupProps as RadioGroupProps,\n DropdownMenuRadioItemProps as RadioItemProps,\n DropdownMenuCheckboxItemProps as CheckboxItemProps,\n DropdownMenuSubProps as SubProps,\n DropdownMenuSubTriggerProps as SubTriggerProps,\n DropdownMenuSubContentProps as SubContentProps,\n DropdownMenuSeparatorProps as SeparatorProps,\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["dropdown_menu_exports", "__export", "DropdownMenuCheckboxItem", "DropdownMenuContent", "DropdownMenuGroup", "DropdownMenuItem", "DropdownMenuLabel", "DropdownMenuRadioGroup", "DropdownMenuRadioItem", "DropdownMenuRoot", "DropdownMenuSeparator", "DropdownMenuSub", "DropdownMenuSubContent", "DropdownMenuSubTrigger", "DropdownMenuTrigger", "DropdownMenuTriggerIcon", "__toCommonJS", "React", "import_classnames", "import_radix_ui", "import_scroll_area", "import_dropdown_menu_props", "import_theme", "import_icons", "import_extract_props", "import_require_react_element", "import_kbd", "props", "DropdownMenuPrimitive", "children", "forwardedRef", "DropdownMenuContentContext", "themeContext", "effectiveMaterial", "memoizedThemeContext", "size", "variant", "highContrast", "material", "className", "color", "container", "forceMount", "_", "__", "contentProps", "resolvedColor", "classNames", "shortcut", "itemProps", "subTriggerProps", "contextValue", "subContentProps"]
|
|
7
7
|
}
|
|
@@ -34,7 +34,7 @@ declare const headingPropDefs: {
|
|
|
34
34
|
weight: {
|
|
35
35
|
type: "enum";
|
|
36
36
|
className: string;
|
|
37
|
-
values: readonly ["light", "regular", "medium", "bold"];
|
|
37
|
+
values: readonly ["thin", "extralight", "light", "regular", "medium", "semibold", "bold", "extrabold"];
|
|
38
38
|
responsive: true;
|
|
39
39
|
};
|
|
40
40
|
size: {
|
|
@@ -2,6 +2,15 @@ import * as React from 'react';
|
|
|
2
2
|
import { BaseButton } from './_internal/base-button.js';
|
|
3
3
|
import type { BaseButtonProps } from './_internal/base-button.js';
|
|
4
4
|
type IconButtonElement = React.ElementRef<typeof BaseButton>;
|
|
5
|
+
/**
|
|
6
|
+
* Required accessibility props for icon buttons
|
|
7
|
+
* Icon buttons must have an accessible name to meet WCAG guidelines
|
|
8
|
+
*
|
|
9
|
+
* Three ways to provide accessibility:
|
|
10
|
+
* 1. aria-label: Direct descriptive text
|
|
11
|
+
* 2. aria-labelledby: Reference to a label element
|
|
12
|
+
* 3. children: Visible text content (fallback)
|
|
13
|
+
*/
|
|
5
14
|
type AccessibilityProps = {
|
|
6
15
|
'aria-label': string;
|
|
7
16
|
'aria-labelledby'?: never;
|
|
@@ -13,13 +22,82 @@ type AccessibilityProps = {
|
|
|
13
22
|
'aria-labelledby'?: never;
|
|
14
23
|
children: React.ReactNode;
|
|
15
24
|
};
|
|
16
|
-
|
|
25
|
+
/**
|
|
26
|
+
* Tooltip configuration props that can be passed to IconButton
|
|
27
|
+
* These props are forwarded to the underlying Tooltip component
|
|
28
|
+
*/
|
|
29
|
+
interface IconButtonTooltipProps {
|
|
30
|
+
/** Content to display in the tooltip on hover/focus */
|
|
31
|
+
tooltip?: React.ReactNode;
|
|
32
|
+
/** Side of the button where the tooltip should appear */
|
|
33
|
+
tooltipSide?: 'top' | 'right' | 'bottom' | 'left';
|
|
34
|
+
/** Alignment of the tooltip relative to the button */
|
|
35
|
+
tooltipAlign?: 'start' | 'center' | 'end';
|
|
36
|
+
/** Delay before showing the tooltip (in milliseconds) */
|
|
37
|
+
tooltipDelayDuration?: number;
|
|
38
|
+
/** Whether to disable hoverable content behavior */
|
|
39
|
+
tooltipDisableHoverableContent?: boolean;
|
|
40
|
+
}
|
|
41
|
+
/**
|
|
42
|
+
* Core IconButton props excluding the 'as' prop for polymorphic behavior
|
|
43
|
+
* Combines BaseButton props with accessibility requirements and tooltip functionality
|
|
44
|
+
*/
|
|
45
|
+
type IconButtonOwnProps = Omit<BaseButtonProps, 'as'> & AccessibilityProps & IconButtonTooltipProps;
|
|
46
|
+
/**
|
|
47
|
+
* Polymorphic IconButton props that support rendering as different HTML elements
|
|
48
|
+
* @template C - The element type to render as (defaults to 'button')
|
|
49
|
+
*/
|
|
17
50
|
type IconButtonProps<C extends React.ElementType = 'button'> = IconButtonOwnProps & {
|
|
51
|
+
/** Element type to render as (e.g., 'a', 'span', etc.) */
|
|
18
52
|
as?: C;
|
|
19
53
|
} & Omit<React.ComponentPropsWithoutRef<C>, keyof IconButtonOwnProps>;
|
|
54
|
+
/**
|
|
55
|
+
* IconButton component type that supports polymorphic rendering
|
|
56
|
+
* @template C - The element type to render as
|
|
57
|
+
*/
|
|
20
58
|
type IconButtonComponent = <C extends React.ElementType = 'button'>(props: IconButtonProps<C> & {
|
|
21
59
|
ref?: React.ForwardedRef<IconButtonElement>;
|
|
22
60
|
}) => React.ReactElement | null;
|
|
61
|
+
/**
|
|
62
|
+
* IconButton component for compact, accessible icon-only interactions
|
|
63
|
+
*
|
|
64
|
+
* The IconButton component extends Button with specialized behavior for visual symbols.
|
|
65
|
+
* It enforces accessibility requirements, provides automatic square sizing, and includes
|
|
66
|
+
* built-in tooltip integration. Icon buttons are essential for space-efficient interfaces
|
|
67
|
+
* while maintaining accessibility compliance.
|
|
68
|
+
*
|
|
69
|
+
* Key features:
|
|
70
|
+
* - Enforced accessibility requirements (aria-label, aria-labelledby, or children)
|
|
71
|
+
* - Automatic square aspect ratios for consistent visual alignment
|
|
72
|
+
* - Built-in tooltip support for context and guidance
|
|
73
|
+
* - Same variant and size system as Button for consistency
|
|
74
|
+
* - Runtime validation for accessibility compliance
|
|
75
|
+
*
|
|
76
|
+
* @example
|
|
77
|
+
* ```tsx
|
|
78
|
+
* // Basic icon button with aria-label
|
|
79
|
+
* <IconButton aria-label="Settings">
|
|
80
|
+
* <Settings />
|
|
81
|
+
* </IconButton>
|
|
82
|
+
*
|
|
83
|
+
* // Icon button with tooltip
|
|
84
|
+
* <IconButton aria-label="Save" tooltip="Save your progress">
|
|
85
|
+
* <Save />
|
|
86
|
+
* </IconButton>
|
|
87
|
+
*
|
|
88
|
+
* // Icon button with aria-labelledby
|
|
89
|
+
* <IconButton aria-labelledby="settings-label">
|
|
90
|
+
* <Settings />
|
|
91
|
+
* </IconButton>
|
|
92
|
+
* <span id="settings-label">Open settings panel</span>
|
|
93
|
+
*
|
|
94
|
+
* // Icon button with visible text (fallback)
|
|
95
|
+
* <IconButton>
|
|
96
|
+
* <Settings />
|
|
97
|
+
* Settings
|
|
98
|
+
* </IconButton>
|
|
99
|
+
* ```
|
|
100
|
+
*/
|
|
23
101
|
declare const IconButton: IconButtonComponent & {
|
|
24
102
|
displayName?: string;
|
|
25
103
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAElE,KAAK,iBAAiB,GAAG,KAAK,CAAC,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAE7D;;;;;;;;GAQG;AACH,KAAK,kBAAkB,GACnB;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,KAAK,CAAA;CAAE,GACnD;IAAE,YAAY,CAAC,EAAE,KAAK,CAAC;IAAC,iBAAiB,EAAE,MAAM,CAAA;CAAE,GACnD;IAAE,YAAY,CAAC,EAAE,KAAK,CAAC;IAAC,iBAAiB,CAAC,EAAE,KAAK,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAAC;AAEnF;;;GAGG;AACH,UAAU,sBAAsB;IAC9B,uDAAuD;IACvD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,yDAAyD;IACzD,WAAW,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAClD,sDAAsD;IACtD,YAAY,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IAC1C,yDAAyD;IACzD,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,oDAAoD;IACpD,8BAA8B,CAAC,EAAE,OAAO,CAAC;CAC1C;AAED;;;GAGG;AACH,KAAK,kBAAkB,GAAG,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,GAAG,kBAAkB,GAAG,sBAAsB,CAAC;AAEpG;;;GAGG;AACH,KAAK,eAAe,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI,kBAAkB,GAAG;IAClF,0DAA0D;IAC1D,EAAE,CAAC,EAAE,CAAC,CAAC;CACR,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,kBAAkB,CAAC,CAAC;AAEtE;;;GAGG;AACH,KAAK,mBAAmB,GAAG,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EAChE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAA;CAAE,KACxE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;AAE/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,QAAA,MAAM,UAAU,EAyDX,mBAAmB,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAIpD,OAAO,EAAE,UAAU,EAAE,CAAC;AACtB,YAAY,EAAE,eAAe,EAAE,CAAC"}
|
|
@@ -1,2 +1,5 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var P=Object.create;var l=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var E=(t,e)=>{for(var o in e)l(t,o,{get:e[o],enumerable:!0})},p=(t,e,o,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of C(e))!w.call(t,n)&&n!==o&&l(t,n,{get:()=>e[n],enumerable:!(r=h(e,n))||r.enumerable});return t};var b=(t,e,o)=>(o=t!=null?P(v(t)):{},p(e||!t||!t.__esModule?l(o,"default",{value:t,enumerable:!0}):o,t)),g=t=>p(l({},"__esModule",{value:!0}),t);var x={};E(x,{IconButton:()=>c});module.exports=g(x);var i=b(require("react")),u=b(require("classnames")),m=require("./_internal/base-button.js"),d=require("./tooltip.js");const c=i.forwardRef(({className:t,tooltip:e,tooltipSide:o="top",tooltipAlign:r="center",tooltipDelayDuration:n,tooltipDisableHoverableContent:B,...a},y)=>{const f="aria-label"in a&&a["aria-label"],I="aria-labelledby"in a&&a["aria-labelledby"],R="children"in a&&a.children;if(!f&&!I&&!R)throw new Error(`IconButton: Icon buttons must have an accessible name. Please provide either:
|
|
2
|
+
- aria-label prop with descriptive text
|
|
3
|
+
- aria-labelledby prop referencing a label element
|
|
4
|
+
- or visible text children`);const s=i.createElement(m.BaseButton,{...a,ref:y,className:(0,u.default)("rt-IconButton",t)});return e?i.createElement(d.Tooltip,{content:e,side:o,align:r,delayDuration:n,disableHoverableContent:B},s):s});c.displayName="IconButton";
|
|
2
5
|
//# sourceMappingURL=icon-button.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/icon-button.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\n\nimport { BaseButton } from './_internal/base-button.js';\nimport type { BaseButtonProps } from './_internal/base-button.js';\n\ntype IconButtonElement = React.ElementRef<typeof BaseButton>;\n\n
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,gBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAuB,oBACvBC,EAAuB,yBAEvBC,EAA2B,
|
|
6
|
-
"names": ["icon_button_exports", "__export", "IconButton", "__toCommonJS", "React", "import_classnames", "import_base_button", "className", "props", "forwardedRef", "classNames"]
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\n\nimport { BaseButton } from './_internal/base-button.js';\nimport { Tooltip } from './tooltip.js';\nimport type { BaseButtonProps } from './_internal/base-button.js';\n\ntype IconButtonElement = React.ElementRef<typeof BaseButton>;\n\n/**\n * Required accessibility props for icon buttons\n * Icon buttons must have an accessible name to meet WCAG guidelines\n *\n * Three ways to provide accessibility:\n * 1. aria-label: Direct descriptive text\n * 2. aria-labelledby: Reference to a label element\n * 3. children: Visible text content (fallback)\n */\ntype AccessibilityProps =\n | { 'aria-label': string; 'aria-labelledby'?: never }\n | { 'aria-label'?: never; 'aria-labelledby': string }\n | { 'aria-label'?: never; 'aria-labelledby'?: never; children: React.ReactNode };\n\n/**\n * Tooltip configuration props that can be passed to IconButton\n * These props are forwarded to the underlying Tooltip component\n */\ninterface IconButtonTooltipProps {\n /** Content to display in the tooltip on hover/focus */\n tooltip?: React.ReactNode;\n /** Side of the button where the tooltip should appear */\n tooltipSide?: 'top' | 'right' | 'bottom' | 'left';\n /** Alignment of the tooltip relative to the button */\n tooltipAlign?: 'start' | 'center' | 'end';\n /** Delay before showing the tooltip (in milliseconds) */\n tooltipDelayDuration?: number;\n /** Whether to disable hoverable content behavior */\n tooltipDisableHoverableContent?: boolean;\n}\n\n/**\n * Core IconButton props excluding the 'as' prop for polymorphic behavior\n * Combines BaseButton props with accessibility requirements and tooltip functionality\n */\ntype IconButtonOwnProps = Omit<BaseButtonProps, 'as'> & AccessibilityProps & IconButtonTooltipProps;\n\n/**\n * Polymorphic IconButton props that support rendering as different HTML elements\n * @template C - The element type to render as (defaults to 'button')\n */\ntype IconButtonProps<C extends React.ElementType = 'button'> = IconButtonOwnProps & {\n /** Element type to render as (e.g., 'a', 'span', etc.) */\n as?: C;\n} & Omit<React.ComponentPropsWithoutRef<C>, keyof IconButtonOwnProps>;\n\n/**\n * IconButton component type that supports polymorphic rendering\n * @template C - The element type to render as\n */\ntype IconButtonComponent = <C extends React.ElementType = 'button'>(\n props: IconButtonProps<C> & { ref?: React.ForwardedRef<IconButtonElement> },\n) => React.ReactElement | null;\n\n/**\n * IconButton component for compact, accessible icon-only interactions\n *\n * The IconButton component extends Button with specialized behavior for visual symbols.\n * It enforces accessibility requirements, provides automatic square sizing, and includes\n * built-in tooltip integration. Icon buttons are essential for space-efficient interfaces\n * while maintaining accessibility compliance.\n *\n * Key features:\n * - Enforced accessibility requirements (aria-label, aria-labelledby, or children)\n * - Automatic square aspect ratios for consistent visual alignment\n * - Built-in tooltip support for context and guidance\n * - Same variant and size system as Button for consistency\n * - Runtime validation for accessibility compliance\n *\n * @example\n * ```tsx\n * // Basic icon button with aria-label\n * <IconButton aria-label=\"Settings\">\n * <Settings />\n * </IconButton>\n *\n * // Icon button with tooltip\n * <IconButton aria-label=\"Save\" tooltip=\"Save your progress\">\n * <Save />\n * </IconButton>\n *\n * // Icon button with aria-labelledby\n * <IconButton aria-labelledby=\"settings-label\">\n * <Settings />\n * </IconButton>\n * <span id=\"settings-label\">Open settings panel</span>\n *\n * // Icon button with visible text (fallback)\n * <IconButton>\n * <Settings />\n * Settings\n * </IconButton>\n * ```\n */\nconst IconButton = React.forwardRef(\n (\n {\n className,\n tooltip,\n tooltipSide = 'top',\n tooltipAlign = 'center',\n tooltipDelayDuration,\n tooltipDisableHoverableContent,\n ...props\n }: IconButtonProps,\n forwardedRef: React.ForwardedRef<IconButtonElement>,\n ) => {\n // Runtime accessibility validation to ensure WCAG compliance\n // This helps catch accessibility issues during development\n const hasAriaLabel = 'aria-label' in props && props['aria-label'];\n const hasAriaLabelledBy = 'aria-labelledby' in props && props['aria-labelledby'];\n const hasChildren = 'children' in props && props.children;\n\n // Throw descriptive error if no accessible name is provided\n if (!hasAriaLabel && !hasAriaLabelledBy && !hasChildren) {\n throw new Error(\n 'IconButton: Icon buttons must have an accessible name. Please provide either:' +\n '\\n- aria-label prop with descriptive text' +\n '\\n- aria-labelledby prop referencing a label element' +\n '\\n- or visible text children',\n );\n }\n\n // Create the base icon button element with accessibility props\n const iconButton = (\n <BaseButton\n {...props}\n ref={forwardedRef}\n className={classNames('rt-IconButton', className)}\n />\n );\n\n // If no tooltip is provided, return the icon button as-is for better performance\n if (!tooltip) {\n return iconButton;\n }\n\n // Wrap with Tooltip when tooltip content is provided\n // This creates a compound component that handles both button and tooltip functionality\n return (\n <Tooltip\n content={tooltip}\n side={tooltipSide}\n align={tooltipAlign}\n delayDuration={tooltipDelayDuration}\n disableHoverableContent={tooltipDisableHoverableContent}\n >\n {iconButton}\n </Tooltip>\n );\n },\n) as IconButtonComponent & { displayName?: string };\n\nIconButton.displayName = 'IconButton';\n\nexport { IconButton };\nexport type { IconButtonProps };\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,gBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAuB,oBACvBC,EAAuB,yBAEvBC,EAA2B,sCAC3BC,EAAwB,wBAmGxB,MAAML,EAAaE,EAAM,WACvB,CACE,CACE,UAAAI,EACA,QAAAC,EACA,YAAAC,EAAc,MACd,aAAAC,EAAe,SACf,qBAAAC,EACA,+BAAAC,EACA,GAAGC,CACL,EACAC,IACG,CAGH,MAAMC,EAAe,eAAgBF,GAASA,EAAM,YAAY,EAC1DG,EAAoB,oBAAqBH,GAASA,EAAM,iBAAiB,EACzEI,EAAc,aAAcJ,GAASA,EAAM,SAGjD,GAAI,CAACE,GAAgB,CAACC,GAAqB,CAACC,EAC1C,MAAM,IAAI,MACR;AAAA;AAAA;AAAA,2BAIF,EAIF,MAAMC,EACJf,EAAA,cAAC,cACE,GAAGU,EACJ,IAAKC,EACL,aAAW,EAAAK,SAAW,gBAAiBZ,CAAS,EAClD,EAIF,OAAKC,EAOHL,EAAA,cAAC,WACC,QAASK,EACT,KAAMC,EACN,MAAOC,EACP,cAAeC,EACf,wBAAyBC,GAExBM,CACH,EAdOA,CAgBX,CACF,EAEAjB,EAAW,YAAc",
|
|
6
|
+
"names": ["icon_button_exports", "__export", "IconButton", "__toCommonJS", "React", "import_classnames", "import_base_button", "import_tooltip", "className", "tooltip", "tooltipSide", "tooltipAlign", "tooltipDelayDuration", "tooltipDisableHoverableContent", "props", "forwardedRef", "hasAriaLabel", "hasAriaLabelledBy", "hasChildren", "iconButton", "classNames"]
|
|
7
7
|
}
|
|
@@ -6,41 +6,160 @@ import type { WidthProps } from '../props/width.props.js';
|
|
|
6
6
|
import type { HeightProps } from '../props/height.props.js';
|
|
7
7
|
import type { LayoutProps } from '../props/layout.props.js';
|
|
8
8
|
import type { GetPropDefTypes } from '../props/prop-def.js';
|
|
9
|
+
/**
|
|
10
|
+
* Core Image props that extend the base image prop definitions
|
|
11
|
+
* These props provide enhanced functionality beyond standard HTML img attributes
|
|
12
|
+
*/
|
|
9
13
|
type ImageOwnProps = GetPropDefTypes<typeof imagePropDefs> & {
|
|
14
|
+
/**
|
|
15
|
+
* Native loading behavior for the image
|
|
16
|
+
* 'lazy' defers loading until the image is near the viewport
|
|
17
|
+
* 'eager' loads the image immediately
|
|
18
|
+
*/
|
|
10
19
|
loading?: 'eager' | 'lazy';
|
|
11
20
|
/**
|
|
12
|
-
* Placeholder image URL to show while the main image is loading
|
|
13
|
-
*
|
|
21
|
+
* Placeholder image URL to show while the main image is loading
|
|
22
|
+
*
|
|
23
|
+
* Best practices:
|
|
24
|
+
* - Use a low-quality/blurred version of the main image
|
|
25
|
+
* - Keep file size small (under 10KB recommended)
|
|
26
|
+
* - Use same aspect ratio as main image
|
|
27
|
+
* - Consider using base64 data URLs for inline placeholders
|
|
28
|
+
*
|
|
29
|
+
* @example
|
|
30
|
+
* ```tsx
|
|
31
|
+
* <Image
|
|
32
|
+
* src="/high-res-image.jpg"
|
|
33
|
+
* placeholder="/low-res-placeholder.jpg"
|
|
34
|
+
* alt="Product photo"
|
|
35
|
+
* />
|
|
36
|
+
* ```
|
|
14
37
|
*/
|
|
15
38
|
placeholder?: string;
|
|
16
39
|
/**
|
|
17
|
-
* Shows a skeleton placeholder while loading instead of a blank space
|
|
40
|
+
* Shows a skeleton placeholder while loading instead of a blank space
|
|
41
|
+
*
|
|
42
|
+
* Use this when:
|
|
43
|
+
* - You don't have a placeholder image
|
|
44
|
+
* - You want consistent loading states across your interface
|
|
45
|
+
* - The image is part of a content layout that needs stable dimensions
|
|
18
46
|
*/
|
|
19
47
|
showSkeleton?: boolean;
|
|
20
48
|
/**
|
|
21
|
-
* Whether the image should fade in when loaded
|
|
49
|
+
* Whether the image should fade in when loaded
|
|
50
|
+
*
|
|
51
|
+
* Set to false for:
|
|
52
|
+
* - Background images where immediate visibility is important
|
|
53
|
+
* - Images that need to appear instantly for UX reasons
|
|
54
|
+
* - When you're implementing custom loading animations
|
|
22
55
|
*/
|
|
23
56
|
fadeIn?: boolean;
|
|
24
57
|
/**
|
|
25
|
-
* Callback fired when the image successfully loads
|
|
58
|
+
* Callback fired when the image successfully loads
|
|
59
|
+
*
|
|
60
|
+
* Use this to:
|
|
61
|
+
* - Track image loading performance
|
|
62
|
+
* - Trigger layout adjustments after load
|
|
63
|
+
* - Implement custom loading state management
|
|
26
64
|
*/
|
|
27
65
|
onLoad?: (event: React.SyntheticEvent<HTMLImageElement>) => void;
|
|
28
66
|
/**
|
|
29
|
-
* Callback fired when the image fails to load
|
|
67
|
+
* Callback fired when the image fails to load
|
|
68
|
+
*
|
|
69
|
+
* Use this to:
|
|
70
|
+
* - Log errors for monitoring
|
|
71
|
+
* - Show fallback content
|
|
72
|
+
* - Implement retry logic
|
|
30
73
|
*/
|
|
31
74
|
onError?: (event: React.SyntheticEvent<HTMLImageElement>) => void;
|
|
32
|
-
/**
|
|
33
|
-
* Style object to apply to the wrapper container. Useful for overriding display, width, height, etc.
|
|
34
|
-
*/
|
|
35
|
-
wrapperStyle?: React.CSSProperties;
|
|
36
75
|
};
|
|
76
|
+
/**
|
|
77
|
+
* Complete Image component props interface
|
|
78
|
+
*
|
|
79
|
+
* Combines HTML img attributes with design system props and enhanced functionality.
|
|
80
|
+
* Excludes conflicting props like 'color', 'width', 'height' that are handled by the design system.
|
|
81
|
+
*/
|
|
37
82
|
interface ImageProps extends ComponentPropsWithout<'img', RemovedProps | 'color' | 'width' | 'height' | 'alt'>, MarginProps, WidthProps, HeightProps, LayoutProps, ImageOwnProps {
|
|
38
83
|
/**
|
|
39
|
-
*
|
|
40
|
-
*
|
|
84
|
+
* Alternative text for the image
|
|
85
|
+
*
|
|
86
|
+
* Required for accessibility when not using asChild pattern.
|
|
87
|
+
* Describes the image content for screen readers and when images fail to load.
|
|
88
|
+
*
|
|
89
|
+
* Guidelines:
|
|
90
|
+
* - Be descriptive but concise
|
|
91
|
+
* - Don't include "image of" or "picture of"
|
|
92
|
+
* - Use empty string ("") for purely decorative images
|
|
93
|
+
* - Describe the content and context, not just what you see
|
|
94
|
+
*
|
|
95
|
+
* @example
|
|
96
|
+
* ```tsx
|
|
97
|
+
* // Good alt text
|
|
98
|
+
* <Image src="/chart.png" alt="Sales increased 25% from Q1 to Q2" />
|
|
99
|
+
*
|
|
100
|
+
* // Decorative image
|
|
101
|
+
* <Image src="/decoration.png" alt="" />
|
|
102
|
+
*
|
|
103
|
+
* // Avoid generic descriptions
|
|
104
|
+
* <Image src="/photo.jpg" alt="A photo" /> // ❌ Too generic
|
|
105
|
+
* <Image src="/photo.jpg" alt="Team celebrating project launch" /> // ✅ Descriptive
|
|
106
|
+
* ```
|
|
41
107
|
*/
|
|
42
108
|
alt: string;
|
|
43
109
|
}
|
|
110
|
+
/**
|
|
111
|
+
* Image component for displaying images with enhanced loading states and accessibility
|
|
112
|
+
*
|
|
113
|
+
* The Image component extends the standard HTML img element with advanced features
|
|
114
|
+
* including placeholder images, skeleton loading states, fade-in animations, and
|
|
115
|
+
* comprehensive accessibility support. It integrates seamlessly with the design
|
|
116
|
+
* system's layout, spacing, and theming capabilities.
|
|
117
|
+
*
|
|
118
|
+
* Key features:
|
|
119
|
+
* - Progressive loading with placeholder and skeleton states
|
|
120
|
+
* - Fade-in animations with reduced motion support
|
|
121
|
+
* - Comprehensive accessibility with ARIA attributes
|
|
122
|
+
* - Object-fit control for responsive image scaling
|
|
123
|
+
* - Caption support for additional context
|
|
124
|
+
* - AsChild pattern for flexible composition
|
|
125
|
+
* - Error handling with fallback states
|
|
126
|
+
* - Performance optimizations for cached images
|
|
127
|
+
*
|
|
128
|
+
* @example
|
|
129
|
+
* ```tsx
|
|
130
|
+
* // Basic usage
|
|
131
|
+
* <Image src="/photo.jpg" alt="Team photo" />
|
|
132
|
+
*
|
|
133
|
+
* // With placeholder and skeleton
|
|
134
|
+
* <Image
|
|
135
|
+
* src="/high-res.jpg"
|
|
136
|
+
* placeholder="/low-res.jpg"
|
|
137
|
+
* showSkeleton
|
|
138
|
+
* alt="Product showcase"
|
|
139
|
+
* />
|
|
140
|
+
*
|
|
141
|
+
* // With caption and custom fit
|
|
142
|
+
* <Image
|
|
143
|
+
* src="/chart.png"
|
|
144
|
+
* alt="Sales data visualization"
|
|
145
|
+
* caption="Q3 2024 Sales Performance"
|
|
146
|
+
* fit="contain"
|
|
147
|
+
* width="400px"
|
|
148
|
+
* height="300px"
|
|
149
|
+
* />
|
|
150
|
+
*
|
|
151
|
+
* // As clickable element
|
|
152
|
+
* <Image
|
|
153
|
+
* asChild
|
|
154
|
+
* src="/thumbnail.jpg"
|
|
155
|
+
* alt="View full gallery"
|
|
156
|
+
* >
|
|
157
|
+
* <a href="/gallery">
|
|
158
|
+
* View Gallery
|
|
159
|
+
* </a>
|
|
160
|
+
* </Image>
|
|
161
|
+
* ```
|
|
162
|
+
*/
|
|
44
163
|
declare const Image: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLImageElement>>;
|
|
45
164
|
export { Image };
|
|
46
165
|
export type { ImageProps };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/components/image.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/components/image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AASjD,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACzF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAI5D;;;GAGG;AACH,KAAK,aAAa,GAAG,eAAe,CAAC,OAAO,aAAa,CAAC,GAAG;IAC3D;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B;;;;;;;;;;;;;;;;;OAiBG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACjE;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CACnE,CAAC;AAEF;;;;;GAKG;AACH,UAAU,UACR,SAAQ,qBAAqB,CAAC,KAAK,EAAE,YAAY,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC,EACvF,WAAW,EACX,UAAU,EACV,WAAW,EACX,WAAW,EACX,aAAa;IACf;;;;;;;;;;;;;;;;;;;;;;;;OAwBG;IACH,GAAG,EAAE,MAAM,CAAC;CACb;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,QAAA,MAAM,KAAK,qFA+OT,CAAC;AAIH,OAAO,EAAE,KAAK,EAAE,CAAC;AACjB,YAAY,EAAE,UAAU,EAAE,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";var U=Object.create;var l=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var X=Object.getOwnPropertyNames;var Y=Object.getPrototypeOf,Z=Object.prototype.hasOwnProperty;var _=(o,t)=>{for(var r in t)l(o,r,{get:t[r],enumerable:!0})},D=(o,t,r,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of X(t))!Z.call(o,i)&&i!==r&&l(o,i,{get:()=>t[i],enumerable:!(s=V(t,i))||s.enumerable});return o};var C=(o,t,r)=>(r=o!=null?U(Y(o)):{},D(t||!o||!o.__esModule?l(r,"default",{value:o,enumerable:!0}):r,o)),$=o=>D(l({},"__esModule",{value:!0}),o);var ee={};_(ee,{Image:()=>y});module.exports=$(ee);var e=C(require("react")),h=C(require("classnames")),N=require("./image.props.js"),H=require("../helpers/extract-props.js"),k=require("../props/margin.props.js"),M=require("../props/width.props.js"),T=require("../props/height.props.js"),j=require("../props/layout.props.js"),W=require("./skeleton.js"),z=require("./slot.js");const y=e.forwardRef((o,t)=>{const{asChild:r,className:s,style:i,loading:O="lazy",alt:u,src:p,placeholder:m,showSkeleton:R=!1,fadeIn:P=!0,errorAriaLabel:q="Failed to load image",radius:G,caption:n,onLoad:I,onError:v,children:A,...E}=(0,H.extractProps)(o,N.imagePropDefs,k.marginPropDefs,M.widthPropDefs,T.heightPropDefs,j.layoutPropDefs),[d,c]=e.useState("loading"),[F,g]=e.useState(!!m),S=e.useRef(null),B=e.useCallback(a=>{c("loaded"),g(!1),I?.(a)},[I]),J=e.useCallback(a=>{c("error"),g(!1),v?.(a)},[v]);if(e.useEffect(()=>{const a=S.current;a&&a.complete&&a.naturalWidth>0&&(c("loaded"),g(!1))},[p]),!p)return console.warn("Image component: src prop is required"),null;!r&&u===void 0&&console.warn("Image component: alt prop is required for accessibility when not using asChild");const L=d==="loading",f=d==="error",K=d==="loaded",Q={"aria-busy":L,"aria-invalid":f,"aria-describedby":f?"image-error":void 0},b={width:"100%",height:"100%",display:"block",opacity:P?K?1:0:1,transition:P?"opacity 0.3s ease-out":"none"},w=e.createElement(e.Fragment,null,e.createElement("div",{style:{position:"relative",flex:n?"1 1 0%":void 0,height:n?void 0:"100%",minHeight:0}},f&&e.createElement("div",{id:"image-error",className:"rt-sr-only","aria-live":"polite"},q),R&&L&&e.createElement(W.Skeleton,{width:"100%",height:"100%",style:{position:"absolute",inset:0}}),m&&F&&e.createElement("img",{style:{...b,position:"absolute",inset:0,filter:"blur(4px)",opacity:.7,zIndex:0},className:(0,h.default)("rt-reset","rt-Image","rt-Image--placeholder"),alt:"",src:m}),e.createElement("img",{ref:a=>{S.current=a,typeof t=="function"?t(a):t&&(t.current=a)},loading:O,style:{...b,position:"relative",zIndex:1},className:(0,h.default)("rt-reset","rt-Image",s),alt:u,src:p,"data-radius":G,onLoad:B,onError:J,...Q})),n&&e.createElement("div",{className:"rt-Image-caption",style:{flex:"0 0 auto"}},n)),x={display:n?"flex":"block",flexDirection:n?"column":void 0,...i};return r?e.createElement(z.Slot,{className:s,style:x,...E},e.cloneElement(A,{},w)):e.createElement("div",{className:s,style:x,...E},w)});y.displayName="Image";
|
|
2
2
|
//# sourceMappingURL=image.js.map
|