1d:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsPage"] 1e:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsTitle"] 1f:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsDescription"] 20:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsBody"] 21:I[26731,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"ComponentPreview"] 22:I[25325,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"CodeTabs"] 23:T1055,import type { ComponentProps, ReactElement, ReactNode } from "react"; import { cn } from "@/registry/tier-2-primitives/lib/cn"; import { cva, disabledState, type VariantProps } from "@/registry/tier-2-primitives/lib/cva"; import { IconSlot } from "@/registry/tier-2-primitives/icon-slot"; /** * Input. * * FOCUS IS DIFFERENT HERE, AND ON PURPOSE * Buttons get a 2px outline at 2px offset. A field already has a border, so * an outline would double it — fields get a brand border plus a soft 3px * ring instead. Both are documented on the accessibility page; neither is a * preference. * * The wrapper carries the border so an icon or a prefix can sit inside the box * and still be inside the focus treatment. */ const inputWrapper = cva( cn( "flex items-center gap-2.5 font-ui text-text-primary", "rounded-md border bg-surface-raised", "transition-[border-color,box-shadow] motion-instant", "has-disabled:cursor-not-allowed has-disabled:bg-surface-sunken has-disabled:opacity-70", ), { variants: { size: { sm: "h-[var(--control-h-sm)] px-3 text-label", md: "h-[var(--control-h-md)] px-3.5 text-body", lg: "h-[var(--control-h-lg)] px-4 text-body-lg", }, invalid: { true: "border-danger focus-within:border-danger", false: "border-border-subtle hover:border-border-strong focus-within:border-border-accent focus-within:shadow-focus", }, }, defaultVariants: { size: "md", invalid: false }, }, ); export type InputProps = Omit, "size" | "prefix"> & VariantProps & { /** * A leading icon. Decorative — it clarifies the field, it doesn't name it. * The label names it. */ icon?: ReactElement; /** Static text inside the box: "₹", "+91", "woohl.com/". */ prefix?: ReactNode; /** Static text or a control at the end: a unit, a clear button. */ suffix?: ReactNode; className?: string; /** Classes for the outer box rather than the `` itself. */ wrapperClassName?: string; }; export function Input({ size, icon, prefix, suffix, className, wrapperClassName, disabled, "aria-invalid": ariaInvalid, ...props }: InputProps) { const invalid = ariaInvalid === true || ariaInvalid === "true"; return (

{icon && } {prefix && {prefix}} {suffix && {suffix}}

); } export type TextareaProps = ComponentProps<"textarea">; /** * Textarea. * * Resizes vertically only — a horizontally resizable textarea breaks the * measure, and the measure is a typographic rule, not a layout accident. */ export function Textarea({ className, rows = 4, "aria-invalid": ariaInvalid, ...props }: TextareaProps) { const invalid = ariaInvalid === true || ariaInvalid === "true"; return (

);
}

export { inputWrapper };
24:T7499,<pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e" tabindex="0"><code>import type { ComponentProps, ReactElement, ReactNode } from "react";
import { cn } from "@/registry/tier-2-primitives/lib/cn";
import { cva, disabledState, type VariantProps } from "@/registry/tier-2-primitives/lib/cva";
import { IconSlot } from "@/registry/tier-2-primitives/icon-slot";

/**
 * Input.
 *
 * FOCUS IS DIFFERENT HERE, AND ON PURPOSE
 * Buttons get a 2px outline at 2px offset. A field already has a border, so
 * an outline would double it — fields get a brand border plus a soft 3px
 * ring instead. Both are documented on the accessibility page; neither is a
 * preference.
 *
 * The wrapper carries the border so an icon or a prefix can sit inside the box
 * and still be inside the focus treatment.
 */
const inputWrapper = cva(
 cn(
 "flex items-center gap-2.5 font-ui text-text-primary",
 "rounded-md border bg-surface-raised",
 "transition-[border-color,box-shadow] motion-instant",
 "has-disabled:cursor-not-allowed has-disabled:bg-surface-sunken has-disabled:opacity-70",
 ),
 {
 variants: {
 size: {
 sm: "h-[var(--control-h-sm)] px-3 text-label",
 md: "h-[var(--control-h-md)] px-3.5 text-body",
 lg: "h-[var(--control-h-lg)] px-4 text-body-lg",
 },
 invalid: {
 true: "border-danger focus-within:border-danger",
 false:
 "border-border-subtle hover:border-border-strong focus-within:border-border-accent focus-within:shadow-focus",
 },
 },
 defaultVariants: { size: "md", invalid: false },
 },
);

export type InputProps = Omit<ComponentProps<"input">, "size" | "prefix"> &
 VariantProps<typeof inputWrapper> & {
 /**
 * A leading icon. Decorative — it clarifies the field, it doesn't name it.
 * The label names it.
 */
 icon?: ReactElement;
 /** Static text inside the box: "₹", "+91", "woohl.com/". */
 prefix?: ReactNode;
 /** Static text or a control at the end: a unit, a clear button. */
 suffix?: ReactNode;
 className?: string;
 /** Classes for the outer box rather than the `<input>` itself. */
 wrapperClassName?: string;
 };

export function Input({
 size,
 icon,
 prefix,
 suffix,
 className,
 wrapperClassName,
 disabled,
 "aria-invalid": ariaInvalid,
 ...props
}: InputProps) {
 const invalid = ariaInvalid === true || ariaInvalid === "true";

 return (
 <div
 data-slot="input-wrapper"
 className={cn(inputWrapper({ size, invalid }), wrapperClassName)}
 >
 {icon && <IconSlot icon={icon} size={16} className="text-text-muted" />}
 {prefix && <span className="text-text-muted select-none">{prefix}</span>}
 <input
 data-slot="input"
 disabled={disabled}
 aria-invalid={ariaInvalid}
 className={cn(
 "min-w-0 flex-1 border-none bg-transparent text-inherit outline-none",
 "placeholder:text-text-muted",
 "disabled:cursor-not-allowed",
 className,
 )}
 {...props}
 />
 {suffix && <span className="text-text-muted select-none">{suffix}</span>}
 </div>
 );
}

export type TextareaProps = ComponentProps<"textarea">;

/**
 * Textarea.
 *
 * Resizes vertically only — a horizontally resizable textarea breaks the
 * measure, and the measure is a typographic rule, not a layout accident.
 */
export function Textarea({
 className,
 rows = 4,
 "aria-invalid": ariaInvalid,
 ...props
}: TextareaProps) {
 const invalid = ariaInvalid === true || ariaInvalid === "true";

 return (
 <textarea
 data-slot="textarea"
 rows={rows}
 aria-invalid={ariaInvalid}
 className={cn(
 "w-full resize-y rounded-md border bg-surface-raised px-3.5 py-3",
 "font-ui text-body leading-[1.55] text-text-primary",
 "placeholder:text-text-muted",
 "outline-none transition-[border-color,box-shadow] motion-instant",
 invalid
 ? "border-danger"
 : "border-border-subtle hover:border-border-strong focus-visible:border-border-accent focus-visible:shadow-focus",
 disabledState,
 "disabled:bg-surface-sunken",
 className,
 )}
 {...props}
 />
 );
}

export { inputWrapper };
</code></pre>13:["$","$L1d",null,{"children":[["$","p",null,{"className":"text-text-accent text-caption font-bold tracking-wide uppercase","children":"Components"}],["$","$L1e",null,{"children":"Input & Textarea"}],["$","$L1f",null,{"children":"Text fields with the wrapper that lets an icon or prefix sit inside the box."}],["$","$L20",null,{"children":[["$","$L21",null,{"slug":"input"}],["$","div",null,{"className":"mt-6","children":["$","$L22",null,{"command":"bunx --bun shadcn@latest add @woohl/input","source":"$23","highlighted":"$24","npm":[],"registry":["@woohl/cva","@woohl/icon-slot","@woohl/tokens","@woohl/utils"],"props":[{"name":"size","type":"\"sm\" | \"md\" | \"lg\"","default":"\"md\""},{"name":"icon","type":"ReactElement"},{"name":"invalid","type":"boolean"}]}]}]]}]]}]
</article></body></html>