@burnt-labs/ui 0.0.1-alpha.0

package/.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ["custom/react"],
+};

package/.turbo/turbo-build.log

@@ -0,0 +1,43 @@
+
+> @burnt-labs/ui@0.0.1-alpha.0 build /Users/justin/IdeaProjects/xion.js/packages/ui
+> tsup
+
+CLI Building entry: src/button.tsx, src/index.tsx, src/input.tsx, src/modal.tsx, src/pinInput.tsx, src/icons/accountWalletLogo.tsx, src/icons/chevronDown.tsx, src/icons/close.tsx, src/icons/spinner.tsx
+CLI Using tsconfig: tsconfig.json
+CLI tsup v6.7.0
+CLI Using tsup config: /Users/justin/IdeaProjects/xion.js/packages/ui/tsup.config.ts
+CLI Target: es6
+CLI Cleaning output folder
+ESM Build start
+DTS Build start
+ESM dist/index.css                   10.33 KB
+ESM dist/chunk-RPX3PE6L.mjs          508.00 B
+ESM dist/chunk-FCDGETWZ.mjs          1.71 KB
+ESM dist/index.mjs                   552.00 B
+ESM dist/chunk-YONHDQHS.mjs          569.00 B
+ESM dist/modal.mjs                   167.00 B
+ESM dist/chunk-HJDNUBCI.mjs          1.40 KB
+ESM dist/pinInput.mjs                85.00 B
+ESM dist/chunk-SVEY7E4F.mjs          1.30 KB
+ESM dist/icons/accountWalletLogo.mjs 96.00 B
+ESM dist/icons/chevronDown.mjs       90.00 B
+ESM dist/chunk-ADRZFEEP.mjs          19.90 KB
+ESM dist/chunk-AIOFP622.mjs          414.00 B
+ESM dist/icons/close.mjs             120.00 B
+ESM dist/chunk-TT6MQYSV.mjs          877.00 B
+ESM dist/input.mjs                   82.00 B
+ESM dist/icons/spinner.mjs           86.00 B
+ESM dist/chunk-LVXPWHAD.mjs          460.00 B
+ESM dist/chunk-DYNA3PMW.mjs          628.00 B
+ESM dist/button.mjs                  83.00 B
+ESM ⚡️ Build success in 475ms
+DTS ⚡️ Build success in 937ms
+DTS dist/index.d.ts                   447.00 B
+DTS dist/button.d.ts                  349.00 B
+DTS dist/input.d.ts                   239.00 B
+DTS dist/modal.d.ts                   876.00 B
+DTS dist/pinInput.d.ts                303.00 B
+DTS dist/icons/accountWalletLogo.d.ts 158.00 B
+DTS dist/icons/chevronDown.d.ts       191.00 B
+DTS dist/icons/close.d.ts             196.00 B
+DTS dist/icons/spinner.d.ts           138.00 B

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @burnt-labs/ui
+
+## 0.0.1-alpha.0
+
+### Patch Changes
+
+- Initial Release

package/dist/button.d.ts

@@ -0,0 +1,11 @@
+import React__default from 'react';
+
+interface ButtonProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
+    fullWidth?: boolean;
+    structure?: "base" | "outlined" | "naked";
+    theme?: "primary" | "secondary" | "destructive";
+    disabled?: boolean;
+}
+declare const Button: React__default.FC<ButtonProps>;
+
+export { Button };

package/dist/button.mjs

@@ -0,0 +1,2 @@
+export { a as Button } from './chunk-FCDGETWZ.mjs';
+import './chunk-DYNA3PMW.mjs';

package/dist/chunk-ADRZFEEP.mjs

