alif-ui 2.0.0-alpha.2 → 2.0.0-alpha.21

package/dist/components/Select/SelectMultiple/SelectMultiple.js

@@ -1,232 +1,152 @@
-import { jsxs as V, jsx as l } from "react/jsx-runtime";
-import { useRef as D, useState as P, useMemo as _, useEffect as ae } from "react";
-import { classNames as W } from "../../../utils/class-names.js";
-import { syncRefs as fe } from "../../../utils/sync-refs.js";
-import { InputBaseWrapper as de } from "../../Field/InputBaseWrapper/InputBaseWrapper.js";
-import { InputBase as ue } from "../../Field/InputBase/InputBase.js";
-import { isObjectValue as me, flattenOptions as he, isGroupedOptions as G, matchesSearch as M } from "../Select.utils.js";
-import { useComponentId as pe } from "../../../hooks/useComponentId/useComponentId.js";
-import { Popover as y } from "../../Popover/Popover.js";
-import { Badge as ge } from "../../Badge/Badge.js";
-import { List as v } from "../../List/List.js";
-import { OutlineSystemClose as _e } from "../../../icons/components/OutlineSystemClose.js";
-import { OutlineNavigationChevronDown as ve } from "../../../icons/components/OutlineNavigationChevronDown.js";
-const Oe = "_root_6ho2n_1", be = "_tags_6ho2n_10", Ie = "_tag_6ho2n_10", Ce = "_disabled_6ho2n_24", xe = "_inputBase_6ho2n_28", we = "_chevron_6ho2n_32", Ne = "_chevronActive_6ho2n_36", Be = "_tagCloseIcon_6ho2n_40", c = {
-  root: Oe,
-  tags: be,
-  tag: Ie,
-  disabled: Ce,
-  inputBase: xe,
-  chevron: we,
-  chevronActive: Ne,
-  tagCloseIcon: Be
-}, Me = ({
-  id: E,
-  name: q,
-  ref: z,
-  values: n,
-  options: a,
-  label: F,
-  placeholder: H,
-  customEmptyText: J,
-  size: O,
-  fullWidth: T = !0,
-  alignItemsCenter: k,
-  className: K,
-  itemClassName: R,
-  style: Q,
-  disabled: b,
-  loading: U,
-  skeletonCount: X,
-  hasError: Y,
-  filterable: I,
-  disableClientFilter: j,
-  showClearIcon: Z = !0,
-  closeOnSelect: $ = !1,
-  clearInputOnSelect: ee = !1,
-  hintLeftSection: te,
-  hintRightSection: se,
-  onChange: u,
-  onSearch: r,
-  onBlur: ne
-}) => {
-  const m = D(null), C = D(null), A = pe(E), [h, p] = P(!1), [d, x] = P(""), f = _(
-    () => !n.length || n.length > 0 && me(n[0]),
-    [n]
-  ), o = _(() => f ? n.map((e) => e.value) : n, [n, f]), le = _(() => {
-    if (f) return n;
-    const e = he(a);
-    return o.map((t) => e.find((s) => s.value === t)).filter((t) => !!t);
-  }, [f, a, o, n]), g = _(() => !I || j ? a : G(a) ? a.map((e) => ({
-    ...e,
-    options: e.options.filter(M(d))
-  })).filter((e) => e.options.length > 0) : a.filter(M(d)), [j, I, a, d]), re = (e) => {
-    const t = e.target.value;
-    x(t), r == null || r(t), p(!0);
-  }, L = (e, t) => {
-    var i;
-    if (o.includes(e)) {
-      const w = o.filter((B) => B !== e), N = f ? n.filter((B) => B.value !== e) : void 0;
-      u(w, N);
-    } else {
-      const w = [...o, e], N = f ? [...n, t] : void 0;
-      u(w, N);
-    }
-    (i = C.current) == null || i.focus(), ee && (x(""), r == null || r("")), $ && p(!1);
-  }, oe = (e) => {
-    const t = o.filter((i) => i !== e), s = f ? n.filter((i) => i.value !== e) : void 0;
-    u(t, s);
-  }, S = () => {
-    p(!1), r == null || r(""), x("");
-  }, ie = () => {
-    u([], []), S();
-  };
-  ae(() => {
-    m.current && (m.current.scrollLeft = h ? m.current.scrollWidth : 0);
-  }, [g, n, h]);
-  const ce = () => G(g) ? g.map((e, t) => /* @__PURE__ */ l(
-    v.Group,
-    {
-      title: e.title,
-      collapsible: e.collapsible,
-      defaultOpen: e.defaultOpen,
-      children: e.options.map((s) => /* @__PURE__ */ l(
-        v.Item,
-        {
-          value: s.value,
-          label: s.label,
-          secondaryText: s.secondaryText,
-          disabled: s.disabled,
-          alignItemCenter: k,
-          selected: o.includes(s.value),
-          onClick: (i) => L(i, s),
-          className: R,
-          leftSection: s.leftSection,
-          rightSection: s.rightSection
-        },
-        String(s.value)
-      ))
-    },
-    t
-  )) : g.map((e) => /* @__PURE__ */ l(
-    v.Item,
-    {
-      value: e.value,
-      label: e.label,
-      secondaryText: e.secondaryText,
-      disabled: e.disabled,
-      alignItemCenter: k,
-      selected: o.includes(e.value),
-      onClick: (t) => L(t, e),
-      className: R,
-      leftSection: e.leftSection,
-      rightSection: e.rightSection
-    },
-    String(e.value)
-  ));
-  return /* @__PURE__ */ V(
-    y,
-    {
-      isOpen: h,
-      width: "trigger",
-      onClose: S,
-      offset: 4,
-      children: [
-        /* @__PURE__ */ l(
-          y.Trigger,
-          {
-            style: Q,
-            onBlur: ne,
-            className: W(
-              c.root,
-              T && "uiFullWidth",
-              b && c.disabled,
-              K
-            ),
-            children: /* @__PURE__ */ l(
-              de,
-              {
-                bordered: !0,
-                fullWidth: !0,
-                keepLabel: !0,
-                value: d || n.length > 0 ? "filled" : "",
-                id: A,
-                label: F,
-                hasError: Y,
-                size: O,
-                disabled: b,
-                onClear: Z ? ie : void 0,
-                onClick: () => p((e) => !e),
-                inputRef: C,
-                hintLeftSection: te,
-                hintRightSection: se,
-                rightIcon: /* @__PURE__ */ l(
-                  ve,
-                  {
-                    className: W(
-                      c.chevron,
-                      h && c.chevronActive
-                    )
-                  }
-                ),
-                children: /* @__PURE__ */ V("div", { ref: m, className: c.tags, children: [
-                  le.map((e, t) => /* @__PURE__ */ V(
-                    ge,
-                    {
-                      variant: "light",
-                      color: "neutral",
-                      size: O === "l" ? "s" : "xs",
-                      className: c.tag,
-                      children: [
-                        e.leftSection,
-                        e.label,
-                        e.rightSection,
-                        /* @__PURE__ */ l(
-                          _e,
-                          {
-                            className: c.tagCloseIcon,
-                            onClick: (s) => {
-                              s.stopPropagation(), oe(e.value);
-                            }
-                          }
-                        )
-                      ]
-                    },
-                    t
-                  )),
-                  I && /* @__PURE__ */ l(
-                    ue,
-                    {
-                      id: A,
-                      ref: fe(C, z),
-                      name: q,
-                      placeholder: H,
-                      value: d,
-                      onChange: re,
-                      disabled: b,
-                      className: c.inputBase
-                    }
-                  )
-                ] })
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ l(y.Dropdown, { children: /* @__PURE__ */ l(
-          v,
-          {
-            loading: U,
-            skeletonCount: X,
-            size: O === "l" ? "l" : "m",
-            fullWidth: T,
-            customEmptyText: J,
-            children: ce()
-          }
-        ) })
-      ]
-    }
-  );
-};
-export {
-  Me as SelectMultiple
+"use client";
+import { classNames as e } from "../../../utils/class-names.js";
+import { syncRefs as t } from "../../../utils/sync-refs.js";
+import { OutlineNavigationChevronDown as ee } from "../../../icons/components/OutlineNavigationChevronDown.js";
+import { OutlineSystemClose as n } from "../../../icons/components/OutlineSystemClose.js";
+import { Badge as r } from "../../Badge/Badge.js";
+import { useComponentId as te } from "../../../hooks/useComponentId/useComponentId.js";
+import { PopoverWithFallback as i } from "../../NativePopover/PopoverWithFallback.js";
+import { InputBaseWrapper as ne } from "../../Field/InputBaseWrapper/InputBaseWrapper.js";
+import { InputBase as re } from "../../Field/InputBase/InputBase.js";
+import { List as a } from "../../List/List.js";
+import { flattenOptions as o, isGroupedOptions as s, isObjectValue as ie, matchesSearch as c } from "../Select.utils.js";
+import l from "../../../lib/components/Select/SelectMultiple/SelectMultiple.module.js";
+import { useEffect as u, useMemo as d, useRef as f, useState as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/lib/components/Select/SelectMultiple/SelectMultiple.tsx
+var g = ({ id: g, name: ae, ref: oe, values: _, options: v, label: y, placeholder: se, customEmptyText: ce, maxHeight: le, size: b, fullWidth: x = !0, alignItemsCenter: S, className: ue, itemClassName: C, style: de, disabled: w, loading: T, skeletonCount: E, onLoadMore: D, hasMore: O, loadingMore: k, loadMoreOffset: A, hasError: j, filterable: M, disableClientFilter: N, showClearIcon: P = !0, closeOnSelect: F = !1, clearInputOnSelect: I = !1, hintLeftSection: L, hintRightSection: R, onChange: z, onSearch: B, onBlur: V }) => {
+	let H = f(null), U = f(null), W = te(g), [G, K] = p(!1), [q, J] = p(""), Y = d(() => !_.length || _.length > 0 && ie(_[0]), [_]), X = d(() => Y ? _.map((e) => e.value) : _, [_, Y]), fe = d(() => {
+		if (Y) return _;
+		let e = o(v);
+		return X.map((t) => e.find((e) => e.value === t)).filter((e) => !!e);
+	}, [
+		Y,
+		v,
+		X,
+		_
+	]), Z = d(() => !M || N ? v : s(v) ? v.map((e) => ({
+		...e,
+		options: e.options.filter(c(q))
+	})).filter((e) => e.options.length > 0) : v.filter(c(q)), [
+		N,
+		M,
+		v,
+		q
+	]), pe = (e) => {
+		let t = e.target.value;
+		J(t), B?.(t), K(!0);
+	}, Q = (e, t) => {
+		X.includes(e) ? z(X.filter((t) => t !== e), Y ? _.filter((t) => t.value !== e) : void 0) : z([...X, e], Y ? [..._, t] : void 0), U.current?.focus(), I && (J(""), B?.("")), F && K(!1);
+	}, me = (e) => {
+		z(X.filter((t) => t !== e), Y ? _.filter((t) => t.value !== e) : void 0);
+	}, $ = () => {
+		K(!1), B?.(""), J("");
+	};
+	return u(() => {
+		H.current && (H.current.scrollLeft = G ? H.current.scrollWidth : 0);
+	}, [
+		Z,
+		_,
+		G
+	]), /* @__PURE__ */ h(i, {
+		isOpen: G,
+		width: "trigger",
+		onClose: $,
+		offset: 4,
+		children: [/* @__PURE__ */ m(i.Trigger, {
+			style: de,
+			onBlur: V,
+			className: e(l.root, x && "uiFullWidth", w && l.disabled, ue),
+			children: /* @__PURE__ */ m(ne, {
+				bordered: !0,
+				fullWidth: !0,
+				keepLabel: !0,
+				value: q || _.length > 0 ? "filled" : "",
+				id: W,
+				label: y,
+				hasError: j,
+				size: b,
+				disabled: w,
+				onClear: P ? () => {
+					z([], []), $();
+				} : void 0,
+				onClick: () => K((e) => !e),
+				inputRef: U,
+				hintLeftSection: L,
+				hintRightSection: R,
+				rightIcon: /* @__PURE__ */ m(ee, { className: e(l.chevron, G && l.chevronActive) }),
+				children: /* @__PURE__ */ h("div", {
+					ref: H,
+					className: l.tags,
+					children: [fe.map((e, t) => /* @__PURE__ */ h(r, {
+						variant: "light",
+						color: "neutral",
+						size: b === "l" ? "s" : "xs",
+						className: l.tag,
+						children: [
+							e.leftSection,
+							e.label,
+							e.rightSection,
+							/* @__PURE__ */ m(n, {
+								className: l.tagCloseIcon,
+								onClick: (t) => {
+									t.stopPropagation(), me(e.value);
+								}
+							})
+						]
+					}, t)), M && /* @__PURE__ */ m(re, {
+						id: W,
+						ref: t(U, oe),
+						name: ae,
+						placeholder: se,
+						value: q,
+						onChange: pe,
+						disabled: w,
+						className: l.inputBase
+					})]
+				})
+			})
+		}), /* @__PURE__ */ m(i.Dropdown, { children: /* @__PURE__ */ m(a, {
+			loading: T,
+			skeletonCount: E,
+			size: b === "l" ? "l" : "m",
+			fullWidth: x,
+			customEmptyText: ce,
+			maxHeight: le,
+			onLoadMore: D,
+			hasMore: O,
+			loadingMore: k,
+			loadMoreOffset: A,
+			children: s(Z) ? Z.map((e, t) => /* @__PURE__ */ m(a.Group, {
+				title: e.title,
+				collapsible: e.collapsible,
+				defaultOpen: e.defaultOpen,
+				children: e.options.map((e) => /* @__PURE__ */ m(a.Item, {
+					value: e.value,
+					label: e.label,
+					secondaryText: e.secondaryText,
+					disabled: e.disabled,
+					alignItemCenter: S,
+					selected: X.includes(e.value),
+					onClick: (t) => Q(t, e),
+					className: C,
+					leftSection: e.leftSection,
+					rightSection: e.rightSection
+				}, String(e.value)))
+			}, t)) : Z.map((e) => /* @__PURE__ */ m(a.Item, {
+				value: e.value,
+				label: e.label,
+				secondaryText: e.secondaryText,
+				disabled: e.disabled,
+				alignItemCenter: S,
+				selected: X.includes(e.value),
+				onClick: (t) => Q(t, e),
+				className: C,
+				leftSection: e.leftSection,
+				rightSection: e.rightSection
+			}, String(e.value)))
+		}) })]
+	});
 };
+//#endregion
+export { g as SelectMultiple };

package/dist/components/Select/SelectMultiple/SelectMultiple.types.js

@@ -1 +0,0 @@
-

package/dist/components/SelectorInput/SelectorInput.js

@@ -1,95 +1,51 @@
-import { jsx as e, jsxs as p } from "react/jsx-runtime";
-import { useState as u, useRef as I, useMemo as x, useLayoutEffect as L } from "react";
-import { classNames as h } from "../../utils/class-names.js";
-import { getSelectorInputStyles as R, resolveTypographyLabel as j } from "./SelectorInput.utils.js";
-import { Field as C } from "../Field/Field.js";
-import { Popover as g } from "../Popover/Popover.js";
-import { List as b } from "../List/List.js";
-import { OutlineNavigationChevronDown as F } from "../../icons/components/OutlineNavigationChevronDown.js";
-const T = "_root_z0a8l_1", W = "_input_z0a8l_30", k = "_trigger_z0a8l_34", E = "_triggerDisabled_z0a8l_51", M = "_triggerActive_z0a8l_56", q = "_chevron_z0a8l_69", t = {
-  root: T,
-  input: W,
-  trigger: k,
-  triggerDisabled: E,
-  triggerActive: M,
-  chevron: q
-}, X = ({
-  inputProps: o,
-  selectorProps: D,
-  disabled: m,
-  size: s = "m",
-  color: y = "secondary"
-}) => {
-  const [i, d] = u(!1), [N, S] = u(), l = I(null), {
-    options: c = [],
-    value: n,
-    disabled: O = !1,
-    onChange: a,
-    renderSelectedOption: f,
-    ...w
-  } = D ?? {}, _ = m || O, v = x(
-    () => c.find((r) => r.value === n),
-    [c, n]
-  );
-  return L(() => {
-    l.current && S(l.current.offsetWidth);
-  }, [i]), /* @__PURE__ */ e(
-    "div",
-    {
-      ref: l,
-      className: t.root,
-      style: R(y, s),
-      children: /* @__PURE__ */ e(
-        C,
-        {
-          ...o,
-          disabled: m,
-          size: s,
-          className: h(t.input, o == null ? void 0 : o.className),
-          leftSection: /* @__PURE__ */ p(
-            g,
-            {
-              position: "bottom-start",
-              isOpen: i,
-              onChange: d,
-              disabled: _,
-              offset: 4,
-              children: [
-                /* @__PURE__ */ p(
-                  g.Trigger,
-                  {
-                    style: j(s),
-                    className: h(
-                      t.trigger,
-                      "uiFont",
-                      i && t.triggerActive,
-                      _ && t.triggerDisabled
-                    ),
-                    children: [
-                      f && v && f(v),
-                      /* @__PURE__ */ e(F, { className: t.chevron })
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ e(g.Dropdown, { children: /* @__PURE__ */ e(b, { width: N, ...w, children: c.map((r) => /* @__PURE__ */ e(
-                  b.Item,
-                  {
-                    ...r,
-                    selected: r.value === n,
-                    onClick: (z, A) => {
-                      a == null || a(z, A), d(!1);
-                    }
-                  },
-                  String(r.value)
-                )) }) })
-              ]
-            }
-          )
-        }
-      )
-    }
-  );
-};
-export {
-  X as SelectorInput
+"use client";
+import { classNames as e } from "../../utils/class-names.js";
+import { OutlineNavigationChevronDown as t } from "../../icons/components/OutlineNavigationChevronDown.js";
+import { PopoverWithFallback as n } from "../NativePopover/PopoverWithFallback.js";
+import { Field as r } from "../Field/Field.js";
+import { List as i } from "../List/List.js";
+import a from "../../lib/components/SelectorInput/SelectorInput.module.js";
+import { getSelectorInputStyles as o, resolveTypographyLabel as s } from "./SelectorInput.utils.js";
+import { useLayoutEffect as c, useMemo as l, useRef as u, useState as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/lib/components/SelectorInput/SelectorInput.tsx
+var m = ({ inputProps: m, selectorProps: h, disabled: g, size: _ = "m", color: v = "secondary" }) => {
+	let [y, b] = d(!1), [x, S] = d(), C = u(null), { options: w = [], value: T, disabled: E = !1, onChange: D, renderSelectedOption: O, ...k } = h ?? {}, A = g || E, j = l(() => w.find((e) => e.value === T), [w, T]);
+	return c(() => {
+		C.current && S(C.current.offsetWidth);
+	}, [y]), /* @__PURE__ */ f("div", {
+		ref: C,
+		className: a.root,
+		style: o(v, _),
+		children: /* @__PURE__ */ f(r, {
+			...m,
+			disabled: g,
+			size: _,
+			className: e(a.input, m?.className),
+			leftSection: /* @__PURE__ */ p(n, {
+				position: "bottom-start",
+				isOpen: y,
+				onChange: b,
+				disabled: A,
+				offset: 4,
+				children: [/* @__PURE__ */ p(n.Trigger, {
+					style: s(_),
+					className: e(a.trigger, "uiFont", y && a.triggerActive, A && a.triggerDisabled),
+					children: [O && j && O(j), /* @__PURE__ */ f(t, { className: a.chevron })]
+				}), /* @__PURE__ */ f(n.Dropdown, { children: /* @__PURE__ */ f(i, {
+					width: x,
+					...k,
+					children: w.map((e) => /* @__PURE__ */ f(i.Item, {
+						...e,
+						selected: e.value === T,
+						onClick: (e, t) => {
+							D?.(e, t), b(!1);
+						}
+					}, String(e.value)))
+				}) })]
+			})
+		})
+	});
 };
+//#endregion
+export { m as SelectorInput };

package/dist/components/SelectorInput/SelectorInput.types.js

@@ -1 +0,0 @@
-

package/dist/components/SelectorInput/SelectorInput.utils.js

@@ -1,31 +1,24 @@
-import { getSize as o } from "../../utils/get-size.js";
-import { resolveTypography as n } from "../../utils/typography.js";
-const i = (t) => {
-  switch (t) {
-    case "l":
-      return n("body", "m");
-    case "m":
-      return n("body", "s");
-    case "s":
-      return n("description", "l");
-  }
-}, l = (t, e) => {
-  const r = t === "secondary";
-  return {
-    "--selector-input-bg-color": r ? `var(--selector-input-bg-color-${t})` : "transparent",
-    "--selector-input-content-color-default": `var(--selector-input-content-color-${t}-default)`,
-    "--selector-input-content-color-hover": `var(--selector-input-content-color-${t}-hover)`,
-    "--selector-input-content-color-active": `var(--selector-input-content-color-${t}-active)`,
-    "--selector-input-icon-size": o(e, "selector-input-icon-size"),
-    "--selector-input-height": o(e, "selector-input-height"),
-    "--selector-input-spacing-horizontal": r ? `0 ${o(e, "selector-input-spacing-horizontal")}` : `0 0 0 ${o(e, "selector-input-spacing-horizontal")}`,
-    "--selector-input-spacing-between": o(
-      e,
-      "selector-input-spacing-between"
-    )
-  };
-};
-export {
-  l as getSelectorInputStyles,
-  i as resolveTypographyLabel
+import { getSize as e } from "../../utils/get-size.js";
+import { resolveTypography as t } from "../../utils/typography.js";
+//#region src/lib/components/SelectorInput/SelectorInput.utils.ts
+var n = (e) => {
+	switch (e) {
+		case "l": return t("body", "m");
+		case "m": return t("body", "s");
+		case "s": return t("description", "l");
+	}
+}, r = (t, n) => {
+	let r = t === "secondary";
+	return {
+		"--selector-input-bg-color": r ? `var(--selector-input-bg-color-${t})` : "transparent",
+		"--selector-input-content-color-default": `var(--selector-input-content-color-${t}-default)`,
+		"--selector-input-content-color-hover": `var(--selector-input-content-color-${t}-hover)`,
+		"--selector-input-content-color-active": `var(--selector-input-content-color-${t}-active)`,
+		"--selector-input-icon-size": e(n, "selector-input-icon-size"),
+		"--selector-input-height": e(n, "selector-input-height"),
+		"--selector-input-spacing-horizontal": r ? `0 ${e(n, "selector-input-spacing-horizontal")}` : `0 0 0 ${e(n, "selector-input-spacing-horizontal")}`,
+		"--selector-input-spacing-between": e(n, "selector-input-spacing-between")
+	};
 };
+//#endregion
+export { r as getSelectorInputStyles, n as resolveTypographyLabel };

package/dist/components/Sidebar/Sidebar.context.js

@@ -1,8 +1,5 @@
 import { createSafeContext as e } from "../../utils/create-safe-context/create-safe-context.js";
-const [o, r] = e(
-  "Sidebar component was not found in the tree"
-);
-export {
-  o as SidebarContextProvider,
-  r as useSidebarContext
-};
+//#region src/lib/components/Sidebar/Sidebar.context.ts
+var [t, n] = e("Sidebar component was not found in the tree");
+//#endregion
+export { t as SidebarContextProvider, n as useSidebarContext };