{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"input","title":"Input","type":"registry:ui","description":"Displays a form input field that handles state for you.","dependencies":["class-variance-authority"],"registryDependencies":["utils","https://fysk.dev/r/fysk-provider.json","https://fysk.dev/r/fysk-hooks.json"],"files":[{"path":"fysk/input.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 inputVariants = cva(\r\n    \"flex w-full min-w-0 rounded-md shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\r\n    {\r\n        variants: {\r\n            variant: {\r\n                default: \"border border-input bg-transparent dark:bg-input/30 shadow-xs\",\r\n                outline: \"border-2 border-border bg-transparent focus:border-ring/50\",\r\n                secondary: \"border border-transparent bg-muted focus:bg-background focus:border-input\",\r\n                ghost: \"border border-transparent bg-transparent hover:bg-muted focus:bg-background shadow-none\",\r\n                glass: \"bg-foreground/5 backdrop-blur-md border border-border/50 text-foreground placeholder:text-muted-foreground/50 focus:bg-foreground/10 shadow-xs\",\r\n            },\r\n            size: {\r\n                xs: \"h-7 px-2 py-1 text-xs\",\r\n                sm: \"h-8 px-2.5 py-1 text-sm\",\r\n                md: \"h-9 px-3 py-1 text-base md:text-sm\",\r\n                lg: \"h-10 px-4 py-2 text-base md:text-sm\",\r\n                xl: \"h-12 px-5 py-3 text-lg\",\r\n            },\r\n        },\r\n        defaultVariants: {\r\n            variant: \"default\",\r\n            size: \"md\",\r\n        },\r\n    }\r\n)\r\n\r\nexport interface InputProps\r\n    extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,\r\n    VariantProps<typeof inputVariants> {\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    onIconClick?: (e: React.MouseEvent<HTMLButtonElement>) => void\r\n}\r\n\r\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\r\n    (\r\n        {\r\n            className,\r\n            variant,\r\n            size,\r\n            type,\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            onIconClick,\r\n            ...props\r\n        },\r\n        ref\r\n    ) => {\r\n        const config = useFyskConfig()\r\n        const { isEnabled, motion, AnimatePresence, 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        const renderIcon = () => {\r\n            if (!currentIcon && state === \"idle\") return null\r\n\r\n            const commonClasses = cn(\r\n                \"absolute flex items-center justify-center text-muted-foreground\",\r\n                size === \"xs\" ? \"[&_svg]:size-3.5\" : \"[&_svg]:size-4\",\r\n                activeIconPosition === \"start\"\r\n                    ? (size === \"xs\" ? \"left-2\" : \"left-3\")\r\n                    : (size === \"xs\" ? \"right-2\" : \"right-3\")\r\n            )\r\n\r\n            return (\r\n                <AnimatePresence {...(isEnabled && motion ? { mode: \"wait\" } : {})}>\r\n                    {currentIcon && (\r\n                        <MotionDiv\r\n                            key={state + (currentIcon ? \"has-icon\" : \"no-icon\")}\r\n                            className={commonClasses}\r\n                            {...(isEnabled && motion && variants ? variants.iconPop : {})}\r\n                        >\r\n                            {onIconClick ? (\r\n                                <button\r\n                                    type=\"button\"\r\n                                    onClick={onIconClick}\r\n                                    className=\"pointer-events-auto cursor-pointer hover:text-foreground transition-all outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm active:scale-90\"\r\n                                >\r\n                                    {currentIcon}\r\n                                </button>\r\n                            ) : (\r\n                                <div className=\"pointer-events-none\">\r\n                                    {currentIcon}\r\n                                </div>\r\n                            )}\r\n                        </MotionDiv>\r\n                    )}\r\n                </AnimatePresence>\r\n            )\r\n        }\r\n\r\n        return (\r\n            <div className=\"relative flex items-center w-full\">\r\n                {activeIconPosition === \"start\" && renderIcon()}\r\n                <input\r\n                    type={type}\r\n                    className={cn(\r\n                        inputVariants({ variant, size, className }),\r\n                        currentIcon && activeIconPosition === \"start\" && (size === \"xs\" ? \"pl-8\" : \"pl-10\"),\r\n                        currentIcon && activeIconPosition === \"end\" && (size === \"xs\" ? \"pr-8\" : \"pr-10\"),\r\n                        isSuccess && \"border-green-500/50 focus-visible:ring-green-500/20\",\r\n                        isError && \"border-destructive/50 focus-visible:ring-destructive/20\"\r\n                    )}\r\n                    ref={ref}\r\n                    data-state={state}\r\n                    {...props}\r\n                />\r\n                {activeIconPosition === \"end\" && renderIcon()}\r\n            </div>\r\n        )\r\n    }\r\n)\r\nInput.displayName = \"Input\"\r\n\r\nexport { Input, inputVariants }\r\n\r\n\r\n"}]}