@noxickon/onyx 0.1.0 → 1.0.0

package/dist/layouts/layouts.es.js

@@ -0,0 +1,688 @@
+import { _ as s, $ as r, e as f, a1 as j, i as h, l as y, a2 as D, c as $, u as G, t as P } from "../chunks/ui-DxsSYHCv.js";
+import { createContext as w, useState as v, useMemo as R, useEffect as k, useContext as N, useCallback as S } from "react";
+const Ne = ({
+  brand: e,
+  children: a,
+  className: t,
+  hasSidebar: o = !1,
+  navClassName: n,
+  toggleSidebar: i,
+  ...l
+}) => /* @__PURE__ */ s.jsx(
+  "header",
+  {
+    className: r("max-h-15 min-h-15 sticky top-0 z-10 bg-gray-100", t),
+    "data-ox-slot": "header",
+    ...l,
+    children: /* @__PURE__ */ s.jsxs(
+      "nav",
+      {
+        className: r(
+          "max-w-10xl mx-auto flex items-center justify-between px-4 py-2.5",
+          n
+        ),
+        children: [
+          /* @__PURE__ */ s.jsxs("div", { className: "flex items-center gap-[17px]", children: [
+            o ? /* @__PURE__ */ s.jsx(
+              f,
+              {
+                "aria-label": "Open menu",
+                "data-ox-slot": "header-toggle",
+                size: "md",
+                variant: "ghost",
+                onClick: i,
+                children: /* @__PURE__ */ s.jsx(f.Icon, { path: "mdiMenu" })
+              }
+            ) : null,
+            e ? /* @__PURE__ */ s.jsx("div", { children: e }) : null
+          ] }),
+          a
+        ]
+      }
+    )
+  }
+), I = "group ox-gray-inset-focus items-center rounded-lg text-sm transition-colors text-left col-span-2 grid grid-cols-subgrid", E = "size-10 justify-center", _ = "h-10 w-full px-2", L = "bg-gray-300 text-gray-1200", W = "h-15", B = w(void 0), Y = ({
+  children: e,
+  className: a,
+  desktopCollapsed: t = !1,
+  hasHeader: o = !1,
+  mobileCollapsed: n = !0,
+  onClose: i,
+  ...l
+}) => {
+  const [d, x] = v(window.innerWidth < j), b = d ? n : t, O = R(
+    () => ({ collapsed: b, isMobile: d }),
+    [b, d]
+  );
+  return k(() => {
+    const c = () => {
+      x(window.innerWidth < j);
+    };
+    return c(), window.addEventListener("resize", c), () => {
+      window.removeEventListener("resize", c);
+    };
+  }, []), /* @__PURE__ */ s.jsx(B.Provider, { value: O, children: d ? /* @__PURE__ */ s.jsx(h, { open: !b, onOpenChange: (c) => !c && i?.(), children: /* @__PURE__ */ s.jsx(h.Content, { closeOnOutsideClick: !!i, side: "left", ...l, children: /* @__PURE__ */ s.jsxs(
+    "nav",
+    {
+      "aria-label": "Mobile navigation",
+      className: r("flex h-screen w-full flex-col bg-gray-100", a),
+      "data-ox-slot": "sidebar",
+      role: "navigation",
+      ...l,
+      children: [
+        i ? /* @__PURE__ */ s.jsx("div", { className: r("h-15 flex items-center gap-[17px] px-4", W), children: /* @__PURE__ */ s.jsx(f, { "aria-label": "Close sidebar", size: "md", variant: "ghost", onClick: i, children: /* @__PURE__ */ s.jsx(f.Icon, { path: "mdiClose" }) }) }) : null,
+        e
+      ]
+    }
+  ) }) }) : /* @__PURE__ */ s.jsx(
+    "nav",
+    {
+      "aria-label": "Desktop navigation",
+      className: r(
+        "sticky box-content flex flex-col overflow-y-auto bg-gray-100",
+        {
+          "top-0 h-screen": !o,
+          "viewport-minus-header top-15": o,
+          'max-w-18 min-w-18 [&_[data-ox-slot="sidebar-label"]]:hidden': b,
+          "min-w-64 max-w-64": !b
+        },
+        a
+      ),
+      "data-ox-slot": "sidebar",
+      role: "navigation",
+      ...l,
+      children: e
+    }
+  ) });
+}, g = () => {
+  const e = N(B);
+  if (!e)
+    throw new Error("useSidebar must be used within a SidebarProvider");
+  return e;
+}, F = ({ children: e, className: a, ...t }) => {
+  const { collapsed: o, isMobile: n } = g();
+  return /* @__PURE__ */ s.jsx(
+    "div",
+    {
+      className: r(
+        "grid flex-1 content-start gap-y-1 overflow-y-auto p-4",
+        {
+          "grid-cols-1 place-items-center": o && !n,
+          "grid-cols-[auto_1fr]": !o || n
+        },
+        '[&_[data-ox-slot="sidebar-link"]]:col-span-2 [&_[data-ox-slot="sidebar-link"]]:grid [&_[data-ox-slot="sidebar-link"]]:grid-cols-subgrid',
+        '[&_[data-ox-slot="sidebar-button"]]:col-span-2 [&_[data-ox-slot="sidebar-button"]]:grid [&_[data-ox-slot="sidebar-button"]]:grid-cols-subgrid',
+        '[&_[data-ox-slot="sidebar-icon"]]:justify-self-center [&_[data-ox-slot="sidebar-icon"]]:[grid-column-start:var(--ox-menu-icon-col)]',
+        '[&_[data-ox-slot="sidebar-label"]]:[grid-column-start:var(--ox-menu-label-col)]',
+        a
+      ),
+      "data-ox-slot": "sidebar-body",
+      ...t,
+      children: e
+    }
+  );
+}, V = ({
+  active: e = !1,
+  children: a,
+  className: t,
+  disabled: o = !1,
+  ...n
+}) => {
+  const { collapsed: i } = g();
+  return /* @__PURE__ */ s.jsx(
+    "button",
+    {
+      className: r(
+        "enabled:text-gray-1000 enabled:hover:text-gray-1200 enabled:cursor-pointer enabled:hover:bg-gray-300",
+        I,
+        {
+          [E]: i,
+          [_]: !i,
+          [L]: e && !o,
+          "disabled:ox-default-disabled": o
+        },
+        t
+      ),
+      "data-ox-slot": "sidebar-button",
+      disabled: o,
+      type: "button",
+      ...n,
+      "data-ox-state": e ? "active" : "inactive",
+      children: a
+    }
+  );
+}, K = ({ children: e, className: a, ...t }) => /* @__PURE__ */ s.jsx("div", { className: r("p-4", a), "data-ox-slot": "sidebar-footer", ...t, children: e }), q = ({
+  children: e,
+  className: a,
+  headline: t,
+  ...o
+}) => {
+  const { collapsed: n, isMobile: i } = g();
+  return /* @__PURE__ */ s.jsxs("div", { className: r("contents", a), "data-ox-slot": "sidebar-group", ...o, children: [
+    /* @__PURE__ */ s.jsx(
+      "h3",
+      {
+        className: r("text-gray-1000 col-span-full mb-2 mt-4 block cursor-default text-xs", {
+          invisible: n && !i
+        }),
+        children: t
+      }
+    ),
+    e
+  ] });
+}, J = ({ children: e, className: a, ...t }) => /* @__PURE__ */ s.jsx(
+  "div",
+  {
+    className: r("h-15 flex items-center px-4", a),
+    "data-ox-slot": "sidebar-header",
+    ...t,
+    children: e
+  }
+), Q = ({ className: e, size: a = 0.8, ...t }) => {
+  const { collapsed: o } = g();
+  return /* @__PURE__ */ s.jsx(
+    y,
+    {
+      className: r("shrink-0 text-current", { "mr-2": !o }, e),
+      "data-ox-slot": "sidebar-icon",
+      size: a,
+      ...t
+    }
+  );
+}, U = ({ children: e, className: a, ...t }) => /* @__PURE__ */ s.jsx(
+  "span",
+  {
+    className: r("overflow-hidden text-ellipsis", a),
+    "data-ox-slot": "sidebar-label",
+    ...t,
+    children: e
+  }
+), X = ({
+  active: e = !1,
+  children: a,
+  className: t,
+  disabled: o = !1,
+  href: n,
+  ...i
+}) => {
+  const { collapsed: l } = g();
+  return /* @__PURE__ */ s.jsx(
+    "a",
+    {
+      "aria-current": e ? "page" : void 0,
+      className: r(
+        I,
+        {
+          [E]: l,
+          [_]: !l,
+          [L]: e && !o,
+          "text-gray-1000 hover:text-gray-1200 cursor-pointer hover:bg-gray-300": !e && !o,
+          "ox-default-disabled": o
+        },
+        t
+      ),
+      "data-ox-slot": "sidebar-link",
+      href: o ? void 0 : n,
+      role: "link",
+      onClick: o ? (d) => d.preventDefault() : void 0,
+      ...i,
+      "data-ox-state": e ? "active" : "inactive",
+      children: a
+    }
+  );
+}, m = Y;
+m.Body = F;
+m.Button = V;
+m.Footer = K;
+m.Group = q;
+m.Header = J;
+m.Icon = Q;
+m.Label = U;
+m.Link = X;
+const Me = ({
+  children: e,
+  className: a,
+  color: t = "purple",
+  icon: o,
+  subtitle: n,
+  title: i,
+  ...l
+}) => {
+  const d = i || n || o, x = D[t];
+  return /* @__PURE__ */ s.jsxs(
+    "main",
+    {
+      "aria-labelledby": d ? "main-headline" : void 0,
+      className: r("w-full p-6", a),
+      "data-ox-slot": "main-content",
+      ...l,
+      children: [
+        d ? /* @__PURE__ */ s.jsx("div", { className: "mb-8 border-b border-gray-400 pb-6", children: /* @__PURE__ */ s.jsxs("div", { className: "flex items-center gap-4", children: [
+          o ? /* @__PURE__ */ s.jsx("div", { className: r("rounded-lg border p-3", x.border, x.background), children: /* @__PURE__ */ s.jsx(y, { className: x.text, path: o, size: 1.41 }) }) : null,
+          /* @__PURE__ */ s.jsxs("div", { children: [
+            i ? /* @__PURE__ */ s.jsx(
+              "h2",
+              {
+                id: "main-headline",
+                className: "text-gray-1200 text-xl font-semibold",
+                "data-ox-slot": "main-headline",
+                children: i
+              }
+            ) : null,
+            n && /* @__PURE__ */ s.jsx("p", { className: "mt-1 text-sm", children: n })
+          ] })
+        ] }) }) : null,
+        e
+      ]
+    }
+  );
+}, Ce = ({ children: e, className: a, ...t }) => {
+  const { isMobile: o } = M();
+  return /* @__PURE__ */ s.jsx(
+    "div",
+    {
+      className: r(
+        "max-w-10xl mx-auto grid min-h-screen bg-transparent",
+        o ? "grid-cols-1" : "grid-cols-[auto_1fr]",
+        a
+      ),
+      "data-ox-slot": "app-layout",
+      ...t,
+      children: e
+    }
+  );
+}, Z = ({ children: e, className: a, ...t }) => /* @__PURE__ */ s.jsx(
+  "main",
+  {
+    className: r("flex flex-col overflow-y-auto", a),
+    "data-ox-slot": "main-content",
+    ...t,
+    children: e
+  }
+), ee = ({ children: e, className: a, ...t }) => /* @__PURE__ */ s.jsx(
+  "div",
+  {
+    className: r("flex-1 overflow-y-auto px-6 py-6", a),
+    "data-ox-slot": "main-content-body",
+    ...t,
+    children: e
+  }
+), te = ({
+  children: e,
+  className: a,
+  ...t
+}) => /* @__PURE__ */ s.jsx(
+  "div",
+  {
+    className: r("flex-shrink-0 border-b border-gray-400 bg-gray-100 px-6 py-4", a),
+    "data-ox-slot": "main-content-header",
+    ...t,
+    children: e
+  }
+), ke = Object.assign(Z, {
+  Header: te,
+  Body: ee
+}), T = w(void 0);
+function M() {
+  const e = N(T);
+  if (!e)
+    throw new Error("useOxSidebar must be used within a SidebarProvider");
+  return e;
+}
+const ae = 256, se = ({ children: e, className: a, ...t }) => {
+  const { isMobile: o, mobileOpen: n, toggleSidebar: i } = M();
+  return o ? /* @__PURE__ */ s.jsx(h, { open: n, onOpenChange: i, children: /* @__PURE__ */ s.jsx(h.Content, { closeOnOutsideClick: !0, side: "left", children: /* @__PURE__ */ s.jsx(
+    "aside",
+    {
+      className: r("bg-gray-150 flex h-full flex-col", a),
+      "data-ox-slot": "sidebar",
+      ...t,
+      children: e
+    }
+  ) }) }) : /* @__PURE__ */ s.jsx(
+    "aside",
+    {
+      className: r("bg-gray-150 sticky top-0 flex h-screen flex-col overflow-y-auto", a),
+      "data-ox-slot": "sidebar",
+      style: { width: ae },
+      ...t,
+      children: e
+    }
+  );
+}, oe = ({ children: e, className: a, ...t }) => /* @__PURE__ */ s.jsx(
+  "div",
+  {
+    className: r("flex-1 overflow-y-auto p-2", a),
+    "data-ox-slot": "sidebar-content",
+    ...t,
+    children: e
+  }
+), re = ({ children: e, className: a, ...t }) => /* @__PURE__ */ s.jsx(
+  "div",
+  {
+    className: r("flex shrink-0 flex-col p-2", a),
+    "data-ox-slot": "sidebar-footer",
+    ...t,
+    children: e
+  }
+), ne = ({ children: e, className: a, ...t }) => /* @__PURE__ */ s.jsx(
+  "div",
+  {
+    className: r(
+      "flex flex-wrap items-center gap-2",
+      '[&_[data-ox-slot="sidebar-group-content"]]:w-full',
+      a
+    ),
+    "data-ox-slot": "sidebar-group",
+    ...t,
+    children: e
+  }
+), ie = ({
+  children: e,
+  className: a,
+  ...t
+}) => /* @__PURE__ */ s.jsx(
+  "button",
+  {
+    className: r(
+      "mr-1.5 inline-flex size-6 shrink-0 items-center justify-center rounded-md",
+      "enabled:hover:text-gray-1200 enabled:cursor-pointer enabled:text-gray-900 enabled:hover:bg-gray-300",
+      "ox-gray-outset-focus disabled:ox-default-disabled",
+      a
+    ),
+    "data-ox-slot": "sidebar-group-action",
+    type: "button",
+    ...t,
+    children: e
+  }
+), le = ({
+  children: e,
+  className: a,
+  ...t
+}) => /* @__PURE__ */ s.jsx("div", { className: r(a), "data-ox-slot": "sidebar-group-content", ...t, children: e }), de = ({
+  children: e,
+  className: a,
+  ...t
+}) => /* @__PURE__ */ s.jsx(
+  "div",
+  {
+    className: r("flex flex-1 items-center pl-2 text-xs font-medium text-gray-900", a),
+    "data-ox-slot": "sidebar-group-label",
+    ...t,
+    children: e
+  }
+), xe = ({ children: e, className: a, ...t }) => /* @__PURE__ */ s.jsx(
+  "div",
+  {
+    className: r("flex shrink-0 flex-col p-2", a),
+    "data-ox-slot": "sidebar-header",
+    ...t,
+    children: e
+  }
+), ce = ({ children: e, className: a, ...t }) => /* @__PURE__ */ s.jsx(
+  "ul",
+  {
+    className: r("flex flex-col items-stretch gap-1", a),
+    "data-ox-slot": "sidebar-menu",
+    ...t,
+    children: e
+  }
+), ue = ({
+  children: e,
+  className: a,
+  ...t
+}) => /* @__PURE__ */ s.jsx(
+  "button",
+  {
+    className: r(
+      "inline-flex size-9 shrink-0 items-center justify-center rounded-lg border border-transparent",
+      "enabled:text-gray-1200 enabled:cursor-pointer enabled:bg-transparent enabled:hover:bg-gray-300",
+      "ox-gray-outset-focus disabled:ox-default-disabled",
+      a
+    ),
+    "data-ox-slot": "sidebar-menu-action",
+    type: "button",
+    ...t,
+    children: e
+  }
+), be = ({ children: e, className: a }) => /* @__PURE__ */ s.jsx($, { className: r("ml-auto", a), "data-ox-slot": "sidebar-menu-badge", size: "sm", children: e }), z = w(void 0), A = () => {
+  const e = N(z);
+  if (!e)
+    throw new Error("useMenuItemContext must be used within MenuItemProvider");
+  return e;
+}, H = ({ className: e, path: a, placeholder: t }) => /* @__PURE__ */ s.jsx(
+  y,
+  {
+    className: r("shrink-0", e),
+    "data-ox-slot": "sidebar-menu-icon",
+    path: a,
+    placeholder: t,
+    size: 0.8
+  }
+), me = ({
+  children: e,
+  className: a,
+  disabled: t = !1,
+  href: o,
+  onClick: n,
+  ...i
+}) => {
+  const { hasSub: l, isOpen: d, toggleOpen: x } = A(), b = r(
+    "flex h-9 flex-1 items-center gap-2 rounded-lg border border-transparent bg-transparent px-2 text-left text-sm",
+    "ox-gray-outset-focus",
+    a
+  );
+  if (o)
+    return /* @__PURE__ */ s.jsx(
+      "a",
+      {
+        "aria-disabled": t ? "true" : void 0,
+        className: r(b, {
+          "text-gray-1200 cursor-pointer hover:bg-gray-300": !t,
+          "ox-default-disabled": t
+        }),
+        "data-ox-slot": "sidebar-menu-button",
+        href: t ? void 0 : o,
+        onClick: t ? (c) => c.preventDefault() : void 0,
+        ...i,
+        children: e
+      }
+    );
+  const O = (c) => {
+    l && x(), n && n(c);
+  };
+  return /* @__PURE__ */ s.jsxs(
+    "button",
+    {
+      className: r(
+        b,
+        "enabled:text-gray-1200 enabled:cursor-pointer enabled:hover:bg-gray-300",
+        "disabled:ox-default-disabled"
+      ),
+      "data-ox-slot": "sidebar-menu-button",
+      disabled: t,
+      type: "button",
+      onClick: O,
+      ...i,
+      children: [
+        e,
+        l ? /* @__PURE__ */ s.jsx(
+          H,
+          {
+            className: r("ml-auto transition-transform duration-200", { "rotate-180": d }),
+            path: "mdiChevronDown"
+          }
+        ) : null
+      ]
+    }
+  );
+};
+function ge({
+  children: e,
+  defaultOpen: a = !1,
+  hasSub: t = !1
+}) {
+  const [o, n] = v(a), i = () => n((l) => !l);
+  return /* @__PURE__ */ s.jsx(z.Provider, { value: { hasSub: t, isOpen: o, setIsOpen: n, toggleOpen: i }, children: e });
+}
+const pe = ({
+  children: e,
+  className: a,
+  defaultOpen: t = !1,
+  hasSub: o = !1,
+  ...n
+}) => /* @__PURE__ */ s.jsx(ge, { defaultOpen: t, hasSub: o, children: /* @__PURE__ */ s.jsx(
+  "li",
+  {
+    className: r("group flex flex-wrap items-center gap-x-2", a),
+    "data-ox-slot": "sidebar-menu-item",
+    ...n,
+    children: e
+  }
+) }), fe = ({ className: e }) => /* @__PURE__ */ s.jsx(G, { className: e, "data-ox-slot": "sidebar-menu-skeleton", fullWidth: !0, height: 36 }), he = ({ children: e, className: a, ...t }) => {
+  const { isOpen: o } = A();
+  return /* @__PURE__ */ s.jsx(
+    "div",
+    {
+      className: "ox-sidebar-submenu w-content grid w-full",
+      "data-ox-slot": "sidebar-menu-sub-wrapper",
+      "data-ox-state": o ? "open" : "closed",
+      children: /* @__PURE__ */ s.jsx(
+        "ul",
+        {
+          className: r(
+            "ml-4.5 flex flex-col gap-1 border-l border-gray-400 py-0.5 pl-2.5",
+            a
+          ),
+          "data-ox-slot": "sidebar-menu-sub",
+          ...t,
+          children: e
+        }
+      )
+    }
+  );
+}, ve = ({
+  children: e,
+  className: a,
+  href: t,
+  ...o
+}) => {
+  const n = r(
+    "text-gray-1200 flex h-8 flex-1 cursor-pointer items-center gap-2 rounded-lg border border-transparent bg-transparent px-2 text-left text-sm hover:bg-gray-300",
+    "ox-gray-outset-focus",
+    a
+  );
+  return t ? /* @__PURE__ */ s.jsx(
+    "a",
+    {
+      className: n,
+      "data-ox-slot": "sidebar-menu-sub-button",
+      href: t,
+      ...o,
+      children: e
+    }
+  ) : /* @__PURE__ */ s.jsx(
+    "button",
+    {
+      className: n,
+      "data-ox-slot": "sidebar-menu-sub-button",
+      type: "button",
+      ...o,
+      children: e
+    }
+  );
+}, ye = ({
+  children: e,
+  className: a,
+  ...t
+}) => /* @__PURE__ */ s.jsx(
+  "li",
+  {
+    className: r("flex items-center gap-2", a),
+    "data-ox-slot": "sidebar-menu-sub-item",
+    ...t,
+    children: e
+  }
+), Oe = ({ className: e, ...a }) => /* @__PURE__ */ s.jsx(P, { className: e, "data-ox-slot": "sidebar-separator", ...a }), Se = ({ className: e, onClick: a }) => {
+  const { isMobile: t, toggleSidebar: o } = M(), n = () => {
+    t ? o() : a && a();
+  }, i = t || a;
+  return /* @__PURE__ */ s.jsx(
+    "button",
+    {
+      "aria-label": "Toggle sidebar",
+      className: r(
+        "inline-flex size-8 items-center justify-center rounded-lg",
+        "text-gray-1200 border border-transparent bg-transparent",
+        {
+          "ox-gray-outset-focus cursor-pointer hover:bg-gray-300": i
+        },
+        e
+      ),
+      "data-ox-slot": "sidebar-trigger",
+      disabled: !i,
+      type: "button",
+      onClick: n,
+      children: /* @__PURE__ */ s.jsx(y, { path: "mdiDockLeft", size: 0.8 })
+    }
+  );
+};
+function Ie({ children: e }) {
+  const [a, t] = v(!1), [o, n] = v(!1);
+  k(() => {
+    const x = () => {
+      n(window.innerWidth < j);
+    };
+    return x(), window.addEventListener("resize", x), () => window.removeEventListener("resize", x);
+  }, []);
+  const i = S(() => {
+    t(!0);
+  }, []), l = S(() => {
+    t(!1);
+  }, []), d = S(() => {
+    t((x) => !x);
+  }, []);
+  return /* @__PURE__ */ s.jsx(
+    T.Provider,
+    {
+      value: {
+        closeSidebar: l,
+        isMobile: o,
+        mobileOpen: a,
+        openSidebar: i,
+        toggleSidebar: d
+      },
+      children: e
+    }
+  );
+}
+const p = se, u = ce, C = ne;
+p.Header = xe;
+p.Content = oe;
+p.Footer = re;
+p.Separator = Oe;
+p.Trigger = Se;
+u.Item = pe;
+u.Button = me;
+u.Icon = H;
+u.Badge = be;
+u.Action = ue;
+u.Skeleton = fe;
+u.Sub = he;
+u.SubItem = ye;
+u.SubButton = ve;
+C.Label = de;
+C.Action = ie;
+C.Content = le;
+export {
+  Ce as OxAppLayout,
+  Ne as OxLegacyHeader,
+  Me as OxLegacyMainContent,
+  m as OxLegacySidebar,
+  ke as OxMainContent,
+  p as OxSidebar,
+  C as OxSidebarGroup,
+  u as OxSidebarMenu,
+  Ie as OxSidebarProvider,
+  M as useOxSidebar
+};