@spatika/react 1.1.0 → 1.2.0

package/src/primitives/Snackbar.tsx

@@ -0,0 +1,83 @@
+import * as React from "react";
+import { X } from "lucide-react";
+import { Portal } from "../lib/portal";
+import { cn } from "../lib/cn";
+import { OVERLAY_Z_INDEX, fixedLayerStyle } from "../lib/overlay-stack";
+import { IconButton } from "./IconButton";
+
+export type SnackbarOrigin = {
+  vertical?: "top" | "bottom";
+  horizontal?: "left" | "center" | "right";
+};
+
+export type SnackbarProps = Omit<React.ComponentPropsWithoutRef<"div">, "content"> & {
+  open?: boolean;
+  onClose?: () => void;
+  autoHideDuration?: number | null;
+  message?: React.ReactNode;
+  action?: React.ReactNode;
+  anchorOrigin?: SnackbarOrigin;
+};
+
+const originClass = {
+  "top-left": "top-4 left-4",
+  "top-center": "top-4 left-1/2 -translate-x-1/2",
+  "top-right": "top-4 right-4",
+  "bottom-left": "bottom-4 left-4",
+  "bottom-center": "bottom-4 left-1/2 -translate-x-1/2",
+  "bottom-right": "bottom-4 right-4",
+} as const;
+
+function Snackbar({
+  open = false,
+  onClose,
+  autoHideDuration = 4000,
+  message,
+  action,
+  anchorOrigin = { vertical: "bottom", horizontal: "left" },
+  className,
+  children,
+  ...props
+}: SnackbarProps) {
+  React.useEffect(() => {
+    if (!open || !autoHideDuration || !onClose) return;
+    const id = window.setTimeout(onClose, autoHideDuration);
+    return () => window.clearTimeout(id);
+  }, [open, autoHideDuration, onClose]);
+
+  if (!open) return null;
+
+  const key = `${anchorOrigin.vertical ?? "bottom"}-${anchorOrigin.horizontal ?? "left"}` as keyof typeof originClass;
+
+  return (
+    <Portal>
+      <div
+        role="status"
+        data-slot="snackbar"
+        className={cn(
+          "glass-menu fixed z-[11000] flex max-w-sm items-center gap-3 rounded-xl border border-border/50 px-4 py-3 text-sm font-medium shadow-xl",
+          originClass[key],
+          className,
+        )}
+        style={fixedLayerStyle(OVERLAY_Z_INDEX.modal)}
+        {...props}
+      >
+        <div className="min-w-0 flex-1">{message ?? children}</div>
+        {action}
+        {onClose ? (
+          <IconButton aria-label="Close" size="sm" onClick={onClose}>
+            <X className="size-3.5" />
+          </IconButton>
+        ) : null}
+      </div>
+    </Portal>
+  );
+}
+Snackbar.displayName = "Snackbar";
+
+function SnackbarContent({ className, ...props }: React.ComponentPropsWithoutRef<"div">) {
+  return <div data-slot="snackbar-content" className={cn("text-sm font-medium", className)} {...props} />;
+}
+SnackbarContent.displayName = "SnackbarContent";
+
+export { Snackbar, SnackbarContent };

package/src/primitives/SpeedDial.tsx

