secptrum-ui - npm Package Compare versions

Comparing version 1.1.29 to 1.1.32

dist/components/Backdrop/Backdrop.d.ts

@@ -56,3 +56,3 @@ import React from "react";
      * @type {number} - The intensity of the glass effect (blur).
-     * @default Inherit from theme '6'
+     * @default '6'
      */
@@ -59,0 +59,0 @@ glassEffect?: number;

dist/components/Box/Box.d.ts

@@ -1,2 +0,2 @@
-import { BoxType } from "../../types";
+import { BoxType } from "../../types/sui";
 /**
@@ -3,0 +3,0 @@ * A flexible container component that serves as a building block for layout and styling.

dist/components/Button/Button.d.ts

@@ -1,2 +0,2 @@
-import { ButtonProps } from "../../types";
+import { ButtonProps } from "../../types/sui";
 /**
@@ -16,4 +16,12 @@ * A customizable button component designed to handle various actions and events in your application.
  *   - `"lg"`: Large size.
- * - `radius` (optional): Defines the border-radius of the button, making its corners rounded.
- *   Options include `"sm"`, `"md"`, `"lg"`, `"xl"`, or `"full"`.
+ * - `mode` (optional): Determines the mode of the button. Options include:
+ *   - `"light"`: Light mode.
+ *   - `"dark"`: Dark mode.
+ * - `fullWidth` (optional): A boolean that, when set to `true`, makes the button take the full width of its container.
+ * - `radius` (optional): Defines the border-radius of the button. Options include:
+ *   - `"sm"`: Small radius.
+ *   - `"md"`: Medium radius
+ *   - `"lg"`: Large radius.
+ *   - `"xl"`: Extra large radius. (default).
+ *   - `"full"`: Full radius, making the button circular.
  * - `icon` (optional): Allows an icon to be displayed inside the button. Accepts JSX icons (e.g., `FaUser` from react-icons)
@@ -24,8 +32,2 @@ *   without a fragment. If a fragment is used, it may cause the component to break.
  *
- * Features:
- * - Supports different styles and sizes to fit various design needs.
- * - Can display an optional icon within the button.
- * - Handles disabled and loading states to improve user experience.
- * - Triggers an `onClick` function to handle actions.
- *
  * Usage:
@@ -48,4 +50,4 @@ * Use the Button component to trigger actions, submit forms, or navigate between pages.
  */
-declare const Btn: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-export default Btn;
+declare const Button: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export default Button;
 //# sourceMappingURL=Button.d.ts.map

dist/components/Card/Card.d.ts

@@ -1,37 +0,21 @@
-import React from "react";
-import { BoxType } from "../../types";
-declare interface CardType extends BoxType {
-    children?: React.ReactNode;
-    /**
-     * An indication to center card content
-     */
-    centerContent?: boolean;
-    /**
-     * A custom background color to overide current one or provide theme colors
-     */
-    backgroundColor?: string;
-    /**
-     * A custom border color to override the default or theme border color
-     */
-    borderColor?: string;
-    /**
-     * Controls the internal spacing between card elements
-     * Accepts only number
-     */
-    space?: number;
-    /**
-     * Sets the theme mode for the input component.
-     *
-     * Options:
-     * - `light` (default)
-     * - `dark`
-     * - Custom theme mode (override default styles)
-     *
-     * Allows developers to integrate with apps that support light/dark modes or provide a custom design.
-     * @type {"light" | "dark"}
-     */
-    mode?: "light" | "dark";
-}
-declare const Card: React.ForwardRefExoticComponent<Omit<CardType, "ref"> & React.RefAttributes<HTMLDivElement>>;
+import { CardProps } from "../../types/sui";
+/**
+ * Card component for displaying content in a styled container.
+ *
+ * @component
+ * @param {Object} props - The component props.
+ * @param {React.ReactNode} props.children - The content to be rendered inside the card.
+ * @param {CardProps['mode']} [props.mode] - The visual mode of the card ('light' or 'dark'). If not provided, it uses the theme mode.
+ * @param {'row' | 'column'} [props.direction='column'] - The direction of the card's content layout. defaults to `column`
+ * @param {string} [props.width] - The width of the card.
+ * @param {boolean} [props.fullWidth] - Whether the card should take up the full width of its container.
+ * @param {string} [props.background] - The background color of the card.
+ * @param {string} [props.borderColor] - The border color of the card.
+ * @param {string} [props.boxShadow] - The box shadow of the card.
+ * @param {string} [props.space] - The spacing between child elements in the card.
+ * @param {React.Ref<HTMLDivElement>} ref - The ref to be forwarded to the card's root element.
+ * @returns {React.ReactElement} The rendered Card component.
+ */
+declare const Card: import("react").ForwardRefExoticComponent<Omit<CardProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export default Card;
 //# sourceMappingURL=Card.d.ts.map

dist/components/Checkbox/Checkbox.d.ts

@@ -41,5 +41,13 @@ type CheckBoxType = {
     borderColor?: string;
+    /**
+     * Specifies the mode of the checkbox. Can be either "dark" or "light".
+     * @default "light"
+     */
+    mode?: "dark" | "light";
 };
