@spatika/react 1.0.0

package/src/primitives/Skeleton.tsx

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { cn } from "../lib/cn";
+
+const Skeleton = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="skeleton"
+      className={cn("bg-muted/40 animate-shimmer rounded-md", className)}
+      {...props}
+    />
+  ),
+);
+Skeleton.displayName = "Skeleton";
+
+export { Skeleton };

package/src/primitives/Slider.tsx

@@ -0,0 +1,97 @@
+import * as React from "react";
+import { useControllableState } from "../lib/use-controllable-state";
+import { cn } from "../lib/cn";
+
+type SliderProps = Omit<
+  React.ComponentPropsWithoutRef<"div">,
+  "defaultValue" | "onChange"
+> & {
+  value?: number[];
+  defaultValue?: number[];
+  onValueChange?: (value: number[]) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+};
+
+const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
+  (
+    {
+      className,
+      defaultValue,
+      value: valueProp,
+      onValueChange,
+      min = 0,
+      max = 100,
+      step = 1,
+      disabled,
+      ...props
+    },
+    ref,
+  ) => {
+    const [value, setValue] = useControllableState<number[]>({
+      prop: valueProp,
+      defaultProp: defaultValue ?? [min],
+      onChange: onValueChange,
+    });
+
+    const values = value ?? [min];
+    const primary = values[0] ?? min;
+    const pct = ((primary - min) / (max - min || 1)) * 100;
+
+    const commit = (next: number) => {
+      const clamped = Math.min(max, Math.max(min, next));
+      const stepped = Math.round(clamped / step) * step;
+      const rounded = Number(stepped.toFixed(6));
+      setValue([rounded]);
+    };
+
+    return (
+      <div
+        ref={ref}
+        data-slot="slider"
+        data-disabled={disabled ? "" : undefined}
+        className={cn(
+          "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50",
+          className,
+        )}
+        {...props}
+      >
+        <div
+          data-slot="slider-track"
+          className="bg-muted relative h-4 w-full grow overflow-hidden rounded-full"
+        >
+          <div
+            data-slot="slider-range"
+            className="bg-primary absolute h-full"
+            style={{ left: 0, width: `${pct}%` }}
+          />
+        </div>
+        <input
+          type="range"
+          min={min}
+          max={max}
+          step={step}
+          disabled={disabled}
+          value={primary}
+          aria-valuemin={min}
+          aria-valuemax={max}
+          aria-valuenow={primary}
+          data-slot="slider-thumb"
+          className="absolute inset-0 z-10 h-full w-full cursor-pointer opacity-0 disabled:pointer-events-none"
+          onChange={(event) => commit(Number(event.target.value))}
+        />
+        <span
+          aria-hidden
+          data-slot="slider-thumb"
+          className="border-primary bg-background ring-ring/50 pointer-events-none absolute block size-4 shrink-0 rounded-full border shadow-sm hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+          style={{ left: `calc(${pct}% - 0.5rem)` }}
+        />
+      </div>
+    );
+  },
+);
+Slider.displayName = "Slider";
+
+export { Slider };

package/src/primitives/Spinner.tsx

@@ -0,0 +1,21 @@
+import { cn } from "../lib/cn";
+
+function Spinner({ className, size = "md" }: { className?: string; size?: "sm" | "md" | "lg" }) {
+  const sizeClass = { sm: "size-4 border-2", md: "size-6 border-2", lg: "size-8 border-[3px]" }[
+    size
+  ];
+  return (
+    <div
+      role="status"
+      aria-label="Loading"
+      data-slot="spinner"
+      className={cn(
+        "inline-block animate-spin rounded-full border-primary/30 border-t-primary",
+        sizeClass,
+        className,
+      )}
+    />
+  );
+}
+
+export { Spinner };

