@hydralms/components 0.1.1 → 0.1.2

package/src/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+import { cn } from "../lib/utils";
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-sm shadow-xs outline-none transition-[color,box-shadow] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:opacity-50",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 aria-invalid:border-destructive",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };

package/src/ui/progress.tsx

@@ -0,0 +1,73 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../lib/utils";
+
+const progressVariants = cva("h-full rounded-full transition-all duration-300", {
+  variants: {
+    variant: {
+      default: "bg-primary",
+      success: "bg-success",
+      warning: "bg-warning",
+      info: "bg-info",
+    },
+    size: {
+      sm: "",
+      default: "",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default",
+  },
+});
+
+const trackVariants = cva("bg-muted overflow-hidden rounded-full w-full", {
+  variants: {
+    size: {
+      sm: "h-1.5",
+      default: "h-2.5",
+    },
+  },
+  defaultVariants: {
+    size: "default",
+  },
+});
+
+interface ProgressProps
+  extends Omit<React.ComponentProps<"div">, "children">,
+    VariantProps<typeof progressVariants> {
+  value?: number;
+  max?: number;
+}
+
+function Progress({
+  className,
+  value = 0,
+  max = 100,
+  variant,
+  size,
+  ...props
+}: ProgressProps) {
+  const percentage = Math.min(100, Math.max(0, (value / max) * 100));
+
+  return (
+    <div
+      data-slot="progress"
+      role="progressbar"
+      aria-valuenow={value}
+      aria-valuemin={0}
+      aria-valuemax={max}
+      className={cn(trackVariants({ size }), className)}
+      {...props}
+    >
+      <div
+        className={progressVariants({ variant, size })}
+        style={{ width: `${percentage}%` }}
+      />
+    </div>
+  );
+}
+
+export { Progress, progressVariants };
+export type { ProgressProps };

package/src/ui/separator.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+
+import { cn } from "../lib/utils";
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<"div"> & {
+  orientation?: "horizontal" | "vertical";
+  decorative?: boolean;
+}) {
+  return (
+    <div
+      data-slot="separator"
+      role={decorative ? "none" : "separator"}
+      aria-orientation={!decorative ? orientation : undefined}
+      className={cn(
+        "bg-border shrink-0",
+        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };

package/src/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import * as React from "react";
+
+import { cn } from "../lib/utils";
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-muted animate-pulse rounded-md", className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };

package/src/ui/slot.tsx

@@ -0,0 +1,48 @@
+import * as React from "react";
+
+/**
+ * Minimal Slot implementation for the asChild pattern.
+ * Merges parent props onto a single React element child.
+ */
+export function Slot({
+  children,
+  ...props
+}: React.HTMLAttributes<HTMLElement> & { children?: React.ReactNode }) {
+  if (React.isValidElement(children)) {
+    return React.cloneElement(children, {
+      ...mergeProps(props, children.props as Record<string, unknown>),
+      ref: (children as React.ReactElement & { ref?: React.Ref<unknown> }).ref,
+    } as Record<string, unknown>);
+  }
+
+  if (React.Children.count(children) > 1) {
+    React.Children.only(null);
+  }
+
+  return null;
+}
+
+function mergeProps(
+  slotProps: Record<string, unknown>,
+  childProps: Record<string, unknown>,
+) {
+  const overrideProps: Record<string, unknown> = { ...childProps };
+
+  for (const propName in childProps) {
+    const slotVal = slotProps[propName];
+    const childVal = childProps[propName];
+
+    if (propName === "style") {
+      overrideProps[propName] = { ...(slotVal as object), ...(childVal as object) };
+    } else if (propName === "className") {
+      overrideProps[propName] = [slotVal, childVal].filter(Boolean).join(" ");
+    } else if (typeof slotVal === "function" && typeof childVal === "function") {
+      overrideProps[propName] = (...args: unknown[]) => {
+        childVal(...args);
+        slotVal(...args);
+      };
+    }
+  }
+
+  return { ...slotProps, ...overrideProps };
+}

package/src/ui/table.tsx

@@ -0,0 +1,108 @@
+import * as React from "react";
+
+import { cn } from "../lib/utils";
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div data-slot="table-container" className="relative w-full overflow-auto">
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  );
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  );
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b border-border transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "text-muted-foreground h-10 px-3 text-left align-middle font-semibold whitespace-nowrap text-sm [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "px-3 py-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCaption({ className, ...props }: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableRow,
+  TableHead,
+  TableCell,
+  TableCaption,
+};

package/src/ui/tabs.tsx

@@ -0,0 +1,147 @@
+import * as React from "react";
+import { createContext, useContext, useState, useRef, useCallback } from "react";
+
+import { cn } from "../lib/utils";
+
+/* --------------------------------- Context -------------------------------- */
+
+interface TabsContextValue {
+  selectedValue: string;
+  onSelect: (value: string) => void;
+}
+
+const TabsContext = createContext<TabsContextValue | null>(null);
+
+function useTabsContext() {
+  const ctx = useContext(TabsContext);
+  if (!ctx) throw new Error("Tabs compound components must be used within <Tabs>");
+  return ctx;
+}
+
+/* ---------------------------------- Tabs ---------------------------------- */
+
+interface TabsProps extends React.ComponentProps<"div"> {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+}
+
+function Tabs({
+  value,
+  defaultValue,
+  onValueChange,
+  className,
+  ...props
+}: TabsProps) {
+  const [internalValue, setInternalValue] = useState(defaultValue ?? "");
+  const selectedValue = value ?? internalValue;
+
+  const onSelect = useCallback(
+    (v: string) => {
+      if (value === undefined) setInternalValue(v);
+      onValueChange?.(v);
+    },
+    [value, onValueChange],
+  );
+
+  return (
+    <TabsContext.Provider value={{ selectedValue, onSelect }}>
+      <div data-slot="tabs" className={className} {...props} />
+    </TabsContext.Provider>
+  );
+}
+
+/* -------------------------------- TabsList -------------------------------- */
+
+function TabsList({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div">) {
+  const listRef = useRef<HTMLDivElement>(null);
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+
+    const list = listRef.current;
+    if (!list) return;
+
+    const tabs = Array.from(
+      list.querySelectorAll<HTMLButtonElement>('[role="tab"]:not([disabled])'),
+    );
+    const current = tabs.indexOf(document.activeElement as HTMLButtonElement);
+    if (current === -1) return;
+
+    e.preventDefault();
+    const next =
+      e.key === "ArrowRight"
+        ? (current + 1) % tabs.length
+        : (current - 1 + tabs.length) % tabs.length;
+    tabs[next].focus();
+  };
+
+  return (
+    <div
+      ref={listRef}
+      role="tablist"
+      data-slot="tabs-list"
+      className={cn(
+        "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+        className,
+      )}
+      onKeyDown={handleKeyDown}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+/* ------------------------------- TabsTrigger ------------------------------ */
+
+interface TabsTriggerProps extends React.ComponentProps<"button"> {
+  value: string;
+}
+
+function TabsTrigger({ value, className, ...props }: TabsTriggerProps) {
+  const { selectedValue, onSelect } = useTabsContext();
+  const isSelected = selectedValue === value;
+
+  return (
+    <button
+      role="tab"
+      type="button"
+      data-slot="tabs-trigger"
+      aria-selected={isSelected}
+      {...(isSelected ? { "data-selected": "" } : {})}
+      className={cn(
+        "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all cursor-pointer disabled:pointer-events-none disabled:opacity-50 data-selected:bg-background data-selected:text-foreground data-selected:shadow-sm",
+        className,
+      )}
+      onClick={() => onSelect(value)}
+      {...props}
+    />
+  );
+}
+
+/* ------------------------------- TabsContent ------------------------------ */
+
+interface TabsContentProps extends React.ComponentProps<"div"> {
+  value: string;
+}
+
+function TabsContent({ value, className, ...props }: TabsContentProps) {
+  const { selectedValue } = useTabsContext();
+  if (selectedValue !== value) return null;
+
+  return (
+    <div
+      role="tabpanel"
+      data-slot="tabs-content"
+      className={cn("pt-2", className)}
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/src/ui/textarea.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+
+import { cn } from "../lib/utils";
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "placeholder:text-muted-foreground border-input flex min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs outline-none transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 aria-invalid:border-destructive",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Textarea };

package/src/ui/tooltip.tsx

@@ -0,0 +1,177 @@
+import * as React from "react";
+import {
+  createContext,
+  useContext,
+  useState,
+  useRef,
+  useCallback,
+  useLayoutEffect,
+  useId,
+  cloneElement,
+  isValidElement,
+} from "react";
+import { createPortal } from "react-dom";
+
+import { cn } from "../lib/utils";
+
+/* --------------------------------- Context -------------------------------- */
+
+interface TooltipContextValue {
+  open: boolean;
+  show: () => void;
+  hide: () => void;
+  triggerRef: React.RefObject<HTMLElement | null>;
+  tooltipId: string;
+}
+
+const TooltipContext = createContext<TooltipContextValue | null>(null);
+
+function useTooltipContext() {
+  const ctx = useContext(TooltipContext);
+  if (!ctx) throw new Error("Tooltip compound components must be used within <Tooltip>");
+  return ctx;
+}
+
+/* --------------------------------- Tooltip -------------------------------- */
+
+interface TooltipProps {
+  children: React.ReactNode;
+  delayDuration?: number;
+}
+
+function Tooltip({ children, delayDuration = 300 }: TooltipProps) {
+  const [open, setOpen] = useState(false);
+  const triggerRef = useRef<HTMLElement | null>(null);
+  const delayRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+  const tooltipId = useId();
+
+  const show = useCallback(() => {
+    clearTimeout(delayRef.current);
+    delayRef.current = setTimeout(() => setOpen(true), delayDuration);
+  }, [delayDuration]);
+
+  const hide = useCallback(() => {
+    clearTimeout(delayRef.current);
+    setOpen(false);
+  }, []);
+
+  return (
+    <TooltipContext.Provider value={{ open, show, hide, triggerRef, tooltipId }}>
+      {children}
+    </TooltipContext.Provider>
+  );
+}
+
+/* ------------------------------ TooltipTrigger ----------------------------- */
+
+interface TooltipTriggerProps {
+  children: React.ReactElement<Record<string, unknown>>;
+}
+
+function TooltipTrigger({ children }: TooltipTriggerProps) {
+  const { show, hide, triggerRef, tooltipId, open } = useTooltipContext();
+
+  if (!isValidElement(children)) return children;
+
+  return cloneElement(children, {
+    ref: (node: HTMLElement | null) => {
+      triggerRef.current = node;
+      // Forward ref if child has one
+      const childRef = (children as React.ReactElement & { ref?: React.Ref<HTMLElement> }).ref;
+      if (typeof childRef === "function") childRef(node);
+      else if (childRef && typeof childRef === "object") {
+        (childRef as React.MutableRefObject<HTMLElement | null>).current = node;
+      }
+    },
+    onMouseEnter: (e: React.MouseEvent) => {
+      show();
+      const handler = (children.props as Record<string, Function | undefined>).onMouseEnter;
+      handler?.(e);
+    },
+    onMouseLeave: (e: React.MouseEvent) => {
+      hide();
+      const handler = (children.props as Record<string, Function | undefined>).onMouseLeave;
+      handler?.(e);
+    },
+    onFocus: (e: React.FocusEvent) => {
+      show();
+      const handler = (children.props as Record<string, Function | undefined>).onFocus;
+      handler?.(e);
+    },
+    onBlur: (e: React.FocusEvent) => {
+      hide();
+      const handler = (children.props as Record<string, Function | undefined>).onBlur;
+      handler?.(e);
+    },
+    "aria-describedby": open ? tooltipId : undefined,
+  } as Record<string, unknown>);
+}
+
+/* ------------------------------ TooltipContent ----------------------------- */
+
+interface TooltipContentProps extends React.ComponentProps<"div"> {
+  sideOffset?: number;
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 8,
+  children,
+  style,
+  ...props
+}: TooltipContentProps) {
+  const { open, triggerRef, tooltipId } = useTooltipContext();
+  const popupRef = useRef<HTMLDivElement>(null);
+  const [position, setPosition] = useState<React.CSSProperties>({
+    position: "fixed",
+    top: 0,
+    left: 0,
+    visibility: "hidden",
+  });
+
+  useLayoutEffect(() => {
+    if (!open || !triggerRef.current || !popupRef.current) return;
+
+    const trigger = triggerRef.current.getBoundingClientRect();
+    const popup = popupRef.current.getBoundingClientRect();
+
+    // Default: above trigger, centered horizontally
+    let top = trigger.top - popup.height - sideOffset;
+    let left = trigger.left + trigger.width / 2 - popup.width / 2;
+
+    // Flip below if overflows top
+    if (top < 4) {
+      top = trigger.bottom + sideOffset;
+    }
+
+    // Clamp horizontally
+    if (left < 4) left = 4;
+    if (left + popup.width > window.innerWidth - 4) {
+      left = window.innerWidth - popup.width - 4;
+    }
+
+    setPosition({ position: "fixed", top, left, visibility: "visible" });
+  }, [open, sideOffset, triggerRef]);
+
+  if (!open) return null;
+
+  return createPortal(
+    <div
+      ref={popupRef}
+      id={tooltipId}
+      role="tooltip"
+      data-slot="tooltip-content"
+      className={cn(
+        "bg-primary text-primary-foreground z-50 max-w-60 rounded-md px-2.5 py-1.5 text-xs leading-snug shadow-md animate-in fade-in-0 zoom-in-95",
+        className,
+      )}
+      style={{ ...position, ...style }}
+      {...props}
+    >
+      {children}
+    </div>,
+    document.body,
+  );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent };

package/src/utils/debounce.test.ts

@@ -0,0 +1,59 @@
+import { debounce } from "./debounce";
+
+describe("debounce", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("delays function execution", () => {
+    const fn = vi.fn();
+    const debounced = debounce(fn, 100);
+
+    debounced();
+    expect(fn).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(100);
+    expect(fn).toHaveBeenCalledOnce();
+  });
+
+  it("resets the timer on subsequent calls", () => {
+    const fn = vi.fn();
+    const debounced = debounce(fn, 100);
+
+    debounced();
+    vi.advanceTimersByTime(50);
+    debounced();
+    vi.advanceTimersByTime(50);
+
+    expect(fn).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(50);
+    expect(fn).toHaveBeenCalledOnce();
+  });
+
+  it("passes arguments to the debounced function", () => {
+    const fn = vi.fn();
+    const debounced = debounce(fn, 100);
+
+    debounced("hello", "world");
+    vi.advanceTimersByTime(100);
+
+    expect(fn).toHaveBeenCalledWith("hello", "world");
+  });
+
+  it("uses arguments from the last call", () => {
+    const fn = vi.fn();
+    const debounced = debounce(fn, 100);
+
+    debounced("first");
+    debounced("second");
+    vi.advanceTimersByTime(100);
+
+    expect(fn).toHaveBeenCalledOnce();
+    expect(fn).toHaveBeenCalledWith("second");
+  });
+});