@lolmath/ui 3.2.2 → 3.2.3
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/components/accordion.d.ts +2 -2
- package/dist/es/components/accordion.js +3 -3
- package/dist/es/components/accordion.js.map +1 -1
- package/dist/es/components/button.js +3 -3
- package/dist/es/components/button.js.map +1 -1
- package/dist/es/components/card.js +2 -2
- package/dist/es/components/card.js.map +1 -1
- package/dist/es/components/checkbox.js +2 -2
- package/dist/es/components/checkbox.js.map +1 -1
- package/dist/es/components/divider.d.ts +2 -26
- package/dist/es/components/divider.js +1 -1
- package/dist/es/components/divider.js.map +1 -1
- package/dist/es/components/modal.js +3 -3
- package/dist/es/components/modal.js.map +1 -1
- package/dist/es/components/number-field.js +2 -2
- package/dist/es/components/number-field.js.map +1 -1
- package/dist/es/components/popover.d.ts +1 -0
- package/dist/es/components/progress-bar.js +2 -2
- package/dist/es/components/progress-bar.js.map +1 -1
- package/dist/es/components/radio-group.js +2 -2
- package/dist/es/components/radio-group.js.map +1 -1
- package/dist/es/components/search-field.js +3 -3
- package/dist/es/components/search-field.js.map +1 -1
- package/dist/es/components/select.js +4 -4
- package/dist/es/components/select.js.map +1 -1
- package/dist/es/components/slider/slider.js +3 -3
- package/dist/es/components/slider/slider.js.map +1 -1
- package/dist/es/components/spinner/spinner.js +2 -2
- package/dist/es/components/spinner/spinner.js.map +1 -1
- package/dist/es/components/switch.js +2 -2
- package/dist/es/components/switch.js.map +1 -1
- package/dist/es/components/tabs.js +4 -4
- package/dist/es/components/tabs.js.map +1 -1
- package/dist/es/components/text-area.js +3 -3
- package/dist/es/components/text-area.js.map +1 -1
- package/dist/es/components/text-field.js +3 -3
- package/dist/es/components/text-field.js.map +1 -1
- package/dist/es/components/toggle-button.js +3 -3
- package/dist/es/components/toggle-button.js.map +1 -1
- package/dist/es/components/tooltip.js +3 -3
- package/dist/es/components/tooltip.js.map +1 -1
- package/dist/es/components/typography/heading.js +1 -1
- package/dist/es/components/typography/heading.js.map +1 -1
- package/dist/es/components/typography/text.js +1 -1
- package/dist/es/components/typography/text.js.map +1 -1
- package/dist/es/index.d.ts +23 -23
- package/dist/es/index.js +23 -23
- package/dist/es/index.js.map +1 -1
- package/dist/es/plugin.d.ts +2 -2
- package/dist/es/plugin.js +2 -2
- package/dist/es/plugin.js.map +1 -1
- package/dist/es/utilities/theme.js.map +1 -1
- package/dist/es/utilities/tv.js +1 -1
- package/dist/es/utilities/tv.js.map +1 -1
- package/dist/lib/components/accordion.d.ts +2 -2
- package/dist/lib/components/{accordion.cjs → accordion.js} +5 -3
- package/dist/lib/components/accordion.js.map +1 -0
- package/dist/lib/components/{button.cjs → button.js} +5 -3
- package/dist/lib/components/button.js.map +1 -0
- package/dist/lib/components/{card.cjs → card.js} +4 -2
- package/dist/lib/components/card.js.map +1 -0
- package/dist/lib/components/{checkbox.cjs → checkbox.js} +4 -2
- package/dist/lib/components/checkbox.js.map +1 -0
- package/dist/lib/components/divider.d.ts +2 -26
- package/dist/lib/components/{divider.cjs → divider.js} +3 -1
- package/dist/lib/components/divider.js.map +1 -0
- package/dist/lib/components/{modal.cjs → modal.js} +5 -3
- package/dist/lib/components/modal.js.map +1 -0
- package/dist/lib/components/{number-field.cjs → number-field.js} +4 -2
- package/dist/lib/components/number-field.js.map +1 -0
- package/dist/lib/components/popover.d.ts +1 -0
- package/dist/lib/components/{progress-bar.cjs → progress-bar.js} +4 -2
- package/dist/lib/components/progress-bar.js.map +1 -0
- package/dist/lib/components/{radio-group.cjs → radio-group.js} +4 -2
- package/dist/lib/components/radio-group.js.map +1 -0
- package/dist/lib/components/{search-field.cjs → search-field.js} +5 -3
- package/dist/lib/components/search-field.js.map +1 -0
- package/dist/lib/components/{select.cjs → select.js} +6 -4
- package/dist/lib/components/select.js.map +1 -0
- package/dist/lib/components/slider/{images.cjs → images.js} +2 -0
- package/dist/lib/components/slider/images.js.map +1 -0
- package/dist/lib/components/slider/{slider.cjs → slider.js} +5 -3
- package/dist/lib/components/slider/slider.js.map +1 -0
- package/dist/lib/components/spinner/{images.cjs → images.js} +2 -0
- package/dist/lib/components/spinner/images.js.map +1 -0
- package/dist/lib/components/spinner/{spinner.cjs → spinner.js} +5 -3
- package/dist/lib/components/spinner/spinner.js.map +1 -0
- package/dist/lib/components/{switch.cjs → switch.js} +4 -2
- package/dist/lib/components/switch.js.map +1 -0
- package/dist/lib/components/{tabs.cjs → tabs.js} +6 -4
- package/dist/lib/components/tabs.js.map +1 -0
- package/dist/lib/components/{text-area.cjs → text-area.js} +5 -3
- package/dist/lib/components/text-area.js.map +1 -0
- package/dist/lib/components/{text-field.cjs → text-field.js} +5 -3
- package/dist/lib/components/text-field.js.map +1 -0
- package/dist/lib/components/{toggle-button.cjs → toggle-button.js} +5 -3
- package/dist/lib/components/toggle-button.js.map +1 -0
- package/dist/lib/components/{tooltip.cjs → tooltip.js} +5 -3
- package/dist/lib/components/tooltip.js.map +1 -0
- package/dist/lib/components/typography/{heading.cjs → heading.js} +3 -1
- package/dist/lib/components/typography/heading.js.map +1 -0
- package/dist/lib/components/typography/{text.cjs → text.js} +3 -1
- package/dist/lib/components/typography/text.js.map +1 -0
- package/dist/lib/index.d.ts +23 -23
- package/dist/lib/index.js +68 -0
- package/dist/lib/index.js.map +1 -0
- package/dist/lib/plugin.d.ts +2 -2
- package/dist/lib/{plugin.cjs → plugin.js} +4 -2
- package/dist/lib/plugin.js.map +1 -0
- package/dist/lib/utilities/{css-id.cjs → css-id.js} +2 -0
- package/dist/lib/utilities/css-id.js.map +1 -0
- package/dist/lib/utilities/{gradient.cjs → gradient.js} +2 -0
- package/dist/lib/utilities/gradient.js.map +1 -0
- package/dist/lib/utilities/{outline.cjs → outline.js} +2 -0
- package/dist/lib/utilities/outline.js.map +1 -0
- package/dist/lib/utilities/{resolve-class-name.cjs → resolve-class-name.js} +2 -0
- package/dist/lib/utilities/resolve-class-name.js.map +1 -0
- package/dist/lib/utilities/{theme.cjs → theme.js} +2 -0
- package/dist/lib/utilities/theme.js.map +1 -0
- package/dist/lib/utilities/{tv.cjs → tv.js} +3 -1
- package/dist/lib/utilities/tv.js.map +1 -0
- package/dist/lib/utilities/{view-transition.cjs → view-transition.js} +2 -0
- package/dist/lib/utilities/view-transition.js.map +1 -0
- package/package.json +5 -8
- package/dist/lib/components/accordion.d.cts +0 -22
- package/dist/lib/components/button.d.cts +0 -11
- package/dist/lib/components/card.d.cts +0 -6
- package/dist/lib/components/checkbox.d.cts +0 -2
- package/dist/lib/components/divider.d.cts +0 -49
- package/dist/lib/components/modal.d.cts +0 -13
- package/dist/lib/components/number-field.d.cts +0 -10
- package/dist/lib/components/popover.d.cts +0 -0
- package/dist/lib/components/progress-bar.d.cts +0 -6
- package/dist/lib/components/radio-group.d.cts +0 -3
- package/dist/lib/components/search-field.d.cts +0 -6
- package/dist/lib/components/select.d.cts +0 -11
- package/dist/lib/components/slider/images.d.cts +0 -4
- package/dist/lib/components/slider/slider.d.cts +0 -8
- package/dist/lib/components/spinner/images.d.cts +0 -1
- package/dist/lib/components/spinner/spinner.d.cts +0 -5
- package/dist/lib/components/switch.d.cts +0 -4
- package/dist/lib/components/tabs.d.cts +0 -6
- package/dist/lib/components/text-area.d.cts +0 -6
- package/dist/lib/components/text-field.d.cts +0 -6
- package/dist/lib/components/toggle-button.d.cts +0 -12
- package/dist/lib/components/tooltip.d.cts +0 -3
- package/dist/lib/components/typography/heading.d.cts +0 -9
- package/dist/lib/components/typography/text.d.cts +0 -17
- package/dist/lib/index.cjs +0 -66
- package/dist/lib/index.d.cts +0 -23
- package/dist/lib/plugin.d.cts +0 -4
- package/dist/lib/utilities/css-id.d.cts +0 -1
- package/dist/lib/utilities/gradient.d.cts +0 -8
- package/dist/lib/utilities/outline.d.cts +0 -1
- package/dist/lib/utilities/resolve-class-name.d.cts +0 -1
- package/dist/lib/utilities/theme.d.cts +0 -98
- package/dist/lib/utilities/tv.d.cts +0 -1
- package/dist/lib/utilities/view-transition.d.cts +0 -1
- /package/dist/lib/components/{popover.cjs → popover.js} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AA8DQ,mBASI,KAPF,YAFF;AA9DR;AAAA,EACE,eAAe;AAAA,EACf,SAAS;AAAA,EACT,UAAU;AAAA,OAEL;AACP,SAAS,cAAc,wBAAwB;AAE/C,SAAS,wBAAwB;AACjC,SAAS,UAAU;AAEnB,MAAM,oBAAoB,GAAG;AAAA,EAC3B,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,YAAY;AAAA,MACV,MAAM;AAAA,IACR;AAAA,EACF;AACF,CAAC;AAED,MAAM,mBAAmB,GAAG;AAAA,EAC1B,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,YAAY;AAAA,MACV,MAAM;AAAA,IACR;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOF;AACF,CAAC;AAED,MAAM,oBAAoB,GAAG;AAAA,EAC3B,MAAM;AAAA,EACN,UAAU;AAAA,IACR,WAAW,EAAE,MAAM,oBAAoB;AAAA,IACvC,WAAW,EAAE,MAAM,oBAAoB;AAAA,EACzC;AACF,CAAC;AAEM,SAAS,YAAY;AAAA,EAC1B,aAAa,CAAC;AAAA,EACd,cAAc,CAAC;AAAA,EACf;AAAA,EACA,GAAG;AACL,GAGG;AACD,SACE,oBAAC,mBAAiB,GAAG,OAClB,WAAC,WACA,iCACG;AAAA,WAAO,aAAa,aAAa,SAAS,MAAM,IAAI;AAAA,IACrD;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,WAAW,kBAAkB;AAAA,UAC3B,GAAG;AAAA,UACH,WAAW,iBAAiB,YAAY,WAAW,MAAM;AAAA,QAC3D,CAAC;AAAA,QAED;AAAA;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ,WAAW,CAACA,YACV,iBAAiB;AAAA,gBACf,GAAGA;AAAA,gBACH,WAAW,iBAAiB,WAAW,WAAWA,OAAM;AAAA,cAC1D,CAAC;AAAA,cAEH,MAAK;AAAA,cACL,OAAO;AAAA,gBACL,iBACE;AAAA,gBACF,kBAAkB;AAAA,gBAClB,oBAAoB;AAAA,gBACpB,gBAAgB;AAAA,cAClB;AAAA;AAAA,UACF;AAAA,UACC,OAAO,MAAM,MAAM,SAAS,KAAK,CAAC,OAAO,cACxC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,CAAC,iBAAiB,kBAAkB,YAAY;AAAA,cAC5D;AAAA;AAAA,UAED;AAAA;AAAA;AAAA,IAEJ;AAAA,KACF,GAEJ;AAEJ","names":["values"],"sources":["../../../src/components/search-field.tsx"],"sourcesContent":["import {\n SearchField as AriaSearchField,\n Input as AriaInput,\n Button as AriaButton,\n type SearchFieldProps as AriaSearchFieldProps,\n} from \"react-aria-components\";\nimport { goldGradient, disabledGradient } from \"../utilities/gradient\";\nimport { ComponentProps } from \"react\";\nimport { resolveClassName } from \"../utilities/resolve-class-name\";\nimport { tv } from \"../utilities/tv\";\n\nconst searchFieldBorder = tv({\n base: [\n \"flex bg-gradient-to-t p-px outline-none\",\n goldGradient,\n \"focus-within:from-lol-gold-300 focus-within:via-lol-gold-200 focus-within:to-lol-gold-100\",\n ],\n variants: {\n isDisabled: {\n true: disabledGradient,\n },\n },\n});\n\nconst searchFieldInput = tv({\n base: [\n \"bg-lol-grey-hextech-black min-h-full w-full px-3 py-2 pl-6 outline-none\",\n \"text-lol-gold-100 font-spiegel text-xs font-medium tracking-wide\",\n ],\n variants: {\n isDisabled: {\n true: \"text-lol-grey-150\",\n },\n\n // TODO: make sure both the background image of the gradient and the search\n // icon are displayed\n // isFocused: {\n // true: \"from-lol-grey-200 via-lol-grey-300 to-lol-grey-300 bg-gradient-to-t\",\n // },\n },\n});\n\nconst searchFieldButton = tv({\n base: \"bg-lol-grey-hextech-black text-lol-gold-300 px-4 text-xs font-black\",\n variants: {\n isHovered: { true: \"text-lol-gold-100\" },\n isPressed: { true: \"text-lol-gold-600\" },\n },\n});\n\nexport function SearchField({\n inputProps = {},\n borderProps = {},\n children,\n ...props\n}: AriaSearchFieldProps & {\n inputProps?: ComponentProps<typeof AriaInput>;\n borderProps?: ComponentProps<\"div\">;\n}) {\n return (\n <AriaSearchField {...props}>\n {(values) => (\n <>\n {typeof children === \"function\" ? children(values) : children}\n <div\n {...borderProps}\n className={searchFieldBorder({\n ...values,\n className: resolveClassName(borderProps.className, values),\n })}\n >\n <AriaInput\n {...inputProps}\n className={(values) =>\n searchFieldInput({\n ...values,\n className: resolveClassName(inputProps.className, values),\n })\n }\n type=\"text\"\n style={{\n backgroundImage:\n \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAERElEQVR42uycz0tVQRTH54lamBakLUStQKhEW6V/gC2qhRgRqJURVJj9oBL7oWVBWFj0O/pd2EbJ3ARt2uW6tFUWZkhkiYQVSBZk6esc7rkgkXfm3rkzb957c+CL8Obcc+d+5vcPjESjUWZtdkuxCCwgC8gCsoAsIAvIArKArFlAASzVj/P46KuE+OgFuSvVAJKsqWWgclApaBkoDzSP0n+ARkCDoD5QD6gXNB1XNSiA5YP2graACjz85oAWgrBoN9JvH0GdoBugT4nWB2XThw2BmjhwZrMCenaIYmUnCqAq0ABoDyg9hHjpFAtjVsczIGyut0CPQDkK8ooxu+gdqfEGKAP0GFSvIc/19K6MeAGEpfkQVKGx5lfQO1PjAdB1UGUM+s9KerfRgLDT3OXDfxh0FrSWRqm5oCxQEWgdpb33EQ/fvUkloIifTft/ZtLZNLLkCILBIbsbNCVQaNUEa7FA7G+gFaAxFTNpmRp0WhDOE1AJ9RlTAv7T5FtMf3mGE8xW05oYluwOAb+roA2g7wHeMUEz8MsCvtsFa5s2QLtBaRwfnA81SK6nsP03UiwvS6M8GQEIn6kV6HN20gfKWpRiDXP8alWsDIIELKNFqJc1UxMJyzDWUYGFcZkJgFZz0j/QkiBs66bYXlZuAqBVnPQuRfs40wLgS00AtJyT3qNw3tYjmTctgHI56f0KAfVL5k0LoCxO+heFgMYk8xaz7Y6EtSCAeLPiHIX5XSSZNy2ARjnpxQoBlUjmTQugt5LzJBkrl8ybFkAvOenVivo2dxvEy/pMAMSbiyxlzslG2FZFsbXOwYIAesH4B3nnQJkh5jOTYnoZ5qnXBEA45e/g+ODezD1QJIQ8RigWb7+nQ8USJ2hfgSedkxyfGuZsdqVIwjlPsbxskvLETAGE1fm+gN8B5pxhZQVsVlgrGgV825mi83uZ0j0J+irgV0lrqBrB96WQ72vQZgH/cVCLSTNp1xDOPkFf7D9wAx6PdNpAa5hz/SWNlEe/Ydo78hXdY54P2qoKkMyxj2u3mb+zMVWGTfGSiKOuYx/X9jPnaCfWdhF0yMTVPI4geLr51ABIOOIdMXG74ydoPeiOAZBwQtlkGiC038y5moK1ScWm2S8fvm1hjWwqFpW4sV5EnfdkSE0YYy0BPfDxXCtNRYwDxKgG4UlnIVX5kQAxRujZQor1mTkHiO0+YpwixXSYFy0IPNTDvSI8NsJrwPkzFrQTNBMepO2UZ2z2a8C4/LhLsEQNL1qcCDLM67rrhx/6nCRrWKJ1FLNO8JkWKqTjpjQx1RalAeGmj2eOgc4kCyAXEi51RK/h4d2kN8kEyIWEM/lrAnC2MefmflIBciEdBF0JG06iAHIhNfxnsSoFJ5EAzVzRXwgLjs5hXqcdBv1hziZdp2ywRASE1hxWoIj95ybJ1QdZQBaQBWQBWUAWkDULyAKygPTYXwEGAArW2QJagQgvAAAAAElFTkSuQmCC')\",\n backgroundRepeat: \"no-repeat\",\n backgroundPosition: \"5px center\",\n backgroundSize: \"16px\",\n }}\n />\n {values.state.value.length > 0 && !values.isDisabled && (\n <AriaButton\n className={(buttonValues) => searchFieldButton(buttonValues)}\n >\n ✕\n </AriaButton>\n )}\n </div>\n </>\n )}\n </AriaSearchField>\n );\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXX0="]}
|
|
1
|
+
{"version":3,"mappings":"AA8DQ,mBASI,KAPF,YAFF;AA9DR;AAAA,EACE,eAAe;AAAA,EACf,SAAS;AAAA,EACT,UAAU;AAAA,OAEL;AACP,SAAS,cAAc,wBAAwB;AAE/C,SAAS,wBAAwB;AACjC,SAAS,UAAU;AAEnB,MAAM,oBAAoB,GAAG;AAAA,EAC3B,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,YAAY;AAAA,MACV,MAAM;AAAA,IACR;AAAA,EACF;AACF,CAAC;AAED,MAAM,mBAAmB,GAAG;AAAA,EAC1B,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,YAAY;AAAA,MACV,MAAM;AAAA,IACR;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOF;AACF,CAAC;AAED,MAAM,oBAAoB,GAAG;AAAA,EAC3B,MAAM;AAAA,EACN,UAAU;AAAA,IACR,WAAW,EAAE,MAAM,oBAAoB;AAAA,IACvC,WAAW,EAAE,MAAM,oBAAoB;AAAA,EACzC;AACF,CAAC;AAEM,SAAS,YAAY;AAAA,EAC1B,aAAa,CAAC;AAAA,EACd,cAAc,CAAC;AAAA,EACf;AAAA,EACA,GAAG;AACL,GAGG;AACD,SACE,oBAAC,mBAAiB,GAAG,OAClB,WAAC,WACA,iCACG;AAAA,WAAO,aAAa,aAAa,SAAS,MAAM,IAAI;AAAA,IACrD;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,WAAW,kBAAkB;AAAA,UAC3B,GAAG;AAAA,UACH,WAAW,iBAAiB,YAAY,WAAW,MAAM;AAAA,QAC3D,CAAC;AAAA,QAED;AAAA;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ,WAAW,CAACA,YACV,iBAAiB;AAAA,gBACf,GAAGA;AAAA,gBACH,WAAW,iBAAiB,WAAW,WAAWA,OAAM;AAAA,cAC1D,CAAC;AAAA,cAEH,MAAK;AAAA,cACL,OAAO;AAAA,gBACL,iBACE;AAAA,gBACF,kBAAkB;AAAA,gBAClB,oBAAoB;AAAA,gBACpB,gBAAgB;AAAA,cAClB;AAAA;AAAA,UACF;AAAA,UACC,OAAO,MAAM,MAAM,SAAS,KAAK,CAAC,OAAO,cACxC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,CAAC,iBAAiB,kBAAkB,YAAY;AAAA,cAC5D;AAAA;AAAA,UAED;AAAA;AAAA;AAAA,IAEJ;AAAA,KACF,GAEJ;AAEJ","names":["values"],"sources":["../../../src/components/search-field.tsx"],"sourcesContent":["import {\n SearchField as AriaSearchField,\n Input as AriaInput,\n Button as AriaButton,\n type SearchFieldProps as AriaSearchFieldProps,\n} from \"react-aria-components\";\nimport { goldGradient, disabledGradient } from \"../utilities/gradient.js\";\nimport { ComponentProps } from \"react\";\nimport { resolveClassName } from \"../utilities/resolve-class-name.js\";\nimport { tv } from \"../utilities/tv.js\";\n\nconst searchFieldBorder = tv({\n base: [\n \"flex bg-gradient-to-t p-px outline-none\",\n goldGradient,\n \"focus-within:from-lol-gold-300 focus-within:via-lol-gold-200 focus-within:to-lol-gold-100\",\n ],\n variants: {\n isDisabled: {\n true: disabledGradient,\n },\n },\n});\n\nconst searchFieldInput = tv({\n base: [\n \"bg-lol-grey-hextech-black min-h-full w-full px-3 py-2 pl-6 outline-none\",\n \"text-lol-gold-100 font-spiegel text-xs font-medium tracking-wide\",\n ],\n variants: {\n isDisabled: {\n true: \"text-lol-grey-150\",\n },\n\n // TODO: make sure both the background image of the gradient and the search\n // icon are displayed\n // isFocused: {\n // true: \"from-lol-grey-200 via-lol-grey-300 to-lol-grey-300 bg-gradient-to-t\",\n // },\n },\n});\n\nconst searchFieldButton = tv({\n base: \"bg-lol-grey-hextech-black text-lol-gold-300 px-4 text-xs font-black\",\n variants: {\n isHovered: { true: \"text-lol-gold-100\" },\n isPressed: { true: \"text-lol-gold-600\" },\n },\n});\n\nexport function SearchField({\n inputProps = {},\n borderProps = {},\n children,\n ...props\n}: AriaSearchFieldProps & {\n inputProps?: ComponentProps<typeof AriaInput>;\n borderProps?: ComponentProps<\"div\">;\n}) {\n return (\n <AriaSearchField {...props}>\n {(values) => (\n <>\n {typeof children === \"function\" ? children(values) : children}\n <div\n {...borderProps}\n className={searchFieldBorder({\n ...values,\n className: resolveClassName(borderProps.className, values),\n })}\n >\n <AriaInput\n {...inputProps}\n className={(values) =>\n searchFieldInput({\n ...values,\n className: resolveClassName(inputProps.className, values),\n })\n }\n type=\"text\"\n style={{\n backgroundImage:\n \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAERElEQVR42uycz0tVQRTH54lamBakLUStQKhEW6V/gC2qhRgRqJURVJj9oBL7oWVBWFj0O/pd2EbJ3ARt2uW6tFUWZkhkiYQVSBZk6esc7rkgkXfm3rkzb957c+CL8Obcc+d+5vcPjESjUWZtdkuxCCwgC8gCsoAsIAvIArKArFlAASzVj/P46KuE+OgFuSvVAJKsqWWgclApaBkoDzSP0n+ARkCDoD5QD6gXNB1XNSiA5YP2graACjz85oAWgrBoN9JvH0GdoBugT4nWB2XThw2BmjhwZrMCenaIYmUnCqAq0ABoDyg9hHjpFAtjVsczIGyut0CPQDkK8ooxu+gdqfEGKAP0GFSvIc/19K6MeAGEpfkQVKGx5lfQO1PjAdB1UGUM+s9KerfRgLDT3OXDfxh0FrSWRqm5oCxQEWgdpb33EQ/fvUkloIifTft/ZtLZNLLkCILBIbsbNCVQaNUEa7FA7G+gFaAxFTNpmRp0WhDOE1AJ9RlTAv7T5FtMf3mGE8xW05oYluwOAb+roA2g7wHeMUEz8MsCvtsFa5s2QLtBaRwfnA81SK6nsP03UiwvS6M8GQEIn6kV6HN20gfKWpRiDXP8alWsDIIELKNFqJc1UxMJyzDWUYGFcZkJgFZz0j/QkiBs66bYXlZuAqBVnPQuRfs40wLgS00AtJyT3qNw3tYjmTctgHI56f0KAfVL5k0LoCxO+heFgMYk8xaz7Y6EtSCAeLPiHIX5XSSZNy2ARjnpxQoBlUjmTQugt5LzJBkrl8ybFkAvOenVivo2dxvEy/pMAMSbiyxlzslG2FZFsbXOwYIAesH4B3nnQJkh5jOTYnoZ5qnXBEA45e/g+ODezD1QJIQ8RigWb7+nQ8USJ2hfgSedkxyfGuZsdqVIwjlPsbxskvLETAGE1fm+gN8B5pxhZQVsVlgrGgV825mi83uZ0j0J+irgV0lrqBrB96WQ72vQZgH/cVCLSTNp1xDOPkFf7D9wAx6PdNpAa5hz/SWNlEe/Ydo78hXdY54P2qoKkMyxj2u3mb+zMVWGTfGSiKOuYx/X9jPnaCfWdhF0yMTVPI4geLr51ABIOOIdMXG74ydoPeiOAZBwQtlkGiC038y5moK1ScWm2S8fvm1hjWwqFpW4sV5EnfdkSE0YYy0BPfDxXCtNRYwDxKgG4UlnIVX5kQAxRujZQor1mTkHiO0+YpwixXSYFy0IPNTDvSI8NsJrwPkzFrQTNBMepO2UZ2z2a8C4/LhLsEQNL1qcCDLM67rrhx/6nCRrWKJ1FLNO8JkWKqTjpjQx1RalAeGmj2eOgc4kCyAXEi51RK/h4d2kN8kEyIWEM/lrAnC2MefmflIBciEdBF0JG06iAHIhNfxnsSoFJ5EAzVzRXwgLjs5hXqcdBv1hziZdp2ywRASE1hxWoIj95ybJ1QdZQBaQBWQBWUAWkDULyAKygPTYXwEGAArW2QJagQgvAAAAAElFTkSuQmCC')\",\n backgroundRepeat: \"no-repeat\",\n backgroundPosition: \"5px center\",\n backgroundSize: \"16px\",\n }}\n />\n {values.state.value.length > 0 && !values.isDisabled && (\n <AriaButton\n className={(buttonValues) => searchFieldButton(buttonValues)}\n >\n ✕\n </AriaButton>\n )}\n </div>\n </>\n )}\n </AriaSearchField>\n );\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXX0="]}
|
|
@@ -14,10 +14,10 @@ import {
|
|
|
14
14
|
disabledGradient,
|
|
15
15
|
goldGradientHover,
|
|
16
16
|
goldGradientPressed
|
|
17
|
-
} from "../utilities/gradient";
|
|
18
|
-
import { outlineClassName } from "../utilities/outline";
|
|
19
|
-
import { resolveClassName } from "../utilities/resolve-class-name";
|
|
20
|
-
import { tv } from "../utilities/tv";
|
|
17
|
+
} from "../utilities/gradient.js";
|
|
18
|
+
import { outlineClassName } from "../utilities/outline.js";
|
|
19
|
+
import { resolveClassName } from "../utilities/resolve-class-name.js";
|
|
20
|
+
import { tv } from "../utilities/tv.js";
|
|
21
21
|
const select = tv({
|
|
22
22
|
base: "font-spiegel"
|
|
23
23
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":";AAmFQ,mBAeM,KAfN;AA5ER;AAAA,EACE,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AAAA,EACX,WAAW;AAAA,EACX,eAAe;AAAA,EACf;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,UAAU;AAEnB,MAAM,SAAS,GAAG;AAAA,EAChB,MAAM;AACR,CAAC;AAED,MAAM,qBAAqB,GAAG;AAAA,EAC5B,MAAM,CAAC,wDAAwD,YAAY;AAAA,EAC3E,UAAU;AAAA,IACR,WAAW,EAAE,MAAM,kBAAkB;AAAA,IACrC,WAAW,EAAE,MAAM,oBAAoB;AAAA,IACvC,QAAQ,EAAE,MAAM,oBAAoB;AAAA,IACpC,YAAY,EAAE,MAAM,iBAAiB;AAAA,IACrC,WAAW,EAAE,MAAM,GAAG;AAAA,IACtB,gBAAgB,EAAE,MAAM,iBAAiB;AAAA,EAC3C;AACF,CAAC;AAED,MAAM,eAAe,GAAG;AAAA,EACtB,MAAM;AAAA,EACN,UAAU;AAAA,IACR,WAAW,EAAE,MAAM,oBAAoB;AAAA,IACvC,QAAQ,EAAE,MAAM,oCAAoC;AAAA,EACtD;AACF,CAAC;AAED,MAAM,UAAU,GAAG;AAAA,EACjB,MAAM;AAAA,EACN,UAAU;AAAA,IACR,WAAW,EAAE,MAAM,GAAG;AAAA,EACxB;AACF,CAAC;AAUM,SAAS,OAAyB;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,CAAC,WACV,OAAO;AAAA,QACL,GAAG;AAAA,QACH,WAAW,iBAAiB,WAAW,MAAM;AAAA,MAC/C,CAAC;AAAA,MAGF,WAAC,WACA,iCACE;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,CAAC,iBACV,mBAAmB,EAAE,GAAG,cAAc,QAAQ,OAAO,OAAO,CAAC;AAAA,YAG/D;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW,aAAa,MAAM;AAAA,gBAC9B,OAAO;AAAA,kBACL,oBAAoB;AAAA,kBACpB,iBAAiB,OAAO,SACpB,0bACA;AAAA,gBACN;AAAA,gBAEA,8BAAC,mBAAgB;AAAA;AAAA,YACnB;AAAA;AAAA,QACF;AAAA,QACC,eAAe,oBAAC,YAAS,MAAK,eAAe,uBAAY;AAAA,QACzD,gBACC,oBAAC,YAAS,MAAK,gBAAgB,wBAAa;AAAA,QAE9C,oBAAC,eAAY,QAAQ,GAAG,WAAU,uBAChC,8BAAC,eAAY,WAAW,MAAM,QAAQ,GAAI,UAAS,GACrD;AAAA,SACF;AAAA;AAAA,EAEJ;AAEJ;AAEA,MAAM,OAAO,GAAG;AAAA,EACd,MAAM;AAAA,EACN,UAAU;AAAA,IACR,WAAW,EAAE,MAAM,oCAAoC;AAAA,IACvD,gBAAgB,EAAE,MAAM,iBAAiB;AAAA,IACzC,WAAW,EAAE,MAAM,GAAG;AAAA,IACtB,YAAY,EAAE,MAAM,GAAG;AAAA,IACvB,WAAW,EAAE,MAAM,uCAAuC;AAAA,EAC5D;AACF,CAAC;AAEM,SAAS,KAAK,EAAE,WAAW,GAAG,MAAM,GAAqB;AAC9D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,CAAC,WAAW;AACrB,eAAO,KAAK;AAAA,UACV,GAAG;AAAA,UACH,WAAW,iBAAiB,WAAW,MAAM;AAAA,QAC/C,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ","names":[],"sources":["../../../src/components/select.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode } from \"react\";\nimport type {\n ListBoxItemProps,\n SelectProps as AriaSelectProps,\n} from \"react-aria-components\";\nimport {\n Text as AriaText,\n Select as AriaSelect,\n Button as AriaButton,\n Popover as AriaPopover,\n ListBox as AriaListBox,\n SelectValue as AriaSelectValue,\n ListBoxItem,\n} from \"react-aria-components\";\nimport {\n goldGradient,\n disabledGradient,\n goldGradientHover,\n goldGradientPressed,\n} from \"../utilities/gradient\";\nimport { outlineClassName } from \"../utilities/outline\";\nimport { resolveClassName } from \"../utilities/resolve-class-name\";\nimport { tv } from \"../utilities/tv\";\n\nconst select = tv({\n base: \"font-spiegel\",\n});\n\nconst selectButtonBorder = tv({\n base: [\"inline-block w-[200px] bg-gradient-to-t outline-none\", goldGradient],\n variants: {\n isHovered: { true: goldGradientHover },\n isPressed: { true: goldGradientPressed },\n isOpen: { true: goldGradientPressed },\n isDisabled: { true: disabledGradient },\n isFocused: { true: \"\" },\n isFocusVisible: { true: outlineClassName },\n },\n});\n\nconst selectButton = tv({\n base: \"bg-lol-grey-hextech-black text-lol-grey-100 m-px block bg-no-repeat px-2 py-1.5 pr-6 text-left text-xs font-normal tracking-wide\",\n variants: {\n isHovered: { true: \"text-lol-gold-100\" },\n isOpen: { true: \"text-lol-gold-600 bg-lol-grey-300\" },\n },\n});\n\nconst listBox = tv({\n base: \"bg-lol-grey-hextech-black border-lol-gold-600 border outline-none\",\n variants: {\n isFocused: { true: \"\" },\n },\n});\n\ninterface SelectProps<T extends object>\n extends Omit<AriaSelectProps<T>, \"children\"> {\n label?: string;\n description?: string;\n errorMessage?: string;\n children?: ReactNode | ((item: T) => ReactNode);\n}\n\nexport function Select<T extends object>({\n description,\n errorMessage,\n children,\n className,\n ...props\n}: SelectProps<T>) {\n return (\n <AriaSelect\n {...props}\n className={(values) =>\n select({\n ...values,\n className: resolveClassName(className, values),\n })\n }\n >\n {(values) => (\n <>\n <AriaButton\n className={(buttonValues) =>\n selectButtonBorder({ ...buttonValues, isOpen: values.isOpen })\n }\n >\n <span\n className={selectButton(values)}\n style={{\n backgroundPosition: \"right 0.5rem center\",\n backgroundImage: values.isOpen\n ? \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAASCAYAAACAa1QyAAAA90lEQVR42mL8//8/A6mAiYEMwILVJG4RNiAlDcQgZzz79/XNL2R5RnTnATWwAyn5BEfBaqDUv4UH3rcD+Q+QNaJoAmrgAFJyiY6CdWL8LNEgsRcf/ixA14juJ6kkJ8FGkIbn7//MB2pYKCHAkhDvIFgJksPlJ0ZGRgbmp+9+z1py6EMvSACoASyO009A53FCTfwNCgCoS2A2wAOEcWDiCcl5v6DOY8bmPBYsodf28/f/90sPf+iDBgQo5BiAwd4ICnZcKeKfjDBrepy9IAsoJEFBDgp6fKGHLXIXAm1pQ45cfMmoBpqM2vAmIzSNUkQnWJrFE0CAAQCQxYvehN8YFAAAAABJRU5ErkJggg==')\"\n : \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAASCAYAAACAa1QyAAAAiUlEQVR42mL8//8/A6mAiYEMQJYmFnSBk6vzYcwmIP4LxI0gjnnoRNyaoKAViKuQ+I14bQKCTiAuA+I6IGYG4gZ0jSw4nFwB1QwDjIRsKkbjNwxckFNNUw8QlyLx66EYb0D8A+IuIGaDyjcQE0+gOPoDxC1I8dNASBMDNDX8hWKMIGcc3FkDIMAA1n8bpHnZDOAAAAAASUVORK5CYII=')\",\n }}\n >\n <AriaSelectValue />\n </span>\n </AriaButton>\n {description && <AriaText slot=\"description\">{description}</AriaText>}\n {errorMessage && (\n <AriaText slot=\"errorMessage\">{errorMessage}</AriaText>\n )}\n <AriaPopover offset={4} className=\"w-[--trigger-width]\">\n <AriaListBox className={() => listBox()}>{children}</AriaListBox>\n </AriaPopover>\n </>\n )}\n </AriaSelect>\n );\n}\n\nconst item = tv({\n base: \"font-spiegel border-lol-grey-300 text-lol-gold-300 text-lol-sm border-b px-2 py-1.5 text-sm outline-none\",\n variants: {\n isHovered: { true: \"bg-lol-grey-300 text-lol-gold-100\" },\n isFocusVisible: { true: outlineClassName },\n isFocused: { true: \"\" },\n isSelected: { true: \"\" },\n isPressed: { true: \"text-lol-gold-600 bg-lol-grey-300/50\" },\n },\n});\n\nexport function Item({ className, ...props }: ListBoxItemProps) {\n return (\n <ListBoxItem\n {...props}\n className={(values) => {\n return item({\n ...values,\n className: resolveClassName(className, values),\n });\n }}\n />\n );\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXX0="]}
|
|
1
|
+
{"version":3,"mappings":";AAmFQ,mBAeM,KAfN;AA5ER;AAAA,EACE,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AAAA,EACX,WAAW;AAAA,EACX,eAAe;AAAA,EACf;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,UAAU;AAEnB,MAAM,SAAS,GAAG;AAAA,EAChB,MAAM;AACR,CAAC;AAED,MAAM,qBAAqB,GAAG;AAAA,EAC5B,MAAM,CAAC,wDAAwD,YAAY;AAAA,EAC3E,UAAU;AAAA,IACR,WAAW,EAAE,MAAM,kBAAkB;AAAA,IACrC,WAAW,EAAE,MAAM,oBAAoB;AAAA,IACvC,QAAQ,EAAE,MAAM,oBAAoB;AAAA,IACpC,YAAY,EAAE,MAAM,iBAAiB;AAAA,IACrC,WAAW,EAAE,MAAM,GAAG;AAAA,IACtB,gBAAgB,EAAE,MAAM,iBAAiB;AAAA,EAC3C;AACF,CAAC;AAED,MAAM,eAAe,GAAG;AAAA,EACtB,MAAM;AAAA,EACN,UAAU;AAAA,IACR,WAAW,EAAE,MAAM,oBAAoB;AAAA,IACvC,QAAQ,EAAE,MAAM,oCAAoC;AAAA,EACtD;AACF,CAAC;AAED,MAAM,UAAU,GAAG;AAAA,EACjB,MAAM;AAAA,EACN,UAAU;AAAA,IACR,WAAW,EAAE,MAAM,GAAG;AAAA,EACxB;AACF,CAAC;AAUM,SAAS,OAAyB;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,CAAC,WACV,OAAO;AAAA,QACL,GAAG;AAAA,QACH,WAAW,iBAAiB,WAAW,MAAM;AAAA,MAC/C,CAAC;AAAA,MAGF,WAAC,WACA,iCACE;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,CAAC,iBACV,mBAAmB,EAAE,GAAG,cAAc,QAAQ,OAAO,OAAO,CAAC;AAAA,YAG/D;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW,aAAa,MAAM;AAAA,gBAC9B,OAAO;AAAA,kBACL,oBAAoB;AAAA,kBACpB,iBAAiB,OAAO,SACpB,0bACA;AAAA,gBACN;AAAA,gBAEA,8BAAC,mBAAgB;AAAA;AAAA,YACnB;AAAA;AAAA,QACF;AAAA,QACC,eAAe,oBAAC,YAAS,MAAK,eAAe,uBAAY;AAAA,QACzD,gBACC,oBAAC,YAAS,MAAK,gBAAgB,wBAAa;AAAA,QAE9C,oBAAC,eAAY,QAAQ,GAAG,WAAU,uBAChC,8BAAC,eAAY,WAAW,MAAM,QAAQ,GAAI,UAAS,GACrD;AAAA,SACF;AAAA;AAAA,EAEJ;AAEJ;AAEA,MAAM,OAAO,GAAG;AAAA,EACd,MAAM;AAAA,EACN,UAAU;AAAA,IACR,WAAW,EAAE,MAAM,oCAAoC;AAAA,IACvD,gBAAgB,EAAE,MAAM,iBAAiB;AAAA,IACzC,WAAW,EAAE,MAAM,GAAG;AAAA,IACtB,YAAY,EAAE,MAAM,GAAG;AAAA,IACvB,WAAW,EAAE,MAAM,uCAAuC;AAAA,EAC5D;AACF,CAAC;AAEM,SAAS,KAAK,EAAE,WAAW,GAAG,MAAM,GAAqB;AAC9D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,CAAC,WAAW;AACrB,eAAO,KAAK;AAAA,UACV,GAAG;AAAA,UACH,WAAW,iBAAiB,WAAW,MAAM;AAAA,QAC/C,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ","names":[],"sources":["../../../src/components/select.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode } from \"react\";\nimport type {\n ListBoxItemProps,\n SelectProps as AriaSelectProps,\n} from \"react-aria-components\";\nimport {\n Text as AriaText,\n Select as AriaSelect,\n Button as AriaButton,\n Popover as AriaPopover,\n ListBox as AriaListBox,\n SelectValue as AriaSelectValue,\n ListBoxItem,\n} from \"react-aria-components\";\nimport {\n goldGradient,\n disabledGradient,\n goldGradientHover,\n goldGradientPressed,\n} from \"../utilities/gradient.js\";\nimport { outlineClassName } from \"../utilities/outline.js\";\nimport { resolveClassName } from \"../utilities/resolve-class-name.js\";\nimport { tv } from \"../utilities/tv.js\";\n\nconst select = tv({\n base: \"font-spiegel\",\n});\n\nconst selectButtonBorder = tv({\n base: [\"inline-block w-[200px] bg-gradient-to-t outline-none\", goldGradient],\n variants: {\n isHovered: { true: goldGradientHover },\n isPressed: { true: goldGradientPressed },\n isOpen: { true: goldGradientPressed },\n isDisabled: { true: disabledGradient },\n isFocused: { true: \"\" },\n isFocusVisible: { true: outlineClassName },\n },\n});\n\nconst selectButton = tv({\n base: \"bg-lol-grey-hextech-black text-lol-grey-100 m-px block bg-no-repeat px-2 py-1.5 pr-6 text-left text-xs font-normal tracking-wide\",\n variants: {\n isHovered: { true: \"text-lol-gold-100\" },\n isOpen: { true: \"text-lol-gold-600 bg-lol-grey-300\" },\n },\n});\n\nconst listBox = tv({\n base: \"bg-lol-grey-hextech-black border-lol-gold-600 border outline-none\",\n variants: {\n isFocused: { true: \"\" },\n },\n});\n\ninterface SelectProps<T extends object>\n extends Omit<AriaSelectProps<T>, \"children\"> {\n label?: string;\n description?: string;\n errorMessage?: string;\n children?: ReactNode | ((item: T) => ReactNode);\n}\n\nexport function Select<T extends object>({\n description,\n errorMessage,\n children,\n className,\n ...props\n}: SelectProps<T>) {\n return (\n <AriaSelect\n {...props}\n className={(values) =>\n select({\n ...values,\n className: resolveClassName(className, values),\n })\n }\n >\n {(values) => (\n <>\n <AriaButton\n className={(buttonValues) =>\n selectButtonBorder({ ...buttonValues, isOpen: values.isOpen })\n }\n >\n <span\n className={selectButton(values)}\n style={{\n backgroundPosition: \"right 0.5rem center\",\n backgroundImage: values.isOpen\n ? \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAASCAYAAACAa1QyAAAA90lEQVR42mL8//8/A6mAiYEMwILVJG4RNiAlDcQgZzz79/XNL2R5RnTnATWwAyn5BEfBaqDUv4UH3rcD+Q+QNaJoAmrgAFJyiY6CdWL8LNEgsRcf/ixA14juJ6kkJ8FGkIbn7//MB2pYKCHAkhDvIFgJksPlJ0ZGRgbmp+9+z1py6EMvSACoASyO009A53FCTfwNCgCoS2A2wAOEcWDiCcl5v6DOY8bmPBYsodf28/f/90sPf+iDBgQo5BiAwd4ICnZcKeKfjDBrepy9IAsoJEFBDgp6fKGHLXIXAm1pQ45cfMmoBpqM2vAmIzSNUkQnWJrFE0CAAQCQxYvehN8YFAAAAABJRU5ErkJggg==')\"\n : \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAASCAYAAACAa1QyAAAAiUlEQVR42mL8//8/A6mAiYEMQJYmFnSBk6vzYcwmIP4LxI0gjnnoRNyaoKAViKuQ+I14bQKCTiAuA+I6IGYG4gZ0jSw4nFwB1QwDjIRsKkbjNwxckFNNUw8QlyLx66EYb0D8A+IuIGaDyjcQE0+gOPoDxC1I8dNASBMDNDX8hWKMIGcc3FkDIMAA1n8bpHnZDOAAAAAASUVORK5CYII=')\",\n }}\n >\n <AriaSelectValue />\n </span>\n </AriaButton>\n {description && <AriaText slot=\"description\">{description}</AriaText>}\n {errorMessage && (\n <AriaText slot=\"errorMessage\">{errorMessage}</AriaText>\n )}\n <AriaPopover offset={4} className=\"w-[--trigger-width]\">\n <AriaListBox className={() => listBox()}>{children}</AriaListBox>\n </AriaPopover>\n </>\n )}\n </AriaSelect>\n );\n}\n\nconst item = tv({\n base: \"font-spiegel border-lol-grey-300 text-lol-gold-300 text-lol-sm border-b px-2 py-1.5 text-sm outline-none\",\n variants: {\n isHovered: { true: \"bg-lol-grey-300 text-lol-gold-100\" },\n isFocusVisible: { true: outlineClassName },\n isFocused: { true: \"\" },\n isSelected: { true: \"\" },\n isPressed: { true: \"text-lol-gold-600 bg-lol-grey-300/50\" },\n },\n});\n\nexport function Item({ className, ...props }: ListBoxItemProps) {\n return (\n <ListBoxItem\n {...props}\n className={(values) => {\n return item({\n ...values,\n className: resolveClassName(className, values),\n });\n }}\n />\n );\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXX0="]}
|
|
@@ -10,9 +10,9 @@ import {
|
|
|
10
10
|
sliderDisabled,
|
|
11
11
|
sliderHover,
|
|
12
12
|
sliderNormal
|
|
13
|
-
} from "./images";
|
|
14
|
-
import { resolveClassName } from "../../utilities/resolve-class-name";
|
|
15
|
-
import { tv } from "../../utilities/tv";
|
|
13
|
+
} from "./images.js";
|
|
14
|
+
import { resolveClassName } from "../../utilities/resolve-class-name.js";
|
|
15
|
+
import { tv } from "../../utilities/tv.js";
|
|
16
16
|
const sliderTrack = tv({
|
|
17
17
|
base: "group relative h-7 w-full"
|
|
18
18
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"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","names":["values"],"sources":["../../../../src/components/slider/slider.tsx"],"sourcesContent":["import {\n SliderProps as AriaSliderProps,\n SliderOutputProps,\n SliderThumbProps,\n SliderTrackProps,\n SliderTrackRenderProps,\n} from \"react-aria-components\";\nimport {\n Slider as AriaSlider,\n SliderThumb as AriaSliderThumb,\n SliderTrack as AriaSliderTrack,\n SliderOutput as AriaSliderOutput,\n} from \"react-aria-components\";\nimport {\n sliderActive,\n sliderDisabled,\n sliderHover,\n sliderNormal,\n} from \"./images\";\nimport { resolveClassName } from \"../../utilities/resolve-class-name\";\nimport { tv } from \"../../utilities/tv\";\n\nconst sliderTrack = tv({\n base: \"group relative h-7 w-full\",\n});\n\nconst sliderTrackBackground = tv({\n base: \"bg-lol-grey-300 absolute top-[50%] h-0.5 w-full translate-y-[-50%] transform rounded-full\",\n});\n\nconst sliderTrackForeground = tv({\n base: \"from-lol-gold-600 to-lol-gold-500 absolute top-[50%] h-0.5 translate-y-[-50%] transform bg-gradient-to-r\",\n variants: {\n isDisabled: {\n true: \"bg-[#5C5B57] from-transparent via-transparent to-transparent\",\n false: [\n \"group-hover:from-lol-gold-500 group-hover:via-lol-gold-400 group-hover:to-lol-gold-200\",\n \"group-active:from-lol-gold-500 group-active:via-lol-gold-600 group-active:to-lol-gold-600\",\n ],\n },\n },\n});\n\nconst sliderThumb = tv({\n base: \"top-[50%] h-7 w-7 bg-contain outline-none [background-image:var(--normal)]\",\n variants: {\n isDisabled: {\n true: \"[background-image:var(--disabled)]\",\n },\n isThumbDragging: {\n true: \"[background-image:var(--active)]\",\n },\n isOtherThumbDragging: {\n true: \"\",\n },\n },\n compoundVariants: [\n {\n isThumbDragging: false,\n isOtherThumbDragging: false,\n className: \"group-hover:[background-image:var(--hover)]\",\n },\n ],\n});\n\nexport function Slider<T extends number | number[]>({\n children,\n className,\n sliderThumbProps = {},\n sliderTrackProps = {},\n sliderTrackBackgroundClassName,\n sliderTrackForegroundClassName,\n ...props\n}: AriaSliderProps<T> & {\n sliderTrackProps?: SliderTrackProps;\n sliderThumbProps?: SliderThumbProps;\n sliderTrackBackgroundClassName?:\n | string\n | ((values: SliderTrackRenderProps) => string);\n sliderTrackForegroundClassName?:\n | string\n | ((values: SliderTrackRenderProps) => string);\n}) {\n return (\n <AriaSlider<T>\n {...props}\n className={(values) => resolveClassName(className, values)}\n >\n {(values) => (\n <>\n {typeof children === \"function\" ? children(values) : children}\n <AriaSliderTrack\n {...sliderTrackProps}\n className={(sliderTrackRenderProps) =>\n sliderTrack({\n ...sliderTrackRenderProps,\n className: resolveClassName(\n sliderTrackProps.className,\n sliderTrackRenderProps,\n ),\n })\n }\n >\n {(values) => {\n const left =\n values.state.values.length === 1\n ? 0\n : values.state.getThumbPercent(0) * 100;\n\n const width =\n values.state.values.length === 1\n ? values.state.getThumbPercent(0) * 100\n : (values.state.getThumbPercent(1) -\n values.state.getThumbPercent(0)) *\n 100;\n\n return (\n <>\n <div\n className={sliderTrackBackground({\n className: resolveClassName(\n sliderTrackBackgroundClassName,\n values,\n ),\n })}\n />\n <div\n className={sliderTrackForeground({\n ...values.state,\n className: resolveClassName(\n sliderTrackForegroundClassName,\n values,\n ),\n })}\n style={{ left: `${left}%`, width: `${width}%` }}\n />\n {values.state.values.map((_, i) => {\n let zIndex =\n values.state.getThumbPercent(i === 1 ? 0 : 1) ===\n (i === 1 ? 0 : 1)\n ? 2\n : undefined;\n\n return (\n <>\n <AriaSliderThumb\n key={i}\n index={i}\n {...sliderThumbProps}\n className={(sliderThumbRenderProps) => {\n return sliderThumb({\n isDisabled: sliderThumbRenderProps.isDisabled,\n isThumbDragging:\n sliderThumbRenderProps.state.isThumbDragging(i),\n isOtherThumbDragging:\n sliderThumbRenderProps.state.isThumbDragging(\n i === 1 ? 0 : 1,\n ),\n className: resolveClassName(\n sliderThumbProps.className,\n sliderThumbRenderProps,\n ),\n });\n }}\n style={\n {\n \"--normal\": sliderNormal,\n \"--hover\": sliderHover,\n \"--active\": sliderActive,\n \"--disabled\": sliderDisabled,\n zIndex,\n } as any\n }\n />\n </>\n );\n })}\n </>\n );\n }}\n </AriaSliderTrack>\n </>\n )}\n </AriaSlider>\n );\n}\n\nconst sliderOutput = tv({\n base: \"font-spiegel text-lol-grey-100 text-lol-sm\",\n});\nexport function SliderOutput(props: SliderOutputProps) {\n return (\n <AriaSliderOutput\n className={(values) =>\n sliderOutput({\n className: resolveClassName(props.className, values),\n })\n }\n children={(sliderRenderProps) =>\n sliderRenderProps.state.values\n .map((_, i) => sliderRenderProps.state.getThumbValueLabel(i))\n .join(\" – \")\n }\n {...props}\n />\n );\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXX0="]}
|
|
1
|
+
{"version":3,"mappings":"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","names":["values"],"sources":["../../../../src/components/slider/slider.tsx"],"sourcesContent":["import {\n SliderProps as AriaSliderProps,\n SliderOutputProps,\n SliderThumbProps,\n SliderTrackProps,\n SliderTrackRenderProps,\n} from \"react-aria-components\";\nimport {\n Slider as AriaSlider,\n SliderThumb as AriaSliderThumb,\n SliderTrack as AriaSliderTrack,\n SliderOutput as AriaSliderOutput,\n} from \"react-aria-components\";\nimport {\n sliderActive,\n sliderDisabled,\n sliderHover,\n sliderNormal,\n} from \"./images.js\";\nimport { resolveClassName } from \"../../utilities/resolve-class-name.js\";\nimport { tv } from \"../../utilities/tv.js\";\n\nconst sliderTrack = tv({\n base: \"group relative h-7 w-full\",\n});\n\nconst sliderTrackBackground = tv({\n base: \"bg-lol-grey-300 absolute top-[50%] h-0.5 w-full translate-y-[-50%] transform rounded-full\",\n});\n\nconst sliderTrackForeground = tv({\n base: \"from-lol-gold-600 to-lol-gold-500 absolute top-[50%] h-0.5 translate-y-[-50%] transform bg-gradient-to-r\",\n variants: {\n isDisabled: {\n true: \"bg-[#5C5B57] from-transparent via-transparent to-transparent\",\n false: [\n \"group-hover:from-lol-gold-500 group-hover:via-lol-gold-400 group-hover:to-lol-gold-200\",\n \"group-active:from-lol-gold-500 group-active:via-lol-gold-600 group-active:to-lol-gold-600\",\n ],\n },\n },\n});\n\nconst sliderThumb = tv({\n base: \"top-[50%] h-7 w-7 bg-contain outline-none [background-image:var(--normal)]\",\n variants: {\n isDisabled: {\n true: \"[background-image:var(--disabled)]\",\n },\n isThumbDragging: {\n true: \"[background-image:var(--active)]\",\n },\n isOtherThumbDragging: {\n true: \"\",\n },\n },\n compoundVariants: [\n {\n isThumbDragging: false,\n isOtherThumbDragging: false,\n className: \"group-hover:[background-image:var(--hover)]\",\n },\n ],\n});\n\nexport function Slider<T extends number | number[]>({\n children,\n className,\n sliderThumbProps = {},\n sliderTrackProps = {},\n sliderTrackBackgroundClassName,\n sliderTrackForegroundClassName,\n ...props\n}: AriaSliderProps<T> & {\n sliderTrackProps?: SliderTrackProps;\n sliderThumbProps?: SliderThumbProps;\n sliderTrackBackgroundClassName?:\n | string\n | ((values: SliderTrackRenderProps) => string);\n sliderTrackForegroundClassName?:\n | string\n | ((values: SliderTrackRenderProps) => string);\n}) {\n return (\n <AriaSlider<T>\n {...props}\n className={(values) => resolveClassName(className, values)}\n >\n {(values) => (\n <>\n {typeof children === \"function\" ? children(values) : children}\n <AriaSliderTrack\n {...sliderTrackProps}\n className={(sliderTrackRenderProps) =>\n sliderTrack({\n ...sliderTrackRenderProps,\n className: resolveClassName(\n sliderTrackProps.className,\n sliderTrackRenderProps,\n ),\n })\n }\n >\n {(values) => {\n const left =\n values.state.values.length === 1\n ? 0\n : values.state.getThumbPercent(0) * 100;\n\n const width =\n values.state.values.length === 1\n ? values.state.getThumbPercent(0) * 100\n : (values.state.getThumbPercent(1) -\n values.state.getThumbPercent(0)) *\n 100;\n\n return (\n <>\n <div\n className={sliderTrackBackground({\n className: resolveClassName(\n sliderTrackBackgroundClassName,\n values,\n ),\n })}\n />\n <div\n className={sliderTrackForeground({\n ...values.state,\n className: resolveClassName(\n sliderTrackForegroundClassName,\n values,\n ),\n })}\n style={{ left: `${left}%`, width: `${width}%` }}\n />\n {values.state.values.map((_, i) => {\n let zIndex =\n values.state.getThumbPercent(i === 1 ? 0 : 1) ===\n (i === 1 ? 0 : 1)\n ? 2\n : undefined;\n\n return (\n <>\n <AriaSliderThumb\n key={i}\n index={i}\n {...sliderThumbProps}\n className={(sliderThumbRenderProps) => {\n return sliderThumb({\n isDisabled: sliderThumbRenderProps.isDisabled,\n isThumbDragging:\n sliderThumbRenderProps.state.isThumbDragging(i),\n isOtherThumbDragging:\n sliderThumbRenderProps.state.isThumbDragging(\n i === 1 ? 0 : 1,\n ),\n className: resolveClassName(\n sliderThumbProps.className,\n sliderThumbRenderProps,\n ),\n });\n }}\n style={\n {\n \"--normal\": sliderNormal,\n \"--hover\": sliderHover,\n \"--active\": sliderActive,\n \"--disabled\": sliderDisabled,\n zIndex,\n } as any\n }\n />\n </>\n );\n })}\n </>\n );\n }}\n </AriaSliderTrack>\n </>\n )}\n </AriaSlider>\n );\n}\n\nconst sliderOutput = tv({\n base: \"font-spiegel text-lol-grey-100 text-lol-sm\",\n});\nexport function SliderOutput(props: SliderOutputProps) {\n return (\n <AriaSliderOutput\n className={(values) =>\n sliderOutput({\n className: resolveClassName(props.className, values),\n })\n }\n children={(sliderRenderProps) =>\n sliderRenderProps.state.values\n .map((_, i) => sliderRenderProps.state.getThumbValueLabel(i))\n .join(\" – \")\n }\n {...props}\n />\n );\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXX0="]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { tv } from "
|
|
3
|
-
import { spinnerImage } from "./images";
|
|
2
|
+
import { tv } from "../../utilities/tv.js";
|
|
3
|
+
import { spinnerImage } from "./images.js";
|
|
4
4
|
const spinner = tv({
|
|
5
5
|
base: "aspect-square w-12 animate-spin"
|
|
6
6
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAYI;AAZJ,SAAS,UAAU;AACnB,SAAS,oBAAoB;AAE7B,MAAM,UAAU,GAAG;AAAA,EACjB,MAAM;AACR,CAAC;AAKM,SAAS,QAAQ,EAAE,UAAU,GAAiB;AACnD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,cAAW;AAAA,MACX,KAAK;AAAA,MACL,WAAW,QAAQ,EAAE,UAAU,CAAC;AAAA;AAAA,EAClC;AAEJ","names":[],"sources":["../../../../src/components/spinner/spinner.tsx"],"sourcesContent":["import { tv } from \"
|
|
1
|
+
{"version":3,"mappings":"AAYI;AAZJ,SAAS,UAAU;AACnB,SAAS,oBAAoB;AAE7B,MAAM,UAAU,GAAG;AAAA,EACjB,MAAM;AACR,CAAC;AAKM,SAAS,QAAQ,EAAE,UAAU,GAAiB;AACnD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,cAAW;AAAA,MACX,KAAK;AAAA,MACL,WAAW,QAAQ,EAAE,UAAU,CAAC;AAAA;AAAA,EAClC;AAEJ","names":[],"sources":["../../../../src/components/spinner/spinner.tsx"],"sourcesContent":["import { tv } from \"../../utilities/tv.js\";\nimport { spinnerImage } from \"./images.js\";\n\nconst spinner = tv({\n base: \"aspect-square w-12 animate-spin\",\n});\n\ninterface SpinnerProps {\n className?: string;\n}\nexport function Spinner({ className }: SpinnerProps) {\n return (\n <img\n role=\"status\"\n aria-live=\"polite\"\n aria-label=\"loading\"\n src={spinnerImage}\n className={spinner({ className })}\n />\n );\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXX0="]}
|
|
@@ -5,8 +5,8 @@ import {
|
|
|
5
5
|
goldGradientHover,
|
|
6
6
|
goldGradientPressed,
|
|
7
7
|
disabledGradient
|
|
8
|
-
} from "../utilities/gradient";
|
|
9
|
-
import { tv } from "../utilities/tv";
|
|
8
|
+
} from "../utilities/gradient.js";
|
|
9
|
+
import { tv } from "../utilities/tv.js";
|
|
10
10
|
const switchTrackBorder = tv({
|
|
11
11
|
base: [
|
|
12
12
|
"h-6 w-14 shrink-0 cursor-default rounded-full bg-gradient-to-t p-0.5",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AA2FQ,mBAIQ,KAJR;AA3FR,SAAS,UAAU,kBAAkB;AAErC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,UAAU;AAEnB,MAAM,oBAAoB,GAAG;AAAA,EAC3B,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,WAAW;AAAA,MACT,MAAM;AAAA,IACR;AAAA,IACA,WAAW;AAAA,MACT,MAAM;AAAA,IACR;AAAA,IACA,YAAY;AAAA,MACV,MAAM;AAAA,IACR;AAAA,IACA,gBAAgB;AAAA,MACd,MAAM;AAAA,IACR;AAAA,EACF;AACF,CAAC;AAED,MAAM,cAAc,GAAG;AAAA,EACrB,MAAM;AAAA,EACN,UAAU;AAAA,IACR,WAAW;AAAA,MACT,MAAM;AAAA,IACR;AAAA,IACA,YAAY;AAAA,MACV,MAAM;AAAA,IACR;AAAA,IACA,WAAW;AAAA,MACT,MAAM;AAAA,IACR;AAAA,IACA,gBAAgB;AAAA,MACd,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,kBAAkB;AAAA,IAChB;AAAA,MACE,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,WAAW;AAAA,IACb;AAAA,EACF;AACF,CAAC;AAED,MAAM,mBAAmB,GAAG;AAAA,EAC1B,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,YAAY;AAAA,MACV,MAAM;AAAA,IACR;AAAA,IACA,WAAW;AAAA,MACT,MAAM;AAAA,IACR;AAAA,IACA,WAAW;AAAA,MACT,MAAM;AAAA,IACR;AAAA,IACA,YAAY;AAAA,MACV,MAAM;AAAA,IACR;AAAA,EACF;AACF,CAAC;AAEM,SAAS,OAAO;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAEG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAU;AAAA,MAET,WAAC,WACA,iCACE;AAAA,4BAAC,SAAI,WAAW,kBAAkB,MAAM,GACtC,8BAAC,SAAI,WAAW,YAAY,MAAM,GAChC,8BAAC,UAAK,WAAW,iBAAiB,MAAM,GACtC,8BAAC,UAAK,WAAU,oDAAmD,GACrE,GACF,GACF;AAAA,QACC,OAAO,aAAa,aAAa,SAAS,MAAM,IAAI;AAAA,SACvD;AAAA;AAAA,EAEJ;AAEJ","names":[],"sources":["../../../src/components/switch.tsx"],"sourcesContent":["import { Switch as AriaSwitch } from \"react-aria-components\";\nimport type { SwitchProps as AriaSwitchProps } from \"react-aria-components\";\nimport {\n goldGradient,\n goldGradientHover,\n goldGradientPressed,\n disabledGradient,\n} from \"../utilities/gradient\";\nimport { tv } from \"../utilities/tv\";\n\nconst switchTrackBorder = tv({\n base: [\n \"h-6 w-14 shrink-0 cursor-default rounded-full bg-gradient-to-t p-0.5\",\n goldGradient,\n ],\n variants: {\n isHovered: {\n true: goldGradientHover,\n },\n isPressed: {\n true: goldGradientPressed,\n },\n isDisabled: {\n true: disabledGradient,\n },\n isFocusVisible: {\n true: \"outline outline-1 outline-offset-2 outline-yellow-50\",\n },\n },\n});\n\nconst switchTrack = tv({\n base: \"bg-lol-grey-300 relative grid h-full w-full rounded-full transition-colors duration-200 ease-in-out\",\n variants: {\n isPressed: {\n true: \"\",\n },\n isSelected: {\n true: \"bg-green-900\",\n },\n isFocused: {\n true: \"outline-none\",\n },\n isFocusVisible: {\n true: \"\",\n },\n },\n compoundVariants: [\n {\n isPressed: true,\n isSelected: true,\n className: \"bg-green-950\",\n },\n ],\n});\n\nconst switchKnobBorder = tv({\n base: [\n \"absolute -left-2 -top-1.5 h-8 w-8 rounded-full bg-gradient-to-t p-0.5 shadow-md ring-0 transition-[left] duration-200 ease-in-out\",\n goldGradient,\n ],\n variants: {\n isSelected: {\n true: \"left-[calc(100%-1.5rem)]\",\n },\n isHovered: {\n true: goldGradientHover,\n },\n isPressed: {\n true: goldGradientPressed,\n },\n isDisabled: {\n true: disabledGradient,\n },\n },\n});\n\nexport function Switch({\n className,\n placeholder,\n children,\n ...props\n}: AriaSwitchProps & {\n placeholder?: string;\n}) {\n return (\n <AriaSwitch\n {...props}\n className=\"group inline-flex items-center gap-2 p-1 px-1.5 text-sm font-semibold text-black\"\n >\n {(values) => (\n <>\n <div className={switchTrackBorder(values)}>\n <div className={switchTrack(values)}>\n <span className={switchKnobBorder(values)}>\n <span className=\"bg-lol-grey-300 block h-full w-full rounded-full\"></span>\n </span>\n </div>\n </div>\n {typeof children === \"function\" ? children(values) : children}\n </>\n )}\n </AriaSwitch>\n );\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXX0="]}
|
|
1
|
+
{"version":3,"mappings":"AA2FQ,mBAIQ,KAJR;AA3FR,SAAS,UAAU,kBAAkB;AAErC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,UAAU;AAEnB,MAAM,oBAAoB,GAAG;AAAA,EAC3B,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,WAAW;AAAA,MACT,MAAM;AAAA,IACR;AAAA,IACA,WAAW;AAAA,MACT,MAAM;AAAA,IACR;AAAA,IACA,YAAY;AAAA,MACV,MAAM;AAAA,IACR;AAAA,IACA,gBAAgB;AAAA,MACd,MAAM;AAAA,IACR;AAAA,EACF;AACF,CAAC;AAED,MAAM,cAAc,GAAG;AAAA,EACrB,MAAM;AAAA,EACN,UAAU;AAAA,IACR,WAAW;AAAA,MACT,MAAM;AAAA,IACR;AAAA,IACA,YAAY;AAAA,MACV,MAAM;AAAA,IACR;AAAA,IACA,WAAW;AAAA,MACT,MAAM;AAAA,IACR;AAAA,IACA,gBAAgB;AAAA,MACd,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,kBAAkB;AAAA,IAChB;AAAA,MACE,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,WAAW;AAAA,IACb;AAAA,EACF;AACF,CAAC;AAED,MAAM,mBAAmB,GAAG;AAAA,EAC1B,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,YAAY;AAAA,MACV,MAAM;AAAA,IACR;AAAA,IACA,WAAW;AAAA,MACT,MAAM;AAAA,IACR;AAAA,IACA,WAAW;AAAA,MACT,MAAM;AAAA,IACR;AAAA,IACA,YAAY;AAAA,MACV,MAAM;AAAA,IACR;AAAA,EACF;AACF,CAAC;AAEM,SAAS,OAAO;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAEG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAU;AAAA,MAET,WAAC,WACA,iCACE;AAAA,4BAAC,SAAI,WAAW,kBAAkB,MAAM,GACtC,8BAAC,SAAI,WAAW,YAAY,MAAM,GAChC,8BAAC,UAAK,WAAW,iBAAiB,MAAM,GACtC,8BAAC,UAAK,WAAU,oDAAmD,GACrE,GACF,GACF;AAAA,QACC,OAAO,aAAa,aAAa,SAAS,MAAM,IAAI;AAAA,SACvD;AAAA;AAAA,EAEJ;AAEJ","names":[],"sources":["../../../src/components/switch.tsx"],"sourcesContent":["import { Switch as AriaSwitch } from \"react-aria-components\";\nimport type { SwitchProps as AriaSwitchProps } from \"react-aria-components\";\nimport {\n goldGradient,\n goldGradientHover,\n goldGradientPressed,\n disabledGradient,\n} from \"../utilities/gradient.js\";\nimport { tv } from \"../utilities/tv.js\";\n\nconst switchTrackBorder = tv({\n base: [\n \"h-6 w-14 shrink-0 cursor-default rounded-full bg-gradient-to-t p-0.5\",\n goldGradient,\n ],\n variants: {\n isHovered: {\n true: goldGradientHover,\n },\n isPressed: {\n true: goldGradientPressed,\n },\n isDisabled: {\n true: disabledGradient,\n },\n isFocusVisible: {\n true: \"outline outline-1 outline-offset-2 outline-yellow-50\",\n },\n },\n});\n\nconst switchTrack = tv({\n base: \"bg-lol-grey-300 relative grid h-full w-full rounded-full transition-colors duration-200 ease-in-out\",\n variants: {\n isPressed: {\n true: \"\",\n },\n isSelected: {\n true: \"bg-green-900\",\n },\n isFocused: {\n true: \"outline-none\",\n },\n isFocusVisible: {\n true: \"\",\n },\n },\n compoundVariants: [\n {\n isPressed: true,\n isSelected: true,\n className: \"bg-green-950\",\n },\n ],\n});\n\nconst switchKnobBorder = tv({\n base: [\n \"absolute -left-2 -top-1.5 h-8 w-8 rounded-full bg-gradient-to-t p-0.5 shadow-md ring-0 transition-[left] duration-200 ease-in-out\",\n goldGradient,\n ],\n variants: {\n isSelected: {\n true: \"left-[calc(100%-1.5rem)]\",\n },\n isHovered: {\n true: goldGradientHover,\n },\n isPressed: {\n true: goldGradientPressed,\n },\n isDisabled: {\n true: disabledGradient,\n },\n },\n});\n\nexport function Switch({\n className,\n placeholder,\n children,\n ...props\n}: AriaSwitchProps & {\n placeholder?: string;\n}) {\n return (\n <AriaSwitch\n {...props}\n className=\"group inline-flex items-center gap-2 p-1 px-1.5 text-sm font-semibold text-black\"\n >\n {(values) => (\n <>\n <div className={switchTrackBorder(values)}>\n <div className={switchTrack(values)}>\n <span className={switchKnobBorder(values)}>\n <span className=\"bg-lol-grey-300 block h-full w-full rounded-full\"></span>\n </span>\n </div>\n </div>\n {typeof children === \"function\" ? children(values) : children}\n </>\n )}\n </AriaSwitch>\n );\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXX0="]}
|
|
@@ -5,11 +5,11 @@ import {
|
|
|
5
5
|
Tab as AriaTab,
|
|
6
6
|
TabPanel as AriaTabPanel
|
|
7
7
|
} from "react-aria-components";
|
|
8
|
-
import { useCssId } from "../utilities/css-id";
|
|
8
|
+
import { useCssId } from "../utilities/css-id.js";
|
|
9
9
|
import { createContext, useContext } from "react";
|
|
10
|
-
import { startViewTransition } from "../utilities/view-transition";
|
|
11
|
-
import { resolveClassName } from "../utilities/resolve-class-name";
|
|
12
|
-
import { tv } from "../utilities/tv";
|
|
10
|
+
import { startViewTransition } from "../utilities/view-transition.js";
|
|
11
|
+
import { resolveClassName } from "../utilities/resolve-class-name.js";
|
|
12
|
+
import { tv } from "../utilities/tv.js";
|
|
13
13
|
function Tabs({ onSelectionChange, ...rest }) {
|
|
14
14
|
const id = useCssId();
|
|
15
15
|
return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAsBM,SAkEE,UAlEF,KAkEE,YAlEF;AAtBN;AAAA,EACE,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,OAAO;AAAA,EACP,YAAY;AAAA,OAKP;AACP,SAAS,gBAAgB;AACzB,SAAS,eAAe,kBAAkB;AAC1C,SAAS,2BAA2B;AACpC,SAAS,wBAAwB;AACjC,SAAS,UAAU;AAIZ,SAAS,KAAK,EAAE,mBAAmB,GAAG,KAAK,GAAc;AAC9D,QAAM,KAAK,SAAS;AACpB,SACE,oBAAC,YAAY,UAAZ,EAAqB,OAAO,EAAE,GAAG,GAChC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,mBAAmB,CAAC,QAAQ;AAC1B,4BAAoB,MAAM;AACxB,8BAAoB,GAAG;AAAA,QACzB,CAAC;AAAA,MACH;AAAA;AAAA,EACF,GACF;AAEJ;AAEA,MAAM,UAAU,GAAG;AAAA,EACjB,MAAM;AACR,CAAC;AAEM,SAAS,QAA0B;AAAA,EACxC;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,CAAC,WACV,QAAQ;AAAA,QACN,WAAW,iBAAiB,WAAW,MAAM;AAAA,MAC/C,CAAC;AAAA;AAAA,EAEL;AAEJ;AAEA,MAAM,MAAM,GAAG;AAAA,EACb,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,YAAY;AAAA,MACV,MAAM;AAAA,IACR;AAAA,IACA,WAAW;AAAA,MACT,MAAM;AAAA,IACR;AAAA,IACA,WAAW;AAAA,MACT,MAAM;AAAA,IACR;AAAA,IACA,YAAY;AAAA,MACV,MAAM;AAAA,IACR;AAAA,EACF;AACF,CAAC;AAEM,SAAS,IAAI,EAAE,UAAU,WAAW,GAAG,KAAK,GAAa;AAC9D,QAAM,EAAE,GAAG,IAAI,eAAe;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,CAAC,WACV,IAAI;AAAA,QACF,GAAG;AAAA,QACH,WAAW,iBAAiB,WAAW,MAAM;AAAA,MAC/C,CAAC;AAAA,MAGF,WAAC,WACA,iCACG;AAAA,eAAO,aAAa,aAAa,SAAS,MAAM,IAAI;AAAA,QACpD,OAAO,cACN;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,oBAAoB,iBAAiB,EAAE;AAAA,YACzC;AAAA,YACA,WACE;AAAA;AAAA,QAEH;AAAA,SAEL;AAAA;AAAA,EAEJ;AAEJ;AAEO,SAAS,SAAS,EAAE,GAAG,KAAK,GAAkB;AACnD,SAAO,oBAAC,gBAAc,GAAG,MAAM;AACjC;AAEA,MAAM,cAAc,cAKlB,MAAS;AAEX,SAAS,iBAAiB;AACxB,QAAM,UAAU,WAAW,WAAW;AACtC,MAAI,YAAY,QAAW;AACzB,UAAM,IAAI,MAAM,2CAA2C;AAAA,EAC7D;AACA,SAAO;AACT","names":[],"sources":["../../../src/components/tabs.tsx"],"sourcesContent":["import {\n Tabs as AriaTabs,\n TabList as AriaTabList,\n Tab as AriaTab,\n TabPanel as AriaTabPanel,\n TabsProps,\n TabListProps,\n TabProps,\n TabPanelProps,\n} from \"react-aria-components\";\nimport { useCssId } from \"../utilities/css-id\";\nimport { createContext, useContext } from \"react\";\nimport { startViewTransition } from \"../utilities/view-transition\";\nimport { resolveClassName } from \"../utilities/resolve-class-name\";\nimport { tv } from \"../utilities/tv\";\n\nexport type { Key } from \"react-aria-components\";\n\nexport function Tabs({ onSelectionChange, ...rest }: TabsProps) {\n const id = useCssId();\n return (\n <TabsContext.Provider value={{ id }}>\n <AriaTabs\n {...rest}\n onSelectionChange={(key) => {\n startViewTransition(() => {\n onSelectionChange?.(key);\n });\n }}\n />\n </TabsContext.Provider>\n );\n}\n\nconst tabList = tv({\n base: \"-ml-4 flex gap-0\",\n});\n\nexport function TabList<T extends object>({\n className,\n ...rest\n}: TabListProps<T>) {\n return (\n <AriaTabList<T>\n {...rest}\n className={(values) =>\n tabList({\n className: resolveClassName(className, values),\n })\n }\n />\n );\n}\n\nconst tab = tv({\n base: [\n \"font-beaufort text-lol-gold-300 relative cursor-pointer select-none px-4 py-1 text-xs font-medium uppercase tracking-widest\",\n \"focus-visible:outline-lol-gold-100 focus:outline-none focus-visible:outline-1 focus-visible:outline-offset-4\",\n ],\n variants: {\n isSelected: {\n true: \"text-lol-gold-100\",\n },\n isHovered: {\n true: \"text-lol-gold-100\",\n },\n isPressed: {\n true: \"text-lol-gold-500\",\n },\n isDisabled: {\n true: \"text-lol-grey-150 cursor-default\",\n },\n },\n});\n\nexport function Tab({ children, className, ...rest }: TabProps) {\n const { id } = useTabsContext();\n return (\n <AriaTab\n {...rest}\n className={(values) =>\n tab({\n ...values,\n className: resolveClassName(className, values),\n })\n }\n >\n {(values) => (\n <>\n {typeof children === \"function\" ? children(values) : children}\n {values.isSelected && (\n <div\n style={{\n viewTransitionName: `tab-indicator-${id}`,\n }}\n className={\n \"via-lol-gold-200 absolute bottom-0 left-0 h-px w-full bg-gradient-to-r from-transparent to-transparent\"\n }\n ></div>\n )}\n </>\n )}\n </AriaTab>\n );\n}\n\nexport function TabPanel({ ...rest }: TabPanelProps) {\n return <AriaTabPanel {...rest} />;\n}\n\nconst TabsContext = createContext<\n | {\n id: string;\n }\n | undefined\n>(undefined);\n\nfunction useTabsContext() {\n const context = useContext(TabsContext);\n if (context === undefined) {\n throw new Error(\"useTabsContext must be used within a Tabs\");\n }\n return context;\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXX0="]}
|
|
1
|
+
{"version":3,"mappings":"AAsBM,SAkEE,UAlEF,KAkEE,YAlEF;AAtBN;AAAA,EACE,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,OAAO;AAAA,EACP,YAAY;AAAA,OAKP;AACP,SAAS,gBAAgB;AACzB,SAAS,eAAe,kBAAkB;AAC1C,SAAS,2BAA2B;AACpC,SAAS,wBAAwB;AACjC,SAAS,UAAU;AAIZ,SAAS,KAAK,EAAE,mBAAmB,GAAG,KAAK,GAAc;AAC9D,QAAM,KAAK,SAAS;AACpB,SACE,oBAAC,YAAY,UAAZ,EAAqB,OAAO,EAAE,GAAG,GAChC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,mBAAmB,CAAC,QAAQ;AAC1B,4BAAoB,MAAM;AACxB,8BAAoB,GAAG;AAAA,QACzB,CAAC;AAAA,MACH;AAAA;AAAA,EACF,GACF;AAEJ;AAEA,MAAM,UAAU,GAAG;AAAA,EACjB,MAAM;AACR,CAAC;AAEM,SAAS,QAA0B;AAAA,EACxC;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,CAAC,WACV,QAAQ;AAAA,QACN,WAAW,iBAAiB,WAAW,MAAM;AAAA,MAC/C,CAAC;AAAA;AAAA,EAEL;AAEJ;AAEA,MAAM,MAAM,GAAG;AAAA,EACb,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,YAAY;AAAA,MACV,MAAM;AAAA,IACR;AAAA,IACA,WAAW;AAAA,MACT,MAAM;AAAA,IACR;AAAA,IACA,WAAW;AAAA,MACT,MAAM;AAAA,IACR;AAAA,IACA,YAAY;AAAA,MACV,MAAM;AAAA,IACR;AAAA,EACF;AACF,CAAC;AAEM,SAAS,IAAI,EAAE,UAAU,WAAW,GAAG,KAAK,GAAa;AAC9D,QAAM,EAAE,GAAG,IAAI,eAAe;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,CAAC,WACV,IAAI;AAAA,QACF,GAAG;AAAA,QACH,WAAW,iBAAiB,WAAW,MAAM;AAAA,MAC/C,CAAC;AAAA,MAGF,WAAC,WACA,iCACG;AAAA,eAAO,aAAa,aAAa,SAAS,MAAM,IAAI;AAAA,QACpD,OAAO,cACN;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,oBAAoB,iBAAiB,EAAE;AAAA,YACzC;AAAA,YACA,WACE;AAAA;AAAA,QAEH;AAAA,SAEL;AAAA;AAAA,EAEJ;AAEJ;AAEO,SAAS,SAAS,EAAE,GAAG,KAAK,GAAkB;AACnD,SAAO,oBAAC,gBAAc,GAAG,MAAM;AACjC;AAEA,MAAM,cAAc,cAKlB,MAAS;AAEX,SAAS,iBAAiB;AACxB,QAAM,UAAU,WAAW,WAAW;AACtC,MAAI,YAAY,QAAW;AACzB,UAAM,IAAI,MAAM,2CAA2C;AAAA,EAC7D;AACA,SAAO;AACT","names":[],"sources":["../../../src/components/tabs.tsx"],"sourcesContent":["import {\n Tabs as AriaTabs,\n TabList as AriaTabList,\n Tab as AriaTab,\n TabPanel as AriaTabPanel,\n TabsProps,\n TabListProps,\n TabProps,\n TabPanelProps,\n} from \"react-aria-components\";\nimport { useCssId } from \"../utilities/css-id.js\";\nimport { createContext, useContext } from \"react\";\nimport { startViewTransition } from \"../utilities/view-transition.js\";\nimport { resolveClassName } from \"../utilities/resolve-class-name.js\";\nimport { tv } from \"../utilities/tv.js\";\n\nexport type { Key } from \"react-aria-components\";\n\nexport function Tabs({ onSelectionChange, ...rest }: TabsProps) {\n const id = useCssId();\n return (\n <TabsContext.Provider value={{ id }}>\n <AriaTabs\n {...rest}\n onSelectionChange={(key) => {\n startViewTransition(() => {\n onSelectionChange?.(key);\n });\n }}\n />\n </TabsContext.Provider>\n );\n}\n\nconst tabList = tv({\n base: \"-ml-4 flex gap-0\",\n});\n\nexport function TabList<T extends object>({\n className,\n ...rest\n}: TabListProps<T>) {\n return (\n <AriaTabList<T>\n {...rest}\n className={(values) =>\n tabList({\n className: resolveClassName(className, values),\n })\n }\n />\n );\n}\n\nconst tab = tv({\n base: [\n \"font-beaufort text-lol-gold-300 relative cursor-pointer select-none px-4 py-1 text-xs font-medium uppercase tracking-widest\",\n \"focus-visible:outline-lol-gold-100 focus:outline-none focus-visible:outline-1 focus-visible:outline-offset-4\",\n ],\n variants: {\n isSelected: {\n true: \"text-lol-gold-100\",\n },\n isHovered: {\n true: \"text-lol-gold-100\",\n },\n isPressed: {\n true: \"text-lol-gold-500\",\n },\n isDisabled: {\n true: \"text-lol-grey-150 cursor-default\",\n },\n },\n});\n\nexport function Tab({ children, className, ...rest }: TabProps) {\n const { id } = useTabsContext();\n return (\n <AriaTab\n {...rest}\n className={(values) =>\n tab({\n ...values,\n className: resolveClassName(className, values),\n })\n }\n >\n {(values) => (\n <>\n {typeof children === \"function\" ? children(values) : children}\n {values.isSelected && (\n <div\n style={{\n viewTransitionName: `tab-indicator-${id}`,\n }}\n className={\n \"via-lol-gold-200 absolute bottom-0 left-0 h-px w-full bg-gradient-to-r from-transparent to-transparent\"\n }\n ></div>\n )}\n </>\n )}\n </AriaTab>\n );\n}\n\nexport function TabPanel({ ...rest }: TabPanelProps) {\n return <AriaTabPanel {...rest} />;\n}\n\nconst TabsContext = createContext<\n | {\n id: string;\n }\n | undefined\n>(undefined);\n\nfunction useTabsContext() {\n const context = useContext(TabsContext);\n if (context === undefined) {\n throw new Error(\"useTabsContext must be used within a Tabs\");\n }\n return context;\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXX0="]}
|
|
@@ -3,9 +3,9 @@ import {
|
|
|
3
3
|
TextField as AriaTextField,
|
|
4
4
|
TextArea as AriaTextArea
|
|
5
5
|
} from "react-aria-components";
|
|
6
|
-
import { goldGradient, disabledGradient } from "../utilities/gradient";
|
|
7
|
-
import { resolveClassName } from "../utilities/resolve-class-name";
|
|
8
|
-
import { tv } from "../utilities/tv";
|
|
6
|
+
import { goldGradient, disabledGradient } from "../utilities/gradient.js";
|
|
7
|
+
import { resolveClassName } from "../utilities/resolve-class-name.js";
|
|
8
|
+
import { tv } from "../utilities/tv.js";
|
|
9
9
|
const textAreaBorder = tv({
|
|
10
10
|
base: [
|
|
11
11
|
"flex bg-gradient-to-t p-px outline-none",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAmDQ,mBASI,KATJ;AA/CR;AAAA,EACE,aAAa;AAAA,EACb,YAAY;AAAA,OACP;AACP,SAAS,cAAc,wBAAwB;AAC/C,SAAS,wBAAwB;AAEjC,SAAS,UAAU;AAEnB,MAAM,iBAAiB,GAAG;AAAA,EACxB,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,YAAY;AAAA,MACV,MAAM,CAAC,gBAAgB;AAAA,IACzB;AAAA,EACF;AACF,CAAC;AAED,MAAM,WAAW,GAAG;AAAA,EAClB,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,YAAY;AAAA,MACV,MAAM,CAAC,mBAAmB;AAAA,IAC5B;AAAA,EACF;AACF,CAAC;AAEM,SAAS,SAAS;AAAA,EACvB,gBAAgB,CAAC;AAAA,EACjB,cAAc,CAAC;AAAA,EACf;AAAA,EACA,GAAG;AACL,GAGG;AACD,SACE,oBAAC,iBAAe,GAAG,OAChB,WAAC,WACA,iCACG;AAAA,WAAO,aAAa,aAAa,SAAS,MAAM,IAAI;AAAA,IACrD;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,WAAW,eAAe;AAAA,UACxB,GAAG;AAAA,UACH,WAAW,iBAAiB,aAAa,WAAW,MAAM;AAAA,QAC5D,CAAC;AAAA,QAED;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACJ,WAAW,CAACA,YACV,SAAS;AAAA,cACP,GAAGA;AAAA,cACH,WAAW,iBAAiB,eAAe,WAAWA,OAAM;AAAA,YAC9D,CAAC;AAAA;AAAA,QAEL;AAAA;AAAA,IACF;AAAA,KACF,GAEJ;AAEJ","names":["values"],"sources":["../../../src/components/text-area.tsx"],"sourcesContent":["import type {\n TextFieldProps as AriaTextFieldProps,\n TextAreaProps,\n} from \"react-aria-components\";\nimport {\n TextField as AriaTextField,\n TextArea as AriaTextArea,\n} from \"react-aria-components\";\nimport { goldGradient, disabledGradient } from \"../utilities/gradient\";\nimport { resolveClassName } from \"../utilities/resolve-class-name\";\nimport { ComponentProps } from \"react\";\nimport { tv } from \"../utilities/tv\";\n\nconst textAreaBorder = tv({\n base: [\n \"flex bg-gradient-to-t p-px outline-none\",\n goldGradient,\n \"focus-within:from-lol-gold-400 focus-within:via-lol-gold-200 focus-within:to-lol-gold-100\",\n ],\n variants: {\n isDisabled: {\n true: [disabledGradient],\n },\n },\n});\n\nconst textArea = tv({\n base: [\n \"bg-lol-grey-hextech-black min-h-full w-full px-3 py-2 outline-none\",\n \"text-lol-gold-100 font-spiegel text-xs tracking-wide\",\n \"focus-within:from-lol-grey-200 focus-within:via-lol-grey-300 focus-within:to-lol-grey-300 focus-within:bg-gradient-to-t\",\n ],\n variants: {\n isDisabled: {\n true: [\"text-lol-grey-150\"],\n },\n },\n});\n\nexport function TextArea({\n textAreaProps = {},\n borderProps = {},\n children,\n ...props\n}: AriaTextFieldProps & {\n textAreaProps?: TextAreaProps;\n borderProps?: ComponentProps<\"div\">;\n}) {\n return (\n <AriaTextField {...props}>\n {(values) => (\n <>\n {typeof children === \"function\" ? children(values) : children}\n <div\n {...borderProps}\n className={textAreaBorder({\n ...values,\n className: resolveClassName(borderProps?.className, values),\n })}\n >\n <AriaTextArea\n {...textAreaProps}\n className={(values) =>\n textArea({\n ...values,\n className: resolveClassName(textAreaProps?.className, values),\n })\n }\n />\n </div>\n </>\n )}\n </AriaTextField>\n );\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXX0="]}
|
|
1
|
+
{"version":3,"mappings":"AAmDQ,mBASI,KATJ;AA/CR;AAAA,EACE,aAAa;AAAA,EACb,YAAY;AAAA,OACP;AACP,SAAS,cAAc,wBAAwB;AAC/C,SAAS,wBAAwB;AAEjC,SAAS,UAAU;AAEnB,MAAM,iBAAiB,GAAG;AAAA,EACxB,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,YAAY;AAAA,MACV,MAAM,CAAC,gBAAgB;AAAA,IACzB;AAAA,EACF;AACF,CAAC;AAED,MAAM,WAAW,GAAG;AAAA,EAClB,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,YAAY;AAAA,MACV,MAAM,CAAC,mBAAmB;AAAA,IAC5B;AAAA,EACF;AACF,CAAC;AAEM,SAAS,SAAS;AAAA,EACvB,gBAAgB,CAAC;AAAA,EACjB,cAAc,CAAC;AAAA,EACf;AAAA,EACA,GAAG;AACL,GAGG;AACD,SACE,oBAAC,iBAAe,GAAG,OAChB,WAAC,WACA,iCACG;AAAA,WAAO,aAAa,aAAa,SAAS,MAAM,IAAI;AAAA,IACrD;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,WAAW,eAAe;AAAA,UACxB,GAAG;AAAA,UACH,WAAW,iBAAiB,aAAa,WAAW,MAAM;AAAA,QAC5D,CAAC;AAAA,QAED;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACJ,WAAW,CAACA,YACV,SAAS;AAAA,cACP,GAAGA;AAAA,cACH,WAAW,iBAAiB,eAAe,WAAWA,OAAM;AAAA,YAC9D,CAAC;AAAA;AAAA,QAEL;AAAA;AAAA,IACF;AAAA,KACF,GAEJ;AAEJ","names":["values"],"sources":["../../../src/components/text-area.tsx"],"sourcesContent":["import type {\n TextFieldProps as AriaTextFieldProps,\n TextAreaProps,\n} from \"react-aria-components\";\nimport {\n TextField as AriaTextField,\n TextArea as AriaTextArea,\n} from \"react-aria-components\";\nimport { goldGradient, disabledGradient } from \"../utilities/gradient.js\";\nimport { resolveClassName } from \"../utilities/resolve-class-name.js\";\nimport { ComponentProps } from \"react\";\nimport { tv } from \"../utilities/tv.js\";\n\nconst textAreaBorder = tv({\n base: [\n \"flex bg-gradient-to-t p-px outline-none\",\n goldGradient,\n \"focus-within:from-lol-gold-400 focus-within:via-lol-gold-200 focus-within:to-lol-gold-100\",\n ],\n variants: {\n isDisabled: {\n true: [disabledGradient],\n },\n },\n});\n\nconst textArea = tv({\n base: [\n \"bg-lol-grey-hextech-black min-h-full w-full px-3 py-2 outline-none\",\n \"text-lol-gold-100 font-spiegel text-xs tracking-wide\",\n \"focus-within:from-lol-grey-200 focus-within:via-lol-grey-300 focus-within:to-lol-grey-300 focus-within:bg-gradient-to-t\",\n ],\n variants: {\n isDisabled: {\n true: [\"text-lol-grey-150\"],\n },\n },\n});\n\nexport function TextArea({\n textAreaProps = {},\n borderProps = {},\n children,\n ...props\n}: AriaTextFieldProps & {\n textAreaProps?: TextAreaProps;\n borderProps?: ComponentProps<\"div\">;\n}) {\n return (\n <AriaTextField {...props}>\n {(values) => (\n <>\n {typeof children === \"function\" ? children(values) : children}\n <div\n {...borderProps}\n className={textAreaBorder({\n ...values,\n className: resolveClassName(borderProps?.className, values),\n })}\n >\n <AriaTextArea\n {...textAreaProps}\n className={(values) =>\n textArea({\n ...values,\n className: resolveClassName(textAreaProps?.className, values),\n })\n }\n />\n </div>\n </>\n )}\n </AriaTextField>\n );\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXX0="]}
|
|
@@ -3,9 +3,9 @@ import {
|
|
|
3
3
|
TextField as AriaTextField,
|
|
4
4
|
Input as AriaInput
|
|
5
5
|
} from "react-aria-components";
|
|
6
|
-
import { goldGradient, disabledGradient } from "../utilities/gradient";
|
|
7
|
-
import { resolveClassName } from "../utilities/resolve-class-name";
|
|
8
|
-
import { tv } from "../utilities/tv";
|
|
6
|
+
import { goldGradient, disabledGradient } from "../utilities/gradient.js";
|
|
7
|
+
import { resolveClassName } from "../utilities/resolve-class-name.js";
|
|
8
|
+
import { tv } from "../utilities/tv.js";
|
|
9
9
|
const textFieldBorder = tv({
|
|
10
10
|
base: [
|
|
11
11
|
"flex bg-gradient-to-t p-px outline-none",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAmDQ,mBASI,KATJ;AA/CR;AAAA,EACE,aAAa;AAAA,EACb,SAAS;AAAA,OACJ;AACP,SAAS,cAAc,wBAAwB;AAC/C,SAAS,wBAAwB;AAEjC,SAAS,UAAU;AAEnB,MAAM,kBAAkB,GAAG;AAAA,EACzB,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,YAAY;AAAA,MACV,MAAM,CAAC,gBAAgB;AAAA,IACzB;AAAA,EACF;AACF,CAAC;AAED,MAAM,YAAY,GAAG;AAAA,EACnB,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,YAAY;AAAA,MACV,MAAM,CAAC,mBAAmB;AAAA,IAC5B;AAAA,EACF;AACF,CAAC;AAEM,SAAS,UAAU;AAAA,EACxB,aAAa,CAAC;AAAA,EACd,cAAc,CAAC;AAAA,EACf;AAAA,EACA,GAAG;AACL,GAGG;AACD,SACE,oBAAC,iBAAe,GAAG,OAChB,WAAC,WACA,iCACG;AAAA,WAAO,aAAa,aAAa,SAAS,MAAM,IAAI;AAAA,IACrD;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,WAAW,gBAAgB;AAAA,UACzB,GAAG;AAAA,UACH,WAAW,iBAAiB,aAAa,WAAW,MAAM;AAAA,QAC5D,CAAC;AAAA,QAED;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACJ,GAAG;AAAA,YACJ,WAAW,CAACA,YACV,UAAU;AAAA,cACR,GAAGA;AAAA,cACH,WAAW,iBAAiB,YAAY,WAAWA,OAAM;AAAA,YAC3D,CAAC;AAAA;AAAA,QAEL;AAAA;AAAA,IACF;AAAA,KACF,GAEJ;AAEJ","names":["values"],"sources":["../../../src/components/text-field.tsx"],"sourcesContent":["import type {\n TextFieldProps as AriaTextFieldProps,\n InputProps,\n} from \"react-aria-components\";\nimport {\n TextField as AriaTextField,\n Input as AriaInput,\n} from \"react-aria-components\";\nimport { goldGradient, disabledGradient } from \"../utilities/gradient\";\nimport { resolveClassName } from \"../utilities/resolve-class-name\";\nimport { ComponentProps } from \"react\";\nimport { tv } from \"../utilities/tv\";\n\nconst textFieldBorder = tv({\n base: [\n \"flex bg-gradient-to-t p-px outline-none\",\n goldGradient,\n \"focus-within:from-lol-gold-400 focus-within:via-lol-gold-200 focus-within:to-lol-gold-100\",\n ],\n variants: {\n isDisabled: {\n true: [disabledGradient],\n },\n },\n});\n\nconst textField = tv({\n base: [\n \"bg-lol-grey-hextech-black min-h-full w-full px-3 py-2 outline-none\",\n \"text-lol-gold-100 font-spiegel text-xs tracking-wide\",\n \"focus-within:from-lol-grey-200 focus-within:via-lol-grey-300 focus-within:to-lol-grey-300 focus-within:bg-gradient-to-t\",\n ],\n variants: {\n isDisabled: {\n true: [\"text-lol-grey-150\"],\n },\n },\n});\n\nexport function TextField({\n inputProps = {},\n borderProps = {},\n children,\n ...props\n}: AriaTextFieldProps & {\n inputProps?: InputProps;\n borderProps?: ComponentProps<\"div\">;\n}) {\n return (\n <AriaTextField {...props}>\n {(values) => (\n <>\n {typeof children === \"function\" ? children(values) : children}\n <div\n {...borderProps}\n className={textFieldBorder({\n ...values,\n className: resolveClassName(borderProps?.className, values),\n })}\n >\n <AriaInput\n type=\"text\"\n {...inputProps}\n className={(values) =>\n textField({\n ...values,\n className: resolveClassName(inputProps?.className, values),\n })\n }\n />\n </div>\n </>\n )}\n </AriaTextField>\n );\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXX0="]}
|
|
1
|
+
{"version":3,"mappings":"AAmDQ,mBASI,KATJ;AA/CR;AAAA,EACE,aAAa;AAAA,EACb,SAAS;AAAA,OACJ;AACP,SAAS,cAAc,wBAAwB;AAC/C,SAAS,wBAAwB;AAEjC,SAAS,UAAU;AAEnB,MAAM,kBAAkB,GAAG;AAAA,EACzB,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,YAAY;AAAA,MACV,MAAM,CAAC,gBAAgB;AAAA,IACzB;AAAA,EACF;AACF,CAAC;AAED,MAAM,YAAY,GAAG;AAAA,EACnB,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,YAAY;AAAA,MACV,MAAM,CAAC,mBAAmB;AAAA,IAC5B;AAAA,EACF;AACF,CAAC;AAEM,SAAS,UAAU;AAAA,EACxB,aAAa,CAAC;AAAA,EACd,cAAc,CAAC;AAAA,EACf;AAAA,EACA,GAAG;AACL,GAGG;AACD,SACE,oBAAC,iBAAe,GAAG,OAChB,WAAC,WACA,iCACG;AAAA,WAAO,aAAa,aAAa,SAAS,MAAM,IAAI;AAAA,IACrD;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,WAAW,gBAAgB;AAAA,UACzB,GAAG;AAAA,UACH,WAAW,iBAAiB,aAAa,WAAW,MAAM;AAAA,QAC5D,CAAC;AAAA,QAED;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACJ,GAAG;AAAA,YACJ,WAAW,CAACA,YACV,UAAU;AAAA,cACR,GAAGA;AAAA,cACH,WAAW,iBAAiB,YAAY,WAAWA,OAAM;AAAA,YAC3D,CAAC;AAAA;AAAA,QAEL;AAAA;AAAA,IACF;AAAA,KACF,GAEJ;AAEJ","names":["values"],"sources":["../../../src/components/text-field.tsx"],"sourcesContent":["import type {\n TextFieldProps as AriaTextFieldProps,\n InputProps,\n} from \"react-aria-components\";\nimport {\n TextField as AriaTextField,\n Input as AriaInput,\n} from \"react-aria-components\";\nimport { goldGradient, disabledGradient } from \"../utilities/gradient.js\";\nimport { resolveClassName } from \"../utilities/resolve-class-name.js\";\nimport { ComponentProps } from \"react\";\nimport { tv } from \"../utilities/tv.js\";\n\nconst textFieldBorder = tv({\n base: [\n \"flex bg-gradient-to-t p-px outline-none\",\n goldGradient,\n \"focus-within:from-lol-gold-400 focus-within:via-lol-gold-200 focus-within:to-lol-gold-100\",\n ],\n variants: {\n isDisabled: {\n true: [disabledGradient],\n },\n },\n});\n\nconst textField = tv({\n base: [\n \"bg-lol-grey-hextech-black min-h-full w-full px-3 py-2 outline-none\",\n \"text-lol-gold-100 font-spiegel text-xs tracking-wide\",\n \"focus-within:from-lol-grey-200 focus-within:via-lol-grey-300 focus-within:to-lol-grey-300 focus-within:bg-gradient-to-t\",\n ],\n variants: {\n isDisabled: {\n true: [\"text-lol-grey-150\"],\n },\n },\n});\n\nexport function TextField({\n inputProps = {},\n borderProps = {},\n children,\n ...props\n}: AriaTextFieldProps & {\n inputProps?: InputProps;\n borderProps?: ComponentProps<\"div\">;\n}) {\n return (\n <AriaTextField {...props}>\n {(values) => (\n <>\n {typeof children === \"function\" ? children(values) : children}\n <div\n {...borderProps}\n className={textFieldBorder({\n ...values,\n className: resolveClassName(borderProps?.className, values),\n })}\n >\n <AriaInput\n type=\"text\"\n {...inputProps}\n className={(values) =>\n textField({\n ...values,\n className: resolveClassName(inputProps?.className, values),\n })\n }\n />\n </div>\n </>\n )}\n </AriaTextField>\n );\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXX0="]}
|
|
@@ -2,8 +2,8 @@ import { jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import {
|
|
3
3
|
ToggleButton as AriaToggleButton
|
|
4
4
|
} from "react-aria-components";
|
|
5
|
-
import { tv } from "../utilities/tv";
|
|
6
|
-
import { resolveClassName } from "../utilities/resolve-class-name";
|
|
5
|
+
import { tv } from "../utilities/tv.js";
|
|
6
|
+
import { resolveClassName } from "../utilities/resolve-class-name.js";
|
|
7
7
|
import {
|
|
8
8
|
dimmedGradient,
|
|
9
9
|
goldGradient,
|
|
@@ -13,7 +13,7 @@ import {
|
|
|
13
13
|
hextechGradientHover,
|
|
14
14
|
hextechGradientPressed,
|
|
15
15
|
disabledGradient
|
|
16
|
-
} from "../utilities/gradient";
|
|
16
|
+
} from "../utilities/gradient.js";
|
|
17
17
|
const toggleButtonBorder = tv({
|
|
18
18
|
base: "bg-gradient-to-t p-0.5 outline-none transition-colors duration-200",
|
|
19
19
|
variants: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"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","names":[],"sources":["../../../src/components/toggle-button.tsx"],"sourcesContent":["import { ComponentProps } from \"react\";\nimport {\n ToggleButton as AriaToggleButton,\n type ToggleButtonProps as AriaToggleButtonProps,\n} from \"react-aria-components\";\nimport { tv } from \"../utilities/tv\";\nimport { resolveClassName } from \"../utilities/resolve-class-name\";\nimport {\n dimmedGradient,\n goldGradient,\n goldGradientHover,\n goldGradientPressed,\n hextechGradient,\n hextechGradientHover,\n hextechGradientPressed,\n disabledGradient,\n} from \"../utilities/gradient\";\n\nexport type ToggleButtonShape = \"round\" | \"square\" | \"normal\";\nexport type ToggleButtonPreset = \"gold\" | \"hextech\" | \"dimmed\";\n\nconst toggleButtonBorder = tv({\n base: \"bg-gradient-to-t p-0.5 outline-none transition-colors duration-200\",\n variants: {\n preset: {\n gold: \"\",\n hextech: \"\",\n dimmed: dimmedGradient,\n },\n shape: {\n round: \"aspect-square rounded-full\",\n square: \"aspect-square\",\n normal: \"\",\n },\n isHovered: {\n true: \"\",\n },\n isPressed: {\n true: \"\",\n },\n isDisabled: {\n true: \"\",\n },\n isFocused: {\n true: \"\",\n },\n isFocusVisible: {\n true: \"\",\n },\n isSelected: {\n true: \"\",\n },\n thin: {\n true: \"p-px\",\n },\n },\n compoundVariants: [\n {\n preset: [\"dimmed\"],\n isSelected: true,\n class: [goldGradient],\n },\n {\n preset: [\"gold\"],\n class: goldGradient,\n },\n {\n preset: [\"gold\", \"dimmed\"],\n isHovered: true,\n class: goldGradientHover,\n },\n {\n preset: [\"gold\", \"dimmed\"],\n isPressed: true,\n class: goldGradientPressed,\n },\n {\n preset: [\"gold\", \"dimmed\"],\n isDisabled: true,\n class: disabledGradient,\n },\n {\n preset: [\"gold\"],\n isFocusVisible: true,\n class: \"outline outline-offset-2 outline-yellow-50\",\n },\n {\n preset: [\"hextech\"],\n class: hextechGradient,\n },\n {\n preset: [\"hextech\"],\n isHovered: true,\n class: hextechGradientHover,\n },\n {\n preset: [\"hextech\"],\n isPressed: true,\n class: hextechGradientPressed,\n },\n {\n preset: [\"hextech\"],\n isDisabled: true,\n class: disabledGradient,\n },\n ],\n});\nconst toggleButton = tv({\n base: \"text-lol-gold-300 font-beaufort block font-bold uppercase tracking-wide transition-colors duration-200\",\n variants: {\n preset: {\n gold: \"bg-lol-grey-300\",\n hextech: \"text-lol-blue-100 bg-lol-grey-300\",\n dimmed: \"bg-lol-grey-hextech-black\",\n },\n isHovered: {\n true: \"text-lol-gold-100\",\n },\n isPressed: {\n true: \"text-lol-grey-150\",\n },\n isDisabled: {\n true: \"text-lol-grey-150\",\n },\n isFocused: {\n true: \"\",\n },\n isSelected: {\n true: [\n hextechGradient,\n \"text-lol-blue-100 shadow-lol-grey-300 bg-gradient-to-t shadow shadow-inner\",\n ],\n },\n isFocusVisible: {\n true: \"\",\n },\n shape: {\n round: \"rounded-full\",\n square: \"\",\n normal: \"\",\n },\n },\n compoundVariants: [\n {\n preset: [\"gold\", \"hextech\", \"dimmed\"],\n class: \"px-4 py-2\",\n },\n {\n preset: [\"hextech\"],\n isHovered: true,\n class: \"text-lol-blue-100\",\n },\n {\n preset: [\"hextech\"],\n isPressed: true,\n class: \"text-lol-blue-400\",\n },\n {\n preset: [\"hextech\"],\n isSelected: true,\n class: \"\",\n },\n\n {\n shape: [\"round\", \"square\"],\n class:\n \"flex aspect-square h-7 items-center justify-center p-0 font-black leading-none\",\n },\n ],\n});\n\ninterface ToggleButtonProps extends AriaToggleButtonProps {\n innerProps?: ComponentProps<\"span\">;\n preset?: ToggleButtonPreset;\n thin?: boolean;\n shape?: ToggleButtonShape;\n}\n\nexport function ToggleButton({\n children,\n className,\n innerProps = {},\n preset = \"gold\",\n shape = \"normal\",\n thin = preset === \"dimmed\" ? true : false,\n ...props\n}: ToggleButtonProps) {\n return (\n <AriaToggleButton\n {...props}\n className={(values) =>\n toggleButtonBorder({\n ...values,\n preset,\n shape,\n thin,\n className: resolveClassName(className, values),\n })\n }\n >\n {(values) => (\n <span\n {...innerProps}\n className={toggleButton({\n ...values,\n preset,\n shape,\n className: resolveClassName(innerProps.className, values),\n })}\n style={\n {\n // backgroundImage: hextechMagic,\n // backgroundPosition: \"center\",\n }\n }\n >\n {typeof children === \"function\" ? children(values) : children}\n </span>\n )}\n </AriaToggleButton>\n );\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXX0="]}
|
|
1
|
+
{"version":3,"mappings":"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","names":[],"sources":["../../../src/components/toggle-button.tsx"],"sourcesContent":["import { ComponentProps } from \"react\";\nimport {\n ToggleButton as AriaToggleButton,\n type ToggleButtonProps as AriaToggleButtonProps,\n} from \"react-aria-components\";\nimport { tv } from \"../utilities/tv.js\";\nimport { resolveClassName } from \"../utilities/resolve-class-name.js\";\nimport {\n dimmedGradient,\n goldGradient,\n goldGradientHover,\n goldGradientPressed,\n hextechGradient,\n hextechGradientHover,\n hextechGradientPressed,\n disabledGradient,\n} from \"../utilities/gradient.js\";\n\nexport type ToggleButtonShape = \"round\" | \"square\" | \"normal\";\nexport type ToggleButtonPreset = \"gold\" | \"hextech\" | \"dimmed\";\n\nconst toggleButtonBorder = tv({\n base: \"bg-gradient-to-t p-0.5 outline-none transition-colors duration-200\",\n variants: {\n preset: {\n gold: \"\",\n hextech: \"\",\n dimmed: dimmedGradient,\n },\n shape: {\n round: \"aspect-square rounded-full\",\n square: \"aspect-square\",\n normal: \"\",\n },\n isHovered: {\n true: \"\",\n },\n isPressed: {\n true: \"\",\n },\n isDisabled: {\n true: \"\",\n },\n isFocused: {\n true: \"\",\n },\n isFocusVisible: {\n true: \"\",\n },\n isSelected: {\n true: \"\",\n },\n thin: {\n true: \"p-px\",\n },\n },\n compoundVariants: [\n {\n preset: [\"dimmed\"],\n isSelected: true,\n class: [goldGradient],\n },\n {\n preset: [\"gold\"],\n class: goldGradient,\n },\n {\n preset: [\"gold\", \"dimmed\"],\n isHovered: true,\n class: goldGradientHover,\n },\n {\n preset: [\"gold\", \"dimmed\"],\n isPressed: true,\n class: goldGradientPressed,\n },\n {\n preset: [\"gold\", \"dimmed\"],\n isDisabled: true,\n class: disabledGradient,\n },\n {\n preset: [\"gold\"],\n isFocusVisible: true,\n class: \"outline outline-offset-2 outline-yellow-50\",\n },\n {\n preset: [\"hextech\"],\n class: hextechGradient,\n },\n {\n preset: [\"hextech\"],\n isHovered: true,\n class: hextechGradientHover,\n },\n {\n preset: [\"hextech\"],\n isPressed: true,\n class: hextechGradientPressed,\n },\n {\n preset: [\"hextech\"],\n isDisabled: true,\n class: disabledGradient,\n },\n ],\n});\nconst toggleButton = tv({\n base: \"text-lol-gold-300 font-beaufort block font-bold uppercase tracking-wide transition-colors duration-200\",\n variants: {\n preset: {\n gold: \"bg-lol-grey-300\",\n hextech: \"text-lol-blue-100 bg-lol-grey-300\",\n dimmed: \"bg-lol-grey-hextech-black\",\n },\n isHovered: {\n true: \"text-lol-gold-100\",\n },\n isPressed: {\n true: \"text-lol-grey-150\",\n },\n isDisabled: {\n true: \"text-lol-grey-150\",\n },\n isFocused: {\n true: \"\",\n },\n isSelected: {\n true: [\n hextechGradient,\n \"text-lol-blue-100 shadow-lol-grey-300 bg-gradient-to-t shadow shadow-inner\",\n ],\n },\n isFocusVisible: {\n true: \"\",\n },\n shape: {\n round: \"rounded-full\",\n square: \"\",\n normal: \"\",\n },\n },\n compoundVariants: [\n {\n preset: [\"gold\", \"hextech\", \"dimmed\"],\n class: \"px-4 py-2\",\n },\n {\n preset: [\"hextech\"],\n isHovered: true,\n class: \"text-lol-blue-100\",\n },\n {\n preset: [\"hextech\"],\n isPressed: true,\n class: \"text-lol-blue-400\",\n },\n {\n preset: [\"hextech\"],\n isSelected: true,\n class: \"\",\n },\n\n {\n shape: [\"round\", \"square\"],\n class:\n \"flex aspect-square h-7 items-center justify-center p-0 font-black leading-none\",\n },\n ],\n});\n\ninterface ToggleButtonProps extends AriaToggleButtonProps {\n innerProps?: ComponentProps<\"span\">;\n preset?: ToggleButtonPreset;\n thin?: boolean;\n shape?: ToggleButtonShape;\n}\n\nexport function ToggleButton({\n children,\n className,\n innerProps = {},\n preset = \"gold\",\n shape = \"normal\",\n thin = preset === \"dimmed\" ? true : false,\n ...props\n}: ToggleButtonProps) {\n return (\n <AriaToggleButton\n {...props}\n className={(values) =>\n toggleButtonBorder({\n ...values,\n preset,\n shape,\n thin,\n className: resolveClassName(className, values),\n })\n }\n >\n {(values) => (\n <span\n {...innerProps}\n className={toggleButton({\n ...values,\n preset,\n shape,\n className: resolveClassName(innerProps.className, values),\n })}\n style={\n {\n // backgroundImage: hextechMagic,\n // backgroundPosition: \"center\",\n }\n }\n >\n {typeof children === \"function\" ? children(values) : children}\n </span>\n )}\n </AriaToggleButton>\n );\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXX0="]}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Tooltip as AriaTooltip, OverlayArrow } from "react-aria-components";
|
|
3
|
-
import { goldGradient } from "../utilities/gradient";
|
|
4
|
-
import { resolveClassName } from "../utilities/resolve-class-name";
|
|
5
|
-
import { tv } from "../utilities/tv";
|
|
3
|
+
import { goldGradient } from "../utilities/gradient.js";
|
|
4
|
+
import { resolveClassName } from "../utilities/resolve-class-name.js";
|
|
5
|
+
import { tv } from "../utilities/tv.js";
|
|
6
6
|
const tooltipBorder = tv({
|
|
7
7
|
base: ["w-[280px] bg-gradient-to-t p-0.5 drop-shadow-lg", goldGradient],
|
|
8
8
|
variants: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAkEc,mBAEI,KAFJ;AAjEd,SAAS,WAAW,aAAa,oBAAoB;AACrD,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,UAAU;AAEnB,MAAM,gBAAgB,GAAG;AAAA,EACvB,MAAM,CAAC,mDAAmD,YAAY;AAAA,EACtE,UAAU;AAAA,IACR,YAAY;AAAA,MACV,MAAM;AAAA,IACR;AAAA,IACA,WAAW;AAAA,MACT,MAAM;AAAA,IACR;AAAA,IACA,WAAW;AAAA,MACT,QAAQ;AAAA,MACR,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AAAA,EACF;AACF,CAAC;AAED,MAAM,qBAAqB,GAAG;AAAA,EAC5B,MAAM;AAAA,EACN,UAAU;AAAA,IACR,WAAW;AAAA,MACT,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,EACF;AACF,CAAC;AAED,MAAM,eAAe,GAAG;AAAA,EACtB,MAAM;AAAA,EACN,UAAU;AAAA,IACR,WAAW;AAAA,MACT,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,EACF;AACF,CAAC;AAEM,SAAS,QAAQ,EAAE,UAAU,GAAG,MAAM,GAAiB;AAC5D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,CAAC,WACV,cAAc;AAAA,QACZ,GAAG;AAAA,QACH,WAAW,iBAAiB,OAAO,WAAW,MAAM;AAAA,MACtD,CAAC;AAAA,MAGF,WAAC,WACA,iCACE;AAAA,4BAAC,gBAAa,WAAU,2BACrB,WAACA,YACA,iCACE;AAAA,8BAAC,SAAI,SAAQ,aAAY,WAAW,mBAAmBA,OAAM,GAC3D,8BAAC,UAAK,GAAE,mBAAkB,GAC5B;AAAA,UACA,oBAAC,SAAI,SAAQ,aAAY,WAAW,aAAaA,OAAM,GACrD,8BAAC,UAAK,GAAE,mBAAkB,GAC5B;AAAA,WACF,GAEJ;AAAA,QACA,oBAAC,SAAI,WAAU,mBACZ,iBAAO,aAAa,aAAa,SAAS,MAAM,IAAI,UACvD;AAAA,SACF;AAAA;AAAA,EAEJ;AAEJ;AAEA,SAAS,sBAAsB","names":["values"],"sources":["../../../src/components/tooltip.tsx"],"sourcesContent":["import type { TooltipProps } from \"react-aria-components\";\nimport { Tooltip as AriaTooltip, OverlayArrow } from \"react-aria-components\";\nimport { goldGradient } from \"../utilities/gradient\";\nimport { resolveClassName } from \"../utilities/resolve-class-name\";\nimport { tv } from \"../utilities/tv\";\n\nconst tooltipBorder = tv({\n base: [\"w-[280px] bg-gradient-to-t p-0.5 drop-shadow-lg\", goldGradient],\n variants: {\n isEntering: {\n true: \"animate-in fade-in data-[placement=bottom]:slide-in-from-top-1 data-[placement=top]:slide-in-from-bottom-1 fill-mode-forwards duration-200 ease-out\",\n },\n isExiting: {\n true: \"animate-out fade-out data-[placement=bottom]:slide-out-to-top-1 data-[placement=top]:slide-out-to-bottom-1 fill-mode-forwards duration-150 ease-in\",\n },\n placement: {\n bottom: \"mt-2\",\n top: \"mb-2\",\n center: \"\",\n left: \"\",\n right: \"\",\n },\n },\n});\n\nconst tooltipArrowBorder = tv({\n base: \"fill-lol-gold-500 absolute block h-5 w-5\",\n variants: {\n placement: {\n top: \"-left-0.5 -translate-y-[1px]\",\n bottom: \"fill-lol-gold-200 -left-0.5 -translate-y-[3px] rotate-180\",\n left: \"fill-lol-gold-400 -top-0.5 -translate-x-px -rotate-90\",\n right: \"fill-lol-gold-400 -top-0.5 -translate-x-[3px] rotate-90\",\n center: \"\",\n },\n },\n});\n\nconst tooltipArrow = tv({\n base: \"fill-lol-grey-300 block h-4 w-4\",\n variants: {\n placement: {\n top: \"-translate-y-0.5\",\n bottom: \"translate-y-0.5 rotate-180\",\n left: \"-translate-x-0.5 -rotate-90\",\n right: \"translate-x-0.5 rotate-90\",\n center: \"\",\n },\n },\n});\n\nexport function Tooltip({ children, ...props }: TooltipProps) {\n return (\n <AriaTooltip\n {...props}\n className={(values) =>\n tooltipBorder({\n ...values,\n className: resolveClassName(props?.className, values),\n })\n }\n >\n {(values) => (\n <>\n <OverlayArrow className=\"translate-y-1 transform\">\n {(values) => (\n <>\n <svg viewBox=\"0 0 12 12\" className={tooltipArrowBorder(values)}>\n <path d=\"M0 0,L6 6,L12 0\" />\n </svg>\n <svg viewBox=\"0 0 12 12\" className={tooltipArrow(values)}>\n <path d=\"M0 0,L6 6,L12 0\" />\n </svg>\n </>\n )}\n </OverlayArrow>\n <div className=\"bg-lol-grey-300\">\n {typeof children === \"function\" ? children(values) : children}\n </div>\n </>\n )}\n </AriaTooltip>\n );\n}\n\nexport { TooltipTrigger } from \"react-aria-components\";\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXX0="]}
|
|
1
|
+
{"version":3,"mappings":"AAkEc,mBAEI,KAFJ;AAjEd,SAAS,WAAW,aAAa,oBAAoB;AACrD,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,UAAU;AAEnB,MAAM,gBAAgB,GAAG;AAAA,EACvB,MAAM,CAAC,mDAAmD,YAAY;AAAA,EACtE,UAAU;AAAA,IACR,YAAY;AAAA,MACV,MAAM;AAAA,IACR;AAAA,IACA,WAAW;AAAA,MACT,MAAM;AAAA,IACR;AAAA,IACA,WAAW;AAAA,MACT,QAAQ;AAAA,MACR,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AAAA,EACF;AACF,CAAC;AAED,MAAM,qBAAqB,GAAG;AAAA,EAC5B,MAAM;AAAA,EACN,UAAU;AAAA,IACR,WAAW;AAAA,MACT,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,EACF;AACF,CAAC;AAED,MAAM,eAAe,GAAG;AAAA,EACtB,MAAM;AAAA,EACN,UAAU;AAAA,IACR,WAAW;AAAA,MACT,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,EACF;AACF,CAAC;AAEM,SAAS,QAAQ,EAAE,UAAU,GAAG,MAAM,GAAiB;AAC5D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,CAAC,WACV,cAAc;AAAA,QACZ,GAAG;AAAA,QACH,WAAW,iBAAiB,OAAO,WAAW,MAAM;AAAA,MACtD,CAAC;AAAA,MAGF,WAAC,WACA,iCACE;AAAA,4BAAC,gBAAa,WAAU,2BACrB,WAACA,YACA,iCACE;AAAA,8BAAC,SAAI,SAAQ,aAAY,WAAW,mBAAmBA,OAAM,GAC3D,8BAAC,UAAK,GAAE,mBAAkB,GAC5B;AAAA,UACA,oBAAC,SAAI,SAAQ,aAAY,WAAW,aAAaA,OAAM,GACrD,8BAAC,UAAK,GAAE,mBAAkB,GAC5B;AAAA,WACF,GAEJ;AAAA,QACA,oBAAC,SAAI,WAAU,mBACZ,iBAAO,aAAa,aAAa,SAAS,MAAM,IAAI,UACvD;AAAA,SACF;AAAA;AAAA,EAEJ;AAEJ;AAEA,SAAS,sBAAsB","names":["values"],"sources":["../../../src/components/tooltip.tsx"],"sourcesContent":["import type { TooltipProps } from \"react-aria-components\";\nimport { Tooltip as AriaTooltip, OverlayArrow } from \"react-aria-components\";\nimport { goldGradient } from \"../utilities/gradient.js\";\nimport { resolveClassName } from \"../utilities/resolve-class-name.js\";\nimport { tv } from \"../utilities/tv.js\";\n\nconst tooltipBorder = tv({\n base: [\"w-[280px] bg-gradient-to-t p-0.5 drop-shadow-lg\", goldGradient],\n variants: {\n isEntering: {\n true: \"animate-in fade-in data-[placement=bottom]:slide-in-from-top-1 data-[placement=top]:slide-in-from-bottom-1 fill-mode-forwards duration-200 ease-out\",\n },\n isExiting: {\n true: \"animate-out fade-out data-[placement=bottom]:slide-out-to-top-1 data-[placement=top]:slide-out-to-bottom-1 fill-mode-forwards duration-150 ease-in\",\n },\n placement: {\n bottom: \"mt-2\",\n top: \"mb-2\",\n center: \"\",\n left: \"\",\n right: \"\",\n },\n },\n});\n\nconst tooltipArrowBorder = tv({\n base: \"fill-lol-gold-500 absolute block h-5 w-5\",\n variants: {\n placement: {\n top: \"-left-0.5 -translate-y-[1px]\",\n bottom: \"fill-lol-gold-200 -left-0.5 -translate-y-[3px] rotate-180\",\n left: \"fill-lol-gold-400 -top-0.5 -translate-x-px -rotate-90\",\n right: \"fill-lol-gold-400 -top-0.5 -translate-x-[3px] rotate-90\",\n center: \"\",\n },\n },\n});\n\nconst tooltipArrow = tv({\n base: \"fill-lol-grey-300 block h-4 w-4\",\n variants: {\n placement: {\n top: \"-translate-y-0.5\",\n bottom: \"translate-y-0.5 rotate-180\",\n left: \"-translate-x-0.5 -rotate-90\",\n right: \"translate-x-0.5 rotate-90\",\n center: \"\",\n },\n },\n});\n\nexport function Tooltip({ children, ...props }: TooltipProps) {\n return (\n <AriaTooltip\n {...props}\n className={(values) =>\n tooltipBorder({\n ...values,\n className: resolveClassName(props?.className, values),\n })\n }\n >\n {(values) => (\n <>\n <OverlayArrow className=\"translate-y-1 transform\">\n {(values) => (\n <>\n <svg viewBox=\"0 0 12 12\" className={tooltipArrowBorder(values)}>\n <path d=\"M0 0,L6 6,L12 0\" />\n </svg>\n <svg viewBox=\"0 0 12 12\" className={tooltipArrow(values)}>\n <path d=\"M0 0,L6 6,L12 0\" />\n </svg>\n </>\n )}\n </OverlayArrow>\n <div className=\"bg-lol-grey-300\">\n {typeof children === \"function\" ? children(values) : children}\n </div>\n </>\n )}\n </AriaTooltip>\n );\n}\n\nexport { TooltipTrigger } from \"react-aria-components\";\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXX0="]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,SAAS,qBAAqB;AAC9B,SAAS,UAAU;AAenB,MAAM,UAAU,GAAG;AAAA,EACjB,MAAM;AAAA,EACN,UAAU;AAAA,IACR,OAAO;AAAA,MACL,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,IACd;AAAA,IACA,QAAQ;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,EACF;AACF,CAAC;AAEM,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GAA8B;AAC5B,QAAM,WAAW,MAAM;AAEvB,SAAO,cAAc,UAAU;AAAA,IAC7B,GAAG;AAAA,IACH,WAAW,QAAQ,EAAE,QAAQ,OAAO,UAAU,CAAC;AAAA,EACjD,CAAC;AACH","names":[],"sources":["../../../../src/components/typography/heading.tsx"],"sourcesContent":["import { createElement } from \"react\";\nimport { tv } from \"../../utilities/tv\";\n\nexport type HeadingColor = \"gold-100\" | \"gold-200\" | \"gold-400\" | \"grey-100\";\nexport type HeadingElement = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\";\n\ninterface HeadingProps\n extends React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLHeadingElement>,\n HTMLHeadingElement\n > {\n preset?: HeadingElement;\n color?: HeadingColor;\n as?: HeadingElement | \"span\";\n}\n\nconst heading = tv({\n base: \"font-beaufort scroll-m-20 uppercase\",\n variants: {\n color: {\n \"gold-100\": \"text-lol-gold-100\",\n \"gold-200\": \"text-lol-gold-200\",\n \"gold-400\": \"text-lol-gold-400\",\n \"grey-100\": \"text-lol-grey-100\",\n },\n preset: {\n h1: \"text-lol-h1\",\n h2: \"text-lol-h2\",\n h3: \"text-lol-h3\",\n h4: \"text-lol-h4\",\n h5: \"text-lol-h5\",\n },\n },\n});\n\nexport function Heading({\n as,\n preset = \"h1\",\n color = \"gold-100\",\n className,\n ...rest\n}: HeadingProps): JSX.Element {\n const resultAs = as ?? preset;\n\n return createElement(resultAs, {\n ...rest,\n className: heading({ preset, color, className }),\n });\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXX0="]}
|
|
1
|
+
{"version":3,"mappings":"AAAA,SAAS,qBAAqB;AAC9B,SAAS,UAAU;AAenB,MAAM,UAAU,GAAG;AAAA,EACjB,MAAM;AAAA,EACN,UAAU;AAAA,IACR,OAAO;AAAA,MACL,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,IACd;AAAA,IACA,QAAQ;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,EACF;AACF,CAAC;AAEM,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GAA8B;AAC5B,QAAM,WAAW,MAAM;AAEvB,SAAO,cAAc,UAAU;AAAA,IAC7B,GAAG;AAAA,IACH,WAAW,QAAQ,EAAE,QAAQ,OAAO,UAAU,CAAC;AAAA,EACjD,CAAC;AACH","names":[],"sources":["../../../../src/components/typography/heading.tsx"],"sourcesContent":["import { createElement } from \"react\";\nimport { tv } from \"../../utilities/tv.js\";\n\nexport type HeadingColor = \"gold-100\" | \"gold-200\" | \"gold-400\" | \"grey-100\";\nexport type HeadingElement = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\";\n\ninterface HeadingProps\n extends React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLHeadingElement>,\n HTMLHeadingElement\n > {\n preset?: HeadingElement;\n color?: HeadingColor;\n as?: HeadingElement | \"span\";\n}\n\nconst heading = tv({\n base: \"font-beaufort scroll-m-20 uppercase\",\n variants: {\n color: {\n \"gold-100\": \"text-lol-gold-100\",\n \"gold-200\": \"text-lol-gold-200\",\n \"gold-400\": \"text-lol-gold-400\",\n \"grey-100\": \"text-lol-grey-100\",\n },\n preset: {\n h1: \"text-lol-h1\",\n h2: \"text-lol-h2\",\n h3: \"text-lol-h3\",\n h4: \"text-lol-h4\",\n h5: \"text-lol-h5\",\n },\n },\n});\n\nexport function Heading({\n as,\n preset = \"h1\",\n color = \"gold-100\",\n className,\n ...rest\n}: HeadingProps): JSX.Element {\n const resultAs = as ?? preset;\n\n return createElement(resultAs, {\n ...rest,\n className: heading({ preset, color, className }),\n });\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXX0="]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,SAAS,qBAAqB;AAC9B,SAAS,UAAU;AACnB;AAAA,EAEE,SAAS;AAAA,OACJ;AAYP,MAAM,iBAAkD;AAAA,EACtD,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,gBAAgB;AAAA,EAChB,MAAM;AACR;AAEA,MAAM,OAAO,GAAG;AAAA,EACd,MAAM;AAAA,EACN,UAAU;AAAA,IACR,OAAO;AAAA,MACL,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,IACd;AAAA,IACA,QAAQ;AAAA,MACN,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,gBAAgB;AAAA,MAChB,MAAM;AAAA,IACR;AAAA,EACF;AACF,CAAC;AAWM,SAAS,KAAK;AAAA,EACnB,KAAK;AAAA,EACL,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GAA2B;AACzB,QAAM,cAAc,MAAM,eAAe,MAAM;AAC/C,SAAO,cAAc,aAAa;AAAA,IAChC,GAAG;AAAA,IACH,WAAW,KAAK,EAAE,QAAQ,OAAO,UAAU,CAAC;AAAA,EAC9C,CAAC;AACH;AAOO,SAAS,MAAM;AAAA,EACpB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GAA4B;AAC1B,SAAO,cAAc,WAAW;AAAA,IAC9B,GAAG;AAAA,IACH,WAAW,KAAK,EAAE,QAAQ,OAAO,UAAU,CAAC;AAAA,EAC9C,CAAC;AACH","names":[],"sources":["../../../../src/components/typography/text.tsx"],"sourcesContent":["import { createElement } from \"react\";\nimport { tv } from \"../../utilities/tv\";\nimport {\n type LabelProps as AriaLabelProps,\n Label as AriaLabel,\n} from \"react-aria-components\";\n\nexport type TextColor = \"grey-100\" | \"grey-150\" | \"gold-100\";\nexport type TextElement = \"p\" | \"span\" | \"div\";\nexport type TextPreset =\n | \"sm\"\n | \"base\"\n | \"md\"\n | \"lg\"\n | \"large-number\"\n | \"stat\";\n\nconst presetElements: Record<TextPreset, TextElement> = {\n sm: \"p\",\n base: \"p\",\n md: \"p\",\n lg: \"p\",\n \"large-number\": \"span\",\n stat: \"span\",\n};\n\nconst text = tv({\n base: \"font-spiegel\",\n variants: {\n color: {\n \"grey-100\": \"text-lol-grey-100\",\n \"grey-150\": \"text-lol-grey-150\",\n \"gold-100\": \"text-lol-gold-100\",\n },\n preset: {\n sm: \"text-lol-sm\",\n base: \"text-lol-base\",\n md: \"text-lol-md\",\n lg: \"text-lol-lg\",\n label: \"text-lol-label\",\n \"large-number\": \"text-lol-large-number font-beaufort italic\",\n stat: \"text-lol-stat font-beaufort\",\n },\n },\n});\n\ninterface TextProps\n extends React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLElement>,\n HTMLElement\n > {\n preset?: TextPreset;\n color?: TextColor;\n as?: TextElement;\n}\nexport function Text({\n as = \"p\",\n preset = \"base\",\n color = \"grey-100\",\n className,\n ...rest\n}: TextProps): JSX.Element {\n const elementType = as ?? presetElements[preset];\n return createElement(elementType, {\n ...rest,\n className: text({ preset, color, className }),\n });\n}\n\ninterface LabelProps extends AriaLabelProps {\n preset?: TextPreset | 'label';\n color?: TextColor;\n as?: TextElement;\n}\nexport function Label({\n preset = \"sm\",\n color = \"grey-100\",\n className,\n ...rest\n}: LabelProps): JSX.Element {\n return createElement(AriaLabel, {\n ...rest,\n className: text({ preset, color, className }),\n });\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXX0="]}
|
|
1
|
+
{"version":3,"mappings":"AAAA,SAAS,qBAAqB;AAC9B,SAAS,UAAU;AACnB;AAAA,EAEE,SAAS;AAAA,OACJ;AAYP,MAAM,iBAAkD;AAAA,EACtD,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,gBAAgB;AAAA,EAChB,MAAM;AACR;AAEA,MAAM,OAAO,GAAG;AAAA,EACd,MAAM;AAAA,EACN,UAAU;AAAA,IACR,OAAO;AAAA,MACL,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,IACd;AAAA,IACA,QAAQ;AAAA,MACN,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,gBAAgB;AAAA,MAChB,MAAM;AAAA,IACR;AAAA,EACF;AACF,CAAC;AAWM,SAAS,KAAK;AAAA,EACnB,KAAK;AAAA,EACL,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GAA2B;AACzB,QAAM,cAAc,MAAM,eAAe,MAAM;AAC/C,SAAO,cAAc,aAAa;AAAA,IAChC,GAAG;AAAA,IACH,WAAW,KAAK,EAAE,QAAQ,OAAO,UAAU,CAAC;AAAA,EAC9C,CAAC;AACH;AAOO,SAAS,MAAM;AAAA,EACpB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GAA4B;AAC1B,SAAO,cAAc,WAAW;AAAA,IAC9B,GAAG;AAAA,IACH,WAAW,KAAK,EAAE,QAAQ,OAAO,UAAU,CAAC;AAAA,EAC9C,CAAC;AACH","names":[],"sources":["../../../../src/components/typography/text.tsx"],"sourcesContent":["import { createElement } from \"react\";\nimport { tv } from \"../../utilities/tv.js\";\nimport {\n type LabelProps as AriaLabelProps,\n Label as AriaLabel,\n} from \"react-aria-components\";\n\nexport type TextColor = \"grey-100\" | \"grey-150\" | \"gold-100\";\nexport type TextElement = \"p\" | \"span\" | \"div\";\nexport type TextPreset =\n | \"sm\"\n | \"base\"\n | \"md\"\n | \"lg\"\n | \"large-number\"\n | \"stat\";\n\nconst presetElements: Record<TextPreset, TextElement> = {\n sm: \"p\",\n base: \"p\",\n md: \"p\",\n lg: \"p\",\n \"large-number\": \"span\",\n stat: \"span\",\n};\n\nconst text = tv({\n base: \"font-spiegel\",\n variants: {\n color: {\n \"grey-100\": \"text-lol-grey-100\",\n \"grey-150\": \"text-lol-grey-150\",\n \"gold-100\": \"text-lol-gold-100\",\n },\n preset: {\n sm: \"text-lol-sm\",\n base: \"text-lol-base\",\n md: \"text-lol-md\",\n lg: \"text-lol-lg\",\n label: \"text-lol-label\",\n \"large-number\": \"text-lol-large-number font-beaufort italic\",\n stat: \"text-lol-stat font-beaufort\",\n },\n },\n});\n\ninterface TextProps\n extends React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLElement>,\n HTMLElement\n > {\n preset?: TextPreset;\n color?: TextColor;\n as?: TextElement;\n}\nexport function Text({\n as = \"p\",\n preset = \"base\",\n color = \"grey-100\",\n className,\n ...rest\n}: TextProps): JSX.Element {\n const elementType = as ?? presetElements[preset];\n return createElement(elementType, {\n ...rest,\n className: text({ preset, color, className }),\n });\n}\n\ninterface LabelProps extends AriaLabelProps {\n preset?: TextPreset | 'label';\n color?: TextColor;\n as?: TextElement;\n}\nexport function Label({\n preset = \"sm\",\n color = \"grey-100\",\n className,\n ...rest\n}: LabelProps): JSX.Element {\n return createElement(AriaLabel, {\n ...rest,\n className: text({ preset, color, className }),\n });\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXX0="]}
|
package/dist/es/index.d.ts
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
export * from "./components/accordion";
|
|
2
|
-
export * from "./components/button";
|
|
3
|
-
export * from "./components/card";
|
|
4
|
-
export * from "./components/checkbox";
|
|
5
|
-
export * from "./components/divider";
|
|
6
|
-
export * from "./components/modal";
|
|
7
|
-
export * from "./components/number-field";
|
|
8
|
-
export * from "./components/progress-bar";
|
|
9
|
-
export * from "./components/radio-group";
|
|
10
|
-
export * from "./components/search-field";
|
|
11
|
-
export * from "./components/select";
|
|
12
|
-
export * from "./components/slider/slider";
|
|
13
|
-
export * from "./components/spinner/spinner";
|
|
14
|
-
export * from "./components/switch";
|
|
15
|
-
export * from "./components/tabs";
|
|
16
|
-
export * from "./components/text-area";
|
|
17
|
-
export * from "./components/text-field";
|
|
18
|
-
export * from "./components/toggle-button";
|
|
19
|
-
export * from "./components/tooltip";
|
|
20
|
-
export * from "./components/typography/heading";
|
|
21
|
-
export * from "./components/typography/text";
|
|
22
|
-
export * from "./utilities/gradient";
|
|
23
|
-
export * from "./utilities/tv";
|
|
1
|
+
export * from "./components/accordion.js";
|
|
2
|
+
export * from "./components/button.js";
|
|
3
|
+
export * from "./components/card.js";
|
|
4
|
+
export * from "./components/checkbox.js";
|
|
5
|
+
export * from "./components/divider.js";
|
|
6
|
+
export * from "./components/modal.js";
|
|
7
|
+
export * from "./components/number-field.js";
|
|
8
|
+
export * from "./components/progress-bar.js";
|
|
9
|
+
export * from "./components/radio-group.js";
|
|
10
|
+
export * from "./components/search-field.js";
|
|
11
|
+
export * from "./components/select.js";
|
|
12
|
+
export * from "./components/slider/slider.js";
|
|
13
|
+
export * from "./components/spinner/spinner.js";
|
|
14
|
+
export * from "./components/switch.js";
|
|
15
|
+
export * from "./components/tabs.js";
|
|
16
|
+
export * from "./components/text-area.js";
|
|
17
|
+
export * from "./components/text-field.js";
|
|
18
|
+
export * from "./components/toggle-button.js";
|
|
19
|
+
export * from "./components/tooltip.js";
|
|
20
|
+
export * from "./components/typography/heading.js";
|
|
21
|
+
export * from "./components/typography/text.js";
|
|
22
|
+
export * from "./utilities/gradient.js";
|
|
23
|
+
export * from "./utilities/tv.js";
|
package/dist/es/index.js
CHANGED
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
export * from "./components/accordion";
|
|
2
|
-
export * from "./components/button";
|
|
3
|
-
export * from "./components/card";
|
|
4
|
-
export * from "./components/checkbox";
|
|
5
|
-
export * from "./components/divider";
|
|
6
|
-
export * from "./components/modal";
|
|
7
|
-
export * from "./components/number-field";
|
|
8
|
-
export * from "./components/progress-bar";
|
|
9
|
-
export * from "./components/radio-group";
|
|
10
|
-
export * from "./components/search-field";
|
|
11
|
-
export * from "./components/select";
|
|
12
|
-
export * from "./components/slider/slider";
|
|
13
|
-
export * from "./components/spinner/spinner";
|
|
14
|
-
export * from "./components/switch";
|
|
15
|
-
export * from "./components/tabs";
|
|
16
|
-
export * from "./components/text-area";
|
|
17
|
-
export * from "./components/text-field";
|
|
18
|
-
export * from "./components/toggle-button";
|
|
19
|
-
export * from "./components/tooltip";
|
|
20
|
-
export * from "./components/typography/heading";
|
|
21
|
-
export * from "./components/typography/text";
|
|
22
|
-
export * from "./utilities/gradient";
|
|
23
|
-
export * from "./utilities/tv";
|
|
1
|
+
export * from "./components/accordion.js";
|
|
2
|
+
export * from "./components/button.js";
|
|
3
|
+
export * from "./components/card.js";
|
|
4
|
+
export * from "./components/checkbox.js";
|
|
5
|
+
export * from "./components/divider.js";
|
|
6
|
+
export * from "./components/modal.js";
|
|
7
|
+
export * from "./components/number-field.js";
|
|
8
|
+
export * from "./components/progress-bar.js";
|
|
9
|
+
export * from "./components/radio-group.js";
|
|
10
|
+
export * from "./components/search-field.js";
|
|
11
|
+
export * from "./components/select.js";
|
|
12
|
+
export * from "./components/slider/slider.js";
|
|
13
|
+
export * from "./components/spinner/spinner.js";
|
|
14
|
+
export * from "./components/switch.js";
|
|
15
|
+
export * from "./components/tabs.js";
|
|
16
|
+
export * from "./components/text-area.js";
|
|
17
|
+
export * from "./components/text-field.js";
|
|
18
|
+
export * from "./components/toggle-button.js";
|
|
19
|
+
export * from "./components/tooltip.js";
|
|
20
|
+
export * from "./components/typography/heading.js";
|
|
21
|
+
export * from "./components/typography/text.js";
|
|
22
|
+
export * from "./utilities/gradient.js";
|
|
23
|
+
export * from "./utilities/tv.js";
|
|
24
24
|
|
|
25
25
|
//# sourceMappingURL=index.js.map
|
package/dist/es/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc","names":[],"sources":["../../src/index.ts"],"sourcesContent":["export * from \"./components/accordion\";\nexport * from \"./components/button\";\nexport * from \"./components/card\";\nexport * from \"./components/checkbox\";\nexport * from \"./components/divider\";\nexport * from \"./components/modal\";\nexport * from \"./components/number-field\";\nexport * from \"./components/progress-bar\";\nexport * from \"./components/radio-group\";\nexport * from \"./components/search-field\";\nexport * from \"./components/select\";\nexport * from \"./components/slider/slider\";\nexport * from \"./components/spinner/spinner\";\nexport * from \"./components/switch\";\nexport * from \"./components/tabs\";\nexport * from \"./components/text-area\";\nexport * from \"./components/text-field\";\nexport * from \"./components/toggle-button\";\nexport * from \"./components/tooltip\";\nexport * from \"./components/typography/heading\";\nexport * from \"./components/typography/text\";\nexport * from \"./utilities/gradient\";\nexport * from \"./utilities/tv\";\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXX0="]}
|
|
1
|
+
{"version":3,"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc","names":[],"sources":["../../src/index.ts"],"sourcesContent":["export * from \"./components/accordion.js\";\nexport * from \"./components/button.js\";\nexport * from \"./components/card.js\";\nexport * from \"./components/checkbox.js\";\nexport * from \"./components/divider.js\";\nexport * from \"./components/modal.js\";\nexport * from \"./components/number-field.js\";\nexport * from \"./components/progress-bar.js\";\nexport * from \"./components/radio-group.js\";\nexport * from \"./components/search-field.js\";\nexport * from \"./components/select.js\";\nexport * from \"./components/slider/slider.js\";\nexport * from \"./components/spinner/spinner.js\";\nexport * from \"./components/switch.js\";\nexport * from \"./components/tabs.js\";\nexport * from \"./components/text-area.js\";\nexport * from \"./components/text-field.js\";\nexport * from \"./components/toggle-button.js\";\nexport * from \"./components/tooltip.js\";\nexport * from \"./components/typography/heading.js\";\nexport * from \"./components/typography/text.js\";\nexport * from \"./utilities/gradient.js\";\nexport * from \"./utilities/tv.js\";\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXX0="]}
|