@open-mercato/ui 0.6.1-develop.3256.1.fe3dec2464 → 0.6.1-develop.3276.1.1fcd145078

package/src/primitives/alert.tsx

@@ -1,52 +1,262 @@
+"use client"
+
 import * as React from 'react'
+import { AlertCircle, CheckCircle2, Info, Rocket, X, AlertTriangle } from 'lucide-react'
 import { cva, type VariantProps } from 'class-variance-authority'
 
 import { cn } from '@open-mercato/shared/lib/utils'
 
+export type AlertStatus = 'error' | 'warning' | 'success' | 'information' | 'feature'
+export type AlertStyle = 'filled' | 'light' | 'lighter' | 'stroke'
+export type AlertSize = 'xs' | 'sm' | 'default'
+
+/**
+ * Legacy `variant` values from the pre-Figma-`169:2358` API. Kept for BC —
+ * mapped to `status` inside the Alert component so existing call sites do
+ * not need migration. The Figma `light` look (`#fecaca` saturated tint
+ * for error → `state/{x}/light` token family) is heavier than the
+ * pre-Figma look; legacy call sites that want the softer pre-Figma
+ * appearance should switch explicitly to `style="lighter"`.
+ */
+type LegacyVariant = 'default' | 'destructive' | 'success' | 'warning' | 'info'
+
+const legacyVariantToStatus: Record<LegacyVariant, AlertStatus> = {
+  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',
     },
-  }
+  },
 )
 
-type AlertProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+// Dismiss button (X) color per Figma: text/strong-950 (#171717 black) at
+// `opacity-40` for light/lighter/stroke — matches the Figma `close-line`
+// icon which is the dark icon-strong-950 fill rendered at 40% alpha
+// (visually ≈ #5c5c5c gray). White at full opacity for filled so it
+// stays legible over the saturated bg.
+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 Alert = React.forwardRef<HTMLDivElement, AlertProps>(({ className, variant, ...props }, ref) => (
-  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
-))
+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: Record<AlertStatus, React.ComponentType<{ className?: string; 'aria-hidden'?: 'true' }>> = {
+  error: AlertCircle,
+  warning: AlertTriangle,
+  success: CheckCircle2,
+  information: Info,
+  feature: Rocket,
+}
+
+export type AlertProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'role'> &
+  Omit<VariantProps<typeof alertVariants>, 'status' | 'style' | 'size'> & {
+    status?: AlertStatus
+    style?: AlertStyle
+    size?: AlertSize
+    /** Show the leading icon. Default `true`. */
+    showIcon?: boolean
+    /** Override the default per-status Lucide icon. */
+    icon?: React.ReactNode
+    /** Render a trailing close (X) button. Pair with `onDismiss`. */
+    dismissible?: boolean
+    onDismiss?: () => void
+    dismissAriaLabel?: string
+    /** Inline action slot (link buttons) rendered to the right of the body. */
+    action?: React.ReactNode
+    /**
+     * @deprecated Use `status` + `style` instead. Kept for BC. Maps the
+     * legacy single-prop variants onto `status` and picks up the new
+     * `light` + `sm` defaults.
+     */
+    variant?: LegacyVariant
+  }
 
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
+  (
+    {
+      className,
+      status,
+      style,
+      size,
+      showIcon = true,
+      icon,
+      dismissible = false,
+      onDismiss,
+      dismissAriaLabel = 'Dismiss',
+      action,
+      variant,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const resolvedStatus: AlertStatus = status ?? (variant ? legacyVariantToStatus[variant] : 'information')
+    const resolvedStyle: AlertStyle = style ?? 'light'
+    const resolvedSize: AlertSize = size ?? 'sm'
+    const IconComponent = defaultStatusIcons[resolvedStatus]
+    const rawIcon = icon ?? <IconComponent aria-hidden="true" />
+
+    let iconSlot: React.ReactNode = null
+    if (showIcon) {
+      if (resolvedStyle === 'filled') {
+        // Filled: plain icon over saturated bg — no badge wrap, inherit text-white.
+        iconSlot = (
+          <span
+            className={cn(
+              'inline-flex shrink-0 items-center justify-center',
+              resolvedSize === 'default' ? '[&>svg]:size-5' : '[&>svg]:size-4',
+            )}
+            data-slot="alert-icon"
+          >
+            {rawIcon}
+          </span>
+        )
+      } else {
+        // light / lighter / stroke: badge wrap with status color bg + white icon.
+        iconSlot = (
+          <span
+            className={alertIconBadgeVariants({ status: resolvedStatus, size: resolvedSize })}
+            data-slot="alert-icon-badge"
+            data-status={resolvedStatus}
+          >
+            {rawIcon}
+          </span>
+        )
+      }
+    }
+
+    return (
+      <div
+        ref={ref}
+        role="alert"
+        className={cn(
+          alertVariants({ status: resolvedStatus, style: resolvedStyle, size: resolvedSize }),
+          className,
+        )}
+        data-slot="alert"
+        data-status={resolvedStatus}
+        data-style={resolvedStyle}
+        {...props}
+      >
+        {iconSlot}
+        <div className="min-w-0 flex-1">{children}</div>
+        {action ? <div className="shrink-0">{action}</div> : null}
+        {dismissible ? (
+          <button
+            type="button"
+            onClick={onDismiss}
+            aria-label={dismissAriaLabel}
+            className={alertDismissVariants({ style: resolvedStyle })}
+            data-slot="alert-dismiss"
+          >
+            <X aria-hidden="true" className="size-4" />
+          </button>
+        ) : null}
+      </div>
+    )
+  },
+)
 Alert.displayName = 'Alert'
 
