xertica-ui 1.0.0

package/components/ui/navigation-menu.tsx

@@ -0,0 +1,162 @@
+import * as React from "react";
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import { cva } from "class-variance-authority";
+import { ChevronDownIcon } from "lucide-react";
+
+import { cn } from "./utils";
+
+function NavigationMenu({
+  className,
+  children,
+  viewport = true,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+  viewport?: boolean;
+}) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      className={cn(
+        "relative z-10 flex w-full flex-1 items-center justify-center",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {viewport && <NavigationMenuViewport />}
+    </NavigationMenuPrimitive.Root>
+  );
+}
+
+function NavigationMenuList({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot="navigation-menu-list"
+      className={cn(
+        "group flex flex-1 list-none items-center justify-center gap-1",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function NavigationMenuItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
+  return (
+    <NavigationMenuPrimitive.Item
+      data-slot="navigation-menu-item"
+      className={cn("relative", className)}
+      {...props}
+    />
+  );
+}
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-10 w-max items-center justify-center rounded-[var(--radius)] bg-background px-4 py-2 text-[var(--text-p)] font-[var(--font-weight-medium)] hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-accent/50 outline-none focus-visible:ring-2 focus-visible:ring-ring"
+);
+
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      className={cn(navigationMenuTriggerStyle(), "group", className)}
+      {...props}
+    >
+      {children}{" "}
+      <ChevronDownIcon
+        className="relative top-[1px] ml-1 size-3 group-data-[state=open]:rotate-180"
+        aria-hidden="true"
+      />
+    </NavigationMenuPrimitive.Trigger>
+  );
+}
+
+function NavigationMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={cn(
+        "left-0 top-0 w-full md:w-auto",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function NavigationMenuViewport({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
+  return (
+    <div className={cn("absolute left-0 top-full flex justify-center w-full")}>
+      <NavigationMenuPrimitive.Viewport
+        data-slot="navigation-menu-viewport"
+        className={cn(
+          "origin-top-center relative mt-1.5 overflow-hidden rounded-[var(--radius)] border border-border bg-popover text-popover-foreground shadow-lg",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function NavigationMenuLink({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      className={cn(
+        "block select-none space-y-1 rounded-[var(--radius)] p-3 leading-none no-underline outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function NavigationMenuIndicator({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
+  return (
+    <NavigationMenuPrimitive.Indicator
+      data-slot="navigation-menu-indicator"
+      className={cn(
+        "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
+        className
+      )}
+      {...props}
+    >
+      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
+    </NavigationMenuPrimitive.Indicator>
+  );
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+  navigationMenuTriggerStyle,
+};

package/components/ui/notification-badge.tsx

@@ -0,0 +1,61 @@
+import * as React from "react";
+import { cn } from "./utils";
+
+interface NotificationBadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+  count?: number;
+  max?: number;
+  showZero?: boolean;
+  dot?: boolean;
+  variant?: "default" | "primary" | "destructive";
+}
+
+const NotificationBadge = React.forwardRef<HTMLDivElement, NotificationBadgeProps>(
+  ({ 
+    className, 
+    count = 0, 
+    max = 99, 
+    showZero = false, 
+    dot = false,
+    variant = "destructive",
+    children,
+    ...props 
+  }, ref) => {
+    const displayCount = count > max ? `${max}+` : count;
+    const shouldShow = count > 0 || showZero;
+
+    const variantStyles = {
+      default: "bg-muted text-muted-foreground",
+      primary: "bg-primary text-primary-foreground",
+      destructive: "bg-destructive text-destructive-foreground",
+    };
+
+    if (!shouldShow && !dot) {
+      return <div ref={ref} className={className}>{children}</div>;
+    }
+
+    return (
+      <div ref={ref} className={cn("relative inline-block", className)} {...props}>
+        {children}
+        <span
+          className={cn(
+            "absolute -right-1 -top-1 flex items-center justify-center rounded-full",
+            variantStyles[variant],
+            dot
+              ? "h-2 w-2"
+              : "min-w-[1.25rem] h-5 px-1.5"
+          )}
+        >
+          {!dot && shouldShow && (
+            <span className="text-[10px] font-medium leading-none">
+              {displayCount}
+            </span>
+          )}
+        </span>
+      </div>
+    );
+  }
+);
+NotificationBadge.displayName = "NotificationBadge";
+
+export { NotificationBadge };
+export type { NotificationBadgeProps };

package/components/ui/page-header.tsx

@@ -0,0 +1,229 @@
+import * as React from "react";
+import { ChevronRight, Moon, Sun, Globe } from "lucide-react";
+import { cn } from "./utils";
+import { Button } from "./button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "./dropdown-menu";
+
+// ============================================================================
+// Types & Interfaces
+// ============================================================================
+
+export interface BreadcrumbItem {
+  label: string;
+  href?: string;
+  icon?: React.ReactNode;
+}
+
+export interface Language {
+  code: string;
+  label: string;
+  flag?: string;
+}
+
+export interface PageHeaderProps {
+  /**
+   * Array de items do breadcrumb
+   */
+  breadcrumbs: BreadcrumbItem[];
+  
+  /**
+   * Mostra o seletor de idioma
+   * @default false
+   */
+  showLanguageSelector?: boolean;
+  
+  /**
+   * Idiomas disponíveis
+   */
+  languages?: Language[];
+  
+  /**
+   * Idioma atual selecionado (código)
+   */
+  currentLanguage?: string;
+  
+  /**
+   * Callback quando o idioma é alterado
+   */
+  onLanguageChange?: (languageCode: string) => void;
+  
+  /**
+   * Mostra o alternador de dark mode
+   * @default false
+   */
+  showThemeToggle?: boolean;
+  
+  /**
+   * Tema atual ('light' ou 'dark')
+   */
+  theme?: "light" | "dark";
+  
+  /**
+   * Callback quando o tema é alterado
+   */
+  onThemeChange?: (theme: "light" | "dark") => void;
+  
+  /**
+   * Classes CSS adicionais
+   */
+  className?: string;
+  
+  /**
+   * Conteúdo adicional à direita
+   */
+  rightContent?: React.ReactNode;
+}
+
+// ============================================================================
+// Component
+// ============================================================================
+
+export function PageHeader({
+  breadcrumbs,
+  showLanguageSelector = false,
+  languages = [
+    { code: "pt-BR", label: "Português (BR)", flag: "🇧🇷" },
+    { code: "en-US", label: "English (US)", flag: "🇺🇸" },
+    { code: "es-ES", label: "Español", flag: "🇪🇸" },
+  ],
+  currentLanguage = "pt-BR",
+  onLanguageChange,
+  showThemeToggle = false,
+  theme = "light",
+  onThemeChange,
+  className,
+  rightContent,
+}: PageHeaderProps) {
+  const [isDark, setIsDark] = React.useState(theme === "dark");
+  const [selectedLanguage, setSelectedLanguage] = React.useState(currentLanguage);
+
+  // Sincroniza estado interno com props
+  React.useEffect(() => {
+    setIsDark(theme === "dark");
+  }, [theme]);
+
+  React.useEffect(() => {
+    setSelectedLanguage(currentLanguage);
+  }, [currentLanguage]);
+
+  const handleThemeToggle = () => {
+    const newTheme = isDark ? "light" : "dark";
+    setIsDark(!isDark);
+    onThemeChange?.(newTheme);
+  };
+
+  const handleLanguageChange = (languageCode: string) => {
+    setSelectedLanguage(languageCode);
+    onLanguageChange?.(languageCode);
+  };
+
+  const currentLang = languages.find((lang) => lang.code === selectedLanguage);
+
+  return (
+    <header
+      className={cn(
+        "sticky top-0 z-40 w-full border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60",
+        className
+      )}
+    >
+      <div className="container flex h-14 md:h-16 items-center justify-between px-4 md:px-6">
+        {/* Breadcrumb */}
+        <nav aria-label="Breadcrumb" className="flex items-center gap-1 md:gap-2 overflow-x-auto">
+          {breadcrumbs.map((item, index) => {
+            const isLast = index === breadcrumbs.length - 1;
+            
+            return (
+              <React.Fragment key={index}>
+                {index > 0 && (
+                  <ChevronRight className="w-3 h-3 md:w-4 md:h-4 text-muted-foreground shrink-0" />
+                )}
+                
+                {item.href && !isLast ? (
+                  <a
+                    href={item.href}
+                    className="flex items-center gap-1.5 md:gap-2 text-sm md:text-base text-muted-foreground hover:text-foreground transition-colors whitespace-nowrap"
+                  >
+                    {item.icon && <span className="shrink-0">{item.icon}</span>}
+                    <span>{item.label}</span>
+                  </a>
+                ) : (
+                  <span
+                    className={cn(
+                      "flex items-center gap-1.5 md:gap-2 text-sm md:text-base whitespace-nowrap",
+                      isLast ? "text-foreground font-medium" : "text-muted-foreground"
+                    )}
+                    aria-current={isLast ? "page" : undefined}
+                  >
+                    {item.icon && <span className="shrink-0">{item.icon}</span>}
+                    <span>{item.label}</span>
+                  </span>
+                )}
+              </React.Fragment>
+            );
+          })}
+        </nav>
+
+        {/* Right Side Actions */}
+        <div className="flex items-center gap-2 md:gap-3 shrink-0">
+          {/* Language Selector */}
+          {showLanguageSelector && (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="gap-1.5 md:gap-2 h-8 md:h-9 px-2 md:px-3"
+                >
+                  <Globe className="w-4 h-4" />
+                  <span className="hidden sm:inline-flex items-center gap-1.5">
+                    {currentLang?.flag && <span>{currentLang.flag}</span>}
+                    <span>{currentLang?.label.split(" ")[0]}</span>
+                  </span>
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                {languages.map((lang) => (
+                  <DropdownMenuItem
+                    key={lang.code}
+                    onClick={() => handleLanguageChange(lang.code)}
+                    className={cn(
+                      "gap-2 cursor-pointer",
+                      lang.code === selectedLanguage && "bg-accent"
+                    )}
+                  >
+                    {lang.flag && <span>{lang.flag}</span>}
+                    <span>{lang.label}</span>
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
+
+          {/* Theme Toggle */}
+          {showThemeToggle && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleThemeToggle}
+              className="h-8 md:h-9 w-8 md:w-9 p-0"
+              aria-label={isDark ? "Mudar para modo claro" : "Mudar para modo escuro"}
+            >
+              {isDark ? (
+                <Sun className="w-4 h-4" />
+              ) : (
+                <Moon className="w-4 h-4" />
+              )}
+            </Button>
+          )}
+          
+          {rightContent}
+        </div>
+      </div>
+    </header>
+  );
+}

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" : "ghost",
+          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 @@
+"use client";
+
+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 @@
+"use client";
+
+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 };