secptrum-ui - npm Package Compare versions

Comparing version 1.1.39 to 1.1.40

dist/components/Icon/HoverableIcon.d.ts

@@ -16,2 +16,3 @@ "use client";
     styles?: React.CSSProperties;
+    disabled?: boolean;
 };
@@ -34,4 +35,4 @@ /**
  */
-declare const HoverableIcon: ({ icon, size, className, onClick, onMouseEnter, onMouseLeave, color, title, styles, backgroundColor, mode, radius, }: IconTypes) => import("react/jsx-runtime").JSX.Element;
+declare const HoverableIcon: ({ icon, size, className, onClick, onMouseEnter, onMouseLeave, color, title, styles, backgroundColor, mode, radius, disabled, }: IconTypes) => import("react/jsx-runtime").JSX.Element;
 export default HoverableIcon;
 //# sourceMappingURL=HoverableIcon.d.ts.map

dist/index.d.ts

@@ -27,2 +27,7 @@ "use client";
 export { default as TabsHandle } from './components/Tabs/TabsHandle';
+export { default as Drawer } from './components/Drawer/Drawer';
+export { default as Menu } from './components/Menu/Menu';
+export { default as MenuItem } from './components/Menu/MenuItem';
+export { default as BottomNav } from './components/Navigation/BottomNav';
+export { default as BottomNavTab } from './components/Navigation/BottomNavTab';
 export { default as BarLoader } from './components/loaders/BarLoader/BarLoader';
@@ -34,10 +39,8 @@ export { default as CircleLoader } from './components/loaders/CircleLoader/CircleLoader';
 export { useTheme } from './context/useTheme';
-export { default as BrowserRouter } from './components/router/BrowserRouter';
-export { default as Router } from './components/router/Router';
-export { default as Link } from './components/router/Link';
 export { useAuth } from './hooks/useAuth';
 export { default as AuthProvider } from './hooks/useAuth';
-export { default as useNavigation } from './hooks/useNavigation';
 export { default as ThemeProvider } from './context/useTheme';
 export { default as ModeProvider } from './hooks/useMode';
+export { default as useRouter } from './hooks/useRouter';
+export { ButtonProps, InputType, CardProps, BoxType, SizeVariantType, StackType, DrawerProps, FloatProps, } from './types/sui';
 //# sourceMappingURL=index.d.ts.map

dist/styles/animations.d.ts

@@ -13,2 +13,3 @@ "use client";
 export declare const popOut: string;
+export declare const slideInFromLeft: string;
 //# sourceMappingURL=animations.d.ts.map

dist/styles/feedback/styled.d.ts

 "use client";
