text: import{_ as e,a,b as t,i as s,c as n,S as o,s as r,D as i,e as l,t as c,m as u,q as d,d as f,f as m,o as g,g as p,p as h,r as b,h as y,j as $,k as v,u as w,l as k,v as S,w as x,x as C}from"./client.01ca4560.js";import{C as D}from"./Code.538820bc.js";function E(e){var a;return{c:function(){a=c("Disabled button")},l:function(e){a=g(e,"Disabled button")},m:function(e,t){$(e,a,t)},d:function(e){e&&p(a)}}}function B(e){var a;return{c:function(){a=c("Disabled button")},l:function(e){a=g(e,"Disabled button")},m:function(e,t){$(e,a,t)},d:function(e){e&&p(a)}}}function P(e){var a;return{c:function(){a=c("Disabled button")},l:function(e){a=g(e,"Disabled button")},m:function(e,t){$(e,a,t)},d:function(e){e&&p(a)}}}function z(e){var a,t,s,n,o,r,z,j,I,A,U,V,G,N,R,q,H,_,F,J,K,L,M,O,Q,W,X,Y,Z,ee,ae,te,se,ne,oe,re,ie,le,ce,ue,de,fe,me,ge;return U=new D({props:{code:"<Button disabled>Disabled button</Button>"}}),N=new i({props:{disabled:!0,$$slots:{default:[E]},$$scope:{ctx:e}}}),M=new D({props:{code:'<Button\n  disabledClasses="bg-gray-100 text-gray-500 dark:bg-dark-100 elevation-none pointer-events-none hover:bg-gray-300 cursor-default"\n  disabled>Disabled button\n</Button>'}}),W=new i({props:{disabledClasses:"bg-gray-100 text-gray-500 dark:bg-dark-100 elevation-none pointer-events-none hover:bg-gray-300 cursor-default",disabled:!0,$$slots:{default:[B]},$$scope:{ctx:e}}}),ae=new D({props:{code:'<Button\n  disabledClasses={i => i.replace(/(3|4)00/g, "100")}\n  disabled>Disabled button\n</Button>'}}),ne=new i({props:{disabledClasses:T,disabled:!0,$$slots:{default:[P]},$$scope:{ctx:e}}}),{c:function(){a=l("h4"),t=c("Smelte components"),s=u(),n=l("p"),o=c("Smelte components are built almost exclusively using Tailwind's utility classes\n  keeping CSS bundle size as minimal as possible. UI frameworks are notorious for\n  being hard to customize and we're still looking for appropriate solution given\n  utility-first nature of Tailwind. So for the most part components expose all of\n  their elements' classes as strings like, for instance, Button component has\n  \"disabledClasses\" prop defaulting to"),r=l("br"),z=u(),j=l("span"),I=c("bg-gray-300 text-gray-500 dark:bg-dark-400 elevation-none pointer-events-none hover:bg-gray-300 cursor-default"),A=u(),d(U.$$.fragment),V=u(),G=l("div"),d(N.$$.fragment),R=u(),q=l("p"),H=c('Say you need to adjust that background color, you may the "disabledClasses" prop'),_=l("br"),F=u(),J=l("span"),K=c("bg-gray-100 text-gray-700 dark:bg-dark-100 elevation-none pointer-events-none hover:bg-gray-300 cursor-default"),L=u(),d(M.$$.fragment),O=u(),Q=l("div"),d(W.$$.fragment),X=u(),Y=l("p"),Z=c("This feels bulky to say the least but may still be the case if you need to modify those classes heavily.\n  Same prop also allows you to pass a function which accepts the same string as argument and returns your modified classes string:"),ee=u(),d(ae.$$.fragment),te=u(),se=l("div"),d(ne.$$.fragment),oe=u(),re=l("p"),ie=c("Using this approach Smelte is also able to imply which classes are actually being used\n  even dynamically which helps Purge CSS to get rid of unused classes at build time automatically.\n  Still it feels like this is a rather naive way of customizing components so please create an\n  "),le=l("a"),ce=c("issue"),ue=c(" on Github or "),de=l("a"),fe=c("contact me directly"),me=c("\n  if you have an idea how to improve on this."),this.h()},l:function(e){a=f(e,"H4",{class:!0});var i=m(a);t=g(i,"Smelte components"),i.forEach(p),s=h(e),n=f(e,"P",{});var l=m(n);o=g(l,"Smelte components are built almost exclusively using Tailwind's utility classes\n  keeping CSS bundle size as minimal as possible. UI frameworks are notorious for\n  being hard to customize and we're still looking for appropriate solution given\n  utility-first nature of Tailwind. So for the most part components expose all of\n  their elements' classes as strings like, for instance, Button component has\n  \"disabledClasses\" prop defaulting to"),r=f(l,"BR",{}),z=h(l),j=f(l,"SPAN",{class:!0});var c=m(j);I=g(c,"bg-gray-300 text-gray-500 dark:bg-dark-400 elevation-none pointer-events-none hover:bg-gray-300 cursor-default"),c.forEach(p),l.forEach(p),A=h(e),b(U.$$.fragment,e),V=h(e),G=f(e,"DIV",{class:!0});var u=m(G);b(N.$$.fragment,u),u.forEach(p),R=h(e),q=f(e,"P",{});var d=m(q);H=g(d,'Say you need to adjust that background color, you may the "disabledClasses" prop'),_=f(d,"BR",{}),F=h(d),J=f(d,"SPAN",{class:!0});var y=m(J);K=g(y,"bg-gray-100 text-gray-700 dark:bg-dark-100 elevation-none pointer-events-none hover:bg-gray-300 cursor-default"),y.forEach(p),d.forEach(p),L=h(e),b(M.$$.fragment,e),O=h(e),Q=f(e,"DIV",{class:!0});var $=m(Q);b(W.$$.fragment,$),$.forEach(p),X=h(e),Y=f(e,"P",{});var v=m(Y);Z=g(v,"This feels bulky to say the least but may still be the case if you need to modify those classes heavily.\n  Same prop also allows you to pass a function which accepts the same string as argument and returns your modified classes string:"),v.forEach(p),ee=h(e),b(ae.$$.fragment,e),te=h(e),se=f(e,"DIV",{class:!0});var w=m(se);b(ne.$$.fragment,w),w.forEach(p),oe=h(e),re=f(e,"P",{});var k=m(re);ie=g(k,"Using this approach Smelte is also able to imply which classes are actually being used\n  even dynamically which helps Purge CSS to get rid of unused classes at build time automatically.\n  Still it feels like this is a rather naive way of customizing components so please create an\n  "),le=f(k,"A",{href:!0});var S=m(le);ce=g(S,"issue"),S.forEach(p),ue=g(k," on Github or "),de=f(k,"A",{href:!0});var x=m(de);fe=g(x,"contact me directly"),x.forEach(p),me=g(k,"\n  if you have an idea how to improve on this."),k.forEach(p),this.h()},h:function(){y(a,"class","pb-8"),y(j,"class","code-inline"),y(G,"class","pt-8 pb-16"),y(J,"class","code-inline"),y(Q,"class","pt-8 pb-16"),y(se,"class","pt-8 pb-16"),y(le,"href","https://github.com/matyunya/smelte/issues/new"),y(de,"href","mailto:matyunya@gmail.com")},m:function(e,i){$(e,a,i),v(a,t),$(e,s,i),$(e,n,i),v(n,o),v(n,r),v(n,z),v(n,j),v(j,I),$(e,A,i),w(U,e,i),$(e,V,i),$(e,G,i),w(N,G,null),$(e,R,i),$(e,q,i),v(q,H),v(q,_),v(q,F),v(q,J),v(J,K),$(e,L,i),w(M,e,i),$(e,O,i),$(e,Q,i),w(W,Q,null),$(e,X,i),$(e,Y,i),v(Y,Z),$(e,ee,i),w(ae,e,i),$(e,te,i),$(e,se,i),w(ne,se,null),$(e,oe,i),$(e,re,i),v(re,ie),v(re,le),v(le,ce),v(re,ue),v(re,de),v(de,fe),v(re,me),ge=!0},p:function(e,a){var t=k(a,1)[0],s={};1&t&&(s.$$scope={dirty:t,ctx:e}),N.$set(s);var n={};1&t&&(n.$$scope={dirty:t,ctx:e}),W.$set(n);var o={};1&t&&(o.$$scope={dirty:t,ctx:e}),ne.$set(o)},i:function(e){ge||(S(U.$$.fragment,e),S(N.$$.fragment,e),S(M.$$.fragment,e),S(W.$$.fragment,e),S(ae.$$.fragment,e),S(ne.$$.fragment,e),ge=!0)},o:function(e){x(U.$$.fragment,e),x(N.$$.fragment,e),x(M.$$.fragment,e),x(W.$$.fragment,e),x(ae.$$.fragment,e),x(ne.$$.fragment,e),ge=!1},d:function(e){e&&p(a),e&&p(s),e&&p(n),e&&p(A),C(U,e),e&&p(V),e&&p(G),C(N),e&&p(R),e&&p(q),e&&p(L),C(M,e),e&&p(O),e&&p(Q),C(W),e&&p(X),e&&p(Y),e&&p(ee),C(ae,e),e&&p(te),e&&p(se),C(ne),e&&p(oe),e&&p(re)}}}var T=function(e){return e.replace(/(3|4)00/g,"100")},j=function(i){e(c,o);var l=a(c);function c(e){var a;return t(this,c),a=l.call(this),s(n(a),e,null,z,r,{}),a}return c}();export default j;
  