meticulous-ui 3.6.5 → 3.7.0

package/README.md

@@ -34,12 +34,12 @@ npm install react react-dom styled-components
 
 Unlike many UI libraries, meticulous-ui combines:
 
-✅ Components
-✅ Hooks
-✅ Utilities
-✅ Icons
-✅ Tokens
-✅ Tree-shaking
+✅ Components  
+✅ Hooks  
+✅ Utilities  
+✅ Icons  
+✅ Tokens  
+✅ Tree-shaking  
 ✅ Styled-components theming
 
 One install instead of 5 packages.
@@ -77,33 +77,37 @@ import blue from 'meticulous-ui/colors/blue';
 
 ## 📦 Components
 
-| Component        | Description                                                                                                      |
-| ---------------- | ---------------------------------------------------------------------------------------------------------------- |
-| `Pagination`     | Fully responsive pagination component                                                                            |
-| `Toast`          | Push 4 types of notifications on screen                                                                          |
-| `Timer`          | Renders analog / digital clock with alarm                                                                        |
-| `OtpInput`       | Gives inputs to enter and edit OTP                                                                               |
-| `VideoPlayer`    | Renders video with keyboard shortcuts                                                                            |
-| `Image`          | Renders image with shimmer, lower resolution                                                                     |
-| `Input`          | Renders input box to let user enter input                                                                        |
-| `Checkbox`       | Renders checkbox to let user give boolean value                                                                  |
-| `RadioGroup`     | Renders radio options in a group to let user select                                                              |
-| `FileUploader`   | Renders a button type input from where user can upload                                                           |
-| `Textarea`       | Renders textarea box to let user enter description                                                               |
-| `Dropdown`       | Renders dropdown to select from options                                                                          |
-| `Selectbox`      | Renders selectbox to select multiple values from options                                                         |
-| `Spinner`        | Renders a spinner to show the loading state                                                                      |
-| `Loader`         | Renders a loader with dots to show the loading state                                                             |
-| `PageLoader`     | Renders a loader with line at the top of page                                                                    |
-| `Button`         | Renders a button to click & take an action                                                                       |
-| `Shimmer`        | Animated skeleton loading placeholder                                                                            |
-| `Carousel`       | Carousel providing slider between components displaying slides                                                   |
-| `Modal`          | Accessible dialog overlay with title, body, footer, Escape/overlay-click dismissal, and mobile bottom-sheet mode |
-| `DatePicker`     | Calendar-based date picker with month/year navigation                                                            |
-| `Headings`       | Semantic heading components: `H1`–`H6`                                                                           |
-| `P`              | Styled paragraph component                                                                                       |
-| `ToastContainer` | Renders the container that displays active Toast notifications                                                   |
-| `RootComponent`  | This is the required wrapper for any app that uses meticulous-ui                                                 |
+Production-ready React components for forms, feedback, layout, media, navigation, and interactions.
+
+### Core UI
+
+`Button` · `Input` · `Textarea` · `Checkbox` · `RadioGroup` · `Dropdown` · `Selectbox`
+
+### Feedback & Loading
+
+`Toast` · `ToastContainer` · `Spinner` · `Loader` · `PageLoader` · `Shimmer`
+
+### Overlays & Navigation
+
+`Modal` · `Pagination` · `Carousel`
+
+### Forms & Productivity
+
+`OtpInput` · `FileUploader` · `DatePicker`
+
+### Media
+
+`Image` · `VideoPlayer`
+
+### Typography
+
+`Headings` (`H1`–`H6`) · `P`
+
+### Utility Components
+
+`Timer` · `RootComponent`
+
+👉 Explore full docs and live examples on the [demo site](https://meticulous-ui.vercel.app/).
 
 ## 📦 Icon Components
 

package/cjs/colors/amber.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});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"};exports.amber=F;

package/cjs/colors/black.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={m50:"#FAFAFA",m100:"#E0E0E0",m200:"#BDBDBD",m300:"#9E9E9E",m400:"#757575",m500:"#616161",m600:"#424242",m700:"#212121",m800:"#121212",m900:"#000000"};exports.black=e;exports.default=e;

package/cjs/colors/blue.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={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"};exports.blue=e;exports.default=e;

package/cjs/colors/blueGray.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m={m50:"#ECEFF1",m100:"#CFD8DC",m200:"#B0BEC5",m300:"#90A4AE",m400:"#78909C",m500:"#607D8B",m600:"#546E7A",m700:"#455A64",m800:"#37474F",m900:"#263238"};exports.blueGray=m;

package/cjs/colors/brown.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={m50:"#EFEBE9",m100:"#D7CCC8",m200:"#BCAAA4",m300:"#A1887F",m400:"#8D6E63",m500:"#795548",m600:"#6D4C41",m700:"#5D4037",m800:"#4E342E",m900:"#3E2723"};exports.brown=e;exports.default=e;

package/cjs/colors/cider.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const F={m50:"#FFF1E6",m100:"#FFD9B8",m200:"#FFBF8A",m300:"#FFA45C",m400:"#FF8C3A",m500:"#FF7300",m600:"#E06600",m700:"#B24D00",m800:"#803300",m900:"#4D1A00"};exports.cider=F;

package/cjs/colors/colorMap.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./amber.cjs"),r=require("./black.cjs"),t=require("./blue.cjs"),u=require("./blueGray.cjs"),l=require("./brown.cjs"),i=require("./cider.cjs"),n=require("./cyan.cjs"),o=require("./deepOrange.cjs"),c=require("./deepPurple.cjs"),a=require("./green.cjs"),s=require("./grey.cjs"),d=require("./indigo.cjs"),q=require("./lightBlue.cjs"),g=require("./lightGreen.cjs"),b=require("./lime.cjs"),p=require("./orange.cjs"),f=require("./pink.cjs"),y=require("./purple.cjs"),h=require("./red.cjs"),m=require("./teal.cjs"),w=require("./violet.cjs"),G=require("./white.cjs"),k=require("./yellow.cjs"),v={amber:e.amber,black:r.black,blue:t.blue,blueGray:u.blueGray,brown:l.brown,cider:i.cider,cyan:n.cyan,deepOrange:o.deepOrange,deepPurple:c.deepPurple,green:a.default,grey:s.default,indigo:d.default,lightBlue:q.lightBlue,lightGreen:g.lightGreen,lime:b.lime,orange:p.default,pink:f.default,purple:y.default,red:h.default,teal:m.default,violet:w.default,white:G.default,yellow:k.default};exports.default=v;

package/cjs/colors/cyan.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});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"};exports.cyan=F;

package/cjs/colors/deepOrange.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});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"};exports.deepOrange=F;

package/cjs/colors/deepPurple.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={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"};exports.deepPurple=e;

package/cjs/colors/green.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={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"};exports.default=e;exports.green=e;

package/cjs/colors/grey.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={m50:"#FAFAFA",m100:"#F5F5F5",m200:"#EEEEEE",m300:"#E0E0E0",m400:"#BDBDBD",m500:"#9E9E9E",m600:"#757575",m700:"#616161",m800:"#424242",m900:"#212121"};exports.default=e;exports.grey=e;

package/cjs/colors/indigo.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={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"};exports.default=e;exports.indigo=e;

package/cjs/colors/lightBlue.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});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"};exports.lightBlue=F;

package/cjs/colors/lightGreen.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={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"};exports.lightGreen=e;

package/cjs/colors/lime.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m={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"};exports.lime=m;

package/cjs/colors/orange.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});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"};exports.default=F;exports.orange=F;

package/cjs/colors/pink.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={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"};exports.default=e;exports.pink=e;

package/cjs/colors/purple.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={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"};exports.default=e;exports.purple=e;

package/cjs/colors/red.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={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"};exports.default=e;exports.red=e;

package/cjs/colors/teal.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={m50:"#E0F2F1",m100:"#B2DFDB",m200:"#80CBC4",m300:"#4DB6AC",m400:"#26A69A",m500:"#009688",m600:"#00897B",m700:"#00796B",m800:"#00695C",m900:"#004D40",a100:"#A7FFEB",a200:"#64FFDA",a400:"#1DE9B6",a700:"#00BFA5"};exports.default=e;exports.teal=e;

package/cjs/colors/violet.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const F={m50:"#F3E8FF",m100:"#E1BFFF",m200:"#CE96FF",m300:"#BA6EFF",m400:"#A955FF",m500:"#933DFF",m600:"#852AFF",m700:"#7718FF",m800:"#6800E6",m900:"#4D00B3",a100:"#D1A8FF",a200:"#B36CFF",a400:"#9400FF",a700:"#7A00E6"};exports.default=F;exports.violet=F;

package/cjs/colors/white.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="#FFFFFF";exports.default=e;exports.white=e;

package/cjs/colors/yellow.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const F={m50:"#FFFDE7",m100:"#FFF9C4",m200:"#FFF59D",m300:"#FFF176",m400:"#FFEE58",m500:"#FFEB3B",m600:"#FDD835",m700:"#FBC02D",m800:"#F9A825",m900:"#F57F17",a100:"#FFFF8D",a200:"#FFFF00",a400:"#FFEA00",a700:"#FFD600"};exports.default=F;exports.yellow=F;

package/cjs/components/Button/Button.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),T=require("react"),_=require("../Spinner/Spinner.cjs"),I=require("../../colors/colorMap.cjs"),y=require("../../colors/blue.cjs"),l=require("./styles.cjs"),L=require("../Ripple/Ripple.cjs"),M=require("../../colors/white.cjs"),P=require("../../colors/grey.cjs"),b=require("./constants.cjs"),R=require("prop-types"),S=t=>t&&t.__esModule?t:{default:t},e=S(R),K=({theme:t,children:i})=>o.jsx(L.default,{rippleColor:t.m100,children:i}),w=t=>{const{children:i,theme:s=y.blue,size:C=b.MEDIUM,width:d,leftIcon:z,rightIcon:B,isLoading:n,textColor:u,onKeyDown:m,...$}=t||{},a=T.useRef(0),x=r=>{if(r.key==="Enter"||r.key===" "){const g=Date.now();if(g-a.current<500){r.preventDefault(),r.stopPropagation();return}a.current=g}m?.(r)},{m400:q,m500:j,m600:v}=I.default[s]??y.blue,{height:c,width:f,font:D}=b.SIZE[C]||{},h=["white","yellow"].includes(s)?P.default.m600:M.default,p=o.jsxs(l.ButtonWrapper,{type:"button",...$,onKeyDown:x,$hoverColor:j,$activeColor:v,$selectedColor:q,$height:c,$width:d||f,disabled:t.disabled,$isLoading:n,children:[o.jsx(l.SpinnerWrapper,{$isLoading:n,children:o.jsx(_.default,{size:"small",color:u||h})}),o.jsx(l.Content,{$isLoading:n,$textColor:u||h,$font:D,children:i})]});return o.jsx(l.ButtonContainer,{$height:c,$width:d||f,disabled:t.disabled,$isLoading:n,children:n?p:o.jsx(K,{theme:s,children:p})})};w.propTypes={children:e.default.node,theme:e.default.string,size:e.default.string,width:e.default.oneOfType([e.default.string,e.default.number]),leftIcon:e.default.elementType,rightIcon:e.default.elementType,isLoading:e.default.bool,textColor:e.default.string,disabled:e.default.bool};exports.default=w;

package/cjs/components/Button/constants.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t="small",e="medium",o="large",h="ex-large",i={[t]:{height:4.48,width:8.4,font:1.6},[e]:{height:5.12,width:9.6,font:1.92},[o]:{height:5.76,width:10.8,font:2.24},[h]:{height:6.4,width:12,font:2.56}};exports.EX_LARGE=h;exports.LARGE=o;exports.MEDIUM=e;exports.SIZE=i;exports.SMALL=t;

package/cjs/components/Button/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Button.cjs");exports.default=e.default;

package/cjs/components/Button/styles.cjs

@@ -0,0 +1,65 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("styled-components"),i=require("../../colors/grey.cjs"),s=e=>e&&e.__esModule?e:{default:e},r=s(o),a=r.default.button`
+  height: ${({$height:e})=>e}rem;
+  width: ${({$width:e})=>e}rem;
+  border-radius: 0.96rem;
+  border: none;
+  padding: 0.96rem 0.64rem;
+  position: relative;
+  overflow: hidden;
+  background-color: ${({$selectedColor:e,disabled:t})=>t?i.default.m500:e};
+  cursor: ${({disabled:e,$isLoading:t})=>e?"not-allowed":t?"auto":"pointer"};
+
+  ${({$isLoading:e})=>e&&o.css`
+      pointer-events: none;
+    `};
+
+  ${({disabled:e,$isLoading:t})=>!(e||t)&&o.css`
+      &:hover {
+        background-color: ${({$hoverColor:n})=>n};
+      }
+
+      &:active {
+        background-color: ${({$activeColor:n})=>n};
+      }
+    `};
+
+  &:focus-visible {
+    outline: none;
+  }
+`,d=r.default.div`
+  font-size: ${({$font:e})=>e}rem;
+  font-weight: 500;
+  max-width: 100%;
+  overflow: hidden;
+  color: ${({$textColor:e})=>e};
+  opacity: ${({$isLoading:e})=>e?0:1};
+  transition: opacity 0.3s ease;
+`,l=r.default.div`
+  height: ${({$height:e})=>e}rem;
+  width: ${({$width:e})=>e}rem;
+  display: inline-block;
+  position: relative;
+  border-radius: 0.96rem;
+
+  ${({disabled:e,$isLoading:t})=>!(e||t)&&o.css`
+      box-shadow: 0 0.4rem 1.5rem rgba(0, 0, 0, 0.2);
+      transition:
+        transform 0.2s,
+        box-shadow 0.2s;
+
+      &:hover,
+      &:focus-within {
+        box-shadow: 0 0.6rem 2rem rgba(0, 0, 0, 0.3);
+        transform: translateY(-2px);
+      }
+    `};
+`,c=r.default.div`
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: ${({$isLoading:e})=>e?1:0};
+  transition: opacity 0.3s ease;
+  pointer-events: none;
+`;exports.ButtonContainer=l;exports.ButtonWrapper=a;exports.Content=d;exports.SpinnerWrapper=c;

package/cjs/components/Carousel/Carousel.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),r=require("react"),u=require("./styles.cjs"),ce=require("../Icons/ChevronLeft/ChevronLeft.cjs"),oe=require("../Icons/ChevronRight/ChevronRight.cjs"),T=50,y=2e3,le=()=>t.jsxs("svg",{width:12,height:12,viewBox:"0 0 12 12",fill:"currentColor","aria-hidden":"true",children:[t.jsx("rect",{x:"2",y:"1",width:"3",height:"10",rx:"1"}),t.jsx("rect",{x:"7",y:"1",width:"3",height:"10",rx:"1"})]}),de=()=>t.jsx("svg",{width:12,height:12,viewBox:"0 0 12 12",fill:"currentColor","aria-hidden":"true",children:t.jsx("path",{d:"M2 1.5l9 4.5-9 4.5V1.5z"})}),he=({data:X,renderCarousel:z,visibleSlides:E=1,hasArrow:k=!0,overlayArrows:a=!1,arrowTop:p,areDotsHidden:H=!1,autoSlide:w=!1,autoSlideSec:C=3,loop:d=!1,dragToSlide:m=!1,liveDrag:j=!1,liveDragMobile:R=!0,showProgress:N=!1,defaultIndex:U=0,onSlideChange:K,...A})=>{const[s,M]=r.useState(U),[L,h]=r.useState(!0),[O,D]=r.useState(!1),[f,x]=r.useState(!1),[Y,v]=r.useState(0),[P,g]=r.useState(!1),[I,B]=r.useState(!1),o=r.useRef(null),c=r.useRef(null),l=r.useRef(null),q=r.useRef(null);r.useEffect(()=>{const e=window.matchMedia("(max-width: 1024px)");B(e.matches);const n=ae=>B(ae.matches);return e.addEventListener("change",n),()=>e.removeEventListener("change",n)},[]);const i=X.length-E,b=()=>M(e=>d&&e===0?i:Math.max(e-1,0)),$=()=>M(e=>d&&e>=i?0:Math.min(e+1,i));r.useEffect(()=>{K?.(s)},[s]);const V=()=>{a&&(clearTimeout(l.current),h(!0),l.current=setTimeout(()=>h(!1),y))},G=()=>{x(!0),a&&(clearTimeout(l.current),h(!0))},J=()=>{x(!1),a&&(l.current=setTimeout(()=>h(!1),y))};r.useEffect(()=>{if(a)return l.current=setTimeout(()=>h(!1),y),()=>clearTimeout(l.current)},[a]),r.useEffect(()=>{if(!w||f)return;const e=setInterval(()=>{M(n=>n>=i?0:n+1)},C*1e3);return()=>clearInterval(e)},[w,C,f,i]);const W=e=>d?e:s===0&&e>0||s===i&&e<0?e*.3:e,Q=e=>{o.current=e.touches[0].clientX,R&&I&&g(!0),V()},Z=e=>{!R||!I||o.current===null||v(W(e.touches[0].clientX-o.current))},ee=e=>{if(R&&I&&(g(!1),v(0)),o.current===null)return;const n=o.current-e.changedTouches[0].clientX;n>T?$():n<-T&&b(),o.current=null},te=e=>{m&&(c.current=e.clientX,j&&g(!0))},ne=e=>{!m||!j||c.current===null||v(W(e.clientX-c.current))},re=e=>{if(!m||c.current===null)return;j&&(g(!1),v(0));const n=c.current-e.clientX;n>T?$():n<-T&&b(),c.current=null},se=e=>{e.key==="ArrowLeft"?(e.preventDefault(),b()):e.key==="ArrowRight"&&(e.preventDefault(),$())},_=q.current?.clientWidth??0,ue=_>0?Y/_*100:0,ie=-(s*(100/E))+ue,F=p!==void 0?typeof p=="number"?`${p}px`:p:void 0,S=i+1;return t.jsxs(u.Wrapper,{onClick:V,onMouseEnter:G,onMouseLeave:J,onMouseMove:ne,onMouseUp:re,onKeyDown:se,role:"region","aria-label":"Carousel",...A,children:[t.jsxs(u.SlideArea,{onTouchStart:Q,onTouchMove:Z,onTouchEnd:ee,children:[k&&t.jsx(u.NavButton,{onClick:b,disabled:!d&&s===0,"aria-label":"Previous slide",$direction:"prev",$overlay:a,$visible:L,$arrowTop:F,$viewportFocused:O,children:t.jsx(ce.default,{size:20,"aria-hidden":"true"})}),t.jsx(u.SlideViewport,{ref:q,tabIndex:0,"aria-label":"Carousel slides. Use arrow keys to navigate.",$draggable:m,onFocus:()=>{D(!0),x(!0)},onBlur:()=>{D(!1),x(!1)},onMouseDown:te,onMouseLeave:e=>{e.buttons!==1&&(j&&P&&(g(!1),v(0)),c.current=null)},children:t.jsx(u.SlideTrack,{$translateX:ie,$visibleSlides:E,$dragging:P,children:X.map(z)})}),k&&t.jsx(u.NavButton,{onClick:$,disabled:!d&&s===i,"aria-label":"Next slide",$direction:"next",$overlay:a,$visible:L,$arrowTop:F,$viewportFocused:O,children:t.jsx(oe.default,{size:20,"aria-hidden":"true"})}),w&&t.jsx(u.PauseButton,{onClick:()=>x(e=>!e),"aria-label":f?"Play slideshow":"Pause slideshow",children:f?t.jsx(de,{}):t.jsx(le,{})})]}),t.jsxs("div",{"aria-live":"polite","aria-atomic":"true",style:{position:"absolute",width:1,height:1,overflow:"hidden",clip:"rect(0,0,0,0)",whiteSpace:"nowrap"},children:["Slide ",s+1," of ",S]}),w&&N&&t.jsx(u.ProgressBar,{$duration:C,$paused:f},s),!H&&t.jsx(u.DotsWrapper,{children:Array.from({length:S}).map((e,n)=>t.jsx(u.Dot,{$active:n===s,onClick:()=>M(n),"aria-label":`Slide ${n+1} of ${S}`,"aria-current":n===s?"true":void 0},n))})]})};exports.default=he;

package/cjs/components/Carousel/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Carousel.cjs");exports.default=e.default;

package/cjs/components/Carousel/styles.cjs

@@ -0,0 +1,148 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("styled-components"),i=e=>e&&e.__esModule?e:{default:e},t=i(r),n=t.default.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  gap: 12px;
+  outline: none;
+`,d=t.default.div`
+  position: relative;
+  width: 100%;
+`,a=t.default.div`
+  overflow: hidden;
+  width: 100%;
+  outline: none;
+  cursor: ${({$draggable:e})=>e?"grab":"default"};
+
+  &:active {
+    cursor: ${({$draggable:e})=>e?"grabbing":"default"};
+  }
+`,s=t.default.div`
+  display: flex;
+  width: 100%;
+  transform: translateX(${({$translateX:e})=>e}%);
+  transition: ${({$dragging:e})=>e?"none":"transform 0.35s ease"};
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+
+  & > * {
+    flex: 0 0 ${({$visibleSlides:e})=>100/e}%;
+    min-width: 0;
+    box-sizing: border-box;
+  }
+`,l=t.default.button`
+  position: absolute;
+  top: ${({$arrowTop:e})=>e??"50%"};
+  transform: translateY(-50%);
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: 1px solid #e0e0e0;
+  background: #fff;
+  cursor: pointer;
+  color: #333;
+  transition:
+    background 0.15s,
+    opacity 0.3s;
+  padding: 0;
+
+  ${({$direction:e,$overlay:o})=>e==="prev"?`left: ${o?"12px":"-16px"};`:`right: ${o?"12px":"-16px"};`}
+
+  &:hover:not(:disabled) {
+    background: #f5f5f5;
+  }
+
+  &:disabled {
+    opacity: 0.3;
+    cursor: default;
+  }
+
+  &:focus-visible {
+    outline: none;
+    background: #ffe4ec;
+    border-color: #f9a8c0;
+  }
+
+  ${({$viewportFocused:e})=>e&&`
+    border-color: #bdbdbd;
+  `}
+
+  ${({$overlay:e,$visible:o})=>e&&!o&&`
+    opacity: 0;
+    pointer-events: none;
+  `}
+`,u=t.default.div`
+  display: flex;
+  gap: 6px;
+  align-items: center;
+`,c=t.default.button`
+  width: ${({$active:e})=>e?"20px":"8px"};
+  height: 8px;
+  border-radius: 4px;
+  border: none;
+  background: ${({$active:e})=>e?"#333":"#ccc"};
+  cursor: pointer;
+  padding: 0;
+  transition:
+    width 0.2s ease,
+    background 0.2s ease;
+`,p=r.keyframes`
+  from { width: 0%; }
+  to { width: 100%; }
+`,f=t.default.div`
+  width: 100%;
+  height: 3px;
+  background: #e0e0e0;
+  border-radius: 2px;
+  overflow: hidden;
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    width: 0%;
+    background: #333;
+    animation: ${p} ${({$duration:e})=>e}s linear forwards;
+    animation-play-state: ${({$paused:e})=>e?"paused":"running"};
+
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+      width: 100%;
+    }
+  }
+`,b=t.default.button`
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: 1px solid rgba(255, 255, 255, 0.6);
+  background: rgba(0, 0, 0, 0.35);
+  color: #fff;
+  cursor: pointer;
+  padding: 0;
+  backdrop-filter: blur(2px);
+  transition: background 0.15s;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.55);
+  }
+
+  &:focus-visible {
+    outline: 2px solid #fff;
+    outline-offset: 2px;
+  }
+`;exports.Dot=c;exports.DotsWrapper=u;exports.NavButton=l;exports.PauseButton=b;exports.ProgressBar=f;exports.SlideArea=d;exports.SlideTrack=s;exports.SlideViewport=a;exports.Wrapper=n;

package/cjs/components/DatePicker/DatePicker.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),c=require("react"),ge=require("prop-types"),Se=require("../../colors/colorMap.cjs"),Ae=require("../../colors/blue.cjs"),l=require("./constants.cjs"),a=require("./utils.cjs"),t=require("./styles.cjs"),Me=h=>h&&h.__esModule?h:{default:h},u=Me(ge),je=()=>n.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:n.jsx("polyline",{points:"15 18 9 12 15 6"})}),Ne=()=>n.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:n.jsx("polyline",{points:"9 18 15 12 9 6"})}),o={CALENDAR:"calendar",MONTH:"month",YEAR:"year"},Re=new Date,Q=1924,ye=Re.getFullYear()+20,me=Array.from({length:ye-Q+1},(h,x)=>Q+x),U=({theme:h="blue",mode:x=l.MODE.SINGLE,value:X,rangeValue:H,onChange:g,minDate:C,maxDate:O,showModeToggle:Z=!0,showFooter:L=!0,...ee})=>{const G=c.useMemo(()=>Se.default[h]??Ae.blue,[h]),i=G.m500,b=G.m700,j=G.m100,$={$primary:i,$primaryDark:b,$primaryLight:j},B=new Date,[r,ne]=c.useState(x),[T,_]=c.useState(B.getFullYear()),[S,A]=c.useState(B.getMonth()),[p,N]=c.useState(o.CALENDAR),[M,P]=c.useState(X??null),[s,w]=c.useState(H?.[0]??null),[E,R]=c.useState(H?.[1]??null),[y,m]=c.useState(null),[v,k]=c.useState(!1),te=a.buildCalendarGrid(T,S),q=c.useCallback(e=>!!(!e||C&&e<C||O&&e>O),[C,O]),se=()=>{S===0?(A(11),_(e=>e-1)):A(e=>e-1)},le=()=>{S===11?(A(0),_(e=>e+1)):A(e=>e+1)},re=e=>{if(!(!e||q(e))){if(r===l.MODE.SINGLE){P(e),L||g?.(e);return}!v||!s?(w(e),R(null),k(!0)):(R(e),k(!1),L||g?.([e<=s?e:s,e<=s?s:e]))}},Y=e=>{ne(e),P(null),w(null),R(null),k(!1),m(null)};c.useEffect(()=>{Y(x)},[x]);const oe=()=>{if(r===l.MODE.SINGLE)g?.(M);else if(s&&E){const[e,D]=s<=E?[s,E]:[E,s];g?.([e,D])}},ie=()=>{P(null),w(null),R(null),k(!1),m(null),g?.(r===l.MODE.SINGLE?null:[null,null])},f=v&&y?y:E,F=e=>r===l.MODE.RANGE&&a.isRangeStart(e,s,f),W=e=>r===l.MODE.RANGE&&a.isRangeEnd(e,s,f),ce=e=>r===l.MODE.RANGE&&a.isInRange(e,s,f),ae=e=>r===l.MODE.SINGLE?a.isSameDay(e,M):F(e)||W(e),V=r===l.MODE.SINGLE?a.formatDate(M):a.formatDate(s?s<=(f??s)?s:f:null),ue=r===l.MODE.RANGE?a.formatDate(f?f>=s?f:s:null):null,de=r===l.MODE.SINGLE?!M:!s||!E,he=()=>n.jsx(t.PickerGrid,{children:l.MONTHS.map((e,D)=>n.jsx(t.PickerItem,{$active:D===S,...$,onClick:()=>{A(D),N(o.CALENDAR)},children:e.slice(0,3)},e))}),Ee=()=>n.jsx(t.YearScroll,{children:me.map(e=>n.jsx(t.PickerItem,{$active:e===T,...$,onClick:()=>{_(e),N(o.CALENDAR)},children:e},e))}),fe=()=>n.jsxs(t.Grid,{children:[l.DAYS_SHORT.map(e=>n.jsx(t.DayHeader,{children:e},e)),te.map((e,D)=>{const d=!e,z=q(e),I=!d&&ae(e),pe=!d&&a.isToday(e),J=!d&&F(e),K=!d&&W(e),De=!d&&ce(e),xe=!d&&y&&a.isSameDay(e,y);return n.jsx(t.DayCell,{$inRange:De||J||K,$rangeStart:J,$rangeEnd:K,$primaryLight:j,children:n.jsx(t.DayBtn,{$empty:d,$selected:I,$today:pe,$hovered:xe&&!I,disabled:z,...$,onClick:()=>re(e),onMouseEnter:()=>!d&&m(e),onMouseLeave:()=>m(null),"aria-label":e?e.toDateString():void 0,"aria-pressed":I,tabIndex:d||z?-1:0,children:e?.getDate()})},D)})]});return n.jsxs(t.Wrapper,{...ee,children:[n.jsx(t.SelectedDisplay,{children:r===l.MODE.RANGE?n.jsxs(n.Fragment,{children:[n.jsxs(t.DateChip,{$active:v||!s&&!E,$primary:i,children:[n.jsx("span",{children:"From"}),V]}),n.jsx(t.RangeArrow,{children:"→"}),n.jsxs(t.DateChip,{$active:!v&&!!E,$primary:i,children:[n.jsx("span",{children:"To"}),ue]})]}):n.jsxs(t.DateChip,{$active:!!M,$primary:i,style:{flex:"none",width:"100%"},children:[n.jsx("span",{children:"Selected"}),V]})}),Z&&n.jsxs(t.ModeToggle,{children:[n.jsx(t.ModeBtn,{$active:r===l.MODE.SINGLE,$primary:i,onClick:()=>Y(l.MODE.SINGLE),children:"Single"}),n.jsx(t.ModeBtn,{$active:r===l.MODE.RANGE,$primary:i,onClick:()=>Y(l.MODE.RANGE),children:"Range"})]}),n.jsxs(t.Nav,{children:[n.jsx(t.NavBtn,{$primary:i,onClick:se,"aria-label":"Previous month",children:n.jsx(je,{})}),n.jsxs("div",{style:{display:"flex",gap:4},children:[n.jsx(t.MonthLabel,{$primary:i,onClick:()=>N(p===o.MONTH?o.CALENDAR:o.MONTH),children:l.MONTHS[S]}),n.jsx(t.MonthLabel,{$primary:i,onClick:()=>N(p===o.YEAR?o.CALENDAR:o.YEAR),children:T})]}),n.jsx(t.NavBtn,{$primary:i,onClick:le,"aria-label":"Next month",children:n.jsx(Ne,{})})]}),p===o.CALENDAR&&fe(),p===o.MONTH&&he(),p===o.YEAR&&Ee(),L&&p===o.CALENDAR&&n.jsxs(t.Footer,{children:[n.jsx(t.ActionBtn,{$primary:i,$primaryDark:b,$primaryLight:j,onClick:ie,children:"Clear"}),n.jsx(t.ActionBtn,{$isPrimary:!0,$primary:i,$primaryDark:b,$primaryLight:j,disabled:de,onClick:oe,children:"Apply"})]})]})};U.propTypes={theme:u.default.string,mode:u.default.oneOf(["single","range"]),value:u.default.instanceOf(Date),rangeValue:u.default.arrayOf(u.default.instanceOf(Date)),onChange:u.default.func,minDate:u.default.instanceOf(Date),maxDate:u.default.instanceOf(Date),showModeToggle:u.default.bool,showFooter:u.default.bool};exports.default=U;

package/cjs/components/DatePicker/constants.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=["January","February","March","April","May","June","July","August","September","October","November","December"],r=["Su","Mo","Tu","We","Th","Fr","Sa"],t={SINGLE:"single",RANGE:"range"};exports.DAYS_SHORT=r;exports.MODE=t;exports.MONTHS=e;

package/cjs/components/DatePicker/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./DatePicker.cjs");exports.default=e.default;