@open-mercato/ui 0.5.1-develop.2953.6647bb2c43 → 0.5.1-develop.2964.d5ac4a6ebb

package/src/primitives/switch-field.tsx

@@ -0,0 +1,100 @@
+"use client"
+
+import * as React from 'react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { Switch } from './switch'
+
+export type SwitchFieldProps = Omit<React.ComponentProps<typeof Switch>, 'id'> & {
+  id?: string
+  label: React.ReactNode
+  sublabel?: React.ReactNode
+  description?: React.ReactNode
+  badge?: React.ReactNode
+  link?: React.ReactNode
+  /** When true, renders the switch on the left of the label content. */
+  flip?: boolean
+  containerClassName?: string
+  contentClassName?: string
+}
+
+export const SwitchField = React.forwardRef<
+  React.ElementRef<typeof Switch>,
+  SwitchFieldProps
+>(({
+  id: idProp,
+  label,
+  sublabel,
+  description,
+  badge,
+  link,
+  flip = false,
+  containerClassName,
+  contentClassName,
+  className,
+  disabled,
+  ...switchProps
+}, ref) => {
+  // useId is SSR/HMR-stable; counter-based fallbacks drift on hydration.
+  const fallbackId = React.useId()
+  const id = idProp ?? fallbackId
+
+  const hasMultiLine = Boolean(description || sublabel || link)
+  const switchEl = (
+    <Switch
+      ref={ref}
+      id={id}
+      disabled={disabled}
+      className={cn(hasMultiLine && 'mt-0.5', className)}
+      {...switchProps}
+    />
+  )
+
+  const content = (
+    <div className={cn('flex flex-1 min-w-0 flex-col gap-2.5', contentClassName)}>
+      <div className="flex flex-col gap-1">
+        <div className="flex flex-wrap items-center gap-1">
+          <label
+            htmlFor={id}
+            className={cn(
+              'text-sm font-medium leading-5 text-foreground select-none',
+              disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'
+            )}
+          >
+            {label}
+          </label>
+          {sublabel ? (
+            <span className="text-xs leading-4 text-muted-foreground select-none">{sublabel}</span>
+          ) : null}
+          {badge ? <span className="inline-flex shrink-0">{badge}</span> : null}
+        </div>
+        {description ? (
+          <p className="text-xs leading-4 text-muted-foreground">{description}</p>
+        ) : null}
+      </div>
+      {link ? <div className="flex">{link}</div> : null}
+    </div>
+  )
+
+  return (
+    <div
+      className={cn(
+        'flex gap-3',
+        hasMultiLine ? 'items-start' : 'items-center',
+        containerClassName
+      )}
+    >
+      {flip ? (
+        <>
+          {switchEl}
+          {content}
+        </>
+      ) : (
+        <>
+          {content}
+          {switchEl}
+        </>
+      )}
+    </div>
+  )
+})
+SwitchField.displayName = 'SwitchField'

package/src/primitives/switch.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from 'react'
 
 import { cn } from '@open-mercato/shared/lib/utils'
@@ -66,7 +68,9 @@ export const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
         onKeyDown={handleKeyDown}
         disabled={disabled}
         className={cn(
-          'inline-flex h-6 w-11 items-center rounded-full border border-transparent bg-input/60 transition-colors duration-200 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',
+          'group relative inline-flex h-5 w-8 shrink-0 cursor-pointer items-center justify-center rounded-full bg-transparent p-0',
+          'focus-visible:outline-none focus-visible:shadow-focus',
+          'disabled:cursor-not-allowed disabled:opacity-60',
           className
         )}
         {...props}
@@ -74,10 +78,19 @@ export const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
         <span
           aria-hidden
           className={cn(
-            'inline-block size-5 translate-x-0 rounded-full bg-background shadow transition-transform duration-200',
-            currentChecked ? 'translate-x-5' : 'translate-x-0'
+            'pointer-events-none flex h-4 w-7 items-center rounded-full px-0.5 transition-colors duration-150',
+            'bg-border group-hover:bg-muted-foreground/30',
+            'group-data-[state=checked]:bg-accent-indigo group-data-[state=checked]:group-hover:bg-accent-indigo/85'
           )}
-        />
+        >
+          <span
+            className={cn(
+              'block size-3 rounded-full bg-white transition-transform duration-200',
+              'shadow-[0_1px_2px_rgba(10,13,20,0.10),0_0_0_0.5px_rgba(10,13,20,0.04)]',
+              currentChecked ? 'translate-x-3' : 'translate-x-0'
+            )}
+          />
+        </span>
       </button>
     )
   }

package/src/primitives/textarea.tsx

@@ -1,20 +1,76 @@
+"use client"
+
 import * as React from 'react'
 
 import { cn } from '@open-mercato/shared/lib/utils'
 
