@etherealui/react 0.0.0-stage → 0.0.2

package/src/primitives/progress.tsx

@@ -0,0 +1,145 @@
+import * as React from "react"
+import { cn } from "../utils/cn"
+
+export interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+  value: number
+  max?: number
+  variant?: "blue" | "indigo" | "emerald" | "amber" | "rose" | "white"
+  size?: "sm" | "default" | "lg"
+  showValue?: boolean
+  label?: string
+}
+
+const barColorMap: Record<NonNullable<ProgressProps["variant"]>, string> = {
+  blue: "bg-blue-600 dark:bg-blue-500",
+  indigo: "bg-blue-600 dark:bg-blue-500",
+  emerald: "bg-emerald-600 dark:bg-emerald-500",
+  amber: "bg-amber-500",
+  rose: "bg-rose-600 dark:bg-rose-500",
+  white: "bg-zinc-900 dark:bg-zinc-100",
+}
+
+const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
+  (
+    {
+      className,
+      value,
+      max = 100,
+      variant = "blue",
+      size = "default",
+      showValue = false,
+      label,
+      ...props
+    },
+    ref
+  ) => {
+    const percentage = Math.min(100, Math.max(0, (value / max) * 100))
+
+    return (
+      <div className={cn("w-full space-y-1.5", className)} ref={ref} {...props}>
+        {(label || showValue) && (
+          <div className="flex items-center justify-between text-xs">
+            {label && (
+              <span className="text-zinc-700 dark:text-zinc-300 font-medium">
+                {label}
+              </span>
+            )}
+            {showValue && (
+              <span className="font-mono text-zinc-500 dark:text-zinc-400">
+                {Math.round(percentage)}%
+              </span>
+            )}
+          </div>
+        )}
+        <div
+          role="progressbar"
+          aria-valuenow={value}
+          aria-valuemin={0}
+          aria-valuemax={max}
+          className={cn(
+            "w-full overflow-hidden rounded-full bg-zinc-200/80 dark:bg-zinc-800",
+            size === "sm" && "h-1.5",
+            size === "default" && "h-2",
+            size === "lg" && "h-3"
+          )}
+        >
+          <div
+            className={cn(
+              "h-full rounded-full transition-all duration-300",
+              barColorMap[variant]
+            )}
+            style={{ width: `${percentage}%` }}
+          />
+        </div>
+      </div>
+    )
+  }
+)
+Progress.displayName = "Progress"
+
+export interface CircularProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+  value: number
+  size?: number
+  strokeWidth?: number
+  variant?: "blue" | "indigo" | "emerald" | "amber" | "rose"
+}
+
+const strokeColorMap: Record<NonNullable<CircularProgressProps["variant"]>, string> = {
+  blue: "text-blue-600 dark:text-blue-500",
+  indigo: "text-blue-600 dark:text-blue-500",
+  emerald: "text-emerald-600 dark:text-emerald-500",
+  amber: "text-amber-500",
+  rose: "text-rose-600 dark:text-rose-500",
+}
+
+const CircularProgress: React.FC<CircularProgressProps> = ({
+  value,
+  size = 48,
+  strokeWidth = 4,
+  variant = "blue",
+  className,
+  ...props
+}) => {
+  const clamped = Math.min(100, Math.max(0, value))
+  const radius = (size - strokeWidth) / 2
+  const circumference = 2 * Math.PI * radius
+  const offset = circumference - (clamped / 100) * circumference
+
+  return (
+    <div
+      className={cn("relative inline-flex items-center justify-center", className)}
+      style={{ width: size, height: size }}
+      {...props}
+    >
+      <svg width={size} height={size} className="-rotate-90 transform">
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          fill="transparent"
+          stroke="currentColor"
+          strokeWidth={strokeWidth}
+          className="text-zinc-200 dark:text-zinc-800"
+        />
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          fill="transparent"
+          stroke="currentColor"
+          strokeWidth={strokeWidth}
+          strokeDasharray={circumference}
+          strokeDashoffset={offset}
+          strokeLinecap="round"
+          className={cn("transition-all duration-300", strokeColorMap[variant])}
+        />
+      </svg>
+      <span className="absolute font-mono text-[11px] font-medium text-zinc-800 dark:text-zinc-200">
+        {Math.round(clamped)}%
+      </span>
+    </div>
+  )
+}
+CircularProgress.displayName = "CircularProgress"
+
+export { Progress, CircularProgress }

package/src/primitives/radio-group.tsx

