domify-ui 1.0.0

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "domify-ui",
+  "version": "1.0.0",
+  "private": false,
+  "description": "Domify - Shared UI Library",
+  "author": "Hilthermann Viegas",
+  "license": "MIT",
+  "keywords": [
+    "domify",
+    "ui",
+    "library"
+  ],
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "peerDependencies": {
+    "next": "^15.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.460.0",
+    "tailwind-merge": "^2.5.4"
+  }
+}

package/src/button.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "./utils";
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "default" | "secondary" | "destructive" | "outline" | "ghost";
+  size?: "default" | "sm" | "lg";
+}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = "default", size = "default", ...props }, ref) => {
+    return (
+      <button
+        className={cn(
+          "inline-flex items-center justify-center text-sm transition-all",
+          "font-medium rounded-[10px]",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[#0052CC]",
+          "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed",
+          {
+            "bg-[#0052CC] text-white hover:bg-[#003d99] active:bg-[#002d73] shadow-sm hover:shadow-md":
+              variant === "default",
+            "bg-[#FF7A00] text-white hover:bg-[#e66d00] active:bg-[#cc6000] shadow-sm hover:shadow-md":
+              variant === "secondary",
+            "bg-red-600 text-white hover:bg-red-700 active:bg-red-800 shadow-sm hover:shadow-md":
+              variant === "destructive",
+            "border-2 border-[#0052CC] bg-white text-[#0052CC] hover:bg-[#f0f5ff] hover:border-[#003d99]":
+              variant === "outline",
+            "text-[#4A4A4A] hover:bg-gray-100 active:bg-gray-200":
+              variant === "ghost",
+          },
+          {
+            "h-11 px-5 py-2.5": size === "default",
+            "h-9 px-3 py-2 text-xs": size === "sm",
+            "h-12 px-8 py-3": size === "lg",
+          },
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+
+Button.displayName = "Button";

package/src/checkbox.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { cn } from "./utils";
+
+export interface CheckboxProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+}
+
+export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  ({ className, label, ...props }, ref) => {
+    return (
+      <label className="flex items-center gap-2 cursor-pointer">
+        <input
+          type="checkbox"
+          className={cn(
+            "w-5 h-5 rounded border-2 border-gray-300 text-blue-600 transition-all",
+            "hover:border-gray-400",
+            "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            "cursor-pointer",
+            className,
+          )}
+          ref={ref}
+          {...props}
+        />
+        {label ? (
+          <span className="text-sm font-medium text-gray-700 select-none">
+            {label}
+          </span>
+        ) : null}
+      </label>
+    );
+  },
+);
+
+Checkbox.displayName = "Checkbox";

package/src/currency-input.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import * as React from "react";
+import { Input, InputProps } from "./input";
+import { cn } from "./utils";
+import { maskCurrency, unmaskCurrency } from "./masks";
+
+interface CurrencyInputProps extends Omit<InputProps, "type" | "value" | "onChange"> {
+  value?: number | string;
+  onChange?: (value: number) => void;
+  error?: boolean;
+}
+
+export const CurrencyInput = React.forwardRef<HTMLInputElement, CurrencyInputProps>(
+  ({ className, value, onChange, error, ...props }, ref) => {
+    const [displayValue, setDisplayValue] = React.useState<string>("");
+
+    React.useEffect(() => {
+      if (value === undefined || value === null || value === "" || value === 0) {
+        setDisplayValue("");
+        return;
+      }
+      const numValue = typeof value === "string" ? parseFloat(value) : value;
+      setDisplayValue(!isNaN(numValue) && numValue > 0 ? maskCurrency(numValue) : "");
+    }, [value]);
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const inputValue = e.target.value;
+      const cleaned = inputValue.replace(/[^\d,.-]/g, "");
+
+      if (cleaned === "" || cleaned.replace(/\D/g, "") === "") {
+        setDisplayValue("");
+        onChange?.(0);
+        return;
+      }
+
+      setDisplayValue(cleaned);
+      onChange?.(unmaskCurrency(cleaned));
+    };
+
+    const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+      const cleaned = e.target.value.replace(/[^\d,.-]/g, "");
+      if (cleaned === "" || cleaned.replace(/\D/g, "") === "") {
+        setDisplayValue("");
+        onChange?.(0);
+      } else {
+        const numericValue = unmaskCurrency(cleaned);
+        setDisplayValue(maskCurrency(numericValue));
+        onChange?.(numericValue);
+      }
+      props.onBlur?.(e);
+    };
+
+    return (
+      <div className="relative">
+        <span className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-500 text-sm">R$</span>
+        <Input
+          {...props}
+          ref={ref}
+          type="text"
+          value={displayValue}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          className={cn("pl-10", error && "border-red-500 focus:ring-red-500 focus:border-red-500", className)}
+          placeholder="0,00"
+        />
+      </div>
+    );
+  },
+);
+
+CurrencyInput.displayName = "CurrencyInput";

package/src/index.ts

@@ -0,0 +1,12 @@
+export * from "./button";
+export * from "./input";
+export * from "./select";
+export * from "./textarea";
+export * from "./checkbox";
+export * from "./switch";
+export * from "./tabs";
+export * from "./pagination";
+export * from "./skeleton";
+export * from "./searchable-select";
+export * from "./currency-input";
+export * from "./logo";

package/src/input.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { cn } from "./utils";
+
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-11 w-full rounded-lg border-2 border-gray-300 bg-white px-4 py-2.5 text-sm text-[#0B2346] placeholder:text-[#888888] transition-all",
+          "hover:border-gray-400",
+          "focus:outline-none focus:ring-2 focus:ring-[#0052CC] focus:border-[#0052CC]",
+          "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-gray-50",
+          className,
+        )}
+        style={{ fontFamily: "Inter, sans-serif" }}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+
+Input.displayName = "Input";

