@evolution-soft/ui 1.0.0 → 1.0.3

package/components/ui/pagination.tsx

@@ -0,0 +1,127 @@
+import * as React from "react";
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  MoreHorizontalIcon,
+} from "lucide-react";
+
+import { cn } from "./utils";
+import { Button, buttonVariants } from "./button";
+
+function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      data-slot="pagination"
+      className={cn("mx-auto flex w-full justify-center", className)}
+      {...props}
+    />
+  );
+}
+
+function PaginationContent({
+  className,
+  ...props
+}: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="pagination-content"
+      className={cn("flex flex-row items-center gap-1", className)}
+      {...props}
+    />
+  );
+}
+
+function PaginationItem({ ...props }: React.ComponentProps<"li">) {
+  return <li data-slot="pagination-item" {...props} />;
+}
+
+type PaginationLinkProps = {
+  isActive?: boolean;
+} & Pick<React.ComponentProps<typeof Button>, "size"> &
+  React.ComponentProps<"a">;
+
+function PaginationLink({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) {
+  return (
+    <a
+      aria-current={isActive ? "page" : undefined}
+      data-slot="pagination-link"
+      data-active={isActive}
+      className={cn(
+        buttonVariants({
+          variant: isActive ? "outline" : "outline",
+          size,
+        }),
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function PaginationPrevious({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to previous page"
+      size="default"
+      className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
+      {...props}
+    >
+      <ChevronLeftIcon />
+      <span className="hidden sm:block">Previous</span>
+    </PaginationLink>
+  );
+}
+
+function PaginationNext({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to next page"
+      size="default"
+      className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
+      {...props}
+    >
+      <span className="hidden sm:block">Next</span>
+      <ChevronRightIcon />
+    </PaginationLink>
+  );
+}
+
+function PaginationEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      aria-hidden
+      data-slot="pagination-ellipsis"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontalIcon className="size-4" />
+      <span className="sr-only">More pages</span>
+    </span>
+  );
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+};

package/components/ui/popover.tsx

@@ -0,0 +1,48 @@
+
+
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+import { cn } from "./utils";
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className,
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  );
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

package/components/ui/progress.tsx

@@ -0,0 +1,31 @@
+
+
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+
+import { cn } from "./utils";
+
+function Progress({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn(
+        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
+        className,
+      )}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className="bg-primary h-full w-full flex-1 transition-all"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  );
+}
+
+export { Progress };

package/components/ui/radio-group.tsx

@@ -0,0 +1,45 @@
+
+
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { CircleIcon } from "lucide-react";
+
+import { cn } from "./utils";
+
+function RadioGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      className={cn("grid gap-3", className)}
+      {...props}
+    />
+  );
+}
+
+function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        "cursor-pointer border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="relative flex items-center justify-center"
+      >
+        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+}
+
+export { RadioGroup, RadioGroupItem };

package/components/ui/resizable.tsx

@@ -0,0 +1,65 @@
+import * as React from "react";
+import { GripVerticalIcon } from "lucide-react";
+import {
+  Group as ResizableGroup,
+  Panel as ResizablePanelPrimitive,
+  Separator as ResizableSeparator,
+} from "react-resizable-panels";
+
+import { cn } from "./utils";
+
+function ResizablePanelGroup({
+  className,
+  direction,
+  ...props
+}: React.ComponentProps<typeof ResizableGroup> & {
+  direction?: "horizontal" | "vertical";
+}) {
+  const orientation = direction ?? props.orientation;
+
+  return (
+    <ResizableGroup
+      data-slot="resizable-panel-group"
+      data-panel-group-direction={orientation}
+      className={cn(
+        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+        className,
+      )}
+      orientation={orientation}
+      {...props}
+    />
+  );
+}
+
+function ResizablePanel({
+  ...props
+}: React.ComponentProps<typeof ResizablePanelPrimitive>) {
+  return <ResizablePanelPrimitive data-slot="resizable-panel" {...props} />;
+}
+
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizableSeparator> & {
+  withHandle?: boolean;
+}) {
+  return (
+    <ResizableSeparator
+      data-slot="resizable-handle"
+      className={cn(
+        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+        className,
+      )}
+      {...props}
+    >
+      {withHandle && (
+        <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
+          <GripVerticalIcon className="size-2.5" />
+        </div>
+      )}
+    </ResizableSeparator>
+  );
+}
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };

package/components/ui/scroll-area.tsx

@@ -0,0 +1,58 @@
+
+
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+
+import { cn } from "./utils";
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  );
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent",
+        className,
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  );
+}
+
+export { ScrollArea, ScrollBar };

package/components/ui/searchable-select.tsx

