@cakejp/design-system 0.16.0 → 0.17.0

package/dist/components/foundations/table.js

@@ -0,0 +1,115 @@
+import { jsx as a } from "react/jsx-runtime";
+import "react";
+import { cn as o } from "../../lib/utils.js";
+function s({ className: t, ...e }) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      "data-slot": "table-container",
+      className: "relative w-full overflow-x-auto",
+      children: /* @__PURE__ */ a(
+        "table",
+        {
+          "data-slot": "table",
+          className: o("w-full caption-bottom typo-body-md", t),
+          ...e
+        }
+      )
+    }
+  );
+}
+function b({ className: t, ...e }) {
+  return /* @__PURE__ */ a(
+    "thead",
+    {
+      "data-slot": "table-header",
+      className: o("[&_tr]:border-b [&_tr]:border-[var(--Border-Medium-Emphasis)]", t),
+      ...e
+    }
+  );
+}
+function n({ className: t, ...e }) {
+  return /* @__PURE__ */ a(
+    "tbody",
+    {
+      "data-slot": "table-body",
+      className: o("[&_tr:last-child]:border-0", t),
+      ...e
+    }
+  );
+}
+function c({ className: t, ...e }) {
+  return /* @__PURE__ */ a(
+    "tfoot",
+    {
+      "data-slot": "table-footer",
+      className: o(
+        "border-t border-[var(--Border-Medium-Emphasis)] bg-muted/50 typo-label-sm [&>tr]:last:border-b-0",
+        t
+      ),
+      ...e
+    }
+  );
+}
+function i({ className: t, ...e }) {
+  return /* @__PURE__ */ a(
+    "tr",
+    {
+      "data-slot": "table-row",
+      className: o(
+        "border-b border-[var(--Border-Medium-Emphasis)] transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+        t
+      ),
+      ...e
+    }
+  );
+}
+function m({ className: t, ...e }) {
+  return /* @__PURE__ */ a(
+    "th",
+    {
+      "data-slot": "table-head",
+      className: o(
+        "h-10 px-2 text-left align-middle typo-label-sm whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        t
+      ),
+      ...e
+    }
+  );
+}
+function u({ className: t, ...e }) {
+  return /* @__PURE__ */ a(
+    "td",
+    {
+      "data-slot": "table-cell",
+      className: o(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        t
+      ),
+      ...e
+    }
+  );
+}
+function p({
+  className: t,
+  ...e
+}) {
+  return /* @__PURE__ */ a(
+    "caption",
+    {
+      "data-slot": "table-caption",
+      className: o("mt-4 typo-body-md text-muted-foreground", t),
+      ...e
+    }
+  );
+}
+export {
+  s as Table,
+  n as TableBody,
+  p as TableCaption,
+  u as TableCell,
+  c as TableFooter,
+  m as TableHead,
+  b as TableHeader,
+  i as TableRow
+};

package/dist/components/foundations/tabs.js

