buildgrid-ui 1.0.0 → 1.1.0-alpha.2

package/dist/buildgrid-ui.umd.js

@@ -0,0 +1,31 @@
+(function(V,q){typeof exports=="object"&&typeof module<"u"?q(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],q):(V=typeof globalThis<"u"?globalThis:V||self,q(V.BuildgridUI={},V.React))})(this,function(V,q){"use strict";function er(r){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(o,t,n.get?n:{enumerable:!0,get:()=>r[t]})}}return o.default=r,Object.freeze(o)}const T=er(q);var be={exports:{}},te={};/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var ke;function rr(){if(ke)return te;ke=1;var r=Symbol.for("react.transitional.element"),o=Symbol.for("react.fragment");function t(n,a,s){var d=null;if(s!==void 0&&(d=""+s),a.key!==void 0&&(d=""+a.key),"key"in a){s={};for(var l in a)l!=="key"&&(s[l]=a[l])}else s=a;return a=s.ref,{$$typeof:r,type:n,key:d,ref:a!==void 0?a:null,props:s}}return te.Fragment=o,te.jsx=t,te.jsxs=t,te}var oe={};/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var Se;function tr(){return Se||(Se=1,process.env.NODE_ENV!=="production"&&function(){function r(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===de?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case X:return"Fragment";case H:return"Portal";case ie:return"Profiler";case le:return"StrictMode";case h:return"Suspense";case Q:return"SuspenseList"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case K:return(e.displayName||"Context")+".Provider";case Z:return(e._context.displayName||"Context")+".Consumer";case B:var i=e.render;return e=e.displayName,e||(e=i.displayName||i.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case I:return i=e.displayName||null,i!==null?i:r(e.type)||"Memo";case D:i=e._payload,e=e._init;try{return r(e(i))}catch{}}return null}function o(e){return""+e}function t(e){try{o(e);var i=!1}catch{i=!0}if(i){i=console;var c=i.error,b=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return c.call(i,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",b),o(e)}}function n(){}function a(){if(fe===0){Ue=console.log,Be=console.info,Le=console.warn,qe=console.error,Je=console.group,Fe=console.groupCollapsed,He=console.groupEnd;var e={configurable:!0,enumerable:!0,value:n,writable:!0};Object.defineProperties(console,{info:e,log:e,warn:e,error:e,group:e,groupCollapsed:e,groupEnd:e})}fe++}function s(){if(fe--,fe===0){var e={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:S({},e,{value:Ue}),info:S({},e,{value:Be}),warn:S({},e,{value:Le}),error:S({},e,{value:qe}),group:S({},e,{value:Je}),groupCollapsed:S({},e,{value:Fe}),groupEnd:S({},e,{value:He})})}0>fe&&console.error("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}function d(e){if(we===void 0)try{throw Error()}catch(c){var i=c.stack.trim().match(/\n( *(at )?)/);we=i&&i[1]||"",Xe=-1<c.stack.indexOf(`
+    at`)?" (<anonymous>)":-1<c.stack.indexOf("@")?"@unknown:0:0":""}return`
+`+we+e+Xe}function l(e,i){if(!e||Ee)return"";var c=Ce.get(e);if(c!==void 0)return c;Ee=!0,c=Error.prepareStackTrace,Error.prepareStackTrace=void 0;var b=null;b=O.H,O.H=null,a();try{var R={DetermineComponentFrameRoot:function(){try{if(i){var Y=function(){throw Error()};if(Object.defineProperty(Y.prototype,"props",{set:function(){throw Error()}}),typeof Reflect=="object"&&Reflect.construct){try{Reflect.construct(Y,[])}catch(G){var ge=G}Reflect.construct(e,[],Y)}else{try{Y.call()}catch(G){ge=G}e.call(Y.prototype)}}else{try{throw Error()}catch(G){ge=G}(Y=e())&&typeof Y.catch=="function"&&Y.catch(function(){})}}catch(G){if(G&&ge&&typeof G.stack=="string")return[G.stack,ge.stack]}return[null,null]}};R.DetermineComponentFrameRoot.displayName="DetermineComponentFrameRoot";var w=Object.getOwnPropertyDescriptor(R.DetermineComponentFrameRoot,"name");w&&w.configurable&&Object.defineProperty(R.DetermineComponentFrameRoot,"name",{value:"DetermineComponentFrameRoot"});var f=R.DetermineComponentFrameRoot(),M=f[0],re=f[1];if(M&&re){var A=M.split(`
+`),L=re.split(`
+`);for(f=w=0;w<A.length&&!A[w].includes("DetermineComponentFrameRoot");)w++;for(;f<L.length&&!L[f].includes("DetermineComponentFrameRoot");)f++;if(w===A.length||f===L.length)for(w=A.length-1,f=L.length-1;1<=w&&0<=f&&A[w]!==L[f];)f--;for(;1<=w&&0<=f;w--,f--)if(A[w]!==L[f]){if(w!==1||f!==1)do if(w--,f--,0>f||A[w]!==L[f]){var pe=`
+`+A[w].replace(" at new "," at ");return e.displayName&&pe.includes("<anonymous>")&&(pe=pe.replace("<anonymous>",e.displayName)),typeof e=="function"&&Ce.set(e,pe),pe}while(1<=w&&0<=f);break}}}finally{Ee=!1,O.H=b,s(),Error.prepareStackTrace=c}return A=(A=e?e.displayName||e.name:"")?d(A):"",typeof e=="function"&&Ce.set(e,A),A}function g(e){if(e==null)return"";if(typeof e=="function"){var i=e.prototype;return l(e,!(!i||!i.isReactComponent))}if(typeof e=="string")return d(e);switch(e){case h:return d("Suspense");case Q:return d("SuspenseList")}if(typeof e=="object")switch(e.$$typeof){case B:return e=l(e.render,!1),e;case I:return g(e.type);case D:i=e._payload,e=e._init;try{return g(e(i))}catch{}}return""}function p(){var e=O.A;return e===null?null:e.getOwner()}function y(e){if(ue.call(e,"key")){var i=Object.getOwnPropertyDescriptor(e,"key").get;if(i&&i.isReactWarning)return!1}return e.key!==void 0}function C(e,i){function c(){Ze||(Ze=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",i))}c.isReactWarning=!0,Object.defineProperty(e,"key",{get:c,configurable:!0})}function E(){var e=r(this.type);return Ke[e]||(Ke[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function N(e,i,c,b,R,w){return c=w.ref,e={$$typeof:z,type:e,key:i,props:w,_owner:R},(c!==void 0?c:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:E}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function j(e,i,c,b,R,w){if(typeof e=="string"||typeof e=="function"||e===X||e===ie||e===le||e===h||e===Q||e===ee||typeof e=="object"&&e!==null&&(e.$$typeof===D||e.$$typeof===I||e.$$typeof===K||e.$$typeof===Z||e.$$typeof===B||e.$$typeof===Ur||e.getModuleId!==void 0)){var f=i.children;if(f!==void 0)if(b)if(xe(f)){for(b=0;b<f.length;b++)x(f[b],e);Object.freeze&&Object.freeze(f)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else x(f,e)}else f="",(e===void 0||typeof e=="object"&&e!==null&&Object.keys(e).length===0)&&(f+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."),e===null?b="null":xe(e)?b="array":e!==void 0&&e.$$typeof===z?(b="<"+(r(e.type)||"Unknown")+" />",f=" Did you accidentally export a JSX literal instead of a component?"):b=typeof e,console.error("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",b,f);if(ue.call(i,"key")){f=r(e);var M=Object.keys(i).filter(function(A){return A!=="key"});b=0<M.length?"{key: someKey, "+M.join(": ..., ")+": ...}":"{key: someKey}",Qe[f+b]||(M=0<M.length?"{"+M.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,b,f,M,f),Qe[f+b]=!0)}if(f=null,c!==void 0&&(t(c),f=""+c),y(i)&&(t(i.key),f=""+i.key),"key"in i){c={};for(var re in i)re!=="key"&&(c[re]=i[re])}else c=i;return f&&C(c,typeof e=="function"?e.displayName||e.name||"Unknown":e),N(e,f,w,R,p(),c)}function x(e,i){if(typeof e=="object"&&e&&e.$$typeof!==Br){if(xe(e))for(var c=0;c<e.length;c++){var b=e[c];m(b)&&k(b,i)}else if(m(e))e._store&&(e._store.validated=1);else if(e===null||typeof e!="object"?c=null:(c=ce&&e[ce]||e["@@iterator"],c=typeof c=="function"?c:null),typeof c=="function"&&c!==e.entries&&(c=c.call(e),c!==e))for(;!(e=c.next()).done;)m(e.value)&&k(e.value,i)}}function m(e){return typeof e=="object"&&e!==null&&e.$$typeof===z}function k(e,i){if(e._store&&!e._store.validated&&e.key==null&&(e._store.validated=1,i=_(i),!De[i])){De[i]=!0;var c="";e&&e._owner!=null&&e._owner!==p()&&(c=null,typeof e._owner.tag=="number"?c=r(e._owner.type):typeof e._owner.name=="string"&&(c=e._owner.name),c=" It was passed a child from "+c+".");var b=O.getCurrentStack;O.getCurrentStack=function(){var R=g(e.type);return b&&(R+=b()||""),R},console.error('Each child in a list should have a unique "key" prop.%s%s See https://react.dev/link/warning-keys for more information.',i,c),O.getCurrentStack=b}}function _(e){var i="",c=p();return c&&(c=r(c.type))&&(i=`
+
+Check the render method of \``+c+"`."),i||(e=r(e))&&(i=`
+
+Check the top-level render call using <`+e+">."),i}var U=q,z=Symbol.for("react.transitional.element"),H=Symbol.for("react.portal"),X=Symbol.for("react.fragment"),le=Symbol.for("react.strict_mode"),ie=Symbol.for("react.profiler"),Z=Symbol.for("react.consumer"),K=Symbol.for("react.context"),B=Symbol.for("react.forward_ref"),h=Symbol.for("react.suspense"),Q=Symbol.for("react.suspense_list"),I=Symbol.for("react.memo"),D=Symbol.for("react.lazy"),ee=Symbol.for("react.offscreen"),ce=Symbol.iterator,de=Symbol.for("react.client.reference"),O=U.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,ue=Object.prototype.hasOwnProperty,S=Object.assign,Ur=Symbol.for("react.client.reference"),xe=Array.isArray,fe=0,Ue,Be,Le,qe,Je,Fe,He;n.__reactDisabledLog=!0;var we,Xe,Ee=!1,Ce=new(typeof WeakMap=="function"?WeakMap:Map),Br=Symbol.for("react.client.reference"),Ze,Ke={},Qe={},De={};oe.Fragment=X,oe.jsx=function(e,i,c,b,R){return j(e,i,c,!1,b,R)},oe.jsxs=function(e,i,c,b,R){return j(e,i,c,!0,b,R)}}()),oe}var Re;function or(){return Re||(Re=1,process.env.NODE_ENV==="production"?be.exports=rr():be.exports=tr()),be.exports}var ne=or();function je(r,o){if(typeof r=="function")return r(o);r!=null&&(r.current=o)}function nr(...r){return o=>{let t=!1;const n=r.map(a=>{const s=je(a,o);return!t&&typeof s=="function"&&(t=!0),s});if(t)return()=>{for(let a=0;a<n.length;a++){const s=n[a];typeof s=="function"?s():je(r[a],null)}}}}var Ae=T.forwardRef((r,o)=>{const{children:t,...n}=r,a=T.Children.toArray(t),s=a.find(ar);if(s){const d=s.props.children,l=a.map(g=>g===s?T.Children.count(d)>1?T.Children.only(null):T.isValidElement(d)?d.props.children:null:g);return ne.jsx(me,{...n,ref:o,children:T.isValidElement(d)?T.cloneElement(d,void 0,l):null})}return ne.jsx(me,{...n,ref:o,children:t})});Ae.displayName="Slot";var me=T.forwardRef((r,o)=>{const{children:t,...n}=r;if(T.isValidElement(t)){const a=ir(t);return T.cloneElement(t,{...lr(n,t.props),ref:o?nr(o,a):a})}return T.Children.count(t)>1?T.Children.only(null):null});me.displayName="SlotClone";var sr=({children:r})=>ne.jsx(ne.Fragment,{children:r});function ar(r){return T.isValidElement(r)&&r.type===sr}function lr(r,o){const t={...o};for(const n in o){const a=r[n],s=o[n];/^on[A-Z]/.test(n)?a&&s?t[n]=(...l)=>{s(...l),a(...l)}:a&&(t[n]=a):n==="style"?t[n]={...a,...s}:n==="className"&&(t[n]=[a,s].filter(Boolean).join(" "))}return{...r,...t}}function ir(r){var n,a;let o=(n=Object.getOwnPropertyDescriptor(r.props,"ref"))==null?void 0:n.get,t=o&&"isReactWarning"in o&&o.isReactWarning;return t?r.ref:(o=(a=Object.getOwnPropertyDescriptor(r,"ref"))==null?void 0:a.get,t=o&&"isReactWarning"in o&&o.isReactWarning,t?r.props.ref:r.props.ref||r.ref)}function Te(r){var o,t,n="";if(typeof r=="string"||typeof r=="number")n+=r;else if(typeof r=="object")if(Array.isArray(r)){var a=r.length;for(o=0;o<a;o++)r[o]&&(t=Te(r[o]))&&(n&&(n+=" "),n+=t)}else for(t in r)r[t]&&(n&&(n+=" "),n+=t);return n}function _e(){for(var r,o,t=0,n="",a=arguments.length;t<a;t++)(r=arguments[t])&&(o=Te(r))&&(n&&(n+=" "),n+=o);return n}const Ne=r=>typeof r=="boolean"?`${r}`:r===0?"0":r,Oe=_e,cr=(r,o)=>t=>{var n;if((o==null?void 0:o.variants)==null)return Oe(r,t==null?void 0:t.class,t==null?void 0:t.className);const{variants:a,defaultVariants:s}=o,d=Object.keys(a).map(p=>{const y=t==null?void 0:t[p],C=s==null?void 0:s[p];if(y===null)return null;const E=Ne(y)||Ne(C);return a[p][E]}),l=t&&Object.entries(t).reduce((p,y)=>{let[C,E]=y;return E===void 0||(p[C]=E),p},{}),g=o==null||(n=o.compoundVariants)===null||n===void 0?void 0:n.reduce((p,y)=>{let{class:C,className:E,...N}=y;return Object.entries(N).every(j=>{let[x,m]=j;return Array.isArray(m)?m.includes({...s,...l}[x]):{...s,...l}[x]===m})?[...p,C,E]:p},[]);return Oe(r,d,g,t==null?void 0:t.class,t==null?void 0:t.className)},he="-",dr=r=>{const o=fr(r),{conflictingClassGroups:t,conflictingClassGroupModifiers:n}=r;return{getClassGroupId:d=>{const l=d.split(he);return l[0]===""&&l.length!==1&&l.shift(),ze(l,o)||ur(d)},getConflictingClassGroupIds:(d,l)=>{const g=t[d]||[];return l&&n[d]?[...g,...n[d]]:g}}},ze=(r,o)=>{var d;if(r.length===0)return o.classGroupId;const t=r[0],n=o.nextPart.get(t),a=n?ze(r.slice(1),n):void 0;if(a)return a;if(o.validators.length===0)return;const s=r.join(he);return(d=o.validators.find(({validator:l})=>l(s)))==null?void 0:d.classGroupId},Pe=/^\[(.+)\]$/,ur=r=>{if(Pe.test(r)){const o=Pe.exec(r)[1],t=o==null?void 0:o.substring(0,o.indexOf(":"));if(t)return"arbitrary.."+t}},fr=r=>{const{theme:o,prefix:t}=r,n={nextPart:new Map,validators:[]};return br(Object.entries(r.classGroups),t).forEach(([s,d])=>{ve(d,n,s,o)}),n},ve=(r,o,t,n)=>{r.forEach(a=>{if(typeof a=="string"){const s=a===""?o:Me(o,a);s.classGroupId=t;return}if(typeof a=="function"){if(pr(a)){ve(a(n),o,t,n);return}o.validators.push({validator:a,classGroupId:t});return}Object.entries(a).forEach(([s,d])=>{ve(d,Me(o,s),t,n)})})},Me=(r,o)=>{let t=r;return o.split(he).forEach(n=>{t.nextPart.has(n)||t.nextPart.set(n,{nextPart:new Map,validators:[]}),t=t.nextPart.get(n)}),t},pr=r=>r.isThemeGetter,br=(r,o)=>o?r.map(([t,n])=>{const a=n.map(s=>typeof s=="string"?o+s:typeof s=="object"?Object.fromEntries(Object.entries(s).map(([d,l])=>[o+d,l])):s);return[t,a]}):r,gr=r=>{if(r<1)return{get:()=>{},set:()=>{}};let o=0,t=new Map,n=new Map;const a=(s,d)=>{t.set(s,d),o++,o>r&&(o=0,n=t,t=new Map)};return{get(s){let d=t.get(s);if(d!==void 0)return d;if((d=n.get(s))!==void 0)return a(s,d),d},set(s,d){t.has(s)?t.set(s,d):a(s,d)}}},Ge="!",mr=r=>{const{separator:o,experimentalParseClassName:t}=r,n=o.length===1,a=o[0],s=o.length,d=l=>{const g=[];let p=0,y=0,C;for(let m=0;m<l.length;m++){let k=l[m];if(p===0){if(k===a&&(n||l.slice(m,m+s)===o)){g.push(l.slice(y,m)),y=m+s;continue}if(k==="/"){C=m;continue}}k==="["?p++:k==="]"&&p--}const E=g.length===0?l:l.substring(y),N=E.startsWith(Ge),j=N?E.substring(1):E,x=C&&C>y?C-y:void 0;return{modifiers:g,hasImportantModifier:N,baseClassName:j,maybePostfixModifierPosition:x}};return t?l=>t({className:l,parseClassName:d}):d},hr=r=>{if(r.length<=1)return r;const o=[];let t=[];return r.forEach(n=>{n[0]==="["?(o.push(...t.sort(),n),t=[]):t.push(n)}),o.push(...t.sort()),o},vr=r=>({cache:gr(r.cacheSize),parseClassName:mr(r),...dr(r)}),yr=/\s+/,xr=(r,o)=>{const{parseClassName:t,getClassGroupId:n,getConflictingClassGroupIds:a}=o,s=[],d=r.trim().split(yr);let l="";for(let g=d.length-1;g>=0;g-=1){const p=d[g],{modifiers:y,hasImportantModifier:C,baseClassName:E,maybePostfixModifierPosition:N}=t(p);let j=!!N,x=n(j?E.substring(0,N):E);if(!x){if(!j){l=p+(l.length>0?" "+l:l);continue}if(x=n(E),!x){l=p+(l.length>0?" "+l:l);continue}j=!1}const m=hr(y).join(":"),k=C?m+Ge:m,_=k+x;if(s.includes(_))continue;s.push(_);const U=a(x,j);for(let z=0;z<U.length;++z){const H=U[z];s.push(k+H)}l=p+(l.length>0?" "+l:l)}return l};function wr(){let r=0,o,t,n="";for(;r<arguments.length;)(o=arguments[r++])&&(t=Ve(o))&&(n&&(n+=" "),n+=t);return n}const Ve=r=>{if(typeof r=="string")return r;let o,t="";for(let n=0;n<r.length;n++)r[n]&&(o=Ve(r[n]))&&(t&&(t+=" "),t+=o);return t};function Er(r,...o){let t,n,a,s=d;function d(g){const p=o.reduce((y,C)=>C(y),r());return t=vr(p),n=t.cache.get,a=t.cache.set,s=l,l(g)}function l(g){const p=n(g);if(p)return p;const y=xr(g,t);return a(g,y),y}return function(){return s(wr.apply(null,arguments))}}const v=r=>{const o=t=>t[r]||[];return o.isThemeGetter=!0,o},We=/^\[(?:([a-z-]+):)?(.+)\]$/i,Cr=/^\d+\/\d+$/,kr=new Set(["px","full","screen"]),Sr=/^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/,Rr=/\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/,jr=/^(rgba?|hsla?|hwb|(ok)?(lab|lch))\(.+\)$/,Ar=/^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/,Tr=/^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/,P=r=>J(r)||kr.has(r)||Cr.test(r),W=r=>F(r,"length",Vr),J=r=>!!r&&!Number.isNaN(Number(r)),ye=r=>F(r,"number",J),se=r=>!!r&&Number.isInteger(Number(r)),_r=r=>r.endsWith("%")&&J(r.slice(0,-1)),u=r=>We.test(r),$=r=>Sr.test(r),Nr=new Set(["length","size","percentage"]),Or=r=>F(r,Nr,$e),zr=r=>F(r,"position",$e),Pr=new Set(["image","url"]),Mr=r=>F(r,Pr,$r),Gr=r=>F(r,"",Wr),ae=()=>!0,F=(r,o,t)=>{const n=We.exec(r);return n?n[1]?typeof o=="string"?n[1]===o:o.has(n[1]):t(n[2]):!1},Vr=r=>Rr.test(r)&&!jr.test(r),$e=()=>!1,Wr=r=>Ar.test(r),$r=r=>Tr.test(r),Ir=Er(()=>{const r=v("colors"),o=v("spacing"),t=v("blur"),n=v("brightness"),a=v("borderColor"),s=v("borderRadius"),d=v("borderSpacing"),l=v("borderWidth"),g=v("contrast"),p=v("grayscale"),y=v("hueRotate"),C=v("invert"),E=v("gap"),N=v("gradientColorStops"),j=v("gradientColorStopPositions"),x=v("inset"),m=v("margin"),k=v("opacity"),_=v("padding"),U=v("saturate"),z=v("scale"),H=v("sepia"),X=v("skew"),le=v("space"),ie=v("translate"),Z=()=>["auto","contain","none"],K=()=>["auto","hidden","clip","visible","scroll"],B=()=>["auto",u,o],h=()=>[u,o],Q=()=>["",P,W],I=()=>["auto",J,u],D=()=>["bottom","center","left","left-bottom","left-top","right","right-bottom","right-top","top"],ee=()=>["solid","dashed","dotted","double","none"],ce=()=>["normal","multiply","screen","overlay","darken","lighten","color-dodge","color-burn","hard-light","soft-light","difference","exclusion","hue","saturation","color","luminosity"],de=()=>["start","end","center","between","around","evenly","stretch"],O=()=>["","0",u],ue=()=>["auto","avoid","all","avoid-page","page","left","right","column"],S=()=>[J,u];return{cacheSize:500,separator:":",theme:{colors:[ae],spacing:[P,W],blur:["none","",$,u],brightness:S(),borderColor:[r],borderRadius:["none","","full",$,u],borderSpacing:h(),borderWidth:Q(),contrast:S(),grayscale:O(),hueRotate:S(),invert:O(),gap:h(),gradientColorStops:[r],gradientColorStopPositions:[_r,W],inset:B(),margin:B(),opacity:S(),padding:h(),saturate:S(),scale:S(),sepia:O(),skew:S(),space:h(),translate:h()},classGroups:{aspect:[{aspect:["auto","square","video",u]}],container:["container"],columns:[{columns:[$]}],"break-after":[{"break-after":ue()}],"break-before":[{"break-before":ue()}],"break-inside":[{"break-inside":["auto","avoid","avoid-page","avoid-column"]}],"box-decoration":[{"box-decoration":["slice","clone"]}],box:[{box:["border","content"]}],display:["block","inline-block","inline","flex","inline-flex","table","inline-table","table-caption","table-cell","table-column","table-column-group","table-footer-group","table-header-group","table-row-group","table-row","flow-root","grid","inline-grid","contents","list-item","hidden"],float:[{float:["right","left","none","start","end"]}],clear:[{clear:["left","right","both","none","start","end"]}],isolation:["isolate","isolation-auto"],"object-fit":[{object:["contain","cover","fill","none","scale-down"]}],"object-position":[{object:[...D(),u]}],overflow:[{overflow:K()}],"overflow-x":[{"overflow-x":K()}],"overflow-y":[{"overflow-y":K()}],overscroll:[{overscroll:Z()}],"overscroll-x":[{"overscroll-x":Z()}],"overscroll-y":[{"overscroll-y":Z()}],position:["static","fixed","absolute","relative","sticky"],inset:[{inset:[x]}],"inset-x":[{"inset-x":[x]}],"inset-y":[{"inset-y":[x]}],start:[{start:[x]}],end:[{end:[x]}],top:[{top:[x]}],right:[{right:[x]}],bottom:[{bottom:[x]}],left:[{left:[x]}],visibility:["visible","invisible","collapse"],z:[{z:["auto",se,u]}],basis:[{basis:B()}],"flex-direction":[{flex:["row","row-reverse","col","col-reverse"]}],"flex-wrap":[{flex:["wrap","wrap-reverse","nowrap"]}],flex:[{flex:["1","auto","initial","none",u]}],grow:[{grow:O()}],shrink:[{shrink:O()}],order:[{order:["first","last","none",se,u]}],"grid-cols":[{"grid-cols":[ae]}],"col-start-end":[{col:["auto",{span:["full",se,u]},u]}],"col-start":[{"col-start":I()}],"col-end":[{"col-end":I()}],"grid-rows":[{"grid-rows":[ae]}],"row-start-end":[{row:["auto",{span:[se,u]},u]}],"row-start":[{"row-start":I()}],"row-end":[{"row-end":I()}],"grid-flow":[{"grid-flow":["row","col","dense","row-dense","col-dense"]}],"auto-cols":[{"auto-cols":["auto","min","max","fr",u]}],"auto-rows":[{"auto-rows":["auto","min","max","fr",u]}],gap:[{gap:[E]}],"gap-x":[{"gap-x":[E]}],"gap-y":[{"gap-y":[E]}],"justify-content":[{justify:["normal",...de()]}],"justify-items":[{"justify-items":["start","end","center","stretch"]}],"justify-self":[{"justify-self":["auto","start","end","center","stretch"]}],"align-content":[{content:["normal",...de(),"baseline"]}],"align-items":[{items:["start","end","center","baseline","stretch"]}],"align-self":[{self:["auto","start","end","center","stretch","baseline"]}],"place-content":[{"place-content":[...de(),"baseline"]}],"place-items":[{"place-items":["start","end","center","baseline","stretch"]}],"place-self":[{"place-self":["auto","start","end","center","stretch"]}],p:[{p:[_]}],px:[{px:[_]}],py:[{py:[_]}],ps:[{ps:[_]}],pe:[{pe:[_]}],pt:[{pt:[_]}],pr:[{pr:[_]}],pb:[{pb:[_]}],pl:[{pl:[_]}],m:[{m:[m]}],mx:[{mx:[m]}],my:[{my:[m]}],ms:[{ms:[m]}],me:[{me:[m]}],mt:[{mt:[m]}],mr:[{mr:[m]}],mb:[{mb:[m]}],ml:[{ml:[m]}],"space-x":[{"space-x":[le]}],"space-x-reverse":["space-x-reverse"],"space-y":[{"space-y":[le]}],"space-y-reverse":["space-y-reverse"],w:[{w:["auto","min","max","fit","svw","lvw","dvw",u,o]}],"min-w":[{"min-w":[u,o,"min","max","fit"]}],"max-w":[{"max-w":[u,o,"none","full","min","max","fit","prose",{screen:[$]},$]}],h:[{h:[u,o,"auto","min","max","fit","svh","lvh","dvh"]}],"min-h":[{"min-h":[u,o,"min","max","fit","svh","lvh","dvh"]}],"max-h":[{"max-h":[u,o,"min","max","fit","svh","lvh","dvh"]}],size:[{size:[u,o,"auto","min","max","fit"]}],"font-size":[{text:["base",$,W]}],"font-smoothing":["antialiased","subpixel-antialiased"],"font-style":["italic","not-italic"],"font-weight":[{font:["thin","extralight","light","normal","medium","semibold","bold","extrabold","black",ye]}],"font-family":[{font:[ae]}],"fvn-normal":["normal-nums"],"fvn-ordinal":["ordinal"],"fvn-slashed-zero":["slashed-zero"],"fvn-figure":["lining-nums","oldstyle-nums"],"fvn-spacing":["proportional-nums","tabular-nums"],"fvn-fraction":["diagonal-fractions","stacked-fractions"],tracking:[{tracking:["tighter","tight","normal","wide","wider","widest",u]}],"line-clamp":[{"line-clamp":["none",J,ye]}],leading:[{leading:["none","tight","snug","normal","relaxed","loose",P,u]}],"list-image":[{"list-image":["none",u]}],"list-style-type":[{list:["none","disc","decimal",u]}],"list-style-position":[{list:["inside","outside"]}],"placeholder-color":[{placeholder:[r]}],"placeholder-opacity":[{"placeholder-opacity":[k]}],"text-alignment":[{text:["left","center","right","justify","start","end"]}],"text-color":[{text:[r]}],"text-opacity":[{"text-opacity":[k]}],"text-decoration":["underline","overline","line-through","no-underline"],"text-decoration-style":[{decoration:[...ee(),"wavy"]}],"text-decoration-thickness":[{decoration:["auto","from-font",P,W]}],"underline-offset":[{"underline-offset":["auto",P,u]}],"text-decoration-color":[{decoration:[r]}],"text-transform":["uppercase","lowercase","capitalize","normal-case"],"text-overflow":["truncate","text-ellipsis","text-clip"],"text-wrap":[{text:["wrap","nowrap","balance","pretty"]}],indent:[{indent:h()}],"vertical-align":[{align:["baseline","top","middle","bottom","text-top","text-bottom","sub","super",u]}],whitespace:[{whitespace:["normal","nowrap","pre","pre-line","pre-wrap","break-spaces"]}],break:[{break:["normal","words","all","keep"]}],hyphens:[{hyphens:["none","manual","auto"]}],content:[{content:["none",u]}],"bg-attachment":[{bg:["fixed","local","scroll"]}],"bg-clip":[{"bg-clip":["border","padding","content","text"]}],"bg-opacity":[{"bg-opacity":[k]}],"bg-origin":[{"bg-origin":["border","padding","content"]}],"bg-position":[{bg:[...D(),zr]}],"bg-repeat":[{bg:["no-repeat",{repeat:["","x","y","round","space"]}]}],"bg-size":[{bg:["auto","cover","contain",Or]}],"bg-image":[{bg:["none",{"gradient-to":["t","tr","r","br","b","bl","l","tl"]},Mr]}],"bg-color":[{bg:[r]}],"gradient-from-pos":[{from:[j]}],"gradient-via-pos":[{via:[j]}],"gradient-to-pos":[{to:[j]}],"gradient-from":[{from:[N]}],"gradient-via":[{via:[N]}],"gradient-to":[{to:[N]}],rounded:[{rounded:[s]}],"rounded-s":[{"rounded-s":[s]}],"rounded-e":[{"rounded-e":[s]}],"rounded-t":[{"rounded-t":[s]}],"rounded-r":[{"rounded-r":[s]}],"rounded-b":[{"rounded-b":[s]}],"rounded-l":[{"rounded-l":[s]}],"rounded-ss":[{"rounded-ss":[s]}],"rounded-se":[{"rounded-se":[s]}],"rounded-ee":[{"rounded-ee":[s]}],"rounded-es":[{"rounded-es":[s]}],"rounded-tl":[{"rounded-tl":[s]}],"rounded-tr":[{"rounded-tr":[s]}],"rounded-br":[{"rounded-br":[s]}],"rounded-bl":[{"rounded-bl":[s]}],"border-w":[{border:[l]}],"border-w-x":[{"border-x":[l]}],"border-w-y":[{"border-y":[l]}],"border-w-s":[{"border-s":[l]}],"border-w-e":[{"border-e":[l]}],"border-w-t":[{"border-t":[l]}],"border-w-r":[{"border-r":[l]}],"border-w-b":[{"border-b":[l]}],"border-w-l":[{"border-l":[l]}],"border-opacity":[{"border-opacity":[k]}],"border-style":[{border:[...ee(),"hidden"]}],"divide-x":[{"divide-x":[l]}],"divide-x-reverse":["divide-x-reverse"],"divide-y":[{"divide-y":[l]}],"divide-y-reverse":["divide-y-reverse"],"divide-opacity":[{"divide-opacity":[k]}],"divide-style":[{divide:ee()}],"border-color":[{border:[a]}],"border-color-x":[{"border-x":[a]}],"border-color-y":[{"border-y":[a]}],"border-color-s":[{"border-s":[a]}],"border-color-e":[{"border-e":[a]}],"border-color-t":[{"border-t":[a]}],"border-color-r":[{"border-r":[a]}],"border-color-b":[{"border-b":[a]}],"border-color-l":[{"border-l":[a]}],"divide-color":[{divide:[a]}],"outline-style":[{outline:["",...ee()]}],"outline-offset":[{"outline-offset":[P,u]}],"outline-w":[{outline:[P,W]}],"outline-color":[{outline:[r]}],"ring-w":[{ring:Q()}],"ring-w-inset":["ring-inset"],"ring-color":[{ring:[r]}],"ring-opacity":[{"ring-opacity":[k]}],"ring-offset-w":[{"ring-offset":[P,W]}],"ring-offset-color":[{"ring-offset":[r]}],shadow:[{shadow:["","inner","none",$,Gr]}],"shadow-color":[{shadow:[ae]}],opacity:[{opacity:[k]}],"mix-blend":[{"mix-blend":[...ce(),"plus-lighter","plus-darker"]}],"bg-blend":[{"bg-blend":ce()}],filter:[{filter:["","none"]}],blur:[{blur:[t]}],brightness:[{brightness:[n]}],contrast:[{contrast:[g]}],"drop-shadow":[{"drop-shadow":["","none",$,u]}],grayscale:[{grayscale:[p]}],"hue-rotate":[{"hue-rotate":[y]}],invert:[{invert:[C]}],saturate:[{saturate:[U]}],sepia:[{sepia:[H]}],"backdrop-filter":[{"backdrop-filter":["","none"]}],"backdrop-blur":[{"backdrop-blur":[t]}],"backdrop-brightness":[{"backdrop-brightness":[n]}],"backdrop-contrast":[{"backdrop-contrast":[g]}],"backdrop-grayscale":[{"backdrop-grayscale":[p]}],"backdrop-hue-rotate":[{"backdrop-hue-rotate":[y]}],"backdrop-invert":[{"backdrop-invert":[C]}],"backdrop-opacity":[{"backdrop-opacity":[k]}],"backdrop-saturate":[{"backdrop-saturate":[U]}],"backdrop-sepia":[{"backdrop-sepia":[H]}],"border-collapse":[{border:["collapse","separate"]}],"border-spacing":[{"border-spacing":[d]}],"border-spacing-x":[{"border-spacing-x":[d]}],"border-spacing-y":[{"border-spacing-y":[d]}],"table-layout":[{table:["auto","fixed"]}],caption:[{caption:["top","bottom"]}],transition:[{transition:["none","all","","colors","opacity","shadow","transform",u]}],duration:[{duration:S()}],ease:[{ease:["linear","in","out","in-out",u]}],delay:[{delay:S()}],animate:[{animate:["none","spin","ping","pulse","bounce",u]}],transform:[{transform:["","gpu","none"]}],scale:[{scale:[z]}],"scale-x":[{"scale-x":[z]}],"scale-y":[{"scale-y":[z]}],rotate:[{rotate:[se,u]}],"translate-x":[{"translate-x":[ie]}],"translate-y":[{"translate-y":[ie]}],"skew-x":[{"skew-x":[X]}],"skew-y":[{"skew-y":[X]}],"transform-origin":[{origin:["center","top","top-right","right","bottom-right","bottom","bottom-left","left","top-left",u]}],accent:[{accent:["auto",r]}],appearance:[{appearance:["none","auto"]}],cursor:[{cursor:["auto","default","pointer","wait","text","move","help","not-allowed","none","context-menu","progress","cell","crosshair","vertical-text","alias","copy","no-drop","grab","grabbing","all-scroll","col-resize","row-resize","n-resize","e-resize","s-resize","w-resize","ne-resize","nw-resize","se-resize","sw-resize","ew-resize","ns-resize","nesw-resize","nwse-resize","zoom-in","zoom-out",u]}],"caret-color":[{caret:[r]}],"pointer-events":[{"pointer-events":["none","auto"]}],resize:[{resize:["none","y","x",""]}],"scroll-behavior":[{scroll:["auto","smooth"]}],"scroll-m":[{"scroll-m":h()}],"scroll-mx":[{"scroll-mx":h()}],"scroll-my":[{"scroll-my":h()}],"scroll-ms":[{"scroll-ms":h()}],"scroll-me":[{"scroll-me":h()}],"scroll-mt":[{"scroll-mt":h()}],"scroll-mr":[{"scroll-mr":h()}],"scroll-mb":[{"scroll-mb":h()}],"scroll-ml":[{"scroll-ml":h()}],"scroll-p":[{"scroll-p":h()}],"scroll-px":[{"scroll-px":h()}],"scroll-py":[{"scroll-py":h()}],"scroll-ps":[{"scroll-ps":h()}],"scroll-pe":[{"scroll-pe":h()}],"scroll-pt":[{"scroll-pt":h()}],"scroll-pr":[{"scroll-pr":h()}],"scroll-pb":[{"scroll-pb":h()}],"scroll-pl":[{"scroll-pl":h()}],"snap-align":[{snap:["start","end","center","align-none"]}],"snap-stop":[{snap:["normal","always"]}],"snap-type":[{snap:["none","x","y","both"]}],"snap-strictness":[{snap:["mandatory","proximity"]}],touch:[{touch:["auto","none","manipulation"]}],"touch-x":[{"touch-pan":["x","left","right"]}],"touch-y":[{"touch-pan":["y","up","down"]}],"touch-pz":["touch-pinch-zoom"],select:[{select:["none","text","all","auto"]}],"will-change":[{"will-change":["auto","scroll","contents","transform",u]}],fill:[{fill:[r,"none"]}],"stroke-w":[{stroke:[P,W,ye]}],stroke:[{stroke:[r,"none"]}],sr:["sr-only","not-sr-only"],"forced-color-adjust":[{"forced-color-adjust":["auto","none"]}]},conflictingClassGroups:{overflow:["overflow-x","overflow-y"],overscroll:["overscroll-x","overscroll-y"],inset:["inset-x","inset-y","start","end","top","right","bottom","left"],"inset-x":["right","left"],"inset-y":["top","bottom"],flex:["basis","grow","shrink"],gap:["gap-x","gap-y"],p:["px","py","ps","pe","pt","pr","pb","pl"],px:["pr","pl"],py:["pt","pb"],m:["mx","my","ms","me","mt","mr","mb","ml"],mx:["mr","ml"],my:["mt","mb"],size:["w","h"],"font-size":["leading"],"fvn-normal":["fvn-ordinal","fvn-slashed-zero","fvn-figure","fvn-spacing","fvn-fraction"],"fvn-ordinal":["fvn-normal"],"fvn-slashed-zero":["fvn-normal"],"fvn-figure":["fvn-normal"],"fvn-spacing":["fvn-normal"],"fvn-fraction":["fvn-normal"],"line-clamp":["display","overflow"],rounded:["rounded-s","rounded-e","rounded-t","rounded-r","rounded-b","rounded-l","rounded-ss","rounded-se","rounded-ee","rounded-es","rounded-tl","rounded-tr","rounded-br","rounded-bl"],"rounded-s":["rounded-ss","rounded-es"],"rounded-e":["rounded-se","rounded-ee"],"rounded-t":["rounded-tl","rounded-tr"],"rounded-r":["rounded-tr","rounded-br"],"rounded-b":["rounded-br","rounded-bl"],"rounded-l":["rounded-tl","rounded-bl"],"border-spacing":["border-spacing-x","border-spacing-y"],"border-w":["border-w-s","border-w-e","border-w-t","border-w-r","border-w-b","border-w-l"],"border-w-x":["border-w-r","border-w-l"],"border-w-y":["border-w-t","border-w-b"],"border-color":["border-color-s","border-color-e","border-color-t","border-color-r","border-color-b","border-color-l"],"border-color-x":["border-color-r","border-color-l"],"border-color-y":["border-color-t","border-color-b"],"scroll-m":["scroll-mx","scroll-my","scroll-ms","scroll-me","scroll-mt","scroll-mr","scroll-mb","scroll-ml"],"scroll-mx":["scroll-mr","scroll-ml"],"scroll-my":["scroll-mt","scroll-mb"],"scroll-p":["scroll-px","scroll-py","scroll-ps","scroll-pe","scroll-pt","scroll-pr","scroll-pb","scroll-pl"],"scroll-px":["scroll-pr","scroll-pl"],"scroll-py":["scroll-pt","scroll-pb"],touch:["touch-x","touch-y","touch-pz"],"touch-x":["touch"],"touch-y":["touch"],"touch-pz":["touch"]},conflictingClassGroupModifiers:{"font-size":["leading"]}}});function Yr(...r){return Ir(_e(r))}const Ie=cr("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",{variants:{variant:{default:"bg-primary text-primary-foreground shadow hover:bg-primary/90",destructive:"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",outline:"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",secondary:"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",ghost:"hover:bg-accent hover:text-accent-foreground",link:"text-primary underline-offset-4 hover:underline"},size:{default:"h-9 px-4 py-2",sm:"h-8 rounded-md px-3 text-xs",lg:"h-10 rounded-md px-8",xl:"h-12 rounded-md px-10 text-xl",icon:"h-9 w-9"}},defaultVariants:{variant:"default",size:"default"}}),Ye=T.forwardRef(({className:r,variant:o,size:t,asChild:n=!1,...a},s)=>{const d=n?Ae:"button";return ne.jsx(d,{className:Yr(Ie({variant:o,size:t,className:r})),ref:s,...a})});Ye.displayName="Button",V.Button=Ye,V.buttonVariants=Ie,Object.defineProperty(V,Symbol.toStringTag,{value:"Module"})});