+// Figma "Label/Small": Inter Medium 14 / 20.
 const AlertTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
   ({ className, ...props }, ref) => (
-    <h5 ref={ref} className={cn('mb-1 text-sm font-semibold leading-tight', className)} {...props} />
-  )
+    <h5 ref={ref} className={cn('mb-1 text-sm font-medium leading-5', className)} {...props} />
+  ),
 )
-
 AlertTitle.displayName = 'AlertTitle'
 
+// Figma "Paragraph/Small": Inter Regular 14 / 20.
 const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
   ({ className, ...props }, ref) => (
-    <p ref={ref} className={cn('text-sm leading-relaxed', className)} {...props} />
-  )
+    <p ref={ref} className={cn('text-sm leading-5', className)} {...props} />
+  ),
 )
-
 AlertDescription.displayName = 'AlertDescription'
 
-export { Alert, AlertDescription, AlertTitle, alertVariants }
+export { Alert, AlertDescription, AlertTitle, alertVariants, alertIconBadgeVariants }

package/src/primitives/calendar.tsx

@@ -1,67 +1,175 @@
 "use client"
 
 import * as React from 'react'
-import { DayPicker } from 'react-day-picker'
-import type { DayPickerProps } from 'react-day-picker'
+import { DayPicker, useDayPicker } from 'react-day-picker'
+import type { DayPickerProps, CalendarMonth } from 'react-day-picker'
 import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { format } from 'date-fns'
+import type { Locale } from 'date-fns'
 import { cn } from '@open-mercato/shared/lib/utils'
 
 export type CalendarProps = DayPickerProps
 
