@atom-learning/components 2.9.1 → 2.10.0

package/CHANGELOG.md

@@ -1,9 +1,10 @@
-## [2.9.1](https://github.com/Atom-Learning/components/compare/v2.9.0...v2.9.1) (2022-10-19)
+# [2.10.0](https://github.com/Atom-Learning/components/compare/v2.9.2...v2.10.0) (2022-10-20)
 
 
-### Bug Fixes
+### Features
 
-* remove superfluous props from TextareaField and SelectField components ([7bd300a](https://github.com/Atom-Learning/components/commit/7bd300ae7efd28a1019a84fb82c595648a9c88f0))
+* added number input component ([6fd1f85](https://github.com/Atom-Learning/components/commit/6fd1f85d1ba3af39b744f095de1319858bb541a4))
+* added number input field ([8f2e8da](https://github.com/Atom-Learning/components/commit/8f2e8dabbda1ca668914a617c3b584f2272a57f3))
 
 # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
 

package/dist/components/checkbox-field/CheckboxField.d.ts

@@ -1,14 +1,6 @@
 import * as React from 'react';
 import { Checkbox } from '../../components/checkbox';
-import { ValidationOptions } from '../../components/form';
-import { CSS } from '../../stitches';
-declare type CheckboxFieldProps = {
-    css?: CSS;
-    defaultChecked?: boolean;
-    label: string;
-    description?: string;
-    name: string;
-    validation?: ValidationOptions;
-} & React.ComponentProps<typeof Checkbox>;
+import { FieldElementWrapperProps } from '../../components/field-wrapper';
+declare type CheckboxFieldProps = React.ComponentProps<typeof Checkbox> & FieldElementWrapperProps;
 export declare const CheckboxField: React.FC<CheckboxFieldProps>;
 export {};

package/dist/components/checkbox-field/CheckboxField.js

@@ -1 +1 @@
-import*as l from"react";import{useFormContext as s,Controller as h}from"react-hook-form";import{Checkbox as C}from"../checkbox/Checkbox.js";import"../field-wrapper/FieldWrapper.js";import{InlineFieldWrapper as k}from"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as F}from"../form/useFieldError.js";var b=(e=>(e.ON="on",e.OFF="off",e))(b||{});const i=({css:e,defaultChecked:r=!1,label:m,name:t,validation:o,description:d,...c})=>{const{control:f}=s(),{error:n}=F(t);return l.createElement(h,{control:f,name:t,defaultValue:r,rules:o,render:({onChange:u,value:a,name:p})=>l.createElement(k,{css:e,description:d,error:n,label:m,required:Boolean(o==null?void 0:o.required)},l.createElement(C,{defaultChecked:r,defaultValue:r?"on":"off",checked:a,name:p,onCheckedChange:u,value:a?"on":"off",...n&&{state:"error"},...c}))})};i.displayName="CheckboxField";export{i as CheckboxField};
+import*as n from"react";import{useFormContext as p,Controller as C}from"react-hook-form";import{Checkbox as h}from"../checkbox/Checkbox.js";import"../field-wrapper/FieldWrapper.js";import{InlineFieldWrapper as F}from"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as k}from"../form/useFieldError.js";var b=(e=>(e.ON="on",e.OFF="off",e))(b||{});const i=({css:e,defaultChecked:r=!1,label:m,name:t,validation:o,description:d,...c})=>{const{control:f}=p(),{error:a}=k(t);return n.createElement(C,{control:f,name:t,defaultValue:r,rules:o,render:({onChange:u,value:l,name:s})=>n.createElement(F,{css:e,description:d,error:a,label:m,required:Boolean(o==null?void 0:o.required)},n.createElement(h,{defaultChecked:r,defaultValue:r?"on":"off",checked:l,name:s,onCheckedChange:u,value:l?"on":"off",...a&&{state:"error"},...c}))})};i.displayName="CheckboxField";export{i as CheckboxField};

package/dist/components/date-field/DateField.d.ts

@@ -1,17 +1,6 @@
 import * as React from 'react';
 import { DateInputProps } from '../../components/date-input';
-import { ValidationOptions } from '../../components/form';
-import type { CSS } from '../../stitches';
-declare type DateFieldProps = DateInputProps & {
-    css?: CSS;
-    description?: string;
-    label: string;
-    name: string;
-    prompt?: {
-        link: string;
-        label: string;
-    };
-    validation?: ValidationOptions;
-};
+import { FieldElementWrapperProps } from '../../components/field-wrapper';
+declare type DateFieldProps = DateInputProps & FieldElementWrapperProps;
 export declare const DateField: React.FC<DateFieldProps>;
 export {};

package/dist/components/date-field/DateField.js

@@ -1 +1 @@
-import*as i from"react";import{useFormContext as f}from"react-hook-form";import{DateInput as u}from"../date-input/DateInput.js";import{FieldWrapper as F}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as g}from"../form/useFieldError.js";const a=({css:m,label:p,name:r,validation:e,prompt:l,description:d,...n})=>{const{register:t,trigger:s}=f(),{error:o}=g(r),c=e?t(e):t;return i.createElement(F,{css:m,description:d,error:o,fieldId:r,label:p,prompt:l,required:Boolean(e==null?void 0:e.required)},i.createElement(u,{id:r,name:r,ref:c,...o&&{state:"error"},...n,revalidate:s}))};a.displayName="DateField";export{a as DateField};
+import*as i from"react";import{useFormContext as f}from"react-hook-form";import{DateInput as u}from"../date-input/DateInput.js";import{FieldWrapper as F}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as g}from"../form/useFieldError.js";const m=({css:a,label:p,name:r,validation:e,prompt:l,description:d,...n})=>{const{register:t,trigger:s}=f(),{error:o}=g(r),c=e?t(e):t;return i.createElement(F,{css:a,description:d,error:o,fieldId:r,label:p,prompt:l,required:Boolean(e==null?void 0:e.required)},i.createElement(u,{id:r,name:r,ref:c,...o&&{state:"error"},...n,revalidate:s}))};m.displayName="DateField";export{m as DateField};

package/dist/components/field-wrapper/FieldWrapper.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { ValidationOptions } from '../../components/form';
 import type { CSS } from '../../stitches';
 export declare type FieldWrapperProps = {
     css?: CSS;
@@ -13,4 +14,8 @@ export declare type FieldWrapperProps = {
     required?: boolean;
     hideLabel?: boolean;
 };
+export declare type FieldElementWrapperProps = Omit<FieldWrapperProps, 'fieldId'> & {
+    name: string;
+    validation?: ValidationOptions;
+};
 export declare const FieldWrapper: React.FC<FieldWrapperProps>;

package/dist/components/field-wrapper/index.d.ts

@@ -1,3 +1,3 @@
-export type { FieldWrapperProps } from './FieldWrapper';
+export type { FieldWrapperProps, FieldElementWrapperProps } from './FieldWrapper';
 export { FieldWrapper } from './FieldWrapper';
 export { InlineFieldWrapper } from './InlineFieldWrapper';

package/dist/components/index.d.ts

@@ -66,3 +66,5 @@ export { ToggleGroup } from './toggle-group';
 export { Tooltip } from './tooltip';
 export { Video } from './video';
 export { NavigationMenu } from './navigation';
+export { NumberInput } from './number-input';
+export { NumberInputField } from './number-input-field';

package/dist/components/input-field/InputField.d.ts

@@ -1,17 +1,6 @@
 import * as React from 'react';
-import { ValidationOptions } from '../../components/form';
+import { FieldElementWrapperProps } from '../../components/field-wrapper';
 import { InputProps } from '../../components/input';
-import type { CSS } from '../../stitches';
-declare type InputFieldProps = InputProps & {
-    css?: CSS;
-    description?: string;
-    label: string;
-    name: string;
-    prompt?: {
-        link: string;
-        label: string;
-    };
-    validation?: ValidationOptions;
-};
+declare type InputFieldProps = InputProps & FieldElementWrapperProps;
 export declare const InputField: React.FC<InputFieldProps>;
 export {};

package/dist/components/input-field/InputField.js

@@ -1 +1 @@
-import*as i from"react";import{useFormContext as u}from"react-hook-form";import{FieldWrapper as c}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as f}from"../form/useFieldError.js";import{Input as F}from"../input/Input.js";const p=({css:m,label:l,name:r,validation:e,prompt:n,description:d,...a})=>{const{register:o}=u(),{error:t}=f(r),s=e?o(e):o;return i.createElement(c,{css:m,description:d,error:t,fieldId:r,label:l,prompt:n,required:Boolean(e==null?void 0:e.required)},i.createElement(F,{id:r,name:r,ref:s,...t&&{state:"error"},...a}))};p.displayName="InputField";export{p as InputField};
+import*as i from"react";import{useFormContext as u}from"react-hook-form";import{FieldWrapper as c}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as f}from"../form/useFieldError.js";import{Input as F}from"../input/Input.js";const p=({css:m,label:l,name:r,validation:e,prompt:n,description:a,...d})=>{const{register:o}=u(),{error:t}=f(r),s=e?o(e):o;return i.createElement(c,{css:m,description:a,error:t,fieldId:r,label:l,prompt:n,required:Boolean(e==null?void 0:e.required)},i.createElement(F,{id:r,name:r,ref:s,...t&&{state:"error"},...d}))};p.displayName="InputField";export{p as InputField};

package/dist/components/number-input/NumberInput.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import type { CSS } from '../../stitches';
+export interface NumberInputProps {
+    name: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    initialValue?: number;
+    disabled?: boolean;
+    readonly?: boolean;
+    size?: 'sm' | 'md';
+    onChange?: (value: number) => void;
+    stepperButtonLabels?: {
+        increment?: string;
+        decrement?: string;
+    };
+    disabledTooltipContent?: {
+        increment?: string;
+        decrement?: string;
+    };
+    css?: CSS;
+}
+export declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/number-input/NumberInput.js

@@ -0,0 +1 @@
+import{Minus as $,Plus as B}from"@atom-learning/icons";import*as n from"react";import{Flex as F}from"../flex/Flex.js";import{Input as H}from"../input/Input.js";import{NumberInputStepper as x}from"./NumberInputStepper.js";const N=n.forwardRef((g,k)=>{const{name:E,min:o=0,max:l=Number.MAX_SAFE_INTEGER,step:s=1,initialValue:y=0,disabled:u=!1,readonly:m=!1,size:v="md",onChange:C,stepperButtonLabels:T,disabledTooltipContent:A,css:I,...L}=g,[r,M]=n.useState(y),i=n.useRef(null);n.useImperativeHandle(k,()=>i.current);const w={increment:"increment",decrement:"decrement",...T},R={decrement:`Cannot enter values below ${o}`,increment:`Cannot enter values above ${l}`,...A},d=r>=l,c=r<=o,p=n.useCallback(e=>Math.min(Math.max(e,o),l),[l,o]),a=n.useCallback(e=>{M(e),C==null||C(Number(e))},[C]),z=n.useCallback(e=>{const t=e.target.value.replace(/\D/g,"");a(t)},[a]),b=n.useCallback(()=>{var e;if(d||m)return;(e=i==null?void 0:i.current)==null||e.focus();let t;r===""?t=s:t=Number(r)+s,a(p(t))},[p,d,m,s,a,r]),f=n.useCallback(()=>{var e;if(c||m)return;(e=i==null?void 0:i.current)==null||e.focus();let t;r===""?t=o:t=Number(r)-s,a(p(t))},[p,c,m,o,s,a,r]),D=n.useCallback(e=>{if(e.nativeEvent.isComposing)return;const t=e.key,h={ArrowUp:b,ArrowRight:b,ArrowDown:f,ArrowLeft:f,Home:()=>a(o),End:()=>a(l)}[t];h&&(e.preventDefault(),h(e))},[b,f,a,o,l]),S={name:E,type:"number",value:r,...L,onChange:z,onKeyDown:D,size:v,css:{borderRadius:"0px",width:"$6","&:disabled":{opacity:.3,pointerEvents:"none"}},ref:i,readOnly:m,disabled:u,"aria-valuemin":o,"aria-valuemax":l,"aria-valuenow":Number(r),role:"spinbutton"};return n.createElement(F,{css:I},n.createElement(x,{onClick:f,icon:$,css:{borderRight:"none",borderTopRightRadius:"0px",borderBottomRightRadius:"0px"},size:v,disabled:c||u,showTooltip:c&&!u,disabledTooltipContent:R.decrement,label:w.decrement}),n.createElement(H,{...S}),n.createElement(x,{onClick:b,icon:B,css:{borderLeft:"none",borderTopLeftRadius:"0px",borderBottomLeftRadius:"0px"},size:v,disabled:d||u,showTooltip:d&&!u,disabledTooltipContent:R.increment,label:w.increment}))});N.displayName="NumberInput";export{N as NumberInput};

package/dist/components/number-input/NumberInputStepper.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { ActionIcon } from '../action-icon';
+declare type NumberInputStepperProps = Omit<React.ComponentProps<typeof ActionIcon>, 'children'> & {
+    icon: React.FC<React.SVGProps<SVGSVGElement>>;
+    showTooltip?: boolean;
+    disabledTooltipContent?: string;
+};
+export declare const NumberInputStepper: React.ForwardRefExoticComponent<NumberInputStepperProps>;
+export {};

package/dist/components/number-input/NumberInputStepper.js

@@ -0,0 +1 @@
+import{styled as t}from"@stitches/react";import*as e from"react";import{ActionIcon as m}from"../action-icon/ActionIcon.js";import{Icon as p}from"../icon/Icon.js";import{Tooltip as o}from"../tooltip/Tooltip.js";const s=t("span",{zIndex:1}),d=t(m,{borderColor:"$tonal400 !important",zIndex:1,"&:hover":{bg:"$tonal50",svg:{color:"$tonal400"}},svg:{color:"$tonal300"},"&:active":{bg:"$tonal100",svg:{color:"$tonal500"}},"&:disabled":{opacity:.3,pointerEvents:"none"}}),b=e.forwardRef((n,r)=>{const{icon:l,disabledTooltipContent:a,showTooltip:i,...c}=n;return e.createElement(o,null,e.createElement(o.Trigger,{asChild:!0},e.createElement(s,{tabIndex:-1},e.createElement(d,{tabIndex:-1,appearance:"outline",ref:r,...c},e.createElement(p,{is:l})))),i&&e.createElement(o.Content,null,a))});export{b as NumberInputStepper};

package/dist/components/number-input/index.d.ts

@@ -0,0 +1 @@
+export { NumberInput } from './NumberInput';

package/dist/components/number-input-field/NumberInputField.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { ValidationOptions } from '../../components/form';
+import type { CSS } from '../../stitches';
+import type { NumberInputProps } from '../number-input/NumberInput';
+export interface NumberInputFieldProps extends NumberInputProps {
+    css?: CSS;
+    description?: string;
+    label: string;
+    name: string;
+    prompt?: {
+        link: string;
+        label: string;
+    };
+    validation?: ValidationOptions;
+}
+export declare const NumberInputField: React.FC<NumberInputFieldProps>;

package/dist/components/number-input-field/NumberInputField.js

@@ -0,0 +1 @@
+import*as i from"react";import{useFormContext as c}from"react-hook-form";import{FieldWrapper as f}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as b}from"../form/useFieldError.js";import{NumberInput as F}from"../number-input/NumberInput.js";const m=({css:p,label:n,name:r,validation:e,prompt:a,description:l,...d})=>{const{register:o,trigger:s}=c(),{error:t}=b(r),u=e?o(e):o;return i.createElement(f,{css:p,description:l,error:t,fieldId:r,label:n,prompt:a,required:Boolean(e==null?void 0:e.required)},i.createElement(F,{id:r,name:r,ref:u,...t&&{state:"error","aria-invalid":!0},...d,onChange:s}))};m.displayName="NumberInputField";export{m as NumberInputField};

package/dist/components/number-input-field/index.d.ts

@@ -0,0 +1 @@
+export { NumberInputField } from './NumberInputField';

package/dist/components/password-field/PasswordField.d.ts

@@ -1,17 +1,8 @@
 import * as React from 'react';
-import type { ValidationOptions } from '../../components/form';
-import { InputProps } from '../../components/input';
-declare type PasswordFieldProps = InputProps & {
-    description?: string;
-    hidePasswordText?: string;
+import { FieldElementWrapperProps } from '../../components/field-wrapper';
+import { PasswordInput } from '../../components/password-input';
+declare type PasswordFieldProps = React.ComponentProps<typeof PasswordInput> & Omit<FieldElementWrapperProps, 'label'> & {
     label?: string;
-    name: string;
-    prompt?: {
-        label: string;
-        link: string;
-    };
-    showPasswordText?: string;
-    validation?: ValidationOptions;
 };
 export declare const PasswordField: React.FC<PasswordFieldProps>;
 export {};

package/dist/components/password-field/PasswordField.js

@@ -1 +1 @@
-import*as t from"react";import{useFormContext as c}from"react-hook-form";import{FieldWrapper as u}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as f}from"../form/useFieldError.js";import{PasswordInput as w}from"../password-input/PasswordInput.js";const i=({css:s={},label:m="Password",name:r,prompt:p=void 0,description:a,validation:e,...d})=>{const{register:o}=c(),{error:l}=f(r),n=e?o(e):o;return t.createElement(u,{css:{...s,position:"relative"},description:a,error:l,fieldId:r,label:m,prompt:p,required:Boolean(e==null?void 0:e.required)},t.createElement(w,{autoComplete:"current-password",name:r,id:r,ref:n,...d}))};i.displayName="PasswordField";export{i as PasswordField};
+import*as t from"react";import{useFormContext as c}from"react-hook-form";import{FieldWrapper as u}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as f}from"../form/useFieldError.js";import{PasswordInput as w}from"../password-input/PasswordInput.js";const i=({css:s={},label:m="Password",name:r,prompt:p=void 0,description:a,validation:o,...d})=>{const{register:e}=c(),{error:l}=f(r),n=o?e(o):e;return t.createElement(u,{css:{...s,position:"relative"},description:a,error:l,fieldId:r,label:m,prompt:p,required:Boolean(o==null?void 0:o.required)},t.createElement(w,{autoComplete:"current-password",name:r,id:r,ref:n,...d}))};i.displayName="PasswordField";export{i as PasswordField};

package/dist/components/radio-button-field/RadioButtonField.d.ts

@@ -1,17 +1,8 @@
 import * as React from 'react';
-import { ValidationOptions } from '../../components/form';
-import { CSS } from '../../stitches';
+import { FieldElementWrapperProps } from '../../components/field-wrapper';
+import { RadioButtonGroup } from '../../components/radio-button';
 import { RadioField } from './RadioField';
-declare type RadioButtonFieldProps = {
-    css?: CSS;
-    defaultValue?: string;
-    label: string;
-    name: string;
-    direction?: 'row' | 'column';
-    description?: string;
-    validation?: ValidationOptions;
-    onValueChange?: (value: string) => void;
-};
+declare type RadioButtonFieldProps = React.ComponentProps<typeof RadioButtonGroup> & FieldElementWrapperProps;
 export declare const RadioButtonField: React.FC<RadioButtonFieldProps> & {
     Item: typeof RadioField;
 };

package/dist/components/radio-button-field/RadioButtonField.js

@@ -1 +1 @@
-import*as e from"react";import{useFormContext as g,Controller as C}from"react-hook-form";import{Description as F}from"../field-wrapper/FieldDescription.js";import"../form/Form.js";import{useFieldError as V}from"../form/useFieldError.js";import{Label as b}from"../label/Label.js";import"../radio-button/RadioButton.js";import{RadioButtonGroup as h}from"../radio-button/RadioButtonGroup.js";import{InlineMessage as v}from"../inline-message/InlineMessage.js";import{styled as B}from"../../stitches.js";import{RadioField as R}from"./RadioField.js";const $=B("fieldset",{all:"unset"}),r=({children:s,css:d,direction:u="column",defaultValue:t,description:l,label:c,name:n,validation:o,onValueChange:a})=>{const{control:p}=g(),{error:i}=V(n);return e.createElement($,{css:d},e.createElement(b,{as:"legend",css:{p:0,mb:"$3"},required:Boolean(o==null?void 0:o.required)},c),l&&e.createElement(F,{css:{mb:"$3"}},l),e.createElement(C,{control:p,name:n,rules:o,defaultValue:t,render:({onChange:f,value:E})=>e.createElement(h,{direction:u,defaultValue:t,onValueChange:m=>{f(m),a==null||a(m)},value:E},s)}),i&&e.createElement(v,{css:{mt:"$2"}},i))};r.Item=R,r.displayName="RadioButtonField";export{r as RadioButtonField};
+import*as e from"react";import{useFormContext as F,Controller as g}from"react-hook-form";import{Description as C}from"../field-wrapper/FieldDescription.js";import"../form/Form.js";import{useFieldError as V}from"../form/useFieldError.js";import{Label as b}from"../label/Label.js";import"../radio-button/RadioButton.js";import{RadioButtonGroup as h}from"../radio-button/RadioButtonGroup.js";import{InlineMessage as v}from"../inline-message/InlineMessage.js";import{styled as B}from"../../stitches.js";import{RadioField as R}from"./RadioField.js";const $=B("fieldset",{all:"unset"}),r=({children:s,css:d,direction:u="column",defaultValue:t,description:l,label:c,name:n,validation:o,onValueChange:a})=>{const{control:p}=F(),{error:m}=V(n);return e.createElement($,{css:d},e.createElement(b,{as:"legend",css:{p:0,mb:"$3"},required:Boolean(o==null?void 0:o.required)},c),l&&e.createElement(C,{css:{mb:"$3"}},l),e.createElement(g,{control:p,name:n,rules:o,defaultValue:t,render:({onChange:f,value:E})=>e.createElement(h,{direction:u,defaultValue:t,onValueChange:i=>{f(i),a==null||a(i)},value:E},s)}),m&&e.createElement(v,{css:{mt:"$2"}},m))};r.Item=R,r.displayName="RadioButtonField";export{r as RadioButtonField};

package/dist/components/search-field/SearchField.d.ts

@@ -1,15 +1,6 @@
 import * as React from 'react';
-import { ValidationOptions } from '../../components/form';
+import { FieldElementWrapperProps } from '../../components/field-wrapper';
 import { SearchInputProps } from '../../components/search-input';
-declare type SearchFieldProps = SearchInputProps & {
-    description?: string;
-    label: string;
-    name: string;
-    prompt?: {
-        link: string;
-        label: string;
-    };
-    validation?: ValidationOptions;
-};
+declare type SearchFieldProps = SearchInputProps & FieldElementWrapperProps;
 export declare const SearchField: React.FC<SearchFieldProps>;
 export {};

package/dist/components/search-input/SearchInput.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Input } from '../../components/input';
 import { CSS } from '../../stitches';
 export declare type SearchInputProps = React.ComponentProps<typeof Input> & {
-    size: 'sm' | 'md';
+    size?: 'sm' | 'md';
     css?: CSS;
     value?: string;
     clearText?: string;

package/dist/components/select-field/SelectField.d.ts

@@ -1,10 +1,6 @@
 import * as React from 'react';
-import { FieldWrapperProps } from '../../components/field-wrapper';
-import { ValidationOptions } from '../../components/form';
+import { FieldElementWrapperProps } from '../../components/field-wrapper';
 import { SelectProps } from '../../components/select';
-declare type SelectFieldProps = SelectProps & Omit<FieldWrapperProps, 'fieldId' | 'error'> & {
-    name: string;
-    validation?: ValidationOptions;
-};
+declare type SelectFieldProps = SelectProps & FieldElementWrapperProps;
 export declare const SelectField: React.FC<SelectFieldProps>;
 export {};

package/dist/components/select-field/SelectField.js

@@ -1 +1 @@
-import*as i from"react";import{useFormContext as u}from"react-hook-form";import{FieldWrapper as F}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as b}from"../form/useFieldError.js";import{Select as h}from"../select/Select.js";const l=({css:m=void 0,children:d,name:e,label:p,validation:r,prompt:a,description:n,hideLabel:s,...c})=>{const{register:o}=u(),{error:t}=b(e),f=r?o(r):o;return i.createElement(F,{css:m,description:n,error:t,fieldId:e,label:p,prompt:a,required:Boolean(r==null?void 0:r.required),hideLabel:s},i.createElement(h,{name:e,id:e,...c,ref:f,...t&&{state:"error"}},d))};l.displayName="SelectField";export{l as SelectField};
+import*as t from"react";import{useFormContext as u}from"react-hook-form";import{FieldWrapper as F}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as b}from"../form/useFieldError.js";import{Select as h}from"../select/Select.js";const l=({css:m=void 0,children:d,name:e,label:p,validation:r,prompt:a,description:n,hideLabel:s,...c})=>{const{register:o}=u(),{error:i}=b(e),f=r?o(r):o;return t.createElement(F,{css:m,description:n,error:i,fieldId:e,label:p,prompt:a,required:Boolean(r==null?void 0:r.required),hideLabel:s},t.createElement(h,{name:e,id:e,...c,ref:f,...i&&{state:"error"}},d))};l.displayName="SelectField";export{l as SelectField};

