@cortexasystem/ui 1.0.0 → 1.0.1

package/src/components/feedback/status-badge.tsx

@@ -0,0 +1,44 @@
+import { AlertCircle, CheckCircle2, Clock3, Loader2 } from "lucide-react";
+
+import { cn } from "../../lib/cn";
+
+export type StatusTone = "success" | "warning" | "danger" | "info" | "loading";
+
+interface StatusBadgeProps {
+  children: string;
+  tone?: StatusTone;
+  className?: string;
+}
+
+const toneStyles: Record<StatusTone, string> = {
+  success: "border-transparent bg-[var(--color-success-bg)] text-[var(--color-success)]",
+  warning: "border-transparent bg-[var(--color-warning-bg)] text-[var(--color-warning)]",
+  danger: "border-transparent bg-destructive/10 text-destructive",
+  info: "border-transparent bg-[var(--color-info-bg)] text-[var(--color-accent-blue)]",
+  loading: "border-transparent bg-muted text-muted-foreground"
+};
+
+const toneIcons = {
+  success: CheckCircle2,
+  warning: Clock3,
+  danger: AlertCircle,
+  info: CheckCircle2,
+  loading: Loader2
+} as const;
+
+export function StatusBadge({ children, tone = "info", className }: StatusBadgeProps) {
+  const Icon = toneIcons[tone];
+
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium",
+        toneStyles[tone],
+        className
+      )}
+    >
+      <Icon className={cn("h-3.5 w-3.5", tone === "loading" && "animate-spin")} />
+      {children}
+    </span>
+  );
+}

package/src/components/feedback/sync-status-badge.tsx

@@ -0,0 +1,54 @@
+import { AlertCircle, CheckCircle2, Clock3, Loader2, WifiOff } from "lucide-react";
+
+import { cn } from "../../lib/cn";
+
+type SyncStatus = "synced" | "pending" | "syncing" | "conflict" | "offline";
+
+interface SyncStatusBadgeProps {
+  className?: string;
+  status: SyncStatus;
+  label?: string;
+}
+
+const badgeStyles: Record<SyncStatus, string> = {
+  synced: "border-transparent bg-[var(--color-success-bg)] text-[var(--color-success)]",
+  pending: "border-transparent bg-[var(--color-warning-bg)] text-[var(--color-warning)]",
+  syncing: "border-transparent bg-[var(--color-info-bg)] text-[var(--color-accent-blue)]",
+  conflict: "border-transparent bg-destructive/10 text-destructive",
+  offline: "border-transparent bg-muted text-muted-foreground"
+};
+
+const badgeIcons = {
+  synced: CheckCircle2,
+  pending: Clock3,
+  syncing: Loader2,
+  conflict: AlertCircle,
+  offline: WifiOff
+} as const;
+
+const badgeLabels: Record<SyncStatus, string> = {
+  synced: "Sincronizado",
+  pending: "Pendiente",
+  syncing: "Sincronizando",
+  conflict: "Conflicto",
+  offline: "Offline"
+};
+
+export function SyncStatusBadge({ className, status, label }: SyncStatusBadgeProps) {
+  const Icon = badgeIcons[status];
+
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium",
+        badgeStyles[status],
+        className
+      )}
+    >
+      <Icon className={cn("h-3.5 w-3.5", status === "syncing" && "animate-spin")} />
+      {label ?? badgeLabels[status]}
+    </span>
+  );
+}
+
+export type { SyncStatus, SyncStatusBadgeProps };

package/src/components/feedback/sync-status-bar.tsx

