@itera-web/react-ui-form 1.25.1 → 1.26.0

package/es/Form.d.ts

@@ -2,10 +2,13 @@ import * as React from 'react';
 import { type ControllerProps, type FieldPath, type FieldValues, UseFormReturn } from 'react-hook-form';
 import * as LabelPrimitive from '@radix-ui/react-label';
 type FormLayout = 'horizontal' | 'vertical';
+type LabelWidth = number | string;
 interface FormProps {
     children: React.ReactNode;
     layout?: FormLayout;
     labelLayout?: FormLayout;
+    labelWidth?: LabelWidth;
+    messageBottom?: LabelWidth;
     form: UseFormReturn<any>;
     className?: string;
     style?: React.CSSProperties;
@@ -14,9 +17,11 @@ interface FormProps {
 interface FormLayoutContextValue {
     layout: FormLayout;
     labelLayout: FormLayout;
+    labelWidth?: LabelWidth;
+    messageBottom?: LabelWidth;
 }
 export declare const useFormLayout: () => FormLayoutContextValue;
-declare const Form: ({ children, layout, labelLayout, form, className, style, onSubmit, }: FormProps) => React.JSX.Element;
+declare const Form: ({ children, layout, labelLayout, labelWidth, messageBottom, form, className, style, onSubmit, }: FormProps) => React.JSX.Element;
 declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => React.JSX.Element;
 declare const useFormField: () => {
     invalid: boolean;
@@ -38,5 +43,8 @@ interface FormLabelProps extends React.ComponentPropsWithoutRef<typeof LabelPrim
 declare const FormLabel: React.ForwardRefExoticComponent<FormLabelProps & React.RefAttributes<HTMLLabelElement>>;
 declare const FormControl: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-slot").SlotProps & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
 declare const FormDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
-declare const FormMessage: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+interface FormMessageProps extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> {
+    bottom?: number | string;
+}
+declare const FormMessage: React.ForwardRefExoticComponent<FormMessageProps & React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
 export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField };

package/es/index.js

@@ -1 +1 @@
-import*as e from"react";import*as r from"react-hook-form";import*as t from"@itera-web/react-ui-label";import*as a from"@itera-web/utils-cn";import*as o from"@radix-ui/react-slot";var n={d:(e,r)=>{for(var t in r)n.o(r,t)&&!n.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},o:(e,r)=>Object.prototype.hasOwnProperty.call(e,r)},l={};n.d(l,{l0:()=>b,NI:()=>N,pf:()=>I,Wi:()=>y,xJ:()=>g,lX:()=>w,zG:()=>C,YV:()=>F});const m=(e=>{var r={};return n.d(r,e),r})({Fragment:()=>e.Fragment,createContext:()=>e.createContext,createElement:()=>e.createElement,forwardRef:()=>e.forwardRef,useContext:()=>e.useContext,useId:()=>e.useId});const i=(e=>{var r={};return n.d(r,e),r})({Controller:()=>r.Controller,FormProvider:()=>r.FormProvider,useFormContext:()=>r.useFormContext});const s=(e=>{var r={};return n.d(r,e),r})({Label:()=>t.Label});const c=(e=>{var r={};return n.d(r,e),r})({cn:()=>a.cn});const d=(e=>{var r={};return n.d(r,e),r})({Slot:()=>o.Slot});var f=function(){return f=Object.assign||function(e){for(var r,t=1,a=arguments.length;t<a;t++)for(var o in r=arguments[t])Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);return e},f.apply(this,arguments)},u=function(e,r){var t={};for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&r.indexOf(a)<0&&(t[a]=e[a]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(a=Object.getOwnPropertySymbols(e);o<a.length;o++)r.indexOf(a[o])<0&&Object.prototype.propertyIsEnumerable.call(e,a[o])&&(t[a[o]]=e[a[o]])}return t},p=m.createContext({layout:"vertical",labelLayout:"horizontal"}),v=m.createContext({}),x=function(){return m.useContext(p)},b=function(e){var r=e.children,t=e.layout,a=void 0===t?"vertical":t,o=e.labelLayout,n=void 0===o?"horizontal":o,l=e.form,s=e.className,d=e.style,u=e.onSubmit;return m.createElement(p.Provider,{value:{layout:a,labelLayout:n}},m.createElement(i.FormProvider,f({},l),m.createElement("form",{className:(0,c.cn)("flex gap-[36px] w-full","horizontal"===a?"flex-wrap items-end":"flex-col",s),onSubmit:u&&l.handleSubmit(u),style:d},r)))},y=function(e){var r=u(e,[]);return m.createElement(v.Provider,{value:{name:r.name}},m.createElement(i.Controller,f({},r)))},F=function(){var e=m.useContext(v),r=m.useContext(h),t=(0,i.useFormContext)(),a=t.getFieldState,o=t.formState,n=a(e.name,o);if(!e)throw new Error("useFormField should be used within <FormField>");var l=r.id;return f({id:l,name:e.name,formItemId:"".concat(l,"-form-item"),formDescriptionId:"".concat(l,"-form-item-description"),formMessageId:"".concat(l,"-form-item-message")},n)},h=m.createContext({}),g=m.forwardRef(function(e,r){var t=e.className,a=u(e,["className"]),o=m.useId(),n=x().labelLayout;return m.createElement(h.Provider,{value:{id:o}},m.createElement("div",f({className:(0,c.cn)("text-font relative","horizontal"===n?"flex items-center":"flex flex-col",t),ref:r},a)))});g.displayName="FormItem";var w=m.forwardRef(function(e,r){var t=e.className,a=e.width,o=void 0===a?80:a,n=e.required,l=void 0!==n&&n,i=e.children,d=u(e,["className","width","required","children"]),p=F(),v=p.error,b=p.formItemId,y=x().labelLayout;return m.createElement(s.Label,f({className:(0,c.cn)("flex gap-1 items-center text-font",v&&"text-destructive","horizontal"===y?"text-right pr-[6px]":"text-left pb-2",t),htmlFor:b,ref:r,style:{width:"number"==typeof o?"".concat(o,"px"):o}},d),l?m.createElement(m.Fragment,null,m.createElement("span",{className:"text-red-400"},"*"),i):i)});w.displayName="FormLabel";var N=m.forwardRef(function(e,r){var t=u(e,[]),a=F(),o=a.error,n=a.formItemId,l=a.formDescriptionId,i=a.formMessageId;return m.createElement(d.Slot,f({"aria-describedby":o?"".concat(l," ").concat(i):"".concat(l),"aria-invalid":!!o,id:n,ref:r},t))});N.displayName="FormControl";var I=m.forwardRef(function(e,r){var t=e.className,a=u(e,["className"]),o=F().formDescriptionId;return m.createElement("p",f({className:(0,c.cn)("text-sm text-muted-foreground",t),id:o,ref:r},a))});I.displayName="FormDescription";var C=m.forwardRef(function(e,r){var t,a=e.className,o=e.children,n=u(e,["className","children"]),l=F(),i=l.error,s=l.formMessageId,d=i?String(null!==(t=null==i?void 0:i.message)&&void 0!==t?t:""):o;return d?m.createElement("p",f({className:(0,c.cn)("absolute right-0 bottom-[-24px] h-2 text-sm font-medium text-amber-500",a),id:s,ref:r},n),d):null});C.displayName="FormMessage";var E=l.l0,O=l.NI,P=l.pf,S=l.Wi,L=l.xJ,j=l.lX,z=l.zG,R=l.YV;export{E as Form,O as FormControl,P as FormDescription,S as FormField,L as FormItem,j as FormLabel,z as FormMessage,R as useFormField};
+import*as e from"react";import*as t from"react-hook-form";import*as r from"@itera-web/react-ui-label";import*as o from"@itera-web/utils-cn";import*as a from"@radix-ui/react-slot";var n={d:(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},l={};n.d(l,{l0:()=>x,NI:()=>N,pf:()=>I,Wi:()=>y,xJ:()=>g,lX:()=>w,zG:()=>C,YV:()=>h});const m=(e=>{var t={};return n.d(t,e),t})({Fragment:()=>e.Fragment,createContext:()=>e.createContext,createElement:()=>e.createElement,forwardRef:()=>e.forwardRef,useContext:()=>e.useContext,useId:()=>e.useId});const i=(e=>{var t={};return n.d(t,e),t})({Controller:()=>t.Controller,FormProvider:()=>t.FormProvider,useFormContext:()=>t.useFormContext});const s=(e=>{var t={};return n.d(t,e),t})({Label:()=>r.Label});const c=(e=>{var t={};return n.d(t,e),t})({cn:()=>o.cn});const d=(e=>{var t={};return n.d(t,e),t})({Slot:()=>a.Slot});var f=function(){return f=Object.assign||function(e){for(var t,r=1,o=arguments.length;r<o;r++)for(var a in t=arguments[r])Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a]);return e},f.apply(this,arguments)},u=function(e,t){var r={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(o=Object.getOwnPropertySymbols(e);a<o.length;a++)t.indexOf(o[a])<0&&Object.prototype.propertyIsEnumerable.call(e,o[a])&&(r[o[a]]=e[o[a]])}return r},p=m.createContext({layout:"vertical",labelLayout:"horizontal",labelWidth:void 0,messageBottom:"-24px"}),v=m.createContext({}),b=function(){return m.useContext(p)},x=function(e){var t=e.children,r=e.layout,o=void 0===r?"vertical":r,a=e.labelLayout,n=void 0===a?"horizontal":a,l=e.labelWidth,s=e.messageBottom,d=void 0===s?"-24px":s,u=e.form,v=e.className,b=e.style,x=e.onSubmit;return m.createElement(p.Provider,{value:{layout:o,labelLayout:n,labelWidth:l,messageBottom:d}},m.createElement(i.FormProvider,f({},u),m.createElement("form",{className:(0,c.cn)("flex gap-[36px] w-full","horizontal"===o?"flex-wrap items-end":"flex-col",v),onSubmit:x&&u.handleSubmit(x),style:b},t)))},y=function(e){var t=u(e,[]);return m.createElement(v.Provider,{value:{name:t.name}},m.createElement(i.Controller,f({},t)))},h=function(){var e=m.useContext(v),t=m.useContext(F),r=(0,i.useFormContext)(),o=r.getFieldState,a=r.formState,n=o(e.name,a);if(!e)throw new Error("useFormField should be used within <FormField>");var l=t.id;return f({id:l,name:e.name,formItemId:"".concat(l,"-form-item"),formDescriptionId:"".concat(l,"-form-item-description"),formMessageId:"".concat(l,"-form-item-message")},n)},F=m.createContext({}),g=m.forwardRef(function(e,t){var r=e.className,o=u(e,["className"]),a=m.useId(),n=b().labelLayout;return m.createElement(F.Provider,{value:{id:a}},m.createElement("div",f({className:(0,c.cn)("text-font relative","horizontal"===n?"flex items-center":"flex flex-col",r),ref:t},o)))});g.displayName="FormItem";var w=m.forwardRef(function(e,t){var r=e.className,o=e.width,a=void 0===o?80:o,n=e.required,l=void 0!==n&&n,i=e.children,d=u(e,["className","width","required","children"]),p=h(),v=p.error,x=p.formItemId,y=b(),F=y.labelLayout,g=y.labelWidth;return m.createElement(s.Label,f({className:(0,c.cn)("flex gap-1 items-center text-font",v&&"text-destructive","horizontal"===F?"justify-end pr-[6px]":"pb-2",r),htmlFor:x,ref:t,style:{width:"number"==typeof(a||g)?"".concat(a||g,"px"):a||g}},d),l?m.createElement(m.Fragment,null,m.createElement("span",{className:"text-red-400"},"*"),i):i)});w.displayName="FormLabel";var N=m.forwardRef(function(e,t){var r=u(e,[]),o=h(),a=o.error,n=o.formItemId,l=o.formDescriptionId,i=o.formMessageId;return m.createElement(d.Slot,f({"aria-describedby":a?"".concat(l," ").concat(i):"".concat(l),"aria-invalid":!!a,id:n,ref:t},r))});N.displayName="FormControl";var I=m.forwardRef(function(e,t){var r=e.className,o=u(e,["className"]),a=h().formDescriptionId;return m.createElement("p",f({className:(0,c.cn)("text-sm text-muted-foreground",r),id:a,ref:t},o))});I.displayName="FormDescription";var C=m.forwardRef(function(e,t){var r,o=e.className,a=e.bottom,n=void 0===a?"-24px":a,l=e.children,i=u(e,["className","bottom","children"]),s=h(),d=s.error,p=s.formMessageId,v=d?String(null!==(r=null==d?void 0:d.message)&&void 0!==r?r:""):l,x=b().messageBottom;return v?m.createElement("p",f({className:(0,c.cn)("absolute right-0 h-2 text-sm font-medium text-amber-500",o),id:p,ref:t,style:{bottom:"number"==typeof(n||x)?"-".concat(n||x,"px"):n||x}},i),v):null});C.displayName="FormMessage";var E=l.l0,O=l.NI,P=l.pf,S=l.Wi,L=l.xJ,j=l.lX,z=l.zG,R=l.YV;export{E as Form,O as FormControl,P as FormDescription,S as FormField,L as FormItem,j as FormLabel,z as FormMessage,R as useFormField};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@itera-web/react-ui-form",
   "description": "表单",
-  "version": "1.25.1",
+  "version": "1.26.0",
   "main": "es/index.js",
   "types": "es/index.d.ts",
   "publishConfig": {
@@ -26,5 +26,5 @@
   "devDependencies": {
     "@itera-web/cli": "^1.1.54"
   },
-  "gitHead": "4bca59865fd424387a903f5f0bcbb45c58a1b1bc"
+  "gitHead": "d62050163366a62b2cd51c3bb76164cba1794031"
 }