@atom-learning/components 9.0.0-beta.5 → 9.0.0

package/dist/index.cjs.js

@@ -380,7 +380,11 @@ var StyledButton = styled("button", {
 				"[&_svg]:size-[22px]"
 			]
 		},
-		isLoading: { true: ["cursor-not-allowed opacity-60 pointer-events-none"] },
+		isLoading: { true: [
+			"cursor-not-allowed",
+			"opacity-60",
+			"pointer-events-none"
+		] },
 		fullWidth: {
 			true: ["w-full"],
 			false: ["w-max"]
@@ -2359,10 +2363,6 @@ var BannerSlim = /* @__PURE__ */ Object.assign(BannerSlimComponent, {
 });
 BannerSlimComponent.displayName = "BannerSlim";
 //#endregion
-//#region src/components/box/Box.tsx
-var Box = styled("div", { base: [] });
-Box.displayName = "Box";
-//#endregion
 //#region src/components/carousel/CarouselArrows.tsx
 var ArrowButton = /* @__PURE__ */ styled("button", { base: [
 	"items-center",
@@ -6418,7 +6418,9 @@ var StyledDialogContent = styled(_radix_ui_react_dialog.Content, {
 				"max-h-[90vh]",
 				"supports-svh:h-auto",
 				"supports-svh:max-h-[90vh]",
-				"w-95"
+				"w-95",
+				"[&>[data-dialog-close]]:top-4",
+				"[&>[data-dialog-close]]:right-4"
 			],
 			sm: [
 				"rounded-md",
@@ -6427,7 +6429,9 @@ var StyledDialogContent = styled(_radix_ui_react_dialog.Content, {
 				"max-h-[90vh]",
 				"supports-svh:h-auto",
 				"supports-svh:max-h-[90vh]",
-				"w-120"
+				"w-120",
+				"[&>[data-dialog-close]]:top-4",
+				"[&>[data-dialog-close]]:right-4"
 			],
 			md: [
 				"rounded-md",
@@ -6436,7 +6440,9 @@ var StyledDialogContent = styled(_radix_ui_react_dialog.Content, {
 				"max-h-[90vh]",
 				"supports-svh:h-auto",
 				"supports-svh:max-h-[90vh]",
-				"w-150"
+				"w-150",
+				"[&>[data-dialog-close]]:top-4",
+				"[&>[data-dialog-close]]:right-4"
 			],
 			lg: [
 				"rounded-md",
@@ -6445,7 +6451,9 @@ var StyledDialogContent = styled(_radix_ui_react_dialog.Content, {
 				"max-h-[90vh]",
 				"supports-svh:h-auto",
 				"supports-svh:max-h-[90vh]",
-				"w-200"
+				"w-200",
+				"[&>[data-dialog-close]]:top-4",
+				"[&>[data-dialog-close]]:right-4"
 			],
 			xl: [
 				"rounded-md",
@@ -6454,7 +6462,9 @@ var StyledDialogContent = styled(_radix_ui_react_dialog.Content, {
 				"max-h-[90vh]",
 				"supports-svh:h-auto",
 				"supports-svh:max-h-[90vh]",
-				"w-275"
+				"w-275",
+				"[&>[data-dialog-close]]:top-4",
+				"[&>[data-dialog-close]]:right-4"
 			],
 			fullscreen: [
 				"rounded-none",
@@ -6463,7 +6473,9 @@ var StyledDialogContent = styled(_radix_ui_react_dialog.Content, {
 				"max-w-screen",
 				"max-h-screen",
 				"supports-svh:h-svh",
-				"supports-svh:max-h-svh"
+				"supports-svh:max-h-svh",
+				"[&>[data-dialog-close]]:top-safe-offset-4",
+				"[&>[data-dialog-close]]:right-safe-offset-4"
 			]
 		},
 		layout: { panel: [
@@ -6488,6 +6500,7 @@ var DialogContent = ({ size = "sm", children, closeDialogText = "Close dialog",
 			hasTooltip: false,
 			size: "md",
 			theme: "neutral",
+			"data-dialog-close": true,
 			className: "absolute top-4 right-4 size-12",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { is: _atom_learning_icons.Close })
 		}), react.Children.map(children, (child) => react.isValidElement(child) && child.type === DialogBackground ? null : child)]
@@ -6812,90 +6825,6 @@ var FileInput = ({ accept, children, className, disabled = false, multiple = fal
 };
 FileInput.displayName = "FileInput";
 //#endregion
-//#region src/components/flex/Flex.tsx
-var Flex = styled("div", {
-	base: ["flex"],
-	variants: {
-		direction: {
-			row: ["flex-row"],
-			"row-reverse": ["flex-row-reverse"],
-			column: ["flex-col"],
-			"column-reverse": ["flex-col-reverse"],
-			inherit: ["direction-[inherit]"],
-			initial: ["direction-[initial]"],
-			revert: ["direction-[revert]"],
-			"revert-layer": ["direction-[revert-layer]"],
-			unset: ["direction-[unset]"]
-		},
-		wrap: {
-			nowrap: ["flex-nowrap"],
-			wrap: ["flex-wrap"],
-			"wrap-reverse": ["flex-wrap-reverse"],
-			inherit: ["[flex-wrap:inherit]"],
-			initial: ["[flex-wrap:initial]"],
-			revert: ["[flex-wrap:revert]"],
-			"revert-layer": ["[flex-wrap:revert-layer]"],
-			unset: ["[flex-wrap:unset]"]
-		},
-		justify: {
-			normal: ["justify-normal"],
-			unsafe: ["[justify-content:unsafe]"],
-			safe: ["[justify-content:safe]"],
-			start: ["justify-start"],
-			center: ["justify-center"],
-			end: ["justify-end"],
-			"flex-start": ["justify-start"],
-			"flex-end": ["justify-end"],
-			left: ["[justify-content:left]"],
-			right: ["[justify-content:right]"],
-			"space-between": ["justify-between"],
-			"space-around": ["justify-around"],
-			"space-evenly": ["justify-evenly"],
-			stretch: ["justify-stretch"],
-			inherit: ["[justify-content:inherit]"],
-			initial: ["[justify-content:initial]"],
-			revert: ["[justify-content:revert]"],
-			"revert-layer": ["[justify-content:revert-layer]"],
-			unset: ["[justify-content:unset]"]
-		},
-		align: {
-			normal: ["[align-items:normal]"],
-			unsafe: ["[align-items:unsafe]"],
-			safe: ["[align-items:safe]"],
-			center: ["items-center"],
-			start: ["items-start"],
-			end: ["items-end"],
-			"self-start": ["[align-items:self-start]"],
-			"self-end": ["[align-items:self-end]"],
-			"flex-start": ["items-start"],
-			"flex-end": ["items-end"],
-			baseline: ["items-baseline"],
-			"first baseline": ["[align-items:first baseline]"],
-			"last baseline": ["[align-items:last baseline]"],
-			stretch: ["items-stretch"],
-			inherit: ["[align-items:inherit]"],
-			initial: ["[align-items:initial]"],
-			revert: ["[align-items:revert]"],
-			"revert-layer": ["[align-items:revert-layer]"],
-			unset: ["[align-items:unset]"]
-		},
-		gap: {
-			0: ["gap-0.5"],
-			1: ["gap-1"],
-			2: ["gap-2"],
-			3: ["gap-3"],
-			4: ["gap-4"],
-			24: ["gap-6"],
-			5: ["gap-8"],
-			6: ["gap-10"],
-			7: ["gap-12"],
-			8: ["gap-16"],
-			9: ["gap-20"]
-		}
-	}
-}, { enableResponsiveVariants: true });
-Flex.displayName = "Flex";
-//#endregion
 //#region src/components/form/Form.tsx
 var Form = (props) => {
 	const { children, defaultValues, validationMode = "onBlur", onSubmit, onError, appearance, theme, ...rest } = props;
@@ -6921,35 +6850,6 @@ var Form = (props) => {
 };
 Form.displayName = "Form";
 //#endregion
-//#region src/components/grid/Grid.tsx
-var GridContainer = styled("div", {
-	base: ["grid"],
-	variants: { gap: {
-		0: ["gap-0.5"],
-		1: ["gap-1"],
-		2: ["gap-2"],
-		3: ["gap-3"],
-		4: ["gap-4"],
-		24: ["gap-6"],
-		5: ["gap-8"],
-		6: ["gap-10"],
-		7: ["gap-12"],
-		8: ["gap-16"],
-		9: ["gap-20"]
-	} }
-}, { enableResponsiveVariants: true });
-var Grid = ({ className, style, gap = "2", minItemSize, maxItemSize = "1fr", ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GridContainer, {
-	...rest,
-	style: {
-		...style,
-		...minItemSize && { "--min-item-size": minItemSize },
-		...maxItemSize && { "--max-item-size": maxItemSize }
-	},
-	gap,
-	className: cn(minItemSize && ["grid-cols-[repeat(auto-fit,minmax(var(--min-item-size,0),var(--max-item-size,0)))]"], className)
-});
-Grid.displayName = "Grid";
-//#endregion
 //#region src/components/input-field/InputField.tsx
 var InputField = ({ className, label, name, validation, prompt, description, hideLabel, appearance, theme, ...rest }) => {
 	const { register } = (0, react_hook_form.useFormContext)();
@@ -7433,7 +7333,7 @@ var NavigationMenuComponent = ({ children, className, ...rest }) => {
 	const [activeItem, setActiveItem] = react.useState();
 	const [listWidth, setListWidth] = react.useState(0);
 	const listRef = react.useRef(null);
-	react.useLayoutEffect(() => {
+	react.useEffect(() => {
 		if (listRef.current) setListWidth(listRef.current.offsetWidth);
 	}, [react.Children.toArray(children).length]);
 	react.useEffect(() => {
@@ -10212,9 +10112,9 @@ var Toast$1 = /* @__PURE__ */ Object.assign(ToastComponent, {
 var ToastProviderBase = /* @__PURE__ */ styled("div", { base: [
 	"fixed",
 	"z-2147483647",
-	"inset-2",
+	"inset-safe-offset-2",
 	"pointer-events-none",
-	"sm:top-3"
+	"sm:top-safe-offset-3"
 ] });
 var ToastWrapper = /* @__PURE__ */ styled("div", {
 	base: [
@@ -10625,21 +10525,21 @@ var StyledRoot = styled("header", {
 	variants: {
 		hasScrolled: { true: ["shadow-[0px_4px_4px_-2px_rgba(31,31,31,0.1)]"] },
 		size: {
-			md: ["h-16"],
-			lg: ["h-24"]
+			md: ["h-safe-offset-top-16", "pt-safe"],
+			lg: ["h-safe-offset-top-24", "pt-safe"]
 		},
 		diffused: { true: ["supports-color-mix:bg-[color-mix(in_hsl,(--base-1)_70%,transparent)]", "supports-color-mix:backdrop-blur-sm"] },
 		appearance: {
 			standard: [
 				"w-screen",
 				"max-w-full",
-				"top-0",
+				"top-safe",
 				"border-b",
 				"border-b-(--border-bottom)"
 			],
 			rounded: [
 				"w-full",
-				"top-2",
+				"top-safe-offset-2",
 				"p-2",
 				"border",
 				"border-white",
@@ -11004,7 +10904,10 @@ var SegmentedControlRoot = ({ size, theme = "primary", defaultValue, children, v
 	const isControlled = value !== void 0;
 	const [internalValue, setInternalValue] = react.useState(defaultValue);
 	const currentValue = isControlled ? value : internalValue;
-	const handleValueChange = isControlled ? onValueChange : setInternalValue;
+	const handleValueChange = react.useCallback((newValue) => {
+		if (!isControlled) setInternalValue(newValue);
+		onValueChange?.(newValue);
+	}, [isControlled, onValueChange]);
 	react.useEffect(() => {
 		if (!isControlled && defaultValue) setInternalValue(defaultValue);
 	}, [defaultValue, isControlled]);
@@ -11132,7 +11035,6 @@ exports.Avatar = Avatar;
 exports.Badge = Badge;
 exports.BannerRegular = BannerRegular;
 exports.BannerSlim = BannerSlim;
-exports.Box = Box;
 exports.Button = Button;
 exports.Carousel = Carousel;
 exports.Checkbox = Checkbox;
@@ -11159,9 +11061,7 @@ exports.EmptyState = EmptyState;
 exports.FieldWrapper = FieldWrapper;
 exports.FileDrop = FileDrop;
 exports.FileInput = FileInput;
-exports.Flex = Flex;
 exports.Form = Form;
-exports.Grid = Grid;
 exports.Heading = Heading;
 exports.Icon = Icon;
 exports.Image = Image;