@payfit/unity-components 3.1.14 → 3.1.15

package/dist/esm/components/multi-select/MultiSelect.js

@@ -1,254 +0,0 @@
-import { Icon as e } from "../icon/Icon.js";
-import { Spinner as t } from "../spinner/Spinner.js";
-import { CircularIconButton as n } from "../icon-button/CircularIconButton.js";
-import { Badge as r } from "../badge/Badge.js";
-import { Search as ee } from "../search/Search.js";
-import { reactAriaValueToSet as i, setToReactAriaDefaultValue as te, setToReactAriaValue as ne } from "./utils/selection-adapter.js";
-import { MultiSelectContext as re } from "./Multiselect.context.js";
-import { forwardRef as a, useCallback as o, useMemo as s, useRef as c, useState as l } from "react";
-import { uyTv as u } from "@payfit/unity-themes";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-import { useIntl as ie } from "react-intl";
-import { Button as ae, ButtonContext as oe } from "react-aria-components/Button";
-import { Separator as se } from "react-aria-components/Separator";
-import { ListBox as p } from "react-aria-components/ListBox";
-import { Popover as ce } from "react-aria-components/Popover";
-import { Autocomplete as le, useFilter as ue } from "react-aria-components/Autocomplete";
-import { Select as de } from "react-aria-components/Select";
-//#region src/components/multi-select/MultiSelect.tsx
-var fe = u({
-	slots: {
-		root: "uy:relative uy:flex uy:flex-col uy:gap-100 uy:w-full",
-		trigger: "uy:relative uy:h-5.5 uy:sm:h-500 uy:flex uy:items-center uy:justify-between uy:py-125 uy:sm:py-100 uy:px-150 uy:w-full uy:border uy:border-solid uy:rounded-100 uy:sm:rounded-75 uy:focus-visible:outline-none uy:focus-visible:ring-2 uy:focus-visible:ring-utility-focus-ring uy:focus-visible:ring-offset-2 uy:active:not([disabled]):border-border-form-active uy:pointer-events-auto!",
-		inputValue: "uy:flex-1 uy:typography-body uy:text-left uy:line-clamp-1",
-		state: "uy:grow-0 uy:outline-none uy:typography-body uy:placeholder:text-content-neutral-lowest uy:inline-flex uy:gap-50 uy:items-center uy:px-100",
-		suffix: "uy:text-content-neutral-lowest",
-		clearButton: "uy:absolute uy:right-[36px] uy:top-1/2 uy:z-10 uy:-translate-y-1/2",
-		popover: "uy:shadow-300 uy:z-50 uy:w-(--trigger-width) uy:max-h-[min(var(--popover-available-height,300px),300px)] uy:rounded-100 uy:sm:rounded-75 uy:border uy:border-solid uy:border-border-neutral uy:bg-surface-neutral uy:overflow-y-auto uy:overflow-x-hidden uy:outline-none",
-		list: "uy:p-100 uy:overflow-y-auto uy:overflow-x-hidden"
-	},
-	variants: {
-		isDisabled: { true: {
-			trigger: "uy:bg-surface-form-disabled uy:cursor-not-allowed uy:border-border-form-disabled uy:text-content-form-disabled",
-			inputValue: "uy:text-content-form-disabled!",
-			state: "uy:text-content-form-disabled",
-			suffix: "uy:text-content-form-disabled"
-		} },
-		isReadOnly: { true: {
-			trigger: "uy:bg-surface-form-disabled uy:cursor-not-allowed uy:border-border-form-disabled",
-			inputValue: "uy:text-content-form-disabled",
-			state: "uy:text-content-form-disabled",
-			suffix: "uy:text-content-form-disabled"
-		} },
-		isInvalid: { true: {
-			trigger: "uy:bg-surface-form-error uy:border-border-form-error",
-			inputValue: "uy:text-content-form-error",
-			state: "uy:text-content-form-error"
-		} },
-		isEmpty: {
-			true: { inputValue: "uy:text-content-neutral-lowest" },
-			false: { inputValue: "uy:text-content-form-enabled" }
-		}
-	},
-	compoundVariants: [{
-		isInvalid: !1,
-		isDisabled: !1,
-		isReadOnly: !1,
-		className: {
-			trigger: "uy:border-border-form-enabled uy:bg-surface-form-enabled",
-			inputValue: "uy:text-content-form-enabled uy:bg-surface-form-enabled",
-			state: "uy:text-content-neutral-disabled"
-		}
-	}, {
-		isEmpty: !0,
-		isDisabled: !1,
-		isReadOnly: !1,
-		isInvalid: !1,
-		className: { inputValue: "uy:text-content-neutral-lowest" }
-	}]
-});
-function m(e) {
-	return e instanceof Map;
-}
-function pe(e) {
-	return !Object.prototype.hasOwnProperty.call(e, "items");
-}
-function h(e) {
-	return typeof e == "object" && e && "value" in e && (typeof e.value == "string" || typeof e.value == "number") ? e.value : typeof e == "object" && e && "id" in e && (typeof e.id == "string" || typeof e.id == "number") ? e.id : typeof e == "string" || typeof e == "number" ? e : String(e);
-}
-var g = (e) => Array.from(e).map(String).join(", "), _ = (e) => Array.from(e).map((e) => h(e)).join(", ");
-function v(a, u) {
-	let v = ie(), y = c(null), me = c(null), [he, b] = l(!1), x = pe(a), S = a, C = a, { placeholder: w, isDisabled: T, isReadOnly: E, isLoading: D, isInvalid: O, onClearButtonPress: k, onBlur: ge, onFocus: _e, onChange: A, onOpenChange: j, value: M, defaultValue: N, isSearchable: P, renderValue: F, maxVisibleItems: I = 7, children: L, searchOptions: ve, ...ye } = a, [R, be] = l(() => new Set(N ?? [])), z = x ? void 0 : S.items, B = x ? void 0 : S.getItemValue, V = M !== void 0, H = s(() => V ? new Set(M) : R, [
-		V,
-		M,
-		R
-	]), U = F ?? (x ? g : _), W = o((e) => x || !B ? h(e) : B(e), [B, x]), G = o(() => x || !z ? [] : m(z) ? Array.from(z.values()).flat() : Array.from(z), [z, x]), xe = s(() => {
-		if (x) return new Set(H);
-		let e = G(), t = /* @__PURE__ */ new Set();
-		return H.forEach((n) => {
-			let r = e.find((e) => W(e) === n);
-			r && t.add(r);
-		}), t;
-	}, [
-		G,
-		x,
-		W,
-		H
-	]), K = Array.from(xe), q = Math.max(K.length - I, 0), J = H.size > 0 && !T && !E && !D, { root: Se, trigger: Ce, inputValue: we, state: Te, suffix: Ee, clearButton: De, popover: Y, list: X } = fe({
-		isDisabled: !!T,
-		isReadOnly: !!E,
-		isInvalid: !!O,
-		isEmpty: H.size === 0
-	}), Oe = s(() => {
-		if (K.length === 0) return w;
-		let e = K.slice(0, I), t = new Set(e);
-		return U(t);
-	}, [
-		I,
-		w,
-		U,
-		K
-	]), Z = o((e) => {
-		V || be(e), A?.(e);
-	}, [V, A]), ke = o((e) => {
-		Z(i(e));
-	}, [Z]), Ae = o(() => {
-		Z(/* @__PURE__ */ new Set()), k?.();
-	}, [k, Z]), je = o((e) => {
-		b(e), j?.(e);
-	}, [b, j]), Q = o(() => {
-		if (x) return C.children;
-		if (!z) return null;
-		if (m(z)) {
-			let e = z;
-			return Array.from(e.entries()).map(([e, t]) => L(e, t));
-		}
-		return Array.from(z).map((e) => L(e));
-	}, [
-		L,
-		z,
-		x,
-		C.children
-	]), $ = s(() => Q(), [Q]), { contains: Me } = ue(ve ?? { sensitivity: "base" });
-	return /* @__PURE__ */ d(de, {
-		...ye,
-		ref: y,
-		className: Se(),
-		isDisabled: T || E,
-		isInvalid: O,
-		onBlur: ge,
-		onChange: ke,
-		onFocus: _e,
-		onOpenChange: je,
-		placeholder: w,
-		selectionMode: "multiple",
-		shouldCloseOnSelect: !1,
-		value: ne(H),
-		defaultValue: te(N),
-		allowsEmptyCollection: !0,
-		children: /* @__PURE__ */ f(re.Provider, {
-			value: {
-				isSearchable: P,
-				maxVisibleItems: I,
-				selectedKeys: H
-			},
-			children: [
-				/* @__PURE__ */ f(ae, {
-					ref: u,
-					className: Ce(),
-					"data-dd-privacy": "mask",
-					isDisabled: T || E,
-					"aria-invalid": O,
-					"aria-readonly": E,
-					children: [
-						/* @__PURE__ */ d("span", {
-							className: we(),
-							translate: "no",
-							children: H.size > 0 ? Oe : w
-						}),
-						/* @__PURE__ */ f("span", {
-							className: Te(),
-							children: [
-								D && /* @__PURE__ */ d(t, {
-									color: "inherit",
-									size: "small",
-									label: v.formatMessage({
-										id: "unity:component:form-field:form-input:spinner:label",
-										defaultMessage: "Loading"
-									})
-								}),
-								O && /* @__PURE__ */ d(e, {
-									src: "WarningCircleOutlined",
-									color: "content.form.invalid",
-									alt: v.formatMessage({
-										id: "unity:component:form-field:form-input:error:alt",
-										defaultMessage: "Error"
-									})
-								}),
-								q > 0 && /* @__PURE__ */ f(r, {
-									variant: "numeric",
-									children: ["+", q]
-								}),
-								J && /* @__PURE__ */ d("span", {
-									className: "uy:w-300 uy:shrink-0",
-									"aria-hidden": !0
-								})
-							]
-						}),
-						/* @__PURE__ */ d(e, {
-							className: Ee(),
-							src: he ? "CaretUpOutlined" : "CaretDownOutlined",
-							role: "presentation"
-						})
-					]
-				}),
-				J && /* @__PURE__ */ d(oe.Provider, {
-					value: null,
-					children: /* @__PURE__ */ d(n, {
-						title: v.formatMessage({
-							id: "unity:component:common:clear:title",
-							defaultMessage: "Clear"
-						}),
-						className: De(),
-						icon: "CloseOutlined",
-						onPress: Ae,
-						asElement: "button"
-					})
-				}),
-				/* @__PURE__ */ d(ce, {
-					ref: me,
-					offset: 1,
-					containerPadding: 8,
-					className: Y(),
-					children: P ? /* @__PURE__ */ f(le, {
-						filter: Me,
-						children: [
-							/* @__PURE__ */ d("div", {
-								className: "uy:m-100",
-								children: /* @__PURE__ */ d(ee, {
-									label: v.formatMessage({
-										id: "unity:component:select:search:label",
-										defaultMessage: "Search options"
-									}),
-									"data-dd-privacy": "mask"
-								})
-							}),
-							/* @__PURE__ */ d(se, { className: "uy:mx-100 uy:border-t uy:border-border-neutral uy:border-solid" }),
-							/* @__PURE__ */ d(p, {
-								className: X(),
-								children: $
-							})
-						]
-					}) : /* @__PURE__ */ d(p, {
-						className: X(),
-						children: $
-					})
-				})
-			]
-		})
-	});
-}
-var y = a(v);
-y.displayName = "MultiSelect";
-//#endregion
-export { y as MultiSelect };

