import * as React from "react"; import { cn } from "@kineticui/core"; export type InputProps = React.InputHTMLAttributes & { /** Icon or text shown before the value. */ leading?: React.ReactNode; /** Icon, text or button shown after the value. */ trailing?: React.ReactNode; /** Marks the field invalid and styles it red. */ invalid?: boolean; /** Class for the outer wrapper (border, size). */ wrapperClassName?: string; }; export const Input = React.forwardRef( ({ className, wrapperClassName, leading, trailing, invalid, disabled, ...props }, ref) => (

{leading ? {leading} : null} {trailing ? {trailing} : null}

), ); Input.displayName = "Input"; export type TextareaProps = React.TextareaHTMLAttributes & { invalid?: boolean; /** Show "used / max" under the field when maxLength is set. */ showCount?: boolean; }; export const Textarea = React.forwardRef( ({ className, invalid, showCount, maxLength, onChange, ...props }, ref) => { const [count, setCount] = React.useState( String(props.value ?? props.defaultValue ?? "").length, ); return (

{
            setCount(e.target.value.length);
            onChange?.(e);
          }}
          className={cn(
            "min-h-24 w-full resize-y rounded-xl border border-border bg-background px-3.5 py-3 text-sm leading-relaxed text-foreground outline-none transition-[border-color,box-shadow] placeholder:text-subtle focus:border-accent focus:shadow-[0_0_0_4px_var(--kn-ring)]",
            invalid && "border-danger",
            className,
          )}
          {...props}
        />
        {showCount && maxLength ? (
          <span className="self-end font-mono text-xs text-subtle">
            {count} / {maxLength}
          </span>
        ) : null}
      </div>
    );
  },
);
Textarea.displayName = "Textarea";

export type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement>;

export function Label({ className, ...props }: LabelProps) {
  return <label className={cn("text-sm font-medium text-foreground", className)} {...props} />;
}

export type FieldProps = {
  label?: React.ReactNode;
  hint?: React.ReactNode;
  error?: React.ReactNode;
  htmlFor?: string;
  className?: string;
  children: React.ReactNode;
};

/** Label + control + hint/error, spaced consistently. */
export function Field({ label, hint, error, htmlFor, className, children }: FieldProps) {
  return (
    <div className={cn("flex flex-col gap-1.5", className)}>
      {label ? <Label htmlFor={htmlFor}>{label}</Label> : null}
      {children}
      {error ? (
        <span role="alert" className="text-xs text-danger">
          {error}
        </span>
      ) : hint ? (
        <span className="text-xs text-subtle">{hint}</span>
      ) : null}
    </div>
  );
}
</article></body></html>

Input

Installation

Exports