@optiaxiom/web-components 0.1.0-next.4 → 0.1.0-next.6

package/README.md

@@ -4,21 +4,31 @@ A framework agnostic variant of the Optimizely Design System.
 
 ## Getting Started
 
+Please read the full [documentation](https://optimizely-axiom.github.io/optiaxiom/) for guides, examples, and API.
+
+### Bundler usage
+
+Use your favorite package manager to install the package:
+
 ```sh
 npm install @optiaxiom/web-components
 ```
 
+Wrap your application with `AxiomProvider` and simply import and use the components:
+
 ```tsx
-import { Button } from "@optiaxiom/web-components";
+import { AxiomProvider, Button } from "@optiaxiom/web-components";
 
 function App() {
-  return <Button>Hello World!</Button>;
+  return (
+    <AxiomProvider>
+      <Button>Hello World!</Button>
+    </AxiomProvider>
+  );
 }
 ```
 
-Please read the full [documentation](https://optimizely-axiom.github.io/optiaxiom/) for guides, examples, and API.
-
-## CDN usage
+### CDN usage
 
 Use your favorite CDN to import the package:
 
@@ -28,11 +38,15 @@ Use your favorite CDN to import the package:
   src="https://cdn.jsdelivr.net/npm/@optiaxiom/web-components@latest/dist/index.js"
   type="module"
 ></script>
-
-<ax-button>Hello World!</ax-button>
 ```
 
-All components are available under the `ax-*` prefix and in kebab-case naming.
+Wrap your application with `ax-axiom-provider` element and then use all components available under the `ax-*` prefix:
+
+```html
+<ax-axiom-provider>
+  <ax-button>Hello World!</ax-button>
+</ax-axiom-provider>
+```
 
 ## Lazy loading
 
@@ -45,13 +59,13 @@ By default the index entry of the library lazy loads components to avoid loading
 ></script>
 
 <!--
-  The script for `ax-button` is not loaded and the component is not defined
-  until an element is inserted into the DOM.
+  The script for `ax-button` is not loaded until an element is inserted into
+  the DOM.
 -->
 <ax-button>Hello World!</ax-button>
 ```
 
-We use `MutationObserver` to detect when an `ax-*` element is present in the DOM and only load the code for the corresponding component.
+We use proxy components to detect when an `ax-*` element is connected in the DOM and only then load the actual code for the corresponding component.
 
 ### Explicit loading
 
@@ -71,7 +85,7 @@ function App() {
 
 ```html
 <script
-  src="https://cdn.jsdelivr.net/npm/@optiaxiom/web-components@latest/dist/Button.js" <!-- `Button.js` entry -->
+  src="https://cdn.jsdelivr.net/npm/@optiaxiom/web-components@latest/dist/components/Button.js" <!-- `Button.js` entry -->
   type="module"
 ></script>
 
@@ -83,7 +97,7 @@ function App() {
 
 ## Slots
 
-We use `shadow DOM` for our web components and support slot usages for components.
+We use `Shadow DOM` for our web components and support slot usages for components.
 
 Simply set the `slot` attribute to the corresponding prop name in your HTML.
 

package/dist/AccordionContext-Dr-EEVfx.js

@@ -0,0 +1 @@
+import{c as o}from"./index-BaU0ZfEj.js";const[t,r]=o("Accordion");export{r,t};

package/dist/AlertDialogContext-DbShODuH.js

@@ -0,0 +1 @@
+import{c as o}from"./index-BaU0ZfEj.js";const[t,e]=o("AlertDialog");export{t as e,e as o};

package/dist/AnimatePresence-BbWMIAMv.js

@@ -0,0 +1 @@
+import{G as p,h as d,A as v,q as a,y as x,u as P}from"./register-DdihPvJa.js";const l=p({isPresent:!0,onExitComplete:e=>{},register:e=>{}});function c({children:e}){const[n,i]=d(new Map),t=v(e);e&&(t.current=e);const o=!!e,u=a(s=>{i(r=>(r.delete(s),new Map(r.entries())))},[]),m=a(s=>{i(r=>(r.set(s,!0),new Map(r.entries())))},[]);return x(()=>{!o&&[...n.values()].some(Boolean)&&(t.current=!1)},[n,o]),P(l.Provider,{value:{isPresent:o,onExitComplete:u,register:m},children:e||([...n.values()].some(Boolean)?t.current:null)})}c.displayName="@optiaxiom/react/AnimatePresence";export{l as r,c as u};

package/dist/AvatarContext-DEstsvfZ.js

@@ -0,0 +1 @@
+import{G as o}from"./register-DdihPvJa.js";const i=o({size:void 0});export{i as o};

package/dist/Badge-CuyBX-YF.js

@@ -0,0 +1 @@
+import{i as s,k as c,u as e}from"./register-DdihPvJa.js";import{r as n}from"./Text-CqYojU6a.js";import{y as w}from"./recipeRuntime-ZMTVowk_.js";import"./Box-qixlfMoF.js";s("@layer optiaxiom._1kfj4ga1;@layer optiaxiom._1kfj4ga1{.diw4ub4{--diw4ub3:var(--ax-colors-fg-default-inverse);padding:4px 8px}.diw4ub5{--diw4ub2:var(--ax-colors-bg-error-solid);--diw4ub0:var(--ax-colors-bg-error);--diw4ub1:var(--ax-colors-fg-error)}.diw4ub6{--diw4ub2:var(--ax-colors-bg-information-solid);--diw4ub0:var(--ax-colors-bg-information);--diw4ub1:var(--ax-colors-fg-information)}.diw4ub7{--diw4ub2:var(--ax-colors-bg-neutral-solid);--diw4ub3:var(--ax-colors-fg-default);--diw4ub0:var(--ax-colors-bg-neutral);--diw4ub1:var(--ax-colors-fg-secondary)}.diw4ub8{--diw4ub2:var(--ax-colors-bg-brand-solid);--diw4ub0:var(--ax-colors-bg-brand);--diw4ub1:var(--ax-colors-fg-brand)}.diw4ub9{--diw4ub2:var(--ax-colors-bg-success-solid);--diw4ub0:var(--ax-colors-bg-success);--diw4ub1:var(--ax-colors-fg-success)}.diw4uba{--diw4ub2:var(--ax-colors-bg-warning-solid);--diw4ub3:var(--ax-colors-fg-default);--diw4ub0:var(--ax-colors-bg-warning);--diw4ub1:var(--ax-colors-fg-warning)}.diw4ubb{background-color:var(--diw4ub0);color:var(--diw4ub1)}.diw4ubc{background-color:var(--diw4ub2);color:var(--diw4ub3)}}");var t=w({base:[{display:"inline-flex",fontSize:"sm",fontWeight:"500",justifyContent:"center",leading:"none",rounded:"full"},"diw4ub4"],variants:{colorScheme:{danger:"diw4ub5",information:"diw4ub6",neutral:"diw4ub7",primary:"diw4ub8",success:"diw4ub9",warning:"diw4uba"},variant:{light:"diw4ubb",solid:"diw4ubc"}}});const r=c(({asChild:a,children:o,className:i,colorScheme:d="neutral",variant:b="light",...l},u)=>e(n,{as:"span",asChild:a,ref:u,role:"presentation",...t({colorScheme:d,variant:b},i),...l,children:o}));r.displayName="@optiaxiom/react/Badge";export{r};