@@ -0,0 +1,102 @@
+import { jsx as r } from "react/jsx-runtime";
+import "react";
+import { cva as o } from "class-variance-authority";
+import { Tabs as e } from "radix-ui";
+import { cn as i } from "../../lib/utils.js";
+function c({
+  className: t,
+  ...a
+}) {
+  return /* @__PURE__ */ r(
+    e.Root,
+    {
+      "data-slot": "tabs",
+      className: i("flex flex-col", t),
+      ...a
+    }
+  );
+}
+const n = o(
+  "group/tabs-list inline-flex items-center",
+  {
+    variants: {
+      variant: {
+        underbar: "w-full bg-transparent overflow-x-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]",
+        segment: "w-fit rounded-full bg-[var(--Surface-Tertiary)] p-2"
+      },
+      scrollable: {
+        true: "gap-4"
+      }
+    },
+    defaultVariants: {
+      variant: "underbar",
+      scrollable: !1
+    }
+  }
+);
+function v({
+  className: t,
+  variant: a = "underbar",
+  scrollable: s = !1,
+  ...l
+}) {
+  return /* @__PURE__ */ r(
+    e.List,
+    {
+      "data-slot": "tabs-list",
+      "data-variant": a,
+      "data-scrollable": s || void 0,
+      className: i(n({ variant: a, scrollable: s }), t),
+      ...l
+    }
+  );
+}
+function m({
+  className: t,
+  children: a,
+  ...s
+}) {
+  return /* @__PURE__ */ r(
+    e.Trigger,
+    {
+      "data-slot": "tabs-trigger",
+      className: i(
+        // Base
+        "group/trigger relative inline-flex items-center justify-center whitespace-nowrap transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring/70 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        // Underbar variant (default: equal-width tabs with full-width underline)
+        "group-data-[variant=underbar]/tabs-list:h-12 group-data-[variant=underbar]/tabs-list:flex-1 group-data-[variant=underbar]/tabs-list:border-b-2 group-data-[variant=underbar]/tabs-list:border-transparent group-data-[variant=underbar]/tabs-list:typo-label-md group-data-[variant=underbar]/tabs-list:text-[var(--Text-Low-Emphasis)]",
+        // Underbar active
+        "group-data-[variant=underbar]/tabs-list:data-[state=active]:border-[var(--Text-High-Emphasis)] group-data-[variant=underbar]/tabs-list:data-[state=active]:text-[var(--Text-High-Emphasis)]",
+        // Scrollable underbar: shrink to text width, bold text, remove trigger border (underline moves to inner span)
+        "group-data-[scrollable]/tabs-list:!flex-initial group-data-[scrollable]/tabs-list:!shrink-0 group-data-[scrollable]/tabs-list:!border-b-0 group-data-[scrollable]/tabs-list:data-[state=active]:!border-b-0 group-data-[scrollable]/tabs-list:typo-label-md",
+        // Segment variant
+        "group-data-[variant=segment]/tabs-list:h-[37px] group-data-[variant=segment]/tabs-list:min-w-[100px] group-data-[variant=segment]/tabs-list:rounded-full group-data-[variant=segment]/tabs-list:px-3 group-data-[variant=segment]/tabs-list:typo-body-md group-data-[variant=segment]/tabs-list:text-[var(--Text-High-Emphasis)]",
+        // Segment active
+        "group-data-[variant=segment]/tabs-list:data-[state=active]:bg-[var(--Surface-Primary)] group-data-[variant=segment]/tabs-list:data-[state=active]:shadow-[0px_4px_6px_-4px_rgba(24,39,75,0.12),0px_8px_8px_-4px_rgba(24,39,75,0.08)]",
+        t
+      ),
+      ...s,
+      children: /* @__PURE__ */ r("span", { className: "group-data-[scrollable]/tabs-list:inline-block group-data-[scrollable]/tabs-list:border-b-2 group-data-[scrollable]/tabs-list:border-transparent group-data-[scrollable]/tabs-list:pb-px group-data-[state=active]/trigger:border-[var(--Text-High-Emphasis)]", children: a })
+    }
+  );
+}
+function f({
+  className: t,
+  ...a
+}) {
+  return /* @__PURE__ */ r(
+    e.Content,
+    {
+      "data-slot": "tabs-content",
+      className: i("flex-1 outline-none", t),
+      ...a
+    }
+  );
+}
+export {
+  c as Tabs,
+  f as TabsContent,
+  v as TabsList,
+  m as TabsTrigger,
+  n as tabsListVariants
+};

package/dist/components/foundations/textarea.js

