@spatika/react 1.1.0 → 1.2.0

package/src/primitives/TextField.tsx

@@ -0,0 +1,105 @@
+import * as React from "react";
+import { cn } from "../lib/cn";
+import { Input } from "./Input";
+import { Label } from "./Label";
+import { Textarea } from "./Textarea";
+
+export type TextFieldProps = Omit<React.ComponentPropsWithoutRef<"input">, "size"> & {
+  label?: React.ReactNode;
+  helperText?: React.ReactNode;
+  error?: boolean;
+  multiline?: boolean;
+  rows?: number;
+  fullWidth?: boolean;
+  size?: "sm" | "md";
+};
+
+/**
+ * Labeled input (or textarea) with helper / error copy — MUI TextField analogue.
+ */
+const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
+  (
+    {
+      id,
+      label,
+      helperText,
+      error,
+      multiline,
+      rows = 3,
+      fullWidth,
+      size = "md",
+      className,
+      disabled,
+      required,
+      type,
+      ...props
+    },
+    ref,
+  ) => {
+    const autoId = React.useId();
+    const fieldId = id ?? autoId;
+    const helperId = helperText ? `${fieldId}-helper` : undefined;
+
+    const fieldClass = cn(
+      size === "sm" && "h-8 text-sm",
+      error && "aria-invalid:border-destructive",
+      className,
+    );
+
+    const control = multiline ? (
+      <Textarea
+        id={fieldId}
+        rows={rows}
+        disabled={disabled}
+        required={required}
+        aria-invalid={error || undefined}
+        aria-describedby={helperId}
+        className={cn(fullWidth && "w-full", className)}
+        {...(props as React.ComponentPropsWithoutRef<"textarea">)}
+      />
+    ) : (
+      <Input
+        ref={ref}
+        id={fieldId}
+        type={type}
+        disabled={disabled}
+        required={required}
+        aria-invalid={error || undefined}
+        aria-describedby={helperId}
+        className={cn(fullWidth && "w-full", fieldClass)}
+        {...props}
+      />
+    );
+
+    return (
+      <div
+        data-slot="text-field"
+        data-error={error ? "" : undefined}
+        className={cn("flex flex-col gap-1.5", fullWidth && "w-full")}
+      >
+        {label ? (
+          <Label htmlFor={fieldId}>
+            {label}
+            {required ? <span className="text-destructive">*</span> : null}
+          </Label>
+        ) : null}
+        {control}
+        {helperText ? (
+          <p
+            id={helperId}
+            data-slot="text-field-helper"
+            className={cn(
+              "text-xs font-medium",
+              error ? "text-destructive" : "text-muted-foreground",
+            )}
+          >
+            {helperText}
+          </p>
+        ) : null}
+      </div>
+    );
+  },
+);
+TextField.displayName = "TextField";
+
+export { TextField };

package/src/primitives/TextareaAutosize.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+import { composeRefs } from "../lib/compose-refs";
+import { cn } from "../lib/cn";
+
+export type TextareaAutosizeProps = React.ComponentPropsWithoutRef<"textarea"> & {
+  minRows?: number;
+  maxRows?: number;
+};
+
+const TextareaAutosize = React.forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
+  ({ className, minRows = 2, maxRows, onChange, style, ...props }, ref) => {
+    const inner = React.useRef<HTMLTextAreaElement | null>(null);
+
+    const resize = React.useCallback(() => {
+      const node = inner.current;
+      if (!node) return;
+      node.style.height = "auto";
+      const line = Number.parseFloat(getComputedStyle(node).lineHeight) || 20;
+      const min = minRows * line;
+      const max = maxRows ? maxRows * line : Number.POSITIVE_INFINITY;
+      node.style.height = `${Math.min(max, Math.max(min, node.scrollHeight))}px`;
+    }, [minRows, maxRows]);
+
+    React.useLayoutEffect(() => {
+      resize();
+    });
+
+    return (
+      <textarea
+        ref={composeRefs(ref, inner)}
+        data-slot="textarea-autosize"
+        rows={minRows}
+        className={cn(
+          "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 flex w-full rounded-md border bg-input-background px-3 py-2 text-sm outline-none focus-visible:ring-[3px]",
+          className,
+        )}
+        style={{ overflow: "hidden", resize: "none", ...style }}
+        onChange={(event) => {
+          onChange?.(event);
+          resize();
+        }}
+        {...props}
+      />
+    );
+  },
+);
+TextareaAutosize.displayName = "TextareaAutosize";
+
+export { TextareaAutosize };

package/src/primitives/ToggleButton.tsx