@@ -0,0 +1,5 @@
+import { a } from './chunk-DYNA3PMW.mjs';
+
+function Y(e){var r,o,t="";if(typeof e=="string"||typeof e=="number")t+=e;else if(typeof e=="object")if(Array.isArray(e))for(r=0;r<e.length;r++)e[r]&&(o=Y(e[r]))&&(t&&(t+=" "),t+=o);else for(r in e)e[r]&&(t&&(t+=" "),t+=r);return t}function D(){for(var e,r,o=0,t="";o<arguments.length;)(e=arguments[o++])&&(r=Y(e))&&(t&&(t+=" "),t+=r);return t}var B="-";function ae(e){let r=de(e),{conflictingClassGroups:o,conflictingClassGroupModifiers:t}=e;function l(s){let a=s.split(B);return a[0]===""&&a.length!==1&&a.shift(),te(a,r)||ce(s)}function n(s,a){let u=o[s]||[];return a&&t[s]?[...u,...t[s]]:u}return {getClassGroupId:l,getConflictingClassGroupIds:n}}function te(e,r){var s;if(e.length===0)return r.classGroupId;let o=e[0],t=r.nextPart.get(o),l=t?te(e.slice(1),t):void 0;if(l)return l;if(r.validators.length===0)return;let n=e.join(B);return (s=r.validators.find(({validator:a})=>a(n)))==null?void 0:s.classGroupId}var ee=/^\[(.+)\]$/;function ce(e){if(ee.test(e)){let r=ee.exec(e)[1],o=r==null?void 0:r.substring(0,r.indexOf(":"));if(o)return "arbitrary.."+o}}function de(e){let{theme:r,prefix:o}=e,t={nextPart:new Map,validators:[]};return pe(Object.entries(e.classGroups),o).forEach(([n,s])=>{$(s,t,n,r);}),t}function $(e,r,o,t){e.forEach(l=>{if(typeof l=="string"){let n=l===""?r:re(r,l);n.classGroupId=o;return}if(typeof l=="function"){if(ue(l)){$(l(t),r,o,t);return}r.validators.push({validator:l,classGroupId:o});return}Object.entries(l).forEach(([n,s])=>{$(s,re(r,n),o,t);});});}function re(e,r){let o=e;return r.split(B).forEach(t=>{o.nextPart.has(t)||o.nextPart.set(t,{nextPart:new Map,validators:[]}),o=o.nextPart.get(t);}),o}function ue(e){return e.isThemeGetter}function pe(e,r){return r?e.map(([o,t])=>{let l=t.map(n=>typeof n=="string"?r+n:typeof n=="object"?Object.fromEntries(Object.entries(n).map(([s,a])=>[r+s,a])):n);return [o,l]}):e}function fe(e){if(e<1)return {get:()=>{},set:()=>{}};let r=0,o=new Map,t=new Map;function l(n,s){o.set(n,s),r++,r>e&&(r=0,t=o,o=new Map);}return {get(n){let s=o.get(n);if(s!==void 0)return s;if((s=t.get(n))!==void 0)return l(n,s),s},set(n,s){o.has(n)?o.set(n,s):l(n,s);}}}var oe="!";function be(e){let r=e.separator,o=r.length===1,t=r[0],l=r.length;return function(s){let a=[],u=0,f=0,p;for(let b=0;b<s.length;b++){let m=s[b];if(u===0){if(m===t&&(o||s.slice(b,b+l)===r)){a.push(s.slice(f,b)),f=b+l;continue}if(m==="/"){p=b;continue}}m==="["?u++:m==="]"&&u--;}let g=a.length===0?s:s.substring(f),y=g.startsWith(oe),w=y?g.substring(1):g,S=p&&p>f?p-f:void 0;return {modifiers:a,hasImportantModifier:y,baseClassName:w,maybePostfixModifierPosition:S}}}function ge(e){if(e.length<=1)return e;let r=[],o=[];return e.forEach(t=>{t[0]==="["?(r.push(...o.sort(),t),o=[]):o.push(t);}),r.push(...o.sort()),r}function me(e){return a({cache:fe(e.cacheSize),splitModifiers:be(e)},ae(e))}var he=/\s+/;function ye(e,r){let{splitModifiers:o,getClassGroupId:t,getConflictingClassGroupIds:l}=r,n=new Set;return e.trim().split(he).map(s=>{let{modifiers:a,hasImportantModifier:u,baseClassName:f,maybePostfixModifierPosition:p}=o(s),g=t(p?f.substring(0,p):f),y=!!p;if(!g){if(!p)return {isTailwindClass:!1,originalClassName:s};if(g=t(f),!g)return {isTailwindClass:!1,originalClassName:s};y=!1;}let w=ge(a).join(":");return {isTailwindClass:!0,modifierId:u?w+oe:w,classGroupId:g,originalClassName:s,hasPostfixModifier:y}}).reverse().filter(s=>{if(!s.isTailwindClass)return !0;let{modifierId:a,classGroupId:u,hasPostfixModifier:f}=s,p=a+u;return n.has(p)?!1:(n.add(p),l(u,f).forEach(g=>n.add(a+g)),!0)}).reverse().map(s=>s.originalClassName).join(" ")}function xe(){let e=0,r,o,t="";for(;e<arguments.length;)(r=arguments[e++])&&(o=ne(r))&&(t&&(t+=" "),t+=o);return t}function ne(e){if(typeof e=="string")return e;let r,o="";for(let t=0;t<e.length;t++)e[t]&&(r=ne(e[t]))&&(o&&(o+=" "),o+=r);return o}function we(e,...r){let o,t,l,n=s;function s(u){let f=r.reduce((p,g)=>g(p),e());return o=me(f),t=o.cache.get,l=o.cache.set,n=a,a(u)}function a(u){let f=t(u);if(f)return f;let p=ye(u,o);return l(u,p),p}return function(){return n(xe.apply(null,arguments))}}function c(e){let r=o=>o[e]||[];return r.isThemeGetter=!0,r}var se=/^\[(?:([a-z-]+):)?(.+)\]$/i,ve=/^\d+\/\d+$/,ke=new Set(["px","full","screen"]),Ce=/^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/,ze=/\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$/,Se=/^-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/,Me=/^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/;function h(e){return z(e)||ke.has(e)||ve.test(e)}function k(e){return M(e,"length",je)}function z(e){return !!e&&!Number.isNaN(Number(e))}function j(e){return M(e,"number",z)}function G(e){return !!e&&Number.isInteger(Number(e))}function Ae(e){return e.endsWith("%")&&z(e.slice(0,-1))}function i(e){return se.test(e)}function C(e){return Ce.test(e)}var Pe=new Set(["length","size","percentage"]);function Ge(e){return M(e,Pe,ie)}function Re(e){return M(e,"position",ie)}var Ie=new Set(["image","url"]);function Te(e){return M(e,Ie,Ve)}function Ee(e){return M(e,"",Le)}function R(){return !0}function M(e,r,o){let t=se.exec(e);return t?t[1]?typeof r=="string"?t[1]===r:r.has(t[1]):o(t[2]):!1}function je(e){return ze.test(e)}function ie(){return !1}function Le(e){return Se.test(e)}function Ve(e){return Me.test(e)}function We(){let e=c("colors"),r=c("spacing"),o=c("blur"),t=c("brightness"),l=c("borderColor"),n=c("borderRadius"),s=c("borderSpacing"),a=c("borderWidth"),u=c("contrast"),f=c("grayscale"),p=c("hueRotate"),g=c("invert"),y=c("gap"),w=c("gradientColorStops"),S=c("gradientColorStopPositions"),b=c("inset"),m=c("margin"),v=c("opacity"),x=c("padding"),U=c("saturate"),L=c("scale"),F=c("sepia"),O=c("skew"),q=c("space"),J=c("translate"),V=()=>["auto","contain","none"],W=()=>["auto","hidden","clip","visible","scroll"],_=()=>["auto",i,r],d=()=>[i,r],K=()=>["",h,k],I=()=>["auto",z,i],X=()=>["bottom","center","left","left-bottom","left-top","right","right-bottom","right-top","top"],T=()=>["solid","dashed","dotted","double","none"],Z=()=>["normal","multiply","screen","overlay","darken","lighten","color-dodge","color-burn","hard-light","soft-light","difference","exclusion","hue","saturation","color","luminosity","plus-lighter"],N=()=>["start","end","center","between","around","evenly","stretch"],A=()=>["","0",i],H=()=>["auto","avoid","all","avoid-page","page","left","right","column"],P=()=>[z,j],E=()=>[z,i];return {cacheSize:500,separator:":",theme:{colors:[R],spacing:[h,k],blur:["none","",C,i],brightness:P(),borderColor:[e],borderRadius:["none","","full",C,i],borderSpacing:d(),borderWidth:K(),contrast:P(),grayscale:A(),hueRotate:E(),invert:A(),gap:d(),gradientColorStops:[e],gradientColorStopPositions:[Ae,k],inset:_(),margin:_(),opacity:P(),padding:d(),saturate:P(),scale:P(),sepia:A(),skew:E(),space:d(),translate:d()},classGroups:{aspect:[{aspect:["auto","square","video",i]}],container:["container"],columns:[{columns:[C]}],"break-after":[{"break-after":H()}],"break-before":[{"break-before":H()}],"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"]}],clear:[{clear:["left","right","both","none"]}],isolation:["isolate","isolation-auto"],"object-fit":[{object:["contain","cover","fill","none","scale-down"]}],"object-position":[{object:[...X(),i]}],overflow:[{overflow:W()}],"overflow-x":[{"overflow-x":W()}],"overflow-y":[{"overflow-y":W()}],overscroll:[{overscroll:V()}],"overscroll-x":[{"overscroll-x":V()}],"overscroll-y":[{"overscroll-y":V()}],position:["static","fixed","absolute","relative","sticky"],inset:[{inset:[b]}],"inset-x":[{"inset-x":[b]}],"inset-y":[{"inset-y":[b]}],start:[{start:[b]}],end:[{end:[b]}],top:[{top:[b]}],right:[{right:[b]}],bottom:[{bottom:[b]}],left:[{left:[b]}],visibility:["visible","invisible","collapse"],z:[{z:["auto",G,i]}],basis:[{basis:_()}],"flex-direction":[{flex:["row","row-reverse","col","col-reverse"]}],"flex-wrap":[{flex:["wrap","wrap-reverse","nowrap"]}],flex:[{flex:["1","auto","initial","none",i]}],grow:[{grow:A()}],shrink:[{shrink:A()}],order:[{order:["first","last","none",G,i]}],"grid-cols":[{"grid-cols":[R]}],"col-start-end":[{col:["auto",{span:["full",G,i]},i]}],"col-start":[{"col-start":I()}],"col-end":[{"col-end":I()}],"grid-rows":[{"grid-rows":[R]}],"row-start-end":[{row:["auto",{span:[G,i]},i]}],"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",i]}],"auto-rows":[{"auto-rows":["auto","min","max","fr",i]}],gap:[{gap:[y]}],"gap-x":[{"gap-x":[y]}],"gap-y":[{"gap-y":[y]}],"justify-content":[{justify:["normal",...N()]}],"justify-items":[{"justify-items":["start","end","center","stretch"]}],"justify-self":[{"justify-self":["auto","start","end","center","stretch"]}],"align-content":[{content:["normal",...N(),"baseline"]}],"align-items":[{items:["start","end","center","baseline","stretch"]}],"align-self":[{self:["auto","start","end","center","stretch","baseline"]}],"place-content":[{"place-content":[...N(),"baseline"]}],"place-items":[{"place-items":["start","end","center","baseline","stretch"]}],"place-self":[{"place-self":["auto","start","end","center","stretch"]}],p:[{p:[x]}],px:[{px:[x]}],py:[{py:[x]}],ps:[{ps:[x]}],pe:[{pe:[x]}],pt:[{pt:[x]}],pr:[{pr:[x]}],pb:[{pb:[x]}],pl:[{pl:[x]}],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":[q]}],"space-x-reverse":["space-x-reverse"],"space-y":[{"space-y":[q]}],"space-y-reverse":["space-y-reverse"],w:[{w:["auto","min","max","fit",i,r]}],"min-w":[{"min-w":["min","max","fit",i,h]}],"max-w":[{"max-w":["0","none","full","min","max","fit","prose",{screen:[C]},C,i]}],h:[{h:[i,r,"auto","min","max","fit"]}],"min-h":[{"min-h":["min","max","fit",h,i]}],"max-h":[{"max-h":[i,r,"min","max","fit"]}],"font-size":[{text:["base",C,k]}],"font-smoothing":["antialiased","subpixel-antialiased"],"font-style":["italic","not-italic"],"font-weight":[{font:["thin","extralight","light","normal","medium","semibold","bold","extrabold","black",j]}],"font-family":[{font:[R]}],"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-fractons"],tracking:[{tracking:["tighter","tight","normal","wide","wider","widest",i]}],"line-clamp":[{"line-clamp":["none",z,j]}],leading:[{leading:["none","tight","snug","normal","relaxed","loose",h,i]}],"list-image":[{"list-image":["none",i]}],"list-style-type":[{list:["none","disc","decimal",i]}],"list-style-position":[{list:["inside","outside"]}],"placeholder-color":[{placeholder:[e]}],"placeholder-opacity":[{"placeholder-opacity":[v]}],"text-alignment":[{text:["left","center","right","justify","start","end"]}],"text-color":[{text:[e]}],"text-opacity":[{"text-opacity":[v]}],"text-decoration":["underline","overline","line-through","no-underline"],"text-decoration-style":[{decoration:[...T(),"wavy"]}],"text-decoration-thickness":[{decoration:["auto","from-font",h,k]}],"underline-offset":[{"underline-offset":["auto",h,i]}],"text-decoration-color":[{decoration:[e]}],"text-transform":["uppercase","lowercase","capitalize","normal-case"],"text-overflow":["truncate","text-ellipsis","text-clip"],indent:[{indent:d()}],"vertical-align":[{align:["baseline","top","middle","bottom","text-top","text-bottom","sub","super",i]}],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",i]}],"bg-attachment":[{bg:["fixed","local","scroll"]}],"bg-clip":[{"bg-clip":["border","padding","content","text"]}],"bg-opacity":[{"bg-opacity":[v]}],"bg-origin":[{"bg-origin":["border","padding","content"]}],"bg-position":[{bg:[...X(),Re]}],"bg-repeat":[{bg:["no-repeat",{repeat:["","x","y","round","space"]}]}],"bg-size":[{bg:["auto","cover","contain",Ge]}],"bg-image":[{bg:["none",{"gradient-to":["t","tr","r","br","b","bl","l","tl"]},Te]}],"bg-color":[{bg:[e]}],"gradient-from-pos":[{from:[S]}],"gradient-via-pos":[{via:[S]}],"gradient-to-pos":[{to:[S]}],"gradient-from":[{from:[w]}],"gradient-via":[{via:[w]}],"gradient-to":[{to:[w]}],rounded:[{rounded:[n]}],"rounded-s":[{"rounded-s":[n]}],"rounded-e":[{"rounded-e":[n]}],"rounded-t":[{"rounded-t":[n]}],"rounded-r":[{"rounded-r":[n]}],"rounded-b":[{"rounded-b":[n]}],"rounded-l":[{"rounded-l":[n]}],"rounded-ss":[{"rounded-ss":[n]}],"rounded-se":[{"rounded-se":[n]}],"rounded-ee":[{"rounded-ee":[n]}],"rounded-es":[{"rounded-es":[n]}],"rounded-tl":[{"rounded-tl":[n]}],"rounded-tr":[{"rounded-tr":[n]}],"rounded-br":[{"rounded-br":[n]}],"rounded-bl":[{"rounded-bl":[n]}],"border-w":[{border:[a]}],"border-w-x":[{"border-x":[a]}],"border-w-y":[{"border-y":[a]}],"border-w-s":[{"border-s":[a]}],"border-w-e":[{"border-e":[a]}],"border-w-t":[{"border-t":[a]}],"border-w-r":[{"border-r":[a]}],"border-w-b":[{"border-b":[a]}],"border-w-l":[{"border-l":[a]}],"border-opacity":[{"border-opacity":[v]}],"border-style":[{border:[...T(),"hidden"]}],"divide-x":[{"divide-x":[a]}],"divide-x-reverse":["divide-x-reverse"],"divide-y":[{"divide-y":[a]}],"divide-y-reverse":["divide-y-reverse"],"divide-opacity":[{"divide-opacity":[v]}],"divide-style":[{divide:T()}],"border-color":[{border:[l]}],"border-color-x":[{"border-x":[l]}],"border-color-y":[{"border-y":[l]}],"border-color-t":[{"border-t":[l]}],"border-color-r":[{"border-r":[l]}],"border-color-b":[{"border-b":[l]}],"border-color-l":[{"border-l":[l]}],"divide-color":[{divide:[l]}],"outline-style":[{outline:["",...T()]}],"outline-offset":[{"outline-offset":[h,i]}],"outline-w":[{outline:[h,k]}],"outline-color":[{outline:[e]}],"ring-w":[{ring:K()}],"ring-w-inset":["ring-inset"],"ring-color":[{ring:[e]}],"ring-opacity":[{"ring-opacity":[v]}],"ring-offset-w":[{"ring-offset":[h,k]}],"ring-offset-color":[{"ring-offset":[e]}],shadow:[{shadow:["","inner","none",C,Ee]}],"shadow-color":[{shadow:[R]}],opacity:[{opacity:[v]}],"mix-blend":[{"mix-blend":Z()}],"bg-blend":[{"bg-blend":Z()}],filter:[{filter:["","none"]}],blur:[{blur:[o]}],brightness:[{brightness:[t]}],contrast:[{contrast:[u]}],"drop-shadow":[{"drop-shadow":["","none",C,i]}],grayscale:[{grayscale:[f]}],"hue-rotate":[{"hue-rotate":[p]}],invert:[{invert:[g]}],saturate:[{saturate:[U]}],sepia:[{sepia:[F]}],"backdrop-filter":[{"backdrop-filter":["","none"]}],"backdrop-blur":[{"backdrop-blur":[o]}],"backdrop-brightness":[{"backdrop-brightness":[t]}],"backdrop-contrast":[{"backdrop-contrast":[u]}],"backdrop-grayscale":[{"backdrop-grayscale":[f]}],"backdrop-hue-rotate":[{"backdrop-hue-rotate":[p]}],"backdrop-invert":[{"backdrop-invert":[g]}],"backdrop-opacity":[{"backdrop-opacity":[v]}],"backdrop-saturate":[{"backdrop-saturate":[U]}],"backdrop-sepia":[{"backdrop-sepia":[F]}],"border-collapse":[{border:["collapse","separate"]}],"border-spacing":[{"border-spacing":[s]}],"border-spacing-x":[{"border-spacing-x":[s]}],"border-spacing-y":[{"border-spacing-y":[s]}],"table-layout":[{table:["auto","fixed"]}],caption:[{caption:["top","bottom"]}],transition:[{transition:["none","all","","colors","opacity","shadow","transform",i]}],duration:[{duration:E()}],ease:[{ease:["linear","in","out","in-out",i]}],delay:[{delay:E()}],animate:[{animate:["none","spin","ping","pulse","bounce",i]}],transform:[{transform:["","gpu","none"]}],scale:[{scale:[L]}],"scale-x":[{"scale-x":[L]}],"scale-y":[{"scale-y":[L]}],rotate:[{rotate:[G,i]}],"translate-x":[{"translate-x":[J]}],"translate-y":[{"translate-y":[J]}],"skew-x":[{"skew-x":[O]}],"skew-y":[{"skew-y":[O]}],"transform-origin":[{origin:["center","top","top-right","right","bottom-right","bottom","bottom-left","left","top-left",i]}],accent:[{accent:["auto",e]}],appearance:["appearance-none"],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",i]}],"caret-color":[{caret:[e]}],"pointer-events":[{"pointer-events":["none","auto"]}],resize:[{resize:["none","y","x",""]}],"scroll-behavior":[{scroll:["auto","smooth"]}],"scroll-m":[{"scroll-m":d()}],"scroll-mx":[{"scroll-mx":d()}],"scroll-my":[{"scroll-my":d()}],"scroll-ms":[{"scroll-ms":d()}],"scroll-me":[{"scroll-me":d()}],"scroll-mt":[{"scroll-mt":d()}],"scroll-mr":[{"scroll-mr":d()}],"scroll-mb":[{"scroll-mb":d()}],"scroll-ml":[{"scroll-ml":d()}],"scroll-p":[{"scroll-p":d()}],"scroll-px":[{"scroll-px":d()}],"scroll-py":[{"scroll-py":d()}],"scroll-ps":[{"scroll-ps":d()}],"scroll-pe":[{"scroll-pe":d()}],"scroll-pt":[{"scroll-pt":d()}],"scroll-pr":[{"scroll-pr":d()}],"scroll-pb":[{"scroll-pb":d()}],"scroll-pl":[{"scroll-pl":d()}],"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",i]}],fill:[{fill:[e,"none"]}],"stroke-w":[{stroke:[h,k,j]}],stroke:[{stroke:[e,"none"]}],sr:["sr-only","not-sr-only"]},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"],"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-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"]}}}var le=we(We);function Fe(...e){return le(D(e))}
+
+export { Fe as a };

