@modern-admin/ui 0.1.0

package/src/components/sonner.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react'
+import { Toaster as SonnerToaster, toast } from 'sonner'
+
+export type ToasterProps = React.ComponentProps<typeof SonnerToaster>
+
+const useDocumentTheme = (): 'light' | 'dark' => {
+  const [theme, setTheme] = React.useState<'light' | 'dark'>(() =>
+    typeof document !== 'undefined' && document.documentElement.classList.contains('dark')
+      ? 'dark'
+      : 'light',
+  )
+  React.useEffect(() => {
+    const el = document.documentElement
+    const observer = new MutationObserver(() => {
+      setTheme(el.classList.contains('dark') ? 'dark' : 'light')
+    })
+    observer.observe(el, { attributes: true, attributeFilter: ['class'] })
+    return () => observer.disconnect()
+  }, [])
+  return theme
+}
+
+export const Toaster = ({ ...props }: ToasterProps): React.ReactElement => {
+  const theme = useDocumentTheme()
+  return (
+    <SonnerToaster
+      theme={theme}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+          description: 'group-[.toast]:text-muted-foreground',
+          actionButton:
+            'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+          cancelButton:
+            'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { toast }

package/src/components/switch.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react'
+import * as SwitchPrimitive from '@radix-ui/react-switch'
+import { cn } from '../lib/utils.js'
+
+export const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitive.Root
+    ref={ref}
+    className={cn(
+      'peer inline-flex h-5 w-9 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-primary data-[state=unchecked]:bg-input',
+      className,
+    )}
+    {...props}
+  >
+    <SwitchPrimitive.Thumb
+      className={cn(
+        'pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',
+      )}
+    />
+  </SwitchPrimitive.Root>
+))
+Switch.displayName = SwitchPrimitive.Root.displayName

package/src/components/table.tsx

@@ -0,0 +1,93 @@
+import * as React from 'react'
+import { cn } from '../lib/utils.js'
+
+export const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+  ({ className, ...props }, ref) => (
+    <div className="relative w-full overflow-auto">
+      <table ref={ref} className={cn('w-full caption-bottom text-sm', className)} {...props} />
+    </div>
+  ),
+)
+Table.displayName = 'Table'
+
+export const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn('[&_tr]:border-b [&_tr]:border-border bg-muted/40', className)} {...props} />
+))
+TableHeader.displayName = 'TableHeader'
+
+export const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody ref={ref} className={cn('[&_tr:last-child]:border-0', className)} {...props} />
+))
+TableBody.displayName = 'TableBody'
+
+export const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn('border-t bg-muted/40 font-medium [&>tr]:last:border-b-0', className)}
+    {...props}
+  />
+))
+TableFooter.displayName = 'TableFooter'
+
+export const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      'border-b border-border transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
+      className,
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = 'TableRow'
+
+export const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      'h-10 px-3 text-left align-middle text-xs font-semibold uppercase tracking-wide text-muted-foreground border-r border-border last:border-r-0',
+      className,
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = 'TableHead'
+
+export const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn('px-3 py-2 align-middle border-r border-border last:border-r-0', className)}
+    {...props}
+  />
+))
+TableCell.displayName = 'TableCell'
+
+export 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'

package/src/components/tabs.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react'
+import * as TabsPrimitive from '@radix-ui/react-tabs'
+import { cn } from '../lib/utils.js'
+
+export const Tabs = TabsPrimitive.Root
+
+// Underline-style tab strip — works visually even with a single tab because
+// the active item has a clearly drawn bottom indicator that anchors it to the
+// content below.
+export const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      'flex h-10 w-full items-center justify-start gap-1 overflow-x-auto border-b border-border text-muted-foreground',
+      className,
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+export const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'relative -mb-px inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap border-b-2 border-transparent px-4 py-2 text-sm font-medium ring-offset-background transition-all',
+      'hover:text-foreground',
+      '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]:border-primary data-[state=active]:text-foreground',
+      className,
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+export const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      'mt-3 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

