venice-ui 2.4.13 → 3.0.1

package/dist/esm/config/index.js

@@ -0,0 +1,4 @@
+export * from './config';
+export * from './themes';
+export * from './componentTheme';
+export * from './wordbook';

package/dist/esm/config/themes.js

@@ -0,0 +1,61 @@
+export const themes = {
+    default: {
+        primitive: {
+            primary: {
+                50: '#F2F8FD',
+                100: '#E4F1FA',
+                200: '#C7E3F5',
+                300: '#9FD0EC',
+                400: '#6EB8DF',
+                500: '#3B90CB',
+                600: '#2F78B0',
+                700: '#25608E',
+                800: '#1C496C',
+                900: '#13324A',
+            },
+            neutral: {
+                0: '#FFFFFF',
+                50: '#F9FAFB',
+                100: '#F3F4F6',
+                200: '#E5E7EB',
+                300: '#D1D5DB',
+                400: '#9CA3AF',
+                500: '#6B7280',
+                600: '#4B5563',
+                700: '#374151',
+                800: '#1F2937',
+                900: '#111827',
+            },
+            error: {
+                50: '#FEF2F2',
+                100: '#FEE2E2',
+                200: '#FECACA',
+                300: '#FCA5A5',
+                500: '#EF4444',
+                600: '#DC2626',
+            },
+            info: {
+                50: '#EFF6FF',
+                100: '#DBEAFE',
+                200: '#BFDBFE',
+                500: '#3B82F6',
+                600: '#2563EB',
+            },
+            warning: {
+                50: '#FFFBEB',
+                100: '#FEF3C7',
+                200: '#FDE68A',
+                500: '#F59E0B',
+                600: '#D97706',
+            },
+            success: {
+                50: '#ECFDF5',
+                100: '#D1FAE5',
+                200: '#A7F3D0',
+                500: '#10B981',
+                600: '#059669',
+            },
+        },
+    },
+};
+export const defaultTheme = themes.default;

package/dist/esm/config/wordbook.js

@@ -0,0 +1,71 @@
+export const wordbook = {
+    label: {
+        optional: '(optional)',
+    },
+    dropdown: {
+        placeholder: 'Select an option',
+    },
+    searchInput: {
+        placeholder: 'Search ... ',
+        emptyState: 'No results found',
+    },
+    button: {
+        defaultText: 'Click me!',
+    },
+    actions: {
+        confirm: 'Confirm',
+        cancel: 'Cancel',
+        clear: 'Clear',
+    },
+    file: {
+        placeholder: 'Choose a file',
+        buttonPlaceholder: 'Select file',
+    },
+    selector: {
+        placeholder: 'Please select',
+        emptyPanelMsg: 'There are no options to choose from',
+    },
+    calendar: {
+        actionLabels: {
+            close: 'Close',
+            confirm: 'Confirm',
+            today: 'Today',
+        },
+        months: [
+            'January',
+            'February',
+            'March',
+            'April',
+            'May',
+            'June',
+            'July',
+            'August',
+            'September',
+            'October',
+            'November',
+            'December',
+        ],
+        weekdaysShort: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        placeholder: 'Select date',
+    },
+    section: {
+        action: 'Click me'
+    },
+    pagination: {
+        dropdownLabel: 'Items per page',
+    },
+    filters: {
+        title: 'Select filters',
+        confirm: 'Apply',
+        cancel: 'Cancel',
+        labelClearAll: 'Clear all',
+        filterText: 'Filters',
+        clear: 'Clear'
+    },
+    table: {
+        filterEmptyState: 'No results found.',
+    }
+};
+//ToDo zaaktualizować stories dla Lable
+//ToDo zaaktualizować stories dla Dropdowne
+//ToDo dodac noBreakLabel do inputów

package/dist/esm/example/Colors.js

@@ -1,11 +1,60 @@
 import React from 'react';