package/dist/esm/components/multi-select/Multiselect.context.js

@@ -1,8 +0,0 @@
-import { createContext as e } from "react";
-//#region src/components/multi-select/Multiselect.context.tsx
-var t = e({
-	isSearchable: !1,
-	selectedKeys: /* @__PURE__ */ new Set()
-});
-//#endregion
-export { t as MultiSelectContext };

package/dist/esm/components/multi-select/TanstackMultiSelect.d.ts

@@ -1,7 +0,0 @@
-import { MultiSelectComponent, MultiSelectProps } from './MultiselectTypes.js';
-export type TanstackMultiSelectProps<TItems = undefined> = Omit<MultiSelectProps<TItems>, 'value' | 'defaultValue' | 'onChange' | 'onBlur' | 'isInvalid'> & {
-    children?: MultiSelectProps<TItems>['children'];
-};
-export declare const TanstackMultiSelect: MultiSelectComponent & {
-    displayName: string;
-};

package/dist/esm/components/multi-select/TanstackMultiSelect.js

@@ -1,31 +0,0 @@
-import { MultiSelect as e } from "./MultiSelect.js";
-import { useFieldContext as t } from "../../hooks/tanstack-form-context.js";
-import { useFieldA11yContext as n } from "../form-field/TanstackFormField.context.js";
-import { forwardRef as r } from "react";
-import { jsx as i } from "react/jsx-runtime";
-var a = r((r, a) => {
-	let o = t(), s = n(), c = o.state.meta.isTouched && !o.state.meta.isValid, { onClearButtonPress: l, onFocus: u, isReadOnly: d, isDisabled: f, ...p } = r, m = (e) => {
-		o.handleChange(e);
-	}, h = () => {
-		o.handleBlur();
-	}, g = () => {
-		o.setValue(/* @__PURE__ */ new Set()), l && l();
-	};
-	return /* @__PURE__ */ i(e, {
-		...p,
-		ref: a,
-		id: s.inputId || p.id,
-		value: o.state.value,
-		onChange: m,
-		onBlur: h,
-		onFocus: u,
-		onClearButtonPress: g,
-		isReadOnly: d,
-		isDisabled: f,
-		isInvalid: c,
-		"aria-labelledby": s.labelId
-	});
-});
-a.displayName = "TanstackMultiSelect";
-//#endregion
-export { a as TanstackMultiSelect };

