@evolve.ui/core-components 1.0.0

package/chips/chip.mjs

@@ -0,0 +1,98 @@
+'use client';
+import { CaretDown, Check, Close, SlidersHorizontal } from "../Icons.mjs";
+import { LabelStrong } from "../Typography/Text.mjs";
+import { cn } from "@evolve.ui/theme-system";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Chips/Chip.tsx
+/**
+* Chip component that can be used for filters, suggestions, or input selections
+* see Storybook for design-approved implementation examples
+* @param children - Content to display inside the chip
+* @param className - Additional CSS classes to apply
+* @param disabled - Whether the chip is disabled
+* @param filterCount - Number to display for filter count (only used with style="allFilters")
+* @param onClick - Click handler for the chip
+* @param onClose - Handler for when close button is clicked
+* @param selected - Whether the chip is in selected state
+* @param size - Size of the chip: "xs" | "md" (default: "md") - Note: x-small size is only used for input chips
+* @param style - Visual style: "suggestion" | "input" | "singleFilter" | "allFilters" | "selectable" (default: "suggestion")
+*/
+const Chip = ({ "aria-haspopup": ariaHasPopup, "aria-label": ariaLabel, as: Component = "button", children, className, disabled, filterCount, onClick, onClose, selected, size = "md", style = "suggestion", value, ...props }) => {
+	const realSize = style === "input" || style === "selectable" ? size : "md";
+	const showClose = Boolean((style === "input" || style === "singleFilter") && selected);
+	const showCaretDown = Boolean(style === "singleFilter" && !selected);
+	const baseClasses = cn("group hui-text-body-secondary rounded-full border border-border-secondary px-sm py-[6px] text-text-primary", "transition-colors duration-200 ease-in-out", "cursor-pointer select-none whitespace-nowrap", "flex h-[34px] w-min items-center no-underline", "focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-focus-primary", {
+		"bg-background-primary hover:bg-background-hover active:bg-background-pressed": !disabled,
+		"border-border-selected text-primary-500 hover:bg-primary-50 hover:text-primary-700 active:bg-primary-100": selected && !disabled && style !== "allFilters",
+		"hui-text-caption h-md pl-[12px] pr-xs": realSize === "xs",
+		"pl-xs": style === "allFilters" && filterCount,
+		"pointer-events-none border-border-disabled bg-background-disabled text-text-disabled": disabled,
+		"pr-[12px]": showClose || showCaretDown
+	}, className);
+	return /* @__PURE__ */ jsxs(Component, {
+		"aria-label": ariaLabel ?? (typeof children === "string" || typeof children === "number" ? `${children} filter` : void 0),
+		className: baseClasses,
+		"data-hui-id": "Chip",
+		...Component === "button" && { type: "button" },
+		...props,
+		...value !== void 0 && { value },
+		...!disabled && !showClose && { onClick: (event) => {
+			onClick?.(event);
+		} },
+		...disabled && { "aria-disabled": true },
+		...ariaHasPopup && { "aria-haspopup": ariaHasPopup },
+		...selected && { "aria-current": selected },
+		children: [
+			style === "selectable" && selected && /* @__PURE__ */ jsx(Check, {
+				className: "mr-2xs",
+				size: "xs"
+			}),
+			style === "allFilters" && Boolean(filterCount) && /* @__PURE__ */ jsx(LabelStrong, {
+				className: cn("mr-xs inline-flex h-5 min-w-5 items-center justify-center rounded-lg bg-primary-500 px-[2px]", {
+					"bg-background-subdued text-text-disabled": disabled,
+					"group-hover:bg-primary-700 group-active:bg-primary-900": !disabled,
+					"hui-label-caption h-sm min-w-sm": realSize === "xs"
+				}),
+				color: "inverse",
+				children: filterCount
+			}),
+			children,
+			showCaretDown && /* @__PURE__ */ jsx(CaretDown, {
+				className: "ml-2xs",
+				color: "inherit",
+				size: "xs"
+			}),
+			showClose && /* @__PURE__ */ jsx("span", {
+				...!disabled && onClose && { onClick: (event) => {
+					event.stopPropagation();
+					onClose(event);
+				} },
+				children: /* @__PURE__ */ jsx(Close, {
+					"aria-label": `remove ${children} filter`,
+					className: "ml-2xs",
+					color: "inherit",
+					"data-testid": "remove-filter",
+					size: "xs"
+				})
+			}),
+			style === "allFilters" && /* @__PURE__ */ jsx("span", {
+				...!disabled && onClick && { onClick: (event) => {
+					event.stopPropagation();
+					onClick(event);
+				} },
+				children: /* @__PURE__ */ jsx(SlidersHorizontal, {
+					"aria-label": "change filters",
+					className: "ml-2xs",
+					color: "inherit",
+					"data-testid": "filter-button",
+					size: "xs"
+				})
+			})
+		]
+	});
+};
+Chip.displayName = "Chip";
+//#endregion
+export { Chip };
+
+//# sourceMappingURL=chip.mjs.map

