xertica-ui 1.0.0

package/components/ui/simple-map.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { Map, MapProps } from './map';
+
+/**
+ * SimpleMap - Wrapper simplificado para casos de uso comuns
+ * 
+ * Use este componente quando precisar de mapas básicos sem configuração avançada.
+ * Para casos mais complexos, use o componente Map diretamente.
+ */
+
+interface SimpleMapProps extends Omit<MapProps, 'markers' | 'circle' | 'polygon'> {
+  /** Endereço ou nome do local */
+  address?: string;
+  /** Título do marcador */
+  markerTitle?: string;
+  /** Informação adicional no InfoWindow */
+  markerInfo?: string;
+  /** Mostrar um marcador no centro */
+  showMarker?: boolean;
+}
+
+export const SimpleMap = React.forwardRef<HTMLDivElement, SimpleMapProps>(
+  (
+    {
+      center,
+      address,
+      markerTitle,
+      markerInfo,
+      showMarker = true,
+      zoom = 15,
+      height = "350px",
+      ...props
+    },
+    ref
+  ) => {
+    // Criar marcador automaticamente se showMarker estiver true
+    const markers = showMarker && center
+      ? [
+          {
+            position: center,
+            title: markerTitle || address || "Local",
+            info: markerInfo || address,
+          },
+        ]
+      : [];
+
+    return (
+      <Map
+        ref={ref}
+        center={center}
+        zoom={zoom}
+        height={height}
+        markers={markers}
+        {...props}
+      />
+    );
+  }
+);
+
+SimpleMap.displayName = "SimpleMap";
+
+/**
+ * EXEMPLOS DE USO:
+ * 
+ * 1. Mapa Simples com Marcador:
+ * ```tsx
+ * <SimpleMap
+ *   center={{ lat: -23.5505, lng: -46.6333 }}
+ *   markerTitle="Escritório Central"
+ *   markerInfo="Avenida Paulista, 1000"
+ * />
+ * ```
+ * 
+ * 2. Mapa Sem Marcador (apenas visualização):
+ * ```tsx
+ * <SimpleMap
+ *   center={{ lat: -23.5505, lng: -46.6333 }}
+ *   showMarker={false}
+ *   zoom={10}
+ * />
+ * ```
+ * 
+ * 3. Mapa de Localização de Loja:
+ * ```tsx
+ * <SimpleMap
+ *   center={{ lat: -23.5505, lng: -46.6333 }}
+ *   address="Rua Augusta, 2000 - São Paulo"
+ *   zoom={16}
+ *   height="400px"
+ * />
+ * ```
+ */

package/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "./utils";
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-md", className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };

package/components/ui/slider.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "./utils"
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { defaultValue, value, min = 0, max = 100 } = props
+  const _values = React.useMemo(
+    () =>
+      Array.isArray(value)
+        ? value
+        : Array.isArray(defaultValue)
+          ? defaultValue
+          : [min, max],
+    [value, defaultValue, min, max]
+  )
+
+  return (
+    <SliderPrimitive.Root
+      ref={ref}
+      data-slot="slider"
+      className={cn(
+        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        className
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className={cn(
+          "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-4 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:mx-2 data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5 data-[orientation=vertical]:my-2"
+        )}
+      >
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          className={cn(
+            "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+          )}
+        />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          data-slot="slider-thumb"
+          key={index}
+          className="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  )
+})
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export { Slider }

package/components/ui/sonner.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import * as React from "react";
+import { Toaster as Sonner, ToasterProps } from "sonner";
+
+/**
+ * Toaster component for displaying toast notifications.
+ * 
+ * @example
+ * // In your root layout/app:
+ * import { Toaster } from 'xertica-ui';
+ * 
+ * function App() {
+ *   return (
+ *     <>
+ *       <YourApp />
+ *       <Toaster />
+ *     </>
+ *   );
+ * }
+ * 
+ * // To show a toast:
+ * import { toast } from 'sonner';
+ * toast.success('Success message');
+ */
+const Toaster = ({ theme, ...props }: ToasterProps) => {
+  // If no theme is provided, detect from document
+  const [resolvedTheme, setResolvedTheme] = React.useState<ToasterProps["theme"]>(theme);
+
+  React.useEffect(() => {
+    if (theme) {
+      setResolvedTheme(theme);
+      return;
+    }
+
+    // Auto-detect theme from document
+    const detectTheme = () => {
+      const isDark = document.documentElement.classList.contains('dark') ||
+                     document.documentElement.getAttribute('data-theme') === 'dark';
+      setResolvedTheme(isDark ? 'dark' : 'light');
+    };
+
+    detectTheme();
+
+    // Watch for theme changes
+    const observer = new MutationObserver(detectTheme);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'data-theme']
+    });
+
+    return () => observer.disconnect();
+  }, [theme]);
+
+  return (
+    <Sonner
+      theme={resolvedTheme}
+      className="toaster group"
+      expand={true}
+      toastOptions={{
+        classNames: {
+          toast: "group toast group-[.toaster]:bg-card group-[.toaster]:text-card-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+          success: "group-[.toaster]:bg-[color:var(--chart-2)]/10 group-[.toaster]:border-l-4 group-[.toaster]:border-l-[color:var(--chart-2)] group-[.toaster]:text-foreground [&>svg]:text-[color:var(--chart-2)]",
+          error: "group-[.toaster]:bg-destructive/10 group-[.toaster]:border-l-4 group-[.toaster]:border-l-destructive group-[.toaster]:text-foreground [&>svg]:text-destructive",
+          warning: "group-[.toaster]:bg-[color:var(--chart-3)]/10 group-[.toaster]:border-l-4 group-[.toaster]:border-l-[color:var(--chart-3)] group-[.toaster]:text-foreground [&>svg]:text-[color:var(--chart-3)]",
+          info: "group-[.toaster]:bg-[color:var(--chart-4)]/10 group-[.toaster]:border-l-4 group-[.toaster]:border-l-[color:var(--chart-4)] group-[.toaster]:text-foreground [&>svg]:text-[color:var(--chart-4)]",
+        },
+      }}
+      {...props}
+    />
+  );
+};
+
+export { Toaster };

