chop-logic-components 0.13.0 → 1.0.2

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

@@ -1,5 +1,5 @@
-import { ChopLogicFormData } from '../../../../../../../../../src/components/containers/form/FormContext';
-import { SelectValue } from './Select';
+import { ChopLogicFormData } from '../../../../../../../../../src/components/containers/form/types';
+import { SelectValue } from './types';
 
 export declare function getSelectInitialValue({ name, options, initialValues, defaultValue, }: {
     name: string;
@@ -7,16 +7,3 @@ export declare function getSelectInitialValue({ name, options, initialValues, de
     initialValues?: ChopLogicFormData;
     defaultValue?: string | number | readonly string[];
 }): SelectValue | undefined;
-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/types.d.ts

@@ -0,0 +1,20 @@
+/// <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;
+};
+export type SelectOptionProps = {
+    value: SelectValue;
+    isSelected: boolean;
+    onSelect: (id: string) => void;
+    onClear: () => void;
+};

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

@@ -1,19 +1,5 @@
 import { default as React } from 'react';
+import { ChopLogicTextInputProps } from './types';
 
-export type RegExpWithFlags = {
-    regexp: string;
-    flags?: string;
-};
-export type TextValidationFunction = (input: string) => boolean;
-export type ChopLogicTextInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
-    name: string;
-    label: string;
-    valid?: boolean;
-    errorMessage?: string;
-    clearable?: boolean;
-    onClear?: () => void;
-    type?: 'text' | 'email' | 'password';
-    validator?: RegExpWithFlags | TextValidationFunction;
-};
 declare const ChopLogicTextInput: React.FC<ChopLogicTextInputProps>;
 export default ChopLogicTextInput;

package/dist/components/inputs/text/__docs__/TextInputExample.d.ts

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

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

@@ -0,0 +1,18 @@
+import { ChangeEventHandler } from 'react';
+import { RegExpWithFlags, TextValidationFunction } from './types';
+
+export declare function useChopLogicTextInputController({ name, defaultValue, onChange, onClear, required, validator, }: {
+    name: string;
+    required: boolean;
+    validator?: RegExpWithFlags | TextValidationFunction;
+    defaultValue?: string | number | readonly string[];
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    onClear?: () => void;
+}): {
+    value: string;
+    valid: boolean;
+    passwordShown: boolean;
+    handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    handleClear: () => void;
+    togglePassword: () => void;
+};

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

