meticulous-ui 1.0.33 → 1.1.1

package/README.md

@@ -44,6 +44,10 @@ function App() {
 export default App;
 ```
 
+## 🚀 Demo
+
+<a href="https://xe3110.github.io/meticulous-ui/" target="_blank">https://xe3110.github.io/meticulous-ui/</a>
+
 ## 📦 Components
 
 | Component    | Description                           |
@@ -148,7 +152,7 @@ export default App;
 | `red`        | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
 | `teal`       | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
 | `violet`     | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
-| `white`      | #FFFFFF                                                                           |
+| `white`      | #FFFFFF                                                                         |
 | `yellow`     | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
 
 ## 📦 Utils
@@ -160,10 +164,6 @@ export default App;
 | `hasEqualProps`   | Takes two args: Component’s previous props & its new props; returns true if all-non functional props are equal |
 | `isNonEmptyArray` | Takes an array & returns true if is not empty                                                                  |
 
-## Demo
-
-<a href="https://xe3110.github.io/meticulous-ui/" target="_blank">https://xe3110.github.io/meticulous-ui/</a>
-
 ## 🌱 Features
 
 ⚛️ Built with React + Styled Components

package/dist/README.md

@@ -0,0 +1,192 @@
+# meticulous-ui
+
+A lightweight, modern React component library designed for elegance and precision ✨
+
+---
+
+## 🚀 Installation
+
+```
+npm install meticulous-ui
+```
+
+# or
+
+```
+yarn add meticulous-ui
+```
+
+## 🧩 Usage
+
+```jsx
+import { useState } from 'react';
+
+import Pagination from 'meticulous-ui/components/Pagination';
+import ChevronLeft from 'meticulous-ui/components/Icons/ChevronLeft';
+import Ripple from 'meticulous-ui/components/Ripple';
+import blue from 'meticulous-ui/colors/blue';
+import capFirstLetter from 'meticulous-ui/utils/capFirstLetter';
+
+function App() {
+  const [pageNumber, setPageNumber] = useState(1);
+
+  return (
+    <div>
+      <h2>{capFirstLetter('example with pagination')}</h2> // returns: Example with pagination
+      <Ripple rippleColor={blue.m50}>
+        <ChevronLeft size={10} color={blue.m400} onClick={setPrevPage} />
+      </Ripple>
+      <Pagination totalPages={10} pageNumber={pageNumber} setPageNumber={setPageNumber} />
+    </div>
+  );
+}
+
+export default App;
+```
+
+## 📦 Components
+
+| Component    | Description                           |
+| ------------ | ------------------------------------- |
+| `Pagination` | Fully responsive pagination component |
+| `Ripple`     | A concentric circles visual animation |
+
+## 📦 Icon Components
+
+| Icons                   | Description                        |
+| ----------------------- | ---------------------------------- |
+| `ChevronLeft`           | Left navigation icon               |
+| `ChevronRight`          | Right navigation icon              |
+| `ChevronUp`             | Up navigation icon                 |
+| `ChevronDown`           | Down navigation icon               |
+| `Add`                   | Add icon                           |
+| `AddCircle`             | Add circle icon                    |
+| `AddCircleFilled`       | Add Circle Filled icon             |
+| `ArrowRight`            | Right Arrow icon                   |
+| `ArrowLeft`             | Left Arrow icon                    |
+| `ArrowUp`               | Up Arrow icon                      |
+| `ArrowDown`             | Down Arrow icon                    |
+| `BellFilled`            | Bell/Notification filled icon      |
+| `BellOffFilled`         | Bell/Notification off filled icon  |
+| `BellOutline`           | Bell/Notification outline icon     |
+| `BellOffOutline`        | Bell/Notification off outline icon |
+| `BookmarkFilled`        | Bookmark filled icon               |
+| `BookmarkOutline`       | Bookmark outline icon              |
+| `ClockCircleOutline`    | Clock circle outline icon          |
+| `ClockSquareOutline`    | Clock square outline icon          |
+| `Close`                 | Close icon                         |
+| `CloseCircleFilled`     | Close circle filled icon           |
+| `CloseCircleOutline`    | Close circle outline icon          |
+| `CommentBubbleFilled`   | Comment bubble filled icon         |
+| `CommentBubbleOutline`  | Comment bubble outline icon        |
+| `CommentFilled`         | Comment filled icon                |
+| `CommentLineFilled`     | Comment line filled icon           |
+| `CommentLineOutline`    | Comment line outline icon          |
+| `CommentOutline`        | Comment outline icon               |
+| `DotsHorizontalFilled`  | Dots horizontal filled icon        |
+| `DotsHorizontalOutline` | Dots horizontal outline icon       |
+| `DotsVerticalFilled`    | Dots vertical filled icon          |
+| `HamburgerMenu`         | Hamburger menu icon                |
+| `HamburgerSpaced`       | Spaced Hamburger icon              |
+| `HeartFilled`           | Heart filled icon                  |
+| `HeartOutline`          | Heart outline icon                 |
+| `HomeFilled`            | Home filled icon                   |
+| `HomeOutline`           | Home outline icon                  |
+| `Link`                  | Link icon                          |
+| `Minus`                 | Minus icon                         |
+| `MinusCircle`           | Minus circle outline icon          |
+| `MinusCircleFilled`     | Minus circle filled icon           |
+| `ProfileFemaleOutline`  | Female profile outline icon        |
+| `ProfileGroupFilled`    | Profiles filled icon               |
+| `ProfileMaleFilled`     | Male profile filled icon           |
+| `ProfileMaleOutline`    | Male profile ouline icon           |
+| `Search`                | Search icon                        |
+| `SettingFilled`         | Setting filled icon                |
+| `SettingOutline`        | Setting outline icon               |
+| `ShareAllFilled`        | Share all filled icon              |
+| `ShareAllOutline`       | Share all outline icon             |
+| `ShareBoxOutline`       | Share box outline icon             |
+| `ShareFilled`           | Share filled icon                  |
+| `ShareOutline`          | Share outline icon                 |
+| `ShareThickFilled`      | Share thick filled icon            |
+| `StarFilled`            | Star filled icon                   |
+| `StarOutline`           | Star outline icon                  |
+| `ThumbsDownFilled`      | Thumbs down filled icon            |
+| `ThumbsDownOutline`     | Thumbs down outline icon           |
+| `ThumbsUpFilled`        | Thumbs up filled icon              |
+| `ThumbsUpOutline`       | Thumbs up outline icon             |
+| `Upload`                | Upload icon                        |
+| `UploadBoxFilled`       | Upload box filled icon             |
+| `UploadBoxOutline`      | Upload box outline icon            |
+
+## 📦 Tokens
+
+| Types    | Description                     |
+| -------- | ------------------------------- |
+| `Colors` | At least 10 shades of 23 colors |
+
+| Colors       | Shades                                                                            |
+| ------------ | --------------------------------------------------------------------------------- |
+| `amber`      | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
+| `black`      | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900                         |
+| `blue`       | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
+| `blueGray`   | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900                         |
+| `brown`      | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900                         |
+| `cider`      | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900                         |
+| `cyan`       | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
+| `deepOrange` | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
+| `deepPurple` | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
+| `green`      | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
+| `grey`       | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900                         |
+| `indigo`     | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
+| `lightBlue`  | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
+| `lightGreen` | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
+| `lime`       | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
+| `orange`     | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
+| `pink`       | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
+| `purple`     | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
+| `red`        | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
+| `teal`       | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
+| `violet`     | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
+| `white`      | #FFFFFF                                                                           |
+| `yellow`     | m50, m100, m200, m300, m400, m500, m600, m700, m800, m900, a100, a200, a400, a700 |
+
+## 📦 Utils
+
+| Functions         | Description                                                                                                    |
+| ----------------- | -------------------------------------------------------------------------------------------------------------- |
+| `capFirstLetter`  | Takes a string and returns with first letter capitalised                                                       |
+| `compose`         | Performs right-to-left function composition using transforming function                                        |
+| `hasEqualProps`   | Takes two args: Component’s previous props & its new props; returns true if all-non functional props are equal |
+| `isNonEmptyArray` | Takes an array & returns true if is not empty                                                                  |
+
+## Demo
+
+<a href="https://xe3110.github.io/meticulous-ui/" target="_blank">https://xe3110.github.io/meticulous-ui/</a>
+
+## 🌱 Features
+
+⚛️ Built with React + Styled Components
+
+💨 Zero external CSS dependencies
+
+🧱 Easy to extend and customize
+
+🪶 Small bundle size
+
+📦 ESM + CJS support out of the box
+
+## 🛠️ Build Setup (for contributors)
+
+```
+
+# install dependencies
+npm install
+
+# run development build
+npm run dev
+
+# build for production (dist/)
+npm run build
+
+```

package/dist/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "meticulous-ui",
+  "version": "1.1.0",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/xe3110/meticulous-ui.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "files": [
+    "index.js",
+    "colors",
+    "components",
+    "utils",
+    "package.json",
+    "README.md"
+  ],
+  "type": "module",
+  "peerDependencies": {
+    "lodash-es": "^4.17.21",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "styled-components": "^6.0.0"
+  },
+  "keywords": [
+    "react",
+    "ui",
+    "icons",
+    "components",
+    "pagination",
+    "colors",
+    "shades",
+    "ripple",
+    "utils",
+    "meticulous-ui"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "format": "npx prettier --write .",
+    "publish:latest": "npm run build && npm publish --access public",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "deploy-storybook": "gh-pages -d storybook-static",
+    "generate-icons": "node src/scripts/generateIcons.js && npx prettier --write .",
+    "prepublish": "npm run build && cp package.json dist/ && cp README.md dist/ && rm -rf dist/_virtual",
+    "publish:dist": "npm publish dist/"
+  },
+  "devDependencies": {
+    "@storybook/addon-docs": "^9.1.13",
+    "@storybook/mdx2-csf": "^1.1.0",
+    "@storybook/react-vite": "^9.1.10",
+    "@vitejs/plugin-react": "^5.0.4",
+    "eslint-plugin-storybook": "^9.1.10",
+    "gh-pages": "^6.3.0",
+    "prop-types": "^15.8.1",
+    "storybook": "^9.1.10",
+    "svgo": "^4.0.0",
+    "vite-plugin-svgr": "^4.5.0"
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meticulous-ui",
-  "version": "1.0.33",
+  "version": "1.1.1",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "repository": {

package/colors/amber.js

@@ -1,19 +0,0 @@
-const F = {
-  m50: "#FFF8E1",
-  m100: "#FFECB3",
-  m200: "#FFE082",
-  m300: "#FFD54F",
-  m400: "#FFCA28",
-  m500: "#FFC107",
-  m600: "#FFB300",
-  m700: "#FFA000",
-  m800: "#FF8F00",
-  m900: "#FF6F00",
-  a100: "#FFE57F",
-  a200: "#FFD740",
-  a400: "#FFC400",
-  a700: "#FFAB00"
-};
-export {
-  F as default
-};

package/colors/black.js

@@ -1,25 +0,0 @@
-const m = {
-  m50: "#FAFAFA",
-  // almost white (for very light backgrounds)
-  m100: "#E0E0E0",
-  // light gray
-  m200: "#BDBDBD",
-  // medium light gray
-  m300: "#9E9E9E",
-  // gray
-  m400: "#757575",
-  // medium dark gray
-  m500: "#616161",
-  // dark gray
-  m600: "#424242",
-  // very dark gray
-  m700: "#212121",
-  // near black
-  m800: "#121212",
-  // dark black
-  m900: "#000000"
-  // pure black
-};
-export {
-  m as default
-};

package/colors/blue.js

@@ -1,19 +0,0 @@
-const F = {
-  m50: "#E3F2FD",
-  m100: "#BBDEFB",
-  m200: "#90CAF9",
-  m300: "#64B5F6",
-  m400: "#42A5F5",
-  m500: "#2196F3",
-  m600: "#1E88E5",
-  m700: "#1976D2",
-  m800: "#1565C0",
-  m900: "#0D47A1",
-  a100: "#82B1FF",
-  a200: "#448AFF",
-  a400: "#2979FF",
-  a700: "#2962FF"
-};
-export {
-  F as default
-};

package/colors/blueGray.js

@@ -1,15 +0,0 @@
-const m = {
-  m50: "#ECEFF1",
-  m100: "#CFD8DC",
-  m200: "#B0BEC5",
-  m300: "#90A4AE",
-  m400: "#78909C",
-  m500: "#607D8B",
-  m600: "#546E7A",
-  m700: "#455A64",
-  m800: "#37474F",
-  m900: "#263238"
-};
-export {
-  m as default
-};

package/colors/brown.js

@@ -1,15 +0,0 @@
-const m = {
-  m50: "#EFEBE9",
-  m100: "#D7CCC8",
-  m200: "#BCAAA4",
-  m300: "#A1887F",
-  m400: "#8D6E63",
-  m500: "#795548",
-  m600: "#6D4C41",
-  m700: "#5D4037",
-  m800: "#4E342E",
-  m900: "#3E2723"
-};
-export {
-  m as default
-};

package/colors/cider.js

@@ -1,15 +0,0 @@
-const F = {
-  m50: "#FFF1E6",
-  m100: "#FFD9B8",
-  m200: "#FFBF8A",
-  m300: "#FFA45C",
-  m400: "#FF8C3A",
-  m500: "#FF7300",
-  m600: "#E06600",
-  m700: "#B24D00",
-  m800: "#803300",
-  m900: "#4D1A00"
-};
-export {
-  F as default
-};

package/colors/cyan.js

@@ -1,19 +0,0 @@
-const F = {
-  m50: "#E0F7FA",
-  m100: "#B2EBF2",
-  m200: "#80DEEA",
-  m300: "#4DD0E1",
-  m400: "#26C6DA",
-  m500: "#00BCD4",
-  m600: "#00ACC1",
-  m700: "#0097A7",
-  m800: "#00838F",
-  m900: "#006064",
-  a100: "#84FFFF",
-  a200: "#18FFFF",
-  a400: "#00E5FF",
-  a700: "#00B8D4"
-};
-export {
-  F as default
-};

package/colors/deepOrange.js

@@ -1,19 +0,0 @@
-const F = {
-  m50: "#FBE9E7",
-  m100: "#FFCCBC",
-  m200: "#FFAB91",
-  m300: "#FF8A65",
-  m400: "#FF7043",
-  m500: "#FF5722",
-  m600: "#F4511E",
-  m700: "#E64A19",
-  m800: "#D84315",
-  m900: "#BF360C",
-  a100: "#FF9E80",
-  a200: "#FF6E40",
-  a400: "#FF3D00",
-  a700: "#DD2C00"
-};
-export {
-  F as default
-};

package/colors/deepPurple.js

@@ -1,19 +0,0 @@
-const m = {
-  m50: "#EDE7F6",
-  m100: "#D1C4E9",
-  m200: "#B39DDB",
-  m300: "#9575CD",
-  m400: "#7E57C2",
-  m500: "#673AB7",
-  m600: "#5E35B1",
-  m700: "#512DA8",
-  m800: "#4527A0",
-  m900: "#311B92",
-  a100: "#B388FF",
-  a200: "#7C4DFF",
-  a400: "#651FFF",
-  a700: "#6200EA"
-};
-export {
-  m as default
-};

package/colors/green.js

@@ -1,19 +0,0 @@
-const m = {
-  m50: "#E8F5E9",
-  m100: "#C8E6C9",
-  m200: "#A5D6A7",
-  m300: "#81C784",
-  m400: "#66BB6A",
-  m500: "#4CAF50",
-  m600: "#43A047",
-  m700: "#388E3C",
-  m800: "#2E7D32",
-  m900: "#1B5E20",
-  a100: "#B9F6CA",
-  a200: "#69F0AE",
-  a400: "#00E676",
-  a700: "#00C853"
-};
-export {
-  m as default
-};

package/colors/grey.js

@@ -1,15 +0,0 @@
-const E = {
-  m50: "#FAFAFA",
-  m100: "#F5F5F5",
-  m200: "#EEEEEE",
-  m300: "#E0E0E0",
-  m400: "#BDBDBD",
-  m500: "#9E9E9E",
-  m600: "#757575",
-  m700: "#616161",
-  m800: "#424242",
-  m900: "#212121"
-};
-export {
-  E as default
-};

package/colors/indigo.js

@@ -1,19 +0,0 @@
-const F = {
-  m50: "#E8EAF6",
-  m100: "#C5CAE9",
-  m200: "#9FA8DA",
-  m300: "#7986CB",
-  m400: "#5C6BC0",
-  m500: "#3F51B5",
-  m600: "#3949AB",
-  m700: "#303F9F",
-  m800: "#283593",
-  m900: "#1A237E",
-  a100: "#8C9EFF",
-  a200: "#536DFE",
-  a400: "#3D5AFE",
-  a700: "#304FFE"
-};
-export {
-  F as default
-};

package/colors/lightBlue.js

@@ -1,19 +0,0 @@
-const F = {
-  m50: "#E1F5FE",
-  m100: "#B3E5FC",
-  m200: "#81D4FA",
-  m300: "#4FC3F7",
-  m400: "#29B6F6",
-  m500: "#03A9F4",
-  m600: "#039BE5",
-  m700: "#0288D1",
-  m800: "#0277BD",
-  m900: "#01579B",
-  a100: "#80D8FF",
-  a200: "#40C4FF",
-  a400: "#00B0FF",
-  a700: "#0091EA"
-};
-export {
-  F as default
-};

package/colors/lightGreen.js

@@ -1,19 +0,0 @@
-const m = {
-  m50: "#F1F8E9",
-  m100: "#DCEDC8",
-  m200: "#C5E1A5",
-  m300: "#AED581",
-  m400: "#9CCC65",
-  m500: "#8BC34A",
-  m600: "#7CB342",
-  m700: "#689F38",
-  m800: "#558B2F",
-  m900: "#33691E",
-  a100: "#CCFF90",
-  a200: "#B2FF59",
-  a400: "#76FF03",
-  a700: "#64DD17"
-};
-export {
-  m as default
-};

package/colors/lime.js

@@ -1,19 +0,0 @@
-const F = {
-  m50: "#F9FBE7",
-  m100: "#F0F4C3",
-  m200: "#E6EE9C",
-  m300: "#DCE775",
-  m400: "#D4E157",
-  m500: "#CDDC39",
-  m600: "#C0CA33",
-  m700: "#AFB42B",
-  m800: "#9E9D24",
-  m900: "#827717",
-  a100: "#F4FF81",
-  a200: "#EEFF41",
-  a400: "#C6FF00",
-  a700: "#AEEA00"
-};
-export {
-  F as default
-};

package/colors/orange.js

@@ -1,19 +0,0 @@
-const F = {
-  m50: "#FFF3E0",
-  m100: "#FFE0B2",
-  m200: "#FFCC80",
-  m300: "#FFB74D",
-  m400: "#FFA726",
-  m500: "#FF9800",
-  m600: "#FB8C00",
-  m700: "#F57C00",
-  m800: "#EF6C00",
-  m900: "#E65100",
-  a100: "#FFD180",
-  a200: "#FFAB40",
-  a400: "#FF9100",
-  a700: "#FF6D00"
-};
-export {
-  F as default
-};

package/colors/pink.js

@@ -1,19 +0,0 @@
-const F = {
-  m50: "#FCE4EC",
-  m100: "#F8BBD0",
-  m200: "#F48FB1",
-  m300: "#F06292",
-  m400: "#EC407A",
-  m500: "#E91E63",
-  m600: "#D81B60",
-  m700: "#C2185B",
-  m800: "#AD1457",
-  m900: "#880E4F",
-  a100: "#FF80AB",
-  a200: "#FF4081",
-  a400: "#F50057",
-  a700: "#C51162"
-};
-export {
-  F as default
-};

package/colors/purple.js

@@ -1,19 +0,0 @@
-const A = {
-  m50: "#F3E5F5",
-  m100: "#E1BEE7",
-  m200: "#CE93D8",
-  m300: "#BA68C8",
-  m400: "#AB47BC",
-  m500: "#9C27B0",
-  m600: "#8E24AA",
-  m700: "#7B1FA2",
-  m800: "#6A1B9A",
-  m900: "#4A148C",
-  a100: "#EA80FC",
-  a200: "#E040FB",
-  a400: "#D500F9",
-  a700: "#AA00FF"
-};
-export {
-  A as default
-};

package/colors/red.js

@@ -1,19 +0,0 @@
-const F = {
-  m50: "#FFEBEE",
-  m100: "#FFCDD2",
-  m200: "#EF9A9A",
-  m300: "#E57373",
-  m400: "#EF5350",
-  m500: "#F44336",
-  m600: "#E53935",
-  m700: "#D32F2F",
-  m800: "#C62828",
-  m900: "#B71C1C",
-  a100: "#FF8A80",
-  a200: "#FF5252",
-  a400: "#FF1744",
-  a700: "#D50000"
-};
-export {
-  F as default
-};