package/chips/chip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.mjs","names":[],"sources":["../../src/Chips/Chip.tsx"],"sourcesContent":["import { cn } from '@evolve.ui/theme-system';\nimport { ComponentProps } from 'react';\n\nimport { CaretDown, Check, Close, SlidersHorizontal } from '../Icons';\nimport { LabelStrong } from '../Typography/Text/Text';\nimport { ChipProps } from './chipTypes';\n\n/**\n * Chip component that can be used for filters, suggestions, or input selections\n * see Storybook for design-approved implementation examples\n * @param children - Content to display inside the chip\n * @param className - Additional CSS classes to apply\n * @param disabled - Whether the chip is disabled\n * @param filterCount - Number to display for filter count (only used with style=\"allFilters\")\n * @param onClick - Click handler for the chip\n * @param onClose - Handler for when close button is clicked\n * @param selected - Whether the chip is in selected state\n * @param size - Size of the chip: \"xs\" | \"md\" (default: \"md\") - Note: x-small size is only used for input chips\n * @param style - Visual style: \"suggestion\" | \"input\" | \"singleFilter\" | \"allFilters\" | \"selectable\" (default: \"suggestion\")\n */\nexport const Chip = ({\n    'aria-haspopup': ariaHasPopup,\n    'aria-label': ariaLabel,\n    as: Component = 'button',\n    children,\n    className,\n    disabled,\n    filterCount,\n    onClick,\n    onClose,\n    selected,\n    size = 'md',\n    style = 'suggestion',\n    value,\n    ...props\n}: ChipProps) => {\n    // 'xs' size is only used for input and selectable chips\n    const realSize = style === 'input' || style === 'selectable' ? size : 'md';\n    const showClose = Boolean((style === 'input' || style === 'singleFilter') && selected);\n    const showCaretDown = Boolean(style === 'singleFilter' && !selected);\n\n    const baseClasses = cn(\n        'group hui-text-body-secondary rounded-full border border-border-secondary px-sm py-[6px] text-text-primary',\n        // TRANSITIONS: enable fade from background to background-hover\n        'transition-colors duration-200 ease-in-out',\n        'cursor-pointer select-none whitespace-nowrap',\n        'flex h-[34px] w-min items-center no-underline',\n        'focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-focus-primary',\n        {\n            'bg-background-primary hover:bg-background-hover active:bg-background-pressed': !disabled,\n            'border-border-selected text-primary-500 hover:bg-primary-50 hover:text-primary-700 active:bg-primary-100':\n                selected && !disabled && style !== 'allFilters',\n            'hui-text-caption h-md pl-[12px] pr-xs': realSize === 'xs',\n            'pl-xs': style === 'allFilters' && filterCount,\n            'pointer-events-none border-border-disabled bg-background-disabled text-text-disabled': disabled,\n            'pr-[12px]': showClose || showCaretDown,\n        },\n        className\n    );\n\n    return (\n        <Component\n            aria-label={\n                ariaLabel ??\n                (typeof children === 'string' || typeof children === 'number' ? `${children} filter` : undefined)\n            }\n            className={baseClasses}\n            data-hui-id=\"Chip\"\n            {...(Component === 'button' && { type: 'button' })}\n            {...props}\n            {...(value !== undefined && { value: value as ComponentProps<'button'>['value'] })}\n            {...(!disabled &&\n                !showClose && {\n                    onClick: (event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n                        onClick?.(event);\n                    },\n                })}\n            {...(disabled && { 'aria-disabled': true })}\n            {...(ariaHasPopup && { 'aria-haspopup': ariaHasPopup })}\n            {...(selected && { 'aria-current': selected })}\n        >\n            {style === 'selectable' && selected && (\n                <Check\n                    className=\"mr-2xs\"\n                    size=\"xs\"\n                />\n            )}\n            {style === 'allFilters' && Boolean(filterCount) && (\n                <LabelStrong\n                    className={cn(\n                        'mr-xs inline-flex h-5 min-w-5 items-center justify-center rounded-lg bg-primary-500 px-[2px]',\n                        {\n                            'bg-background-subdued text-text-disabled': disabled,\n                            'group-hover:bg-primary-700 group-active:bg-primary-900': !disabled,\n                            'hui-label-caption h-sm min-w-sm': realSize === 'xs',\n                        }\n                    )}\n                    color=\"inverse\"\n                >\n                    {filterCount}\n                </LabelStrong>\n            )}\n            {children}\n            {showCaretDown && (\n                <CaretDown\n                    className=\"ml-2xs\"\n                    color=\"inherit\"\n                    size=\"xs\"\n                />\n            )}\n            {showClose && (\n                <span\n                    {...(!disabled &&\n                        onClose && {\n                            onClick: (event) => {\n                                event.stopPropagation();\n                                onClose(event);\n                            },\n                        })}\n                >\n                    <Close\n                        aria-label={`remove ${children} filter`}\n                        className=\"ml-2xs\"\n                        color=\"inherit\"\n                        data-testid=\"remove-filter\"\n                        size=\"xs\"\n                    />\n                </span>\n            )}\n            {style === 'allFilters' && (\n                <span\n                    {...(!disabled &&\n                        onClick && {\n                            onClick: (event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n                                event.stopPropagation();\n                                onClick(event);\n                            },\n                        })}\n                >\n                    <SlidersHorizontal\n                        aria-label=\"change filters\"\n                        className=\"ml-2xs\"\n                        color=\"inherit\"\n                        data-testid=\"filter-button\"\n                        size=\"xs\"\n                    />\n                </span>\n            )}\n        </Component>\n    );\n};\n\nChip.displayName = 'Chip';\n"],"mappings":";;;;;;;;;;;;;;;;;;AAoBA,MAAa,QAAQ,EACjB,iBAAiB,cACjB,cAAc,WACd,IAAI,YAAY,UAChB,UACA,WACA,UACA,aACA,SACA,SACA,UACA,OAAO,MACP,QAAQ,cACR,OACA,GAAG,YACU;CAEb,MAAM,WAAW,UAAU,WAAW,UAAU,eAAe,OAAO;CACtE,MAAM,YAAY,SAAS,UAAU,WAAW,UAAU,mBAAmB,QAAQ;CACrF,MAAM,gBAAgB,QAAQ,UAAU,kBAAkB,CAAC,QAAQ;CAEnE,MAAM,cAAc,GAChB,8GAEA,8CACA,gDACA,iDACA,oHACA;EACI,gFAAgF,CAAC;EACjF,4GACI,YAAY,CAAC,YAAY,UAAU;EACvC,yCAAyC,aAAa;EACtD,SAAS,UAAU,gBAAgB;EACnC,wFAAwF;EACxF,aAAa,aAAa;CAC9B,GACA,SACJ;CAEA,OACI,qBAAC,WAAD;EACI,cACI,cACC,OAAO,aAAa,YAAY,OAAO,aAAa,WAAW,GAAG,SAAS,WAAW,KAAA;EAE3F,WAAW;EACX,eAAY;EACZ,GAAK,cAAc,YAAY,EAAE,MAAM,SAAS;EAChD,GAAI;EACJ,GAAK,UAAU,KAAA,KAAa,EAAS,MAA2C;EAChF,GAAK,CAAC,YACF,CAAC,aAAa,EACV,UAAU,UAAqD;GAC3D,UAAU,KAAK;EACnB,EACJ;EACJ,GAAK,YAAY,EAAE,iBAAiB,KAAK;EACzC,GAAK,gBAAgB,EAAE,iBAAiB,aAAa;EACrD,GAAK,YAAY,EAAE,gBAAgB,SAAS;YAlBhD;GAoBK,UAAU,gBAAgB,YACvB,oBAAC,OAAD;IACI,WAAU;IACV,MAAK;GACR,CAAA;GAEJ,UAAU,gBAAgB,QAAQ,WAAW,KAC1C,oBAAC,aAAD;IACI,WAAW,GACP,gGACA;KACI,4CAA4C;KAC5C,0DAA0D,CAAC;KAC3D,mCAAmC,aAAa;IACpD,CACJ;IACA,OAAM;cAEL;GACQ,CAAA;GAEhB;GACA,iBACG,oBAAC,WAAD;IACI,WAAU;IACV,OAAM;IACN,MAAK;GACR,CAAA;GAEJ,aACG,oBAAC,QAAD;IACI,GAAK,CAAC,YACF,WAAW,EACP,UAAU,UAAU;KAChB,MAAM,gBAAgB;KACtB,QAAQ,KAAK;IACjB,EACJ;cAEJ,oBAAC,OAAD;KACI,cAAY,UAAU,SAAS;KAC/B,WAAU;KACV,OAAM;KACN,eAAY;KACZ,MAAK;IACR,CAAA;GACC,CAAA;GAET,UAAU,gBACP,oBAAC,QAAD;IACI,GAAK,CAAC,YACF,WAAW,EACP,UAAU,UAAqD;KAC3D,MAAM,gBAAgB;KACtB,QAAQ,KAAK;IACjB,EACJ;cAEJ,oBAAC,mBAAD;KACI,cAAW;KACX,WAAU;KACV,OAAM;KACN,eAAY;KACZ,MAAK;IACR,CAAA;GACC,CAAA;EAEH;;AAEnB;AAEA,KAAK,cAAc"}

package/chips/chipGroup.cjs

@@ -0,0 +1,127 @@
+'use client';
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_hooks_usePrevious = require("../hooks/usePrevious.cjs");
+let _evolve_ui_theme_system = require("@evolve.ui/theme-system");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let jotai = require("jotai");
+//#region src/Chips/ChipGroup.tsx
+/**
+* ChipGroup component that can be used for filters, suggestions, or input selections
+* see Storybook for design-approved implementation examples
+* @param children - Content to display inside the chip
+* @param chipType - Type of the chip: "link" | "radio" | "checkbox"
+* @param className - Additional CSS classes to apply
+* @param data-testid - Test ID for the chip group
+* @param name - Name for the chip group
+* @param onChange - Change handler for the chip group
+*/
+const ChipGroup = ({ children, chipType, className, "data-testid": testId = "chip-group", name, onChange: propOnChange }) => {
+	const renderedElement = chipType === "link" ? "a" : "button";
+	const store = (0, jotai.useStore)();
+	const chipMap = (0, react.useRef)({});
+	const oldChipType = require_hooks_usePrevious.usePrevious(chipType);
+	if (oldChipType !== void 0 && oldChipType !== chipType) chipMap.current = {};
+	const onChange = (0, react.useCallback)((chipId, selected, value) => {
+		const totalState = Object.fromEntries(Object.entries(chipMap.current).map(([id, [atom, value]]) => {
+			if (chipType !== "radio") return [id, {
+				id,
+				selected: store.get(atom),
+				value
+			}];
+			if (id === chipId) return [id, {
+				id,
+				selected: true,
+				value
+			}];
+			store.set(atom, false);
+			return [id, {
+				id,
+				selected: false,
+				value
+			}];
+		}));
+		propOnChange?.({
+			id: chipId,
+			selected,
+			value
+		}, totalState);
+	}, [
+		chipType,
+		propOnChange,
+		store
+	]);
+	const formattedChildren = (0, react.useMemo)(() => react.Children.map(children, (child) => {
+		if (!child) return child;
+		const chipId = child.props.id;
+		const chipValue = child.props.value;
+		if (!chipId) throw new Error("ChipGroup children must have an id");
+		const chipState = chipId in chipMap.current ? chipMap.current[chipId] : [(0, jotai.atom)(Boolean(child.props.selected)), chipValue];
+		chipMap.current[chipId] = chipState;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChipController, {
+			child,
+			chipAtom: chipState[0],
+			chipType,
+			groupName: name,
+			onChange,
+			renderedElement
+		}, chipValue);
+	}), [
+		children,
+		chipType,
+		name,
+		onChange,
+		renderedElement
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(chipType === "link" ? "ul" : "fieldset", {
+		className: (0, _evolve_ui_theme_system.cn)("-ml-xs min-w-0 list-none border-none p-xs", "flex gap-xs overflow-x-auto", className),
+		"data-testid": testId,
+		role: renderedElement === "a" ? "list" : "group",
+		children: formattedChildren
+	});
+};
+const ChipController = ({ child, chipAtom, chipType, groupName, onChange: parentOnChange, renderedElement }) => {
+	const [selected, setSelected] = (0, jotai.useAtom)(chipAtom);
+	const onClickOrChange = (0, react.useCallback)((e) => {
+		let newSelected;
+		if (e.currentTarget.checked) newSelected = e.currentTarget.checked ?? !selected;
+		else {
+			e.preventDefault();
+			e.stopPropagation();
+			newSelected = !selected;
+		}
+		setSelected(newSelected);
+		parentOnChange(child.props.id, newSelected, child.props.value);
+	}, [
+		child.props.id,
+		child.props.value,
+		parentOnChange,
+		selected,
+		setSelected
+	]);
+	const newChild = (0, react.cloneElement)(child, {
+		as: renderedElement,
+		...child.props.disabled ? {} : { onClick: (event) => {
+			onClickOrChange(event);
+		} },
+		selected
+	});
+	if (chipType === "link") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: newChild });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+		checked: selected,
+		className: "absolute h-0 w-0 opacity-0",
+		disabled: child.props.disabled,
+		id: child.props.id,
+		name: groupName,
+		onChange: onClickOrChange,
+		tabIndex: -1,
+		type: chipType
+	}), newChild] });
+};
+//#endregion
+exports.ChipGroup = ChipGroup;
+
+//# sourceMappingURL=chipGroup.cjs.map

