chop-logic-components 0.8.0 → 0.10.0

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

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+
+export type ChopLogicTabsProps = React.HTMLAttributes<HTMLDivElement> & {
+    tabs: ChopLogicTabItem[];
+    defaultTabId?: string;
+    mode?: ChopLogicTabsMode;
+};
+export type ChopLogicTabItem = {
+    content: React.ReactElement;
+    title: string;
+    id: string;
+    disabled?: boolean;
+};
+export type ChopLogicTabsMode = 'vertical' | 'horizontal';
+declare const ChopLogicTabs: React.FC<ChopLogicTabsProps>;
+export default ChopLogicTabs;

package/dist/components/containers/tabs/Tabs.styled.d.ts

@@ -0,0 +1,14 @@
+import { ChopLogicTabsMode } from './Tabs';
+
+export declare const StyledTabButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $selected: boolean;
+    $disabled: boolean;
+    $mode: ChopLogicTabsMode;
+}>> & string;
+export declare const StyledTabContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledTabList: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $mode: ChopLogicTabsMode;
+}>> & string;
+export declare const StyledTabsContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $mode: ChopLogicTabsMode;
+}>> & string;

package/dist/components/containers/tabs/__docs__/Tabs.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { default as ChopLogicTabs } from '../Tabs';
+
+declare const meta: Meta<typeof ChopLogicTabs>;
+export default meta;
+type Story = StoryObj<typeof ChopLogicTabs>;
+export declare const Default: Story;
+export declare const VerticalTabs: Story;

package/dist/components/containers/tabs/__docs__/TabsExample.d.ts

@@ -0,0 +1,2 @@
+declare const ExampleComponent: () => import("react/jsx-runtime").JSX.Element;
+export default ExampleComponent;

package/dist/components/containers/tabs/__tests__/TabList.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/containers/tabs/__tests__/Tabs.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/containers/tabs/elements/TabButton.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+import { ChopLogicTabsMode } from '../Tabs';
+
+type ChopLogicTabButtonProps = {
+    title: string;
+    tabId: string;
+    onTabSelect: (id: string) => void;
+    tabPanelId: string;
+    isSelected: boolean;
+    mode: ChopLogicTabsMode;
+    isDisabled?: boolean;
+};
+declare const ChopLogicTabButton: React.FC<ChopLogicTabButtonProps>;
+export default ChopLogicTabButton;

package/dist/components/containers/tabs/elements/TabContent.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { ChopLogicTabItem } from '../Tabs';
+
+type ChopLogicTabContentProps = {
+    tabs: ChopLogicTabItem[];
+    selectedTabId: string;
+};
+declare const ChopLogicTabContent: React.FC<ChopLogicTabContentProps>;
+export default ChopLogicTabContent;

package/dist/components/containers/tabs/elements/TabList.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { ChopLogicTabItem, ChopLogicTabsMode } from '../Tabs';
+
+type ChopLogicTabListProps = {
+    tabs: ChopLogicTabItem[];
+    tabIds: string[];
+    onTabSelect: (id: string) => void;
+    selectedTabId: string;
+    tabPanelIds: string[];
+    mode: ChopLogicTabsMode;
+};
+declare const ChopLogicTabList: React.FC<ChopLogicTabListProps>;
+export default ChopLogicTabList;

package/dist/components/index.d.ts

@@ -6,3 +6,4 @@ export { default as ChopLogicTextInput } from './inputs/text/TextInput';
 export { default as ChopLogicAlert } from './modals/alert/Alert';
 export { default as ChopLogicDialog } from './modals/dialog/Dialog';
 export { default as ChopLogicTooltip } from './modals/tooltip/Tooltip';
+export { default as ChopLogicTabs } from './containers/tabs/Tabs';

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

@@ -1,5 +1,13 @@
-import { default as React } from 'react';
-import { ChopLogicButtonProps } from './types';
+import { default as React, MouseEventHandler } from 'react';
+import { CLIcon } from '../../../../../../../../../src/components/misc/icon/Icon';
 