package/dist/components/slider-field/SliderField.d.ts

@@ -1,13 +1,8 @@
 import React from 'react';
+import { FieldElementWrapperProps } from '../../components/field-wrapper';
 import { SliderProps } from '../../components/slider';
 import { SliderStepsType } from '../../components/slider/SliderSteps';
-import type { CSS } from '../../stitches';
 import { SliderValueType } from '../slider/SliderValue';
-declare type SliderFieldProps = SliderProps & SliderStepsType & SliderValueType & {
-    css?: CSS;
-    label: string;
-    name: string;
-    defaultValue: number[];
-};
+declare type SliderFieldProps = SliderProps & SliderStepsType & SliderValueType & FieldElementWrapperProps;
 export declare const SliderField: React.FC<SliderFieldProps>;
 export {};

package/dist/components/slider-field/SliderField.js

@@ -1 +1 @@
-import e from"react";import{useFormContext as x,Controller as E}from"react-hook-form";import{FieldWrapper as V}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import{Slider as l}from"../slider/Slider.js";const n=({css:u,label:i,name:t,defaultValue:a,outputLabel:d,min:r=0,max:m=100,steps:p=[],...s})=>{const{control:c}=x();return e.createElement(V,{css:u,fieldId:t,label:i},e.createElement(E,{control:c,name:t,defaultValue:a,render:({onChange:f,value:o})=>e.createElement(l,{name:t,defaultValue:a,onValueChange:f,value:o,min:r,max:m,...s},e.createElement(l.Steps,{min:r,max:m,steps:p}),e.createElement(l.Value,{value:o||a,outputLabel:d}))}))};n.displayName="SliderField";export{n as SliderField};
+import e from"react";import{useFormContext as x,Controller as E}from"react-hook-form";import{FieldWrapper as V}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import{Slider as l}from"../slider/Slider.js";const n=({css:u,label:i,name:t,defaultValue:a,outputLabel:p,min:r=0,max:m=100,steps:d=[],...s})=>{const{control:c}=x();return e.createElement(V,{css:u,fieldId:t,label:i},e.createElement(E,{control:c,name:t,defaultValue:a,render:({onChange:f,value:o})=>e.createElement(l,{name:t,defaultValue:a,onValueChange:f,value:o,min:r,max:m,...s},e.createElement(l.Steps,{min:r,max:m,steps:d}),e.createElement(l.Value,{value:o||a,outputLabel:p}))}))};n.displayName="SliderField";export{n as SliderField};

package/dist/components/textarea-field/TextareaField.d.ts

@@ -1,10 +1,6 @@
 import * as React from 'react';
-import type { FieldWrapperProps } from '../../components/field-wrapper';
-import { ValidationOptions } from '../../components/form';
+import { FieldElementWrapperProps } from '../../components/field-wrapper';
 import { TextareaProps } from '../../components/textarea';
-declare type TextareaFieldProps = TextareaProps & Omit<FieldWrapperProps, 'fieldId' | 'error'> & {
-    name: string;
-    validation?: ValidationOptions;
-};
+declare type TextareaFieldProps = TextareaProps & FieldElementWrapperProps;
 export declare const TextareaField: React.FC<TextareaFieldProps>;
 export {};