@spatika/react 1.0.0 → 1.2.0

package/src/primitives/Autocomplete.tsx

@@ -0,0 +1,236 @@
+import * as React from "react";
+import { Check, ChevronsUpDown, X } from "lucide-react";
+import { useControllableState } from "../lib/use-controllable-state";
+import { useDismissable } from "../lib/use-dismissable";
+import { cn } from "../lib/cn";
+import { Input } from "./Input";
+import { Label } from "./Label";
+
+export type AutocompleteOption = {
+  label: string;
+  value: string;
+  disabled?: boolean;
+};
+
+function normalizeOptions(options: Array<string | AutocompleteOption>): AutocompleteOption[] {
+  return options.map((option) =>
+    typeof option === "string" ? { label: option, value: option } : option,
+  );
+}
+
+export type AutocompleteProps = Omit<
+  React.ComponentPropsWithoutRef<"div">,
+  "onChange" | "defaultValue"
+> & {
+  options: Array<string | AutocompleteOption>;
+  value?: string | string[] | null;
+  defaultValue?: string | string[] | null;
+  onChange?: (value: string | string[] | null, option?: AutocompleteOption | AutocompleteOption[] | null) => void;
+  multiple?: boolean;
+  freeSolo?: boolean;
+  label?: React.ReactNode;
+  placeholder?: string;
+  disabled?: boolean;
+  fullWidth?: boolean;
+  noOptionsText?: string;
+};
+
+function asList(value: string | string[] | null | undefined): string[] {
+  if (value == null || value === "") return [];
+  return Array.isArray(value) ? value : [value];
+}
+
+/**
+ * Filterable combobox. Supports single, multiple, and free-solo entry.
+ */
+function Autocomplete({
+  options: optionsProp,
+  value: valueProp,
+  defaultValue,
+  onChange,
+  multiple = false,
+  freeSolo = false,
+  label,
+  placeholder = "Search…",
+  disabled,
+  fullWidth,
+  noOptionsText = "No options",
+  className,
+  id,
+  ...props
+}: AutocompleteProps) {
+  const autoId = React.useId();
+  const fieldId = id ?? autoId;
+  const options = React.useMemo(() => normalizeOptions(optionsProp), [optionsProp]);
+  const [value, setValue] = useControllableState<string | string[] | null>({
+    prop: valueProp,
+    defaultProp: defaultValue ?? (multiple ? [] : null),
+    onChange: (next) => {
+      const list = asList(next);
+      const matched = options.filter((opt) => list.includes(opt.value));
+      onChange?.(next, multiple ? matched : (matched[0] ?? null));
+    },
+  });
+  const selected = asList(value);
+  const [query, setQuery] = React.useState("");
+  const [open, setOpen] = React.useState(false);
+  const [highlight, setHighlight] = React.useState(0);
+  const rootRef = React.useRef<HTMLDivElement | null>(null);
+  const listRef = React.useRef<HTMLDivElement | null>(null);
+
+  const filtered = options.filter((opt) => {
+    if (multiple && selected.includes(opt.value) && !query) return true;
+    return opt.label.toLowerCase().includes(query.toLowerCase());
+  });
+
+  useDismissable({
+    enabled: open,
+    onDismiss: () => setOpen(false),
+    refs: [rootRef, listRef],
+  });
+
+  const commit = (next: string) => {
+    if (disabled) return;
+    if (multiple) {
+      const list = selected.includes(next)
+        ? selected.filter((item) => item !== next)
+        : [...selected, next];
+      setValue(list);
+      setQuery("");
+    } else {
+      setValue(next);
+      setQuery("");
+      setOpen(false);
+    }
+  };
+
+  const display = multiple
+    ? query
+    : open
+      ? query
+      : (options.find((opt) => opt.value === selected[0])?.label ?? selected[0] ?? "");
+
+  return (
+    <div
+      ref={rootRef}
+      data-slot="autocomplete"
+      className={cn("relative", fullWidth && "w-full", className)}
+      {...props}
+    >
+      {label ? <Label htmlFor={fieldId}>{label}</Label> : null}
+      <div
+        className={cn(
+          "mt-1.5 flex min-h-9 flex-wrap items-center gap-1 rounded-md border border-input bg-input-background px-2 py-1",
+          "focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]",
+          disabled && "opacity-50",
+        )}
+      >
+        {multiple
+          ? selected.map((item) => {
+              const opt = options.find((option) => option.value === item);
+              return (
+                <span
+                  key={item}
+                  className="inline-flex items-center gap-1 rounded-full border border-border/50 bg-muted/50 px-2 py-0.5 text-xs font-bold"
+                >
+                  {opt?.label ?? item}
+                  <button
+                    type="button"
+                    aria-label={`Remove ${opt?.label ?? item}`}
+                    className="text-muted-foreground hover:text-foreground"
+                    onClick={() => commit(item)}
+                  >
+                    <X className="size-3" />
+                  </button>
+                </span>
+              );
+            })
+          : null}
+        <Input
+          id={fieldId}
+          disabled={disabled}
+          role="combobox"
+          aria-expanded={open}
+          aria-autocomplete="list"
+          placeholder={selected.length && multiple ? undefined : placeholder}
+          value={multiple ? query : display}
+          className="h-7 min-w-16 flex-1 border-0 bg-transparent px-1 shadow-none focus-visible:ring-0"
+          onFocus={() => {
+            setOpen(true);
+            if (!multiple) {
+              const current =
+                options.find((opt) => opt.value === selected[0])?.label ?? selected[0] ?? "";
+              setQuery(current);
+            }
+          }}
+          onChange={(event) => {
+            setQuery(event.target.value);
+            setOpen(true);
+            setHighlight(0);
+            if (!multiple && !freeSolo) {
+              /* keep typing local until a selection is committed */
+            }
+          }}
+          onKeyDown={(event) => {
+            if (event.key === "ArrowDown") {
+              event.preventDefault();
+              setOpen(true);
+              setHighlight((index) => Math.min(filtered.length - 1, index + 1));
+            } else if (event.key === "ArrowUp") {
+              event.preventDefault();
+              setHighlight((index) => Math.max(0, index - 1));
+            } else if (event.key === "Enter") {
+              event.preventDefault();
+              const hit = filtered[highlight];
+              if (hit) commit(hit.value);
+              else if (freeSolo && query.trim()) commit(query.trim());
+            } else if (event.key === "Escape") {
+              setOpen(false);
+            } else if (event.key === "Backspace" && multiple && !query && selected.length) {
+              commit(selected[selected.length - 1]!);
+            }
+          }}
+        />
+        <ChevronsUpDown className="size-3.5 shrink-0 text-muted-foreground" />
+      </div>
+      {open ? (
+        <div
+          ref={listRef}
+          role="listbox"
+          data-slot="autocomplete-list"
+          className="glass-menu absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-xl border border-border/50 p-1 shadow-xl"
+        >
+          {filtered.length === 0 ? (
+            <div className="px-3 py-2 text-sm text-muted-foreground">{noOptionsText}</div>
+          ) : (
+            filtered.map((opt, index) => {
+              const active = selected.includes(opt.value);
+              return (
+                <button
+                  key={opt.value}
+                  type="button"
+                  role="option"
+                  aria-selected={active}
+                  disabled={opt.disabled}
+                  className={cn(
+                    "flex w-full items-center justify-between rounded-lg px-3 py-2 text-left text-sm font-medium",
+                    index === highlight ? "bg-muted/60" : "hover:bg-muted/40",
+                    opt.disabled && "opacity-40",
+                  )}
+                  onMouseEnter={() => setHighlight(index)}
+                  onClick={() => commit(opt.value)}
+                >
+                  {opt.label}
+                  {active ? <Check className="size-3.5 text-primary" /> : null}
+                </button>
+              );
+            })
+          )}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+Autocomplete.displayName = "Autocomplete";
+
+export { Autocomplete };

package/src/primitives/Avatar.tsx

@@ -137,4 +137,55 @@ function InitialsAvatar({
   );
 }
 
-export { Avatar, AvatarImage, AvatarFallback, InitialsAvatar };
+export type AvatarGroupProps = React.ComponentPropsWithoutRef<"div"> & {
+  max?: number;
+  total?: number;
+  spacing?: "sm" | "md" | "lg";
+};
+
+const spacingClass = {
+  sm: "-space-x-1",
+  md: "-space-x-2",
+  lg: "-space-x-3",
+} as const;
+
+/**
+ * Overlapping avatar stack with an overflow count.
+ */
+function AvatarGroup({
+  max = 5,
+  total,
+  spacing = "md",
+  className,
+  children,
+  ...props
+}: AvatarGroupProps) {
+  const avatars = React.Children.toArray(children);
+  const extra = Math.max(0, (total ?? avatars.length) - max);
+  const shown = extra > 0 ? avatars.slice(0, max) : avatars;
+
+  return (
+    <div
+      data-slot="avatar-group"
+      className={cn(
+        "flex items-center [&_[data-slot=avatar]]:ring-2 [&_[data-slot=avatar]]:ring-background",
+        spacingClass[spacing],
+        className,
+      )}
+      {...props}
+    >
+      {shown}
+      {extra > 0 ? (
+        <span
+          data-slot="avatar-group-surplus"
+          className="relative z-[1] flex size-10 shrink-0 items-center justify-center rounded-full border-2 border-background bg-muted text-xs font-bold text-muted-foreground"
+        >
+          +{extra}
+        </span>
+      ) : null}
+    </div>
+  );
+}
+AvatarGroup.displayName = "AvatarGroup";
+
+export { Avatar, AvatarImage, AvatarFallback, InitialsAvatar, AvatarGroup };

package/src/primitives/Backdrop.tsx

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { Portal } from "../lib/portal";
+import { cn } from "../lib/cn";
+import { OVERLAY_Z_INDEX, fixedLayerStyle } from "../lib/overlay-stack";
+
+export type BackdropProps = React.ComponentPropsWithoutRef<"div"> & {
+  open?: boolean;
+  /** Skip the dimmed fill — useful as a click-catcher. */
+  invisible?: boolean;
+  /** Render in-place instead of portaling to document.body. */
+  contained?: boolean;
+};
+
+/**
+ * Full-viewport dimmer, typically paired with a modal or speed dial.
+ */
+function Backdrop({
+  open = false,
+  invisible = false,
+  contained = false,
+  className,
+  style,
+  children,
+  ...props
+}: BackdropProps) {
+  if (!open) return null;
+
+  const node = (
+    <div
+      data-slot="backdrop"
+      className={cn(
+        contained ? "absolute inset-0" : "fixed inset-0",
+        !invisible && "bg-[color-mix(in_srgb,var(--foreground)_28%,transparent)]",
+        className,
+      )}
+      style={contained ? style : { ...fixedLayerStyle(OVERLAY_Z_INDEX.modal), ...style }}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+
+  if (contained) return node;
+  return <Portal>{node}</Portal>;
+}
+Backdrop.displayName = "Backdrop";
+
+export { Backdrop };

package/src/primitives/BottomNavigation.tsx

@@ -0,0 +1,102 @@
+import * as React from "react";
+import { useControllableState } from "../lib/use-controllable-state";
+import { cn } from "../lib/cn";
+
+type BottomNavContextValue = {
+  value?: string;
+  setValue: (value: string) => void;
+  showLabels: boolean;
+};
+
+const BottomNavContext = React.createContext<BottomNavContextValue | null>(null);
+
+export type BottomNavigationProps = Omit<
+  React.ComponentPropsWithoutRef<"div">,
+  "onChange" | "defaultValue"
+> & {
+  value?: string;
+  defaultValue?: string;
+  onChange?: (event: React.SyntheticEvent, value: string) => void;
+  showLabels?: boolean;
+};
+
+function BottomNavigation({
+  value: valueProp,
+  defaultValue,
+  onChange,
+  showLabels = true,
+  className,
+  ...props
+}: BottomNavigationProps) {
+  const [value, setValue] = useControllableState({
+    prop: valueProp,
+    defaultProp: defaultValue,
+    onChange: (next) => {
+      if (next == null) return;
+      onChange?.({} as React.SyntheticEvent, next);
+    },
+  });
+
+  return (
+    <BottomNavContext.Provider
+      value={{ value, setValue: (next) => setValue(next), showLabels }}
+    >
+      <div
+        role="navigation"
+        data-slot="bottom-navigation"
+        className={cn(
+          "glass-tabbar flex w-full items-stretch justify-around rounded-2xl border border-border/40 px-2 py-1",
+          className,
+        )}
+        {...props}
+      />
+    </BottomNavContext.Provider>
+  );
+}
+BottomNavigation.displayName = "BottomNavigation";
+
+export type BottomNavigationActionProps = React.ComponentPropsWithoutRef<"button"> & {
+  value: string;
+  label?: React.ReactNode;
+  icon?: React.ReactNode;
+  showLabel?: boolean;
+};
+
+function BottomNavigationAction({
+  value,
+  label,
+  icon,
+  showLabel,
+  className,
+  onClick,
+  ...props
+}: BottomNavigationActionProps) {
+  const ctx = React.useContext(BottomNavContext);
+  const selected = ctx?.value === value;
+  const labels = showLabel ?? ctx?.showLabels ?? true;
+
+  return (
+    <button
+      type="button"
+      data-slot="bottom-navigation-action"
+      data-selected={selected ? "" : undefined}
+      aria-current={selected ? "page" : undefined}
+      className={cn(
+        "flex min-h-11 flex-1 flex-col items-center justify-center gap-0.5 rounded-xl px-2 py-1.5 text-[10px] font-bold outline-none transition-colors",
+        selected ? "text-primary" : "text-muted-foreground hover:text-foreground",
+        className,
+      )}
+      onClick={(event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) ctx?.setValue(value);
+      }}
+      {...props}
+    >
+      <span className="[&_svg]:size-5">{icon}</span>
+      {labels ? <span>{label}</span> : null}
+    </button>
+  );
+}
+BottomNavigationAction.displayName = "BottomNavigationAction";
+
+export { BottomNavigation, BottomNavigationAction };

package/src/primitives/Button.tsx

@@ -18,11 +18,14 @@ const buttonVariants = cva(
         link: "text-primary underline-offset-4 hover:underline",
         glass:
           "glass border-border/50 text-foreground hover:border-primary/30 hover:text-primary",
+        gradient:
+          "rounded-full bg-gradient-to-r from-primary to-[color-mix(in_srgb,var(--primary)_72%,var(--chart-2))] text-primary-foreground shadow-[0_10px_32px_color-mix(in_srgb,var(--primary)_38%,transparent)] hover:brightness-105 hover:-translate-y-0.5 hover:shadow-[0_14px_40px_color-mix(in_srgb,var(--chart-3)_22%,transparent)]",
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
         sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
         lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        xl: "h-auto rounded-full px-8 py-4 text-[15px] font-bold has-[>svg]:px-7",
         /** Mobile-first ≥44px touch target */
         touch: "min-h-11 h-11 rounded-md px-5 has-[>svg]:px-4",
         icon: "size-9 rounded-md",

package/src/primitives/ButtonBase.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { Slot } from "../lib/slot";
+import { cn } from "../lib/cn";
+
+export type ButtonBaseProps = React.ComponentPropsWithoutRef<"button"> & {
+  asChild?: boolean;
+  focusRipple?: boolean;
+};
+
+/**
+ * Unstyled pressable — MUI ButtonBase analogue. Use Button / IconButton for styled actions.
+ */
+const ButtonBase = React.forwardRef<HTMLButtonElement, ButtonBaseProps>(
+  ({ className, asChild = false, focusRipple: _focusRipple, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        ref={ref}
+        type={asChild ? undefined : "button"}
+        data-slot="button-base"
+        className={cn(
+          "inline-flex cursor-pointer items-center justify-center outline-none select-none",
+          "focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50",
+          "active:scale-[0.98]",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+ButtonBase.displayName = "ButtonBase";
+
+export { ButtonBase };

package/src/primitives/ButtonGroup.tsx

@@ -0,0 +1,90 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/cn";
+import { buttonVariants } from "./Button";
+
+const buttonGroupVariants = cva("inline-flex isolate", {
+  variants: {
+    orientation: {
+      horizontal: "flex-row",
+      vertical: "flex-col",
+    },
+    fullWidth: {
+      true: "flex w-full",
+      false: "",
+    },
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+    fullWidth: false,
+  },
+});
+
+export type ButtonGroupProps = React.ComponentPropsWithoutRef<"div"> &
+  VariantProps<typeof buttonGroupVariants> & {
+    variant?: VariantProps<typeof buttonVariants>["variant"];
+    size?: VariantProps<typeof buttonVariants>["size"];
+    disabled?: boolean;
+  };
+
+/**
+ * Connected cluster of buttons — first/last corners stay rounded.
+ */
+const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
+  (
+    {
+      className,
+      orientation = "horizontal",
+      fullWidth = false,
+      variant,
+      size,
+      disabled,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const items = React.Children.toArray(children);
+    const vertical = orientation === "vertical";
+
+    return (
+      <div
+        ref={ref}
+        role="group"
+        data-slot="button-group"
+        data-orientation={orientation}
+        className={cn(buttonGroupVariants({ orientation, fullWidth }), className)}
+        {...props}
+      >
+        {items.map((child, index) => {
+          if (!React.isValidElement<{
+            className?: string;
+            disabled?: boolean;
+            variant?: ButtonGroupProps["variant"];
+            size?: ButtonGroupProps["size"];
+          }>(child)) {
+            return child;
+          }
+          const first = index === 0;
+          const last = index === items.length - 1;
+          return React.cloneElement(child, {
+            disabled: disabled || child.props.disabled,
+            variant: child.props.variant ?? variant ?? undefined,
+            size: child.props.size ?? size ?? undefined,
+            className: cn(
+              child.props.className,
+              "focus-visible:z-10",
+              vertical
+                ? cn(!first && "-mt-px rounded-t-none", !last && "rounded-b-none")
+                : cn(!first && "-ml-px rounded-l-none", !last && "rounded-r-none"),
+              fullWidth && "flex-1",
+            ),
+          });
+        })}
+      </div>
+    );
+  },
+);
+ButtonGroup.displayName = "ButtonGroup";
+
+export { ButtonGroup, buttonGroupVariants };

package/src/primitives/CircularProgress.tsx

@@ -0,0 +1,104 @@
+import * as React from "react";
+import { cn } from "../lib/cn";
+
+export type CircularProgressProps = React.ComponentPropsWithoutRef<"span"> & {
+  variant?: "indeterminate" | "determinate";
+  value?: number;
+  size?: number;
+  thickness?: number;
+};
+
+/**
+ * Circular indicator. Indeterminate spins; determinate fills an SVG track.
+ */
+function CircularProgress({
+  variant = "indeterminate",
+  value = 0,
+  size = 40,
+  thickness = 4,
+  className,
+  ...props
+}: CircularProgressProps) {
+  const pct = Math.min(100, Math.max(0, value));
+  const radius = (size - thickness) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const offset = circumference - (pct / 100) * circumference;
+
+  if (variant === "indeterminate") {
+    return (
+      <span
+        role="progressbar"
+        aria-label="Loading"
+        data-slot="circular-progress"
+        className={cn("inline-flex text-primary", className)}
+        {...props}
+      >
+        <svg
+          className="animate-spin"
+          width={size}
+          height={size}
+          viewBox={`0 0 ${size} ${size}`}
+        >
+          <circle
+            cx={size / 2}
+            cy={size / 2}
+            r={radius}
+            fill="none"
+            stroke="currentColor"
+            strokeOpacity={0.2}
+            strokeWidth={thickness}
+          />
+          <circle
+            cx={size / 2}
+            cy={size / 2}
+            r={radius}
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={thickness}
+            strokeLinecap="round"
+            strokeDasharray={`${circumference * 0.25} ${circumference}`}
+          />
+        </svg>
+      </span>
+    );
+  }
+
+  return (
+    <span
+      role="progressbar"
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-valuenow={pct}
+      data-slot="circular-progress"
+      className={cn("inline-flex text-primary", className)}
+      {...props}
+    >
+      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} className="-rotate-90">
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          fill="none"
+          stroke="currentColor"
+          strokeOpacity={0.2}
+          strokeWidth={thickness}
+        />
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={thickness}
+          strokeLinecap="round"
+          strokeDasharray={circumference}
+          strokeDashoffset={offset}
+          className="transition-[stroke-dashoffset] duration-300"
+        />
+      </svg>
+    </span>
+  );
+}
+CircularProgress.displayName = "CircularProgress";
+
+export { CircularProgress };