@@ -0,0 +1,92 @@
+import { AlertTriangle, CheckCircle2, Loader2, RefreshCw, WifiOff, type LucideIcon } from "lucide-react";
+
+import { cn } from "../../lib/cn";
+
+type SyncBarState = "synced" | "pending" | "syncing" | "conflict" | "offline";
+
+interface SyncStatusBarProps {
+  className?: string;
+  state: SyncBarState;
+  pendingCount?: number;
+  errorCount?: number;
+  syncingCount?: number;
+  onClick?: () => void;
+  label?: string;
+}
+
+type SyncBarConfig = {
+  icon: LucideIcon;
+  text: string;
+  className: string;
+  spinning?: boolean;
+};
+
+function pluralize(count: number, singular: string, plural: string) {
+  return `${count} ${count === 1 ? singular : plural}`;
+}
+
+export function SyncStatusBar({
+  className,
+  state,
+  pendingCount = 0,
+  errorCount = 0,
+  syncingCount = 0,
+  onClick,
+  label
+}: SyncStatusBarProps) {
+  const config: Record<SyncBarState, SyncBarConfig> = {
+    conflict: {
+      icon: AlertTriangle,
+      text: label ?? `${pluralize(errorCount || 1, "operacion", "operaciones")} con error`,
+      className: "bg-destructive/15 text-destructive"
+    },
+    offline: {
+      icon: WifiOff,
+      text:
+        label ??
+        (pendingCount > 0
+          ? `Offline · ${pluralize(pendingCount, "pendiente", "pendientes")}`
+          : "Offline · sin pendientes"),
+      className: "bg-[var(--color-warning-bg)] text-[var(--color-warning)]"
+    },
+    syncing: {
+      icon: Loader2,
+      text: label ?? `Sincronizando ${pluralize(syncingCount || 1, "operacion", "operaciones")}...`,
+      className: "bg-[var(--color-info-bg)] text-[var(--color-accent-blue)]",
+      spinning: true
+    },
+    pending: {
+      icon: RefreshCw,
+      text: label ?? `${pluralize(pendingCount || 1, "pendiente", "pendientes")} por sincronizar`,
+      className: "bg-[var(--color-warning-bg)] text-[var(--color-warning)]"
+    },
+    synced: {
+      icon: CheckCircle2,
+      text: label ?? "Todo sincronizado",
+      className: "bg-[var(--color-success-bg)] text-[var(--color-success)]"
+    }
+  };
+
+  const current = config[state];
+  const Icon = current.icon;
+  const isClickable = typeof onClick === "function";
+  const Component = isClickable ? "button" : "div";
+
+  return (
+    <Component
+      {...(isClickable ? { type: "button", onClick } : {})}
+      className={cn(
+        "flex h-8 w-full items-center justify-center gap-1.5 px-4 text-xs font-medium transition-opacity",
+        current.className,
+        isClickable ? "cursor-pointer hover:opacity-85 active:opacity-70" : "cursor-default",
+        className
+      )}
+    >
+      <Icon className={cn("h-3.5 w-3.5", current.spinning && "animate-spin")} />
+      <span>{current.text}</span>
+      {isClickable ? <span className="ml-1 text-[10px] opacity-60">→</span> : null}
+    </Component>
+  );
+}
+
+export type { SyncBarState, SyncStatusBarProps };

package/src/components/feedback/toaster.tsx

@@ -0,0 +1,36 @@
+import { LoaderCircle } from "lucide-react";
+import { Toaster as Sonner, type ToasterProps } from "sonner";
+
+import { useTheme } from "../../providers/theme-provider";
+
+export function Toaster(props: ToasterProps) {
+  const { resolvedTheme } = useTheme();
+
+  return (
+    <Sonner
+      theme={resolvedTheme}
+      position="top-right"
+      richColors
+      className="toaster group"
+      icons={{
+        loading: <LoaderCircle className="h-4 w-4 animate-spin" />
+      }}
+      closeButton
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:rounded-xl group-[.toaster]:border group-[.toaster]:border-border group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:shadow-xl",
+          title: "text-sm font-semibold",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground group-[.toast]:rounded-md",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground group-[.toast]:rounded-md",
+          closeButton:
+            "pointer-events-auto cursor-pointer rounded-md border border-border bg-background text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+        }
+      }}
+      {...props}
+    />
+  );
+}

package/src/components/forms/searchable-select.tsx

