@alif-ui-test/core 1.11.0

package/dist/components/TabMenuNew/TabMenuNew.js

@@ -0,0 +1,49 @@
+import { jsxs as y, jsx as l } from "react/jsx-runtime";
+import s from "./TabMenuNew.module.css.js";
+import { getTabMenuStyles as x } from "./TabMenuNew.utils.js";
+import { Tab as b } from "../Tab/Tab.js";
+import { classNames as M } from "../../utils/class-names.js";
+const S = ({
+  className: a,
+  tabs: o,
+  value: r,
+  defaultValue: i,
+  onChange: n,
+  size: t = "m",
+  fullWidth: m = !1,
+  disabled: c = !1,
+  divider: d,
+  justify: f = "flex-start"
+}) => {
+  const u = M(
+    s.root,
+    m && s.fullWidth,
+    a
+  ), p = x(t), v = r || i;
+  return /* @__PURE__ */ y(
+    "div",
+    {
+      className: u,
+      style: { ...p, justifyContent: f },
+      children: [
+        o?.map((e) => /* @__PURE__ */ l(
+          b,
+          {
+            size: t,
+            variant: "text",
+            checked: v === e.value,
+            onChange: n,
+            disabled: c || e.disabled,
+            selectionType: "single",
+            ...e
+          },
+          String(e.value)
+        )),
+        d && /* @__PURE__ */ l("div", { className: s.divider })
+      ]
+    }
+  );
+};
+export {
+  S as TabMenuNew
+};

package/dist/components/TabMenuNew/TabMenuNew.module.css.js

@@ -0,0 +1,11 @@
+const t = "_root_1xqje_1", o = "_divider_1xqje_17", d = "_fullWidth_1xqje_25", e = {
+  root: t,
+  divider: o,
+  fullWidth: d
+};
+export {
+  e as default,
+  o as divider,
+  d as fullWidth,
+  t as root
+};

package/dist/components/TabMenuNew/TabMenuNew.types.js

@@ -0,0 +1 @@
+

package/dist/components/TabMenuNew/TabMenuNew.utils.js

@@ -0,0 +1,8 @@
+import { getSize as t } from "../../utils/get-size.js";
+const i = (e) => ({
+  "--tab-menu-spacing-between": t(e, "tab-menu-spacing-between"),
+  "--tab-menu-divider-height": t(e, "tab-menu-divider-height")
+});
+export {
+  i as getTabMenuStyles
+};

package/dist/components/Table/Table.js

