@dilipod/ui 0.2.15 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dilipod/ui",
-  "version": "0.2.15",
+  "version": "0.3.0",
   "description": "Dilipod Design System - Shared UI components and styles",
   "author": "Dilipod <hello@dilipod.com>",
   "license": "MIT",
@@ -62,12 +62,18 @@
   "dependencies": {
     "@phosphor-icons/react": "^2.1.7",
     "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-avatar": "^1.1.3",
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-dropdown-menu": "^2.1.3",
     "@radix-ui/react-navigation-menu": "^1.2.14",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-radio-group": "^1.3.8",
     "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-toast": "^1.2.15",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.3.0",

package/src/components/alert-dialog.tsx

@@ -0,0 +1,203 @@
+'use client'
+
+import * as React from 'react'
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
+import { cn } from '../lib/utils'
+import { buttonVariants } from './button'
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      'fixed inset-0 z-50 bg-black/60 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-sm',
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-2 text-center sm:text-left',
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogHeader.displayName = 'AlertDialogHeader'
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogFooter.displayName = 'AlertDialogFooter'
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold text-[var(--black)]', className)}
+    {...props}
+  />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+))
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: 'outline' }),
+      'mt-2 sm:mt-0',
+      className
+    )}
+    {...props}
+  />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+// Convenience component for common confirmation dialogs
+export interface ConfirmDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  title: string
+  description?: string
+  confirmText?: string
+  cancelText?: string
+  onConfirm: () => void
+  onCancel?: () => void
+  variant?: 'default' | 'destructive'
+  loading?: boolean
+}
+
+function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmText = 'Confirm',
+  cancelText = 'Cancel',
+  onConfirm,
+  onCancel,
+  variant = 'default',
+  loading = false,
+}: ConfirmDialogProps) {
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          {description && (
+            <AlertDialogDescription>{description}</AlertDialogDescription>
+          )}
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel
+            onClick={() => {
+              onCancel?.()
+              onOpenChange(false)
+            }}
+          >
+            {cancelText}
+          </AlertDialogCancel>
+          <AlertDialogAction
+            onClick={() => {
+              onConfirm()
+            }}
+            className={cn(
+              variant === 'destructive' &&
+                'bg-destructive text-destructive-foreground hover:bg-destructive/90'
+            )}
+            disabled={loading}
+          >
+            {loading ? 'Loading...' : confirmText}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+  ConfirmDialog,
+}

package/src/components/breadcrumbs.tsx

@@ -0,0 +1,160 @@
+'use client'
+
+import * as React from 'react'
+import { CaretRight, House } from '@phosphor-icons/react'
+import { cn } from '../lib/utils'
+
+export interface BreadcrumbItem {
+  label: string
+  href?: string
+  icon?: React.ReactNode
+}
+
+export interface BreadcrumbsProps extends React.HTMLAttributes<HTMLElement> {
+  items: BreadcrumbItem[]
+  /** Custom Link component (e.g., Next.js Link) */
+  LinkComponent?: React.ComponentType<{
+    href: string
+    className?: string
+    children?: React.ReactNode
+  }>
+  /** Separator between items */
+  separator?: React.ReactNode
+  /** Whether to show home icon for first item */
+  showHomeIcon?: boolean
+  /** Maximum items to show (will collapse middle items) */
+  maxItems?: number
+  /** Size variant */
+  size?: 'sm' | 'default'
+}
+
+const Breadcrumbs = React.forwardRef<HTMLElement, BreadcrumbsProps>(
+  (
+    {
+      items,
+      LinkComponent,
+      separator,
+      showHomeIcon = false,
+      maxItems,
+      size = 'default',
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const sizeStyles = {
+      sm: 'text-xs gap-1',
+      default: 'text-sm gap-1.5',
+    }
+
+    const iconSize = size === 'sm' ? 10 : 12
+
+    // Collapse items if maxItems is set
+    let displayItems = items
+    let isCollapsed = false
+    if (maxItems && items.length > maxItems) {
+      isCollapsed = true
+      displayItems = [
+        items[0],
+        { label: '...', href: undefined },
+        ...items.slice(-(maxItems - 2)),
+      ]
+    }
+
+    const defaultSeparator = (
+      <CaretRight size={iconSize} className="text-gray-400" />
+    )
+
+    return (
+      <nav
+        ref={ref}
+        aria-label="Breadcrumb"
+        className={cn('flex items-center text-gray-500', sizeStyles[size], className)}
+        {...props}
+      >
+        <ol className={cn('flex items-center', sizeStyles[size])}>
+          {displayItems.map((item, index) => {
+            const isFirst = index === 0
+            const isLast = index === displayItems.length - 1
+            const isEllipsis = item.label === '...'
+
+            return (
+              <li key={index} className={cn('flex items-center', sizeStyles[size])}>
+                {index > 0 && (
+                  <span className="mx-1 text-gray-400">
+                    {separator || defaultSeparator}
+                  </span>
+                )}
+
+                {isEllipsis ? (
+                  <span className="text-gray-400">{item.label}</span>
+                ) : item.href && !isLast ? (
+                  LinkComponent ? (
+                    <LinkComponent
+                      href={item.href}
+                      className="flex items-center gap-1 hover:text-[var(--black)] transition-colors"
+                    >
+                      {isFirst && showHomeIcon && (
+                        <House size={iconSize + 2} weight="fill" />
+                      )}
+                      {item.icon}
+                      <span>{item.label}</span>
+                    </LinkComponent>
+                  ) : (
+                    <a
+                      href={item.href}
+                      className="flex items-center gap-1 hover:text-[var(--black)] transition-colors"
+                    >
+                      {isFirst && showHomeIcon && (
+                        <House size={iconSize + 2} weight="fill" />
+                      )}
+                      {item.icon}
+                      <span>{item.label}</span>
+                    </a>
+                  )
+                ) : (
+                  <span
+                    className={cn(
+                      'flex items-center gap-1',
+                      isLast && 'text-[var(--black)] font-medium'
+                    )}
+                    aria-current={isLast ? 'page' : undefined}
+                  >
+                    {isFirst && showHomeIcon && (
+                      <House size={iconSize + 2} weight="fill" />
+                    )}
+                    {item.icon}
+                    <span>{item.label}</span>
+                  </span>
+                )}
+              </li>
+            )
+          })}
+        </ol>
+      </nav>
+    )
+  }
+)
+Breadcrumbs.displayName = 'Breadcrumbs'
+
+// Simple breadcrumb link component for use within the Breadcrumbs
+export interface BreadcrumbLinkProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  asChild?: boolean
+}
+
+const BreadcrumbLink = React.forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(
+  ({ className, ...props }, ref) => (
+    <a
+      ref={ref}
+      className={cn(
+        'hover:text-[var(--black)] transition-colors',
+        className
+      )}
+      {...props}
+    />
+  )
+)
+BreadcrumbLink.displayName = 'BreadcrumbLink'
+
+export { Breadcrumbs, BreadcrumbLink }

package/src/components/date-range-picker.tsx

