@lolmath/ui 0.0.0-20240810205542
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/es/assets/active.4113e6b2.png +0 -0
- package/dist/es/assets/checked-disabled.b5430cf5.png +0 -0
- package/dist/es/assets/checked-hover.d13cb1b3.png +0 -0
- package/dist/es/assets/checked-hovered.67390091.png +0 -0
- package/dist/es/assets/checked-pressed.cffd963b.png +0 -0
- package/dist/es/assets/checked.3258b858.png +0 -0
- package/dist/es/assets/checked.b9e4b215.png +0 -0
- package/dist/es/assets/closed.484c8084.png +0 -0
- package/dist/es/assets/disabled.87ad565d.png +0 -0
- package/dist/es/assets/divider.83026e17.png +0 -0
- package/dist/es/assets/dropdown-check.bed4dc45.png +0 -0
- package/dist/es/assets/hover.404fa456.png +0 -0
- package/dist/es/assets/indeterminate-hover.68fcbcda.png +0 -0
- package/dist/es/assets/indeterminate.90d6dc3e.png +0 -0
- package/dist/es/assets/normal.e4c594a1.png +0 -0
- package/dist/es/assets/open.a8643ee6.png +0 -0
- package/dist/es/assets/search.c15f1e1d.png +0 -0
- package/dist/es/assets/spinner.a69432f7.png +0 -0
- package/dist/es/assets/unchecked-disabled.702505e2.png +0 -0
- package/dist/es/assets/unchecked-hover.c8e5f2d0.png +0 -0
- package/dist/es/assets/unchecked-hovered.e26c4420.png +0 -0
- package/dist/es/assets/unchecked-pressed.161ab6f8.png +0 -0
- package/dist/es/assets/unchecked.ad8e0a95.png +0 -0
- package/dist/es/assets/unchecked.cc033abe.png +0 -0
- package/dist/es/components/accordion.d.ts +74 -0
- package/dist/es/components/accordion.js +74 -0
- package/dist/es/components/accordion.js.map +1 -0
- package/dist/es/components/accordion.module.js +7 -0
- package/dist/es/components/accordion.module.js.map +1 -0
- package/dist/es/components/accordion_module.css +41 -0
- package/dist/es/components/breadcrumbs/breadcrumbs.d.ts +3 -0
- package/dist/es/components/breadcrumbs/breadcrumbs.js +55 -0
- package/dist/es/components/breadcrumbs/breadcrumbs.js.map +1 -0
- package/dist/es/components/breadcrumbs/breadcrumbs.module.js +7 -0
- package/dist/es/components/breadcrumbs/breadcrumbs.module.js.map +1 -0
- package/dist/es/components/breadcrumbs/breadcrumbs_module.css +30 -0
- package/dist/es/components/breadcrumbs.d.ts +3 -0
- package/dist/es/components/breadcrumbs.js +67 -0
- package/dist/es/components/breadcrumbs.js.map +1 -0
- package/dist/es/components/breadcrumbs.module.js +7 -0
- package/dist/es/components/breadcrumbs.module.js.map +1 -0
- package/dist/es/components/breadcrumbs_module.css +25 -0
- package/dist/es/components/button-link.d.ts +11 -0
- package/dist/es/components/button-link.js +39 -0
- package/dist/es/components/button-link.js.map +1 -0
- package/dist/es/components/button.d.ts +76 -0
- package/dist/es/components/button.js +78 -0
- package/dist/es/components/button.js.map +1 -0
- package/dist/es/components/button.module.js +7 -0
- package/dist/es/components/button.module.js.map +1 -0
- package/dist/es/components/button_module.css +160 -0
- package/dist/es/components/card.d.ts +6 -0
- package/dist/es/components/card.js +32 -0
- package/dist/es/components/card.js.map +1 -0
- package/dist/es/components/card.module.js +7 -0
- package/dist/es/components/card.module.js.map +1 -0
- package/dist/es/components/card_module.css +18 -0
- package/dist/es/components/checkbox/checkbox.d.ts +2 -0
- package/dist/es/components/checkbox/checkbox.js +55 -0
- package/dist/es/components/checkbox/checkbox.js.map +1 -0
- package/dist/es/components/checkbox/checkbox.module.js +7 -0
- package/dist/es/components/checkbox/checkbox.module.js.map +1 -0
- package/dist/es/components/checkbox/checkbox_module.css +21 -0
- package/dist/es/components/divider.d.ts +6 -0
- package/dist/es/components/divider.js +31 -0
- package/dist/es/components/divider.js.map +1 -0
- package/dist/es/components/divider.module.js +7 -0
- package/dist/es/components/divider.module.js.map +1 -0
- package/dist/es/components/divider_module.css +31 -0
- package/dist/es/components/modal.d.ts +13 -0
- package/dist/es/components/modal.js +86 -0
- package/dist/es/components/modal.js.map +1 -0
- package/dist/es/components/modal.module.js +7 -0
- package/dist/es/components/modal.module.js.map +1 -0
- package/dist/es/components/modal_module.css +82 -0
- package/dist/es/components/number-field.d.ts +10 -0
- package/dist/es/components/number-field.js +103 -0
- package/dist/es/components/number-field.js.map +1 -0
- package/dist/es/components/number-field.module.js +7 -0
- package/dist/es/components/number-field.module.js.map +1 -0
- package/dist/es/components/number-field_module.css +56 -0
- package/dist/es/components/popover.d.ts +1 -0
- package/dist/es/components/popover.js +0 -0
- package/dist/es/components/popover.module.css +0 -0
- package/dist/es/components/progress-bar.d.ts +6 -0
- package/dist/es/components/progress-bar.js +25 -0
- package/dist/es/components/progress-bar.js.map +1 -0
- package/dist/es/components/progress-bar.module.js +7 -0
- package/dist/es/components/progress-bar.module.js.map +1 -0
- package/dist/es/components/progress-bar_module.css +35 -0
- package/dist/es/components/radio-group/radio-group.d.ts +3 -0
- package/dist/es/components/radio-group/radio-group.js +46 -0
- package/dist/es/components/radio-group/radio-group.js.map +1 -0
- package/dist/es/components/radio-group/radio-group.module.js +7 -0
- package/dist/es/components/radio-group/radio-group.module.js.map +1 -0
- package/dist/es/components/radio-group/radio-group_module.css +55 -0
- package/dist/es/components/search-field/search-field.d.ts +6 -0
- package/dist/es/components/search-field/search-field.js +67 -0
- package/dist/es/components/search-field/search-field.js.map +1 -0
- package/dist/es/components/search-field/search-field.module.js +7 -0
- package/dist/es/components/search-field/search-field.module.js.map +1 -0
- package/dist/es/components/search-field/search-field_module.css +78 -0
- package/dist/es/components/select/dropdown-check.js +6 -0
- package/dist/es/components/select/dropdown-check.js.map +1 -0
- package/dist/es/components/select/select.d.ts +11 -0
- package/dist/es/components/select/select.js +77 -0
- package/dist/es/components/select/select.js.map +1 -0
- package/dist/es/components/select/select.module.js +7 -0
- package/dist/es/components/select/select.module.js.map +1 -0
- package/dist/es/components/select/select_module.css +82 -0
- package/dist/es/components/slider/slider.d.ts +8 -0
- package/dist/es/components/slider/slider.js +146 -0
- package/dist/es/components/slider/slider.js.map +1 -0
- package/dist/es/components/slider/slider.module.js +7 -0
- package/dist/es/components/slider/slider.module.js.map +1 -0
- package/dist/es/components/slider/slider_module.css +62 -0
- package/dist/es/components/spinner/spinner.d.ts +5 -0
- package/dist/es/components/spinner/spinner.js +21 -0
- package/dist/es/components/spinner/spinner.js.map +1 -0
- package/dist/es/components/spinner/spinner.module.js +7 -0
- package/dist/es/components/spinner/spinner.module.js.map +1 -0
- package/dist/es/components/spinner/spinner_module.css +18 -0
- package/dist/es/components/switch.d.ts +4 -0
- package/dist/es/components/switch.js +61 -0
- package/dist/es/components/switch.js.map +1 -0
- package/dist/es/components/switch.module.js +7 -0
- package/dist/es/components/switch.module.js.map +1 -0
- package/dist/es/components/switch_module.css +72 -0
- package/dist/es/components/tabs.d.ts +6 -0
- package/dist/es/components/tabs.js +71 -0
- package/dist/es/components/tabs.js.map +1 -0
- package/dist/es/components/tabs.module.js +7 -0
- package/dist/es/components/tabs.module.js.map +1 -0
- package/dist/es/components/tabs_module.css +52 -0
- package/dist/es/components/text-area.d.ts +4 -0
- package/dist/es/components/text-area.js +31 -0
- package/dist/es/components/text-area.js.map +1 -0
- package/dist/es/components/text-field.d.ts +64 -0
- package/dist/es/components/text-field.js +46 -0
- package/dist/es/components/text-field.js.map +1 -0
- package/dist/es/components/text-field.module.js +7 -0
- package/dist/es/components/text-field.module.js.map +1 -0
- package/dist/es/components/text-field_module.css +37 -0
- package/dist/es/components/toggle-button.d.ts +10 -0
- package/dist/es/components/toggle-button.js +68 -0
- package/dist/es/components/toggle-button.js.map +1 -0
- package/dist/es/components/tooltip.d.ts +3 -0
- package/dist/es/components/tooltip.js +67 -0
- package/dist/es/components/tooltip.js.map +1 -0
- package/dist/es/components/tooltip.module.js +7 -0
- package/dist/es/components/tooltip.module.js.map +1 -0
- package/dist/es/components/tooltip_module.css +68 -0
- package/dist/es/components/typography/heading.d.ts +67 -0
- package/dist/es/components/typography/heading.js +40 -0
- package/dist/es/components/typography/heading.js.map +1 -0
- package/dist/es/components/typography/heading.module.js +7 -0
- package/dist/es/components/typography/heading.module.js.map +1 -0
- package/dist/es/components/typography/heading_module.css +58 -0
- package/dist/es/components/typography/text.d.ts +17 -0
- package/dist/es/components/typography/text.js +63 -0
- package/dist/es/components/typography/text.js.map +1 -0
- package/dist/es/components/typography/text.module.js +7 -0
- package/dist/es/components/typography/text.module.js.map +1 -0
- package/dist/es/components/typography/text_module.css +66 -0
- package/dist/es/index.d.ts +24 -0
- package/dist/es/index.js +29 -0
- package/dist/es/index.js.map +1 -0
- package/dist/es/plugin.d.ts +4 -0
- package/dist/es/plugin.js +149 -0
- package/dist/es/plugin.js.map +1 -0
- package/dist/es/style.css +105 -0
- package/dist/es/utilities/resolve-class-name.d.ts +1 -0
- package/dist/es/utilities/resolve-class-name.js +8 -0
- package/dist/es/utilities/resolve-class-name.js.map +1 -0
- package/dist/font/beaufort/beaufort.css +79 -0
- package/dist/font/beaufort/files/beaufort-300-italic.woff +0 -0
- package/dist/font/beaufort/files/beaufort-300-italic.woff2 +0 -0
- package/dist/font/beaufort/files/beaufort-300-normal.woff +0 -0
- package/dist/font/beaufort/files/beaufort-300-normal.woff2 +0 -0
- package/dist/font/beaufort/files/beaufort-400-italic.woff +0 -0
- package/dist/font/beaufort/files/beaufort-400-italic.woff2 +0 -0
- package/dist/font/beaufort/files/beaufort-400-normal.woff +0 -0
- package/dist/font/beaufort/files/beaufort-400-normal.woff2 +0 -0
- package/dist/font/beaufort/files/beaufort-500-italic.woff +0 -0
- package/dist/font/beaufort/files/beaufort-500-italic.woff2 +0 -0
- package/dist/font/beaufort/files/beaufort-500-normal.woff +0 -0
- package/dist/font/beaufort/files/beaufort-500-normal.woff2 +0 -0
- package/dist/font/beaufort/files/beaufort-700-italic.woff +0 -0
- package/dist/font/beaufort/files/beaufort-700-italic.woff2 +0 -0
- package/dist/font/beaufort/files/beaufort-700-normal.woff +0 -0
- package/dist/font/beaufort/files/beaufort-700-normal.woff2 +0 -0
- package/dist/font/beaufort/files/beaufort-900-italic.woff +0 -0
- package/dist/font/beaufort/files/beaufort-900-italic.woff2 +0 -0
- package/dist/font/beaufort/files/beaufort-900-normal.woff +0 -0
- package/dist/font/beaufort/files/beaufort-900-normal.woff2 +0 -0
- package/dist/font/spiegel/files/spiegel-400-italic.woff +0 -0
- package/dist/font/spiegel/files/spiegel-400-italic.woff2 +0 -0
- package/dist/font/spiegel/files/spiegel-400-normal.woff +0 -0
- package/dist/font/spiegel/files/spiegel-400-normal.woff2 +0 -0
- package/dist/font/spiegel/files/spiegel-600-normal.woff +0 -0
- package/dist/font/spiegel/files/spiegel-600-normal.woff2 +0 -0
- package/dist/font/spiegel/files/spiegel-700-italic.woff +0 -0
- package/dist/font/spiegel/files/spiegel-700-italic.woff2 +0 -0
- package/dist/font/spiegel/files/spiegel-700-normal.woff +0 -0
- package/dist/font/spiegel/files/spiegel-700-normal.woff2 +0 -0
- package/dist/font/spiegel/spiegel.css +44 -0
- package/dist/lib/assets/active.4113e6b2.png +0 -0
- package/dist/lib/assets/checked-disabled.b5430cf5.png +0 -0
- package/dist/lib/assets/checked-hover.d13cb1b3.png +0 -0
- package/dist/lib/assets/checked-hovered.67390091.png +0 -0
- package/dist/lib/assets/checked-pressed.cffd963b.png +0 -0
- package/dist/lib/assets/checked.3258b858.png +0 -0
- package/dist/lib/assets/checked.b9e4b215.png +0 -0
- package/dist/lib/assets/closed.484c8084.png +0 -0
- package/dist/lib/assets/disabled.87ad565d.png +0 -0
- package/dist/lib/assets/divider.83026e17.png +0 -0
- package/dist/lib/assets/dropdown-check.bed4dc45.png +0 -0
- package/dist/lib/assets/hover.404fa456.png +0 -0
- package/dist/lib/assets/indeterminate-hover.68fcbcda.png +0 -0
- package/dist/lib/assets/indeterminate.90d6dc3e.png +0 -0
- package/dist/lib/assets/normal.e4c594a1.png +0 -0
- package/dist/lib/assets/open.a8643ee6.png +0 -0
- package/dist/lib/assets/search.c15f1e1d.png +0 -0
- package/dist/lib/assets/spinner.a69432f7.png +0 -0
- package/dist/lib/assets/unchecked-disabled.702505e2.png +0 -0
- package/dist/lib/assets/unchecked-hover.c8e5f2d0.png +0 -0
- package/dist/lib/assets/unchecked-hovered.e26c4420.png +0 -0
- package/dist/lib/assets/unchecked-pressed.161ab6f8.png +0 -0
- package/dist/lib/assets/unchecked.ad8e0a95.png +0 -0
- package/dist/lib/assets/unchecked.cc033abe.png +0 -0
- package/dist/lib/components/accordion.d.ts +74 -0
- package/dist/lib/components/accordion.js +112 -0
- package/dist/lib/components/accordion.js.map +1 -0
- package/dist/lib/components/accordion.module.js +27 -0
- package/dist/lib/components/accordion.module.js.map +1 -0
- package/dist/lib/components/accordion_module.css +41 -0
- package/dist/lib/components/breadcrumbs/breadcrumbs.d.ts +3 -0
- package/dist/lib/components/breadcrumbs/breadcrumbs.js +86 -0
- package/dist/lib/components/breadcrumbs/breadcrumbs.js.map +1 -0
- package/dist/lib/components/breadcrumbs/breadcrumbs.module.js +27 -0
- package/dist/lib/components/breadcrumbs/breadcrumbs.module.js.map +1 -0
- package/dist/lib/components/breadcrumbs/breadcrumbs_module.css +30 -0
- package/dist/lib/components/button-link.d.ts +11 -0
- package/dist/lib/components/button-link.js +64 -0
- package/dist/lib/components/button-link.js.map +1 -0
- package/dist/lib/components/button.d.ts +76 -0
- package/dist/lib/components/button.js +112 -0
- package/dist/lib/components/button.js.map +1 -0
- package/dist/lib/components/button.module.js +27 -0
- package/dist/lib/components/button.module.js.map +1 -0
- package/dist/lib/components/button_module.css +160 -0
- package/dist/lib/components/card.d.ts +6 -0
- package/dist/lib/components/card.js +66 -0
- package/dist/lib/components/card.js.map +1 -0
- package/dist/lib/components/card.module.js +27 -0
- package/dist/lib/components/card.module.js.map +1 -0
- package/dist/lib/components/card_module.css +18 -0
- package/dist/lib/components/checkbox/checkbox.d.ts +2 -0
- package/dist/lib/components/checkbox/checkbox.js +87 -0
- package/dist/lib/components/checkbox/checkbox.js.map +1 -0
- package/dist/lib/components/checkbox/checkbox.module.js +27 -0
- package/dist/lib/components/checkbox/checkbox.module.js.map +1 -0
- package/dist/lib/components/checkbox/checkbox_module.css +21 -0
- package/dist/lib/components/divider.d.ts +6 -0
- package/dist/lib/components/divider.js +65 -0
- package/dist/lib/components/divider.js.map +1 -0
- package/dist/lib/components/divider.module.js +27 -0
- package/dist/lib/components/divider.module.js.map +1 -0
- package/dist/lib/components/divider_module.css +31 -0
- package/dist/lib/components/modal.d.ts +13 -0
- package/dist/lib/components/modal.js +117 -0
- package/dist/lib/components/modal.js.map +1 -0
- package/dist/lib/components/modal.module.js +27 -0
- package/dist/lib/components/modal.module.js.map +1 -0
- package/dist/lib/components/modal_module.css +82 -0
- package/dist/lib/components/number-field.d.ts +10 -0
- package/dist/lib/components/number-field.js +132 -0
- package/dist/lib/components/number-field.js.map +1 -0
- package/dist/lib/components/number-field.module.js +27 -0
- package/dist/lib/components/number-field.module.js.map +1 -0
- package/dist/lib/components/number-field_module.css +56 -0
- package/dist/lib/components/popover.d.ts +1 -0
- package/dist/lib/components/popover.js +1 -0
- package/dist/lib/components/popover.module.css +0 -0
- package/dist/lib/components/progress-bar.d.ts +6 -0
- package/dist/lib/components/progress-bar.js +56 -0
- package/dist/lib/components/progress-bar.js.map +1 -0
- package/dist/lib/components/progress-bar.module.js +27 -0
- package/dist/lib/components/progress-bar.module.js.map +1 -0
- package/dist/lib/components/progress-bar_module.css +35 -0
- package/dist/lib/components/radio-group/radio-group.d.ts +3 -0
- package/dist/lib/components/radio-group/radio-group.js +78 -0
- package/dist/lib/components/radio-group/radio-group.js.map +1 -0
- package/dist/lib/components/radio-group/radio-group.module.js +27 -0
- package/dist/lib/components/radio-group/radio-group.module.js.map +1 -0
- package/dist/lib/components/radio-group/radio-group_module.css +55 -0
- package/dist/lib/components/search-field/search-field.d.ts +6 -0
- package/dist/lib/components/search-field/search-field.js +97 -0
- package/dist/lib/components/search-field/search-field.js.map +1 -0
- package/dist/lib/components/search-field/search-field.module.js +27 -0
- package/dist/lib/components/search-field/search-field.module.js.map +1 -0
- package/dist/lib/components/search-field/search-field_module.css +78 -0
- package/dist/lib/components/select/select.d.ts +11 -0
- package/dist/lib/components/select/select.js +104 -0
- package/dist/lib/components/select/select.js.map +1 -0
- package/dist/lib/components/select/select.module.js +27 -0
- package/dist/lib/components/select/select.module.js.map +1 -0
- package/dist/lib/components/select/select_module.css +82 -0
- package/dist/lib/components/slider/slider.d.ts +8 -0
- package/dist/lib/components/slider/slider.js +176 -0
- package/dist/lib/components/slider/slider.js.map +1 -0
- package/dist/lib/components/slider/slider.module.js +27 -0
- package/dist/lib/components/slider/slider.module.js.map +1 -0
- package/dist/lib/components/slider/slider_module.css +62 -0
- package/dist/lib/components/spinner/spinner.d.ts +5 -0
- package/dist/lib/components/spinner/spinner.js +55 -0
- package/dist/lib/components/spinner/spinner.js.map +1 -0
- package/dist/lib/components/spinner/spinner.module.js +27 -0
- package/dist/lib/components/spinner/spinner.module.js.map +1 -0
- package/dist/lib/components/spinner/spinner_module.css +18 -0
- package/dist/lib/components/switch.d.ts +4 -0
- package/dist/lib/components/switch.js +95 -0
- package/dist/lib/components/switch.js.map +1 -0
- package/dist/lib/components/switch.module.js +27 -0
- package/dist/lib/components/switch.module.js.map +1 -0
- package/dist/lib/components/switch_module.css +72 -0
- package/dist/lib/components/tabs.d.ts +6 -0
- package/dist/lib/components/tabs.js +103 -0
- package/dist/lib/components/tabs.js.map +1 -0
- package/dist/lib/components/tabs.module.js +27 -0
- package/dist/lib/components/tabs.module.js.map +1 -0
- package/dist/lib/components/tabs_module.css +52 -0
- package/dist/lib/components/text-area.d.ts +4 -0
- package/dist/lib/components/text-area.js +52 -0
- package/dist/lib/components/text-area.js.map +1 -0
- package/dist/lib/components/text-field.d.ts +64 -0
- package/dist/lib/components/text-field.js +78 -0
- package/dist/lib/components/text-field.js.map +1 -0
- package/dist/lib/components/text-field.module.js +27 -0
- package/dist/lib/components/text-field.module.js.map +1 -0
- package/dist/lib/components/text-field_module.css +37 -0
- package/dist/lib/components/toggle-button.d.ts +10 -0
- package/dist/lib/components/toggle-button.js +100 -0
- package/dist/lib/components/toggle-button.js.map +1 -0
- package/dist/lib/components/tooltip.d.ts +3 -0
- package/dist/lib/components/tooltip.js +102 -0
- package/dist/lib/components/tooltip.js.map +1 -0
- package/dist/lib/components/tooltip.module.js +27 -0
- package/dist/lib/components/tooltip.module.js.map +1 -0
- package/dist/lib/components/tooltip_module.css +68 -0
- package/dist/lib/components/typography/heading.d.ts +67 -0
- package/dist/lib/components/typography/heading.js +75 -0
- package/dist/lib/components/typography/heading.js.map +1 -0
- package/dist/lib/components/typography/heading.module.js +27 -0
- package/dist/lib/components/typography/heading.module.js.map +1 -0
- package/dist/lib/components/typography/heading_module.css +58 -0
- package/dist/lib/components/typography/text.d.ts +17 -0
- package/dist/lib/components/typography/text.js +96 -0
- package/dist/lib/components/typography/text.js.map +1 -0
- package/dist/lib/components/typography/text.module.js +27 -0
- package/dist/lib/components/typography/text.module.js.map +1 -0
- package/dist/lib/components/typography/text_module.css +66 -0
- package/dist/lib/index.d.ts +24 -0
- package/dist/lib/index.js +77 -0
- package/dist/lib/index.js.map +1 -0
- package/dist/lib/plugin.d.ts +4 -0
- package/dist/lib/plugin.js +183 -0
- package/dist/lib/plugin.js.map +1 -0
- package/dist/lib/style.css +105 -0
- package/dist/lib/utilities/resolve-class-name.d.ts +1 -0
- package/dist/lib/utilities/resolve-class-name.js +32 -0
- package/dist/lib/utilities/resolve-class-name.js.map +1 -0
- package/package.json +97 -0
- package/readme.md +86 -0
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
@layer lol {
|
|
2
|
+
.searchField_72b2d {
|
|
3
|
+
display: grid;
|
|
4
|
+
grid-template-areas:
|
|
5
|
+
"label label"
|
|
6
|
+
"input button"
|
|
7
|
+
"help help";
|
|
8
|
+
grid-template-columns: 1fr auto;
|
|
9
|
+
align-items: center;
|
|
10
|
+
|
|
11
|
+
color: var(--lol-color-gold-100);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.input_72b2d {
|
|
15
|
+
background: url('../../assets/search.c15f1e1d.png') no-repeat 5px center,
|
|
16
|
+
var(--lol-search-field-background-gradient) padding-box,
|
|
17
|
+
var(--lol-search-field-border-gradient) border-box;
|
|
18
|
+
|
|
19
|
+
--lol-search-field-border-gradient: var(--lol-gradient-gold);
|
|
20
|
+
--lol-search-field-background-gradient: var(--lol-gradient-hextech-black);
|
|
21
|
+
|
|
22
|
+
background-size: 16px, auto, auto;
|
|
23
|
+
border: 1px solid transparent;
|
|
24
|
+
grid-area: input;
|
|
25
|
+
padding: 0.5rem 2.5rem 0.5rem 1.5rem;
|
|
26
|
+
margin: 0;
|
|
27
|
+
font-size: 0.75rem;
|
|
28
|
+
line-height: 1rem;
|
|
29
|
+
color: var(--field-text-color);
|
|
30
|
+
outline: none;
|
|
31
|
+
font-family: var(--lol-font-family-spiegel);
|
|
32
|
+
font-weight: 500;
|
|
33
|
+
letter-spacing: 0.025em;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.input_72b2d::-webkit-search-cancel-button,
|
|
37
|
+
.input_72b2d::-webkit-search-decoration {
|
|
38
|
+
-webkit-appearance: none;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.input_72b2d.disabled_72b2d {
|
|
42
|
+
--lol-search-field-border-gradient: var(--lol-gradient-disabled);
|
|
43
|
+
color: var(--lol-color-grey-150);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.input_72b2d.focus_72b2d {
|
|
47
|
+
--lol-search-field-border-gradient: var(--lol-gradient-gold-hover);
|
|
48
|
+
--lol-search-field-background-gradient: var(--lol-gradient-grey-focus);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.button_72b2d {
|
|
52
|
+
grid-area: button;
|
|
53
|
+
|
|
54
|
+
font-size: 0.75rem;
|
|
55
|
+
line-height: 1rem;
|
|
56
|
+
font-weight: 900;
|
|
57
|
+
|
|
58
|
+
margin-left: -2.5rem;
|
|
59
|
+
width: 2.5rem;
|
|
60
|
+
align-self: stretch;
|
|
61
|
+
text-align: center;
|
|
62
|
+
|
|
63
|
+
color: var(--lol-color-gold-300);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.button_72b2d.hover_72b2d {
|
|
67
|
+
color: var(--lol-color-gold-100);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.button_72b2d.press_72b2d {
|
|
71
|
+
color: var(--lol-color-gold-600);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.button_72b2d.empty_72b2d,
|
|
75
|
+
.button_72b2d.disabled_72b2d {
|
|
76
|
+
display: none;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"mappings":"AAAA","names":[],"ignoreList":[],"sources":["../../../../src/components/select/dropdown-check.png"],"sourcesContent":["../../assets/dropdown-check.bed4dc45.png"]}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { ReactNode } from "react";
|
|
2
|
+
import type { SelectProps as AriaSelectProps, ListBoxItemProps } from "react-aria-components";
|
|
3
|
+
interface SelectProps<T extends object> extends Omit<AriaSelectProps<T>, "children"> {
|
|
4
|
+
label?: string;
|
|
5
|
+
description?: string;
|
|
6
|
+
errorMessage?: string;
|
|
7
|
+
children?: ReactNode | ((item: T) => ReactNode);
|
|
8
|
+
}
|
|
9
|
+
export declare function Select<T extends object>({ description, errorMessage, children, className, ...props }: SelectProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export declare function Item({ className, ...props }: ListBoxItemProps): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { cva } from "cva";
|
|
3
|
+
import {
|
|
4
|
+
Button as AriaButton,
|
|
5
|
+
ListBox as AriaListBox,
|
|
6
|
+
Popover as AriaPopover,
|
|
7
|
+
Select as AriaSelect,
|
|
8
|
+
SelectValue as AriaSelectValue,
|
|
9
|
+
Text as AriaText,
|
|
10
|
+
ListBoxItem
|
|
11
|
+
} from "react-aria-components";
|
|
12
|
+
import { resolveClassName } from "../../utilities/resolve-class-name.js";
|
|
13
|
+
import classes from "./select.module";
|
|
14
|
+
const selectButtonBorder = cva({
|
|
15
|
+
base: classes.button,
|
|
16
|
+
variants: {
|
|
17
|
+
isHovered: { true: classes.hover },
|
|
18
|
+
isPressed: { true: classes.press },
|
|
19
|
+
isOpen: { true: classes.open },
|
|
20
|
+
isDisabled: { true: classes.disabled }
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
function Select({
|
|
24
|
+
description,
|
|
25
|
+
errorMessage,
|
|
26
|
+
children,
|
|
27
|
+
className,
|
|
28
|
+
...props
|
|
29
|
+
}) {
|
|
30
|
+
return /* @__PURE__ */ jsx(
|
|
31
|
+
AriaSelect,
|
|
32
|
+
{
|
|
33
|
+
...props,
|
|
34
|
+
className: (values) => resolveClassName(className, values),
|
|
35
|
+
children: (values) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
36
|
+
/* @__PURE__ */ jsx(
|
|
37
|
+
AriaButton,
|
|
38
|
+
{
|
|
39
|
+
className: (buttonValues) => selectButtonBorder({ ...buttonValues, isOpen: values.isOpen }),
|
|
40
|
+
children: /* @__PURE__ */ jsx(AriaSelectValue, {})
|
|
41
|
+
}
|
|
42
|
+
),
|
|
43
|
+
description && /* @__PURE__ */ jsx(AriaText, { slot: "description", children: description }),
|
|
44
|
+
errorMessage && /* @__PURE__ */ jsx(AriaText, { slot: "errorMessage", children: errorMessage }),
|
|
45
|
+
/* @__PURE__ */ jsx(AriaPopover, { offset: 4, className: "w-[--trigger-width]", children: /* @__PURE__ */ jsx(AriaListBox, { className: classes.listBox, children }) })
|
|
46
|
+
] })
|
|
47
|
+
}
|
|
48
|
+
);
|
|
49
|
+
}
|
|
50
|
+
const item = cva({
|
|
51
|
+
base: classes.item,
|
|
52
|
+
variants: {
|
|
53
|
+
isHovered: { true: classes.hover },
|
|
54
|
+
isPressed: { true: classes.press },
|
|
55
|
+
isSelected: { true: classes.selected }
|
|
56
|
+
}
|
|
57
|
+
});
|
|
58
|
+
function Item({ className, ...props }) {
|
|
59
|
+
return /* @__PURE__ */ jsx(
|
|
60
|
+
ListBoxItem,
|
|
61
|
+
{
|
|
62
|
+
...props,
|
|
63
|
+
className: (values) => {
|
|
64
|
+
return item({
|
|
65
|
+
...values,
|
|
66
|
+
className: resolveClassName(className, values)
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
);
|
|
71
|
+
}
|
|
72
|
+
export {
|
|
73
|
+
Item,
|
|
74
|
+
Select
|
|
75
|
+
};
|
|
76
|
+
|
|
77
|
+
//# sourceMappingURL=select.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"mappings":"AAiDI,mBAME,KANF;AAjDJ,SAAS,WAAW;AAMpB;AAAA,EACC,UAAU;AAAA,EACV,WAAW;AAAA,EACX,WAAW;AAAA,EACX,UAAU;AAAA,EACV,eAAe;AAAA,EACf,QAAQ;AAAA,EACR;AAAA,OACM;AACP,SAAS,wBAAwB;AACjC,OAAO,aAAa;AAEpB,MAAM,qBAAqB,IAAI;AAAA,EAC9B,MAAM,QAAQ;AAAA,EACd,UAAU;AAAA,IACT,WAAW,EAAE,MAAM,QAAQ,MAAM;AAAA,IACjC,WAAW,EAAE,MAAM,QAAQ,MAAM;AAAA,IACjC,QAAQ,EAAE,MAAM,QAAQ,KAAK;AAAA,IAC7B,YAAY,EAAE,MAAM,QAAQ,SAAS;AAAA,EACtC;AACD,CAAC;AAUM,SAAS,OAAyB;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAmB;AAClB,SACC;AAAA,IAAC;AAAA;AAAA,MACC,GAAG;AAAA,MACJ,WAAW,CAAC,WAAW,iBAAiB,WAAW,MAAM;AAAA,MAExD,WAAC,WACD,iCACC;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,WAAW,CAAC,iBACX,mBAAmB,EAAE,GAAG,cAAc,QAAQ,OAAO,OAAO,CAAC;AAAA,YAG9D,8BAAC,mBAAgB;AAAA;AAAA,QAClB;AAAA,QACC,eAAe,oBAAC,YAAS,MAAK,eAAe,uBAAY;AAAA,QACzD,gBACA,oBAAC,YAAS,MAAK,gBAAgB,wBAAa;AAAA,QAE7C,oBAAC,eAAY,QAAQ,GAAG,WAAU,uBACjC,8BAAC,eAAY,WAAW,QAAQ,SAAU,UAAS,GACpD;AAAA,SACD;AAAA;AAAA,EAEF;AAEF;AAEA,MAAM,OAAO,IAAI;AAAA,EAChB,MAAM,QAAQ;AAAA,EACd,UAAU;AAAA,IACT,WAAW,EAAE,MAAM,QAAQ,MAAM;AAAA,IACjC,WAAW,EAAE,MAAM,QAAQ,MAAM;AAAA,IACjC,YAAY,EAAE,MAAM,QAAQ,SAAS;AAAA,EACtC;AACD,CAAC;AAEM,SAAS,KAAK,EAAE,WAAW,GAAG,MAAM,GAAqB;AAC/D,SACC;AAAA,IAAC;AAAA;AAAA,MACC,GAAG;AAAA,MACJ,WAAW,CAAC,WAAW;AACtB,eAAO,KAAK;AAAA,UACX,GAAG;AAAA,UACH,WAAW,iBAAiB,WAAW,MAAM;AAAA,QAC9C,CAAC;AAAA,MACF;AAAA;AAAA,EACD;AAEF","names":[],"ignoreList":[],"sources":["../../../../src/components/select/select.tsx"],"sourcesContent":["import { cva } from \"cva\";\nimport type { ReactNode } from \"react\";\nimport type {\n\tSelectProps as AriaSelectProps,\n\tListBoxItemProps,\n} from \"react-aria-components\";\nimport {\n\tButton as AriaButton,\n\tListBox as AriaListBox,\n\tPopover as AriaPopover,\n\tSelect as AriaSelect,\n\tSelectValue as AriaSelectValue,\n\tText as AriaText,\n\tListBoxItem,\n} from \"react-aria-components\";\nimport { resolveClassName } from \"../../utilities/resolve-class-name.js\";\nimport classes from \"./select.module\";\n\nconst selectButtonBorder = cva({\n\tbase: classes.button,\n\tvariants: {\n\t\tisHovered: { true: classes.hover },\n\t\tisPressed: { true: classes.press },\n\t\tisOpen: { true: classes.open },\n\t\tisDisabled: { true: classes.disabled },\n\t},\n});\n\ninterface SelectProps<T extends object>\n\textends Omit<AriaSelectProps<T>, \"children\"> {\n\tlabel?: string;\n\tdescription?: string;\n\terrorMessage?: string;\n\tchildren?: ReactNode | ((item: T) => ReactNode);\n}\n\nexport function Select<T extends object>({\n\tdescription,\n\terrorMessage,\n\tchildren,\n\tclassName,\n\t...props\n}: SelectProps<T>) {\n\treturn (\n\t\t<AriaSelect\n\t\t\t{...props}\n\t\t\tclassName={(values) => resolveClassName(className, values)}\n\t\t>\n\t\t\t{(values) => (\n\t\t\t\t<>\n\t\t\t\t\t<AriaButton\n\t\t\t\t\t\tclassName={(buttonValues) =>\n\t\t\t\t\t\t\tselectButtonBorder({ ...buttonValues, isOpen: values.isOpen })\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<AriaSelectValue />\n\t\t\t\t\t</AriaButton>\n\t\t\t\t\t{description && <AriaText slot=\"description\">{description}</AriaText>}\n\t\t\t\t\t{errorMessage && (\n\t\t\t\t\t\t<AriaText slot=\"errorMessage\">{errorMessage}</AriaText>\n\t\t\t\t\t)}\n\t\t\t\t\t<AriaPopover offset={4} className=\"w-[--trigger-width]\">\n\t\t\t\t\t\t<AriaListBox className={classes.listBox}>{children}</AriaListBox>\n\t\t\t\t\t</AriaPopover>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</AriaSelect>\n\t);\n}\n\nconst item = cva({\n\tbase: classes.item,\n\tvariants: {\n\t\tisHovered: { true: classes.hover },\n\t\tisPressed: { true: classes.press },\n\t\tisSelected: { true: classes.selected },\n\t},\n});\n\nexport function Item({ className, ...props }: ListBoxItemProps) {\n\treturn (\n\t\t<ListBoxItem\n\t\t\t{...props}\n\t\t\tclassName={(values) => {\n\t\t\t\treturn item({\n\t\t\t\t\t...values,\n\t\t\t\t\tclassName: resolveClassName(className, values),\n\t\t\t\t});\n\t\t\t}}\n\t\t/>\n\t);\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import "./select_module.css";
|
|
2
|
+
var select_default = { "button": "button_de70c", "open": "open_de70c", "press": "press_de70c", "hover": "hover_de70c", "disabled": "disabled_de70c", "listBox": "listBox_de70c", "item": "item_de70c", "selected": "selected_de70c" };
|
|
3
|
+
export {
|
|
4
|
+
select_default as default
|
|
5
|
+
};
|
|
6
|
+
|
|
7
|
+
//# sourceMappingURL=select.module.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO;AAAsB,IAAO,iBAAQ,EAAC,UAAS,gBAAe,QAAO,cAAa,SAAQ,eAAc,SAAQ,eAAc,YAAW,kBAAiB,WAAU,iBAAgB,QAAO,cAAa,YAAW,iBAAgB","names":[],"ignoreList":[],"sources":["../../../../src/components/select/select.module.css"],"sourcesContent":["import \"./select_module.css\";export default {\"button\":\"button_de70c\",\"open\":\"open_de70c\",\"press\":\"press_de70c\",\"hover\":\"hover_de70c\",\"disabled\":\"disabled_de70c\",\"listBox\":\"listBox_de70c\",\"item\":\"item_de70c\",\"selected\":\"selected_de70c\"}//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
@layer lol {
|
|
2
|
+
.button_de70c {
|
|
3
|
+
font-family: var(--lol-font-family-spiegel);
|
|
4
|
+
display: inline-block;
|
|
5
|
+
width: 200px;
|
|
6
|
+
outline: none;
|
|
7
|
+
|
|
8
|
+
border: 1px solid transparent;
|
|
9
|
+
|
|
10
|
+
color: var(--lol-color-grey-100);
|
|
11
|
+
padding: 0.375rem 1.5rem 0.375rem 0.5rem;
|
|
12
|
+
|
|
13
|
+
font-size: 0.75rem;
|
|
14
|
+
font-weight: 500;
|
|
15
|
+
line-height: 1rem;
|
|
16
|
+
letter-spacing: 0.025em;
|
|
17
|
+
text-align: left;
|
|
18
|
+
|
|
19
|
+
background: var(--lol-select-image) no-repeat right 0.5rem center,
|
|
20
|
+
var(--lol-select-background-gradient) padding-box,
|
|
21
|
+
var(--lol-select-border-gradient) border-box;
|
|
22
|
+
|
|
23
|
+
--lol-select-border-gradient: var(--lol-gradient-gold);
|
|
24
|
+
--lol-select-background-gradient: var(--lol-gradient-hextech-black);
|
|
25
|
+
|
|
26
|
+
--lol-select-image: url('../../assets/closed.484c8084.png');
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.button_de70c.open_de70c {
|
|
30
|
+
--lol-select-image: url('../../assets/open.a8643ee6.png');
|
|
31
|
+
color: var(--lol-color-gold-600);
|
|
32
|
+
--lol-select-background-gradient: var(--lol-gradient-grey-300);
|
|
33
|
+
--lol-select-border-gradient: var(--lol-gradient-gold-press);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.button_de70c.press_de70c {
|
|
37
|
+
--lol-select-border-gradient: var(--lol-gradient-gold-press);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.button_de70c.hover_de70c {
|
|
41
|
+
--lol-select-border-gradient: var(--lol-gradient-gold-hover);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.button_de70c.disabled_de70c {
|
|
45
|
+
--lol-select-border-gradient: var(--lol-gradient-disabled);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.listBox_de70c {
|
|
49
|
+
background-color: var(--lol-color-hextech-black);
|
|
50
|
+
border: 1px solid var(--lol-color-gold-600);
|
|
51
|
+
outline: none;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
.item_de70c {
|
|
56
|
+
border-bottom: 1px solid var(--lol-color-grey-300);
|
|
57
|
+
color: var(--lol-color-gold-300);
|
|
58
|
+
font-size: var(--lol-font-size-sm);
|
|
59
|
+
font-weight: var(--lol-font-weight-sm);
|
|
60
|
+
line-height: var(--lol-line-height-sm);
|
|
61
|
+
letter-spacing: var(--lol-letter-spacing-sm);
|
|
62
|
+
padding: 0.375rem 0.5rem;
|
|
63
|
+
outline: none;
|
|
64
|
+
cursor: pointer;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.item_de70c.hover_de70c {
|
|
68
|
+
background-color: var(--lol-color-grey-300);
|
|
69
|
+
color: var(--lol-color-gold-100);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.item_de70c.press_de70c {
|
|
73
|
+
background-color: color-mix(in srgb, var(--lol-color-grey-300), transparent 50%);
|
|
74
|
+
color: var(--lol-color-gold-600);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.item_de70c.selected_de70c {
|
|
78
|
+
background-image: url(../../assets/dropdown-check.bed4dc45.png);
|
|
79
|
+
background-position: right 0.5rem center;
|
|
80
|
+
background-repeat: no-repeat;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { SliderProps as AriaSliderProps, SliderOutputProps, SliderThumbProps, SliderTrackProps, SliderTrackRenderProps } from "react-aria-components";
|
|
2
|
+
export declare function Slider<T extends number | number[]>({ children, className, sliderThumbProps, sliderTrackProps, sliderTrackBackgroundClassName, sliderTrackForegroundClassName, ...props }: AriaSliderProps<T> & {
|
|
3
|
+
sliderTrackProps?: SliderTrackProps;
|
|
4
|
+
sliderThumbProps?: SliderThumbProps;
|
|
5
|
+
sliderTrackBackgroundClassName?: string | ((values: SliderTrackRenderProps) => string);
|
|
6
|
+
sliderTrackForegroundClassName?: string | ((values: SliderTrackRenderProps) => string);
|
|
7
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export declare function SliderOutput(props: SliderOutputProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { cva, cx } from "cva";
|
|
3
|
+
import {
|
|
4
|
+
Slider as AriaSlider,
|
|
5
|
+
SliderOutput as AriaSliderOutput,
|
|
6
|
+
SliderThumb as AriaSliderThumb,
|
|
7
|
+
SliderTrack as AriaSliderTrack
|
|
8
|
+
} from "react-aria-components";
|
|
9
|
+
import { resolveClassName } from "../../utilities/resolve-class-name.js";
|
|
10
|
+
import textClasses from "../typography/text.module";
|
|
11
|
+
import classes from "./slider.module";
|
|
12
|
+
const sliderTrackForeground = cva({
|
|
13
|
+
base: classes.foreground,
|
|
14
|
+
variants: {
|
|
15
|
+
isDisabled: {
|
|
16
|
+
true: classes.disabled
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
});
|
|
20
|
+
const sliderThumb = cva({
|
|
21
|
+
base: classes.thumb,
|
|
22
|
+
variants: {
|
|
23
|
+
isThumbDragging: {
|
|
24
|
+
true: classes.thumbDragging
|
|
25
|
+
},
|
|
26
|
+
isOtherThumbDragging: {
|
|
27
|
+
true: classes.otherThumbDragging
|
|
28
|
+
},
|
|
29
|
+
isDisabled: {
|
|
30
|
+
true: classes.disabled
|
|
31
|
+
},
|
|
32
|
+
isHovered: {
|
|
33
|
+
true: classes.hovered
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
});
|
|
37
|
+
function Slider({
|
|
38
|
+
children,
|
|
39
|
+
className,
|
|
40
|
+
sliderThumbProps = {},
|
|
41
|
+
sliderTrackProps = {},
|
|
42
|
+
sliderTrackBackgroundClassName,
|
|
43
|
+
sliderTrackForegroundClassName,
|
|
44
|
+
...props
|
|
45
|
+
}) {
|
|
46
|
+
return /* @__PURE__ */ jsx(
|
|
47
|
+
AriaSlider,
|
|
48
|
+
{
|
|
49
|
+
...props,
|
|
50
|
+
className: (values) => resolveClassName(className, values),
|
|
51
|
+
children: (values) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
52
|
+
typeof children === "function" ? children(values) : children,
|
|
53
|
+
/* @__PURE__ */ jsx(
|
|
54
|
+
AriaSliderTrack,
|
|
55
|
+
{
|
|
56
|
+
...sliderTrackProps,
|
|
57
|
+
className: (sliderTrackRenderProps) => cx(
|
|
58
|
+
classes.track,
|
|
59
|
+
resolveClassName(
|
|
60
|
+
sliderTrackProps.className,
|
|
61
|
+
sliderTrackRenderProps
|
|
62
|
+
)
|
|
63
|
+
),
|
|
64
|
+
children: (values2) => {
|
|
65
|
+
const left = values2.state.values.length === 1 ? 0 : values2.state.getThumbPercent(0) * 100;
|
|
66
|
+
const width = values2.state.values.length === 1 ? values2.state.getThumbPercent(0) * 100 : (values2.state.getThumbPercent(1) - values2.state.getThumbPercent(0)) * 100;
|
|
67
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
68
|
+
/* @__PURE__ */ jsx(
|
|
69
|
+
"div",
|
|
70
|
+
{
|
|
71
|
+
className: cx(
|
|
72
|
+
classes.background,
|
|
73
|
+
resolveClassName(sliderTrackBackgroundClassName, values2)
|
|
74
|
+
)
|
|
75
|
+
}
|
|
76
|
+
),
|
|
77
|
+
/* @__PURE__ */ jsx(
|
|
78
|
+
"div",
|
|
79
|
+
{
|
|
80
|
+
className: sliderTrackForeground({
|
|
81
|
+
...values2.state,
|
|
82
|
+
className: resolveClassName(
|
|
83
|
+
sliderTrackForegroundClassName,
|
|
84
|
+
values2
|
|
85
|
+
)
|
|
86
|
+
}),
|
|
87
|
+
style: { left: `${left}%`, width: `${width}%` }
|
|
88
|
+
}
|
|
89
|
+
),
|
|
90
|
+
values2.state.values.map((_, i) => {
|
|
91
|
+
const zIndex = values2.state.getThumbPercent(i === 1 ? 0 : 1) === (i === 1 ? 0 : 1) ? 2 : void 0;
|
|
92
|
+
return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
|
|
93
|
+
AriaSliderThumb,
|
|
94
|
+
{
|
|
95
|
+
index: i,
|
|
96
|
+
...sliderThumbProps,
|
|
97
|
+
className: (sliderThumbRenderProps) => {
|
|
98
|
+
sliderThumbRenderProps.isDragging;
|
|
99
|
+
return sliderThumb({
|
|
100
|
+
isDisabled: sliderThumbRenderProps.isDisabled,
|
|
101
|
+
isThumbDragging: sliderThumbRenderProps.state.isThumbDragging(i),
|
|
102
|
+
isOtherThumbDragging: sliderThumbRenderProps.state.isThumbDragging(
|
|
103
|
+
i === 1 ? 0 : 1
|
|
104
|
+
),
|
|
105
|
+
className: resolveClassName(
|
|
106
|
+
sliderThumbProps.className,
|
|
107
|
+
sliderThumbRenderProps
|
|
108
|
+
)
|
|
109
|
+
});
|
|
110
|
+
},
|
|
111
|
+
style: {
|
|
112
|
+
zIndex
|
|
113
|
+
}
|
|
114
|
+
},
|
|
115
|
+
i
|
|
116
|
+
) });
|
|
117
|
+
})
|
|
118
|
+
] });
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
)
|
|
122
|
+
] })
|
|
123
|
+
}
|
|
124
|
+
);
|
|
125
|
+
}
|
|
126
|
+
function SliderOutput(props) {
|
|
127
|
+
return /* @__PURE__ */ jsx(
|
|
128
|
+
AriaSliderOutput,
|
|
129
|
+
{
|
|
130
|
+
className: (values) => cx(
|
|
131
|
+
textClasses.text,
|
|
132
|
+
textClasses.sm,
|
|
133
|
+
textClasses.grey100,
|
|
134
|
+
resolveClassName(props.className, values)
|
|
135
|
+
),
|
|
136
|
+
children: (sliderRenderProps) => sliderRenderProps.state.values.map((_, i) => sliderRenderProps.state.getThumbValueLabel(i)).join(" – "),
|
|
137
|
+
...props
|
|
138
|
+
}
|
|
139
|
+
);
|
|
140
|
+
}
|
|
141
|
+
export {
|
|
142
|
+
Slider,
|
|
143
|
+
SliderOutput
|
|
144
|
+
};
|
|
145
|
+
|
|
146
|
+
//# sourceMappingURL=slider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"mappings":"AAiGQ,SAyBG,UAxBF,KADD;AAjGR,SAAS,KAAK,UAAU;AAQxB;AAAA,EACC,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf,eAAe;AAAA,OACT;AACP,SAAS,wBAAwB;AACjC,OAAO,iBAAiB;AACxB,OAAO,aAAa;AAEpB,MAAM,wBAAwB,IAAI;AAAA,EACjC,MAAM,QAAQ;AAAA,EACd,UAAU;AAAA,IACT,YAAY;AAAA,MACX,MAAM,QAAQ;AAAA,IACf;AAAA,EACD;AACD,CAAC;AAED,MAAM,cAAc,IAAI;AAAA,EACvB,MAAM,QAAQ;AAAA,EACd,UAAU;AAAA,IACT,iBAAiB;AAAA,MAChB,MAAM,QAAQ;AAAA,IACf;AAAA,IACA,sBAAsB;AAAA,MACrB,MAAM,QAAQ;AAAA,IACf;AAAA,IACA,YAAY;AAAA,MACX,MAAM,QAAQ;AAAA,IACf;AAAA,IACA,WAAW;AAAA,MACV,MAAM,QAAQ;AAAA,IACf;AAAA,EACD;AACD,CAAC;AAEM,SAAS,OAAoC;AAAA,EACnD;AAAA,EACA;AAAA,EACA,mBAAmB,CAAC;AAAA,EACpB,mBAAmB,CAAC;AAAA,EACpB;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GASG;AACF,SACC;AAAA,IAAC;AAAA;AAAA,MACC,GAAG;AAAA,MACJ,WAAW,CAAC,WAAW,iBAAiB,WAAW,MAAM;AAAA,MAExD,WAAC,WACD,iCACE;AAAA,eAAO,aAAa,aAAa,SAAS,MAAM,IAAI;AAAA,QACrD;AAAA,UAAC;AAAA;AAAA,YACC,GAAG;AAAA,YACJ,WAAW,CAAC,2BACX;AAAA,cACC,QAAQ;AAAA,cACR;AAAA,gBACC,iBAAiB;AAAA,gBACjB;AAAA,cACD;AAAA,YACD;AAAA,YAGA,WAACA,YAAW;AACZ,oBAAM,OACLA,QAAO,MAAM,OAAO,WAAW,IAC5B,IACAA,QAAO,MAAM,gBAAgB,CAAC,IAAI;AAEtC,oBAAM,QACLA,QAAO,MAAM,OAAO,WAAW,IAC5BA,QAAO,MAAM,gBAAgB,CAAC,IAAI,OACjCA,QAAO,MAAM,gBAAgB,CAAC,IAC/BA,QAAO,MAAM,gBAAgB,CAAC,KAC/B;AAEH,qBACC,iCACC;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACA,WAAW;AAAA,sBACV,QAAQ;AAAA,sBACR,iBAAiB,gCAAgCA,OAAM;AAAA,oBACxD;AAAA;AAAA,gBACD;AAAA,gBACA;AAAA,kBAAC;AAAA;AAAA,oBACA,WAAW,sBAAsB;AAAA,sBAChC,GAAGA,QAAO;AAAA,sBACV,WAAW;AAAA,wBACV;AAAA,wBACAA;AAAA,sBACD;AAAA,oBACD,CAAC;AAAA,oBACD,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,OAAO,GAAG,KAAK,IAAI;AAAA;AAAA,gBAC/C;AAAA,gBACCA,QAAO,MAAM,OAAO,IAAI,CAAC,GAAG,MAAM;AAClC,wBAAM,SACLA,QAAO,MAAM,gBAAgB,MAAM,IAAI,IAAI,CAAC,OAC3C,MAAM,IAAI,IAAI,KACZ,IACA;AAEJ,yBACC,gCACC;AAAA,oBAAC;AAAA;AAAA,sBAEA,OAAO;AAAA,sBACN,GAAG;AAAA,sBACJ,WAAW,CAAC,2BAA2B;AACtC,+CAAuB;AACvB,+BAAO,YAAY;AAAA,0BAClB,YAAY,uBAAuB;AAAA,0BACnC,iBACC,uBAAuB,MAAM,gBAAgB,CAAC;AAAA,0BAC/C,sBACC,uBAAuB,MAAM;AAAA,4BAC5B,MAAM,IAAI,IAAI;AAAA,0BACf;AAAA,0BACD,WAAW;AAAA,4BACV,iBAAiB;AAAA,4BACjB;AAAA,0BACD;AAAA,wBACD,CAAC;AAAA,sBACF;AAAA,sBACA,OAAO;AAAA,wBACN;AAAA,sBACD;AAAA;AAAA,oBArBK;AAAA,kBAsBN,GACD;AAAA,gBAEF,CAAC;AAAA,iBACF;AAAA,YAEF;AAAA;AAAA,QACD;AAAA,SACD;AAAA;AAAA,EAEF;AAEF;AAEO,SAAS,aAAa,OAA0B;AACtD,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAW,CAAC,WACX;AAAA,QACC,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,iBAAiB,MAAM,WAAW,MAAM;AAAA,MACzC;AAAA,MAED,UAAU,CAAC,sBACV,kBAAkB,MAAM,OACtB,IAAI,CAAC,GAAG,MAAM,kBAAkB,MAAM,mBAAmB,CAAC,CAAC,EAC3D,KAAK,KAAK;AAAA,MAEZ,GAAG;AAAA;AAAA,EACL;AAEF","names":["values"],"ignoreList":[],"sources":["../../../../src/components/slider/slider.tsx"],"sourcesContent":["import { cva, cx } from \"cva\";\nimport type {\n\tSliderProps as AriaSliderProps,\n\tSliderOutputProps,\n\tSliderThumbProps,\n\tSliderTrackProps,\n\tSliderTrackRenderProps,\n} from \"react-aria-components\";\nimport {\n\tSlider as AriaSlider,\n\tSliderOutput as AriaSliderOutput,\n\tSliderThumb as AriaSliderThumb,\n\tSliderTrack as AriaSliderTrack,\n} from \"react-aria-components\";\nimport { resolveClassName } from \"../../utilities/resolve-class-name.js\";\nimport textClasses from \"../typography/text.module\";\nimport classes from \"./slider.module\";\n\nconst sliderTrackForeground = cva({\n\tbase: classes.foreground,\n\tvariants: {\n\t\tisDisabled: {\n\t\t\ttrue: classes.disabled,\n\t\t},\n\t},\n});\n\nconst sliderThumb = cva({\n\tbase: classes.thumb,\n\tvariants: {\n\t\tisThumbDragging: {\n\t\t\ttrue: classes.thumbDragging,\n\t\t},\n\t\tisOtherThumbDragging: {\n\t\t\ttrue: classes.otherThumbDragging,\n\t\t},\n\t\tisDisabled: {\n\t\t\ttrue: classes.disabled,\n\t\t},\n\t\tisHovered: {\n\t\t\ttrue: classes.hovered,\n\t\t},\n\t},\n});\n\nexport function Slider<T extends number | number[]>({\n\tchildren,\n\tclassName,\n\tsliderThumbProps = {},\n\tsliderTrackProps = {},\n\tsliderTrackBackgroundClassName,\n\tsliderTrackForegroundClassName,\n\t...props\n}: AriaSliderProps<T> & {\n\tsliderTrackProps?: SliderTrackProps;\n\tsliderThumbProps?: SliderThumbProps;\n\tsliderTrackBackgroundClassName?:\n\t\t| string\n\t\t| ((values: SliderTrackRenderProps) => string);\n\tsliderTrackForegroundClassName?:\n\t\t| string\n\t\t| ((values: SliderTrackRenderProps) => string);\n}) {\n\treturn (\n\t\t<AriaSlider<T>\n\t\t\t{...props}\n\t\t\tclassName={(values) => resolveClassName(className, values)}\n\t\t>\n\t\t\t{(values) => (\n\t\t\t\t<>\n\t\t\t\t\t{typeof children === \"function\" ? children(values) : children}\n\t\t\t\t\t<AriaSliderTrack\n\t\t\t\t\t\t{...sliderTrackProps}\n\t\t\t\t\t\tclassName={(sliderTrackRenderProps) =>\n\t\t\t\t\t\t\tcx(\n\t\t\t\t\t\t\t\tclasses.track,\n\t\t\t\t\t\t\t\tresolveClassName(\n\t\t\t\t\t\t\t\t\tsliderTrackProps.className,\n\t\t\t\t\t\t\t\t\tsliderTrackRenderProps,\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{(values) => {\n\t\t\t\t\t\t\tconst left =\n\t\t\t\t\t\t\t\tvalues.state.values.length === 1\n\t\t\t\t\t\t\t\t\t? 0\n\t\t\t\t\t\t\t\t\t: values.state.getThumbPercent(0) * 100;\n\n\t\t\t\t\t\t\tconst width =\n\t\t\t\t\t\t\t\tvalues.state.values.length === 1\n\t\t\t\t\t\t\t\t\t? values.state.getThumbPercent(0) * 100\n\t\t\t\t\t\t\t\t\t: (values.state.getThumbPercent(1) -\n\t\t\t\t\t\t\t\t\t\t\tvalues.state.getThumbPercent(0)) *\n\t\t\t\t\t\t\t\t\t\t100;\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\t\t\t\t\tclasses.background,\n\t\t\t\t\t\t\t\t\t\t\tresolveClassName(sliderTrackBackgroundClassName, values),\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tclassName={sliderTrackForeground({\n\t\t\t\t\t\t\t\t\t\t\t...values.state,\n\t\t\t\t\t\t\t\t\t\t\tclassName: resolveClassName(\n\t\t\t\t\t\t\t\t\t\t\t\tsliderTrackForegroundClassName,\n\t\t\t\t\t\t\t\t\t\t\t\tvalues,\n\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t\tstyle={{ left: `${left}%`, width: `${width}%` }}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t{values.state.values.map((_, i) => {\n\t\t\t\t\t\t\t\t\t\tconst zIndex =\n\t\t\t\t\t\t\t\t\t\t\tvalues.state.getThumbPercent(i === 1 ? 0 : 1) ===\n\t\t\t\t\t\t\t\t\t\t\t(i === 1 ? 0 : 1)\n\t\t\t\t\t\t\t\t\t\t\t\t? 2\n\t\t\t\t\t\t\t\t\t\t\t\t: undefined;\n\n\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t\t\t<AriaSliderThumb\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\t\t\t\t\t\t\t\tindex={i}\n\t\t\t\t\t\t\t\t\t\t\t\t\t{...sliderThumbProps}\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName={(sliderThumbRenderProps) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsliderThumbRenderProps.isDragging;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn sliderThumb({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tisDisabled: sliderThumbRenderProps.isDisabled,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tisThumbDragging:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsliderThumbRenderProps.state.isThumbDragging(i),\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tisOtherThumbDragging:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsliderThumbRenderProps.state.isThumbDragging(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ti === 1 ? 0 : 1,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName: resolveClassName(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsliderThumbProps.className,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsliderThumbRenderProps,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tzIndex,\n\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}}\n\t\t\t\t\t</AriaSliderTrack>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</AriaSlider>\n\t);\n}\n\nexport function SliderOutput(props: SliderOutputProps) {\n\treturn (\n\t\t<AriaSliderOutput\n\t\t\tclassName={(values) =>\n\t\t\t\tcx(\n\t\t\t\t\ttextClasses.text,\n\t\t\t\t\ttextClasses.sm,\n\t\t\t\t\ttextClasses.grey100,\n\t\t\t\t\tresolveClassName(props.className, values),\n\t\t\t\t)\n\t\t\t}\n\t\t\tchildren={(sliderRenderProps) =>\n\t\t\t\tsliderRenderProps.state.values\n\t\t\t\t\t.map((_, i) => sliderRenderProps.state.getThumbValueLabel(i))\n\t\t\t\t\t.join(\" – \")\n\t\t\t}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import "./slider_module.css";
|
|
2
|
+
var slider_default = { "track": "track_d4960", "background": "background_d4960", "foreground": "foreground_d4960", "disabled": "disabled_d4960", "thumb": "thumb_d4960", "thumbDragging": "thumbDragging_d4960", "otherThumbDragging": "otherThumbDragging_d4960" };
|
|
3
|
+
export {
|
|
4
|
+
slider_default as default
|
|
5
|
+
};
|
|
6
|
+
|
|
7
|
+
//# sourceMappingURL=slider.module.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO;AAAsB,IAAO,iBAAQ,EAAC,SAAQ,eAAc,cAAa,oBAAmB,cAAa,oBAAmB,YAAW,kBAAiB,SAAQ,eAAc,iBAAgB,uBAAsB,sBAAqB,2BAA0B","names":[],"ignoreList":[],"sources":["../../../../src/components/slider/slider.module.css"],"sourcesContent":["import \"./slider_module.css\";export default {\"track\":\"track_d4960\",\"background\":\"background_d4960\",\"foreground\":\"foreground_d4960\",\"disabled\":\"disabled_d4960\",\"thumb\":\"thumb_d4960\",\"thumbDragging\":\"thumbDragging_d4960\",\"otherThumbDragging\":\"otherThumbDragging_d4960\"}//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
@layer lol {
|
|
2
|
+
.track_d4960 {
|
|
3
|
+
position: relative;
|
|
4
|
+
height: 1.75rem;
|
|
5
|
+
width: 100%;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.background_d4960 {
|
|
9
|
+
background-color: var(--lol-color-grey-300);
|
|
10
|
+
position: absolute;
|
|
11
|
+
top: 50%;
|
|
12
|
+
transform: translateY(-50%);
|
|
13
|
+
height: 2px;
|
|
14
|
+
width: 100%;
|
|
15
|
+
border-radius: 9999px;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.foreground_d4960 {
|
|
19
|
+
background-image: linear-gradient(to right, var(--lol-color-gold-600), var(--lol-color-gold-500));
|
|
20
|
+
position: absolute;
|
|
21
|
+
top: 50%;
|
|
22
|
+
transform: translateY(-50%);
|
|
23
|
+
height: 2px;
|
|
24
|
+
width: 100%;
|
|
25
|
+
border-radius: 9999px;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.foreground_d4960.disabled_d4960 {
|
|
29
|
+
background-image: linear-gradient(to right, #5c5b57, #5c5b57);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.track_d4960:hover .foreground_d4960 {
|
|
33
|
+
background-image: linear-gradient(to right, var(--lol-color-gold-500), var(--lol-color-gold-400), var(--lol-color-gold-200));
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.track_d4960:active .foreground_d4960 {
|
|
37
|
+
background-image: linear-gradient(to right, var(--lol-color-gold-500), var(--lol-color-gold-600), var(--lol-color-gold-600));
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.thumb_d4960 {
|
|
41
|
+
background-image: url(../../assets/normal.e4c594a1.png);
|
|
42
|
+
position: absolute;
|
|
43
|
+
top: 50%;
|
|
44
|
+
transform: translateY(-50%);
|
|
45
|
+
height: 1.75rem;
|
|
46
|
+
width: 1.75rem;
|
|
47
|
+
background-size: cover;
|
|
48
|
+
outline: none;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.thumb_d4960.disabled_d4960 {
|
|
52
|
+
background-image: url(../../assets/disabled.87ad565d.png);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.thumb_d4960.thumbDragging_d4960 {
|
|
56
|
+
background-image: url(../../assets/active.4113e6b2.png);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.track_d4960:hover .thumb_d4960:not(.thumbDragging_d4960):not(.otherThumbDragging_d4960) {
|
|
60
|
+
background-image: url(../../assets/hover.404fa456.png);
|
|
61
|
+
}
|
|
62
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { cx } from "cva";
|
|
3
|
+
import classes from "./spinner.module";
|
|
4
|
+
import spinnerImage from "../../assets/spinner.a69432f7.png";
|
|
5
|
+
function Spinner({ className }) {
|
|
6
|
+
return /* @__PURE__ */ jsx(
|
|
7
|
+
"img",
|
|
8
|
+
{
|
|
9
|
+
role: "status",
|
|
10
|
+
"aria-live": "polite",
|
|
11
|
+
"aria-label": "loading",
|
|
12
|
+
src: spinnerImage,
|
|
13
|
+
className: cx(classes.spinner, className)
|
|
14
|
+
}
|
|
15
|
+
);
|
|
16
|
+
}
|
|
17
|
+
export {
|
|
18
|
+
Spinner
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
//# sourceMappingURL=spinner.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"mappings":"AASE;AATF,SAAS,UAAU;AACnB,OAAO,aAAa;AACpB,OAAO,kBAAkB;AAKlB,SAAS,QAAQ,EAAE,UAAU,GAAiB;AACpD,SACC;AAAA,IAAC;AAAA;AAAA,MACA,MAAK;AAAA,MACL,aAAU;AAAA,MACV,cAAW;AAAA,MACX,KAAK;AAAA,MACL,WAAW,GAAG,QAAQ,SAAS,SAAS;AAAA;AAAA,EACzC;AAEF","names":[],"ignoreList":[],"sources":["../../../../src/components/spinner/spinner.tsx"],"sourcesContent":["import { cx } from \"cva\";\nimport classes from \"./spinner.module\";\nimport spinnerImage from \"../../assets/spinner.a69432f7.png\";\n\ninterface SpinnerProps {\n\tclassName?: string;\n}\nexport function Spinner({ className }: SpinnerProps) {\n\treturn (\n\t\t<img\n\t\t\trole=\"status\"\n\t\t\taria-live=\"polite\"\n\t\t\taria-label=\"loading\"\n\t\t\tsrc={spinnerImage}\n\t\t\tclassName={cx(classes.spinner, className)}\n\t\t/>\n\t);\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO;AAAuB,IAAO,kBAAQ,EAAC,WAAU,iBAAgB,QAAO,aAAY","names":[],"ignoreList":[],"sources":["../../../../src/components/spinner/spinner.module.css"],"sourcesContent":["import \"./spinner_module.css\";export default {\"spinner\":\"spinner_c734f\",\"spin\":\"spin_c734f\"}//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { cva } from "cva";
|
|
3
|
+
import { Switch as AriaSwitch } from "react-aria-components";
|
|
4
|
+
import classes from "./switch.module";
|
|
5
|
+
const track = cva({
|
|
6
|
+
base: classes.track,
|
|
7
|
+
variants: {
|
|
8
|
+
isHovered: {
|
|
9
|
+
true: classes.hover
|
|
10
|
+
},
|
|
11
|
+
isPressed: {
|
|
12
|
+
true: classes.press
|
|
13
|
+
},
|
|
14
|
+
isDisabled: {
|
|
15
|
+
true: classes.disabled
|
|
16
|
+
},
|
|
17
|
+
isSelected: {
|
|
18
|
+
true: classes.selected
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
const knob = cva({
|
|
23
|
+
base: classes.knob,
|
|
24
|
+
variants: {
|
|
25
|
+
isSelected: {
|
|
26
|
+
true: classes.selected
|
|
27
|
+
},
|
|
28
|
+
isHovered: {
|
|
29
|
+
true: classes.hover
|
|
30
|
+
},
|
|
31
|
+
isPressed: {
|
|
32
|
+
true: classes.press
|
|
33
|
+
},
|
|
34
|
+
isDisabled: {
|
|
35
|
+
true: classes.disabled
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
});
|
|
39
|
+
function Switch({
|
|
40
|
+
className,
|
|
41
|
+
placeholder,
|
|
42
|
+
children,
|
|
43
|
+
...props
|
|
44
|
+
}) {
|
|
45
|
+
return /* @__PURE__ */ jsx(
|
|
46
|
+
AriaSwitch,
|
|
47
|
+
{
|
|
48
|
+
...props,
|
|
49
|
+
className: "group inline-flex items-center gap-2 p-1 px-1.5 text-sm font-semibold text-black",
|
|
50
|
+
children: (values) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
51
|
+
/* @__PURE__ */ jsx("div", { className: track(values), children: /* @__PURE__ */ jsx("span", { className: knob(values) }) }),
|
|
52
|
+
typeof children === "function" ? children(values) : children
|
|
53
|
+
] })
|
|
54
|
+
}
|
|
55
|
+
);
|
|
56
|
+
}
|
|
57
|
+
export {
|
|
58
|
+
Switch
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
//# sourceMappingURL=switch.js.map
|