+export type ChopLogicButtonView = 'primary' | 'secondary' | 'danger' | 'icon';
+export type ChopLogicButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    onClick?: MouseEventHandler<HTMLButtonElement> | (() => void);
+    view?: ChopLogicButtonView;
+    label?: string;
+    icon?: CLIcon;
+    text?: string;
+};
 declare const ChopLogicButton: React.FC<ChopLogicButtonProps>;
 export default ChopLogicButton;

package/dist/components/inputs/button/Button.styled.d.ts

@@ -1,4 +1,4 @@
-import { ChopLogicButtonView } from './types';
+import { ChopLogicButtonView } from './Button';
 
 export declare const StyledButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
     $view: ChopLogicButtonView;

package/dist/components/inputs/button/__docs__/ButtonExample.d.ts

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

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

@@ -1,4 +1,23 @@
-import { ChopLogicMultiSelectProps } from './types';
-
+/// <reference types="react" />
+export type MultiSelectValue = {
+    id: string;
+    label: string;
+    selected: boolean;
+};
+export type ChopLogicMultiSelectProps = React.SelectHTMLAttributes<HTMLSelectElement> & {
+    id: string;
+    name: string;
+    label: string;
+    values: MultiSelectValue[];
+    onSelectChange?: (values?: MultiSelectValue[]) => void;
+    placeholder?: string;
+};
+export type MultiSelectDropdownProps = {
+    values: MultiSelectValue[];
+    isOpened: boolean;
+    dropdownId: string;
+    onClose: () => void;
+    onSelect: (id: string) => void;
+};
 declare const ChopLogicMultiSelect: React.FC<ChopLogicMultiSelectProps>;
 export default ChopLogicMultiSelect;

package/dist/components/inputs/multi-select/__docs__/MultiSelectExample.d.ts

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

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

@@ -1,4 +1,4 @@
-import { MultiSelectValue } from '../types';
+import { MultiSelectValue } from '../MultiSelect';
 
 type SelectComboboxProps = {
     isOpened: boolean;

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

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

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

@@ -1,4 +1,4 @@
-import { MultiSelectValue } from '../types';
+import { MultiSelectValue } from '../MultiSelect';
 
 type SelectOptionProps = {
     value: MultiSelectValue;

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

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+
+export type ChopLogicNumericInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+    id: string;
+    name: string;
+    label: string;
+    valid?: boolean;
+    errorMessage?: string;
+};
+declare const NumericInput: React.FC<ChopLogicNumericInputProps>;
+export default NumericInput;

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

@@ -0,0 +1,7 @@
+/// <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;
+    $invalid: boolean;
+}>> & string;
+export declare const StyledNumericInput: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;

package/dist/components/inputs/numeric/__docs__/NumericInput.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { default as NumericInputExample } from './NumericInputExample';
+
+declare const meta: Meta<typeof NumericInputExample>;
+export default meta;
+type Story = StoryObj<typeof NumericInputExample>;
+export declare const Default: Story;

package/dist/components/inputs/numeric/__docs__/NumericInputExample.d.ts

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

package/dist/components/inputs/numeric/__tests__/NumericInput.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -1,4 +1,15 @@
-import { ChopLogicSelectProps } from './types';
-
+/// <reference types="react" />
+export type ChopLogicSelectProps = React.SelectHTMLAttributes<HTMLSelectElement> & {
+    id: string;
+    name: string;
+    label: string;
+    values: SelectValue[];
+    onSelectChange?: (value?: SelectValue) => void;
+    placeholder?: string;
+};
+export type SelectValue = {
+    id: string;
+    label: string;
+};
 declare const ChopLogicSelect: React.FC<ChopLogicSelectProps>;
 export default ChopLogicSelect;

package/dist/components/inputs/select/__docs__/SelectExample.d.ts

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

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

