@atom-learning/components 11.4.0 → 11.6.0

package/dist/index.cjs.js

@@ -1303,7 +1303,7 @@ var overrideStyledVariantValue = (prop, overrideFunction) => {
 };
 //#endregion
 //#region src/components/avatar/AvatarIcon.tsx
-var toIconSize$3 = {
+var toIconSize$4 = {
 	xs: "sm",
 	sm: "sm",
 	md: "md",
@@ -1314,7 +1314,7 @@ var toIconSize$3 = {
 var AvatarIcon = ({ is }) => {
 	const { size } = react.use(AvatarRootContext);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
-		size: overrideStyledVariantValue(size, (s) => toIconSize$3[s]),
+		size: overrideStyledVariantValue(size, (s) => toIconSize$4[s]),
 		is
 	});
 };
@@ -1746,7 +1746,8 @@ var colorSchemes$3 = {
 		"--text-on-white": "var(--color-lapis-700)"
 	}),
 	maroon: createScheme("maroon", { "--text-on-white": "var(--color-maroon-700)" }),
-	marsh: createScheme("marsh", { "--text-on-white": "var(--color-marsh-700)" })
+	marsh: createScheme("marsh", { "--text-on-white": "var(--color-marsh-700)" }),
+	emerald: createScheme("emerald")
 };
 //#endregion
 //#region src/components/badge/Badge.context.tsx
@@ -2762,12 +2763,12 @@ var StyledCheckbox = styled(_radix_ui_react_checkbox.Root, {
 		}
 	}
 });
-var toIconSize$2 = {
+var toIconSize$3 = {
 	md: "sm",
 	lg: "sm"
 };
 var Checkbox = ({ ref, size = "md", checked, ...rest }) => {
-	const iconSize = overrideStyledVariantValue(size, (s) => toIconSize$2[s]);
+	const iconSize = overrideStyledVariantValue(size, (s) => toIconSize$3[s]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "relative z-1",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledCheckbox, {
@@ -3437,14 +3438,14 @@ var StyledChipContent = styled("span", { base: [
 	"whitespace-nowrap",
 	"*:not-last:mr-1"
 ] });
-var toIconSize$1 = {
+var toIconSize$2 = {
 	sm: "sm",
 	md: "sm",
 	lg: "md"
 };
 var ChipIcon = (props) => {
 	const { size } = react.use(ChipRootContext);
-	const iconSize = overrideStyledVariantValue(size, (s) => toIconSize$1[s]);
+	const iconSize = overrideStyledVariantValue(size, (s) => toIconSize$2[s]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
 		...props,
 		size: iconSize
@@ -3872,12 +3873,12 @@ var FormCustomContext = react.createContext({ appearance: "standard" });
 var useFormCustomContext = () => react.use(FormCustomContext);
 //#endregion
 //#region src/utilities/style/get-icon-size.ts
-var toIconSize = {
+var toIconSize$1 = {
 	sm: "sm",
 	md: "md",
 	lg: "md"
 };
-var getFieldIconSize = (size) => overrideStyledVariantValue(size, (s) => toIconSize[s]);
+var getFieldIconSize = (size) => overrideStyledVariantValue(size, (s) => toIconSize$1[s]);
 //#endregion
 //#region src/components/input/Input.tsx
 var InputBackground = styled("div", {
@@ -8670,7 +8671,8 @@ SelectField.displayName = "SelectField";
 //#region src/components/select-menu/SelectMenu.context.tsx
 var SelectMenuContext = react.createContext({
 	size: "md",
-	theme: "grey"
+	theme: "grey",
+	colorMode: "light"
 });
 var useSelectMenuContext = () => react.use(SelectMenuContext);
 //#endregion
@@ -8684,10 +8686,16 @@ var Content$2 = styled(react_aria_components.Popover, {
 		"overflow-hidden",
 		"will-change-transform"
 	],
-	variants: { matchTriggerWidth: {
-		true: ["w-(--trigger-width)"],
-		false: ["min-w-(--trigger-width)", "max-w-[min(calc(100vw-(--spacing(4))),--spacing(100))]"]
-	} }
+	variants: {
+		colorMode: {
+			light: [],
+			dark: ["bg-grey-900"]
+		},
+		matchTriggerWidth: {
+			true: ["w-(--trigger-width)"],
+			false: ["min-w-(--trigger-width)", "max-w-[min(calc(100vw-(--spacing(4))),--spacing(100))]"]
+		}
+	}
 }, { enablePolymorphism: false });
 var Viewport = styled(react_aria_components.ListBox, { base: [
 	"max-h-[inherit]",
@@ -8696,14 +8704,18 @@ var Viewport = styled(react_aria_components.ListBox, { base: [
 	"p-1",
 	"outline-none"
 ] }, { enablePolymorphism: false });
-var SelectMenuContent = ({ ref, children, offset = 4, matchTriggerWidth = false, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Content$2, {
-	ref,
-	offset,
-	containerPadding: 8,
-	matchTriggerWidth,
-	...rest,
-	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Viewport, { children })
-});
+var SelectMenuContent = ({ ref, children, offset = 4, matchTriggerWidth = false, ...rest }) => {
+	const { colorMode } = useSelectMenuContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Content$2, {
+		ref,
+		offset,
+		containerPadding: 8,
+		colorMode,
+		matchTriggerWidth,
+		...rest,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Viewport, { children })
+	});
+};
 //#endregion
 //#region src/components/select-menu/SelectMenuItem.tsx
 var Item = styled(react_aria_components.ListBoxItem, {
@@ -8724,29 +8736,40 @@ var Item = styled(react_aria_components.ListBoxItem, {
 		"data-[focused]:bg-grey-100",
 		"data-[focus-visible]:outline-none"
 	],
-	variants: { size: {
-		sm: [
-			"py-2",
-			"pl-7",
-			"pr-4",
-			"text-sm"
-		],
-		md: [
-			"py-2.5",
-			"pl-8",
-			"pr-6"
-		],
-		lg: [
-			"py-2.5",
-			"pl-8",
-			"pr-6"
-		]
-	} }
+	variants: {
+		size: {
+			sm: [
+				"py-2",
+				"pl-7",
+				"pr-4",
+				"text-sm"
+			],
+			md: [
+				"py-2.5",
+				"pl-8",
+				"pr-6"
+			],
+			lg: [
+				"py-2.5",
+				"pl-8",
+				"pr-6"
+			]
+		},
+		colorMode: {
+			light: [],
+			dark: [
+				"text-white",
+				"data-[hovered]:bg-grey-800",
+				"data-[focused]:bg-grey-800"
+			]
+		}
+	}
 }, { enablePolymorphism: false });
 var SelectMenuItem = ({ children, textValue, ...rest }) => {
-	const { size } = useSelectMenuContext();
+	const { size, colorMode } = useSelectMenuContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Item, {
 		size,
+		colorMode,
 		textValue: textValue ?? (typeof children === "string" || typeof children === "number" ? String(children) : void 0),
 		...rest,
 		children: ({ isSelected }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -8760,21 +8783,37 @@ var SelectMenuItem = ({ children, textValue, ...rest }) => {
 };
 //#endregion
 //#region src/components/select-menu/SelectMenuLabel.tsx
-var SelectMenuLabel = ({ className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Text, {
-	as: react_aria_components.Header,
-	size: "sm",
-	className: cn("p-2", "mb-1", "text-text-subtle", className),
-	...rest
-});
+var SelectMenuLabel = ({ className, ...rest }) => {
+	const { colorMode } = useSelectMenuContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Text, {
+		as: react_aria_components.Header,
+		size: "sm",
+		className: cn("p-2", "mb-1", colorMode === "dark" ? "text-grey-500" : "text-text-subtle", className),
+		...rest
+	});
+};
 SelectMenuLabel.displayName = "SelectMenuLabel";
 //#endregion
 //#region src/components/select-menu/SelectMenuSeparator.tsx
-var SelectMenuSeparator = styled(react_aria_components.Separator, { base: [
-	"h-px",
-	"bg-grey-200",
-	"my-2",
-	"mx-1"
-] }, { enablePolymorphism: false });
+var Separator = styled(react_aria_components.Separator, {
+	base: [
+		"h-px",
+		"bg-grey-200",
+		"my-2",
+		"mx-1"
+	],
+	variants: { colorMode: {
+		light: [],
+		dark: ["bg-grey-800"]
+	} }
+}, { enablePolymorphism: false });
+var SelectMenuSeparator = (props) => {
+	const { colorMode } = useSelectMenuContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Separator, {
+		colorMode,
+		...props
+	});
+};
 //#endregion
 //#region src/components/select-menu/SelectMenuTrigger.tsx
 var Trigger$2 = styled(react_aria_components.Button, {
@@ -8826,8 +8865,21 @@ var Trigger$2 = styled(react_aria_components.Button, {
 			white: ["bg-white"],
 			grey: ["bg-grey-100"]
 		},
+		colorMode: {
+			light: [],
+			dark: [
+				"bg-grey-900",
+				"text-grey-200",
+				"hover:bg-grey-800"
+			]
+		},
 		state: { error: ["bg-danger-light", "data-[focus-visible]:outline-danger"] }
-	}
+	},
+	compoundVariants: [{
+		colorMode: "dark",
+		state: "error",
+		class: ["text-grey-1000", "hover:bg-danger-light"]
+	}]
 }, { enablePolymorphism: false });
 var TriggerIcon = styled(Icon, {
 	base: [
@@ -8837,18 +8889,25 @@ var TriggerIcon = styled(Icon, {
 		"pointer-events-none",
 		"text-grey-700"
 	],
-	variants: { size: {
-		sm: ["right-2", "size-4"],
-		md: ["right-3", "size-5"],
-		lg: ["right-3", "size-5"]
-	} }
+	variants: {
+		size: {
+			sm: ["right-2", "size-4"],
+			md: ["right-3", "size-5"],
+			lg: ["right-3", "size-5"]
+		},
+		colorMode: {
+			light: [],
+			dark: ["text-grey-200"]
+		}
+	}
 });
 var SelectMenuTrigger = ({ ref, placeholder, children, ...rest }) => {
-	const { size, theme, state } = useSelectMenuContext();
+	const { size, theme, colorMode, state } = useSelectMenuContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Trigger$2, {
 		ref,
 		size,
 		theme,
+		colorMode,
 		state,
 		...rest,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.SelectValue, {
@@ -8856,21 +8915,24 @@ var SelectMenuTrigger = ({ ref, placeholder, children, ...rest }) => {
 			children: ({ isPlaceholder, selectedText }) => isPlaceholder ? placeholder ?? "" : children ?? selectedText
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TriggerIcon, {
 			is: _atom_learning_icons.ChevronDown,
-			size
+			size,
+			colorMode
 		})]
 	});
 };
 //#endregion
 //#region src/components/select-menu/SelectMenu.tsx
-var SelectMenuRoot = ({ size = "md", theme = "grey", state, className, children, ...rest }) => {
+var SelectMenuRoot = ({ size = "md", theme = "grey", colorMode = "light", state, className, children, ...rest }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectMenuContext, {
 		value: react.useMemo(() => ({
 			size,
 			theme,
+			colorMode,
 			state
 		}), [
 			size,
 			theme,
+			colorMode,
 			state
 		]),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Select, {
@@ -10388,13 +10450,10 @@ var standardVariant = [
 	"not-disabled:data-[state=on]:before:bg-none",
 	"not-disabled:focus-visible:before:bg-none",
 	"not-disabled:focus-visible:data-[state=off]:border-grey-600!",
-	"not-disabled:focus-visible:data-[state=on]:shadow-[var(--color-primary-800)_0px_0px_0px_4px]",
 	"not-disabled:focus-visible:data-[state=on]:inset-shadow-[currentColor_0px_0px_0px_1px]",
-	"not-disabled:focus-visible:data-[state=on]:shadow-[white_0px_0px_0px_2px]",
 	"not-disabled:focus-visible:outline-none",
 	"not-disabled:focus-visible:relative",
-	"not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]",
-	"not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]",
+	"not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px,var(--color-primary-800)_0px_0px_0px_4px]!",
 	"not-disabled:focus-visible:z-1",
 	"not-disabled:hover:before:bg-none",
 	"not-disabled:hover:border-current!",
@@ -10412,26 +10471,54 @@ var modernVariant = [
 	"data-[state=on]:shadow-none!",
 	"data-[state=on]:text-grey-900",
 	"not-disabled:focus-visible:data-[state=off]:border-grey-600!",
-	"not-disabled:focus-visible:data-[state=on]:shadow-[var(--color-primary-800)_0px_0px_0px_4px]",
-	"not-disabled:focus-visible:data-[state=on]:inset-shadow-[currentColor_0px_0px_0px_1px_white_0px_0px_0px_2px]",
 	"not-disabled:focus-visible:outline-none",
 	"not-disabled:focus-visible:relative",
-	"not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]",
-	"not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]",
+	"not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px,var(--color-primary-800)_0px_0px_0px_4px]!",
 	"not-disabled:focus-visible:z-1",
 	"not-disabled:hover:text-primary-900"
 ];
+var darkBase = [
+	"bg-transparent",
+	"text-grey-200",
+	"data-[state=on]:text-white",
+	"not-disabled:hover:text-white",
+	"not-disabled:focus-visible:shadow-[var(--color-grey-1000)_0px_0px_0px_2px,var(--color-primary-800)_0px_0px_0px_4px]!"
+];
+var standardDarkVariant = darkBase;
+var modernDarkVariant = [
+	...darkBase,
+	"data-[state=on]:bg-grey-900",
+	"data-[state=on]:border-grey-800!"
+];
 var ToggleGroupItem = styled(_radix_ui_react_toggle_group.Item, {
 	base: [
 		"cursor-pointer",
 		"disabled:cursor-not-allowed",
 		"disabled:opacity-30"
 	],
-	variants: { theme: {
-		standard: standardVariant,
-		modern: modernVariant
-	} },
-	defaultVariants: { theme: "standard" }
+	variants: {
+		theme: {
+			standard: standardVariant,
+			modern: modernVariant
+		},
+		colorMode: {
+			light: [],
+			dark: []
+		}
+	},
+	compoundVariants: [{
+		theme: "standard",
+		colorMode: "dark",
+		class: standardDarkVariant
+	}, {
+		theme: "modern",
+		colorMode: "dark",
+		class: modernDarkVariant
+	}],
+	defaultVariants: {
+		theme: "standard",
+		colorMode: "light"
+	}
 }, { enablePolymorphism: false });
 //#endregion
 //#region src/components/toggle-group/ToggleGroupButton.tsx
@@ -10450,6 +10537,12 @@ var StyledButton$1 = styled(_radix_ui_react_toggle_group.Item, {
 	],
 	variants: {
 		size: {
+			xs: [
+				"*:not-last:mr-2",
+				"min-h-8",
+				"px-3",
+				"text-sm"
+			],
 			sm: [
 				"*:not-last:mr-2",
 				"min-h-8",
@@ -10473,9 +10566,28 @@ var StyledButton$1 = styled(_radix_ui_react_toggle_group.Item, {
 		theme: {
 			standard: standardVariant,
 			modern: modernVariant
+		},
+		colorMode: {
+			light: [],
+			dark: []
 		}
 	},
 	compoundVariants: [
+		{
+			theme: "standard",
+			colorMode: "dark",
+			class: standardDarkVariant
+		},
+		{
+			theme: "modern",
+			colorMode: "dark",
+			class: modernDarkVariant
+		},
+		{
+			isIconOnly: true,
+			size: "xs",
+			class: ["min-w-8", "p-0"]
+		},
 		{
 			isIconOnly: true,
 			size: "sm",
@@ -10511,7 +10623,8 @@ var StyledButton$1 = styled(_radix_ui_react_toggle_group.Item, {
 		}
 	]
 }, { enableResponsiveVariants: true });
-var ToggleGroupButton = ({ ref, size = "md", theme = "standard", children, ...rest }) => {
+var toIconSize = (size) => typeof size === "object" ? Object.fromEntries(Object.entries(size).map(([bp, s]) => [bp, s === "xs" ? "sm" : s])) : size === "xs" ? "sm" : size;
+var ToggleGroupButton = ({ ref, size = "md", theme = "standard", colorMode = "light", children, ...rest }) => {
 	const childrenArray = react.Children.toArray(children);
 	const isSingleChild = childrenArray.length <= 1;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledButton$1, {
@@ -10519,13 +10632,14 @@ var ToggleGroupButton = ({ ref, size = "md", theme = "standard", children, ...re
 		size,
 		isIconOnly: isSingleChild && react.isValidElement(childrenArray[0]) && childrenArray[0]?.type === Icon,
 		theme,
+		colorMode,
 		...rest,
 		children: childrenArray.map((child) => {
 			if (!isSingleChild && (typeof child === "string" || typeof child === "number")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: child }, child);
 			if (react.isValidElement(child)) {
 				if (child?.type === Icon) return react.cloneElement(child, {
 					...child.props,
-					size
+					size: toIconSize(size)
 				});
 			}
 			return child;
@@ -10561,6 +10675,10 @@ var StyledRoot$1 = styled(ToggleGroup$1.Root, {
 		theme: {
 			standard: [],
 			modern: ["bg-grey-200"]
+		},
+		colorMode: {
+			light: [],
+			dark: []
 		}
 	},
 	compoundVariants: [
@@ -10610,6 +10728,16 @@ var StyledRoot$1 = styled(ToggleGroup$1.Root, {
 				"**:data-radix-collection-item:rounded-none",
 				"bg-white"
 			]
+		},
+		{
+			theme: "standard",
+			colorMode: "dark",
+			class: ["bg-transparent"]
+		},
+		{
+			theme: "modern",
+			colorMode: "dark",
+			class: ["bg-grey-800"]
 		}
 	]
 });
@@ -10620,7 +10748,7 @@ var gapClassMap = {
 	3: "gap-3"
 };
 var orientationToDirection = (orientation) => orientation === "horizontal" ? "row" : "column";
-var ToggleGroupRoot = ({ ref, orientation = "horizontal", gap, isFullWidth, children, theme = "standard", wrap, ...rest }) => {
+var ToggleGroupRoot = ({ ref, orientation = "horizontal", gap, isFullWidth, children, theme = "standard", colorMode = "light", wrap, ...rest }) => {
 	const hasGap = typeof gap === "number";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledRoot$1, {
 		ref,
@@ -10629,13 +10757,15 @@ var ToggleGroupRoot = ({ ref, orientation = "horizontal", gap, isFullWidth, chil
 		isFullWidth,
 		orientation,
 		theme,
+		colorMode,
 		...rest,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: cn("flex", hasGap && gapClassMap[gap], orientation === "horizontal" ? "flex-row" : "flex-col", wrap ? "flex-wrap" : "flex-nowrap"),
 			children: react.Children.toArray(children).map((child) => {
 				if (react.isValidElement(child)) return react.cloneElement(child, {
 					...child.props,
-					theme
+					theme,
+					colorMode
 				});
 				return child;
 			})