@vhyxui/react 0.1.2-alpha.1 → 0.1.3-alpha

package/dist/{Button-CXYpuBRu.cjs → Button-AkUYT9eN.cjs}

@@ -1 +1 @@
-"use strict";const t=require("./jsx-runtime-BRMkMA8J.cjs"),b=require("react"),i=require("@vhyxui/core"),C=require("@vhyxseal/react"),S=require("./Spinner-BnxdanY6.cjs"),I=require("./useId-D2AEOm2G.cjs"),V="_button_1wjdv_1",g="_content_1wjdv_57",z="_spinner_1wjdv_190",D="_icon_1wjdv_198",n={button:V,content:g,spinner:z,icon:D},m=b.forwardRef(({variant:a="primary",size:j="md",loading:r=!1,icon:e,iconPosition:u="left",iconOnly:s=!1,asChild:f=!1,contract:c,className:v,children:d,disabled:_,id:y,"aria-label":l,...N},x)=>{const R=I.useId("vhyx-button"),o=y??R;process.env.NODE_ENV!=="production"&&s&&!l&&console.warn("[VhyxUI] <Button iconOnly> requires an aria-label for accessibility. Screen reader users will not be able to identify this button.");const w=b.useMemo(()=>{const B=a==="destructive"?{safetyLevel:"high",destructive:!0,requiresConfirmation:!0}:{};return{...i.buttonContract,id:o,...B,...c}},[a,o,c]),E=_??r,q=[n.button,v].filter(Boolean).join(" "),p={id:o,className:q,"aria-busy":r?!0:void 0,"aria-label":l,"data-variant":a,"data-size":j,"data-loading":r?!0:void 0,"data-icon-only":s?!0:void 0,"data-vhyx-contract":JSON.stringify(w),...N};return f?t.jsxRuntimeExports.jsx(i.Slot,{ref:x,...p,children:d}):t.jsxRuntimeExports.jsxs("button",{ref:x,disabled:E,...p,children:[r&&t.jsxRuntimeExports.jsx(S.Spinner,{size:"sm",variant:"white","aria-hidden":"true",label:"",className:n.spinner}),e&&u==="left"&&!s&&t.jsxRuntimeExports.jsx("span",{className:n.icon,"aria-hidden":"true",children:e}),s&&e?t.jsxRuntimeExports.jsx("span",{className:n.icon,"aria-hidden":"true",children:e}):!s&&t.jsxRuntimeExports.jsx("span",{className:n.content,children:d}),e&&u==="right"&&!s&&t.jsxRuntimeExports.jsx("span",{className:n.icon,"aria-hidden":"true",children:e})]})});m.displayName="VhyxButton";const U={...i.buttonContract,id:"vhyxui-button"},h=C.withAgentContract(m,U);h.displayName="VhyxButton";exports.Button=h;
+"use strict";const t=require("./jsx-runtime-BRMkMA8J.cjs"),b=require("react"),i=require("@vhyxui/core"),C=require("@vhyxseal/react"),S=require("./Spinner-BZGPmp9c.cjs"),I=require("./useId-D2AEOm2G.cjs"),V="_button_1wjdv_1",g="_content_1wjdv_57",z="_spinner_1wjdv_190",D="_icon_1wjdv_198",n={button:V,content:g,spinner:z,icon:D},m=b.forwardRef(({variant:a="primary",size:j="md",loading:r=!1,icon:e,iconPosition:u="left",iconOnly:s=!1,asChild:f=!1,contract:c,className:v,children:d,disabled:_,id:y,"aria-label":l,...N},x)=>{const R=I.useId("vhyx-button"),o=y??R;process.env.NODE_ENV!=="production"&&s&&!l&&console.warn("[VhyxUI] <Button iconOnly> requires an aria-label for accessibility. Screen reader users will not be able to identify this button.");const w=b.useMemo(()=>{const B=a==="destructive"?{safetyLevel:"high",destructive:!0,requiresConfirmation:!0}:{};return{...i.buttonContract,id:o,...B,...c}},[a,o,c]),E=_??r,q=[n.button,v].filter(Boolean).join(" "),p={id:o,className:q,"aria-busy":r?!0:void 0,"aria-label":l,"data-variant":a,"data-size":j,"data-loading":r?!0:void 0,"data-icon-only":s?!0:void 0,"data-vhyx-contract":JSON.stringify(w),...N};return f?t.jsxRuntimeExports.jsx(i.Slot,{ref:x,...p,children:d}):t.jsxRuntimeExports.jsxs("button",{ref:x,disabled:E,...p,children:[r&&t.jsxRuntimeExports.jsx(S.Spinner,{size:"sm",variant:"white","aria-hidden":"true",label:"",className:n.spinner}),e&&u==="left"&&!s&&t.jsxRuntimeExports.jsx("span",{className:n.icon,"aria-hidden":"true",children:e}),s&&e?t.jsxRuntimeExports.jsx("span",{className:n.icon,"aria-hidden":"true",children:e}):!s&&t.jsxRuntimeExports.jsx("span",{className:n.content,children:d}),e&&u==="right"&&!s&&t.jsxRuntimeExports.jsx("span",{className:n.icon,"aria-hidden":"true",children:e})]})});m.displayName="VhyxButton";const U={...i.buttonContract,id:"vhyxui-button"},h=C.withAgentContract(m,U);h.displayName="VhyxButton";exports.Button=h;

