{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tour",
  "type": "registry:block",
  "title": "Tour",
  "description": "Tour",
  "files": [
    {
      "path": "components/usages/tourusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport {\n\tCard,\n\tCardContent,\n\tCardDescription,\n\tCardFooter,\n\tCardHeader,\n\tCardTitle,\n} from \"@/components/ui/card\";\nimport TourFactory from \"@/registry/open-source/tour\";\n\nimport { Button } from \"../ui/button\";\nimport { Input } from \"../ui/input\";\n\nconst tour = TourFactory([\"example1\", \"example2\", \"emailInput\"]);\n\nexport function TourDisplay(props: {\n\tchildren: React.ReactNode;\n\ttitle?: string;\n\tdescription?: string;\n}) {\n\tconst ctx = tour.useContext();\n\treturn (\n\t\t<Card className=\"w-[350px]\">\n\t\t\t<CardHeader>\n\t\t\t\t<CardTitle>{props.title}</CardTitle>\n\t\t\t\t<CardDescription>{props.description}</CardDescription>\n\t\t\t</CardHeader>\n\t\t\t<CardContent>{props.children}</CardContent>\n\t\t\t<CardFooter>\n\t\t\t\t{ctx.current < ctx.nodes.size ? (\n\t\t\t\t\t<div className=\"flex w-full justify-between\">\n\t\t\t\t\t\t<Button variant=\"outline\" onClick={ctx.close}>\n\t\t\t\t\t\t\tClose\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<Button onClick={ctx.previous}>Previous</Button>\n\t\t\t\t\t\t\t<Button onClick={ctx.next}>Next</Button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t) : (\n\t\t\t\t\t<div className=\"flex w-full justify-end\">\n\t\t\t\t\t\t<Button onClick={ctx.previous}>Previous</Button>\n\t\t\t\t\t\t<Button className=\"bg-green-800\" onClick={ctx.close}>\n\t\t\t\t\t\t\tFinish\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</CardFooter>\n\t\t</Card>\n\t);\n}\n\nfunction TourUsageInner() {\n\tconst ctx = tour.useContext();\n\treturn (\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\n\t\t\t<div className=\"absolute bottom-2 left-2 flex gap-2\">\n\t\t\t\t<tour.TourFocus\n\t\t\t\t\tname=\"example1\"\n\t\t\t\t\ttourRender={\n\t\t\t\t\t\t<TourDisplay title=\"Create Incident\">\n\t\t\t\t\t\t\t<h1>This button creates an incident</h1>\n\t\t\t\t\t\t\t<p>helpful text about this button</p>\n\t\t\t\t\t\t</TourDisplay>\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<Button>Create Incident</Button>\n\t\t\t\t</tour.TourFocus>\n\t\t\t\t<tour.TourFocus\n\t\t\t\t\tname=\"example2\"\n\t\t\t\t\ttourRender={\n\t\t\t\t\t\t<TourDisplay title=\"Update Incident\">\n\t\t\t\t\t\t\t<h1>This button pushes your updates</h1>\n\t\t\t\t\t\t\t<p>helpful text about this button</p>\n\t\t\t\t\t\t</TourDisplay>\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<Button>Update Incident</Button>\n\t\t\t\t</tour.TourFocus>\n\t\t\t</div>\n\n\t\t\t<div>\n\t\t\t\t<tour.TourFocus\n\t\t\t\t\tname=\"emailInput\"\n\t\t\t\t\ttourRender={\n\t\t\t\t\t\t<TourDisplay title=\"Email Input\">\n\t\t\t\t\t\t\t<h1>This is where you put incident info</h1>\n\t\t\t\t\t\t\t<p>helpful text about this input</p>\n\t\t\t\t\t\t</TourDisplay>\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<Input type=\"email\" placeholder=\"Email\" />\n\t\t\t\t</tour.TourFocus>\n\t\t\t</div>\n\t\t\t<div className=\"absolute bottom-2 right-2\">\n\t\t\t\t<Button onClick={ctx.open}>Open Tour</Button>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport default function Usage() {\n\treturn (\n\t\t<tour.TourProvider>\n\t\t\t<TourUsageInner />\n\t\t</tour.TourProvider>\n\t);\n}\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/tourusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport {\n\tCard,\n\tCardContent,\n\tCardDescription,\n\tCardFooter,\n\tCardHeader,\n\tCardTitle,\n} from \"@/components/ui/card\";\nimport TourFactory from \"@/registry/open-source/tour\";\n\nimport { Button } from \"../ui/button\";\nimport { Input } from \"../ui/input\";\n\nconst tour = TourFactory([\"example1\", \"example2\", \"emailInput\"]);\n\nexport function TourDisplay(props: {\n\tchildren: React.ReactNode;\n\ttitle?: string;\n\tdescription?: string;\n}) {\n\tconst ctx = tour.useContext();\n\treturn (\n\t\t<Card className=\"w-[350px]\">\n\t\t\t<CardHeader>\n\t\t\t\t<CardTitle>{props.title}</CardTitle>\n\t\t\t\t<CardDescription>{props.description}</CardDescription>\n\t\t\t</CardHeader>\n\t\t\t<CardContent>{props.children}</CardContent>\n\t\t\t<CardFooter>\n\t\t\t\t{ctx.current < ctx.nodes.size ? (\n\t\t\t\t\t<div className=\"flex w-full justify-between\">\n\t\t\t\t\t\t<Button variant=\"outline\" onClick={ctx.close}>\n\t\t\t\t\t\t\tClose\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<Button onClick={ctx.previous}>Previous</Button>\n\t\t\t\t\t\t\t<Button onClick={ctx.next}>Next</Button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t) : (\n\t\t\t\t\t<div className=\"flex w-full justify-end\">\n\t\t\t\t\t\t<Button onClick={ctx.previous}>Previous</Button>\n\t\t\t\t\t\t<Button className=\"bg-green-800\" onClick={ctx.close}>\n\t\t\t\t\t\t\tFinish\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</CardFooter>\n\t\t</Card>\n\t);\n}\n\nfunction TourUsageInner() {\n\tconst ctx = tour.useContext();\n\treturn (\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\n\t\t\t<div className=\"absolute bottom-2 left-2 flex gap-2\">\n\t\t\t\t<tour.TourFocus\n\t\t\t\t\tname=\"example1\"\n\t\t\t\t\ttourRender={\n\t\t\t\t\t\t<TourDisplay title=\"Create Incident\">\n\t\t\t\t\t\t\t<h1>This button creates an incident</h1>\n\t\t\t\t\t\t\t<p>helpful text about this button</p>\n\t\t\t\t\t\t</TourDisplay>\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<Button>Create Incident</Button>\n\t\t\t\t</tour.TourFocus>\n\t\t\t\t<tour.TourFocus\n\t\t\t\t\tname=\"example2\"\n\t\t\t\t\ttourRender={\n\t\t\t\t\t\t<TourDisplay title=\"Update Incident\">\n\t\t\t\t\t\t\t<h1>This button pushes your updates</h1>\n\t\t\t\t\t\t\t<p>helpful text about this button</p>\n\t\t\t\t\t\t</TourDisplay>\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<Button>Update Incident</Button>\n\t\t\t\t</tour.TourFocus>\n\t\t\t</div>\n\n\t\t\t<div>\n\t\t\t\t<tour.TourFocus\n\t\t\t\t\tname=\"emailInput\"\n\t\t\t\t\ttourRender={\n\t\t\t\t\t\t<TourDisplay title=\"Email Input\">\n\t\t\t\t\t\t\t<h1>This is where you put incident info</h1>\n\t\t\t\t\t\t\t<p>helpful text about this input</p>\n\t\t\t\t\t\t</TourDisplay>\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<Input type=\"email\" placeholder=\"Email\" />\n\t\t\t\t</tour.TourFocus>\n\t\t\t</div>\n\t\t\t<div className=\"absolute bottom-2 right-2\">\n\t\t\t\t<Button onClick={ctx.open}>Open Tour</Button>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport default function Usage() {\n\treturn (\n\t\t<tour.TourProvider>\n\t\t\t<TourUsageInner />\n\t\t</tour.TourProvider>\n\t);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/tour.tsx",
      "content": "\"use client\";\r\n\r\nimport React, {\r\n\tcreateContext,\r\n\tuseContext,\r\n\tuseEffect,\r\n\tuseMemo,\r\n\tuseRef,\r\n\tuseState,\r\n} from \"react\";\r\n\r\nimport { cn } from \"@/registry/utilities/cn\";\r\nimport { createPortal } from \"react-dom\";\r\n\r\n// Credit:\r\n// https://nyxbui.design/docs/components/tour\r\n\r\nexport interface TourContext<T extends string> {\r\n\tnodes: Map<\r\n\t\tstring,\r\n\t\t{\r\n\t\t\tref: HTMLElement;\r\n\t\t\trender: React.ReactNode;\r\n\t\t\tname: T;\r\n\t\t}\r\n\t>;\r\n\tshow: boolean;\r\n\tcurrent: number;\r\n\tnext: () => void;\r\n\tprevious: () => void;\r\n\tclose: () => void;\r\n\topen: () => void;\r\n}\r\n\r\nexport interface TourProps {\r\n\tchildren?: React.ReactNode;\r\n}\r\n\r\nexport interface TourFocusProps<T extends string> {\r\n\tchildren: React.ReactNode;\r\n\ttourRender: React.ReactNode;\r\n\tname: T;\r\n}\r\n\r\nexport default function TourFactory<T extends string>(order: T[]) {\r\n\tconst tourContext = createContext<TourContext<T>>({\r\n\t\tnodes: new Map(),\r\n\t\tshow: false,\r\n\t\tcurrent: 0,\r\n\t\tnext: () => {\r\n\t\t\tconsole.log(\"empty\");\r\n\t\t},\r\n\t\tprevious: () => {\r\n\t\t\tconsole.log(\"empty\");\r\n\t\t},\r\n\t\tclose: () => {\r\n\t\t\tconsole.log(\"empty\");\r\n\t\t},\r\n\t\topen: () => {\r\n\t\t\tconsole.log(\"empty\");\r\n\t\t},\r\n\t});\r\n\r\n\tfunction TourPortal() {\r\n\t\tconst ctx = useContext(tourContext);\r\n\r\n\t\tconst ref = useRef<HTMLDivElement>(null);\r\n\t\tconst [, forceUpdate] = React.useState({});\r\n\r\n\t\tconst currentElement = useMemo(\r\n\t\t\t() => ctx.nodes.get(order[ctx.current] ?? \"\"),\r\n\t\t\t[ctx]\r\n\t\t);\r\n\r\n\t\tuseEffect(() => {\r\n\t\t\tconst handleResize = () => {\r\n\t\t\t\tforceUpdate({});\r\n\t\t\t};\r\n\r\n\t\t\twindow.addEventListener(\"resize\", handleResize);\r\n\t\t\twindow.addEventListener(\"scroll\", handleResize);\r\n\r\n\t\t\treturn () => {\r\n\t\t\t\twindow.removeEventListener(\"resize\", handleResize);\r\n\t\t\t\twindow.removeEventListener(\"scroll\", handleResize);\r\n\t\t\t};\r\n\t\t}, []);\r\n\r\n\t\tuseEffect(() => {\r\n\t\t\tif (ctx.show) forceUpdate({});\r\n\t\t}, [ctx.show]);\r\n\r\n\t\tif (!currentElement) return <></>;\r\n\r\n\t\tconst currentElementRect = currentElement.ref.getBoundingClientRect();\r\n\r\n\t\tconst height = ref.current?.getBoundingClientRect().height ?? 0;\r\n\t\tconst width = ref.current?.getBoundingClientRect().width ?? 0;\r\n\r\n\t\tconst closest = (): React.CSSProperties => {\r\n\t\t\tconst isCloseToTop = currentElementRect.top < height;\r\n\t\t\tconst isCloseToLeft = currentElementRect.left < width;\r\n\t\t\tconst isCloseToRight =\r\n\t\t\t\tcurrentElementRect.right > window.innerWidth - width;\r\n\r\n\t\t\tif (isCloseToLeft) {\r\n\t\t\t\treturn {\r\n\t\t\t\t\tleft: currentElementRect.x + currentElementRect.width,\r\n\t\t\t\t\ttop:\r\n\t\t\t\t\t\tcurrentElementRect.y -\r\n\t\t\t\t\t\theight / 2 +\r\n\t\t\t\t\t\tcurrentElementRect.height / 2,\r\n\t\t\t\t};\r\n\t\t\t}\r\n\r\n\t\t\tif (isCloseToRight) {\r\n\t\t\t\treturn {\r\n\t\t\t\t\tleft: currentElementRect.x - width,\r\n\t\t\t\t\ttop:\r\n\t\t\t\t\t\tcurrentElementRect.y -\r\n\t\t\t\t\t\theight / 2 +\r\n\t\t\t\t\t\tcurrentElementRect.height / 2,\r\n\t\t\t\t};\r\n\t\t\t}\r\n\r\n\t\t\tif (isCloseToTop) {\r\n\t\t\t\treturn {\r\n\t\t\t\t\tleft:\r\n\t\t\t\t\t\tcurrentElementRect.x -\r\n\t\t\t\t\t\twidth / 2 +\r\n\t\t\t\t\t\tcurrentElementRect.width / 2,\r\n\t\t\t\t\ttop: currentElementRect.y + currentElementRect.height,\r\n\t\t\t\t};\r\n\t\t\t}\r\n\r\n\t\t\treturn {\r\n\t\t\t\tleft:\r\n\t\t\t\t\tcurrentElementRect.x - width / 2 + currentElementRect.width / 2,\r\n\t\t\t\ttop: currentElementRect.y - height,\r\n\t\t\t};\r\n\t\t};\r\n\r\n\t\treturn createPortal(\r\n\t\t\t<div\r\n\t\t\t\tid=\"tour\"\r\n\t\t\t\tclassName={cn(\r\n\t\t\t\t\t\"pointer-events-auto fixed left-0 top-0 h-screen w-screen transition-none\",\r\n\t\t\t\t\t!ctx.show ? \"invisible\" : \"visible\"\r\n\t\t\t\t)}\r\n\t\t\t>\r\n\t\t\t\t<div\r\n\t\t\t\t\tref={ref}\r\n\t\t\t\t\tclassName={cn(\r\n\t\t\t\t\t\t`absolute z-50 transition-all duration-500 ease-in-out`\r\n\t\t\t\t\t)}\r\n\t\t\t\t\tstyle={{ ...closest() }}\r\n\t\t\t\t>\r\n\t\t\t\t\t{currentElement.render}\r\n\t\t\t\t</div>\r\n\t\t\t\t<div\r\n\t\t\t\t\tclassName=\"absolute z-40 h-screen w-screen overflow-hidden opacity-80 shadow-[0_0_0_100vw_rgba(0,0,0,.99)] transition-all duration-500 ease-in-out\"\r\n\t\t\t\t\tstyle={{\r\n\t\t\t\t\t\theight: currentElementRect.height,\r\n\t\t\t\t\t\twidth: currentElementRect.width,\r\n\t\t\t\t\t\tleft: currentElementRect.x,\r\n\t\t\t\t\t\ttop: currentElementRect.y,\r\n\t\t\t\t\t}}\r\n\t\t\t\t/>\r\n\t\t\t</div>,\r\n\t\t\tdocument.body\r\n\t\t);\r\n\t}\r\n\r\n\treturn {\r\n\t\tTourProvider: function TourProvider(props: TourProps) {\r\n\t\t\tconst nodes = useRef<TourContext<T>[\"nodes\"]>(new Map());\r\n\r\n\t\t\tconst [show, setShow] = useState(false);\r\n\t\t\tconst [current, setCurrent] = useState(0);\r\n\r\n\t\t\tconst getNextIndex = (currIndex: number, nextDiff: number): number => {\r\n\t\t\t\tconst lookAheadIndex = currIndex + nextDiff;\r\n\t\t\t\tif (lookAheadIndex >= order.length || lookAheadIndex < 0)\r\n\t\t\t\t\treturn currIndex;\r\n\r\n\t\t\t\tif (!nodes.current.has(order[lookAheadIndex]))\r\n\t\t\t\t\treturn getNextIndex(lookAheadIndex, nextDiff);\r\n\r\n\t\t\t\treturn lookAheadIndex;\r\n\t\t\t};\r\n\r\n\t\t\treturn (\r\n\t\t\t\t<tourContext.Provider\r\n\t\t\t\t\tvalue={{\r\n\t\t\t\t\t\tnodes: nodes.current,\r\n\t\t\t\t\t\tcurrent,\r\n\t\t\t\t\t\tshow,\r\n\t\t\t\t\t\tnext: () => {\r\n\t\t\t\t\t\t\tsetCurrent((state) =>\r\n\t\t\t\t\t\t\t\tMath.min(getNextIndex(state, 1), order.length - 1)\r\n\t\t\t\t\t\t\t);\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t\tprevious: () => {\r\n\t\t\t\t\t\t\tsetCurrent((state) =>\r\n\t\t\t\t\t\t\t\tMath.max(getNextIndex(state, -1), 0)\r\n\t\t\t\t\t\t\t);\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t\tclose: () => {\r\n\t\t\t\t\t\t\tsetShow(false);\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t\topen: () => {\r\n\t\t\t\t\t\t\tsetShow(true);\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t}}\r\n\t\t\t\t>\r\n\t\t\t\t\t<TourPortal />\r\n\t\t\t\t\t{props.children}\r\n\t\t\t\t</tourContext.Provider>\r\n\t\t\t);\r\n\t\t},\r\n\t\tcontext: tourContext,\r\n\t\tuseContext: () => useContext(tourContext),\r\n\t\tTourFocus: function TourFocus(props: TourFocusProps<T>) {\r\n\t\t\tconst ctx = useContext(tourContext);\r\n\t\t\treturn (\r\n\t\t\t\t<div\r\n\t\t\t\t\tref={(divRef) => {\r\n\t\t\t\t\t\tif (divRef && !ctx.nodes.has(props.name)) {\r\n\t\t\t\t\t\t\tctx.nodes.set(props.name, {\r\n\t\t\t\t\t\t\t\tref: divRef,\r\n\t\t\t\t\t\t\t\trender: props.tourRender,\r\n\t\t\t\t\t\t\t\tname: props.name,\r\n\t\t\t\t\t\t\t});\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}}\r\n\t\t\t\t>\r\n\t\t\t\t\t{props.children}\r\n\t\t\t\t</div>\r\n\t\t\t);\r\n\t\t},\r\n\t};\r\n}\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    },
    {
      "path": "components/ui/button.tsx",
      "content": "import * as React from \"react\";\r\n\r\nimport { cn } from \"@/registry/utilities/cn\";\r\nimport { Slot } from \"@radix-ui/react-slot\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\n\r\nconst buttonVariants = cva(\r\n\t\"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm text-white hover:text-gray-400 font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\r\n\t{\r\n\t\tvariants: {\r\n\t\t\tvariant: {\r\n\t\t\t\tsimple:\r\n\t\t\t\t\t\"bg-secondary relative z-10 bg-transparent hover:border-secondary hover:bg-secondary/50  border border-transparent dark:text-white text-sm md:text-sm transition font-medium duration-200  rounded-md px-4 py-2  flex items-center justify-center\",\r\n\t\t\t\tdefault: \"bg-primary text-primary-foreground hover:bg-primary/90\",\r\n\t\t\t\tdestructive:\r\n\t\t\t\t\t\"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\r\n\t\t\t\toutline:\r\n\t\t\t\t\t\"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\r\n\t\t\t\tsecondary:\r\n\t\t\t\t\t\"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\r\n\t\t\t\tghost: \"hover:bg-accent hover:text-black hover:stroke-black dark:text-white text-black\",\r\n\t\t\t\tlink: \"text-primary underline-offset-4 hover:underline\",\r\n\t\t\t},\r\n\t\t\tsize: {\r\n\t\t\t\tdefault: \"h-10 px-4 py-2\",\r\n\t\t\t\tsm: \"h-9 rounded-md px-3\",\r\n\t\t\t\tlg: \"h-11 rounded-md px-8\",\r\n\t\t\t\ticon: \"h-10 w-10\",\r\n\t\t\t},\r\n\t\t},\r\n\t\tdefaultVariants: {\r\n\t\t\tvariant: \"default\",\r\n\t\t\tsize: \"default\",\r\n\t\t},\r\n\t}\r\n);\r\n\r\nexport interface ButtonProps\r\n\textends React.ButtonHTMLAttributes<HTMLButtonElement>,\r\n\t\tVariantProps<typeof buttonVariants> {\r\n\tasChild?: boolean;\r\n}\r\n\r\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n\t({ className, variant, size, asChild = false, ...props }, ref) => {\r\n\t\tconst Comp = asChild ? Slot : \"button\";\r\n\t\treturn (\r\n\t\t\t<Comp\r\n\t\t\t\tclassName={cn(buttonVariants({ variant, size, className }))}\r\n\t\t\t\tref={ref}\r\n\t\t\t\t{...props}\r\n\t\t\t/>\r\n\t\t);\r\n\t}\r\n);\r\nButton.displayName = \"Button\";\r\n\r\nexport { Button, buttonVariants };\r\n",
      "type": "registry:ui"
    },
    {
      "path": "components/ui/input.tsx",
      "content": "// SHADCN UI GENERATED CODE\n\nimport React from \"react\";\n\nimport { cn } from \"@/registry/utilities/cn\";\n\nexport interface InputProps\n\textends React.InputHTMLAttributes<HTMLInputElement> {}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n\t({ className, type, ...props }, ref) => {\n\t\treturn (\n\t\t\t<input\n\t\t\t\ttype={type}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\t\tclassName\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t}\n);\nInput.displayName = \"Input\";\n\nexport { Input };\n",
      "type": "registry:ui"
    }
  ]
}