package/src/logo.tsx

@@ -0,0 +1,50 @@
+import * as React from "react";
+import Image from "next/image";
+import { cn } from "./utils";
+
+export interface LogoProps extends React.HTMLAttributes<HTMLDivElement> {
+  size?: "sm" | "md" | "lg" | "xl";
+  showTagline?: boolean;
+  variant?: "blue" | "orange" | "white" | "black";
+}
+
+const sizeClasses = {
+  sm: { width: 100, height: 30 },
+  md: { width: 140, height: 42 },
+  lg: { width: 180, height: 54 },
+  xl: { width: 220, height: 66 },
+};
+
+export const DomifyLogo = React.forwardRef<HTMLDivElement, LogoProps>(
+  ({ className, size = "md", showTagline = false, variant = "orange", ...props }, ref) => {
+    const taglineColor = variant === "orange" ? "text-[#FF7A00]" : "text-gray-300";
+    const logoSrc = `/logo_${variant}.png`;
+    const dimensions = sizeClasses[size];
+
+    return (
+      <div ref={ref} className={cn("inline-block", className)} {...props}>
+        <Image
+          src={logoSrc}
+          alt="Domify"
+          width={dimensions.width}
+          height={dimensions.height}
+          priority
+          className="object-contain"
+          style={{ width: "auto", height: "auto" }}
+        />
+        {showTagline ? (
+          <p
+            className={cn("text-xs mt-1", taglineColor, {
+              "mt-0.5": size === "sm",
+            })}
+            style={{ fontFamily: "Inter", fontWeight: 300 }}
+          >
+            Gestao Inteligente de Imoveis
+          </p>
+        ) : null}
+      </div>
+    );
+  },
+);
+
+DomifyLogo.displayName = "DomifyLogo";

package/src/masks.ts

@@ -0,0 +1,38 @@
+export function maskCurrency(value: string | number): string {
+  const numValue =
+    typeof value === "string"
+      ? parseFloat(value.replace(/\D/g, "")) / 100
+      : typeof value === "number"
+        ? value
+        : 0;
+
+  if (isNaN(numValue) || numValue === 0) return "";
+
+  return new Intl.NumberFormat("pt-BR", {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  }).format(numValue);
+}
+
+export function unmaskCurrency(value: string): number {
+  if (!value || value.trim() === "") return 0;
+
+  const cleaned = value.replace(/[^\d,.-]/g, "");
+  if (cleaned === "") return 0;
+
+  if (cleaned.includes(",")) {
+    const normalized = cleaned.replace(/\./g, "").replace(",", ".");
+    const numValue = parseFloat(normalized);
+    return isNaN(numValue) ? 0 : numValue;
+  }
+
+  const parts = cleaned.split(".");
+  if (parts.length === 2 && parts[1].length <= 2) {
+    return parseFloat(cleaned) || 0;
+  }
+  if (parts.length > 1) {
+    return parseFloat(cleaned.replace(/\./g, "")) || 0;
+  }
+
+  return parseFloat(cleaned) || 0;
+}

