@dilipod/ui 0.2.15 → 0.3.1

package/src/components/pagination.tsx

@@ -0,0 +1,220 @@
+'use client'
+
+import * as React from 'react'
+import { CaretLeft, CaretRight, DotsThree } from '@phosphor-icons/react'
+import { cn } from '../lib/utils'
+import { Button } from './button'
+
+export interface PaginationProps {
+  /** Current page (1-indexed) */
+  currentPage: number
+  /** Total number of pages */
+  totalPages: number
+  /** Callback when page changes */
+  onPageChange: (page: number) => void
+  /** Number of pages to show around current page */
+  siblingCount?: number
+  /** Whether to show first/last page buttons */
+  showBoundaryPages?: boolean
+  /** Size variant */
+  size?: 'sm' | 'default' | 'lg'
+  /** Additional class name */
+  className?: string
+}
+
+function generatePagination(
+  currentPage: number,
+  totalPages: number,
+  siblingCount: number
+): (number | 'ellipsis')[] {
+  const totalPageNumbers = siblingCount * 2 + 5 // siblings + first + last + current + 2 ellipsis
+
+  if (totalPageNumbers >= totalPages) {
+    return Array.from({ length: totalPages }, (_, i) => i + 1)
+  }
+
+  const leftSiblingIndex = Math.max(currentPage - siblingCount, 1)
+  const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages)
+
+  const showLeftDots = leftSiblingIndex > 2
+  const showRightDots = rightSiblingIndex < totalPages - 1
+
+  if (!showLeftDots && showRightDots) {
+    const leftRange = Array.from(
+      { length: 3 + siblingCount * 2 },
+      (_, i) => i + 1
+    )
+    return [...leftRange, 'ellipsis', totalPages]
+  }
+
+  if (showLeftDots && !showRightDots) {
+    const rightRange = Array.from(
+      { length: 3 + siblingCount * 2 },
+      (_, i) => totalPages - (3 + siblingCount * 2) + i + 1
+    )
+    return [1, 'ellipsis', ...rightRange]
+  }
+
+  const middleRange = Array.from(
+    { length: siblingCount * 2 + 1 },
+    (_, i) => leftSiblingIndex + i
+  )
+  return [1, 'ellipsis', ...middleRange, 'ellipsis', totalPages]
+}
+
+const Pagination = React.forwardRef<HTMLElement, PaginationProps>(
+  (
+    {
+      currentPage,
+      totalPages,
+      onPageChange,
+      siblingCount = 1,
+      showBoundaryPages = true,
+      size = 'default',
+      className,
+    },
+    ref
+  ) => {
+    const pages = generatePagination(currentPage, totalPages, siblingCount)
+
+    const buttonSize = size === 'sm' ? 'sm' : size === 'lg' ? 'lg' : 'default'
+    const iconSize = size === 'sm' ? 14 : size === 'lg' ? 20 : 16
+
+    if (totalPages <= 1) {
+      return null
+    }
+
+    return (
+      <nav
+        ref={ref}
+        role="navigation"
+        aria-label="Pagination"
+        className={cn('flex items-center gap-1', className)}
+      >
+        {/* Previous button */}
+        <Button
+          variant="outline"
+          size={buttonSize}
+          onClick={() => onPageChange(currentPage - 1)}
+          disabled={currentPage <= 1}
+          aria-label="Go to previous page"
+        >
+          <CaretLeft size={iconSize} />
+        </Button>
+
+        {/* Page numbers */}
+        <div className="flex items-center gap-1">
+          {pages.map((page, index) => {
+            if (page === 'ellipsis') {
+              return (
+                <span
+                  key={`ellipsis-${index}`}
+                  className="flex h-9 w-9 items-center justify-center text-muted-foreground"
+                >
+                  <DotsThree size={iconSize} />
+                </span>
+              )
+            }
+
+            const isCurrentPage = page === currentPage
+            return (
+              <Button
+                key={page}
+                variant={isCurrentPage ? 'default' : 'outline'}
+                size={buttonSize}
+                onClick={() => onPageChange(page)}
+                aria-label={`Go to page ${page}`}
+                aria-current={isCurrentPage ? 'page' : undefined}
+              >
+                {page}
+              </Button>
+            )
+          })}
+        </div>
+
+        {/* Next button */}
+        <Button
+          variant="outline"
+          size={buttonSize}
+          onClick={() => onPageChange(currentPage + 1)}
+          disabled={currentPage >= totalPages}
+          aria-label="Go to next page"
+        >
+          <CaretRight size={iconSize} />
+        </Button>
+      </nav>
+    )
+  }
+)
+Pagination.displayName = 'Pagination'
+
+// Simple variant with just prev/next
+export interface SimplePaginationProps {
+  currentPage: number
+  totalPages: number
+  onPageChange: (page: number) => void
+  size?: 'sm' | 'default' | 'lg'
+  className?: string
+  showPageInfo?: boolean
+}
+
+const SimplePagination = React.forwardRef<HTMLElement, SimplePaginationProps>(
+  (
+    {
+      currentPage,
+      totalPages,
+      onPageChange,
+      size = 'default',
+      className,
+      showPageInfo = true,
+    },
+    ref
+  ) => {
+    const buttonSize = size === 'sm' ? 'sm' : size === 'lg' ? 'lg' : 'default'
+    const iconSize = size === 'sm' ? 14 : size === 'lg' ? 20 : 16
+
+    if (totalPages <= 1) {
+      return null
+    }
+
+    return (
+      <nav
+        ref={ref}
+        role="navigation"
+        aria-label="Pagination"
+        className={cn('flex items-center gap-2', className)}
+      >
+        <Button
+          variant="outline"
+          size={buttonSize}
+          onClick={() => onPageChange(currentPage - 1)}
+          disabled={currentPage <= 1}
+          aria-label="Go to previous page"
+        >
+          <CaretLeft size={iconSize} />
+          <span className="ml-1">Previous</span>
+        </Button>
+
+        {showPageInfo && (
+          <span className="text-sm text-muted-foreground px-2">
+            Page {currentPage} of {totalPages}
+          </span>
+        )}
+
+        <Button
+          variant="outline"
+          size={buttonSize}
+          onClick={() => onPageChange(currentPage + 1)}
+          disabled={currentPage >= totalPages}
+          aria-label="Go to next page"
+        >
+          <span className="mr-1">Next</span>
+          <CaretRight size={iconSize} />
+        </Button>
+      </nav>
+    )
+  }
+)
+SimplePagination.displayName = 'SimplePagination'
+
+export { Pagination, SimplePagination }

