@dilipod/ui 0.2.14 → 0.3.0

package/src/components/skeleton.tsx

@@ -0,0 +1,103 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../lib/utils'
+
+export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Variant of the skeleton */
+  variant?: 'default' | 'circular' | 'rounded'
+  /** Width of the skeleton (can be number for px or string like '100%') */
+  width?: number | string
+  /** Height of the skeleton (can be number for px or string like '2rem') */
+  height?: number | string
+  /** Whether to show animation */
+  animate?: boolean
+}
+
+const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
+  ({ className, variant = 'default', width, height, animate = true, style, ...props }, ref) => {
+    const variantStyles = {
+      default: 'rounded-sm',
+      circular: 'rounded-full',
+      rounded: 'rounded-md',
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'bg-muted',
+          animate && 'animate-pulse',
+          variantStyles[variant],
+          className
+        )}
+        style={{
+          width: typeof width === 'number' ? `${width}px` : width,
+          height: typeof height === 'number' ? `${height}px` : height,
+          ...style,
+        }}
+        {...props}
+      />
+    )
+  }
+)
+Skeleton.displayName = 'Skeleton'
+
+// Common skeleton patterns
+export interface SkeletonTextProps extends Omit<SkeletonProps, 'variant'> {
+  /** Number of lines to render */
+  lines?: number
+  /** Gap between lines */
+  gap?: number
+}
+
+const SkeletonText = React.forwardRef<HTMLDivElement, SkeletonTextProps>(
+  ({ lines = 3, gap = 8, className, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn('space-y-2', className)} style={{ gap }}>
+        {Array.from({ length: lines }).map((_, i) => (
+          <Skeleton
+            key={i}
+            height={16}
+            width={i === lines - 1 ? '70%' : '100%'}
+            {...props}
+          />
+        ))}
+      </div>
+    )
+  }
+)
+SkeletonText.displayName = 'SkeletonText'
+
+export interface SkeletonCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Whether to include a header */
+  hasHeader?: boolean
+  /** Whether to include an avatar/icon */
+  hasAvatar?: boolean
+}
+
+const SkeletonCard = React.forwardRef<HTMLDivElement, SkeletonCardProps>(
+  ({ hasHeader = true, hasAvatar = false, className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn('rounded-lg border p-6 space-y-4', className)}
+        {...props}
+      >
+        {hasHeader && (
+          <div className="flex items-center gap-4">
+            {hasAvatar && <Skeleton variant="circular" width={40} height={40} />}
+            <div className="space-y-2 flex-1">
+              <Skeleton height={20} width="50%" />
+              <Skeleton height={14} width="30%" />
+            </div>
+          </div>
+        )}
+        <SkeletonText lines={3} />
+      </div>
+    )
+  }
+)
+SkeletonCard.displayName = 'SkeletonCard'
+
+export { Skeleton, SkeletonText, SkeletonCard }

package/src/components/step-progress.tsx

@@ -0,0 +1,205 @@
+'use client'
+
+import * as React from 'react'
+import { Check } from '@phosphor-icons/react'
+import { cn } from '../lib/utils'
+
+export interface Step {
+  id: number
+  label: string
+  description?: string
+}
+
+export interface StepProgressProps {
+  steps: Step[]
+  currentStep: number
+  onStepClick?: (step: number) => void
+  /** Orientation of the stepper */
+  orientation?: 'horizontal' | 'vertical'
+  /** Size variant */
+  size?: 'sm' | 'default' | 'lg'
+  /** Whether to show labels */
+  showLabels?: boolean
+  className?: string
+}
+
+const StepProgress = React.forwardRef<HTMLDivElement, StepProgressProps>(
+  (
+    {
+      steps,
+      currentStep,
+      onStepClick,
+      orientation = 'horizontal',
+      size = 'default',
+      showLabels = true,
+      className,
+    },
+    ref
+  ) => {
+    const sizeStyles = {
+      sm: {
+        indicator: 'w-6 h-6 text-xs',
+        icon: 12,
+        label: 'text-xs',
+        connector: orientation === 'horizontal' ? 'h-0.5' : 'w-0.5',
+        connectorLength: orientation === 'horizontal' ? 'w-4 sm:w-8' : 'h-6',
+      },
+      default: {
+        indicator: 'w-7 h-7 text-xs',
+        icon: 14,
+        label: 'text-sm',
+        connector: orientation === 'horizontal' ? 'h-0.5' : 'w-0.5',
+        connectorLength: orientation === 'horizontal' ? 'w-6 sm:w-10 md:w-14' : 'h-8',
+      },
+      lg: {
+        indicator: 'w-8 h-8 text-sm',
+        icon: 16,
+        label: 'text-sm',
+        connector: orientation === 'horizontal' ? 'h-0.5' : 'w-0.5',
+        connectorLength: orientation === 'horizontal' ? 'w-8 sm:w-12 md:w-16' : 'h-10',
+      },
+    }
+
+    const styles = sizeStyles[size]
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'flex',
+          orientation === 'horizontal' ? 'flex-row items-center' : 'flex-col',
+          className
+        )}
+      >
+        {steps.map((step, index) => {
+          const isCompleted = step.id < currentStep
+          const isCurrent = step.id === currentStep
+          const isClickable = onStepClick && step.id < currentStep
+
+          return (
+            <div
+              key={step.id}
+              className={cn(
+                'flex',
+                orientation === 'horizontal' ? 'flex-row items-center' : 'flex-col items-start'
+              )}
+            >
+              {/* Step */}
+              <button
+                type="button"
+                onClick={() => isClickable && onStepClick(step.id)}
+                disabled={!isClickable}
+                className={cn(
+                  'flex items-center gap-2 px-2 py-1.5 rounded-sm transition-colors',
+                  isClickable ? 'cursor-pointer hover:bg-gray-50' : 'cursor-default',
+                  orientation === 'vertical' && 'flex-row'
+                )}
+              >
+                {/* Number/Check indicator */}
+                <span
+                  className={cn(
+                    'rounded-sm flex items-center justify-center font-bold transition-colors',
+                    styles.indicator,
+                    isCompleted
+                      ? 'bg-[var(--cyan)] text-white'
+                      : isCurrent
+                        ? 'bg-[var(--black)] text-white'
+                        : 'bg-gray-100 text-gray-400'
+                  )}
+                >
+                  {isCompleted ? (
+                    <Check size={styles.icon} weight="bold" />
+                  ) : (
+                    step.id
+                  )}
+                </span>
+
+                {/* Label */}
+                {showLabels && (
+                  <div className={cn(
+                    orientation === 'horizontal' && 'hidden sm:block',
+                    'text-left'
+                  )}>
+                    <span
+                      className={cn(
+                        'font-medium transition-colors whitespace-nowrap',
+                        styles.label,
+                        isCompleted
+                          ? 'text-[var(--cyan)]'
+                          : isCurrent
+                            ? 'text-[var(--black)]'
+                            : 'text-gray-400'
+                      )}
+                    >
+                      {step.label}
+                    </span>
+                    {step.description && orientation === 'vertical' && (
+                      <p className="text-xs text-muted-foreground mt-0.5">
+                        {step.description}
+                      </p>
+                    )}
+                  </div>
+                )}
+              </button>
+
+              {/* Connector line */}
+              {index < steps.length - 1 && (
+                <div
+                  className={cn(
+                    'transition-colors',
+                    styles.connector,
+                    styles.connectorLength,
+                    isCompleted ? 'bg-[var(--cyan)]' : 'bg-gray-200',
+                    orientation === 'vertical' && 'ml-[13px] my-1'
+                  )}
+                />
+              )}
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+)
+StepProgress.displayName = 'StepProgress'
+
+// Compact variant - just dots
+export interface StepDotsProps {
+  totalSteps: number
+  currentStep: number
+  onStepClick?: (step: number) => void
+  className?: string
+}
+
+const StepDots = React.forwardRef<HTMLDivElement, StepDotsProps>(
+  ({ totalSteps, currentStep, onStepClick, className }, ref) => {
+    return (
+      <div ref={ref} className={cn('flex items-center gap-2', className)}>
+        {Array.from({ length: totalSteps }, (_, i) => i + 1).map((step) => {
+          const isCompleted = step < currentStep
+          const isCurrent = step === currentStep
+          const isClickable = onStepClick && step < currentStep
+
+          return (
+            <button
+              key={step}
+              type="button"
+              onClick={() => isClickable && onStepClick(step)}
+              disabled={!isClickable}
+              className={cn(
+                'w-2 h-2 rounded-full transition-colors',
+                isClickable && 'cursor-pointer',
+                !isClickable && 'cursor-default',
+                isCompleted || isCurrent ? 'bg-[var(--cyan)]' : 'bg-gray-200'
+              )}
+              aria-label={`Step ${step}`}
+            />
+          )
+        })}
+      </div>
+    )
+  }
+)
+StepDots.displayName = 'StepDots'
+
+export { StepProgress, StepDots }

package/src/components/switch.tsx

@@ -0,0 +1,95 @@
+'use client'
+
+import * as React from 'react'
+import * as SwitchPrimitive from '@radix-ui/react-switch'
+import { cn } from '../lib/utils'
+
+export interface SwitchProps
+  extends React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root> {
+  /** Size variant */
+  size?: 'sm' | 'default' | 'lg'
+}
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitive.Root>,
+  SwitchProps
+>(({ className, size = 'default', ...props }, ref) => {
+  const sizeStyles = {
+    sm: {
+      root: 'h-4 w-7',
+      thumb: 'h-3 w-3 data-[state=checked]:translate-x-3',
+    },
+    default: {
+      root: 'h-5 w-9',
+      thumb: 'h-4 w-4 data-[state=checked]:translate-x-4',
+    },
+    lg: {
+      root: 'h-6 w-11',
+      thumb: 'h-5 w-5 data-[state=checked]:translate-x-5',
+    },
+  }
+
+  return (
+    <SwitchPrimitive.Root
+      className={cn(
+        'peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-[var(--cyan)] data-[state=unchecked]:bg-input',
+        sizeStyles[size].root,
+        className
+      )}
+      {...props}
+      ref={ref}
+    >
+      <SwitchPrimitive.Thumb
+        className={cn(
+          'pointer-events-none block rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=unchecked]:translate-x-0',
+          sizeStyles[size].thumb
+        )}
+      />
+    </SwitchPrimitive.Root>
+  )
+})
+Switch.displayName = SwitchPrimitive.Root.displayName
+
+// Convenience component with label
+export interface LabeledSwitchProps extends SwitchProps {
+  label: string
+  description?: string
+  labelPosition?: 'left' | 'right'
+}
+
+const LabeledSwitch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitive.Root>,
+  LabeledSwitchProps
+>(({ label, description, labelPosition = 'right', className, id, ...props }, ref) => {
+  const switchId = id || React.useId()
+
+  const labelContent = (
+    <div className="space-y-0.5">
+      <label
+        htmlFor={switchId}
+        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
+      >
+        {label}
+      </label>
+      {description && (
+        <p className="text-xs text-muted-foreground">{description}</p>
+      )}
+    </div>
+  )
+
+  return (
+    <div
+      className={cn(
+        'flex items-center gap-3',
+        labelPosition === 'left' && 'flex-row-reverse justify-end',
+        className
+      )}
+    >
+      <Switch ref={ref} id={switchId} {...props} />
+      {labelContent}
+    </div>
+  )
+})
+LabeledSwitch.displayName = 'LabeledSwitch'
+
+export { Switch, LabeledSwitch }

package/src/components/tabs.tsx

@@ -0,0 +1,92 @@
+'use client'
+
+import * as React from 'react'
+import * as TabsPrimitive from '@radix-ui/react-tabs'
+import { cn } from '../lib/utils'
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      'inline-flex h-10 items-center justify-center rounded-sm bg-muted p-1 text-muted-foreground',
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    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
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+// Underline variant tabs
+const TabsListUnderline = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      'inline-flex items-center justify-start border-b border-border',
+      className
+    )}
+    {...props}
+  />
+))
+TabsListUnderline.displayName = 'TabsListUnderline'
+
+const TabsTriggerUnderline = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'inline-flex items-center justify-center whitespace-nowrap px-4 py-2 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground border-b-2 border-transparent -mb-px data-[state=active]:text-foreground data-[state=active]:border-[var(--cyan)] disabled:pointer-events-none disabled:opacity-50',
+      className
+    )}
+    {...props}
+  />
+))
+TabsTriggerUnderline.displayName = 'TabsTriggerUnderline'
+
+export {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+  TabsListUnderline,
+  TabsTriggerUnderline,
+}

