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

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-xFEkv6qb.js

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

package/dist/AlertDialog-BopKGw2N.js

@@ -0,0 +1 @@
+import{i as s,k as m,u as o}from"./register-7aDWC8F8.js";import{P as v,O as h,C as f,R as x}from"./index-G205dGz1.js";import{c as y}from"./index-D_04lruD.js";import{v as g}from"./AnimatePresence-CATwQfKn.js";import"./PresenceContext-BCgBSKrD.js";import{f as t}from"./Box-BXKKGQTC.js";import{r}from"./Transition-NhPs-d_m.js";import{y as i}from"./recipeRuntime-CMA2Nc4y.js";const[w,R]=y("AlertDialog");s("@layer optiaxiom._1kfj4ga1{.ot5vc20{left:50%;max-width:calc(100dvw - 48px);position:fixed;top:50%;translate:-50% -50%}.ot5vc21{width:400px}.ot5vc22{width:600px}.ot5vc23{width:800px}.ot5vc24{inset:0;position:fixed}}");var b=i({base:[{bg:"surface",rounded:"lg",shadow:"md",z:"popover"},"ot5vc20"],variants:{size:{sm:"ot5vc21",md:"ot5vc22",lg:"ot5vc23"}}}),z=i({base:[{bg:"overlay",z:"popover"},"ot5vc24"]});const a=m(({appearance:c="primary",children:p,open:e,size:d="sm",...l},n)=>o(x,{open:e,children:o(w,{appearance:c,children:o(g,{children:e&&o(v,{forceMount:!0,children:[o(r,{children:o(t,{asChild:!0,...z(),children:o(h,{})})}),o(r,{"data-side":"bottom",type:"fade",children:o(t,{asChild:!0,...b({size:d}),children:o(f,{ref:n,...l,children:p})})})]})})})}));a.displayName="@optiaxiom/react/AlertDialog";export{a as m};

package/dist/AnimatePresence-CATwQfKn.js

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

package/dist/AvatarContext-AbSuJl7X.js

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

package/dist/Badge-BUvIi9RJ.js

@@ -0,0 +1 @@
+import{i as s,k as c,u as n}from"./register-7aDWC8F8.js";import{r as e}from"./Text-ChRXeZSF.js";import{y as w}from"./recipeRuntime-CMA2Nc4y.js";import"./Box-BXKKGQTC.js";s("@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",...u},l)=>n(e,{as:"span",asChild:a,ref:l,role:"presentation",...t({colorScheme:d,variant:b},i),...u,children:o}));r.displayName="@optiaxiom/react/Badge";export{r};