@cruxkit/button 0.1.7 → 0.1.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +1 -1
  2. package/dist/index.cjs +1 -1
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +2 -0
  5. package/dist/index.d.ts +2 -0
  6. package/dist/index.js +1 -1
  7. package/dist/index.js.map +1 -1
  8. package/package.json +2 -2
package/README.md CHANGED
@@ -8,7 +8,7 @@
8
8
  </div>
9
9
 
10
10
  <div align="center">
11
- <img src="https://img.shields.io/badge/v-0.1.7-black"/>
11
+ <img src="https://img.shields.io/badge/v-0.1.9-black"/>
12
12
  <a href="https://github.com/cruxkit-org"><img src="https://img.shields.io/badge/🔥-@cruxkit-black"/></a>
13
13
  <br>
14
14
  <img src="https://img.shields.io/badge/coverage-98.12%25-brightgreen" alt="Test Coverage" />
package/dist/index.cjs CHANGED
@@ -1,2 +1,2 @@
1
- 'use strict';var container=require('@cruxkit/container'),text=require('@cruxkit/text'),icon=require('@cruxkit/icon'),jsxRuntime=require('@minejs/jsx/jsx-runtime');var F={sm:{px:3,py:1},md:{px:4,py:2},lg:{px:6,py:3}},W={sm:1,md:2,lg:2},V={sm:"sm",md:"md",lg:"lg"},G={sm:"sm",md:"md",lg:"lg"},K={solid:{brand:["bg-brand","text-inverse","border","border-transparent","hover:bg-brand-hover","active:bg-brand-active","active:scale-95","shadow-sm","hover:shadow-md"],success:["bg-success","text-inverse","border","border-transparent","hover:bg-success-hover","active:bg-success-active","active:scale-95","shadow-sm","hover:shadow-md"],warning:["bg-warning","text-inverse","border","border-transparent","hover:bg-warning-hover","active:bg-warning-active","active:scale-95","shadow-sm","hover:shadow-md"],error:["bg-error","text-inverse","border","border-transparent","hover:bg-error-hover","active:bg-error-active","active:scale-95","shadow-sm","hover:shadow-md"],neutral:["bg-surface","text-1","border","border-1","hover:bg-raised","active:bg-tertiary","active:scale-95","shadow-sm","hover:shadow-md"]},outline:{brand:["bg-transparent","text-brand","border","border-brand","hover:bg-brand-subtle","active:bg-brand-subtle","active:scale-95"],success:["bg-transparent","text-success","border","border-success","hover:bg-success-subtle","active:bg-success-subtle","active:scale-95"],warning:["bg-transparent","text-warning","border","border-warning","hover:bg-warning-subtle","active:bg-warning-subtle","active:scale-95"],error:["bg-transparent","text-error","border","border-error","hover:bg-error-subtle","active:bg-error-subtle","active:scale-95"],neutral:["bg-transparent","text-1","border","border-1","hover:bg-raised","active:bg-tertiary","active:scale-95"]},ghost:{brand:["bg-transparent","text-brand","border","border-transparent","hover:bg-brand-subtle","active:bg-brand-subtle","active:scale-95"],success:["bg-transparent","text-success","border","border-transparent","hover:bg-success-subtle","active:bg-success-subtle","active:scale-95"],warning:["bg-transparent","text-warning","border","border-transparent","hover:bg-warning-subtle","active:bg-warning-subtle","active:scale-95"],error:["bg-transparent","text-error","border","border-transparent","hover:bg-error-subtle","active:bg-error-subtle","active:scale-95"],neutral:["bg-transparent","text-1","border","border-transparent","hover:bg-raised","active:bg-tertiary","active:scale-95"]},link:{brand:["bg-transparent","text-brand","border","border-transparent","hover:underline","underline-offset-4","decoration-2","px-1"],success:["bg-transparent","text-success","border","border-transparent","hover:underline","underline-offset-4","decoration-2","px-1"],warning:["bg-transparent","text-warning","border","border-transparent","hover:underline","underline-offset-4","decoration-2","px-1"],error:["bg-transparent","text-error","border","border-transparent","hover:underline","underline-offset-4","decoration-2","px-1"],neutral:["bg-transparent","text-1","border","border-transparent","hover:underline","underline-offset-4","decoration-2","px-1"]}},w=new WeakSet,y=new WeakSet;function z(e,i){if(!e)return null;let s=G[i];if(typeof e=="string")return jsxRuntime.jsx("span",{className:"inline-flex shrink-0",children:jsxRuntime.jsx(icon.Icon,{name:e,size:s})});let r=e.size??s;return jsxRuntime.jsx("span",{className:"inline-flex shrink-0",children:jsxRuntime.jsx(icon.Icon,{...e,size:r})})}function Y(e){let{variant:i="solid",color:s="brand",size:r="md",fullWidth:S=false,disabled:B=false,loading:C=false,leftIcon:I,rightIcon:P,as:u="button",text:c,children:T,className:E,type:k="button",onMount:d,onLoad:l,...M}=e,N=["inline-flex","items-center","justify-center","font-medium","transition-all","duration-150","select-none","focus:outline-none","focus-visible:ring","focus-visible:ring-offset-2"],b=[];(C||B)&&b.push("opacity-50","cursor-not-allowed","pointer-events-none"),S&&b.push("w-full");let R=K[i][s],L=[...N,...b,...R,E].filter(Boolean).join(" "),p=F[r],H=W[r],J=V[r],a=[],g=z(I,r),v=z(P,r);g&&a.push(g);let X=typeof c=="string"&&c.includes("."),o=T??(X?"--":c);o!=null&&o!==""&&a.push(jsxRuntime.jsx(text.Text,{as:"span",size:J,"data-role":"btn-label",className:"flex items-center",children:o})),v&&a.push(v);let j=u==="button"?{type:k}:{},m=d||l?t=>{if(t&&(d&&!w.has(t)&&(w.add(t),d(t)),l&&!y.has(t))){y.add(t);let h=()=>{l(t);};typeof requestAnimationFrame=="function"?requestAnimationFrame(()=>{requestAnimationFrame(h);}):setTimeout(h,0);}}:void 0,f={as:u,display:"inline-flex",align:"center",justify:"center",gap:H,px:p.px,py:p.py,radius:"md",className:L,...j,...M};return m&&(f.ref=m),jsxRuntime.jsx(container.Container,{...f,children:a})}exports.Button=Y;//# sourceMappingURL=index.cjs.map
1
+ 'use strict';var container=require('@cruxkit/container'),text=require('@cruxkit/text'),icon=require('@cruxkit/icon'),jsxRuntime=require('@minejs/jsx/jsx-runtime');var A={sm:{px:3,py:1},md:{px:4,py:2},lg:{px:6,py:3}},V={sm:1,md:2,lg:2},G={sm:"sm",md:"md",lg:"lg"},K={sm:"sm",md:"md",lg:"lg"},$={solid:{brand:["bg-brand","text-inverse","border","border-transparent","hover:bg-brand-hover","active:bg-brand-active","active:scale-95","shadow-sm","hover:shadow-md"],success:["bg-success","text-inverse","border","border-transparent","hover:bg-success-hover","active:bg-success-active","active:scale-95","shadow-sm","hover:shadow-md"],warning:["bg-warning","text-inverse","border","border-transparent","hover:bg-warning-hover","active:bg-warning-active","active:scale-95","shadow-sm","hover:shadow-md"],error:["bg-error","text-inverse","border","border-transparent","hover:bg-error-hover","active:bg-error-active","active:scale-95","shadow-sm","hover:shadow-md"],neutral:["bg-surface","text-1","border","border-1","hover:bg-raised","active:bg-tertiary","active:scale-95","shadow-sm","hover:shadow-md"]},outline:{brand:["bg-transparent","text-brand","border","border-brand","hover:bg-brand-subtle","active:bg-brand-subtle","active:scale-95"],success:["bg-transparent","text-success","border","border-success","hover:bg-success-subtle","active:bg-success-subtle","active:scale-95"],warning:["bg-transparent","text-warning","border","border-warning","hover:bg-warning-subtle","active:bg-warning-subtle","active:scale-95"],error:["bg-transparent","text-error","border","border-error","hover:bg-error-subtle","active:bg-error-subtle","active:scale-95"],neutral:["bg-transparent","text-1","border","border-1","hover:bg-raised","active:bg-tertiary","active:scale-95"]},ghost:{brand:["bg-transparent","text-brand","border","border-transparent","hover:bg-brand-subtle","active:bg-brand-subtle","active:scale-95"],success:["bg-transparent","text-success","border","border-transparent","hover:bg-success-subtle","active:bg-success-subtle","active:scale-95"],warning:["bg-transparent","text-warning","border","border-transparent","hover:bg-warning-subtle","active:bg-warning-subtle","active:scale-95"],error:["bg-transparent","text-error","border","border-transparent","hover:bg-error-subtle","active:bg-error-subtle","active:scale-95"],neutral:["bg-transparent","text-1","border","border-transparent","hover:bg-raised","active:bg-tertiary","active:scale-95"]},link:{brand:["bg-transparent","text-brand","border","border-transparent","hover:underline","underline-offset-4","decoration-2","px-1"],success:["bg-transparent","text-success","border","border-transparent","hover:underline","underline-offset-4","decoration-2","px-1"],warning:["bg-transparent","text-warning","border","border-transparent","hover:underline","underline-offset-4","decoration-2","px-1"],error:["bg-transparent","text-error","border","border-transparent","hover:underline","underline-offset-4","decoration-2","px-1"],neutral:["bg-transparent","text-1","border","border-transparent","hover:underline","underline-offset-4","decoration-2","px-1"]}},w=new WeakSet,y=new WeakSet;function z(e,i){if(!e)return null;let s=K[i];if(typeof e=="string")return jsxRuntime.jsx("span",{className:"inline-flex shrink-0",children:jsxRuntime.jsx(icon.Icon,{name:e,size:s})});let r=e.size??s;return jsxRuntime.jsx("span",{className:"inline-flex shrink-0",children:jsxRuntime.jsx(icon.Icon,{...e,size:r})})}function Y(e){let{variant:i="solid",color:s="brand",size:r="md",fullWidth:S=false,labelFullWidth:B=false,disabled:C=false,loading:I=false,leftIcon:P,rightIcon:T,as:u="button",text:c,children:E,className:k,type:M="button",onMount:d,onLoad:l,...N}=e,R=["inline-flex","items-center","justify-center","font-medium","transition-all","duration-150","select-none","focus:outline-none","focus-visible:ring","focus-visible:ring-offset-2"],b=[];(I||C)&&b.push("opacity-50","cursor-not-allowed","pointer-events-none"),S&&b.push("w-full");let L=$[i][s],j=[...R,...b,...L,k].filter(Boolean).join(" "),p=A[r],F=V[r],H=G[r],a=[],g=z(P,r),v=z(T,r);g&&a.push(g);let J=typeof c=="string"&&c.includes("."),o=E??(J?"--":c);o!=null&&o!==""&&a.push(jsxRuntime.jsx(text.Text,{as:"span",size:H,"data-role":"btn-label",className:`flex items-center${B?" w-full justify-center":""}`,children:o})),v&&a.push(v);let W=u==="button"?{type:M}:{},m=d||l?t=>{if(t&&(d&&!w.has(t)&&(w.add(t),d(t)),l&&!y.has(t))){y.add(t);let h=()=>{l(t);};typeof requestAnimationFrame=="function"?requestAnimationFrame(()=>{requestAnimationFrame(h);}):setTimeout(h,0);}}:void 0,f={as:u,display:"inline-flex",align:"center",justify:"center",gap:F,px:p.px,py:p.py,radius:"md",className:j,...W,...N};return m&&(f.ref=m),jsxRuntime.jsx(container.Container,{...f,children:a})}exports.Button=Y;//# sourceMappingURL=index.cjs.map
2
2
  //# sourceMappingURL=index.cjs.map
package/dist/index.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/kit/button.tsx"],"names":["sizePaddingMap","sizeGapMap","labelSizeMap","iconSizeMap","variantClasses","mountedElements","loadedElements","renderIcon","icon","size","iconSize","jsx","Icon","resolvedSize","Button","props","variant","color","fullWidth","disabled","loading","leftIcon","rightIcon","as","text","children","className","type","onMount","onLoad","restProps","baseClasses","stateClasses","paletteClasses","classes","padding","gap","labelSize","content","left","right","isKeyLikeText","label","Text","elementTypeProps","handleRef","element","runLoad","containerProps","Container"],"mappings":"mKAoBI,IAAMA,CAAAA,CAAuE,CACzE,EAAA,CAAI,CAAE,GAAI,CAAA,CAAG,EAAA,CAAI,CAAE,CAAA,CACnB,GAAI,CAAE,EAAA,CAAI,CAAA,CAAG,EAAA,CAAI,CAAE,CAAA,CACnB,EAAA,CAAI,CAAE,EAAA,CAAI,EAAG,EAAA,CAAI,CAAE,CACvB,CAAA,CAEMC,EAAwC,CAC1C,EAAA,CAAI,CAAA,CACJ,EAAA,CAAI,EACJ,EAAA,CAAI,CACR,CAAA,CAEMC,CAAAA,CAAuD,CACzD,EAAA,CAAI,IAAA,CACJ,EAAA,CAAI,IAAA,CACJ,GAAI,IACR,CAAA,CAEMC,CAAAA,CAAsD,CACxD,GAAI,IAAA,CACJ,EAAA,CAAI,IAAA,CACJ,EAAA,CAAI,IACR,CAAA,CAEMC,CAAAA,CAAuE,CACzE,KAAA,CAAO,CACH,KAAA,CAAO,CACH,UAAA,CACA,cAAA,CACA,SACA,oBAAA,CACA,sBAAA,CACA,wBAAA,CACA,iBAAA,CACA,YACA,iBACJ,CAAA,CACA,OAAA,CAAS,CACL,aACA,cAAA,CACA,QAAA,CACA,oBAAA,CACA,wBAAA,CACA,2BACA,iBAAA,CACA,WAAA,CACA,iBACJ,CAAA,CACA,QAAS,CACL,YAAA,CACA,cAAA,CACA,QAAA,CACA,qBACA,wBAAA,CACA,0BAAA,CACA,iBAAA,CACA,WAAA,CACA,iBACJ,CAAA,CACA,KAAA,CAAO,CACH,UAAA,CACA,eACA,QAAA,CACA,oBAAA,CACA,sBAAA,CACA,wBAAA,CACA,kBACA,WAAA,CACA,iBACJ,CAAA,CACA,OAAA,CAAS,CACL,YAAA,CACA,QAAA,CACA,QAAA,CACA,UAAA,CACA,kBACA,oBAAA,CACA,iBAAA,CACA,WAAA,CACA,iBACJ,CACJ,CAAA,CACA,OAAA,CAAS,CACL,KAAA,CAAO,CACH,gBAAA,CACA,YAAA,CACA,QAAA,CACA,cAAA,CACA,wBACA,wBAAA,CACA,iBACJ,CAAA,CACA,OAAA,CAAS,CACL,gBAAA,CACA,cAAA,CACA,QAAA,CACA,gBAAA,CACA,0BACA,0BAAA,CACA,iBACJ,CAAA,CACA,OAAA,CAAS,CACL,gBAAA,CACA,cAAA,CACA,QAAA,CACA,gBAAA,CACA,yBAAA,CACA,0BAAA,CACA,iBACJ,CAAA,CACA,MAAO,CACH,gBAAA,CACA,YAAA,CACA,QAAA,CACA,eACA,uBAAA,CACA,wBAAA,CACA,iBACJ,CAAA,CACA,QAAS,CACL,gBAAA,CACA,QAAA,CACA,QAAA,CACA,WACA,iBAAA,CACA,oBAAA,CACA,iBACJ,CACJ,EACA,KAAA,CAAO,CACH,KAAA,CAAO,CACH,iBACA,YAAA,CACA,QAAA,CACA,oBAAA,CACA,uBAAA,CACA,yBACA,iBACJ,CAAA,CACA,OAAA,CAAS,CACL,iBACA,cAAA,CACA,QAAA,CACA,oBAAA,CACA,yBAAA,CACA,2BACA,iBACJ,CAAA,CACA,OAAA,CAAS,CACL,iBACA,cAAA,CACA,QAAA,CACA,oBAAA,CACA,yBAAA,CACA,2BACA,iBACJ,CAAA,CACA,KAAA,CAAO,CACH,iBACA,YAAA,CACA,QAAA,CACA,oBAAA,CACA,uBAAA,CACA,yBACA,iBACJ,CAAA,CACA,OAAA,CAAS,CACL,iBACA,QAAA,CACA,QAAA,CACA,oBAAA,CACA,iBAAA,CACA,qBACA,iBACJ,CACJ,CAAA,CACA,IAAA,CAAM,CACF,KAAA,CAAO,CACH,gBAAA,CACA,YAAA,CACA,SACA,oBAAA,CACA,iBAAA,CACA,oBAAA,CACA,cAAA,CACA,MACJ,CAAA,CACA,OAAA,CAAS,CACL,gBAAA,CACA,eACA,QAAA,CACA,oBAAA,CACA,iBAAA,CACA,oBAAA,CACA,eACA,MACJ,CAAA,CACA,OAAA,CAAS,CACL,iBACA,cAAA,CACA,QAAA,CACA,oBAAA,CACA,iBAAA,CACA,qBACA,cAAA,CACA,MACJ,CAAA,CACA,KAAA,CAAO,CACH,gBAAA,CACA,YAAA,CACA,QAAA,CACA,oBAAA,CACA,kBACA,oBAAA,CACA,cAAA,CACA,MACJ,CAAA,CACA,QAAS,CACL,gBAAA,CACA,QAAA,CACA,QAAA,CACA,qBACA,iBAAA,CACA,oBAAA,CACA,cAAA,CACA,MACJ,CACJ,CACJ,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","file":"index.cjs","sourcesContent":["// src/kit/button.tsx\r\n//\r\n// Made with ❤️ by Maysara.\r\n\r\n\r\n\r\n// ╔════════════════════════════════════════ PACK ════════════════════════════════════════╗\r\n\r\n import type { JSXElement } from '@minejs/jsx';\r\n import { Container } from '@cruxkit/container';\r\n import { Text } from '@cruxkit/text';\r\n import { Icon, type IconProps, type IconName, type IconConfig } from '@cruxkit/icon';\r\n import type { ButtonProps, ButtonSize, ButtonColor, ButtonVariant } from '../types';\r\n \r\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\r\n\r\n\r\n\r\n// ╔════════════════════════════════════════ INIT ════════════════════════════════════════╗\r\n\r\n const sizePaddingMap: Record<ButtonSize, { px: 3 | 4 | 6; py: 1 | 2 | 3 }> = {\r\n sm: { px: 3, py: 1 },\r\n md: { px: 4, py: 2 },\r\n lg: { px: 6, py: 3 }\r\n };\r\n\r\n const sizeGapMap: Record<ButtonSize, 1 | 2> = {\r\n sm: 1,\r\n md: 2,\r\n lg: 2\r\n };\r\n\r\n const labelSizeMap: Record<ButtonSize, 'sm' | 'md' | 'lg'> = {\r\n sm: 'sm',\r\n md: 'md',\r\n lg: 'lg'\r\n };\r\n\r\n const iconSizeMap: Record<ButtonSize, 'sm' | 'md' | 'lg'> = {\r\n sm: 'sm',\r\n md: 'md',\r\n lg: 'lg'\r\n };\r\n\r\n const variantClasses: Record<ButtonVariant, Record<ButtonColor, string[]>> = {\r\n solid: {\r\n brand: [\r\n 'bg-brand',\r\n 'text-inverse',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:bg-brand-hover',\r\n 'active:bg-brand-active',\r\n 'active:scale-95',\r\n 'shadow-sm',\r\n 'hover:shadow-md'\r\n ],\r\n success: [\r\n 'bg-success',\r\n 'text-inverse',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:bg-success-hover',\r\n 'active:bg-success-active',\r\n 'active:scale-95',\r\n 'shadow-sm',\r\n 'hover:shadow-md'\r\n ],\r\n warning: [\r\n 'bg-warning',\r\n 'text-inverse',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:bg-warning-hover',\r\n 'active:bg-warning-active',\r\n 'active:scale-95',\r\n 'shadow-sm',\r\n 'hover:shadow-md'\r\n ],\r\n error: [\r\n 'bg-error',\r\n 'text-inverse',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:bg-error-hover',\r\n 'active:bg-error-active',\r\n 'active:scale-95',\r\n 'shadow-sm',\r\n 'hover:shadow-md'\r\n ],\r\n neutral: [\r\n 'bg-surface',\r\n 'text-1',\r\n 'border',\r\n 'border-1',\r\n 'hover:bg-raised',\r\n 'active:bg-tertiary',\r\n 'active:scale-95',\r\n 'shadow-sm',\r\n 'hover:shadow-md'\r\n ]\r\n },\r\n outline: {\r\n brand: [\r\n 'bg-transparent',\r\n 'text-brand',\r\n 'border',\r\n 'border-brand',\r\n 'hover:bg-brand-subtle',\r\n 'active:bg-brand-subtle',\r\n 'active:scale-95'\r\n ],\r\n success: [\r\n 'bg-transparent',\r\n 'text-success',\r\n 'border',\r\n 'border-success',\r\n 'hover:bg-success-subtle',\r\n 'active:bg-success-subtle',\r\n 'active:scale-95'\r\n ],\r\n warning: [\r\n 'bg-transparent',\r\n 'text-warning',\r\n 'border',\r\n 'border-warning',\r\n 'hover:bg-warning-subtle',\r\n 'active:bg-warning-subtle',\r\n 'active:scale-95'\r\n ],\r\n error: [\r\n 'bg-transparent',\r\n 'text-error',\r\n 'border',\r\n 'border-error',\r\n 'hover:bg-error-subtle',\r\n 'active:bg-error-subtle',\r\n 'active:scale-95'\r\n ],\r\n neutral: [\r\n 'bg-transparent',\r\n 'text-1',\r\n 'border',\r\n 'border-1',\r\n 'hover:bg-raised',\r\n 'active:bg-tertiary',\r\n 'active:scale-95'\r\n ]\r\n },\r\n ghost: {\r\n brand: [\r\n 'bg-transparent',\r\n 'text-brand',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:bg-brand-subtle',\r\n 'active:bg-brand-subtle',\r\n 'active:scale-95'\r\n ],\r\n success: [\r\n 'bg-transparent',\r\n 'text-success',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:bg-success-subtle',\r\n 'active:bg-success-subtle',\r\n 'active:scale-95'\r\n ],\r\n warning: [\r\n 'bg-transparent',\r\n 'text-warning',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:bg-warning-subtle',\r\n 'active:bg-warning-subtle',\r\n 'active:scale-95'\r\n ],\r\n error: [\r\n 'bg-transparent',\r\n 'text-error',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:bg-error-subtle',\r\n 'active:bg-error-subtle',\r\n 'active:scale-95'\r\n ],\r\n neutral: [\r\n 'bg-transparent',\r\n 'text-1',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:bg-raised',\r\n 'active:bg-tertiary',\r\n 'active:scale-95'\r\n ]\r\n },\r\n link: {\r\n brand: [\r\n 'bg-transparent',\r\n 'text-brand',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:underline',\r\n 'underline-offset-4',\r\n 'decoration-2',\r\n 'px-1'\r\n ],\r\n success: [\r\n 'bg-transparent',\r\n 'text-success',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:underline',\r\n 'underline-offset-4',\r\n 'decoration-2',\r\n 'px-1'\r\n ],\r\n warning: [\r\n 'bg-transparent',\r\n 'text-warning',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:underline',\r\n 'underline-offset-4',\r\n 'decoration-2',\r\n 'px-1'\r\n ],\r\n error: [\r\n 'bg-transparent',\r\n 'text-error',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:underline',\r\n 'underline-offset-4',\r\n 'decoration-2',\r\n 'px-1'\r\n ],\r\n neutral: [\r\n 'bg-transparent',\r\n 'text-1',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:underline',\r\n 'underline-offset-4',\r\n 'decoration-2',\r\n 'px-1'\r\n ]\r\n }\r\n };\r\n\r\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\r\n\r\n\r\n\r\n// ╔════════════════════════════════════════ CORE ════════════════════════════════════════╗\r\n\r\n const mountedElements = new WeakSet<HTMLElement>();\r\n const loadedElements = new WeakSet<HTMLElement>();\r\n\r\n type ButtonContainerProps = {\r\n as?: unknown;\r\n display?: string;\r\n align?: string;\r\n justify?: string;\r\n gap?: number;\r\n px?: number;\r\n py?: number;\r\n radius?: string;\r\n className?: string;\r\n ref?: (element: HTMLElement | null) => void;\r\n } & Record<string, unknown>;\r\n\r\n function renderIcon(icon: IconProps | IconName | undefined, size: ButtonSize): JSXElement | null {\r\n if (!icon) return null;\r\n\r\n const iconSize = iconSizeMap[size];\r\n\r\n if (typeof icon === 'string') {\r\n return (\r\n <span className=\"inline-flex shrink-0\">\r\n <Icon name={icon as IconName} size={iconSize} />\r\n </span>\r\n );\r\n }\r\n\r\n const resolvedSize = ((icon as IconProps) as IconConfig).size ?? iconSize;\r\n\r\n return (\r\n <span className=\"inline-flex shrink-0\">\r\n <Icon {...icon} size={resolvedSize} />\r\n </span>\r\n );\r\n }\r\n\r\n /**\r\n * A polymorphic button component that supports multiple variants, colors, sizes, and states.\r\n *\r\n * @param props - The properties for the Button component.\r\n * @param props.variant - Visual style variant: `'solid' | 'outline' | 'ghost' | 'link'`.\r\n * @param props.color - Color theme: `'brand' | 'success' | 'warning' | 'error' | 'neutral'`.\r\n * @param props.size - Size scale: `'sm' | 'md' | 'lg'`.\r\n * @param props.fullWidth - Whether the button spans the full width of its container.\r\n * @param props.disabled - Whether the button is disabled.\r\n * @param props.loading - Whether the button is in a loading state (disables interaction).\r\n * @param props.leftIcon - Optional icon placed to the left of the label (string name or IconProps).\r\n * @param props.rightIcon - Optional icon placed to the right of the label (string name or IconProps).\r\n * @param props.as - Element type to render: `'button' | 'a' | any polymorphic component`.\r\n * @param props.children - Button label content.\r\n * @param props.className - Additional CSS classes appended to the built-in styles.\r\n * @param props.type - HTML button type attribute (only applied when `as=\"button\"`).\r\n * @param props.restProps - Any other props are forwarded to the underlying element.\r\n *\r\n * @returns A JSX element representing the styled button.\r\n *\r\n * @example\r\n * ```tsx\r\n * <Button variant=\"solid\" color=\"brand\" size=\"md\" onClick={handleClick}>\r\n * Save\r\n * </Button>\r\n * ```\r\n */\r\n export function Button(props: ButtonProps): JSXElement {\r\n const {\r\n variant = 'solid',\r\n color = 'brand',\r\n size = 'md',\r\n fullWidth = false,\r\n disabled = false,\r\n loading = false,\r\n leftIcon,\r\n rightIcon,\r\n as = 'button',\r\n text,\r\n children,\r\n className,\r\n type = 'button',\r\n onMount,\r\n onLoad,\r\n ...restProps\r\n } = props;\r\n\r\n const baseClasses = [\r\n 'inline-flex',\r\n 'items-center',\r\n 'justify-center',\r\n 'font-medium',\r\n 'transition-all',\r\n 'duration-150',\r\n 'select-none',\r\n 'focus:outline-none',\r\n 'focus-visible:ring',\r\n 'focus-visible:ring-offset-2'\r\n ];\r\n\r\n const stateClasses = [];\r\n\r\n if (loading || disabled) {\r\n stateClasses.push('opacity-50', 'cursor-not-allowed', 'pointer-events-none');\r\n }\r\n\r\n if (fullWidth) {\r\n stateClasses.push('w-full');\r\n }\r\n\r\n const paletteClasses = variantClasses[variant][color];\r\n\r\n const classes = [\r\n ...baseClasses,\r\n ...stateClasses,\r\n ...paletteClasses,\r\n className\r\n ]\r\n .filter(Boolean)\r\n .join(' ');\r\n\r\n const padding = sizePaddingMap[size];\r\n const gap = sizeGapMap[size];\r\n const labelSize = labelSizeMap[size];\r\n\r\n const content: JSXElement[] = [];\r\n\r\n const left = renderIcon(leftIcon, size);\r\n const right = renderIcon(rightIcon, size);\r\n\r\n if (left) {\r\n content.push(left);\r\n }\r\n\r\n const isKeyLikeText = typeof text === 'string' && text.includes('.');\r\n const label = children ?? (isKeyLikeText ? '--' : text);\r\n\r\n if (label !== undefined && label !== null && label !== '') {\r\n content.push(\r\n <Text as=\"span\" size={labelSize} data-role=\"btn-label\" className='flex items-center'>\r\n {label}\r\n </Text>\r\n );\r\n }\r\n\r\n if (right) {\r\n content.push(right);\r\n }\r\n\r\n const elementType = as;\r\n\r\n const elementTypeProps =\r\n elementType === 'button'\r\n ? { type }\r\n : {};\r\n\r\n\r\n const handleRef =\r\n (onMount || onLoad)\r\n ? (element: HTMLElement | null) => {\r\n if (!element) return;\r\n\r\n if (onMount && !mountedElements.has(element)) {\r\n mountedElements.add(element);\r\n onMount(element);\r\n }\r\n\r\n if (onLoad && !loadedElements.has(element)) {\r\n loadedElements.add(element);\r\n\r\n const runLoad = () => {\r\n onLoad(element);\r\n };\r\n\r\n if (typeof requestAnimationFrame === 'function') {\r\n requestAnimationFrame(() => {\r\n requestAnimationFrame(runLoad);\r\n });\r\n } else {\r\n setTimeout(runLoad, 0);\r\n }\r\n }\r\n }\r\n : undefined;\r\n\r\n const containerProps: ButtonContainerProps = {\r\n as,\r\n display : 'inline-flex',\r\n align : 'center',\r\n justify : 'center',\r\n gap,\r\n px : padding.px,\r\n py : padding.py,\r\n radius : 'md',\r\n className : classes,\r\n ...elementTypeProps,\r\n ...restProps\r\n };\r\n\r\n if (handleRef) {\r\n containerProps.ref = handleRef;\r\n }\r\n\r\n return (\r\n <Container {...(containerProps as Record<string, unknown>)}>\r\n {content}\r\n </Container>\r\n );\r\n }\r\n\r\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\r\n"]}
1
+ {"version":3,"sources":["../src/kit/button.tsx"],"names":["sizePaddingMap","sizeGapMap","labelSizeMap","iconSizeMap","variantClasses","mountedElements","loadedElements","renderIcon","icon","size","iconSize","jsx","Icon","resolvedSize","Button","props","variant","color","fullWidth","labelFullWidth","disabled","loading","leftIcon","rightIcon","as","text","children","className","type","onMount","onLoad","restProps","baseClasses","stateClasses","paletteClasses","classes","padding","gap","labelSize","content","left","right","isKeyLikeText","label","Text","elementTypeProps","handleRef","element","runLoad","containerProps","Container"],"mappings":"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","file":"index.cjs","sourcesContent":["// src/kit/button.tsx\r\n//\r\n// Made with ❤️ by Maysara.\r\n\r\n\r\n\r\n// ╔════════════════════════════════════════ PACK ════════════════════════════════════════╗\r\n\r\n import type { JSXElement } from '@minejs/jsx';\r\n import { Container } from '@cruxkit/container';\r\n import { Text } from '@cruxkit/text';\r\n import { Icon, type IconProps, type IconName, type IconConfig } from '@cruxkit/icon';\r\n import type { ButtonProps, ButtonSize, ButtonColor, ButtonVariant } from '../types';\r\n \r\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\r\n\r\n\r\n\r\n// ╔════════════════════════════════════════ INIT ════════════════════════════════════════╗\r\n\r\n const sizePaddingMap: Record<ButtonSize, { px: 3 | 4 | 6; py: 1 | 2 | 3 }> = {\r\n sm: { px: 3, py: 1 },\r\n md: { px: 4, py: 2 },\r\n lg: { px: 6, py: 3 }\r\n };\r\n\r\n const sizeGapMap: Record<ButtonSize, 1 | 2> = {\r\n sm: 1,\r\n md: 2,\r\n lg: 2\r\n };\r\n\r\n const labelSizeMap: Record<ButtonSize, 'sm' | 'md' | 'lg'> = {\r\n sm: 'sm',\r\n md: 'md',\r\n lg: 'lg'\r\n };\r\n\r\n const iconSizeMap: Record<ButtonSize, 'sm' | 'md' | 'lg'> = {\r\n sm: 'sm',\r\n md: 'md',\r\n lg: 'lg'\r\n };\r\n\r\n const variantClasses: Record<ButtonVariant, Record<ButtonColor, string[]>> = {\r\n solid: {\r\n brand: [\r\n 'bg-brand',\r\n 'text-inverse',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:bg-brand-hover',\r\n 'active:bg-brand-active',\r\n 'active:scale-95',\r\n 'shadow-sm',\r\n 'hover:shadow-md'\r\n ],\r\n success: [\r\n 'bg-success',\r\n 'text-inverse',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:bg-success-hover',\r\n 'active:bg-success-active',\r\n 'active:scale-95',\r\n 'shadow-sm',\r\n 'hover:shadow-md'\r\n ],\r\n warning: [\r\n 'bg-warning',\r\n 'text-inverse',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:bg-warning-hover',\r\n 'active:bg-warning-active',\r\n 'active:scale-95',\r\n 'shadow-sm',\r\n 'hover:shadow-md'\r\n ],\r\n error: [\r\n 'bg-error',\r\n 'text-inverse',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:bg-error-hover',\r\n 'active:bg-error-active',\r\n 'active:scale-95',\r\n 'shadow-sm',\r\n 'hover:shadow-md'\r\n ],\r\n neutral: [\r\n 'bg-surface',\r\n 'text-1',\r\n 'border',\r\n 'border-1',\r\n 'hover:bg-raised',\r\n 'active:bg-tertiary',\r\n 'active:scale-95',\r\n 'shadow-sm',\r\n 'hover:shadow-md'\r\n ]\r\n },\r\n outline: {\r\n brand: [\r\n 'bg-transparent',\r\n 'text-brand',\r\n 'border',\r\n 'border-brand',\r\n 'hover:bg-brand-subtle',\r\n 'active:bg-brand-subtle',\r\n 'active:scale-95'\r\n ],\r\n success: [\r\n 'bg-transparent',\r\n 'text-success',\r\n 'border',\r\n 'border-success',\r\n 'hover:bg-success-subtle',\r\n 'active:bg-success-subtle',\r\n 'active:scale-95'\r\n ],\r\n warning: [\r\n 'bg-transparent',\r\n 'text-warning',\r\n 'border',\r\n 'border-warning',\r\n 'hover:bg-warning-subtle',\r\n 'active:bg-warning-subtle',\r\n 'active:scale-95'\r\n ],\r\n error: [\r\n 'bg-transparent',\r\n 'text-error',\r\n 'border',\r\n 'border-error',\r\n 'hover:bg-error-subtle',\r\n 'active:bg-error-subtle',\r\n 'active:scale-95'\r\n ],\r\n neutral: [\r\n 'bg-transparent',\r\n 'text-1',\r\n 'border',\r\n 'border-1',\r\n 'hover:bg-raised',\r\n 'active:bg-tertiary',\r\n 'active:scale-95'\r\n ]\r\n },\r\n ghost: {\r\n brand: [\r\n 'bg-transparent',\r\n 'text-brand',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:bg-brand-subtle',\r\n 'active:bg-brand-subtle',\r\n 'active:scale-95'\r\n ],\r\n success: [\r\n 'bg-transparent',\r\n 'text-success',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:bg-success-subtle',\r\n 'active:bg-success-subtle',\r\n 'active:scale-95'\r\n ],\r\n warning: [\r\n 'bg-transparent',\r\n 'text-warning',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:bg-warning-subtle',\r\n 'active:bg-warning-subtle',\r\n 'active:scale-95'\r\n ],\r\n error: [\r\n 'bg-transparent',\r\n 'text-error',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:bg-error-subtle',\r\n 'active:bg-error-subtle',\r\n 'active:scale-95'\r\n ],\r\n neutral: [\r\n 'bg-transparent',\r\n 'text-1',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:bg-raised',\r\n 'active:bg-tertiary',\r\n 'active:scale-95'\r\n ]\r\n },\r\n link: {\r\n brand: [\r\n 'bg-transparent',\r\n 'text-brand',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:underline',\r\n 'underline-offset-4',\r\n 'decoration-2',\r\n 'px-1'\r\n ],\r\n success: [\r\n 'bg-transparent',\r\n 'text-success',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:underline',\r\n 'underline-offset-4',\r\n 'decoration-2',\r\n 'px-1'\r\n ],\r\n warning: [\r\n 'bg-transparent',\r\n 'text-warning',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:underline',\r\n 'underline-offset-4',\r\n 'decoration-2',\r\n 'px-1'\r\n ],\r\n error: [\r\n 'bg-transparent',\r\n 'text-error',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:underline',\r\n 'underline-offset-4',\r\n 'decoration-2',\r\n 'px-1'\r\n ],\r\n neutral: [\r\n 'bg-transparent',\r\n 'text-1',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:underline',\r\n 'underline-offset-4',\r\n 'decoration-2',\r\n 'px-1'\r\n ]\r\n }\r\n };\r\n\r\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\r\n\r\n\r\n\r\n// ╔════════════════════════════════════════ CORE ════════════════════════════════════════╗\r\n\r\n const mountedElements = new WeakSet<HTMLElement>();\r\n const loadedElements = new WeakSet<HTMLElement>();\r\n\r\n type ButtonContainerProps = {\r\n as?: unknown;\r\n display?: string;\r\n align?: string;\r\n justify?: string;\r\n gap?: number;\r\n px?: number;\r\n py?: number;\r\n radius?: string;\r\n className?: string;\r\n ref?: (element: HTMLElement | null) => void;\r\n } & Record<string, unknown>;\r\n\r\n function renderIcon(icon: IconProps | IconName | undefined, size: ButtonSize): JSXElement | null {\r\n if (!icon) return null;\r\n\r\n const iconSize = iconSizeMap[size];\r\n\r\n if (typeof icon === 'string') {\r\n return (\r\n <span className=\"inline-flex shrink-0\">\r\n <Icon name={icon as IconName} size={iconSize} />\r\n </span>\r\n );\r\n }\r\n\r\n const resolvedSize = ((icon as IconProps) as IconConfig).size ?? iconSize;\r\n\r\n return (\r\n <span className=\"inline-flex shrink-0\">\r\n <Icon {...icon} size={resolvedSize} />\r\n </span>\r\n );\r\n }\r\n\r\n /**\r\n * A polymorphic button component that supports multiple variants, colors, sizes, and states.\r\n *\r\n * @param props - The properties for the Button component.\r\n * @param props.variant - Visual style variant: `'solid' | 'outline' | 'ghost' | 'link'`.\r\n * @param props.color - Color theme: `'brand' | 'success' | 'warning' | 'error' | 'neutral'`.\r\n * @param props.size - Size scale: `'sm' | 'md' | 'lg'`.\r\n * @param props.fullWidth - Whether the button spans the full width of its container.\r\n * @param props.labelFullWidth - Whether the label spans the full width of the button.\r\n * @param props.disabled - Whether the button is disabled.\r\n * @param props.loading - Whether the button is in a loading state (disables interaction).\r\n * @param props.leftIcon - Optional icon placed to the left of the label (string name or IconProps).\r\n * @param props.rightIcon - Optional icon placed to the right of the label (string name or IconProps).\r\n * @param props.as - Element type to render: `'button' | 'a' | any polymorphic component`.\r\n * @param props.children - Button label content.\r\n * @param props.className - Additional CSS classes appended to the built-in styles.\r\n * @param props.type - HTML button type attribute (only applied when `as=\"button\"`).\r\n * @param props.restProps - Any other props are forwarded to the underlying element.\r\n *\r\n * @returns A JSX element representing the styled button.\r\n *\r\n * @example\r\n * ```tsx\r\n * <Button variant=\"solid\" color=\"brand\" size=\"md\" onClick={handleClick}>\r\n * Save\r\n * </Button>\r\n * ```\r\n */\r\n export function Button(props: ButtonProps): JSXElement {\r\n const {\r\n variant = 'solid',\r\n color = 'brand',\r\n size = 'md',\r\n fullWidth = false,\r\n labelFullWidth = false,\r\n disabled = false,\r\n loading = false,\r\n leftIcon,\r\n rightIcon,\r\n as = 'button',\r\n text,\r\n children,\r\n className,\r\n type = 'button',\r\n onMount,\r\n onLoad,\r\n ...restProps\r\n } = props;\r\n\r\n const baseClasses = [\r\n 'inline-flex',\r\n 'items-center',\r\n 'justify-center',\r\n 'font-medium',\r\n 'transition-all',\r\n 'duration-150',\r\n 'select-none',\r\n 'focus:outline-none',\r\n 'focus-visible:ring',\r\n 'focus-visible:ring-offset-2'\r\n ];\r\n\r\n const stateClasses = [];\r\n\r\n if (loading || disabled) {\r\n stateClasses.push('opacity-50', 'cursor-not-allowed', 'pointer-events-none');\r\n }\r\n\r\n if (fullWidth) {\r\n stateClasses.push('w-full');\r\n }\r\n\r\n const paletteClasses = variantClasses[variant][color];\r\n\r\n const classes = [\r\n ...baseClasses,\r\n ...stateClasses,\r\n ...paletteClasses,\r\n className\r\n ]\r\n .filter(Boolean)\r\n .join(' ');\r\n\r\n const padding = sizePaddingMap[size];\r\n const gap = sizeGapMap[size];\r\n const labelSize = labelSizeMap[size];\r\n\r\n const content: JSXElement[] = [];\r\n\r\n const left = renderIcon(leftIcon, size);\r\n const right = renderIcon(rightIcon, size);\r\n\r\n if (left) {\r\n content.push(left);\r\n }\r\n\r\n const isKeyLikeText = typeof text === 'string' && text.includes('.');\r\n const label = children ?? (isKeyLikeText ? '--' : text);\r\n\r\n if (label !== undefined && label !== null && label !== '') {\r\n content.push(\r\n <Text as=\"span\" size={labelSize} data-role=\"btn-label\" className={`flex items-center${labelFullWidth ? ' w-full justify-center' : ''}`}>\r\n {label}\r\n </Text>\r\n );\r\n }\r\n\r\n if (right) {\r\n content.push(right);\r\n }\r\n\r\n const elementType = as;\r\n\r\n const elementTypeProps =\r\n elementType === 'button'\r\n ? { type }\r\n : {};\r\n\r\n\r\n const handleRef =\r\n (onMount || onLoad)\r\n ? (element: HTMLElement | null) => {\r\n if (!element) return;\r\n\r\n if (onMount && !mountedElements.has(element)) {\r\n mountedElements.add(element);\r\n onMount(element);\r\n }\r\n\r\n if (onLoad && !loadedElements.has(element)) {\r\n loadedElements.add(element);\r\n\r\n const runLoad = () => {\r\n onLoad(element);\r\n };\r\n\r\n if (typeof requestAnimationFrame === 'function') {\r\n requestAnimationFrame(() => {\r\n requestAnimationFrame(runLoad);\r\n });\r\n } else {\r\n setTimeout(runLoad, 0);\r\n }\r\n }\r\n }\r\n : undefined;\r\n\r\n const containerProps: ButtonContainerProps = {\r\n as,\r\n display : 'inline-flex',\r\n align : 'center',\r\n justify : 'center',\r\n gap,\r\n px : padding.px,\r\n py : padding.py,\r\n radius : 'md',\r\n className : classes,\r\n ...elementTypeProps,\r\n ...restProps\r\n };\r\n\r\n if (handleRef) {\r\n containerProps.ref = handleRef;\r\n }\r\n\r\n return (\r\n <Container {...(containerProps as Record<string, unknown>)}>\r\n {content}\r\n </Container>\r\n );\r\n }\r\n\r\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\r\n"]}
package/dist/index.d.cts CHANGED
@@ -10,6 +10,7 @@ interface ButtonProps {
10
10
  color?: ButtonColor;
11
11
  size?: ButtonSize;
12
12
  fullWidth?: boolean;
13
+ labelFullWidth?: boolean;
13
14
  disabled?: boolean;
14
15
  loading?: boolean;
15
16
  leftIcon?: IconProps | IconName;
@@ -40,6 +41,7 @@ interface ButtonProps {
40
41
  * @param props.color - Color theme: `'brand' | 'success' | 'warning' | 'error' | 'neutral'`.
41
42
  * @param props.size - Size scale: `'sm' | 'md' | 'lg'`.
42
43
  * @param props.fullWidth - Whether the button spans the full width of its container.
44
+ * @param props.labelFullWidth - Whether the label spans the full width of the button.
43
45
  * @param props.disabled - Whether the button is disabled.
44
46
  * @param props.loading - Whether the button is in a loading state (disables interaction).
45
47
  * @param props.leftIcon - Optional icon placed to the left of the label (string name or IconProps).
package/dist/index.d.ts CHANGED
@@ -10,6 +10,7 @@ interface ButtonProps {
10
10
  color?: ButtonColor;
11
11
  size?: ButtonSize;
12
12
  fullWidth?: boolean;
13
+ labelFullWidth?: boolean;
13
14
  disabled?: boolean;
14
15
  loading?: boolean;
15
16
  leftIcon?: IconProps | IconName;
@@ -40,6 +41,7 @@ interface ButtonProps {
40
41
  * @param props.color - Color theme: `'brand' | 'success' | 'warning' | 'error' | 'neutral'`.
41
42
  * @param props.size - Size scale: `'sm' | 'md' | 'lg'`.
42
43
  * @param props.fullWidth - Whether the button spans the full width of its container.
44
+ * @param props.labelFullWidth - Whether the label spans the full width of the button.
43
45
  * @param props.disabled - Whether the button is disabled.
44
46
  * @param props.loading - Whether the button is in a loading state (disables interaction).
45
47
  * @param props.leftIcon - Optional icon placed to the left of the label (string name or IconProps).
package/dist/index.js CHANGED
@@ -1,2 +1,2 @@
1
- import {Container}from'@cruxkit/container';import {Text}from'@cruxkit/text';import {Icon}from'@cruxkit/icon';import {jsx}from'@minejs/jsx/jsx-runtime';var F={sm:{px:3,py:1},md:{px:4,py:2},lg:{px:6,py:3}},W={sm:1,md:2,lg:2},V={sm:"sm",md:"md",lg:"lg"},G={sm:"sm",md:"md",lg:"lg"},K={solid:{brand:["bg-brand","text-inverse","border","border-transparent","hover:bg-brand-hover","active:bg-brand-active","active:scale-95","shadow-sm","hover:shadow-md"],success:["bg-success","text-inverse","border","border-transparent","hover:bg-success-hover","active:bg-success-active","active:scale-95","shadow-sm","hover:shadow-md"],warning:["bg-warning","text-inverse","border","border-transparent","hover:bg-warning-hover","active:bg-warning-active","active:scale-95","shadow-sm","hover:shadow-md"],error:["bg-error","text-inverse","border","border-transparent","hover:bg-error-hover","active:bg-error-active","active:scale-95","shadow-sm","hover:shadow-md"],neutral:["bg-surface","text-1","border","border-1","hover:bg-raised","active:bg-tertiary","active:scale-95","shadow-sm","hover:shadow-md"]},outline:{brand:["bg-transparent","text-brand","border","border-brand","hover:bg-brand-subtle","active:bg-brand-subtle","active:scale-95"],success:["bg-transparent","text-success","border","border-success","hover:bg-success-subtle","active:bg-success-subtle","active:scale-95"],warning:["bg-transparent","text-warning","border","border-warning","hover:bg-warning-subtle","active:bg-warning-subtle","active:scale-95"],error:["bg-transparent","text-error","border","border-error","hover:bg-error-subtle","active:bg-error-subtle","active:scale-95"],neutral:["bg-transparent","text-1","border","border-1","hover:bg-raised","active:bg-tertiary","active:scale-95"]},ghost:{brand:["bg-transparent","text-brand","border","border-transparent","hover:bg-brand-subtle","active:bg-brand-subtle","active:scale-95"],success:["bg-transparent","text-success","border","border-transparent","hover:bg-success-subtle","active:bg-success-subtle","active:scale-95"],warning:["bg-transparent","text-warning","border","border-transparent","hover:bg-warning-subtle","active:bg-warning-subtle","active:scale-95"],error:["bg-transparent","text-error","border","border-transparent","hover:bg-error-subtle","active:bg-error-subtle","active:scale-95"],neutral:["bg-transparent","text-1","border","border-transparent","hover:bg-raised","active:bg-tertiary","active:scale-95"]},link:{brand:["bg-transparent","text-brand","border","border-transparent","hover:underline","underline-offset-4","decoration-2","px-1"],success:["bg-transparent","text-success","border","border-transparent","hover:underline","underline-offset-4","decoration-2","px-1"],warning:["bg-transparent","text-warning","border","border-transparent","hover:underline","underline-offset-4","decoration-2","px-1"],error:["bg-transparent","text-error","border","border-transparent","hover:underline","underline-offset-4","decoration-2","px-1"],neutral:["bg-transparent","text-1","border","border-transparent","hover:underline","underline-offset-4","decoration-2","px-1"]}},w=new WeakSet,y=new WeakSet;function z(e,i){if(!e)return null;let s=G[i];if(typeof e=="string")return jsx("span",{className:"inline-flex shrink-0",children:jsx(Icon,{name:e,size:s})});let r=e.size??s;return jsx("span",{className:"inline-flex shrink-0",children:jsx(Icon,{...e,size:r})})}function Y(e){let{variant:i="solid",color:s="brand",size:r="md",fullWidth:S=false,disabled:B=false,loading:C=false,leftIcon:I,rightIcon:P,as:u="button",text:c,children:T,className:E,type:k="button",onMount:d,onLoad:l,...M}=e,N=["inline-flex","items-center","justify-center","font-medium","transition-all","duration-150","select-none","focus:outline-none","focus-visible:ring","focus-visible:ring-offset-2"],b=[];(C||B)&&b.push("opacity-50","cursor-not-allowed","pointer-events-none"),S&&b.push("w-full");let R=K[i][s],L=[...N,...b,...R,E].filter(Boolean).join(" "),p=F[r],H=W[r],J=V[r],a=[],g=z(I,r),v=z(P,r);g&&a.push(g);let X=typeof c=="string"&&c.includes("."),o=T??(X?"--":c);o!=null&&o!==""&&a.push(jsx(Text,{as:"span",size:J,"data-role":"btn-label",className:"flex items-center",children:o})),v&&a.push(v);let j=u==="button"?{type:k}:{},m=d||l?t=>{if(t&&(d&&!w.has(t)&&(w.add(t),d(t)),l&&!y.has(t))){y.add(t);let h=()=>{l(t);};typeof requestAnimationFrame=="function"?requestAnimationFrame(()=>{requestAnimationFrame(h);}):setTimeout(h,0);}}:void 0,f={as:u,display:"inline-flex",align:"center",justify:"center",gap:H,px:p.px,py:p.py,radius:"md",className:L,...j,...M};return m&&(f.ref=m),jsx(Container,{...f,children:a})}export{Y as Button};//# sourceMappingURL=index.js.map
1
+ import {Container}from'@cruxkit/container';import {Text}from'@cruxkit/text';import {Icon}from'@cruxkit/icon';import {jsx}from'@minejs/jsx/jsx-runtime';var A={sm:{px:3,py:1},md:{px:4,py:2},lg:{px:6,py:3}},V={sm:1,md:2,lg:2},G={sm:"sm",md:"md",lg:"lg"},K={sm:"sm",md:"md",lg:"lg"},$={solid:{brand:["bg-brand","text-inverse","border","border-transparent","hover:bg-brand-hover","active:bg-brand-active","active:scale-95","shadow-sm","hover:shadow-md"],success:["bg-success","text-inverse","border","border-transparent","hover:bg-success-hover","active:bg-success-active","active:scale-95","shadow-sm","hover:shadow-md"],warning:["bg-warning","text-inverse","border","border-transparent","hover:bg-warning-hover","active:bg-warning-active","active:scale-95","shadow-sm","hover:shadow-md"],error:["bg-error","text-inverse","border","border-transparent","hover:bg-error-hover","active:bg-error-active","active:scale-95","shadow-sm","hover:shadow-md"],neutral:["bg-surface","text-1","border","border-1","hover:bg-raised","active:bg-tertiary","active:scale-95","shadow-sm","hover:shadow-md"]},outline:{brand:["bg-transparent","text-brand","border","border-brand","hover:bg-brand-subtle","active:bg-brand-subtle","active:scale-95"],success:["bg-transparent","text-success","border","border-success","hover:bg-success-subtle","active:bg-success-subtle","active:scale-95"],warning:["bg-transparent","text-warning","border","border-warning","hover:bg-warning-subtle","active:bg-warning-subtle","active:scale-95"],error:["bg-transparent","text-error","border","border-error","hover:bg-error-subtle","active:bg-error-subtle","active:scale-95"],neutral:["bg-transparent","text-1","border","border-1","hover:bg-raised","active:bg-tertiary","active:scale-95"]},ghost:{brand:["bg-transparent","text-brand","border","border-transparent","hover:bg-brand-subtle","active:bg-brand-subtle","active:scale-95"],success:["bg-transparent","text-success","border","border-transparent","hover:bg-success-subtle","active:bg-success-subtle","active:scale-95"],warning:["bg-transparent","text-warning","border","border-transparent","hover:bg-warning-subtle","active:bg-warning-subtle","active:scale-95"],error:["bg-transparent","text-error","border","border-transparent","hover:bg-error-subtle","active:bg-error-subtle","active:scale-95"],neutral:["bg-transparent","text-1","border","border-transparent","hover:bg-raised","active:bg-tertiary","active:scale-95"]},link:{brand:["bg-transparent","text-brand","border","border-transparent","hover:underline","underline-offset-4","decoration-2","px-1"],success:["bg-transparent","text-success","border","border-transparent","hover:underline","underline-offset-4","decoration-2","px-1"],warning:["bg-transparent","text-warning","border","border-transparent","hover:underline","underline-offset-4","decoration-2","px-1"],error:["bg-transparent","text-error","border","border-transparent","hover:underline","underline-offset-4","decoration-2","px-1"],neutral:["bg-transparent","text-1","border","border-transparent","hover:underline","underline-offset-4","decoration-2","px-1"]}},w=new WeakSet,y=new WeakSet;function z(e,i){if(!e)return null;let s=K[i];if(typeof e=="string")return jsx("span",{className:"inline-flex shrink-0",children:jsx(Icon,{name:e,size:s})});let r=e.size??s;return jsx("span",{className:"inline-flex shrink-0",children:jsx(Icon,{...e,size:r})})}function Y(e){let{variant:i="solid",color:s="brand",size:r="md",fullWidth:S=false,labelFullWidth:B=false,disabled:C=false,loading:I=false,leftIcon:P,rightIcon:T,as:u="button",text:c,children:E,className:k,type:M="button",onMount:d,onLoad:l,...N}=e,R=["inline-flex","items-center","justify-center","font-medium","transition-all","duration-150","select-none","focus:outline-none","focus-visible:ring","focus-visible:ring-offset-2"],b=[];(I||C)&&b.push("opacity-50","cursor-not-allowed","pointer-events-none"),S&&b.push("w-full");let L=$[i][s],j=[...R,...b,...L,k].filter(Boolean).join(" "),p=A[r],F=V[r],H=G[r],a=[],g=z(P,r),v=z(T,r);g&&a.push(g);let J=typeof c=="string"&&c.includes("."),o=E??(J?"--":c);o!=null&&o!==""&&a.push(jsx(Text,{as:"span",size:H,"data-role":"btn-label",className:`flex items-center${B?" w-full justify-center":""}`,children:o})),v&&a.push(v);let W=u==="button"?{type:M}:{},m=d||l?t=>{if(t&&(d&&!w.has(t)&&(w.add(t),d(t)),l&&!y.has(t))){y.add(t);let h=()=>{l(t);};typeof requestAnimationFrame=="function"?requestAnimationFrame(()=>{requestAnimationFrame(h);}):setTimeout(h,0);}}:void 0,f={as:u,display:"inline-flex",align:"center",justify:"center",gap:F,px:p.px,py:p.py,radius:"md",className:j,...W,...N};return m&&(f.ref=m),jsx(Container,{...f,children:a})}export{Y as Button};//# sourceMappingURL=index.js.map
2
2
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/kit/button.tsx"],"names":["sizePaddingMap","sizeGapMap","labelSizeMap","iconSizeMap","variantClasses","mountedElements","loadedElements","renderIcon","icon","size","iconSize","jsx","Icon","resolvedSize","Button","props","variant","color","fullWidth","disabled","loading","leftIcon","rightIcon","as","text","children","className","type","onMount","onLoad","restProps","baseClasses","stateClasses","paletteClasses","classes","padding","gap","labelSize","content","left","right","isKeyLikeText","label","Text","elementTypeProps","handleRef","element","runLoad","containerProps","Container"],"mappings":"uJAoBI,IAAMA,CAAAA,CAAuE,CACzE,EAAA,CAAI,CAAE,GAAI,CAAA,CAAG,EAAA,CAAI,CAAE,CAAA,CACnB,GAAI,CAAE,EAAA,CAAI,CAAA,CAAG,EAAA,CAAI,CAAE,CAAA,CACnB,EAAA,CAAI,CAAE,EAAA,CAAI,EAAG,EAAA,CAAI,CAAE,CACvB,CAAA,CAEMC,EAAwC,CAC1C,EAAA,CAAI,CAAA,CACJ,EAAA,CAAI,EACJ,EAAA,CAAI,CACR,CAAA,CAEMC,CAAAA,CAAuD,CACzD,EAAA,CAAI,IAAA,CACJ,EAAA,CAAI,IAAA,CACJ,GAAI,IACR,CAAA,CAEMC,CAAAA,CAAsD,CACxD,GAAI,IAAA,CACJ,EAAA,CAAI,IAAA,CACJ,EAAA,CAAI,IACR,CAAA,CAEMC,CAAAA,CAAuE,CACzE,KAAA,CAAO,CACH,KAAA,CAAO,CACH,UAAA,CACA,cAAA,CACA,SACA,oBAAA,CACA,sBAAA,CACA,wBAAA,CACA,iBAAA,CACA,YACA,iBACJ,CAAA,CACA,OAAA,CAAS,CACL,aACA,cAAA,CACA,QAAA,CACA,oBAAA,CACA,wBAAA,CACA,2BACA,iBAAA,CACA,WAAA,CACA,iBACJ,CAAA,CACA,QAAS,CACL,YAAA,CACA,cAAA,CACA,QAAA,CACA,qBACA,wBAAA,CACA,0BAAA,CACA,iBAAA,CACA,WAAA,CACA,iBACJ,CAAA,CACA,KAAA,CAAO,CACH,UAAA,CACA,eACA,QAAA,CACA,oBAAA,CACA,sBAAA,CACA,wBAAA,CACA,kBACA,WAAA,CACA,iBACJ,CAAA,CACA,OAAA,CAAS,CACL,YAAA,CACA,QAAA,CACA,QAAA,CACA,UAAA,CACA,kBACA,oBAAA,CACA,iBAAA,CACA,WAAA,CACA,iBACJ,CACJ,CAAA,CACA,OAAA,CAAS,CACL,KAAA,CAAO,CACH,gBAAA,CACA,YAAA,CACA,QAAA,CACA,cAAA,CACA,wBACA,wBAAA,CACA,iBACJ,CAAA,CACA,OAAA,CAAS,CACL,gBAAA,CACA,cAAA,CACA,QAAA,CACA,gBAAA,CACA,0BACA,0BAAA,CACA,iBACJ,CAAA,CACA,OAAA,CAAS,CACL,gBAAA,CACA,cAAA,CACA,QAAA,CACA,gBAAA,CACA,yBAAA,CACA,0BAAA,CACA,iBACJ,CAAA,CACA,MAAO,CACH,gBAAA,CACA,YAAA,CACA,QAAA,CACA,eACA,uBAAA,CACA,wBAAA,CACA,iBACJ,CAAA,CACA,QAAS,CACL,gBAAA,CACA,QAAA,CACA,QAAA,CACA,WACA,iBAAA,CACA,oBAAA,CACA,iBACJ,CACJ,EACA,KAAA,CAAO,CACH,KAAA,CAAO,CACH,iBACA,YAAA,CACA,QAAA,CACA,oBAAA,CACA,uBAAA,CACA,yBACA,iBACJ,CAAA,CACA,OAAA,CAAS,CACL,iBACA,cAAA,CACA,QAAA,CACA,oBAAA,CACA,yBAAA,CACA,2BACA,iBACJ,CAAA,CACA,OAAA,CAAS,CACL,iBACA,cAAA,CACA,QAAA,CACA,oBAAA,CACA,yBAAA,CACA,2BACA,iBACJ,CAAA,CACA,KAAA,CAAO,CACH,iBACA,YAAA,CACA,QAAA,CACA,oBAAA,CACA,uBAAA,CACA,yBACA,iBACJ,CAAA,CACA,OAAA,CAAS,CACL,iBACA,QAAA,CACA,QAAA,CACA,oBAAA,CACA,iBAAA,CACA,qBACA,iBACJ,CACJ,CAAA,CACA,IAAA,CAAM,CACF,KAAA,CAAO,CACH,gBAAA,CACA,YAAA,CACA,SACA,oBAAA,CACA,iBAAA,CACA,oBAAA,CACA,cAAA,CACA,MACJ,CAAA,CACA,OAAA,CAAS,CACL,gBAAA,CACA,eACA,QAAA,CACA,oBAAA,CACA,iBAAA,CACA,oBAAA,CACA,eACA,MACJ,CAAA,CACA,OAAA,CAAS,CACL,iBACA,cAAA,CACA,QAAA,CACA,oBAAA,CACA,iBAAA,CACA,qBACA,cAAA,CACA,MACJ,CAAA,CACA,KAAA,CAAO,CACH,gBAAA,CACA,YAAA,CACA,QAAA,CACA,oBAAA,CACA,kBACA,oBAAA,CACA,cAAA,CACA,MACJ,CAAA,CACA,QAAS,CACL,gBAAA,CACA,QAAA,CACA,QAAA,CACA,qBACA,iBAAA,CACA,oBAAA,CACA,cAAA,CACA,MACJ,CACJ,CACJ,CAAA,CAQMC,CAAAA,CAA6B,IAAI,QACjCC,CAAAA,CAA6B,IAAI,OAAA,CAevC,SAASC,EAAWC,CAAAA,CAAwCC,CAAAA,CAAqC,CAC7F,GAAI,CAACD,CAAAA,CAAM,OAAO,IAAA,CAElB,IAAME,EAAWP,CAAAA,CAAYM,CAAI,CAAA,CAEjC,GAAI,OAAOD,CAAAA,EAAS,QAAA,CAChB,OACIG,IAAC,MAAA,CAAA,CAAK,SAAA,CAAU,sBAAA,CACZ,QAAA,CAAAA,IAACC,IAAAA,CAAA,CAAK,IAAA,CAAMJ,CAAAA,CAAkB,KAAME,CAAAA,CAAU,CAAA,CAClD,CAAA,CAIR,IAAMG,EAAiBL,CAAAA,CAAkC,IAAA,EAAQE,CAAAA,CAEjE,OACIC,IAAC,MAAA,CAAA,CAAK,SAAA,CAAU,sBAAA,CACZ,QAAA,CAAAA,IAACC,IAAAA,CAAA,CAAM,GAAGJ,CAAAA,CAAM,KAAMK,CAAAA,CAAc,CAAA,CACxC,CAER,CA6BO,SAASC,CAAAA,CAAOC,CAAAA,CAAgC,CACnD,GAAM,CACF,OAAA,CAAAC,CAAAA,CAAc,OAAA,CACd,KAAA,CAAAC,EAAc,OAAA,CACd,IAAA,CAAAR,CAAAA,CAAc,IAAA,CACd,UAAAS,CAAAA,CAAc,KAAA,CACd,QAAA,CAAAC,CAAAA,CAAc,MACd,OAAA,CAAAC,CAAAA,CAAc,KAAA,CACd,QAAA,CAAAC,EACA,SAAA,CAAAC,CAAAA,CACA,EAAA,CAAAC,CAAAA,CAAc,SACd,IAAA,CAAAC,CAAAA,CACA,QAAA,CAAAC,CAAAA,CACA,UAAAC,CAAAA,CACA,IAAA,CAAAC,CAAAA,CAAc,QAAA,CACd,QAAAC,CAAAA,CACA,MAAA,CAAAC,CAAAA,CACA,GAAGC,CACP,CAAA,CAAIf,CAAAA,CAEEgB,CAAAA,CAAc,CAChB,cACA,cAAA,CACA,gBAAA,CACA,aAAA,CACA,gBAAA,CACA,eACA,aAAA,CACA,oBAAA,CACA,oBAAA,CACA,6BACJ,EAEMC,CAAAA,CAAe,EAAC,CAAA,CAElBZ,CAAAA,EAAWD,IACXa,CAAAA,CAAa,IAAA,CAAK,YAAA,CAAc,oBAAA,CAAsB,qBAAqB,CAAA,CAG3Ed,CAAAA,EACAc,CAAAA,CAAa,IAAA,CAAK,QAAQ,CAAA,CAG9B,IAAMC,CAAAA,CAAiB7B,CAAAA,CAAeY,CAAO,CAAA,CAAEC,CAAK,CAAA,CAE9CiB,CAAAA,CAAU,CACZ,GAAGH,CAAAA,CACH,GAAGC,CAAAA,CACH,GAAGC,CAAAA,CACHP,CACJ,CAAA,CACK,MAAA,CAAO,OAAO,CAAA,CACd,IAAA,CAAK,GAAG,CAAA,CAEPS,EAAYnC,CAAAA,CAAeS,CAAI,CAAA,CAC/B2B,CAAAA,CAAYnC,EAAWQ,CAAI,CAAA,CAC3B4B,CAAAA,CAAYnC,CAAAA,CAAaO,CAAI,CAAA,CAE7B6B,CAAAA,CAAwB,EAAC,CAEzBC,EAAQhC,CAAAA,CAAWc,CAAAA,CAAUZ,CAAI,CAAA,CACjC+B,EAAQjC,CAAAA,CAAWe,CAAAA,CAAWb,CAAI,CAAA,CAEpC8B,GACAD,CAAAA,CAAQ,IAAA,CAAKC,CAAI,CAAA,CAGrB,IAAME,CAAAA,CAAgB,OAAOjB,CAAAA,EAAS,QAAA,EAAYA,EAAK,QAAA,CAAS,GAAG,CAAA,CAC7DkB,CAAAA,CAAgBjB,IAAagB,CAAAA,CAAgB,IAAA,CAAOjB,CAAAA,CAAAA,CAE/BkB,CAAAA,EAAU,MAAQA,CAAAA,GAAU,EAAA,EACnDJ,CAAAA,CAAQ,IAAA,CACJ3B,IAACgC,IAAAA,CAAA,CAAK,EAAA,CAAG,MAAA,CAAO,KAAMN,CAAAA,CAAW,WAAA,CAAU,WAAA,CAAY,SAAA,CAAU,oBAC5D,QAAA,CAAAK,CAAAA,CACL,CACJ,CAAA,CAGAF,GACAF,CAAAA,CAAQ,IAAA,CAAKE,CAAK,CAAA,CAKtB,IAAMI,CAAAA,CAFcrB,CAAAA,GAGA,QAAA,CACV,CAAE,KAAAI,CAAK,CAAA,CACP,EAAC,CAGLkB,EACDjB,CAAAA,EAAWC,CAAAA,CACLiB,CAAAA,EAAgC,CAC/B,GAAKA,CAAAA,GAEDlB,CAAAA,EAAW,CAACvB,CAAAA,CAAgB,IAAIyC,CAAO,CAAA,GACvCzC,CAAAA,CAAgB,GAAA,CAAIyC,CAAO,CAAA,CAC3BlB,CAAAA,CAAQkB,CAAO,CAAA,CAAA,CAGfjB,GAAU,CAACvB,CAAAA,CAAe,GAAA,CAAIwC,CAAO,GAAG,CACxCxC,CAAAA,CAAe,GAAA,CAAIwC,CAAO,EAE1B,IAAMC,CAAAA,CAAU,IAAM,CAClBlB,EAAOiB,CAAO,EAClB,CAAA,CAEI,OAAO,uBAA0B,UAAA,CACjC,qBAAA,CAAsB,IAAM,CACxB,sBAAsBC,CAAO,EACjC,CAAC,CAAA,CAED,WAAWA,CAAAA,CAAS,CAAC,EAE7B,CACJ,EACE,MAAA,CAEJC,CAAAA,CAAuC,CACzC,EAAA,CAAAzB,EACA,OAAA,CAAY,aAAA,CACZ,KAAA,CAAY,QAAA,CACZ,QAAY,QAAA,CACZ,GAAA,CAAAa,CAAAA,CACA,EAAA,CAAYD,EAAQ,EAAA,CACpB,EAAA,CAAYA,CAAAA,CAAQ,EAAA,CACpB,OAAY,IAAA,CACZ,SAAA,CAAYD,CAAAA,CACZ,GAAGU,EACH,GAAGd,CACP,CAAA,CAEA,OAAIe,IACAG,CAAAA,CAAe,GAAA,CAAMH,CAAAA,CAAAA,CAIrBlC,GAAAA,CAACsC,UAAA,CAAW,GAAID,CAAAA,CACX,QAAA,CAAAV,EACL,CAER","file":"index.js","sourcesContent":["// src/kit/button.tsx\r\n//\r\n// Made with ❤️ by Maysara.\r\n\r\n\r\n\r\n// ╔════════════════════════════════════════ PACK ════════════════════════════════════════╗\r\n\r\n import type { JSXElement } from '@minejs/jsx';\r\n import { Container } from '@cruxkit/container';\r\n import { Text } from '@cruxkit/text';\r\n import { Icon, type IconProps, type IconName, type IconConfig } from '@cruxkit/icon';\r\n import type { ButtonProps, ButtonSize, ButtonColor, ButtonVariant } from '../types';\r\n \r\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\r\n\r\n\r\n\r\n// ╔════════════════════════════════════════ INIT ════════════════════════════════════════╗\r\n\r\n const sizePaddingMap: Record<ButtonSize, { px: 3 | 4 | 6; py: 1 | 2 | 3 }> = {\r\n sm: { px: 3, py: 1 },\r\n md: { px: 4, py: 2 },\r\n lg: { px: 6, py: 3 }\r\n };\r\n\r\n const sizeGapMap: Record<ButtonSize, 1 | 2> = {\r\n sm: 1,\r\n md: 2,\r\n lg: 2\r\n };\r\n\r\n const labelSizeMap: Record<ButtonSize, 'sm' | 'md' | 'lg'> = {\r\n sm: 'sm',\r\n md: 'md',\r\n lg: 'lg'\r\n };\r\n\r\n const iconSizeMap: Record<ButtonSize, 'sm' | 'md' | 'lg'> = {\r\n sm: 'sm',\r\n md: 'md',\r\n lg: 'lg'\r\n };\r\n\r\n const variantClasses: Record<ButtonVariant, Record<ButtonColor, string[]>> = {\r\n solid: {\r\n brand: [\r\n 'bg-brand',\r\n 'text-inverse',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:bg-brand-hover',\r\n 'active:bg-brand-active',\r\n 'active:scale-95',\r\n 'shadow-sm',\r\n 'hover:shadow-md'\r\n ],\r\n success: [\r\n 'bg-success',\r\n 'text-inverse',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:bg-success-hover',\r\n 'active:bg-success-active',\r\n 'active:scale-95',\r\n 'shadow-sm',\r\n 'hover:shadow-md'\r\n ],\r\n warning: [\r\n 'bg-warning',\r\n 'text-inverse',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:bg-warning-hover',\r\n 'active:bg-warning-active',\r\n 'active:scale-95',\r\n 'shadow-sm',\r\n 'hover:shadow-md'\r\n ],\r\n error: [\r\n 'bg-error',\r\n 'text-inverse',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:bg-error-hover',\r\n 'active:bg-error-active',\r\n 'active:scale-95',\r\n 'shadow-sm',\r\n 'hover:shadow-md'\r\n ],\r\n neutral: [\r\n 'bg-surface',\r\n 'text-1',\r\n 'border',\r\n 'border-1',\r\n 'hover:bg-raised',\r\n 'active:bg-tertiary',\r\n 'active:scale-95',\r\n 'shadow-sm',\r\n 'hover:shadow-md'\r\n ]\r\n },\r\n outline: {\r\n brand: [\r\n 'bg-transparent',\r\n 'text-brand',\r\n 'border',\r\n 'border-brand',\r\n 'hover:bg-brand-subtle',\r\n 'active:bg-brand-subtle',\r\n 'active:scale-95'\r\n ],\r\n success: [\r\n 'bg-transparent',\r\n 'text-success',\r\n 'border',\r\n 'border-success',\r\n 'hover:bg-success-subtle',\r\n 'active:bg-success-subtle',\r\n 'active:scale-95'\r\n ],\r\n warning: [\r\n 'bg-transparent',\r\n 'text-warning',\r\n 'border',\r\n 'border-warning',\r\n 'hover:bg-warning-subtle',\r\n 'active:bg-warning-subtle',\r\n 'active:scale-95'\r\n ],\r\n error: [\r\n 'bg-transparent',\r\n 'text-error',\r\n 'border',\r\n 'border-error',\r\n 'hover:bg-error-subtle',\r\n 'active:bg-error-subtle',\r\n 'active:scale-95'\r\n ],\r\n neutral: [\r\n 'bg-transparent',\r\n 'text-1',\r\n 'border',\r\n 'border-1',\r\n 'hover:bg-raised',\r\n 'active:bg-tertiary',\r\n 'active:scale-95'\r\n ]\r\n },\r\n ghost: {\r\n brand: [\r\n 'bg-transparent',\r\n 'text-brand',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:bg-brand-subtle',\r\n 'active:bg-brand-subtle',\r\n 'active:scale-95'\r\n ],\r\n success: [\r\n 'bg-transparent',\r\n 'text-success',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:bg-success-subtle',\r\n 'active:bg-success-subtle',\r\n 'active:scale-95'\r\n ],\r\n warning: [\r\n 'bg-transparent',\r\n 'text-warning',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:bg-warning-subtle',\r\n 'active:bg-warning-subtle',\r\n 'active:scale-95'\r\n ],\r\n error: [\r\n 'bg-transparent',\r\n 'text-error',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:bg-error-subtle',\r\n 'active:bg-error-subtle',\r\n 'active:scale-95'\r\n ],\r\n neutral: [\r\n 'bg-transparent',\r\n 'text-1',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:bg-raised',\r\n 'active:bg-tertiary',\r\n 'active:scale-95'\r\n ]\r\n },\r\n link: {\r\n brand: [\r\n 'bg-transparent',\r\n 'text-brand',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:underline',\r\n 'underline-offset-4',\r\n 'decoration-2',\r\n 'px-1'\r\n ],\r\n success: [\r\n 'bg-transparent',\r\n 'text-success',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:underline',\r\n 'underline-offset-4',\r\n 'decoration-2',\r\n 'px-1'\r\n ],\r\n warning: [\r\n 'bg-transparent',\r\n 'text-warning',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:underline',\r\n 'underline-offset-4',\r\n 'decoration-2',\r\n 'px-1'\r\n ],\r\n error: [\r\n 'bg-transparent',\r\n 'text-error',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:underline',\r\n 'underline-offset-4',\r\n 'decoration-2',\r\n 'px-1'\r\n ],\r\n neutral: [\r\n 'bg-transparent',\r\n 'text-1',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:underline',\r\n 'underline-offset-4',\r\n 'decoration-2',\r\n 'px-1'\r\n ]\r\n }\r\n };\r\n\r\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\r\n\r\n\r\n\r\n// ╔════════════════════════════════════════ CORE ════════════════════════════════════════╗\r\n\r\n const mountedElements = new WeakSet<HTMLElement>();\r\n const loadedElements = new WeakSet<HTMLElement>();\r\n\r\n type ButtonContainerProps = {\r\n as?: unknown;\r\n display?: string;\r\n align?: string;\r\n justify?: string;\r\n gap?: number;\r\n px?: number;\r\n py?: number;\r\n radius?: string;\r\n className?: string;\r\n ref?: (element: HTMLElement | null) => void;\r\n } & Record<string, unknown>;\r\n\r\n function renderIcon(icon: IconProps | IconName | undefined, size: ButtonSize): JSXElement | null {\r\n if (!icon) return null;\r\n\r\n const iconSize = iconSizeMap[size];\r\n\r\n if (typeof icon === 'string') {\r\n return (\r\n <span className=\"inline-flex shrink-0\">\r\n <Icon name={icon as IconName} size={iconSize} />\r\n </span>\r\n );\r\n }\r\n\r\n const resolvedSize = ((icon as IconProps) as IconConfig).size ?? iconSize;\r\n\r\n return (\r\n <span className=\"inline-flex shrink-0\">\r\n <Icon {...icon} size={resolvedSize} />\r\n </span>\r\n );\r\n }\r\n\r\n /**\r\n * A polymorphic button component that supports multiple variants, colors, sizes, and states.\r\n *\r\n * @param props - The properties for the Button component.\r\n * @param props.variant - Visual style variant: `'solid' | 'outline' | 'ghost' | 'link'`.\r\n * @param props.color - Color theme: `'brand' | 'success' | 'warning' | 'error' | 'neutral'`.\r\n * @param props.size - Size scale: `'sm' | 'md' | 'lg'`.\r\n * @param props.fullWidth - Whether the button spans the full width of its container.\r\n * @param props.disabled - Whether the button is disabled.\r\n * @param props.loading - Whether the button is in a loading state (disables interaction).\r\n * @param props.leftIcon - Optional icon placed to the left of the label (string name or IconProps).\r\n * @param props.rightIcon - Optional icon placed to the right of the label (string name or IconProps).\r\n * @param props.as - Element type to render: `'button' | 'a' | any polymorphic component`.\r\n * @param props.children - Button label content.\r\n * @param props.className - Additional CSS classes appended to the built-in styles.\r\n * @param props.type - HTML button type attribute (only applied when `as=\"button\"`).\r\n * @param props.restProps - Any other props are forwarded to the underlying element.\r\n *\r\n * @returns A JSX element representing the styled button.\r\n *\r\n * @example\r\n * ```tsx\r\n * <Button variant=\"solid\" color=\"brand\" size=\"md\" onClick={handleClick}>\r\n * Save\r\n * </Button>\r\n * ```\r\n */\r\n export function Button(props: ButtonProps): JSXElement {\r\n const {\r\n variant = 'solid',\r\n color = 'brand',\r\n size = 'md',\r\n fullWidth = false,\r\n disabled = false,\r\n loading = false,\r\n leftIcon,\r\n rightIcon,\r\n as = 'button',\r\n text,\r\n children,\r\n className,\r\n type = 'button',\r\n onMount,\r\n onLoad,\r\n ...restProps\r\n } = props;\r\n\r\n const baseClasses = [\r\n 'inline-flex',\r\n 'items-center',\r\n 'justify-center',\r\n 'font-medium',\r\n 'transition-all',\r\n 'duration-150',\r\n 'select-none',\r\n 'focus:outline-none',\r\n 'focus-visible:ring',\r\n 'focus-visible:ring-offset-2'\r\n ];\r\n\r\n const stateClasses = [];\r\n\r\n if (loading || disabled) {\r\n stateClasses.push('opacity-50', 'cursor-not-allowed', 'pointer-events-none');\r\n }\r\n\r\n if (fullWidth) {\r\n stateClasses.push('w-full');\r\n }\r\n\r\n const paletteClasses = variantClasses[variant][color];\r\n\r\n const classes = [\r\n ...baseClasses,\r\n ...stateClasses,\r\n ...paletteClasses,\r\n className\r\n ]\r\n .filter(Boolean)\r\n .join(' ');\r\n\r\n const padding = sizePaddingMap[size];\r\n const gap = sizeGapMap[size];\r\n const labelSize = labelSizeMap[size];\r\n\r\n const content: JSXElement[] = [];\r\n\r\n const left = renderIcon(leftIcon, size);\r\n const right = renderIcon(rightIcon, size);\r\n\r\n if (left) {\r\n content.push(left);\r\n }\r\n\r\n const isKeyLikeText = typeof text === 'string' && text.includes('.');\r\n const label = children ?? (isKeyLikeText ? '--' : text);\r\n\r\n if (label !== undefined && label !== null && label !== '') {\r\n content.push(\r\n <Text as=\"span\" size={labelSize} data-role=\"btn-label\" className='flex items-center'>\r\n {label}\r\n </Text>\r\n );\r\n }\r\n\r\n if (right) {\r\n content.push(right);\r\n }\r\n\r\n const elementType = as;\r\n\r\n const elementTypeProps =\r\n elementType === 'button'\r\n ? { type }\r\n : {};\r\n\r\n\r\n const handleRef =\r\n (onMount || onLoad)\r\n ? (element: HTMLElement | null) => {\r\n if (!element) return;\r\n\r\n if (onMount && !mountedElements.has(element)) {\r\n mountedElements.add(element);\r\n onMount(element);\r\n }\r\n\r\n if (onLoad && !loadedElements.has(element)) {\r\n loadedElements.add(element);\r\n\r\n const runLoad = () => {\r\n onLoad(element);\r\n };\r\n\r\n if (typeof requestAnimationFrame === 'function') {\r\n requestAnimationFrame(() => {\r\n requestAnimationFrame(runLoad);\r\n });\r\n } else {\r\n setTimeout(runLoad, 0);\r\n }\r\n }\r\n }\r\n : undefined;\r\n\r\n const containerProps: ButtonContainerProps = {\r\n as,\r\n display : 'inline-flex',\r\n align : 'center',\r\n justify : 'center',\r\n gap,\r\n px : padding.px,\r\n py : padding.py,\r\n radius : 'md',\r\n className : classes,\r\n ...elementTypeProps,\r\n ...restProps\r\n };\r\n\r\n if (handleRef) {\r\n containerProps.ref = handleRef;\r\n }\r\n\r\n return (\r\n <Container {...(containerProps as Record<string, unknown>)}>\r\n {content}\r\n </Container>\r\n );\r\n }\r\n\r\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\r\n"]}
1
+ {"version":3,"sources":["../src/kit/button.tsx"],"names":["sizePaddingMap","sizeGapMap","labelSizeMap","iconSizeMap","variantClasses","mountedElements","loadedElements","renderIcon","icon","size","iconSize","jsx","Icon","resolvedSize","Button","props","variant","color","fullWidth","labelFullWidth","disabled","loading","leftIcon","rightIcon","as","text","children","className","type","onMount","onLoad","restProps","baseClasses","stateClasses","paletteClasses","classes","padding","gap","labelSize","content","left","right","isKeyLikeText","label","Text","elementTypeProps","handleRef","element","runLoad","containerProps","Container"],"mappings":"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","file":"index.js","sourcesContent":["// src/kit/button.tsx\r\n//\r\n// Made with ❤️ by Maysara.\r\n\r\n\r\n\r\n// ╔════════════════════════════════════════ PACK ════════════════════════════════════════╗\r\n\r\n import type { JSXElement } from '@minejs/jsx';\r\n import { Container } from '@cruxkit/container';\r\n import { Text } from '@cruxkit/text';\r\n import { Icon, type IconProps, type IconName, type IconConfig } from '@cruxkit/icon';\r\n import type { ButtonProps, ButtonSize, ButtonColor, ButtonVariant } from '../types';\r\n \r\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\r\n\r\n\r\n\r\n// ╔════════════════════════════════════════ INIT ════════════════════════════════════════╗\r\n\r\n const sizePaddingMap: Record<ButtonSize, { px: 3 | 4 | 6; py: 1 | 2 | 3 }> = {\r\n sm: { px: 3, py: 1 },\r\n md: { px: 4, py: 2 },\r\n lg: { px: 6, py: 3 }\r\n };\r\n\r\n const sizeGapMap: Record<ButtonSize, 1 | 2> = {\r\n sm: 1,\r\n md: 2,\r\n lg: 2\r\n };\r\n\r\n const labelSizeMap: Record<ButtonSize, 'sm' | 'md' | 'lg'> = {\r\n sm: 'sm',\r\n md: 'md',\r\n lg: 'lg'\r\n };\r\n\r\n const iconSizeMap: Record<ButtonSize, 'sm' | 'md' | 'lg'> = {\r\n sm: 'sm',\r\n md: 'md',\r\n lg: 'lg'\r\n };\r\n\r\n const variantClasses: Record<ButtonVariant, Record<ButtonColor, string[]>> = {\r\n solid: {\r\n brand: [\r\n 'bg-brand',\r\n 'text-inverse',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:bg-brand-hover',\r\n 'active:bg-brand-active',\r\n 'active:scale-95',\r\n 'shadow-sm',\r\n 'hover:shadow-md'\r\n ],\r\n success: [\r\n 'bg-success',\r\n 'text-inverse',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:bg-success-hover',\r\n 'active:bg-success-active',\r\n 'active:scale-95',\r\n 'shadow-sm',\r\n 'hover:shadow-md'\r\n ],\r\n warning: [\r\n 'bg-warning',\r\n 'text-inverse',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:bg-warning-hover',\r\n 'active:bg-warning-active',\r\n 'active:scale-95',\r\n 'shadow-sm',\r\n 'hover:shadow-md'\r\n ],\r\n error: [\r\n 'bg-error',\r\n 'text-inverse',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:bg-error-hover',\r\n 'active:bg-error-active',\r\n 'active:scale-95',\r\n 'shadow-sm',\r\n 'hover:shadow-md'\r\n ],\r\n neutral: [\r\n 'bg-surface',\r\n 'text-1',\r\n 'border',\r\n 'border-1',\r\n 'hover:bg-raised',\r\n 'active:bg-tertiary',\r\n 'active:scale-95',\r\n 'shadow-sm',\r\n 'hover:shadow-md'\r\n ]\r\n },\r\n outline: {\r\n brand: [\r\n 'bg-transparent',\r\n 'text-brand',\r\n 'border',\r\n 'border-brand',\r\n 'hover:bg-brand-subtle',\r\n 'active:bg-brand-subtle',\r\n 'active:scale-95'\r\n ],\r\n success: [\r\n 'bg-transparent',\r\n 'text-success',\r\n 'border',\r\n 'border-success',\r\n 'hover:bg-success-subtle',\r\n 'active:bg-success-subtle',\r\n 'active:scale-95'\r\n ],\r\n warning: [\r\n 'bg-transparent',\r\n 'text-warning',\r\n 'border',\r\n 'border-warning',\r\n 'hover:bg-warning-subtle',\r\n 'active:bg-warning-subtle',\r\n 'active:scale-95'\r\n ],\r\n error: [\r\n 'bg-transparent',\r\n 'text-error',\r\n 'border',\r\n 'border-error',\r\n 'hover:bg-error-subtle',\r\n 'active:bg-error-subtle',\r\n 'active:scale-95'\r\n ],\r\n neutral: [\r\n 'bg-transparent',\r\n 'text-1',\r\n 'border',\r\n 'border-1',\r\n 'hover:bg-raised',\r\n 'active:bg-tertiary',\r\n 'active:scale-95'\r\n ]\r\n },\r\n ghost: {\r\n brand: [\r\n 'bg-transparent',\r\n 'text-brand',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:bg-brand-subtle',\r\n 'active:bg-brand-subtle',\r\n 'active:scale-95'\r\n ],\r\n success: [\r\n 'bg-transparent',\r\n 'text-success',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:bg-success-subtle',\r\n 'active:bg-success-subtle',\r\n 'active:scale-95'\r\n ],\r\n warning: [\r\n 'bg-transparent',\r\n 'text-warning',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:bg-warning-subtle',\r\n 'active:bg-warning-subtle',\r\n 'active:scale-95'\r\n ],\r\n error: [\r\n 'bg-transparent',\r\n 'text-error',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:bg-error-subtle',\r\n 'active:bg-error-subtle',\r\n 'active:scale-95'\r\n ],\r\n neutral: [\r\n 'bg-transparent',\r\n 'text-1',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:bg-raised',\r\n 'active:bg-tertiary',\r\n 'active:scale-95'\r\n ]\r\n },\r\n link: {\r\n brand: [\r\n 'bg-transparent',\r\n 'text-brand',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:underline',\r\n 'underline-offset-4',\r\n 'decoration-2',\r\n 'px-1'\r\n ],\r\n success: [\r\n 'bg-transparent',\r\n 'text-success',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:underline',\r\n 'underline-offset-4',\r\n 'decoration-2',\r\n 'px-1'\r\n ],\r\n warning: [\r\n 'bg-transparent',\r\n 'text-warning',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:underline',\r\n 'underline-offset-4',\r\n 'decoration-2',\r\n 'px-1'\r\n ],\r\n error: [\r\n 'bg-transparent',\r\n 'text-error',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:underline',\r\n 'underline-offset-4',\r\n 'decoration-2',\r\n 'px-1'\r\n ],\r\n neutral: [\r\n 'bg-transparent',\r\n 'text-1',\r\n 'border',\r\n 'border-transparent',\r\n 'hover:underline',\r\n 'underline-offset-4',\r\n 'decoration-2',\r\n 'px-1'\r\n ]\r\n }\r\n };\r\n\r\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\r\n\r\n\r\n\r\n// ╔════════════════════════════════════════ CORE ════════════════════════════════════════╗\r\n\r\n const mountedElements = new WeakSet<HTMLElement>();\r\n const loadedElements = new WeakSet<HTMLElement>();\r\n\r\n type ButtonContainerProps = {\r\n as?: unknown;\r\n display?: string;\r\n align?: string;\r\n justify?: string;\r\n gap?: number;\r\n px?: number;\r\n py?: number;\r\n radius?: string;\r\n className?: string;\r\n ref?: (element: HTMLElement | null) => void;\r\n } & Record<string, unknown>;\r\n\r\n function renderIcon(icon: IconProps | IconName | undefined, size: ButtonSize): JSXElement | null {\r\n if (!icon) return null;\r\n\r\n const iconSize = iconSizeMap[size];\r\n\r\n if (typeof icon === 'string') {\r\n return (\r\n <span className=\"inline-flex shrink-0\">\r\n <Icon name={icon as IconName} size={iconSize} />\r\n </span>\r\n );\r\n }\r\n\r\n const resolvedSize = ((icon as IconProps) as IconConfig).size ?? iconSize;\r\n\r\n return (\r\n <span className=\"inline-flex shrink-0\">\r\n <Icon {...icon} size={resolvedSize} />\r\n </span>\r\n );\r\n }\r\n\r\n /**\r\n * A polymorphic button component that supports multiple variants, colors, sizes, and states.\r\n *\r\n * @param props - The properties for the Button component.\r\n * @param props.variant - Visual style variant: `'solid' | 'outline' | 'ghost' | 'link'`.\r\n * @param props.color - Color theme: `'brand' | 'success' | 'warning' | 'error' | 'neutral'`.\r\n * @param props.size - Size scale: `'sm' | 'md' | 'lg'`.\r\n * @param props.fullWidth - Whether the button spans the full width of its container.\r\n * @param props.labelFullWidth - Whether the label spans the full width of the button.\r\n * @param props.disabled - Whether the button is disabled.\r\n * @param props.loading - Whether the button is in a loading state (disables interaction).\r\n * @param props.leftIcon - Optional icon placed to the left of the label (string name or IconProps).\r\n * @param props.rightIcon - Optional icon placed to the right of the label (string name or IconProps).\r\n * @param props.as - Element type to render: `'button' | 'a' | any polymorphic component`.\r\n * @param props.children - Button label content.\r\n * @param props.className - Additional CSS classes appended to the built-in styles.\r\n * @param props.type - HTML button type attribute (only applied when `as=\"button\"`).\r\n * @param props.restProps - Any other props are forwarded to the underlying element.\r\n *\r\n * @returns A JSX element representing the styled button.\r\n *\r\n * @example\r\n * ```tsx\r\n * <Button variant=\"solid\" color=\"brand\" size=\"md\" onClick={handleClick}>\r\n * Save\r\n * </Button>\r\n * ```\r\n */\r\n export function Button(props: ButtonProps): JSXElement {\r\n const {\r\n variant = 'solid',\r\n color = 'brand',\r\n size = 'md',\r\n fullWidth = false,\r\n labelFullWidth = false,\r\n disabled = false,\r\n loading = false,\r\n leftIcon,\r\n rightIcon,\r\n as = 'button',\r\n text,\r\n children,\r\n className,\r\n type = 'button',\r\n onMount,\r\n onLoad,\r\n ...restProps\r\n } = props;\r\n\r\n const baseClasses = [\r\n 'inline-flex',\r\n 'items-center',\r\n 'justify-center',\r\n 'font-medium',\r\n 'transition-all',\r\n 'duration-150',\r\n 'select-none',\r\n 'focus:outline-none',\r\n 'focus-visible:ring',\r\n 'focus-visible:ring-offset-2'\r\n ];\r\n\r\n const stateClasses = [];\r\n\r\n if (loading || disabled) {\r\n stateClasses.push('opacity-50', 'cursor-not-allowed', 'pointer-events-none');\r\n }\r\n\r\n if (fullWidth) {\r\n stateClasses.push('w-full');\r\n }\r\n\r\n const paletteClasses = variantClasses[variant][color];\r\n\r\n const classes = [\r\n ...baseClasses,\r\n ...stateClasses,\r\n ...paletteClasses,\r\n className\r\n ]\r\n .filter(Boolean)\r\n .join(' ');\r\n\r\n const padding = sizePaddingMap[size];\r\n const gap = sizeGapMap[size];\r\n const labelSize = labelSizeMap[size];\r\n\r\n const content: JSXElement[] = [];\r\n\r\n const left = renderIcon(leftIcon, size);\r\n const right = renderIcon(rightIcon, size);\r\n\r\n if (left) {\r\n content.push(left);\r\n }\r\n\r\n const isKeyLikeText = typeof text === 'string' && text.includes('.');\r\n const label = children ?? (isKeyLikeText ? '--' : text);\r\n\r\n if (label !== undefined && label !== null && label !== '') {\r\n content.push(\r\n <Text as=\"span\" size={labelSize} data-role=\"btn-label\" className={`flex items-center${labelFullWidth ? ' w-full justify-center' : ''}`}>\r\n {label}\r\n </Text>\r\n );\r\n }\r\n\r\n if (right) {\r\n content.push(right);\r\n }\r\n\r\n const elementType = as;\r\n\r\n const elementTypeProps =\r\n elementType === 'button'\r\n ? { type }\r\n : {};\r\n\r\n\r\n const handleRef =\r\n (onMount || onLoad)\r\n ? (element: HTMLElement | null) => {\r\n if (!element) return;\r\n\r\n if (onMount && !mountedElements.has(element)) {\r\n mountedElements.add(element);\r\n onMount(element);\r\n }\r\n\r\n if (onLoad && !loadedElements.has(element)) {\r\n loadedElements.add(element);\r\n\r\n const runLoad = () => {\r\n onLoad(element);\r\n };\r\n\r\n if (typeof requestAnimationFrame === 'function') {\r\n requestAnimationFrame(() => {\r\n requestAnimationFrame(runLoad);\r\n });\r\n } else {\r\n setTimeout(runLoad, 0);\r\n }\r\n }\r\n }\r\n : undefined;\r\n\r\n const containerProps: ButtonContainerProps = {\r\n as,\r\n display : 'inline-flex',\r\n align : 'center',\r\n justify : 'center',\r\n gap,\r\n px : padding.px,\r\n py : padding.py,\r\n radius : 'md',\r\n className : classes,\r\n ...elementTypeProps,\r\n ...restProps\r\n };\r\n\r\n if (handleRef) {\r\n containerProps.ref = handleRef;\r\n }\r\n\r\n return (\r\n <Container {...(containerProps as Record<string, unknown>)}>\r\n {content}\r\n </Container>\r\n );\r\n }\r\n\r\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\r\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cruxkit/button",
3
- "version": "0.1.7",
3
+ "version": "0.1.9",
4
4
  "description": "Polymorphic, theme-aware button component for the Cruxkit ecosystem, built on @minejs/jsx.",
5
5
  "keywords": ["crux", "kit", "button"],
6
6
  "license": "MIT",
@@ -41,7 +41,7 @@
41
41
  },
42
42
  "dependencies": {
43
43
  "@cruxkit/container": "^0.0.5",
44
- "@cruxkit/icon": "^0.0.8",
44
+ "@cruxkit/icon": "^0.0.9",
45
45
  "@cruxkit/text": "^0.0.2",
46
46
  "@minejs/jsx": "^0.1.5"
47
47
  },