package/src/pagination.tsx

@@ -0,0 +1,161 @@
+"use client";
+
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
+import { Button } from "./button";
+
+interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  totalItems: number;
+  perPage: number;
+  onPageChange: (page: number) => void;
+  className?: string;
+}
+
+export function Pagination({
+  currentPage,
+  totalPages,
+  totalItems,
+  perPage,
+  onPageChange,
+  className = "",
+}: PaginationProps) {
+  const startItem = (currentPage - 1) * perPage + 1;
+  const endItem = Math.min(currentPage * perPage, totalItems);
+
+  const getPageNumbers = () => {
+    const pages: (number | string)[] = [];
+    const maxVisiblePages = 5;
+
+    if (totalPages <= maxVisiblePages) {
+      for (let i = 1; i <= totalPages; i++) pages.push(i);
+      return pages;
+    }
+
+    pages.push(1);
+    if (currentPage > 3) pages.push("...");
+
+    const start = Math.max(2, currentPage - 1);
+    const end = Math.min(totalPages - 1, currentPage + 1);
+    for (let i = start; i <= end; i++) {
+      if (!pages.includes(i)) pages.push(i);
+    }
+
+    if (currentPage < totalPages - 2) pages.push("...");
+    if (!pages.includes(totalPages)) pages.push(totalPages);
+
+    return pages;
+  };
+
+  if (totalPages <= 1) {
+    return (
+      <div className={`flex items-center justify-center text-sm text-[#888888] ${className}`}>
+        Mostrando {totalItems} de {totalItems} {totalItems === 1 ? "item" : "itens"}
+      </div>
+    );
+  }
+
+  return (
+    <div className={`flex flex-col sm:flex-row items-center justify-between gap-4 ${className}`}>
+      <div className="text-sm text-[#888888]" style={{ fontFamily: "Inter" }}>
+        Mostrando {startItem} a {endItem} de {totalItems} {totalItems === 1 ? "item" : "itens"}
+      </div>
+
+      <div className="flex items-center gap-1">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => onPageChange(1)}
+          disabled={currentPage === 1}
+          className="hidden sm:flex"
+        >
+          <ChevronsLeft size={16} />
+        </Button>
+
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => onPageChange(currentPage - 1)}
+          disabled={currentPage === 1}
+        >
+          <ChevronLeft size={16} />
+        </Button>
+
+        <div className="flex items-center gap-1">
+          {getPageNumbers().map((page, index) =>
+            page === "..." ? (
+              <span key={`ellipsis-${index}`} className="px-2 text-[#888888]">
+                ...
+              </span>
+            ) : (
+              <Button
+                key={page}
+                variant={currentPage === page ? "default" : "outline"}
+                size="sm"
+                onClick={() => onPageChange(page as number)}
+                className="min-w-[36px]"
+              >
+                {page}
+              </Button>
+            ),
+          )}
+        </div>
+
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => onPageChange(currentPage + 1)}
+          disabled={currentPage === totalPages}
+        >
+          <ChevronRight size={16} />
+        </Button>
+
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => onPageChange(totalPages)}
+          disabled={currentPage === totalPages}
+          className="hidden sm:flex"
+        >
+          <ChevronsRight size={16} />
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export function PaginationCompact({
+  currentPage,
+  totalPages,
+  onPageChange,
+}: Pick<PaginationProps, "currentPage" | "totalPages" | "onPageChange">) {
+  if (totalPages <= 1) return null;
+
+  return (
+    <div className="flex items-center justify-center gap-4">
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => onPageChange(currentPage - 1)}
+        disabled={currentPage === 1}
+      >
+        <ChevronLeft size={16} />
+        Anterior
+      </Button>
+
+      <span className="text-sm text-[#888888]" style={{ fontFamily: "Inter" }}>
+        Pagina {currentPage} de {totalPages}
+      </span>
+
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => onPageChange(currentPage + 1)}
+        disabled={currentPage === totalPages}
+      >
+        Proxima
+        <ChevronRight size={16} />
+      </Button>
+    </div>
+  );
+}

