@traky-app/ui 1.0.0 → 1.2.0

package/README.md

@@ -1,31 +1,24 @@
 # @traky-app/ui
 
-Registro oficial de componentes Traky (copy-paste, estilo shadcn, **sin** depender de `ui.shadcn.com`).
+Registro Traky UI: fuentes y manifiestos JSON para instalar componentes en apps Next.js (patrón copy-paste, sin depender de shadcn).
 
-## Estructura
+## Layout
 
 ```
-packages/ui/
-├── registry/traky/
-│   ├── ui/           # fuente .tsx (59+ componentes)
-│   ├── lib/          # utils, sidebar-persistence, …
-│   ├── hooks/        # use-mobile, …
-│   ├── json/         # ítems generados (*.json)
-│   └── registry.json # índice
-├── schema/components.json   # plantilla components.json
-└── scripts/build-registry.mjs
+registry/traky/
+├── ui/           # fuentes .tsx
+├── lib/          # utils, helpers del registro
+├── hooks/        # hooks referenciados por componentes
+├── json/         # ítems generados (*.json)
+└── registry.json
 ```
 
-## Generar JSON del registro
-
-Tras editar fuentes en `registry/traky/ui/`:
+## Build del registro
 
 ```bash
-pnpm --filter @traky-app/ui registry:build
+pnpm registry:build
 ```
 
-Commitea `registry/traky/json/` para que funcione la URL raw de GitHub.
-
-## Consumir desde app-traky
+Publicación: release en GitHub (tag `v` + `version` de este `package.json`) → workflow `publish.yml`. Manual: `npm publish --access public` (2FA/token).
 
-Ver `@traky-app/cli` y [REGISTRY.md](../../REGISTRY.md) en la raíz del monorepo.
+Guía completa: [REGISTRY.md](../../REGISTRY.md) en la raíz del monorepo.

package/package.json

@@ -1,17 +1,19 @@
 {
   "name": "@traky-app/ui",
-  "version": "1.0.0",
-  "description": "Registro Traky UI — componentes copy-paste (sin depender del registro shadcn)",
+  "version": "1.2.0",
+  "description": "Componentes Traky UI para importar desde @traky-app/ui, más el registro copy-paste.",
   "license": "MIT",
   "type": "module",
   "files": [
+    "src",
     "registry",
     "schema",
     "README.md"
   ],
   "exports": {
     "./registry/*": "./registry/*",
-    "./schema/components.json": "./schema/components.json"
+    "./schema/components.json": "./schema/components.json",
+    "./*": "./src/ui/*.tsx"
   },
   "scripts": {
     "registry:build": "node ./scripts/build-registry.mjs",
@@ -24,5 +26,50 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.20",
+    "@radix-ui/react-alert-dialog": "^1.1.23",
+    "@radix-ui/react-avatar": "^1.2.6",
+    "@radix-ui/react-checkbox": "^1.3.11",
+    "@radix-ui/react-collapsible": "^1.1.20",
+    "@radix-ui/react-context-menu": "^2.4.1",
+    "@radix-ui/react-dialog": "^1.1.23",
+    "@radix-ui/react-dropdown-menu": "^2.1.24",
+    "@radix-ui/react-hover-card": "^1.1.23",
+    "@radix-ui/react-label": "^2.1.15",
+    "@radix-ui/react-navigation-menu": "^1.2.22",
+    "@radix-ui/react-popover": "^1.1.23",
+    "@radix-ui/react-select": "^2.3.7",
+    "@radix-ui/react-slot": "^1.3.3",
+    "@radix-ui/react-tabs": "^1.1.21",
+    "@radix-ui/react-toggle": "^1.1.18",
+    "@radix-ui/react-toggle-group": "^1.1.19",
+    "@radix-ui/react-tooltip": "^1.2.16",
+    "@tabler/icons-react": "^3.46.0",
+    "@types/geojson": "^7946.0.16",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "cobe": "^0.6.5",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.5.0",
+    "maplibre-gl": "^6.9.1",
+    "motion": "^13.3.0",
+    "radix-ui": "^1.6.7",
+    "react-day-picker": "^10.0.2",
+    "recharts": "^3.10.1",
+    "sonner": "^2.0.8",
+    "tailwind-merge": "^3.7.0",
+    "vaul": "^1.1.2"
   }
 }

