@alif-ui-test/core 1.11.0

package/LICENSE.txt

@@ -0,0 +1,5 @@
+Copyright <2024> <Alif Bank>
+
+Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,33 @@
+import { jsx as o, jsxs as a } from "react/jsx-runtime";
+import { createContext as l, useContext as p } from "react";
+import r from "./Accordion.module.css.js";
+import { getAccordionStyles as f } from "./Accordion.utils.js";
+import { AccordionSummary as u } from "./AccordionSummary/AccordionSummary.js";
+import { AccordionDetails as v } from "./AccordionDetails/AccordionDetails.js";
+import { Divider as x } from "../Divider/Divider.js";
+import { classNames as A } from "../../utils/class-names.js";
+const e = l({ isOpen: !1 }), t = ({
+  children: i,
+  className: s,
+  variant: m = "desktop",
+  size: c = "s",
+  type: d = "default",
+  isOpen: n
+}) => /* @__PURE__ */ o(e.Provider, { value: { isOpen: n }, children: /* @__PURE__ */ a(
+  "div",
+  {
+    className: A(r.root, s),
+    style: f(m, c),
+    children: [
+      i,
+      d === "withDivider" && /* @__PURE__ */ o("div", { role: "separator", className: r.divider, children: /* @__PURE__ */ o(x, {}) })
+    ]
+  }
+) });
+t.Summary = u;
+t.Details = v;
+const k = () => p(e);
+export {
+  t as Accordion,
+  k as useAccordionContext
+};

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

@@ -0,0 +1,21 @@
+const e = "_root_1fkge_1", t = "_header_1fkge_21", o = "_headerOpen_1fkge_37", _ = "_titleWrapper_1fkge_41", n = "_title_1fkge_41", c = "_subTitle_1fkge_55", s = "_iconActive_1fkge_60", l = "_collapseContent_1fkge_64", r = {
+  root: e,
+  header: t,
+  headerOpen: o,
+  titleWrapper: _,
+  title: n,
+  subTitle: c,
+  iconActive: s,
+  collapseContent: l
+};
+export {
+  l as collapseContent,
+  r as default,
+  t as header,
+  o as headerOpen,
+  s as iconActive,
+  e as root,
+  c as subTitle,
+  n as title,
+  _ as titleWrapper
+};

package/dist/components/Accordion/Accordion.types.js

@@ -0,0 +1 @@
+

package/dist/components/Accordion/Accordion.utils.js

@@ -0,0 +1,10 @@
+const a = (c, n) => {
+  const e = `var(--accordion-spacing-vertical-${c}-${n})`, o = `var(--accordion-spacing-between-${c})`;
+  return {
+    "--accordion-padding-y": e,
+    "--accordion-spacing-between": o
+  };
+};
+export {
+  a as getAccordionStyles
+};

package/dist/components/Accordion/AccordionDetails/AccordionDetails.js

@@ -0,0 +1,11 @@
+import { jsx as o } from "react/jsx-runtime";
+import e from "../Accordion.module.css.js";
+import { useAccordionContext as s } from "../Accordion.js";
+import { Collapse as i } from "../../Collapse/Collapse.js";
+const p = ({ children: r }) => {
+  const { isOpen: t } = s();
+  return /* @__PURE__ */ o(i, { isOpen: t, children: /* @__PURE__ */ o("div", { className: e.collapseContent, children: r }) });
+};
+export {
+  p as AccordionDetails
+};

package/dist/components/Accordion/AccordionSummary/AccordionSummary.js

