@loke/design-system/dist/lib/responsive/index.js

A design system with individually importable components

var __create=Object.create;var{getPrototypeOf:__getProtoOf,defineProperty:__defProp,getOwnPropertyNames:__getOwnPropNames,getOwnPropertyDescriptor:__getOwnPropDesc}=Object,__hasOwnProp=Object.prototype.hasOwnProperty;function __accessProp(key){return this[key]}var __reExport=(target,mod,secondTarget)=>{var keys=__getOwnPropNames(mod);for(let key of keys)if(!__hasOwnProp.call(target,key)&&key!=="default")__defProp(target,key,{get:__accessProp.bind(mod,key),enumerable:!0});if(secondTarget){for(let key of keys)if(!__hasOwnProp.call(secondTarget,key)&&key!=="default")__defProp(secondTarget,key,{get:__accessProp.bind(mod,key),enumerable:!0});return secondTarget}},__toESMCache_node,__toESMCache_esm,__toESM=(mod,isNodeMode,target)=>{var canCache=mod!=null&&typeof mod==="object";if(canCache){var cache=isNodeMode?__toESMCache_node??=new WeakMap:__toESMCache_esm??=new WeakMap,cached=cache.get(mod);if(cached)return cached}target=mod!=null?__create(__getProtoOf(mod)):{};let to=isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target;for(let key of __getOwnPropNames(mod))if(!__hasOwnProp.call(to,key))__defProp(to,key,{get:__accessProp.bind(mod,key),enumerable:!0});if(canCache)cache.set(mod,to);return to},__toCommonJS=(from)=>{var entry=(__moduleCache??=new WeakMap).get(from),desc;if(entry)return entry;if(entry=__defProp({},"__esModule",{value:!0}),from&&typeof from==="object"||typeof from==="function"){for(var key of __getOwnPropNames(from))if(!__hasOwnProp.call(entry,key))__defProp(entry,key,{get:__accessProp.bind(from,key),enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable})}return __moduleCache.set(from,entry),entry},__moduleCache;var __returnValue=(v)=>v;function __exportSetter(name,newValue){this[name]=__returnValue.bind(null,newValue)}var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0,configurable:!0,set:__exportSetter.bind(all,name)})};var exports_responsive={};__export(exports_responsive,{createResponsiveVariants:()=>createResponsiveVariants,createResponsiveComponent:()=>createResponsiveComponent});module.exports=__toCommonJS(exports_responsive);var import_cn=require("@loke/design-system/cn");var breakpoints=["","sm:","md:","lg:"];function createResponsiveVariants(variants,props){let responsiveClasses=[],defaultClasses=variants({}).split(" "),variantParams=[],breakpointIndices=new Set;for(let[_,value]of Object.entries(props))if(Array.isArray(value))for(let i=0;i<breakpoints.length;i++)value[i]!==void 0&&breakpointIndices.add(i);else breakpointIndices.add(0);for(let index of breakpointIndices){let breakpointParams={};for(let[key,value]of Object.entries(props))if(Array.isArray(value)&&index<value.length&&value[index]!==void 0)breakpointParams[key]=value[index];else if(!Array.isArray(value)&&value!==void 0)breakpointParams[key]=value;if(Object.keys(breakpointParams).length>0)variantParams.push(breakpointParams)}for(let[index,params]of variantParams.entries()){if(index===0){responsiveClasses.push(...variants(params).split(" "));continue}let variantClasses=variants(params).split(" ");responsiveClasses.push(...variantClasses.map((cls)=>breakpoints[index]+cls))}let uniqueClasses=Array.from(new Set([...defaultClasses,...responsiveClasses]));return cleanClasses(uniqueClasses.join(" ").trim())}function cleanClasses(rawClassName){let classes=import_cn.cn(rawClassName).split(" "),cleanedClasses=[];for(let cls of classes){let[prefix,className]=cls.split(":");if(!["sm","md","lg"].includes(prefix)){cleanedClasses.push(cls);continue}let hasSameBaseClass=(variant)=>{let base=`${variant??""}:${className.split("-").slice(0,-1).join("-")}`;return classes.some((c)=>c.startsWith(base))};switch(prefix){case"sm":if(classes.includes(className))continue;cleanedClasses.push(cls);break;case"md":if(classes.includes(`sm:${className}`))continue;if(classes.includes(className)&&!hasSameBaseClass("sm"))continue;cleanedClasses.push(cls);break;case"lg":if(classes.includes(`md:${className}`))continue;if(classes.includes(`sm:${className}`)&&!hasSameBaseClass("sm"))continue;if(classes.includes(className)&&!hasSameBaseClass("sm")&&!hasSameBaseClass("md"))continue;cleanedClasses.push(cls);break}}return cleanedClasses.join(" ").trim()}function createResponsiveComponent(variants){return{createResponsive:(props)=>createResponsiveVariants(variants,props)}}