@optiaxiom/web-components 0.1.0-next.1 → 0.1.0-next.3

package/README.md

@@ -24,7 +24,8 @@ Use your favorite CDN to import the package:
 
 ```html
 <script
-  src="https://esm.run/@optiaxiom/web-components@0.1.0"
+  <!-- Make sure to replace `latest` with a fixed version number. -->
+  src="https://cdn.jsdelivr.net/npm/@optiaxiom/web-components@latest/dist/index.js"
   type="module"
 ></script>
 
@@ -39,7 +40,7 @@ By default the index entry of the library lazy loads components to avoid loading
 
 ```html
 <script
-  src="https://esm.run/@optiaxiom/web-components@0.1.0" <!-- index entry -->
+  src="https://cdn.jsdelivr.net/npm/@optiaxiom/web-components@latest/dist/index.js" <!-- `index.js` entry -->
   type="module"
 ></script>
 
@@ -70,7 +71,7 @@ function App() {
 
 ```html
 <script
-  src="https://esm.run/@optiaxiom/web-components@0.1.0/Button" <!-- `/Button` path -->
+  src="https://cdn.jsdelivr.net/npm/@optiaxiom/web-components@latest/dist/Button.js" <!-- `Button.js` entry -->
   type="module"
 ></script>
 
@@ -88,7 +89,7 @@ Simply set the `slot` attribute to the corresponding prop name in your HTML.
 
 ```html
 <ax-input>
-  <svg slot="leftSection">
+  <svg slot="startDecorator">
     <!-- ... -->
   </svg>
 </ax-input>

package/dist/AnimatePresence-DvfDfq0x.js

@@ -0,0 +1 @@
+import{p as c,F as p,x as a,a as m,u as v}from"./register-C6qZMQlw.js";import{r as d}from"./PresenceContext-BIyw24mj.js";const w=({children:e})=>{const[n,l]=c(new Map),o=p(e);e&&(o.current=e);const t=!!e,i=a(s=>{l(r=>(r.delete(s),new Map(r.entries())))},[]),u=a(s=>{l(r=>(r.set(s,!0),new Map(r.entries())))},[]);return m(()=>{!t&&[...n.values()].some(Boolean)&&(o.current=!1)},[n,t]),v(d.Provider,{value:{isPresent:t,onExitComplete:i,register:u},children:e||([...n.values()].some(Boolean)?o.current:null)})};export{w as v};

package/dist/AnimatePresence.d.ts

@@ -0,0 +1,14 @@
+import { AnimatePresence as AnimatePresence$1 } from '@optiaxiom/react';
+import { C as ComponentAttributes } from './ComponentAttributes-D-k8G2HF.js';
+import 'react';
+
+declare const AnimatePresence = "ax-animate-presence";
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            [AnimatePresence]: ComponentAttributes<typeof AnimatePresence$1>;
+        }
+    }
+}
+
+export { AnimatePresence };

package/dist/AnimatePresence.js

@@ -0,0 +1 @@
+import{r}from"./register-C6qZMQlw.js";import{v as t}from"./AnimatePresence-DvfDfq0x.js";import"./PresenceContext-BIyw24mj.js";const e="ax-animate-presence";r(e,t);export{e as AnimatePresence};

package/dist/Avatar.d.ts

@@ -0,0 +1,14 @@
+import { Avatar as Avatar$1 } from '@optiaxiom/react';
+import { C as ComponentAttributes } from './ComponentAttributes-D-k8G2HF.js';
+import 'react';
+
+declare const Avatar = "ax-avatar";
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            [Avatar]: ComponentAttributes<typeof Avatar$1>;
+        }
+    }
+}
+
+export { Avatar };

package/dist/Avatar.js

