@weareconceptstudio/form 0.0.0

package/README.md

@@ -0,0 +1 @@
+# `Form`

package/dist/checkbox/index.d.ts

@@ -0,0 +1,3 @@
+export default Checkbox;
+declare const Checkbox: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import * as React from 'react';

package/dist/checkbox/index.js

@@ -0,0 +1,10 @@
+import * as React from 'react';
+const Checkbox = React.forwardRef(({ type = 'checkbox', children }, forwardRef) => {
+    return (React.createElement("label", null,
+        React.createElement("input", { type: type, ...forwardRef }),
+        children !== undefined && React.createElement("span", null, children)));
+});
+if (process.env.NODE_ENV !== 'production') {
+    Checkbox.displayName = 'Checkbox';
+}
+export default Checkbox;

package/dist/color-picker/index.d.ts

@@ -0,0 +1,3 @@
+export default ColorPicker;
+declare const ColorPicker: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import * as React from 'react';

package/dist/color-picker/index.js

@@ -0,0 +1,8 @@
+import * as React from 'react';
+const ColorPicker = React.forwardRef((props, forwardRef) => {
+    return (React.createElement("input", { type: 'color', ...forwardRef }));
+});
+if (process.env.NODE_ENV !== 'production') {
+    ColorPicker.displayName = 'ColorPicker';
+}
+export default ColorPicker;

package/dist/config-provider/cssVariables.d.ts

@@ -0,0 +1,2 @@
+export declare function getStyle(globalPrefixCls: string, theme: any): string;
+export declare function registerTheme(globalPrefixCls: any, theme: any): void;

package/dist/config-provider/cssVariables.js

@@ -0,0 +1,25 @@
+import { warning, canUseDom, updateCSS } from '@weareconceptstudio/utils';
+export function getStyle(globalPrefixCls = 'cs-form', theme) {
+    const variables = {};
+    const fillColor = (colorVal, type) => {
+        variables[`${type}-color`] = colorVal;
+    };
+    if (theme.primaryColor) {
+        fillColor(theme.primaryColor, 'primary');
+    }
+    const cssList = Object.keys(variables).map((key) => `--${globalPrefixCls}-${key}: ${variables[key]};`);
+    return `
+        :root {
+            ${cssList.join('\n')}
+        }
+    `.trim();
+}
+export function registerTheme(globalPrefixCls, theme) {
+    const style = getStyle(globalPrefixCls, theme);
+    if (canUseDom()) {
+        updateCSS(style, 'dynamic-theme');
+    }
+    else {
+        warning(false, 'SSR do not support dynamic theme with css variables.');
+    }
+}

package/dist/config-provider/index.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export declare const ConfigContext: React.Context<{}>;
+interface ConfigProviderProps {
+    globalPrefixCls?: string;
+    theme?: object;
+    children: React.ReactNode;
+}
+declare const ConfigProvider: {
+    (props: ConfigProviderProps): React.JSX.Element;
+    displayName: string;
+};
+export default ConfigProvider;

package/dist/config-provider/index.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { registerTheme } from './cssVariables';
+export const ConfigContext = React.createContext({});
+const ProviderChildren = (props) => {
+    const { globalPrefixCls = 'cs-form', theme, children } = props;
+    if (theme) {
+        registerTheme(globalPrefixCls, theme);
+    }
+    return (React.createElement(ConfigContext.Provider, { value: {
+            globalPrefixCls,
+            theme
+        } }, children));
+};
+const ConfigProvider = (props) => {
+    return React.createElement(ProviderChildren, { ...props });
+};
+if (process.env.NODE_ENV !== 'production') {
+    ConfigProvider.displayName = 'ConfigProvider';
+}
+export default ConfigProvider;

package/dist/date-picker/index.d.ts

@@ -0,0 +1,3 @@
+export default DatePicker;
+declare const DatePicker: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import * as React from 'react';