package/chips/chipGroup.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chipGroup.cjs","names":["usePrevious","Children"],"sources":["../../src/Chips/ChipGroup.tsx"],"sourcesContent":["import { cn } from '@evolve.ui/theme-system';\nimport { atom, PrimitiveAtom, useAtom, useStore } from 'jotai';\nimport { ChangeEventHandler, Children, cloneElement, Key, ReactElement, useCallback, useMemo, useRef } from 'react';\n\nimport { usePrevious } from '../hooks/usePrevious';\nimport { ChipGroupProps, ChipProps } from './chipTypes';\n\n/**\n * ChipGroup component that can be used for filters, suggestions, or input selections\n * see Storybook for design-approved implementation examples\n * @param children - Content to display inside the chip\n * @param chipType - Type of the chip: \"link\" | \"radio\" | \"checkbox\"\n * @param className - Additional CSS classes to apply\n * @param data-testid - Test ID for the chip group\n * @param name - Name for the chip group\n * @param onChange - Change handler for the chip group\n */\nexport const ChipGroup = ({\n    children,\n    chipType,\n    className,\n    'data-testid': testId = 'chip-group',\n    name,\n    onChange: propOnChange,\n}: ChipGroupProps) => {\n    const renderedElement = chipType === 'link' ? 'a' : 'button';\n    const store = useStore();\n    const chipMap = useRef<Record<string, [PrimitiveAtom<boolean>, unknown]>>({});\n    const oldChipType = usePrevious(chipType);\n\n    if (oldChipType !== undefined && oldChipType !== chipType) {\n        chipMap.current = {};\n    }\n\n    const onChange = useCallback(\n        (chipId: string, selected: boolean, value: unknown) => {\n            const totalState = Object.fromEntries(\n                Object.entries(chipMap.current).map(([id, [atom, value]]) => {\n                    if (chipType !== 'radio') {\n                        return [id, { id, selected: store.get(atom), value }];\n                    }\n\n                    if (id === chipId) {\n                        return [id, { id, selected: true, value }];\n                    }\n\n                    store.set(atom, false);\n                    return [id, { id, selected: false, value }];\n                })\n            );\n\n            propOnChange?.({ id: chipId, selected, value }, totalState);\n        },\n        [chipType, propOnChange, store]\n    );\n\n    const formattedChildren = useMemo(\n        () =>\n            Children.map(children, (child) => {\n                if (!child) {\n                    return child;\n                }\n\n                const chipId = child.props.id;\n                const chipValue = child.props.value;\n\n                if (!chipId) {\n                    throw new Error('ChipGroup children must have an id');\n                }\n\n                const chipState: [PrimitiveAtom<boolean>, unknown] =\n                    chipId in chipMap.current\n                        ? chipMap.current[chipId]\n                        : [atom(Boolean(child.props.selected)), chipValue];\n\n                chipMap.current[chipId] = chipState;\n\n                return (\n                    <ChipController\n                        child={child as ReactElement<ChipProps>}\n                        chipAtom={chipState[0]}\n                        chipType={chipType}\n                        groupName={name}\n                        key={chipValue as Key}\n                        onChange={onChange}\n                        renderedElement={renderedElement}\n                    />\n                );\n            }),\n        [children, chipType, name, onChange, renderedElement]\n    );\n\n    const Element = chipType === 'link' ? 'ul' : 'fieldset';\n\n    return (\n        <Element\n            className={cn('-ml-xs min-w-0 list-none border-none p-xs', 'flex gap-xs overflow-x-auto', className)}\n            data-testid={testId}\n            role={renderedElement === 'a' ? 'list' : 'group'}\n        >\n            {formattedChildren}\n        </Element>\n    );\n};\n\nconst ChipController = ({\n    child,\n    chipAtom,\n    chipType,\n    groupName,\n    onChange: parentOnChange,\n    renderedElement,\n}: {\n    child: ReactElement<ChipProps>;\n    chipAtom: PrimitiveAtom<boolean>;\n    chipType: 'link' | 'radio' | 'checkbox';\n    groupName?: string;\n    onChange: (id: string, selected: boolean, value: unknown) => void;\n    renderedElement: 'a' | 'button';\n}) => {\n    const [selected, setSelected] = useAtom(chipAtom);\n\n    const onClickOrChange: ChangeEventHandler<HTMLInputElement> = useCallback(\n        (e) => {\n            let newSelected: boolean;\n\n            if (e.currentTarget.checked) {\n                newSelected = e.currentTarget.checked ?? !selected;\n            } else {\n                e.preventDefault();\n                e.stopPropagation();\n                newSelected = !selected;\n            }\n\n            setSelected(newSelected);\n\n            parentOnChange(child.props.id!, newSelected, child.props.value);\n        },\n        [child.props.id, child.props.value, parentOnChange, selected, setSelected]\n    );\n\n    const newChild = cloneElement(child, {\n        as: renderedElement,\n        ...(child.props.disabled\n            ? {}\n            : {\n                  onClick: (event: React.MouseEvent<HTMLElement> | React.ChangeEvent<HTMLInputElement>) => {\n                      onClickOrChange(event as React.ChangeEvent<HTMLInputElement>);\n                  },\n              }),\n        selected,\n    });\n\n    if (chipType === 'link') {\n        return <li>{newChild}</li>;\n    }\n\n    return (\n        <>\n            <input\n                checked={selected}\n                className=\"absolute h-0 w-0 opacity-0\"\n                disabled={child.props.disabled}\n                id={child.props.id}\n                name={groupName}\n                onChange={onClickOrChange}\n                tabIndex={-1}\n                type={chipType}\n            />\n            {newChild}\n        </>\n    );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAiBA,MAAa,aAAa,EACtB,UACA,UACA,WACA,eAAe,SAAS,cACxB,MACA,UAAU,mBACQ;CAClB,MAAM,kBAAkB,aAAa,SAAS,MAAM;CACpD,MAAM,SAAA,GAAA,MAAA,SAAA,CAAiB;CACvB,MAAM,WAAA,GAAA,MAAA,OAAA,CAAoE,CAAC,CAAC;CAC5E,MAAM,cAAcA,0BAAAA,YAAY,QAAQ;CAExC,IAAI,gBAAgB,KAAA,KAAa,gBAAgB,UAC7C,QAAQ,UAAU,CAAC;CAGvB,MAAM,YAAA,GAAA,MAAA,YAAA,EACD,QAAgB,UAAmB,UAAmB;EACnD,MAAM,aAAa,OAAO,YACtB,OAAO,QAAQ,QAAQ,OAAO,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,YAAY;GACzD,IAAI,aAAa,SACb,OAAO,CAAC,IAAI;IAAE;IAAI,UAAU,MAAM,IAAI,IAAI;IAAG;GAAM,CAAC;GAGxD,IAAI,OAAO,QACP,OAAO,CAAC,IAAI;IAAE;IAAI,UAAU;IAAM;GAAM,CAAC;GAG7C,MAAM,IAAI,MAAM,KAAK;GACrB,OAAO,CAAC,IAAI;IAAE;IAAI,UAAU;IAAO;GAAM,CAAC;EAC9C,CAAC,CACL;EAEA,eAAe;GAAE,IAAI;GAAQ;GAAU;EAAM,GAAG,UAAU;CAC9D,GACA;EAAC;EAAU;EAAc;CAAK,CAClC;CAEA,MAAM,qBAAA,GAAA,MAAA,QAAA,OAEEC,MAAAA,SAAS,IAAI,WAAW,UAAU;EAC9B,IAAI,CAAC,OACD,OAAO;EAGX,MAAM,SAAS,MAAM,MAAM;EAC3B,MAAM,YAAY,MAAM,MAAM;EAE9B,IAAI,CAAC,QACD,MAAM,IAAI,MAAM,oCAAoC;EAGxD,MAAM,YACF,UAAU,QAAQ,UACZ,QAAQ,QAAQ,UAChB,EAAA,GAAA,MAAA,KAAA,CAAM,QAAQ,MAAM,MAAM,QAAQ,CAAC,GAAG,SAAS;EAEzD,QAAQ,QAAQ,UAAU;EAE1B,OACI,iBAAA,GAAA,kBAAA,IAAA,CAAC,gBAAD;GACW;GACP,UAAU,UAAU;GACV;GACV,WAAW;GAED;GACO;EACpB,GAHQ,SAGR;CAET,CAAC,GACL;EAAC;EAAU;EAAU;EAAM;EAAU;CAAe,CACxD;CAIA,OACI,iBAAA,GAAA,kBAAA,IAAA,CAHY,aAAa,SAAS,OAAO,YAGzC;EACI,YAAA,GAAA,wBAAA,GAAA,CAAc,6CAA6C,+BAA+B,SAAS;EACnG,eAAa;EACb,MAAM,oBAAoB,MAAM,SAAS;YAExC;CACI,CAAA;AAEjB;AAEA,MAAM,kBAAkB,EACpB,OACA,UACA,UACA,WACA,UAAU,gBACV,sBAQE;CACF,MAAM,CAAC,UAAU,gBAAA,GAAA,MAAA,QAAA,CAAuB,QAAQ;CAEhD,MAAM,mBAAA,GAAA,MAAA,YAAA,EACD,MAAM;EACH,IAAI;EAEJ,IAAI,EAAE,cAAc,SAChB,cAAc,EAAE,cAAc,WAAW,CAAC;OACvC;GACH,EAAE,eAAe;GACjB,EAAE,gBAAgB;GAClB,cAAc,CAAC;EACnB;EAEA,YAAY,WAAW;EAEvB,eAAe,MAAM,MAAM,IAAK,aAAa,MAAM,MAAM,KAAK;CAClE,GACA;EAAC,MAAM,MAAM;EAAI,MAAM,MAAM;EAAO;EAAgB;EAAU;CAAW,CAC7E;CAEA,MAAM,YAAA,GAAA,MAAA,aAAA,CAAwB,OAAO;EACjC,IAAI;EACJ,GAAI,MAAM,MAAM,WACV,CAAC,IACD,EACI,UAAU,UAA+E;GACrF,gBAAgB,KAA4C;EAChE,EACJ;EACN;CACJ,CAAC;CAED,IAAI,aAAa,QACb,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD,EAAA,UAAK,SAAa,CAAA;CAG7B,OACI,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA,CACI,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;EACI,SAAS;EACT,WAAU;EACV,UAAU,MAAM,MAAM;EACtB,IAAI,MAAM,MAAM;EAChB,MAAM;EACN,UAAU;EACV,UAAU;EACV,MAAM;CACT,CAAA,GACA,QACH,EAAA,CAAA;AAEV"}

package/chips/chipGroup.d.cts

@@ -0,0 +1,2 @@
+import { t as ChipGroup } from "../ChipGroup-DIyCVKZm.cjs";
+export { ChipGroup };

package/chips/chipGroup.d.mts

@@ -0,0 +1,2 @@
+import { t as ChipGroup } from "../ChipGroup-VGpv5cHt.mjs";
+export { ChipGroup };

package/chips/chipGroup.mjs

@@ -0,0 +1,123 @@
+'use client';
+import { usePrevious } from "../hooks/usePrevious.mjs";
+import { cn } from "@evolve.ui/theme-system";
+import { Children, cloneElement, useCallback, useMemo, useRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { atom, useAtom, useStore } from "jotai";
+//#region src/Chips/ChipGroup.tsx
+/**
+* ChipGroup component that can be used for filters, suggestions, or input selections
+* see Storybook for design-approved implementation examples
+* @param children - Content to display inside the chip
+* @param chipType - Type of the chip: "link" | "radio" | "checkbox"
+* @param className - Additional CSS classes to apply
+* @param data-testid - Test ID for the chip group
+* @param name - Name for the chip group
+* @param onChange - Change handler for the chip group
+*/
+const ChipGroup = ({ children, chipType, className, "data-testid": testId = "chip-group", name, onChange: propOnChange }) => {
+	const renderedElement = chipType === "link" ? "a" : "button";
+	const store = useStore();
+	const chipMap = useRef({});
+	const oldChipType = usePrevious(chipType);
+	if (oldChipType !== void 0 && oldChipType !== chipType) chipMap.current = {};
+	const onChange = useCallback((chipId, selected, value) => {
+		const totalState = Object.fromEntries(Object.entries(chipMap.current).map(([id, [atom, value]]) => {
+			if (chipType !== "radio") return [id, {
+				id,
+				selected: store.get(atom),
+				value
+			}];
+			if (id === chipId) return [id, {
+				id,
+				selected: true,
+				value
+			}];
+			store.set(atom, false);
+			return [id, {
+				id,
+				selected: false,
+				value
+			}];
+		}));
+		propOnChange?.({
+			id: chipId,
+			selected,
+			value
+		}, totalState);
+	}, [
+		chipType,
+		propOnChange,
+		store
+	]);
+	const formattedChildren = useMemo(() => Children.map(children, (child) => {
+		if (!child) return child;
+		const chipId = child.props.id;
+		const chipValue = child.props.value;
+		if (!chipId) throw new Error("ChipGroup children must have an id");
+		const chipState = chipId in chipMap.current ? chipMap.current[chipId] : [atom(Boolean(child.props.selected)), chipValue];
+		chipMap.current[chipId] = chipState;
+		return /* @__PURE__ */ jsx(ChipController, {
+			child,
+			chipAtom: chipState[0],
+			chipType,
+			groupName: name,
+			onChange,
+			renderedElement
+		}, chipValue);
+	}), [
+		children,
+		chipType,
+		name,
+		onChange,
+		renderedElement
+	]);
+	return /* @__PURE__ */ jsx(chipType === "link" ? "ul" : "fieldset", {
+		className: cn("-ml-xs min-w-0 list-none border-none p-xs", "flex gap-xs overflow-x-auto", className),
+		"data-testid": testId,
+		role: renderedElement === "a" ? "list" : "group",
+		children: formattedChildren
+	});
+};
+const ChipController = ({ child, chipAtom, chipType, groupName, onChange: parentOnChange, renderedElement }) => {
+	const [selected, setSelected] = useAtom(chipAtom);
+	const onClickOrChange = useCallback((e) => {
+		let newSelected;
+		if (e.currentTarget.checked) newSelected = e.currentTarget.checked ?? !selected;
+		else {
+			e.preventDefault();
+			e.stopPropagation();
+			newSelected = !selected;
+		}
+		setSelected(newSelected);
+		parentOnChange(child.props.id, newSelected, child.props.value);
+	}, [
+		child.props.id,
+		child.props.value,
+		parentOnChange,
+		selected,
+		setSelected
+	]);
+	const newChild = cloneElement(child, {
+		as: renderedElement,
+		...child.props.disabled ? {} : { onClick: (event) => {
+			onClickOrChange(event);
+		} },
+		selected
+	});
+	if (chipType === "link") return /* @__PURE__ */ jsx("li", { children: newChild });
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("input", {
+		checked: selected,
+		className: "absolute h-0 w-0 opacity-0",
+		disabled: child.props.disabled,
+		id: child.props.id,
+		name: groupName,
+		onChange: onClickOrChange,
+		tabIndex: -1,
+		type: chipType
+	}), newChild] });
+};
+//#endregion
+export { ChipGroup };
+
+//# sourceMappingURL=chipGroup.mjs.map

