@hydralms/components 0.1.0 → 0.1.2

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";

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 };