package/src/searchable-select.tsx

@@ -0,0 +1,179 @@
+"use client";
+
+import * as React from "react";
+import { Search, ChevronDown } from "lucide-react";
+import { cn } from "./utils";
+
+export interface SearchableSelectOption {
+  id: number | string;
+  label: string;
+  [key: string]: unknown;
+}
+
+export interface SearchableSelectProps {
+  options: SearchableSelectOption[];
+  value?: number | string | null;
+  onChange?: (value: number | string | null) => void;
+  onBlur?: () => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+  getOptionLabel?: (option: SearchableSelectOption) => string;
+  filterFunction?: (option: SearchableSelectOption, searchTerm: string) => boolean;
+  emptyMessage?: string;
+  name?: string;
+}
+
+export const SearchableSelect = React.forwardRef<
+  HTMLInputElement,
+  SearchableSelectProps
+>(
+  (
+    {
+      options,
+      value,
+      onChange,
+      onBlur,
+      placeholder = "Selecione uma opcao...",
+      disabled = false,
+      className,
+      getOptionLabel = (option) => option.label,
+      filterFunction,
+      emptyMessage = "Nenhuma opcao encontrada",
+      name,
+    },
+    ref,
+  ) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [searchTerm, setSearchTerm] = React.useState("");
+    const containerRef = React.useRef<HTMLDivElement>(null);
+    const inputRef = React.useRef<HTMLInputElement>(null);
+    const listRef = React.useRef<HTMLUListElement>(null);
+
+    const selectedOption = React.useMemo(
+      () => options.find((opt) => opt.id === value) || null,
+      [options, value],
+    );
+
+    const filteredOptions = React.useMemo(() => {
+      if (!searchTerm.trim()) return options;
+      const term = searchTerm.toLowerCase().trim();
+      if (filterFunction) return options.filter((option) => filterFunction(option, term));
+      return options.filter((option) => getOptionLabel(option).toLowerCase().includes(term));
+    }, [options, searchTerm, getOptionLabel, filterFunction]);
+
+    React.useEffect(() => {
+      const handleClickOutside = (event: MouseEvent) => {
+        if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+          setIsOpen(false);
+          setSearchTerm("");
+        }
+      };
+
+      if (!isOpen) return;
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [isOpen]);
+
+    React.useEffect(() => {
+      if (!isOpen || !listRef.current || !selectedOption) return;
+      const selectedIndex = filteredOptions.findIndex((opt) => opt.id === selectedOption.id);
+      if (selectedIndex < 0) return;
+      const selectedElement = listRef.current.children[selectedIndex] as HTMLElement;
+      selectedElement?.scrollIntoView({ block: "nearest" });
+    }, [isOpen, selectedOption, filteredOptions]);
+
+    const handleSelect = (option: SearchableSelectOption) => {
+      onChange?.(option.id);
+      setIsOpen(false);
+      setSearchTerm("");
+      onBlur?.();
+    };
+
+    const handleToggle = () => {
+      if (disabled) return;
+      setIsOpen((prev) => !prev);
+      setTimeout(() => inputRef.current?.focus(), 0);
+    };
+
+    const displayValue = selectedOption ? getOptionLabel(selectedOption) : "";
+
+    return (
+      <div ref={containerRef} className={cn("relative w-full", className)}>
+        <div
+          className={cn(
+            "flex h-11 w-full rounded-lg border-2 bg-white px-4 py-2.5 text-sm text-gray-900 transition-all cursor-pointer",
+            "hover:border-gray-400",
+            "focus-within:outline-none focus-within:ring-2 focus-within:ring-blue-500 focus-within:border-blue-500",
+            disabled && "cursor-not-allowed opacity-50 bg-gray-50 hover:border-gray-300",
+            !isOpen && "border-gray-300",
+          )}
+          onClick={handleToggle}
+        >
+          <div className="flex items-center flex-1 min-w-0">
+            {!isOpen && !displayValue ? <span className="text-gray-500">{placeholder}</span> : null}
+            {!isOpen && displayValue ? <span className="truncate">{displayValue}</span> : null}
+            {isOpen ? (
+              <input
+                ref={inputRef}
+                type="text"
+                value={searchTerm}
+                onChange={(e) => {
+                  if (disabled) return;
+                  setSearchTerm(e.target.value);
+                  setIsOpen(true);
+                }}
+                placeholder={placeholder}
+                className="flex-1 outline-none bg-transparent text-gray-900 placeholder:text-gray-500"
+                onClick={(e) => e.stopPropagation()}
+                disabled={disabled}
+              />
+            ) : null}
+          </div>
+
+          <div className="flex items-center gap-2 ml-2">
+            <Search size={18} className={cn("text-gray-500 transition-transform", isOpen && "rotate-90")} />
+            <ChevronDown
+              size={18}
+              className={cn("text-gray-500 transition-transform", isOpen && "rotate-180")}
+            />
+          </div>
+        </div>
+
+        {isOpen ? (
+          <div className="absolute z-50 w-full mt-1 bg-white border-2 border-gray-300 rounded-lg shadow-lg max-h-60 overflow-hidden">
+            <ul ref={listRef} className="overflow-y-auto max-h-60 py-1" role="listbox">
+              {filteredOptions.length === 0 ? (
+                <li className="px-4 py-3 text-sm text-gray-500 text-center">{emptyMessage}</li>
+              ) : (
+                filteredOptions.map((option) => {
+                  const isSelected = option.id === value;
+                  const label = getOptionLabel(option);
+                  return (
+                    <li
+                      key={option.id}
+                      role="option"
+                      aria-selected={isSelected}
+                      className={cn(
+                        "px-4 py-2 cursor-pointer text-sm transition-colors",
+                        "hover:bg-blue-50 hover:text-blue-900",
+                        isSelected && "bg-blue-100 text-blue-900 font-medium",
+                      )}
+                      onClick={() => handleSelect(option)}
+                    >
+                      {label}
+                    </li>
+                  );
+                })
+              )}
+            </ul>
+          </div>
+        ) : null}
+
+        {name ? <input ref={ref} type="hidden" name={name} value={value || ""} readOnly /> : null}
+      </div>
+    );
+  },
+);
+
+SearchableSelect.displayName = "SearchableSelect";