package/dist/esm/components/multi-select/parts/MultiSelectOptGroup.js

@@ -1,37 +0,0 @@
-import { uyTv as e } from "@payfit/unity-themes";
-import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
-import { Header as i } from "react-aria-components/Header";
-import { Separator as a } from "react-aria-components/Separator";
-import { ListBoxSection as o } from "react-aria-components/ListBox";
-import { Collection as s } from "react-aria-components/Collection";
-//#region src/components/multi-select/parts/MultiSelectOptGroup.tsx
-var c = e({ slots: {
-	base: "uy:flex uy:flex-col uy:bg-surface-neutral",
-	label: "uy:px-150 uy:py-100 uy:typography-body-strong uy:text-content-neutral",
-	separator: "uy:my-100 uy:border-t uy:border-border-neutral uy:border-solid"
-} });
-function l(e) {
-	return "items" in e && Array.isArray(e.items) && typeof e.children == "function";
-}
-function u(e) {
-	let { base: u, label: d, separator: f } = c(), { label: p, withSeparator: m, className: h, ...g } = e;
-	return /* @__PURE__ */ r(t, { children: [/* @__PURE__ */ r(o, {
-		...g,
-		id: p,
-		className: u({ className: h }),
-		children: [/* @__PURE__ */ n(i, {
-			className: d(),
-			children: p
-		}), l(e) ? /* @__PURE__ */ n(s, {
-			items: e.items,
-			children: e.children
-		}) : e.children]
-	}), m && /* @__PURE__ */ n(a, {
-		orientation: "horizontal",
-		className: f(),
-		"aria-hidden": !0
-	})] });
-}
-u.displayName = "MultiSelectOptGroup";
-//#endregion
-export { u as MultiSelectOptGroup };

