const{Fragment:l,jsx:n,jsxs:e}=arguments[0];function _createMdxContent(s){const r={a:"a",code:"code",div:"div",h2:"h2",h3:"h3",pre:"pre",span:"span",...s.components},{ComponentPreview:c,ComponentSource:a,Step:o,Steps:i,Tabs:t,TabsContent:p,TabsList:d,TabsTrigger:h}=r;return c||_missingMdxReference("ComponentPreview",!0),a||_missingMdxReference("ComponentSource",!0),o||_missingMdxReference("Step",!0),i||_missingMdxReference("Steps",!0),t||_missingMdxReference("Tabs",!0),p||_missingMdxReference("TabsContent",!0),d||_missingMdxReference("TabsList",!0),h||_missingMdxReference("TabsTrigger",!0),e(l,{children:[n(c,{name:"input-1",className:"[&_input]:max-w-xs",description:"A form input component.",children:e(r.div,{"data-rehype-pretty-code-fragment":"",children:[n(r.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:"import { Input } from '~/components/input'\n \nexport function InputDisabled() {\n return \n}",children:e(r.code,{"data-language":"tsx","data-theme":"dark",children:[e(r.span,{className:"line",children:[n(r.span,{style:{color:"#CBA6F7"},children:"import"}),n(r.span,{style:{color:"#9399B2"},children:" {"}),n(r.span,{style:{color:"#CDD6F4"},children:" Input "}),n(r.span,{style:{color:"#9399B2"},children:"}"}),n(r.span,{style:{color:"#CBA6F7"},children:" from"}),n(r.span,{style:{color:"#A6E3A1"},children:" '~/components/input'"})]}),"\n",n(r.span,{className:"line",children:" "}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#CBA6F7"},children:"export"}),n(r.span,{style:{color:"#CBA6F7"},children:" function"}),n(r.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" InputDisabled"}),n(r.span,{style:{color:"#9399B2"},children:"()"}),n(r.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#CBA6F7"},children:" return"}),n(r.span,{style:{color:"#94E2D5"},children:" <"}),n(r.span,{style:{color:"#F5C2E7"},children:"Input"}),n(r.span,{style:{color:"#F9E2AF"},children:" disabled"}),n(r.span,{style:{color:"#F9E2AF"},children:" type"}),n(r.span,{style:{color:"#94E2D5"},children:"="}),n(r.span,{style:{color:"#A6E3A1"},children:"'email'"}),n(r.span,{style:{color:"#F9E2AF"},children:" placeholder"}),n(r.span,{style:{color:"#94E2D5"},children:"="}),n(r.span,{style:{color:"#A6E3A1"},children:"'Email'"}),n(r.span,{style:{color:"#94E2D5"},children:" />"})]}),"\n",n(r.span,{className:"line",children:n(r.span,{style:{color:"#9399B2"},children:"}"})})]})}),n(r.pre,{"data-language":"tsx","data-theme":"light",__rawString__:"import { Input } from '~/components/input'\n \nexport function InputDisabled() {\n return \n}",children:e(r.code,{"data-language":"tsx","data-theme":"light",children:[e(r.span,{className:"line",children:[n(r.span,{style:{color:"#D73A49"},children:"import"}),n(r.span,{style:{color:"#24292E"},children:" { Input } "}),n(r.span,{style:{color:"#D73A49"},children:"from"}),n(r.span,{style:{color:"#032F62"},children:" '~/components/input'"})]}),"\n",n(r.span,{className:"line",children:" "}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#D73A49"},children:"export"}),n(r.span,{style:{color:"#D73A49"},children:" function"}),n(r.span,{style:{color:"#6F42C1"},children:" InputDisabled"}),n(r.span,{style:{color:"#24292E"},children:"() {"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#D73A49"},children:" return"}),n(r.span,{style:{color:"#24292E"},children:" <"}),n(r.span,{style:{color:"#005CC5"},children:"Input"}),n(r.span,{style:{color:"#6F42C1"},children:" disabled"}),n(r.span,{style:{color:"#6F42C1"},children:" type"}),n(r.span,{style:{color:"#D73A49"},children:"="}),n(r.span,{style:{color:"#032F62"},children:"'email'"}),n(r.span,{style:{color:"#6F42C1"},children:" placeholder"}),n(r.span,{style:{color:"#D73A49"},children:"="}),n(r.span,{style:{color:"#032F62"},children:"'Email'"}),n(r.span,{style:{color:"#24292E"},children:" />"})]}),"\n",n(r.span,{className:"line",children:n(r.span,{style:{color:"#24292E"},children:"}"})})]})})]})}),"\n",e(r.h2,{id:"installation",children:[n(r.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:n(r.span,{className:"icon icon-link"})}),"Installation"]}),"\n",e(t,{children:[e(d,{children:[n(h,{value:"cli",children:"CLI"}),n(h,{value:"manual",children:"Manual"})]}),n(p,{value:"cli",children:e(r.div,{"data-rehype-pretty-code-fragment":"",children:[n(r.pre,{"data-language":"bash","data-theme":"dark",__rawString__:"npx shadcn@latest add input",__npmCommand__:"npx shadcn@latest add input",__yarnCommand__:"npx shadcn@latest add input",__pnpmCommand__:"pnpm dlx shadcn@latest add input",__bunCommand__:"bunx --bun shadcn@latest add input",children:n(r.code,{"data-language":"bash","data-theme":"dark",children:e(r.span,{className:"line",children:[n(r.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"npx"}),n(r.span,{style:{color:"#A6E3A1"},children:" shadcn@latest"}),n(r.span,{style:{color:"#A6E3A1"},children:" add"}),n(r.span,{style:{color:"#A6E3A1"},children:" input"})]})})}),n(r.pre,{"data-language":"bash","data-theme":"light",__rawString__:"npx shadcn@latest add input",__npmCommand__:"npx shadcn@latest add input",__yarnCommand__:"npx shadcn@latest add input",__pnpmCommand__:"pnpm dlx shadcn@latest add input",__bunCommand__:"bunx --bun shadcn@latest add input",children:n(r.code,{"data-language":"bash","data-theme":"light",children:e(r.span,{className:"line",children:[n(r.span,{style:{color:"#6F42C1"},children:"npx"}),n(r.span,{style:{color:"#032F62"},children:" shadcn@latest"}),n(r.span,{style:{color:"#032F62"},children:" add"}),n(r.span,{style:{color:"#032F62"},children:" input"})]})})})]})}),n(p,{value:"manual",children:e(i,{children:[n(o,{children:"Copy and paste the following code into your project."}),e(a,{name:"input",children:[e(r.div,{"data-rehype-pretty-code-fragment":"",children:[n(r.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:"// index.ts\n \nexport * from './input'",children:e(r.code,{"data-language":"tsx","data-theme":"dark",children:[n(r.span,{className:"line",children:n(r.span,{style:{color:"#6C7086",fontStyle:"italic"},children:"// index.ts"})}),"\n",n(r.span,{className:"line",children:" "}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#CBA6F7"},children:"export"}),n(r.span,{style:{color:"#F38BA8"},children:" *"}),n(r.span,{style:{color:"#CBA6F7"},children:" from"}),n(r.span,{style:{color:"#A6E3A1"},children:" './input'"})]})]})}),n(r.pre,{"data-language":"tsx","data-theme":"light",__rawString__:"// index.ts\n \nexport * from './input'",children:e(r.code,{"data-language":"tsx","data-theme":"light",children:[n(r.span,{className:"line",children:n(r.span,{style:{color:"#6A737D"},children:"// index.ts"})}),"\n",n(r.span,{className:"line",children:" "}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#D73A49"},children:"export"}),n(r.span,{style:{color:"#005CC5"},children:" *"}),n(r.span,{style:{color:"#D73A49"},children:" from"}),n(r.span,{style:{color:"#032F62"},children:" './input'"})]})]})})]}),e(r.div,{"data-rehype-pretty-code-fragment":"",children:[n(r.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:"// input.tsx\n \nimport * as React from 'react'\n \nimport { cn } from '@gentelduck/libs/cn'\nimport { Badge } from '../badge'\nimport { LabelType } from '../button'\nimport { CommandShortcut } from '../command'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip'\n \nexport interface InputProps\n extends React.InputHTMLAttributes {}\n \nconst Input = React.forwardRef(\n ({ className, type, ...props }, ref) => {\n return (\n \n )\n },\n)\nInput.displayName = 'Input'\n \nexport interface InputCustomViewProps {\n trigger: React.ComponentPropsWithoutRef\n label?: LabelType\n badge?: React.ComponentPropsWithoutRef\n}\n \nconst InputCustomView = React.forwardRef<\n React.ElementRef,\n InputCustomViewProps\n>(({ trigger, label, badge }, ref) => {\n const {\n children: badgeChildren,\n className: badgeClassName,\n ...badgeProps\n } = badge ?? {}\n const {\n children: labelChildren,\n className: labelClassName,\n ...labelProps\n } = label ?? {}\n const { className: triggerClassName, ...triggerProps } = trigger ?? {}\n return (\n

\n \n \n \n \n \n \n \n {badgeChildren}\n \n \n

{labelChildren}

\n \n \n

\n )\n})\n \nInputCustomView.displayName = 'InputWithLabel'\n \nexport { Input, InputCustomView }",children:e(r.code,{"data-language":"tsx","data-theme":"dark",children:[n(r.span,{className:"line",children:n(r.span,{style:{color:"#6C7086",fontStyle:"italic"},children:"// input.tsx"})}),"\n",n(r.span,{className:"line",children:" "}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#CBA6F7"},children:"import"}),n(r.span,{style:{color:"#F38BA8"},children:" *"}),n(r.span,{style:{color:"#CBA6F7"},children:" as"}),n(r.span,{style:{color:"#CDD6F4"},children:" React "}),n(r.span,{style:{color:"#CBA6F7"},children:"from"}),n(r.span,{style:{color:"#A6E3A1"},children:" 'react'"})]}),"\n",n(r.span,{className:"line",children:" "}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#CBA6F7"},children:"import"}),n(r.span,{style:{color:"#9399B2"},children:" {"}),n(r.span,{style:{color:"#CDD6F4"},children:" cn "}),n(r.span,{style:{color:"#9399B2"},children:"}"}),n(r.span,{style:{color:"#CBA6F7"},children:" from"}),n(r.span,{style:{color:"#A6E3A1"},children:" '@gentelduck/libs/cn'"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#CBA6F7"},children:"import"}),n(r.span,{style:{color:"#9399B2"},children:" {"}),n(r.span,{style:{color:"#CDD6F4"},children:" Badge "}),n(r.span,{style:{color:"#9399B2"},children:"}"}),n(r.span,{style:{color:"#CBA6F7"},children:" from"}),n(r.span,{style:{color:"#A6E3A1"},children:" '../badge'"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#CBA6F7"},children:"import"}),n(r.span,{style:{color:"#9399B2"},children:" {"}),n(r.span,{style:{color:"#CDD6F4"},children:" LabelType "}),n(r.span,{style:{color:"#9399B2"},children:"}"}),n(r.span,{style:{color:"#CBA6F7"},children:" from"}),n(r.span,{style:{color:"#A6E3A1"},children:" '../button'"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#CBA6F7"},children:"import"}),n(r.span,{style:{color:"#9399B2"},children:" {"}),n(r.span,{style:{color:"#CDD6F4"},children:" CommandShortcut "}),n(r.span,{style:{color:"#9399B2"},children:"}"}),n(r.span,{style:{color:"#CBA6F7"},children:" from"}),n(r.span,{style:{color:"#A6E3A1"},children:" '../command'"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#CBA6F7"},children:"import"}),n(r.span,{style:{color:"#9399B2"},children:" {"}),n(r.span,{style:{color:"#CDD6F4"},children:" Tooltip"}),n(r.span,{style:{color:"#9399B2"},children:","}),n(r.span,{style:{color:"#CDD6F4"},children:" TooltipContent"}),n(r.span,{style:{color:"#9399B2"},children:","}),n(r.span,{style:{color:"#CDD6F4"},children:" TooltipTrigger "}),n(r.span,{style:{color:"#9399B2"},children:"}"}),n(r.span,{style:{color:"#CBA6F7"},children:" from"}),n(r.span,{style:{color:"#A6E3A1"},children:" '../tooltip'"})]}),"\n",n(r.span,{className:"line",children:" "}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#CBA6F7"},children:"export"}),n(r.span,{style:{color:"#CBA6F7"},children:" interface"}),n(r.span,{style:{color:"#F9E2AF",fontStyle:"italic"},children:" InputProps"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#CBA6F7"},children:" extends"}),n(r.span,{style:{color:"#F9E2AF",fontStyle:"italic"},children:" React"}),n(r.span,{style:{color:"#94E2D5"},children:"."}),n(r.span,{style:{color:"#F9E2AF",fontStyle:"italic"},children:"InputHTMLAttributes"}),n(r.span,{style:{color:"#89DCEB"},children:"<"}),n(r.span,{style:{color:"#F9E2AF",fontStyle:"italic"},children:"HTMLInputElement"}),n(r.span,{style:{color:"#89DCEB"},children:">"}),n(r.span,{style:{color:"#9399B2"},children:" {}"})]}),"\n",n(r.span,{className:"line",children:" "}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#CBA6F7"},children:"const"}),n(r.span,{style:{color:"#FAB387"},children:" Input"}),n(r.span,{style:{color:"#94E2D5"},children:" ="}),n(r.span,{style:{color:"#CDD6F4"},children:" React"}),n(r.span,{style:{color:"#94E2D5"},children:"."}),n(r.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"forwardRef"}),n(r.span,{style:{color:"#89DCEB"},children:"<"}),n(r.span,{style:{color:"#F9E2AF",fontStyle:"italic"},children:"HTMLInputElement"}),n(r.span,{style:{color:"#9399B2"},children:","}),n(r.span,{style:{color:"#F9E2AF",fontStyle:"italic"},children:" InputProps"}),n(r.span,{style:{color:"#89DCEB"},children:">"}),n(r.span,{style:{color:"#CDD6F4"},children:"("})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#9399B2"},children:" ({"}),n(r.span,{style:{color:"#EBA0AC",fontStyle:"italic"},children:" className"}),n(r.span,{style:{color:"#9399B2"},children:","}),n(r.span,{style:{color:"#EBA0AC",fontStyle:"italic"},children:" type"}),n(r.span,{style:{color:"#9399B2"},children:","}),n(r.span,{style:{color:"#94E2D5"},children:" ..."}),n(r.span,{style:{color:"#EBA0AC",fontStyle:"italic"},children:"props"}),n(r.span,{style:{color:"#9399B2"},children:" },"}),n(r.span,{style:{color:"#EBA0AC",fontStyle:"italic"},children:" ref"}),n(r.span,{style:{color:"#9399B2"},children:")"}),n(r.span,{style:{color:"#CBA6F7"},children:" =>"}),n(r.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#CBA6F7"},children:" return"}),n(r.span,{style:{color:"#CDD6F4"},children:" ("})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#94E2D5"},children:" <"}),n(r.span,{style:{color:"#89B4FA"},children:"input"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#F9E2AF"},children:" type"}),n(r.span,{style:{color:"#94E2D5"},children:"="}),n(r.span,{style:{color:"#9399B2"},children:"{"}),n(r.span,{style:{color:"#CDD6F4"},children:"type"}),n(r.span,{style:{color:"#9399B2"},children:"}"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#F9E2AF"},children:" className"}),n(r.span,{style:{color:"#94E2D5"},children:"="}),n(r.span,{style:{color:"#9399B2"},children:"{"}),n(r.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"cn"}),n(r.span,{style:{color:"#CDD6F4"},children:"("})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#A6E3A1"},children:" '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(r.span,{style:{color:"#9399B2"},children:","})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#CDD6F4"},children:" className"}),n(r.span,{style:{color:"#9399B2"},children:","})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#CDD6F4"},children:" )"}),n(r.span,{style:{color:"#9399B2"},children:"}"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#F9E2AF"},children:" ref"}),n(r.span,{style:{color:"#94E2D5"},children:"="}),n(r.span,{style:{color:"#9399B2"},children:"{"}),n(r.span,{style:{color:"#CDD6F4"},children:"ref"}),n(r.span,{style:{color:"#9399B2"},children:"}"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#9399B2"},children:" {"}),n(r.span,{style:{color:"#94E2D5"},children:"..."}),n(r.span,{style:{color:"#CDD6F4"},children:"props"}),n(r.span,{style:{color:"#9399B2"},children:"}"})]}),"\n",n(r.span,{className:"line",children:n(r.span,{style:{color:"#94E2D5"},children:" />"})}),"\n",n(r.span,{className:"line",children:n(r.span,{style:{color:"#CDD6F4"},children:" )"})}),"\n",n(r.span,{className:"line",children:n(r.span,{style:{color:"#9399B2"},children:" },"})}),"\n",n(r.span,{className:"line",children:n(r.span,{style:{color:"#CDD6F4"},children:")"})}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#CDD6F4"},children:"Input"}),n(r.span,{style:{color:"#94E2D5"},children:"."}),n(r.span,{style:{color:"#CDD6F4"},children:"displayName "}),n(r.span,{style:{color:"#94E2D5"},children:"="}),n(r.span,{style:{color:"#A6E3A1"},children:" 'Input'"})]}),"\n",n(r.span,{className:"line",children:" "}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#CBA6F7"},children:"export"}),n(r.span,{style:{color:"#CBA6F7"},children:" interface"}),n(r.span,{style:{color:"#F9E2AF",fontStyle:"italic"},children:" InputCustomViewProps"}),n(r.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#CDD6F4"},children:" trigger"}),n(r.span,{style:{color:"#94E2D5"},children:":"}),n(r.span,{style:{color:"#F9E2AF",fontStyle:"italic"},children:" React"}),n(r.span,{style:{color:"#94E2D5"},children:"."}),n(r.span,{style:{color:"#F9E2AF",fontStyle:"italic"},children:"ComponentPropsWithoutRef"}),n(r.span,{style:{color:"#89DCEB"},children:"<"}),n(r.span,{style:{color:"#94E2D5"},children:"typeof"}),n(r.span,{style:{color:"#CDD6F4",fontStyle:"italic"},children:" Input"}),n(r.span,{style:{color:"#89DCEB"},children:">"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#CDD6F4"},children:" label"}),n(r.span,{style:{color:"#94E2D5"},children:"?:"}),n(r.span,{style:{color:"#F9E2AF",fontStyle:"italic"},children:" LabelType"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#CDD6F4"},children:" badge"}),n(r.span,{style:{color:"#94E2D5"},children:"?:"}),n(r.span,{style:{color:"#F9E2AF",fontStyle:"italic"},children:" React"}),n(r.span,{style:{color:"#94E2D5"},children:"."}),n(r.span,{style:{color:"#F9E2AF",fontStyle:"italic"},children:"ComponentPropsWithoutRef"}),n(r.span,{style:{color:"#89DCEB"},children:"<"}),n(r.span,{style:{color:"#94E2D5"},children:"typeof"}),n(r.span,{style:{color:"#CDD6F4",fontStyle:"italic"},children:" CommandShortcut"}),n(r.span,{style:{color:"#89DCEB"},children:">"})]}),"\n",n(r.span,{className:"line",children:n(r.span,{style:{color:"#9399B2"},children:"}"})}),"\n",n(r.span,{className:"line",children:" "}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#CBA6F7"},children:"const"}),n(r.span,{style:{color:"#FAB387"},children:" InputCustomView"}),n(r.span,{style:{color:"#94E2D5"},children:" ="}),n(r.span,{style:{color:"#CDD6F4"},children:" React"}),n(r.span,{style:{color:"#94E2D5"},children:"."}),n(r.span,{style:{color:"#CDD6F4"},children:"forwardRef"}),n(r.span,{style:{color:"#94E2D5"},children:"<"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#CDD6F4"},children:" React"}),n(r.span,{style:{color:"#94E2D5"},children:"."}),n(r.span,{style:{color:"#CDD6F4"},children:"ElementRef"}),n(r.span,{style:{color:"#94E2D5"},children:""}),n(r.span,{style:{color:"#9399B2"},children:","})]}),"\n",n(r.span,{className:"line",children:n(r.span,{style:{color:"#CDD6F4"},children:" InputCustomViewProps"})}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#94E2D5"},children:">"}),n(r.span,{style:{color:"#CDD6F4"},children:"("}),n(r.span,{style:{color:"#9399B2"},children:"({"}),n(r.span,{style:{color:"#EBA0AC",fontStyle:"italic"},children:" trigger"}),n(r.span,{style:{color:"#9399B2"},children:","}),n(r.span,{style:{color:"#EBA0AC",fontStyle:"italic"},children:" label"}),n(r.span,{style:{color:"#9399B2"},children:","}),n(r.span,{style:{color:"#EBA0AC",fontStyle:"italic"},children:" badge"}),n(r.span,{style:{color:"#9399B2"},children:" },"}),n(r.span,{style:{color:"#EBA0AC",fontStyle:"italic"},children:" ref"}),n(r.span,{style:{color:"#9399B2"},children:")"}),n(r.span,{style:{color:"#CBA6F7"},children:" =>"}),n(r.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#CBA6F7"},children:" const"}),n(r.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#CDD6F4"},children:" children"}),n(r.span,{style:{color:"#9399B2"},children:":"}),n(r.span,{style:{color:"#FAB387"},children:" badgeChildren"}),n(r.span,{style:{color:"#9399B2"},children:","})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#CDD6F4"},children:" className"}),n(r.span,{style:{color:"#9399B2"},children:":"}),n(r.span,{style:{color:"#FAB387"},children:" badgeClassName"}),n(r.span,{style:{color:"#9399B2"},children:","})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#94E2D5"},children:" ..."}),n(r.span,{style:{color:"#FAB387"},children:"badgeProps"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#9399B2"},children:" }"}),n(r.span,{style:{color:"#94E2D5"},children:" ="}),n(r.span,{style:{color:"#CDD6F4"},children:" badge "}),n(r.span,{style:{color:"#94E2D5"},children:"??"}),n(r.span,{style:{color:"#9399B2"},children:" {}"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#CBA6F7"},children:" const"}),n(r.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#CDD6F4"},children:" children"}),n(r.span,{style:{color:"#9399B2"},children:":"}),n(r.span,{style:{color:"#FAB387"},children:" labelChildren"}),n(r.span,{style:{color:"#9399B2"},children:","})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#CDD6F4"},children:" className"}),n(r.span,{style:{color:"#9399B2"},children:":"}),n(r.span,{style:{color:"#FAB387"},children:" labelClassName"}),n(r.span,{style:{color:"#9399B2"},children:","})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#94E2D5"},children:" ..."}),n(r.span,{style:{color:"#FAB387"},children:"labelProps"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#9399B2"},children:" }"}),n(r.span,{style:{color:"#94E2D5"},children:" ="}),n(r.span,{style:{color:"#CDD6F4"},children:" label "}),n(r.span,{style:{color:"#94E2D5"},children:"??"}),n(r.span,{style:{color:"#9399B2"},children:" {}"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#CBA6F7"},children:" const"}),n(r.span,{style:{color:"#9399B2"},children:" {"}),n(r.span,{style:{color:"#CDD6F4"},children:" className"}),n(r.span,{style:{color:"#9399B2"},children:":"}),n(r.span,{style:{color:"#FAB387"},children:" triggerClassName"}),n(r.span,{style:{color:"#9399B2"},children:","}),n(r.span,{style:{color:"#94E2D5"},children:" ..."}),n(r.span,{style:{color:"#FAB387"},children:"triggerProps"}),n(r.span,{style:{color:"#9399B2"},children:" }"}),n(r.span,{style:{color:"#94E2D5"},children:" ="}),n(r.span,{style:{color:"#CDD6F4"},children:" trigger "}),n(r.span,{style:{color:"#94E2D5"},children:"??"}),n(r.span,{style:{color:"#9399B2"},children:" {}"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#CBA6F7"},children:" return"}),n(r.span,{style:{color:"#CDD6F4"},children:" ("})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#94E2D5"},children:" <"}),n(r.span,{style:{color:"#89B4FA"},children:"div"}),n(r.span,{style:{color:"#F9E2AF"},children:" className"}),n(r.span,{style:{color:"#94E2D5"},children:"="}),n(r.span,{style:{color:"#A6E3A1"},children:"'flex flex-col'"}),n(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#94E2D5"},children:" <"}),n(r.span,{style:{color:"#F5C2E7"},children:"Tooltip"}),n(r.span,{style:{color:"#F9E2AF"},children:" delayDuration"}),n(r.span,{style:{color:"#94E2D5"},children:"="}),n(r.span,{style:{color:"#9399B2"},children:"{"}),n(r.span,{style:{color:"#FAB387"},children:"0"}),n(r.span,{style:{color:"#9399B2"},children:"}"}),n(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#94E2D5"},children:" <"}),n(r.span,{style:{color:"#F5C2E7"},children:"TooltipTrigger"}),n(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#94E2D5"},children:" <"}),n(r.span,{style:{color:"#F5C2E7"},children:"Input"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#F9E2AF"},children:" ref"}),n(r.span,{style:{color:"#94E2D5"},children:"="}),n(r.span,{style:{color:"#9399B2"},children:"{"}),n(r.span,{style:{color:"#CDD6F4"},children:"ref"}),n(r.span,{style:{color:"#9399B2"},children:"}"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#F9E2AF"},children:" className"}),n(r.span,{style:{color:"#94E2D5"},children:"="}),n(r.span,{style:{color:"#9399B2"},children:"{"}),n(r.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"cn"}),n(r.span,{style:{color:"#CDD6F4"},children:"("}),n(r.span,{style:{color:"#A6E3A1"},children:"'h-8 w-[150px] lg:w-[200px]'"}),n(r.span,{style:{color:"#9399B2"},children:","}),n(r.span,{style:{color:"#CDD6F4"},children:" triggerClassName)"}),n(r.span,{style:{color:"#9399B2"},children:"}"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#9399B2"},children:" {"}),n(r.span,{style:{color:"#94E2D5"},children:"..."}),n(r.span,{style:{color:"#CDD6F4"},children:"triggerProps"}),n(r.span,{style:{color:"#9399B2"},children:"}"})]}),"\n",n(r.span,{className:"line",children:n(r.span,{style:{color:"#94E2D5"},children:" />"})}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#94E2D5"},children:" <"}),n(r.span,{style:{color:"#F5C2E7"},children:"TooltipContent"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#F9E2AF"},children:" className"}),n(r.span,{style:{color:"#94E2D5"},children:"="}),n(r.span,{style:{color:"#9399B2"},children:"{"}),n(r.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"cn"}),n(r.span,{style:{color:"#CDD6F4"},children:"("})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#A6E3A1"},children:" 'flex items-center gap-2 z-50 justify-start'"}),n(r.span,{style:{color:"#9399B2"},children:","})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#CDD6F4"},children:" labelClassName"}),n(r.span,{style:{color:"#9399B2"},children:","})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#CDD6F4"},children:" )"}),n(r.span,{style:{color:"#9399B2"},children:"}"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#9399B2"},children:" {"}),n(r.span,{style:{color:"#94E2D5"},children:"..."}),n(r.span,{style:{color:"#CDD6F4"},children:"labelProps"}),n(r.span,{style:{color:"#9399B2"},children:"}"})]}),"\n",n(r.span,{className:"line",children:n(r.span,{style:{color:"#94E2D5"},children:" >"})}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#94E2D5"},children:" <"}),n(r.span,{style:{color:"#F5C2E7"},children:"CommandShortcut"}),n(r.span,{style:{color:"#F9E2AF"},children:" className"}),n(r.span,{style:{color:"#94E2D5"},children:"="}),n(r.span,{style:{color:"#A6E3A1"},children:"'text-[.8rem]'"}),n(r.span,{style:{color:"#9399B2"},children:" {"}),n(r.span,{style:{color:"#94E2D5"},children:"..."}),n(r.span,{style:{color:"#CDD6F4"},children:"badgeProps"}),n(r.span,{style:{color:"#9399B2"},children:"}"}),n(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#94E2D5"},children:" <"}),n(r.span,{style:{color:"#F5C2E7"},children:"Badge"}),n(r.span,{style:{color:"#F9E2AF"},children:" variant"}),n(r.span,{style:{color:"#94E2D5"},children:"="}),n(r.span,{style:{color:"#A6E3A1"},children:"'secondary'"}),n(r.span,{style:{color:"#F9E2AF"},children:" size"}),n(r.span,{style:{color:"#94E2D5"},children:"="}),n(r.span,{style:{color:"#A6E3A1"},children:"'sm'"}),n(r.span,{style:{color:"#F9E2AF"},children:" className"}),n(r.span,{style:{color:"#94E2D5"},children:"="}),n(r.span,{style:{color:"#A6E3A1"},children:"'p-0 px-2'"}),n(r.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#9399B2"},children:" {"}),n(r.span,{style:{color:"#CDD6F4"},children:"badgeChildren"}),n(r.span,{style:{color:"#9399B2"},children:"}"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#94E2D5"},children:" <"}),n(r.span,{style:{color:"#89B4FA"},children:"p"}),n(r.span,{style:{color:"#F9E2AF"},children:" className"}),n(r.span,{style:{color:"#94E2D5"},children:"="}),n(r.span,{style:{color:"#A6E3A1"},children:"'text-sm'"}),n(r.span,{style:{color:"#94E2D5"},children:">"}),n(r.span,{style:{color:"#9399B2"},children:"{"}),n(r.span,{style:{color:"#CDD6F4"},children:"labelChildren"}),n(r.span,{style:{color:"#9399B2"},children:"}"}),n(r.span,{style:{color:"#94E2D5"},children:""})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",n(r.span,{className:"line",children:n(r.span,{style:{color:"#CDD6F4"},children:" )"})}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#9399B2"},children:"}"}),n(r.span,{style:{color:"#CDD6F4"},children:")"})]}),"\n",n(r.span,{className:"line",children:" "}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#CDD6F4"},children:"InputCustomView"}),n(r.span,{style:{color:"#94E2D5"},children:"."}),n(r.span,{style:{color:"#CDD6F4"},children:"displayName "}),n(r.span,{style:{color:"#94E2D5"},children:"="}),n(r.span,{style:{color:"#A6E3A1"},children:" 'InputWithLabel'"})]}),"\n",n(r.span,{className:"line",children:" "}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#CBA6F7"},children:"export"}),n(r.span,{style:{color:"#9399B2"},children:" {"}),n(r.span,{style:{color:"#CDD6F4"},children:" Input"}),n(r.span,{style:{color:"#9399B2"},children:","}),n(r.span,{style:{color:"#CDD6F4"},children:" InputCustomView "}),n(r.span,{style:{color:"#9399B2"},children:"}"})]})]})}),n(r.pre,{"data-language":"tsx","data-theme":"light",__rawString__:"// input.tsx\n \nimport * as React from 'react'\n \nimport { cn } from '@gentelduck/libs/cn'\nimport { Badge } from '../badge'\nimport { LabelType } from '../button'\nimport { CommandShortcut } from '../command'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip'\n \nexport interface InputProps\n extends React.InputHTMLAttributes {}\n \nconst Input = React.forwardRef(\n ({ className, type, ...props }, ref) => {\n return (\n \n )\n },\n)\nInput.displayName = 'Input'\n \nexport interface InputCustomViewProps {\n trigger: React.ComponentPropsWithoutRef\n label?: LabelType\n badge?: React.ComponentPropsWithoutRef\n}\n \nconst InputCustomView = React.forwardRef<\n React.ElementRef,\n InputCustomViewProps\n>(({ trigger, label, badge }, ref) => {\n const {\n children: badgeChildren,\n className: badgeClassName,\n ...badgeProps\n } = badge ?? {}\n const {\n children: labelChildren,\n className: labelClassName,\n ...labelProps\n } = label ?? {}\n const { className: triggerClassName, ...triggerProps } = trigger ?? {}\n return (\n

\n \n \n \n \n \n \n \n {badgeChildren}\n \n \n

{labelChildren}

\n \n \n

\n )\n})\n \nInputCustomView.displayName = 'InputWithLabel'\n \nexport { Input, InputCustomView }",children:e(r.code,{"data-language":"tsx","data-theme":"light",children:[n(r.span,{className:"line",children:n(r.span,{style:{color:"#6A737D"},children:"// input.tsx"})}),"\n",n(r.span,{className:"line",children:" "}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#D73A49"},children:"import"}),n(r.span,{style:{color:"#005CC5"},children:" *"}),n(r.span,{style:{color:"#D73A49"},children:" as"}),n(r.span,{style:{color:"#24292E"},children:" React "}),n(r.span,{style:{color:"#D73A49"},children:"from"}),n(r.span,{style:{color:"#032F62"},children:" 'react'"})]}),"\n",n(r.span,{className:"line",children:" "}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#D73A49"},children:"import"}),n(r.span,{style:{color:"#24292E"},children:" { cn } "}),n(r.span,{style:{color:"#D73A49"},children:"from"}),n(r.span,{style:{color:"#032F62"},children:" '@gentelduck/libs/cn'"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#D73A49"},children:"import"}),n(r.span,{style:{color:"#24292E"},children:" { Badge } "}),n(r.span,{style:{color:"#D73A49"},children:"from"}),n(r.span,{style:{color:"#032F62"},children:" '../badge'"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#D73A49"},children:"import"}),n(r.span,{style:{color:"#24292E"},children:" { LabelType } "}),n(r.span,{style:{color:"#D73A49"},children:"from"}),n(r.span,{style:{color:"#032F62"},children:" '../button'"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#D73A49"},children:"import"}),n(r.span,{style:{color:"#24292E"},children:" { CommandShortcut } "}),n(r.span,{style:{color:"#D73A49"},children:"from"}),n(r.span,{style:{color:"#032F62"},children:" '../command'"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#D73A49"},children:"import"}),n(r.span,{style:{color:"#24292E"},children:" { Tooltip, TooltipContent, TooltipTrigger } "}),n(r.span,{style:{color:"#D73A49"},children:"from"}),n(r.span,{style:{color:"#032F62"},children:" '../tooltip'"})]}),"\n",n(r.span,{className:"line",children:" "}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#D73A49"},children:"export"}),n(r.span,{style:{color:"#D73A49"},children:" interface"}),n(r.span,{style:{color:"#6F42C1"},children:" InputProps"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#D73A49"},children:" extends"}),n(r.span,{style:{color:"#6F42C1"},children:" React"}),n(r.span,{style:{color:"#24292E"},children:"."}),n(r.span,{style:{color:"#6F42C1"},children:"InputHTMLAttributes"}),n(r.span,{style:{color:"#24292E"},children:"<"}),n(r.span,{style:{color:"#6F42C1"},children:"HTMLInputElement"}),n(r.span,{style:{color:"#24292E"},children:"> {}"})]}),"\n",n(r.span,{className:"line",children:" "}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#D73A49"},children:"const"}),n(r.span,{style:{color:"#005CC5"},children:" Input"}),n(r.span,{style:{color:"#D73A49"},children:" ="}),n(r.span,{style:{color:"#24292E"},children:" React."}),n(r.span,{style:{color:"#6F42C1"},children:"forwardRef"}),n(r.span,{style:{color:"#24292E"},children:"<"}),n(r.span,{style:{color:"#6F42C1"},children:"HTMLInputElement"}),n(r.span,{style:{color:"#24292E"},children:", "}),n(r.span,{style:{color:"#6F42C1"},children:"InputProps"}),n(r.span,{style:{color:"#24292E"},children:">("})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#24292E"},children:" ({ "}),n(r.span,{style:{color:"#E36209"},children:"className"}),n(r.span,{style:{color:"#24292E"},children:", "}),n(r.span,{style:{color:"#E36209"},children:"type"}),n(r.span,{style:{color:"#24292E"},children:", "}),n(r.span,{style:{color:"#D73A49"},children:"..."}),n(r.span,{style:{color:"#E36209"},children:"props"}),n(r.span,{style:{color:"#24292E"},children:" }, "}),n(r.span,{style:{color:"#E36209"},children:"ref"}),n(r.span,{style:{color:"#24292E"},children:") "}),n(r.span,{style:{color:"#D73A49"},children:"=>"}),n(r.span,{style:{color:"#24292E"},children:" {"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#D73A49"},children:" return"}),n(r.span,{style:{color:"#24292E"},children:" ("})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#24292E"},children:" <"}),n(r.span,{style:{color:"#22863A"},children:"input"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#6F42C1"},children:" type"}),n(r.span,{style:{color:"#D73A49"},children:"="}),n(r.span,{style:{color:"#24292E"},children:"{type}"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#6F42C1"},children:" className"}),n(r.span,{style:{color:"#D73A49"},children:"="}),n(r.span,{style:{color:"#24292E"},children:"{"}),n(r.span,{style:{color:"#6F42C1"},children:"cn"}),n(r.span,{style:{color:"#24292E"},children:"("})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#032F62"},children:" '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(r.span,{style:{color:"#24292E"},children:","})]}),"\n",n(r.span,{className:"line",children:n(r.span,{style:{color:"#24292E"},children:" className,"})}),"\n",n(r.span,{className:"line",children:n(r.span,{style:{color:"#24292E"},children:" )}"})}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#6F42C1"},children:" ref"}),n(r.span,{style:{color:"#D73A49"},children:"="}),n(r.span,{style:{color:"#24292E"},children:"{ref}"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#24292E"},children:" {"}),n(r.span,{style:{color:"#D73A49"},children:"..."}),n(r.span,{style:{color:"#24292E"},children:"props}"})]}),"\n",n(r.span,{className:"line",children:n(r.span,{style:{color:"#24292E"},children:" />"})}),"\n",n(r.span,{className:"line",children:n(r.span,{style:{color:"#24292E"},children:" )"})}),"\n",n(r.span,{className:"line",children:n(r.span,{style:{color:"#24292E"},children:" },"})}),"\n",n(r.span,{className:"line",children:n(r.span,{style:{color:"#24292E"},children:")"})}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#24292E"},children:"Input.displayName "}),n(r.span,{style:{color:"#D73A49"},children:"="}),n(r.span,{style:{color:"#032F62"},children:" 'Input'"})]}),"\n",n(r.span,{className:"line",children:" "}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#D73A49"},children:"export"}),n(r.span,{style:{color:"#D73A49"},children:" interface"}),n(r.span,{style:{color:"#6F42C1"},children:" InputCustomViewProps"}),n(r.span,{style:{color:"#24292E"},children:" {"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#E36209"},children:" trigger"}),n(r.span,{style:{color:"#D73A49"},children:":"}),n(r.span,{style:{color:"#6F42C1"},children:" React"}),n(r.span,{style:{color:"#24292E"},children:"."}),n(r.span,{style:{color:"#6F42C1"},children:"ComponentPropsWithoutRef"}),n(r.span,{style:{color:"#24292E"},children:"<"}),n(r.span,{style:{color:"#D73A49"},children:"typeof"}),n(r.span,{style:{color:"#24292E"},children:" Input>"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#E36209"},children:" label"}),n(r.span,{style:{color:"#D73A49"},children:"?:"}),n(r.span,{style:{color:"#6F42C1"},children:" LabelType"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#E36209"},children:" badge"}),n(r.span,{style:{color:"#D73A49"},children:"?:"}),n(r.span,{style:{color:"#6F42C1"},children:" React"}),n(r.span,{style:{color:"#24292E"},children:"."}),n(r.span,{style:{color:"#6F42C1"},children:"ComponentPropsWithoutRef"}),n(r.span,{style:{color:"#24292E"},children:"<"}),n(r.span,{style:{color:"#D73A49"},children:"typeof"}),n(r.span,{style:{color:"#24292E"},children:" CommandShortcut>"})]}),"\n",n(r.span,{className:"line",children:n(r.span,{style:{color:"#24292E"},children:"}"})}),"\n",n(r.span,{className:"line",children:" "}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#D73A49"},children:"const"}),n(r.span,{style:{color:"#005CC5"},children:" InputCustomView"}),n(r.span,{style:{color:"#D73A49"},children:" ="}),n(r.span,{style:{color:"#24292E"},children:" React.forwardRef"}),n(r.span,{style:{color:"#D73A49"},children:"<"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#24292E"},children:" React.ElementRef"}),n(r.span,{style:{color:"#D73A49"},children:""}),n(r.span,{style:{color:"#24292E"},children:","})]}),"\n",n(r.span,{className:"line",children:n(r.span,{style:{color:"#24292E"},children:" InputCustomViewProps"})}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#D73A49"},children:">"}),n(r.span,{style:{color:"#24292E"},children:"(({ "}),n(r.span,{style:{color:"#E36209"},children:"trigger"}),n(r.span,{style:{color:"#24292E"},children:", "}),n(r.span,{style:{color:"#E36209"},children:"label"}),n(r.span,{style:{color:"#24292E"},children:", "}),n(r.span,{style:{color:"#E36209"},children:"badge"}),n(r.span,{style:{color:"#24292E"},children:" }, "}),n(r.span,{style:{color:"#E36209"},children:"ref"}),n(r.span,{style:{color:"#24292E"},children:") "}),n(r.span,{style:{color:"#D73A49"},children:"=>"}),n(r.span,{style:{color:"#24292E"},children:" {"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#D73A49"},children:" const"}),n(r.span,{style:{color:"#24292E"},children:" {"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#E36209"},children:" children"}),n(r.span,{style:{color:"#24292E"},children:": "}),n(r.span,{style:{color:"#005CC5"},children:"badgeChildren"}),n(r.span,{style:{color:"#24292E"},children:","})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#E36209"},children:" className"}),n(r.span,{style:{color:"#24292E"},children:": "}),n(r.span,{style:{color:"#005CC5"},children:"badgeClassName"}),n(r.span,{style:{color:"#24292E"},children:","})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#D73A49"},children:" ..."}),n(r.span,{style:{color:"#005CC5"},children:"badgeProps"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#24292E"},children:" } "}),n(r.span,{style:{color:"#D73A49"},children:"="}),n(r.span,{style:{color:"#24292E"},children:" badge "}),n(r.span,{style:{color:"#D73A49"},children:"??"}),n(r.span,{style:{color:"#24292E"},children:" {}"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#D73A49"},children:" const"}),n(r.span,{style:{color:"#24292E"},children:" {"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#E36209"},children:" children"}),n(r.span,{style:{color:"#24292E"},children:": "}),n(r.span,{style:{color:"#005CC5"},children:"labelChildren"}),n(r.span,{style:{color:"#24292E"},children:","})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#E36209"},children:" className"}),n(r.span,{style:{color:"#24292E"},children:": "}),n(r.span,{style:{color:"#005CC5"},children:"labelClassName"}),n(r.span,{style:{color:"#24292E"},children:","})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#D73A49"},children:" ..."}),n(r.span,{style:{color:"#005CC5"},children:"labelProps"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#24292E"},children:" } "}),n(r.span,{style:{color:"#D73A49"},children:"="}),n(r.span,{style:{color:"#24292E"},children:" label "}),n(r.span,{style:{color:"#D73A49"},children:"??"}),n(r.span,{style:{color:"#24292E"},children:" {}"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#D73A49"},children:" const"}),n(r.span,{style:{color:"#24292E"},children:" { "}),n(r.span,{style:{color:"#E36209"},children:"className"}),n(r.span,{style:{color:"#24292E"},children:": "}),n(r.span,{style:{color:"#005CC5"},children:"triggerClassName"}),n(r.span,{style:{color:"#24292E"},children:", "}),n(r.span,{style:{color:"#D73A49"},children:"..."}),n(r.span,{style:{color:"#005CC5"},children:"triggerProps"}),n(r.span,{style:{color:"#24292E"},children:" } "}),n(r.span,{style:{color:"#D73A49"},children:"="}),n(r.span,{style:{color:"#24292E"},children:" trigger "}),n(r.span,{style:{color:"#D73A49"},children:"??"}),n(r.span,{style:{color:"#24292E"},children:" {}"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#D73A49"},children:" return"}),n(r.span,{style:{color:"#24292E"},children:" ("})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#24292E"},children:" <"}),n(r.span,{style:{color:"#22863A"},children:"div"}),n(r.span,{style:{color:"#6F42C1"},children:" className"}),n(r.span,{style:{color:"#D73A49"},children:"="}),n(r.span,{style:{color:"#032F62"},children:"'flex flex-col'"}),n(r.span,{style:{color:"#24292E"},children:">"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#24292E"},children:" <"}),n(r.span,{style:{color:"#005CC5"},children:"Tooltip"}),n(r.span,{style:{color:"#6F42C1"},children:" delayDuration"}),n(r.span,{style:{color:"#D73A49"},children:"="}),n(r.span,{style:{color:"#24292E"},children:"{"}),n(r.span,{style:{color:"#005CC5"},children:"0"}),n(r.span,{style:{color:"#24292E"},children:"}>"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#24292E"},children:" <"}),n(r.span,{style:{color:"#005CC5"},children:"TooltipTrigger"}),n(r.span,{style:{color:"#24292E"},children:">"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#24292E"},children:" <"}),n(r.span,{style:{color:"#005CC5"},children:"Input"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#6F42C1"},children:" ref"}),n(r.span,{style:{color:"#D73A49"},children:"="}),n(r.span,{style:{color:"#24292E"},children:"{ref}"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#6F42C1"},children:" className"}),n(r.span,{style:{color:"#D73A49"},children:"="}),n(r.span,{style:{color:"#24292E"},children:"{"}),n(r.span,{style:{color:"#6F42C1"},children:"cn"}),n(r.span,{style:{color:"#24292E"},children:"("}),n(r.span,{style:{color:"#032F62"},children:"'h-8 w-[150px] lg:w-[200px]'"}),n(r.span,{style:{color:"#24292E"},children:", triggerClassName)}"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#24292E"},children:" {"}),n(r.span,{style:{color:"#D73A49"},children:"..."}),n(r.span,{style:{color:"#24292E"},children:"triggerProps}"})]}),"\n",n(r.span,{className:"line",children:n(r.span,{style:{color:"#24292E"},children:" />"})}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#24292E"},children:" "})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#24292E"},children:" <"}),n(r.span,{style:{color:"#005CC5"},children:"TooltipContent"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#6F42C1"},children:" className"}),n(r.span,{style:{color:"#D73A49"},children:"="}),n(r.span,{style:{color:"#24292E"},children:"{"}),n(r.span,{style:{color:"#6F42C1"},children:"cn"}),n(r.span,{style:{color:"#24292E"},children:"("})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#032F62"},children:" 'flex items-center gap-2 z-50 justify-start'"}),n(r.span,{style:{color:"#24292E"},children:","})]}),"\n",n(r.span,{className:"line",children:n(r.span,{style:{color:"#24292E"},children:" labelClassName,"})}),"\n",n(r.span,{className:"line",children:n(r.span,{style:{color:"#24292E"},children:" )}"})}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#24292E"},children:" {"}),n(r.span,{style:{color:"#D73A49"},children:"..."}),n(r.span,{style:{color:"#24292E"},children:"labelProps}"})]}),"\n",n(r.span,{className:"line",children:n(r.span,{style:{color:"#24292E"},children:" >"})}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#24292E"},children:" <"}),n(r.span,{style:{color:"#005CC5"},children:"CommandShortcut"}),n(r.span,{style:{color:"#6F42C1"},children:" className"}),n(r.span,{style:{color:"#D73A49"},children:"="}),n(r.span,{style:{color:"#032F62"},children:"'text-[.8rem]'"}),n(r.span,{style:{color:"#24292E"},children:" {"}),n(r.span,{style:{color:"#D73A49"},children:"..."}),n(r.span,{style:{color:"#24292E"},children:"badgeProps}>"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#24292E"},children:" <"}),n(r.span,{style:{color:"#005CC5"},children:"Badge"}),n(r.span,{style:{color:"#6F42C1"},children:" variant"}),n(r.span,{style:{color:"#D73A49"},children:"="}),n(r.span,{style:{color:"#032F62"},children:"'secondary'"}),n(r.span,{style:{color:"#6F42C1"},children:" size"}),n(r.span,{style:{color:"#D73A49"},children:"="}),n(r.span,{style:{color:"#032F62"},children:"'sm'"}),n(r.span,{style:{color:"#6F42C1"},children:" className"}),n(r.span,{style:{color:"#D73A49"},children:"="}),n(r.span,{style:{color:"#032F62"},children:"'p-0 px-2'"}),n(r.span,{style:{color:"#24292E"},children:">"})]}),"\n",n(r.span,{className:"line",children:n(r.span,{style:{color:"#24292E"},children:" {badgeChildren}"})}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#24292E"},children:" "})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#24292E"},children:" "})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#24292E"},children:" <"}),n(r.span,{style:{color:"#22863A"},children:"p"}),n(r.span,{style:{color:"#6F42C1"},children:" className"}),n(r.span,{style:{color:"#D73A49"},children:"="}),n(r.span,{style:{color:"#032F62"},children:"'text-sm'"}),n(r.span,{style:{color:"#24292E"},children:">{labelChildren}"})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#24292E"},children:" "})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#24292E"},children:" "})]}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#24292E"},children:" "})]}),"\n",n(r.span,{className:"line",children:n(r.span,{style:{color:"#24292E"},children:" )"})}),"\n",n(r.span,{className:"line",children:n(r.span,{style:{color:"#24292E"},children:"})"})}),"\n",n(r.span,{className:"line",children:" "}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#24292E"},children:"InputCustomView.displayName "}),n(r.span,{style:{color:"#D73A49"},children:"="}),n(r.span,{style:{color:"#032F62"},children:" 'InputWithLabel'"})]}),"\n",n(r.span,{className:"line",children:" "}),"\n",e(r.span,{className:"line",children:[n(r.span,{style:{color:"#D73A49"},children:"export"}),n(r.span,{style:{color:"#24292E"},children:" { Input, InputCustomView }"})]})]})})]})]}),n(o,{children:"Update the import paths to match your project setup."})]})})]}),"\n",e(r.h2,{id:"usage",children:[n(r.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:n(r.span,{className:"icon icon-link"})}),"Usage"]}),"\n",e(r.div,{"data-rehype-pretty-code-fragment":"",children:[n(r.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:'import { Input } from "@/components/ui/input"',children:n(r.code,{"data-language":"tsx","data-theme":"dark",children:e(r.span,{className:"line",children:[n(r.span,{style:{color:"#CBA6F7"},children:"import"}),n(r.span,{style:{color:"#9399B2"},children:" {"}),n(r.span,{style:{color:"#CDD6F4"},children:" Input "}),n(r.span,{style:{color:"#9399B2"},children:"}"}),n(r.span,{style:{color:"#CBA6F7"},children:" from"}),n(r.span,{style:{color:"#A6E3A1"},children:' "@/components/ui/input"'})]})})}),n(r.pre,{"data-language":"tsx","data-theme":"light",__rawString__:'import { Input } from "@/components/ui/input"',children:n(r.code,{"data-language":"tsx","data-theme":"light",children:e(r.span,{className:"line",children:[n(r.span,{style:{color:"#D73A49"},children:"import"}),n(r.span,{style:{color:"#24292E"},children:" { Input } "}),n(r.span,{style:{color:"#D73A49"},children:"from"}),n(r.span,{style:{color:"#032F62"},children:' "@/components/ui/input"'})]})})})]}),"\n",e(r.div,{"data-rehype-pretty-code-fragment":"",children:[n(r.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:"",children:n(r.code,{"data-language":"tsx","data-theme":"dark",children:e(r.span,{className:"line",children:[n(r.span,{style:{color:"#94E2D5"},children:"<"}),n(r.span,{style:{color:"#F5C2E7"},children:"Input"}),n(r.span,{style:{color:"#94E2D5"},children:" />"})]})})}),n(r.pre,{"data-language":"tsx","data-theme":"light",__rawString__:"",children:n(r.code,{"data-language":"tsx","data-theme":"light",children:e(r.span,{className:"line",children:[n(r.span,{style:{color:"#24292E"},children:"<"}),n(r.span,{style:{color:"#005CC5"},children:"Input"}),n(r.span,{style:{color:"#24292E"},children:" />"})]})})})]}),"\n",e(r.h2,{id:"examples",children:[n(r.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#examples",children:n(r.span,{className:"icon icon-link"})}),"Examples"]}),"\n",e(r.h3,{id:"default",children:[n(r.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#default",children:n(r.span,{className:"icon icon-link"})}),"Default"]}),"\n",n(c,{name:"input-demo",className:"[&_input]:max-w-xs",description:"A form input component."}),"\n",e(r.h3,{id:"file",children:[n(r.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#file",children:n(r.span,{className:"icon icon-link"})}),"File"]}),"\n",n(c,{name:"input-file",className:"[&_input]:max-w-xs",description:"A file input component."}),"\n",e(r.h3,{id:"disabled",children:[n(r.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#disabled",children:n(r.span,{className:"icon icon-link"})}),"Disabled"]}),"\n",n(c,{name:"input-disabled",className:"[&_input]:max-w-xs",description:"A disabled input component."}),"\n",e(r.h3,{id:"with-label",children:[n(r.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#with-label",children:n(r.span,{className:"icon icon-link"})}),"With Label"]}),"\n",n(c,{name:"input-with-label",className:"[&_input]:max-w-xs",description:"An input component with a label."}),"\n",e(r.h3,{id:"with-button",children:[n(r.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#with-button",children:n(r.span,{className:"icon icon-link"})}),"With Button"]}),"\n",n(c,{name:"input-with-button",className:"[&_input]:max-w-xs",description:"An input component with a button."}),"\n",e(r.h3,{id:"form",children:[n(r.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#form",children:n(r.span,{className:"icon icon-link"})}),"Form"]}),"\n",n(c,{name:"input-form"})]})}return{default:function(l={}){const{wrapper:e}=l.components||{};return e?n(e,{...l,children:n(_createMdxContent,{...l})}):_createMdxContent(l)}};function _missingMdxReference(l,n){throw new Error("Expected "+(n?"component":"object")+" `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}