package/registry/traky/json/command.json

@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "ui/command.tsx",
-      "content": "\"use client\"\n\nimport { IconSearch } from \"@tabler/icons-react\";\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\nimport { DISABLE_INPUT_AUTOFILL } from \"@/lib/disable-input-autofill\"\nimport { cn } from \"@/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/components/ui/dialog\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof Dialog> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\"overflow-hidden p-0\", className)}\n        showCloseButton={showCloseButton}\n      >\n        <Command className=\"[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  name,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div\n      data-slot=\"command-input-wrapper\"\n      className=\"flex h-9 items-center gap-2 border-b px-3\"\n    >\n      <IconSearch className=\"size-4 shrink-0 opacity-50\" />\n      <CommandPrimitive.Input\n        data-slot=\"command-input\"\n        // type=search + anti-autofill: evita iCloud Password / gestores\n        // en “Buscar usuario”, “Buscar dirección”, etc.\n        {...DISABLE_INPUT_AUTOFILL}\n        enterKeyHint=\"search\"\n        name={name ?? \"traky-command-search\"}\n        className={cn(\n          \"placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandEmpty({\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className=\"py-6 text-center text-sm\"\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\n        \"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"bg-border -mx-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\n        \"text-muted-foreground ml-auto text-xs tracking-widest\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
+      "content": "\"use client\"\n\nimport { IconSearch } from \"@tabler/icons-react\";\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\nimport { DISABLE_INPUT_AUTOFILL } from \"@/lib/disable-input-autofill\"\nimport { cn } from \"@/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/components/ui/dialog\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof Dialog> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\"overflow-hidden p-0\", className)}\n        showCloseButton={showCloseButton}\n      >\n        <Command className=\"[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  name,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div\n      data-slot=\"command-input-wrapper\"\n      className=\"flex h-9 items-center gap-2 border-b px-3\"\n    >\n      <IconSearch className=\"size-4 shrink-0 opacity-50\" />\n      <CommandPrimitive.Input\n        data-slot=\"command-input\"\n        // type=search + anti-autofill: evita iCloud Password / gestores\n        // en “Buscar usuario”, “Buscar dirección”, etc.\n        {...DISABLE_INPUT_AUTOFILL}\n        // cmdk omite `type` de sus props, pero el input sí lo recibe.\n        {...({ type: \"search\" } as React.ComponentProps<typeof CommandPrimitive.Input>)}\n        enterKeyHint=\"search\"\n        name={name ?? \"traky-command-search\"}\n        className={cn(\n          \"placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandEmpty({\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className=\"py-6 text-center text-sm\"\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\n        \"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"bg-border -mx-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\n        \"text-muted-foreground ml-auto text-xs tracking-widest\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
       "type": "registry:ui",
       "target": ""
     }

