create-lexy 0.3.1 → 0.4.0

package/assets/r/popover.json

@@ -13,7 +13,7 @@
       "path": "components/base/Popover.tsx",
       "type": "registry:ui",
       "target": "components/base/Popover.tsx",
-      "content": "import * as React from \"react\";\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\nconst Popover = PopoverPrimitive.Root;\nconst PopoverTrigger = PopoverPrimitive.Trigger;\nconst PopoverAnchor = PopoverPrimitive.Anchor;\n\nconst PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\n  <PopoverPrimitive.Portal>\n    <PopoverPrimitive.Content\n      ref={ref}\n      align={align}\n      sideOffset={sideOffset}\n      className={cn(\n        \"z-50 w-72 rounded border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n        className,\n      )}\n      {...props}\n    />\n  </PopoverPrimitive.Portal>\n));\nPopoverContent.displayName = PopoverPrimitive.Content.displayName;\n\nexport { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };\n"
+      "content": "import * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\nconst Popover = PopoverPrimitive.Root;\nconst PopoverTrigger = PopoverPrimitive.Trigger;\nconst PopoverAnchor = PopoverPrimitive.Anchor;\n\nconst PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\n  <PopoverPrimitive.Portal>\n    <PopoverPrimitive.Content\n      ref={ref}\n      align={align}\n      sideOffset={sideOffset}\n      className={cn(\n        \"z-50 w-72 rounded border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n        className,\n      )}\n      {...props}\n    />\n  </PopoverPrimitive.Portal>\n));\nPopoverContent.displayName = PopoverPrimitive.Content.displayName;\n\nexport { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };\n"
     },
     {
       "path": "components/base/Popover.md",

package/assets/r/profile-card.json

@@ -14,7 +14,7 @@
       "path": "components/base/ProfileCard.tsx",
       "type": "registry:ui",
       "target": "components/base/ProfileCard.tsx",
-      "content": "import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils/cn\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"./Avatar\";\nimport { Button } from \"./Button\";\n\nexport interface ProfileCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  name: string;\n  role?: string;\n  initials?: string;\n  src?: string;\n  primaryAction?: string;\n  secondaryAction?: string;\n  onPrimary?: () => void;\n  onSecondary?: () => void;\n  /** Oculta la fila de acciones cuando es `false`. */\n  showActions?: boolean;\n}\n\nexport const ProfileCard = React.forwardRef<HTMLDivElement, ProfileCardProps>(\n  (\n    {\n      name,\n      role,\n      initials,\n      src,\n      primaryAction = \"Ver perfil\",\n      secondaryAction = \"Mensaje\",\n      onPrimary,\n      onSecondary,\n      showActions = true,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <article\n        ref={ref}\n        className={cn(\n          \"flex w-70 flex-col gap-4 rounded-lg border border-border bg-background p-6 transition-shadow hover:shadow-md\",\n          className,\n        )}\n        {...props}>\n        <Avatar className='h-16 w-16'>\n          {src && <AvatarImage src={src} alt={name} />}\n          <AvatarFallback>{initials ?? name.slice(0, 2)}</AvatarFallback>\n        </Avatar>\n        <div className='flex flex-col gap-0.5'>\n          <h3 className='text-sm font-medium text-foreground'>{name}</h3>\n          {role && <p className='text-xs text-muted-foreground'>{role}</p>}\n        </div>\n        {showActions && (\n          <div className='flex gap-2'>\n            <Button size='sm' onClick={onPrimary}>\n              {primaryAction}\n            </Button>\n            <Button size='sm' variant='secondary' onClick={onSecondary}>\n              {secondaryAction}\n            </Button>\n          </div>\n        )}\n      </article>\n    );\n  },\n);\n\nProfileCard.displayName = \"ProfileCard\";\n"
+      "content": "import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"./Avatar\";\nimport { Button } from \"./Button\";\n\nexport interface ProfileCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  name: string;\n  role?: string;\n  initials?: string;\n  src?: string;\n  primaryAction?: string;\n  secondaryAction?: string;\n  onPrimary?: () => void;\n  onSecondary?: () => void;\n  /** Oculta la fila de acciones cuando es `false`. */\n  showActions?: boolean;\n}\n\nexport const ProfileCard = React.forwardRef<HTMLDivElement, ProfileCardProps>(\n  (\n    {\n      name,\n      role,\n      initials,\n      src,\n      primaryAction = \"Ver perfil\",\n      secondaryAction = \"Mensaje\",\n      onPrimary,\n      onSecondary,\n      showActions = true,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <article\n        ref={ref}\n        className={cn(\n          \"flex w-70 flex-col gap-4 rounded-lg border border-border bg-background p-6 transition-shadow hover:shadow-md\",\n          className,\n        )}\n        {...props}\n      >\n        <Avatar className=\"h-16 w-16\">\n          {src && <AvatarImage src={src} alt={name} />}\n          <AvatarFallback>{initials ?? name.slice(0, 2)}</AvatarFallback>\n        </Avatar>\n        <div className=\"flex flex-col gap-0.5\">\n          <h3 className=\"text-sm font-medium text-foreground\">{name}</h3>\n          {role && <p className=\"text-xs text-muted-foreground\">{role}</p>}\n        </div>\n        {showActions && (\n          <div className=\"flex gap-2\">\n            <Button size=\"sm\" onClick={onPrimary}>\n              {primaryAction}\n            </Button>\n            <Button size=\"sm\" variant=\"secondary\" onClick={onSecondary}>\n              {secondaryAction}\n            </Button>\n          </div>\n        )}\n      </article>\n    );\n  },\n);\n\nProfileCard.displayName = \"ProfileCard\";\n"
     },
     {
       "path": "components/base/ProfileCard.md",

package/assets/r/progress.json

@@ -13,7 +13,7 @@
       "path": "components/base/Progress.tsx",
       "type": "registry:ui",
       "target": "components/base/Progress.tsx",
-      "content": "import * as React from \"react\";\nimport * as ProgressPrimitive from \"@radix-ui/react-progress\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\nconst Progress = React.forwardRef<\n  React.ElementRef<typeof ProgressPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>\n>(({ className, value, ...props }, ref) => (\n  <ProgressPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"relative h-2 w-full overflow-hidden rounded-full bg-secondary\",\n      className,\n    )}\n    {...props}>\n    <ProgressPrimitive.Indicator\n      className='h-full w-full flex-1 bg-primary transition-all'\n      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n    />\n  </ProgressPrimitive.Root>\n));\nProgress.displayName = ProgressPrimitive.Root.displayName;\n\nexport { Progress };\n"
+      "content": "import * as ProgressPrimitive from \"@radix-ui/react-progress\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\nconst Progress = React.forwardRef<\n  React.ElementRef<typeof ProgressPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>\n>(({ className, value, ...props }, ref) => (\n  <ProgressPrimitive.Root\n    ref={ref}\n    className={cn(\"relative h-2 w-full overflow-hidden rounded-full bg-secondary\", className)}\n    {...props}\n  >\n    <ProgressPrimitive.Indicator\n      className=\"h-full w-full flex-1 bg-primary transition-all\"\n      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n    />\n  </ProgressPrimitive.Root>\n));\nProgress.displayName = ProgressPrimitive.Root.displayName;\n\nexport { Progress };\n"
     },
     {
       "path": "components/base/Progress.md",

package/assets/r/radio-group.json

@@ -13,7 +13,7 @@
       "path": "components/base/RadioGroup.tsx",
       "type": "registry:ui",
       "target": "components/base/RadioGroup.tsx",
-      "content": "import * as React from \"react\";\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\nconst RadioGroup = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <RadioGroupPrimitive.Root\n    ref={ref}\n    className={cn(\"grid gap-2\", className)}\n    {...props}\n  />\n));\nRadioGroup.displayName = RadioGroupPrimitive.Root.displayName;\n\nconst RadioGroupItem = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <RadioGroupPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"aspect-square h-4 w-4 cursor-pointer rounded-full border border-primary text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\",\n      className,\n    )}\n    {...props}>\n    <RadioGroupPrimitive.Indicator className='flex items-center justify-center'>\n      <span className='h-2.5 w-2.5 rounded-full bg-current' />\n    </RadioGroupPrimitive.Indicator>\n  </RadioGroupPrimitive.Item>\n));\nRadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;\n\nexport { RadioGroup, RadioGroupItem };\n"
+      "content": "import * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\nconst RadioGroup = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <RadioGroupPrimitive.Root ref={ref} className={cn(\"grid gap-2\", className)} {...props} />\n));\nRadioGroup.displayName = RadioGroupPrimitive.Root.displayName;\n\nconst RadioGroupItem = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <RadioGroupPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"aspect-square h-4 w-4 cursor-pointer rounded-full border border-primary text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\",\n      className,\n    )}\n    {...props}\n  >\n    <RadioGroupPrimitive.Indicator className=\"flex items-center justify-center\">\n      <span className=\"h-2.5 w-2.5 rounded-full bg-current\" />\n    </RadioGroupPrimitive.Indicator>\n  </RadioGroupPrimitive.Item>\n));\nRadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;\n\nexport { RadioGroup, RadioGroupItem };\n"
     },
     {
       "path": "components/base/RadioGroup.md",

package/assets/r/scroll-area.json

@@ -13,7 +13,7 @@
       "path": "components/base/ScrollArea.tsx",
       "type": "registry:ui",
       "target": "components/base/ScrollArea.tsx",
-      "content": "import * as React from \"react\";\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"size-full rounded-[inherit] transition-[color,box-shadow] outline-none\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  );\n}\n\nfunction ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {\n  return (\n    <ScrollAreaPrimitive.ScrollAreaScrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        \"flex touch-none select-none transition-colors\",\n        \"data-[orientation=horizontal]:h-2 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent\",\n        \"data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2 data-[orientation=vertical]:border-l data-[orientation=vertical]:border-l-transparent\",\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.ScrollAreaThumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"relative flex-1 rounded-full bg-muted-foreground/20 hover:bg-muted-foreground/30 transition-colors\"\n      />\n    </ScrollAreaPrimitive.ScrollAreaScrollbar>\n  );\n}\n\nexport { ScrollArea, ScrollBar };\n"
+      "content": "import * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"size-full rounded-[inherit] transition-[color,box-shadow] outline-none\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  );\n}\n\nfunction ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {\n  return (\n    <ScrollAreaPrimitive.ScrollAreaScrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        \"flex touch-none select-none transition-colors\",\n        \"data-[orientation=horizontal]:h-2 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent\",\n        \"data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2 data-[orientation=vertical]:border-l data-[orientation=vertical]:border-l-transparent\",\n        className,\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.ScrollAreaThumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"relative flex-1 rounded-full bg-muted-foreground/20 hover:bg-muted-foreground/30 transition-colors\"\n      />\n    </ScrollAreaPrimitive.ScrollAreaScrollbar>\n  );\n}\n\nexport { ScrollArea, ScrollBar };\n"
     },
     {
       "path": "components/base/ScrollArea.md",

package/assets/r/searchbox.json

@@ -11,7 +11,7 @@
       "path": "components/base/Searchbox.tsx",
       "type": "registry:ui",
       "target": "components/base/Searchbox.tsx",
-      "content": "import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\nexport interface SearchboxProps\n  extends Omit<React.ComponentProps<\"input\">, \"type\"> {\n  /** Cuando se define, muestra un botón (×) para limpiar el campo. */\n  onClear?: () => void;\n}\n\nconst Searchbox = React.forwardRef<HTMLInputElement, SearchboxProps>(\n  ({ className, onClear, value, disabled, ...props }, ref) => {\n    const hasValue = value !== undefined && String(value) !== \"\";\n    const showClear = !!onClear && hasValue && !disabled;\n\n    return (\n      <div className={cn(\"relative flex w-full items-center\", className)}>\n        <svg\n          className='pointer-events-none absolute left-3 h-4 w-4 text-muted-foreground'\n          viewBox='0 0 24 24'\n          fill='none'\n          stroke='currentColor'\n          strokeWidth='2'\n          strokeLinecap='round'\n          strokeLinejoin='round'>\n          <circle cx='11' cy='11' r='8' />\n          <path d='m21 21-4.3-4.3' />\n        </svg>\n        <input\n          ref={ref}\n          type='search'\n          role='searchbox'\n          value={value}\n          disabled={disabled}\n          className={cn(\n            \"flex h-10 w-full rounded border border-input bg-background pl-9 pr-9 text-sm text-foreground outline-none transition-colors duration-150\",\n            \"placeholder:text-muted-foreground\",\n            \"hover:border-muted-foreground/40 focus-visible:border-primary\",\n            \"disabled:cursor-not-allowed disabled:opacity-50\",\n            \"[&::-webkit-search-cancel-button]:appearance-none\",\n          )}\n          {...props}\n        />\n        {showClear && (\n          <button\n            type='button'\n            onClick={onClear}\n            aria-label='Limpiar'\n            className='absolute right-3 flex h-4 w-4 cursor-pointer items-center justify-center text-muted-foreground transition-colors hover:text-foreground'>\n            <svg\n              className='h-4 w-4'\n              viewBox='0 0 24 24'\n              fill='none'\n              stroke='currentColor'\n              strokeWidth='2'\n              strokeLinecap='round'\n              strokeLinejoin='round'>\n              <path d='M18 6 6 18M6 6l12 12' />\n            </svg>\n          </button>\n        )}\n      </div>\n    );\n  },\n);\nSearchbox.displayName = \"Searchbox\";\n\nexport { Searchbox };\n"
+      "content": "import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\nexport interface SearchboxProps extends Omit<React.ComponentProps<\"input\">, \"type\"> {\n  /** Cuando se define, muestra un botón (×) para limpiar el campo. */\n  onClear?: () => void;\n}\n\nconst Searchbox = React.forwardRef<HTMLInputElement, SearchboxProps>(\n  ({ className, onClear, value, disabled, ...props }, ref) => {\n    const hasValue = value !== undefined && String(value) !== \"\";\n    const showClear = !!onClear && hasValue && !disabled;\n\n    return (\n      <div className={cn(\"relative flex w-full items-center\", className)}>\n        <svg\n          className=\"pointer-events-none absolute left-3 h-4 w-4 text-muted-foreground\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        >\n          <circle cx=\"11\" cy=\"11\" r=\"8\" />\n          <path d=\"m21 21-4.3-4.3\" />\n        </svg>\n        <input\n          ref={ref}\n          type=\"search\"\n          role=\"searchbox\"\n          value={value}\n          disabled={disabled}\n          className={cn(\n            \"flex h-10 w-full rounded border border-input bg-background pl-9 pr-9 text-sm text-foreground outline-none transition-colors duration-150\",\n            \"placeholder:text-muted-foreground\",\n            \"hover:border-muted-foreground/40 focus-visible:border-primary\",\n            \"disabled:cursor-not-allowed disabled:opacity-50\",\n            \"[&::-webkit-search-cancel-button]:appearance-none\",\n          )}\n          {...props}\n        />\n        {showClear && (\n          <button\n            type=\"button\"\n            onClick={onClear}\n            aria-label=\"Limpiar\"\n            className=\"absolute right-3 flex h-4 w-4 cursor-pointer items-center justify-center text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            <svg\n              className=\"h-4 w-4\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            >\n              <path d=\"M18 6 6 18M6 6l12 12\" />\n            </svg>\n          </button>\n        )}\n      </div>\n    );\n  },\n);\nSearchbox.displayName = \"Searchbox\";\n\nexport { Searchbox };\n"
     },
     {
       "path": "components/base/Searchbox.md",

package/assets/r/select.json

@@ -13,7 +13,7 @@
       "path": "components/base/Select.tsx",
       "type": "registry:ui",
       "target": "components/base/Select.tsx",
-      "content": "import * as React from \"react\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\nconst Select = SelectPrimitive.Root;\nconst SelectGroup = SelectPrimitive.Group;\nconst SelectValue = SelectPrimitive.Value;\n\nconst SelectTrigger = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"flex h-10 w-full items-center justify-between rounded border border-input bg-background px-3 py-2 text-sm text-foreground outline-none transition-colors duration-150 hover:border-muted-foreground/40 focus:border-primary disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground [&>span]:line-clamp-1\",\n      className,\n    )}\n    {...props}>\n    {children}\n    <SelectPrimitive.Icon asChild>\n      <svg\n        className='h-4 w-4 opacity-50 transition-transform duration-200 data-[state=open]:rotate-180'\n        viewBox='0 0 24 24'\n        fill='none'\n        stroke='currentColor'\n        strokeWidth='2'\n        strokeLinecap='round'\n        strokeLinejoin='round'>\n        <path d='m6 9 6 6 6-6' />\n      </svg>\n    </SelectPrimitive.Icon>\n  </SelectPrimitive.Trigger>\n));\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName;\n\nconst SelectScrollUpButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollUpButton\n    ref={ref}\n    className={cn(\"flex cursor-default items-center justify-center py-1\", className)}\n    {...props}>\n    <svg\n      className='h-4 w-4'\n      viewBox='0 0 24 24'\n      fill='none'\n      stroke='currentColor'\n      strokeWidth='2'\n      strokeLinecap='round'\n      strokeLinejoin='round'>\n      <path d='m18 15-6-6-6 6' />\n    </svg>\n  </SelectPrimitive.ScrollUpButton>\n));\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;\n\nconst SelectScrollDownButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollDownButton\n    ref={ref}\n    className={cn(\"flex cursor-default items-center justify-center py-1\", className)}\n    {...props}>\n    <svg\n      className='h-4 w-4'\n      viewBox='0 0 24 24'\n      fill='none'\n      stroke='currentColor'\n      strokeWidth='2'\n      strokeLinecap='round'\n      strokeLinejoin='round'>\n      <path d='m6 9 6 6 6-6' />\n    </svg>\n  </SelectPrimitive.ScrollDownButton>\n));\nSelectScrollDownButton.displayName =\n  SelectPrimitive.ScrollDownButton.displayName;\n\nconst SelectContent = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n  <SelectPrimitive.Portal>\n    <SelectPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"relative z-50 max-h-96 overflow-hidden rounded border border-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=top]:slide-in-from-bottom-2\",\n        position === \"popper\" &&\n          \"w-[var(--radix-select-trigger-width)] data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1\",\n        className,\n      )}\n      position={position}\n      {...props}>\n      <SelectScrollUpButton />\n      <SelectPrimitive.Viewport\n        className={cn(\n          \"p-1\",\n          position === \"popper\" &&\n            \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\",\n        )}>\n        {children}\n      </SelectPrimitive.Viewport>\n      <SelectScrollDownButton />\n    </SelectPrimitive.Content>\n  </SelectPrimitive.Portal>\n));\nSelectContent.displayName = SelectPrimitive.Content.displayName;\n\nconst SelectLabel = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Label\n    ref={ref}\n    className={cn(\n      \"px-2 py-1.5 text-xs font-medium text-muted-foreground\",\n      className,\n    )}\n    {...props}\n  />\n));\nSelectLabel.displayName = SelectPrimitive.Label.displayName;\n\nconst SelectItem = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex w-full cursor-pointer select-none items-center rounded py-1.5 pl-8 pr-2 text-sm text-foreground outline-none focus:bg-primary/15 focus:text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className,\n    )}\n    {...props}>\n    <span className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>\n      <SelectPrimitive.ItemIndicator>\n        <svg\n          className='h-4 w-4'\n          viewBox='0 0 24 24'\n          fill='none'\n          stroke='currentColor'\n          strokeWidth='2'\n          strokeLinecap='round'\n          strokeLinejoin='round'>\n          <path d='M20 6 9 17l-5-5' />\n        </svg>\n      </SelectPrimitive.ItemIndicator>\n    </span>\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n  </SelectPrimitive.Item>\n));\nSelectItem.displayName = SelectPrimitive.Item.displayName;\n\nconst SelectSeparator = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n    {...props}\n  />\n));\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName;\n\nexport {\n  Select,\n  SelectGroup,\n  SelectValue,\n  SelectTrigger,\n  SelectContent,\n  SelectLabel,\n  SelectItem,\n  SelectSeparator,\n  SelectScrollUpButton,\n  SelectScrollDownButton,\n};\n"
+      "content": "import * as SelectPrimitive from \"@radix-ui/react-select\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\nconst Select = SelectPrimitive.Root;\nconst SelectGroup = SelectPrimitive.Group;\nconst SelectValue = SelectPrimitive.Value;\n\nconst SelectTrigger = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"flex h-10 w-full items-center justify-between rounded border border-input bg-background px-3 py-2 text-sm text-foreground outline-none transition-colors duration-150 hover:border-muted-foreground/40 focus:border-primary disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground [&>span]:line-clamp-1\",\n      className,\n    )}\n    {...props}\n  >\n    {children}\n    <SelectPrimitive.Icon asChild>\n      <svg\n        className=\"h-4 w-4 opacity-50 transition-transform duration-200 data-[state=open]:rotate-180\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      >\n        <path d=\"m6 9 6 6 6-6\" />\n      </svg>\n    </SelectPrimitive.Icon>\n  </SelectPrimitive.Trigger>\n));\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName;\n\nconst SelectScrollUpButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollUpButton\n    ref={ref}\n    className={cn(\"flex cursor-default items-center justify-center py-1\", className)}\n    {...props}\n  >\n    <svg\n      className=\"h-4 w-4\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"m18 15-6-6-6 6\" />\n    </svg>\n  </SelectPrimitive.ScrollUpButton>\n));\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;\n\nconst SelectScrollDownButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollDownButton\n    ref={ref}\n    className={cn(\"flex cursor-default items-center justify-center py-1\", className)}\n    {...props}\n  >\n    <svg\n      className=\"h-4 w-4\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  </SelectPrimitive.ScrollDownButton>\n));\nSelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;\n\nconst SelectContent = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n  <SelectPrimitive.Portal>\n    <SelectPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"relative z-50 max-h-96 overflow-hidden rounded border border-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=top]:slide-in-from-bottom-2\",\n        position === \"popper\" &&\n          \"w-[var(--radix-select-trigger-width)] data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1\",\n        className,\n      )}\n      position={position}\n      {...props}\n    >\n      <SelectScrollUpButton />\n      <SelectPrimitive.Viewport\n        className={cn(\n          \"p-1\",\n          position === \"popper\" &&\n            \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\",\n        )}\n      >\n        {children}\n      </SelectPrimitive.Viewport>\n      <SelectScrollDownButton />\n    </SelectPrimitive.Content>\n  </SelectPrimitive.Portal>\n));\nSelectContent.displayName = SelectPrimitive.Content.displayName;\n\nconst SelectLabel = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Label\n    ref={ref}\n    className={cn(\"px-2 py-1.5 text-xs font-medium text-muted-foreground\", className)}\n    {...props}\n  />\n));\nSelectLabel.displayName = SelectPrimitive.Label.displayName;\n\nconst SelectItem = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex w-full cursor-pointer select-none items-center rounded py-1.5 pl-8 pr-2 text-sm text-foreground outline-none focus:bg-primary/15 focus:text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className,\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectPrimitive.ItemIndicator>\n        <svg\n          className=\"h-4 w-4\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        >\n          <path d=\"M20 6 9 17l-5-5\" />\n        </svg>\n      </SelectPrimitive.ItemIndicator>\n    </span>\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n  </SelectPrimitive.Item>\n));\nSelectItem.displayName = SelectPrimitive.Item.displayName;\n\nconst SelectSeparator = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n    {...props}\n  />\n));\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName;\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n};\n"
     },
     {
       "path": "components/base/Select.md",

package/assets/r/separator.json

@@ -13,7 +13,7 @@
       "path": "components/base/Separator.tsx",
       "type": "registry:ui",
       "target": "components/base/Separator.tsx",
-      "content": "import * as React from \"react\";\nimport * as SeparatorPrimitive from \"@radix-ui/react-separator\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\nconst Separator = React.forwardRef<\n  React.ElementRef<typeof SeparatorPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>\n>(\n  (\n    { className, orientation = \"horizontal\", decorative = true, ...props },\n    ref,\n  ) => (\n    <SeparatorPrimitive.Root\n      ref={ref}\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        \"shrink-0 bg-border\",\n        orientation === \"horizontal\" ? \"h-px w-full\" : \"h-full w-px\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nSeparator.displayName = SeparatorPrimitive.Root.displayName;\n\nexport { Separator };\n"
+      "content": "import * as SeparatorPrimitive from \"@radix-ui/react-separator\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\nconst Separator = React.forwardRef<\n  React.ElementRef<typeof SeparatorPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>\n>(({ className, orientation = \"horizontal\", decorative = true, ...props }, ref) => (\n  <SeparatorPrimitive.Root\n    ref={ref}\n    decorative={decorative}\n    orientation={orientation}\n    className={cn(\n      \"shrink-0 bg-border\",\n      orientation === \"horizontal\" ? \"h-px w-full\" : \"h-full w-px\",\n      className,\n    )}\n    {...props}\n  />\n));\nSeparator.displayName = SeparatorPrimitive.Root.displayName;\n\nexport { Separator };\n"
     },
     {
       "path": "components/base/Separator.md",

package/assets/r/sheet.json

@@ -14,7 +14,7 @@
       "path": "components/base/Sheet.tsx",
       "type": "registry:ui",
       "target": "components/base/Sheet.tsx",
-      "content": "import * as React from \"react\";\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\nconst Sheet = SheetPrimitive.Root;\nconst SheetTrigger = SheetPrimitive.Trigger;\nconst SheetClose = SheetPrimitive.Close;\nconst SheetPortal = SheetPrimitive.Portal;\n\nconst SheetOverlay = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      \"fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n      className,\n    )}\n    {...props}\n  />\n));\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName;\n\nconst sheetVariants = cva(\n  \"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500\",\n  {\n    variants: {\n      side: {\n        top: \"inset-x-0 top-0 border-b border-border data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n        bottom:\n          \"inset-x-0 bottom-0 border-t border-border data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n        left: \"inset-y-0 left-0 h-full w-3/4 border-r border-border data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm\",\n        right:\n          \"inset-y-0 right-0 h-full w-3/4 border-l border-border data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm\",\n      },\n    },\n    defaultVariants: { side: \"right\" },\n  },\n);\n\ninterface SheetContentProps\n  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,\n    VariantProps<typeof sheetVariants> {}\n\nconst SheetContent = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Content>,\n  SheetContentProps\n>(({ side = \"right\", className, children, ...props }, ref) => (\n  <SheetPortal>\n    <SheetOverlay />\n    <SheetPrimitive.Content\n      ref={ref}\n      className={cn(sheetVariants({ side }), className)}\n      {...props}>\n      {children}\n      <SheetPrimitive.Close className='absolute right-4 top-4 cursor-pointer rounded opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none'>\n        <svg\n          className='h-4 w-4'\n          viewBox='0 0 24 24'\n          fill='none'\n          stroke='currentColor'\n          strokeWidth='2'\n          strokeLinecap='round'\n          strokeLinejoin='round'>\n          <path d='M18 6 6 18M6 6l12 12' />\n        </svg>\n        <span className='sr-only'>Cerrar</span>\n      </SheetPrimitive.Close>\n    </SheetPrimitive.Content>\n  </SheetPortal>\n));\nSheetContent.displayName = SheetPrimitive.Content.displayName;\n\nconst SheetHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col space-y-2 text-center sm:text-left\",\n      className,\n    )}\n    {...props}\n  />\n);\nSheetHeader.displayName = \"SheetHeader\";\n\nconst SheetFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n      className,\n    )}\n    {...props}\n  />\n);\nSheetFooter.displayName = \"SheetFooter\";\n\nconst SheetTitle = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Title\n    ref={ref}\n    className={cn(\"text-lg font-semibold text-foreground\", className)}\n    {...props}\n  />\n));\nSheetTitle.displayName = SheetPrimitive.Title.displayName;\n\nconst SheetDescription = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Description\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n));\nSheetDescription.displayName = SheetPrimitive.Description.displayName;\n\nexport {\n  Sheet,\n  SheetPortal,\n  SheetOverlay,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n};\n"
+      "content": "import * as SheetPrimitive from \"@radix-ui/react-dialog\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\nconst Sheet = SheetPrimitive.Root;\nconst SheetTrigger = SheetPrimitive.Trigger;\nconst SheetClose = SheetPrimitive.Close;\nconst SheetPortal = SheetPrimitive.Portal;\n\nconst SheetOverlay = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      \"fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n      className,\n    )}\n    {...props}\n  />\n));\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName;\n\nconst sheetVariants = cva(\n  \"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500\",\n  {\n    variants: {\n      side: {\n        top: \"inset-x-0 top-0 border-b border-border data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n        bottom:\n          \"inset-x-0 bottom-0 border-t border-border data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n        left: \"inset-y-0 left-0 h-full w-3/4 border-r border-border data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm\",\n        right:\n          \"inset-y-0 right-0 h-full w-3/4 border-l border-border data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm\",\n      },\n    },\n    defaultVariants: { side: \"right\" },\n  },\n);\n\ninterface SheetContentProps\n  extends\n    React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,\n    VariantProps<typeof sheetVariants> {}\n\nconst SheetContent = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Content>,\n  SheetContentProps\n>(({ side = \"right\", className, children, ...props }, ref) => (\n  <SheetPortal>\n    <SheetOverlay />\n    <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>\n      {children}\n      <SheetPrimitive.Close className=\"absolute right-4 top-4 cursor-pointer rounded opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none\">\n        <svg\n          className=\"h-4 w-4\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        >\n          <path d=\"M18 6 6 18M6 6l12 12\" />\n        </svg>\n        <span className=\"sr-only\">Cerrar</span>\n      </SheetPrimitive.Close>\n    </SheetPrimitive.Content>\n  </SheetPortal>\n));\nSheetContent.displayName = SheetPrimitive.Content.displayName;\n\nconst SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={cn(\"flex flex-col space-y-2 text-center sm:text-left\", className)} {...props} />\n);\nSheetHeader.displayName = \"SheetHeader\";\n\nconst SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\", className)}\n    {...props}\n  />\n);\nSheetFooter.displayName = \"SheetFooter\";\n\nconst SheetTitle = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Title\n    ref={ref}\n    className={cn(\"text-lg font-semibold text-foreground\", className)}\n    {...props}\n  />\n));\nSheetTitle.displayName = SheetPrimitive.Title.displayName;\n\nconst SheetDescription = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Description\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n));\nSheetDescription.displayName = SheetPrimitive.Description.displayName;\n\nexport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetOverlay,\n  SheetPortal,\n  SheetTitle,\n  SheetTrigger,\n};\n"
     },
     {
       "path": "components/base/Sheet.md",

package/assets/r/sidebar.json

@@ -22,7 +22,7 @@
       "path": "components/base/Sidebar.tsx",
       "type": "registry:ui",
       "target": "components/base/Sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { PanelLeft } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils/cn\"\nimport { Button } from \"./Button\"\nimport { Input } from \"./Input\"\nimport { Separator } from \"./Separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"./Sheet\"\nimport { Skeleton } from \"./Skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"./Tooltip\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"20rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"20rem\"\nconst SIDEBAR_WIDTH_ICON = \"4rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\nconst MOBILE_BREAKPOINT = 768\n\nfunction useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n    const onChange = () => setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    mql.addEventListener(\"change\", onChange)\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    return () => mql.removeEventListener(\"change\", onChange)\n  }, [])\n\n  return !!isMobile\n}\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nconst SidebarProvider = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> & {\n    defaultOpen?: boolean\n    open?: boolean\n    onOpenChange?: (open: boolean) => void\n  }\n>(\n  (\n    {\n      defaultOpen = true,\n      open: openProp,\n      onOpenChange: setOpenProp,\n      className,\n      style,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const isMobile = useIsMobile()\n    const [openMobile, setOpenMobile] = React.useState(false)\n\n    // This is the internal state of the sidebar.\n    // We use openProp and setOpenProp for control from outside the component.\n    const [_open, _setOpen] = React.useState(defaultOpen)\n    const open = openProp ?? _open\n    const setOpen = React.useCallback(\n      (value: boolean | ((value: boolean) => boolean)) => {\n        const openState = typeof value === \"function\" ? value(open) : value\n        if (setOpenProp) {\n          setOpenProp(openState)\n        } else {\n          _setOpen(openState)\n        }\n\n        // This sets the cookie to keep the sidebar state.\n        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n      },\n      [setOpenProp, open]\n    )\n\n    // Helper to toggle the sidebar.\n    const toggleSidebar = React.useCallback(() => {\n      return isMobile\n        ? setOpenMobile((open) => !open)\n        : setOpen((open) => !open)\n    }, [isMobile, setOpen, setOpenMobile])\n\n    // Adds a keyboard shortcut to toggle the sidebar.\n    React.useEffect(() => {\n      const handleKeyDown = (event: KeyboardEvent) => {\n        if (\n          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n          (event.metaKey || event.ctrlKey)\n        ) {\n          event.preventDefault()\n          toggleSidebar()\n        }\n      }\n\n      window.addEventListener(\"keydown\", handleKeyDown)\n      return () => window.removeEventListener(\"keydown\", handleKeyDown)\n    }, [toggleSidebar])\n\n    // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n    // This makes it easier to style the sidebar with Tailwind classes.\n    const state = open ? \"expanded\" : \"collapsed\"\n\n    const contextValue = React.useMemo<SidebarContextProps>(\n      () => ({\n        state,\n        open,\n        setOpen,\n        isMobile,\n        openMobile,\n        setOpenMobile,\n        toggleSidebar,\n      }),\n      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n    )\n\n    return (\n      <SidebarContext.Provider value={contextValue}>\n        <TooltipProvider delayDuration={0}>\n          <div\n            style={\n              {\n                \"--sidebar-width\": SIDEBAR_WIDTH,\n                \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n                ...style,\n              } as React.CSSProperties\n            }\n            className={cn(\n              \"group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar\",\n              className\n            )}\n            ref={ref}\n            {...props}\n          >\n            {children}\n          </div>\n        </TooltipProvider>\n      </SidebarContext.Provider>\n    )\n  }\n)\nSidebarProvider.displayName = \"SidebarProvider\"\n\nconst Sidebar = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> & {\n    side?: \"left\" | \"right\"\n    variant?: \"sidebar\" | \"floating\" | \"inset\"\n    collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n  }\n>(\n  (\n    {\n      side = \"left\",\n      variant = \"sidebar\",\n      collapsible = \"offcanvas\",\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n    if (collapsible === \"none\") {\n      return (\n        <div\n          className={cn(\n            \"flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground\",\n            className\n          )}\n          ref={ref}\n          {...props}\n        >\n          {children}\n        </div>\n      )\n    }\n\n    if (isMobile) {\n      return (\n        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n          <SheetContent\n            data-sidebar=\"sidebar\"\n            data-mobile=\"true\"\n            className=\"w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n            style={\n              {\n                \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n              } as React.CSSProperties\n            }\n            side={side}\n          >\n            <SheetHeader className=\"sr-only\">\n              <SheetTitle>Sidebar</SheetTitle>\n              <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n            </SheetHeader>\n            <div className=\"flex h-full w-full flex-col\">{children}</div>\n          </SheetContent>\n        </Sheet>\n      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        className=\"group peer hidden text-sidebar-foreground md:block\"\n        data-state={state}\n        data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n        data-variant={variant}\n        data-side={side}\n      >\n        {/* This is what handles the sidebar gap on desktop */}\n        <div\n          className={cn(\n            \"relative h-svh w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear\",\n            \"group-data-[collapsible=offcanvas]:w-0\",\n            \"group-data-[side=right]:rotate-180\",\n            variant === \"floating\" || variant === \"inset\"\n              ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]\"\n              : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n          )}\n        />\n        <div\n          className={cn(\n            \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\n            side === \"left\"\n              ? \"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]\"\n              : \"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]\",\n            // Adjust the padding for floating and inset variants.\n            variant === \"floating\" || variant === \"inset\"\n              ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]\"\n              : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l border-sidebar-border\",\n            className\n          )}\n          {...props}\n        >\n          <div\n            data-sidebar=\"sidebar\"\n            className=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n          >\n            {children}\n          </div>\n        </div>\n      </div>\n    )\n  }\n)\nSidebar.displayName = \"Sidebar\"\n\nconst SidebarTrigger = React.forwardRef<\n  React.ElementRef<typeof Button>,\n  React.ComponentProps<typeof Button>\n>(({ className, onClick, ...props }, ref) => {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      ref={ref}\n      data-sidebar=\"trigger\"\n      variant=\"ghost\"\n      size=\"icon\"\n      className={cn(\"h-8 w-8 rounded-md hover:bg-secondary\", className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <PanelLeft />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n})\nSidebarTrigger.displayName = \"SidebarTrigger\"\n\nconst SidebarRail = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<\"button\">\n>(({ className, ...props }, ref) => {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      ref={ref}\n      data-sidebar=\"rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-0.5 hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex\",\n        \"[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nSidebarRail.displayName = \"SidebarRail\"\n\nconst SidebarInset = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"main\">\n>(({ className, ...props }, ref) => {\n  return (\n    <main\n      ref={ref}\n      className={cn(\n        \"relative flex w-full flex-1 flex-col bg-background\",\n        \"md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-lg md:peer-data-[variant=inset]:shadow\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nSidebarInset.displayName = \"SidebarInset\"\n\nconst SidebarInput = React.forwardRef<\n  React.ElementRef<typeof Input>,\n  React.ComponentProps<typeof Input>\n>(({ className, ...props }, ref) => {\n  return (\n    <Input\n      ref={ref}\n      data-sidebar=\"input\"\n      className={cn(\n        \"h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nSidebarInput.displayName = \"SidebarInput\"\n\nconst SidebarHeader = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"header\"\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\n      {...props}\n    />\n  )\n})\nSidebarHeader.displayName = \"SidebarHeader\"\n\nconst SidebarFooter = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"footer\"\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\n      {...props}\n    />\n  )\n})\nSidebarFooter.displayName = \"SidebarFooter\"\n\nconst SidebarSeparator = React.forwardRef<\n  React.ElementRef<typeof Separator>,\n  React.ComponentProps<typeof Separator>\n>(({ className, ...props }, ref) => {\n  return (\n    <Separator\n      ref={ref}\n      data-sidebar=\"separator\"\n      className={cn(\"mx-2 w-auto bg-sidebar-border\", className)}\n      {...props}\n    />\n  )\n})\nSidebarSeparator.displayName = \"SidebarSeparator\"\n\nconst SidebarContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"content\"\n      className={cn(\n        \"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border/50\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nSidebarContent.displayName = \"SidebarContent\"\n\nconst SidebarGroup = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"group\"\n      className={cn(\"relative flex w-full min-w-0 flex-col p-2\", className)}\n      {...props}\n    />\n  )\n})\nSidebarGroup.displayName = \"SidebarGroup\"\n\nconst SidebarGroupLabel = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> & { asChild?: boolean }\n>(({ className, asChild = false, ...props }, ref) => {\n  const Comp = asChild ? Slot : \"div\"\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"group-label\"\n      className={cn(\n        \"flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n        \"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nSidebarGroupLabel.displayName = \"SidebarGroupLabel\"\n\nconst SidebarGroupAction = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<\"button\"> & { asChild?: boolean }\n>(({ className, asChild = false, ...props }, ref) => {\n  const Comp = asChild ? Slot : \"button\"\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"group-action\"\n      className={cn(\n        \"absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n        // Increases the hit area of the button on mobile.\n        \"after:absolute after:-inset-2 after:md:hidden\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nSidebarGroupAction.displayName = \"SidebarGroupAction\"\n\nconst SidebarGroupContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-sidebar=\"group-content\"\n    className={cn(\"w-full text-sm\", className)}\n    {...props}\n  />\n))\nSidebarGroupContent.displayName = \"SidebarGroupContent\"\n\nconst SidebarMenu = React.forwardRef<\n  HTMLUListElement,\n  React.ComponentProps<\"ul\">\n>(({ className, ...props }, ref) => (\n  <ul\n    ref={ref}\n    data-sidebar=\"menu\"\n    className={cn(\"flex w-full min-w-0 flex-col gap-1\", className)}\n    {...props}\n  />\n))\nSidebarMenu.displayName = \"SidebarMenu\"\n\nconst SidebarMenuItem = React.forwardRef<\n  HTMLLIElement,\n  React.ComponentProps<\"li\">\n>(({ className, ...props }, ref) => (\n  <li\n    ref={ref}\n    data-sidebar=\"menu-item\"\n    className={cn(\"group/menu-item relative\", className)}\n    {...props}\n  />\n))\nSidebarMenuItem.displayName = \"SidebarMenuItem\"\n\nconst sidebarMenuButtonVariants = cva(\n  \"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[color,background-color,width,height,padding] duration-200 hover:bg-secondary hover:text-sidebar-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-secondary data-[state=open]:hover:text-sidebar-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-secondary hover:text-sidebar-foreground\",\n        outline:\n          \"bg-background shadow-[0_0_0_1px_var(--color-sidebar-border)] hover:bg-secondary hover:text-sidebar-foreground hover:shadow-[0_0_0_1px_var(--color-sidebar-border)]\",\n      },\n      size: {\n        default: \"h-8 text-sm\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:!p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst SidebarMenuButton = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<\"button\"> & {\n    asChild?: boolean\n    isActive?: boolean\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>\n  } & VariantProps<typeof sidebarMenuButtonVariants>\n>(\n  (\n    {\n      asChild = false,\n      isActive = false,\n      variant = \"default\",\n      size = \"default\",\n      tooltip,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const Comp = asChild ? Slot : \"button\"\n    const { isMobile, state } = useSidebar()\n\n    const button = (\n      <Comp\n        ref={ref}\n        data-sidebar=\"menu-button\"\n        data-size={size}\n        data-active={isActive}\n        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n        {...props}\n      />\n    )\n\n    if (!tooltip) {\n      return button\n    }\n\n    if (typeof tooltip === \"string\") {\n      tooltip = {\n        children: tooltip,\n      }\n    }\n\n    return (\n      <Tooltip>\n        <TooltipTrigger asChild>{button}</TooltipTrigger>\n        <TooltipContent\n          side=\"right\"\n          align=\"center\"\n          hidden={state !== \"collapsed\" || isMobile}\n          {...tooltip}\n        />\n      </Tooltip>\n    )\n  }\n)\nSidebarMenuButton.displayName = \"SidebarMenuButton\"\n\nconst SidebarMenuAction = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<\"button\"> & {\n    asChild?: boolean\n    showOnHover?: boolean\n  }\n>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {\n  const Comp = asChild ? Slot : \"button\"\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"menu-action\"\n      className={cn(\n        \"absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-colors hover:bg-secondary hover:text-sidebar-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-foreground [&>svg]:size-4 [&>svg]:shrink-0\",\n        // Increases the hit area of the button on mobile.\n        \"after:absolute after:-inset-2 after:md:hidden\",\n        \"peer-data-[size=sm]/menu-button:top-1\",\n        \"peer-data-[size=default]/menu-button:top-1.5\",\n        \"peer-data-[size=lg]/menu-button:top-2.5\",\n        \"group-data-[collapsible=icon]:hidden\",\n        showOnHover &&\n          \"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nSidebarMenuAction.displayName = \"SidebarMenuAction\"\n\nconst SidebarMenuBadge = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-sidebar=\"menu-badge\"\n    className={cn(\n      \"pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground\",\n      \"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground\",\n      \"peer-data-[size=sm]/menu-button:top-1\",\n      \"peer-data-[size=default]/menu-button:top-1.5\",\n      \"peer-data-[size=lg]/menu-button:top-2.5\",\n      \"group-data-[collapsible=icon]:hidden\",\n      className\n    )}\n    {...props}\n  />\n))\nSidebarMenuBadge.displayName = \"SidebarMenuBadge\"\n\nconst SidebarMenuSkeleton = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> & {\n    showIcon?: boolean\n  }\n>(({ className, showIcon = false, ...props }, ref) => {\n  // Random width between 50 to 90%.\n  const width = React.useMemo(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  }, [])\n\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"flex h-8 items-center gap-2 rounded-md px-2\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n})\nSidebarMenuSkeleton.displayName = \"SidebarMenuSkeleton\"\n\nconst SidebarMenuSub = React.forwardRef<\n  HTMLUListElement,\n  React.ComponentProps<\"ul\">\n>(({ className, ...props }, ref) => (\n  <ul\n    ref={ref}\n    data-sidebar=\"menu-sub\"\n    className={cn(\n      \"mx-0 flex min-w-0 flex-col gap-1 px-0 py-0.5\",\n      \"group-data-[collapsible=icon]:hidden\",\n      className\n    )}\n    {...props}\n  />\n))\nSidebarMenuSub.displayName = \"SidebarMenuSub\"\n\nconst SidebarMenuSubItem = React.forwardRef<\n  HTMLLIElement,\n  React.ComponentProps<\"li\">\n>(({ ...props }, ref) => <li ref={ref} {...props} />)\nSidebarMenuSubItem.displayName = \"SidebarMenuSubItem\"\n\nconst SidebarMenuSubButton = React.forwardRef<\n  HTMLAnchorElement,\n  React.ComponentProps<\"a\"> & {\n    asChild?: boolean\n    size?: \"sm\" | \"md\"\n    isActive?: boolean\n  }\n>(({ asChild = false, size = \"md\", isActive, className, ...props }, ref) => {\n  const Comp = asChild ? Slot : \"a\"\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        \"flex h-8 min-w-0 items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground/80 outline-none ring-sidebar-ring transition-colors duration-200 hover:bg-secondary hover:text-sidebar-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-70 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-muted-foreground\",\n        \"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground\",\n        size === \"sm\" && \"text-xs\",\n        size === \"md\" && \"text-sm\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nSidebarMenuSubButton.displayName = \"SidebarMenuSubButton\"\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n"
