Update: nueva version Horux Despachos

packages/shared-ui/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@horux/shared-ui",
+  "version": "0.0.1",
+  "private": true,
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "scripts": {
+    "lint": "eslint src/",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@horux/shared": "workspace:*",
+    "@radix-ui/react-dialog": "^1.1.2",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-select": "^2.1.2",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.1",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.453.0",
+    "react": "^18.3.1",
+    "recharts": "^2.12.7",
+    "tailwind-merge": "^2.5.4"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "typescript": "^5.3.0"
+  }
+}

packages/shared-ui/src/charts/index.ts

@@ -0,0 +1 @@
+export * from './kpi-card';

packages/shared-ui/src/charts/kpi-card.tsx

@@ -0,0 +1,78 @@
+import { Card, CardContent } from '../primitives';
+import { cn } from '../lib/cn';
+import { TrendingUp, TrendingDown, Minus } from 'lucide-react';
+
+interface KpiCardProps {
+  title: string;
+  value: string | number;
+  subtitle?: string;
+  trend?: 'up' | 'down' | 'neutral';
+  trendValue?: string;
+  icon?: React.ReactNode;
+  className?: string;
+  href?: string;
+}
+
+export function KpiCard({
+  title,
+  value,
+  subtitle,
+  trend,
+  trendValue,
+  icon,
+  className,
+  href,
+}: KpiCardProps) {
+  const formatValue = (val: string | number) => {
+    if (typeof val === 'number') {
+      return new Intl.NumberFormat('es-MX', {
+        style: 'currency',
+        currency: 'MXN',
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 0,
+      }).format(val);
+    }
+    return val;
+  };
+
+  const Wrapper = href ? 'a' : 'div';
+  const wrapperProps = href ? { href, className: 'block' } : {};
+
+  return (
+    <Card className={cn(href && 'hover:border-primary/50 hover:shadow-md transition-all cursor-pointer', className)}>
+      <Wrapper {...wrapperProps}>
+      <CardContent className="p-6">
+        <div className="flex items-center justify-between">
+          <p className="text-sm font-medium text-muted-foreground">{title}</p>
+          {icon && <div className="text-muted-foreground">{icon}</div>}
+        </div>
+        <div className="mt-2">
+          <p className="text-2xl font-bold">{formatValue(value)}</p>
+          {(subtitle || trend) && (
+            <div className="mt-1 flex items-center gap-2">
+              {trend && (
+                <span
+                  className={cn(
+                    'flex items-center text-xs font-medium',
+                    trend === 'up' && 'text-success',
+                    trend === 'down' && 'text-destructive',
+                    trend === 'neutral' && 'text-muted-foreground'
+                  )}
+                >
+                  {trend === 'up' && <TrendingUp className="mr-1 h-3 w-3" />}
+                  {trend === 'down' && <TrendingDown className="mr-1 h-3 w-3" />}
+                  {trend === 'neutral' && <Minus className="mr-1 h-3 w-3" />}
+                  {trendValue}
+                </span>
+              )}
+              {subtitle && (
+                <span className="text-xs text-muted-foreground">{subtitle}</span>
+              )}
+            </div>
+          )}
+        </div>
+      </CardContent>
+      </Wrapper>
+    </Card>
+  );
+}

packages/shared-ui/src/form/index.ts

@@ -0,0 +1,2 @@
+export * from './period-selector';
+export * from './regimen-selector';

packages/shared-ui/src/form/period-selector.tsx

