@atom-learning/components 6.9.0 → 6.11.0

package/dist/index.cjs.js

@@ -3315,17 +3315,34 @@ var InputBackground = styled("div", {
 			xl: ["h-16"]
 		},
 		disabled: { true: ["cursor-not-allowed", "opacity-30"] },
-		state: { error: [] }
+		state: { error: [] },
+		theme: {
+			white: [],
+			grey: []
+		}
 	},
-	compoundVariants: [{
-		state: "error",
-		appearance: "standard",
-		class: ["border-danger"]
-	}, {
-		state: "error",
-		appearance: "modern",
-		class: ["bg-danger-light", "focus-within:outline-danger"]
-	}]
+	compoundVariants: [
+		{
+			state: "error",
+			appearance: "standard",
+			class: ["border-danger"]
+		},
+		{
+			state: "error",
+			appearance: "modern",
+			class: ["bg-danger-light", "focus-within:outline-danger"]
+		},
+		{
+			appearance: "modern",
+			theme: "white",
+			class: ["bg-white"]
+		},
+		{
+			appearance: "modern",
+			theme: "grey",
+			class: ["bg-grey-100"]
+		}
+	]
 });
 InputBackground.displayName = "InputBackground";
 var StyledInputText = styled(Text, { base: [
@@ -3360,10 +3377,11 @@ var InputText = react.forwardRef(({ type = "text", size, ...rest }, ref) => {
 	});
 });
 InputText.displayName = "InputText";
-var Input = react.forwardRef(({ className, size = "md", appearance = "standard", state, disabled, style, ...rest }, ref) => {
+var Input = react.forwardRef(({ className, size = "md", appearance = "standard", theme, state, disabled, style, ...rest }, ref) => {
 	return /* @__PURE__ */ react.createElement(InputBackground, {
 		size,
 		appearance,
+		theme,
 		disabled,
 		state,
 		className,
@@ -3409,12 +3427,13 @@ var PasswordInput = react.forwardRef(({ className, hidePasswordText = "Hide pass
 PasswordInput.displayName = "PasswordInput";
 //#endregion
 //#region src/components/password-field/PasswordField.tsx
-var PasswordField = ({ className, hideLabel, label = "Password", name, prompt = void 0, description, validation, appearance, ...remainingProps }) => {
+var PasswordField = ({ className, hideLabel, label = "Password", name, prompt = void 0, description, validation, appearance, theme, ...remainingProps }) => {
 	const { register } = (0, react_hook_form.useFormContext)();
 	const context = useFormCustomContext();
 	const { error } = useFieldError(name);
 	const ref = validation ? register(validation) : register;
 	const formAppearance = context?.appearance || appearance;
+	const formTheme = context?.theme ?? theme;
 	return /* @__PURE__ */ react.createElement(FieldWrapper, {
 		description,
 		error,
@@ -3431,6 +3450,7 @@ var PasswordField = ({ className, hideLabel, label = "Password", name, prompt =
 		id: name,
 		ref,
 		appearance: formAppearance,
+		theme: formTheme,
 		...error !== void 0 && { state: "error" },
 		...remainingProps
 	}));
@@ -4339,7 +4359,7 @@ var StyledIcon$1 = styled(Icon, {
 		lg: ["right-2.5", "size-5"]
 	} }
 });
-var SearchInput = react.forwardRef(({ size = "md", appearance = "standard", className, value, defaultValue = "", onValueChange, clearText = "Clear", onChange, ...remainingProps }, ref) => {
+var SearchInput = react.forwardRef(({ size = "md", appearance = "standard", theme, className, value, defaultValue = "", onValueChange, clearText = "Clear", onChange, ...remainingProps }, ref) => {
 	const [inputElRef, setInputElRef] = useCallbackRef();
 	const [innerValue, setInnerValue] = react.useState(defaultValue);
 	const [activeIcon, setActiveIcon] = react.useState(defaultValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH);
@@ -4383,6 +4403,7 @@ var SearchInput = react.forwardRef(({ size = "md", appearance = "standard", clas
 	return /* @__PURE__ */ react.createElement(InputBackground, {
 		size,
 		appearance,
+		theme,
 		className: (0, clsx.default)("relative", "w-auto", className)
 	}, /* @__PURE__ */ react.createElement(InputText, {
 		ref: setInputElRef,
@@ -5658,6 +5679,16 @@ var DateField = ({ className, hideLabel, label, name, validation, prompt, descri
 };
 DateField.displayName = "DateField";
 //#endregion
+//#region src/components/dialog/DialogActionBar.tsx
+var DialogActionBar = styled("div", { base: [
+	"border-t",
+	"border-grey-300",
+	"p-4",
+	"flex",
+	"gap-4",
+	"shadow-[0_-6px_6px_-1px_rgba(51,51,51,0.05)]"
+] });
+//#endregion
 //#region src/components/dialog/DialogBackground.tsx
 var DialogBackground = styled("div", { base: ["w-screen", "h-screen"] });
 //#endregion
@@ -5697,62 +5728,69 @@ var StyledDialogContent = styled(_radix_ui_react_dialog.Content, {
 		"motion-safe:data-[state=open]:animate-slide-in-center",
 		"motion-safe:data-[state=closed]:animate-slide-out-center"
 	],
-	variants: { size: {
-		xs: [
-			"rounded-md",
-			"size-auto",
-			"max-w-[90vw]",
-			"max-h-[90vh]",
-			"supports-svh:h-auto",
-			"supports-svh:max-h-[90vh]",
-			"w-95"
-		],
-		sm: [
-			"rounded-md",
-			"size-auto",
-			"max-w-[90vw]",
-			"max-h-[90vh]",
-			"supports-svh:h-auto",
-			"supports-svh:max-h-[90vh]",
-			"w-120"
-		],
-		md: [
-			"rounded-md",
-			"size-auto",
-			"max-w-[90vw]",
-			"max-h-[90vh]",
-			"supports-svh:h-auto",
-			"supports-svh:max-h-[90vh]",
-			"w-150"
-		],
-		lg: [
-			"rounded-md",
-			"size-auto",
-			"max-w-[90vw]",
-			"max-h-[90vh]",
-			"supports-svh:h-auto",
-			"supports-svh:max-h-[90vh]",
-			"w-200"
-		],
-		xl: [
-			"rounded-md",
-			"size-auto",
-			"max-w-[90vw]",
-			"max-h-[90vh]",
-			"supports-svh:h-auto",
-			"supports-svh:max-h-[90vh]",
-			"w-275"
-		],
-		fullscreen: [
-			"rounded-none",
-			"w-screen",
-			"h-screen",
-			"max-w-screen",
-			"max-h-screen",
-			"supports-svh:h-svh",
-			"supports-svh:max-h-svh"
-		]
-	} }
+	variants: {
+		size: {
+			xs: [
+				"rounded-md",
+				"size-auto",
+				"max-w-[90vw]",
+				"max-h-[90vh]",
+				"supports-svh:h-auto",
+				"supports-svh:max-h-[90vh]",
+				"w-95"
+			],
+			sm: [
+				"rounded-md",
+				"size-auto",
+				"max-w-[90vw]",
+				"max-h-[90vh]",
+				"supports-svh:h-auto",
+				"supports-svh:max-h-[90vh]",
+				"w-120"
+			],
+			md: [
+				"rounded-md",
+				"size-auto",
+				"max-w-[90vw]",
+				"max-h-[90vh]",
+				"supports-svh:h-auto",
+				"supports-svh:max-h-[90vh]",
+				"w-150"
+			],
+			lg: [
+				"rounded-md",
+				"size-auto",
+				"max-w-[90vw]",
+				"max-h-[90vh]",
+				"supports-svh:h-auto",
+				"supports-svh:max-h-[90vh]",
+				"w-200"
+			],
+			xl: [
+				"rounded-md",
+				"size-auto",
+				"max-w-[90vw]",
+				"max-h-[90vh]",
+				"supports-svh:h-auto",
+				"supports-svh:max-h-[90vh]",
+				"w-275"
+			],
+			fullscreen: [
+				"rounded-none",
+				"w-screen",
+				"h-screen",
+				"max-w-screen",
+				"max-h-screen",
+				"supports-svh:h-svh",
+				"supports-svh:max-h-svh"
+			]
+		},
+		layout: { panel: [
+			"flex",
+			"flex-col",
+			"p-0"
+		] }
+	}
 }, { enabledResponsiveVariants: true });
 var DialogContent = ({ size = "sm", children, closeDialogText = "Close dialog", showCloseButton = true, ...remainingProps }) => /* @__PURE__ */ react.createElement(_radix_ui_react_dialog.Portal, null, /* @__PURE__ */ react.createElement(StyledDialogOverlay, { id: modalOverlayId }, react.Children.map(children, (child) => child?.type === DialogBackground && child), /* @__PURE__ */ react.createElement(StyledDialogContent, {
 	size,
@@ -5785,13 +5823,33 @@ var DialogHeading = ({ className, ...rest }) => /* @__PURE__ */ react.createElem
 	className: (0, clsx.default)("border-b", "border-b-grey-200", "pb-8", "pt-0", "px-8", "mb-8", "-mx-8", "box-content", className)
 });
 //#endregion
+//#region src/components/dialog/DialogNavigationBar.tsx
+var DialogNavigationBar = styled("div", { base: [
+	"flex",
+	"justify-between",
+	"items-center",
+	"border-b",
+	"border-grey-300",
+	"p-4"
+] });
+//#endregion
+//#region src/components/dialog/DialogScrollableContent.tsx
+var DialogScrollableContent = styled("div", { base: [
+	"overflow-scroll",
+	"flex-1",
+	"p-4"
+] });
+//#endregion
 //#region src/components/dialog/Dialog.tsx
 var Dialog = Object.assign(_radix_ui_react_dialog.Root, {
+	ActionBar: DialogActionBar,
 	Background: DialogBackground,
 	Close: DialogClose$1,
 	Content: DialogContent,
 	Heading: DialogHeading,
 	Footer: DialogFooter,
+	NavigationBar: DialogNavigationBar,
+	ScrollableContent: DialogScrollableContent,
 	Description: _radix_ui_react_dialog.Description,
 	Title: _radix_ui_react_dialog.Title,
 	Trigger: _radix_ui_react_dialog.Trigger
@@ -6114,12 +6172,15 @@ Flex.displayName = "Flex";
 //#endregion
 //#region src/components/form/Form.tsx
 var Form = (props) => {
-	const { children, defaultValues, validationMode = "onBlur", onSubmit, onError, appearance, ...rest } = props;
+	const { children, defaultValues, validationMode = "onBlur", onSubmit, onError, appearance, theme, ...rest } = props;
 	const methods = (0, react_hook_form.useForm)({
 		defaultValues,
 		mode: validationMode
 	});
-	return /* @__PURE__ */ react.createElement(react_hook_form.FormProvider, methods, /* @__PURE__ */ react.createElement(FormCustomContext.Provider, { value: { appearance } }, /* @__PURE__ */ react.createElement("form", {
+	return /* @__PURE__ */ react.createElement(react_hook_form.FormProvider, methods, /* @__PURE__ */ react.createElement(FormCustomContext.Provider, { value: {
+		appearance,
+		theme
+	} }, /* @__PURE__ */ react.createElement("form", {
 		"aria-label": "form",
 		onSubmit: methods.handleSubmit(onSubmit, onError),
 		...rest
@@ -6157,12 +6218,13 @@ var Grid = ({ className, style, gap = "2", minItemSize, maxItemSize = "1fr", ...
 Grid.displayName = "Grid";
 //#endregion
 //#region src/components/input-field/InputField.tsx
-var InputField = ({ className, label, name, validation, prompt, description, hideLabel, appearance, ...remainingProps }) => {
+var InputField = ({ className, label, name, validation, prompt, description, hideLabel, appearance, theme, ...remainingProps }) => {
 	const { register } = (0, react_hook_form.useFormContext)();
 	const context = useFormCustomContext();
 	const { error } = useFieldError(name);
 	const ref = validation ? register(validation) : register;
 	const formAppearance = context?.appearance || appearance;
+	const formTheme = context?.theme ?? theme;
 	return /* @__PURE__ */ react.createElement(FieldWrapper, {
 		className,
 		description,
@@ -6178,6 +6240,7 @@ var InputField = ({ className, label, name, validation, prompt, description, hid
 		name,
 		ref,
 		appearance: formAppearance,
+		theme: formTheme,
 		...error && { state: "error" },
 		...remainingProps
 	}));
@@ -6910,6 +6973,10 @@ var StyledStepperButton = styled(ActionIcon, {
 				"hover:bg-grey-200!"
 			]
 		},
+		fieldTheme: {
+			white: [],
+			grey: []
+		},
 		emphasis: { bold: [
 			"[&_svg]:text-primary-700",
 			"hover:bg-primary-100!",
@@ -6918,18 +6985,26 @@ var StyledStepperButton = styled(ActionIcon, {
 			"active:[&_svg]:text-primary-900!"
 		] }
 	},
-	compoundVariants: [{
-		fieldAppearance: "standard",
-		emphasis: "bold",
-		class: ["bg-white", "border-primary-800!"]
-	}, {
-		fieldAppearance: "modern",
-		emphasis: "bold",
-		class: ["bg-white!", "hover:bg-primary-100!"]
-	}]
+	compoundVariants: [
+		{
+			fieldAppearance: "modern",
+			fieldTheme: "white",
+			class: ["bg-white"]
+		},
+		{
+			fieldAppearance: "standard",
+			emphasis: "bold",
+			class: ["bg-white", "border-primary-800!"]
+		},
+		{
+			fieldAppearance: "modern",
+			emphasis: "bold",
+			class: ["bg-white!", "hover:bg-primary-100!"]
+		}
+	]
 });
 var NumberInputStepper = react.forwardRef((props, forwardedRef) => {
-	const { icon, disabledTooltipContent, showTooltip, fieldAppearance = "standard", ...rest } = props;
+	const { icon, disabledTooltipContent, showTooltip, fieldAppearance = "standard", fieldTheme, ...rest } = props;
 	/**
 	* Focus has been removed from the button
 	* as the increment and decrement buttons should be keyboard accessible via arrow keys.
@@ -6943,6 +7018,7 @@ var NumberInputStepper = react.forwardRef((props, forwardedRef) => {
 		tabIndex: -1,
 		appearance: "outline",
 		fieldAppearance,
+		fieldTheme,
 		ref: forwardedRef,
 		...rest
 	}, /* @__PURE__ */ react.createElement(Icon, { is: icon })))), showTooltip && /* @__PURE__ */ react.createElement(Tooltip.Content, null, disabledTooltipContent));
@@ -6959,7 +7035,7 @@ var NumberInputContainer = styled("div", {
 		emphasis: { bold: ["gap-0"] }
 	}
 });
-var NumberInput = react.forwardRef(({ value, defaultValue = 0, onValueChange, min = 0, max = Number.MAX_SAFE_INTEGER, step = 1, disabled: isDisabled = false, readonly: isReadOnly = false, size = "md", stepperButtonLabels: stepperButtonLabelsProp, disabledTooltipContent: disabledTooltipContentProp, className, appearance = "standard", emphasis, ...rest }, ref) => {
+var NumberInput = react.forwardRef(({ value, defaultValue = 0, onValueChange, min = 0, max = Number.MAX_SAFE_INTEGER, step = 1, disabled: isDisabled = false, readonly: isReadOnly = false, size = "md", stepperButtonLabels: stepperButtonLabelsProp, disabledTooltipContent: disabledTooltipContentProp, className, appearance = "standard", theme, emphasis, ...rest }, ref) => {
 	const [internalValue, setInternalValue] = react.useState(value || defaultValue);
 	react.useEffect(() => {
 		if (typeof value !== "undefined") setInternalValue(value);
@@ -7052,6 +7128,7 @@ var NumberInput = react.forwardRef(({ value, defaultValue = 0, onValueChange, mi
 		onKeyDown,
 		size,
 		appearance,
+		theme,
 		state: externalState || (hasError ? "error" : void 0),
 		"aria-invalid": externalAriaInvalid || hasError || void 0,
 		className: (0, clsx.default)("rounded-none", "w-16", "[&_>_input]:text-center", "disabled:opacity-30", "disabled:pointer-events-none", emphasis === "bold" && [
@@ -7083,6 +7160,7 @@ var NumberInput = react.forwardRef(({ value, defaultValue = 0, onValueChange, mi
 		className: (0, clsx.default)(emphasis !== "bold" && "border-r-none rounded-r-none"),
 		size: iconSize,
 		fieldAppearance: appearance,
+		fieldTheme: theme,
 		emphasis,
 		disabled: isAtMin || isDisabled,
 		showTooltip: isAtMin && !isDisabled,
@@ -7094,6 +7172,7 @@ var NumberInput = react.forwardRef(({ value, defaultValue = 0, onValueChange, mi
 		className: (0, clsx.default)(emphasis !== "bold" && "border-l-none rounded-l-none"),
 		size: iconSize,
 		fieldAppearance: appearance,
+		fieldTheme: theme,
 		emphasis,
 		disabled: isAtMax || isDisabled,
 		showTooltip: isAtMax && !isDisabled,
@@ -7104,7 +7183,7 @@ var NumberInput = react.forwardRef(({ value, defaultValue = 0, onValueChange, mi
 NumberInput.displayName = "NumberInput";
 //#endregion
 //#region src/components/number-input-field/NumberInputField.tsx
-var NumberInputField = ({ className, defaultValue = 0, hideLabel, value, prompt, description, label, name, validation, onValueChange, appearance, ...remainingProps }) => {
+var NumberInputField = ({ className, defaultValue = 0, hideLabel, value, prompt, description, label, name, validation, onValueChange, appearance, theme, ...remainingProps }) => {
 	const { control } = (0, react_hook_form.useFormContext)();
 	const context = useFormCustomContext();
 	const { field: { ref, onChange, value: innerValue, name: innerName } } = (0, react_hook_form.useController)({
@@ -7115,6 +7194,7 @@ var NumberInputField = ({ className, defaultValue = 0, hideLabel, value, prompt,
 	});
 	const { error } = useFieldError(name);
 	const formAppearance = context?.appearance || appearance;
+	const formTheme = context?.theme ?? theme;
 	react.useEffect(() => {
 		if (typeof value !== "undefined") onChange(value);
 	}, [value]);
@@ -7143,6 +7223,7 @@ var NumberInputField = ({ className, defaultValue = 0, hideLabel, value, prompt,
 		},
 		value: innerValue,
 		appearance: formAppearance,
+		theme: formTheme,
 		...remainingProps
 	}));
 };
@@ -7349,12 +7430,13 @@ var RadioCardGroup = ({ className, children, size, isFullWidth, align, ...rest }
 })));
 //#endregion
 //#region src/components/search-field/SearchField.tsx
-var SearchField = ({ className, hideLabel, label, name, validation, prompt, description, appearance, ...remainingProps }) => {
+var SearchField = ({ className, hideLabel, label, name, validation, prompt, description, appearance, theme, ...remainingProps }) => {
 	const { register } = (0, react_hook_form.useFormContext)();
 	const context = useFormCustomContext();
 	const { error } = useFieldError(name);
 	const ref = validation ? register(validation) : register;
 	const formAppearance = context?.appearance || appearance;
+	const formTheme = context?.theme ?? theme;
 	return /* @__PURE__ */ react.createElement(FieldWrapper, {
 		className,
 		description,
@@ -7370,6 +7452,7 @@ var SearchField = ({ className, hideLabel, label, name, validation, prompt, desc
 		name,
 		ref,
 		appearance: formAppearance,
+		theme: formTheme,
 		...error && { state: "error" },
 		...remainingProps
 	}));
@@ -7556,6 +7639,10 @@ var StyledSelect = styled("select", {
 			]
 		},
 		state: { error: [] },
+		theme: {
+			white: [],
+			grey: []
+		},
 		appearance: {
 			standard: [
 				"bg-white",
@@ -7575,15 +7662,28 @@ var StyledSelect = styled("select", {
 			]
 		}
 	},
-	compoundVariants: [{
-		state: "error",
-		appearance: "standard",
-		class: ["border-danger"]
-	}, {
-		state: "error",
-		appearance: "modern",
-		class: ["bg-danger-light", "focus:outline-danger"]
-	}]
+	compoundVariants: [
+		{
+			state: "error",
+			appearance: "standard",
+			class: ["border-danger"]
+		},
+		{
+			state: "error",
+			appearance: "modern",
+			class: ["bg-danger-light", "focus:outline-danger"]
+		},
+		{
+			appearance: "modern",
+			theme: "white",
+			class: ["bg-white"]
+		},
+		{
+			appearance: "modern",
+			theme: "grey",
+			class: ["bg-grey-100"]
+		}
+	]
 }, { enabledResponsiveVariants: true });
 var Select = react.forwardRef(({ placeholder, children, size = "md", appearance = "standard", ...remainingProps }, ref) => {
 	const props = {
@@ -7602,12 +7702,13 @@ var Select = react.forwardRef(({ placeholder, children, size = "md", appearance
 Select.displayName = "Select";
 //#endregion
 //#region src/components/select-field/SelectField.tsx
-var SelectField = ({ className, hideLabel, children, name, label, validation, prompt, description, appearance, ...remainingProps }) => {
+var SelectField = ({ className, hideLabel, children, name, label, validation, prompt, description, appearance, theme, ...remainingProps }) => {
 	const { register } = (0, react_hook_form.useFormContext)();
 	const context = useFormCustomContext();
 	const { error } = useFieldError(name);
 	const ref = validation ? register(validation) : register;
 	const formAppearance = context?.appearance || appearance;
+	const formTheme = context?.theme ?? theme;
 	return /* @__PURE__ */ react.createElement(FieldWrapper, {
 		className,
 		description,
@@ -7622,6 +7723,7 @@ var SelectField = ({ className, hideLabel, children, name, label, validation, pr
 		name,
 		id: name,
 		appearance: formAppearance,
+		theme: formTheme,
 		...remainingProps,
 		ref,
 		...error && { state: "error" }
@@ -8656,18 +8758,35 @@ var StyledTextarea = styled("textarea", {
 				"focus-within:z-1"
 			]
 		},
-		state: { error: [] }
+		state: { error: [] },
+		theme: {
+			white: [],
+			grey: []
+		}
 	},
 	defaultVariants: { appearance: "standard" },
-	compoundVariants: [{
-		state: "error",
-		appearance: "standard",
-		class: ["border-danger"]
-	}, {
-		state: "error",
-		appearance: "modern",
-		class: ["bg-danger-light", "focus-within:outline-danger"]
-	}]
+	compoundVariants: [
+		{
+			state: "error",
+			appearance: "standard",
+			class: ["border-danger"]
+		},
+		{
+			state: "error",
+			appearance: "modern",
+			class: ["bg-danger-light", "focus-within:outline-danger"]
+		},
+		{
+			appearance: "modern",
+			theme: "white",
+			class: ["bg-white"]
+		},
+		{
+			appearance: "modern",
+			theme: "grey",
+			class: ["bg-grey-100"]
+		}
+	]
 });
 var Textarea = react.forwardRef((props, ref) => /* @__PURE__ */ react.createElement(StyledTextarea, {
 	...props,
@@ -8676,12 +8795,13 @@ var Textarea = react.forwardRef((props, ref) => /* @__PURE__ */ react.createElem
 Textarea.displayName = "Textarea";
 //#endregion
 //#region src/components/textarea-field/TextareaField.tsx
-var TextareaField = ({ className, hideLabel, label, name, validation, prompt, description, appearance, ...remainingProps }) => {
+var TextareaField = ({ className, hideLabel, label, name, validation, prompt, description, appearance, theme, ...remainingProps }) => {
 	const { register } = (0, react_hook_form.useFormContext)();
 	const context = useFormCustomContext();
 	const { error } = useFieldError(name);
 	const ref = validation ? register(validation) : register;
 	const formAppearance = context?.appearance || appearance;
+	const formTheme = context?.theme ?? theme;
 	return /* @__PURE__ */ react.createElement(FieldWrapper, {
 		className,
 		description,
@@ -8697,6 +8817,7 @@ var TextareaField = ({ className, hideLabel, label, name, validation, prompt, de
 		name,
 		ref,
 		appearance: formAppearance,
+		theme: formTheme,
 		...error && { state: "error" },
 		...remainingProps
 	}));