package/chips/chipGroup.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chipGroup.mjs","names":[],"sources":["../../src/Chips/ChipGroup.tsx"],"sourcesContent":["import { cn } from '@evolve.ui/theme-system';\nimport { atom, PrimitiveAtom, useAtom, useStore } from 'jotai';\nimport { ChangeEventHandler, Children, cloneElement, Key, ReactElement, useCallback, useMemo, useRef } from 'react';\n\nimport { usePrevious } from '../hooks/usePrevious';\nimport { ChipGroupProps, ChipProps } from './chipTypes';\n\n/**\n * ChipGroup component that can be used for filters, suggestions, or input selections\n * see Storybook for design-approved implementation examples\n * @param children - Content to display inside the chip\n * @param chipType - Type of the chip: \"link\" | \"radio\" | \"checkbox\"\n * @param className - Additional CSS classes to apply\n * @param data-testid - Test ID for the chip group\n * @param name - Name for the chip group\n * @param onChange - Change handler for the chip group\n */\nexport const ChipGroup = ({\n    children,\n    chipType,\n    className,\n    'data-testid': testId = 'chip-group',\n    name,\n    onChange: propOnChange,\n}: ChipGroupProps) => {\n    const renderedElement = chipType === 'link' ? 'a' : 'button';\n    const store = useStore();\n    const chipMap = useRef<Record<string, [PrimitiveAtom<boolean>, unknown]>>({});\n    const oldChipType = usePrevious(chipType);\n\n    if (oldChipType !== undefined && oldChipType !== chipType) {\n        chipMap.current = {};\n    }\n\n    const onChange = useCallback(\n        (chipId: string, selected: boolean, value: unknown) => {\n            const totalState = Object.fromEntries(\n                Object.entries(chipMap.current).map(([id, [atom, value]]) => {\n                    if (chipType !== 'radio') {\n                        return [id, { id, selected: store.get(atom), value }];\n                    }\n\n                    if (id === chipId) {\n                        return [id, { id, selected: true, value }];\n                    }\n\n                    store.set(atom, false);\n                    return [id, { id, selected: false, value }];\n                })\n            );\n\n            propOnChange?.({ id: chipId, selected, value }, totalState);\n        },\n        [chipType, propOnChange, store]\n    );\n\n    const formattedChildren = useMemo(\n        () =>\n            Children.map(children, (child) => {\n                if (!child) {\n                    return child;\n                }\n\n                const chipId = child.props.id;\n                const chipValue = child.props.value;\n\n                if (!chipId) {\n                    throw new Error('ChipGroup children must have an id');\n                }\n\n                const chipState: [PrimitiveAtom<boolean>, unknown] =\n                    chipId in chipMap.current\n                        ? chipMap.current[chipId]\n                        : [atom(Boolean(child.props.selected)), chipValue];\n\n                chipMap.current[chipId] = chipState;\n\n                return (\n                    <ChipController\n                        child={child as ReactElement<ChipProps>}\n                        chipAtom={chipState[0]}\n                        chipType={chipType}\n                        groupName={name}\n                        key={chipValue as Key}\n                        onChange={onChange}\n                        renderedElement={renderedElement}\n                    />\n                );\n            }),\n        [children, chipType, name, onChange, renderedElement]\n    );\n\n    const Element = chipType === 'link' ? 'ul' : 'fieldset';\n\n    return (\n        <Element\n            className={cn('-ml-xs min-w-0 list-none border-none p-xs', 'flex gap-xs overflow-x-auto', className)}\n            data-testid={testId}\n            role={renderedElement === 'a' ? 'list' : 'group'}\n        >\n            {formattedChildren}\n        </Element>\n    );\n};\n\nconst ChipController = ({\n    child,\n    chipAtom,\n    chipType,\n    groupName,\n    onChange: parentOnChange,\n    renderedElement,\n}: {\n    child: ReactElement<ChipProps>;\n    chipAtom: PrimitiveAtom<boolean>;\n    chipType: 'link' | 'radio' | 'checkbox';\n    groupName?: string;\n    onChange: (id: string, selected: boolean, value: unknown) => void;\n    renderedElement: 'a' | 'button';\n}) => {\n    const [selected, setSelected] = useAtom(chipAtom);\n\n    const onClickOrChange: ChangeEventHandler<HTMLInputElement> = useCallback(\n        (e) => {\n            let newSelected: boolean;\n\n            if (e.currentTarget.checked) {\n                newSelected = e.currentTarget.checked ?? !selected;\n            } else {\n                e.preventDefault();\n                e.stopPropagation();\n                newSelected = !selected;\n            }\n\n            setSelected(newSelected);\n\n            parentOnChange(child.props.id!, newSelected, child.props.value);\n        },\n        [child.props.id, child.props.value, parentOnChange, selected, setSelected]\n    );\n\n    const newChild = cloneElement(child, {\n        as: renderedElement,\n        ...(child.props.disabled\n            ? {}\n            : {\n                  onClick: (event: React.MouseEvent<HTMLElement> | React.ChangeEvent<HTMLInputElement>) => {\n                      onClickOrChange(event as React.ChangeEvent<HTMLInputElement>);\n                  },\n              }),\n        selected,\n    });\n\n    if (chipType === 'link') {\n        return <li>{newChild}</li>;\n    }\n\n    return (\n        <>\n            <input\n                checked={selected}\n                className=\"absolute h-0 w-0 opacity-0\"\n                disabled={child.props.disabled}\n                id={child.props.id}\n                name={groupName}\n                onChange={onClickOrChange}\n                tabIndex={-1}\n                type={chipType}\n            />\n            {newChild}\n        </>\n    );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAiBA,MAAa,aAAa,EACtB,UACA,UACA,WACA,eAAe,SAAS,cACxB,MACA,UAAU,mBACQ;CAClB,MAAM,kBAAkB,aAAa,SAAS,MAAM;CACpD,MAAM,QAAQ,SAAS;CACvB,MAAM,UAAU,OAA0D,CAAC,CAAC;CAC5E,MAAM,cAAc,YAAY,QAAQ;CAExC,IAAI,gBAAgB,KAAA,KAAa,gBAAgB,UAC7C,QAAQ,UAAU,CAAC;CAGvB,MAAM,WAAW,aACZ,QAAgB,UAAmB,UAAmB;EACnD,MAAM,aAAa,OAAO,YACtB,OAAO,QAAQ,QAAQ,OAAO,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,YAAY;GACzD,IAAI,aAAa,SACb,OAAO,CAAC,IAAI;IAAE;IAAI,UAAU,MAAM,IAAI,IAAI;IAAG;GAAM,CAAC;GAGxD,IAAI,OAAO,QACP,OAAO,CAAC,IAAI;IAAE;IAAI,UAAU;IAAM;GAAM,CAAC;GAG7C,MAAM,IAAI,MAAM,KAAK;GACrB,OAAO,CAAC,IAAI;IAAE;IAAI,UAAU;IAAO;GAAM,CAAC;EAC9C,CAAC,CACL;EAEA,eAAe;GAAE,IAAI;GAAQ;GAAU;EAAM,GAAG,UAAU;CAC9D,GACA;EAAC;EAAU;EAAc;CAAK,CAClC;CAEA,MAAM,oBAAoB,cAElB,SAAS,IAAI,WAAW,UAAU;EAC9B,IAAI,CAAC,OACD,OAAO;EAGX,MAAM,SAAS,MAAM,MAAM;EAC3B,MAAM,YAAY,MAAM,MAAM;EAE9B,IAAI,CAAC,QACD,MAAM,IAAI,MAAM,oCAAoC;EAGxD,MAAM,YACF,UAAU,QAAQ,UACZ,QAAQ,QAAQ,UAChB,CAAC,KAAK,QAAQ,MAAM,MAAM,QAAQ,CAAC,GAAG,SAAS;EAEzD,QAAQ,QAAQ,UAAU;EAE1B,OACI,oBAAC,gBAAD;GACW;GACP,UAAU,UAAU;GACV;GACV,WAAW;GAED;GACO;EACpB,GAHQ,SAGR;CAET,CAAC,GACL;EAAC;EAAU;EAAU;EAAM;EAAU;CAAe,CACxD;CAIA,OACI,oBAHY,aAAa,SAAS,OAAO,YAGzC;EACI,WAAW,GAAG,6CAA6C,+BAA+B,SAAS;EACnG,eAAa;EACb,MAAM,oBAAoB,MAAM,SAAS;YAExC;CACI,CAAA;AAEjB;AAEA,MAAM,kBAAkB,EACpB,OACA,UACA,UACA,WACA,UAAU,gBACV,sBAQE;CACF,MAAM,CAAC,UAAU,eAAe,QAAQ,QAAQ;CAEhD,MAAM,kBAAwD,aACzD,MAAM;EACH,IAAI;EAEJ,IAAI,EAAE,cAAc,SAChB,cAAc,EAAE,cAAc,WAAW,CAAC;OACvC;GACH,EAAE,eAAe;GACjB,EAAE,gBAAgB;GAClB,cAAc,CAAC;EACnB;EAEA,YAAY,WAAW;EAEvB,eAAe,MAAM,MAAM,IAAK,aAAa,MAAM,MAAM,KAAK;CAClE,GACA;EAAC,MAAM,MAAM;EAAI,MAAM,MAAM;EAAO;EAAgB;EAAU;CAAW,CAC7E;CAEA,MAAM,WAAW,aAAa,OAAO;EACjC,IAAI;EACJ,GAAI,MAAM,MAAM,WACV,CAAC,IACD,EACI,UAAU,UAA+E;GACrF,gBAAgB,KAA4C;EAChE,EACJ;EACN;CACJ,CAAC;CAED,IAAI,aAAa,QACb,OAAO,oBAAC,MAAD,EAAA,UAAK,SAAa,CAAA;CAG7B,OACI,qBAAA,UAAA,EAAA,UAAA,CACI,oBAAC,SAAD;EACI,SAAS;EACT,WAAU;EACV,UAAU,MAAM,MAAM;EACtB,IAAI,MAAM,MAAM;EAChB,MAAM;EACN,UAAU;EACV,UAAU;EACV,MAAM;CACT,CAAA,GACA,QACH,EAAA,CAAA;AAEV"}

package/chips/suggestion.cjs

@@ -0,0 +1,20 @@
+'use client';
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_chips_chip = require("./chip.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/Chips/SuggestionChip.tsx
+const SuggestionChip = ({ children, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_chips_chip.Chip, {
+		...props,
+		style: "suggestion",
+		children
+	});
+};
+SuggestionChip.displayName = "SuggestionChip";
+//#endregion
+exports.SuggestionChip = SuggestionChip;
+
+//# sourceMappingURL=suggestion.cjs.map

package/chips/suggestion.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"suggestion.cjs","names":["Chip"],"sources":["../../src/Chips/SuggestionChip.tsx"],"sourcesContent":["import { Chip } from './Chip';\nimport { ChipProps } from './chipTypes';\n\nexport const SuggestionChip = ({ children, ...props }: ChipProps) => {\n    return (\n        <Chip\n            {...props}\n            style=\"suggestion\"\n        >\n            {children}\n        </Chip>\n    );\n};\n\nSuggestionChip.displayName = 'SuggestionChip';\n"],"mappings":";;;;;;;AAGA,MAAa,kBAAkB,EAAE,UAAU,GAAG,YAAuB;CACjE,OACI,iBAAA,GAAA,kBAAA,IAAA,CAACA,mBAAAA,MAAD;EACI,GAAI;EACJ,OAAM;EAEL;CACC,CAAA;AAEd;AAEA,eAAe,cAAc"}

package/chips/suggestion.d.cts

@@ -0,0 +1,2 @@
+import { t as SuggestionChip } from "../SuggestionChip-BLq_0VFE.cjs";
+export { SuggestionChip };

package/chips/suggestion.d.mts

@@ -0,0 +1,2 @@
+import { t as SuggestionChip } from "../SuggestionChip-CilkTYTJ.mjs";
+export { SuggestionChip };

package/chips/suggestion.mjs

@@ -0,0 +1,16 @@
+'use client';
+import { Chip } from "./chip.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/Chips/SuggestionChip.tsx
+const SuggestionChip = ({ children, ...props }) => {
+	return /* @__PURE__ */ jsx(Chip, {
+		...props,
+		style: "suggestion",
+		children
+	});
+};
+SuggestionChip.displayName = "SuggestionChip";
+//#endregion
+export { SuggestionChip };
+
+//# sourceMappingURL=suggestion.mjs.map

package/chips/suggestion.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"suggestion.mjs","names":[],"sources":["../../src/Chips/SuggestionChip.tsx"],"sourcesContent":["import { Chip } from './Chip';\nimport { ChipProps } from './chipTypes';\n\nexport const SuggestionChip = ({ children, ...props }: ChipProps) => {\n    return (\n        <Chip\n            {...props}\n            style=\"suggestion\"\n        >\n            {children}\n        </Chip>\n    );\n};\n\nSuggestionChip.displayName = 'SuggestionChip';\n"],"mappings":";;;AAGA,MAAa,kBAAkB,EAAE,UAAU,GAAG,YAAuB;CACjE,OACI,oBAAC,MAAD;EACI,GAAI;EACJ,OAAM;EAEL;CACC,CAAA;AAEd;AAEA,eAAe,cAAc"}

