@kwantis-id3/frontend-library 1.0.0-rc.40 → 1.0.0-rc.42

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

@@ -1,5 +1,4 @@
-import { Interpolation } from "@emotion/react";
-import { Theme } from "@emotion/react/dist/declarations/src";
+import { Interpolation, Theme } from "@emotion/react";
 export type TButtonVariants = "contained" | "outlined" | "text";
 export type TButtonProps = {
     /** Color of the button */

package/dist/esm/types/components/Checkbox/CheckboxInterfaces.d.ts

@@ -1,5 +1,4 @@
-import { Interpolation } from "@emotion/react";
-import { Theme } from "@emotion/react/dist/declarations/src";
+import { Interpolation, Theme } from "@emotion/react";
 export type TCheckboxProps = {
     /** Lable of the checkbox */
     label?: string;

package/dist/esm/types/components/Switch/Switch.d.ts

@@ -0,0 +1,2 @@
+import { TSwitchProps } from "./SwitchInterfaces";
+export declare const Switch: (props: TSwitchProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/Switch/SwitchInterfaces.d.ts

@@ -0,0 +1,17 @@
+export 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;
+};

package/dist/esm/types/components/Switch/SwitchStyled.d.ts

@@ -0,0 +1,35 @@
+export declare const SwitchContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SwitchSlider: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    $size: "small" | "medium" | "large";
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SwitchInput: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+export declare const SwitchTrack: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    $checked: boolean;
+    $checkedColor: string;
+    $uncheckedColor: string;
+    $size: "small" | "medium" | "large";
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SwitchThumb: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    $checked: boolean;
+    $thumbColor: string;
+    $size: "small" | "medium" | "large";
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SwitchLabel: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;

package/dist/esm/types/components/Switch/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Switch";
+export * from "./SwitchInterfaces";

package/dist/esm/types/components/Tag/TagInterfaces.d.ts

@@ -1,5 +1,4 @@
-import { Interpolation } from "@emotion/react";
-import { Theme } from "@emotion/react/dist/declarations/src";
+import { Interpolation, Theme } from "@emotion/react";
 import { ITagColors } from "../ThemeContext";
 export type TTagProps = {
     text: string;

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

@@ -15,3 +15,4 @@ export * from "./MultiViewList";
 export * from "./TreeView";
 export * from "./Drawer";
 export * from "./Checkbox";
+export * from "./Switch";

package/dist/index.d.ts

@@ -1,7 +1,6 @@
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 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 { Interpolation, Theme } from '@emotion/react';
 import * as react from 'react';
 import { PropsWithChildren, ReactElement, FC, ReactNode } from 'react';
 import * as _emotion_styled from '@emotion/styled';
@@ -192,7 +191,7 @@ type TTextFieldProps = React.InputHTMLAttributes<HTMLInputElement> & {
     /** The color of the input */
     color?: string;
     /** Change the styles of the input field */
-    sx?: Interpolation<Theme$1>;
+    sx?: Interpolation<Theme>;
 };
 
 interface SingleSelectProps<Option = {
@@ -433,7 +432,7 @@ type TTagProps = {
 declare const Tag: FC<TTagProps>;
 
 type TCardSectionProps = PropsWithChildren & {
-    sx?: Interpolation<Theme$1>;
+    sx?: Interpolation<Theme>;
     onClick?: (e: React.MouseEvent<HTMLElement>) => void;
 };
 
@@ -490,14 +489,14 @@ type TMultiViewListProps<Cell extends TCellValues, Row extends TTableRow<Cell>>
     cardComponent: (item: Row, index: number) => React.ReactNode;
     cardsWidth?: string;
     cardsHeight?: string;
-    sx?: Interpolation<Theme$1>;
+    sx?: Interpolation<Theme>;
 };
 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>;
+    sx?: Interpolation<Theme>;
 };
 
 declare const MultiViewList: <Cell extends TCellValues, Row extends TTableRow<Cell>>(props: TMultiViewListProps<Cell, Row>) => _emotion_react_jsx_runtime.JSX.Element;
@@ -548,7 +547,7 @@ type TTreeViewProps = TTreeItemFunctions & {
     /** Disable multi-selection possibility */
     isMultiSelectionDisabled?: boolean;
     /** Custom styles */
-    sx?: Interpolation<Theme$1>;
+    sx?: Interpolation<Theme>;
 };
 type TUncontrolledTreeViewProps = TTreeViewProps & {
     items: TTreeViewItem[];
@@ -583,7 +582,7 @@ type TTreeViewItem = TTreeItemFunctions & {
     /** A callback to fetch children asynchronously */
     childrenAsync?: () => Promise<TTreeViewItem[]>;
     /** Custom styles */
-    sx?: Interpolation<Theme$1>;
+    sx?: Interpolation<Theme>;
 };
 
 /** @jsxImportSource @emotion/react */
@@ -621,7 +620,7 @@ type TDrawerProps = {
     keepMounted?: boolean;
     /** Set a custom z-index */
     zIndex?: number;
-    sx?: Interpolation<Theme$1>;
+    sx?: Interpolation<Theme>;
     onOpen?: () => void;
     onClose?: () => void;
 };
@@ -653,6 +652,26 @@ type TCheckboxProps = {
 
 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.
  *
@@ -702,4 +721,4 @@ declare const getActiveColor: (color: string) => string;
 
 declare function usePrefersColorScheme(): "light" | "dark";
 
-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, TAccordionProps, TButtonProps, TButtonVariants, TCardSectionProps, TCellValues, TCheckboxProps, TColorScale, TControlledTreeViewProps, TCustomRenderProps, TDataGridProps, TDataGridRow, TDrawerProps, TDropdownItem, TDropdownItemProps, TDropdownProps, TIndicatorInstanceProps, TIndicatorProps, TIndicatorVariants, TModalProps, TMultiViewGridProps, TMultiViewListProps, TRenderTriggerProps, TSliderProps, 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 };
+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.40",
+  "version": "1.0.0-rc.42",
   "description": "Kwantis frontend components collection",
   "scriptsComments": {
     "storybook": "Starts storybook in development mode",
@@ -41,19 +41,16 @@
   },
   "license": "apache-2.0",
   "devDependencies": {
+    "@emotion/jest": "^11.11.0",
     "@rollup/plugin-commonjs": "^24.0.1",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.0.0",
-    "@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",
+    "@storybook/addon-docs": "^10.1.10",
+    "@storybook/addon-links": "^10.1.10",
+    "@storybook/addon-webpack5-compiler-swc": "^4.0.2",
+    "@storybook/react": "^10.1.10",
+    "@storybook/react-webpack5": "^10.1.10",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",
@@ -63,33 +60,33 @@
     "@types/tinycolor2": "^1.4.3",
     "@typescript-eslint/eslint-plugin": "^5.58.0",
     "@typescript-eslint/parser": "^5.58.0",
-    "@vitest/coverage-v8": "^3.0.5",
+    "@vitejs/plugin-react": "^5.1.2",
+    "@vitest/coverage-v8": "3.0.5",
     "chromatic": "^11.0.4",
-    "eslint": "^8.38.0",
+    "eslint": "^8.57.1",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.11.4",
-    "jsdom": "^23.0.1",
+    "eslint-plugin-storybook": "^10.1.10",
+    "jsdom": "^23.2.0",
     "lucide-react": "^0.545.0",
     "prop-types": "15.8.1",
     "rollup": "^3.20.2",
     "rollup-plugin-dts": "^5.3.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "storybook": "^8.6.4",
+    "storybook": "^10.1.10",
     "ts-node": "^10.9.1",
     "tslib": "^2.5.0",
     "typescript": "^5.7.3",
-    "vitest": "^3.0.5",
-    "@emotion/jest": "^11.11.0"
+    "vitest": "^3.0.5"
   },
   "peerDependencies": {
+    "@emotion/react": "^11.0.0",
+    "@emotion/styled": "^11.0.0",
     "@tanstack/react-table": "^8.0.0",
     "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"
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -112,7 +109,12 @@
       "semver@>=7.0.0 <7.5.2": ">=7.5.2",
       "tough-cookie@<4.1.3": ">=4.1.3",
       "word-wrap@<1.2.4": ">=1.2.4",
-      "@babel/traverse@<7.23.2": ">=7.23.2"
+      "@babel/traverse@<7.23.2": ">=7.23.2",
+      "brace-expansion@>=1.0.0 <=1.1.11": ">=1.1.12",
+      "brace-expansion@>=2.0.0 <=2.0.1": ">=2.0.2",
+      "form-data@>=4.0.0 <4.0.4": ">=4.0.4",
+      "js-yaml@>=4.0.0 <4.1.1": ">=4.1.1",
+      "glob@>=10.2.0 <10.5.0": ">=10.5.0"
     }
   },
   "engines": {