@furystack/shades-common-components 3.2.1 → 3.3.1

package/dist/services/theme-provider-service.js

@@ -1,7 +1,12 @@
 "use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ThemeProviderService = void 0;
-const tslib_1 = require("tslib");
 const inject_1 = require("@furystack/inject");
 const utils_1 = require("@furystack/utils");
 const default_dark_theme_1 = require("./default-dark-theme");
@@ -64,7 +69,7 @@ let ThemeProviderService = class ThemeProviderService {
         this.theme.dispose();
     }
 };
-ThemeProviderService = tslib_1.__decorate([
+ThemeProviderService = __decorate([
     (0, inject_1.Injectable)({ lifetime: 'singleton' })
 ], ThemeProviderService);
 exports.ThemeProviderService = ThemeProviderService;

package/dist/services/theme-provider-service.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-provider-service.js","sourceRoot":"","sources":["../../src/services/theme-provider-service.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"theme-provider-service.js","sourceRoot":"","sources":["../../src/services/theme-provider-service.ts"],"names":[],"mappings":";;;;;;;;;AAAA,8CAA8C;AAC9C,4CAA0E;AAC1E,6DAAuD;AA8CvD;;GAEG;AAEI,IAAM,oBAAoB,GAA1B,MAAM,oBAAoB;IAA1B;QAkDW,UAAK,GAAG,IAAI,uBAAe,CAAC,qCAAgB,CAAC,CAAA;IAS/D,CAAC;IA1DC;;;;;;OAMG;IACI,YAAY,CAAC,KAAa,EAAE,MAAM,GAAG,SAAS,EAAE,IAAI,GAAG,SAAS;QACrE,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAA;QACrD,MAAM,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,IAAI,CAAA;QAChD,OAAO,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA;IACnC,CAAC;IAED;;;;OAIG;IACI,qBAAqB,CAAC,KAAa;QACxC,IAAI,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE;YACzB,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;gBACtB,MAAM,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAA;gBAC1C,MAAM,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAA;gBAC1C,MAAM,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAA;gBAC1C,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAA;aACnB;YACD,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;gBACtB,MAAM,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAA;gBAC/D,MAAM,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAA;gBAC/D,MAAM,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAA;gBAC/D,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAA;aACnB;SACF;QACD,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;YAC7B,MAAM,MAAM,GAAG,IAAI,MAAM,CACvB,kGAAkG,CACnG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;YACb,IAAI,MAAM,IAAI,MAAM,CAAC,MAAM,EAAE;gBAC3B,OAAO;oBACL,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,EAAE,CAAC;oBAClC,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC;oBACpC,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC;oBACnC,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC;iBACrC,CAAA;aACF;SACF;QACD,MAAM,KAAK,CAAC,iBAAiB,KAAK,qBAAqB,CAAC,CAAA;IAC1D,CAAC;IAIM,GAAG,CAAC,MAA0B;QACnC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAA,iBAAS,EAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,MAAM,CAAC,CAAC,CAAA;IAC/D,CAAC;IAEM,OAAO;QACZ,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAA;IACtB,CAAC;CACF,CAAA;AA3DY,oBAAoB;IADhC,IAAA,mBAAU,EAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC;GACzB,oBAAoB,CA2DhC;AA3DY,oDAAoB"}

package/dist/utils/index.js

@@ -1,5 +1,18 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./promisify-animation"), exports);
+__exportStar(require("./promisify-animation"), exports);
 //# sourceMappingURL=index.js.map

package/dist/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":";;;AAAA,gEAAqC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,wDAAqC"}

package/dist/utils/promisify-animation.js

@@ -1,6 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.promisifyAnimation = void 0;
+/**
+ * @param el The element to animate
+ * @param keyframes A list of keyframe definitions
+ * @param options Animation options
+ * @returns A promise that resolves when the animation is complete or rejects if cancelled
+ */
 const promisifyAnimation = async (el, keyframes, options) => new Promise((resolve, reject) => {
     if (!el) {
         return reject();

package/dist/utils/promisify-animation.js.map

@@ -1 +1 @@
-{"version":3,"file":"promisify-animation.js","sourceRoot":"","sources":["../../src/utils/promisify-animation.ts"],"names":[],"mappings":";;;AAAO,MAAM,kBAAkB,GAAG,KAAK,EACrC,EAAkB,EAClB,SAAuD,EACvD,OAAuD,EACvD,EAAE,CACF,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;IAC9B,IAAI,CAAC,EAAE,EAAE;QACP,OAAO,MAAM,EAAE,CAAA;KAChB;IACD,MAAM,SAAS,GAAG,EAAE,CAAC,OAAO,CAAC,SAAS,EAAE,OAAO,CAAC,CAAA;IAChD,SAAS,CAAC,QAAQ,GAAG,OAAO,CAAA;IAC5B,SAAS,CAAC,QAAQ,GAAG,MAAM,CAAA;AAC7B,CAAC,CAAC,CAAA;AAZS,QAAA,kBAAkB,sBAY3B"}
+{"version":3,"file":"promisify-animation.js","sourceRoot":"","sources":["../../src/utils/promisify-animation.ts"],"names":[],"mappings":";;;AAAA;;;;;GAKG;AACI,MAAM,kBAAkB,GAAG,KAAK,EACrC,EAAkB,EAClB,SAAuD,EACvD,OAAuD,EACvD,EAAE,CACF,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;IAC9B,IAAI,CAAC,EAAE,EAAE;QACP,OAAO,MAAM,EAAE,CAAA;KAChB;IACD,MAAM,SAAS,GAAG,EAAE,CAAC,OAAO,CAAC,SAAS,EAAE,OAAO,CAAC,CAAA;IAChD,SAAS,CAAC,QAAQ,GAAG,OAAO,CAAA;IAC5B,SAAS,CAAC,QAAQ,GAAG,MAAM,CAAA;AAC7B,CAAC,CAAC,CAAA;AAZS,QAAA,kBAAkB,sBAY3B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@furystack/shades-common-components",
-  "version": "3.2.1",
+  "version": "3.3.1",
   "description": "",
   "keywords": [
     "FuryStack",
@@ -17,16 +17,15 @@
   "author": "gallay.lajos@gmail.com",
   "license": "GPL-2.0",
   "devDependencies": {
-    "typescript": "4.7.4"
+    "typescript": "4.8.2"
   },
   "dependencies": {
-    "@furystack/core": "^11.0.7",
-    "@furystack/inject": "^7.0.2",
-    "@furystack/shades": "^6.0.3",
-    "@furystack/utils": "^3.0.6",
+    "@furystack/core": "^11.0.10",
+    "@furystack/inject": "^7.0.4",
+    "@furystack/shades": "^6.0.6",
+    "@furystack/utils": "^3.0.8",
     "path-to-regexp": "^6.2.1",
-    "semaphore-async-await": "^1.5.1",
-    "tslib": "^2.4.0"
+    "semaphore-async-await": "^1.5.1"
   },
   "typings": "types/index.d.ts",
   "main": "dist/index.js",

package/src/components/animations.ts

@@ -1,46 +1,68 @@
 import { promisifyAnimation } from '../utils/promisify-animation'
 
 export const animations = {
-  showSlide: async (options: { element: Element }) => {
-    await promisifyAnimation(
-      options.element,
-      [
-        { transform: 'translate(-350px, 0)scale(0)', opacity: 0 },
-        { transform: 'translate(0, 0)scale(1)', opacity: 1 },
-      ],
-      {
-        duration: 500,
-        easing: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)',
-        fill: 'forwards',
-      },
-    )
+  showSlide: async (element?: Element | null, options?: KeyframeAnimationOptions) => {
+    element &&
+      (await promisifyAnimation(
+        element,
+        [
+          { transform: 'translate(-350px, 0)scale(0)', opacity: 0 },
+          { transform: 'translate(0, 0)scale(1)', opacity: 1 },
+        ],
+        {
+          duration: 500,
+          easing: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)',
+          fill: 'forwards',
+          ...options,
+        },
+      ))
   },
-  hideSlide: async (options: { element: Element }) => {
-    await promisifyAnimation(
-      options.element,
-      [
-        { transform: 'translate(0, 0)scale(1)', opacity: 1 },
-        { transform: 'translate(-350px, 0)scale(0)', opacity: 0 },
-      ],
-      {
-        duration: 500,
-        easing: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)',
-        fill: 'forwards',
-      },
-    )
+  hideSlide: async (element?: Element | null, options?: KeyframeAnimationOptions) => {
+    element &&
+      (await promisifyAnimation(
+        element,
+        [
+          { transform: 'translate(0, 0)scale(1)', opacity: 1 },
+          { transform: 'translate(-350px, 0)scale(0)', opacity: 0 },
+        ],
+        {
+          duration: 500,
+          easing: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)',
+          fill: 'forwards',
+          ...options,
+        },
+      ))
   },
-  fadeOut: async (element?: Element | null) => {
+  fadeOut: async (element?: Element | null, options?: KeyframeAnimationOptions) => {
     element &&
       (await promisifyAnimation(element, [{ opacity: 1 }, { opacity: 0 }], {
         duration: 500,
         easing: 'cubic-bezier(0.165, 0.840, 0.440, 1.000)',
+        ...options,
       }))
   },
-  fadeIn: async (element?: Element | null) => {
+  fadeIn: async (element?: Element | null, options?: KeyframeAnimationOptions) => {
     element &&
       (await promisifyAnimation(element, [{ opacity: 0 }, { opacity: 1 }], {
         duration: 500,
         easing: 'cubic-bezier(0.165, 0.840, 0.440, 1.000)',
+        ...options,
       }))
   },
+  showParallax: async (element?: Element | null, options?: KeyframeAnimationOptions) => {
+    element &&
+      (await promisifyAnimation(
+        element,
+        [
+          { transform: 'translate(50px, 0)', opacity: 0 },
+          { transform: 'translate(0, 0)', opacity: 1 },
+        ],
+        {
+          duration: 900,
+          easing: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)',
+          fill: 'forwards',
+          ...options,
+        },
+      ))
+  },
 }

package/src/components/data-grid/body.tsx

@@ -11,6 +11,10 @@ export interface DataGridBodyProps<T> {
   columns: Array<keyof T>
   rowComponents?: DataRowCells<T>
   style?: Partial<CSSStyleDeclaration>
+  focusedRowStyle?: Partial<CSSStyleDeclaration>
+  unfocusedRowStyle?: Partial<CSSStyleDeclaration>
+  selectedRowStyle?: Partial<CSSStyleDeclaration>
+  unselectedRowStyle?: Partial<CSSStyleDeclaration>
 }
 
 export interface DataGridBodyState<T> {
@@ -57,6 +61,10 @@ export const DataGridBody: <T>(props: DataGridBodyProps<T>, children: ChildrenLi
             service={props.service}
             rowComponents={props.rowComponents}
             onRowClick={props.onRowClick}
+            focusedRowStyle={props.focusedRowStyle}
+            unfocusedRowStyle={props.unfocusedRowStyle}
+            selectedRowStyle={props.selectedRowStyle}
+            unselectedRowStyle={props.unselectedRowStyle}
           ></DataGridRow>
         ))}
       </>

package/src/components/data-grid/data-grid-row.tsx

@@ -1,4 +1,4 @@
-import { ChildrenList, createComponent, createFragment, Shade } from '@furystack/shades'
+import { attachStyles, ChildrenList, createComponent, createFragment, Shade } from '@furystack/shades'
 import { CollectionService } from '../../services/collection-service'
 import { DataRowCells } from './data-grid'
 
@@ -8,6 +8,10 @@ export interface DataGridRowProps<T> {
   service: CollectionService<T>
   rowComponents?: DataRowCells<T>
   onRowClick?: (row: T, event: MouseEvent) => void
+  focusedRowStyle?: Partial<CSSStyleDeclaration>
+  selectedRowStyle?: Partial<CSSStyleDeclaration>
+  unfocusedRowStyle?: Partial<CSSStyleDeclaration>
+  unselectedRowStyle?: Partial<CSSStyleDeclaration>
 }
 
 export interface DataGridRowState<T> {
@@ -27,8 +31,12 @@ export const DataGridRow: <T>(props: DataGridRowProps<T>, children: ChildrenList
   resources: ({ props, element }) => [
     props.service.focusedEntry.subscribe((newEntry) => {
       if (newEntry === props.entry) {
-        element.style.filter = 'brightness(1.5)'
-        element.style.fontWeight = 'bolder'
+        attachStyles(element, {
+          style: props.focusedRowStyle || {
+            filter: 'brightness(1.5)',
+            fontWeight: 'bolder',
+          },
+        })
 
         const headerHeight = element.closest('table')?.querySelector('th')?.getBoundingClientRect().height || 42
 
@@ -42,25 +50,27 @@ export const DataGridRow: <T>(props: DataGridRowProps<T>, children: ChildrenList
         const footerHeight =
           element.closest('shade-data-grid')?.querySelector('shade-data-grid-footer')?.getBoundingClientRect().height ||
           42
-        const visibleMaxTop = parent.clientHeight - footerHeight // parent.getBoundingClientRect().height - footerHeight - headerHeight
+        const visibleMaxTop = parent.clientHeight - footerHeight
         const desiredMaxTop = element.offsetTop + element.clientHeight
         if (desiredMaxTop > visibleMaxTop) {
           parent.scrollTo({ top: desiredMaxTop - visibleMaxTop, behavior: 'smooth' })
         }
-
-        // ;(element as any).scrollIntoView({ inline: 'nearest', block: 'nearest', behavior: 'smooth' })
       } else {
-        element.style.filter = 'brightness(1)'
-        element.style.fontWeight = 'inherit'
+        attachStyles(element, {
+          style: props.unfocusedRowStyle || {
+            filter: 'brightness(1)',
+            fontWeight: 'inherit',
+          },
+        })
       }
-    }),
+    }, true),
     props.service.selection.subscribe((selection) => {
       if (selection.includes(props.entry)) {
-        element.style.background = 'rgba(128,128,128,0.1)'
+        attachStyles(element, { style: props.selectedRowStyle || { backgroundColor: 'rgba(128,128,128,0.1)' } })
       } else {
-        element.style.background = 'none'
+        attachStyles(element, { style: props.unselectedRowStyle || { backgroundColor: 'transparent' } })
       }
-    }),
+    }, true),
   ],
 
   render: ({ getState, props, element }) => {

package/src/components/data-grid/data-grid.tsx

@@ -15,12 +15,46 @@ export type DataRowCells<T> = {
 }
 
 export interface DataGridProps<T> {
+  /**
+   * A list of columns to display
+   */
   columns: Array<keyof T>
+  /**
+   * Optional style overrides for the grid
+   */
   styles: GridProps<T>['styles']
+  /**
+   * A collection service to use for data source
+   */
   service: CollectionService<T>
+  /**
+   * A list of custom header components to use
+   */
   headerComponents: DataHeaderCells<T>
+  /**
+   * A list of custom row components to use
+   */
   rowComponents: DataRowCells<T>
+  /**
+   * Optional autoFocus property to set the grid as focused
+   */
   autofocus?: boolean
+  /**
+   * Optional style to attach to grid rows when the row is focused
+   */
+  focusedRowStyle?: Partial<CSSStyleDeclaration>
+  /**
+   * Optional style to attach to grid rows when the row is not focused
+   */
+  unfocusedRowStyle?: Partial<CSSStyleDeclaration>
+  /**
+   * Optional style to attach to grid rows when the row is selected
+   */
+  selectedRowStyle?: Partial<CSSStyleDeclaration>
+  /**
+   * Optional style to attach to grid rows when the row is not selected
+   */
+  unselectedRowStyle?: Partial<CSSStyleDeclaration>
 }
 
 export const DataGrid: <T>(props: DataGridProps<T>, children: ChildrenList) => JSX.Element<any, any> = Shade<
@@ -102,6 +136,10 @@ export const DataGrid: <T>(props: DataGridProps<T>, children: ChildrenList) => J
             rowComponents={props.rowComponents}
             onRowClick={(entry, ev) => props.service.handleRowClick(entry, ev)}
             style={props.styles?.cell}
+            focusedRowStyle={props.focusedRowStyle}
+            selectedRowStyle={props.selectedRowStyle}
+            unfocusedRowStyle={props.unfocusedRowStyle}
+            unselectedRowStyle={props.unselectedRowStyle}
           />
         </table>
         <DataGridFooter service={props.service} />

package/src/components/index.ts

@@ -16,3 +16,4 @@ export * from './suggest'
 export * from './tabs'
 export * from './loader'
 export * from './command-palette'
+export * from './wizard'

package/src/components/modal.tsx

@@ -1,12 +1,36 @@
 import { Shade, createComponent } from '@furystack/shades'
+import { ObservableValue } from '@furystack/utils'
 
-export const Modal = Shade<{ isVisible: boolean; onClose?: () => void }>({
+export type ModalProps = {
+  backdropStyle?: Partial<CSSStyleDeclaration>
+  isVisible: ObservableValue<boolean>
+  onClose?: () => void
+  showAnimation?: (el: Element | null) => Promise<void>
+  hideAnimation?: (el: Element | null) => Promise<void>
+}
+
+export const Modal = Shade<ModalProps, { isVisible?: boolean }>({
+  getInitialState: ({ props }) => ({ isVisible: props.isVisible.getValue() }),
   shadowDomName: 'shade-modal',
-  render: ({ props, children }) => {
-    return props.isVisible ? (
+  resources: ({ props, element, updateState }) => [
+    props.isVisible.subscribe(async (visible) => {
+      if (visible) {
+        updateState({ isVisible: visible })
+        await props.showAnimation?.(element)
+      } else {
+        await props.hideAnimation?.(element).finally(() => updateState({ isVisible: visible }))
+      }
+    }),
+  ],
+
+  render: ({ props, getState, children }) => {
+    const { isVisible } = getState()
+    return isVisible ? (
       <div
         className="shade-backdrop"
-        onclick={() => props.onClose?.()}
+        onclick={() => {
+          props.onClose?.()
+        }}
         style={{
           width: '100%',
           height: '100%',
@@ -14,12 +38,11 @@ export const Modal = Shade<{ isVisible: boolean; onClose?: () => void }>({
           position: 'fixed',
           top: '0',
           left: '0',
+          ...props.backdropStyle,
         }}
       >
         {children}
       </div>
-    ) : (
-      <div />
-    )
+    ) : null
   },
 })

package/src/components/wizard/index.tsx

@@ -0,0 +1,62 @@
+import { ChildrenList, createComponent, Shade } from '@furystack/shades'
+import { Paper } from '../paper'
+
+export interface WizardStepProps {
+  currentPage: number
+  maxPages: number
+  onNext?: () => void
+  onPrev?: () => void
+}
+
+export interface WizardProps {
+  steps: Array<(props: WizardStepProps, children: ChildrenList) => JSX.Element<any, any>>
+  isOpened?: boolean
+  onFinish?: () => void
+}
+
+interface WizardState {
+  currentPage: number
+}
+
+export const Wizard = Shade<WizardProps, WizardState>({
+  shadowDomName: 'shades-wizard',
+  getInitialState: () => ({
+    currentPage: 0,
+  }),
+  render: ({ props, getState, updateState }) => {
+    const { currentPage } = getState()
+
+    const CurrentPage = props.steps[currentPage]
+
+    return (
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: '100%',
+          height: '100%',
+        }}
+      >
+        <Paper elevation={3} onclick={(ev) => ev.stopPropagation()}>
+          <CurrentPage
+            currentPage={currentPage}
+            maxPages={props.steps.length}
+            onNext={() => {
+              if (currentPage < props.steps.length - 1) {
+                updateState({ currentPage: currentPage + 1 })
+              } else {
+                props.onFinish?.()
+              }
+            }}
+            onPrev={() => {
+              if (currentPage > 0) {
+                updateState({ currentPage: currentPage - 1 })
+              }
+            }}
+          />
+        </Paper>
+      </div>
+    )
+  },
+})

package/src/utils/promisify-animation.ts

@@ -1,3 +1,9 @@
+/**
+ * @param el The element to animate
+ * @param keyframes A list of keyframe definitions
+ * @param options Animation options
+ * @returns A promise that resolves when the animation is complete or rejects if cancelled
+ */
 export const promisifyAnimation = async (
   el: Element | null,
   keyframes: Keyframe[] | PropertyIndexedKeyframes | null,