chop-logic-components 1.0.4 → 1.0.5

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/types.d.ts

@@ -1,4 +1,5 @@
 import { PropsWithChildren } from 'react';
+import { CommonComponentProps } from '../../../../../../../../../src/utils/types';
 
 export type ChopLogicFormData = {
     [key: string]: unknown;
@@ -15,9 +16,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?: React.FormEventHandler<HTMLFormElement>;
+    onSubmit?: React.FormEventHandler<HTMLFormElement>;
 };

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/types.d.ts

@@ -1,13 +1,10 @@
-/// <reference types="react" />
-export type ChopLogicGridProps = {
+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;
 };

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

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

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> & {
+export type ChopLogicButtonProps = Partial<CommonInputProps> & {
     onClick?: MouseEventHandler<HTMLButtonElement> | (() => void);
     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,3 @@
-/// <reference types="react" />
 export declare function useChopLogicCheckboxController({ name, defaultChecked, onChange, }: {
     name: string;
     defaultChecked?: boolean;

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

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

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/types.d.ts

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

@@ -1,11 +1,17 @@
-/// <reference types="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?: React.ChangeEventHandler<HTMLInputElement>;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
 };

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/types.d.ts

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

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/types.d.ts

@@ -1,15 +1,24 @@
-/// <reference types="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> & {
+export type ChopLogicTextInputProps = CommonInputProps & {
     name: string;
     label: string;
     errorMessage?: string;
     clearable?: boolean;
+    readOnly?: boolean;
     onClear?: () => void;
     type?: 'text' | 'email' | 'password';
     validator?: RegExpWithFlags | TextValidationFunction;
+    maxLength?: number;
+    placeholder?: string;
+    defaultValue?: string;
+    autoComplete?: React.HTMLInputAutoCompleteAttribute;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
 };

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/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.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,6 +1,7 @@
 import { 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;

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,3 @@
-/// <reference types="react" />
 export declare const useChopLogicTooltipController: ({ id }: {
     id?: string;
 }) => {

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

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

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

@@ -27,8 +27,8 @@ 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";
 }>;

package/dist/hooks/use-modal-focus-trap/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type ModalFocusTrapParams = {
     modalRef: React.RefObject<HTMLDivElement>;
     isOpened: boolean;

package/dist/hooks/use-tooltip-position/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type useTooltipPositionParams = {
     wrapperRef: React.RefObject<HTMLSpanElement | HTMLDivElement>;
     tooltipRef: React.RefObject<HTMLSpanElement | HTMLDivElement>;