@@ -0,0 +1,206 @@
+import * as React from "react";
+import { Check, ChevronDown, ChevronUp, Loader2, Search } from "lucide-react";
+
+import { cn } from "../../lib/cn";
+import { Input } from "../primitives/input";
+
+export interface SearchableSelectOption {
+  value: string;
+  label: string;
+  sublabel?: string;
+}
+
+export interface SearchableSelectProps {
+  options: SearchableSelectOption[];
+  value: string;
+  onValueChange: (value: string) => void;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  disabled?: boolean;
+  loading?: boolean;
+  emptyMessage?: string;
+  id?: string;
+  className?: string;
+}
+
+function normalize(str: string): string {
+  return str
+    .toLowerCase()
+    .normalize("NFD")
+    .replace(/[\u0300-\u036f]/g, "");
+}
+
+export const SearchableSelect = React.forwardRef<HTMLButtonElement, SearchableSelectProps>(
+  (
+    {
+      options,
+      value,
+      onValueChange,
+      placeholder = "Select an option...",
+      searchPlaceholder = "Search...",
+      disabled = false,
+      loading = false,
+      emptyMessage = "No results found.",
+      id,
+      className
+    },
+    ref
+  ) => {
+    const [open, setOpen] = React.useState(false);
+    const [search, setSearch] = React.useState("");
+    const wrapperRef = React.useRef<HTMLDivElement>(null);
+    const searchRef = React.useRef<HTMLInputElement>(null);
+
+    const selected = React.useMemo(() => options.find((option) => option.value === value) ?? null, [options, value]);
+
+    const filtered = React.useMemo(() => {
+      if (!search.trim()) {
+        return options;
+      }
+
+      const query = normalize(search);
+
+      return options.filter(
+        (option) => normalize(option.label).includes(query) || normalize(option.sublabel ?? "").includes(query)
+      );
+    }, [options, search]);
+
+    function handleOpen() {
+      if (disabled || loading) {
+        return;
+      }
+
+      setOpen((previous) => !previous);
+    }
+
+    function handleSelect(optionValue: string) {
+      onValueChange(optionValue);
+      setOpen(false);
+      setSearch("");
+    }
+
+    function handleKeyDown(event: React.KeyboardEvent) {
+      if (event.key === "Escape") {
+        setOpen(false);
+        setSearch("");
+      }
+    }
+
+    React.useEffect(() => {
+      if (!open) {
+        return;
+      }
+
+      function handleMouseDown(event: MouseEvent) {
+        if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {
+          setOpen(false);
+          setSearch("");
+        }
+      }
+
+      document.addEventListener("mousedown", handleMouseDown);
+      return () => document.removeEventListener("mousedown", handleMouseDown);
+    }, [open]);
+
+    React.useEffect(() => {
+      if (!open) {
+        return;
+      }
+
+      const timer = setTimeout(() => searchRef.current?.focus(), 50);
+      return () => clearTimeout(timer);
+    }, [open]);
+
+    return (
+      <div ref={wrapperRef} className={cn("relative w-full", className)} onKeyDown={handleKeyDown}>
+        <button
+          ref={ref}
+          id={id}
+          type="button"
+          role="combobox"
+          aria-expanded={open}
+          aria-haspopup="listbox"
+          disabled={disabled || loading}
+          onClick={handleOpen}
+          className={cn(
+            "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-left text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+          )}
+        >
+          {loading ? (
+            <span className="flex items-center gap-2 text-muted-foreground">
+              <Loader2 className="h-4 w-4 animate-spin" />
+              Loading...
+            </span>
+          ) : selected ? (
+            <span className="flex items-center gap-2 truncate">
+              {selected.sublabel ? (
+                <span className="shrink-0 font-mono text-xs text-muted-foreground">{selected.sublabel}</span>
+              ) : null}
+              <span className="truncate">{selected.label}</span>
+            </span>
+          ) : (
+            <span className="text-muted-foreground">{placeholder}</span>
+          )}
+
+          <span className="ml-2 shrink-0 opacity-50">
+            {open ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+          </span>
+        </button>
+
+        {open ? (
+          <div
+            role="listbox"
+            className="animate-in fade-in-0 zoom-in-95 absolute z-50 mt-1 w-full rounded-md border border-border bg-popover text-popover-foreground shadow-md"
+          >
+            <div className="sticky top-0 flex items-center gap-2 border-b border-border bg-popover px-3 py-2">
+              <Search className="h-4 w-4 shrink-0 text-muted-foreground" />
+              <Input
+                ref={searchRef}
+                type="text"
+                value={search}
+                onChange={(event) => setSearch(event.target.value)}
+                placeholder={searchPlaceholder}
+                className="h-7 border-0 bg-transparent px-0 text-sm shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 placeholder:text-muted-foreground"
+              />
+            </div>
+
+            <ul className="max-h-60 overflow-y-auto overscroll-contain p-1">
+              {filtered.length === 0 ? (
+                <li className="px-4 py-3 text-center text-xs text-muted-foreground">{emptyMessage}</li>
+              ) : (
+                filtered.map((option) => {
+                  const isSelected = option.value === value;
+
+                  return (
+                    <li
+                      key={option.value}
+                      role="option"
+                      aria-selected={isSelected}
+                      onClick={() => handleSelect(option.value)}
+                      className={cn(
+                        "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+                        isSelected && "bg-accent/50 font-medium"
+                      )}
+                    >
+                      <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+                        {isSelected ? <Check className="h-4 w-4" /> : null}
+                      </span>
+                      <span className="flex items-center gap-2 truncate">
+                        {option.sublabel ? (
+                          <span className="shrink-0 font-mono text-xs text-muted-foreground">{option.sublabel}</span>
+                        ) : null}
+                        <span className="truncate">{option.label}</span>
+                      </span>
+                    </li>
+                  );
+                })
+              )}
+            </ul>
+          </div>
+        ) : null}
+      </div>
+    );
+  }
+);
+
+SearchableSelect.displayName = "SearchableSelect";

package/src/components/forms/select.tsx

@@ -0,0 +1,142 @@
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+
+import { cn } from "../../lib/cn";
+
+const Select = SelectPrimitive.Root;
+const SelectGroup = SelectPrimitive.Group;
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    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 data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton ref={ref} className={cn("flex cursor-default items-center justify-center py-1", className)} {...props}>
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn("flex cursor-default items-center justify-center py-1", className)}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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 origin-[--radix-select-content-transform-origin]",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label ref={ref} className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)} {...props} />
+));
+
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
+));
+
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton
+};

