@open-mercato/ui 0.6.1-develop.3256.1.fe3dec2464 → 0.6.1-develop.3260.1.dc719cac84

package/dist/primitives/accordion.js

@@ -0,0 +1,137 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown, Minus, Plus } from "lucide-react";
+import { cva } from "class-variance-authority";
+import { cn } from "@open-mercato/shared/lib/utils";
+const accordionItemVariants = cva(
+  // `--accordion-indent` defaults to the container padding (14px). The
+  // `has-[…trigger-left-icon]` Tailwind v4 variant promotes it to 44px
+  // (icon 20 + gap 10 + container padding 14) whenever an `AccordionTrigger`
+  // declares a `leftIcon`, so `AccordionContent` aligns with the title text
+  // — matches Figma 210:4064 (Active state) without React state or hydration
+  // flash.
+  "overflow-hidden rounded-[10px] transition-colors [--accordion-indent:14px] has-[[data-slot=accordion-trigger-left-icon]]:[--accordion-indent:44px]",
+  {
+    variants: {
+      variant: {
+        // Figma 210:4021 (Default), 210:4048 (Hover), 210:4064 (Active):
+        // closed = white card + soft border + x-small shadow,
+        // hover (closed) = weak-50 bg, no border, no shadow,
+        // open = weak-50 bg, no border, no shadow.
+        card: "border border-border bg-card shadow-xs data-[state=open]:border-transparent data-[state=open]:bg-muted data-[state=open]:shadow-none data-[state=closed]:hover:border-transparent data-[state=closed]:hover:bg-muted data-[state=closed]:hover:shadow-none",
+        // For embedded use cases (e.g. FAQ block on a coloured surface or
+        // borderless nav-style list where the surrounding container owns
+        // the visual chrome).
+        borderless: "border-transparent bg-transparent shadow-none"
+      }
+    },
+    defaultVariants: { variant: "card" }
+  }
+);
+const Accordion = AccordionPrimitive.Root;
+const AccordionItem = React.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx(
+  AccordionPrimitive.Item,
+  {
+    ref,
+    "data-slot": "accordion-item",
+    className: cn(accordionItemVariants({ variant }), className),
+    ...props
+  }
+));
+AccordionItem.displayName = "AccordionItem";
+const AccordionHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AccordionPrimitive.Header,
+  {
+    ref,
+    "data-slot": "accordion-header",
+    className: cn("flex", className),
+    ...props
+  }
+));
+AccordionHeader.displayName = "AccordionHeader";
+const AccordionTrigger = React.forwardRef(
+  ({
+    className,
+    leftIcon,
+    triggerIcon = "plus-minus",
+    iconPosition = "end",
+    indicator,
+    headerClassName,
+    children,
+    ...props
+  }, ref) => {
+    const indicatorNode = indicator !== void 0 ? indicator : triggerIcon === "chevron" ? /* @__PURE__ */ jsx(ChevronDown, { className: "size-5 transition-transform duration-200 group-data-[state=open]/accordion-trigger:rotate-180", "aria-hidden": "true" }) : triggerIcon === "plus-minus" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Plus, { className: "size-5 group-data-[state=open]/accordion-trigger:hidden", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx(Minus, { className: "hidden size-5 group-data-[state=open]/accordion-trigger:block", "aria-hidden": "true" })
+    ] }) : null;
+    const renderLeftIcon = Boolean(leftIcon) && iconPosition === "end";
+    return /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: cn("flex", headerClassName), "data-slot": "accordion-header", children: /* @__PURE__ */ jsxs(
+      AccordionPrimitive.Trigger,
+      {
+        ref,
+        "data-slot": "accordion-trigger",
+        className: cn(
+          "group/accordion-trigger flex w-full items-start gap-2.5 p-3.5 text-left text-sm font-medium leading-5 tracking-tight text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50",
+          className
+        ),
+        ...props,
+        children: [
+          iconPosition === "start" && indicatorNode ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "inline-flex size-5 shrink-0 items-center justify-center text-foreground",
+              "data-slot": "accordion-trigger-indicator",
+              "aria-hidden": "true",
+              children: indicatorNode
+            }
+          ) : null,
+          renderLeftIcon ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "inline-flex size-5 shrink-0 items-center justify-center text-muted-foreground [&>svg]:size-5",
+              "data-slot": "accordion-trigger-left-icon",
+              "aria-hidden": "true",
+              children: leftIcon
+            }
+          ) : null,
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 self-center", "data-slot": "accordion-trigger-label", children }),
+          iconPosition === "end" && indicatorNode ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "inline-flex size-5 shrink-0 items-center justify-center text-foreground",
+              "data-slot": "accordion-trigger-indicator",
+              "aria-hidden": "true",
+              children: indicatorNode
+            }
+          ) : null
+        ]
+      }
+    ) });
+  }
+);
+AccordionTrigger.displayName = "AccordionTrigger";
+const AccordionContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  AccordionPrimitive.Content,
+  {
+    ref,
+    "data-slot": "accordion-content",
+    className: cn(
+      "overflow-hidden text-sm leading-5 text-muted-foreground data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx("div", { className: "pb-3.5 pt-0 pl-[var(--accordion-indent)] pr-[var(--accordion-indent)]", children })
+  }
+));
+AccordionContent.displayName = "AccordionContent";
+export {
+  Accordion,
+  AccordionContent,
+  AccordionHeader,
+  AccordionItem,
+  AccordionTrigger,
+  accordionItemVariants
+};
+//# sourceMappingURL=accordion.js.map