@@ -0,0 +1,110 @@
+import * as React from "react";
+import { Plus, X } from "lucide-react";
+import { useControllableState } from "../lib/use-controllable-state";
+import { cn } from "../lib/cn";
+import { Backdrop } from "./Backdrop";
+import { Fab } from "./Fab";
+
+export type SpeedDialProps = Omit<React.ComponentPropsWithoutRef<"div">, "onChange"> & {
+  ariaLabel: string;
+  icon?: React.ReactNode;
+  openIcon?: React.ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  direction?: "up" | "down" | "left" | "right";
+  /** Hide the dimmer behind actions. */
+  hideBackdrop?: boolean;
+};
+
+const directionClass = {
+  up: "bottom-full mb-3 flex-col-reverse",
+  down: "top-full mt-3 flex-col",
+  left: "right-full mr-3 flex-row-reverse",
+  right: "left-full ml-3 flex-row",
+} as const;
+
+function SpeedDial({
+  ariaLabel,
+  icon,
+  openIcon,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  direction = "up",
+  hideBackdrop = false,
+  className,
+  children,
+  ...props
+}: SpeedDialProps) {
+  const [open = false, setOpen] = useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpen,
+    onChange: onOpenChange,
+  });
+
+  return (
+    <div
+      data-slot="speed-dial"
+      data-open={open ? "" : undefined}
+      className={cn("relative inline-flex", className)}
+      {...props}
+    >
+      {!hideBackdrop ? (
+        <Backdrop open={open} invisible onClick={() => setOpen(false)} />
+      ) : null}
+      <div
+        className={cn(
+          "absolute z-10 flex items-center gap-3 transition-[opacity,transform] duration-200",
+          directionClass[direction],
+          open ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0",
+        )}
+        role="menu"
+        aria-hidden={!open}
+      >
+        {children}
+      </div>
+      <Fab
+        aria-label={ariaLabel}
+        aria-expanded={open}
+        size="md"
+        onClick={() => setOpen(!open)}
+      >
+        {open ? (openIcon ?? <X className="size-5" />) : (icon ?? <Plus className="size-5" />)}
+      </Fab>
+    </div>
+  );
+}
+SpeedDial.displayName = "SpeedDial";
+
+export type SpeedDialActionProps = React.ComponentPropsWithoutRef<"button"> & {
+  icon: React.ReactNode;
+  tooltipTitle?: React.ReactNode;
+};
+
+function SpeedDialAction({
+  icon,
+  tooltipTitle,
+  className,
+  ...props
+}: SpeedDialActionProps) {
+  return (
+    <button
+      type="button"
+      role="menuitem"
+      data-slot="speed-dial-action"
+      title={typeof tooltipTitle === "string" ? tooltipTitle : undefined}
+      className={cn(
+        "flex size-10 items-center justify-center rounded-full border border-border/50 bg-card text-foreground shadow-md outline-none transition-[transform,box-shadow] duration-150 hover:-translate-y-0.5 hover:shadow-lg focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        className,
+      )}
+      {...props}
+    >
+      <span className="sr-only">{tooltipTitle}</span>
+      {icon}
+    </button>
+  );
+}
+SpeedDialAction.displayName = "SpeedDialAction";
+
+export { SpeedDial, SpeedDialAction };

package/src/primitives/Stack.tsx

@@ -0,0 +1,88 @@
+import * as React from "react";
+import { cn } from "../lib/cn";
+
+const gapClass: Record<number, string> = {
+  0: "gap-0",
+  1: "gap-1",
+  2: "gap-2",
+  3: "gap-3",
+  4: "gap-4",
+  5: "gap-5",
+  6: "gap-6",
+  8: "gap-8",
+  10: "gap-10",
+  12: "gap-12",
+};
+
+export type StackProps = React.ComponentPropsWithoutRef<"div"> & {
+  direction?: "row" | "column" | "row-reverse" | "column-reverse";
+  spacing?: number;
+  align?: "start" | "center" | "end" | "stretch" | "baseline";
+  justify?: "start" | "center" | "end" | "between" | "around" | "evenly";
+  wrap?: boolean;
+  divider?: React.ReactNode;
+};
+
+const directionClass = {
+  row: "flex-row",
+  column: "flex-col",
+  "row-reverse": "flex-row-reverse",
+  "column-reverse": "flex-col-reverse",
+} as const;
+
+const alignClass = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch",
+  baseline: "items-baseline",
+} as const;
+
+const justifyClass = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between",
+  around: "justify-around",
+  evenly: "justify-evenly",
+} as const;
+
+function Stack({
+  direction = "column",
+  spacing = 2,
+  align,
+  justify,
+  wrap = false,
+  divider,
+  className,
+  children,
+  ...props
+}: StackProps) {
+  const items = React.Children.toArray(children).filter(Boolean);
+  const gap = gapClass[spacing] ?? "gap-2";
+
+  return (
+    <div
+      data-slot="stack"
+      className={cn(
+        "flex",
+        directionClass[direction],
+        align && alignClass[align],
+        justify && justifyClass[justify],
+        wrap && "flex-wrap",
+        !divider && gap,
+        className,
+      )}
+      {...props}
+    >
+      {divider
+        ? items.flatMap((child, index) =>
+            index === 0 ? [child] : [divider, child],
+          )
+        : items}
+    </div>
+  );
+}
+Stack.displayName = "Stack";
+
+export { Stack };