package/chips/types.cjs

@@ -0,0 +1 @@
+'use client';

package/chips/types.d.cts

@@ -0,0 +1,2 @@
+import { i as TotalChipState, n as ChipProps, r as ChipState, t as ChipGroupProps } from "../chipTypes-Bi0ZROty.cjs";
+export { ChipGroupProps, ChipProps, ChipState, TotalChipState };

package/chips/types.d.mts

@@ -0,0 +1,2 @@
+import { i as TotalChipState, n as ChipProps, r as ChipState, t as ChipGroupProps } from "../chipTypes-Bi0ZROty.mjs";
+export { ChipGroupProps, ChipProps, ChipState, TotalChipState };

package/chips/types.mjs

@@ -0,0 +1,2 @@
+'use client';
+export {};

package/chips.cjs

@@ -0,0 +1,12 @@
+'use client';
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_chips_chip = require("./chips/chip.cjs");
+const require_chips_chipGroup = require("./chips/chipGroup.cjs");
+const require_chips_suggestion = require("./chips/suggestion.cjs");
+require("./chips/types.cjs");
+exports.Chip = require_chips_chip.Chip;
+exports.ChipGroup = require_chips_chipGroup.ChipGroup;
+exports.SuggestionChip = require_chips_suggestion.SuggestionChip;

