@vamos-ui/react 0.0.0-stage → 0.3.0

package/dist/components/image.js

@@ -0,0 +1,168 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { ImageOff } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useLabels } from "../lib/labels.js";
+import { DefaultImage, useImage, useMediaAdapter } from "../lib/provider.js";
+import { useComposedRefs } from "../lib/compose-refs.js";
+import { useIsomorphicLayoutEffect } from "../lib/use-controllable-state.js";
+import { Spinner } from "./spinner.js";
+/** Default `srcset` steps. */
+export const IMAGE_WIDTHS = [320, 480, 640, 768, 1024, 1280, 1600, 1920];
+/** `"16/9"` → 1.777…, `1.5` → 1.5, `"auto"` → the intrinsic ratio (or `undefined`). */
+export function aspectRatioOf(aspect, width, height) {
+    if (typeof aspect === "number")
+        return aspect > 0 ? aspect : undefined;
+    if (aspect && aspect !== "auto") {
+        const [w, h] = aspect.split("/").map(Number);
+        if (w && h)
+            return w / h;
+    }
+    return width && height ? width / height : undefined;
+}
+/** Focal point (0..1) → CSS `object-position`. Image space: never mirrored in RTL. */
+export function focalToObjectPosition(focal) {
+    if (!focal)
+        return undefined;
+    const pct = (n) => `${Math.round(Math.min(1, Math.max(0, n)) * 1000) / 10}%`;
+    return `${pct(focal.x)} ${pct(focal.y)}`;
+}
+const isAsset = (src) => typeof src === "object" && src !== null && "url" in src && "id" in src;
+/** Builds `src` / `srcSet` / `sizes` for an asset or URL (pure; usable on the server). */
+export function getImageSources(source, options = {}) {
+    const { loader, widths = IMAGE_WIDTHS, quality, focal, format, sizes } = options;
+    const url = typeof source === "string" ? source : source.url;
+    const crop = typeof options.crop === "string" ? (isAsset(source) ? source.crops?.[options.crop] : undefined) : options.crop;
+    if (loader) {
+        const max = isAsset(source) && source.width ? source.width : Infinity;
+        const steps = widths.filter((w) => w <= max);
+        const list = steps.length ? steps : [Math.min(widths[0] ?? 640, max)];
+        const srcSet = list.map((w) => `${loader({ src: url, width: w, quality, focal, crop, format })} ${w}w`).join(", ");
+        const fallbackWidth = list[Math.min(list.length - 1, Math.floor(list.length / 2))];
+        return { src: loader({ src: url, width: fallbackWidth, quality, focal, crop, format }), srcSet, sizes: sizes ?? "100vw" };
+    }
+    if (isAsset(source) && source.variants) {
+        const variants = Object.values(source.variants).sort((a, b) => a.width - b.width);
+        if (variants.length) {
+            const srcSet = [...variants.map((v) => `${v.url} ${v.width}w`), ...(source.width ? [`${source.url} ${source.width}w`] : [])].join(", ");
+            return { src: url, srcSet, sizes: sizes ?? "100vw" };
+        }
+    }
+    return { src: url, sizes };
+}
+/* ------------------------------------------------------------------ */
+/* Loader context                                                       */
+/* ------------------------------------------------------------------ */
+const ImageLoaderContext = React.createContext(undefined);
+/**
+ * Sets the image loader for every kit `Image` below (CDN URL builder). Same signature as the
+ * Next.js loader. The media adapter's `loader` is used when no provider sets one.
+ *
+ * ```tsx
+ * <ImageLoaderProvider loader={({ src, width, quality }) => `https://cdn.example.com/cdn-cgi/image/width=${width},quality=${quality ?? 75},format=auto/${src}`}>
+ * ```
+ */
+export function ImageLoaderProvider({ loader, children }) {
+    return _jsx(ImageLoaderContext.Provider, { value: loader, children: children });
+}
+/** The active loader: `ImageLoaderProvider` → media adapter `loader` → none. */
+export function useImageLoader() {
+    const fromContext = React.useContext(ImageLoaderContext);
+    const adapter = useMediaAdapter();
+    return fromContext ?? adapter?.loader;
+}
+/** `getImageSources` with the provider's loader. */
+export function useImageSources(source, options = {}) {
+    const ctxLoader = useImageLoader();
+    const loader = options.loader ?? ctxLoader;
+    const cropKey = typeof options.crop === "object" ? JSON.stringify(options.crop) : options.crop;
+    const widthsKey = options.widths?.join(",");
+    return React.useMemo(() => getImageSources(source, { ...options, loader }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [source, loader, options.sizes, widthsKey, options.quality, options.focal?.x, options.focal?.y, cropKey, options.format]);
+}
+/* ------------------------------------------------------------------ */
+/* Image                                                                */
+/* ------------------------------------------------------------------ */
+export const imageVariants = cva("vui-image relative isolate block max-w-full overflow-hidden bg-skeleton", {
+    variants: {
+        rounded: { none: "", ui: "rounded-ui", "ui-lg": "rounded-ui-lg", full: "rounded-full" },
+        fit: { cover: "", contain: "" },
+        /** `surface`: a hairline `--surface-border` frame drawn above the image. */
+        frame: { none: "", surface: "vui-image-framed" },
+    },
+    defaultVariants: { rounded: "none", fit: "cover", frame: "none" },
+});
+const imageLabels = { processing: "Processing", error: "Image could not be loaded" };
+const FILENAME_ALT = /(^(img|dsc|pxl|screenshot)[-_ ]?\d+)|\.(jpe?g|png|gif|webp|avif|heic|svg|tiff?)$/i;
+/**
+ * The image primitive: no layout shift (width/height + `aspect-ratio`), focal point →
+ * `object-position`, LQIP / colour / skeleton placeholder that cross-fades out, `srcset` from the
+ * loader or asset variants. Framework-agnostic: a plain `<img>`, or the app's `Image` from
+ * `VamosProvider` (e.g. `next/image`).
+ *
+ * ```tsx
+ * <Image src={asset} alt="Lobby of the Kadıköy office" aspect="16/9" sizes="(min-width: 1024px) 50vw, 100vw" rounded="ui" />
+ * ```
+ */
+export const Image = React.forwardRef(function Image({ src: source, alt: altProp, width: widthProp, height: heightProp, aspect = "auto", fit = "cover", focal: focalProp, crop, sizes, widths, quality, priority, placeholder: placeholderProp, blurDataURL, color: colorProp, loader, fallback, processing: processingProp, rounded, frame, className, imgClassName, style, labels, onLoad, onError, loading, decoding, ...props }, forwardedRef) {
+    const t = useLabels("image", imageLabels, labels);
+    const Bridge = useImage();
+    const asset = isAsset(source) ? source : undefined;
+    const alt = altProp ?? asset?.alt ?? "";
+    const width = widthProp ?? asset?.width;
+    const height = heightProp ?? asset?.height;
+    const focal = focalProp ?? asset?.focalPoint;
+    const blur = blurDataURL ?? asset?.placeholder;
+    const color = colorProp ?? asset?.dominantColor;
+    const processing = processingProp ?? asset?.status === "processing";
+    const placeholder = placeholderProp ?? (blur ? "blur" : color ? "color" : "skeleton");
+    const ratio = aspectRatioOf(aspect, width, height);
+    const sources = useImageSources(source, { sizes, widths, loader, quality, focal, crop });
+    const [state, setState] = React.useState("loading");
+    const imgRef = React.useRef(null);
+    const ref = useComposedRefs(forwardedRef, imgRef);
+    // Reset on a new source; catch images that finished before hydration attached onLoad.
+    useIsomorphicLayoutEffect(() => {
+        const img = imgRef.current;
+        if (img?.complete && img.naturalWidth > 0)
+            setState("loaded");
+        // A broken image that errored before hydration never fires onError again.
+        else if (img?.complete && img.getAttribute("src"))
+            setState("error");
+        else
+            setState("loading");
+    }, [sources.src]);
+    if (process.env.NODE_ENV !== "production" && alt && FILENAME_ALT.test(alt.trim())) {
+        console.warn(`Image: alt text "${alt}" looks like a file name. Describe the image instead, or pass alt="" if it is decorative.`);
+    }
+    const objectPosition = focalToObjectPosition(focal);
+    const positioned = ratio !== undefined;
+    const imgClasses = cn("vui-image-img block", positioned ? "absolute inset-0 size-full" : "h-auto w-full", fit === "contain" ? "object-contain" : "object-cover", imgClassName);
+    const imgStyle = { objectPosition };
+    const handleLoad = (e) => {
+        setState("loaded");
+        onLoad?.(e);
+    };
+    const handleError = (e) => {
+        setState("error");
+        onError?.(e);
+    };
+    const a11y = alt === "" ? { role: "presentation" } : null;
+    const img = Bridge !== DefaultImage ? (_jsx(Bridge, { ref: ref, src: sources.src, alt: alt, ...(positioned ? { fill: true } : { width, height }), sizes: sources.sizes, priority: priority, quality: quality, className: imgClasses, style: imgStyle, onLoad: handleLoad, onError: handleError, ...a11y, ...props })) : (_jsx("img", { ref: ref, src: sources.src, srcSet: sources.srcSet, sizes: sources.sizes, alt: alt, width: width, height: height, loading: loading ?? (priority ? "eager" : "lazy"), decoding: decoding ?? "async", fetchPriority: priority ? "high" : undefined, className: imgClasses, style: imgStyle, onLoad: handleLoad, onError: handleError, ...a11y, ...props }));
+    return (_jsxs("span", { "data-slot": "image", "data-state": state, "data-placeholder": placeholder, className: cn(imageVariants({ rounded, frame }), placeholder === "none" && "bg-transparent", className), style: {
+            ...(positioned ? { aspectRatio: String(ratio) } : null),
+            ...(placeholder === "color" && color ? { backgroundColor: color } : null),
+            ...style,
+        }, children: [placeholder === "blur" && blur && state !== "error" ? (_jsx("img", { "aria-hidden": true, alt: "", src: blur, "data-slot": "image-blur", className: "vui-image-blur pointer-events-none absolute inset-0 size-full object-cover", style: imgStyle })) : null, placeholder === "skeleton" && state === "loading" ? _jsx("span", { "aria-hidden": true, "data-slot": "image-skeleton", className: "ui-shimmer absolute inset-0" }) : null, state === "error" ? (fallback ? (_jsx("span", { "data-slot": "image-fallback", className: cn(positioned ? "absolute inset-0" : "block min-h-24", "flex items-center justify-center"), children: fallback })) : (_jsx("span", { "data-slot": "image-fallback", ...(alt ? { role: "img", "aria-label": alt } : { "aria-hidden": true }), title: t("error"), className: cn(positioned ? "absolute inset-0" : "block min-h-24", "flex items-center justify-center text-fg-subtle [&_svg]:size-6"), children: _jsx(ImageOff, { "aria-hidden": true, strokeWidth: 1.5 }) }))) : (img), processing ? (_jsxs("span", { "data-slot": "image-processing", className: "surface-popover absolute start-2 top-2 z-10 inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[11px] font-medium", children: [_jsx(Spinner, { size: "xs", tone: "accent" }), t("processing")] })) : null] }));
+});
+/** `<figure>` for a captioned image (blocks, galleries, articles). */
+export const Figure = React.forwardRef(function Figure({ gap = "sm", className, ...props }, ref) {
+    return _jsx("figure", { ref: ref, "data-slot": "figure", className: cn("m-0 flex flex-col", gap === "sm" ? "gap-2" : "gap-3", className), ...props });
+});
+/** `<figcaption>`: caption text plus an optional credit. */
+export const FigureCaption = React.forwardRef(function FigureCaption({ credit, className, children, ...props }, ref) {
+    return (_jsxs("figcaption", { ref: ref, "data-slot": "figure-caption", className: cn("text-[13px] leading-relaxed text-pretty text-fg-muted", className), ...props, children: [children, credit ? _jsx("span", { className: "ms-2 text-[11.5px] tracking-wide text-fg-subtle uppercase", children: credit }) : null] }));
+});

package/dist/components/input-otp.d.ts

@@ -0,0 +1,62 @@
+import * as React from "react";
+declare const otpLabels: {
+    label: string;
+    labelCharacters: string;
+    verifying: string;
+};
+export type InputOTPLabels = typeof otpLabels;
+export interface InputOTPRootProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "size" | "pattern" | "children" | "maxLength"> {
+    /** Number of characters. */
+    maxLength: number;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Called once all slots are filled. */
+    onComplete?: (value: string) => void;
+    /** Allowed characters. Default `"digits"`. */
+    pattern?: "digits" | "alphanumeric" | RegExp;
+    size?: "md" | "lg";
+    /** Show dots instead of characters (the value is unchanged). */
+    mask?: boolean;
+    invalid?: boolean;
+    /** Code is being checked: spinner after the slots, input read-only. */
+    loading?: boolean;
+    /** Classes for the visual container (`className` too). */
+    containerClassName?: string;
+    labels?: Partial<InputOTPLabels>;
+    children: React.ReactNode;
+}
+/**
+ * One real `<input>` (screen readers, SMS autofill, password managers and paste all see one
+ * field) with visual slots drawn over it. Compose `InputOTPGroup` / `InputOTPSlot` /
+ * `InputOTPSeparator`, or use the `InputOTP` shorthand.
+ */
+export declare const InputOTPRoot: React.ForwardRefExoticComponent<InputOTPRootProps & React.RefAttributes<HTMLInputElement>>;
+/** A run of joined slots. */
+export declare const InputOTPGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export interface InputOTPSlotProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Position of the character this slot shows (0-based). */
+    index: number;
+}
+/** One visual character box: active ring, fake caret, filled state. */
+export declare const InputOTPSlot: React.ForwardRefExoticComponent<InputOTPSlotProps & React.RefAttributes<HTMLDivElement>>;
+/** Visual divider between groups (123–456). */
+export declare const InputOTPSeparator: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export interface InputOTPProps extends Omit<InputOTPRootProps, "maxLength" | "children"> {
+    /** Number of characters. Default 6. */
+    length?: number;
+    /** Slot grouping, e.g. `[3, 3]` → 123–456. Default: one group. */
+    groups?: number[];
+}
+/**
+ * One-time code entry: 2FA sign-in, SMS verification, customer portal email codes, payment
+ * confirmation. Paste and SMS autofill fill every slot at once; `onComplete` fires when full.
+ *
+ * ```tsx
+ * <Field label="Verification code" hint="We sent a 6-digit code to +90 532 ••• 41 07.">
+ *   <InputOTP name="code" groups={[3, 3]} onComplete={verify} />
+ * </Field>
+ * ```
+ */
+export declare const InputOTP: React.ForwardRefExoticComponent<InputOTPProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/dist/components/input-otp.js