@@ -0,0 +1,235 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Button } from '../primitives';
+import { ChevronLeft, ChevronRight, Calendar } from 'lucide-react';
+import { cn } from '../lib/cn';
+
+const MESES = [
+  'Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun',
+  'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'
+];
+
+function getMonthRange(year: number, month: number) {
+  const start = `${year}-${String(month).padStart(2, '0')}-01`;
+  const lastDay = new Date(year, month, 0).getDate();
+  const end = `${year}-${String(month).padStart(2, '0')}-${String(lastDay).padStart(2, '0')}`;
+  return { start, end };
+}
+
+function getRange(startYear: number, startMonth: number, endYear: number, endMonth: number) {
+  const start = getMonthRange(startYear, startMonth).start;
+  const end = getMonthRange(endYear, endMonth).end;
+  return { start, end };
+}
+
+function parseDate(dateStr: string) {
+  const d = new Date(dateStr + 'T00:00:00');
+  return { year: d.getFullYear(), month: d.getMonth() + 1 };
+}
+
+interface PeriodSelectorProps {
+  fechaInicio: string;
+  fechaFin: string;
+  onChange: (fechaInicio: string, fechaFin: string) => void;
+}
+
+export function PeriodSelector({ fechaInicio, fechaFin, onChange }: PeriodSelectorProps) {
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const [pickerYear, setPickerYear] = useState(new Date().getFullYear());
+  const [selecting, setSelecting] = useState<'idle' | 'from'>('idle');
+  const [tempFrom, setTempFrom] = useState<{ year: number; month: number } | null>(null);
+
+  const startParsed = parseDate(fechaInicio);
+  const endParsed = parseDate(fechaFin);
+  const totalMonths = (endParsed.year - startParsed.year) * 12 + (endParsed.month - startParsed.month) + 1;
+
+  const handlePrev = () => {
+    let sm = startParsed.month - totalMonths;
+    let sy = startParsed.year;
+    while (sm < 1) { sm += 12; sy--; }
+    let em = endParsed.month - totalMonths;
+    let ey = endParsed.year;
+    while (em < 1) { em += 12; ey--; }
+    const r = getRange(sy, sm, ey, em);
+    onChange(r.start, r.end);
+  };
+
+  const handleNext = () => {
+    let sm = startParsed.month + totalMonths;
+    let sy = startParsed.year;
+    while (sm > 12) { sm -= 12; sy++; }
+    let em = endParsed.month + totalMonths;
+    let ey = endParsed.year;
+    while (em > 12) { em -= 12; ey++; }
+    const r = getRange(sy, sm, ey, em);
+    onChange(r.start, r.end);
+  };
+
+  const handleMonthClick = (month: number) => {
+    if (selecting === 'idle') {
+      // First click: set start month
+      setTempFrom({ year: pickerYear, month });
+      setSelecting('from');
+    } else {
+      // Second click: set end month, apply range
+      let fy = tempFrom!.year;
+      let fm = tempFrom!.month;
+      let ty = pickerYear;
+      let tm = month;
+
+      // Ensure from <= to
+      if (ty < fy || (ty === fy && tm < fm)) {
+        [fy, fm, ty, tm] = [ty, tm, fy, fm];
+      }
+
+      const r = getRange(fy, fm, ty, tm);
+      onChange(r.start, r.end);
+      setSelecting('idle');
+      setTempFrom(null);
+      setPickerOpen(false);
+    }
+  };
+
+  const openPicker = () => {
+    setPickerYear(startParsed.year);
+    setSelecting('idle');
+    setTempFrom(null);
+    setPickerOpen(!pickerOpen);
+  };
+
+  const isInRange = (month: number) => {
+    const v = pickerYear * 12 + month;
+    const sv = startParsed.year * 12 + startParsed.month;
+    const ev = endParsed.year * 12 + endParsed.month;
+    return v >= sv && v <= ev;
+  };
+
+  const isStart = (month: number) =>
+    pickerYear === startParsed.year && month === startParsed.month;
+
+  const isEnd = (month: number) =>
+    pickerYear === endParsed.year && month === endParsed.month;
+
+  const isTempFrom = (month: number) =>
+    selecting === 'from' && tempFrom?.year === pickerYear && tempFrom?.month === month;
+
+  const getDisplayText = () => {
+    const sm = MESES[startParsed.month - 1];
+    const em = MESES[endParsed.month - 1];
+    if (startParsed.year === endParsed.year && startParsed.month === endParsed.month) {
+      return `${sm} ${startParsed.year}`;
+    }
+    if (startParsed.year === endParsed.year) {
+      return `${sm} – ${em} ${startParsed.year}`;
+    }
+    return `${sm} ${startParsed.year} – ${em} ${endParsed.year}`;
+  };
+
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      if (!target.closest('.period-selector-popup')) {
+        setPickerOpen(false);
+        setSelecting('idle');
+        setTempFrom(null);
+      }
+    };
+    document.addEventListener('click', handler);
+    return () => document.removeEventListener('click', handler);
+  }, []);
+
+  return (
+    <div className="period-selector-popup relative flex items-center gap-1">
+      <Button variant="ghost" size="icon" className="h-8 w-8" onClick={handlePrev}>
+        <ChevronLeft className="h-4 w-4" />
+      </Button>
+
+      <button
+        onClick={openPicker}
+        className={cn(
+          'flex items-center gap-2 text-sm font-medium px-3 py-1.5 rounded-md transition-colors whitespace-nowrap',
+          pickerOpen ? 'bg-primary/10 text-primary' : 'hover:bg-accent'
+        )}
+      >
+        <Calendar className="h-4 w-4 flex-shrink-0" />
+        {getDisplayText()}
+      </button>
+
+      <Button variant="ghost" size="icon" className="h-8 w-8" onClick={handleNext}>
+        <ChevronRight className="h-4 w-4" />
+      </Button>
+
+      {pickerOpen && (
+        <div className="absolute top-full left-0 mt-2 w-64 rounded-lg border bg-card shadow-lg z-50 p-4 space-y-3">
+          {/* Year selector */}
+          <div className="flex items-center justify-between">
+            <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => setPickerYear(pickerYear - 1)}>
+              <ChevronLeft className="h-4 w-4" />
+            </Button>
+            <span className="text-sm font-semibold">{pickerYear}</span>
+            <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => setPickerYear(pickerYear + 1)}>
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+          </div>
+
+          {/* Month grid */}
+          <div className="grid grid-cols-4 gap-1">
+            {MESES.map((m, i) => {
+              const mo = i + 1;
+              const tempSelected = isTempFrom(mo);
+
+              // When selecting (first click made), only show tempFrom — hide previous range
+              const showRange = selecting === 'idle';
+              const start = showRange && isStart(mo);
+              const end = showRange && isEnd(mo);
+              const inRange = showRange && isInRange(mo);
+
+              return (
+                <button
+                  key={m}
+                  onClick={() => handleMonthClick(mo)}
+                  className={cn(
+                    'text-xs py-2 px-2 rounded-md transition-colors',
+                    tempSelected
+                      ? 'bg-primary text-primary-foreground'
+                      : start || end
+                        ? 'bg-primary text-primary-foreground'
+                        : inRange
+                          ? 'bg-primary/15 text-primary'
+                          : 'hover:bg-accent'
+                  )}
+                >
+                  {m}
+                </button>
+              );
+            })}
+          </div>
+
+          {/* Status + shortcut */}
+          <div className="flex items-center justify-between text-xs text-muted-foreground pt-1 border-t">
+            <span>
+              {selecting === 'from'
+                ? `Desde: ${MESES[tempFrom!.month - 1]} ${tempFrom!.year} → elige fin`
+                : 'Clic en mes inicio'}
+            </span>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="text-xs h-6"
+              onClick={() => {
+                const now = new Date();
+                const r = getMonthRange(now.getFullYear(), now.getMonth() + 1);
+                onChange(r.start, r.end);
+                setPickerOpen(false);
+                setSelecting('idle');
+              }}
+            >
+              Hoy
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

packages/shared-ui/src/form/regimen-selector.tsx

@@ -0,0 +1,102 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { ChevronDown, Check, Scale } from 'lucide-react';
+import { cn } from '../lib/cn';
+
+interface RegimenOption {
+  clave: string;
+  descripcion: string;
+}
+
+interface RegimenSelectorProps {
+  regimenes: RegimenOption[];
+  selected: string | null;
+  onChange: (clave: string | null) => void;
+  isLoading?: boolean;
+}
+
+export function RegimenSelector({ regimenes, selected, onChange, isLoading }: RegimenSelectorProps) {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      if (!target.closest('.regimen-selector')) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener('click', handleClickOutside);
+    return () => document.removeEventListener('click', handleClickOutside);
+  }, []);
+
+  if (isLoading || regimenes.length === 0) return null;
+
+  const selectedRegimen = selected ? regimenes.find(r => r.clave === selected) : null;
+  const displayText = selectedRegimen
+    ? `${selectedRegimen.clave} - ${selectedRegimen.descripcion}`
+    : 'Todos los regimenes';
+
+  return (
+    <div className="regimen-selector relative">
+      <button
+        onClick={() => setOpen(!open)}
+        className={cn(
+          'flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
+          selected
+            ? 'bg-primary/10 text-primary border border-primary/30'
+            : 'hover:bg-accent'
+        )}
+      >
+        <Scale className="h-4 w-4" />
+        <span className="max-w-[200px] truncate">{displayText}</span>
+        <ChevronDown className={cn('h-4 w-4 transition-transform', open && 'rotate-180')} />
+      </button>
+
+      {open && (
+        <div className="absolute top-full left-0 mt-2 w-80 rounded-lg border bg-card shadow-lg z-50">
+          <div className="p-2 border-b">
+            <p className="text-xs text-muted-foreground px-2">Regimen fiscal</p>
+          </div>
+          <div className="max-h-64 overflow-y-auto p-1">
+            <button
+              onClick={() => {
+                onChange(null);
+                setOpen(false);
+              }}
+              className={cn(
+                'flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm hover:bg-accent transition-colors',
+                !selected && 'bg-primary/10'
+              )}
+            >
+              <span className="flex-1 text-left font-medium">Todos los regimenes</span>
+              {!selected && <Check className="h-4 w-4 text-primary" />}
+            </button>
+
+            <div className="my-1 border-t" />
+
+            {regimenes.map((regimen) => (
+              <button
+                key={regimen.clave}
+                onClick={() => {
+                  onChange(regimen.clave);
+                  setOpen(false);
+                }}
+                className={cn(
+                  'flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm hover:bg-accent transition-colors',
+                  selected === regimen.clave && 'bg-primary/10'
+                )}
+              >
+                <div className="h-7 w-7 rounded bg-muted flex items-center justify-center text-xs font-mono font-bold">
+                  {regimen.clave}
+                </div>
+                <span className="flex-1 text-left truncate">{regimen.descripcion}</span>
+                {selected === regimen.clave && <Check className="h-4 w-4 text-primary" />}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

packages/shared-ui/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './use-debounce';
+export * from './use-table-sort';

packages/shared-ui/src/hooks/use-debounce.ts

@@ -0,0 +1,17 @@
+import { useState, useEffect } from 'react';
+
+export function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}

packages/shared-ui/src/hooks/use-table-sort.ts

@@ -0,0 +1,56 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+
+export type SortDir = 'asc' | 'desc';
+
+/**
+ * Ordenamiento client-side de una tabla.
+ *
+ * Uso:
+ *   const { sortedData, sortKey, sortDir, toggleSort, getSortIndicator } = useTableSort(
+ *     data,
+ *     {
+ *       fecha: (row) => new Date(row.fechaEmision).getTime(),
+ *       total: (row) => Number(row.totalMxn || 0),
+ *     },
+ *     'fecha',
+ *   );
+ */
+export function useTableSort<T, K extends string>(
+  data: T[] | undefined,
+  accessors: Record<K, (row: T) => number | string>,
+  initialKey: K,
+  initialDir: SortDir = 'desc',
+) {
+  const [sortKey, setSortKey] = useState<K>(initialKey);
+  const [sortDir, setSortDir] = useState<SortDir>(initialDir);
+
+  const sortedData = useMemo(() => {
+    if (!data) return data;
+    const accessor = accessors[sortKey];
+    const sign = sortDir === 'asc' ? 1 : -1;
+    return [...data].sort((a, b) => {
+      const va = accessor(a);
+      const vb = accessor(b);
+      if (typeof va === 'number' && typeof vb === 'number') {
+        return (va - vb) * sign;
+      }
+      return String(va).localeCompare(String(vb)) * sign;
+    });
+  }, [data, sortKey, sortDir, accessors]);
+
+  const toggleSort = (key: K) => {
+    if (sortKey === key) {
+      setSortDir(sortDir === 'asc' ? 'desc' : 'asc');
+    } else {
+      setSortKey(key);
+      setSortDir('desc');
+    }
+  };
+
+  /** Retorna 'asc' | 'desc' | null según el header sea activo o no */
+  const getSortIndicator = (key: K): SortDir | null => (sortKey === key ? sortDir : null);
+
+  return { sortedData, sortKey, sortDir, toggleSort, getSortIndicator };
+}

packages/shared-ui/src/index.ts

@@ -0,0 +1,5 @@
+export * from './lib';
+export * from './primitives';
+export * from './form';
+export * from './hooks';
+export * from './charts';

packages/shared-ui/src/lib/cn.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));
+}

packages/shared-ui/src/lib/index.ts

@@ -0,0 +1 @@
+export * from './cn';

packages/shared-ui/src/primitives/button.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../lib/cn';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+        success: 'bg-success text-success-foreground hover:bg-success/90',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };

packages/shared-ui/src/primitives/card.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { cn } from '../lib/cn';
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      'rounded-lg border bg-card text-card-foreground shadow-sm',
+      className
+    )}
+    {...props}
+  />
+));
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex flex-col space-y-1.5 p-6', className)}
+    {...props}
+  />
+));
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      'text-2xl font-semibold leading-none tracking-tight',
+      className
+    )}
+    {...props}
+  />
+));
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+));
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex items-center p-6 pt-0', className)}
+    {...props}
+  />
+));
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