@@ -0,0 +1,63 @@
+import * as React from "react"
+import { cn } from "../utils/cn"
+
+export interface RadioGroupOption {
+  value: string
+  label: string
+  description?: string
+}
+
+export interface RadioGroupProps {
+  options: RadioGroupOption[]
+  value: string
+  onValueChange: (val: string) => void
+  className?: string
+}
+
+export const RadioGroup: React.FC<RadioGroupProps> = ({
+  options,
+  value,
+  onValueChange,
+  className,
+}) => (
+  <div role="radiogroup" className={cn("space-y-2", className)}>
+    {options.map((opt) => {
+      const checked = opt.value === value
+      return (
+        <label
+          key={opt.value}
+          onClick={() => onValueChange(opt.value)}
+          className={cn(
+            "flex items-start gap-3 rounded-xl border p-3.5 transition-colors cursor-pointer",
+            checked
+              ? "border-blue-500/50 bg-blue-50/40 dark:border-blue-500/40 dark:bg-blue-500/10"
+              : "border-zinc-200 bg-white hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900/60 dark:hover:bg-zinc-800/50"
+          )}
+        >
+          <span
+            className={cn(
+              "mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border",
+              checked
+                ? "border-blue-600 bg-blue-600 text-white"
+                : "border-zinc-300 dark:border-zinc-700"
+            )}
+          >
+            {checked && <span className="h-1.5 w-1.5 rounded-full bg-white" />}
+          </span>
+          <div className="space-y-0.5 text-xs">
+            <div className="font-medium text-zinc-900 dark:text-zinc-100">
+              {opt.label}
+            </div>
+            {opt.description && (
+              <div className="text-zinc-500 dark:text-zinc-400">
+                {opt.description}
+              </div>
+            )}
+          </div>
+        </label>
+      )
+    })}
+  </div>
+)
+RadioGroup.displayName = "RadioGroup"
+

package/src/primitives/select.tsx

@@ -0,0 +1,207 @@
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+import { Check, ChevronDown, Search, ChevronsUpDown } from "lucide-react"
+import { cn } from "../utils/cn"
+
+const Select = SelectPrimitive.Root
+const SelectGroup = SelectPrimitive.Group
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-9 w-full items-center justify-between gap-2 rounded-lg border border-zinc-200 bg-white px-3 py-2 text-xs text-zinc-900 placeholder:text-zinc-400 transition-colors hover:bg-zinc-50 focus:outline-none focus:ring-2 focus:ring-blue-500/20 disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100 dark:hover:bg-zinc-800/60 [&>span]:line-clamp-1 cursor-pointer",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-3.5 w-3.5 text-zinc-400 shrink-0" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-72 min-w-[8rem] overflow-hidden rounded-xl border border-zinc-200 bg-white text-zinc-900 shadow-lg dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-pointer select-none items-center rounded-lg py-1.5 pl-8 pr-2.5 text-xs text-zinc-700 outline-none transition-colors focus:bg-zinc-100 focus:text-zinc-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:text-zinc-200 dark:focus:bg-zinc-800 dark:focus:text-white",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2.5 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+export interface ComboboxOption {
+  value: string
+  label: string
+  badge?: string
+}
+
+export interface ComboboxProps {
+  options: ComboboxOption[]
+  value: string
+  onValueChange: (value: string) => void
+  placeholder?: string
+  searchPlaceholder?: string
+  className?: string
+}
+
+const Combobox: React.FC<ComboboxProps> = ({
+  options,
+  value,
+  onValueChange,
+  placeholder = "Select option...",
+  searchPlaceholder = "Search...",
+  className,
+}) => {
+  const [open, setOpen] = React.useState(false)
+  const [query, setQuery] = React.useState("")
+
+  const selected = options.find((o) => o.value === value)
+  const filtered = React.useMemo(() => {
+    if (!query.trim()) return options
+    return options.filter((o) =>
+      o.label.toLowerCase().includes(query.toLowerCase())
+    )
+  }, [options, query])
+
+  return (
+    <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>
+      <PopoverPrimitive.Trigger asChild>
+        <button
+          type="button"
+          className={cn(
+            "flex h-9 w-full items-center justify-between gap-2 rounded-lg border border-zinc-200 bg-white px-3 py-2 text-xs text-zinc-900 transition-colors hover:bg-zinc-50 focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100 dark:hover:bg-zinc-800/60 cursor-pointer",
+            className
+          )}
+        >
+          <span className={cn("truncate", !selected && "text-zinc-400")}>
+            {selected ? selected.label : placeholder}
+          </span>
+          <ChevronsUpDown className="h-3.5 w-3.5 text-zinc-400 shrink-0" />
+        </button>
+      </PopoverPrimitive.Trigger>
+      <PopoverPrimitive.Portal>
+        <PopoverPrimitive.Content
+          align="start"
+          sideOffset={6}
+          className="z-50 w-64 rounded-xl border border-zinc-200 bg-white p-1.5 text-zinc-900 shadow-lg focus:outline-none dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100"
+        >
+          <div className="flex items-center gap-2 border-b border-zinc-200 px-2.5 py-1.5 dark:border-zinc-800">
+            <Search className="h-3.5 w-3.5 text-zinc-400" />
+            <input
+              type="text"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder={searchPlaceholder}
+              className="w-full bg-transparent text-xs text-zinc-900 placeholder:text-zinc-400 focus:outline-none dark:text-zinc-100"
+            />
+          </div>
+          <div className="mt-1 max-h-52 overflow-y-auto space-y-0.5">
+            {filtered.length === 0 ? (
+              <div className="py-4 text-center text-xs text-zinc-400">
+                No matching items found.
+              </div>
+            ) : (
+              filtered.map((opt) => {
+                const isSelected = opt.value === value
+                return (
+                  <button
+                    key={opt.value}
+                    type="button"
+                    onClick={() => {
+                      onValueChange(opt.value)
+                      setOpen(false)
+                      setQuery("")
+                    }}
+                    className={cn(
+                      "flex w-full items-center justify-between rounded-lg px-2.5 py-1.5 text-xs transition-colors cursor-pointer",
+                      isSelected
+                        ? "bg-blue-50 text-blue-700 dark:bg-blue-500/15 dark:text-blue-300"
+                        : "text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800"
+                    )}
+                  >
+                    <span className="flex items-center gap-2">
+                      <Check
+                        className={cn(
+                          "h-3.5 w-3.5",
+                          isSelected ? "opacity-100 text-blue-600 dark:text-blue-400" : "opacity-0"
+                        )}
+                      />
+                      {opt.label}
+                    </span>
+                    {opt.badge && (
+                      <span className="rounded bg-zinc-100 px-1.5 py-0.5 font-mono text-[10px] text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400">
+                        {opt.badge}
+                      </span>
+                    )}
+                  </button>
+                )
+              })
+            )}
+          </div>
+        </PopoverPrimitive.Content>
+      </PopoverPrimitive.Portal>
+    </PopoverPrimitive.Root>
+  )
+}
+Combobox.displayName = "Combobox"
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectItem,
+  Combobox,
+}

