@atom-learning/components 11.0.0 → 11.2.0-beta.1

package/dist/index.cjs.js

@@ -36,8 +36,8 @@ react = __toESM(react, 1);
 let _radix_ui_react_compose_refs = require("@radix-ui/react-compose-refs");
 let clsx = require("clsx");
 clsx = __toESM(clsx, 1);
-let tailwind_merge = require("tailwind-merge");
 let tailwind_variants = require("tailwind-variants");
+let tailwind_merge = require("tailwind-merge");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _atom_learning_icons = require("@atom-learning/icons");
 let _radix_ui_react_slot = require("@radix-ui/react-slot");
@@ -88,13 +88,74 @@ let _radix_ui_react_tabs = require("@radix-ui/react-tabs");
 let react_hot_toast = require("react-hot-toast");
 let react_player_vimeo_js = require("react-player/vimeo.js");
 react_player_vimeo_js = __toESM(react_player_vimeo_js, 1);
-//#region src/styled.tsx
-tailwind_variants.defaultConfig.twMerge = false;
+//#region src/utilities/tw-merge/index.ts
 var ARBITRARY_NUMBER_RE = /^\[[\d.]+\]$/;
 var isArbitraryNumber = (value) => ARBITRARY_NUMBER_RE.test(value) || !Number.isNaN(Number(value));
-var DATA_STATE_VARIANT_RE = /^data-\[state=[^\]]+\]:/;
+var SAFE_AREA_VALUE_RE = /^safe(-(or|offset)-(\d+|\[\d+\]))?$/;
+var SAFE_HEIGHT_VALUE_RE = /^(screen|dvh|svh|lvh|vh|fill)-safe$/;
+var SAFE_OFFSET_HEIGHT_VALUE_RE = /^safe-offset-top-(\d+|\[\d+\])$/;
+var isSafeAreaValue = (value) => SAFE_AREA_VALUE_RE.test(value);
+var isSafeHeightValue = (value) => SAFE_HEIGHT_VALUE_RE.test(value);
+var isSafeOffsetHeightValue = (value) => SAFE_OFFSET_HEIGHT_VALUE_RE.test(value);
+/**
+* tailwind-merge configured for this library's own utilities (capsize,
+* `h-safe-offset-top-*`) and for the tailwindcss-safe-area plugin. Classes not
+* registered in a class group are passed through untouched and never enter
+* conflict resolution, so any utility we add outside core Tailwind has to be
+* declared here or a later conflicting class cannot reset it.
+*/
 var twMerge = (0, tailwind_merge.extendTailwindMerge)({ extend: {
 	classGroups: {
+		...Object.fromEntries([
+			"p",
+			"px",
+			"py",
+			"ps",
+			"pe",
+			"pt",
+			"pr",
+			"pb",
+			"pl",
+			"m",
+			"mx",
+			"my",
+			"ms",
+			"me",
+			"mt",
+			"mr",
+			"mb",
+			"ml",
+			"scroll-p",
+			"scroll-px",
+			"scroll-py",
+			"scroll-ps",
+			"scroll-pe",
+			"scroll-pt",
+			"scroll-pr",
+			"scroll-pb",
+			"scroll-pl",
+			"scroll-m",
+			"scroll-mx",
+			"scroll-my",
+			"scroll-ms",
+			"scroll-me",
+			"scroll-mt",
+			"scroll-mr",
+			"scroll-mb",
+			"scroll-ml",
+			"inset",
+			"inset-x",
+			"inset-y",
+			"top",
+			"right",
+			"bottom",
+			"left",
+			"start",
+			"end"
+		].map((group) => [group, [{ [group]: [isSafeAreaValue] }]])),
+		h: [{ h: [isSafeHeightValue, isSafeOffsetHeightValue] }],
+		"min-h": [{ "min-h": [isSafeHeightValue] }],
+		"max-h": [{ "max-h": [isSafeHeightValue] }],
 		capsize: [{ capsize: ["none", isArbitraryNumber] }],
 		"capsize-before": [{ "capsize-before": [isArbitraryNumber] }],
 		"capsize-after": [{ "capsize-after": [isArbitraryNumber] }]
@@ -105,7 +166,21 @@ var twMerge = (0, tailwind_merge.extendTailwindMerge)({ extend: {
 		"capsize-after": ["capsize"]
 	}
 } });
+/** Compose class names (clsx) and resolve Tailwind conflicts (twMerge). */
 var cn = (...inputs) => twMerge((0, clsx.default)(inputs));
+//#endregion
+//#region src/styled.tsx
+tailwind_variants.defaultConfig.twMerge = false;
+var DATA_STATE_VARIANT_RE = /^data-\[state=[^\]]+\]:/;
+var BREAKPOINTS = [
+	"@initial",
+	"@sm",
+	"@md",
+	"@lg",
+	"@xl"
+];
+var isResponsiveValue = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+var atBreakpoint = (breakpoint, cls) => breakpoint === "@initial" ? cls : `${breakpoint.replace("@", "")}:${cls}`;
 var Theme = ({ children, theme }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 	className: "contents",
 	style: theme,
@@ -117,6 +192,11 @@ function styled(el, styles, options) {
 	const variantKeySet = new Set(variantKeys);
 	const enableResponsiveVariants = options?.enableResponsiveVariants === true;
 	const tvFn = (0, tailwind_variants.tv)(styles);
+	const compoundVariants = styles.compoundVariants ?? [];
+	const tvFnWithoutCompoundVariants = enableResponsiveVariants && compoundVariants.length > 0 ? (0, tailwind_variants.tv)({
+		...styles,
+		compoundVariants: []
+	}) : null;
 	const Comp = (props) => {
 		const { ref } = props;
 		const additionalStyles = enableResponsiveVariants ? variantKeys.flatMap((variantKey) => {
@@ -132,7 +212,39 @@ function styled(el, styles, options) {
 			});
 			return [];
 		}) : [];
-		const cls = tvFn(variantKeys.length > 0 ? Object.fromEntries(Object.entries(props).flatMap(([key, value]) => {
+		const hasResponsiveVariantProp = enableResponsiveVariants && variantKeys.some((variantKey) => isResponsiveValue(props[variantKey]));
+		const variantValueAt = (variantKey, breakpoint) => {
+			const value = props[variantKey];
+			const fallback = styles.defaultVariants?.[variantKey];
+			if (!isResponsiveValue(value)) return value ?? fallback;
+			for (let i = BREAKPOINTS.indexOf(breakpoint); i >= 0; i--) {
+				const valueAtBreakpoint = value[BREAKPOINTS[i]];
+				if (valueAtBreakpoint !== void 0) return valueAtBreakpoint;
+			}
+			return fallback;
+		};
+		const compoundStyles = hasResponsiveVariantProp ? (() => {
+			const breakpoints = BREAKPOINTS.filter((breakpoint) => breakpoint === "@initial" || variantKeys.some((variantKey) => {
+				const value = props[variantKey];
+				return isResponsiveValue(value) && breakpoint in value;
+			}));
+			return compoundVariants.flatMap(({ class: compoundClass, ...conditions }) => {
+				if (!compoundClass) return [];
+				const classes = Array.isArray(compoundClass) ? compoundClass : [compoundClass];
+				let matchedBelow = false;
+				return breakpoints.flatMap((breakpoint) => {
+					const matches = Object.entries(conditions).every(([variantKey, condition]) => {
+						const value = String(variantValueAt(variantKey, breakpoint));
+						return Array.isArray(condition) ? condition.some((option) => String(option) === value) : String(condition) === value;
+					});
+					const alreadyEmitted = matchedBelow;
+					matchedBelow = matches;
+					if (!matches || alreadyEmitted) return [];
+					return classes.map((cls) => atBreakpoint(breakpoint, cls));
+				});
+			});
+		})() : [];
+		const propsForTv = variantKeys.length > 0 ? Object.fromEntries(Object.entries(props).flatMap(([key, value]) => {
 			if (!variantKeySet.has(key)) return [];
 			const variantConfig = styles.variants?.[key];
 			if (variantConfig && "true" in variantConfig && "false" in variantConfig) {
@@ -140,9 +252,10 @@ function styled(el, styles, options) {
 				return [[key, null]];
 			}
 			return [[key, value]];
-		})) : {});
+		})) : {};
+		const cls = (hasResponsiveVariantProp && tvFnWithoutCompoundVariants ? tvFnWithoutCompoundVariants : tvFn)(propsForTv);
 		const filteredProps = Object.fromEntries(Object.entries(props).filter(([key]) => !variantKeySet.has(key) && key !== "as" && key !== "__wrapperClasses"));
-		const mergedClassName = (0, clsx.default)(cls, additionalStyles).trim();
+		const mergedClassName = (0, clsx.default)(cls, additionalStyles, compoundStyles).trim();
 		const propsClassName = props.className;
 		const wrapperClasses = props.__wrapperClasses;
 		if (typeof el === "string" || typeof el === "function" || el && typeof el === "object") {
@@ -775,6 +888,9 @@ var StyledButton = styled("button", {
 		"ease-out",
 		"whitespace-nowrap",
 		"w-max",
+		"select-none",
+		"[-webkit-touch-callout:none]",
+		"[-webkit-tap-highlight-color:transparent]",
 		"disabled:cursor-not-allowed",
 		"disabled:opacity-30"
 	],
@@ -3719,19 +3835,21 @@ var Combobox = /* @__PURE__ */ Object.assign(_reach_combobox.Combobox, {
 });
 //#endregion
 //#region src/components/field-wrapper/FieldWrapper.tsx
-var FieldWrapper = ({ children, error, fieldId, label, prompt, description, required, hideLabel, appearance, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+var FieldWrapper = ({ children, error, fieldId, label, labelId, prompt, description, required, hideLabel, appearance, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 	...rest,
 	children: [
 		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: cn("mb-3", "flex", "items-center", "justify-between", hideLabel && "sr-only"),
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Label, {
 				htmlFor: fieldId,
+				id: labelId,
 				required,
 				appearance,
 				children: label
 			}), prompt && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Link, {
 				href: prompt?.link,
 				onClick: prompt?.onClick,
+				reloadDocument: prompt?.reloadDocument,
 				size: "sm",
 				children: prompt.label
 			})]
@@ -6570,7 +6688,7 @@ var DialogFooter = styled("footer", { base: [
 var DialogHeading = ({ className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Heading, {
 	size: "sm",
 	...rest,
-	className: cn("border-b", "border-b-grey-200", "pb-8", "pt-0", "px-8", "mb-8", "-mx-8", "box-content", className)
+	className: cn("border-b", "border-b-grey-200", "pb-8", "pt-0", "px-8", "mb-8", "-mx-8", "box-content", "[&_*]:box-border", className)
 });
 //#endregion
 //#region src/components/dialog/DialogNavigationBar.tsx
@@ -8557,16 +8675,20 @@ var SelectMenuContext = react.createContext({
 var useSelectMenuContext = () => react.use(SelectMenuContext);
 //#endregion
 //#region src/components/select-menu/SelectMenuContent.tsx
-var Content$2 = styled(react_aria_components.Popover, { base: [
-	"bg-white",
-	"rounded-md",
-	"shadow-lg",
-	"z-10",
-	"overflow-hidden",
-	"will-change-transform",
-	"min-w-[var(--trigger-width)]",
-	"max-w-[min(calc(100vw-(--spacing(4))),--spacing(100))]"
-] }, { enablePolymorphism: false });
+var Content$2 = styled(react_aria_components.Popover, {
+	base: [
+		"bg-white",
+		"rounded-md",
+		"shadow-lg",
+		"z-10",
+		"overflow-hidden",
+		"will-change-transform"
+	],
+	variants: { matchTriggerWidth: {
+		true: ["w-(--trigger-width)"],
+		false: ["min-w-(--trigger-width)", "max-w-[min(calc(100vw-(--spacing(4))),--spacing(100))]"]
+	} }
+}, { enablePolymorphism: false });
 var Viewport = styled(react_aria_components.ListBox, { base: [
 	"max-h-[inherit]",
 	"w-full",
@@ -8574,10 +8696,11 @@ var Viewport = styled(react_aria_components.ListBox, { base: [
 	"p-1",
 	"outline-none"
 ] }, { enablePolymorphism: false });
-var SelectMenuContent = ({ ref, children, offset = 4, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Content$2, {
+var SelectMenuContent = ({ ref, children, offset = 4, matchTriggerWidth = false, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Content$2, {
 	ref,
 	offset,
 	containerPadding: 8,
+	matchTriggerWidth,
 	...rest,
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Viewport, { children })
 });
@@ -8591,6 +8714,7 @@ var Item = styled(react_aria_components.ListBoxItem, {
 		"text-grey-1000",
 		"font-body",
 		"font-normal",
+		"leading-normal",
 		"cursor-pointer",
 		"rounded-sm",
 		"outline-none",
@@ -8602,18 +8726,18 @@ var Item = styled(react_aria_components.ListBoxItem, {
 	],
 	variants: { size: {
 		sm: [
-			"py-1.5",
+			"py-2",
 			"pl-7",
 			"pr-4",
 			"text-sm"
 		],
 		md: [
-			"py-2",
+			"py-2.5",
 			"pl-8",
 			"pr-6"
 		],
 		lg: [
-			"py-2",
+			"py-2.5",
 			"pl-8",
 			"pr-6"
 		]
@@ -8623,7 +8747,7 @@ var SelectMenuItem = ({ children, textValue, ...rest }) => {
 	const { size } = useSelectMenuContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Item, {
 		size,
-		textValue: textValue ?? (typeof children === "string" ? children : void 0),
+		textValue: textValue ?? (typeof children === "string" || typeof children === "number" ? String(children) : void 0),
 		...rest,
 		children: ({ isSelected }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "absolute left-2 inline-flex items-center",
@@ -8771,6 +8895,7 @@ var SelectMenuField = ({ className, hideLabel, children, name, label, validation
 	const context = useFormCustomContext();
 	const { error } = useFieldError(name);
 	const formTheme = context?.theme ?? theme;
+	const labelId = `${name}-label`;
 	const { field: { ref, onChange, value } } = (0, react_hook_form.useController)({
 		name,
 		control,
@@ -8784,10 +8909,11 @@ var SelectMenuField = ({ className, hideLabel, children, name, label, validation
 		fieldId: name,
 		hideLabel,
 		label,
+		labelId,
 		prompt,
 		required: Boolean(validation?.required),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SelectMenu, {
-			"aria-label": label,
+			"aria-labelledby": labelId,
 			selectedKey: value === "" ? null : value,
 			onSelectionChange: onChange,
 			size,
@@ -8797,6 +8923,8 @@ var SelectMenuField = ({ className, hideLabel, children, name, label, validation
 			...rest,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectMenu.Trigger, {
 				ref,
+				id: name,
+				"aria-labelledby": labelId,
 				placeholder
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectMenu.Content, { children })]
 		})
@@ -9182,10 +9310,10 @@ var SkeletonTable = ({ numberOfColumns = 4, numberOfRows = 4, columnWidth, class
 		size: "md",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Table.Header, {
 			theme: "white",
-			children: Array.from({ length: numberOfColumns }, (_, index) => index).map((columnIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Table.HeaderCell, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonLoader, {
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Table.Row, { children: Array.from({ length: numberOfColumns }, (_, index) => index).map((columnIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Table.HeaderCell, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonLoader, {
 				style: { "--width": columnWidth?.[columnIndex] || "100px" },
 				className: "h-4 w-(--width) rounded-xl"
-			}) }, columnIndex))
+			}) }, columnIndex)) })
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Table.Body, {
 			striped: false,
 			children: Array.from({ length: numberOfRows }, (_, index) => index).map((rowIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Table.Row, { children: Array.from({ length: numberOfColumns }, (_, index) => index).map((columnIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Table.Cell, {
@@ -10606,7 +10734,7 @@ var StyledRoot = styled("header", {
 			standard: [
 				"w-screen",
 				"max-w-full",
-				"top-safe",
+				"top-0",
 				"border-b",
 				"border-b-(--border-bottom)"
 			],