@atom-learning/components 6.6.0 → 6.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/avatar/Avatar.js.map +1 -1
- package/dist/components/chip/Chip.d.ts +6 -3
- package/dist/components/chip/Chip.js +30 -20
- package/dist/components/chip/Chip.js.map +1 -1
- package/dist/components/chip-dismissible-group/ChipDismissibleGroupItem.d.ts +2 -1
- package/dist/components/chip-toggle-group/ChipToggleGroupItem.d.ts +6 -3
- package/dist/components/chip-toggle-group/ChipToggleGroupItem.js +36 -20
- package/dist/components/chip-toggle-group/ChipToggleGroupItem.js.map +1 -1
- package/dist/docgen.json +1 -1
- package/dist/index.cjs.js +66 -40
- package/dist/index.cjs.js.map +1 -1
- package/package.json +3 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","names":[],"sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\
|
|
1
|
+
{"version":3,"file":"Avatar.js","names":[],"sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport type { TAvatarRootContext } from './AvatarContext'\nimport { AvatarRootContext } from './AvatarContext'\nimport { AvatarIcon } from './AvatarIcon'\nimport { AvatarImage } from './AvatarImage'\nimport { AvatarInitial } from './AvatarInitial'\nimport { AvatarPlaceholder } from './AvatarPlaceholder'\n\nconst avatarRootStyles = [\n 'flex',\n 'justify-center',\n 'items-center',\n 'text-grey-800',\n 'rounded-full',\n 'border-2',\n 'border-grey-200',\n 'bg-(--bg-color)',\n 'overflow-hidden'\n]\n\nconst StyledDiv = styled('div', {\n base: avatarRootStyles,\n variants: {\n size: {\n xs: ['size-6'],\n sm: ['size-8'],\n md: ['size-10'],\n lg: ['size-12'],\n xl: ['size-16'],\n xxl: ['size-24']\n },\n emphasis: {\n bold: ['border-0', '[&>p]:text-white'],\n subtle: ['border-0'],\n white: []\n }\n }\n})\n\nconst StyledButton = styled('button', {\n base: [\n ...avatarRootStyles,\n 'not-disabled:active:bg-grey-200',\n 'not-disabled:active:border-primary-800',\n 'not-disabled:hover:bg-grey-100',\n 'not-disabled:hover:border-grey-800',\n 'not-disabled:focus-visible:outline-none',\n 'not-disabled:focus-visible:relative',\n 'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n 'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n 'not-disabled:focus-visible:z-1',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30'\n ],\n variants: {\n size: {\n xs: ['size-6'],\n sm: ['size-8'],\n md: ['size-10'],\n lg: ['size-12'],\n xl: ['size-16'],\n xxl: ['size-24']\n },\n emphasis: {\n bold: ['border-0', '[&>p]:text-white'],\n subtle: ['border-0'],\n white: []\n }\n }\n})\n\ntype TAvatarProps = React.ComponentProps<\n typeof StyledDiv | typeof StyledButton\n> & {\n name?: string\n} & (\n | {\n onClick: React.MouseEventHandler<HTMLButtonElement>\n disabled?: boolean\n }\n | { onClick?: never; disabled?: never }\n )\n\nexport { AvatarRootContext }\nexport type { TAvatarRootContext }\n\nexport const AvatarRootProvider = ({ children, name, size }: TAvatarProps) => {\n const value = React.useMemo<TAvatarRootContext>(\n () => ({ name, size }),\n [name, size]\n )\n\n return (\n <AvatarRootContext.Provider value={value}>\n {children}\n </AvatarRootContext.Provider>\n )\n}\n\nconst DS_COLORS = [\n 'maroon',\n 'red',\n 'magenta',\n 'pink',\n 'purple',\n 'lapis',\n 'blue',\n 'cyan',\n 'teal',\n 'green',\n 'lime',\n 'yellow',\n 'orange'\n] as const\n\nconst getBackgroundColor = ({\n emphasis,\n name\n}: Pick<TAvatarProps, 'emphasis' | 'name'>) => {\n if (emphasis === 'white' || !name) return 'white'\n const index = name.toLocaleUpperCase().charCodeAt(0) % DS_COLORS.length\n return `var(--color-${DS_COLORS[index]}-${emphasis === 'bold' ? 700 : 300})`\n}\n\nexport const AvatarRoot = ({\n children,\n size = 'lg',\n name,\n emphasis = 'white',\n disabled = false,\n onClick\n}: TAvatarProps) => {\n const backgroundColor = getBackgroundColor({ emphasis, name })\n return (\n <AvatarRootProvider name={name} size={size}>\n {onClick ? (\n <StyledButton\n size={size}\n style={{\n '--bg-color': backgroundColor\n }}\n disabled={disabled}\n onClick={disabled ? undefined : onClick}\n className={clsx(disabled ? 'cursor-auto' : 'cursor-pointer')}\n emphasis={emphasis}\n >\n {children}\n </StyledButton>\n ) : (\n <StyledDiv\n size={size}\n style={{\n '--bg-color': backgroundColor\n }}\n emphasis={emphasis}\n >\n {children}\n </StyledDiv>\n )}\n </AvatarRootProvider>\n )\n}\n\nexport const Avatar = Object.assign(AvatarRoot, {\n Image: AvatarImage,\n Initial: AvatarInitial,\n Placeholder: AvatarPlaceholder,\n Icon: AvatarIcon\n})\n\nAvatarRoot.displayName = 'Avatar'\n"],"mappings":";;;;;;;;;AAYA,IAAM,mBAAmB;CACvB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,IAAM,YAAY,OAAO,OAAO;CAC9B,MAAM;CACN,UAAU;EACR,MAAM;GACJ,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,UAAU;GACf,IAAI,CAAC,UAAU;GACf,IAAI,CAAC,UAAU;GACf,KAAK,CAAC,UAAU;GACjB;EACD,UAAU;GACR,MAAM,CAAC,YAAY,mBAAmB;GACtC,QAAQ,CAAC,WAAW;GACpB,OAAO,EAAE;GACV;EACF;CACF,CAAC;AAEF,IAAM,eAAe,OAAO,UAAU;CACpC,MAAM;EACJ,GAAG;EACH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,MAAM;GACJ,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,UAAU;GACf,IAAI,CAAC,UAAU;GACf,IAAI,CAAC,UAAU;GACf,KAAK,CAAC,UAAU;GACjB;EACD,UAAU;GACR,MAAM,CAAC,YAAY,mBAAmB;GACtC,QAAQ,CAAC,WAAW;GACpB,OAAO,EAAE;GACV;EACF;CACF,CAAC;AAiBF,IAAa,sBAAsB,EAAE,UAAU,MAAM,WAAyB;CAC5E,MAAM,QAAQ,QAAM,eACX;EAAE;EAAM;EAAM,GACrB,CAAC,MAAM,KAAK,CACb;AAED,QACE,wBAAA,cAAC,kBAAkB,UAAnB,EAAmC,OAEN,EAD1B,SAC0B;;AAIjC,IAAM,YAAY;CAChB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,IAAM,sBAAsB,EAC1B,UACA,WAC6C;AAC7C,KAAI,aAAa,WAAW,CAAC,KAAM,QAAO;AAE1C,QAAO,eAAe,UADR,KAAK,mBAAmB,CAAC,WAAW,EAAE,GAAG,UAAU,QAC1B,GAAG,aAAa,SAAS,MAAM,IAAI;;AAG5E,IAAa,cAAc,EACzB,UACA,OAAO,MACP,MACA,WAAW,SACX,WAAW,OACX,cACkB;CAClB,MAAM,kBAAkB,mBAAmB;EAAE;EAAU;EAAM,CAAC;AAC9D,QACE,wBAAA,cAAC,oBAAD;EAA0B;EAAY;EAyBjB,EAxBlB,UACC,wBAAA,cAAC,cAAD;EACQ;EACN,OAAO,EACL,cAAc,iBACf;EACS;EACV,SAAS,WAAW,KAAA,IAAY;EAChC,WAAW,KAAK,WAAW,gBAAgB,iBAAiB;EAClD;EAGG,EADZ,SACY,GAEf,wBAAA,cAAC,WAAD;EACQ;EACN,OAAO,EACL,cAAc,iBACf;EACS;EAGA,EADT,SACS,CAEK;;AAIzB,IAAa,SAAS,OAAO,OAAO,YAAY;CAC9C,OAAO;CACP,SAAS;CACT,aAAa;CACb,MAAM;CACP,CAAC;AAEF,WAAW,cAAc"}
|
|
@@ -8,8 +8,9 @@ export declare const StyledChipContent: React.ForwardRefExoticComponent<Omit<Omi
|
|
|
8
8
|
export declare const ChipIcon: (props: React.ComponentProps<typeof Icon>) => React.JSX.Element;
|
|
9
9
|
export declare const StyledRoot: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
10
10
|
ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
|
|
11
|
-
}, "size"> & {
|
|
11
|
+
}, "appearance" | "size"> & {
|
|
12
12
|
size?: "sm" | "md" | "lg" | undefined;
|
|
13
|
+
appearance?: "standard" | "modern" | undefined;
|
|
13
14
|
} & {
|
|
14
15
|
as?: React.ElementType;
|
|
15
16
|
}>;
|
|
@@ -17,8 +18,9 @@ export type TChipRootContext = React.ComponentProps<typeof StyledRoot>;
|
|
|
17
18
|
export type TChipRootProviderProps = TChipRootContext;
|
|
18
19
|
export declare const ChipRootContext: React.Context<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
19
20
|
ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
|
|
20
|
-
}, "size"> & {
|
|
21
|
+
}, "appearance" | "size"> & {
|
|
21
22
|
size?: "sm" | "md" | "lg" | undefined;
|
|
23
|
+
appearance?: "standard" | "modern" | undefined;
|
|
22
24
|
} & {
|
|
23
25
|
as?: React.ElementType;
|
|
24
26
|
}>;
|
|
@@ -26,8 +28,9 @@ export declare const ChipRootProvider: ({ size, children }: TChipRootProviderPro
|
|
|
26
28
|
export type TChipRootProps = TChipRootProviderProps;
|
|
27
29
|
export declare const Chip: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
28
30
|
ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
|
|
29
|
-
}, "size"> & {
|
|
31
|
+
}, "appearance" | "size"> & {
|
|
30
32
|
size?: "sm" | "md" | "lg" | undefined;
|
|
33
|
+
appearance?: "standard" | "modern" | undefined;
|
|
31
34
|
} & {
|
|
32
35
|
as?: React.ElementType;
|
|
33
36
|
}, "ref"> & React.RefAttributes<HTMLDivElement>> & {
|
|
@@ -56,26 +56,36 @@ var StyledRoot = styled("div", {
|
|
|
56
56
|
"disabled:opacity-30",
|
|
57
57
|
"disabled:pointer-events-none"
|
|
58
58
|
],
|
|
59
|
-
variants: {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
59
|
+
variants: {
|
|
60
|
+
size: {
|
|
61
|
+
sm: [
|
|
62
|
+
"h-6",
|
|
63
|
+
"text-sm",
|
|
64
|
+
"leading-[1.53]",
|
|
65
|
+
"capsize-[0.4056]"
|
|
66
|
+
],
|
|
67
|
+
md: [
|
|
68
|
+
"h-8",
|
|
69
|
+
"text-sm",
|
|
70
|
+
"leading-[1.53]",
|
|
71
|
+
"capsize-[0.4056]"
|
|
72
|
+
],
|
|
73
|
+
lg: [
|
|
74
|
+
"h-10",
|
|
75
|
+
"text-md",
|
|
76
|
+
"leading-normal",
|
|
77
|
+
"capsize-[0.3864]"
|
|
78
|
+
]
|
|
79
|
+
},
|
|
80
|
+
appearance: {
|
|
81
|
+
standard: [],
|
|
82
|
+
modern: [
|
|
83
|
+
"border-grey-900",
|
|
84
|
+
"text-grey-900",
|
|
85
|
+
"bg-grey-100"
|
|
86
|
+
]
|
|
87
|
+
}
|
|
88
|
+
}
|
|
79
89
|
});
|
|
80
90
|
var ChipRootContext = React$1.createContext({});
|
|
81
91
|
var ChipRootProvider = ({ size, children }) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chip.js","names":[],"sources":["../../../src/components/chip/Chip.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\nimport { styled } from '~/styled'\nimport { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nexport const StyledChipContent = styled('span', {\n base: [\n 'inline-flex',\n 'items-center',\n 'px-1',\n 'grow',\n 'overflow-hidden',\n 'text-ellipsis',\n 'whitespace-nowrap',\n '*:not-last:mr-1'\n ]\n})\n\nconst toIconSize = { sm: 'sm', md: 'sm', lg: 'md' }\n\nexport const ChipIcon = (props: React.ComponentProps<typeof Icon>) => {\n const rootContext = React.useContext(ChipRootContext)\n const { size } = rootContext\n const iconSize = React.useMemo(\n () => overrideStyledVariantValue(size, (s) => toIconSize[s]),\n [size]\n )\n return <Icon {...props} size={iconSize} />\n}\n\nconst ChipContent = ({ children, ...rest }) => {\n const childrenArray = React.Children.toArray(children)\n const isSingleChild = childrenArray.length <= 1\n return (\n <StyledChipContent {...rest}>\n {\n childrenArray.map((child, index) => {\n if (!isSingleChild && typeof child === 'string')\n return (\n <span\n key={child}\n className=\"overflow-hidden text-ellipsis whitespace-nowrap\"\n >\n {child}\n </span>\n )\n if (React.isValidElement(child) && child.type === Icon) {\n return <ChipIcon key={`icon-${index}`} {...child.props} />\n }\n return child\n }) as React.ReactElement[]\n }\n </StyledChipContent>\n )\n}\n\nexport const StyledRoot = styled('div', {\n base: [\n 'flex',\n 'px-2',\n 'border',\n 'rounded-md',\n 'items-center',\n 'font-body',\n 'max-w-full',\n 'border-primary-800',\n 'text-primary-900',\n 'bg-primary-100',\n 'disabled:opacity-30',\n 'disabled:pointer-events-none'\n ],\n variants: {\n size: {\n sm: ['h-6', 'text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n md: ['h-8', 'text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n lg: ['h-10', 'text-md', 'leading-normal', 'capsize-[0.3864]']\n }\n }\n})\n\nexport type TChipRootContext = React.ComponentProps<typeof StyledRoot>\nexport type TChipRootProviderProps = TChipRootContext\n\nexport const ChipRootContext = React.createContext<TChipRootContext>({})\n\nexport const ChipRootProvider = ({\n size,\n children\n}: TChipRootProviderProps) => {\n const value = React.useMemo<TChipRootContext>(() => ({ size }), [size])\n return (\n <ChipRootContext.Provider value={value}>\n {children}\n </ChipRootContext.Provider>\n )\n}\n\nexport type TChipRootProps = TChipRootProviderProps\n\nconst ChipRoot = React.forwardRef<HTMLDivElement, TChipRootProps>(\n ({ size = 'md', ...rest }, ref) => {\n return (\n <ChipRootProvider size={size}>\n <StyledRoot ref={ref} size={size} {...rest} />\n </ChipRootProvider>\n )\n }\n)\n\nexport const Chip = Object.assign(ChipRoot, {\n Content: ChipContent,\n Icon: ChipIcon\n})\n\nChipRoot.displayName = 'Chip'\n"],"mappings":";;;;;AAMA,IAAa,oBAAoB,OAAO,QAAQ,EAC9C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,IAAM,aAAa;CAAE,IAAI;CAAM,IAAI;CAAM,IAAI;CAAM;AAEnD,IAAa,YAAY,UAA6C;CAEpE,MAAM,EAAE,SADY,QAAM,WAAW,gBAAgB;CAErD,MAAM,WAAW,QAAM,cACf,2BAA2B,OAAO,MAAM,WAAW,GAAG,EAC5D,CAAC,KAAK,CACP;AACD,QAAO,wBAAA,cAAC,MAAD;EAAM,GAAI;EAAO,MAAM;EAAY,CAAA;;AAG5C,IAAM,eAAe,EAAE,UAAU,GAAG,WAAW;CAC7C,MAAM,gBAAgB,QAAM,SAAS,QAAQ,SAAS;CACtD,MAAM,gBAAgB,cAAc,UAAU;AAC9C,QACE,wBAAA,cAAC,mBAAsB,MAEnB,cAAc,KAAK,OAAO,UAAU;AAClC,MAAI,CAAC,iBAAiB,OAAO,UAAU,SACrC,QACE,wBAAA,cAAC,QAAD;GACE,KAAK;GACL,WAAU;GAGL,EADJ,MACI;AAEX,MAAI,QAAM,eAAe,MAAM,IAAI,MAAM,SAAS,KAChD,QAAO,wBAAA,cAAC,UAAD;GAAU,KAAK,QAAQ;GAAS,GAAI,MAAM;GAAS,CAAA;AAE5D,SAAO;GACP,CAEc;;AAIxB,IAAa,aAAa,OAAO,OAAO;CACtC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU
|
|
1
|
+
{"version":3,"file":"Chip.js","names":[],"sources":["../../../src/components/chip/Chip.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\nimport { styled } from '~/styled'\nimport { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nexport const StyledChipContent = styled('span', {\n base: [\n 'inline-flex',\n 'items-center',\n 'px-1',\n 'grow',\n 'overflow-hidden',\n 'text-ellipsis',\n 'whitespace-nowrap',\n '*:not-last:mr-1'\n ]\n})\n\nconst toIconSize = { sm: 'sm', md: 'sm', lg: 'md' }\n\nexport const ChipIcon = (props: React.ComponentProps<typeof Icon>) => {\n const rootContext = React.useContext(ChipRootContext)\n const { size } = rootContext\n const iconSize = React.useMemo(\n () => overrideStyledVariantValue(size, (s) => toIconSize[s]),\n [size]\n )\n return <Icon {...props} size={iconSize} />\n}\n\nconst ChipContent = ({ children, ...rest }) => {\n const childrenArray = React.Children.toArray(children)\n const isSingleChild = childrenArray.length <= 1\n return (\n <StyledChipContent {...rest}>\n {\n childrenArray.map((child, index) => {\n if (!isSingleChild && typeof child === 'string')\n return (\n <span\n key={child}\n className=\"overflow-hidden text-ellipsis whitespace-nowrap\"\n >\n {child}\n </span>\n )\n if (React.isValidElement(child) && child.type === Icon) {\n return <ChipIcon key={`icon-${index}`} {...child.props} />\n }\n return child\n }) as React.ReactElement[]\n }\n </StyledChipContent>\n )\n}\n\nexport const StyledRoot = styled('div', {\n base: [\n 'flex',\n 'px-2',\n 'border',\n 'rounded-md',\n 'items-center',\n 'font-body',\n 'max-w-full',\n 'border-primary-800',\n 'text-primary-900',\n 'bg-primary-100',\n 'disabled:opacity-30',\n 'disabled:pointer-events-none'\n ],\n variants: {\n size: {\n sm: ['h-6', 'text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n md: ['h-8', 'text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n lg: ['h-10', 'text-md', 'leading-normal', 'capsize-[0.3864]']\n },\n appearance: {\n standard: [],\n modern: ['border-grey-900', 'text-grey-900', 'bg-grey-100']\n }\n }\n})\n\nexport type TChipRootContext = React.ComponentProps<typeof StyledRoot>\nexport type TChipRootProviderProps = TChipRootContext\n\nexport const ChipRootContext = React.createContext<TChipRootContext>({})\n\nexport const ChipRootProvider = ({\n size,\n children\n}: TChipRootProviderProps) => {\n const value = React.useMemo<TChipRootContext>(() => ({ size }), [size])\n return (\n <ChipRootContext.Provider value={value}>\n {children}\n </ChipRootContext.Provider>\n )\n}\n\nexport type TChipRootProps = TChipRootProviderProps\n\nconst ChipRoot = React.forwardRef<HTMLDivElement, TChipRootProps>(\n ({ size = 'md', ...rest }, ref) => {\n return (\n <ChipRootProvider size={size}>\n <StyledRoot ref={ref} size={size} {...rest} />\n </ChipRootProvider>\n )\n }\n)\n\nexport const Chip = Object.assign(ChipRoot, {\n Content: ChipContent,\n Icon: ChipIcon\n})\n\nChipRoot.displayName = 'Chip'\n"],"mappings":";;;;;AAMA,IAAa,oBAAoB,OAAO,QAAQ,EAC9C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,IAAM,aAAa;CAAE,IAAI;CAAM,IAAI;CAAM,IAAI;CAAM;AAEnD,IAAa,YAAY,UAA6C;CAEpE,MAAM,EAAE,SADY,QAAM,WAAW,gBAAgB;CAErD,MAAM,WAAW,QAAM,cACf,2BAA2B,OAAO,MAAM,WAAW,GAAG,EAC5D,CAAC,KAAK,CACP;AACD,QAAO,wBAAA,cAAC,MAAD;EAAM,GAAI;EAAO,MAAM;EAAY,CAAA;;AAG5C,IAAM,eAAe,EAAE,UAAU,GAAG,WAAW;CAC7C,MAAM,gBAAgB,QAAM,SAAS,QAAQ,SAAS;CACtD,MAAM,gBAAgB,cAAc,UAAU;AAC9C,QACE,wBAAA,cAAC,mBAAsB,MAEnB,cAAc,KAAK,OAAO,UAAU;AAClC,MAAI,CAAC,iBAAiB,OAAO,UAAU,SACrC,QACE,wBAAA,cAAC,QAAD;GACE,KAAK;GACL,WAAU;GAGL,EADJ,MACI;AAEX,MAAI,QAAM,eAAe,MAAM,IAAI,MAAM,SAAS,KAChD,QAAO,wBAAA,cAAC,UAAD;GAAU,KAAK,QAAQ;GAAS,GAAI,MAAM;GAAS,CAAA;AAE5D,SAAO;GACP,CAEc;;AAIxB,IAAa,aAAa,OAAO,OAAO;CACtC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAO;IAAW;IAAkB;IAAmB;GAC5D,IAAI;IAAC;IAAO;IAAW;IAAkB;IAAmB;GAC5D,IAAI;IAAC;IAAQ;IAAW;IAAkB;IAAmB;GAC9D;EACD,YAAY;GACV,UAAU,EAAE;GACZ,QAAQ;IAAC;IAAmB;IAAiB;IAAc;GAC5D;EACF;CACF,CAAC;AAKF,IAAa,kBAAkB,QAAM,cAAgC,EAAE,CAAC;AAExE,IAAa,oBAAoB,EAC/B,MACA,eAC4B;CAC5B,MAAM,QAAQ,QAAM,eAAiC,EAAE,MAAM,GAAG,CAAC,KAAK,CAAC;AACvE,QACE,wBAAA,cAAC,gBAAgB,UAAjB,EAAiC,OAEN,EADxB,SACwB;;AAM/B,IAAM,WAAW,QAAM,YACpB,EAAE,OAAO,MAAM,GAAG,QAAQ,QAAQ;AACjC,QACE,wBAAA,cAAC,kBAAD,EAAwB,MAEL,EADjB,wBAAA,cAAC,YAAD;EAAiB;EAAW;EAAM,GAAI;EAAQ,CAAA,CAC7B;EAGxB;AAED,IAAa,OAAO,OAAO,OAAO,UAAU;CAC1C,SAAS;CACT,MAAM;CACP,CAAC;AAEF,SAAS,cAAc"}
|
|
@@ -2,8 +2,9 @@ import * as React from 'react';
|
|
|
2
2
|
import { DismissibleGroup } from '../../components/dismissible-group';
|
|
3
3
|
declare const StyledChipDismissibleGroupItem: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
4
4
|
ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
|
|
5
|
-
}, "size"> & {
|
|
5
|
+
}, "appearance" | "size"> & {
|
|
6
6
|
size?: "sm" | "md" | "lg" | undefined;
|
|
7
|
+
appearance?: "standard" | "modern" | undefined;
|
|
7
8
|
} & {
|
|
8
9
|
as?: React.ElementType;
|
|
9
10
|
}, "ref"> & React.RefAttributes<HTMLDivElement>, never> & {
|
|
@@ -2,13 +2,16 @@ import * as ToggleGroup from '@radix-ui/react-toggle-group';
|
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
declare const StyledChipToggleGroupItem: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
4
4
|
ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
|
|
5
|
-
}, "size"> & {
|
|
5
|
+
}, "appearance" | "size"> & {
|
|
6
6
|
size?: "sm" | "md" | "lg" | undefined;
|
|
7
|
+
appearance?: "standard" | "modern" | undefined;
|
|
7
8
|
} & {
|
|
8
9
|
as?: React.ElementType;
|
|
9
|
-
}, "ref"> & React.RefAttributes<HTMLDivElement>,
|
|
10
|
+
}, "ref"> & React.RefAttributes<HTMLDivElement>, "appearance"> & {
|
|
11
|
+
appearance?: "standard" | "modern" | undefined;
|
|
12
|
+
} & {
|
|
10
13
|
as?: React.ElementType;
|
|
11
14
|
}>;
|
|
12
15
|
type TChipToggleGroupItem = React.ComponentProps<typeof ToggleGroup.Item> & React.ComponentProps<typeof StyledChipToggleGroupItem>;
|
|
13
|
-
export declare const ChipToggleGroupItem: ({ size, children, ...rest }: TChipToggleGroupItem) => React.JSX.Element;
|
|
16
|
+
export declare const ChipToggleGroupItem: ({ size, appearance, children, ...rest }: TChipToggleGroupItem) => React.JSX.Element;
|
|
14
17
|
export {};
|
|
@@ -6,29 +6,45 @@ import { Ok } from "@atom-learning/icons";
|
|
|
6
6
|
import * as ToggleGroup from "@radix-ui/react-toggle-group";
|
|
7
7
|
//#region src/components/chip-toggle-group/ChipToggleGroupItem.tsx
|
|
8
8
|
var StyledChipToggleIcon = styled(Icon, { base: ["hidden"] });
|
|
9
|
-
var StyledChipToggleGroupItem = styled(Chip, {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
]
|
|
27
|
-
|
|
9
|
+
var StyledChipToggleGroupItem = styled(Chip, {
|
|
10
|
+
base: [
|
|
11
|
+
"flex",
|
|
12
|
+
"not-disabled:cursor-pointer",
|
|
13
|
+
"not-disabled:data-[state=on]:hover:bg-white",
|
|
14
|
+
"not-disabled:data-[state=on]:hover:text-primary-1000",
|
|
15
|
+
"not-disabled:focus-visible:outline-none",
|
|
16
|
+
"not-disabled:focus-visible:relative",
|
|
17
|
+
"not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]",
|
|
18
|
+
"not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]",
|
|
19
|
+
"not-disabled:focus-visible:z-1",
|
|
20
|
+
"not-disabled:hover:bg-grey-200",
|
|
21
|
+
"not-disabled:hover:border-current",
|
|
22
|
+
"not-disabled:hover:text-grey-1000",
|
|
23
|
+
"data-[state=off]:bg-white",
|
|
24
|
+
"data-[state=off]:border-grey-600",
|
|
25
|
+
"data-[state=off]:text-grey-800",
|
|
26
|
+
"data-[state=on]:[&_svg]:block"
|
|
27
|
+
],
|
|
28
|
+
variants: { appearance: {
|
|
29
|
+
standard: [],
|
|
30
|
+
modern: [
|
|
31
|
+
"data-[state=off]:bg-grey-100",
|
|
32
|
+
"data-[state=off]:border-transparent",
|
|
33
|
+
"data-[state=on]:border-grey-900",
|
|
34
|
+
"data-[state=on]:text-grey-900",
|
|
35
|
+
"data-[state=on]:bg-white",
|
|
36
|
+
"data-[state=on]:font-bold"
|
|
37
|
+
]
|
|
38
|
+
} }
|
|
39
|
+
});
|
|
40
|
+
var ChipToggleGroupItem = ({ size = "md", appearance, children, ...rest }) => {
|
|
28
41
|
return /* @__PURE__ */ React$1.createElement(ToggleGroup.Item, {
|
|
29
42
|
...rest,
|
|
30
43
|
asChild: true
|
|
31
|
-
}, /* @__PURE__ */ React$1.createElement(StyledChipToggleGroupItem, {
|
|
44
|
+
}, /* @__PURE__ */ React$1.createElement(StyledChipToggleGroupItem, {
|
|
45
|
+
as: "button",
|
|
46
|
+
appearance
|
|
47
|
+
}, /* @__PURE__ */ React$1.createElement(StyledChipToggleIcon, {
|
|
32
48
|
is: Ok,
|
|
33
49
|
size: size === "lg" ? "md" : "sm"
|
|
34
50
|
}), /* @__PURE__ */ React$1.createElement(Chip.Content, null, children)));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChipToggleGroupItem.js","names":[],"sources":["../../../src/components/chip-toggle-group/ChipToggleGroupItem.tsx"],"sourcesContent":["import { Ok } from '@atom-learning/icons'\nimport * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\nimport { Chip } from '~/components/chip/Chip'\nimport { Icon } from '~/components/icon/Icon'\nimport { styled } from '~/styled'\n\nconst StyledChipToggleIcon = styled(Icon, {\n base: ['hidden']\n})\n\nconst StyledChipToggleGroupItem = styled(Chip, {\n base: [\n 'flex',\n 'not-disabled:cursor-pointer',\n 'not-disabled:data-[state=on]:hover:bg-white',\n 'not-disabled:data-[state=on]:hover:text-primary-1000',\n 'not-disabled:focus-visible:outline-none',\n 'not-disabled:focus-visible:relative',\n 'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n 'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n 'not-disabled:focus-visible:z-1',\n 'not-disabled:hover:bg-grey-200',\n 'not-disabled:hover:border-current',\n 'not-disabled:hover:text-grey-1000',\n 'data-[state=off]:bg-white',\n 'data-[state=off]:border-grey-600',\n 'data-[state=off]:text-grey-800',\n 'data-[state=on]:[&_svg]:block'\n ]\n})\n\ntype TChipToggleGroupItem = React.ComponentProps<typeof ToggleGroup.Item> &\n React.ComponentProps<typeof StyledChipToggleGroupItem>\n\nexport const ChipToggleGroupItem = ({\n size = 'md',\n children,\n ...rest\n}: TChipToggleGroupItem) => {\n return (\n <ToggleGroup.Item {...rest} asChild>\n <StyledChipToggleGroupItem as=\"button\">\n <StyledChipToggleIcon is={Ok} size={size === 'lg' ? 'md' : 'sm'} />\n <Chip.Content>{children}</Chip.Content>\n </StyledChipToggleGroupItem>\n </ToggleGroup.Item>\n )\n}\n"],"mappings":";;;;;;;AAQA,IAAM,uBAAuB,OAAO,MAAM,EACxC,MAAM,CAAC,SAAS,EACjB,CAAC;AAEF,IAAM,4BAA4B,OAAO,MAAM,
|
|
1
|
+
{"version":3,"file":"ChipToggleGroupItem.js","names":[],"sources":["../../../src/components/chip-toggle-group/ChipToggleGroupItem.tsx"],"sourcesContent":["import { Ok } from '@atom-learning/icons'\nimport * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\nimport { Chip } from '~/components/chip/Chip'\nimport { Icon } from '~/components/icon/Icon'\nimport { styled } from '~/styled'\n\nconst StyledChipToggleIcon = styled(Icon, {\n base: ['hidden']\n})\n\nconst StyledChipToggleGroupItem = styled(Chip, {\n base: [\n 'flex',\n 'not-disabled:cursor-pointer',\n 'not-disabled:data-[state=on]:hover:bg-white',\n 'not-disabled:data-[state=on]:hover:text-primary-1000',\n 'not-disabled:focus-visible:outline-none',\n 'not-disabled:focus-visible:relative',\n 'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n 'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n 'not-disabled:focus-visible:z-1',\n 'not-disabled:hover:bg-grey-200',\n 'not-disabled:hover:border-current',\n 'not-disabled:hover:text-grey-1000',\n 'data-[state=off]:bg-white',\n 'data-[state=off]:border-grey-600',\n 'data-[state=off]:text-grey-800',\n 'data-[state=on]:[&_svg]:block'\n ],\n variants: {\n appearance: {\n standard: [],\n modern: [\n 'data-[state=off]:bg-grey-100',\n 'data-[state=off]:border-transparent',\n 'data-[state=on]:border-grey-900',\n 'data-[state=on]:text-grey-900',\n 'data-[state=on]:bg-white',\n 'data-[state=on]:font-bold'\n ]\n }\n }\n})\n\ntype TChipToggleGroupItem = React.ComponentProps<typeof ToggleGroup.Item> &\n React.ComponentProps<typeof StyledChipToggleGroupItem>\n\nexport const ChipToggleGroupItem = ({\n size = 'md',\n appearance,\n children,\n ...rest\n}: TChipToggleGroupItem) => {\n return (\n <ToggleGroup.Item {...rest} asChild>\n <StyledChipToggleGroupItem as=\"button\" appearance={appearance}>\n <StyledChipToggleIcon is={Ok} size={size === 'lg' ? 'md' : 'sm'} />\n <Chip.Content>{children}</Chip.Content>\n </StyledChipToggleGroupItem>\n </ToggleGroup.Item>\n )\n}\n"],"mappings":";;;;;;;AAQA,IAAM,uBAAuB,OAAO,MAAM,EACxC,MAAM,CAAC,SAAS,EACjB,CAAC;AAEF,IAAM,4BAA4B,OAAO,MAAM;CAC7C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,YAAY;EACV,UAAU,EAAE;EACZ,QAAQ;GACN;GACA;GACA;GACA;GACA;GACA;GACD;EACF,EACF;CACF,CAAC;AAKF,IAAa,uBAAuB,EAClC,OAAO,MACP,YACA,UACA,GAAG,WACuB;AAC1B,QACE,wBAAA,cAAC,YAAY,MAAb;EAAkB,GAAI;EAAM,SAAA;EAKT,EAJjB,wBAAA,cAAC,2BAAD;EAA2B,IAAG;EAAqB;EAGvB,EAF1B,wBAAA,cAAC,sBAAD;EAAsB,IAAI;EAAI,MAAM,SAAS,OAAO,OAAO;EAAQ,CAAA,EACnE,wBAAA,cAAC,KAAK,SAAA,MAAS,SAAwB,CACb,CACX"}
|