package/dist/chunk-AIOFP622.mjs

@@ -0,0 +1,6 @@
+import { a } from './chunk-ADRZFEEP.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var i=({className:t})=>jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"black",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:a("ui-h-5 ui-w-5",t),children:[jsx("path",{d:"M18 6 6 18"}),jsx("path",{d:"m6 6 12 12"})]});
+
+export { i as a };

package/dist/chunk-DYNA3PMW.mjs

@@ -0,0 +1,3 @@
+var i=Object.defineProperty,j=Object.defineProperties;var k=Object.getOwnPropertyDescriptors;var e=Object.getOwnPropertySymbols;var g=Object.prototype.hasOwnProperty,h=Object.prototype.propertyIsEnumerable;var f=(a,b,c)=>b in a?i(a,b,{enumerable:!0,configurable:!0,writable:!0,value:c}):a[b]=c,l=(a,b)=>{for(var c in b||(b={}))g.call(b,c)&&f(a,c,b[c]);if(e)for(var c of e(b))h.call(b,c)&&f(a,c,b[c]);return a},m=(a,b)=>j(a,k(b));var n=(a,b)=>{var c={};for(var d in a)g.call(a,d)&&b.indexOf(d)<0&&(c[d]=a[d]);if(a!=null&&e)for(var d of e(a))b.indexOf(d)<0&&h.call(a,d)&&(c[d]=a[d]);return c};
+
+export { l as a, m as b, n as c };

