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

package/src/primitives/tabs.tsx

@@ -2,12 +2,34 @@
 
 import * as React from 'react'
 import { createContext, useContext } from 'react'
+
 import { cn } from '@open-mercato/shared/lib/utils'
 import { Button } from './button'
 
+/**
+ * Tab navigation primitive — backward compatible with the original
+ * pill-style API. Phase B.5 rewrite adds the Figma underline variant
+ * (`Tab Menu Horizontal [1.1]` in `553:734`), the vertical orientation
+ * (`Tab Menu Vertical [1.1]`), and per-tab `leading` icon + `count`
+ * badge slots.
+ *
+ * Backward compatibility (6 import sites):
+ *   integrations/[id]/page.tsx
+ *   scheduler JobLogsModal.tsx
+ *   checkout LinkTemplateForm.tsx
+ *   search VectorSearchSection.tsx + FulltextSearchSection.tsx
+ *   ai-assistant AiPlaygroundPageClient.tsx
+ *
+ * All six call `<Tabs>` + `<TabsList>` + `<TabsTrigger>` +
+ * `<TabsContent>` with the default pill look. The default `variant`
+ * stays `pill` so they keep rendering verbatim.
+ */
+
 type TabsContextValue = {
   value: string
   onValueChange: (value: string) => void
+  variant: 'pill' | 'underline'
+  orientation: 'horizontal' | 'vertical'
 }
 
 export const TabsContext = createContext<TabsContextValue | undefined>(undefined)
@@ -20,10 +42,23 @@ export function useTabsContext() {
   return context
 }
 
+export type TabsVariant = 'pill' | 'underline'
+export type TabsOrientation = 'horizontal' | 'vertical'
+
 export type TabsProps = {
   value?: string
   defaultValue?: string
   onValueChange?: (value: string) => void
+  /** Visual style. `pill` is the original look (bg-muted container,
+   * bg-background selected pill). `underline` matches Figma `Tab Menu
+   * Horizontal [1.1]` — flat strip with a thin border-bottom and an
+   * accent-indigo underline on the active tab. */
+  variant?: TabsVariant
+  /** Tab strip orientation. `horizontal` lays the strip in a row;
+   * `vertical` lays it in a column. The default `pill` variant
+   * supports both; the underline variant supports only `horizontal`
+   * (per Figma — vertical underline is not a documented pattern). */
+  orientation?: TabsOrientation
   children: React.ReactNode
   className?: string
 }