@@ -0,0 +1,114 @@
+import { jsx as n, jsxs as v } from "react/jsx-runtime";
+import { useState as S, useTransition as z } from "react";
+import { getSortedRecords as F, getTableStyles as G, handleSelectAll as J, updateSortConfig as M, handleSelect as O } from "./Table.utils.js";
+import a from "./Table.module.css.js";
+import { useLocale as Q } from "../../providers/hooks/useLocale/useLocale.js";
+import { TableHeader as U } from "./TableHeader/TableHeader.js";
+import { Typography as V } from "../Typography/Typography.js";
+import { Skeleton as Z } from "../Skeleton/Skeleton.js";
+import { TableRow as B } from "./TableRow/TableRow.js";
+import { classNames as y } from "../../utils/class-names.js";
+const tt = {
+  en: "The table is empty",
+  ru: "Таблица пуста",
+  tj: "Ҷадвал холӣ аст"
+}, mt = ({
+  isLoading: u,
+  columns: r,
+  records: c = [],
+  selectedRecords: i,
+  accessorId: f = "id",
+  onSelectedRecordsChange: h,
+  rowSpacing: k = "m",
+  withRowBorders: d = !1,
+  withColBorders: p = !1,
+  onRowClick: N,
+  rowExpansion: g,
+  rowGap: C = 0,
+  tableClassNames: m,
+  emptyPlaceholder: j,
+  defaultExpandedRow: b = -1,
+  defaultExpandedRows: A = [],
+  isMultiExpanded: T = !1,
+  verticalAlign: I = "top",
+  skeletonRowsCount: w = 5
+}) => {
+  const { locale: x } = Q(), [l, K] = S(null), L = F(c, r, l), [R, _] = S(b), [D, E] = S(A), [, H] = z(), P = (e, t) => {
+    const s = l?.key === e && l.direction === "asc" ? "desc" : "asc";
+    t?.(s), K(M(e, l));
+  }, W = (e, t) => {
+    g && H(() => {
+      T ? E(
+        (o) => o.includes(t) ? o.filter((s) => s !== t) : [...o, t]
+      ) : _((o) => t !== o ? t : -1);
+    }), N?.(e, t);
+  }, X = () => [...Array(w)].map((e, t) => /* @__PURE__ */ n("tr", { className: a.row, children: /* @__PURE__ */ n("td", { colSpan: r.length + (i ? 1 : 0), children: /* @__PURE__ */ n(
+    Z,
+    {
+      height: "40px",
+      style: { borderRadius: "var(--table-skeleton-border-radius)" }
+    }
+  ) }) }, t)), Y = () => L.map((e, t) => {
+    const o = e[f];
+    return /* @__PURE__ */ n(
+      B,
+      {
+        index: t,
+        isExpanded: T ? D.includes(t) : t === R,
+        rowClassNames: m,
+        record: e,
+        recordId: o,
+        withRowBorders: d,
+        withColBorders: p,
+        verticalAlign: I,
+        columns: r,
+        accessorId: f,
+        selectedRecords: i,
+        onSelect: (s) => O(s, o, h),
+        onRowClick: W,
+        renderExpansionContent: g?.content,
+        defaultExpandedRow: b
+      },
+      o
+    );
+  }), $ = () => {
+    if (u) return X();
+    if (c.length > 0) return Y();
+    const e = j ?? tt[x], t = typeof e == "string";
+    return /* @__PURE__ */ n("tr", { className: y(t && a.emptyText), children: /* @__PURE__ */ n("td", { colSpan: r.length + (i ? 1 : 0), children: t ? /* @__PURE__ */ n(V, { category: "body", proportions: "lStrong", children: e }) : e }) });
+  }, q = {
+    ...G(d, p, k),
+    borderCollapse: d || p ? "collapse" : "separate",
+    borderSpacing: `0 ${C}px`
+  };
+  return /* @__PURE__ */ n("div", { className: a.tableWrapper, children: /* @__PURE__ */ v(
+    "table",
+    {
+      className: y(a.root, m?.root),
+      style: q,
+      children: [
+        /* @__PURE__ */ n(
+          U,
+          {
+            columns: r,
+            theadClassName: m?.thead,
+            withColBorders: p,
+            sortConfig: l,
+            onSort: P,
+            selectedRecords: i,
+            recordsLength: c.length,
+            onSelectAll: (e) => J(e, {
+              records: c,
+              accessorId: f,
+              onSelectedRecordsChange: h
+            })
+          }
+        ),
+        /* @__PURE__ */ n("tbody", { className: y(a.tbody, m?.tbody), children: $() })
+      ]
+    }
+  ) });
+};
+export {
+  mt as Table
+};

package/dist/components/Table/Table.module.css.js

@@ -0,0 +1,45 @@
+const o = "_root_1vm0a_1", _ = "_tableWrapper_1vm0a_24", e = "_thead_1vm0a_31", t = "_label_1vm0a_40", r = "_checkbox_1vm0a_45", c = "_rowBorder_1vm0a_50", n = "_colBorder_1vm0a_54", a = "_tbody_1vm0a_62", s = "_row_1vm0a_50", v = "_trHover_1vm0a_72", d = "_headerCell_1vm0a_77", m = "_divider_1vm0a_83", l = "_sortIcon_1vm0a_87", p = "_ascIcon_1vm0a_103", b = "_descIcon_1vm0a_107", i = "_pointer_1vm0a_111", w = "_emptyText_1vm0a_115", x = "_rowOpen_1vm0a_121", h = "_rowExpansion_1vm0a_126", I = "_content_1vm0a_130", y = {
+  root: o,
+  tableWrapper: _,
+  thead: e,
+  label: t,
+  checkbox: r,
+  rowBorder: c,
+  colBorder: n,
+  tbody: a,
+  row: s,
+  trHover: v,
+  headerCell: d,
+  divider: m,
+  sortIcon: l,
+  ascIcon: p,
+  descIcon: b,
+  pointer: i,
+  emptyText: w,
+  rowOpen: x,
+  rowExpansion: h,
+  content: I
+};
+export {
+  p as ascIcon,
+  r as checkbox,
+  n as colBorder,
+  I as content,
+  y as default,
+  b as descIcon,
+  m as divider,
+  w as emptyText,
+  d as headerCell,
+  t as label,
+  i as pointer,
+  o as root,
+  s as row,
+  c as rowBorder,
+  h as rowExpansion,
+  x as rowOpen,
+  l as sortIcon,
+  _ as tableWrapper,
+  a as tbody,
+  e as thead,
+  v as trHover
+};