@@ -0,0 +1 @@
+import{k as i,p as b,_ as g,a as _,i as y,u as l,r as z}from"./register-C6qZMQlw.js";import{t as f,y as m,o as $}from"./Box-9LrXBb0B.js";import{$ as C}from"./index-D-Y5pVgW.js";import{$ as L,a as x}from"./index-DoeKEfO9.js";import{$ as u}from"./index-DLtacV-Q.js";const v="Avatar",[w,Q]=C(v),[I,h]=w(v),M=i((r,t)=>{const{__scopeAvatar:a,...e}=r,[o,n]=b("idle");return g(I,{scope:a,imageLoadingStatus:o,onImageLoadingStatusChange:n},g(u.span,f({},e,{ref:t})))}),k="AvatarImage",j=i((r,t)=>{const{__scopeAvatar:a,src:e,onLoadingStatusChange:o=()=>{},...n}=r,s=h(k,a),c=P(e),d=L(p=>{o(p),s.onImageLoadingStatusChange(p)});return x(()=>{c!=="idle"&&d(c)},[c,d]),c==="loaded"?g(u.img,f({},n,{ref:t,src:e})):null}),N="AvatarFallback",E=i((r,t)=>{const{__scopeAvatar:a,delayMs:e,...o}=r,n=h(N,a),[s,c]=b(e===void 0);return _(()=>{if(e!==void 0){const d=window.setTimeout(()=>c(!0),e);return()=>window.clearTimeout(d)}},[e]),s&&n.imageLoadingStatus!=="loaded"?g(u.span,f({},o,{ref:t})):null});function P(r){const[t,a]=b("idle");return x(()=>{if(!r){a("error");return}let e=!0;const o=new window.Image,n=s=>()=>{e&&a(s)};return a("loading"),o.onload=n("loaded"),o.onerror=n("error"),o.src=r,()=>{e=!1}},[r]),t}const T=M,F=j,R=E;y("@layer optiaxiom._1kfj4ga1{.t64xwp0{user-select:none}}");var B=m({base:[{alignItems:"center",display:"inline-flex",justifyContent:"center",overflow:"hidden",rounded:"full"},"t64xwp0"],variants:{colorScheme:{blue:{bg:"blue.50",color:"blue.500"},brand:{bg:"brand.50",color:"brand.500"},dark:{bg:"dark.50",color:"dark.500"},gray:{bg:"gray.50",color:"gray.500"},green:{bg:"green.50",color:"green.500"},magenta:{bg:"magenta.50",color:"magenta.500"},neutral:{bg:"neutral.50",color:"neutral.500"},orange:{bg:"orange.50",color:"orange.500"},purple:{bg:"purple.50",color:"purple.500"},red:{bg:"red.50",color:"red.500"},slate:{bg:"slate.50",color:"slate.500"},yellow:{bg:"yellow.50",color:"yellow.500"}},size:{xs:{fontSize:"xs",size:"xs"},sm:{fontSize:"sm",size:"sm"},md:{fontSize:"md",size:"md"},lg:{fontSize:"lg",size:"lg"},xl:{fontSize:"xl",size:"xl"}}}}),G=m({base:{alignItems:"center",display:"flex",justifyContent:"center",rounded:"inherit",size:"full",textTransform:"uppercase"},variants:{size:{xs:{px:"4"},sm:{px:"6"},md:{px:"8"},lg:{px:"10"},xl:{px:"20"}}}});const K=600;function V(r){const t=r.trim().split(" "),a=t[0]??"",e=t.length>1?t[t.length-1]:"";return a&&e?`${a.charAt(0)}${e.charAt(0)}`:a.charAt(0)}const A=i(({children:r,className:t,colorScheme:a="neutral",icon:e,name:o,size:n="md",src:s,...c},d)=>l($,{asChild:!0,...B({colorScheme:a,size:n},t),...c,children:l(T,{ref:d,children:[l($,{asChild:!0,objectFit:"cover",rounded:"inherit",size:"full",children:l(F,{alt:o,src:s})}),l($,{asChild:!0,...G({size:n}),children:l(R,{delayMs:K,children:e||(o?V(o):r)})})]})}));A.displayName="@optiaxiom/react/Avatar";const S="ax-avatar";z(S,A);export{S as Avatar};