package/chips.d.cts

@@ -0,0 +1,5 @@
+import { i as TotalChipState, n as ChipProps, r as ChipState, t as ChipGroupProps } from "./chipTypes-Bi0ZROty.cjs";
+import { t as Chip } from "./Chip-UMJoX3ST.cjs";
+import { t as ChipGroup } from "./ChipGroup-DIyCVKZm.cjs";
+import { t as SuggestionChip } from "./SuggestionChip-BLq_0VFE.cjs";
+export { Chip, ChipGroup, ChipGroupProps, ChipProps, ChipState, SuggestionChip, TotalChipState };

package/chips.d.mts

@@ -0,0 +1,5 @@
+import { i as TotalChipState, n as ChipProps, r as ChipState, t as ChipGroupProps } from "./chipTypes-Bi0ZROty.mjs";
+import { t as Chip } from "./Chip-giQtR8GC.mjs";
+import { t as ChipGroup } from "./ChipGroup-VGpv5cHt.mjs";
+import { t as SuggestionChip } from "./SuggestionChip-CilkTYTJ.mjs";
+export { Chip, ChipGroup, ChipGroupProps, ChipProps, ChipState, SuggestionChip, TotalChipState };

package/chips.mjs

@@ -0,0 +1,6 @@
+'use client';
+import { Chip } from "./chips/chip.mjs";
+import { ChipGroup } from "./chips/chipGroup.mjs";
+import { SuggestionChip } from "./chips/suggestion.mjs";
+import "./chips/types.mjs";
+export { Chip, ChipGroup, SuggestionChip };

