mainstack-design-system 1.0.0 → 1.1.2

package/README.md

@@ -18,6 +18,19 @@ ability to auto-maintain this document. Please use the Joggr editor to edit this
 
 To view the design system documentation, visit this [link](https://mainstack-design-system.vercel.app/).
 
+## 🔧 Utilities & Helpers Reference
+
+**Before building, check what's already available to avoid rebuilding existing functionality:**
+
+- **[UTILITIES.md](./UTILITIES.md)** - Utility functions, hooks, and types (4 min read)
+
+The design system includes many utilities that don't map to Figma:
+
+- **Helper functions**: `cn()`, `sanitizeNumberInputValue()`, `formatPriceDigit()`
+- **Hooks**: `useElementWidth()`, `useMainstackDesignSystemTheme()`
+- **Provider**: `MainstackDesignSystemProvider` (theme management)
+- **Type utilities**: `PolymorphicProps`, `CountryIso2CodeType`
+
 # Design System Development Guide
 
 ---

package/dist/Combination-9MVvgFCf.cjs

@@ -0,0 +1,42 @@
+'use client';
+"use strict";const oe=require("react"),ge=require("./index-_XxjJPRD.cjs"),pe=require("./index-5OKsHRWb.cjs"),G=require("./index-CzY-WZXL.cjs"),be=require("react/jsx-runtime"),C=require("./tslib.es6-pelyBmy3.cjs");function ye(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const c=ye(oe);var B=0;function Ee(){c.useEffect(()=>{const e=document.querySelectorAll("[data-radix-focus-guard]");return document.body.insertAdjacentElement("afterbegin",e[0]??z()),document.body.insertAdjacentElement("beforeend",e[1]??z()),B++,()=>{B===1&&document.querySelectorAll("[data-radix-focus-guard]").forEach(t=>t.remove()),B--}},[])}function z(){const e=document.createElement("span");return e.setAttribute("data-radix-focus-guard",""),e.tabIndex=0,e.style.outline="none",e.style.opacity="0",e.style.position="fixed",e.style.pointerEvents="none",e}var U="focusScope.autoFocusOnMount",K="focusScope.autoFocusOnUnmount",Z={bubbles:!1,cancelable:!0},Se="FocusScope",ce=c.forwardRef((e,t)=>{const{loop:n=!1,trapped:r=!1,onMountAutoFocus:u,onUnmountAutoFocus:i,...s}=e,[a,S]=c.useState(null),y=G.useCallbackRef(u),p=G.useCallbackRef(i),f=c.useRef(null),v=ge.useComposedRefs(t,o=>S(o)),h=c.useRef({paused:!1,pause(){this.paused=!0},resume(){this.paused=!1}}).current;c.useEffect(()=>{if(r){let o=function(g){if(h.paused||!a)return;const b=g.target;a.contains(b)?f.current=b:k(f.current,{select:!0})},l=function(g){if(h.paused||!a)return;const b=g.relatedTarget;b!==null&&(a.contains(b)||k(f.current,{select:!0}))},d=function(g){if(document.activeElement===document.body)for(const E of g)E.removedNodes.length>0&&k(a)};document.addEventListener("focusin",o),document.addEventListener("focusout",l);const m=new MutationObserver(d);return a&&m.observe(a,{childList:!0,subtree:!0}),()=>{document.removeEventListener("focusin",o),document.removeEventListener("focusout",l),m.disconnect()}}},[r,a,h.paused]),c.useEffect(()=>{if(a){$.add(h);const o=document.activeElement;if(!a.contains(o)){const d=new CustomEvent(U,Z);a.addEventListener(U,y),a.dispatchEvent(d),d.defaultPrevented||(we(Ae(ue(a)),{select:!0}),document.activeElement===o&&k(a))}return()=>{a.removeEventListener(U,y),setTimeout(()=>{const d=new CustomEvent(K,Z);a.addEventListener(K,p),a.dispatchEvent(d),d.defaultPrevented||k(o??document.body,{select:!0}),a.removeEventListener(K,p),$.remove(h)},0)}}},[a,y,p,h]);const w=c.useCallback(o=>{if(!n&&!r||h.paused)return;const l=o.key==="Tab"&&!o.altKey&&!o.ctrlKey&&!o.metaKey,d=document.activeElement;if(l&&d){const m=o.currentTarget,[g,b]=Ce(m);g&&b?!o.shiftKey&&d===b?(o.preventDefault(),n&&k(g,{select:!0})):o.shiftKey&&d===g&&(o.preventDefault(),n&&k(b,{select:!0})):d===m&&o.preventDefault()}},[n,r,h.paused]);return be.jsx(pe.Primitive.div,{tabIndex:-1,...s,ref:v,onKeyDown:w})});ce.displayName=Se;function we(e,{select:t=!1}={}){const n=document.activeElement;for(const r of e)if(k(r,{select:t}),document.activeElement!==n)return}function Ce(e){const t=ue(e),n=Q(t,e),r=Q(t.reverse(),e);return[n,r]}function ue(e){const t=[],n=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT,{acceptNode:r=>{const u=r.tagName==="INPUT"&&r.type==="hidden";return r.disabled||r.hidden||u?NodeFilter.FILTER_SKIP:r.tabIndex>=0?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP}});for(;n.nextNode();)t.push(n.currentNode);return t}function Q(e,t){for(const n of e)if(!Re(n,{upTo:t}))return n}function Re(e,{upTo:t}){if(getComputedStyle(e).visibility==="hidden")return!0;for(;e;){if(t!==void 0&&e===t)return!1;if(getComputedStyle(e).display==="none")return!0;e=e.parentElement}return!1}function ke(e){return e instanceof HTMLInputElement&&"select"in e}function k(e,{select:t=!1}={}){if(e&&e.focus){const n=document.activeElement;e.focus({preventScroll:!0}),e!==n&&ke(e)&&t&&e.select()}}var $=Te();function Te(){let e=[];return{add(t){const n=e[0];t!==n&&n?.pause(),e=J(e,t),e.unshift(t)},remove(t){e=J(e,t),e[0]?.resume()}}}function J(e,t){const n=[...e],r=n.indexOf(t);return r!==-1&&n.splice(r,1),n}function Ae(e){return e.filter(t=>t.tagName!=="A")}var Ne=function(e){if(typeof document>"u")return null;var t=Array.isArray(e)?e[0]:e;return t.ownerDocument.body},A=new WeakMap,L=new WeakMap,O={},j=0,ie=function(e){return e&&(e.host||ie(e.parentNode))},Me=function(e,t){return t.map(function(n){if(e.contains(n))return n;var r=ie(n);return r&&e.contains(r)?r:(console.error("aria-hidden",n,"in not contained inside",e,". Doing nothing"),null)}).filter(function(n){return!!n})},Fe=function(e,t,n,r){var u=Me(t,Array.isArray(e)?e:[e]);O[n]||(O[n]=new WeakMap);var i=O[n],s=[],a=new Set,S=new Set(u),y=function(f){!f||a.has(f)||(a.add(f),y(f.parentNode))};u.forEach(y);var p=function(f){!f||S.has(f)||Array.prototype.forEach.call(f.children,function(v){if(a.has(v))p(v);else try{var h=v.getAttribute(r),w=h!==null&&h!=="false",o=(A.get(v)||0)+1,l=(i.get(v)||0)+1;A.set(v,o),i.set(v,l),s.push(v),o===1&&w&&L.set(v,!0),l===1&&v.setAttribute(n,"true"),w||v.setAttribute(r,"true")}catch(d){console.error("aria-hidden: cannot operate on ",v,d)}})};return p(t),a.clear(),j++,function(){s.forEach(function(f){var v=A.get(f)-1,h=i.get(f)-1;A.set(f,v),i.set(f,h),v||(L.has(f)||f.removeAttribute(r),L.delete(f)),h||f.removeAttribute(n)}),j--,j||(A=new WeakMap,A=new WeakMap,L=new WeakMap,O={})}},Pe=function(e,t,n){n===void 0&&(n="data-aria-hidden");var r=Array.from(Array.isArray(e)?e:[e]),u=Ne(e);return u?(r.push.apply(r,Array.from(u.querySelectorAll("[aria-live], script"))),Fe(r,u,n,"aria-hidden")):function(){return null}},I="right-scroll-bar-position",W="width-before-scroll-bar",Le="with-scroll-bars-hidden",Oe="--removed-body-scroll-bar-size";function H(e,t){return typeof e=="function"?e(t):e&&(e.current=t),e}function _e(e,t){var n=oe.useState(function(){return{value:e,callback:t,facade:{get current(){return n.value},set current(r){var u=n.value;u!==r&&(n.value=r,n.callback(r,u))}}}})[0];return n.callback=t,n.facade}var xe=typeof window<"u"?c.useLayoutEffect:c.useEffect,ee=new WeakMap;function Ie(e,t){var n=_e(null,function(r){return e.forEach(function(u){return H(u,r)})});return xe(function(){var r=ee.get(n);if(r){var u=new Set(r),i=new Set(e),s=n.current;u.forEach(function(a){i.has(a)||H(a,null)}),i.forEach(function(a){u.has(a)||H(a,s)})}ee.set(n,e)},[e]),n}function We(e){return e}function De(e,t){t===void 0&&(t=We);var n=[],r=!1,u={read:function(){if(r)throw new Error("Sidecar: could not `read` from an `assigned` medium. `read` could be used only with `useMedium`.");return n.length?n[n.length-1]:e},useMedium:function(i){var s=t(i,r);return n.push(s),function(){n=n.filter(function(a){return a!==s})}},assignSyncMedium:function(i){for(r=!0;n.length;){var s=n;n=[],s.forEach(i)}n={push:function(a){return i(a)},filter:function(){return n}}},assignMedium:function(i){r=!0;var s=[];if(n.length){var a=n;n=[],a.forEach(i),s=n}var S=function(){var p=s;s=[],p.forEach(i)},y=function(){return Promise.resolve().then(S)};y(),n={push:function(p){s.push(p),y()},filter:function(p){return s=s.filter(p),n}}}};return u}function Be(e){e===void 0&&(e={});var t=De(null);return t.options=C.__assign({async:!0,ssr:!1},e),t}var le=function(e){var t=e.sideCar,n=C.__rest(e,["sideCar"]);if(!t)throw new Error("Sidecar: please provide `sideCar` property to import the right car");var r=t.read();if(!r)throw new Error("Sidecar medium not found");return c.createElement(r,C.__assign({},n))};le.isSideCarExport=!0;function Ue(e,t){return e.useMedium(t),le}var se=Be(),V=function(){},D=c.forwardRef(function(e,t){var n=c.useRef(null),r=c.useState({onScrollCapture:V,onWheelCapture:V,onTouchMoveCapture:V}),u=r[0],i=r[1],s=e.forwardProps,a=e.children,S=e.className,y=e.removeScrollBar,p=e.enabled,f=e.shards,v=e.sideCar,h=e.noRelative,w=e.noIsolation,o=e.inert,l=e.allowPinchZoom,d=e.as,m=d===void 0?"div":d,g=e.gapMode,b=C.__rest(e,["forwardProps","children","className","removeScrollBar","enabled","shards","sideCar","noRelative","noIsolation","inert","allowPinchZoom","as","gapMode"]),E=v,T=Ie([n,t]),R=C.__assign(C.__assign({},b),u);return c.createElement(c.Fragment,null,p&&c.createElement(E,{sideCar:se,removeScrollBar:y,shards:f,noRelative:h,noIsolation:w,inert:o,setCallbacks:i,allowPinchZoom:!!l,lockRef:n,gapMode:g}),s?c.cloneElement(c.Children.only(a),C.__assign(C.__assign({},R),{ref:T})):c.createElement(m,C.__assign({},R,{className:S,ref:T}),a))});D.defaultProps={enabled:!0,removeScrollBar:!0,inert:!1};D.classNames={fullWidth:W,zeroRight:I};var Ke=function(){if(typeof __webpack_nonce__<"u")return __webpack_nonce__};function je(){if(!document)return null;var e=document.createElement("style");e.type="text/css";var t=Ke();return t&&e.setAttribute("nonce",t),e}function He(e,t){e.styleSheet?e.styleSheet.cssText=t:e.appendChild(document.createTextNode(t))}function Ve(e){var t=document.head||document.getElementsByTagName("head")[0];t.appendChild(e)}var Xe=function(){var e=0,t=null;return{add:function(n){e==0&&(t=je())&&(He(t,n),Ve(t)),e++},remove:function(){e--,!e&&t&&(t.parentNode&&t.parentNode.removeChild(t),t=null)}}},Ye=function(){var e=Xe();return function(t,n){c.useEffect(function(){return e.add(t),function(){e.remove()}},[t&&n])}},fe=function(){var e=Ye(),t=function(n){var r=n.styles,u=n.dynamic;return e(r,u),null};return t},qe={left:0,top:0,right:0,gap:0},X=function(e){return parseInt(e||"",10)||0},Ge=function(e){var t=window.getComputedStyle(document.body),n=t[e==="padding"?"paddingLeft":"marginLeft"],r=t[e==="padding"?"paddingTop":"marginTop"],u=t[e==="padding"?"paddingRight":"marginRight"];return[X(n),X(r),X(u)]},ze=function(e){if(e===void 0&&(e="margin"),typeof window>"u")return qe;var t=Ge(e),n=document.documentElement.clientWidth,r=window.innerWidth;return{left:t[0],top:t[1],right:t[2],gap:Math.max(0,r-n+t[2]-t[0])}},Ze=fe(),F="data-scroll-locked",Qe=function(e,t,n,r){var u=e.left,i=e.top,s=e.right,a=e.gap;return n===void 0&&(n="margin"),`
+  .`.concat(Le,` {
+   overflow: hidden `).concat(r,`;
+   padding-right: `).concat(a,"px ").concat(r,`;
+  }
+  body[`).concat(F,`] {
+    overflow: hidden `).concat(r,`;
+    overscroll-behavior: contain;
+    `).concat([t&&"position: relative ".concat(r,";"),n==="margin"&&`
+    padding-left: `.concat(u,`px;
+    padding-top: `).concat(i,`px;
+    padding-right: `).concat(s,`px;
+    margin-left:0;
+    margin-top:0;
+    margin-right: `).concat(a,"px ").concat(r,`;
+    `),n==="padding"&&"padding-right: ".concat(a,"px ").concat(r,";")].filter(Boolean).join(""),`
+  }
+  
+  .`).concat(I,` {
+    right: `).concat(a,"px ").concat(r,`;
+  }
+  
+  .`).concat(W,` {
+    margin-right: `).concat(a,"px ").concat(r,`;
+  }
+  
+  .`).concat(I," .").concat(I,` {
+    right: 0 `).concat(r,`;
+  }
+  
+  .`).concat(W," .").concat(W,` {
+    margin-right: 0 `).concat(r,`;
+  }
+  
+  body[`).concat(F,`] {
+    `).concat(Oe,": ").concat(a,`px;
+  }
+`)},te=function(){var e=parseInt(document.body.getAttribute(F)||"0",10);return isFinite(e)?e:0},$e=function(){c.useEffect(function(){return document.body.setAttribute(F,(te()+1).toString()),function(){var e=te()-1;e<=0?document.body.removeAttribute(F):document.body.setAttribute(F,e.toString())}},[])},Je=function(e){var t=e.noRelative,n=e.noImportant,r=e.gapMode,u=r===void 0?"margin":r;$e();var i=c.useMemo(function(){return ze(u)},[u]);return c.createElement(Ze,{styles:Qe(i,!t,u,n?"":"!important")})},Y=!1;if(typeof window<"u")try{var _=Object.defineProperty({},"passive",{get:function(){return Y=!0,!0}});window.addEventListener("test",_,_),window.removeEventListener("test",_,_)}catch{Y=!1}var N=Y?{passive:!1}:!1,et=function(e){return e.tagName==="TEXTAREA"},de=function(e,t){if(!(e instanceof Element))return!1;var n=window.getComputedStyle(e);return n[t]!=="hidden"&&!(n.overflowY===n.overflowX&&!et(e)&&n[t]==="visible")},tt=function(e){return de(e,"overflowY")},nt=function(e){return de(e,"overflowX")},ne=function(e,t){var n=t.ownerDocument,r=t;do{typeof ShadowRoot<"u"&&r instanceof ShadowRoot&&(r=r.host);var u=ve(e,r);if(u){var i=he(e,r),s=i[1],a=i[2];if(s>a)return!0}r=r.parentNode}while(r&&r!==n.body);return!1},rt=function(e){var t=e.scrollTop,n=e.scrollHeight,r=e.clientHeight;return[t,n,r]},at=function(e){var t=e.scrollLeft,n=e.scrollWidth,r=e.clientWidth;return[t,n,r]},ve=function(e,t){return e==="v"?tt(t):nt(t)},he=function(e,t){return e==="v"?rt(t):at(t)},ot=function(e,t){return e==="h"&&t==="rtl"?-1:1},ct=function(e,t,n,r,u){var i=ot(e,window.getComputedStyle(t).direction),s=i*r,a=n.target,S=t.contains(a),y=!1,p=s>0,f=0,v=0;do{if(!a)break;var h=he(e,a),w=h[0],o=h[1],l=h[2],d=o-l-i*w;(w||d)&&ve(e,a)&&(f+=d,v+=w);var m=a.parentNode;a=m&&m.nodeType===Node.DOCUMENT_FRAGMENT_NODE?m.host:m}while(!S&&a!==document.body||S&&(t.contains(a)||t===a));return(p&&Math.abs(f)<1||!p&&Math.abs(v)<1)&&(y=!0),y},x=function(e){return"changedTouches"in e?[e.changedTouches[0].clientX,e.changedTouches[0].clientY]:[0,0]},re=function(e){return[e.deltaX,e.deltaY]},ae=function(e){return e&&"current"in e?e.current:e},ut=function(e,t){return e[0]===t[0]&&e[1]===t[1]},it=function(e){return`
+  .block-interactivity-`.concat(e,` {pointer-events: none;}
+  .allow-interactivity-`).concat(e,` {pointer-events: all;}
+`)},lt=0,M=[];function st(e){var t=c.useRef([]),n=c.useRef([0,0]),r=c.useRef(),u=c.useState(lt++)[0],i=c.useState(fe)[0],s=c.useRef(e);c.useEffect(function(){s.current=e},[e]),c.useEffect(function(){if(e.inert){document.body.classList.add("block-interactivity-".concat(u));var o=C.__spreadArray([e.lockRef.current],(e.shards||[]).map(ae),!0).filter(Boolean);return o.forEach(function(l){return l.classList.add("allow-interactivity-".concat(u))}),function(){document.body.classList.remove("block-interactivity-".concat(u)),o.forEach(function(l){return l.classList.remove("allow-interactivity-".concat(u))})}}},[e.inert,e.lockRef.current,e.shards]);var a=c.useCallback(function(o,l){if("touches"in o&&o.touches.length===2||o.type==="wheel"&&o.ctrlKey)return!s.current.allowPinchZoom;var d=x(o),m=n.current,g="deltaX"in o?o.deltaX:m[0]-d[0],b="deltaY"in o?o.deltaY:m[1]-d[1],E,T=o.target,R=Math.abs(g)>Math.abs(b)?"h":"v";if("touches"in o&&R==="h"&&T.type==="range")return!1;var P=ne(R,T);if(!P)return!0;if(P?E=R:(E=R==="v"?"h":"v",P=ne(R,T)),!P)return!1;if(!r.current&&"changedTouches"in o&&(g||b)&&(r.current=E),!E)return!0;var q=r.current||E;return ct(q,l,o,q==="h"?g:b)},[]),S=c.useCallback(function(o){var l=o;if(!(!M.length||M[M.length-1]!==i)){var d="deltaY"in l?re(l):x(l),m=t.current.filter(function(E){return E.name===l.type&&(E.target===l.target||l.target===E.shadowParent)&&ut(E.delta,d)})[0];if(m&&m.should){l.cancelable&&l.preventDefault();return}if(!m){var g=(s.current.shards||[]).map(ae).filter(Boolean).filter(function(E){return E.contains(l.target)}),b=g.length>0?a(l,g[0]):!s.current.noIsolation;b&&l.cancelable&&l.preventDefault()}}},[]),y=c.useCallback(function(o,l,d,m){var g={name:o,delta:l,target:d,should:m,shadowParent:ft(d)};t.current.push(g),setTimeout(function(){t.current=t.current.filter(function(b){return b!==g})},1)},[]),p=c.useCallback(function(o){n.current=x(o),r.current=void 0},[]),f=c.useCallback(function(o){y(o.type,re(o),o.target,a(o,e.lockRef.current))},[]),v=c.useCallback(function(o){y(o.type,x(o),o.target,a(o,e.lockRef.current))},[]);c.useEffect(function(){return M.push(i),e.setCallbacks({onScrollCapture:f,onWheelCapture:f,onTouchMoveCapture:v}),document.addEventListener("wheel",S,N),document.addEventListener("touchmove",S,N),document.addEventListener("touchstart",p,N),function(){M=M.filter(function(o){return o!==i}),document.removeEventListener("wheel",S,N),document.removeEventListener("touchmove",S,N),document.removeEventListener("touchstart",p,N)}},[]);var h=e.removeScrollBar,w=e.inert;return c.createElement(c.Fragment,null,w?c.createElement(i,{styles:it(u)}):null,h?c.createElement(Je,{noRelative:e.noRelative,gapMode:e.gapMode}):null)}function ft(e){for(var t=null;e!==null;)e instanceof ShadowRoot&&(t=e.host,e=e.host),e=e.parentNode;return t}const dt=Ue(se,st);var me=c.forwardRef(function(e,t){return c.createElement(D,C.__assign({},e,{ref:t,sideCar:dt}))});me.classNames=D.classNames;exports.FocusScope=ce;exports.ReactRemoveScroll=me;exports.hideOthers=Pe;exports.useFocusGuards=Ee;