@@ -0,0 +1,183 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../lib/utils'
+import { Button } from './button'
+import { Input } from './input'
+import { Label } from './label'
+
+export type DateRangePreset = '7d' | '30d' | '90d' | 'custom' | 'today' | 'yesterday' | 'this-week' | 'this-month' | 'this-year'
+
+export interface DateRangePickerProps {
+  /** Currently selected preset */
+  value: DateRangePreset
+  /** Callback when preset changes */
+  onChange: (value: DateRangePreset) => void
+  /** Custom start date (ISO string) */
+  customStart?: string
+  /** Custom end date (ISO string) */
+  customEnd?: string
+  /** Callback when custom dates change */
+  onCustomChange?: (start: string, end: string) => void
+  /** Available presets to show */
+  presets?: DateRangePreset[]
+  /** Size variant */
+  size?: 'sm' | 'default'
+  /** Additional class name */
+  className?: string
+  /** Show custom date inputs inline */
+  inlineCustom?: boolean
+}
+
+const presetLabels: Record<DateRangePreset, string> = {
+  'today': 'Today',
+  'yesterday': 'Yesterday',
+  '7d': 'Last 7 days',
+  '30d': 'Last 30 days',
+  '90d': 'Last 90 days',
+  'this-week': 'This week',
+  'this-month': 'This month',
+  'this-year': 'This year',
+  'custom': 'Custom',
+}
+
+const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
+  (
+    {
+      value,
+      onChange,
+      customStart = '',
+      customEnd = '',
+      onCustomChange,
+      presets = ['7d', '30d', '90d', 'custom'],
+      size = 'default',
+      className,
+      inlineCustom = true,
+    },
+    ref
+  ) => {
+    const buttonSize = size === 'sm' ? 'sm' : 'default'
+
+    return (
+      <div ref={ref} className={cn('flex flex-wrap items-center gap-2', className)}>
+        {presets.map((preset) => (
+          <Button
+            key={preset}
+            variant={value === preset ? 'default' : 'outline'}
+            size={buttonSize}
+            onClick={() => onChange(preset)}
+          >
+            {presetLabels[preset]}
+          </Button>
+        ))}
+
+        {value === 'custom' && inlineCustom && onCustomChange && (
+          <div className="flex items-center gap-2">
+            <div className="space-y-1">
+              <Label htmlFor="start-date" className="text-xs sr-only">
+                Start
+              </Label>
+              <Input
+                id="start-date"
+                type="date"
+                value={customStart}
+                onChange={(e) => onCustomChange(e.target.value, customEnd)}
+                className={cn(size === 'sm' ? 'h-8 text-xs' : 'h-9')}
+                aria-label="Start date"
+              />
+            </div>
+            <span className="text-muted-foreground">to</span>
+            <div className="space-y-1">
+              <Label htmlFor="end-date" className="text-xs sr-only">
+                End
+              </Label>
+              <Input
+                id="end-date"
+                type="date"
+                value={customEnd}
+                onChange={(e) => onCustomChange(customStart, e.target.value)}
+                className={cn(size === 'sm' ? 'h-8 text-xs' : 'h-9')}
+                aria-label="End date"
+              />
+            </div>
+          </div>
+        )}
+      </div>
+    )
+  }
+)
+DateRangePicker.displayName = 'DateRangePicker'
+
+// Compact variant with dropdown
+export interface DateRangeSelectProps {
+  value: DateRangePreset
+  onChange: (value: DateRangePreset) => void
+  presets?: DateRangePreset[]
+  className?: string
+}
+
+const DateRangeSelect = React.forwardRef<HTMLSelectElement, DateRangeSelectProps>(
+  ({ value, onChange, presets = ['7d', '30d', '90d'], className }, ref) => {
+    return (
+      <select
+        ref={ref}
+        value={value}
+        onChange={(e) => onChange(e.target.value as DateRangePreset)}
+        className={cn(
+          'h-9 rounded-sm border border-input bg-background px-3 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          className
+        )}
+      >
+        {presets.map((preset) => (
+          <option key={preset} value={preset}>
+            {presetLabels[preset]}
+          </option>
+        ))}
+      </select>
+    )
+  }
+)
+DateRangeSelect.displayName = 'DateRangeSelect'
+
+// Helper to calculate date range from preset
+export function getDateRangeFromPreset(preset: DateRangePreset): { start: Date; end: Date } {
+  const now = new Date()
+  const end = new Date(now)
+  end.setHours(23, 59, 59, 999)
+
+  let start = new Date(now)
+  start.setHours(0, 0, 0, 0)
+
+  switch (preset) {
+    case 'today':
+      break
+    case 'yesterday':
+      start.setDate(start.getDate() - 1)
+      end.setDate(end.getDate() - 1)
+      break
+    case '7d':
+      start.setDate(start.getDate() - 7)
+      break
+    case '30d':
+      start.setDate(start.getDate() - 30)
+      break
+    case '90d':
+      start.setDate(start.getDate() - 90)
+      break
+    case 'this-week':
+      start.setDate(start.getDate() - start.getDay())
+      break
+    case 'this-month':
+      start.setDate(1)
+      break
+    case 'this-year':
+      start.setMonth(0, 1)
+      break
+    default:
+      break
+  }
+
+  return { start, end }
+}
+
+export { DateRangePicker, DateRangeSelect }