-declare const Ch: ({ rounded, size, color, checked, onCheck, disabled, className, borderColor, }: CheckBoxType) => import("react/jsx-runtime").JSX.Element;
-export default Ch;
+declare const CheckBox: {
+    ({ rounded, size, color, checked, onCheck, disabled, className, borderColor, mode, }: CheckBoxType): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default CheckBox;
 //# sourceMappingURL=Checkbox.d.ts.map

dist/components/Fab/Fab.d.ts

@@ -1,23 +0,4 @@
-import React, { ComponentProps } from "react";
-import { ToastPositionType } from "../Toast/Toast";
-type BoxProps = ComponentProps<"div">;
-export interface FloatProps extends BoxProps {
-    /**
-     * The React element that will be positioned to float.
-     */
-    children?: React.ReactNode;
-    /**
-     * The position of the float element, which defines where the element
-     * should appear on the screen. It can be of type `ToastPositionType`.
-     */
-    position?: ToastPositionType | "bottom-center" | "top-center";
-    backgroundColor?: string;
-    size?: "md" | "lg" | "xl";
-    disabled?: boolean;
-    variant?: "solid" | "light";
-    colorScheme?: "primary" | "secondary" | "danger";
-    moveOnScroll?: boolean;
-}
-declare const FloatingActionButton: React.ForwardRefExoticComponent<Omit<FloatProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export default FloatingActionButton;
+import { FloatProps } from "../../types/sui";
+declare const Fab: import("react").ForwardRefExoticComponent<Omit<FloatProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export default Fab;
 //# sourceMappingURL=Fab.d.ts.map

dist/components/Icon/Icon.d.ts

@@ -7,3 +7,3 @@ import React from "react";
      */
-    icon: any;
+    icon: React.ElementType;
     /**
@@ -50,4 +50,10 @@ * Size of the icon, this accepts only `number`
 };
-declare const Icon: ({ icon, size, className, onClick, onMouseEnter, onMouseLeave, color, title, styles, }: IconBaseType) => import("react/jsx-runtime").JSX.Element;
+/**
+ * An Icon component that renders a given icon with customizable properties.
+ */
+declare const Icon: {
+    ({ icon: IconComponent, size, className, onClick, onMouseEnter, onMouseLeave, color, title, styles, }: IconBaseType): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default Icon;
 //# sourceMappingURL=Icon.d.ts.map

dist/components/Input/Input.d.ts

@@ -1,36 +0,28 @@
-import { InputType } from "../../types";
+import { InputType } from "../../types/sui";
 /**
- * A versatile input field component that supports different types, styles, and additional features
- * like icons. The Input component is designed to be highly customizable, making it suitable for
- * various use cases such as forms, search bars, and user data entry.
+ * A customizable Input component for text, email, password, and number inputs.
  *
- * Props:
- * - `icon`: Allows an icon to be displayed inside the input field. Accepts JSX icons (e.g., `FaUser` from react-icons)
- *   without a fragment. If a fragment is used, it may cause the component to break.
- * - `Type`: Specifies the type of input. Accepts standard HTML input types such as "text", "password", "email".
- * - `variant`: Controls the style variant of the input. Options include:
- *   - `"solid"`: A filled input style with a background.
- *   - `"outline"`: An input with an outline border.
- *   - `"ghost"`: A transparent input with no border or background.
- * - `radius`: Defines the border-radius of the input to create rounded corners. Accepts predefined sizes:
- *   - `"sm"`: Small radius.
- *   - `"md"`: Medium radius.
- *   - `"lg"`: Large radius.
- *   - `"xl"`: Extra-large radius.
- *   - `"full"`: Completely rounded corners.
- *
- * Usage:
- * Use the Input component to create user input fields with different types, styles, and optional icons.
- * This component provides a flexible way to handle input across your application with consistent styling.
- *
- * Example:
- * ```
- * <Input
- *   icon={FaUser}
- *   Type="text"
- *   variant="outline"
- *   radius="md"
- *   placeholder="Enter your username"
- * />
- * ```
+ * @component
+ * @param {Object} props - The component props
+ * @param {React.ReactNode} props.icon - Optional icon to display inside the input
+ * @param {'outline' | 'filled' | 'unstyled'} [props.variant='outline'] - The input variant
+ * @param {'sm' | 'md' | 'lg' | 'xl' | 'full'} [props.radius='lg'] - The border radius of the input
+ * @param {'text' | 'password' | 'email' | 'number'} props.Type - The type of input
+ * @param {number} [props.iconSize=20] - The size of the icon
+ * @param {string} props.outLineBorderColor - The color of the outline border
+ * @param {string} props.focusBorderColor - The color of the border when focused
+ * @param {string} props.focusColor - The color of the input text when focused
+ * @param {boolean} props.hasError - Whether the input has an error
+ * @param {string} props.errorMessage - The error message to display
+ * @param {string} props.width - The width of the input
+ * @param {'light' | 'dark'} props.mode - The color mode of the input
+ * @param {React.CSSProperties} props.inputStyle - Custom styles for the input element
+ * @param {React.CSSProperties} props.formStyle - Custom styles for the form element
+ * @param {string} props.color - The color of the input text
+ * @param {string} props.formClassName - Additional class name for the form element
+ * @param {string} props.backgroundColor - The background color of the input
+ * @param {string} props.inputClass - Additional class name for the input element
+ * @param {boolean} props.fullWidth - Whether the input should take full width
+ * @param {React.Ref<HTMLInputElement>} ref - Ref forwarded to the input element
+ * @returns {JSX.Element} The rendered Input component
  */
@@ -37,0 +29,0 @@ declare const TextInput: import("react").ForwardRefExoticComponent<Omit<InputType, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

dist/components/loaders/BarLoader/BarLoader.d.ts

@@ -5,5 +5,6 @@ type BarLoaderType = {
     color?: string;
+    rounded?: boolean;
 };
-declare const BarLoader: ({ width, height, color, }: BarLoaderType) => import("react/jsx-runtime").JSX.Element;
+declare const BarLoader: ({ width, height, rounded, color, }: BarLoaderType) => import("react/jsx-runtime").JSX.Element;
 export default BarLoader;
 //# sourceMappingURL=BarLoader.d.ts.map

dist/components/loaders/CircleLoader/CircleLoader.d.ts

@@ -15,4 +15,19 @@ type LoaderProps = {
 };
+/**
+ * CircleLoader component
+ *
+ * A customizable circular loading indicator.
+ *
+ * @component
+ * @param {Object} props - The component props
+ * @param {number} [props.size=50] - The diameter of the loader in pixels
+ * @param {string} [props.color="blue"] - The color of the dynamic loading portion
+ * @param {string} [props.containerColor=colors.blue[100]] - The color of the static base circle
+ * @returns {React.ReactElement} A circular loader component
+ *
+ * @example
+ * <CircleLoader size={60} color="red" containerColor="#f0f0f0" />
+ */
 declare const CircleLoader: ({ size, color, containerColor, }: LoaderProps) => import("react/jsx-runtime").JSX.Element;
 export default CircleLoader;
 //# sourceMappingURL=CircleLoader.d.ts.map

dist/components/loaders/ScaleLoader/ScaleLoader.d.ts

@@ -1,7 +0,19 @@
-type LoaderProps = {
+import React from "react";
+type ScaleLoaderProps = {
     size?: number;
     color?: string;
 };
-declare const ScaleLoader: ({ size, color }: LoaderProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * ScaleLoader is a functional React component that displays a loading animation
+ * using a series of bars that scale in height. The component is customizable
+ * in terms of size and color.
+ *
+ * @component
+ * @param {object} props - The properties for the ScaleLoader component.
+ * @param {number} [props.size=20] - The size of the bars in pixels. Defaults to 20.
+ * @param {string} [props.color=colors.blue[500]] - The background color of the bars.
+ * @returns {JSX.Element} A styled loading animation with scaling bars.
+ */
+declare const ScaleLoader: React.FC<ScaleLoaderProps>;
 export default ScaleLoader;
 //# sourceMappingURL=ScaleLoader.d.ts.map

dist/components/modal/ModalPanel.d.ts

 import React from "react";
-import { StackType } from "../Stack/Stack";
+import { StackType } from "../../types/sui";
 export type ModalPanelType = {
@@ -40,5 +40,6 @@ /**
     align?: StackType["align"];
+    spacing?: StackType["spacing"];
 };
-declare const MPl: ({ size, children, transition, className, style, backgroundColor, align, }: ModalPanelType) => import("react/jsx-runtime").JSX.Element;
-export default MPl;
+declare const ModalPanel: ({ size, children, transition, className, style, backgroundColor, align, spacing, }: ModalPanelType) => import("react/jsx-runtime").JSX.Element;
+export default ModalPanel;
 //# sourceMappingURL=ModalPanel.d.ts.map

dist/components/modal/ModalTitle.d.ts

 import React from "react";
-import { BoxProps } from "../../types";
-interface ModalTitleType extends BoxProps {
+import { BoxType } from "../../types/sui";
+interface ModalTitleType extends BoxType {
     /**
@@ -5,0 +5,0 @@ * Model title text.

dist/components/Stack/Stack.d.ts

@@ -1,32 +0,2 @@
-import React from "react";
-import { BoxType } from "../../types";
-import { SizeVariantType } from "../../types/fun";
-export interface StackType extends BoxType {
-    children?: React.ReactNode;
-    /**
-     * Defines the padding inside the Stack component.
-     * Accepts any valid CSS padding value (e.g., "8px", "1rem", "10px 20px").
-     */
-    padding?: string;
-    /**
-     * Defines the margin outside the Stack component.
-     * Accepts any valid CSS margin value (e.g., "8px", "1rem", "10px 20px").
-     */
-    margin?: string;
-    /**
-     * Specifies the alignment direction of the Stack component's children.
-     * `vertical` for stacking items one above the other (column),
-     * `horizontal` for stacking items side by side (row).
-     */
-    align?: "vertical" | "horizontal";
-    /**
-     * Controls the spacing (gap) between child elements within the Stack component.
-     * Accepts predefined sizes: "sm" (small), "md" (medium), "lg" (large), "xl" (extra-large), "2xl" (2 times extra-large), "3xl" (3 times extra-large).
-     */
-    spacing?: SizeVariantType;
-    /**
-     * Enables wrapping for items if they exceed the available space in a row layout.
-     */
-    wrap?: boolean;
-}
+import { StackType } from "../../types/sui";
 /**
@@ -58,4 +28,4 @@ * A layout component that arranges its children in a vertical or horizontal stack with configurable spacing.
  */
-declare const Stack: React.ForwardRefExoticComponent<Omit<StackType, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Stack: import("react").ForwardRefExoticComponent<Omit<StackType, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export default Stack;
 //# sourceMappingURL=Stack.d.ts.map

dist/components/Switch/Switch.d.ts

@@ -26,3 +26,3 @@ type SwitchType = {
      */
-    checked?: boolean;
+    checked: boolean;
     /**
@@ -37,4 +37,4 @@ * Optional class name for custom styling.
 };
-declare const Sw: ({ color, checkedColor, size, onSwitch, className, checked, disabled, }: SwitchType) => import("react/jsx-runtime").JSX.Element;
-export default Sw;
+declare const Switch: ({ color, checkedColor, size, onSwitch, className, checked, disabled, }: SwitchType) => import("react/jsx-runtime").JSX.Element;
+export default Switch;
 //# sourceMappingURL=Switch.d.ts.map

dist/components/Tabs/Tabs.d.ts

 import { TabsListType } from "./TabsList";
+/**
+ * Tab component for creating tabbed interfaces.
+ *
+ * This component manages the state of active tab and renders TabsList and TabPanel components.
+ * It allows for customization of tab appearance and behavior through various props.
+ *
+ * @component
+ * @param {Object} props - The properties that define the Tab component's behavior and appearance.
+ * @param {ReactNode} props.children - The child elements, expected to be TabsHandle and TabPanel components.
+ * @param {'line' | 'enclosed' | 'enclosed-colored' | 'soft-rounded' | 'solid-rounded' | 'unstyled'} [props.variant='line'] - The visual variant of the tabs.
+ * @param {'light' | 'dark'} [props.mode] - The color mode of the tabs.
+ * @param {boolean} [props.fullWidth] - Whether the tabs should take up the full width of their container.
+ * @param {string} [props.backgroundColor] - The background color of the tabs.
+ * @param {string} [props.lineBorderColor] - The color of the line border for the 'line' variant.
+ * @returns {JSX.Element} The rendered Tab component.
+ */
 declare const Tab: ({ children, variant, mode, fullWidth, backgroundColor, lineBorderColor, }: TabsListType) => import("react/jsx-runtime").JSX.Element;
 export default Tab;
 //# sourceMappingURL=Tabs.d.ts.map

dist/components/Tabs/TabsHandle.d.ts

 import React from "react";
-/**
- * Type definition for TabsHandleType, representing the properties of a tab component.
- */
 type TabsHandleType = {
@@ -6,0 +3,0 @@ /**

dist/components/Tabs/TabsList.d.ts

 import React from "react";
-/**
- * Type definition for TabsListType, representing the properties of a list of tabs.
- */
 export type TabsListType = {
@@ -43,4 +40,7 @@ /**
 };
-declare const TabsList: ({ children, variant, backgroundColor, lineBorderColor, fullWidth, mode, }: TabsListType) => import("react/jsx-runtime").JSX.Element;
+declare const TabsList: {
+    ({ children, variant, backgroundColor, lineBorderColor, fullWidth, mode, }: TabsListType): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default TabsList;
 //# sourceMappingURL=TabsList.d.ts.map

dist/components/Toast/Toast.d.ts

@@ -1,4 +0,9 @@
-import { ToastType } from "../../types/fun";
-export type ToastVariant = "info" | "success" | "error" | "warning";
-export type ToastPositionType = "top-left" | "top-right" | "bottom-left" | "bottom-right";
+import { ToastType } from "../../types/sui";
+/**
+ * @typedef {Object} ToastFunctions
+ * @property {(message: string, options?: ToastOptions) => void} success - Display a success toast.
+ * @property {(message: string, options?: ToastOptions) => void} error - Display an error toast.
+ * @property {(message: string, options?: ToastOptions) => void} info - Display an info toast.
+ * @property {(message: string, options?: ToastOptions) => void} warning - Display a warning toast.
+ */
 declare let toast: ToastType;
@@ -5,0 +10,0 @@ declare const Toast: () => import("react/jsx-runtime").JSX.Element;

dist/context/useTabList.d.ts

@@ -1,2 +0,1 @@
-import { ContextProviderType } from "../types/local";
 type TabListContextType = {
@@ -10,3 +9,3 @@ onSwitch: (value: string) => void;
 type TabListProviderType = {
-    children: ContextProviderType["children"];
+    children: React.ReactNode;
     tabVariant: "line" | "solid";
@@ -13,0 +12,0 @@ mode: "light" | "dark";

dist/context/useTheme.d.ts

 import React from "react";
 import { Theme, ThemeContextType } from "../types/local";
+/**
+ * Custom hook to access the current theme context.
+ * @deprecated useTheme is deprecated and will be removed in the next major release.
+ * Use the `useTheme` hook from `styled-chroma` instead.
+ */
 export declare const useTheme: () => ThemeContextType | {
@@ -9,2 +14,7 @@ theme: any;
 };
+/**
+ * ThemeProvider component to wrap your application with the theme context.
+ * @deprecated ThemeProvider is deprecated and will be removed in the next major release.
+ * Use the `ThemeProvider` component from `styled-chroma` instead.
+ */
 declare const ThemeProvider: ({ children, theme: userTheme, }: {
@@ -11,0 +21,0 @@ children: React.ReactNode;

dist/index.d.ts

@@ -6,4 +6,6 @@ export { toast } from "./components/Toast/Toast";
 export { default as Box } from "./components/Box/Box";
+export { default as FlexBox } from "./components/Box/FlexBox";
 export { default as Icon } from "./components/Icon/Icon";
-export { default as ImagePicker } from "./components/ImagePicker/ImagePicker";
+export { default as HoverableIcon } from "./components/Icon/HoverableIcon";
+export { default as ImagePicker } from "./components/FilePicker/ImagePicker";
 export { default as TextInput } from "./components/Input/Input";
@@ -20,3 +22,2 @@ export { default as Stack } from "./components/Stack/Stack";
 export { default as Fab } from "./components/Fab/Fab";
-export { default as Tooltip } from "./components/Tooltip/Tooltip";
 export { default as Backdrop } from "./components/Backdrop/Backdrop";
@@ -27,8 +28,6 @@ export { default as Tabs } from "./components/Tabs/Tabs";
 export { default as BarLoader } from "./components/loaders/BarLoader/BarLoader";
-export { default as BounceLoader } from "./components/loaders/BounceLoader/BounceLoader";
 export { default as CircleLoader } from "./components/loaders/CircleLoader/CircleLoader";
-export { default as CircleRollerLoader } from "./components/loaders/CircleRollerLoader/CircleRollerLoader";
-export { default as FadeLoader } from "./components/loaders/FadeLoader/FadeLoader";
+export { default as CircularProgress } from "./components/loaders/CircleLoader/CircularProgress";
 export { default as ScaleLoader } from "./components/loaders/ScaleLoader/ScaleLoader";
-export { default as shouldForwardProps } from "./utils/is-prop-valid";
+export { default as PulseLoader } from "./components/loaders/PulseLoader/PulseLoader";
 export { useTheme } from "./context/useTheme";
@@ -35,0 +34,0 @@ export { default as BrowserRouter } from "./components/router/BrowserRouter";

dist/styles/action/styled.d.ts

@@ -1,15 +0,13 @@
-import { ButtonProps } from "../../types";
-export declare const Button: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
-    variant: ButtonProps["variant"];
-    radius: ButtonProps["radius"];
-    size: ButtonProps["size"];
-    outlinebordercolor: ButtonProps["outlineBorderColor"];
-    backgroundcolor: ButtonProps["backgroundColor"];
-    onHoverBackgroundSolid: ButtonProps["onHoverBackgroundSolid"];
-    onHoverBackgroundOutline: ButtonProps["onHoverBackgroundOutline"];
-    onHoverBackgroundGhost: ButtonProps["onHoverBackgroundGhost"];
-    onHoverBackgroundLight: ButtonProps["onHoverBackgroundLight"];
-    width: ButtonProps["width"];
-    mode: ButtonProps["mode"];
-}>> & string;
+import { ButtonProps } from "../../types/sui";
+import { IStyleFab } from "../../types/istyle";
+export declare const ButtonSui: import("react").ForwardRefExoticComponent<ButtonProps & {
+    theme?: {
+        [x: string]: any;
+    };
+} & import("react").HTMLAttributes<HTMLElement> & Record<string, any>>;
+export declare const FabSui: import("react").ForwardRefExoticComponent<IStyleFab & {
+    theme?: {
+        [x: string]: any;
+    };
+} & import("react").HTMLAttributes<HTMLElement> & Record<string, any>>;
 //# sourceMappingURL=styled.d.ts.map

dist/styles/feedback/styled.d.ts

@@ -1,125 +0,42 @@
-import { ModalPanelType } from "../../components/modal/ModalPanel";
-import { ToastOptionsType, ToastPositionType, ToastVariant } from "../../types/fun";
-export declare const Drop: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, {
-    open: boolean;
-    centerContent: boolean;
-    "background-color": string | any;
-    "glass-effect": number | any;
-}>> & string;
-export declare const ModalPanel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    size: ModalPanelType["size"];
-    transition: ModalPanelType["transition"];
-    "background-color": string | any;
-    align: ModalPanelType["align"];
-}>> & string;
-export declare const ModalTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
-export declare const ModalContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "padding" | "margin" | "centered" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "border" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "direction" | "wrap" | "spacing"> & {
-    padding?: import("../../types").BoxType["padding"];
-    margin?: import("../../types").BoxType["margin"];
-    centered?: import("../../types").BoxType["centered"];
-    paddingTop?: import("../../types").BoxType["paddingTop"];
-    paddingBottom?: import("../../types").BoxType["paddingBottom"];
-    paddingLeft?: import("../../types").BoxType["paddingLeft"];
-    paddingRight?: import("../../types").BoxType["paddingRight"];
-    border?: import("../../types").BoxType["border"];
-    marginTop?: import("../../types").BoxType["marginTop"];
-    marginBottom?: import("../../types").BoxType["marginBottom"];
-    marginLeft?: import("../../types").BoxType["marginLeft"];
-    marginRight?: import("../../types").BoxType["marginRight"];
-    direction?: import("../../types").BoxType["direction"];
-    wrap?: import("../../types").BoxType["wrap"];
-    spacing?: import("../../types").BoxType["spacing"];
-}, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, {
-    space?: number;
-}>> & string;
-export declare const ModalFooter: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    space?: number;
-    position?: "right" | "left";
-}>> & string;
-export declare const StyledToast: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "padding" | "margin" | "centered" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "border" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "direction" | "wrap" | "spacing"> & {
-    padding?: import("../../types").BoxType["padding"];
-    margin?: import("../../types").BoxType["margin"];
-    centered?: import("../../types").BoxType["centered"];
-    paddingTop?: import("../../types").BoxType["paddingTop"];
-    paddingBottom?: import("../../types").BoxType["paddingBottom"];
-    paddingLeft?: import("../../types").BoxType["paddingLeft"];
-    paddingRight?: import("../../types").BoxType["paddingRight"];
-    border?: import("../../types").BoxType["border"];
-    marginTop?: import("../../types").BoxType["marginTop"];
-    marginBottom?: import("../../types").BoxType["marginBottom"];
-    marginLeft?: import("../../types").BoxType["marginLeft"];
-    marginRight?: import("../../types").BoxType["marginRight"];
-    direction?: import("../../types").BoxType["direction"];
-    wrap?: import("../../types").BoxType["wrap"];
-    spacing?: import("../../types").BoxType["spacing"];
-}, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, {
-    position: ToastPositionType;
-    "show-toast": boolean;
-    transition: ToastOptionsType["transition"];
-}>> & string;
-export declare const ContentWrap: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "padding" | "margin" | "centered" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "border" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "direction" | "wrap" | "spacing"> & {
-    padding?: import("../../types").BoxType["padding"];
-    margin?: import("../../types").BoxType["margin"];
-    centered?: import("../../types").BoxType["centered"];
-    paddingTop?: import("../../types").BoxType["paddingTop"];
-    paddingBottom?: import("../../types").BoxType["paddingBottom"];
-    paddingLeft?: import("../../types").BoxType["paddingLeft"];
-    paddingRight?: import("../../types").BoxType["paddingRight"];
-    border?: import("../../types").BoxType["border"];
-    marginTop?: import("../../types").BoxType["marginTop"];
-    marginBottom?: import("../../types").BoxType["marginBottom"];
-    marginLeft?: import("../../types").BoxType["marginLeft"];
-    marginRight?: import("../../types").BoxType["marginRight"];
-    direction?: import("../../types").BoxType["direction"];
-    wrap?: import("../../types").BoxType["wrap"];
-    spacing?: import("../../types").BoxType["spacing"];
-}, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string;
-export declare const ToastContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "padding" | "margin" | "centered" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "border" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "direction" | "wrap" | "spacing"> & {
-    padding?: import("../../types").BoxType["padding"];
-    margin?: import("../../types").BoxType["margin"];
-    centered?: import("../../types").BoxType["centered"];
-    paddingTop?: import("../../types").BoxType["paddingTop"];
-    paddingBottom?: import("../../types").BoxType["paddingBottom"];
-    paddingLeft?: import("../../types").BoxType["paddingLeft"];
-    paddingRight?: import("../../types").BoxType["paddingRight"];
-    border?: import("../../types").BoxType["border"];
-    marginTop?: import("../../types").BoxType["marginTop"];
-    marginBottom?: import("../../types").BoxType["marginBottom"];
-    marginLeft?: import("../../types").BoxType["marginLeft"];
-    marginRight?: import("../../types").BoxType["marginRight"];
-    direction?: import("../../types").BoxType["direction"];
-    wrap?: import("../../types").BoxType["wrap"];
-    spacing?: import("../../types").BoxType["spacing"];
-}, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string;
-export declare const CloseIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "padding" | "margin" | "centered" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "border" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "direction" | "wrap" | "spacing"> & {
-    padding?: import("../../types").BoxType["padding"];
-    margin?: import("../../types").BoxType["margin"];
-    centered?: import("../../types").BoxType["centered"];
-    paddingTop?: import("../../types").BoxType["paddingTop"];
-    paddingBottom?: import("../../types").BoxType["paddingBottom"];
-    paddingLeft?: import("../../types").BoxType["paddingLeft"];
-    paddingRight?: import("../../types").BoxType["paddingRight"];
-    border?: import("../../types").BoxType["border"];
-    marginTop?: import("../../types").BoxType["marginTop"];
-    marginBottom?: import("../../types").BoxType["marginBottom"];
-    marginLeft?: import("../../types").BoxType["marginLeft"];
-    marginRight?: import("../../types").BoxType["marginRight"];
-    direction?: import("../../types").BoxType["direction"];
-    wrap?: import("../../types").BoxType["wrap"];
-    spacing?: import("../../types").BoxType["spacing"];
-}, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, {
-    type: ToastVariant | "warning";
-}>> & string;
+import { IStyleDrop, IStyleModalFooter, IStyleModalPanel, IStyleToast, IStyleToastCloseIcon } from "../../types/istyle";
+export declare const DropSui: import("react").ForwardRefExoticComponent<IStyleDrop & {
+    theme?: {
+        [x: string]: any;
+    };
+} & import("react").HTMLAttributes<HTMLElement> & Record<string, any>>;
+export declare const ModalPanelSui: import("react").ForwardRefExoticComponent<IStyleModalPanel & {
+    theme?: {
+        [x: string]: any;
+    };
+} & import("react").HTMLAttributes<HTMLElement> & Record<string, any>>;
+export declare const ModalContent: import("react").ForwardRefExoticComponent<import("../../types/istyle").IStyleBox & {
+    theme?: {
+        [x: string]: any;
+    };
+} & import("react").HTMLAttributes<HTMLElement> & Record<string, any>>;
+export declare const ModalFooter: import("react").ForwardRefExoticComponent<IStyleModalFooter & {
+    theme?: {
+        [x: string]: any;
+    };
+} & import("react").HTMLAttributes<HTMLElement> & Record<string, any>>;
+export declare const StyledToast: import("react").ForwardRefExoticComponent<IStyleToast & {
+    theme?: {
+        [x: string]: any;
+    };
+} & import("react").HTMLAttributes<HTMLElement> & Record<string, any>>;
+export declare const ContentWrap: import("react").ForwardRefExoticComponent<import("../../types/istyle").IStyleBox & {
+    theme?: {
+        [x: string]: any;
+    };
+} & import("react").HTMLAttributes<HTMLElement> & Record<string, any>>;
+export declare const ToastContent: import("react").ForwardRefExoticComponent<import("../../types/istyle").IStyleBox & {
+    theme?: {
+        [x: string]: any;
+    };
+} & import("react").HTMLAttributes<HTMLElement> & Record<string, any>>;
+export declare const CloseIcon: import("react").ForwardRefExoticComponent<IStyleToastCloseIcon & {
+    theme?: {
+        [x: string]: any;
+    };
+} & import("react").HTMLAttributes<HTMLElement> & Record<string, any>>;
 //# sourceMappingURL=styled.d.ts.map

dist/styles/global.d.ts

@@ -1,2 +0,6 @@
-export declare const FixedBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const FixedBox: import("react").ForwardRefExoticComponent<{
+    theme?: {
+        [x: string]: any;
+    };
+} & import("react").HTMLAttributes<HTMLElement> & Record<string, any>>;
 //# sourceMappingURL=global.d.ts.map

dist/styles/input/styled.d.ts

@@ -1,11 +0,15 @@
-import { InputType } from "../../types";
-export declare const InputForm: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("../../types").BoxType, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, {
+import { DivProps } from "styled-chroma";
+import { InputType } from "../../types/sui";
+import { IStyleCheckbox, IStyleChecked, IStyleSwitch, IStyleSwitchHandle } from "../../types/istyle";
+export declare const InputForm: import("react").ForwardRefExoticComponent<DivProps & {
     width: string | any;
-}>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("../../types").BoxType, "ref"> & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
-export declare const Input: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+} & {
+    theme?: {
+        [x: string]: any;
+    };
+} & import("react").HTMLAttributes<HTMLElement> & Record<string, any>>;
+interface IStyle extends InputType {
     variant: InputType["variant"];
     radius: InputType["radius"];
-    outlinebordercolor: string | any;
+    outLineBorderColor: InputType["outLineBorderColor"];
     focusColor: InputType["focusColor"];
@@ -18,32 +22,29 @@ focusBorderColor: InputType["focusBorderColor"];
     mode: InputType["mode"];
-}>> & string;
-export declare const Switch: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("../../types").BoxType, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, {
-    width: string;
-    height: string;
-    checked: boolean;
-    checkedColor: string;
-    color: string;
-    disabled: boolean | any;
-}>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("../../types").BoxType, "ref"> & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
-export declare const SwitchHandle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    height: string;
-    checked: boolean;
-    switchWidth: string;
-}>> & string;
-export declare const CheckBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    rounded: boolean | any;
-    size: number;
-    disabled: boolean | any;
-    borderColor: string | any;
-    checked: boolean;
-}>> & string;
-export declare const Checked: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("../../types").BoxType, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, {
-    color: string;
-    rounded: boolean | any;
-    size: number;
-}>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("../../types").BoxType, "ref"> & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
+}
+export declare const Input: import("react").ForwardRefExoticComponent<IStyle & {
+    theme?: {
+        [x: string]: any;
+    };
+} & import("react").HTMLAttributes<HTMLElement> & Record<string, any>>;
+export declare const Checker: import("react").ForwardRefExoticComponent<IStyleCheckbox & {
+    theme?: {
+        [x: string]: any;
+    };
+} & import("react").HTMLAttributes<HTMLElement> & Record<string, any>>;
+export declare const Checked: import("react").ForwardRefExoticComponent<IStyleChecked & {
+    theme?: {
+        [x: string]: any;
+    };
+} & import("react").HTMLAttributes<HTMLElement> & Record<string, any>>;
+export declare const SwitchSui: import("react").ForwardRefExoticComponent<IStyleSwitch & {
+    theme?: {
+        [x: string]: any;
+    };
+} & import("react").HTMLAttributes<HTMLElement> & Record<string, any>>;
+export declare const SwitchHandle: import("react").ForwardRefExoticComponent<IStyleSwitchHandle & {
+    theme?: {
+        [x: string]: any;
+    };
+} & import("react").HTMLAttributes<HTMLElement> & Record<string, any>>;
+export {};
 //# sourceMappingURL=styled.d.ts.map

dist/styles/layout/styled.d.ts

@@ -1,76 +0,23 @@
-import { StackType } from "../../components/Stack/Stack";
-import { BoxType } from "../../types";
-export declare const BoxSui: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    padding?: BoxType["padding"];
-    margin?: BoxType["margin"];
-    centered?: BoxType["centered"];
-    paddingTop?: BoxType["paddingTop"];
-    paddingBottom?: BoxType["paddingBottom"];
-    paddingLeft?: BoxType["paddingLeft"];
-    paddingRight?: BoxType["paddingRight"];
-    border?: BoxType["border"];
-    marginTop?: BoxType["marginTop"];
-    marginBottom?: BoxType["marginBottom"];
-    marginLeft?: BoxType["marginLeft"];
-    marginRight?: BoxType["marginRight"];
-    direction?: BoxType["direction"];
-    wrap?: BoxType["wrap"];
-    spacing?: BoxType["spacing"];
-}>> & string;
-export declare const CardSui: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "padding" | "margin" | "centered" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "border" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "direction" | "wrap" | "spacing"> & {
-    padding?: BoxType["padding"];
-    margin?: BoxType["margin"];
-    centered?: BoxType["centered"];
-    paddingTop?: BoxType["paddingTop"];
-    paddingBottom?: BoxType["paddingBottom"];
-    paddingLeft?: BoxType["paddingLeft"];
-    paddingRight?: BoxType["paddingRight"];
-    border?: BoxType["border"];
-    marginTop?: BoxType["marginTop"];
-    marginBottom?: BoxType["marginBottom"];
-    marginLeft?: BoxType["marginLeft"];
-    marginRight?: BoxType["marginRight"];
-    direction?: BoxType["direction"];
-    wrap?: BoxType["wrap"];
-    spacing?: BoxType["spacing"];
-}, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, {
-    centerContent?: boolean;
-    backgroundcolor: string | any;
-    borderColor: string | any;
-    space: number | any;
-    cardShadow: string | any;
-}>> & string;
-export declare const StackSui: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "padding" | "margin" | "centered" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "border" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "direction" | "wrap" | "spacing"> & {
-    padding?: BoxType["padding"];
-    margin?: BoxType["margin"];
-    centered?: BoxType["centered"];
-    paddingTop?: BoxType["paddingTop"];
-    paddingBottom?: BoxType["paddingBottom"];
-    paddingLeft?: BoxType["paddingLeft"];
-    paddingRight?: BoxType["paddingRight"];
-    border?: BoxType["border"];
-    marginTop?: BoxType["marginTop"];
-    marginBottom?: BoxType["marginBottom"];
-    marginLeft?: BoxType["marginLeft"];
-    marginRight?: BoxType["marginRight"];
-    direction?: BoxType["direction"];
-    wrap?: BoxType["wrap"];
-    spacing?: BoxType["spacing"];
-}, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, {
-    spacing?: StackType["spacing"];
-    align?: StackType["align"];
-    wrap: StackType["wrap"];
-}>> & string;
-export declare const TabHandle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
-    iscurrent: boolean;
-    activeColor: string | any;
-    variant: "line" | "solid";
-    inactivecolor: string;
-    disabled: boolean;
-    "full-width": boolean | any;
-}>> & string;
+import { IStyleBox, IStyleStack, IStyleTabHandle } from "../../types/istyle";
+import { CardProps } from "../../types/sui";
+export declare const BoxSui: import("react").ForwardRefExoticComponent<IStyleBox & {
+    theme?: {
+        [x: string]: any;
+    };
+} & import("react").HTMLAttributes<HTMLElement> & Record<string, any>>;
+export declare const StackSui: import("react").ForwardRefExoticComponent<IStyleStack & {
+    theme?: {
+        [x: string]: any;
+    };
+} & import("react").HTMLAttributes<HTMLElement> & Record<string, any>>;
+export declare const CardSui: import("react").ForwardRefExoticComponent<CardProps & {
+    theme?: {
+        [x: string]: any;
+    };
+} & import("react").HTMLAttributes<HTMLElement> & Record<string, any>>;
+export declare const TabHandle: import("react").ForwardRefExoticComponent<IStyleTabHandle & {
+    theme?: {
+        [x: string]: any;
+    };
+} & import("react").HTMLAttributes<HTMLElement> & Record<string, any>>;
 //# sourceMappingURL=styled.d.ts.map

dist/styles/utility/styled.d.ts

@@ -1,21 +0,41 @@
-export declare const FilePicker: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("../../types").BoxType, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("../../types").BoxType, "ref"> & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
-export declare const UploadIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("../../types").BoxType, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("../../types").BoxType, "ref"> & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
-export declare const SelectedImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>> & string;
-export declare const SelectedImageContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("../../types").BoxType, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("../../types").BoxType, "ref"> & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
-export declare const ImagesContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("../../types").BoxType, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("../../types").BoxType, "ref"> & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
-export declare const ExtraImagePicker: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("../../types").BoxType, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("../../types").BoxType, "ref"> & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
-export declare const Picker_ImageContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("../../types").BoxType, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("../../types").BoxType, "ref"> & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
-export declare const ImageRemover: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const FilePicker: import("react").ForwardRefExoticComponent<Omit<import("../../types/sui").BoxType, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: {
+        [x: string]: any;
+    };
+} & import("react").HTMLAttributes<HTMLElement> & Record<string, any>>;
+export declare const UploadIcon: import("react").ForwardRefExoticComponent<Omit<import("../../types/sui").BoxType, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: {
+        [x: string]: any;
+    };
+} & import("react").HTMLAttributes<HTMLElement> & Record<string, any>>;
+export declare const SelectedImage: import("react").ForwardRefExoticComponent<{
+    theme?: {
+        [x: string]: any;
+    };
+} & import("react").HTMLAttributes<HTMLElement> & Record<string, any>>;
+export declare const SelectedImageContainer: import("react").ForwardRefExoticComponent<Omit<import("../../types/sui").BoxType, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: {
+        [x: string]: any;
+    };
+} & import("react").HTMLAttributes<HTMLElement> & Record<string, any>>;
+export declare const ImagesContainer: import("react").ForwardRefExoticComponent<Omit<import("../../types/sui").BoxType, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: {
+        [x: string]: any;
+    };
+} & import("react").HTMLAttributes<HTMLElement> & Record<string, any>>;
+export declare const ExtraImagePicker: import("react").ForwardRefExoticComponent<Omit<import("../../types/sui").BoxType, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: {
+        [x: string]: any;
+    };
+} & import("react").HTMLAttributes<HTMLElement> & Record<string, any>>;
+export declare const Picker_ImageContainer: import("react").ForwardRefExoticComponent<Omit<import("../../types/sui").BoxType, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: {
+        [x: string]: any;
+    };
+} & import("react").HTMLAttributes<HTMLElement> & Record<string, any>>;
+export declare const ImageRemover: import("react").ForwardRefExoticComponent<{
+    theme?: {
+        [x: string]: any;
+    };
+} & import("react").HTMLAttributes<HTMLElement> & Record<string, any>>;
 //# sourceMappingURL=styled.d.ts.map