package/registry/traky/json/icon.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "icon",
+  "type": "registry:ui",
+  "author": "Traky (https://traky.app)",
+  "dependencies": [
+    "class-variance-authority"
+  ],
+  "files": [
+    {
+      "path": "ui/icon.tsx",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst iconVariants = cva(\"inline-flex items-start\", {\n  variants: {\n    variant: {\n      green: \"text-[#a5dd64]\",\n      blue: \"text-[#000b27]\",\n      white: \"text-white\",\n    },\n    size: {\n      xs: \"[&_svg]:h-6\",\n      sm: \"[&_svg]:h-10\",\n      md: \"[&_svg]:h-14\",\n      lg: \"[&_svg]:h-20\",\n    },\n  },\n  defaultVariants: {\n    variant: \"green\",\n    size: \"md\",\n  },\n})\n\nconst ICON_PATH =\n  \"M137.5,137.32c32.32-32.32,31.39-85.48-2.79-116.6-30.34-27.63-78.03-27.63-108.37,0C-2.4,46.89-7.62,88.67,10.67,120.51c7.17,12.47,18.17,22.28,31.67,27.27,11.56,4.27,23.9,5.5,33.94,3.23l-20.23,19.95,23.62,23.62s55.88-55.31,57.83-57.26ZM55.69,105.19c-13.7-13.7-13.7-35.99,0-49.69,13.7-13.7,35.99-13.7,49.69,0,13.7,13.7,13.7,35.99,0,49.69-13.7,13.7-35.99,13.7-49.69,0Z\"\n\ntype IconProps = React.ComponentProps<\"span\"> &\n  VariantProps<typeof iconVariants> & {\n    /** Muestra ® junto al isotipo. */\n    registered?: boolean\n  }\n\nfunction Icon({\n  className,\n  variant = \"green\",\n  size = \"md\",\n  registered = false,\n  ...props\n}: IconProps) {\n  return (\n    <span\n      data-slot=\"icon\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(iconVariants({ variant, size }), className)}\n      {...props}\n    >\n      <svg\n        viewBox=\"0 0 161.06 194.58\"\n        role=\"img\"\n        aria-label=\"Traky\"\n        className=\"block w-auto fill-current\"\n      >\n        <path d={ICON_PATH} />\n      </svg>\n      {registered ? (\n        <sup\n          className=\"ml-0.5 text-[0.55em] leading-none font-semibold select-none opacity-80\"\n          aria-hidden\n        >\n          ®\n        </sup>\n      ) : null}\n    </span>\n  )\n}\n\nexport { Icon, iconVariants }\nexport type { IconProps }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}

package/registry/traky/json/logo.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "logo",
+  "type": "registry:ui",
+  "author": "Traky (https://traky.app)",
+  "dependencies": [
+    "class-variance-authority"
+  ],
+  "files": [
+    {
+      "path": "ui/logo.tsx",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst logoVariants = cva(\"inline-flex items-start\", {\n  variants: {\n    variant: {\n      green: \"text-[#a5dd64]\",\n      blue: \"text-[#000b27]\",\n      white: \"text-white\",\n    },\n    size: {\n      xs: \"[&_svg]:h-6\",\n      sm: \"[&_svg]:h-10\",\n      md: \"[&_svg]:h-14\",\n      lg: \"[&_svg]:h-20\",\n    },\n  },\n  defaultVariants: {\n    variant: \"green\",\n    size: \"md\",\n  },\n})\n\nconst LOGO_PATHS = [\n  \"M259.89,30.16l-12,44.79h-5.2c-14.45,0-17.26-8.8-14.36-19.61l6.76-25.24h-14.21l-6.76,25.24c-5,18.65,6.11,33.82,24.76,33.82h5.2l-1.84,6.08c-2.9,10.81-14.06,19.61-24.87,19.61h-16.38l-3.81,14.21h16.38c18.65,0,37.89-15.17,42.88-33.82l17.65-65.08h-14.21Z\",\n  \"M15.4,55.45l2.72-10.15h28.64l4-14.91h-28.64L30.26,0h-14.21L1.2,55.45c-5,18.65,6.11,33.82,24.76,33.82h9.02l3.81-14.21h-9.02c-10.82,0-17.26-8.8-14.36-19.62Z\",\n  \"M186.36,56.58l25.6-16.04,2.71-10.11h-10.01l-38.7,24.32,6.53-24.38h-13.6l-15.77,58.85h13.6l5.47-20.43h10.6c10.56,0,16.85,8.59,14.02,19.15l-.33,1.23h13.87l.33-1.23c3.91-14.61-2.31-27.01-14.32-31.35Z\",\n  \"M122.83,28.78c-11.62,0-23.48,6.65-31.07,16.33l3.78-14.1h-4.37c-7.07,0-14.34,2.25-20.93,6.04l1.78-6.64h-15.15l-4.06,15.15h6.4c-5.58,5.6-9.85,12.4-11.81,19.68l-6.52,24.33h14.98s6.63-24.74,6.63-24.74c2.9-10.81,14.06-19.61,24.87-19.61h4.32c-3.18,4.09-5.62,8.7-6.93,13.6-4.44,16.56,5.43,30.03,21.99,30.03,6.5,0,13.07-2.1,18.94-5.62l-1.59,5.92h12.45s8-29.31,8.28-30.33c4.44-16.56-5.43-30.03-21.99-30.03ZM110.45,74.99c-8.91,0-14.22-7.25-11.84-16.17,2.39-8.91,11.59-16.17,20.5-16.17s14.22,7.25,11.84,16.17c-2.39,8.91-11.59,16.17-20.5,16.17Z\",\n] as const\n\ntype LogoProps = React.ComponentProps<\"span\"> &\n  VariantProps<typeof logoVariants> & {\n    /** Muestra ® junto al wordmark. */\n    registered?: boolean\n  }\n\nfunction Logo({\n  className,\n  variant = \"green\",\n  size = \"md\",\n  registered = false,\n  ...props\n}: LogoProps) {\n  return (\n    <span\n      data-slot=\"logo\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(logoVariants({ variant, size }), className)}\n      {...props}\n    >\n      <svg\n        viewBox=\"0 0 274.1 129.06\"\n        role=\"img\"\n        aria-label=\"Traky\"\n        className=\"block w-auto fill-current\"\n      >\n        {LOGO_PATHS.map((d) => (\n          <path key={d.slice(0, 12)} d={d} />\n        ))}\n      </svg>\n      {registered ? (\n        <sup\n          className=\"ml-0.5 text-[0.55em] leading-none font-semibold select-none opacity-80\"\n          aria-hidden\n        >\n          ®\n        </sup>\n      ) : null}\n    </span>\n  )\n}\n\nexport { Logo, logoVariants }\nexport type { LogoProps }\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}

package/registry/traky/registry.json

@@ -293,6 +293,16 @@
         }
       ]
     },
+    {
+      "name": "icon",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "json/icon.json",
+          "type": "registry:file"
+        }
+      ]
+    },
     {
       "name": "input-group",
       "type": "registry:ui",
@@ -353,6 +363,16 @@
         }
       ]
     },