package/dist/date-picker/index.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+/*
+    types - default=date,datetime-local,month,time,week
+*
+*/
+const DatePicker = React.forwardRef(({ type = 'date' }, forwardRef) => {
+    return (React.createElement("input", { type: type, ...forwardRef }));
+});
+if (process.env.NODE_ENV !== 'production') {
+    DatePicker.displayName = 'DatePicker';
+}
+export default DatePicker;

package/dist/error-message/index.d.ts

@@ -0,0 +1,9 @@
+export default ErrorMessage;
+declare function ErrorMessage({ as, errors, name, message, render, ...rest }: {
+    [x: string]: any;
+    as: any;
+    errors: any;
+    name: any;
+    message: any;
+    render: any;
+}): any;

package/dist/error-message/index.js

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { useFormContext, get } from 'react-hook-form';
+const ErrorMessage = ({ as, errors, name, message, render, ...rest }) => {
+    const methods = useFormContext();
+    const error = get(errors || methods.formState.errors, name);
+    if (!error) {
+        return null;
+    }
+    const { message: messageFromRegister, types } = error;
+    const props = Object.assign({}, rest, {
+        children: messageFromRegister || message,
+    });
+    return React.isValidElement(as)
+        ? React.cloneElement(as, props)
+        : render
+            ? (render({
+                message: messageFromRegister || message,
+                messages: types,
+            }))
+            : React.createElement(as || React.Fragment, props);
+};
+export default ErrorMessage;

package/dist/form/BaseForm.d.ts

@@ -0,0 +1,20 @@
+export default BaseForm;
+declare function BaseForm({ initialValues: defaultValues, values, children, onSubmit, layout, mode, reValidateMode, errors, resetOptions, criteriaMode, shouldFocusError, delayError, shouldUseNativeValidation, shouldUnregister, globalPrefixCls, theme, }: {
+    initialValues: any;
+    values: any;
+    children: any;
+    onSubmit: any;
+    layout?: string;
+    mode?: string;
+    reValidateMode: any;
+    errors: any;
+    resetOptions: any;
+    criteriaMode: any;
+    shouldFocusError: any;
+    delayError: any;
+    shouldUseNativeValidation: any;
+    shouldUnregister: any;
+    globalPrefixCls: any;
+    theme: any;
+}): React.JSX.Element;
+import * as React from 'react';

package/dist/form/BaseForm.js

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { FormProvider, useForm } from "react-hook-form";
+import styled from 'styled-components';
+import ConfigProvider from '../config-provider';
+// initialValues: object || async () => fetch('/api-endpoint')
+// values: object
+// children: React elements
+// onSubmit: func (values) => {}
+// layout: vertical | horizontal
+// mode: onChange | onBlur | onSubmit | onTouched | all = 'onSubmit'
+// reValidateMode: onChange | onBlur | onSubmit = 'onChange' 
+// errors: Reactive errors to update the form errors.
+// resetOptions: Option to reset form state update while updating new form values.
+// criteriaMode: Display all validation errors or one at a time. (firstError | all)
+// shouldFocusError: Enable or disable built-in focus management.
+// delayError: 	Delay error from appearing instantly.
+// shouldUseNativeValidation: Use browser built-in form constraint API.
+// shouldUnregister: Enable and disable input unregister after unmount.
+/**
+ * defaultValues are cached. To reset them, use the reset API.
+ * defaultValues will be included in the submission result by default.
+ * values will get updated when values props updates
+ * resetOptions: {
+    keepDirtyValues: true, // user-interacted input will be retained
+    keepErrors: true, // input errors will be retained with value update
+  },
+ * criteriaMode:{
+    When set to firstError (default), only the first error from each field will be gathered.
+    When set to all, all errors from each field will be gathered.
+  }
+ * shouldFocusError:  When set to true (default), and the user submits a form that fails validation, focus is set on the first field with an error.
+ * delayError: number
+ *
+*/
+const StyledForm = styled.form `
+    &.vertical {
+        .form-item-row {
+            flex-direction: column;
+        }
+    }
+
+    .form-item-row {
+        display: flex;
+    }
+
+    .form-item {
+         margin-bottom: 24px;    
+    }
+`;
+const BaseForm = ({ initialValues: defaultValues, values, children, onSubmit, layout = 'vertical', mode = 'onChange', reValidateMode, errors, resetOptions, criteriaMode, shouldFocusError, delayError, shouldUseNativeValidation, shouldUnregister, globalPrefixCls, theme, }) => {
+    const methods = useForm({
+        defaultValues,
+        values,
+        mode,
+        reValidateMode,
+        errors,
+        resetOptions,
+        criteriaMode,
+        shouldFocusError,
+        delayError,
+        shouldUseNativeValidation,
+        shouldUnregister,
+    });
+    return (React.createElement(ConfigProvider, { globalPrefixCls: globalPrefixCls, theme: theme },
+        React.createElement(FormProvider, { ...methods },
+            React.createElement(StyledForm, { onSubmit: methods.handleSubmit(onSubmit), className: layout }, children))));
+};
+export default BaseForm;