package/collapsible.cjs

@@ -0,0 +1,47 @@
+'use client';
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_nodeEnv = require("./nodeEnv-BdQ-HyQz.cjs");
+let _evolve_ui_theme_system = require("@evolve.ui/theme-system");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/Collapsible/Collapsible.tsx
+const Collapsible = ({ children, className, expanded = false, timing = 400 }) => {
+	const isTestEnv = require_nodeEnv.nodeEnv === "test";
+	const [isTransitioning, setIsTransitioning] = (0, react.useState)(expanded);
+	const isInitialRender = (0, react.useRef)(true);
+	(0, react.useEffect)(() => {
+		setIsTransitioning(true);
+		isInitialRender.current = false;
+	}, [expanded]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, _evolve_ui_theme_system.cn)("grid overflow-hidden transition-[grid-template-rows] ease-in-out", expanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]", className),
+		"data-expanded": expanded,
+		"data-hui-id": "Collapsible",
+		style: { transitionDuration: `${isTestEnv || isInitialRender.current ? 0 : timing}ms` },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "min-h-0",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, _evolve_ui_theme_system.cn)("transform transition-[transform,opacity] ease-[ease]", {
+					"-translate-y-full opacity-0": !expanded,
+					"translate-y-0 opacity-100": expanded
+				}),
+				"data-testid": "collapsible-content",
+				onAnimationEnd: () => {
+					if (isTestEnv) setIsTransitioning(expanded);
+				},
+				onTransitionEnd: () => {
+					setIsTransitioning(expanded);
+				},
+				style: { transitionDuration: `${isTestEnv || isInitialRender.current ? 0 : timing}ms` },
+				children: (expanded || isTransitioning) && children
+			})
+		})
+	});
+};
+//#endregion
+exports.Collapsible = Collapsible;
+
+//# sourceMappingURL=collapsible.cjs.map