package/dist/primitives/accordion.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives/accordion.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport * as AccordionPrimitive from '@radix-ui/react-accordion'\nimport { ChevronDown, Minus, Plus } from 'lucide-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nimport { cn } from '@open-mercato/shared/lib/utils'\n\nexport type AccordionTriggerIcon = 'plus-minus' | 'chevron' | 'none'\nexport type AccordionIconPosition = 'end' | 'start'\n\nconst accordionItemVariants = cva(\n  // `--accordion-indent` defaults to the container padding (14px). The\n  // `has-[\u2026trigger-left-icon]` Tailwind v4 variant promotes it to 44px\n  // (icon 20 + gap 10 + container padding 14) whenever an `AccordionTrigger`\n  // declares a `leftIcon`, so `AccordionContent` aligns with the title text\n  // \u2014 matches Figma 210:4064 (Active state) without React state or hydration\n  // flash.\n  'overflow-hidden rounded-[10px] transition-colors [--accordion-indent:14px] has-[[data-slot=accordion-trigger-left-icon]]:[--accordion-indent:44px]',\n  {\n    variants: {\n      variant: {\n        // Figma 210:4021 (Default), 210:4048 (Hover), 210:4064 (Active):\n        // closed = white card + soft border + x-small shadow,\n        // hover (closed) = weak-50 bg, no border, no shadow,\n        // open = weak-50 bg, no border, no shadow.\n        card:\n          'border border-border bg-card shadow-xs ' +\n          'data-[state=open]:border-transparent data-[state=open]:bg-muted data-[state=open]:shadow-none ' +\n          'data-[state=closed]:hover:border-transparent data-[state=closed]:hover:bg-muted data-[state=closed]:hover:shadow-none',\n        // For embedded use cases (e.g. FAQ block on a coloured surface or\n        // borderless nav-style list where the surrounding container owns\n        // the visual chrome).\n        borderless: 'border-transparent bg-transparent shadow-none',\n      },\n    },\n    defaultVariants: { variant: 'card' },\n  },\n)\n\nconst Accordion = AccordionPrimitive.Root\n\ntype AccordionItemProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> &\n  VariantProps<typeof accordionItemVariants>\n\nconst AccordionItem = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Item>,\n  AccordionItemProps\n>(({ className, variant, ...props }, ref) => (\n  <AccordionPrimitive.Item\n    ref={ref}\n    data-slot=\"accordion-item\"\n    className={cn(accordionItemVariants({ variant }), className)}\n    {...props}\n  />\n))\nAccordionItem.displayName = 'AccordionItem'\n\nconst AccordionHeader = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Header>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Header>\n>(({ className, ...props }, ref) => (\n  <AccordionPrimitive.Header\n    ref={ref}\n    data-slot=\"accordion-header\"\n    className={cn('flex', className)}\n    {...props}\n  />\n))\nAccordionHeader.displayName = 'AccordionHeader'\n\ntype AccordionTriggerProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> & {\n  /**\n   * Leading icon (Figma 210:4017 `question-line` slot). Renders as a\n   * 20\u00D720 decorative glyph before the label. Pass any Lucide icon or\n   * custom element; omit to skip the slot.\n   *\n   * When present and `iconPosition=\"end\"`, the parent `AccordionItem`\n   * auto-promotes `AccordionContent`'s horizontal padding to 44px so the\n   * description aligns with the title text.\n   */\n  leftIcon?: React.ReactNode\n  /**\n   * Trailing indicator style. Figma reference uses `'plus-minus'`\n   * (add-line / subtract-line) \u2014 the default. `'chevron'` swaps in a\n   * rotating ChevronDown for shadcn-style consumers. `'none'` disables\n   * the indicator entirely (useful when `indicator` carries the visual).\n   */\n  triggerIcon?: AccordionTriggerIcon\n  /**\n   * Where the open/close indicator sits. `'end'` (default) puts it on\n   * the trailing edge per Figma `Flip Icon = Off`; `'start'` mirrors the\n   * Figma `Flip Icon = On` variant. With `'start'`, `leftIcon` is\n   * intentionally suppressed because the indicator already occupies the\n   * leading slot \u2014 pass any decorative glyph as the indicator itself.\n   */\n  iconPosition?: AccordionIconPosition\n  /**\n   * Custom indicator override. When provided, replaces the\n   * `triggerIcon` plus/chevron node entirely \u2014 useful for status\n   * badges, step numbers, or progress dots.\n   */\n  indicator?: React.ReactNode\n  /**\n   * Extra className applied to the internal `AccordionPrimitive.Header`\n   * (`<h3>`) wrapper. Use this when the trigger row needs to share its\n   * line with sibling action buttons (e.g. a kebab menu next to the\n   * Accordion list of settings rows) \u2014 the header can then take\n   * `flex-1` while the sibling stays its natural size.\n   */\n  headerClassName?: string\n}\n\nconst AccordionTrigger = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Trigger>,\n  AccordionTriggerProps\n>(\n  (\n    {\n      className,\n      leftIcon,\n      triggerIcon = 'plus-minus',\n      iconPosition = 'end',\n      indicator,\n      headerClassName,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const indicatorNode =\n      indicator !== undefined\n        ? indicator\n        : triggerIcon === 'chevron'\n          ? <ChevronDown className=\"size-5 transition-transform duration-200 group-data-[state=open]/accordion-trigger:rotate-180\" aria-hidden=\"true\" />\n          : triggerIcon === 'plus-minus'\n            ? (\n              <>\n                <Plus className=\"size-5 group-data-[state=open]/accordion-trigger:hidden\" aria-hidden=\"true\" />\n                <Minus className=\"hidden size-5 group-data-[state=open]/accordion-trigger:block\" aria-hidden=\"true\" />\n              </>\n            )\n            : null\n\n    const renderLeftIcon = Boolean(leftIcon) && iconPosition === 'end'\n\n    return (\n      <AccordionPrimitive.Header className={cn('flex', headerClassName)} data-slot=\"accordion-header\">\n        <AccordionPrimitive.Trigger\n          ref={ref}\n          data-slot=\"accordion-trigger\"\n          className={cn(\n            'group/accordion-trigger flex w-full items-start gap-2.5 p-3.5 text-left text-sm font-medium leading-5 tracking-tight text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50',\n            className,\n          )}\n          {...props}\n        >\n          {iconPosition === 'start' && indicatorNode ? (\n            <span\n              className=\"inline-flex size-5 shrink-0 items-center justify-center text-foreground\"\n              data-slot=\"accordion-trigger-indicator\"\n              aria-hidden=\"true\"\n            >\n              {indicatorNode}\n            </span>\n          ) : null}\n          {renderLeftIcon ? (\n            <span\n              className=\"inline-flex size-5 shrink-0 items-center justify-center text-muted-foreground [&>svg]:size-5\"\n              data-slot=\"accordion-trigger-left-icon\"\n              aria-hidden=\"true\"\n            >\n              {leftIcon}\n            </span>\n          ) : null}\n          <span className=\"min-w-0 flex-1 self-center\" data-slot=\"accordion-trigger-label\">\n            {children}\n          </span>\n          {iconPosition === 'end' && indicatorNode ? (\n            <span\n              className=\"inline-flex size-5 shrink-0 items-center justify-center text-foreground\"\n              data-slot=\"accordion-trigger-indicator\"\n              aria-hidden=\"true\"\n            >\n              {indicatorNode}\n            </span>\n          ) : null}\n        </AccordionPrimitive.Trigger>\n      </AccordionPrimitive.Header>\n    )\n  },\n)\nAccordionTrigger.displayName = 'AccordionTrigger'\n\ntype AccordionContentProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n\nconst AccordionContent = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Content>,\n  AccordionContentProps\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Content\n    ref={ref}\n    data-slot=\"accordion-content\"\n    className={cn(\n      'overflow-hidden text-sm leading-5 text-muted-foreground data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',\n      className,\n    )}\n    {...props}\n  >\n    <div className=\"pb-3.5 pt-0 pl-[var(--accordion-indent)] pr-[var(--accordion-indent)]\">\n      {children}\n    </div>\n  </AccordionPrimitive.Content>\n))\nAccordionContent.displayName = 'AccordionContent'\n\nexport {\n  Accordion,\n  AccordionItem,\n  AccordionHeader,\n  AccordionTrigger,\n  AccordionContent,\n  accordionItemVariants,\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/primitives/alert.js

@@ -1,38 +1,206 @@
-import { jsx } from "react/jsx-runtime";
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { AlertCircle, CheckCircle2, Info, Rocket, X, AlertTriangle } from "lucide-react";
 import { cva } from "class-variance-authority";
 import { cn } from "@open-mercato/shared/lib/utils";
+const legacyVariantToStatus = {
+  default: "information",
+  destructive: "error",
+  success: "success",
+  warning: "warning",
+  info: "information"
+};
 const alertVariants = cva(
-  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-8",
+  "relative flex w-full gap-2 transition-colors",
   {
     variants: {
-      variant: {
-        default: "border-border bg-background text-foreground [&>svg]:text-foreground",
-        destructive: "border-status-error-border bg-status-error-bg text-status-error-text [&>svg]:text-status-error-icon",
-        success: "border-status-success-border bg-status-success-bg text-status-success-text [&>svg]:text-status-success-icon",
-        warning: "border-status-warning-border bg-status-warning-bg text-status-warning-text [&>svg]:text-status-warning-icon",
-        info: "border-status-info-border bg-status-info-bg text-status-info-text [&>svg]:text-status-info-icon"
+      status: {
+        error: "",
+        warning: "",
+        success: "",
+        information: "",
+        feature: ""
+      },
+      style: {
+        filled: "",
+        light: "",
+        lighter: "",
+        stroke: ""
+      },
+      size: {
+        // Figma X-Small: px-[8px] py-[6px], radius-8, Paragraph/X Small (12/16)
+        xs: "min-h-8 items-center rounded-lg px-2 py-1.5 text-xs leading-4 tracking-tight",
+        // Figma Small: px-[10px] py-[8px], radius-8, Paragraph/Small (14/20)
+        sm: "min-h-9 items-center rounded-lg px-2.5 py-2 text-sm leading-5 tracking-tight",
+        // Figma Large: px-[12px] py-[10px], radius-12, Paragraph/Small (14/20) multi-line
+        default: "items-start rounded-xl px-3 py-2.5 text-sm leading-5 tracking-tight"
       }
     },
+    compoundVariants: [
+      // === filled (Figma: bg = state/{x}/base, text = static-white) ===
+      { status: "error", style: "filled", className: "border border-transparent bg-status-error-icon text-white" },
+      { status: "warning", style: "filled", className: "border border-transparent bg-status-warning-icon text-white" },
+      { status: "success", style: "filled", className: "border border-transparent bg-status-success-icon text-white" },
+      { status: "information", style: "filled", className: "border border-transparent bg-status-info-icon text-white" },
+      { status: "feature", style: "filled", className: "border border-transparent bg-status-neutral-icon text-white" },
+      // === light (Figma: bg = state/{x}/light, text = text/strong-950 = #171717 black) ===
+      { status: "error", style: "light", className: "border border-transparent bg-status-error-border text-foreground" },
+      { status: "warning", style: "light", className: "border border-transparent bg-status-warning-border text-foreground" },
+      { status: "success", style: "light", className: "border border-transparent bg-status-success-border text-foreground" },
+      { status: "information", style: "light", className: "border border-transparent bg-status-info-border text-foreground" },
+      { status: "feature", style: "light", className: "border border-transparent bg-status-neutral-border text-foreground" },
+      // === lighter (Figma: bg = state/{x}/lighter, text = text/strong-950 = #171717 black) ===
+      { status: "error", style: "lighter", className: "border border-transparent bg-status-error-bg text-foreground" },
+      { status: "warning", style: "lighter", className: "border border-transparent bg-status-warning-bg text-foreground" },
+      { status: "success", style: "lighter", className: "border border-transparent bg-status-success-bg text-foreground" },
+      { status: "information", style: "lighter", className: "border border-transparent bg-status-info-bg text-foreground" },
+      { status: "feature", style: "lighter", className: "border border-transparent bg-status-neutral-bg text-foreground" },
+      // === stroke (Figma: bg = white, border = stroke/soft-200, text = strong-950, shadow = regular-shadow/medium) ===
+      { style: "stroke", className: "border border-border bg-background text-foreground shadow-lg" }
+    ],
     defaultVariants: {
-      variant: "default"
+      status: "information",
+      style: "light",
+      size: "sm"
     }
   }
 );
-const Alert = React.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, role: "alert", className: cn(alertVariants({ variant }), className), ...props }));
+const alertDismissVariants = cva(
+  "shrink-0 rounded-md p-0.5 transition-opacity focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/40",
+  {
+    variants: {
+      style: {
+        filled: "text-white opacity-90 hover:opacity-100",
+        light: "text-foreground opacity-40 hover:opacity-100",
+        lighter: "text-foreground opacity-40 hover:opacity-100",
+        stroke: "text-foreground opacity-40 hover:opacity-100"
+      }
+    },
+    defaultVariants: { style: "light" }
+  }
+);
+const alertIconBadgeVariants = cva(
+  "inline-flex shrink-0 items-center justify-center rounded-full text-white",
+  {
+    variants: {
+      status: {
+        error: "bg-status-error-icon",
+        warning: "bg-status-warning-icon",
+        success: "bg-status-success-icon",
+        information: "bg-status-info-icon",
+        feature: "bg-status-neutral-icon"
+      },
+      size: {
+        xs: "size-4 [&>svg]:size-2.5",
+        sm: "size-5 [&>svg]:size-3",
+        default: "size-6 [&>svg]:size-3.5"
+      }
+    },
+    defaultVariants: { status: "information", size: "sm" }
+  }
+);
+const defaultStatusIcons = {
+  error: AlertCircle,
+  warning: AlertTriangle,
+  success: CheckCircle2,
+  information: Info,
+  feature: Rocket
+};
+const Alert = React.forwardRef(
+  ({
+    className,
+    status,
+    style,
+    size,
+    showIcon = true,
+    icon,
+    dismissible = false,
+    onDismiss,
+    dismissAriaLabel = "Dismiss",
+    action,
+    variant,
+    children,
+    ...props
+  }, ref) => {
+    const resolvedStatus = status ?? (variant ? legacyVariantToStatus[variant] : "information");
+    const resolvedStyle = style ?? "light";
+    const resolvedSize = size ?? "sm";
+    const IconComponent = defaultStatusIcons[resolvedStatus];
+    const rawIcon = icon ?? /* @__PURE__ */ jsx(IconComponent, { "aria-hidden": "true" });
+    let iconSlot = null;
+    if (showIcon) {
+      if (resolvedStyle === "filled") {
+        iconSlot = /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "inline-flex shrink-0 items-center justify-center",
+              resolvedSize === "default" ? "[&>svg]:size-5" : "[&>svg]:size-4"
+            ),
+            "data-slot": "alert-icon",
+            children: rawIcon
+          }
+        );
+      } else {
+        iconSlot = /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: alertIconBadgeVariants({ status: resolvedStatus, size: resolvedSize }),
+            "data-slot": "alert-icon-badge",
+            "data-status": resolvedStatus,
+            children: rawIcon
+          }
+        );
+      }
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "alert",
+        className: cn(
+          alertVariants({ status: resolvedStatus, style: resolvedStyle, size: resolvedSize }),
+          className
+        ),
+        "data-slot": "alert",
+        "data-status": resolvedStatus,
+        "data-style": resolvedStyle,
+        ...props,
+        children: [
+          iconSlot,
+          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children }),
+          action ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: action }) : null,
+          dismissible ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onDismiss,
+              "aria-label": dismissAriaLabel,
+              className: alertDismissVariants({ style: resolvedStyle }),
+              "data-slot": "alert-dismiss",
+              children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-4" })
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
 Alert.displayName = "Alert";
 const AlertTitle = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("h5", { ref, className: cn("mb-1 text-sm font-semibold leading-tight", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("h5", { ref, className: cn("mb-1 text-sm font-medium leading-5", className), ...props })
 );
 AlertTitle.displayName = "AlertTitle";
 const AlertDescription = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: cn("text-sm leading-relaxed", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: cn("text-sm leading-5", className), ...props })
 );
 AlertDescription.displayName = "AlertDescription";
 export {
   Alert,
   AlertDescription,
   AlertTitle,
+  alertIconBadgeVariants,
   alertVariants
 };
 //# sourceMappingURL=alert.js.map