-export function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
+function MonthNavButton({
+  direction,
+  locale,
+}: {
+  direction: 'prev' | 'next'
+  locale?: Locale
+}) {
+  const dayPicker = useDayPicker() as unknown as {
+    previousMonth?: Date
+    nextMonth?: Date
+    goToMonth?: (month: Date) => void
+  }
+  const target = direction === 'prev' ? dayPicker.previousMonth : dayPicker.nextMonth
+  const Icon = direction === 'prev' ? ChevronLeft : ChevronRight
+  const targetLabel = format(target ?? new Date(), 'MMMM yyyy', locale ? { locale } : undefined)
+  const ariaLabel = `Go to ${direction === 'prev' ? 'previous' : 'next'} month: ${targetLabel}`
+  return (
+    <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',
+      )}
+    >
+      <Icon className="h-4 w-4" aria-hidden="true" />
+    </button>
+  )
+}
+
+function buildMonthCaption(locale: Locale | undefined, totalMonths: number) {
+  return function MonthCaption({
+    calendarMonth,
+    displayIndex,
+  }: {
+    calendarMonth: CalendarMonth
+    displayIndex?: number
+  }) {
+    const label = format(calendarMonth.date, 'MMMM yyyy', locale ? { locale } : undefined)
+    const index = typeof displayIndex === 'number' ? displayIndex : 0
+    // For multi-month layouts (e.g. range pickers) only the leftmost month
+    // exposes the previous-month chevron and only the rightmost exposes the
+    // next-month chevron. Navigation is always global across all visible
+    // months, so showing both arrows on every month is confusing.
+    const showPrev = index === 0
+    const showNext = index === totalMonths - 1
+    return (
+      <div className="flex items-center justify-between gap-2 mb-3">
+        {showPrev ? (
+          <MonthNavButton direction="prev" locale={locale} />
+        ) : (
+          <div className="h-9 w-9 shrink-0" aria-hidden="true" />
+        )}
+        <div
+          className="flex-1 flex items-center justify-center h-9 rounded-md bg-muted px-3 text-sm font-medium"
+          aria-live="polite"
+        >
+          {label}
+        </div>
+        {showNext ? (
+          <MonthNavButton direction="next" locale={locale} />
+        ) : (
+          <div className="h-9 w-9 shrink-0" aria-hidden="true" />
+        )}
+      </div>
+    )
+  }
+}
+
+export function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  fixedWeeks = true,
+  locale,
+  components,
+  numberOfMonths = 1,
+  pagedNavigation = true,
+  ...props
+}: CalendarProps) {
+  const monthCaption = React.useMemo(
+    () => buildMonthCaption(locale as Locale | undefined, numberOfMonths),
+    [locale, numberOfMonths],
+  )
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
+      fixedWeeks={fixedWeeks}
+      pagedNavigation={pagedNavigation}
+      locale={locale}
+      numberOfMonths={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',
+        today: 'font-semibold text-primary rounded-md',
         outside:
-          'day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30',
+          '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' ? (
-            <ChevronLeft className="h-4 w-4" />
-          ) : (
-            <ChevronRight className="h-4 w-4" />
-          ),
+        MonthCaption: monthCaption,
+        ...components,
       }}
       {...props}
     />

package/src/primitives/compact-select.tsx

@@ -0,0 +1,59 @@
+"use client"
+
+import * as React from 'react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  type SelectTriggerProps,
+} from './select'
+
+export type CompactSelectTriggerProps = Omit<SelectTriggerProps, 'size'> & {
+  /**
+   * Optional inline prefix rendered before the selected value, e.g. `View:` or
+   * `Sort by:`. Renders in muted style and shrinks before the value text.
+   */
+  triggerLabel?: React.ReactNode
+}
+
+export const CompactSelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectTrigger>,
+  CompactSelectTriggerProps
+>(({ triggerLabel, children, className, ...props }, ref) => (
+  <SelectTrigger
+    ref={ref}
+    size="xs"
+    className={cn(className)}
+    data-slot="compact-select-trigger"
+    {...props}
+  >
+    {triggerLabel ? (
+      <span
+        className="shrink-0 text-xs font-medium text-muted-foreground"
+        data-slot="compact-select-trigger-label"
+      >
+        {triggerLabel}
+      </span>
+    ) : null}
+    {children}
+  </SelectTrigger>
+))
+CompactSelectTrigger.displayName = 'CompactSelectTrigger'
+
+// Re-export the rest of the Select API so consumers can import the entire
+// compact-select composition from one path.
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectValue,
+}