@otfdashkit/ui 0.1.2 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@otfdashkit/ui",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "OTF UI — production-quality React component library. 98 primitives + blocks + layouts + charts on Radix + Tailwind v4. Cross-platform parity API with @otfdashkit/ui-native.",
   "keywords": [
     "otfdashkit",

package/src/index.ts

@@ -13,6 +13,7 @@ export * from './primitives/button'
 export * from './primitives/calendar'
 export * from './primitives/card'
 export * from './primitives/carousel'
+export * from './primitives/cart-line-item'
 export * from './primitives/chart'
 export * from './primitives/checkbox'
 export * from './primitives/code-block'
@@ -23,6 +24,7 @@ export * from './primitives/context-menu'
 export * from './primitives/dialog'
 export * from './primitives/drawer'
 export * from './primitives/dropdown-menu'
+export * from './primitives/empty-cart'
 // export * from './primitives/form'  // conflicts with forms/form.tsx (Form, FormField, etc.)
 export * from './primitives/hover-card'
 export * from './primitives/input-otp'
@@ -34,8 +36,10 @@ export * from './primitives/menubar'
 export * from './primitives/navigation-menu'
 export * from './primitives/pagination'
 export * from './primitives/popover'
+export * from './primitives/price-tag'
 export * from './primitives/progress'
 export * from './primitives/qr-code'
+export * from './primitives/quantity-stepper'
 export * from './primitives/radio'
 export * from './primitives/rating'
 export * from './primitives/resizable'
@@ -55,6 +59,7 @@ export * from './primitives/texture-card'
 export * from './primitives/toggle-group'
 export * from './primitives/toggle'
 export * from './primitives/tooltip'
+export * from './primitives/variant-picker'
 
 // components
 export * from './components/banner'
@@ -162,7 +167,8 @@ export * from './text'
 export * from './backgrounds'
 export * from './headers'
 export * from './motion'
-// export * from './data'      // conflicts with components/data-grid (DataGrid)
+// './data' is not star-exported: its DataGrid name collides with components/data-grid.
+export { DataGrid as AdvancedDataGrid, type DataGridProps as AdvancedDataGridProps } from './data/DataGrid'
 export * from './data/DataList'
 export * from './data/EventCalendar'
 export * from './data/GridList'

package/src/primitives/Button/Button.tsx

@@ -1,131 +1,2 @@
-import React from 'react'
-import { Slot } from '@radix-ui/react-slot'
-import { cva, type VariantProps } from 'class-variance-authority'
-import { cn } from '../utils/cn'
-
-const buttonVariants = cva(
-  [
-    'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium font-sans',
-    'transition-colors duration-[var(--duration-fast,100ms)]',
-    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
-    'disabled:pointer-events-none disabled:opacity-50',
-    'select-none',
-  ].join(' '),
-  {
-    variants: {
-      variant: {
-        default:
-          'bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80',
-        secondary:
-          'bg-secondary text-secondary-foreground hover:bg-secondary/80 active:bg-secondary/70',
-        outline:
-          'border border-border bg-transparent hover:bg-accent hover:text-accent-foreground active:bg-accent/70',
-        ghost:
-          'hover:bg-accent hover:text-accent-foreground active:bg-accent/70',
-        destructive:
-          'bg-destructive text-destructive-foreground hover:bg-destructive/90 active:bg-destructive/80',
-        link:
-          'text-primary underline-offset-4 hover:underline',
-        /** Gradient stack — premium variant */
-        gradient: [
-          'bg-gradient-to-b from-primary to-[hsl(var(--primary)/0.8)]',
-          'text-primary-foreground',
-          'shadow-[0_1px_0_0_rgba(255,255,255,0.1)_inset,0_-1px_0_0_rgba(0,0,0,0.25)_inset]',
-          'hover:from-[hsl(var(--primary)/0.9)] hover:to-[hsl(var(--primary)/0.7)]',
-          'active:from-[hsl(var(--primary)/0.8)] active:to-[hsl(var(--primary)/0.6)]',
-        ].join(' '),
-        /** Texture — nested ring surface as a button */
-        texture: [
-          'relative border border-border/40',
-          'bg-gradient-to-b from-card to-[hsl(var(--card)/0.9)]',
-          'text-foreground',
-          'shadow-[0_0_0_1px_hsl(var(--border)/0.2)_inset]',
-          'hover:border-border/60 hover:bg-accent',
-          'active:shadow-none',
-        ].join(' '),
-        /** Shimmer — animated conic gradient sweep with a hover highlight.
-         *  Loud + premium; reserve for primary CTAs and pricing pages, not
-         *  for in-product UI (gets tiring fast). Cross-platform parity with
-         *  @otfdashkit/ui-native via the same `shimmer` variant key. */
-        shimmer: [
-          'relative isolate overflow-hidden',
-          'bg-primary text-primary-foreground',
-          'shadow-[0_1px_0_rgba(255,255,255,0.18)_inset,0_-1px_0_rgba(0,0,0,0.25)_inset]',
-          'hover:bg-primary/95',
-          // Continuous conic-gradient sweep behind the surface.
-          'before:absolute before:inset-[-1px] before:rounded-[inherit] before:-z-10',
-          'before:bg-[conic-gradient(from_0deg,transparent_0deg,transparent_70deg,rgba(255,255,255,0.55)_90deg,transparent_110deg,transparent_360deg)]',
-          'before:animate-[shimmer-rotate_2.6s_linear_infinite]',
-          // Diagonal gloss that sweeps on hover.
-          'after:absolute after:inset-0 after:rounded-[inherit] after:pointer-events-none',
-          'after:bg-[linear-gradient(115deg,transparent_30%,rgba(255,255,255,0.22)_50%,transparent_70%)]',
-          'after:translate-x-[-120%] hover:after:translate-x-[120%] after:transition-transform after:duration-[900ms] after:ease-out',
-        ].join(' '),
-      },
-      size: {
-        sm:      'h-8 px-3 text-xs rounded-md',
-        default: 'h-9 px-4 py-2',
-        lg:      'h-11 px-6 text-base',
-        xl:      'h-12 px-8 text-base',
-        icon:    'h-9 w-9 p-0',
-        'icon-sm': 'h-7 w-7 p-0 text-xs',
-      },
-    },
-    defaultVariants: { variant: 'default', size: 'default' },
-  }
-)
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean
-}
-
-export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'button'
-    return (
-      <Comp
-        data-slot="button"
-        className={cn(buttonVariants({ variant, size }), className)}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Button.displayName = 'Button'
-
-export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  icon: React.ReactNode
-  label: string
-  size?: 'sm' | 'default' | 'lg'
-  variant?: VariantProps<typeof buttonVariants>['variant']
-  asChild?: boolean
-}
-
-export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
-  ({ icon, label, size = 'default', variant = 'ghost', className, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'button'
-    const sizeClass = size === 'sm' ? 'h-7 w-7' : size === 'lg' ? 'h-10 w-10' : 'h-9 w-9'
-    return (
-      <Comp
-        ref={ref}
-        aria-label={label}
-        data-slot="icon-button"
-        className={cn(
-          buttonVariants({ variant }),
-          sizeClass,
-          'p-0 shrink-0',
-          className
-        )}
-        {...props}
-      >
-        {icon}
-      </Comp>
-    )
-  }
-)
-IconButton.displayName = 'IconButton'
-
-export { buttonVariants }
+// Single source of truth lives in ../button; this path stays so existing imports keep working.
+export * from '../button'