packages/shared-ui/src/primitives/dialog.tsx

@@ -0,0 +1,122 @@
+'use client';
+
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+
+import { cn } from '../lib/cn';
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-1.5 text-center sm:text-left',
+      className
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = 'DialogHeader';
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = 'DialogFooter';
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      'text-lg font-semibold leading-none tracking-tight',
+      className
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};

packages/shared-ui/src/primitives/index.ts

@@ -0,0 +1,9 @@
+export * from './button';
+export * from './card';
+export * from './dialog';
+export * from './input';
+export * from './label';
+export * from './popover';
+export * from './select';
+export * from './sortable-header';
+export * from './tabs';

packages/shared-ui/src/primitives/input.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { cn } from '../lib/cn';
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = 'Input';
+
+export { Input };

packages/shared-ui/src/primitives/label.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../lib/cn';
+
+const labelVariants = cva(
+  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };

packages/shared-ui/src/primitives/popover.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { cn } from '../lib/cn';
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-[9999] w-72 rounded-md border bg-white dark:bg-gray-900 p-4 text-popover-foreground shadow-lg outline-none 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',
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent };

packages/shared-ui/src/primitives/select.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '../lib/cn';
+import { ChevronDown } from 'lucide-react';
+
+interface SelectContextValue {
+  value: string;
+  onValueChange: (value: string) => void;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+const SelectContext = React.createContext<SelectContextValue | undefined>(undefined);
+
+interface SelectProps {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  children: React.ReactNode;
+}
+
+export function Select({ value, defaultValue = '', onValueChange, children }: SelectProps) {
+  const [internalValue, setInternalValue] = React.useState(defaultValue);
+  const [open, setOpen] = React.useState(false);
+  const currentValue = value ?? internalValue;
+
+  const handleValueChange = React.useCallback((newValue: string) => {
+    setInternalValue(newValue);
+    onValueChange?.(newValue);
+    setOpen(false);
+  }, [onValueChange]);
+
+  return (
+    <SelectContext.Provider value={{ value: currentValue, onValueChange: handleValueChange, open, setOpen }}>
+      <div className="relative">{children}</div>
+    </SelectContext.Provider>
+  );
+}
+
+export function SelectTrigger({ children, className }: { children: React.ReactNode; className?: string }) {
+  const context = React.useContext(SelectContext);
+  if (!context) throw new Error('SelectTrigger must be used within Select');
+
+  return (
+    <button
+      type="button"
+      onClick={() => context.setOpen(!context.open)}
+      className={cn(
+        'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </button>
+  );
+}
+
+export function SelectValue({ placeholder }: { placeholder?: string }) {
+  const context = React.useContext(SelectContext);
+  if (!context) throw new Error('SelectValue must be used within Select');
+
+  return <span>{context.value || placeholder}</span>;
+}
+
+export function SelectContent({ children, className }: { children: React.ReactNode; className?: string }) {
+  const context = React.useContext(SelectContext);
+  if (!context) throw new Error('SelectContent must be used within Select');
+
+  if (!context.open) return null;
+
+  return (
+    <div className={cn(
+      'absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md border bg-white dark:bg-zinc-900 p-1 text-popover-foreground shadow-md',
+      className
+    )}>
+      {children}
+    </div>
+  );
+}
+
+export function SelectItem({ value, children, className }: { value: string; children: React.ReactNode; className?: string }) {
+  const context = React.useContext(SelectContext);
+  if (!context) throw new Error('SelectItem must be used within Select');
+
+  return (
+    <div
+      onClick={() => context.onValueChange(value)}
+      className={cn(
+        'relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 px-2 text-sm outline-none hover:bg-accent hover:text-accent-foreground',
+        context.value === value && 'bg-accent text-accent-foreground',
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+}

packages/shared-ui/src/primitives/sortable-header.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { ArrowUp, ArrowDown, ArrowUpDown } from 'lucide-react';
+import type { SortDir } from '../hooks/use-table-sort';
+
+interface SortableHeaderProps {
+  label: string;
+  active: SortDir | null;
+  onClick: () => void;
+  align?: 'left' | 'right';
+  className?: string;
+}
+
+export function SortableHeader({ label, active, onClick, align = 'left', className = '' }: SortableHeaderProps) {
+  const Icon = active === 'asc' ? ArrowUp : active === 'desc' ? ArrowDown : ArrowUpDown;
+  return (
+    <th
+      className={`pb-3 font-medium cursor-pointer select-none hover:text-foreground ${align === 'right' ? 'text-right' : ''} ${className}`}
+      onClick={onClick}
+      title={`Ordenar por ${label.toLowerCase()}`}
+    >
+      {label}
+      <Icon className={`h-3 w-3 inline-block ml-1 ${active ? '' : 'opacity-40'}`} />
+    </th>
+  );
+}

packages/shared-ui/src/primitives/tabs.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '../lib/cn';
+
+interface TabsContextValue {
+  value: string;
+  onValueChange: (value: string) => void;
+}
+
+const TabsContext = React.createContext<TabsContextValue | undefined>(undefined);
+
+interface TabsProps {
+  defaultValue: string;
+  value?: string;
+  onValueChange?: (value: string) => void;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function Tabs({ defaultValue, value, onValueChange, children, className }: TabsProps) {
+  const [internalValue, setInternalValue] = React.useState(defaultValue);
+  const currentValue = value ?? internalValue;
+
+  const handleValueChange = React.useCallback((newValue: string) => {
+    setInternalValue(newValue);
+    onValueChange?.(newValue);
+  }, [onValueChange]);
+
+  return (
+    <TabsContext.Provider value={{ value: currentValue, onValueChange: handleValueChange }}>
+      <div className={className}>{children}</div>
+    </TabsContext.Provider>
+  );
+}
+
+export function TabsList({ children, className }: { children: React.ReactNode; className?: string }) {
+  return (
+    <div className={cn('inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground', className)}>
+      {children}
+    </div>
+  );
+}
+
+export function TabsTrigger({ value, children, className }: { value: string; children: React.ReactNode; className?: string }) {
+  const context = React.useContext(TabsContext);
+  if (!context) throw new Error('TabsTrigger must be used within Tabs');
+
+  const isActive = context.value === value;
+
+  return (
+    <button
+      onClick={() => context.onValueChange(value)}
+      className={cn(
+        'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+        isActive && 'bg-background text-foreground shadow-sm',
+        className
+      )}
+    >
+      {children}
+    </button>
+  );
+}
+
+export function TabsContent({ value, children, className }: { value: string; children: React.ReactNode; className?: string }) {
+  const context = React.useContext(TabsContext);
+  if (!context) throw new Error('TabsContent must be used within Tabs');
+
+  if (context.value !== value) return null;
+
+  return <div className={cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', className)}>{children}</div>;
+}

packages/shared-ui/tailwind-preset.js

@@ -0,0 +1,51 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      fontFamily: {
+        sans: ["Inter", "sans-serif"],
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+    },
+  },
+  plugins: [],
+};

packages/shared-ui/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "preserve",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true,
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "isolatedModules": true,
+    "lib": ["DOM", "DOM.Iterable", "ES2022"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}