package/dist/chunk-FCDGETWZ.mjs

@@ -0,0 +1,6 @@
+import { c, b, a } from './chunk-DYNA3PMW.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+var p=b$1=>{var r=b$1,{fullWidth:a$1=!1,structure:t="base",theme:e="default",disabled:o=!1,children:s}=r,c$1=c(r,["fullWidth","structure","theme","disabled","children"]);return jsx("button",b(a({className:`ui-rounded ui-px-5 ui-py-3.5 ui-text-sm ui-font-bold ui-outline-none ui-hover:opacity-70 ${a$1?"ui-w-full":""} ${(()=>{if(o)switch(t){case"base":return "ui-bg-gray-400 ui-text-white ui-pointer-events-none";case"outlined":return "ui-bg-transparent ui-border ui-border-zinc-300 ui-text-zinc-300 dark:ui-text-zinc-600 ui-pointer-events-none";case"naked":return "ui-text-gray-400 ui-pointer-events-none";default:return ""}switch(t){case"outlined":switch(e){case"primary":return "ui-border ui-border-zinc-300 ui-bg-transparent ui-text-black dark:ui-text-white hover:ui-bg-black/5 dark:hover:ui-bg-white/5";case"secondary":return "ui-border ui-border-zinc-300 ui-bg-transparent ui-text-white";case"destructive":return "ui-border ui-border-red-500 ui-bg-transparent ui-text-red-500";default:return ""}case"naked":switch(e){case"primary":return "ui-border-none ui-bg-transparent ui-text-black dark:ui-text-white ui-underline ui-font-normal";case"secondary":return "ui-border-none ui-bg-transparent ui-text-opacity-50";case"destructive":return "ui-border-none ui-bg-transparent ui-text-red-500";default:return ""}default:switch(e){case"primary":return "ui-bg-zinc-900 ui-text-white hover:ui-bg-zinc-800 dark:ui-bg-white dark:ui-text-black hover:dark:ui-bg-zinc-100";case"secondary":return "ui-bg-zinc-200 ui-text-black hover:ui-bg-zinc-300";case"destructive":return "ui-bg-red-500 ui-text-white";default:return ""}}})()}`},c$1),{children:s}))};
+
+export { p as a };

package/dist/chunk-HJDNUBCI.mjs

@@ -0,0 +1,6 @@
+import { useState, useRef, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var y=({length:r=6,onComplete:p,error:d,setError:b})=>{let[s,o]=useState(Array(r).fill("")),u=useRef(Array(r).fill(null)),m=(t,n)=>{var a;let e=/^\d$/.test(n)?n:"",i=[...s];i[t]=e,o(i),i.includes("")||p(i.join("")),t<r-1&&e!==""&&((a=u.current[t+1])==null||a.focus());},g=t=>{var e;let n=[...s];t>=0&&(n[t]="",(e=u.current[t-1])==null||e.focus()),o(n);};useEffect(()=>{var t;(t=u.current[0])==null||t.focus();},[]);let k=t=>{var a;t.preventDefault();let e=t.clipboardData.getData("text").split("").filter(c=>/^\d$/.test(c)).slice(0,r),i=[...s];e.forEach((c,l)=>{l<r&&(i[l]=c);}),o(i),p(i.join("")),(a=u.current[Math.min(r-1,e.length-1)])==null||a.focus();};return jsx("div",{className:"ui-flex ui-w-full ui-justify-between",children:s.map((t,n)=>jsx("input",{type:"text",value:t,maxLength:1,onChange:e=>{b(""),m(n,e.target.value);},onKeyDown:e=>{e.key==="Backspace"&&g(n);},onPaste:k,className:`ui-block ui-bg-transparent ui-text-black dark:ui-text-white ui-rounded-md ui-border-2 ui-text-center ui-text-sm ui-outline-none focus:ui-border-black focus:ui-ring-black dark:focus:ui-border-white dark:focus:ui-ring-white disabled:ui-pointer-events-none disabled:ui-opacity-50 ui-w-[50px] ui-h-[50px] ${d?"ui-border-red-500":"ui-border-zinc-300 dark:ui-border-zinc-600"}`,autoFocus:n===0,ref:e=>u.current[n]=e},n))})};
+
+export { y as a };

package/dist/chunk-LVXPWHAD.mjs

@@ -0,0 +1,5 @@
+import { jsx } from 'react/jsx-runtime';
+
+var r=({isUp:t=!1})=>jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"ui-h-5 ui-w-5 ui-transform ui-text-current ui-transition-transform ui-duration-300 ui-ease-in-out",style:{transform:t?"rotate(180deg)":""},children:jsx("path",{d:"m6 9 6 6 6-6"})});
+
+export { r as a };