package/src/components/toast.tsx

@@ -32,6 +32,7 @@ const toastVariants = cva(
         success: 'bg-[var(--black)] text-white',
         error: 'bg-[var(--black)] text-white',
         warning: 'bg-[var(--black)] text-white',
+        info: 'bg-[var(--black)] text-white',
       },
     },
     defaultVariants: {
@@ -117,7 +118,7 @@ type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
 type ToastActionElement = React.ReactElement<typeof ToastAction>
 
 // Toast icon helper
-const ToastIcon = ({ variant }: { variant?: 'default' | 'success' | 'error' | 'warning' }) => {
+const ToastIcon = ({ variant }: { variant?: 'default' | 'success' | 'error' | 'warning' | 'info' }) => {
   switch (variant) {
     case 'success':
       return <Check size={18} weight="bold" className="text-[var(--cyan)]" />
@@ -125,6 +126,8 @@ const ToastIcon = ({ variant }: { variant?: 'default' | 'success' | 'error' | 'w
       return <WarningCircle size={18} weight="fill" className="text-red-400" />
     case 'warning':
       return <WarningCircle size={18} weight="fill" className="text-amber-400" />
+    case 'info':
+      return <Info size={18} weight="fill" className="text-[var(--cyan)]" />
     default:
       return <Info size={18} weight="fill" className="text-white/70" />
   }

package/src/components/tooltip.tsx

@@ -0,0 +1,78 @@
+'use client'
+
+import * as React from 'react'
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import { cn } from '../lib/utils'
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 overflow-hidden rounded-sm bg-[var(--black)] px-3 py-1.5 text-xs text-white 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',
+        className
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+const TooltipArrow = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Arrow>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow>
+>(({ className, ...props }, ref) => (
+  <TooltipPrimitive.Arrow
+    ref={ref}
+    className={cn('fill-[var(--black)]', className)}
+    {...props}
+  />
+))
+TooltipArrow.displayName = TooltipPrimitive.Arrow.displayName
+
+// Convenience component for simple tooltips
+export interface SimpleTooltipProps {
+  content: React.ReactNode
+  children: React.ReactNode
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  align?: 'start' | 'center' | 'end'
+  delayDuration?: number
+}
+
+function SimpleTooltip({
+  content,
+  children,
+  side = 'top',
+  align = 'center',
+  delayDuration = 200,
+}: SimpleTooltipProps) {
+  return (
+    <TooltipProvider delayDuration={delayDuration}>
+      <Tooltip>
+        <TooltipTrigger asChild>{children}</TooltipTrigger>
+        <TooltipContent side={side} align={align}>
+          {content}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  )
+}
+
+export {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+  TooltipArrow,
+  SimpleTooltip,
+}