package/src/components/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react'
+import { cn } from '../lib/utils.js'
+
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => (
+    <textarea
+      ref={ref}
+      className={cn(
+        'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+Textarea.displayName = 'Textarea'

package/src/components/tooltip.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react'
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import { cn } from '../lib/utils.js'
+
+export const TooltipProvider = TooltipPrimitive.Provider
+export const Tooltip = TooltipPrimitive.Root
+export const TooltipTrigger = TooltipPrimitive.Trigger
+
+export 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-md border border-border bg-popover px-3 py-1.5 text-xs text-popover-foreground shadow-md 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=top]:slide-in-from-bottom-2',
+        className,
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName

package/src/index.ts

@@ -0,0 +1,342 @@
+// @modern-admin/ui — shadcn-flavoured kit for the admin frontend. Built on
+// Radix primitives + Tailwind 4 + the semantic CSS variables in styles.css.
+
+export {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from './components/accordion.js'
+
+export { cn } from './lib/utils.js'
+export {
+  initTheme,
+  readThemeMode,
+  setThemeMode,
+  type ThemeMode,
+} from './lib/theme.js'
+
+// Form-control primitives
+export { Button, buttonVariants, type ButtonProps } from './components/button.js'
+export { Input, type InputProps } from './components/input.js'
+export { PasswordInput, type PasswordInputProps } from './components/password-input.js'
+export { Textarea, type TextareaProps } from './components/textarea.js'
+export { Label } from './components/label.js'
+export { Checkbox } from './components/checkbox.js'
+export { Switch } from './components/switch.js'
+export { Calendar, type CalendarProps } from './components/calendar.js'
+export {
+  DatePicker,
+  type DatePickerProps,
+  type DatePickerMode,
+} from './components/date-picker.js'
+export {
+  DateRangeInput,
+  type DateRangeInputProps,
+  type DateRangeInputLabels,
+} from './components/date-range-input.js'
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+  NativeSelect,
+  type NativeSelectProps,
+} from './components/select.js'
+
+// Layout / display
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+} from './components/breadcrumb.js'
+export { Badge, badgeVariants, type BadgeProps } from './components/badge.js'
+export {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+} from './components/card.js'
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableRow,
+  TableHead,
+  TableCell,
+  TableCaption,
+} from './components/table.js'
+export { Avatar, AvatarImage, AvatarFallback } from './components/avatar.js'
+export { Separator } from './components/separator.js'
+export { ScrollArea, ScrollBar } from './components/scroll-area.js'
+export { Skeleton } from './components/skeleton.js'
+export { Tabs, TabsList, TabsTrigger, TabsContent } from './components/tabs.js'
+
+// Overlay / floating
+export {
+  Dialog,
+  DialogTrigger,
+  DialogPortal,
+  DialogClose,
+  DialogOverlay,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+} from './components/dialog.js'
+export {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+} from './components/alert-dialog.js'
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+} from './components/dropdown-menu.js'
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverAnchor,
+} from './components/popover.js'
+export {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+} from './components/tooltip.js'
+export { InfoTooltip, type InfoTooltipProps } from './components/info-tooltip.js'
+export { Kbd, getModKeyLabel } from './components/kbd.js'
+export {
+  KeyboardShortcutsHelp,
+  type KeyboardShortcutItem,
+  type KeyboardShortcutsHelpProps,
+} from './components/keyboard-shortcuts-help.js'
+
+// Command / Combobox base
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+} from './components/command.js'
+
+// Form (react-hook-form bindings)
+export {
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+  useFormField,
+} from './components/form.js'
+
+// Field — pure-layout shadcn-style form-field primitives
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldSet,
+  FieldLegend,
+  FieldSeparator,
+  FieldContent,
+  type FieldProps,
+} from './components/field.js'
+
+// Sheet — side-anchored Dialog
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetPortal,
+  SheetOverlay,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+  type SheetContentProps,
+} from './components/sheet.js'
+
+// Empty state
+export {
+  Empty,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  type EmptyMediaProps,
+} from './components/empty.js'
+
+// Sidebar
+export {
+  SidebarProvider,
+  Sidebar,
+  SidebarTrigger,
+  SidebarRail,
+  SidebarInset,
+  SidebarInput,
+  SidebarHeader,
+  SidebarFooter,
+  SidebarSeparator,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarMenuButton,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubItem,
+  SidebarMenuSubButton,
+  useSidebar,
+  type SidebarProps,
+  type SidebarProviderProps,
+  type SidebarMenuButtonProps,
+} from './components/sidebar.js'
+
+// Richtext
+export {
+  RichtextEditor,
+  type RichtextEditorProps,
+  type RichtextFormat,
+} from './components/richtext-editor.js'
+export {
+  RichtextRender,
+  type RichtextRenderProps,
+} from './components/richtext-render.js'
+
+// Media preview (Preview button + dialog with image/video + Download)
+export {
+  MediaPreview,
+  detectMediaKind,
+  type MediaPreviewProps,
+  type MediaKind,
+} from './components/media-preview.js'
+
+// JSON editor + viewer
+export {
+  JsonEditor,
+  JsonView,
+  type JsonEditorProps,
+  type JsonViewProps,
+} from './components/json-editor.js'
+
+// Combobox — free-text autocomplete input with optional suggestions
+export {
+  Combobox,
+  type ComboboxProps,
+  type ComboboxLabels,
+  type ComboboxSuggestion,
+} from './components/combobox.js'
+
+// Key-value editor + viewer (fixed-keys alternative to JsonEditor)
+export {
+  KeyValueEditor,
+  KeyValueView,
+  type KeyValueEditorProps,
+  type KeyValueEditorLabels,
+  type KeyValueViewProps,
+  type KeyValueViewLabels,
+  type KeyValueFieldSpec,
+  type KeyValueFieldType,
+} from './components/key-value-editor.js'
+
+// File input (upload drop-zone + current file display)
+export { FileInput, type FileInputProps } from './components/file-input.js'
+export {
+  MultiFileInput,
+  type MultiFileInputProps,
+  type MultiFileInputItem,
+  type MultiFileInputPendingItem,
+} from './components/multi-file-input.js'
+
+// Toast
+export { Toaster, toast, type ToasterProps } from './components/sonner.js'
+
+// Chart
+export {
+  ChartPanel,
+  KpiCard,
+  TimeSeriesChart,
+  type ChartType,
+  type ChartDataPoint,
+  type ChartPanelLabels,
+  type ChartPanelProps,
+  type KpiCardLabels,
+  type KpiCardProps,
+  type TimeSeriesChartLabels,
+  type TimeSeriesChartProps,
+  type TimeSeriesChartSeries,
+} from './components/chart.js'
+
+// History / audit log
+export {
+  DiffView,
+  type DiffField,
+  type DiffViewLabels,
+  type DiffViewProps,
+} from './components/diff-view.js'
+export {
+  RevisionTimeline,
+  type RevisionTimelineItem,
+  type RevisionTimelineLabels,
+  type RevisionTimelineProps,
+} from './components/revision-timeline.js'
+export {
+  AuditTimeline,
+  type AuditTimelineItem,
+  type AuditTimelineLabels,
+  type AuditTimelineProps,
+} from './components/audit-timeline.js'
+
+export const VERSION = '0.0.0'