@@ -32,6 +67,8 @@ export function Tabs({
   value: controlledValue,
   defaultValue,
   onValueChange,
+  variant = 'pill',
+  orientation = 'horizontal',
   children,
   className,
 }: TabsProps) {
@@ -50,13 +87,20 @@ export function Tabs({
   )
 
   const contextValue = React.useMemo<TabsContextValue>(
-    () => ({ value, onValueChange: handleValueChange }),
-    [value, handleValueChange],
+    () => ({ value, onValueChange: handleValueChange, variant, orientation }),
+    [value, handleValueChange, variant, orientation],
   )
 
   return (
     <TabsContext.Provider value={contextValue}>
-      <div className={className}>{children}</div>
+      <div
+        data-slot="tabs"
+        data-variant={variant}
+        data-orientation={orientation}
+        className={cn(orientation === 'vertical' ? 'flex gap-4' : '', className)}
+      >
+        {children}
+      </div>
     </TabsContext.Provider>
   )
 }
@@ -67,13 +111,26 @@ export type TabsListProps = {
 }
 
 export function TabsList({ children, className }: TabsListProps) {
+  const { variant, orientation } = useTabsContext()
+
+  const baseClasses =
+    variant === 'underline'
+      ? // Underline strip — flat, full-width border-bottom for the rail,
+        // selected trigger gets its own border-b-2 accent below.
+        orientation === 'vertical'
+          ? 'inline-flex flex-col items-stretch gap-1 border-r border-input pr-3'
+          : 'inline-flex h-10 items-center justify-start gap-4 border-b border-input text-muted-foreground'
+      : // Pill strip (original) — rounded container, bg-muted shell.
+        orientation === 'vertical'
+        ? 'inline-flex flex-col items-stretch gap-1 rounded-lg bg-muted p-1 text-muted-foreground'
+        : 'inline-flex h-9 items-center justify-start gap-1 rounded-lg bg-muted p-1 text-muted-foreground'
+
   return (
     <div
-      className={cn(
-        'inline-flex h-9 items-center justify-start rounded-lg bg-muted p-1 text-muted-foreground',
-        className,
-      )}
+      data-slot="tabs-list"
+      className={cn(baseClasses, className)}
       role="tablist"
+      aria-orientation={orientation}
     >
       {children}
     </div>
@@ -85,12 +142,86 @@ export type TabsTriggerProps = {
   children: React.ReactNode
   className?: string
   disabled?: boolean
+  /** Optional leading icon slot — typically a lucide-react icon at
+   * `size-4`. Per Figma `Tab Menu Horizontal Items [1.1]`. */
+  leading?: React.ReactNode
+  /** Optional trailing count badge — typically a numeric count or
+   * "New". Rendered as a muted pill that highlights to indigo when
+   * the tab is selected. */
+  count?: React.ReactNode
 }
 
-export function TabsTrigger({ value, children, className, disabled }: TabsTriggerProps) {
-  const { value: selectedValue, onValueChange } = useTabsContext()
+export function TabsTrigger({
+  value,
+  children,
+  className,
+  disabled,
+  leading,
+  count,
+}: TabsTriggerProps) {
+  const { value: selectedValue, onValueChange, variant, orientation } = useTabsContext()
   const isSelected = selectedValue === value
 
+  if (variant === 'underline') {
+    return (
+      <button
+        type="button"
+        role="tab"
+        aria-selected={isSelected}
+        disabled={disabled}
+        onClick={() => onValueChange(value)}
+        data-slot="tabs-trigger"
+        data-state={isSelected ? 'active' : 'inactive'}
+        data-variant="underline"
+        className={cn(
+          // Underline trigger — flat, bottom-border accent when active.
+          // Negative margin-bottom -1px so the active accent sits on
+          // top of the rail's border-bottom (rather than below it).
+          orientation === 'vertical'
+            ? 'group relative inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground outline-none transition-colors'
+            : 'group relative -mb-px inline-flex items-center gap-2 border-b-2 border-transparent px-1 py-2 text-sm font-medium text-muted-foreground outline-none transition-colors',
+          'hover:text-foreground focus-visible:shadow-focus',
+          'disabled:pointer-events-none disabled:opacity-50',
+          isSelected
+            ? orientation === 'vertical'
+              ? 'bg-muted/40 text-foreground'
+              : 'border-accent-indigo font-semibold text-foreground'
+            : '',
+          className,
+        )}
+      >
+        {leading ? (
+          <span
+            data-slot="tabs-trigger-leading"
+            aria-hidden="true"
+            className={cn(
+              'inline-flex shrink-0 items-center justify-center',
+              isSelected ? 'text-accent-indigo' : 'text-muted-foreground',
+            )}
+          >
+            {leading}
+          </span>
+        ) : null}
+        <span className="min-w-0 truncate">{children}</span>
+        {count !== undefined ? (
+          <span
+            data-slot="tabs-trigger-count"
+            className={cn(
+              'inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full px-1.5 text-xs font-medium',
+              isSelected
+                ? 'bg-accent-indigo/10 text-accent-indigo'
+                : 'bg-muted text-muted-foreground',
+            )}
+          >
+            {count}
+          </span>
+        ) : null}
+      </button>
+    )
+  }
+
+  // Pill variant (original look) — `<Button variant="ghost" size="sm">`
+  // with state classes. Backward compatible.
   return (
     <Button
       type="button"
@@ -100,14 +231,40 @@ export function TabsTrigger({ value, children, className, disabled }: TabsTrigge
       aria-selected={isSelected}
       disabled={disabled}
       onClick={() => onValueChange(value)}
+      data-slot="tabs-trigger"
+      data-state={isSelected ? 'active' : 'inactive'}
+      data-variant="pill"
       className={cn(
+        'gap-2',
         isSelected
           ? 'bg-background text-foreground shadow'
           : 'hover:bg-background/80 hover:text-foreground',
         className,
       )}
     >
-      {children}
+      {leading ? (
+        <span
+          data-slot="tabs-trigger-leading"
+          aria-hidden="true"
+          className="inline-flex shrink-0 items-center justify-center"
+        >
+          {leading}
+        </span>
+      ) : null}
+      <span>{children}</span>
+      {count !== undefined ? (
+        <span
+          data-slot="tabs-trigger-count"
+          className={cn(
+            'inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full px-1.5 text-xs font-medium',
+            isSelected
+              ? 'bg-accent-indigo/10 text-accent-indigo'
+              : 'bg-background/60 text-muted-foreground',
+          )}
+        >
+          {count}
+        </span>
+      ) : null}
     </Button>
   )
 }
@@ -119,7 +276,7 @@ export type TabsContentProps = {
 }
 
 export function TabsContent({ value, children, className }: TabsContentProps) {
-  const { value: selectedValue } = useTabsContext()
+  const { value: selectedValue, orientation } = useTabsContext()
 
   if (selectedValue !== value) {
     return null
@@ -128,7 +285,12 @@ export function TabsContent({ value, children, className }: TabsContentProps) {
   return (
     <div
       role="tabpanel"
-      className={cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', className)}
+      data-slot="tabs-content"
+      className={cn(
+        orientation === 'vertical' ? 'flex-1 min-w-0' : 'mt-2',
+        'ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        className,
+      )}
     >
       {children}
     </div>

package/src/primitives/time-picker.tsx

@@ -164,7 +164,7 @@ const slotVariants = cva(
       state: {
         default: 'bg-background hover:bg-muted/50 text-muted-foreground cursor-pointer',
         hover: 'bg-muted/50 text-muted-foreground cursor-pointer',
-        active: 'bg-brand-violet/10 text-brand-violet cursor-pointer',
+        active: 'bg-primary/10 text-primary cursor-pointer',
         disabled: 'bg-background text-muted-foreground/40 cursor-not-allowed',
       },
     },
@@ -225,7 +225,7 @@ export const TimePickerSlot = React.forwardRef<HTMLButtonElement, TimePickerSlot
         <span className="flex min-w-0 flex-1 items-center gap-1">
           <span>{display.main}</span>
           {display.suffix ? (
-            <span className={effectiveState === 'active' ? 'text-brand-violet/60' : 'text-muted-foreground/60'}>
+            <span className={effectiveState === 'active' ? 'text-primary/60' : 'text-muted-foreground/60'}>
               {display.suffix}
             </span>
           ) : null}
@@ -234,14 +234,14 @@ export const TimePickerSlot = React.forwardRef<HTMLButtonElement, TimePickerSlot
           <span className="flex min-w-0 items-center justify-end gap-1">
             <span>{right.main}</span>
             {right.suffix ? (
-              <span className={effectiveState === 'active' ? 'text-brand-violet/60' : 'text-muted-foreground/60'}>
+              <span className={effectiveState === 'active' ? 'text-primary/60' : 'text-muted-foreground/60'}>
                 {right.suffix}
               </span>
             ) : null}
           </span>
         ) : null}
         {effectiveState === 'active' ? (
-          <Check className="size-3.5 shrink-0 text-brand-violet" aria-hidden="true" />
+          <Check className="size-3.5 shrink-0 text-primary" aria-hidden="true" />
         ) : null}
       </button>
     )
@@ -257,7 +257,7 @@ const durationChipVariants = cva(
         default:
           'bg-background border border-border shadow-xs text-muted-foreground hover:bg-muted/40 cursor-pointer',
         hover: 'bg-muted/40 border border-border text-muted-foreground cursor-pointer',
-        active: 'bg-brand-violet/10 text-brand-violet cursor-pointer',
+        active: 'bg-primary/10 text-primary cursor-pointer',
         disabled:
           'bg-background border border-border text-muted-foreground/40 cursor-not-allowed shadow-xs',
       },
@@ -462,8 +462,7 @@ export function HorizontalScrollRow({
         <div
           ref={scrollRef}
           className={cn(
-            'flex items-center gap-2 overflow-x-auto py-3.5',
-            '[scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden',
+            'scrollbar-hide flex items-center gap-2 overflow-x-auto py-3.5',
             contentClassName,
           )}
           role="group"
@@ -705,8 +704,7 @@ function TimePickerCard({
   return (
     <div
       className={cn(
-        'flex w-[348px] flex-col overflow-hidden rounded-[20px] border border-border bg-background',
-        'shadow-[0px_1px_2px_0px_rgba(10,13,20,0.03),0px_24px_24px_-12px_rgba(51,51,51,0.04),0px_12px_12px_-6px_rgba(51,51,51,0.04)]',
+        'flex w-80 flex-col overflow-hidden rounded-xl border border-border bg-background shadow-xl',
         className,
       )}
       role="dialog"
@@ -799,7 +797,7 @@ function TimePickerCard({
               type="button"
               onClick={action.onClick}
               disabled={disabled}
-              className="flex h-9 w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium text-brand-violet transition-colors hover:bg-brand-violet/10 cursor-pointer disabled:pointer-events-none disabled:opacity-60"
+              className="flex h-9 w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium text-primary transition-colors hover:bg-primary/10 cursor-pointer disabled:pointer-events-none disabled:opacity-60"
               data-slot="time-picker-pinned-action"
             >
               {action.icon ? (
@@ -809,7 +807,7 @@ function TimePickerCard({
               ) : null}
               <span className="flex-1 text-left">{action.label}</span>
               {action.rightText ? (
-                <span className="text-brand-violet/60">{action.rightText}</span>
+                <span className="text-primary/60">{action.rightText}</span>
               ) : null}
             </button>
           ))}