package/src/primitives/button.tsx

@@ -14,12 +14,42 @@ const buttonVariants = cva(
         ghost:       'hover:bg-accent hover:text-accent-foreground',
         destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
         link:        'text-primary underline-offset-4 hover:underline',
+        gradient: [
+          'bg-gradient-to-b from-primary to-[hsl(var(--primary)/0.8)]',
+          'text-primary-foreground',
+          'shadow-[0_1px_0_0_rgba(255,255,255,0.1)_inset,0_-1px_0_0_rgba(0,0,0,0.25)_inset]',
+          'hover:from-[hsl(var(--primary)/0.9)] hover:to-[hsl(var(--primary)/0.7)]',
+          'active:from-[hsl(var(--primary)/0.8)] active:to-[hsl(var(--primary)/0.6)]',
+        ].join(' '),
+        texture: [
+          'relative border border-border/40',
+          'bg-gradient-to-b from-card to-[hsl(var(--card)/0.9)]',
+          'text-foreground',
+          'shadow-[0_0_0_1px_hsl(var(--border)/0.2)_inset]',
+          'hover:border-border/60 hover:bg-accent',
+          'active:shadow-none',
+        ].join(' '),
+        // Loud by design: keep for primary CTAs. The sweep keyframe ships in themes/base.css.
+        shimmer: [
+          'relative isolate overflow-hidden',
+          'bg-primary text-primary-foreground',
+          'shadow-[0_1px_0_rgba(255,255,255,0.18)_inset,0_-1px_0_rgba(0,0,0,0.25)_inset]',
+          'hover:bg-primary/95',
+          'before:absolute before:inset-[-1px] before:rounded-[inherit] before:-z-10',
+          'before:bg-[conic-gradient(from_0deg,transparent_0deg,transparent_70deg,rgba(255,255,255,0.55)_90deg,transparent_110deg,transparent_360deg)]',
+          'before:animate-[shimmer-rotate_2.6s_linear_infinite] motion-reduce:before:animate-none',
+          'after:absolute after:inset-0 after:rounded-[inherit] after:pointer-events-none',
+          'after:bg-[linear-gradient(115deg,transparent_30%,rgba(255,255,255,0.22)_50%,transparent_70%)]',
+          'after:translate-x-[-120%] hover:after:translate-x-[120%] after:transition-transform after:duration-[900ms] after:ease-out',
+        ].join(' '),
       },
       size: {
         sm:      'h-8 px-3 text-xs',
         default: 'h-9 px-4 py-2',
         lg:      'h-11 px-6 text-base',
+        xl:      'h-12 px-8 text-base',
         icon:    'h-9 w-9',
+        'icon-sm': 'h-7 w-7 p-0 text-xs',
       },
     },
     defaultVariants: { variant: 'default', size: 'default' },
