@marigold/components 16.1.0 → 17.0.0

package/dist/Checkbox-D6DudF_g.mjs

@@ -0,0 +1,431 @@
+import { Button, Checkbox, CheckboxContext, CheckboxGroup, CheckboxGroupStateContext, Disclosure, DisclosurePanel, FieldError, FieldErrorContext, Heading, Label, Provider, Text, TextContext } from "react-aria-components";
+import { cn, createWidthVar, isFraction, useClassNames } from "@marigold/system";
+import { Children, createContext, forwardRef, isValidElement, useContext, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useLocalizedStringFormatter } from "@react-aria/i18n";
+import { useId } from "@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__ */ 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: cn("shrink-0", className),
+	...props,
+	children: [
+		/* @__PURE__ */ 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__ */ jsx("path", { d: "M12 9v4" }),
+		/* @__PURE__ */ jsx("path", { d: "M12 17h.01" })
+	]
+});
+
+//#endregion
+//#region src/HelpText/HelpText.tsx
+const HelpText = ({ variant, size, description, errorMessage, ...props }) => {
+	const classNames = useClassNames({
+		component: "HelpText",
+		variant,
+		size
+	});
+	const ctx = useContext(FieldErrorContext);
+	if (!description && !ctx?.isInvalid) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(classNames.container),
+		children: [/* @__PURE__ */ jsx(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__ */ jsxs("div", {
+					className: "flex items-center justify-start gap-1",
+					children: [/* @__PURE__ */ jsx(TriangleAlert, { className: cn("h-4 w-4 shrink-0", classNames.icon) }), msg]
+				}, idx)) : /* @__PURE__ */ jsxs("div", {
+					className: "flex items-start justify-start gap-1",
+					children: [/* @__PURE__ */ jsx(TriangleAlert, { className: cn("h-4 w-4 shrink-0", classNames.icon) }), messages]
+				});
+			}
+		}), ctx && ctx.isInvalid ? null : /* @__PURE__ */ jsx(Text, {
+			slot: "description",
+			children: description
+		})]
+	});
+};
+
+//#endregion
+//#region src/Label/Label.tsx
+const _Label = ({ size, variant, children, ...props }) => {
+	const className = useClassNames({
+		component: "Label",
+		size,
+		variant
+	});
+	return /* @__PURE__ */ jsx(Label, {
+		...props,
+		className: cn(className, "inline-flex"),
+		children
+	});
+};
+
+//#endregion
+//#region src/FieldBase/FieldBase.tsx
+const fixedForwardRef = forwardRef;
+const _FieldBase = (props, ref) => {
+	const { as: Component$1 = "div", children, label, size, variant, width: width$1, description, errorMessage, className, ...rest } = props;
+	const classNames = useClassNames({
+		component: "Field",
+		variant,
+		size
+	});
+	const isFractionWidth = width$1 ? isFraction(`${width$1}`) : false;
+	return /* @__PURE__ */ jsxs(Component$1, {
+		ref,
+		className: 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$1 && !isFractionWidth ? "w-auto" : `w-(--container-width)`,
+			classNames,
+			className
+		),
+		style: {
+			...createWidthVar("container-width", width$1 ? `${width$1}` : "full"),
+			...createWidthVar("field-width", width$1 && !isFractionWidth ? `${width$1}` : "full")
+		},
+		"data-required": props.isRequired ? true : void 0,
+		"data-error": props.isInvalid ? true : void 0,
+		...rest,
+		children: [
+			label ? /* @__PURE__ */ jsx(_Label, {
+				variant,
+				size,
+				children: label
+			}) : null,
+			children,
+			/* @__PURE__ */ jsx(HelpText, {
+				variant,
+				size,
+				description,
+				errorMessage
+			})
+		]
+	});
+};
+const FieldBase = fixedForwardRef(_FieldBase);
+
+//#endregion
+//#region src/icons/Check.tsx
+const Check = ({ size = 24, className, ...props }) => /* @__PURE__ */ 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: cn("shrink-0", className),
+	...props,
+	children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+});
+
+//#endregion
+//#region src/Collapsible/Context.tsx
+const CollapsibleContext = createContext(void 0);
+const CollapsibleProvider = ({ value, children }) => /* @__PURE__ */ jsx(CollapsibleContext.Provider, {
+	value,
+	children
+});
+
+//#endregion
+//#region src/Collapsible/CollapsibleContent.tsx
+const CollapsibleContent = ({ variant, size, children, ...props }) => {
+	const classNames = useClassNames({
+		component: "Collapsible",
+		variant,
+		size,
+		context: CollapsibleContext
+	});
+	return /* @__PURE__ */ jsx(DisclosurePanel, {
+		...props,
+		className: classNames.content,
+		children
+	});
+};
+
+//#endregion
+//#region src/Collapsible/CollapsibleTrigger.tsx
+const CollapsibleTrigger = ({ variant, size, children, level, ...props }) => {
+	const classNames = useClassNames({
+		component: "Collapsible",
+		variant,
+		size,
+		context: CollapsibleContext
+	});
+	return /* @__PURE__ */ jsx(Heading, {
+		level,
+		children: /* @__PURE__ */ jsx(Button, {
+			...props,
+			slot: "trigger",
+			className: classNames.trigger,
+			children
+		})
+	});
+};
+
+//#endregion
+//#region src/Collapsible/Collapsible.tsx
+const Collapsible = ({ variant, size, children, unstyled, ...props }) => {
+	const classNames = useClassNames({
+		component: "Collapsible",
+		variant,
+		size
+	});
+	return /* @__PURE__ */ jsx(CollapsibleProvider, {
+		value: {
+			variant,
+			size
+		},
+		children: /* @__PURE__ */ jsx(Disclosure, {
+			...props,
+			className: 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] = useState(defaultExpanded);
+	const stringFormatter = useLocalizedStringFormatter(intlMessages, "marigold");
+	const count = `${Children.count(children)}`;
+	return /* @__PURE__ */ jsxs(Collapsible, {
+		variant: "link",
+		unstyled,
+		isExpanded,
+		...props,
+		children: [/* @__PURE__ */ jsx(Collapsible.Content, { children }), /* @__PURE__ */ 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 = 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 = createContext(null);
+const useCheckboxGroupContext = () => useContext(CheckboxGroupContext);
+
+//#endregion
+//#region src/Checkbox/CheckboxGroup.tsx
+const CollapsibleGroup = ({ children }) => {
+	const state = useContext(CheckboxGroupStateContext);
+	if (!children || children.length === 0) return null;
+	return /* @__PURE__ */ jsx(More, {
+		defaultExpanded: children.some((child) => isValidElement(child) && state.value.includes(child.props.value)),
+		showCount: true,
+		children
+	});
+};
+const _CheckboxGroup = ({ children, variant, size, required, disabled, readOnly, error, width: width$1, orientation = "vertical", collapseAt, ...rest }) => {
+	const classNames = 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__ */ jsx(FieldBase, {
+		as: CheckboxGroup,
+		width: width$1,
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			role: "presentation",
+			"data-orientation": orientation,
+			className: cn(classNames.group, "group/checkboxgroup flex items-start", orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"),
+			children: /* @__PURE__ */ jsxs(CheckboxGroupContext.Provider, {
+				value: {
+					width: width$1,
+					variant,
+					size
+				},
+				children: [visibleChildren, /* @__PURE__ */ jsx(CollapsibleGroup, { children: collapsedChildren })]
+			})
+		})
+	});
+};
+
+//#endregion
+//#region src/icons/Minus.tsx
+const Minus = ({ size = 24, className, ...props }) => /* @__PURE__ */ 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: cn("shrink-0", className),
+	...props,
+	children: /* @__PURE__ */ jsx("path", { d: "M5 12h14" })
+});
+
+//#endregion
+//#region src/Checkbox/Checkbox.tsx
+const Field = ({ description, children }) => {
+	const className = useClassNames({ component: "Field" });
+	const descriptionId = useId();
+	if (!description) return children;
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		children: /* @__PURE__ */ jsxs(Provider, {
+			values: [[CheckboxContext, { "aria-describedby": descriptionId }], [TextContext, { id: descriptionId }]],
+			children: [children, /* @__PURE__ */ jsx(HelpText, { description })]
+		})
+	});
+};
+const Icon = ({ className, checked, indeterminate, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": "true",
+		className: 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__ */ jsx(Minus, {
+			size: "12",
+			strokeWidth: "4"
+		}) : checked ? /* @__PURE__ */ jsx(Check, {
+			size: "12",
+			strokeWidth: "4"
+		}) : null
+	});
+};
+const _Checkbox = 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 = useClassNames({
+		component: "Checkbox",
+		variant: variant || group?.variant,
+		size: size || group?.size
+	});
+	return /* @__PURE__ */ jsx(Field, {
+		description,
+		children: /* @__PURE__ */ jsx(Checkbox, {
+			ref,
+			className: cn("group/checkbox flex items-center", "cursor-pointer data-disabled:cursor-not-allowed", classNames.container),
+			...props,
+			children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Icon, {
+				checked: isSelected,
+				indeterminate: isIndeterminate,
+				className: classNames.checkbox
+			}), label && /* @__PURE__ */ jsx("div", {
+				className: classNames.label,
+				children: label
+			})] })
+		})
+	});
+});
+_Checkbox.Group = _CheckboxGroup;
+
+//#endregion
+export { More as a, FieldBase as c, TriangleAlert as d, intlMessages as f, splitChildren as i, _Label as l, Minus as n, Collapsible as o, _CheckboxGroup as r, Check as s, _Checkbox as t, HelpText as u };