@@ -0,0 +1,53 @@
+import { jsx as o, jsxs as c } from "react/jsx-runtime";
+import r from "../Accordion.module.css.js";
+import { useAccordionContext as l } from "../Accordion.js";
+import { OutlineNavigationChevronDownSmall as h } from "../../../icons/components/OutlineNavigationChevronDownSmall.js";
+import { classNames as i } from "../../../utils/class-names.js";
+import { Typography as n } from "../../Typography/Typography.js";
+const C = ({
+  title: m,
+  subTitle: a,
+  icon: d,
+  onToggle: t,
+  children: s
+}) => {
+  const { isOpen: e } = l(), p = d || /* @__PURE__ */ o(
+    h,
+    {
+      "data-testid": "accordion-icon",
+      className: i(e && r.iconActive)
+    }
+  );
+  return s ? /* @__PURE__ */ o(
+    "div",
+    {
+      className: i(r.header, e && r.headerOpen),
+      onClick: t,
+      children: s
+    }
+  ) : /* @__PURE__ */ c(
+    "div",
+    {
+      className: i(r.header, e && r.headerOpen),
+      onClick: t,
+      children: [
+        /* @__PURE__ */ c("div", { className: r.titleWrapper, children: [
+          /* @__PURE__ */ o(
+            n,
+            {
+              proportions: "h3",
+              category: "heading",
+              className: r.title,
+              children: m
+            }
+          ),
+          p
+        ] }),
+        a && /* @__PURE__ */ o(n, { proportions: "m", category: "body", className: r.subTitle, children: a })
+      ]
+    }
+  );
+};
+export {
+  C as AccordionSummary
+};

package/dist/components/ActionButton/ActionButton.js

@@ -0,0 +1,50 @@
+import { jsx as e, jsxs as j, Fragment as v } from "react/jsx-runtime";
+import i from "./ActionButton.module.css.js";
+import { getActionButtonStyles as z, getLoaderVariant as A } from "./ActionButton.utils.js";
+import { validateIconButtonProps as B } from "../../utils/validate-icon-button-props.js";
+import { Loader as p } from "../Loader/Loader.js";
+import { classNames as N } from "../../utils/class-names.js";
+const k = ({
+  leftSection: s,
+  rightSection: a,
+  children: r,
+  className: u,
+  size: n = "m",
+  rounded: c = !1,
+  variant: m = "primary",
+  isIconBtn: o = !1,
+  isLoading: t = !1,
+  disabled: d,
+  ...x
+}) => {
+  B(o, s, a, r);
+  const y = z(
+    m,
+    c,
+    n,
+    o
+  ), l = ["xs", "s"].includes(n) ? "xs" : "s", f = A(m), b = () => o ? t ? /* @__PURE__ */ e(p, { size: l, variant: f }) : r : /* @__PURE__ */ j(v, { children: [
+    t && /* @__PURE__ */ e(p, { size: l, variant: f }),
+    s,
+    r,
+    a
+  ] });
+  return /* @__PURE__ */ e(
+    "button",
+    {
+      style: y,
+      className: N(
+        i.root,
+        t && i.isLoading,
+        u
+      ),
+      disabled: d,
+      tabIndex: t ? -1 : 0,
+      ...x,
+      children: b()
+    }
+  );
+};
+export {
+  k as ActionButton
+};

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

@@ -0,0 +1,9 @@
+const o = "_root_1qt90_1", t = "_isLoading_1qt90_96", s = {
+  root: o,
+  isLoading: t
+};
+export {
+  s as default,
+  t as isLoading,
+  o as root
+};

package/dist/components/ActionButton/ActionButton.types.js

@@ -0,0 +1 @@
+

package/dist/components/ActionButton/ActionButton.utils.js

