@atom-learning/components 6.10.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
@@ -5679,6 +5725,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
@@ -5718,62 +5774,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,
@@ -5806,13 +5869,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