package/src/lib/theme.ts

@@ -0,0 +1,45 @@
+// Tiny theme toggle helper — flips `.dark` on the document root and
+// persists the preference. The actual tokens live in styles.css.
+
+export type ThemeMode = 'light' | 'dark' | 'system'
+
+const STORAGE_KEY = 'modern-admin:theme'
+
+const prefersDark = (): boolean => {
+  if (typeof window === 'undefined' || !window.matchMedia) return false
+  return window.matchMedia('(prefers-color-scheme: dark)').matches
+}
+
+const applyClass = (dark: boolean): void => {
+  if (typeof document === 'undefined') return
+  document.documentElement.classList.toggle('dark', dark)
+}
+
+/** Returns the persisted theme, or 'system' when nothing was saved. */
+export const readThemeMode = (): ThemeMode => {
+  if (typeof localStorage === 'undefined') return 'system'
+  const v = localStorage.getItem(STORAGE_KEY)
+  return v === 'light' || v === 'dark' || v === 'system' ? v : 'system'
+}
+
+/** Persist a theme choice and apply it immediately. */
+export const setThemeMode = (mode: ThemeMode): void => {
+  if (typeof localStorage !== 'undefined') localStorage.setItem(STORAGE_KEY, mode)
+  applyClass(mode === 'dark' || (mode === 'system' && prefersDark()))
+}
+
+/**
+ * Initialize the theme on app boot. Call once in your client entry. The
+ * returned function unsubscribes from system preference changes.
+ */
+export const initTheme = (): (() => void) => {
+  const mode = readThemeMode()
+  applyClass(mode === 'dark' || (mode === 'system' && prefersDark()))
+  if (typeof window === 'undefined' || !window.matchMedia) return () => {}
+  const media = window.matchMedia('(prefers-color-scheme: dark)')
+  const listener = (e: MediaQueryListEvent): void => {
+    if (readThemeMode() === 'system') applyClass(e.matches)
+  }
+  media.addEventListener('change', listener)
+  return () => media.removeEventListener('change', listener)
+}

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs))
+}