mada-design-system 0.0.9 → 0.0.11

package/index.es45.js

@@ -1,27 +1,152 @@
-import { jsx as e } from "react/jsx-runtime";
-import * as r from "@radix-ui/react-radio-group";
-import * as s from "react";
-import { cn as t } from "./index.es69.js";
-import d from "./index.es116.js";
-const l = s.forwardRef(({ className: a, ...i }, o) => /* @__PURE__ */ e(r.Root, { className: t("grid gap-2", a), ...i, ref: o }));
-l.displayName = r.Root.displayName;
-const c = s.forwardRef(({ className: a, ...i }, o) => /* @__PURE__ */ e("div", { className: "flex size-space-06 items-center justify-center", children: /* @__PURE__ */ e(
-  r.Item,
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import h from "./index.es137.js";
+import g from "./index.es138.js";
+import b from "./index.es139.js";
+import x from "./index.es140.js";
+import v from "./index.es141.js";
+import N from "./index.es142.js";
+import "./index.es2.js";
+import w from "./index.es77.js";
+import { strings as i } from "./index.es88.js";
+import y from "./index.es143.js";
+import k from "./index.es144.js";
+import F from "./index.es145.js";
+import z from "./index.es146.js";
+import { Link as p } from "./index.es49.js";
+import { cn as u } from "./index.es76.js";
+import { ShouldRender as f } from "./index.es14.js";
+import { Button as c } from "./index.es22.js";
+const K = ({ colors: t = "default", ...l }) => {
+  var o;
+  return /* @__PURE__ */ e(
+    "footer",
+    {
+      className: u(" px-space-06", {
+        "bg-background-SA-Flag text-text-oncolor-primary": t === "default",
+        "bg-background-neutral-100 text-text-default": t === "neutral"
+      }),
+      children: /* @__PURE__ */ a("div", { className: "flex flex-col items-start py-space-05", children: [
+        /* @__PURE__ */ e(f, { shouldRender: l.showGroupLinks, children: /* @__PURE__ */ a("div", { className: "mb-space-08 grid w-full grid-cols-12 items-stretch gap-space-05 pb-space-07 pt-space-04", children: [
+          (o = l.groupLinks) == null ? void 0 : o.map((r) => /* @__PURE__ */ e(C, { colors: t, title: r.title, links: r.links }, r.title)),
+          /* @__PURE__ */ e("div", { className: "col-span-12 sm:col-span-6 lg:col-span-4 xl:col-span-3", children: /* @__PURE__ */ a("div", { className: "flex w-full flex-col items-start gap-space-06", children: [
+            /* @__PURE__ */ e(S, { title: l.socialMediaTitle, colors: t, links: l.socialMediaLinks }),
+            /* @__PURE__ */ e(A, { colors: t })
+          ] }) })
+        ] }) }),
+        /* @__PURE__ */ e(
+          _,
+          {
+            colors: t,
+            basicLinks: l.basicLinks,
+            bottomImages: l.bottomImages,
+            extraLinks: l.extraLinks,
+            showBasicLinks: l.showBasicLinks
+          }
+        )
+      ] })
+    }
+  );
+}, m = ({ title: t, colors: l }) => /* @__PURE__ */ e(
+  "label",
   {
-    ref: o,
-    className: t(
-      `flex aspect-square h-[20px] w-[20ps] rounded-full border-2 border-primary ring-offset-background data-[state=checked]:text-primary
-                  hover:border-primary-dark hover:data-[state=checked]:text-primary-dark focus:outline-none focus-visible:ring-2
-                focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed
-                disabled:border-disabled disabled:data-[state=checked]:text-disabled`,
-      a
-    ),
-    ...i,
-    children: /* @__PURE__ */ e(r.Indicator, { className: "flex h-full w-full items-center justify-center rounded-full", children: /* @__PURE__ */ e(d, { className: "h-[10px] w-[10px]" }) })
+    className: u("w-full border-b pb-space-02 text-body-02 font-medium", {
+      "border-border-neutral-primary": l === "neutral",
+      "border-border-oncolor-transparent-30": l === "default"
+    }),
+    children: t
   }
-) }));
-c.displayName = r.Item.displayName;
+), C = ({ title: t, links: l, colors: o }) => /* @__PURE__ */ e("div", { className: "col-span-12 sm:col-span-6 lg:col-span-4 xl:col-span-3", children: /* @__PURE__ */ a("div", { className: "flex flex-col items-start gap-space-02", children: [
+  /* @__PURE__ */ e(m, { title: t, colors: o }),
+  /* @__PURE__ */ e("ul", { className: "flex flex-col gap-space-02", children: l.map((r) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(d, { ...r, colors: o === "neutral" ? "neutral" : "oncolor" }) }, r.label)) })
+] }) }), S = ({ title: t, links: l, colors: o }) => /* @__PURE__ */ a("div", { className: "flex w-full flex-col items-start gap-space-02", children: [
+  /* @__PURE__ */ e(m, { title: t, colors: o }),
+  /* @__PURE__ */ e("div", { className: "flex flex-wrap items-center gap-space-02", children: l.map((r) => /* @__PURE__ */ e(
+    c,
+    {
+      variant: "outline",
+      tooltip: r.title,
+      colors: o === "neutral" ? "neutral" : "oncolor",
+      size: "icon-sm",
+      onClick: () => window.open(r.target, "_blank", "noopener,noreferrer"),
+      rounded: "default",
+      children: r.icon
+    },
+    r.title
+  )) })
+] }), A = ({ colors: t }) => {
+  const { toggleColors: l, increaseSize: o, decreaseSize: r } = w((n) => n);
+  return /* @__PURE__ */ a("div", { className: "flex w-full flex-col items-start gap-space-02", children: [
+    /* @__PURE__ */ e(m, { title: i.Shared.accessibilityTools, colors: t }),
+    /* @__PURE__ */ a("div", { className: "flex flex-wrap items-center gap-space-02", children: [
+      /* @__PURE__ */ e(
+        c,
+        {
+          variant: "outline",
+          tooltip: i.Accessibility.ColorContrast,
+          colors: t === "neutral" ? "neutral" : "oncolor",
+          size: "icon-sm",
+          rounded: "default",
+          onClick: l,
+          children: /* @__PURE__ */ e(y, {})
+        }
+      ),
+      /* @__PURE__ */ e(
+        c,
+        {
+          variant: "outline",
+          tooltip: i.Accessibility.DecreaseFontSize,
+          colors: t === "neutral" ? "neutral" : "oncolor",
+          size: "icon-sm",
+          rounded: "default",
+          onClick: r,
+          children: /* @__PURE__ */ e(k, {})
+        }
+      ),
+      /* @__PURE__ */ e(
+        c,
+        {
+          variant: "outline",
+          tooltip: i.Accessibility.IncreaseFontSize,
+          colors: t === "neutral" ? "neutral" : "oncolor",
+          size: "icon-sm",
+          rounded: "default",
+          onClick: o,
+          children: /* @__PURE__ */ e(F, {})
+        }
+      ),
+      /* @__PURE__ */ e(
+        c,
+        {
+          variant: "outline",
+          tooltip: i.Accessibility.VoiceCommands,
+          colors: t === "neutral" ? "neutral" : "oncolor",
+          size: "icon-sm",
+          rounded: "default",
+          onClick: () => {
+            window.open("https://deaf.dga.gov.sa", "_blank", "noopener,noreferrer");
+          },
+          children: /* @__PURE__ */ e(z, { size: 20 })
+        }
+      )
+    ] })
+  ] });
+}, _ = ({ basicLinks: t, extraLinks: l, bottomImages: o, showBasicLinks: r, colors: n }) => /* @__PURE__ */ a("div", { className: "grid w-full grid-cols-12 gap-space-05 py-space-04", children: [
+  /* @__PURE__ */ a("div", { className: "col-span-12 space-y-space-02 md:col-span-8", children: [
+    /* @__PURE__ */ e(f, { shouldRender: r, children: /* @__PURE__ */ e("div", { className: "mb-spacing-05 flex items-center gap-space-04 ", children: t == null ? void 0 : t.map((s) => /* @__PURE__ */ e(d, { ...s, underline: "always", colors: n === "neutral" ? "neutral" : "oncolor" }, s.label)) }) }),
+    /* @__PURE__ */ e("p", { className: "text-body-01 font-semibold ", children: i.formatString(i.Footer.Rights, (/* @__PURE__ */ new Date()).getFullYear()) }),
+    /* @__PURE__ */ e("p", { className: "text-body-01 ", children: i.Footer.DevelopedByTetco }),
+    /* @__PURE__ */ e("div", { className: "flex items-center gap-space-04 ", children: l == null ? void 0 : l.map((s) => /* @__PURE__ */ e(d, { ...s, colors: n === "neutral" ? "neutral" : "oncolor" }, s.label)) })
+  ] }),
+  /* @__PURE__ */ a("div", { className: "col-span-12 ms-auto flex flex-wrap items-center gap-space-04 md:col-span-4", children: [
+    /* @__PURE__ */ e("a", { href: "https://moe.gov.sa/ar/Pages/default.aspx", rel: "noopener noreferrer", target: "_blank", children: /* @__PURE__ */ e("img", { src: n === "default" ? h : x, alt: "moe" }) }),
+    /* @__PURE__ */ e("a", { href: "https://tetco.sa/", rel: "noopener noreferrer", target: "_blank", children: /* @__PURE__ */ e("img", { src: n === "default" ? g : v, alt: "tetco" }) }),
+    /* @__PURE__ */ e("a", { href: "https://www.vision2030.gov.sa/", rel: "noopener noreferrer", target: "_blank", children: /* @__PURE__ */ e("img", { src: n === "default" ? b : N, alt: "vision 2030" }) }),
+    o
+  ] })
+] });
+function d({ label: t, href: l, render: o, ...r }) {
+  return o ? /* @__PURE__ */ e(p, { size: "sm", ...r, asChild: !0, children: o }) : /* @__PURE__ */ e(p, { size: "sm", ...r, target: "_blank", href: l, children: t });
+}
 export {
-  l as RadioGroup,
-  c as RadioGroupItem
+  K as Footer
 };

package/index.es46.js

@@ -1,30 +1,78 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import * as r from "@radix-ui/react-scroll-area";
-import * as t from "react";
-import { cn as s } from "./index.es69.js";
-const m = t.forwardRef(({ className: o, children: l, ...a }, c) => /* @__PURE__ */ i(r.Root, { ref: c, className: s("relative overflow-hidden", o), ...a, children: [
-  /* @__PURE__ */ e(r.Viewport, { className: "h-full w-full rounded-[inherit]", children: l }),
-  /* @__PURE__ */ e(d, {}),
-  /* @__PURE__ */ e(r.Corner, {})
-] }));
-m.displayName = r.Root.displayName;
-const d = t.forwardRef(({ className: o, orientation: l = "vertical", ...a }, c) => /* @__PURE__ */ e(
-  r.ScrollAreaScrollbar,
-  {
-    ref: c,
-    orientation: l,
-    className: s(
-      "flex touch-none select-none transition-colors",
-      l === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
-      l === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
-      o
-    ),
-    ...a,
-    children: /* @__PURE__ */ e(r.ScrollAreaThumb, { className: s("relative rounded-full bg-border", l === "vertical" && "flex-1") })
+import { jsxs as c, Fragment as f, jsx as t } from "react/jsx-runtime";
+import * as l from "react";
+import E from "./index.es112.js";
+import z from "./index.es111.js";
+import { Button as m } from "./index.es22.js";
+function R({ children: u, scrollAmount: h = 200, margin: a = 0, className: v = "", buttonClassName: i = "" }) {
+  const [p, b] = l.useState(!1), [S, w] = l.useState(!1), o = l.useRef(null), r = l.useCallback(() => {
+    const e = o.current, n = document.dir;
+    if (e) {
+      const s = (n === "ltr" ? 1 : -1) * e.scrollLeft, x = s > 0, C = s < e.scrollWidth - e.clientWidth - a;
+      b(x), w(C);
+    }
+  }, [a]), d = (e) => {
+    if (o.current) {
+      const n = document.dir, s = n === "ltr" && e === "start" || n === "rtl" && e === "end" ? -1 : 1;
+      o.current.scrollBy({
+        left: h * s,
+        behavior: "smooth"
+      });
+    }
+  };
+  return l.useEffect(() => {
+    const e = o.current;
+    if (e)
+      return r(), e.addEventListener("scroll", r), window.addEventListener("resize", r), () => {
+        e.removeEventListener("scroll", r), window.removeEventListener("resize", r);
+      };
+  }, [r]), l.useEffect(() => {
+    const e = document.createElement("style");
+    return e.textContent = N, document.head.appendChild(e), () => {
+      document.head.removeChild(e);
+    };
+  }, []), /* @__PURE__ */ c("div", { className: "relative flex items-center", children: [
+    p && /* @__PURE__ */ c(f, { children: [
+      /* @__PURE__ */ t("div", { className: "pointer-events-none absolute start-0 top-0 z-[5] h-full  w-[120px] bg-gradient-to-r from-transparent via-white via-60% to-white" }),
+      /* @__PURE__ */ t(
+        m,
+        {
+          variant: "text",
+          size: "icon",
+          colors: "neutral",
+          onClick: () => d("start"),
+          "aria-label": "Scroll left",
+          className: `absolute start-0 z-10 flex-shrink-0 ${i}`,
+          children: /* @__PURE__ */ t(E, { className: "size-space-04 rtl:rotate-180" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t("div", { ref: o, className: `no-scrollbar flex-1 overflow-x-auto    ${v}`, children: /* @__PURE__ */ t("div", { className: "flex", children: u }) }),
+    S && /* @__PURE__ */ c(f, { children: [
+      /* @__PURE__ */ t("div", { className: "pointer-events-none absolute end-0 top-0 z-[5] h-full w-[120px] bg-gradient-to-l from-transparent via-white via-60% to-white" }),
+      /* @__PURE__ */ t(
+        m,
+        {
+          variant: "text",
+          size: "icon",
+          colors: "neutral",
+          onClick: () => d("end"),
+          "aria-label": "Scroll right",
+          className: `absolute end-0 z-10 flex-shrink-0  ${i}`,
+          children: /* @__PURE__ */ t(z, { className: "size-space-04 rtl:rotate-180" })
+        }
+      )
+    ] })
+  ] });
+}
+const N = `
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
   }
-));
-d.displayName = r.ScrollAreaScrollbar.displayName;
+  .no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+`;
 export {
-  m as ScrollArea,
-  d as ScrollBar
+  R as ResponsiveScroll
 };

package/index.es47.js

@@ -1,79 +1,162 @@
-import { jsxs as d, jsx as e } from "react/jsx-runtime";
-import I, { useState as w, useRef as v, useEffect as p } from "react";
-import { debounce as B, cn as S } from "./index.es69.js";
-import { Button as R } from "./index.es23.js";
-import { Input as j } from "./index.es36.js";
-import m from "./index.es113.js";
-import { Stack as A } from "./index.es41.js";
-import D from "./index.es92.js";
-const E = I.forwardRef(
-  ({ placeholder: f = "Search...", value: a = "", type: t, validationMessage: s, onSearch: r, disabled: h = !1, debounceTime: l = 600, className: b = "", ...x }, y) => {
-    const [n, c] = w(a), u = v();
-    p(() => {
-      c(a);
-    }, [a]), p(() => {
-      u.current = B((o) => r(o), l);
-    }, [r, l]);
-    const N = (o) => {
-      o.key === "Enter" && r(n.trim());
-    }, g = (o) => {
-      const i = o.target.value;
-      c(i), t === "onType" && u.current && u.current(i);
-    }, k = () => {
-      c(""), r("");
-    }, C = () => {
-      t === "onButton" && r(n);
-    };
-    return /* @__PURE__ */ d("div", { className: "space-y-space-01", children: [
-      /* @__PURE__ */ e(
-        j,
-        {
-          rounded: "full",
-          type: "text",
-          variant: "outline",
-          placeholder: f,
-          value: n,
-          disabled: h,
-          ...x,
-          onKeyDown: N,
-          onChange: g,
-          className: S("w-full pe-space-01 transition-all duration-200 focus-within:border-success hover:border-success", b),
-          "aria-invalid": !!s,
-          "data-testid": "search-input",
-          startAdornment: t === "onType" && /* @__PURE__ */ e(m, { className: "text-foreground-tertiary" }),
-          endAdornment: /* @__PURE__ */ d(A, { gap: 1, alignItems: "center", children: [
-            n && /* @__PURE__ */ e(
-              "button",
-              {
-                type: "button",
-                className: "rounded-full bg-background !p-space-01 text-foreground-tertiary",
-                onClick: k,
-                children: /* @__PURE__ */ e(D, {})
-              }
-            ),
-            n && t === "onButton" && /* @__PURE__ */ e("span", { className: "mx-space-01 block h-space-05 border" }),
-            t === "onButton" && /* @__PURE__ */ e(
-              R,
-              {
-                variant: "outline",
-                colors: "success",
-                rounded: "full",
-                size: "icon-sm",
-                type: "button",
-                className: "h-auto rounded-full border !p-space-01",
-                onClick: C,
-                children: /* @__PURE__ */ e(m, {})
-              }
-            )
-          ] }),
-          ref: y
-        }
-      ),
-      s && /* @__PURE__ */ e("p", { className: "text-caption-01 text-error", children: s })
-    ] });
+import { jsx as e, jsxs as f } from "react/jsx-runtime";
+import { cva as v } from "./index.es102.js";
+import { createContext as x, useState as y, useEffect as g, useContext as S } from "react";
+import { THEME as n } from "./index.es95.js";
+import "./index.es2.js";
+import { cn as m, formatterTime as h } from "./index.es76.js";
+import C from "./index.es147.js";
+import N from "./index.es148.js";
+import T from "./index.es143.js";
+import z from "./index.es144.js";
+import D from "./index.es145.js";
+import k from "./index.es146.js";
+import { useThemeStore as I } from "./index.es87.js";
+import H from "./index.es149.js";
+import A from "./index.es150.js";
+import w from "./index.es80.js";
+import G from "./index.es77.js";
+import { Button as l } from "./index.es22.js";
+import { strings as s } from "./index.es88.js";
+const L = v("h-space-07 px-space-06 py-space-01 flex [&>svg]:size-[20px] items-center md:justify-between justify-center", {
+  variants: {
+    colors: {
+      primary: "bg-background-primary text-text-oncolor-primary",
+      gray: "bg-background-neutral-100 text-text-paragraph-primary"
+    },
+    hideDivider: {
+      true: "",
+      false: "border-b"
+    }
+  },
+  compoundVariants: [
+    {
+      colors: "primary",
+      hideDivider: !1,
+      className: "border-b-border-white-40"
+    },
+    {
+      colors: "gray",
+      hideDivider: !1,
+      className: "border-b-border-neutral-primary"
+    }
+  ],
+  defaultVariants: {
+    colors: "primary",
+    hideDivider: !1
+  }
+}), b = x({
+  colors: "primary",
+  hideDivider: !1
+}), ee = ({ colors: o, hideDivider: r, className: t, ...a }) => /* @__PURE__ */ e(b.Provider, { value: { colors: o, hideDivider: r }, children: /* @__PURE__ */ e(
+  "div",
+  {
+    className: m(L({ colors: o, hideDivider: r }), t),
+    ...a,
+    "aria-label": "a secondary navigation navbar",
+    role: "banner"
   }
-);
-E.displayName = "SearchInput";
+) }), re = ({ className: o, ...r }) => {
+  const { dir: t } = w(), [a, i] = y(h(t).format());
+  return g(() => {
+    const d = setInterval(() => i(h(t).format()), 1e3);
+    return () => {
+      clearInterval(d);
+    };
+  }, [t]), /* @__PURE__ */ f("div", { className: m("hidden items-center gap-space-04 text-body-02 md:flex", o), ...r, children: [
+    /* @__PURE__ */ f("label", { className: "flex items-center gap-space-01", "aria-label": `Current date: ${Intl.DateTimeFormat("en-GB").format()}`, children: [
+      /* @__PURE__ */ e(C, { size: 20 }),
+      /* @__PURE__ */ e("span", { children: Intl.DateTimeFormat("en-GB").format() })
+    ] }),
+    /* @__PURE__ */ f("label", { className: "flex items-center gap-space-01", "aria-label": `Current time: ${a}`, children: [
+      /* @__PURE__ */ e(N, { size: 20 }),
+      /* @__PURE__ */ e("span", { children: a })
+    ] }),
+    r.children
+  ] });
+}, te = ({ className: o, ...r }) => {
+  const { toggleColors: t, increaseSize: a, decreaseSize: i } = G((u) => u), d = S(b), c = d.colors === "gray" ? "neutral" : "oncolor", p = m({ "mix-blend-multiply  dark:mix-blend-normal": d.colors === "gray" });
+  return /* @__PURE__ */ f("div", { className: m("flex items-center gap-space-02 text-body-02", o), ...r, children: [
+    /* @__PURE__ */ e(M, { colors: c }),
+    /* @__PURE__ */ e(
+      l,
+      {
+        size: "icon-sm",
+        tooltip: s.Accessibility.ColorContrast,
+        variant: "text",
+        colors: c,
+        onClick: t,
+        className: p,
+        children: /* @__PURE__ */ e(T, {})
+      }
+    ),
+    /* @__PURE__ */ e(
+      l,
+      {
+        size: "icon-sm",
+        tooltip: s.Accessibility.DecreaseFontSize,
+        variant: "text",
+        colors: c,
+        onClick: i,
+        className: p,
+        children: /* @__PURE__ */ e(z, {})
+      }
+    ),
+    /* @__PURE__ */ e(
+      l,
+      {
+        size: "icon-sm",
+        tooltip: s.Accessibility.IncreaseFontSize,
+        variant: "text",
+        colors: c,
+        onClick: a,
+        className: p,
+        children: /* @__PURE__ */ e(D, {})
+      }
+    ),
+    /* @__PURE__ */ e(
+      l,
+      {
+        size: "icon-sm",
+        tooltip: s.Accessibility.VoiceCommands,
+        variant: "text",
+        colors: c,
+        className: p,
+        onClick: () => {
+          window.open("https://deaf.dga.gov.sa", "_blank", "noopener,noreferrer");
+        },
+        children: /* @__PURE__ */ e(k, { size: 20 })
+      }
+    ),
+    r.children
+  ] });
+}, M = ({ colors: o }) => {
+  const { theme: r, setTheme: t } = I(), a = () => {
+    const i = r === String(n.LIGHT) ? String(n.DARK) : String(n.LIGHT);
+    t(i);
+  };
+  return g(() => {
+    const i = localStorage.getItem("defaultTheme");
+    if (i) {
+      t(i);
+      return;
+    }
+    localStorage.setItem("defaultTheme", String(n.LIGHT));
+  }, [t]), /* @__PURE__ */ e(
+    l,
+    {
+      size: "icon-sm",
+      tooltip: r === String(n.DARK) ? s.Shared.lightMode : s.Shared.darkMode,
+      variant: "text",
+      colors: o,
+      className: m({ "mix-blend-multiply  dark:mix-blend-normal": o === "gray" }),
+      onClick: a,
+      children: r === String(n.DARK) ? /* @__PURE__ */ e(H, {}) : /* @__PURE__ */ e(A, {})
+    }
+  );
+};
 export {
-  E as SearchInput
+  M as NavigationSwitchTheme,
+  ee as SecondNavHeader,
+  te as SecondNavHeaderAction,
+  re as SecondNavHeaderContent
 };