package/dist/form/Item/index.d.ts

@@ -0,0 +1,11 @@
+export default FormItem;
+declare function FormItem({ label, name, children, rules }: {
+    label: any;
+    name: any;
+    children: any;
+    rules?: {};
+}): React.JSX.Element;
+declare namespace FormItem {
+    let displayName: string;
+}
+import React from 'react';

package/dist/form/Item/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+//* HOC's
+import { useFormContext } from "react-hook-form";
+//* Components
+import ErrorMessage from '../../error-message';
+const FormItem = ({ label, name, children, rules = {} }) => {
+    const { register, getValues, setValue } = useFormContext();
+    const innerRef = register(name, rules);
+    return (React.createElement("div", { className: "form-item" },
+        React.createElement("div", { className: "form-item-row" },
+            React.createElement("div", { className: "form-item-label" },
+                React.createElement("label", { htmlFor: name }, label)),
+            React.createElement("div", { className: 'form-item-control' }, React.cloneElement(children, {
+                ref: innerRef,
+                getValues,
+                setValue,
+                name,
+                value: getValues()[name]
+            })),
+            React.createElement(ErrorMessage, { name: name, as: 'span' }))));
+};
+if (process.env.NODE_ENV !== 'production') {
+    FormItem.displayName = 'FormItem';
+}
+export default FormItem;

package/dist/form/hooks/useFormInstance.d.ts

@@ -0,0 +1,17 @@
+export default function useFormInstance(): {
+    watch: import("react-hook-form").UseFormWatch<import("react-hook-form").FieldValues>;
+    getValues: import("react-hook-form").UseFormGetValues<import("react-hook-form").FieldValues>;
+    getFieldState: import("react-hook-form").UseFormGetFieldState<import("react-hook-form").FieldValues>;
+    setError: import("react-hook-form").UseFormSetError<import("react-hook-form").FieldValues>;
+    clearErrors: import("react-hook-form").UseFormClearErrors<import("react-hook-form").FieldValues>;
+    setValue: import("react-hook-form").UseFormSetValue<import("react-hook-form").FieldValues>;
+    trigger: import("react-hook-form").UseFormTrigger<import("react-hook-form").FieldValues>;
+    formState: import("react-hook-form").FormState<import("react-hook-form").FieldValues>;
+    resetField: import("react-hook-form").UseFormResetField<import("react-hook-form").FieldValues>;
+    reset: import("react-hook-form").UseFormReset<import("react-hook-form").FieldValues>;
+    handleSubmit: import("react-hook-form").UseFormHandleSubmit<import("react-hook-form").FieldValues, undefined>;
+    unregister: import("react-hook-form").UseFormUnregister<import("react-hook-form").FieldValues>;
+    control: import("react-hook-form").Control<import("react-hook-form").FieldValues, any>;
+    register: import("react-hook-form").UseFormRegister<import("react-hook-form").FieldValues>;
+    setFocus: import("react-hook-form").UseFormSetFocus<import("react-hook-form").FieldValues>;
+};

package/dist/form/hooks/useFormInstance.js

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { useFormContext } from 'react-hook-form';
+export default function useFormInstance() {
+    const methods = useFormContext();
+    return { ...methods };
+}

