@atom-learning/components 11.4.0 → 11.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/badge/Badge.colorscheme.config.d.ts +10 -0
- package/dist/components/badge/Badge.colorscheme.config.js +2 -1
- package/dist/components/badge/Badge.colorscheme.config.js.map +1 -1
- package/dist/components/select-menu/SelectMenu.context.d.ts +1 -0
- package/dist/components/select-menu/SelectMenu.context.js +2 -1
- package/dist/components/select-menu/SelectMenu.context.js.map +1 -1
- package/dist/components/select-menu/SelectMenu.d.ts +5 -2
- package/dist/components/select-menu/SelectMenu.js +3 -1
- package/dist/components/select-menu/SelectMenu.js.map +1 -1
- package/dist/components/select-menu/SelectMenuContent.js +23 -12
- package/dist/components/select-menu/SelectMenuContent.js.map +1 -1
- package/dist/components/select-menu/SelectMenuItem.js +30 -19
- package/dist/components/select-menu/SelectMenuItem.js.map +1 -1
- package/dist/components/select-menu/SelectMenuLabel.js +10 -6
- package/dist/components/select-menu/SelectMenuLabel.js.map +1 -1
- package/dist/components/select-menu/SelectMenuSeparator.d.ts +6 -1
- package/dist/components/select-menu/SelectMenuSeparator.js +22 -6
- package/dist/components/select-menu/SelectMenuSeparator.js.map +1 -1
- package/dist/components/select-menu/SelectMenuTrigger.js +29 -8
- package/dist/components/select-menu/SelectMenuTrigger.js.map +1 -1
- package/dist/components/toggle-group/ToggleGroupButton.d.ts +3 -2
- package/dist/components/toggle-group/ToggleGroupButton.js +30 -3
- package/dist/components/toggle-group/ToggleGroupButton.js.map +1 -1
- package/dist/components/toggle-group/ToggleGroupItem.d.ts +3 -0
- package/dist/components/toggle-group/ToggleGroupItem.js +39 -14
- package/dist/components/toggle-group/ToggleGroupItem.js.map +1 -1
- package/dist/components/toggle-group/ToggleGroupRoot.d.ts +2 -1
- package/dist/components/toggle-group/ToggleGroupRoot.js +18 -2
- package/dist/components/toggle-group/ToggleGroupRoot.js.map +1 -1
- package/dist/components/toggle-group/index.d.ts +3 -2
- package/dist/docgen.json +1 -1
- package/dist/index.cjs.js +209 -79
- package/dist/index.cjs.js.map +1 -1
- package/package.json +2 -2
- package/src/responsive-variant-classes.css +1 -1
|
@@ -195,4 +195,14 @@ export declare const colorSchemes: {
|
|
|
195
195
|
'--background-bold-hover': string;
|
|
196
196
|
'--text-on-white': string;
|
|
197
197
|
};
|
|
198
|
+
emerald: {
|
|
199
|
+
'--text-subtle': string;
|
|
200
|
+
'--background-subtle': string;
|
|
201
|
+
'--text-subtle-hover': string;
|
|
202
|
+
'--background-subtle-hover': string;
|
|
203
|
+
'--text-bold': string;
|
|
204
|
+
'--background-bold': string;
|
|
205
|
+
'--background-bold-hover': string;
|
|
206
|
+
'--text-on-white': string;
|
|
207
|
+
};
|
|
198
208
|
};
|
|
@@ -91,7 +91,8 @@ var colorSchemes = {
|
|
|
91
91
|
"--text-on-white": "var(--color-lapis-700)"
|
|
92
92
|
}),
|
|
93
93
|
maroon: createScheme("maroon", { "--text-on-white": "var(--color-maroon-700)" }),
|
|
94
|
-
marsh: createScheme("marsh", { "--text-on-white": "var(--color-marsh-700)" })
|
|
94
|
+
marsh: createScheme("marsh", { "--text-on-white": "var(--color-marsh-700)" }),
|
|
95
|
+
emerald: createScheme("emerald")
|
|
95
96
|
};
|
|
96
97
|
//#endregion
|
|
97
98
|
export { badgeSemanticNames, colorSchemes };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.colorscheme.config.js","names":[],"sources":["../../../src/components/badge/Badge.colorscheme.config.ts"],"sourcesContent":["/*\n\t•\tFactory for non-semantic color schemes\n*/\nconst createScheme = (c: string, overrides: Record<string, string> = {}) => ({\n '--text-subtle': `var(--color-${c}-1000)`,\n '--background-subtle': `var(--color-${c}-200)`,\n '--text-subtle-hover': `var(--color-${c}-1100)`,\n '--background-subtle-hover': `var(--color-${c}-300)`,\n '--text-bold': 'white',\n '--background-bold': `var(--color-${c}-800)`,\n '--background-bold-hover': `var(--color-${c}-900)`,\n '--text-on-white': `var(--color-${c}-800)`,\n ...overrides\n})\n\n/*\n\t•\tSemantic themes\n*/\nconst info = {\n '--text-subtle': 'var(--color-info-mid)',\n '--background-subtle': 'var(--color-info-light)',\n '--text-bold': 'white',\n '--background-bold': 'var(--color-info)',\n '--text-on-white': 'var(--color-info)'\n}\nconst neutral = {\n '--text-subtle': 'var(--color-grey-900)',\n '--background-subtle': 'var(--color-grey-100)',\n '--text-bold': 'white',\n '--background-bold': 'var(--color-grey-800)',\n '--text-on-white': 'var(--color-grey-800)'\n}\nconst success = {\n '--text-subtle': 'var(--color-success-mid)',\n '--background-subtle': 'var(--color-success-light)',\n '--text-bold': 'white',\n '--background-bold': 'var(--color-success)',\n '--text-on-white': 'var(--color-success)'\n}\nconst danger = {\n '--text-subtle': 'var(--color-danger-mid)',\n '--background-subtle': 'var(--color-danger-light)',\n '--text-bold': 'white',\n '--background-bold': 'var(--color-danger)',\n '--text-on-white': 'var(--color-danger)'\n}\nconst warning = {\n '--text-subtle': 'var(--color-warning-text)',\n '--background-subtle': 'var(--color-warning-light)',\n '--text-bold': 'var(--color-grey-1000)',\n '--background-bold': 'var(--color-warning)',\n '--text-on-white': 'var(--color-warning)'\n}\n\n/*\n\t•\tNon-semantic themes\n*/\nexport const badgeSemanticNames = [\n 'info',\n 'neutral',\n 'success',\n 'danger',\n 'warning'\n]\nexport const colorSchemes = {\n info,\n neutral,\n success,\n danger,\n warning,\n primary: createScheme('primary'),\n grey: createScheme('grey'),\n blue: createScheme('blue'),\n pink: createScheme('pink'),\n purple: createScheme('purple', {\n '--text-on-white': 'var(--color-purple-700)'\n }),\n cyan: createScheme('cyan'),\n green: createScheme('green'),\n magenta: createScheme('magenta'),\n red: createScheme('red', {\n '--background-subtle-hover': 'var(--color-red-400)'\n }),\n teal: createScheme('teal'),\n orange: createScheme('orange', {\n '--text-bold': 'var(--color-grey-1200)',\n '--background-bold': 'var(--color-orange-600)',\n '--background-bold-hover': 'var(--color-orange-700)',\n '--text-on-white': 'var(--color-orange-1000)'\n }),\n yellow: createScheme('yellow', {\n '--text-bold': 'var(--color-grey-1200)',\n '--background-bold': 'var(--color-yellow-500)',\n '--background-bold-hover': 'var(--color-yellow-600)',\n '--text-on-white': 'var(--color-yellow-900)'\n }),\n lime: createScheme('lime', {\n '--text-bold': 'var(--color-grey-1200)',\n '--background-bold': 'var(--color-lime-600)',\n '--background-bold-hover': 'var(--color-lime-700)',\n '--text-on-white': 'var(--color-lime-900)'\n }),\n lapis: createScheme('lapis', {\n '--background-bold': 'var(--color-lapis-700)',\n '--text-on-white': 'var(--color-lapis-700)'\n }),\n maroon: createScheme('maroon', {\n '--text-on-white': 'var(--color-maroon-700)'\n }),\n marsh: createScheme('marsh', { '--text-on-white': 'var(--color-marsh-700)' })\n}\n"],"mappings":";AAGA,IAAM,gBAAgB,GAAW,YAAoC,CAAC,OAAO;CAC3E,iBAAiB,eAAe,EAAE;CAClC,uBAAuB,eAAe,EAAE;CACxC,uBAAuB,eAAe,EAAE;CACxC,6BAA6B,eAAe,EAAE;CAC9C,eAAe;CACf,qBAAqB,eAAe,EAAE;CACtC,2BAA2B,eAAe,EAAE;CAC5C,mBAAmB,eAAe,EAAE;CACpC,GAAG;AACL;AAKA,IAAM,OAAO;CACX,iBAAiB;CACjB,uBAAuB;CACvB,eAAe;CACf,qBAAqB;CACrB,mBAAmB;AACrB;AACA,IAAM,UAAU;CACd,iBAAiB;CACjB,uBAAuB;CACvB,eAAe;CACf,qBAAqB;CACrB,mBAAmB;AACrB;AACA,IAAM,UAAU;CACd,iBAAiB;CACjB,uBAAuB;CACvB,eAAe;CACf,qBAAqB;CACrB,mBAAmB;AACrB;AACA,IAAM,SAAS;CACb,iBAAiB;CACjB,uBAAuB;CACvB,eAAe;CACf,qBAAqB;CACrB,mBAAmB;AACrB;AACA,IAAM,UAAU;CACd,iBAAiB;CACjB,uBAAuB;CACvB,eAAe;CACf,qBAAqB;CACrB,mBAAmB;AACrB;AAKA,IAAa,qBAAqB;CAChC;CACA;CACA;CACA;CACA;AACF;AACA,IAAa,eAAe;CAC1B;CACA;CACA;CACA;CACA;CACA,SAAS,aAAa,SAAS;CAC/B,MAAM,aAAa,MAAM;CACzB,MAAM,aAAa,MAAM;CACzB,MAAM,aAAa,MAAM;CACzB,QAAQ,aAAa,UAAU,EAC7B,mBAAmB,0BACrB,CAAC;CACD,MAAM,aAAa,MAAM;CACzB,OAAO,aAAa,OAAO;CAC3B,SAAS,aAAa,SAAS;CAC/B,KAAK,aAAa,OAAO,EACvB,6BAA6B,uBAC/B,CAAC;CACD,MAAM,aAAa,MAAM;CACzB,QAAQ,aAAa,UAAU;EAC7B,eAAe;EACf,qBAAqB;EACrB,2BAA2B;EAC3B,mBAAmB;CACrB,CAAC;CACD,QAAQ,aAAa,UAAU;EAC7B,eAAe;EACf,qBAAqB;EACrB,2BAA2B;EAC3B,mBAAmB;CACrB,CAAC;CACD,MAAM,aAAa,QAAQ;EACzB,eAAe;EACf,qBAAqB;EACrB,2BAA2B;EAC3B,mBAAmB;CACrB,CAAC;CACD,OAAO,aAAa,SAAS;EAC3B,qBAAqB;EACrB,mBAAmB;CACrB,CAAC;CACD,QAAQ,aAAa,UAAU,EAC7B,mBAAmB,0BACrB,CAAC;CACD,OAAO,aAAa,SAAS,EAAE,mBAAmB,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"Badge.colorscheme.config.js","names":[],"sources":["../../../src/components/badge/Badge.colorscheme.config.ts"],"sourcesContent":["/*\n\t•\tFactory for non-semantic color schemes\n*/\nconst createScheme = (c: string, overrides: Record<string, string> = {}) => ({\n '--text-subtle': `var(--color-${c}-1000)`,\n '--background-subtle': `var(--color-${c}-200)`,\n '--text-subtle-hover': `var(--color-${c}-1100)`,\n '--background-subtle-hover': `var(--color-${c}-300)`,\n '--text-bold': 'white',\n '--background-bold': `var(--color-${c}-800)`,\n '--background-bold-hover': `var(--color-${c}-900)`,\n '--text-on-white': `var(--color-${c}-800)`,\n ...overrides\n})\n\n/*\n\t•\tSemantic themes\n*/\nconst info = {\n '--text-subtle': 'var(--color-info-mid)',\n '--background-subtle': 'var(--color-info-light)',\n '--text-bold': 'white',\n '--background-bold': 'var(--color-info)',\n '--text-on-white': 'var(--color-info)'\n}\nconst neutral = {\n '--text-subtle': 'var(--color-grey-900)',\n '--background-subtle': 'var(--color-grey-100)',\n '--text-bold': 'white',\n '--background-bold': 'var(--color-grey-800)',\n '--text-on-white': 'var(--color-grey-800)'\n}\nconst success = {\n '--text-subtle': 'var(--color-success-mid)',\n '--background-subtle': 'var(--color-success-light)',\n '--text-bold': 'white',\n '--background-bold': 'var(--color-success)',\n '--text-on-white': 'var(--color-success)'\n}\nconst danger = {\n '--text-subtle': 'var(--color-danger-mid)',\n '--background-subtle': 'var(--color-danger-light)',\n '--text-bold': 'white',\n '--background-bold': 'var(--color-danger)',\n '--text-on-white': 'var(--color-danger)'\n}\nconst warning = {\n '--text-subtle': 'var(--color-warning-text)',\n '--background-subtle': 'var(--color-warning-light)',\n '--text-bold': 'var(--color-grey-1000)',\n '--background-bold': 'var(--color-warning)',\n '--text-on-white': 'var(--color-warning)'\n}\n\n/*\n\t•\tNon-semantic themes\n*/\nexport const badgeSemanticNames = [\n 'info',\n 'neutral',\n 'success',\n 'danger',\n 'warning'\n]\nexport const colorSchemes = {\n info,\n neutral,\n success,\n danger,\n warning,\n primary: createScheme('primary'),\n grey: createScheme('grey'),\n blue: createScheme('blue'),\n pink: createScheme('pink'),\n purple: createScheme('purple', {\n '--text-on-white': 'var(--color-purple-700)'\n }),\n cyan: createScheme('cyan'),\n green: createScheme('green'),\n magenta: createScheme('magenta'),\n red: createScheme('red', {\n '--background-subtle-hover': 'var(--color-red-400)'\n }),\n teal: createScheme('teal'),\n orange: createScheme('orange', {\n '--text-bold': 'var(--color-grey-1200)',\n '--background-bold': 'var(--color-orange-600)',\n '--background-bold-hover': 'var(--color-orange-700)',\n '--text-on-white': 'var(--color-orange-1000)'\n }),\n yellow: createScheme('yellow', {\n '--text-bold': 'var(--color-grey-1200)',\n '--background-bold': 'var(--color-yellow-500)',\n '--background-bold-hover': 'var(--color-yellow-600)',\n '--text-on-white': 'var(--color-yellow-900)'\n }),\n lime: createScheme('lime', {\n '--text-bold': 'var(--color-grey-1200)',\n '--background-bold': 'var(--color-lime-600)',\n '--background-bold-hover': 'var(--color-lime-700)',\n '--text-on-white': 'var(--color-lime-900)'\n }),\n lapis: createScheme('lapis', {\n '--background-bold': 'var(--color-lapis-700)',\n '--text-on-white': 'var(--color-lapis-700)'\n }),\n maroon: createScheme('maroon', {\n '--text-on-white': 'var(--color-maroon-700)'\n }),\n marsh: createScheme('marsh', { '--text-on-white': 'var(--color-marsh-700)' }),\n emerald: createScheme('emerald')\n}\n"],"mappings":";AAGA,IAAM,gBAAgB,GAAW,YAAoC,CAAC,OAAO;CAC3E,iBAAiB,eAAe,EAAE;CAClC,uBAAuB,eAAe,EAAE;CACxC,uBAAuB,eAAe,EAAE;CACxC,6BAA6B,eAAe,EAAE;CAC9C,eAAe;CACf,qBAAqB,eAAe,EAAE;CACtC,2BAA2B,eAAe,EAAE;CAC5C,mBAAmB,eAAe,EAAE;CACpC,GAAG;AACL;AAKA,IAAM,OAAO;CACX,iBAAiB;CACjB,uBAAuB;CACvB,eAAe;CACf,qBAAqB;CACrB,mBAAmB;AACrB;AACA,IAAM,UAAU;CACd,iBAAiB;CACjB,uBAAuB;CACvB,eAAe;CACf,qBAAqB;CACrB,mBAAmB;AACrB;AACA,IAAM,UAAU;CACd,iBAAiB;CACjB,uBAAuB;CACvB,eAAe;CACf,qBAAqB;CACrB,mBAAmB;AACrB;AACA,IAAM,SAAS;CACb,iBAAiB;CACjB,uBAAuB;CACvB,eAAe;CACf,qBAAqB;CACrB,mBAAmB;AACrB;AACA,IAAM,UAAU;CACd,iBAAiB;CACjB,uBAAuB;CACvB,eAAe;CACf,qBAAqB;CACrB,mBAAmB;AACrB;AAKA,IAAa,qBAAqB;CAChC;CACA;CACA;CACA;CACA;AACF;AACA,IAAa,eAAe;CAC1B;CACA;CACA;CACA;CACA;CACA,SAAS,aAAa,SAAS;CAC/B,MAAM,aAAa,MAAM;CACzB,MAAM,aAAa,MAAM;CACzB,MAAM,aAAa,MAAM;CACzB,QAAQ,aAAa,UAAU,EAC7B,mBAAmB,0BACrB,CAAC;CACD,MAAM,aAAa,MAAM;CACzB,OAAO,aAAa,OAAO;CAC3B,SAAS,aAAa,SAAS;CAC/B,KAAK,aAAa,OAAO,EACvB,6BAA6B,uBAC/B,CAAC;CACD,MAAM,aAAa,MAAM;CACzB,QAAQ,aAAa,UAAU;EAC7B,eAAe;EACf,qBAAqB;EACrB,2BAA2B;EAC3B,mBAAmB;CACrB,CAAC;CACD,QAAQ,aAAa,UAAU;EAC7B,eAAe;EACf,qBAAqB;EACrB,2BAA2B;EAC3B,mBAAmB;CACrB,CAAC;CACD,MAAM,aAAa,QAAQ;EACzB,eAAe;EACf,qBAAqB;EACrB,2BAA2B;EAC3B,mBAAmB;CACrB,CAAC;CACD,OAAO,aAAa,SAAS;EAC3B,qBAAqB;EACrB,mBAAmB;CACrB,CAAC;CACD,QAAQ,aAAa,UAAU,EAC7B,mBAAmB,0BACrB,CAAC;CACD,OAAO,aAAa,SAAS,EAAE,mBAAmB,yBAAyB,CAAC;CAC5E,SAAS,aAAa,SAAS;AACjC"}
|
|
@@ -2,7 +2,8 @@ import * as React$1 from "react";
|
|
|
2
2
|
//#region src/components/select-menu/SelectMenu.context.tsx
|
|
3
3
|
var SelectMenuContext = React$1.createContext({
|
|
4
4
|
size: "md",
|
|
5
|
-
theme: "grey"
|
|
5
|
+
theme: "grey",
|
|
6
|
+
colorMode: "light"
|
|
6
7
|
});
|
|
7
8
|
var useSelectMenuContext = () => React$1.use(SelectMenuContext);
|
|
8
9
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectMenu.context.js","names":[],"sources":["../../../src/components/select-menu/SelectMenu.context.tsx"],"sourcesContent":["import * as React from 'react'\n\ntype SelectMenuContextValue = {\n size: 'sm' | 'md' | 'lg'\n theme: 'white' | 'grey'\n state?: 'error'\n}\n\nexport const SelectMenuContext = React.createContext<SelectMenuContextValue>({\n size: 'md',\n theme: 'grey'\n})\n\nexport const useSelectMenuContext = () => React.use(SelectMenuContext)\n"],"mappings":";;
|
|
1
|
+
{"version":3,"file":"SelectMenu.context.js","names":[],"sources":["../../../src/components/select-menu/SelectMenu.context.tsx"],"sourcesContent":["import * as React from 'react'\n\ntype SelectMenuContextValue = {\n size: 'sm' | 'md' | 'lg'\n theme: 'white' | 'grey'\n colorMode: 'light' | 'dark'\n state?: 'error'\n}\n\nexport const SelectMenuContext = React.createContext<SelectMenuContextValue>({\n size: 'md',\n theme: 'grey',\n colorMode: 'light'\n})\n\nexport const useSelectMenuContext = () => React.use(SelectMenuContext)\n"],"mappings":";;AASA,IAAa,oBAAoB,QAAM,cAAsC;CAC3E,MAAM;CACN,OAAO;CACP,WAAW;AACb,CAAC;AAED,IAAa,6BAA6B,QAAM,IAAI,iBAAiB"}
|
|
@@ -3,11 +3,12 @@ import * as AriaComponents from 'react-aria-components';
|
|
|
3
3
|
type SelectMenuProps = Omit<AriaComponents.SelectProps<object>, 'className' | 'style' | 'children'> & {
|
|
4
4
|
size?: 'sm' | 'md' | 'lg';
|
|
5
5
|
theme?: 'white' | 'grey';
|
|
6
|
+
colorMode?: 'light' | 'dark';
|
|
6
7
|
state?: 'error';
|
|
7
8
|
className?: string;
|
|
8
9
|
children?: React.ReactNode;
|
|
9
10
|
};
|
|
10
|
-
export declare const SelectMenu: (({ size, theme, state, className, children, ...rest }: SelectMenuProps) => React.JSX.Element) & {
|
|
11
|
+
export declare const SelectMenu: (({ size, theme, colorMode, state, className, children, ...rest }: SelectMenuProps) => React.JSX.Element) & {
|
|
11
12
|
Trigger: ({ ref, placeholder, children, ...rest }: Omit<AriaComponents.ButtonProps & React.RefAttributes<HTMLButtonElement>, "aria-label" | "children"> & {
|
|
12
13
|
placeholder?: string;
|
|
13
14
|
children?: React.ReactNode;
|
|
@@ -24,6 +25,8 @@ export declare const SelectMenu: (({ size, theme, state, className, children, ..
|
|
|
24
25
|
({ className, ...rest }: AriaComponents.HeaderProps & React.RefAttributes<HTMLElement>): React.JSX.Element;
|
|
25
26
|
displayName: string;
|
|
26
27
|
};
|
|
27
|
-
Separator: import("../..").StyledComponent<(props: AriaComponents.SeparatorProps & React.RefAttributes<HTMLElement>) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null,
|
|
28
|
+
Separator: (props: Omit<React.ComponentProps<import("../..").StyledComponent<(props: AriaComponents.SeparatorProps & React.RefAttributes<HTMLElement>) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null, {
|
|
29
|
+
colorMode?: "dark" | "light" | undefined;
|
|
30
|
+
}>>, 'colorMode'>) => React.JSX.Element;
|
|
28
31
|
};
|
|
29
32
|
export {};
|
|
@@ -9,15 +9,17 @@ import * as React$1 from "react";
|
|
|
9
9
|
import { jsx } from "react/jsx-runtime";
|
|
10
10
|
import * as AriaComponents from "react-aria-components";
|
|
11
11
|
//#region src/components/select-menu/SelectMenu.tsx
|
|
12
|
-
var SelectMenuRoot = ({ size = "md", theme = "grey", state, className, children, ...rest }) => {
|
|
12
|
+
var SelectMenuRoot = ({ size = "md", theme = "grey", colorMode = "light", state, className, children, ...rest }) => {
|
|
13
13
|
return /* @__PURE__ */ jsx(SelectMenuContext, {
|
|
14
14
|
value: React$1.useMemo(() => ({
|
|
15
15
|
size,
|
|
16
16
|
theme,
|
|
17
|
+
colorMode,
|
|
17
18
|
state
|
|
18
19
|
}), [
|
|
19
20
|
size,
|
|
20
21
|
theme,
|
|
22
|
+
colorMode,
|
|
21
23
|
state
|
|
22
24
|
]),
|
|
23
25
|
children: /* @__PURE__ */ jsx(AriaComponents.Select, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectMenu.js","names":[],"sources":["../../../src/components/select-menu/SelectMenu.tsx"],"sourcesContent":["import * as React from 'react'\nimport * as AriaComponents from 'react-aria-components'\n\nimport { cn } from '../../styled'\nimport { SelectMenuContext } from './SelectMenu.context'\nimport { SelectMenuContent } from './SelectMenuContent'\nimport { SelectMenuItem } from './SelectMenuItem'\nimport { SelectMenuLabel } from './SelectMenuLabel'\nimport { SelectMenuSeparator } from './SelectMenuSeparator'\nimport { SelectMenuTrigger } from './SelectMenuTrigger'\n\ntype SelectMenuProps = Omit<\n AriaComponents.SelectProps<object>,\n 'className' | 'style' | 'children'\n> & {\n size?: 'sm' | 'md' | 'lg'\n theme?: 'white' | 'grey'\n state?: 'error'\n className?: string\n children?: React.ReactNode\n}\n\nconst SelectMenuRoot = ({\n size = 'md',\n theme = 'grey',\n state,\n className,\n children,\n ...rest\n}: SelectMenuProps) => {\n const value = React.useMemo(\n () => ({ size, theme, state }),\n [size, theme, state]\n )\n return (\n <SelectMenuContext value={value}>\n {/* w-full so the trigger fills its container even in flex/inline layouts\n (react-aria wraps the trigger in an extra div). Consumers can override\n the width — or anything else — via className, e.g. w-auto / w-64. */}\n <AriaComponents.Select className={cn('w-full', className)} {...rest}>\n {children}\n </AriaComponents.Select>\n </SelectMenuContext>\n )\n}\n\nexport const SelectMenu = /* @__PURE__ */ Object.assign(SelectMenuRoot, {\n Trigger: SelectMenuTrigger,\n Content: SelectMenuContent,\n Item: SelectMenuItem,\n Group: AriaComponents.ListBoxSection,\n Label: SelectMenuLabel,\n Separator: SelectMenuSeparator\n})\n"],"mappings":";;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"SelectMenu.js","names":[],"sources":["../../../src/components/select-menu/SelectMenu.tsx"],"sourcesContent":["import * as React from 'react'\nimport * as AriaComponents from 'react-aria-components'\n\nimport { cn } from '../../styled'\nimport { SelectMenuContext } from './SelectMenu.context'\nimport { SelectMenuContent } from './SelectMenuContent'\nimport { SelectMenuItem } from './SelectMenuItem'\nimport { SelectMenuLabel } from './SelectMenuLabel'\nimport { SelectMenuSeparator } from './SelectMenuSeparator'\nimport { SelectMenuTrigger } from './SelectMenuTrigger'\n\ntype SelectMenuProps = Omit<\n AriaComponents.SelectProps<object>,\n 'className' | 'style' | 'children'\n> & {\n size?: 'sm' | 'md' | 'lg'\n theme?: 'white' | 'grey'\n colorMode?: 'light' | 'dark'\n state?: 'error'\n className?: string\n children?: React.ReactNode\n}\n\nconst SelectMenuRoot = ({\n size = 'md',\n theme = 'grey',\n colorMode = 'light',\n state,\n className,\n children,\n ...rest\n}: SelectMenuProps) => {\n const value = React.useMemo(\n () => ({ size, theme, colorMode, state }),\n [size, theme, colorMode, state]\n )\n return (\n <SelectMenuContext value={value}>\n {/* w-full so the trigger fills its container even in flex/inline layouts\n (react-aria wraps the trigger in an extra div). Consumers can override\n the width — or anything else — via className, e.g. w-auto / w-64. */}\n <AriaComponents.Select className={cn('w-full', className)} {...rest}>\n {children}\n </AriaComponents.Select>\n </SelectMenuContext>\n )\n}\n\nexport const SelectMenu = /* @__PURE__ */ Object.assign(SelectMenuRoot, {\n Trigger: SelectMenuTrigger,\n Content: SelectMenuContent,\n Item: SelectMenuItem,\n Group: AriaComponents.ListBoxSection,\n Label: SelectMenuLabel,\n Separator: SelectMenuSeparator\n})\n"],"mappings":";;;;;;;;;;;AAuBA,IAAM,kBAAkB,EACtB,OAAO,MACP,QAAQ,QACR,YAAY,SACZ,OACA,WACA,UACA,GAAG,WACkB;CAKrB,OACE,oBAAC,mBAAD;EAA0B,OALd,QAAM,eACX;GAAE;GAAM;GAAO;GAAW;EAAM,IACvC;GAAC;GAAM;GAAO;GAAW;EAAK,CAGJ;YAIxB,oBAAC,eAAe,QAAhB;GAAuB,WAAW,GAAG,UAAU,SAAS;GAAG,GAAI;GAC5D;EACoB,CAAA;CACN,CAAA;AAEvB;AAEA,IAAa,aAA6B,uBAAO,OAAO,gBAAgB;CACtE,SAAS;CACT,SAAS;CACT,MAAM;CACN,OAAO,eAAe;CACtB,OAAO;CACP,WAAW;AACb,CAAC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { styled } from "../../styled.js";
|
|
2
|
+
import { useSelectMenuContext } from "./SelectMenu.context.js";
|
|
2
3
|
import "react";
|
|
3
4
|
import { jsx } from "react/jsx-runtime";
|
|
4
5
|
import * as AriaComponents from "react-aria-components";
|
|
@@ -12,10 +13,16 @@ var Content = styled(AriaComponents.Popover, {
|
|
|
12
13
|
"overflow-hidden",
|
|
13
14
|
"will-change-transform"
|
|
14
15
|
],
|
|
15
|
-
variants: {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
variants: {
|
|
17
|
+
colorMode: {
|
|
18
|
+
light: [],
|
|
19
|
+
dark: ["bg-grey-900"]
|
|
20
|
+
},
|
|
21
|
+
matchTriggerWidth: {
|
|
22
|
+
true: ["w-(--trigger-width)"],
|
|
23
|
+
false: ["min-w-(--trigger-width)", "max-w-[min(calc(100vw-(--spacing(4))),--spacing(100))]"]
|
|
24
|
+
}
|
|
25
|
+
}
|
|
19
26
|
}, { enablePolymorphism: false });
|
|
20
27
|
var Viewport = styled(AriaComponents.ListBox, { base: [
|
|
21
28
|
"max-h-[inherit]",
|
|
@@ -24,14 +31,18 @@ var Viewport = styled(AriaComponents.ListBox, { base: [
|
|
|
24
31
|
"p-1",
|
|
25
32
|
"outline-none"
|
|
26
33
|
] }, { enablePolymorphism: false });
|
|
27
|
-
var SelectMenuContent = ({ ref, children, offset = 4, matchTriggerWidth = false, ...rest }) =>
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
34
|
+
var SelectMenuContent = ({ ref, children, offset = 4, matchTriggerWidth = false, ...rest }) => {
|
|
35
|
+
const { colorMode } = useSelectMenuContext();
|
|
36
|
+
return /* @__PURE__ */ jsx(Content, {
|
|
37
|
+
ref,
|
|
38
|
+
offset,
|
|
39
|
+
containerPadding: 8,
|
|
40
|
+
colorMode,
|
|
41
|
+
matchTriggerWidth,
|
|
42
|
+
...rest,
|
|
43
|
+
children: /* @__PURE__ */ jsx(Viewport, { children })
|
|
44
|
+
});
|
|
45
|
+
};
|
|
35
46
|
//#endregion
|
|
36
47
|
export { SelectMenuContent };
|
|
37
48
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectMenuContent.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuContent.tsx"],"sourcesContent":["import * as React from 'react'\nimport * as AriaComponents from 'react-aria-components'\n\nimport { styled } from '../../styled'\n\nconst Content = styled(\n AriaComponents.Popover,\n {\n base: [\n 'bg-white',\n 'rounded-md',\n 'shadow-lg',\n 'z-10',\n 'overflow-hidden',\n 'will-change-transform'\n ],\n variants: {\n matchTriggerWidth: {\n // Pinned to exactly the trigger width — the dropdown never grows or\n // shrinks to its content. The trigger is on-screen, so no viewport cap\n // is needed.\n true: ['w-(--trigger-width)'],\n // Floors at the trigger width; caps at min(viewport − 8px per edge,\n // 400px) on the --spacing() scale: --spacing(4)=16px (2×8px),\n // --spacing(100)=400px.\n false: [\n 'min-w-(--trigger-width)',\n 'max-w-[min(calc(100vw-(--spacing(4))),--spacing(100))]'\n ]\n }\n }\n },\n { enablePolymorphism: false }\n)\n\nconst Viewport = styled(\n AriaComponents.ListBox,\n {\n base: ['max-h-[inherit]', 'w-full', 'overflow-auto', 'p-1', 'outline-none']\n },\n { enablePolymorphism: false }\n)\n\ntype SelectMenuContentProps = Omit<\n React.ComponentPropsWithRef<typeof AriaComponents.Popover>,\n 'children'\n> & {\n children?: React.ReactNode\n /** Pins the dropdown to the trigger's width instead of letting it grow to fit its content. */\n matchTriggerWidth?: boolean\n}\n\nexport const SelectMenuContent = ({\n ref,\n children,\n offset = 4,\n matchTriggerWidth = false,\n ...rest\n}: SelectMenuContentProps) => (\n // offset/containerPadding are react-aria positioner props in px (JS numbers,\n
|
|
1
|
+
{"version":3,"file":"SelectMenuContent.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuContent.tsx"],"sourcesContent":["import * as React from 'react'\nimport * as AriaComponents from 'react-aria-components'\n\nimport { styled } from '../../styled'\nimport { useSelectMenuContext } from './SelectMenu.context'\n\nconst Content = styled(\n AriaComponents.Popover,\n {\n base: [\n 'bg-white',\n 'rounded-md',\n 'shadow-lg',\n 'z-10',\n 'overflow-hidden',\n 'will-change-transform'\n ],\n variants: {\n colorMode: {\n light: [],\n dark: ['bg-grey-900']\n },\n matchTriggerWidth: {\n // Pinned to exactly the trigger width — the dropdown never grows or\n // shrinks to its content. The trigger is on-screen, so no viewport cap\n // is needed.\n true: ['w-(--trigger-width)'],\n // Floors at the trigger width; caps at min(viewport − 8px per edge,\n // 400px) on the --spacing() scale: --spacing(4)=16px (2×8px),\n // --spacing(100)=400px.\n false: [\n 'min-w-(--trigger-width)',\n 'max-w-[min(calc(100vw-(--spacing(4))),--spacing(100))]'\n ]\n }\n }\n },\n { enablePolymorphism: false }\n)\n\nconst Viewport = styled(\n AriaComponents.ListBox,\n {\n base: ['max-h-[inherit]', 'w-full', 'overflow-auto', 'p-1', 'outline-none']\n },\n { enablePolymorphism: false }\n)\n\ntype SelectMenuContentProps = Omit<\n React.ComponentPropsWithRef<typeof AriaComponents.Popover>,\n 'children'\n> & {\n children?: React.ReactNode\n /** Pins the dropdown to the trigger's width instead of letting it grow to fit its content. */\n matchTriggerWidth?: boolean\n}\n\nexport const SelectMenuContent = ({\n ref,\n children,\n offset = 4,\n matchTriggerWidth = false,\n ...rest\n}: SelectMenuContentProps) => {\n const { colorMode } = useSelectMenuContext()\n\n return (\n // offset/containerPadding are react-aria positioner props in px (JS numbers,\n // not CSS), so they can't use the --spacing() scale: 4px gap from the trigger,\n // 8px minimum inset from every viewport edge (the 2×8px behind the max-width).\n <Content\n ref={ref}\n offset={offset}\n containerPadding={8}\n colorMode={colorMode}\n matchTriggerWidth={matchTriggerWidth}\n {...rest}\n >\n <Viewport>{children}</Viewport>\n </Content>\n )\n}\n"],"mappings":";;;;;;AAMA,IAAM,UAAU,OACd,eAAe,SACf;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,WAAW;GACT,OAAO,CAAC;GACR,MAAM,CAAC,aAAa;EACtB;EACA,mBAAmB;GAIjB,MAAM,CAAC,qBAAqB;GAI5B,OAAO,CACL,2BACA,wDACF;EACF;CACF;AACF,GACA,EAAE,oBAAoB,MAAM,CAC9B;AAEA,IAAM,WAAW,OACf,eAAe,SACf,EACE,MAAM;CAAC;CAAmB;CAAU;CAAiB;CAAO;AAAc,EAC5E,GACA,EAAE,oBAAoB,MAAM,CAC9B;AAWA,IAAa,qBAAqB,EAChC,KACA,UACA,SAAS,GACT,oBAAoB,OACpB,GAAG,WACyB;CAC5B,MAAM,EAAE,cAAc,qBAAqB;CAE3C,OAIE,oBAAC,SAAD;EACO;EACG;EACR,kBAAkB;EACP;EACQ;EACnB,GAAI;YAEJ,oBAAC,UAAD,EAAW,SAAmB,CAAA;CACvB,CAAA;AAEb"}
|
|
@@ -24,29 +24,40 @@ var Item = styled(AriaComponents.ListBoxItem, {
|
|
|
24
24
|
"data-[focused]:bg-grey-100",
|
|
25
25
|
"data-[focus-visible]:outline-none"
|
|
26
26
|
],
|
|
27
|
-
variants: {
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
27
|
+
variants: {
|
|
28
|
+
size: {
|
|
29
|
+
sm: [
|
|
30
|
+
"py-2",
|
|
31
|
+
"pl-7",
|
|
32
|
+
"pr-4",
|
|
33
|
+
"text-sm"
|
|
34
|
+
],
|
|
35
|
+
md: [
|
|
36
|
+
"py-2.5",
|
|
37
|
+
"pl-8",
|
|
38
|
+
"pr-6"
|
|
39
|
+
],
|
|
40
|
+
lg: [
|
|
41
|
+
"py-2.5",
|
|
42
|
+
"pl-8",
|
|
43
|
+
"pr-6"
|
|
44
|
+
]
|
|
45
|
+
},
|
|
46
|
+
colorMode: {
|
|
47
|
+
light: [],
|
|
48
|
+
dark: [
|
|
49
|
+
"text-white",
|
|
50
|
+
"data-[hovered]:bg-grey-800",
|
|
51
|
+
"data-[focused]:bg-grey-800"
|
|
52
|
+
]
|
|
53
|
+
}
|
|
54
|
+
}
|
|
45
55
|
}, { enablePolymorphism: false });
|
|
46
56
|
var SelectMenuItem = ({ children, textValue, ...rest }) => {
|
|
47
|
-
const { size } = useSelectMenuContext();
|
|
57
|
+
const { size, colorMode } = useSelectMenuContext();
|
|
48
58
|
return /* @__PURE__ */ jsx(Item, {
|
|
49
59
|
size,
|
|
60
|
+
colorMode,
|
|
50
61
|
textValue: textValue ?? (typeof children === "string" || typeof children === "number" ? String(children) : void 0),
|
|
51
62
|
...rest,
|
|
52
63
|
children: ({ isSelected }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectMenuItem.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuItem.tsx"],"sourcesContent":["import { Ok } from '@atom-learning/icons'\nimport * as React from 'react'\nimport * as AriaComponents from 'react-aria-components'\n\nimport { styled } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { useSelectMenuContext } from './SelectMenu.context'\n\nconst Item = styled(\n AriaComponents.ListBoxItem,\n {\n base: [\n 'relative',\n 'flex',\n 'items-center',\n 'text-grey-1000',\n 'font-body',\n 'font-normal',\n // Explicit line-height so `sm` (text-sm) doesn't inherit Tailwind's tight\n // 1.25 ratio; keeps rows comfortable rather than cramped.\n 'leading-normal',\n 'cursor-pointer',\n 'rounded-sm',\n 'outline-none',\n 'data-[disabled]:cursor-not-allowed',\n 'data-[disabled]:opacity-30',\n // react-aria's data-hovered (pointer only, ignores touch) — not `hover:`,\n // whose :hover sticks after a tap on touchscreens (this menu targets\n // webviews). data-focused covers keyboard navigation; together they\n // replicate the old Radix data-highlighted.\n 'data-[hovered]:bg-grey-100',\n 'data-[focused]:bg-grey-100',\n 'data-[focus-visible]:outline-none'\n ],\n variants: {\n size: {\n sm: ['py-2', 'pl-7', 'pr-4', 'text-sm'],\n md: ['py-2.5', 'pl-8', 'pr-6'],\n lg: ['py-2.5', 'pl-8', 'pr-6']\n }\n }\n },\n { enablePolymorphism: false }\n)\n\ntype SelectMenuItemProps = Omit<AriaComponents.ListBoxItemProps, 'children'> & {\n children?: React.ReactNode\n}\n\nexport const SelectMenuItem = ({\n children,\n textValue,\n ...rest\n}: SelectMenuItemProps) => {\n const { size } = useSelectMenuContext()\n // SelectMenuItem always passes a render function to ListBoxItem (for the\n // isSelected checkmark), which disables RAC's own textValue inference — so\n // this derivation is the only source. Numbers are plain text too; without\n // them the trigger blanks on selection (#893).\n const resolvedTextValue =\n textValue ??\n (typeof children === 'string' || typeof children === 'number'\n ? String(children)\n : undefined)\n\n return (\n <Item
|
|
1
|
+
{"version":3,"file":"SelectMenuItem.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuItem.tsx"],"sourcesContent":["import { Ok } from '@atom-learning/icons'\nimport * as React from 'react'\nimport * as AriaComponents from 'react-aria-components'\n\nimport { styled } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { useSelectMenuContext } from './SelectMenu.context'\n\nconst Item = styled(\n AriaComponents.ListBoxItem,\n {\n base: [\n 'relative',\n 'flex',\n 'items-center',\n 'text-grey-1000',\n 'font-body',\n 'font-normal',\n // Explicit line-height so `sm` (text-sm) doesn't inherit Tailwind's tight\n // 1.25 ratio; keeps rows comfortable rather than cramped.\n 'leading-normal',\n 'cursor-pointer',\n 'rounded-sm',\n 'outline-none',\n 'data-[disabled]:cursor-not-allowed',\n 'data-[disabled]:opacity-30',\n // react-aria's data-hovered (pointer only, ignores touch) — not `hover:`,\n // whose :hover sticks after a tap on touchscreens (this menu targets\n // webviews). data-focused covers keyboard navigation; together they\n // replicate the old Radix data-highlighted.\n 'data-[hovered]:bg-grey-100',\n 'data-[focused]:bg-grey-100',\n 'data-[focus-visible]:outline-none'\n ],\n variants: {\n size: {\n sm: ['py-2', 'pl-7', 'pr-4', 'text-sm'],\n md: ['py-2.5', 'pl-8', 'pr-6'],\n lg: ['py-2.5', 'pl-8', 'pr-6']\n },\n colorMode: {\n light: [],\n dark: [\n 'text-white',\n 'data-[hovered]:bg-grey-800',\n 'data-[focused]:bg-grey-800'\n ]\n }\n }\n },\n { enablePolymorphism: false }\n)\n\ntype SelectMenuItemProps = Omit<AriaComponents.ListBoxItemProps, 'children'> & {\n children?: React.ReactNode\n}\n\nexport const SelectMenuItem = ({\n children,\n textValue,\n ...rest\n}: SelectMenuItemProps) => {\n const { size, colorMode } = useSelectMenuContext()\n // SelectMenuItem always passes a render function to ListBoxItem (for the\n // isSelected checkmark), which disables RAC's own textValue inference — so\n // this derivation is the only source. Numbers are plain text too; without\n // them the trigger blanks on selection (#893).\n const resolvedTextValue =\n textValue ??\n (typeof children === 'string' || typeof children === 'number'\n ? String(children)\n : undefined)\n\n return (\n <Item\n size={size}\n colorMode={colorMode}\n textValue={resolvedTextValue}\n {...rest}\n >\n {({ isSelected }) => (\n <>\n <span className=\"absolute left-2 inline-flex items-center\">\n {isSelected && (\n <Icon is={Ok} className={size === 'sm' ? 'size-3' : 'size-4'} />\n )}\n </span>\n {children}\n </>\n )}\n </Item>\n )\n}\n"],"mappings":";;;;;;;;AAQA,IAAM,OAAO,OACX,eAAe,aACf;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAKA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAQ;IAAQ;IAAQ;GAAS;GACtC,IAAI;IAAC;IAAU;IAAQ;GAAM;GAC7B,IAAI;IAAC;IAAU;IAAQ;GAAM;EAC/B;EACA,WAAW;GACT,OAAO,CAAC;GACR,MAAM;IACJ;IACA;IACA;GACF;EACF;CACF;AACF,GACA,EAAE,oBAAoB,MAAM,CAC9B;AAMA,IAAa,kBAAkB,EAC7B,UACA,WACA,GAAG,WACsB;CACzB,MAAM,EAAE,MAAM,cAAc,qBAAqB;CAWjD,OACE,oBAAC,MAAD;EACQ;EACK;EACX,WATF,cACC,OAAO,aAAa,YAAY,OAAO,aAAa,WACjD,OAAO,QAAQ,IACf,KAAA;EAOF,GAAI;aAEF,EAAE,iBACF,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;GAAM,WAAU;aACb,cACC,oBAAC,MAAD;IAAM,IAAI;IAAI,WAAW,SAAS,OAAO,WAAW;GAAW,CAAA;EAE7D,CAAA,GACL,QACD,EAAA,CAAA;CAEA,CAAA;AAEV"}
|
|
@@ -1,15 +1,19 @@
|
|
|
1
1
|
import { cn } from "../../utilities/tw-merge/index.js";
|
|
2
2
|
import { Text } from "../text/Text.js";
|
|
3
|
+
import { useSelectMenuContext } from "./SelectMenu.context.js";
|
|
3
4
|
import "react";
|
|
4
5
|
import { jsx } from "react/jsx-runtime";
|
|
5
6
|
import * as AriaComponents from "react-aria-components";
|
|
6
7
|
//#region src/components/select-menu/SelectMenuLabel.tsx
|
|
7
|
-
var SelectMenuLabel = ({ className, ...rest }) =>
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
8
|
+
var SelectMenuLabel = ({ className, ...rest }) => {
|
|
9
|
+
const { colorMode } = useSelectMenuContext();
|
|
10
|
+
return /* @__PURE__ */ jsx(Text, {
|
|
11
|
+
as: AriaComponents.Header,
|
|
12
|
+
size: "sm",
|
|
13
|
+
className: cn("p-2", "mb-1", colorMode === "dark" ? "text-grey-500" : "text-text-subtle", className),
|
|
14
|
+
...rest
|
|
15
|
+
});
|
|
16
|
+
};
|
|
13
17
|
SelectMenuLabel.displayName = "SelectMenuLabel";
|
|
14
18
|
//#endregion
|
|
15
19
|
export { SelectMenuLabel };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectMenuLabel.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuLabel.tsx"],"sourcesContent":["import * as React from 'react'\nimport * as AriaComponents from 'react-aria-components'\n\nimport { cn } from '../../styled'\nimport { Text } from '../text/Text'\n\ntype SelectMenuLabelProps = React.ComponentProps<typeof AriaComponents.Header>\n\nexport const SelectMenuLabel = ({\n className,\n ...rest\n}: SelectMenuLabelProps) => (\n <Text\n
|
|
1
|
+
{"version":3,"file":"SelectMenuLabel.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuLabel.tsx"],"sourcesContent":["import * as React from 'react'\nimport * as AriaComponents from 'react-aria-components'\n\nimport { cn } from '../../styled'\nimport { Text } from '../text/Text'\nimport { useSelectMenuContext } from './SelectMenu.context'\n\ntype SelectMenuLabelProps = React.ComponentProps<typeof AriaComponents.Header>\n\nexport const SelectMenuLabel = ({\n className,\n ...rest\n}: SelectMenuLabelProps) => {\n const { colorMode } = useSelectMenuContext()\n\n return (\n <Text\n as={AriaComponents.Header}\n size=\"sm\"\n className={cn(\n 'p-2',\n 'mb-1',\n colorMode === 'dark' ? 'text-grey-500' : 'text-text-subtle',\n className\n )}\n {...rest}\n />\n )\n}\n\nSelectMenuLabel.displayName = 'SelectMenuLabel'\n"],"mappings":";;;;;;;AASA,IAAa,mBAAmB,EAC9B,WACA,GAAG,WACuB;CAC1B,MAAM,EAAE,cAAc,qBAAqB;CAE3C,OACE,oBAAC,MAAD;EACE,IAAI,eAAe;EACnB,MAAK;EACL,WAAW,GACT,OACA,QACA,cAAc,SAAS,kBAAkB,oBACzC,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,gBAAgB,cAAc"}
|
|
@@ -1,2 +1,7 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
1
2
|
import * as AriaComponents from 'react-aria-components';
|
|
2
|
-
|
|
3
|
+
declare const Separator: import("../..").StyledComponent<(props: AriaComponents.SeparatorProps & React.RefAttributes<HTMLElement>) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null, {
|
|
4
|
+
colorMode?: "dark" | "light" | undefined;
|
|
5
|
+
}>;
|
|
6
|
+
export declare const SelectMenuSeparator: (props: Omit<React.ComponentProps<typeof Separator>, 'colorMode'>) => React.JSX.Element;
|
|
7
|
+
export {};
|
|
@@ -1,12 +1,28 @@
|
|
|
1
1
|
import { styled } from "../../styled.js";
|
|
2
|
+
import { useSelectMenuContext } from "./SelectMenu.context.js";
|
|
3
|
+
import "react";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
5
|
import * as AriaComponents from "react-aria-components";
|
|
3
6
|
//#region src/components/select-menu/SelectMenuSeparator.tsx
|
|
4
|
-
var
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
var Separator = styled(AriaComponents.Separator, {
|
|
8
|
+
base: [
|
|
9
|
+
"h-px",
|
|
10
|
+
"bg-grey-200",
|
|
11
|
+
"my-2",
|
|
12
|
+
"mx-1"
|
|
13
|
+
],
|
|
14
|
+
variants: { colorMode: {
|
|
15
|
+
light: [],
|
|
16
|
+
dark: ["bg-grey-800"]
|
|
17
|
+
} }
|
|
18
|
+
}, { enablePolymorphism: false });
|
|
19
|
+
var SelectMenuSeparator = (props) => {
|
|
20
|
+
const { colorMode } = useSelectMenuContext();
|
|
21
|
+
return /* @__PURE__ */ jsx(Separator, {
|
|
22
|
+
colorMode,
|
|
23
|
+
...props
|
|
24
|
+
});
|
|
25
|
+
};
|
|
10
26
|
//#endregion
|
|
11
27
|
export { SelectMenuSeparator };
|
|
12
28
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectMenuSeparator.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuSeparator.tsx"],"sourcesContent":["import * as AriaComponents from 'react-aria-components'\n\nimport { styled } from '../../styled'\n\
|
|
1
|
+
{"version":3,"file":"SelectMenuSeparator.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuSeparator.tsx"],"sourcesContent":["import * as React from 'react'\nimport * as AriaComponents from 'react-aria-components'\n\nimport { styled } from '../../styled'\nimport { useSelectMenuContext } from './SelectMenu.context'\n\nconst Separator = styled(\n AriaComponents.Separator,\n {\n base: ['h-px', 'bg-grey-200', 'my-2', 'mx-1'],\n variants: {\n colorMode: {\n light: [],\n dark: ['bg-grey-800']\n }\n }\n },\n { enablePolymorphism: false }\n)\n\nexport const SelectMenuSeparator = (\n props: Omit<React.ComponentProps<typeof Separator>, 'colorMode'>\n) => {\n const { colorMode } = useSelectMenuContext()\n\n return <Separator colorMode={colorMode} {...props} />\n}\n"],"mappings":";;;;;;AAMA,IAAM,YAAY,OAChB,eAAe,WACf;CACE,MAAM;EAAC;EAAQ;EAAe;EAAQ;CAAM;CAC5C,UAAU,EACR,WAAW;EACT,OAAO,CAAC;EACR,MAAM,CAAC,aAAa;CACtB,EACF;AACF,GACA,EAAE,oBAAoB,MAAM,CAC9B;AAEA,IAAa,uBACX,UACG;CACH,MAAM,EAAE,cAAc,qBAAqB;CAE3C,OAAO,oBAAC,WAAD;EAAsB;EAAW,GAAI;CAAQ,CAAA;AACtD"}
|
|
@@ -55,8 +55,21 @@ var Trigger = styled(AriaComponents.Button, {
|
|
|
55
55
|
white: ["bg-white"],
|
|
56
56
|
grey: ["bg-grey-100"]
|
|
57
57
|
},
|
|
58
|
+
colorMode: {
|
|
59
|
+
light: [],
|
|
60
|
+
dark: [
|
|
61
|
+
"bg-grey-900",
|
|
62
|
+
"text-grey-200",
|
|
63
|
+
"hover:bg-grey-800"
|
|
64
|
+
]
|
|
65
|
+
},
|
|
58
66
|
state: { error: ["bg-danger-light", "data-[focus-visible]:outline-danger"] }
|
|
59
|
-
}
|
|
67
|
+
},
|
|
68
|
+
compoundVariants: [{
|
|
69
|
+
colorMode: "dark",
|
|
70
|
+
state: "error",
|
|
71
|
+
class: ["text-grey-1000", "hover:bg-danger-light"]
|
|
72
|
+
}]
|
|
60
73
|
}, { enablePolymorphism: false });
|
|
61
74
|
var TriggerIcon = styled(Icon, {
|
|
62
75
|
base: [
|
|
@@ -66,18 +79,25 @@ var TriggerIcon = styled(Icon, {
|
|
|
66
79
|
"pointer-events-none",
|
|
67
80
|
"text-grey-700"
|
|
68
81
|
],
|
|
69
|
-
variants: {
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
82
|
+
variants: {
|
|
83
|
+
size: {
|
|
84
|
+
sm: ["right-2", "size-4"],
|
|
85
|
+
md: ["right-3", "size-5"],
|
|
86
|
+
lg: ["right-3", "size-5"]
|
|
87
|
+
},
|
|
88
|
+
colorMode: {
|
|
89
|
+
light: [],
|
|
90
|
+
dark: ["text-grey-200"]
|
|
91
|
+
}
|
|
92
|
+
}
|
|
74
93
|
});
|
|
75
94
|
var SelectMenuTrigger = ({ ref, placeholder, children, ...rest }) => {
|
|
76
|
-
const { size, theme, state } = useSelectMenuContext();
|
|
95
|
+
const { size, theme, colorMode, state } = useSelectMenuContext();
|
|
77
96
|
return /* @__PURE__ */ jsxs(Trigger, {
|
|
78
97
|
ref,
|
|
79
98
|
size,
|
|
80
99
|
theme,
|
|
100
|
+
colorMode,
|
|
81
101
|
state,
|
|
82
102
|
...rest,
|
|
83
103
|
children: [/* @__PURE__ */ jsx(AriaComponents.SelectValue, {
|
|
@@ -85,7 +105,8 @@ var SelectMenuTrigger = ({ ref, placeholder, children, ...rest }) => {
|
|
|
85
105
|
children: ({ isPlaceholder, selectedText }) => isPlaceholder ? placeholder ?? "" : children ?? selectedText
|
|
86
106
|
}), /* @__PURE__ */ jsx(TriggerIcon, {
|
|
87
107
|
is: ChevronDown,
|
|
88
|
-
size
|
|
108
|
+
size,
|
|
109
|
+
colorMode
|
|
89
110
|
})]
|
|
90
111
|
});
|
|
91
112
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectMenuTrigger.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@atom-learning/icons'\nimport * as React from 'react'\nimport * as AriaComponents from 'react-aria-components'\n\nimport { styled } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { useSelectMenuContext } from './SelectMenu.context'\n\nconst Trigger = styled(\n AriaComponents.Button,\n {\n base: [\n 'appearance-none',\n 'rounded-md',\n 'block',\n 'w-full',\n 'font-body',\n 'font-normal',\n 'leading-[1.4]',\n 'text-grey-1000',\n 'text-left',\n 'relative',\n 'inline-flex',\n 'items-center',\n 'border-none',\n 'hover:cursor-pointer',\n 'disabled:opacity-30',\n 'disabled:cursor-not-allowed',\n 'data-[focus-visible]:outline-2',\n 'data-[focus-visible]:outline-blue-800',\n 'data-[focus-visible]:outline-offset-1',\n 'data-[focus-visible]:outline-solid',\n 'data-[focus-visible]:z-1'\n ],\n variants: {\n size: {\n sm: ['h-8', 'pl-2', 'pr-8', 'text-sm'],\n md: ['h-10', 'pl-3', 'pr-10', 'text-md'],\n lg: ['h-12', 'pl-3', 'pr-10', 'text-md']\n },\n theme: {\n white: ['bg-white'],\n grey: ['bg-grey-100']\n },\n state: {\n error: ['bg-danger-light', 'data-[focus-visible]:outline-danger']\n }\n }\n },\n { enablePolymorphism: false }\n)\n\nconst TriggerIcon = styled(Icon, {\n base: [\n 'absolute',\n 'top-1/2',\n '-translate-y-1/2',\n 'pointer-events-none',\n 'text-grey-700'\n ],\n variants: {\n size: {\n sm: ['right-2', 'size-4'],\n md: ['right-3', 'size-5'],\n lg: ['right-3', 'size-5']\n }\n }\n})\n\n// aria-labelledby set here overrides react-aria's default (which points the\n// trigger at the SelectValue span, so the accessible name becomes the value).\n// SelectMenuField uses it to point the trigger at the visible field label. Use\n// aria-labelledby, not aria-label, so a single referenced label wins cleanly.\ntype SelectMenuTriggerProps = Omit<\n React.ComponentPropsWithRef<typeof AriaComponents.Button>,\n 'children' | 'aria-label'\n> & {\n placeholder?: string\n children?: React.ReactNode\n}\n\nexport const SelectMenuTrigger = ({\n ref,\n placeholder,\n children,\n ...rest\n}: SelectMenuTriggerProps) => {\n const { size, theme, state } = useSelectMenuContext()\n\n return (\n <Trigger
|
|
1
|
+
{"version":3,"file":"SelectMenuTrigger.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@atom-learning/icons'\nimport * as React from 'react'\nimport * as AriaComponents from 'react-aria-components'\n\nimport { styled } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { useSelectMenuContext } from './SelectMenu.context'\n\nconst Trigger = styled(\n AriaComponents.Button,\n {\n base: [\n 'appearance-none',\n 'rounded-md',\n 'block',\n 'w-full',\n 'font-body',\n 'font-normal',\n 'leading-[1.4]',\n 'text-grey-1000',\n 'text-left',\n 'relative',\n 'inline-flex',\n 'items-center',\n 'border-none',\n 'hover:cursor-pointer',\n 'disabled:opacity-30',\n 'disabled:cursor-not-allowed',\n 'data-[focus-visible]:outline-2',\n 'data-[focus-visible]:outline-blue-800',\n 'data-[focus-visible]:outline-offset-1',\n 'data-[focus-visible]:outline-solid',\n 'data-[focus-visible]:z-1'\n ],\n variants: {\n size: {\n sm: ['h-8', 'pl-2', 'pr-8', 'text-sm'],\n md: ['h-10', 'pl-3', 'pr-10', 'text-md'],\n lg: ['h-12', 'pl-3', 'pr-10', 'text-md']\n },\n theme: {\n white: ['bg-white'],\n grey: ['bg-grey-100']\n },\n // Between theme and state: dark overrides either theme's background,\n // and the error background still wins over dark\n colorMode: {\n light: [],\n dark: ['bg-grey-900', 'text-grey-200', 'hover:bg-grey-800']\n },\n state: {\n error: ['bg-danger-light', 'data-[focus-visible]:outline-danger']\n }\n },\n compoundVariants: [\n {\n // Error keeps its light look on dark, hover included\n colorMode: 'dark',\n state: 'error',\n class: ['text-grey-1000', 'hover:bg-danger-light']\n }\n ]\n },\n { enablePolymorphism: false }\n)\n\nconst TriggerIcon = styled(Icon, {\n base: [\n 'absolute',\n 'top-1/2',\n '-translate-y-1/2',\n 'pointer-events-none',\n 'text-grey-700'\n ],\n variants: {\n size: {\n sm: ['right-2', 'size-4'],\n md: ['right-3', 'size-5'],\n lg: ['right-3', 'size-5']\n },\n colorMode: {\n light: [],\n dark: ['text-grey-200']\n }\n }\n})\n\n// aria-labelledby set here overrides react-aria's default (which points the\n// trigger at the SelectValue span, so the accessible name becomes the value).\n// SelectMenuField uses it to point the trigger at the visible field label. Use\n// aria-labelledby, not aria-label, so a single referenced label wins cleanly.\ntype SelectMenuTriggerProps = Omit<\n React.ComponentPropsWithRef<typeof AriaComponents.Button>,\n 'children' | 'aria-label'\n> & {\n placeholder?: string\n children?: React.ReactNode\n}\n\nexport const SelectMenuTrigger = ({\n ref,\n placeholder,\n children,\n ...rest\n}: SelectMenuTriggerProps) => {\n const { size, theme, colorMode, state } = useSelectMenuContext()\n\n return (\n <Trigger\n ref={ref}\n size={size}\n theme={theme}\n colorMode={colorMode}\n state={state}\n {...rest}\n >\n <AriaComponents.SelectValue className=\"truncate\">\n {({ isPlaceholder, selectedText }) =>\n isPlaceholder ? (placeholder ?? '') : (children ?? selectedText)\n }\n </AriaComponents.SelectValue>\n <TriggerIcon is={ChevronDown} size={size} colorMode={colorMode} />\n </Trigger>\n )\n}\n"],"mappings":";;;;;;;;AAQA,IAAM,UAAU,OACd,eAAe,QACf;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAO;IAAQ;IAAQ;GAAS;GACrC,IAAI;IAAC;IAAQ;IAAQ;IAAS;GAAS;GACvC,IAAI;IAAC;IAAQ;IAAQ;IAAS;GAAS;EACzC;EACA,OAAO;GACL,OAAO,CAAC,UAAU;GAClB,MAAM,CAAC,aAAa;EACtB;EAGA,WAAW;GACT,OAAO,CAAC;GACR,MAAM;IAAC;IAAe;IAAiB;GAAmB;EAC5D;EACA,OAAO,EACL,OAAO,CAAC,mBAAmB,qCAAqC,EAClE;CACF;CACA,kBAAkB,CAChB;EAEE,WAAW;EACX,OAAO;EACP,OAAO,CAAC,kBAAkB,uBAAuB;CACnD,CACF;AACF,GACA,EAAE,oBAAoB,MAAM,CAC9B;AAEA,IAAM,cAAc,OAAO,MAAM;CAC/B,MAAM;EACJ;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI,CAAC,WAAW,QAAQ;GACxB,IAAI,CAAC,WAAW,QAAQ;GACxB,IAAI,CAAC,WAAW,QAAQ;EAC1B;EACA,WAAW;GACT,OAAO,CAAC;GACR,MAAM,CAAC,eAAe;EACxB;CACF;AACF,CAAC;AAcD,IAAa,qBAAqB,EAChC,KACA,aACA,UACA,GAAG,WACyB;CAC5B,MAAM,EAAE,MAAM,OAAO,WAAW,UAAU,qBAAqB;CAE/D,OACE,qBAAC,SAAD;EACO;EACC;EACC;EACI;EACJ;EACP,GAAI;YANN,CAQE,oBAAC,eAAe,aAAhB;GAA4B,WAAU;cAClC,EAAE,eAAe,mBACjB,gBAAiB,eAAe,KAAO,YAAY;EAE3B,CAAA,GAC5B,oBAAC,aAAD;GAAa,IAAI;GAAmB;GAAiB;EAAY,CAAA,CAC1D;;AAEb"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import * as ToggleGroup from '@radix-ui/react-toggle-group';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
export declare const StyledButton: import("../..").PolymorphicComponent<React.ForwardRefExoticComponent<ToggleGroup.ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>>, {
|
|
4
|
-
size?: ("lg" | "md" | "sm" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm">>) | undefined;
|
|
4
|
+
size?: ("lg" | "md" | "sm" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm" | "xs">>) | undefined;
|
|
5
5
|
isIconOnly?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
|
|
6
6
|
theme?: ("modern" | "standard" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "modern" | "standard">>) | undefined;
|
|
7
|
+
colorMode?: ("dark" | "light" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "dark" | "light">>) | undefined;
|
|
7
8
|
}>;
|
|
8
|
-
export declare const ToggleGroupButton: ({ ref, size, theme, children, ...rest }: React.ComponentProps<typeof StyledButton>) => React.JSX.Element;
|
|
9
|
+
export declare const ToggleGroupButton: ({ ref, size, theme, colorMode, children, ...rest }: React.ComponentProps<typeof StyledButton>) => React.JSX.Element;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { styled } from "../../styled.js";
|
|
2
2
|
import { Icon } from "../icon/Icon.js";
|
|
3
|
-
import { modernVariant, standardVariant } from "./ToggleGroupItem.js";
|
|
3
|
+
import { modernDarkVariant, modernVariant, standardDarkVariant, standardVariant } from "./ToggleGroupItem.js";
|
|
4
4
|
import * as React$1 from "react";
|
|
5
5
|
import { jsx } from "react/jsx-runtime";
|
|
6
6
|
import * as ToggleGroup from "@radix-ui/react-toggle-group";
|
|
@@ -20,6 +20,12 @@ var StyledButton = styled(ToggleGroup.Item, {
|
|
|
20
20
|
],
|
|
21
21
|
variants: {
|
|
22
22
|
size: {
|
|
23
|
+
xs: [
|
|
24
|
+
"*:not-last:mr-2",
|
|
25
|
+
"min-h-8",
|
|
26
|
+
"px-3",
|
|
27
|
+
"text-sm"
|
|
28
|
+
],
|
|
23
29
|
sm: [
|
|
24
30
|
"*:not-last:mr-2",
|
|
25
31
|
"min-h-8",
|
|
@@ -43,9 +49,28 @@ var StyledButton = styled(ToggleGroup.Item, {
|
|
|
43
49
|
theme: {
|
|
44
50
|
standard: standardVariant,
|
|
45
51
|
modern: modernVariant
|
|
52
|
+
},
|
|
53
|
+
colorMode: {
|
|
54
|
+
light: [],
|
|
55
|
+
dark: []
|
|
46
56
|
}
|
|
47
57
|
},
|
|
48
58
|
compoundVariants: [
|
|
59
|
+
{
|
|
60
|
+
theme: "standard",
|
|
61
|
+
colorMode: "dark",
|
|
62
|
+
class: standardDarkVariant
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
theme: "modern",
|
|
66
|
+
colorMode: "dark",
|
|
67
|
+
class: modernDarkVariant
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
isIconOnly: true,
|
|
71
|
+
size: "xs",
|
|
72
|
+
class: ["min-w-8", "p-0"]
|
|
73
|
+
},
|
|
49
74
|
{
|
|
50
75
|
isIconOnly: true,
|
|
51
76
|
size: "sm",
|
|
@@ -81,7 +106,8 @@ var StyledButton = styled(ToggleGroup.Item, {
|
|
|
81
106
|
}
|
|
82
107
|
]
|
|
83
108
|
}, { enableResponsiveVariants: true });
|
|
84
|
-
var
|
|
109
|
+
var toIconSize = (size) => typeof size === "object" ? Object.fromEntries(Object.entries(size).map(([bp, s]) => [bp, s === "xs" ? "sm" : s])) : size === "xs" ? "sm" : size;
|
|
110
|
+
var ToggleGroupButton = ({ ref, size = "md", theme = "standard", colorMode = "light", children, ...rest }) => {
|
|
85
111
|
const childrenArray = React$1.Children.toArray(children);
|
|
86
112
|
const isSingleChild = childrenArray.length <= 1;
|
|
87
113
|
return /* @__PURE__ */ jsx(StyledButton, {
|
|
@@ -89,13 +115,14 @@ var ToggleGroupButton = ({ ref, size = "md", theme = "standard", children, ...re
|
|
|
89
115
|
size,
|
|
90
116
|
isIconOnly: isSingleChild && React$1.isValidElement(childrenArray[0]) && childrenArray[0]?.type === Icon,
|
|
91
117
|
theme,
|
|
118
|
+
colorMode,
|
|
92
119
|
...rest,
|
|
93
120
|
children: childrenArray.map((child) => {
|
|
94
121
|
if (!isSingleChild && (typeof child === "string" || typeof child === "number")) return /* @__PURE__ */ jsx("span", { children: child }, child);
|
|
95
122
|
if (React$1.isValidElement(child)) {
|
|
96
123
|
if (child?.type === Icon) return React$1.cloneElement(child, {
|
|
97
124
|
...child.props,
|
|
98
|
-
size
|
|
125
|
+
size: toIconSize(size)
|
|
99
126
|
});
|
|
100
127
|
}
|
|
101
128
|
return child;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleGroupButton.js","names":[],"sources":["../../../src/components/toggle-group/ToggleGroupButton.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport {
|
|
1
|
+
{"version":3,"file":"ToggleGroupButton.js","names":[],"sources":["../../../src/components/toggle-group/ToggleGroupButton.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport {\n modernDarkVariant,\n modernVariant,\n standardDarkVariant,\n standardVariant\n} from './ToggleGroupItem'\n\nexport const StyledButton = styled(\n ToggleGroup.Item,\n {\n base: [\n 'cursor-pointer',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30',\n 'grow',\n 'flex',\n 'items-center',\n 'justify-center',\n 'font-semibold',\n 'leading-none',\n 'py-1'\n ],\n variants: {\n size: {\n xs: ['*:not-last:mr-2', 'min-h-8', 'px-3', 'text-sm'],\n sm: ['*:not-last:mr-2', 'min-h-8', 'px-4', 'text-sm'],\n md: ['*:not-last:mr-3', 'min-h-10', 'px-8', 'text-md'],\n lg: ['*:not-last:mr-3', 'min-h-12', 'px-8', 'text-lg']\n },\n isIconOnly: {\n true: []\n },\n theme: {\n standard: standardVariant,\n modern: modernVariant\n },\n colorMode: {\n light: [],\n dark: []\n }\n },\n compoundVariants: [\n { theme: 'standard', colorMode: 'dark', class: standardDarkVariant },\n { theme: 'modern', colorMode: 'dark', class: modernDarkVariant },\n {\n isIconOnly: true,\n size: 'xs',\n class: ['min-w-8', 'p-0']\n },\n {\n isIconOnly: true,\n size: 'sm',\n class: ['min-w-8', 'p-0']\n },\n {\n isIconOnly: true,\n size: 'md',\n class: ['min-w-10', 'p-0']\n },\n {\n isIconOnly: true,\n size: 'lg',\n class: ['min-w-12', 'p-0']\n },\n {\n isIconOnly: true,\n size: 'sm',\n theme: 'modern',\n class: ['min-w-10', 'p-0']\n },\n {\n isIconOnly: true,\n size: 'md',\n theme: 'modern',\n class: ['min-w-12', 'p-0']\n },\n {\n isIconOnly: true,\n size: 'lg',\n theme: 'modern',\n class: ['min-w-15', 'p-0']\n }\n ]\n },\n { enableResponsiveVariants: true }\n)\n\ntype ButtonSize = React.ComponentProps<typeof StyledButton>['size']\ntype IconSize = React.ComponentProps<typeof Icon>['size']\n\n// Icon has no xs; its sm is the 16px icon an xs tab needs. Size may be a\n// responsive object, so each breakpoint is mapped.\nconst toIconSize = (size: ButtonSize): IconSize =>\n typeof size === 'object'\n ? (Object.fromEntries(\n Object.entries(size).map(([bp, s]) => [bp, s === 'xs' ? 'sm' : s])\n ) as IconSize)\n : size === 'xs'\n ? 'sm'\n : size\n\nexport const ToggleGroupButton = ({\n ref,\n size = 'md',\n theme = 'standard',\n colorMode = 'light',\n children,\n ...rest\n}: React.ComponentProps<typeof StyledButton>) => {\n const childrenArray = React.Children.toArray(children)\n const isSingleChild = childrenArray.length <= 1\n const isIconOnly =\n isSingleChild &&\n React.isValidElement(childrenArray[0]) &&\n childrenArray[0]?.type === Icon\n\n return (\n <StyledButton\n ref={ref}\n size={size}\n isIconOnly={isIconOnly}\n theme={theme}\n colorMode={colorMode}\n {...rest}\n >\n {\n childrenArray.map((child) => {\n if (\n !isSingleChild &&\n (typeof child === 'string' || typeof child === 'number')\n )\n return <span key={child}>{child}</span>\n if (\n React.isValidElement<React.ComponentPropsWithoutRef<typeof Icon>>(\n child\n )\n ) {\n if (child?.type === Icon)\n return React.cloneElement(child, {\n ...child.props,\n size: toIconSize(size)\n })\n }\n return child\n }) as React.ReactElement<unknown>[]\n }\n </StyledButton>\n )\n}\n"],"mappings":";;;;;;;AAYA,IAAa,eAAe,OAC1B,YAAY,MACZ;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAmB;IAAW;IAAQ;GAAS;GACpD,IAAI;IAAC;IAAmB;IAAW;IAAQ;GAAS;GACpD,IAAI;IAAC;IAAmB;IAAY;IAAQ;GAAS;GACrD,IAAI;IAAC;IAAmB;IAAY;IAAQ;GAAS;EACvD;EACA,YAAY,EACV,MAAM,CAAC,EACT;EACA,OAAO;GACL,UAAU;GACV,QAAQ;EACV;EACA,WAAW;GACT,OAAO,CAAC;GACR,MAAM,CAAC;EACT;CACF;CACA,kBAAkB;EAChB;GAAE,OAAO;GAAY,WAAW;GAAQ,OAAO;EAAoB;EACnE;GAAE,OAAO;GAAU,WAAW;GAAQ,OAAO;EAAkB;EAC/D;GACE,YAAY;GACZ,MAAM;GACN,OAAO,CAAC,WAAW,KAAK;EAC1B;EACA;GACE,YAAY;GACZ,MAAM;GACN,OAAO,CAAC,WAAW,KAAK;EAC1B;EACA;GACE,YAAY;GACZ,MAAM;GACN,OAAO,CAAC,YAAY,KAAK;EAC3B;EACA;GACE,YAAY;GACZ,MAAM;GACN,OAAO,CAAC,YAAY,KAAK;EAC3B;EACA;GACE,YAAY;GACZ,MAAM;GACN,OAAO;GACP,OAAO,CAAC,YAAY,KAAK;EAC3B;EACA;GACE,YAAY;GACZ,MAAM;GACN,OAAO;GACP,OAAO,CAAC,YAAY,KAAK;EAC3B;EACA;GACE,YAAY;GACZ,MAAM;GACN,OAAO;GACP,OAAO,CAAC,YAAY,KAAK;EAC3B;CACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAOA,IAAM,cAAc,SAClB,OAAO,SAAS,WACX,OAAO,YACN,OAAO,QAAQ,IAAI,CAAC,CAAC,KAAK,CAAC,IAAI,OAAO,CAAC,IAAI,MAAM,OAAO,OAAO,CAAC,CAAC,CACnE,IACA,SAAS,OACP,OACA;AAER,IAAa,qBAAqB,EAChC,KACA,OAAO,MACP,QAAQ,YACR,YAAY,SACZ,UACA,GAAG,WAC4C;CAC/C,MAAM,gBAAgB,QAAM,SAAS,QAAQ,QAAQ;CACrD,MAAM,gBAAgB,cAAc,UAAU;CAM9C,OACE,oBAAC,cAAD;EACO;EACC;EACM,YARd,iBACA,QAAM,eAAe,cAAc,EAAE,KACrC,cAAc,EAAE,EAAE,SAAS;EAOlB;EACI;EACX,GAAI;YAGF,cAAc,KAAK,UAAU;GAC3B,IACE,CAAC,kBACA,OAAO,UAAU,YAAY,OAAO,UAAU,WAE/C,OAAO,oBAAC,QAAD,EAAA,UAAmB,MAAY,GAApB,KAAoB;GACxC,IACE,QAAM,eACJ,KACF;QAEI,OAAO,SAAS,MAClB,OAAO,QAAM,aAAa,OAAO;KAC/B,GAAG,MAAM;KACT,MAAM,WAAW,IAAI;IACvB,CAAC;GAAA;GAEL,OAAO;EACT,CAAC;CAES,CAAA;AAElB"}
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import * as ToggleGroup from '@radix-ui/react-toggle-group';
|
|
2
2
|
export declare const standardVariant: string[];
|
|
3
3
|
export declare const modernVariant: string[];
|
|
4
|
+
export declare const standardDarkVariant: string[];
|
|
5
|
+
export declare const modernDarkVariant: string[];
|
|
4
6
|
export declare const ToggleGroupItem: import("../..").StyledComponent<import("react").ForwardRefExoticComponent<ToggleGroup.ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>, {
|
|
5
7
|
theme?: "modern" | "standard" | undefined;
|
|
8
|
+
colorMode?: "dark" | "light" | undefined;
|
|
6
9
|
}>;
|