chop-logic-components 1.0.4 → 1.0.6

package/README.md

@@ -4,9 +4,12 @@ Welcome to **Chop Logic Components**, a comprehensive React components library p
 
 ## 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.
+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 Components has the tools to make it easier.
 
-All components are well documented using Storybook. Visit the [DEMO page](https://savourygin.github.io/chop-logic-components) and try them out.
+## Links
+
+- [Storybook Playground](https://savourygin.github.io/chop-logic-components)
+- [Npm](https://www.npmjs.com/package/chop-logic-components)
 
 ## Getting Started
 

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const StyledForm: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, {
     $columns: number;
 }>> & string;

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

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

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

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

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

@@ -1,10 +1,10 @@
-import { PropsWithChildren } from 'react';
+import { FormEventHandler, PropsWithChildren } from 'react';
+import { CommonComponentProps } from '../../../../../../../../../src/utils/types';
 
 export type ChopLogicFormData = {
     [key: string]: unknown;
 };
 export type ChopLogicFormValidationState = [string, boolean][];
-export type ChopLogicFormInput = HTMLInputElement | HTMLSelectElement;
 export type ChopLogicFormInputParams = {
     name: string;
     value: unknown;
@@ -15,9 +15,11 @@ export type ChopLogicFormContextProps = {
     initialValues?: ChopLogicFormData;
     resetSignal?: number;
 };
-export type ChopLogicFormProps = PropsWithChildren & React.HTMLAttributes<HTMLFormElement> & {
+export type ChopLogicFormProps = PropsWithChildren & CommonComponentProps & {
     columns?: number;
     initialValues?: ChopLogicFormData;
     hasReset?: boolean;
     onClickSubmit?: (data: ChopLogicFormData) => void;
+    onReset?: FormEventHandler<HTMLFormElement>;
+    onSubmit?: FormEventHandler<HTMLFormElement>;
 };

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

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 import { ChopLogicGridProps } from './types';
 
 declare const ChopLogicGrid: React.FC<ChopLogicGridProps>;

package/dist/components/containers/grid/Grid.styled.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const StyledGrid: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, never>> & string;
 export declare const StyledGridHeader: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, never>> & string;
 export declare const StyledGridBody: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, never>> & string;

package/dist/components/containers/grid/__docs__/GridExample.d.ts

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 import { ChopLogicGridProps } from '../types';
 
 declare const GridExample: React.FC<ChopLogicGridProps>;

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

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 import { ChopLogicGridColumn, ChopLogicGridItem, RenderDataItemCallback } from '../types';
 
 type ChopLogicGridBodyProps = {

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

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 
 declare const GridDataCell: React.FC<{
-    value: string | JSX.Element;
+    value: React.ReactElement | string;
 }>;
 export default GridDataCell;

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

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 import { ChopLogicGridColumn } from '../types';
 
 type ChopLogicGridHeadProps = {

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

@@ -6,7 +6,7 @@ export type GridRowProps = {
     selectRowById: (id: string) => void;
     deselectRowById: (id: string) => void;
     selectable: boolean;
-    values: (string | JSX.Element)[];
+    values: (string | React.ReactElement)[];
     disabled?: boolean;
 };
 declare const GridRow: React.FC<GridRowProps>;

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

@@ -1,7 +1,8 @@
+import { default as React } from 'react';
 import { ChopLogicGridColumn, ChopLogicGridItem, RenderDataItemCallback } from './types';
 
 export declare function getGridRowValues({ item, columns, renderDataItem, }: {
     item: ChopLogicGridItem;
     columns: ChopLogicGridColumn[];
     renderDataItem?: RenderDataItemCallback;
-}): (string | JSX.Element)[];
+}): (string | React.ReactElement)[];

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

@@ -1,20 +1,18 @@
-/// <reference types="react" />
-export type ChopLogicGridProps = {
+import { ReactElement } from 'react';
+import { CommonComponentProps } from '../../../../../../../../../src/utils/types';
+
+export type ChopLogicGridProps = CommonComponentProps & {
     columns: ChopLogicGridColumn[];
     data: ChopLogicGridItem[];
     caption?: string;
-    id?: string;
     selectable?: boolean;
-    tabIndex?: number;
-    className?: string;
-    style?: React.CSSProperties;
     renderDataItem?: RenderDataItemCallback;
     onSelect?: (ids: string[]) => void;
 };
 export type ChopLogicGridColumn = {
     field: string;
     title?: string;
-    component?: React.ReactElement;
+    component?: ReactElement;
     highlighted?: boolean;
     className?: string;
 };
@@ -23,4 +21,4 @@ export type ChopLogicGridItem = {
     disabled?: boolean;
     [key: string]: unknown;
 };
-export type RenderDataItemCallback = (item: ChopLogicGridItem, field: string) => JSX.Element;
+export type RenderDataItemCallback = (item: ChopLogicGridItem, field: string) => ReactElement;

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

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

package/dist/components/inputs/_common/error-message/ErrorMessage.styled.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const StyledErrorMessage: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
     $visible: boolean;
 }>> & string;

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

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const StyledInputInnerButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;

package/dist/components/inputs/_common/label/Label.styled.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const StyledLabel: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>> & string;
 export declare const StyledLabelText: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
 export declare const StyledRequiredSign: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;

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

@@ -1,12 +1,13 @@
 import { MouseEventHandler } from 'react';
+import { CommonInputProps } from '../../../../../../../../../src/utils/types';
 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);
+export type ChopLogicButtonProps = Partial<CommonInputProps> & {
+    onClick?: MouseEventHandler<HTMLButtonElement>;
     view?: ChopLogicButtonView;
-    label?: string;
     icon?: ChopLogicIconName;
     text?: string;
     extended?: boolean;
+    type?: 'button' | 'reset' | 'submit';
 };

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const StyledCheckboxWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $disabled: boolean;
 }>> & string;

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

@@ -1,4 +1,5 @@
-/// <reference types="react" />
+import { default as React } from 'react';
+
 export declare function useChopLogicCheckboxController({ name, defaultChecked, onChange, }: {
     name: string;
     defaultChecked?: boolean;

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

@@ -1,7 +1,9 @@
-/// <reference types="react" />
-export type ChopLogicCheckboxProps = React.InputHTMLAttributes<HTMLInputElement> & {
-    name: string;
-    label: string;
+import { ChangeEventHandler } from 'react';
+import { CommonInputProps } from '../../../../../../../../../src/utils/types';
+
+export type ChopLogicCheckboxProps = CommonInputProps & {
     noLabel?: boolean;
     iconPosition?: 'left' | 'right';
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    defaultChecked?: boolean;
 };

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

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 import { ChopLogicMultiSelectProps } from './types';
 
 declare const ChopLogicMultiSelect: React.FC<ChopLogicMultiSelectProps>;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const StyledMultiSelectWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $disabled: boolean;
 }>> & string;

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

@@ -1,4 +1,4 @@
-import { SelectValue } from '../select/types';
+import { SelectValue } from '../../../../../../../../../src/utils/types.ts';
 import { MultiSelectValue } from './types';
 
 export declare function useChopLogicMultiSelectController({ name, defaultValue, onChange, options, }: {

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

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 import { MultiSelectValue } from '../types';
 
 type SelectComboboxProps = {

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

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

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

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 import { MultiSelectValue } from '../types';
 
 type SelectOptionProps = {

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

@@ -1,5 +1,5 @@
+import { SelectValue } from '../../../../../../../../../src/utils/types.ts';
 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, }: {

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

@@ -1,13 +1,12 @@
-import { SelectValue } from '../select/types';
+import { CommonInputProps, SelectValue } from '../../../../../../../../../src/utils/types';
 
 export type MultiSelectValue = SelectValue & {
     selected: boolean;
 };
-export type ChopLogicMultiSelectProps = React.SelectHTMLAttributes<HTMLSelectElement> & {
-    name: string;
-    label: string;
+export type ChopLogicMultiSelectProps = CommonInputProps & {
     options: SelectValue[];
     onChange?: (values?: SelectValue[]) => void;
+    defaultValue?: string | number | readonly string[];
     placeholder?: string;
 };
 export type MultiSelectDropdownProps = {

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const StyledNumericInputContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyledNumericInputWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $disabled: boolean;

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

@@ -1,4 +1,4 @@
-import { ChangeEventHandler } from 'react';
+import { default as React, ChangeEventHandler } from 'react';
 import { NumericValidationFunction } from './types';
 
 export declare function useChopLogicNumericInputController({ name, defaultValue, onChange, onSpinButtonClick, min, max, step, required, validator, }: {

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

@@ -1,11 +1,18 @@
-/// <reference types="react" />
+import { ChangeEventHandler, FocusEventHandler } from 'react';
+import { CommonInputProps } from '../../../../../../../../../src/utils/types';
+
 export type NumericValidationFunction = (input?: number) => boolean;
-export type ChopLogicNumericInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
-    name: string;
-    label: string;
+export type ChopLogicNumericInputProps = CommonInputProps & {
     errorMessage?: string;
     validator?: NumericValidationFunction;
-    onClear?: () => void;
     hasSpinButtons?: boolean;
+    min?: number;
+    max?: number;
+    step?: number;
+    readOnly?: boolean;
+    defaultValue?: number;
     onSpinButtonClick?: (value?: number) => void;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    onFocus?: FocusEventHandler<HTMLInputElement>;
 };

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

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 import { ChopLogicSelectProps } from './types';
 
 declare const ChopLogicSelect: React.FC<ChopLogicSelectProps>;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const StyledSelectWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $disabled: boolean;
 }>> & string;

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

@@ -1,4 +1,4 @@
-import { SelectValue } from './types';
+import { SelectValue } from '../../../../../../../../../src/utils/types.ts';
 
 export declare function useChopLogicSelectController({ name, defaultValue, onChange, options, }: {
     name: string;

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

@@ -1,4 +1,5 @@
-import { SelectValue } from '../types';
+import { default as React } from 'react';
+import { SelectValue } from '../../../../../../../../../../src/utils/types.ts';
 
 type SelectComboboxProps = {
     opened: boolean;

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

@@ -1,4 +1,5 @@
-import { SelectValue } from '../types';
+import { default as React } from 'react';
+import { SelectValue } from '../../../../../../../../../../src/utils/types.ts';
 
 type SelectDropdownProps = {
     options: SelectValue[];

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

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 import { SelectOptionProps } from '../types';
 
 declare const SelectOption: React.FC<SelectOptionProps>;

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

@@ -1,5 +1,5 @@
+import { SelectValue } from '../../../../../../../../../src/utils/types.ts';
 import { ChopLogicFormData } from '../../../../../../../../../src/components/containers/form/types';
-import { SelectValue } from './types';
 
 export declare function getSelectInitialValue({ name, options, initialValues, defaultValue, }: {
     name: string;

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

@@ -1,16 +1,10 @@
-/// <reference types="react" />
-export type ChopLogicSelectProps = React.SelectHTMLAttributes<HTMLSelectElement> & {
-    name: string;
-    label: string;
+import { CommonInputProps, SelectValue } from '../../../../../../../../../src/utils/types';
+
+export type ChopLogicSelectProps = CommonInputProps & {
     options: SelectValue[];
     onChange?: (value?: SelectValue) => void;
     placeholder?: string;
-};
-export type SelectValue = {
-    id: string;
-    label: string;
-} & {
-    [key in string]: unknown;
+    defaultValue?: string | number | readonly string[];
 };
 export type SelectOptionProps = {
     value: SelectValue;

package/dist/components/inputs/text/TextInput.styled.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const StyledTextInputContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyledTextInputWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $disabled: boolean;

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

@@ -1,4 +1,4 @@
-import { ChangeEventHandler } from 'react';
+import { default as React, ChangeEventHandler } from 'react';
 import { RegExpWithFlags, TextValidationFunction } from './types';
 
 export declare function useChopLogicTextInputController({ name, defaultValue, onChange, onClear, required, validator, }: {

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

@@ -1,15 +1,23 @@
-/// <reference types="react" />
+import { ChangeEventHandler, FocusEventHandler, HTMLInputAutoCompleteAttribute } from 'react';
+import { CommonInputProps } from '../../../../../../../../../src/utils/types';
+
 export type RegExpWithFlags = {
     regexp: string;
     flags?: string;
 };
 export type TextValidationFunction = (input: string) => boolean;
-export type ChopLogicTextInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
-    name: string;
-    label: string;
+export type ChopLogicTextInputProps = CommonInputProps & {
     errorMessage?: string;
     clearable?: boolean;
-    onClear?: () => void;
+    readOnly?: boolean;
     type?: 'text' | 'email' | 'password';
     validator?: RegExpWithFlags | TextValidationFunction;
+    maxLength?: number;
+    placeholder?: string;
+    defaultValue?: string;
+    autoComplete?: HTMLInputAutoCompleteAttribute;
+    onClear?: () => void;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    onFocus?: FocusEventHandler<HTMLInputElement>;
 };

package/dist/components/modals/alert/Alert.d.ts

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 import { ChopLogicAlertProps } from './types';
 
 declare const ChopLogicAlert: React.FC<ChopLogicAlertProps>;

package/dist/components/modals/alert/Alert.styled.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const StyledAlertHeader: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
 export declare const StyledAlertWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $isClosing: boolean;

package/dist/components/modals/alert/helpers.d.ts

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 import { ChopLogicIconName } from '../../../../../../../../../src/components/misc/icon/Icon';
 import { ChopLogicAlertMode } from './types';
 

package/dist/components/modals/alert/types.d.ts

@@ -1,11 +1,11 @@
+import { CommonComponentProps } from '../../../../../../../../../src/utils/types';
 import { ChopLogicIconName } from '../../../../../../../../../src/components/misc/icon/Icon';
 
 export type ChopLogicAlertMode = 'success' | 'error' | 'warning' | 'info' | 'help';
-export type ChopLogicAlertProps = React.HTMLAttributes<HTMLDivElement> & {
+export type ChopLogicAlertProps = CommonComponentProps & {
     isOpened: boolean;
     onClose: () => void;
     message: string;
-    title?: string;
     mode?: ChopLogicAlertMode;
     icon?: ChopLogicIconName;
 };

package/dist/components/modals/dialog/Dialog.d.ts

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 import { ChopLogicDialogProps } from './types';
 
 declare const ChopLogicDialog: React.FC<ChopLogicDialogProps>;

package/dist/components/modals/dialog/Dialog.styled.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const StyledDialogLayout: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyledDialogBackground: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $isClosing: boolean;

package/dist/components/modals/dialog/types.d.ts

@@ -1,11 +1,12 @@
-import { PropsWithChildren } from 'react';
+import { HTMLAttributes, PropsWithChildren } from 'react';
+import { CommonComponentProps } from '../../../../../../../../../src/utils/types';
 
-export type ChopLogicDialogProps = PropsWithChildren & React.HTMLAttributes<HTMLDivElement> & {
+export type ChopLogicDialogProps = CommonComponentProps & PropsWithChildren & {
     isOpened: boolean;
     onClose: () => void;
     title: string;
 };
-export type DialogLayoutProps = PropsWithChildren & React.HTMLAttributes<HTMLDivElement> & {
+export type DialogLayoutProps = PropsWithChildren & HTMLAttributes<HTMLDivElement> & {
     title: string;
     onClose: () => void;
     isOpened: boolean;

package/dist/components/modals/tooltip/Tooltip.d.ts

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 import { ChopLogicTooltipProps } from './types';
 
 declare const ChopLogicTooltip: React.FC<ChopLogicTooltipProps>;

package/dist/components/modals/tooltip/Tooltip.styled.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const StyledTooltip: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/components/modals/tooltip/controller.d.ts

@@ -1,4 +1,5 @@
-/// <reference types="react" />
+import { default as React } from 'react';
+
 export declare const useChopLogicTooltipController: ({ id }: {
     id?: string;
 }) => {
@@ -10,6 +11,6 @@ export declare const useChopLogicTooltipController: ({ id }: {
     top: number;
     left: number;
     isOpened: boolean;
-    wrapperRef: import('react').MutableRefObject<null>;
-    tooltipRef: import('react').RefObject<HTMLDivElement>;
+    wrapperRef: React.MutableRefObject<null>;
+    tooltipRef: React.RefObject<HTMLDivElement>;
 };

package/dist/components/modals/tooltip/types.d.ts

@@ -1,7 +1,8 @@
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, ReactElement } from 'react';
+import { CommonComponentProps } from '../../../../../../../../../src/utils/types';
 
-export type ChopLogicTooltipProps = PropsWithChildren & React.HTMLAttributes<HTMLElement> & {
-    tooltipContent: string | React.ReactElement;
+export type ChopLogicTooltipProps = PropsWithChildren & CommonComponentProps & {
+    tooltipContent: string | ReactElement;
     containerTag?: TooltipContainerTag;
     visibleOn?: 'hover' | 'click' | 'focus' | 'contextmenu';
 };

package/dist/constants/style-variables.d.ts

@@ -1,10 +1,10 @@
 export declare const COLORS: Readonly<{
     primary: "hsl(0, 0%, 13%)";
+    secondary: "hsl(215, 69%, 49%)";
+    tertiary: "hsl(205, 48%, 56%)";
     background: "hsl(0, 0%, 100%)";
     highlight: "hsl(65, 43%, 95%)";
     shade: "hsl(206, 19%, 93%)";
-    secondary: "hsl(215, 69%, 49%)";
-    tertiary: "hsl(205, 48%, 56%)";
     accent: "hsl(16, 100%, 45%)";
     transparentBackground: "hsla(0, 0%, 0%, 0.3)";
 }>;
@@ -27,15 +27,15 @@ export declare const SHADOWS: Readonly<{
     inset: "-5px 5px 20px 5px rgba(0, 0, 0, 0.1) inset";
 }>;
 export declare const BORDERS: Readonly<{
-    light: "1px solid #5998c5";
-    heavy: "1px solid #266dd3";
+    thin: "1px solid #5998c5";
+    thick: "1px solid #266dd3";
     accent: "1px solid #e53d00";
     outline: "2px dashed #e53d00";
 }>;
 export declare const Z_INDEXES: Readonly<{
     dropdown: 1000;
-    modal: 2000;
-    tooltip: 3000;
+    modal: 1000;
+    tooltip: 1000;
 }>;
 export declare const GRADIENTS: Readonly<{
     primary: "linear-gradient(0deg, #222222, #266dd3)";

package/dist/constants/themes.d.ts

@@ -0,0 +1,4 @@
+import { ChopLogicTheme } from '../../../../../../../src/utils/types.ts';
+
+export declare const LIGHT_THEME: ChopLogicTheme;
+export declare const DARK_THEME: ChopLogicTheme;