@shmidko61/lc-ui-kit 0.9.0 → 0.12.0

package/dist/button.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),E=require("./box.cjs"),st=require("./responsive-style.config-B2m9jVlX.cjs"),lt=require("class-variance-authority"),B=require("./responsive-style.utils-BdyoDkKg.cjs"),G={default:"bg-[var(--color-primary-accent)] text-[var(--color-background-default)] hover:bg-[color-mix(in_srgb,var(--color-primary-accent)_80%,#fff)] active:bg-[color-mix(in_srgb,var(--color-primary-accent)_80%,#000)]",secondary:"bg-[var(--color-background-subtle)] text-[var(--color-text-primary)] hover:bg-[color-mix(in_srgb,var(--color-background-subtle)_90%,#000)] active:bg-[color-mix(in_srgb,var(--color-background-subtle)_80%,#fff)]",destructive:"bg-[var(--color-secondary-accent-2)] text-[var(--color-background-default)] hover:bg-[color-mix(in_srgb,var(--color-secondary-accent-2)_80%,#fff)] active:bg-[color-mix(in_srgb,var(--color-secondary-accent-2)_80%,#000)]",success:"bg-[var(--color-secondary-accent-1)] text-[var(--color-background-default)] hover:bg-[color-mix(in_srgb,var(--color-secondary-accent-1)_80%,#fff)] active:bg-[color-mix(in_srgb,var(--color-secondary-accent-1)_80%,#000)]",dark:"bg-[var(--color-text-primary)] text-[var(--color-background-default)] hover:bg-[color-mix(in_srgb,var(--color-text-primary)_80%,#fff)] active:bg-[color-mix(in_srgb,var(--color-text-primary)_80%,#000)]",transparent:"bg-transparent text-[var(--color-text-primary)] hover:bg-transparent active:bg-transparent"},J={sm:"text-[13px] font-medium leading-[120%] [&_svg]:size-4",md:"text-[15px] font-medium leading-[140%] [&_svg]:size-5",lg:"text-[18px] font-medium leading-[140%] [&_svg]:size-5"},w={sm:"6px",md:"8px",lg:"12px"},K="box-border shrink-0 items-center overflow-hidden tracking-normal transition-colors duration-150 [font-family:var(--font-family)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--color-primary-accent)_35%,transparent)] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",ct=lt.cva([K,"[justify-content:var(--button-justify-content,center)]"].join(" "),{variants:{variant:G,size:J,fullWidth:{true:"w-full"}},defaultVariants:{variant:"default",size:"md"}}),T={sm:{minWidth:32,p:{px:12,py:8}},md:{p:{px:16,py:10}},lg:{p:{px:32,py:16}}},gt={base:"[justify-content:var(--button-justify-content)]",md:"md:[justify-content:var(--md-button-justify-content)]",lg:"lg:[justify-content:var(--lg-button-justify-content)]",xl:"xl:[justify-content:var(--xl-button-justify-content)]"},ut={default:{activeBg:"color-mix(in srgb, var(--color-primary-accent) 80%, #000)",bg:"--color-primary-accent",color:"--color-background-default",hoverBg:"color-mix(in srgb, var(--color-primary-accent) 80%, #fff)"},secondary:{activeBg:"color-mix(in srgb, var(--color-background-subtle) 80%, #fff)",bg:"--color-background-subtle",color:"--color-text-primary",hoverBg:"color-mix(in srgb, var(--color-background-subtle) 90%, #000)"},destructive:{activeBg:"color-mix(in srgb, var(--color-secondary-accent-2) 80%, #000)",bg:"--color-secondary-accent-2",color:"--color-background-default",hoverBg:"color-mix(in srgb, var(--color-secondary-accent-2) 80%, #fff)"},success:{activeBg:"color-mix(in srgb, var(--color-secondary-accent-1) 80%, #000)",bg:"--color-secondary-accent-1",color:"--color-background-default",hoverBg:"color-mix(in srgb, var(--color-secondary-accent-1) 80%, #fff)"},dark:{activeBg:"color-mix(in srgb, var(--color-text-primary) 80%, #000)",bg:"--color-text-primary",color:"--color-background-default",hoverBg:"color-mix(in srgb, var(--color-text-primary) 80%, #fff)"},transparent:{activeBg:"transparent",bg:"transparent",color:"--color-text-primary",hoverBg:"transparent"}},bt={sm:"[&_svg]:size-4",md:"[&_svg]:size-5",lg:"[&_svg]:size-5"},vt={sm:{fontSize:"13px",fontWeight:500,lineHeight:"120%"},md:{fontSize:"15px",fontWeight:500,lineHeight:"140%"},lg:{fontSize:"18px",fontWeight:500,lineHeight:"140%"}};function dt({alignContent:o,md:t,lg:r,xl:a}){const e=[],n={};return m(o,e,n,"base"),m(t?.alignContent,e,n,"md","md-"),m(r?.alignContent,e,n,"lg","lg-"),m(a?.alignContent,e,n,"xl","xl-"),{className:e.join(" "),style:Object.keys(n).length?n:void 0}}function ft({variant:o,md:t,lg:r,xl:a},e={}){const n=[],i={};return x(o,e,n,i),x(t?.variant,e.md,n,i,"md"),x(r?.variant,e.lg,n,i,"lg"),x(a?.variant,e.xl,n,i,"xl"),{className:n.join(" "),style:Object.keys(i).length?i:void 0}}function mt({activeBg:o,bg:t,color:r,hoverBg:a,md:e,lg:n,xl:i}){const s=[],l={};return y({activeBg:o,bg:t,color:r,hoverBg:a},s,l),y(e,s,l,"md"),y(n,s,l,"lg"),y(i,s,l,"xl"),{className:s.join(" "),style:Object.keys(l).length?l:void 0}}function ht({fontSize:o,fontWeight:t,lineHeight:r,md:a,lg:e,xl:n}){const i=[],s={};return z({fontSize:o,fontWeight:t,lineHeight:r},i,s),z(a,i,s,"md"),z(e,i,s,"lg"),z(n,i,s,"xl"),{className:i.join(" "),style:Object.keys(s).length?s:void 0}}function xt({size:o="md",md:t,lg:r,xl:a}){const e=[bt[o],p.fontSize,p.fontWeight,p.lineHeight],n={};return h(o,e,n),h(t?.size,e,n,"md"),h(r?.size,e,n,"lg"),h(a?.size,e,n,"xl"),{className:e.join(" "),style:n}}function H(o){if(!o)return;const t={...o};return(o.size||o.border)&&(t.border={radius:o.size?w[o.size]:void 0,...o.border}),o.size&&o.p===void 0&&(t.p=T[o.size].p),delete t.activeBg,delete t.alignContent,delete t.bg,delete t.color,delete t.fontSize,delete t.fontWeight,delete t.hoverBg,delete t.lineHeight,delete t.size,delete t.variant,t}function m(o,t,r,a,e=""){if(!o)return;const n=`${e}button-justify-content`;r[`--${n}`]=zt(o),t.push(gt[a])}function h(o,t,r,a){if(!o)return;const{fontSize:e,fontWeight:n,lineHeight:i}=vt[o];if(!a){r["--button-font-size"]=e,r["--button-font-weight"]=n,r["--button-line-height"]=i;return}r[`--${a}-button-font-size`]=e,r[`--${a}-button-font-weight`]=n,r[`--${a}-button-line-height`]=i,t.push(yt[a][o],_[a].fontSize,_[a].fontWeight,_[a].lineHeight)}function x(o,t,r,a,e){if(!o)return;const n=e?Q[e]:L,i=e?`${e}-`:"",s=ut[o];t?.bg===void 0&&(a[`--${i}button-bg`]=c(s.bg),r.push(n.bg)),t?.color===void 0&&(a[`--${i}button-color`]=c(s.color),r.push(n.color)),t?.bg===void 0&&t?.hoverBg===void 0&&(a[`--${i}button-hover-bg`]=c(s.hoverBg),r.push(n.hoverBg)),t?.bg===void 0&&t?.hoverBg===void 0&&t?.activeBg===void 0&&(a[`--${i}button-active-bg`]=c(s.activeBg),r.push(n.activeBg))}function y(o,t,r,a){if(!o)return;const{activeBg:e,bg:n,color:i,hoverBg:s}=o,l=a?Q[a]:L,v=a?`${a}-`:"";n!==void 0&&(r[`--${v}button-bg`]=c(n),t.push(l.bg,l.hoverBg,l.activeBg)),s!==void 0&&(r[`--${v}button-hover-bg`]=c(s),t.push(l.hoverBg)),e!==void 0&&(r[`--${v}button-active-bg`]=c(e),t.push(l.activeBg)),i!==void 0&&(r[`--${v}button-color`]=c(i),t.push(l.color))}function z(o,t,r,a){if(!o)return;const{fontSize:e,fontWeight:n,lineHeight:i}=o,s=a?_[a]:p,l=a?`${a}-`:"";e!==void 0&&(r[`--${l}button-font-size`]=B.normalizeCssTokenValue(e),t.push(s.fontSize)),n!==void 0&&(r[`--${l}button-font-weight`]=B.normalizeCssTokenValue(n),t.push(s.fontWeight)),i!==void 0&&(r[`--${l}button-line-height`]=B.normalizeCssTokenValue(i),t.push(s.lineHeight))}const L={activeBg:"active:bg-[var(--button-active-bg,var(--button-hover-bg,var(--button-bg)))]",bg:"bg-[var(--button-bg)]",color:"text-[var(--button-color)]",hoverBg:"hover:bg-[var(--button-hover-bg,var(--button-bg))]"},p={fontSize:"text-[length:var(--button-font-size)]",fontWeight:"font-[var(--button-font-weight)]",lineHeight:"leading-[var(--button-line-height)]"},Q={md:{activeBg:"md:active:bg-[var(--md-button-active-bg,var(--md-button-hover-bg,var(--md-button-bg)))]",bg:"md:bg-[var(--md-button-bg)]",color:"md:text-[var(--md-button-color)]",hoverBg:"md:hover:bg-[var(--md-button-hover-bg,var(--md-button-bg))]"},lg:{activeBg:"lg:active:bg-[var(--lg-button-active-bg,var(--lg-button-hover-bg,var(--lg-button-bg)))]",bg:"lg:bg-[var(--lg-button-bg)]",color:"lg:text-[var(--lg-button-color)]",hoverBg:"lg:hover:bg-[var(--lg-button-hover-bg,var(--lg-button-bg))]"},xl:{activeBg:"xl:active:bg-[var(--xl-button-active-bg,var(--xl-button-hover-bg,var(--xl-button-bg)))]",bg:"xl:bg-[var(--xl-button-bg)]",color:"xl:text-[var(--xl-button-color)]",hoverBg:"xl:hover:bg-[var(--xl-button-hover-bg,var(--xl-button-bg))]"}},_={md:{fontSize:"md:text-[length:var(--md-button-font-size)]",fontWeight:"md:font-[var(--md-button-font-weight)]",lineHeight:"md:leading-[var(--md-button-line-height)]"},lg:{fontSize:"lg:text-[length:var(--lg-button-font-size)]",fontWeight:"lg:font-[var(--lg-button-font-weight)]",lineHeight:"lg:leading-[var(--lg-button-line-height)]"},xl:{fontSize:"xl:text-[length:var(--xl-button-font-size)]",fontWeight:"xl:font-[var(--xl-button-font-weight)]",lineHeight:"xl:leading-[var(--xl-button-line-height)]"}},yt={md:{sm:"md:[&_svg]:size-4",md:"md:[&_svg]:size-5",lg:"md:[&_svg]:size-5"},lg:{sm:"lg:[&_svg]:size-4",md:"lg:[&_svg]:size-5",lg:"lg:[&_svg]:size-5"},xl:{sm:"xl:[&_svg]:size-4",md:"xl:[&_svg]:size-5",lg:"xl:[&_svg]:size-5"}};function c(o){return String(B.normalizeCssTokenValue(o))}function zt(o){return{center:"center",end:"flex-end",start:"flex-start"}[o]}function Bt({alignContent:o,children:t,className:r,disabled:a,display:e,border:n,bg:i,color:s,cursor:l,fullWidth:v,href:C,hoverBg:A,activeBg:R,fontSize:U,fontWeight:X,isLoading:Y=!1,lineHeight:Z,minHeight:O,minWidth:tt,md:g,lg:u,xl:b,p:ot,position:nt,size:et,style:q,variant:at,width:rt,...S}){const d=a||Y,N=et??"md",j=xt({size:N,md:g,lg:u,xl:b}),$=dt({alignContent:o,md:g,lg:u,xl:b}),V=ft({variant:at??"default",md:g,lg:u,xl:b},{activeBg:R,bg:i,color:s,hoverBg:A,md:g,lg:u,xl:b}),W=mt({activeBg:R,bg:i,color:s,hoverBg:A,md:g,lg:u,xl:b}),P=ht({fontSize:U,fontWeight:X,lineHeight:Z,md:g,lg:u,xl:b}),k={...S,border:{radius:w[N],style:"none",width:"0",...n},cursor:d?"not-allowed":l??"pointer",display:e??"inline-flex",minHeight:O,minWidth:tt,md:H(g),lg:H(u),xl:H(b),p:ot??T[N].p,position:nt??{type:"relative"},width:rt??(v?"100%":void 0)},I=st.cn(K,j.className,C&&"no-underline",$.className,V.className,W.className,P.className,r),D=j.style||$.style||V.style||W.style||P.style||q?{...j.style,...$.style,...V.style,...W.style,...P.style,...q}:void 0,F=f.jsx(f.Fragment,{children:t});if(C){const M=S;return f.jsx(E.Box,{...M,...k,"aria-disabled":d||void 0,as:"a",className:I,href:d?void 0:C,style:D,tabIndex:d?-1:M.tabIndex,children:F})}const it=S;return f.jsx(E.Box,{...it,...k,as:"button",className:I,disabled:d,style:D,children:F})}exports.Button=Bt;exports.buttonSizeBorderRadius=w;exports.buttonSizeBoxProps=T;exports.buttonSizeClassNames=J;exports.buttonVariantClassNames=G;exports.buttonVariants=ct;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),E=require("./box.cjs"),st=require("./responsive-style.config-B2m9jVlX.cjs"),lt=require("class-variance-authority"),z=require("./responsive-style.utils-BdyoDkKg.cjs"),G={default:"bg-[var(--color-primary-accent)] text-[var(--color-background-default)] hover:bg-[color-mix(in_srgb,var(--color-primary-accent)_80%,#fff)] active:bg-[color-mix(in_srgb,var(--color-primary-accent)_80%,#000)]",secondary:"bg-[var(--color-background-subtle)] text-[var(--color-text-primary)] hover:bg-[color-mix(in_srgb,var(--color-background-subtle)_90%,#000)] active:bg-[color-mix(in_srgb,var(--color-background-subtle)_80%,#fff)]",destructive:"bg-[var(--color-secondary-accent-2)] text-[var(--color-background-default)] hover:bg-[color-mix(in_srgb,var(--color-secondary-accent-2)_80%,#fff)] active:bg-[color-mix(in_srgb,var(--color-secondary-accent-2)_80%,#000)]",success:"bg-[var(--color-secondary-accent-1)] text-[var(--color-background-default)] hover:bg-[color-mix(in_srgb,var(--color-secondary-accent-1)_80%,#fff)] active:bg-[color-mix(in_srgb,var(--color-secondary-accent-1)_80%,#000)]",dark:"bg-[var(--color-text-primary)] text-[var(--color-background-default)] hover:bg-[color-mix(in_srgb,var(--color-text-primary)_80%,#fff)] active:bg-[color-mix(in_srgb,var(--color-text-primary)_80%,#000)]",transparent:"bg-transparent text-[var(--color-text-primary)] hover:bg-transparent active:bg-transparent"},J={sm:"text-[13px] font-medium leading-[120%] [&_svg]:size-4",md:"text-[15px] font-medium leading-[140%] [&_svg]:size-5",lg:"text-[18px] font-medium leading-[140%] [&_svg]:size-5"},w={sm:"6px",md:"8px",lg:"12px"},K="box-border shrink-0 items-center overflow-hidden tracking-normal transition-colors duration-150 [font-family:var(--font-family)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--color-primary-accent)_35%,transparent)] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",ct=lt.cva([K,"[justify-content:var(--button-justify-content,center)]"].join(" "),{variants:{variant:G,size:J,fullWidth:{true:"w-full"}},defaultVariants:{variant:"default",size:"md"}}),T={sm:{minWidth:32,p:{px:12,py:8}},md:{p:{px:16,py:10}},lg:{p:{px:32,py:16}}},gt={base:"[justify-content:var(--button-justify-content)]",md:"md:[justify-content:var(--md-button-justify-content)]",lg:"lg:[justify-content:var(--lg-button-justify-content)]",xl:"xl:[justify-content:var(--xl-button-justify-content)]"},ut={default:{activeBg:"color-mix(in srgb, var(--color-primary-accent) 80%, #000)",bg:"--color-primary-accent",color:"--color-background-default",hoverBg:"color-mix(in srgb, var(--color-primary-accent) 80%, #fff)"},secondary:{activeBg:"color-mix(in srgb, var(--color-background-subtle) 80%, #fff)",bg:"--color-background-subtle",color:"--color-text-primary",hoverBg:"color-mix(in srgb, var(--color-background-subtle) 90%, #000)"},destructive:{activeBg:"color-mix(in srgb, var(--color-secondary-accent-2) 80%, #000)",bg:"--color-secondary-accent-2",color:"--color-background-default",hoverBg:"color-mix(in srgb, var(--color-secondary-accent-2) 80%, #fff)"},success:{activeBg:"color-mix(in srgb, var(--color-secondary-accent-1) 80%, #000)",bg:"--color-secondary-accent-1",color:"--color-background-default",hoverBg:"color-mix(in srgb, var(--color-secondary-accent-1) 80%, #fff)"},dark:{activeBg:"color-mix(in srgb, var(--color-text-primary) 80%, #000)",bg:"--color-text-primary",color:"--color-background-default",hoverBg:"color-mix(in srgb, var(--color-text-primary) 80%, #fff)"},transparent:{activeBg:"transparent",bg:"transparent",color:"--color-text-primary",hoverBg:"transparent"}},bt={sm:"[&_svg]:size-4",md:"[&_svg]:size-5",lg:"[&_svg]:size-5"},vt={sm:{fontSize:"13px",fontWeight:500,lineHeight:"120%"},md:{fontSize:"15px",fontWeight:500,lineHeight:"140%"},lg:{fontSize:"18px",fontWeight:500,lineHeight:"140%"}},L={activeBg:"active:bg-[var(--button-active-bg,var(--button-hover-bg,var(--button-bg)))]",bg:"bg-[var(--button-bg)]",color:"text-[var(--button-color)]",hoverBg:"hover:bg-[var(--button-hover-bg,var(--button-bg))]"},p={fontSize:"text-[length:var(--button-font-size)]",fontWeight:"font-[var(--button-font-weight)]",lineHeight:"leading-[var(--button-line-height)]"},Q={md:{activeBg:"md:active:bg-[var(--md-button-active-bg,var(--md-button-hover-bg,var(--md-button-bg)))]",bg:"md:bg-[var(--md-button-bg)]",color:"md:text-[var(--md-button-color)]",hoverBg:"md:hover:bg-[var(--md-button-hover-bg,var(--md-button-bg))]"},lg:{activeBg:"lg:active:bg-[var(--lg-button-active-bg,var(--lg-button-hover-bg,var(--lg-button-bg)))]",bg:"lg:bg-[var(--lg-button-bg)]",color:"lg:text-[var(--lg-button-color)]",hoverBg:"lg:hover:bg-[var(--lg-button-hover-bg,var(--lg-button-bg))]"},xl:{activeBg:"xl:active:bg-[var(--xl-button-active-bg,var(--xl-button-hover-bg,var(--xl-button-bg)))]",bg:"xl:bg-[var(--xl-button-bg)]",color:"xl:text-[var(--xl-button-color)]",hoverBg:"xl:hover:bg-[var(--xl-button-hover-bg,var(--xl-button-bg))]"}},_={md:{fontSize:"md:text-[length:var(--md-button-font-size)]",fontWeight:"md:font-[var(--md-button-font-weight)]",lineHeight:"md:leading-[var(--md-button-line-height)]"},lg:{fontSize:"lg:text-[length:var(--lg-button-font-size)]",fontWeight:"lg:font-[var(--lg-button-font-weight)]",lineHeight:"lg:leading-[var(--lg-button-line-height)]"},xl:{fontSize:"xl:text-[length:var(--xl-button-font-size)]",fontWeight:"xl:font-[var(--xl-button-font-weight)]",lineHeight:"xl:leading-[var(--xl-button-line-height)]"}},dt={md:{sm:"md:[&_svg]:size-4",md:"md:[&_svg]:size-5",lg:"md:[&_svg]:size-5"},lg:{sm:"lg:[&_svg]:size-4",md:"lg:[&_svg]:size-5",lg:"lg:[&_svg]:size-5"},xl:{sm:"xl:[&_svg]:size-4",md:"xl:[&_svg]:size-5",lg:"xl:[&_svg]:size-5"}};function ft({alignContent:o,md:t,lg:r,xl:a}){const e=[],n={};return m(o,e,n,{breakpoint:"base"}),m(t?.alignContent,e,n,{breakpoint:"md",variablePrefix:"md-"}),m(r?.alignContent,e,n,{breakpoint:"lg",variablePrefix:"lg-"}),m(a?.alignContent,e,n,{breakpoint:"xl",variablePrefix:"xl-"}),{className:e.join(" "),style:Object.keys(n).length?n:void 0}}function mt({variant:o,md:t,lg:r,xl:a},e={}){const n=[],i={};return x(o,e,{classNames:n,style:i}),x(t?.variant,e.md,{classNames:n,style:i},"md"),x(r?.variant,e.lg,{classNames:n,style:i},"lg"),x(a?.variant,e.xl,{classNames:n,style:i},"xl"),{className:n.join(" "),style:Object.keys(i).length?i:void 0}}function ht({activeBg:o,bg:t,color:r,hoverBg:a,md:e,lg:n,xl:i}){const s=[],l={};return y({activeBg:o,bg:t,color:r,hoverBg:a},s,l),y(e,s,l,"md"),y(n,s,l,"lg"),y(i,s,l,"xl"),{className:s.join(" "),style:Object.keys(l).length?l:void 0}}function xt({fontSize:o,fontWeight:t,lineHeight:r,md:a,lg:e,xl:n}){const i=[],s={};return B({fontSize:o,fontWeight:t,lineHeight:r},i,s),B(a,i,s,"md"),B(e,i,s,"lg"),B(n,i,s,"xl"),{className:i.join(" "),style:Object.keys(s).length?s:void 0}}function yt({size:o="md",md:t,lg:r,xl:a}){const e=[bt[o],p.fontSize,p.fontWeight,p.lineHeight],n={};return h(o,e,n),h(t?.size,e,n,"md"),h(r?.size,e,n,"lg"),h(a?.size,e,n,"xl"),{className:e.join(" "),style:n}}function H(o){if(!o)return;const t={...o};return(o.size||o.border)&&(t.border={radius:o.size?w[o.size]:void 0,...o.border}),o.size&&o.p===void 0&&(t.p=T[o.size].p),delete t.activeBg,delete t.alignContent,delete t.bg,delete t.color,delete t.fontSize,delete t.fontWeight,delete t.hoverBg,delete t.lineHeight,delete t.size,delete t.variant,t}function m(o,t,r,{breakpoint:a,variablePrefix:e=""}){if(!o)return;const n=`${e}button-justify-content`;r[`--${n}`]=Bt(o),t.push(gt[a])}function h(o,t,r,a){if(!o)return;const{fontSize:e,fontWeight:n,lineHeight:i}=vt[o];if(!a){r["--button-font-size"]=e,r["--button-font-weight"]=n,r["--button-line-height"]=i;return}r[`--${a}-button-font-size`]=e,r[`--${a}-button-font-weight`]=n,r[`--${a}-button-line-height`]=i,t.push(dt[a][o],_[a].fontSize,_[a].fontWeight,_[a].lineHeight)}function x(o,t,{classNames:r,style:a},e){if(!o)return;const n=e?Q[e]:L,i=e?`${e}-`:"",s=ut[o];t?.bg===void 0&&(a[`--${i}button-bg`]=c(s.bg),r.push(n.bg)),t?.color===void 0&&(a[`--${i}button-color`]=c(s.color),r.push(n.color)),t?.bg===void 0&&t?.hoverBg===void 0&&(a[`--${i}button-hover-bg`]=c(s.hoverBg),r.push(n.hoverBg)),t?.bg===void 0&&t?.hoverBg===void 0&&t?.activeBg===void 0&&(a[`--${i}button-active-bg`]=c(s.activeBg),r.push(n.activeBg))}function y(o,t,r,a){if(!o)return;const{activeBg:e,bg:n,color:i,hoverBg:s}=o,l=a?Q[a]:L,v=a?`${a}-`:"";n!==void 0&&(r[`--${v}button-bg`]=c(n),t.push(l.bg,l.hoverBg,l.activeBg)),s!==void 0&&(r[`--${v}button-hover-bg`]=c(s),t.push(l.hoverBg)),e!==void 0&&(r[`--${v}button-active-bg`]=c(e),t.push(l.activeBg)),i!==void 0&&(r[`--${v}button-color`]=c(i),t.push(l.color))}function B(o,t,r,a){if(!o)return;const{fontSize:e,fontWeight:n,lineHeight:i}=o,s=a?_[a]:p,l=a?`${a}-`:"";e!==void 0&&(r[`--${l}button-font-size`]=z.normalizeCssTokenValue(e),t.push(s.fontSize)),n!==void 0&&(r[`--${l}button-font-weight`]=z.normalizeCssTokenValue(n),t.push(s.fontWeight)),i!==void 0&&(r[`--${l}button-line-height`]=z.normalizeCssTokenValue(i),t.push(s.lineHeight))}function c(o){return String(z.normalizeCssTokenValue(o))}function Bt(o){return{center:"center",end:"flex-end",start:"flex-start"}[o]}function zt({alignContent:o,children:t,className:r,disabled:a,display:e,border:n,bg:i,color:s,cursor:l,fullWidth:v,href:C,hoverBg:k,activeBg:A,fontSize:U,fontWeight:X,isLoading:Y=!1,lineHeight:Z,minHeight:O,minWidth:tt,md:g,lg:u,xl:b,p:ot,position:nt,size:et,style:R,variant:at,width:rt,...S}){const d=!!a||Y,N=et??"md",j=yt({size:N,md:g,lg:u,xl:b}),$=ft({alignContent:o,md:g,lg:u,xl:b}),P=mt({variant:at??"default",md:g,lg:u,xl:b},{activeBg:A,bg:i,color:s,hoverBg:k,md:g,lg:u,xl:b}),V=ht({activeBg:A,bg:i,color:s,hoverBg:k,md:g,lg:u,xl:b}),W=xt({fontSize:U,fontWeight:X,lineHeight:Z,md:g,lg:u,xl:b}),q={...S,border:{radius:w[N],style:"none",width:"0",...n},cursor:d?"not-allowed":l??"pointer",display:e??"inline-flex",minHeight:O,minWidth:tt,md:H(g),lg:H(u),xl:H(b),p:ot??T[N].p,position:nt??{type:"relative"},width:rt??(v?"100%":void 0)},I=st.cn(K,j.className,C&&"no-underline",$.className,P.className,V.className,W.className,r),D=j.style||$.style||P.style||V.style||W.style||R?{...j.style,...$.style,...P.style,...V.style,...W.style,...R}:void 0,F=f.jsx(f.Fragment,{children:t});if(C){const M=S;return f.jsx(E.Box,{...M,...q,"aria-disabled":d||void 0,as:"a",className:I,href:d?void 0:C,style:D,tabIndex:d?-1:M.tabIndex,children:F})}const it=S;return f.jsx(E.Box,{...it,...q,as:"button",className:I,disabled:d,style:D,children:F})}exports.Button=zt;exports.buttonSizeBorderRadius=w;exports.buttonSizeBoxProps=T;exports.buttonSizeClassNames=J;exports.buttonVariantClassNames=G;exports.buttonVariants=ct;