package/src/primitives/StarRating.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { Star } from "lucide-react";
+import { cn } from "../lib/cn";
+
+function StarRating({
+  value,
+  onChange,
+  max = 5,
+  readOnly = false,
+  className,
+}: {
+  value: number;
+  onChange?: (next: number) => void;
+  max?: number;
+  readOnly?: boolean;
+  className?: string;
+}) {
+  return (
+    <div
+      data-slot="star-rating"
+      className={cn("inline-flex items-center gap-0.5", className)}
+      role={readOnly ? "img" : "group"}
+      aria-label={`${value} of ${max} stars`}
+    >
+      {Array.from({ length: max }, (_, i) => {
+        const n = i + 1;
+        const active = n <= value;
+        return (
+          <button
+            key={n}
+            type="button"
+            disabled={readOnly}
+            aria-label={`${n} star`}
+            className={cn(
+              "rounded p-0.5 transition-colors",
+              readOnly ? "cursor-default" : "hover:scale-110 active:scale-95",
+            )}
+            onClick={() => onChange?.(n)}
+          >
+            <Star
+              className={cn(
+                "size-5",
+                active ? "fill-primary text-primary" : "text-muted-foreground/40",
+              )}
+            />
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+export { StarRating };

package/src/primitives/Switch.tsx

@@ -0,0 +1,68 @@
+import * as React from "react";
+import { useControllableState } from "../lib/use-controllable-state";
+import { cn } from "../lib/cn";
+
+type SwitchProps = Omit<
+  React.ComponentPropsWithoutRef<"button">,
+  "onChange" | "value"
+> & {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+};
+
+const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
+  (
+    {
+      className,
+      checked: checkedProp,
+      defaultChecked,
+      onCheckedChange,
+      disabled,
+      onClick,
+      ...props
+    },
+    ref,
+  ) => {
+    const [checked, setChecked] = useControllableState<boolean>({
+      prop: checkedProp,
+      defaultProp: defaultChecked ?? false,
+      onChange: onCheckedChange,
+    });
+
+    const isChecked = !!checked;
+
+    return (
+      <button
+        type="button"
+        role="switch"
+        aria-checked={isChecked}
+        data-state={isChecked ? "checked" : "unchecked"}
+        data-slot="switch"
+        disabled={disabled}
+        ref={ref}
+        className={cn(
+          "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-switch-background focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        {...props}
+        onClick={(event) => {
+          onClick?.(event);
+          if (event.defaultPrevented || disabled) return;
+          setChecked(!isChecked);
+        }}
+      >
+        <span
+          data-slot="switch-thumb"
+          data-state={isChecked ? "checked" : "unchecked"}
+          className={cn(
+            "bg-card dark:data-[state=unchecked]:bg-card-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0",
+          )}
+        />
+      </button>
+    );
+  },
+);
+Switch.displayName = "Switch";
+
+export { Switch };

package/src/primitives/Table.tsx

@@ -0,0 +1,134 @@
+import * as React from "react";
+import { cn } from "../lib/cn";
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.ComponentProps<"table"> & { containerClassName?: string }
+>(({ className, containerClassName, ...props }, ref) => (
+  <div
+    data-slot="table-container"
+    className={cn("relative w-full overflow-x-auto", containerClassName)}
+  >
+    <table
+      ref={ref}
+      data-slot="table"
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+));
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.ComponentProps<"thead">
+>(({ className, ...props }, ref) => (
+  <thead
+    ref={ref}
+    data-slot="table-header"
+    className={cn("[&_tr]:border-b", className)}
+    {...props}
+  />
+));
+TableHeader.displayName = "TableHeader";
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.ComponentProps<"tbody">
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    data-slot="table-body"
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+));
+TableBody.displayName = "TableBody";
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.ComponentProps<"tfoot">
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    data-slot="table-footer"
+    className={cn(
+      "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+      className,
+    )}
+    {...props}
+  />
+));
+TableFooter.displayName = "TableFooter";
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.ComponentProps<"tr">
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    data-slot="table-row"
+    className={cn(
+      "hover:bg-muted/50 data-[state=selected]:bg-muted border-b border-white/45 dark:border-white/12 transition-colors",
+      className,
+    )}
+    {...props}
+  />
+));
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ComponentProps<"th">
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    data-slot="table-head"
+    className={cn(
+      "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className,
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.ComponentProps<"td">
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    data-slot="table-cell"
+    className={cn(
+      "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className,
+    )}
+    {...props}
+  />
+));
+TableCell.displayName = "TableCell";
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.ComponentProps<"caption">
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    data-slot="table-caption"
+    className={cn("text-muted-foreground mt-4 text-sm", className)}
+    {...props}
+  />
+));
+TableCaption.displayName = "TableCaption";
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};

