@traefik-labs/faency 12.3.4 → 12.3.5
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/colors/deepBlue.cjs.map +1 -1
- package/dist/colors/deepBlue.js.map +1 -1
- package/dist/colors/elevation.cjs.map +1 -1
- package/dist/colors/elevation.js.map +1 -1
- package/dist/colors/grayBlue.cjs.map +1 -1
- package/dist/colors/grayBlue.js.map +1 -1
- package/dist/colors/index.cjs.map +1 -1
- package/dist/colors/index.js.map +1 -1
- package/dist/colors/neon.cjs.map +1 -1
- package/dist/colors/neon.js.map +1 -1
- package/dist/colors/orange.cjs.map +1 -1
- package/dist/colors/orange.js.map +1 -1
- package/dist/colors/red.cjs.map +1 -1
- package/dist/colors/red.js.map +1 -1
- package/dist/components/Accordion/Accordion.cjs.map +1 -1
- package/dist/components/Accordion/Accordion.js.map +1 -1
- package/dist/components/Accordion/Accordion.themes.cjs.map +1 -1
- package/dist/components/Accordion/Accordion.themes.js.map +1 -1
- package/dist/components/Alert/Alert.cjs.map +1 -1
- package/dist/components/Alert/Alert.js.map +1 -1
- package/dist/components/AriaTable/AriaTable.cjs.map +1 -1
- package/dist/components/AriaTable/AriaTable.js.map +1 -1
- package/dist/components/Avatar/Avatar.cjs.map +1 -1
- package/dist/components/Avatar/Avatar.js.map +1 -1
- package/dist/components/Avatar/Avatar.vanilla.cjs.map +1 -1
- package/dist/components/Avatar/Avatar.vanilla.js.map +1 -1
- package/dist/components/Badge/Badge.cjs.map +1 -1
- package/dist/components/Badge/Badge.js.map +1 -1
- package/dist/components/Badge/Badge.theme.cjs.map +1 -1
- package/dist/components/Badge/Badge.theme.js.map +1 -1
- package/dist/components/Badge/Badge.themes.cjs.map +1 -1
- package/dist/components/Badge/Badge.themes.js.map +1 -1
- package/dist/components/Badge/Badge.vanilla.cjs.map +1 -1
- package/dist/components/Badge/Badge.vanilla.js.map +1 -1
- package/dist/components/Blockquote/Blockquote.cjs.map +1 -1
- package/dist/components/Blockquote/Blockquote.js.map +1 -1
- package/dist/components/Blockquote/Blockquote.vanilla.cjs.map +1 -1
- package/dist/components/Blockquote/Blockquote.vanilla.css.cjs +1 -0
- package/dist/components/Blockquote/Blockquote.vanilla.css.js +1 -0
- package/dist/components/Blockquote/Blockquote.vanilla.js.map +1 -1
- package/dist/components/Box/Box.cjs.map +1 -1
- package/dist/components/Box/Box.js.map +1 -1
- package/dist/components/Box/Box.vanilla.cjs.map +1 -1
- package/dist/components/Box/Box.vanilla.js.map +1 -1
- package/dist/components/Bubble/Bubble.cjs.map +1 -1
- package/dist/components/Bubble/Bubble.js.map +1 -1
- package/dist/components/Bubble/Bubble.vanilla.cjs.map +1 -1
- package/dist/components/Bubble/Bubble.vanilla.js.map +1 -1
- package/dist/components/Button/Button.cjs.map +1 -1
- package/dist/components/Button/Button.js.map +1 -1
- package/dist/components/Button/Button.themes.cjs.map +1 -1
- package/dist/components/Button/Button.themes.js.map +1 -1
- package/dist/components/Button/Button.vanilla.cjs.map +1 -1
- package/dist/components/Button/Button.vanilla.js.map +1 -1
- package/dist/components/ButtonSwitch/ButtonSwitch.cjs.map +1 -1
- package/dist/components/ButtonSwitch/ButtonSwitch.js.map +1 -1
- package/dist/components/ButtonSwitch/ButtonSwitch.themes.cjs.map +1 -1
- package/dist/components/ButtonSwitch/ButtonSwitch.themes.js.map +1 -1
- package/dist/components/ButtonSwitch/ButtonSwitch.vanilla.cjs.map +1 -1
- package/dist/components/ButtonSwitch/ButtonSwitch.vanilla.js.map +1 -1
- package/dist/components/Card/Card.cjs.map +1 -1
- package/dist/components/Card/Card.js.map +1 -1
- package/dist/components/Card/Card.theme.cjs.map +1 -1
- package/dist/components/Card/Card.theme.js.map +1 -1
- package/dist/components/Card/Card.themes.cjs.map +1 -1
- package/dist/components/Card/Card.themes.js.map +1 -1
- package/dist/components/Card/Card.vanilla.cjs.map +1 -1
- package/dist/components/Card/Card.vanilla.css.cjs +1 -0
- package/dist/components/Card/Card.vanilla.css.js +1 -0
- package/dist/components/Card/Card.vanilla.js.map +1 -1
- package/dist/components/Checkbox/Checkbox.cjs.map +1 -1
- package/dist/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/components/Checkbox/Checkbox.themes.cjs.map +1 -1
- package/dist/components/Checkbox/Checkbox.themes.js.map +1 -1
- package/dist/components/CodeBlock/CodeBlock.cjs.map +1 -1
- package/dist/components/CodeBlock/CodeBlock.js.map +1 -1
- package/dist/components/CodeBlock/CodeBlock.themes.cjs.map +1 -1
- package/dist/components/CodeBlock/CodeBlock.themes.js.map +1 -1
- package/dist/components/CodeBlock/CodeBlock.vanilla.cjs.map +1 -1
- package/dist/components/CodeBlock/CodeBlock.vanilla.js.map +1 -1
- package/dist/components/CodeBlock/prism-extend.cjs.map +1 -1
- package/dist/components/CodeBlock/prism-extend.js.map +1 -1
- package/dist/components/Container/Container.cjs.map +1 -1
- package/dist/components/Container/Container.js.map +1 -1
- package/dist/components/Container/Container.vanilla.cjs.map +1 -1
- package/dist/components/Container/Container.vanilla.js.map +1 -1
- package/dist/components/DateTimePicker/DateTimePicker.cjs.map +1 -1
- package/dist/components/DateTimePicker/DateTimePicker.js.map +1 -1
- package/dist/components/DateTimePickerInput/DateTimePickerInput.cjs.map +1 -1
- package/dist/components/DateTimePickerInput/DateTimePickerInput.js.map +1 -1
- package/dist/components/Dialog/Dialog.cjs.map +1 -1
- package/dist/components/Dialog/Dialog.js.map +1 -1
- package/dist/components/Dialog/Dialog.themes.cjs.map +1 -1
- package/dist/components/Dialog/Dialog.themes.js.map +1 -1
- package/dist/components/DropdownMenu/DropdownMenu.cjs.map +1 -1
- package/dist/components/DropdownMenu/DropdownMenu.js.map +1 -1
- package/dist/components/DropdownMenu/styles.cjs.map +1 -1
- package/dist/components/DropdownMenu/styles.js.map +1 -1
- package/dist/components/Elevation/Elevation.cjs.map +1 -1
- package/dist/components/Elevation/Elevation.js.map +1 -1
- package/dist/components/Elevation/Elevation.vanilla.cjs.map +1 -1
- package/dist/components/Elevation/Elevation.vanilla.js.map +1 -1
- package/dist/components/FaencyProvider.cjs.map +1 -1
- package/dist/components/FaencyProvider.js.map +1 -1
- package/dist/components/Flex/Flex.cjs.map +1 -1
- package/dist/components/Flex/Flex.js.map +1 -1
- package/dist/components/Flex/Flex.vanilla.cjs.map +1 -1
- package/dist/components/Flex/Flex.vanilla.js.map +1 -1
- package/dist/components/Grid/Grid.cjs.map +1 -1
- package/dist/components/Grid/Grid.js.map +1 -1
- package/dist/components/Grid/Grid.vanilla.cjs.map +1 -1
- package/dist/components/Grid/Grid.vanilla.js.map +1 -1
- package/dist/components/Heading/Heading.cjs.map +1 -1
- package/dist/components/Heading/Heading.js.map +1 -1
- package/dist/components/Heading/Heading.themes.cjs.map +1 -1
- package/dist/components/Heading/Heading.themes.js.map +1 -1
- package/dist/components/IconButton/IconButton.cjs.map +1 -1
- package/dist/components/IconButton/IconButton.js.map +1 -1
- package/dist/components/IconButton/IconButton.themes.cjs.map +1 -1
- package/dist/components/IconButton/IconButton.themes.js.map +1 -1
- package/dist/components/IconButton/IconButton.vanilla.cjs.map +1 -1
- package/dist/components/IconButton/IconButton.vanilla.js.map +1 -1
- package/dist/components/Image/Image.cjs.map +1 -1
- package/dist/components/Image/Image.js.map +1 -1
- package/dist/components/Image/Image.vanilla.cjs.map +1 -1
- package/dist/components/Image/Image.vanilla.js.map +1 -1
- package/dist/components/Input/Input.cjs.map +1 -1
- package/dist/components/Input/Input.js.map +1 -1
- package/dist/components/Input/Input.theme.cjs.map +1 -1
- package/dist/components/Input/Input.theme.js.map +1 -1
- package/dist/components/Input/Input.themes.cjs.map +1 -1
- package/dist/components/Input/Input.themes.js.map +1 -1
- package/dist/components/Input/Input.vanilla.cjs.map +1 -1
- package/dist/components/Input/Input.vanilla.css.cjs +0 -1
- package/dist/components/Input/Input.vanilla.css.js +0 -1
- package/dist/components/Input/Input.vanilla.js.map +1 -1
- package/dist/components/Label/Label.cjs.map +1 -1
- package/dist/components/Label/Label.js.map +1 -1
- package/dist/components/Label/Label.vanilla.cjs.map +1 -1
- package/dist/components/Label/Label.vanilla.js.map +1 -1
- package/dist/components/Link/Link.cjs.map +1 -1
- package/dist/components/Link/Link.js.map +1 -1
- package/dist/components/Link/Link.themes.cjs.map +1 -1
- package/dist/components/Link/Link.themes.js.map +1 -1
- package/dist/components/List/List.cjs.map +1 -1
- package/dist/components/List/List.js.map +1 -1
- package/dist/components/List/List.themes.cjs.map +1 -1
- package/dist/components/List/List.themes.js.map +1 -1
- package/dist/components/Navigation/Navigation.cjs.map +1 -1
- package/dist/components/Navigation/Navigation.js.map +1 -1
- package/dist/components/Navigation/Navigation.themes.cjs.map +1 -1
- package/dist/components/Navigation/Navigation.themes.js.map +1 -1
- package/dist/components/NavigationMenu/NavigationMenu.cjs.map +1 -1
- package/dist/components/NavigationMenu/NavigationMenu.js.map +1 -1
- package/dist/components/NavigationTree/NavigationTreeContainer.cjs.map +1 -1
- package/dist/components/NavigationTree/NavigationTreeContainer.js.map +1 -1
- package/dist/components/NavigationTree/NavigationTreeDrawer.cjs.map +1 -1
- package/dist/components/NavigationTree/NavigationTreeDrawer.js.map +1 -1
- package/dist/components/NavigationTree/NavigationTreeItem.cjs.map +1 -1
- package/dist/components/NavigationTree/NavigationTreeItem.js.map +1 -1
- package/dist/components/Overlay.cjs.map +1 -1
- package/dist/components/Overlay.js.map +1 -1
- package/dist/components/Panel/Panel.cjs.map +1 -1
- package/dist/components/Panel/Panel.js.map +1 -1
- package/dist/components/Panel/Panel.theme.cjs.map +1 -1
- package/dist/components/Panel/Panel.theme.js.map +1 -1
- package/dist/components/Panel/Panel.vanilla.cjs.map +1 -1
- package/dist/components/Panel/Panel.vanilla.js.map +1 -1
- package/dist/components/Paragraph/Paragraph.cjs.map +1 -1
- package/dist/components/Paragraph/Paragraph.js.map +1 -1
- package/dist/components/Paragraph/Paragraph.vanilla.cjs.map +1 -1
- package/dist/components/Paragraph/Paragraph.vanilla.js.map +1 -1
- package/dist/components/Popover/Popover.cjs.map +1 -1
- package/dist/components/Popover/Popover.js.map +1 -1
- package/dist/components/Radio/Radio.cjs.map +1 -1
- package/dist/components/Radio/Radio.js.map +1 -1
- package/dist/components/Radio/Radio.themes.cjs.map +1 -1
- package/dist/components/Radio/Radio.themes.js.map +1 -1
- package/dist/components/RadioAccordion/RadioAccordion.cjs.map +1 -1
- package/dist/components/RadioAccordion/RadioAccordion.js.map +1 -1
- package/dist/components/Select/Select.cjs.map +1 -1
- package/dist/components/Select/Select.js.map +1 -1
- package/dist/components/Select/Select.themes.cjs.map +1 -1
- package/dist/components/Select/Select.themes.js.map +1 -1
- package/dist/components/SidePanel/SidePanel.cjs.map +1 -1
- package/dist/components/SidePanel/SidePanel.js.map +1 -1
- package/dist/components/SidePanel/SidePanel.themes.cjs.map +1 -1
- package/dist/components/SidePanel/SidePanel.themes.js.map +1 -1
- package/dist/components/Skeleton/Skeleton.cjs.map +1 -1
- package/dist/components/Skeleton/Skeleton.js.map +1 -1
- package/dist/components/Skeleton/Skeleton.themes.cjs.map +1 -1
- package/dist/components/Skeleton/Skeleton.themes.js.map +1 -1
- package/dist/components/Skeleton/Skeleton.vanilla.cjs.map +1 -1
- package/dist/components/Skeleton/Skeleton.vanilla.js.map +1 -1
- package/dist/components/Switch/Switch.cjs.map +1 -1
- package/dist/components/Switch/Switch.js.map +1 -1
- package/dist/components/Switch/Switch.themes.cjs.map +1 -1
- package/dist/components/Switch/Switch.themes.js.map +1 -1
- package/dist/components/Table/Table.cjs.map +1 -1
- package/dist/components/Table/Table.js.map +1 -1
- package/dist/components/Table/Table.themes.cjs.map +1 -1
- package/dist/components/Table/Table.themes.js.map +1 -1
- package/dist/components/Tabs/Tabs.cjs.map +1 -1
- package/dist/components/Tabs/Tabs.js.map +1 -1
- package/dist/components/Text/Text.cjs.map +1 -1
- package/dist/components/Text/Text.js.map +1 -1
- package/dist/components/Text/Text.themes.cjs.map +1 -1
- package/dist/components/Text/Text.themes.js.map +1 -1
- package/dist/components/TextField/TextField.cjs.map +1 -1
- package/dist/components/TextField/TextField.js.map +1 -1
- package/dist/components/TextField/TextField.vanilla.cjs.map +1 -1
- package/dist/components/TextField/TextField.vanilla.js.map +1 -1
- package/dist/components/Textarea/Textarea.cjs.map +1 -1
- package/dist/components/Textarea/Textarea.js.map +1 -1
- package/dist/components/Textarea/Textarea.theme.cjs.map +1 -1
- package/dist/components/Textarea/Textarea.theme.js.map +1 -1
- package/dist/components/Textarea/Textarea.themes.cjs.map +1 -1
- package/dist/components/Textarea/Textarea.themes.js.map +1 -1
- package/dist/components/Textarea/Textarea.vanilla.cjs.map +1 -1
- package/dist/components/Textarea/Textarea.vanilla.js.map +1 -1
- package/dist/components/Tooltip/Tooltip.cjs.map +1 -1
- package/dist/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/components/Tooltip/Tooltip.themes.cjs.map +1 -1
- package/dist/components/Tooltip/Tooltip.themes.js.map +1 -1
- package/dist/components/colorSchemeContext.cjs.map +1 -1
- package/dist/components/colorSchemeContext.js.map +1 -1
- package/dist/stitches.config.cjs.map +1 -1
- package/dist/stitches.config.js.map +1 -1
- package/dist/styles/cssProps.cjs.map +1 -1
- package/dist/styles/cssProps.js.map +1 -1
- package/dist/styles/themeContext.cjs.map +1 -1
- package/dist/styles/themeContext.js.map +1 -1
- package/dist/utils/deepMerge.cjs.map +1 -1
- package/dist/utils/deepMerge.js.map +1 -1
- package/dist/utils/getPrimaryColorInfo.cjs.map +1 -1
- package/dist/utils/getPrimaryColorInfo.js.map +1 -1
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.vanilla.cjs","names":[],"sources":["../../../components/Button/Button.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n PolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { buttonRecipe } from './Button.vanilla.css';\n\ntype ButtonRecipeVariants = RecipeVariants<typeof buttonRecipe>;\n\ninterface ButtonOwnProps extends Omit<ButtonRecipeVariants, never>, CSSProps {}\n\nexport type ButtonVanillaProps<C extends ElementType = 'button'> = PolymorphicComponentProps<\n C,\n ButtonOwnProps\n>;\n\ntype ButtonVanillaComponent = PolymorphicComponent<'button', ButtonVanillaProps<ElementType>>;\n\nconst ButtonVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'button'>(\n {\n as,\n className,\n css,\n style,\n size,\n variant,\n state,\n ghost,\n rounded,\n ...props\n }: ButtonVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || 'button';\n\n const { colors } = useVanillaExtractTheme();\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const mergedStyles = {\n ...cssStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n const recipeClass = buttonRecipe({ size, variant, state, ghost, rounded });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nButtonVanillaComponentImpl.displayName = 'ButtonVanilla';\n\nexport const ButtonVanilla = ButtonVanillaComponentImpl as ButtonVanillaComponent;\n"],"mappings":";;;;;;;;AAwBA,IAAM,8BAAA,GAAA,MAAA,aAEF,EACE,IACA,WACA,KACA,OACA,MACA,SACA,OACA,OACA,SACA,GAAG,SAEL,QACG;CACH,MAAM,YAAY,MAAM;CAExB,MAAM,EAAE,WAAW,qBAAA,
|
|
1
|
+
{"version":3,"file":"Button.vanilla.cjs","names":[],"sources":["../../../components/Button/Button.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n PolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { buttonRecipe } from './Button.vanilla.css';\n\ntype ButtonRecipeVariants = RecipeVariants<typeof buttonRecipe>;\n\ninterface ButtonOwnProps extends Omit<ButtonRecipeVariants, never>, CSSProps {}\n\nexport type ButtonVanillaProps<C extends ElementType = 'button'> = PolymorphicComponentProps<\n C,\n ButtonOwnProps\n>;\n\ntype ButtonVanillaComponent = PolymorphicComponent<'button', ButtonVanillaProps<ElementType>>;\n\nconst ButtonVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'button'>(\n {\n as,\n className,\n css,\n style,\n size,\n variant,\n state,\n ghost,\n rounded,\n ...props\n }: ButtonVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || 'button';\n\n const { colors } = useVanillaExtractTheme();\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const mergedStyles = {\n ...cssStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n const recipeClass = buttonRecipe({ size, variant, state, ghost, rounded });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nButtonVanillaComponentImpl.displayName = 'ButtonVanilla';\n\nexport const ButtonVanilla = ButtonVanillaComponentImpl as ButtonVanillaComponent;\n"],"mappings":";;;;;;;;AAwBA,IAAM,8BAAA,GAAA,MAAA,aAEF,EACE,IACA,WACA,KACA,OACA,MACA,SACA,OACA,OACA,SACA,GAAG,SAEL,QACG;CACH,MAAM,YAAY,MAAM;CAExB,MAAM,EAAE,WAAW,qBAAA,wBAAwB;CAE3C,MAAM,EAAE,OAAO,WAAW,SAAS,iBAAA,eAAe,KAAK,OAAO;CAE9D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,IAAA,GAAA,yBAAA,kBAAoB,KAAK;EAC1B;CAID,OACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EACO;EACL,WAAW,GALK,2BAAA,aAAa;GAAE;GAAM;GAAS;GAAO;GAAO;GAAS,CAKvD,CAAY,GAAG,aAAa,KAAK,MAAM;EACrD,OAAO;EACP,GAAI;EACJ,CAAA;EAGP;AAED,2BAA2B,cAAc;AAEzC,IAAa,gBAAgB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.vanilla.js","names":[],"sources":["../../../components/Button/Button.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n PolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { buttonRecipe } from './Button.vanilla.css';\n\ntype ButtonRecipeVariants = RecipeVariants<typeof buttonRecipe>;\n\ninterface ButtonOwnProps extends Omit<ButtonRecipeVariants, never>, CSSProps {}\n\nexport type ButtonVanillaProps<C extends ElementType = 'button'> = PolymorphicComponentProps<\n C,\n ButtonOwnProps\n>;\n\ntype ButtonVanillaComponent = PolymorphicComponent<'button', ButtonVanillaProps<ElementType>>;\n\nconst ButtonVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'button'>(\n {\n as,\n className,\n css,\n style,\n size,\n variant,\n state,\n ghost,\n rounded,\n ...props\n }: ButtonVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || 'button';\n\n const { colors } = useVanillaExtractTheme();\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const mergedStyles = {\n ...cssStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n const recipeClass = buttonRecipe({ size, variant, state, ghost, rounded });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nButtonVanillaComponentImpl.displayName = 'ButtonVanilla';\n\nexport const ButtonVanilla = ButtonVanillaComponentImpl as ButtonVanillaComponent;\n"],"mappings":";;;;;;;AAwBA,IAAM,6BAA6B,YAE/B,EACE,IACA,WACA,KACA,OACA,MACA,SACA,OACA,OACA,SACA,GAAG,SAEL,QACG;CACH,MAAM,YAAY,MAAM;CAExB,MAAM,EAAE,WAAW,
|
|
1
|
+
{"version":3,"file":"Button.vanilla.js","names":[],"sources":["../../../components/Button/Button.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n PolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { buttonRecipe } from './Button.vanilla.css';\n\ntype ButtonRecipeVariants = RecipeVariants<typeof buttonRecipe>;\n\ninterface ButtonOwnProps extends Omit<ButtonRecipeVariants, never>, CSSProps {}\n\nexport type ButtonVanillaProps<C extends ElementType = 'button'> = PolymorphicComponentProps<\n C,\n ButtonOwnProps\n>;\n\ntype ButtonVanillaComponent = PolymorphicComponent<'button', ButtonVanillaProps<ElementType>>;\n\nconst ButtonVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'button'>(\n {\n as,\n className,\n css,\n style,\n size,\n variant,\n state,\n ghost,\n rounded,\n ...props\n }: ButtonVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || 'button';\n\n const { colors } = useVanillaExtractTheme();\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const mergedStyles = {\n ...cssStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n const recipeClass = buttonRecipe({ size, variant, state, ghost, rounded });\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...props}\n />\n );\n },\n);\n\nButtonVanillaComponentImpl.displayName = 'ButtonVanilla';\n\nexport const ButtonVanilla = ButtonVanillaComponentImpl as ButtonVanillaComponent;\n"],"mappings":";;;;;;;AAwBA,IAAM,6BAA6B,YAE/B,EACE,IACA,WACA,KACA,OACA,MACA,SACA,OACA,OACA,SACA,GAAG,SAEL,QACG;CACH,MAAM,YAAY,MAAM;CAExB,MAAM,EAAE,WAAW,wBAAwB;CAE3C,MAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,OAAO;CAE9D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,GAAG,iBAAiB,KAAK;EAC1B;CAID,OACE,oBAAC,WAAD;EACO;EACL,WAAW,GALK,aAAa;GAAE;GAAM;GAAS;GAAO;GAAO;GAAS,CAKvD,CAAY,GAAG,aAAa,KAAK,MAAM;EACrD,OAAO;EACP,GAAI;EACJ,CAAA;EAGP;AAED,2BAA2B,cAAc;AAEzC,IAAa,gBAAgB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonSwitch.cjs","names":[],"sources":["../../../components/ButtonSwitch/ButtonSwitch.tsx"],"sourcesContent":["import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\n\nimport { styled } from '../../stitches.config';\n\nexport const ButtonSwitchContainer = styled(ToggleGroupPrimitive.Root, {\n display: 'inline-flex',\n bc: '$buttonSwitchContainerBg',\n borderRadius: '$3',\n p: '3px',\n gap: '$1',\n});\n\nexport const ButtonSwitchItem = styled(ToggleGroupPrimitive.Item, {\n display: 'inline-flex',\n bc: '$buttonSwitchOffBg',\n c: '$buttonSwitchOffColor',\n p: '$1',\n width: '$10',\n justifyContent: 'center',\n fontWeight: 600,\n border: 'none',\n position: 'relative',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n borderRadius: '$3',\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n borderRadius: '$3',\n },\n\n '&:focus-visible': {\n borderRadius: '$3',\n '&::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&::after': {\n opacity: 0.15,\n },\n },\n\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n '&::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&::after': {\n opacity: 0.05,\n },\n },\n },\n\n '&[data-state=on]': {\n bc: '$buttonSwitchActiveBg',\n c: '$buttonSwitchActiveColor',\n borderRadius: '$3',\n },\n});\n"],"mappings":";;;;;AAIA,IAAa,wBAAwB,wBAAA,OAAO,6BAAqB,MAAM;CACrE,SAAS;CACT,IAAI;CACJ,cAAc;CACd,GAAG;CACH,KAAK;
|
|
1
|
+
{"version":3,"file":"ButtonSwitch.cjs","names":[],"sources":["../../../components/ButtonSwitch/ButtonSwitch.tsx"],"sourcesContent":["import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\n\nimport { styled } from '../../stitches.config';\n\nexport const ButtonSwitchContainer = styled(ToggleGroupPrimitive.Root, {\n display: 'inline-flex',\n bc: '$buttonSwitchContainerBg',\n borderRadius: '$3',\n p: '3px',\n gap: '$1',\n});\n\nexport const ButtonSwitchItem = styled(ToggleGroupPrimitive.Item, {\n display: 'inline-flex',\n bc: '$buttonSwitchOffBg',\n c: '$buttonSwitchOffColor',\n p: '$1',\n width: '$10',\n justifyContent: 'center',\n fontWeight: 600,\n border: 'none',\n position: 'relative',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n borderRadius: '$3',\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n borderRadius: '$3',\n },\n\n '&:focus-visible': {\n borderRadius: '$3',\n '&::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&::after': {\n opacity: 0.15,\n },\n },\n\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n '&::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&::after': {\n opacity: 0.05,\n },\n },\n },\n\n '&[data-state=on]': {\n bc: '$buttonSwitchActiveBg',\n c: '$buttonSwitchActiveColor',\n borderRadius: '$3',\n },\n});\n"],"mappings":";;;;;AAIA,IAAa,wBAAwB,wBAAA,OAAO,6BAAqB,MAAM;CACrE,SAAS;CACT,IAAI;CACJ,cAAc;CACd,GAAG;CACH,KAAK;CACN,CAAC;AAEF,IAAa,mBAAmB,wBAAA,OAAO,6BAAqB,MAAM;CAChE,SAAS;CACT,IAAI;CACJ,GAAG;CACH,GAAG;CACH,OAAO;CACP,gBAAgB;CAChB,YAAY;CACZ,QAAQ;CACR,UAAU;CAEV,aAAa;EACX,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;EACP,cAAc;EACf;CACD,YAAY;EACV,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;EACP,cAAc;EACf;CAED,mBAAmB;EACjB,cAAc;EACd,aAAa,EACX,iBAAiB,6BAClB;EACD,YAAY,EACV,SAAS,KACV;EACF;CAED,UAAU,EACR,WAAW;EACT,QAAQ;EACR,aAAa,EACX,iBAAiB,6BAClB;EACD,YAAY,EACV,SAAS,KACV;EACF,EACF;CAED,oBAAoB;EAClB,IAAI;EACJ,GAAG;EACH,cAAc;EACf;CACF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonSwitch.js","names":[],"sources":["../../../components/ButtonSwitch/ButtonSwitch.tsx"],"sourcesContent":["import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\n\nimport { styled } from '../../stitches.config';\n\nexport const ButtonSwitchContainer = styled(ToggleGroupPrimitive.Root, {\n display: 'inline-flex',\n bc: '$buttonSwitchContainerBg',\n borderRadius: '$3',\n p: '3px',\n gap: '$1',\n});\n\nexport const ButtonSwitchItem = styled(ToggleGroupPrimitive.Item, {\n display: 'inline-flex',\n bc: '$buttonSwitchOffBg',\n c: '$buttonSwitchOffColor',\n p: '$1',\n width: '$10',\n justifyContent: 'center',\n fontWeight: 600,\n border: 'none',\n position: 'relative',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n borderRadius: '$3',\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n borderRadius: '$3',\n },\n\n '&:focus-visible': {\n borderRadius: '$3',\n '&::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&::after': {\n opacity: 0.15,\n },\n },\n\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n '&::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&::after': {\n opacity: 0.05,\n },\n },\n },\n\n '&[data-state=on]': {\n bc: '$buttonSwitchActiveBg',\n c: '$buttonSwitchActiveColor',\n borderRadius: '$3',\n },\n});\n"],"mappings":";;;AAIA,IAAa,wBAAwB,OAAO,qBAAqB,MAAM;CACrE,SAAS;CACT,IAAI;CACJ,cAAc;CACd,GAAG;CACH,KAAK;
|
|
1
|
+
{"version":3,"file":"ButtonSwitch.js","names":[],"sources":["../../../components/ButtonSwitch/ButtonSwitch.tsx"],"sourcesContent":["import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\n\nimport { styled } from '../../stitches.config';\n\nexport const ButtonSwitchContainer = styled(ToggleGroupPrimitive.Root, {\n display: 'inline-flex',\n bc: '$buttonSwitchContainerBg',\n borderRadius: '$3',\n p: '3px',\n gap: '$1',\n});\n\nexport const ButtonSwitchItem = styled(ToggleGroupPrimitive.Item, {\n display: 'inline-flex',\n bc: '$buttonSwitchOffBg',\n c: '$buttonSwitchOffColor',\n p: '$1',\n width: '$10',\n justifyContent: 'center',\n fontWeight: 600,\n border: 'none',\n position: 'relative',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n borderRadius: '$3',\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n borderRadius: '$3',\n },\n\n '&:focus-visible': {\n borderRadius: '$3',\n '&::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&::after': {\n opacity: 0.15,\n },\n },\n\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n '&::before': {\n backgroundColor: 'rgba(255, 255, 255, 0.15)',\n },\n '&::after': {\n opacity: 0.05,\n },\n },\n },\n\n '&[data-state=on]': {\n bc: '$buttonSwitchActiveBg',\n c: '$buttonSwitchActiveColor',\n borderRadius: '$3',\n },\n});\n"],"mappings":";;;AAIA,IAAa,wBAAwB,OAAO,qBAAqB,MAAM;CACrE,SAAS;CACT,IAAI;CACJ,cAAc;CACd,GAAG;CACH,KAAK;CACN,CAAC;AAEF,IAAa,mBAAmB,OAAO,qBAAqB,MAAM;CAChE,SAAS;CACT,IAAI;CACJ,GAAG;CACH,GAAG;CACH,OAAO;CACP,gBAAgB;CAChB,YAAY;CACZ,QAAQ;CACR,UAAU;CAEV,aAAa;EACX,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;EACP,cAAc;EACf;CACD,YAAY;EACV,WAAW;EACX,SAAS;EACT,UAAU;EACV,OAAO;EACP,cAAc;EACf;CAED,mBAAmB;EACjB,cAAc;EACd,aAAa,EACX,iBAAiB,6BAClB;EACD,YAAY,EACV,SAAS,KACV;EACF;CAED,UAAU,EACR,WAAW;EACT,QAAQ;EACR,aAAa,EACX,iBAAiB,6BAClB;EACD,YAAY,EACV,SAAS,KACV;EACF,EACF;CAED,oBAAoB;EAClB,IAAI;EACJ,GAAG;EACH,cAAc;EACf;CACF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonSwitch.themes.cjs","names":[],"sources":["../../../components/ButtonSwitch/ButtonSwitch.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n buttonSwitchContainerBg: Property.Color;\n buttonSwitchActiveBg: Property.Color;\n buttonSwitchOffBg: Property.Color;\n buttonSwitchOffColor: Property.Color;\n buttonSwitchActiveColor: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = () => ({\n buttonSwitchContainerBg: '$02dp',\n buttonSwitchActiveBg: '$primary',\n buttonSwitchOffBg: 'transparent',\n buttonSwitchOffColor: '$hiContrast',\n buttonSwitchActiveColor: 'white',\n });\n\n export const getDark: Factory = () => ({\n buttonSwitchContainerBg: '$02dp',\n buttonSwitchActiveBg: '$primary',\n buttonSwitchOffBg: 'transparent',\n buttonSwitchOffColor: '$hiContrast',\n buttonSwitchActiveColor: '$deepBlue2',\n });\n}\n"],"mappings":";AAIO,IAAA;;CAWQ,OAAA,kBAA2B;EACtC,yBAAyB;EACzB,sBAAsB;EACtB,mBAAmB;EACnB,sBAAsB;EACtB,yBAAyB;
|
|
1
|
+
{"version":3,"file":"ButtonSwitch.themes.cjs","names":[],"sources":["../../../components/ButtonSwitch/ButtonSwitch.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n buttonSwitchContainerBg: Property.Color;\n buttonSwitchActiveBg: Property.Color;\n buttonSwitchOffBg: Property.Color;\n buttonSwitchOffColor: Property.Color;\n buttonSwitchActiveColor: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = () => ({\n buttonSwitchContainerBg: '$02dp',\n buttonSwitchActiveBg: '$primary',\n buttonSwitchOffBg: 'transparent',\n buttonSwitchOffColor: '$hiContrast',\n buttonSwitchActiveColor: 'white',\n });\n\n export const getDark: Factory = () => ({\n buttonSwitchContainerBg: '$02dp',\n buttonSwitchActiveBg: '$primary',\n buttonSwitchOffBg: 'transparent',\n buttonSwitchOffColor: '$hiContrast',\n buttonSwitchActiveColor: '$deepBlue2',\n });\n}\n"],"mappings":";AAIO,IAAA;;CAWQ,OAAA,kBAA2B;EACtC,yBAAyB;EACzB,sBAAsB;EACtB,mBAAmB;EACnB,sBAAsB;EACtB,yBAAyB;EAC1B;CAEY,OAAA,iBAA0B;EACrC,yBAAyB;EACzB,sBAAsB;EACtB,mBAAmB;EACnB,sBAAsB;EACtB,yBAAyB;EAC1B;yBACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonSwitch.themes.js","names":[],"sources":["../../../components/ButtonSwitch/ButtonSwitch.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n buttonSwitchContainerBg: Property.Color;\n buttonSwitchActiveBg: Property.Color;\n buttonSwitchOffBg: Property.Color;\n buttonSwitchOffColor: Property.Color;\n buttonSwitchActiveColor: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = () => ({\n buttonSwitchContainerBg: '$02dp',\n buttonSwitchActiveBg: '$primary',\n buttonSwitchOffBg: 'transparent',\n buttonSwitchOffColor: '$hiContrast',\n buttonSwitchActiveColor: 'white',\n });\n\n export const getDark: Factory = () => ({\n buttonSwitchContainerBg: '$02dp',\n buttonSwitchActiveBg: '$primary',\n buttonSwitchOffBg: 'transparent',\n buttonSwitchOffColor: '$hiContrast',\n buttonSwitchActiveColor: '$deepBlue2',\n });\n}\n"],"mappings":";AAIO,IAAA;;CAWQ,OAAA,kBAA2B;EACtC,yBAAyB;EACzB,sBAAsB;EACtB,mBAAmB;EACnB,sBAAsB;EACtB,yBAAyB;
|
|
1
|
+
{"version":3,"file":"ButtonSwitch.themes.js","names":[],"sources":["../../../components/ButtonSwitch/ButtonSwitch.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n buttonSwitchContainerBg: Property.Color;\n buttonSwitchActiveBg: Property.Color;\n buttonSwitchOffBg: Property.Color;\n buttonSwitchOffColor: Property.Color;\n buttonSwitchActiveColor: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = () => ({\n buttonSwitchContainerBg: '$02dp',\n buttonSwitchActiveBg: '$primary',\n buttonSwitchOffBg: 'transparent',\n buttonSwitchOffColor: '$hiContrast',\n buttonSwitchActiveColor: 'white',\n });\n\n export const getDark: Factory = () => ({\n buttonSwitchContainerBg: '$02dp',\n buttonSwitchActiveBg: '$primary',\n buttonSwitchOffBg: 'transparent',\n buttonSwitchOffColor: '$hiContrast',\n buttonSwitchActiveColor: '$deepBlue2',\n });\n}\n"],"mappings":";AAIO,IAAA;;CAWQ,OAAA,kBAA2B;EACtC,yBAAyB;EACzB,sBAAsB;EACtB,mBAAmB;EACnB,sBAAsB;EACtB,yBAAyB;EAC1B;CAEY,OAAA,iBAA0B;EACrC,yBAAyB;EACzB,sBAAsB;EACtB,mBAAmB;EACnB,sBAAsB;EACtB,yBAAyB;EAC1B;yBACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonSwitch.vanilla.cjs","names":[],"sources":["../../../components/ButtonSwitch/ButtonSwitch.vanilla.tsx"],"sourcesContent":["import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n PolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { buttonSwitchContainer, buttonSwitchItem } from './ButtonSwitch.vanilla.css';\n\n// Container Component\ninterface ButtonSwitchContainerOwnProps extends CSSProps {\n type?: 'single' | 'multiple';\n value?: string | string[];\n defaultValue?: string | string[];\n onValueChange?: (value: any) => void;\n disabled?: boolean;\n rovingFocus?: boolean;\n loop?: boolean;\n orientation?: 'horizontal' | 'vertical';\n dir?: 'ltr' | 'rtl';\n}\n\nexport type ButtonSwitchContainerVanillaProps<C extends ElementType = 'div'> =\n PolymorphicComponentProps<C, ButtonSwitchContainerOwnProps>;\n\ntype ButtonSwitchContainerVanillaComponent = PolymorphicComponent<\n 'div',\n ButtonSwitchContainerVanillaProps<ElementType>\n>;\n\nconst ButtonSwitchContainerVanillaImpl = forwardRef(\n <C extends ElementType = 'div'>(\n { as, className, css, style, children, ...props }: ButtonSwitchContainerVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = (as || 'div') as any;\n const { colors } = useVanillaExtractTheme();\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const mergedStyles = {\n ...cssStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n if (as) {\n return (\n <Component\n ref={ref}\n className={`${buttonSwitchContainer} ${className || ''}`.trim()}\n style={mergedStyles}\n role=\"group\"\n {...props}\n >\n {children}\n </Component>\n );\n }\n\n return (\n <ToggleGroupPrimitive.Root\n ref={ref as any}\n className={`${buttonSwitchContainer} ${className || ''}`.trim()}\n style={mergedStyles}\n {...(props as any)}\n >\n {children}\n </ToggleGroupPrimitive.Root>\n );\n },\n);\n\nButtonSwitchContainerVanillaImpl.displayName = 'ButtonSwitchContainerVanilla';\n\nexport const ButtonSwitchContainerVanilla =\n ButtonSwitchContainerVanillaImpl as ButtonSwitchContainerVanillaComponent;\n\n// Item Component\ninterface ButtonSwitchItemOwnProps extends CSSProps {\n value: string;\n disabled?: boolean;\n}\n\nexport type ButtonSwitchItemVanillaProps<C extends ElementType = 'button'> =\n PolymorphicComponentProps<C, ButtonSwitchItemOwnProps>;\n\ntype ButtonSwitchItemVanillaComponent = PolymorphicComponent<\n 'button',\n ButtonSwitchItemVanillaProps<ElementType>\n>;\n\nconst ButtonSwitchItemVanillaImpl = forwardRef(\n <C extends ElementType = 'button'>(\n { as, className, css, style, children, ...props }: ButtonSwitchItemVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = (as || 'button') as any;\n const { colors } = useVanillaExtractTheme();\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const mergedStyles = {\n ...cssStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n if (as) {\n return (\n <Component\n ref={ref}\n className={`${buttonSwitchItem} ${className || ''}`.trim()}\n style={mergedStyles}\n role=\"radio\"\n {...props}\n >\n {children}\n </Component>\n );\n }\n\n return (\n <ToggleGroupPrimitive.Item\n ref={ref as any}\n className={`${buttonSwitchItem} ${className || ''}`.trim()}\n style={mergedStyles}\n {...(props as any)}\n >\n {children}\n </ToggleGroupPrimitive.Item>\n );\n },\n);\n\nButtonSwitchItemVanillaImpl.displayName = 'ButtonSwitchItemVanilla';\n\nexport const ButtonSwitchItemVanilla =\n ButtonSwitchItemVanillaImpl as ButtonSwitchItemVanillaComponent;\n"],"mappings":";;;;;;;;;;AAkCA,IAAM,oCAAA,GAAA,MAAA,aAEF,EAAE,IAAI,WAAW,KAAK,OAAO,UAAU,GAAG,SAC1C,QACG;CACH,MAAM,YAAa,MAAM;CACzB,MAAM,EAAE,WAAW,qBAAA,
|
|
1
|
+
{"version":3,"file":"ButtonSwitch.vanilla.cjs","names":[],"sources":["../../../components/ButtonSwitch/ButtonSwitch.vanilla.tsx"],"sourcesContent":["import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n PolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { buttonSwitchContainer, buttonSwitchItem } from './ButtonSwitch.vanilla.css';\n\n// Container Component\ninterface ButtonSwitchContainerOwnProps extends CSSProps {\n type?: 'single' | 'multiple';\n value?: string | string[];\n defaultValue?: string | string[];\n onValueChange?: (value: any) => void;\n disabled?: boolean;\n rovingFocus?: boolean;\n loop?: boolean;\n orientation?: 'horizontal' | 'vertical';\n dir?: 'ltr' | 'rtl';\n}\n\nexport type ButtonSwitchContainerVanillaProps<C extends ElementType = 'div'> =\n PolymorphicComponentProps<C, ButtonSwitchContainerOwnProps>;\n\ntype ButtonSwitchContainerVanillaComponent = PolymorphicComponent<\n 'div',\n ButtonSwitchContainerVanillaProps<ElementType>\n>;\n\nconst ButtonSwitchContainerVanillaImpl = forwardRef(\n <C extends ElementType = 'div'>(\n { as, className, css, style, children, ...props }: ButtonSwitchContainerVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = (as || 'div') as any;\n const { colors } = useVanillaExtractTheme();\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const mergedStyles = {\n ...cssStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n if (as) {\n return (\n <Component\n ref={ref}\n className={`${buttonSwitchContainer} ${className || ''}`.trim()}\n style={mergedStyles}\n role=\"group\"\n {...props}\n >\n {children}\n </Component>\n );\n }\n\n return (\n <ToggleGroupPrimitive.Root\n ref={ref as any}\n className={`${buttonSwitchContainer} ${className || ''}`.trim()}\n style={mergedStyles}\n {...(props as any)}\n >\n {children}\n </ToggleGroupPrimitive.Root>\n );\n },\n);\n\nButtonSwitchContainerVanillaImpl.displayName = 'ButtonSwitchContainerVanilla';\n\nexport const ButtonSwitchContainerVanilla =\n ButtonSwitchContainerVanillaImpl as ButtonSwitchContainerVanillaComponent;\n\n// Item Component\ninterface ButtonSwitchItemOwnProps extends CSSProps {\n value: string;\n disabled?: boolean;\n}\n\nexport type ButtonSwitchItemVanillaProps<C extends ElementType = 'button'> =\n PolymorphicComponentProps<C, ButtonSwitchItemOwnProps>;\n\ntype ButtonSwitchItemVanillaComponent = PolymorphicComponent<\n 'button',\n ButtonSwitchItemVanillaProps<ElementType>\n>;\n\nconst ButtonSwitchItemVanillaImpl = forwardRef(\n <C extends ElementType = 'button'>(\n { as, className, css, style, children, ...props }: ButtonSwitchItemVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = (as || 'button') as any;\n const { colors } = useVanillaExtractTheme();\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const mergedStyles = {\n ...cssStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n if (as) {\n return (\n <Component\n ref={ref}\n className={`${buttonSwitchItem} ${className || ''}`.trim()}\n style={mergedStyles}\n role=\"radio\"\n {...props}\n >\n {children}\n </Component>\n );\n }\n\n return (\n <ToggleGroupPrimitive.Item\n ref={ref as any}\n className={`${buttonSwitchItem} ${className || ''}`.trim()}\n style={mergedStyles}\n {...(props as any)}\n >\n {children}\n </ToggleGroupPrimitive.Item>\n );\n },\n);\n\nButtonSwitchItemVanillaImpl.displayName = 'ButtonSwitchItemVanilla';\n\nexport const ButtonSwitchItemVanilla =\n ButtonSwitchItemVanillaImpl as ButtonSwitchItemVanillaComponent;\n"],"mappings":";;;;;;;;;;AAkCA,IAAM,oCAAA,GAAA,MAAA,aAEF,EAAE,IAAI,WAAW,KAAK,OAAO,UAAU,GAAG,SAC1C,QACG;CACH,MAAM,YAAa,MAAM;CACzB,MAAM,EAAE,WAAW,qBAAA,wBAAwB;CAE3C,MAAM,EAAE,OAAO,WAAW,SAAS,iBAAA,eAAe,KAAK,OAAO;CAE9D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,IAAA,GAAA,yBAAA,kBAAoB,KAAK;EAC1B;CAED,IAAI,IACF,OACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EACO;EACL,WAAW,GAAG,iCAAA,sBAAsB,GAAG,aAAa,KAAK,MAAM;EAC/D,OAAO;EACP,MAAK;EACL,GAAI;EAEH;EACS,CAAA;CAIhB,OACE,iBAAA,GAAA,kBAAA,KAAC,6BAAqB,MAAtB;EACO;EACL,WAAW,GAAG,iCAAA,sBAAsB,GAAG,aAAa,KAAK,MAAM;EAC/D,OAAO;EACP,GAAK;EAEJ;EACyB,CAAA;EAGjC;AAED,iCAAiC,cAAc;AAE/C,IAAa,+BACX;AAgBF,IAAM,+BAAA,GAAA,MAAA,aAEF,EAAE,IAAI,WAAW,KAAK,OAAO,UAAU,GAAG,SAC1C,QACG;CACH,MAAM,YAAa,MAAM;CACzB,MAAM,EAAE,WAAW,qBAAA,wBAAwB;CAE3C,MAAM,EAAE,OAAO,WAAW,SAAS,iBAAA,eAAe,KAAK,OAAO;CAE9D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,IAAA,GAAA,yBAAA,kBAAoB,KAAK;EAC1B;CAED,IAAI,IACF,OACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EACO;EACL,WAAW,GAAG,iCAAA,iBAAiB,GAAG,aAAa,KAAK,MAAM;EAC1D,OAAO;EACP,MAAK;EACL,GAAI;EAEH;EACS,CAAA;CAIhB,OACE,iBAAA,GAAA,kBAAA,KAAC,6BAAqB,MAAtB;EACO;EACL,WAAW,GAAG,iCAAA,iBAAiB,GAAG,aAAa,KAAK,MAAM;EAC1D,OAAO;EACP,GAAK;EAEJ;EACyB,CAAA;EAGjC;AAED,4BAA4B,cAAc;AAE1C,IAAa,0BACX"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonSwitch.vanilla.js","names":[],"sources":["../../../components/ButtonSwitch/ButtonSwitch.vanilla.tsx"],"sourcesContent":["import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n PolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { buttonSwitchContainer, buttonSwitchItem } from './ButtonSwitch.vanilla.css';\n\n// Container Component\ninterface ButtonSwitchContainerOwnProps extends CSSProps {\n type?: 'single' | 'multiple';\n value?: string | string[];\n defaultValue?: string | string[];\n onValueChange?: (value: any) => void;\n disabled?: boolean;\n rovingFocus?: boolean;\n loop?: boolean;\n orientation?: 'horizontal' | 'vertical';\n dir?: 'ltr' | 'rtl';\n}\n\nexport type ButtonSwitchContainerVanillaProps<C extends ElementType = 'div'> =\n PolymorphicComponentProps<C, ButtonSwitchContainerOwnProps>;\n\ntype ButtonSwitchContainerVanillaComponent = PolymorphicComponent<\n 'div',\n ButtonSwitchContainerVanillaProps<ElementType>\n>;\n\nconst ButtonSwitchContainerVanillaImpl = forwardRef(\n <C extends ElementType = 'div'>(\n { as, className, css, style, children, ...props }: ButtonSwitchContainerVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = (as || 'div') as any;\n const { colors } = useVanillaExtractTheme();\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const mergedStyles = {\n ...cssStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n if (as) {\n return (\n <Component\n ref={ref}\n className={`${buttonSwitchContainer} ${className || ''}`.trim()}\n style={mergedStyles}\n role=\"group\"\n {...props}\n >\n {children}\n </Component>\n );\n }\n\n return (\n <ToggleGroupPrimitive.Root\n ref={ref as any}\n className={`${buttonSwitchContainer} ${className || ''}`.trim()}\n style={mergedStyles}\n {...(props as any)}\n >\n {children}\n </ToggleGroupPrimitive.Root>\n );\n },\n);\n\nButtonSwitchContainerVanillaImpl.displayName = 'ButtonSwitchContainerVanilla';\n\nexport const ButtonSwitchContainerVanilla =\n ButtonSwitchContainerVanillaImpl as ButtonSwitchContainerVanillaComponent;\n\n// Item Component\ninterface ButtonSwitchItemOwnProps extends CSSProps {\n value: string;\n disabled?: boolean;\n}\n\nexport type ButtonSwitchItemVanillaProps<C extends ElementType = 'button'> =\n PolymorphicComponentProps<C, ButtonSwitchItemOwnProps>;\n\ntype ButtonSwitchItemVanillaComponent = PolymorphicComponent<\n 'button',\n ButtonSwitchItemVanillaProps<ElementType>\n>;\n\nconst ButtonSwitchItemVanillaImpl = forwardRef(\n <C extends ElementType = 'button'>(\n { as, className, css, style, children, ...props }: ButtonSwitchItemVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = (as || 'button') as any;\n const { colors } = useVanillaExtractTheme();\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const mergedStyles = {\n ...cssStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n if (as) {\n return (\n <Component\n ref={ref}\n className={`${buttonSwitchItem} ${className || ''}`.trim()}\n style={mergedStyles}\n role=\"radio\"\n {...props}\n >\n {children}\n </Component>\n );\n }\n\n return (\n <ToggleGroupPrimitive.Item\n ref={ref as any}\n className={`${buttonSwitchItem} ${className || ''}`.trim()}\n style={mergedStyles}\n {...(props as any)}\n >\n {children}\n </ToggleGroupPrimitive.Item>\n );\n },\n);\n\nButtonSwitchItemVanillaImpl.displayName = 'ButtonSwitchItemVanilla';\n\nexport const ButtonSwitchItemVanilla =\n ButtonSwitchItemVanillaImpl as ButtonSwitchItemVanillaComponent;\n"],"mappings":";;;;;;;;AAkCA,IAAM,mCAAmC,YAErC,EAAE,IAAI,WAAW,KAAK,OAAO,UAAU,GAAG,SAC1C,QACG;CACH,MAAM,YAAa,MAAM;CACzB,MAAM,EAAE,WAAW,
|
|
1
|
+
{"version":3,"file":"ButtonSwitch.vanilla.js","names":[],"sources":["../../../components/ButtonSwitch/ButtonSwitch.vanilla.tsx"],"sourcesContent":["import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n PolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { buttonSwitchContainer, buttonSwitchItem } from './ButtonSwitch.vanilla.css';\n\n// Container Component\ninterface ButtonSwitchContainerOwnProps extends CSSProps {\n type?: 'single' | 'multiple';\n value?: string | string[];\n defaultValue?: string | string[];\n onValueChange?: (value: any) => void;\n disabled?: boolean;\n rovingFocus?: boolean;\n loop?: boolean;\n orientation?: 'horizontal' | 'vertical';\n dir?: 'ltr' | 'rtl';\n}\n\nexport type ButtonSwitchContainerVanillaProps<C extends ElementType = 'div'> =\n PolymorphicComponentProps<C, ButtonSwitchContainerOwnProps>;\n\ntype ButtonSwitchContainerVanillaComponent = PolymorphicComponent<\n 'div',\n ButtonSwitchContainerVanillaProps<ElementType>\n>;\n\nconst ButtonSwitchContainerVanillaImpl = forwardRef(\n <C extends ElementType = 'div'>(\n { as, className, css, style, children, ...props }: ButtonSwitchContainerVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = (as || 'div') as any;\n const { colors } = useVanillaExtractTheme();\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const mergedStyles = {\n ...cssStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n if (as) {\n return (\n <Component\n ref={ref}\n className={`${buttonSwitchContainer} ${className || ''}`.trim()}\n style={mergedStyles}\n role=\"group\"\n {...props}\n >\n {children}\n </Component>\n );\n }\n\n return (\n <ToggleGroupPrimitive.Root\n ref={ref as any}\n className={`${buttonSwitchContainer} ${className || ''}`.trim()}\n style={mergedStyles}\n {...(props as any)}\n >\n {children}\n </ToggleGroupPrimitive.Root>\n );\n },\n);\n\nButtonSwitchContainerVanillaImpl.displayName = 'ButtonSwitchContainerVanilla';\n\nexport const ButtonSwitchContainerVanilla =\n ButtonSwitchContainerVanillaImpl as ButtonSwitchContainerVanillaComponent;\n\n// Item Component\ninterface ButtonSwitchItemOwnProps extends CSSProps {\n value: string;\n disabled?: boolean;\n}\n\nexport type ButtonSwitchItemVanillaProps<C extends ElementType = 'button'> =\n PolymorphicComponentProps<C, ButtonSwitchItemOwnProps>;\n\ntype ButtonSwitchItemVanillaComponent = PolymorphicComponent<\n 'button',\n ButtonSwitchItemVanillaProps<ElementType>\n>;\n\nconst ButtonSwitchItemVanillaImpl = forwardRef(\n <C extends ElementType = 'button'>(\n { as, className, css, style, children, ...props }: ButtonSwitchItemVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = (as || 'button') as any;\n const { colors } = useVanillaExtractTheme();\n\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n const mergedStyles = {\n ...cssStyles,\n ...style,\n ...assignInlineVars(vars),\n };\n\n if (as) {\n return (\n <Component\n ref={ref}\n className={`${buttonSwitchItem} ${className || ''}`.trim()}\n style={mergedStyles}\n role=\"radio\"\n {...props}\n >\n {children}\n </Component>\n );\n }\n\n return (\n <ToggleGroupPrimitive.Item\n ref={ref as any}\n className={`${buttonSwitchItem} ${className || ''}`.trim()}\n style={mergedStyles}\n {...(props as any)}\n >\n {children}\n </ToggleGroupPrimitive.Item>\n );\n },\n);\n\nButtonSwitchItemVanillaImpl.displayName = 'ButtonSwitchItemVanilla';\n\nexport const ButtonSwitchItemVanilla =\n ButtonSwitchItemVanillaImpl as ButtonSwitchItemVanillaComponent;\n"],"mappings":";;;;;;;;AAkCA,IAAM,mCAAmC,YAErC,EAAE,IAAI,WAAW,KAAK,OAAO,UAAU,GAAG,SAC1C,QACG;CACH,MAAM,YAAa,MAAM;CACzB,MAAM,EAAE,WAAW,wBAAwB;CAE3C,MAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,OAAO;CAE9D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,GAAG,iBAAiB,KAAK;EAC1B;CAED,IAAI,IACF,OACE,oBAAC,WAAD;EACO;EACL,WAAW,GAAG,sBAAsB,GAAG,aAAa,KAAK,MAAM;EAC/D,OAAO;EACP,MAAK;EACL,GAAI;EAEH;EACS,CAAA;CAIhB,OACE,oBAAC,qBAAqB,MAAtB;EACO;EACL,WAAW,GAAG,sBAAsB,GAAG,aAAa,KAAK,MAAM;EAC/D,OAAO;EACP,GAAK;EAEJ;EACyB,CAAA;EAGjC;AAED,iCAAiC,cAAc;AAE/C,IAAa,+BACX;AAgBF,IAAM,8BAA8B,YAEhC,EAAE,IAAI,WAAW,KAAK,OAAO,UAAU,GAAG,SAC1C,QACG;CACH,MAAM,YAAa,MAAM;CACzB,MAAM,EAAE,WAAW,wBAAwB;CAE3C,MAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,OAAO;CAE9D,MAAM,eAAe;EACnB,GAAG;EACH,GAAG;EACH,GAAG,iBAAiB,KAAK;EAC1B;CAED,IAAI,IACF,OACE,oBAAC,WAAD;EACO;EACL,WAAW,GAAG,iBAAiB,GAAG,aAAa,KAAK,MAAM;EAC1D,OAAO;EACP,MAAK;EACL,GAAI;EAEH;EACS,CAAA;CAIhB,OACE,oBAAC,qBAAqB,MAAtB;EACO;EACL,WAAW,GAAG,iBAAiB,GAAG,aAAa,KAAK,MAAM;EAC1D,OAAO;EACP,GAAK;EAEJ;EACyB,CAAA;EAGjC;AAED,4BAA4B,cAAc;AAE1C,IAAa,0BACX"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.cjs","names":[],"sources":["../../../components/Card/Card.tsx"],"sourcesContent":["import React, { ComponentProps, ElementRef } from 'react';\n\nimport { styled, VariantProps } from '../../stitches.config';\nimport { elevationVariants } from '../Elevation/Elevation';\n\nconst StyledCard = styled('div', {\n appearance: 'none',\n border: 'none',\n boxSizing: 'border-box',\n font: 'inherit',\n lineHeight: '1',\n outline: 'none',\n padding: '$3',\n textAlign: 'inherit',\n verticalAlign: 'middle',\n WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',\n\n backgroundColor: '$cardBackground',\n display: 'block',\n textDecoration: 'none',\n color: 'inherit',\n borderRadius: '$3',\n position: 'relative',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n borderRadius: '$3',\n pointerEvents: 'none',\n },\n\n variants: {\n elevation: elevationVariants,\n variant: {\n inner: {\n backgroundColor: '$innerCardBgColor',\n },\n ghost: {\n backgroundColor: 'transparent',\n boxShadow: 'none',\n },\n },\n active: {\n true: {\n '&::before': {\n outline: '1px solid $colors$cardActiveBorder',\n backgroundColor: '$cardActiveBackground',\n },\n },\n },\n },\n defaultVariants: {\n elevation: 1,\n },\n});\n\nconst StyledInteractiveCard = styled('button', StyledCard, {\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n '&::before': {\n outline: '1px solid $colors$cardHoverBorder',\n backgroundColor: '$cardHoverBackground',\n },\n },\n },\n '&:focus': {\n outline: '2px solid $primary',\n },\n '&:active': {\n '&::before': {\n outline: '1px solid $colors$cardActiveBorder',\n backgroundColor: '$cardActiveBackground',\n },\n },\n});\n\nexport type CardVariantProps = ComponentProps<typeof StyledCard> &\n VariantProps<typeof StyledCard> & {\n interactive?: false;\n };\nexport type InteractiveCardProps = VariantProps<typeof StyledInteractiveCard> &\n ComponentProps<typeof StyledInteractiveCard> & {\n interactive: true;\n };\nexport type CardProps = CardVariantProps | InteractiveCardProps;\n\nexport const Card = React.forwardRef<ElementRef<typeof StyledCard>, CardProps>(\n ({ interactive, ...props }, forwardedRef) => {\n if (interactive) {\n return (\n <StyledInteractiveCard\n tabIndex={0}\n ref={forwardedRef as React.RefObject<HTMLButtonElement>}\n {...(props as InteractiveCardProps)}\n />\n );\n }\n return (\n <StyledCard\n ref={forwardedRef as React.RefObject<HTMLDivElement>}\n {...(props as CardVariantProps)}\n />\n );\n },\n);\n"],"mappings":";;;;;;;AAKA,IAAM,aAAa,wBAAA,OAAO,OAAO;CAC/B,YAAY;CACZ,QAAQ;CACR,WAAW;CACX,MAAM;CACN,YAAY;CACZ,SAAS;CACT,SAAS;CACT,WAAW;CACX,eAAe;CACf,yBAAyB;CAEzB,iBAAiB;CACjB,SAAS;CACT,gBAAgB;CAChB,OAAO;CACP,cAAc;CACd,UAAU;CAEV,aAAa;EACX,WAAW;EACX,SAAS;EACT,UAAU;EACV,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACN,cAAc;EACd,eAAe;
|
|
1
|
+
{"version":3,"file":"Card.cjs","names":[],"sources":["../../../components/Card/Card.tsx"],"sourcesContent":["import React, { ComponentProps, ElementRef } from 'react';\n\nimport { styled, VariantProps } from '../../stitches.config';\nimport { elevationVariants } from '../Elevation/Elevation';\n\nconst StyledCard = styled('div', {\n appearance: 'none',\n border: 'none',\n boxSizing: 'border-box',\n font: 'inherit',\n lineHeight: '1',\n outline: 'none',\n padding: '$3',\n textAlign: 'inherit',\n verticalAlign: 'middle',\n WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',\n\n backgroundColor: '$cardBackground',\n display: 'block',\n textDecoration: 'none',\n color: 'inherit',\n borderRadius: '$3',\n position: 'relative',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n borderRadius: '$3',\n pointerEvents: 'none',\n },\n\n variants: {\n elevation: elevationVariants,\n variant: {\n inner: {\n backgroundColor: '$innerCardBgColor',\n },\n ghost: {\n backgroundColor: 'transparent',\n boxShadow: 'none',\n },\n },\n active: {\n true: {\n '&::before': {\n outline: '1px solid $colors$cardActiveBorder',\n backgroundColor: '$cardActiveBackground',\n },\n },\n },\n },\n defaultVariants: {\n elevation: 1,\n },\n});\n\nconst StyledInteractiveCard = styled('button', StyledCard, {\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n '&::before': {\n outline: '1px solid $colors$cardHoverBorder',\n backgroundColor: '$cardHoverBackground',\n },\n },\n },\n '&:focus': {\n outline: '2px solid $primary',\n },\n '&:active': {\n '&::before': {\n outline: '1px solid $colors$cardActiveBorder',\n backgroundColor: '$cardActiveBackground',\n },\n },\n});\n\nexport type CardVariantProps = ComponentProps<typeof StyledCard> &\n VariantProps<typeof StyledCard> & {\n interactive?: false;\n };\nexport type InteractiveCardProps = VariantProps<typeof StyledInteractiveCard> &\n ComponentProps<typeof StyledInteractiveCard> & {\n interactive: true;\n };\nexport type CardProps = CardVariantProps | InteractiveCardProps;\n\nexport const Card = React.forwardRef<ElementRef<typeof StyledCard>, CardProps>(\n ({ interactive, ...props }, forwardedRef) => {\n if (interactive) {\n return (\n <StyledInteractiveCard\n tabIndex={0}\n ref={forwardedRef as React.RefObject<HTMLButtonElement>}\n {...(props as InteractiveCardProps)}\n />\n );\n }\n return (\n <StyledCard\n ref={forwardedRef as React.RefObject<HTMLDivElement>}\n {...(props as CardVariantProps)}\n />\n );\n },\n);\n"],"mappings":";;;;;;;AAKA,IAAM,aAAa,wBAAA,OAAO,OAAO;CAC/B,YAAY;CACZ,QAAQ;CACR,WAAW;CACX,MAAM;CACN,YAAY;CACZ,SAAS;CACT,SAAS;CACT,WAAW;CACX,eAAe;CACf,yBAAyB;CAEzB,iBAAiB;CACjB,SAAS;CACT,gBAAgB;CAChB,OAAO;CACP,cAAc;CACd,UAAU;CAEV,aAAa;EACX,WAAW;EACX,SAAS;EACT,UAAU;EACV,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACN,cAAc;EACd,eAAe;EAChB;CAED,UAAU;EACR,WAAW,kBAAA;EACX,SAAS;GACP,OAAO,EACL,iBAAiB,qBAClB;GACD,OAAO;IACL,iBAAiB;IACjB,WAAW;IACZ;GACF;EACD,QAAQ,EACN,MAAM,EACJ,aAAa;GACX,SAAS;GACT,iBAAiB;GAClB,EACF,EACF;EACF;CACD,iBAAiB,EACf,WAAW,GACZ;CACF,CAAC;AAEF,IAAM,wBAAwB,wBAAA,OAAO,UAAU,YAAY;CACzD,UAAU,EACR,WAAW;EACT,QAAQ;EACR,aAAa;GACX,SAAS;GACT,iBAAiB;GAClB;EACF,EACF;CACD,WAAW,EACT,SAAS,sBACV;CACD,YAAY,EACV,aAAa;EACX,SAAS;EACT,iBAAiB;EAClB,EACF;CACF,CAAC;AAYF,IAAa,OAAO,MAAA,QAAM,YACvB,EAAE,aAAa,GAAG,SAAS,iBAAiB;CAC3C,IAAI,aACF,OACE,iBAAA,GAAA,kBAAA,KAAC,uBAAD;EACE,UAAU;EACV,KAAK;EACL,GAAK;EACL,CAAA;CAGN,OACE,iBAAA,GAAA,kBAAA,KAAC,YAAD;EACE,KAAK;EACL,GAAK;EACL,CAAA;EAGP"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","names":[],"sources":["../../../components/Card/Card.tsx"],"sourcesContent":["import React, { ComponentProps, ElementRef } from 'react';\n\nimport { styled, VariantProps } from '../../stitches.config';\nimport { elevationVariants } from '../Elevation/Elevation';\n\nconst StyledCard = styled('div', {\n appearance: 'none',\n border: 'none',\n boxSizing: 'border-box',\n font: 'inherit',\n lineHeight: '1',\n outline: 'none',\n padding: '$3',\n textAlign: 'inherit',\n verticalAlign: 'middle',\n WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',\n\n backgroundColor: '$cardBackground',\n display: 'block',\n textDecoration: 'none',\n color: 'inherit',\n borderRadius: '$3',\n position: 'relative',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n borderRadius: '$3',\n pointerEvents: 'none',\n },\n\n variants: {\n elevation: elevationVariants,\n variant: {\n inner: {\n backgroundColor: '$innerCardBgColor',\n },\n ghost: {\n backgroundColor: 'transparent',\n boxShadow: 'none',\n },\n },\n active: {\n true: {\n '&::before': {\n outline: '1px solid $colors$cardActiveBorder',\n backgroundColor: '$cardActiveBackground',\n },\n },\n },\n },\n defaultVariants: {\n elevation: 1,\n },\n});\n\nconst StyledInteractiveCard = styled('button', StyledCard, {\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n '&::before': {\n outline: '1px solid $colors$cardHoverBorder',\n backgroundColor: '$cardHoverBackground',\n },\n },\n },\n '&:focus': {\n outline: '2px solid $primary',\n },\n '&:active': {\n '&::before': {\n outline: '1px solid $colors$cardActiveBorder',\n backgroundColor: '$cardActiveBackground',\n },\n },\n});\n\nexport type CardVariantProps = ComponentProps<typeof StyledCard> &\n VariantProps<typeof StyledCard> & {\n interactive?: false;\n };\nexport type InteractiveCardProps = VariantProps<typeof StyledInteractiveCard> &\n ComponentProps<typeof StyledInteractiveCard> & {\n interactive: true;\n };\nexport type CardProps = CardVariantProps | InteractiveCardProps;\n\nexport const Card = React.forwardRef<ElementRef<typeof StyledCard>, CardProps>(\n ({ interactive, ...props }, forwardedRef) => {\n if (interactive) {\n return (\n <StyledInteractiveCard\n tabIndex={0}\n ref={forwardedRef as React.RefObject<HTMLButtonElement>}\n {...(props as InteractiveCardProps)}\n />\n );\n }\n return (\n <StyledCard\n ref={forwardedRef as React.RefObject<HTMLDivElement>}\n {...(props as CardVariantProps)}\n />\n );\n },\n);\n"],"mappings":";;;;;AAKA,IAAM,aAAa,OAAO,OAAO;CAC/B,YAAY;CACZ,QAAQ;CACR,WAAW;CACX,MAAM;CACN,YAAY;CACZ,SAAS;CACT,SAAS;CACT,WAAW;CACX,eAAe;CACf,yBAAyB;CAEzB,iBAAiB;CACjB,SAAS;CACT,gBAAgB;CAChB,OAAO;CACP,cAAc;CACd,UAAU;CAEV,aAAa;EACX,WAAW;EACX,SAAS;EACT,UAAU;EACV,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACN,cAAc;EACd,eAAe;
|
|
1
|
+
{"version":3,"file":"Card.js","names":[],"sources":["../../../components/Card/Card.tsx"],"sourcesContent":["import React, { ComponentProps, ElementRef } from 'react';\n\nimport { styled, VariantProps } from '../../stitches.config';\nimport { elevationVariants } from '../Elevation/Elevation';\n\nconst StyledCard = styled('div', {\n appearance: 'none',\n border: 'none',\n boxSizing: 'border-box',\n font: 'inherit',\n lineHeight: '1',\n outline: 'none',\n padding: '$3',\n textAlign: 'inherit',\n verticalAlign: 'middle',\n WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',\n\n backgroundColor: '$cardBackground',\n display: 'block',\n textDecoration: 'none',\n color: 'inherit',\n borderRadius: '$3',\n position: 'relative',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n borderRadius: '$3',\n pointerEvents: 'none',\n },\n\n variants: {\n elevation: elevationVariants,\n variant: {\n inner: {\n backgroundColor: '$innerCardBgColor',\n },\n ghost: {\n backgroundColor: 'transparent',\n boxShadow: 'none',\n },\n },\n active: {\n true: {\n '&::before': {\n outline: '1px solid $colors$cardActiveBorder',\n backgroundColor: '$cardActiveBackground',\n },\n },\n },\n },\n defaultVariants: {\n elevation: 1,\n },\n});\n\nconst StyledInteractiveCard = styled('button', StyledCard, {\n '@hover': {\n '&:hover': {\n cursor: 'pointer',\n '&::before': {\n outline: '1px solid $colors$cardHoverBorder',\n backgroundColor: '$cardHoverBackground',\n },\n },\n },\n '&:focus': {\n outline: '2px solid $primary',\n },\n '&:active': {\n '&::before': {\n outline: '1px solid $colors$cardActiveBorder',\n backgroundColor: '$cardActiveBackground',\n },\n },\n});\n\nexport type CardVariantProps = ComponentProps<typeof StyledCard> &\n VariantProps<typeof StyledCard> & {\n interactive?: false;\n };\nexport type InteractiveCardProps = VariantProps<typeof StyledInteractiveCard> &\n ComponentProps<typeof StyledInteractiveCard> & {\n interactive: true;\n };\nexport type CardProps = CardVariantProps | InteractiveCardProps;\n\nexport const Card = React.forwardRef<ElementRef<typeof StyledCard>, CardProps>(\n ({ interactive, ...props }, forwardedRef) => {\n if (interactive) {\n return (\n <StyledInteractiveCard\n tabIndex={0}\n ref={forwardedRef as React.RefObject<HTMLButtonElement>}\n {...(props as InteractiveCardProps)}\n />\n );\n }\n return (\n <StyledCard\n ref={forwardedRef as React.RefObject<HTMLDivElement>}\n {...(props as CardVariantProps)}\n />\n );\n },\n);\n"],"mappings":";;;;;AAKA,IAAM,aAAa,OAAO,OAAO;CAC/B,YAAY;CACZ,QAAQ;CACR,WAAW;CACX,MAAM;CACN,YAAY;CACZ,SAAS;CACT,SAAS;CACT,WAAW;CACX,eAAe;CACf,yBAAyB;CAEzB,iBAAiB;CACjB,SAAS;CACT,gBAAgB;CAChB,OAAO;CACP,cAAc;CACd,UAAU;CAEV,aAAa;EACX,WAAW;EACX,SAAS;EACT,UAAU;EACV,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACN,cAAc;EACd,eAAe;EAChB;CAED,UAAU;EACR,WAAW;EACX,SAAS;GACP,OAAO,EACL,iBAAiB,qBAClB;GACD,OAAO;IACL,iBAAiB;IACjB,WAAW;IACZ;GACF;EACD,QAAQ,EACN,MAAM,EACJ,aAAa;GACX,SAAS;GACT,iBAAiB;GAClB,EACF,EACF;EACF;CACD,iBAAiB,EACf,WAAW,GACZ;CACF,CAAC;AAEF,IAAM,wBAAwB,OAAO,UAAU,YAAY;CACzD,UAAU,EACR,WAAW;EACT,QAAQ;EACR,aAAa;GACX,SAAS;GACT,iBAAiB;GAClB;EACF,EACF;CACD,WAAW,EACT,SAAS,sBACV;CACD,YAAY,EACV,aAAa;EACX,SAAS;EACT,iBAAiB;EAClB,EACF;CACF,CAAC;AAYF,IAAa,OAAO,MAAM,YACvB,EAAE,aAAa,GAAG,SAAS,iBAAiB;CAC3C,IAAI,aACF,OACE,oBAAC,uBAAD;EACE,UAAU;EACV,KAAK;EACL,GAAK;EACL,CAAA;CAGN,OACE,oBAAC,YAAD;EACE,KAAK;EACL,GAAK;EACL,CAAA;EAGP"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.theme.cjs","names":[],"sources":["../../../components/Card/Card.theme.ts"],"sourcesContent":["// Plain TypeScript color tokens (no vanilla-extract)\n// Can be safely imported by colors/index.ts for Stitches\nexport const cardLightTheme = {\n cardBackground: 'white',\n cardHoverBackground: 'rgba(0,0,0,.05)',\n cardHoverBorder: 'hsla(211, 100%, 50%, 0.6)', // Will be overridden with primary color\n cardActiveBackground: 'rgba(0,0,0,.03)',\n cardActiveBorder: 'hsl(211, 100%, 50%)', // Will be overridden with primary color\n innerCardBgColor: 'hsla(0, 0%, 0%, 0.04)',\n};\n\nexport const cardDarkTheme = {\n cardBackground: 'hsl(209, 29%, 14%)', // deepBlue2\n cardHoverBackground: 'rgba(255,255,255,.12)',\n cardHoverBorder: 'hsla(211, 100%, 50%, 0.6)', // Will be overridden with primary color\n cardActiveBackground: 'rgba(255,255,255,.07)',\n cardActiveBorder: 'hsla(211, 100%, 50%, 0.4)', // Will be overridden with primary color\n innerCardBgColor: 'hsla(0, 0%, 100%, 0.07)',\n};\n"],"mappings":";AAEA,IAAa,iBAAiB;CAC5B,gBAAgB;CAChB,qBAAqB;CACrB,iBAAiB;CACjB,sBAAsB;CACtB,kBAAkB;CAClB,kBAAkB;
|
|
1
|
+
{"version":3,"file":"Card.theme.cjs","names":[],"sources":["../../../components/Card/Card.theme.ts"],"sourcesContent":["// Plain TypeScript color tokens (no vanilla-extract)\n// Can be safely imported by colors/index.ts for Stitches\nexport const cardLightTheme = {\n cardBackground: 'white',\n cardHoverBackground: 'rgba(0,0,0,.05)',\n cardHoverBorder: 'hsla(211, 100%, 50%, 0.6)', // Will be overridden with primary color\n cardActiveBackground: 'rgba(0,0,0,.03)',\n cardActiveBorder: 'hsl(211, 100%, 50%)', // Will be overridden with primary color\n innerCardBgColor: 'hsla(0, 0%, 0%, 0.04)',\n};\n\nexport const cardDarkTheme = {\n cardBackground: 'hsl(209, 29%, 14%)', // deepBlue2\n cardHoverBackground: 'rgba(255,255,255,.12)',\n cardHoverBorder: 'hsla(211, 100%, 50%, 0.6)', // Will be overridden with primary color\n cardActiveBackground: 'rgba(255,255,255,.07)',\n cardActiveBorder: 'hsla(211, 100%, 50%, 0.4)', // Will be overridden with primary color\n innerCardBgColor: 'hsla(0, 0%, 100%, 0.07)',\n};\n"],"mappings":";AAEA,IAAa,iBAAiB;CAC5B,gBAAgB;CAChB,qBAAqB;CACrB,iBAAiB;CACjB,sBAAsB;CACtB,kBAAkB;CAClB,kBAAkB;CACnB;AAED,IAAa,gBAAgB;CAC3B,gBAAgB;CAChB,qBAAqB;CACrB,iBAAiB;CACjB,sBAAsB;CACtB,kBAAkB;CAClB,kBAAkB;CACnB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.theme.js","names":[],"sources":["../../../components/Card/Card.theme.ts"],"sourcesContent":["// Plain TypeScript color tokens (no vanilla-extract)\n// Can be safely imported by colors/index.ts for Stitches\nexport const cardLightTheme = {\n cardBackground: 'white',\n cardHoverBackground: 'rgba(0,0,0,.05)',\n cardHoverBorder: 'hsla(211, 100%, 50%, 0.6)', // Will be overridden with primary color\n cardActiveBackground: 'rgba(0,0,0,.03)',\n cardActiveBorder: 'hsl(211, 100%, 50%)', // Will be overridden with primary color\n innerCardBgColor: 'hsla(0, 0%, 0%, 0.04)',\n};\n\nexport const cardDarkTheme = {\n cardBackground: 'hsl(209, 29%, 14%)', // deepBlue2\n cardHoverBackground: 'rgba(255,255,255,.12)',\n cardHoverBorder: 'hsla(211, 100%, 50%, 0.6)', // Will be overridden with primary color\n cardActiveBackground: 'rgba(255,255,255,.07)',\n cardActiveBorder: 'hsla(211, 100%, 50%, 0.4)', // Will be overridden with primary color\n innerCardBgColor: 'hsla(0, 0%, 100%, 0.07)',\n};\n"],"mappings":";AAEA,IAAa,iBAAiB;CAC5B,gBAAgB;CAChB,qBAAqB;CACrB,iBAAiB;CACjB,sBAAsB;CACtB,kBAAkB;CAClB,kBAAkB;
|
|
1
|
+
{"version":3,"file":"Card.theme.js","names":[],"sources":["../../../components/Card/Card.theme.ts"],"sourcesContent":["// Plain TypeScript color tokens (no vanilla-extract)\n// Can be safely imported by colors/index.ts for Stitches\nexport const cardLightTheme = {\n cardBackground: 'white',\n cardHoverBackground: 'rgba(0,0,0,.05)',\n cardHoverBorder: 'hsla(211, 100%, 50%, 0.6)', // Will be overridden with primary color\n cardActiveBackground: 'rgba(0,0,0,.03)',\n cardActiveBorder: 'hsl(211, 100%, 50%)', // Will be overridden with primary color\n innerCardBgColor: 'hsla(0, 0%, 0%, 0.04)',\n};\n\nexport const cardDarkTheme = {\n cardBackground: 'hsl(209, 29%, 14%)', // deepBlue2\n cardHoverBackground: 'rgba(255,255,255,.12)',\n cardHoverBorder: 'hsla(211, 100%, 50%, 0.6)', // Will be overridden with primary color\n cardActiveBackground: 'rgba(255,255,255,.07)',\n cardActiveBorder: 'hsla(211, 100%, 50%, 0.4)', // Will be overridden with primary color\n innerCardBgColor: 'hsla(0, 0%, 100%, 0.07)',\n};\n"],"mappings":";AAEA,IAAa,iBAAiB;CAC5B,gBAAgB;CAChB,qBAAqB;CACrB,iBAAiB;CACjB,sBAAsB;CACtB,kBAAkB;CAClB,kBAAkB;CACnB;AAED,IAAa,gBAAgB;CAC3B,gBAAgB;CAChB,qBAAqB;CACrB,iBAAiB;CACjB,sBAAsB;CACtB,kBAAkB;CAClB,kBAAkB;CACnB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.themes.cjs","names":[],"sources":["../../../components/Card/Card.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n cardBackground: Property.Color;\n cardBorder: Property.Color;\n cardShadow: Property.Color;\n cardHoverBackground: Property.Color;\n cardHoverBorder: Property.Color;\n cardActiveBackground: Property.Color;\n cardActiveBorder: Property.Color;\n cardGhostBackground: Property.Color;\n innerCardBgColor: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n cardBackground: 'white',\n cardBorder: '$deepBlue3',\n cardShadow: 'rgba(0,0,0,.1)',\n cardHoverBackground: 'rgba(0,0,0,.05)',\n cardHoverBorder: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),\n cardActiveBackground: 'rgba(0,0,0,.03)',\n cardActiveBorder: '$primary',\n cardGhostBackground: '$deepBlue2',\n innerCardBgColor: tinycolor('black').setAlpha(0.04).toHslString(),\n });\n\n export const getDark: Factory = (primaryColor) => ({\n cardBackground: '$deepBlue2',\n cardBorder: '$deepBlue3',\n cardShadow: 'transparent',\n cardHoverBackground: 'rgba(255,255,255,.12)',\n cardHoverBorder: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),\n cardActiveBackground: 'rgba(255,255,255,.07)',\n cardActiveBorder: tinycolor(primaryColor.value).setAlpha(0.4).toHslString(),\n cardGhostBackground: '$deepBlue1',\n innerCardBgColor: tinycolor('white').setAlpha(0.07).toHslString(),\n });\n}\n"],"mappings":";;;;AAKO,IAAA;;CAeQ,OAAA,YAAqB,kBAAkB;EAClD,gBAAgB;EAChB,YAAY;EACZ,YAAY;EACZ,qBAAqB;EACrB,kBAAA,GAAA,WAAA,SAA2B,aAAa,
|
|
1
|
+
{"version":3,"file":"Card.themes.cjs","names":[],"sources":["../../../components/Card/Card.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n cardBackground: Property.Color;\n cardBorder: Property.Color;\n cardShadow: Property.Color;\n cardHoverBackground: Property.Color;\n cardHoverBorder: Property.Color;\n cardActiveBackground: Property.Color;\n cardActiveBorder: Property.Color;\n cardGhostBackground: Property.Color;\n innerCardBgColor: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n cardBackground: 'white',\n cardBorder: '$deepBlue3',\n cardShadow: 'rgba(0,0,0,.1)',\n cardHoverBackground: 'rgba(0,0,0,.05)',\n cardHoverBorder: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),\n cardActiveBackground: 'rgba(0,0,0,.03)',\n cardActiveBorder: '$primary',\n cardGhostBackground: '$deepBlue2',\n innerCardBgColor: tinycolor('black').setAlpha(0.04).toHslString(),\n });\n\n export const getDark: Factory = (primaryColor) => ({\n cardBackground: '$deepBlue2',\n cardBorder: '$deepBlue3',\n cardShadow: 'transparent',\n cardHoverBackground: 'rgba(255,255,255,.12)',\n cardHoverBorder: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),\n cardActiveBackground: 'rgba(255,255,255,.07)',\n cardActiveBorder: tinycolor(primaryColor.value).setAlpha(0.4).toHslString(),\n cardGhostBackground: '$deepBlue1',\n innerCardBgColor: tinycolor('white').setAlpha(0.07).toHslString(),\n });\n}\n"],"mappings":";;;;AAKO,IAAA;;CAeQ,OAAA,YAAqB,kBAAkB;EAClD,gBAAgB;EAChB,YAAY;EACZ,YAAY;EACZ,qBAAqB;EACrB,kBAAA,GAAA,WAAA,SAA2B,aAAa,MAAM,CAAC,SAAS,GAAI,CAAC,aAAa;EAC1E,sBAAsB;EACtB,kBAAkB;EAClB,qBAAqB;EACrB,mBAAA,GAAA,WAAA,SAA4B,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAClE;CAEY,OAAA,WAAoB,kBAAkB;EACjD,gBAAgB;EAChB,YAAY;EACZ,YAAY;EACZ,qBAAqB;EACrB,kBAAA,GAAA,WAAA,SAA2B,aAAa,MAAM,CAAC,SAAS,GAAI,CAAC,aAAa;EAC1E,sBAAsB;EACtB,mBAAA,GAAA,WAAA,SAA4B,aAAa,MAAM,CAAC,SAAS,GAAI,CAAC,aAAa;EAC3E,qBAAqB;EACrB,mBAAA,GAAA,WAAA,SAA4B,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAClE;yBACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.themes.js","names":[],"sources":["../../../components/Card/Card.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n cardBackground: Property.Color;\n cardBorder: Property.Color;\n cardShadow: Property.Color;\n cardHoverBackground: Property.Color;\n cardHoverBorder: Property.Color;\n cardActiveBackground: Property.Color;\n cardActiveBorder: Property.Color;\n cardGhostBackground: Property.Color;\n innerCardBgColor: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n cardBackground: 'white',\n cardBorder: '$deepBlue3',\n cardShadow: 'rgba(0,0,0,.1)',\n cardHoverBackground: 'rgba(0,0,0,.05)',\n cardHoverBorder: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),\n cardActiveBackground: 'rgba(0,0,0,.03)',\n cardActiveBorder: '$primary',\n cardGhostBackground: '$deepBlue2',\n innerCardBgColor: tinycolor('black').setAlpha(0.04).toHslString(),\n });\n\n export const getDark: Factory = (primaryColor) => ({\n cardBackground: '$deepBlue2',\n cardBorder: '$deepBlue3',\n cardShadow: 'transparent',\n cardHoverBackground: 'rgba(255,255,255,.12)',\n cardHoverBorder: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),\n cardActiveBackground: 'rgba(255,255,255,.07)',\n cardActiveBorder: tinycolor(primaryColor.value).setAlpha(0.4).toHslString(),\n cardGhostBackground: '$deepBlue1',\n innerCardBgColor: tinycolor('white').setAlpha(0.07).toHslString(),\n });\n}\n"],"mappings":";;AAKO,IAAA;;CAeQ,OAAA,YAAqB,kBAAkB;EAClD,gBAAgB;EAChB,YAAY;EACZ,YAAY;EACZ,qBAAqB;EACrB,iBAAiB,UAAU,aAAa,
|
|
1
|
+
{"version":3,"file":"Card.themes.js","names":[],"sources":["../../../components/Card/Card.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n cardBackground: Property.Color;\n cardBorder: Property.Color;\n cardShadow: Property.Color;\n cardHoverBackground: Property.Color;\n cardHoverBorder: Property.Color;\n cardActiveBackground: Property.Color;\n cardActiveBorder: Property.Color;\n cardGhostBackground: Property.Color;\n innerCardBgColor: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n cardBackground: 'white',\n cardBorder: '$deepBlue3',\n cardShadow: 'rgba(0,0,0,.1)',\n cardHoverBackground: 'rgba(0,0,0,.05)',\n cardHoverBorder: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),\n cardActiveBackground: 'rgba(0,0,0,.03)',\n cardActiveBorder: '$primary',\n cardGhostBackground: '$deepBlue2',\n innerCardBgColor: tinycolor('black').setAlpha(0.04).toHslString(),\n });\n\n export const getDark: Factory = (primaryColor) => ({\n cardBackground: '$deepBlue2',\n cardBorder: '$deepBlue3',\n cardShadow: 'transparent',\n cardHoverBackground: 'rgba(255,255,255,.12)',\n cardHoverBorder: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),\n cardActiveBackground: 'rgba(255,255,255,.07)',\n cardActiveBorder: tinycolor(primaryColor.value).setAlpha(0.4).toHslString(),\n cardGhostBackground: '$deepBlue1',\n innerCardBgColor: tinycolor('white').setAlpha(0.07).toHslString(),\n });\n}\n"],"mappings":";;AAKO,IAAA;;CAeQ,OAAA,YAAqB,kBAAkB;EAClD,gBAAgB;EAChB,YAAY;EACZ,YAAY;EACZ,qBAAqB;EACrB,iBAAiB,UAAU,aAAa,MAAM,CAAC,SAAS,GAAI,CAAC,aAAa;EAC1E,sBAAsB;EACtB,kBAAkB;EAClB,qBAAqB;EACrB,kBAAkB,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAClE;CAEY,OAAA,WAAoB,kBAAkB;EACjD,gBAAgB;EAChB,YAAY;EACZ,YAAY;EACZ,qBAAqB;EACrB,iBAAiB,UAAU,aAAa,MAAM,CAAC,SAAS,GAAI,CAAC,aAAa;EAC1E,sBAAsB;EACtB,kBAAkB,UAAU,aAAa,MAAM,CAAC,SAAS,GAAI,CAAC,aAAa;EAC3E,qBAAqB;EACrB,kBAAkB,UAAU,QAAQ,CAAC,SAAS,IAAK,CAAC,aAAa;EAClE;yBACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.vanilla.cjs","names":[],"sources":["../../../components/Card/Card.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n PolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { cardRecipe, interactiveCardRecipe } from './Card.vanilla.css';\n\ntype CardRecipeVariants = NonNullable<RecipeVariants<typeof cardRecipe>>;\n\ninterface CardOwnProps extends CSSProps {\n elevation?: CardRecipeVariants['elevation'];\n variant?: CardRecipeVariants['variant'];\n active?: CardRecipeVariants['active'];\n interactive?: boolean;\n}\n\nexport type CardVanillaProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n C,\n CardOwnProps\n>;\n\ntype CardVanillaComponent = PolymorphicComponent<'div', CardVanillaProps<ElementType>>;\n\nconst CardVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'div'>(\n {\n as,\n className,\n css,\n style,\n elevation,\n variant,\n active,\n interactive,\n ...props\n }: CardVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || (interactive ? 'button' : 'div');\n const { colors } = useVanillaExtractTheme();\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n const mergedStyles = { ...cssStyles, ...style, ...assignInlineVars(vars) };\n\n const recipe = interactive ? interactiveCardRecipe : cardRecipe;\n const recipeClass = recipe({ elevation, variant, active });\n\n const additionalProps = interactive && !as ? { tabIndex: 0 } : {};\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...additionalProps}\n {...props}\n />\n );\n },\n);\n\nCardVanillaComponentImpl.displayName = 'CardVanilla';\n\nexport const CardVanilla = CardVanillaComponentImpl as CardVanillaComponent;\n"],"mappings":";;;;;;;;AA6BA,IAAM,4BAAA,GAAA,MAAA,aAEF,EACE,IACA,WACA,KACA,OACA,WACA,SACA,QACA,aACA,GAAG,SAEL,QACG;CACH,MAAM,YAAY,OAAO,cAAc,WAAW;CAClD,MAAM,EAAE,WAAW,qBAAA,
|
|
1
|
+
{"version":3,"file":"Card.vanilla.cjs","names":[],"sources":["../../../components/Card/Card.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n PolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { cardRecipe, interactiveCardRecipe } from './Card.vanilla.css';\n\ntype CardRecipeVariants = NonNullable<RecipeVariants<typeof cardRecipe>>;\n\ninterface CardOwnProps extends CSSProps {\n elevation?: CardRecipeVariants['elevation'];\n variant?: CardRecipeVariants['variant'];\n active?: CardRecipeVariants['active'];\n interactive?: boolean;\n}\n\nexport type CardVanillaProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n C,\n CardOwnProps\n>;\n\ntype CardVanillaComponent = PolymorphicComponent<'div', CardVanillaProps<ElementType>>;\n\nconst CardVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'div'>(\n {\n as,\n className,\n css,\n style,\n elevation,\n variant,\n active,\n interactive,\n ...props\n }: CardVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || (interactive ? 'button' : 'div');\n const { colors } = useVanillaExtractTheme();\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n const mergedStyles = { ...cssStyles, ...style, ...assignInlineVars(vars) };\n\n const recipe = interactive ? interactiveCardRecipe : cardRecipe;\n const recipeClass = recipe({ elevation, variant, active });\n\n const additionalProps = interactive && !as ? { tabIndex: 0 } : {};\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...additionalProps}\n {...props}\n />\n );\n },\n);\n\nCardVanillaComponentImpl.displayName = 'CardVanilla';\n\nexport const CardVanilla = CardVanillaComponentImpl as CardVanillaComponent;\n"],"mappings":";;;;;;;;AA6BA,IAAM,4BAAA,GAAA,MAAA,aAEF,EACE,IACA,WACA,KACA,OACA,WACA,SACA,QACA,aACA,GAAG,SAEL,QACG;CACH,MAAM,YAAY,OAAO,cAAc,WAAW;CAClD,MAAM,EAAE,WAAW,qBAAA,wBAAwB;CAC3C,MAAM,EAAE,OAAO,WAAW,SAAS,iBAAA,eAAe,KAAK,OAAO;CAC9D,MAAM,eAAe;EAAE,GAAG;EAAW,GAAG;EAAO,IAAA,GAAA,yBAAA,kBAAoB,KAAK;EAAE;CAG1E,MAAM,eADS,cAAc,yBAAA,wBAAwB,yBAAA,YAC1B;EAAE;EAAW;EAAS;EAAQ,CAAC;CAE1D,MAAM,kBAAkB,eAAe,CAAC,KAAK,EAAE,UAAU,GAAG,GAAG,EAAE;CAEjE,OACE,iBAAA,GAAA,kBAAA,KAAC,WAAD;EACO;EACL,WAAW,GAAG,YAAY,GAAG,aAAa,KAAK,MAAM;EACrD,OAAO;EACP,GAAI;EACJ,GAAI;EACJ,CAAA;EAGP;AAED,yBAAyB,cAAc;AAEvC,IAAa,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.vanilla.js","names":[],"sources":["../../../components/Card/Card.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n PolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { cardRecipe, interactiveCardRecipe } from './Card.vanilla.css';\n\ntype CardRecipeVariants = NonNullable<RecipeVariants<typeof cardRecipe>>;\n\ninterface CardOwnProps extends CSSProps {\n elevation?: CardRecipeVariants['elevation'];\n variant?: CardRecipeVariants['variant'];\n active?: CardRecipeVariants['active'];\n interactive?: boolean;\n}\n\nexport type CardVanillaProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n C,\n CardOwnProps\n>;\n\ntype CardVanillaComponent = PolymorphicComponent<'div', CardVanillaProps<ElementType>>;\n\nconst CardVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'div'>(\n {\n as,\n className,\n css,\n style,\n elevation,\n variant,\n active,\n interactive,\n ...props\n }: CardVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || (interactive ? 'button' : 'div');\n const { colors } = useVanillaExtractTheme();\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n const mergedStyles = { ...cssStyles, ...style, ...assignInlineVars(vars) };\n\n const recipe = interactive ? interactiveCardRecipe : cardRecipe;\n const recipeClass = recipe({ elevation, variant, active });\n\n const additionalProps = interactive && !as ? { tabIndex: 0 } : {};\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...additionalProps}\n {...props}\n />\n );\n },\n);\n\nCardVanillaComponentImpl.displayName = 'CardVanilla';\n\nexport const CardVanilla = CardVanillaComponentImpl as CardVanillaComponent;\n"],"mappings":";;;;;;;AA6BA,IAAM,2BAA2B,YAE7B,EACE,IACA,WACA,KACA,OACA,WACA,SACA,QACA,aACA,GAAG,SAEL,QACG;CACH,MAAM,YAAY,OAAO,cAAc,WAAW;CAClD,MAAM,EAAE,WAAW,
|
|
1
|
+
{"version":3,"file":"Card.vanilla.js","names":[],"sources":["../../../components/Card/Card.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n PolymorphicComponent,\n PolymorphicComponentProps,\n PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { cardRecipe, interactiveCardRecipe } from './Card.vanilla.css';\n\ntype CardRecipeVariants = NonNullable<RecipeVariants<typeof cardRecipe>>;\n\ninterface CardOwnProps extends CSSProps {\n elevation?: CardRecipeVariants['elevation'];\n variant?: CardRecipeVariants['variant'];\n active?: CardRecipeVariants['active'];\n interactive?: boolean;\n}\n\nexport type CardVanillaProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n C,\n CardOwnProps\n>;\n\ntype CardVanillaComponent = PolymorphicComponent<'div', CardVanillaProps<ElementType>>;\n\nconst CardVanillaComponentImpl = forwardRef(\n <C extends ElementType = 'div'>(\n {\n as,\n className,\n css,\n style,\n elevation,\n variant,\n active,\n interactive,\n ...props\n }: CardVanillaProps<C>,\n ref?: PolymorphicRef<C>,\n ) => {\n const Component = as || (interactive ? 'button' : 'div');\n const { colors } = useVanillaExtractTheme();\n const { style: cssStyles, vars } = processCSSProp(css, colors);\n const mergedStyles = { ...cssStyles, ...style, ...assignInlineVars(vars) };\n\n const recipe = interactive ? interactiveCardRecipe : cardRecipe;\n const recipeClass = recipe({ elevation, variant, active });\n\n const additionalProps = interactive && !as ? { tabIndex: 0 } : {};\n\n return (\n <Component\n ref={ref}\n className={`${recipeClass} ${className || ''}`.trim()}\n style={mergedStyles}\n {...additionalProps}\n {...props}\n />\n );\n },\n);\n\nCardVanillaComponentImpl.displayName = 'CardVanilla';\n\nexport const CardVanilla = CardVanillaComponentImpl as CardVanillaComponent;\n"],"mappings":";;;;;;;AA6BA,IAAM,2BAA2B,YAE7B,EACE,IACA,WACA,KACA,OACA,WACA,SACA,QACA,aACA,GAAG,SAEL,QACG;CACH,MAAM,YAAY,OAAO,cAAc,WAAW;CAClD,MAAM,EAAE,WAAW,wBAAwB;CAC3C,MAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,OAAO;CAC9D,MAAM,eAAe;EAAE,GAAG;EAAW,GAAG;EAAO,GAAG,iBAAiB,KAAK;EAAE;CAG1E,MAAM,eADS,cAAc,wBAAwB,YAC1B;EAAE;EAAW;EAAS;EAAQ,CAAC;CAE1D,MAAM,kBAAkB,eAAe,CAAC,KAAK,EAAE,UAAU,GAAG,GAAG,EAAE;CAEjE,OACE,oBAAC,WAAD;EACO;EACL,WAAW,GAAG,YAAY,GAAG,aAAa,KAAK,MAAM;EACrD,OAAO;EACP,GAAI;EACJ,GAAI;EACJ,CAAA;EAGP;AAED,yBAAyB,cAAc;AAEvC,IAAa,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.cjs","names":[],"sources":["../../../components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { CheckIcon } from '@radix-ui/react-icons';\nimport React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\n\nconst StyledIndicator = styled(CheckboxPrimitive.Indicator, {\n alignItems: 'center',\n display: 'flex',\n height: '100%',\n justifyContent: 'center',\n width: '100%',\n});\n\nconst StyledCheckbox = styled(CheckboxPrimitive.Root, {\n all: 'unset',\n border: 'none',\n boxSizing: 'border-box',\n userSelect: 'none',\n '&::before': {\n boxSizing: 'border-box',\n },\n '&::after': {\n boxSizing: 'border-box',\n },\n\n alignItems: 'center',\n appearance: 'none',\n display: 'inline-flex',\n justifyContent: 'center',\n lineHeight: '1',\n margin: '0',\n outline: 'none',\n padding: '0',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n overflow: 'hidden',\n\n '&[data-state=checked]': {\n backgroundColor: '$checkboxCheckedBg',\n boxShadow: 'inset 0 0 0 1px transparent',\n color: '$checkboxCheckedIcon',\n\n '@hover': {\n '&:hover': {\n backgroundColor: '$checkboxCheckedHoverBg',\n },\n },\n },\n\n '&[data-state=unchecked]': {\n backgroundColor: '$checkboxBg',\n boxShadow: 'inset 0 0 0 1px $colors$checkboxBorder',\n color: '$checkboxIcon',\n\n '@hover': {\n '&:hover': {\n backgroundColor: '$checkboxHoverBg',\n boxShadow: 'inset 0 0 0 1px $colors$checkboxHoverBorder',\n },\n },\n },\n\n '&:focus': {\n outline: 'none',\n boxShadow: 'inset 0 0 0 1px $colors$checkboxFocusBorder',\n },\n\n '&:disabled': {\n pointerEvents: 'none',\n backgroundColor: '$checkboxDisabledBg',\n boxShadow: 'inset 0 0 0 1px $colors$checkboxDisabledBorder',\n '&::placeholder': {\n color: '$checkboxDisabledText',\n },\n\n [`& ${StyledIndicator}`]: {\n '&::after': {\n backgroundColor: '$checkboxIndicatorDisabledBg',\n },\n },\n },\n\n variants: {\n size: {\n medium: {\n width: 18,\n height: 18,\n borderRadius: '$2',\n },\n large: {\n width: '$5',\n height: '$5',\n borderRadius: '$3',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n },\n});\n\ntype CheckboxPrimitiveProps = Omit<React.ComponentProps<typeof CheckboxPrimitive.Root>, 'as'>;\nexport type CheckboxVariants = VariantProps<typeof StyledCheckbox>;\nexport type CheckboxProps = CheckboxPrimitiveProps & CheckboxVariants & { css?: CSS };\n\nexport const Checkbox = React.forwardRef<React.ElementRef<typeof StyledCheckbox>, CheckboxProps>(\n (props, forwardedRef) => {\n return (\n <StyledCheckbox {...props} ref={forwardedRef}>\n <StyledIndicator>\n <CheckIcon height={40} width={40} />\n </StyledIndicator>\n </StyledCheckbox>\n );\n }\n);\n"],"mappings":";;;;;;;;;AAMA,IAAM,kBAAkB,wBAAA,OAAO,yBAAkB,WAAW;CAC1D,YAAY;CACZ,SAAS;CACT,QAAQ;CACR,gBAAgB;CAChB,OAAO;
|
|
1
|
+
{"version":3,"file":"Checkbox.cjs","names":[],"sources":["../../../components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { CheckIcon } from '@radix-ui/react-icons';\nimport React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\n\nconst StyledIndicator = styled(CheckboxPrimitive.Indicator, {\n alignItems: 'center',\n display: 'flex',\n height: '100%',\n justifyContent: 'center',\n width: '100%',\n});\n\nconst StyledCheckbox = styled(CheckboxPrimitive.Root, {\n all: 'unset',\n border: 'none',\n boxSizing: 'border-box',\n userSelect: 'none',\n '&::before': {\n boxSizing: 'border-box',\n },\n '&::after': {\n boxSizing: 'border-box',\n },\n\n alignItems: 'center',\n appearance: 'none',\n display: 'inline-flex',\n justifyContent: 'center',\n lineHeight: '1',\n margin: '0',\n outline: 'none',\n padding: '0',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n overflow: 'hidden',\n\n '&[data-state=checked]': {\n backgroundColor: '$checkboxCheckedBg',\n boxShadow: 'inset 0 0 0 1px transparent',\n color: '$checkboxCheckedIcon',\n\n '@hover': {\n '&:hover': {\n backgroundColor: '$checkboxCheckedHoverBg',\n },\n },\n },\n\n '&[data-state=unchecked]': {\n backgroundColor: '$checkboxBg',\n boxShadow: 'inset 0 0 0 1px $colors$checkboxBorder',\n color: '$checkboxIcon',\n\n '@hover': {\n '&:hover': {\n backgroundColor: '$checkboxHoverBg',\n boxShadow: 'inset 0 0 0 1px $colors$checkboxHoverBorder',\n },\n },\n },\n\n '&:focus': {\n outline: 'none',\n boxShadow: 'inset 0 0 0 1px $colors$checkboxFocusBorder',\n },\n\n '&:disabled': {\n pointerEvents: 'none',\n backgroundColor: '$checkboxDisabledBg',\n boxShadow: 'inset 0 0 0 1px $colors$checkboxDisabledBorder',\n '&::placeholder': {\n color: '$checkboxDisabledText',\n },\n\n [`& ${StyledIndicator}`]: {\n '&::after': {\n backgroundColor: '$checkboxIndicatorDisabledBg',\n },\n },\n },\n\n variants: {\n size: {\n medium: {\n width: 18,\n height: 18,\n borderRadius: '$2',\n },\n large: {\n width: '$5',\n height: '$5',\n borderRadius: '$3',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n },\n});\n\ntype CheckboxPrimitiveProps = Omit<React.ComponentProps<typeof CheckboxPrimitive.Root>, 'as'>;\nexport type CheckboxVariants = VariantProps<typeof StyledCheckbox>;\nexport type CheckboxProps = CheckboxPrimitiveProps & CheckboxVariants & { css?: CSS };\n\nexport const Checkbox = React.forwardRef<React.ElementRef<typeof StyledCheckbox>, CheckboxProps>(\n (props, forwardedRef) => {\n return (\n <StyledCheckbox {...props} ref={forwardedRef}>\n <StyledIndicator>\n <CheckIcon height={40} width={40} />\n </StyledIndicator>\n </StyledCheckbox>\n );\n }\n);\n"],"mappings":";;;;;;;;;AAMA,IAAM,kBAAkB,wBAAA,OAAO,yBAAkB,WAAW;CAC1D,YAAY;CACZ,SAAS;CACT,QAAQ;CACR,gBAAgB;CAChB,OAAO;CACR,CAAC;AAEF,IAAM,iBAAiB,wBAAA,OAAO,yBAAkB,MAAM;CACpD,KAAK;CACL,QAAQ;CACR,WAAW;CACX,YAAY;CACZ,aAAa,EACX,WAAW,cACZ;CACD,YAAY,EACV,WAAW,cACZ;CAED,YAAY;CACZ,YAAY;CACZ,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,QAAQ;CACR,SAAS;CACT,SAAS;CACT,yBAAyB;CACzB,UAAU;CAEV,yBAAyB;EACvB,iBAAiB;EACjB,WAAW;EACX,OAAO;EAEP,UAAU,EACR,WAAW,EACT,iBAAiB,2BAClB,EACF;EACF;CAED,2BAA2B;EACzB,iBAAiB;EACjB,WAAW;EACX,OAAO;EAEP,UAAU,EACR,WAAW;GACT,iBAAiB;GACjB,WAAW;GACZ,EACF;EACF;CAED,WAAW;EACT,SAAS;EACT,WAAW;EACZ;CAED,cAAc;EACZ,eAAe;EACf,iBAAiB;EACjB,WAAW;EACX,kBAAkB,EAChB,OAAO,yBACR;GAEA,KAAK,oBAAoB,EACxB,YAAY,EACV,iBAAiB,gCAClB,EACF;EACF;CAED,UAAU,EACR,MAAM;EACJ,QAAQ;GACN,OAAO;GACP,QAAQ;GACR,cAAc;GACf;EACD,OAAO;GACL,OAAO;GACP,QAAQ;GACR,cAAc;GACf;EACF,EACF;CACD,iBAAiB,EACf,MAAM,UACP;CACF,CAAC;AAMF,IAAa,WAAW,MAAA,QAAM,YAC3B,OAAO,iBAAiB;CACvB,OACE,iBAAA,GAAA,kBAAA,KAAC,gBAAD;EAAgB,GAAI;EAAO,KAAK;YAC9B,iBAAA,GAAA,kBAAA,KAAC,iBAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,sBAAA,WAAD;GAAW,QAAQ;GAAI,OAAO;GAAM,CAAA,EACpB,CAAA;EACH,CAAA;EAGtB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","names":[],"sources":["../../../components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { CheckIcon } from '@radix-ui/react-icons';\nimport React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\n\nconst StyledIndicator = styled(CheckboxPrimitive.Indicator, {\n alignItems: 'center',\n display: 'flex',\n height: '100%',\n justifyContent: 'center',\n width: '100%',\n});\n\nconst StyledCheckbox = styled(CheckboxPrimitive.Root, {\n all: 'unset',\n border: 'none',\n boxSizing: 'border-box',\n userSelect: 'none',\n '&::before': {\n boxSizing: 'border-box',\n },\n '&::after': {\n boxSizing: 'border-box',\n },\n\n alignItems: 'center',\n appearance: 'none',\n display: 'inline-flex',\n justifyContent: 'center',\n lineHeight: '1',\n margin: '0',\n outline: 'none',\n padding: '0',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n overflow: 'hidden',\n\n '&[data-state=checked]': {\n backgroundColor: '$checkboxCheckedBg',\n boxShadow: 'inset 0 0 0 1px transparent',\n color: '$checkboxCheckedIcon',\n\n '@hover': {\n '&:hover': {\n backgroundColor: '$checkboxCheckedHoverBg',\n },\n },\n },\n\n '&[data-state=unchecked]': {\n backgroundColor: '$checkboxBg',\n boxShadow: 'inset 0 0 0 1px $colors$checkboxBorder',\n color: '$checkboxIcon',\n\n '@hover': {\n '&:hover': {\n backgroundColor: '$checkboxHoverBg',\n boxShadow: 'inset 0 0 0 1px $colors$checkboxHoverBorder',\n },\n },\n },\n\n '&:focus': {\n outline: 'none',\n boxShadow: 'inset 0 0 0 1px $colors$checkboxFocusBorder',\n },\n\n '&:disabled': {\n pointerEvents: 'none',\n backgroundColor: '$checkboxDisabledBg',\n boxShadow: 'inset 0 0 0 1px $colors$checkboxDisabledBorder',\n '&::placeholder': {\n color: '$checkboxDisabledText',\n },\n\n [`& ${StyledIndicator}`]: {\n '&::after': {\n backgroundColor: '$checkboxIndicatorDisabledBg',\n },\n },\n },\n\n variants: {\n size: {\n medium: {\n width: 18,\n height: 18,\n borderRadius: '$2',\n },\n large: {\n width: '$5',\n height: '$5',\n borderRadius: '$3',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n },\n});\n\ntype CheckboxPrimitiveProps = Omit<React.ComponentProps<typeof CheckboxPrimitive.Root>, 'as'>;\nexport type CheckboxVariants = VariantProps<typeof StyledCheckbox>;\nexport type CheckboxProps = CheckboxPrimitiveProps & CheckboxVariants & { css?: CSS };\n\nexport const Checkbox = React.forwardRef<React.ElementRef<typeof StyledCheckbox>, CheckboxProps>(\n (props, forwardedRef) => {\n return (\n <StyledCheckbox {...props} ref={forwardedRef}>\n <StyledIndicator>\n <CheckIcon height={40} width={40} />\n </StyledIndicator>\n </StyledCheckbox>\n );\n }\n);\n"],"mappings":";;;;;;AAMA,IAAM,kBAAkB,OAAO,kBAAkB,WAAW;CAC1D,YAAY;CACZ,SAAS;CACT,QAAQ;CACR,gBAAgB;CAChB,OAAO;
|
|
1
|
+
{"version":3,"file":"Checkbox.js","names":[],"sources":["../../../components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { CheckIcon } from '@radix-ui/react-icons';\nimport React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\n\nconst StyledIndicator = styled(CheckboxPrimitive.Indicator, {\n alignItems: 'center',\n display: 'flex',\n height: '100%',\n justifyContent: 'center',\n width: '100%',\n});\n\nconst StyledCheckbox = styled(CheckboxPrimitive.Root, {\n all: 'unset',\n border: 'none',\n boxSizing: 'border-box',\n userSelect: 'none',\n '&::before': {\n boxSizing: 'border-box',\n },\n '&::after': {\n boxSizing: 'border-box',\n },\n\n alignItems: 'center',\n appearance: 'none',\n display: 'inline-flex',\n justifyContent: 'center',\n lineHeight: '1',\n margin: '0',\n outline: 'none',\n padding: '0',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n overflow: 'hidden',\n\n '&[data-state=checked]': {\n backgroundColor: '$checkboxCheckedBg',\n boxShadow: 'inset 0 0 0 1px transparent',\n color: '$checkboxCheckedIcon',\n\n '@hover': {\n '&:hover': {\n backgroundColor: '$checkboxCheckedHoverBg',\n },\n },\n },\n\n '&[data-state=unchecked]': {\n backgroundColor: '$checkboxBg',\n boxShadow: 'inset 0 0 0 1px $colors$checkboxBorder',\n color: '$checkboxIcon',\n\n '@hover': {\n '&:hover': {\n backgroundColor: '$checkboxHoverBg',\n boxShadow: 'inset 0 0 0 1px $colors$checkboxHoverBorder',\n },\n },\n },\n\n '&:focus': {\n outline: 'none',\n boxShadow: 'inset 0 0 0 1px $colors$checkboxFocusBorder',\n },\n\n '&:disabled': {\n pointerEvents: 'none',\n backgroundColor: '$checkboxDisabledBg',\n boxShadow: 'inset 0 0 0 1px $colors$checkboxDisabledBorder',\n '&::placeholder': {\n color: '$checkboxDisabledText',\n },\n\n [`& ${StyledIndicator}`]: {\n '&::after': {\n backgroundColor: '$checkboxIndicatorDisabledBg',\n },\n },\n },\n\n variants: {\n size: {\n medium: {\n width: 18,\n height: 18,\n borderRadius: '$2',\n },\n large: {\n width: '$5',\n height: '$5',\n borderRadius: '$3',\n },\n },\n },\n defaultVariants: {\n size: 'medium',\n },\n});\n\ntype CheckboxPrimitiveProps = Omit<React.ComponentProps<typeof CheckboxPrimitive.Root>, 'as'>;\nexport type CheckboxVariants = VariantProps<typeof StyledCheckbox>;\nexport type CheckboxProps = CheckboxPrimitiveProps & CheckboxVariants & { css?: CSS };\n\nexport const Checkbox = React.forwardRef<React.ElementRef<typeof StyledCheckbox>, CheckboxProps>(\n (props, forwardedRef) => {\n return (\n <StyledCheckbox {...props} ref={forwardedRef}>\n <StyledIndicator>\n <CheckIcon height={40} width={40} />\n </StyledIndicator>\n </StyledCheckbox>\n );\n }\n);\n"],"mappings":";;;;;;AAMA,IAAM,kBAAkB,OAAO,kBAAkB,WAAW;CAC1D,YAAY;CACZ,SAAS;CACT,QAAQ;CACR,gBAAgB;CAChB,OAAO;CACR,CAAC;AAEF,IAAM,iBAAiB,OAAO,kBAAkB,MAAM;CACpD,KAAK;CACL,QAAQ;CACR,WAAW;CACX,YAAY;CACZ,aAAa,EACX,WAAW,cACZ;CACD,YAAY,EACV,WAAW,cACZ;CAED,YAAY;CACZ,YAAY;CACZ,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,QAAQ;CACR,SAAS;CACT,SAAS;CACT,yBAAyB;CACzB,UAAU;CAEV,yBAAyB;EACvB,iBAAiB;EACjB,WAAW;EACX,OAAO;EAEP,UAAU,EACR,WAAW,EACT,iBAAiB,2BAClB,EACF;EACF;CAED,2BAA2B;EACzB,iBAAiB;EACjB,WAAW;EACX,OAAO;EAEP,UAAU,EACR,WAAW;GACT,iBAAiB;GACjB,WAAW;GACZ,EACF;EACF;CAED,WAAW;EACT,SAAS;EACT,WAAW;EACZ;CAED,cAAc;EACZ,eAAe;EACf,iBAAiB;EACjB,WAAW;EACX,kBAAkB,EAChB,OAAO,yBACR;GAEA,KAAK,oBAAoB,EACxB,YAAY,EACV,iBAAiB,gCAClB,EACF;EACF;CAED,UAAU,EACR,MAAM;EACJ,QAAQ;GACN,OAAO;GACP,QAAQ;GACR,cAAc;GACf;EACD,OAAO;GACL,OAAO;GACP,QAAQ;GACR,cAAc;GACf;EACF,EACF;CACD,iBAAiB,EACf,MAAM,UACP;CACF,CAAC;AAMF,IAAa,WAAW,MAAM,YAC3B,OAAO,iBAAiB;CACvB,OACE,oBAAC,gBAAD;EAAgB,GAAI;EAAO,KAAK;YAC9B,oBAAC,iBAAD,EAAA,UACE,oBAAC,WAAD;GAAW,QAAQ;GAAI,OAAO;GAAM,CAAA,EACpB,CAAA;EACH,CAAA;EAGtB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.themes.cjs","names":[],"sources":["../../../components/Checkbox/Checkbox.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n checkboxIcon: Property.Color;\n checkboxBg: Property.Color;\n checkboxCheckedBg: Property.Color;\n checkboxBorder: Property.Color;\n checkboxCheckedIcon: Property.Color;\n checkboxCheckedHoverBg: Property.Color;\n checkboxHoverBg: Property.Color;\n checkboxHoverBorder: Property.Color;\n checkboxFocusBorder: Property.Color;\n checkboxDisabledBg: Property.Color;\n checkboxDisabledBorder: Property.Color;\n checkboxIndicatorDisabledBg: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n checkboxIcon: '$deepBlue11',\n checkboxBg: 'transparent',\n checkboxBorder: '$slate8',\n checkboxCheckedBg: '$primary',\n checkboxCheckedIcon: 'white',\n checkboxCheckedHoverBg: tinycolor(primaryColor.value).darken().toHslString(),\n checkboxHoverBg: 'transparent',\n checkboxHoverBorder: '$primary',\n checkboxFocusBorder: '$primary',\n checkboxDisabledBg: '$deepBlue3',\n checkboxDisabledBorder: '$deepBlue5',\n checkboxIndicatorDisabledBg: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),\n });\n\n export const getDark: Factory = (primaryColor) => ({\n checkboxIcon: '$deepBlue1',\n checkboxBg: 'transparent',\n checkboxCheckedBg: '$primary',\n checkboxBorder: '$slate9',\n checkboxCheckedIcon: '$deepBlue1',\n checkboxCheckedHoverBg: tinycolor(primaryColor.value).lighten(10).toHslString(),\n checkboxHoverBg: '$deepBlue3',\n checkboxHoverBorder: '$primary',\n checkboxFocusBorder: '$primary',\n checkboxDisabledBg: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),\n checkboxDisabledBorder: 'transparent',\n checkboxIndicatorDisabledBg: '$deepBlue1',\n });\n}\n"],"mappings":";;;;AAKO,IAAA;;CAkBQ,OAAA,YAAqB,kBAAkB;EAClD,cAAc;EACd,YAAY;EACZ,gBAAgB;EAChB,mBAAmB;EACnB,qBAAqB;EACrB,yBAAA,GAAA,WAAA,SAAkC,aAAa,
|
|
1
|
+
{"version":3,"file":"Checkbox.themes.cjs","names":[],"sources":["../../../components/Checkbox/Checkbox.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n checkboxIcon: Property.Color;\n checkboxBg: Property.Color;\n checkboxCheckedBg: Property.Color;\n checkboxBorder: Property.Color;\n checkboxCheckedIcon: Property.Color;\n checkboxCheckedHoverBg: Property.Color;\n checkboxHoverBg: Property.Color;\n checkboxHoverBorder: Property.Color;\n checkboxFocusBorder: Property.Color;\n checkboxDisabledBg: Property.Color;\n checkboxDisabledBorder: Property.Color;\n checkboxIndicatorDisabledBg: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n checkboxIcon: '$deepBlue11',\n checkboxBg: 'transparent',\n checkboxBorder: '$slate8',\n checkboxCheckedBg: '$primary',\n checkboxCheckedIcon: 'white',\n checkboxCheckedHoverBg: tinycolor(primaryColor.value).darken().toHslString(),\n checkboxHoverBg: 'transparent',\n checkboxHoverBorder: '$primary',\n checkboxFocusBorder: '$primary',\n checkboxDisabledBg: '$deepBlue3',\n checkboxDisabledBorder: '$deepBlue5',\n checkboxIndicatorDisabledBg: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),\n });\n\n export const getDark: Factory = (primaryColor) => ({\n checkboxIcon: '$deepBlue1',\n checkboxBg: 'transparent',\n checkboxCheckedBg: '$primary',\n checkboxBorder: '$slate9',\n checkboxCheckedIcon: '$deepBlue1',\n checkboxCheckedHoverBg: tinycolor(primaryColor.value).lighten(10).toHslString(),\n checkboxHoverBg: '$deepBlue3',\n checkboxHoverBorder: '$primary',\n checkboxFocusBorder: '$primary',\n checkboxDisabledBg: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),\n checkboxDisabledBorder: 'transparent',\n checkboxIndicatorDisabledBg: '$deepBlue1',\n });\n}\n"],"mappings":";;;;AAKO,IAAA;;CAkBQ,OAAA,YAAqB,kBAAkB;EAClD,cAAc;EACd,YAAY;EACZ,gBAAgB;EAChB,mBAAmB;EACnB,qBAAqB;EACrB,yBAAA,GAAA,WAAA,SAAkC,aAAa,MAAM,CAAC,QAAQ,CAAC,aAAa;EAC5E,iBAAiB;EACjB,qBAAqB;EACrB,qBAAqB;EACrB,oBAAoB;EACpB,wBAAwB;EACxB,8BAAA,GAAA,WAAA,SAAuC,aAAa,MAAM,CAAC,SAAS,GAAI,CAAC,aAAa;EACvF;CAEY,OAAA,WAAoB,kBAAkB;EACjD,cAAc;EACd,YAAY;EACZ,mBAAmB;EACnB,gBAAgB;EAChB,qBAAqB;EACrB,yBAAA,GAAA,WAAA,SAAkC,aAAa,MAAM,CAAC,QAAQ,GAAG,CAAC,aAAa;EAC/E,iBAAiB;EACjB,qBAAqB;EACrB,qBAAqB;EACrB,qBAAA,GAAA,WAAA,SAA8B,aAAa,MAAM,CAAC,SAAS,GAAI,CAAC,aAAa;EAC7E,wBAAwB;EACxB,6BAA6B;EAC9B;yBACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.themes.js","names":[],"sources":["../../../components/Checkbox/Checkbox.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n checkboxIcon: Property.Color;\n checkboxBg: Property.Color;\n checkboxCheckedBg: Property.Color;\n checkboxBorder: Property.Color;\n checkboxCheckedIcon: Property.Color;\n checkboxCheckedHoverBg: Property.Color;\n checkboxHoverBg: Property.Color;\n checkboxHoverBorder: Property.Color;\n checkboxFocusBorder: Property.Color;\n checkboxDisabledBg: Property.Color;\n checkboxDisabledBorder: Property.Color;\n checkboxIndicatorDisabledBg: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n checkboxIcon: '$deepBlue11',\n checkboxBg: 'transparent',\n checkboxBorder: '$slate8',\n checkboxCheckedBg: '$primary',\n checkboxCheckedIcon: 'white',\n checkboxCheckedHoverBg: tinycolor(primaryColor.value).darken().toHslString(),\n checkboxHoverBg: 'transparent',\n checkboxHoverBorder: '$primary',\n checkboxFocusBorder: '$primary',\n checkboxDisabledBg: '$deepBlue3',\n checkboxDisabledBorder: '$deepBlue5',\n checkboxIndicatorDisabledBg: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),\n });\n\n export const getDark: Factory = (primaryColor) => ({\n checkboxIcon: '$deepBlue1',\n checkboxBg: 'transparent',\n checkboxCheckedBg: '$primary',\n checkboxBorder: '$slate9',\n checkboxCheckedIcon: '$deepBlue1',\n checkboxCheckedHoverBg: tinycolor(primaryColor.value).lighten(10).toHslString(),\n checkboxHoverBg: '$deepBlue3',\n checkboxHoverBorder: '$primary',\n checkboxFocusBorder: '$primary',\n checkboxDisabledBg: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),\n checkboxDisabledBorder: 'transparent',\n checkboxIndicatorDisabledBg: '$deepBlue1',\n });\n}\n"],"mappings":";;AAKO,IAAA;;CAkBQ,OAAA,YAAqB,kBAAkB;EAClD,cAAc;EACd,YAAY;EACZ,gBAAgB;EAChB,mBAAmB;EACnB,qBAAqB;EACrB,wBAAwB,UAAU,aAAa,
|
|
1
|
+
{"version":3,"file":"Checkbox.themes.js","names":[],"sources":["../../../components/Checkbox/Checkbox.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\nimport tinycolor from 'tinycolor2';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\n\nexport namespace Theme {\n type Colors = {\n checkboxIcon: Property.Color;\n checkboxBg: Property.Color;\n checkboxCheckedBg: Property.Color;\n checkboxBorder: Property.Color;\n checkboxCheckedIcon: Property.Color;\n checkboxCheckedHoverBg: Property.Color;\n checkboxHoverBg: Property.Color;\n checkboxHoverBorder: Property.Color;\n checkboxFocusBorder: Property.Color;\n checkboxDisabledBg: Property.Color;\n checkboxDisabledBorder: Property.Color;\n checkboxIndicatorDisabledBg: Property.Color;\n };\n\n type Factory = (primaryColor: ColorInfo) => Colors;\n\n export const getLight: Factory = (primaryColor) => ({\n checkboxIcon: '$deepBlue11',\n checkboxBg: 'transparent',\n checkboxBorder: '$slate8',\n checkboxCheckedBg: '$primary',\n checkboxCheckedIcon: 'white',\n checkboxCheckedHoverBg: tinycolor(primaryColor.value).darken().toHslString(),\n checkboxHoverBg: 'transparent',\n checkboxHoverBorder: '$primary',\n checkboxFocusBorder: '$primary',\n checkboxDisabledBg: '$deepBlue3',\n checkboxDisabledBorder: '$deepBlue5',\n checkboxIndicatorDisabledBg: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),\n });\n\n export const getDark: Factory = (primaryColor) => ({\n checkboxIcon: '$deepBlue1',\n checkboxBg: 'transparent',\n checkboxCheckedBg: '$primary',\n checkboxBorder: '$slate9',\n checkboxCheckedIcon: '$deepBlue1',\n checkboxCheckedHoverBg: tinycolor(primaryColor.value).lighten(10).toHslString(),\n checkboxHoverBg: '$deepBlue3',\n checkboxHoverBorder: '$primary',\n checkboxFocusBorder: '$primary',\n checkboxDisabledBg: tinycolor(primaryColor.value).setAlpha(0.6).toHslString(),\n checkboxDisabledBorder: 'transparent',\n checkboxIndicatorDisabledBg: '$deepBlue1',\n });\n}\n"],"mappings":";;AAKO,IAAA;;CAkBQ,OAAA,YAAqB,kBAAkB;EAClD,cAAc;EACd,YAAY;EACZ,gBAAgB;EAChB,mBAAmB;EACnB,qBAAqB;EACrB,wBAAwB,UAAU,aAAa,MAAM,CAAC,QAAQ,CAAC,aAAa;EAC5E,iBAAiB;EACjB,qBAAqB;EACrB,qBAAqB;EACrB,oBAAoB;EACpB,wBAAwB;EACxB,6BAA6B,UAAU,aAAa,MAAM,CAAC,SAAS,GAAI,CAAC,aAAa;EACvF;CAEY,OAAA,WAAoB,kBAAkB;EACjD,cAAc;EACd,YAAY;EACZ,mBAAmB;EACnB,gBAAgB;EAChB,qBAAqB;EACrB,wBAAwB,UAAU,aAAa,MAAM,CAAC,QAAQ,GAAG,CAAC,aAAa;EAC/E,iBAAiB;EACjB,qBAAqB;EACrB,qBAAqB;EACrB,oBAAoB,UAAU,aAAa,MAAM,CAAC,SAAS,GAAI,CAAC,aAAa;EAC7E,wBAAwB;EACxB,6BAA6B;EAC9B;yBACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeBlock.cjs","names":[],"sources":["../../../components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import { CheckIcon, CopyIcon } from '@radix-ui/react-icons';\nimport { Highlight, Language, themes } from 'prism-react-renderer';\nimport React, {\n ComponentProps,\n forwardRef,\n useCallback,\n useLayoutEffect,\n useRef,\n useState,\n} from 'react';\n\nimport { CSS, styled } from '../../stitches.config';\nimport { AccessibleIcon } from '../AccessibleIcon';\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { useColorScheme } from '../colorSchemeContext';\nimport type { CodeBlockCopyButtonAlign, CodeBlockLanguage } from './index';\nimport { Prism } from './prism-extend';\n\nconst Pre = styled('pre', {\n m: 0,\n borderRadius: '$2',\n overflow: 'auto',\n border: '1px solid $colors$deepBlue3',\n fontSize: '$2',\n lineHeight: 1.6,\n\n variants: {\n noBorder: {\n true: { border: 'none' },\n },\n },\n});\n\nconst CopyButtonWrapper = styled('div', {\n position: 'absolute',\n zIndex: 1,\n variants: {\n position: {\n top: { top: '$2', right: '$3' },\n topLeft: { top: '$2', left: '$3' },\n bottomRight: { bottom: '$2', right: '$3' },\n bottomLeft: { bottom: '$2', left: '$3' },\n },\n },\n\n defaultVariants: {\n position: 'top',\n },\n});\n\nexport type CodeBlockProps = {\n lang?: CodeBlockLanguage;\n code: string;\n copyable?: boolean;\n copyText?: string;\n copiedText?: string;\n copyButtonAlign?: CodeBlockCopyButtonAlign;\n onCopy?: () => void;\n noBorder?: boolean;\n wrapText?: boolean;\n colorScheme?: 'light' | 'dark';\n maxHeight?: number | string;\n css?: CSS;\n} & Omit<ComponentProps<typeof Pre>, 'css'>;\n\nexport const CodeBlock = forwardRef<HTMLPreElement, CodeBlockProps>(\n (\n {\n lang = 'text',\n code,\n copyable = false,\n copyText,\n copiedText,\n copyButtonAlign = 'top right',\n onCopy,\n noBorder,\n wrapText = false,\n colorScheme,\n maxHeight = 424,\n css,\n style,\n className,\n ...props\n },\n ref,\n ) => {\n const systemScheme = useColorScheme();\n const resolvedScheme = colorScheme ?? systemScheme;\n const prismTheme = resolvedScheme === 'dark' ? themes.nightOwl : themes.nightOwlLight;\n\n const isBottom = copyButtonAlign.includes('bottom');\n const isLeft = copyButtonAlign.includes('left');\n const buttonPosition = isBottom\n ? isLeft\n ? 'bottomLeft'\n : 'bottomRight'\n : isLeft\n ? 'topLeft'\n : 'top';\n\n const [copied, setCopied] = useState(false);\n\n const preRef = useRef<HTMLPreElement | null>(\n null,\n ) as React.MutableRefObject<HTMLPreElement | null>;\n const buttonWrapperRef = useRef<HTMLDivElement>(null);\n\n const setPreRef = useCallback(\n (node: HTMLPreElement | null) => {\n preRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) (ref as React.MutableRefObject<HTMLPreElement | null>).current = node;\n },\n [ref],\n );\n\n useLayoutEffect(() => {\n if (!copyable) return;\n const pre = preRef.current;\n const wrapper = buttonWrapperRef.current;\n if (!pre || !wrapper) return;\n\n const isBottomAlign = isBottom;\n const borderH = noBorder ? 0 : 2;\n\n const update = () => {\n if (!isLeft) {\n const vScrollbar = Math.max(0, pre.offsetWidth - pre.clientWidth - borderH);\n wrapper.style.right = `${16 + vScrollbar}px`;\n }\n if (isBottomAlign) {\n const hScrollbar = Math.max(0, pre.offsetHeight - pre.clientHeight - borderH);\n wrapper.style.bottom = `${8 + hScrollbar}px`;\n }\n };\n\n update();\n const observer = new ResizeObserver(update);\n observer.observe(pre);\n return () => observer.disconnect();\n }, [copyable, isBottom, isLeft, noBorder]);\n\n const handleCopy = async () => {\n try {\n await navigator.clipboard.writeText(code);\n setCopied(true);\n onCopy?.();\n setTimeout(() => setCopied(false), 1500);\n } catch {\n // clipboard write failed (e.g. permission denied) — leave UI unchanged\n }\n };\n\n const copyButton = copyable ? (\n <Button\n variant=\"secondary\"\n ghost\n size=\"small\"\n type=\"button\"\n onClick={handleCopy}\n css={{\n color: '$hiContrast',\n gap: '$1',\n backgroundColor: '$codeBlockCopyButtonBg',\n height: '32px',\n }}\n >\n <AccessibleIcon label={copied ? 'Copied' : 'Copy'}>\n {copied ? <CheckIcon /> : <CopyIcon />}\n </AccessibleIcon>\n {copied ? copiedText : copyText}\n </Button>\n ) : null;\n\n return (\n <Highlight\n theme={prismTheme}\n code={code}\n language={(Prism.languages[lang] != null ? lang : 'text') as Language}\n >\n {({\n className: highlightClass,\n style: highlightStyle,\n tokens,\n getLineProps,\n getTokenProps,\n }) => (\n <Box css={{ position: 'relative', ...css }}>\n <Pre\n ref={setPreRef}\n className={[highlightClass, className].filter(Boolean).join(' ')}\n style={{ maxHeight, ...highlightStyle, backgroundColor: 'inherit', ...style }}\n noBorder={noBorder}\n {...props}\n >\n <Box\n css={{\n p: '$4',\n ...(copyable && isLeft && isBottom ? { pb: '$7' } : {}),\n ...(copyable && isLeft && !isBottom ? { pt: '$7' } : {}),\n }}\n >\n {tokens.map((line, i) => (\n <div\n key={i}\n {...getLineProps({ line })}\n style={\n wrapText ? { whiteSpace: 'pre-wrap', wordBreak: 'break-all' } : undefined\n }\n >\n {line.map((token, key) => (\n <span key={key} {...getTokenProps({ token })} />\n ))}\n </div>\n ))}\n </Box>\n </Pre>\n {copyButton && (\n <CopyButtonWrapper ref={buttonWrapperRef} position={buttonPosition}>\n {copyButton}\n </CopyButtonWrapper>\n )}\n </Box>\n )}\n </Highlight>\n );\n },\n);\n\nCodeBlock.displayName = 'CodeBlock';\n"],"mappings":";;;;;;;;;;;;;AAmBA,IAAM,MAAM,wBAAA,OAAO,OAAO;CACxB,GAAG;CACH,cAAc;CACd,UAAU;CACV,QAAQ;CACR,UAAU;CACV,YAAY;CAEZ,UAAU,EACR,UAAU,EACR,MAAM,EAAE,QAAQ,
|
|
1
|
+
{"version":3,"file":"CodeBlock.cjs","names":[],"sources":["../../../components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import { CheckIcon, CopyIcon } from '@radix-ui/react-icons';\nimport { Highlight, Language, themes } from 'prism-react-renderer';\nimport React, {\n ComponentProps,\n forwardRef,\n useCallback,\n useLayoutEffect,\n useRef,\n useState,\n} from 'react';\n\nimport { CSS, styled } from '../../stitches.config';\nimport { AccessibleIcon } from '../AccessibleIcon';\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { useColorScheme } from '../colorSchemeContext';\nimport type { CodeBlockCopyButtonAlign, CodeBlockLanguage } from './index';\nimport { Prism } from './prism-extend';\n\nconst Pre = styled('pre', {\n m: 0,\n borderRadius: '$2',\n overflow: 'auto',\n border: '1px solid $colors$deepBlue3',\n fontSize: '$2',\n lineHeight: 1.6,\n\n variants: {\n noBorder: {\n true: { border: 'none' },\n },\n },\n});\n\nconst CopyButtonWrapper = styled('div', {\n position: 'absolute',\n zIndex: 1,\n variants: {\n position: {\n top: { top: '$2', right: '$3' },\n topLeft: { top: '$2', left: '$3' },\n bottomRight: { bottom: '$2', right: '$3' },\n bottomLeft: { bottom: '$2', left: '$3' },\n },\n },\n\n defaultVariants: {\n position: 'top',\n },\n});\n\nexport type CodeBlockProps = {\n lang?: CodeBlockLanguage;\n code: string;\n copyable?: boolean;\n copyText?: string;\n copiedText?: string;\n copyButtonAlign?: CodeBlockCopyButtonAlign;\n onCopy?: () => void;\n noBorder?: boolean;\n wrapText?: boolean;\n colorScheme?: 'light' | 'dark';\n maxHeight?: number | string;\n css?: CSS;\n} & Omit<ComponentProps<typeof Pre>, 'css'>;\n\nexport const CodeBlock = forwardRef<HTMLPreElement, CodeBlockProps>(\n (\n {\n lang = 'text',\n code,\n copyable = false,\n copyText,\n copiedText,\n copyButtonAlign = 'top right',\n onCopy,\n noBorder,\n wrapText = false,\n colorScheme,\n maxHeight = 424,\n css,\n style,\n className,\n ...props\n },\n ref,\n ) => {\n const systemScheme = useColorScheme();\n const resolvedScheme = colorScheme ?? systemScheme;\n const prismTheme = resolvedScheme === 'dark' ? themes.nightOwl : themes.nightOwlLight;\n\n const isBottom = copyButtonAlign.includes('bottom');\n const isLeft = copyButtonAlign.includes('left');\n const buttonPosition = isBottom\n ? isLeft\n ? 'bottomLeft'\n : 'bottomRight'\n : isLeft\n ? 'topLeft'\n : 'top';\n\n const [copied, setCopied] = useState(false);\n\n const preRef = useRef<HTMLPreElement | null>(\n null,\n ) as React.MutableRefObject<HTMLPreElement | null>;\n const buttonWrapperRef = useRef<HTMLDivElement>(null);\n\n const setPreRef = useCallback(\n (node: HTMLPreElement | null) => {\n preRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) (ref as React.MutableRefObject<HTMLPreElement | null>).current = node;\n },\n [ref],\n );\n\n useLayoutEffect(() => {\n if (!copyable) return;\n const pre = preRef.current;\n const wrapper = buttonWrapperRef.current;\n if (!pre || !wrapper) return;\n\n const isBottomAlign = isBottom;\n const borderH = noBorder ? 0 : 2;\n\n const update = () => {\n if (!isLeft) {\n const vScrollbar = Math.max(0, pre.offsetWidth - pre.clientWidth - borderH);\n wrapper.style.right = `${16 + vScrollbar}px`;\n }\n if (isBottomAlign) {\n const hScrollbar = Math.max(0, pre.offsetHeight - pre.clientHeight - borderH);\n wrapper.style.bottom = `${8 + hScrollbar}px`;\n }\n };\n\n update();\n const observer = new ResizeObserver(update);\n observer.observe(pre);\n return () => observer.disconnect();\n }, [copyable, isBottom, isLeft, noBorder]);\n\n const handleCopy = async () => {\n try {\n await navigator.clipboard.writeText(code);\n setCopied(true);\n onCopy?.();\n setTimeout(() => setCopied(false), 1500);\n } catch {\n // clipboard write failed (e.g. permission denied) — leave UI unchanged\n }\n };\n\n const copyButton = copyable ? (\n <Button\n variant=\"secondary\"\n ghost\n size=\"small\"\n type=\"button\"\n onClick={handleCopy}\n css={{\n color: '$hiContrast',\n gap: '$1',\n backgroundColor: '$codeBlockCopyButtonBg',\n height: '32px',\n }}\n >\n <AccessibleIcon label={copied ? 'Copied' : 'Copy'}>\n {copied ? <CheckIcon /> : <CopyIcon />}\n </AccessibleIcon>\n {copied ? copiedText : copyText}\n </Button>\n ) : null;\n\n return (\n <Highlight\n theme={prismTheme}\n code={code}\n language={(Prism.languages[lang] != null ? lang : 'text') as Language}\n >\n {({\n className: highlightClass,\n style: highlightStyle,\n tokens,\n getLineProps,\n getTokenProps,\n }) => (\n <Box css={{ position: 'relative', ...css }}>\n <Pre\n ref={setPreRef}\n className={[highlightClass, className].filter(Boolean).join(' ')}\n style={{ maxHeight, ...highlightStyle, backgroundColor: 'inherit', ...style }}\n noBorder={noBorder}\n {...props}\n >\n <Box\n css={{\n p: '$4',\n ...(copyable && isLeft && isBottom ? { pb: '$7' } : {}),\n ...(copyable && isLeft && !isBottom ? { pt: '$7' } : {}),\n }}\n >\n {tokens.map((line, i) => (\n <div\n key={i}\n {...getLineProps({ line })}\n style={\n wrapText ? { whiteSpace: 'pre-wrap', wordBreak: 'break-all' } : undefined\n }\n >\n {line.map((token, key) => (\n <span key={key} {...getTokenProps({ token })} />\n ))}\n </div>\n ))}\n </Box>\n </Pre>\n {copyButton && (\n <CopyButtonWrapper ref={buttonWrapperRef} position={buttonPosition}>\n {copyButton}\n </CopyButtonWrapper>\n )}\n </Box>\n )}\n </Highlight>\n );\n },\n);\n\nCodeBlock.displayName = 'CodeBlock';\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeBlock.js","names":[],"sources":["../../../components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import { CheckIcon, CopyIcon } from '@radix-ui/react-icons';\nimport { Highlight, Language, themes } from 'prism-react-renderer';\nimport React, {\n ComponentProps,\n forwardRef,\n useCallback,\n useLayoutEffect,\n useRef,\n useState,\n} from 'react';\n\nimport { CSS, styled } from '../../stitches.config';\nimport { AccessibleIcon } from '../AccessibleIcon';\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { useColorScheme } from '../colorSchemeContext';\nimport type { CodeBlockCopyButtonAlign, CodeBlockLanguage } from './index';\nimport { Prism } from './prism-extend';\n\nconst Pre = styled('pre', {\n m: 0,\n borderRadius: '$2',\n overflow: 'auto',\n border: '1px solid $colors$deepBlue3',\n fontSize: '$2',\n lineHeight: 1.6,\n\n variants: {\n noBorder: {\n true: { border: 'none' },\n },\n },\n});\n\nconst CopyButtonWrapper = styled('div', {\n position: 'absolute',\n zIndex: 1,\n variants: {\n position: {\n top: { top: '$2', right: '$3' },\n topLeft: { top: '$2', left: '$3' },\n bottomRight: { bottom: '$2', right: '$3' },\n bottomLeft: { bottom: '$2', left: '$3' },\n },\n },\n\n defaultVariants: {\n position: 'top',\n },\n});\n\nexport type CodeBlockProps = {\n lang?: CodeBlockLanguage;\n code: string;\n copyable?: boolean;\n copyText?: string;\n copiedText?: string;\n copyButtonAlign?: CodeBlockCopyButtonAlign;\n onCopy?: () => void;\n noBorder?: boolean;\n wrapText?: boolean;\n colorScheme?: 'light' | 'dark';\n maxHeight?: number | string;\n css?: CSS;\n} & Omit<ComponentProps<typeof Pre>, 'css'>;\n\nexport const CodeBlock = forwardRef<HTMLPreElement, CodeBlockProps>(\n (\n {\n lang = 'text',\n code,\n copyable = false,\n copyText,\n copiedText,\n copyButtonAlign = 'top right',\n onCopy,\n noBorder,\n wrapText = false,\n colorScheme,\n maxHeight = 424,\n css,\n style,\n className,\n ...props\n },\n ref,\n ) => {\n const systemScheme = useColorScheme();\n const resolvedScheme = colorScheme ?? systemScheme;\n const prismTheme = resolvedScheme === 'dark' ? themes.nightOwl : themes.nightOwlLight;\n\n const isBottom = copyButtonAlign.includes('bottom');\n const isLeft = copyButtonAlign.includes('left');\n const buttonPosition = isBottom\n ? isLeft\n ? 'bottomLeft'\n : 'bottomRight'\n : isLeft\n ? 'topLeft'\n : 'top';\n\n const [copied, setCopied] = useState(false);\n\n const preRef = useRef<HTMLPreElement | null>(\n null,\n ) as React.MutableRefObject<HTMLPreElement | null>;\n const buttonWrapperRef = useRef<HTMLDivElement>(null);\n\n const setPreRef = useCallback(\n (node: HTMLPreElement | null) => {\n preRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) (ref as React.MutableRefObject<HTMLPreElement | null>).current = node;\n },\n [ref],\n );\n\n useLayoutEffect(() => {\n if (!copyable) return;\n const pre = preRef.current;\n const wrapper = buttonWrapperRef.current;\n if (!pre || !wrapper) return;\n\n const isBottomAlign = isBottom;\n const borderH = noBorder ? 0 : 2;\n\n const update = () => {\n if (!isLeft) {\n const vScrollbar = Math.max(0, pre.offsetWidth - pre.clientWidth - borderH);\n wrapper.style.right = `${16 + vScrollbar}px`;\n }\n if (isBottomAlign) {\n const hScrollbar = Math.max(0, pre.offsetHeight - pre.clientHeight - borderH);\n wrapper.style.bottom = `${8 + hScrollbar}px`;\n }\n };\n\n update();\n const observer = new ResizeObserver(update);\n observer.observe(pre);\n return () => observer.disconnect();\n }, [copyable, isBottom, isLeft, noBorder]);\n\n const handleCopy = async () => {\n try {\n await navigator.clipboard.writeText(code);\n setCopied(true);\n onCopy?.();\n setTimeout(() => setCopied(false), 1500);\n } catch {\n // clipboard write failed (e.g. permission denied) — leave UI unchanged\n }\n };\n\n const copyButton = copyable ? (\n <Button\n variant=\"secondary\"\n ghost\n size=\"small\"\n type=\"button\"\n onClick={handleCopy}\n css={{\n color: '$hiContrast',\n gap: '$1',\n backgroundColor: '$codeBlockCopyButtonBg',\n height: '32px',\n }}\n >\n <AccessibleIcon label={copied ? 'Copied' : 'Copy'}>\n {copied ? <CheckIcon /> : <CopyIcon />}\n </AccessibleIcon>\n {copied ? copiedText : copyText}\n </Button>\n ) : null;\n\n return (\n <Highlight\n theme={prismTheme}\n code={code}\n language={(Prism.languages[lang] != null ? lang : 'text') as Language}\n >\n {({\n className: highlightClass,\n style: highlightStyle,\n tokens,\n getLineProps,\n getTokenProps,\n }) => (\n <Box css={{ position: 'relative', ...css }}>\n <Pre\n ref={setPreRef}\n className={[highlightClass, className].filter(Boolean).join(' ')}\n style={{ maxHeight, ...highlightStyle, backgroundColor: 'inherit', ...style }}\n noBorder={noBorder}\n {...props}\n >\n <Box\n css={{\n p: '$4',\n ...(copyable && isLeft && isBottom ? { pb: '$7' } : {}),\n ...(copyable && isLeft && !isBottom ? { pt: '$7' } : {}),\n }}\n >\n {tokens.map((line, i) => (\n <div\n key={i}\n {...getLineProps({ line })}\n style={\n wrapText ? { whiteSpace: 'pre-wrap', wordBreak: 'break-all' } : undefined\n }\n >\n {line.map((token, key) => (\n <span key={key} {...getTokenProps({ token })} />\n ))}\n </div>\n ))}\n </Box>\n </Pre>\n {copyButton && (\n <CopyButtonWrapper ref={buttonWrapperRef} position={buttonPosition}>\n {copyButton}\n </CopyButtonWrapper>\n )}\n </Box>\n )}\n </Highlight>\n );\n },\n);\n\nCodeBlock.displayName = 'CodeBlock';\n"],"mappings":";;;;;;;;;;;AAmBA,IAAM,MAAM,OAAO,OAAO;CACxB,GAAG;CACH,cAAc;CACd,UAAU;CACV,QAAQ;CACR,UAAU;CACV,YAAY;CAEZ,UAAU,EACR,UAAU,EACR,MAAM,EAAE,QAAQ,
|
|
1
|
+
{"version":3,"file":"CodeBlock.js","names":[],"sources":["../../../components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import { CheckIcon, CopyIcon } from '@radix-ui/react-icons';\nimport { Highlight, Language, themes } from 'prism-react-renderer';\nimport React, {\n ComponentProps,\n forwardRef,\n useCallback,\n useLayoutEffect,\n useRef,\n useState,\n} from 'react';\n\nimport { CSS, styled } from '../../stitches.config';\nimport { AccessibleIcon } from '../AccessibleIcon';\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { useColorScheme } from '../colorSchemeContext';\nimport type { CodeBlockCopyButtonAlign, CodeBlockLanguage } from './index';\nimport { Prism } from './prism-extend';\n\nconst Pre = styled('pre', {\n m: 0,\n borderRadius: '$2',\n overflow: 'auto',\n border: '1px solid $colors$deepBlue3',\n fontSize: '$2',\n lineHeight: 1.6,\n\n variants: {\n noBorder: {\n true: { border: 'none' },\n },\n },\n});\n\nconst CopyButtonWrapper = styled('div', {\n position: 'absolute',\n zIndex: 1,\n variants: {\n position: {\n top: { top: '$2', right: '$3' },\n topLeft: { top: '$2', left: '$3' },\n bottomRight: { bottom: '$2', right: '$3' },\n bottomLeft: { bottom: '$2', left: '$3' },\n },\n },\n\n defaultVariants: {\n position: 'top',\n },\n});\n\nexport type CodeBlockProps = {\n lang?: CodeBlockLanguage;\n code: string;\n copyable?: boolean;\n copyText?: string;\n copiedText?: string;\n copyButtonAlign?: CodeBlockCopyButtonAlign;\n onCopy?: () => void;\n noBorder?: boolean;\n wrapText?: boolean;\n colorScheme?: 'light' | 'dark';\n maxHeight?: number | string;\n css?: CSS;\n} & Omit<ComponentProps<typeof Pre>, 'css'>;\n\nexport const CodeBlock = forwardRef<HTMLPreElement, CodeBlockProps>(\n (\n {\n lang = 'text',\n code,\n copyable = false,\n copyText,\n copiedText,\n copyButtonAlign = 'top right',\n onCopy,\n noBorder,\n wrapText = false,\n colorScheme,\n maxHeight = 424,\n css,\n style,\n className,\n ...props\n },\n ref,\n ) => {\n const systemScheme = useColorScheme();\n const resolvedScheme = colorScheme ?? systemScheme;\n const prismTheme = resolvedScheme === 'dark' ? themes.nightOwl : themes.nightOwlLight;\n\n const isBottom = copyButtonAlign.includes('bottom');\n const isLeft = copyButtonAlign.includes('left');\n const buttonPosition = isBottom\n ? isLeft\n ? 'bottomLeft'\n : 'bottomRight'\n : isLeft\n ? 'topLeft'\n : 'top';\n\n const [copied, setCopied] = useState(false);\n\n const preRef = useRef<HTMLPreElement | null>(\n null,\n ) as React.MutableRefObject<HTMLPreElement | null>;\n const buttonWrapperRef = useRef<HTMLDivElement>(null);\n\n const setPreRef = useCallback(\n (node: HTMLPreElement | null) => {\n preRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) (ref as React.MutableRefObject<HTMLPreElement | null>).current = node;\n },\n [ref],\n );\n\n useLayoutEffect(() => {\n if (!copyable) return;\n const pre = preRef.current;\n const wrapper = buttonWrapperRef.current;\n if (!pre || !wrapper) return;\n\n const isBottomAlign = isBottom;\n const borderH = noBorder ? 0 : 2;\n\n const update = () => {\n if (!isLeft) {\n const vScrollbar = Math.max(0, pre.offsetWidth - pre.clientWidth - borderH);\n wrapper.style.right = `${16 + vScrollbar}px`;\n }\n if (isBottomAlign) {\n const hScrollbar = Math.max(0, pre.offsetHeight - pre.clientHeight - borderH);\n wrapper.style.bottom = `${8 + hScrollbar}px`;\n }\n };\n\n update();\n const observer = new ResizeObserver(update);\n observer.observe(pre);\n return () => observer.disconnect();\n }, [copyable, isBottom, isLeft, noBorder]);\n\n const handleCopy = async () => {\n try {\n await navigator.clipboard.writeText(code);\n setCopied(true);\n onCopy?.();\n setTimeout(() => setCopied(false), 1500);\n } catch {\n // clipboard write failed (e.g. permission denied) — leave UI unchanged\n }\n };\n\n const copyButton = copyable ? (\n <Button\n variant=\"secondary\"\n ghost\n size=\"small\"\n type=\"button\"\n onClick={handleCopy}\n css={{\n color: '$hiContrast',\n gap: '$1',\n backgroundColor: '$codeBlockCopyButtonBg',\n height: '32px',\n }}\n >\n <AccessibleIcon label={copied ? 'Copied' : 'Copy'}>\n {copied ? <CheckIcon /> : <CopyIcon />}\n </AccessibleIcon>\n {copied ? copiedText : copyText}\n </Button>\n ) : null;\n\n return (\n <Highlight\n theme={prismTheme}\n code={code}\n language={(Prism.languages[lang] != null ? lang : 'text') as Language}\n >\n {({\n className: highlightClass,\n style: highlightStyle,\n tokens,\n getLineProps,\n getTokenProps,\n }) => (\n <Box css={{ position: 'relative', ...css }}>\n <Pre\n ref={setPreRef}\n className={[highlightClass, className].filter(Boolean).join(' ')}\n style={{ maxHeight, ...highlightStyle, backgroundColor: 'inherit', ...style }}\n noBorder={noBorder}\n {...props}\n >\n <Box\n css={{\n p: '$4',\n ...(copyable && isLeft && isBottom ? { pb: '$7' } : {}),\n ...(copyable && isLeft && !isBottom ? { pt: '$7' } : {}),\n }}\n >\n {tokens.map((line, i) => (\n <div\n key={i}\n {...getLineProps({ line })}\n style={\n wrapText ? { whiteSpace: 'pre-wrap', wordBreak: 'break-all' } : undefined\n }\n >\n {line.map((token, key) => (\n <span key={key} {...getTokenProps({ token })} />\n ))}\n </div>\n ))}\n </Box>\n </Pre>\n {copyButton && (\n <CopyButtonWrapper ref={buttonWrapperRef} position={buttonPosition}>\n {copyButton}\n </CopyButtonWrapper>\n )}\n </Box>\n )}\n </Highlight>\n );\n },\n);\n\nCodeBlock.displayName = 'CodeBlock';\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeBlock.themes.cjs","names":[],"sources":["../../../components/CodeBlock/CodeBlock.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nexport namespace Theme {\n type Colors = {\n codeBlockCopyButtonBg: Property.Color;\n };\n\n export function getLight(): Colors {\n return {\n codeBlockCopyButtonBg: 'transparent',\n };\n }\n\n export function getDark(): Colors {\n return {\n codeBlockCopyButtonBg: 'transparent',\n };\n }\n}\n"],"mappings":";AAEO,IAAA;;CAKE,SAAS,WAAmB;EACjC,OAAO,EACL,uBAAuB,
|
|
1
|
+
{"version":3,"file":"CodeBlock.themes.cjs","names":[],"sources":["../../../components/CodeBlock/CodeBlock.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nexport namespace Theme {\n type Colors = {\n codeBlockCopyButtonBg: Property.Color;\n };\n\n export function getLight(): Colors {\n return {\n codeBlockCopyButtonBg: 'transparent',\n };\n }\n\n export function getDark(): Colors {\n return {\n codeBlockCopyButtonBg: 'transparent',\n };\n }\n}\n"],"mappings":";AAEO,IAAA;;CAKE,SAAS,WAAmB;EACjC,OAAO,EACL,uBAAuB,eACxB;;;CAGI,SAAS,UAAkB;EAChC,OAAO,EACL,uBAAuB,eACxB;;;yBAEJ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeBlock.themes.js","names":[],"sources":["../../../components/CodeBlock/CodeBlock.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nexport namespace Theme {\n type Colors = {\n codeBlockCopyButtonBg: Property.Color;\n };\n\n export function getLight(): Colors {\n return {\n codeBlockCopyButtonBg: 'transparent',\n };\n }\n\n export function getDark(): Colors {\n return {\n codeBlockCopyButtonBg: 'transparent',\n };\n }\n}\n"],"mappings":";AAEO,IAAA;;CAKE,SAAS,WAAmB;EACjC,OAAO,EACL,uBAAuB,
|
|
1
|
+
{"version":3,"file":"CodeBlock.themes.js","names":[],"sources":["../../../components/CodeBlock/CodeBlock.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nexport namespace Theme {\n type Colors = {\n codeBlockCopyButtonBg: Property.Color;\n };\n\n export function getLight(): Colors {\n return {\n codeBlockCopyButtonBg: 'transparent',\n };\n }\n\n export function getDark(): Colors {\n return {\n codeBlockCopyButtonBg: 'transparent',\n };\n }\n}\n"],"mappings":";AAEO,IAAA;;CAKE,SAAS,WAAmB;EACjC,OAAO,EACL,uBAAuB,eACxB;;;CAGI,SAAS,UAAkB;EAChC,OAAO,EACL,uBAAuB,eACxB;;;yBAEJ"}
|