package/collapsible.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.cjs","names":["nodeEnv"],"sources":["../src/Collapsible/Collapsible.tsx"],"sourcesContent":["import { cn } from '@evolve.ui/theme-system';\nimport { ReactNode, useEffect, useRef, useState } from 'react';\n\nimport { nodeEnv } from '../utils/nodeEnv';\n\ntype Props = {\n    children: ReactNode;\n    className?: string;\n    expanded?: boolean;\n    timing?: number;\n};\n\nexport const Collapsible = ({ children, className, expanded = false, timing = 400 }: Props) => {\n    const isTestEnv = nodeEnv === 'test';\n    const [isTransitioning, setIsTransitioning] = useState(expanded);\n    const isInitialRender = useRef(true);\n\n    useEffect(() => {\n        setIsTransitioning(true);\n        isInitialRender.current = false;\n    }, [expanded]);\n\n    return (\n        <div\n            className={cn(\n                'grid overflow-hidden transition-[grid-template-rows] ease-in-out',\n                expanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',\n                className\n            )}\n            data-expanded={expanded}\n            data-hui-id=\"Collapsible\"\n            style={{ transitionDuration: `${isTestEnv || isInitialRender.current ? 0 : timing}ms` }}\n        >\n            <div className=\"min-h-0\">\n                <div\n                    className={cn('transform transition-[transform,opacity] ease-[ease]', {\n                        '-translate-y-full opacity-0': !expanded,\n                        'translate-y-0 opacity-100': expanded,\n                    })}\n                    data-testid=\"collapsible-content\"\n                    onAnimationEnd={() => {\n                        if (isTestEnv) {\n                            setIsTransitioning(expanded);\n                        }\n                    }}\n                    onTransitionEnd={() => {\n                        setIsTransitioning(expanded);\n                    }}\n                    style={{\n                        transitionDuration: `${isTestEnv || isInitialRender.current ? 0 : timing}ms`,\n                    }}\n                >\n                    {(expanded || isTransitioning) && children}\n                </div>\n            </div>\n        </div>\n    );\n};\n"],"mappings":";;;;;;;;;AAYA,MAAa,eAAe,EAAE,UAAU,WAAW,WAAW,OAAO,SAAS,UAAiB;CAC3F,MAAM,YAAYA,gBAAAA,YAAY;CAC9B,MAAM,CAAC,iBAAiB,uBAAA,GAAA,MAAA,SAAA,CAA+B,QAAQ;CAC/D,MAAM,mBAAA,GAAA,MAAA,OAAA,CAAyB,IAAI;CAEnC,CAAA,GAAA,MAAA,UAAA,OAAgB;EACZ,mBAAmB,IAAI;EACvB,gBAAgB,UAAU;CAC9B,GAAG,CAAC,QAAQ,CAAC;CAEb,OACI,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACI,YAAA,GAAA,wBAAA,GAAA,CACI,oEACA,WAAW,oBAAoB,mBAC/B,SACJ;EACA,iBAAe;EACf,eAAY;EACZ,OAAO,EAAE,oBAAoB,GAAG,aAAa,gBAAgB,UAAU,IAAI,OAAO,IAAI;YAEtF,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,WAAU;aACX,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IACI,YAAA,GAAA,wBAAA,GAAA,CAAc,wDAAwD;KAClE,+BAA+B,CAAC;KAChC,6BAA6B;IACjC,CAAC;IACD,eAAY;IACZ,sBAAsB;KAClB,IAAI,WACA,mBAAmB,QAAQ;IAEnC;IACA,uBAAuB;KACnB,mBAAmB,QAAQ;IAC/B;IACA,OAAO,EACH,oBAAoB,GAAG,aAAa,gBAAgB,UAAU,IAAI,OAAO,IAC7E;eAEE,YAAY,oBAAoB;GACjC,CAAA;EACJ,CAAA;CACJ,CAAA;AAEb"}

package/collapsible.d.cts

@@ -0,0 +1,2 @@
+import { t as Collapsible } from "./Collapsible-Bbs4SWEA.cjs";
+export { Collapsible };

package/collapsible.d.mts

@@ -0,0 +1,2 @@
+import { t as Collapsible } from "./Collapsible-Bbs4SWEA.mjs";
+export { Collapsible };

package/collapsible.mjs

@@ -0,0 +1,43 @@
+'use client';
+import { t as nodeEnv } from "./nodeEnv-B4v61vkJ.mjs";
+import { cn } from "@evolve.ui/theme-system";
+import { useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Collapsible/Collapsible.tsx
+const Collapsible = ({ children, className, expanded = false, timing = 400 }) => {
+	const isTestEnv = nodeEnv === "test";
+	const [isTransitioning, setIsTransitioning] = useState(expanded);
+	const isInitialRender = useRef(true);
+	useEffect(() => {
+		setIsTransitioning(true);
+		isInitialRender.current = false;
+	}, [expanded]);
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("grid overflow-hidden transition-[grid-template-rows] ease-in-out", expanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]", className),
+		"data-expanded": expanded,
+		"data-hui-id": "Collapsible",
+		style: { transitionDuration: `${isTestEnv || isInitialRender.current ? 0 : timing}ms` },
+		children: /* @__PURE__ */ jsx("div", {
+			className: "min-h-0",
+			children: /* @__PURE__ */ jsx("div", {
+				className: cn("transform transition-[transform,opacity] ease-[ease]", {
+					"-translate-y-full opacity-0": !expanded,
+					"translate-y-0 opacity-100": expanded
+				}),
+				"data-testid": "collapsible-content",
+				onAnimationEnd: () => {
+					if (isTestEnv) setIsTransitioning(expanded);
+				},
+				onTransitionEnd: () => {
+					setIsTransitioning(expanded);
+				},
+				style: { transitionDuration: `${isTestEnv || isInitialRender.current ? 0 : timing}ms` },
+				children: (expanded || isTransitioning) && children
+			})
+		})
+	});
+};
+//#endregion
+export { Collapsible };
+
+//# sourceMappingURL=collapsible.mjs.map