@traky-app/ui 0.0.0-stage → 1.1.0

package/registry/traky/ui/trace.tsx

@@ -0,0 +1,165 @@
+"use client"
+
+import * as React from "react"
+import { IconChevronRight } from "@tabler/icons-react"
+
+import { cn } from "@/lib/utils"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible"
+
+function Trace({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="trace"
+      className={cn(
+        "flex w-full min-w-0 flex-col gap-2 *:has-[>[data-slot=trace-line]]:flex *:has-[>[data-slot=trace-line]]:w-fit *:has-[>[data-slot=trace-line]]:max-w-full *:has-[>[data-slot=trace-line]]:min-w-0 *:has-[>[data-slot=trace-line]]:rounded-md *:has-[>[data-slot=trace-line]]:text-left *:has-[>[data-slot=trace-line]]:outline-none *:has-[>[data-slot=trace-line]]:focus-visible:ring-3 *:has-[>[data-slot=trace-line]]:focus-visible:ring-ring/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TraceLine({
+  className,
+  status,
+  ...props
+}: React.ComponentProps<"span"> & {
+  status?: "running" | "error" | "pending"
+}) {
+  return (
+    <span
+      data-slot="trace-line"
+      data-status={status}
+      className={cn(
+        "flex w-fit max-w-full min-w-0 items-center gap-2 text-sm text-muted-foreground transition-colors in-[a,button]:cursor-pointer in-[a:hover,button:hover]:text-foreground data-[status=error]:text-destructive data-[status=error]:in-[a:hover,button:hover]:text-destructive data-[status=pending]:opacity-60 data-[status=running]:*:data-[slot=trace-title]:shimmer",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TraceIcon({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="trace-icon"
+      aria-hidden="true"
+      className={cn(
+        "flex size-4 shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [[data-slot=trace-title]~&]:-ml-1",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TraceTitle({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="trace-title"
+      className={cn("min-w-0 truncate motion-reduce:shimmer-none", className)}
+      {...props}
+    />
+  )
+}
+
+function TraceDescription({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="trace-description"
+      className={cn(
+        "shrink-0 text-muted-foreground/70 tabular-nums",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TraceCollapsible({
+  className,
+  ...props
+}: Omit<React.ComponentProps<typeof Collapsible>, "open"> &
+  (
+    | { open?: undefined }
+    | {
+        open: boolean
+        onOpenChange: NonNullable<
+          React.ComponentProps<typeof Collapsible>["onOpenChange"]
+        >
+      }
+  )) {
+  return (
+    <Collapsible
+      data-slot="trace-collapsible"
+      className={cn("flex w-full min-w-0 flex-col", className)}
+      {...props}
+    />
+  )
+}
+
+function TraceCollapsibleTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof CollapsibleTrigger>) {
+  return (
+    <CollapsibleTrigger
+      data-slot="trace-collapsible-trigger"
+      className={cn(
+        "group/trace-collapsible-trigger flex w-fit max-w-full min-w-0 cursor-pointer items-center gap-1 rounded-md text-left text-muted-foreground transition-colors outline-none hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50 has-[[data-status=error]]:text-destructive",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <TraceIcon className="transition-transform group-aria-expanded/trace-collapsible-trigger:rotate-90">
+        <IconChevronRight />
+      </TraceIcon>
+    </CollapsibleTrigger>
+  )
+}
+
+function TraceCollapsibleContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof CollapsibleContent>) {
+  return (
+    <CollapsibleContent
+      data-slot="trace-collapsible-content"
+      className="min-w-0 overflow-hidden duration-200 data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+      {...props}
+    >
+      <div
+        data-slot="trace-collapsible-content-inner"
+        className={cn(
+          "mt-2 mb-1 ml-[calc(var(--spacing)*2-1px)] min-w-0 border-l pr-1 pl-4 leading-relaxed wrap-break-word text-muted-foreground",
+          // CodeBlock define su propio color (docs Trace); no heredar muted.
+          "[&_[data-slot=code-block]]:text-foreground [&_[data-slot=code-block][data-variant=destructive]]:text-destructive",
+          className
+        )}
+      >
+        {children}
+      </div>
+    </CollapsibleContent>
+  )
+}
+
+export {
+  Trace,
+  TraceLine,
+  TraceIcon,
+  TraceTitle,
+  TraceDescription,
+  TraceCollapsible,
+  TraceCollapsibleTrigger,
+  TraceCollapsibleContent,
+}

package/schema/components.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "traky",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "tabler",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {
+    "@traky": "https://raw.githubusercontent.com/traky-app/traky-ui/v1.0.0/packages/ui/registry/traky/json/{name}.json"
+  }
+}

package/src/hooks/use-document-theme.ts

@@ -0,0 +1,25 @@
+"use client";
+
+import * as React from "react";
+
+type Theme = "light" | "dark" | "system";
+
+/** Lee la clase `light` / `dark` del documento. Sirve con el ThemeProvider de cada app. */
+export function useTheme() {
+  const [theme, setTheme] = React.useState<Theme>("system");
+
+  React.useEffect(() => {
+    const root = document.documentElement;
+    const read = () => {
+      if (root.classList.contains("dark")) setTheme("dark");
+      else if (root.classList.contains("light")) setTheme("light");
+      else setTheme("system");
+    };
+    read();
+    const observer = new MutationObserver(read);
+    observer.observe(root, { attributes: true, attributeFilter: ["class"] });
+    return () => observer.disconnect();
+  }, []);
+
+  return { theme };
+}

package/src/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

package/src/lib/disable-input-autofill.ts

@@ -0,0 +1,23 @@
+/**
+ * Atributos para evitar autocompletado de Safari/iCloud, Chrome,
+ * 1Password, LastPass, Bitwarden, etc. en buscadores y campos de datos.
+ *
+ * Los formularios de auth deben pasar `autoComplete` explícito
+ * (`email`, `current-password`, …) para anular estos defaults.
+ */
+export const DISABLE_INPUT_AUTOFILL = {
+  autoComplete: "off",
+  autoCorrect: "off",
+  autoCapitalize: "off",
+  spellCheck: false,
+  /** 1Password */
+  "data-1p-ignore": true,
+  /** LastPass */
+  "data-lpignore": "true",
+  /** Bitwarden */
+  "data-bwignore": "true",
+  /** Proton Pass */
+  "data-protonpass-ignore": "true",
+  /** Heurística genérica de gestores */
+  "data-form-type": "other",
+} as const;

package/src/lib/sidebar-persistence.ts

@@ -0,0 +1,76 @@
+/** Estado abierto/cerrado del panel lateral (desktop). */
+export const SIDEBAR_OPEN_STORAGE_KEY = "traky.sidebar.open";
+
+/** Prefijo para grupos colapsables de NavMain por sección (`/enterprise`, `/admin`, …). */
+export const SIDEBAR_NAV_GROUPS_PREFIX = "traky.sidebar.nav-groups:";
+
+export function readSidebarOpen(fallback = true): boolean {
+  if (typeof window === "undefined") return fallback;
+  try {
+    const stored = localStorage.getItem(SIDEBAR_OPEN_STORAGE_KEY);
+    if (stored === "true") return true;
+    if (stored === "false") return false;
+    const match = document.cookie.match(/(?:^|;\s*)sidebar_state=([^;]+)/);
+    if (match) return match[1] === "true";
+  } catch {
+    /* storage bloqueado */
+  }
+  return fallback;
+}
+
+export function writeSidebarOpen(open: boolean): void {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.setItem(SIDEBAR_OPEN_STORAGE_KEY, String(open));
+  } catch {
+    /* storage bloqueado */
+  }
+}
+
+export function navGroupsStorageKey(linkPrefix: string): string {
+  return `${SIDEBAR_NAV_GROUPS_PREFIX}${linkPrefix}`;
+}
+
+type NavGroupItem = {
+  title: string;
+  isActive?: boolean;
+  items?: unknown[];
+};
+
+function buildDefaultNavGroups(items: NavGroupItem[]): Record<string, boolean> {
+  return Object.fromEntries(
+    items
+      .filter((item) => item.items && item.items.length > 0)
+      .map((item) => [item.title, item.isActive === true]),
+  );
+}
+
+export function readNavGroupsOpen(
+  linkPrefix: string,
+  items: NavGroupItem[],
+): Record<string, boolean> {
+  const defaults = buildDefaultNavGroups(items);
+  if (typeof window === "undefined") return defaults;
+
+  try {
+    const raw = localStorage.getItem(navGroupsStorageKey(linkPrefix));
+    if (!raw) return defaults;
+    const parsed = JSON.parse(raw) as Record<string, boolean>;
+    if (typeof parsed !== "object" || parsed === null) return defaults;
+    return { ...defaults, ...parsed };
+  } catch {
+    return defaults;
+  }
+}
+
+export function writeNavGroupsOpen(
+  linkPrefix: string,
+  state: Record<string, boolean>,
+): void {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.setItem(navGroupsStorageKey(linkPrefix), JSON.stringify(state));
+  } catch {
+    /* storage bloqueado */
+  }
+}

package/src/lib/utils.ts

@@ -0,0 +1,30 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+/** Quita tildes, apóstrofos, comas y pasa a minúsculas (méx → mex, mexico, → mexico). */
+export function normalizeSearchText(value: string): string {
+  return value
+    .normalize("NFD")
+    .replace(/[\u0300-\u036f]/g, "")
+    .replace(/[''`´’]/g, "")
+    .replace(/[,.;:¡!¿?()[\]{}«»""„]/g, " ")
+    .replace(/\s+/g, " ")
+    .toLowerCase()
+    .trim()
+}
+
+/** Filtro cmdk insensible a acentos y mayúsculas. */
+export function commandFilterAccentInsensitive(
+  value: string,
+  search: string,
+): number {
+  const normalizedValue = normalizeSearchText(value)
+  const normalizedSearch = normalizeSearchText(search)
+  if (!normalizedSearch) return 1
+  return normalizedValue.includes(normalizedSearch) ? 1 : 0
+}
+

package/src/ui/accordion.tsx

@@ -0,0 +1,65 @@
+"use client"
+
+import { IconChevronDown } from "@tabler/icons-react";
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { cn } from "../lib/utils"
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <IconChevronDown className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/src/ui/alert-dialog.tsx

@@ -0,0 +1,163 @@
+"use client"
+
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "../lib/utils"
+import { buttonVariants } from "./button"
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
+  size?: "default" | "lg"
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          "bg-background 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 fixed top-[50%] left-[50%] z-50 w-full translate-x-[-50%] translate-y-[-50%] rounded-lg border shadow-lg duration-200",
+          size === "lg"
+            ? "flex max-h-[92dvh] max-w-[calc(100%-1.25rem)] flex-col gap-0 overflow-hidden p-0 sm:max-w-5xl"
+            : "grid max-w-[calc(100%-2rem)] gap-4 p-6 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-lg font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: "outline" }), className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}

package/src/ui/alert.tsx

@@ -0,0 +1,66 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }