@dilipod/ui 0.2.4 → 0.2.5

package/src/components/alert.tsx

@@ -0,0 +1,67 @@
+'use client'
+
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '../lib/utils'
+
+const alertVariants = cva(
+  'rounded-sm border p-3 text-sm',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background border-border text-foreground',
+        success: 'bg-green-50 border-green-200 text-green-900',
+        error: 'bg-red-50 border-red-200 text-red-900',
+        warning: 'bg-amber-50 border-amber-200 text-amber-900',
+        info: 'bg-blue-50 border-blue-200 text-blue-900',
+        primary: 'bg-[var(--cyan)]/10 border-[var(--cyan)]/20 text-[var(--cyan)]',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+)
+
+export interface AlertProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof alertVariants> {
+  /** Optional icon to display */
+  icon?: React.ReactNode
+  /** Optional title */
+  title?: string
+  /** Optional action button */
+  action?: React.ReactNode
+}
+
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
+  ({ className, variant, icon, title, action, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(alertVariants({ variant }), className)}
+        {...props}
+      >
+        <div className="flex items-start justify-between gap-3">
+          <div className="flex items-start gap-3 flex-1">
+            {icon && <div className="shrink-0 mt-0.5">{icon}</div>}
+            <div className="flex-1 min-w-0">
+              {title && (
+                <p className="font-semibold mb-1">{title}</p>
+              )}
+              <div className={title ? 'text-sm' : ''}>{children}</div>
+            </div>
+          </div>
+          {action && (
+            <div className="shrink-0">
+              {action}
+            </div>
+          )}
+        </div>
+      </div>
+    )
+  }
+)
+Alert.displayName = 'Alert'
+
+export { Alert, alertVariants }

package/src/components/button.tsx

@@ -44,17 +44,48 @@ export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean
+  /** Show loading state */
+  loading?: boolean
+  /** Loading text (defaults to current children text) */
+  loadingText?: string
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
+  ({ className, variant, size, asChild = false, loading, loadingText, children, disabled, ...props }, ref) => {
     const Comp = asChild ? Slot : 'button'
+    const isDisabled = disabled || loading
+    
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
+        disabled={isDisabled}
         {...props}
-      />
+      >
+        {loading && (
+          <svg
+            className="animate-spin h-4 w-4"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+          >
+            <circle
+              className="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              strokeWidth="4"
+            />
+            <path
+              className="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            />
+          </svg>
+        )}
+        {loading ? loadingText || children : children}
+      </Comp>
     )
   }
 )

package/src/components/code-block.tsx

@@ -0,0 +1,32 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../lib/utils'
+
+export interface CodeBlockProps extends React.HTMLAttributes<HTMLPreElement> {
+  /** Code content */
+  children?: React.ReactNode
+  /** Language for syntax highlighting (optional) */
+  language?: string
+}
+
+const CodeBlock = React.forwardRef<HTMLPreElement, CodeBlockProps>(
+  ({ className, children, language, ...props }, ref) => {
+    return (
+      <pre
+        ref={ref}
+        className={cn(
+          'rounded-sm bg-muted p-4 text-sm overflow-auto font-mono',
+          className
+        )}
+        {...(language && { 'data-language': language })}
+        {...props}
+      >
+        <code>{children}</code>
+      </pre>
+    )
+  }
+)
+CodeBlock.displayName = 'CodeBlock'
+
+export { CodeBlock }

package/src/components/divider.tsx

@@ -0,0 +1,52 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../lib/utils'
+
+export interface DividerProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Text to display in the divider */
+  text?: string
+  /** Orientation */
+  orientation?: 'horizontal' | 'vertical'
+}
+
+const Divider = React.forwardRef<HTMLDivElement, DividerProps>(
+  ({ className, text, orientation = 'horizontal', ...props }, ref) => {
+    if (orientation === 'vertical') {
+      return (
+        <div
+          ref={ref}
+          className={cn('w-px h-full bg-border', className)}
+          {...props}
+        />
+      )
+    }
+
+    if (text) {
+      return (
+        <div
+          ref={ref}
+          className={cn('relative flex items-center', className)}
+          {...props}
+        >
+          <div className="flex-1 border-t" />
+          <span className="px-2 text-xs uppercase text-muted-foreground bg-background">
+            {text}
+          </span>
+          <div className="flex-1 border-t" />
+        </div>
+      )
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn('border-t', className)}
+        {...props}
+      />
+    )
+  }
+)
+Divider.displayName = 'Divider'
+
+export { Divider }

package/src/components/dropdown-menu.tsx

