@vhyxui/react 0.1.0-alpha.1

package/dist/form.d.ts

@@ -0,0 +1,116 @@
+import { default as default_2 } from 'react';
+import { FieldValues } from 'react-hook-form';
+import { FormState } from 'react-hook-form';
+import { UseFormRegister } from 'react-hook-form';
+import { UseFormReturn } from 'react-hook-form';
+
+/**
+ * Field — the missing layer. Label + input + hint + error in one first-class component.
+ *
+ * Automatically:
+ * - Generates unique IDs and connects label htmlFor → input id
+ * - Wires aria-describedby from input → hint and/or error text
+ * - Propagates aria-invalid and data-error to the child when an error is set
+ * - Reads validation errors from the parent Form context (react-hook-form)
+ *
+ * Developers rebuild Field on every project. VhyxUI ships it first class.
+ *
+ * @example
+ * <Field name="email" label="Email" hint="We'll never share it" required>
+ *   <Input type="email" />
+ * </Field>
+ */
+export declare function Field({ name, label, hint, error, required, optional, layout, children, className, ...htmlProps }: FieldProps): default_2.ReactElement;
+
+export declare namespace Field {
+    var displayName: string;
+}
+
+/** Props for the Field component — the label/input/hint/error assembly layer. */
+export declare interface FieldProps extends Omit<default_2.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /**
+     * Field name — used to read validation errors from the parent Form context
+     * when react-hook-form is wired up.
+     */
+    name: string;
+    /** Label rendered above (or beside) the input. */
+    label?: default_2.ReactNode;
+    /** Helper text rendered below the input. Connected via aria-describedby. */
+    hint?: default_2.ReactNode;
+    /**
+     * Error message. When set, the child input receives aria-invalid and
+     * data-error attributes and the error text is announced as a live region.
+     * If absent, Field reads the error from the parent Form context automatically.
+     */
+    error?: string;
+    /** When true, renders a required indicator (*) next to the label. */
+    required?: boolean;
+    /** When true, renders an optional indicator next to the label. */
+    optional?: boolean;
+    /** Field layout. Overrides the parent Form layout when set. @default 'vertical' */
+    layout?: 'vertical' | 'horizontal';
+    /** The single interactive child element (Input, Textarea, Select, etc.). */
+    children: default_2.ReactNode;
+}
+
+/** Minimal field validation state used by Field to read error messages. */
+declare type FieldValidationState = {
+    error?: {
+        message?: string;
+    };
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    isValidating: boolean;
+};
+
+export declare const Form: default_2.ForwardRefExoticComponent<default_2.PropsWithoutRef<FormProps> & default_2.RefAttributes<HTMLFormElement>>;
+
+/** Value provided by the Form context to all descendant Fields. */
+export declare interface FormContextValue {
+    /** react-hook-form form state, available when a form prop is provided. */
+    formState?: FormState<FieldValues>;
+    /** react-hook-form register function, available when a form prop is provided. */
+    register?: UseFormRegister<FieldValues>;
+    /** Per-field state accessor from react-hook-form, available when a form prop is provided. */
+    getFieldState?: (name: string) => FieldValidationState;
+    /** When true, all form controls in this form are disabled. */
+    disabled: boolean;
+    /** Size applied to all controls in this form. */
+    size: 'sm' | 'md' | 'lg';
+    /** Layout direction of fields in this form. */
+    layout: 'vertical' | 'horizontal' | 'inline';
+}
+
+/** Props for the Form component. */
+export declare interface FormProps extends default_2.FormHTMLAttributes<HTMLFormElement> {
+    /**
+     * react-hook-form return value from useForm().
+     * When provided, Field components automatically read validation errors,
+     * and form submission is handled via form.handleSubmit(onSubmit).
+     */
+    form?: UseFormReturn<FieldValues>;
+    /** Field layout within this form. @default 'vertical' */
+    layout?: 'vertical' | 'horizontal' | 'inline';
+    /** Size applied to all controls in this form. @default 'md' */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * When true, all form controls are disabled.
+     * Propagated to Field children via context.
+     */
+    disabled?: boolean;
+    /**
+     * Called with validated form data on submission.
+     * When form prop is provided, this is called by react-hook-form after validation.
+     * When form prop is absent, called on native form submit with empty FieldValues.
+     */
+    onSubmit?: (data: FieldValues) => void | Promise<void>;
+}
+
+/**
+ * Returns the current Form context value.
+ * Returns null when used outside a Form — Field and other consumers handle this gracefully.
+ */
+export declare function useFormContext(): FormContextValue | null;
+
+export { }

