@kwantis-id3/frontend-library 1.0.0-rc.4 → 1.0.0-rc.41

package/dist/index.d.ts

@@ -1,12 +1,15 @@
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
-import * as React$1 from 'react';
-import React__default, { FC, PropsWithChildren } from 'react';
-import { Interpolation, CreateStyled } from '@emotion/styled';
-import { Theme, Interpolation as Interpolation$1 } from '@emotion/react';
+import * as _emotion_react from '@emotion/react';
+import { Interpolation, Theme as Theme$1 } from '@emotion/react';
+import { Theme } from '@emotion/react/dist/declarations/src';
+import * as react from 'react';
+import { PropsWithChildren, ReactElement, FC, ReactNode } from 'react';
+import * as _emotion_styled from '@emotion/styled';
+import { CreateStyled } from '@emotion/styled';
 import { ColumnDef } from '@tanstack/react-table';
 
-type ButtonVariants = "contained" | "outlined" | "text";
-type ButtonProps = {
+type TButtonVariants = "contained" | "outlined" | "text";
+type TButtonProps = {
     /** Color of the button */
     color?: string;
     /** Type of the button */
@@ -14,7 +17,9 @@ type ButtonProps = {
     /** Custom styles */
     sx?: Interpolation<Theme>;
     /** Variant of the button, either `contained`, `outlined` or `text` */
-    variant?: ButtonVariants;
+    variant?: TButtonVariants;
+    /** The button size; either "large" or "small" */
+    size?: "small" | "large";
     /** onClick handler */
     onClick?: () => void;
     className?: string;
@@ -23,9 +28,10 @@ type ButtonProps = {
     /** Disabled state */
     disabled?: boolean;
     /** Elements to render as children */
-    children?: React$1.ReactNode;
+    children?: React.ReactNode;
 };
-declare const Button: (props: ButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
+
+declare const Button: (props: TButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type TColorScale = {
     50: string;
@@ -91,6 +97,8 @@ interface IIndicatorColors {
     warningFill: string;
     error: string;
     errorFill: string;
+    neutral: string;
+    neutralFill: string;
 }
 interface IPalette {
     /** Application background */
@@ -136,56 +144,56 @@ interface IThemeContextValue {
     setMode: (mode: TThemeMode) => void;
 }
 
+declare const commonColors: ICommonColors;
 declare const defaultLightPalette: IPalette;
 declare const defaultDarkPalette: IPalette;
-declare const ThemeContextProvider: ({ palettes, defaultMode, children, }: React__default.PropsWithChildren<IThemeContextProps>) => JSX.Element;
+declare const ThemeContextProvider: ({ palettes, defaultMode, children, }: PropsWithChildren<IThemeContextProps>) => ReactElement;
 declare const useThemeContext: () => IThemeContextValue;
 
-type AccordionProps = {
-    /** Text of the accordion trigger */
+declare const AccordionGroup: _emotion_styled.StyledComponent<{
+    theme?: _emotion_react.Theme;
+    as?: React.ElementType;
+} & {
+    $variant: "default" | "light";
+}, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+
+type TAccordionProps = PropsWithChildren & {
+    /** Title to be used if no custom trigger is passed */
     title: string;
-    /** Content of the accordion */
-    children: React__default.ReactNode;
-    /** Custom trigger component */
-    customTrigger?: React__default.ReactNode;
-    /** Works only if uncontrolled (isOpen props is not present) */
-    defaultOpen?: boolean;
-    /** Color of the accordion */
-    color?: string;
-    /** Color of the icon */
-    iconColor?: string;
-    /** Color of the divider */
-    dividerColor?: string;
-    /** Hide the icon */
-    hideIcon?: boolean;
-    /** Hide the divider */
-    hideDivider?: boolean;
     /** Pass your state value here if the Accordion needs to be Controlled */
     isOpen?: boolean;
-    /** Lazy render the content of the accordion */
-    isLazy?: boolean;
-    /** onClick handler */
+    /** Default open state if the accordion is Uncontrolled */
+    defaultOpen?: boolean;
+    /** Callback function to be called when the Accordion is clicked */
     onClick?: () => void;
-    /** onOpen handler */
+    /** Callback function to be called when the Accordion opens */
     onOpen?: () => void;
-    /** onClose handler */
+    /** Callback function to be called when the Accordion closes */
     onClose?: () => void;
-    /** Custom styles */
-    sx?: Interpolation<Theme>;
+    /** Custom trigger element */
+    trigger?: (isOpen: boolean) => React.ReactNode;
+    /** Variant of the Accordion. Default has everything wrapped in borders, while light just renders the content and the title without setting colors
+     * @default "default"
+     */
+    variant?: "default" | "light";
 };
-declare const Accordion: (props: AccordionProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-interface TextFieldProps extends React__default.InputHTMLAttributes<HTMLInputElement> {
+declare const Accordion: FC<TAccordionProps>;
+
+declare const InputField: react.ForwardRefExoticComponent<react.InputHTMLAttributes<HTMLInputElement> & {
+    containerClassName?: string;
+    color?: string;
+    sx?: _emotion_react.Interpolation<_emotion_react.Theme>;
+} & react.RefAttributes<HTMLInputElement>>;
+
+type TTextFieldProps = React.InputHTMLAttributes<HTMLInputElement> & {
     /** Classname given to the container div */
     containerClassName?: string;
-    /** Disables the input */
-    isDisabled?: boolean;
     /** The color of the input */
     color?: string;
     /** Change the styles of the input field */
-    sx?: React__default.CSSProperties;
-}
-declare const InputField: React__default.ForwardRefExoticComponent<TextFieldProps & React__default.RefAttributes<HTMLInputElement>>;
+    sx?: Interpolation<Theme$1>;
+};
 
 interface SingleSelectProps<Option = {
     label: string;
@@ -275,7 +283,7 @@ interface MultiSelectProps<Option = {
 }
 declare const MultiSelect: <Option>(props: MultiSelectProps<Option>) => _emotion_react_jsx_runtime.JSX.Element;
 
-type SliderProps = {
+type TSliderProps = {
     /** The values of the slider. */
     values: number[];
     /** The minimum value of the slider. */
@@ -307,7 +315,7 @@ type SliderProps = {
     /** Wether the thumbs can overlap */
     allowOverlap?: boolean;
 };
-declare const Slider: (props: SliderProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const Slider: (props: TSliderProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 /**
  * @property {string} value - The value displayed in the dropdown item
@@ -316,7 +324,7 @@ declare const Slider: (props: SliderProps) => _emotion_react_jsx_runtime.JSX.Ele
  * @property {DropdownItem[]} children - The children of the dropdown item
  * @property {() => void} onClick - The onClick handler of the dropdown item
  */
-type DropdownItem = {
+type TDropdownItem = {
     /** The value displayed in the item */
     value: string;
     /** The color of the item */
@@ -326,7 +334,7 @@ type DropdownItem = {
     /** The hover color of the item */
     hoverColor?: string;
     /** The children of the item */
-    children?: DropdownItem[];
+    children?: TDropdownItem[];
     /** Wether the item is hidden or not */
     isHidden?: boolean;
     /** Wether the dropdown should close when the item is clicked */
@@ -334,25 +342,39 @@ type DropdownItem = {
     /** The onClick handler of the item */
     onClick?: () => void;
 };
-type DropdownProps = {
+type TDropdownProps = {
     /** The content of the dropdown */
-    content: DropdownItem[];
+    content: TDropdownItem[];
     /** The trigger element of the dropdown. Clicking on this item will open the dropdown */
-    trigger: React__default.ReactNode;
+    trigger: React.ReactNode;
     /** The color of the dropdown */
     bgColor?: string;
     /** The hover color of the dropdown */
     hoverColor?: string;
+    /** The border color */
+    borderColor?: string;
+    /** The border width */
+    borderWidth?: string;
     /** Controls wether the dropdown should extend towards the left or the right */
     direction?: "left" | "right";
+    /** Controls whether the dropdown body should have absolute or fixed position
+     * By default, it is set to absolute, which means the dropdown will be positioned relative to its parent element.
+     * Use fixed if you want the body to be above the entire page, regardless of the parent element.
+     */
+    menuPosition?: "absolute" | "fixed";
     /** The mobile breakpoint, by default it's 768px */
     mobileBreakpoint?: number;
 };
-declare const Dropdown: (props: DropdownProps) => _emotion_react_jsx_runtime.JSX.Element;
+type TDropdownItemProps = TDropdownItem & {
+    direction?: string;
+    closeBody: () => void;
+};
 
-interface ModalProps {
+declare const Dropdown: (props: TDropdownProps) => _emotion_react_jsx_runtime.JSX.Element;
+
+type TModalProps = {
     /** The content of the modal */
-    children: React__default.ReactNode;
+    children: React.ReactNode;
     /** Cointrols whether the modal should be open or not. */
     isOpen: boolean;
     /** The handler to be called when the modal is closed */
@@ -364,9 +386,10 @@ interface ModalProps {
     /** custom height */
     height?: string;
     /** custom css */
-    sx?: React__default.CSSProperties;
-}
-declare const Modal: React__default.FC<ModalProps>;
+    sx?: React.CSSProperties;
+};
+
+declare const Modal: FC<TModalProps>;
 
 type TIndicatorInstanceProps = {
     outerColor?: string;
@@ -378,7 +401,7 @@ type TIndicatorInstanceProps = {
 type TIndicatorProps = {
     variant: TIndicatorVariants;
 } & TIndicatorInstanceProps;
-type TIndicatorVariants = "live" | "success" | "warning" | "error";
+type TIndicatorVariants = "live" | "success" | "warning" | "error" | "neutral";
 
 type TGenericIndicatorProps = {
     variant: TIndicatorVariants;
@@ -404,11 +427,14 @@ type TTagProps = {
     textColor?: string;
     sx?: Interpolation<Theme>;
 };
+
+/** @jsxImportSource @emotion/react */
+
 declare const Tag: FC<TTagProps>;
 
 type TCardSectionProps = PropsWithChildren & {
-    sx?: Interpolation$1<Theme>;
-    onClick?: (e: React__default.MouseEvent<HTMLElement>) => void;
+    sx?: Interpolation<Theme$1>;
+    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
 };
 
 /** @jsxImportSource @emotion/react */
@@ -449,19 +475,203 @@ type TTableRow<T extends TCellValues> = {
 declare const Table: <Cell extends TCellValues, Row extends TTableRow<Cell>>(props: TTableProps<Cell, Row>) => _emotion_react_jsx_runtime.JSX.Element;
 declare const renderCell: (value: string | number | boolean | null) => _emotion_react_jsx_runtime.JSX.Element;
 
+type TDataGridProps<Cell extends TCellValues, Row extends TDataGridRow<Cell>> = {
+    columns: ColumnDef<TDataGridRow<Cell>, Cell>[];
+    data: Row[] | undefined;
+};
+type TDataGridRow<Cell extends TCellValues> = {
+    [key: string]: Cell;
+};
+
+declare const DataGrid: <Cell extends TCellValues, Row extends TDataGridRow<Cell>>(props: TDataGridProps<Cell, Row>) => _emotion_react_jsx_runtime.JSX.Element;
+
 type TMultiViewListProps<Cell extends TCellValues, Row extends TTableRow<Cell>> = TTableProps<Cell, Row> & {
     mode: "table" | "cards";
-    cardComponent: (item: Row) => React__default.ReactNode;
+    cardComponent: (item: Row, index: number) => React.ReactNode;
+    cardsWidth?: string;
+    cardsHeight?: string;
+    sx?: Interpolation<Theme$1>;
+};
+type TMultiViewGridProps<Cell extends TCellValues, Row extends TDataGridRow<Cell>> = TDataGridProps<Cell, Row> & {
+    mode: "table" | "cards";
+    cardComponent: (item: Row, index: number) => React.ReactNode;
+    cardsWidth?: string;
+    cardsHeight?: string;
+    sx?: Interpolation<Theme$1>;
 };
 
 declare const MultiViewList: <Cell extends TCellValues, Row extends TTableRow<Cell>>(props: TMultiViewListProps<Cell, Row>) => _emotion_react_jsx_runtime.JSX.Element;
 
+declare const MultiViewGrid: <Cell extends TCellValues, Row extends TDataGridRow<Cell>>(props: TMultiViewGridProps<Cell, Row>) => _emotion_react_jsx_runtime.JSX.Element;
+
 /**
- * Hook to check if the screen is mobile. The default breakpoint is 768px.
- * @param {number=} mobileBreakpoint breakpoint width to check against
- * @returns boolean
+ * A callback to customize how items are rendered
+ * @property isOpen: A boolean indicating if the item is expanded
+ * @property hasChildren: A boolean indicating if the item has children
+ * @property item: the entire item object
  */
-declare const useIsMobile: (mobileBreakpoint?: number) => boolean;
+type TCustomRenderProps = {
+    isOpen: boolean;
+    item: TTreeViewItem;
+};
+/**
+ * A callback to customize how the content of the items is rendered
+ * @extends TCustomRenderProps
+ * @property icon: The icon of the item. If the renderIcon callback is provided, this will be the result of that callback
+ * @property title: The title of the item. If the renderTitle callback is provided, this will be the result of that callback
+ */
+type TRenderTriggerProps = TCustomRenderProps & {
+    icon: React.ReactNode;
+    title: React.ReactNode;
+};
+type TTreeItemFunctions = {
+    /** A callback to customize how the titles are rendered */
+    renderTitle?: (props: TCustomRenderProps) => React.ReactNode;
+    /** A callback to customize how the icons are rendered */
+    renderIcon?: (props: TCustomRenderProps) => React.ReactNode;
+    /** A callback to customize how the content of the items is rendered */
+    renderTrigger?: (props: TRenderTriggerProps) => React.ReactNode;
+    /** A callback executed when an item is focused. An item gets focused when you click on it. Focusing and item will also select it. */
+    onFocusItem?: (item: TTreeViewItem) => void;
+    /** A callback executed when an item is selected. To select an item, ctrl+click on it. */
+    onSelectItems?: (item: string[]) => void;
+    /** A callback executed when an item is expanded */
+    onExpandItem?: (item: TTreeViewItem) => void;
+    /** A callback executed when an item is collapsed */
+    onCollapseItem?: (item: TTreeViewItem) => void;
+    /** A callback to handle the expansion of items without children */
+    onMissingChildren?: (item: TTreeViewItem) => void;
+};
+type TTreeViewProps = TTreeItemFunctions & {
+    /** An array representing the items that the tree needs to render */
+    items: TTreeViewItem[];
+    /** Disable multi-selection possibility */
+    isMultiSelectionDisabled?: boolean;
+    /** Custom styles */
+    sx?: Interpolation<Theme$1>;
+};
+type TUncontrolledTreeViewProps = TTreeViewProps & {
+    items: TTreeViewItem[];
+    /** A search string used to filter the items. */
+    searchString?: string;
+    /** The ids of the items that should be expanded by default */
+    defaultExpandedItems?: string[];
+    /** Only allow one root item to be expanded at a time */
+    singleRootExpand?: boolean;
+};
+type TControlledTreeViewProps = TTreeViewProps & {
+    /** The current state of the Tree View. */
+    viewState: TViewState;
+};
+type TViewState = {
+    /** The list of ids of items that are selected */
+    selectedItems?: string[];
+    /** The list of ids of items that are expanded */
+    expandedItems?: string[];
+    /** The focused item */
+    focusedItem?: string;
+};
+type TTreeViewItem = TTreeItemFunctions & {
+    /** Item identifier */
+    id: string;
+    /** Item name */
+    name: string;
+    /** The possible children of this item */
+    children?: string[];
+    /** If the item should be rendered as a folder even with no children */
+    isFolder?: boolean;
+    /** A callback to fetch children asynchronously */
+    childrenAsync?: () => Promise<TTreeViewItem[]>;
+    /** Custom styles */
+    sx?: Interpolation<Theme$1>;
+};
+
+/** @jsxImportSource @emotion/react */
+
+declare const ControlledTreeView: FC<TControlledTreeViewProps>;
+
+declare const UncontrolledTreeView: FC<TUncontrolledTreeViewProps>;
+
+type TDrawerProps = {
+    /** Position of the drawer */
+    anchor: "top" | "right" | "bottom" | "left";
+    /** Optional state value to control the component */
+    isOpen?: boolean;
+    /** Trigger showed when drawer is closed */
+    closedTrigger?: ReactNode;
+    /** Trigger showed when drawer is open */
+    openTrigger?: ReactNode;
+    /** Component to be rendered when Drawer is open */
+    openContent?: ReactNode;
+    /** Component to be rendered when Drawer is closed */
+    closedContent?: ReactNode;
+    /** Min open of the drawer as number of pixels. If not defined the minOpen will be the height of closedContent if present, otherwise 0px */
+    minOpen?: number;
+    /** Max open of the drawer as number of pixels. If not defined the maxOpen will be the height of openContent with limit at 90vh/vw */
+    maxOpen?: number;
+    /** Background color */
+    bgColor?: string;
+    /** Trigger Color */
+    triggerColor?: string;
+    /** Trigger hover color */
+    triggerHoverColor?: string;
+    /** Hide the default thumb trigger */
+    hideTrigger?: boolean;
+    /** Keep rendered when closed to preserve state */
+    keepMounted?: boolean;
+    /** Set a custom z-index */
+    zIndex?: number;
+    sx?: Interpolation<Theme$1>;
+    onOpen?: () => void;
+    onClose?: () => void;
+};
+
+declare const Drawer: ({ anchor, isOpen: isOpenProp, openContent, closedContent, openTrigger, closedTrigger, minOpen, maxOpen, bgColor, triggerColor, triggerHoverColor, onOpen, onClose, zIndex, hideTrigger, keepMounted, sx, }: TDrawerProps) => _emotion_react_jsx_runtime.JSX.Element;
+
+type TCheckboxProps = {
+    /** Lable of the checkbox */
+    label?: string;
+    /** HTML id */
+    htmlId?: string;
+    name?: string;
+    /** Controlled checked state */
+    checked?: boolean;
+    /** Uncontrolled default checked state */
+    defaultChecked?: boolean;
+    /** onChange handler */
+    onChange?: (checked: boolean) => void;
+    /** Mixed state in its children checkboxes */
+    indeterminate?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    className?: string;
+    /** Custom styles */
+    sx?: Interpolation<Theme>;
+    /** Checkbox sizes */
+    size?: "small" | "medium" | "large";
+};
+
+declare const Checkbox: ({ label, htmlId, checked, defaultChecked, onChange, indeterminate, disabled, className, sx, name, size, }: TCheckboxProps) => _emotion_react_jsx_runtime.JSX.Element;
+
+type TSwitchProps = {
+    /** Whether the switch is checked (controlled) */
+    checked?: boolean;
+    /** Default checked state (uncontrolled) */
+    defaultChecked?: boolean;
+    /** Callback function when the switch state changes */
+    onChange?: (checked: boolean) => void;
+    /** The color of switch when checked */
+    color?: string;
+    /** The label for the switch */
+    label?: string;
+    /** Size of switch */
+    size?: "small" | "medium" | "large";
+    /** HTML id */
+    htmlId?: string;
+    className?: string;
+};
+
+declare const Switch: (props: TSwitchProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 /**
  * emotion.js doesn't support transient options out of the box.
@@ -472,7 +682,12 @@ declare const useIsMobile: (mobileBreakpoint?: number) => boolean;
  */
 declare const transientOptions: Parameters<CreateStyled>[1];
 
-declare const styled: CreateStyled;
+/**
+ * Hook to check if the screen is mobile. The default breakpoint is 768px.
+ * @param {number=} mobileBreakpoint breakpoint width to check against
+ * @returns boolean
+ */
+declare const useIsMobile: (mobileBreakpoint?: number) => boolean;
 
 /**
  *
@@ -482,17 +697,29 @@ declare const styled: CreateStyled;
 declare const getContrastColor: (color: string) => string;
 /**
  *
- * @param color the color to darken
+ * @param color a color
  * @param strength the strength (0-100) to darken the color
  * @returns the color darkened by the strength
  */
 declare const darkenColor: (color: string, strength?: number) => string;
 /**
  *
- * @param color the color to lighten
+ * @param color a color
  * @param strength the strength (0-100) to lighten the color
  * @returns the color lightened by the strength
  */
 declare const lightenColor: (color: string, strength?: number) => string;
+/**
+ * @param color a color
+ * @returns the hover color, based on if the color is dark or light
+ */
+declare const getHoverColor: (color: string) => string;
+/**
+ * @param color a color
+ * @returns the active color, based on if the color is dark or light
+ */
+declare const getActiveColor: (color: string) => string;
+
+declare function usePrefersColorScheme(): "light" | "dark";
 
-export { Accordion, AccordionProps, Button, ButtonProps, Card, CardContent, CardFooter, CardHeader, CardIndicators, CardMediaSection, Dropdown, DropdownItem, DropdownProps, IBackgroundColors, ICommonColors, IIndicatorColors, IPalette, IStandardPaletteColor, ITagColors, IThemeContextProps, IThemeContextValue, Indicator, InputField, Modal, MultiSelect, MultiSelectProps, MultiViewList, SingleSelect, SingleSelectProps, Slider, SliderProps, TCardSectionProps, TCellValues, TColorScale, TIndicatorProps, TIndicatorVariants, TMultiViewListProps, TTableCell, TTableProps, TTableRow, TTagProps, TThemeMode, Table, Tag, ThemeContextProvider, darkenColor, defaultDarkPalette, defaultLightPalette, getContrastColor, lightenColor, renderCell, styled, transientOptions, useIsMobile, useThemeContext };
+export { Accordion, AccordionGroup, Button, Card, CardContent, CardFooter, CardHeader, CardIndicators, CardMediaSection, Checkbox, ControlledTreeView, DataGrid, Drawer, Dropdown, IBackgroundColors, ICommonColors, IIndicatorColors, IPalette, IStandardPaletteColor, ITagColors, IThemeContextProps, IThemeContextValue, Indicator, InputField, Modal, MultiSelect, MultiSelectProps, MultiViewGrid, MultiViewList, SingleSelect, SingleSelectProps, Slider, Switch, TAccordionProps, TButtonProps, TButtonVariants, TCardSectionProps, TCellValues, TCheckboxProps, TColorScale, TControlledTreeViewProps, TCustomRenderProps, TDataGridProps, TDataGridRow, TDrawerProps, TDropdownItem, TDropdownItemProps, TDropdownProps, TIndicatorInstanceProps, TIndicatorProps, TIndicatorVariants, TModalProps, TMultiViewGridProps, TMultiViewListProps, TRenderTriggerProps, TSliderProps, TSwitchProps, TTableCell, TTableProps, TTableRow, TTagProps, TTextFieldProps, TThemeMode, TTreeViewItem, TUncontrolledTreeViewProps, TViewState, Table, Tag, ThemeContextProvider, UncontrolledTreeView, commonColors, darkenColor, defaultDarkPalette, defaultLightPalette, getActiveColor, getContrastColor, getHoverColor, lightenColor, renderCell, transientOptions, useIsMobile, usePrefersColorScheme, useThemeContext };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kwantis-id3/frontend-library",
-  "version": "1.0.0-rc.4",
+  "version": "1.0.0-rc.41",
   "description": "Kwantis frontend components collection",
   "scriptsComments": {
     "storybook": "Starts storybook in development mode",
@@ -27,7 +27,6 @@
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "vitest --coverage",
-    "chromatic": "npx chromatic --project-token=3dd812d03e4c",
     "build": "pnpm rollup",
     "bump:patch": "pnpm version patch",
     "bump:minor": "pnpm version minor",
@@ -46,17 +45,20 @@
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.0.0",
-    "@storybook/addon-essentials": "7.4.6",
-    "@storybook/addon-interactions": "7.4.6",
-    "@storybook/addon-links": "7.4.6",
-    "@storybook/blocks": "7.4.6",
-    "@storybook/react": "7.4.6",
-    "@storybook/react-webpack5": "7.4.6",
-    "@storybook/testing-library": "0.2.2",
+    "@storybook/addon-essentials": "^8.6.4",
+    "@storybook/addon-interactions": "^8.6.4",
+    "@storybook/addon-links": "^8.6.4",
+    "@storybook/addon-webpack5-compiler-swc": "^2.1.0",
+    "@storybook/blocks": "^8.6.4",
+    "@storybook/react": "^8.6.4",
+    "@storybook/react-webpack5": "^8.6.4",
+    "@storybook/test": "^8.6.4",
+    "@storybook/types": "^8.6.4",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/react": "^18.0.33",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.0",
     "@types/testing-library__jest-dom": "^5.14.5",
     "@types/tinycolor2": "^1.4.3",
     "@typescript-eslint/eslint-plugin": "^5.58.0",
@@ -67,23 +69,27 @@
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.14",
+    "eslint-plugin-storybook": "^0.11.4",
     "jsdom": "^23.0.1",
+    "lucide-react": "^0.545.0",
     "prop-types": "15.8.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
     "rollup": "^3.20.2",
     "rollup-plugin-dts": "^5.3.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "storybook": "7.4.6",
+    "storybook": "^8.6.4",
     "ts-node": "^10.9.1",
     "tslib": "^2.5.0",
-    "typescript": "^5.0.3",
-    "vitest": "^3.0.5"
+    "typescript": "^5.7.3",
+    "vitest": "^3.0.5",
+    "@emotion/jest": "^11.11.0"
   },
   "peerDependencies": {
     "@tanstack/react-table": "^8.0.0",
-    "react": ">= 17.0.2"
+    "lucide-react": "^0.545.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "@emotion/react": "^11.0.0",
+    "@emotion/styled": "^11.0.0"
   },
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -93,16 +99,10 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@emotion/jest": "^11.11.0",
-    "@emotion/react": "11.14.0",
-    "@emotion/styled": "11.14.0",
-    "react-collapsible": "^2.10.0",
-    "react-icons-kit": "^2.0.0",
     "react-range": "^1.8.14",
     "react-select": "^5.7.3",
     "tinycolor2": "^1.6.0"
   },
-  "readme": "ERROR: No README data found!",
   "pnpm": {
     "overrides": {
       "@adobe/css-tools@<4.3.1": ">=4.3.1",
@@ -114,5 +114,10 @@
       "word-wrap@<1.2.4": ">=1.2.4",
       "@babel/traverse@<7.23.2": ">=7.23.2"
     }
-  }
+  },
+  "engines": {
+    "node": ">=20.0.0",
+    "pnpm": ">=10.0.0"
+  },
+  "packageManager": "pnpm@10.0.0+sha512.b8fef5494bd3fe4cbd4edabd0745df2ee5be3e4b0b8b08fa643aa3e4c6702ccc0f00d68fa8a8c9858a735a0032485a44990ed2810526c875e416f001b17df12b"
 }