package/src/components/popover.tsx

@@ -0,0 +1,53 @@
+'use client'
+
+import * as React from 'react'
+import * as PopoverPrimitive from '@radix-ui/react-popover'
+import { cn } from '../lib/utils'
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverAnchor = PopoverPrimitive.Anchor
+
+const PopoverClose = PopoverPrimitive.Close
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 w-72 rounded-sm border bg-popover p-4 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 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}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+const PopoverArrow = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Arrow>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Arrow>
+>(({ className, ...props }, ref) => (
+  <PopoverPrimitive.Arrow
+    ref={ref}
+    className={cn('fill-popover', className)}
+    {...props}
+  />
+))
+PopoverArrow.displayName = PopoverPrimitive.Arrow.displayName
+
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverAnchor,
+  PopoverClose,
+  PopoverArrow,
+}

package/src/components/radio-group.tsx

@@ -0,0 +1,125 @@
+'use client'
+
+import * as React from 'react'
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
+import { Circle } from '@phosphor-icons/react'
+import { cn } from '../lib/utils'
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn('grid gap-2', className)}
+      {...props}
+      ref={ref}
+    />
+  )
+})
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle weight="fill" className="h-2.5 w-2.5 fill-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+// Convenience component for labeled radio items
+export interface RadioGroupOptionProps
+  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> {
+  label: string
+  description?: string
+}
+
+const RadioGroupOption = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  RadioGroupOptionProps
+>(({ label, description, className, id, ...props }, ref) => {
+  const optionId = id || React.useId()
+
+  return (
+    <div className={cn('flex items-start gap-3', className)}>
+      <RadioGroupItem ref={ref} id={optionId} {...props} />
+      <div className="space-y-0.5">
+        <label
+          htmlFor={optionId}
+          className="text-sm font-medium leading-none cursor-pointer peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+        >
+          {label}
+        </label>
+        {description && (
+          <p className="text-xs text-muted-foreground">{description}</p>
+        )}
+      </div>
+    </div>
+  )
+})
+RadioGroupOption.displayName = 'RadioGroupOption'
+
+// Card variant for selection cards
+export interface RadioGroupCardProps
+  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> {
+  label: string
+  description?: string
+  children?: React.ReactNode
+}
+
+const RadioGroupCard = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  RadioGroupCardProps
+>(({ label, description, children, className, id, ...props }, ref) => {
+  const cardId = id || React.useId()
+
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      id={cardId}
+      className={cn(
+        'relative flex cursor-pointer rounded-lg border bg-background p-4 transition-all hover:border-[var(--cyan)]/50 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 data-[state=checked]:border-[var(--cyan)] data-[state=checked]:ring-1 data-[state=checked]:ring-[var(--cyan)] disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+      {...props}
+    >
+      <div className="flex w-full items-start gap-3">
+        <div className="flex h-5 items-center">
+          <div className="aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow">
+            <RadioGroupPrimitive.Indicator className="flex items-center justify-center h-full">
+              <Circle weight="fill" className="h-2.5 w-2.5 fill-[var(--cyan)]" />
+            </RadioGroupPrimitive.Indicator>
+          </div>
+        </div>
+        <div className="flex-1 space-y-1">
+          <label
+            htmlFor={cardId}
+            className="text-sm font-medium leading-none cursor-pointer"
+          >
+            {label}
+          </label>
+          {description && (
+            <p className="text-xs text-muted-foreground">{description}</p>
+          )}
+          {children}
+        </div>
+      </div>
+    </RadioGroupPrimitive.Item>
+  )
+})
+RadioGroupCard.displayName = 'RadioGroupCard'
+
+export { RadioGroup, RadioGroupItem, RadioGroupOption, RadioGroupCard }

package/src/components/settings-nav.tsx

@@ -0,0 +1,137 @@
+'use client'
+
+import * as React from 'react'
+import { CaretRight } from '@phosphor-icons/react'
+import { cn } from '../lib/utils'
+
+export interface SettingsNavItem {
+  title: string
+  description: string
+  href: string
+  icon: React.ReactNode
+}
+
+export interface SettingsNavGroup {
+  title: string
+  items: SettingsNavItem[]
+}
+
+export interface SettingsNavProps extends React.HTMLAttributes<HTMLDivElement> {
+  groups: SettingsNavGroup[]
+  /** Custom Link component (e.g., Next.js Link) */
+  LinkComponent?: React.ComponentType<{
+    href: string
+    className?: string
+    children?: React.ReactNode
+  }>
+}
+
+const SettingsNav = React.forwardRef<HTMLDivElement, SettingsNavProps>(
+  ({ groups, LinkComponent, className, ...props }, ref) => {
+    const Link = LinkComponent || 'a'
+
+    return (
+      <div ref={ref} className={cn('space-y-8', className)} {...props}>
+        {groups.map((group) => (
+          <div key={group.title}>
+            <h2 className="text-sm font-medium text-muted-foreground uppercase tracking-wide mb-3 px-1">
+              {group.title}
+            </h2>
+            <div className="space-y-1">
+              {group.items.map((item) => (
+                <Link
+                  key={item.href}
+                  href={item.href}
+                  className="group flex items-center gap-4 p-4 rounded-sm transition-all hover:bg-gray-50 border border-transparent hover:border-gray-200"
+                >
+                  <div className="flex items-center justify-center w-10 h-10 rounded-sm bg-gray-100 group-hover:bg-[var(--cyan)]/10 transition-colors">
+                    <span className="text-gray-600 group-hover:text-[var(--cyan)] transition-colors [&>svg]:w-5 [&>svg]:h-5">
+                      {item.icon}
+                    </span>
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <h3 className="font-medium text-[var(--black)] group-hover:text-[var(--cyan)] transition-colors">
+                      {item.title}
+                    </h3>
+                    <p className="text-sm text-muted-foreground">
+                      {item.description}
+                    </p>
+                  </div>
+                  <CaretRight
+                    size={18}
+                    className="text-gray-300 group-hover:text-[var(--cyan)] group-hover:translate-x-0.5 transition-all shrink-0"
+                  />
+                </Link>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    )
+  }
+)
+SettingsNav.displayName = 'SettingsNav'
+
+// Single item variant
+export interface SettingsNavLinkProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  title: string
+  description?: string
+  icon?: React.ReactNode
+  /** Custom Link component */
+  LinkComponent?: React.ComponentType<{
+    href: string
+    className?: string
+    children?: React.ReactNode
+  }>
+}
+
+const SettingsNavLink = React.forwardRef<HTMLAnchorElement, SettingsNavLinkProps>(
+  ({ title, description, icon, href, LinkComponent, className, ...props }, ref) => {
+    const content = (
+      <>
+        {icon && (
+          <div className="flex items-center justify-center w-10 h-10 rounded-sm bg-gray-100 group-hover:bg-[var(--cyan)]/10 transition-colors">
+            <span className="text-gray-600 group-hover:text-[var(--cyan)] transition-colors [&>svg]:w-5 [&>svg]:h-5">
+              {icon}
+            </span>
+          </div>
+        )}
+        <div className="flex-1 min-w-0">
+          <h3 className="font-medium text-[var(--black)] group-hover:text-[var(--cyan)] transition-colors">
+            {title}
+          </h3>
+          {description && (
+            <p className="text-sm text-muted-foreground">{description}</p>
+          )}
+        </div>
+        <CaretRight
+          size={18}
+          className="text-gray-300 group-hover:text-[var(--cyan)] group-hover:translate-x-0.5 transition-all shrink-0"
+        />
+      </>
+    )
+
+    const linkClassName = cn(
+      'group flex items-center gap-4 p-4 rounded-sm transition-all hover:bg-gray-50 border border-transparent hover:border-gray-200',
+      className
+    )
+
+    if (LinkComponent && href) {
+      return (
+        <LinkComponent href={href} className={linkClassName}>
+          {content}
+        </LinkComponent>
+      )
+    }
+
+    return (
+      <a ref={ref} href={href} className={linkClassName} {...props}>
+        {content}
+      </a>
+    )
+  }
+)
+SettingsNavLink.displayName = 'SettingsNavLink'
+
+export { SettingsNav, SettingsNavLink }

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 }