@@ -1,6 +1,5 @@
-import { ChangeEventHandler } from 'react';
-import { ChopLogicFormData } from '../../../../../../../../../src/components/containers/form/FormContext';
-import { RegExpWithFlags, TextValidationFunction } from './TextInput';
+import { ChopLogicFormData } from '../../../../../../../../../src/components/containers/form/types';
+import { RegExpWithFlags, TextValidationFunction } from './types';
 
 export declare function validateTextInputValue({ value, required, validator, }: {
     value: string;
@@ -12,18 +11,3 @@ export declare function getTextInputInitialValue({ name, initialValues, defaultV
     initialValues?: ChopLogicFormData;
     defaultValue?: string | number | readonly string[];
 }): string;
-export declare function useChopLogicTextInputController({ name, defaultValue, onChange, onClear, required, validator, }: {
-    name: string;
-    required: boolean;
-    validator?: RegExpWithFlags | TextValidationFunction;
-    defaultValue?: string | number | readonly string[];
-    onChange?: ChangeEventHandler<HTMLInputElement>;
-    onClear?: () => void;
-}): {
-    value: string;
-    valid: boolean;
-    passwordShown: boolean;
-    handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    handleClear: () => void;
-    togglePassword: () => void;
-};

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export type RegExpWithFlags = {
+    regexp: string;
+    flags?: string;
+};
+export type TextValidationFunction = (input: string) => boolean;
+export type ChopLogicTextInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+    name: string;
+    label: string;
+    errorMessage?: string;
+    clearable?: boolean;
+    onClear?: () => void;
+    type?: 'text' | 'email' | 'password';
+    validator?: RegExpWithFlags | TextValidationFunction;
+};

package/dist/components/misc/icon/Icon.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 
-export declare enum CLIcon {
+export declare enum ChopLogicIconName {
     ArrowDown = "arrow-down",
     ArrowUp = "arrow-up",
     Back = "back",
@@ -31,6 +31,6 @@ export declare enum CLIcon {
     Remove = "remove"
 }
 declare const ChopLogicIcon: React.FC<{
-    name?: CLIcon;
+    name?: ChopLogicIconName;
 }>;
 export default ChopLogicIcon;

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

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

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

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
-import { ChopLogicAlertProps } from '../Alert';
+import { ChopLogicAlertProps } from '../types';
 
 declare const ExampleComponent: React.FC<ChopLogicAlertProps>;
 declare const meta: Meta<typeof ExampleComponent>;

package/dist/components/modals/alert/elements/Header.d.ts

@@ -1,12 +1,5 @@
 import { default as React } from 'react';
-import { CLIcon } from '../../../../../../../../../../src/components/misc/icon/Icon';
-import { ChopLogicAlertMode } from '../Alert';
+import { ChopLogicAlertHeaderProps } from '../types';
 
-type ChopLogicAlertHeaderProps = {
-    onClose: () => void;
-    mode: ChopLogicAlertMode;
-    title?: string;
-    icon?: CLIcon;
-};
 declare const ChopLogicAlertHeader: React.FC<ChopLogicAlertHeaderProps>;
 export default ChopLogicAlertHeader;

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

@@ -0,0 +1,5 @@
+import { ChopLogicIconName } from '../../../../../../../../../src/components/misc/icon/Icon';
+import { ChopLogicAlertMode } from './types';
+
+export declare function getAlertTitle(mode: ChopLogicAlertMode, title?: string): string;
+export declare function renderAlertIcon(mode: ChopLogicAlertMode, icon?: ChopLogicIconName): React.ReactElement | null;

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

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

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

@@ -1,9 +1,4 @@
-import { PropsWithChildren } from 'react';
+import { ChopLogicDialogProps } from './types';
 
-export type ChopLogicModalProps = PropsWithChildren & React.HTMLAttributes<HTMLDivElement> & {
-    isOpened: boolean;
-    onClose: () => void;
-    title: string;
-};
-declare const ChopLogicDialog: React.FC<ChopLogicModalProps>;
+declare const ChopLogicDialog: React.FC<ChopLogicDialogProps>;
 export default ChopLogicDialog;

package/dist/components/modals/dialog/__docs__/DialogExample.d.ts

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

package/dist/components/modals/dialog/elements/Header.d.ts

@@ -1,8 +1,7 @@
 import { default as React } from 'react';
 
-type ChopLogicModalLayoutHeaderProps = {
+declare const ChopLogicModalLayoutHeader: React.FC<{
     title: string;
     onClose: () => void;
-};
-declare const ChopLogicModalLayoutHeader: React.FC<ChopLogicModalLayoutHeaderProps>;
+}>;
 export default ChopLogicModalLayoutHeader;

package/dist/components/modals/dialog/elements/Layout.d.ts

@@ -1,9 +1,5 @@
-import { default as React, PropsWithChildren } from 'react';
+import { default as React } from 'react';
+import { DialogLayoutProps } from '../types';
 
-type ModalLayoutProps = PropsWithChildren & React.HTMLAttributes<HTMLDivElement> & {
-    title: string;
-    onClose: () => void;
-    isOpened: boolean;
-};
-declare const ChopLogicModalLayout: React.FC<ModalLayoutProps>;
+declare const ChopLogicModalLayout: React.FC<DialogLayoutProps>;
 export default ChopLogicModalLayout;

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

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

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

@@ -1,9 +1,4 @@
-import { PropsWithChildren } from 'react';
+import { ChopLogicTooltipProps } from './types';
 
-export type ChopLogicTooltipProps = PropsWithChildren & React.HTMLAttributes<HTMLElement> & {
-    tooltipContent: string | React.ReactElement;
-    containerTag?: 'span' | 'div' | 'p' | 'strong' | 'em';
-    visibleOn?: 'hover' | 'click' | 'focus' | 'contextmenu';
-};
 declare const ChopLogicTooltip: React.FC<ChopLogicTooltipProps>;
 export default ChopLogicTooltip;

package/dist/components/modals/tooltip/__docs__/TooltipExample.d.ts

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

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export declare const useChopLogicTooltipController: ({ id }: {
+    id?: string;
+}) => {
+    elementId: string;
+    openTooltip: () => void;
+    closeTooltip: () => void;
+    toggleTooltip: () => void;
+    handleContextMenu: (e: React.MouseEvent) => void;
+    top: number;
+    left: number;
+    isOpened: boolean;
+    wrapperRef: import('react').MutableRefObject<null>;
+    tooltipRef: import('react').RefObject<HTMLDivElement>;
+};

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

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+
+export type ChopLogicTooltipProps = PropsWithChildren & React.HTMLAttributes<HTMLElement> & {
+    tooltipContent: string | React.ReactElement;
+    containerTag?: TooltipContainerTag;
+    visibleOn?: 'hover' | 'click' | 'focus' | 'contextmenu';
+};
+export type TooltipContainerTag = 'span' | 'div' | 'p' | 'strong' | 'em';

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

@@ -27,10 +27,10 @@ export declare const SHADOWS: Readonly<{
     inset: "-5px 5px 20px 5px rgba(0, 0, 0, 0.1) inset";
 }>;
 export declare const BORDERS: Readonly<{
-    lightBlue: "1px solid #5998c5";
-    darkBlue: "1px solid #266dd3";
+    light: "1px solid #5998c5";
+    heavy: "1px solid #266dd3";
     accent: "1px solid #e53d00";
-    focusOutline: "2px dashed #e53d00";
+    outline: "2px dashed #e53d00";
 }>;
 export declare const Z_INDEXES: Readonly<{
     dropdown: 1000;