chop-logic-components 0.13.0 → 1.0.2

package/README.md

@@ -1,3 +1,51 @@
 # Chop Logic Components
 
-A library of custom React components for use in the Chop Logic project.
+Welcome to **Chop Logic Components**, a comprehensive React components library packed with a variety of **styled components** and **custom hooks** that are easy to integrate into any React project.
+
+## About the Library
+
+Chop Logic is designed to speed up development by providing reusable, accessible, and highly customizable components. Whether you're building complex forms, creating dynamic layouts, or managing component logic with hooks, Chop Logic has the tools to make it easier.
+
+### Why Choose Chop Logic?
+
+Here's what makes Chop Logic an excellent addition to your React project:
+
+- **Styled Components:** All components are styled using a consistent, modern design language and can easily adapt to your project's look and feel. Each component offers a flexible API, making them simple to extend and customize.
+
+- **Custom Hooks:** Simplify your component logic by using the custom hooks provided. From managing form input to handling asynchronous data fetching, Chop Logic's hooks cover common scenarios that developers face daily.
+
+- **Built for Reusability:** Every component and hook is designed with reusability in mind, reducing repetitive code and enabling faster development cycles.
+
+- **Ease of Use:** Chop Logic follows best practices in API design, ensuring that components and hooks are easy to learn and work seamlessly with each other.
+
+- **Storybook Integration:** This library includes comprehensive Storybook documentation for each component and hook, allowing you to explore usage examples, try props in real-time, and see how each feature behaves in isolation.
+
+## Key Features
+
+### Components
+
+Chop Logic includes a wide range of styled components that are ready to use in your projects:
+
+- **Inputs:** Beautifully styled input controllers with customization options.
+- **Containers:** Easily customizable container elements like text grids, forms, and tabs.
+- **Modals:** Flexible modal windows and accessible tooltips, perfect for enhancing user interactions.
+- **More Components Coming Soon!**
+
+### Hooks
+
+In addition to UI components, Chop Logic offers a collection of custom hooks to help you manage complex logic:
+
+- **useModalFocusTrap:** A hook that traps focus within an open modal, ensuring accessibility compliance.
+- **useKeyPress:** Easily manage keyboard interactions and trigger actions based on keypress events.
+- **useContainerDimensions:** Get the dimensions of any HTML element to dynamically adjust your UI.
+- **More Hooks Coming Soon!**
+
+## Getting Started
+
+To get started with Chop Logic, install it via npm or yarn:
+
+```bash
+npm install chop-logic-components
+# or
+yarn add chop-logic-components
+```

package/dist/components/containers/form/Form.d.ts

@@ -1,11 +1,5 @@
-import { default as React, PropsWithChildren } from 'react';
-import { ChopLogicFormData } from './FormContext';
+import { default as React } from 'react';
+import { ChopLogicFormProps } from './types';
 
-export type ChopLogicFormProps = PropsWithChildren & React.HTMLAttributes<HTMLFormElement> & {
-    columns?: number;
-    initialValues?: ChopLogicFormData;
-    hasReset?: boolean;
-    onClickSubmit?: (data: ChopLogicFormData) => void;
-};
 declare const ChopLogicForm: React.FC<ChopLogicFormProps>;
 export default ChopLogicForm;

package/dist/components/containers/form/FormContext.d.ts

@@ -1,18 +1,4 @@
 import { default as React } from 'react';
+import { ChopLogicFormContextProps } from './types';
 
-export type ChopLogicFormData = {
-    [key: string]: unknown;
-};
-export type ChopLogicFormValidationState = [string, boolean][];
-export type ChopLogicFormInput = HTMLInputElement | HTMLSelectElement;
-export type ChopLogicFormInputParams = {
-    name: string;
-    value: unknown;
-    valid?: boolean;
-};
-export type ChopLogicFormContextProps = {
-    onChangeFormInput?: (params: ChopLogicFormInputParams) => void;
-    initialValues?: ChopLogicFormData;
-    resetSignal?: number;
-};
 export declare const ChopLogicFormContext: React.Context<ChopLogicFormContextProps>;

package/dist/components/containers/form/__docs__/FormExample.d.ts

@@ -1,4 +1,4 @@
-import { ChopLogicFormProps } from '../Form';
+import { ChopLogicFormProps } from '../types';
 
 declare const FormExample: React.FC<ChopLogicFormProps>;
 export default FormExample;