@@ -0,0 +1,211 @@
+
+
+import * as React from "react";
+import { Search } from "lucide-react";
+import { cn } from "./utils";
+import { Input } from "./input";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "./select";
+
+export interface SearchableSelectItem {
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+}
+
+interface SearchableSelectProps {
+    items: SearchableSelectItem[];
+    value?: string;
+    onValueChange?: (value: string) => void;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyMessage?: string;
+    className?: string;
+    disabled?: boolean;
+    searchFunction?: (item: SearchableSelectItem, searchTerm: string) => boolean;
+    onSearchChange?: (searchTerm: string) => void;
+    isLoading?: boolean;
+}
+
+const defaultSearchFunction = (item: SearchableSelectItem, searchTerm: string): boolean => {
+    const term = searchTerm.toLowerCase();
+    return (
+        item.label.toLowerCase().includes(term) ||
+        Boolean(item.description && item.description.toLowerCase().includes(term))
+    );
+};
+
+export function SearchableSelect({
+    items,
+    value,
+    onValueChange,
+    placeholder = "Selecione uma opção...",
+    searchPlaceholder = "Pesquisar...",
+    emptyMessage = "Nenhum resultado encontrado",
+    className,
+    disabled = false,
+    searchFunction = defaultSearchFunction,
+    onSearchChange,
+    isLoading = false,
+}: SearchableSelectProps) {
+    const [searchTerm, setSearchTerm] = React.useState("");
+    const [isOpen, setIsOpen] = React.useState(false);
+    const inputRef = React.useRef<HTMLInputElement>(null);
+    const debounceTimerRef = React.useRef<NodeJS.Timeout | null>(null);
+
+    // Chama onSearchChange com debounce quando fornecido
+    React.useEffect(() => {
+        if (onSearchChange) {
+            if (debounceTimerRef.current) {
+                clearTimeout(debounceTimerRef.current);
+            }
+
+            debounceTimerRef.current = setTimeout(() => {
+                onSearchChange(searchTerm);
+            }, 300);
+
+            return () => {
+                if (debounceTimerRef.current) {
+                    clearTimeout(debounceTimerRef.current);
+                }
+            };
+        }
+    }, [searchTerm, onSearchChange]);
+
+    const filteredItems = React.useMemo(() => {
+        // Se tem onSearchChange, não filtra localmente (a filtragem vem da API)
+        if (onSearchChange) {
+            return items;
+        }
+
+        if (!searchTerm.trim()) {
+            return items;
+        }
+        return items.filter((item) => searchFunction(item, searchTerm));
+    }, [items, searchTerm, searchFunction, onSearchChange]);
+
+    const selectedItem = items.find(item => item.value === value);
+
+    const handleSelect = (selectedValue: string) => {
+        onValueChange?.(selectedValue);
+        setIsOpen(false);
+        setSearchTerm("");
+    };
+
+    const handleOpenChange = (open: boolean) => {
+        setIsOpen(open);
+        if (!open) {
+            setSearchTerm("");
+        }
+    };
+
+    return (
+        <Select
+            value={value}
+            onValueChange={handleSelect}
+            onOpenChange={handleOpenChange}
+            open={isOpen}
+            disabled={disabled}
+        >
+            <SelectTrigger className={cn("w-full", className)}>
+                <SelectValue placeholder={placeholder}>
+                    {selectedItem && (
+                        <div className="flex flex-col items-start">
+                            <span className="font-medium">{selectedItem.label}</span>
+                            {selectedItem.description && (
+                                <span className="text-xs text-muted-foreground">
+                                    {selectedItem.description}
+                                </span>
+                            )}
+                        </div>
+                    )}
+                </SelectValue>
+            </SelectTrigger>
+            <SelectContent>
+                {/* Campo de pesquisa */}
+                <div
+                    className="flex items-center border-b px-3 pb-2"
+                    onKeyDown={(e) => {
+                        // Previne a navegação por teclado do Select quando estiver digitando
+                        e.stopPropagation();
+                    }}
+                >
+                    <Search className="mr-2 h-4 w-4 shrink-0 text-muted-foreground" />
+                    <Input
+                        ref={inputRef}
+                        placeholder={searchPlaceholder}
+                        value={searchTerm}
+                        onChange={(e) => setSearchTerm(e.target.value)}
+                        className="h-8 border-0 p-0 text-sm focus-visible:ring-0 focus-visible:ring-offset-0"
+                        autoFocus
+                        onKeyDown={(e) => {
+                            // Previne que Enter feche o select enquanto digita
+                            if (e.key === 'Enter' && searchTerm) {
+                                e.preventDefault();
+                                // Se houver apenas um resultado, seleciona ele
+                                if (filteredItems.length === 1) {
+                                    handleSelect(filteredItems[0].value);
+                                }
+                            }
+                            // Previne que Escape limpe o input antes de fechar
+                            if (e.key === 'Escape' && searchTerm) {
+                                e.preventDefault();
+                                setSearchTerm("");
+                            }
+                        }}
+                    />
+                </div>
+
+                {/* Lista de itens filtrados */}
+                <div className="max-h-50 overflow-auto">
+                    {isLoading ? (
+                        <div className="py-6 text-center">
+                            <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-gray-900 dark:border-gray-100 mx-auto"></div>
+                            <p className="text-xs text-muted-foreground mt-2">Carregando...</p>
+                        </div>
+                    ) : filteredItems.length > 0 ? (
+                        filteredItems.map((item) => (
+                            <SelectItem
+                                key={item.value}
+                                value={item.value}
+                                disabled={item.disabled}
+                                className={cn(
+                                    "flex flex-col items-start py-2",
+                                    item.description && "h-auto"
+                                )}
+                            >
+                                <div className="flex flex-col items-start w-full">
+                                    <span className="font-medium">{item.label}</span>
+                                    {item.description && (
+                                        <span className="text-xs text-muted-foreground mt-0.5">
+                                            {item.description}
+                                        </span>
+                                    )}
+                                </div>
+                            </SelectItem>
+                        ))
+                    ) : (
+                        <div className="py-6 text-center text-sm text-muted-foreground">
+                            {emptyMessage}
+                        </div>
+                    )}
+                </div>
+
+                {/* Contador de resultados */}
+                {searchTerm && (
+                    <div className="border-t px-3 py-2 text-xs text-muted-foreground">
+                        {filteredItems.length} resultado(s) encontrado(s)
+                    </div>
+                )}
+            </SelectContent>
+        </Select>
+    );
+}
+
+export default SearchableSelect;