-import { IStyleDrop, IStyleModalFooter, IStyleModalPanel, IStyleToast, IStyleToastCloseIcon } from "../../types/istyle";
+import { IStyleDrop, IStyleModalFooter, IStyleModalPanel, IStyleToast, IStyleToastCloseIcon } from '../../types/istyle';
 export declare const DropSui: import("react").ForwardRefExoticComponent<IStyleDrop & {
@@ -4,0 +4,0 @@ theme?: {

dist/styles/utility/styled.d.ts

 "use client";
-export declare const FilePicker: import("react").ForwardRefExoticComponent<Omit<import("../../types/sui").BoxType, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+export declare const FilePicker: import("react").ForwardRefExoticComponent<Omit<import("../..").BoxType, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: {
@@ -7,3 +7,3 @@ [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> & {
+export declare const UploadIcon: import("react").ForwardRefExoticComponent<Omit<import("../..").BoxType, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: {
@@ -18,3 +18,3 @@ [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> & {
+export declare const SelectedImageContainer: import("react").ForwardRefExoticComponent<Omit<import("../..").BoxType, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: {
@@ -24,3 +24,3 @@ [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> & {
+export declare const ImagesContainer: import("react").ForwardRefExoticComponent<Omit<import("../..").BoxType, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: {
@@ -30,3 +30,3 @@ [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> & {
+export declare const ExtraImagePicker: import("react").ForwardRefExoticComponent<Omit<import("../..").BoxType, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: {
@@ -36,3 +36,3 @@ [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> & {
+export declare const Picker_ImageContainer: import("react").ForwardRefExoticComponent<Omit<import("../..").BoxType, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: {
@@ -39,0 +39,0 @@ [x: string]: any;

dist/types/istyle.d.ts

 "use client";
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { DivProps } from "styled-chroma";
+import { DivProps } from 'styled-chroma';
 import {
@@ -11,4 +11,4 @@ BoxType,
   ToastVariant,
-} from "./sui";
-import { ModalPanelType } from "../components/modal/ModalPanel";
+} from './sui';
+import { ModalPanelType } from '../components/modal/ModalPanel';
 
@@ -19,19 +19,19 @@ /**
 export interface IStyleBox {
-  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"];
-  fullWidth?: BoxType["fullWidth"];
-  width?: BoxType["width"];
+  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'];
+  fullWidth?: BoxType['fullWidth'];
+  width?: BoxType['width'];
 }
@@ -43,5 +43,5 @@
 export interface IStyleStack extends IStyleBox {
-  spacing: StackType["spacing"];
-  align: StackType["align"];
-  wrap?: StackType["wrap"];
+  spacing: StackType['spacing'];
+  align: StackType['align'];
+  wrap?: StackType['wrap'];
 }
@@ -84,8 +84,8 @@
   backgroundcolor: string | any;
-  position: ToastPositionType | "bottom-center" | "top-center";
+  position: ToastPositionType | 'bottom-center' | 'top-center';
   disabled: boolean | any;
-  colorScheme: FloatProps["colorScheme"];
-  variant: FloatProps["variant"];
-  size: FloatProps["size"];
-  moveOnScroll: FloatProps["moveOnScroll"];
+  colorScheme: FloatProps['colorScheme'];
+  variant: FloatProps['variant'];
+  size: FloatProps['size'];
+  moveOnScroll: FloatProps['moveOnScroll'];
 }
@@ -97,7 +97,7 @@
 export interface IStyleModalPanel {
-  size: ModalPanelType["size"];
-  transition: ModalPanelType["transition"];
+  size: ModalPanelType['size'];
+  transition: ModalPanelType['transition'];
   backgroundColor: string | any;
-  align: ModalPanelType["align"];
-  spacing: ModalPanelType["spacing"];
+  align: ModalPanelType['align'];
+  spacing: ModalPanelType['spacing'];
   isVisible: boolean;
@@ -111,3 +111,3 @@ }
   space?: number;
-  position?: "right" | "left";
+  position?: 'right' | 'left';
 }
@@ -121,3 +121,3 @@
   isVisible: boolean;
-  transition: ToastOptionsType["transition"];
+  transition: ToastOptionsType['transition'];
 }
@@ -158,3 +158,3 @@
 export interface IStyleTabList {
-  variant: "line" | "solid" | any;
+  variant: 'line' | 'solid' | any;
   backgroundcolor: string | any;
@@ -172,3 +172,3 @@ fullWidth: boolean | any;
   activeColor: string | any;
-  variant: "line" | "solid";
+  variant: 'line' | 'solid';
   inactivecolor: string;
@@ -178,1 +178,10 @@ disabled: boolean;
 }
+
+export interface IStyleDrawer {
+  position: 'left' | 'right';
+  variant: 'default' | 'modal';
+  background: string | any;
+  width: string;
+  mode: 'light' | 'dark';
+  spacing: number;
+}

dist/types/sui.d.ts

@@ -27,3 +27,3 @@ "use client";
    */
-  variant?: "solid" | "outline" | "ghost";
+  variant?: 'solid' | 'outline' | 'ghost';
   /**
@@ -33,3 +33,3 @@ * @param radius Defines the border-radius size of the input, determining how rounded the corners will be.
    */
-  radius?: "sm" | "md" | "lg" | "xl" | "full";
+  radius?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
   /**
@@ -39,3 +39,3 @@ * @param Type Specifies the type of input to render. Determines the kind of data that the input will handle.
    */
-  Type: "password" | "text" | "email" | "number";
+  Type: 'password' | 'text' | 'email' | 'number';
   /**
@@ -112,3 +112,3 @@ * The size of the icon.
    */
-  mode?: "light" | "dark";
+  mode?: 'light' | 'dark';
 
@@ -181,3 +181,3 @@ /**
    */
-  variant?: "solid" | "outline" | "ghost" | "light" | "danger";
+  variant?: 'solid' | 'outline' | 'ghost' | 'light' | 'danger';
   /**
@@ -192,3 +192,3 @@ * Defines the border radius options for the `Button`.
 
-  radius?: "md" | "lg" | "xl" | "full";
+  radius?: 'md' | 'lg' | 'xl' | 'full';
   /**
@@ -200,3 +200,3 @@ * Defines the size variants for the `Button`.
    */
-  size?: "md" | "lg" | "xl";
+  size?: 'md' | 'lg' | 'xl';
   /**
@@ -215,3 +215,3 @@ * @param icon Accepts a JSX element representing an icon, such as `icon={FaUser}` from react-icons.
    */
-  iconPosition?: "left" | "right";
+  iconPosition?: 'left' | 'right';
 
@@ -276,3 +276,3 @@ /**
    */
-  mode?: "dark" | "light";
+  mode?: 'dark' | 'light';
   /**
@@ -355,3 +355,3 @@ * If true, the button will take up the full width of its container.
    */
-  direction?: "row" | "column";
+  direction?: 'row' | 'column';
   /**
@@ -376,22 +376,22 @@ * Enables wrapping for items if they exceed the available space in a row layout.
 export declare type SizeVariantType =
-  | "xs"
-  | "sm"
-  | "md"
-  | "lg"
-  | "xl"
-  | "2xl"
-  | "3xl"
-  | "4xl"
-  | "5xl";
-export declare type ToastVariant = "info" | "error" | "success" | "warning";
+  | 'xs'
+  | 'sm'
+  | 'md'
+  | 'lg'
+  | 'xl'
+  | '2xl'
+  | '3xl'
+  | '4xl'
+  | '5xl';
+export declare type ToastVariant = 'info' | 'error' | 'success' | 'warning';
 export declare type ToastTransitionType =
-  | "dropIn"
-  | "slideIn"
-  | "popIn"
-  | "walkIn";
+  | 'dropIn'
+  | 'slideIn'
+  | 'popIn'
+  | 'walkIn';
 export declare type ToastPositionType =
-  | "top-right"
-  | "top-left"
-  | "bottom-right"
-  | "bottom-left";
+  | 'top-right'
+  | 'top-left'
+  | 'bottom-right'
+  | 'bottom-left';
 
@@ -423,3 +423,3 @@ export declare type ToastType = {
    */
-  transition?: "dropIn" | "slideIn" | "popIn" | "walkIn";
+  transition?: 'dropIn' | 'slideIn' | 'popIn' | 'walkIn';
 };
@@ -446,3 +446,3 @@
    */
-  align?: "vertical" | "horizontal";
+  align?: 'vertical' | 'horizontal';
 
@@ -472,7 +472,7 @@ /**
    */
-  direction?: "row" | "column";
+  direction?: 'row' | 'column';
   /**
    * The visual mode of the card.
    */
-  mode?: "light" | "dark";
+  mode?: 'light' | 'dark';
   /**
@@ -506,3 +506,3 @@ * The background color of the card.
    */
-  position?: ToastPositionType | "bottom-center" | "top-center";
+  position?: ToastPositionType | 'bottom-center' | 'top-center';
   /**
@@ -515,3 +515,3 @@ * The background color of the float element.
    */
-  size?: "md" | "lg" | "xl";
+  size?: 'md' | 'lg' | 'xl';
   /**
@@ -524,7 +524,7 @@ * Whether the float element is disabled.
    */
-  variant?: "solid" | "light";
+  variant?: 'solid' | 'light';
   /**
    * The color scheme of the float element. Can be "primary", "secondary", or "danger".
    */
-  colorScheme?: "primary" | "secondary" | "danger";
+  colorScheme?: 'primary' | 'secondary' | 'danger';
   /**
@@ -535,1 +535,59 @@ * Whether the float element should move when the page is scrolled.
 }
+export type DrawerProps = {
+  /**
+   * Determines if the drawer is open.
+   */
+  open: boolean;
+  /**
+   * Function to be called when the drawer is closed.
+   */
+  onClose: () => void;
+  /**
+   * The content to be rendered inside the drawer.
+   */
+  children: React.ReactNode;
+  /**
+   * The position of the drawer. Can be 'left' or 'right'.
+   */
+  position?: 'left' | 'right';
+  /**
+   * The variant of the drawer. Can be 'default' or 'modal'.
+   */
+  variant?: 'default' | 'modal';
+  /**
+   * The intensity of the glass effect for the backdrop.
+   */
+  glassEffect?: number;
+  /**
+   * The background color of the drawer.
+   */
+  background?: string;
+  /**
+   * The color mode of the drawer. Can be 'light' or 'dark'.
+   */
+  mode?: 'light' | 'dark';
+  /**
+   * The width of the drawer.
+   */
+  width?: string;
+  /**
+   * The spacing between elements inside the drawer.
+   */
+  spacing?: number;
+  /**
+   * The content to be rendered in the drawer's header.
+   */
+  header?: React.ReactNode;
+  /**
+   * If true, prevents the drawer from being closed when clicking outside.
+   */
+  preventClose?: boolean;
+  /**
+   * Additional CSS class name(s) to be applied to the drawer.
+   */
+  className?: string;
+  /**
+   * Additional inline styles to be applied to the drawer.
+   */
+  style?: React.CSSProperties;
+};

dist/utils/auth/Authenticate.d.ts

 "use client";
-import React from "react";
+import React from 'react';
 type AuthenticateSessionProps = {
@@ -4,0 +4,0 @@ children: React.ReactNode;

dist/utils/layout/index.d.ts

 "use client";
-import { CardProps } from "../../types/sui";
+import { CardProps } from '../../types/sui';
 export declare const cardStyles: (mode: CardProps["mode"]) => {
     background: string;
+    drawerBg: string;
     boxShadow: string;
@@ -10,3 +11,3 @@ border: string;
     background: string;
-    "border-radius": string;
+    'border-radius': string;
     filter: string;
@@ -16,18 +17,18 @@ color: string;
     opacity: number;
-    "pointer-events": string;
-    "border-bottom-width"?: undefined;
-    "border-bottom-style"?: undefined;
-    "border-bottom-color"?: undefined;
+    'pointer-events': string;
+    'border-bottom-width'?: undefined;
+    'border-bottom-style'?: undefined;
+    'border-bottom-color'?: undefined;
 } | {
     background: string;
-    "border-bottom-width": string;
-    "border-bottom-style": string;
-    "border-bottom-color": string;
+    'border-bottom-width': string;
+    'border-bottom-style': string;
+    'border-bottom-color': string;
     color: string;
     cursor: string;
     opacity: number;
-    "pointer-events": string;
-    "border-radius"?: undefined;
+    'pointer-events': string;
+    'border-radius'?: undefined;
     filter?: undefined;
 };
 //# sourceMappingURL=index.d.ts.map

package.json

 {
   "name": "secptrum-ui",
-  "version": "1.1.39",
+  "version": "1.1.40",
   "description": "**SecptrumUI** A React component library with adaptable, responsive designs using `styled-chroma`",
@@ -15,3 +15,2 @@ "homepage": "https://secptrumui.vercel.app",
   "module": "dist/secptrum-ui.es.js",
-  "unpkg": "dist/secptrum-ui.umd.js",
   "types": "dist/index.d.ts",
@@ -18,0 +17,0 @@ "exports": {

README.md

@@ -7,3 +7,3 @@ <div align="center">
 
-**SecptrumUI** A React component library with adaptable, responsive designs using `styled-chroma`.
+**SecptrumUI** A comprehensive React component library
 
@@ -10,0 +10,0 @@ ## Table of Contents

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Number of package files

146

increased by7.35%

Number of low quality alerts

1

decreased by-50%

Number of low supply chain risk alerts

4

decreased by-20%

Worsened metrics

Total package byte prevSize

13638815

decreased by-30.87%

Lines of code

5464

decreased by-9.13%

No dependency changes