{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "native-button-baseui",
  "type": "registry:component",
  "title": "Native Button",
  "description": "Glassmorphism-inspired button component based on shadcn/ui with smooth animations and modern styling (Base UI)",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-baseui/src/components/native/native-button-baseui.tsx",
      "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport {\n  Button,\n  type ButtonProps as BaseButtonProps,\n} from \"@base-ui/react/button\";\nimport { Loader2 } from \"lucide-react\";\nimport * as React from \"react\";\nimport { ReactNode } from \"react\";\n\nexport interface NativeButtonProps extends Omit<BaseButtonProps, \"className\"> {\n  children: ReactNode;\n  loading?: boolean;\n  glow?: boolean;\n  variant?:\n    | \"default\"\n    | \"destructive\"\n    | \"outline\"\n    | \"secondary\"\n    | \"ghost\"\n    | \"link\";\n  size?: \"default\" | \"sm\" | \"lg\" | \"icon\";\n  className?: string;\n  href?: string;\n}\n\nconst NativeButton = React.forwardRef<HTMLButtonElement, NativeButtonProps>(\n  (\n    {\n      className,\n      variant = \"default\",\n      size = \"lg\",\n      children,\n      loading = false,\n      glow = false,\n      disabled,\n      ...props\n    },\n    ref\n  ) => {\n    const buttonContent = (\n      <>\n        {loading && (\n          <Loader2 aria-hidden=\"true\" className=\"w-4 h-4 mr-2 animate-spin\" />\n        )}\n        <span\n          className={cn(\n            \"flex justify-center items-center gap-2 w-full\",\n            loading && \"motion-safe:animate-[pulse_1s_ease-in-out_infinite]\"\n          )}\n        >\n          {children}\n        </span>\n      </>\n    );\n\n    const variantStyles = {\n      default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n      destructive:\n        \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n      outline:\n        \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n      secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n      ghost: \"hover:bg-accent hover:text-accent-foreground\",\n      link: \"text-primary underline-offset-4 hover:underline\",\n    };\n\n    const sizeStyles = {\n      default: \"h-10 px-4 py-2\",\n      sm: \"h-9 rounded-md px-3\",\n      lg: \"h-11 rounded-md px-8\",\n      icon: \"h-10 w-10\",\n    };\n\n    const glassmorphismClassName = cn(\n      \"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\n      variantStyles[variant],\n      sizeStyles[size],\n      \"cursor-pointer h-12 rounded-md text-sm relative overflow-hidden\",\n      \"transition-[scale,box-shadow,background-color,border-color,color] duration-200\",\n      !disabled &&\n        !loading &&\n        \"motion-safe:hover:scale-[1.02] motion-safe:active:scale-[0.98]\",\n      !glow && \"shadow-md hover:shadow-lg\",\n      glow && \"shadow-lg shadow-primary/20 hover:shadow-primary/40\",\n      variant === \"outline\" && \"text-foreground/80 hover:bg-foreground/5\",\n      (disabled || loading) && \"opacity-50 cursor-not-allowed grayscale\",\n      className\n    );\n\n    const glowOverlay =\n      glow && !disabled && !loading ? (\n        <div\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-0 rounded-md bg-primary/20 blur-xl opacity-0 group-hover/native:opacity-100 transition-opacity duration-500\"\n        />\n      ) : null;\n\n    if (props.href) {\n      return (\n        <div className=\"group/native relative inline-block w-fit\">\n          {glowOverlay}\n          <a\n            ref={ref as React.Ref<HTMLAnchorElement>}\n            {...(props as any)}\n            className={cn(\n              glassmorphismClassName,\n              (disabled || loading) && \"pointer-events-none\"\n            )}\n            aria-disabled={disabled || loading ? true : undefined}\n            tabIndex={disabled || loading ? -1 : undefined}\n          >\n            {buttonContent}\n          </a>\n        </div>\n      );\n    }\n\n    return (\n      <div className=\"group/native relative inline-block w-fit\">\n        {glowOverlay}\n        <Button\n          ref={ref}\n          nativeButton\n          className={glassmorphismClassName}\n          disabled={disabled || loading}\n          aria-busy={loading}\n          {...props}\n        >\n          {buttonContent}\n        </Button>\n      </div>\n    );\n  }\n);\nNativeButton.displayName = \"NativeButton\";\n\nexport { NativeButton };\n",
      "type": "registry:component",
      "target": "components/uitripled/native-button-baseui.tsx"
    }
  ]
}