+      "content": "\"use client\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { PanelLeft } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\nimport { Button } from \"./Button\";\nimport { Input } from \"./Input\";\nimport { Separator } from \"./Separator\";\nimport { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from \"./Sheet\";\nimport { Skeleton } from \"./Skeleton\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"./Tooltip\";\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\";\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;\nconst SIDEBAR_WIDTH = \"20rem\";\nconst SIDEBAR_WIDTH_MOBILE = \"20rem\";\nconst SIDEBAR_WIDTH_ICON = \"4rem\";\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\";\nconst MOBILE_BREAKPOINT = 768;\n\nfunction useIsMobile() {\n  // Estado inicial calculado de inmediato (SPA: window siempre existe);\n  // el efecto solo suscribe a los cambios.\n  const [isMobile, setIsMobile] = React.useState(() => window.innerWidth < MOBILE_BREAKPOINT);\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n    const onChange = () => setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n    mql.addEventListener(\"change\", onChange);\n    return () => mql.removeEventListener(\"change\", onChange);\n  }, []);\n\n  return isMobile;\n}\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\";\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  openMobile: boolean;\n  setOpenMobile: (open: boolean) => void;\n  isMobile: boolean;\n  toggleSidebar: () => void;\n};\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null);\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext);\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\");\n  }\n\n  return context;\n}\n\nconst SidebarProvider = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> & {\n    defaultOpen?: boolean;\n    open?: boolean;\n    onOpenChange?: (open: boolean) => void;\n  }\n>(\n  (\n    {\n      defaultOpen = true,\n      open: openProp,\n      onOpenChange: setOpenProp,\n      className,\n      style,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const isMobile = useIsMobile();\n    const [openMobile, setOpenMobile] = React.useState(false);\n\n    // This is the internal state of the sidebar.\n    // We use openProp and setOpenProp for control from outside the component.\n    const [_open, _setOpen] = React.useState(defaultOpen);\n    const open = openProp ?? _open;\n    const setOpen = React.useCallback(\n      (value: boolean | ((value: boolean) => boolean)) => {\n        const openState = typeof value === \"function\" ? value(open) : value;\n        if (setOpenProp) {\n          setOpenProp(openState);\n        } else {\n          _setOpen(openState);\n        }\n\n        // This sets the cookie to keep the sidebar state.\n        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;\n      },\n      [setOpenProp, open],\n    );\n\n    // Helper to toggle the sidebar.\n    const toggleSidebar = React.useCallback(() => {\n      return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);\n    }, [isMobile, setOpen, setOpenMobile]);\n\n    // Adds a keyboard shortcut to toggle the sidebar.\n    React.useEffect(() => {\n      const handleKeyDown = (event: KeyboardEvent) => {\n        if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n          event.preventDefault();\n          toggleSidebar();\n        }\n      };\n\n      window.addEventListener(\"keydown\", handleKeyDown);\n      return () => window.removeEventListener(\"keydown\", handleKeyDown);\n    }, [toggleSidebar]);\n\n    // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n    // This makes it easier to style the sidebar with Tailwind classes.\n    const state = open ? \"expanded\" : \"collapsed\";\n\n    const contextValue = React.useMemo<SidebarContextProps>(\n      () => ({\n        state,\n        open,\n        setOpen,\n        isMobile,\n        openMobile,\n        setOpenMobile,\n        toggleSidebar,\n      }),\n      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],\n    );\n\n    return (\n      <SidebarContext.Provider value={contextValue}>\n        <TooltipProvider delayDuration={0}>\n          <div\n            style={\n              {\n                \"--sidebar-width\": SIDEBAR_WIDTH,\n                \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n                ...style,\n              } as React.CSSProperties\n            }\n            className={cn(\n              \"group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar\",\n              className,\n            )}\n            ref={ref}\n            {...props}\n          >\n            {children}\n          </div>\n        </TooltipProvider>\n      </SidebarContext.Provider>\n    );\n  },\n);\nSidebarProvider.displayName = \"SidebarProvider\";\n\nconst Sidebar = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> & {\n    side?: \"left\" | \"right\";\n    variant?: \"sidebar\" | \"floating\" | \"inset\";\n    collapsible?: \"offcanvas\" | \"icon\" | \"none\";\n  }\n>(\n  (\n    {\n      side = \"left\",\n      variant = \"sidebar\",\n      collapsible = \"offcanvas\",\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n\n    if (collapsible === \"none\") {\n      return (\n        <div\n          className={cn(\n            \"flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground\",\n            className,\n          )}\n          ref={ref}\n          {...props}\n        >\n          {children}\n        </div>\n      );\n    }\n\n    if (isMobile) {\n      return (\n        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n          <SheetContent\n            data-sidebar=\"sidebar\"\n            data-mobile=\"true\"\n            className=\"w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n            style={\n              {\n                \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n              } as React.CSSProperties\n            }\n            side={side}\n          >\n            <SheetHeader className=\"sr-only\">\n              <SheetTitle>Sidebar</SheetTitle>\n              <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n            </SheetHeader>\n            <div className=\"flex h-full w-full flex-col\">{children}</div>\n          </SheetContent>\n        </Sheet>\n      );\n    }\n\n    return (\n      <div\n        ref={ref}\n        className=\"group peer hidden text-sidebar-foreground md:block\"\n        data-state={state}\n        data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n        data-variant={variant}\n        data-side={side}\n      >\n        {/* This is what handles the sidebar gap on desktop */}\n        <div\n          className={cn(\n            \"relative h-svh w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear\",\n            \"group-data-[collapsible=offcanvas]:w-0\",\n            \"group-data-[side=right]:rotate-180\",\n            variant === \"floating\" || variant === \"inset\"\n              ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]\"\n              : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\",\n          )}\n        />\n        <div\n          className={cn(\n            \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\n            side === \"left\"\n              ? \"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]\"\n              : \"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]\",\n            // Adjust the padding for floating and inset variants.\n            variant === \"floating\" || variant === \"inset\"\n              ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]\"\n              : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l border-sidebar-border\",\n            className,\n          )}\n          {...props}\n        >\n          <div\n            data-sidebar=\"sidebar\"\n            className=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n          >\n            {children}\n          </div>\n        </div>\n      </div>\n    );\n  },\n);\nSidebar.displayName = \"Sidebar\";\n\nconst SidebarTrigger = React.forwardRef<\n  React.ElementRef<typeof Button>,\n  React.ComponentProps<typeof Button>\n>(({ className, onClick, ...props }, ref) => {\n  const { toggleSidebar } = useSidebar();\n\n  return (\n    <Button\n      ref={ref}\n      data-sidebar=\"trigger\"\n      variant=\"ghost\"\n      size=\"icon\"\n      className={cn(\"h-8 w-8 rounded-md hover:bg-secondary\", className)}\n      onClick={(event) => {\n        onClick?.(event);\n        toggleSidebar();\n      }}\n      {...props}\n    >\n      <PanelLeft />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  );\n});\nSidebarTrigger.displayName = \"SidebarTrigger\";\n\nconst SidebarRail = React.forwardRef<HTMLButtonElement, React.ComponentProps<\"button\">>(\n  ({ className, ...props }, ref) => {\n    const { toggleSidebar } = useSidebar();\n\n    return (\n      <button\n        ref={ref}\n        data-sidebar=\"rail\"\n        aria-label=\"Toggle Sidebar\"\n        tabIndex={-1}\n        onClick={toggleSidebar}\n        title=\"Toggle Sidebar\"\n        className={cn(\n          \"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-0.5 hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex\",\n          \"[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize\",\n          \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n          \"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar\",\n          \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n          \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nSidebarRail.displayName = \"SidebarRail\";\n\nconst SidebarInset = React.forwardRef<HTMLDivElement, React.ComponentProps<\"main\">>(\n  ({ className, ...props }, ref) => {\n    return (\n      <main\n        ref={ref}\n        className={cn(\n          \"relative flex w-full flex-1 flex-col bg-background\",\n          \"md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-lg md:peer-data-[variant=inset]:shadow\",\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nSidebarInset.displayName = \"SidebarInset\";\n\nconst SidebarInput = React.forwardRef<\n  React.ElementRef<typeof Input>,\n  React.ComponentProps<typeof Input>\n>(({ className, ...props }, ref) => {\n  return (\n    <Input\n      ref={ref}\n      data-sidebar=\"input\"\n      className={cn(\n        \"h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring\",\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nSidebarInput.displayName = \"SidebarInput\";\n\nconst SidebarHeader = React.forwardRef<HTMLDivElement, React.ComponentProps<\"div\">>(\n  ({ className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-sidebar=\"header\"\n        className={cn(\"flex flex-col gap-2 p-2\", className)}\n        {...props}\n      />\n    );\n  },\n);\nSidebarHeader.displayName = \"SidebarHeader\";\n\nconst SidebarFooter = React.forwardRef<HTMLDivElement, React.ComponentProps<\"div\">>(\n  ({ className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-sidebar=\"footer\"\n        className={cn(\"flex flex-col gap-2 p-2\", className)}\n        {...props}\n      />\n    );\n  },\n);\nSidebarFooter.displayName = \"SidebarFooter\";\n\nconst SidebarSeparator = React.forwardRef<\n  React.ElementRef<typeof Separator>,\n  React.ComponentProps<typeof Separator>\n>(({ className, ...props }, ref) => {\n  return (\n    <Separator\n      ref={ref}\n      data-sidebar=\"separator\"\n      className={cn(\"mx-2 w-auto bg-sidebar-border\", className)}\n      {...props}\n    />\n  );\n});\nSidebarSeparator.displayName = \"SidebarSeparator\";\n\nconst SidebarContent = React.forwardRef<HTMLDivElement, React.ComponentProps<\"div\">>(\n  ({ className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-sidebar=\"content\"\n        className={cn(\n          \"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border/50\",\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nSidebarContent.displayName = \"SidebarContent\";\n\nconst SidebarGroup = React.forwardRef<HTMLDivElement, React.ComponentProps<\"div\">>(\n  ({ className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-sidebar=\"group\"\n        className={cn(\"relative flex w-full min-w-0 flex-col p-2\", className)}\n        {...props}\n      />\n    );\n  },\n);\nSidebarGroup.displayName = \"SidebarGroup\";\n\nconst SidebarGroupLabel = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> & { asChild?: boolean }\n>(({ className, asChild = false, ...props }, ref) => {\n  const Comp = asChild ? Slot : \"div\";\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"group-label\"\n      className={cn(\n        \"flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n        \"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nSidebarGroupLabel.displayName = \"SidebarGroupLabel\";\n\nconst SidebarGroupAction = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<\"button\"> & { asChild?: boolean }\n>(({ className, asChild = false, ...props }, ref) => {\n  const Comp = asChild ? Slot : \"button\";\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"group-action\"\n      className={cn(\n        \"absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n        // Increases the hit area of the button on mobile.\n        \"after:absolute after:-inset-2 after:md:hidden\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nSidebarGroupAction.displayName = \"SidebarGroupAction\";\n\nconst SidebarGroupContent = React.forwardRef<HTMLDivElement, React.ComponentProps<\"div\">>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-sidebar=\"group-content\"\n      className={cn(\"w-full text-sm\", className)}\n      {...props}\n    />\n  ),\n);\nSidebarGroupContent.displayName = \"SidebarGroupContent\";\n\nconst SidebarMenu = React.forwardRef<HTMLUListElement, React.ComponentProps<\"ul\">>(\n  ({ className, ...props }, ref) => (\n    <ul\n      ref={ref}\n      data-sidebar=\"menu\"\n      className={cn(\"flex w-full min-w-0 flex-col gap-1\", className)}\n      {...props}\n    />\n  ),\n);\nSidebarMenu.displayName = \"SidebarMenu\";\n\nconst SidebarMenuItem = React.forwardRef<HTMLLIElement, React.ComponentProps<\"li\">>(\n  ({ className, ...props }, ref) => (\n    <li\n      ref={ref}\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  ),\n);\nSidebarMenuItem.displayName = \"SidebarMenuItem\";\n\nconst sidebarMenuButtonVariants = cva(\n  \"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[color,background-color,width,height,padding] duration-200 hover:bg-secondary hover:text-sidebar-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-secondary data-[state=open]:hover:text-sidebar-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-secondary hover:text-sidebar-foreground\",\n        outline:\n          \"bg-background shadow-[0_0_0_1px_var(--color-sidebar-border)] hover:bg-secondary hover:text-sidebar-foreground hover:shadow-[0_0_0_1px_var(--color-sidebar-border)]\",\n      },\n      size: {\n        default: \"h-8 text-sm\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:!p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\nconst SidebarMenuButton = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<\"button\"> & {\n    asChild?: boolean;\n    isActive?: boolean;\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>;\n  } & VariantProps<typeof sidebarMenuButtonVariants>\n>(\n  (\n    {\n      asChild = false,\n      isActive = false,\n      variant = \"default\",\n      size = \"default\",\n      tooltip,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : \"button\";\n    const { isMobile, state } = useSidebar();\n\n    const button = (\n      <Comp\n        ref={ref}\n        data-sidebar=\"menu-button\"\n        data-size={size}\n        data-active={isActive}\n        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n        {...props}\n      />\n    );\n\n    if (!tooltip) {\n      return button;\n    }\n\n    if (typeof tooltip === \"string\") {\n      tooltip = {\n        children: tooltip,\n      };\n    }\n\n    return (\n      <Tooltip>\n        <TooltipTrigger asChild>{button}</TooltipTrigger>\n        <TooltipContent\n          side=\"right\"\n          align=\"center\"\n          hidden={state !== \"collapsed\" || isMobile}\n          {...tooltip}\n        />\n      </Tooltip>\n    );\n  },\n);\nSidebarMenuButton.displayName = \"SidebarMenuButton\";\n\nconst SidebarMenuAction = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<\"button\"> & {\n    asChild?: boolean;\n    showOnHover?: boolean;\n  }\n>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {\n  const Comp = asChild ? Slot : \"button\";\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"menu-action\"\n      className={cn(\n        \"absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-colors hover:bg-secondary hover:text-sidebar-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-foreground [&>svg]:size-4 [&>svg]:shrink-0\",\n        // Increases the hit area of the button on mobile.\n        \"after:absolute after:-inset-2 after:md:hidden\",\n        \"peer-data-[size=sm]/menu-button:top-1\",\n        \"peer-data-[size=default]/menu-button:top-1.5\",\n        \"peer-data-[size=lg]/menu-button:top-2.5\",\n        \"group-data-[collapsible=icon]:hidden\",\n        showOnHover &&\n          \"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nSidebarMenuAction.displayName = \"SidebarMenuAction\";\n\nconst SidebarMenuBadge = React.forwardRef<HTMLDivElement, React.ComponentProps<\"div\">>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground\",\n        \"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground\",\n        \"peer-data-[size=sm]/menu-button:top-1\",\n        \"peer-data-[size=default]/menu-button:top-1.5\",\n        \"peer-data-[size=lg]/menu-button:top-2.5\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nSidebarMenuBadge.displayName = \"SidebarMenuBadge\";\n\nconst SidebarMenuSkeleton = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> & {\n    showIcon?: boolean;\n  }\n>(({ className, showIcon = false, ...props }, ref) => {\n  // Ancho aleatorio (50–90%) deliberado para variar el skeleton; estable\n  // entre renders gracias al useMemo.\n  const width = React.useMemo(() => {\n    // eslint-disable-next-line react-hooks/purity -- aleatoriedad intencional, memoizada\n    return `${Math.floor(Math.random() * 40) + 50}%`;\n  }, []);\n\n  return (\n    <div\n      ref={ref}\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"flex h-8 items-center gap-2 rounded-md px-2\", className)}\n      {...props}\n    >\n      {showIcon && <Skeleton className=\"size-4 rounded-md\" data-sidebar=\"menu-skeleton-icon\" />}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  );\n});\nSidebarMenuSkeleton.displayName = \"SidebarMenuSkeleton\";\n\nconst SidebarMenuSub = React.forwardRef<HTMLUListElement, React.ComponentProps<\"ul\">>(\n  ({ className, ...props }, ref) => (\n    <ul\n      ref={ref}\n      data-sidebar=\"menu-sub\"\n      className={cn(\n        \"mx-0 flex min-w-0 flex-col gap-1 px-0 py-0.5\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nSidebarMenuSub.displayName = \"SidebarMenuSub\";\n\nconst SidebarMenuSubItem = React.forwardRef<HTMLLIElement, React.ComponentProps<\"li\">>(\n  ({ ...props }, ref) => <li ref={ref} {...props} />,\n);\nSidebarMenuSubItem.displayName = \"SidebarMenuSubItem\";\n\nconst SidebarMenuSubButton = React.forwardRef<\n  HTMLAnchorElement,\n  React.ComponentProps<\"a\"> & {\n    asChild?: boolean;\n    size?: \"sm\" | \"md\";\n    isActive?: boolean;\n  }\n>(({ asChild = false, size = \"md\", isActive, className, ...props }, ref) => {\n  const Comp = asChild ? Slot : \"a\";\n\n  return (\n    <Comp\n      ref={ref}\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        \"flex h-8 min-w-0 items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground/80 outline-none ring-sidebar-ring transition-colors duration-200 hover:bg-secondary hover:text-sidebar-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-70 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-muted-foreground\",\n        \"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground\",\n        size === \"sm\" && \"text-xs\",\n        size === \"md\" && \"text-sm\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nSidebarMenuSubButton.displayName = \"SidebarMenuSubButton\";\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n};\n"
     },
     {
       "path": "components/base/Sidebar.md",

package/assets/r/skeleton.json

@@ -13,7 +13,7 @@
       "path": "components/base/Skeleton.tsx",
       "type": "registry:ui",
       "target": "components/base/Skeleton.tsx",
-      "content": "import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\nconst skeletonVariants = cva(\"animate-pulse bg-muted motion-reduce:animate-none\", {\n  variants: {\n    shape: {\n      line: \"h-4 w-full rounded\",\n      avatar: \"h-10 w-10 rounded-full\",\n      block: \"h-24 w-full rounded-md\",\n    },\n  },\n  defaultVariants: { shape: \"line\" },\n});\n\nexport interface SkeletonProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof skeletonVariants> {}\n\nconst Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(\n  ({ shape, className, ...props }, ref) => (\n    <div\n      ref={ref}\n      aria-hidden=\"true\"\n      className={cn(skeletonVariants({ shape }), className)}\n      {...props}\n    />\n  ),\n);\nSkeleton.displayName = \"Skeleton\";\n\nexport { Skeleton, skeletonVariants };\n"
+      "content": "import { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\nconst skeletonVariants = cva(\"animate-pulse bg-muted motion-reduce:animate-none\", {\n  variants: {\n    shape: {\n      line: \"h-4 w-full rounded\",\n      avatar: \"h-10 w-10 rounded-full\",\n      block: \"h-24 w-full rounded-md\",\n    },\n  },\n  defaultVariants: { shape: \"line\" },\n});\n\nexport interface SkeletonProps\n  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonVariants> {}\n\nconst Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(\n  ({ shape, className, ...props }, ref) => (\n    <div\n      ref={ref}\n      aria-hidden=\"true\"\n      className={cn(skeletonVariants({ shape }), className)}\n      {...props}\n    />\n  ),\n);\nSkeleton.displayName = \"Skeleton\";\n\nexport { Skeleton, skeletonVariants };\n"
     },
     {
       "path": "components/base/Skeleton.md",

package/assets/r/slider.json

@@ -13,7 +13,7 @@
       "path": "components/base/Slider.tsx",
       "type": "registry:ui",
       "target": "components/base/Slider.tsx",
-      "content": "import * as React from \"react\";\nimport * as SliderPrimitive from \"@radix-ui/react-slider\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\nconst Slider = React.forwardRef<\n  React.ElementRef<typeof SliderPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <SliderPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"relative flex w-full touch-none select-none items-center\",\n      className,\n    )}\n    {...props}>\n    <SliderPrimitive.Track className='relative h-1.5 w-full grow overflow-hidden rounded-full bg-secondary'>\n      <SliderPrimitive.Range className='absolute h-full bg-primary' />\n    </SliderPrimitive.Track>\n    <SliderPrimitive.Thumb className='block h-4 w-4 cursor-pointer rounded-full border border-primary/50 bg-card shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50' />\n  </SliderPrimitive.Root>\n));\nSlider.displayName = SliderPrimitive.Root.displayName;\n\nexport { Slider };\n"
+      "content": "import * as SliderPrimitive from \"@radix-ui/react-slider\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\nconst Slider = React.forwardRef<\n  React.ElementRef<typeof SliderPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <SliderPrimitive.Root\n    ref={ref}\n    className={cn(\"relative flex w-full touch-none select-none items-center\", className)}\n    {...props}\n  >\n    <SliderPrimitive.Track className=\"relative h-1.5 w-full grow overflow-hidden rounded-full bg-secondary\">\n      <SliderPrimitive.Range className=\"absolute h-full bg-primary\" />\n    </SliderPrimitive.Track>\n    <SliderPrimitive.Thumb className=\"block h-4 w-4 cursor-pointer rounded-full border border-primary/50 bg-card shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\" />\n  </SliderPrimitive.Root>\n));\nSlider.displayName = SliderPrimitive.Root.displayName;\n\nexport { Slider };\n"
     },
     {
       "path": "components/base/Slider.md",

package/assets/r/snippet.json

@@ -13,7 +13,7 @@
       "path": "components/base/Snippet.tsx",
       "type": "registry:ui",
       "target": "components/base/Snippet.tsx",
-      "content": "import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\nconst snippetVariants = cva(\n  // py-2 + py-0.5 del pre: el texto queda a la misma distancia del borde\n  // superior e inferior que el botón de copiar (caja simétrica, 40px de alto).\n  \"relative flex w-full min-w-0 items-start gap-3 rounded-md border bg-background px-3 py-2 text-sm text-foreground\",\n  {\n    variants: {\n      variant: {\n        default: \"border-border\",\n        success: \"border-success/30\",\n        warning: \"border-warning/30\",\n        error: \"border-destructive/30\",\n      },\n      font: {\n        mono: \"font-mono\",\n        sans: \"\",\n      },\n    },\n    defaultVariants: { variant: \"default\", font: \"mono\" },\n  },\n);\n\nexport interface SnippetProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\">,\n    VariantProps<typeof snippetVariants> {\n  /** Texto exacto que se copia al portapapeles. */\n  children: string;\n  lines?: \"single\" | \"multi\";\n  onCopy?: () => void;\n  copiedDuration?: number;\n}\n\nexport function Snippet({\n  variant,\n  font,\n  lines = \"single\",\n  children,\n  onCopy,\n  copiedDuration = 1500,\n  className,\n  ...props\n}: SnippetProps) {\n  const [copied, setCopied] = React.useState(false);\n\n  const copy = async () => {\n    try {\n      await navigator.clipboard.writeText(children);\n      setCopied(true);\n      onCopy?.();\n      window.setTimeout(() => setCopied(false), copiedDuration);\n    } catch {\n      /* portapapeles no disponible */\n    }\n  };\n\n  return (\n    <div className={cn(snippetVariants({ variant, font }), className)} {...props}>\n      <pre\n        className={cn(\n          \"min-w-0 flex-1 overflow-x-auto py-0.5\",\n          lines === \"single\"\n            ? \"whitespace-nowrap\"\n            : \"max-h-48 whitespace-pre-wrap\",\n        )}>\n        <code>{children}</code>\n      </pre>\n      <button\n        type='button'\n        onClick={copy}\n        aria-label={copied ? \"Copiado\" : \"Copiar al portapapeles\"}\n        className='m-0 flex shrink-0 cursor-pointer rounded-md p-1 text-muted-foreground transition-colors duration-150 hover:bg-secondary hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'>\n        {copied ? (\n          <svg\n            className='h-4 w-4 text-success'\n            viewBox='0 0 24 24'\n            fill='none'\n            stroke='currentColor'\n            strokeWidth='2'\n            strokeLinecap='round'\n            strokeLinejoin='round'>\n            <path d='M20 6 9 17l-5-5' />\n          </svg>\n        ) : (\n          <svg\n            className='h-4 w-4'\n            viewBox='0 0 24 24'\n            fill='none'\n            stroke='currentColor'\n            strokeWidth='2'\n            strokeLinecap='round'\n            strokeLinejoin='round'>\n            <rect width='14' height='14' x='8' y='8' rx='2' ry='2' />\n            <path d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2' />\n          </svg>\n        )}\n      </button>\n    </div>\n  );\n}\n\nexport { snippetVariants };\n"
+      "content": "import { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\nconst snippetVariants = cva(\n  // py-2 + py-0.5 del pre: el texto queda a la misma distancia del borde\n  // superior e inferior que el botón de copiar (caja simétrica, 40px de alto).\n  \"relative flex w-full min-w-0 items-start gap-3 rounded-md border bg-background px-3 py-2 text-sm text-foreground\",\n  {\n    variants: {\n      variant: {\n        default: \"border-border\",\n        success: \"border-success/30\",\n        warning: \"border-warning/30\",\n        error: \"border-destructive/30\",\n      },\n      font: {\n        mono: \"font-mono\",\n        sans: \"\",\n      },\n    },\n    defaultVariants: { variant: \"default\", font: \"mono\" },\n  },\n);\n\nexport interface SnippetProps\n  extends\n    Omit<React.HTMLAttributes<HTMLDivElement>, \"children\">,\n    VariantProps<typeof snippetVariants> {\n  /** Texto exacto que se copia al portapapeles. */\n  children: string;\n  lines?: \"single\" | \"multi\";\n  onCopy?: () => void;\n  copiedDuration?: number;\n}\n\nexport function Snippet({\n  variant,\n  font,\n  lines = \"single\",\n  children,\n  onCopy,\n  copiedDuration = 1500,\n  className,\n  ...props\n}: SnippetProps) {\n  const [copied, setCopied] = React.useState(false);\n\n  const copy = async () => {\n    try {\n      await navigator.clipboard.writeText(children);\n      setCopied(true);\n      onCopy?.();\n      window.setTimeout(() => setCopied(false), copiedDuration);\n    } catch {\n      /* portapapeles no disponible */\n    }\n  };\n\n  return (\n    <div className={cn(snippetVariants({ variant, font }), className)} {...props}>\n      <pre\n        className={cn(\n          \"min-w-0 flex-1 overflow-x-auto py-0.5\",\n          lines === \"single\" ? \"whitespace-nowrap\" : \"max-h-48 whitespace-pre-wrap\",\n        )}\n      >\n        <code>{children}</code>\n      </pre>\n      <button\n        type=\"button\"\n        onClick={copy}\n        aria-label={copied ? \"Copiado\" : \"Copiar al portapapeles\"}\n        className=\"m-0 flex shrink-0 cursor-pointer rounded-md p-1 text-muted-foreground transition-colors duration-150 hover:bg-secondary hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n      >\n        {copied ? (\n          <svg\n            className=\"h-4 w-4 text-success\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          >\n            <path d=\"M20 6 9 17l-5-5\" />\n          </svg>\n        ) : (\n          <svg\n            className=\"h-4 w-4\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          >\n            <rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\" />\n            <path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\" />\n          </svg>\n        )}\n      </button>\n    </div>\n  );\n}\n\nexport { snippetVariants };\n"
     },
     {
       "path": "components/base/Snippet.md",

package/assets/r/spinner.json

@@ -14,7 +14,7 @@
       "path": "components/base/Spinner.tsx",
       "type": "registry:ui",
       "target": "components/base/Spinner.tsx",
-      "content": "import * as React from \"react\";\nimport { Loader2Icon } from \"lucide-react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\nconst spinnerVariants = cva(\"animate-spin text-primary\", {\n  variants: {\n    size: {\n      sm: \"size-4\",\n      md: \"size-6\",\n      lg: \"size-8\",\n      xl: \"size-12\",\n    },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport interface SpinnerProps\n  extends React.ComponentPropsWithoutRef<\"svg\">,\n    VariantProps<typeof spinnerVariants> {}\n\nconst Spinner = React.forwardRef<SVGSVGElement, SpinnerProps>(\n  ({ className, size, ...props }, ref) => (\n    <Loader2Icon\n      ref={ref}\n      role=\"status\"\n      aria-label=\"Cargando\"\n      className={cn(spinnerVariants({ size }), className)}\n      {...props}\n    />\n  ),\n);\nSpinner.displayName = \"Spinner\";\n\nexport { Spinner, spinnerVariants };\n"
+      "content": "import { cva, type VariantProps } from \"class-variance-authority\";\nimport { Loader2Icon } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\nconst spinnerVariants = cva(\"animate-spin text-primary\", {\n  variants: {\n    size: {\n      sm: \"size-4\",\n      md: \"size-6\",\n      lg: \"size-8\",\n      xl: \"size-12\",\n    },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport interface SpinnerProps\n  extends React.ComponentPropsWithoutRef<\"svg\">, VariantProps<typeof spinnerVariants> {}\n\nconst Spinner = React.forwardRef<SVGSVGElement, SpinnerProps>(\n  ({ className, size, ...props }, ref) => (\n    <Loader2Icon\n      ref={ref}\n      role=\"status\"\n      aria-label=\"Cargando\"\n      className={cn(spinnerVariants({ size }), className)}\n      {...props}\n    />\n  ),\n);\nSpinner.displayName = \"Spinner\";\n\nexport { Spinner, spinnerVariants };\n"
     },
     {
       "path": "components/base/Spinner.md",

package/assets/r/status-dot.json

@@ -13,7 +13,7 @@
       "path": "components/base/StatusDot.tsx",
       "type": "registry:ui",
       "target": "components/base/StatusDot.tsx",
-      "content": "import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\nconst statusDotVariants = cva(\"inline-block shrink-0 rounded-full\", {\n  variants: {\n    tone: {\n      gray: \"bg-muted-foreground\",\n      brand: \"bg-primary\",\n      success: \"bg-success\",\n      warning: \"bg-warning\",\n      danger: \"bg-destructive\",\n      info: \"bg-info\",\n    },\n    size: {\n      sm: \"h-1.5 w-1.5\",\n      md: \"h-2 w-2\",\n      lg: \"h-2.5 w-2.5\",\n    },\n  },\n  defaultVariants: { tone: \"gray\", size: \"md\" },\n});\n\nexport interface StatusDotProps\n  extends React.HTMLAttributes<HTMLSpanElement>,\n    VariantProps<typeof statusDotVariants> {\n  /** Requerido cuando no hay texto (punto solo). */\n  \"aria-label\"?: string;\n}\n\nconst StatusDot = React.forwardRef<HTMLSpanElement, StatusDotProps>(\n  function StatusDot(\n    { tone, size, children, \"aria-label\": ariaLabel, className, ...props },\n    ref,\n  ) {\n    return (\n      <span\n        ref={ref}\n        className={cn(\"inline-flex min-w-0 items-center gap-2\", className)}\n        {...props}>\n        <span className={statusDotVariants({ tone, size })} aria-hidden />\n        {children ? (\n          <span className='text-sm text-foreground'>{children}</span>\n        ) : (\n          <span className='sr-only'>{ariaLabel ?? \"Estado\"}</span>\n        )}\n      </span>\n    );\n  },\n);\nStatusDot.displayName = \"StatusDot\";\n\nexport { StatusDot, statusDotVariants };\n"
+      "content": "import { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\nconst statusDotVariants = cva(\"inline-block shrink-0 rounded-full\", {\n  variants: {\n    tone: {\n      gray: \"bg-muted-foreground\",\n      brand: \"bg-primary\",\n      success: \"bg-success\",\n      warning: \"bg-warning\",\n      danger: \"bg-destructive\",\n      info: \"bg-info\",\n    },\n    size: {\n      sm: \"h-1.5 w-1.5\",\n      md: \"h-2 w-2\",\n      lg: \"h-2.5 w-2.5\",\n    },\n  },\n  defaultVariants: { tone: \"gray\", size: \"md\" },\n});\n\nexport interface StatusDotProps\n  extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof statusDotVariants> {\n  /** Requerido cuando no hay texto (punto solo). */\n  \"aria-label\"?: string;\n}\n\nconst StatusDot = React.forwardRef<HTMLSpanElement, StatusDotProps>(function StatusDot(\n  { tone, size, children, \"aria-label\": ariaLabel, className, ...props },\n  ref,\n) {\n  return (\n    <span ref={ref} className={cn(\"inline-flex min-w-0 items-center gap-2\", className)} {...props}>\n      <span className={statusDotVariants({ tone, size })} aria-hidden />\n      {children ? (\n        <span className=\"text-sm text-foreground\">{children}</span>\n      ) : (\n        <span className=\"sr-only\">{ariaLabel ?? \"Estado\"}</span>\n      )}\n    </span>\n  );\n});\nStatusDot.displayName = \"StatusDot\";\n\nexport { StatusDot, statusDotVariants };\n"
     },
     {
       "path": "components/base/StatusDot.md",

package/assets/r/switch.json

@@ -13,7 +13,7 @@
       "path": "components/base/Switch.tsx",
       "type": "registry:ui",
       "target": "components/base/Switch.tsx",
-      "content": "import * as React from \"react\";\nimport * as SwitchPrimitives from \"@radix-ui/react-switch\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\nconst Switch = React.forwardRef<\n  React.ElementRef<typeof SwitchPrimitives.Root>,\n  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>\n>(({ className, ...props }, ref) => (\n  <SwitchPrimitives.Root\n    className={cn(\n      \"peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input\",\n      className,\n    )}\n    {...props}\n    ref={ref}>\n    <SwitchPrimitives.Thumb\n      className={cn(\n        \"pointer-events-none block h-5 w-5 rounded-full bg-card shadow-sm ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0\",\n      )}\n    />\n  </SwitchPrimitives.Root>\n));\nSwitch.displayName = SwitchPrimitives.Root.displayName;\n\nexport { Switch };\n"
+      "content": "import * as SwitchPrimitives from \"@radix-ui/react-switch\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\nconst Switch = React.forwardRef<\n  React.ElementRef<typeof SwitchPrimitives.Root>,\n  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>\n>(({ className, ...props }, ref) => (\n  <SwitchPrimitives.Root\n    className={cn(\n      \"peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input\",\n      className,\n    )}\n    {...props}\n    ref={ref}\n  >\n    <SwitchPrimitives.Thumb\n      className={cn(\n        \"pointer-events-none block h-5 w-5 rounded-full bg-card shadow-sm ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0\",\n      )}\n    />\n  </SwitchPrimitives.Root>\n));\nSwitch.displayName = SwitchPrimitives.Root.displayName;\n\nexport { Switch };\n"
     },
     {
       "path": "components/base/Switch.md",

package/assets/r/table.json

@@ -13,7 +13,7 @@
       "path": "components/base/Table.tsx",
       "type": "registry:ui",
       "target": "components/base/Table.tsx",
-      "content": "import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\n// Tabla en grid de divs (no <table>): el ancho de columnas se controla con\n// `columns` (grid-template-columns), lo que permite truncado y alineación\n// fiables. Compound: Table + TableHeader/TableContent/TableRow/TableCell;\n// los alias estáticos (Table.Header, …) se conservan por compatibilidad.\n\ntype TableVariant = \"normal\" | \"basic\" | \"striped\";\n\ninterface TableContextProps {\n  columns?: string;\n  variant: TableVariant;\n  stickyHeader?: boolean;\n}\n\nconst TableContext = React.createContext<TableContextProps>({\n  variant: \"normal\",\n  stickyHeader: false,\n});\n\nconst tableVariants = cva(\n  \"flex w-full flex-col overflow-hidden rounded-md border border-border bg-card text-sm text-foreground shadow-sm\",\n  {\n    variants: {\n      variant: {\n        normal: \"\",\n        basic: \"border-none shadow-none\",\n        striped: \"\",\n      },\n    },\n    defaultVariants: { variant: \"normal\" },\n  },\n);\n\nexport interface TableProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof tableVariants> {\n  /** grid-template-columns (p. ej. \"2fr 1fr 1fr\"). Sin definir: columnas iguales. */\n  columns?: string;\n  /** Mantiene el header visible al hacer scroll vertical. */\n  stickyHeader?: boolean;\n}\n\nconst TableRoot = React.forwardRef<HTMLDivElement, TableProps>(\n  function Table(\n    { children, className, columns, variant, stickyHeader = false, ...props },\n    ref,\n  ) {\n    const resolvedVariant = variant ?? \"normal\";\n    return (\n      <TableContext.Provider\n        value={{ columns, variant: resolvedVariant, stickyHeader }}\n      >\n        <div\n          ref={ref}\n          role='table'\n          className={cn(tableVariants({ variant }), className)}\n          {...props}\n        >\n          <div\n            className={cn(\"w-full overflow-x-auto\", {\n              \"max-h-125 overflow-y-auto\": stickyHeader,\n            })}>\n            {children}\n          </div>\n        </div>\n      </TableContext.Provider>\n    );\n  },\n);\n\nconst getGridStyles = (columns?: string) => {\n  if (columns) return { gridTemplateColumns: columns };\n  return { gridAutoFlow: \"column\" as const, gridAutoColumns: \"1fr\" };\n};\n\nconst TableHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(function TableHeader({ children, className, style, ...props }, ref) {\n  const { columns, variant, stickyHeader } = React.useContext(TableContext);\n\n  return (\n    <div\n      ref={ref}\n      role='rowgroup'\n      style={{ ...getGridStyles(columns), ...style }}\n      className={cn(\n        \"grid items-center px-4 py-3 font-semibold text-foreground\",\n        {\n          \"border-b border-border bg-background\":\n            variant === \"basic\" || variant === \"normal\",\n          \"bg-muted\": variant === \"striped\",\n          \"sticky top-0 z-10 shadow-sm\": stickyHeader,\n        },\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n\nconst TableContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(function TableContent({ className, ...props }, ref) {\n  return (\n    <div ref={ref} className={cn(\"flex flex-col\", className)} {...props} />\n  );\n});\n\nconst TableRow = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(function TableRow({ children, className, style, onClick, ...props }, ref) {\n  const { columns, variant } = React.useContext(TableContext);\n\n  return (\n    <div\n      ref={ref}\n      role='row'\n      onClick={onClick}\n      style={{ ...getGridStyles(columns), ...style }}\n      className={cn(\n        \"grid items-center px-4 py-3 transition-colors hover:bg-muted/60\",\n        {\n          \"border-b border-border last:border-0\": variant === \"normal\",\n          \"border-none\": variant === \"basic\",\n          \"border-none odd:bg-muted/40 even:bg-card\": variant === \"striped\",\n          \"cursor-pointer\": onClick,\n        },\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n\nconst TableCell = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(function TableCell({ className, ...props }, ref) {\n  return (\n    <div\n      ref={ref}\n      role='cell'\n      className={cn(\n        \"truncate px-1 leading-relaxed text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\n// Alias estáticos por compatibilidad con el uso Table.Header / Table.Row / …\nconst Table = Object.assign(TableRoot, {\n  Header: TableHeader,\n  Content: TableContent,\n  Row: TableRow,\n  Cell: TableCell,\n});\n\nexport { Table, TableHeader, TableContent, TableRow, TableCell, tableVariants };\n"
+      "content": "import { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\n// Tabla en grid de divs (no <table>): el ancho de columnas se controla con\n// `columns` (grid-template-columns), lo que permite truncado y alineación\n// fiables. Compound: Table + TableHeader/TableContent/TableRow/TableCell;\n// los alias estáticos (Table.Header, …) se conservan por compatibilidad.\n\ntype TableVariant = \"normal\" | \"basic\" | \"striped\";\n\ninterface TableContextProps {\n  columns?: string;\n  variant: TableVariant;\n  stickyHeader?: boolean;\n}\n\nconst TableContext = React.createContext<TableContextProps>({\n  variant: \"normal\",\n  stickyHeader: false,\n});\n\nconst tableVariants = cva(\n  \"flex w-full flex-col overflow-hidden rounded-md border border-border bg-card text-sm text-foreground shadow-sm\",\n  {\n    variants: {\n      variant: {\n        normal: \"\",\n        basic: \"border-none shadow-none\",\n        striped: \"\",\n      },\n    },\n    defaultVariants: { variant: \"normal\" },\n  },\n);\n\nexport interface TableProps\n  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof tableVariants> {\n  /** grid-template-columns (p. ej. \"2fr 1fr 1fr\"). Sin definir: columnas iguales. */\n  columns?: string;\n  /** Mantiene el header visible al hacer scroll vertical. */\n  stickyHeader?: boolean;\n}\n\nconst TableRoot = React.forwardRef<HTMLDivElement, TableProps>(function Table(\n  { children, className, columns, variant, stickyHeader = false, ...props },\n  ref,\n) {\n  const resolvedVariant = variant ?? \"normal\";\n  return (\n    <TableContext.Provider value={{ columns, variant: resolvedVariant, stickyHeader }}>\n      <div ref={ref} role=\"table\" className={cn(tableVariants({ variant }), className)} {...props}>\n        <div\n          className={cn(\"w-full overflow-x-auto\", {\n            \"max-h-125 overflow-y-auto\": stickyHeader,\n          })}\n        >\n          {children}\n        </div>\n      </div>\n    </TableContext.Provider>\n  );\n});\n\nconst getGridStyles = (columns?: string) => {\n  if (columns) return { gridTemplateColumns: columns };\n  return { gridAutoFlow: \"column\" as const, gridAutoColumns: \"1fr\" };\n};\n\nconst TableHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  function TableHeader({ children, className, style, ...props }, ref) {\n    const { columns, variant, stickyHeader } = React.useContext(TableContext);\n\n    return (\n      <div\n        ref={ref}\n        role=\"rowgroup\"\n        style={{ ...getGridStyles(columns), ...style }}\n        className={cn(\n          \"grid items-center px-4 py-3 font-semibold text-foreground\",\n          {\n            \"border-b border-border bg-background\": variant === \"basic\" || variant === \"normal\",\n            \"bg-muted\": variant === \"striped\",\n            \"sticky top-0 z-10 shadow-sm\": stickyHeader,\n          },\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nconst TableContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  function TableContent({ className, ...props }, ref) {\n    return <div ref={ref} className={cn(\"flex flex-col\", className)} {...props} />;\n  },\n);\n\nconst TableRow = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  function TableRow({ children, className, style, onClick, onKeyDown, tabIndex, ...props }, ref) {\n    const { columns, variant } = React.useContext(TableContext);\n    const isInteractive = onClick != null;\n\n    // Fila clickable: también operable por teclado (Enter/Espacio) y focusable.\n    const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (event) => {\n      onKeyDown?.(event);\n      if (!isInteractive || event.defaultPrevented) return;\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault();\n        event.currentTarget.click();\n      }\n    };\n\n    return (\n      <div\n        ref={ref}\n        role=\"row\"\n        onClick={onClick}\n        onKeyDown={handleKeyDown}\n        tabIndex={tabIndex ?? (isInteractive ? 0 : undefined)}\n        style={{ ...getGridStyles(columns), ...style }}\n        className={cn(\n          \"grid items-center px-4 py-3 transition-colors hover:bg-muted/60\",\n          {\n            \"border-b border-border last:border-0\": variant === \"normal\",\n            \"border-none\": variant === \"basic\",\n            \"border-none odd:bg-muted/40 even:bg-card\": variant === \"striped\",\n            \"cursor-pointer\": onClick,\n          },\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nconst TableCell = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  function TableCell({ className, ...props }, ref) {\n    return (\n      <div\n        ref={ref}\n        role=\"cell\"\n        className={cn(\"truncate px-1 leading-relaxed text-muted-foreground\", className)}\n        {...props}\n      />\n    );\n  },\n);\n\n// Alias estáticos por compatibilidad con el uso Table.Header / Table.Row / …\nconst Table = Object.assign(TableRoot, {\n  Header: TableHeader,\n  Content: TableContent,\n  Row: TableRow,\n  Cell: TableCell,\n});\n\nexport { Table, TableCell, TableContent, TableHeader, TableRow, tableVariants };\n"
     },
     {
       "path": "components/base/Table.md",

package/assets/r/tabs.json

@@ -13,7 +13,7 @@
       "path": "components/base/Tabs.tsx",
       "type": "registry:ui",
       "target": "components/base/Tabs.tsx",
-      "content": "import * as React from \"react\";\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\nconst Tabs = TabsPrimitive.Root;\n\nconst TabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.List\n    ref={ref}\n    className={cn(\n      \"inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground\",\n      className,\n    )}\n    {...props}\n  />\n));\nTabsList.displayName = TabsPrimitive.List.displayName;\n\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"inline-flex cursor-pointer items-center justify-center whitespace-nowrap rounded px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm\",\n      className,\n    )}\n    {...props}\n  />\n));\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName;\n\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Content\n    ref={ref}\n    className={cn(\n      \"mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n      className,\n    )}\n    {...props}\n  />\n));\nTabsContent.displayName = TabsPrimitive.Content.displayName;\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent };\n"
+      "content": "import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\nconst Tabs = TabsPrimitive.Root;\n\nconst TabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.List\n    ref={ref}\n    className={cn(\n      \"inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground\",\n      className,\n    )}\n    {...props}\n  />\n));\nTabsList.displayName = TabsPrimitive.List.displayName;\n\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"inline-flex cursor-pointer items-center justify-center whitespace-nowrap rounded px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm\",\n      className,\n    )}\n    {...props}\n  />\n));\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName;\n\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Content\n    ref={ref}\n    className={cn(\n      \"mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n      className,\n    )}\n    {...props}\n  />\n));\nTabsContent.displayName = TabsPrimitive.Content.displayName;\n\nexport { Tabs, TabsContent, TabsList, TabsTrigger };\n"
     },
     {
       "path": "components/base/Tabs.md",

package/assets/r/tag.json

@@ -13,7 +13,7 @@
       "path": "components/base/Tag.tsx",
       "type": "registry:ui",
       "target": "components/base/Tag.tsx",
-      "content": "import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\nconst tagVariants = cva(\n  \"inline-flex select-none items-center gap-1 border text-xs font-medium leading-none\",\n  {\n    variants: {\n      tone: {\n        gray: \"border-border bg-secondary text-secondary-foreground\",\n        brand: \"border-primary/20 bg-primary/10 text-primary\",\n        success: \"border-success/20 bg-success/10 text-success\",\n        warning: \"border-warning/20 bg-warning/10 text-warning\",\n        danger: \"border-destructive/20 bg-destructive/10 text-destructive\",\n      },\n      shape: {\n        square: \"rounded\",\n        rounded: \"rounded-full\",\n      },\n      size: {\n        sm: \"h-6 px-2 py-0.5\",\n        md: \"h-7 px-2.5 py-1\",\n        lg: \"h-8 px-3 py-1\",\n      },\n    },\n    defaultVariants: { tone: \"gray\", shape: \"square\", size: \"sm\" },\n  },\n);\n\nexport interface TagProps\n  extends Omit<React.HTMLAttributes<HTMLSpanElement>, \"color\">,\n    VariantProps<typeof tagVariants> {\n  removable?: boolean;\n  onRemove?: () => void;\n}\n\nconst Tag = React.forwardRef<HTMLSpanElement, TagProps>(function Tag(\n  { tone, shape, size, removable, onRemove, children, className, ...props },\n  ref,\n) {\n  return (\n    <span\n      ref={ref}\n      className={cn(tagVariants({ tone, shape, size }), className)}\n      {...props}>\n      {children}\n      {removable && (\n        <button\n          type='button'\n          onClick={onRemove}\n          aria-label='Quitar'\n          className='-mr-0.5 inline-flex cursor-pointer items-center justify-center rounded-full opacity-60 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-current'>\n          <svg\n            className='h-3 w-3'\n            viewBox='0 0 24 24'\n            fill='none'\n            stroke='currentColor'\n            strokeWidth='2'\n            strokeLinecap='round'\n            strokeLinejoin='round'>\n            <path d='M18 6 6 18M6 6l12 12' />\n          </svg>\n        </button>\n      )}\n    </span>\n  );\n});\nTag.displayName = \"Tag\";\n\nexport { Tag, tagVariants };\n"
+      "content": "import { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\nconst tagVariants = cva(\n  \"inline-flex select-none items-center gap-1 border text-xs font-medium leading-none\",\n  {\n    variants: {\n      tone: {\n        gray: \"border-border bg-secondary text-secondary-foreground\",\n        brand: \"border-primary/20 bg-primary/10 text-primary\",\n        success: \"border-success/20 bg-success/10 text-success\",\n        warning: \"border-warning/20 bg-warning/10 text-warning\",\n        danger: \"border-destructive/20 bg-destructive/10 text-destructive\",\n      },\n      shape: {\n        square: \"rounded\",\n        rounded: \"rounded-full\",\n      },\n      size: {\n        sm: \"h-6 px-2 py-0.5\",\n        md: \"h-7 px-2.5 py-1\",\n        lg: \"h-8 px-3 py-1\",\n      },\n    },\n    defaultVariants: { tone: \"gray\", shape: \"square\", size: \"sm\" },\n  },\n);\n\nexport interface TagProps\n  extends Omit<React.HTMLAttributes<HTMLSpanElement>, \"color\">, VariantProps<typeof tagVariants> {\n  removable?: boolean;\n  onRemove?: () => void;\n}\n\nconst Tag = React.forwardRef<HTMLSpanElement, TagProps>(function Tag(\n  { tone, shape, size, removable, onRemove, children, className, ...props },\n  ref,\n) {\n  return (\n    <span ref={ref} className={cn(tagVariants({ tone, shape, size }), className)} {...props}>\n      {children}\n      {removable && (\n        <button\n          type=\"button\"\n          onClick={onRemove}\n          aria-label=\"Quitar\"\n          className=\"-mr-0.5 inline-flex cursor-pointer items-center justify-center rounded-full opacity-60 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-current\"\n        >\n          <svg\n            className=\"h-3 w-3\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          >\n            <path d=\"M18 6 6 18M6 6l12 12\" />\n          </svg>\n        </button>\n      )}\n    </span>\n  );\n});\nTag.displayName = \"Tag\";\n\nexport { Tag, tagVariants };\n"
     },
     {
       "path": "components/base/Tag.md",

package/assets/r/textarea.json

@@ -11,7 +11,7 @@
       "path": "components/base/Textarea.tsx",
       "type": "registry:ui",
       "target": "components/base/Textarea.tsx",
-      "content": "import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\nconst Textarea = React.forwardRef<\n  HTMLTextAreaElement,\n  React.ComponentProps<\"textarea\">\n>(({ className, ...props }, ref) => {\n  return (\n    <textarea\n      className={cn(\n        \"flex min-h-20 w-full resize-y rounded border border-input bg-background px-3 py-2.5 text-sm text-foreground outline-none transition-colors duration-150\",\n        \"placeholder:text-muted-foreground\",\n        \"hover:border-muted-foreground/40\",\n        \"focus-visible:border-primary\",\n        \"aria-invalid:border-destructive aria-invalid:hover:border-destructive aria-invalid:focus-visible:border-destructive\",\n        \"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-input\",\n        className,\n      )}\n      ref={ref}\n      {...props}\n    />\n  );\n});\nTextarea.displayName = \"Textarea\";\n\nexport { Textarea };\n"
+      "content": "import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<\"textarea\">>(\n  ({ className, ...props }, ref) => {\n    return (\n      <textarea\n        className={cn(\n          \"flex min-h-20 w-full resize-y rounded border border-input bg-background px-3 py-2.5 text-sm text-foreground outline-none transition-colors duration-150\",\n          \"placeholder:text-muted-foreground\",\n          \"hover:border-muted-foreground/40\",\n          \"focus-visible:border-primary\",\n          \"aria-invalid:border-destructive aria-invalid:hover:border-destructive aria-invalid:focus-visible:border-destructive\",\n          \"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-input\",\n          className,\n        )}\n        ref={ref}\n        {...props}\n      />\n    );\n  },\n);\nTextarea.displayName = \"Textarea\";\n\nexport { Textarea };\n"
     },
     {
       "path": "components/base/Textarea.md",

package/assets/r/toaster.json

@@ -13,7 +13,7 @@
       "path": "components/base/Toaster.tsx",
       "type": "registry:ui",
       "target": "components/base/Toaster.tsx",
-      "content": "import * as React from \"react\";\nimport { Toaster as Sonner, toast } from \"sonner\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\n// Toaster de la app (Sonner) tematizado con tokens Lexy. Se monta UNA vez en\n// el layout raíz; después se dispara imperativo desde cualquier parte:\n//\n//   toast.success(\"Cambios guardados\");\n//   toast.error(\"No pudimos guardar. Intenta de nuevo.\");\n//\n// Los tipos success/error/warning/info colorean con los tokens semánticos del\n// theme (--color-success, --color-destructive, --color-warning, --color-info)\n// vía las CSS vars de Sonner, así que cambiar el theme re-tematiza los toasts.\n//\n// Defaults pensados para CRM (denso, escritorio): bottom-right, 4s, cola de 3.\n// Para mundo cliente (flujos guiados, móvil) se recomienda position=\"top-center\"\n// y duration={6000} — ver criterio en Toaster.md.\n\nexport interface ToasterProps\n  extends React.ComponentProps<typeof Sonner> {}\n\nconst Toaster = ({ className, style, toastOptions, ...props }: ToasterProps) => (\n  <Sonner\n    className={cn(\"toaster group\", className)}\n    position=\"bottom-right\"\n    duration={4000}\n    visibleToasts={3}\n    richColors\n    style={\n      {\n        \"--normal-bg\": \"var(--color-background)\",\n        \"--normal-text\": \"var(--color-foreground)\",\n        \"--normal-border\": \"var(--color-border)\",\n        \"--success-bg\": \"var(--color-background)\",\n        \"--success-text\": \"var(--color-success)\",\n        \"--success-border\":\n          \"color-mix(in oklab, var(--color-success) 30%, transparent)\",\n        \"--error-bg\": \"var(--color-background)\",\n        \"--error-text\": \"var(--color-destructive)\",\n        \"--error-border\":\n          \"color-mix(in oklab, var(--color-destructive) 30%, transparent)\",\n        \"--warning-bg\": \"var(--color-background)\",\n        \"--warning-text\": \"var(--color-warning)\",\n        \"--warning-border\":\n          \"color-mix(in oklab, var(--color-warning) 30%, transparent)\",\n        \"--info-bg\": \"var(--color-background)\",\n        \"--info-text\": \"var(--color-info)\",\n        \"--info-border\":\n          \"color-mix(in oklab, var(--color-info) 30%, transparent)\",\n        \"--border-radius\": \"var(--radius-md)\",\n        ...style,\n      } as React.CSSProperties\n    }\n    toastOptions={{\n      ...toastOptions,\n      classNames: {\n        ...toastOptions?.classNames,\n        // Capa flotante según el contrato de geometría: shadow-md.\n        toast: cn(\"group toast !shadow-md\", toastOptions?.classNames?.toast),\n        description: cn(\n          \"!text-muted-foreground\",\n          toastOptions?.classNames?.description,\n        ),\n        actionButton: cn(\n          \"!bg-primary !text-primary-foreground\",\n          toastOptions?.classNames?.actionButton,\n        ),\n        cancelButton: cn(\n          \"!bg-muted !text-muted-foreground\",\n          toastOptions?.classNames?.cancelButton,\n        ),\n      },\n    }}\n    {...props}\n  />\n);\n\nexport { Toaster, toast };\n"
+      "content": "import * as React from \"react\";\nimport { toast, Toaster as Sonner } from \"sonner\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\n// Toaster de la app (Sonner) tematizado con tokens Lexy. Se monta UNA vez en\n// el layout raíz; después se dispara imperativo desde cualquier parte:\n//\n//   toast.success(\"Cambios guardados\");\n//   toast.error(\"No pudimos guardar. Intenta de nuevo.\");\n//\n// Los tipos success/error/warning/info colorean con los tokens semánticos del\n// theme (--color-success, --color-destructive, --color-warning, --color-info)\n// vía las CSS vars de Sonner, así que cambiar el theme re-tematiza los toasts.\n//\n// Defaults pensados para CRM (denso, escritorio): bottom-right, 4s, cola de 3.\n// Para mundo cliente (flujos guiados, móvil) se recomienda position=\"top-center\"\n// y duration={6000} — ver criterio en Toaster.md.\n\nexport type ToasterProps = React.ComponentProps<typeof Sonner>;\n\nconst Toaster = ({ className, style, toastOptions, ...props }: ToasterProps) => (\n  <Sonner\n    className={cn(\"toaster group\", className)}\n    position=\"bottom-right\"\n    duration={4000}\n    visibleToasts={3}\n    richColors\n    style={\n      {\n        \"--normal-bg\": \"var(--color-background)\",\n        \"--normal-text\": \"var(--color-foreground)\",\n        \"--normal-border\": \"var(--color-border)\",\n        \"--success-bg\": \"var(--color-background)\",\n        \"--success-text\": \"var(--color-success)\",\n        \"--success-border\": \"color-mix(in oklab, var(--color-success) 30%, transparent)\",\n        \"--error-bg\": \"var(--color-background)\",\n        \"--error-text\": \"var(--color-destructive)\",\n        \"--error-border\": \"color-mix(in oklab, var(--color-destructive) 30%, transparent)\",\n        \"--warning-bg\": \"var(--color-background)\",\n        \"--warning-text\": \"var(--color-warning)\",\n        \"--warning-border\": \"color-mix(in oklab, var(--color-warning) 30%, transparent)\",\n        \"--info-bg\": \"var(--color-background)\",\n        \"--info-text\": \"var(--color-info)\",\n        \"--info-border\": \"color-mix(in oklab, var(--color-info) 30%, transparent)\",\n        \"--border-radius\": \"var(--radius-md)\",\n        ...style,\n      } as React.CSSProperties\n    }\n    toastOptions={{\n      ...toastOptions,\n      classNames: {\n        ...toastOptions?.classNames,\n        // Capa flotante según el contrato de geometría: shadow-md.\n        toast: cn(\"group toast !shadow-md\", toastOptions?.classNames?.toast),\n        description: cn(\"!text-muted-foreground\", toastOptions?.classNames?.description),\n        actionButton: cn(\n          \"!bg-primary !text-primary-foreground\",\n          toastOptions?.classNames?.actionButton,\n        ),\n        cancelButton: cn(\n          \"!bg-muted !text-muted-foreground\",\n          toastOptions?.classNames?.cancelButton,\n        ),\n      },\n    }}\n    {...props}\n  />\n);\n\nexport { toast, Toaster };\n"
     },
     {
       "path": "components/base/Toaster.md",