@@ -0,0 +1,73 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+import { cn } from "../lib/cn.js";
+import { useFieldContext, useFieldControl } from "../lib/field-context.js";
+import { useLabels } from "../lib/labels.js";
+import { useControllableState } from "../lib/use-controllable-state.js";
+import { Spinner } from "./spinner.js";
+const otpLabels = {
+    label: "Verification code, {length} digits",
+    labelCharacters: "Verification code, {length} characters",
+    verifying: "Verifying code…",
+};
+const PATTERNS = {
+    digits: "^\\d+$",
+    alphanumeric: "^[a-zA-Z0-9]+$",
+};
+const OTPStyleContext = React.createContext({ size: "md", mask: false, invalid: false });
+/**
+ * One real `<input>` (screen readers, SMS autofill, password managers and paste all see one
+ * field) with visual slots drawn over it. Compose `InputOTPGroup` / `InputOTPSlot` /
+ * `InputOTPSeparator`, or use the `InputOTP` shorthand.
+ */
+export const InputOTPRoot = React.forwardRef(function InputOTPRoot(rawProps, ref) {
+    const { maxLength, value: valueProp, defaultValue, onValueChange, onComplete, pattern = "digits", size = "md", mask = false, invalid, loading, containerClassName, className, labels, children, ...rest } = rawProps;
+    const t = useLabels("otp", otpLabels, labels);
+    const field = useFieldContext();
+    const props = useFieldControl({ ...rest, "aria-invalid": invalid ? true : rest["aria-invalid"] });
+    const [value, setValue] = useControllableState({ value: valueProp, defaultValue: defaultValue ?? "", onChange: onValueChange, name: "InputOTP" });
+    const isInvalid = Boolean(props["aria-invalid"]) && props["aria-invalid"] !== "false";
+    const named = props["aria-label"] || props["aria-labelledby"] || field?.labelId;
+    const patternSource = pattern instanceof RegExp ? pattern.source : PATTERNS[pattern];
+    const style = React.useMemo(() => ({ size, mask, invalid: isInvalid }), [size, mask, isInvalid]);
+    return (_jsx(OTPStyleContext.Provider, { value: style, children: _jsx(OTPInput, { ref: ref, ...props, maxLength: maxLength, value: value, onChange: (v) => setValue(v), onComplete: onComplete, pattern: patternSource, inputMode: pattern === "digits" ? "numeric" : "text", autoComplete: "one-time-code", readOnly: props.readOnly || loading, "aria-busy": loading || undefined, "aria-label": named ? props["aria-label"] : t(pattern === "digits" ? "label" : "labelCharacters", { length: maxLength }), "data-slot": "input-otp-input", containerClassName: cn("group/otp flex items-center gap-2 has-disabled:cursor-not-allowed has-disabled:opacity-50", isInvalid && "ui-otp-invalid", containerClassName, className), 
+            // Slots are always left-to-right, even in RTL pages.
+            dir: "ltr", children: _jsxs(_Fragment, { children: [children, loading ? (_jsx("span", { className: "ms-1 inline-flex items-center", children: _jsx(Spinner, { size: "sm", tone: "muted", label: t("verifying") }) })) : null] }) }) }));
+});
+/** A run of joined slots. */
+export const InputOTPGroup = React.forwardRef(function InputOTPGroup({ className, ...props }, ref) {
+    return _jsx("div", { ref: ref, "data-slot": "input-otp-group", className: cn("ui-otp-group flex items-center", className), ...props });
+});
+/** One visual character box: active ring, fake caret, filled state. */
+export const InputOTPSlot = React.forwardRef(function InputOTPSlot({ index, className, ...props }, ref) {
+    const ctx = React.useContext(OTPInputContext);
+    const { size, mask, invalid } = React.useContext(OTPStyleContext);
+    const slot = ctx.slots[index];
+    const char = slot?.char ?? null;
+    return (_jsxs("div", { ref: ref, "data-slot": "input-otp-slot", "data-active": slot?.isActive ? "" : undefined, "data-filled": char ? "" : undefined, "aria-hidden": true, className: cn("relative flex items-center justify-center border-y border-e border-field-border bg-field font-medium text-fg tabular", "transition-[border-color,box-shadow,background-color] duration-150", "first:rounded-s-ui first:border-s last:rounded-e-ui", size === "lg" ? "h-[calc(var(--control-h)+1rem)] w-[calc(var(--control-h)+0.25rem)] text-xl" : "h-[calc(var(--control-h)+0.25rem)] w-[calc(var(--control-h)-0.25rem)] text-lg", "group-hover/otp:border-field-border-hover", slot?.isActive && "z-10 border-ring shadow-[0_0_0_3px_var(--accent-soft)]", slot?.isActive && "border-s", invalid && "border-danger", invalid && slot?.isActive && "shadow-[0_0_0_3px_color-mix(in_srgb,var(--danger)_18%,transparent)]", className), ...props, children: [char ? mask ? _jsx("span", { className: "size-2 rounded-full bg-current" }) : char : null, slot?.hasFakeCaret ? (_jsx("span", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: _jsx("span", { className: "ui-otp-caret h-[45%] w-px bg-fg" }) })) : null] }));
+});
+/** Visual divider between groups (123–456). */
+export const InputOTPSeparator = React.forwardRef(function InputOTPSeparator({ className, ...props }, ref) {
+    return (_jsx("div", { ref: ref, role: "separator", "data-slot": "input-otp-separator", className: cn("flex w-3 items-center justify-center text-fg-subtle", className), ...props, children: _jsx("span", { className: "h-px w-2.5 bg-current" }) }));
+});
+/**
+ * One-time code entry: 2FA sign-in, SMS verification, customer portal email codes, payment
+ * confirmation. Paste and SMS autofill fill every slot at once; `onComplete` fires when full.
+ *
+ * ```tsx
+ * <Field label="Verification code" hint="We sent a 6-digit code to +90 532 ••• 41 07.">
+ *   <InputOTP name="code" groups={[3, 3]} onComplete={verify} />
+ * </Field>
+ * ```
+ */
+export const InputOTP = React.forwardRef(function InputOTP({ length = 6, groups, ...props }, ref) {
+    const sizes = groups && groups.reduce((a, b) => a + b, 0) === length ? groups : [length];
+    let start = 0;
+    return (_jsx(InputOTPRoot, { ref: ref, maxLength: length, ...props, children: sizes.map((count, gi) => {
+            const from = start;
+            start += count;
+            return (_jsxs(React.Fragment, { children: [gi > 0 ? _jsx(InputOTPSeparator, {}) : null, _jsx(InputOTPGroup, { children: Array.from({ length: count }, (_, i) => (_jsx(InputOTPSlot, { index: from + i }, from + i))) })] }, gi));
+        }) }));
+});