package/dist/primitives/alert.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/primitives/alert.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nimport { cn } from '@open-mercato/shared/lib/utils'\n\nconst alertVariants = cva(\n  \"relative w-full rounded-lg border px-4 py-3 text-sm [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-8\",\n  {\n    variants: {\n      variant: {\n        default: 'border-border bg-background text-foreground [&>svg]:text-foreground',\n        destructive:\n          'border-status-error-border bg-status-error-bg text-status-error-text [&>svg]:text-status-error-icon',\n        success:\n          'border-status-success-border bg-status-success-bg text-status-success-text [&>svg]:text-status-success-icon',\n        warning:\n          'border-status-warning-border bg-status-warning-bg text-status-warning-text [&>svg]:text-status-warning-icon',\n        info:\n          'border-status-info-border bg-status-info-bg text-status-info-text [&>svg]:text-status-info-icon',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  }\n)\n\ntype AlertProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>\n\nconst Alert = React.forwardRef<HTMLDivElement, AlertProps>(({ className, variant, ...props }, ref) => (\n  <div ref={ref} role=\"alert\" className={cn(alertVariants({ variant }), className)} {...props} />\n))\n\nAlert.displayName = 'Alert'\n\nconst AlertTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(\n  ({ className, ...props }, ref) => (\n    <h5 ref={ref} className={cn('mb-1 text-sm font-semibold leading-tight', className)} {...props} />\n  )\n)\n\nAlertTitle.displayName = 'AlertTitle'\n\nconst AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(\n  ({ className, ...props }, ref) => (\n    <p ref={ref} className={cn('text-sm leading-relaxed', className)} {...props} />\n  )\n)\n\nAlertDescription.displayName = 'AlertDescription'\n\nexport { Alert, AlertDescription, AlertTitle, alertVariants }\n"],
-  "mappings": "AA8BE;AA9BF,YAAY,WAAW;AACvB,SAAS,WAA8B;AAEvC,SAAS,UAAU;AAEnB,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,aACE;AAAA,QACF,SACE;AAAA,QACF,SACE;AAAA,QACF,MACE;AAAA,MACJ;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IACX;AAAA,EACF;AACF;AAIA,MAAM,QAAQ,MAAM,WAAuC,CAAC,EAAE,WAAW,SAAS,GAAG,MAAM,GAAG,QAC5F,oBAAC,SAAI,KAAU,MAAK,SAAQ,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS,GAAI,GAAG,OAAO,CAC9F;AAED,MAAM,cAAc;AAEpB,MAAM,aAAa,MAAM;AAAA,EACvB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QACxB,oBAAC,QAAG,KAAU,WAAW,GAAG,4CAA4C,SAAS,GAAI,GAAG,OAAO;AAEnG;AAEA,WAAW,cAAc;AAEzB,MAAM,mBAAmB,MAAM;AAAA,EAC7B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QACxB,oBAAC,OAAE,KAAU,WAAW,GAAG,2BAA2B,SAAS,GAAI,GAAG,OAAO;AAEjF;AAEA,iBAAiB,cAAc;",
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport { AlertCircle, CheckCircle2, Info, Rocket, X, AlertTriangle } from 'lucide-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nimport { cn } from '@open-mercato/shared/lib/utils'\n\nexport type AlertStatus = 'error' | 'warning' | 'success' | 'information' | 'feature'\nexport type AlertStyle = 'filled' | 'light' | 'lighter' | 'stroke'\nexport type AlertSize = 'xs' | 'sm' | 'default'\n\n/**\n * Legacy `variant` values from the pre-Figma-`169:2358` API. Kept for BC \u2014\n * mapped to `status` inside the Alert component so existing call sites do\n * not need migration. The Figma `light` look (`#fecaca` saturated tint\n * for error \u2192 `state/{x}/light` token family) is heavier than the\n * pre-Figma look; legacy call sites that want the softer pre-Figma\n * appearance should switch explicitly to `style=\"lighter\"`.\n */\ntype LegacyVariant = 'default' | 'destructive' | 'success' | 'warning' | 'info'\n\nconst legacyVariantToStatus: Record<LegacyVariant, AlertStatus> = {\n  default: 'information',\n  destructive: 'error',\n  success: 'success',\n  warning: 'warning',\n  info: 'information',\n}\n\nconst alertVariants = cva(\n  'relative flex w-full gap-2 transition-colors',\n  {\n    variants: {\n      status: {\n        error: '',\n        warning: '',\n        success: '',\n        information: '',\n        feature: '',\n      },\n      style: {\n        filled: '',\n        light: '',\n        lighter: '',\n        stroke: '',\n      },\n      size: {\n        // Figma X-Small: px-[8px] py-[6px], radius-8, Paragraph/X Small (12/16)\n        xs: 'min-h-8 items-center rounded-lg px-2 py-1.5 text-xs leading-4 tracking-tight',\n        // Figma Small: px-[10px] py-[8px], radius-8, Paragraph/Small (14/20)\n        sm: 'min-h-9 items-center rounded-lg px-2.5 py-2 text-sm leading-5 tracking-tight',\n        // Figma Large: px-[12px] py-[10px], radius-12, Paragraph/Small (14/20) multi-line\n        default: 'items-start rounded-xl px-3 py-2.5 text-sm leading-5 tracking-tight',\n      },\n    },\n    compoundVariants: [\n      // === filled (Figma: bg = state/{x}/base, text = static-white) ===\n      { status: 'error',       style: 'filled', className: 'border border-transparent bg-status-error-icon text-white' },\n      { status: 'warning',     style: 'filled', className: 'border border-transparent bg-status-warning-icon text-white' },\n      { status: 'success',     style: 'filled', className: 'border border-transparent bg-status-success-icon text-white' },\n      { status: 'information', style: 'filled', className: 'border border-transparent bg-status-info-icon text-white' },\n      { status: 'feature',     style: 'filled', className: 'border border-transparent bg-status-neutral-icon text-white' },\n      // === light (Figma: bg = state/{x}/light, text = text/strong-950 = #171717 black) ===\n      { status: 'error',       style: 'light', className: 'border border-transparent bg-status-error-border text-foreground' },\n      { status: 'warning',     style: 'light', className: 'border border-transparent bg-status-warning-border text-foreground' },\n      { status: 'success',     style: 'light', className: 'border border-transparent bg-status-success-border text-foreground' },\n      { status: 'information', style: 'light', className: 'border border-transparent bg-status-info-border text-foreground' },\n      { status: 'feature',     style: 'light', className: 'border border-transparent bg-status-neutral-border text-foreground' },\n      // === lighter (Figma: bg = state/{x}/lighter, text = text/strong-950 = #171717 black) ===\n      { status: 'error',       style: 'lighter', className: 'border border-transparent bg-status-error-bg text-foreground' },\n      { status: 'warning',     style: 'lighter', className: 'border border-transparent bg-status-warning-bg text-foreground' },\n      { status: 'success',     style: 'lighter', className: 'border border-transparent bg-status-success-bg text-foreground' },\n      { status: 'information', style: 'lighter', className: 'border border-transparent bg-status-info-bg text-foreground' },\n      { status: 'feature',     style: 'lighter', className: 'border border-transparent bg-status-neutral-bg text-foreground' },\n      // === stroke (Figma: bg = white, border = stroke/soft-200, text = strong-950, shadow = regular-shadow/medium) ===\n      { style: 'stroke', className: 'border border-border bg-background text-foreground shadow-lg' },\n    ],\n    defaultVariants: {\n      status: 'information',\n      style: 'light',\n      size: 'sm',\n    },\n  },\n)\n\n// Dismiss button (X) color per Figma: text/strong-950 (#171717 black) at\n// `opacity-40` for light/lighter/stroke \u2014 matches the Figma `close-line`\n// icon which is the dark icon-strong-950 fill rendered at 40% alpha\n// (visually \u2248 #5c5c5c gray). White at full opacity for filled so it\n// stays legible over the saturated bg.\nconst alertDismissVariants = cva(\n  'shrink-0 rounded-md p-0.5 transition-opacity focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/40',\n  {\n    variants: {\n      style: {\n        filled: 'text-white opacity-90 hover:opacity-100',\n        light: 'text-foreground opacity-40 hover:opacity-100',\n        lighter: 'text-foreground opacity-40 hover:opacity-100',\n        stroke: 'text-foreground opacity-40 hover:opacity-100',\n      },\n    },\n    defaultVariants: { style: 'light' },\n  },\n)\n\nconst alertIconBadgeVariants = cva(\n  'inline-flex shrink-0 items-center justify-center rounded-full text-white',\n  {\n    variants: {\n      status: {\n        error: 'bg-status-error-icon',\n        warning: 'bg-status-warning-icon',\n        success: 'bg-status-success-icon',\n        information: 'bg-status-info-icon',\n        feature: 'bg-status-neutral-icon',\n      },\n      size: {\n        xs: 'size-4 [&>svg]:size-2.5',\n        sm: 'size-5 [&>svg]:size-3',\n        default: 'size-6 [&>svg]:size-3.5',\n      },\n    },\n    defaultVariants: { status: 'information', size: 'sm' },\n  },\n)\n\nconst defaultStatusIcons: Record<AlertStatus, React.ComponentType<{ className?: string; 'aria-hidden'?: 'true' }>> = {\n  error: AlertCircle,\n  warning: AlertTriangle,\n  success: CheckCircle2,\n  information: Info,\n  feature: Rocket,\n}\n\nexport type AlertProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'role'> &\n  Omit<VariantProps<typeof alertVariants>, 'status' | 'style' | 'size'> & {\n    status?: AlertStatus\n    style?: AlertStyle\n    size?: AlertSize\n    /** Show the leading icon. Default `true`. */\n    showIcon?: boolean\n    /** Override the default per-status Lucide icon. */\n    icon?: React.ReactNode\n    /** Render a trailing close (X) button. Pair with `onDismiss`. */\n    dismissible?: boolean\n    onDismiss?: () => void\n    dismissAriaLabel?: string\n    /** Inline action slot (link buttons) rendered to the right of the body. */\n    action?: React.ReactNode\n    /**\n     * @deprecated Use `status` + `style` instead. Kept for BC. Maps the\n     * legacy single-prop variants onto `status` and picks up the new\n     * `light` + `sm` defaults.\n     */\n    variant?: LegacyVariant\n  }\n\nconst Alert = React.forwardRef<HTMLDivElement, AlertProps>(\n  (\n    {\n      className,\n      status,\n      style,\n      size,\n      showIcon = true,\n      icon,\n      dismissible = false,\n      onDismiss,\n      dismissAriaLabel = 'Dismiss',\n      action,\n      variant,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const resolvedStatus: AlertStatus = status ?? (variant ? legacyVariantToStatus[variant] : 'information')\n    const resolvedStyle: AlertStyle = style ?? 'light'\n    const resolvedSize: AlertSize = size ?? 'sm'\n    const IconComponent = defaultStatusIcons[resolvedStatus]\n    const rawIcon = icon ?? <IconComponent aria-hidden=\"true\" />\n\n    let iconSlot: React.ReactNode = null\n    if (showIcon) {\n      if (resolvedStyle === 'filled') {\n        // Filled: plain icon over saturated bg \u2014 no badge wrap, inherit text-white.\n        iconSlot = (\n          <span\n            className={cn(\n              'inline-flex shrink-0 items-center justify-center',\n              resolvedSize === 'default' ? '[&>svg]:size-5' : '[&>svg]:size-4',\n            )}\n            data-slot=\"alert-icon\"\n          >\n            {rawIcon}\n          </span>\n        )\n      } else {\n        // light / lighter / stroke: badge wrap with status color bg + white icon.\n        iconSlot = (\n          <span\n            className={alertIconBadgeVariants({ status: resolvedStatus, size: resolvedSize })}\n            data-slot=\"alert-icon-badge\"\n            data-status={resolvedStatus}\n          >\n            {rawIcon}\n          </span>\n        )\n      }\n    }\n\n    return (\n      <div\n        ref={ref}\n        role=\"alert\"\n        className={cn(\n          alertVariants({ status: resolvedStatus, style: resolvedStyle, size: resolvedSize }),\n          className,\n        )}\n        data-slot=\"alert\"\n        data-status={resolvedStatus}\n        data-style={resolvedStyle}\n        {...props}\n      >\n        {iconSlot}\n        <div className=\"min-w-0 flex-1\">{children}</div>\n        {action ? <div className=\"shrink-0\">{action}</div> : null}\n        {dismissible ? (\n          <button\n            type=\"button\"\n            onClick={onDismiss}\n            aria-label={dismissAriaLabel}\n            className={alertDismissVariants({ style: resolvedStyle })}\n            data-slot=\"alert-dismiss\"\n          >\n            <X aria-hidden=\"true\" className=\"size-4\" />\n          </button>\n        ) : null}\n      </div>\n    )\n  },\n)\nAlert.displayName = 'Alert'\n\n// Figma \"Label/Small\": Inter Medium 14 / 20.\nconst AlertTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(\n  ({ className, ...props }, ref) => (\n    <h5 ref={ref} className={cn('mb-1 text-sm font-medium leading-5', className)} {...props} />\n  ),\n)\nAlertTitle.displayName = 'AlertTitle'\n\n// Figma \"Paragraph/Small\": Inter Regular 14 / 20.\nconst AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(\n  ({ className, ...props }, ref) => (\n    <p ref={ref} className={cn('text-sm leading-5', className)} {...props} />\n  ),\n)\nAlertDescription.displayName = 'AlertDescription'\n\nexport { Alert, AlertDescription, AlertTitle, alertVariants, alertIconBadgeVariants }\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/primitives/calendar.js