+    {
+      "name": "logo",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "json/logo.json",
+          "type": "registry:file"
+        }
+      ]
+    },
     {
       "name": "map",
       "type": "registry:ui",

package/registry/traky/ui/command.tsx

@@ -76,6 +76,8 @@ function CommandInput({
         // type=search + anti-autofill: evita iCloud Password / gestores
         // en “Buscar usuario”, “Buscar dirección”, etc.
         {...DISABLE_INPUT_AUTOFILL}
+        // cmdk omite `type` de sus props, pero el input sí lo recibe.
+        {...({ type: "search" } as React.ComponentProps<typeof CommandPrimitive.Input>)}
         enterKeyHint="search"
         name={name ?? "traky-command-search"}
         className={cn(

package/registry/traky/ui/icon.tsx

@@ -0,0 +1,71 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const iconVariants = cva("inline-flex items-start", {
+  variants: {
+    variant: {
+      green: "text-[#a5dd64]",
+      blue: "text-[#000b27]",
+      white: "text-white",
+    },
+    size: {
+      xs: "[&_svg]:h-6",
+      sm: "[&_svg]:h-10",
+      md: "[&_svg]:h-14",
+      lg: "[&_svg]:h-20",
+    },
+  },
+  defaultVariants: {
+    variant: "green",
+    size: "md",
+  },
+})
+
+const ICON_PATH =
+  "M137.5,137.32c32.32-32.32,31.39-85.48-2.79-116.6-30.34-27.63-78.03-27.63-108.37,0C-2.4,46.89-7.62,88.67,10.67,120.51c7.17,12.47,18.17,22.28,31.67,27.27,11.56,4.27,23.9,5.5,33.94,3.23l-20.23,19.95,23.62,23.62s55.88-55.31,57.83-57.26ZM55.69,105.19c-13.7-13.7-13.7-35.99,0-49.69,13.7-13.7,35.99-13.7,49.69,0,13.7,13.7,13.7,35.99,0,49.69-13.7,13.7-35.99,13.7-49.69,0Z"
+
+type IconProps = React.ComponentProps<"span"> &
+  VariantProps<typeof iconVariants> & {
+    /** Muestra ® junto al isotipo. */
+    registered?: boolean
+  }
+
+function Icon({
+  className,
+  variant = "green",
+  size = "md",
+  registered = false,
+  ...props
+}: IconProps) {
+  return (
+    <span
+      data-slot="icon"
+      data-variant={variant}
+      data-size={size}
+      className={cn(iconVariants({ variant, size }), className)}
+      {...props}
+    >
+      <svg
+        viewBox="0 0 161.06 194.58"
+        role="img"
+        aria-label="Traky"
+        className="block w-auto fill-current"
+      >
+        <path d={ICON_PATH} />
+      </svg>
+      {registered ? (
+        <sup
+          className="ml-0.5 text-[0.55em] leading-none font-semibold select-none opacity-80"
+          aria-hidden
+        >
+          ®
+        </sup>
+      ) : null}
+    </span>
+  )
+}
+
+export { Icon, iconVariants }
+export type { IconProps }

package/registry/traky/ui/logo.tsx

@@ -0,0 +1,77 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const logoVariants = cva("inline-flex items-start", {
+  variants: {
+    variant: {
+      green: "text-[#a5dd64]",
+      blue: "text-[#000b27]",
+      white: "text-white",
+    },
+    size: {
+      xs: "[&_svg]:h-6",
+      sm: "[&_svg]:h-10",
+      md: "[&_svg]:h-14",
+      lg: "[&_svg]:h-20",
+    },
+  },
+  defaultVariants: {
+    variant: "green",
+    size: "md",
+  },
+})
+
+const LOGO_PATHS = [
+  "M259.89,30.16l-12,44.79h-5.2c-14.45,0-17.26-8.8-14.36-19.61l6.76-25.24h-14.21l-6.76,25.24c-5,18.65,6.11,33.82,24.76,33.82h5.2l-1.84,6.08c-2.9,10.81-14.06,19.61-24.87,19.61h-16.38l-3.81,14.21h16.38c18.65,0,37.89-15.17,42.88-33.82l17.65-65.08h-14.21Z",
+  "M15.4,55.45l2.72-10.15h28.64l4-14.91h-28.64L30.26,0h-14.21L1.2,55.45c-5,18.65,6.11,33.82,24.76,33.82h9.02l3.81-14.21h-9.02c-10.82,0-17.26-8.8-14.36-19.62Z",
+  "M186.36,56.58l25.6-16.04,2.71-10.11h-10.01l-38.7,24.32,6.53-24.38h-13.6l-15.77,58.85h13.6l5.47-20.43h10.6c10.56,0,16.85,8.59,14.02,19.15l-.33,1.23h13.87l.33-1.23c3.91-14.61-2.31-27.01-14.32-31.35Z",
+  "M122.83,28.78c-11.62,0-23.48,6.65-31.07,16.33l3.78-14.1h-4.37c-7.07,0-14.34,2.25-20.93,6.04l1.78-6.64h-15.15l-4.06,15.15h6.4c-5.58,5.6-9.85,12.4-11.81,19.68l-6.52,24.33h14.98s6.63-24.74,6.63-24.74c2.9-10.81,14.06-19.61,24.87-19.61h4.32c-3.18,4.09-5.62,8.7-6.93,13.6-4.44,16.56,5.43,30.03,21.99,30.03,6.5,0,13.07-2.1,18.94-5.62l-1.59,5.92h12.45s8-29.31,8.28-30.33c4.44-16.56-5.43-30.03-21.99-30.03ZM110.45,74.99c-8.91,0-14.22-7.25-11.84-16.17,2.39-8.91,11.59-16.17,20.5-16.17s14.22,7.25,11.84,16.17c-2.39,8.91-11.59,16.17-20.5,16.17Z",
+] as const
+
+type LogoProps = React.ComponentProps<"span"> &
+  VariantProps<typeof logoVariants> & {
+    /** Muestra ® junto al wordmark. */
+    registered?: boolean
+  }
+
+function Logo({
+  className,
+  variant = "green",
+  size = "md",
+  registered = false,
+  ...props
+}: LogoProps) {
+  return (
+    <span
+      data-slot="logo"
+      data-variant={variant}
+      data-size={size}
+      className={cn(logoVariants({ variant, size }), className)}
+      {...props}
+    >
+      <svg
+        viewBox="0 0 274.1 129.06"
+        role="img"
+        aria-label="Traky"
+        className="block w-auto fill-current"
+      >
+        {LOGO_PATHS.map((d) => (
+          <path key={d.slice(0, 12)} d={d} />
+        ))}
+      </svg>
+      {registered ? (
+        <sup
+          className="ml-0.5 text-[0.55em] leading-none font-semibold select-none opacity-80"
+          aria-hidden
+        >
+          ®
+        </sup>
+      ) : null}
+    </span>
+  )
+}
+
+export { Logo, logoVariants }
+export type { LogoProps }

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 }