{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "input-group", "title": "Input group", "description": "Ours in roman, yours in italic, on one line. The accent draws only under the part you type. Or your figure stands large with our words stacked beside it, or an arrow leads from your words to the action.", "registryDependencies": [ "https://thedirectors.agency/ui/r/0nlytype.json", "https://thedirectors.agency/ui/r/button.json", "https://thedirectors.agency/ui/r/field.json" ], "files": [ { "path": "registry/0nlytype/ui/input-group.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { useComposedRefs } from \"@/lib/0nlytype/refs\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { useFieldControl, useLineOrigin } from \"@/components/ui/field\"\n\n/** What is typed in the group, so our words can agree with it. */\nconst GroupValue = React.createContext(\"\")\n\ntype InputGroupProps = React.ComponentProps<\"div\"> & {\n /**\n * How ours and yours share the line. line: prefix, your words, suffix, in reading order. legend: your figure large,\n * with our words stacked beside it in two small lines. arrow: a hairline arrow runs from your words to the action,\n * and gives way as you write.\n */\n variant?: \"line\" | \"legend\" | \"arrow\"\n /** Pins a state for documentation (\"focus\"); set on the root. */\n \"data-force\"?: string\n}\n\n/** Ours and yours on one line. Put text, the input and an action inside; the accent draws only under your part. */\nfunction InputGroup({ className, variant = \"line\", onInput, onPointerDown, children, ref: forwardedRef, ...props }: InputGroupProps) {\n const root = React.useRef(null)\n const composedRef = useComposedRefs(root, forwardedRef)\n const [value, setValue] = React.useState(\"\")\n React.useLayoutEffect(() => setValue(root.current?.querySelector(\"input\")?.value ?? \"\"), [])\n return (\n {\n onInput?.(e)\n if (e.target instanceof HTMLInputElement) setValue(e.target.value)\n }}\n // The whole line is the field: a touch on its empty part writes in the input.\n onPointerDown={(e) => {\n onPointerDown?.(e)\n const input = e.currentTarget.querySelector(\"input\")\n if (e.target === e.currentTarget && input && !input.disabled) {\n e.preventDefault()\n input.focus()\n }\n }}\n {...props}\n >\n {children}\n \n )\n}\n\ntype InputGroupTextProps = React.ComponentProps<\"span\"> & {\n /** Forms of a unit that agree with the number typed, by plural category: { one: \"night\", other: \"nights\" }. */\n agree?: Partial> & { other: string }\n}\n\n/** What we supply: a prefix or suffix, upright in pencil. With `agree`, it agrees with your number. */\nfunction InputGroupText({ className, agree, children, ...props }: InputGroupTextProps) {\n const value = React.useContext(GroupValue)\n // Nothing typed (and the server's render) takes \"other\", so the page's locale can't change the first paint.\n const form = value ? new Intl.PluralRules().select(Number(value.replace(/[^\\d.-]/g, \"\")) || 0) : \"other\"\n const unit = agree ? (agree[form] ?? agree.other) : null\n return (\n \n {unit}\n {unit && children ? \" \" : null}\n {children}\n \n )\n}\n\n/** What you type, in italic. Takes the Field's id, hint and error when there is one. */\nfunction InputGroupInput({ className, ...props }: React.ComponentProps<\"input\">) {\n const field = useFieldControl()\n const origin = useLineOrigin((el) => el.closest(\".ot-input-group\") ?? el, props)\n return (\n \n )\n}\n\n/** An action at the end of the line, set as a quiet Button. */\nfunction InputGroupButton({ className, variant = \"quiet\", ...props }: React.ComponentProps) {\n return