@@ -0,0 +1,48 @@
+import { getSize as c } from "../../utils/get-size.js";
+import { resolveTypography as i } from "../../utils/typography.js";
+const b = (o) => {
+  switch (o) {
+    case "xs":
+      return i("description", "l");
+    case "s":
+      return i("body", "sStrong");
+    case "m":
+    case "l":
+      return i("body", "mStrong");
+  }
+}, u = (o, r, t, a) => {
+  const n = b(t);
+  return {
+    "--action-button-bg-color": `var(--action-button-bg-color-${o}-default)`,
+    "--action-button-bg-color-hover": `var(--action-button-bg-color-${o}-hover)`,
+    "--action-button-bg-color-disabled": `var(--action-button-bg-color-${o}-disabled)`,
+    "--action-button-label-color": `var(--action-button-label-color-${o}-default)`,
+    "--action-button-label-color-hover": `var(--action-button-label-color-${o}-hover)`,
+    "--action-button-label-color-disabled": `var(--action-button-label-color-${o}-disabled)`,
+    "--action-button-icon-color": `var(--action-button-icon-color-${o}-icon-btn-default)`,
+    "--action-button-icon-color-hover": `var(--action-button-icon-color-${o}-icon-btn-hover)`,
+    "--action-button-icon-color-disabled": `var(--action-button-icon-color-${o}-icon-btn-disabled)`,
+    "--action-button-height": c(t, "action-button-height"),
+    "--action-button-icon-width": c(t, "action-button-icon-width"),
+    "--action-button-icon-height": c(t, "action-button-icon-height"),
+    "--action-button-font-family": n.fontFamily,
+    "--action-button-font-weight": n.fontWeight,
+    "--action-button-font-size": n.fontSize,
+    "--action-button-line-height": n.lineHeight,
+    "--action-button-letter-spacing": n.letterSpacing,
+    "--action-button-border-radius": `var(--action-button-border-radius-${t}${r ? "-rounded" : ""})`,
+    "--action-button-padding-x": `var(--action-button-spacing-horizontal-${a ? `icon-btn-${t}` : t}`,
+    "--action-button-padding-y": `var(--action-button-spacing-vertical-${a ? `icon-btn-${t}` : t}`
+  };
+}, d = (o) => {
+  switch (o) {
+    case "secondary":
+      return "secondary";
+    case "primary":
+      return "contrast";
+  }
+};
+export {
+  u as getActionButtonStyles,
+  d as getLoaderVariant
+};

package/dist/components/Alert/Alert.js

@@ -0,0 +1,42 @@
+import { jsxs as m, jsx as o } from "react/jsx-runtime";
+import r from "./Alert.module.css.js";
+import { getAlertStyles as p } from "./Alert.utils.js";
+import { Typography as l } from "../Typography/Typography.js";
+import { SolidSystemClose as a } from "../../icons/components/SolidSystemClose.js";
+import { SolidSystemInfo as e } from "../../icons/components/SolidSystemInfo.js";
+import { SolidSystemCheckCircle as y } from "../../icons/components/SolidSystemCheckCircle.js";
+import { classNames as S } from "../../utils/class-names.js";
+const g = {
+  success: /* @__PURE__ */ o(y, {}),
+  error: /* @__PURE__ */ o(e, {}),
+  warning: /* @__PURE__ */ o(e, {}),
+  info: /* @__PURE__ */ o(e, {})
+}, j = ({
+  title: n,
+  description: t,
+  variant: s = "default",
+  type: i = "info",
+  showCloseIcon: c = !1,
+  showIcon: d = !0,
+  onClose: f
+}) => /* @__PURE__ */ m(
+  "div",
+  {
+    style: p(s, i),
+    className: S(
+      r.root,
+      s === "outlined" && r.outlined
+    ),
+    children: [
+      d && g[i],
+      /* @__PURE__ */ m("div", { className: r.container, children: [
+        /* @__PURE__ */ o(l, { category: "body", proportions: "mStrong", children: n }),
+        t && /* @__PURE__ */ o(l, { category: "body", proportions: "xs", children: t })
+      ] }),
+      c && /* @__PURE__ */ o(a, { onClick: f })
+    ]
+  }
+);
+export {
+  j as Alert
+};

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

@@ -0,0 +1,11 @@
+const o = "_root_80cf2_1", t = "_outlined_80cf2_57", n = "_container_80cf2_69", c = {
+  root: o,
+  outlined: t,
+  container: n
+};
+export {
+  n as container,
+  c as default,
+  t as outlined,
+  o as root
+};

package/dist/components/Alert/Alert.types.js

@@ -0,0 +1 @@
+

package/dist/components/Alert/Alert.utils.js