package/dist/form/index.d.ts

@@ -0,0 +1,19 @@
+export default Form;
+declare const Form: ({ initialValues: defaultValues, values, children, onSubmit, layout, mode, reValidateMode, errors, resetOptions, criteriaMode, shouldFocusError, delayError, shouldUseNativeValidation, shouldUnregister, globalPrefixCls, theme, }: {
+    initialValues: any;
+    values: any;
+    children: any;
+    onSubmit: any;
+    layout?: string;
+    mode?: string;
+    reValidateMode: any;
+    errors: any;
+    resetOptions: any;
+    criteriaMode: any;
+    shouldFocusError: any;
+    delayError: any;
+    shouldUseNativeValidation: any;
+    shouldUnregister: any;
+    globalPrefixCls: any;
+    theme: any;
+}) => import("react").JSX.Element;

package/dist/form/index.js

@@ -0,0 +1,5 @@
+import BaseForm from "./BaseForm";
+import Item from "./Item";
+const Form = BaseForm;
+Form.Item = Item;
+export default Form;

package/dist/form/utils/validators.d.ts

@@ -0,0 +1,9 @@
+export function hasLength(payload: any, error: any): (value: any) => any;
+export function isEmail(error: any): (value: any) => any;
+export function isInRange({ min, max }: {
+    min: any;
+    max: any;
+}, error: any): (value: any) => any;
+export function isNotEmpty(error: any): (value: any) => any;
+export function matchesField(field: any, error: any): (value: any, values: any) => any;
+export function matches(regexp: any, error: any): (value: any) => any;

package/dist/form/utils/validators.js