package/dist/components/Table/Table.types.js

@@ -0,0 +1 @@
+

package/dist/components/Table/Table.utils.js

@@ -0,0 +1,35 @@
+const b = (e, t, a) => {
+  const r = !!(e || t);
+  return {
+    "--table-spacing-vertical": `var(--table-spacing-vertical-${a})`,
+    "--table-row-border-radius": `var(--table-border-radius-${r ? "with-divider" : "default"})`,
+    "--table-header-border-radius": `var(--table-border-radius-${t ? "with-divider" : "default"})`
+  };
+}, f = (e, t) => {
+  const { records: a, accessorId: r, onSelectedRecordsChange: i } = t, d = a.map((s) => s[r]);
+  i?.(e ? d : []);
+}, m = (e, t, a) => {
+  a && a(
+    (r) => e ? [...r, t] : r.filter((i) => i !== t)
+  );
+}, g = (e, t, a) => {
+  if (!a) return e;
+  const { key: r, direction: i } = a;
+  return t.find((s) => s.accessor === r)?.sortable ? [...e].sort((s, u) => {
+    const n = s[r], c = u[r];
+    if (typeof n == "string" && typeof c == "string")
+      return i === "asc" ? n.localeCompare(c) : c.localeCompare(n);
+    if (typeof n == "number" && typeof c == "number")
+      return i === "asc" ? n - c : c - n;
+    const o = n instanceof Date ? n : new Date(n), l = c instanceof Date ? c : new Date(c);
+    return !isNaN(o.getTime()) && !isNaN(l.getTime()) ? i === "asc" ? o.getTime() - l.getTime() : l.getTime() - o.getTime() : 0;
+  }) : e;
+}, p = (e, t, a) => a ? (a(t?.direction === "asc" ? "desc" : "asc"), null) : t?.key === e ? { key: e, direction: t.direction === "asc" ? "desc" : "asc" } : { key: e, direction: "asc" }, v = (e, t) => t === e ? void 0 : e;
+export {
+  g as getSortedRecords,
+  b as getTableStyles,
+  m as handleSelect,
+  f as handleSelectAll,
+  v as toggleRowExpansion,
+  p as updateSortConfig
+};

package/dist/components/Table/TableHeader/TableHeader.js

