@codefast/ui 0.0.47 → 0.0.48
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/react/form.d.mts +6 -6
- package/dist/react/form.d.ts +6 -6
- package/dist/react/form.js +1 -1
- package/dist/react/form.js.map +1 -1
- package/dist/react/form.mjs +1 -1
- package/dist/react/form.mjs.map +1 -1
- package/package.json +5 -5
- package/src/react/form.tsx +8 -6
package/dist/react/form.d.mts
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
import * as _radix_ui_react_slot from '@radix-ui/react-slot';
|
|
2
2
|
import { Slot } from '@radix-ui/react-slot';
|
|
3
3
|
import * as react_hook_form from 'react-hook-form';
|
|
4
|
-
import { FieldError, FormProvider, FieldValues, FieldPath, ControllerProps } from 'react-hook-form';
|
|
4
|
+
import { FieldError, Merge, FieldErrorsImpl, FormProvider, FieldValues, FieldPath, ControllerProps } from 'react-hook-form';
|
|
5
5
|
import * as React from 'react';
|
|
6
6
|
import * as LabelPrimitive from '@radix-ui/react-label';
|
|
7
7
|
|
|
8
8
|
declare const useFormField: () => {
|
|
9
|
+
error?: FieldError | Merge<FieldError, FieldErrorsImpl> | undefined;
|
|
10
|
+
formDescriptionId: string;
|
|
11
|
+
formItemId: string;
|
|
12
|
+
formMessageId: string;
|
|
13
|
+
id: string;
|
|
9
14
|
invalid: boolean;
|
|
10
15
|
isDirty: boolean;
|
|
11
16
|
isTouched: boolean;
|
|
12
17
|
isValidating: boolean;
|
|
13
|
-
error?: FieldError | undefined;
|
|
14
|
-
id: string;
|
|
15
18
|
name: string;
|
|
16
|
-
formItemId: string;
|
|
17
|
-
formDescriptionId: string;
|
|
18
|
-
formMessageId: string;
|
|
19
19
|
};
|
|
20
20
|
type FormProps = React.ComponentProps<typeof FormProvider>;
|
|
21
21
|
declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues extends FieldValues | undefined = undefined>(props: react_hook_form.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
|
package/dist/react/form.d.ts
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
import * as _radix_ui_react_slot from '@radix-ui/react-slot';
|
|
2
2
|
import { Slot } from '@radix-ui/react-slot';
|
|
3
3
|
import * as react_hook_form from 'react-hook-form';
|
|
4
|
-
import { FieldError, FormProvider, FieldValues, FieldPath, ControllerProps } from 'react-hook-form';
|
|
4
|
+
import { FieldError, Merge, FieldErrorsImpl, FormProvider, FieldValues, FieldPath, ControllerProps } from 'react-hook-form';
|
|
5
5
|
import * as React from 'react';
|
|
6
6
|
import * as LabelPrimitive from '@radix-ui/react-label';
|
|
7
7
|
|
|
8
8
|
declare const useFormField: () => {
|
|
9
|
+
error?: FieldError | Merge<FieldError, FieldErrorsImpl> | undefined;
|
|
10
|
+
formDescriptionId: string;
|
|
11
|
+
formItemId: string;
|
|
12
|
+
formMessageId: string;
|
|
13
|
+
id: string;
|
|
9
14
|
invalid: boolean;
|
|
10
15
|
isDirty: boolean;
|
|
11
16
|
isTouched: boolean;
|
|
12
17
|
isValidating: boolean;
|
|
13
|
-
error?: FieldError | undefined;
|
|
14
|
-
id: string;
|
|
15
18
|
name: string;
|
|
16
|
-
formItemId: string;
|
|
17
|
-
formDescriptionId: string;
|
|
18
|
-
formMessageId: string;
|
|
19
19
|
};
|
|
20
20
|
type FormProps = React.ComponentProps<typeof FormProvider>;
|
|
21
21
|
declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues extends FieldValues | undefined = undefined>(props: react_hook_form.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
|
package/dist/react/form.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";var _chunkLG7ACTREjs = require('../chunk-LG7ACTRE.js');var _chunkHQ4AUOQMjs = require('../chunk-HQ4AUOQM.js');var _react = require('react'); var t = _interopRequireWildcard(_react);var _reactslot = require('@radix-ui/react-slot');var _reacthookform = require('react-hook-form');var _jsxruntime = require('react/jsx-runtime');var p=t.createContext(null),c=t.createContext(null),n= exports.useFormField =()=>{let e=t.useContext(p),
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";var _chunkLG7ACTREjs = require('../chunk-LG7ACTRE.js');var _chunkHQ4AUOQMjs = require('../chunk-HQ4AUOQM.js');var _react = require('react'); var t = _interopRequireWildcard(_react);var _reactslot = require('@radix-ui/react-slot');var _reacthookform = require('react-hook-form');var _jsxruntime = require('react/jsx-runtime');var p=t.createContext(null),c=t.createContext(null),n= exports.useFormField =()=>{let e=t.useContext(p),r=t.useContext(c),{getFieldState:o,formState:m}=_reacthookform.useFormContext.call(void 0, );if(!e||!r)throw new Error("useFormField should be used within <FormField>");let s=o(e.name,m),{id:i}=r;return{id:i,name:e.name,formItemId:`form-item-${i}`,formDescriptionId:`form-item-description-${i}`,formMessageId:`form-item-message-${i}`,...s}},b= exports.Form =_reacthookform.FormProvider;function h({...e}){return _jsxruntime.jsx.call(void 0, p.Provider,{value:{name:e.name},children:_jsxruntime.jsx.call(void 0, _reacthookform.Controller,{...e})})}var R=t.forwardRef(({className:e,...r},o)=>{let m=t.useId();return _jsxruntime.jsx.call(void 0, c.Provider,{value:{id:m},children:_jsxruntime.jsx.call(void 0, "div",{ref:o,className:_chunkHQ4AUOQMjs.b.call(void 0, "space-y-2",e),...r})})});R.displayName="FormItem";var g=t.forwardRef(({className:e,...r},o)=>{let{error:m,formItemId:s}=n();return _jsxruntime.jsx.call(void 0, _chunkLG7ACTREjs.a,{ref:o,className:_chunkHQ4AUOQMjs.b.call(void 0, m&&"text-destructive",e),htmlFor:s,...r})});g.displayName="FormLabel";var I=t.forwardRef(({...e},r)=>{let{error:o,formItemId:m,formDescriptionId:s,formMessageId:i}=n();return _jsxruntime.jsx.call(void 0, _reactslot.Slot,{ref:r,id:m,"aria-describedby":o?`${s} ${i}`:s,"aria-invalid":!!o,...e})});I.displayName="FormControl";var x=t.forwardRef(({className:e,...r},o)=>{let{formDescriptionId:m}=n();return _jsxruntime.jsx.call(void 0, "p",{ref:o,id:m,className:_chunkHQ4AUOQMjs.b.call(void 0, "text-muted-foreground text-xs",e),...r})});x.displayName="FormDescription";var C=t.forwardRef(({children:e,className:r,...o},m)=>{let{error:s,formMessageId:i}=n(),d=_optionalChain([s, 'optionalAccess', _ => _.message])?String(s.message):e;return d?_jsxruntime.jsx.call(void 0, "p",{ref:m,id:i,className:_chunkHQ4AUOQMjs.b.call(void 0, "text-destructive text-xs font-medium",r),...o,children:d}):null});C.displayName="FormMessage";exports.Form = b; exports.FormControl = I; exports.FormDescription = x; exports.FormField = h; exports.FormItem = R; exports.FormLabel = g; exports.FormMessage = C; exports.useFormField = n;
|
|
2
2
|
//# sourceMappingURL=form.js.map
|
package/dist/react/form.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/react/form.tsx"],"names":["React","Slot","Controller","FormProvider","useFormContext","jsx","FormFieldContext","FormItemContext","useFormField","fieldContext","itemContext","getFieldState","formState","fieldState","id","Form","FormField","props","FormItem","className","ref","cn","FormLabel","error","formItemId","Label","FormControl","formDescriptionId","formMessageId","FormDescription","FormMessage","children","body"],"mappings":"+FAEA,UAAYA,MAAW,QAEvB,OAAS,QAAAC,MAAY,uBACrB,OACE,cAAAC,
|
|
1
|
+
{"version":3,"sources":["../../src/react/form.tsx"],"names":["React","Slot","Controller","FormProvider","useFormContext","jsx","FormFieldContext","FormItemContext","useFormField","fieldContext","itemContext","getFieldState","formState","fieldState","id","Form","FormField","props","FormItem","className","ref","cn","FormLabel","error","formItemId","Label","FormControl","formDescriptionId","formMessageId","FormDescription","FormMessage","children","body"],"mappings":"+FAEA,UAAYA,MAAW,QAEvB,OAAS,QAAAC,MAAY,uBACrB,OACE,cAAAC,EAMA,gBAAAC,EAEA,kBAAAC,MACK,kBAiFD,cAAAC,MAAA,oBA9DN,IAAMC,EAAyB,gBAC7B,IACF,EAEMC,EAAwB,gBAA2C,IAAI,EAEvEC,EAAe,IAWhB,CACH,IAAMC,EAAqB,aAAWH,CAAgB,EAChDI,EAAoB,aAAWH,CAAe,EAC9C,CAAE,cAAAI,EAAe,UAAAC,CAAU,EAAIR,EAAe,EAEpD,GAAI,CAACK,GAAgB,CAACC,EACpB,MAAM,IAAI,MAAM,gDAAgD,EAGlE,IAAMG,EAAaF,EAAcF,EAAa,KAAMG,CAAS,EAEvD,CAAE,GAAAE,CAAG,EAAIJ,EAEf,MAAO,CACL,GAAAI,EACA,KAAML,EAAa,KACnB,WAAY,aAAaK,CAAE,GAC3B,kBAAmB,yBAAyBA,CAAE,GAC9C,cAAe,qBAAqBA,CAAE,GACtC,GAAGD,CACL,CACF,EAOME,EAAOZ,EAWb,SAASa,EAGP,CAAE,GAAGC,CAAM,EAA2D,CACtE,OACEZ,EAACC,EAAiB,SAAjB,CAA0B,MAAO,CAAE,KAAMW,EAAM,IAAK,EACnD,SAAAZ,EAACH,EAAA,CAAY,GAAGe,EAAO,EACzB,CAEJ,CASA,IAAMC,EAAiB,aACrB,CAAC,CAAE,UAAAC,EAAW,GAAGF,CAAM,EAAGG,IAAQ,CAChC,IAAMN,EAAW,QAAM,EAEvB,OACET,EAACE,EAAgB,SAAhB,CAAyB,MAAO,CAAE,GAAAO,CAAG,EACpC,SAAAT,EAAC,OAAI,IAAKe,EAAK,UAAWC,EAAG,YAAaF,CAAS,EAAI,GAAGF,EAAO,EACnE,CAEJ,CACF,EAEAC,EAAS,YAAc,WAWvB,IAAMI,EAAkB,aACtB,CAAC,CAAE,UAAAH,EAAW,GAAGF,CAAM,EAAGG,IAAQ,CAChC,GAAM,CAAE,MAAAG,EAAO,WAAAC,CAAW,EAAIhB,EAAa,EAE3C,OACEH,EAACoB,EAAA,CACC,IAAKL,EACL,UAAWC,EAAGE,GAAS,mBAAoBJ,CAAS,EACpD,QAASK,EACR,GAAGP,EACN,CAEJ,CACF,EAEAK,EAAU,YAAc,YASxB,IAAMI,EAAoB,aACxB,CAAC,CAAE,GAAGT,CAAM,EAAGG,IAAQ,CACrB,GAAM,CAAE,MAAAG,EAAO,WAAAC,EAAY,kBAAAG,EAAmB,cAAAC,CAAc,EAC1DpB,EAAa,EAEf,OACEH,EAACJ,EAAA,CACC,IAAKmB,EACL,GAAII,EACJ,mBACGD,EAA4B,GAAGI,CAAiB,IAAIC,CAAa,GAAzDD,EAEX,eAAc,EAAQJ,EACrB,GAAGN,EACN,CAEJ,CACF,EAEAS,EAAY,YAAc,cAS1B,IAAMG,EAAwB,aAG5B,CAAC,CAAE,UAAAV,EAAW,GAAGF,CAAM,EAAGG,IAAQ,CAClC,GAAM,CAAE,kBAAAO,CAAkB,EAAInB,EAAa,EAE3C,OACEH,EAAC,KACC,IAAKe,EACL,GAAIO,EACJ,UAAWN,EAAG,gCAAiCF,CAAS,EACvD,GAAGF,EACN,CAEJ,CAAC,EAEDY,EAAgB,YAAc,kBAS9B,IAAMC,EAAoB,aACxB,CAAC,CAAE,SAAAC,EAAU,UAAAZ,EAAW,GAAGF,CAAM,EAAGG,IAAQ,CAC1C,GAAM,CAAE,MAAAG,EAAO,cAAAK,CAAc,EAAIpB,EAAa,EACxCwB,EAAOT,GAAO,QAAU,OAAOA,EAAM,OAAO,EAAIQ,EAEtD,OAAKC,EAKH3B,EAAC,KACC,IAAKe,EACL,GAAIQ,EACJ,UAAWP,EAAG,uCAAwCF,CAAS,EAC9D,GAAGF,EAEH,SAAAe,EACH,EAXO,IAaX,CACF,EAEAF,EAAY,YAAc","sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type * as LabelPrimitive from '@radix-ui/react-label';\nimport { Slot } from '@radix-ui/react-slot';\nimport {\n Controller,\n type ControllerProps,\n type FieldError,\n type FieldErrorsImpl,\n type FieldPath,\n type FieldValues,\n FormProvider,\n type Merge,\n useFormContext,\n} from 'react-hook-form';\nimport { cn } from '../lib/utils';\nimport { Label } from './label';\n\n/* -----------------------------------------------------------------------------\n * Context: Form\n * -------------------------------------------------------------------------- */\n\ninterface FormFieldContextValue<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> {\n name: TName;\n}\n\ninterface FormItemContextValue {\n id: string;\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue | null>(\n null,\n);\n\nconst FormItemContext = React.createContext<FormItemContextValue | null>(null);\n\nconst useFormField = (): {\n error?: FieldError | Merge<FieldError, FieldErrorsImpl> | undefined;\n formDescriptionId: string;\n formItemId: string;\n formMessageId: string;\n id: string;\n invalid: boolean;\n isDirty: boolean;\n isTouched: boolean;\n isValidating: boolean;\n name: string;\n} => {\n const fieldContext = React.useContext(FormFieldContext);\n const itemContext = React.useContext(FormItemContext);\n const { getFieldState, formState } = useFormContext();\n\n if (!fieldContext || !itemContext) {\n throw new Error('useFormField should be used within <FormField>');\n }\n\n const fieldState = getFieldState(fieldContext.name, formState);\n\n const { id } = itemContext;\n\n return {\n id,\n name: fieldContext.name,\n formItemId: `form-item-${id}`,\n formDescriptionId: `form-item-description-${id}`,\n formMessageId: `form-item-message-${id}`,\n ...fieldState,\n };\n};\n\n/* -----------------------------------------------------------------------------\n * Component: Form\n * -------------------------------------------------------------------------- */\n\ntype FormProps = React.ComponentProps<typeof FormProvider>;\nconst Form = FormProvider;\n\n/* -----------------------------------------------------------------------------\n * Component: FormField\n * -------------------------------------------------------------------------- */\n\ntype FormFieldProps<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = ControllerProps<TFieldValues, TName>;\n\nfunction FormField<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({ ...props }: FormFieldProps<TFieldValues, TName>): React.JSX.Element {\n return (\n <FormFieldContext.Provider value={{ name: props.name }}>\n <Controller {...props} />\n </FormFieldContext.Provider>\n );\n}\n\n/* -----------------------------------------------------------------------------\n * Component: FormItem\n * -------------------------------------------------------------------------- */\n\ntype FormItemElement = HTMLDivElement;\ntype FormItemProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst FormItem = React.forwardRef<FormItemElement, FormItemProps>(\n ({ className, ...props }, ref) => {\n const id = React.useId();\n\n return (\n <FormItemContext.Provider value={{ id }}>\n <div ref={ref} className={cn('space-y-2', className)} {...props} />\n </FormItemContext.Provider>\n );\n },\n);\n\nFormItem.displayName = 'FormItem';\n\n/* -----------------------------------------------------------------------------\n * Component: FormLabel\n * -------------------------------------------------------------------------- */\n\ntype FormFieldElement = React.ElementRef<typeof LabelPrimitive.Root>;\ntype FormLabelProps = React.ComponentPropsWithoutRef<\n typeof LabelPrimitive.Root\n>;\n\nconst FormLabel = React.forwardRef<FormFieldElement, FormLabelProps>(\n ({ className, ...props }, ref) => {\n const { error, formItemId } = useFormField();\n\n return (\n <Label\n ref={ref}\n className={cn(error && 'text-destructive', className)}\n htmlFor={formItemId}\n {...props}\n />\n );\n },\n);\n\nFormLabel.displayName = 'FormLabel';\n\n/* -----------------------------------------------------------------------------\n * Component: FormControl\n * -------------------------------------------------------------------------- */\n\ntype FormControlElement = React.ElementRef<typeof Slot>;\ntype FormControlProps = React.ComponentPropsWithoutRef<typeof Slot>;\n\nconst FormControl = React.forwardRef<FormControlElement, FormControlProps>(\n ({ ...props }, ref) => {\n const { error, formItemId, formDescriptionId, formMessageId } =\n useFormField();\n\n return (\n <Slot\n ref={ref}\n id={formItemId}\n aria-describedby={\n !error ? formDescriptionId : `${formDescriptionId} ${formMessageId}`\n }\n aria-invalid={Boolean(error)}\n {...props}\n />\n );\n },\n);\n\nFormControl.displayName = 'FormControl';\n\n/* -----------------------------------------------------------------------------\n * Component: FormDescription\n * -------------------------------------------------------------------------- */\n\ntype FormDescriptionElement = HTMLParagraphElement;\ntype FormDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;\n\nconst FormDescription = React.forwardRef<\n FormDescriptionElement,\n FormDescriptionProps\n>(({ className, ...props }, ref) => {\n const { formDescriptionId } = useFormField();\n\n return (\n <p\n ref={ref}\n id={formDescriptionId}\n className={cn('text-muted-foreground text-xs', className)}\n {...props}\n />\n );\n});\n\nFormDescription.displayName = 'FormDescription';\n\n/* -----------------------------------------------------------------------------\n * Component: FormMessage\n * -------------------------------------------------------------------------- */\n\ntype FormMessageElement = HTMLParagraphElement;\ntype FormMessageProps = React.HTMLAttributes<HTMLParagraphElement>;\n\nconst FormMessage = React.forwardRef<FormMessageElement, FormMessageProps>(\n ({ children, className, ...props }, ref) => {\n const { error, formMessageId } = useFormField();\n const body = error?.message ? String(error.message) : children;\n\n if (!body) {\n return null;\n }\n\n return (\n <p\n ref={ref}\n id={formMessageId}\n className={cn('text-destructive text-xs font-medium', className)}\n {...props}\n >\n {body}\n </p>\n );\n },\n);\n\nFormMessage.displayName = 'FormMessage';\n\n/* -----------------------------------------------------------------------------\n * Exports\n * -------------------------------------------------------------------------- */\n\nexport {\n useFormField,\n Form,\n FormItem,\n FormLabel,\n FormControl,\n FormDescription,\n FormMessage,\n FormField,\n type FormProps,\n type FormItemProps,\n type FormLabelProps,\n type FormControlProps,\n type FormDescriptionProps,\n type FormMessageProps,\n type FormFieldProps,\n};\n"]}
|
package/dist/react/form.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{a as F}from"../chunk-6FL3EBDQ.mjs";import{b as
|
|
1
|
+
"use client";import{a as F}from"../chunk-6FL3EBDQ.mjs";import{b as a}from"../chunk-LEUB3C3L.mjs";import*as t from"react";import{Slot as u}from"@radix-ui/react-slot";import{Controller as f,FormProvider as P,useFormContext as y}from"react-hook-form";import{jsx as l}from"react/jsx-runtime";var p=t.createContext(null),c=t.createContext(null),n=()=>{let e=t.useContext(p),r=t.useContext(c),{getFieldState:o,formState:m}=y();if(!e||!r)throw new Error("useFormField should be used within <FormField>");let s=o(e.name,m),{id:i}=r;return{id:i,name:e.name,formItemId:`form-item-${i}`,formDescriptionId:`form-item-description-${i}`,formMessageId:`form-item-message-${i}`,...s}},b=P;function h({...e}){return l(p.Provider,{value:{name:e.name},children:l(f,{...e})})}var R=t.forwardRef(({className:e,...r},o)=>{let m=t.useId();return l(c.Provider,{value:{id:m},children:l("div",{ref:o,className:a("space-y-2",e),...r})})});R.displayName="FormItem";var g=t.forwardRef(({className:e,...r},o)=>{let{error:m,formItemId:s}=n();return l(F,{ref:o,className:a(m&&"text-destructive",e),htmlFor:s,...r})});g.displayName="FormLabel";var I=t.forwardRef(({...e},r)=>{let{error:o,formItemId:m,formDescriptionId:s,formMessageId:i}=n();return l(u,{ref:r,id:m,"aria-describedby":o?`${s} ${i}`:s,"aria-invalid":!!o,...e})});I.displayName="FormControl";var x=t.forwardRef(({className:e,...r},o)=>{let{formDescriptionId:m}=n();return l("p",{ref:o,id:m,className:a("text-muted-foreground text-xs",e),...r})});x.displayName="FormDescription";var C=t.forwardRef(({children:e,className:r,...o},m)=>{let{error:s,formMessageId:i}=n(),d=s?.message?String(s.message):e;return d?l("p",{ref:m,id:i,className:a("text-destructive text-xs font-medium",r),...o,children:d}):null});C.displayName="FormMessage";export{b as Form,I as FormControl,x as FormDescription,h as FormField,R as FormItem,g as FormLabel,C as FormMessage,n as useFormField};
|
|
2
2
|
//# sourceMappingURL=form.mjs.map
|
package/dist/react/form.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/react/form.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type * as LabelPrimitive from '@radix-ui/react-label';\nimport { Slot } from '@radix-ui/react-slot';\nimport {\n Controller,\n type ControllerProps,\n type FieldError,\n type FieldPath,\n type FieldValues,\n FormProvider,\n useFormContext,\n} from 'react-hook-form';\nimport { cn } from '../lib/utils';\nimport { Label } from './label';\n\n/* -----------------------------------------------------------------------------\n * Context: Form\n * -------------------------------------------------------------------------- */\n\ninterface FormFieldContextValue<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> {\n name: TName;\n}\n\ninterface FormItemContextValue {\n id: string;\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue | null>(\n null,\n);\n\nconst FormItemContext = React.createContext<FormItemContextValue | null>(null);\n\nconst useFormField = (): {\n
|
|
1
|
+
{"version":3,"sources":["../../src/react/form.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type * as LabelPrimitive from '@radix-ui/react-label';\nimport { Slot } from '@radix-ui/react-slot';\nimport {\n Controller,\n type ControllerProps,\n type FieldError,\n type FieldErrorsImpl,\n type FieldPath,\n type FieldValues,\n FormProvider,\n type Merge,\n useFormContext,\n} from 'react-hook-form';\nimport { cn } from '../lib/utils';\nimport { Label } from './label';\n\n/* -----------------------------------------------------------------------------\n * Context: Form\n * -------------------------------------------------------------------------- */\n\ninterface FormFieldContextValue<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> {\n name: TName;\n}\n\ninterface FormItemContextValue {\n id: string;\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue | null>(\n null,\n);\n\nconst FormItemContext = React.createContext<FormItemContextValue | null>(null);\n\nconst useFormField = (): {\n error?: FieldError | Merge<FieldError, FieldErrorsImpl> | undefined;\n formDescriptionId: string;\n formItemId: string;\n formMessageId: string;\n id: string;\n invalid: boolean;\n isDirty: boolean;\n isTouched: boolean;\n isValidating: boolean;\n name: string;\n} => {\n const fieldContext = React.useContext(FormFieldContext);\n const itemContext = React.useContext(FormItemContext);\n const { getFieldState, formState } = useFormContext();\n\n if (!fieldContext || !itemContext) {\n throw new Error('useFormField should be used within <FormField>');\n }\n\n const fieldState = getFieldState(fieldContext.name, formState);\n\n const { id } = itemContext;\n\n return {\n id,\n name: fieldContext.name,\n formItemId: `form-item-${id}`,\n formDescriptionId: `form-item-description-${id}`,\n formMessageId: `form-item-message-${id}`,\n ...fieldState,\n };\n};\n\n/* -----------------------------------------------------------------------------\n * Component: Form\n * -------------------------------------------------------------------------- */\n\ntype FormProps = React.ComponentProps<typeof FormProvider>;\nconst Form = FormProvider;\n\n/* -----------------------------------------------------------------------------\n * Component: FormField\n * -------------------------------------------------------------------------- */\n\ntype FormFieldProps<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = ControllerProps<TFieldValues, TName>;\n\nfunction FormField<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({ ...props }: FormFieldProps<TFieldValues, TName>): React.JSX.Element {\n return (\n <FormFieldContext.Provider value={{ name: props.name }}>\n <Controller {...props} />\n </FormFieldContext.Provider>\n );\n}\n\n/* -----------------------------------------------------------------------------\n * Component: FormItem\n * -------------------------------------------------------------------------- */\n\ntype FormItemElement = HTMLDivElement;\ntype FormItemProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst FormItem = React.forwardRef<FormItemElement, FormItemProps>(\n ({ className, ...props }, ref) => {\n const id = React.useId();\n\n return (\n <FormItemContext.Provider value={{ id }}>\n <div ref={ref} className={cn('space-y-2', className)} {...props} />\n </FormItemContext.Provider>\n );\n },\n);\n\nFormItem.displayName = 'FormItem';\n\n/* -----------------------------------------------------------------------------\n * Component: FormLabel\n * -------------------------------------------------------------------------- */\n\ntype FormFieldElement = React.ElementRef<typeof LabelPrimitive.Root>;\ntype FormLabelProps = React.ComponentPropsWithoutRef<\n typeof LabelPrimitive.Root\n>;\n\nconst FormLabel = React.forwardRef<FormFieldElement, FormLabelProps>(\n ({ className, ...props }, ref) => {\n const { error, formItemId } = useFormField();\n\n return (\n <Label\n ref={ref}\n className={cn(error && 'text-destructive', className)}\n htmlFor={formItemId}\n {...props}\n />\n );\n },\n);\n\nFormLabel.displayName = 'FormLabel';\n\n/* -----------------------------------------------------------------------------\n * Component: FormControl\n * -------------------------------------------------------------------------- */\n\ntype FormControlElement = React.ElementRef<typeof Slot>;\ntype FormControlProps = React.ComponentPropsWithoutRef<typeof Slot>;\n\nconst FormControl = React.forwardRef<FormControlElement, FormControlProps>(\n ({ ...props }, ref) => {\n const { error, formItemId, formDescriptionId, formMessageId } =\n useFormField();\n\n return (\n <Slot\n ref={ref}\n id={formItemId}\n aria-describedby={\n !error ? formDescriptionId : `${formDescriptionId} ${formMessageId}`\n }\n aria-invalid={Boolean(error)}\n {...props}\n />\n );\n },\n);\n\nFormControl.displayName = 'FormControl';\n\n/* -----------------------------------------------------------------------------\n * Component: FormDescription\n * -------------------------------------------------------------------------- */\n\ntype FormDescriptionElement = HTMLParagraphElement;\ntype FormDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;\n\nconst FormDescription = React.forwardRef<\n FormDescriptionElement,\n FormDescriptionProps\n>(({ className, ...props }, ref) => {\n const { formDescriptionId } = useFormField();\n\n return (\n <p\n ref={ref}\n id={formDescriptionId}\n className={cn('text-muted-foreground text-xs', className)}\n {...props}\n />\n );\n});\n\nFormDescription.displayName = 'FormDescription';\n\n/* -----------------------------------------------------------------------------\n * Component: FormMessage\n * -------------------------------------------------------------------------- */\n\ntype FormMessageElement = HTMLParagraphElement;\ntype FormMessageProps = React.HTMLAttributes<HTMLParagraphElement>;\n\nconst FormMessage = React.forwardRef<FormMessageElement, FormMessageProps>(\n ({ children, className, ...props }, ref) => {\n const { error, formMessageId } = useFormField();\n const body = error?.message ? String(error.message) : children;\n\n if (!body) {\n return null;\n }\n\n return (\n <p\n ref={ref}\n id={formMessageId}\n className={cn('text-destructive text-xs font-medium', className)}\n {...props}\n >\n {body}\n </p>\n );\n },\n);\n\nFormMessage.displayName = 'FormMessage';\n\n/* -----------------------------------------------------------------------------\n * Exports\n * -------------------------------------------------------------------------- */\n\nexport {\n useFormField,\n Form,\n FormItem,\n FormLabel,\n FormControl,\n FormDescription,\n FormMessage,\n FormField,\n type FormProps,\n type FormItemProps,\n type FormLabelProps,\n type FormControlProps,\n type FormDescriptionProps,\n type FormMessageProps,\n type FormFieldProps,\n};\n"],"mappings":"iGAEA,UAAYA,MAAW,QAEvB,OAAS,QAAAC,MAAY,uBACrB,OACE,cAAAC,EAMA,gBAAAC,EAEA,kBAAAC,MACK,kBAiFD,cAAAC,MAAA,oBA9DN,IAAMC,EAAyB,gBAC7B,IACF,EAEMC,EAAwB,gBAA2C,IAAI,EAEvEC,EAAe,IAWhB,CACH,IAAMC,EAAqB,aAAWH,CAAgB,EAChDI,EAAoB,aAAWH,CAAe,EAC9C,CAAE,cAAAI,EAAe,UAAAC,CAAU,EAAIC,EAAe,EAEpD,GAAI,CAACJ,GAAgB,CAACC,EACpB,MAAM,IAAI,MAAM,gDAAgD,EAGlE,IAAMI,EAAaH,EAAcF,EAAa,KAAMG,CAAS,EAEvD,CAAE,GAAAG,CAAG,EAAIL,EAEf,MAAO,CACL,GAAAK,EACA,KAAMN,EAAa,KACnB,WAAY,aAAaM,CAAE,GAC3B,kBAAmB,yBAAyBA,CAAE,GAC9C,cAAe,qBAAqBA,CAAE,GACtC,GAAGD,CACL,CACF,EAOME,EAAOC,EAWb,SAASC,EAGP,CAAE,GAAGC,CAAM,EAA2D,CACtE,OACEd,EAACC,EAAiB,SAAjB,CAA0B,MAAO,CAAE,KAAMa,EAAM,IAAK,EACnD,SAAAd,EAACe,EAAA,CAAY,GAAGD,EAAO,EACzB,CAEJ,CASA,IAAME,EAAiB,aACrB,CAAC,CAAE,UAAAC,EAAW,GAAGH,CAAM,EAAGI,IAAQ,CAChC,IAAMR,EAAW,QAAM,EAEvB,OACEV,EAACE,EAAgB,SAAhB,CAAyB,MAAO,CAAE,GAAAQ,CAAG,EACpC,SAAAV,EAAC,OAAI,IAAKkB,EAAK,UAAWC,EAAG,YAAaF,CAAS,EAAI,GAAGH,EAAO,EACnE,CAEJ,CACF,EAEAE,EAAS,YAAc,WAWvB,IAAMI,EAAkB,aACtB,CAAC,CAAE,UAAAH,EAAW,GAAGH,CAAM,EAAGI,IAAQ,CAChC,GAAM,CAAE,MAAAG,EAAO,WAAAC,CAAW,EAAInB,EAAa,EAE3C,OACEH,EAACuB,EAAA,CACC,IAAKL,EACL,UAAWC,EAAGE,GAAS,mBAAoBJ,CAAS,EACpD,QAASK,EACR,GAAGR,EACN,CAEJ,CACF,EAEAM,EAAU,YAAc,YASxB,IAAMI,EAAoB,aACxB,CAAC,CAAE,GAAGV,CAAM,EAAGI,IAAQ,CACrB,GAAM,CAAE,MAAAG,EAAO,WAAAC,EAAY,kBAAAG,EAAmB,cAAAC,CAAc,EAC1DvB,EAAa,EAEf,OACEH,EAAC2B,EAAA,CACC,IAAKT,EACL,GAAII,EACJ,mBACGD,EAA4B,GAAGI,CAAiB,IAAIC,CAAa,GAAzDD,EAEX,eAAc,EAAQJ,EACrB,GAAGP,EACN,CAEJ,CACF,EAEAU,EAAY,YAAc,cAS1B,IAAMI,EAAwB,aAG5B,CAAC,CAAE,UAAAX,EAAW,GAAGH,CAAM,EAAGI,IAAQ,CAClC,GAAM,CAAE,kBAAAO,CAAkB,EAAItB,EAAa,EAE3C,OACEH,EAAC,KACC,IAAKkB,EACL,GAAIO,EACJ,UAAWN,EAAG,gCAAiCF,CAAS,EACvD,GAAGH,EACN,CAEJ,CAAC,EAEDc,EAAgB,YAAc,kBAS9B,IAAMC,EAAoB,aACxB,CAAC,CAAE,SAAAC,EAAU,UAAAb,EAAW,GAAGH,CAAM,EAAGI,IAAQ,CAC1C,GAAM,CAAE,MAAAG,EAAO,cAAAK,CAAc,EAAIvB,EAAa,EACxC4B,EAAOV,GAAO,QAAU,OAAOA,EAAM,OAAO,EAAIS,EAEtD,OAAKC,EAKH/B,EAAC,KACC,IAAKkB,EACL,GAAIQ,EACJ,UAAWP,EAAG,uCAAwCF,CAAS,EAC9D,GAAGH,EAEH,SAAAiB,EACH,EAXO,IAaX,CACF,EAEAF,EAAY,YAAc","names":["React","Slot","Controller","FormProvider","useFormContext","jsx","FormFieldContext","FormItemContext","useFormField","fieldContext","itemContext","getFieldState","formState","useFormContext","fieldState","id","Form","FormProvider","FormField","props","Controller","FormItem","className","ref","cn","FormLabel","error","formItemId","Label","FormControl","formDescriptionId","formMessageId","Slot","FormDescription","FormMessage","children","body"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@codefast/ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.48",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"sideEffects": [
|
|
6
6
|
"**/*.css"
|
|
@@ -387,11 +387,11 @@
|
|
|
387
387
|
"@tanstack/react-table": "^8.17.0",
|
|
388
388
|
"cmdk": "^1.0.0",
|
|
389
389
|
"cva": "1.0.0-beta.1",
|
|
390
|
-
"embla-carousel-react": "^8.
|
|
390
|
+
"embla-carousel-react": "^8.1.3",
|
|
391
391
|
"input-otp": "^1.2.4",
|
|
392
392
|
"next-themes": "^0.3.0",
|
|
393
393
|
"react-day-picker": "^8.10.1",
|
|
394
|
-
"react-hook-form": "^7.51.
|
|
394
|
+
"react-hook-form": "^7.51.5",
|
|
395
395
|
"react-resizable-panels": "^2.0.19",
|
|
396
396
|
"sonner": "^1.4.41",
|
|
397
397
|
"tailwind-merge": "^2.3.0",
|
|
@@ -408,8 +408,8 @@
|
|
|
408
408
|
"tailwindcss": "^3.4.3",
|
|
409
409
|
"tsup": "^8.0.2",
|
|
410
410
|
"typescript": "^5.4.5",
|
|
411
|
-
"@codefast/
|
|
412
|
-
"@codefast/
|
|
411
|
+
"@codefast/eslint-config": "0.0.23",
|
|
412
|
+
"@codefast/typescript-config": "0.0.2"
|
|
413
413
|
},
|
|
414
414
|
"peerDependencies": {
|
|
415
415
|
"@types/react": "^18.2.79",
|
package/src/react/form.tsx
CHANGED
|
@@ -7,9 +7,11 @@ import {
|
|
|
7
7
|
Controller,
|
|
8
8
|
type ControllerProps,
|
|
9
9
|
type FieldError,
|
|
10
|
+
type FieldErrorsImpl,
|
|
10
11
|
type FieldPath,
|
|
11
12
|
type FieldValues,
|
|
12
13
|
FormProvider,
|
|
14
|
+
type Merge,
|
|
13
15
|
useFormContext,
|
|
14
16
|
} from 'react-hook-form';
|
|
15
17
|
import { cn } from '../lib/utils';
|
|
@@ -37,16 +39,16 @@ const FormFieldContext = React.createContext<FormFieldContextValue | null>(
|
|
|
37
39
|
const FormItemContext = React.createContext<FormItemContextValue | null>(null);
|
|
38
40
|
|
|
39
41
|
const useFormField = (): {
|
|
42
|
+
error?: FieldError | Merge<FieldError, FieldErrorsImpl> | undefined;
|
|
43
|
+
formDescriptionId: string;
|
|
44
|
+
formItemId: string;
|
|
45
|
+
formMessageId: string;
|
|
46
|
+
id: string;
|
|
40
47
|
invalid: boolean;
|
|
41
48
|
isDirty: boolean;
|
|
42
49
|
isTouched: boolean;
|
|
43
50
|
isValidating: boolean;
|
|
44
|
-
error?: FieldError | undefined;
|
|
45
|
-
id: string;
|
|
46
51
|
name: string;
|
|
47
|
-
formItemId: string;
|
|
48
|
-
formDescriptionId: string;
|
|
49
|
-
formMessageId: string;
|
|
50
52
|
} => {
|
|
51
53
|
const fieldContext = React.useContext(FormFieldContext);
|
|
52
54
|
const itemContext = React.useContext(FormItemContext);
|
|
@@ -207,7 +209,7 @@ type FormMessageProps = React.HTMLAttributes<HTMLParagraphElement>;
|
|
|
207
209
|
const FormMessage = React.forwardRef<FormMessageElement, FormMessageProps>(
|
|
208
210
|
({ children, className, ...props }, ref) => {
|
|
209
211
|
const { error, formMessageId } = useFormField();
|
|
210
|
-
const body = error?.message ? error.message : children;
|
|
212
|
+
const body = error?.message ? String(error.message) : children;
|
|
211
213
|
|
|
212
214
|
if (!body) {
|
|
213
215
|
return null;
|