@@ -0,0 +1,9 @@
+const o = (l, r) => ({
+  "--alert-bg-color": `var(--alert-bg-color-${l}-${r})`,
+  "--alert-border-color": `var(--alert-border-color-${r})`,
+  "--alert-icon-color": `var(--alert-icon-color-${l}-${r})`,
+  "--alert-label-color": `var(--alert-label-color-${l}-${r})`
+});
+export {
+  o as getAlertStyles
+};

package/dist/components/AppLayout/AppLayout.js

@@ -0,0 +1,12 @@
+import { jsxs as a, jsx as i } from "react/jsx-runtime";
+import r from "./AppLayout.module.css.js";
+const t = ({ navbar: e, aside: s, children: m }) => /* @__PURE__ */ a("div", { className: r.root, children: [
+  s && /* @__PURE__ */ i("div", { className: r.sidebar, children: s }),
+  /* @__PURE__ */ a("div", { className: r.mainContainer, children: [
+    e,
+    /* @__PURE__ */ i("div", { className: r.main, children: m })
+  ] })
+] });
+export {
+  t as AppLayout
+};

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

@@ -0,0 +1,13 @@
+const n = "_root_1xi7g_1", i = "_sidebar_1xi7g_7", o = "_mainContainer_1xi7g_11", a = "_main_1xi7g_11", t = {
+  root: n,
+  sidebar: i,
+  mainContainer: o,
+  main: a
+};
+export {
+  t as default,
+  a as main,
+  o as mainContainer,
+  n as root,
+  i as sidebar
+};

package/dist/components/AppLayout/AppLayout.types.js

@@ -0,0 +1 @@
+

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,41 @@
+import { jsxs as v, jsx as a } from "react/jsx-runtime";
+import s from "./Avatar.module.css.js";
+import { getAvatarStyles as N } from "./Avatar.utils.js";
+import { classNames as t } from "../../utils/class-names.js";
+const b = ({
+  id: r,
+  src: o,
+  className: i,
+  badgeContent: e,
+  badgeContentType: m,
+  placeholderContent: c,
+  size: n = "m",
+  hasStatus: d = !1,
+  statusVariant: p = "online",
+  reversePosition: l = !1
+}) => {
+  const f = t(
+    s.badge,
+    m === "with-icons" && s.badgeWithIcon,
+    l && s.badgePositionTop
+  ), h = t(
+    s.status,
+    l && s.statusPositionBottom
+  );
+  return /* @__PURE__ */ v(
+    "div",
+    {
+      id: r,
+      className: t(s.root, i),
+      style: N(n, p, o),
+      children: [
+        d && /* @__PURE__ */ a("div", { className: h }),
+        !o && /* @__PURE__ */ a("span", { className: s.placeholder, children: c }),
+        e && /* @__PURE__ */ a("div", { className: f, children: e })
+      ]
+    }
+  );
+};
+export {
+  b as Avatar
+};

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

@@ -0,0 +1,19 @@
+const o = "_root_mfdto_1", t = "_placeholder_mfdto_166", s = "_badge_mfdto_180", _ = "_badgePositionTop_mfdto_202", a = "_badgeWithIcon_mfdto_206", d = "_status_mfdto_217", e = "_statusPositionBottom_mfdto_230", n = {
+  root: o,
+  placeholder: t,
+  badge: s,
+  badgePositionTop: _,
+  badgeWithIcon: a,
+  status: d,
+  statusPositionBottom: e
+};
+export {
+  s as badge,
+  _ as badgePositionTop,
+  a as badgeWithIcon,
+  n as default,
+  t as placeholder,
+  o as root,
+  d as status,
+  e as statusPositionBottom
+};

package/dist/components/Avatar/Avatar.types.js

@@ -0,0 +1 @@
+

package/dist/components/Avatar/Avatar.utils.js