package/dist/esm/components/multi-select/parts/MultiSelectOption.js

@@ -1,63 +0,0 @@
-import e from "../../../hooks/use-id.js";
-import { CheckboxIndicator as t } from "../../checkbox/parts/CheckboxIndicator.js";
-import { forwardRef as n } from "react";
-import { uyTv as r } from "@payfit/unity-themes";
-import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
-import { ListBoxItem as s } from "react-aria-components/ListBox";
-//#region src/components/multi-select/parts/MultiSelectOption.tsx
-var c = r({
-	slots: {
-		base: [
-			"uy:flex uy:flex-col uy:transition",
-			"uy:w-full uy:px-150 uy:py-100",
-			"uy:rounded-50 uy:cursor-pointer",
-			"uy:outline-none",
-			"uy:data-[hovered=true]:bg-surface-neutral-hover",
-			"uy:data-[pressed=true]:bg-surface-neutral-pressed",
-			"uy:data-[focus-visible=true]:outline uy:data-[focus-visible=true]:outline-2 uy:data-[focus-visible=true]:outline-solid uy:data-[focus-visible=true]:outline-utility-focus-ring uy:data-[focus-visible=true]:-outline-offset-2"
-		],
-		label: "uy:inline-flex uy:items-center uy:gap-100 uy:text-content-neutral uy:typography-body",
-		helperText: "uy:inline-block uy:typography-body uy:text-content-neutral-low uy:pl-3.5"
-	},
-	variants: { isDisabled: {
-		true: {
-			base: "uy:cursor-not-allowed!",
-			label: "uy:text-content-neutral-disabled",
-			helperText: "uy:text-content-neutral-disabled"
-		},
-		false: { base: "" }
-	} }
-});
-function l(e, t) {
-	if (t !== void 0) return t;
-	if (typeof e == "string") return e;
-}
-function u({ value: n, children: r, isDisabled: u, helperText: d, textValue: f, ...p }, m) {
-	let h = e(), { base: g, label: _, helperText: v } = c({ isDisabled: u });
-	return /* @__PURE__ */ a(s, {
-		"data-dd-privacy": "mask",
-		...p,
-		ref: m,
-		id: n,
-		isDisabled: u,
-		textValue: l(r, f),
-		className: g(),
-		"aria-describedby": d ? `${h}-helper-text` : void 0,
-		children: ({ isSelected: e }) => /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ o("div", {
-			className: _(),
-			children: [/* @__PURE__ */ a(t, {
-				isSelected: e,
-				isDisabled: u,
-				"data-dd-privacy": "hidden"
-			}), r]
-		}), d && /* @__PURE__ */ a("span", {
-			id: `${h}-helper-text`,
-			className: v(),
-			children: d
-		})] })
-	});
-}
-u.displayName = "MultiSelectOption";
-var d = n(u);
-//#endregion
-export { d as MultiSelectOption };

