@open-mercato/ui 0.6.4-develop.4178.1.aad9ddaa95 → 0.6.4-develop.4210.1.d412061cfe

package/dist/primitives/notification-feed.js

@@ -0,0 +1,213 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "@open-mercato/shared/lib/utils";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+const NotificationFeed = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    "data-slot": "notification-feed",
+    className: cn(
+      "flex w-full flex-col overflow-hidden rounded-xl border border-input bg-background shadow-lg",
+      className
+    ),
+    ...props
+  }
+));
+NotificationFeed.displayName = "NotificationFeed";
+const NotificationFeedHeader = React.forwardRef(
+  ({ className, title, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-slot": "notification-feed-header",
+      className: cn(
+        "flex items-center justify-between gap-3 border-b border-input px-4 py-3",
+        className
+      ),
+      ...props,
+      children: [
+        title ? /* @__PURE__ */ jsx(
+          "h3",
+          {
+            "data-slot": "notification-feed-header-title",
+            className: "text-base font-semibold text-foreground",
+            children: title
+          }
+        ) : null,
+        children ? /* @__PURE__ */ jsx("div", { "data-slot": "notification-feed-header-actions", className: "inline-flex items-center gap-1", children }) : null
+      ]
+    }
+  )
+);
+NotificationFeedHeader.displayName = "NotificationFeedHeader";
+const NotificationFeedList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "ol",
+  {
+    ref,
+    "data-slot": "notification-feed-list",
+    className: cn("flex flex-col divide-y divide-input", className),
+    ...props
+  }
+));
+NotificationFeedList.displayName = "NotificationFeedList";
+const NotificationFeedItem = React.forwardRef(
+  ({
+    className,
+    icon,
+    title,
+    body,
+    timestamp,
+    unread = false,
+    actions,
+    onClick,
+    clickAriaLabel,
+    children,
+    ...props
+  }, ref) => {
+    const t = useT();
+    const interactive = typeof onClick === "function";
+    return /* @__PURE__ */ jsxs(
+      "li",
+      {
+        ref,
+        "data-slot": "notification-feed-item",
+        "data-unread": unread || void 0,
+        className: cn(
+          "group flex items-start gap-3 px-4 py-3",
+          interactive ? "cursor-pointer hover:bg-muted/40 focus-within:bg-muted/40" : "",
+          className
+        ),
+        onClick,
+        role: interactive ? "button" : void 0,
+        tabIndex: interactive ? 0 : void 0,
+        "aria-label": interactive ? clickAriaLabel ?? (typeof title === "string" ? title : t("ui.notificationFeed.item.openAriaLabel", "Open notification")) : void 0,
+        onKeyDown: interactive ? (event) => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            onClick?.();
+          }
+        } : void 0,
+        ...props,
+        children: [
+          icon ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-slot": "notification-feed-item-icon",
+              className: "inline-flex shrink-0 items-center justify-center",
+              children: icon
+            }
+          ) : null,
+          /* @__PURE__ */ jsxs("div", { "data-slot": "notification-feed-item-body", className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                "data-slot": "notification-feed-item-title",
+                className: "flex items-center gap-2 text-sm font-semibold text-foreground",
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "truncate", children: title }),
+                  unread ? /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      "data-slot": "notification-feed-item-unread-dot",
+                      "aria-hidden": "true",
+                      className: "inline-block size-2 shrink-0 rounded-full bg-accent-indigo"
+                    }
+                  ) : null
+                ]
+              }
+            ),
+            body ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                "data-slot": "notification-feed-item-text",
+                className: "text-sm leading-5 text-muted-foreground",
+                children: body
+              }
+            ) : null,
+            timestamp ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                "data-slot": "notification-feed-item-timestamp",
+                className: "text-xs leading-4 text-muted-foreground",
+                children: timestamp
+              }
+            ) : null,
+            children ? /* @__PURE__ */ jsx("div", { "data-slot": "notification-feed-item-children", className: "mt-2 flex flex-wrap gap-2", children }) : null
+          ] }),
+          actions ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "notification-feed-item-actions",
+              className: "ml-auto inline-flex shrink-0 items-start opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100",
+              onClick: (event) => event.stopPropagation(),
+              children: actions
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+NotificationFeedItem.displayName = "NotificationFeedItem";
+const NotificationFeedFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    "data-slot": "notification-feed-footer",
+    className: cn(
+      "flex items-center justify-between gap-3 border-t border-input px-4 py-3",
+      className
+    ),
+    ...props
+  }
+));
+NotificationFeedFooter.displayName = "NotificationFeedFooter";
+const ICON_TONE_MAP = {
+  // Tints + matching icon color per Figma `Notifications Items [1.1]`
+  // assembled examples. Surface is a soft `tone/10` background; icon
+  // carries the semantic color directly.
+  indigo: "bg-accent-indigo/10 text-accent-indigo",
+  success: "bg-status-success-icon/10 text-status-success-icon",
+  warning: "bg-status-warning-icon/10 text-status-warning-icon",
+  error: "bg-status-error-icon/10 text-status-error-icon",
+  info: "bg-status-info-icon/10 text-status-info-icon",
+  brand: "bg-brand-violet/10 text-brand-violet",
+  neutral: "bg-muted text-muted-foreground"
+};
+const iconBadgeVariants = cva(
+  "inline-flex shrink-0 items-center justify-center rounded-full",
+  {
+    variants: {
+      tone: ICON_TONE_MAP,
+      size: {
+        sm: "size-8",
+        default: "size-10"
+      }
+    },
+    defaultVariants: { tone: "indigo", size: "default" }
+  }
+);
+const NotificationFeedIconBadge = React.forwardRef(({ className, tone, size, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    ref,
+    "data-slot": "notification-feed-icon-badge",
+    "data-tone": tone ?? "indigo",
+    className: cn(iconBadgeVariants({ tone, size }), className),
+    ...props,
+    children
+  }
+));
+NotificationFeedIconBadge.displayName = "NotificationFeedIconBadge";
+export {
+  NotificationFeed,
+  NotificationFeedFooter,
+  NotificationFeedHeader,
+  NotificationFeedIconBadge,
+  NotificationFeedItem,
+  NotificationFeedList
+};
+//# sourceMappingURL=notification-feed.js.map

