chop-logic-components 1.0.6 → 1.0.8

package/dist/{utils/types.d.ts → types/chop-logic-theme.d.ts}

@@ -1,36 +1,18 @@
-import { CSSProperties } from 'react';
-
-export type CommonInputProps = CommonComponentProps & {
-    label: string;
-    name: string;
-    disabled?: boolean;
-    required?: boolean;
-};
-export type CommonComponentProps = {
-    id?: string;
-    className?: string;
-    style?: CSSProperties;
-    tabIndex?: number;
-    title?: string;
-    theme?: 'dark' | 'light';
-};
-export type SelectValue = {
-    id: string;
-    label: string;
-} & {
-    [key in string]: unknown;
-};
 export interface ChopLogicTheme {
     primaryColor: string;
     secondaryColor: string;
     tertiaryColor: string;
     backgroundColor: string;
     accentColor: string;
+    transparentBackgroundColor: string;
     primaryGradient: string;
     accentGradient: string;
     tintGradient: string;
     coreFontFamily: string;
     monospaceFontFamily: string;
+    baseFontSize: string;
+    smallFontSize: string;
+    headerFontSize: string;
     smallGap: string;
     mediumGap: string;
     bigGap: string;

package/dist/types/components/_common.d.ts

@@ -0,0 +1,15 @@
+import { CSSProperties } from 'react';
+
+export type CommonInputProps = CommonComponentProps & {
+    label: string;
+    name: string;
+    disabled?: boolean;
+    required?: boolean;
+};
+export type CommonComponentProps = {
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
+    tabIndex?: number;
+    title?: string;
+};

package/dist/{components/modals/alert/types.d.ts → types/components/alert.d.ts}

@@ -1,7 +1,7 @@
-import { CommonComponentProps } from '../../../../../../../../../src/utils/types';
-import { ChopLogicIconName } from '../../../../../../../../../src/components/misc/icon/Icon';
+import { ChopLogicAlertMode, ChopLogicIconName } from '../../enums';
+import { ChopLogicTheme } from '..';
+import { CommonComponentProps } from './_common';
 
-export type ChopLogicAlertMode = 'success' | 'error' | 'warning' | 'info' | 'help';
 export type ChopLogicAlertProps = CommonComponentProps & {
     isOpened: boolean;
     onClose: () => void;
@@ -11,6 +11,7 @@ export type ChopLogicAlertProps = CommonComponentProps & {
 };
 export type ChopLogicAlertHeaderProps = {
     onClose: () => void;
+    theme: ChopLogicTheme;
     mode: ChopLogicAlertMode;
     title?: string;
     icon?: ChopLogicIconName;

package/dist/{components/inputs/button/types.d.ts → types/components/button.d.ts}

@@ -1,8 +1,8 @@
 import { MouseEventHandler } from 'react';
-import { CommonInputProps } from '../../../../../../../../../src/utils/types';
-import { ChopLogicIconName } from '../../../../../../../../../src/components/misc/icon/Icon';
+import { ChopLogicIconName } from '../../enums';
+import { CommonInputProps } from './_common';
 
-export type ChopLogicButtonView = 'primary' | 'secondary' | 'danger' | 'icon';
+export type ChopLogicButtonView = '3D' | 'flat' | 'icon';
 export type ChopLogicButtonProps = Partial<CommonInputProps> & {
     onClick?: MouseEventHandler<HTMLButtonElement>;
     view?: ChopLogicButtonView;

package/dist/{components/inputs/checkbox/types.d.ts → types/components/checkbox.d.ts}

@@ -1,5 +1,5 @@
 import { ChangeEventHandler } from 'react';
-import { CommonInputProps } from '../../../../../../../../../src/utils/types';
+import { CommonInputProps } from './_common';
 
 export type ChopLogicCheckboxProps = CommonInputProps & {
     noLabel?: boolean;

package/dist/{components/modals/dialog/types.d.ts → types/components/dialog.d.ts}

@@ -1,5 +1,6 @@
 import { HTMLAttributes, PropsWithChildren } from 'react';
-import { CommonComponentProps } from '../../../../../../../../../src/utils/types';
+import { ChopLogicTheme } from '..';
+import { CommonComponentProps } from './_common';
 
 export type ChopLogicDialogProps = CommonComponentProps & PropsWithChildren & {
     isOpened: boolean;
@@ -10,4 +11,5 @@ export type DialogLayoutProps = PropsWithChildren & HTMLAttributes<HTMLDivElemen
     title: string;
     onClose: () => void;
     isOpened: boolean;
+    theme: ChopLogicTheme;
 };

package/dist/{components/containers/form/types.d.ts → types/components/form.d.ts}

@@ -1,5 +1,5 @@
 import { FormEventHandler, PropsWithChildren } from 'react';
-import { CommonComponentProps } from '../../../../../../../../../src/utils/types';
+import { CommonComponentProps } from './_common.ts';
 
 export type ChopLogicFormData = {
     [key: string]: unknown;

package/dist/{components/containers/grid/types.d.ts → types/components/grid.d.ts}

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { CommonComponentProps } from '../../../../../../../../../src/utils/types';
+import { CommonComponentProps } from './_common';
 
 export type ChopLogicGridProps = CommonComponentProps & {
     columns: ChopLogicGridColumn[];

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

@@ -0,0 +1,38 @@
+import { ChopLogicTheme } from '..';
+import { CommonInputProps } from './_common';
+import { SelectValue } from './select';
+
+export type MultiSelectValue = SelectValue & {
+    selected: boolean;
+};
+export type ChopLogicMultiSelectProps = CommonInputProps & {
+    options: SelectValue[];
+    onChange?: (values?: SelectValue[]) => void;
+    defaultValue?: string | number | readonly string[];
+    placeholder?: string;
+};
+export type MultiSelectDropdownProps = {
+    options: MultiSelectValue[];
+    opened: boolean;
+    dropdownId: string;
+    onClose: () => void;
+    onSelect: (id: string) => void;
+    theme: ChopLogicTheme;
+};
+export type MultiSelectComboboxProps = {
+    opened: boolean;
+    disabled: boolean;
+    required: boolean;
+    onClick: () => void;
+    comboboxId: string;
+    dropdownId: string;
+    values?: MultiSelectValue[];
+    placeholder?: string;
+    name: string;
+    theme: ChopLogicTheme;
+};
+export type MultiSelectOptionProps = {
+    value: MultiSelectValue;
+    onSelect: (id: string) => void;
+    theme: ChopLogicTheme;
+};

package/dist/{components/inputs/numeric/types.d.ts → types/components/numeric.d.ts}

@@ -1,5 +1,5 @@
 import { ChangeEventHandler, FocusEventHandler } from 'react';
-import { CommonInputProps } from '../../../../../../../../../src/utils/types';
+import { CommonInputProps } from './_common';
 
 export type NumericValidationFunction = (input?: number) => boolean;
 export type ChopLogicNumericInputProps = CommonInputProps & {

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

@@ -0,0 +1,45 @@
+import { ChopLogicTheme } from '..';
+import { CommonInputProps } from './_common';
+
+export type SelectValue = {
+    id: string;
+    label: string;
+} & {
+    [key in string]: unknown;
+};
+export type ChopLogicSelectProps = CommonInputProps & {
+    options: SelectValue[];
+    onChange?: (value?: SelectValue) => void;
+    placeholder?: string;
+    defaultValue?: string | number | readonly string[];
+};
+export type SelectOptionProps = {
+    value: SelectValue;
+    isSelected: boolean;
+    onSelect: (id: string) => void;
+    onClear: () => void;
+    theme: ChopLogicTheme;
+};
+export type SelectComboboxProps = {
+    opened: boolean;
+    disabled: boolean;
+    required: boolean;
+    onClick: () => void;
+    comboboxId: string;
+    dropdownId: string;
+    selected?: SelectValue;
+    placeholder?: string;
+    name: string;
+    theme: ChopLogicTheme;
+};
+export type SelectDropdownProps = {
+    options: SelectValue[];
+    opened: boolean;
+    dropdownId: string;
+    comboboxId: string;
+    onClose: () => void;
+    selected?: SelectValue;
+    onSelect: (id: string) => void;
+    onClear: () => void;
+    theme: ChopLogicTheme;
+};

package/dist/{components/containers/tabs/types.d.ts → types/components/tabs.d.ts}

@@ -1,11 +1,21 @@
 import { ReactElement } from 'react';
-import { CommonComponentProps } from '../../../../../../../../../src/utils/types';
+import { ChopLogicTheme } from '..';
+import { CommonComponentProps } from './_common';
 
 export type ChopLogicTabsProps = CommonComponentProps & {
     tabs: ChopLogicTabItem[];
     defaultTabId?: string;
     mode?: ChopLogicTabsMode;
 };
+export type ChopLogicTabListProps = {
+    tabs: ChopLogicTabItem[];
+    tabIds: string[];
+    onTabSelect: (id: string) => void;
+    selectedTabId: string;
+    tabPanelIds: string[];
+    mode: ChopLogicTabsMode;
+    theme: ChopLogicTheme;
+};
 export type ChopLogicTabItem = {
     content: ReactElement;
     title: string;

package/dist/{components/inputs/text/types.d.ts → types/components/text.d.ts}

@@ -1,5 +1,5 @@
 import { ChangeEventHandler, FocusEventHandler, HTMLInputAutoCompleteAttribute } from 'react';
-import { CommonInputProps } from '../../../../../../../../../src/utils/types';
+import { CommonInputProps } from './_common';
 
 export type RegExpWithFlags = {
     regexp: string;

package/dist/{components/modals/tooltip/types.d.ts → types/components/tooltip.d.ts}

@@ -1,5 +1,5 @@
 import { PropsWithChildren, ReactElement } from 'react';
-import { CommonComponentProps } from '../../../../../../../../../src/utils/types';
+import { CommonComponentProps } from './_common';
 
 export type ChopLogicTooltipProps = PropsWithChildren & CommonComponentProps & {
     tooltipContent: string | ReactElement;

package/dist/types/index.d.ts

@@ -0,0 +1,13 @@
+export type { ChopLogicTheme } from './chop-logic-theme.ts';
+export * from './components/alert.ts';
+export * from './components/button.ts';
+export * from './components/checkbox.ts';
+export * from './components/dialog.ts';
+export * from './components/form.ts';
+export * from './components/grid.ts';
+export * from './components/multi-select.ts';
+export * from './components/numeric.ts';
+export * from './components/select.ts';
+export * from './components/tabs.ts';
+export * from './components/text.ts';
+export * from './components/tooltip.ts';

package/dist/utils/get-chop-logic-theme.d.ts

@@ -1,3 +1,3 @@
-import { ChopLogicTheme } from '../../../../../../../src/utils/types.ts';
+import { ChopLogicTheme } from '../types';
 
-export declare function getChopLogicTheme(theme?: 'dark' | 'light', customThemeValues?: Partial<ChopLogicTheme>): ChopLogicTheme;
+export declare function getChopLogicTheme(mode?: 'dark' | 'light', customTheme?: Partial<ChopLogicTheme>): ChopLogicTheme;

package/dist/utils/handle-dropdown-list-key-press.d.ts

@@ -1,5 +1,5 @@
 import { KeyboardEvent } from 'react';
-import { SelectValue } from '../../../../../../../src/utils/types.ts';
+import { SelectValue } from '../types';
 
 export declare function handleDropdownListKeyPress({ e, options, onClose, }: {
     e: KeyboardEvent<HTMLUListElement>;

package/dist/utils/index.d.ts

@@ -0,0 +1,3 @@
+export { getChopLogicTheme } from './get-chop-logic-theme';
+export { handleDropdownListKeyPress } from './handle-dropdown-list-key-press';
+export { moveFocusOnElementById } from './move-focus-on-element-by-id';

package/package.json

@@ -4,7 +4,7 @@
     "type": "git",
     "url": "git+https://github.com/SavouryGin/chop-logic-components.git"
   },
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "React UI components library for Chop Logic project",
   "type": "module",
   "main": "dist/index.cjs.js",
@@ -32,10 +32,11 @@
     ]
   },
   "keywords": [
+    "Chop Logic",
     "React",
     "TypeScript",
     "Storybook",
-    "Chop Logic"
+    "Styled components"
   ],
   "author": "Dmitrii Suroviagin",
   "license": "ISC",
@@ -47,16 +48,16 @@
     "@chromatic-com/storybook": "^3.1.0",
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
-    "@storybook/addon-essentials": "^8.4.2",
-    "@storybook/addon-interactions": "^8.4.2",
-    "@storybook/addon-links": "^8.4.2",
-    "@storybook/addon-mdx-gfm": "^8.4.2",
-    "@storybook/blocks": "^8.4.2",
-    "@storybook/manager-api": "^8.4.2",
-    "@storybook/react": "^8.4.2",
-    "@storybook/react-vite": "^8.4.2",
-    "@storybook/test": "^8.4.2",
-    "@storybook/theming": "^8.4.2",
+    "@storybook/addon-essentials": "^8.4.6",
+    "@storybook/addon-interactions": "^8.4.6",
+    "@storybook/addon-links": "^8.4.6",
+    "@storybook/addon-mdx-gfm": "^8.4.6",
+    "@storybook/blocks": "^8.4.6",
+    "@storybook/manager-api": "^8.4.6",
+    "@storybook/react": "^8.4.6",
+    "@storybook/react-vite": "^8.4.6",
+    "@storybook/test": "^8.4.6",
+    "@storybook/theming": "^8.4.6",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^15.0.6",
     "@testing-library/user-event": "^14.5.2",
@@ -76,7 +77,7 @@
     "jsdom": "^24.0.0",
     "lint-staged": "^15.2.2",
     "prettier": "^3.2.5",
-    "storybook": "^8.4.2",
+    "storybook": "^8.4.6",
     "styled-components": "^6.1.12",
     "typescript": "^5.4.5",
     "vite": "^5.2.10",

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

@@ -1 +0,0 @@
-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,3 +0,0 @@
-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/multi-select/MultiSelect.styled.d.ts

@@ -1,10 +0,0 @@
-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;
-export declare const StyledMultiSelectCombobox: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
-export declare const StyledMultiSelectPlaceholder: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-export declare const StyledMultiSelectLabel: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-export declare const StyledMultiSelectDropdown: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {
-    $opened: boolean;
-}>> & string;
-export declare const StyledMultiSelectOption: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;

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

@@ -1,18 +0,0 @@
-import { CommonInputProps, SelectValue } from '../../../../../../../../../src/utils/types';
-
-export type MultiSelectValue = SelectValue & {
-    selected: boolean;
-};
-export type ChopLogicMultiSelectProps = CommonInputProps & {
-    options: SelectValue[];
-    onChange?: (values?: SelectValue[]) => void;
-    defaultValue?: string | number | readonly string[];
-    placeholder?: string;
-};
-export type MultiSelectDropdownProps = {
-    options: MultiSelectValue[];
-    opened: boolean;
-    dropdownId: string;
-    onClose: () => void;
-    onSelect: (id: string) => void;
-};

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

@@ -1,10 +0,0 @@
-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;
-export declare const StyledSelectCombobox: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
-export declare const StyledSelectPlaceholder: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-export declare const StyledSelectLabel: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-export declare const StyledSelectDropdown: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {
-    $opened: boolean;
-}>> & string;
-export declare const StyledSelectOption: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;

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

@@ -1,14 +0,0 @@
-import { CommonInputProps, SelectValue } from '../../../../../../../../../src/utils/types';
-
-export type ChopLogicSelectProps = CommonInputProps & {
-    options: SelectValue[];
-    onChange?: (value?: SelectValue) => void;
-    placeholder?: string;
-    defaultValue?: string | number | readonly string[];
-};
-export type SelectOptionProps = {
-    value: SelectValue;
-    isSelected: boolean;
-    onSelect: (id: string) => void;
-    onClear: () => void;
-};

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

@@ -1,51 +0,0 @@
-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%)";
-    accent: "hsl(16, 100%, 45%)";
-    transparentBackground: "hsla(0, 0%, 0%, 0.3)";
-}>;
-export declare const FONTS: Readonly<{
-    core: "Arial, Helvetica, sans-serif";
-    monospace: "'Courier New', Courier, monospace";
-}>;
-export declare const UNITS: Readonly<{
-    smallGap: "0.25rem";
-    mediumGap: "0.6rem";
-    bigGap: "1rem";
-    minElementSize: "2.75rem";
-    smallIconSize: "1.6rem";
-    blockBorderRadius: "0.375rem";
-    fieldWrapperHeight: "2.125rem";
-}>;
-export declare const SHADOWS: Readonly<{
-    box: "rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px";
-    text: "2.4px 2.4px 3.2px rgba(0, 0, 0, 0.3)";
-    inset: "-5px 5px 20px 5px rgba(0, 0, 0, 0.1) inset";
-}>;
-export declare const BORDERS: Readonly<{
-    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: 1000;
-    tooltip: 1000;
-}>;
-export declare const GRADIENTS: Readonly<{
-    primary: "linear-gradient(0deg, #222222, #266dd3)";
-    accent: "linear-gradient(0deg, #222222, #e53d00)";
-    tint: "linear-gradient(0deg, #e9edf0, #f6f7eb)";
-}>;
-export declare const SCREEN_BREAKPOINTS: Readonly<{
-    phones: "only screen and (max-width: 600px)";
-    portraitTablets: "only screen and (min-width: 600px)";
-    landscapeTablets: "only screen and (min-width: 768px)";
-    laptops: "only screen and (min-width: 992px)";
-    desktops: "only screen and (min-width: 1200px)";
-}>;