@vhyxui/react 0.1.2-alpha.2 → 0.2.0-alpha

package/dist/index.d.ts

@@ -496,6 +496,15 @@ export declare namespace Field {
     var displayName: string;
 }
 
+/** Field-owned props — pulled from FieldProps without the HTML div base to avoid event-handler conflicts. */
+declare type FieldOwnProps = Pick<FieldProps, 'name' | 'label' | 'hint' | 'error' | 'required' | 'optional' | 'layout'>;
+
+/** Field-owned props — picked from FieldProps without the HTML div base. */
+declare type FieldOwnProps_2 = Pick<FieldProps, 'name' | 'label' | 'hint' | 'error' | 'required' | 'optional' | 'layout'>;
+
+/** Field-owned props — pulled from FieldProps without the HTML div base to avoid event-handler conflicts. */
+declare type FieldOwnProps_3 = Pick<FieldProps, 'name' | 'label' | 'hint' | 'error' | 'required' | 'optional' | 'layout'>;
+
 /** Props for the Field component — the label/input/hint/error assembly layer. */
 export declare interface FieldProps extends Omit<default_2.HTMLAttributes<HTMLDivElement>, 'children'> {
     /**
@@ -663,8 +672,14 @@ export declare interface PopoverCloseProps extends default_2.ButtonHTMLAttribute
 /**
  * The floating panel. Rendered in a portal.
  * Non-modal (aria-modal="false") — focus is NOT trapped.
+ *
+ * Deferred to client-only via `mounted` state, same pattern as
+ * Select.Content: SSR and client initial renders both produce null,
+ * eliminating both a hydration mismatch and a `document is not defined`
+ * crash from `ReactDOM.createPortal(..., document.body)` if this is open
+ * on first render (`document` doesn't exist during SSR).
  */
-declare function PopoverContent({ children, className, side, align, ...rest }: PopoverContentProps): default_2.ReactPortal | null;
+declare function PopoverContent({ children, className, side, align, style, ...rest }: PopoverContentProps): default_2.ReactPortal | null;
 
 declare namespace PopoverContent {
     var displayName: string;
@@ -792,7 +807,7 @@ export declare const Select: default_2.ComponentType<SelectProps & default_2.Ref
  * SelectItem labels register on their own mount effects after this content
  * mounts client-side, so the trigger label display is updated via state.
  */
-declare function SelectContent({ children, className, ...rest }: SelectContentProps): default_2.ReactPortal | null;
+declare function SelectContent({ children, className, style, ...rest }: SelectContentProps): default_2.ReactPortal | null;
 
 declare namespace SelectContent {
     var displayName: string;
@@ -802,6 +817,55 @@ export declare interface SelectContentProps extends default_2.HTMLAttributes<HTM
     children?: default_2.ReactNode;
 }
 
+/**
+ * SelectField — convenience compound of Field + Select.
+ *
+ * Renders a labelled dropdown with hint, error, and required indicator
+ * fully wired. Prefer this over manually composing Field + Select for
+ * single-selection dropdowns driven by a flat options array.
+ *
+ * @example
+ * <SelectField
+ *   name="country"
+ *   label="Country"
+ *   value={value}
+ *   onValueChange={setValue}
+ *   options={[{ label: 'United States', value: 'us' }]}
+ *   placeholder="Select a country"
+ * />
+ */
+export declare function SelectField({ name, label, hint, error, required, optional, layout, options, placeholder, value, onValueChange, disabled, size, }: SelectFieldProps): default_2.ReactElement;
+
+export declare namespace SelectField {
+    var displayName: string;
+}
+
+/** A single option rendered inside SelectField. */
+export declare interface SelectFieldOption {
+    label: string;
+    value: string;
+}
+
+/**
+ * Props for SelectField.
+ * `error` is a string (error message) from FieldProps.
+ * `placeholder` is passed to the root Select (not to Select.Trigger).
+ */
+export declare interface SelectFieldProps extends FieldOwnProps_2 {
+    /** The currently selected value (controlled). */
+    value: string;
+    /** Called when a new option is selected. */
+    onValueChange: (value: string) => void;
+    /** Options to render inside the dropdown. */
+    options: SelectFieldOption[];
+    /** Placeholder shown in the trigger when no value is selected. */
+    placeholder?: string;
+    /** When true, the trigger is disabled. */
+    disabled?: boolean;
+    /** Size applied to the Select and its sub-components. @default 'md' */
+    size?: 'sm' | 'md' | 'lg';
+}
+
 declare function SelectGroup({ children, className, ...rest }: SelectGroupProps): default_2.ReactElement;
 
 declare namespace SelectGroup {
@@ -860,12 +924,26 @@ export declare interface SelectSeparatorProps extends default_2.HTMLAttributes<H
 /** Size tokens for Select. */
 export declare type SelectSize = 'sm' | 'md' | 'lg';
 
-export declare interface SelectTriggerProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
+declare type SelectTriggerBaseProps = Omit<default_2.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> & {
     /** Optional icon rendered on the right. Defaults to a chevron SVG. */
     icon?: default_2.ReactNode;
-    /** When true, renders as the child element via Slot instead of <button>. */
-    asChild?: boolean;
-}
+};
+
+/**
+ * Select.Trigger's default render always shows the selected value + a
+ * chevron icon — it never renders custom content, so `children` is not
+ * part of the props shape unless `asChild` is used. Use `asChild` with a
+ * single child element to fully customize what the trigger renders.
+ */
+export declare type SelectTriggerProps = (SelectTriggerBaseProps & {
+    /** Render as the child element via Slot, merging Select.Trigger's behavior onto it. */
+    asChild: true;
+    /** The single custom trigger element `asChild` merges open/close + aria/keyboard behavior onto. */
+    children: default_2.ReactElement;
+}) | (SelectTriggerBaseProps & {
+    asChild?: false;
+    children?: never;
+});
 
 export declare const Separator: default_2.ForwardRefExoticComponent<default_2.PropsWithoutRef<SeparatorProps> & default_2.RefAttributes<HTMLElement>>;
 
@@ -987,6 +1065,28 @@ export declare type TabsVariant = 'default' | 'pills' | 'underline' | 'enclosed'
 
 export declare const Textarea: default_2.ForwardRefExoticComponent<default_2.PropsWithoutRef<TextareaProps> & default_2.RefAttributes<HTMLTextAreaElement>>;
 
+/**
+ * TextareaField — convenience compound of Field + Textarea.
+ *
+ * Renders a labelled multi-line textarea with hint, error, and required
+ * indicator fully wired. Prefer this over manually composing Field + Textarea.
+ *
+ * @example
+ * <TextareaField name="bio" label="Bio" minRows={4} placeholder="Tell us about yourself" />
+ */
+export declare function TextareaField({ name, label, hint, error, required, optional, layout, ...textareaProps }: TextareaFieldProps): default_2.ReactElement;
+
+export declare namespace TextareaField {
+    var displayName: string;
+}
+
+/**
+ * Combined props for TextareaField.
+ * `error` is a string (error message) from FieldProps.
+ * `id` is omitted — Field generates and manages it internally.
+ */
+export declare type TextareaFieldProps = FieldOwnProps_3 & Omit<TextareaProps, 'id' | 'error'>;
+
 /** Props for the Textarea component. */
 export declare interface TextareaProps extends default_2.TextareaHTMLAttributes<HTMLTextAreaElement> {
     /** Size of the textarea. @default 'md' */
@@ -1015,6 +1115,29 @@ export declare type TextareaResize = 'none' | 'vertical' | 'horizontal' | 'both'
 /** Size tokens available on the Textarea component. */
 export declare type TextareaSize = 'sm' | 'md' | 'lg';
 
+/**
+ * TextField — convenience compound of Field + Input.
+ *
+ * Renders a labelled text input with hint, error, and required indicator
+ * fully wired. Prefer this over manually composing Field + Input for
+ * single-line text inputs.
+ *
+ * @example
+ * <TextField name="email" label="Email" type="email" placeholder="you@example.com" required />
+ */
+export declare function TextField({ name, label, hint, error, required, optional, layout, ...inputProps }: TextFieldProps): default_2.ReactElement;
+
+export declare namespace TextField {
+    var displayName: string;
+}
+
+/**
+ * Combined props for TextField.
+ * `error` is a string (error message) from FieldProps.
+ * `id` is omitted — Field generates and manages it internally.
+ */
+export declare type TextFieldProps = FieldOwnProps & Omit<InputProps, 'id' | 'error'>;
+
 export declare const Toast: default_2.ComponentType<ToastProviderProps> & {
     displayName: string;
 };

package/dist/index.js

@@ -1,27 +1,30 @@
 import { V as l } from "./VhyxUIProvider-DVFSW4q-.js";
-import { B as T } from "./Button-D7eX45GC.js";
-import { I as P } from "./Input-BS_t1bl-.js";
-import { T as b } from "./Textarea-CLrctxHU.js";
-import { S as B } from "./Select-DjeJOdb7.js";
-import { C as F } from "./Checkbox-DWl91ci_.js";
+import { B as p } from "./Button-DDMc7-3S.js";
+import { I as S } from "./Input-BS_t1bl-.js";
+import { T as P } from "./Textarea-CLrctxHU.js";
+import { S as v } from "./Select-DHalg36V.js";
+import { C as D } from "./Checkbox-DWl91ci_.js";
 import { R as A, a as C } from "./RadioItem-CzHSS_qK.js";
 import { S as R } from "./Switch-DOAZfSV0.js";
 import { F as y, a as U, u as V } from "./Field-Bv07PL2M.js";
+import { T as E } from "./TextField-DtXQQJJk.js";
+import { S as L } from "./SelectField-DTfYCDWa.js";
+import { T as O } from "./TextareaField-CpqPinvx.js";
 import { b as s, c as i, d as m } from "./Toast-0acAjZTB.js";
-import { T as E, a as G } from "./Toast-0acAjZTB.js";
-import { A as N } from "./Alert-am3ANPTH.js";
-import { B as _ } from "./Badge-Fuc7l-1E.js";
-import { P as q } from "./Progress-DWLr6Bq2.js";
-import { S as H } from "./Spinner-CZSz1OpT.js";
-import { D as K } from "./Dialog-CtYu14zl.js";
-import { D as Q } from "./Drawer-BFJxsPG1.js";
-import { T as X } from "./Tooltip-BAmErB_g.js";
-import { P as Z } from "./Popover-MxUovsIt.js";
-import { C as rr } from "./Card-D7ZNeWtE.js";
-import { S as er } from "./Separator-DQT58t90.js";
-import { T as sr } from "./Tabs-BTfm4LbV.js";
-import { B as fr } from "./Breadcrumb-Db7ASomJ.js";
-import { P as mr } from "./Pagination-C1h7OTgM.js";
+import { T as j, a as q } from "./Toast-0acAjZTB.js";
+import { A as H } from "./Alert-am3ANPTH.js";
+import { B as K } from "./Badge-Bbxb4wyt.js";
+import { P as Q } from "./Progress-DWLr6Bq2.js";
+import { S as X } from "./Spinner-BYi9eTfl.js";
+import { D as Z } from "./Dialog-CtYu14zl.js";
+import { D as rr } from "./Drawer-BFJxsPG1.js";
+import { T as er } from "./Tooltip-BAmErB_g.js";
+import { P as sr } from "./Popover-u9vlClum.js";
+import { C as fr } from "./Card-Dh9Pcmfa.js";
+import { S as mr } from "./Separator-DQT58t90.js";
+import { T as xr } from "./Tabs-BTfm4LbV.js";
+import { B as cr } from "./Breadcrumb-Db7ASomJ.js";
+import { P as lr } from "./Pagination-C1h7OTgM.js";
 const d = 5e3;
 function t(e, a, r) {
   const f = {
@@ -50,34 +53,37 @@ o.info = function(a, r) {
 o.dismiss = function(a) {
   a !== void 0 ? i(a) : m();
 };
-const x = o;
+const n = o;
 export {
-  N as Alert,
-  _ as Badge,
-  fr as Breadcrumb,
-  T as Button,
-  rr as Card,
-  F as Checkbox,
-  K as Dialog,
-  Q as Drawer,
+  H as Alert,
+  K as Badge,
+  cr as Breadcrumb,
+  p as Button,
+  fr as Card,
+  D as Checkbox,
+  Z as Dialog,
+  rr as Drawer,
   y as Field,
   U as Form,
-  P as Input,
-  mr as Pagination,
-  Z as Popover,
-  q as Progress,
+  S as Input,
+  lr as Pagination,
+  sr as Popover,
+  Q as Progress,
   A as RadioGroup,
   C as RadioItem,
-  B as Select,
-  er as Separator,
-  H as Spinner,
+  v as Select,
+  L as SelectField,
+  mr as Separator,
+  X as Spinner,
   R as Switch,
-  sr as Tabs,
-  b as Textarea,
-  E as Toast,
-  G as ToastProvider,
-  X as Tooltip,
+  xr as Tabs,
+  E as TextField,
+  P as Textarea,
+  O as TextareaField,
+  j as Toast,
+  q as ToastProvider,
+  er as Tooltip,
   l as VhyxUIProvider,
-  x as toast,
+  n as toast,
   V as useFormContext
 };

package/dist/popover.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Popover-BPFkS4xn.cjs");exports.Popover=e.Popover;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Popover-BHGX_cC4.cjs");exports.Popover=e.Popover;

package/dist/popover.d.ts

@@ -32,8 +32,14 @@ export declare interface PopoverCloseProps extends default_2.ButtonHTMLAttribute
 /**
  * The floating panel. Rendered in a portal.
  * Non-modal (aria-modal="false") — focus is NOT trapped.
+ *
+ * Deferred to client-only via `mounted` state, same pattern as
+ * Select.Content: SSR and client initial renders both produce null,
+ * eliminating both a hydration mismatch and a `document is not defined`
+ * crash from `ReactDOM.createPortal(..., document.body)` if this is open
+ * on first render (`document` doesn't exist during SSR).
  */
-declare function PopoverContent({ children, className, side, align, ...rest }: PopoverContentProps): default_2.ReactPortal | null;
+declare function PopoverContent({ children, className, side, align, style, ...rest }: PopoverContentProps): default_2.ReactPortal | null;
 
 declare namespace PopoverContent {
     var displayName: string;

package/dist/popover.js

@@ -1,4 +1,4 @@
-import { P as e } from "./Popover-MxUovsIt.js";
+import { P as e } from "./Popover-u9vlClum.js";
 export {
   e as Popover
 };

package/dist/select.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Select-C9yB2B8M.cjs");exports.Select=e.Select;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Select-CGfKq69f.cjs");exports.Select=e.Select;

package/dist/select.d.ts

@@ -19,7 +19,7 @@ export declare const Select: default_2.ComponentType<SelectProps & default_2.Ref
  * SelectItem labels register on their own mount effects after this content
  * mounts client-side, so the trigger label display is updated via state.
  */
-declare function SelectContent({ children, className, ...rest }: SelectContentProps): default_2.ReactPortal | null;
+declare function SelectContent({ children, className, style, ...rest }: SelectContentProps): default_2.ReactPortal | null;
 
 declare namespace SelectContent {
     var displayName: string;
@@ -87,11 +87,25 @@ export declare interface SelectSeparatorProps extends default_2.HTMLAttributes<H
 /** Size tokens for Select. */
 export declare type SelectSize = 'sm' | 'md' | 'lg';
 
-export declare interface SelectTriggerProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
+declare type SelectTriggerBaseProps = Omit<default_2.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> & {
     /** Optional icon rendered on the right. Defaults to a chevron SVG. */
     icon?: default_2.ReactNode;
-    /** When true, renders as the child element via Slot instead of <button>. */
-    asChild?: boolean;
-}
+};
+
+/**
+ * Select.Trigger's default render always shows the selected value + a
+ * chevron icon — it never renders custom content, so `children` is not
+ * part of the props shape unless `asChild` is used. Use `asChild` with a
+ * single child element to fully customize what the trigger renders.
+ */
+export declare type SelectTriggerProps = (SelectTriggerBaseProps & {
+    /** Render as the child element via Slot, merging Select.Trigger's behavior onto it. */
+    asChild: true;
+    /** The single custom trigger element `asChild` merges open/close + aria/keyboard behavior onto. */
+    children: default_2.ReactElement;
+}) | (SelectTriggerBaseProps & {
+    asChild?: false;
+    children?: never;
+});
 
 export { }

package/dist/select.js

@@ -1,4 +1,4 @@
-import { S as r } from "./Select-DjeJOdb7.js";
+import { S as r } from "./Select-DHalg36V.js";
 export {
   r as Select
 };

package/dist/selectfield.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./SelectField-DG7SlT9m.cjs");exports.SelectField=e.SelectField;

package/dist/selectfield.d.ts

@@ -0,0 +1,82 @@
+import { default as default_2 } from 'react';
+
+/** Field-owned props — picked from FieldProps without the HTML div base. */
+declare type FieldOwnProps = Pick<FieldProps, 'name' | 'label' | 'hint' | 'error' | 'required' | 'optional' | 'layout'>;
+
+/** Props for the Field component — the label/input/hint/error assembly layer. */
+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;
+}
+
+/**
+ * SelectField — convenience compound of Field + Select.
+ *
+ * Renders a labelled dropdown with hint, error, and required indicator
+ * fully wired. Prefer this over manually composing Field + Select for
+ * single-selection dropdowns driven by a flat options array.
+ *
+ * @example
+ * <SelectField
+ *   name="country"
+ *   label="Country"
+ *   value={value}
+ *   onValueChange={setValue}
+ *   options={[{ label: 'United States', value: 'us' }]}
+ *   placeholder="Select a country"
+ * />
+ */
+export declare function SelectField({ name, label, hint, error, required, optional, layout, options, placeholder, value, onValueChange, disabled, size, }: SelectFieldProps): default_2.ReactElement;
+
+export declare namespace SelectField {
+    var displayName: string;
+}
+
+/** A single option rendered inside SelectField. */
+export declare interface SelectFieldOption {
+    label: string;
+    value: string;
+}
+
+/**
+ * Props for SelectField.
+ * `error` is a string (error message) from FieldProps.
+ * `placeholder` is passed to the root Select (not to Select.Trigger).
+ */
+export declare interface SelectFieldProps extends FieldOwnProps {
+    /** The currently selected value (controlled). */
+    value: string;
+    /** Called when a new option is selected. */
+    onValueChange: (value: string) => void;
+    /** Options to render inside the dropdown. */
+    options: SelectFieldOption[];
+    /** Placeholder shown in the trigger when no value is selected. */
+    placeholder?: string;
+    /** When true, the trigger is disabled. */
+    disabled?: boolean;
+    /** Size applied to the Select and its sub-components. @default 'md' */
+    size?: 'sm' | 'md' | 'lg';
+}
+
+export { }

package/dist/selectfield.js

@@ -0,0 +1,4 @@
+import { S as o } from "./SelectField-DTfYCDWa.js";
+export {
+  o as SelectField
+};

package/dist/spinner.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Spinner-BZGPmp9c.cjs");exports.Spinner=e.Spinner;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Spinner-CeIDpqkx.cjs");exports.Spinner=e.Spinner;

package/dist/spinner.js

@@ -1,4 +1,4 @@
-import { S as n } from "./Spinner-CZSz1OpT.js";
+import { S as n } from "./Spinner-BYi9eTfl.js";
 export {
   n as Spinner
 };