{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "native-nested-list-shadcnui",
  "type": "registry:component",
  "title": "Native Nested List",
  "description": "A nested list component with smooth expand/collapse animations, perfect for file explorers or navigation menus.",
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/native/native-nested-list-shadcnui.tsx",
      "content": "\"use client\";\n\nimport type React from \"react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\nimport { AnimatePresence, motion, MotionConfig } from \"framer-motion\";\nimport { ChevronRight } from \"lucide-react\";\nimport { useState } from \"react\";\n\nexport interface ListItem {\n  /**\n   * Unique identifier for the list item\n   */\n  id: string;\n  /**\n   * Display label for the list item\n   */\n  label: string;\n  /**\n   * Optional icon component\n   */\n  icon?: React.ReactNode;\n  /**\n   * Nested children items\n   */\n  children?: ListItem[];\n  /**\n   * Additional metadata\n   */\n  metadata?: Record<string, any>;\n  /**\n   * Optional URL to navigate to\n   */\n  href?: string;\n  /**\n   * Optional click handler\n   */\n  onClick?: (e: React.MouseEvent) => void;\n}\n\nexport interface NativeNestedListProps {\n  items: ListItem[];\n  activeId?: string;\n  onItemClick?: (item: ListItem) => void;\n  size?: \"sm\" | \"md\" | \"lg\";\n  showExpandIcon?: boolean;\n  defaultExpanded?: boolean;\n  className?: string;\n  indentSize?: number;\n}\n\nconst sizeVariants = {\n  sm: \"h-8 text-xs px-2\",\n  md: \"h-10 text-sm px-3\",\n  lg: \"h-12 text-base px-4\",\n};\n\nconst iconSizeVariants = {\n  sm: \"h-3 w-3\",\n  md: \"h-4 w-4\",\n  lg: \"h-5 w-5\",\n};\n\ninterface NestedItemProps {\n  item: ListItem;\n  level: number;\n  activeId?: string;\n  onItemClick?: (item: ListItem) => void;\n  size: \"sm\" | \"md\" | \"lg\";\n  showExpandIcon: boolean;\n  defaultExpanded: boolean;\n  indentSize: number;\n}\n\nfunction NestedItem({\n  item,\n  level,\n  activeId,\n  onItemClick,\n  size,\n  showExpandIcon,\n  defaultExpanded,\n  indentSize,\n}: NestedItemProps) {\n  const [isExpanded, setIsExpanded] = useState(defaultExpanded);\n  const hasChildren = item.children && item.children.length > 0;\n  const isActive = activeId === item.id;\n\n  const handleClick = (e: React.MouseEvent) => {\n    if (hasChildren) {\n      e.preventDefault();\n      setIsExpanded(!isExpanded);\n    }\n    onItemClick?.(item);\n    item.onClick?.(e);\n  };\n\n  const Comp = item.href ? \"a\" : \"span\";\n  const props = item.href ? { href: item.href } : {};\n\n  return (\n    <li className=\"list-none\">\n      <motion.div\n        initial={false}\n        whileHover={{ x: 4 }}\n        transition={{\n          type: \"spring\",\n          stiffness: 300,\n          damping: 25,\n        }}\n        style={{ paddingLeft: `${level * indentSize}px` }}\n        className=\"relative rounded-md transition-colors duration-300 hover:bg-accent/50\"\n      >\n        <motion.div\n          whileTap={{ scale: 0.98 }}\n          transition={{ type: \"spring\", stiffness: 400, damping: 17 }}\n        >\n          <Button\n            variant=\"ghost\"\n            size=\"default\"\n            asChild={!!item.href}\n            aria-expanded={hasChildren ? isExpanded : undefined}\n            aria-current={isActive ? \"true\" : undefined}\n            className={cn(\n              sizeVariants[size],\n              \"w-full justify-start gap-2 relative overflow-hidden rounded-md\",\n              \"hover:bg-transparent\",\n              isActive && \"font-medium bg-accent/30\"\n            )}\n            onClick={handleClick}\n          >\n            <Comp className=\"flex items-center gap-2\" {...props}>\n              {showExpandIcon && hasChildren && (\n                <motion.div\n                  initial={false}\n                  animate={{ rotate: isExpanded ? 90 : 0 }}\n                  transition={{\n                    type: \"spring\",\n                    stiffness: 300,\n                    damping: 20,\n                  }}\n                  className=\"flex-shrink-0\"\n                >\n                  <ChevronRight\n                    aria-hidden=\"true\"\n                    className={iconSizeVariants[size]}\n                  />\n                </motion.div>\n              )}\n              {showExpandIcon && !hasChildren && (\n                <div className={cn(iconSizeVariants[size], \"flex-shrink-0\")} />\n              )}\n              {item.icon && (\n                <div className=\"flex-shrink-0\">{item.icon}</div>\n              )}\n              <span className=\"truncate\">{item.label}</span>\n            </Comp>\n          </Button>\n        </motion.div>\n\n        <AnimatePresence>\n          {isActive && (\n            <motion.div\n              aria-hidden=\"true\"\n              initial={{ scale: 0.5, opacity: 0 }}\n              animate={{ scale: 1, opacity: 1 }}\n              exit={{ scale: 0.5, opacity: 0 }}\n              transition={{\n                type: \"spring\",\n                stiffness: 500,\n                damping: 30,\n              }}\n              className=\"absolute right-2 top-1/2 -translate-y-1/2 w-1.5 h-1.5 bg-foreground rounded-full\"\n            />\n          )}\n        </AnimatePresence>\n      </motion.div>\n\n      {/* Nested children */}\n      <AnimatePresence initial={false}>\n        {hasChildren && isExpanded && (\n          <motion.div\n            initial={{ height: 0, opacity: 0 }}\n            animate={{ height: \"auto\", opacity: 1 }}\n            exit={{ height: 0, opacity: 0 }}\n            transition={{\n              height: {\n                type: \"spring\",\n                stiffness: 300,\n                damping: 25,\n              },\n              opacity: {\n                duration: 0.2,\n              },\n            }}\n            style={{ overflow: \"hidden\" }}\n          >\n            <ul className=\"list-none\">\n              {item.children!.map((child) => (\n                <NestedItem\n                  key={child.id}\n                  item={child}\n                  level={level + 1}\n                  activeId={activeId}\n                  onItemClick={onItemClick}\n                  size={size}\n                  showExpandIcon={showExpandIcon}\n                  defaultExpanded={defaultExpanded}\n                  indentSize={indentSize}\n                />\n              ))}\n            </ul>\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </li>\n  );\n}\n\nexport function NativeNestedList({\n  items,\n  activeId,\n  onItemClick,\n  size = \"md\",\n  showExpandIcon = true,\n  defaultExpanded = false,\n  className,\n  indentSize = 16,\n}: NativeNestedListProps) {\n  return (\n    <MotionConfig reducedMotion=\"user\">\n      <ul className={cn(\"w-full space-y-1 list-none\", className)}>\n        {items.map((item) => (\n          <NestedItem\n            key={item.id}\n            item={item}\n            level={0}\n            activeId={activeId}\n            onItemClick={onItemClick}\n            size={size}\n            showExpandIcon={showExpandIcon}\n            defaultExpanded={defaultExpanded}\n            indentSize={indentSize}\n          />\n        ))}\n      </ul>\n    </MotionConfig>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/native-nested-list-shadcnui.tsx"
    }
  ]
}