@open-mercato/ui 0.5.1-develop.2860.07af3a6a9d → 0.5.1-develop.2874.77704bccbd

package/dist/portal/components/PortalNotificationPanel.js

@@ -13,10 +13,10 @@ function CheckIcon({ className }) {
   return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", className, children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) });
 }
 const SEVERITY_STYLES = {
-  info: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400",
-  success: "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400",
-  warning: "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400",
-  error: "bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-400"
+  info: "bg-status-info-bg text-status-info-text",
+  success: "bg-status-success-bg text-status-success-text",
+  warning: "bg-status-warning-bg text-status-warning-text",
+  error: "bg-status-error-bg text-status-error-text"
 };
 function PortalNotificationPanel({
   open,
@@ -51,17 +51,17 @@ function PortalNotificationPanel({
     return t("portal.notifications.daysAgo", "{d}d ago", { d: days });
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-50 bg-black/20 backdrop-blur-sm", onClick: onClose }),
+    /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-modal bg-black/20 backdrop-blur-sm", onClick: onClose }),
     /* @__PURE__ */ jsxs(
       "div",
       {
         ref: panelRef,
-        className: "fixed right-0 top-0 z-50 flex h-full w-full max-w-md flex-col border-l bg-background shadow-2xl",
+        className: "fixed right-0 top-0 z-modal flex h-full w-full max-w-md flex-col border-l bg-background shadow-2xl",
         children: [
           /* @__PURE__ */ jsxs("div", { className: "flex h-16 items-center justify-between border-b px-5", children: [
             /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("h2", { className: "text-[15px] font-semibold", children: t("portal.notifications.title", "Notifications") }),
-              unreadCount > 0 ? /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground", children: t("portal.notifications.unreadSummary", "{count} unread", { count: unreadCount }) }) : null
+              /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold", children: t("portal.notifications.title", "Notifications") }),
+              unreadCount > 0 ? /* @__PURE__ */ jsx("p", { className: "text-overline text-muted-foreground", children: t("portal.notifications.unreadSummary", "{count} unread", { count: unreadCount }) }) : null
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
               unreadCount > 0 ? /* @__PURE__ */ jsxs(
@@ -70,7 +70,7 @@ function PortalNotificationPanel({
                   type: "button",
                   variant: "ghost",
                   size: "sm",
-                  className: "text-[12px] text-muted-foreground",
+                  className: "text-xs text-muted-foreground",
                   onClick: () => onMarkAllRead(),
                   children: [
                     /* @__PURE__ */ jsx(CheckIcon, { className: "mr-1 size-3.5" }),
@@ -86,10 +86,10 @@ function PortalNotificationPanel({
             {
               type: "button",
               onClick: () => setTab(tabId),
-              className: `border-b-2 px-3 py-2.5 text-[13px] font-medium transition-colors ${tab === tabId ? "border-foreground text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"}`,
+              className: `border-b-2 px-3 py-2.5 text-sm font-medium transition-colors ${tab === tabId ? "border-foreground text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"}`,
               children: [
                 tabId === "all" ? t("portal.notifications.tab.all", "All") : t("portal.notifications.tab.unread", "Unread"),
-                tabId === "unread" && unreadCount > 0 ? /* @__PURE__ */ jsx("span", { className: "ml-1.5 inline-flex size-5 items-center justify-center rounded-full bg-foreground text-[10px] font-bold text-background", children: unreadCount }) : null
+                tabId === "unread" && unreadCount > 0 ? /* @__PURE__ */ jsx("span", { className: "ml-1.5 inline-flex size-5 items-center justify-center rounded-full bg-foreground text-overline font-bold text-background", children: unreadCount }) : null
               ]
             },
             tabId
@@ -99,13 +99,13 @@ function PortalNotificationPanel({
             {
               className: `flex gap-3 border-b px-5 py-4 transition-colors ${notification.status === "unread" ? "bg-muted/30" : ""}`,
               children: [
-                /* @__PURE__ */ jsx("div", { className: `mt-1 flex size-8 shrink-0 items-center justify-center rounded-lg text-[10px] font-bold ${SEVERITY_STYLES[notification.severity] ?? SEVERITY_STYLES.info}`, children: notification.severity.charAt(0).toUpperCase() }),
+                /* @__PURE__ */ jsx("div", { className: `mt-1 flex size-8 shrink-0 items-center justify-center rounded-lg text-overline font-bold ${SEVERITY_STYLES[notification.severity] ?? SEVERITY_STYLES.info}`, children: notification.severity.charAt(0).toUpperCase() }),
                 /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
                   /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
-                    /* @__PURE__ */ jsx("p", { className: "text-[13px] font-medium leading-snug", children: notification.title }),
-                    /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[11px] text-muted-foreground/60", children: formatTime(notification.createdAt) })
+                    /* @__PURE__ */ jsx("p", { className: "text-sm font-medium leading-snug", children: notification.title }),
+                    /* @__PURE__ */ jsx("span", { className: "shrink-0 text-overline text-muted-foreground/60", children: formatTime(notification.createdAt) })
                   ] }),
-                  notification.body ? /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-[12px] leading-relaxed text-muted-foreground", children: notification.body }) : null,
+                  notification.body ? /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs leading-relaxed text-muted-foreground", children: notification.body }) : null,
                   /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center gap-2", children: [
                     notification.status === "unread" ? /* @__PURE__ */ jsx(
                       Button,
@@ -113,7 +113,7 @@ function PortalNotificationPanel({
                         type: "button",
                         variant: "ghost",
                         size: "sm",
-                        className: "h-auto px-2 py-1 text-[11px] text-muted-foreground",
+                        className: "h-auto px-2 py-1 text-overline text-muted-foreground",
                         onClick: () => onMarkAsRead(notification.id),
                         children: t("portal.notifications.markRead", "Mark read")
                       }
@@ -124,7 +124,7 @@ function PortalNotificationPanel({
                         type: "button",
                         variant: "ghost",
                         size: "sm",
-                        className: "h-auto px-2 py-1 text-[11px] text-muted-foreground",
+                        className: "h-auto px-2 py-1 text-overline text-muted-foreground",
                         onClick: () => onDismiss(notification.id),
                         children: t("portal.notifications.dismiss", "Dismiss")
                       }
@@ -133,7 +133,7 @@ function PortalNotificationPanel({
                       "a",
                       {
                         href: notification.linkHref,
-                        className: "ml-auto text-[11px] font-medium text-foreground underline underline-offset-2 hover:opacity-80",
+                        className: "ml-auto text-overline font-medium text-foreground underline underline-offset-2 hover:opacity-80",
                         onClick: () => {
                           if (notification.status === "unread") onMarkAsRead(notification.id);
                           onClose();

package/dist/portal/components/PortalNotificationPanel.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/portal/components/PortalNotificationPanel.tsx"],
-  "sourcesContent": ["\"use client\"\nimport * as React from 'react'\nimport { Button } from '../../primitives/button'\nimport { IconButton } from '../../primitives/icon-button'\nimport type { NotificationDto } from '@open-mercato/shared/modules/notifications/types'\nimport type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'\n\nfunction XIcon({ className }: { className?: string }) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}>\n      <path d=\"M18 6 6 18\" /><path d=\"m6 6 12 12\" />\n    </svg>\n  )\n}\n\nfunction CheckIcon({ className }: { className?: string }) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}>\n      <polyline points=\"20 6 9 17 4 12\" />\n    </svg>\n  )\n}\n\nconst SEVERITY_STYLES: Record<string, string> = {\n  info: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',\n  success: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400',\n  warning: 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400',\n  error: 'bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-400',\n}\n\ntype Tab = 'all' | 'unread'\n\ntype PortalNotificationPanelProps = {\n  open: boolean\n  onClose: () => void\n  notifications: NotificationDto[]\n  unreadCount: number\n  onMarkAsRead: (id: string) => Promise<void>\n  onDismiss: (id: string) => Promise<void>\n  onMarkAllRead: () => Promise<void>\n  t: TranslateFn\n}\n\nexport function PortalNotificationPanel({\n  open,\n  onClose,\n  notifications,\n  unreadCount,\n  onMarkAsRead,\n  onDismiss,\n  onMarkAllRead,\n  t,\n}: PortalNotificationPanelProps) {\n  const [tab, setTab] = React.useState<Tab>('all')\n  const panelRef = React.useRef<HTMLDivElement>(null)\n\n  // Close on Escape\n  React.useEffect(() => {\n    if (!open) return\n    const handler = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') onClose()\n    }\n    window.addEventListener('keydown', handler)\n    return () => window.removeEventListener('keydown', handler)\n  }, [open, onClose])\n\n  if (!open) return null\n\n  const filtered = tab === 'unread'\n    ? notifications.filter((n) => n.status === 'unread')\n    : notifications\n\n  const formatTime = (iso: string) => {\n    const diff = Date.now() - new Date(iso).getTime()\n    const mins = Math.floor(diff / 60000)\n    if (mins < 1) return t('portal.notifications.justNow', 'Just now')\n    if (mins < 60) return t('portal.notifications.minutesAgo', '{m}m ago', { m: mins })\n    const hours = Math.floor(mins / 60)\n    if (hours < 24) return t('portal.notifications.hoursAgo', '{h}h ago', { h: hours })\n    const days = Math.floor(hours / 24)\n    return t('portal.notifications.daysAgo', '{d}d ago', { d: days })\n  }\n\n  return (\n    <>\n      {/* Backdrop */}\n      <div className=\"fixed inset-0 z-50 bg-black/20 backdrop-blur-sm\" onClick={onClose} />\n\n      {/* Panel */}\n      <div\n        ref={panelRef}\n        className=\"fixed right-0 top-0 z-50 flex h-full w-full max-w-md flex-col border-l bg-background shadow-2xl\"\n      >\n        {/* Header */}\n        <div className=\"flex h-16 items-center justify-between border-b px-5\">\n          <div>\n            <h2 className=\"text-[15px] font-semibold\">{t('portal.notifications.title', 'Notifications')}</h2>\n            {unreadCount > 0 ? (\n              <p className=\"text-[11px] text-muted-foreground\">\n                {t('portal.notifications.unreadSummary', '{count} unread', { count: unreadCount })}\n              </p>\n            ) : null}\n          </div>\n          <div className=\"flex items-center gap-1\">\n            {unreadCount > 0 ? (\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"text-[12px] text-muted-foreground\"\n                onClick={() => onMarkAllRead()}\n              >\n                <CheckIcon className=\"mr-1 size-3.5\" />\n                {t('portal.notifications.markAllRead', 'Mark all read')}\n              </Button>\n            ) : null}\n            <IconButton variant=\"ghost\" size=\"sm\" type=\"button\" onClick={onClose} aria-label=\"Close\">\n              <XIcon className=\"size-4\" />\n            </IconButton>\n          </div>\n        </div>\n\n        {/* Tabs */}\n        <div className=\"flex gap-0 border-b px-5\">\n          {(['all', 'unread'] as Tab[]).map((tabId) => (\n            <button\n              key={tabId}\n              type=\"button\"\n              onClick={() => setTab(tabId)}\n              className={`border-b-2 px-3 py-2.5 text-[13px] font-medium transition-colors ${\n                tab === tabId\n                  ? 'border-foreground text-foreground'\n                  : 'border-transparent text-muted-foreground hover:text-foreground'\n              }`}\n            >\n              {tabId === 'all'\n                ? t('portal.notifications.tab.all', 'All')\n                : t('portal.notifications.tab.unread', 'Unread')}\n              {tabId === 'unread' && unreadCount > 0 ? (\n                <span className=\"ml-1.5 inline-flex size-5 items-center justify-center rounded-full bg-foreground text-[10px] font-bold text-background\">\n                  {unreadCount}\n                </span>\n              ) : null}\n            </button>\n          ))}\n        </div>\n\n        {/* List */}\n        <div className=\"flex-1 overflow-y-auto\">\n          {filtered.length === 0 ? (\n            <div className=\"flex flex-col items-center justify-center gap-2 py-16 text-center\">\n              <p className=\"text-sm font-medium text-muted-foreground\">\n                {tab === 'unread'\n                  ? t('portal.notifications.emptyUnread', 'All caught up!')\n                  : t('portal.notifications.empty', 'No notifications yet')}\n              </p>\n            </div>\n          ) : (\n            filtered.map((notification) => (\n              <div\n                key={notification.id}\n                className={`flex gap-3 border-b px-5 py-4 transition-colors ${\n                  notification.status === 'unread' ? 'bg-muted/30' : ''\n                }`}\n              >\n                {/* Severity dot */}\n                <div className={`mt-1 flex size-8 shrink-0 items-center justify-center rounded-lg text-[10px] font-bold ${SEVERITY_STYLES[notification.severity] ?? SEVERITY_STYLES.info}`}>\n                  {notification.severity.charAt(0).toUpperCase()}\n                </div>\n\n                {/* Content */}\n                <div className=\"min-w-0 flex-1\">\n                  <div className=\"flex items-start justify-between gap-2\">\n                    <p className=\"text-[13px] font-medium leading-snug\">\n                      {notification.title}\n                    </p>\n                    <span className=\"shrink-0 text-[11px] text-muted-foreground/60\">\n                      {formatTime(notification.createdAt)}\n                    </span>\n                  </div>\n                  {notification.body ? (\n                    <p className=\"mt-0.5 text-[12px] leading-relaxed text-muted-foreground\">\n                      {notification.body}\n                    </p>\n                  ) : null}\n\n                  {/* Actions */}\n                  <div className=\"mt-2 flex items-center gap-2\">\n                    {notification.status === 'unread' ? (\n                      <Button\n                        type=\"button\"\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        className=\"h-auto px-2 py-1 text-[11px] text-muted-foreground\"\n                        onClick={() => onMarkAsRead(notification.id)}\n                      >\n                        {t('portal.notifications.markRead', 'Mark read')}\n                      </Button>\n                    ) : null}\n                    <Button\n                      type=\"button\"\n                      variant=\"ghost\"\n                      size=\"sm\"\n                      className=\"h-auto px-2 py-1 text-[11px] text-muted-foreground\"\n                      onClick={() => onDismiss(notification.id)}\n                    >\n                      {t('portal.notifications.dismiss', 'Dismiss')}\n                    </Button>\n                    {notification.linkHref ? (\n                      <a\n                        href={notification.linkHref}\n                        className=\"ml-auto text-[11px] font-medium text-foreground underline underline-offset-2 hover:opacity-80\"\n                        onClick={() => {\n                          if (notification.status === 'unread') onMarkAsRead(notification.id)\n                          onClose()\n                        }}\n                      >\n                        {t('portal.notifications.view', 'View')}\n                      </a>\n                    ) : null}\n                  </div>\n                </div>\n              </div>\n            ))\n          )}\n        </div>\n      </div>\n    </>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["\"use client\"\nimport * as React from 'react'\nimport { Button } from '../../primitives/button'\nimport { IconButton } from '../../primitives/icon-button'\nimport type { NotificationDto } from '@open-mercato/shared/modules/notifications/types'\nimport type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'\n\nfunction XIcon({ className }: { className?: string }) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}>\n      <path d=\"M18 6 6 18\" /><path d=\"m6 6 12 12\" />\n    </svg>\n  )\n}\n\nfunction CheckIcon({ className }: { className?: string }) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}>\n      <polyline points=\"20 6 9 17 4 12\" />\n    </svg>\n  )\n}\n\nconst SEVERITY_STYLES: Record<string, string> = {\n  info: 'bg-status-info-bg text-status-info-text',\n  success: 'bg-status-success-bg text-status-success-text',\n  warning: 'bg-status-warning-bg text-status-warning-text',\n  error: 'bg-status-error-bg text-status-error-text',\n}\n\ntype Tab = 'all' | 'unread'\n\ntype PortalNotificationPanelProps = {\n  open: boolean\n  onClose: () => void\n  notifications: NotificationDto[]\n  unreadCount: number\n  onMarkAsRead: (id: string) => Promise<void>\n  onDismiss: (id: string) => Promise<void>\n  onMarkAllRead: () => Promise<void>\n  t: TranslateFn\n}\n\nexport function PortalNotificationPanel({\n  open,\n  onClose,\n  notifications,\n  unreadCount,\n  onMarkAsRead,\n  onDismiss,\n  onMarkAllRead,\n  t,\n}: PortalNotificationPanelProps) {\n  const [tab, setTab] = React.useState<Tab>('all')\n  const panelRef = React.useRef<HTMLDivElement>(null)\n\n  // Close on Escape\n  React.useEffect(() => {\n    if (!open) return\n    const handler = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') onClose()\n    }\n    window.addEventListener('keydown', handler)\n    return () => window.removeEventListener('keydown', handler)\n  }, [open, onClose])\n\n  if (!open) return null\n\n  const filtered = tab === 'unread'\n    ? notifications.filter((n) => n.status === 'unread')\n    : notifications\n\n  const formatTime = (iso: string) => {\n    const diff = Date.now() - new Date(iso).getTime()\n    const mins = Math.floor(diff / 60000)\n    if (mins < 1) return t('portal.notifications.justNow', 'Just now')\n    if (mins < 60) return t('portal.notifications.minutesAgo', '{m}m ago', { m: mins })\n    const hours = Math.floor(mins / 60)\n    if (hours < 24) return t('portal.notifications.hoursAgo', '{h}h ago', { h: hours })\n    const days = Math.floor(hours / 24)\n    return t('portal.notifications.daysAgo', '{d}d ago', { d: days })\n  }\n\n  return (\n    <>\n      {/* Backdrop */}\n      <div className=\"fixed inset-0 z-modal bg-black/20 backdrop-blur-sm\" onClick={onClose} />\n\n      {/* Panel */}\n      <div\n        ref={panelRef}\n        className=\"fixed right-0 top-0 z-modal flex h-full w-full max-w-md flex-col border-l bg-background shadow-2xl\"\n      >\n        {/* Header */}\n        <div className=\"flex h-16 items-center justify-between border-b px-5\">\n          <div>\n            <h2 className=\"text-base font-semibold\">{t('portal.notifications.title', 'Notifications')}</h2>\n            {unreadCount > 0 ? (\n              <p className=\"text-overline text-muted-foreground\">\n                {t('portal.notifications.unreadSummary', '{count} unread', { count: unreadCount })}\n              </p>\n            ) : null}\n          </div>\n          <div className=\"flex items-center gap-1\">\n            {unreadCount > 0 ? (\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"text-xs text-muted-foreground\"\n                onClick={() => onMarkAllRead()}\n              >\n                <CheckIcon className=\"mr-1 size-3.5\" />\n                {t('portal.notifications.markAllRead', 'Mark all read')}\n              </Button>\n            ) : null}\n            <IconButton variant=\"ghost\" size=\"sm\" type=\"button\" onClick={onClose} aria-label=\"Close\">\n              <XIcon className=\"size-4\" />\n            </IconButton>\n          </div>\n        </div>\n\n        {/* Tabs */}\n        <div className=\"flex gap-0 border-b px-5\">\n          {(['all', 'unread'] as Tab[]).map((tabId) => (\n            <button\n              key={tabId}\n              type=\"button\"\n              onClick={() => setTab(tabId)}\n              className={`border-b-2 px-3 py-2.5 text-sm font-medium transition-colors ${\n                tab === tabId\n                  ? 'border-foreground text-foreground'\n                  : 'border-transparent text-muted-foreground hover:text-foreground'\n              }`}\n            >\n              {tabId === 'all'\n                ? t('portal.notifications.tab.all', 'All')\n                : t('portal.notifications.tab.unread', 'Unread')}\n              {tabId === 'unread' && unreadCount > 0 ? (\n                <span className=\"ml-1.5 inline-flex size-5 items-center justify-center rounded-full bg-foreground text-overline font-bold text-background\">\n                  {unreadCount}\n                </span>\n              ) : null}\n            </button>\n          ))}\n        </div>\n\n        {/* List */}\n        <div className=\"flex-1 overflow-y-auto\">\n          {filtered.length === 0 ? (\n            <div className=\"flex flex-col items-center justify-center gap-2 py-16 text-center\">\n              <p className=\"text-sm font-medium text-muted-foreground\">\n                {tab === 'unread'\n                  ? t('portal.notifications.emptyUnread', 'All caught up!')\n                  : t('portal.notifications.empty', 'No notifications yet')}\n              </p>\n            </div>\n          ) : (\n            filtered.map((notification) => (\n              <div\n                key={notification.id}\n                className={`flex gap-3 border-b px-5 py-4 transition-colors ${\n                  notification.status === 'unread' ? 'bg-muted/30' : ''\n                }`}\n              >\n                {/* Severity dot */}\n                <div className={`mt-1 flex size-8 shrink-0 items-center justify-center rounded-lg text-overline font-bold ${SEVERITY_STYLES[notification.severity] ?? SEVERITY_STYLES.info}`}>\n                  {notification.severity.charAt(0).toUpperCase()}\n                </div>\n\n                {/* Content */}\n                <div className=\"min-w-0 flex-1\">\n                  <div className=\"flex items-start justify-between gap-2\">\n                    <p className=\"text-sm font-medium leading-snug\">\n                      {notification.title}\n                    </p>\n                    <span className=\"shrink-0 text-overline text-muted-foreground/60\">\n                      {formatTime(notification.createdAt)}\n                    </span>\n                  </div>\n                  {notification.body ? (\n                    <p className=\"mt-0.5 text-xs leading-relaxed text-muted-foreground\">\n                      {notification.body}\n                    </p>\n                  ) : null}\n\n                  {/* Actions */}\n                  <div className=\"mt-2 flex items-center gap-2\">\n                    {notification.status === 'unread' ? (\n                      <Button\n                        type=\"button\"\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        className=\"h-auto px-2 py-1 text-overline text-muted-foreground\"\n                        onClick={() => onMarkAsRead(notification.id)}\n                      >\n                        {t('portal.notifications.markRead', 'Mark read')}\n                      </Button>\n                    ) : null}\n                    <Button\n                      type=\"button\"\n                      variant=\"ghost\"\n                      size=\"sm\"\n                      className=\"h-auto px-2 py-1 text-overline text-muted-foreground\"\n                      onClick={() => onDismiss(notification.id)}\n                    >\n                      {t('portal.notifications.dismiss', 'Dismiss')}\n                    </Button>\n                    {notification.linkHref ? (\n                      <a\n                        href={notification.linkHref}\n                        className=\"ml-auto text-overline font-medium text-foreground underline underline-offset-2 hover:opacity-80\"\n                        onClick={() => {\n                          if (notification.status === 'unread') onMarkAsRead(notification.id)\n                          onClose()\n                        }}\n                      >\n                        {t('portal.notifications.view', 'View')}\n                      </a>\n                    ) : null}\n                  </div>\n                </div>\n              </div>\n            ))\n          )}\n        </div>\n      </div>\n    </>\n  )\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/portal/components/PortalPageHeader.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 function PortalPageHeader({ title, description, label, action }) {
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between sm:gap-4", children: [
     /* @__PURE__ */ jsxs("div", { children: [
-      label ? /* @__PURE__ */ jsx("p", { className: "mb-1 text-[11px] font-medium uppercase tracking-widest text-muted-foreground/60", children: label }) : null,
+      label ? /* @__PURE__ */ jsx("p", { className: "mb-1 text-overline font-medium uppercase tracking-widest text-muted-foreground/60", children: label }) : null,
       /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold tracking-tight sm:text-3xl", children: title }),
       description ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground sm:text-base", children: description }) : null
     ] }),

package/dist/portal/components/PortalPageHeader.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/portal/components/PortalPageHeader.tsx"],
-  "sourcesContent": ["\"use client\"\nimport type { ReactNode } from 'react'\n\ntype PortalPageHeaderProps = {\n  title: string\n  description?: string\n  label?: string\n  action?: ReactNode\n}\n\n/**\n * Portal page header with large title and optional action slot.\n * Matches the landing page's hero section typography \u2014 large,\n * tight tracking, with muted description.\n */\nexport function PortalPageHeader({ title, description, label, action }: PortalPageHeaderProps) {\n  return (\n    <div className=\"flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between sm:gap-4\">\n      <div>\n        {label ? (\n          <p className=\"mb-1 text-[11px] font-medium uppercase tracking-widest text-muted-foreground/60\">\n            {label}\n          </p>\n        ) : null}\n        <h1 className=\"text-2xl font-bold tracking-tight sm:text-3xl\">{title}</h1>\n        {description ? (\n          <p className=\"mt-1 text-sm text-muted-foreground sm:text-base\">{description}</p>\n        ) : null}\n      </div>\n      {action ? <div className=\"mt-3 shrink-0 sm:mt-0\">{action}</div> : null}\n    </div>\n  )\n}\n"],
-  "mappings": ";AAkBM,SAEI,KAFJ;AAHC,SAAS,iBAAiB,EAAE,OAAO,aAAa,OAAO,OAAO,GAA0B;AAC7F,SACE,qBAAC,SAAI,WAAU,+EACb;AAAA,yBAAC,SACE;AAAA,cACC,oBAAC,OAAE,WAAU,mFACV,iBACH,IACE;AAAA,MACJ,oBAAC,QAAG,WAAU,iDAAiD,iBAAM;AAAA,MACpE,cACC,oBAAC,OAAE,WAAU,mDAAmD,uBAAY,IAC1E;AAAA,OACN;AAAA,IACC,SAAS,oBAAC,SAAI,WAAU,yBAAyB,kBAAO,IAAS;AAAA,KACpE;AAEJ;",
+  "sourcesContent": ["\"use client\"\nimport type { ReactNode } from 'react'\n\ntype PortalPageHeaderProps = {\n  title: string\n  description?: string\n  label?: string\n  action?: ReactNode\n}\n\n/**\n * Portal page header with large title and optional action slot.\n * Matches the landing page's hero section typography \u2014 large,\n * tight tracking, with muted description.\n */\nexport function PortalPageHeader({ title, description, label, action }: PortalPageHeaderProps) {\n  return (\n    <div className=\"flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between sm:gap-4\">\n      <div>\n        {label ? (\n          <p className=\"mb-1 text-overline font-medium uppercase tracking-widest text-muted-foreground/60\">\n            {label}\n          </p>\n        ) : null}\n        <h1 className=\"text-2xl font-bold tracking-tight sm:text-3xl\">{title}</h1>\n        {description ? (\n          <p className=\"mt-1 text-sm text-muted-foreground sm:text-base\">{description}</p>\n        ) : null}\n      </div>\n      {action ? <div className=\"mt-3 shrink-0 sm:mt-0\">{action}</div> : null}\n    </div>\n  )\n}\n"],
+  "mappings": ";AAkBM,SAEI,KAFJ;AAHC,SAAS,iBAAiB,EAAE,OAAO,aAAa,OAAO,OAAO,GAA0B;AAC7F,SACE,qBAAC,SAAI,WAAU,+EACb;AAAA,yBAAC,SACE;AAAA,cACC,oBAAC,OAAE,WAAU,qFACV,iBACH,IACE;AAAA,MACJ,oBAAC,QAAG,WAAU,iDAAiD,iBAAM;AAAA,MACpE,cACC,oBAAC,OAAE,WAAU,mDAAmD,uBAAY,IAC1E;AAAA,OACN;AAAA,IACC,SAAS,oBAAC,SAAI,WAAU,yBAAyB,kBAAO,IAAS;AAAA,KACpE;AAEJ;",
   "names": []
 }

package/dist/primitives/avatar.js

@@ -1,4 +1,4 @@
-import { jsx } from "react/jsx-runtime";
+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";
@@ -52,8 +52,18 @@ const Avatar = React.forwardRef(
   }
 );
 Avatar.displayName = "Avatar";
+function AvatarStack({ children, max = 4, size = "md", className }) {
+  const items = React.Children.toArray(children);
+  const visible = items.slice(0, max);
+  const overflow = items.length - max;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center [&>*:not(:first-child)]:-ml-2 [&>*]:ring-2 [&>*]:ring-background", className), children: [
+    visible,
+    overflow > 0 && /* @__PURE__ */ jsx(Avatar, { label: `+${overflow}`, size, variant: "monochrome", className: "-ml-2" })
+  ] });
+}
 export {
   Avatar,
+  AvatarStack,
   avatarVariants
 };
 //# sourceMappingURL=avatar.js.map

package/dist/primitives/avatar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/primitives/avatar.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@open-mercato/shared/lib/utils'\n\nconst avatarVariants = cva(\n  'inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full font-semibold select-none',\n  {\n    variants: {\n      size: {\n        xs: 'size-5 text-xs',\n        sm: 'size-7 text-xs',\n        md: 'size-9 text-sm',\n        lg: 'size-12 text-base',\n        xl: 'size-16 text-xl',\n      },\n      variant: {\n        default: 'bg-primary/10 text-primary',\n        monochrome: 'bg-muted text-muted-foreground',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n      variant: 'default',\n    },\n  },\n)\n\nfunction computeInitials(label: string): string {\n  const trimmed = label.trim()\n  if (!trimmed.length) return '?'\n  const parts = trimmed.split(/\\s+/).filter(Boolean)\n  if (parts.length === 1) {\n    return parts[0].slice(0, 2).toUpperCase()\n  }\n  const first = parts[0][0] ?? ''\n  const last = parts[parts.length - 1][0] ?? ''\n  return (first + last).toUpperCase()\n}\n\nexport type AvatarProps = {\n  label: string\n  src?: string | null\n  icon?: React.ReactNode\n  ariaLabel?: string\n} & VariantProps<typeof avatarVariants> &\n  Omit<React.HTMLAttributes<HTMLDivElement>, 'role' | 'aria-label'>\n\nexport const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(\n  ({ className, label, src, icon, size, variant, ariaLabel, ...rest }, ref) => {\n    const initials = React.useMemo(() => computeInitials(label), [label])\n    return (\n      <div\n        ref={ref}\n        role=\"img\"\n        aria-label={ariaLabel ?? label}\n        className={cn(avatarVariants({ size, variant }), className)}\n        {...rest}\n      >\n        {src ? (\n          <img src={src} alt=\"\" className=\"size-full object-cover\" aria-hidden=\"true\" />\n        ) : icon ? (\n          <span aria-hidden=\"true\" className=\"flex items-center justify-center [&>svg]:size-[55%]\">\n            {icon}\n          </span>\n        ) : (\n          <span aria-hidden=\"true\">{initials}</span>\n        )}\n      </div>\n    )\n  },\n)\n\nAvatar.displayName = 'Avatar'\n\nexport { avatarVariants }\n"],
-  "mappings": "AA2DU;AA3DV,YAAY,WAAW;AACvB,SAAS,WAA8B;AACvC,SAAS,UAAU;AAEnB,MAAM,iBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,SAAS;AAAA,QACP,SAAS;AAAA,QACT,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AACF;AAEA,SAAS,gBAAgB,OAAuB;AAC9C,QAAM,UAAU,MAAM,KAAK;AAC3B,MAAI,CAAC,QAAQ,OAAQ,QAAO;AAC5B,QAAM,QAAQ,QAAQ,MAAM,KAAK,EAAE,OAAO,OAAO;AACjD,MAAI,MAAM,WAAW,GAAG;AACtB,WAAO,MAAM,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,YAAY;AAAA,EAC1C;AACA,QAAM,QAAQ,MAAM,CAAC,EAAE,CAAC,KAAK;AAC7B,QAAM,OAAO,MAAM,MAAM,SAAS,CAAC,EAAE,CAAC,KAAK;AAC3C,UAAQ,QAAQ,MAAM,YAAY;AACpC;AAUO,MAAM,SAAS,MAAM;AAAA,EAC1B,CAAC,EAAE,WAAW,OAAO,KAAK,MAAM,MAAM,SAAS,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC3E,UAAM,WAAW,MAAM,QAAQ,MAAM,gBAAgB,KAAK,GAAG,CAAC,KAAK,CAAC;AACpE,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,cAAY,aAAa;AAAA,QACzB,WAAW,GAAG,eAAe,EAAE,MAAM,QAAQ,CAAC,GAAG,SAAS;AAAA,QACzD,GAAG;AAAA,QAEH,gBACC,oBAAC,SAAI,KAAU,KAAI,IAAG,WAAU,0BAAyB,eAAY,QAAO,IAC1E,OACF,oBAAC,UAAK,eAAY,QAAO,WAAU,uDAChC,gBACH,IAEA,oBAAC,UAAK,eAAY,QAAQ,oBAAS;AAAA;AAAA,IAEvC;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;",
+  "sourcesContent": ["import * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@open-mercato/shared/lib/utils'\n\nconst avatarVariants = cva(\n  'inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full font-semibold select-none',\n  {\n    variants: {\n      size: {\n        xs: 'size-5 text-xs',\n        sm: 'size-7 text-xs',\n        md: 'size-9 text-sm',\n        lg: 'size-12 text-base',\n        xl: 'size-16 text-xl',\n      },\n      variant: {\n        default: 'bg-primary/10 text-primary',\n        monochrome: 'bg-muted text-muted-foreground',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n      variant: 'default',\n    },\n  },\n)\n\nfunction computeInitials(label: string): string {\n  const trimmed = label.trim()\n  if (!trimmed.length) return '?'\n  const parts = trimmed.split(/\\s+/).filter(Boolean)\n  if (parts.length === 1) {\n    return parts[0].slice(0, 2).toUpperCase()\n  }\n  const first = parts[0][0] ?? ''\n  const last = parts[parts.length - 1][0] ?? ''\n  return (first + last).toUpperCase()\n}\n\nexport type AvatarProps = {\n  label: string\n  src?: string | null\n  icon?: React.ReactNode\n  ariaLabel?: string\n} & VariantProps<typeof avatarVariants> &\n  Omit<React.HTMLAttributes<HTMLDivElement>, 'role' | 'aria-label'>\n\nexport const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(\n  ({ className, label, src, icon, size, variant, ariaLabel, ...rest }, ref) => {\n    const initials = React.useMemo(() => computeInitials(label), [label])\n    return (\n      <div\n        ref={ref}\n        role=\"img\"\n        aria-label={ariaLabel ?? label}\n        className={cn(avatarVariants({ size, variant }), className)}\n        {...rest}\n      >\n        {src ? (\n          <img src={src} alt=\"\" className=\"size-full object-cover\" aria-hidden=\"true\" />\n        ) : icon ? (\n          <span aria-hidden=\"true\" className=\"flex items-center justify-center [&>svg]:size-[55%]\">\n            {icon}\n          </span>\n        ) : (\n          <span aria-hidden=\"true\">{initials}</span>\n        )}\n      </div>\n    )\n  },\n)\n\nAvatar.displayName = 'Avatar'\n\nexport { avatarVariants }\n\nexport type AvatarStackProps = {\n  children: React.ReactNode\n  max?: number\n  size?: VariantProps<typeof avatarVariants>['size']\n  className?: string\n}\n\nexport function AvatarStack({ children, max = 4, size = 'md', className }: AvatarStackProps) {\n  const items = React.Children.toArray(children)\n  const visible = items.slice(0, max)\n  const overflow = items.length - max\n\n  return (\n    <div className={cn('flex items-center [&>*:not(:first-child)]:-ml-2 [&>*]:ring-2 [&>*]:ring-background', className)}>\n      {visible}\n      {overflow > 0 && (\n        <Avatar label={`+${overflow}`} size={size} variant=\"monochrome\" className=\"-ml-2\" />\n      )}\n    </div>\n  )\n}\n"],
+  "mappings": "AA2DU,cA8BN,YA9BM;AA3DV,YAAY,WAAW;AACvB,SAAS,WAA8B;AACvC,SAAS,UAAU;AAEnB,MAAM,iBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,SAAS;AAAA,QACP,SAAS;AAAA,QACT,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AACF;AAEA,SAAS,gBAAgB,OAAuB;AAC9C,QAAM,UAAU,MAAM,KAAK;AAC3B,MAAI,CAAC,QAAQ,OAAQ,QAAO;AAC5B,QAAM,QAAQ,QAAQ,MAAM,KAAK,EAAE,OAAO,OAAO;AACjD,MAAI,MAAM,WAAW,GAAG;AACtB,WAAO,MAAM,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,YAAY;AAAA,EAC1C;AACA,QAAM,QAAQ,MAAM,CAAC,EAAE,CAAC,KAAK;AAC7B,QAAM,OAAO,MAAM,MAAM,SAAS,CAAC,EAAE,CAAC,KAAK;AAC3C,UAAQ,QAAQ,MAAM,YAAY;AACpC;AAUO,MAAM,SAAS,MAAM;AAAA,EAC1B,CAAC,EAAE,WAAW,OAAO,KAAK,MAAM,MAAM,SAAS,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC3E,UAAM,WAAW,MAAM,QAAQ,MAAM,gBAAgB,KAAK,GAAG,CAAC,KAAK,CAAC;AACpE,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,cAAY,aAAa;AAAA,QACzB,WAAW,GAAG,eAAe,EAAE,MAAM,QAAQ,CAAC,GAAG,SAAS;AAAA,QACzD,GAAG;AAAA,QAEH,gBACC,oBAAC,SAAI,KAAU,KAAI,IAAG,WAAU,0BAAyB,eAAY,QAAO,IAC1E,OACF,oBAAC,UAAK,eAAY,QAAO,WAAU,uDAChC,gBACH,IAEA,oBAAC,UAAK,eAAY,QAAQ,oBAAS;AAAA;AAAA,IAEvC;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;AAWd,SAAS,YAAY,EAAE,UAAU,MAAM,GAAG,OAAO,MAAM,UAAU,GAAqB;AAC3F,QAAM,QAAQ,MAAM,SAAS,QAAQ,QAAQ;AAC7C,QAAM,UAAU,MAAM,MAAM,GAAG,GAAG;AAClC,QAAM,WAAW,MAAM,SAAS;AAEhC,SACE,qBAAC,SAAI,WAAW,GAAG,sFAAsF,SAAS,GAC/G;AAAA;AAAA,IACA,WAAW,KACV,oBAAC,UAAO,OAAO,IAAI,QAAQ,IAAI,MAAY,SAAQ,cAAa,WAAU,SAAQ;AAAA,KAEtF;AAEJ;",
   "names": []
 }

package/dist/primitives/badge.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "@open-mercato/shared/lib/utils";
 const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
   {
     variants: {
       variant: {

package/dist/primitives/badge.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/primitives/badge.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@open-mercato/shared/lib/utils'\n\nconst badgeVariants = cva(\n  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',\n  {\n    variants: {\n      variant: {\n        default: 'border-transparent bg-primary text-primary-foreground shadow',\n        secondary: 'border-transparent bg-secondary text-secondary-foreground',\n        destructive: 'border-transparent bg-destructive text-destructive-foreground shadow',\n        outline: 'text-foreground',\n        muted: 'border-transparent bg-muted text-muted-foreground',\n        success: 'border-status-success-border bg-status-success-bg text-status-success-text',\n        warning: 'border-status-warning-border bg-status-warning-bg text-status-warning-text',\n        info: 'border-status-info-border bg-status-info-bg text-status-info-text',\n        neutral: 'border-status-neutral-border bg-status-neutral-bg text-status-neutral-text',\n        error: 'border-status-error-border bg-status-error-bg text-status-error-text',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  }\n)\n\nexport type BadgeProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof badgeVariants>\n\nexport const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(({ className, variant, ...props }, ref) => (\n  <div ref={ref} className={cn(badgeVariants({ variant }), className)} {...props} />\n))\n\nBadge.displayName = 'Badge'\n\nexport { badgeVariants }\n"],
+  "sourcesContent": ["import * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@open-mercato/shared/lib/utils'\n\nconst badgeVariants = cva(\n  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n  {\n    variants: {\n      variant: {\n        default: 'border-transparent bg-primary text-primary-foreground shadow',\n        secondary: 'border-transparent bg-secondary text-secondary-foreground',\n        destructive: 'border-transparent bg-destructive text-destructive-foreground shadow',\n        outline: 'text-foreground',\n        muted: 'border-transparent bg-muted text-muted-foreground',\n        success: 'border-status-success-border bg-status-success-bg text-status-success-text',\n        warning: 'border-status-warning-border bg-status-warning-bg text-status-warning-text',\n        info: 'border-status-info-border bg-status-info-bg text-status-info-text',\n        neutral: 'border-status-neutral-border bg-status-neutral-bg text-status-neutral-text',\n        error: 'border-status-error-border bg-status-error-bg text-status-error-text',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  }\n)\n\nexport type BadgeProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof badgeVariants>\n\nexport const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(({ className, variant, ...props }, ref) => (\n  <div ref={ref} className={cn(badgeVariants({ variant }), className)} {...props} />\n))\n\nBadge.displayName = 'Badge'\n\nexport { badgeVariants }\n"],
   "mappings": "AA8BE;AA9BF,YAAY,WAAW;AACvB,SAAS,WAA8B;AACvC,SAAS,UAAU;AAEnB,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,WAAW;AAAA,QACX,aAAa;AAAA,QACb,SAAS;AAAA,QACT,OAAO;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,QACT,MAAM;AAAA,QACN,SAAS;AAAA,QACT,OAAO;AAAA,MACT;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IACX;AAAA,EACF;AACF;AAIO,MAAM,QAAQ,MAAM,WAAuC,CAAC,EAAE,WAAW,SAAS,GAAG,MAAM,GAAG,QACnG,oBAAC,SAAI,KAAU,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS,GAAI,GAAG,OAAO,CACjF;AAED,MAAM,cAAc;",
   "names": []
 }

package/dist/primitives/button.js

@@ -3,12 +3,15 @@ import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import { cn } from "@open-mercato/shared/lib/utils";
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium cursor-pointer transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium cursor-pointer transition-all disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled disabled:border-border-disabled disabled:shadow-none disabled:[background-image:none] [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:outline-none focus-visible:shadow-focus aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-        destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary-hover",
+        destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 aria-invalid:ring-destructive dark:aria-invalid:ring-destructive dark:bg-destructive/10",
+        "destructive-outline": "border border-destructive/30 bg-background text-destructive shadow-xs hover:bg-destructive/10 dark:border-destructive/40 dark:hover:bg-destructive/15",
+        "destructive-soft": "bg-destructive/10 text-destructive hover:bg-destructive/15 dark:bg-destructive/15 dark:hover:bg-destructive/20",
+        "destructive-ghost": "text-destructive hover:bg-destructive/10 dark:hover:bg-destructive/15",
         outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
         secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
@@ -17,8 +20,9 @@ const buttonVariants = cva(
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        sm: "h-8 gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 px-6 has-[>svg]:px-4",
+        "2xs": "h-7 gap-1 px-2 py-0.5 has-[>svg]:px-1.5 text-xs",
         icon: "size-9"
       }
     },

package/dist/primitives/button.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/primitives/button.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@open-mercato/shared/lib/utils'\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium cursor-pointer transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',\n        outline:\n          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',\n        secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',\n        muted: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-9 px-4 py-2 has-[>svg]:px-3',\n        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',\n        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',\n        icon: 'size-9',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  }\n)\n\nexport function Button({\n  className,\n  variant,\n  size,\n  asChild = false,\n  ...props\n}: React.ComponentProps<'button'> &\n  VariantProps<typeof buttonVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot : 'button'\n  return <Comp data-slot=\"button\" className={cn(buttonVariants({ variant, size, className }))} {...props} />\n}\n\nexport { buttonVariants }\n\n"],
-  "mappings": "AA2CS;AA1CT,SAAS,YAAY;AACrB,SAAS,WAA8B;AACvC,SAAS,UAAU;AAEnB,MAAM,iBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,aACE;AAAA,QACF,SACE;AAAA,QACF,WAAW;AAAA,QACX,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAEO,SAAS,OAAO;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACL,GAC+D;AAC7D,QAAM,OAAO,UAAU,OAAO;AAC9B,SAAO,oBAAC,QAAK,aAAU,UAAS,WAAW,GAAG,eAAe,EAAE,SAAS,MAAM,UAAU,CAAC,CAAC,GAAI,GAAG,OAAO;AAC1G;",
+  "sourcesContent": ["import * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@open-mercato/shared/lib/utils'\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium cursor-pointer transition-all disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled disabled:border-border-disabled disabled:shadow-none disabled:[background-image:none] [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:outline-none focus-visible:shadow-focus aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary-hover',\n        destructive:\n          'bg-destructive text-white shadow-xs hover:bg-destructive/90 aria-invalid:ring-destructive dark:aria-invalid:ring-destructive dark:bg-destructive/10',\n        'destructive-outline':\n          'border border-destructive/30 bg-background text-destructive shadow-xs hover:bg-destructive/10 dark:border-destructive/40 dark:hover:bg-destructive/15',\n        'destructive-soft':\n          'bg-destructive/10 text-destructive hover:bg-destructive/15 dark:bg-destructive/15 dark:hover:bg-destructive/20',\n        'destructive-ghost':\n          'text-destructive hover:bg-destructive/10 dark:hover:bg-destructive/15',\n        outline:\n          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',\n        secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',\n        muted: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-9 px-4 py-2 has-[>svg]:px-3',\n        sm: 'h-8 gap-1.5 px-3 has-[>svg]:px-2.5',\n        lg: 'h-10 px-6 has-[>svg]:px-4',\n        '2xs': 'h-7 gap-1 px-2 py-0.5 has-[>svg]:px-1.5 text-xs',\n        icon: 'size-9',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  }\n)\n\nexport function Button({\n  className,\n  variant,\n  size,\n  asChild = false,\n  ...props\n}: React.ComponentProps<'button'> &\n  VariantProps<typeof buttonVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot : 'button'\n  return <Comp data-slot=\"button\" className={cn(buttonVariants({ variant, size, className }))} {...props} />\n}\n\nexport { buttonVariants }\n\n"],
+  "mappings": "AAkDS;AAjDT,SAAS,YAAY;AACrB,SAAS,WAA8B;AACvC,SAAS,UAAU;AAEnB,MAAM,iBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,aACE;AAAA,QACF,uBACE;AAAA,QACF,oBACE;AAAA,QACF,qBACE;AAAA,QACF,SACE;AAAA,QACF,WAAW;AAAA,QACX,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAEO,SAAS,OAAO;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACL,GAC+D;AAC7D,QAAM,OAAO,UAAU,OAAO;AAC9B,SAAO,oBAAC,QAAK,aAAU,UAAS,WAAW,GAAG,eAAe,EAAE,SAAS,MAAM,UAAU,CAAC,CAAC,GAAI,GAAG,OAAO;AAC1G;",
   "names": []
 }

package/dist/primitives/calendar.js

@@ -31,7 +31,7 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }) {
         ),
         month_grid: "w-full border-collapse space-y-1",
         weekdays: "flex",
-        weekday: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+        weekday: "text-muted-foreground rounded-md w-9 font-normal text-xs",
         weeks: "w-full border-collapse space-y-1",
         week: "flex w-full mt-2",
         day: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",

package/dist/primitives/calendar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/primitives/calendar.tsx"],
-  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { DayPicker } from 'react-day-picker'\nimport type { DayPickerProps } from 'react-day-picker'\nimport { ChevronLeft, ChevronRight } from 'lucide-react'\nimport { cn } from '@open-mercato/shared/lib/utils'\n\nexport type CalendarProps = DayPickerProps\n\nexport function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn('p-3', className)}\n      classNames={{\n        months: 'flex flex-col sm:flex-row gap-4',\n        month: 'space-y-4',\n        month_caption: 'flex justify-center pt-1 relative items-center',\n        caption_label: 'text-sm font-medium',\n        nav: 'flex items-center gap-1',\n        button_previous: cn(\n          'absolute left-1 h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n          'inline-flex items-center justify-center rounded-md text-sm font-medium',\n          'ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2',\n          'focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n          'hover:bg-accent hover:text-accent-foreground border-0'\n        ),\n        button_next: cn(\n          'absolute right-1 h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n          'inline-flex items-center justify-center rounded-md text-sm font-medium',\n          'ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2',\n          'focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n          'hover:bg-accent hover:text-accent-foreground border-0'\n        ),\n        month_grid: 'w-full border-collapse space-y-1',\n        weekdays: 'flex',\n        weekday: 'text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]',\n        weeks: 'w-full border-collapse space-y-1',\n        week: 'flex w-full mt-2',\n        day: 'h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20',\n        day_button: cn(\n          'h-9 w-9 p-0 font-normal aria-selected:opacity-100',\n          'inline-flex items-center justify-center rounded-md text-sm',\n          'ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2',\n          'focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none',\n          'hover:bg-accent hover:text-accent-foreground'\n        ),\n        selected:\n          'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground rounded-md',\n        today: 'bg-accent text-accent-foreground rounded-md',\n        outside:\n          'day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30',\n        disabled: 'text-muted-foreground opacity-50',\n        hidden: 'invisible',\n        ...classNames,\n      }}\n      components={{\n        Chevron: ({ orientation }) =>\n          orientation === 'left' ? (\n            <ChevronLeft className=\"h-4 w-4\" />\n          ) : (\n            <ChevronRight className=\"h-4 w-4\" />\n          ),\n      }}\n      {...props}\n    />\n  )\n}\n"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { DayPicker } from 'react-day-picker'\nimport type { DayPickerProps } from 'react-day-picker'\nimport { ChevronLeft, ChevronRight } from 'lucide-react'\nimport { cn } from '@open-mercato/shared/lib/utils'\n\nexport type CalendarProps = DayPickerProps\n\nexport function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn('p-3', className)}\n      classNames={{\n        months: 'flex flex-col sm:flex-row gap-4',\n        month: 'space-y-4',\n        month_caption: 'flex justify-center pt-1 relative items-center',\n        caption_label: 'text-sm font-medium',\n        nav: 'flex items-center gap-1',\n        button_previous: cn(\n          'absolute left-1 h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n          'inline-flex items-center justify-center rounded-md text-sm font-medium',\n          'ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2',\n          'focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n          'hover:bg-accent hover:text-accent-foreground border-0'\n        ),\n        button_next: cn(\n          'absolute right-1 h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n          'inline-flex items-center justify-center rounded-md text-sm font-medium',\n          'ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2',\n          'focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n          'hover:bg-accent hover:text-accent-foreground border-0'\n        ),\n        month_grid: 'w-full border-collapse space-y-1',\n        weekdays: 'flex',\n        weekday: 'text-muted-foreground rounded-md w-9 font-normal text-xs',\n        weeks: 'w-full border-collapse space-y-1',\n        week: 'flex w-full mt-2',\n        day: 'h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20',\n        day_button: cn(\n          'h-9 w-9 p-0 font-normal aria-selected:opacity-100',\n          'inline-flex items-center justify-center rounded-md text-sm',\n          'ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2',\n          'focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none',\n          'hover:bg-accent hover:text-accent-foreground'\n        ),\n        selected:\n          'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground rounded-md',\n        today: 'bg-accent text-accent-foreground rounded-md',\n        outside:\n          'day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30',\n        disabled: 'text-muted-foreground opacity-50',\n        hidden: 'invisible',\n        ...classNames,\n      }}\n      components={{\n        Chevron: ({ orientation }) =>\n          orientation === 'left' ? (\n            <ChevronLeft className=\"h-4 w-4\" />\n          ) : (\n            <ChevronRight className=\"h-4 w-4\" />\n          ),\n      }}\n      {...props}\n    />\n  )\n}\n"],
   "mappings": ";AA4DY;AAzDZ,SAAS,iBAAiB;AAE1B,SAAS,aAAa,oBAAoB;AAC1C,SAAS,UAAU;AAIZ,SAAS,SAAS,EAAE,WAAW,YAAY,kBAAkB,MAAM,GAAG,MAAM,GAAkB;AACnG,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,OAAO,SAAS;AAAA,MAC9B,YAAY;AAAA,QACV,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,eAAe;AAAA,QACf,eAAe;AAAA,QACf,KAAK;AAAA,QACL,iBAAiB;AAAA,UACf;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,aAAa;AAAA,UACX;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,SAAS;AAAA,QACT,OAAO;AAAA,QACP,MAAM;AAAA,QACN,KAAK;AAAA,QACL,YAAY;AAAA,UACV;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,UACE;AAAA,QACF,OAAO;AAAA,QACP,SACE;AAAA,QACF,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,GAAG;AAAA,MACL;AAAA,MACA,YAAY;AAAA,QACV,SAAS,CAAC,EAAE,YAAY,MACtB,gBAAgB,SACd,oBAAC,eAAY,WAAU,WAAU,IAEjC,oBAAC,gBAAa,WAAU,WAAU;AAAA,MAExC;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;",
   "names": []
 }

package/dist/primitives/checkbox-field.js

@@ -0,0 +1,63 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@open-mercato/shared/lib/utils";
+import { Checkbox } from "./checkbox.js";
+const CheckboxField = React.forwardRef(({
+  id: idProp,
+  label,
+  sublabel,
+  description,
+  badge,
+  link,
+  flip = false,
+  containerClassName,
+  contentClassName,
+  size = "md",
+  className,
+  disabled,
+  ...checkboxProps
+}, ref) => {
+  const reactId = React.useId();
+  const id = idProp ?? `checkbox-field-${reactId}`;
+  const checkbox = /* @__PURE__ */ jsx(
+    Checkbox,
+    {
+      ref,
+      id,
+      size,
+      disabled,
+      className: cn("mt-0.5", className),
+      ...checkboxProps
+    }
+  );
+  const content = /* @__PURE__ */ jsxs("div", { className: cn("flex flex-1 min-w-0 flex-col gap-2.5", contentClassName), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1", children: [
+        /* @__PURE__ */ jsx(
+          "label",
+          {
+            htmlFor: id,
+            className: cn(
+              "text-sm font-medium leading-5 text-foreground select-none",
+              disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer"
+            ),
+            children: label
+          }
+        ),
+        sublabel ? /* @__PURE__ */ jsx("span", { className: "text-xs leading-4 text-muted-foreground select-none", children: sublabel }) : null,
+        badge ? /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0", children: badge }) : null
+      ] }),
+      description ? /* @__PURE__ */ jsx("p", { className: "text-xs leading-4 text-muted-foreground", children: description }) : null
+    ] }),
+    link ? /* @__PURE__ */ jsx("div", { className: "flex", children: link }) : null
+  ] });
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-start gap-2", flip && "flex-row-reverse", containerClassName), children: [
+    flip ? content : checkbox,
+    flip ? checkbox : content
+  ] });
+});
+CheckboxField.displayName = "CheckboxField";
+export {
+  CheckboxField
+};
+//# sourceMappingURL=checkbox-field.js.map

package/dist/primitives/checkbox-field.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives/checkbox-field.tsx"],
+  "sourcesContent": ["import * as React from \"react\"\nimport { cn } from \"@open-mercato/shared/lib/utils\"\nimport { Checkbox, type CheckboxProps } from \"./checkbox\"\n\nexport type CheckboxFieldProps = Omit<CheckboxProps, \"id\"> & {\n  id?: string\n  label: React.ReactNode\n  sublabel?: React.ReactNode\n  description?: React.ReactNode\n  badge?: React.ReactNode\n  link?: React.ReactNode\n  /** When true, renders the checkbox on the right of the label content. */\n  flip?: boolean\n  /** Additional className for the outer wrapper. */\n  containerClassName?: string\n  /** Additional className for the right-side content stack. */\n  contentClassName?: string\n}\n\nexport const CheckboxField = React.forwardRef<\n  React.ElementRef<typeof Checkbox>,\n  CheckboxFieldProps\n>(({\n  id: idProp,\n  label,\n  sublabel,\n  description,\n  badge,\n  link,\n  flip = false,\n  containerClassName,\n  contentClassName,\n  size = \"md\",\n  className,\n  disabled,\n  ...checkboxProps\n}, ref) => {\n  const reactId = React.useId()\n  const id = idProp ?? `checkbox-field-${reactId}`\n\n  const checkbox = (\n    <Checkbox\n      ref={ref}\n      id={id}\n      size={size}\n      disabled={disabled}\n      className={cn(\"mt-0.5\", className)}\n      {...checkboxProps}\n    />\n  )\n\n  const content = (\n    <div className={cn(\"flex flex-1 min-w-0 flex-col gap-2.5\", contentClassName)}>\n      <div className=\"flex flex-col gap-1\">\n        <div className=\"flex flex-wrap items-center gap-1\">\n          <label\n            htmlFor={id}\n            className={cn(\n              \"text-sm font-medium leading-5 text-foreground select-none\",\n              disabled ? \"cursor-not-allowed opacity-60\" : \"cursor-pointer\"\n            )}\n          >\n            {label}\n          </label>\n          {sublabel ? (\n            <span className=\"text-xs leading-4 text-muted-foreground select-none\">{sublabel}</span>\n          ) : null}\n          {badge ? <span className=\"inline-flex shrink-0\">{badge}</span> : null}\n        </div>\n        {description ? (\n          <p className=\"text-xs leading-4 text-muted-foreground\">{description}</p>\n        ) : null}\n      </div>\n      {link ? <div className=\"flex\">{link}</div> : null}\n    </div>\n  )\n\n  return (\n    <div className={cn(\"flex items-start gap-2\", flip && \"flex-row-reverse\", containerClassName)}>\n      {flip ? content : checkbox}\n      {flip ? checkbox : content}\n    </div>\n  )\n})\nCheckboxField.displayName = \"CheckboxField\"\n"],
+  "mappings": "AAyCI,cAaI,YAbJ;AAzCJ,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,gBAAoC;AAiBtC,MAAM,gBAAgB,MAAM,WAGjC,CAAC;AAAA,EACD,IAAI;AAAA,EACJ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,QAAQ;AACT,QAAM,UAAU,MAAM,MAAM;AAC5B,QAAM,KAAK,UAAU,kBAAkB,OAAO;AAE9C,QAAM,WACJ;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,GAAG,UAAU,SAAS;AAAA,MAChC,GAAG;AAAA;AAAA,EACN;AAGF,QAAM,UACJ,qBAAC,SAAI,WAAW,GAAG,wCAAwC,gBAAgB,GACzE;AAAA,yBAAC,SAAI,WAAU,uBACb;AAAA,2BAAC,SAAI,WAAU,qCACb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,WAAW;AAAA,cACT;AAAA,cACA,WAAW,kCAAkC;AAAA,YAC/C;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QACC,WACC,oBAAC,UAAK,WAAU,uDAAuD,oBAAS,IAC9E;AAAA,QACH,QAAQ,oBAAC,UAAK,WAAU,wBAAwB,iBAAM,IAAU;AAAA,SACnE;AAAA,MACC,cACC,oBAAC,OAAE,WAAU,2CAA2C,uBAAY,IAClE;AAAA,OACN;AAAA,IACC,OAAO,oBAAC,SAAI,WAAU,QAAQ,gBAAK,IAAS;AAAA,KAC/C;AAGF,SACE,qBAAC,SAAI,WAAW,GAAG,0BAA0B,QAAQ,oBAAoB,kBAAkB,GACxF;AAAA,WAAO,UAAU;AAAA,IACjB,OAAO,WAAW;AAAA,KACrB;AAEJ,CAAC;AACD,cAAc,cAAc;",
+  "names": []
+}

package/dist/primitives/checkbox.js

@@ -1,28 +1,42 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { Check } from "lucide-react";
+import { Check, Minus } from "lucide-react";
+import { cva } from "class-variance-authority";
 import { cn } from "@open-mercato/shared/lib/utils";
-const Checkbox = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  CheckboxPrimitive.Root,
+const checkboxVariants = cva(
+  "peer shrink-0 rounded-[4px] border border-input bg-background shadow-xs ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-indigo/40 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-accent-indigo data-[state=checked]:text-accent-indigo-foreground data-[state=checked]:border-accent-indigo data-[state=indeterminate]:bg-accent-indigo data-[state=indeterminate]:text-accent-indigo-foreground data-[state=indeterminate]:border-accent-indigo hover:border-accent-indigo/60 transition-colors",
   {
-    ref,
-    className: cn(
-      "peer size-4 shrink-0 rounded-sm border border-input bg-background shadow-xs ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ jsx(
-      CheckboxPrimitive.Indicator,
-      {
-        className: cn("flex items-center justify-center text-current"),
-        children: /* @__PURE__ */ jsx(Check, { className: "size-3.5" })
+    variants: {
+      size: {
+        sm: "size-4",
+        md: "size-5"
       }
-    )
+    },
+    defaultVariants: {
+      size: "sm"
+    }
   }
-));
+);
+const indicatorIconBySize = {
+  sm: "size-3.5",
+  md: "size-4"
+};
+const Checkbox = React.forwardRef(({ className, size, ...props }, ref) => {
+  const iconClass = indicatorIconBySize[size ?? "sm"];
+  return /* @__PURE__ */ jsx(
+    CheckboxPrimitive.Root,
+    {
+      ref,
+      className: cn(checkboxVariants({ size, className })),
+      ...props,
+      children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: cn("flex items-center justify-center text-current"), children: props.checked === "indeterminate" ? /* @__PURE__ */ jsx(Minus, { className: iconClass, "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Check, { className: iconClass, "aria-hidden": "true" }) })
+    }
+  );
+});
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 export {
-  Checkbox
+  Checkbox,
+  checkboxVariants
 };
 //# sourceMappingURL=checkbox.js.map

package/dist/primitives/checkbox.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/primitives/checkbox.tsx"],
-  "sourcesContent": ["import * as React from \"react\"\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\"\nimport { Check } from \"lucide-react\"\n\nimport { cn } from \"@open-mercato/shared/lib/utils\"\n\nconst Checkbox = React.forwardRef<\n  React.ElementRef<typeof CheckboxPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <CheckboxPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"peer size-4 shrink-0 rounded-sm border border-input bg-background shadow-xs ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary\",\n      className\n    )}\n    {...props}\n  >\n    <CheckboxPrimitive.Indicator\n      className={cn(\"flex items-center justify-center text-current\")}\n    >\n      <Check className=\"size-3.5\" />\n    </CheckboxPrimitive.Indicator>\n  </CheckboxPrimitive.Root>\n))\nCheckbox.displayName = CheckboxPrimitive.Root.displayName\n\nexport { Checkbox }\n"],
-  "mappings": "AAqBM;AArBN,YAAY,WAAW;AACvB,YAAY,uBAAuB;AACnC,SAAS,aAAa;AAEtB,SAAS,UAAU;AAEnB,MAAM,WAAW,MAAM,WAGrB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC,kBAAkB;AAAA,EAAlB;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA,IAEJ;AAAA,MAAC,kBAAkB;AAAA,MAAlB;AAAA,QACC,WAAW,GAAG,+CAA+C;AAAA,QAE7D,8BAAC,SAAM,WAAU,YAAW;AAAA;AAAA,IAC9B;AAAA;AACF,CACD;AACD,SAAS,cAAc,kBAAkB,KAAK;",
+  "sourcesContent": ["import * as React from \"react\"\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\"\nimport { Check, Minus } from \"lucide-react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@open-mercato/shared/lib/utils\"\n\nconst checkboxVariants = cva(\n  \"peer shrink-0 rounded-[4px] border border-input bg-background shadow-xs ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-indigo/40 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-accent-indigo data-[state=checked]:text-accent-indigo-foreground data-[state=checked]:border-accent-indigo data-[state=indeterminate]:bg-accent-indigo data-[state=indeterminate]:text-accent-indigo-foreground data-[state=indeterminate]:border-accent-indigo hover:border-accent-indigo/60 transition-colors\",\n  {\n    variants: {\n      size: {\n        sm: \"size-4\",\n        md: \"size-5\",\n      },\n    },\n    defaultVariants: {\n      size: \"sm\",\n    },\n  }\n)\n\nconst indicatorIconBySize = {\n  sm: \"size-3.5\",\n  md: \"size-4\",\n} as const\n\nexport type CheckboxProps = React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> &\n  VariantProps<typeof checkboxVariants>\n\nconst Checkbox = React.forwardRef<\n  React.ElementRef<typeof CheckboxPrimitive.Root>,\n  CheckboxProps\n>(({ className, size, ...props }, ref) => {\n  const iconClass = indicatorIconBySize[size ?? \"sm\"]\n  return (\n    <CheckboxPrimitive.Root\n      ref={ref}\n      className={cn(checkboxVariants({ size, className }))}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator className={cn(\"flex items-center justify-center text-current\")}>\n        {props.checked === \"indeterminate\" ? (\n          <Minus className={iconClass} aria-hidden=\"true\" />\n        ) : (\n          <Check className={iconClass} aria-hidden=\"true\" />\n        )}\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n})\nCheckbox.displayName = CheckboxPrimitive.Root.displayName\n\nexport { Checkbox, checkboxVariants }\n"],
+  "mappings": "AA2CU;AA3CV,YAAY,WAAW;AACvB,YAAY,uBAAuB;AACnC,SAAS,OAAO,aAAa;AAC7B,SAAS,WAA8B;AAEvC,SAAS,UAAU;AAEnB,MAAM,mBAAmB;AAAA,EACvB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAEA,MAAM,sBAAsB;AAAA,EAC1B,IAAI;AAAA,EACJ,IAAI;AACN;AAKA,MAAM,WAAW,MAAM,WAGrB,CAAC,EAAE,WAAW,MAAM,GAAG,MAAM,GAAG,QAAQ;AACxC,QAAM,YAAY,oBAAoB,QAAQ,IAAI;AAClD,SACE;AAAA,IAAC,kBAAkB;AAAA,IAAlB;AAAA,MACC;AAAA,MACA,WAAW,GAAG,iBAAiB,EAAE,MAAM,UAAU,CAAC,CAAC;AAAA,MAClD,GAAG;AAAA,MAEJ,8BAAC,kBAAkB,WAAlB,EAA4B,WAAW,GAAG,+CAA+C,GACvF,gBAAM,YAAY,kBACjB,oBAAC,SAAM,WAAW,WAAW,eAAY,QAAO,IAEhD,oBAAC,SAAM,WAAW,WAAW,eAAY,QAAO,GAEpD;AAAA;AAAA,EACF;AAEJ,CAAC;AACD,SAAS,cAAc,kBAAkB,KAAK;",
   "names": []
 }

package/dist/primitives/dialog.js

@@ -14,7 +14,7 @@ const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__P
   {
     ref,
     className: cn(
-      "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm transition-opacity data-[state=open]:animate-in data-[state=closed]:animate-out",
+      "fixed inset-0 z-modal bg-black/50 backdrop-blur-sm transition-opacity data-[state=open]:animate-in data-[state=closed]:animate-out",
       className
     ),
     ...props
@@ -41,9 +41,9 @@ const DialogContent = React.forwardRef(({ className, children, ...props }, ref)
         ref,
         "data-dialog-content": "",
         className: cn(
-          "fixed inset-x-0 bottom-0 z-50 flex min-h-[50vh] max-h-[70vh] w-full translate-x-0 translate-y-0 flex-col gap-4 overflow-y-auto rounded-t-2xl border-t bg-card p-6 shadow-lg",
+          "fixed inset-x-0 bottom-0 z-modal flex min-h-[50vh] max-h-[70vh] w-full translate-x-0 translate-y-0 flex-col gap-4 overflow-y-auto rounded-t-2xl border-t bg-card p-6 shadow-lg",
           "sm:inset-auto sm:left-1/2 sm:top-1/2 sm:min-h-0 sm:h-auto sm:w-full sm:max-w-lg sm:max-h-[90vh] sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-xl sm:border",
-          "focus:outline-none data-[state=open]:animate-in data-[state=closed]:animate-out",
+          "focus-visible:outline-none data-[state=open]:animate-in data-[state=closed]:animate-out",
           className
         ),
         ...props,
@@ -52,7 +52,7 @@ const DialogContent = React.forwardRef(({ className, children, ...props }, ref)
             DialogClose,
             {
               "data-dialog-close": "",
-              className: "absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+              className: "absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
               "aria-label": t("ui.dialog.close.ariaLabel", "Close"),
               children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
             }