package/dist/chunk-RPX3PE6L.mjs

@@ -0,0 +1,5 @@
+import { jsx } from 'react/jsx-runtime';
+
+var r=()=>jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"3rem",height:"3rem",viewBox:"0 0 100 100",preserveAspectRatio:"xMidYMid",children:jsx("circle",{cx:"50",cy:"50",fill:"none",stroke:"currentColor",strokeWidth:"8",r:"35",strokeDasharray:"164.93361431346415 56.97787143782138",children:jsx("animateTransform",{attributeName:"transform",type:"rotate",repeatCount:"indefinite",dur:"1.25s",values:"0 50 50;360 50 50",keyTimes:"0;1"})})});
+
+export { r as a };

package/dist/chunk-SVEY7E4F.mjs

@@ -0,0 +1,8 @@
+import { a as a$1 } from './chunk-ADRZFEEP.mjs';
+import { c, b, a } from './chunk-DYNA3PMW.mjs';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var x=forwardRef((e,s)=>{var a$2=e,{className:i,children:t}=a$2,u=c(a$2,["className","children"]);return jsx("div",b(a({ref:s,className:a$1("ui-flex ui-p-4 ui-justify-center ui-items-center ui-fixed ui-inset-0 ui-h-screen ui-w-screen ui-z-[999] dark:ui-bg-white/20 ui-bg-black/50 ui-backdrop-blur-sm",i)},u),{children:t}))}),M=s=>{var e=s,{className:i,children:t}=e,u=c(e,["className","children"]);return jsx("div",b(a({className:a$1("ui-relative ui-w-full ui-max-w-[465px] ui-text-black ui-rounded ui-z-[1000] ui-bg-white dark:ui-bg-zinc-900",i)},u),{children:t}))},v=s=>{var e=s,{className:i,children:t}=e,u=c(e,["className","children"]);return jsx("button",b(a({className:a$1("ui-p-2 ui-rounded-lg ui-absolute ui-top-4 ui-right-4 ui-z-[1001] ui-border-none ui-flex ui-items-center ui-justify-center ui-bg-transparent ui-cursor-pointer hover:ui-bg-zinc-100",i)},u),{children:t}))},g=s=>{var e=s,{className:i,children:t}=e,u=c(e,["className","children"]);return jsx("div",b(a({className:a$1("ui-inline-flex ui-w-full ui-h-full ui-p-10 ui-flex-col ui-items-start ui-justify-between ui-gap-4",i)},u),{children:t}))};
+
+export { x as a, M as b, v as c, g as d };

package/dist/chunk-TT6MQYSV.mjs