package/dist/components/button/Button.d.ts

@@ -0,0 +1,11 @@
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
+    size?: "default" | "sm" | "lg" | "xl" | "icon" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { Button, buttonVariants };

package/dist/components/button/index.d.ts

@@ -0,0 +1 @@
+export * from "./Button";

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from "./components/button";

package/dist/lib/utils/cn.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/lib/utils.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;

package/package.json

@@ -1,25 +1,40 @@
 {
   "name": "buildgrid-ui",
-  "version": "1.0.0",
+  "version": "1.1.0-alpha.2",
+  "publishConfig": {
+    "access": "public"
+  },
   "main": "dist/buildgrid-ui.umd.js",
   "module": "dist/buildgrid-ui.esm.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "vite build && npm run build:types",
+    "build:types": "tsc --emitDeclarationOnly",
+    "build:link": "npm run build && npm link",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "release": "semantic-release"
+    "release": "semantic-release",
+    "prepublishOnly": "npm run build"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "description": "",
   "dependencies": {
+    "@radix-ui/react-slot": "^1.1.1",
     "@shadcn/ui": "^0.0.4",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.469.0",
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss-animate": "^1.0.7",
     "vite": "^6.0.6"
   },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.3",
     "@commitlint/cli": "^19.6.1",
@@ -36,11 +51,15 @@
     "@storybook/react": "^8.4.7",
     "@storybook/react-vite": "^8.4.7",
     "@storybook/test": "^8.4.7",
+    "@types/node": "^22.10.3",
     "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
     "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.20",
     "husky": "^9.1.7",
     "postcss": "^8.4.49",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "semantic-release": "^24.2.0",
     "storybook": "^8.4.7",
     "tailwindcss": "^3.4.17",

package/src/components/button/Button.stories.tsx

@@ -1,6 +1,7 @@
+import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 
-import Button from "./Button";
+import { Button, ButtonProps } from "./Button";
 
 const meta: Meta<typeof Button> = {
   component: Button,
@@ -9,8 +10,19 @@ const meta: Meta<typeof Button> = {
 export default meta;
 type Story = StoryObj<typeof Button>;
 
-export const Primary: Story = {
+const Template = (args: ButtonProps) => {
+  return (
+    <div style={{ padding: "10px" }}>
+      <Button>{args.children}</Button>
+    </div>
+  );
+};
+
+export const Default: Story = {
+  render: Template.bind({}),
   args: {
-    label: "Button example",
+    children: "Primary Button",
+    variant: "default",
+    size: "default",
   },
 };

package/src/components/button/Button.tsx

@@ -1,17 +1,57 @@
-import React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { cn } from "../../lib/utils/cn";
 
-export interface ButtonProps {
-  label: string;
-  onClick?: () => void;
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        xl: "h-12 rounded-md px-10 text-xl",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
 }
 
-const Button: React.FC<ButtonProps> = ({ label, onClick }) => (
-  <button
-    onClick={onClick}
-    className="px-4 py-2 bg-blue-500 text-white rounded"
-  >
-    {label}
-  </button>
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
 );
+Button.displayName = "Button";
 
-export default Button;
+export { Button, buttonVariants };

package/src/components/button/index.ts

@@ -1 +1 @@
-export * from ".";
+export * from "./Button";

package/src/index.ts

@@ -1 +1 @@
-export { default as Button } from "./components/button/Button";
+export * from "./components/button";

package/src/lib/utils/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/styles/tailwind.css

@@ -1,3 +1,66 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem
+  }
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%
+  }
+}
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/tailwind.config.js

@@ -1,8 +1,57 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./src/**/*.{js,ts,jsx,tsx}"],
+    darkMode: ["class"],
+    content: ["./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
-    extend: {},
+  	extend: {
+  		borderRadius: {
+  			lg: 'var(--radius)',
+  			md: 'calc(var(--radius) - 2px)',
+  			sm: 'calc(var(--radius) - 4px)'
+  		},
+  		colors: {
+  			background: 'hsl(var(--background))',
+  			foreground: 'hsl(var(--foreground))',
+  			card: {
+  				DEFAULT: 'hsl(var(--card))',
+  				foreground: 'hsl(var(--card-foreground))'
+  			},
+  			popover: {
+  				DEFAULT: 'hsl(var(--popover))',
+  				foreground: 'hsl(var(--popover-foreground))'
+  			},
+  			primary: {
+  				DEFAULT: 'hsl(var(--primary))',
+  				foreground: 'hsl(var(--primary-foreground))'
+  			},
+  			secondary: {
+  				DEFAULT: 'hsl(var(--secondary))',
+  				foreground: 'hsl(var(--secondary-foreground))'
+  			},
+  			muted: {
+  				DEFAULT: 'hsl(var(--muted))',
+  				foreground: 'hsl(var(--muted-foreground))'
+  			},
+  			accent: {
+  				DEFAULT: 'hsl(var(--accent))',
+  				foreground: 'hsl(var(--accent-foreground))'
+  			},
+  			destructive: {
+  				DEFAULT: 'hsl(var(--destructive))',
+  				foreground: 'hsl(var(--destructive-foreground))'
+  			},
+  			border: 'hsl(var(--border))',
+  			input: 'hsl(var(--input))',
+  			ring: 'hsl(var(--ring))',
+  			chart: {
+  				'1': 'hsl(var(--chart-1))',
+  				'2': 'hsl(var(--chart-2))',
+  				'3': 'hsl(var(--chart-3))',
+  				'4': 'hsl(var(--chart-4))',
+  				'5': 'hsl(var(--chart-5))'
+  			}
+  		}
+  	}
   },
-  plugins: [],
+  plugins: [require("tailwindcss-animate")],
 };

package/tsconfig.app.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    // ...
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+    // ...
+  }
+}

package/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "baseUrl": ".",
     "target": "esnext",
     "module": "esnext",
     "lib": ["dom", "esnext"],
@@ -8,7 +9,21 @@
     "moduleResolution": "node",
     "esModuleInterop": true,
     "declaration": true,
-    "outDir": "dist"
+    "emitDeclarationOnly": true,
+    "outDir": "dist",
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
-  "include": ["src"]
+  "include": ["src"],
+  "exclude": [
+    "node_modules",
+    "dist",
+    ".husky",
+    "**/*.test.ts",
+    "**/*.test.tsx",
+    "**/*.stories.tsx"
+  ]
 }

package/vite.config.ts

@@ -1,8 +1,20 @@
 import { defineConfig } from "vite";
+import path from "path";
 import react from "@vitejs/plugin-react";
 
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+  css: {
+    postcss: {
+      plugins: [require("tailwindcss"), require("autoprefixer")],
+    },
+  },
+
   build: {
     lib: {
       entry: "src/index.ts",