@cakejp/design-system 0.20.1 → 0.21.0

package/dist/components/foundations/menubar.js

@@ -1,9 +1,10 @@
-import { jsx as a, jsxs as d } from "react/jsx-runtime";
+import { jsx as a, jsxs as i } from "react/jsx-runtime";
 import "react";
-import { CheckIcon as u, CircleIcon as c, ChevronRightIcon as l } from "lucide-react";
+import { CheckIcon as c, CircleIcon as l, ChevronRightIcon as m } from "lucide-react";
 import { Menubar as n } from "radix-ui";
-import { cn as o } from "../../lib/utils.js";
-function x({
+import { cn as r } from "../../lib/utils.js";
+import { FORCED_COLORS_MENU_ITEM as d } from "../../lib/focus-ring.js";
+function M({
   className: e,
   ...t
 }) {
@@ -11,7 +12,7 @@ function x({
     n.Root,
     {
       "data-slot": "menubar",
-      className: o(
+      className: r(
         "flex h-9 items-center gap-1 rounded-md border border-[var(--Border-Medium-Emphasis)] bg-background p-1 shadow-xs",
         e
       ),
@@ -19,27 +20,27 @@ function x({
     }
   );
 }
-function h({
+function y({
   ...e
 }) {
   return /* @__PURE__ */ a(n.Menu, { "data-slot": "menubar-menu", ...e });
 }
-function y({
+function N({
   ...e
 }) {
   return /* @__PURE__ */ a(n.Group, { "data-slot": "menubar-group", ...e });
 }
-function m({
+function b({
   ...e
 }) {
   return /* @__PURE__ */ a(n.Portal, { "data-slot": "menubar-portal", ...e });
 }
-function M({
+function z({
   ...e
 }) {
   return /* @__PURE__ */ a(n.RadioGroup, { "data-slot": "menubar-radio-group", ...e });
 }
-function z({
+function I({
   className: e,
   ...t
 }) {
@@ -47,40 +48,41 @@ function z({
     n.Trigger,
     {
       "data-slot": "menubar-trigger",
-      className: o(
-        "flex items-center rounded-sm px-2 py-1 typo-label-md outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      className: r(
+        "flex items-center rounded-sm px-2 py-1 typo-label-md outline-none select-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+        d,
         e
       ),
       ...t
     }
   );
 }
-function N({
+function _({
   className: e,
   align: t = "start",
-  alignOffset: r = -4,
+  alignOffset: o = -4,
   sideOffset: s = 8,
-  ...i
+  ...u
 }) {
-  return /* @__PURE__ */ a(m, { children: /* @__PURE__ */ a(
+  return /* @__PURE__ */ a(b, { children: /* @__PURE__ */ a(
     n.Content,
     {
       "data-slot": "menubar-content",
       align: t,
-      alignOffset: r,
+      alignOffset: o,
       sideOffset: s,
-      className: o(
-        "z-[var(--Z-Popover)] min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border border-[var(--Border-Medium-Emphasis)] bg-popover p-1 text-popover-foreground shadow-md 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]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+      className: r(
+        "z-[var(--Z-Popover)] min-w-[12rem] max-w-(--radix-menubar-content-available-width) origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border border-[var(--Border-Medium-Emphasis)] bg-popover p-1 text-popover-foreground shadow-md 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]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         e
       ),
-      ...i
+      ...u
     }
   ) });
 }
-function I({
+function w({
   className: e,
   inset: t,
-  variant: r = "default",
+  variant: o = "default",
   ...s
 }) {
   return /* @__PURE__ */ a(
@@ -88,78 +90,81 @@ function I({
     {
       "data-slot": "menubar-item",
       "data-inset": t,
-      "data-variant": r,
-      className: o(
-        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 typo-body-md outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
+      "data-variant": o,
+      className: r(
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 typo-body-md outline-none select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
+        d,
         e
       ),
       ...s
     }
   );
 }
-function _({
+function C({
   className: e,
   children: t,
-  checked: r,
+  checked: o,
   ...s
 }) {
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ i(
     n.CheckboxItem,
     {
       "data-slot": "menubar-checkbox-item",
-      className: o(
-        "relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 typo-body-md outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+      className: r(
+        "relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 typo-body-md outline-none select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        d,
         e
       ),
-      checked: r,
+      checked: o,
       ...s,
       children: [
-        /* @__PURE__ */ a("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ a(n.ItemIndicator, { children: /* @__PURE__ */ a(u, { className: "size-4" }) }) }),
+        /* @__PURE__ */ a("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ a(n.ItemIndicator, { children: /* @__PURE__ */ a(c, { className: "size-4" }) }) }),
         t
       ]
     }
   );
 }
-function k({
+function S({
   className: e,
   children: t,
-  ...r
+  ...o
 }) {
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ i(
     n.RadioItem,
     {
       "data-slot": "menubar-radio-item",
-      className: o(
-        "relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 typo-body-md outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+      className: r(
+        "relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 typo-body-md outline-none select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        d,
         e
       ),
-      ...r,
+      ...o,
       children: [
-        /* @__PURE__ */ a("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ a(n.ItemIndicator, { children: /* @__PURE__ */ a(c, { className: "size-2 fill-current" }) }) }),
+        /* @__PURE__ */ a("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ a(n.ItemIndicator, { children: /* @__PURE__ */ a(l, { className: "size-2 fill-current" }) }) }),
         t
       ]
     }
   );
 }
-function C({
+function k({
   className: e,
   inset: t,
-  ...r
+  ...o
 }) {
   return /* @__PURE__ */ a(
     n.Label,
     {
       "data-slot": "menubar-label",
       "data-inset": t,
-      className: o(
+      className: r(
         "px-2 py-1.5 typo-label-md data-[inset]:pl-8",
         e
       ),
-      ...r
+      ...o
     }
   );
 }
-function S({
+function R({
   className: e,
   ...t
 }) {
@@ -167,12 +172,12 @@ function S({
     n.Separator,
     {
       "data-slot": "menubar-separator",
-      className: o("-mx-1 my-1 h-px bg-border", e),
+      className: r("-mx-1 my-1 h-px bg-border", e),
       ...t
     }
   );
 }
-function w({
+function E({
   className: e,
   ...t
 }) {
@@ -180,7 +185,7 @@ function w({
     "span",
     {
       "data-slot": "menubar-shortcut",
-      className: o(
+      className: r(
         "ml-auto typo-body-xs text-muted-foreground",
         e
       ),
@@ -188,7 +193,7 @@ function w({
     }
   );
 }
-function R({
+function T({
   ...e
 }) {
   return /* @__PURE__ */ a(n.Sub, { "data-slot": "menubar-sub", ...e });
@@ -196,22 +201,23 @@ function R({
 function j({
   className: e,
   inset: t,
-  children: r,
+  children: o,
   ...s
 }) {
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ i(
     n.SubTrigger,
     {
       "data-slot": "menubar-sub-trigger",
       "data-inset": t,
-      className: o(
+      className: r(
         "flex cursor-default items-center rounded-sm px-2 py-1.5 typo-body-md outline-none select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+        d,
         e
       ),
       ...s,
       children: [
-        r,
-        /* @__PURE__ */ a(l, { className: "ml-auto h-4 w-4" })
+        o,
+        /* @__PURE__ */ a(m, { className: "ml-auto h-4 w-4" })
       ]
     }
   );
@@ -224,8 +230,8 @@ function G({
     n.SubContent,
     {
       "data-slot": "menubar-sub-content",
-      className: o(
-        "z-[var(--Z-Popover)] min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border border-[var(--Border-Medium-Emphasis)] bg-popover p-1 text-popover-foreground shadow-lg 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 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+      className: r(
+        "z-[var(--Z-Popover)] min-w-[8rem] max-w-(--radix-menubar-content-available-width) origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border border-[var(--Border-Medium-Emphasis)] bg-popover p-1 text-popover-foreground shadow-lg 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 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         e
       ),
       ...t
@@ -233,20 +239,20 @@ function G({
   );
 }
 export {
-  x as Menubar,
-  _ as MenubarCheckboxItem,
-  N as MenubarContent,
-  y as MenubarGroup,
-  I as MenubarItem,
-  C as MenubarLabel,
-  h as MenubarMenu,
-  m as MenubarPortal,
-  M as MenubarRadioGroup,
-  k as MenubarRadioItem,
-  S as MenubarSeparator,
-  w as MenubarShortcut,
-  R as MenubarSub,
+  M as Menubar,
+  C as MenubarCheckboxItem,
+  _ as MenubarContent,
+  N as MenubarGroup,
+  w as MenubarItem,
+  k as MenubarLabel,
+  y as MenubarMenu,
+  b as MenubarPortal,
+  z as MenubarRadioGroup,
+  S as MenubarRadioItem,
+  R as MenubarSeparator,
+  E as MenubarShortcut,
+  T as MenubarSub,
   G as MenubarSubContent,
   j as MenubarSubTrigger,
-  z as MenubarTrigger
+  I as MenubarTrigger
 };

package/dist/components/foundations/navigation-menu.js

@@ -1,14 +1,15 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
 import "react";
 import { cva as u } from "class-variance-authority";
-import { ChevronDownIcon as s } from "lucide-react";
+import { ChevronDownIcon as l } from "lucide-react";
 import { NavigationMenu as n } from "radix-ui";
 import { cn as o } from "../../lib/utils.js";
-function b({
+import { FORCED_COLORS_FOCUS as d } from "../../lib/focus-ring.js";
+function h({
   className: t,
   children: a,
   viewport: i = !0,
-  ...d
+  ...s
 }) {
   return /* @__PURE__ */ r(
     n.Root,
@@ -19,15 +20,15 @@ function b({
         "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
         t
       ),
-      ...d,
+      ...s,
       children: [
         a,
-        i && /* @__PURE__ */ e(g, {})
+        i && /* @__PURE__ */ e(m, {})
       ]
     }
   );
 }
-function x({
+function N({
   className: t,
   ...a
 }) {
@@ -43,7 +44,7 @@ function x({
     }
   );
 }
-function h({
+function M({
   className: t,
   ...a
 }) {
@@ -56,10 +57,13 @@ function h({
     }
   );
 }
-const l = u(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 typo-label-md text-foreground transition-[color,box-shadow] outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-accent/50 data-[state=open]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent"
+const g = u(
+  [
+    "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 typo-label-md text-foreground transition-[color,box-shadow] outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-[color:var(--Focus-Ring-Control,color-mix(in_oklab,var(--ring)_50%,transparent))] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-accent/50 data-[state=open]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent",
+    d
+  ]
 );
-function N({
+function y({
   className: t,
   children: a,
   ...i
@@ -68,13 +72,13 @@ function N({
     n.Trigger,
     {
       "data-slot": "navigation-menu-trigger",
-      className: o(l(), "group", t),
+      className: o(g(), "group", t),
       ...i,
       children: [
         a,
         " ",
         /* @__PURE__ */ e(
-          s,
+          l,
           {
             className: "relative top-[1px] ml-1 size-3 transition duration-[var(--Motion-Duration-Slow)] group-data-[state=open]:rotate-180",
             "aria-hidden": "true"
@@ -84,7 +88,7 @@ function N({
     }
   );
 }
-function M({
+function z({
   className: t,
   ...a
 }) {
@@ -101,7 +105,7 @@ function M({
     }
   );
 }
-function g({
+function m({
   className: t,
   ...a
 }) {
@@ -125,7 +129,7 @@ function g({
     }
   );
 }
-function y({
+function k({
   className: t,
   ...a
 }) {
@@ -134,14 +138,15 @@ function y({
     {
       "data-slot": "navigation-menu-link",
       className: o(
-        "flex flex-col gap-1 rounded-sm p-2 typo-body-md transition-all outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground data-[active=true]:hover:bg-accent data-[active=true]:focus:bg-accent [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        "flex flex-col gap-1 rounded-sm p-2 typo-body-md transition-all outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-[color:var(--Focus-Ring-Control,color-mix(in_oklab,var(--ring)_50%,transparent))] focus-visible:outline-1 data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground data-[active=true]:hover:bg-accent data-[active=true]:focus:bg-accent [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        d,
         t
       ),
       ...a
     }
   );
 }
-function z({
+function C({
   className: t,
   ...a
 }) {
@@ -159,13 +164,13 @@ function z({
   );
 }
 export {
-  b as NavigationMenu,
-  M as NavigationMenuContent,
-  z as NavigationMenuIndicator,
-  h as NavigationMenuItem,
-  y as NavigationMenuLink,
-  x as NavigationMenuList,
-  N as NavigationMenuTrigger,
-  g as NavigationMenuViewport,
-  l as navigationMenuTriggerStyle
+  h as NavigationMenu,
+  z as NavigationMenuContent,
+  C as NavigationMenuIndicator,
+  M as NavigationMenuItem,
+  k as NavigationMenuLink,
+  N as NavigationMenuList,
+  y as NavigationMenuTrigger,
+  m as NavigationMenuViewport,
+  g as navigationMenuTriggerStyle
 };

package/dist/components/foundations/pagination.js

@@ -1,74 +1,78 @@
 import { jsx as i, jsxs as e } from "react/jsx-runtime";
 import "react";
-import { MoreHorizontalIcon as c, ChevronRightIcon as p, ChevronLeftIcon as u } from "lucide-react";
+import { MoreHorizontalIcon as c, ChevronRightIcon as m, ChevronLeftIcon as u } from "lucide-react";
 import { cn as t } from "../../lib/utils.js";
-import { resolveLinkComponent as f } from "../../lib/link-component.js";
-import { buttonVariants as d } from "./button.js";
-function v({ className: n, ...a }) {
+import { buttonVariants as p } from "./button.js";
+function P({ className: a, ...n }) {
   return /* @__PURE__ */ i(
     "nav",
     {
       role: "navigation",
       "aria-label": "pagination",
       "data-slot": "pagination",
-      className: t("mx-auto flex w-full justify-center", n),
-      ...a
+      className: t("mx-auto flex w-full justify-center", a),
+      ...n
     }
   );
 }
-function b({
-  className: n,
-  ...a
+function k({
+  className: a,
+  ...n
 }) {
   return /* @__PURE__ */ i(
     "ul",
     {
       "data-slot": "pagination-content",
-      className: t("flex flex-row flex-wrap items-center justify-center gap-0.5 sm:gap-1", n),
-      ...a
+      className: t("flex flex-row flex-wrap items-center justify-center gap-0.5 sm:gap-1", a),
+      ...n
     }
   );
 }
-function j({ ...n }) {
-  return /* @__PURE__ */ i("li", { "data-slot": "pagination-item", ...n });
+function b({ ...a }) {
+  return /* @__PURE__ */ i("li", { "data-slot": "pagination-item", ...a });
 }
-function o({
-  className: n,
-  isActive: a,
-  size: r = "icon",
+function r({
+  className: a,
+  isActive: n,
+  size: o = "icon",
   linkComponent: s,
   ...l
 }) {
-  const m = f(s);
   return /* @__PURE__ */ i(
-    m,
+    s ?? "a",
     {
-      "aria-current": a ? "page" : void 0,
+      "aria-current": n ? "page" : void 0,
       "data-slot": "pagination-link",
-      "data-active": a,
+      "data-active": n,
       className: t(
-        d({
-          variant: a ? "secondary" : "ghost",
-          size: r
+        p({
+          variant: n ? "secondary" : "ghost",
+          size: o
         }),
         "min-h-9 min-w-9 sm:min-h-10 sm:min-w-10",
-        n
+        // ページ番号（size="icon"）は size-9 の固定幅で、桁が多いと文字が枠からはみ出していた
+        // （5 桁で中身 43px > 枠 40px、SP の 36px では 4 桁から）。幅を auto にして中身が
+        // 最小幅より広いときだけ横に伸ばす。3 桁以下は min-w の正方形（36 / 40px）のまま（実測で差なし）、
+        // 4 桁以上は文字幅に合わせて広がる（幅はフォント次第）。
+        // min-w-fit は tailwind-merge が上の min-w-9 / sm:min-w-10 を消すため使わない。
+        o === "icon" && "w-auto",
+        a
       ),
       ...l
     }
   );
 }
-function w({
-  className: n,
-  ...a
+function v({
+  className: a,
+  ...n
 }) {
   return /* @__PURE__ */ e(
-    o,
+    r,
     {
       "aria-label": "前のページへ",
       size: "default",
-      className: t("gap-1 px-2.5 sm:pl-2.5", n),
-      ...a,
+      className: t("gap-1 px-2.5 sm:pl-2.5", a),
+      ...n,
       children: [
         /* @__PURE__ */ i(u, {}),
         /* @__PURE__ */ i("span", { className: "hidden sm:block", children: "前へ" })
@@ -76,35 +80,35 @@ function w({
     }
   );
 }
-function y({
-  className: n,
-  ...a
+function w({
+  className: a,
+  ...n
 }) {
   return /* @__PURE__ */ e(
-    o,
+    r,
     {
       "aria-label": "次のページへ",
       size: "default",
-      className: t("gap-1 px-2.5 sm:pr-2.5", n),
-      ...a,
+      className: t("gap-1 px-2.5 sm:pr-2.5", a),
+      ...n,
       children: [
         /* @__PURE__ */ i("span", { className: "hidden sm:block", children: "次へ" }),
-        /* @__PURE__ */ i(p, {})
+        /* @__PURE__ */ i(m, {})
       ]
     }
   );
 }
-function z({
-  className: n,
-  ...a
+function j({
+  className: a,
+  ...n
 }) {
   return /* @__PURE__ */ e(
     "span",
     {
       "aria-hidden": !0,
       "data-slot": "pagination-ellipsis",
-      className: t("flex size-10 shrink-0 items-center justify-center text-muted-foreground", n),
-      ...a,
+      className: t("flex size-10 shrink-0 items-center justify-center text-muted-foreground", a),
+      ...n,
       children: [
         /* @__PURE__ */ i(c, { className: "size-4" }),
         /* @__PURE__ */ i("span", { className: "sr-only", children: "その他のページ" })
@@ -113,11 +117,11 @@ function z({
   );
 }
 export {
-  v as Pagination,
-  b as PaginationContent,
-  z as PaginationEllipsis,
-  j as PaginationItem,
-  o as PaginationLink,
-  y as PaginationNext,
-  w as PaginationPrevious
+  P as Pagination,
+  k as PaginationContent,
+  j as PaginationEllipsis,
+  b as PaginationItem,
+  r as PaginationLink,
+  w as PaginationNext,
+  v as PaginationPrevious
 };