@@ -0,0 +1,5 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var C=()=>jsxs("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[jsx("rect",{width:"48",height:"48",rx:"24",fill:"none"}),jsx("path",{d:"M33.8947 30.8289V31.9342C33.8947 33.15 32.9 34.1447 31.6842 34.1447H16.2105C14.9837 34.1447 14 33.15 14 31.9342V16.4605C14 15.2447 14.9837 14.25 16.2105 14.25H31.6842C32.9 14.25 33.8947 15.2447 33.8947 16.4605V17.5658H23.9474C22.7205 17.5658 21.7368 18.5605 21.7368 19.7763V28.6184C21.7368 29.8342 22.7205 30.8289 23.9474 30.8289H33.8947ZM23.9474 28.6184H35V19.7763H23.9474V28.6184ZM28.3684 25.8553C27.4511 25.8553 26.7105 25.1147 26.7105 24.1974C26.7105 23.28 27.4511 22.5395 28.3684 22.5395C29.2858 22.5395 30.0263 23.28 30.0263 24.1974C30.0263 25.1147 29.2858 25.8553 28.3684 25.8553Z",fill:"currentColor"})]});
+
+export { C as a };

package/dist/chunk-YONHDQHS.mjs

@@ -0,0 +1,6 @@
+import { c, a } from './chunk-DYNA3PMW.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var p=o=>{var t=o,{fullWidth:e=!1,error:r}=t,a$1=c(t,["fullWidth","error"]);return jsxs("div",{className:`ui-flex ui-flex-col ui-gap-1 ${e?"ui-w-full":""}`,children:[jsx("input",a({className:`ui-bg-transparent ui-text-black dark:ui-text-white ui-p-3 ui-rounded ui-border ui-border-zinc-300 ui-outline-none ui-placeholder-zinc-400 dark:ui-placeholder-zinc-600 ${e?"ui-w-full":""}`},a$1)),jsx("span",{className:"ui-text-red-500 ui-text-xs",children:r})]})};
+
+export { p as a };

package/dist/icons/accountWalletLogo.d.ts

@@ -0,0 +1,5 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare const AccountWalletLogo: () => react_jsx_runtime.JSX.Element;
+
+export { AccountWalletLogo };

package/dist/icons/accountWalletLogo.mjs

@@ -0,0 +1,2 @@
+export { a as AccountWalletLogo } from '../chunk-TT6MQYSV.mjs';
+import '../chunk-DYNA3PMW.mjs';

package/dist/icons/chevronDown.d.ts

@@ -0,0 +1,7 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare const ChevronDown: ({ isUp }: {
+    isUp?: boolean | undefined;
+}) => react_jsx_runtime.JSX.Element;
+
+export { ChevronDown };

package/dist/icons/chevronDown.mjs

@@ -0,0 +1,2 @@
+export { a as ChevronDown } from '../chunk-LVXPWHAD.mjs';
+import '../chunk-DYNA3PMW.mjs';

package/dist/icons/close.d.ts

@@ -0,0 +1,7 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare const CloseIcon: ({ className }: {
+    className?: string | undefined;
+}) => react_jsx_runtime.JSX.Element;
+
+export { CloseIcon };

package/dist/icons/close.mjs

@@ -0,0 +1,3 @@
+export { a as CloseIcon } from '../chunk-AIOFP622.mjs';
+import '../chunk-ADRZFEEP.mjs';
+import '../chunk-DYNA3PMW.mjs';

package/dist/icons/spinner.d.ts

@@ -0,0 +1,5 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare const Spinner: () => react_jsx_runtime.JSX.Element;
+
+export { Spinner };

package/dist/icons/spinner.mjs

@@ -0,0 +1,2 @@
+export { a as Spinner } from '../chunk-RPX3PE6L.mjs';
+import '../chunk-DYNA3PMW.mjs';

package/dist/index.css

@@ -0,0 +1 @@
+*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.ui-pointer-events-none{pointer-events:none}.ui-fixed{position:fixed}.ui-absolute{position:absolute}.ui-relative{position:relative}.ui-inset-0{inset:0}.ui-right-4{right:1rem}.ui-top-4{top:1rem}.ui-z-\[1000\]{z-index:1000}.ui-z-\[1001\]{z-index:1001}.ui-z-\[999\]{z-index:999}.ui-block{display:block}.ui-flex{display:flex}.ui-inline-flex{display:inline-flex}.ui-h-5{height:1.25rem}.ui-h-\[50px\]{height:50px}.ui-h-full{height:100%}.ui-h-screen{height:100vh}.ui-w-5{width:1.25rem}.ui-w-\[50px\]{width:50px}.ui-w-full{width:100%}.ui-w-screen{width:100vw}.ui-max-w-\[465px\]{max-width:465px}.ui-transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.ui-cursor-pointer{cursor:pointer}.ui-flex-col{flex-direction:column}.ui-items-start{align-items:flex-start}.ui-items-center{align-items:center}.ui-justify-center{justify-content:center}.ui-justify-between{justify-content:space-between}.ui-gap-1{gap:.25rem}.ui-gap-4{gap:1rem}.ui-rounded{border-radius:.25rem}.ui-rounded-lg{border-radius:.5rem}.ui-rounded-md{border-radius:.375rem}.ui-border{border-width:1px}.ui-border-2{border-width:2px}.ui-border-none{border-style:none}.ui-border-red-500{--tw-border-opacity: 1;border-color:rgb(239 68 68 / var(--tw-border-opacity))}.ui-border-zinc-300{--tw-border-opacity: 1;border-color:rgb(212 212 216 / var(--tw-border-opacity))}.ui-bg-black\/50{background-color:#00000080}.ui-bg-gray-400{--tw-bg-opacity: 1;background-color:rgb(156 163 175 / var(--tw-bg-opacity))}.ui-bg-red-500{--tw-bg-opacity: 1;background-color:rgb(239 68 68 / var(--tw-bg-opacity))}.ui-bg-transparent{background-color:transparent}.ui-bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.ui-bg-zinc-200{--tw-bg-opacity: 1;background-color:rgb(228 228 231 / var(--tw-bg-opacity))}.ui-bg-zinc-900{--tw-bg-opacity: 1;background-color:rgb(24 24 27 / var(--tw-bg-opacity))}.ui-p-10{padding:2.5rem}.ui-p-2{padding:.5rem}.ui-p-3{padding:.75rem}.ui-p-4{padding:1rem}.ui-px-5{padding-left:1.25rem;padding-right:1.25rem}.ui-py-3{padding-top:.75rem;padding-bottom:.75rem}.ui-py-3\.5{padding-top:.875rem;padding-bottom:.875rem}.ui-text-center{text-align:center}.ui-text-sm{font-size:.875rem;line-height:1.25rem}.ui-text-xs{font-size:.75rem;line-height:1rem}.ui-font-bold{font-weight:700}.ui-font-normal{font-weight:400}.ui-text-black{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity))}.ui-text-current{color:currentColor}.ui-text-gray-400{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity))}.ui-text-red-500{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity))}.ui-text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.ui-text-zinc-300{--tw-text-opacity: 1;color:rgb(212 212 216 / var(--tw-text-opacity))}.ui-text-opacity-50{--tw-text-opacity: .5}.ui-underline{text-decoration-line:underline}.ui-placeholder-zinc-400::-moz-placeholder{--tw-placeholder-opacity: 1;color:rgb(161 161 170 / var(--tw-placeholder-opacity))}.ui-placeholder-zinc-400::placeholder{--tw-placeholder-opacity: 1;color:rgb(161 161 170 / var(--tw-placeholder-opacity))}.ui-outline-none{outline:2px solid transparent;outline-offset:2px}.ui-backdrop-blur-sm{--tw-backdrop-blur: blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.ui-transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.ui-duration-300{transition-duration:.3s}.ui-ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\:ui-bg-black\/5:hover{background-color:#0000000d}.hover\:ui-bg-zinc-100:hover{--tw-bg-opacity: 1;background-color:rgb(244 244 245 / var(--tw-bg-opacity))}.hover\:ui-bg-zinc-300:hover{--tw-bg-opacity: 1;background-color:rgb(212 212 216 / var(--tw-bg-opacity))}.hover\:ui-bg-zinc-800:hover{--tw-bg-opacity: 1;background-color:rgb(39 39 42 / var(--tw-bg-opacity))}.focus\:ui-border-black:focus{--tw-border-opacity: 1;border-color:rgb(0 0 0 / var(--tw-border-opacity))}.focus\:ui-ring-black:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity))}.disabled\:ui-pointer-events-none:disabled{pointer-events:none}.disabled\:ui-opacity-50:disabled{opacity:.5}@media (prefers-color-scheme: dark){.dark\:ui-border-zinc-600{--tw-border-opacity: 1;border-color:rgb(82 82 91 / var(--tw-border-opacity))}.dark\:ui-bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.dark\:ui-bg-white\/20{background-color:#fff3}.dark\:ui-bg-zinc-900{--tw-bg-opacity: 1;background-color:rgb(24 24 27 / var(--tw-bg-opacity))}.dark\:ui-text-black{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity))}.dark\:ui-text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.dark\:ui-text-zinc-600{--tw-text-opacity: 1;color:rgb(82 82 91 / var(--tw-text-opacity))}.dark\:ui-placeholder-zinc-600::-moz-placeholder{--tw-placeholder-opacity: 1;color:rgb(82 82 91 / var(--tw-placeholder-opacity))}.dark\:ui-placeholder-zinc-600::placeholder{--tw-placeholder-opacity: 1;color:rgb(82 82 91 / var(--tw-placeholder-opacity))}.dark\:hover\:ui-bg-white\/5:hover{background-color:#ffffff0d}.hover\:dark\:ui-bg-zinc-100:hover{--tw-bg-opacity: 1;background-color:rgb(244 244 245 / var(--tw-bg-opacity))}.dark\:focus\:ui-border-white:focus{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity))}.dark\:focus\:ui-ring-white:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity))}}

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export { Input } from './input.js';
+export { PinInput } from './pinInput.js';
+export { Button } from './button.js';
+export { Modal, ModalAnchor, ModalClose, ModalSection } from './modal.js';
+export { ChevronDown } from './icons/chevronDown.js';
+export { CloseIcon } from './icons/close.js';
+export { AccountWalletLogo } from './icons/accountWalletLogo.js';
+export { Spinner } from './icons/spinner.js';
+import 'react';
+import 'react/jsx-runtime';

package/dist/index.mjs

@@ -0,0 +1,10 @@
+export { a as Spinner } from './chunk-RPX3PE6L.mjs';
+export { a as Button } from './chunk-FCDGETWZ.mjs';
+export { a as Input } from './chunk-YONHDQHS.mjs';
+export { b as Modal, a as ModalAnchor, c as ModalClose, d as ModalSection } from './chunk-SVEY7E4F.mjs';
+export { a as PinInput } from './chunk-HJDNUBCI.mjs';
+export { a as AccountWalletLogo } from './chunk-TT6MQYSV.mjs';
+export { a as ChevronDown } from './chunk-LVXPWHAD.mjs';
+export { a as CloseIcon } from './chunk-AIOFP622.mjs';
+import './chunk-ADRZFEEP.mjs';
+import './chunk-DYNA3PMW.mjs';

package/dist/input.d.ts

@@ -0,0 +1,9 @@
+import React__default from 'react';
+
+interface InputProps extends React__default.InputHTMLAttributes<HTMLInputElement> {
+    fullWidth?: boolean;
+    error?: string;
+}
+declare const Input: React__default.FC<InputProps>;
+
+export { Input };

package/dist/input.mjs

@@ -0,0 +1,2 @@
+export { a as Input } from './chunk-YONHDQHS.mjs';
+import './chunk-DYNA3PMW.mjs';

package/dist/modal.d.ts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { HTMLAttributes, ReactNode, ButtonHTMLAttributes } from 'react';
+
+interface WithChildrenProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+declare const ModalAnchor: React.ForwardRefExoticComponent<WithChildrenProps & React.RefAttributes<HTMLDivElement>>;
+declare const Modal: ({ className, children, ...props }: WithChildrenProps) => react_jsx_runtime.JSX.Element;
+interface ModalCloseProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    children: ReactNode;
+}
+declare const ModalClose: ({ className, children, ...props }: ModalCloseProps) => react_jsx_runtime.JSX.Element;
+declare const ModalSection: ({ className, children, ...props }: WithChildrenProps) => react_jsx_runtime.JSX.Element;
+
+export { Modal, ModalAnchor, ModalClose, ModalSection };

package/dist/modal.mjs

@@ -0,0 +1,3 @@
+export { b as Modal, a as ModalAnchor, c as ModalClose, d as ModalSection } from './chunk-SVEY7E4F.mjs';
+import './chunk-ADRZFEEP.mjs';
+import './chunk-DYNA3PMW.mjs';

package/dist/pinInput.d.ts

@@ -0,0 +1,11 @@
+import React__default from 'react';
+
+interface PinInputProps {
+    length?: number;
+    onComplete: (pin: string) => void;
+    error?: string;
+    setError: React__default.Dispatch<React__default.SetStateAction<string>>;
+}
+declare const PinInput: React__default.FC<PinInputProps>;
+
+export { PinInput };

package/dist/pinInput.mjs

@@ -0,0 +1,2 @@
+export { a as PinInput } from './chunk-HJDNUBCI.mjs';
+import './chunk-DYNA3PMW.mjs';

package/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/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@burnt-labs/ui",
+  "version": "0.0.1-alpha.0",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": "./dist",
+    "./styles.css": "./dist/index.css"
+  },
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.5",
+    "autoprefixer": "^10.4.13",
+    "clsx": "^2.0.0",
+    "postcss": "^8.4.20",
+    "react": "^18.2.0",
+    "tailwind-merge": "^2.1.0",
+    "tailwindcss": "^3.2.4",
+    "tsup": "^6.0.1",
+    "typescript": "^5.2.2",
+    "@burnt-labs/tailwind-config": "0.0.1-alpha.0",
+    "@burnt-labs/eslint-config-custom": "0.0.1-alpha.0",
+    "@burnt-labs/tsconfig": "0.0.1-alpha.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-dialog": "^1.0.5"
+  },
+  "scripts": {
+    "build": "tsup",
+    "lint": "eslint src/",
+    "dev": "tsup --watch",
+    "check-types": "tsc --noEmit"
+  }
+}

