secptrum-ui - npm Package Compare versions

Comparing version 1.1.70 to 1.1.71

dist/components/Backdrop/Backdrop.d.ts

 "use client";
-import React from 'react';
-interface DropType {
-    /**
-     * The content to be rendered inside the drop component.
-     */
-    children?: React.ReactNode;
-    /**
-     * Additional CSS class names to apply to the drop component.
-     */
-    className?: string;
-    /**
-     * Inline styles to apply to the drop component.
-     */
-    style?: React.CSSProperties;
-    /**
-     * Indicates whether the drop component is currently open (visible) or not.
-     */
-    open: boolean;
-    /**
-     * Callback function triggered to close the drop component.
-     */
-    onClose: () => void;
-    /**
-     * Determines whether to center the content within the drop component.
-     * @default true
-     */
-    centerContent?: boolean;
-    /**
-     * Determines the stack order of the backdrop, ensuring it appears above other content but behind interactive elements.
-     */
-    zIndex?: number;
-    /**
-     * Prevents the modal from closing if an action is in progress.
-     * When set to `true`, the modal will remain open and cannot be closed
-     * until the ongoing action completes.
-     * Useful for preventing accidental closure during important tasks or loading states.
-     */
-    preventClose?: boolean;
-    /**
-     * 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';
-    /**
-     * Controls the intensity of the backdrop glass effect (blur).
-     * A higher value increases the blur, creating a stronger glass effect.
-     *
-     * @type {number} - The intensity of the glass effect (blur).
-     * @default '6'
-     */
-    glassEffect?: number;
-}
-declare const Backdrop: React.ForwardRefExoticComponent<DropType & React.RefAttributes<HTMLDivElement>>;
+import { DropType } from "../../types/sui";
+declare const Backdrop: import("react").ForwardRefExoticComponent<DropType & import("react").RefAttributes<HTMLDivElement>>;
 export default Backdrop;
 //# sourceMappingURL=Backdrop.d.ts.map

dist/components/Badge/NotificationBadge.d.ts

@@ -1,2 +0,1 @@
-"use client";
 import React from "react";