@@ -40,4 +70,26 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 )
 Button.displayName = 'Button'
 
+export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  icon: React.ReactNode
+  /** Accessible name; an icon-only button has no visible text. */
+  label: string
+  size?: 'sm' | 'default' | 'lg'
+  variant?: VariantProps<typeof buttonVariants>['variant']
+  asChild?: boolean
+}
+
+export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
+  ({ icon, label, size = 'default', variant = 'ghost', className, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button'
+    const sizeClass = size === 'sm' ? 'h-7 w-7' : size === 'lg' ? 'h-10 w-10' : 'h-9 w-9'
+    return (
+      <Comp ref={ref} aria-label={label} className={cn(buttonVariants({ variant }), sizeClass, 'p-0 shrink-0', className)} {...props}>
+        {icon}
+      </Comp>
+    )
+  }
+)
+IconButton.displayName = 'IconButton'
+
 export { buttonVariants }

package/src/primitives/cart-line-item.tsx

@@ -0,0 +1,81 @@
+import React from 'react'
+import { X } from 'lucide-react'
+import { cn } from '../utils/cn'
+import { Button } from './button'
+import { PriceTag } from './price-tag'
+import { QuantityStepper } from './quantity-stepper'
+
+export type CartLineItemProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
+  /** Product thumbnail URL. */
+  image?: string
+  title: string
+  /** Variant summary line, e.g. "Whole bean · 250g". */
+  variant?: string
+  /** Unit price in minor units (cents). */
+  price: number
+  /** Optional compare-at unit price in minor units. */
+  compareAt?: number
+  currency?: string
+  quantity: number
+  onQuantityChange?: (qty: number) => void
+  onRemove?: () => void
+  minQuantity?: number
+  maxQuantity?: number
+}
+
+/** Cart row: thumbnail · title · variant · price · quantity stepper · remove. */
+export const CartLineItem = React.forwardRef<HTMLDivElement, CartLineItemProps>(
+  (
+    {
+      image,
+      title,
+      variant,
+      price,
+      compareAt,
+      currency = 'USD',
+      quantity,
+      onQuantityChange,
+      onRemove,
+      minQuantity = 1,
+      maxQuantity = 99,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cn('flex items-center gap-4 rounded-lg border border-border bg-card p-3', className)}
+        {...props}
+      >
+        {image && <img src={image} alt="" className="h-16 w-16 flex-none rounded-md object-cover" />}
+        <div className="flex min-w-0 flex-1 flex-col gap-1">
+          <span className="truncate font-medium text-card-foreground">{title}</span>
+          {variant && <span className="truncate text-sm text-muted-foreground">{variant}</span>}
+          <PriceTag amount={price} compareAt={compareAt} currency={currency} size="sm" />
+        </div>
+        <QuantityStepper
+          value={quantity}
+          min={minQuantity}
+          max={maxQuantity}
+          onValueChange={onQuantityChange}
+          size="sm"
+        />
+        {onRemove && (
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className="h-8 w-8 text-muted-foreground hover:text-destructive"
+            onClick={onRemove}
+            aria-label={`Remove ${title}`}
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        )}
+      </div>
+    )
+  },
+)
+CartLineItem.displayName = 'CartLineItem'