package/src/primitives/Tabs.tsx

@@ -0,0 +1,97 @@
+import * as React from "react";
+import { cn } from "../lib/cn";
+
+type TabsContextValue = {
+  value: string;
+  setValue: (v: string) => void;
+};
+
+const TabsContext = React.createContext<TabsContextValue | null>(null);
+
+function Tabs({
+  value,
+  defaultValue,
+  onValueChange,
+  className,
+  children,
+}: {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (v: string) => void;
+  className?: string;
+  children: React.ReactNode;
+}) {
+  const [internal, setInternal] = React.useState(defaultValue ?? "");
+  const current = value ?? internal;
+  const setValue = (v: string) => {
+    setInternal(v);
+    onValueChange?.(v);
+  };
+  return (
+    <TabsContext.Provider value={{ value: current, setValue }}>
+      <div data-slot="tabs" className={cn("w-full", className)}>
+        {children}
+      </div>
+    </TabsContext.Provider>
+  );
+}
+
+function TabsList({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="tabs-list"
+      role="tablist"
+      className={cn(
+        "inline-flex h-10 items-center gap-1 rounded-xl border border-border/50 bg-muted/40 p-1",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsTrigger({
+  value,
+  className,
+  ...props
+}: React.ComponentProps<"button"> & { value: string }) {
+  const ctx = React.useContext(TabsContext);
+  const active = ctx?.value === value;
+  return (
+    <button
+      type="button"
+      role="tab"
+      aria-selected={active}
+      data-slot="tabs-trigger"
+      data-state={active ? "active" : "inactive"}
+      className={cn(
+        "inline-flex min-h-8 flex-1 items-center justify-center rounded-lg px-3 text-sm font-bold transition-colors",
+        active
+          ? "bg-background text-foreground shadow-sm"
+          : "text-muted-foreground hover:text-foreground",
+        className,
+      )}
+      onClick={() => ctx?.setValue(value)}
+      {...props}
+    />
+  );
+}
+
+function TabsContent({
+  value,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & { value: string }) {
+  const ctx = React.useContext(TabsContext);
+  if (ctx?.value !== value) return null;
+  return (
+    <div
+      data-slot="tabs-content"
+      role="tabpanel"
+      className={cn("mt-3 outline-none", className)}
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/src/primitives/Textarea.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { cn } from "../lib/cn";
+
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<"textarea">
+>(({ className, ...props }, ref) => (
+  <textarea
+    ref={ref}
+    data-slot="textarea"
+    className={cn(
+      "resize-none border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex min-h-16 w-full rounded-md border bg-input-background px-3 py-2 text-base transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+      className,
+    )}
+    {...props}
+  />
+));
+Textarea.displayName = "Textarea";
+
+export { Textarea };

package/src/primitives/Tooltip.tsx

@@ -0,0 +1,193 @@
+import * as React from "react";
+import { composeRefs } from "../lib/compose-refs";
+import { Portal } from "../lib/portal";
+import { Slot } from "../lib/slot";
+import { useControllableState } from "../lib/use-controllable-state";
+import {
+  useFloatingPosition,
+  type FloatingSide,
+} from "../lib/use-floating-position";
+import { cn } from "../lib/cn";
+
+type TooltipProviderProps = {
+  children?: React.ReactNode;
+  delayDuration?: number;
+  skipDelayDuration?: number;
+};
+
+const TooltipProviderContext = React.createContext<{ delayDuration: number }>({
+  delayDuration: 200,
+});
+
+const TooltipProvider = ({
+  children,
+  delayDuration = 200,
+}: TooltipProviderProps) => (
+  <TooltipProviderContext.Provider value={{ delayDuration }}>
+    {children}
+  </TooltipProviderContext.Provider>
+);
+TooltipProvider.displayName = "TooltipProvider";
+
+type TooltipContextValue = {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  triggerRef: React.RefObject<HTMLElement | null>;
+  contentRef: React.RefObject<HTMLDivElement | null>;
+  delayDuration: number;
+};
+
+const TooltipContext = React.createContext<TooltipContextValue | null>(null);
+
+function useTooltipContext(component: string) {
+  const ctx = React.useContext(TooltipContext);
+  if (!ctx) {
+    throw new Error(`${component} must be used within <Tooltip>`);
+  }
+  return ctx;
+}
+
+type TooltipProps = {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  delayDuration?: number;
+  children?: React.ReactNode;
+};
+
+const Tooltip = ({
+  open: openProp,
+  defaultOpen,
+  onOpenChange,
+  delayDuration,
+  children,
+}: TooltipProps) => {
+  const provider = React.useContext(TooltipProviderContext);
+  const [open = false, setOpen] = useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpen ?? false,
+    onChange: onOpenChange,
+  });
+  const triggerRef = React.useRef<HTMLElement | null>(null);
+  const contentRef = React.useRef<HTMLDivElement | null>(null);
+
+  return (
+    <TooltipProvider>
+      <TooltipContext.Provider
+        value={{
+          open,
+          setOpen: (next) => setOpen(next),
+          triggerRef,
+          contentRef,
+          delayDuration: delayDuration ?? provider.delayDuration,
+        }}
+      >
+        <span data-slot="tooltip">{children}</span>
+      </TooltipContext.Provider>
+    </TooltipProvider>
+  );
+};
+Tooltip.displayName = "Tooltip";
+
+const TooltipTrigger = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentPropsWithoutRef<"button"> & { asChild?: boolean }
+>(({ asChild = false, onMouseEnter, onMouseLeave, onFocus, onBlur, ...props }, ref) => {
+  const { setOpen, triggerRef, delayDuration } = useTooltipContext("TooltipTrigger");
+  const Comp = asChild ? Slot : "button";
+  const timeoutRef = React.useRef<number | null>(null);
+
+  const clear = () => {
+    if (timeoutRef.current != null) {
+      window.clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  };
+
+  const show = () => {
+    clear();
+    timeoutRef.current = window.setTimeout(() => setOpen(true), delayDuration);
+  };
+
+  const hide = () => {
+    clear();
+    setOpen(false);
+  };
+
+  React.useEffect(() => clear, []);
+
+  return (
+    <Comp
+      ref={composeRefs(ref, triggerRef) as React.Ref<HTMLButtonElement>}
+      type={asChild ? undefined : "button"}
+      data-slot="tooltip-trigger"
+      onMouseEnter={(event: React.MouseEvent<HTMLButtonElement>) => {
+        onMouseEnter?.(event);
+        show();
+      }}
+      onMouseLeave={(event: React.MouseEvent<HTMLButtonElement>) => {
+        onMouseLeave?.(event);
+        hide();
+      }}
+      onFocus={(event: React.FocusEvent<HTMLButtonElement>) => {
+        onFocus?.(event);
+        show();
+      }}
+      onBlur={(event: React.FocusEvent<HTMLButtonElement>) => {
+        onBlur?.(event);
+        hide();
+      }}
+      {...props}
+    />
+  );
+});
+TooltipTrigger.displayName = "TooltipTrigger";
+
+const TooltipContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<"div"> & {
+    side?: FloatingSide;
+    sideOffset?: number;
+  }
+>(({ className, side = "top", sideOffset = 6, children, style, ...props }, ref) => {
+  const { open, triggerRef, contentRef } = useTooltipContext("TooltipContent");
+
+  const position = useFloatingPosition({
+    open,
+    triggerRef,
+    contentRef,
+    side,
+    align: "center",
+    sideOffset,
+  });
+
+  if (!open) return null;
+
+  return (
+    <Portal>
+      <div
+        ref={composeRefs(ref, contentRef)}
+        data-slot="tooltip-content"
+        data-state="open"
+        data-side={position?.side ?? side}
+        role="tooltip"
+        className={cn(
+          "glass-menu z-50 max-w-xs rounded-lg px-3 py-1.5 text-xs font-medium text-foreground",
+          className,
+        )}
+        style={{
+          position: "fixed",
+          top: position?.top ?? -9999,
+          left: position?.left ?? -9999,
+          ...style,
+        }}
+        {...props}
+      >
+        {children}
+      </div>
+    </Portal>
+  );
+});
+TooltipContent.displayName = "TooltipContent";
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };