@atom-learning/components 6.9.0 → 6.10.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,
@@ -6114,12 +6135,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 +6181,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 +6203,7 @@ var InputField = ({ className, label, name, validation, prompt, description, hid
 		name,
 		ref,
 		appearance: formAppearance,
+		theme: formTheme,
 		...error && { state: "error" },
 		...remainingProps
 	}));
@@ -6910,6 +6936,10 @@ var StyledStepperButton = styled(ActionIcon, {
 				"hover:bg-grey-200!"
 			]
 		},
+		fieldTheme: {
+			white: [],
+			grey: []
+		},
 		emphasis: { bold: [
 			"[&_svg]:text-primary-700",
 			"hover:bg-primary-100!",
@@ -6918,18 +6948,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 +6981,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 +6998,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 +7091,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 +7123,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 +7135,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 +7146,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 +7157,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 +7186,7 @@ var NumberInputField = ({ className, defaultValue = 0, hideLabel, value, prompt,
 		},
 		value: innerValue,
 		appearance: formAppearance,
+		theme: formTheme,
 		...remainingProps
 	}));
 };
@@ -7349,12 +7393,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 +7415,7 @@ var SearchField = ({ className, hideLabel, label, name, validation, prompt, desc
 		name,
 		ref,
 		appearance: formAppearance,
+		theme: formTheme,
 		...error && { state: "error" },
 		...remainingProps
 	}));
@@ -7556,6 +7602,10 @@ var StyledSelect = styled("select", {
 			]
 		},
 		state: { error: [] },
+		theme: {
+			white: [],
+			grey: []
+		},
 		appearance: {
 			standard: [
 				"bg-white",
@@ -7575,15 +7625,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 +7665,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 +7686,7 @@ var SelectField = ({ className, hideLabel, children, name, label, validation, pr
 		name,
 		id: name,
 		appearance: formAppearance,
+		theme: formTheme,
 		...remainingProps,
 		ref,
 		...error && { state: "error" }
@@ -8656,18 +8721,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 +8758,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 +8780,7 @@ var TextareaField = ({ className, hideLabel, label, name, validation, prompt, de
 		name,
 		ref,
 		appearance: formAppearance,
+		theme: formTheme,
 		...error && { state: "error" },
 		...remainingProps
 	}));