{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"badge","title":"Badge","type":"registry:ui","description":"Displays a badge or a component that looks like a badge with mutliple variants.","dependencies":["class-variance-authority"],"registryDependencies":["utils","https://fysk.dev/r/fysk-provider.json","https://fysk.dev/r/fysk-hooks.json"],"files":[{"path":"fysk/badge.tsx","type":"registry:ui","content":"\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { cva, type VariantProps } from \"class-variance-authority\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport { useFyskConfig, type FyskIconPosition } from \"@/components/fysk-provider\"\r\nimport { useFyskAnimation } from \"@/components/hooks/useFyskAnimation\"\r\n\r\nconst badgeVariants = cva(\r\n    \"inline-flex items-center rounded-full border transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 font-semibold whitespace-nowrap gap-1.5\",\r\n    {\r\n        variants: {\r\n            variant: {\r\n                default: \"border-transparent bg-primary text-primary-foreground hover:opacity-80 shadow-xs\",\r\n                secondary: \"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80\",\r\n                outline: \"text-foreground border-border\",\r\n                ghost: \"text-foreground border-transparent bg-transparent hover:bg-muted/50\",\r\n                destructive: \"border-transparent bg-destructive text-destructive-foreground hover:opacity-80 shadow-xs\",\r\n\r\n                glass: \"bg-foreground/10 backdrop-blur-md border-border/50 text-foreground shadow-xs\",\r\n                success: \"border-transparent bg-green-600 text-white hover:bg-green-600/80 shadow-xs\",\r\n                warning: \"border-transparent bg-yellow-600 text-white hover:bg-yellow-600/80 shadow-xs\",\r\n                info: \"border-transparent bg-blue-600 text-white hover:bg-blue-600/80 shadow-xs\",\r\n            },\r\n            size: {\r\n                xs: \"px-1.5 py-0 text-[9px] gap-1\",\r\n                sm: \"px-2 py-0 text-[10px]\",\r\n                md: \"px-2.5 py-0.5 text-xs\",\r\n                lg: \"px-3 py-1 text-sm\",\r\n                xl: \"px-4 py-1.5 text-base gap-2\",\r\n            },\r\n            badgeStyle: {\r\n                native: \"\",\r\n                modern: \"\",\r\n            }\r\n        },\r\n        compoundVariants: [\r\n            {\r\n                variant: \"success\",\r\n                badgeStyle: \"modern\",\r\n                className: \"bg-green-500/15 border-green-500/30 text-green-700 dark:text-green-400 hover:bg-green-500/25 opacity-100\",\r\n            },\r\n            {\r\n                variant: \"destructive\",\r\n                badgeStyle: \"modern\",\r\n                className: \"bg-destructive/15 border-destructive/30 text-destructive hover:bg-destructive/25 opacity-100\",\r\n            },\r\n            {\r\n                variant: \"warning\",\r\n                badgeStyle: \"modern\",\r\n                className: \"bg-yellow-500/15 border-yellow-500/30 text-yellow-700 dark:text-yellow-400 hover:bg-yellow-500/25 opacity-100\",\r\n            },\r\n            {\r\n                variant: \"info\",\r\n                badgeStyle: \"modern\",\r\n                className: \"bg-blue-500/15 border-blue-500/30 text-blue-700 dark:text-blue-400 hover:bg-blue-500/25 opacity-100\",\r\n            },\r\n            {\r\n                variant: \"default\",\r\n                badgeStyle: \"modern\",\r\n                className: \"bg-primary/10 border-primary/20 text-primary hover:bg-primary/20 opacity-100\",\r\n            },\r\n        ],\r\n        defaultVariants: {\r\n            variant: \"default\",\r\n            size: \"md\",\r\n            badgeStyle: \"native\",\r\n        },\r\n    }\r\n)\r\n\r\nexport interface BadgeProps\r\n    extends React.HTMLAttributes<HTMLDivElement>,\r\n    VariantProps<typeof badgeVariants> {\r\n    dot?: boolean\r\n    dotBlink?: boolean\r\n    state?: \"idle\" | \"loading\" | \"success\" | \"error\"\r\n    icon?: React.ReactNode\r\n    iconLoading?: React.ReactNode\r\n    iconSuccess?: React.ReactNode\r\n    iconError?: React.ReactNode\r\n    iconPosition?: FyskIconPosition\r\n}\r\n\r\nfunction Badge({\r\n    className,\r\n    variant,\r\n    size,\r\n    badgeStyle,\r\n    dot = false,\r\n    dotBlink = true,\r\n    state = \"idle\",\r\n    icon,\r\n    iconLoading: propIconLoading,\r\n    iconSuccess: propIconSuccess,\r\n    iconError: propIconError,\r\n    iconPosition: propIconPosition,\r\n    children,\r\n    ...props\r\n}: BadgeProps) {\r\n    const config = useFyskConfig()\r\n    const { isEnabled, motion, AnimatePresence, transitions, variants } = useFyskAnimation()\r\n\r\n    const isLoading = state === \"loading\"\r\n    const isSuccess = state === \"success\"\r\n    const isError = state === \"error\"\r\n\r\n    const activeIconPosition = propIconPosition || config.iconPosition || \"start\"\r\n    const finalIconLoading = propIconLoading || config.icons?.loading\r\n    const finalIconSuccess = propIconSuccess || config.icons?.success\r\n    const finalIconError = propIconError || config.icons?.error\r\n\r\n    const currentIcon = isLoading ? finalIconLoading : isSuccess ? finalIconSuccess : isError ? finalIconError : icon\r\n\r\n    const MotionDiv = isEnabled && motion ? motion.div : \"div\"\r\n\r\n    return (\r\n        <MotionDiv\r\n            className={cn(\r\n                badgeVariants({ variant, size, badgeStyle }),\r\n                activeIconPosition === \"end\" && \"flex-row-reverse\",\r\n                className\r\n            )}\r\n            {...(isEnabled && motion ? {\r\n                layout: true,\r\n                transition: transitions?.layout\r\n            } : {})}\r\n            {...props}\r\n        >\r\n            <AnimatePresence {...(isEnabled && motion ? { mode: \"wait\", initial: false } : {})}>\r\n                <MotionDiv\r\n                    key={state + (currentIcon ? \"icon\" : \"dot\")}\r\n                    className=\"flex items-center gap-1.5\"\r\n                    {...(isEnabled && motion && variants ? {\r\n                        ...variants.scaleIn,\r\n                    } : {})}\r\n                >\r\n                    {currentIcon ? (\r\n                        <span className={cn(\r\n                            \"inline-flex shrink-0\",\r\n                            size === \"xs\" && \"[&_svg]:size-2.5\",\r\n                            size === \"sm\" && \"[&_svg]:size-3\",\r\n                            size === \"md\" && \"[&_svg]:size-3.5\",\r\n                            size === \"lg\" && \"[&_svg]:size-4\",\r\n                            size === \"xl\" && \"[&_svg]:size-5\",\r\n                        )}>\r\n                            {currentIcon}\r\n                        </span>\r\n                    ) : dot ? (\r\n                        <span\r\n                            className={cn(\r\n                                \"h-1.5 w-1.5 rounded-full bg-current shrink-0\",\r\n                                size === \"xs\" && \"h-1 w-1\",\r\n                                dotBlink && (isEnabled ? \"animate-pulse\" : \"animate-blink\")\r\n                            )}\r\n                        />\r\n                    ) : null}\r\n                </MotionDiv>\r\n            </AnimatePresence>\r\n            {children}\r\n        </MotionDiv>\r\n    )\r\n}\r\n\r\nexport { Badge, badgeVariants }"}]}