@@ -1,56 +1,146 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
-import { DayPicker } from "react-day-picker";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { DayPicker, useDayPicker } from "react-day-picker";
 import { ChevronLeft, ChevronRight } from "lucide-react";
+import { format } from "date-fns";
 import { cn } from "@open-mercato/shared/lib/utils";
-function Calendar({ className, classNames, showOutsideDays = true, ...props }) {
+function MonthNavButton({
+  direction,
+  locale
+}) {
+  const dayPicker = useDayPicker();
+  const target = direction === "prev" ? dayPicker.previousMonth : dayPicker.nextMonth;
+  const Icon = direction === "prev" ? ChevronLeft : ChevronRight;
+  const targetLabel = format(target ?? /* @__PURE__ */ new Date(), "MMMM yyyy", locale ? { locale } : void 0);
+  const ariaLabel = `Go to ${direction === "prev" ? "previous" : "next"} month: ${targetLabel}`;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      disabled: !target,
+      "aria-label": ariaLabel,
+      onClick: () => {
+        if (target && dayPicker.goToMonth) dayPicker.goToMonth(target);
+      },
+      className: cn(
+        "h-9 w-9 inline-flex items-center justify-center rounded-md shrink-0",
+        "border border-border bg-background text-muted-foreground transition-colors",
+        "hover:bg-accent hover:text-accent-foreground hover:border-input",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        "disabled:opacity-30 disabled:pointer-events-none disabled:hover:bg-background"
+      ),
+      children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4", "aria-hidden": "true" })
+    }
+  );
+}
+function buildMonthCaption(locale, totalMonths) {
+  return function MonthCaption({
+    calendarMonth,
+    displayIndex
+  }) {
+    const label = format(calendarMonth.date, "MMMM yyyy", locale ? { locale } : void 0);
+    const index = typeof displayIndex === "number" ? displayIndex : 0;
+    const showPrev = index === 0;
+    const showNext = index === totalMonths - 1;
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 mb-3", children: [
+      showPrev ? /* @__PURE__ */ jsx(MonthNavButton, { direction: "prev", locale }) : /* @__PURE__ */ jsx("div", { className: "h-9 w-9 shrink-0", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "flex-1 flex items-center justify-center h-9 rounded-md bg-muted px-3 text-sm font-medium",
+          "aria-live": "polite",
+          children: label
+        }
+      ),
+      showNext ? /* @__PURE__ */ jsx(MonthNavButton, { direction: "next", locale }) : /* @__PURE__ */ jsx("div", { className: "h-9 w-9 shrink-0", "aria-hidden": "true" })
+    ] });
+  };
+}
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  fixedWeeks = true,
+  locale,
+  components,
+  numberOfMonths = 1,
+  pagedNavigation = true,
+  ...props
+}) {
+  const monthCaption = React.useMemo(
+    () => buildMonthCaption(locale, numberOfMonths),
+    [locale, numberOfMonths]
+  );
   return /* @__PURE__ */ jsx(
     DayPicker,
     {
       showOutsideDays,
+      fixedWeeks,
+      pagedNavigation,
+      locale,
+      numberOfMonths,
       className: cn("p-3", className),
       classNames: {
         months: "flex flex-col sm:flex-row gap-4",
-        month: "space-y-4",
-        month_caption: "flex justify-center pt-1 relative items-center",
-        caption_label: "text-sm font-medium",
-        nav: "flex items-center gap-1",
-        button_previous: cn(
-          "absolute left-1 h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
-          "inline-flex items-center justify-center rounded-md text-sm font-medium",
-          "ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2",
-          "focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-          "hover:bg-accent hover:text-accent-foreground border-0"
-        ),
-        button_next: cn(
-          "absolute right-1 h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
-          "inline-flex items-center justify-center rounded-md text-sm font-medium",
-          "ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2",
-          "focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-          "hover:bg-accent hover:text-accent-foreground border-0"
-        ),
-        month_grid: "w-full border-collapse space-y-1",
+        month: "space-y-2",
+        month_caption: "",
+        caption_label: "sr-only",
+        nav: "sr-only",
+        month_grid: "w-full border-collapse",
         weekdays: "flex",
         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",
+        weeks: "w-full border-collapse",
+        week: "flex w-full mt-1",
+        day: "h-9 w-9 text-center text-sm p-0 relative focus-within:relative focus-within:z-20",
         day_button: cn(
           "h-9 w-9 p-0 font-normal aria-selected:opacity-100",
           "inline-flex items-center justify-center rounded-md text-sm",
-          "ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2",
-          "focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none",
-          "hover:bg-accent hover:text-accent-foreground"
+          "transition-colors focus:outline-none focus-visible:outline-none disabled:pointer-events-none",
+          // Focus indicator is a soft accent fill instead of a ring overlay — keyboard
+          // users get a visible cue, but mouse-click focus does not leave a stuck ring
+          // on top of the selected cell.
+          "hover:bg-accent hover:text-accent-foreground",
+          "focus-visible:bg-accent focus-visible:text-accent-foreground"
+        ),
+        // React-day-picker v9 applies `classNames.selected` / `range_*` to the day
+        // CELL (`<td>`) wrapper, not to the inner `<button>`. To keep the parent
+        // fill visible through interaction, we (a) paint the cell with the desired
+        // bg/text, and (b) force the inner button to render transparent — so the
+        // button's own hover/focus-visible bg overrides cannot cover the cell fill.
+        selected: cn(
+          "!bg-primary !text-primary-foreground rounded-md",
+          "[&_button]:!bg-transparent [&_button]:!text-primary-foreground",
+          "[&_button:hover]:!bg-transparent [&_button:hover]:!text-primary-foreground",
+          "[&_button:focus-visible]:!bg-transparent [&_button:focus-visible]:!text-primary-foreground"
+        ),
+        range_start: cn(
+          "!bg-primary !text-primary-foreground rounded-l-md !rounded-r-none",
+          "[&_button]:!bg-transparent [&_button]:!text-primary-foreground",
+          "[&_button:hover]:!bg-transparent [&_button:hover]:!text-primary-foreground",
+          "[&_button:focus-visible]:!bg-transparent [&_button:focus-visible]:!text-primary-foreground"
+        ),
+        range_end: cn(
+          "!bg-primary !text-primary-foreground rounded-r-md !rounded-l-none",
+          "[&_button]:!bg-transparent [&_button]:!text-primary-foreground",
+          "[&_button:hover]:!bg-transparent [&_button:hover]:!text-primary-foreground",
+          "[&_button:focus-visible]:!bg-transparent [&_button:focus-visible]:!text-primary-foreground"
+        ),
+        range_middle: cn(
+          "!bg-accent !text-accent-foreground !rounded-none",
+          "[&_button]:!bg-transparent [&_button]:!text-accent-foreground",
+          "[&_button:hover]:!bg-transparent [&_button:hover]:!text-accent-foreground",
+          "[&_button:focus-visible]:!bg-transparent [&_button:focus-visible]:!text-accent-foreground"
         ),
-        selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground rounded-md",
-        today: "bg-accent text-accent-foreground rounded-md",
-        outside: "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+        today: "font-semibold text-primary rounded-md",
+        outside: "day-outside text-muted-foreground opacity-40 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
         disabled: "text-muted-foreground opacity-50",
         hidden: "invisible",
         ...classNames
       },
       components: {
-        Chevron: ({ orientation }) => orientation === "left" ? /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+        MonthCaption: monthCaption,
+        ...components
       },
       ...props
     }