@etherealui/react 0.0.0-stage → 0.0.2

package/src/index.ts

@@ -0,0 +1,114 @@
+// Utils
+export { cn } from "./utils/cn"
+
+// Individual Primitives
+export { Accordion, type AccordionItemData, type AccordionProps } from "./primitives/accordion"
+export { Announcement, type AnnouncementProps } from "./primitives/announcement"
+export { Avatar, AvatarGroup, avatarVariants, type AvatarProps, type AvatarGroupProps, type AvatarStatusType } from "./primitives/avatar"
+export { Badge, badgeVariants, type BadgeProps } from "./primitives/badge"
+export { Breadcrumb, type BreadcrumbItem, type BreadcrumbProps } from "./primitives/breadcrumb"
+export { Button, buttonVariants, type ButtonProps } from "./primitives/button"
+export { ButtonGroup, ToggleGroup, type ButtonGroupProps, type ToggleGroupItem, type ToggleGroupProps } from "./primitives/button-group"
+export { Carousel, type CarouselSlide, type CarouselProps } from "./primitives/carousel"
+export { Checkbox } from "./primitives/checkbox"
+export { Chip, type ChipProps } from "./primitives/chip"
+export { CloseButton, type CloseButtonProps } from "./primitives/close-button"
+export { ColorPicker, type ColorPickerProps } from "./primitives/color-picker"
+export { Combobox, type ComboboxOption, type ComboboxProps } from "./primitives/combobox"
+export { CommandPalette, type CommandItem, type CommandPaletteProps } from "./primitives/command-palette"
+export { ContextMenuBox, type ContextMenuAction, type ContextMenuBoxProps } from "./primitives/context-menu"
+export { DateCalendar, type DateCalendarProps } from "./primitives/date-calendar"
+export { DateRangePicker, type DateRangePreset, type DateRangePickerProps } from "./primitives/date-picker"
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+} from "./primitives/dialog"
+export { Divider, type DividerProps } from "./primitives/divider"
+export {
+  Drawer,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerDescription,
+  DrawerFooter,
+  type DrawerContentProps,
+} from "./primitives/drawer"
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuGroup,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuLabel,
+} from "./primitives/dropdown-menu"
+export { FileDropzone, type UploadedFileItem, type FileDropzoneProps } from "./primitives/file-upload"
+export { IconButton, type IconButtonProps } from "./primitives/icon-button"
+export { Input, Label, type InputProps, type LabelProps } from "./primitives/input"
+export {
+  Modal,
+  ModalPortal,
+  ModalOverlay,
+  ModalClose,
+  ModalTrigger,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalTitle,
+  ModalDescription,
+} from "./primitives/modal"
+export { Pagination, type PaginationProps } from "./primitives/pagination"
+export { Popover, PopoverTrigger, PopoverContent } from "./primitives/popover"
+export { Progress, CircularProgress, type ProgressProps, type CircularProgressProps } from "./primitives/progress"
+export { RadioGroup, type RadioGroupOption, type RadioGroupProps } from "./primitives/radio-group"
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectItem,
+} from "./primitives/select"
+export { Skeleton, CardSkeleton, TableRowSkeleton } from "./primitives/skeleton"
+export { Slider, type SliderProps } from "./primitives/slider"
+export { Switch } from "./primitives/switch"
+export { Table, TableHeader, TableBody } from "./primitives/table"
+export { Tabs, TabsList, TabsTrigger, TabsContent, type TabsListProps, type TabsTriggerProps } from "./primitives/tabs"
+export { Textarea, type TextareaProps } from "./primitives/textarea"
+export { ToastCard, type ToastVariant, type ToastItem, type ToastCardProps } from "./primitives/toast"
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "./primitives/tooltip"
+export {
+  AreaStatisticChart,
+  BarStatisticChart,
+  LineStatisticChart,
+  DonutStatisticChart,
+  RadialStatisticChart,
+  HeatmapStatisticChart,
+  type ChartDataPoint,
+  type AreaStatisticChartProps,
+  type BarStatisticChartProps,
+  type LineStatisticChartProps,
+  type DonutSegment,
+} from "./primitives/chart"
+
+// Enterprise Blocks
+export * from "./blocks/app-shell"
+export * from "./blocks/stat-cards"
+export * from "./blocks/filter-bar"
+export * from "./blocks/data-table"
+export * from "./blocks/settings-blocks"
+
+// Full Page Dashboard Templates
+export * from "./templates/executive-analytics"
+export * from "./templates/control-tower"
+export * from "./templates/workspace-settings"

package/src/primitives/accordion.tsx

@@ -0,0 +1,61 @@
+import * as React from "react"
+import { ChevronDown } from "lucide-react"
+import { cn } from "../utils/cn"
+
+export interface AccordionItemData {
+  id: string
+  title: string
+  content: string
+}
+
+export interface AccordionProps {
+  items: AccordionItemData[]
+  defaultOpenId?: string
+  className?: string
+}
+
+export const Accordion: React.FC<AccordionProps> = ({
+  items,
+  defaultOpenId,
+  className,
+}) => {
+  const [openId, setOpenId] = React.useState<string | null>(
+    defaultOpenId ?? items[0]?.id ?? null
+  )
+  return (
+    <div
+      className={cn(
+        "w-full divide-y divide-zinc-200 rounded-xl border border-zinc-200 bg-white dark:divide-zinc-800 dark:border-zinc-800 dark:bg-zinc-900",
+        className
+      )}
+    >
+      {items.map((item) => {
+        const isOpen = openId === item.id
+        return (
+          <div key={item.id}>
+            <button
+              type="button"
+              onClick={() => setOpenId(isOpen ? null : item.id)}
+              className="flex w-full items-center justify-between px-4 py-3.5 text-left text-xs font-medium text-zinc-900 hover:bg-zinc-50 dark:text-zinc-100 dark:hover:bg-zinc-800/50 cursor-pointer"
+            >
+              <span>{item.title}</span>
+              <ChevronDown
+                className={cn(
+                  "h-4 w-4 text-zinc-400 transition-transform",
+                  isOpen && "rotate-180"
+                )}
+              />
+            </button>
+            {isOpen && (
+              <div className="px-4 pb-3.5 text-xs text-zinc-500 dark:text-zinc-400 leading-relaxed">
+                {item.content}
+              </div>
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+Accordion.displayName = "Accordion"
+

package/src/primitives/announcement.tsx

@@ -0,0 +1,33 @@
+import * as React from "react"
+import { ArrowRight } from "lucide-react"
+import { cn } from "../utils/cn"
+
+export interface AnnouncementProps {
+  tag?: string
+  title: string
+  href?: string
+  className?: string
+}
+
+export const Announcement: React.FC<AnnouncementProps> = ({
+  tag = "New",
+  title,
+  href = "#",
+  className,
+}) => (
+  <a
+    href={href}
+    className={cn(
+      "inline-flex items-center gap-2 rounded-full border border-zinc-200 bg-white px-3 py-1 text-xs text-zinc-700 shadow-2xs transition-colors hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-200 dark:hover:bg-zinc-800",
+      className
+    )}
+  >
+    <span className="rounded-full bg-blue-100 px-2 py-0.5 text-[10px] font-semibold text-blue-700 dark:bg-blue-500/20 dark:text-blue-300">
+      {tag}
+    </span>
+    <span className="font-medium">{title}</span>
+    <ArrowRight className="h-3 w-3 text-zinc-400" />
+  </a>
+)
+Announcement.displayName = "Announcement"
+

package/src/primitives/avatar.tsx

@@ -0,0 +1,156 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../utils/cn"
+
+const avatarVariants = cva(
+  "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full font-medium select-none transition-colors",
+  {
+    variants: {
+      size: {
+        xs: "h-5 w-5 text-[10px]",
+        sm: "h-6 w-6 text-[11px]",
+        default: "h-8 w-8 text-xs",
+        lg: "h-9 w-9 text-sm",
+        xl: "h-11 w-11 text-sm",
+      },
+      tint: {
+        neutral:
+          "bg-zinc-200/80 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-200",
+        blue:
+          "bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300",
+        emerald:
+          "bg-emerald-100 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-300",
+        amber:
+          "bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-300",
+      },
+      ring: {
+        none: "",
+        subtle: "ring-1 ring-zinc-200 dark:ring-zinc-800",
+        glow: "ring-2 ring-blue-500/40",
+        emerald: "ring-2 ring-emerald-500/40",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+      tint: "neutral",
+      ring: "none",
+    },
+  }
+)
+
+export type AvatarStatusType = "online" | "away" | "busy" | "offline"
+
+const statusColorMap: Record<AvatarStatusType, string> = {
+  online: "bg-emerald-500",
+  away: "bg-amber-500",
+  busy: "bg-rose-500",
+  offline: "bg-zinc-400 dark:bg-zinc-600",
+}
+
+export interface AvatarProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof avatarVariants> {
+  src?: string
+  alt?: string
+  fallback?: string
+  status?: AvatarStatusType
+}
+
+const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
+  ({ className, size, tint, ring, src, alt, fallback, status, children, ...props }, ref) => {
+    const [imgError, setImgError] = React.useState(false)
+
+    const initials = React.useMemo(() => {
+      if (fallback) return fallback.slice(0, 2).toUpperCase()
+      if (alt) {
+        return alt
+          .split(" ")
+          .map((n) => n[0])
+          .join("")
+          .slice(0, 2)
+          .toUpperCase()
+      }
+      return "B"
+    }, [fallback, alt])
+
+    return (
+      <div className="relative inline-flex shrink-0" ref={ref} {...props}>
+        <div className={cn(avatarVariants({ size, tint, ring, className }))}>
+          {src && !imgError ? (
+            <img
+              src={src}
+              alt={alt || "Avatar"}
+              onError={() => setImgError(true)}
+              className="h-full w-full object-cover"
+            />
+          ) : (
+            children || <span className="leading-none">{initials}</span>
+          )}
+        </div>
+        {status && (
+          <span
+            aria-label={`Status: ${status}`}
+            className={cn(
+              "absolute bottom-0 right-0 block rounded-full ring-2 ring-white dark:ring-zinc-950",
+              size === "xs" || size === "sm" ? "h-1.5 w-1.5" : "h-2.5 w-2.5",
+              statusColorMap[status]
+            )}
+          />
+        )}
+      </div>
+    )
+  }
+)
+Avatar.displayName = "Avatar"
+
+export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  items: Array<{
+    src?: string
+    alt: string
+    fallback?: string
+    tint?: "neutral" | "blue" | "emerald" | "amber"
+    status?: AvatarStatusType
+  }>
+  max?: number
+  size?: "xs" | "sm" | "default" | "lg"
+}
+
+const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
+  ({ className, items, max = 4, size = "default", ...props }, ref) => {
+    const visible = items.slice(0, max)
+    const remaining = items.length - visible.length
+
+    return (
+      <div
+        ref={ref}
+        className={cn("flex items-center -space-x-2", className)}
+        {...props}
+      >
+        {visible.map((item, idx) => (
+          <Avatar
+            key={`${item.alt}-${idx}`}
+            src={item.src}
+            alt={item.alt}
+            fallback={item.fallback}
+            tint={item.tint || (idx % 2 === 1 ? "blue" : "neutral")}
+            size={size}
+            className="ring-2 ring-white dark:ring-zinc-950"
+          />
+        ))}
+        {remaining > 0 && (
+          <div
+            className={cn(
+              avatarVariants({ size, tint: "neutral" }),
+              "ring-2 ring-white dark:ring-zinc-950 text-[11px] font-medium z-0"
+            )}
+          >
+            +{remaining}
+          </div>
+        )}
+      </div>
+    )
+  }
+)
+AvatarGroup.displayName = "AvatarGroup"
+
+export { Avatar, AvatarGroup, avatarVariants }

package/src/primitives/badge.tsx

@@ -0,0 +1,108 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+import { cn } from "../utils/cn"
+
+const badgeVariants = cva(
+  "inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium transition-colors select-none",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-zinc-100 text-zinc-700 border border-zinc-200/80 dark:bg-zinc-800 dark:text-zinc-200 dark:border-zinc-700/80",
+        blue:
+          "bg-blue-50 text-blue-700 border border-blue-200/80 dark:bg-blue-500/15 dark:text-blue-300 dark:border-blue-500/30",
+        glow:
+          "bg-blue-50 text-blue-700 border border-blue-200/80 dark:bg-blue-500/15 dark:text-blue-300 dark:border-blue-500/30",
+        emerald:
+          "bg-emerald-50 text-emerald-700 border border-emerald-200/80 dark:bg-emerald-500/15 dark:text-emerald-300 dark:border-emerald-500/30",
+        amber:
+          "bg-amber-50 text-amber-700 border border-amber-200/80 dark:bg-amber-500/15 dark:text-amber-300 dark:border-amber-500/30",
+        rose:
+          "bg-rose-50 text-rose-700 border border-rose-200/80 dark:bg-rose-500/15 dark:text-rose-300 dark:border-rose-500/30",
+        outline:
+          "bg-transparent text-zinc-600 border border-zinc-200 dark:text-zinc-400 dark:border-zinc-800",
+        mono:
+          "bg-zinc-100 text-zinc-700 border border-zinc-200 dark:bg-zinc-900 dark:text-zinc-300 dark:border-zinc-800 font-mono text-[11px]",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const dotColorMap: Record<string, string> = {
+  default: "bg-zinc-400",
+  blue: "bg-blue-500",
+  glow: "bg-blue-500",
+  emerald: "bg-emerald-500",
+  amber: "bg-amber-500",
+  rose: "bg-rose-500",
+  outline: "bg-zinc-400",
+  mono: "bg-blue-500",
+}
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof badgeVariants> {
+  dot?: boolean
+}
+
+const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
+  ({ className, variant = "default", dot = false, children, ...props }, ref) => {
+    return (
+      <span
+        ref={ref}
+        className={cn(badgeVariants({ variant, className }))}
+        {...props}
+      >
+        {dot && (
+          <span
+            className={cn(
+              "h-1.5 w-1.5 rounded-full shrink-0",
+              dotColorMap[variant || "default"]
+            )}
+          />
+        )}
+        {children}
+      </span>
+    )
+  }
+)
+Badge.displayName = "Badge"
+
+export interface ChipProps extends React.HTMLAttributes<HTMLSpanElement> {
+  onRemove?: () => void
+  active?: boolean
+}
+
+const Chip = React.forwardRef<HTMLSpanElement, ChipProps>(
+  ({ className, children, onRemove, active = false, ...props }, ref) => (
+    <span
+      ref={ref}
+      className={cn(
+        "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium transition-colors",
+        active
+          ? "border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-500/30 dark:bg-blue-500/15 dark:text-blue-300"
+          : "border-zinc-200 bg-white text-zinc-700 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-300 dark:hover:bg-zinc-800",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {onRemove && (
+        <button
+          type="button"
+          onClick={onRemove}
+          className="rounded-full p-0.5 text-zinc-400 hover:bg-zinc-200/60 hover:text-zinc-700 dark:hover:bg-zinc-700 dark:hover:text-zinc-200 cursor-pointer"
+        >
+          <X className="h-3 w-3" />
+        </button>
+      )}
+    </span>
+  )
+)
+Chip.displayName = "Chip"
+
+export { Badge, Chip, badgeVariants }

package/src/primitives/breadcrumb.tsx

@@ -0,0 +1,45 @@
+import * as React from "react"
+import { ChevronRight } from "lucide-react"
+import { cn } from "../utils/cn"
+
+export interface BreadcrumbItem {
+  label: string
+  href?: string
+}
+
+export interface BreadcrumbProps {
+  items: BreadcrumbItem[]
+  className?: string
+}
+
+export const Breadcrumb: React.FC<BreadcrumbProps> = ({ items, className }) => (
+  <nav
+    aria-label="Breadcrumb"
+    className={cn("flex items-center gap-1.5 text-xs", className)}
+  >
+    {items.map((item, idx) => {
+      const isLast = idx === items.length - 1
+      return (
+        <React.Fragment key={item.label}>
+          {idx > 0 && (
+            <ChevronRight className="h-3.5 w-3.5 text-zinc-400 shrink-0" />
+          )}
+          {item.href && !isLast ? (
+            <a
+              href={item.href}
+              className="text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100 transition-colors"
+            >
+              {item.label}
+            </a>
+          ) : (
+            <span className="font-medium text-zinc-900 dark:text-zinc-100">
+              {item.label}
+            </span>
+          )}
+        </React.Fragment>
+      )
+    })}
+  </nav>
+)
+Breadcrumb.displayName = "Breadcrumb"
+

package/src/primitives/button-group.tsx

@@ -0,0 +1,79 @@
+import * as React from "react"
+import { cn } from "../utils/cn"
+
+export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  attached?: boolean
+}
+
+export const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
+  ({ className, attached = true, ...props }, ref) => (
+    <div
+      ref={ref}
+      role="group"
+      className={cn(
+        "inline-flex items-center",
+        attached
+          ? "rounded-lg border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-900 p-0.5 [&>button]:border-0 [&>button]:rounded-md [&>button]:shadow-none"
+          : "gap-2",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+ButtonGroup.displayName = "ButtonGroup"
+
+export interface ToggleGroupItem {
+  value: string
+  label: React.ReactNode
+  icon?: React.ReactNode
+}
+
+export interface ToggleGroupProps {
+  items: ToggleGroupItem[]
+  value: string
+  onValueChange: (value: string) => void
+  size?: "sm" | "default"
+  className?: string
+}
+
+export const ToggleGroup: React.FC<ToggleGroupProps> = ({
+  items,
+  value,
+  onValueChange,
+  size = "default",
+  className,
+}) => {
+  return (
+    <div
+      role="group"
+      className={cn(
+        "inline-flex items-center rounded-lg border border-zinc-200 bg-zinc-100/80 dark:border-zinc-800 dark:bg-zinc-900 p-0.5 gap-0.5",
+        className
+      )}
+    >
+      {items.map((item) => {
+        const active = item.value === value
+        return (
+          <button
+            key={item.value}
+            type="button"
+            onClick={() => onValueChange(item.value)}
+            className={cn(
+              "inline-flex items-center gap-1.5 rounded-md font-medium transition-all cursor-pointer",
+              size === "sm" ? "px-2.5 py-1 text-xs" : "px-3 py-1.5 text-xs",
+              active
+                ? "bg-white text-zinc-900 shadow-2xs dark:bg-zinc-800 dark:text-zinc-100"
+                : "text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-200"
+            )}
+          >
+            {item.icon}
+            {item.label}
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+ToggleGroup.displayName = "ToggleGroup"
+