package/src/primitives/empty-cart.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { ShoppingCart } from 'lucide-react'
+import { cn } from '../utils/cn'
+import { Button } from './button'
+
+export type EmptyCartProps = React.HTMLAttributes<HTMLDivElement> & {
+  title?: string
+  description?: string
+  /** CTA label — renders a button only when `onAction` is also provided. */
+  actionLabel?: string
+  onAction?: () => void
+  /** Override the default cart icon. */
+  icon?: React.ReactNode
+}
+
+/** Bespoke empty-cart state: soft icon chip, message, and a continue-shopping CTA. */
+export const EmptyCart = React.forwardRef<HTMLDivElement, EmptyCartProps>(
+  (
+    {
+      title = 'Your cart is empty',
+      description = 'Browse the catalog and add something you love.',
+      actionLabel = 'Continue shopping',
+      onAction,
+      icon,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cn('flex flex-col items-center justify-center gap-4 px-6 py-12 text-center', className)}
+        {...props}
+      >
+        <div className="flex h-14 w-14 items-center justify-center rounded-full bg-[hsl(var(--muted))] text-[hsl(var(--muted-foreground))]">
+          {icon ?? <ShoppingCart className="h-6 w-6" strokeWidth={1.5} />}
+        </div>
+        <div className="flex flex-col gap-1">
+          <span className="text-base font-semibold text-foreground">{title}</span>
+          {description && <span className="max-w-xs text-sm text-muted-foreground">{description}</span>}
+        </div>
+        {actionLabel && onAction && (
+          <Button onClick={onAction} className="mt-1">
+            {actionLabel}
+          </Button>
+        )}
+      </div>
+    )
+  },
+)
+EmptyCart.displayName = 'EmptyCart'

package/src/primitives/price-tag.tsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import { cn } from '../utils/cn'
+
+const SIZE = {
+  sm: { price: 'text-sm', compare: 'text-xs' },
+  md: { price: 'text-lg', compare: 'text-sm' },
+  lg: { price: 'text-2xl', compare: 'text-base' },
+} as const
+
+export type PriceTagProps = React.HTMLAttributes<HTMLSpanElement> & {
+  /** Price in minor units (e.g. cents). */
+  amount: number
+  /** Original/compare-at price in minor units — renders struck-through when greater than `amount`. */
+  compareAt?: number
+  /** ISO 4217 currency code. Default 'USD'. */
+  currency?: string
+  /** BCP-47 locale for formatting. Default 'en-US'. */
+  locale?: string
+  /** Size scale. Default 'md'. */
+  size?: keyof typeof SIZE
+  /** Show the "−N%" discount pill when on sale. Default true. */
+  showDiscount?: boolean
+}
+
+function formatMoney(minor: number, currency: string, locale: string) {
+  return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(minor / 100)
+}
+
+/**
+ * Formatted currency price with an optional compare-at strikethrough and discount pill.
+ * Amounts are minor units (cents) so there's no float drift.
+ */
+export const PriceTag = React.forwardRef<HTMLSpanElement, PriceTagProps>(
+  (
+    { amount, compareAt, currency = 'USD', locale = 'en-US', size = 'md', showDiscount = true, className, ...props },
+    ref,
+  ) => {
+    const onSale = compareAt !== undefined && compareAt > amount
+    const pct = onSale ? Math.round((1 - amount / compareAt) * 100) : 0
+    const s = SIZE[size]
+    return (
+      <span ref={ref} className={cn('inline-flex items-baseline gap-2 font-sans tabular-nums', className)} {...props}>
+        <span className={cn('font-semibold tracking-tight text-foreground', s.price)}>
+          {formatMoney(amount, currency, locale)}
+        </span>
+        {onSale && (
+          <>
+            <span className={cn('text-muted-foreground line-through', s.compare)}>
+              {formatMoney(compareAt, currency, locale)}
+            </span>
+            {showDiscount && (
+              <span className="rounded-full bg-destructive/10 px-2 py-0.5 text-xs font-semibold text-destructive">
+                −{pct}%
+              </span>
+            )}
+          </>
+        )}
+      </span>
+    )
+  },
+)
+PriceTag.displayName = 'PriceTag'

package/src/primitives/quantity-stepper.tsx