@@ -65,7 +65,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-sm border bg-popover p-1 text-popover-foreground shadow-md 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 origin-[--radix-dropdown-menu-content-transform-origin]",
+        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-sm border bg-popover p-1.5 text-popover-foreground shadow-md 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 origin-[--radix-dropdown-menu-content-transform-origin]",
         className
       )}
       {...props}
@@ -83,7 +83,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-3 py-2 text-sm outline-none transition-colors focus:bg-muted focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
       inset && "pl-8",
       className
     )}
@@ -147,7 +147,7 @@ const DropdownMenuLabel = React.forwardRef<
   <DropdownMenuPrimitive.Label
     ref={ref}
     className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
+      "px-3 py-2 text-sm font-semibold text-foreground",
       inset && "pl-8",
       className
     )}

package/src/components/empty-state.tsx

@@ -0,0 +1,63 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../lib/utils'
+
+export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Optional icon to display */
+  icon?: React.ReactNode
+  /** Title text */
+  title?: string
+  /** Description text */
+  description?: string
+  /** Optional action button */
+  action?: React.ReactNode
+  /** Size variant */
+  size?: 'sm' | 'default' | 'lg'
+}
+
+const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
+  ({ className, icon, title, description, action, size = 'default', ...props }, ref) => {
+    const paddingClass = {
+      sm: 'p-8',
+      default: 'p-12',
+      lg: 'p-16',
+    }[size]
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'rounded-sm border border-dashed text-center',
+          paddingClass,
+          className
+        )}
+        {...props}
+      >
+        {icon && (
+          <div className="flex justify-center mb-4">
+            {icon}
+          </div>
+        )}
+        {title && (
+          <h3 className="text-sm font-semibold text-foreground mb-1">
+            {title}
+          </h3>
+        )}
+        {description && (
+          <p className="text-sm text-muted-foreground mb-4">
+            {description}
+          </p>
+        )}
+        {action && (
+          <div className="flex justify-center">
+            {action}
+          </div>
+        )}
+      </div>
+    )
+  }
+)
+EmptyState.displayName = 'EmptyState'
+
+export { EmptyState }

package/src/components/form-field.tsx

@@ -0,0 +1,73 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../lib/utils'
+import { Label } from './label'
+import { Input } from './input'
+import { Textarea } from './textarea'
+
+export interface FormFieldProps {
+  /** Field label */
+  label?: string
+  /** Error message to display */
+  error?: string
+  /** Helper text to display */
+  helperText?: string
+  /** Whether the field is required */
+  required?: boolean
+  /** Field ID for accessibility */
+  id?: string
+  /** Additional className */
+  className?: string
+  /** Field content (Input, Textarea, etc.) */
+  children: React.ReactNode
+}
+
+const FormField = React.forwardRef<HTMLDivElement, FormFieldProps>(
+  ({ label, error, helperText, required, id, className, children, ...props }, ref) => {
+    const fieldId = id || React.useId()
+    const errorId = `${fieldId}-error`
+    const helperId = `${fieldId}-helper`
+
+    // Clone children to add error state and IDs
+    const enhancedChildren = React.Children.map(children, (child) => {
+      if (React.isValidElement(child)) {
+        const childProps = child.props as { className?: string; [key: string]: any }
+        return React.cloneElement(child as React.ReactElement<any>, {
+          id: fieldId,
+          'aria-invalid': error ? 'true' : undefined,
+          'aria-describedby': error ? errorId : helperText ? helperId : undefined,
+          className: cn(
+            childProps.className,
+            error && 'border-red-500 focus-visible:ring-red-500'
+          ),
+        })
+      }
+      return child
+    })
+
+    return (
+      <div ref={ref} className={cn('space-y-2', className)} {...props}>
+        {label && (
+          <Label htmlFor={fieldId} className={required ? 'after:content-["*"] after:ml-0.5 after:text-red-500' : ''}>
+            {label}
+          </Label>
+        )}
+        {enhancedChildren}
+        {error && (
+          <p id={errorId} className="text-sm text-red-600" role="alert">
+            {error}
+          </p>
+        )}
+        {helperText && !error && (
+          <p id={helperId} className="text-xs text-muted-foreground">
+            {helperText}
+          </p>
+        )}
+      </div>
+    )
+  }
+)
+FormField.displayName = 'FormField'
+
+export { FormField }

package/src/components/input.tsx

@@ -4,18 +4,25 @@ import * as React from 'react'
 import { cn } from '../lib/utils'
 
 export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  /** Show error state */