package/src/select.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { cn } from "./utils";
+
+export type SelectProps = React.SelectHTMLAttributes<HTMLSelectElement>;
+
+export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <select
+        className={cn(
+          "flex h-11 w-full rounded-lg border-2 border-gray-300 bg-white px-4 py-2.5 text-sm text-gray-900 transition-all",
+          "hover:border-gray-400",
+          "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
+          "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-gray-50",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+
+Select.displayName = "Select";

package/src/skeleton.tsx

@@ -0,0 +1,191 @@
+"use client";
+
+import { cn } from "./utils";
+
+interface SkeletonProps {
+  className?: string;
+}
+
+export function Skeleton({ className }: SkeletonProps) {
+  return <div className={cn("animate-pulse rounded-md bg-gray-200", className)} />;
+}
+
+export function PropertyCardSkeleton() {
+  return (
+    <div className="bg-white rounded-lg shadow overflow-hidden">
+      <Skeleton className="h-48 w-full rounded-none" />
+      <div className="p-4 space-y-3">
+        <Skeleton className="h-4 w-1/4" />
+        <Skeleton className="h-6 w-3/4" />
+        <Skeleton className="h-4 w-1/2" />
+        <div className="flex gap-4 pt-2">
+          <Skeleton className="h-4 w-16" />
+          <Skeleton className="h-4 w-16" />
+          <Skeleton className="h-4 w-16" />
+        </div>
+        <div className="flex justify-between pt-4">
+          <Skeleton className="h-6 w-24" />
+          <Skeleton className="h-8 w-20" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function TableRowSkeleton({ columns = 5 }: { columns?: number }) {
+  return (
+    <tr className="border-b border-gray-100">
+      {Array.from({ length: columns }).map((_, i) => (
+        <td key={i} className="px-4 py-3">
+          <Skeleton className="h-4 w-full" />
+        </td>
+      ))}
+    </tr>
+  );
+}
+
+export function TableSkeleton({
+  rows = 5,
+  columns = 5,
+}: {
+  rows?: number;
+  columns?: number;
+}) {
+  return (
+    <div className="bg-white rounded-lg shadow overflow-hidden">
+      <div className="overflow-x-auto">
+        <table className="w-full">
+          <thead className="bg-gray-50">
+            <tr>
+              {Array.from({ length: columns }).map((_, i) => (
+                <th key={i} className="px-4 py-3 text-left">
+                  <Skeleton className="h-4 w-20" />
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {Array.from({ length: rows }).map((_, i) => (
+              <TableRowSkeleton key={i} columns={columns} />
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+export function ListItemSkeleton() {
+  return (
+    <div className="flex items-center gap-4 p-4 bg-white rounded-lg shadow">
+      <Skeleton className="h-12 w-12 rounded-full" />
+      <div className="flex-1 space-y-2">
+        <Skeleton className="h-4 w-1/3" />
+        <Skeleton className="h-3 w-1/2" />
+      </div>
+      <Skeleton className="h-8 w-20" />
+    </div>
+  );
+}
+
+export function StatsCardSkeleton() {
+  return (
+    <div className="bg-white rounded-lg shadow p-6">
+      <div className="flex items-center justify-between">
+        <div className="space-y-2">
+          <Skeleton className="h-4 w-24" />
+          <Skeleton className="h-8 w-16" />
+        </div>
+        <Skeleton className="h-12 w-12 rounded-full" />
+      </div>
+    </div>
+  );
+}
+
+export function FormSkeleton({ fields = 4 }: { fields?: number }) {
+  return (
+    <div className="bg-white rounded-lg shadow p-6 space-y-6">
+      {Array.from({ length: fields }).map((_, i) => (
+        <div key={i} className="space-y-2">
+          <Skeleton className="h-4 w-24" />
+          <Skeleton className="h-10 w-full" />
+        </div>
+      ))}
+      <div className="flex justify-end gap-4 pt-4">
+        <Skeleton className="h-10 w-24" />
+        <Skeleton className="h-10 w-32" />
+      </div>
+    </div>
+  );
+}
+
+export function DetailPageSkeleton() {
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div className="space-y-2">
+          <Skeleton className="h-8 w-48" />
+          <Skeleton className="h-4 w-32" />
+        </div>
+        <div className="flex gap-2">
+          <Skeleton className="h-10 w-24" />
+          <Skeleton className="h-10 w-24" />
+        </div>
+      </div>
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <div className="lg:col-span-2 space-y-6">
+          <div className="bg-white rounded-lg shadow p-6 space-y-4">
+            <Skeleton className="h-6 w-32" />
+            <Skeleton className="h-4 w-full" />
+            <Skeleton className="h-4 w-full" />
+            <Skeleton className="h-4 w-3/4" />
+          </div>
+          <div className="bg-white rounded-lg shadow p-6 space-y-4">
+            <Skeleton className="h-6 w-32" />
+            <div className="grid grid-cols-2 gap-4">
+              {Array.from({ length: 6 }).map((_, i) => (
+                <div key={i} className="space-y-1">
+                  <Skeleton className="h-4 w-20" />
+                  <Skeleton className="h-4 w-28" />
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+        <div className="space-y-6">
+          <div className="bg-white rounded-lg shadow p-6 space-y-4">
+            <Skeleton className="h-6 w-24" />
+            <Skeleton className="h-8 w-full" />
+            <Skeleton className="h-4 w-full" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function DashboardSkeleton() {
+  return (
+    <div className="space-y-6">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <StatsCardSkeleton key={i} />
+        ))}
+      </div>
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <div className="bg-white rounded-lg shadow p-6">
+          <Skeleton className="h-6 w-32 mb-4" />
+          <Skeleton className="h-64 w-full" />
+        </div>
+        <div className="bg-white rounded-lg shadow p-6">
+          <Skeleton className="h-6 w-32 mb-4" />
+          <div className="space-y-4">
+            {Array.from({ length: 5 }).map((_, i) => (
+              <ListItemSkeleton key={i} />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/switch.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "./utils";
+
+export interface SwitchProps {
+  id?: string;
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+export const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
+  (
+    { id, checked = false, onCheckedChange, disabled = false, className },
+    ref,
+  ) => {
+    const handleClick = () => {
+      if (!disabled && onCheckedChange) {
+        onCheckedChange(!checked);
+      }
+    };
+
+    return (
+      <button
+        type="button"
+        id={id}
+        role="switch"
+        aria-checked={checked}
+        disabled={disabled}
+        onClick={handleClick}
+        ref={ref}
+        className={cn(
+          "relative inline-flex h-6 w-11 items-center rounded-full transition-colors",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          checked ? "bg-[#0052CC]" : "bg-gray-300",
+          className,
+        )}
+      >
+        <span
+          className={cn(
+            "inline-block h-5 w-5 transform rounded-full bg-white shadow-sm transition-transform",
+            checked ? "translate-x-6" : "translate-x-0.5",
+          )}
+        />
+      </button>
+    );
+  },
+);
+
+Switch.displayName = "Switch";

package/src/tabs.tsx

@@ -0,0 +1,121 @@
+import * as React from "react";
+import { cn } from "./utils";
+
+interface TabsContextValue {
+  value: string;
+  onValueChange: (value: string) => void;
+}
+
+const TabsContext = React.createContext<TabsContextValue | undefined>(undefined);
+
+function useTabsContext() {
+  const context = React.useContext(TabsContext);
+  if (!context) {
+    throw new Error("Tabs components must be used within a Tabs component");
+  }
+  return context;
+}
+
+interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
+  defaultValue: string;
+  onValueChange?: (value: string) => void;
+}
+
+export function Tabs({
+  defaultValue,
+  onValueChange,
+  children,
+  className,
+  ...props
+}: TabsProps) {
+  const [value, setValue] = React.useState(defaultValue);
+
+  const handleValueChange = React.useCallback(
+    (newValue: string) => {
+      setValue(newValue);
+      onValueChange?.(newValue);
+    },
+    [onValueChange],
+  );
+
+  return (
+    <TabsContext.Provider value={{ value, onValueChange: handleValueChange }}>
+      <div className={cn("w-full", className)} {...props}>
+        {children}
+      </div>
+    </TabsContext.Provider>
+  );
+}
+
+type TabsListProps = React.HTMLAttributes<HTMLDivElement>;
+
+export function TabsList({ children, className, ...props }: TabsListProps) {
+  return (
+    <div
+      className={cn(
+        "inline-flex h-10 items-center justify-center rounded-lg bg-gray-100 p-1 text-gray-500",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+interface TabsTriggerProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  value: string;
+}
+
+export function TabsTrigger({
+  value,
+  children,
+  className,
+  ...props
+}: TabsTriggerProps) {
+  const { value: selectedValue, onValueChange } = useTabsContext();
+  const isSelected = value === selectedValue;
+
+  return (
+    <button
+      type="button"
+      role="tab"
+      aria-selected={isSelected}
+      onClick={() => onValueChange(value)}
+      className={cn(
+        "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium transition-all",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2",
+        "disabled:pointer-events-none disabled:opacity-50",
+        isSelected
+          ? "bg-white text-gray-900 shadow-sm"
+          : "text-gray-600 hover:bg-gray-50 hover:text-gray-900",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
+
+interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  value: string;
+}
+
+export function TabsContent({
+  value,
+  children,
+  className,
+  ...props
+}: TabsContentProps) {
+  const { value: selectedValue } = useTabsContext();
+
+  if (value !== selectedValue) return null;
+
+  return (
+    <div role="tabpanel" className={cn("mt-2", className)} {...props}>
+      {children}
+    </div>
+  );
+}

package/src/textarea.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { cn } from "./utils";
+
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[100px] w-full rounded-lg border-2 border-gray-300 bg-white px-4 py-3 text-sm text-gray-900 placeholder:text-gray-500 transition-all",
+          "hover:border-gray-400",
+          "focus:outline-none focus:ring-2 focus:ring-[#0052CC] focus:border-[#0052CC]",
+          "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-gray-50",
+          "resize-y",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+
+Textarea.displayName = "Textarea";

package/src/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/tailwind.config.ts

@@ -0,0 +1,11 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  content: ["./src/**/*.{ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
+
+export default config;

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["dom", "es2020"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "declaration": true,
+    "declarationMap": true,
+    "emitDeclarationOnly": true,
+    "outDir": "dist",
+    "baseUrl": "."
+  },
+  "include": ["src/**/*"]
+}