package/dist/primitives/notification-feed.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives/notification-feed.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\n\n/**\n * Bell-icon inbox / notification list \u2014 the panel that opens when the\n * user clicks the bell affordance in the app shell. Distinct from\n * `Notification` (single toast in the top-right stack) and from\n * `ActivityFeed` (chronological audit log scoped to one entity).\n *\n * Compound API:\n *\n *   <NotificationFeed>             \u2014 root container card (rounded,\n *                                    bg-background, overflow-hidden).\n *   <NotificationFeedHeader>       \u2014 top row: title + actions slot\n *                                    (settings cog, \"Mark all as read\"\n *                                    link, etc.). Bordered bottom.\n *   <NotificationFeedList>         \u2014 `<ol>` list, `divide-y` so items\n *                                    auto-separate.\n *   <NotificationFeedItem>         \u2014 single notification entry. Slots:\n *                                     `icon`       \u2014 left, typically a\n *                                                    `NotificationFeedIconBadge`,\n *                                     `title`      \u2014 bold headline,\n *                                     `body`       \u2014 muted description,\n *                                     `timestamp`  \u2014 smaller muted suffix,\n *                                     `actions`    \u2014 right slot\n *                                                    (kebab IconButton),\n *                                     `children`   \u2014 optional indented\n *                                                    content (inline\n *                                                    action buttons,\n *                                                    file chip, reply).\n *                                    `unread` toggles a small dot near\n *                                    the title. `onClick` turns the\n *                                    whole row into a clickable\n *                                    affordance.\n *   <NotificationFeedFooter>       \u2014 bottom row. Bordered top. Typical\n *                                    content: a full-width Archive All\n *                                    button OR keyboard-hint + settings\n *                                    link (matches the two Figma\n *                                    `Notifications Footer [1.1]` /\n *                                    block-example variants).\n *   <NotificationFeedIconBadge>    \u2014 helper: `size-10 rounded-full\n *                                    bg-{tone}/10 text-{tone}` badge\n *                                    matching the Figma assembled\n *                                    example icon style.\n *\n * Figma source: DS Open Mercato `Notifications` page (`4096:21398`) \u2014\n * `Notifications Items [1.1]` (`4308:731`, 8 variants \u2014 4 designs\n * \u00D7 2 states: default + hover/selected), `Notifications Header [1.1]`\n * (`4308:1004`), `Notifications Footer [1.1]` (`4308:5526`),\n * `Notifications Tab Menu [1.1]` (`4349:46656`); assembled examples\n * `166926:7047`, `166926:7088`, `166926:7114`, `166926:7138`.\n *\n * ```tsx\n * <NotificationFeed>\n *   <NotificationFeedHeader title=\"Notifications\">\n *     <IconButton size=\"sm\" variant=\"ghost\" aria-label=\"Settings\">\n *       <Settings />\n *     </IconButton>\n *   </NotificationFeedHeader>\n *\n *   <NotificationFeedList>\n *     <NotificationFeedItem\n *       icon={\n *         <NotificationFeedIconBadge tone=\"indigo\">\n *           <UserPlus className=\"size-5\" />\n *         </NotificationFeedIconBadge>\n *       }\n *       title=\"New Lead Generated\"\n *       body=\"John Smith submitted web form\"\n *       timestamp=\"10 minutes ago\"\n *       unread\n *       onClick={() => router.push('/leads/123')}\n *     />\n *   </NotificationFeedList>\n *\n *   <NotificationFeedFooter>\n *     <Button variant=\"outline\" className=\"w-full\">Archive all</Button>\n *   </NotificationFeedFooter>\n * </NotificationFeed>\n * ```\n */\n\nconst NotificationFeed = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"notification-feed\"\n    className={cn(\n      'flex w-full flex-col overflow-hidden rounded-xl border border-input bg-background shadow-lg',\n      className,\n    )}\n    {...props}\n  />\n))\nNotificationFeed.displayName = 'NotificationFeed'\n\nexport type NotificationFeedHeaderProps = React.HTMLAttributes<HTMLDivElement> & {\n  /** Header title text. Renders as `<h3 className=\"text-base font-semibold\">`. */\n  title?: React.ReactNode\n}\n\nconst NotificationFeedHeader = React.forwardRef<HTMLDivElement, NotificationFeedHeaderProps>(\n  ({ className, title, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"notification-feed-header\"\n      className={cn(\n        'flex items-center justify-between gap-3 border-b border-input px-4 py-3',\n        className,\n      )}\n      {...props}\n    >\n      {title ? (\n        <h3\n          data-slot=\"notification-feed-header-title\"\n          className=\"text-base font-semibold text-foreground\"\n        >\n          {title}\n        </h3>\n      ) : null}\n      {children ? (\n        <div data-slot=\"notification-feed-header-actions\" className=\"inline-flex items-center gap-1\">\n          {children}\n        </div>\n      ) : null}\n    </div>\n  ),\n)\nNotificationFeedHeader.displayName = 'NotificationFeedHeader'\n\nconst NotificationFeedList = React.forwardRef<\n  HTMLOListElement,\n  React.HTMLAttributes<HTMLOListElement>\n>(({ className, ...props }, ref) => (\n  <ol\n    ref={ref}\n    data-slot=\"notification-feed-list\"\n    className={cn('flex flex-col divide-y divide-input', className)}\n    {...props}\n  />\n))\nNotificationFeedList.displayName = 'NotificationFeedList'\n\nexport type NotificationFeedItemProps = Omit<\n  React.HTMLAttributes<HTMLLIElement>,\n  'title' | 'onClick'\n> & {\n  /** Left slot \u2014 typically a `NotificationFeedIconBadge`. */\n  icon?: React.ReactNode\n  /** Bold headline. */\n  title: React.ReactNode\n  /** Optional muted body text under the title. */\n  body?: React.ReactNode\n  /** Optional smaller muted suffix under the body. */\n  timestamp?: React.ReactNode\n  /** Whether to render the unread indicator dot beside the title. */\n  unread?: boolean\n  /** Optional right-slot actions (e.g. kebab IconButton). Visible on\n   * hover / focus per Figma. Pass `IconButton variant=\"ghost\" size=\"sm\"`. */\n  actions?: React.ReactNode\n  /** Optional click handler. When provided the whole row becomes a\n   * clickable affordance (hover bg, focus ring). */\n  onClick?: () => void\n  /** Accessible label for the row when `onClick` is provided. Default:\n   * the `title` if it's a string, otherwise `'Open notification'`. */\n  clickAriaLabel?: string\n}\n\nconst NotificationFeedItem = React.forwardRef<HTMLLIElement, NotificationFeedItemProps>(\n  (\n    {\n      className,\n      icon,\n      title,\n      body,\n      timestamp,\n      unread = false,\n      actions,\n      onClick,\n      clickAriaLabel,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const t = useT()\n    const interactive = typeof onClick === 'function'\n    return (\n      <li\n        ref={ref}\n        data-slot=\"notification-feed-item\"\n        data-unread={unread || undefined}\n        className={cn(\n          'group flex items-start gap-3 px-4 py-3',\n          interactive ? 'cursor-pointer hover:bg-muted/40 focus-within:bg-muted/40' : '',\n          className,\n        )}\n        onClick={onClick}\n        role={interactive ? 'button' : undefined}\n        tabIndex={interactive ? 0 : undefined}\n        aria-label={\n          interactive\n            ? clickAriaLabel ??\n              (typeof title === 'string' ? title : t('ui.notificationFeed.item.openAriaLabel', 'Open notification'))\n            : undefined\n        }\n        onKeyDown={\n          interactive\n            ? (event) => {\n                if (event.key === 'Enter' || event.key === ' ') {\n                  event.preventDefault()\n                  onClick?.()\n                }\n              }\n            : undefined\n        }\n        {...props}\n      >\n        {icon ? (\n          <span\n            data-slot=\"notification-feed-item-icon\"\n            className=\"inline-flex shrink-0 items-center justify-center\"\n          >\n            {icon}\n          </span>\n        ) : null}\n\n        <div data-slot=\"notification-feed-item-body\" className=\"flex min-w-0 flex-1 flex-col gap-1\">\n          <div\n            data-slot=\"notification-feed-item-title\"\n            className=\"flex items-center gap-2 text-sm font-semibold text-foreground\"\n          >\n            <span className=\"truncate\">{title}</span>\n            {unread ? (\n              <span\n                data-slot=\"notification-feed-item-unread-dot\"\n                aria-hidden=\"true\"\n                className=\"inline-block size-2 shrink-0 rounded-full bg-accent-indigo\"\n              />\n            ) : null}\n          </div>\n          {body ? (\n            <div\n              data-slot=\"notification-feed-item-text\"\n              className=\"text-sm leading-5 text-muted-foreground\"\n            >\n              {body}\n            </div>\n          ) : null}\n          {timestamp ? (\n            <div\n              data-slot=\"notification-feed-item-timestamp\"\n              className=\"text-xs leading-4 text-muted-foreground\"\n            >\n              {timestamp}\n            </div>\n          ) : null}\n          {children ? (\n            <div data-slot=\"notification-feed-item-children\" className=\"mt-2 flex flex-wrap gap-2\">\n              {children}\n            </div>\n          ) : null}\n        </div>\n\n        {actions ? (\n          <div\n            data-slot=\"notification-feed-item-actions\"\n            className=\"ml-auto inline-flex shrink-0 items-start opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100\"\n            onClick={(event) => event.stopPropagation()}\n          >\n            {actions}\n          </div>\n        ) : null}\n      </li>\n    )\n  },\n)\nNotificationFeedItem.displayName = 'NotificationFeedItem'\n\nconst NotificationFeedFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"notification-feed-footer\"\n    className={cn(\n      'flex items-center justify-between gap-3 border-t border-input px-4 py-3',\n      className,\n    )}\n    {...props}\n  />\n))\nNotificationFeedFooter.displayName = 'NotificationFeedFooter'\n\nconst ICON_TONE_MAP = {\n  // Tints + matching icon color per Figma `Notifications Items [1.1]`\n  // assembled examples. Surface is a soft `tone/10` background; icon\n  // carries the semantic color directly.\n  indigo: 'bg-accent-indigo/10 text-accent-indigo',\n  success: 'bg-status-success-icon/10 text-status-success-icon',\n  warning: 'bg-status-warning-icon/10 text-status-warning-icon',\n  error: 'bg-status-error-icon/10 text-status-error-icon',\n  info: 'bg-status-info-icon/10 text-status-info-icon',\n  brand: 'bg-brand-violet/10 text-brand-violet',\n  neutral: 'bg-muted text-muted-foreground',\n} as const\n\nconst iconBadgeVariants = cva(\n  'inline-flex shrink-0 items-center justify-center rounded-full',\n  {\n    variants: {\n      tone: ICON_TONE_MAP,\n      size: {\n        sm: 'size-8',\n        default: 'size-10',\n      },\n    },\n    defaultVariants: { tone: 'indigo', size: 'default' },\n  },\n)\n\nexport type NotificationFeedIconBadgeProps = React.HTMLAttributes<HTMLSpanElement> &\n  VariantProps<typeof iconBadgeVariants>\n\nconst NotificationFeedIconBadge = React.forwardRef<\n  HTMLSpanElement,\n  NotificationFeedIconBadgeProps\n>(({ className, tone, size, children, ...props }, ref) => (\n  <span\n    ref={ref}\n    data-slot=\"notification-feed-icon-badge\"\n    data-tone={tone ?? 'indigo'}\n    className={cn(iconBadgeVariants({ tone, size }), className)}\n    {...props}\n  >\n    {children}\n  </span>\n))\nNotificationFeedIconBadge.displayName = 'NotificationFeedIconBadge'\n\nexport type NotificationFeedIconBadgeTone = keyof typeof ICON_TONE_MAP\n\nexport {\n  NotificationFeed,\n  NotificationFeedHeader,\n  NotificationFeedList,\n  NotificationFeedItem,\n  NotificationFeedFooter,\n  NotificationFeedIconBadge,\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/primitives/notification.js