@@ -0,0 +1,148 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { useControllableState } from "../lib/use-controllable-state";
+import { cn } from "../lib/cn";
+
+const toggleButtonVariants = cva(
+  "inline-flex items-center justify-center gap-1.5 border text-sm font-bold outline-none transition-colors focus-visible:z-10 focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-40 [&_svg]:size-4",
+  {
+    variants: {
+      size: {
+        sm: "h-8 px-2.5 text-xs",
+        md: "h-9 px-3",
+        lg: "h-10 px-4",
+      },
+    },
+    defaultVariants: { size: "md" },
+  },
+);
+
+type ToggleGroupContextValue = {
+  exclusive: boolean;
+  value: string | string[] | null;
+  setValue: (value: string) => void;
+  size: NonNullable<VariantProps<typeof toggleButtonVariants>["size"]>;
+  disabled: boolean;
+};
+
+const ToggleGroupContext = React.createContext<ToggleGroupContextValue | null>(null);
+
+export type ToggleButtonGroupProps = Omit<
+  React.ComponentPropsWithoutRef<"div">,
+  "onChange" | "value" | "defaultValue"
+> & {
+  exclusive?: boolean;
+  value?: string | string[] | null;
+  defaultValue?: string | string[] | null;
+  onValueChange?: (value: string | string[] | null) => void;
+  size?: VariantProps<typeof toggleButtonVariants>["size"];
+  disabled?: boolean;
+  orientation?: "horizontal" | "vertical";
+};
+
+function ToggleButtonGroup({
+  exclusive = false,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  size = "md",
+  disabled = false,
+  orientation = "horizontal",
+  className,
+  children,
+  ...props
+}: ToggleButtonGroupProps) {
+  const [value, setValue] = useControllableState<string | string[] | null>({
+    prop: valueProp,
+    defaultProp: defaultValue ?? (exclusive ? null : []),
+    onChange: onValueChange,
+  });
+
+  const setFromChild = (next: string) => {
+    if (disabled) return;
+    setValue((prev) => {
+      if (exclusive) return prev === next ? null : next;
+      const list = Array.isArray(prev) ? prev : prev ? [prev] : [];
+      return list.includes(next) ? list.filter((v) => v !== next) : [...list, next];
+    });
+  };
+
+  return (
+    <ToggleGroupContext.Provider
+      value={{ exclusive, value: value ?? null, setValue: setFromChild, size: size ?? "md", disabled }}
+    >
+      <div
+        role="group"
+        data-slot="toggle-button-group"
+        data-orientation={orientation}
+        className={cn(
+          "inline-flex isolate",
+          orientation === "vertical" ? "flex-col" : "flex-row",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </ToggleGroupContext.Provider>
+  );
+}
+ToggleButtonGroup.displayName = "ToggleButtonGroup";
+
+export type ToggleButtonProps = Omit<React.ComponentPropsWithoutRef<"button">, "value"> &
+  VariantProps<typeof toggleButtonVariants> & {
+    value: string;
+    selected?: boolean;
+  };
+
+function ToggleButton({
+  value,
+  selected,
+  size: sizeProp,
+  className,
+  disabled,
+  onClick,
+  children,
+  ...props
+}: ToggleButtonProps) {
+  const ctx = React.useContext(ToggleGroupContext);
+  const size = sizeProp ?? ctx?.size ?? "md";
+  const isSelected =
+    selected ??
+    (ctx
+      ? Array.isArray(ctx.value)
+        ? ctx.value.includes(value)
+        : ctx.value === value
+      : false);
+  const isDisabled = disabled || ctx?.disabled;
+
+  return (
+    <button
+      type="button"
+      data-slot="toggle-button"
+      data-state={isSelected ? "on" : "off"}
+      aria-pressed={isSelected}
+      disabled={isDisabled}
+      className={cn(
+        toggleButtonVariants({ size }),
+        isSelected
+          ? "z-[1] border-primary/50 bg-primary/15 text-primary"
+          : "border-border/60 bg-background/80 text-foreground hover:bg-muted/40",
+        ctx && "first:rounded-l-lg last:rounded-r-lg [&:not(:first-child)]:rounded-l-none [&:not(:last-child)]:rounded-r-none [&:not(:first-child)]:-ml-px",
+        !ctx && "rounded-lg",
+        className,
+      )}
+      onClick={(event) => {
+        onClick?.(event);
+        if (event.defaultPrevented || isDisabled) return;
+        ctx?.setValue(value);
+      }}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
+ToggleButton.displayName = "ToggleButton";
+
+export { ToggleButton, ToggleButtonGroup, toggleButtonVariants };

package/src/primitives/TransferList.tsx

@@ -0,0 +1,110 @@
+import * as React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { cn } from "../lib/cn";
+import { Button } from "./Button";
+import { List, ListItemButton, ListItemIcon, ListItemText } from "./List";
+import { Paper } from "./Paper";
+
+export type TransferListProps = {
+  left: string[];
+  right: string[];
+  onChange?: (next: { left: string[]; right: string[] }) => void;
+  leftTitle?: string;
+  rightTitle?: string;
+  className?: string;
+};
+
+function move(source: string[], target: string[], picked: string[]) {
+  return {
+    source: source.filter((item) => !picked.includes(item)),
+    target: [...target, ...source.filter((item) => picked.includes(item))],
+  };
+}
+
+function Column({
+  title,
+  items,
+  checked,
+  onToggle,
+}: {
+  title: string;
+  items: string[];
+  checked: string[];
+  onToggle: (item: string) => void;
+}) {
+  return (
+    <Paper variant="outlined" className="min-w-40 flex-1 overflow-hidden">
+      <div className="border-b border-border/40 px-3 py-2 text-xs font-black uppercase tracking-widest text-muted-foreground">
+        {title}
+      </div>
+      <List dense disablePadding className="max-h-48 overflow-auto">
+        {items.map((item) => (
+          <ListItemButton
+            key={item}
+            selected={checked.includes(item)}
+            onClick={() => onToggle(item)}
+          >
+            <ListItemIcon>
+              <span
+                className={cn(
+                  "size-3.5 rounded-sm border",
+                  checked.includes(item) ? "border-primary bg-primary" : "border-border",
+                )}
+              />
+            </ListItemIcon>
+            <ListItemText primary={item} />
+          </ListItemButton>
+        ))}
+      </List>
+    </Paper>
+  );
+}
+
+/**
+ * Two-list shuttle for picking items — MUI Transfer List analogue.
+ */
+function TransferList({
+  left,
+  right,
+  onChange,
+  leftTitle = "Choices",
+  rightTitle = "Chosen",
+  className,
+}: TransferListProps) {
+  const [checkedLeft, setCheckedLeft] = React.useState<string[]>([]);
+  const [checkedRight, setCheckedRight] = React.useState<string[]>([]);
+
+  const toggle = (item: string, side: "left" | "right") => {
+    const setter = side === "left" ? setCheckedLeft : setCheckedRight;
+    setter((prev) => (prev.includes(item) ? prev.filter((x) => x !== item) : [...prev, item]));
+  };
+
+  const toRight = () => {
+    const next = move(left, right, checkedLeft);
+    onChange?.({ left: next.source, right: next.target });
+    setCheckedLeft([]);
+  };
+  const toLeft = () => {
+    const next = move(right, left, checkedRight);
+    onChange?.({ left: next.target, right: next.source });
+    setCheckedRight([]);
+  };
+
+  return (
+    <div data-slot="transfer-list" className={cn("flex items-center gap-3", className)}>
+      <Column title={leftTitle} items={left} checked={checkedLeft} onToggle={(item) => toggle(item, "left")} />
+      <div className="flex flex-col gap-2">
+        <Button size="sm" variant="outline" disabled={!checkedLeft.length} onClick={toRight} aria-label="Move right">
+          <ChevronRight className="size-4" />
+        </Button>
+        <Button size="sm" variant="outline" disabled={!checkedRight.length} onClick={toLeft} aria-label="Move left">
+          <ChevronLeft className="size-4" />
+        </Button>
+      </div>
+      <Column title={rightTitle} items={right} checked={checkedRight} onToggle={(item) => toggle(item, "right")} />
+    </div>
+  );
+}
+TransferList.displayName = "TransferList";
+
+export { TransferList };

package/src/primitives/Typography.tsx

@@ -0,0 +1,90 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/cn";
+
+const typographyVariants = cva("text-foreground", {
+  variants: {
+    variant: {
+      h1: "text-4xl font-black tracking-tight",
+      h2: "text-3xl font-black tracking-tight",
+      h3: "text-2xl font-bold tracking-tight",
+      h4: "text-xl font-bold",
+      h5: "text-lg font-bold",
+      h6: "text-base font-bold",
+      subtitle1: "text-base font-semibold",
+      subtitle2: "text-sm font-semibold",
+      body1: "text-base font-medium leading-relaxed",
+      body2: "text-sm font-medium leading-relaxed",
+      caption: "text-xs font-medium text-muted-foreground",
+      overline: "text-[10px] font-black uppercase tracking-widest text-muted-foreground",
+    },
+    color: {
+      default: "",
+      muted: "text-muted-foreground",
+      primary: "text-primary",
+      inherit: "text-inherit",
+    },
+    align: {
+      inherit: "",
+      left: "text-left",
+      center: "text-center",
+      right: "text-right",
+    },
+    gutterBottom: {
+      true: "mb-2",
+      false: "",
+    },
+    noWrap: {
+      true: "truncate",
+      false: "",
+    },
+  },
+  defaultVariants: {
+    variant: "body1",
+    color: "default",
+    align: "inherit",
+    gutterBottom: false,
+    noWrap: false,
+  },
+});
+
+const variantElement: Record<
+  NonNullable<VariantProps<typeof typographyVariants>["variant"]>,
+  React.ElementType
+> = {
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6",
+  subtitle1: "h6",
+  subtitle2: "h6",
+  body1: "p",
+  body2: "p",
+  caption: "span",
+  overline: "span",
+};
+
+export type TypographyProps = Omit<React.ComponentPropsWithoutRef<"p">, "color"> &
+  VariantProps<typeof typographyVariants> & {
+    component?: React.ElementType;
+  };
+
+const Typography = React.forwardRef<HTMLElement, TypographyProps>(
+  ({ className, variant = "body1", color, align, gutterBottom, noWrap, component, ...props }, ref) => {
+    const Comp = (component ?? variantElement[variant ?? "body1"]) as React.ElementType;
+    return (
+      <Comp
+        ref={ref}
+        data-slot="typography"
+        data-variant={variant}
+        className={cn(typographyVariants({ variant, color, align, gutterBottom, noWrap }), className)}
+        {...props}
+      />
+    );
+  },
+);
+Typography.displayName = "Typography";
+
+export { Typography, typographyVariants };

package/src/primitives/mui-more.test.tsx

@@ -0,0 +1,76 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { Autocomplete } from "./Autocomplete";
+import { Box, Grid } from "./Grid";
+import { FormControl, FormHelperText, FormLabel } from "./FormControl";
+import { Input } from "./Input";
+import { Rating } from "./StarRating";
+import { TransferList } from "./TransferList";
+import { BottomNavigation, BottomNavigationAction } from "./BottomNavigation";
+import { Fade } from "./transitions";
+import { NoSsr } from "./NoSsr";
+import { Button } from "./Button";
+
+describe("Autocomplete", () => {
+  it("filters and selects an option", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(
+      <Autocomplete
+        label="Movie"
+        options={["Inception", "Heat", "Her"]}
+        onChange={onChange}
+      />,
+    );
+    await user.click(screen.getByRole("combobox"));
+    await user.type(screen.getByRole("combobox"), "He");
+    await user.click(screen.getByRole("option", { name: "Heat" }));
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange.mock.calls.at(-1)?.[0]).toBe("Heat");
+  });
+});
+
+describe("layout and form extras", () => {
+  it("renders Grid, Box, FormControl, Rating, Fade, and TransferList", async () => {
+    const user = userEvent.setup();
+    const onTransfer = vi.fn();
+    render(
+      <Box>
+        <Grid container spacing={2}>
+          <Grid xs={6}>Left</Grid>
+          <Grid xs={6}>Right</Grid>
+        </Grid>
+        <FormControl error>
+          <FormLabel>Email</FormLabel>
+          <Input />
+          <FormHelperText>Required</FormHelperText>
+        </FormControl>
+        <Rating defaultValue={3} />
+        <Fade in>Shown</Fade>
+        <NoSsr>
+          <span>Client</span>
+        </NoSsr>
+        <TransferList left={["Java"]} right={["React"]} onChange={onTransfer} />
+      </Box>,
+    );
+    expect(screen.getByText("Left")).toBeInTheDocument();
+    expect(screen.getByText("Required")).toBeInTheDocument();
+    expect(screen.getByText("Shown")).toBeInTheDocument();
+    await user.click(screen.getByRole("button", { name: /Java/ }));
+    await user.click(screen.getByRole("button", { name: "Move right" }));
+    expect(onTransfer).toHaveBeenCalled();
+  });
+
+  it("switches BottomNavigation actions", async () => {
+    const user = userEvent.setup();
+    render(
+      <BottomNavigation defaultValue="home">
+        <BottomNavigationAction value="home" label="Home" />
+        <BottomNavigationAction value="me" label="You" />
+      </BottomNavigation>,
+    );
+    await user.click(screen.getByRole("button", { name: "You" }));
+    expect(screen.getByRole("button", { name: "You" })).toHaveAttribute("aria-current", "page");
+  });
+});