@@ -0,0 +1,65 @@
+import { jsx as n, jsxs as s } from "react/jsx-runtime";
+import "react";
+import { cn as c } from "../../lib/utils.js";
+import { useValueLength as h } from "../../lib/use-value-length.js";
+import { FOCUS_RING as g } from "../../lib/focus-ring.js";
+import { resolveNativeFieldAria as y, useFieldLabelling as w } from "../../lib/field-labelling.js";
+function D({
+  className: m,
+  showCount: r,
+  maxLength: e,
+  value: a,
+  defaultValue: t,
+  onChange: o,
+  ref: b,
+  ...i
+}) {
+  const u = y(i, w()), { ref: f, length: d, syncFromDom: p } = h({
+    enabled: r === !0,
+    value: a,
+    defaultValue: t,
+    forwardedRef: b
+  }), l = /* @__PURE__ */ n(
+    "textarea",
+    {
+      "data-slot": "textarea",
+      ref: f,
+      value: a,
+      defaultValue: t,
+      maxLength: e,
+      onChange: r ? (v) => {
+        p(), o?.(v);
+      } : o,
+      className: c(
+        "flex field-sizing-content min-h-16 w-full rounded-lg border border-[var(--Border-High-Emphasis)] bg-transparent px-3 py-2 typo-body-lg md:typo-body-md transition-[color,box-shadow,border-color] outline-none placeholder:text-muted-foreground hover:border-[var(--Focus-High-Emphasis)] disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-[var(--Border-Low-Emphasis)] disabled:bg-[var(--Surface-Secondary)] disabled:text-[var(--Text-Disable)] disabled:placeholder:text-[var(--Text-Disable)] aria-invalid:border-[var(--Border-Caution)] aria-invalid:ring-[var(--Border-Caution)]/20",
+        // フォーカス意匠は DS 共通（FOCUS_RING）。
+        g,
+        m
+      ),
+      ...i,
+      ...u
+    }
+  );
+  if (!r) return l;
+  const x = e != null && d >= e;
+  return /* @__PURE__ */ s("div", { "data-slot": "textarea-with-count", className: "w-full", children: [
+    l,
+    /* @__PURE__ */ n("div", { className: "mt-1 flex justify-end", children: /* @__PURE__ */ s(
+      "span",
+      {
+        "data-slot": "textarea-count",
+        className: c(
+          "typo-body-xs",
+          x ? "text-[var(--Text-Caution)]" : "text-[var(--Text-Low-Emphasis)]"
+        ),
+        children: [
+          d,
+          e != null ? `/${e}` : ""
+        ]
+      }
+    ) })
+  ] });
+}
+export {
+  D as Textarea
+};

package/dist/components/foundations/toggle-group.js

