@atom-learning/components 6.11.0 → 6.13.1

package/dist/index.cjs.js

@@ -3096,15 +3096,12 @@ ChipToggleGroup.displayName = "ChipToggleGroupItem";
 //#region src/components/combobox/ComboboxInput.tsx
 var StyledComboboxInput = styled(_reach_combobox.ComboboxInput, {
 	base: [
-		"bg-white",
 		"bg-(image:--bg-chevron)",
 		"bg-position-[right_--spacing(3)_top_50%,0_0]",
 		"[background-repeat:no-repeat,repeat-x]",
 		"bg-size-[--spacing(5)_auto,100%]",
 		"shadow-none",
 		"appearance-none",
-		"border",
-		"border-grey-700",
 		"rounded-md",
 		"box-border",
 		"text-grey-1000",
@@ -3120,8 +3117,6 @@ var StyledComboboxInput = styled(_reach_combobox.ComboboxInput, {
 		"w-full",
 		"placeholder:opacity-100",
 		"placeholder:text-grey-700",
-		"focus-within:border-primary-800",
-		"focus-within:outline-none",
 		"disabled:bg-grey-200",
 		"disabled:cursor-not-allowed",
 		"disabled:text-grey-800"
@@ -3144,11 +3139,56 @@ var StyledComboboxInput = styled(_reach_combobox.ComboboxInput, {
 				"leading-loose"
 			]
 		},
-		state: { error: ["border", "border-danger"] }
-	}
+		appearance: {
+			standard: [
+				"bg-white",
+				"border",
+				"border-grey-700",
+				"focus-within:border-primary-800",
+				"focus-within:outline-none"
+			],
+			modern: [
+				"bg-grey-100",
+				"border-none",
+				"focus-within:outline-2",
+				"focus-within:outline-blue-800",
+				"focus-within:outline-offset-1",
+				"focus-within:outline-solid",
+				"focus-within:z-1"
+			]
+		},
+		theme: {
+			white: [],
+			grey: []
+		},
+		state: { error: [] }
+	},
+	compoundVariants: [
+		{
+			state: "error",
+			appearance: "standard",
+			class: ["border", "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 ComboboxInput = react.forwardRef(({ size = "md", ...rest }, ref) => /* @__PURE__ */ react.createElement(StyledComboboxInput, {
+var ComboboxInput = react.forwardRef(({ size = "md", appearance = "standard", ...rest }, ref) => /* @__PURE__ */ react.createElement(StyledComboboxInput, {
 	size,
+	appearance,
 	...rest,
 	ref
 }));
@@ -5569,7 +5609,7 @@ var DEFAULT_DATE_FORMAT = "DD/MM/YYYY";
 //#region src/components/date-input/DateInput.tsx
 dayjs.default.extend(dayjs_plugin_customParseFormat.default);
 var formatDateToString = (date, dateFormat = DEFAULT_DATE_FORMAT) => date ? (0, dayjs.default)(date).format(dateFormat) : "";
-var DateInput = react.forwardRef(({ initialDate, dateFormat = DEFAULT_DATE_FORMAT, firstDayOfWeek = 1, disabled, monthNames, weekdayNames, size = "md", labels, revalidate, onChange, minDate, maxDate, ...remainingProps }, ref) => {
+var DateInput = react.forwardRef(({ initialDate, dateFormat = DEFAULT_DATE_FORMAT, firstDayOfWeek = 1, disabled, monthNames, weekdayNames, size = "md", appearance, theme, labels, revalidate, onChange, minDate, maxDate, ...remainingProps }, ref) => {
 	const [date, setDate] = react.useState(initialDate ? (0, dayjs.default)(initialDate).toDate() : void 0);
 	const [inputElRef, setInputElRef] = useCallbackRefState();
 	react.useImperativeHandle(ref, () => inputElRef);
@@ -5603,6 +5643,8 @@ var DateInput = react.forwardRef(({ initialDate, dateFormat = DEFAULT_DATE_FORMA
 		name: "date",
 		disabled,
 		size,
+		appearance,
+		theme,
 		...remainingProps,
 		onChange: handleInputChange,
 		ref: setInputElRef,
@@ -5653,10 +5695,13 @@ var DateInput = react.forwardRef(({ initialDate, dateFormat = DEFAULT_DATE_FORMA
 DateInput.displayName = "DateInput";
 //#endregion
 //#region src/components/date-field/DateField.tsx
-var DateField = ({ className, hideLabel, label, name, validation, prompt, description, appearance, ...remainingProps }) => {
+var DateField = ({ className, hideLabel, label, name, validation, prompt, description, appearance, theme, ...remainingProps }) => {
 	const { register, trigger } = (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,
@@ -5666,12 +5711,13 @@ var DateField = ({ className, hideLabel, label, name, validation, prompt, descri
 		label,
 		prompt,
 		required: Boolean(validation?.required),
-		appearance
+		appearance: formAppearance
 	}, /* @__PURE__ */ react.createElement(DateInput, {
 		id: name,
 		name,
 		ref,
-		appearance,
+		appearance: formAppearance,
+		theme: formTheme,
 		...error && { state: "error" },
 		...remainingProps,
 		revalidate: trigger