-import { ColorsDesc, ColorsPreview, ColorsPreviewArea, ColorsPreviewRow } from './ExampleComponent';
-import { Theme } from '../Theme';
+import styled from 'styled-components';
+import { themes } from '../config/themes';
+const palette = themes.default.primitive;
+const Wrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+`;
+const Section = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`;
+const SectionTitle = styled.h3 `
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  text-transform: capitalize;
+  color: #111827;
+`;
+const SwatchRow = styled.div `
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+`;
+const SwatchCard = styled.div `
+  display: flex;
+  flex-direction: column;
+  width: 100px;
+`;
+const SwatchBox = styled.div `
+  width: 100px;
+  height: 60px;
+  border-radius: 6px;
+  background-color: ${(p) => p.color};
+  border: 1px solid rgba(0, 0, 0, 0.08);
+`;
+const SwatchLabel = styled.div `
+  margin-top: 6px;
+  font-size: 12px;
+  color: #374151;
+  line-height: 1.4;
+`;
+const SwatchHex = styled.div `
+  font-size: 11px;
+  color: #6b7280;
+  font-family: monospace;
+`;
 export const Colors = () => {
-    return (React.createElement(ColorsPreviewArea, null, Object.entries(Theme.colors).map(([key, value]) => (React.createElement(ColorsPreviewRow, null,
-        React.createElement(ColorsPreview, { color: value }),
-        React.createElement(ColorsDesc, null,
-            key,
-            React.createElement("br", null),
-            value))))));
+    return (React.createElement(Wrapper, null, Object.entries(palette).map(([groupName, shades]) => (React.createElement(Section, { key: groupName },
+        React.createElement(SectionTitle, null, groupName),
+        React.createElement(SwatchRow, null, Object.entries(shades).map(([shade, hex]) => (React.createElement(SwatchCard, { key: shade },
+            React.createElement(SwatchBox, { color: hex }),
+            React.createElement(SwatchLabel, null,
+                groupName,
+                ".",
+                shade),
+            React.createElement(SwatchHex, null, hex))))))))));
 };

package/dist/esm/example/ExampleComponent.js

@@ -1,17 +1,16 @@
 import styled from 'styled-components';
-import { Theme } from '../Theme/Theme';
 export const StoryWrapper = styled.div `
-  padding: ${Theme.padding.l};
+  padding: 16px;
 `;
 export const ExmpleBlock = styled.div `
   padding: ${(p) => (p.width ? p.width : '10px')}
     ${(p) => (p.height ? p.height : '10px')};
   text-align: center;
-  font-size: ${Theme.fontSize.xl};
+  font-size: 18px;
 `;
 export const ExmpleBlockWrapper = styled.div `
   background-color: ${(p) => (p.color ? p.color : '#ffffff')};
-  border-radius: ${Theme.borderRadius.m};
+  border-radius: 8px;
   box-sizing:border-box;
   border:1px solid #dddddd;
 `;