package/dist/esm/components/multi-select/utils/selection-adapter.js

@@ -1,12 +0,0 @@
-//#region src/components/multi-select/utils/selection-adapter.ts
-function e(e) {
-	if (e !== void 0) return Array.from(e);
-}
-function t(e) {
-	if (e !== void 0) return Array.from(e);
-}
-function n(e) {
-	return new Set(e.filter((e) => typeof e == "string" || typeof e == "number"));
-}
-//#endregion
-export { n as reactAriaValueToSet, t as setToReactAriaDefaultValue, e as setToReactAriaValue };

package/dist/esm/components/multi-select-field/TanstackMultiSelectField.d.ts

@@ -1,92 +0,0 @@
-import { ForwardedRef, ReactNode } from 'react';
-import { LabelProps } from '../label/Label.js';
-import { TanstackMultiSelectProps } from '../multi-select/TanstackMultiSelect.js';
-export type TanstackMultiSelectFieldProps<TItems = undefined> = TanstackMultiSelectProps<TItems> & Pick<LabelProps, 'isRequired' | 'requiredVariant'> & {
-    /** The label for the multi-select field. */
-    label: string;
-    /** Helper text to display below the multi-select field. */
-    helperText?: ReactNode;
-    /** A contextual link to display below the multi-select field. */
-    contextualLink?: ReactNode;
-};
-type TanstackMultiSelectFieldComponent = <TItems = undefined>(props: TanstackMultiSelectFieldProps<TItems> & {
-    ref?: ForwardedRef<HTMLButtonElement>;
-}) => React.JSX.Element;
-/**
- * The `TanstackMultiSelectField` component renders a full field (label, multi-select, feedback)
- * wired to the TanStack Form context. It manages state and accessibility via the
- * context provided by `useTanstackUnityForm` and `<form.AppField name="…">`.
-  @example
- * ```tsx
- * import { TanstackMultiSelectField } from "@/components/multi-select-field/TanstackMultiSelectField"
- * import { useTanstackUnityForm } from "@/hooks/use-tanstack-form"
- * import { MultiSelectOption } from "@/components/multi-select/parts/MultiSelectOption"
- *
- * function Example() {
- *  const schema = z.object({
- *     fruits: z.set(z.string()).min(1, 'Select at least one fruit'),
- *  })
- *
- *   const form = useTanstackUnityForm({ validators: {
- *     onBlur: schema,
- *   } })
- *   return (
- *     <form>
- *       <form.AppField name="fruits">
- *         {() => (
- *           <TanstackMultiSelectField
- *             label="Favorite Fruits"
- *             helperText="Choose your favorites"
- *             placeholder="Select fruits..."
- *           >
- *             <MultiSelectOption value="apple">Apple</MultiSelectOption>
- *             <MultiSelectOption value="banana">Banana</MultiSelectOption>
- *             <MultiSelectOption value="orange">Orange</MultiSelectOption>
- *           </TanstackMultiSelectField>
- *         )}
- *       </form.AppField>
- *     </form>
- *   )
- * }
- * ```
- * @example
- * ```tsx
- * interface Fruit { id: string; name: string }
- * const fruits = new Set<Fruit>([...])
- *
- * function Example() {
- *  const schema = z.object({
- *     fruits: z.set(z.string()).min(1, 'Select at least one fruit'),
- *  })
- *
- *   const form = useTanstackUnityForm({ validators: {
- *     onBlur: schema,
- *   } })
- *   return (
- *     <form>
- *       <form.AppField name="fruits">
- *         {() => (
- *           <TanstackMultiSelectField
- *             label="Favorite Fruits"
- *             items={fruits}
- *             getItemValue={fruit => fruit.id}
- *             renderValue={items => Array.from(items).map(i => i.name).join(', ')}
- *           >
- *             {fruit => (
- *               <MultiSelectOption value={fruit.id}>{fruit.name}</MultiSelectOption>
- *             )}
- *           </TanstackMultiSelectField>
- *         )}
- *       </form.AppField>
- *     </form>
- *   )
- * }
- * ```
- * @remarks Migration from `MultiSelectField` (non‑TanStack):
- * - Do not pass a `name` prop to the field: use `<form.AppField name="…">`.
- * - `value`, `defaultValue`, `onChange`, and `isInvalid` are derived from the TanStack form context.
- */
-export declare const TanstackMultiSelectField: TanstackMultiSelectFieldComponent & {
-    displayName: string;
-};
-export {};