package/components/ui/stats-card.tsx

@@ -0,0 +1,84 @@
+import * as React from "react";
+import { TrendingUp, TrendingDown, Minus } from "lucide-react";
+import { cn } from "./utils";
+import { Card, CardContent } from "./card";
+
+interface StatsCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  title: string;
+  value: string | number;
+  description?: string;
+  trend?: {
+    value: number;
+    label?: string;
+  };
+  icon?: React.ReactNode;
+}
+
+const StatsCard = React.forwardRef<HTMLDivElement, StatsCardProps>(
+  ({ className, title, value, description, trend, icon, ...props }, ref) => {
+    const getTrendIcon = () => {
+      if (!trend) return null;
+      
+      if (trend.value > 0) {
+        return <TrendingUp className="h-4 w-4 text-[rgb(5,150,105)]" />;
+      } else if (trend.value < 0) {
+        return <TrendingDown className="h-4 w-4 text-destructive" />;
+      } else {
+        return <Minus className="h-4 w-4 text-muted-foreground" />;
+      }
+    };
+
+    const getTrendColor = () => {
+      if (!trend) return "";
+      
+      if (trend.value > 0) {
+        return "text-[rgb(5,150,105)]";
+      } else if (trend.value < 0) {
+        return "text-destructive";
+      } else {
+        return "text-muted-foreground";
+      }
+    };
+
+    return (
+      <Card ref={ref} className={cn("", className)} {...props}>
+        <CardContent className="p-4 sm:p-6">
+          <div className="flex items-start justify-between gap-3">
+            <div className="flex-1 min-w-0">
+              <p className="text-muted-foreground mb-1 text-sm">
+                {title}
+              </p>
+              <div className="flex flex-wrap items-baseline gap-2">
+                <h3 className="text-foreground text-xl sm:text-2xl">
+                  {value}
+                </h3>
+                {trend && (
+                  <div className={cn("flex items-center gap-1 text-sm", getTrendColor())}>
+                    {getTrendIcon()}
+                    <span>
+                      {Math.abs(trend.value)}%
+                    </span>
+                  </div>
+                )}
+              </div>
+              {(description || trend?.label) && (
+                <p className="text-muted-foreground mt-1 text-xs sm:text-sm">
+                  {trend?.label || description}
+                </p>
+              )}
+            </div>
+            {icon && (
+              <div className="rounded-[var(--radius)] bg-muted p-2 sm:p-3 text-muted-foreground flex-shrink-0">
+                {icon}
+              </div>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+);
+StatsCard.displayName = "StatsCard";
+
+export { StatsCard };
+export type { StatsCardProps };

package/components/ui/stepper.tsx

@@ -0,0 +1,126 @@
+import * as React from "react";
+import { Check } from "lucide-react";
+import { cn } from "./utils";
+
+interface StepperContextValue {
+  currentStep: number;
+  totalSteps: number;
+}
+
+const StepperContext = React.createContext<StepperContextValue | undefined>(
+  undefined
+);
+
+const useStepper = () => {
+  const context = React.useContext(StepperContext);
+  if (!context) {
+    throw new Error("useStepper must be used within a Stepper");
+  }
+  return context;
+};
+
+interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
+  currentStep: number;
+}
+
+const Stepper = React.forwardRef<HTMLDivElement, StepperProps>(
+  ({ currentStep, className, children, ...props }, ref) => {
+    const totalSteps = React.Children.count(children);
+
+    return (
+      <StepperContext.Provider value={{ currentStep, totalSteps }}>
+        <div
+          ref={ref}
+          className={cn("w-full", className)}
+          {...props}
+        >
+          <div className="flex items-center justify-between">
+            {children}
+          </div>
+        </div>
+      </StepperContext.Provider>
+    );
+  }
+);
+Stepper.displayName = "Stepper";
+
+interface StepProps extends React.HTMLAttributes<HTMLDivElement> {
+  step: number;
+  label: string;
+  description?: string;
+}
+
+const Step = React.forwardRef<HTMLDivElement, StepProps>(
+  ({ step, label, description, className, ...props }, ref) => {
+    const { currentStep, totalSteps } = useStepper();
+    const isActive = step === currentStep;
+    const isCompleted = step < currentStep;
+    const isFirst = step === 1;
+    const isLast = step === totalSteps;
+
+    return (
+      <div
+        ref={ref}
+        className={cn("flex flex-1 flex-col items-center", className)}
+        {...props}
+      >
+        <div className="flex w-full items-center">
+          {step > 1 && (
+            <div
+              className={cn(
+                "h-0.5 flex-1 transition-colors",
+                step <= currentStep ? "bg-primary" : "bg-muted"
+              )}
+            />
+          )}
+          <div
+            className={cn(
+              "relative flex h-10 w-10 items-center justify-center rounded-full border-2 transition-colors",
+              isActive && "border-primary bg-primary text-primary-foreground",
+              isCompleted && "border-primary bg-primary text-primary-foreground",
+              !isActive && !isCompleted && "border-muted bg-background text-muted-foreground"
+            )}
+          >
+            {isCompleted ? (
+              <Check className="h-5 w-5" />
+            ) : (
+              <span>{step}</span>
+            )}
+          </div>
+          {step < totalSteps && (
+            <div
+              className={cn(
+                "h-0.5 flex-1 transition-colors",
+                step < currentStep ? "bg-primary" : "bg-muted"
+              )}
+            />
+          )}
+        </div>
+        <div className={cn(
+          "mt-2",
+          isFirst && "text-left self-start",
+          isLast && "text-right self-end",
+          !isFirst && !isLast && "text-center"
+        )}>
+          <div
+            className={cn(
+              "transition-colors",
+              isActive && "text-foreground",
+              !isActive && "text-muted-foreground"
+            )}
+          >
+            {label}
+          </div>
+          {description && (
+            <div className="mt-1 text-muted-foreground">
+              {description}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+);
+Step.displayName = "Step";
+
+export { Stepper, Step, useStepper };

package/components/ui/switch.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import * as React from "react";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+
+import { cn } from "./utils";
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitive.Root
+    className={cn(
+      "peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50",
+      "data-[state=checked]:bg-primary",
+      "data-[state=unchecked]:bg-muted",
+      "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitive.Thumb
+      className={cn(
+        "pointer-events-none block size-4 rounded-full ring-0 transition-transform shadow-sm",
+        "bg-background",
+        "data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitive.Root>
+));
+Switch.displayName = SwitchPrimitive.Root.displayName;
+
+export { Switch };

package/components/ui/table.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "./utils";
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  );
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  );
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};

package/components/ui/tabs.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+
+import { cn } from "./utils";
+
+function Tabs({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  );
+}
+
+function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        "relative inline-flex h-12 w-fit items-end justify-start border-b border-border bg-transparent",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-12 items-center justify-center gap-1.5 bg-transparent px-4 py-3 text-sm font-medium whitespace-nowrap transition-all duration-200 ease-in-out border-b-2 border-transparent text-muted-foreground hover:text-foreground hover:bg-accent/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-primary data-[state=active]:border-primary data-[state=active]:bg-transparent [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/components/ui/textarea.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+
+import { cn } from "./utils";
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<"textarea">>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        data-slot="textarea"
+        className={cn(
+          "flex min-h-16 w-full px-3 py-2 text-base bg-background rounded-[var(--radius)] border border-border transition-colors outline-none resize-none text-foreground",
+          "placeholder:text-muted-foreground",
+          "focus:ring-2 focus:ring-primary focus:border-transparent",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "md:text-sm",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea };