@blockscout/ui-toolkit 2.0.3 → 2.1.0-alpha.2

package/README.md

@@ -70,9 +70,13 @@ import { themeConfig } from '@blockscout/ui-toolkit';
 
 const customOverrides = {
   // Add your custom theme overrides here
-  colors: {
-    brand: {
-      primary: '#your-color',
+  theme: {
+    semanticTokens: {
+      colors: {
+        brand: {
+          primary: { value: '#5353D3' }
+        },
+      },
     },
   },
 };

package/dist/chakra/link.d.ts

@@ -11,7 +11,7 @@ interface LinkPropsChakra extends ChakraLinkProps {
     noIcon?: boolean;
     disabled?: boolean;
 }
-interface LinkPropsNext extends Pick<NextLinkProps, 'shallow' | 'prefetch' | 'scroll'> {
+interface LinkPropsNext extends Partial<Pick<NextLinkProps, 'shallow' | 'prefetch' | 'scroll'>> {
 }
 export interface LinkProps extends LinkPropsChakra, LinkPropsNext {
 }

package/dist/chakra/select.d.ts

@@ -1,10 +1,13 @@
 import { ListCollection, Select as ChakraSelect } from '@chakra-ui/react';
 import * as React from 'react';
-export interface SelectOption<Value extends string = string> {
-    value: Value;
+export type SelectOption<Value extends string = string> = ({
     label: string;
+} | {
+    renderLabel: () => React.ReactNode;
+}) & {
+    value: Value;
     icon?: React.ReactNode;
-}
+};
 export interface SelectControlProps extends ChakraSelect.ControlProps {
     noIndicator?: boolean;
     triggerProps?: ChakraSelect.TriggerProps;

package/dist/components/forms/fields/FormFieldCheckbox.d.ts

@@ -2,8 +2,7 @@ import { default as React } from 'react';
 import { FieldValues, Path } from 'react-hook-form';
 import { FormFieldPropsBase } from './types';
 import { CheckboxProps } from '../../../chakra/checkbox';
-interface Props<FormFields extends FieldValues, Name extends Path<FormFields> = Path<FormFields>> extends Pick<FormFieldPropsBase<FormFields, Name>, 'rules' | 'name' | 'onChange' | 'readOnly'>, Omit<CheckboxProps, 'name' | 'onChange'> {
+export interface FormFieldCheckboxProps<FormFields extends FieldValues, Name extends Path<FormFields> = Path<FormFields>> extends Pick<FormFieldPropsBase<FormFields, Name>, 'rules' | 'name' | 'onChange' | 'readOnly' | 'controllerProps'>, Omit<CheckboxProps, 'name' | 'onChange'> {
     label: string;
 }
-export declare const FormFieldCheckbox: <FormFields extends FieldValues, Name extends Path<FormFields> = Path<FormFields>>({ name, label, rules, onChange, readOnly, ...rest }: Props<FormFields, Name>) => React.JSX.Element;
-export {};
+export declare const FormFieldCheckbox: <FormFields extends FieldValues, Name extends Path<FormFields> = Path<FormFields>>({ name, label, rules, onChange, readOnly, controllerProps, ...rest }: FormFieldCheckboxProps<FormFields, Name>) => React.JSX.Element;

package/dist/components/forms/fields/FormFieldCheckboxGroup.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { FieldValues, Path } from 'react-hook-form';
+import { FormFieldPropsBase } from './types';
+import { CheckboxGroupProps, CheckboxProps } from '../../../chakra/checkbox';
+export interface FormFieldCheckboxGroupProps<FormFields extends FieldValues, Name extends Path<FormFields> = Path<FormFields>> extends Pick<FormFieldPropsBase<FormFields, Name>, 'rules' | 'name' | 'onChange' | 'readOnly' | 'controllerProps'>, Omit<CheckboxGroupProps, 'name' | 'onChange'> {
+    options: Array<{
+        label: string;
+        value: string;
+    }>;
+    itemProps?: CheckboxProps;
+}
+export declare const FormFieldCheckboxGroup: <FormFields extends FieldValues, Name extends Path<FormFields>>(props: FormFieldCheckboxGroupProps<FormFields, Name>) => React.JSX.Element;

package/dist/components/forms/fields/FormFieldColor.d.ts

@@ -2,8 +2,7 @@ import { BoxProps } from '@chakra-ui/react';
 import { default as React } from 'react';
 import { FieldValues, Path } from 'react-hook-form';
 import { FormFieldPropsBase } from './types';
-interface Props<FormFields extends FieldValues, Name extends Path<FormFields> = Path<FormFields>> extends FormFieldPropsBase<FormFields, Name> {
+export interface FormFieldColorProps<FormFields extends FieldValues, Name extends Path<FormFields> = Path<FormFields>> extends FormFieldPropsBase<FormFields, Name> {
     sampleDefaultBgColor?: BoxProps['bgColor'];
 }
-export declare const FormFieldColor: <FormFields extends FieldValues, Name extends Path<FormFields> = Path<FormFields>>({ name, placeholder, rules, onBlur, group, inputProps, size, disabled, sampleDefaultBgColor, ...restProps }: Props<FormFields, Name>) => React.JSX.Element;
-export {};
+export declare const FormFieldColor: <FormFields extends FieldValues, Name extends Path<FormFields> = Path<FormFields>>({ name, placeholder, rules, onBlur, group, inputProps, size, disabled, sampleDefaultBgColor, controllerProps, ...restProps }: FormFieldColorProps<FormFields, Name>) => React.JSX.Element;

package/dist/components/forms/fields/FormFieldNumber.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { FieldValues } from 'react-hook-form';
+import { FormFieldPropsBase } from './types';
+export declare const FormFieldNumber: <FormFields extends FieldValues>({ inputProps, ...rest }: FormFieldPropsBase<FormFields>) => React.JSX.Element;

package/dist/components/forms/fields/FormFieldRadio.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+import { FieldValues, Path } from 'react-hook-form';
+import { FormFieldPropsBase } from './types';
+import { ExcludeUndefined } from '../../../../types/utils';
+import { RadioGroupProps, RadioProps } from '../../../chakra/radio';
+export interface FormFieldRadioProps<FormFields extends FieldValues, Name extends Path<FormFields>> extends Pick<FormFieldPropsBase<FormFields>, 'rules' | 'controllerProps'>, RadioGroupProps {
+    name: Name;
+    options: Array<{
+        value: ExcludeUndefined<FormFields[Name]>;
+        label: string;
+    }>;
+    itemProps?: RadioProps;
+}
+export declare const FormFieldRadio: <FormFields extends FieldValues, Name extends Path<FormFields>>({ name, options, itemProps, onValueChange, disabled, controllerProps, ...rest }: FormFieldRadioProps<FormFields, Name>) => React.JSX.Element;

package/dist/components/forms/fields/FormFieldSelect.d.ts

@@ -2,6 +2,5 @@ import { default as React } from 'react';
 import { Path, FieldValues } from 'react-hook-form';
 import { FormFieldPropsBase } from './types';
 import { SelectProps } from '../../../chakra/select';
-type Props<FormFields extends FieldValues, Name extends Path<FormFields>> = FormFieldPropsBase<FormFields, Name> & SelectProps;
-export declare const FormFieldSelect: <FormFields extends FieldValues, Name extends Path<FormFields>>(props: Props<FormFields, Name>) => React.JSX.Element;
-export {};
+export type FormFieldSelectProps<FormFields extends FieldValues, Name extends Path<FormFields>> = FormFieldPropsBase<FormFields, Name> & SelectProps;
+export declare const FormFieldSelect: <FormFields extends FieldValues, Name extends Path<FormFields>>(props: FormFieldSelectProps<FormFields, Name>) => React.JSX.Element;

package/dist/components/forms/fields/FormFieldSelectAsync.d.ts

@@ -2,6 +2,5 @@ import { default as React } from 'react';
 import { Path, FieldValues } from 'react-hook-form';
 import { FormFieldPropsBase } from './types';
 import { SelectAsyncProps } from '../../../chakra/select';
-type Props<FormFields extends FieldValues, Name extends Path<FormFields>> = FormFieldPropsBase<FormFields, Name> & SelectAsyncProps;
-export declare const FormFieldSelectAsync: <FormFields extends FieldValues, Name extends Path<FormFields>>(props: Props<FormFields, Name>) => React.JSX.Element;
-export {};
+export type FormFieldSelectAsyncProps<FormFields extends FieldValues, Name extends Path<FormFields>> = FormFieldPropsBase<FormFields, Name> & SelectAsyncProps;
+export declare const FormFieldSelectAsync: <FormFields extends FieldValues, Name extends Path<FormFields>>(props: FormFieldSelectAsyncProps<FormFields, Name>) => React.JSX.Element;

package/dist/components/forms/fields/FormFieldSwitch.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+import { FieldValues, Path } from 'react-hook-form';
+import { FormFieldPropsBase } from './types';
+import { SwitchProps } from '../../../chakra/switch';
+export type FormFieldSwitchProps<FormFields extends FieldValues, Name extends Path<FormFields>> = Pick<FormFieldPropsBase<FormFields, Name>, 'name' | 'placeholder' | 'rules' | 'controllerProps'> & SwitchProps;
+export declare const FormFieldSwitch: <FormFields extends FieldValues, Name extends Path<FormFields>>({ name, placeholder, onCheckedChange, rules, controllerProps, disabled, ...rest }: FormFieldSwitchProps<FormFields, Name>) => React.JSX.Element;

package/dist/components/forms/fields/FormFieldText.d.ts

@@ -1,8 +1,7 @@
 import { default as React } from 'react';
 import { FieldValues, Path } from 'react-hook-form';
 import { FormFieldPropsBase } from './types';
-interface Props<FormFields extends FieldValues, Name extends Path<FormFields> = Path<FormFields>> extends FormFieldPropsBase<FormFields, Name> {
+export interface FormFieldTextProps<FormFields extends FieldValues, Name extends Path<FormFields> = Path<FormFields>> extends FormFieldPropsBase<FormFields, Name> {
     asComponent?: 'Input' | 'Textarea';
 }
-export declare const FormFieldText: <FormFields extends FieldValues, Name extends Path<FormFields> = Path<FormFields>>({ name, placeholder, rules, onBlur, group, inputProps, asComponent, size: sizeProp, disabled, floating: floatingProp, ...restProps }: Props<FormFields, Name>) => React.JSX.Element;
-export {};
+export declare const FormFieldText: <FormFields extends FieldValues, Name extends Path<FormFields> = Path<FormFields>>({ name, placeholder, rules, onBlur, group, inputProps, asComponent, size: sizeProp, disabled, floating: floatingProp, controllerProps, ...restProps }: FormFieldTextProps<FormFields, Name>) => React.JSX.Element;

package/dist/components/forms/fields/index.d.ts

@@ -2,9 +2,14 @@ export * from './image/FormFieldImagePreview';
 export * from './image/useImageField';
 export * from './FormFieldAddress';
 export * from './FormFieldCheckbox';
+export * from './FormFieldCheckboxGroup';
 export * from './FormFieldColor';
 export * from './FormFieldEmail';
+export * from './FormFieldNumber';
+export * from './FormFieldRadio';
 export * from './FormFieldSelect';
 export * from './FormFieldSelectAsync';
+export * from './FormFieldSwitch';
 export * from './FormFieldText';
 export * from './FormFieldUrl';
+export * from './types';

package/dist/components/forms/fields/types.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { ControllerRenderProps, FieldValues, Path, RegisterOptions } from 'react-hook-form';
+import { ControllerRenderProps, FieldPathValue, FieldValues, Path, RegisterOptions } from 'react-hook-form';
 import { FieldProps } from '../../../chakra/field';
 import { InputProps } from '../../../chakra/input';
 import { InputGroupProps } from '../../../chakra/input-group';
@@ -11,6 +11,10 @@ export interface FormFieldPropsBase<FormFields extends FieldValues, Name extends
     onBlur?: () => void;
     onChange?: () => void;
     inputProps?: InputProps | TextareaProps;
+    controllerProps?: {
+        shouldUnregister?: boolean;
+        defaultValue?: FieldPathValue<FormFields, Name>;
+    };
     group?: Omit<InputGroupProps, 'children' | 'endElement'> & {
         endElement?: React.ReactNode | (({ field }: {
             field: ControllerRenderProps<FormFields, Name>;