https://tanstack.com/assets/ds.inputs-BabAa6c7.js

1import{m as o,p as e}from"./tanstack-query-Cs_IuARx.js";import{Sa as t,Ta as l}from"./index-AFL34nB4.js";import{i as a,r as c,t as r}from"./DsKit-BelbpN2s.js";function d(){return o(c,{title:"Inputs",description:"Text inputs with consistent borders and dark-mode surfaces. Focus is a single neutral border-color change — no ring. Source: src/ui/FormInput.tsx.",children:[e(a,{title:"Default",description:"Forwards all native input props (type, value, placeholder, etc.).",children:e(r,{className:"block max-w-sm",code:'<FormInput placeholder="[email protected]" type="email" />',children:e(t,{placeholder:"[email protected]",type:"email"})})}),e(a,{title:"Focus",description:"Focus is a single neutral border-color change — the border lifts to the strong neutral token, with no ring or accent.",children:e(r,{className:"block max-w-sm",code:'<FormInput placeholder="Focus me" />',children:e(t,{placeholder:"Focus me"})})}),e(a,{title:"With a label & disabled",description:"Compose with a label element; supports the native disabled state.",children:o(r,{className:"block max-w-sm space-y-4",code:`<label htmlFor="project-name" className="block space-y-1.5">
2  <span className="text-sm font-medium">Project name</span>
3  <FormInput id="project-name" placeholder="my-app" />
4</label>
5<FormInput disabled value="Disabled" readOnly />`,children:[o("label",{htmlFor:"project-name",className:"block space-y-1.5",children:[e("span",{className:"text-sm font-medium text-gray-700 dark:text-gray-300",children:"Project name"}),e(t,{id:"project-name",placeholder:"my-app"})]}),e(t,{disabled:!0,value:"Disabled",readOnly:!0})]})}),e(a,{title:"Progressive search",description:"Starts as a compact search action. Activating it reveals the field from the icon and moves focus directly into the input. Escape closes it.",children:e(r,{className:"block min-h-24",code:'<SearchInput progressive placeholder="Search documentation…" />',children:e(l,{progressive:!0,placeholder:"Search documentation…"})})}),e(a,{title:"Persistent search",description:"Use when search is a primary task and should remain visible.",children:e(r,{className:"block max-w-md",code:'<SearchInput placeholder="Search documentation…" />',children:e(l,{placeholder:"Search documentation…"})})}),e(a,{title:"Large search target",description:"A larger, highly visible target for prominent search experiences and touch-heavy layouts.",children:e(r,{className:"block max-w-xl",code:'<SearchInput size="large" placeholder="What are you looking for?" />',children:e(l,{size:"large",placeholder:"What are you looking for?"})})})]})}export{d as component};