@open-mercato/ui 0.5.1-develop.2856.35de414092 → 0.5.1-develop.2874.77704bccbd

package/src/primitives/avatar.tsx

@@ -73,3 +73,25 @@ export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
 Avatar.displayName = 'Avatar'
 
 export { avatarVariants }
+
+export type AvatarStackProps = {
+  children: React.ReactNode
+  max?: number
+  size?: VariantProps<typeof avatarVariants>['size']
+  className?: string
+}
+
+export function AvatarStack({ children, max = 4, size = 'md', className }: AvatarStackProps) {
+  const items = React.Children.toArray(children)
+  const visible = items.slice(0, max)
+  const overflow = items.length - max
+
+  return (
+    <div className={cn('flex items-center [&>*:not(:first-child)]:-ml-2 [&>*]:ring-2 [&>*]:ring-background', className)}>
+      {visible}
+      {overflow > 0 && (
+        <Avatar label={`+${overflow}`} size={size} variant="monochrome" className="-ml-2" />
+      )}
+    </div>
+  )
+}

package/src/primitives/badge.tsx

@@ -3,7 +3,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@open-mercato/shared/lib/utils'
 
 const badgeVariants = cva(
-  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
   {
     variants: {
       variant: {

package/src/primitives/button.tsx

@@ -4,13 +4,19 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@open-mercato/shared/lib/utils'
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium cursor-pointer transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium cursor-pointer transition-all disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled disabled:border-border-disabled disabled:shadow-none disabled:[background-image:none] [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:outline-none focus-visible:shadow-focus aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+        default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary-hover',
         destructive:
-          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+          'bg-destructive text-white shadow-xs hover:bg-destructive/90 aria-invalid:ring-destructive dark:aria-invalid:ring-destructive dark:bg-destructive/10',
+        'destructive-outline':
+          'border border-destructive/30 bg-background text-destructive shadow-xs hover:bg-destructive/10 dark:border-destructive/40 dark:hover:bg-destructive/15',
+        'destructive-soft':
+          'bg-destructive/10 text-destructive hover:bg-destructive/15 dark:bg-destructive/15 dark:hover:bg-destructive/20',
+        'destructive-ghost':
+          'text-destructive hover:bg-destructive/10 dark:hover:bg-destructive/15',
         outline:
           'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
         secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
@@ -20,8 +26,9 @@ const buttonVariants = cva(
       },
       size: {
         default: 'h-9 px-4 py-2 has-[>svg]:px-3',
-        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
-        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        sm: 'h-8 gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 px-6 has-[>svg]:px-4',
+        '2xs': 'h-7 gap-1 px-2 py-0.5 has-[>svg]:px-1.5 text-xs',
         icon: 'size-9',
       },
     },

package/src/primitives/calendar.tsx

@@ -35,7 +35,7 @@ export function Calendar({ className, classNames, showOutsideDays = true, ...pro
         ),
         month_grid: 'w-full border-collapse space-y-1',
         weekdays: 'flex',
-        weekday: 'text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]',
+        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',

package/src/primitives/checkbox-field.tsx

@@ -0,0 +1,85 @@
+import * as React from "react"
+import { cn } from "@open-mercato/shared/lib/utils"
+import { Checkbox, type CheckboxProps } from "./checkbox"
+
+export type CheckboxFieldProps = Omit<CheckboxProps, "id"> & {
+  id?: string
+  label: React.ReactNode
+  sublabel?: React.ReactNode
+  description?: React.ReactNode
+  badge?: React.ReactNode
+  link?: React.ReactNode
+  /** When true, renders the checkbox on the right of the label content. */
+  flip?: boolean
+  /** Additional className for the outer wrapper. */
+  containerClassName?: string
+  /** Additional className for the right-side content stack. */
+  contentClassName?: string
+}
+
+export const CheckboxField = React.forwardRef<
+  React.ElementRef<typeof Checkbox>,
+  CheckboxFieldProps
+>(({
+  id: idProp,
+  label,
+  sublabel,
+  description,
+  badge,
+  link,
+  flip = false,
+  containerClassName,
+  contentClassName,
+  size = "md",
+  className,
+  disabled,
+  ...checkboxProps
+}, ref) => {
+  const reactId = React.useId()
+  const id = idProp ?? `checkbox-field-${reactId}`
+
+  const checkbox = (
+    <Checkbox
+      ref={ref}
+      id={id}
+      size={size}
+      disabled={disabled}
+      className={cn("mt-0.5", className)}
+      {...checkboxProps}
+    />
+  )
+
+  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 items-start gap-2", flip && "flex-row-reverse", containerClassName)}>
+      {flip ? content : checkbox}
+      {flip ? checkbox : content}
+    </div>
+  )
+})
+CheckboxField.displayName = "CheckboxField"

package/src/primitives/checkbox.tsx

@@ -1,28 +1,54 @@
 import * as React from "react"
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { Check } from "lucide-react"
+import { Check, Minus } from "lucide-react"
+import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@open-mercato/shared/lib/utils"
 
+const checkboxVariants = cva(
+  "peer shrink-0 rounded-[4px] border border-input bg-background shadow-xs ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-indigo/40 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-accent-indigo data-[state=checked]:text-accent-indigo-foreground data-[state=checked]:border-accent-indigo data-[state=indeterminate]:bg-accent-indigo data-[state=indeterminate]:text-accent-indigo-foreground data-[state=indeterminate]:border-accent-indigo hover:border-accent-indigo/60 transition-colors",
+  {
+    variants: {
+      size: {
+        sm: "size-4",
+        md: "size-5",
+      },
+    },
+    defaultVariants: {
+      size: "sm",
+    },
+  }
+)
+
+const indicatorIconBySize = {
+  sm: "size-3.5",
+  md: "size-4",
+} as const
+
+export type CheckboxProps = React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> &
+  VariantProps<typeof checkboxVariants>
+
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <CheckboxPrimitive.Root
-    ref={ref}
-    className={cn(
-      "peer size-4 shrink-0 rounded-sm border border-input bg-background shadow-xs ring-offset-background 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 data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary",
-      className
-    )}
-    {...props}
-  >
-    <CheckboxPrimitive.Indicator
-      className={cn("flex items-center justify-center text-current")}
+  CheckboxProps
+>(({ className, size, ...props }, ref) => {
+  const iconClass = indicatorIconBySize[size ?? "sm"]
+  return (
+    <CheckboxPrimitive.Root
+      ref={ref}
+      className={cn(checkboxVariants({ size, className }))}
+      {...props}
     >
-      <Check className="size-3.5" />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-))
+      <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
+        {props.checked === "indeterminate" ? (
+          <Minus className={iconClass} aria-hidden="true" />
+        ) : (
+          <Check className={iconClass} aria-hidden="true" />
+        )}
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+})
 Checkbox.displayName = CheckboxPrimitive.Root.displayName
 
-export { Checkbox }
+export { Checkbox, checkboxVariants }

package/src/primitives/dialog.tsx

@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      'fixed inset-0 z-50 bg-black/50 backdrop-blur-sm transition-opacity data-[state=open]:animate-in data-[state=closed]:animate-out',
+      'fixed inset-0 z-modal bg-black/50 backdrop-blur-sm transition-opacity data-[state=open]:animate-in data-[state=closed]:animate-out',
       className
     )}
     {...props}
@@ -53,16 +53,16 @@ const DialogContent = React.forwardRef<
         ref={ref}
         data-dialog-content=""
         className={cn(
-          'fixed inset-x-0 bottom-0 z-50 flex min-h-[50vh] max-h-[70vh] w-full translate-x-0 translate-y-0 flex-col gap-4 overflow-y-auto rounded-t-2xl border-t bg-card p-6 shadow-lg',
+          'fixed inset-x-0 bottom-0 z-modal flex min-h-[50vh] max-h-[70vh] w-full translate-x-0 translate-y-0 flex-col gap-4 overflow-y-auto rounded-t-2xl border-t bg-card p-6 shadow-lg',
           'sm:inset-auto sm:left-1/2 sm:top-1/2 sm:min-h-0 sm:h-auto sm:w-full sm:max-w-lg sm:max-h-[90vh] sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-xl sm:border',
-          'focus:outline-none data-[state=open]:animate-in data-[state=closed]:animate-out',
+          'focus-visible:outline-none data-[state=open]:animate-in data-[state=closed]:animate-out',
           className,
         )}
         {...props}
       >
         <DialogClose
           data-dialog-close=""
-          className="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+          className="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
           aria-label={t('ui.dialog.close.ariaLabel', 'Close')}
         >
           <X className="h-4 w-4" />

package/src/primitives/fancy-button.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@open-mercato/shared/lib/utils'
+
+export type FancyButtonType = 'neutral' | 'basic' | 'primary' | 'destructive'
+
+const sheenGradient =
+  'linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 100%)'
+
+const fancyTypeStyles: Record<
+  FancyButtonType,
+  { className: string; style: React.CSSProperties }
+> = {
+  neutral: {
+    className:
+      'border border-white/[0.12] text-white shadow-[0px_1px_2px_0px_rgba(27,28,29,0.48),0px_0px_0px_1px_#242628] hover:brightness-110',
+    style: {
+      backgroundImage: `${sheenGradient}, linear-gradient(90deg, #171717 0%, #171717 100%)`,
+    },
+  },
+  basic: {
+    className:
+      'bg-background text-muted-foreground shadow-[0px_1px_3px_0px_rgba(14,18,27,0.12),0px_0px_0px_1px_var(--border,#ebebeb)] hover:bg-accent',
+    style: {},
+  },
+  primary: {
+    className: 'text-foreground hover:brightness-105',
+    style: {
+      backgroundImage:
+        'linear-gradient(161.7deg, var(--brand-lime, #B4F372) 0%, #EEFB63 35.36%, var(--brand-violet, #BC9AFF) 70.72%)',
+    },
+  },
+  destructive: {
+    className:
+      'border border-white/[0.12] text-white shadow-[0px_1px_2px_0px_rgba(14,18,27,0.24),0px_0px_0px_1px_var(--destructive,#dc2626)] hover:brightness-110',
+    style: {
+      backgroundImage: `${sheenGradient}, linear-gradient(90deg, var(--destructive, #dc2626) 0%, var(--destructive, #dc2626) 100%)`,
+    },
+  },
+}
+
+const fancyButtonVariants = cva(
+  "inline-flex items-center justify-center gap-1 whitespace-nowrap font-medium cursor-pointer transition-all overflow-hidden disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled disabled:border-border-disabled disabled:shadow-none disabled:[background-image:none] [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-5 [&_svg]:shrink-0 outline-none focus-visible:outline-none focus-visible:shadow-focus",
+  {
+    variants: {
+      size: {
+        default: 'h-10 px-3 text-sm rounded-md',
+        sm: 'h-9 px-2 text-sm rounded-md',
+        xs: 'h-8 px-2 text-xs rounded-md',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  }
+)
+
+export type FancyButtonProps = Omit<React.ComponentProps<'button'>, 'type'> &
+  VariantProps<typeof fancyButtonVariants> & {
+    asChild?: boolean
+    intent?: FancyButtonType
+    htmlType?: 'button' | 'submit' | 'reset'
+  }
+
+export function FancyButton({
+  className,
+  size,
+  intent = 'neutral',
+  htmlType = 'button',
+  asChild = false,
+  style,
+  ...props
+}: FancyButtonProps) {
+  const Comp = asChild ? Slot : 'button'
+  const { className: typeClassName, style: typeStyle } = fancyTypeStyles[intent]
+  return (
+    <Comp
+      data-slot="fancy-button"
+      data-fancy-intent={intent}
+      type={asChild ? undefined : htmlType}
+      className={cn(fancyButtonVariants({ size, className }), typeClassName)}
+      style={{ ...typeStyle, ...style }}
+      {...props}
+    />
+  )
+}
+
+export { fancyButtonVariants }

package/src/primitives/icon-button.tsx

@@ -4,13 +4,17 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@open-mercato/shared/lib/utils'
 
 const iconButtonVariants = cva(
-  "inline-flex items-center justify-center rounded-md cursor-pointer transition-all outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+  "inline-flex items-center justify-center cursor-pointer transition-all outline-none disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled disabled:border-border-disabled disabled:shadow-none [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:outline-none focus-visible:shadow-focus aria-pressed:bg-primary aria-pressed:text-primary-foreground aria-pressed:hover:bg-primary-hover",
   {
     variants: {
       variant: {
         outline:
           'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
         ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        white:
+          'bg-background text-muted-foreground shadow-xs hover:bg-accent hover:text-accent-foreground',
+        modifiable:
+          'bg-transparent text-current hover:bg-foreground/10',
       },
       size: {
         xs: 'size-6',
@@ -18,10 +22,15 @@ const iconButtonVariants = cva(
         default: 'size-8',
         lg: 'size-9',
       },
+      fullRadius: {
+        true: 'rounded-full',
+        false: 'rounded-md',
+      },
     },
     defaultVariants: {
       variant: 'outline',
       size: 'default',
+      fullRadius: false,
     },
   }
 )
@@ -30,12 +39,20 @@ export function IconButton({
   className,
   variant,
   size,
+  fullRadius,
   asChild = false,
   ...props
 }: React.ComponentProps<'button'> &
   VariantProps<typeof iconButtonVariants> & { asChild?: boolean }) {
   const Comp = asChild ? Slot : 'button'
-  return <Comp data-slot="icon-button" type={asChild ? undefined : 'button'} className={cn(iconButtonVariants({ variant, size, className }))} {...props} />
+  return (
+    <Comp
+      data-slot="icon-button"
+      type={asChild ? undefined : 'button'}
+      className={cn(iconButtonVariants({ variant, size, fullRadius, className }))}
+      {...props}
+    />
+  )
 }
 
 export { iconButtonVariants }

package/src/primitives/kbd.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react'
+import { cn } from '@open-mercato/shared/lib/utils'
+
+export type KbdProps = React.HTMLAttributes<HTMLElement>
+
+export function Kbd({ children, className, ...props }: KbdProps) {
+  return (
+    <kbd
+      className={cn(
+        'inline-flex items-center rounded-sm border border-border bg-muted px-1.5 py-0.5 font-mono text-xs text-muted-foreground shadow-xs',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </kbd>
+  )
+}
+
+export type KbdShortcutProps = {
+  keys: string[]
+  className?: string
+}
+
+export function KbdShortcut({ keys, className }: KbdShortcutProps) {
+  return (
+    <span className={cn('inline-flex items-center gap-1', className)}>
+      {keys.map((key, i) => (
+        <React.Fragment key={i}>
+          <Kbd>{key}</Kbd>
+          {i < keys.length - 1 && (
+            <span className="text-xs text-muted-foreground">+</span>
+          )}
+        </React.Fragment>
+      ))}
+    </span>
+  )
+}

package/src/primitives/link-button.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@open-mercato/shared/lib/utils'
+
+const linkButtonVariants = cva(
+  'inline-flex items-center justify-center gap-1 cursor-pointer font-medium transition-colors outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus-visible:underline',
+  {
+    variants: {
+      variant: {
+        gray: 'text-muted-foreground hover:text-foreground',
+        black: 'text-foreground hover:text-foreground/80',
+        primary: 'text-primary hover:text-primary-hover',
+        error: 'text-destructive hover:text-destructive/80',
+        modifiable: 'text-current hover:opacity-80',
+      },
+      size: {
+        sm: 'text-xs leading-4 [&_svg:not([class*=size-])]:size-3',
+        default: 'text-sm leading-5 [&_svg:not([class*=size-])]:size-4',
+      },
+      underline: {
+        always: 'underline underline-offset-4',
+        hover: 'underline-offset-4 hover:underline',
+        none: '',
+      },
+    },
+    defaultVariants: {
+      variant: 'primary',
+      size: 'default',
+      underline: 'hover',
+    },
+  }
+)
+
+export function LinkButton({
+  className,
+  variant,
+  size,
+  underline,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> &
+  VariantProps<typeof linkButtonVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : 'button'
+  return (
+    <Comp
+      data-slot="link-button"
+      type={asChild ? undefined : 'button'}
+      className={cn(linkButtonVariants({ variant, size, underline, className }))}
+      {...props}
+    />
+  )
+}
+
+export { linkButtonVariants }

package/src/primitives/popover.tsx

@@ -22,7 +22,7 @@ export const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        'z-50 min-w-[280px] rounded-md border bg-popover p-0 text-popover-foreground shadow-md outline-none',
+        'z-dropdown min-w-[280px] rounded-md border bg-popover p-0 text-popover-foreground shadow-md outline-none',
         'data-[state=open]:animate-in data-[state=closed]:animate-out',
         'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
         'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',

package/src/primitives/social-button.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@open-mercato/shared/lib/utils'
+
+export type SocialBrand =
+  | 'apple'
+  | 'github'
+  | 'x'
+  | 'google'
+  | 'facebook'
+  | 'dropbox'
+  | 'linkedin'
+
+const baseClasses =
+  "inline-flex h-10 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium cursor-pointer transition-all disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled disabled:border-border-disabled disabled:shadow-none [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-5 [&_svg]:shrink-0 outline-none focus-visible:outline-none focus-visible:shadow-focus"
+
+const filledByBrand: Record<SocialBrand, string> = {
+  apple: 'bg-brand-apple text-white hover:bg-brand-apple/90',
+  github: 'bg-brand-github text-white hover:bg-brand-github/90',
+  x: 'bg-brand-x text-white hover:bg-brand-x/90',
+  google: 'bg-background text-foreground border border-brand-google-stroke hover:bg-accent',
+  facebook: 'bg-brand-facebook text-white hover:bg-brand-facebook/90',
+  dropbox: 'bg-brand-dropbox text-white hover:bg-brand-dropbox/90',
+  linkedin: 'bg-brand-linkedin text-white hover:bg-brand-linkedin/90',
+}
+
+const strokeByBrand: Record<SocialBrand, string> = {
+  apple: 'bg-background text-brand-apple border border-brand-apple/30 hover:bg-brand-apple/5',
+  github: 'bg-background text-brand-github border border-brand-github/30 hover:bg-brand-github/5',
+  x: 'bg-background text-brand-x border border-brand-x/30 hover:bg-brand-x/5',
+  google: 'bg-background text-foreground border border-brand-google-stroke hover:bg-accent',
+  facebook: 'bg-background text-brand-facebook border border-brand-facebook/40 hover:bg-brand-facebook/5',
+  dropbox: 'bg-background text-brand-dropbox border border-brand-dropbox/40 hover:bg-brand-dropbox/5',
+  linkedin: 'bg-background text-brand-linkedin border border-brand-linkedin/40 hover:bg-brand-linkedin/5',
+}
+
+const socialButtonVariants = cva(baseClasses, {
+  variants: {
+    iconOnly: {
+      true: 'w-10 px-0',
+      false: 'px-4',
+    },
+  },
+  defaultVariants: {
+    iconOnly: false,
+  },
+})
+
+export type SocialButtonProps = React.ComponentProps<'button'> &
+  VariantProps<typeof socialButtonVariants> & {
+    asChild?: boolean
+    brand: SocialBrand
+    /** Visual treatment of the button. Renamed from `style` to avoid shadowing the native HTML/React `style` (CSSProperties) attribute. */
+    appearance?: 'filled' | 'stroke'
+  }
+
+export function SocialButton({
+  className,
+  brand,
+  appearance = 'filled',
+  iconOnly,
+  asChild = false,
+  ...props
+}: SocialButtonProps) {
+  const Comp = asChild ? Slot : 'button'
+  const brandClasses = appearance === 'stroke' ? strokeByBrand[brand] : filledByBrand[brand]
+  return (
+    <Comp
+      data-slot="social-button"
+      data-brand={brand}
+      data-appearance={appearance}
+      type={asChild ? undefined : 'button'}
+      className={cn(socialButtonVariants({ iconOnly, className }), brandClasses)}
+      {...props}
+    />
+  )
+}
+
+export { socialButtonVariants }

package/src/primitives/tabs.tsx

@@ -103,7 +103,7 @@ export function TabsTrigger({ value, children, className, disabled }: TabsTrigge
       className={cn(
         isSelected
           ? 'bg-background text-foreground shadow'
-          : 'hover:bg-background/50 hover:text-foreground',
+          : 'hover:bg-background/80 hover:text-foreground',
         className,
       )}
     >