package/dist/button.js

@@ -1,6 +1,6 @@
-import { jsx as P, Fragment as rt } from "react/jsx-runtime";
+import { jsx as H, Fragment as at } from "react/jsx-runtime";
 import { Box as q } from "./box.js";
-import { c as at } from "./responsive-style.config-DFuATrIM.js";
+import { c as rt } from "./responsive-style.config-DFuATrIM.js";
 import { cva as it } from "class-variance-authority";
 import { n as p } from "./responsive-style.utils-D10sC561.js";
 const lt = {
@@ -86,11 +86,11 @@ const lt = {
     color: "--color-text-primary",
     hoverBg: "transparent"
   }
-}, ut = {
+}, bt = {
   sm: "[&_svg]:size-4",
   md: "[&_svg]:size-5",
   lg: "[&_svg]:size-5"
-}, bt = {
+}, ut = {
   sm: {
     fontSize: "13px",
     fontWeight: 500,
@@ -106,68 +106,137 @@ const lt = {
     fontWeight: 500,
     lineHeight: "140%"
   }
+}, K = {
+  activeBg: "active:bg-[var(--button-active-bg,var(--button-hover-bg,var(--button-bg)))]",
+  bg: "bg-[var(--button-bg)]",
+  color: "text-[var(--button-color)]",
+  hoverBg: "hover:bg-[var(--button-hover-bg,var(--button-bg))]"
+}, B = {
+  fontSize: "text-[length:var(--button-font-size)]",
+  fontWeight: "font-[var(--button-font-weight)]",
+  lineHeight: "leading-[var(--button-line-height)]"
+}, L = {
+  md: {
+    activeBg: "md:active:bg-[var(--md-button-active-bg,var(--md-button-hover-bg,var(--md-button-bg)))]",
+    bg: "md:bg-[var(--md-button-bg)]",
+    color: "md:text-[var(--md-button-color)]",
+    hoverBg: "md:hover:bg-[var(--md-button-hover-bg,var(--md-button-bg))]"
+  },
+  lg: {
+    activeBg: "lg:active:bg-[var(--lg-button-active-bg,var(--lg-button-hover-bg,var(--lg-button-bg)))]",
+    bg: "lg:bg-[var(--lg-button-bg)]",
+    color: "lg:text-[var(--lg-button-color)]",
+    hoverBg: "lg:hover:bg-[var(--lg-button-hover-bg,var(--lg-button-bg))]"
+  },
+  xl: {
+    activeBg: "xl:active:bg-[var(--xl-button-active-bg,var(--xl-button-hover-bg,var(--xl-button-bg)))]",
+    bg: "xl:bg-[var(--xl-button-bg)]",
+    color: "xl:text-[var(--xl-button-color)]",
+    hoverBg: "xl:hover:bg-[var(--xl-button-hover-bg,var(--xl-button-bg))]"
+  }
+}, z = {
+  md: {
+    fontSize: "md:text-[length:var(--md-button-font-size)]",
+    fontWeight: "md:font-[var(--md-button-font-weight)]",
+    lineHeight: "md:leading-[var(--md-button-line-height)]"
+  },
+  lg: {
+    fontSize: "lg:text-[length:var(--lg-button-font-size)]",
+    fontWeight: "lg:font-[var(--lg-button-font-weight)]",
+    lineHeight: "lg:leading-[var(--lg-button-line-height)]"
+  },
+  xl: {
+    fontSize: "xl:text-[length:var(--xl-button-font-size)]",
+    fontWeight: "xl:font-[var(--xl-button-font-weight)]",
+    lineHeight: "xl:leading-[var(--xl-button-line-height)]"
+  }
+}, vt = {
+  md: {
+    sm: "md:[&_svg]:size-4",
+    md: "md:[&_svg]:size-5",
+    lg: "md:[&_svg]:size-5"
+  },
+  lg: {
+    sm: "lg:[&_svg]:size-4",
+    md: "lg:[&_svg]:size-5",
+    lg: "lg:[&_svg]:size-5"
+  },
+  xl: {
+    sm: "xl:[&_svg]:size-4",
+    md: "xl:[&_svg]:size-5",
+    lg: "xl:[&_svg]:size-5"
+  }
 };
-function vt({
+function dt({
   alignContent: o,
   md: t,
-  lg: a,
-  xl: r
+  lg: r,
+  xl: a
 }) {
   const e = [], n = {};
-  return f(o, e, n, "base"), f(t?.alignContent, e, n, "md", "md-"), f(a?.alignContent, e, n, "lg", "lg-"), f(r?.alignContent, e, n, "xl", "xl-"), {
+  return f(o, e, n, { breakpoint: "base" }), f(t?.alignContent, e, n, {
+    breakpoint: "md",
+    variablePrefix: "md-"
+  }), f(r?.alignContent, e, n, {
+    breakpoint: "lg",
+    variablePrefix: "lg-"
+  }), f(a?.alignContent, e, n, {
+    breakpoint: "xl",
+    variablePrefix: "xl-"
+  }), {
     className: e.join(" "),
     style: Object.keys(n).length ? n : void 0
   };
 }
-function dt({ variant: o, md: t, lg: a, xl: r }, e = {}) {
+function ft({ variant: o, md: t, lg: r, xl: a }, e = {}) {
   const n = [], i = {};
-  return h(o, e, n, i), h(t?.variant, e.md, n, i, "md"), h(a?.variant, e.lg, n, i, "lg"), h(r?.variant, e.xl, n, i, "xl"), {
+  return h(o, e, { classNames: n, style: i }), h(t?.variant, e.md, { classNames: n, style: i }, "md"), h(r?.variant, e.lg, { classNames: n, style: i }, "lg"), h(a?.variant, e.xl, { classNames: n, style: i }, "xl"), {
     className: n.join(" "),
     style: Object.keys(i).length ? i : void 0
   };
 }
-function ft({
+function mt({
   activeBg: o,
   bg: t,
-  color: a,
-  hoverBg: r,
+  color: r,
+  hoverBg: a,
   md: e,
   lg: n,
   xl: i
 }) {
   const l = [], s = {};
-  return x({ activeBg: o, bg: t, color: a, hoverBg: r }, l, s), x(e, l, s, "md"), x(n, l, s, "lg"), x(i, l, s, "xl"), {
+  return x({ activeBg: o, bg: t, color: r, hoverBg: a }, l, s), x(e, l, s, "md"), x(n, l, s, "lg"), x(i, l, s, "xl"), {
     className: l.join(" "),
     style: Object.keys(s).length ? s : void 0
   };
 }
-function mt({
+function ht({
   fontSize: o,
   fontWeight: t,
-  lineHeight: a,
-  md: r,
+  lineHeight: r,
+  md: a,
   lg: e,
   xl: n
 }) {
   const i = [], l = {};
-  return y({ fontSize: o, fontWeight: t, lineHeight: a }, i, l), y(r, i, l, "md"), y(e, i, l, "lg"), y(n, i, l, "xl"), {
+  return y({ fontSize: o, fontWeight: t, lineHeight: r }, i, l), y(a, i, l, "md"), y(e, i, l, "lg"), y(n, i, l, "xl"), {
     className: i.join(" "),
     style: Object.keys(l).length ? l : void 0
   };
 }
-function ht({
+function xt({
   size: o = "md",
   md: t,
-  lg: a,
-  xl: r
+  lg: r,
+  xl: a
 }) {
   const e = [
-    ut[o],
+    bt[o],
     B.fontSize,
     B.fontWeight,
     B.lineHeight
   ], n = {};
-  return m(o, e, n), m(t?.size, e, n, "md"), m(a?.size, e, n, "lg"), m(r?.size, e, n, "xl"), {
+  return m(o, e, n), m(t?.size, e, n, "md"), m(r?.size, e, n, "lg"), m(a?.size, e, n, "xl"), {
     className: e.join(" "),
     style: n
   };
@@ -181,106 +250,48 @@ function w(o) {
     ...o.border
   }), o.size && o.p === void 0 && (t.p = J[o.size].p), delete t.activeBg, delete t.alignContent, delete t.bg, delete t.color, delete t.fontSize, delete t.fontWeight, delete t.hoverBg, delete t.lineHeight, delete t.size, delete t.variant, t;
 }
-function f(o, t, a, r, e = "") {
+function f(o, t, r, {
+  breakpoint: a,
+  variablePrefix: e = ""
+}) {
   if (!o)
     return;
   const n = `${e}button-justify-content`;
-  a[`--${n}`] = yt(o), t.push(ct[r]);
+  r[`--${n}`] = yt(o), t.push(ct[a]);
 }
-function m(o, t, a, r) {
+function m(o, t, r, a) {
   if (!o)
     return;
-  const { fontSize: e, fontWeight: n, lineHeight: i } = bt[o];
-  if (!r) {
-    a["--button-font-size"] = e, a["--button-font-weight"] = n, a["--button-line-height"] = i;
+  const { fontSize: e, fontWeight: n, lineHeight: i } = ut[o];
+  if (!a) {
+    r["--button-font-size"] = e, r["--button-font-weight"] = n, r["--button-line-height"] = i;
     return;
   }
-  a[`--${r}-button-font-size`] = e, a[`--${r}-button-font-weight`] = n, a[`--${r}-button-line-height`] = i, t.push(
-    xt[r][o],
-    z[r].fontSize,
-    z[r].fontWeight,
-    z[r].lineHeight
+  r[`--${a}-button-font-size`] = e, r[`--${a}-button-font-weight`] = n, r[`--${a}-button-line-height`] = i, t.push(
+    vt[a][o],
+    z[a].fontSize,
+    z[a].fontWeight,
+    z[a].lineHeight
   );
 }
-function h(o, t, a, r, e) {
+function h(o, t, { classNames: r, style: a }, e) {
   if (!o)
     return;
   const n = e ? L[e] : K, i = e ? `${e}-` : "", l = gt[o];
-  t?.bg === void 0 && (r[`--${i}button-bg`] = c(l.bg), a.push(n.bg)), t?.color === void 0 && (r[`--${i}button-color`] = c(l.color), a.push(n.color)), t?.bg === void 0 && t?.hoverBg === void 0 && (r[`--${i}button-hover-bg`] = c(l.hoverBg), a.push(n.hoverBg)), t?.bg === void 0 && t?.hoverBg === void 0 && t?.activeBg === void 0 && (r[`--${i}button-active-bg`] = c(l.activeBg), a.push(n.activeBg));
+  t?.bg === void 0 && (a[`--${i}button-bg`] = c(l.bg), r.push(n.bg)), t?.color === void 0 && (a[`--${i}button-color`] = c(l.color), r.push(n.color)), t?.bg === void 0 && t?.hoverBg === void 0 && (a[`--${i}button-hover-bg`] = c(l.hoverBg), r.push(n.hoverBg)), t?.bg === void 0 && t?.hoverBg === void 0 && t?.activeBg === void 0 && (a[`--${i}button-active-bg`] = c(l.activeBg), r.push(n.activeBg));
 }
-function x(o, t, a, r) {
+function x(o, t, r, a) {
   if (!o)
     return;
-  const { activeBg: e, bg: n, color: i, hoverBg: l } = o, s = r ? L[r] : K, v = r ? `${r}-` : "";
-  n !== void 0 && (a[`--${v}button-bg`] = c(n), t.push(s.bg, s.hoverBg, s.activeBg)), l !== void 0 && (a[`--${v}button-hover-bg`] = c(l), t.push(s.hoverBg)), e !== void 0 && (a[`--${v}button-active-bg`] = c(e), t.push(s.activeBg)), i !== void 0 && (a[`--${v}button-color`] = c(i), t.push(s.color));
+  const { activeBg: e, bg: n, color: i, hoverBg: l } = o, s = a ? L[a] : K, v = a ? `${a}-` : "";
+  n !== void 0 && (r[`--${v}button-bg`] = c(n), t.push(s.bg, s.hoverBg, s.activeBg)), l !== void 0 && (r[`--${v}button-hover-bg`] = c(l), t.push(s.hoverBg)), e !== void 0 && (r[`--${v}button-active-bg`] = c(e), t.push(s.activeBg)), i !== void 0 && (r[`--${v}button-color`] = c(i), t.push(s.color));
 }
-function y(o, t, a, r) {
+function y(o, t, r, a) {
   if (!o)
     return;
-  const { fontSize: e, fontWeight: n, lineHeight: i } = o, l = r ? z[r] : B, s = r ? `${r}-` : "";
-  e !== void 0 && (a[`--${s}button-font-size`] = p(e), t.push(l.fontSize)), n !== void 0 && (a[`--${s}button-font-weight`] = p(n), t.push(l.fontWeight)), i !== void 0 && (a[`--${s}button-line-height`] = p(i), t.push(l.lineHeight));
+  const { fontSize: e, fontWeight: n, lineHeight: i } = o, l = a ? z[a] : B, s = a ? `${a}-` : "";
+  e !== void 0 && (r[`--${s}button-font-size`] = p(e), t.push(l.fontSize)), n !== void 0 && (r[`--${s}button-font-weight`] = p(n), t.push(l.fontWeight)), i !== void 0 && (r[`--${s}button-line-height`] = p(i), t.push(l.lineHeight));
 }
-const K = {
-  activeBg: "active:bg-[var(--button-active-bg,var(--button-hover-bg,var(--button-bg)))]",
-  bg: "bg-[var(--button-bg)]",
-  color: "text-[var(--button-color)]",
-  hoverBg: "hover:bg-[var(--button-hover-bg,var(--button-bg))]"
-}, B = {
-  fontSize: "text-[length:var(--button-font-size)]",
-  fontWeight: "font-[var(--button-font-weight)]",
-  lineHeight: "leading-[var(--button-line-height)]"
-}, L = {
-  md: {
-    activeBg: "md:active:bg-[var(--md-button-active-bg,var(--md-button-hover-bg,var(--md-button-bg)))]",
-    bg: "md:bg-[var(--md-button-bg)]",
-    color: "md:text-[var(--md-button-color)]",
-    hoverBg: "md:hover:bg-[var(--md-button-hover-bg,var(--md-button-bg))]"
-  },
-  lg: {
-    activeBg: "lg:active:bg-[var(--lg-button-active-bg,var(--lg-button-hover-bg,var(--lg-button-bg)))]",
-    bg: "lg:bg-[var(--lg-button-bg)]",
-    color: "lg:text-[var(--lg-button-color)]",
-    hoverBg: "lg:hover:bg-[var(--lg-button-hover-bg,var(--lg-button-bg))]"
-  },
-  xl: {
-    activeBg: "xl:active:bg-[var(--xl-button-active-bg,var(--xl-button-hover-bg,var(--xl-button-bg)))]",
-    bg: "xl:bg-[var(--xl-button-bg)]",
-    color: "xl:text-[var(--xl-button-color)]",
-    hoverBg: "xl:hover:bg-[var(--xl-button-hover-bg,var(--xl-button-bg))]"
-  }
-}, z = {
-  md: {
-    fontSize: "md:text-[length:var(--md-button-font-size)]",
-    fontWeight: "md:font-[var(--md-button-font-weight)]",
-    lineHeight: "md:leading-[var(--md-button-line-height)]"
-  },
-  lg: {
-    fontSize: "lg:text-[length:var(--lg-button-font-size)]",
-    fontWeight: "lg:font-[var(--lg-button-font-weight)]",
-    lineHeight: "lg:leading-[var(--lg-button-line-height)]"
-  },
-  xl: {
-    fontSize: "xl:text-[length:var(--xl-button-font-size)]",
-    fontWeight: "xl:font-[var(--xl-button-font-weight)]",
-    lineHeight: "xl:leading-[var(--xl-button-line-height)]"
-  }
-}, xt = {
-  md: {
-    sm: "md:[&_svg]:size-4",
-    md: "md:[&_svg]:size-5",
-    lg: "md:[&_svg]:size-5"
-  },
-  lg: {
-    sm: "lg:[&_svg]:size-4",
-    md: "lg:[&_svg]:size-5",
-    lg: "lg:[&_svg]:size-5"
-  },
-  xl: {
-    sm: "xl:[&_svg]:size-4",
-    md: "xl:[&_svg]:size-5",
-    lg: "xl:[&_svg]:size-5"
-  }
-};
 function c(o) {
   return String(p(o));
 }
@@ -294,8 +305,8 @@ function yt(o) {
 function jt({
   alignContent: o,
   children: t,
-  className: a,
-  disabled: r,
+  className: r,
+  disabled: a,
   display: e,
   border: n,
   bg: i,
@@ -312,8 +323,8 @@ function jt({
   minHeight: Y,
   minWidth: Z,
   md: g,
-  lg: u,
-  xl: b,
+  lg: b,
+  xl: u,
   p: O,
   position: tt,
   size: ot,
@@ -322,22 +333,22 @@ function jt({
   width: et,
   ...C
 }) {
-  const d = r || U, N = ot ?? "md", S = ht({
+  const d = !!a || U, N = ot ?? "md", S = xt({
     size: N,
     md: g,
-    lg: u,
-    xl: b
-  }), j = vt({
+    lg: b,
+    xl: u
+  }), j = dt({
     alignContent: o,
     md: g,
-    lg: u,
-    xl: b
-  }), $ = dt(
+    lg: b,
+    xl: u
+  }), $ = ft(
     {
       variant: nt ?? "default",
       md: g,
-      lg: u,
-      xl: b
+      lg: b,
+      xl: u
     },
     {
       activeBg: A,
@@ -345,25 +356,25 @@ function jt({
       color: l,
       hoverBg: V,
       md: g,
-      lg: u,
-      xl: b
+      lg: b,
+      xl: u
     }
-  ), W = ft({
+  ), P = mt({
     activeBg: A,
     bg: i,
     color: l,
     hoverBg: V,
     md: g,
-    lg: u,
-    xl: b
-  }), H = mt({
+    lg: b,
+    xl: u
+  }), W = ht({
     fontSize: M,
     fontWeight: Q,
     lineHeight: X,
     md: g,
-    lg: u,
-    xl: b
-  }), I = {
+    lg: b,
+    xl: u
+  }), k = {
     ...C,
     border: {
       radius: E[N],
@@ -376,54 +387,54 @@ function jt({
     minHeight: Y,
     minWidth: Z,
     md: w(g),
-    lg: w(u),
-    xl: w(b),
+    lg: w(b),
+    xl: w(u),
     p: O ?? J[N].p,
     position: tt ?? { type: "relative" },
     width: et ?? (v ? "100%" : void 0)
-  }, R = at(
+  }, I = rt(
     G,
     S.className,
     _ && "no-underline",
     j.className,
     $.className,
+    P.className,
     W.className,
-    H.className,
-    a
-  ), k = S.style || j.style || $.style || W.style || H.style || T ? {
+    r
+  ), R = S.style || j.style || $.style || P.style || W.style || T ? {
     ...S.style,
     ...j.style,
     ...$.style,
+    ...P.style,
     ...W.style,
-    ...H.style,
     ...T
-  } : void 0, D = /* @__PURE__ */ P(rt, { children: t });
+  } : void 0, D = /* @__PURE__ */ H(at, { children: t });
   if (_) {
     const F = C;
-    return /* @__PURE__ */ P(
+    return /* @__PURE__ */ H(
       q,
       {
         ...F,
-        ...I,
+        ...k,
         "aria-disabled": d || void 0,
         as: "a",
-        className: R,
+        className: I,
         href: d ? void 0 : _,
-        style: k,
+        style: R,
         tabIndex: d ? -1 : F.tabIndex,
         children: D
       }
     );
   }
-  return /* @__PURE__ */ P(
+  return /* @__PURE__ */ H(
     q,
     {
       ...C,
-      ...I,
+      ...k,
       as: "button",
-      className: R,
+      className: I,
       disabled: d,
-      style: k,
+      style: R,
       children: D
     }
   );

package/dist/flex.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const $=require("react/jsx-runtime"),w=require("./box.cjs"),P=require("./responsive-style.config-B2m9jVlX.cjs");function k(e){const t=[],n={},o={md:e.md,lg:e.lg,xl:e.xl};N(e,t,n);for(const i of P.responsiveBreakpoints){const r=o[i];r&&N(r,t,n,`${i}:`,`${i}-`)}return{className:t.join(" "),style:Object.keys(n).length>0?n:void 0}}function N({justify:e,align:t,gap:n,flexDirection:o,flexWrap:i,order:r,shrink:x,grow:p},d,m,b="",a=""){const c={justifyContent:e,alignItems:t,gap:n===void 0?void 0:h(n),flexDirection:o,flexWrap:i,order:r,flexShrink:x,flexGrow:p};for(const[l,s]of Object.entries(c)){if(s==null)continue;const f=`${a}${S(l)}`,g=C(l,f);g&&(m[`--${f}`]=String(s),d.push(`${b}${g}`))}}function C(e,t){const n=`var(--${t})`;return{alignItems:y("align-items",n),flexDirection:y("flex-direction",n),flexGrow:u("grow",n),flexShrink:u("shrink",n),flexWrap:y("flex-wrap",n),gap:u("gap",n),justifyContent:y("justify-content",n),order:u("order",n)}[e]}function u(e,t){return[e,"-[",t,"]"].join("")}function y(e,t){return["[",e,":",t,"]"].join("")}function S(e){return e.replace(/[A-Z]/g,t=>`-${t.toLowerCase()}`)}function h(e){return typeof e=="number"?`${e}px`:e}function B({align:e,children:t,className:n,flexDirection:o,flexWrap:i,gap:r,grow:x,inline:p=!1,justify:d,order:m,shrink:b,md:a,lg:c,xl:l,style:s,...f}){const j=k({align:e,flexDirection:o,flexWrap:i,gap:r,grow:x,justify:d,order:m,shrink:b,md:a,lg:c,xl:l}),v=j.style||s?{...j.style,...s}:void 0;return $.jsx(w.Box,{className:P.cn(j.className,n),display:p?"inline-flex":"flex",md:a,lg:c,xl:l,style:v,...f,children:t})}exports.Flex=B;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const $=require("react/jsx-runtime"),w=require("./box.cjs"),v=require("./responsive-style.config-B2m9jVlX.cjs");function k(e){const t=[],n={},r={md:e.md,lg:e.lg,xl:e.xl};j(e,t,n);for(const i of v.responsiveBreakpoints){const o=r[i];o&&j(o,t,n,{classPrefix:`${i}:`,variablePrefix:`${i}-`})}return{className:t.join(" "),style:Object.keys(n).length>0?n:void 0}}function j({justify:e,align:t,gap:n,flexDirection:r,flexWrap:i,order:o,shrink:y,grow:p},d,m,{classPrefix:b="",variablePrefix:a=""}={}){const c={justifyContent:e,alignItems:t,gap:n===void 0?void 0:h(n),flexDirection:r,flexWrap:i,order:o,flexShrink:y,flexGrow:p};for(const[l,s]of Object.entries(c)){if(s==null)continue;const f=`${a}${S(l)}`,g=C(l,f);g&&(m[`--${f}`]=String(s),d.push(`${b}${g}`))}}function C(e,t){const n=`var(--${t})`;return{alignItems:x("align-items",n),flexDirection:x("flex-direction",n),flexGrow:u("grow",n),flexShrink:u("shrink",n),flexWrap:x("flex-wrap",n),gap:u("gap",n),justifyContent:x("justify-content",n),order:u("order",n)}[e]}function u(e,t){return[e,"-[",t,"]"].join("")}function x(e,t){return["[",e,":",t,"]"].join("")}function S(e){return e.replace(/[A-Z]/g,t=>`-${t.toLowerCase()}`)}function h(e){return typeof e=="number"?`${e}px`:e}function B({align:e,children:t,className:n,flexDirection:r,flexWrap:i,gap:o,grow:y,inline:p=!1,justify:d,order:m,shrink:b,md:a,lg:c,xl:l,style:s,...f}){const P=k({align:e,flexDirection:r,flexWrap:i,gap:o,grow:y,justify:d,order:m,shrink:b,md:a,lg:c,xl:l}),N=P.style||s?{...P.style,...s}:void 0;return $.jsx(w.Box,{className:v.cn(P.className,n),display:p?"inline-flex":"flex",md:a,lg:c,xl:l,style:N,...f,children:t})}exports.Flex=B;

package/dist/flex.js

@@ -1,29 +1,26 @@
 import { jsx as j } from "react/jsx-runtime";
-import { Box as w } from "./box.js";
-import { a as k, c as v } from "./responsive-style.config-DFuATrIM.js";
+import { Box as v } from "./box.js";
+import { a as w, c as k } from "./responsive-style.config-DFuATrIM.js";
 function C(e) {
   const t = [], n = {}, o = {
     md: e.md,
     lg: e.lg,
     xl: e.xl
   };
-  P(e, t, n);
-  for (const i of k) {
+  N(e, t, n);
+  for (const i of w) {
     const r = o[i];
-    r && P(
-      r,
-      t,
-      n,
-      `${i}:`,
-      `${i}-`
-    );
+    r && N(r, t, n, {
+      classPrefix: `${i}:`,
+      variablePrefix: `${i}-`
+    });
   }
   return {
     className: t.join(" "),
     style: Object.keys(n).length > 0 ? n : void 0
   };
 }
-function P({
+function N({
   justify: e,
   align: t,
   gap: n,
@@ -32,7 +29,10 @@ function P({
   order: r,
   shrink: p,
   grow: x
-}, y, d, b = "", l = "") {
+}, y, d, {
+  classPrefix: b = "",
+  variablePrefix: l = ""
+} = {}) {
   const c = {
     justifyContent: e,
     alignItems: t,
@@ -93,7 +93,7 @@ function G({
   style: s,
   ...f
 }) {
-  const N = C({
+  const P = C({
     align: e,
     flexDirection: o,
     flexWrap: i,
@@ -105,14 +105,14 @@ function G({
     md: l,
     lg: c,
     xl: a
-  }), $ = N.style || s ? {
-    ...N.style,
+  }), $ = P.style || s ? {
+    ...P.style,
     ...s
   } : void 0;
   return /* @__PURE__ */ j(
-    w,
+    v,
     {
-      className: v(N.className, n),
+      className: k(P.className, n),
       display: x ? "inline-flex" : "flex",
       md: l,
       lg: c,

package/dist/grid.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),w=require("./box.cjs"),g=require("./responsive-style.config-B2m9jVlX.cjs");function j(t){const i=[],n={},l={md:t.md,lg:t.lg,xl:t.xl};a(t,i,n);for(const e of g.responsiveBreakpoints){const o=l[e];o&&a(o,i,n,`${e}:`,`${e}-`)}return{className:i.join(" "),style:Object.keys(n).length>0?n:void 0}}function a({cols:t,gap:i},n,l,e="",o=""){if(t!==void 0){const c=`${o}grid-template-columns`;l[`--${c}`]=`repeat(${t}, minmax(0, 1fr))`,n.push(`${e}${m("grid-cols",`var(--${c})`)}`)}if(i!==void 0){const c=`${o}grid-gap`;l[`--${c}`]=G(i),n.push(`${e}${m("gap",`var(--${c})`)}`)}}function m(t,i){return[t,"-[",i,"]"].join("")}function G(t){return typeof t=="number"?`${t}px`:t}function N({children:t,className:i,cols:n=1,gap:l=0,md:e,lg:o,xl:c,style:s,...h}){const d=j({cols:n,gap:l,md:e,lg:o,xl:c}),v=r(e),x=r(o),y=r(c),$=d.style||s?{...d.style,...s}:void 0;return u.jsx(w.Box,{...h,display:"grid",className:g.cn(d.className,i),md:v,lg:x,xl:y,style:$,children:t})}function f({children:t,className:i,...n}){return u.jsx("div",{className:i,...n,children:t})}const S=Object.assign(N,{Item:f});function r(t){if(t)return{aspectRatio:t.aspectRatio,background:t.background,backgroundColor:t.backgroundColor,boxShadow:t.boxShadow,color:t.color,height:t.height,maxHeight:t.maxHeight,maxWidth:t.maxWidth,minHeight:t.minHeight,minWidth:t.minWidth,m:t.m,p:t.p,opacity:t.opacity,overflow:t.overflow,overflowX:t.overflowX,overflowY:t.overflowY,pointerEvents:t.pointerEvents,transform:t.transform,transformOrigin:t.transformOrigin,width:t.width}}exports.Grid=S;exports.GridItem=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),w=require("./box.cjs"),g=require("./responsive-style.config-B2m9jVlX.cjs");function j(i){const t=[],n={},l={md:i.md,lg:i.lg,xl:i.xl};a(i,t,n);for(const e of g.responsiveBreakpoints){const o=l[e];o&&a(o,t,n,{classPrefix:`${e}:`,variablePrefix:`${e}-`})}return{className:t.join(" "),style:Object.keys(n).length>0?n:void 0}}function a({cols:i,gap:t},n,l,{classPrefix:e="",variablePrefix:o=""}={}){if(i!==void 0){const c=`${o}grid-template-columns`;l[`--${c}`]=`repeat(${i}, minmax(0, 1fr))`,n.push(`${e}${m("grid-cols",`var(--${c})`)}`)}if(t!==void 0){const c=`${o}grid-gap`;l[`--${c}`]=G(t),n.push(`${e}${m("gap",`var(--${c})`)}`)}}function m(i,t){return[i,"-[",t,"]"].join("")}function G(i){return typeof i=="number"?`${i}px`:i}function N({children:i,className:t,cols:n=1,gap:l=0,md:e,lg:o,xl:c,style:s,...h}){const r=j({cols:n,gap:l,md:e,lg:o,xl:c}),v=d(e),x=d(o),y=d(c),$=r.style||s?{...r.style,...s}:void 0;return u.jsx(w.Box,{...h,display:"grid",className:g.cn(r.className,t),md:v,lg:x,xl:y,style:$,children:i})}function f({children:i,className:t,...n}){return u.jsx("div",{className:t,...n,children:i})}const S=Object.assign(N,{Item:f});function d(i){if(i)return{aspectRatio:i.aspectRatio,background:i.background,backgroundColor:i.backgroundColor,boxShadow:i.boxShadow,color:i.color,height:i.height,maxHeight:i.maxHeight,maxWidth:i.maxWidth,minHeight:i.minHeight,minWidth:i.minWidth,m:i.m,p:i.p,opacity:i.opacity,overflow:i.overflow,overflowX:i.overflowX,overflowY:i.overflowY,pointerEvents:i.pointerEvents,transform:i.transform,transformOrigin:i.transformOrigin,width:i.width}}exports.Grid=S;exports.GridItem=f;