@devxcrew/react-ui 0.0.0-stage → 0.1.7

package/src/components/slider.tsx

@@ -0,0 +1,51 @@
+import { Slider as SliderPrimitive } from '@base-ui/react/slider'
+import { cn } from '../lib/utils'
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: SliderPrimitive.Root.Props) {
+  const _values = Array.isArray(value)
+    ? value
+    : Array.isArray(defaultValue)
+      ? defaultValue
+      : [min, max]
+
+  return (
+    <SliderPrimitive.Root
+      className={cn('data-horizontal:w-full data-vertical:h-full', className)}
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      thumbAlignment="edge"
+      {...props}
+    >
+      <SliderPrimitive.Control className="relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col">
+        <SliderPrimitive.Track
+          data-slot="slider-track"
+          className="relative grow overflow-hidden rounded-full bg-muted select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1"
+        >
+          <SliderPrimitive.Indicator
+            data-slot="slider-range"
+            className="bg-primary select-none data-horizontal:h-full data-vertical:w-full"
+          />
+        </SliderPrimitive.Track>
+        {Array.from({ length: _values.length }, (_, index) => (
+          <SliderPrimitive.Thumb
+            data-slot="slider-thumb"
+            key={index}
+            className="relative block size-3 shrink-0 rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50"
+          />
+        ))}
+      </SliderPrimitive.Control>
+    </SliderPrimitive.Root>
+  )
+}
+
+export { Slider }

package/src/components/sonner.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import { Toaster as Sonner, type ToasterProps } from 'sonner'
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  TriangleAlertIcon,
+  OctagonXIcon,
+  Loader2Icon,
+} from 'lucide-react'
+import { useTheme } from '../theme/theme-provider'
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = 'system' } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps['theme']}
+      className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          '--normal-bg': 'var(--popover)',
+          '--normal-text': 'var(--popover-foreground)',
+          '--normal-border': 'var(--border)',
+          '--border-radius': 'var(--radius)',
+        } as React.CSSProperties
+      }
+      toastOptions={{
+        classNames: {
+          toast: 'cn-toast',
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

package/src/components/sparkline.tsx

@@ -0,0 +1,231 @@
+import { useId } from 'react'
+import { cn } from '../lib/utils'
+
+export type SparklineTone = 'primary' | 'positive' | 'negative' | 'neutral' | 'warning'
+export type SparklineType = 'line' | 'area' | 'bar' | 'trend'
+
+export interface SparklineDatum {
+  value: number
+}
+
+export interface SparklineProps {
+  ariaLabel?: string
+  className?: string
+  data: readonly number[] | readonly SparklineDatum[]
+  height?: number
+  showDot?: boolean
+  showMinMax?: boolean
+  showTrendBadge?: boolean
+  strokeWidth?: number
+  tone?: SparklineTone
+  trendLabel?: string
+  type?: SparklineType
+  width?: number
+}
+
+const toneStyles: Record<
+  SparklineTone,
+  {
+    badge: string
+    bar: string
+    dot: string
+    stopColor: string
+    stroke: string
+  }
+> = {
+  primary: {
+    badge: 'bg-primary/10 text-primary',
+    bar: 'fill-primary',
+    dot: 'fill-primary stroke-background',
+    stopColor: 'currentColor',
+    stroke: 'stroke-primary text-primary',
+  },
+  positive: {
+    badge: 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400',
+    bar: 'fill-emerald-500',
+    dot: 'fill-emerald-500 stroke-background',
+    stopColor: '#10b981',
+    stroke: 'stroke-emerald-600 dark:stroke-emerald-400',
+  },
+  negative: {
+    badge: 'bg-destructive/10 text-destructive',
+    bar: 'fill-destructive',
+    dot: 'fill-destructive stroke-background',
+    stopColor: '#ef4444',
+    stroke: 'stroke-destructive',
+  },
+  neutral: {
+    badge: 'bg-muted text-muted-foreground',
+    bar: 'fill-muted-foreground/60',
+    dot: 'fill-muted-foreground stroke-background',
+    stopColor: '#9ca3af',
+    stroke: 'stroke-muted-foreground',
+  },
+  warning: {
+    badge: 'bg-amber-500/10 text-amber-600 dark:text-amber-400',
+    bar: 'fill-amber-500',
+    dot: 'fill-amber-500 stroke-background',
+    stopColor: '#f59e0b',
+    stroke: 'stroke-amber-600 dark:stroke-amber-400',
+  },
+}
+
+export function Sparkline({
+  ariaLabel = 'Data trend sparkline',
+  className,
+  data,
+  height = 32,
+  showDot = true,
+  showMinMax = false,
+  showTrendBadge = false,
+  strokeWidth = 2,
+  tone = 'primary',
+  trendLabel,
+  type = 'line',
+  width = 120,
+}: SparklineProps) {
+  const gradientId = useId()
+  const rawValues = data.map((d) => (typeof d === 'number' ? d : d.value))
+
+  if (rawValues.length === 0) {
+    return (
+      <div
+        aria-label="Empty sparkline"
+        className={cn('inline-flex items-center text-xs text-muted-foreground', className)}
+        style={{ height, width }}
+      >
+        --
+      </div>
+    )
+  }
+
+  const min = Math.min(...rawValues)
+  const max = Math.max(...rawValues)
+  const range = max - min === 0 ? 1 : max - min
+  const padding = strokeWidth + 2
+  const innerWidth = Math.max(10, width - padding * 2)
+  const innerHeight = Math.max(10, height - padding * 2)
+
+  const points = rawValues.map((val, idx) => {
+    const x = padding + (idx / Math.max(1, rawValues.length - 1)) * innerWidth
+    const y = padding + innerHeight - ((val - min) / range) * innerHeight
+    return { val, x, y }
+  })
+
+  const firstVal = rawValues[0]
+  const lastVal = rawValues[rawValues.length - 1]
+  const calculatedDelta =
+    firstVal !== 0 ? (((lastVal - firstVal) / Math.abs(firstVal)) * 100).toFixed(1) : '0'
+  const isPositive = lastVal >= firstVal
+  const deltaBadgeText = trendLabel ?? (isPositive ? `+${calculatedDelta}%` : `${calculatedDelta}%`)
+
+  const pathD = points.reduce((acc, pt, idx) => {
+    if (idx === 0) return `M ${pt.x.toFixed(1)} ${pt.y.toFixed(1)}`
+    return `${acc} L ${pt.x.toFixed(1)} ${pt.y.toFixed(1)}`
+  }, '')
+
+  const lastPoint = points[points.length - 1]
+  const firstPoint = points[0]
+  const areaD = `${pathD} L ${lastPoint.x.toFixed(1)} ${(height - padding / 2).toFixed(1)} L ${firstPoint.x.toFixed(1)} ${(height - padding / 2).toFixed(1)} Z`
+
+  const selectedTone = toneStyles[tone]
+
+  return (
+    <div
+      aria-label={ariaLabel}
+      className={cn('inline-flex items-center gap-2', className)}
+      role="img"
+    >
+      <svg
+        className="overflow-visible"
+        height={height}
+        viewBox={`0 0 ${width} ${height}`}
+        width={width}
+      >
+        <defs>
+          <linearGradient id={gradientId} x1="0" x2="0" y1="0" y2="1">
+            <stop offset="0%" stopColor={selectedTone.stopColor} stopOpacity={0.35} />
+            <stop offset="100%" stopColor={selectedTone.stopColor} stopOpacity={0.0} />
+          </linearGradient>
+        </defs>
+
+        {type === 'bar' ? (
+          <g>
+            {points.map((pt, idx) => {
+              const barWidth = Math.max(2, (innerWidth / rawValues.length) * 0.7)
+              const barHeight = Math.max(2, innerHeight - (pt.y - padding))
+              const barX = pt.x - barWidth / 2
+              const barY = pt.y
+              return (
+                <rect
+                  className={selectedTone.bar}
+                  height={barHeight}
+                  key={idx}
+                  rx={1.5}
+                  width={barWidth}
+                  x={barX}
+                  y={barY}
+                />
+              )
+            })}
+          </g>
+        ) : (
+          <g>
+            {(type === 'area' || type === 'trend') && (
+              <path d={areaD} fill={`url(#${gradientId})`} />
+            )}
+            <path
+              className={cn(selectedTone.stroke, 'fill-none')}
+              d={pathD}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={strokeWidth}
+            />
+            {showDot && (
+              <circle
+                className={selectedTone.dot}
+                cx={lastPoint.x}
+                cy={lastPoint.y}
+                r={strokeWidth + 1.5}
+                strokeWidth={1.5}
+              />
+            )}
+            {showMinMax && (
+              <>
+                {points.find((p) => p.val === max) && (
+                  <circle
+                    className="fill-emerald-500 stroke-background"
+                    cx={points.find((p) => p.val === max)!.x}
+                    cy={points.find((p) => p.val === max)!.y}
+                    r={2.5}
+                    strokeWidth={1}
+                  />
+                )}
+                {points.find((p) => p.val === min) && (
+                  <circle
+                    className="fill-destructive stroke-background"
+                    cx={points.find((p) => p.val === min)!.x}
+                    cy={points.find((p) => p.val === min)!.y}
+                    r={2.5}
+                    strokeWidth={1}
+                  />
+                )}
+              </>
+            )}
+          </g>
+        )}
+      </svg>
+
+      {showTrendBadge && (
+        <span
+          className={cn(
+            'inline-flex items-center rounded-md px-1.5 py-0.5 text-[11px] font-semibold tracking-tight',
+            selectedTone.badge,
+          )}
+        >
+          {deltaBadgeText}
+        </span>
+      )}
+    </div>
+  )
+}

package/src/components/spinner.tsx

@@ -0,0 +1,20 @@
+import { cn } from '../lib/utils'
+import { Loader2Icon } from 'lucide-react'
+
+function Spinner({
+  className,
+  animated = true,
+  ...props
+}: React.ComponentProps<'svg'> & { animated?: boolean }) {
+  return (
+    <Loader2Icon
+      data-slot="spinner"
+      role="status"
+      aria-label="Loading"
+      className={cn('size-4', animated && 'motion-safe:animate-spin', className)}
+      {...props}
+    />
+  )
+}
+
+export { Spinner }

package/src/components/status-badge.tsx

@@ -0,0 +1,114 @@
+import { CircleCheck } from 'lucide-react';
+import { cn } from '../lib/utils';
+
+export type StatusBadgeValue =
+  | 'active'
+  | 'in-review'
+  | 'complete'
+  | 'planned'
+  | 'draft'
+  | 'open'
+  | 'won'
+  | 'lost'
+  | 'pending'
+  | 'processing'
+  | 'failed'
+  | 'cancelled'
+  | 'archived'
+  | 'suspended'
+  | 'queued'
+  | 'attention'
+  | 'idle';
+
+const statusStyles: Record<StatusBadgeValue, string> = {
+  active: 'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-900 dark:bg-blue-950/40 dark:text-blue-300',
+  'in-review':
+    'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-900 dark:bg-amber-950/40 dark:text-amber-300',
+  complete:
+    'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-900 dark:bg-emerald-950/40 dark:text-emerald-300',
+  planned:
+    'border-orange-200 bg-orange-50 text-orange-700 dark:border-orange-900 dark:bg-orange-950/40 dark:text-orange-300',
+  draft: 'border-slate-200 bg-slate-50 text-slate-700 dark:border-slate-800 dark:bg-slate-900/40 dark:text-slate-300',
+  open: 'border-sky-200 bg-sky-50 text-sky-700 dark:border-sky-900 dark:bg-sky-950/40 dark:text-sky-300',
+  won: 'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-900 dark:bg-emerald-950/40 dark:text-emerald-300',
+  lost: 'border-red-200 bg-red-50 text-red-700 dark:border-red-900 dark:bg-red-950/40 dark:text-red-300',
+  pending:
+    'border-yellow-200 bg-yellow-50 text-yellow-700 dark:border-yellow-900 dark:bg-yellow-950/40 dark:text-yellow-300',
+  processing:
+    'border-violet-200 bg-violet-50 text-violet-700 dark:border-violet-900 dark:bg-violet-950/40 dark:text-violet-300',
+  failed: 'border-red-200 bg-red-50 text-red-700 dark:border-red-900 dark:bg-red-950/40 dark:text-red-300',
+  cancelled: 'border-zinc-200 bg-zinc-50 text-zinc-700 dark:border-zinc-800 dark:bg-zinc-900/40 dark:text-zinc-300',
+  archived: 'border-gray-200 bg-gray-50 text-gray-700 dark:border-gray-800 dark:bg-gray-900/40 dark:text-gray-300',
+  suspended:
+    'border-purple-200 bg-purple-50 text-purple-700 dark:border-purple-900 dark:bg-purple-950/40 dark:text-purple-300',
+  queued:
+    'border-indigo-200 bg-indigo-50 text-indigo-700 dark:border-indigo-900 dark:bg-indigo-950/40 dark:text-indigo-300',
+  attention: 'border-rose-200 bg-rose-50 text-rose-700 dark:border-rose-900 dark:bg-rose-950/40 dark:text-rose-300',
+  idle: 'border-neutral-200 bg-neutral-50 text-neutral-700 dark:border-neutral-800 dark:bg-neutral-900/40 dark:text-neutral-300',
+};
+
+const statusLabels: Record<StatusBadgeValue, string> = {
+  active: 'Active',
+  'in-review': 'In review',
+  complete: 'Complete',
+  planned: 'Planned',
+  draft: 'Draft',
+  open: 'Open',
+  won: 'Won',
+  lost: 'Lost',
+  pending: 'Pending',
+  processing: 'Processing',
+  failed: 'Failed',
+  cancelled: 'Cancelled',
+  archived: 'Archived',
+  suspended: 'Suspended',
+  queued: 'Queued',
+  attention: 'Attention',
+  idle: 'Idle',
+};
+
+export function getStatusBadgeValue(value: string): StatusBadgeValue {
+  const normalized = value.trim().toLowerCase();
+  if (['complete', 'completed', 'done'].includes(normalized)) return 'complete';
+  if (['in review', 'in-review', 'long hold', 'hold for approval'].includes(normalized)) return 'in-review';
+  if (['active'].includes(normalized)) return 'active';
+  if (['draft'].includes(normalized)) return 'draft';
+  if (['open'].includes(normalized)) return 'open';
+  if (['won'].includes(normalized)) return 'won';
+  if (['lost'].includes(normalized)) return 'lost';
+  if (['pending'].includes(normalized)) return 'pending';
+  if (['processing', 'in progress'].includes(normalized)) return 'processing';
+  if (['failed', 'error'].includes(normalized)) return 'failed';
+  if (['cancelled', 'canceled'].includes(normalized)) return 'cancelled';
+  if (['archived'].includes(normalized)) return 'archived';
+  if (['suspended', 'disabled'].includes(normalized)) return 'suspended';
+  if (['queued'].includes(normalized)) return 'queued';
+  if (['attention'].includes(normalized)) return 'attention';
+  if (['idle'].includes(normalized)) return 'idle';
+  return 'active';
+}
+
+export function StatusBadge({
+  className,
+  label,
+  status,
+}: {
+  status: StatusBadgeValue;
+  label?: string;
+  className?: string;
+}) {
+  const displayLabel = label ?? statusLabels[status];
+  return (
+    <span
+      aria-label={`Status: ${displayLabel}`}
+      className={cn(
+        'inline-flex h-6 w-fit items-center gap-1 rounded-md border px-2 text-xs font-medium whitespace-nowrap',
+        statusStyles[status],
+        className,
+      )}
+    >
+      <CircleCheck aria-hidden="true" className="size-3.5" />
+      {displayLabel}
+    </span>
+  );
+}

package/src/components/switch.tsx

@@ -0,0 +1,31 @@
+'use client'
+
+import { Switch as SwitchPrimitive } from '@base-ui/react/switch'
+import { cn } from '../lib/utils'
+
+function Switch({
+  className,
+  size = 'default',
+  ...props
+}: SwitchPrimitive.Root.Props & {
+  size?: 'sm' | 'default'
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        'peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none group-has-[:focus-visible]/field-label:border-transparent group-has-[:focus-visible]/field-label:ring-0 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

package/src/components/table.tsx

@@ -0,0 +1,91 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../lib/utils'
+
+function Table({ className, ...props }: React.ComponentProps<'table'>) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto [scrollbar-color:var(--border)_transparent] [scrollbar-width:thin] [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar]:h-1"
+    >
+      <table
+        data-slot="table"
+        className={cn('w-full caption-bottom text-sm', className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
+  return <thead data-slot="table-header" className={cn('[&_tr]:border-b', className)} {...props} />
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn('[&_tr:last-child]:border-0', className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className)}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        'border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        'h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn('p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0', className)}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({ className, ...props }: React.ComponentProps<'caption'>) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn('mt-4 text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  )
+}
+
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption }

package/src/components/tabs.tsx

@@ -0,0 +1,72 @@
+import { Tabs as TabsPrimitive } from '@base-ui/react/tabs'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '../lib/utils'
+
+function Tabs({ className, orientation = 'horizontal', ...props }: TabsPrimitive.Root.Props) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      className={cn('group/tabs flex gap-2 data-[orientation=horizontal]:flex-col', className)}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  'group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-8 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none',
+  {
+    variants: {
+      variant: {
+        default: 'bg-muted',
+        line: 'gap-1 bg-transparent',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+function TabsList({
+  className,
+  variant = 'default',
+  ...props
+}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
+  return (
+    <TabsPrimitive.Tab
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-[color,background-color,box-shadow,transform] duration-200 ease-out hover:-translate-y-px hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent',
+        'data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground',
+        'after:absolute after:bg-foreground after:opacity-0 after:transition-[opacity,transform] after:duration-200 after:ease-out group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
+  return (
+    <TabsPrimitive.Panel
+      data-slot="tabs-content"
+      className={cn('flex-1 text-sm outline-none', className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }

package/src/components/textarea.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react'
+import { cn } from '../lib/utils'
+
+function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        'flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }