@atom-learning/components 6.6.0-beta.5 → 6.7.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.
Files changed (16) hide show
  1. package/dist/components/avatar/Avatar.d.ts +6 -4
  2. package/dist/components/avatar/Avatar.js +72 -26
  3. package/dist/components/avatar/Avatar.js.map +1 -1
  4. package/dist/components/badge/BadgeText.js.map +1 -1
  5. package/dist/components/chip/Chip.d.ts +6 -3
  6. package/dist/components/chip/Chip.js +30 -20
  7. package/dist/components/chip/Chip.js.map +1 -1
  8. package/dist/components/chip-dismissible-group/ChipDismissibleGroupItem.d.ts +2 -1
  9. package/dist/components/chip-toggle-group/ChipToggleGroupItem.d.ts +6 -3
  10. package/dist/components/chip-toggle-group/ChipToggleGroupItem.js +36 -20
  11. package/dist/components/chip-toggle-group/ChipToggleGroupItem.js.map +1 -1
  12. package/dist/components/segmented-control/SegmentedControlItem.js.map +1 -1
  13. package/dist/docgen.json +1 -1
  14. package/dist/index.cjs.js +137 -66
  15. package/dist/index.cjs.js.map +1 -1
  16. package/package.json +2 -3
package/dist/components/avatar/Avatar.d.ts CHANGED
@@ -3,15 +3,17 @@ import type { TAvatarRootContext } from './AvatarContext';
3
3
  import { AvatarRootContext } from './AvatarContext';
4
4
  declare const StyledDiv: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
5
5
  ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
6
- }, "size"> & {
6
+ }, "size" | "emphasis"> & {
7
7
  size?: "sm" | "md" | "lg" | "xs" | "xl" | "xxl" | undefined;
8
+ emphasis?: "bold" | "white" | "subtle" | undefined;
8
9
  } & {
9
10
  as?: React.ElementType;
10
11
  }>;
11
12
  declare const StyledButton: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
12
13
  ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
13
- }, "size"> & {
14
+ }, "size" | "emphasis"> & {
14
15
  size?: "sm" | "md" | "lg" | "xs" | "xl" | "xxl" | undefined;
16
+ emphasis?: "bold" | "white" | "subtle" | undefined;
15
17
  } & {
16
18
  as?: React.ElementType;
17
19
  }>;
@@ -28,11 +30,11 @@ export { AvatarRootContext };
28
30
  export type { TAvatarRootContext };
29
31
  export declare const AvatarRootProvider: ({ children, name, size }: TAvatarProps) => React.JSX.Element;
30
32
  export declare const AvatarRoot: {
31
- ({ children, size, name, disabled, onClick }: TAvatarProps): React.JSX.Element;
33
+ ({ children, size, name, emphasis, disabled, onClick }: TAvatarProps): React.JSX.Element;
32
34
  displayName: string;
33
35
  };