@@ -0,0 +1,107 @@
+import { jsx as i } from "react/jsx-runtime";
+import * as s from "react";
+import { cva as l } from "class-variance-authority";
+import { ToggleGroup as d } from "radix-ui";
+import { cn as g } from "../../lib/utils.js";
+const p = l(
+  "flex items-center gap-1.5 py-1.5 overflow-x-auto scrollbar-none",
+  {
+    variants: {
+      /** グループ全体の幅 */
+      width: {
+        fit: "w-fit",
+        full: "w-full"
+      }
+    },
+    defaultVariants: {
+      width: "fit"
+    }
+  }
+), c = l(
+  [
+    "inline-flex shrink-0 items-center justify-center",
+    "h-9 rounded-full px-3",
+    "typo-label-md whitespace-nowrap",
+    "outline-none transition-colors",
+    "focus-visible:ring-2 focus-visible:ring-ring/50",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        default: [
+          "bg-[var(--Surface-Tertiary)] text-[var(--Text-Medium-Emphasis)]",
+          "hover:bg-[var(--Surface-Tertiary)]/80",
+          "data-[state=on]:bg-[var(--Surface-Accent-Primary-Light)] data-[state=on]:text-[var(--Brand-Cake-Orange)] data-[state=on]:font-bold",
+          "dark:bg-[var(--Surface-Secondary)] dark:text-[var(--Text-Low-Emphasis)]",
+          "dark:data-[state=on]:bg-[var(--Surface-Accent-Primary-Light)] dark:data-[state=on]:text-[var(--Text-Accent-Primary)]"
+        ].join(" "),
+        outline: [
+          "border border-[var(--Border-Low-Emphasis)] bg-transparent text-[var(--Text-Low-Emphasis)]",
+          "hover:bg-[var(--Surface-Tertiary)]",
+          "data-[state=on]:border-[var(--Text-High-Emphasis)] data-[state=on]:bg-transparent data-[state=on]:text-[var(--Text-High-Emphasis)]"
+        ].join(" ")
+      },
+      size: {
+        default: "h-9 px-3 typo-label-md",
+        sm: "h-8 px-2.5 typo-label-sm",
+        lg: "h-10 px-4 typo-label-md"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+), u = s.createContext({
+  variant: "default",
+  size: "default"
+});
+function h({
+  className: a,
+  variant: e,
+  size: r,
+  width: o,
+  children: n,
+  ...t
+}) {
+  return /* @__PURE__ */ i(
+    d.Root,
+    {
+      "data-slot": "toggle-group",
+      className: g(p({ width: o }), a),
+      ...t,
+      children: /* @__PURE__ */ i(u.Provider, { value: { variant: e, size: r }, children: n })
+    }
+  );
+}
+function b({
+  className: a,
+  children: e,
+  variant: r,
+  size: o,
+  ...n
+}) {
+  const t = s.useContext(u);
+  return /* @__PURE__ */ i(
+    d.Item,
+    {
+      "data-slot": "toggle-group-item",
+      className: g(
+        c({
+          variant: t.variant || r,
+          size: t.size || o
+        }),
+        a
+      ),
+      ...n,
+      children: e
+    }
+  );
+}
+export {
+  h as ToggleGroup,
+  b as ToggleGroupItem,
+  c as toggleGroupItemVariants
+};

package/dist/components/foundations/toggle.js

@@ -0,0 +1,44 @@
+import { jsx as n } from "react/jsx-runtime";
+import "react";
+import { cva as o } from "class-variance-authority";
+import { Toggle as a } from "radix-ui";
+import { cn as s } from "../../lib/utils.js";
+const d = o(
+  "inline-flex items-center justify-center gap-2 rounded-md typo-label-sm whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground"
+      },
+      size: {
+        default: "h-9 min-w-9 px-2",
+        sm: "h-8 min-w-8 px-1.5",
+        lg: "h-10 min-w-10 px-2.5"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function p({
+  className: e,
+  variant: t,
+  size: r,
+  ...i
+}) {
+  return /* @__PURE__ */ n(
+    a.Root,
+    {
+      "data-slot": "toggle",
+      className: s(d({ variant: t, size: r, className: e })),
+      ...i
+    }
+  );
+}
+export {
+  p as Toggle,
+  d as toggleVariants
+};

package/dist/components/foundations/tooltip.js

@@ -0,0 +1,56 @@
+import { jsx as r, jsxs as n } from "react/jsx-runtime";
+import "react";
+import { Tooltip as o } from "radix-ui";
+import { cn as d } from "../../lib/utils.js";
+function f({
+  delayDuration: t = 0,
+  ...i
+}) {
+  return /* @__PURE__ */ r(
+    o.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delayDuration: t,
+      ...i
+    }
+  );
+}
+function c({
+  ...t
+}) {
+  return /* @__PURE__ */ r(o.Root, { "data-slot": "tooltip", ...t });
+}
+function u({
+  ...t
+}) {
+  return /* @__PURE__ */ r(o.Trigger, { "data-slot": "tooltip-trigger", ...t });
+}
+function g({
+  className: t,
+  sideOffset: i = 6,
+  children: e,
+  ...a
+}) {
+  return /* @__PURE__ */ r(o.Portal, { children: /* @__PURE__ */ n(
+    o.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset: i,
+      className: d(
+        "z-[var(--Z-Tooltip)] w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md bg-foreground px-3 py-1.5 typo-body-sm text-balance text-background fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+        t
+      ),
+      ...a,
+      children: [
+        e,
+        /* @__PURE__ */ r(o.Arrow, { className: "z-[var(--Z-Tooltip)] size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-xs bg-foreground fill-foreground" })
+      ]
+    }
+  ) });
+}
+export {
+  c as Tooltip,
+  g as TooltipContent,
+  f as TooltipProvider,
+  u as TooltipTrigger
+};

package/dist/components/primitives/admin-header.js