package/dist/components/containers/form/controller.d.ts

@@ -1,5 +1,5 @@
 import { FormEvent } from 'react';
-import { ChopLogicFormData, ChopLogicFormInputParams } from './FormContext';
+import { ChopLogicFormData, ChopLogicFormInputParams } from './types';
 
 export declare function useChopLogicFormController({ initialValues, onReset, onSubmit, onClickSubmit, }: {
     initialValues?: ChopLogicFormData;

package/dist/components/containers/form/helpers.d.ts

@@ -1,4 +1,4 @@
-import { ChopLogicFormData, ChopLogicFormInputParams, ChopLogicFormValidationState } from './FormContext';
+import { ChopLogicFormData, ChopLogicFormInputParams, ChopLogicFormValidationState } from './types';
 
 export declare function getInitialValidationState(data?: ChopLogicFormData): ChopLogicFormValidationState;
 export declare function updateValidationState(state: ChopLogicFormValidationState, params: ChopLogicFormInputParams): ChopLogicFormValidationState;

package/dist/components/containers/form/types.d.ts

@@ -0,0 +1,23 @@
+import { PropsWithChildren } from 'react';
+
+export type ChopLogicFormData = {
+    [key: string]: unknown;
+};
+export type ChopLogicFormValidationState = [string, boolean][];
+export type ChopLogicFormInput = HTMLInputElement | HTMLSelectElement;
+export type ChopLogicFormInputParams = {
+    name: string;
+    value: unknown;
+    valid?: boolean;
+};
+export type ChopLogicFormContextProps = {
+    onChangeFormInput?: (params: ChopLogicFormInputParams) => void;
+    initialValues?: ChopLogicFormData;
+    resetSignal?: number;
+};
+export type ChopLogicFormProps = PropsWithChildren & React.HTMLAttributes<HTMLFormElement> & {
+    columns?: number;
+    initialValues?: ChopLogicFormData;
+    hasReset?: boolean;
+    onClickSubmit?: (data: ChopLogicFormData) => void;
+};

package/dist/components/containers/grid/controller.d.ts

@@ -0,0 +1,16 @@
+import { ChopLogicGridItem } from './types';
+
+export declare const useChopLogicGridController: ({ data, id, onSelect, }: {
+    data: ChopLogicGridItem[];
+    id?: string;
+    onSelect?: (ids: string[]) => void;
+}) => {
+    elementId: string;
+    isAllSelected: boolean;
+    isAllCheckboxDisabled: boolean;
+    selectedIds: string[];
+    handleSelectAll: () => void;
+    handleDeselectAll: () => void;
+    handleSelectRowById: (id: string) => void;
+    handleDeselectRowById: (id: string) => void;
+};

package/dist/components/containers/grid/elements/Checkbox.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 
-export type ChopLogicCheckboxProps = React.InputHTMLAttributes<HTMLInputElement> & {
+type ChopLogicGridCheckboxProps = React.InputHTMLAttributes<HTMLInputElement> & {
     label: string;
 };
-declare const GridCheckbox: React.FC<ChopLogicCheckboxProps>;
+declare const GridCheckbox: React.FC<ChopLogicGridCheckboxProps>;
 export default GridCheckbox;

package/dist/components/containers/tabs/Tabs.d.ts

@@ -1,16 +1,5 @@
 import { default as React } from 'react';
+import { ChopLogicTabsProps } from './types';
 
-export type ChopLogicTabsProps = React.HTMLAttributes<HTMLDivElement> & {
-    tabs: ChopLogicTabItem[];
-    defaultTabId?: string;
-    mode?: ChopLogicTabsMode;
-};
-export type ChopLogicTabItem = {
-    content: React.ReactElement;
-    title: string;
-    id: string;
-    disabled?: boolean;
-};
-export type ChopLogicTabsMode = 'vertical' | 'horizontal';
 declare const ChopLogicTabs: React.FC<ChopLogicTabsProps>;
 export default ChopLogicTabs;

package/dist/components/containers/tabs/Tabs.styled.d.ts

@@ -1,4 +1,4 @@
-import { ChopLogicTabsMode } from './Tabs';
+import { ChopLogicTabsMode } from './types';
 
 export declare const StyledTabButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
     $selected: boolean;

package/dist/components/containers/tabs/elements/TabButton.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { ChopLogicTabsMode } from '../Tabs';
+import { ChopLogicTabsMode } from '../types';
 
 type ChopLogicTabButtonProps = {
     title: string;

package/dist/components/containers/tabs/elements/TabContent.d.ts

@@ -1,9 +1,8 @@
 import { default as React } from 'react';
-import { ChopLogicTabItem } from '../Tabs';
+import { ChopLogicTabItem } from '../types';
 
-type ChopLogicTabContentProps = {
+declare const ChopLogicTabContent: React.FC<{
     tabs: ChopLogicTabItem[];
     selectedTabId: string;
-};
-declare const ChopLogicTabContent: React.FC<ChopLogicTabContentProps>;
+}>;
 export default ChopLogicTabContent;

package/dist/components/containers/tabs/elements/TabList.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { ChopLogicTabItem, ChopLogicTabsMode } from '../Tabs';
+import { ChopLogicTabItem, ChopLogicTabsMode } from '../types';
 
 type ChopLogicTabListProps = {
     tabs: ChopLogicTabItem[];

package/dist/components/containers/tabs/types.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export type ChopLogicTabsProps = React.HTMLAttributes<HTMLDivElement> & {
+    tabs: ChopLogicTabItem[];
+    defaultTabId?: string;
+    mode?: ChopLogicTabsMode;
+};
+export type ChopLogicTabItem = {
+    content: React.ReactElement;
+    title: string;
+    id: string;
+    disabled?: boolean;
+};
+export type ChopLogicTabsMode = 'vertical' | 'horizontal';

package/dist/components/inputs/_common/input-inner-button/InputInnerButton.d.ts

@@ -1,10 +1,10 @@
 import { default as React } from 'react';
-import { CLIcon } from '../../../../../../../../../../src/components/misc/icon/Icon';
+import { ChopLogicIconName } from '../../../../../../../../../../src/components/misc/icon/Icon';
 
 type ClearInputButtonProps = {
     onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
     label: string;
-    icon: CLIcon;
+    icon: ChopLogicIconName;
 };
 declare const InputInnerButton: React.FC<ClearInputButtonProps>;
 export default InputInnerButton;

package/dist/components/inputs/button/Button.d.ts

@@ -1,14 +1,5 @@
-import { default as React, MouseEventHandler } from 'react';
-import { CLIcon } from '../../../../../../../../../src/components/misc/icon/Icon';
+import { default as React } from 'react';
+import { ChopLogicButtonProps } from './types';
 
-export type ChopLogicButtonView = 'primary' | 'secondary' | 'danger' | 'icon';
-export type ChopLogicButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    onClick?: MouseEventHandler<HTMLButtonElement> | (() => void);
-    view?: ChopLogicButtonView;
-    label?: string;
-    icon?: CLIcon;
-    text?: string;
-    extended?: boolean;
-};
 declare const ChopLogicButton: React.FC<ChopLogicButtonProps>;
 export default ChopLogicButton;

package/dist/components/inputs/button/Button.styled.d.ts

@@ -1,4 +1,4 @@
-import { ChopLogicButtonView } from './Button';
+import { ChopLogicButtonView } from './types';
 
 export declare const StyledButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
     $view: ChopLogicButtonView;

package/dist/components/inputs/button/__docs__/ButtonExample.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { ChopLogicButtonProps } from '../Button';
+import { ChopLogicButtonProps } from '../types';
 
 declare const ExampleButton: React.FC<ChopLogicButtonProps>;
 export default ExampleButton;

package/dist/components/inputs/button/types.d.ts

@@ -0,0 +1,12 @@
+import { MouseEventHandler } from 'react';
+import { ChopLogicIconName } from '../../../../../../../../../src/components/misc/icon/Icon';
+
+export type ChopLogicButtonView = 'primary' | 'secondary' | 'danger' | 'icon';
+export type ChopLogicButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    onClick?: MouseEventHandler<HTMLButtonElement> | (() => void);
+    view?: ChopLogicButtonView;
+    label?: string;
+    icon?: ChopLogicIconName;
+    text?: string;
+    extended?: boolean;
+};

package/dist/components/inputs/checkbox/Checkbox.d.ts

@@ -1,10 +1,5 @@
 import { default as React } from 'react';
+import { ChopLogicCheckboxProps } from './types';
 
-export type ChopLogicCheckboxProps = React.InputHTMLAttributes<HTMLInputElement> & {
-    name: string;
-    label: string;
-    noLabel?: boolean;
-    iconPosition?: 'left' | 'right';
-};
 declare const ChopLogicCheckbox: React.FC<ChopLogicCheckboxProps>;
 export default ChopLogicCheckbox;

package/dist/components/inputs/checkbox/__docs__/CheckboxExample.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { ChopLogicCheckboxProps } from '../Checkbox';
+import { ChopLogicCheckboxProps } from '../types';
 
 declare const Example: React.FC<ChopLogicCheckboxProps>;
 export default Example;

package/dist/components/inputs/checkbox/controller.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare function useChopLogicCheckboxController({ name, defaultChecked, onChange, }: {
+    name: string;
+    defaultChecked?: boolean;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+}): {
+    handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    checked: boolean;
+};

package/dist/components/inputs/checkbox/helpers.d.ts

@@ -1,9 +1,7 @@
-/// <reference types="react" />
-export declare function useChopLogicCheckboxController({ name, defaultChecked, onChange, }: {
-    name: string;
+import { ChopLogicFormData } from '../../../../../../../../../src/components/containers/form/types';
+
+export declare function getCheckboxInitialValue({ defaultChecked, initialValues, name, }: {
     defaultChecked?: boolean;
-    onChange?: React.ChangeEventHandler<HTMLInputElement>;
-}): {
-    handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    checked: boolean;
-};
+    initialValues?: ChopLogicFormData;
+    name: string;
+}): boolean;

package/dist/components/inputs/checkbox/types.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export type ChopLogicCheckboxProps = React.InputHTMLAttributes<HTMLInputElement> & {
+    name: string;
+    label: string;
+    noLabel?: boolean;
+    iconPosition?: 'left' | 'right';
+};

package/dist/components/inputs/multi-select/MultiSelect.d.ts

@@ -1,21 +1,4 @@
-import { SelectValue } from '../select/Select';
+import { ChopLogicMultiSelectProps } from './types';
 
-export type MultiSelectValue = SelectValue & {
-    selected: boolean;
-};
-export type ChopLogicMultiSelectProps = React.SelectHTMLAttributes<HTMLSelectElement> & {
-    name: string;
-    label: string;
-    options: SelectValue[];
-    onChange?: (values?: SelectValue[]) => void;
-    placeholder?: string;
-};
-export type MultiSelectDropdownProps = {
-    options: MultiSelectValue[];
-    opened: boolean;
-    dropdownId: string;
-    onClose: () => void;
-    onSelect: (id: string) => void;
-};
 declare const ChopLogicMultiSelect: React.FC<ChopLogicMultiSelectProps>;
 export default ChopLogicMultiSelect;

package/dist/components/inputs/multi-select/__docs__/MultiSelectExample.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { ChopLogicMultiSelectProps } from '../MultiSelect';
+import { ChopLogicMultiSelectProps } from '../types';
 
 declare const Example: React.FC<ChopLogicMultiSelectProps>;
 export default Example;

package/dist/components/inputs/multi-select/controller.d.ts

@@ -0,0 +1,15 @@
+import { SelectValue } from '../select/types';
+import { MultiSelectValue } from './types';
+
+export declare function useChopLogicMultiSelectController({ name, defaultValue, onChange, options, }: {
+    name: string;
+    defaultValue?: string | number | readonly string[];
+    onChange?: (values?: SelectValue[]) => void;
+    options: SelectValue[];
+}): {
+    handleClose: () => void;
+    handleToggle: () => void;
+    handleSelect: (id: string) => void;
+    opened: boolean;
+    values: MultiSelectValue[];
+};

package/dist/components/inputs/multi-select/elements/Combobox.d.ts

@@ -1,4 +1,4 @@
-import { MultiSelectValue } from '../MultiSelect';
+import { MultiSelectValue } from '../types';
 
 type SelectComboboxProps = {
     opened: boolean;

package/dist/components/inputs/multi-select/elements/Dropdown.d.ts

@@ -1,4 +1,4 @@
-import { MultiSelectDropdownProps } from '../MultiSelect';
+import { MultiSelectDropdownProps } from '../types';
 
 declare const MultiSelectDropdown: React.FC<MultiSelectDropdownProps>;
 export default MultiSelectDropdown;

package/dist/components/inputs/multi-select/elements/Option.d.ts

@@ -1,4 +1,4 @@
-import { MultiSelectValue } from '../MultiSelect';
+import { MultiSelectValue } from '../types';
 
 type SelectOptionProps = {
     value: MultiSelectValue;

package/dist/components/inputs/multi-select/helpers.d.ts

@@ -1,6 +1,6 @@
-import { ChopLogicFormData } from '../../../../../../../../../src/components/containers/form/FormContext';
-import { SelectValue } from '../select/Select';
-import { MultiSelectValue } from './MultiSelect';
+import { ChopLogicFormData } from '../../../../../../../../../src/components/containers/form/types';
+import { SelectValue } from '../select/types';
+import { MultiSelectValue } from './types';
 
 export declare function getMultiSelectInitialValues({ name, options, initialValues, defaultValue, }: {
     name: string;
@@ -8,15 +8,5 @@ export declare function getMultiSelectInitialValues({ name, options, initialValu
     initialValues?: ChopLogicFormData;
     defaultValue?: string | number | readonly string[];
 }): MultiSelectValue[];
-export declare function useChopLogicMultiSelectController({ name, defaultValue, onChange, options, }: {
-    name: string;
-    defaultValue?: string | number | readonly string[];
-    onChange?: (values?: SelectValue[]) => void;
-    options: SelectValue[];
-}): {
-    handleClose: () => void;
-    handleToggle: () => void;
-    handleSelect: (id: string) => void;
-    opened: boolean;
-    values: MultiSelectValue[];
-};
+export declare const getMultiSelectFormValues: (options: MultiSelectValue[]) => string[];
+export declare const getMultiSelectUpdatedValues: (options: MultiSelectValue[], id: string) => MultiSelectValue[];

package/dist/components/inputs/multi-select/types.d.ts

@@ -0,0 +1,19 @@
+import { SelectValue } from '../select/types';
+
+export type MultiSelectValue = SelectValue & {
+    selected: boolean;
+};
+export type ChopLogicMultiSelectProps = React.SelectHTMLAttributes<HTMLSelectElement> & {
+    name: string;
+    label: string;
+    options: SelectValue[];
+    onChange?: (values?: SelectValue[]) => void;
+    placeholder?: string;
+};
+export type MultiSelectDropdownProps = {
+    options: MultiSelectValue[];
+    opened: boolean;
+    dropdownId: string;
+    onClose: () => void;
+    onSelect: (id: string) => void;
+};

package/dist/components/inputs/numeric/NumericInput.d.ts

@@ -1,14 +1,5 @@
 import { default as React } from 'react';
+import { ChopLogicNumericInputProps } from './types';
 
-export type NumericValidationFunction = (input?: number) => boolean;
-export type ChopLogicNumericInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
-    name: string;
-    label: string;
-    errorMessage?: string;
-    validator?: NumericValidationFunction;
-    onClear?: () => void;
-    hasSpinButtons?: boolean;
-    onSpinButtonClick?: (value?: number) => void;
-};
 declare const ChopLogicNumericInput: React.FC<ChopLogicNumericInputProps>;
 export default ChopLogicNumericInput;

package/dist/components/inputs/numeric/__docs__/NumericInputExample.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { ChopLogicNumericInputProps } from '../NumericInput';
+import { ChopLogicNumericInputProps } from '../types';
 
 declare const Example: React.FC<ChopLogicNumericInputProps>;
 export default Example;

package/dist/components/inputs/numeric/controller.d.ts

@@ -0,0 +1,22 @@
+import { ChangeEventHandler } from 'react';
+import { NumericValidationFunction } from './types';
+
+export declare function useChopLogicNumericInputController({ name, defaultValue, onChange, onSpinButtonClick, min, max, step, required, validator, }: {
+    name: string;
+    defaultValue?: string | number | readonly string[];
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    onSpinButtonClick?: (value?: number) => void;
+    min?: string | number;
+    max?: string | number;
+    step: number;
+    required: boolean;
+    validator?: NumericValidationFunction;
+}): {
+    handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    value: number;
+    valid: boolean;
+    minValue: number;
+    maxValue: number;
+    increment: () => void;
+    decrement: () => void;
+};

package/dist/components/inputs/numeric/helpers.d.ts

@@ -1,6 +1,5 @@
-import { ChangeEventHandler } from 'react';
-import { ChopLogicFormData } from '../../../../../../../../../src/components/containers/form/FormContext';
-import { NumericValidationFunction } from './NumericInput';
+import { ChopLogicFormData } from '../../../../../../../../../src/components/containers/form/types';
+import { NumericValidationFunction } from './types';
 
 export declare function getNumericInputInitialValue({ name, initialValues, defaultValue, }: {
     name: string;
@@ -14,22 +13,3 @@ export declare function validateNumericInputValue({ value, required, validator,
     maxValue?: number;
     minValue?: number;
 }): boolean;
-export declare function useChopLogicNumericInputController({ name, defaultValue, onChange, onSpinButtonClick, min, max, step, required, validator, }: {
-    name: string;
-    defaultValue?: string | number | readonly string[];
-    onChange?: ChangeEventHandler<HTMLInputElement>;
-    onSpinButtonClick?: (value?: number) => void;
-    min?: string | number;
-    max?: string | number;
-    step: number;
-    required: boolean;
-    validator?: NumericValidationFunction;
-}): {
-    handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    value: number;
-    valid: boolean;
-    minValue: number;
-    maxValue: number;
-    increment: () => void;
-    decrement: () => void;
-};

package/dist/components/inputs/numeric/types.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export type NumericValidationFunction = (input?: number) => boolean;
+export type ChopLogicNumericInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+    name: string;
+    label: string;
+    errorMessage?: string;
+    validator?: NumericValidationFunction;
+    onClear?: () => void;
+    hasSpinButtons?: boolean;
+    onSpinButtonClick?: (value?: number) => void;
+};

package/dist/components/inputs/select/Select.d.ts

@@ -1,16 +1,4 @@
-/// <reference types="react" />
-export type ChopLogicSelectProps = React.SelectHTMLAttributes<HTMLSelectElement> & {
-    name: string;
-    label: string;
-    options: SelectValue[];
-    onChange?: (value?: SelectValue) => void;
-    placeholder?: string;
-};
-export type SelectValue = {
-    id: string;
-    label: string;
-} & {
-    [key in string]: unknown;
-};
+import { ChopLogicSelectProps } from './types';
+
 declare const ChopLogicSelect: React.FC<ChopLogicSelectProps>;
 export default ChopLogicSelect;

package/dist/components/inputs/select/__docs__/SelectExample.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { ChopLogicSelectProps } from '../Select';
+import { ChopLogicSelectProps } from '../types';
 
 declare const Example: React.FC<ChopLogicSelectProps>;
 export default Example;

package/dist/components/inputs/select/controller.d.ts

@@ -0,0 +1,15 @@
+import { SelectValue } from './types';
+
+export declare function useChopLogicSelectController({ name, defaultValue, onChange, options, }: {
+    name: string;
+    defaultValue?: string | number | readonly string[];
+    onChange?: (value?: SelectValue) => void;
+    options: SelectValue[];
+}): {
+    selected: SelectValue | undefined;
+    opened: boolean;
+    handleClear: () => void;
+    handleClose: () => void;
+    handleToggle: () => void;
+    handleSelect: (id: string) => void;
+};

package/dist/components/inputs/select/elements/Combobox.d.ts

@@ -1,4 +1,4 @@
-import { SelectValue } from '../Select';
+import { SelectValue } from '../types';
 
 type SelectComboboxProps = {
     opened: boolean;

package/dist/components/inputs/select/elements/Dropdown.d.ts

@@ -1,4 +1,4 @@
-import { SelectValue } from '../Select';
+import { SelectValue } from '../types';
 
 type SelectDropdownProps = {
     options: SelectValue[];

package/dist/components/inputs/select/elements/Option.d.ts

@@ -1,10 +1,4 @@
-import { SelectValue } from '../Select';
+import { SelectOptionProps } from '../types';
 
-type SelectOptionProps = {
-    value: SelectValue;
-    isSelected: boolean;
-    onSelect: (id: string) => void;
-    onClear: () => void;
-};
 declare const SelectOption: React.FC<SelectOptionProps>;
 export default SelectOption;