dist/types/local.d.ts

@@ -10,3 +10,5 @@ declare type Theme = {
 };
-
+/**
+ * @deprecated
+ */
 declare type ThemeContextType = {
@@ -35,2 +37,3 @@ /**
    * @type {`light` | `dark`}
+   * @deprecated
    */
@@ -37,0 +40,0 @@ mode: "light" | "dark";

dist/utils/auth/Authenticate.d.ts

@@ -10,2 +10,3 @@ import React from "react";
     RedirectUrl: string;
+    isAuthenticated: boolean;
 };
@@ -22,4 +23,4 @@ /**
  */
-declare const AuthenticateSession: ({ children, RedirectUrl, }: AuthenticateSessionProps) => import("react/jsx-runtime").JSX.Element;
+declare const AuthenticateSession: ({ children, RedirectUrl, isAuthenticated, }: AuthenticateSessionProps) => import("react/jsx-runtime").JSX.Element;
 export default AuthenticateSession;
 //# sourceMappingURL=Authenticate.d.ts.map

dist/utils/position.d.ts

@@ -1,3 +0,2 @@
-import { ToastPositionType } from "../types/fun";
-import { FloatProps } from "../components/Fab/Fab";
+import { FloatProps, ToastPositionType } from "../types/sui";
 export declare const getFloatPosition: (position: FloatProps["position"]) => {
@@ -4,0 +3,0 @@ top: string;

package.json

 {
   "name": "secptrum-ui",
-  "version": "1.1.29",
-  "description": "**SecptrumUI** is a customizable and modern UI component library built with `styled-components`. Designed to help developers quickly build beautiful and responsive web applications, SecptrumUI offers a range of components that are easy to use and adapt to any project.",
+  "version": "1.1.32",
+  "description": "**SecptrumUI** A React component library with adaptable, responsive designs using `styled-chroma`",
   "homepage": "https://secptrumui.vercel.app",
   "repository": {
     "type": "git",
-    "url": "https://github.com/Kingrashy12/secptrum-ui"
+    "url": "https://github.com/SecptrumLab/secptrum-ui"
   },
   "bugs": {
-    "url": "https://github.com/Kingrashy12/secptrum-ui/issues"
+    "url": "https://github.com/SecptrumLab/secptrum-ui/issues"
   },
@@ -32,7 +32,7 @@ "main": "dist/secptrum-ui.cjs.js",
     "postbuild": "copyfiles -u 1 src/types/**/* dist/",
-    "setup-next": "node ./scripts/next-setup.js"
+    "prerelease": "npx tsc --noEmit",
+    "release": "npm version patch && git push origin master --follow-tags",
+    "release-org": "npm version patch && git push org-origin master --follow-tags",
+    "typecheck": "tsc --noEmit"
   },
-  "bin": {
-    "secptrum-setup": "./scripts/next-setup.js"
-  },
   "keywords": [
@@ -54,11 +54,10 @@ "react",
   "dependencies": {
-    "commander": "^12.1.0",
-    "deepmerge": "^4.3.1",
-    "fs-extra": "^11.2.0",
     "jwt-decode": "^4.0.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
-    "styled-components": "^6.1.13"
+    "styled-chroma": "^0.1.61"
   },
+  "peerDependencies": {
+    "react": ">= 18.0.0",
+    "react-dom": ">= 18.0.0"
+  },
   "devDependencies": {
@@ -71,4 +70,2 @@ "@rollup/plugin-babel": "^6.0.4",
     "@types/react": "^18.3.5",
-    "@types/styled-components": "^5.1.34",
-    "babel-plugin-styled-components": "^2.1.4",
     "copyfiles": "^2.4.1",
@@ -79,5 +76,5 @@ "rollup": "^2.79.2",
     "rollup-plugin-visualizer": "^5.12.0",
-    "typescript": "^5.5.4",
-    "next-setup": "file:./scripts/next-setup.js"
+    "tslib": "^2.7.0",
+    "typescript": "^5.5.4"
   }
 }

README.md

 <div align="center">
-  <img src="https://res.cloudinary.com/dv4mozbaz/image/upload/v1726231417/secptrum-logo_1_olpgr4.png" />
-  <b><p>SecptrumUI</p></b>
+  <img src="https://github.com/SecptrumLab/secptrum-ui/blob/main/images/secptrumui-logo.png" alt="SecptrumUI Logo" width="200" height="200" />
 </div>
@@ -8,3 +7,3 @@
 
-**SecptrumUI** is a customizable and modern UI component library for react, built with `styled-components`. Designed to help developers quickly build beautiful and responsive web applications, SecptrumUI offers a range of components that are easy to use and adapt to any project.
+**SecptrumUI** A React component library with adaptable, responsive designs using `styled-chroma`.
 
@@ -18,3 +17,2 @@ ## Table of Contents
 - [Customization](#customization)
-- [CLI Tool](#cli-tool)
 - [Contributing](#contributing)
@@ -24,3 +22,3 @@
 
-- 🎨 **Customizable**: Easily customize components using `styled-components` for advanced styling.
+- 🎨 **Customizable**: Easily customize components using `styled-chroma` for advanced styling.
 - 🧩 **Modular**: Import only the components you need, reducing bundle size.
@@ -33,2 +31,13 @@ - 💻 **Responsive**: All components are designed to be fully responsive.
 
+### Prerequisites
+
+Before installing SecptrumUI, ensure you have:
+
+- React `>= 18.0.0`
+- ReactDOM `>= 18.0.0`
+
+installed in your project.
+
+### Install SecptrumUI
+
 To install SecptrumUI, you can use npm or yarn:
@@ -38,6 +47,6 @@
 # Using npm
-npm install secptrum-ui styled-components react-icons
+npm install secptrum-ui
 
 # Using yarn
-yarn add secptrum-ui styled-components react-icons
+yarn add secptrum-ui
 ```
@@ -76,3 +85,3 @@
 - [Input](#Input): Customizable input fields with validation support.
-- [Dropdown](#Dropdown): A dropdown menu for navigation or selection options.
+- [Tabs](#Tabs): A tabs component for navigation or selection options.
 - [Stack](#Stack): A layout component for arranging child elements with spacing.
@@ -98,23 +107,24 @@ - [Box](#Box): A versatile container component for layout and styling purposes.
 
-For a full list of components and their usage, please refer to the [documentation](https://secptrumui.vercel.app/).
+## Tabs
 
+- `Tabs`: A tabs component that allows users to switch between different views or sections of content. The Tabs component provides a clean and intuitive interface for navigating between different parts of an application.
+
+For a full list of components and their usage, please refer to the [documentation](https://secptrumui.vercel.app//docs/components/action/button).
+
 ## Coutomization
 
-SecptrumUI leverages `styled-components` for customization. You can adjust the appearance of components by using the `styled-components` API to create your own styles.
+SecptrumUI leverages `styled-chroma` for customization. You can adjust the appearance of components by using the `styled-chroma` API to create your own styles.
 
-- **`Note:`** When customizing with styled-components, you might encounter issues where your custom styles don't apply due to the component's default styles having higher specificity. In such cases, you can use `&&` to increase the specificity of your styles.
-
 ### Example
 
 ```bash
-import styled from "styled-components";
+import { styled } from "styled-chroma";
 import { Button } from 'secptrum-ui';
 
 // Customizing the Button component
+
 const CustomButton = styled(Button)`
-  && {
-    background-color: #007bff; /* Override background color */
-    color: white;  # /* Override text color */
-    padding: 12px 24px; # /* Add custom padding */
-  }
+    background-color: #007bff;
+    color: white;
+    padding: 12px 24px;
 `;
@@ -133,83 +143,4 @@
 
-## CLI Tool
+## Contributing
 
-SecptrumUI includes a CLI tool to help set up your Next.js project for use with `styled-components`. This tool automatically configures your project with the necessary files and settings.
-
-- **_Note:_**
-  This setup is specific to Next.js and provides detailed instructions for configuration.
-
-### Setup the CLI Tool Locally
-
-1. **Install Dependencies**
-
-   First, ensure you have the `secptrum-ui` and `styled-components` packages installed:
-
-   ```bash
-   npm install secptrum-ui styled-components
-   ```
-
-2. **Run the Setup Command**
-
-Navigate to your project directory and run the setup script:
-
-```bash
- npx secptrum-setup setup
-```
-
-This command will perform the following actions:
-
-- If the `src` Directory Exists: Creates a `lib/registry.tsx` (or `lib/registry.js` for JavaScript) inside the `src` directory if it doesn't already exist.
-
-- If the `src` Directory Does Not Exist: Creates `lib/registry.tsx` (or `lib/registry.js`) in the root directory.
-
-3. **Enable styled-components in next.config.js.**
-
-```bash
-
-module.exports = {
-  compiler: {
-    styledComponents: true,
-  },
-}
-
-```
-
-4. **Wrap the children of the root layout with the style registry component:**
-
-- **Typescript:**
-
-```bash
-import StyledComponentsRegistry from './lib/registry'
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  return (
-    <html>
-      <body>
-        <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
-      </body>
-    </html>
-  )
-}
-```
-
-- **Javascript:**
-
-```bash
-import StyledComponentsRegistry from './lib/registry'
-
-export default function RootLayout({ children }) {
-  return (
-    <html>
-      <body>
-        <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
-      </body>
-    </html>
-  )
-}
-```
-
-These steps ensure that your project is properly configured for styled-components with Next.js, following the latest guidelines.
+We welcome contributions to improve SecptrumUI! Please see our [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines on how to submit improvements and bug fixes.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Dependency count

5

decreased by-37.5%

Dev dependency count

13

decreased by-13.33%

Number of package files

133

increased by4.72%

Lines of code

5874

increased by0.17%

Number of low supply chain risk alerts

4

decreased by-60%

Worsened metrics

Total package byte prevSize

19717057

decreased by-0.66%

Number of lines in readme file

139

decreased by-33.17%

Dependency changes

• + Addedstyled-chroma@^0.1.61

• + Addedreact@19.0.0(transitive)

• + Addedreact-dom@19.0.0(transitive)

• + Addedscheduler@0.25.0(transitive)

• - Removedcommander@^12.1.0

• - Removeddeepmerge@^4.3.1

• - Removedfs-extra@^11.2.0

• - Removedreact@^18.3.1

• - Removedreact-dom@^18.3.1

• - Removedstyled-components@^6.1.13

• - Removed@emotion/is-prop-valid@1.2.2(transitive)

• - Removed@emotion/memoize@0.8.1(transitive)

• - Removed@emotion/unitless@0.8.1(transitive)

• - Removed@types/stylis@4.2.5(transitive)

• - Removedcamelize@1.0.1(transitive)

• - Removedcommander@12.1.0(transitive)

• - Removedcss-color-keywords@1.0.0(transitive)

• - Removedcss-to-react-native@3.2.0(transitive)

• - Removedcsstype@3.1.3(transitive)

• - Removeddeepmerge@4.3.1(transitive)

• - Removedfs-extra@11.2.0(transitive)

• - Removedgraceful-fs@4.2.11(transitive)

• - Removedjs-tokens@4.0.0(transitive)

• - Removedjsonfile@6.1.0(transitive)

• - Removedloose-envify@1.4.0(transitive)

• - Removednanoid@3.3.8(transitive)

• - Removedpicocolors@1.1.1(transitive)

• - Removedpostcss@8.4.38(transitive)

• - Removedpostcss-value-parser@4.2.0(transitive)

• - Removedreact@18.3.1(transitive)

• - Removedreact-dom@18.3.1(transitive)

• - Removedscheduler@0.23.2(transitive)

• - Removedshallowequal@1.1.0(transitive)

• - Removedsource-map-js@1.2.1(transitive)

• - Removedstyled-components@6.1.13(transitive)

• - Removedstylis@4.3.2(transitive)

• - Removedtslib@2.6.2(transitive)

• - Removeduniversalify@2.0.1(transitive)