34
36
  export declare const Avatar: {
35
- ({ children, size, name, disabled, onClick }: TAvatarProps): React.JSX.Element;
37
+ ({ children, size, name, emphasis, disabled, onClick }: TAvatarProps): React.JSX.Element;
36
38
  displayName: string;
37
39
  } & {
38
40
  Image: ({ src, alt }: {
package/dist/components/avatar/Avatar.js CHANGED
@@ -4,6 +4,7 @@ import { AvatarIcon } from "./AvatarIcon.js";
4
4
  import { AvatarPlaceholder } from "./AvatarPlaceholder.js";
5
5
  import { AvatarInitial } from "./AvatarInitial.js";
6
6
  import { AvatarImage } from "./AvatarImage.js";
7
+ import clsx from "clsx";
7
8
  import * as React$1 from "react";
8
9
  //#region src/components/avatar/Avatar.tsx
9
10
  var avatarRootStyles = [
@@ -14,19 +15,26 @@ var avatarRootStyles = [
14
15
  "rounded-full",
15
16
  "border-2",
16
17
  "border-grey-200",
17
- "bg-white",
18
+ "bg-(--bg-color)",
18
19
  "overflow-hidden"
19
20
  ];
20
21
  var StyledDiv = styled("div", {
21
22
  base: avatarRootStyles,
22
- variants: { size: {
23
- xs: ["size-6"],
24
- sm: ["size-8"],
25
- md: ["size-10"],
26
- lg: ["size-12"],
27
- xl: ["size-16"],
28
- xxl: ["size-24"]
29
- } }
23
+ variants: {
24
+ size: {
25
+ xs: ["size-6"],
26
+ sm: ["size-8"],
27
+ md: ["size-10"],
28
+ lg: ["size-12"],
29
+ xl: ["size-16"],
30
+ xxl: ["size-24"]
31
+ },
32
+ emphasis: {
33
+ bold: ["border-0", "[&>p]:text-white"],
34
+ subtle: ["border-0"],
35
+ white: []
36
+ }
37
+ }
30
38
  });
31
39
  var StyledButton = styled("button", {
32
40
  base: [
@@ -43,14 +51,21 @@ var StyledButton = styled("button", {
43
51
  "disabled:cursor-not-allowed",
44
52
  "disabled:opacity-30"
45
53
  ],
46
- variants: { size: {
47
- xs: ["size-6"],
48
- sm: ["size-8"],
49
- md: ["size-10"],
50
- lg: ["size-12"],
51
- xl: ["size-16"],
52
- xxl: ["size-24"]
53
- } }
54
+ variants: {
55
+ size: {
56
+ xs: ["size-6"],
57
+ sm: ["size-8"],
58
+ md: ["size-10"],
59
+ lg: ["size-12"],
60
+ xl: ["size-16"],
61
+ xxl: ["size-24"]
62
+ },
63
+ emphasis: {
64
+ bold: ["border-0", "[&>p]:text-white"],
65
+ subtle: ["border-0"],
66
+ white: []
67
+ }
68
+ }
54
69
  });
55
70
  var AvatarRootProvider = ({ children, name, size }) => {
56
71
  const value = React$1.useMemo(() => ({
@@ -59,15 +74,46 @@ var AvatarRootProvider = ({ children, name, size }) => {
59
74
  }), [name, size]);
60
75
  return /* @__PURE__ */ React$1.createElement(AvatarRootContext.Provider, { value }, children);
61
76
  };
62
- var AvatarRoot = ({ children, size = "lg", name, disabled = false, onClick }) => /* @__PURE__ */ React$1.createElement(AvatarRootProvider, {
63
- name,
64
- size
65
- }, onClick ? /* @__PURE__ */ React$1.createElement(StyledButton, {
66
- size,
67
- disabled,
68
- onClick: disabled ? void 0 : onClick,
69
- className: disabled ? "cursor-auto" : "cursor-pointer"
70
- }, children) : /* @__PURE__ */ React$1.createElement(StyledDiv, { size }, children));
77
+ var DS_COLORS = [
78
+ "maroon",
79
+ "red",
80
+ "magenta",
81
+ "pink",
82
+ "purple",
83
+ "lapis",
84
+ "blue",
85
+ "cyan",
86
+ "teal",
87
+ "green",
88
+ "lime",
89
+ "yellow",
90
+ "orange"
91
+ ];
92
+ var getBackgroundColor = ({ emphasis, name }) => {
93
+ if (emphasis === "white" || !name) return "white";
94
+ return `var(--color-${DS_COLORS[name.toLocaleUpperCase().charCodeAt(0) % DS_COLORS.length]}-${emphasis === "bold" ? 700 : 300})`;
95
+ };
96
+ var AvatarRoot = ({ children, size = "lg", name, emphasis = "white", disabled = false, onClick }) => {
97
+ const backgroundColor = getBackgroundColor({
98
+ emphasis,
99
+ name
100
+ });
101
+ return /* @__PURE__ */ React$1.createElement(AvatarRootProvider, {
102
+ name,
103
+ size
104
+ }, onClick ? /* @__PURE__ */ React$1.createElement(StyledButton, {
105
+ size,
106
+ style: { "--bg-color": backgroundColor },
107
+ disabled,
108
+ onClick: disabled ? void 0 : onClick,
109
+ className: clsx(disabled ? "cursor-auto" : "cursor-pointer"),
110
+ emphasis
111
+ }, children) : /* @__PURE__ */ React$1.createElement(StyledDiv, {
112
+ size,
113
+ style: { "--bg-color": backgroundColor },
114
+ emphasis
115
+ }, children));
116
+ };
71
117
  var Avatar = Object.assign(AvatarRoot, {
72
118
  Image: AvatarImage,
73
119
  Initial: AvatarInitial,
package/dist/components/avatar/Avatar.js.map CHANGED
@@ -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'\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-white',\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 }\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 }\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\nexport const AvatarRoot = ({\n children,\n size = 'lg',\n name,\n disabled = false,\n onClick\n}: TAvatarProps) => (\n <AvatarRootProvider name={name} size={size}>\n {onClick ? (\n <StyledButton\n size={size}\n disabled={disabled}\n onClick={disabled ? undefined : onClick}\n className={disabled ? 'cursor-auto' : 'cursor-pointer'}\n >\n {children}\n </StyledButton>\n ) : (\n <StyledDiv size={size}>{children}</StyledDiv>\n )}\n </AvatarRootProvider>\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":";;;;;;;;AAWA,IAAM,mBAAmB;CACvB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,IAAM,YAAY,OAAO,OAAO;CAC9B,MAAM;CACN,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,SAAS;EACd,IAAI,CAAC,SAAS;EACd,IAAI,CAAC,UAAU;EACf,IAAI,CAAC,UAAU;EACf,IAAI,CAAC,UAAU;EACf,KAAK,CAAC,UAAU;EACjB,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;EACJ,IAAI,CAAC,SAAS;EACd,IAAI,CAAC,SAAS;EACd,IAAI,CAAC,UAAU;EACf,IAAI,CAAC,UAAU;EACf,IAAI,CAAC,UAAU;EACf,KAAK,CAAC,UAAU;EACjB,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,IAAa,cAAc,EACzB,UACA,OAAO,MACP,MACA,WAAW,OACX,cAEA,wBAAA,cAAC,oBAAD;CAA0B;CAAY;CAajB,EAZlB,UACC,wBAAA,cAAC,cAAD;CACQ;CACI;CACV,SAAS,WAAW,KAAA,IAAY;CAChC,WAAW,WAAW,gBAAgB;CAGzB,EADZ,SACY,GAEf,wBAAA,cAAC,WAAD,EAAiB,MAA4B,EAArB,SAAqB,CAE5B;AAGvB,IAAa,SAAS,OAAO,OAAO,YAAY;CAC9C,OAAO;CACP,SAAS;CACT,aAAa;CACb,MAAM;CACP,CAAC;AAEF,WAAW,cAAc"}
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"}
package/dist/components/badge/BadgeText.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BadgeText.js","names":[],"sources":["../../../src/components/badge/BadgeText.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '~/components/text/Text'\nimport { styled } from '~/styled'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { useResizeObserver } from '~/utilities/hooks/useResizeObserver'\nimport { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nimport { BadgeContext } from './Badge.context'\n\n/*\n * Instead of sticking a resize observer on every `BadgeText`\n * regardless of overflow type, split the resize logic into a component.\n * Basically call the hook conditionally, only for the version with\n * the `overflow === 'ellipsis'` which needs it.\n * This saves us from initialising a resize observer for any badge which doesn't need it.\n */\nconst ObserveBadgeTextOverflow: React.VFC<{ elRef: HTMLElement | null }> = ({\n elRef\n}) => {\n const { setIsOverflowing } = React.useContext(BadgeContext)\n\n useResizeObserver({\n delay: 0,\n elements: [elRef],\n onResize: () => {\n if (!elRef?.scrollWidth || !elRef?.clientWidth) return\n setIsOverflowing?.(elRef.scrollWidth > elRef.clientWidth)\n }\n })\n\n return null\n}\n\nconst StyledBadgeText = styled(Text, {\n base: ['py-0.5', 'capsize-none'],\n variants: {\n overflow: {\n ellipsis: ['overflow-x-hidden', 'text-ellipsis', 'whitespace-nowrap'],\n wrap: ['whitespace-normal']\n }\n }\n})\n\ntype TBadgeTextProps = React.ComponentProps<typeof StyledBadgeText>\n\nconst toTextSize = {\n xs: 'sm',\n sm: 'md',\n md: 'md'\n}\n\nexport const BadgeText = ({\n children,\n ...rest\n}: TBadgeTextProps): JSX.Element => {\n // We need the return type here. Otherwise typsecript breaks when this type is used in Badge. Do not remove unless you want to tackle that issue again.\n const { size: badgeSize, overflow } = React.useContext(BadgeContext)\n\n const size = React.useMemo(\n () => overrideStyledVariantValue(badgeSize, (s) => toTextSize[s]),\n [badgeSize]\n )\n\n const [elRef, setElRef] = useCallbackRefState()\n\n return (\n <>\n {overflow === 'ellipsis' && <ObserveBadgeTextOverflow elRef={elRef} />}\n <StyledBadgeText\n size={size}\n overflow={overflow}\n ref={setElRef}\n {...rest}\n >\n {children}\n </StyledBadgeText>\n </>\n )\n}\n"],"mappings":";;;;;;;;AAiBA,IAAM,4BAAsE,EAC1E,YACI;CACJ,MAAM,EAAE,qBAAqB,QAAM,WAAW,aAAa;AAE3D,mBAAkB;EAChB,OAAO;EACP,UAAU,CAAC,MAAM;EACjB,gBAAgB;AACd,OAAI,CAAC,OAAO,eAAe,CAAC,OAAO,YAAa;AAChD,sBAAmB,MAAM,cAAc,MAAM,YAAY;;EAE5D,CAAC;AAEF,QAAO;;AAGT,IAAM,kBAAkB,OAAO,MAAM;CACnC,MAAM,CAAC,UAAU,eAAe;CAChC,UAAU,EACR,UAAU;EACR,UAAU;GAAC;GAAqB;GAAiB;GAAoB;EACrE,MAAM,CAAC,oBAAoB;EAC5B,EACF;CACF,CAAC;AAIF,IAAM,aAAa;CACjB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,IAAa,aAAa,EACxB,UACA,GAAG,WAC+B;CAElC,MAAM,EAAE,MAAM,WAAW,aAAa,QAAM,WAAW,aAAa;CAEpE,MAAM,OAAO,QAAM,cACX,2BAA2B,YAAY,MAAM,WAAW,GAAG,EACjE,CAAC,UAAU,CACZ;CAED,MAAM,CAAC,OAAO,YAAY,qBAAqB;AAE/C,QACE,wBAAA,cAAA,QAAA,UAAA,MACG,aAAa,cAAc,wBAAA,cAAC,0BAAD,EAAiC,OAAS,CAAA,EACtE,wBAAA,cAAC,iBAAD;EACQ;EACI;EACV,KAAK;EACL,GAAI;EAGY,EADf,SACe,CACjB"}
1
+ {"version":3,"file":"BadgeText.js","names":[],"sources":["../../../src/components/badge/BadgeText.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '~/components/text/Text'\nimport { styled } from '~/styled'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { useResizeObserver } from '~/utilities/hooks/useResizeObserver'\nimport { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nimport { BadgeContext } from './Badge.context'\n\n/*\n * Instead of sticking a resize observer on every `BadgeText`\n * regardless of overflow type, split the resize logic into a component.\n * Basically call the hook conditionally, only for the version with\n * the `overflow === 'ellipsis'` which needs it.\n * This saves us from initialising a resize observer for any badge which doesn't need it.\n */\nconst ObserveBadgeTextOverflow: React.VFC<{ elRef: HTMLElement | null }> = ({\n elRef\n}) => {\n const { setIsOverflowing } = React.useContext(BadgeContext)\n\n useResizeObserver({\n delay: 0,\n elements: [elRef],\n onResize: () => {\n if (!elRef?.scrollWidth || !elRef?.clientWidth) return\n setIsOverflowing?.(elRef.scrollWidth > elRef.clientWidth)\n }\n })\n\n return null\n}\n\nconst StyledBadgeText = styled(Text, {\n base: ['py-0.5', 'capsize-none'],\n variants: {\n overflow: {\n ellipsis: ['overflow-x-hidden', 'text-ellipsis', 'whitespace-nowrap'],\n wrap: ['whitespace-normal']\n }\n }\n})\n\ntype TBadgeTextProps = React.ComponentProps<typeof StyledBadgeText>\n\nconst toTextSize = {\n xs: 'sm',\n sm: 'md',\n md: 'md'\n}\n\nexport const BadgeText = ({\n children,\n ...rest\n}: TBadgeTextProps): JSX.Element => {\n // We need the return type here. Otherwise typsecript breaks when this type is used in Badge. Do not remove unless you want to tackle that issue again.\n const { size: badgeSize, overflow } = React.useContext(BadgeContext)\n\n const size = React.useMemo(\n () => overrideStyledVariantValue(badgeSize, (s) => toTextSize[s]),\n [badgeSize]\n )\n\n const [elRef, setElRef] = useCallbackRefState()\n\n return (\n <>\n {overflow === 'ellipsis' && <ObserveBadgeTextOverflow elRef={elRef} />}\n <StyledBadgeText size={size} overflow={overflow} ref={setElRef} {...rest}>\n {children}\n </StyledBadgeText>\n </>\n )\n}\n"],"mappings":";;;;;;;;AAiBA,IAAM,4BAAsE,EAC1E,YACI;CACJ,MAAM,EAAE,qBAAqB,QAAM,WAAW,aAAa;AAE3D,mBAAkB;EAChB,OAAO;EACP,UAAU,CAAC,MAAM;EACjB,gBAAgB;AACd,OAAI,CAAC,OAAO,eAAe,CAAC,OAAO,YAAa;AAChD,sBAAmB,MAAM,cAAc,MAAM,YAAY;;EAE5D,CAAC;AAEF,QAAO;;AAGT,IAAM,kBAAkB,OAAO,MAAM;CACnC,MAAM,CAAC,UAAU,eAAe;CAChC,UAAU,EACR,UAAU;EACR,UAAU;GAAC;GAAqB;GAAiB;GAAoB;EACrE,MAAM,CAAC,oBAAoB;EAC5B,EACF;CACF,CAAC;AAIF,IAAM,aAAa;CACjB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,IAAa,aAAa,EACxB,UACA,GAAG,WAC+B;CAElC,MAAM,EAAE,MAAM,WAAW,aAAa,QAAM,WAAW,aAAa;CAEpE,MAAM,OAAO,QAAM,cACX,2BAA2B,YAAY,MAAM,WAAW,GAAG,EACjE,CAAC,UAAU,CACZ;CAED,MAAM,CAAC,OAAO,YAAY,qBAAqB;AAE/C,QACE,wBAAA,cAAA,QAAA,UAAA,MACG,aAAa,cAAc,wBAAA,cAAC,0BAAD,EAAiC,OAAS,CAAA,EACtE,wBAAA,cAAC,iBAAD;EAAuB;EAAgB;EAAU,KAAK;EAAU,GAAI;EAElD,EADf,SACe,CACjB"}
package/dist/components/chip/Chip.d.ts CHANGED
@@ -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>> & {
package/dist/components/chip/Chip.js CHANGED
@@ -56,26 +56,36 @@ var StyledRoot = styled("div", {
56
56
  "disabled:opacity-30",
57
57
  "disabled:pointer-events-none"
58
58
  ],
59
- variants: { size: {
60
- sm: [
61
- "h-6",
62
- "text-sm",
63
- "leading-[1.53]",
64
- "capsize-[0.4056]"
65
- ],
66
- md: [
67
- "h-8",
68
- "text-sm",
69
- "leading-[1.53]",
70
- "capsize-[0.4056]"
71
- ],
72
- lg: [
73
- "h-10",
74
- "text-md",
75
- "leading-normal",
76
- "capsize-[0.3864]"
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 }) => {
package/dist/components/chip/Chip.js.map CHANGED
@@ -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,EACR,MAAM;EACJ,IAAI;GAAC;GAAO;GAAW;GAAkB;GAAmB;EAC5D,IAAI;GAAC;GAAO;GAAW;GAAkB;GAAmB;EAC5D,IAAI;GAAC;GAAQ;GAAW;GAAkB;GAAmB;EAC9D,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"}
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"}
package/dist/components/chip-dismissible-group/ChipDismissibleGroupItem.d.ts CHANGED
@@ -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> & {
package/dist/components/chip-toggle-group/ChipToggleGroupItem.d.ts CHANGED
@@ -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>, never> & {
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 {};
package/dist/components/chip-toggle-group/ChipToggleGroupItem.js CHANGED
@@ -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, { base: [
10
- "flex",
11
- "not-disabled:cursor-pointer",
12
- "not-disabled:data-[state=on]:hover:bg-white",
13
- "not-disabled:data-[state=on]:hover:text-primary-1000",
14
- "not-disabled:focus-visible:outline-none",
15
- "not-disabled:focus-visible:relative",
16
- "not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]",
17
- "not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]",
18
- "not-disabled:focus-visible:z-1",
19
- "not-disabled:hover:bg-grey-200",
20
- "not-disabled:hover:border-current",
21
- "not-disabled:hover:text-grey-1000",
22
- "data-[state=off]:bg-white",
23
- "data-[state=off]:border-grey-600",
24
- "data-[state=off]:text-grey-800",
25
- "data-[state=on]:[&_svg]:block"
26
- ] });
27
- var ChipToggleGroupItem = ({ size = "md", children, ...rest }) => {
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, { as: "button" }, /* @__PURE__ */ React$1.createElement(StyledChipToggleIcon, {
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)));
package/dist/components/chip-toggle-group/ChipToggleGroupItem.js.map CHANGED
@@ -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,EAC7C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAKF,IAAa,uBAAuB,EAClC,OAAO,MACP,UACA,GAAG,WACuB;AAC1B,QACE,wBAAA,cAAC,YAAY,MAAb;EAAkB,GAAI;EAAM,SAAA;EAKT,EAJjB,wBAAA,cAAC,2BAAD,EAA2B,IAAG,UAGF,EAF1B,wBAAA,cAAC,sBAAD;EAAsB,IAAI;EAAI,MAAM,SAAS,OAAO,OAAO;EAAQ,CAAA,EACnE,wBAAA,cAAC,KAAK,SAAA,MAAS,SAAwB,CACb,CACX"}
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"}
package/dist/components/segmented-control/SegmentedControlItem.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SegmentedControlItem.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlItem.tsx"],"sourcesContent":["import { Trigger } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledItem = styled(\n Trigger,\n {\n base: [\n 'relative',\n 'bg-transparent',\n 'rounded-md',\n 'z-2',\n 'min-w-35',\n 'border-2',\n 'border-transparent',\n 'cursor-pointer',\n 'select-none',\n 'flex',\n 'flex-col',\n 'items-center',\n 'justify-center',\n 'data-[state=active]:border-2',\n 'data-[state=active]:border-transparent',\n 'data-[state=active]:focus-visible:border-primary-800',\n 'data-[state=active]:focus-visible:shadow-none',\n 'data-[state=active]:font-semibold',\n 'data-[state=active]:shadow-none',\n 'data-[state=active]:text-(--text-bold)',\n 'data-[state=inactive]:font-normal',\n 'data-[state=inactive]:text-grey-900',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30',\n 'focus-visible:outline-none'\n ],\n variants: {\n theme: {\n primary: [\n 'data-[state=inactive]:hover:bg-primary-300',\n 'focus-visible:border-primary-800'\n ],\n marsh: [\n 'data-[state=inactive]:hover:bg-marsh-300',\n 'focus-visible:border-marsh-800'\n ]\n },\n size: {\n sm: ['flex-[unset]', 'gap-3', 'px-6', 'py-4'],\n md: ['flex-1', 'gap-4', 'px-4', 'py-6'],\n lg: ['flex-1', 'gap-4', 'px-4', 'py-6']\n }\n },\n defaultVariants: {\n size: 'md',\n theme: 'primary'\n }\n },\n { enabledResponsiveVariants: true }\n)\n\nexport const SegmentedControlItem = React.forwardRef<\n HTMLButtonElement,\n Omit<React.ComponentProps<typeof StyledItem>, 'size'>\n>(({ children, ...props }, ref) => {\n const { size, theme } = React.useContext(SegmentedControlContext)\n// console.log({size})\n return (\n <StyledItem {...props} theme={theme} size={size} ref={ref}>\n {children}\n </StyledItem>\n )\n})\n\nSegmentedControlItem.displayName = 'SegmentedControlItem'\n"],"mappings":";;;;;AAOA,IAAM,aAAa,OACjB,SACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,OAAO;GACL,SAAS,CACP,8CACA,mCACD;GACD,OAAO,CACL,4CACA,iCACD;GACF;EACD,MAAM;GACJ,IAAI;IAAC;IAAgB;IAAS;IAAQ;IAAO;GAC7C,IAAI;IAAC;IAAU;IAAS;IAAQ;IAAO;GACvC,IAAI;IAAC;IAAU;IAAS;IAAQ;IAAO;GACxC;EACF;CACD,iBAAiB;EACf,MAAM;EACN,OAAO;EACR;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAED,IAAa,uBAAuB,QAAM,YAGvC,EAAE,UAAU,GAAG,SAAS,QAAQ;CACjC,MAAM,EAAE,MAAM,UAAU,QAAM,WAAW,wBAAwB;AAEjE,QACE,wBAAA,cAAC,YAAD;EAAY,GAAI;EAAc;EAAa;EAAW;EAEzC,EADV,SACU;EAEf;AAEF,qBAAqB,cAAc"}
1
+ {"version":3,"file":"SegmentedControlItem.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlItem.tsx"],"sourcesContent":["import { Trigger } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledItem = styled(\n Trigger,\n {\n base: [\n 'relative',\n 'bg-transparent',\n 'rounded-md',\n 'z-2',\n 'min-w-35',\n 'border-2',\n 'border-transparent',\n 'cursor-pointer',\n 'select-none',\n 'flex',\n 'flex-col',\n 'items-center',\n 'justify-center',\n 'data-[state=active]:border-2',\n 'data-[state=active]:border-transparent',\n 'data-[state=active]:focus-visible:border-primary-800',\n 'data-[state=active]:focus-visible:shadow-none',\n 'data-[state=active]:font-semibold',\n 'data-[state=active]:shadow-none',\n 'data-[state=active]:text-(--text-bold)',\n 'data-[state=inactive]:font-normal',\n 'data-[state=inactive]:text-grey-900',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30',\n 'focus-visible:outline-none'\n ],\n variants: {\n theme: {\n primary: [\n 'data-[state=inactive]:hover:bg-primary-300',\n 'focus-visible:border-primary-800'\n ],\n marsh: [\n 'data-[state=inactive]:hover:bg-marsh-300',\n 'focus-visible:border-marsh-800'\n ]\n },\n size: {\n sm: ['flex-[unset]', 'gap-3', 'px-6', 'py-4'],\n md: ['flex-1', 'gap-4', 'px-4', 'py-6'],\n lg: ['flex-1', 'gap-4', 'px-4', 'py-6']\n }\n },\n defaultVariants: {\n size: 'md',\n theme: 'primary'\n }\n },\n { enabledResponsiveVariants: true }\n)\n\nexport const SegmentedControlItem = React.forwardRef<\n HTMLButtonElement,\n Omit<React.ComponentProps<typeof StyledItem>, 'size'>\n>(({ children, ...props }, ref) => {\n const { size, theme } = React.useContext(SegmentedControlContext)\n\n return (\n <StyledItem {...props} theme={theme} size={size} ref={ref}>\n {children}\n </StyledItem>\n )\n})\n\nSegmentedControlItem.displayName = 'SegmentedControlItem'\n"],"mappings":";;;;;AAOA,IAAM,aAAa,OACjB,SACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,OAAO;GACL,SAAS,CACP,8CACA,mCACD;GACD,OAAO,CACL,4CACA,iCACD;GACF;EACD,MAAM;GACJ,IAAI;IAAC;IAAgB;IAAS;IAAQ;IAAO;GAC7C,IAAI;IAAC;IAAU;IAAS;IAAQ;IAAO;GACvC,IAAI;IAAC;IAAU;IAAS;IAAQ;IAAO;GACxC;EACF;CACD,iBAAiB;EACf,MAAM;EACN,OAAO;EACR;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAED,IAAa,uBAAuB,QAAM,YAGvC,EAAE,UAAU,GAAG,SAAS,QAAQ;CACjC,MAAM,EAAE,MAAM,UAAU,QAAM,WAAW,wBAAwB;AAEjE,QACE,wBAAA,cAAC,YAAD;EAAY,GAAI;EAAc;EAAa;EAAW;EAEzC,EADV,SACU;EAEf;AAEF,qBAAqB,cAAc"}