@@ -0,0 +1,130 @@
+import { getSize as t } from "../../utils/get-size.js";
+import { resolveTypography as e } from "../../utils/typography.js";
+const h = (a) => {
+  switch (a) {
+    case "xxl":
+      return e("display", "lStrong");
+    case "xl":
+      return e("heading", "h3");
+    case "l":
+      return e("body", "l");
+    case "m":
+      return e("body", "m");
+    case "s":
+      return e("body", "s");
+    case "xs":
+      return e("body", "xs");
+    case "xxs":
+      return e("description", "sTag");
+  }
+}, n = (a) => {
+  switch (a) {
+    case "xxl":
+      return e("heading", "h3");
+    case "xl":
+      return e("body", "s");
+    case "l":
+      return e("body", "xs");
+    case "m":
+      return e("description", "l");
+    case "s":
+      return e("description", "m");
+    case "xs":
+      return e("description", "s");
+    case "xxs":
+      return e("description", "sTag");
+  }
+}, c = (a) => {
+  switch (a) {
+    case "xxl":
+      return {
+        badgeBottom: "-5px",
+        badgeRight: "-5px"
+      };
+    case "xl":
+      return {
+        badgeBottom: "0",
+        badgeRight: "-5px"
+      };
+    case "l":
+      return {
+        badgeBottom: "-2px",
+        badgeRight: "-5px"
+      };
+    case "m":
+      return {
+        badgeBottom: "-2px",
+        badgeRight: "-5px"
+      };
+    case "s":
+      return {
+        badgeBottom: "0",
+        badgeRight: "-2px"
+      };
+    case "xs":
+      return {
+        badgeBottom: "0",
+        badgeRight: "-2px"
+      };
+    case "xxs":
+      return {
+        badgeBottom: "0",
+        badgeRight: "-2px"
+      };
+  }
+}, o = (a, i, d) => {
+  const r = h(a), g = n(a), s = c(a);
+  return {
+    "--avatar-width": t(a, "avatar-width"),
+    "--avatar-height": t(a, "avatar-height"),
+    "--avatar-border-radius": t(a, "avatar-border-radius"),
+    "--avatar-font-family": r.fontFamily,
+    "--avatar-font-size": r.fontSize,
+    "--avatar-font-weight": r.fontWeight,
+    "--avatar-line-height": r.lineHeight,
+    "--avatar-letter-spacing": r.letterSpacing,
+    "--avatar-icon-width": t(a, "avatar-icon-width"),
+    "--avatar-icon-height": t(a, "avatar-icon-height"),
+    "--avatar-border-width": t(a, "avatar-border-width"),
+    "--avatar-status-border-width": t(
+      a,
+      "avatar-status-border-width"
+    ),
+    "--avatar-badge-width": t(a, "avatar-badge-width"),
+    "--avatar-badge-height": t(a, "avatar-badge-height"),
+    "--avatar-badge-icon-width": t(
+      a,
+      "avatar-badge-icon-width"
+    ),
+    "--avatar-badge-icon-height": t(
+      a,
+      "avatar-badge-icon-height"
+    ),
+    "--avatar-status-width": t(a, "avatar-status-width"),
+    "--avatar-status-height": t(a, "avatar-status-height"),
+    "--avatar-status-bg-color": `var(--avatar-status-bg-color-${i})`,
+    "--avatar-status-border-color": `var(--avatar-status-border-color-${i})`,
+    "--avatar-badge-spacing-vertical": t(
+      a,
+      "avatar-badge-spacing-vertical"
+    ),
+    "--avatar-badge-spacing-horizontal": t(
+      a,
+      "avatar-badge-spacing-horizontal"
+    ),
+    "--avatar-badge-font-family": g.fontFamily,
+    "--avatar-badge-font-size": g.fontSize,
+    "--avatar-badge-font-weight": g.fontWeight,
+    "--avatar-badge-line-height": g.lineHeight,
+    "--avatar-badge-letter-spacing": g.letterSpacing,
+    "--avatar-badge-bottom": s.badgeBottom,
+    "--avatar-badge-right": s.badgeRight,
+    backgroundImage: d ? `url(${d})` : "none",
+    backgroundSize: "cover",
+    backgroundPosition: "center",
+    backgroundRepeat: "no-repeat"
+  };
+};
+export {
+  o as getAvatarStyles
+};