@@ -0,0 +1,81 @@
+function isLengthValid(payload, value) {
+    if (typeof payload === 'number') {
+        return value.length === payload;
+    }
+    const { max, min } = payload;
+    let valid = true;
+    if (typeof max === 'number' && value.length > max) {
+        valid = false;
+    }
+    if (typeof min === 'number' && value.length < min) {
+        valid = false;
+    }
+    return valid;
+}
+export function hasLength(payload, error) {
+    const _error = error || true;
+    return (value) => {
+        if (typeof value === 'string') {
+            return isLengthValid(payload, value.trim()) ? null : _error;
+        }
+        if (typeof value === 'object' && value !== null && 'length' in value) {
+            return isLengthValid(payload, value) ? null : _error;
+        }
+        return _error;
+    };
+}
+export function isEmail(error) {
+    return matches(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, error);
+}
+export function isInRange({ min, max }, error) {
+    const _error = error || true;
+    return (value) => {
+        if (typeof value !== 'number') {
+            return _error;
+        }
+        let valid = true;
+        if (typeof min === 'number' && value < min) {
+            valid = false;
+        }
+        if (typeof max === 'number' && value > max) {
+            valid = false;
+        }
+        return valid ? null : _error;
+    };
+}
+export function isNotEmpty(error) {
+    const _error = error || true;
+    return (value) => {
+        if (typeof value === 'string') {
+            return value.trim().length > 0 ? null : _error;
+        }
+        if (Array.isArray(value)) {
+            return value.length > 0 ? null : _error;
+        }
+        if (value === null || value === undefined) {
+            return _error;
+        }
+        if (value === false) {
+            return _error;
+        }
+        return null;
+    };
+}
+export function matchesField(field, error) {
+    const _error = error || true;
+    return (value, values) => {
+        if (!values || !(field in values)) {
+            return _error;
+        }
+        return value === values[field] ? null : _error;
+    };
+}
+export function matches(regexp, error) {
+    const _error = error || true;
+    return (value) => {
+        if (typeof value !== 'string') {
+            return _error;
+        }
+        return regexp.test(value) ? null : _error;
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export { default as Form } from "./form";
+export { default as ErrorMessage } from "./error-message";
+export { default as Input } from "./input";
+export { default as Checkbox } from "./checkbox";
+export { default as ColorPicker } from "./color-picker";
+export { default as DatePicker } from "./date-picker";
+export { default as Radio } from "./radio";
+export { default as Select } from "./select";
+export { default as Upload } from "./upload";

package/dist/index.js

@@ -0,0 +1,9 @@
+export { default as Form } from './form';
+export { default as ErrorMessage } from './error-message';
+export { default as Input } from './input';
+export { default as Checkbox } from './checkbox';
+export { default as ColorPicker } from './color-picker';
+export { default as DatePicker } from './date-picker';
+export { default as Radio } from './radio';
+export { default as Select } from './select';
+export { default as Upload } from './upload';

package/dist/input/BaseInput/index.d.ts

@@ -0,0 +1,4 @@
+export const InputContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export default BaseInput;
+import * as React from 'react';
+declare const BaseInput: React.ForwardRefExoticComponent<React.RefAttributes<any>>;

package/dist/input/BaseInput/index.js

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import clsx from 'classnames';
+import { hasPrefixSuffix, hasAddon } from './utils';
+export const InputContainer = styled.div `
+    .affix-wrapper {
+        position:relative;
+        display:inline-flex;
+
+        .clear-icon {
+            font-size: 12px;
+            cursor: pointer;
+
+            &-hidden {
+                display: none;
+            }
+        }
+    }  
+`;
+const BaseInput = React.forwardRef((props, forwardRef) => {
+    const { inputElement: inputEl, addonBefore, addonAfter, prefix, suffix, allowClear, disabled, readOnly, components, value, className, children } = props;
+    const inputElement = children ?? inputEl;
+    // ======================== Components ======================== //
+    const AffixWrapperComponent = components?.affixWrapper || 'span';
+    const GroupWrapperComponent = components?.groupWrapper || 'span';
+    const WrapperComponent = components?.wrapper || 'span';
+    const GroupAddonComponent = components?.groupAddon || 'span';
+    // ======================== Refs ======================== //
+    const containerRef = React.useRef(null);
+    const groupRef = React.useRef(null);
+    let element = React.cloneElement(inputElement, {
+        // ...props,
+        className: `base-input`
+    });
+    // ======================== Prefix && Suffix ======================== //
+    if (hasPrefixSuffix(props)) {
+        let clearIcon = null;
+        if (allowClear) {
+            const needClear = !disabled && !readOnly && !!value;
+            const clearIconCls = 'clear-icon';
+            const iconNode = typeof allowClear === 'object' && allowClear?.clearIcon
+                ? allowClear.clearIcon
+                : '✖';
+            clearIcon = (React.createElement("span", { 
+                // onClick={(event) => {
+                //     handleReset?.(event);
+                //     onClear?.();
+                // }}
+                onMouseDown: (e) => e.preventDefault(), role: "button", tabIndex: -1, className: clsx(clearIconCls, {
+                    [`${clearIconCls}-hidden`]: !needClear,
+                    [`${clearIconCls}-has-suffix`]: !!suffix,
+                }) }, iconNode));
+        }
+        const suffixNode = (suffix || allowClear) && (React.createElement("span", null,
+            clearIcon,
+            suffix));
+        element = (React.createElement(AffixWrapperComponent, { ref: containerRef, className: 'affix-wrapper' },
+            prefix && (React.createElement("span", null, prefix)),
+            element,
+            suffixNode));
+    }
+    // ======================== Addon (Before && After) ======================== //
+    if (hasAddon(props)) {
+        element = (React.createElement(GroupWrapperComponent, { ref: groupRef },
+            React.createElement(WrapperComponent, null,
+                addonBefore && (React.createElement(GroupAddonComponent, null, addonBefore)),
+                element,
+                addonAfter && (React.createElement(GroupAddonComponent, null, addonAfter)))));
+    }
+    return (React.createElement(InputContainer, null, React.cloneElement(element, {
+        className: clsx(element.props?.className, className) || null,
+    })));
+});
+if (process.env.NODE_ENV !== 'production') {
+    BaseInput.displayName = 'BaseInput';
+}
+export default BaseInput;

package/dist/input/BaseInput/utils.d.ts

@@ -0,0 +1,2 @@
+export function hasAddon(props: any): boolean;
+export function hasPrefixSuffix(props: any): boolean;

package/dist/input/BaseInput/utils.js

@@ -0,0 +1,6 @@
+export function hasAddon(props) {
+    return !!(props.addonBefore || props.addonAfter);
+}
+export function hasPrefixSuffix(props) {
+    return !!(props.prefix || props.suffix || props.allowClear);
+}

package/dist/input/Input.d.ts

@@ -0,0 +1,3 @@
+export default Input;
+declare const Input: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import * as React from 'react';

package/dist/input/Input.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import BaseInput from './BaseInput';
+const StyledInput = styled.input `
+    box-sizing: border-box;
+    margin: 0;
+    list-style: none;
+    display: inline-block;
+    font-size: 14px;
+    padding: 4px 11px;
+    outline: none;
+`;
+const Input = React.forwardRef((props, forwardRef) => {
+    const { autoComplete, onChange, onFocus, onBlur, onPressEnter, onKeyDown, onKeyUp, disabled, className, type = 'text', value, } = props;
+    return (React.createElement(BaseInput, { ...props, value: value, disabled: disabled },
+        React.createElement(StyledInput, { type: type, autoComplete: autoComplete, onChange: onChange, onFocus: onFocus, onBlur: onBlur, onPressEnter: onPressEnter, onKeyDown: onKeyDown, onKeyUp: onKeyUp, disabled: disabled, className: className, ...forwardRef })));
+});
+export default Input;

package/dist/input/Number/index.d.ts

@@ -0,0 +1,3 @@
+export default Number;
+declare const Number: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import * as React from 'react';

package/dist/input/Number/index.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import Input from '../Input';
+const Number = React.forwardRef((props, forwardRef) => {
+    return (React.createElement(Input, { ref: forwardRef, type: 'number', ...props }));
+});
+if (process.env.NODE_ENV !== 'production') {
+    Number.displayName = 'InputNumber';
+}
+export default Number;

package/dist/input/Password/icons.d.ts

@@ -0,0 +1,3 @@
+export const eyeIcon: React.JSX.Element;
+export const openEye: React.JSX.Element;
+import React from "react";

package/dist/input/Password/icons.js

@@ -0,0 +1,6 @@
+import React from "react";
+export const eyeIcon = React.createElement("svg", { viewBox: "64 64 896 896", focusable: "false", "data-icon": "eye-invisible", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true" },
+    React.createElement("path", { d: "M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z" }),
+    React.createElement("path", { d: "M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z" }));
+export const openEye = React.createElement("svg", { viewBox: "64 64 896 896", focusable: "false", "data-icon": "eye", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true" },
+    React.createElement("path", { d: "M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z" }));

package/dist/input/Password/index.d.ts

@@ -0,0 +1,3 @@
+export default Password;
+declare const Password: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import * as React from 'react';

package/dist/input/Password/index.js

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { omit } from '@weareconceptstudio/utils';
+import { eyeIcon, openEye } from './icons';
+import Input from '../Input';
+const defaultIconRender = (visible) => visible ? openEye : eyeIcon;
+const actionMap = {
+    click: 'onClick',
+    hover: 'onMouseOver',
+};
+const Password = React.forwardRef((props, ref) => {
+    const { disabled, action = 'click', visibilityToggle = true, iconRender = defaultIconRender } = props;
+    const visibilityControlled = typeof visibilityToggle === 'object' && visibilityToggle.visible !== undefined;
+    const [visible, setVisible] = React.useState(() => visibilityControlled ? visibilityToggle.visible : false);
+    React.useEffect(() => {
+        if (visibilityControlled) {
+            setVisible(visibilityToggle.visible);
+        }
+    }, [visibilityControlled, visibilityToggle]);
+    const onVisibleChange = () => {
+        if (disabled) {
+            return;
+        }
+        setVisible((prevState) => {
+            const newState = !prevState;
+            if (typeof visibilityToggle === 'object') {
+                visibilityToggle.onVisibleChange?.(newState);
+            }
+            return newState;
+        });
+    };
+    const getIcon = () => {
+        const iconTrigger = actionMap[action] || '';
+        const icon = iconRender(visible);
+        const iconProps = {
+            [iconTrigger]: onVisibleChange,
+            className: 'input-password-icon',
+            key: 'passwordIcon',
+            onMouseDown: (e) => {
+                e.preventDefault();
+            },
+            onMouseUp: (e) => {
+                e.preventDefault();
+            },
+        };
+        return React.cloneElement(React.isValidElement(icon) ? icon : React.createElement("span", null, icon), iconProps);
+    };
+    const suffixIcon = visibilityToggle && getIcon();
+    const { className, ...restProps } = props;
+    const omittedProps = {
+        ...omit(restProps, ['suffix', 'iconRender', 'visibilityToggle']),
+        type: visible ? 'text' : 'password',
+        suffix: suffixIcon,
+    };
+    return (React.createElement(Input, { ref: ref, ...omittedProps }));
+});
+if (process.env.NODE_ENV !== 'production') {
+    Password.displayName = 'InputPassword';
+}
+export default Password;

package/dist/input/TextArea/index.d.ts

@@ -0,0 +1,3 @@
+export default TextArea;
+declare const TextArea: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import * as React from 'react';

package/dist/input/TextArea/index.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import BaseInput from '../BaseInput';
+const StyledTextArea = styled.textarea `
+    font-size: 14px;
+    padding: 4px 11px;
+`;
+const TextArea = React.forwardRef((props, forwardRef) => {
+    return (React.createElement(BaseInput, { ...props },
+        React.createElement(StyledTextArea, { ...forwardRef, rows: 5 })));
+});
+if (process.env.NODE_ENV !== 'production') {
+    TextArea.displayName = 'TextArea';
+}
+export default TextArea;

package/dist/input/index.d.ts

@@ -0,0 +1,2 @@
+export default Input;
+import Input from './Input';

package/dist/input/index.js

@@ -0,0 +1,8 @@
+import Input from './Input';
+import TextArea from './TextArea';
+import Password from './Password';
+import Number from './Number';
+Input.TextArea = TextArea;
+Input.Password = Password;
+Input.Number = Number;
+export default Input;

package/dist/radio/BaseRadio.d.ts

@@ -0,0 +1,3 @@
+export default Radio;
+declare const Radio: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import * as React from 'react';

package/dist/radio/BaseRadio.js

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import RadioGroupContext, { RadioOptionTypeContext } from './context';
+import Checkbox from "../checkbox";
+const Radio = React.forwardRef(({ children, ...restProps }, forwardRef) => {
+    const groupContext = React.useContext(RadioGroupContext);
+    const radioProps = {
+        ref: forwardRef,
+    };
+    if (groupContext) {
+        radioProps.ref = groupContext.forwardRef;
+    }
+    return (React.createElement("label", null,
+        React.createElement(Checkbox, { type: 'radio', ...radioProps }),
+        children !== undefined ? React.createElement("span", null, children) : null));
+});
+if (process.env.NODE_ENV !== 'production') {
+    Radio.displayName = 'Radio';
+}
+export default Radio;

package/dist/radio/Group.d.ts

@@ -0,0 +1,3 @@
+export default RadioGroup;
+declare const RadioGroup: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import * as React from 'react';

package/dist/radio/Group.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { RadioGroupContextProvider } from './context';
+import Radio from './BaseRadio';
+const RadioGroup = React.forwardRef((props, forwardRef) => {
+    const { children, options } = props;
+    let childrenToRender = children;
+    if (options && options.length > 0) {
+        childrenToRender = options.map(option => {
+            if (typeof option === 'string' || typeof option === 'number') {
+                return (React.createElement(Radio, { key: option.toString(), value: option }, option));
+            }
+            return (React.createElement(Radio, { key: `radio-group-value-options-${option.value}`, value: option.value }, option.label));
+        });
+    }
+    return (React.createElement("div", null,
+        React.createElement(RadioGroupContextProvider, { value: {
+                forwardRef: forwardRef,
+            } }, childrenToRender)));
+});
+export default RadioGroup;

package/dist/radio/context.d.ts

@@ -0,0 +1,6 @@
+export const RadioGroupContextProvider: React.Provider<any>;
+export default RadioGroupContext;
+export const RadioOptionTypeContext: React.Context<any>;
+export const RadioOptionTypeContextProvider: React.Provider<any>;
+import * as React from 'react';
+declare const RadioGroupContext: React.Context<any>;

package/dist/radio/context.js

@@ -0,0 +1,6 @@
+import * as React from 'react';
+const RadioGroupContext = React.createContext(null);
+export const RadioGroupContextProvider = RadioGroupContext.Provider;
+export default RadioGroupContext;
+export const RadioOptionTypeContext = React.createContext(null);
+export const RadioOptionTypeContextProvider = RadioOptionTypeContext.Provider;

package/dist/radio/index.d.ts

@@ -0,0 +1,2 @@
+export default Radio;
+declare const Radio: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;

package/dist/radio/index.js

@@ -0,0 +1,5 @@
+import BaseRadio from "./BaseRadio";
+import RadioGroup from "./Group";
+const Radio = BaseRadio;
+Radio.Group = RadioGroup;
+export default Radio;

package/dist/select/index.d.ts

@@ -0,0 +1,3 @@
+export default Select;
+declare const Select: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import * as React from 'react';

package/dist/select/index.js

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import ReactSelect from 'react-select';
+const Select = React.forwardRef((props, forwardRef) => {
+    const { name, getValues, setValue, multiple = false, allowClear = false, allowSearch = true, disabled = false, loading = false, options = [], } = props;
+    const [val, setVal] = React.useState(getValues()[name] || (multiple ? [] : ''));
+    const handleChange = React.useCallback((newVal) => {
+        let vals;
+        if (multiple) {
+            vals = newVal.map(item => item.value);
+        }
+        else {
+            vals = newVal.value;
+        }
+        setValue(name, vals);
+        setVal(vals);
+    }, [name, multiple]);
+    return (React.createElement("div", null,
+        React.createElement("input", { type: 'hidden', ...forwardRef }),
+        React.createElement(ReactSelect, { options: options, onChange: handleChange, value: options.filter((opt) => multiple ? val.includes(opt.value) : opt.value === val), isMulti: multiple, isClearable: allowClear, isSearchable: allowSearch, isDisabled: disabled, isLoading: loading })));
+});
+if (process.env.NODE_ENV !== 'production') {
+    Select.displayName = 'Select';
+}
+export default Select;

package/dist/upload/index.d.ts

@@ -0,0 +1,3 @@
+export default Upload;
+declare const Upload: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import * as React from 'react';

package/dist/upload/index.js

@@ -0,0 +1,6 @@
+import * as React from 'react';
+const Upload = React.forwardRef((props, forwardRef) => {
+    return (React.createElement("div", null,
+        React.createElement("input", { type: 'file', ...forwardRef })));
+});
+export default Upload;

package/package.json

@@ -0,0 +1,35 @@
+{
+    "name": "@weareconceptstudio/form",
+    "version": "0.0.0",
+    "description": "Concept Studio Form",
+    "author": "Concept Studio",
+    "license": "ISC",
+    "main": "dist/index.js",
+    "files": [
+        "dist"
+    ],
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "default": "./dist/index.js"
+        }
+    },
+    "scripts": {
+        "build": "tsc -m es6",
+        "watch": "tsc -m es6 --watch"
+    },
+    "dependencies": {
+        "@weareconceptstudio/utils": "*",
+        "classnames": "2.5.1",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "react-hook-form": "^7.52.1",
+        "react-select": "5.8.0",
+        "styled-components": "^6.1.8"
+    },
+    "devDependencies": {
+        "@babel/plugin-proposal-private-property-in-object": "7.21.11",
+        "rimraf": "5.0.5",
+        "typescript": "5.3.3"
+    }
+}