package/dist/esm/components/multi-select-field/test-utils.js

@@ -1,22 +0,0 @@
-import { expect as e, screen as t, userEvent as n, within as r } from "storybook/test";
-//#region src/components/multi-select-field/test-utils.ts
-var i = (i) => ({
-	selectOption: async ({ labelText: e, optionNames: a, container: o = i.canvasElement }) => {
-		await i.step(`Select options "${a.join(", ")}" in "${e}"`, async () => {
-			let i = r(o).getByLabelText(e, { exact: !1 });
-			if (!i) throw Error(`Multi-select not found for label ${e}`);
-			await n.click(i, { delay: 100 });
-			for (let e of a) await n.click(t.getByRole("option", { name: e }), { delay: 100 });
-			await n.keyboard("{Escape}", { delay: 100 });
-		});
-	},
-	assertSelectedOptions: async ({ labelText: t, expectedDisplayValue: n, container: a = i.canvasElement }) => {
-		await i.step(`Assert selected options "${n}" in "${t}"`, async () => {
-			let i = r(a).getByLabelText(t, { exact: !1 });
-			if (!i) throw Error(`Multi-select not found for label ${t}`);
-			await e(i).toHaveTextContent(n);
-		});
-	}
-});
-//#endregion
-export { i as getTestingUtilsMultiSelect };

package/dist/esm/components/nav/Nav.js

@@ -1,22 +0,0 @@
-import e from "../../hooks/use-id.js";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-//#region src/components/nav/Nav.tsx
-function r({ children: r, title: i, ...a }) {
-	let o = `nav-title-${e()}`;
-	return /* @__PURE__ */ n("nav", {
-		...a,
-		className: "uy:flex uy:flex-col uy:gap-50 uy:min-w-[264px]",
-		"aria-labelledby": o,
-		children: [/* @__PURE__ */ t("h3", {
-			id: o,
-			className: "uy:typography-body-strong uy:text-content-neutral uy:py-100 uy:px-150",
-			children: i
-		}), /* @__PURE__ */ t("ul", {
-			className: "uy:flex uy:flex-col uy:gap-50 uy:list-none",
-			children: r
-		})]
-	});
-}
-r.displayName = "Nav";
-//#endregion
-export { r as Nav };

package/dist/esm/components/nav/parts/NavGroup.js

