create-lexy 0.3.0 → 0.4.0

package/assets/r/sidebar.json

@@ -10,19 +10,19 @@
     "lucide-react"
   ],
   "registryDependencies": [
-    "button",
-    "input",
-    "separator",
-    "sheet",
-    "skeleton",
-    "tooltip"
+    "@lexy/button",
+    "@lexy/input",
+    "@lexy/separator",
+    "@lexy/sheet",
+    "@lexy/skeleton",
+    "@lexy/tooltip"
   ],
   "files": [
     {
       "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",

package/assets/r/tooltip.json

@@ -13,7 +13,7 @@
       "path": "components/base/Tooltip.tsx",
       "type": "registry:ui",
       "target": "components/base/Tooltip.tsx",
-      "content": "import * as React from \"react\";\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\nconst TooltipProvider = TooltipPrimitive.Provider;\nconst Tooltip = TooltipPrimitive.Root;\nconst TooltipTrigger = TooltipPrimitive.Trigger;\n\nconst TooltipContent = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n  <TooltipPrimitive.Portal>\n    <TooltipPrimitive.Content\n      ref={ref}\n      sideOffset={sideOffset}\n      className={cn(\n        \"z-50 overflow-hidden rounded bg-foreground px-3 py-1.5 text-xs text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n        className,\n      )}\n      {...props}\n    />\n  </TooltipPrimitive.Portal>\n));\nTooltipContent.displayName = TooltipPrimitive.Content.displayName;\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n"
+      "content": "import * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\nconst TooltipProvider = TooltipPrimitive.Provider;\nconst Tooltip = TooltipPrimitive.Root;\nconst TooltipTrigger = TooltipPrimitive.Trigger;\n\nconst TooltipContent = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n  <TooltipPrimitive.Portal>\n    <TooltipPrimitive.Content\n      ref={ref}\n      sideOffset={sideOffset}\n      className={cn(\n        \"z-50 overflow-hidden rounded bg-foreground px-3 py-1.5 text-xs text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n        className,\n      )}\n      {...props}\n    />\n  </TooltipPrimitive.Portal>\n));\nTooltipContent.displayName = TooltipPrimitive.Content.displayName;\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };\n"
     },
     {
       "path": "components/base/Tooltip.md",

package/assets/r/tree.json

@@ -11,7 +11,7 @@
       "path": "components/base/Tree.tsx",
       "type": "registry:ui",
       "target": "components/base/Tree.tsx",
-      "content": "import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\nconst DepthCtx = React.createContext(0);\n\nconst svgProps = {\n  viewBox: \"0 0 24 24\",\n  fill: \"none\",\n  stroke: \"currentColor\",\n  strokeWidth: \"2\",\n  strokeLinecap: \"round\" as const,\n  strokeLinejoin: \"round\" as const,\n};\n\nexport interface TreeProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport function Tree({ className, ...props }: TreeProps) {\n  return (\n    <div\n      role='tree'\n      className={cn(\n        \"w-full rounded-lg border border-border bg-background p-1\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface TreeItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  label: React.ReactNode;\n  kind?: \"folder\" | \"file\";\n  defaultExpanded?: boolean;\n  /** Sub-ítems anidados (solo tiene efecto en kind=\"folder\"). */\n  children?: React.ReactNode;\n}\n\nconst TreeItem = React.forwardRef<HTMLDivElement, TreeItemProps>(\n  function TreeItem(\n    { label, kind = \"file\", defaultExpanded = false, children, className, ...props },\n    ref,\n  ) {\n  const depth = React.useContext(DepthCtx);\n  const [expanded, setExpanded] = React.useState(defaultExpanded);\n  const isFolder = kind === \"folder\";\n  const hasChildren = Boolean(children);\n\n  return (\n    <div\n      ref={ref}\n      role='treeitem'\n      aria-expanded={isFolder ? expanded : undefined}\n      className={className}\n      {...props}>\n      <div\n        onClick={() => isFolder && setExpanded((value) => !value)}\n        style={{ paddingLeft: depth * 16 + 8 }}\n        className={cn(\n          \"flex h-8 items-center gap-1.5 rounded pr-2 text-sm text-foreground transition-colors hover:bg-primary/15 hover:text-primary\",\n          isFolder && \"cursor-pointer\",\n        )}>\n        {isFolder ? (\n          <>\n            <svg\n              className={cn(\n                \"h-4 w-4 flex-shrink-0 text-muted-foreground transition-transform\",\n                expanded && \"rotate-90\",\n              )}\n              {...svgProps}>\n              <path d='m9 18 6-6-6-6' />\n            </svg>\n            {expanded ? (\n              <svg className='h-4 w-4 flex-shrink-0 text-primary' {...svgProps}>\n                <path d='m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.55 6a2 2 0 0 1-1.94 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2' />\n              </svg>\n            ) : (\n              <svg className='h-4 w-4 flex-shrink-0 text-primary' {...svgProps}>\n                <path d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z' />\n              </svg>\n            )}\n          </>\n        ) : (\n          <>\n            <span className='w-4 flex-shrink-0' />\n            <svg\n              className='h-4 w-4 flex-shrink-0 text-muted-foreground'\n              {...svgProps}>\n              <path d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z' />\n              <path d='M14 2v4a2 2 0 0 0 2 2h4' />\n            </svg>\n          </>\n        )}\n        <span className='truncate'>{label}</span>\n      </div>\n      {isFolder && expanded && hasChildren && (\n        <DepthCtx.Provider value={depth + 1}>\n          <div role='group'>{children}</div>\n        </DepthCtx.Provider>\n      )}\n    </div>\n  );\n  },\n);\n\nTree.Item = TreeItem;\n\nexport { TreeItem };\n"
+      "content": "import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\nconst DepthCtx = React.createContext(0);\n\nconst svgProps = {\n  viewBox: \"0 0 24 24\",\n  fill: \"none\",\n  stroke: \"currentColor\",\n  strokeWidth: \"2\",\n  strokeLinecap: \"round\" as const,\n  strokeLinejoin: \"round\" as const,\n};\n\nexport type TreeProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport function Tree({ className, ...props }: TreeProps) {\n  return (\n    <div\n      role=\"tree\"\n      className={cn(\"w-full rounded-lg border border-border bg-background p-1\", className)}\n      {...props}\n    />\n  );\n}\n\nexport interface TreeItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  label: React.ReactNode;\n  kind?: \"folder\" | \"file\";\n  defaultExpanded?: boolean;\n  /** Sub-ítems anidados (solo tiene efecto en kind=\"folder\"). */\n  children?: React.ReactNode;\n}\n\nconst TreeItem = React.forwardRef<HTMLDivElement, TreeItemProps>(function TreeItem(\n  { label, kind = \"file\", defaultExpanded = false, children, className, ...props },\n  ref,\n) {\n  const depth = React.useContext(DepthCtx);\n  const [expanded, setExpanded] = React.useState(defaultExpanded);\n  const isFolder = kind === \"folder\";\n  const hasChildren = Boolean(children);\n\n  return (\n    <div\n      ref={ref}\n      role=\"treeitem\"\n      aria-expanded={isFolder ? expanded : undefined}\n      aria-selected={false}\n      className={className}\n      {...props}\n    >\n      <div\n        onClick={() => isFolder && setExpanded((value) => !value)}\n        onKeyDown={(event) => {\n          if (!isFolder) return;\n          if (event.key === \"Enter\" || event.key === \" \") {\n            event.preventDefault();\n            setExpanded((value) => !value);\n          }\n        }}\n        role={isFolder ? \"button\" : undefined}\n        tabIndex={isFolder ? 0 : undefined}\n        style={{ paddingLeft: depth * 16 + 8 }}\n        className={cn(\n          \"flex h-8 items-center gap-1.5 rounded pr-2 text-sm text-foreground transition-colors hover:bg-primary/15 hover:text-primary\",\n          isFolder && \"cursor-pointer\",\n        )}\n      >\n        {isFolder ? (\n          <>\n            <svg\n              className={cn(\n                \"h-4 w-4 flex-shrink-0 text-muted-foreground transition-transform\",\n                expanded && \"rotate-90\",\n              )}\n              {...svgProps}\n            >\n              <path d=\"m9 18 6-6-6-6\" />\n            </svg>\n            {expanded ? (\n              <svg className=\"h-4 w-4 flex-shrink-0 text-primary\" {...svgProps}>\n                <path d=\"m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.55 6a2 2 0 0 1-1.94 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2\" />\n              </svg>\n            ) : (\n              <svg className=\"h-4 w-4 flex-shrink-0 text-primary\" {...svgProps}>\n                <path d=\"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z\" />\n              </svg>\n            )}\n          </>\n        ) : (\n          <>\n            <span className=\"w-4 flex-shrink-0\" />\n            <svg className=\"h-4 w-4 flex-shrink-0 text-muted-foreground\" {...svgProps}>\n              <path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z\" />\n              <path d=\"M14 2v4a2 2 0 0 0 2 2h4\" />\n            </svg>\n          </>\n        )}\n        <span className=\"truncate\">{label}</span>\n      </div>\n      {isFolder && expanded && hasChildren && (\n        <DepthCtx.Provider value={depth + 1}>\n          <div role=\"group\">{children}</div>\n        </DepthCtx.Provider>\n      )}\n    </div>\n  );\n});\n\nTree.Item = TreeItem;\n\nexport { TreeItem };\n"
     },
     {
       "path": "components/base/Tree.md",