domify-ui 1.0.2 → 1.0.3

package/src/searchable-select.tsx

@@ -1,179 +0,0 @@
-"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

@@ -1,24 +0,0 @@
-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

@@ -1,191 +0,0 @@
-"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

@@ -1,53 +0,0 @@
-"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

@@ -1,121 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

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

package/tailwind.config.ts

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

package/tsconfig.json

@@ -1,17 +0,0 @@
-{
-  "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/**/*"]
-}

package/tsup.config.ts

@@ -1,16 +0,0 @@
-import { defineConfig } from 'tsup'
-
-export default defineConfig({
-  entry: ['src/index.ts'],
-  format: ['esm', 'cjs'],
-  dts: true,
-  splitting: false,
-  sourcemap: true,
-  clean: true,
-  external: ['react', 'react-dom'],
-  outExtension({ format }) {
-    return {
-      js: format === 'esm' ? '.js' : '.cjs',
-    }
-  },
-})