@@ -0,0 +1,88 @@
+import { jsx as s, jsxs as p } from "react/jsx-runtime";
+import r from "../Table.module.css.js";
+import { Checkbox as A } from "../../Checkbox/Checkbox.js";
+import { Typography as I } from "../../Typography/Typography.js";
+import { SolidNavigationArrowDown as j } from "../../../icons/components/SolidNavigationArrowDown.js";
+import { classNames as n } from "../../../utils/class-names.js";
+const q = ({
+  columns: g,
+  sortConfig: h,
+  onSort: y,
+  selectedRecords: o,
+  recordsLength: l,
+  onSelectAll: f,
+  theadClassName: N,
+  withColBorders: k
+}) => {
+  const b = l > 0, m = (e, a) => {
+    const t = h?.key === e && h?.direction === "desc", c = n(
+      r.sortIcon,
+      t ? r.descIcon : r.ascIcon
+    );
+    return /* @__PURE__ */ s(
+      "span",
+      {
+        onClick: () => y(e, a),
+        className: c,
+        children: /* @__PURE__ */ s(j, {})
+      }
+    );
+  };
+  return /* @__PURE__ */ s("thead", { className: n(r.thead, N), children: /* @__PURE__ */ p("tr", { className: n(k && r.colBorder), children: [
+    o && b && /* @__PURE__ */ s("th", { className: r.checkbox, children: /* @__PURE__ */ s(
+      A,
+      {
+        label: "",
+        size: "m",
+        isAllChecked: o.length > 0,
+        checked: o.length > 0 && o.length === l,
+        onChange: (e) => f(e.target.checked)
+      }
+    ) }),
+    g.map(
+      ({
+        title: e,
+        accessor: a,
+        sortable: i = !1,
+        onSort: t,
+        sortIconPosition: c = "right",
+        renderHeaderCell: d,
+        maxWidth: x,
+        minWidth: C,
+        textAlign: v = "start"
+      }) => /* @__PURE__ */ s(
+        "th",
+        {
+          style: {
+            maxWidth: x,
+            minWidth: C
+          },
+          children: d ? d(e) : /* @__PURE__ */ p(
+            "div",
+            {
+              style: { justifyContent: v },
+              className: r.headerCell,
+              children: [
+                c === "left" && (i || t) && m(a, t),
+                /* @__PURE__ */ s(
+                  I,
+                  {
+                    className: r.label,
+                    category: "body",
+                    proportions: "m",
+                    children: e
+                  }
+                ),
+                c === "right" && (i || t) && m(a, t)
+              ]
+            }
+          )
+        },
+        a || e
+      )
+    )
+  ] }) });
+};
+export {
+  q as TableHeader
+};

package/dist/components/Table/TableHeader/TableHeader.types.js

@@ -0,0 +1 @@
+

package/dist/components/Table/TableRow/TableRow.js

@@ -0,0 +1,94 @@
+import { jsxs as m, Fragment as u, jsx as o } from "react/jsx-runtime";
+import r from "../Table.module.css.js";
+import { Checkbox as z } from "../../Checkbox/Checkbox.js";
+import { Typography as B } from "../../Typography/Typography.js";
+import { Collapse as C } from "../../Collapse/Collapse.js";
+import { Divider as O } from "../../Divider/Divider.js";
+import { classNames as a } from "../../../utils/class-names.js";
+const A = ({
+  record: l,
+  columns: s,
+  selectedRecords: e,
+  onSelect: g,
+  onRowClick: k,
+  withRowBorders: v,
+  withColBorders: n,
+  renderExpansionContent: c,
+  rowClassNames: h,
+  index: p,
+  isExpanded: i,
+  recordId: y,
+  verticalAlign: w
+}) => {
+  const b = a(
+    r.row,
+    i && r.rowOpen,
+    v && !i && r.rowBorder,
+    n && r.colBorder,
+    !i && r.trHover,
+    c && r.pointer,
+    h?.row
+  );
+  return /* @__PURE__ */ m(u, { children: [
+    /* @__PURE__ */ m(
+      "tr",
+      {
+        className: b,
+        onClick: () => k?.(l, p),
+        style: { verticalAlign: w },
+        children: [
+          e && /* @__PURE__ */ o("td", { className: r.checkbox, onClick: (t) => t.stopPropagation(), children: /* @__PURE__ */ o(
+            z,
+            {
+              label: "",
+              size: "m",
+              checked: e.includes(y),
+              onChange: (t) => g?.(t.target.checked, y)
+            }
+          ) }),
+          s.map(
+            ({
+              accessor: t,
+              maxWidth: d,
+              minWidth: N,
+              textAlign: j = "start",
+              renderRowCell: f
+            }) => /* @__PURE__ */ o("td", { style: { maxWidth: d, minWidth: N, textAlign: j }, children: f ? f(l, p) : /* @__PURE__ */ o(B, { proportions: "m", category: "body", children: l[t] ?? "–" }) }, t)
+          )
+        ]
+      }
+    ),
+    c && /* @__PURE__ */ o(
+      "tr",
+      {
+        className: a(
+          r.rowExpansion,
+          n && r.colBorder
+        ),
+        children: /* @__PURE__ */ o(
+          "td",
+          {
+            colSpan: s.length + (e ? 1 : 0),
+            style: { width: "100%" },
+            children: /* @__PURE__ */ m(C, { isOpen: i, children: [
+              /* @__PURE__ */ o("div", { className: r.divider, children: /* @__PURE__ */ o(O, { variant: "secondary", size: "s" }) }),
+              /* @__PURE__ */ o(
+                "div",
+                {
+                  className: a(
+                    r.content,
+                    h?.rowContent
+                  ),
+                  children: c(l, i)
+                }
+              )
+            ] })
+          }
+        )
+      }
+    )
+  ] });
+};
+export {
+  A as TableRow
+};