@@ -24,11 +23,11 @@ export const ExampleTableRow = styled.tr `
   border-collapse: collapse;
 `;
 export const ExampleTableCell = styled.td `
-  padding: ${Theme.padding.m};
+  padding: 12px;
   border-bottom: 1px solid #dddddd;
 `;
 export const ExampleTableHeader = styled.th `
-  padding: ${Theme.padding.m};
+  padding: 12px;
   border-collapse: collapse;
   background-color: #dddddd;
   text-align: left;

package/dist/esm/example/Icons.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Icon } from '../components/Icon/Icon';
+import { iconsPath } from '../components/Icon/IconsPath';
+const iconNames = Object.keys(iconsPath).sort();
+const Wrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`;
+const Description = styled.div `
+  font-size: 14px;
+  color: #4b5563;
+`;
+const Grid = styled.div `
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: 12px;
+`;
+const Card = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 12px;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: 10px;
+  background: #ffffff;
+`;
+const Preview = styled.div `
+  width: 56px;
+  height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  background: #f9fafb;
+`;
+const Name = styled.div `
+  width: 100%;
+  text-align: center;
+  font-size: 12px;
+  line-height: 1.4;
+  color: #111827;
+  word-break: break-word;
+`;
+export const Icons = () => {
+    return (React.createElement(Wrapper, null,
+        React.createElement(Description, null,
+            "Available icons in iconsPath: ",
+            iconNames.length),
+        React.createElement(Grid, null, iconNames.map((name) => (React.createElement(Card, { key: name },
+            React.createElement(Preview, null,
+                React.createElement(Icon, { name: name, size: "xl2" })),
+            React.createElement(Name, null, name)))))));
+};

package/dist/esm/example/TypographyExample.js

@@ -1,40 +1,53 @@
 import React from 'react';
 import { ExampleTable, ExampleTableCell, ExampleTableHeader, ExampleTableRow, } from '../example';
-import { TextSubHeader, TextHeader, Text, TextSmall, TextLabel, TextAccent, } from '../components/Typography';
+import { Caption, LabelText, Overline, Text, Title, Subtitle, TextSmall, } from '../components/Typography';
 export const TypographyExample = () => {
     return (React.createElement("div", null,
         React.createElement(ExampleTable, null,
             React.createElement(ExampleTableRow, null,
                 React.createElement(ExampleTableHeader, null, "Font component"),
-                React.createElement(ExampleTableHeader, null, "Sample")),
+                React.createElement(ExampleTableHeader, null, "Sample"),
+                React.createElement(ExampleTableHeader, null, "Capabilities")),
             React.createElement(ExampleTableRow, null,
                 React.createElement(ExampleTableCell, null,
-                    React.createElement("code", null, "TextHeader")),
+                    React.createElement("code", null, `<Title />`)),
                 React.createElement(ExampleTableCell, null,
-                    React.createElement(TextHeader, null, "One ring to rule them all"))),
+                    React.createElement(Title, null, "Typography in Venice UI")),
+                React.createElement(ExampleTableCell, null, "size, color, action, disabled, as")),
             React.createElement(ExampleTableRow, null,
                 React.createElement(ExampleTableCell, null,
-                    React.createElement("code", null, "TextSubHeader")),
+                    React.createElement("code", null, `<Subtitle />`)),
                 React.createElement(ExampleTableCell, null,
-                    React.createElement(TextSubHeader, null, "One ring to rule them all"))),
+                    React.createElement(Subtitle, null, "Section heading for grouped content")),
+                React.createElement(ExampleTableCell, null, "size, color, action, disabled, as")),
             React.createElement(ExampleTableRow, null,
                 React.createElement(ExampleTableCell, null,
-                    React.createElement("code", null, "Text")),
+                    React.createElement("code", null, `<Text />`)),
                 React.createElement(ExampleTableCell, null,
-                    React.createElement(Text, null, "One ring to rule them all"))),
+                    React.createElement(Text, null, "One ring to rule them all, one ring to find them.")),
+                React.createElement(ExampleTableCell, null, "body text, action hover, disabled")),
             React.createElement(ExampleTableRow, null,
                 React.createElement(ExampleTableCell, null,
-                    React.createElement("code", null, "TextSmall")),
+                    React.createElement("code", null, `<TextSmall />`)),
                 React.createElement(ExampleTableCell, null,
-                    React.createElement(TextSmall, null, "One ring to rule them all"))),
+                    React.createElement(TextSmall, null, "Smaller helper paragraph for additional context.")),
+                React.createElement(ExampleTableCell, null, "compact body size")),
             React.createElement(ExampleTableRow, null,
                 React.createElement(ExampleTableCell, null,
-                    React.createElement("code", null, "TextLabel")),
+                    React.createElement("code", null, `<Caption />`)),
                 React.createElement(ExampleTableCell, null,
-                    React.createElement(TextLabel, null, "One ring to rule them all"))),
+                    React.createElement(Caption, { color: "#6B7280" }, "Caption / meta information")),
+                React.createElement(ExampleTableCell, null, "small informational text")),
             React.createElement(ExampleTableRow, null,
                 React.createElement(ExampleTableCell, null,
-                    React.createElement("code", null, "TextAccent")),
+                    React.createElement("code", null, `<Overline />`)),
                 React.createElement(ExampleTableCell, null,
-                    React.createElement(TextAccent, null, "One ring to rule them all"))))));
+                    React.createElement(Overline, { color: "#3B90CB" }, "Overline label")),
+                React.createElement(ExampleTableCell, null, "uppercase variant")),
+            React.createElement(ExampleTableRow, null,
+                React.createElement(ExampleTableCell, null,
+                    React.createElement("code", null, `<LabelText />`)),
+                React.createElement(ExampleTableCell, null,
+                    React.createElement(LabelText, { size: "md", labelPosition: "top" }, "Form field label")),
+                React.createElement(ExampleTableCell, null, "size + labelPosition support")))));
 };

package/dist/esm/index.js

@@ -1,30 +1,34 @@
+export * from './components/ActionPanel';
 export * from './components/Aligment';
 export * from './components/Button';
 export * from './components/ButtonsFooter';
 export * from './components/Card';
 export * from './components/Checkbox';
-export * from './components/Chips';
+export * from './components/ComponentRoot';
 export * from './components/DatePicker';
 export * from './components/Dropdown';
 export * from './components/DropdownMenu';
-export * from './components/ElementHeader';
-export * from './components/DropdownMenu';
-export * from './components/Form';
 export * from './components/File';
-export * from './components/FillSelect';
 export * from './components/Filters';
-export * from './components/Icons';
+export * from './components/Form';
+export * from './components/Header';
+export * from './components/HelperText';
+export * from './components/Icon';
 export * from './components/Input';
+export * from './components/Label';
 export * from './components/List';
 export * from './components/Loader';
 export * from './components/Modal';
+export * from './components/Numerical';
+export * from './components/OptionsPanel';
 export * from './components/Pagination';
+export * from './components/SearchInput';
 export * from './components/Section';
 export * from './components/Selector';
 export * from './components/Sidepanel';
 export * from './components/Sort';
 export * from './components/Table';
+export * from './components/Tag';
 export * from './components/Tile';
-export * from './components/Toogle';
-export * from './components/Tooltip';
+export * from './components/Toggle';
 export * from './components/Typography';

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

@@ -0,0 +1,18 @@
+import { AppTheme, ThemeName } from '../../config';
+import React, { FC } from 'react';
+import { IAction } from 'types';
+import { InputSize } from 'types';
+interface IActionPanelProps {
+    theme?: AppTheme;
+    themeVariant?: ThemeName;
+    options: IAction[];
+    size: InputSize;
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    maxRows?: number;
+    zIndex?: number;
+    targetID?: string;
+    handleClick: (action: (id?: string | undefined) => void, disabled: boolean, disableID?: string | undefined) => void;
+}
+export declare const ActionPanel: FC<IActionPanelProps>;
+export {};

package/dist/types/components/ActionPanel/ActionPanel.styles.d.ts

@@ -0,0 +1,37 @@
+import { AppTheme } from '../../config';
+import { InputSize } from 'types';
+interface PanelRoot {
+    theme: AppTheme;
+    config: any;
+}
+export declare const PanelRoot: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, PanelRoot, never>;
+interface IActionItemProps {
+    theme: AppTheme;
+    config: any;
+    size: InputSize;
+    isDisabled?: boolean;
+}
+export declare const ActionItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, IActionItemProps, never>;
+interface IPanelHeaderFooterProps {
+    config: any;
+    size: InputSize;
+}
+export declare const PanelHeaderWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, IPanelHeaderFooterProps, never>;
+export declare const PanelFooterWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, IPanelHeaderFooterProps, never>;
+interface IPanelSearchWrapper {
+    config: any;
+    size: InputSize;
+}
+export declare const PanelSearchWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, IPanelSearchWrapper, never>;
+interface IPanelEmptyStateProps {
+    config: any;
+    size: InputSize;
+}
+export declare const PanelEmptyState: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, IPanelEmptyStateProps, never>;
+interface IPanelOptionsWrapperProps {
+    config: any;
+    size: InputSize;
+    maxRows: number;
+}
+export declare const PanelOptionsWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, IPanelOptionsWrapperProps, never>;
+export {};

package/dist/types/components/ActionPanel/index.d.ts

@@ -0,0 +1 @@
+export * from './ActionPanel';

package/dist/types/components/Aligment/Aligment.styles.d.ts

@@ -9,4 +9,4 @@ export interface IAligmentProps {
     backgroundColor?: string;
     gap?: number;
 }
-export declare const Aligment: import("styled-components").StyledComponent<"div", any, IAligmentProps, never>;
+export declare const Aligment: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, IAligmentProps, never>;

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

@@ -1,15 +1,17 @@
+import { AppTheme, ThemeName } from '../../config';
 import { FC } from 'react';
-import { InputSize, ButtonMode } from '../../types';
-export interface IButtonProps {
-    text: string;
+import { ButtonMode, InputSize } from 'types';
+interface IButtonProps {
     mode?: ButtonMode;
+    text: string;
     size?: InputSize;
-    right?: boolean;
-    left?: boolean;
-    theme?: any;
-    disabled?: boolean;
-    onClick: () => void;
+    isDisabled?: boolean;
     loader?: boolean;
-    errorVariant?: boolean;
+    iconName?: string;
+    theme?: AppTheme;
+    themeVariant?: ThemeName;
+    isActive?: boolean;
+    onClick: () => void;
 }
 export declare const Button: FC<IButtonProps>;
+export {};

package/dist/types/components/Button/Button.styles.d.ts

@@ -1,17 +1,14 @@
-import { InputSize } from '../../types';
-interface IButtonElement {
-    mode: string;
-    size: InputSize;
-    right: boolean;
-    left: boolean;
-    disabled: boolean;
-    theme?: any;
+import { AppTheme } from '../../config';
+import { ButtonMode, InputSize } from 'types';
+interface IButtonProps {
+    theme: AppTheme;
+    config: any;
+    mode: ButtonMode;
+    isDisabled: boolean;
     loader: boolean;
-    errorVariant: boolean;
-}
-export declare const ButtonElement: import("styled-components").StyledComponent<"button", any, IButtonElement, never>;
-interface IButtonLoader {
     size: InputSize;
+    isActive: boolean;
 }
-export declare const ButtonLoader: import("styled-components").StyledComponent<"div", any, IButtonLoader, never>;
+export declare const ButtonRoot: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, IButtonProps, never>;
+export declare const ButtonContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export {};

package/dist/types/components/Button/index.d.ts

@@ -1 +1 @@
-export { Button } from './Button';
+export * from './Button';

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

@@ -1,18 +1,20 @@
+import { AppTheme, ThemeName } from '../../config';
 import { FC } from 'react';
+import { AdditionalType, IComponentLabels, InputSize } from 'types';
 interface IButtonsFooterProps {
-    handleConfirm?: () => void;
-    handleClose: () => void;
-    handleAdditional?: (value?: boolean) => void;
-    labelConfirm?: string;
-    labelClose: string;
-    labelAdditional?: string;
-    submitDisabled?: boolean;
-    submitLoader?: boolean;
-    backgroundColor?: string;
-    additionalType?: string;
+    theme?: AppTheme;
+    themeVariant?: ThemeName;
+    onPrimaryAction?: () => void;
+    onSecondaryAction: () => void;
+    onAdditionalAction?: (value?: boolean) => void;
+    primaryDisabled?: boolean;
+    primaryLoading?: boolean;
+    additionalType?: AdditionalType;
     additionalValue?: boolean;
-    additionaNormalMode?: boolean;
+    isAdditionalDanger?: boolean;
     additionDisabled?: boolean;
+    size?: InputSize;
+    labels?: IComponentLabels;
 }
 export declare const ButtonsFooter: FC<IButtonsFooterProps>;
 export {};

package/dist/types/components/ButtonsFooter/ButtonsFooter.styles.d.ts

@@ -0,0 +1,13 @@
+import { AppTheme } from '../../config';
+interface IButtonsFooterRootProps {
+    config: any;
+    theme: AppTheme;
+    hasAdditional: boolean;
+}
+export declare const ButtonsFooterRoot: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, IButtonsFooterRootProps, never>;
+interface IButtonsFooterGroupProps {
+    config: any;
+    theme: AppTheme;
+}
+export declare const ButtonsFooterGroup: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, IButtonsFooterGroupProps, never>;
+export {};

package/dist/types/components/ButtonsFooter/index.d.ts

@@ -1 +1 @@
-export { ButtonsFooter } from './ButtonsFooter';
+export * from './ButtonsFooter';

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

@@ -1,20 +1,20 @@
+import { AppTheme, ThemeName } from '../../config';
 import React, { FC } from 'react';
-import { IAction } from '../../types';
+import { IAction } from 'types';
 interface ICardProps {
-    children: React.ReactNode;
-    customHeader?: React.ReactNode;
+    theme?: AppTheme;
+    themeVariant?: ThemeName;
     title?: string;
     actionLabel?: string;
+    children?: React.ReactNode;
+    customHeader?: React.ReactNode;
+    headerDivader?: boolean;
+    actionDisabled?: boolean;
     handleClick?: () => void;
     handleBack?: () => void;
     height?: string;
     options?: IAction[];
-    theme?: any;
-    iconColor?: string;
-    iconHoverColor?: string;
     shadow?: boolean;
-    headerDivader?: boolean;
-    actionDisabled?: boolean;
 }
 export declare const Card: FC<ICardProps>;
 export {};

package/dist/types/components/Card/Card.styles.d.ts

@@ -1,10 +1,13 @@
 interface ICardElementProps {
-    shadow: boolean;
+    shadow?: boolean;
     height?: string;
+    theme?: any;
+    config: any;
 }
-export declare const CardElement: import("styled-components").StyledComponent<"div", any, ICardElementProps, never>;
+export declare const CardRoot: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ICardElementProps, never>;
 interface ICardContentStyles {
-    soloMode: boolean;
+    theme?: any;
+    config: any;
 }
-export declare const CardContent: import("styled-components").StyledComponent<"div", any, ICardContentStyles, never>;
+export declare const CardContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ICardContentStyles, never>;
 export {};

package/dist/types/components/Card/index.d.ts

@@ -1 +1 @@
-export { Card } from './Card';
+export * from './Card';