// @ts-nocheck import { createSignal } from "solid-js" import { Field as FieldV2 } from "./field-v2" import { InlineInputV2 } from "./inline-input-v2" const docs = `### Overview Single-line field with an inline prefix label, vertical divider, and the same states as TextInput v2. ### API - \`prefix\`: Inline label in the leading segment (required). - \`labelWidth\`: Fixed prefix width (px number or CSS length). Omit for fit-content. - Forwards native \`input\` props (\`value\`, \`defaultValue\`, \`placeholder\`, \`disabled\`, etc.). - \`showCopyButton\`, \`copyLabel\`, \`onCopyClick\`: Optional trailing copy control. - \`invalid\`: Error outline and danger text color. - \`appearance\`: \`"base"\` (28px) or \`"large"\` (32px). - \`numeric\`: Tabular numerals on prefix and value. ### States - **Hover**, **Focus**, **Invalid**, **Disabled** — same as TextInput v2 on the outer shell. ### Field Compose with \`Field\` for label, helper prefix/suffix, and tooltip — see the **Field** story. ` export default { title: "UI V2/InlineInput", id: "components-inline-input-v2", component: InlineInputV2, tags: ["autodocs"], parameters: { frameHeight: "400px", frameBackground: "#fff", docs: { description: { component: docs, }, }, }, args: { prefix: "Label", placeholder: "Text", showCopyButton: true, disabled: false, invalid: false, appearance: "base", }, argTypes: { prefix: { control: "text", }, labelWidth: { control: "number", }, appearance: { control: "select", options: ["base", "large"], }, showCopyButton: { control: "boolean", }, disabled: { control: "boolean", }, invalid: { control: "boolean", }, placeholder: { control: "text", }, }, } export const Playground = {} export const Controlled = { render: () => { const [value, setValue] = createSignal("42") return (

setValue(e.currentTarget.value)} placeholder="0.00" numeric />

Value: {value()}

) }, } export const Appearances = { render: () => (

), } export const Field = { parameters: { frameHeight: "500px" }, render: () => (

Label Prefix Suffix Label Prefix Suffix

), } export const States = { render: () => (

), }