chop-logic-components 1.0.6 → 1.0.7

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,16 @@
+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';
+};

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

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

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,5 @@
 import { HTMLAttributes, PropsWithChildren } from 'react';
-import { CommonComponentProps } from '../../../../../../../../../src/utils/types';
+import { CommonComponentProps } from './_common';
 
 export type ChopLogicDialogProps = CommonComponentProps & PropsWithChildren & {
     isOpened: boolean;

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/{components/inputs/multi-select/types.d.ts → types/components/multi-select.d.ts}

@@ -1,4 +1,5 @@
-import { CommonInputProps, SelectValue } from '../../../../../../../../../src/utils/types';
+import { CommonInputProps } from './_common';
+import { SelectValue } from './select';
 
 export type MultiSelectValue = SelectValue & {
     selected: boolean;

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/{components/inputs/select/types.d.ts → types/components/select.d.ts}

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

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

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

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;

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.7",
   "description": "React UI components library for Chop Logic project",
   "type": "module",
   "main": "dist/index.cjs.js",
@@ -47,16 +47,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 +76,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/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/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)";
-}>;