secptrum-ui - npm Package Compare versions

Comparing version 1.0.15 to 1.0.16

dist/components/Button/Button.d.ts

@@ -1,62 +0,48 @@
-import { ComponentPropsWithRef } from "react";
-type ButtonTypes = ComponentPropsWithRef<"button">;
-interface ButtonProps extends ButtonTypes {
-    children: string;
-    /**
-     * Defines the styling variants for the `Button`.
-     * @property {string} solid - A solid button style with no additional classes.
-     * @property {string} danger - A button style with a border and transition effects, indicating a danger or alert action.
-     * @property {string} outline - A button style with a border outline.
-     * @property {string} ghost - A button style with a transparent background and transition effects.
-     */
-    variant?: "solid" | "outline" | "ghost";
-    /**
-     * Defines the border radius options for the `Button`.
-     * @property {string} sm - A small border radius.
-     * @property {string} md - A medium border radius.
-     * @property {string} lg - A large border radius.
-     * @property {string} xl - An extra-large border radius.
-     * @property {string} full - A fully rounded border (circular).
-     */
-    radius?: "md" | "lg" | "xl" | "full";
-    /**
-     * Defines the size variants for the `Button`.
-     * @property {string} md - A medium button size with standard padding and text.
-     * @property {string} lg - A large button size with larger padding and text.
-     * @property {string} xl - A extra large button size with larger padding and text.
-     */
-    size?: "md" | "lg" | "xl";
-}
+import { ButtonProps } from "@/types";
 /**
- * A React component that extends the HTML `<button>` element to provide additional styling and functionality.
+ * 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.
  *
- * The `Button` component can be customized using standard HTML button attributes and additional props like `size`.
- * It supports the `children` prop to display content inside the button and can accept other props such as
- * `onClick`, `disabled`, `className`, and more.
+ * 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.
+ * - `radius` (optional): Defines the border-radius of the button, making its corners rounded.
+ *   Options include `"sm"`, `"md"`, `"lg"`, `"xl"`, or `"full"`.
+ * - `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.
  *
- * @component
- * @param {Object} props - The props for the Button component.
- * @param {string} props.radius - The radius style of the button default `xl`.
- * @param {('md' | 'lg' | 'xl')} [props.size='medium'] - The size of the button default `md`.
- * @param {string} [props.variant] - The variant style of the button default `solid`.
- * @param {string} [props.className] - Additional class names to apply to the button for styling.
- * @param {function} [props.onClick] - The function to call when the button is clicked.
- * @returns {JSX.Element} A customizable button component that supports standard button props.
+ * 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.
  *
- * @example
- * // Usage in a React component
- * import {Button} from 'secptrum-ui';
+ * 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.
  *
- * function App() {
- *   return (
- *     <Button size="lg" variant='outlined' >
- *       Click Me!
- *     </Button>
- *   );
- * }
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button for more information on standard HTML button attributes.
+ * Example:
+ * ```
+ * <Button
+ *   variant="outline"
+ *   size="md"
+ *   radius="lg"
+ *   onClick={() => console.log("Button clicked!")}
+ *   icon={FaUser}
+ * >
+ *   Click Me
+ * </Button>
+ * ```
  */
-declare const Button: ({ children, radius, variant, size, ...props }: ButtonProps) => JSX.Element;
+declare const Button: ({ children, radius, variant, size, icon, isLoading, ...props }: ButtonProps) => JSX.Element;
 export default Button;
 //# sourceMappingURL=Button.d.ts.map

dist/components/Input/Input.d.ts

@@ -1,3 +0,39 @@
-declare const Input: () => import("react/jsx-runtime").JSX.Element;
+import { InputType } from "@/types";
+/**
+ * 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.
+ *
+ * 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"
+ * />
+ * ```
+ */
+declare const Input: ({ icon, variant, radius, Type, ...props }: InputType) => JSX.Element;
 export default Input;
 //# sourceMappingURL=Input.d.ts.map

dist/index.d.ts

 export { default as Button } from "./components/Button/Button";
+export { default as Box } from "./components/Box/Box";
+export { default as Icon } from "./components/Icon/Icon";
+export { default as ImagePicker } from "./components/ImagePicker/ImagePicker";
+export { default as Input } from "./components/Input/Input";
+export { default as Stack } from "./components/Stack/Stack";
 //# sourceMappingURL=index.d.ts.map

dist/styles/colors.d.ts

@@ -13,3 +13,16 @@ export declare const colors: {
     red600: string;
+    gray100: string;
+    gray400: string;
+    gray500: string;
+    neutral100: string;
+    neutral200: string;
+    neutral300: string;
+    neutral400: string;
+    neutral500: string;
+    neutral600: string;
+    slate100: string;
+    slate200: string;
+    slate400: string;
+    slate500: string;
 };
 //# sourceMappingURL=colors.d.ts.map

package.json

 {
   "name": "secptrum-ui",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "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.",
@@ -8,3 +8,3 @@ "main": "dist/secptrum-ui.cjs.js",
   "unpkg": "dist/secptrum-ui.umd.js",
-  "types": "dist/index.d.ts",
+  "types": "dist/types/index.d.ts",
   "exports": {
@@ -14,3 +14,3 @@ ".": {
       "require": "./dist/secptrum-ui.cjs.js",
-      "types": "./dist/index.d.ts"
+      "types": "./dist/types/index.d.ts"
     }
@@ -24,6 +24,9 @@ },
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "chromatic": "npx chromatic"
   },
   "keywords": [],
-  "author": "Rapheal Chizitere",
+  "author": {
+    "name": "Rapheal Chizitere"
+  },
   "license": "MIT",
@@ -34,2 +37,3 @@ "dependencies": {
     "react-dom": "^18.3.1",
+    "react-icons": "^5.3.0",
     "styled-components": "^6.1.13"
@@ -55,8 +59,11 @@ },
     "@types/styled-components": "^5.1.34",
+    "chromatic": "^11.7.1",
     "rollup": "^2.79.1",
+    "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-terser": "^7.0.2",
     "storybook": "^8.2.9",
+    "ts-loader": "^9.5.1",
     "typescript": "^5.5.4"
   }
 }

README.md

 # SecptrumUI
 
-**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.
+**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.
 
@@ -28,6 +28,6 @@ ## Table of Contents
 # Using npm
-npm install secptrum-ui styled-components
+npm install secptrum-ui styled-components react-icons
 
 # Using yarn
-yarn add secptrum-ui styled-components
+yarn add secptrum-ui styled-components react-icons
 ```
@@ -69,14 +69,19 @@
 - [Box](#Box): A versatile container component for layout and styling purposes.
+- [ImagePicker](#ImagePicker): A picker components that allows users to select and upload an image.
 
+## Button
+
+- `Button`: 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.
+
 ## Input
 
-- `Input`: A customizable input field component for user text input. Supports various types, sizes, and validation.
+- `Input`: 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.
 
 ## Stack
 
-- `Stack`: A layout component that arranges its children in a vertical or horizontal stack with adjustable spacing.
+- `Stack`: 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,
 
 ## Box
 
-- `Box`: A flexible container component that can be used for layout, styling, and spacing. Supports padding, margins, borders, and other styling options.
+- `Box`: A flexible container component that serves as a building block for layout and styling. The Box component allows you to easily control spacing (padding and margin), alignment, borders, and other CSS properties through props.
 
@@ -83,0 +88,0 @@ For a full list of components and their usage, please refer to the [documentation](https://secptrumui.vercel.app).

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

7516951

increased by895.33%

Number of package files

44

increased by144.44%

Lines of code

1697

increased by125.66%

Number of lines in readme file

121

increased by4.31%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

5

increased by25%

Dev dependency count

25

increased by13.64%

Dependency changes

• + Addedreact-icons@^5.3.0

• + Addedreact-icons@5.4.0(transitive)