+
+
+ {title ?? `${name} demo`}
+
+
+
+
+ );
+}
diff --git a/docs/src/components/Demo/styles.module.css b/docs/src/components/Demo/styles.module.css
new file mode 100644
index 0000000..6613f8a
--- /dev/null
+++ b/docs/src/components/Demo/styles.module.css
@@ -0,0 +1,58 @@
+.frame {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ border: 1px solid var(--ifm-color-emphasis-300);
+ border-radius: 12px;
+ overflow: hidden;
+ margin: 1.5rem 0;
+ background: var(--ifm-background-surface-color);
+}
+
+.bar {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 8px 12px;
+ border-bottom: 1px solid var(--ifm-color-emphasis-200);
+ background: var(--ifm-color-emphasis-100);
+}
+
+.dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ background: #ff5f57;
+ box-shadow: 16px 0 0 #febc2e, 32px 0 0 #28c840;
+ margin-right: 28px;
+}
+
+.label {
+ font-size: 0.8rem;
+ font-weight: 600;
+ color: var(--ifm-color-emphasis-700);
+ text-transform: capitalize;
+}
+
+.reset {
+ margin-left: auto;
+ font-size: 0.75rem;
+ font-weight: 600;
+ color: var(--ifm-color-emphasis-700);
+ background: transparent;
+ border: 1px solid var(--ifm-color-emphasis-300);
+ border-radius: 6px;
+ padding: 3px 10px;
+ cursor: pointer;
+}
+
+.reset:hover {
+ background: var(--ifm-color-emphasis-200);
+}
+
+.iframe {
+ flex: 1;
+ width: 100%;
+ border: none;
+ display: block;
+}
diff --git a/docs/static/demos/_expo/static/js/web/index-647896b5b5e846294f3b74168a61631f.js b/docs/static/demos/_expo/static/js/web/index-647896b5b5e846294f3b74168a61631f.js
new file mode 100644
index 0000000..1138c34
--- /dev/null
+++ b/docs/static/demos/_expo/static/js/web/index-647896b5b5e846294f3b74168a61631f.js
@@ -0,0 +1,1309 @@
+var __BUNDLE_START_TIME__=globalThis.nativePerformanceNow?nativePerformanceNow():Date.now(),__DEV__=false,process=globalThis.process||{},__METRO_GLOBAL_PREFIX__='';process.env=process.env||{};process.env.NODE_ENV=process.env.NODE_ENV||"production";
+!(function(e){'use strict';e[`${__METRO_GLOBAL_PREFIX__}__d`]||(e.__r=i,e[`${__METRO_GLOBAL_PREFIX__}__d`]=function(e,n,o){if(t.has(n))return;const i={dependencyMap:o,factory:e,hasError:!1,importedAll:r,importedDefault:r,isInitialized:!1,publicModule:{exports:{}}};t.set(n,i)},e.__c=o,e.__registerSegment=function(e,r,n){c[e]=r,n&&n.forEach(r=>{t.has(r)||s.has(r)||s.set(r,e)})});var t=o();const r={},{hasOwnProperty:n}={};function o(){return t=new Map}function i(e,r){if(null===e)throw new Error('Cannot find module');const n=t.get(e);return n&&n.isInitialized?n.publicModule.exports:a(e,n,r)}function l(e){var n;if(t.has(e)&&(null==(n=t.get(e))?void 0:n.importedDefault)!==r)return t.get(e).importedDefault;const o=i(e),l=o&&o.__esModule?o.default:o;return t.get(e).importedDefault=l}function u(e){var o;if(t.has(e)&&(null==(o=t.get(e))?void 0:o.importedAll)!==r)return t.get(e).importedAll;const l=i(e);let u;if(l&&l.__esModule)u=l;else{if(u={},l)for(const e in l)n.call(l,e)&&(u[e]=l[e]);u.default=l}return t.get(e).importedAll=u}i.importDefault=l,i[Symbol.for('expo.require')]=!0,i.importAll=u,i.context=function(){throw new Error('The experimental Metro feature `require.context` is not enabled in your project.')},i.resolveWeak=function(){throw new Error('require.resolveWeak cannot be called dynamically.')},i.unguarded=function(e,r){const n=t.get(e);return n&&n.isInitialized?n.publicModule.exports:f(e,n,r)};let d=!1;function a(t,r,n){if(!d&&e.ErrorUtils){let o;d=!0;try{o=f(t,r,n)}catch(t){e.ErrorUtils.reportFatalError(t)}return d=!1,o}return f(t,r,n)}i.unpackModuleId=function(e){if('number'!=typeof e)throw new Error('Module ID must be a number in unpackModuleId.');return{segmentId:e>>>16,localId:65535&e}},i.packModuleId=function(e){return(e.segmentId<<16)+e.localId};const c=[],s=new Map;function f(r,n,o){if(!n&&c.length>0){const e=s.get(r)??0,o=c[e];null!=o&&(o(r),n=t.get(r),s.delete(r))}if(!n)throw p(r,o);if(n.hasError)throw n.error;n.isInitialized=!0;const{factory:d,dependencyMap:a}=n;try{const t=n.publicModule;return t.id=r,null==d||d(e,i,l,u,t,t.exports,a),n.factory=void 0,n.dependencyMap=void 0,t.exports}catch(e){throw n.hasError=!0,n.error=e,n.isInitialized=!1,n.publicModule.exports=void 0,e}}function p(e,t){return Error('Requiring unknown module "'+(e??t??"[unknown optional import]")+'".')}})('undefined'!=typeof globalThis?globalThis:'undefined'!=typeof global?global:'undefined'!=typeof window?window:this);
+!(function(e){e.$$require_external="undefined"!=typeof require?e=>require(e):()=>null})('undefined'!=typeof globalThis?globalThis:'undefined'!=typeof global?global:'undefined'!=typeof window?window:this);
+'undefined'!=typeof globalThis?globalThis:'undefined'!=typeof global?global:'undefined'!=typeof window&&window;
+!(function(r){let l=0,n=!0===r.RN$useAlwaysAvailableJSErrorHandling?r.RN$handleException:(r,l)=>{throw r};const t={setGlobalHandler(r){n=r},getGlobalHandler:()=>n,reportError(r){n&&n(r,!1)},reportFatalError(r){n&&n(r,!0)},applyWithGuard(r,n,e,a,o){try{return l++,r.apply(n,e)}catch(r){t.reportError(r)}finally{l--}return null},applyWithGuardIfNeeded:(r,l,n)=>t.inGuard()?r.apply(l,n):(t.applyWithGuard(r,l,n),null),inGuard:()=>!!l,guard(r,l,n){if('function'!=typeof r)return console.warn('A function must be passed to ErrorUtils.guard, got ',r),null;const e=l??r.name??'