@@ -0,0 +1,31 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import "react";
+import s from "iconsax-reactjs/dist/esm/HamburgerMenu.js";
+function l({ brand: r, onMenuClick: a, actions: t }) {
+  return /* @__PURE__ */ i(
+    "header",
+    {
+      "data-slot": "admin-header",
+      className: "fixed top-0 left-0 right-0 z-[var(--Z-Nav)] flex h-14 @md:h-16 items-center justify-between bg-[var(--Surface-Primary)] border-b border-[var(--Border-Low-Emphasis)] px-4 @md:px-6",
+      children: [
+        /* @__PURE__ */ i("div", { className: "flex items-center gap-2 @md:gap-3", children: [
+          a && /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              className: "flex items-center justify-center size-10 shrink-0 rounded-lg hover:bg-[var(--Surface-Secondary)] @md:hidden",
+              "aria-label": "メニュー",
+              onClick: a,
+              children: /* @__PURE__ */ e(s, { size: 20, className: "text-[var(--Text-High-Emphasis)]" })
+            }
+          ),
+          typeof r == "string" ? /* @__PURE__ */ e("p", { className: "typo-heading-md @md:typo-heading-lg text-[var(--Text-High-Emphasis)] truncate", children: r }) : r
+        ] }),
+        t && /* @__PURE__ */ e("div", { className: "flex items-center gap-1 @md:gap-2", children: t })
+      ]
+    }
+  );
+}
+export {
+  l as AdminHeader
+};

package/dist/components/primitives/admin-side-nav.js