package/dist/components/Table/TableRow/TableRow.types.js

@@ -0,0 +1 @@
+

package/dist/components/Tag/Tag.js

@@ -0,0 +1,40 @@
+import { jsxs as y, jsx as t } from "react/jsx-runtime";
+import r from "./Tag.module.css.js";
+import { getTagStyles as g } from "./Tag.utils.js";
+import { classNames as N } from "../../utils/class-names.js";
+import { OutlineSystemClose as x } from "../../icons/components/OutlineSystemClose.js";
+const S = ({
+  leftIcon: a,
+  counter: s,
+  children: l,
+  className: c,
+  onClose: i,
+  status: o,
+  disabled: e,
+  variant: n = "primary",
+  size: m = "m",
+  ...p
+}) => {
+  const f = N(
+    r.root,
+    c,
+    o === "active" && r.active,
+    o === "error" && r.error,
+    e && r.disabled
+  );
+  return /* @__PURE__ */ y("span", { style: g(n, m), className: f, ...p, children: [
+    a,
+    l,
+    s && m === "m" && /* @__PURE__ */ t("span", { className: r.counter, children: s }),
+    /* @__PURE__ */ t(
+      x,
+      {
+        onClick: () => !e && i?.(),
+        className: r.closeIcon
+      }
+    )
+  ] });
+};
+export {
+  S as Tag
+};

package/dist/components/Tag/Tag.module.css.js

@@ -0,0 +1,17 @@
+const o = "_root_1oq3o_1", c = "_counter_1oq3o_123", t = "_closeIcon_1oq3o_133", e = "_disabled_1oq3o_138", _ = "_active_1oq3o_156", r = "_error_1oq3o_173", s = {
+  root: o,
+  counter: c,
+  closeIcon: t,
+  disabled: e,
+  active: _,
+  error: r
+};
+export {
+  _ as active,
+  t as closeIcon,
+  c as counter,
+  s as default,
+  e as disabled,
+  r as error,
+  o as root
+};

package/dist/components/Tag/Tag.types.js

@@ -0,0 +1 @@
+

package/dist/components/Tag/Tag.utils.js