package/dist/components/input.d.ts

@@ -0,0 +1,141 @@
+import * as React from "react";
+import { Label as LabelPrimitive } from "radix-ui";
+/**
+ * The classic field look for a bare `<input>` / `<textarea>`. Kept for compatibility —
+ * new controls should use `controlVariants` from `lib/variants`.
+ */
+export declare const fieldBase = "w-full min-w-0 rounded-ui border border-field-border bg-field text-sm text-fg placeholder:text-fg-subtle transition-[border-color,box-shadow] duration-150 hover:border-field-border-hover focus-visible:border-ring focus-visible:shadow-[0_0_0_3px_var(--accent-soft)] focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger aria-invalid:focus-visible:shadow-[0_0_0_3px_color-mix(in_srgb,var(--danger)_18%,transparent)]";
+declare const inputLabels: {
+    clear: string;
+    count: string;
+    remaining: string;
+};
+export type InputLabels = typeof inputLabels;
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "prefix"> {
+    /** Height from the density axis: sm = control-h − 0.5rem, md = control-h, lg = control-h + 0.5rem. */
+    size?: "sm" | "md" | "lg";
+    /** `"ghost"`: borderless until hover/focus (inline cell edit). `"nav"`: inside the dark sidebar. */
+    variant?: "default" | "ghost" | "nav";
+    /** Icon or short text inside the box, at the start. */
+    leading?: React.ReactNode;
+    /** Icon, unit, spinner or small button inside the box, at the end. */
+    trailing?: React.ReactNode;
+    /** Segmented addon at the start (`https://`, `$`). */
+    addonStart?: React.ReactNode;
+    /** Segmented addon at the end (`.vamos.ist`, a Button). */
+    addonEnd?: React.ReactNode;
+    /** Show a clear (×) button while there is a value. Esc also clears. */
+    clearable?: boolean;
+    /** Called after the value was cleared. */
+    onClear?: () => void;
+    /** Character counter (`12 / 60` with `maxLength`). Announced politely only near the limit. */
+    showCount?: boolean;
+    /** Invalid look + `aria-invalid` (a surrounding Field with `error` sets this for you). */
+    invalid?: boolean;
+    /** Classes for the inner `<input>`; `className` always goes on the root box. */
+    inputClassName?: string;
+    /** Built-in string overrides (`input` namespace). */
+    labels?: Partial<InputLabels>;
+}
+/**
+ * Single-line text entry. Native contract (`value` / `defaultValue` / `onChange(event)`); the
+ * `ref` always reaches the `<input>`, so `react-hook-form`'s `register` works. Inside a `Field`
+ * the id, description and invalid/required/disabled state are wired automatically.
+ *
+ * ```tsx
+ * <Field label="Title" hint="Under 60 characters for search results.">
+ *   <Input maxLength={60} showCount />
+ * </Field>
+ * <Input leading={<Search />} placeholder="Search contacts" clearable />
+ * <Input addonStart="https://" addonEnd=".vamos.ist" defaultValue="northpoint" />
+ * ```
+ */
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    invalid?: boolean;
+    /** Character counter under the box (`120 / 400` with `maxLength`). Announced politely only near the limit. */
+    showCount?: boolean;
+    /** Built-in string overrides (`input` namespace: `count`, `remaining`). */
+    labels?: Partial<InputLabels>;
+}
+/**
+ * Multi-line text. Grows with its content (`field-sizing: content`) and reads Field context.
+ *
+ * ```tsx
+ * <Field label="Anything we should know first?"><Textarea maxLength={400} showCount /></Field>
+ * ```
+ */
+export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+/** Form label (Radix Label: no text selection on double-click). */
+export declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+declare const fieldLabels: {
+    optional: string;
+    required: string;
+};
+export type FieldLabels = typeof fieldLabels;
+export interface FieldProps {
+    label?: React.ReactNode;
+    hint?: React.ReactNode;
+    /** Error text; an array (TanStack Form) shows the first entry. Replaces the hint while shown. */
+    error?: React.ReactNode | React.ReactNode[];
+    /** Control id the label points to. Default: the child's `id`, or a generated one. */
+    id?: string;
+    /** Form field name, passed to the control. */
+    name?: string;
+    /** Adds an asterisk (hidden from screen readers) and `required` on the control. */
+    required?: boolean;
+    /** Shows "(optional)" — for forms where most fields are required. */
+    optional?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    /**
+     * `"vertical"` (default): label, control, hint.
+     * `"horizontal"`: control first, then label + hint (Checkbox, Switch, Radio).
+     */
+    orientation?: "vertical" | "horizontal";
+    /** `"inline"`: fixed label column beside the control (settings pages). Default `"stack"`. */
+    layout?: "stack" | "inline";
+    /** Slot at the end of the label row ("Forgot password?", an info button). */
+    labelAction?: React.ReactNode;
+    className?: string;
+    /** Built-in string overrides (`field` namespace). */
+    labels?: Partial<FieldLabels>;
+    /** One control. Kit controls read the Field context; a plain `<input>`/`<select>`/`<textarea>` is wired by cloning. */
+    children: React.ReactNode;
+}
+/**
+ * Label + control + hint/error, with the accessibility wiring done for you:
+ * `<label for>`, `aria-describedby` (merged with the control's own), `aria-invalid`, `required`,
+ * `disabled`. Works with any kit control through context — Select, Combobox, Date picker —
+ * not only a single direct child.
+ *
+ * ```tsx
+ * <Field label="Work email" hint="We send the invoice here." required>
+ *   <Input type="email" />
+ * </Field>
+ * <Field label="Status" error={errors.status}><Select … /></Field>
+ * ```
+ */
+export declare function Field({ label, hint, error, id, name, required, optional, disabled, readOnly, orientation, layout, labelAction, className, labels, children, }: FieldProps): React.JSX.Element;
+export interface FieldsetProps extends React.FieldsetHTMLAttributes<HTMLFieldSetElement> {
+    /** Group title, rendered as `<legend>`. Or put a `<Legend>` first in children. */
+    legend?: React.ReactNode;
+    /** Helper text under the legend (linked with `aria-describedby`). */
+    hint?: React.ReactNode;
+    /** Error for the whole group (e.g. "Pick at least one channel"). */
+    error?: React.ReactNode;
+}
+/**
+ * Groups related controls with a real `<fieldset>` + `<legend>` — radio and checkbox groups,
+ * an address block. `disabled` disables every native control inside.
+ *
+ * ```tsx
+ * <Fieldset legend="Notifications" hint="Choose where we reach you.">
+ *   <Field label="Email" orientation="horizontal"><Checkbox /></Field>
+ * </Fieldset>
+ * ```
+ */
+export declare const Fieldset: React.ForwardRefExoticComponent<FieldsetProps & React.RefAttributes<HTMLFieldSetElement>>;
+/** Title of a Fieldset. */
+export declare const Legend: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLLegendElement> & React.RefAttributes<HTMLLegendElement>>;
+export {};