package/dist/components/Avatar/AvatarGroup/AvatarGroup.js

@@ -0,0 +1,12 @@
+import { jsx as a } from "react/jsx-runtime";
+import e from "./AvatarGroup.module.css.js";
+import { getSize as s } from "../../../utils/get-size.js";
+const n = ({ children: r, spacing: t = "m" }) => {
+  const o = {
+    "--ag-spacing": s(t, "avatar-group-spacing-between")
+  };
+  return /* @__PURE__ */ a("div", { style: o, className: e.root, children: r });
+};
+export {
+  n as AvatarGroup
+};

package/dist/components/Avatar/AvatarGroup/AvatarGroup.module.css.js

@@ -0,0 +1,7 @@
+const o = "_root_1cidf_1", t = {
+  root: o
+};
+export {
+  t as default,
+  o as root
+};

package/dist/components/Backdrop/Backdrop.js

@@ -0,0 +1,59 @@
+import { jsx as t, jsxs as p } from "react/jsx-runtime";
+import { useEffect as k } from "react";
+import u from "./Backdrop.module.css.js";
+import { useZIndexStack as v } from "./useZIndexStack.js";
+import { BackdropOverlay as x } from "./BackdropOverlay.js";
+import { RemoveScroll as h } from "../RemoveScroll/RemoveScroll.js";
+import { Portal as y } from "../Portal/Portal.js";
+import { Transition as E } from "../Transition/Transition.js";
+import { closeEscape as I } from "../../utils/close-escape.js";
+import { classNames as b } from "../../utils/class-names.js";
+const C = ({
+  isOpen: o,
+  onClose: e,
+  children: m,
+  isCloseOutside: c,
+  className: a,
+  zIndex: d,
+  transitionProps: n,
+  ...i
+}) => {
+  const s = v(o), l = (r) => {
+    r.target === r.currentTarget && c && e();
+  };
+  return k(() => {
+    const r = (f) => {
+      I(f, e);
+    };
+    if (o)
+      return document.addEventListener("keydown", r), () => {
+        document.removeEventListener("keydown", r);
+      };
+  }, [o, e]), /* @__PURE__ */ t(
+    y,
+    {
+      placement: {
+        top: 0,
+        left: 0,
+        zIndex: d ?? s ?? void 0
+      },
+      children: /* @__PURE__ */ p(h, { enabled: o, children: [
+        /* @__PURE__ */ t(x, { isOpen: o }),
+        /* @__PURE__ */ t(E, { mounted: o, ...n, children: (r) => /* @__PURE__ */ t(
+          "div",
+          {
+            style: r,
+            "data-testid": "backdrop",
+            className: b(u.root, a),
+            onClick: l,
+            ...i,
+            children: m
+          }
+        ) })
+      ] })
+    }
+  );
+};
+export {
+  C as Backdrop
+};

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

@@ -0,0 +1,9 @@
+const o = "_root_gyibl_1", t = "_overlay_gyibl_9", l = {
+  root: o,
+  overlay: t
+};
+export {
+  l as default,
+  t as overlay,
+  o as root
+};

package/dist/components/Backdrop/Backdrop.types.js

@@ -0,0 +1 @@
+

package/dist/components/Backdrop/BackdropOverlay.js

@@ -0,0 +1,8 @@
+import { jsx as r } from "react/jsx-runtime";
+import s from "./Backdrop.module.css.js";
+import { Transition as a } from "../Transition/Transition.js";
+import { classNames as e } from "../../utils/class-names.js";
+const d = ({ isOpen: o }) => /* @__PURE__ */ r(a, { mounted: o, transition: "fade", duration: 300, children: (t) => /* @__PURE__ */ r("div", { style: t, className: e(s.overlay) }) });
+export {
+  d as BackdropOverlay
+};