package/dist/form.js

@@ -0,0 +1,6 @@
+import { F as e, a as r, u as s } from "./Field-Bv07PL2M.js";
+export {
+  e as Field,
+  r as Form,
+  s as useFormContext
+};

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("./VhyxUIProvider-C9NxI-tU.cjs"),d=require("./Button-CfYG4zkG.cjs"),l=require("./Input-OFmZxiHe.cjs"),T=require("./Textarea-H6evM8L4.cjs"),q=require("./Select-C9yB2B8M.cjs"),g=require("./Checkbox-DvkT6QP9.cjs"),u=require("./RadioItem-BfkTHBxQ.cjs"),m=require("./Switch-BU_Tcttb.cjs"),s=require("./Field-D6FSsUGj.cjs"),t=require("./Toast-ndaxbpcV.cjs"),P=require("./Alert-BJ1O0bnK.cjs"),f=require("./Badge-RM7n86Rq.cjs"),b=require("./Progress-FO-4WX0i.cjs"),S=require("./Spinner-DSHhLV-r.cjs"),v=require("./Dialog-gPT4noD8.cjs"),x=require("./Drawer-BygSIQQn.cjs"),I=require("./Tooltip-CCd6VRvZ.cjs"),h=require("./Popover-BPFkS4xn.cjs"),w=require("./Card-d5xrWgQS.cjs"),B=require("./Separator-C5lPGzes.cjs"),F=require("./Tabs-DuU02-UD.cjs"),C=require("./Breadcrumb-StitgXXx.cjs"),D=require("./Pagination-CmmcBPNz.cjs"),y=5e3;function o(i,r,e){const n={message:i,variant:r,duration:(e==null?void 0:e.duration)??y,dismissible:(e==null?void 0:e.dismissible)??!0};return(e==null?void 0:e.description)!==void 0&&(n.description=e.description),(e==null?void 0:e.action)!==void 0&&(n.action=e.action),n}function a(i,r){return t.addToast(o(i,"default",r))}a.success=function(r,e){return t.addToast(o(r,"success",e))};a.danger=function(r,e){return t.addToast(o(r,"danger",e))};a.warning=function(r,e){return t.addToast(o(r,"warning",e))};a.info=function(r,e){return t.addToast(o(r,"info",e))};a.dismiss=function(r){r!==void 0?t.dismissToast(r):t.dismissAllToasts()};const A=a;exports.VhyxUIProvider=c.VhyxUIProvider;exports.Button=d.Button;exports.Input=l.Input;exports.Textarea=T.Textarea;exports.Select=q.Select;exports.Checkbox=g.Checkbox;exports.RadioGroup=u.RadioGroup;exports.RadioItem=u.RadioItem;exports.Switch=m.Switch;exports.Field=s.Field;exports.Form=s.Form;exports.useFormContext=s.useFormContext;exports.Toast=t.Toast;exports.ToastProvider=t.ToastProvider;exports.Alert=P.Alert;exports.Badge=f.Badge;exports.Progress=b.Progress;exports.Spinner=S.Spinner;exports.Dialog=v.Dialog;exports.Drawer=x.Drawer;exports.Tooltip=I.Tooltip;exports.Popover=h.Popover;exports.Card=w.Card;exports.Separator=B.Separator;exports.Tabs=F.Tabs;exports.Breadcrumb=C.Breadcrumb;exports.Pagination=D.Pagination;exports.toast=A;