syntra-ui 0.1.0

package/dist/syntra-ui.cjs

@@ -0,0 +1,135 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=require("react/jsx-runtime"),p=require("react"),P=p.createContext(null),L={primary:{50:"#f0f5ff",100:"#dce8ff",200:"#b4cdff",300:"#84adff",400:"#4d8bff",500:"#007AFF",600:"#0064d6",700:"#004fad",800:"#003c85",900:"#002a5e",950:"#001d42"},gray:{25:"#fcfcfd",50:"#f8f8fa",100:"#f2f2f7",200:"#e5e5ea",300:"#d1d1d6",400:"#aeaeb2",500:"#8e8e93",600:"#636366",700:"#48484a",800:"#3a3a3c",900:"#2c2c2e",950:"#1c1c1e"},red:{50:"#fff5f5",100:"#ffe3e3",200:"#ffc9c9",300:"#ffa8a8",400:"#ff7e7e",500:"#FF3B30",600:"#d63028",700:"#ad2620",800:"#851d19",900:"#5e1412",950:"#420e0d"},orange:{50:"#fff8f0",100:"#ffecdb",200:"#ffd5b0",300:"#ffba7d",400:"#ff9d4d",500:"#FF9500",600:"#d67d00",700:"#ad6500",800:"#854d00",900:"#5e3700",950:"#422700"},yellow:{50:"#fffcf0",100:"#fff7db",200:"#ffecb0",300:"#ffe07d",400:"#ffd44d",500:"#FFCC00",600:"#d6ab00",700:"#ad8a00",800:"#856a00",900:"#5e4b00",950:"#423500"},green:{50:"#f0faf2",100:"#dbf5e0",200:"#b0e8bc",300:"#7dd995",400:"#4dca6f",500:"#34C759",600:"#2ba74a",700:"#23873c",800:"#1b682e",900:"#134a21",950:"#0d3417"},teal:{50:"#f0fcfa",100:"#dbf8f3",200:"#b0f0e4",300:"#7de6d2",400:"#4ddbbf",500:"#5AC8FA",600:"#4ba8d2",700:"#3c88aa",800:"#2e6983",900:"#204b5d",950:"#163542"},blue:{50:"#f0f5ff",100:"#dce8ff",200:"#b4cdff",300:"#84adff",400:"#4d8bff",500:"#007AFF",600:"#0064d6",700:"#004fad",800:"#003c85",900:"#002a5e",950:"#001d42"},indigo:{50:"#f2f0ff",100:"#e3dbff",200:"#c4b0ff",300:"#a27dff",400:"#814dff",500:"#5856D6",600:"#4944b3",700:"#3b3791",800:"#2d2a70",900:"#201e50",950:"#161538"},purple:{50:"#f8f0ff",100:"#efdbff",200:"#dcb0ff",300:"#c67dff",400:"#b04dff",500:"#AF52DE",600:"#9244b9",700:"#763796",800:"#5b2a73",900:"#401e52",950:"#2d1539"},pink:{50:"#fff0f5",100:"#ffdbea",200:"#ffb0d1",300:"#ff7db4",400:"#ff4d98",500:"#FF2D55",600:"#d62647",700:"#ad1f39",800:"#85182c",900:"#5e1120",950:"#420c16"},background:{default:"#ffffff",emphasis:"#f2f2f7",muted:"#f8f8fa",subtle:"#fcfcfd"},foreground:{default:"#1c1c1e",emphasis:"#000000",muted:"#636366",subtle:"#8e8e93"},border:{default:"#d1d1d6",emphasis:"#aeaeb2",muted:"#e5e5ea",subtle:"#f2f2f7"}},I={primary:{50:"#001a3d",100:"#002455",200:"#003580",300:"#0050b3",400:"#0068de",500:"#0A84FF",600:"#3d9eff",700:"#6db5ff",800:"#9dccff",900:"#cce3ff",950:"#e8f2ff"},gray:{25:"#1c1c1e",50:"#2c2c2e",100:"#3a3a3c",200:"#48484a",300:"#636366",400:"#8e8e93",500:"#aeaeb2",600:"#d1d1d6",700:"#e5e5ea",800:"#f2f2f7",900:"#f8f8fa",950:"#fcfcfd"},red:{50:"#3d0a08",100:"#551210",200:"#801f1b",300:"#b33228",400:"#de4a3d",500:"#FF453A",600:"#ff6b63",700:"#ff918b",800:"#ffb8b4",900:"#ffdedd",950:"#fff0ef"},orange:{50:"#3d2400",100:"#553300",200:"#804d00",300:"#b36d00",400:"#de8d00",500:"#FF9F0A",600:"#ffb43d",700:"#ffc96d",800:"#ffdd9d",900:"#fff0cc",950:"#fff8e8"},yellow:{50:"#3d3200",100:"#554500",200:"#806800",300:"#b39200",400:"#deb800",500:"#FFD60A",600:"#ffdf3d",700:"#ffe86d",800:"#fff09d",900:"#fff7cc",950:"#fffbe8"},green:{50:"#0a3015",100:"#10431e",200:"#1a6630",300:"#258f44",400:"#2fb85a",500:"#30D158",600:"#5ddc7c",700:"#89e6a0",800:"#b5f0c3",900:"#e0f9e6",950:"#f0fcf3"},indigo:{50:"#141238",100:"#1d1a50",200:"#2c2980",300:"#3f3cb3",400:"#5351de",500:"#5E5CE6",600:"#807feb",700:"#a1a0f0",800:"#c2c1f5",900:"#e2e2fa",950:"#f2f2fd"},purple:{50:"#2a1239",100:"#3b1a50",200:"#582880",300:"#7b39b3",400:"#9d4bde",500:"#BF5AF2",600:"#cf7ef5",700:"#dda1f7",800:"#ecc4fa",900:"#f7e5fd",950:"#fbf2fe"},pink:{50:"#3d0a1c",100:"#551028",200:"#801a3e",300:"#b32857",400:"#de3672",500:"#FF375F",600:"#ff6282",700:"#ff8da5",800:"#ffb8c7",900:"#ffe3ea",950:"#fff2f5"},teal:{50:"#0a2e3d",100:"#104055",200:"#1a6180",300:"#2588b3",400:"#2fb0de",500:"#64D2FF",600:"#85dcff",700:"#a5e5ff",800:"#c5eeff",900:"#e5f7ff",950:"#f2fbff"},blue:{50:"#001a3d",100:"#002455",200:"#003580",300:"#0050b3",400:"#0068de",500:"#0A84FF",600:"#3d9eff",700:"#6db5ff",800:"#9dccff",900:"#cce3ff",950:"#e8f2ff"},background:{default:"#000000",emphasis:"#1c1c1e",muted:"#2c2c2e",subtle:"#3a3a3c"},foreground:{default:"#f2f2f7",emphasis:"#ffffff",muted:"#aeaeb2",subtle:"#8e8e93"},border:{default:"#48484a",emphasis:"#636366",muted:"#3a3a3c",subtle:"#2c2c2e"}},D={fontFamily:{sans:'-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif',mono:'"SF Mono", SFMono-Regular, ui-monospace, Menlo, Monaco, "Cascadia Code", "Courier New", monospace'},fontSize:{"2xs":"11px",xs:"12px",sm:"13px",base:"15px",md:"17px",lg:"20px",xl:"24px","2xl":"28px","3xl":"34px","4xl":"48px"},fontWeight:{regular:400,medium:500,semibold:600,bold:700},lineHeight:{tight:"1.2",normal:"1.47",relaxed:"1.6"},letterSpacing:{tight:"-0.02em",normal:"0em",wide:"0.02em"}},G={px:"1px",0:"0px",.5:"2px",1:"4px",1.5:"6px",2:"8px",2.5:"10px",3:"12px",4:"16px",5:"20px",6:"24px",8:"32px",10:"40px",12:"48px",16:"64px",20:"80px",24:"96px"},V={none:"0px",xs:"4px",sm:"6px",md:"8px",lg:"12px",xl:"16px","2xl":"20px",full:"9999px"},ft={none:"none",xs:"0 1px 2px rgba(0, 0, 0, 0.04)",sm:"0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04)",md:"0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.04)",lg:"0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04)",xl:"0 20px 25px rgba(0, 0, 0, 0.10), 0 8px 10px rgba(0, 0, 0, 0.04)","2xl":"0 25px 50px rgba(0, 0, 0, 0.15)"},ct={none:"none",xs:"0 1px 2px rgba(0, 0, 0, 0.20)",sm:"0 1px 3px rgba(0, 0, 0, 0.30), 0 1px 2px rgba(0, 0, 0, 0.20)",md:"0 4px 6px rgba(0, 0, 0, 0.28), 0 2px 4px rgba(0, 0, 0, 0.20)",lg:"0 10px 15px rgba(0, 0, 0, 0.30), 0 4px 6px rgba(0, 0, 0, 0.20)",xl:"0 20px 25px rgba(0, 0, 0, 0.35), 0 8px 10px rgba(0, 0, 0, 0.20)","2xl":"0 25px 50px rgba(0, 0, 0, 0.45)"},K={duration:{fast:"100ms",normal:"200ms",slow:"350ms",slower:"500ms"},easing:{default:"cubic-bezier(0.25, 0.1, 0.25, 1)",in:"cubic-bezier(0.42, 0, 1, 1)",out:"cubic-bezier(0, 0, 0.58, 1)",inOut:"cubic-bezier(0.42, 0, 0.58, 1)",spring:"cubic-bezier(0.175, 0.885, 0.32, 1.275)"}},Y={colors:L,typography:D,spacing:G,borderRadius:V,shadows:ft,transitions:K},U={colors:I,typography:D,spacing:G,borderRadius:V,shadows:ct,transitions:K};function ut(t){const e=t.replace("#","");if(/^[0-9a-fA-F]{3}$/.test(e))return e[0]+e[0]+e[1]+e[1]+e[2]+e[2];if(/^[0-9a-fA-F]{6}$/.test(e))return e;throw new Error(`[syntra] Invalid hex color: "${t}"`)}function bt(t){const e=ut(t),n=parseInt(e.slice(0,2),16)/255,r=parseInt(e.slice(2,4),16)/255,a=parseInt(e.slice(4,6),16)/255,o=Math.max(n,r,a),i=Math.min(n,r,a),l=(o+i)/2;if(o===i)return{h:0,s:0,l};const s=o-i,d=l>.5?s/(2-o-i):s/(o+i);let c=0;return o===n?c=((r-a)/s+(r<a?6:0))/6:o===r?c=((a-n)/s+2)/6:c=((n-r)/s+4)/6,{h:c*360,s:d,l}}function gt(t){const{h:e,s:n,l:r}=t;if(n===0)return`#${Math.round(r*255).toString(16).padStart(2,"0").repeat(3)}`;const a=(u,f,y)=>{const m=y<0?y+1:y>1?y-1:y;return m<1/6?u+(f-u)*6*m:m<1/2?f:m<2/3?u+(f-u)*(2/3-m)*6:u},o=r<.5?r*(1+n):r+n-r*n,i=2*r-o,l=e/360,s=Math.round(a(i,o,l+1/3)*255),d=Math.round(a(i,o,l)*255),c=Math.round(a(i,o,l-1/3)*255);return`#${s.toString(16).padStart(2,"0")}${d.toString(16).padStart(2,"0")}${c.toString(16).padStart(2,"0")}`}const yt={50:.97,100:.94,200:.86,300:.76,400:.64,500:.5,600:.42,700:.35,800:.27,900:.2,950:.14};function q(t){const e=bt(t),n={};for(const[r,a]of Object.entries(yt)){const o={...e};o.l=a,a>.9?o.s=e.s*.6:(a>.8||a<.2)&&(o.s=e.s*.8),n[r]=gt(o)}return n}function A(t){return!!(t&&typeof t=="object"&&!Array.isArray(t))}function H(t,...e){const n={...t};for(const r of e)if(A(r))for(const a of Object.keys(r)){const o=r[a];o!==void 0&&(A(o)&&A(n[a])?n[a]=H(n[a],o):n[a]=o)}return n}const pt=[50,100,200,300,400,500,600,700,800,900,950];function W(t,e){if(typeof t=="string")return q(t);const n={...e};for(const r of pt)t[r]!==void 0&&(n[r]=t[r]);return n}const mt=["primary","gray","red","orange","yellow","green","teal","blue","indigo","purple","pink"];function xt(t,e){if(!t)return e.colors;const n={...e.colors};for(const r of mt){const a=t[r];if(a!==void 0)if(r==="gray"){const o=W(a,e.colors.gray);n.gray={...o,25:e.colors.gray[25]}}else n[r]=W(a,e.colors[r])}return t.background&&(n.background={...n.background,...t.background}),t.foreground&&(n.foreground={...n.foreground,...t.foreground}),t.border&&(n.border={...n.border,...t.border}),n}function M(t,e="light"){const n=e==="light"?Y:U;if(!t)return n;const r=xt(t.colors,n),{colors:a,...o}=t,i=H(n,o);return i.colors=r,i}function $(t,e,n){for(const[r,a]of Object.entries(t)){const o=`${e}-${r}`;typeof a=="string"?n[o]=a:typeof a=="number"?n[o]=String(a):a&&typeof a=="object"&&!Array.isArray(a)&&$(a,o,n)}}function ht(t,e="syntra"){const n={};return $(t.colors,`--${e}-color`,n),$(t.typography,`--${e}-font`,n),$(t.spacing,`--${e}-space`,n),$(t.borderRadius,`--${e}-radius`,n),$(t.shadows,`--${e}-shadow`,n),$(t.transitions,`--${e}-transition`,n),n}function vt(t,e="syntra",n=document.documentElement){const r=ht(t,e);for(const[a,o]of Object.entries(r))n.style.setProperty(a,o)}function _t(t="syntra",e=document.documentElement){const n=e.style,r=[];for(let a=0;a<n.length;a++){const o=n[a];o.startsWith(`--${t}-`)&&r.push(o)}for(const a of r)n.removeProperty(a)}function St(){const[t,e]=p.useState(()=>typeof window>"u"?"light":window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light");return p.useEffect(()=>{const n=window.matchMedia("(prefers-color-scheme: dark)"),r=a=>{e(a.matches?"dark":"light")};return n.addEventListener("change",r),()=>n.removeEventListener("change",r)},[]),t}function wt({theme:t,darkTheme:e,mode:n="system",cssVarPrefix:r="syntra",children:a}){const[o,i]=p.useState(n),l=St(),s=p.useRef(null),d=o==="system"?l:o,c=p.useMemo(()=>M(t,"light"),[t]),u=p.useMemo(()=>M(e??t,"dark"),[e,t]),f=d==="dark"?u:c;p.useLayoutEffect(()=>{const b=s.current;b&&vt(f,r,b)},[f,r]),p.useEffect(()=>{const b=s.current;return()=>{b&&_t(r,b)}},[r]);const y=p.useCallback(b=>{i(b)},[]),m=p.useMemo(()=>({theme:f,mode:o,resolvedMode:d,setMode:y,cssVarPrefix:r}),[f,o,d,y,r]);return x.jsx(P.Provider,{value:m,children:x.jsx("div",{ref:s,"data-syntra-root":"","data-syntra-mode":d,style:{display:"contents"},children:a})})}function X(){const t=p.useContext(P);if(!t)throw new Error("useSyntra must be used within a <SyntraProvider>");return t}function kt(){const{resolvedMode:t,setMode:e}=X();return[t,e]}const Nt=new Set(["px","0","0.5","1","1.5","2","2.5","3","4","5","6","8","10","12","16","20","24"]),Ct=new Set(["none","xs","sm","md","lg","xl","2xl","full"]),zt=new Set(["none","xs","sm","md","lg","xl","2xl"]),Ft=new Set(["2xs","xs","sm","base","md","lg","xl","2xl","3xl","4xl"]),$t=new Set(["regular","medium","semibold","bold"]),jt=new Set(["tight","normal","relaxed"]),Tt=new Set(["tight","normal","wide"]);function h(t,e){const n=String(t);return Nt.has(n)?`var(--${e}-space-${n})`:typeof t=="number"?`${t}px`:t}function Et(t,e){return Ct.has(t)?`var(--${e}-radius-${t})`:t}function At(t,e){return zt.has(t)?`var(--${e}-shadow-${t})`:t}function w(t){return typeof t=="number"?`${t}px`:t}function Z(t,e){return Ft.has(t)?`var(--${e}-font-fontSize-${t})`:t}function J(t,e){return $t.has(t)?`var(--${e}-font-fontWeight-${t})`:t}function Mt(t,e){return jt.has(t)?`var(--${e}-font-lineHeight-${t})`:t}function Q(t,e){return Tt.has(t)?`var(--${e}-font-letterSpacing-${t})`:t}function N(t,e="syntra"){const n={};return t.p!=null&&(n.padding=h(t.p,e)),t.px!=null&&(n.paddingLeft=h(t.px,e),n.paddingRight=h(t.px,e)),t.py!=null&&(n.paddingTop=h(t.py,e),n.paddingBottom=h(t.py,e)),t.pt!=null&&(n.paddingTop=h(t.pt,e)),t.pr!=null&&(n.paddingRight=h(t.pr,e)),t.pb!=null&&(n.paddingBottom=h(t.pb,e)),t.pl!=null&&(n.paddingLeft=h(t.pl,e)),t.m!=null&&(n.margin=h(t.m,e)),t.mx!=null&&(n.marginLeft=h(t.mx,e),n.marginRight=h(t.mx,e)),t.my!=null&&(n.marginTop=h(t.my,e),n.marginBottom=h(t.my,e)),t.mt!=null&&(n.marginTop=h(t.mt,e)),t.mr!=null&&(n.marginRight=h(t.mr,e)),t.mb!=null&&(n.marginBottom=h(t.mb,e)),t.ml!=null&&(n.marginLeft=h(t.ml,e)),t.gap!=null&&(n.gap=h(t.gap,e)),t.gapX!=null&&(n.columnGap=h(t.gapX,e)),t.gapY!=null&&(n.rowGap=h(t.gapY,e)),t.w!=null&&(n.width=w(t.w)),t.h!=null&&(n.height=w(t.h)),t.minW!=null&&(n.minWidth=w(t.minW)),t.minH!=null&&(n.minHeight=w(t.minH)),t.maxW!=null&&(n.maxWidth=w(t.maxW)),t.maxH!=null&&(n.maxHeight=w(t.maxH)),t.display!=null&&(n.display=t.display),t.position!=null&&(n.position=t.position),t.overflow!=null&&(n.overflow=t.overflow),t.inset!=null&&(n.inset=w(t.inset)),t.top!=null&&(n.top=w(t.top)),t.right!=null&&(n.right=w(t.right)),t.bottom!=null&&(n.bottom=w(t.bottom)),t.left!=null&&(n.left=w(t.left)),t.bg!=null&&(n.background=t.bg),t.color!=null&&(n.color=t.color),t.opacity!=null&&(n.opacity=t.opacity),t.radius!=null&&(n.borderRadius=Et(t.radius,e)),t.shadow!=null&&(n.boxShadow=At(t.shadow,e)),t.border!=null&&(n.border=t.border),t.borderColor!=null&&(n.borderColor=t.borderColor),t.borderWidth!=null&&(n.borderWidth=w(t.borderWidth)),t.flex!=null&&(n.flex=t.flex),t.flexGrow!=null&&(n.flexGrow=t.flexGrow),t.flexShrink!=null&&(n.flexShrink=t.flexShrink),t.flexBasis!=null&&(n.flexBasis=typeof t.flexBasis=="number"?`${t.flexBasis}px`:t.flexBasis),t.alignSelf!=null&&(n.alignSelf=t.alignSelf),t.justifySelf!=null&&(n.justifySelf=t.justifySelf),n}const Pt=new Set(["p","px","py","pt","pr","pb","pl","m","mx","my","mt","mr","mb","ml","gap","gapX","gapY","w","h","minW","minH","maxW","maxH","display","position","overflow","inset","top","right","bottom","left","bg","color","opacity","radius","shadow","border","borderColor","borderWidth","flex","flexGrow","flexShrink","flexBasis","alignSelf","justifySelf"]);function C(t){const e={},n={};for(const r of Object.keys(t))Pt.has(r)?e[r]=t[r]:n[r]=t[r];return{styleProps:e,rest:n}}function F(){return p.useContext(P)?.cssVarPrefix??"syntra"}function k(...t){const e=[];for(const n of t)if(!(!n&&n!==0)){if(typeof n=="string")e.push(n);else if(typeof n=="number")e.push(String(n));else if(Array.isArray(n)){const r=k(...n);r&&e.push(r)}}return e.join(" ")}const tt=p.forwardRef((t,e)=>{const{as:n="div",className:r,style:a,children:o,...i}=t,l=F(),{styleProps:s,rest:d}=C(i),c=N(s,l);return x.jsx(n,{...d,ref:e,className:k("syntra-box",r),style:{...c,...a},children:o})});tt.displayName="Box";const nt=p.forwardRef((t,e)=>{const{as:n="span",className:r,style:a,children:o,size:i,weight:l,lineHeight:s,tracking:d,align:c,truncate:u,lineClamp:f,mono:y,italic:m,...b}=t,g=F(),{styleProps:S,rest:z}=C(b),j=N(S,g),v={};i!=null&&(v.fontSize=Z(String(i),g)),l!=null&&(v.fontWeight=J(String(l),g)),s!=null&&(v.lineHeight=Mt(String(s),g)),d!=null&&(v.letterSpacing=Q(String(d),g)),c!=null&&(v.textAlign=c),y&&(v.fontFamily=`var(--${g}-font-fontFamily-mono)`),m&&(v.fontStyle="italic"),u&&(v.overflow="hidden",v.textOverflow="ellipsis",v.whiteSpace="nowrap"),f!=null&&(v.display="-webkit-box",v.WebkitLineClamp=f,v.WebkitBoxOrient="vertical",v.overflow="hidden");const T={};return u&&(T["data-truncate"]=""),f!=null&&(T["data-line-clamp"]=String(f)),x.jsx(n,{...z,...T,ref:e,className:k("syntra-text",r),style:{...v,...j,...a},children:o})});nt.displayName="Text";const Ht={h1:{size:"4xl",weight:"bold",tracking:"tight"},h2:{size:"3xl",weight:"bold",tracking:"tight"},h3:{size:"2xl",weight:"semibold",tracking:"tight"},h4:{size:"xl",weight:"semibold",tracking:void 0},h5:{size:"lg",weight:"semibold",tracking:void 0},h6:{size:"md",weight:"medium",tracking:void 0}},et=p.forwardRef((t,e)=>{const{as:n,className:r,style:a,children:o,level:i="h2",size:l,weight:s,tracking:d,...c}=t,u=n||i,f=F(),{styleProps:y,rest:m}=C(c),b=N(y,f),g=Ht[i],S=l??g.size,z=s??g.weight,j=d??g.tracking,v={fontSize:Z(String(S),f),fontWeight:J(String(z),f)};return j!=null&&(v.letterSpacing=Q(String(j),f)),x.jsx(u,{...m,ref:e,className:k("syntra-heading",r),style:{...v,...b,...a},children:o})});et.displayName="Heading";const rt=p.forwardRef((t,e)=>{const{as:n="div",className:r,style:a,children:o,direction:i,align:l,justify:s,wrap:d,inline:c,...u}=t,f=F(),{styleProps:y,rest:m}=C(u),b=N(y,f),g={display:c?"inline-flex":"flex"};return i!=null&&(g.flexDirection=i),l!=null&&(g.alignItems=l),s!=null&&(g.justifyContent=s),d!=null&&(g.flexWrap=d),x.jsx(n,{...m,ref:e,className:k("syntra-flex",r),style:{...g,...b,...a},children:o})});rt.displayName="Flex";const at=p.forwardRef((t,e)=>{const{as:n="div",className:r,style:a,children:o,direction:i="vertical",align:l,justify:s,wrap:d,...c}=t,u=F(),{styleProps:f,rest:y}=C(c),m=N(f,u),b={display:"flex",flexDirection:i==="horizontal"?"row":"column"};l!=null&&(b.alignItems=l),s!=null&&(b.justifyContent=s),d!=null&&(b.flexWrap=d);const g=i==="horizontal"?"horizontal":"vertical";return x.jsx(n,{...y,ref:e,className:k("syntra-stack",r),style:{...b,...m,...a},"data-orientation":g,children:o})});at.displayName="Stack";function B(t){return typeof t=="number"?`repeat(${t}, 1fr)`:t}const ot=p.forwardRef((t,e)=>{const{as:n="div",className:r,style:a,children:o,columns:i,rows:l,areas:s,align:d,justify:c,inline:u,...f}=t,y=F(),{styleProps:m,rest:b}=C(f),g=N(m,y),S={display:u?"inline-grid":"grid"};return i!=null&&(S.gridTemplateColumns=B(i)),l!=null&&(S.gridTemplateRows=B(l)),s!=null&&(S.gridTemplateAreas=s),d!=null&&(S.alignItems=d),c!=null&&(S.justifyContent=c),x.jsx(n,{...b,ref:e,className:k("syntra-grid",r),style:{...S,...g,...a},children:o})});ot.displayName="Grid";const it=p.forwardRef((t,e)=>{const{as:n="div",className:r,style:a,children:o,orientation:i="horizontal",color:l,thickness:s=1,decorative:d=!0,...c}=t,u=F(),{styleProps:f,rest:y}=C(c),m=N(f,u),b=l??`var(--${u}-color-border-default)`,g=typeof s=="number"?`${s}px`:s,S=i==="horizontal"?{width:"100%",height:0,borderTop:`${g} solid ${b}`}:{height:"100%",width:0,borderLeft:`${g} solid ${b}`},z=d?{"aria-hidden":!0}:{role:"separator","aria-orientation":i};return x.jsx(n,{...y,...z,ref:e,className:k("syntra-divider",r),style:{...S,...m,...a},"data-orientation":i,children:o})});it.displayName="Divider";const Rt={position:"absolute",width:1,height:1,padding:0,margin:-1,overflow:"hidden",clip:"rect(0, 0, 0, 0)",whiteSpace:"nowrap",borderWidth:0},st=p.forwardRef((t,e)=>{const{as:n="span",className:r,style:a,children:o,...i}=t;return x.jsx(n,{...i,ref:e,className:r,style:{...Rt,...a},children:o})});st.displayName="VisuallyHidden";const E=new Map;function R(t,e){p.useInsertionEffect(()=>{if((E.get(t)??0)===0){const r=document.createElement("style");r.setAttribute("data-syntra",t),r.textContent=e,document.head.appendChild(r)}return E.set(t,(E.get(t)??0)+1),()=>{const r=(E.get(t)??1)-1;r<=0?(E.delete(t),document.head.querySelector(`style[data-syntra="${t}"]`)?.remove()):E.set(t,r)}},[t,e])}const Ot=`
+@keyframes syntra-spin {
+  to { transform: rotate(360deg); }
+}
+.syntra-spinner {
+  animation: syntra-spin 0.6s linear infinite;
+}
+`;function O({size:t="1em",color:e="currentColor",className:n,style:r}){R("spinner",Ot);const a=typeof t=="number"?`${t}px`:t;return x.jsx("svg",{className:`syntra-spinner${n?` ${n}`:""}`,width:a,height:a,viewBox:"0 0 24 24",fill:"none",stroke:e,strokeWidth:"2.5",strokeLinecap:"round",style:r,"aria-hidden":"true",children:x.jsx("path",{d:"M12 2a10 10 0 0 1 10 10"})})}O.displayName="Spinner";const Wt=`
+.syntra-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  white-space: nowrap;
+  user-select: none;
+  vertical-align: middle;
+  cursor: pointer;
+  font-family: inherit;
+  font-weight: var(--_btn-fw);
+  font-size: var(--_btn-fz);
+  height: var(--_btn-h);
+  padding-left: var(--_btn-px);
+  padding-right: var(--_btn-px);
+  gap: var(--_btn-gap);
+  border-radius: var(--_btn-radius);
+  background: var(--_btn-bg);
+  color: var(--_btn-color);
+  border: 1px solid var(--_btn-border, transparent);
+  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, opacity 150ms ease;
+  text-decoration: none;
+  outline: none;
+}
+.syntra-button:hover:not(:disabled):not([data-loading]) {
+  background: var(--_btn-bg-hover);
+  border-color: var(--_btn-border-hover, transparent);
+  color: var(--_btn-color-hover, var(--_btn-color));
+}
+.syntra-button:active:not(:disabled):not([data-loading]) {
+  background: var(--_btn-bg-active);
+}
+.syntra-button:focus-visible {
+  outline: 2px solid var(--_btn-ring);
+  outline-offset: 2px;
+}
+.syntra-button:disabled,
+.syntra-button[data-loading] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.syntra-button[data-loading] {
+  cursor: wait;
+  pointer-events: none;
+}
+.syntra-button[data-full-width] {
+  width: 100%;
+}
+.syntra-button[data-variant="link"] {
+  height: auto;
+  padding-left: 0;
+  padding-right: 0;
+  background: transparent;
+  border-color: transparent;
+}
+.syntra-button[data-variant="link"]:hover:not(:disabled) {
+  text-decoration: underline;
+  background: transparent;
+}
+.syntra-button-label[data-loading] {
+  opacity: 0;
+}
+.syntra-button-spinner {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+`,Bt={xs:{"--_btn-h":"28px","--_btn-px":"10px","--_btn-fz":"var(--syntra-font-fontSize-2xs)","--_btn-fw":"500","--_btn-radius":"var(--syntra-radius-sm)","--_btn-gap":"4px"},sm:{"--_btn-h":"32px","--_btn-px":"12px","--_btn-fz":"var(--syntra-font-fontSize-xs)","--_btn-fw":"500","--_btn-radius":"var(--syntra-radius-sm)","--_btn-gap":"6px"},md:{"--_btn-h":"36px","--_btn-px":"16px","--_btn-fz":"var(--syntra-font-fontSize-sm)","--_btn-fw":"500","--_btn-radius":"var(--syntra-radius-md)","--_btn-gap":"8px"},lg:{"--_btn-h":"44px","--_btn-px":"20px","--_btn-fz":"var(--syntra-font-fontSize-md)","--_btn-fw":"500","--_btn-radius":"var(--syntra-radius-md)","--_btn-gap":"8px"}};function Lt(t){return Bt[t]}function _(t,e){return t==="danger"?`var(--syntra-color-red-${e})`:`var(--syntra-color-${t}-${e})`}function It(t,e){const n=e==="neutral"?"var(--syntra-color-foreground-subtle)":e==="danger"?"var(--syntra-color-red-500)":`var(--syntra-color-${e}-500)`;return(()=>{switch(t){case"solid":return e==="neutral"?{"--_btn-bg":"var(--syntra-color-foreground-default)","--_btn-bg-hover":"var(--syntra-color-foreground-muted)","--_btn-bg-active":"var(--syntra-color-foreground-subtle)","--_btn-color":"var(--syntra-color-background-default)","--_btn-border":"transparent","--_btn-ring":n}:{"--_btn-bg":_(e,500),"--_btn-bg-hover":_(e,600),"--_btn-bg-active":_(e,700),"--_btn-color":"#fff","--_btn-border":"transparent","--_btn-ring":n};case"outline":return e==="neutral"?{"--_btn-bg":"transparent","--_btn-bg-hover":"var(--syntra-color-background-emphasis)","--_btn-bg-active":"var(--syntra-color-background-subtle)","--_btn-color":"var(--syntra-color-foreground-default)","--_btn-border":"var(--syntra-color-border-default)","--_btn-border-hover":"var(--syntra-color-border-emphasis)","--_btn-ring":n}:{"--_btn-bg":"transparent","--_btn-bg-hover":_(e,50),"--_btn-bg-active":_(e,100),"--_btn-color":_(e,500),"--_btn-border":_(e,500),"--_btn-border-hover":_(e,600),"--_btn-ring":n};case"ghost":return e==="neutral"?{"--_btn-bg":"transparent","--_btn-bg-hover":"var(--syntra-color-background-emphasis)","--_btn-bg-active":"var(--syntra-color-background-subtle)","--_btn-color":"var(--syntra-color-foreground-default)","--_btn-border":"transparent","--_btn-ring":n}:{"--_btn-bg":"transparent","--_btn-bg-hover":_(e,50),"--_btn-bg-active":_(e,100),"--_btn-color":_(e,500),"--_btn-border":"transparent","--_btn-ring":n};case"soft":return e==="neutral"?{"--_btn-bg":"var(--syntra-color-background-emphasis)","--_btn-bg-hover":"var(--syntra-color-background-subtle)","--_btn-bg-active":"var(--syntra-color-border-default)","--_btn-color":"var(--syntra-color-foreground-default)","--_btn-border":"transparent","--_btn-ring":n}:{"--_btn-bg":_(e,50),"--_btn-bg-hover":_(e,100),"--_btn-bg-active":_(e,200),"--_btn-color":_(e,700),"--_btn-border":"transparent","--_btn-ring":n};case"link":return e==="neutral"?{"--_btn-bg":"transparent","--_btn-bg-hover":"transparent","--_btn-bg-active":"transparent","--_btn-color":"var(--syntra-color-foreground-default)","--_btn-color-hover":"var(--syntra-color-foreground-muted)","--_btn-border":"transparent","--_btn-ring":n}:{"--_btn-bg":"transparent","--_btn-bg-hover":"transparent","--_btn-bg-active":"transparent","--_btn-color":_(e,500),"--_btn-color-hover":_(e,600),"--_btn-border":"transparent","--_btn-ring":n}}})()}const lt=p.forwardRef((t,e)=>{const{as:n="button",variant:r="solid",colorScheme:a="primary",size:o="md",loading:i=!1,disabled:l=!1,fullWidth:s=!1,leftSection:d,rightSection:c,className:u,style:f,children:y,...m}=t;R("button",Wt);const b=F(),{styleProps:g,rest:S}=C(m),z=N(g,b),j=It(r,a),v=Lt(o),T=l||i;return x.jsxs(n,{...S,ref:e,className:k("syntra-button",u),disabled:n==="button"?T:void 0,"aria-disabled":n!=="button"&&T?!0:void 0,"data-variant":r,"data-loading":i||void 0,"data-full-width":s||void 0,style:{...j,...v,...z,...f},children:[i&&x.jsx("span",{className:"syntra-button-spinner",children:x.jsx(O,{})}),d&&x.jsx("span",{className:"syntra-button-section","data-position":"left","aria-hidden":"true",children:d}),x.jsx("span",{className:"syntra-button-label","data-loading":i||void 0,children:y}),c&&x.jsx("span",{className:"syntra-button-section","data-position":"right","aria-hidden":"true",children:c})]})});lt.displayName="Button";const Dt=`
+.syntra-input-wrapper {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  width: var(--_input-w, auto);
+  height: var(--_input-h);
+  padding-left: var(--_input-px);
+  padding-right: var(--_input-px);
+  gap: var(--_input-gap);
+  border-radius: var(--_input-radius);
+  background: var(--_input-bg);
+  border: 1px solid var(--_input-border, transparent);
+  font-family: inherit;
+  font-size: var(--_input-fz);
+  transition: border-color 150ms ease, box-shadow 150ms ease;
+}
+.syntra-input-wrapper:focus-within:not([data-disabled]):not([data-variant="unstyled"]) {
+  border-color: var(--_input-focus-border);
+  box-shadow: 0 0 0 1px var(--_input-focus-border);
+}
+.syntra-input-wrapper[data-invalid]:not([data-disabled]) {
+  border-color: var(--_input-invalid-border);
+}
+.syntra-input-wrapper[data-invalid]:focus-within:not([data-disabled]) {
+  border-color: var(--_input-invalid-border);
+  box-shadow: 0 0 0 1px var(--_input-invalid-border);
+}
+.syntra-input-wrapper[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.syntra-input {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  padding: 0;
+}
+.syntra-input::placeholder {
+  color: var(--syntra-color-foreground-muted);
+}
+.syntra-input:disabled {
+  cursor: not-allowed;
+}
+.syntra-input-section {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--syntra-color-foreground-muted);
+}
+`,Gt={xs:{"--_input-h":"28px","--_input-px":"8px","--_input-fz":"var(--syntra-font-fontSize-2xs)","--_input-radius":"var(--syntra-radius-sm)","--_input-gap":"4px"},sm:{"--_input-h":"32px","--_input-px":"10px","--_input-fz":"var(--syntra-font-fontSize-xs)","--_input-radius":"var(--syntra-radius-sm)","--_input-gap":"6px"},md:{"--_input-h":"36px","--_input-px":"12px","--_input-fz":"var(--syntra-font-fontSize-sm)","--_input-radius":"var(--syntra-radius-md)","--_input-gap":"8px"},lg:{"--_input-h":"44px","--_input-px":"16px","--_input-fz":"var(--syntra-font-fontSize-md)","--_input-radius":"var(--syntra-radius-md)","--_input-gap":"8px"}};function Vt(t){return Gt[t]}const Kt={outline:{"--_input-bg":"var(--syntra-color-background-default)","--_input-border":"var(--syntra-color-border-default)","--_input-focus-border":"var(--syntra-color-primary-500)","--_input-invalid-border":"var(--syntra-color-red-500)"},filled:{"--_input-bg":"var(--syntra-color-background-emphasis)","--_input-border":"transparent","--_input-focus-border":"var(--syntra-color-primary-500)","--_input-invalid-border":"var(--syntra-color-red-500)"},unstyled:{"--_input-bg":"transparent","--_input-border":"transparent","--_input-focus-border":"transparent","--_input-invalid-border":"transparent"}};function Yt(t){return Kt[t]}const dt=p.forwardRef((t,e)=>{const{variant:n="outline",size:r="md",invalid:a=!1,leftSection:o,rightSection:i,wrapperClassName:l,wrapperStyle:s,className:d,style:c,disabled:u,...f}=t;R("input",Dt);const y=F(),{styleProps:m,rest:b}=C(f),g=N(m,y),S=Yt(n),z=Vt(r);return x.jsxs("div",{className:k("syntra-input-wrapper",l),"data-variant":n,"data-size":r,"data-invalid":a||void 0,"data-disabled":u||void 0,style:{...S,...z,...g,...s},children:[o&&x.jsx("span",{className:"syntra-input-section","data-position":"left",children:o}),x.jsx("input",{...b,ref:e,className:k("syntra-input",d),disabled:u,"aria-invalid":a||void 0,style:c}),i&&x.jsx("span",{className:"syntra-input-section","data-position":"right",children:i})]})});dt.displayName="Input";exports.Box=tt;exports.Button=lt;exports.Divider=it;exports.Flex=rt;exports.Grid=ot;exports.Heading=et;exports.Input=dt;exports.Spinner=O;exports.Stack=at;exports.SyntraProvider=wt;exports.Text=nt;exports.VisuallyHidden=st;exports.cn=k;exports.createSyntraTheme=M;exports.darkColors=I;exports.deepMerge=H;exports.defaultDarkTheme=U;exports.defaultLightTheme=Y;exports.extractStyleProps=C;exports.generateColorScale=q;exports.lightColors=L;exports.resolveStyleProps=N;exports.useSyntra=X;exports.useSyntraMode=kt;