@atom-learning/components 6.6.0-beta.4 → 6.6.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.d.ts +6 -4
- package/dist/components/avatar/Avatar.js +72 -26
- package/dist/components/avatar/Avatar.js.map +1 -1
- package/dist/components/badge/BadgeText.js.map +1 -1
- package/dist/components/pagination/Pagination.d.ts +1 -1
- package/dist/components/pagination/Pagination.js +3 -3
- package/dist/components/pagination/Pagination.js.map +1 -1
- package/dist/components/segmented-control/SegmentedControlItem.js.map +1 -1
- package/dist/components/tree/TreeText.js +2 -2
- package/dist/components/tree/TreeText.js.map +1 -1
- package/dist/docgen.json +1 -1
- package/dist/index.cjs.js +76 -31
- package/dist/index.cjs.js.map +1 -1
- package/package.json +2 -3
|
@@ -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 }: {
|
|
@@ -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-
|
|
18
|
+
"bg-(--bg-color)",
|
|
18
19
|
"overflow-hidden"
|
|
19
20
|
];
|
|
20
21
|
var StyledDiv = styled("div", {
|
|
21
22
|
base: avatarRootStyles,
|
|
22
|
-
variants: {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
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: {
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
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
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
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,
|
|
@@ -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-
|
|
1
|
+
{"version":3,"file":"Avatar.js","names":[],"sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport clsx from 'clsx'\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 = ({ emphasis, name }: 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(\n disabled ? 'cursor-auto' : 'cursor-pointer',\n )}\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 {children}\n </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":";;;;;;;;;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,EAAE,UAAU,WAAoD;AAC1F,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,QACA,wBAAA,cAAC,oBAAD;EAA0B;EAAY;EA0BjB,EAzBlB,UACC,wBAAA,cAAC,cAAD;EACQ;EACN,OAAO,EACL,cAAc,iBACf;EACS;EACV,SAAS,WAAW,KAAA,IAAY;EAChC,WAAW,KACT,WAAW,gBAAgB,iBAC5B;EACS;EAGG,EADZ,SACY,GAEf,wBAAA,cAAC,WAAD;EACQ;EACN,OAAO,EACL,cAAc,iBACf;EACS;EAEA,EADP,SACO,CAEK;;AAGvB,IAAa,SAAS,OAAO,OAAO,YAAY;CAC9C,OAAO;CACP,SAAS;CACT,aAAa;CACb,MAAM;CACP,CAAC;AAEF,WAAW,cAAc"}
|
|
@@ -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
|
|
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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import type { PaginationProps } from './types';
|
|
3
3
|
export declare const Pagination: {
|
|
4
|
-
({ colorScheme, onSelectedPageChange, selectedPage, visibleElementsCount, pagesCount, indicatedPages, disabledPages, onItemHover, labels, children, ...rest }: PaginationProps): React.JSX.Element | null;
|
|
4
|
+
({ colorScheme, onSelectedPageChange, selectedPage, visibleElementsCount, pagesCount, indicatedPages, disabledPages, onItemHover, labels, children, className, ...rest }: PaginationProps): React.JSX.Element | null;
|
|
5
5
|
displayName: string;
|
|
6
6
|
} & {
|
|
7
7
|
Popover: ({ children }: React.PropsWithChildren<unknown>) => React.JSX.Element;
|
|
@@ -6,7 +6,7 @@ import { PaginationItems } from "./PaginationItems.js";
|
|
|
6
6
|
import clsx from "clsx";
|
|
7
7
|
import * as React$1 from "react";
|
|
8
8
|
//#region src/components/pagination/Pagination.tsx
|
|
9
|
-
var PaginationComponent = ({ colorScheme, onSelectedPageChange, selectedPage, visibleElementsCount = VisibleElementsAmount.LESS, pagesCount, indicatedPages = [], disabledPages = [], onItemHover = () => null, labels = {}, children, ...rest }) => {
|
|
9
|
+
var PaginationComponent = ({ colorScheme, onSelectedPageChange, selectedPage, visibleElementsCount = VisibleElementsAmount.LESS, pagesCount, indicatedPages = [], disabledPages = [], onItemHover = () => null, labels = {}, children, className, ...rest }) => {
|
|
10
10
|
if (!pagesCount) return null;
|
|
11
11
|
const paginationProviderProps = {
|
|
12
12
|
onSelectedPageChange,
|
|
@@ -24,8 +24,8 @@ var PaginationComponent = ({ colorScheme, onSelectedPageChange, selectedPage, vi
|
|
|
24
24
|
...colorScheme,
|
|
25
25
|
asChild: true
|
|
26
26
|
}, /* @__PURE__ */ React$1.createElement("div", {
|
|
27
|
-
|
|
28
|
-
|
|
27
|
+
...rest,
|
|
28
|
+
className: clsx("flex", "gap-1", className)
|
|
29
29
|
}, children || /* @__PURE__ */ React$1.createElement(PaginationItems, null))));
|
|
30
30
|
};
|
|
31
31
|
var Pagination = Object.assign(PaginationComponent, { Popover: PaginationPopover });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.js","names":[],"sources":["../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { ColorScheme } from '../../experiments/color-scheme/ColorScheme'\nimport { PaginationProvider } from './pagination-context/PaginationContext'\nimport { VisibleElementsAmount } from './pagination.constants'\nimport { PaginationItems } from './PaginationItems'\nimport { PaginationPopover } from './PaginationPopover'\nimport type { PaginationProps, PaginationProviderProps } from './types'\n\nconst PaginationComponent = ({\n colorScheme,\n onSelectedPageChange,\n selectedPage,\n visibleElementsCount = VisibleElementsAmount.LESS,\n pagesCount,\n indicatedPages = [],\n disabledPages = [],\n onItemHover = () => null,\n labels = {},\n children,\n ...rest\n}: PaginationProps) => {\n if (!pagesCount) return null\n\n const paginationProviderProps: PaginationProviderProps = {\n onSelectedPageChange,\n selectedPage,\n visibleElementsCount,\n pagesCount,\n indicatedPages,\n disabledPages,\n onItemHover,\n labels\n }\n\n return (\n <PaginationProvider {...paginationProviderProps}>\n <ColorScheme base=\"grey1\" accent=\"primary1\" {...colorScheme} asChild>\n <div className={clsx('flex', 'gap-1',
|
|
1
|
+
{"version":3,"file":"Pagination.js","names":[],"sources":["../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { ColorScheme } from '../../experiments/color-scheme/ColorScheme'\nimport { PaginationProvider } from './pagination-context/PaginationContext'\nimport { VisibleElementsAmount } from './pagination.constants'\nimport { PaginationItems } from './PaginationItems'\nimport { PaginationPopover } from './PaginationPopover'\nimport type { PaginationProps, PaginationProviderProps } from './types'\n\nconst PaginationComponent = ({\n colorScheme,\n onSelectedPageChange,\n selectedPage,\n visibleElementsCount = VisibleElementsAmount.LESS,\n pagesCount,\n indicatedPages = [],\n disabledPages = [],\n onItemHover = () => null,\n labels = {},\n children,\n className,\n ...rest\n}: PaginationProps) => {\n if (!pagesCount) return null\n\n const paginationProviderProps: PaginationProviderProps = {\n onSelectedPageChange,\n selectedPage,\n visibleElementsCount,\n pagesCount,\n indicatedPages,\n disabledPages,\n onItemHover,\n labels\n }\n\n return (\n <PaginationProvider {...paginationProviderProps}>\n <ColorScheme base=\"grey1\" accent=\"primary1\" {...colorScheme} asChild>\n <div {...rest} className={clsx('flex', 'gap-1', className)}>\n {children || <PaginationItems />}\n </div>\n </ColorScheme>\n </PaginationProvider>\n )\n}\n\nexport const Pagination = Object.assign(PaginationComponent, {\n Popover: PaginationPopover\n})\n\nPaginationComponent.displayName = 'Pagination'\n"],"mappings":";;;;;;;;AAUA,IAAM,uBAAuB,EAC3B,aACA,sBACA,cACA,uBAAuB,sBAAsB,MAC7C,YACA,iBAAiB,EAAE,EACnB,gBAAgB,EAAE,EAClB,oBAAoB,MACpB,SAAS,EAAE,EACX,UACA,WACA,GAAG,WACkB;AACrB,KAAI,CAAC,WAAY,QAAO;CAExB,MAAM,0BAAmD;EACvD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;AAED,QACE,wBAAA,cAAC,oBAAuB,yBACtB,wBAAA,cAAC,aAAD;EAAa,MAAK;EAAQ,QAAO;EAAW,GAAI;EAAa,SAAA;EAI/C,EAHZ,wBAAA,cAAC,OAAD;EAAK,GAAI;EAAM,WAAW,KAAK,QAAQ,SAAS,UAAU;EAEpD,EADH,YAAY,wBAAA,cAAC,iBAAA,KAAkB,CAC5B,CACM,CACK;;AAIzB,IAAa,aAAa,OAAO,OAAO,qBAAqB,EAC3D,SAAS,mBACV,CAAC;AAEF,oBAAoB,cAAc"}
|
|
@@ -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
|
|
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"}
|
|
@@ -4,9 +4,9 @@ import React from "react";
|
|
|
4
4
|
//#region src/components/tree/TreeText.tsx
|
|
5
5
|
var TreeText = (props) => /* @__PURE__ */ React.createElement(Text, {
|
|
6
6
|
as: "span",
|
|
7
|
+
...props,
|
|
7
8
|
className: clsx("py-0.5", "whitespace-nowrap", "overflow-x-hidden", "text-ellipsis", props.className),
|
|
8
|
-
size: "md"
|
|
9
|
-
...props
|
|
9
|
+
size: "md"
|
|
10
10
|
});
|
|
11
11
|
//#endregion
|
|
12
12
|
export { TreeText };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TreeText.js","names":[],"sources":["../../../src/components/tree/TreeText.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { Text } from '~/components/text/Text'\n\ntype TStyledTreeTextProps = React.ComponentProps<typeof Text>\n\nexport const TreeText = (props: TStyledTreeTextProps): JSX.Element => (\n <Text\n as=\"span\"\n className={clsx(\n 'py-0.5',\n 'whitespace-nowrap',\n 'overflow-x-hidden',\n 'text-ellipsis',\n props.className\n )}\n size=\"md\"\n
|
|
1
|
+
{"version":3,"file":"TreeText.js","names":[],"sources":["../../../src/components/tree/TreeText.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { Text } from '~/components/text/Text'\n\ntype TStyledTreeTextProps = React.ComponentProps<typeof Text>\n\nexport const TreeText = (props: TStyledTreeTextProps): JSX.Element => (\n <Text\n as=\"span\"\n {...props}\n className={clsx(\n 'py-0.5',\n 'whitespace-nowrap',\n 'overflow-x-hidden',\n 'text-ellipsis',\n props.className\n )}\n size=\"md\"\n />\n)\n"],"mappings":";;;;AAOA,IAAa,YAAY,UACvB,sBAAA,cAAC,MAAD;CACE,IAAG;CACH,GAAI;CACJ,WAAW,KACT,UACA,qBACA,qBACA,iBACA,MAAM,UACP;CACD,MAAK;CACL,CAAA"}
|