package/postcss.config.js

@@ -0,0 +1,9 @@
+// If you want to use other PostCSS plugins, see the following:
+// https://tailwindcss.com/docs/using-with-preprocessors
+
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/src/button.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  fullWidth?: boolean;
+  structure?: "base" | "outlined" | "naked";
+  theme?: "primary" | "secondary" | "destructive";
+  disabled?: boolean;
+}
+
+export const Button: React.FC<ButtonProps> = ({
+  fullWidth = false,
+  structure = "base",
+  theme = "default",
+  disabled = false,
+  children,
+  ...props
+}) => {
+  const getButtonClasses = () => {
+    if (disabled) {
+      switch (structure) {
+        case "base":
+          return "ui-bg-gray-400 ui-text-white ui-pointer-events-none";
+        case "outlined":
+          return "ui-bg-transparent ui-border ui-border-zinc-300 ui-text-zinc-300 dark:ui-text-zinc-600 ui-pointer-events-none";
+        case "naked":
+          return "ui-text-gray-400 ui-pointer-events-none";
+        default:
+          return "";
+      }
+    }
+
+    switch (structure) {
+      case "outlined":
+        switch (theme) {
+          case "primary":
+            return "ui-border ui-border-zinc-300 ui-bg-transparent ui-text-black dark:ui-text-white hover:ui-bg-black/5 dark:hover:ui-bg-white/5";
+          case "secondary":
+            return "ui-border ui-border-zinc-300 ui-bg-transparent ui-text-white";
+          case "destructive":
+            return "ui-border ui-border-red-500 ui-bg-transparent ui-text-red-500";
+          default:
+            return "";
+        }
+      case "naked":
+        switch (theme) {
+          case "primary":
+            return "ui-border-none ui-bg-transparent ui-text-black dark:ui-text-white ui-underline ui-font-normal";
+          case "secondary":
+            return "ui-border-none ui-bg-transparent ui-text-opacity-50";
+          case "destructive":
+            return "ui-border-none ui-bg-transparent ui-text-red-500";
+          default:
+            return "";
+        }
+      default:
+        switch (theme) {
+          case "primary":
+            return "ui-bg-zinc-900 ui-text-white hover:ui-bg-zinc-800 dark:ui-bg-white dark:ui-text-black hover:dark:ui-bg-zinc-100";
+          case "secondary":
+            return "ui-bg-zinc-200 ui-text-black hover:ui-bg-zinc-300";
+          case "destructive":
+            return "ui-bg-red-500 ui-text-white";
+          default:
+            return "";
+        }
+    }
+  };
+
+  return (
+    <button
+      className={`ui-rounded ui-px-5 ui-py-3.5 ui-text-sm ui-font-bold ui-outline-none ui-hover:opacity-70 ${
+        fullWidth ? "ui-w-full" : ""
+      } ${getButtonClasses()}`}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};

package/src/icons/accountWalletLogo.tsx

@@ -0,0 +1,17 @@
+export const AccountWalletLogo = () => {
+  return (
+    <svg
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="48" height="48" rx="24" fill="none" />
+      <path
+        d="M33.8947 30.8289V31.9342C33.8947 33.15 32.9 34.1447 31.6842 34.1447H16.2105C14.9837 34.1447 14 33.15 14 31.9342V16.4605C14 15.2447 14.9837 14.25 16.2105 14.25H31.6842C32.9 14.25 33.8947 15.2447 33.8947 16.4605V17.5658H23.9474C22.7205 17.5658 21.7368 18.5605 21.7368 19.7763V28.6184C21.7368 29.8342 22.7205 30.8289 23.9474 30.8289H33.8947ZM23.9474 28.6184H35V19.7763H23.9474V28.6184ZM28.3684 25.8553C27.4511 25.8553 26.7105 25.1147 26.7105 24.1974C26.7105 23.28 27.4511 22.5395 28.3684 22.5395C29.2858 22.5395 30.0263 23.28 30.0263 24.1974C30.0263 25.1147 29.2858 25.8553 28.3684 25.8553Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

package/src/icons/chevronDown.tsx

@@ -0,0 +1,19 @@
+export const ChevronDown = ({ isUp = false }: { isUp?: boolean }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="ui-h-5 ui-w-5 ui-transform ui-text-current ui-transition-transform ui-duration-300 ui-ease-in-out"
+      style={{ transform: isUp ? "rotate(180deg)" : "" }}
+    >
+      <path d="m6 9 6 6 6-6" />
+    </svg>
+  );
+};

package/src/icons/close.tsx

@@ -0,0 +1,21 @@
+import { cn } from "../../lib/utils";
+
+export const CloseIcon = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="black"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn("ui-h-5 ui-w-5", className)}
+    >
+      <path d="M18 6 6 18" />
+      <path d="m6 6 12 12" />
+    </svg>
+  );
+};

