@traky-app/ui 1.1.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@traky-app/ui",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Componentes Traky UI para importar desde @traky-app/ui, más el registro copy-paste.",
   "license": "MIT",
   "type": "module",
@@ -55,6 +55,8 @@
     "@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",

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        type=\"search\"\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,7 +76,8 @@ function CommandInput({
         // type=search + anti-autofill: evita iCloud Password / gestores
         // en “Buscar usuario”, “Buscar dirección”, etc.
         {...DISABLE_INPUT_AUTOFILL}
-        type="search"
+        // 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/ui/command.tsx

@@ -76,7 +76,8 @@ function CommandInput({
         // type=search + anti-autofill: evita iCloud Password / gestores
         // en “Buscar usuario”, “Buscar dirección”, etc.
         {...DISABLE_INPUT_AUTOFILL}
-        type="search"
+        // 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/src/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/src/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 }