@@ -20,8 +20,26 @@ const Notification = React.forwardRef(
     onDismiss,
     dismissAriaLabel,
     className,
-    id
+    id,
+    autoDismissMs,
+    pauseOnHover
   }, ref) => {
+    const shouldPauseOnHover = pauseOnHover ?? autoDismissMs !== void 0;
+    const [hovered, setHovered] = React.useState(false);
+    React.useEffect(() => {
+      if (autoDismissMs === void 0 || autoDismissMs <= 0) return;
+      if (shouldPauseOnHover && hovered) return;
+      const timer = window.setTimeout(() => {
+        onDismiss?.();
+      }, autoDismissMs);
+      return () => window.clearTimeout(timer);
+    }, [autoDismissMs, hovered, onDismiss, shouldPauseOnHover]);
+    const handleMouseEnter = React.useCallback(() => {
+      if (shouldPauseOnHover) setHovered(true);
+    }, [shouldPauseOnHover]);
+    const handleMouseLeave = React.useCallback(() => {
+      if (shouldPauseOnHover) setHovered(false);
+    }, [shouldPauseOnHover]);
     return /* @__PURE__ */ jsxs(
       Alert,
       {
@@ -36,12 +54,15 @@ const Notification = React.forwardRef(
         className,
         "data-slot": "notification",
         "data-notification-id": id,
+        "data-auto-dismiss-paused": autoDismissMs !== void 0 && shouldPauseOnHover && hovered ? "true" : void 0,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
         children: [
           (title || timestamp) && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
             title ? /* @__PURE__ */ jsx(AlertTitle, { className: "mb-0 flex-1 min-w-0", children: title }) : /* @__PURE__ */ jsx("span", { className: "flex-1" }),
             timestamp ? /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs leading-5 opacity-60", "data-slot": "notification-timestamp", children: timestamp }) : null
           ] }),
-          description ? /* @__PURE__ */ jsx(AlertDescription, { className: cn("opacity-72", title && "mt-1"), "data-slot": "notification-description", children: description }) : null,
+          description ? /* @__PURE__ */ jsx(AlertDescription, { className: cn("opacity-70", title && "mt-1"), "data-slot": "notification-description", children: description }) : null,
           actions ? /* @__PURE__ */ jsx(
             "div",
             {

package/dist/primitives/notification.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/primitives/notification.tsx"],
-  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n  type AlertStatus,\n  type AlertStyle,\n} from './alert'\n\nexport type NotificationProps = {\n  /**\n   * Notification status. Same five values as `Alert`.\n   * Default `'information'`.\n   */\n  status?: AlertStatus\n  /**\n   * Visual style. Same four values as `Alert`.\n   * Default `'light'`.\n   */\n  style?: AlertStyle\n  /**\n   * Avatar/icon override. If provided, replaces the per-status default\n   * Lucide icon \u2014 typical for user-driven notifications (\"John\n   * commented on...\" with the author avatar). Pass an `Avatar`\n   * primitive instance or any 20\u00D720 visual.\n   */\n  avatar?: React.ReactNode\n  /**\n   * Notification title. Rendered as `AlertTitle` (Label/Small,\n   * `font-medium 14/20`).\n   */\n  title?: React.ReactNode\n  /**\n   * Notification body. Rendered as `AlertDescription` at 72% opacity\n   * per Figma `170:1839` reference (Paragraph/Small, `font-regular\n   * 14/20`).\n   */\n  description?: React.ReactNode\n  /**\n   * Right-aligned timestamp hint next to the title (e.g. `\"2 min\n   * ago\"`). Pre-formatted by the caller \u2014 pass through\n   * `formatRelativeTime()` from `@open-mercato/shared/lib/time` for\n   * the standard look.\n   */\n  timestamp?: React.ReactNode\n  /**\n   * Action buttons / links rendered under the description. Pass a\n   * `<>...</>` fragment or an array of action elements. Separators\n   * are not auto-inserted \u2014 wrap your actions in a `<div>` with\n   * `gap-2` if you need custom spacing.\n   */\n  actions?: React.ReactNode\n  /** Render the trailing X close button. Defaults to `true` \u2014 Figma reference always shows it. */\n  dismissible?: boolean\n  onDismiss?: () => void\n  dismissAriaLabel?: string\n  className?: string\n  /** Stable id used by the `NotificationStack` (or external trackers) to identify the card. Forwarded as `data-notification-id`. */\n  id?: string\n}\n\n/**\n * Card composition over the `Alert` primitive matching the Figma\n * Notification reference (`170:1839` \u2014 Error/Light/Large). Renders a\n * status icon (or custom `avatar`), a title + timestamp row, an\n * `opacity-72` description, and an optional row of action links. Use\n * with `NotificationStack` for corner-floating manual-dismiss UX, or\n * standalone inside a panel / dialog content area.\n *\n * Notification is intentionally a thin wrapper \u2014 every visual token\n * comes from the `Alert` primitive so the look stays in sync with the\n * unified Alert / Notification / Toast design.\n */\nexport const Notification = React.forwardRef<HTMLDivElement, NotificationProps>(\n  (\n    {\n      status,\n      style,\n      avatar,\n      title,\n      description,\n      timestamp,\n      actions,\n      dismissible = true,\n      onDismiss,\n      dismissAriaLabel,\n      className,\n      id,\n    },\n    ref,\n  ) => {\n    return (\n      <Alert\n        ref={ref}\n        status={status}\n        style={style}\n        size=\"default\"\n        icon={avatar}\n        dismissible={dismissible}\n        onDismiss={onDismiss}\n        dismissAriaLabel={dismissAriaLabel}\n        className={className}\n        data-slot=\"notification\"\n        data-notification-id={id}\n      >\n        {(title || timestamp) && (\n          <div className=\"flex items-start gap-2\">\n            {title ? <AlertTitle className=\"mb-0 flex-1 min-w-0\">{title}</AlertTitle> : <span className=\"flex-1\" />}\n            {timestamp ? (\n              <span className=\"shrink-0 text-xs leading-5 opacity-60\" data-slot=\"notification-timestamp\">\n                {timestamp}\n              </span>\n            ) : null}\n          </div>\n        )}\n        {description ? (\n          <AlertDescription className={cn('opacity-72', title && 'mt-1')} data-slot=\"notification-description\">\n            {description}\n          </AlertDescription>\n        ) : null}\n        {actions ? (\n          <div\n            className={cn('flex flex-wrap items-center gap-2', (title || description) && 'mt-2.5')}\n            data-slot=\"notification-actions\"\n          >\n            {actions}\n          </div>\n        ) : null}\n      </Alert>\n    )\n  },\n)\nNotification.displayName = 'Notification'\n"],
-  "mappings": ";AA6GU,SACW,KADX;AA3GV,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAkEA,MAAM,eAAe,MAAM;AAAA,EAChC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,GACA,QACG;AACH,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAK;AAAA,QACL,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,aAAU;AAAA,QACV,wBAAsB;AAAA,QAEpB;AAAA,oBAAS,cACT,qBAAC,SAAI,WAAU,0BACZ;AAAA,oBAAQ,oBAAC,cAAW,WAAU,uBAAuB,iBAAM,IAAgB,oBAAC,UAAK,WAAU,UAAS;AAAA,YACpG,YACC,oBAAC,UAAK,WAAU,yCAAwC,aAAU,0BAC/D,qBACH,IACE;AAAA,aACN;AAAA,UAED,cACC,oBAAC,oBAAiB,WAAW,GAAG,cAAc,SAAS,MAAM,GAAG,aAAU,4BACvE,uBACH,IACE;AAAA,UACH,UACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,GAAG,sCAAsC,SAAS,gBAAgB,QAAQ;AAAA,cACrF,aAAU;AAAA,cAET;AAAA;AAAA,UACH,IACE;AAAA;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,aAAa,cAAc;",
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n  type AlertStatus,\n  type AlertStyle,\n} from './alert'\n\nexport type NotificationProps = {\n  /**\n   * Notification status. Same five values as `Alert`.\n   * Default `'information'`.\n   */\n  status?: AlertStatus\n  /**\n   * Visual style. Same four values as `Alert`.\n   * Default `'light'`.\n   */\n  style?: AlertStyle\n  /**\n   * Avatar/icon override. If provided, replaces the per-status default\n   * Lucide icon \u2014 typical for user-driven notifications (\"John\n   * commented on...\" with the author avatar). Pass an `Avatar`\n   * primitive instance or any 20\u00D720 visual.\n   */\n  avatar?: React.ReactNode\n  /**\n   * Notification title. Rendered as `AlertTitle` (Label/Small,\n   * `font-medium 14/20`).\n   */\n  title?: React.ReactNode\n  /**\n   * Notification body. Rendered as `AlertDescription` at 72% opacity\n   * per Figma `170:1839` reference (Paragraph/Small, `font-regular\n   * 14/20`).\n   */\n  description?: React.ReactNode\n  /**\n   * Right-aligned timestamp hint next to the title (e.g. `\"2 min\n   * ago\"`). Pre-formatted by the caller \u2014 pass through\n   * `formatRelativeTime()` from `@open-mercato/shared/lib/time` for\n   * the standard look.\n   */\n  timestamp?: React.ReactNode\n  /**\n   * Action buttons / links rendered under the description. Pass a\n   * `<>...</>` fragment or an array of action elements. Separators\n   * are not auto-inserted \u2014 wrap your actions in a `<div>` with\n   * `gap-2` if you need custom spacing.\n   */\n  actions?: React.ReactNode\n  /** Render the trailing X close button. Defaults to `true` \u2014 Figma reference always shows it. */\n  dismissible?: boolean\n  onDismiss?: () => void\n  dismissAriaLabel?: string\n  className?: string\n  /** Stable id used by the `NotificationStack` (or external trackers) to identify the card. Forwarded as `data-notification-id`. */\n  id?: string\n  /**\n   * Auto-dismiss the card after N milliseconds. When set, an internal\n   * timer fires `onDismiss` after the delay. Standard toast UX:\n   * 4000\u20136000 for success / info, 8000+ for warnings, no auto-dismiss\n   * for errors. Defaults to undefined (manual dismiss only).\n   */\n  autoDismissMs?: number\n  /**\n   * Pause the auto-dismiss timer while the user is hovering the card.\n   * Defaults to `true` whenever `autoDismissMs` is set \u2014 gives users\n   * time to read/click without the card disappearing under their\n   * cursor. Pass `false` to keep the timer running unconditionally.\n   */\n  pauseOnHover?: boolean\n}\n\n/**\n * Card composition over the `Alert` primitive matching the Figma\n * Notification reference (`170:1839` \u2014 Error/Light/Large). Renders a\n * status icon (or custom `avatar`), a title + timestamp row, an\n * `opacity-70` description, and an optional row of action links. Use\n * with `NotificationStack` for corner-floating manual-dismiss UX, or\n * standalone inside a panel / dialog content area.\n *\n * Notification is intentionally a thin wrapper \u2014 every visual token\n * comes from the `Alert` primitive so the look stays in sync with the\n * unified Alert / Notification / Toast design.\n */\nexport const Notification = React.forwardRef<HTMLDivElement, NotificationProps>(\n  (\n    {\n      status,\n      style,\n      avatar,\n      title,\n      description,\n      timestamp,\n      actions,\n      dismissible = true,\n      onDismiss,\n      dismissAriaLabel,\n      className,\n      id,\n      autoDismissMs,\n      pauseOnHover,\n    },\n    ref,\n  ) => {\n    const shouldPauseOnHover = pauseOnHover ?? autoDismissMs !== undefined\n    const [hovered, setHovered] = React.useState(false)\n\n    React.useEffect(() => {\n      if (autoDismissMs === undefined || autoDismissMs <= 0) return\n      if (shouldPauseOnHover && hovered) return\n      const timer = window.setTimeout(() => {\n        onDismiss?.()\n      }, autoDismissMs)\n      return () => window.clearTimeout(timer)\n    }, [autoDismissMs, hovered, onDismiss, shouldPauseOnHover])\n\n    const handleMouseEnter = React.useCallback(() => {\n      if (shouldPauseOnHover) setHovered(true)\n    }, [shouldPauseOnHover])\n    const handleMouseLeave = React.useCallback(() => {\n      if (shouldPauseOnHover) setHovered(false)\n    }, [shouldPauseOnHover])\n\n    return (\n      <Alert\n        ref={ref}\n        status={status}\n        style={style}\n        size=\"default\"\n        icon={avatar}\n        dismissible={dismissible}\n        onDismiss={onDismiss}\n        dismissAriaLabel={dismissAriaLabel}\n        className={className}\n        data-slot=\"notification\"\n        data-notification-id={id}\n        data-auto-dismiss-paused={\n          autoDismissMs !== undefined && shouldPauseOnHover && hovered ? 'true' : undefined\n        }\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n      >\n        {(title || timestamp) && (\n          <div className=\"flex items-start gap-2\">\n            {title ? <AlertTitle className=\"mb-0 flex-1 min-w-0\">{title}</AlertTitle> : <span className=\"flex-1\" />}\n            {timestamp ? (\n              <span className=\"shrink-0 text-xs leading-5 opacity-60\" data-slot=\"notification-timestamp\">\n                {timestamp}\n              </span>\n            ) : null}\n          </div>\n        )}\n        {description ? (\n          <AlertDescription className={cn('opacity-70', title && 'mt-1')} data-slot=\"notification-description\">\n            {description}\n          </AlertDescription>\n        ) : null}\n        {actions ? (\n          <div\n            className={cn('flex flex-wrap items-center gap-2', (title || description) && 'mt-2.5')}\n            data-slot=\"notification-actions\"\n          >\n            {actions}\n          </div>\n        ) : null}\n      </Alert>\n    )\n  },\n)\nNotification.displayName = 'Notification'\n"],
+  "mappings": ";AAqJU,SACW,KADX;AAnJV,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAgFA,MAAM,eAAe,MAAM;AAAA,EAChC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,GACA,QACG;AACH,UAAM,qBAAqB,gBAAgB,kBAAkB;AAC7D,UAAM,CAAC,SAAS,UAAU,IAAI,MAAM,SAAS,KAAK;AAElD,UAAM,UAAU,MAAM;AACpB,UAAI,kBAAkB,UAAa,iBAAiB,EAAG;AACvD,UAAI,sBAAsB,QAAS;AACnC,YAAM,QAAQ,OAAO,WAAW,MAAM;AACpC,oBAAY;AAAA,MACd,GAAG,aAAa;AAChB,aAAO,MAAM,OAAO,aAAa,KAAK;AAAA,IACxC,GAAG,CAAC,eAAe,SAAS,WAAW,kBAAkB,CAAC;AAE1D,UAAM,mBAAmB,MAAM,YAAY,MAAM;AAC/C,UAAI,mBAAoB,YAAW,IAAI;AAAA,IACzC,GAAG,CAAC,kBAAkB,CAAC;AACvB,UAAM,mBAAmB,MAAM,YAAY,MAAM;AAC/C,UAAI,mBAAoB,YAAW,KAAK;AAAA,IAC1C,GAAG,CAAC,kBAAkB,CAAC;AAEvB,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAK;AAAA,QACL,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,aAAU;AAAA,QACV,wBAAsB;AAAA,QACtB,4BACE,kBAAkB,UAAa,sBAAsB,UAAU,SAAS;AAAA,QAE1E,cAAc;AAAA,QACd,cAAc;AAAA,QAEZ;AAAA,oBAAS,cACT,qBAAC,SAAI,WAAU,0BACZ;AAAA,oBAAQ,oBAAC,cAAW,WAAU,uBAAuB,iBAAM,IAAgB,oBAAC,UAAK,WAAU,UAAS;AAAA,YACpG,YACC,oBAAC,UAAK,WAAU,yCAAwC,aAAU,0BAC/D,qBACH,IACE;AAAA,aACN;AAAA,UAED,cACC,oBAAC,oBAAiB,WAAW,GAAG,cAAc,SAAS,MAAM,GAAG,aAAU,4BACvE,uBACH,IACE;AAAA,UACH,UACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,GAAG,sCAAsC,SAAS,gBAAgB,QAAQ;AAAA,cACrF,aAAU;AAAA,cAET;AAAA;AAAA,UACH,IACE;AAAA;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,aAAa,cAAc;",
   "names": []
 }

package/dist/primitives/pagination.js

@@ -0,0 +1,245 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight
+} from "lucide-react";
+import { cva } from "class-variance-authority";
+import { cn } from "@open-mercato/shared/lib/utils";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import {
+  CompactSelectTrigger,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectValue
+} from "./compact-select.js";
+function buildPaginationItems(page, totalPages, siblingCount, boundaryCount) {
+  if (totalPages <= 0) return [];
+  const totalSlots = boundaryCount * 2 + siblingCount * 2 + 3;
+  if (totalPages <= totalSlots) {
+    return Array.from({ length: totalPages }, (_, i) => i + 1);
+  }
+  const startPages = Array.from({ length: boundaryCount }, (_, i) => i + 1);
+  const endPages = Array.from(
+    { length: boundaryCount },
+    (_, i) => totalPages - boundaryCount + 1 + i
+  );
+  const siblingStart = Math.max(
+    Math.min(page - siblingCount, totalPages - boundaryCount - siblingCount * 2 - 1),
+    boundaryCount + 2
+  );
+  const siblingEnd = Math.min(
+    Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2),
+    endPages.length > 0 ? endPages[0] - 2 : totalPages - 1
+  );
+  const middle = [];
+  for (let i = siblingStart; i <= siblingEnd; i += 1) middle.push(i);
+  const result = [];
+  for (const p of startPages) result.push(p);
+  if (siblingStart > boundaryCount + 2) {
+    result.push("ellipsis-left");
+  } else if (siblingStart === boundaryCount + 2) {
+    result.push(boundaryCount + 1);
+  }
+  for (const p of middle) result.push(p);
+  const firstEnd = endPages[0] ?? totalPages;
+  if (siblingEnd < firstEnd - 2) {
+    result.push("ellipsis-right");
+  } else if (siblingEnd === firstEnd - 2) {
+    result.push(firstEnd - 1);
+  }
+  for (const p of endPages) result.push(p);
+  return result;
+}
+const cellVariants = cva(
+  "inline-flex size-8 shrink-0 items-center justify-center rounded-lg text-sm font-medium outline-none transition-colors tabular-nums focus-visible:shadow-focus disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: {
+      selected: {
+        true: "bg-muted text-foreground",
+        false: "bg-background text-foreground hover:bg-muted/40"
+      }
+    },
+    defaultVariants: { selected: false }
+  }
+);
+const navButtonVariants = cva(
+  "inline-flex size-8 shrink-0 items-center justify-center rounded-lg text-muted-foreground outline-none transition-colors hover:bg-muted/40 hover:text-foreground focus-visible:shadow-focus disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-muted-foreground"
+);
+const Pagination = React.forwardRef(
+  ({
+    className,
+    page,
+    pageSize,
+    total,
+    onPageChange,
+    onPageSizeChange,
+    pageSizeOptions = [10, 25, 50, 100],
+    showInfo = true,
+    showPageSize: showPageSizeProp,
+    showFirstLast = true,
+    showPrevNext = true,
+    siblingCount = 1,
+    boundaryCount = 1,
+    disabled = false,
+    formatPageInfo,
+    formatPageSizeLabel,
+    ...props
+  }, ref) => {
+    const t = useT();
+    const resolvedFormatPageInfo = formatPageInfo ?? ((p, total2) => t("ui.pagination.info.pageOf", "Page {page} of {total}", { page: p, total: total2 }));
+    const resolvedFormatPageSizeLabel = formatPageSizeLabel ?? ((size) => t("ui.pagination.itemsPerPage.label", "{size} / page", { size }));
+    const totalPages = Math.max(1, Math.ceil(total / Math.max(1, pageSize)));
+    const safePage = Math.min(Math.max(1, page), totalPages);
+    const items = React.useMemo(
+      () => buildPaginationItems(safePage, totalPages, siblingCount, boundaryCount),
+      [safePage, totalPages, siblingCount, boundaryCount]
+    );
+    const showPageSize = showPageSizeProp ?? Boolean(onPageSizeChange);
+    const goTo = React.useCallback(
+      (next) => {
+        if (disabled) return;
+        const bounded = Math.min(Math.max(1, next), totalPages);
+        if (bounded !== safePage) onPageChange(bounded);
+      },
+      [disabled, onPageChange, safePage, totalPages]
+    );
+    return /* @__PURE__ */ jsxs(
+      "nav",
+      {
+        ref,
+        "data-slot": "pagination",
+        "aria-label": props["aria-label"] ?? t("ui.pagination.landmark.ariaLabel", "Pagination"),
+        className: cn("flex w-full items-center justify-between gap-6", className),
+        ...props,
+        children: [
+          showInfo ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "pagination-info",
+              className: "shrink-0 text-sm text-muted-foreground tabular-nums",
+              children: resolvedFormatPageInfo(safePage, totalPages)
+            }
+          ) : /* @__PURE__ */ jsx("div", {}),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "data-slot": "pagination-controls",
+              className: "inline-flex items-center gap-2",
+              children: [
+                showFirstLast ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "data-slot": "pagination-first",
+                    "aria-label": t("ui.pagination.first.ariaLabel", "First page"),
+                    disabled: disabled || safePage <= 1,
+                    onClick: () => goTo(1),
+                    className: cn(navButtonVariants()),
+                    children: /* @__PURE__ */ jsx(ChevronsLeft, { "aria-hidden": "true", className: "size-5" })
+                  }
+                ) : null,
+                showPrevNext ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "data-slot": "pagination-prev",
+                    "aria-label": t("ui.pagination.previous.ariaLabel", "Previous page"),
+                    disabled: disabled || safePage <= 1,
+                    onClick: () => goTo(safePage - 1),
+                    className: cn(navButtonVariants()),
+                    children: /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true", className: "size-5" })
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx(
+                  "ol",
+                  {
+                    "data-slot": "pagination-pages",
+                    className: "inline-flex items-center gap-2 list-none",
+                    children: items.map((entry, index) => {
+                      if (entry === "ellipsis-left" || entry === "ellipsis-right") {
+                        return /* @__PURE__ */ jsx(
+                          "li",
+                          {
+                            "data-slot": "pagination-ellipsis",
+                            "aria-hidden": "true",
+                            className: "inline-flex size-8 items-center justify-center text-sm text-muted-foreground",
+                            children: "\u2026"
+                          },
+                          `${entry}-${index}`
+                        );
+                      }
+                      const selected = entry === safePage;
+                      return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          "data-slot": "pagination-page",
+                          "data-state": selected ? "on" : "off",
+                          "aria-current": selected ? "page" : void 0,
+                          "aria-label": selected ? t("ui.pagination.page.currentAriaLabel", "Page {page}, current page", { page: entry }) : t("ui.pagination.page.goToAriaLabel", "Go to page {page}", { page: entry }),
+                          disabled,
+                          onClick: () => goTo(entry),
+                          className: cn(cellVariants({ selected })),
+                          children: entry
+                        }
+                      ) }, entry);
+                    })
+                  }
+                ),
+                showPrevNext ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "data-slot": "pagination-next",
+                    "aria-label": t("ui.pagination.next.ariaLabel", "Next page"),
+                    disabled: disabled || safePage >= totalPages,
+                    onClick: () => goTo(safePage + 1),
+                    className: cn(navButtonVariants()),
+                    children: /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true", className: "size-5" })
+                  }
+                ) : null,
+                showFirstLast ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "data-slot": "pagination-last",
+                    "aria-label": t("ui.pagination.last.ariaLabel", "Last page"),
+                    disabled: disabled || safePage >= totalPages,
+                    onClick: () => goTo(totalPages),
+                    className: cn(navButtonVariants()),
+                    children: /* @__PURE__ */ jsx(ChevronsRight, { "aria-hidden": "true", className: "size-5" })
+                  }
+                ) : null
+              ]
+            }
+          ),
+          showPageSize && onPageSizeChange ? /* @__PURE__ */ jsx("div", { "data-slot": "pagination-page-size", className: "shrink-0", children: /* @__PURE__ */ jsxs(
+            Select,
+            {
+              value: String(pageSize),
+              onValueChange: (next) => onPageSizeChange(Number(next)),
+              disabled,
+              children: [
+                /* @__PURE__ */ jsx(CompactSelectTrigger, { "aria-label": t("ui.pagination.itemsPerPage.ariaLabel", "Items per page"), children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                /* @__PURE__ */ jsx(SelectContent, { children: pageSizeOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: String(option), children: resolvedFormatPageSizeLabel(option) }, option)) })
+              ]
+            }
+          ) }) : /* @__PURE__ */ jsx("div", {})
+        ]
+      }
+    );
+  }
+);
+Pagination.displayName = "Pagination";
+export {
+  Pagination,
+  buildPaginationItems,
+  cellVariants as paginationCellVariants,
+  navButtonVariants as paginationNavVariants
+};
+//# sourceMappingURL=pagination.js.map