@@ -1,4 +1,4 @@
-import { SelectValue } from '../types';
+import { SelectValue } from '../Select';
 
 type SelectComboboxProps = {
     isOpened: boolean;

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

@@ -1,4 +1,4 @@
-import { SelectValue } from '../types';
+import { SelectValue } from '../Select';
 
 type SelectDropdownProps = {
     values: SelectValue[];

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

@@ -1,4 +1,4 @@
-import { SelectValue } from '../types';
+import { SelectValue } from '../Select';
 
 type SelectOptionProps = {
     value: SelectValue;

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

@@ -1,5 +1,11 @@
 import { default as React } from 'react';
-import { ChopLogicTextInputProps } from './types';
 
+export type ChopLogicTextInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+    id: string;
+    name: string;
+    label: string;
+    valid?: boolean;
+    errorMessage?: string;
+};
 declare const TextInput: React.FC<ChopLogicTextInputProps>;
 export default TextInput;

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

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

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

@@ -1,6 +1,27 @@
 import { default as React } from 'react';
-import { CLIcon } from './types';
 
+export declare enum CLIcon {
+    ArrowDown = "arrow-down",
+    ArrowUp = "arrow-up",
+    Back = "back",
+    Cancel = "cancel",
+    CheckboxChecked = "checkbox-checked",
+    CheckboxUnchecked = "checkbox-unchecked",
+    CheckMark = "check-mark",
+    Copy = "copy",
+    Cut = "cut",
+    Delete = "delete",
+    Download = "download",
+    Error = "error",
+    Forward = "forward",
+    Help = "help",
+    Info = "info",
+    Paste = "paste",
+    Question = "question",
+    Save = "save",
+    Upload = "upload",
+    Warning = "warning"
+}
 declare const ChopLogicIcon: React.FC<{
     name?: CLIcon;
 }>;

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

@@ -1,4 +1,13 @@
-import { ChopLogicAlertProps } from './types';
+import { CLIcon } 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?: 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 '../types';
+import { ChopLogicAlertProps } from '../Alert';
 
 declare const ExampleComponent: React.FC<ChopLogicAlertProps>;
 declare const meta: Meta<typeof ExampleComponent>;

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

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
-import { CLIcon } from '../../../../../../../../../../src/components/misc/icon/types';
-import { ChopLogicAlertMode } from '../types';
+import { CLIcon } from '../../../../../../../../../../src/components/misc/icon/Icon';
+import { ChopLogicAlertMode } from '../Alert';
 
 type ChopLogicAlertHeaderProps = {
     onClose: () => void;

package/dist/components/modals/alert/helpers/get-alert-title.d.ts

@@ -1,3 +1,3 @@
-import { ChopLogicAlertMode } from '../types';
+import { ChopLogicAlertMode } from '../Alert';
 
 export declare function getAlertTitle(mode: ChopLogicAlertMode, title?: string): string;

package/dist/components/modals/alert/helpers/render-alert-icon.d.ts

@@ -1,4 +1,4 @@
-import { CLIcon } from '../../../../../../../../../../src/components/misc/icon/types';
-import { ChopLogicAlertMode } from '../types';
+import { CLIcon } from '../../../../../../../../../../src/components/misc/icon/Icon';
+import { ChopLogicAlertMode } from '../Alert';
 
 export declare function renderAlertIcon(mode: ChopLogicAlertMode, icon?: CLIcon): React.ReactElement | null;

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

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

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

@@ -1,4 +1,10 @@
-import { ChopLogicTooltipProps } from './types';
+import { PropsWithChildren } from 'react';
 
+export type ChopLogicTooltipProps = PropsWithChildren & React.HTMLAttributes<HTMLElement> & {
+    tooltipContent: string | React.ReactElement;
+    id: string;
+    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 '../types';
+import { ChopLogicTooltipProps } from '../Tooltip';
 
 declare const TooltipExample: React.FC<ChopLogicTooltipProps>;
 export default TooltipExample;

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

@@ -18,6 +18,7 @@ export declare const UNITS: Readonly<{
     bigGap: "1rem";
     minElementSize: "2.75rem";
     blockBorderRadius: "0.375rem";
+    inputWrapperHeight: "3rem";
 }>;
 export declare const SHADOWS: Readonly<{
     box: "rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px";