@dilipod/ui 0.2.15 → 0.3.0

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/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,
+}

package/src/index.ts

@@ -68,6 +68,12 @@ export type { SelectProps } from './components/select'
 export { Checkbox } from './components/checkbox'
 export type { CheckboxProps } from './components/checkbox'
 
+export { Switch, LabeledSwitch } from './components/switch'
+export type { SwitchProps, LabeledSwitchProps } from './components/switch'
+
+export { RadioGroup, RadioGroupItem, RadioGroupOption, RadioGroupCard } from './components/radio-group'
+export type { RadioGroupOptionProps, RadioGroupCardProps } from './components/radio-group'
+
 // Navigation & Layout Components
 export {
   Accordion,
@@ -151,6 +157,16 @@ export {
 export { Divider } from './components/divider'
 export type { DividerProps } from './components/divider'
 
+// Tabs Components
+export {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+  TabsListUnderline,
+  TabsTriggerUnderline,
+} from './components/tabs'
+
 // Dialog Components
 export {
   Dialog,
@@ -165,6 +181,44 @@ export {
   DialogDescription,
 } from './components/dialog'
 
+// Alert Dialog Components
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+  ConfirmDialog,
+} from './components/alert-dialog'
+export type { ConfirmDialogProps } from './components/alert-dialog'
+
+// Popover Components
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverAnchor,
+  PopoverClose,
+  PopoverArrow,
+} from './components/popover'
+
+// Tooltip Components
+export {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+  TooltipArrow,
+  SimpleTooltip,
+} from './components/tooltip'
+export type { SimpleTooltipProps } from './components/tooltip'
+
 // Toast Components
 export {
   ToastProvider,
@@ -181,6 +235,30 @@ export type { ToastProps, ToastActionElement } from './components/toast'
 export { Toaster } from './components/toaster'
 export { useToast, toast } from './components/use-toast'
 
+// Skeleton/Loading Components
+export { Skeleton, SkeletonText, SkeletonCard } from './components/skeleton'
+export type { SkeletonProps, SkeletonTextProps, SkeletonCardProps } from './components/skeleton'
+
+// Pagination Components
+export { Pagination, SimplePagination } from './components/pagination'
+export type { PaginationProps, SimplePaginationProps } from './components/pagination'
+
+// Step Progress Components
+export { StepProgress, StepDots } from './components/step-progress'
+export type { Step, StepProgressProps, StepDotsProps } from './components/step-progress'
+
+// Breadcrumb Components
+export { Breadcrumbs, BreadcrumbLink } from './components/breadcrumbs'
+export type { BreadcrumbItem, BreadcrumbsProps, BreadcrumbLinkProps } from './components/breadcrumbs'
+
+// Date Range Picker Components
+export { DateRangePicker, DateRangeSelect, getDateRangeFromPreset } from './components/date-range-picker'
+export type { DateRangePreset, DateRangePickerProps, DateRangeSelectProps } from './components/date-range-picker'
+
+// Settings Navigation Components
+export { SettingsNav, SettingsNavLink } from './components/settings-nav'
+export type { SettingsNavItem, SettingsNavGroup, SettingsNavProps, SettingsNavLinkProps } from './components/settings-nav'
+
 // Utilities
 export { cn } from './lib/utils'