mada-design-system 0.9.1 → 1.0.1

package/index.es48.js

@@ -1,162 +1,292 @@
-import { jsx as e, jsxs as i } from "react/jsx-runtime";
-import x from "./index.es154.js";
-import b from "./index.es155.js";
-import v from "./index.es156.js";
-import N from "./index.es157.js";
-import w from "./index.es158.js";
-import y from "./index.es159.js";
-import "./index.es2.js";
-import k from "./index.es90.js";
-import F from "./index.es160.js";
-import z from "./index.es161.js";
-import C from "./index.es162.js";
-import S from "./index.es163.js";
-import { Link as u } from "./index.es52.js";
-import { cn as f } from "./index.es89.js";
-import { ShouldRender as d } from "./index.es15.js";
-import { Button as s } from "./index.es23.js";
-import { strings as o } from "./index.es101.js";
-const W = ({ colors: l = "default", ...r }) => {
-  var t;
-  return /* @__PURE__ */ e(
-    "footer",
+import { jsxs as c, Fragment as R, jsx as e } from "react/jsx-runtime";
+import * as l from "@radix-ui/react-navigation-menu";
+import { cva as H } from "./index.es113.js";
+import * as s from "react";
+import { Content as B } from "@radix-ui/react-dialog";
+import { Slot as v } from "@radix-ui/react-slot";
+import { useMediaQuery as L, useToggle as D } from "./index.es108.js";
+import { cn as n } from "./index.es94.js";
+import { strings as p } from "./index.es95.js";
+/* empty css          */
+import { Button as f } from "./index.es27.js";
+import { Input as F } from "./index.es42.js";
+import { SheetFooter as _, SheetHeader as K, SheetTitle as E, SheetClose as x, Sheet as M, SheetContent as G, SheetTrigger as P } from "./index.es73.js";
+import N from "./index.es116.js";
+import O from "./index.es142.js";
+import { useLanguage as y } from "./index.es9.js";
+import Q from "./index.es143.js";
+import { Stack as q } from "./index.es47.js";
+import J from "./index.es5.js";
+import { ToggleGroup as U, ToggleGroupItem as S } from "./index.es84.js";
+import h from "./index.es131.js";
+import W from "./index.es144.js";
+import { ShouldRender as g } from "./index.es19.js";
+const X = s.forwardRef(({ className: t, children: a, viewport: r = !0, ...o }, i) => {
+  const { dir: d } = y();
+  return /* @__PURE__ */ c(l.Root, { dir: d, ref: i, className: n("relative z-10 hidden flex-1 items-center lg:flex", t), ...o, children: [
+    a,
+    r && /* @__PURE__ */ e(C, {})
+  ] });
+});
+X.displayName = l.Root.displayName;
+const Y = s.forwardRef(({ className: t, ...a }, r) => /* @__PURE__ */ e(l.List, { ref: r, className: n("group flex flex-1 list-none items-center justify-center", t), ...a }));
+Y.displayName = l.List.displayName;
+const ze = l.Item, b = H(
+  `group relative inline-flex h-[72px] items-center justify-center gap-space-01 px-space-05 py-space-02 after:absolute  after:bottom-0  after:start-1/2  after:h-space-02  after:w-[calc(100%_-_16px)]  after:rounded-full
+     hover:bg-button-background-neutral-hovered hover:after:bg-background-neutral-400 focus:bg-transparent
+     focus:outline focus:outline-2 focus:outline-black active:bg-button-background-neutral-pressed active:after:bg-background-neutral-800
+     ltr:after:-translate-x-1/2  rtl:after:translate-x-1/2
+    data-[state=open]:bg-button-background-primary-hovered hover:data-[state=open]:bg-button-background-primary-hovered data-[state=open]:text-text-oncolor-primary hover:data-[state=open]:after:bg-background-primary-400 data-[state=open]:after:bg-background-primary-400 data-[state=open]:active:bg-button-background-primary-pressed
+    [&.active]:bg-button-background-primary-hovered [&.active]:text-text-oncolor-primary [&.active]:after:bg-background-primary-400 [&.active]:active:bg-button-background-primary-pressed`
+), Z = s.forwardRef(({ className: t, children: a, ...r }, o) => /* @__PURE__ */ c(l.Trigger, { ref: o, className: n(b(), "", t), ...r, children: [
+  a,
+  " ",
+  /* @__PURE__ */ e(
+    Q,
     {
-      className: f(" px-space-04 md:px-space-06 ", {
-        "bg-background-SA-Flag text-text-oncolor-primary": l === "default",
-        "bg-background-neutral-100 text-text-default": l === "neutral"
-      }),
-      children: /* @__PURE__ */ i("div", { className: "mx-auto flex max-w-container flex-col items-start py-space-05", children: [
-        /* @__PURE__ */ e(d, { shouldRender: r.showGroupLinks, children: /* @__PURE__ */ i("div", { className: "mb-space-08 grid w-full grid-cols-12 items-stretch gap-space-05 pb-space-07 pt-space-04", children: [
-          (t = r.groupLinks) == null ? void 0 : t.map((a) => /* @__PURE__ */ e(A, { colors: l, title: a.title, links: a.links }, a.title)),
-          /* @__PURE__ */ e("div", { className: "col-span-12 sm:col-span-6 lg:col-span-4 xl:col-span-3", children: /* @__PURE__ */ i("div", { className: "flex w-full flex-col items-start gap-space-06", children: [
-            /* @__PURE__ */ e(R, { title: r.socialMediaTitle, colors: l, links: r.socialMediaLinks }),
-            r.accessibilityTools ?? /* @__PURE__ */ e(T, { colors: l })
-          ] }) })
-        ] }) }),
-        /* @__PURE__ */ e(
-          _,
-          {
-            colors: l,
-            basicLinks: r.basicLinks,
-            bottomImages: r.bottomImages,
-            extraLinks: r.extraLinks,
-            showBasicLinks: r.showBasicLinks
-          }
-        )
-      ] })
+      size: 20,
+      className: "relative top-[1px] me-1 transition duration-200 group-data-[state=open]:rotate-180",
+      "aria-hidden": "true"
     }
-  );
-}, p = ({ title: l, colors: r }) => /* @__PURE__ */ e(
-  "label",
+  )
+] }));
+Z.displayName = l.Trigger.displayName;
+const $ = s.forwardRef(({ className: t, ...a }, r) => /* @__PURE__ */ e(
+  l.Content,
+  {
+    ref: r,
+    className: n(
+      "data-[motion=from-end]:animate-enterFromRight data-[motion=from-start]:animate-enterFromLeft data-[motion=to-end]:animate-exitToRight data-[motion=to-start]:animate-exitToLeft absolute start-0 top-0 w-full sm:w-auto",
+      t
+    ),
+    ...a
+  }
+));
+$.displayName = l.Content.displayName;
+const V = s.forwardRef(({ className: t, ...a }, r) => /* @__PURE__ */ e(
+  l.Link,
+  {
+    className: n(
+      "group relative inline-flex h-[72px] items-center justify-center gap-space-01 px-space-05 py-space-02 after:absolute after:bottom-0 after:start-1/2 after:h-space-02 after:w-[calc(100%_-_16px)] after:rounded-full hover:bg-button-background-neutral-hovered hover:after:bg-background-neutral-400 focus:bg-transparent focus:outline focus:outline-2 focus:outline-black active:bg-button-background-neutral-pressed active:after:bg-background-neutral-800 ltr:after:-translate-x-1/2 rtl:after:translate-x-1/2 [&.active]:bg-button-background-primary-hovered [&.active]:text-text-oncolor-primary [&.active]:after:bg-background-primary-400 [&.active]:active:bg-button-background-primary-pressed",
+      t
+    ),
+    ref: r,
+    ...a
+  }
+));
+V.displayName = l.Link.displayName;
+const C = s.forwardRef(({ className: t, ...a }, r) => /* @__PURE__ */ e("div", { className: n("absolute start-0 top-full flex justify-center"), children: /* @__PURE__ */ e(
+  l.Viewport,
+  {
+    className: n(
+      "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+      t
+    ),
+    ref: r,
+    ...a
+  }
+) }));
+C.displayName = l.Viewport.displayName;
+const ee = s.forwardRef(({ className: t, ...a }, r) => /* @__PURE__ */ e(
+  l.Indicator,
   {
-    className: f("w-full border-b pb-space-02 text-body-02 font-medium", {
-      "border-border-neutral-primary": r === "neutral",
-      "border-border-oncolor-transparent-30": r === "default"
-    }),
-    children: l
+    ref: r,
+    className: n(
+      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      t
+    ),
+    ...a,
+    children: /* @__PURE__ */ e("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" })
   }
-), A = ({ title: l, links: r, colors: t }) => /* @__PURE__ */ e("div", { className: "col-span-12 sm:col-span-6 lg:col-span-4 xl:col-span-3", children: /* @__PURE__ */ i("div", { className: "flex flex-col items-start gap-space-02", children: [
-  /* @__PURE__ */ e(p, { title: l, colors: t }),
-  /* @__PURE__ */ e("ul", { className: "flex flex-col gap-space-02", children: r.map((a) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(m, { ...a, colors: t === "neutral" ? "neutral" : "oncolor" }) }, a.label)) })
-] }) }), R = ({ title: l, links: r, colors: t }) => /* @__PURE__ */ i("div", { className: "flex w-full flex-col items-start gap-space-02", children: [
-  /* @__PURE__ */ e(p, { title: l, colors: t }),
-  /* @__PURE__ */ e("div", { className: "flex flex-wrap items-center gap-space-02", children: r.map((a) => /* @__PURE__ */ e(
-    s,
+));
+ee.displayName = l.Indicator.displayName;
+const te = s.forwardRef(
+  ({ className: t, divider: a = !1, children: r, ...o }, i) => /* @__PURE__ */ e(
+    "header",
     {
-      variant: "outline",
-      tooltip: a.title,
-      colors: t === "neutral" ? "neutral" : "oncolor",
-      size: "icon-sm",
-      onClick: () => window.open(a.target, "_blank", "noopener,noreferrer"),
-      rounded: "default",
-      children: a.icon
-    },
-    a.title
-  )) })
-] }), T = ({ colors: l }) => {
-  const { toggleColors: r, increaseSize: t, decreaseSize: a } = k((n) => n);
-  return /* @__PURE__ */ i("div", { className: "flex w-full flex-col items-start gap-space-02", children: [
-    /* @__PURE__ */ e(p, { title: o.Shared.accessibilityTools, colors: l }),
-    /* @__PURE__ */ i("div", { className: "flex flex-wrap items-center gap-space-02", children: [
-      /* @__PURE__ */ e(
-        s,
-        {
-          variant: "outline",
-          tooltip: o.Accessibility.ColorContrast,
-          colors: l === "neutral" ? "neutral" : "oncolor",
-          size: "icon-sm",
-          rounded: "default",
-          onClick: r,
-          children: /* @__PURE__ */ e(F, {})
-        }
-      ),
-      /* @__PURE__ */ e(
-        s,
-        {
-          variant: "outline",
-          tooltip: o.Accessibility.DecreaseFontSize,
-          colors: l === "neutral" ? "neutral" : "oncolor",
-          size: "icon-sm",
-          rounded: "default",
-          onClick: a,
-          children: /* @__PURE__ */ e(z, {})
-        }
-      ),
-      /* @__PURE__ */ e(
-        s,
+      ref: i,
+      className: n(
+        "relative z-50 flex h-[72px] min-h-[72px] w-full bg-background-menu px-space-04 md:px-space-06 ",
         {
-          variant: "outline",
-          tooltip: o.Accessibility.IncreaseFontSize,
-          colors: l === "neutral" ? "neutral" : "oncolor",
-          size: "icon-sm",
-          rounded: "default",
-          onClick: t,
-          children: /* @__PURE__ */ e(C, {})
-        }
+          "after:absolute after:bottom-0 after:start-0 after:block after:h-[1px] after:w-full after:bg-background-neutral-100": a
+        },
+        t
       ),
-      /* @__PURE__ */ e(
-        s,
-        {
-          variant: "outline",
-          tooltip: o.Accessibility.VoiceCommands,
-          colors: l === "neutral" ? "neutral" : "oncolor",
-          size: "icon-sm",
-          rounded: "default",
-          onClick: () => {
-            window.open("https://deaf.dga.gov.sa", "_blank", "noopener,noreferrer");
-          },
-          children: /* @__PURE__ */ e(S, { size: 20 })
-        }
-      )
-    ] })
+      ...o,
+      children: /* @__PURE__ */ e("div", { className: "mx-auto flex w-full max-w-container items-center  justify-between ", children: r })
+    }
+  )
+);
+te.displayName = "NavigationHeader";
+const ae = s.forwardRef(
+  ({ className: t, logoAlt: a, logoSrc: r, ...o }, i) => /* @__PURE__ */ e("a", { ref: i, className: n("flex w-full shrink-0 md:justify-center lg:w-auto", t), ...o, children: /* @__PURE__ */ e("img", { src: r, alt: a || "logo" }) })
+);
+ae.displayName = "NavigationHeaderLogo";
+const re = s.forwardRef(({ className: t, collapsed: a, onToggleCollapsed: r, children: o, ...i }, d) => /* @__PURE__ */ c("div", { ref: d, className: n("flex w-full items-center gap-space-04", t), ...i, children: [
+  /* @__PURE__ */ e(f, { variant: "text", colors: "neutral", size: "icon", type: "button", rounded: "default", className: "lg:hidden", onClick: r, children: a ? /* @__PURE__ */ e(N, {}) : /* @__PURE__ */ e(O, {}) }),
+  o
+] }));
+re.displayName = "NavigationMain";
+const oe = s.forwardRef(({ className: t, children: a, ...r }, o) => /* @__PURE__ */ e("div", { ref: o, className: n("flex items-center", t), ...r, children: a }));
+oe.displayName = "NavigationActions";
+const ne = s.forwardRef(
+  ({ className: t, children: a, asChild: r, ...o }, i) => {
+    const d = r ? v : "button", u = L("(max-width: 1023px)");
+    return /* @__PURE__ */ c(R, { children: [
+      /* @__PURE__ */ e(g, { shouldRender: r && u, children: /* @__PURE__ */ e(f, { asChild: !0, variant: "ghost", size: "icon", colors: "gray", children: /* @__PURE__ */ e(v, { ref: i, className: t, ...o, children: a }) }) }),
+      /* @__PURE__ */ e(g, { shouldRender: !u, children: /* @__PURE__ */ e(d, { className: n(b(), t), ref: i, ...o, children: a }) })
+    ] });
+  }
+);
+ne.displayName = "NavigationAction";
+const Te = ({
+  onSearch: t,
+  onValueChange: a,
+  children: r
+}) => {
+  const [o, i] = s.useState(""), d = L("(max-width: 1023px)"), [u, w, z] = D(), T = (m) => {
+    m.key === "Enter" && t(o.trim());
+  }, j = (m) => {
+    const k = m.target.value;
+    i(k), a == null || a(k);
+  }, I = () => {
+    i(""), t("");
+  }, A = () => {
+    t(o);
+  };
+  return /* @__PURE__ */ c(
+    M,
+    {
+      open: u,
+      onOpenChange: (m) => {
+        z(m), setTimeout(() => {
+          document.body.style.removeProperty("pointer-events");
+        }, 1e3);
+      },
+      children: [
+        /* @__PURE__ */ e(P, { asChild: !0, children: /* @__PURE__ */ c(R, { children: [
+          /* @__PURE__ */ e(g, { shouldRender: !d, children: /* @__PURE__ */ c("button", { className: b(), onClick: w, children: [
+            /* @__PURE__ */ e(h, {}),
+            " ",
+            /* @__PURE__ */ e("span", { className: "sr-only lg:not-sr-only", children: p.Shared.Search })
+          ] }) }),
+          /* @__PURE__ */ e(g, { shouldRender: d, children: /* @__PURE__ */ e(f, { variant: "ghost", colors: "gray", size: "icon", onClick: w, children: /* @__PURE__ */ e(h, {}) }) })
+        ] }) }),
+        /* @__PURE__ */ e(B, { className: "absolute inset-x-0 top-[72px] z-50 flex w-full flex-col overflow-y-auto rounded-b-3 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out sm:max-w-full", children: /* @__PURE__ */ e("div", { className: "scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-w-2.5 scrollbar-h-2.5 h-full overflow-auto bg-background-menu p-space-05 scrollbar scrollbar-track-transparent scrollbar-thumb-border", children: /* @__PURE__ */ c("div", { className: "mx-auto flex max-w-screen-xl flex-col py-space-06", children: [
+          /* @__PURE__ */ e(x, { asChild: !0, className: "ms-auto", children: /* @__PURE__ */ e(f, { size: "icon-sm", rounded: "default", variant: "text", colors: "neutral", type: "button", children: /* @__PURE__ */ e(N, {}) }) }),
+          /* @__PURE__ */ c("div", { className: "flex gap-space-04 py-space-07", children: [
+            /* @__PURE__ */ e(
+              F,
+              {
+                rounded: "default",
+                value: o,
+                placeholder: p.Shared.Search,
+                startAdornment: /* @__PURE__ */ e(h, {}),
+                onKeyDown: T,
+                onChange: j,
+                endAdornment: o && /* @__PURE__ */ e("button", { type: "button", className: "text-text-default", onClick: I, children: /* @__PURE__ */ e(N, { size: 20 }) })
+              }
+            ),
+            /* @__PURE__ */ e(x, { asChild: !0, children: /* @__PURE__ */ e(f, { colors: "primary", rounded: "default", onClick: A, children: p.Shared.Search }) })
+          ] }),
+          r
+        ] }) }) })
+      ]
+    }
+  );
+}, je = ({ onValueChange: t, className: a }) => {
+  const { changeLang: r, lang: o } = y(), i = () => {
+    r(o === "ar" ? "en" : "ar"), t == null || t();
+  };
+  return /* @__PURE__ */ c("button", { className: n(b(), "hidden lg:inline-flex", a), onClick: i, "data-testid": "localizationBtn", children: [
+    /* @__PURE__ */ e(W, {}),
+    " ",
+    /* @__PURE__ */ e("span", { className: "sr-only lg:not-sr-only", children: p.Shared.siteLanguageText })
+  ] });
+}, Ie = ({
+  open: t,
+  onOpenChange: a,
+  children: r
+}) => /* @__PURE__ */ e(M, { open: t, onOpenChange: a, children: /* @__PURE__ */ e(G, { side: "right", className: "flex h-svh w-10/12 flex-col overflow-x-hidden p-0 sm:max-w-lg md:max-w-xl", children: r }) }), Ae = ({ children: t, className: a, ...r }) => /* @__PURE__ */ e(K, { hideCenter: !0, className: n("flex items-center justify-between bg-background-neutral-25 px-space-05", a), ...r, children: /* @__PURE__ */ e(E, { children: t }) }), He = ({
+  children: t,
+  className: a,
+  hideSwitchLang: r,
+  ...o
+}) => /* @__PURE__ */ c(_, { className: n("flex !flex-col gap-y-space-04 bg-transparent", a), ...o, children: [
+  /* @__PURE__ */ e(g, { shouldRender: !r, children: /* @__PURE__ */ e(ie, {}) }),
+  t
+] }), Be = ({ children: t, className: a, ...r }) => /* @__PURE__ */ e(
+  "div",
+  {
+    className: n(
+      "scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-w-2.5 scrollbar-h-2.5 h-full overflow-auto bg-card p-space-04 text-foreground scrollbar scrollbar-track-transparent scrollbar-thumb-border",
+      a
+    ),
+    ...r,
+    children: t
+  }
+), ie = () => {
+  const { changeLang: t, lang: a } = y();
+  return /* @__PURE__ */ c(q, { justifyContent: "between", alignItems: "center", children: [
+    /* @__PURE__ */ e(J, { children: p.Shared.Language }),
+    /* @__PURE__ */ c(
+      U,
+      {
+        type: "single",
+        size: "sm",
+        "data-testid": "localizationBtn",
+        value: a,
+        variant: "outline",
+        colors: "gray",
+        onValueChange: (r) => {
+          t(r);
+        },
+        children: [
+          /* @__PURE__ */ e(S, { value: "ar", children: "العربية" }),
+          /* @__PURE__ */ e(S, { value: "en", children: "English" })
+        ]
+      }
+    )
   ] });
-}, _ = ({
-  basicLinks: l,
-  extraLinks: r,
-  bottomImages: t,
-  showBasicLinks: a,
-  colors: n,
-  copyrightText: h,
-  developedByText: g
-}) => /* @__PURE__ */ i("div", { className: "grid w-full grid-cols-12 gap-space-05 py-space-04", children: [
-  /* @__PURE__ */ i("div", { className: "col-span-12 space-y-space-02 md:col-span-8", children: [
-    /* @__PURE__ */ e(d, { shouldRender: a, children: /* @__PURE__ */ e("div", { className: "mb-spacing-05 flex items-center gap-space-04 ", children: l == null ? void 0 : l.map((c) => /* @__PURE__ */ e(m, { ...c, underline: "always", colors: n === "neutral" ? "neutral" : "oncolor" }, c.label)) }) }),
-    /* @__PURE__ */ e("p", { className: "text-body-01 font-semibold ", children: h ?? o.formatString(o.Footer.Rights, (/* @__PURE__ */ new Date()).getFullYear()) }),
-    /* @__PURE__ */ e("p", { className: "text-body-01 ", children: g ?? o.Footer.DevelopedByTetco }),
-    /* @__PURE__ */ e("div", { className: "flex items-center gap-space-04 ", children: r == null ? void 0 : r.map((c) => /* @__PURE__ */ e(m, { ...c, colors: n === "neutral" ? "neutral" : "oncolor" }, c.label)) })
-  ] }),
-  /* @__PURE__ */ i("div", { className: "col-span-12 flex flex-wrap items-center gap-space-04 md:col-span-4 md:ms-auto", children: [
-    /* @__PURE__ */ i(d, { shouldRender: !(t != null && t.length), 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" ? x : N, alt: "moe" }) }),
-      /* @__PURE__ */ e("a", { href: "https://tetco.sa/", rel: "noopener noreferrer", target: "_blank", children: /* @__PURE__ */ e("img", { src: n === "default" ? b : w, alt: "tetco" }) }),
-      /* @__PURE__ */ e("a", { href: "https://www.vision2030.gov.sa/", rel: "noopener noreferrer", target: "_blank", children: /* @__PURE__ */ e("img", { src: n === "default" ? v : y, alt: "vision 2030" }) })
-    ] }),
-    /* @__PURE__ */ e(d, { shouldRender: !!(t != null && t.length), children: t })
-  ] })
-] });
-function m({ label: l, href: r, render: t, ...a }) {
-  return t ? /* @__PURE__ */ e(u, { size: "sm", ...a, asChild: !0, children: t }) : /* @__PURE__ */ e(u, { size: "sm", ...a, target: "_blank", href: r, children: l });
-}
+}, le = s.forwardRef(
+  ({ className: t, target: a, asChild: r, ...o }, i) => {
+    const d = r ? v : "a", u = a === "_blank" ? "noopener noreferrer" : "";
+    return /* @__PURE__ */ e(x, { asChild: !0, children: /* @__PURE__ */ e(
+      d,
+      {
+        className: n(
+          "group relative inline-flex gap-space-01 rounded px-space-04 py-space-02 text-body-01 font-semibold text-text-default focus:outline focus:outline-2 focus:outline-black active:bg-button-background-neutral-pressed active:before:absolute active:before:start-0 active:before:top-1/2 active:before:h-space-05 active:before:w-[6px] active:before:-translate-y-1/2 active:before:rounded-full active:before:bg-background-neutral-800",
+          t
+        ),
+        ref: i,
+        rel: u,
+        ...o
+      }
+    ) });
+  }
+);
+le.displayName = l.Link.displayName;
 export {
-  W as Footer
+  ne as NavigationAction,
+  oe as NavigationActions,
+  te as NavigationHeader,
+  ae as NavigationHeaderLogo,
+  re as NavigationMain,
+  X as NavigationMenu,
+  $ as NavigationMenuContent,
+  ee as NavigationMenuIndicator,
+  ze as NavigationMenuItem,
+  V as NavigationMenuLink,
+  Y as NavigationMenuList,
+  Z as NavigationMenuTrigger,
+  C as NavigationMenuViewport,
+  Be as NavigationMobileBody,
+  He as NavigationMobileFooter,
+  Ae as NavigationMobileHeader,
+  le as NavigationMobileLink,
+  Ie as NavigationMobileSideBar,
+  ie as NavigationMobileSwitchLanguage,
+  Te as NavigationSearch,
+  je as NavigationSwitchLanguage,
+  b as navigationMenuTriggerStyle
 };

package/index.es49.js

@@ -1,92 +1,89 @@
-import { jsxs as c, Fragment as u, jsx as t } from "react/jsx-runtime";
-import * as l from "react";
-import C from "./index.es121.js";
-import E from "./index.es120.js";
-import { Button as h } from "./index.es23.js";
-import { cn as g } from "./index.es89.js";
-function B({ children: v, scrollAmount: p = 200, margin: a = 0, className: b = "", buttonClassName: i = "" }) {
-  const [d, S] = l.useState(!1), [f, 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, k = s < e.scrollWidth - e.clientWidth - a;
-      S(x), w(k);
-    }
-  }, [a]), m = (e) => {
-    if (o.current) {
-      const n = document.dir, s = n === "ltr" && e === "start" || n === "rtl" && e === "end" ? -1 : 1;
-      o.current.scrollBy({
-        left: p * 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 = z, document.head.appendChild(e), () => {
-      document.head.removeChild(e);
-    };
-  }, []), /* @__PURE__ */ c("div", { className: "relative flex items-center", children: [
-    d && /* @__PURE__ */ c(u, { 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-background-white via-60% to-background-white" }),
-      /* @__PURE__ */ t(
-        h,
-        {
-          variant: "text",
-          size: "icon",
-          colors: "neutral",
-          onClick: () => m("start"),
-          "aria-label": "Scroll left",
-          className: `absolute start-0 z-10 flex-shrink-0 ${i}`,
-          children: /* @__PURE__ */ t(C, { className: "size-space-04 rtl:rotate-180" })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ t(
-      "div",
+import { jsxs as x, jsx as m, Fragment as O } from "react/jsx-runtime";
+import { useState as g, useMemo as b } from "react";
+/* empty css          */
+import { Button as k } from "./index.es27.js";
+import { Popover as y, PopoverTrigger as P, PopoverContent as j } from "./index.es65.js";
+import { selectVariants as S } from "./index.es71.js";
+import A from "./index.es145.js";
+import M from "./index.es146.js";
+import { arSA as V } from "./index.es147.js";
+import { isMatch as z } from "./index.es148.js";
+import { parse as B } from "./index.es149.js";
+import { formatDate as c } from "./index.es135.js";
+import { cn as F } from "./index.es94.js";
+import { enUS as p } from "./index.es130.js";
+const u = {
+  en: p,
+  ar: V
+}, I = (n, a = "en", t = 15) => {
+  const s = [], e = u[a];
+  if (n)
+    for (let o = 0; o < 24; o++)
+      for (let r = 0; r < 60; r += t) {
+        const l = new Date(2e3, 0, 1, o, r), h = c(l, "hh:mm a", { locale: p }), i = c(l, "hh:mm a", { locale: e });
+        s.push({ label: i, value: h });
+      }
+  else
+    for (let o = 0; o < 24; o++)
+      for (let r = 0; r < 60; r += t) {
+        const l = new Date(2e3, 0, 1, o, r), h = c(l, "HH:mm", { locale: p }), i = c(l, "HH:mm", { locale: e });
+        s.push({ label: i, value: h });
+      }
+  return s;
+};
+function U(n, a) {
+  if (!n) return new Date(2e3, 0, 1, 0, 0);
+  let t = null;
+  const s = a ? "hh:mm a" : "HH:mm";
+  return z(n, s, { locale: p }) && (t = B(n, s, new Date(2e3, 0, 1), { locale: p })), !t || isNaN(t.getTime()) ? new Date(2e3, 0, 1, 0, 0) : t;
+}
+const ee = ({
+  placeholder: n,
+  value: a,
+  onChange: t,
+  rounded: s,
+  lang: e = "en",
+  variant: o,
+  className: r,
+  colors: l,
+  size: h,
+  timeStep: i = 15,
+  ampm: f,
+  disabled: D
+}) => {
+  const [v, w] = g(!1), T = b(() => I(f, e, i), [f, e, i]), C = (d) => {
+    w(!1), t(d);
+  }, H = b(() => U(a, !!f), [a, f]), N = a ? f ? c(H, "hh:mm a", { locale: u[e] }) : c(H, "HH:mm", { locale: u[e] }) : null;
+  return /* @__PURE__ */ x(y, { open: v, onOpenChange: w, children: [
+    /* @__PURE__ */ m(P, { asChild: !0, children: /* @__PURE__ */ x("button", { id: "date", className: F(S({ variant: o, colors: l, size: h, rounded: s }), r), disabled: D, children: [
+      N ? /* @__PURE__ */ m(O, { children: N }) : /* @__PURE__ */ m("span", { className: "text-body-01 text-foreground-secondary", children: n ?? c(new Date(2e3, 0, 1, 12, 0), f ? "hh:mm a" : "HH:mm", { locale: u[e] }) }),
+      /* @__PURE__ */ m(A, { className: "size-[20px] shrink-0" })
+    ] }) }),
+    /* @__PURE__ */ m(
+      j,
       {
-        ref: o,
-        className: g(
-          "no-scrollbar flex-1 ",
+        className: "max-h-[230px] min-w-[300px] overflow-auto rounded border p-space-04 shadow-2xl",
+        align: e === "ar" ? "end" : "start",
+        children: /* @__PURE__ */ m("div", { dir: e === "ar" ? "rtl" : "ltr", className: "flex flex-col gap-space-02", children: T.map((d) => /* @__PURE__ */ x(
+          k,
           {
-            "overflow-x-auto ": f || d
+            colors: "neutral",
+            variant: "text",
+            rounded: "default",
+            className: "flex justify-between font-normal",
+            onClick: () => C(d.value),
+            children: [
+              d.label,
+              d.value === a && /* @__PURE__ */ m(M, {})
+            ]
           },
-          b
-        ),
-        children: /* @__PURE__ */ t("div", { className: "flex", children: v })
+          d.value
+        )) })
       }
-    ),
-    f && /* @__PURE__ */ c(u, { 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-background-white via-60% to-background-white" }),
-      /* @__PURE__ */ t(
-        h,
-        {
-          variant: "text",
-          size: "icon",
-          colors: "neutral",
-          onClick: () => m("end"),
-          "aria-label": "Scroll right",
-          className: `absolute end-0 z-10 flex-shrink-0  ${i}`,
-          children: /* @__PURE__ */ t(E, { className: "size-space-04 rtl:rotate-180" })
-        }
-      )
-    ] })
+    )
   ] });
-}
-const z = `
-  .no-scrollbar::-webkit-scrollbar {
-    display: none;
-  }
-  .no-scrollbar {
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-  }
-`;
+};
 export {
-  B as ResponsiveScroll
+  ee as TimePicker,
+  ee as default
 };

package/index.es5.js

@@ -1,9 +1,8 @@
-import { jsx as p } from "react/jsx-runtime";
-import { Slot as s } from "@radix-ui/react-slot";
+import { jsx as n } from "react/jsx-runtime";
+import { Slot as p } from "@radix-ui/react-slot";
 import { forwardRef as a } from "react";
-const o = a(({ as: t, children: r, asChild: e, ...m }, n) => /* @__PURE__ */ p(e ? s : t || "span", { ref: n, ...m, children: r }));
-o.displayName = "Text";
-const d = o;
+const f = a(({ as: o, children: t, asChild: r, ...e }, m) => /* @__PURE__ */ n(r ? p : o || "span", { ref: m, ...e, children: t }));
+f.displayName = "Text";
 export {
-  d as default
+  f as default
 };