@@ -0,0 +1,95 @@
+import { resolveTypography as a } from "../../utils/typography.js";
+import { getSize as l } from "../../utils/get-size.js";
+const g = (r, e) => ({
+  backgroundActive: `var(--tag-bg-color-${r}-active)`,
+  backgroundDefault: `var(--tag-bg-color-${r}-default)`,
+  backgroundDisabled: `var(--tag-bg-color-${r}-disabled)`,
+  backgroundError: `var(--tag-bg-color-${r}-error)`,
+  backgroundHover: `var(--tag-bg-color-${r}-hover)`,
+  iconColorActive: `var(--tag-icon-color-${r}-active)`,
+  iconColorDefault: `var(--tag-icon-color-${r}-default)`,
+  iconColorDisabled: `var(--tag-icon-color-${r}-disabled)`,
+  iconColorError: `var(--tag-icon-color-${r}-error)`,
+  iconColorHover: `var(--tag-icon-color-${r}-hover)`,
+  closeIconColorActive: `var(--tag-close-icon-color-${r}-active)`,
+  closeIconColorDefault: `var(--tag-close-icon-color-${r}-default)`,
+  closeIconColorDisabled: `var(--tag-close-icon-color-${r}-disabled)`,
+  closeIconColorError: `var(--tag-close-icon-color-${r}-error)`,
+  closeIconColorHover: `var(--tag-close-icon-color-${r}-hover)`,
+  labelColorActive: `var(--tag-label-color-${r}-active)`,
+  labelColorDefault: `var(--tag-label-color-${r}-default)`,
+  labelColorDisabled: `var(--tag-label-color-${r}-disabled)`,
+  labelColorError: `var(--tag-label-color-${r}-error)`,
+  labelColorHover: `var(--tag-label-color-${r}-hover)`,
+  counterColorActive: `var(--tag-counter-color-${r}-active)`,
+  counterColorDefault: `var(--tag-counter-color-${r}-default)`,
+  counterColorDisabled: `var(--tag-counter-color-${r}-disabled)`,
+  counterColorError: `var(--tag-counter-color-${r}-error)`,
+  counterColorHover: `var(--tag-counter-color-${r}-hover)`,
+  borderRadius: l(e, "tag-border-radius"),
+  height: l(e, "tag-height"),
+  spacingBetween: l(e, "tag-spacing-between"),
+  spacingHorizontal: l(e, "tag-spacing-horizontal"),
+  spacingVertical: l(e, "tag-spacing-vertical"),
+  iconWidth: l(e, "tag-icon-width"),
+  iconHeight: l(e, "tag-icon-height"),
+  iconPadding: ""
+}), i = (r) => {
+  switch (r) {
+    case "xs":
+      return a("description", "sTag");
+    case "s":
+      return a("description", "l");
+    case "m":
+      return a("body", "s");
+  }
+}, b = (r, e) => {
+  const o = g(r, e), c = i(e), t = a("description", "s");
+  return {
+    "--tag-bg-color-active": o.backgroundActive,
+    "--tag-bg-color-default": o.backgroundDefault,
+    "--tag-bg-color-disabled": o.backgroundDisabled,
+    "--tag-bg-color-error": o.backgroundError,
+    "--tag-bg-color-hover": o.backgroundHover,
+    "--tag-icon-color-active": o.iconColorActive,
+    "--tag-icon-color-default": o.iconColorDefault,
+    "--tag-icon-color-disabled": o.iconColorDisabled,
+    "--tag-icon-color-error": o.iconColorError,
+    "--tag-icon-color-hover": o.iconColorHover,
+    "--tag-close-icon-color-active": o.closeIconColorActive,
+    "--tag-close-icon-color-default": o.closeIconColorDefault,
+    "--tag-close-icon-color-disabled": o.closeIconColorDisabled,
+    "--tag-close-icon-color-error": o.closeIconColorError,
+    "--tag-close-icon-color-hover": o.closeIconColorHover,
+    "--tag-label-color-active": o.labelColorActive,
+    "--tag-label-color-default": o.labelColorDefault,
+    "--tag-label-color-disabled": o.labelColorDisabled,
+    "--tag-label-color-error": o.labelColorError,
+    "--tag-label-color-hover": o.labelColorHover,
+    "--tag-counter-color-active": o.counterColorActive,
+    "--tag-counter-color-default": o.counterColorDefault,
+    "--tag-counter-color-disabled": o.counterColorDisabled,
+    "--tag-counter-color-error": o.counterColorError,
+    "--tag-counter-color-hover": o.counterColorHover,
+    "--tag-border-radius": o.borderRadius,
+    "--tag-height": o.height,
+    "--tag-spacing-between": o.spacingBetween,
+    "--tag-spacing-horizontal": o.spacingHorizontal,
+    "--tag-spacing-vertical": o.spacingVertical,
+    "--tag-font-family": c.fontFamily,
+    "--tag-font-weight": c.fontWeight,
+    "--tag-font-size": c.fontSize,
+    "--tag-line-height": c.lineHeight,
+    "--tag-letter-spacing": c.letterSpacing,
+    "--tag-counter-font-family": t.fontFamily,
+    "--tag-counter-font-weight": t.fontWeight,
+    "--tag-counter-font-size": t.fontSize,
+    "--tag-counter-line-height": t.lineHeight,
+    "--tag-counter-letter-spacing": t.letterSpacing,
+    "--tag-icon-width": o.iconWidth,
+    "--tag-icon-height": o.iconHeight
+  };
+};
+export {
+  b as getTagStyles
+};