@traefik-labs/faency 12.0.9 → 12.0.11
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/components/Blockquote/Blockquote.vanilla.css.cjs +1 -0
- package/dist/components/Blockquote/Blockquote.vanilla.css.cjs.map +1 -1
- package/dist/components/Blockquote/Blockquote.vanilla.css.js +1 -0
- package/dist/components/Blockquote/Blockquote.vanilla.css.js.map +1 -1
- package/dist/components/Button/Button.cjs +4 -4
- package/dist/components/Button/Button.cjs.map +1 -1
- package/dist/components/Button/Button.js +4 -4
- package/dist/components/Button/Button.js.map +1 -1
- package/dist/components/Card/Card.vanilla.css.cjs +1 -0
- package/dist/components/Card/Card.vanilla.css.cjs.map +1 -1
- package/dist/components/Card/Card.vanilla.css.js +1 -0
- package/dist/components/Card/Card.vanilla.css.js.map +1 -1
- package/dist/components/DateTimePickerInput/DateTimePickerInput.cjs +11 -8
- package/dist/components/DateTimePickerInput/DateTimePickerInput.cjs.map +1 -1
- package/dist/components/DateTimePickerInput/DateTimePickerInput.js +13 -10
- package/dist/components/DateTimePickerInput/DateTimePickerInput.js.map +1 -1
- package/dist/components/Input/Input.vanilla.css.cjs +0 -1
- package/dist/components/Input/Input.vanilla.css.cjs.map +1 -1
- package/dist/components/Input/Input.vanilla.css.js +0 -1
- package/dist/components/Input/Input.vanilla.css.js.map +1 -1
- package/dist/components/Label/Label.vanilla.css.cjs +0 -1
- package/dist/components/Label/Label.vanilla.css.cjs.map +1 -1
- package/dist/components/Label/Label.vanilla.css.js +0 -1
- package/dist/components/Label/Label.vanilla.css.js.map +1 -1
- package/package.json +28 -2
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
;/* empty css */
|
|
3
4
|
;/* empty css */
|
|
4
5
|
const createRuntimeFn62c9670f_esm = require("../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.cjs");
|
|
5
6
|
var blockquoteRecipe = createRuntimeFn62c9670f_esm.c({ defaultClassName: "kyxdzh1 kyxdzh0", variantClassNames: { size: { "0": "kyxdzh2", "1": "kyxdzh3", "2": "kyxdzh4", "3": "kyxdzh5", "4": "kyxdzh6", "5": "kyxdzh7", "6": "kyxdzh8", "7": "kyxdzh9", "8": "kyxdzha", "9": "kyxdzhb", "10": "kyxdzhc", "11": "kyxdzhd", "12": "kyxdzhe", inherit: "kyxdzhf" }, weight: { light: "kyxdzhg", regular: "kyxdzhh", medium: "kyxdzhi", semiBold: "kyxdzhj", bold: "kyxdzhk" }, variant: { red: "kyxdzhl", subtle: "kyxdzhm", "default": "kyxdzhn", contrast: "kyxdzho", inherit: "kyxdzhp", invalid: "kyxdzhq" }, gradient: { true: "kyxdzhr" }, transform: { uppercase: "kyxdzhs", capitalize: "kyxdzht", capitalizeWords: "kyxdzhu" }, noWrap: { true: "kyxdzhv" } }, defaultVariants: { size: "3", variant: "default" }, compoundVariants: [] });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Blockquote.vanilla.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Blockquote.vanilla.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/* empty css */
|
|
1
2
|
/* empty css */
|
|
2
3
|
import { c as createRuntimeFn } from "../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";
|
|
3
4
|
var blockquoteRecipe = createRuntimeFn({ defaultClassName: "kyxdzh1 kyxdzh0", variantClassNames: { size: { "0": "kyxdzh2", "1": "kyxdzh3", "2": "kyxdzh4", "3": "kyxdzh5", "4": "kyxdzh6", "5": "kyxdzh7", "6": "kyxdzh8", "7": "kyxdzh9", "8": "kyxdzha", "9": "kyxdzhb", "10": "kyxdzhc", "11": "kyxdzhd", "12": "kyxdzhe", inherit: "kyxdzhf" }, weight: { light: "kyxdzhg", regular: "kyxdzhh", medium: "kyxdzhi", semiBold: "kyxdzhj", bold: "kyxdzhk" }, variant: { red: "kyxdzhl", subtle: "kyxdzhm", "default": "kyxdzhn", contrast: "kyxdzho", inherit: "kyxdzhp", invalid: "kyxdzhq" }, gradient: { true: "kyxdzhr" }, transform: { uppercase: "kyxdzhs", capitalize: "kyxdzht", capitalizeWords: "kyxdzhu" }, noWrap: { true: "kyxdzhv" } }, defaultVariants: { size: "3", variant: "default" }, compoundVariants: [] });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Blockquote.vanilla.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Blockquote.vanilla.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -115,7 +115,7 @@ const StyledButton = stitches_config.styled("button", BUTTON_BASE_STYLES, {
|
|
|
115
115
|
},
|
|
116
116
|
variant: {
|
|
117
117
|
primary: {
|
|
118
|
-
bc: "$
|
|
118
|
+
bc: "$buttonPrimaryBg",
|
|
119
119
|
c: "$buttonPrimaryText",
|
|
120
120
|
"&:focus-visible": {
|
|
121
121
|
boxShadow: "inset 0 0 0 2px $colors$buttonPrimaryFocusBorder"
|
|
@@ -123,7 +123,7 @@ const StyledButton = stitches_config.styled("button", BUTTON_BASE_STYLES, {
|
|
|
123
123
|
"@hover": {
|
|
124
124
|
"&:hover": {
|
|
125
125
|
"&::after": {
|
|
126
|
-
backgroundColor: "$
|
|
126
|
+
backgroundColor: "$buttonPrimaryBg"
|
|
127
127
|
}
|
|
128
128
|
}
|
|
129
129
|
}
|
|
@@ -141,7 +141,7 @@ const StyledButton = stitches_config.styled("button", BUTTON_BASE_STYLES, {
|
|
|
141
141
|
"@hover": {
|
|
142
142
|
"&:hover": {
|
|
143
143
|
"&::after": {
|
|
144
|
-
backgroundColor: "$
|
|
144
|
+
backgroundColor: "$buttonPrimaryBg"
|
|
145
145
|
}
|
|
146
146
|
}
|
|
147
147
|
}
|
|
@@ -196,7 +196,7 @@ const StyledButton = stitches_config.styled("button", BUTTON_BASE_STYLES, {
|
|
|
196
196
|
variant: "primary",
|
|
197
197
|
ghost: "true",
|
|
198
198
|
css: {
|
|
199
|
-
color: "$
|
|
199
|
+
color: "$buttonPrimaryBg",
|
|
200
200
|
backgroundColor: "transparent",
|
|
201
201
|
"@hover": {
|
|
202
202
|
"&:hover": {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.cjs","sources":["../../../components/Button/Button.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport React, { ComponentProps, useMemo } from 'react';\n\nimport { CSS, keyframes, styled, VariantProps } from '../../stitches.config';\nimport { modifyVariantsForStory } from '../../utils/modifyVariantsForStory';\n\nexport const BUTTON_BASE_STYLES = {\n appearance: 'none',\n userSelect: 'none',\n boxSizing: 'border-box',\n border: 'none',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n '&:disabled': {\n pointerEvents: 'none',\n opacity: 0.5,\n },\n};\n\nconst BG_SIZES = {\n small: '$sizes$8',\n medium: '$sizes$9',\n large: '$sizes$10',\n};\n\nconst backgroundSizeAnimation = (size: keyof typeof BG_SIZES) => ({\n $$bgSize: BG_SIZES[size],\n backgroundSize: '$$bgSize',\n backgroundImage: `linear-gradient(\n -45deg,\n transparent 33%,\n $colors$deepBlue4 33%,\n $colors$deepBlue4 66%,\n transparent 66%\n )`,\n animation: `${keyframes({\n '100%': { transform: 'translateX($$bgSize)' },\n })} 500ms linear infinite`,\n});\n\nexport const StyledButton = styled('button', BUTTON_BASE_STYLES, {\n // Reset\n all: 'unset',\n alignItems: 'center',\n overflow: 'hidden',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n\n // Custom reset?\n display: 'inline-flex',\n flexShrink: 0,\n justifyContent: 'center',\n lineHeight: '1',\n\n // Custom\n position: 'relative',\n height: '$5',\n px: '$2',\n fontFamily: '$rubik',\n fontSize: '$3',\n fontWeight: '$medium',\n fontVariantNumeric: 'tabular-nums',\n\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px $colors$focusOutline`,\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 '&:active': {\n '&::before': {\n backgroundColor: 'rgba(0, 0, 0, 0.15)',\n },\n },\n\n variants: {\n size: {\n small: {\n borderRadius: '$3',\n height: '$5',\n px: '$2',\n fontSize: '$1',\n lineHeight: '$sizes$5',\n },\n medium: {\n borderRadius: '$3',\n height: '$6',\n px: '$3',\n fontSize: '$3',\n lineHeight: '$sizes$6',\n },\n large: {\n borderRadius: '$3',\n height: '$7',\n px: '$3',\n fontSize: '$3',\n lineHeight: '$sizes$7',\n },\n },\n variant: {\n primary: {\n bc: '$primary',\n c: '$buttonPrimaryText',\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonPrimaryFocusBorder',\n },\n '@hover': {\n '&:hover': {\n '&::after': {\n backgroundColor: '$primary',\n },\n },\n },\n },\n secondary: {\n bc: '$buttonSecondaryBg',\n c: '$buttonSecondaryText',\n boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryBorder',\n '&:active': {\n boxShadow: 'inset 0 0 0 1px $colors$buttonSecondaryBorder',\n },\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryFocusBorder',\n },\n '@hover': {\n '&:hover': {\n '&::after': {\n backgroundColor: '$primary',\n },\n },\n },\n },\n red: {\n backgroundColor: '$buttonRedBg',\n color: '$buttonRedText',\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonRedFocusBg',\n },\n },\n },\n state: {\n active: {\n bc: '$deepBlue5',\n c: '$deepBlue11',\n '&:active': {\n backgroundColor: '$deepBlue5',\n },\n },\n waiting: {\n bc: '$deepBlue3',\n boxShadow: `inset 0 0 0 1px $deepBlue4`,\n c: 'transparent',\n overflow: 'hidden',\n pointerEvents: 'none',\n '&::after': {\n left: '-100%',\n width: '200%',\n ...backgroundSizeAnimation('medium'),\n },\n },\n },\n ghost: {\n true: {\n boxShadow: 'none',\n '@hover': {\n '&:hover': {\n boxShadow: 'none',\n },\n },\n },\n },\n rounded: {\n true: {\n borderRadius: '$pill',\n },\n },\n },\n compoundVariants: [\n {\n variant: 'primary',\n ghost: 'true',\n css: {\n color: '$primary',\n backgroundColor: 'transparent',\n '@hover': {\n '&:hover': {\n color: '$buttonPrimaryGhostHoverText',\n backgroundColor: 'transparent',\n },\n },\n },\n },\n {\n variant: 'primary',\n state: 'active',\n css: {\n backgroundColor: '$buttonPrimaryFocusBg',\n color: '$buttonPrimaryText',\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n {\n variant: 'secondary',\n state: 'waiting',\n css: {\n backgroundColor: '$deepBlue3',\n color: 'transparent',\n },\n },\n {\n variant: 'secondary',\n ghost: true,\n css: {\n backgroundColor: 'transparent',\n color: '$buttonSecondaryText',\n },\n },\n {\n variant: 'red',\n state: 'waiting',\n css: {\n backgroundColor: '$deepBlue3',\n color: 'transparent',\n },\n },\n {\n variant: 'red',\n state: 'active',\n css: {\n backgroundColor: '$buttonRedFocusBg',\n color: '$buttonRedText',\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n {\n variant: 'red',\n ghost: 'true',\n css: {\n color: '$buttonRedBg',\n backgroundColor: 'transparent',\n '@hover': {\n '&:hover': {\n color: '$buttonRedHoverText',\n backgroundColor: 'transparent',\n },\n },\n },\n },\n {\n size: 'small',\n state: 'waiting',\n css: {\n '&::after': backgroundSizeAnimation('small'),\n },\n },\n {\n size: 'large',\n state: 'waiting',\n css: {\n '&::after': backgroundSizeAnimation('large'),\n },\n },\n ],\n defaultVariants: {\n size: 'medium',\n variant: 'primary',\n },\n});\nconst StyledButtonSlot = styled(Slot, StyledButton);\n\nexport interface ButtonVariants extends VariantProps<typeof StyledButton> {}\nexport type ButtonProps = ComponentProps<typeof StyledButton> &\n ButtonVariants & {\n css?: CSS;\n asChild?: boolean;\n as?: string;\n };\n\nexport const Button = React.forwardRef<React.ElementRef<typeof StyledButton>, ButtonProps>(\n ({ children, asChild, ...props }, forwardedRef) => {\n const Component = useMemo(() => (asChild ? StyledButtonSlot : StyledButton), [asChild]);\n return (\n <Component ref={forwardedRef} {...props}>\n {children}\n </Component>\n );\n },\n);\n\nconst BaseButton = (props: ButtonProps): JSX.Element => <Button {...props} />;\nexport const ButtonForStory = modifyVariantsForStory<ButtonVariants, ButtonProps>(BaseButton);\n"],"names":["keyframes","styled","Slot","useMemo"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Button.cjs","sources":["../../../components/Button/Button.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport React, { ComponentProps, useMemo } from 'react';\n\nimport { CSS, keyframes, styled, VariantProps } from '../../stitches.config';\nimport { modifyVariantsForStory } from '../../utils/modifyVariantsForStory';\n\nexport const BUTTON_BASE_STYLES = {\n appearance: 'none',\n userSelect: 'none',\n boxSizing: 'border-box',\n border: 'none',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n '&:disabled': {\n pointerEvents: 'none',\n opacity: 0.5,\n },\n};\n\nconst BG_SIZES = {\n small: '$sizes$8',\n medium: '$sizes$9',\n large: '$sizes$10',\n};\n\nconst backgroundSizeAnimation = (size: keyof typeof BG_SIZES) => ({\n $$bgSize: BG_SIZES[size],\n backgroundSize: '$$bgSize',\n backgroundImage: `linear-gradient(\n -45deg,\n transparent 33%,\n $colors$deepBlue4 33%,\n $colors$deepBlue4 66%,\n transparent 66%\n )`,\n animation: `${keyframes({\n '100%': { transform: 'translateX($$bgSize)' },\n })} 500ms linear infinite`,\n});\n\nexport const StyledButton = styled('button', BUTTON_BASE_STYLES, {\n // Reset\n all: 'unset',\n alignItems: 'center',\n overflow: 'hidden',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n\n // Custom reset?\n display: 'inline-flex',\n flexShrink: 0,\n justifyContent: 'center',\n lineHeight: '1',\n\n // Custom\n position: 'relative',\n height: '$5',\n px: '$2',\n fontFamily: '$rubik',\n fontSize: '$3',\n fontWeight: '$medium',\n fontVariantNumeric: 'tabular-nums',\n\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px $colors$focusOutline`,\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 '&:active': {\n '&::before': {\n backgroundColor: 'rgba(0, 0, 0, 0.15)',\n },\n },\n\n variants: {\n size: {\n small: {\n borderRadius: '$3',\n height: '$5',\n px: '$2',\n fontSize: '$1',\n lineHeight: '$sizes$5',\n },\n medium: {\n borderRadius: '$3',\n height: '$6',\n px: '$3',\n fontSize: '$3',\n lineHeight: '$sizes$6',\n },\n large: {\n borderRadius: '$3',\n height: '$7',\n px: '$3',\n fontSize: '$3',\n lineHeight: '$sizes$7',\n },\n },\n variant: {\n primary: {\n bc: '$buttonPrimaryBg',\n c: '$buttonPrimaryText',\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonPrimaryFocusBorder',\n },\n '@hover': {\n '&:hover': {\n '&::after': {\n backgroundColor: '$buttonPrimaryBg',\n },\n },\n },\n },\n secondary: {\n bc: '$buttonSecondaryBg',\n c: '$buttonSecondaryText',\n boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryBorder',\n '&:active': {\n boxShadow: 'inset 0 0 0 1px $colors$buttonSecondaryBorder',\n },\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryFocusBorder',\n },\n '@hover': {\n '&:hover': {\n '&::after': {\n backgroundColor: '$buttonPrimaryBg',\n },\n },\n },\n },\n red: {\n backgroundColor: '$buttonRedBg',\n color: '$buttonRedText',\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonRedFocusBg',\n },\n },\n },\n state: {\n active: {\n bc: '$deepBlue5',\n c: '$deepBlue11',\n '&:active': {\n backgroundColor: '$deepBlue5',\n },\n },\n waiting: {\n bc: '$deepBlue3',\n boxShadow: `inset 0 0 0 1px $deepBlue4`,\n c: 'transparent',\n overflow: 'hidden',\n pointerEvents: 'none',\n '&::after': {\n left: '-100%',\n width: '200%',\n ...backgroundSizeAnimation('medium'),\n },\n },\n },\n ghost: {\n true: {\n boxShadow: 'none',\n '@hover': {\n '&:hover': {\n boxShadow: 'none',\n },\n },\n },\n },\n rounded: {\n true: {\n borderRadius: '$pill',\n },\n },\n },\n compoundVariants: [\n {\n variant: 'primary',\n ghost: 'true',\n css: {\n color: '$buttonPrimaryBg',\n backgroundColor: 'transparent',\n '@hover': {\n '&:hover': {\n color: '$buttonPrimaryGhostHoverText',\n backgroundColor: 'transparent',\n },\n },\n },\n },\n {\n variant: 'primary',\n state: 'active',\n css: {\n backgroundColor: '$buttonPrimaryFocusBg',\n color: '$buttonPrimaryText',\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n {\n variant: 'secondary',\n state: 'waiting',\n css: {\n backgroundColor: '$deepBlue3',\n color: 'transparent',\n },\n },\n {\n variant: 'secondary',\n ghost: true,\n css: {\n backgroundColor: 'transparent',\n color: '$buttonSecondaryText',\n },\n },\n {\n variant: 'red',\n state: 'waiting',\n css: {\n backgroundColor: '$deepBlue3',\n color: 'transparent',\n },\n },\n {\n variant: 'red',\n state: 'active',\n css: {\n backgroundColor: '$buttonRedFocusBg',\n color: '$buttonRedText',\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n {\n variant: 'red',\n ghost: 'true',\n css: {\n color: '$buttonRedBg',\n backgroundColor: 'transparent',\n '@hover': {\n '&:hover': {\n color: '$buttonRedHoverText',\n backgroundColor: 'transparent',\n },\n },\n },\n },\n {\n size: 'small',\n state: 'waiting',\n css: {\n '&::after': backgroundSizeAnimation('small'),\n },\n },\n {\n size: 'large',\n state: 'waiting',\n css: {\n '&::after': backgroundSizeAnimation('large'),\n },\n },\n ],\n defaultVariants: {\n size: 'medium',\n variant: 'primary',\n },\n});\nconst StyledButtonSlot = styled(Slot, StyledButton);\n\nexport interface ButtonVariants extends VariantProps<typeof StyledButton> {}\nexport type ButtonProps = ComponentProps<typeof StyledButton> &\n ButtonVariants & {\n css?: CSS;\n asChild?: boolean;\n as?: string;\n };\n\nexport const Button = React.forwardRef<React.ElementRef<typeof StyledButton>, ButtonProps>(\n ({ children, asChild, ...props }, forwardedRef) => {\n const Component = useMemo(() => (asChild ? StyledButtonSlot : StyledButton), [asChild]);\n return (\n <Component ref={forwardedRef} {...props}>\n {children}\n </Component>\n );\n },\n);\n\nconst BaseButton = (props: ButtonProps): JSX.Element => <Button {...props} />;\nexport const ButtonForStory = modifyVariantsForStory<ButtonVariants, ButtonProps>(BaseButton);\n"],"names":["keyframes","styled","Slot","useMemo"],"mappings":";;;;;;AAMO,MAAM,qBAAqB;AAAA,EAChC,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,yBAAyB;AAAA,EACzB,cAAc;AAAA,IACZ,eAAe;AAAA,IACf,SAAS;AAAA,EAAA;AAEb;AAEA,MAAM,WAAW;AAAA,EACf,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AAEA,MAAM,0BAA0B,CAAC,UAAiC;AAAA,EAChE,UAAU,SAAS,IAAI;AAAA,EACvB,gBAAgB;AAAA,EAChB,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOjB,WAAW,GAAGA,0BAAU;AAAA,IACtB,QAAQ,EAAE,WAAW,uBAAA;AAAA,EAAuB,CAC7C,CAAC;AACJ;AAEO,MAAM,eAAeC,gBAAAA,OAAO,UAAU,oBAAoB;AAAA;AAAA,EAE/D,KAAK;AAAA,EACL,YAAY;AAAA,EACZ,UAAU;AAAA,EAEV,aAAa;AAAA,IACX,WAAW;AAAA,IACX,SAAS;AAAA,IACT,UAAU;AAAA,IACV,OAAO;AAAA,EAAA;AAAA,EAET,YAAY;AAAA,IACV,WAAW;AAAA,IACX,SAAS;AAAA,IACT,UAAU;AAAA,IACV,OAAO;AAAA,EAAA;AAAA;AAAA,EAIT,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,YAAY;AAAA;AAAA,EAGZ,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,IAAI;AAAA,EACJ,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,oBAAoB;AAAA,EAEpB,mBAAmB;AAAA,IACjB,WAAW;AAAA,IACX,aAAa;AAAA,MACX,iBAAiB;AAAA,IAAA;AAAA,IAEnB,YAAY;AAAA,MACV,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAGF,UAAU;AAAA,IACR,WAAW;AAAA,MACT,QAAQ;AAAA,MACR,aAAa;AAAA,QACX,iBAAiB;AAAA,MAAA;AAAA,MAEnB,YAAY;AAAA,QACV,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAAA,EAGF,YAAY;AAAA,IACV,aAAa;AAAA,MACX,iBAAiB;AAAA,IAAA;AAAA,EACnB;AAAA,EAGF,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,OAAO;AAAA,QACL,cAAc;AAAA,QACd,QAAQ;AAAA,QACR,IAAI;AAAA,QACJ,UAAU;AAAA,QACV,YAAY;AAAA,MAAA;AAAA,MAEd,QAAQ;AAAA,QACN,cAAc;AAAA,QACd,QAAQ;AAAA,QACR,IAAI;AAAA,QACJ,UAAU;AAAA,QACV,YAAY;AAAA,MAAA;AAAA,MAEd,OAAO;AAAA,QACL,cAAc;AAAA,QACd,QAAQ;AAAA,QACR,IAAI;AAAA,QACJ,UAAU;AAAA,QACV,YAAY;AAAA,MAAA;AAAA,IACd;AAAA,IAEF,SAAS;AAAA,MACP,SAAS;AAAA,QACP,IAAI;AAAA,QACJ,GAAG;AAAA,QACH,mBAAmB;AAAA,UACjB,WAAW;AAAA,QAAA;AAAA,QAEb,UAAU;AAAA,UACR,WAAW;AAAA,YACT,YAAY;AAAA,cACV,iBAAiB;AAAA,YAAA;AAAA,UACnB;AAAA,QACF;AAAA,MACF;AAAA,MAEF,WAAW;AAAA,QACT,IAAI;AAAA,QACJ,GAAG;AAAA,QACH,WAAW;AAAA,QACX,YAAY;AAAA,UACV,WAAW;AAAA,QAAA;AAAA,QAEb,mBAAmB;AAAA,UACjB,WAAW;AAAA,QAAA;AAAA,QAEb,UAAU;AAAA,UACR,WAAW;AAAA,YACT,YAAY;AAAA,cACV,iBAAiB;AAAA,YAAA;AAAA,UACnB;AAAA,QACF;AAAA,MACF;AAAA,MAEF,KAAK;AAAA,QACH,iBAAiB;AAAA,QACjB,OAAO;AAAA,QACP,mBAAmB;AAAA,UACjB,WAAW;AAAA,QAAA;AAAA,MACb;AAAA,IACF;AAAA,IAEF,OAAO;AAAA,MACL,QAAQ;AAAA,QACN,IAAI;AAAA,QACJ,GAAG;AAAA,QACH,YAAY;AAAA,UACV,iBAAiB;AAAA,QAAA;AAAA,MACnB;AAAA,MAEF,SAAS;AAAA,QACP,IAAI;AAAA,QACJ,WAAW;AAAA,QACX,GAAG;AAAA,QACH,UAAU;AAAA,QACV,eAAe;AAAA,QACf,YAAY;AAAA,UACV,MAAM;AAAA,UACN,OAAO;AAAA,UACP,GAAG,wBAAwB,QAAQ;AAAA,QAAA;AAAA,MACrC;AAAA,IACF;AAAA,IAEF,OAAO;AAAA,MACL,MAAM;AAAA,QACJ,WAAW;AAAA,QACX,UAAU;AAAA,UACR,WAAW;AAAA,YACT,WAAW;AAAA,UAAA;AAAA,QACb;AAAA,MACF;AAAA,IACF;AAAA,IAEF,SAAS;AAAA,MACP,MAAM;AAAA,QACJ,cAAc;AAAA,MAAA;AAAA,IAChB;AAAA,EACF;AAAA,EAEF,kBAAkB;AAAA,IAChB;AAAA,MACE,SAAS;AAAA,MACT,OAAO;AAAA,MACP,KAAK;AAAA,QACH,OAAO;AAAA,QACP,iBAAiB;AAAA,QACjB,UAAU;AAAA,UACR,WAAW;AAAA,YACT,OAAO;AAAA,YACP,iBAAiB;AAAA,UAAA;AAAA,QACnB;AAAA,MACF;AAAA,IACF;AAAA,IAEF;AAAA,MACE,SAAS;AAAA,MACT,OAAO;AAAA,MACP,KAAK;AAAA,QACH,iBAAiB;AAAA,QACjB,OAAO;AAAA,QACP,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,IAEF;AAAA,MACE,SAAS;AAAA,MACT,OAAO;AAAA,MACP,KAAK;AAAA,QACH,iBAAiB;AAAA,QACjB,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF;AAAA,MACE,SAAS;AAAA,MACT,OAAO;AAAA,MACP,KAAK;AAAA,QACH,iBAAiB;AAAA,QACjB,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF;AAAA,MACE,SAAS;AAAA,MACT,OAAO;AAAA,MACP,KAAK;AAAA,QACH,iBAAiB;AAAA,QACjB,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF;AAAA,MACE,SAAS;AAAA,MACT,OAAO;AAAA,MACP,KAAK;AAAA,QACH,iBAAiB;AAAA,QACjB,OAAO;AAAA,QACP,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,IAEF;AAAA,MACE,SAAS;AAAA,MACT,OAAO;AAAA,MACP,KAAK;AAAA,QACH,OAAO;AAAA,QACP,iBAAiB;AAAA,QACjB,UAAU;AAAA,UACR,WAAW;AAAA,YACT,OAAO;AAAA,YACP,iBAAiB;AAAA,UAAA;AAAA,QACnB;AAAA,MACF;AAAA,IACF;AAAA,IAEF;AAAA,MACE,MAAM;AAAA,MACN,OAAO;AAAA,MACP,KAAK;AAAA,QACH,YAAY,wBAAwB,OAAO;AAAA,MAAA;AAAA,IAC7C;AAAA,IAEF;AAAA,MACE,MAAM;AAAA,MACN,OAAO;AAAA,MACP,KAAK;AAAA,QACH,YAAY,wBAAwB,OAAO;AAAA,MAAA;AAAA,IAC7C;AAAA,EACF;AAAA,EAEF,iBAAiB;AAAA,IACf,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAEb,CAAC;AACD,MAAM,mBAAmBA,gBAAAA,OAAOC,UAAAA,MAAM,YAAY;AAU3C,MAAM,SAAS,MAAM;AAAA,EAC1B,CAAC,EAAE,UAAU,SAAS,GAAG,MAAA,GAAS,iBAAiB;AACjD,UAAM,YAAYC,MAAAA,QAAQ,MAAO,UAAU,mBAAmB,cAAe,CAAC,OAAO,CAAC;AACtF,0CACG,WAAA,EAAU,KAAK,cAAe,GAAG,OAC/B,UACH;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -113,7 +113,7 @@ const StyledButton = styled("button", BUTTON_BASE_STYLES, {
|
|
|
113
113
|
},
|
|
114
114
|
variant: {
|
|
115
115
|
primary: {
|
|
116
|
-
bc: "$
|
|
116
|
+
bc: "$buttonPrimaryBg",
|
|
117
117
|
c: "$buttonPrimaryText",
|
|
118
118
|
"&:focus-visible": {
|
|
119
119
|
boxShadow: "inset 0 0 0 2px $colors$buttonPrimaryFocusBorder"
|
|
@@ -121,7 +121,7 @@ const StyledButton = styled("button", BUTTON_BASE_STYLES, {
|
|
|
121
121
|
"@hover": {
|
|
122
122
|
"&:hover": {
|
|
123
123
|
"&::after": {
|
|
124
|
-
backgroundColor: "$
|
|
124
|
+
backgroundColor: "$buttonPrimaryBg"
|
|
125
125
|
}
|
|
126
126
|
}
|
|
127
127
|
}
|
|
@@ -139,7 +139,7 @@ const StyledButton = styled("button", BUTTON_BASE_STYLES, {
|
|
|
139
139
|
"@hover": {
|
|
140
140
|
"&:hover": {
|
|
141
141
|
"&::after": {
|
|
142
|
-
backgroundColor: "$
|
|
142
|
+
backgroundColor: "$buttonPrimaryBg"
|
|
143
143
|
}
|
|
144
144
|
}
|
|
145
145
|
}
|
|
@@ -194,7 +194,7 @@ const StyledButton = styled("button", BUTTON_BASE_STYLES, {
|
|
|
194
194
|
variant: "primary",
|
|
195
195
|
ghost: "true",
|
|
196
196
|
css: {
|
|
197
|
-
color: "$
|
|
197
|
+
color: "$buttonPrimaryBg",
|
|
198
198
|
backgroundColor: "transparent",
|
|
199
199
|
"@hover": {
|
|
200
200
|
"&:hover": {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sources":["../../../components/Button/Button.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport React, { ComponentProps, useMemo } from 'react';\n\nimport { CSS, keyframes, styled, VariantProps } from '../../stitches.config';\nimport { modifyVariantsForStory } from '../../utils/modifyVariantsForStory';\n\nexport const BUTTON_BASE_STYLES = {\n appearance: 'none',\n userSelect: 'none',\n boxSizing: 'border-box',\n border: 'none',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n '&:disabled': {\n pointerEvents: 'none',\n opacity: 0.5,\n },\n};\n\nconst BG_SIZES = {\n small: '$sizes$8',\n medium: '$sizes$9',\n large: '$sizes$10',\n};\n\nconst backgroundSizeAnimation = (size: keyof typeof BG_SIZES) => ({\n $$bgSize: BG_SIZES[size],\n backgroundSize: '$$bgSize',\n backgroundImage: `linear-gradient(\n -45deg,\n transparent 33%,\n $colors$deepBlue4 33%,\n $colors$deepBlue4 66%,\n transparent 66%\n )`,\n animation: `${keyframes({\n '100%': { transform: 'translateX($$bgSize)' },\n })} 500ms linear infinite`,\n});\n\nexport const StyledButton = styled('button', BUTTON_BASE_STYLES, {\n // Reset\n all: 'unset',\n alignItems: 'center',\n overflow: 'hidden',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n\n // Custom reset?\n display: 'inline-flex',\n flexShrink: 0,\n justifyContent: 'center',\n lineHeight: '1',\n\n // Custom\n position: 'relative',\n height: '$5',\n px: '$2',\n fontFamily: '$rubik',\n fontSize: '$3',\n fontWeight: '$medium',\n fontVariantNumeric: 'tabular-nums',\n\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px $colors$focusOutline`,\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 '&:active': {\n '&::before': {\n backgroundColor: 'rgba(0, 0, 0, 0.15)',\n },\n },\n\n variants: {\n size: {\n small: {\n borderRadius: '$3',\n height: '$5',\n px: '$2',\n fontSize: '$1',\n lineHeight: '$sizes$5',\n },\n medium: {\n borderRadius: '$3',\n height: '$6',\n px: '$3',\n fontSize: '$3',\n lineHeight: '$sizes$6',\n },\n large: {\n borderRadius: '$3',\n height: '$7',\n px: '$3',\n fontSize: '$3',\n lineHeight: '$sizes$7',\n },\n },\n variant: {\n primary: {\n bc: '$primary',\n c: '$buttonPrimaryText',\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonPrimaryFocusBorder',\n },\n '@hover': {\n '&:hover': {\n '&::after': {\n backgroundColor: '$primary',\n },\n },\n },\n },\n secondary: {\n bc: '$buttonSecondaryBg',\n c: '$buttonSecondaryText',\n boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryBorder',\n '&:active': {\n boxShadow: 'inset 0 0 0 1px $colors$buttonSecondaryBorder',\n },\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryFocusBorder',\n },\n '@hover': {\n '&:hover': {\n '&::after': {\n backgroundColor: '$primary',\n },\n },\n },\n },\n red: {\n backgroundColor: '$buttonRedBg',\n color: '$buttonRedText',\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonRedFocusBg',\n },\n },\n },\n state: {\n active: {\n bc: '$deepBlue5',\n c: '$deepBlue11',\n '&:active': {\n backgroundColor: '$deepBlue5',\n },\n },\n waiting: {\n bc: '$deepBlue3',\n boxShadow: `inset 0 0 0 1px $deepBlue4`,\n c: 'transparent',\n overflow: 'hidden',\n pointerEvents: 'none',\n '&::after': {\n left: '-100%',\n width: '200%',\n ...backgroundSizeAnimation('medium'),\n },\n },\n },\n ghost: {\n true: {\n boxShadow: 'none',\n '@hover': {\n '&:hover': {\n boxShadow: 'none',\n },\n },\n },\n },\n rounded: {\n true: {\n borderRadius: '$pill',\n },\n },\n },\n compoundVariants: [\n {\n variant: 'primary',\n ghost: 'true',\n css: {\n color: '$primary',\n backgroundColor: 'transparent',\n '@hover': {\n '&:hover': {\n color: '$buttonPrimaryGhostHoverText',\n backgroundColor: 'transparent',\n },\n },\n },\n },\n {\n variant: 'primary',\n state: 'active',\n css: {\n backgroundColor: '$buttonPrimaryFocusBg',\n color: '$buttonPrimaryText',\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n {\n variant: 'secondary',\n state: 'waiting',\n css: {\n backgroundColor: '$deepBlue3',\n color: 'transparent',\n },\n },\n {\n variant: 'secondary',\n ghost: true,\n css: {\n backgroundColor: 'transparent',\n color: '$buttonSecondaryText',\n },\n },\n {\n variant: 'red',\n state: 'waiting',\n css: {\n backgroundColor: '$deepBlue3',\n color: 'transparent',\n },\n },\n {\n variant: 'red',\n state: 'active',\n css: {\n backgroundColor: '$buttonRedFocusBg',\n color: '$buttonRedText',\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n {\n variant: 'red',\n ghost: 'true',\n css: {\n color: '$buttonRedBg',\n backgroundColor: 'transparent',\n '@hover': {\n '&:hover': {\n color: '$buttonRedHoverText',\n backgroundColor: 'transparent',\n },\n },\n },\n },\n {\n size: 'small',\n state: 'waiting',\n css: {\n '&::after': backgroundSizeAnimation('small'),\n },\n },\n {\n size: 'large',\n state: 'waiting',\n css: {\n '&::after': backgroundSizeAnimation('large'),\n },\n },\n ],\n defaultVariants: {\n size: 'medium',\n variant: 'primary',\n },\n});\nconst StyledButtonSlot = styled(Slot, StyledButton);\n\nexport interface ButtonVariants extends VariantProps<typeof StyledButton> {}\nexport type ButtonProps = ComponentProps<typeof StyledButton> &\n ButtonVariants & {\n css?: CSS;\n asChild?: boolean;\n as?: string;\n };\n\nexport const Button = React.forwardRef<React.ElementRef<typeof StyledButton>, ButtonProps>(\n ({ children, asChild, ...props }, forwardedRef) => {\n const Component = useMemo(() => (asChild ? StyledButtonSlot : StyledButton), [asChild]);\n return (\n <Component ref={forwardedRef} {...props}>\n {children}\n </Component>\n );\n },\n);\n\nconst BaseButton = (props: ButtonProps): JSX.Element => <Button {...props} />;\nexport const ButtonForStory = modifyVariantsForStory<ButtonVariants, ButtonProps>(BaseButton);\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../../components/Button/Button.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport React, { ComponentProps, useMemo } from 'react';\n\nimport { CSS, keyframes, styled, VariantProps } from '../../stitches.config';\nimport { modifyVariantsForStory } from '../../utils/modifyVariantsForStory';\n\nexport const BUTTON_BASE_STYLES = {\n appearance: 'none',\n userSelect: 'none',\n boxSizing: 'border-box',\n border: 'none',\n WebkitTapHighlightColor: 'rgba(0,0,0,0)',\n '&:disabled': {\n pointerEvents: 'none',\n opacity: 0.5,\n },\n};\n\nconst BG_SIZES = {\n small: '$sizes$8',\n medium: '$sizes$9',\n large: '$sizes$10',\n};\n\nconst backgroundSizeAnimation = (size: keyof typeof BG_SIZES) => ({\n $$bgSize: BG_SIZES[size],\n backgroundSize: '$$bgSize',\n backgroundImage: `linear-gradient(\n -45deg,\n transparent 33%,\n $colors$deepBlue4 33%,\n $colors$deepBlue4 66%,\n transparent 66%\n )`,\n animation: `${keyframes({\n '100%': { transform: 'translateX($$bgSize)' },\n })} 500ms linear infinite`,\n});\n\nexport const StyledButton = styled('button', BUTTON_BASE_STYLES, {\n // Reset\n all: 'unset',\n alignItems: 'center',\n overflow: 'hidden',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n\n // Custom reset?\n display: 'inline-flex',\n flexShrink: 0,\n justifyContent: 'center',\n lineHeight: '1',\n\n // Custom\n position: 'relative',\n height: '$5',\n px: '$2',\n fontFamily: '$rubik',\n fontSize: '$3',\n fontWeight: '$medium',\n fontVariantNumeric: 'tabular-nums',\n\n '&:focus-visible': {\n boxShadow: `inset 0 0 0 2px $colors$focusOutline`,\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 '&:active': {\n '&::before': {\n backgroundColor: 'rgba(0, 0, 0, 0.15)',\n },\n },\n\n variants: {\n size: {\n small: {\n borderRadius: '$3',\n height: '$5',\n px: '$2',\n fontSize: '$1',\n lineHeight: '$sizes$5',\n },\n medium: {\n borderRadius: '$3',\n height: '$6',\n px: '$3',\n fontSize: '$3',\n lineHeight: '$sizes$6',\n },\n large: {\n borderRadius: '$3',\n height: '$7',\n px: '$3',\n fontSize: '$3',\n lineHeight: '$sizes$7',\n },\n },\n variant: {\n primary: {\n bc: '$buttonPrimaryBg',\n c: '$buttonPrimaryText',\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonPrimaryFocusBorder',\n },\n '@hover': {\n '&:hover': {\n '&::after': {\n backgroundColor: '$buttonPrimaryBg',\n },\n },\n },\n },\n secondary: {\n bc: '$buttonSecondaryBg',\n c: '$buttonSecondaryText',\n boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryBorder',\n '&:active': {\n boxShadow: 'inset 0 0 0 1px $colors$buttonSecondaryBorder',\n },\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonSecondaryFocusBorder',\n },\n '@hover': {\n '&:hover': {\n '&::after': {\n backgroundColor: '$buttonPrimaryBg',\n },\n },\n },\n },\n red: {\n backgroundColor: '$buttonRedBg',\n color: '$buttonRedText',\n '&:focus-visible': {\n boxShadow: 'inset 0 0 0 2px $colors$buttonRedFocusBg',\n },\n },\n },\n state: {\n active: {\n bc: '$deepBlue5',\n c: '$deepBlue11',\n '&:active': {\n backgroundColor: '$deepBlue5',\n },\n },\n waiting: {\n bc: '$deepBlue3',\n boxShadow: `inset 0 0 0 1px $deepBlue4`,\n c: 'transparent',\n overflow: 'hidden',\n pointerEvents: 'none',\n '&::after': {\n left: '-100%',\n width: '200%',\n ...backgroundSizeAnimation('medium'),\n },\n },\n },\n ghost: {\n true: {\n boxShadow: 'none',\n '@hover': {\n '&:hover': {\n boxShadow: 'none',\n },\n },\n },\n },\n rounded: {\n true: {\n borderRadius: '$pill',\n },\n },\n },\n compoundVariants: [\n {\n variant: 'primary',\n ghost: 'true',\n css: {\n color: '$buttonPrimaryBg',\n backgroundColor: 'transparent',\n '@hover': {\n '&:hover': {\n color: '$buttonPrimaryGhostHoverText',\n backgroundColor: 'transparent',\n },\n },\n },\n },\n {\n variant: 'primary',\n state: 'active',\n css: {\n backgroundColor: '$buttonPrimaryFocusBg',\n color: '$buttonPrimaryText',\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n {\n variant: 'secondary',\n state: 'waiting',\n css: {\n backgroundColor: '$deepBlue3',\n color: 'transparent',\n },\n },\n {\n variant: 'secondary',\n ghost: true,\n css: {\n backgroundColor: 'transparent',\n color: '$buttonSecondaryText',\n },\n },\n {\n variant: 'red',\n state: 'waiting',\n css: {\n backgroundColor: '$deepBlue3',\n color: 'transparent',\n },\n },\n {\n variant: 'red',\n state: 'active',\n css: {\n backgroundColor: '$buttonRedFocusBg',\n color: '$buttonRedText',\n boxShadow: 'inset 0 0 0 2px white',\n },\n },\n {\n variant: 'red',\n ghost: 'true',\n css: {\n color: '$buttonRedBg',\n backgroundColor: 'transparent',\n '@hover': {\n '&:hover': {\n color: '$buttonRedHoverText',\n backgroundColor: 'transparent',\n },\n },\n },\n },\n {\n size: 'small',\n state: 'waiting',\n css: {\n '&::after': backgroundSizeAnimation('small'),\n },\n },\n {\n size: 'large',\n state: 'waiting',\n css: {\n '&::after': backgroundSizeAnimation('large'),\n },\n },\n ],\n defaultVariants: {\n size: 'medium',\n variant: 'primary',\n },\n});\nconst StyledButtonSlot = styled(Slot, StyledButton);\n\nexport interface ButtonVariants extends VariantProps<typeof StyledButton> {}\nexport type ButtonProps = ComponentProps<typeof StyledButton> &\n ButtonVariants & {\n css?: CSS;\n asChild?: boolean;\n as?: string;\n };\n\nexport const Button = React.forwardRef<React.ElementRef<typeof StyledButton>, ButtonProps>(\n ({ children, asChild, ...props }, forwardedRef) => {\n const Component = useMemo(() => (asChild ? StyledButtonSlot : StyledButton), [asChild]);\n return (\n <Component ref={forwardedRef} {...props}>\n {children}\n </Component>\n );\n },\n);\n\nconst BaseButton = (props: ButtonProps): JSX.Element => <Button {...props} />;\nexport const ButtonForStory = modifyVariantsForStory<ButtonVariants, ButtonProps>(BaseButton);\n"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
;/* empty css */
|
|
3
4
|
;/* empty css */
|
|
4
5
|
const createRuntimeFn62c9670f_esm = require("../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.cjs");
|
|
5
6
|
var cardRecipe = createRuntimeFn62c9670f_esm.c({ defaultClassName: "kc9sar1 kc9sar0", variantClassNames: { elevation: { "0": "kc9sar2", "1": "kc9sar3", "2": "kc9sar4", "3": "kc9sar5", "4": "kc9sar6", "5": "kc9sar7" }, variant: { inner: "kc9sar8", ghost: "kc9sar9" }, active: { true: "kc9sara" } }, defaultVariants: { elevation: 1 }, compoundVariants: [] });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.vanilla.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Card.vanilla.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/* empty css */
|
|
1
2
|
/* empty css */
|
|
2
3
|
import { c as createRuntimeFn } from "../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";
|
|
3
4
|
var cardRecipe = createRuntimeFn({ defaultClassName: "kc9sar1 kc9sar0", variantClassNames: { elevation: { "0": "kc9sar2", "1": "kc9sar3", "2": "kc9sar4", "3": "kc9sar5", "4": "kc9sar6", "5": "kc9sar7" }, variant: { inner: "kc9sar8", ghost: "kc9sar9" }, active: { true: "kc9sara" } }, defaultVariants: { elevation: 1 }, compoundVariants: [] });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.vanilla.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Card.vanilla.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
|
|
@@ -78,18 +78,21 @@ const DateTimePickerInput = React.forwardRef(
|
|
|
78
78
|
const [inputValue, setInputValue] = React.useState("");
|
|
79
79
|
const [selectedDates, onDatesChange] = React.useState([]);
|
|
80
80
|
const [isPickerOpen, setIsPickerOpen] = React.useState(false);
|
|
81
|
-
const
|
|
82
|
-
|
|
83
|
-
onOpenChange: setIsPickerOpen,
|
|
84
|
-
placement: pickerPlacement,
|
|
85
|
-
middleware: [
|
|
81
|
+
const middleware = React.useMemo(
|
|
82
|
+
() => [
|
|
86
83
|
react.offset(10),
|
|
87
84
|
react.flip(),
|
|
88
85
|
react.shift(),
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
})
|
|
86
|
+
// arrowRef is passed to floating-ui which handles it correctly
|
|
87
|
+
react.arrow({ element: arrowRef })
|
|
92
88
|
],
|
|
89
|
+
[]
|
|
90
|
+
);
|
|
91
|
+
const { refs, floatingStyles, context } = react.useFloating({
|
|
92
|
+
open: isPickerOpen,
|
|
93
|
+
onOpenChange: setIsPickerOpen,
|
|
94
|
+
placement: pickerPlacement,
|
|
95
|
+
middleware,
|
|
93
96
|
whileElementsMounted: react.autoUpdate
|
|
94
97
|
});
|
|
95
98
|
const click = react.useClick(context);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateTimePickerInput.cjs","sources":["../../../components/DateTimePickerInput/DateTimePickerInput.tsx"],"sourcesContent":["import {\n arrow,\n autoUpdate,\n flip,\n FloatingArrow,\n FloatingFocusManager,\n offset,\n Placement,\n shift,\n useClick,\n useDismiss,\n useFloating,\n useInteractions,\n useRole,\n} from '@floating-ui/react';\nimport { CalendarIcon } from '@radix-ui/react-icons';\nimport { DPUserConfig } from '@rehookify/datepicker';\nimport { format, parse } from 'date-fns';\nimport React, { MouseEventHandler, Ref, useRef, useState } from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { Card } from '../Card';\nimport { DateTimePicker } from '../DateTimePicker';\nimport { Input, InputHandle } from '../Input';\n\nconst StyledWrapper = styled('div', {\n display: 'flex',\n position: 'relative',\n width: '100%',\n\n '& .firefox-patch': {\n display: 'none',\n },\n\n '@supports (-moz-appearance: none)': {\n '& .firefox-patch': {\n display: 'block',\n width: '20px',\n height: '20px',\n position: 'absolute',\n right: '17px',\n top: '6px',\n background: '$inputBg',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n pointerEvents: 'none',\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n pointerEvents: 'none',\n },\n\n '&:focus-visible': {\n '&::before': {\n backgroundColor: '$inputFocusBg',\n },\n '&::after': {\n backgroundColor: '$primary',\n opacity: 0.15,\n },\n },\n },\n\n '@hover': {\n '&:hover .firefox-patch': {\n '&::before': {\n backgroundColor: '$inputHoverBg',\n },\n '&::after': {\n backgroundColor: '$primary',\n opacity: 0.05,\n },\n },\n },\n },\n});\n\nexport type DateTimePickerInputProps = Omit<DPUserConfig, 'onDatesChange' | 'selectedDates'> & {\n inputCSS?: CSS;\n inputProps?: Omit<typeof Input, 'css' | 'onChange' | 'ref' | 'value'>;\n onChange?: (d: Date[]) => void;\n pickerCSS?: CSS;\n pickerPlacement?: Placement;\n showDatePresets?: boolean;\n showTimePicker?: boolean;\n};\n\nexport type DateTimePickerInputVariants = VariantProps<DateTimePickerInputProps>;\n\nexport const DateTimePickerInput = React.forwardRef<\n React.ElementRef<typeof StyledWrapper>,\n DateTimePickerInputProps\n>(\n (\n {\n inputCSS,\n inputProps,\n onChange,\n pickerCSS,\n pickerPlacement,\n showDatePresets,\n showTimePicker,\n ...pickerProps\n },\n fowardedRef,\n ) => {\n const formatStr = \"yyyy-MM-dd'T'HH:mm\";\n\n const arrowRef = useRef(null);\n\n const [inputValue, setInputValue] = useState<string>('');\n const [selectedDates, onDatesChange] = useState<Date[]>([]);\n const [isPickerOpen, setIsPickerOpen] = useState(false);\n\n const
|
|
1
|
+
{"version":3,"file":"DateTimePickerInput.cjs","sources":["../../../components/DateTimePickerInput/DateTimePickerInput.tsx"],"sourcesContent":["import {\n arrow,\n autoUpdate,\n flip,\n FloatingArrow,\n FloatingFocusManager,\n offset,\n Placement,\n shift,\n useClick,\n useDismiss,\n useFloating,\n useInteractions,\n useRole,\n} from '@floating-ui/react';\nimport { CalendarIcon } from '@radix-ui/react-icons';\nimport { DPUserConfig } from '@rehookify/datepicker';\nimport { format, parse } from 'date-fns';\nimport React, { MouseEventHandler, Ref, useMemo, useRef, useState } from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { Card } from '../Card';\nimport { DateTimePicker } from '../DateTimePicker';\nimport { Input, InputHandle } from '../Input';\n\nconst StyledWrapper = styled('div', {\n display: 'flex',\n position: 'relative',\n width: '100%',\n\n '& .firefox-patch': {\n display: 'none',\n },\n\n '@supports (-moz-appearance: none)': {\n '& .firefox-patch': {\n display: 'block',\n width: '20px',\n height: '20px',\n position: 'absolute',\n right: '17px',\n top: '6px',\n background: '$inputBg',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n pointerEvents: 'none',\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n pointerEvents: 'none',\n },\n\n '&:focus-visible': {\n '&::before': {\n backgroundColor: '$inputFocusBg',\n },\n '&::after': {\n backgroundColor: '$primary',\n opacity: 0.15,\n },\n },\n },\n\n '@hover': {\n '&:hover .firefox-patch': {\n '&::before': {\n backgroundColor: '$inputHoverBg',\n },\n '&::after': {\n backgroundColor: '$primary',\n opacity: 0.05,\n },\n },\n },\n },\n});\n\nexport type DateTimePickerInputProps = Omit<DPUserConfig, 'onDatesChange' | 'selectedDates'> & {\n inputCSS?: CSS;\n inputProps?: Omit<typeof Input, 'css' | 'onChange' | 'ref' | 'value'>;\n onChange?: (d: Date[]) => void;\n pickerCSS?: CSS;\n pickerPlacement?: Placement;\n showDatePresets?: boolean;\n showTimePicker?: boolean;\n};\n\nexport type DateTimePickerInputVariants = VariantProps<DateTimePickerInputProps>;\n\nexport const DateTimePickerInput = React.forwardRef<\n React.ElementRef<typeof StyledWrapper>,\n DateTimePickerInputProps\n>(\n (\n {\n inputCSS,\n inputProps,\n onChange,\n pickerCSS,\n pickerPlacement,\n showDatePresets,\n showTimePicker,\n ...pickerProps\n },\n fowardedRef,\n ) => {\n const formatStr = \"yyyy-MM-dd'T'HH:mm\";\n\n const arrowRef = useRef(null);\n\n const [inputValue, setInputValue] = useState<string>('');\n const [selectedDates, onDatesChange] = useState<Date[]>([]);\n const [isPickerOpen, setIsPickerOpen] = useState(false);\n\n const middleware = useMemo(\n () => [\n offset(10),\n flip(),\n shift(),\n // arrowRef is passed to floating-ui which handles it correctly\n arrow({ element: arrowRef }),\n ],\n [],\n );\n\n const { refs, floatingStyles, context } = useFloating({\n open: isPickerOpen,\n onOpenChange: setIsPickerOpen,\n placement: pickerPlacement,\n middleware,\n whileElementsMounted: autoUpdate,\n });\n\n const click = useClick(context);\n const dismiss = useDismiss(context);\n const role = useRole(context);\n\n const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role]);\n const { onClick: onFirefoxPatchClick } = getReferenceProps();\n\n return (\n <StyledWrapper ref={fowardedRef}>\n <Input\n startAdornment={<CalendarIcon />}\n {...getReferenceProps()}\n {...inputProps}\n css={{ '& input::-webkit-calendar-picker-indicator': { display: 'none' }, ...inputCSS }}\n onChange={(evt) => {\n const value = evt.currentTarget.value;\n setInputValue(value);\n try {\n const newDates = (value as string)\n .split(',')\n .map((d) => parse(d.trim(), formatStr, new Date()));\n onDatesChange(newDates);\n if (onChange) onChange(newDates);\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n } catch (err) {\n // empty\n }\n }}\n ref={refs.setReference as Ref<InputHandle>}\n type=\"datetime-local\"\n value={inputValue}\n />\n <div\n className=\"firefox-patch\"\n onClick={onFirefoxPatchClick as MouseEventHandler<HTMLDivElement>}\n />\n {isPickerOpen && (\n <FloatingFocusManager context={context} initialFocus={-1} modal={false}>\n {/* refs.setFloating is a stable callback ref from floating-ui */}\n <div ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()}>\n <Card>\n <DateTimePicker\n {...pickerProps}\n css={pickerCSS}\n onDatesChange={(d) => {\n onDatesChange(d);\n setInputValue(d.map((date) => format(date, formatStr)).join(', '));\n if (onChange) onChange(d);\n }}\n onFastTravelClick={() => setIsPickerOpen(false)}\n onTimeButtonClick={() => setIsPickerOpen(false)}\n selectedDates={selectedDates}\n showDatePresets={showDatePresets}\n showTimePicker={showTimePicker}\n />\n </Card>\n <FloatingArrow ref={arrowRef} context={context} fill=\"var(--colors-01dp)\" />\n </div>\n </FloatingFocusManager>\n )}\n </StyledWrapper>\n );\n },\n);\n"],"names":["styled","useRef","useState","useMemo","offset","flip","shift","arrow","useFloating","autoUpdate","useClick","useDismiss","useRole","useInteractions","jsxs","jsx","Input","CalendarIcon","parse","FloatingFocusManager","Card","DateTimePicker","format","FloatingArrow"],"mappings":"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"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { offset, flip, shift, arrow, useFloating, autoUpdate, useClick, useDismiss, useRole, useInteractions, FloatingFocusManager, FloatingArrow } from "@floating-ui/react";
|
|
3
3
|
import { CalendarIcon } from "@radix-ui/react-icons";
|
|
4
4
|
import { parse, format } from "date-fns";
|
|
5
|
-
import React, { useRef, useState } from "react";
|
|
5
|
+
import React, { useRef, useState, useMemo } from "react";
|
|
6
6
|
import { styled } from "../../stitches.config.js";
|
|
7
7
|
import { Input } from "../Input/Input.js";
|
|
8
8
|
import { DateTimePicker } from "../DateTimePicker/DateTimePicker.js";
|
|
@@ -76,18 +76,21 @@ const DateTimePickerInput = React.forwardRef(
|
|
|
76
76
|
const [inputValue, setInputValue] = useState("");
|
|
77
77
|
const [selectedDates, onDatesChange] = useState([]);
|
|
78
78
|
const [isPickerOpen, setIsPickerOpen] = useState(false);
|
|
79
|
-
const
|
|
80
|
-
|
|
81
|
-
onOpenChange: setIsPickerOpen,
|
|
82
|
-
placement: pickerPlacement,
|
|
83
|
-
middleware: [
|
|
79
|
+
const middleware = useMemo(
|
|
80
|
+
() => [
|
|
84
81
|
offset(10),
|
|
85
82
|
flip(),
|
|
86
83
|
shift(),
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
})
|
|
84
|
+
// arrowRef is passed to floating-ui which handles it correctly
|
|
85
|
+
arrow({ element: arrowRef })
|
|
90
86
|
],
|
|
87
|
+
[]
|
|
88
|
+
);
|
|
89
|
+
const { refs, floatingStyles, context } = useFloating({
|
|
90
|
+
open: isPickerOpen,
|
|
91
|
+
onOpenChange: setIsPickerOpen,
|
|
92
|
+
placement: pickerPlacement,
|
|
93
|
+
middleware,
|
|
91
94
|
whileElementsMounted: autoUpdate
|
|
92
95
|
});
|
|
93
96
|
const click = useClick(context);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateTimePickerInput.js","sources":["../../../components/DateTimePickerInput/DateTimePickerInput.tsx"],"sourcesContent":["import {\n arrow,\n autoUpdate,\n flip,\n FloatingArrow,\n FloatingFocusManager,\n offset,\n Placement,\n shift,\n useClick,\n useDismiss,\n useFloating,\n useInteractions,\n useRole,\n} from '@floating-ui/react';\nimport { CalendarIcon } from '@radix-ui/react-icons';\nimport { DPUserConfig } from '@rehookify/datepicker';\nimport { format, parse } from 'date-fns';\nimport React, { MouseEventHandler, Ref, useRef, useState } from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { Card } from '../Card';\nimport { DateTimePicker } from '../DateTimePicker';\nimport { Input, InputHandle } from '../Input';\n\nconst StyledWrapper = styled('div', {\n display: 'flex',\n position: 'relative',\n width: '100%',\n\n '& .firefox-patch': {\n display: 'none',\n },\n\n '@supports (-moz-appearance: none)': {\n '& .firefox-patch': {\n display: 'block',\n width: '20px',\n height: '20px',\n position: 'absolute',\n right: '17px',\n top: '6px',\n background: '$inputBg',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n pointerEvents: 'none',\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n pointerEvents: 'none',\n },\n\n '&:focus-visible': {\n '&::before': {\n backgroundColor: '$inputFocusBg',\n },\n '&::after': {\n backgroundColor: '$primary',\n opacity: 0.15,\n },\n },\n },\n\n '@hover': {\n '&:hover .firefox-patch': {\n '&::before': {\n backgroundColor: '$inputHoverBg',\n },\n '&::after': {\n backgroundColor: '$primary',\n opacity: 0.05,\n },\n },\n },\n },\n});\n\nexport type DateTimePickerInputProps = Omit<DPUserConfig, 'onDatesChange' | 'selectedDates'> & {\n inputCSS?: CSS;\n inputProps?: Omit<typeof Input, 'css' | 'onChange' | 'ref' | 'value'>;\n onChange?: (d: Date[]) => void;\n pickerCSS?: CSS;\n pickerPlacement?: Placement;\n showDatePresets?: boolean;\n showTimePicker?: boolean;\n};\n\nexport type DateTimePickerInputVariants = VariantProps<DateTimePickerInputProps>;\n\nexport const DateTimePickerInput = React.forwardRef<\n React.ElementRef<typeof StyledWrapper>,\n DateTimePickerInputProps\n>(\n (\n {\n inputCSS,\n inputProps,\n onChange,\n pickerCSS,\n pickerPlacement,\n showDatePresets,\n showTimePicker,\n ...pickerProps\n },\n fowardedRef,\n ) => {\n const formatStr = \"yyyy-MM-dd'T'HH:mm\";\n\n const arrowRef = useRef(null);\n\n const [inputValue, setInputValue] = useState<string>('');\n const [selectedDates, onDatesChange] = useState<Date[]>([]);\n const [isPickerOpen, setIsPickerOpen] = useState(false);\n\n const
|
|
1
|
+
{"version":3,"file":"DateTimePickerInput.js","sources":["../../../components/DateTimePickerInput/DateTimePickerInput.tsx"],"sourcesContent":["import {\n arrow,\n autoUpdate,\n flip,\n FloatingArrow,\n FloatingFocusManager,\n offset,\n Placement,\n shift,\n useClick,\n useDismiss,\n useFloating,\n useInteractions,\n useRole,\n} from '@floating-ui/react';\nimport { CalendarIcon } from '@radix-ui/react-icons';\nimport { DPUserConfig } from '@rehookify/datepicker';\nimport { format, parse } from 'date-fns';\nimport React, { MouseEventHandler, Ref, useMemo, useRef, useState } from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { Card } from '../Card';\nimport { DateTimePicker } from '../DateTimePicker';\nimport { Input, InputHandle } from '../Input';\n\nconst StyledWrapper = styled('div', {\n display: 'flex',\n position: 'relative',\n width: '100%',\n\n '& .firefox-patch': {\n display: 'none',\n },\n\n '@supports (-moz-appearance: none)': {\n '& .firefox-patch': {\n display: 'block',\n width: '20px',\n height: '20px',\n position: 'absolute',\n right: '17px',\n top: '6px',\n background: '$inputBg',\n\n '&::before': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n pointerEvents: 'none',\n },\n '&::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n pointerEvents: 'none',\n },\n\n '&:focus-visible': {\n '&::before': {\n backgroundColor: '$inputFocusBg',\n },\n '&::after': {\n backgroundColor: '$primary',\n opacity: 0.15,\n },\n },\n },\n\n '@hover': {\n '&:hover .firefox-patch': {\n '&::before': {\n backgroundColor: '$inputHoverBg',\n },\n '&::after': {\n backgroundColor: '$primary',\n opacity: 0.05,\n },\n },\n },\n },\n});\n\nexport type DateTimePickerInputProps = Omit<DPUserConfig, 'onDatesChange' | 'selectedDates'> & {\n inputCSS?: CSS;\n inputProps?: Omit<typeof Input, 'css' | 'onChange' | 'ref' | 'value'>;\n onChange?: (d: Date[]) => void;\n pickerCSS?: CSS;\n pickerPlacement?: Placement;\n showDatePresets?: boolean;\n showTimePicker?: boolean;\n};\n\nexport type DateTimePickerInputVariants = VariantProps<DateTimePickerInputProps>;\n\nexport const DateTimePickerInput = React.forwardRef<\n React.ElementRef<typeof StyledWrapper>,\n DateTimePickerInputProps\n>(\n (\n {\n inputCSS,\n inputProps,\n onChange,\n pickerCSS,\n pickerPlacement,\n showDatePresets,\n showTimePicker,\n ...pickerProps\n },\n fowardedRef,\n ) => {\n const formatStr = \"yyyy-MM-dd'T'HH:mm\";\n\n const arrowRef = useRef(null);\n\n const [inputValue, setInputValue] = useState<string>('');\n const [selectedDates, onDatesChange] = useState<Date[]>([]);\n const [isPickerOpen, setIsPickerOpen] = useState(false);\n\n const middleware = useMemo(\n () => [\n offset(10),\n flip(),\n shift(),\n // arrowRef is passed to floating-ui which handles it correctly\n arrow({ element: arrowRef }),\n ],\n [],\n );\n\n const { refs, floatingStyles, context } = useFloating({\n open: isPickerOpen,\n onOpenChange: setIsPickerOpen,\n placement: pickerPlacement,\n middleware,\n whileElementsMounted: autoUpdate,\n });\n\n const click = useClick(context);\n const dismiss = useDismiss(context);\n const role = useRole(context);\n\n const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role]);\n const { onClick: onFirefoxPatchClick } = getReferenceProps();\n\n return (\n <StyledWrapper ref={fowardedRef}>\n <Input\n startAdornment={<CalendarIcon />}\n {...getReferenceProps()}\n {...inputProps}\n css={{ '& input::-webkit-calendar-picker-indicator': { display: 'none' }, ...inputCSS }}\n onChange={(evt) => {\n const value = evt.currentTarget.value;\n setInputValue(value);\n try {\n const newDates = (value as string)\n .split(',')\n .map((d) => parse(d.trim(), formatStr, new Date()));\n onDatesChange(newDates);\n if (onChange) onChange(newDates);\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n } catch (err) {\n // empty\n }\n }}\n ref={refs.setReference as Ref<InputHandle>}\n type=\"datetime-local\"\n value={inputValue}\n />\n <div\n className=\"firefox-patch\"\n onClick={onFirefoxPatchClick as MouseEventHandler<HTMLDivElement>}\n />\n {isPickerOpen && (\n <FloatingFocusManager context={context} initialFocus={-1} modal={false}>\n {/* refs.setFloating is a stable callback ref from floating-ui */}\n <div ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()}>\n <Card>\n <DateTimePicker\n {...pickerProps}\n css={pickerCSS}\n onDatesChange={(d) => {\n onDatesChange(d);\n setInputValue(d.map((date) => format(date, formatStr)).join(', '));\n if (onChange) onChange(d);\n }}\n onFastTravelClick={() => setIsPickerOpen(false)}\n onTimeButtonClick={() => setIsPickerOpen(false)}\n selectedDates={selectedDates}\n showDatePresets={showDatePresets}\n showTimePicker={showTimePicker}\n />\n </Card>\n <FloatingArrow ref={arrowRef} context={context} fill=\"var(--colors-01dp)\" />\n </div>\n </FloatingFocusManager>\n )}\n </StyledWrapper>\n );\n },\n);\n"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
;/* empty css */
|
|
4
3
|
;/* empty css */
|
|
5
4
|
const createRuntimeFn62c9670f_esm = require("../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.cjs");
|
|
6
5
|
var styledInputRecipe = createRuntimeFn62c9670f_esm.c({ defaultClassName: "_1st6suv1 _1st6suv0", variantClassNames: { size: { small: "_1st6suv2", medium: "_1st6suv3", large: "_1st6suv4" }, variant: { ghost: "_1st6suv5" }, state: { invalid: "_1st6suv6" }, cursor: { "default": "_1st6suv7", text: "_1st6suv8" }, startAdornment: { true: "_1st6suv9" }, endAdornment: { true: "_1st6suva" } }, defaultVariants: { size: "medium", cursor: "default" }, compoundVariants: [[{ variant: "ghost", state: "invalid" }, "_1st6suvb"], [{ startAdornment: true, size: "small" }, "_1st6suvc"], [{ startAdornment: true, size: "medium" }, "_1st6suvd"], [{ startAdornment: true, size: "large" }, "_1st6suve"], [{ endAdornment: true, size: "small" }, "_1st6suvf"], [{ endAdornment: true, size: "medium" }, "_1st6suvg"], [{ endAdornment: true, size: "large" }, "_1st6suvh"], [{ endAdornment: true, size: "small", state: "invalid" }, "_1st6suvi"], [{ endAdornment: true, size: "medium", state: "invalid" }, "_1st6suvj"], [{ endAdornment: true, size: "large", state: "invalid" }, "_1st6suvk"]] });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.vanilla.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Input.vanilla.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/* empty css */
|
|
2
1
|
/* empty css */
|
|
3
2
|
import { c as createRuntimeFn } from "../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";
|
|
4
3
|
var styledInputRecipe = createRuntimeFn({ defaultClassName: "_1st6suv1 _1st6suv0", variantClassNames: { size: { small: "_1st6suv2", medium: "_1st6suv3", large: "_1st6suv4" }, variant: { ghost: "_1st6suv5" }, state: { invalid: "_1st6suv6" }, cursor: { "default": "_1st6suv7", text: "_1st6suv8" }, startAdornment: { true: "_1st6suv9" }, endAdornment: { true: "_1st6suva" } }, defaultVariants: { size: "medium", cursor: "default" }, compoundVariants: [[{ variant: "ghost", state: "invalid" }, "_1st6suvb"], [{ startAdornment: true, size: "small" }, "_1st6suvc"], [{ startAdornment: true, size: "medium" }, "_1st6suvd"], [{ startAdornment: true, size: "large" }, "_1st6suve"], [{ endAdornment: true, size: "small" }, "_1st6suvf"], [{ endAdornment: true, size: "medium" }, "_1st6suvg"], [{ endAdornment: true, size: "large" }, "_1st6suvh"], [{ endAdornment: true, size: "small", state: "invalid" }, "_1st6suvi"], [{ endAdornment: true, size: "medium", state: "invalid" }, "_1st6suvj"], [{ endAdornment: true, size: "large", state: "invalid" }, "_1st6suvk"]] });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.vanilla.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Input.vanilla.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
;/* empty css */
|
|
4
3
|
;/* empty css */
|
|
5
4
|
const createRuntimeFn62c9670f_esm = require("../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.cjs");
|
|
6
5
|
var labelRecipe = createRuntimeFn62c9670f_esm.c({ defaultClassName: "_14umx1r1 _14umx1r0", variantClassNames: { size: { "0": "_14umx1r2", "1": "_14umx1r3", "2": "_14umx1r4", "3": "_14umx1r5", "4": "_14umx1r6", "5": "_14umx1r7", "6": "_14umx1r8", "7": "_14umx1r9", "8": "_14umx1ra", "9": "_14umx1rb", "10": "_14umx1rc", "11": "_14umx1rd", "12": "_14umx1re", inherit: "_14umx1rf" }, weight: { light: "_14umx1rg", regular: "_14umx1rh", medium: "_14umx1ri", semiBold: "_14umx1rj", bold: "_14umx1rk" }, variant: { red: "_14umx1rl", subtle: "_14umx1rm", "default": "_14umx1rn", contrast: "_14umx1ro", inherit: "_14umx1rp", invalid: "_14umx1rq" }, gradient: { true: "_14umx1rr" }, transform: { uppercase: "_14umx1rs", capitalize: "_14umx1rt", capitalizeWords: "_14umx1ru" }, noWrap: { true: "_14umx1rv" } }, defaultVariants: { size: "0", variant: "subtle", transform: "capitalize" }, compoundVariants: [] });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Label.vanilla.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Label.vanilla.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/* empty css */
|
|
2
1
|
/* empty css */
|
|
3
2
|
import { c as createRuntimeFn } from "../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";
|
|
4
3
|
var labelRecipe = createRuntimeFn({ defaultClassName: "_14umx1r1 _14umx1r0", variantClassNames: { size: { "0": "_14umx1r2", "1": "_14umx1r3", "2": "_14umx1r4", "3": "_14umx1r5", "4": "_14umx1r6", "5": "_14umx1r7", "6": "_14umx1r8", "7": "_14umx1r9", "8": "_14umx1ra", "9": "_14umx1rb", "10": "_14umx1rc", "11": "_14umx1rd", "12": "_14umx1re", inherit: "_14umx1rf" }, weight: { light: "_14umx1rg", regular: "_14umx1rh", medium: "_14umx1ri", semiBold: "_14umx1rj", bold: "_14umx1rk" }, variant: { red: "_14umx1rl", subtle: "_14umx1rm", "default": "_14umx1rn", contrast: "_14umx1ro", inherit: "_14umx1rp", invalid: "_14umx1rq" }, gradient: { true: "_14umx1rr" }, transform: { uppercase: "_14umx1rs", capitalize: "_14umx1rt", capitalizeWords: "_14umx1ru" }, noWrap: { true: "_14umx1rv" } }, defaultVariants: { size: "0", variant: "subtle", transform: "capitalize" }, compoundVariants: [] });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Label.vanilla.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Label.vanilla.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@traefik-labs/faency",
|
|
3
3
|
"description": "Traefik Labs design system",
|
|
4
|
-
"version": "12.0.
|
|
4
|
+
"version": "12.0.11",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"traefiklabs",
|
|
@@ -90,6 +90,10 @@
|
|
|
90
90
|
"@semantic-release/npm": "^9.0.0",
|
|
91
91
|
"@semantic-release/release-notes-generator": "^10.0.3",
|
|
92
92
|
"@stitches/react": "1.2.8",
|
|
93
|
+
"@storybook/addon-docs": "10.2.10",
|
|
94
|
+
"@storybook/addon-links": "10.2.10",
|
|
95
|
+
"@storybook/builder-vite": "10.2.10",
|
|
96
|
+
"@storybook/react-vite": "10.2.10",
|
|
93
97
|
"@types/jest": "^27.4.1",
|
|
94
98
|
"@types/jest-axe": "^3.5.3",
|
|
95
99
|
"@types/lodash.merge": "^4.6.6",
|
|
@@ -115,6 +119,7 @@
|
|
|
115
119
|
"react": "18.2.0",
|
|
116
120
|
"react-dom": "18.2.0",
|
|
117
121
|
"semantic-release": "^19.0.2",
|
|
122
|
+
"storybook": "10.2.10",
|
|
118
123
|
"tinycolor2": "^1.4.2",
|
|
119
124
|
"typescript": "^5.8.3",
|
|
120
125
|
"use-debounce": "9.0.2",
|
|
@@ -139,7 +144,7 @@
|
|
|
139
144
|
"eslint-plugin-react": "^7.37.5",
|
|
140
145
|
"eslint-plugin-react-hooks": "^5.2.0",
|
|
141
146
|
"eslint-plugin-simple-import-sort": "^12.1.1",
|
|
142
|
-
"eslint-plugin-storybook": "10.
|
|
147
|
+
"eslint-plugin-storybook": "10.2.10",
|
|
143
148
|
"globals": "^15.8.0",
|
|
144
149
|
"jest": "^27.5.1",
|
|
145
150
|
"jest-axe": "^6.0.0",
|
|
@@ -147,6 +152,27 @@
|
|
|
147
152
|
"typescript-eslint": "^8.38.0",
|
|
148
153
|
"webpack": "^5.94.0"
|
|
149
154
|
},
|
|
155
|
+
"resolutions": {
|
|
156
|
+
"@typescript-eslint/project-service@^8.56.0": "8.56.0",
|
|
157
|
+
"@typescript-eslint/scope-manager@^8.56.0": "8.56.0",
|
|
158
|
+
"@typescript-eslint/tsconfig-utils@^8.56.0": "8.56.0",
|
|
159
|
+
"@typescript-eslint/types@^8.56.0": "8.56.0",
|
|
160
|
+
"@typescript-eslint/typescript-estree@^8.56.0": "8.56.0",
|
|
161
|
+
"@typescript-eslint/utils@^8.56.0": "8.56.0",
|
|
162
|
+
"@typescript-eslint/visitor-keys@^8.56.0": "8.56.0",
|
|
163
|
+
"balanced-match@^4.0.2": "4.0.3",
|
|
164
|
+
"brace-expansion@^5.0.2": "5.0.2",
|
|
165
|
+
"glob@^13.0.1": "13.0.5",
|
|
166
|
+
"minimatch@^3.0.4": "3.1.2",
|
|
167
|
+
"minimatch@^3.1.1": "3.1.2",
|
|
168
|
+
"minimatch@^5.0.1": "5.1.2",
|
|
169
|
+
"minimatch@^5.1.0": "5.1.2",
|
|
170
|
+
"minimatch@^9.0.0": "9.0.5",
|
|
171
|
+
"minimatch@^9.0.5": "9.0.5",
|
|
172
|
+
"minimatch@^10.2.1": "10.2.1",
|
|
173
|
+
"minimatch@^10.2.2": "10.2.1",
|
|
174
|
+
"path-scurry@^2.0.0": "2.0.1"
|
|
175
|
+
},
|
|
150
176
|
"publishConfig": {
|
|
151
177
|
"access": "public",
|
|
152
178
|
"registry": "https://registry.npmjs.org"
|