+  error?: boolean
+}
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
+  ({ className, type, error, ...props }, ref) => {
     return (
       <input
         type={type}
         className={cn(
-          'flex h-10 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-base text-[var(--black)] ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-[var(--black)] placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--cyan)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm transition-colors',
+          'flex h-10 w-full rounded-sm border bg-white px-3 py-2 text-base text-[var(--black)] ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-[var(--black)] placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm transition-colors',
+          error
+            ? 'border-red-500 focus-visible:ring-red-500'
+            : 'border-gray-300 focus-visible:ring-[var(--cyan)]',
           className
         )}
         ref={ref}
+        aria-invalid={error ? 'true' : undefined}
         {...props}
       />
     )

package/src/components/sidebar.tsx

@@ -7,7 +7,7 @@ import type { Icon } from '../icons'
 export interface SidebarNavItem {
   name: string
   href: string
-  icon: Icon
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement> & { weight?: 'fill' | 'regular' }>
 }
 
 export interface SidebarProps extends React.HTMLAttributes<HTMLElement> {
@@ -27,7 +27,7 @@ export interface SidebarProps extends React.HTMLAttributes<HTMLElement> {
   helpLink?: {
     href: string
     label?: string
-    icon?: Icon
+    icon?: React.ComponentType<React.SVGProps<SVGSVGElement> & { weight?: 'fill' | 'regular' }>
   }
   /** Header content (e.g., Logo) */
   header?: React.ReactNode
@@ -43,9 +43,9 @@ export interface SidebarNavItemProps {
   LinkComponent?: React.ComponentType<{ href: string; className?: string; children?: React.ReactNode } & Record<string, any>>
 }
 
-const SidebarNavItem = React.forwardRef<any, SidebarNavItemProps>(
+const SidebarNavItem = React.forwardRef<HTMLAnchorElement, SidebarNavItemProps>(
   ({ item, isActive, className, LinkComponent, ...props }, ref) => {
-    const Icon = item.icon
+    const Icon = item.icon as React.ComponentType<any>
     const baseClassName = cn(
       'flex items-center gap-3 rounded-sm px-3 py-2 text-sm transition-colors',
       isActive

package/src/components/table.tsx

@@ -0,0 +1,108 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../lib/utils'
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="overflow-x-auto">
+    <table
+      ref={ref}
+      className={cn('w-full border-collapse', className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = 'Table'
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn('', className)} {...props} />
+))
+TableHeader.displayName = 'TableHeader'
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody ref={ref} className={cn('', className)} {...props} />
+))
+TableBody.displayName = 'TableBody'
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn('border-t bg-muted/50 font-medium', className)}
+    {...props}
+  />
+))
+TableFooter.displayName = 'TableFooter'
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', className)}
+    {...props}
+  />
+))
+TableRow.displayName = 'TableRow'
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      'h-12 px-4 text-left align-middle font-semibold text-muted-foreground [&:has([role=checkbox])]:pr-0',
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = 'TableHead'
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)}
+    {...props}
+  />
+))
+TableCell.displayName = 'TableCell'
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn('mt-4 text-sm text-muted-foreground', className)}
+    {...props}
+  />
+))
+TableCaption.displayName = 'TableCaption'
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

package/src/components/textarea.tsx

@@ -4,17 +4,24 @@ import * as React from 'react'
 import { cn } from '../lib/utils'
 
 export interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  /** Show error state */
+  error?: boolean
+}
 
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, ...props }, ref) => {
+  ({ className, error, ...props }, ref) => {
     return (
       <textarea
         className={cn(
-          'flex min-h-[80px] w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-base text-[var(--black)] ring-offset-background placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--cyan)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm transition-colors',
+          'flex min-h-[80px] w-full rounded-sm border bg-white px-3 py-2 text-base text-[var(--black)] ring-offset-background placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm transition-colors resize-none',
+          error
+            ? 'border-red-500 focus-visible:ring-red-500'
+            : 'border-gray-300 focus-visible:ring-[var(--cyan)]',
           className
         )}
         ref={ref}
+        aria-invalid={error ? 'true' : undefined}
         {...props}
       />
     )

package/src/index.ts

@@ -113,6 +113,32 @@ export type {
   SidebarNavItemProps,
 } from './components/sidebar'
 
+export { Alert, alertVariants } from './components/alert'
+export type { AlertProps } from './components/alert'
+
+export { EmptyState } from './components/empty-state'
+export type { EmptyStateProps } from './components/empty-state'
+
+export { CodeBlock } from './components/code-block'
+export type { CodeBlockProps } from './components/code-block'
+
+export { FormField } from './components/form-field'
+export type { FormFieldProps } from './components/form-field'
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+} from './components/table'
+
+export { Divider } from './components/divider'
+export type { DividerProps } from './components/divider'
+
 // Utilities
 export { cn } from './lib/utils'