@@ -0,0 +1,135 @@
+import { jsxs as s, Fragment as c, jsx as r } from "react/jsx-runtime";
+import * as b from "react";
+import y from "iconsax-reactjs/dist/esm/ArrowDown2.js";
+import { XIcon as g } from "lucide-react";
+import { cn as m } from "../../lib/utils.js";
+function v(n, o) {
+  return typeof n == "function" ? n(o) : n;
+}
+function M({
+  items: n,
+  activeKey: o,
+  drawerTitle: p,
+  open: f = !1,
+  onOpenChange: h,
+  ariaLabel: d = "管理メニュー"
+}) {
+  const [x, u] = b.useState(null);
+  return /* @__PURE__ */ s(c, { children: [
+    /* @__PURE__ */ r(
+      "nav",
+      {
+        "data-slot": "admin-side-nav",
+        "aria-label": d,
+        className: "hidden @md:flex fixed left-0 top-16 bottom-0 z-[var(--Z-Sticky)] w-[72px] flex-col items-center bg-[var(--Surface-Primary)] border-r border-[var(--Border-Low-Emphasis)]",
+        children: n.map((e) => {
+          const t = o === e.key, l = !!e.subMenus && e.subMenus.length > 0;
+          return /* @__PURE__ */ s(
+            "div",
+            {
+              className: "relative",
+              onMouseEnter: () => u(l ? e.key : null),
+              onMouseLeave: () => u(null),
+              children: [
+                (() => {
+                  const a = m(
+                    "flex h-16 w-16 flex-col items-center justify-center gap-1 transition-colors",
+                    t ? "text-[var(--Text-Accent-Primary)]" : "text-[var(--Text-Medium-Emphasis)] hover:text-[var(--Text-High-Emphasis)]"
+                  ), i = /* @__PURE__ */ s(c, { children: [
+                    v(e.icon, { active: t, placement: "rail" }),
+                    /* @__PURE__ */ r("span", { className: "max-w-12 text-center typo-label-xs", children: e.label })
+                  ] });
+                  return e.href ? /* @__PURE__ */ r(
+                    "a",
+                    {
+                      href: e.href,
+                      className: a,
+                      "aria-current": t ? "page" : void 0,
+                      children: i
+                    }
+                  ) : /* @__PURE__ */ r("button", { type: "button", className: a, children: i });
+                })(),
+                l && x === e.key && /* @__PURE__ */ r("div", { className: "absolute left-full top-0 z-[var(--Z-Popover)] ml-0 w-[240px] rounded-2xl bg-[var(--Surface-Primary)] shadow-menu border border-[var(--Border-Low-Emphasis)] py-2", children: e.subMenus.map((a) => /* @__PURE__ */ r(
+                  "a",
+                  {
+                    href: a.href,
+                    className: "flex min-h-11 items-center px-4 py-2.5 typo-body-sm text-[var(--Text-High-Emphasis)] hover:bg-[var(--Surface-Secondary)] transition-colors",
+                    children: a.label
+                  },
+                  a.label
+                )) })
+              ]
+            },
+            e.key
+          );
+        })
+      }
+    ),
+    f && /* @__PURE__ */ s("div", { className: "fixed inset-0 z-[var(--Z-Overlay)] @md:hidden", children: [
+      /* @__PURE__ */ r(
+        "div",
+        {
+          className: "absolute inset-0 bg-[var(--Primitive-Black-alpha-1000)]/40",
+          onClick: () => h?.(!1)
+        }
+      ),
+      /* @__PURE__ */ s(
+        "nav",
+        {
+          "aria-label": d,
+          className: "absolute left-0 top-0 h-full w-[280px] bg-[var(--Surface-Primary)] shadow-lg overflow-y-auto dark:bg-[var(--Primitive-Gray-900)]",
+          children: [
+            /* @__PURE__ */ s("div", { className: "flex items-center justify-between px-4 py-3", children: [
+              /* @__PURE__ */ r("span", { className: "typo-label-md text-[var(--Text-High-Emphasis)]", children: p }),
+              /* @__PURE__ */ r(
+                "button",
+                {
+                  onClick: () => h?.(!1),
+                  className: "flex size-10 shrink-0 items-center justify-center rounded-full text-[var(--Text-Low-Emphasis)] transition-colors hover:bg-[var(--Surface-Tertiary)] hover:text-[var(--Text-High-Emphasis)] focus-visible:ring-2 focus-visible:ring-[var(--Focus-High-Emphasis)] focus-visible:outline-hidden",
+                  "aria-label": "閉じる",
+                  children: /* @__PURE__ */ r(g, { className: "size-5" })
+                }
+              )
+            ] }),
+            n.map((e) => {
+              const t = o === e.key, l = !!e.subMenus && e.subMenus.length > 0;
+              return /* @__PURE__ */ s("div", { children: [
+                (() => {
+                  const a = m(
+                    "flex w-full items-center gap-3 px-4 py-3 transition-colors",
+                    t ? "text-[var(--Text-Accent-Primary)] bg-[var(--Surface-Accent-Primary-Light)]" : "text-[var(--Text-High-Emphasis)] hover:bg-[var(--Surface-Secondary)]"
+                  ), i = /* @__PURE__ */ s(c, { children: [
+                    v(e.icon, { active: t, placement: "drawer" }),
+                    /* @__PURE__ */ r("span", { className: "typo-label-md", children: e.label }),
+                    l && /* @__PURE__ */ r(y, { size: 16, className: "ml-auto text-[var(--Text-Low-Emphasis)]" })
+                  ] });
+                  return e.href ? /* @__PURE__ */ r(
+                    "a",
+                    {
+                      href: e.href,
+                      className: a,
+                      "aria-current": t ? "page" : void 0,
+                      children: i
+                    }
+                  ) : /* @__PURE__ */ r("button", { type: "button", className: a, children: i });
+                })(),
+                l && /* @__PURE__ */ r("div", { className: "bg-[var(--Surface-Secondary)] dark:bg-[var(--Primitive-Gray-900)]", children: e.subMenus.map((a) => /* @__PURE__ */ r(
+                  "a",
+                  {
+                    href: a.href,
+                    className: "flex min-h-11 items-center px-12 py-2.5 typo-body-md text-[var(--Text-Medium-Emphasis)] hover:text-[var(--Text-High-Emphasis)]",
+                    children: a.label
+                  },
+                  a.label
+                )) })
+              ] }, e.key);
+            })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  M as AdminSideNav
+};