@lolmath/ui 3.2.5 → 4.1.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/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/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 +56 -4
- package/dist/es/components/accordion.js +13 -40
- package/dist/es/components/accordion.js.map +1 -1
- 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 +37 -0
- package/dist/es/components/breadcrumbs.js +16 -8
- package/dist/es/components/breadcrumbs.js.map +1 -1
- 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 +23 -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 +67 -2
- package/dist/es/components/button.js +25 -167
- package/dist/es/components/button.js.map +1 -1
- 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 +159 -0
- package/dist/es/components/card.d.ts +3 -3
- package/dist/es/components/card.js +18 -37
- package/dist/es/components/card.js.map +1 -1
- 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 +16 -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 +17 -0
- package/dist/es/components/divider.d.ts +1 -20
- package/dist/es/components/divider.js +10 -9
- package/dist/es/components/divider.js.map +1 -1
- 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 +29 -0
- package/dist/es/components/modal.js +14 -25
- package/dist/es/components/modal.js.map +1 -1
- 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 +80 -0
- package/dist/es/components/number-field.js +16 -23
- package/dist/es/components/number-field.js.map +1 -1
- 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 +54 -0
- package/dist/es/components/popover.module.css +0 -0
- package/dist/es/components/progress-bar.js +6 -21
- package/dist/es/components/progress-bar.js.map +1 -1
- 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 +33 -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 +53 -0
- package/dist/es/components/{search-field.d.ts → search-field/search-field.d.ts} +1 -1
- 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 +76 -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 +83 -0
- package/dist/es/components/slider/slider.js +32 -55
- package/dist/es/components/slider/slider.js.map +1 -1
- 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 +60 -0
- package/dist/es/components/spinner/spinner.js +4 -6
- package/dist/es/components/spinner/spinner.js.map +1 -1
- 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 +16 -0
- package/dist/es/components/switch.js +16 -51
- package/dist/es/components/switch.js.map +1 -1
- 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 +69 -0
- package/dist/es/components/tabs.d.ts +2 -2
- package/dist/es/components/tabs.js +14 -51
- package/dist/es/components/tabs.js.map +1 -1
- 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 +50 -0
- package/dist/es/components/text-area.d.ts +1 -3
- package/dist/es/components/text-area.js +7 -43
- package/dist/es/components/text-area.js.map +1 -1
- package/dist/es/components/text-field.d.ts +58 -0
- package/dist/es/components/text-field.js +17 -39
- package/dist/es/components/text-field.js.map +1 -1
- 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 +33 -0
- package/dist/es/components/toggle-button.d.ts +2 -4
- package/dist/es/components/toggle-button.js +21 -161
- package/dist/es/components/toggle-button.js.map +1 -1
- package/dist/es/components/tooltip.js +22 -28
- package/dist/es/components/tooltip.js.map +1 -1
- 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 +66 -0
- package/dist/es/components/typography/heading.d.ts +59 -44
- package/dist/es/components/typography/heading.js +14 -13
- package/dist/es/components/typography/heading.js.map +1 -1
- 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 +56 -0
- package/dist/es/components/typography/text.d.ts +2 -2
- package/dist/es/components/typography/text.js +17 -16
- package/dist/es/components/typography/text.js.map +1 -1
- 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 +64 -0
- package/dist/es/index.d.ts +7 -7
- package/dist/es/index.js +10 -7
- package/dist/es/index.js.map +1 -1
- package/dist/es/plugin.js +138 -2
- package/dist/es/plugin.js.map +1 -1
- package/dist/es/style.css +113 -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/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 +56 -4
- package/dist/lib/components/accordion.js +24 -42
- package/dist/lib/components/accordion.js.map +1 -1
- package/dist/lib/{utilities/view-transition.js → components/accordion.module.js} +7 -19
- package/dist/lib/components/accordion.module.js.map +1 -0
- package/dist/lib/components/accordion_module.css +37 -0
- package/dist/lib/components/breadcrumbs.js +26 -8
- package/dist/lib/components/breadcrumbs.js.map +1 -1
- package/dist/lib/{utilities/tv.js → components/breadcrumbs.module.js} +7 -25
- package/dist/lib/components/breadcrumbs.module.js.map +1 -0
- package/dist/lib/components/breadcrumbs_module.css +23 -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 +67 -2
- package/dist/lib/components/button.js +38 -159
- package/dist/lib/components/button.js.map +1 -1
- 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 +159 -0
- package/dist/lib/components/card.d.ts +3 -3
- package/dist/lib/components/card.js +29 -39
- package/dist/lib/components/card.js.map +1 -1
- package/dist/lib/{utilities/outline.js → components/card.module.js} +7 -10
- package/dist/lib/components/card.module.js.map +1 -0
- package/dist/lib/components/card_module.css +16 -0
- package/dist/lib/components/checkbox/checkbox.js +87 -0
- package/dist/lib/components/checkbox/checkbox.js.map +1 -0
- package/dist/lib/{utilities/css-id.js → components/checkbox/checkbox.module.js} +7 -13
- package/dist/lib/components/checkbox/checkbox.module.js.map +1 -0
- package/dist/lib/components/checkbox/checkbox_module.css +17 -0
- package/dist/lib/components/divider.d.ts +1 -20
- package/dist/lib/components/divider.js +20 -9
- package/dist/lib/components/divider.js.map +1 -1
- 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 +29 -0
- package/dist/lib/components/modal.js +23 -24
- package/dist/lib/components/modal.js.map +1 -1
- 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 +80 -0
- package/dist/lib/components/number-field.js +26 -18
- package/dist/lib/components/number-field.js.map +1 -1
- 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 +54 -0
- package/dist/lib/components/popover.module.css +0 -0
- package/dist/lib/components/progress-bar.js +16 -21
- package/dist/lib/components/progress-bar.js.map +1 -1
- 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 +33 -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 +53 -0
- package/dist/lib/components/{search-field.d.ts → search-field/search-field.d.ts} +1 -1
- 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 +76 -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 +83 -0
- package/dist/lib/components/slider/slider.js +42 -50
- package/dist/lib/components/slider/slider.js.map +1 -1
- 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 +60 -0
- package/dist/lib/components/spinner/spinner.js +15 -7
- package/dist/lib/components/spinner/spinner.js.map +1 -1
- 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 +16 -0
- package/dist/lib/components/switch.js +26 -46
- package/dist/lib/components/switch.js.map +1 -1
- 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 +69 -0
- package/dist/lib/components/tabs.d.ts +2 -2
- package/dist/lib/components/tabs.js +24 -51
- package/dist/lib/components/tabs.js.map +1 -1
- 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 +50 -0
- package/dist/lib/components/text-area.d.ts +1 -3
- package/dist/lib/components/text-area.js +7 -43
- package/dist/lib/components/text-area.js.map +1 -1
- package/dist/lib/components/text-field.d.ts +58 -0
- package/dist/lib/components/text-field.js +29 -40
- package/dist/lib/components/text-field.js.map +1 -1
- 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 +33 -0
- package/dist/lib/components/toggle-button.d.ts +2 -4
- package/dist/lib/components/toggle-button.js +31 -152
- package/dist/lib/components/toggle-button.js.map +1 -1
- package/dist/lib/components/tooltip.js +32 -28
- package/dist/lib/components/tooltip.js.map +1 -1
- 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 +66 -0
- package/dist/lib/components/typography/heading.d.ts +59 -44
- package/dist/lib/components/typography/heading.js +24 -13
- package/dist/lib/components/typography/heading.js.map +1 -1
- 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 +56 -0
- package/dist/lib/components/typography/text.d.ts +2 -2
- package/dist/lib/components/typography/text.js +27 -16
- package/dist/lib/components/typography/text.js.map +1 -1
- 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 +64 -0
- package/dist/lib/index.d.ts +7 -7
- package/dist/lib/index.js +22 -15
- package/dist/lib/index.js.map +1 -1
- package/dist/lib/plugin.js +138 -2
- package/dist/lib/plugin.js.map +1 -1
- package/dist/lib/style.css +113 -0
- package/package.json +21 -9
- package/readme.md +49 -0
- package/README.md +0 -9
- package/dist/es/components/checkbox.js +0 -54
- package/dist/es/components/checkbox.js.map +0 -1
- package/dist/es/components/radio-group.js +0 -82
- package/dist/es/components/radio-group.js.map +0 -1
- package/dist/es/components/search-field.js +0 -95
- package/dist/es/components/search-field.js.map +0 -1
- package/dist/es/components/select.js +0 -116
- package/dist/es/components/select.js.map +0 -1
- package/dist/es/components/slider/images.d.ts +0 -4
- package/dist/es/components/slider/images.js +0 -12
- package/dist/es/components/slider/images.js.map +0 -1
- package/dist/es/components/spinner/images.d.ts +0 -1
- package/dist/es/components/spinner/images.js +0 -6
- package/dist/es/components/spinner/images.js.map +0 -1
- package/dist/es/utilities/css-id.d.ts +0 -1
- package/dist/es/utilities/css-id.js +0 -9
- package/dist/es/utilities/css-id.js.map +0 -1
- package/dist/es/utilities/gradient.d.ts +0 -8
- package/dist/es/utilities/gradient.js +0 -20
- package/dist/es/utilities/gradient.js.map +0 -1
- package/dist/es/utilities/outline.d.ts +0 -1
- package/dist/es/utilities/outline.js +0 -6
- package/dist/es/utilities/outline.js.map +0 -1
- package/dist/es/utilities/theme.d.ts +0 -98
- package/dist/es/utilities/theme.js +0 -113
- package/dist/es/utilities/theme.js.map +0 -1
- package/dist/es/utilities/tv.d.ts +0 -1
- package/dist/es/utilities/tv.js +0 -21
- package/dist/es/utilities/tv.js.map +0 -1
- package/dist/es/utilities/view-transition.d.ts +0 -1
- package/dist/es/utilities/view-transition.js +0 -15
- package/dist/es/utilities/view-transition.js.map +0 -1
- package/dist/lib/components/checkbox.js +0 -76
- package/dist/lib/components/checkbox.js.map +0 -1
- package/dist/lib/components/radio-group.js +0 -104
- package/dist/lib/components/radio-group.js.map +0 -1
- package/dist/lib/components/search-field.js +0 -115
- package/dist/lib/components/search-field.js.map +0 -1
- package/dist/lib/components/select.js +0 -128
- package/dist/lib/components/select.js.map +0 -1
- package/dist/lib/components/slider/images.d.ts +0 -4
- package/dist/lib/components/slider/images.js +0 -39
- package/dist/lib/components/slider/images.js.map +0 -1
- package/dist/lib/components/spinner/images.d.ts +0 -1
- package/dist/lib/components/spinner/images.js +0 -30
- package/dist/lib/components/spinner/images.js.map +0 -1
- package/dist/lib/utilities/css-id.d.ts +0 -1
- package/dist/lib/utilities/css-id.js.map +0 -1
- package/dist/lib/utilities/gradient.d.ts +0 -8
- package/dist/lib/utilities/gradient.js +0 -51
- package/dist/lib/utilities/gradient.js.map +0 -1
- package/dist/lib/utilities/outline.d.ts +0 -1
- package/dist/lib/utilities/outline.js.map +0 -1
- package/dist/lib/utilities/theme.d.ts +0 -98
- package/dist/lib/utilities/theme.js +0 -137
- package/dist/lib/utilities/theme.js.map +0 -1
- package/dist/lib/utilities/tv.d.ts +0 -1
- package/dist/lib/utilities/tv.js.map +0 -1
- package/dist/lib/utilities/view-transition.d.ts +0 -1
- package/dist/lib/utilities/view-transition.js.map +0 -1
- /package/dist/es/components/{checkbox.d.ts → checkbox/checkbox.d.ts} +0 -0
- /package/dist/es/components/{radio-group.d.ts → radio-group/radio-group.d.ts} +0 -0
- /package/dist/es/components/{select.d.ts → select/select.d.ts} +0 -0
- /package/dist/lib/components/{checkbox.d.ts → checkbox/checkbox.d.ts} +0 -0
- /package/dist/lib/components/{radio-group.d.ts → radio-group/radio-group.d.ts} +0 -0
- /package/dist/lib/components/{select.d.ts → select/select.d.ts} +0 -0
|
@@ -3,181 +3,49 @@ import { forwardRef } from "react";
|
|
|
3
3
|
import {
|
|
4
4
|
Button as AriaButton
|
|
5
5
|
} from "react-aria-components";
|
|
6
|
-
import {
|
|
7
|
-
dimmedGradient,
|
|
8
|
-
disabledGradient,
|
|
9
|
-
goldGradient,
|
|
10
|
-
goldGradientHover,
|
|
11
|
-
goldGradientPressed,
|
|
12
|
-
hextechGradient,
|
|
13
|
-
hextechGradientHover,
|
|
14
|
-
hextechGradientPressed
|
|
15
|
-
} from "../utilities/gradient.js";
|
|
16
6
|
import { resolveClassName } from "../utilities/resolve-class-name.js";
|
|
17
|
-
import {
|
|
18
|
-
|
|
19
|
-
|
|
7
|
+
import { cva } from "cva";
|
|
8
|
+
import classes from "./button.module";
|
|
9
|
+
const button = cva({
|
|
10
|
+
base: classes.button,
|
|
20
11
|
variants: {
|
|
21
12
|
preset: {
|
|
22
|
-
primary:
|
|
23
|
-
secondary:
|
|
24
|
-
text:
|
|
25
|
-
hextech:
|
|
26
|
-
dimmed:
|
|
27
|
-
},
|
|
28
|
-
shape: {
|
|
29
|
-
round: "aspect-square rounded-full",
|
|
30
|
-
square: "aspect-square",
|
|
31
|
-
normal: ""
|
|
13
|
+
primary: classes.primary,
|
|
14
|
+
secondary: classes.secondary,
|
|
15
|
+
text: classes.text,
|
|
16
|
+
hextech: classes.hextech,
|
|
17
|
+
dimmed: classes.dimmed
|
|
32
18
|
},
|
|
33
19
|
isHovered: {
|
|
34
|
-
true:
|
|
20
|
+
true: classes.hover
|
|
35
21
|
},
|
|
36
22
|
isPressed: {
|
|
37
|
-
true:
|
|
23
|
+
true: classes.press
|
|
38
24
|
},
|
|
39
25
|
isDisabled: {
|
|
40
|
-
true:
|
|
26
|
+
true: classes.disabled
|
|
41
27
|
},
|
|
42
28
|
isFocused: {
|
|
43
29
|
true: ""
|
|
44
30
|
},
|
|
45
31
|
isFocusVisible: {
|
|
46
|
-
true:
|
|
47
|
-
},
|
|
48
|
-
thin: {
|
|
49
|
-
true: "p-px"
|
|
50
|
-
}
|
|
51
|
-
},
|
|
52
|
-
compoundVariants: [
|
|
53
|
-
{
|
|
54
|
-
preset: ["primary", "secondary"],
|
|
55
|
-
class: goldGradient
|
|
56
|
-
},
|
|
57
|
-
{
|
|
58
|
-
preset: ["primary", "secondary", "dimmed"],
|
|
59
|
-
isHovered: true,
|
|
60
|
-
class: goldGradientHover
|
|
61
|
-
},
|
|
62
|
-
{
|
|
63
|
-
preset: ["primary", "secondary", "dimmed"],
|
|
64
|
-
isPressed: true,
|
|
65
|
-
class: goldGradientPressed
|
|
66
|
-
},
|
|
67
|
-
{
|
|
68
|
-
preset: ["primary", "secondary", "dimmed"],
|
|
69
|
-
isDisabled: true,
|
|
70
|
-
class: disabledGradient
|
|
71
|
-
},
|
|
72
|
-
{
|
|
73
|
-
preset: ["primary", "secondary"],
|
|
74
|
-
isFocusVisible: true,
|
|
75
|
-
class: "outline outline-offset-2 outline-yellow-50"
|
|
76
|
-
},
|
|
77
|
-
{
|
|
78
|
-
preset: ["hextech"],
|
|
79
|
-
class: hextechGradient
|
|
80
|
-
},
|
|
81
|
-
{
|
|
82
|
-
preset: ["hextech"],
|
|
83
|
-
isHovered: true,
|
|
84
|
-
class: hextechGradientHover
|
|
85
|
-
},
|
|
86
|
-
{
|
|
87
|
-
preset: ["hextech"],
|
|
88
|
-
isPressed: true,
|
|
89
|
-
class: hextechGradientPressed
|
|
90
|
-
},
|
|
91
|
-
{
|
|
92
|
-
preset: ["hextech"],
|
|
93
|
-
isDisabled: true,
|
|
94
|
-
class: disabledGradient
|
|
95
|
-
}
|
|
96
|
-
]
|
|
97
|
-
});
|
|
98
|
-
const button = tv({
|
|
99
|
-
base: "text-lol-gold-300 font-beaufort block h-full w-full font-bold uppercase tracking-wide transition-colors duration-200",
|
|
100
|
-
variants: {
|
|
101
|
-
preset: {
|
|
102
|
-
primary: "from-lol-gold-600 via-lol-gold-600 to-lol-gold-700 bg-gradient-to-b",
|
|
103
|
-
secondary: "",
|
|
104
|
-
text: "",
|
|
105
|
-
hextech: "text-lol-blue-100",
|
|
106
|
-
dimmed: "bg-lol-grey-hextech-black"
|
|
107
|
-
},
|
|
108
|
-
isHovered: {
|
|
109
|
-
true: "text-lol-gold-100"
|
|
110
|
-
},
|
|
111
|
-
isPressed: {
|
|
112
|
-
true: "text-lol-grey-150"
|
|
113
|
-
},
|
|
114
|
-
isDisabled: {
|
|
115
|
-
true: "text-lol-grey-150"
|
|
116
|
-
},
|
|
117
|
-
isFocused: {
|
|
118
|
-
true: ""
|
|
119
|
-
},
|
|
120
|
-
isFocusVisible: {
|
|
121
|
-
true: ""
|
|
32
|
+
true: classes.focusVisible
|
|
122
33
|
},
|
|
123
34
|
shape: {
|
|
124
|
-
round:
|
|
125
|
-
square:
|
|
126
|
-
normal:
|
|
127
|
-
}
|
|
128
|
-
},
|
|
129
|
-
compoundVariants: [
|
|
130
|
-
{
|
|
131
|
-
preset: ["primary", "secondary", "hextech", "dimmed"],
|
|
132
|
-
class: "px-4 py-2"
|
|
133
|
-
},
|
|
134
|
-
{
|
|
135
|
-
preset: ["primary", "secondary", "hextech"],
|
|
136
|
-
class: "bg-lol-grey-300"
|
|
137
|
-
},
|
|
138
|
-
{
|
|
139
|
-
preset: ["hextech"],
|
|
140
|
-
isHovered: true,
|
|
141
|
-
class: "text-lol-blue-100"
|
|
142
|
-
},
|
|
143
|
-
{
|
|
144
|
-
preset: ["hextech"],
|
|
145
|
-
isPressed: true,
|
|
146
|
-
class: "text-lol-blue-400"
|
|
147
|
-
},
|
|
148
|
-
{
|
|
149
|
-
preset: ["text"],
|
|
150
|
-
shape: ["normal", "square"],
|
|
151
|
-
class: "relative after:absolute after:-bottom-2 after:-left-2 after:-right-2 after:-top-2"
|
|
35
|
+
round: classes.round,
|
|
36
|
+
square: classes.square,
|
|
37
|
+
normal: classes.normal
|
|
152
38
|
},
|
|
153
|
-
{
|
|
154
|
-
|
|
155
|
-
preset: "primary",
|
|
156
|
-
class: "from-lol-gold-600 via-lol-gold-600 to-lol-gold-500"
|
|
157
|
-
},
|
|
158
|
-
{
|
|
159
|
-
isPressed: true,
|
|
160
|
-
preset: "primary",
|
|
161
|
-
class: "from-lol-gold-600 via-lol-gold-700 to-lol-gold-700 text-lol-gold-500"
|
|
162
|
-
},
|
|
163
|
-
{
|
|
164
|
-
shape: ["round", "square"],
|
|
165
|
-
class: "flex aspect-square h-7 items-center justify-center p-0 font-black leading-none"
|
|
166
|
-
},
|
|
167
|
-
{
|
|
168
|
-
isHovered: true,
|
|
169
|
-
preset: "text",
|
|
170
|
-
shape: ["round", "square"],
|
|
171
|
-
class: "bg-lol-grey-300"
|
|
39
|
+
thin: {
|
|
40
|
+
true: classes.thin
|
|
172
41
|
}
|
|
173
|
-
|
|
42
|
+
}
|
|
174
43
|
});
|
|
175
44
|
function _Button({
|
|
176
45
|
children,
|
|
177
46
|
className,
|
|
178
47
|
preset = "secondary",
|
|
179
48
|
shape = "normal",
|
|
180
|
-
innerClassName,
|
|
181
49
|
thin = preset === "dimmed",
|
|
182
50
|
...props
|
|
183
51
|
}, ref) {
|
|
@@ -187,7 +55,7 @@ function _Button({
|
|
|
187
55
|
ref,
|
|
188
56
|
...props,
|
|
189
57
|
className: (values) => {
|
|
190
|
-
return
|
|
58
|
+
return button({
|
|
191
59
|
className: resolveClassName(className, values),
|
|
192
60
|
preset,
|
|
193
61
|
shape,
|
|
@@ -195,26 +63,16 @@ function _Button({
|
|
|
195
63
|
...values
|
|
196
64
|
});
|
|
197
65
|
},
|
|
198
|
-
children
|
|
199
|
-
return /* @__PURE__ */ jsx(
|
|
200
|
-
"span",
|
|
201
|
-
{
|
|
202
|
-
className: button({
|
|
203
|
-
className: resolveClassName(innerClassName, values),
|
|
204
|
-
preset,
|
|
205
|
-
shape,
|
|
206
|
-
...values
|
|
207
|
-
}),
|
|
208
|
-
children: typeof children === "function" ? children(values) : children
|
|
209
|
-
}
|
|
210
|
-
);
|
|
211
|
-
}
|
|
66
|
+
children
|
|
212
67
|
}
|
|
213
68
|
);
|
|
214
69
|
}
|
|
215
70
|
const Button = forwardRef(_Button);
|
|
71
|
+
Button.displayName = "Button";
|
|
216
72
|
export {
|
|
217
|
-
Button
|
|
73
|
+
Button,
|
|
74
|
+
_Button,
|
|
75
|
+
button
|
|
218
76
|
};
|
|
219
77
|
|
|
220
78
|
//# sourceMappingURL=button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"
|
|
1
|
+
{"version":3,"mappings":"AAuEE;AAvEF,SAAmB,kBAAkB;AACrC;AAAA,EACC,UAAU;AAAA,OAEJ;AACP,SAAS,wBAAwB;AACjC,SAAS,WAAW;AACpB,OAAO,aAAa;AAgBb,MAAM,SAAS,IAAI;AAAA,EACzB,MAAM,QAAQ;AAAA,EACd,UAAU;AAAA,IACT,QAAQ;AAAA,MACP,SAAS,QAAQ;AAAA,MACjB,WAAW,QAAQ;AAAA,MACnB,MAAM,QAAQ;AAAA,MACd,SAAS,QAAQ;AAAA,MACjB,QAAQ,QAAQ;AAAA,IACjB;AAAA,IACA,WAAW;AAAA,MACV,MAAM,QAAQ;AAAA,IACf;AAAA,IACA,WAAW;AAAA,MACV,MAAM,QAAQ;AAAA,IACf;AAAA,IACA,YAAY;AAAA,MACX,MAAM,QAAQ;AAAA,IACf;AAAA,IACA,WAAW;AAAA,MACV,MAAM;AAAA,IACP;AAAA,IACA,gBAAgB;AAAA,MACf,MAAM,QAAQ;AAAA,IACf;AAAA,IACA,OAAO;AAAA,MACN,OAAO,QAAQ;AAAA,MACf,QAAQ,QAAQ;AAAA,MAChB,QAAQ,QAAQ;AAAA,IACjB;AAAA,IACA,MAAM;AAAA,MACL,MAAM,QAAQ;AAAA,IACf;AAAA,EACD;AACD,CAAC;AAEM,SAAS,QACf;AAAA,EACC;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,OAAO,WAAW;AAAA,EAClB,GAAG;AACJ,GACA,KACC;AACD,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACJ,WAAW,CAAC,WAAW;AACtB,eAAO,OAAO;AAAA,UACb,WAAW,iBAAiB,WAAW,MAAM;AAAA,UAC7C;AAAA,UACA;AAAA,UACA;AAAA,UACA,GAAG;AAAA,QACJ,CAAC;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,EACF;AAEF;AAEO,MAAM,SAAS,WAAW,OAAO;AACxC,OAAO,cAAc","names":[],"ignoreList":[],"sources":["../../../src/components/button.tsx"],"sourcesContent":["import { type Ref, forwardRef } from \"react\";\nimport {\n\tButton as AriaButton,\n\ttype ButtonProps as AriaButtonProps,\n} from \"react-aria-components\";\nimport { resolveClassName } from \"../utilities/resolve-class-name.js\";\nimport { cva } from \"cva\";\nimport classes from \"./button.module\";\n\nexport type ButtonShape = \"round\" | \"square\" | \"normal\";\nexport type ButtonPreset =\n\t| \"primary\"\n\t| \"secondary\"\n\t| \"text\"\n\t| \"hextech\"\n\t| \"dimmed\";\n\ninterface ButtonProps extends AriaButtonProps {\n\tpreset?: ButtonPreset;\n\tthin?: boolean;\n\tshape?: ButtonShape;\n}\n\nexport const button = cva({\n\tbase: classes.button,\n\tvariants: {\n\t\tpreset: {\n\t\t\tprimary: classes.primary,\n\t\t\tsecondary: classes.secondary,\n\t\t\ttext: classes.text,\n\t\t\thextech: classes.hextech,\n\t\t\tdimmed: classes.dimmed,\n\t\t},\n\t\tisHovered: {\n\t\t\ttrue: classes.hover,\n\t\t},\n\t\tisPressed: {\n\t\t\ttrue: classes.press,\n\t\t},\n\t\tisDisabled: {\n\t\t\ttrue: classes.disabled,\n\t\t},\n\t\tisFocused: {\n\t\t\ttrue: \"\",\n\t\t},\n\t\tisFocusVisible: {\n\t\t\ttrue: classes.focusVisible,\n\t\t},\n\t\tshape: {\n\t\t\tround: classes.round,\n\t\t\tsquare: classes.square,\n\t\t\tnormal: classes.normal,\n\t\t},\n\t\tthin: {\n\t\t\ttrue: classes.thin,\n\t\t},\n\t},\n});\n\nexport function _Button(\n\t{\n\t\tchildren,\n\t\tclassName,\n\t\tpreset = \"secondary\",\n\t\tshape = \"normal\",\n\t\tthin = preset === \"dimmed\",\n\t\t...props\n\t}: ButtonProps,\n\tref: Ref<HTMLButtonElement>,\n) {\n\treturn (\n\t\t<AriaButton\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t\tclassName={(values) => {\n\t\t\t\treturn button({\n\t\t\t\t\tclassName: resolveClassName(className, values),\n\t\t\t\t\tpreset,\n\t\t\t\t\tshape,\n\t\t\t\t\tthin,\n\t\t\t\t\t...values,\n\t\t\t\t});\n\t\t\t}}\n\t\t>\n\t\t\t{children}\n\t\t</AriaButton>\n\t);\n}\n\nexport const Button = forwardRef(_Button);\nButton.displayName = \"Button\";\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import "./button_module.css";
|
|
2
|
+
var button_default = { "button": "button_56ea2", "text": "text_56ea2", "round": "round_56ea2", "hover": "hover_56ea2", "square": "square_56ea2", "normal": "normal_56ea2", "press": "press_56ea2", "disabled": "disabled_56ea2", "hextech": "hextech_56ea2", "dimmed": "dimmed_56ea2", "selected": "selected_56ea2", "primary": "primary_56ea2", "secondary": "secondary_56ea2", "focusVisible": "focusVisible_56ea2", "thin": "thin_56ea2" };
|
|
3
|
+
export {
|
|
4
|
+
button_default as default
|
|
5
|
+
};
|
|
6
|
+
|
|
7
|
+
//# sourceMappingURL=button.module.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO;AAAsB,IAAO,iBAAQ,EAAC,UAAS,gBAAe,QAAO,cAAa,SAAQ,eAAc,SAAQ,eAAc,UAAS,gBAAe,UAAS,gBAAe,SAAQ,eAAc,YAAW,kBAAiB,WAAU,iBAAgB,UAAS,gBAAe,YAAW,kBAAiB,WAAU,iBAAgB,aAAY,mBAAkB,gBAAe,sBAAqB,QAAO,aAAY","names":[],"ignoreList":[],"sources":["../../../src/components/button.module.css"],"sourcesContent":["import \"./button_module.css\";export default {\"button\":\"button_56ea2\",\"text\":\"text_56ea2\",\"round\":\"round_56ea2\",\"hover\":\"hover_56ea2\",\"square\":\"square_56ea2\",\"normal\":\"normal_56ea2\",\"press\":\"press_56ea2\",\"disabled\":\"disabled_56ea2\",\"hextech\":\"hextech_56ea2\",\"dimmed\":\"dimmed_56ea2\",\"selected\":\"selected_56ea2\",\"primary\":\"primary_56ea2\",\"secondary\":\"secondary_56ea2\",\"focusVisible\":\"focusVisible_56ea2\",\"thin\":\"thin_56ea2\"}//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}
|
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
.button_56ea2 {
|
|
2
|
+
border-radius: 0px;
|
|
3
|
+
border: 2px solid transparent;
|
|
4
|
+
outline: none;
|
|
5
|
+
transition: all;
|
|
6
|
+
transition-duration: 0.3s;
|
|
7
|
+
|
|
8
|
+
font-family: var(--lol-font-family-beaufort);
|
|
9
|
+
color: var(--lol-color-gold-300);
|
|
10
|
+
font-weight: 700;
|
|
11
|
+
text-transform: uppercase;
|
|
12
|
+
letter-spacing: 0.05em;
|
|
13
|
+
font-size: 1rem;
|
|
14
|
+
|
|
15
|
+
background: var(--lol-button-background-gradient) padding-box,
|
|
16
|
+
var(--lol-button-border-gradient) border-box;
|
|
17
|
+
display: inline-block;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.text_56ea2.round_56ea2.hover_56ea2, .text_56ea2.square_56ea2.hover_56ea2 {
|
|
21
|
+
--lol-button-background-gradient: var(--lol-gradient-grey-300);
|
|
22
|
+
--lol-button-border-gradient: var(--lol-gradient-transparent);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.text_56ea2.round_56ea2,
|
|
26
|
+
.text_56ea2.square_56ea2,
|
|
27
|
+
.text_56ea2.normal_56ea2 {
|
|
28
|
+
position: relative;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.text_56ea2.round_56ea2::after, .text_56ea2.square_56ea2::after, .text_56ea2.normal_56ea2::after {
|
|
32
|
+
position: absolute;
|
|
33
|
+
top: -0.5rem;
|
|
34
|
+
left: -0.5rem;
|
|
35
|
+
bottom: -0.5rem;
|
|
36
|
+
right: -0.5rem;
|
|
37
|
+
content: '';
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.hover_56ea2 {
|
|
41
|
+
color: var(--lol-color-gold-100);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.press_56ea2 {
|
|
45
|
+
color: var(--lol-color-grey-150);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.disabled_56ea2 {
|
|
49
|
+
color: var(--lol-color-grey-150);
|
|
50
|
+
cursor: default;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.hextech_56ea2 {
|
|
54
|
+
color: var(--lol-color-blue-100);
|
|
55
|
+
--lol-button-border-gradient: var(--lol-gradient-hextech);
|
|
56
|
+
--lol-button-background-gradient: var(--lol-gradient-grey-300);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.hextech_56ea2.hover_56ea2 {
|
|
60
|
+
color: var(--lol-color-blue-100);
|
|
61
|
+
--lol-button-border-gradient: var(--lol-gradient-hextech-hover);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.hextech_56ea2.press_56ea2 {
|
|
65
|
+
color: var(--lol-color-blue-400);
|
|
66
|
+
--lol-button-border-gradient: var(--lol-gradient-hextech-press);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.hextech_56ea2.disabled_56ea2 {
|
|
70
|
+
color: var(--lol-color-grey-150);
|
|
71
|
+
--lol-button-border-gradient: var(--lol-gradient-disabled);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.dimmed_56ea2 {
|
|
75
|
+
--lol-button-background-gradient: var(--lol-gradient-hextech-black);
|
|
76
|
+
--lol-button-border-gradient: var(--lol-gradient-grey-300);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.dimmed_56ea2.selected_56ea2 {
|
|
80
|
+
--lol-button-border-gradient: var(--lol-gradient-gold);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.primary_56ea2 {
|
|
84
|
+
--lol-button-border-gradient: var(--lol-gradient-gold);
|
|
85
|
+
--lol-button-background-gradient: linear-gradient(to top, var(--lol-color-gold-600), var(--lol-color-gold-600), var(--lol-color-gold-700));
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.primary_56ea2.hover_56ea2 {
|
|
89
|
+
--lol-button-background-gradient: linear-gradient(to top, var(--lol-color-gold-600), var(--lol-color-gold-600), var(--lol-color-gold-500));
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.primary_56ea2.press_56ea2 {
|
|
93
|
+
--lol-button-background-gradient: linear-gradient(to top, var(--lol-color-gold-600), var(--lol-color-gold-700), var(--lol-color-gold-700));
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.primary_56ea2,
|
|
97
|
+
.secondary_56ea2,
|
|
98
|
+
.hextech_56ea2,
|
|
99
|
+
.dimmed_56ea2 {
|
|
100
|
+
padding: 0.5rem 1rem;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.secondary_56ea2 {
|
|
104
|
+
--lol-button-border-gradient: var(--lol-gradient-gold);
|
|
105
|
+
--lol-button-background-gradient: var(--lol-gradient-grey-300);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.primary_56ea2.hover_56ea2,
|
|
109
|
+
.secondary_56ea2.hover_56ea2,
|
|
110
|
+
.dimmed_56ea2.hover_56ea2 {
|
|
111
|
+
--lol-button-border-gradient: var(--lol-gradient-gold-hover);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
.primary_56ea2.press_56ea2,
|
|
116
|
+
.secondary_56ea2.press_56ea2,
|
|
117
|
+
.dimmed_56ea2.press_56ea2 {
|
|
118
|
+
--lol-button-border-gradient: var(--lol-gradient-gold-press);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
|
|
122
|
+
.primary_56ea2.disabled_56ea2,
|
|
123
|
+
.secondary_56ea2.disabled_56ea2,
|
|
124
|
+
.dimmed_56ea2.disabled_56ea2 {
|
|
125
|
+
--lol-button-border-gradient: var(--lol-gradient-disabled);
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.primary_56ea2.focusVisible_56ea2,
|
|
129
|
+
.secondary_56ea2.focusVisible_56ea2 {
|
|
130
|
+
outline-style: solid;
|
|
131
|
+
outline-offset: 2px;
|
|
132
|
+
outline-color: var(--lol-color-gold-400);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.round_56ea2 {
|
|
136
|
+
border-radius: 9999px;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.round_56ea2,
|
|
140
|
+
.square_56ea2 {
|
|
141
|
+
display: flex;
|
|
142
|
+
aspect-ratio: 1/1;
|
|
143
|
+
height: 2rem;
|
|
144
|
+
align-items: center;
|
|
145
|
+
justify-content: center;
|
|
146
|
+
padding: 0px;
|
|
147
|
+
font-weight: 900;
|
|
148
|
+
line-height: 1;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.thin_56ea2 {
|
|
152
|
+
border-width: 1px;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.selected_56ea2 {
|
|
156
|
+
--lol-button-background-gradient: var(--lol-gradient-hextech);
|
|
157
|
+
box-shadow: inset 0 2px 4px 0 var(--lol-color-grey-300);
|
|
158
|
+
color: var(--lol-color-blue-100);
|
|
159
|
+
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { ComponentProps } from "react";
|
|
2
2
|
export interface CardProps extends ComponentProps<"div"> {
|
|
3
|
-
|
|
3
|
+
radius?: string;
|
|
4
|
+
borderWidth?: string;
|
|
4
5
|
}
|
|
5
|
-
export declare function Card({
|
|
6
|
-
export declare function borderInverted(r: string): string;
|
|
6
|
+
export declare function Card({ className, style, radius, borderWidth, ...props }: CardProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,51 +1,32 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
4
|
-
const
|
|
5
|
-
base:
|
|
6
|
-
variants: {}
|
|
2
|
+
import { cva } from "cva";
|
|
3
|
+
import classes from "./card.module";
|
|
4
|
+
const card = cva({
|
|
5
|
+
base: classes.card
|
|
7
6
|
});
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
7
|
+
function Card({
|
|
8
|
+
className,
|
|
9
|
+
style,
|
|
10
|
+
radius = "1rem",
|
|
11
|
+
borderWidth = "2px",
|
|
12
|
+
...props
|
|
13
|
+
}) {
|
|
14
14
|
return /* @__PURE__ */ jsx(
|
|
15
15
|
"div",
|
|
16
16
|
{
|
|
17
|
-
|
|
18
|
-
className: cardBorder({
|
|
19
|
-
className: borderProps?.className
|
|
20
|
-
}),
|
|
17
|
+
className: card({ className }),
|
|
21
18
|
style: {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
19
|
+
// @ts-ignore: Css variable
|
|
20
|
+
"--lol-card-radius": radius,
|
|
21
|
+
"--lol-card-border-width": borderWidth,
|
|
22
|
+
...style ?? {}
|
|
25
23
|
},
|
|
26
|
-
|
|
27
|
-
"div",
|
|
28
|
-
{
|
|
29
|
-
className: inner({
|
|
30
|
-
className
|
|
31
|
-
}),
|
|
32
|
-
style: {
|
|
33
|
-
WebkitMask: borderInverted(r),
|
|
34
|
-
mask: borderInverted(r),
|
|
35
|
-
...style ?? {}
|
|
36
|
-
},
|
|
37
|
-
children
|
|
38
|
-
}
|
|
39
|
-
)
|
|
24
|
+
...props
|
|
40
25
|
}
|
|
41
26
|
);
|
|
42
27
|
}
|
|
43
|
-
function borderInverted(r) {
|
|
44
|
-
return `radial-gradient(${r} at ${r} ${r},#0000 98%,#000) -${r} -${r}`;
|
|
45
|
-
}
|
|
46
28
|
export {
|
|
47
|
-
Card
|
|
48
|
-
borderInverted
|
|
29
|
+
Card
|
|
49
30
|
};
|
|
50
31
|
|
|
51
32
|
//# sourceMappingURL=card.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"
|
|
1
|
+
{"version":3,"mappings":"AAqBE;AArBF,SAAS,WAAW;AAEpB,OAAO,aAAa;AAOpB,MAAM,OAAO,IAAI;AAAA,EAChB,MAAM,QAAQ;AACf,CAAC;AAEM,SAAS,KAAK;AAAA,EACpB;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,cAAc;AAAA,EACd,GAAG;AACJ,GAAc;AACb,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAW,KAAK,EAAE,UAAU,CAAC;AAAA,MAC7B,OAAO;AAAA;AAAA,QAEN,qBAAqB;AAAA,QACrB,2BAA2B;AAAA,QAC3B,GAAI,SAAS,CAAC;AAAA,MACf;AAAA,MACC,GAAG;AAAA;AAAA,EACL;AAEF","names":[],"ignoreList":[],"sources":["../../../src/components/card.tsx"],"sourcesContent":["import { cva } from \"cva\";\nimport type { ComponentProps } from \"react\";\nimport classes from \"./card.module\";\n\nexport interface CardProps extends ComponentProps<\"div\"> {\n\tradius?: string;\n\tborderWidth?: string;\n}\n\nconst card = cva({\n\tbase: classes.card,\n});\n\nexport function Card({\n\tclassName,\n\tstyle,\n\tradius = \"1rem\",\n\tborderWidth = \"2px\",\n\t...props\n}: CardProps) {\n\treturn (\n\t\t<div\n\t\t\tclassName={card({ className })}\n\t\t\tstyle={{\n\t\t\t\t// @ts-ignore: Css variable\n\t\t\t\t\"--lol-card-radius\": radius,\n\t\t\t\t\"--lol-card-border-width\": borderWidth,\n\t\t\t\t...(style ?? {}),\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 @@
|
|
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO;AAAoB,IAAO,eAAQ,EAAC,QAAO,aAAY","names":[],"ignoreList":[],"sources":["../../../src/components/card.module.css"],"sourcesContent":["import \"./card_module.css\";export default {\"card\":\"card_dfb9a\"}//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
.card_dfb9a {
|
|
2
|
+
position: relative;
|
|
3
|
+
--mask:
|
|
4
|
+
radial-gradient(var(--lol-card-radius) at var(--lol-card-radius) var(--lol-card-radius), #0000 calc(98% - var(--lol-card-border-width)), #000 calc(100% - var(--lol-card-border-width)) 98%, #0000) calc(var(--lol-card-radius) * -1) calc(var(--lol-card-radius) * -1),
|
|
5
|
+
linear-gradient(90deg, #000 calc(var(--lol-card-border-width) * 2), #0000 0) calc(var(--lol-card-border-width) * -1) 50% /100% calc(100% - calc(var(--lol-card-radius) * 2) + var(--lol-card-border-width)) repeat-x,
|
|
6
|
+
linear-gradient(#000 calc(var(--lol-card-border-width) * 2), #0000 0) 50% calc(var(--lol-card-border-width) * -1)/calc(100% - calc(var(--lol-card-radius) * 2) + var(--lol-card-border-width)) 100% repeat-y;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.card_dfb9a:before {
|
|
10
|
+
content: "";
|
|
11
|
+
position: absolute;
|
|
12
|
+
inset: 0;
|
|
13
|
+
background-image: var(--lol-gradient-gold);
|
|
14
|
+
mask: var(--mask);
|
|
15
|
+
pointer-events: none;
|
|
16
|
+
}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { cva } from "cva";
|
|
3
|
+
import {
|
|
4
|
+
Checkbox as AriaCheckbox
|
|
5
|
+
} from "react-aria-components";
|
|
6
|
+
import { resolveClassName } from "../../utilities/resolve-class-name.js";
|
|
7
|
+
import classes from "./checkbox.module";
|
|
8
|
+
import imageCheckedHover from "../../assets/checked-hover.d13cb1b3.png";
|
|
9
|
+
import imageChecked from "../../assets/checked.3258b858.png";
|
|
10
|
+
import imageIndeterminateHover from "../../assets/indeterminate-hover.68fcbcda.png";
|
|
11
|
+
import imageIndeterminate from "../../assets/indeterminate.90d6dc3e.png";
|
|
12
|
+
import imageUncheckedHover from "../../assets/unchecked-hover.c8e5f2d0.png";
|
|
13
|
+
import imageUnchecked from "../../assets/unchecked.cc033abe.png";
|
|
14
|
+
const checkbox = cva({
|
|
15
|
+
base: classes.checkbox,
|
|
16
|
+
variants: {
|
|
17
|
+
isHovered: {
|
|
18
|
+
true: classes.hover
|
|
19
|
+
},
|
|
20
|
+
isDisabled: {
|
|
21
|
+
true: classes.disabled
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
});
|
|
25
|
+
function Checkbox({ children, className, ...props }) {
|
|
26
|
+
return /* @__PURE__ */ jsx(
|
|
27
|
+
AriaCheckbox,
|
|
28
|
+
{
|
|
29
|
+
className: (values) => {
|
|
30
|
+
return checkbox({
|
|
31
|
+
className: resolveClassName(className, values),
|
|
32
|
+
...values
|
|
33
|
+
});
|
|
34
|
+
},
|
|
35
|
+
...props,
|
|
36
|
+
children: (values) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
37
|
+
/* @__PURE__ */ jsx(
|
|
38
|
+
"img",
|
|
39
|
+
{
|
|
40
|
+
className: "h-3.5 w-3.5",
|
|
41
|
+
"aria-hidden": "true",
|
|
42
|
+
alt: "",
|
|
43
|
+
src: values.isHovered ? values.isIndeterminate ? imageIndeterminateHover : values.isSelected ? imageCheckedHover : imageUncheckedHover : values.isIndeterminate ? imageIndeterminate : values.isSelected ? imageChecked : imageUnchecked
|
|
44
|
+
}
|
|
45
|
+
),
|
|
46
|
+
typeof children === "function" ? children(values) : children
|
|
47
|
+
] })
|
|
48
|
+
}
|
|
49
|
+
);
|
|
50
|
+
}
|
|
51
|
+
export {
|
|
52
|
+
Checkbox
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
//# sourceMappingURL=checkbox.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"mappings":"AAsCI,mBACC,KADD;AAtCJ,SAAS,WAAW;AACpB;AAAA,EACC,YAAY;AAAA,OAEN;AACP,SAAS,wBAAwB;AACjC,OAAO,aAAa;AACpB,OAAO,uBAAuB;AAC9B,OAAO,kBAAkB;AACzB,OAAO,6BAA6B;AACpC,OAAO,wBAAwB;AAC/B,OAAO,yBAAyB;AAChC,OAAO,oBAAoB;AAE3B,MAAM,WAAW,IAAI;AAAA,EACpB,MAAM,QAAQ;AAAA,EACd,UAAU;AAAA,IACT,WAAW;AAAA,MACV,MAAM,QAAQ;AAAA,IACf;AAAA,IACA,YAAY;AAAA,MACX,MAAM,QAAQ;AAAA,IACf;AAAA,EACD;AACD,CAAC;AAEM,SAAS,SAAS,EAAE,UAAU,WAAW,GAAG,MAAM,GAAkB;AAC1E,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAW,CAAC,WAAW;AACtB,eAAO,SAAS;AAAA,UACf,WAAW,iBAAiB,WAAW,MAAM;AAAA,UAC7C,GAAG;AAAA,QACJ,CAAC;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,WAAC,WACD,iCACC;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV,eAAY;AAAA,YACZ,KAAI;AAAA,YACJ,KACC,OAAO,YACJ,OAAO,kBACN,0BACA,OAAO,aACN,oBACA,sBACF,OAAO,kBACN,qBACA,OAAO,aACN,eACA;AAAA;AAAA,QAEP;AAAA,QACC,OAAO,aAAa,aAAa,SAAS,MAAM,IAAI;AAAA,SACtD;AAAA;AAAA,EAEF;AAEF","names":[],"ignoreList":[],"sources":["../../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import { cva } from \"cva\";\nimport {\n\tCheckbox as AriaCheckbox,\n\ttype CheckboxProps,\n} from \"react-aria-components\";\nimport { resolveClassName } from \"../../utilities/resolve-class-name.js\";\nimport classes from \"./checkbox.module\";\nimport imageCheckedHover from \"../../assets/checked-hover.d13cb1b3.png\";\nimport imageChecked from \"../../assets/checked.3258b858.png\";\nimport imageIndeterminateHover from \"../../assets/indeterminate-hover.68fcbcda.png\";\nimport imageIndeterminate from \"../../assets/indeterminate.90d6dc3e.png\";\nimport imageUncheckedHover from \"../../assets/unchecked-hover.c8e5f2d0.png\";\nimport imageUnchecked from \"../../assets/unchecked.cc033abe.png\";\n\nconst checkbox = cva({\n\tbase: classes.checkbox,\n\tvariants: {\n\t\tisHovered: {\n\t\t\ttrue: classes.hover,\n\t\t},\n\t\tisDisabled: {\n\t\t\ttrue: classes.disabled,\n\t\t},\n\t},\n});\n\nexport function Checkbox({ children, className, ...props }: CheckboxProps) {\n\treturn (\n\t\t<AriaCheckbox\n\t\t\tclassName={(values) => {\n\t\t\t\treturn checkbox({\n\t\t\t\t\tclassName: resolveClassName(className, values),\n\t\t\t\t\t...values,\n\t\t\t\t});\n\t\t\t}}\n\t\t\t{...props}\n\t\t>\n\t\t\t{(values) => (\n\t\t\t\t<>\n\t\t\t\t\t<img\n\t\t\t\t\t\tclassName=\"h-3.5 w-3.5\"\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\tsrc={\n\t\t\t\t\t\t\tvalues.isHovered\n\t\t\t\t\t\t\t\t? values.isIndeterminate\n\t\t\t\t\t\t\t\t\t? imageIndeterminateHover\n\t\t\t\t\t\t\t\t\t: values.isSelected\n\t\t\t\t\t\t\t\t\t\t? imageCheckedHover\n\t\t\t\t\t\t\t\t\t\t: imageUncheckedHover\n\t\t\t\t\t\t\t\t: values.isIndeterminate\n\t\t\t\t\t\t\t\t\t? imageIndeterminate\n\t\t\t\t\t\t\t\t\t: values.isSelected\n\t\t\t\t\t\t\t\t\t\t? imageChecked\n\t\t\t\t\t\t\t\t\t\t: imageUnchecked\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t\t{typeof children === \"function\" ? children(values) : children}\n\t\t\t\t</>\n\t\t\t)}\n\t\t</AriaCheckbox>\n\t);\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO;AAAwB,IAAO,mBAAQ,EAAC,YAAW,kBAAiB,SAAQ,eAAc,YAAW,iBAAgB","names":[],"ignoreList":[],"sources":["../../../../src/components/checkbox/checkbox.module.css"],"sourcesContent":["import \"./checkbox_module.css\";export default {\"checkbox\":\"checkbox_8a1c7\",\"hover\":\"hover_8a1c7\",\"disabled\":\"disabled_8a1c7\"}//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}
|