package/src/components/layout/app-shell.tsx

@@ -0,0 +1,44 @@
+import { useState, type ReactNode } from "react";
+
+import { Drawer, DrawerContent } from "../overlays/drawer";
+import { Navbar } from "../navigation/navbar";
+import { Sidebar, type SidebarGroup } from "../navigation/sidebar";
+
+interface AppShellProps {
+  brand?: ReactNode;
+  actions?: ReactNode;
+  sidebarGroups: SidebarGroup[];
+  sidebarUser?: {
+    name: string;
+    role?: string;
+    initials?: string;
+  };
+  sidebarFooterAction?: {
+    label: string;
+    onClick?: () => void;
+  };
+  children: ReactNode;
+}
+
+export function AppShell({
+  brand,
+  actions,
+  sidebarGroups,
+  sidebarUser,
+  sidebarFooterAction,
+  children
+}: AppShellProps) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Navbar brand={brand} actions={actions} onMenuClick={() => setOpen(true)} />
+      <Drawer open={open} onOpenChange={setOpen} direction="left">
+        <DrawerContent className="h-full w-72 rounded-none border-r border-border p-0">
+          <Sidebar brand={brand} groups={sidebarGroups} user={sidebarUser} footerAction={sidebarFooterAction} />
+        </DrawerContent>
+      </Drawer>
+      <main className="mx-auto w-full max-w-7xl px-4 py-6 sm:px-6">{children}</main>
+    </div>
+  );
+}

package/src/components/layout/form-section.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../primitives/card";
+
+interface FormSectionProps {
+  title: string;
+  description?: string;
+  children: ReactNode;
+}
+
+export function FormSection({ title, description, children }: FormSectionProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        {description ? <CardDescription>{description}</CardDescription> : null}
+      </CardHeader>
+      <CardContent>{children}</CardContent>
+    </Card>
+  );
+}

package/src/components/layout/page-header.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+
+interface PageHeaderProps {
+  title: string;
+  description?: string;
+  action?: ReactNode;
+}
+
+export function PageHeader({ title, description, action }: PageHeaderProps) {
+  return (
+    <div className="flex items-start justify-between gap-4 sm:flex-row sm:items-center">
+      <div>
+        <h1 className="text-2xl font-semibold text-foreground" style={{ fontFamily: "var(--font-display)" }}>
+          {title}
+        </h1>
+        {description ? <p className="mt-0.5 text-sm text-muted-foreground">{description}</p> : null}
+      </div>
+      {action ? <div>{action}</div> : null}
+    </div>
+  );
+}