@marigold/components 16.1.0 → 17.0.1

package/dist/Checkbox-DIbAWlSt.cjs

@@ -0,0 +1,503 @@
+const require_index = require('./index.cjs');
+let react_aria_components = require("react-aria-components");
+let __marigold_system = require("@marigold/system");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let __react_aria_i18n = require("@react-aria/i18n");
+let __react_aria_utils = require("@react-aria/utils");
+
+//#region src/intl/messages.ts
+const intlMessages = {
+	"de-DE": {
+		bulkActionsAriaLabel: "Massenaktionen",
+		cancel: "Abbrechen",
+		close: "Schließen",
+		clearSelectionAriaLabel: "Auswahl löschen",
+		dropZoneLabel: "Dateien hierher ziehen",
+		edit: "Bearbeiten",
+		editCell: "Zelle bearbeiten",
+		help: "Hilfe",
+		hiddenBreadcrumbs: "Diese Breadcrumbs sind ausgeblendet",
+		items: "Elemente",
+		loadingMessage: "Lade...",
+		moreInfo: "Mehr Informationen",
+		noResultsFound: "Kein Ergebnis gefunden",
+		save: "Speichern",
+		removeAll: "Alle entfernen",
+		removeFile: "Datei entfernen",
+		showLess: "Weniger anzeigen",
+		showLessCount: "{count} weniger anzeigen",
+		showMore: "Mehr anzeigen",
+		showMoreCount: "{count} weitere anzeigen",
+		uploadLabel: "Hochladen"
+	},
+	"en-US": {
+		bulkActionsAriaLabel: "Bulk Actions",
+		cancel: "Cancel",
+		close: "Close",
+		clearSelectionAriaLabel: "Clear selection",
+		dropZoneLabel: "Drop files here",
+		edit: "Edit",
+		editCell: "Edit cell",
+		help: "Help",
+		hiddenBreadcrumbs: "These breadcrumbs are hidden",
+		items: "Items",
+		loadingMessage: "Loading...",
+		moreInfo: "More information",
+		noResultsFound: "No result found",
+		save: "Save",
+		removeAll: "Remove all",
+		removeFile: "Remove file",
+		showLess: "Show less",
+		showLessCount: "Show {count} less",
+		showMore: "Show more",
+		showMoreCount: "Show {count} more",
+		uploadLabel: "Upload"
+	}
+};
+
+//#endregion
+//#region src/icons/TriangleAlert.tsx
+const TriangleAlert = ({ size = 24, className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: size,
+	height: size,
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	className: (0, __marigold_system.cn)("shrink-0", className),
+	...props,
+	children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 9v4" }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 17h.01" })
+	]
+});
+
+//#endregion
+//#region src/HelpText/HelpText.tsx
+const HelpText = ({ variant, size, description, errorMessage, ...props }) => {
+	const classNames = (0, __marigold_system.useClassNames)({
+		component: "HelpText",
+		variant,
+		size
+	});
+	const ctx = (0, react.useContext)(react_aria_components.FieldErrorContext);
+	if (!description && !ctx?.isInvalid) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, __marigold_system.cn)(classNames.container),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.FieldError, {
+			...props,
+			className: "flex flex-col",
+			children: (validation) => {
+				/**
+				* Prefer custom error messages, fallback to native errors ones.
+				*
+				* Note that we can not merge custom and native error messages,
+				* because we can not distinguish the type of error messages
+				* in the native ones since it is just an array of strings.
+				*/
+				const messages = (typeof errorMessage === "function" ? errorMessage(validation) : errorMessage) || validation.validationErrors;
+				return Array.isArray(messages) ? messages.map((msg, idx) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center justify-start gap-1",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TriangleAlert, { className: (0, __marigold_system.cn)("h-4 w-4 shrink-0", classNames.icon) }), msg]
+				}, idx)) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-start justify-start gap-1",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TriangleAlert, { className: (0, __marigold_system.cn)("h-4 w-4 shrink-0", classNames.icon) }), messages]
+				});
+			}
+		}), ctx && ctx.isInvalid ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Text, {
+			slot: "description",
+			children: description
+		})]
+	});
+};
+
+//#endregion
+//#region src/Label/Label.tsx
+const _Label = ({ size, variant, children, ...props }) => {
+	const className = (0, __marigold_system.useClassNames)({
+		component: "Label",
+		size,
+		variant
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Label, {
+		...props,
+		className: (0, __marigold_system.cn)(className, "inline-flex"),
+		children
+	});
+};
+
+//#endregion
+//#region src/FieldBase/FieldBase.tsx
+const fixedForwardRef = react.forwardRef;
+const _FieldBase = (props, ref) => {
+	const { as: Component = "div", children, label, size, variant, width, description, errorMessage, className, ...rest } = props;
+	const classNames = (0, __marigold_system.useClassNames)({
+		component: "Field",
+		variant,
+		size
+	});
+	const isFractionWidth = width ? (0, __marigold_system.isFraction)(`${width}`) : false;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Component, {
+		ref,
+		className: (0, __marigold_system.cn)(
+			"group/field flex min-w-0 flex-col",
+			/**
+			* Width handling strategy:
+			* - For fixed widths (numeric scale values) and keyword widths (fit, full): Use `w-auto` to prevent layout shifts
+			* - For fraction widths (e.g., "1/2", "2/3"): Use the corresponding Tailwind class
+			*   (e.g., `w-1/2`) which allows the field to properly respond to its container's width
+			*/
+			width && !isFractionWidth ? "w-auto" : `w-(--container-width)`,
+			classNames,
+			className
+		),
+		style: {
+			...(0, __marigold_system.createWidthVar)("container-width", width ? `${width}` : "full"),
+			...(0, __marigold_system.createWidthVar)("field-width", width && !isFractionWidth ? `${width}` : "full")
+		},
+		"data-required": props.isRequired ? true : void 0,
+		"data-error": props.isInvalid ? true : void 0,
+		...rest,
+		children: [
+			label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_Label, {
+				variant,
+				size,
+				children: label
+			}) : null,
+			children,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HelpText, {
+				variant,
+				size,
+				description,
+				errorMessage
+			})
+		]
+	});
+};
+const FieldBase = fixedForwardRef(_FieldBase);
+
+//#endregion
+//#region src/icons/Check.tsx
+const Check = ({ size = 24, className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: size,
+	height: size,
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	className: (0, __marigold_system.cn)("shrink-0", className),
+	...props,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M20 6 9 17l-5-5" })
+});
+
+//#endregion
+//#region src/Collapsible/Context.tsx
+const CollapsibleContext = (0, react.createContext)(void 0);
+const CollapsibleProvider = ({ value, children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CollapsibleContext.Provider, {
+	value,
+	children
+});
+
+//#endregion
+//#region src/Collapsible/CollapsibleContent.tsx
+const CollapsibleContent = ({ variant, size, children, ...props }) => {
+	const classNames = (0, __marigold_system.useClassNames)({
+		component: "Collapsible",
+		variant,
+		size,
+		context: CollapsibleContext
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.DisclosurePanel, {
+		...props,
+		className: classNames.content,
+		children
+	});
+};
+
+//#endregion
+//#region src/Collapsible/CollapsibleTrigger.tsx
+const CollapsibleTrigger = ({ variant, size, children, level, ...props }) => {
+	const classNames = (0, __marigold_system.useClassNames)({
+		component: "Collapsible",
+		variant,
+		size,
+		context: CollapsibleContext
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Heading, {
+		level,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Button, {
+			...props,
+			slot: "trigger",
+			className: classNames.trigger,
+			children
+		})
+	});
+};
+
+//#endregion
+//#region src/Collapsible/Collapsible.tsx
+const Collapsible = ({ variant, size, children, unstyled, ...props }) => {
+	const classNames = (0, __marigold_system.useClassNames)({
+		component: "Collapsible",
+		variant,
+		size
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CollapsibleProvider, {
+		value: {
+			variant,
+			size
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Disclosure, {
+			...props,
+			className: (0, __marigold_system.cn)(classNames.container, unstyled && "expanded:contents expanded:[&_[role=group]]:contents"),
+			children
+		})
+	});
+};
+Collapsible.Trigger = CollapsibleTrigger;
+Collapsible.Content = CollapsibleContent;
+
+//#endregion
+//#region src/Collapsible/More.tsx
+const More = ({ children, defaultExpanded = false, unstyled = true, showCount = false, ...props }) => {
+	/**
+	* We need to add state here, because toggling on a checkbox will
+	* force a rerender and without the state the <Collapsible> will be collapsed.
+	*/
+	const [isExpanded, setIsExpanded] = (0, react.useState)(defaultExpanded);
+	const stringFormatter = (0, __react_aria_i18n.useLocalizedStringFormatter)(intlMessages, "marigold");
+	const count = `${react.Children.count(children)}`;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Collapsible, {
+		variant: "link",
+		unstyled,
+		isExpanded,
+		...props,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Collapsible.Content, { children }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Collapsible.Trigger, {
+			onPress: () => setIsExpanded(!isExpanded),
+			children: isExpanded ? stringFormatter.format(showCount ? "showLessCount" : "showLess").replace("{count}", count) : stringFormatter.format(showCount ? "showMoreCount" : "showMore").replace("{count}", count)
+		})]
+	});
+};
+
+//#endregion
+//#region src/utils/children.utils.ts
+const splitChildren = (children, at) => {
+	const childArray = react.Children.toArray(children);
+	if (at === void 0) return [childArray, []];
+	return [childArray.slice(0, at), childArray.slice(at)];
+};
+
+//#endregion
+//#region src/Checkbox/Context.tsx
+const CheckboxGroupContext = (0, react.createContext)(null);
+const useCheckboxGroupContext = () => (0, react.useContext)(CheckboxGroupContext);
+
+//#endregion
+//#region src/Checkbox/CheckboxGroup.tsx
+const CollapsibleGroup = ({ children }) => {
+	const state = (0, react.useContext)(react_aria_components.CheckboxGroupStateContext);
+	if (!children || children.length === 0) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(More, {
+		defaultExpanded: children.some((child) => (0, react.isValidElement)(child) && state.value.includes(child.props.value)),
+		showCount: true,
+		children
+	});
+};
+const _CheckboxGroup = ({ children, variant, size, required, disabled, readOnly, error, width, orientation = "vertical", collapseAt, ...rest }) => {
+	const classNames = (0, __marigold_system.useClassNames)({
+		component: "Checkbox",
+		variant,
+		size,
+		className: { group: "gap-x-2" }
+	});
+	const props = {
+		className: classNames.group,
+		isRequired: required,
+		isDisabled: disabled,
+		isReadOnly: readOnly,
+		isInvalid: error,
+		...rest
+	};
+	const [visibleChildren, collapsedChildren] = splitChildren(children, collapseAt);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldBase, {
+		as: react_aria_components.CheckboxGroup,
+		width,
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			role: "presentation",
+			"data-orientation": orientation,
+			className: (0, __marigold_system.cn)(classNames.group, "group/checkboxgroup flex items-start", orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CheckboxGroupContext.Provider, {
+				value: {
+					width,
+					variant,
+					size
+				},
+				children: [visibleChildren, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CollapsibleGroup, { children: collapsedChildren })]
+			})
+		})
+	});
+};
+
+//#endregion
+//#region src/icons/Minus.tsx
+const Minus = ({ size = 24, className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: size,
+	height: size,
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	className: (0, __marigold_system.cn)("shrink-0", className),
+	...props,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M5 12h14" })
+});
+
+//#endregion
+//#region src/Checkbox/Checkbox.tsx
+const Field = ({ description, children }) => {
+	const className = (0, __marigold_system.useClassNames)({ component: "Field" });
+	const descriptionId = (0, __react_aria_utils.useId)();
+	if (!description) return children;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_aria_components.Provider, {
+			values: [[react_aria_components.CheckboxContext, { "aria-describedby": descriptionId }], [react_aria_components.TextContext, { id: descriptionId }]],
+			children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HelpText, { description })]
+		})
+	});
+};
+const Icon = ({ className, checked, indeterminate, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"aria-hidden": "true",
+		className: (0, __marigold_system.cn)("flex shrink-0 grow-0 basis-4 items-center justify-center", "h-4 w-4 p-px", "bg-white", "rounded-[3px] border border-solid border-black", className),
+		...props,
+		children: indeterminate ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Minus, {
+			size: "12",
+			strokeWidth: "4"
+		}) : checked ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Check, {
+			size: "12",
+			strokeWidth: "4"
+		}) : null
+	});
+};
+const _Checkbox = (0, react.forwardRef)(({ error, disabled, readOnly, required, checked, defaultChecked, indeterminate, variant, size, label, description, ...rest }, ref) => {
+	const props = {
+		isIndeterminate: indeterminate,
+		isDisabled: disabled,
+		isReadOnly: readOnly,
+		isRequired: required,
+		isInvalid: error,
+		isSelected: checked,
+		defaultSelected: defaultChecked,
+		...rest
+	};
+	const group = useCheckboxGroupContext();
+	const classNames = (0, __marigold_system.useClassNames)({
+		component: "Checkbox",
+		variant: variant || group?.variant,
+		size: size || group?.size
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Field, {
+		description,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_components.Checkbox, {
+			ref,
+			className: (0, __marigold_system.cn)("group/checkbox flex items-center", "cursor-pointer data-disabled:cursor-not-allowed", classNames.container),
+			...props,
+			children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+				checked: isSelected,
+				indeterminate: isIndeterminate,
+				className: classNames.checkbox
+			}), label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: classNames.label,
+				children: label
+			})] })
+		})
+	});
+});
+_Checkbox.Group = _CheckboxGroup;
+
+//#endregion
+Object.defineProperty(exports, 'Check', {
+  enumerable: true,
+  get: function () {
+    return Check;
+  }
+});
+Object.defineProperty(exports, 'Collapsible', {
+  enumerable: true,
+  get: function () {
+    return Collapsible;
+  }
+});
+Object.defineProperty(exports, 'FieldBase', {
+  enumerable: true,
+  get: function () {
+    return FieldBase;
+  }
+});
+Object.defineProperty(exports, 'HelpText', {
+  enumerable: true,
+  get: function () {
+    return HelpText;
+  }
+});
+Object.defineProperty(exports, 'Minus', {
+  enumerable: true,
+  get: function () {
+    return Minus;
+  }
+});
+Object.defineProperty(exports, 'More', {
+  enumerable: true,
+  get: function () {
+    return More;
+  }
+});
+Object.defineProperty(exports, 'TriangleAlert', {
+  enumerable: true,
+  get: function () {
+    return TriangleAlert;
+  }
+});
+Object.defineProperty(exports, '_Checkbox', {
+  enumerable: true,
+  get: function () {
+    return _Checkbox;
+  }
+});
+Object.defineProperty(exports, '_CheckboxGroup', {
+  enumerable: true,
+  get: function () {
+    return _CheckboxGroup;
+  }
+});
+Object.defineProperty(exports, '_Label', {
+  enumerable: true,
+  get: function () {
+    return _Label;
+  }
+});
+Object.defineProperty(exports, 'intlMessages', {
+  enumerable: true,
+  get: function () {
+    return intlMessages;
+  }
+});
+Object.defineProperty(exports, 'splitChildren', {
+  enumerable: true,
+  get: function () {
+    return splitChildren;
+  }
+});