@@ -1,105 +0,0 @@
-import { Icon as e } from "../../icon/Icon.js";
-import t from "../../../hooks/use-id.js";
-import { navItemBase as n } from "./RawNavItem.js";
-import r, { useCallback as i, useMemo as a, useState as o } from "react";
-import { uyTv as s } from "@payfit/unity-themes";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { Button as u } from "react-aria-components/Button";
-//#region src/components/nav/parts/NavGroup.tsx
-var d = s({
-	extend: n,
-	slots: {
-		base: "uy:border-1 uy:border-solid",
-		caret: "uy:transition-transform uy:duration-150 uy:delay-25 uy:ease-linear motion-reduce:transition-none",
-		contentWrapper: "uy:transition-[max-height] uy:duration-200 uy:ease-linear motion-reduce:transition-none",
-		content: "uy:list-none uy:flex uy:flex-col uy:gap-50 uy:transition-opacity uy:duration-150 uy:delay-25 uy:ease-linear"
-	},
-	variants: { expanded: {
-		true: {
-			base: ["", "uy:bg-surface-neutral uy:border-border-neutral uy:shadow-100"],
-			prefix: ["", "uy:text-content-primary"],
-			caret: "uy:rotate-180",
-			contentWrapper: "uy:max-h-[1000px] uy:overflow-visible",
-			label: "uy:typography-body-strong",
-			content: "uy:opacity-100 uy:visible"
-		},
-		false: {
-			caret: "uy:rotate-0",
-			contentWrapper: "uy:max-h-0 uy:overflow-hidden",
-			content: "uy:opacity-0 uy:invisible uy:pointer-events-none",
-			label: "uy:typography-body",
-			base: "uy:border-transparent"
-		}
-	} }
-});
-function f({ children: n, label: s, prefix: f, suffix: p, defaultExpanded: m = !1, isExpanded: h, onToggle: g, ..._ }) {
-	let v = t(), [y, b] = o(m), x = h !== void 0, S = x ? h : y, C = i(() => {
-		x || b((e) => !e), g?.(!S);
-	}, [
-		x,
-		S,
-		g
-	]), w = r.Children.map(n, (e) => r.isValidElement(e) ? r.cloneElement(e, {
-		isDisabled: !S,
-		level: 1
-	}) : e), T = `${v}-toggle`, E = `${v}-content`, { baseClassName: D, prefixClassName: O, labelClassName: k, suffixClassName: A, contentClassName: j, contentWrapperClassName: M, caretClassName: N } = a(() => {
-		let e = d({
-			level: 0,
-			expanded: S
-		});
-		return {
-			baseClassName: e.base({ className: "uy:w-full" }),
-			prefixClassName: e.prefix(),
-			suffixClassName: e.suffix(),
-			labelClassName: e.label(),
-			contentWrapperClassName: e.contentWrapper(),
-			contentClassName: e.content(),
-			caretClassName: e.caret()
-		};
-	}, [S]);
-	return /* @__PURE__ */ l("li", {
-		className: "uy:flex uy:flex-col uy:gap-50",
-		children: [/* @__PURE__ */ l(u, {
-			id: T,
-			className: D,
-			onPress: C,
-			"aria-expanded": S,
-			"aria-controls": E,
-			..._,
-			children: [
-				f && /* @__PURE__ */ c("span", {
-					className: O,
-					children: f({ isExpanded: S })
-				}),
-				/* @__PURE__ */ c("span", {
-					className: k,
-					children: s
-				}),
-				/* @__PURE__ */ l("span", {
-					className: A,
-					role: "presentation",
-					children: [p, /* @__PURE__ */ c(e, {
-						src: "CaretDownOutlined",
-						alt: "expand group",
-						size: 20,
-						className: N,
-						color: "inherit"
-					})]
-				})
-			]
-		}), /* @__PURE__ */ c("div", {
-			className: M,
-			style: { maxHeight: S ? 1e3 : 0 },
-			children: /* @__PURE__ */ c("ul", {
-				id: E,
-				className: j,
-				"aria-labelledby": T,
-				"aria-hidden": !S,
-				children: w
-			})
-		})]
-	});
-}
-f.displayName = "NavGroup";
-//#endregion
-export { f as NavGroup };