@hydralms/components 0.1.1 → 0.1.2

package/src/ui/alert-dialog.tsx

@@ -0,0 +1,343 @@
+import * as React from "react";
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useId,
+  useCallback,
+} from "react";
+import { createPortal } from "react-dom";
+
+import { cn } from "../lib/utils";
+import { buttonVariants } from "./button";
+
+/* --------------------------------- Context -------------------------------- */
+
+interface AlertDialogContextValue {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  titleId: string;
+  descriptionId: string;
+}
+
+const AlertDialogContext = createContext<AlertDialogContextValue | null>(null);
+
+function useAlertDialogContext() {
+  const ctx = useContext(AlertDialogContext);
+  if (!ctx)
+    throw new Error(
+      "AlertDialog compound components must be used within <AlertDialog>",
+    );
+  return ctx;
+}
+
+/* ------------------------------- Focus Trap ------------------------------- */
+
+const FOCUSABLE_SELECTOR = [
+  'a[href]',
+  'button:not([disabled])',
+  'input:not([disabled])',
+  'select:not([disabled])',
+  'textarea:not([disabled])',
+  '[tabindex]:not([tabindex="-1"])',
+].join(", ");
+
+function useFocusTrap(containerRef: React.RefObject<HTMLElement | null>, active: boolean) {
+  const previousFocusRef = useRef<Element | null>(null);
+
+  useEffect(() => {
+    if (!active || !containerRef.current) return;
+
+    // Save previously focused element
+    previousFocusRef.current = document.activeElement;
+
+    // Focus first focusable element inside the dialog
+    const focusable = containerRef.current.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR);
+    if (focusable.length > 0) {
+      focusable[0].focus();
+    }
+
+    return () => {
+      // Restore focus on cleanup
+      if (previousFocusRef.current instanceof HTMLElement) {
+        previousFocusRef.current.focus();
+      }
+    };
+  }, [active, containerRef]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key !== "Tab" || !containerRef.current) return;
+
+      const focusable = Array.from(
+        containerRef.current.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),
+      );
+      if (focusable.length === 0) return;
+
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+
+      if (e.shiftKey && document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    },
+    [containerRef],
+  );
+
+  return handleKeyDown;
+}
+
+/* ------------------------------- Scroll Lock ------------------------------ */
+
+function useScrollLock(active: boolean) {
+  useEffect(() => {
+    if (!active) return;
+
+    const original = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+
+    return () => {
+      document.body.style.overflow = original;
+    };
+  }, [active]);
+}
+
+/* ------------------------------ AlertDialog ------------------------------ */
+
+interface AlertDialogProps {
+  children: React.ReactNode;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+function AlertDialog({ children, open, onOpenChange }: AlertDialogProps) {
+  const titleId = useId();
+  const descriptionId = useId();
+
+  return (
+    <AlertDialogContext.Provider
+      value={{ open, onOpenChange, titleId, descriptionId }}
+    >
+      {children}
+    </AlertDialogContext.Provider>
+  );
+}
+
+/* --------------------------- AlertDialogTrigger --------------------------- */
+
+function AlertDialogTrigger({
+  className,
+  onClick,
+  ...props
+}: React.ComponentProps<"button">) {
+  const { onOpenChange } = useAlertDialogContext();
+
+  return (
+    <button
+      type="button"
+      data-slot="alert-dialog-trigger"
+      className={className}
+      onClick={(e) => {
+        onOpenChange(true);
+        onClick?.(e);
+      }}
+      {...props}
+    />
+  );
+}
+
+/* ----------------------------- AlertDialogPortal ----------------------------- */
+
+function AlertDialogPortal({ children }: { children: React.ReactNode }) {
+  return createPortal(children, document.body);
+}
+
+/* --------------------------- AlertDialogBackdrop -------------------------- */
+
+function AlertDialogBackdrop({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  const { onOpenChange } = useAlertDialogContext();
+
+  return (
+    <div
+      data-slot="alert-dialog-backdrop"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/50 transition-opacity data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
+        className,
+      )}
+      data-state="open"
+      onClick={() => onOpenChange(false)}
+      {...props}
+    />
+  );
+}
+
+/* --------------------------- AlertDialogContent --------------------------- */
+
+function AlertDialogContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div">) {
+  const { open, onOpenChange, titleId, descriptionId } =
+    useAlertDialogContext();
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  // Focus trap
+  const handleFocusTrap = useFocusTrap(contentRef, open);
+
+  // Scroll lock
+  useScrollLock(open);
+
+  // Escape key
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onOpenChange(false);
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [open, onOpenChange]);
+
+  if (!open) return null;
+
+  return (
+    <AlertDialogPortal>
+      <AlertDialogBackdrop />
+      <div
+        ref={contentRef}
+        role="alertdialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+        aria-describedby={descriptionId}
+        data-slot="alert-dialog-content"
+        data-state="open"
+        className={cn(
+          "bg-background fixed top-1/2 left-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border p-6 shadow-lg transition-all data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+          className,
+        )}
+        onKeyDown={handleFocusTrap}
+        {...props}
+      >
+        {children}
+      </div>
+    </AlertDialogPortal>
+  );
+}
+
+/* -------------------------------- Layout --------------------------------- */
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        "flex flex-col gap-2 text-center sm:text-left",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/* ------------------------------- Title/Desc ------------------------------ */
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<"h2">) {
+  const { titleId } = useAlertDialogContext();
+
+  return (
+    <h2
+      id={titleId}
+      data-slot="alert-dialog-title"
+      className={cn("text-lg font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<"p">) {
+  const { descriptionId } = useAlertDialogContext();
+
+  return (
+    <p
+      id={descriptionId}
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+/* -------------------------------- Actions -------------------------------- */
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<"button">) {
+  return (
+    <button
+      type="button"
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<"button">) {
+  return (
+    <button
+      type="button"
+      className={cn(buttonVariants({ variant: "outline" }), className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogPortal,
+  AlertDialogBackdrop,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

package/src/ui/alert.tsx

@@ -0,0 +1,65 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../lib/utils";
+
+const alertVariants = cva(
+  "relative flex w-full items-start gap-3 rounded-lg border p-4 text-sm [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:translate-y-0.5",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-foreground",
+        destructive:
+          "border-destructive/50 bg-destructive/5 text-destructive [&>svg]:text-destructive",
+        success:
+          "border-success/50 bg-success/5 text-success [&>svg]:text-success",
+        warning:
+          "border-warning/50 bg-warning/5 text-warning [&>svg]:text-warning",
+        info: "border-info/50 bg-info/5 text-info [&>svg]:text-info",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn("font-medium leading-normal tracking-tight", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn("text-foreground text-sm [&_p]:leading-relaxed", className)}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription, alertVariants };

package/src/ui/avatar.tsx

@@ -0,0 +1,52 @@
+import * as React from "react";
+
+import { cn } from "../lib/utils";
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-9 shrink-0 overflow-hidden rounded-full",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarImage({
+  className,
+  onError,
+  ...props
+}: React.ComponentProps<"img">) {
+  return (
+    <img
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full object-cover", className)}
+      onError={onError}
+      {...props}
+    />
+  );
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-xs font-medium",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Avatar, AvatarImage, AvatarFallback };

package/src/ui/badge.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../lib/utils";
+import { Slot } from "./slot";
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border px-2.5 py-0.5 text-xs font-medium whitespace-nowrap transition-colors [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground",
+        outline: "text-foreground",
+        success:
+          "border-transparent bg-success/15 text-success",
+        warning:
+          "border-transparent bg-warning/15 text-warning",
+        info:
+          "border-transparent bg-info/15 text-info",
+        muted:
+          "border-transparent bg-muted text-muted-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span";
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Badge, badgeVariants };

package/src/ui/button.tsx

@@ -0,0 +1,62 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../lib/utils";
+import { Slot } from "./slot";
+
+const buttonVariants = cva(
+  "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };

package/src/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react";
+
+import { cn } from "../lib/utils";
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground rounded-xl border shadow-sm",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "flex flex-col gap-1.5 px-6 pt-6 has-data-[slot=card-action]:flex-row has-data-[slot=card-action]:items-center has-data-[slot=card-action]:justify-between",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6 pb-6 pt-0", className)}
+      {...props}
+    />
+  );
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 pb-6 pt-0", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+};

package/src/ui/index.ts

@@ -0,0 +1,44 @@
+export { Button, buttonVariants } from "./button";
+export { Input } from "./input";
+export { Textarea } from "./textarea";
+export { Badge, badgeVariants } from "./badge";
+export { Alert, AlertTitle, AlertDescription, alertVariants } from "./alert";
+export { Separator } from "./separator";
+export {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogPortal,
+  AlertDialogBackdrop,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+} from "./alert-dialog";
+export { Avatar, AvatarImage, AvatarFallback } from "./avatar";
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+} from "./card";
+export { Tabs, TabsList, TabsTrigger, TabsContent } from "./tabs";
+export { Progress, progressVariants } from "./progress";
+export type { ProgressProps } from "./progress";
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableRow,
+  TableHead,
+  TableCell,
+  TableCaption,
+} from "./table";
+export { Skeleton } from "./skeleton";
+export { Tooltip, TooltipTrigger, TooltipContent } from "./tooltip";