package/src/primitives/StarRating.tsx

@@ -1,53 +1,112 @@
 import * as React from "react";
 import { Star } from "lucide-react";
+import { useControllableState } from "../lib/use-controllable-state";
 import { cn } from "../lib/cn";
 
-function StarRating({
-  value,
+export type RatingProps = Omit<React.ComponentPropsWithoutRef<"div">, "onChange" | "defaultValue"> & {
+  value?: number;
+  defaultValue?: number;
+  onChange?: (value: number) => void;
+  max?: number;
+  precision?: 0.5 | 1;
+  readOnly?: boolean;
+  disabled?: boolean;
+  size?: "sm" | "md" | "lg";
+  emptyLabelText?: string;
+};
+
+const sizeClass = {
+  sm: "size-4",
+  md: "size-5",
+  lg: "size-6",
+} as const;
+
+/**
+ * Star rating. `StarRating` is the same component with a required `value`.
+ */
+function Rating({
+  value: valueProp,
+  defaultValue = 0,
   onChange,
   max = 5,
+  precision = 1,
   readOnly = false,
+  disabled = false,
+  size = "md",
+  emptyLabelText = "Rating",
   className,
-}: {
-  value: number;
-  onChange?: (next: number) => void;
-  max?: number;
-  readOnly?: boolean;
-  className?: string;
-}) {
+  ...props
+}: RatingProps) {
+  const [value = 0, setValue] = useControllableState({
+    prop: valueProp,
+    defaultProp: defaultValue,
+    onChange,
+  });
+  const [hover, setHover] = React.useState<number | null>(null);
+  const display = hover ?? value;
+  const locked = readOnly || disabled;
+
   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`}
+      data-slot="rating"
+      role={locked ? "img" : "radiogroup"}
+      aria-label={`${display} of ${max} stars`}
+      className={cn("inline-flex items-center gap-0.5", disabled && "opacity-50", className)}
+      {...props}
     >
       {Array.from({ length: max }, (_, i) => {
         const n = i + 1;
-        const active = n <= value;
+        const fill = Math.min(1, Math.max(0, display - i));
         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)}
+            role={locked ? undefined : "radio"}
+            aria-checked={locked ? undefined : n === Math.ceil(value)}
+            aria-label={`${n} ${emptyLabelText}`}
+            disabled={locked}
+            className={cn("relative rounded p-0.5", locked ? "cursor-default" : "hover:scale-110 active:scale-95")}
+            onMouseEnter={() => {
+              if (!locked) setHover(n);
+            }}
+            onMouseLeave={() => setHover(null)}
+            onClick={() => {
+              if (locked) return;
+              const next = precision === 0.5 && value === n ? n - 0.5 : n;
+              setValue(next);
+            }}
           >
-            <Star
-              className={cn(
-                "size-5",
-                active ? "fill-primary text-primary" : "text-muted-foreground/40",
-              )}
-            />
+            <Star className={cn(sizeClass[size], "text-muted-foreground/35")} />
+            <span
+              className="absolute inset-0.5 overflow-hidden"
+              style={{ width: `${fill * 100}%` }}
+            >
+              <Star className={cn(sizeClass[size], "fill-primary text-primary")} />
+            </span>
           </button>
         );
       })}
     </div>
   );
 }
+Rating.displayName = "Rating";
+
+function StarRating({
+  value,
+  onChange,
+  max = 5,
+  readOnly = false,
+  className,
+}: {
+  value: number;
+  onChange?: (next: number) => void;
+  max?: number;
+  readOnly?: boolean;
+  className?: string;
+}) {
+  return (
+    <Rating value={value} onChange={onChange} max={max} readOnly={readOnly} className={className} />
+  );
+}
 
-export { StarRating };
+export { Rating, StarRating };

package/src/primitives/Stepper.tsx

@@ -0,0 +1,184 @@
+import * as React from "react";
+import { Check } from "lucide-react";
+import { cn } from "../lib/cn";
+
+type StepperContextValue = {
+  activeStep: number;
+  orientation: "horizontal" | "vertical";
+  alternativeLabel: boolean;
+};
+
+const StepperContext = React.createContext<StepperContextValue | null>(null);
+const StepIndexContext = React.createContext(0);
+
+function useStepper(component: string) {
+  const ctx = React.useContext(StepperContext);
+  if (!ctx) throw new Error(`${component} must be used within <Stepper>`);
+  return ctx;
+}
+
+export type StepperProps = React.ComponentPropsWithoutRef<"div"> & {
+  activeStep?: number;
+  orientation?: "horizontal" | "vertical";
+  alternativeLabel?: boolean;
+};
+
+function Stepper({
+  activeStep = 0,
+  orientation = "horizontal",
+  alternativeLabel = false,
+  className,
+  children,
+  ...props
+}: StepperProps) {
+  const steps = React.Children.toArray(children);
+
+  return (
+    <StepperContext.Provider
+      value={{ activeStep, orientation, alternativeLabel }}
+    >
+      <div
+        data-slot="stepper"
+        data-orientation={orientation}
+        className={cn(
+          "flex w-full",
+          orientation === "vertical" ? "flex-col gap-0" : "flex-row items-start",
+          className,
+        )}
+        {...props}
+      >
+        {steps.map((child, index) => (
+          <StepIndexContext.Provider key={index} value={index}>
+            {child}
+            {index < steps.length - 1 ? <StepConnector /> : null}
+          </StepIndexContext.Provider>
+        ))}
+      </div>
+    </StepperContext.Provider>
+  );
+}
+Stepper.displayName = "Stepper";
+
+export type StepProps = React.ComponentPropsWithoutRef<"div"> & {
+  completed?: boolean;
+  disabled?: boolean;
+};
+
+function Step({ completed, disabled, className, children, ...props }: StepProps) {
+  const stepper = useStepper("Step");
+  const index = React.useContext(StepIndexContext);
+  const active = stepper.activeStep === index;
+  const isCompleted = completed ?? index < stepper.activeStep;
+
+  return (
+    <div
+      data-slot="step"
+      data-active={active ? "" : undefined}
+      data-completed={isCompleted ? "" : undefined}
+      data-disabled={disabled ? "" : undefined}
+      className={cn(
+        "flex min-w-0",
+        stepper.orientation === "vertical" ? "flex-col" : "flex-none",
+        stepper.alternativeLabel && "flex-col items-center",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+Step.displayName = "Step";
+
+function StepConnector({ className, ...props }: React.ComponentPropsWithoutRef<"div">) {
+  const stepper = useStepper("StepConnector");
+  const index = React.useContext(StepIndexContext);
+  const completed = index < stepper.activeStep;
+
+  return (
+    <div
+      data-slot="step-connector"
+      aria-hidden
+      className={cn(
+        stepper.orientation === "vertical"
+          ? "ml-[15px] h-6 w-px shrink-0"
+          : "mx-2 mt-[15px] h-px min-w-4 flex-1",
+        completed ? "bg-primary" : "bg-border",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+StepConnector.displayName = "StepConnector";
+
+export type StepLabelProps = React.ComponentPropsWithoutRef<"div"> & {
+  optional?: React.ReactNode;
+  error?: boolean;
+};
+
+function StepLabel({ className, optional, error, children, ...props }: StepLabelProps) {
+  const stepper = useStepper("StepLabel");
+  const index = React.useContext(StepIndexContext);
+  const active = stepper.activeStep === index;
+  const completed = index < stepper.activeStep;
+
+  return (
+    <div
+      data-slot="step-label"
+      className={cn(
+        "flex items-center gap-3",
+        stepper.alternativeLabel && "flex-col gap-2 text-center",
+        className,
+      )}
+      {...props}
+    >
+      <span
+        className={cn(
+          "flex size-8 shrink-0 items-center justify-center rounded-full text-xs font-black",
+          completed && "bg-primary text-primary-foreground",
+          active && !completed && "bg-primary text-primary-foreground ring-4 ring-primary/20",
+          !active && !completed && "border border-border/60 bg-muted/40 text-muted-foreground",
+          error && "bg-destructive text-white ring-0",
+        )}
+      >
+        {completed ? <Check className="size-4" /> : index + 1}
+      </span>
+      <div className="min-w-0">
+        <div
+          className={cn(
+            "text-sm font-bold",
+            active || completed ? "text-foreground" : "text-muted-foreground",
+            error && "text-destructive",
+          )}
+        >
+          {children}
+        </div>
+        {optional ? (
+          <div className="text-xs font-medium text-muted-foreground">{optional}</div>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+StepLabel.displayName = "StepLabel";
+
+function StepContent({ className, children, ...props }: React.ComponentPropsWithoutRef<"div">) {
+  const stepper = useStepper("StepContent");
+  const index = React.useContext(StepIndexContext);
+  if (stepper.orientation !== "vertical") return null;
+  if (stepper.activeStep !== index) return null;
+
+  return (
+    <div
+      data-slot="step-content"
+      className={cn("ml-4 border-l border-border/40 py-3 pl-7 text-sm", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+StepContent.displayName = "StepContent";
+
+export { Stepper, Step, StepLabel, StepContent, StepConnector };

package/src/primitives/TablePagination.tsx

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { cn } from "../lib/cn";
+import { NativeSelect } from "./NativeSelect";
+import { Pagination } from "../composites/Pagination";
+
+export type TablePaginationProps = {
+  count: number;
+  page: number;
+  onPageChange: (page: number) => void;
+  rowsPerPage?: number;
+  onRowsPerPageChange?: (rows: number) => void;
+  rowsPerPageOptions?: number[];
+  className?: string;
+};
+
+function TablePagination({
+  count,
+  page,
+  onPageChange,
+  rowsPerPage = 10,
+  onRowsPerPageChange,
+  rowsPerPageOptions = [5, 10, 25],
+  className,
+}: TablePaginationProps) {
+  const pageCount = Math.max(1, Math.ceil(count / rowsPerPage));
+  const from = count === 0 ? 0 : page * rowsPerPage + 1;
+  const to = Math.min(count, (page + 1) * rowsPerPage);
+
+  return (
+    <div
+      data-slot="table-pagination"
+      className={cn("flex flex-wrap items-center justify-end gap-4 px-2 py-2 text-sm", className)}
+    >
+      {onRowsPerPageChange ? (
+        <label className="flex items-center gap-2 text-xs font-bold text-muted-foreground">
+          Rows
+          <NativeSelect
+            value={String(rowsPerPage)}
+            onChange={(event) => onRowsPerPageChange(Number(event.target.value))}
+          >
+            {rowsPerPageOptions.map((n) => (
+              <option key={n} value={n}>
+                {n}
+              </option>
+            ))}
+          </NativeSelect>
+        </label>
+      ) : null}
+      <span className="text-xs font-medium text-muted-foreground">
+        {from}–{to} of {count}
+      </span>
+      <Pagination page={page + 1} pageCount={pageCount} onPageChange={(next) => onPageChange(next - 1)} />
+    </div>
+  );
+}
+TablePagination.displayName = "TablePagination";
+
+export { TablePagination };