@cruxkit/button 0.2.4 → 0.2.5

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.
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.2.4-black"/>
11
+ <img src="https://img.shields.io/badge/v-0.2.5-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" />
@@ -81,6 +81,16 @@
81
81
  Continue
82
82
  </Button>
83
83
 
84
+ <Button
85
+ variant="primary"
86
+ hover="scale"
87
+ shadow="lg"
88
+ radius="full"
89
+ uppercase
90
+ >
91
+ Custom Style
92
+ </Button>
93
+
84
94
  <Button
85
95
  as="a"
86
96
  href="https://example.com"
@@ -112,15 +122,30 @@
112
122
  - #### Types
113
123
 
114
124
  ```tsx
115
- export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'link';
116
- export type ButtonColor = 'brand' | 'success' | 'warning' | 'error' | 'neutral';
117
- export type ButtonSize = 'sm' | 'md' | 'lg';
125
+ export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'link' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
126
+ export type ButtonColor = 'brand' | 'success' | 'warning' | 'error' | 'neutral' | 'info';
127
+ export type ButtonSize = 'sm' | 'md' | 'lg';
128
+
129
+ export type ButtonRadius = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
130
+ export type ButtonShadow = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'inner';
131
+ export type ButtonHoverEffect = 'none' | 'opacity' | 'scale' | 'shadow';
132
+ export type ButtonActiveEffect = 'none' | 'scale';
133
+ export type ButtonUnderline = 'none' | 'hover' | 'always';
118
134
 
119
135
  export interface ButtonProps {
120
136
  variant? : ButtonVariant;
121
137
  color? : ButtonColor;
122
138
  size? : ButtonSize;
139
+
140
+ hover? : ButtonHoverEffect;
141
+ active? : ButtonActiveEffect;
142
+ shadow? : ButtonShadow;
143
+ radius? : ButtonRadius;
144
+ underline? : ButtonUnderline;
145
+ uppercase? : boolean;
146
+
123
147
  fullWidth? : boolean;
148
+ labelFullWidth? : boolean;
124
149
  disabled? : boolean;
125
150
  loading? : boolean;
126
151
 
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 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
1
+ 'use strict';var container=require('@cruxkit/container'),text=require('@cruxkit/text'),icon=require('@cruxkit/icon'),jsxRuntime=require('@minejs/jsx/jsx-runtime');var c={sm:{px:3,py:1},md:{px:4,py:2},lg:{px:6,py:3}},w={sm:1,md:2,lg:2},g={sm:"sm",md:"md",lg:"lg"},u={sm:"sm",md:"md",lg:"lg"},y={solid:{brand:["bg-brand","text-inverse","border","border-transparent","hover:bg-brand-hover","active:bg-brand-active"],success:["bg-success","text-inverse","border","border-transparent","hover:bg-success-hover","active:bg-success-active"],warning:["bg-warning","text-inverse","border","border-transparent","hover:bg-warning-hover","active:bg-warning-active"],error:["bg-error","text-inverse","border","border-transparent","hover:bg-error-hover","active:bg-error-active"],neutral:["bg-surface","text-1","border","border-1","hover:bg-raised","active:bg-tertiary"],info:["bg-info","text-inverse","border","border-transparent","hover:opacity-90"]},outline:{brand:["bg-transparent","text-brand","border","border-brand","hover:bg-brand-subtle","active:bg-brand-subtle"],success:["bg-transparent","text-success","border","border-success","hover:bg-success-subtle","active:bg-success-subtle"],warning:["bg-transparent","text-warning","border","border-warning","hover:bg-warning-subtle","active:bg-warning-subtle"],error:["bg-transparent","text-error","border","border-error","hover:bg-error-subtle","active:bg-error-subtle"],neutral:["bg-transparent","text-1","border","border-1","hover:bg-raised","active:bg-tertiary"],info:["bg-transparent","text-info","border","border-info","hover:opacity-90"]},ghost:{brand:["bg-transparent","text-brand","border","border-transparent","hover:bg-brand-subtle","active:bg-brand-subtle"],success:["bg-transparent","text-success","border","border-transparent","hover:bg-success-subtle","active:bg-success-subtle"],warning:["bg-transparent","text-warning","border","border-transparent","hover:bg-warning-subtle","active:bg-warning-subtle"],error:["bg-transparent","text-error","border","border-transparent","hover:bg-error-subtle","active:bg-error-subtle"],neutral:["bg-transparent","text-1","border","border-transparent","hover:bg-raised","active:bg-tertiary"],info:["bg-transparent","text-info","border","border-transparent","hover:opacity-90"]},link:{brand:["bg-transparent","text-brand","border","border-transparent","px-1"],success:["bg-transparent","text-success","border","border-transparent","px-1"],warning:["bg-transparent","text-warning","border","border-transparent","px-1"],error:["bg-transparent","text-error","border","border-transparent","px-1"],neutral:["bg-transparent","text-1","border","border-transparent","px-1"],info:["bg-transparent","text-info","border","border-transparent","px-1"]},danger:{brand:["bg-error","text-inverse","border","border-transparent"],success:["bg-error","text-inverse","border","border-transparent"],warning:["bg-error","text-inverse","border","border-transparent"],error:["bg-error","text-inverse","border","border-transparent"],neutral:["bg-error","text-inverse","border","border-transparent"],info:["bg-error","text-inverse","border","border-transparent"]},primary:{brand:["bg-brand","text-inverse","border","border-transparent"],success:["bg-brand","text-inverse","border","border-transparent"],warning:["bg-brand","text-inverse","border","border-transparent"],error:["bg-brand","text-inverse","border","border-transparent"],neutral:["bg-brand","text-inverse","border","border-transparent"],info:["bg-brand","text-inverse","border","border-transparent"]},secondary:{brand:["bg-raised","text-1","border","border-transparent"],success:["bg-raised","text-1","border","border-transparent"],warning:["bg-raised","text-1","border","border-transparent"],error:["bg-raised","text-1","border","border-transparent"],neutral:["bg-raised","text-1","border","border-transparent"],info:["bg-raised","text-1","border","border-transparent"]},success:{brand:["bg-success","text-inverse","border","border-transparent"],success:["bg-success","text-inverse","border","border-transparent"],warning:["bg-success","text-inverse","border","border-transparent"],error:["bg-success","text-inverse","border","border-transparent"],neutral:["bg-success","text-inverse","border","border-transparent"],info:["bg-success","text-inverse","border","border-transparent"]},warning:{brand:["bg-warning","text-inverse","border","border-transparent"],success:["bg-warning","text-inverse","border","border-transparent"],warning:["bg-warning","text-inverse","border","border-transparent"],error:["bg-warning","text-inverse","border","border-transparent"],neutral:["bg-warning","text-inverse","border","border-transparent"],info:["bg-warning","text-inverse","border","border-transparent"]},info:{brand:["bg-info","text-inverse","border","border-transparent"],success:["bg-info","text-inverse","border","border-transparent"],warning:["bg-info","text-inverse","border","border-transparent"],error:["bg-info","text-inverse","border","border-transparent"],neutral:["bg-info","text-inverse","border","border-transparent"],info:["bg-info","text-inverse","border","border-transparent"]}};var z=new WeakSet;function S(t,o){if(!t)return null;let i=u[o];if(typeof t=="string")return jsxRuntime.jsx("span",{className:"inline-flex shrink-0",children:jsxRuntime.jsx(icon.Icon,{name:t,size:i})});let e=t.size??i;return jsxRuntime.jsx("span",{className:"inline-flex shrink-0",children:jsxRuntime.jsx(icon.Icon,{...t,size:e})})}function er(t){let{variant:o="solid",color:i="brand",size:e="md",hover:I,active:M,shadow:C,radius:k,underline:N,uppercase:E,fullWidth:P,labelFullWidth:R,disabled:v,loading:a,leftIcon:$,rightIcon:L,as:T,text:H,children:J,className:x,onMount:W,onLoad:X,onClick:G,...V}=t,f=["primary","secondary","success","warning","danger","info"].includes(o),j=o==="solid",A=o==="link",h=C??(f||j?"sm":"none"),F=M??"scale",d=I??(f?"opacity":"none"),m=N??(A?"hover":"none"),p=k??"base",r=["inline-flex","items-center","justify-center","transition-all","duration-200","focus:outline-none","font-medium"];v||a?r.push("opacity-50","cursor-not-allowed","pointer-events-none"):r.push("cursor-pointer"),P&&r.push("w-full"),r.push(`gap-${w[e]}`),r.push(`px-${c[e].px}`),r.push(`py-${c[e].py}`),r.push(`text-${g[e]}`);let U=y[o]?.[i]||[];r.push(...U),p!=="none"?r.push(p==="base"?"rounded":`rounded-${p}`):r.push("rounded-none"),h!=="none"&&r.push(`shadow-${h}`),d==="opacity"&&r.push("hover:opacity-90"),d==="scale"&&r.push("hover:scale-105"),d==="shadow"&&r.push("hover:shadow-md"),F==="scale"&&r.push("active:scale-95"),m==="hover"&&r.push("hover:underline","underline-offset-4","decoration-2"),m==="always"&&r.push("underline","underline-offset-4","decoration-2"),E&&r.push("uppercase","tracking-wide"),x&&r.push(x);let b=J||H,q=g[e];return jsxRuntime.jsxs(container.Container,{as:T||"button",className:r.join(" "),...V,ref:s=>{s&&(z.has(s)||(z.add(s),W?.(s),X?.(s)));},onClick:s=>{!v&&!a&&G?.(s);},children:[a&&jsxRuntime.jsx("span",{className:"animate-spin mr-2",children:jsxRuntime.jsx(icon.Icon,{name:"spinner",size:u[e]})}),a?jsxRuntime.jsx(jsxRuntime.Fragment,{}):S($,e),b&&(typeof b=="string"||typeof b=="number")?jsxRuntime.jsx(text.Text,{size:q,className:R?"flex-1 text-center":"",children:b}):b,a?jsxRuntime.jsx(jsxRuntime.Fragment,{}):S(L,e)]})}exports.Button=er;//# sourceMappingURL=index.cjs.map
2
2
  //# sourceMappingURL=index.cjs.map
@@ -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","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"]}
1
+ {"version":3,"sources":["../src/kit/constants.ts","../src/kit/button.tsx"],"names":["sizePaddingMap","sizeGapMap","labelSizeMap","iconSizeMap","variantClasses","mountedElements","renderIcon","icon","size","iconSize","jsx","Icon","resolvedSize","Button","props","variant","color","hover","active","shadow","radius","underline","uppercase","fullWidth","labelFullWidth","disabled","loading","leftIcon","rightIcon","as","text","children","className","onMount","onLoad","onClick","rest","isSemantic","isSolid","isLink","resolvedShadow","resolvedActive","resolvedHover","resolvedUnderline","resolvedRadius","baseClasses","variantStyle","content","labelSize","jsxs","Container","el","e","Fragment","Text"],"mappings":"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","file":"index.cjs","sourcesContent":["import type { ButtonSize, ButtonVariant, ButtonColor } from '../types';\n\nexport const sizePaddingMap: Record<ButtonSize, { px: 3 | 4 | 6; py: 1 | 2 | 3 }> = {\n sm: { px: 3, py: 1 },\n md: { px: 4, py: 2 },\n lg: { px: 6, py: 3 }\n};\n\nexport const sizeGapMap: Record<ButtonSize, 1 | 2> = {\n sm: 1,\n md: 2,\n lg: 2\n};\n\nexport const labelSizeMap: Record<ButtonSize, 'sm' | 'md' | 'lg'> = {\n sm: 'sm',\n md: 'md',\n lg: 'lg'\n};\n\nexport const iconSizeMap: Record<ButtonSize, 'sm' | 'md' | 'lg'> = {\n sm: 'sm',\n md: 'md',\n lg: 'lg'\n};\n\nexport const variantClasses: Record<ButtonVariant, Record<ButtonColor, string[]>> = {\n solid: {\n brand: ['bg-brand', 'text-inverse', 'border', 'border-transparent', 'hover:bg-brand-hover', 'active:bg-brand-active'],\n success: ['bg-success', 'text-inverse', 'border', 'border-transparent', 'hover:bg-success-hover', 'active:bg-success-active'],\n warning: ['bg-warning', 'text-inverse', 'border', 'border-transparent', 'hover:bg-warning-hover', 'active:bg-warning-active'],\n error: ['bg-error', 'text-inverse', 'border', 'border-transparent', 'hover:bg-error-hover', 'active:bg-error-active'],\n neutral: ['bg-surface', 'text-1', 'border', 'border-1', 'hover:bg-raised', 'active:bg-tertiary'],\n info: ['bg-info', 'text-inverse', 'border', 'border-transparent', 'hover:opacity-90']\n },\n outline: {\n brand: ['bg-transparent', 'text-brand', 'border', 'border-brand', 'hover:bg-brand-subtle', 'active:bg-brand-subtle'],\n success: ['bg-transparent', 'text-success', 'border', 'border-success', 'hover:bg-success-subtle', 'active:bg-success-subtle'],\n warning: ['bg-transparent', 'text-warning', 'border', 'border-warning', 'hover:bg-warning-subtle', 'active:bg-warning-subtle'],\n error: ['bg-transparent', 'text-error', 'border', 'border-error', 'hover:bg-error-subtle', 'active:bg-error-subtle'],\n neutral: ['bg-transparent', 'text-1', 'border', 'border-1', 'hover:bg-raised', 'active:bg-tertiary'],\n info: ['bg-transparent', 'text-info', 'border', 'border-info', 'hover:opacity-90']\n },\n ghost: {\n brand: ['bg-transparent', 'text-brand', 'border', 'border-transparent', 'hover:bg-brand-subtle', 'active:bg-brand-subtle'],\n success: ['bg-transparent', 'text-success', 'border', 'border-transparent', 'hover:bg-success-subtle', 'active:bg-success-subtle'],\n warning: ['bg-transparent', 'text-warning', 'border', 'border-transparent', 'hover:bg-warning-subtle', 'active:bg-warning-subtle'],\n error: ['bg-transparent', 'text-error', 'border', 'border-transparent', 'hover:bg-error-subtle', 'active:bg-error-subtle'],\n neutral: ['bg-transparent', 'text-1', 'border', 'border-transparent', 'hover:bg-raised', 'active:bg-tertiary'],\n info: ['bg-transparent', 'text-info', 'border', 'border-transparent', 'hover:opacity-90']\n },\n link: {\n brand: ['bg-transparent', 'text-brand', 'border', 'border-transparent', 'px-1'],\n success: ['bg-transparent', 'text-success', 'border', 'border-transparent', 'px-1'],\n warning: ['bg-transparent', 'text-warning', 'border', 'border-transparent', 'px-1'],\n error: ['bg-transparent', 'text-error', 'border', 'border-transparent', 'px-1'],\n neutral: ['bg-transparent', 'text-1', 'border', 'border-transparent', 'px-1'],\n info: ['bg-transparent', 'text-info', 'border', 'border-transparent', 'px-1']\n },\n danger: {\n brand: ['bg-error', 'text-inverse', 'border', 'border-transparent'],\n success: ['bg-error', 'text-inverse', 'border', 'border-transparent'],\n warning: ['bg-error', 'text-inverse', 'border', 'border-transparent'],\n error: ['bg-error', 'text-inverse', 'border', 'border-transparent'],\n neutral: ['bg-error', 'text-inverse', 'border', 'border-transparent'],\n info: ['bg-error', 'text-inverse', 'border', 'border-transparent']\n },\n primary: {\n brand: ['bg-brand', 'text-inverse', 'border', 'border-transparent'],\n success: ['bg-brand', 'text-inverse', 'border', 'border-transparent'],\n warning: ['bg-brand', 'text-inverse', 'border', 'border-transparent'],\n error: ['bg-brand', 'text-inverse', 'border', 'border-transparent'],\n neutral: ['bg-brand', 'text-inverse', 'border', 'border-transparent'],\n info: ['bg-brand', 'text-inverse', 'border', 'border-transparent']\n },\n secondary: {\n brand: ['bg-raised', 'text-1', 'border', 'border-transparent'],\n success: ['bg-raised', 'text-1', 'border', 'border-transparent'],\n warning: ['bg-raised', 'text-1', 'border', 'border-transparent'],\n error: ['bg-raised', 'text-1', 'border', 'border-transparent'],\n neutral: ['bg-raised', 'text-1', 'border', 'border-transparent'],\n info: ['bg-raised', 'text-1', 'border', 'border-transparent']\n },\n success: {\n brand: ['bg-success', 'text-inverse', 'border', 'border-transparent'],\n success: ['bg-success', 'text-inverse', 'border', 'border-transparent'],\n warning: ['bg-success', 'text-inverse', 'border', 'border-transparent'],\n error: ['bg-success', 'text-inverse', 'border', 'border-transparent'],\n neutral: ['bg-success', 'text-inverse', 'border', 'border-transparent'],\n info: ['bg-success', 'text-inverse', 'border', 'border-transparent']\n },\n warning: {\n brand: ['bg-warning', 'text-inverse', 'border', 'border-transparent'],\n success: ['bg-warning', 'text-inverse', 'border', 'border-transparent'],\n warning: ['bg-warning', 'text-inverse', 'border', 'border-transparent'],\n error: ['bg-warning', 'text-inverse', 'border', 'border-transparent'],\n neutral: ['bg-warning', 'text-inverse', 'border', 'border-transparent'],\n info: ['bg-warning', 'text-inverse', 'border', 'border-transparent']\n },\n info: {\n brand: ['bg-info', 'text-inverse', 'border', 'border-transparent'],\n success: ['bg-info', 'text-inverse', 'border', 'border-transparent'],\n warning: ['bg-info', 'text-inverse', 'border', 'border-transparent'],\n error: ['bg-info', 'text-inverse', 'border', 'border-transparent'],\n neutral: ['bg-info', 'text-inverse', 'border', 'border-transparent'],\n info: ['bg-info', 'text-inverse', 'border', 'border-transparent']\n }\n};\n","// 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 } from '../types';\r\n import {\r\n sizePaddingMap,\r\n sizeGapMap,\r\n labelSizeMap,\r\n iconSizeMap,\r\n variantClasses\r\n } from './constants';\r\n\r\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\r\n\r\n\r\n\r\n// ╔════════════════════════════════════════ CORE ════════════════════════════════════════╗\r\n\r\n const mountedElements = new WeakSet<HTMLElement>();\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 * Button Component\r\n *\r\n * A versatile button component with support for variants, colors, sizes, and icons.\r\n * Now features enhanced style controllers for effects and interactions.\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\r\n // Style Controllers\r\n hover,\r\n active,\r\n shadow,\r\n radius,\r\n underline,\r\n uppercase,\r\n\r\n fullWidth,\r\n labelFullWidth,\r\n disabled,\r\n loading,\r\n\r\n leftIcon,\r\n rightIcon,\r\n\r\n as,\r\n text,\r\n children,\r\n\r\n className,\r\n onMount,\r\n onLoad,\r\n onClick,\r\n\r\n ...rest\r\n } = props;\r\n\r\n // 1. Resolve Defaults based on Variant\r\n const isSemantic = ['primary', 'secondary', 'success', 'warning', 'danger', 'info'].includes(variant);\r\n const isSolid = variant === 'solid';\r\n const isLink = variant === 'link';\r\n\r\n const resolvedShadow = shadow ?? ((isSemantic || isSolid) ? 'sm' : 'none');\r\n const resolvedActive = active ?? 'scale';\r\n // Legacy variants (solid/outline/ghost) have built-in color hovers, so we default to 'none' to avoid double effects\r\n // Semantic variants use opacity hover by default\r\n const resolvedHover = hover ?? (isSemantic ? 'opacity' : 'none');\r\n const resolvedUnderline = underline ?? (isLink ? 'hover' : 'none');\r\n const resolvedRadius = radius ?? 'base'; // Default to base rounded\r\n\r\n // 2. Compose Classes\r\n const baseClasses = [\r\n 'inline-flex', 'items-center', 'justify-center',\r\n 'transition-all', 'duration-200',\r\n 'focus:outline-none',\r\n 'font-medium'\r\n ];\r\n\r\n // State Classes\r\n if (disabled || loading) {\r\n baseClasses.push('opacity-50', 'cursor-not-allowed', 'pointer-events-none');\r\n } else {\r\n baseClasses.push('cursor-pointer');\r\n }\r\n\r\n // Size Classes\r\n if (fullWidth) baseClasses.push('w-full');\r\n baseClasses.push(`gap-${sizeGapMap[size]}`);\r\n baseClasses.push(`px-${sizePaddingMap[size].px}`);\r\n baseClasses.push(`py-${sizePaddingMap[size].py}`);\r\n baseClasses.push(`text-${labelSizeMap[size]}`); // Ensure text size matches button size\r\n\r\n // Variant & Color Classes (from Constants)\r\n const variantStyle = variantClasses[variant]?.[color] || [];\r\n baseClasses.push(...variantStyle);\r\n\r\n // Radius\r\n if (resolvedRadius !== 'none') {\r\n baseClasses.push(resolvedRadius === 'base' ? 'rounded' : `rounded-${resolvedRadius}`);\r\n } else {\r\n baseClasses.push('rounded-none');\r\n }\r\n\r\n // Shadow\r\n if (resolvedShadow !== 'none') {\r\n baseClasses.push(`shadow-${resolvedShadow}`);\r\n }\r\n\r\n // Hover Effects\r\n if (resolvedHover === 'opacity') baseClasses.push('hover:opacity-90');\r\n if (resolvedHover === 'scale') baseClasses.push('hover:scale-105');\r\n if (resolvedHover === 'shadow') baseClasses.push('hover:shadow-md');\r\n\r\n // Active Effects\r\n if (resolvedActive === 'scale') baseClasses.push('active:scale-95');\r\n\r\n // Underline\r\n if (resolvedUnderline === 'hover') baseClasses.push('hover:underline', 'underline-offset-4', 'decoration-2');\r\n if (resolvedUnderline === 'always') baseClasses.push('underline', 'underline-offset-4', 'decoration-2');\r\n\r\n // Uppercase\r\n if (uppercase) baseClasses.push('uppercase', 'tracking-wide');\r\n\r\n // Custom ClassName\r\n if (className) baseClasses.push(className);\r\n\r\n\r\n // 3. Render\r\n const content = children || text;\r\n const labelSize = labelSizeMap[size];\r\n\r\n return (\r\n <Container\r\n as={as || 'button'}\r\n className={baseClasses.join(' ')}\r\n {...rest}\r\n ref={(el: HTMLElement | null) => {\r\n if (el) {\r\n if (!mountedElements.has(el)) {\r\n mountedElements.add(el);\r\n onMount?.(el);\r\n onLoad?.(el);\r\n }\r\n }\r\n }}\r\n onClick={(e: MouseEvent) => {\r\n if (!disabled && !loading) {\r\n onClick?.(e);\r\n }\r\n }}\r\n >\r\n {loading && (\r\n <span className=\"animate-spin mr-2\">\r\n <Icon name='spinner' size={iconSizeMap[size]} />\r\n </span>\r\n )}\r\n\r\n {!loading ? renderIcon(leftIcon, size) : <></>}\r\n\r\n {content && (typeof content === 'string' || typeof content === 'number') ? (\r\n <Text\r\n size={labelSize}\r\n className={labelFullWidth ? 'flex-1 text-center' : ''}\r\n >\r\n {content}\r\n </Text>\r\n ) : content}\r\n\r\n {!loading ? renderIcon(rightIcon, size) : <></>}\r\n </Container>\r\n );\r\n }\r\n\r\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\r\n"]}
package/dist/index.d.cts CHANGED
@@ -2,13 +2,24 @@ import { JSXElement } from '@minejs/jsx';
2
2
  import { ContainerAs } from '@cruxkit/container';
3
3
  import { IconProps, IconName } from '@cruxkit/icon';
4
4
 
5
- type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'link';
6
- type ButtonColor = 'brand' | 'success' | 'warning' | 'error' | 'neutral';
5
+ type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'link' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
6
+ type ButtonColor = 'brand' | 'success' | 'warning' | 'error' | 'neutral' | 'info';
7
7
  type ButtonSize = 'sm' | 'md' | 'lg';
8
+ type ButtonRadius = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
9
+ type ButtonShadow = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'inner';
10
+ type ButtonHoverEffect = 'none' | 'opacity' | 'scale' | 'shadow';
11
+ type ButtonActiveEffect = 'none' | 'scale';
12
+ type ButtonUnderline = 'none' | 'hover' | 'always';
8
13
  interface ButtonProps {
9
14
  variant?: ButtonVariant;
10
15
  color?: ButtonColor;
11
16
  size?: ButtonSize;
17
+ hover?: ButtonHoverEffect;
18
+ active?: ButtonActiveEffect;
19
+ shadow?: ButtonShadow;
20
+ radius?: ButtonRadius;
21
+ underline?: ButtonUnderline;
22
+ uppercase?: boolean;
12
23
  fullWidth?: boolean;
13
24
  labelFullWidth?: boolean;
14
25
  disabled?: boolean;
@@ -34,33 +45,11 @@ interface ButtonProps {
34
45
  }
35
46
 
36
47
  /**
37
- * A polymorphic button component that supports multiple variants, colors, sizes, and states.
38
- *
39
- * @param props - The properties for the Button component.
40
- * @param props.variant - Visual style variant: `'solid' | 'outline' | 'ghost' | 'link'`.
41
- * @param props.color - Color theme: `'brand' | 'success' | 'warning' | 'error' | 'neutral'`.
42
- * @param props.size - Size scale: `'sm' | 'md' | 'lg'`.
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.
45
- * @param props.disabled - Whether the button is disabled.
46
- * @param props.loading - Whether the button is in a loading state (disables interaction).
47
- * @param props.leftIcon - Optional icon placed to the left of the label (string name or IconProps).
48
- * @param props.rightIcon - Optional icon placed to the right of the label (string name or IconProps).
49
- * @param props.as - Element type to render: `'button' | 'a' | any polymorphic component`.
50
- * @param props.children - Button label content.
51
- * @param props.className - Additional CSS classes appended to the built-in styles.
52
- * @param props.type - HTML button type attribute (only applied when `as="button"`).
53
- * @param props.restProps - Any other props are forwarded to the underlying element.
54
- *
55
- * @returns A JSX element representing the styled button.
56
- *
57
- * @example
58
- * ```tsx
59
- * <Button variant="solid" color="brand" size="md" onClick={handleClick}>
60
- * Save
61
- * </Button>
62
- * ```
63
- */
48
+ * Button Component
49
+ *
50
+ * A versatile button component with support for variants, colors, sizes, and icons.
51
+ * Now features enhanced style controllers for effects and interactions.
52
+ */
64
53
  declare function Button(props: ButtonProps): JSXElement;
65
54
 
66
- export { Button, type ButtonColor, type ButtonProps, type ButtonSize, type ButtonVariant };
55
+ export { Button, type ButtonActiveEffect, type ButtonColor, type ButtonHoverEffect, type ButtonProps, type ButtonRadius, type ButtonShadow, type ButtonSize, type ButtonUnderline, type ButtonVariant };
package/dist/index.d.ts CHANGED
@@ -2,13 +2,24 @@ import { JSXElement } from '@minejs/jsx';
2
2
  import { ContainerAs } from '@cruxkit/container';
3
3
  import { IconProps, IconName } from '@cruxkit/icon';
4
4
 
5
- type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'link';
6
- type ButtonColor = 'brand' | 'success' | 'warning' | 'error' | 'neutral';
5
+ type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'link' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
6
+ type ButtonColor = 'brand' | 'success' | 'warning' | 'error' | 'neutral' | 'info';
7
7
  type ButtonSize = 'sm' | 'md' | 'lg';
8
+ type ButtonRadius = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
9
+ type ButtonShadow = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'inner';
10
+ type ButtonHoverEffect = 'none' | 'opacity' | 'scale' | 'shadow';
11
+ type ButtonActiveEffect = 'none' | 'scale';
12
+ type ButtonUnderline = 'none' | 'hover' | 'always';
8
13
  interface ButtonProps {
9
14
  variant?: ButtonVariant;
10
15
  color?: ButtonColor;
11
16
  size?: ButtonSize;
17
+ hover?: ButtonHoverEffect;
18
+ active?: ButtonActiveEffect;
19
+ shadow?: ButtonShadow;
20
+ radius?: ButtonRadius;
21
+ underline?: ButtonUnderline;
22
+ uppercase?: boolean;
12
23
  fullWidth?: boolean;
13
24
  labelFullWidth?: boolean;
14
25
  disabled?: boolean;
@@ -34,33 +45,11 @@ interface ButtonProps {
34
45
  }
35
46
 
36
47
  /**
37
- * A polymorphic button component that supports multiple variants, colors, sizes, and states.
38
- *
39
- * @param props - The properties for the Button component.
40
- * @param props.variant - Visual style variant: `'solid' | 'outline' | 'ghost' | 'link'`.
41
- * @param props.color - Color theme: `'brand' | 'success' | 'warning' | 'error' | 'neutral'`.
42
- * @param props.size - Size scale: `'sm' | 'md' | 'lg'`.
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.
45
- * @param props.disabled - Whether the button is disabled.
46
- * @param props.loading - Whether the button is in a loading state (disables interaction).
47
- * @param props.leftIcon - Optional icon placed to the left of the label (string name or IconProps).
48
- * @param props.rightIcon - Optional icon placed to the right of the label (string name or IconProps).
49
- * @param props.as - Element type to render: `'button' | 'a' | any polymorphic component`.
50
- * @param props.children - Button label content.
51
- * @param props.className - Additional CSS classes appended to the built-in styles.
52
- * @param props.type - HTML button type attribute (only applied when `as="button"`).
53
- * @param props.restProps - Any other props are forwarded to the underlying element.
54
- *
55
- * @returns A JSX element representing the styled button.
56
- *
57
- * @example
58
- * ```tsx
59
- * <Button variant="solid" color="brand" size="md" onClick={handleClick}>
60
- * Save
61
- * </Button>
62
- * ```
63
- */
48
+ * Button Component
49
+ *
50
+ * A versatile button component with support for variants, colors, sizes, and icons.
51
+ * Now features enhanced style controllers for effects and interactions.
52
+ */
64
53
  declare function Button(props: ButtonProps): JSXElement;
65
54
 
66
- export { Button, type ButtonColor, type ButtonProps, type ButtonSize, type ButtonVariant };
55
+ export { Button, type ButtonActiveEffect, type ButtonColor, type ButtonHoverEffect, type ButtonProps, type ButtonRadius, type ButtonShadow, type ButtonSize, type ButtonUnderline, type ButtonVariant };
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 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
1
+ import {Container}from'@cruxkit/container';import {Text}from'@cruxkit/text';import {Icon}from'@cruxkit/icon';import {jsxs,jsx,Fragment}from'@minejs/jsx/jsx-runtime';var c={sm:{px:3,py:1},md:{px:4,py:2},lg:{px:6,py:3}},w={sm:1,md:2,lg:2},g={sm:"sm",md:"md",lg:"lg"},u={sm:"sm",md:"md",lg:"lg"},y={solid:{brand:["bg-brand","text-inverse","border","border-transparent","hover:bg-brand-hover","active:bg-brand-active"],success:["bg-success","text-inverse","border","border-transparent","hover:bg-success-hover","active:bg-success-active"],warning:["bg-warning","text-inverse","border","border-transparent","hover:bg-warning-hover","active:bg-warning-active"],error:["bg-error","text-inverse","border","border-transparent","hover:bg-error-hover","active:bg-error-active"],neutral:["bg-surface","text-1","border","border-1","hover:bg-raised","active:bg-tertiary"],info:["bg-info","text-inverse","border","border-transparent","hover:opacity-90"]},outline:{brand:["bg-transparent","text-brand","border","border-brand","hover:bg-brand-subtle","active:bg-brand-subtle"],success:["bg-transparent","text-success","border","border-success","hover:bg-success-subtle","active:bg-success-subtle"],warning:["bg-transparent","text-warning","border","border-warning","hover:bg-warning-subtle","active:bg-warning-subtle"],error:["bg-transparent","text-error","border","border-error","hover:bg-error-subtle","active:bg-error-subtle"],neutral:["bg-transparent","text-1","border","border-1","hover:bg-raised","active:bg-tertiary"],info:["bg-transparent","text-info","border","border-info","hover:opacity-90"]},ghost:{brand:["bg-transparent","text-brand","border","border-transparent","hover:bg-brand-subtle","active:bg-brand-subtle"],success:["bg-transparent","text-success","border","border-transparent","hover:bg-success-subtle","active:bg-success-subtle"],warning:["bg-transparent","text-warning","border","border-transparent","hover:bg-warning-subtle","active:bg-warning-subtle"],error:["bg-transparent","text-error","border","border-transparent","hover:bg-error-subtle","active:bg-error-subtle"],neutral:["bg-transparent","text-1","border","border-transparent","hover:bg-raised","active:bg-tertiary"],info:["bg-transparent","text-info","border","border-transparent","hover:opacity-90"]},link:{brand:["bg-transparent","text-brand","border","border-transparent","px-1"],success:["bg-transparent","text-success","border","border-transparent","px-1"],warning:["bg-transparent","text-warning","border","border-transparent","px-1"],error:["bg-transparent","text-error","border","border-transparent","px-1"],neutral:["bg-transparent","text-1","border","border-transparent","px-1"],info:["bg-transparent","text-info","border","border-transparent","px-1"]},danger:{brand:["bg-error","text-inverse","border","border-transparent"],success:["bg-error","text-inverse","border","border-transparent"],warning:["bg-error","text-inverse","border","border-transparent"],error:["bg-error","text-inverse","border","border-transparent"],neutral:["bg-error","text-inverse","border","border-transparent"],info:["bg-error","text-inverse","border","border-transparent"]},primary:{brand:["bg-brand","text-inverse","border","border-transparent"],success:["bg-brand","text-inverse","border","border-transparent"],warning:["bg-brand","text-inverse","border","border-transparent"],error:["bg-brand","text-inverse","border","border-transparent"],neutral:["bg-brand","text-inverse","border","border-transparent"],info:["bg-brand","text-inverse","border","border-transparent"]},secondary:{brand:["bg-raised","text-1","border","border-transparent"],success:["bg-raised","text-1","border","border-transparent"],warning:["bg-raised","text-1","border","border-transparent"],error:["bg-raised","text-1","border","border-transparent"],neutral:["bg-raised","text-1","border","border-transparent"],info:["bg-raised","text-1","border","border-transparent"]},success:{brand:["bg-success","text-inverse","border","border-transparent"],success:["bg-success","text-inverse","border","border-transparent"],warning:["bg-success","text-inverse","border","border-transparent"],error:["bg-success","text-inverse","border","border-transparent"],neutral:["bg-success","text-inverse","border","border-transparent"],info:["bg-success","text-inverse","border","border-transparent"]},warning:{brand:["bg-warning","text-inverse","border","border-transparent"],success:["bg-warning","text-inverse","border","border-transparent"],warning:["bg-warning","text-inverse","border","border-transparent"],error:["bg-warning","text-inverse","border","border-transparent"],neutral:["bg-warning","text-inverse","border","border-transparent"],info:["bg-warning","text-inverse","border","border-transparent"]},info:{brand:["bg-info","text-inverse","border","border-transparent"],success:["bg-info","text-inverse","border","border-transparent"],warning:["bg-info","text-inverse","border","border-transparent"],error:["bg-info","text-inverse","border","border-transparent"],neutral:["bg-info","text-inverse","border","border-transparent"],info:["bg-info","text-inverse","border","border-transparent"]}};var z=new WeakSet;function S(t,o){if(!t)return null;let i=u[o];if(typeof t=="string")return jsx("span",{className:"inline-flex shrink-0",children:jsx(Icon,{name:t,size:i})});let e=t.size??i;return jsx("span",{className:"inline-flex shrink-0",children:jsx(Icon,{...t,size:e})})}function er(t){let{variant:o="solid",color:i="brand",size:e="md",hover:I,active:M,shadow:C,radius:k,underline:N,uppercase:E,fullWidth:P,labelFullWidth:R,disabled:v,loading:a,leftIcon:$,rightIcon:L,as:T,text:H,children:J,className:x,onMount:W,onLoad:X,onClick:G,...V}=t,f=["primary","secondary","success","warning","danger","info"].includes(o),j=o==="solid",A=o==="link",h=C??(f||j?"sm":"none"),F=M??"scale",d=I??(f?"opacity":"none"),m=N??(A?"hover":"none"),p=k??"base",r=["inline-flex","items-center","justify-center","transition-all","duration-200","focus:outline-none","font-medium"];v||a?r.push("opacity-50","cursor-not-allowed","pointer-events-none"):r.push("cursor-pointer"),P&&r.push("w-full"),r.push(`gap-${w[e]}`),r.push(`px-${c[e].px}`),r.push(`py-${c[e].py}`),r.push(`text-${g[e]}`);let U=y[o]?.[i]||[];r.push(...U),p!=="none"?r.push(p==="base"?"rounded":`rounded-${p}`):r.push("rounded-none"),h!=="none"&&r.push(`shadow-${h}`),d==="opacity"&&r.push("hover:opacity-90"),d==="scale"&&r.push("hover:scale-105"),d==="shadow"&&r.push("hover:shadow-md"),F==="scale"&&r.push("active:scale-95"),m==="hover"&&r.push("hover:underline","underline-offset-4","decoration-2"),m==="always"&&r.push("underline","underline-offset-4","decoration-2"),E&&r.push("uppercase","tracking-wide"),x&&r.push(x);let b=J||H,q=g[e];return jsxs(Container,{as:T||"button",className:r.join(" "),...V,ref:s=>{s&&(z.has(s)||(z.add(s),W?.(s),X?.(s)));},onClick:s=>{!v&&!a&&G?.(s);},children:[a&&jsx("span",{className:"animate-spin mr-2",children:jsx(Icon,{name:"spinner",size:u[e]})}),a?jsx(Fragment,{}):S($,e),b&&(typeof b=="string"||typeof b=="number")?jsx(Text,{size:q,className:R?"flex-1 text-center":"",children:b}):b,a?jsx(Fragment,{}):S(L,e)]})}export{er 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","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"]}
1
+ {"version":3,"sources":["../src/kit/constants.ts","../src/kit/button.tsx"],"names":["sizePaddingMap","sizeGapMap","labelSizeMap","iconSizeMap","variantClasses","mountedElements","renderIcon","icon","size","iconSize","jsx","Icon","resolvedSize","Button","props","variant","color","hover","active","shadow","radius","underline","uppercase","fullWidth","labelFullWidth","disabled","loading","leftIcon","rightIcon","as","text","children","className","onMount","onLoad","onClick","rest","isSemantic","isSolid","isLink","resolvedShadow","resolvedActive","resolvedHover","resolvedUnderline","resolvedRadius","baseClasses","variantStyle","content","labelSize","jsxs","Container","el","e","Fragment","Text"],"mappings":"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","file":"index.js","sourcesContent":["import type { ButtonSize, ButtonVariant, ButtonColor } from '../types';\n\nexport const sizePaddingMap: Record<ButtonSize, { px: 3 | 4 | 6; py: 1 | 2 | 3 }> = {\n sm: { px: 3, py: 1 },\n md: { px: 4, py: 2 },\n lg: { px: 6, py: 3 }\n};\n\nexport const sizeGapMap: Record<ButtonSize, 1 | 2> = {\n sm: 1,\n md: 2,\n lg: 2\n};\n\nexport const labelSizeMap: Record<ButtonSize, 'sm' | 'md' | 'lg'> = {\n sm: 'sm',\n md: 'md',\n lg: 'lg'\n};\n\nexport const iconSizeMap: Record<ButtonSize, 'sm' | 'md' | 'lg'> = {\n sm: 'sm',\n md: 'md',\n lg: 'lg'\n};\n\nexport const variantClasses: Record<ButtonVariant, Record<ButtonColor, string[]>> = {\n solid: {\n brand: ['bg-brand', 'text-inverse', 'border', 'border-transparent', 'hover:bg-brand-hover', 'active:bg-brand-active'],\n success: ['bg-success', 'text-inverse', 'border', 'border-transparent', 'hover:bg-success-hover', 'active:bg-success-active'],\n warning: ['bg-warning', 'text-inverse', 'border', 'border-transparent', 'hover:bg-warning-hover', 'active:bg-warning-active'],\n error: ['bg-error', 'text-inverse', 'border', 'border-transparent', 'hover:bg-error-hover', 'active:bg-error-active'],\n neutral: ['bg-surface', 'text-1', 'border', 'border-1', 'hover:bg-raised', 'active:bg-tertiary'],\n info: ['bg-info', 'text-inverse', 'border', 'border-transparent', 'hover:opacity-90']\n },\n outline: {\n brand: ['bg-transparent', 'text-brand', 'border', 'border-brand', 'hover:bg-brand-subtle', 'active:bg-brand-subtle'],\n success: ['bg-transparent', 'text-success', 'border', 'border-success', 'hover:bg-success-subtle', 'active:bg-success-subtle'],\n warning: ['bg-transparent', 'text-warning', 'border', 'border-warning', 'hover:bg-warning-subtle', 'active:bg-warning-subtle'],\n error: ['bg-transparent', 'text-error', 'border', 'border-error', 'hover:bg-error-subtle', 'active:bg-error-subtle'],\n neutral: ['bg-transparent', 'text-1', 'border', 'border-1', 'hover:bg-raised', 'active:bg-tertiary'],\n info: ['bg-transparent', 'text-info', 'border', 'border-info', 'hover:opacity-90']\n },\n ghost: {\n brand: ['bg-transparent', 'text-brand', 'border', 'border-transparent', 'hover:bg-brand-subtle', 'active:bg-brand-subtle'],\n success: ['bg-transparent', 'text-success', 'border', 'border-transparent', 'hover:bg-success-subtle', 'active:bg-success-subtle'],\n warning: ['bg-transparent', 'text-warning', 'border', 'border-transparent', 'hover:bg-warning-subtle', 'active:bg-warning-subtle'],\n error: ['bg-transparent', 'text-error', 'border', 'border-transparent', 'hover:bg-error-subtle', 'active:bg-error-subtle'],\n neutral: ['bg-transparent', 'text-1', 'border', 'border-transparent', 'hover:bg-raised', 'active:bg-tertiary'],\n info: ['bg-transparent', 'text-info', 'border', 'border-transparent', 'hover:opacity-90']\n },\n link: {\n brand: ['bg-transparent', 'text-brand', 'border', 'border-transparent', 'px-1'],\n success: ['bg-transparent', 'text-success', 'border', 'border-transparent', 'px-1'],\n warning: ['bg-transparent', 'text-warning', 'border', 'border-transparent', 'px-1'],\n error: ['bg-transparent', 'text-error', 'border', 'border-transparent', 'px-1'],\n neutral: ['bg-transparent', 'text-1', 'border', 'border-transparent', 'px-1'],\n info: ['bg-transparent', 'text-info', 'border', 'border-transparent', 'px-1']\n },\n danger: {\n brand: ['bg-error', 'text-inverse', 'border', 'border-transparent'],\n success: ['bg-error', 'text-inverse', 'border', 'border-transparent'],\n warning: ['bg-error', 'text-inverse', 'border', 'border-transparent'],\n error: ['bg-error', 'text-inverse', 'border', 'border-transparent'],\n neutral: ['bg-error', 'text-inverse', 'border', 'border-transparent'],\n info: ['bg-error', 'text-inverse', 'border', 'border-transparent']\n },\n primary: {\n brand: ['bg-brand', 'text-inverse', 'border', 'border-transparent'],\n success: ['bg-brand', 'text-inverse', 'border', 'border-transparent'],\n warning: ['bg-brand', 'text-inverse', 'border', 'border-transparent'],\n error: ['bg-brand', 'text-inverse', 'border', 'border-transparent'],\n neutral: ['bg-brand', 'text-inverse', 'border', 'border-transparent'],\n info: ['bg-brand', 'text-inverse', 'border', 'border-transparent']\n },\n secondary: {\n brand: ['bg-raised', 'text-1', 'border', 'border-transparent'],\n success: ['bg-raised', 'text-1', 'border', 'border-transparent'],\n warning: ['bg-raised', 'text-1', 'border', 'border-transparent'],\n error: ['bg-raised', 'text-1', 'border', 'border-transparent'],\n neutral: ['bg-raised', 'text-1', 'border', 'border-transparent'],\n info: ['bg-raised', 'text-1', 'border', 'border-transparent']\n },\n success: {\n brand: ['bg-success', 'text-inverse', 'border', 'border-transparent'],\n success: ['bg-success', 'text-inverse', 'border', 'border-transparent'],\n warning: ['bg-success', 'text-inverse', 'border', 'border-transparent'],\n error: ['bg-success', 'text-inverse', 'border', 'border-transparent'],\n neutral: ['bg-success', 'text-inverse', 'border', 'border-transparent'],\n info: ['bg-success', 'text-inverse', 'border', 'border-transparent']\n },\n warning: {\n brand: ['bg-warning', 'text-inverse', 'border', 'border-transparent'],\n success: ['bg-warning', 'text-inverse', 'border', 'border-transparent'],\n warning: ['bg-warning', 'text-inverse', 'border', 'border-transparent'],\n error: ['bg-warning', 'text-inverse', 'border', 'border-transparent'],\n neutral: ['bg-warning', 'text-inverse', 'border', 'border-transparent'],\n info: ['bg-warning', 'text-inverse', 'border', 'border-transparent']\n },\n info: {\n brand: ['bg-info', 'text-inverse', 'border', 'border-transparent'],\n success: ['bg-info', 'text-inverse', 'border', 'border-transparent'],\n warning: ['bg-info', 'text-inverse', 'border', 'border-transparent'],\n error: ['bg-info', 'text-inverse', 'border', 'border-transparent'],\n neutral: ['bg-info', 'text-inverse', 'border', 'border-transparent'],\n info: ['bg-info', 'text-inverse', 'border', 'border-transparent']\n }\n};\n","// 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 } from '../types';\r\n import {\r\n sizePaddingMap,\r\n sizeGapMap,\r\n labelSizeMap,\r\n iconSizeMap,\r\n variantClasses\r\n } from './constants';\r\n\r\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\r\n\r\n\r\n\r\n// ╔════════════════════════════════════════ CORE ════════════════════════════════════════╗\r\n\r\n const mountedElements = new WeakSet<HTMLElement>();\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 * Button Component\r\n *\r\n * A versatile button component with support for variants, colors, sizes, and icons.\r\n * Now features enhanced style controllers for effects and interactions.\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\r\n // Style Controllers\r\n hover,\r\n active,\r\n shadow,\r\n radius,\r\n underline,\r\n uppercase,\r\n\r\n fullWidth,\r\n labelFullWidth,\r\n disabled,\r\n loading,\r\n\r\n leftIcon,\r\n rightIcon,\r\n\r\n as,\r\n text,\r\n children,\r\n\r\n className,\r\n onMount,\r\n onLoad,\r\n onClick,\r\n\r\n ...rest\r\n } = props;\r\n\r\n // 1. Resolve Defaults based on Variant\r\n const isSemantic = ['primary', 'secondary', 'success', 'warning', 'danger', 'info'].includes(variant);\r\n const isSolid = variant === 'solid';\r\n const isLink = variant === 'link';\r\n\r\n const resolvedShadow = shadow ?? ((isSemantic || isSolid) ? 'sm' : 'none');\r\n const resolvedActive = active ?? 'scale';\r\n // Legacy variants (solid/outline/ghost) have built-in color hovers, so we default to 'none' to avoid double effects\r\n // Semantic variants use opacity hover by default\r\n const resolvedHover = hover ?? (isSemantic ? 'opacity' : 'none');\r\n const resolvedUnderline = underline ?? (isLink ? 'hover' : 'none');\r\n const resolvedRadius = radius ?? 'base'; // Default to base rounded\r\n\r\n // 2. Compose Classes\r\n const baseClasses = [\r\n 'inline-flex', 'items-center', 'justify-center',\r\n 'transition-all', 'duration-200',\r\n 'focus:outline-none',\r\n 'font-medium'\r\n ];\r\n\r\n // State Classes\r\n if (disabled || loading) {\r\n baseClasses.push('opacity-50', 'cursor-not-allowed', 'pointer-events-none');\r\n } else {\r\n baseClasses.push('cursor-pointer');\r\n }\r\n\r\n // Size Classes\r\n if (fullWidth) baseClasses.push('w-full');\r\n baseClasses.push(`gap-${sizeGapMap[size]}`);\r\n baseClasses.push(`px-${sizePaddingMap[size].px}`);\r\n baseClasses.push(`py-${sizePaddingMap[size].py}`);\r\n baseClasses.push(`text-${labelSizeMap[size]}`); // Ensure text size matches button size\r\n\r\n // Variant & Color Classes (from Constants)\r\n const variantStyle = variantClasses[variant]?.[color] || [];\r\n baseClasses.push(...variantStyle);\r\n\r\n // Radius\r\n if (resolvedRadius !== 'none') {\r\n baseClasses.push(resolvedRadius === 'base' ? 'rounded' : `rounded-${resolvedRadius}`);\r\n } else {\r\n baseClasses.push('rounded-none');\r\n }\r\n\r\n // Shadow\r\n if (resolvedShadow !== 'none') {\r\n baseClasses.push(`shadow-${resolvedShadow}`);\r\n }\r\n\r\n // Hover Effects\r\n if (resolvedHover === 'opacity') baseClasses.push('hover:opacity-90');\r\n if (resolvedHover === 'scale') baseClasses.push('hover:scale-105');\r\n if (resolvedHover === 'shadow') baseClasses.push('hover:shadow-md');\r\n\r\n // Active Effects\r\n if (resolvedActive === 'scale') baseClasses.push('active:scale-95');\r\n\r\n // Underline\r\n if (resolvedUnderline === 'hover') baseClasses.push('hover:underline', 'underline-offset-4', 'decoration-2');\r\n if (resolvedUnderline === 'always') baseClasses.push('underline', 'underline-offset-4', 'decoration-2');\r\n\r\n // Uppercase\r\n if (uppercase) baseClasses.push('uppercase', 'tracking-wide');\r\n\r\n // Custom ClassName\r\n if (className) baseClasses.push(className);\r\n\r\n\r\n // 3. Render\r\n const content = children || text;\r\n const labelSize = labelSizeMap[size];\r\n\r\n return (\r\n <Container\r\n as={as || 'button'}\r\n className={baseClasses.join(' ')}\r\n {...rest}\r\n ref={(el: HTMLElement | null) => {\r\n if (el) {\r\n if (!mountedElements.has(el)) {\r\n mountedElements.add(el);\r\n onMount?.(el);\r\n onLoad?.(el);\r\n }\r\n }\r\n }}\r\n onClick={(e: MouseEvent) => {\r\n if (!disabled && !loading) {\r\n onClick?.(e);\r\n }\r\n }}\r\n >\r\n {loading && (\r\n <span className=\"animate-spin mr-2\">\r\n <Icon name='spinner' size={iconSizeMap[size]} />\r\n </span>\r\n )}\r\n\r\n {!loading ? renderIcon(leftIcon, size) : <></>}\r\n\r\n {content && (typeof content === 'string' || typeof content === 'number') ? (\r\n <Text\r\n size={labelSize}\r\n className={labelFullWidth ? 'flex-1 text-center' : ''}\r\n >\r\n {content}\r\n </Text>\r\n ) : content}\r\n\r\n {!loading ? renderIcon(rightIcon, size) : <></>}\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.2.4",
3
+ "version": "0.2.5",
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",