package/dist/{Button-QbTKz5tH.js → Button-D7eX45GC.js}

@@ -2,7 +2,7 @@ import { j as t } from "./jsx-runtime-CL69jGNW.js";
 import C, { useMemo as S } from "react";
 import { buttonContract as p, Slot as g } from "@vhyxui/core";
 import { withAgentContract as I } from "@vhyxseal/react";
-import { S as V } from "./Spinner-yO4MNEkL.js";
+import { S as V } from "./Spinner-CZSz1OpT.js";
 import { u as E } from "./useId-BGRmH6iF.js";
 const R = "_button_1wjdv_1", U = "_content_1wjdv_57", q = "_spinner_1wjdv_190", z = "_icon_1wjdv_198", a = {
   button: R,

package/dist/SelectField-BYmKwRVU.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("./jsx-runtime-BRMkMA8J.cjs"),R=require("./Field-D6FSsUGj.cjs"),t=require("./Select-C9yB2B8M.cjs");function r({name:l,label:i,hint:n,error:c,required:x,optional:u,layout:d,options:j,placeholder:o,value:m,onValueChange:a,disabled:S,size:p}){return e.jsxRuntimeExports.jsx(R.Field,{name:l,label:i,hint:n,error:c,required:x,optional:u,layout:d,children:e.jsxRuntimeExports.jsxs(t.Select,{value:m,onValueChange:a,disabled:S,size:p,placeholder:o,children:[e.jsxRuntimeExports.jsx(t.Select.Trigger,{"aria-label":typeof i=="string"?i:void 0}),e.jsxRuntimeExports.jsx(t.Select.Content,{children:j.map(s=>e.jsxRuntimeExports.jsx(t.Select.Item,{value:s.value,children:s.label},s.value))})]})})}r.displayName="VhyxSelectField";exports.SelectField=r;

package/dist/SelectField-DL7K4ZhA.js

@@ -0,0 +1,49 @@
+import { j as e } from "./jsx-runtime-CL69jGNW.js";
+import { F as f } from "./Field-Bv07PL2M.js";
+import { S as r } from "./Select-DjeJOdb7.js";
+function h({
+  name: s,
+  label: i,
+  hint: t,
+  error: a,
+  required: n,
+  optional: m,
+  layout: o,
+  options: d,
+  placeholder: x,
+  value: c,
+  onValueChange: j,
+  disabled: p,
+  size: u
+}) {
+  return /* @__PURE__ */ e.jsx(
+    f,
+    {
+      name: s,
+      label: i,
+      hint: t,
+      error: a,
+      required: n,
+      optional: m,
+      layout: o,
+      children: /* @__PURE__ */ e.jsxs(
+        r,
+        {
+          value: c,
+          onValueChange: j,
+          disabled: p,
+          size: u,
+          placeholder: x,
+          children: [
+            /* @__PURE__ */ e.jsx(r.Trigger, { "aria-label": typeof i == "string" ? i : void 0 }),
+            /* @__PURE__ */ e.jsx(r.Content, { children: d.map((l) => /* @__PURE__ */ e.jsx(r.Item, { value: l.value, children: l.label }, l.value)) })
+          ]
+        }
+      )
+    }
+  );
+}
+h.displayName = "VhyxSelectField";
+export {
+  h as S
+};

package/dist/Spinner-BZGPmp9c.cjs

@@ -0,0 +1 @@
+"use strict";const n=require("./jsx-runtime-BRMkMA8J.cjs"),x=require("react"),d=require("@vhyxui/core"),u=require("@vhyxseal/react"),h="_spinner_1udc2_1",m={spinner:h},r={xs:12,sm:20,md:32,lg:48,xl:64},s=x.forwardRef(({size:t="md",variant:o="default",label:e="Loading",className:a,...c},p)=>{const l=[m.spinner,a].filter(Boolean).join(" ");return n.jsxRuntimeExports.jsxs("svg",{ref:p,role:"status","aria-label":e,width:r[t],height:r[t],viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:l,"data-size":t,"data-variant":o,...c,children:[n.jsxRuntimeExports.jsx("title",{children:e}),n.jsxRuntimeExports.jsx("circle",{cx:12,cy:12,r:9,strokeWidth:2.5,stroke:"currentColor",opacity:.2}),n.jsxRuntimeExports.jsx("path",{d:"M12 3a9 9 0 0 1 9 9",strokeWidth:2.5,stroke:"currentColor",strokeLinecap:"round"})]})});s.displayName="VhyxSpinner";const j={...d.spinnerContract,id:"vhyxui-spinner"},i=u.withAgentContract(s,j);i.displayName="VhyxSpinner";exports.Spinner=i;

package/dist/{Spinner-yO4MNEkL.js → Spinner-CZSz1OpT.js}

@@ -1,31 +1,39 @@
 import { j as r } from "./jsx-runtime-CL69jGNW.js";
-import c from "react";
-import { spinnerContract as l } from "@vhyxui/core";
-import { withAgentContract as d } from "@vhyxseal/react";
-const m = "_spinner_1udc2_1", x = {
-  spinner: m
-}, t = c.forwardRef(
+import l from "react";
+import { spinnerContract as d } from "@vhyxui/core";
+import { withAgentContract as m } from "@vhyxseal/react";
+const x = "_spinner_1udc2_1", h = {
+  spinner: x
+}, s = {
+  xs: 12,
+  sm: 20,
+  md: 32,
+  lg: 48,
+  xl: 64
+}, e = l.forwardRef(
   ({
-    size: s = "md",
-    variant: e = "default",
+    size: t = "md",
+    variant: o = "default",
     label: n = "Loading",
-    className: o,
-    ...i
-  }, a) => {
-    const p = [x.spinner, o].filter(Boolean).join(" ");
+    className: i,
+    ...a
+  }, c) => {
+    const p = [h.spinner, i].filter(Boolean).join(" ");
     return /* @__PURE__ */ r.jsxs(
       "svg",
       {
-        ref: a,
+        ref: c,
         role: "status",
         "aria-label": n,
+        width: s[t],
+        height: s[t],
         viewBox: "0 0 24 24",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
         className: p,
-        "data-size": s,
-        "data-variant": e,
-        ...i,
+        "data-size": t,
+        "data-variant": o,
+        ...a,
         children: [
           /* @__PURE__ */ r.jsx("title", { children: n }),
           /* @__PURE__ */ r.jsx(
@@ -53,9 +61,9 @@ const m = "_spinner_1udc2_1", x = {
     );
   }
 );
-t.displayName = "VhyxSpinner";
-const h = { ...l, id: "vhyxui-spinner" }, f = d(t, h);
-f.displayName = "VhyxSpinner";
+e.displayName = "VhyxSpinner";
+const f = { ...d, id: "vhyxui-spinner" }, u = m(e, f);
+u.displayName = "VhyxSpinner";
 export {
-  f as S
+  u as S
 };

package/dist/TextField-C3r-6jr6.cjs

@@ -0,0 +1 @@
+"use strict";const i=require("./jsx-runtime-BRMkMA8J.cjs"),c=require("./Field-D6FSsUGj.cjs"),o=require("./Input-UQ2fQwE7.cjs");function s({name:e,label:r,hint:n,error:t,required:u,optional:x,layout:d,...l}){return i.jsxRuntimeExports.jsx(c.Field,{name:e,label:r,hint:n,error:t,required:u,optional:x,layout:d,children:i.jsxRuntimeExports.jsx(o.Input,{name:e,error:!!t,...l})})}s.displayName="VhyxTextField";exports.TextField=s;

package/dist/TextField-DtXQQJJk.js

@@ -0,0 +1,31 @@
+import { j as i } from "./jsx-runtime-CL69jGNW.js";
+import { F as a } from "./Field-Bv07PL2M.js";
+import { I as d } from "./Input-BS_t1bl-.js";
+function l({
+  name: r,
+  label: e,
+  hint: o,
+  error: t,
+  required: s,
+  optional: x,
+  layout: m,
+  ...p
+}) {
+  return /* @__PURE__ */ i.jsx(
+    a,
+    {
+      name: r,
+      label: e,
+      hint: o,
+      error: t,
+      required: s,
+      optional: x,
+      layout: m,
+      children: /* @__PURE__ */ i.jsx(d, { name: r, error: !!t, ...p })
+    }
+  );
+}
+l.displayName = "VhyxTextField";
+export {
+  l as T
+};

package/dist/TextareaField-CpqPinvx.js

@@ -0,0 +1,31 @@
+import { j as a } from "./jsx-runtime-CL69jGNW.js";
+import { F as p } from "./Field-Bv07PL2M.js";
+import { T as d } from "./Textarea-CLrctxHU.js";
+function l({
+  name: r,
+  label: t,
+  hint: i,
+  error: e,
+  required: o,
+  optional: s,
+  layout: x,
+  ...m
+}) {
+  return /* @__PURE__ */ a.jsx(
+    p,
+    {
+      name: r,
+      label: t,
+      hint: i,
+      error: e,
+      required: o,
+      optional: s,
+      layout: x,
+      children: /* @__PURE__ */ a.jsx(d, { name: r, error: !!e, ...m })
+    }
+  );
+}
+l.displayName = "VhyxTextareaField";
+export {
+  l as T
+};

package/dist/TextareaField-D234Lyi_.cjs

@@ -0,0 +1 @@
+"use strict";const t=require("./jsx-runtime-BRMkMA8J.cjs"),l=require("./Field-D6FSsUGj.cjs"),c=require("./Textarea-H6evM8L4.cjs");function i({name:e,label:s,hint:x,error:r,required:a,optional:n,layout:u,...d}){return t.jsxRuntimeExports.jsx(l.Field,{name:e,label:s,hint:x,error:r,required:a,optional:n,layout:u,children:t.jsxRuntimeExports.jsx(c.Textarea,{name:e,error:!!r,...d})})}i.displayName="VhyxTextareaField";exports.TextareaField=i;

package/dist/button.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./Button-CXYpuBRu.cjs");exports.Button=t.Button;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./Button-AkUYT9eN.cjs");exports.Button=t.Button;

package/dist/button.js

@@ -1,4 +1,4 @@
-import { B as r } from "./Button-QbTKz5tH.js";
+import { B as r } from "./Button-D7eX45GC.js";
 export {
   r as Button
 };

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("./VhyxUIProvider-C7ie8u2L.cjs"),d=require("./Button-CXYpuBRu.cjs"),l=require("./Input-UQ2fQwE7.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-BnxdanY6.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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("./VhyxUIProvider-C7ie8u2L.cjs"),u=require("./Button-AkUYT9eN.cjs"),l=require("./Input-UQ2fQwE7.cjs"),T=require("./Textarea-H6evM8L4.cjs"),q=require("./Select-C9yB2B8M.cjs"),g=require("./Checkbox-DvkT6QP9.cjs"),c=require("./RadioItem-BfkTHBxQ.cjs"),F=require("./Switch-BU_Tcttb.cjs"),s=require("./Field-D6FSsUGj.cjs"),m=require("./TextField-C3r-6jr6.cjs"),x=require("./SelectField-BYmKwRVU.cjs"),S=require("./TextareaField-D234Lyi_.cjs"),t=require("./Toast-ndaxbpcV.cjs"),P=require("./Alert-BJ1O0bnK.cjs"),f=require("./Badge-RM7n86Rq.cjs"),b=require("./Progress-FO-4WX0i.cjs"),v=require("./Spinner-BZGPmp9c.cjs"),I=require("./Dialog-gPT4noD8.cjs"),h=require("./Drawer-BygSIQQn.cjs"),w=require("./Tooltip-CCd6VRvZ.cjs"),B=require("./Popover-BPFkS4xn.cjs"),C=require("./Card-d5xrWgQS.cjs"),D=require("./Separator-C5lPGzes.cjs"),y=require("./Tabs-DuU02-UD.cjs"),A=require("./Breadcrumb-StitgXXx.cjs"),R=require("./Pagination-CmmcBPNz.cjs"),U=5e3;function o(i,r,e){const n={message:i,variant:r,duration:(e==null?void 0:e.duration)??U,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 k=a;exports.VhyxUIProvider=d.VhyxUIProvider;exports.Button=u.Button;exports.Input=l.Input;exports.Textarea=T.Textarea;exports.Select=q.Select;exports.Checkbox=g.Checkbox;exports.RadioGroup=c.RadioGroup;exports.RadioItem=c.RadioItem;exports.Switch=F.Switch;exports.Field=s.Field;exports.Form=s.Form;exports.useFormContext=s.useFormContext;exports.TextField=m.TextField;exports.SelectField=x.SelectField;exports.TextareaField=S.TextareaField;exports.Toast=t.Toast;exports.ToastProvider=t.ToastProvider;exports.Alert=P.Alert;exports.Badge=f.Badge;exports.Progress=b.Progress;exports.Spinner=v.Spinner;exports.Dialog=I.Dialog;exports.Drawer=h.Drawer;exports.Tooltip=w.Tooltip;exports.Popover=B.Popover;exports.Card=C.Card;exports.Separator=D.Separator;exports.Tabs=y.Tabs;exports.Breadcrumb=A.Breadcrumb;exports.Pagination=R.Pagination;exports.toast=k;

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'> {
     /**
@@ -802,6 +811,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 {
@@ -987,6 +1045,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 +1095,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-QbTKz5tH.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-D7eX45GC.js";
+import { I as S } from "./Input-BS_t1bl-.js";
+import { T as P } from "./Textarea-CLrctxHU.js";
+import { S as v } from "./Select-DjeJOdb7.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-DL7K4ZhA.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-yO4MNEkL.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-Fuc7l-1E.js";
+import { P as Q } from "./Progress-DWLr6Bq2.js";
+import { S as X } from "./Spinner-CZSz1OpT.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-MxUovsIt.js";
+import { C as fr } from "./Card-D7ZNeWtE.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/selectfield.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./SelectField-BYmKwRVU.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-DL7K4ZhA.js";
+export {
+  o as SelectField
+};

package/dist/spinner.cjs

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

package/dist/spinner.js

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

package/dist/textareafield.cjs

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

package/dist/textareafield.d.ts

@@ -0,0 +1,84 @@
+import { ComponentContract } from '@vhyxui/core';
+import { default as default_2 } from 'react';
+
+/** 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'>;
+
+/** 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;
+}
+
+/**
+ * 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 & Omit<TextareaProps, 'id' | 'error'>;
+
+/** Props for the Textarea component. */
+declare interface TextareaProps extends default_2.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /** Size of the textarea. @default 'md' */
+    size?: TextareaSize;
+    /**
+     * Resize behaviour.
+     * 'auto' makes the textarea grow with content up to maxRows.
+     * @default 'vertical'
+     */
+    resize?: TextareaResize;
+    /** Minimum number of visible rows. @default 3 */
+    minRows?: number;
+    /** Maximum number of rows before scroll activates. Applies when resize='auto'. */
+    maxRows?: number;
+    /** When true, renders a character count below the textarea. Requires maxLength. */
+    showCount?: boolean;
+    /** When true, applies error visual state and sets aria-invalid. */
+    error?: boolean;
+    /** VhyxSeal contract override — merged with the default textarea contract. */
+    contract?: Partial<ComponentContract>;
+}
+
+/** Resize behaviour for the textarea. */
+declare type TextareaResize = 'none' | 'vertical' | 'horizontal' | 'both' | 'auto';
+
+/** Size tokens available on the Textarea component. */
+declare type TextareaSize = 'sm' | 'md' | 'lg';
+
+export { }

package/dist/textareafield.js

@@ -0,0 +1,4 @@
+import { T as r } from "./TextareaField-CpqPinvx.js";
+export {
+  r as TextareaField
+};

package/dist/textfield.cjs

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

package/dist/textfield.d.ts

@@ -0,0 +1,82 @@
+import { ComponentContract } from '@vhyxui/core';
+import { default as default_2 } from 'react';
+
+/** 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'>;
+
+/** 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;
+}
+
+/** Props for the Input component. */
+declare interface InputProps extends Omit<default_2.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> {
+    /** Size of the input, maps to --vhyx-size-* height tokens. @default 'md' */
+    size?: InputSize;
+    /** Optional icon element rendered inside the input. */
+    icon?: default_2.ReactNode;
+    /** Side the icon appears on. @default 'left' */
+    iconPosition?: 'left' | 'right';
+    /** Content rendered after the input (inside the wrapper, to the right). */
+    suffix?: default_2.ReactNode;
+    /** Content rendered before the input (inside the wrapper, to the left). */
+    prefix?: default_2.ReactNode;
+    /** When true, always shows a clear button regardless of type. */
+    clearable?: boolean;
+    /** Called when the clear button is clicked. */
+    onClear?: () => void;
+    /** When true, applies the error visual state and sets aria-invalid. */
+    error?: boolean;
+    /** VhyxSeal contract override — merged with the default input contract. */
+    contract?: Partial<ComponentContract>;
+}
+
+/** Size tokens available on the Input component. */
+declare type InputSize = '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 { }

package/dist/textfield.js

@@ -0,0 +1,4 @@
+import { T as r } from "./TextField-DtXQQJJk.js";
+export {
+  r as TextField
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vhyxui/react",
-  "version": "0.1.2-alpha.1",
+  "version": "0.1.3-alpha",
   "description": "VhyxUI React components — accessible, motion-first, agent-ready",
   "license": "MIT",
   "private": false,
@@ -124,6 +124,21 @@
       "require": "./dist/pagination.cjs",
       "types": "./dist/pagination.d.ts"
     },
+    "./textfield": {
+      "import": "./dist/textfield.js",
+      "require": "./dist/textfield.cjs",
+      "types": "./dist/textfield.d.ts"
+    },
+    "./selectfield": {
+      "import": "./dist/selectfield.js",
+      "require": "./dist/selectfield.cjs",
+      "types": "./dist/selectfield.d.ts"
+    },
+    "./textareafield": {
+      "import": "./dist/textareafield.js",
+      "require": "./dist/textareafield.cjs",
+      "types": "./dist/textareafield.d.ts"
+    },
     "./test-utils": {
       "import": "./dist/test-utils.js",
       "require": "./dist/test-utils.cjs",

package/dist/Spinner-BnxdanY6.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("./jsx-runtime-BRMkMA8J.cjs"),l=require("react"),x=require("@vhyxui/core"),u=require("@vhyxseal/react"),d="_spinner_1udc2_1",h={spinner:d},r=l.forwardRef(({size:s="md",variant:i="default",label:n="Loading",className:o,...a},c)=>{const p=[h.spinner,o].filter(Boolean).join(" ");return e.jsxRuntimeExports.jsxs("svg",{ref:c,role:"status","aria-label":n,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:p,"data-size":s,"data-variant":i,...a,children:[e.jsxRuntimeExports.jsx("title",{children:n}),e.jsxRuntimeExports.jsx("circle",{cx:12,cy:12,r:9,strokeWidth:2.5,stroke:"currentColor",opacity:.2}),e.jsxRuntimeExports.jsx("path",{d:"M12 3a9 9 0 0 1 9 9",strokeWidth:2.5,stroke:"currentColor",strokeLinecap:"round"})]})});r.displayName="VhyxSpinner";const j={...x.spinnerContract,id:"vhyxui-spinner"},t=u.withAgentContract(r,j);t.displayName="VhyxSpinner";exports.Spinner=t;