@@ -0,0 +1,92 @@
+import React from 'react'
+import { Minus, Plus } from 'lucide-react'
+import { cn } from '../utils/cn'
+import { Button } from './button'
+
+export type QuantityStepperProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
+  /** Controlled quantity. */
+  value?: number
+  /** Uncontrolled initial quantity. Default 1. */
+  defaultValue?: number
+  /** Fires with the clamped next quantity. */
+  onValueChange?: (value: number) => void
+  /** Minimum (decrement disables here). Default 1. */
+  min?: number
+  /** Maximum (increment disables here). Default 99. */
+  max?: number
+  /** Increment/decrement step. Default 1. */
+  step?: number
+  /** Control size. Default 'md'. */
+  size?: 'sm' | 'md'
+  disabled?: boolean
+  'aria-label'?: string
+}
+
+/** Increment / decrement quantity control with min/max clamping. */
+export const QuantityStepper = React.forwardRef<HTMLDivElement, QuantityStepperProps>(
+  (
+    {
+      value: valueProp,
+      defaultValue = 1,
+      onValueChange,
+      min = 1,
+      max = 99,
+      step = 1,
+      size = 'md',
+      disabled = false,
+      className,
+      'aria-label': ariaLabel = 'Quantity',
+      ...props
+    },
+    ref,
+  ) => {
+    const isControlled = valueProp !== undefined
+    const [internal, setInternal] = React.useState(defaultValue)
+    const value = isControlled ? (valueProp as number) : internal
+    const commit = (next: number) => {
+      const clamped = Math.max(min, Math.min(max, next))
+      if (!isControlled) setInternal(clamped)
+      onValueChange?.(clamped)
+    }
+    const dim = size === 'sm' ? 'h-7 w-7' : 'h-9 w-9'
+    return (
+      <div
+        ref={ref}
+        role="group"
+        aria-label={ariaLabel}
+        className={cn('inline-flex items-center rounded-md border border-input', className)}
+        {...props}
+      >
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className={cn('rounded-r-none', dim)}
+          disabled={disabled || value <= min}
+          onClick={() => commit(value - step)}
+          aria-label="Decrease quantity"
+        >
+          <Minus className="h-4 w-4" />
+        </Button>
+        <span
+          aria-live="polite"
+          className={cn('select-none text-center text-sm font-medium tabular-nums', size === 'sm' ? 'min-w-7' : 'min-w-8')}
+        >
+          {value}
+        </span>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className={cn('rounded-l-none', dim)}
+          disabled={disabled || value >= max}
+          onClick={() => commit(value + step)}
+          aria-label="Increase quantity"
+        >
+          <Plus className="h-4 w-4" />
+        </Button>
+      </div>
+    )
+  },
+)
+QuantityStepper.displayName = 'QuantityStepper'

package/src/primitives/variant-picker.tsx

@@ -0,0 +1,74 @@
+import React from 'react'
+import { cn } from '../utils/cn'
+
+export type VariantOption = {
+  value: string
+  label: string
+  /** Optional color swatch — a CSS color from your product data (not a design token). */
+  swatch?: string
+  disabled?: boolean
+}
+
+export type VariantPickerProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
+  /** Group label, e.g. "Grind" or "Size". */
+  label?: string
+  options: VariantOption[]
+  /** Controlled selected value. */
+  value?: string
+  /** Uncontrolled initial value. */
+  defaultValue?: string
+  onValueChange?: (value: string) => void
+}
+
+/** Single-select product-option picker (grind, size, color) with selected + out-of-stock states. */
+export const VariantPicker = React.forwardRef<HTMLDivElement, VariantPickerProps>(
+  ({ label, options, value: valueProp, defaultValue, onValueChange, className, ...props }, ref) => {
+    const isControlled = valueProp !== undefined
+    const [internal, setInternal] = React.useState(defaultValue)
+    const value = isControlled ? valueProp : internal
+    const select = (v: string) => {
+      if (!isControlled) setInternal(v)
+      onValueChange?.(v)
+    }
+    return (
+      <div ref={ref} role="radiogroup" aria-label={label} className={cn('flex flex-col gap-2', className)} {...props}>
+        {label && (
+          <span className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">{label}</span>
+        )}
+        <div className="flex flex-wrap gap-2">
+          {options.map((opt) => {
+            const selected = value === opt.value
+            return (
+              <button
+                key={opt.value}
+                type="button"
+                role="radio"
+                aria-checked={selected}
+                disabled={opt.disabled}
+                onClick={() => select(opt.value)}
+                className={cn(
+                  'inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm font-medium transition-colors',
+                  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+                  selected
+                    ? 'border-primary bg-primary/10 text-[hsl(var(--primary))]'
+                    : 'border-border hover:bg-accent hover:text-accent-foreground',
+                  opt.disabled && 'cursor-not-allowed text-muted-foreground line-through opacity-50',
+                )}
+              >
+                {opt.swatch && (
+                  <span
+                    aria-hidden="true"
+                    className="h-4 w-4 rounded-full border border-border"
+                    style={{ backgroundColor: opt.swatch }}
+                  />
+                )}
+                {opt.label}
+              </button>
+            )
+          })}
+        </div>
+      </div>
+    )
+  },
+)
+VariantPicker.displayName = 'VariantPicker'