@@ -3,0 +2,0 @@ type NotificationBadgeProps = {

dist/components/Badge/StatusBadge.d.ts

@@ -1,2 +0,1 @@
-"use client";
 import React from "react";
@@ -3,0 +2,0 @@ type StatusBadgeProps = {

dist/components/Box/Box.d.ts

@@ -1,2 +0,1 @@
-"use client";
 import { BoxType } from "../../types/sui";
@@ -3,0 +2,0 @@ /**

dist/components/Box/FlexBox.d.ts

@@ -1,2 +0,1 @@
-"use client";
 import { DivProps } from "../../styled";
@@ -3,0 +2,0 @@ export interface BoxProps extends DivProps {

dist/components/Button/Button.d.ts

 "use client";
-import { ButtonProps } from '../../types/sui';
-/**
- * A customizable button component designed to handle various actions and events in your application.
- * The Button component supports multiple variants, sizes, and states, making it versatile and adaptable
- * to different design and functionality needs.
- *
- * Props:
- * - `variant` (optional): Determines the style variant of the button. Options include:
- *   - `"solid"`: A button with a filled background.
- *   - `"outline"`: A button with a border and no background.
- *   - `"ghost"`: A transparent button with no border or background.
- * - `size` (optional): Specifies the size of the button. Common options might include:
- *   - `"sm"`: Small size.
- *   - `"md"`: Medium size (default).
- *   - `"lg"`: Large size.
- * - `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)
- *   without a fragment. If a fragment is used, it may cause the component to break.
- * - `isLoading` (optional): A boolean that, when set to `true`, displays a loading indicator within the button,
- *   indicating that an action is being processed.
- *
- * Usage:
- * Use the Button component to trigger actions, submit forms, or navigate between pages.
- * This component is flexible enough to handle various scenarios in your application.
- *
- * Example:
- * ```
- * <Button
- *   variant="outline"
- *   size="md"
- *   radius="lg"
- *   onClick={() => console.log("Button clicked!")}
- *   icon={FaUser}
- * >
- *   Click Me
- * </Button>
- * ```
- */
+import { ButtonProps } from "../../types/sui";
 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

 "use client";
-import { CardProps } from '../../types/sui';
+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.
  */
@@ -20,0 +6,0 @@ declare const Card: import("react").ForwardRefExoticComponent<Omit<CardProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

dist/components/Checkbox/Checkbox.d.ts

@@ -46,3 +46,3 @@ "use client";
      */
-    mode?: 'dark' | 'light';
+    mode?: "dark" | "light";
 };
@@ -49,0 +49,0 @@ declare const CheckBox: {

dist/components/Drawer/Drawer.d.ts

 "use client";
-import React from 'react';
-import { DrawerProps } from '../../types/sui';
+import React from "react";
+import { DrawerProps } from "../../types/sui";
 /**
@@ -5,0 +5,0 @@ * A customizable overlay drawer component for displaying content.

dist/components/Drawer/DrawerContent.d.ts

 "use client";
-import React from 'react';
-import { BoxType } from '../../types/sui';
+import React from "react";
+import { BoxType } from "../../types/sui";
 /**
@@ -5,0 +5,0 @@ * DrawerContent component is used to display the content of the Drawer.

dist/components/Fab/Fab.d.ts

@@ -1,5 +0,4 @@
-"use client";
-import { FloatProps } from '../../types/sui';
+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/FilePicker/ImagePicker.d.ts

@@ -1,2 +0,1 @@
-"use client";
 import React from 'react';
@@ -3,0 +2,0 @@ interface ImagePickerProps {

dist/components/Icon/HoverableIcon.d.ts

@@ -1,2 +0,1 @@
-"use client";
 import React from "react";
@@ -3,0 +2,0 @@ type IconTypes = {

dist/components/Icon/Icon.d.ts

@@ -1,2 +0,1 @@
-"use client";
 import React from "react";
@@ -3,0 +2,0 @@ type IconBaseType = {

dist/components/Input/Input.d.ts

@@ -5,26 +5,2 @@ "use client";
  * A customizable Input component for text, email, password, and number inputs.
- *
- * @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
  */
@@ -31,0 +7,0 @@ declare const TextInput: import("react").ForwardRefExoticComponent<Omit<InputType, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -1,2 +0,1 @@
-"use client";
 type BarLoaderType = {
@@ -3,0 +2,0 @@ width?: string | number;

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

@@ -1,2 +0,1 @@
-"use client";
 type LoaderProps = {
@@ -3,0 +2,0 @@ /**

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

@@ -1,2 +0,1 @@
-"use client";
 import React from "react";
@@ -3,0 +2,0 @@ type CircularProgressProps = {

dist/components/loaders/keyframes.d.ts

@@ -1,4 +0,3 @@
-"use client";
 export declare const barload: string;
 export declare const spin: string;
 //# sourceMappingURL=keyframes.d.ts.map

dist/components/loaders/PulseLoader/PulseLoader.d.ts

@@ -1,2 +0,1 @@
-"use client";
 import React from "react";
@@ -3,0 +2,0 @@ type PulseLoaderProps = {

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

@@ -1,2 +0,1 @@
-"use client";
 import React from "react";
@@ -3,0 +2,0 @@ type ScaleLoaderProps = {

dist/components/Menu/Menu.d.ts

 "use client";
-import { MenuProps } from '../../types/sui';
+import { MenuProps } from "../../types/sui";
 declare const Menu: {
@@ -4,0 +4,0 @@ ({ children, className, style, mode, zIndex, top, left, right, bottom, ...props }: MenuProps): import("react/jsx-runtime").JSX.Element;

dist/components/Menu/MenuItem.d.ts

 "use client";
-import React from 'react';
+import React from "react";
 interface MenuItemProps {
@@ -30,3 +30,3 @@ /**
      */
-    mode?: 'light' | 'dark';
+    mode?: "light" | "dark";
     /**
@@ -33,0 +33,0 @@ * Function to be called when the MenuItem is clicked.

dist/components/modal/Modal.d.ts

 "use client";
-import React from 'react';
+import React from "react";
 type ModalType = {
@@ -43,3 +43,3 @@ /**
     glassEffect?: number;
-    mode?: 'light' | 'dark';
+    mode?: "light" | "dark";
 };
@@ -49,20 +49,2 @@ /**
  * with customizable content and behaviors.
- *
- * Props:
- * - `open`: Whether the modal is currently open or not.
- * - `onClose`: Callback function to be called when the modal requests to close.
- * - `className`: Optional additional class names to be applied to the modal.
- * - `styles`: Optional custom styles to be applied to the modal.
- *
- * Example:
- *
- * ```
- * <Modal open onClose={()=>setOpenModal(false)}>
- *      <ModalPanel align='vertical'>
- *       <ModalContent>
- *         <h1>A modal</h1>
- *       </ModalContent>
- *    </ModalPanel>
- * </Modal>
- * ```
  */
@@ -69,0 +51,0 @@ declare const Modal: {

dist/components/modal/ModalPanel.d.ts

 "use client";
-import React from 'react';
-import { StackType } from '../../types/sui';
+import React from "react";
+import { StackType } from "../../types/sui";
 export type ModalPanelType = {
@@ -13,3 +13,3 @@ /**
      */
-    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    size?: "sm" | "md" | "lg" | "xl" | "full";
     /**
@@ -26,3 +26,3 @@ * The content displayed within the modal panel.
      */
-    transition?: 'walkIn' | 'dropIn' | 'slideIn';
+    transition?: "walkIn" | "dropIn" | "slideIn";
     /**
@@ -42,4 +42,4 @@ * Optional string to add custom CSS classes.
      */
-    align?: StackType['align'];
-    spacing?: StackType['spacing'];
+    align?: StackType["align"];
+    spacing?: StackType["spacing"];
 };
@@ -46,0 +46,0 @@ declare const ModalPanel: {

dist/components/modal/ModalTitle.d.ts

 "use client";
-import React from 'react';
-import { BoxType } from '../../types/sui';
+import React from "react";
+import { BoxType } from "../../types/sui";
 interface ModalTitleType extends BoxType {
@@ -5,0 +5,0 @@ /**

dist/components/Navigation/BottomNavTab.d.ts

 "use client";
-import React from 'react';
-import { BoxType } from '../../types/sui';
+import React from "react";
+import { BoxType } from "../../types/sui";
 interface BottomNavTabProps extends BoxType {
@@ -5,0 +5,0 @@ /** The text to display below the icon, name of the tab */

dist/components/Stack/Stack.d.ts

@@ -1,28 +0,4 @@
-"use client";
 import { StackType } from "../../types/sui";
 /**
  * A layout component that arranges its children in a vertical or horizontal stack with configurable spacing.
- * The Stack component simplifies the management of child components' spacing, alignment, and direction.
- *
- * Props:
- * - `spacing`: Controls the space (gap) between child elements.
- *    Accepts predefined sizes: "xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl".
- * - `align`: Specifies the direction of the stack.
- * - `padding`: Sets the inner padding of the Stack. Accepts any valid CSS padding value.
- * - `margin`: Sets the outer margin of the Stack. Accepts any valid CSS margin value.
- * - `align`: Aligns children elements. "vertical" for centering items in a column, "horizontal" for centering items in a row.
- * - `centered`: Boolean prop to center the content of the Stack within its container.
- *
- * Usage:
- * Use the Stack component to align and space multiple child elements consistently.
- * It is especially useful for creating vertical or horizontal lists, menus, toolbars, and other grouped UI elements.
- *
- * Example:
- * ```
- * <Stack align="vertical" spacing="md" padding="16px">
- *   <Button>Button 1</Button>
- *   <Button>Button 2</Button>
- *   <Button>Button 3</Button>
- * </Stack>
- * ```
  */
@@ -29,0 +5,0 @@ declare const Stack: import("react").ForwardRefExoticComponent<Omit<StackType, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

dist/components/Switch/Switch.d.ts

@@ -1,2 +0,1 @@
-"use client";
 type SwitchType = {
@@ -37,4 +36,7 @@ /**
 };
-declare const Switch: ({ color, checkedColor, size, onSwitch, className, checked, disabled, }: SwitchType) => import("react/jsx-runtime").JSX.Element;
+declare const Switch: {
+    ({ color, checkedColor, size, onSwitch, className, checked, disabled, }: SwitchType): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default Switch;
 //# sourceMappingURL=Switch.d.ts.map

dist/components/Tabs/TabHandle.d.ts

 "use client";
-import React from 'react';
+import React from "react";
 type TabHandleType = {
@@ -4,0 +4,0 @@ /**

dist/components/Tabs/Tabs.d.ts

@@ -19,4 +19,7 @@ "use client";
  */
-declare const Tab: ({ children, variant, mode, fullWidth, backgroundColor, lineBorderColor, className, }: TabsListType) => import("react/jsx-runtime").JSX.Element;
+declare const Tab: {
+    ({ children, variant, mode, fullWidth, backgroundColor, lineBorderColor, className, }: TabsListType): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default Tab;
 //# sourceMappingURL=Tabs.d.ts.map

dist/components/Tabs/TabsList.d.ts

 "use client";
-import React from "react";
+import React from 'react';
 export type TabsListType = {
@@ -12,3 +12,3 @@ /**
      */
-    variant?: "line" | "solid";
+    variant?: 'line' | 'solid';
     /**
@@ -25,3 +25,3 @@ * Sets the theme mode for the input component.
      */
-    mode?: "light" | "dark";
+    mode?: 'light' | 'dark';
     /**
@@ -28,0 +28,0 @@ * Determines whether the Tabs should stretch to full width.

dist/components/Text/AnimatedText.d.ts

@@ -1,2 +0,1 @@
-"use client";
 import React from "react";
@@ -3,0 +2,0 @@ import { ParagraphProps } from "../../styled";

dist/components/Toast/Toast.d.ts

 "use client";
 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.
- */
+/** Toast API for displaying different types of toast notifications (info, error, success, warning). */
 declare let toast: ToastType;
@@ -11,0 +5,0 @@ declare const Toast: () => import("react/jsx-runtime").JSX.Element;

dist/context/MenuProvider.d.ts

 "use client";
-import { MenuProps } from '../types/sui';
+import { MenuProps } from "../types/sui";
 /**
@@ -4,0 +4,0 @@ * MenuProvider component is a context provider for the Menu component.

dist/context/useDrawer.d.ts

@@ -10,4 +10,7 @@ "use client";
 };
-declare const DrawerProvider: ({ children, mode }: ProviderType) => import("react/jsx-runtime").JSX.Element;
+declare const DrawerProvider: {
+    ({ children, mode }: ProviderType): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default DrawerProvider;
 //# sourceMappingURL=useDrawer.d.ts.map

dist/context/useModal.d.ts

 "use client";
-import React from 'react';
+import React from "react";
 type ProviderType = {
     children: React.ReactNode;
     open: boolean;
-    mode: 'light' | 'dark';
+    mode: "light" | "dark";
 };
@@ -8,0 +8,0 @@ export declare const useModalContext: () => {

dist/context/useTabList.d.ts

 "use client";
 type TabListContextType = {
     onSwitch: (value: string) => void;
-    variant: 'line' | 'solid';
+    variant: "line" | "solid";
     activeTabValue: string;
-    themeMode: 'light' | 'dark';
+    themeMode: "light" | "dark";
     fullWidth?: boolean;
@@ -11,4 +11,4 @@ };
     children: React.ReactNode;
-    tabVariant: 'line' | 'solid';
-    mode: 'light' | 'dark';
+    tabVariant: "line" | "solid";
+    mode: "light" | "dark";
     useFullWidth?: boolean;
@@ -15,0 +15,0 @@ };

dist/hooks/useAuth.d.ts

@@ -8,3 +8,3 @@ "use client";
 };
-type AuthProviderProps<TUser> = {
+type AuthProviderProps = {
     children: React.ReactNode;
@@ -29,3 +29,3 @@ /**
 declare const AuthProvider: {
-    <TUser>({ children, RedirectUrl, }: AuthProviderProps<TUser>): import("react/jsx-runtime").JSX.Element;
+    <TUser>({ children, RedirectUrl }: AuthProviderProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
@@ -42,3 +42,3 @@ };
  */
-export declare const useAuth: <TbUser>() => AuthContextType<TbUser>;
+export declare const useAuth: <TUser>() => AuthContextType<TUser>;
 //# sourceMappingURL=useAuth.d.ts.map

dist/hooks/useMode.d.ts

 "use client";
 type ModeContextType = {
-    mode: 'light' | 'dark' | any;
+    mode: "light" | "dark" | any;
 };
@@ -17,3 +17,3 @@ type ModeProviderProps = {
      */
-    mode: 'light' | 'dark' | any;
+    mode: "light" | "dark" | any;
 };
@@ -20,0 +20,0 @@ /**

dist/index.d.ts

@@ -1,2 +0,1 @@
-"use client";
 export { toast } from "./components/Toast/Toast";
@@ -45,2 +44,3 @@ export { generateId } from "./lib/helper";
 export { default as PulseLoader } from "./components/loaders/PulseLoader/PulseLoader";
+export { default as PageLoader } from "./components/loaders/PageLoader/PageLoader";
 export { useAuth } from "./hooks/useAuth";
@@ -50,4 +50,5 @@ export { default as AuthProvider } from "./hooks/useAuth";
 export { default as useRouter } from "./hooks/useRouter";
+export { default as dyn } from "./hooks/dyn";
 export { ButtonProps, InputType, CardProps, BoxType, SizeVariantType, StackType, DrawerProps, FloatProps, } from "./types/sui";
 export { dropIn, dropOut, slideIn, spin, slideInFromLeft, slideInFromRight, slideOutFromRight, popIn, popOut, walkIn, walkOut, zoom, } from "./styles/animations";
 //# sourceMappingURL=index.d.ts.map

dist/lib/helper/index.d.ts

@@ -1,4 +0,3 @@
-"use client";
 export declare const hexToRgbArray: (hex: any) => number[];
 export declare const generateId: () => string;
 //# sourceMappingURL=index.d.ts.map

dist/lib/helper/theme.d.ts

@@ -1,2 +0,1 @@
-"use client";
 declare const getModeStyle: (mode: "dark" | "light") => {
@@ -3,0 +2,0 @@ [key: string]: string;

dist/lib/index.d.ts

@@ -1,2 +0,1 @@
-"use client";
 //# sourceMappingURL=index.d.ts.map

dist/styled/createGlobalStyle.d.ts

@@ -1,2 +0,1 @@
-"use client";
 import { Theme } from "./types/local";
@@ -3,0 +2,0 @@ /**

dist/styled/index.d.ts

@@ -1,2 +0,1 @@
-"use client";
 export { default as styled } from "./styled";
@@ -3,0 +2,0 @@ export { default as createGlobalStyle } from "./createGlobalStyle";

dist/styled/styled.d.ts

@@ -1,2 +0,1 @@
-"use client";
 import React from "react";
@@ -3,0 +2,0 @@ import { StandardProperties } from "csstype";

dist/styled/types/elements.d.ts

@@ -1,2 +0,1 @@
-"use client";
 import React from "react";
@@ -3,0 +2,0 @@ /**

dist/styled/types/local.d.ts

@@ -1,2 +0,1 @@
-"use client";
 export type Theme = {
@@ -3,0 +2,0 @@ colors?: {

dist/styled/utils/className.d.ts

@@ -1,2 +0,1 @@
-"use client";
 /**
@@ -3,0 +2,0 @@ * Generates a class name for a given tag or component type.

dist/styled/utils/colors.d.ts

@@ -1,2 +0,1 @@
-"use client";
 /**
@@ -3,0 +2,0 @@ * Color palette object containing various color schemes.

dist/styled/utils/css.d.ts

@@ -1,2 +0,1 @@
-"use client";
 /**
@@ -3,0 +2,0 @@ * A utility function to process tagged template literals for CSS-in-JS.

dist/styled/utils/deepmerge.d.ts

@@ -1,2 +0,1 @@
-"use client";
 /**
@@ -3,0 +2,0 @@ * Deep merge two objects

dist/styled/utils/genString.d.ts

@@ -1,2 +0,1 @@
-"use client";
 /**
@@ -3,0 +2,0 @@ * Generate a random string of a given length

dist/styled/utils/keyframes.d.ts

@@ -1,2 +0,1 @@
-"use client";
 /**
@@ -3,0 +2,0 @@ * Creates a keyframe animation and returns a unique name for it.

dist/styled/utils/props.d.ts

@@ -1,3 +0,2 @@
-"use client";
 export declare const validElementProps: string[];
 //# sourceMappingURL=props.d.ts.map

dist/styled/utils/StyleSheetManger.d.ts

@@ -1,2 +0,1 @@
-"use client";
 declare class StyleSheetManager {
@@ -3,0 +2,0 @@ private styles;

dist/styles/action/styled.d.ts

@@ -1,2 +0,1 @@
-"use client";
 import { ButtonProps } from '../../types/sui';
@@ -3,0 +2,0 @@ import { IStyleFab } from '../../types/istyle';

dist/styles/animations.d.ts

@@ -1,2 +0,1 @@
-"use client";
 export declare const spin: string;
@@ -3,0 +2,0 @@ export declare const zoom: string;

dist/styles/colors.d.ts

@@ -1,2 +0,1 @@
-"use client";
 export declare const colors: {
@@ -3,0 +2,0 @@ primary: {

dist/styles/feedback/styled.d.ts

@@ -1,2 +0,1 @@
-"use client";
 import { IStyleDrop, IStyleModalFooter, IStyleModalPanel, IStyleToast, IStyleToastCloseIcon } from "../../types/istyle";
@@ -28,2 +27,9 @@ export declare const DropSui: import("react").ForwardRefExoticComponent<IStyleDrop & {
 } & import("react").HTMLAttributes<HTMLElement> & Record<string, any>>;
+export declare const ToastWrap: import("react").ForwardRefExoticComponent<{
+    position: IStyleToast["position"];
+} & {
+    theme?: {
+        [x: string]: any;
+    };
+} & import("react").HTMLAttributes<HTMLElement> & Record<string, any>>;
 export declare const ContentWrap: import("react").ForwardRefExoticComponent<import("../../types/istyle").IStyleBox & {
@@ -30,0 +36,0 @@ theme?: {

dist/styles/global.d.ts

@@ -1,2 +0,1 @@
-"use client";
 export declare const FixedBox: import("react").ForwardRefExoticComponent<{
@@ -3,0 +2,0 @@ theme?: {

dist/styles/input/styled.d.ts

@@ -1,3 +0,2 @@
-"use client";
-import { IStyleCheckbox, IStyleChecked, IStyleSwitch, IStyleSwitchHandle, IStyleTextInput } from '../../types/istyle';
+import { IStyleCheckbox, IStyleChecked, IStyleSwitch, IStyleSwitchHandle, IStyleTextInput } from "../../types/istyle";
 export declare const InputForm: import("react").ForwardRefExoticComponent<{
@@ -4,0 +3,0 @@ width: string | any;

dist/styles/layout/styled.d.ts

@@ -1,2 +0,1 @@
-"use client";
 import { IStyleBox, IStyleStack, IStyleTabHandle } from "../../types/istyle";
@@ -3,0 +2,0 @@ import { CardProps } from "../../types/sui";

dist/styles/navigation/styled.d.ts

@@ -1,2 +0,1 @@
-"use client";
 import { BoxType } from "../../types/sui";
@@ -3,0 +2,0 @@ type IStyledBottomNav = {

dist/styles/overlays/styled.d.ts

@@ -1,2 +0,1 @@
-"use client";
 import { IStyleDrawer } from "../../types/istyle";
@@ -3,0 +2,0 @@ export declare const DrawerSui: import("react").ForwardRefExoticComponent<IStyleDrawer & {

dist/styles/selection/styled.d.ts

@@ -1,2 +0,1 @@
-"use client";
 type IStyledMenuPanel = {
@@ -3,0 +2,0 @@ open?: boolean;

dist/styles/utility/styled.d.ts

@@ -1,2 +0,1 @@
-"use client";
 export declare const FilePicker: import("react").ForwardRefExoticComponent<Omit<import("../..").BoxType, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
@@ -3,0 +2,0 @@ theme?: {

dist/types/istyle.d.ts

@@ -1,2 +0,1 @@
-"use client";
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -3,0 +2,0 @@ import { DivProps } from "../styled";

dist/types/sui.d.ts

@@ -1,2 +0,1 @@
-"use client";
 import { ComponentProps } from "react";
@@ -608,1 +607,79 @@
 }
+
+export interface DropType {
+  /**
+   * The content to be rendered inside the drop component.
+   */
+  children?: React.ReactNode;
+
+  /**
+   * Additional CSS class names to apply to the drop component.
+   */
+  className?: string;
+
+  /**
+   * Inline styles to apply to the drop component.
+   */
+  style?: React.CSSProperties;
+
+  /**
+   * Indicates whether the drop component is currently open (visible) or not.
+   */
+  open: boolean;
+
+  /**
+   * Callback function triggered to close the drop component.
+   */
+  onClose: () => void;
+
+  /**
+   * Determines whether to center the content within the drop component.
+   * @default true
+   */
+  centerContent?: boolean;
+  /**
+   * Determines the stack order of the backdrop, ensuring it appears above other content but behind interactive elements.
+   */
+  zIndex?: number;
+  /**
+   * Prevents the modal from closing if an action is in progress.
+   * When set to `true`, the modal will remain open and cannot be closed
+   * until the ongoing action completes.
+   * Useful for preventing accidental closure during important tasks or loading states.
+   */
+  preventClose?: boolean;
+  /**
+   * 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";
+  /**
+   * Controls the intensity of the backdrop glass effect (blur).
+   * A higher value increases the blur, creating a stronger glass effect.
+   *
+   * @type {number} - The intensity of the glass effect (blur).
+   * @default '6'
+   */
+  glassEffect?: number;
+}
+
+export type PageLoaderOption = {
+  /** The color of the loader.*/
+  color?: string;
+  /** If true, the loader will have rounded corners. @default 'true' */
+  rounded?: boolean;
+  /** The color of the container that holds the loader.*/
+  containerColor?: string;
+};
+
+export type DynamicImportProps = {
+  importFunc: () => Promise<{ default: React.ComponentType }>;
+  loaderOptions?: PageLoaderOption;
+};

dist/utils/actions/index.d.ts

@@ -1,2 +0,1 @@
-"use client";
 import { FloatProps } from "../../types/sui";
@@ -3,0 +2,0 @@ declare const getFloatVariantStyle: (variant: FloatProps["variant"], colorScheme: FloatProps["colorScheme"]) => {

dist/utils/auth/Authenticate.d.ts

@@ -1,2 +0,1 @@
-"use client";
 import React from 'react';
@@ -3,0 +2,0 @@ type AuthenticateSessionProps = {

dist/utils/button/index.d.ts

@@ -1,2 +0,1 @@
-"use client";
 import { ButtonProps } from '../../types/sui';
@@ -3,0 +2,0 @@ declare const getButtonRadius: (radius: ButtonProps["radius"]) => "4px" | "6px" | "12px" | "9999px";

dist/utils/feedback/index.d.ts

@@ -1,2 +0,1 @@
-"use client";
 import { ModalPanelType } from "../../components/modal/ModalPanel";
@@ -3,0 +2,0 @@ declare const getPanelSize: (size: ModalPanelType["size"]) => "\n        width: 300px;\n              " | "\n        width: 400px;\n              " | "\n        width: 500px;\n  \n        @media screen and (max-width:550px){\n        width: 90%;\n        }\n              " | "\n        width: 600px;\n        \n        @media screen and (max-width:550px){\n        width: 90%;\n        }\n        " | "\n        width: 60%;\n  \n        @media screen and (max-width:1024px){\n        width: 80%;\n        }\n        @media screen and (max-width:550px){\n        width: 90%;\n        }\n        " | undefined;

dist/utils/input/index.d.ts

@@ -1,2 +0,1 @@
-"use client";
 import { InputType } from "../../types/sui";
@@ -3,0 +2,0 @@ declare const getInputStyles: ({ mode, variant, focusBorderColor, focusColor, outLineBorderColor, disabled, hasError, Type, onHoverBg, backgroundColor, }: InputType) => {

dist/utils/layout/index.d.ts

@@ -1,2 +0,1 @@
-"use client";
 import { CardProps } from "../../types/sui";
@@ -3,0 +2,0 @@ export declare const cardStyles: (mode: CardProps["mode"]) => {

dist/utils/mode.d.ts

@@ -1,2 +0,1 @@
-"use client";
 export declare const getModeStyle: (mode: "light" | "dark") => {
@@ -3,0 +2,0 @@ tabListBg: string;

dist/utils/navigation/index.d.ts

@@ -1,2 +0,1 @@
-"use client";
 export declare const getBottomNavVariant: (variant: "rounded" | "full" | "wide") => {
@@ -3,0 +2,0 @@ "border-radius": string;

dist/utils/overlays/index.d.ts

@@ -1,2 +0,1 @@
-"use client";
 import { IStyleDrawer } from "../../types/istyle";
@@ -3,0 +2,0 @@ declare const getDrawerPosition: (position: IStyleDrawer["position"], variant: IStyleDrawer["variant"]) => "left: 10px" | "right: 10px" | "left: 0" | "right: 0";

dist/utils/position.d.ts

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

dist/utils/spacing.d.ts

@@ -1,4 +0,3 @@
-"use client";
 export declare const getSpacing: (size: number) => string;
 export declare const spacingValues: (spacing: string | any) => string;
 //# sourceMappingURL=spacing.d.ts.map

dist/utils/transitions.d.ts

@@ -1,2 +0,1 @@
-"use client";
 import { ToastOptionsType } from "../types/sui";
@@ -3,0 +2,0 @@ declare const getToastTransition: (transition: ToastOptionsType["transition"], isVisible: boolean) => string;

package.json

 {
   "name": "secptrum-ui",
-  "version": "1.1.70",
+  "version": "1.1.71",
   "description": "**SecptrumUI** A comprehensive React component library",
@@ -5,0 +5,0 @@ "homepage": "https://secptrumui.vercel.app",

README.md

 <div align="center">
-  <img src="https://github.com/SecptrumLab/secptrum-ui/blob/main/images/secptrumui-logo.png" alt="SecptrumUI Logo" width="200" height="200" />
+  <img src="https://github.com/Kingrashy12/secptrum-ui/blob/main/images/secptrumui-logo.png" alt="SecptrumUI Logo" width="200" height="200" />
 </div>
@@ -21,3 +21,3 @@
 
-- 🎨 **Customizable**: Easily customize components using `styled-chroma` for advanced styling.
+- 🎨 **Customizable**: Easily customize components using `styled` for advanced styling.
 - 🧩 **Modular**: Import only the components you need, reducing bundle size.
@@ -24,0 +24,0 @@ - 💻 **Responsive**: All components are designed to be fully responsive.

scripts/insertUseClient.js

 #!/usr/bin/env node
 
-const fs = require("fs");
-const path = require("path");
+const fs = require('fs');
+const path = require('path');
 let chalk;
 
+const componentsDir = [
+  'components/Button',
+  'components/Card',
+  'components/Drawer',
+  'components/Menu',
+  'components/Tabs',
+  'components/modal',
+  'components/Input',
+  'components/Navigation',
+  'components/Backdrop',
+  'components/Checkbox',
+  'components/Toast',
+];
+const hooksDir = ['styled/hooks', 'context', 'hooks'];
+
+const insertDir = [...componentsDir, ...hooksDir];
+
+// console.log(insertDir);
+
 // Add "use client" to all files
-const nextJsDir = path.join(__dirname, "../dist");
+const nextJsDir = path.join(__dirname, '../dist/');
 
+function checkDir() {
+  for (let i = 0; i < insertDir.length; i++) {
+    const dir = insertDir[i];
+    const fullPath = path.join(nextJsDir, dir); // Create the full path
+    addUseClientToFiles(fullPath);
+    // const exists = fs.existsSync(fullPath); // Check if the path exists
+    // console.log(fullPath);
+    // console.log(exists); // Log whether the directory exists
+  }
+}
+
 function addUseClientToFiles(dir) {
@@ -19,8 +49,8 @@ const files = fs.readdirSync(dir);
       addUseClientToFiles(fullPath); // Recursively process subdirectories
-    } else if (file.endsWith(".js") || file.endsWith(".ts")) {
-      const content = fs.readFileSync(fullPath, "utf8");
+    } else if (file.endsWith('.js') || file.endsWith('.ts')) {
+      const content = fs.readFileSync(fullPath, 'utf8');
 
       if (!content.startsWith('"use client";')) {
         const newContent = `"use client";\n${content}`;
-        fs.writeFileSync(fullPath, newContent, "utf8");
+        fs.writeFileSync(fullPath, newContent, 'utf8');
         console.log(`Added 'use client' to: ${fullPath}`);
@@ -32,10 +62,9 @@ }
 
-// Only apply this to the Next.js folder
 (async () => {
-  chalk = await import("chalk");
+  chalk = await import('chalk');
 
   if (fs.existsSync(nextJsDir)) {
-    addUseClientToFiles(nextJsDir);
+    // addUseClientToFiles(nextJsDir);
+    checkDir();
     console.log(chalk.default.green('\u2714 Modified with "use client".'));
-    // console.log('Next.js build modified with "use client".');
   } else {
@@ -42,0 +71,0 @@ console.error(chalk.default.red(`Directory ${nextJsDir} does not exist.`));

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

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

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

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Improved metrics

Number of package files

201

increased by3.08%

Worsened metrics

Total package byte prevSize

1006564

decreased by-0.58%

Lines of code

6959

decreased by-0.61%

No dependency changes