package/src/primitives/skeleton.tsx

@@ -0,0 +1,61 @@
+import * as React from "react"
+import { cn } from "../utils/cn"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        "animate-pulse rounded-md bg-zinc-200/80 dark:bg-zinc-800",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardSkeleton({ className }: { className?: string }) {
+  return (
+    <div
+      className={cn(
+        "rounded-xl border border-zinc-200 bg-white p-5 space-y-4 dark:border-zinc-800 dark:bg-zinc-900",
+        className
+      )}
+    >
+      <div className="flex items-center justify-between">
+        <Skeleton className="h-4 w-28" />
+        <Skeleton className="h-5 w-14 rounded-full" />
+      </div>
+      <Skeleton className="h-8 w-36" />
+      <div className="space-y-2 pt-2">
+        <Skeleton className="h-2.5 w-full" />
+        <Skeleton className="h-2.5 w-4/5" />
+      </div>
+    </div>
+  )
+}
+
+function TableRowSkeleton({ rows = 4 }: { rows?: number }) {
+  return (
+    <div className="w-full rounded-xl border border-zinc-200 bg-white divide-y divide-zinc-200 dark:border-zinc-800 dark:bg-zinc-900 dark:divide-zinc-800">
+      {Array.from({ length: rows }).map((_, idx) => (
+        <div key={idx} className="flex items-center justify-between px-4 py-3 gap-4">
+          <div className="flex items-center gap-3">
+            <Skeleton className="h-8 w-8 rounded-full" />
+            <div className="space-y-1.5">
+              <Skeleton className="h-3.5 w-32" />
+              <Skeleton className="h-2.5 w-24" />
+            </div>
+          </div>
+          <Skeleton className="h-5 w-16 rounded-md" />
+          <Skeleton className="h-3.5 w-20" />
+          <Skeleton className="h-7 w-7 rounded-md" />
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export { Skeleton, CardSkeleton, TableRowSkeleton }

package/src/primitives/slider.tsx

@@ -0,0 +1,44 @@
+import * as React from "react"
+import { cn } from "../utils/cn"
+
+export interface SliderProps {
+  value: number
+  min?: number
+  max?: number
+  step?: number
+  onValueChange?: (val: number) => void
+  label?: string
+  className?: string
+}
+
+export const Slider: React.FC<SliderProps> = ({
+  value,
+  min = 0,
+  max = 100,
+  step = 1,
+  onValueChange,
+  label,
+  className,
+}) => (
+  <div className={cn("space-y-2", className)}>
+    {label && (
+      <div className="flex items-center justify-between text-xs">
+        <span className="font-medium text-zinc-700 dark:text-zinc-300">
+          {label}
+        </span>
+        <span className="font-mono text-zinc-500">{value}%</span>
+      </div>
+    )}
+    <input
+      type="range"
+      min={min}
+      max={max}
+      step={step}
+      value={value}
+      onChange={(e) => onValueChange?.(Number(e.target.value))}
+      className="h-1.5 w-full cursor-pointer appearance-none rounded-lg bg-zinc-200 accent-blue-600 dark:bg-zinc-800"
+    />
+  </div>
+)
+Slider.displayName = "Slider"
+

package/src/primitives/switch.tsx

@@ -0,0 +1,146 @@
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+import { cn } from "../utils/cn"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/30 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-blue-600 data-[state=unchecked]:bg-zinc-200 dark:data-[state=unchecked]:bg-zinc-800",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-4 w-4 rounded-full bg-white shadow-xs ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0.5"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded border border-zinc-300 bg-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/30 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-blue-600 data-[state=checked]:border-blue-600 data-[state=checked]:text-white dark:border-zinc-700 dark:bg-zinc-900 dark:data-[state=checked]:bg-blue-600 cursor-pointer",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-3 w-3 stroke-[2.5]" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export interface RadioGroupOption {
+  value: string
+  label: string
+  description?: string
+}
+
+export interface RadioGroupProps {
+  options: RadioGroupOption[]
+  value: string
+  onValueChange: (val: string) => void
+  className?: string
+}
+
+const RadioGroup: React.FC<RadioGroupProps> = ({
+  options,
+  value,
+  onValueChange,
+  className,
+}) => (
+  <div role="radiogroup" className={cn("space-y-2", className)}>
+    {options.map((opt) => {
+      const checked = opt.value === value
+      return (
+        <label
+          key={opt.value}
+          onClick={() => onValueChange(opt.value)}
+          className={cn(
+            "flex items-start gap-3 rounded-xl border p-3.5 transition-colors cursor-pointer",
+            checked
+              ? "border-blue-500/50 bg-blue-50/40 dark:border-blue-500/40 dark:bg-blue-500/10"
+              : "border-zinc-200 bg-white hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900/60 dark:hover:bg-zinc-800/50"
+          )}
+        >
+          <span
+            className={cn(
+              "mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border",
+              checked
+                ? "border-blue-600 bg-blue-600 text-white"
+                : "border-zinc-300 dark:border-zinc-700"
+            )}
+          >
+            {checked && <span className="h-1.5 w-1.5 rounded-full bg-white" />}
+          </span>
+          <div className="space-y-0.5 text-xs">
+            <div className="font-medium text-zinc-900 dark:text-zinc-100">
+              {opt.label}
+            </div>
+            {opt.description && (
+              <div className="text-zinc-500 dark:text-zinc-400">
+                {opt.description}
+              </div>
+            )}
+          </div>
+        </label>
+      )
+    })}
+  </div>
+)
+
+export interface SliderProps {
+  value: number
+  min?: number
+  max?: number
+  step?: number
+  onValueChange?: (val: number) => void
+  label?: string
+  className?: string
+}
+
+const Slider: React.FC<SliderProps> = ({
+  value,
+  min = 0,
+  max = 100,
+  step = 1,
+  onValueChange,
+  label,
+  className,
+}) => (
+  <div className={cn("space-y-2", className)}>
+    {label && (
+      <div className="flex items-center justify-between text-xs">
+        <span className="font-medium text-zinc-700 dark:text-zinc-300">{label}</span>
+        <span className="font-mono text-zinc-500">{value}%</span>
+      </div>
+    )}
+    <input
+      type="range"
+      min={min}
+      max={max}
+      step={step}
+      value={value}
+      onChange={(e) => onValueChange?.(Number(e.target.value))}
+      className="h-1.5 w-full cursor-pointer appearance-none rounded-lg bg-zinc-200 accent-blue-600 dark:bg-zinc-800"
+    />
+  </div>
+)
+
+export { Switch, Checkbox, RadioGroup, Slider }