-type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>
+const baseTextareaClass =
+  'flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-xs transition-colors placeholder:text-muted-foreground outline-none focus-visible:outline-none focus-visible:shadow-focus focus-visible:border-foreground hover:bg-muted/40 disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:border-border-disabled disabled:shadow-none disabled:hover:bg-bg-disabled aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:border-destructive resize-y min-h-[80px]'
+
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+  /** Show character counter (`current/max`) below the textarea. Requires `maxLength`. */
+  showCount?: boolean
+  /** Optional className applied to the outer wrapper (when counter is shown). */
+  wrapperClassName?: string
+}
 
 export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, ...props }, ref) => (
-    <textarea
-      ref={ref}
-      className={cn(
-        'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-        className
-      )}
-      {...props}
-    />
-  )
+  ({ className, showCount, wrapperClassName, value, defaultValue, maxLength, onChange, ...props }, ref) => {
+    const [internalValue, setInternalValue] = React.useState<string>(
+      typeof defaultValue === 'string' ? defaultValue : typeof value === 'string' ? value : ''
+    )
+
+    const isControlled = value !== undefined
+    const currentValue = isControlled ? String(value ?? '') : internalValue
+
+    const handleChange = React.useCallback(
+      (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+        if (!isControlled) setInternalValue(event.target.value)
+        onChange?.(event)
+      },
+      [isControlled, onChange]
+    )
+
+    const textarea = (
+      <textarea
+        ref={ref}
+        value={value}
+        defaultValue={isControlled ? undefined : defaultValue}
+        maxLength={maxLength}
+        onChange={handleChange}
+        className={cn(baseTextareaClass, className)}
+        {...props}
+      />
+    )
+
+    if (!showCount) return textarea
+
+    const length = currentValue.length
+    const max = typeof maxLength === 'number' ? maxLength : undefined
+    const isError = max != null && length > max
+    const isDisabled = props.disabled
+
+    return (
+      <div className={cn('flex flex-col gap-1', wrapperClassName)}>
+        {textarea}
+        <div className="flex justify-end">
+          <span
+            className={cn(
+              'text-overline uppercase',
+              isDisabled
+                ? 'text-text-disabled'
+                : isError
+                  ? 'text-destructive'
+                  : 'text-muted-foreground'
+            )}
+            aria-live="polite"
+          >
+            {max != null ? `${length}/${max}` : `${length}`}
+          </span>
+        </div>
+      </div>
+    )
+  }
 )
 
 Textarea.displayName = 'Textarea'

package/src/primitives/tooltip.tsx

@@ -2,6 +2,7 @@
 
 import * as React from 'react'
 import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@open-mercato/shared/lib/utils'
 
 export const TooltipProvider = TooltipPrimitive.Provider
@@ -10,24 +11,53 @@ export const Tooltip = TooltipPrimitive.Root
 
 export const TooltipTrigger = TooltipPrimitive.Trigger
 
+const tooltipContentVariants = cva(
+  'z-tooltip overflow-hidden rounded-sm max-w-xs break-words shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+  {
+    variants: {
+      variant: {
+        dark: 'bg-foreground text-background',
+        light: 'bg-popover text-popover-foreground border border-input',
+      },
+      size: {
+        sm: 'px-1.5 py-0.5 text-xs leading-4',
+        default: 'px-2 py-0.5 text-xs leading-4',
+        lg: 'px-3 py-2 text-sm leading-5',
+      },
+    },
+    defaultVariants: {
+      variant: 'dark',
+      size: 'default',
+    },
+  }
+)
+
+export type TooltipContentProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> &
+  VariantProps<typeof tooltipContentVariants> & {
+    /** Show a small arrow pointing at the trigger. */
+    arrow?: boolean
+  }
+
 export const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
+  TooltipContentProps
+>(({ className, sideOffset = 4, variant, size, arrow = true, children, ...props }, ref) => (
   <TooltipPrimitive.Portal>
     <TooltipPrimitive.Content
       ref={ref}
       sideOffset={sideOffset}
-      className={cn(
-        'z-tooltip overflow-hidden rounded-md bg-slate-900 px-3 py-1.5 text-xs text-slate-50 animate-in fade-in-0 zoom-in-95',
-        'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
-        'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2',
-        'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-        'max-w-xs break-words',
-        className
-      )}
+      className={cn(tooltipContentVariants({ variant, size }), className)}
       {...props}
-    />
+    >
+      {children}
+      {arrow ? (
+        <TooltipPrimitive.Arrow
+          width={10}
+          height={5}
+          className={cn(variant === 'light' ? 'fill-popover stroke-input' : 'fill-foreground')}
+        />
+      ) : null}
+    </TooltipPrimitive.Content>
   </TooltipPrimitive.Portal>
 ))
 TooltipContent.displayName = TooltipPrimitive.Content.displayName
@@ -41,6 +71,9 @@ export type TooltipProps = {
   open?: boolean
   onOpenChange?: (open: boolean) => void
   disabled?: boolean
+  variant?: 'dark' | 'light'
+  size?: 'sm' | 'default' | 'lg'
+  arrow?: boolean
 }
 
 /**
@@ -50,6 +83,11 @@ export type TooltipProps = {
  * <SimpleTooltip content="Full text here">
  *   <span>Truncated...</span>
  * </SimpleTooltip>
+ *
+ * @example with arrow + light variant
+ * <SimpleTooltip content="Help text" variant="light" arrow>
+ *   <InfoIcon />
+ * </SimpleTooltip>
  */
 export function SimpleTooltip({
   content,
@@ -60,8 +98,10 @@ export function SimpleTooltip({
   open,
   onOpenChange,
   disabled = false,
+  variant,
+  size,
+  arrow,
 }: TooltipProps) {
-  // If disabled or no content, just render children without tooltip
   const isDisabled = disabled || !content
 
   if (isDisabled) {
@@ -69,17 +109,21 @@ export function SimpleTooltip({
   }
 
   return (
-    <Tooltip
-      open={open}
-      onOpenChange={onOpenChange}
-      delayDuration={delayDuration}
-    >
-      <TooltipTrigger asChild>
-        {children}
-      </TooltipTrigger>
-      <TooltipContent side={side} align={align}>
-        {content}
-      </TooltipContent>
-    </Tooltip>
+    <TooltipProvider delayDuration={delayDuration}>
+      <Tooltip
+        open={open}
+        onOpenChange={onOpenChange}
+        delayDuration={delayDuration}
+      >
+        <TooltipTrigger asChild>
+          {children}
+        </TooltipTrigger>
+        <TooltipContent side={side} align={align} variant={variant} size={size} arrow={arrow}>
+          {content}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
   )
 }
+
+export { tooltipContentVariants }