package/dist/primitives/pagination.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives/pagination.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport {\n  ChevronLeft,\n  ChevronRight,\n  ChevronsLeft,\n  ChevronsRight,\n} from 'lucide-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport {\n  CompactSelectTrigger,\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectValue,\n} from './compact-select'\n\n/**\n * Page navigation primitive per Figma `Pagination Group [1.1]` (DS Open\n * Mercato componentSet `199985:4135`).\n *\n * Layout (Figma `Basic` variant):\n *\n *   [Left] \"Page 2 of 16\"\n *   [Center] \u23EE  \u25C0  [1][2]\u2026[N-1][N]  \u25B6  \u23ED\n *   [Right] \"7 / page\" CompactSelect\n *\n * Figma's three boolean variant props are mapped 1:1 to React props:\n *\n *   \uD83E\uDD47 First / Last       \u2192 `showFirstLast` (default true)\n *   \u23ED\uFE0F Next / Previous    \u2192 `showPrevNext`  (default true)\n *   \uD83E\uDDEA Advanced           \u2192 `showInfo` + `showPageSize` (default both true)\n *\n * The numeric page list uses the same ellipsis algorithm Material /\n * MUI / shadcn ship: `boundaryCount` pages at each end (default 1),\n * `siblingCount` pages on either side of the current page (default 1),\n * collapse the rest into `\u2026` placeholders.\n *\n * ```tsx\n * const [page, setPage] = React.useState(1)\n * const [pageSize, setPageSize] = React.useState(25)\n * <Pagination\n *   page={page}\n *   pageSize={pageSize}\n *   total={items.length}\n *   onPageChange={setPage}\n *   onPageSizeChange={setPageSize}\n * />\n *\n * // Compact (no first/last, no page-size select)\n * <Pagination\n *   page={page}\n *   pageSize={20}\n *   total={120}\n *   onPageChange={setPage}\n *   showFirstLast={false}\n *   showPageSize={false}\n * />\n * ```\n */\n\n/**\n * Build a stable list of pages + ellipsis placeholders that fits a\n * pagination row of `boundaryCount + 2 + siblingCount * 2 + 1` cells.\n * Returns `number` entries (1-indexed) and `'ellipsis-left'` /\n * `'ellipsis-right'` placeholders that the renderer paints as `\u2026`.\n *\n * Exported for tests + consumer reuse (e.g. a server-side rendered\n * pagination indicator that needs the same shape).\n */\nexport function buildPaginationItems(\n  page: number,\n  totalPages: number,\n  siblingCount: number,\n  boundaryCount: number,\n): Array<number | 'ellipsis-left' | 'ellipsis-right'> {\n  if (totalPages <= 0) return []\n  // When everything fits, just list every page.\n  const totalSlots = boundaryCount * 2 + siblingCount * 2 + 3\n  if (totalPages <= totalSlots) {\n    return Array.from({ length: totalPages }, (_, i) => i + 1)\n  }\n  const startPages = Array.from({ length: boundaryCount }, (_, i) => i + 1)\n  const endPages = Array.from(\n    { length: boundaryCount },\n    (_, i) => totalPages - boundaryCount + 1 + i,\n  )\n  const siblingStart = Math.max(\n    Math.min(page - siblingCount, totalPages - boundaryCount - siblingCount * 2 - 1),\n    boundaryCount + 2,\n  )\n  const siblingEnd = Math.min(\n    Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2),\n    endPages.length > 0 ? endPages[0] - 2 : totalPages - 1,\n  )\n  const middle: Array<number> = []\n  for (let i = siblingStart; i <= siblingEnd; i += 1) middle.push(i)\n\n  // Bridge between the start boundary and the sibling window. The\n  // ellipsis is only worth showing when \u22652 page numbers fall between\n  // them; if exactly 1 page is missing, render that single number\n  // instead of \"\u2026\" (cleaner UX \u2014 same width, no information loss).\n  const result: Array<number | 'ellipsis-left' | 'ellipsis-right'> = []\n  for (const p of startPages) result.push(p)\n  if (siblingStart > boundaryCount + 2) {\n    result.push('ellipsis-left')\n  } else if (siblingStart === boundaryCount + 2) {\n    result.push(boundaryCount + 1)\n  }\n  for (const p of middle) result.push(p)\n  const firstEnd = endPages[0] ?? totalPages\n  if (siblingEnd < firstEnd - 2) {\n    result.push('ellipsis-right')\n  } else if (siblingEnd === firstEnd - 2) {\n    result.push(firstEnd - 1)\n  }\n  for (const p of endPages) result.push(p)\n  return result\n}\n\nconst cellVariants = cva(\n  'inline-flex size-8 shrink-0 items-center justify-center rounded-lg text-sm font-medium outline-none transition-colors tabular-nums ' +\n    'focus-visible:shadow-focus ' +\n    'disabled:cursor-not-allowed disabled:opacity-50',\n  {\n    variants: {\n      selected: {\n        true: 'bg-muted text-foreground',\n        false: 'bg-background text-foreground hover:bg-muted/40',\n      },\n    },\n    defaultVariants: { selected: false },\n  },\n)\n\nconst navButtonVariants = cva(\n  'inline-flex size-8 shrink-0 items-center justify-center rounded-lg text-muted-foreground outline-none transition-colors ' +\n    'hover:bg-muted/40 hover:text-foreground ' +\n    'focus-visible:shadow-focus ' +\n    'disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-muted-foreground',\n)\n\nexport type PaginationProps = React.HTMLAttributes<HTMLDivElement> & {\n  /** Current 1-indexed page. */\n  page: number\n  /** Items per page. */\n  pageSize: number\n  /** Total item count. Used to derive `Math.ceil(total / pageSize)` pages. */\n  total: number\n  /** Called when the user changes page. */\n  onPageChange: (next: number) => void\n  /** Called when the user changes page size. Optional \u2014 when omitted,\n   *  the \"X / page\" select is hidden. */\n  onPageSizeChange?: (next: number) => void\n  /** Page size options for the select. Default `[10, 25, 50, 100]`. */\n  pageSizeOptions?: readonly number[]\n  /** Show the left \"Page X of Y\" indicator. Default `true`. */\n  showInfo?: boolean\n  /** Show the right \"X / page\" select. Default `true` when\n   *  `onPageSizeChange` is provided; ignored otherwise. */\n  showPageSize?: boolean\n  /** Show \u23EE / \u23ED first / last buttons. Default `true`. */\n  showFirstLast?: boolean\n  /** Show \u25C0 / \u25B6 prev / next buttons. Default `true`. */\n  showPrevNext?: boolean\n  /** Pages on either side of the current page in the page list. Default `1`. */\n  siblingCount?: number\n  /** Pages pinned at each end of the page list. Default `1`. */\n  boundaryCount?: number\n  /** Block all interactions. Default `false`. */\n  disabled?: boolean\n  /** ARIA label for the navigation landmark. Default `\"Pagination\"`. */\n  'aria-label'?: string\n  /** Format the \"Page X of Y\" label. */\n  formatPageInfo?: (page: number, totalPages: number) => string\n  /** Format the \"X / page\" label. */\n  formatPageSizeLabel?: (pageSize: number) => string\n}\n\nexport const Pagination = React.forwardRef<HTMLDivElement, PaginationProps>(\n  (\n    {\n      className,\n      page,\n      pageSize,\n      total,\n      onPageChange,\n      onPageSizeChange,\n      pageSizeOptions = [10, 25, 50, 100],\n      showInfo = true,\n      showPageSize: showPageSizeProp,\n      showFirstLast = true,\n      showPrevNext = true,\n      siblingCount = 1,\n      boundaryCount = 1,\n      disabled = false,\n      formatPageInfo,\n      formatPageSizeLabel,\n      ...props\n    },\n    ref,\n  ) => {\n    const t = useT()\n    const resolvedFormatPageInfo =\n      formatPageInfo ??\n      ((p: number, total: number) =>\n        t('ui.pagination.info.pageOf', 'Page {page} of {total}', { page: p, total }))\n    const resolvedFormatPageSizeLabel =\n      formatPageSizeLabel ??\n      ((size: number) =>\n        t('ui.pagination.itemsPerPage.label', '{size} / page', { size }))\n    const totalPages = Math.max(1, Math.ceil(total / Math.max(1, pageSize)))\n    const safePage = Math.min(Math.max(1, page), totalPages)\n    const items = React.useMemo(\n      () => buildPaginationItems(safePage, totalPages, siblingCount, boundaryCount),\n      [safePage, totalPages, siblingCount, boundaryCount],\n    )\n    const showPageSize = showPageSizeProp ?? Boolean(onPageSizeChange)\n\n    const goTo = React.useCallback(\n      (next: number) => {\n        if (disabled) return\n        const bounded = Math.min(Math.max(1, next), totalPages)\n        if (bounded !== safePage) onPageChange(bounded)\n      },\n      [disabled, onPageChange, safePage, totalPages],\n    )\n\n    return (\n      <nav\n        ref={ref}\n        data-slot=\"pagination\"\n        aria-label={props['aria-label'] ?? t('ui.pagination.landmark.ariaLabel', 'Pagination')}\n        className={cn('flex w-full items-center justify-between gap-6', className)}\n        {...props}\n      >\n        {showInfo ? (\n          <div\n            data-slot=\"pagination-info\"\n            className=\"shrink-0 text-sm text-muted-foreground tabular-nums\"\n          >\n            {resolvedFormatPageInfo(safePage, totalPages)}\n          </div>\n        ) : (\n          <div />\n        )}\n\n        <div\n          data-slot=\"pagination-controls\"\n          className=\"inline-flex items-center gap-2\"\n        >\n          {showFirstLast ? (\n            <button\n              type=\"button\"\n              data-slot=\"pagination-first\"\n              aria-label={t('ui.pagination.first.ariaLabel', 'First page')}\n              disabled={disabled || safePage <= 1}\n              onClick={() => goTo(1)}\n              className={cn(navButtonVariants())}\n            >\n              <ChevronsLeft aria-hidden=\"true\" className=\"size-5\" />\n            </button>\n          ) : null}\n          {showPrevNext ? (\n            <button\n              type=\"button\"\n              data-slot=\"pagination-prev\"\n              aria-label={t('ui.pagination.previous.ariaLabel', 'Previous page')}\n              disabled={disabled || safePage <= 1}\n              onClick={() => goTo(safePage - 1)}\n              className={cn(navButtonVariants())}\n            >\n              <ChevronLeft aria-hidden=\"true\" className=\"size-5\" />\n            </button>\n          ) : null}\n\n          <ol\n            data-slot=\"pagination-pages\"\n            className=\"inline-flex items-center gap-2 list-none\"\n          >\n            {items.map((entry, index) => {\n              if (entry === 'ellipsis-left' || entry === 'ellipsis-right') {\n                return (\n                  <li\n                    key={`${entry}-${index}`}\n                    data-slot=\"pagination-ellipsis\"\n                    aria-hidden=\"true\"\n                    className=\"inline-flex size-8 items-center justify-center text-sm text-muted-foreground\"\n                  >\n                    \u2026\n                  </li>\n                )\n              }\n              const selected = entry === safePage\n              return (\n                <li key={entry}>\n                  <button\n                    type=\"button\"\n                    data-slot=\"pagination-page\"\n                    data-state={selected ? 'on' : 'off'}\n                    aria-current={selected ? 'page' : undefined}\n                    aria-label={\n                      selected\n                        ? t('ui.pagination.page.currentAriaLabel', 'Page {page}, current page', { page: entry })\n                        : t('ui.pagination.page.goToAriaLabel', 'Go to page {page}', { page: entry })\n                    }\n                    disabled={disabled}\n                    onClick={() => goTo(entry)}\n                    className={cn(cellVariants({ selected }))}\n                  >\n                    {entry}\n                  </button>\n                </li>\n              )\n            })}\n          </ol>\n\n          {showPrevNext ? (\n            <button\n              type=\"button\"\n              data-slot=\"pagination-next\"\n              aria-label={t('ui.pagination.next.ariaLabel', 'Next page')}\n              disabled={disabled || safePage >= totalPages}\n              onClick={() => goTo(safePage + 1)}\n              className={cn(navButtonVariants())}\n            >\n              <ChevronRight aria-hidden=\"true\" className=\"size-5\" />\n            </button>\n          ) : null}\n          {showFirstLast ? (\n            <button\n              type=\"button\"\n              data-slot=\"pagination-last\"\n              aria-label={t('ui.pagination.last.ariaLabel', 'Last page')}\n              disabled={disabled || safePage >= totalPages}\n              onClick={() => goTo(totalPages)}\n              className={cn(navButtonVariants())}\n            >\n              <ChevronsRight aria-hidden=\"true\" className=\"size-5\" />\n            </button>\n          ) : null}\n        </div>\n\n        {showPageSize && onPageSizeChange ? (\n          <div data-slot=\"pagination-page-size\" className=\"shrink-0\">\n            <Select\n              value={String(pageSize)}\n              onValueChange={(next) => onPageSizeChange(Number(next))}\n              disabled={disabled}\n            >\n              <CompactSelectTrigger aria-label={t('ui.pagination.itemsPerPage.ariaLabel', 'Items per page')}>\n                <SelectValue />\n              </CompactSelectTrigger>\n              <SelectContent>\n                {pageSizeOptions.map((option) => (\n                  <SelectItem key={option} value={String(option)}>\n                    {resolvedFormatPageSizeLabel(option)}\n                  </SelectItem>\n                ))}\n              </SelectContent>\n            </Select>\n          </div>\n        ) : (\n          <div />\n        )}\n      </nav>\n    )\n  },\n)\nPagination.displayName = 'Pagination'\n\nexport { cellVariants as paginationCellVariants, navButtonVariants as paginationNavVariants }\n"],
+  "mappings": "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",
+  "names": ["total"]
+}