package/src/icons/spinner.tsx

@@ -0,0 +1,30 @@
+export const Spinner = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="3rem"
+      height="3rem"
+      viewBox="0 0 100 100"
+      preserveAspectRatio="xMidYMid"
+    >
+      <circle
+        cx="50"
+        cy="50"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="8"
+        r="35"
+        strokeDasharray="164.93361431346415 56.97787143782138"
+      >
+        <animateTransform
+          attributeName="transform"
+          type="rotate"
+          repeatCount="indefinite"
+          dur="1.25s"
+          values="0 50 50;360 50 50"
+          keyTimes="0;1"
+        ></animateTransform>
+      </circle>
+    </svg>
+  );
+};

package/src/index.tsx

@@ -0,0 +1,12 @@
+// styles
+import "./styles.css";
+
+// components
+export * from "./input";
+export * from "./pinInput";
+export * from "./button";
+export * from "./modal";
+export * from "./icons/chevronDown";
+export * from "./icons/close";
+export * from "./icons/accountWalletLogo";
+export * from "./icons/spinner";

package/src/input.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  fullWidth?: boolean;
+  error?: string;
+}
+
+export const Input: React.FC<InputProps> = ({
+  fullWidth = false,
+  error,
+  ...props
+}) => {
+  return (
+    <div
+      className={`ui-flex ui-flex-col ui-gap-1 ${fullWidth ? "ui-w-full" : ""}`}
+    >
+      <input
+        className={`ui-bg-transparent ui-text-black dark:ui-text-white ui-p-3 ui-rounded ui-border ui-border-zinc-300 ui-outline-none ui-placeholder-zinc-400 dark:ui-placeholder-zinc-600 ${
+          fullWidth ? "ui-w-full" : ""
+        }`}
+        {...props}
+      />
+      <span className="ui-text-red-500 ui-text-xs">{error}</span>
+    </div>
+  );
+};

package/src/modal.tsx

@@ -0,0 +1,82 @@
+import {
+  ReactNode,
+  HTMLAttributes,
+  ButtonHTMLAttributes,
+  forwardRef,
+} from "react";
+import { cn } from "../lib/utils";
+
+interface WithChildrenProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+}
+
+export const ModalAnchor = forwardRef<HTMLDivElement, WithChildrenProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "ui-flex ui-p-4 ui-justify-center ui-items-center ui-fixed ui-inset-0 ui-h-screen ui-w-screen ui-z-[999] dark:ui-bg-white/20 ui-bg-black/50 ui-backdrop-blur-sm",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+export const Modal = ({ className, children, ...props }: WithChildrenProps) => {
+  return (
+    <div
+      className={cn(
+        "ui-relative ui-w-full ui-max-w-[465px] ui-text-black ui-rounded ui-z-[1000] ui-bg-white dark:ui-bg-zinc-900",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+interface ModalCloseProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children: ReactNode;
+}
+
+export const ModalClose = ({
+  className,
+  children,
+  ...props
+}: ModalCloseProps) => {
+  return (
+    <button
+      className={cn(
+        "ui-p-2 ui-rounded-lg ui-absolute ui-top-4 ui-right-4 ui-z-[1001] ui-border-none ui-flex ui-items-center ui-justify-center ui-bg-transparent ui-cursor-pointer hover:ui-bg-zinc-100",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};
+
+export const ModalSection = ({
+  className,
+  children,
+  ...props
+}: WithChildrenProps) => {
+  return (
+    <div
+      className={cn(
+        "ui-inline-flex ui-w-full ui-h-full ui-p-10 ui-flex-col ui-items-start ui-justify-between ui-gap-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};

package/src/pinInput.tsx

@@ -0,0 +1,103 @@
+import React, { useState, useEffect, useRef, ChangeEvent } from "react";
+
+interface PinInputProps {
+  length?: number;
+  onComplete: (pin: string) => void;
+  error?: string;
+  setError: React.Dispatch<React.SetStateAction<string>>;
+}
+
+export const PinInput: React.FC<PinInputProps> = ({
+  length = 6,
+  onComplete,
+  error,
+  setError,
+}) => {
+  const [pin, setPin] = useState(Array(length).fill(""));
+  const inputRefs = useRef<(HTMLInputElement | null)[]>(
+    Array(length).fill(null),
+  );
+
+  const handleInput = (index: number, value: string) => {
+    const newDigit = /^\d$/.test(value) ? value : "";
+    const newPin = [...pin];
+    newPin[index] = newDigit;
+
+    setPin(newPin);
+
+    if (!newPin.includes("")) {
+      onComplete(newPin.join(""));
+    }
+
+    if (index < length - 1 && newDigit !== "") {
+      inputRefs.current[index + 1]?.focus();
+    }
+  };
+
+  const handleBackspace = (index: number) => {
+    const newPin = [...pin];
+    if (index >= 0) {
+      newPin[index] = "";
+      inputRefs.current[index - 1]?.focus();
+    }
+
+    setPin(newPin);
+  };
+
+  useEffect(() => {
+    // Focus the first input on mount
+    inputRefs.current[0]?.focus();
+  }, []);
+
+  const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {
+    event.preventDefault();
+
+    const pastedData = event.clipboardData.getData("text");
+    const pastedDigits = pastedData
+      .split("")
+      .filter((char) => /^\d$/.test(char))
+      .slice(0, length);
+    const newPin = [...pin];
+
+    pastedDigits.forEach((digit, index) => {
+      if (index < length) {
+        newPin[index] = digit;
+      }
+    });
+
+    setPin(newPin);
+    onComplete(newPin.join(""));
+
+    inputRefs.current[Math.min(length - 1, pastedDigits.length - 1)]?.focus();
+  };
+
+  return (
+    <div className="ui-flex ui-w-full ui-justify-between">
+      {pin.map((value, index) => (
+        <input
+          key={index}
+          type="text"
+          value={value}
+          maxLength={1}
+          onChange={(e: ChangeEvent<HTMLInputElement>) => {
+            setError("");
+            handleInput(index, e.target.value);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "Backspace") {
+              handleBackspace(index);
+            }
+          }}
+          onPaste={handlePaste}
+          className={`ui-block ui-bg-transparent ui-text-black dark:ui-text-white ui-rounded-md ui-border-2 ui-text-center ui-text-sm ui-outline-none focus:ui-border-black focus:ui-ring-black dark:focus:ui-border-white dark:focus:ui-ring-white disabled:ui-pointer-events-none disabled:ui-opacity-50 ui-w-[50px] ui-h-[50px] ${
+            error
+              ? "ui-border-red-500"
+              : "ui-border-zinc-300 dark:ui-border-zinc-600"
+          }`}
+          autoFocus={index === 0}
+          ref={(ref) => (inputRefs.current[index] = ref)}
+        />
+      ))}
+    </div>
+  );
+};

package/src/styles.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/tailwind.config.ts

@@ -0,0 +1,10 @@
+// tailwind config is required for editor support
+import type { Config } from "tailwindcss";
+import sharedConfig from "@burnt-labs/tailwind-config/tailwind.config.ts";
+
+const config: Pick<Config, "prefix" | "presets"> = {
+  prefix: "ui-",
+  presets: [sharedConfig],
+};
+
+export default config;

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "@burnt-labs/tsconfig/react-library.json",
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"]
+}

package/tsup.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig, Options } from "tsup";
+
+export default defineConfig((options: Options) => ({
+  treeshake: true,
+  splitting: true,
+  entry: ["src/**/*.tsx"],
+  format: ["esm"],
+  dts: true,
+  minify: true,
+  clean: true,
+  external: ["react"],
+  ...options,
+}));