@ropav/styles 0.5.0 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +111 -15
- package/dist/components/accordion/accordion.styles.d.ts +47 -50
- package/dist/components/accordion/accordion.styles.d.ts.map +1 -1
- package/dist/components/accordion/accordion.styles.js +10 -10
- package/dist/components/accordion.css +16 -24
- package/dist/components/alert/alert.styles.d.ts +32 -74
- package/dist/components/alert/alert.styles.d.ts.map +1 -1
- package/dist/components/alert/alert.styles.js +11 -11
- package/dist/components/alert-dialog/alert-dialog.styles.d.ts +79 -173
- package/dist/components/alert-dialog/alert-dialog.styles.d.ts.map +1 -1
- package/dist/components/alert-dialog/alert-dialog.styles.js +24 -24
- package/dist/components/alert-dialog.css +27 -39
- package/dist/components/alert.css +15 -15
- package/dist/components/autocomplete/autocomplete.styles.d.ts +58 -107
- package/dist/components/autocomplete/autocomplete.styles.d.ts.map +1 -1
- package/dist/components/autocomplete/autocomplete.styles.js +16 -16
- package/dist/components/autocomplete.css +43 -53
- package/dist/components/avatar/avatar.styles.d.ts +30 -119
- package/dist/components/avatar/avatar.styles.d.ts.map +1 -1
- package/dist/components/avatar/avatar.styles.js +13 -13
- package/dist/components/avatar.css +18 -18
- package/dist/components/badge/badge.styles.d.ts +34 -176
- package/dist/components/badge/badge.styles.d.ts.map +1 -1
- package/dist/components/badge/badge.styles.js +19 -19
- package/dist/components/badge.css +28 -28
- package/dist/components/breadcrumbs/breadcrumbs.styles.d.ts +17 -44
- package/dist/components/breadcrumbs/breadcrumbs.styles.d.ts.map +1 -1
- package/dist/components/breadcrumbs/breadcrumbs.styles.js +5 -5
- package/dist/components/breadcrumbs.css +13 -6
- package/dist/components/button/button.styles.d.ts +9 -68
- package/dist/components/button/button.styles.d.ts.map +1 -1
- package/dist/components/button/button.styles.js +14 -14
- package/dist/components/button-group/button-group.styles.d.ts +20 -56
- package/dist/components/button-group/button-group.styles.d.ts.map +1 -1
- package/dist/components/button-group/button-group.styles.js +6 -6
- package/dist/components/button-group.css +24 -28
- package/dist/components/button.css +19 -23
- package/dist/components/calendar/calendar.styles.d.ts +41 -77
- package/dist/components/calendar/calendar.styles.d.ts.map +1 -1
- package/dist/components/calendar/calendar.styles.js +13 -13
- package/dist/components/calendar-year-picker/calendar-year-picker.styles.d.ts +20 -50
- package/dist/components/calendar-year-picker/calendar-year-picker.styles.d.ts.map +1 -1
- package/dist/components/calendar-year-picker/calendar-year-picker.styles.js +6 -6
- package/dist/components/calendar-year-picker.css +36 -23
- package/dist/components/calendar.css +68 -43
- package/dist/components/card/card.styles.d.ts +37 -68
- package/dist/components/card/card.styles.d.ts.map +1 -1
- package/dist/components/card/card.styles.js +11 -11
- package/dist/components/card.css +10 -10
- package/dist/components/checkbox/checkbox.styles.d.ts +27 -44
- package/dist/components/checkbox/checkbox.styles.d.ts.map +1 -1
- package/dist/components/checkbox/checkbox.styles.js +7 -7
- package/dist/components/checkbox-group/checkbox-group.styles.d.ts +6 -17
- package/dist/components/checkbox-group/checkbox-group.styles.d.ts.map +1 -1
- package/dist/components/checkbox-group/checkbox-group.styles.js +4 -4
- package/dist/components/checkbox-group.css +1 -1
- package/dist/components/checkbox.css +87 -88
- package/dist/components/chip/chip.styles.d.ts +23 -140
- package/dist/components/chip/chip.styles.d.ts.map +1 -1
- package/dist/components/chip/chip.styles.js +15 -15
- package/dist/components/chip.css +26 -24
- package/dist/components/close-button/close-button.styles.d.ts +6 -14
- package/dist/components/close-button/close-button.styles.d.ts.map +1 -1
- package/dist/components/close-button/close-button.styles.js +3 -3
- package/dist/components/close-button.css +9 -8
- package/dist/components/color-area/color-area.styles.d.ts +17 -32
- package/dist/components/color-area/color-area.styles.d.ts.map +1 -1
- package/dist/components/color-area/color-area.styles.js +4 -4
- package/dist/components/color-area.css +9 -9
- package/dist/components/color-field/color-field.styles.d.ts +6 -17
- package/dist/components/color-field/color-field.styles.d.ts.map +1 -1
- package/dist/components/color-field/color-field.styles.js +3 -3
- package/dist/components/color-field.css +2 -2
- package/dist/components/color-input-group/color-input-group.styles.d.ts +37 -89
- package/dist/components/color-input-group/color-input-group.styles.d.ts.map +1 -1
- package/dist/components/color-input-group/color-input-group.styles.js +10 -10
- package/dist/components/color-input-group.css +23 -40
- package/dist/components/color-picker/color-picker.styles.d.ts +14 -38
- package/dist/components/color-picker/color-picker.styles.d.ts.map +1 -1
- package/dist/components/color-picker/color-picker.styles.js +4 -4
- package/dist/components/color-picker.css +4 -8
- package/dist/components/color-slider/color-slider.styles.d.ts +17 -44
- package/dist/components/color-slider/color-slider.styles.d.ts.map +1 -1
- package/dist/components/color-slider/color-slider.styles.js +5 -5
- package/dist/components/color-slider.css +30 -28
- package/dist/components/color-swatch/color-swatch.styles.d.ts +7 -38
- package/dist/components/color-swatch/color-swatch.styles.d.ts.map +1 -1
- package/dist/components/color-swatch/color-swatch.styles.js +9 -9
- package/dist/components/color-swatch-picker/color-swatch-picker.styles.d.ts +37 -119
- package/dist/components/color-swatch-picker/color-swatch-picker.styles.d.ts.map +1 -1
- package/dist/components/color-swatch-picker/color-swatch-picker.styles.js +14 -14
- package/dist/components/color-swatch-picker.css +21 -104
- package/dist/components/color-swatch.css +13 -13
- package/dist/components/combo-box/combo-box.styles.d.ts +38 -71
- package/dist/components/combo-box/combo-box.styles.d.ts.map +1 -1
- package/dist/components/combo-box/combo-box.styles.js +10 -10
- package/dist/components/combo-box.css +23 -13
- package/dist/components/date-field/date-field.styles.d.ts +6 -17
- package/dist/components/date-field/date-field.styles.d.ts.map +1 -1
- package/dist/components/date-field/date-field.styles.js +3 -3
- package/dist/components/date-field.css +2 -2
- package/dist/components/date-input-group/date-input-group.styles.d.ts +51 -95
- package/dist/components/date-input-group/date-input-group.styles.d.ts.map +1 -1
- package/dist/components/date-input-group/date-input-group.styles.js +12 -12
- package/dist/components/date-input-group.css +50 -48
- package/dist/components/date-picker/date-picker.styles.d.ts +17 -44
- package/dist/components/date-picker/date-picker.styles.d.ts.map +1 -1
- package/dist/components/date-picker/date-picker.styles.js +5 -5
- package/dist/components/date-picker.css +9 -13
- package/dist/components/date-range-picker/date-range-picker.styles.d.ts +20 -50
- package/dist/components/date-range-picker/date-range-picker.styles.d.ts.map +1 -1
- package/dist/components/date-range-picker/date-range-picker.styles.js +6 -6
- package/dist/components/date-range-picker.css +10 -14
- package/dist/components/description/description.styles.d.ts +4 -2
- package/dist/components/description/description.styles.d.ts.map +1 -1
- package/dist/components/description/description.styles.js +2 -2
- package/dist/components/description.css +1 -1
- package/dist/components/disclosure/disclosure.styles.d.ts +26 -26
- package/dist/components/disclosure/disclosure.styles.d.ts.map +1 -1
- package/dist/components/disclosure/disclosure.styles.js +8 -8
- package/dist/components/disclosure-group/disclosure-group.styles.d.ts +8 -8
- package/dist/components/disclosure-group/disclosure-group.styles.d.ts.map +1 -1
- package/dist/components/disclosure-group/disclosure-group.styles.js +2 -2
- package/dist/components/disclosure-group.css +1 -1
- package/dist/components/disclosure.css +6 -10
- package/dist/components/drawer/drawer.styles.d.ts +68 -125
- package/dist/components/drawer/drawer.styles.d.ts.map +1 -1
- package/dist/components/drawer/drawer.styles.js +22 -22
- package/dist/components/drawer.css +41 -45
- package/dist/components/drop-zone/drop-zone.styles.d.ts +13 -0
- package/dist/components/drop-zone/drop-zone.styles.d.ts.map +1 -0
- package/dist/components/drop-zone/drop-zone.styles.js +8 -0
- package/dist/components/drop-zone/index.d.ts +2 -0
- package/dist/components/drop-zone/index.d.ts.map +1 -0
- package/dist/components/drop-zone/index.js +2 -0
- package/dist/components/drop-zone.css +78 -0
- package/dist/components/dropdown/dropdown.styles.d.ts +17 -44
- package/dist/components/dropdown/dropdown.styles.d.ts.map +1 -1
- package/dist/components/dropdown/dropdown.styles.js +5 -5
- package/dist/components/dropdown.css +13 -15
- package/dist/components/empty-state/empty-state.styles.d.ts +4 -2
- package/dist/components/empty-state/empty-state.styles.d.ts.map +1 -1
- package/dist/components/empty-state/empty-state.styles.js +2 -2
- package/dist/components/empty-state.css +1 -1
- package/dist/components/error-message/error-message.styles.d.ts +4 -2
- package/dist/components/error-message/error-message.styles.d.ts.map +1 -1
- package/dist/components/error-message/error-message.styles.js +2 -2
- package/dist/components/error-message.css +1 -5
- package/dist/components/field-error/field-error.styles.d.ts +4 -2
- package/dist/components/field-error/field-error.styles.d.ts.map +1 -1
- package/dist/components/field-error/field-error.styles.js +2 -2
- package/dist/components/field-error.css +7 -11
- package/dist/components/fieldset/fieldset.styles.d.ts +20 -50
- package/dist/components/fieldset/fieldset.styles.d.ts.map +1 -1
- package/dist/components/fieldset/fieldset.styles.js +6 -6
- package/dist/components/fieldset.css +4 -4
- package/dist/components/header/header.styles.d.ts +3 -1
- package/dist/components/header/header.styles.d.ts.map +1 -1
- package/dist/components/header/header.styles.js +2 -2
- package/dist/components/header.css +1 -1
- package/dist/components/index.css +1 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/input/input.styles.d.ts +8 -44
- package/dist/components/input/input.styles.d.ts.map +1 -1
- package/dist/components/input/input.styles.js +7 -7
- package/dist/components/input-group/input-group.styles.d.ts +37 -89
- package/dist/components/input-group/input-group.styles.d.ts.map +1 -1
- package/dist/components/input-group/input-group.styles.js +10 -10
- package/dist/components/input-group.css +29 -54
- package/dist/components/input-otp/input-otp.styles.d.ts +42 -53
- package/dist/components/input-otp/input-otp.styles.d.ts.map +1 -1
- package/dist/components/input-otp/input-otp.styles.js +10 -10
- package/dist/components/input-otp.css +24 -36
- package/dist/components/input.css +17 -38
- package/dist/components/kbd/kbd.styles.d.ts +22 -29
- package/dist/components/kbd/kbd.styles.d.ts.map +1 -1
- package/dist/components/kbd/kbd.styles.js +6 -6
- package/dist/components/kbd.css +7 -5
- package/dist/components/label/label.styles.d.ts +8 -32
- package/dist/components/label/label.styles.d.ts.map +1 -1
- package/dist/components/label/label.styles.js +5 -5
- package/dist/components/label.css +16 -11
- package/dist/components/link/link.styles.d.ts +11 -32
- package/dist/components/link/link.styles.d.ts.map +1 -1
- package/dist/components/link/link.styles.js +3 -3
- package/dist/components/link.css +20 -18
- package/dist/components/list-box/list-box.styles.d.ts +7 -32
- package/dist/components/list-box/list-box.styles.d.ts.map +1 -1
- package/dist/components/list-box/list-box.styles.js +6 -6
- package/dist/components/list-box-item/list-box-item.styles.d.ts +17 -38
- package/dist/components/list-box-item/list-box-item.styles.d.ts.map +1 -1
- package/dist/components/list-box-item/list-box-item.styles.js +5 -5
- package/dist/components/list-box-item.css +13 -19
- package/dist/components/list-box-section/list-box-section.styles.d.ts +4 -2
- package/dist/components/list-box-section/list-box-section.styles.d.ts.map +1 -1
- package/dist/components/list-box-section/list-box-section.styles.js +2 -2
- package/dist/components/list-box-section.css +1 -1
- package/dist/components/list-box.css +53 -3
- package/dist/components/menu/menu.styles.d.ts +6 -20
- package/dist/components/menu/menu.styles.d.ts.map +1 -1
- package/dist/components/menu/menu.styles.js +4 -4
- package/dist/components/menu-item/menu-item.styles.d.ts +22 -41
- package/dist/components/menu-item/menu-item.styles.d.ts.map +1 -1
- package/dist/components/menu-item/menu-item.styles.js +6 -6
- package/dist/components/menu-item.css +15 -21
- package/dist/components/menu-section/menu-section.styles.d.ts +4 -2
- package/dist/components/menu-section/menu-section.styles.d.ts.map +1 -1
- package/dist/components/menu-section/menu-section.styles.js +2 -2
- package/dist/components/menu-section.css +1 -1
- package/dist/components/menu.css +4 -4
- package/dist/components/meter/meter.styles.d.ts +32 -104
- package/dist/components/meter/meter.styles.d.ts.map +1 -1
- package/dist/components/meter/meter.styles.js +13 -13
- package/dist/components/meter.css +22 -30
- package/dist/components/modal/modal.styles.d.ts +79 -167
- package/dist/components/modal/modal.styles.d.ts.map +1 -1
- package/dist/components/modal/modal.styles.js +26 -26
- package/dist/components/modal.css +30 -42
- package/dist/components/number-field/number-field.styles.d.ts +44 -95
- package/dist/components/number-field/number-field.styles.d.ts.map +1 -1
- package/dist/components/number-field/number-field.styles.js +12 -12
- package/dist/components/number-field.css +47 -59
- package/dist/components/pagination/pagination.styles.d.ts +44 -59
- package/dist/components/pagination/pagination.styles.d.ts.map +1 -1
- package/dist/components/pagination/pagination.styles.js +19 -12
- package/dist/components/pagination.css +18 -22
- package/dist/components/popover/popover.styles.d.ts +17 -44
- package/dist/components/popover/popover.styles.d.ts.map +1 -1
- package/dist/components/popover/popover.styles.js +5 -5
- package/dist/components/popover.css +4 -8
- package/dist/components/progress-bar/progress-bar.styles.d.ts +42 -104
- package/dist/components/progress-bar/progress-bar.styles.d.ts.map +1 -1
- package/dist/components/progress-bar/progress-bar.styles.js +23 -13
- package/dist/components/progress-bar.css +97 -31
- package/dist/components/progress-circle/progress-circle.styles.d.ts +32 -104
- package/dist/components/progress-circle/progress-circle.styles.d.ts.map +1 -1
- package/dist/components/progress-circle/progress-circle.styles.js +13 -13
- package/dist/components/progress-circle.css +17 -21
- package/dist/components/radio/radio.styles.d.ts +17 -44
- package/dist/components/radio/radio.styles.d.ts.map +1 -1
- package/dist/components/radio/radio.styles.js +5 -5
- package/dist/components/radio-group/radio-group.styles.d.ts +6 -17
- package/dist/components/radio-group/radio-group.styles.d.ts.map +1 -1
- package/dist/components/radio-group/radio-group.styles.js +4 -4
- package/dist/components/radio-group.css +8 -8
- package/dist/components/radio.css +46 -48
- package/dist/components/range-calendar/range-calendar.styles.d.ts +44 -77
- package/dist/components/range-calendar/range-calendar.styles.d.ts.map +1 -1
- package/dist/components/range-calendar/range-calendar.styles.js +15 -13
- package/dist/components/range-calendar.css +111 -69
- package/dist/components/scroll-shadow/scroll-shadow.styles.d.ts +16 -68
- package/dist/components/scroll-shadow/scroll-shadow.styles.d.ts.map +1 -1
- package/dist/components/scroll-shadow/scroll-shadow.styles.js +6 -6
- package/dist/components/scroll-shadow.css +6 -6
- package/dist/components/search-field/search-field.styles.d.ts +44 -95
- package/dist/components/search-field/search-field.styles.d.ts.map +1 -1
- package/dist/components/search-field/search-field.styles.js +12 -12
- package/dist/components/search-field.css +29 -46
- package/dist/components/segmented-control/segmented-control.styles.d.ts +32 -71
- package/dist/components/segmented-control/segmented-control.styles.d.ts.map +1 -1
- package/dist/components/segmented-control/segmented-control.styles.js +9 -9
- package/dist/components/segmented-control.css +26 -31
- package/dist/components/select/select.styles.d.ts +44 -101
- package/dist/components/select/select.styles.d.ts.map +1 -1
- package/dist/components/select/select.styles.js +14 -14
- package/dist/components/select.css +33 -47
- package/dist/components/separator/separator.styles.d.ts +7 -32
- package/dist/components/separator/separator.styles.d.ts.map +1 -1
- package/dist/components/separator/separator.styles.js +7 -7
- package/dist/components/separator.css +13 -13
- package/dist/components/sidebar/sidebar.styles.d.ts +222 -188
- package/dist/components/sidebar/sidebar.styles.d.ts.map +1 -1
- package/dist/components/sidebar/sidebar.styles.js +45 -32
- package/dist/components/sidebar.css +180 -80
- package/dist/components/skeleton/skeleton.styles.d.ts +12 -26
- package/dist/components/skeleton/skeleton.styles.d.ts.map +1 -1
- package/dist/components/skeleton/skeleton.styles.js +5 -5
- package/dist/components/skeleton.css +6 -6
- package/dist/components/slider/slider.styles.d.ts +23 -56
- package/dist/components/slider/slider.styles.d.ts.map +1 -1
- package/dist/components/slider/slider.styles.js +7 -7
- package/dist/components/slider.css +24 -25
- package/dist/components/spinner/spinner.styles.d.ts +7 -44
- package/dist/components/spinner/spinner.styles.d.ts.map +1 -1
- package/dist/components/spinner/spinner.styles.js +11 -11
- package/dist/components/spinner.css +10 -10
- package/dist/components/splitter/splitter.styles.d.ts +32 -59
- package/dist/components/splitter/splitter.styles.d.ts.map +1 -1
- package/dist/components/splitter/splitter.styles.js +12 -12
- package/dist/components/splitter.css +64 -56
- package/dist/components/surface/surface.styles.d.ts +6 -23
- package/dist/components/surface/surface.styles.d.ts.map +1 -1
- package/dist/components/surface/surface.styles.js +6 -6
- package/dist/components/surface.css +5 -5
- package/dist/components/switch/switch.styles.d.ts +32 -56
- package/dist/components/switch/switch.styles.d.ts.map +1 -1
- package/dist/components/switch/switch.styles.js +9 -9
- package/dist/components/switch-group/switch-group.styles.d.ts +17 -38
- package/dist/components/switch-group/switch-group.styles.d.ts.map +1 -1
- package/dist/components/switch-group/switch-group.styles.js +5 -5
- package/dist/components/switch-group.css +4 -4
- package/dist/components/switch.css +68 -67
- package/dist/components/table/table.styles.d.ts +87 -77
- package/dist/components/table/table.styles.d.ts.map +1 -1
- package/dist/components/table/table.styles.js +20 -18
- package/dist/components/table.css +177 -86
- package/dist/components/tabs/tabs.styles.d.ts +57 -56
- package/dist/components/tabs/tabs.styles.d.ts.map +1 -1
- package/dist/components/tabs/tabs.styles.js +12 -12
- package/dist/components/tabs.css +41 -52
- package/dist/components/tag/tag.styles.d.ts +20 -71
- package/dist/components/tag/tag.styles.d.ts.map +1 -1
- package/dist/components/tag/tag.styles.js +8 -8
- package/dist/components/tag-group/tag-group.styles.d.ts +11 -32
- package/dist/components/tag-group/tag-group.styles.d.ts.map +1 -1
- package/dist/components/tag-group/tag-group.styles.js +3 -3
- package/dist/components/tag-group.css +6 -6
- package/dist/components/tag.css +43 -35
- package/dist/components/textarea/textarea.styles.d.ts +8 -44
- package/dist/components/textarea/textarea.styles.d.ts.map +1 -1
- package/dist/components/textarea/textarea.styles.js +7 -7
- package/dist/components/textarea.css +17 -38
- package/dist/components/textfield/textfield.styles.d.ts +6 -17
- package/dist/components/textfield/textfield.styles.d.ts.map +1 -1
- package/dist/components/textfield/textfield.styles.js +3 -3
- package/dist/components/textfield.css +2 -2
- package/dist/components/time-field/time-field.styles.d.ts +6 -17
- package/dist/components/time-field/time-field.styles.d.ts.map +1 -1
- package/dist/components/time-field/time-field.styles.js +3 -3
- package/dist/components/time-field.css +2 -2
- package/dist/components/toast/toast.styles.d.ts +56 -161
- package/dist/components/toast/toast.styles.d.ts.map +1 -1
- package/dist/components/toast/toast.styles.js +26 -26
- package/dist/components/toast.css +58 -56
- package/dist/components/toggle-button/toggle-button.styles.d.ts +8 -41
- package/dist/components/toggle-button/toggle-button.styles.d.ts.map +1 -1
- package/dist/components/toggle-button/toggle-button.styles.js +8 -8
- package/dist/components/toggle-button-group/toggle-button-group.styles.d.ts +23 -74
- package/dist/components/toggle-button-group/toggle-button-group.styles.d.ts.map +1 -1
- package/dist/components/toggle-button-group/toggle-button-group.styles.js +7 -7
- package/dist/components/toggle-button-group.css +22 -26
- package/dist/components/toggle-button.css +11 -15
- package/dist/components/toolbar/toolbar.styles.d.ts +7 -26
- package/dist/components/toolbar/toolbar.styles.d.ts.map +1 -1
- package/dist/components/toolbar/toolbar.styles.js +5 -5
- package/dist/components/toolbar.css +7 -7
- package/dist/components/tooltip/tooltip.styles.d.ts +11 -32
- package/dist/components/tooltip/tooltip.styles.d.ts.map +1 -1
- package/dist/components/tooltip/tooltip.styles.js +3 -3
- package/dist/components/tooltip.css +2 -6
- package/dist/components/typography/typography.styles.d.ts +29 -107
- package/dist/components/typography/typography.styles.d.ts.map +1 -1
- package/dist/components/typography/typography.styles.js +24 -24
- package/dist/components/typography.css +53 -45
- package/dist/components/virtualizer/virtualizer.styles.d.ts +13 -37
- package/dist/components/virtualizer/virtualizer.styles.d.ts.map +1 -1
- package/dist/components/virtualizer/virtualizer.styles.js +4 -4
- package/dist/components/virtualizer.css +14 -6
- package/dist/core.css +26 -0
- package/dist/index.css +8 -24
- package/dist/index.d.ts +2 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +3 -2
- package/dist/no-preflight.css +8 -0
- package/dist/ropav.min.css +1 -1
- package/dist/themes/airbnb.css +6 -4
- package/dist/themes/coinbase.css +6 -4
- package/dist/themes/default.css +24 -4
- package/dist/themes/discord.css +6 -4
- package/dist/themes/hero.css +24 -4
- package/dist/themes/lavender.css +6 -4
- package/dist/themes/mint.css +6 -4
- package/dist/themes/netflix.css +6 -4
- package/dist/themes/rabbit.css +6 -4
- package/dist/themes/shared/theme.css +1 -0
- package/dist/themes/sky.css +6 -4
- package/dist/themes/spotify.css +6 -4
- package/dist/themes/uber.css +6 -4
- package/dist/themes.d.ts +12 -0
- package/dist/themes.d.ts.map +1 -0
- package/dist/themes.js +39 -0
- package/dist/tv.d.ts +34 -0
- package/dist/tv.d.ts.map +1 -0
- package/dist/tv.js +21 -0
- package/package.json +5 -3
- package/src/components/accordion/accordion.styles.ts +11 -11
- package/src/components/alert/alert.styles.ts +12 -12
- package/src/components/alert-dialog/alert-dialog.styles.ts +25 -25
- package/src/components/autocomplete/autocomplete.styles.ts +17 -17
- package/src/components/avatar/avatar.styles.ts +14 -14
- package/src/components/badge/badge.styles.ts +20 -20
- package/src/components/breadcrumbs/breadcrumbs.styles.ts +6 -6
- package/src/components/button/button.styles.ts +15 -15
- package/src/components/button-group/button-group.styles.ts +7 -7
- package/src/components/calendar/calendar.styles.ts +14 -14
- package/src/components/calendar-year-picker/calendar-year-picker.styles.ts +7 -7
- package/src/components/card/card.styles.ts +12 -12
- package/src/components/checkbox/checkbox.styles.ts +8 -8
- package/src/components/checkbox-group/checkbox-group.styles.ts +5 -5
- package/src/components/chip/chip.styles.ts +16 -16
- package/src/components/close-button/close-button.styles.ts +4 -4
- package/src/components/color-area/color-area.styles.ts +5 -5
- package/src/components/color-field/color-field.styles.ts +4 -4
- package/src/components/color-input-group/color-input-group.styles.ts +11 -11
- package/src/components/color-picker/color-picker.styles.ts +5 -5
- package/src/components/color-slider/color-slider.styles.ts +6 -6
- package/src/components/color-swatch/color-swatch.styles.ts +10 -10
- package/src/components/color-swatch-picker/color-swatch-picker.styles.ts +15 -15
- package/src/components/combo-box/combo-box.styles.ts +11 -11
- package/src/components/date-field/date-field.styles.ts +4 -4
- package/src/components/date-input-group/date-input-group.styles.ts +13 -13
- package/src/components/date-picker/date-picker.styles.ts +6 -6
- package/src/components/date-range-picker/date-range-picker.styles.ts +7 -7
- package/src/components/description/description.styles.ts +3 -3
- package/src/components/disclosure/disclosure.styles.ts +9 -9
- package/src/components/disclosure-group/disclosure-group.styles.ts +3 -3
- package/src/components/drawer/drawer.styles.ts +23 -23
- package/src/components/drop-zone/drop-zone.styles.ts +12 -0
- package/src/components/drop-zone/index.ts +1 -0
- package/src/components/dropdown/dropdown.styles.ts +6 -6
- package/src/components/empty-state/empty-state.styles.ts +3 -3
- package/src/components/error-message/error-message.styles.ts +3 -3
- package/src/components/field-error/field-error.styles.ts +3 -3
- package/src/components/fieldset/fieldset.styles.ts +7 -7
- package/src/components/header/header.styles.ts +2 -2
- package/src/components/index.ts +1 -0
- package/src/components/input/input.styles.ts +8 -8
- package/src/components/input-group/input-group.styles.ts +11 -11
- package/src/components/input-otp/input-otp.styles.ts +11 -11
- package/src/components/kbd/kbd.styles.ts +7 -7
- package/src/components/label/label.styles.ts +6 -6
- package/src/components/link/link.styles.ts +4 -4
- package/src/components/list-box/list-box.styles.ts +7 -7
- package/src/components/list-box-item/list-box-item.styles.ts +6 -6
- package/src/components/list-box-section/list-box-section.styles.ts +3 -3
- package/src/components/menu/menu.styles.ts +5 -5
- package/src/components/menu-item/menu-item.styles.ts +7 -7
- package/src/components/menu-section/menu-section.styles.ts +3 -3
- package/src/components/meter/meter.styles.ts +14 -14
- package/src/components/modal/modal.styles.ts +27 -27
- package/src/components/number-field/number-field.styles.ts +13 -13
- package/src/components/pagination/pagination.styles.ts +18 -11
- package/src/components/popover/popover.styles.ts +6 -6
- package/src/components/progress-bar/progress-bar.styles.ts +28 -14
- package/src/components/progress-circle/progress-circle.styles.ts +14 -14
- package/src/components/radio/radio.styles.ts +6 -6
- package/src/components/radio-group/radio-group.styles.ts +5 -5
- package/src/components/range-calendar/range-calendar.styles.ts +16 -14
- package/src/components/scroll-shadow/scroll-shadow.styles.ts +7 -7
- package/src/components/search-field/search-field.styles.ts +13 -13
- package/src/components/segmented-control/segmented-control.styles.ts +10 -10
- package/src/components/select/select.styles.ts +15 -15
- package/src/components/separator/separator.styles.ts +8 -8
- package/src/components/sidebar/sidebar.styles.ts +55 -32
- package/src/components/skeleton/skeleton.styles.ts +6 -6
- package/src/components/slider/slider.styles.ts +8 -8
- package/src/components/spinner/spinner.styles.ts +12 -12
- package/src/components/splitter/splitter.styles.ts +13 -13
- package/src/components/surface/surface.styles.ts +7 -7
- package/src/components/switch/switch.styles.ts +10 -10
- package/src/components/switch-group/switch-group.styles.ts +6 -6
- package/src/components/table/table.styles.ts +21 -19
- package/src/components/tabs/tabs.styles.ts +13 -13
- package/src/components/tag/tag.styles.ts +9 -9
- package/src/components/tag-group/tag-group.styles.ts +4 -4
- package/src/components/textarea/textarea.styles.ts +8 -8
- package/src/components/textfield/textfield.styles.ts +4 -4
- package/src/components/time-field/time-field.styles.ts +4 -4
- package/src/components/toast/toast.styles.ts +27 -27
- package/src/components/toggle-button/toggle-button.styles.ts +9 -9
- package/src/components/toggle-button-group/toggle-button-group.styles.ts +8 -8
- package/src/components/toolbar/toolbar.styles.ts +6 -6
- package/src/components/tooltip/tooltip.styles.ts +4 -4
- package/src/components/typography/typography.styles.ts +25 -25
- package/src/components/virtualizer/virtualizer.styles.ts +4 -4
- package/src/index.ts +5 -2
- package/src/themes.ts +40 -0
- package/src/tv.ts +82 -0
|
@@ -3,19 +3,19 @@
|
|
|
3
3
|
========================================================================== */
|
|
4
4
|
|
|
5
5
|
/* Base styles */
|
|
6
|
-
.progress-circle {
|
|
6
|
+
.rp-progress-circle {
|
|
7
7
|
@apply inline-flex items-center justify-center;
|
|
8
8
|
|
|
9
9
|
/* Default color token (accent) */
|
|
10
10
|
--progress-circle-stroke: var(--accent);
|
|
11
11
|
--progress-circle-track-stroke: var(--default);
|
|
12
12
|
|
|
13
|
-
.progress-circle__track {
|
|
13
|
+
.rp-progress-circle__track {
|
|
14
14
|
/* Default size (matches --md) */
|
|
15
15
|
@apply size-7;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
.progress-circle__track-circle {
|
|
18
|
+
.rp-progress-circle__track-circle {
|
|
19
19
|
stroke: var(--progress-circle-track-stroke);
|
|
20
20
|
|
|
21
21
|
/* Forced colors leaves SVG strokes alone, so the ring renders but in the library's own
|
|
@@ -27,25 +27,21 @@
|
|
|
27
27
|
}
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
-
.progress-circle__fill-circle {
|
|
30
|
+
.rp-progress-circle__fill-circle {
|
|
31
31
|
stroke: var(--progress-circle-stroke);
|
|
32
32
|
|
|
33
33
|
@media (forced-colors: active) {
|
|
34
34
|
stroke: Highlight;
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
-
/**
|
|
38
|
-
* Transitions
|
|
39
|
-
* CRITICAL: motion-reduce must be AFTER transition for correct override specificity
|
|
40
|
-
*/
|
|
41
37
|
transition: stroke-dashoffset 300ms var(--ease-out);
|
|
42
38
|
@apply motion-reduce:transition-none;
|
|
43
39
|
}
|
|
44
40
|
|
|
45
41
|
/* Indeterminate state - when no aria-valuenow is set */
|
|
46
42
|
&:not([aria-valuenow]) {
|
|
47
|
-
.progress-circle__track {
|
|
48
|
-
animation: progress-circle-spin 1s linear infinite;
|
|
43
|
+
.rp-progress-circle__track {
|
|
44
|
+
animation: rp-progress-circle-spin 1s linear infinite;
|
|
49
45
|
|
|
50
46
|
@apply motion-reduce:animate-none;
|
|
51
47
|
}
|
|
@@ -63,7 +59,7 @@
|
|
|
63
59
|
Indeterminate animation
|
|
64
60
|
========================================================================== */
|
|
65
61
|
|
|
66
|
-
@keyframes progress-circle-spin {
|
|
62
|
+
@keyframes rp-progress-circle-spin {
|
|
67
63
|
from {
|
|
68
64
|
transform: rotate(0deg);
|
|
69
65
|
}
|
|
@@ -76,18 +72,18 @@
|
|
|
76
72
|
Size variants
|
|
77
73
|
========================================================================== */
|
|
78
74
|
|
|
79
|
-
.progress-circle--sm {
|
|
80
|
-
.progress-circle__track {
|
|
75
|
+
.rp-progress-circle--sm {
|
|
76
|
+
.rp-progress-circle__track {
|
|
81
77
|
@apply size-5;
|
|
82
78
|
}
|
|
83
79
|
}
|
|
84
80
|
|
|
85
|
-
.progress-circle--md {
|
|
81
|
+
.rp-progress-circle--md {
|
|
86
82
|
/* No styles as this is the default size */
|
|
87
83
|
}
|
|
88
84
|
|
|
89
|
-
.progress-circle--lg {
|
|
90
|
-
.progress-circle__track {
|
|
85
|
+
.rp-progress-circle--lg {
|
|
86
|
+
.rp-progress-circle__track {
|
|
91
87
|
@apply size-9;
|
|
92
88
|
}
|
|
93
89
|
}
|
|
@@ -96,22 +92,22 @@
|
|
|
96
92
|
Color variants
|
|
97
93
|
========================================================================== */
|
|
98
94
|
|
|
99
|
-
.progress-circle--default {
|
|
95
|
+
.rp-progress-circle--default {
|
|
100
96
|
--progress-circle-stroke: var(--default-foreground);
|
|
101
97
|
}
|
|
102
98
|
|
|
103
|
-
.progress-circle--accent {
|
|
99
|
+
.rp-progress-circle--accent {
|
|
104
100
|
--progress-circle-stroke: var(--accent);
|
|
105
101
|
}
|
|
106
102
|
|
|
107
|
-
.progress-circle--success {
|
|
103
|
+
.rp-progress-circle--success {
|
|
108
104
|
--progress-circle-stroke: var(--success);
|
|
109
105
|
}
|
|
110
106
|
|
|
111
|
-
.progress-circle--warning {
|
|
107
|
+
.rp-progress-circle--warning {
|
|
112
108
|
--progress-circle-stroke: var(--warning);
|
|
113
109
|
}
|
|
114
110
|
|
|
115
|
-
.progress-circle--danger {
|
|
111
|
+
.rp-progress-circle--danger {
|
|
116
112
|
--progress-circle-stroke: var(--danger);
|
|
117
113
|
}
|
|
@@ -1,46 +1,19 @@
|
|
|
1
|
-
import type { VariantProps } from "
|
|
2
|
-
export declare const radioVariants:
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
};
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
} | import("tailwind-variants").ClassValue;
|
|
19
|
-
};
|
|
20
|
-
} | {}, {
|
|
21
|
-
base: string;
|
|
22
|
-
content: string;
|
|
23
|
-
control: string;
|
|
24
|
-
indicator: string;
|
|
25
|
-
}, undefined, {
|
|
26
|
-
[key: string]: {
|
|
27
|
-
[key: string]: {
|
|
28
|
-
base?: import("tailwind-variants").ClassValue;
|
|
29
|
-
content?: import("tailwind-variants").ClassValue;
|
|
30
|
-
control?: import("tailwind-variants").ClassValue;
|
|
31
|
-
indicator?: import("tailwind-variants").ClassValue;
|
|
32
|
-
} | import("tailwind-variants").ClassValue;
|
|
33
|
-
};
|
|
34
|
-
} | {}, {
|
|
35
|
-
base: string;
|
|
36
|
-
content: string;
|
|
37
|
-
control: string;
|
|
38
|
-
indicator: string;
|
|
39
|
-
}, import("tailwind-variants").TVReturnTypeLike<unknown, {
|
|
40
|
-
base: string;
|
|
41
|
-
content: string;
|
|
42
|
-
control: string;
|
|
43
|
-
indicator: string;
|
|
44
|
-
}>>;
|
|
1
|
+
import type { VariantProps } from "../../tv";
|
|
2
|
+
export declare const radioVariants: (props?: ({
|
|
3
|
+
class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
|
|
4
|
+
} & object) | undefined) => {
|
|
5
|
+
base: (props?: ({
|
|
6
|
+
class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
|
|
7
|
+
} & object) | undefined) => string;
|
|
8
|
+
content: (props?: ({
|
|
9
|
+
class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
|
|
10
|
+
} & object) | undefined) => string;
|
|
11
|
+
control: (props?: ({
|
|
12
|
+
class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
|
|
13
|
+
} & object) | undefined) => string;
|
|
14
|
+
indicator: (props?: ({
|
|
15
|
+
class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
|
|
16
|
+
} & object) | undefined) => string;
|
|
17
|
+
};
|
|
45
18
|
export type RadioVariants = VariantProps<typeof radioVariants>;
|
|
46
19
|
//# sourceMappingURL=radio.styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio.styles.d.ts","sourceRoot":"","sources":["../../../src/components/radio/radio.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"radio.styles.d.ts","sourceRoot":"","sources":["../../../src/components/radio/radio.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;CAOxB,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { tv } from "
|
|
1
|
+
import { tv } from "../../tv.js";
|
|
2
2
|
//#region src/components/radio/radio.styles.ts
|
|
3
3
|
const radioVariants = tv({ slots: {
|
|
4
|
-
base: "radio",
|
|
5
|
-
content: "radio__content",
|
|
6
|
-
control: "radio__control",
|
|
7
|
-
indicator: "radio__indicator"
|
|
4
|
+
base: "rp-radio",
|
|
5
|
+
content: "rp-radio__content",
|
|
6
|
+
control: "rp-radio__control",
|
|
7
|
+
indicator: "rp-radio__indicator"
|
|
8
8
|
} });
|
|
9
9
|
//#endregion
|
|
10
10
|
export { radioVariants };
|
|
@@ -1,19 +1,8 @@
|
|
|
1
|
-
import type { VariantProps } from "
|
|
2
|
-
export declare const radioGroupVariants:
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
}, undefined, "radio-group", {
|
|
8
|
-
variant: {
|
|
9
|
-
primary: "radio-group--primary";
|
|
10
|
-
secondary: "radio-group--secondary";
|
|
11
|
-
};
|
|
12
|
-
}, undefined, import("tailwind-variants").TVReturnTypeLike<{
|
|
13
|
-
variant: {
|
|
14
|
-
primary: "radio-group--primary";
|
|
15
|
-
secondary: "radio-group--secondary";
|
|
16
|
-
};
|
|
17
|
-
}, undefined>>;
|
|
1
|
+
import type { VariantProps } from "../../tv";
|
|
2
|
+
export declare const radioGroupVariants: (props?: ({
|
|
3
|
+
class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
|
|
4
|
+
} & {
|
|
5
|
+
variant?: "primary" | "secondary" | undefined;
|
|
6
|
+
}) | undefined) => string;
|
|
18
7
|
export type RadioGroupVariants = VariantProps<typeof radioGroupVariants>;
|
|
19
8
|
//# sourceMappingURL=radio-group.styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-group.styles.d.ts","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"radio-group.styles.d.ts","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,eAAO,MAAM,kBAAkB;;;;yBAW7B,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { tv } from "
|
|
1
|
+
import { tv } from "../../tv.js";
|
|
2
2
|
//#region src/components/radio-group/radio-group.styles.ts
|
|
3
3
|
const radioGroupVariants = tv({
|
|
4
|
-
base: "radio-group",
|
|
4
|
+
base: "rp-radio-group",
|
|
5
5
|
defaultVariants: { variant: "primary" },
|
|
6
6
|
variants: { variant: {
|
|
7
|
-
primary: "radio-group--primary",
|
|
8
|
-
secondary: "radio-group--secondary"
|
|
7
|
+
primary: "rp-radio-group--primary",
|
|
8
|
+
secondary: "rp-radio-group--secondary"
|
|
9
9
|
} }
|
|
10
10
|
});
|
|
11
11
|
//#endregion
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/* Radio Group base styles */
|
|
2
|
-
.radio-group {
|
|
2
|
+
.rp-radio-group {
|
|
3
3
|
@apply flex flex-col;
|
|
4
4
|
|
|
5
5
|
/* Default orientation */
|
|
@@ -15,11 +15,11 @@
|
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
/* Variant property definitions */
|
|
18
|
-
.radio-group--primary {
|
|
18
|
+
.rp-radio-group--primary {
|
|
19
19
|
/* Default styles */
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
-
.radio-group--secondary .radio__control {
|
|
22
|
+
.rp-radio-group--secondary .rp-radio__control {
|
|
23
23
|
@apply shadow-none;
|
|
24
24
|
background-color: var(--radio-control-bg);
|
|
25
25
|
|
|
@@ -27,22 +27,22 @@
|
|
|
27
27
|
--radio-control-bg-hover: var(--default-hover);
|
|
28
28
|
|
|
29
29
|
/* Hover state */
|
|
30
|
-
.radio:has([data-slot="radio-content"][data-hovered="true"]) &,
|
|
31
|
-
.radio [data-slot="radio-content"][data-hovered="true"] & {
|
|
30
|
+
.rp-radio:has([data-slot="radio-content"][data-hovered="true"]) &,
|
|
31
|
+
.rp-radio [data-slot="radio-content"][data-hovered="true"] & {
|
|
32
32
|
@apply border-field-border-hover;
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
/* Default indicator color (unselected) */
|
|
36
|
-
.radio:not([data-selected]):not(:has(input:checked)) & .radio__indicator:empty::before {
|
|
36
|
+
.rp-radio:not([data-selected]):not(:has(input:checked)) & .rp-radio__indicator:empty::before {
|
|
37
37
|
background-color: var(--radio-control-bg);
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
/* Hover indicator color (unselected) */
|
|
41
|
-
.radio:has([data-slot="radio-content"][data-hovered="true"]):not([data-selected]):not(
|
|
41
|
+
.rp-radio:has([data-slot="radio-content"][data-hovered="true"]):not([data-selected]):not(
|
|
42
42
|
:has(input:checked)
|
|
43
43
|
)
|
|
44
44
|
& {
|
|
45
|
-
.radio__indicator:empty::before {
|
|
45
|
+
.rp-radio__indicator:empty::before {
|
|
46
46
|
background-color: var(--radio-control-bg-hover);
|
|
47
47
|
}
|
|
48
48
|
}
|
|
@@ -2,15 +2,15 @@
|
|
|
2
2
|
Base radio styles
|
|
3
3
|
|
|
4
4
|
Structure (explicit composition):
|
|
5
|
-
.radio → RadioField wrapper (column)
|
|
6
|
-
.radio__content → RadioButton: the clickable row (control + label)
|
|
7
|
-
.radio__control
|
|
5
|
+
.rp-radio → RadioField wrapper (column)
|
|
6
|
+
.rp-radio__content → RadioButton: the clickable row (control + label)
|
|
7
|
+
.rp-radio__control
|
|
8
8
|
[data-slot="label"]
|
|
9
9
|
[data-slot="description"] → field-level sibling, below the row
|
|
10
10
|
[data-slot="field-error"]
|
|
11
11
|
========================================================================== */
|
|
12
12
|
|
|
13
|
-
.radio {
|
|
13
|
+
.rp-radio {
|
|
14
14
|
@apply flex flex-col items-start gap-1 outline-none no-highlight;
|
|
15
15
|
|
|
16
16
|
cursor: var(--cursor-interactive);
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
@apply select-none;
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
-
.radio__content [data-slot="label"] {
|
|
22
|
+
.rp-radio__content [data-slot="label"] {
|
|
23
23
|
cursor: var(--cursor-interactive);
|
|
24
24
|
}
|
|
25
25
|
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
/* Radio content — the clickable label (control + label text) */
|
|
46
|
-
.radio__content {
|
|
46
|
+
.rp-radio__content {
|
|
47
47
|
@apply relative inline-flex cursor-[inherit] items-center gap-3 text-sm font-medium text-foreground outline-none select-none no-highlight;
|
|
48
48
|
}
|
|
49
49
|
|
|
@@ -51,13 +51,9 @@
|
|
|
51
51
|
Radio control (the circular button)
|
|
52
52
|
========================================================================== */
|
|
53
53
|
|
|
54
|
-
.radio__control {
|
|
54
|
+
.rp-radio__control {
|
|
55
55
|
@apply relative inline-flex size-4 shrink-0 items-center justify-center rounded-lg border [border-width:var(--border-width-field)] border-field-border bg-field shadow-field outline-none no-highlight;
|
|
56
56
|
|
|
57
|
-
/**
|
|
58
|
-
* Transitions
|
|
59
|
-
* CRITICAL: motion-reduce must be AFTER transition for correct override specificity
|
|
60
|
-
*/
|
|
61
57
|
transition:
|
|
62
58
|
background-color 200ms var(--ease-out),
|
|
63
59
|
border-color 200ms var(--ease-out),
|
|
@@ -68,60 +64,60 @@
|
|
|
68
64
|
|
|
69
65
|
/* Interactive states */
|
|
70
66
|
/* Focus */
|
|
71
|
-
.radio:has([data-slot="radio-content"][data-focus-visible="true"]) &,
|
|
72
|
-
.radio [data-slot="radio-content"][data-focus-visible="true"] & {
|
|
67
|
+
.rp-radio:has([data-slot="radio-content"][data-focus-visible="true"]) &,
|
|
68
|
+
.rp-radio [data-slot="radio-content"][data-focus-visible="true"] & {
|
|
73
69
|
@apply status-focused;
|
|
74
70
|
}
|
|
75
71
|
|
|
76
72
|
/* Hover */
|
|
77
|
-
.radio:has([data-slot="radio-content"][data-hovered="true"]) &,
|
|
78
|
-
.radio [data-slot="radio-content"][data-hovered="true"] & {
|
|
73
|
+
.rp-radio:has([data-slot="radio-content"][data-hovered="true"]) &,
|
|
74
|
+
.rp-radio [data-slot="radio-content"][data-hovered="true"] & {
|
|
79
75
|
@apply border-field-border-hover;
|
|
80
76
|
}
|
|
81
77
|
|
|
82
78
|
/* Hover - only when not selected */
|
|
83
|
-
.radio:has([data-slot="radio-content"][data-hovered="true"]):not([data-selected]):not(
|
|
79
|
+
.rp-radio:has([data-slot="radio-content"][data-hovered="true"]):not([data-selected]):not(
|
|
84
80
|
:has(input:checked)
|
|
85
81
|
)
|
|
86
82
|
& {
|
|
87
|
-
.radio__indicator:empty::before {
|
|
83
|
+
.rp-radio__indicator:empty::before {
|
|
88
84
|
@apply bg-field-hover;
|
|
89
85
|
}
|
|
90
86
|
}
|
|
91
87
|
|
|
92
88
|
/* Pressed */
|
|
93
|
-
.radio:has([data-slot="radio-content"][data-pressed="true"]) &,
|
|
94
|
-
.radio [data-slot="radio-content"][data-pressed="true"] & {
|
|
89
|
+
.rp-radio:has([data-slot="radio-content"][data-pressed="true"]) &,
|
|
90
|
+
.rp-radio [data-slot="radio-content"][data-pressed="true"] & {
|
|
95
91
|
@apply scale-95;
|
|
96
92
|
}
|
|
97
93
|
|
|
98
94
|
/* Selection states */
|
|
99
95
|
/* Selected */
|
|
100
|
-
.radio[data-selected] &,
|
|
101
|
-
.radio:has([data-slot="radio-content"][aria-checked="true"]) &,
|
|
102
|
-
.radio:has(input:checked) & {
|
|
96
|
+
.rp-radio[data-selected] &,
|
|
97
|
+
.rp-radio:has([data-slot="radio-content"][aria-checked="true"]) &,
|
|
98
|
+
.rp-radio:has(input:checked) & {
|
|
103
99
|
@apply border-transparent bg-accent;
|
|
104
100
|
}
|
|
105
101
|
|
|
106
102
|
/* Selected + Pressed */
|
|
107
|
-
.radio[data-selected]:has([data-slot="radio-content"][data-pressed="true"]) &,
|
|
108
|
-
.radio:has([data-slot="radio-content"][data-pressed="true"][aria-checked="true"]) &,
|
|
109
|
-
.radio:has(input:checked):has([data-slot="radio-content"][data-pressed="true"]) & {
|
|
103
|
+
.rp-radio[data-selected]:has([data-slot="radio-content"][data-pressed="true"]) &,
|
|
104
|
+
.rp-radio:has([data-slot="radio-content"][data-pressed="true"][aria-checked="true"]) &,
|
|
105
|
+
.rp-radio:has(input:checked):has([data-slot="radio-content"][data-pressed="true"]) & {
|
|
110
106
|
@apply bg-accent-hover;
|
|
111
107
|
}
|
|
112
108
|
|
|
113
109
|
/* Validation states */
|
|
114
110
|
/* Invalid */
|
|
115
|
-
.radio[data-invalid="true"] &,
|
|
116
|
-
.radio[aria-invalid="true"] & {
|
|
111
|
+
.rp-radio[data-invalid="true"] &,
|
|
112
|
+
.rp-radio[aria-invalid="true"] & {
|
|
117
113
|
@apply status-invalid-field;
|
|
118
114
|
}
|
|
119
115
|
|
|
120
116
|
/* Invalid + Selected */
|
|
121
|
-
.radio[data-invalid="true"][data-selected] &,
|
|
122
|
-
.radio[aria-invalid="true"][data-selected] &,
|
|
123
|
-
.radio[data-invalid="true"]:has(input:checked) &,
|
|
124
|
-
.radio[aria-invalid="true"]:has(input:checked) & {
|
|
117
|
+
.rp-radio[data-invalid="true"][data-selected] &,
|
|
118
|
+
.rp-radio[aria-invalid="true"][data-selected] &,
|
|
119
|
+
.rp-radio[data-invalid="true"]:has(input:checked) &,
|
|
120
|
+
.rp-radio[aria-invalid="true"]:has(input:checked) & {
|
|
125
121
|
@apply status-invalid-field;
|
|
126
122
|
}
|
|
127
123
|
}
|
|
@@ -130,15 +126,22 @@
|
|
|
130
126
|
Radio indicator (the inner dot)
|
|
131
127
|
========================================================================== */
|
|
132
128
|
|
|
133
|
-
.radio__indicator {
|
|
129
|
+
.rp-radio__indicator {
|
|
134
130
|
@apply absolute inset-0 flex items-center justify-center;
|
|
135
131
|
|
|
136
132
|
pointer-events: none;
|
|
133
|
+
|
|
134
|
+
/* On the indicator, not in `:empty::before` where the transition lives: the variant reaches a
|
|
135
|
+
* pseudo-element from its originating element, and appending its condition after `::before`
|
|
136
|
+
* matches nothing. `:empty` because without it this ties with that rule and loses on order. */
|
|
137
|
+
&:empty {
|
|
138
|
+
@apply motion-reduce:transition-none;
|
|
139
|
+
}
|
|
137
140
|
}
|
|
138
141
|
|
|
139
142
|
/* :empty pseudo-class ensures these styles only apply when the indicator has no custom children
|
|
140
143
|
(e.g., custom icon). When custom content is present, these default dot styles are not applied. */
|
|
141
|
-
.radio__indicator:empty::before {
|
|
144
|
+
.rp-radio__indicator:empty::before {
|
|
142
145
|
content: "";
|
|
143
146
|
@apply rounded-lg bg-field;
|
|
144
147
|
|
|
@@ -146,20 +149,15 @@
|
|
|
146
149
|
height: 100%;
|
|
147
150
|
scale: 1;
|
|
148
151
|
|
|
149
|
-
/**
|
|
150
|
-
* Transitions
|
|
151
|
-
* CRITICAL: motion-reduce must be AFTER transition for correct override specificity
|
|
152
|
-
*/
|
|
153
152
|
transition:
|
|
154
153
|
scale 200ms var(--ease-out),
|
|
155
154
|
background-color 200ms var(--ease-out);
|
|
156
|
-
@apply motion-reduce:transition-none;
|
|
157
155
|
}
|
|
158
156
|
|
|
159
157
|
/* Selected state */
|
|
160
|
-
.radio[data-selected] .radio__indicator:empty::before,
|
|
161
|
-
.radio:has([data-slot="radio-content"][aria-checked="true"]) .radio__indicator:empty::before,
|
|
162
|
-
.radio:has(input:checked) .radio__indicator:empty::before {
|
|
158
|
+
.rp-radio[data-selected] .rp-radio__indicator:empty::before,
|
|
159
|
+
.rp-radio:has([data-slot="radio-content"][aria-checked="true"]) .rp-radio__indicator:empty::before,
|
|
160
|
+
.rp-radio:has(input:checked) .rp-radio__indicator:empty::before {
|
|
163
161
|
@apply bg-accent-foreground;
|
|
164
162
|
scale: 0.4286; /* 6px */
|
|
165
163
|
|
|
@@ -172,12 +170,12 @@
|
|
|
172
170
|
}
|
|
173
171
|
|
|
174
172
|
/* Selected + Pressed state */
|
|
175
|
-
.radio[data-selected]:has([data-slot="radio-content"][data-pressed="true"])
|
|
176
|
-
.radio__indicator:empty::before,
|
|
177
|
-
.radio:has([data-slot="radio-content"][data-pressed="true"][aria-checked="true"])
|
|
178
|
-
.radio__indicator:empty::before,
|
|
179
|
-
.radio:has(input:checked):has([data-slot="radio-content"][data-pressed="true"])
|
|
180
|
-
.radio__indicator:empty::before {
|
|
173
|
+
.rp-radio[data-selected]:has([data-slot="radio-content"][data-pressed="true"])
|
|
174
|
+
.rp-radio__indicator:empty::before,
|
|
175
|
+
.rp-radio:has([data-slot="radio-content"][data-pressed="true"][aria-checked="true"])
|
|
176
|
+
.rp-radio__indicator:empty::before,
|
|
177
|
+
.rp-radio:has(input:checked):has([data-slot="radio-content"][data-pressed="true"])
|
|
178
|
+
.rp-radio__indicator:empty::before {
|
|
181
179
|
scale: 0.5714; /* 8px */
|
|
182
180
|
}
|
|
183
181
|
|
|
@@ -185,6 +183,6 @@
|
|
|
185
183
|
Disabled modifier
|
|
186
184
|
========================================================================== */
|
|
187
185
|
|
|
188
|
-
.radio--disabled {
|
|
186
|
+
.rp-radio--disabled {
|
|
189
187
|
@apply status-disabled;
|
|
190
188
|
}
|
|
@@ -1,79 +1,46 @@
|
|
|
1
|
-
import type { VariantProps } from "
|
|
2
|
-
export declare const rangeCalendarVariants:
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
headerCell: string;
|
|
46
|
-
/** Month/year heading text */
|
|
47
|
-
heading: string;
|
|
48
|
-
/** Previous/Next navigation button */
|
|
49
|
-
navButton: string;
|
|
50
|
-
/** Navigation button icon */
|
|
51
|
-
navButtonIcon: string;
|
|
52
|
-
}, import("tailwind-variants").TVReturnTypeLike<{}, {
|
|
53
|
-
/** Root range calendar container */
|
|
54
|
-
base: string;
|
|
55
|
-
/** Calendar cell (td) */
|
|
56
|
-
cell: string;
|
|
57
|
-
/** Cell indicator (small dot at bottom of cell) */
|
|
58
|
-
cellIndicator: string;
|
|
59
|
-
/** Calendar grid (table) */
|
|
60
|
-
grid: string;
|
|
61
|
-
/** Grid body (tbody) */
|
|
62
|
-
gridBody: string;
|
|
63
|
-
/** Grid header (thead) */
|
|
64
|
-
gridHeader: string;
|
|
65
|
-
/** Grid row (tr) */
|
|
66
|
-
gridRow: string;
|
|
67
|
-
/** Calendar header containing heading and navigation */
|
|
68
|
-
header: string;
|
|
69
|
-
/** Header cell (th - day names) */
|
|
70
|
-
headerCell: string;
|
|
71
|
-
/** Month/year heading text */
|
|
72
|
-
heading: string;
|
|
73
|
-
/** Previous/Next navigation button */
|
|
74
|
-
navButton: string;
|
|
75
|
-
/** Navigation button icon */
|
|
76
|
-
navButtonIcon: string;
|
|
77
|
-
}>>;
|
|
1
|
+
import type { VariantProps } from "../../tv";
|
|
2
|
+
export declare const rangeCalendarVariants: (props?: ({
|
|
3
|
+
class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
|
|
4
|
+
} & {}) | undefined) => {
|
|
5
|
+
base: (props?: ({
|
|
6
|
+
class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
|
|
7
|
+
} & {}) | undefined) => string;
|
|
8
|
+
cell: (props?: ({
|
|
9
|
+
class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
|
|
10
|
+
} & {}) | undefined) => string;
|
|
11
|
+
cellButton: (props?: ({
|
|
12
|
+
class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
|
|
13
|
+
} & {}) | undefined) => string;
|
|
14
|
+
cellIndicator: (props?: ({
|
|
15
|
+
class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
|
|
16
|
+
} & {}) | undefined) => string;
|
|
17
|
+
grid: (props?: ({
|
|
18
|
+
class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
|
|
19
|
+
} & {}) | undefined) => string;
|
|
20
|
+
gridBody: (props?: ({
|
|
21
|
+
class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
|
|
22
|
+
} & {}) | undefined) => string;
|
|
23
|
+
gridHeader: (props?: ({
|
|
24
|
+
class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
|
|
25
|
+
} & {}) | undefined) => string;
|
|
26
|
+
gridRow: (props?: ({
|
|
27
|
+
class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
|
|
28
|
+
} & {}) | undefined) => string;
|
|
29
|
+
header: (props?: ({
|
|
30
|
+
class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
|
|
31
|
+
} & {}) | undefined) => string;
|
|
32
|
+
headerCell: (props?: ({
|
|
33
|
+
class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
|
|
34
|
+
} & {}) | undefined) => string;
|
|
35
|
+
heading: (props?: ({
|
|
36
|
+
class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
|
|
37
|
+
} & {}) | undefined) => string;
|
|
38
|
+
navButton: (props?: ({
|
|
39
|
+
class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
|
|
40
|
+
} & {}) | undefined) => string;
|
|
41
|
+
navButtonIcon: (props?: ({
|
|
42
|
+
class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
|
|
43
|
+
} & {}) | undefined) => string;
|
|
44
|
+
};
|
|
78
45
|
export type RangeCalendarVariants = VariantProps<typeof rangeCalendarVariants>;
|
|
79
46
|
//# sourceMappingURL=range-calendar.styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"range-calendar.styles.d.ts","sourceRoot":"","sources":["../../../src/components/range-calendar/range-calendar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"range-calendar.styles.d.ts","sourceRoot":"","sources":["../../../src/components/range-calendar/range-calendar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BhC,CAAC;AAEH,MAAM,MAAM,qBAAqB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC"}
|