@startupjs-ui/modal 0.1.3

package/CHANGELOG.md

@@ -0,0 +1,20 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.1.3](https://github.com/startupjs/startupjs-ui/compare/v0.1.2...v0.1.3) (2025-12-29)
+
+**Note:** Version bump only for package @startupjs-ui/modal
+
+
+
+
+
+## [0.1.2](https://github.com/startupjs/startupjs-ui/compare/v0.1.1...v0.1.2) (2025-12-29)
+
+
+### Features
+
+* add mdx and docs packages. Refactor docs to get rid of any @startupjs/ui usage and use startupjs-ui instead ([703c926](https://github.com/startupjs/startupjs-ui/commit/703c92636efb0421ffd11783f692fc892b74018f))
+* **modal:** refactor Modal component ([e5d2901](https://github.com/startupjs/startupjs-ui/commit/e5d29013594b1898df339acfd4450450e8625bb9))

package/ModalActions/index.cssx.styl

@@ -0,0 +1,7 @@
+$gutter = $UI.gutters.m
+
+.root
+  padding $gutter
+
+.action
+  margin-left 1u

package/ModalActions/index.tsx

@@ -0,0 +1,56 @@
+import React, { type ReactNode } from 'react'
+import { type StyleProp, type ViewStyle } from 'react-native'
+import { pug, observer } from 'startupjs'
+import { themed } from '@startupjs-ui/core'
+import Div from '@startupjs-ui/div'
+import Button from '@startupjs-ui/button'
+import './index.cssx.styl'
+
+export const DEFAULT_CANCEL_LABEL = 'Cancel'
+export const DEFAULT_CONFIRM_LABEL = 'Confirm'
+
+export const _PropsJsonSchema = {/* ModalActionsProps */}
+
+export interface ModalActionsProps {
+  /** Custom styles applied to the actions container */
+  style?: StyleProp<ViewStyle>
+  /** Custom actions content */
+  children?: ReactNode
+  /** Text for cancel button @default 'Cancel' */
+  cancelLabel?: string
+  /** Text for confirm button @default 'Confirm' */
+  confirmLabel?: string
+  /** Cancel button handler */
+  onCancel?: (event: any) => void | Promise<void>
+  /** Confirm button handler */
+  onConfirm?: (event: any) => void | Promise<void>
+}
+
+function ModalActions ({
+  style,
+  children,
+  cancelLabel = DEFAULT_CANCEL_LABEL,
+  confirmLabel = DEFAULT_CONFIRM_LABEL,
+  onCancel,
+  onConfirm
+}: ModalActionsProps): ReactNode {
+  return pug`
+    Div.root(row style=style align='right')
+      if children
+        = children
+      else
+        if onCancel
+          Button.action(
+            color='primary'
+            onPress=onCancel
+          )= cancelLabel
+        if onConfirm
+          Button.action(
+            color='primary'
+            variant='flat'
+            onPress=onConfirm
+          )= confirmLabel
+  `
+}
+
+export default observer(themed('ModalActions', ModalActions))

package/ModalContent/index.cssx.styl

@@ -0,0 +1,2 @@
+.root
+  padding 2u

package/ModalContent/index.tsx

@@ -0,0 +1,45 @@
+import React, { type ReactNode, type ComponentType } from 'react'
+import { type StyleProp, type ViewStyle } from 'react-native'
+import { pug, observer } from 'startupjs'
+import { themed } from '@startupjs-ui/core'
+import Span from '@startupjs-ui/span'
+import ScrollView from '@startupjs-ui/scroll-view'
+import './index.cssx.styl'
+
+export const _PropsJsonSchema = {/* ModalContentProps */}
+
+export interface ModalContentProps {
+  /** Custom styles applied to the content */
+  style?: StyleProp<ViewStyle>
+  /** Content rendered inside modal */
+  children?: ReactNode
+  /** Component used for wrapping content @default ScrollView */
+  ContentComponent?: ComponentType<any>
+}
+
+function ModalContent ({
+  style,
+  children,
+  ContentComponent,
+  ...props
+}: ModalContentProps): ReactNode {
+  const content = React.Children.map(children, (child): ReactNode => {
+    if (typeof child === 'string') {
+      return pug`
+        Span= child
+      `
+    }
+    return child
+  })
+
+  if (!ContentComponent) ContentComponent = ScrollView
+
+  return pug`
+    ContentComponent.root(
+      style=style
+      ...props
+    )= content
+  `
+}
+
+export default observer(themed('ModalContent', ModalContent))

package/ModalHeader/index.cssx.styl

@@ -0,0 +1,20 @@
+$gutter = $UI.gutters.m
+
+.root
+  padding $gutter
+
+  &.between
+    justify-content space-between
+
+  &.right
+    justify-content flex-end
+
+.title
+  font(h5)
+  flex 1
+
+.close
+  margin-left 2u
+
+.icon
+  color: var(--color-text-description)

package/ModalHeader/index.tsx

@@ -0,0 +1,49 @@
+import React, { type ReactNode } from 'react'
+import { type StyleProp, type ViewStyle } from 'react-native'
+import { pug, observer } from 'startupjs'
+import { themed } from '@startupjs-ui/core'
+import Div from '@startupjs-ui/div'
+import Icon from '@startupjs-ui/icon'
+import Span from '@startupjs-ui/span'
+import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes'
+import './index.cssx.styl'
+
+export const _PropsJsonSchema = {/* ModalHeaderProps */}
+
+export interface ModalHeaderProps {
+  /** Custom styles applied to the header container */
+  style?: StyleProp<ViewStyle>
+  /** Header content */
+  children?: ReactNode
+  /** Handler for closing cross @private */
+  onCrossPress?: (event: any) => void
+  /** Icon rendered inside close button @default faTimes */
+  closeIcon?: object
+  /** Style applied to the close icon */
+  iconStyle?: StyleProp<ViewStyle>
+}
+
+function ModalHeader ({
+  style,
+  children,
+  onCrossPress, // @private
+  closeIcon = faTimes,
+  iconStyle
+}: ModalHeaderProps): ReactNode {
+  return pug`
+    Div.root(row style=style styleName=children ? 'between' : 'right' vAlign='center')
+      if typeof children === 'string'
+        Span.title(numberOfLines=1)= children
+      else
+        = children
+      if onCrossPress
+        Div.close(onPress=onCrossPress)
+          Icon.icon(
+            style=iconStyle
+            icon=closeIcon
+            size='xl'
+          )
+  `
+}
+
+export default observer(themed('ModalHeader', ModalHeader))

package/README.mdx

@@ -0,0 +1,204 @@
+import { useState, useRef } from 'react'
+import { $ } from 'startupjs'
+import { Sandbox } from '@startupjs-ui/docs'
+import Modal, {
+  _PropsJsonSchema as ModalPropsJsonSchema
+} from './index'
+import { _PropsJsonSchema as ModalHeaderPropsJsonSchema } from './ModalHeader'
+import { _PropsJsonSchema as ModalContentPropsJsonSchema } from './ModalContent'
+import { _PropsJsonSchema as ModalActionsPropsJsonSchema } from './ModalActions'
+import Button from '@startupjs-ui/button'
+import Span from '@startupjs-ui/span'
+import { Table, Thead, Tbody, Tr, Th, Td } from '@startupjs-ui/table'
+import './index.mdx.cssx.styl'
+
+# Modal
+
+Inherits [React Native Modal](https://reactnative.dev/docs/modal).
+
+Modal can be used when the user needs to inform about critical information, require decisions or interact a complex sub-application without navigating to a new page or interrupting the workflow.
+
+```js
+import { Modal } from 'startupjs-ui'
+```
+
+## Simple example
+
+```jsx example
+const [visible, setVisible] = useState(false)
+
+return (
+  <>
+    <Modal
+      visible={visible}
+      title='Text in modal'
+      onRequestClose={setVisible}
+    >
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.
+    </Modal>
+    <Button onPress={() => setVisible(true)}>
+      Open modal
+    </Button>
+  </>
+)
+```
+
+## Managing visibility
+
+There are three options for managing visiblity of a modal:
+
+1. By passing the scoped model to the `$visible` property from the state of which visibility is controlled.
+
+```jsx example
+const $visible = $()
+
+return (
+  <React.Fragment>
+    <Button onPress={() => $visible.set(true)}>
+      Open
+    </Button>
+    <Modal
+      title='Example'
+      $visible={$visible}
+    >
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.
+    </Modal>
+  </React.Fragment>
+)
+```
+
+2. By passing the `visible` property that determines whether modal is visible.
+
+```jsx example
+const [visible, setVisible] = useState(false)
+
+return (
+  <React.Fragment>
+    <Button onPress={() => setVisible(true)}>
+      Open
+    </Button>
+    <Modal
+      title='Example'
+      visible={visible}
+      onRequestClose={() => setVisible(false)}
+    >
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.
+    </Modal>
+  </React.Fragment>
+)
+```
+
+3. By passing `ref`, which will receive the `open()` and `close()` methods to control visibility.
+
+```jsx example
+const modalRef = useRef()
+
+return (
+  <React.Fragment>
+    <Button onPress={() => modalRef.current.open()}>
+      Open
+    </Button>
+    <Modal
+      title='Example'
+      ref={modalRef}
+    >
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.
+    </Modal>
+  </React.Fragment>
+)
+```
+
+## Fullscreen modal
+
+By default the modal shows like window in center of the page. To make it fullscreen, you need pass the string `fullscreen` to the `variant` property.
+
+```jsx example
+const $visible = $(false)
+
+return (
+  <React.Fragment>
+    <Button onPress={() => $visible.set(true)}>
+      Open fullscreen modal
+    </Button>
+    <Modal
+      variant='fullscreen'
+      title='Fullscreen example'
+      $visible={$visible}
+      onCancel={() => console.log('onCancel')}
+      onConfirm={() => console.log('onConfirm')}
+    >
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.
+    </Modal>
+  </React.Fragment>
+)
+```
+
+## Advanced usage
+
+Modal consists of three parts - `Header`, `Content` and `Actions`. These parts can be used to add custom markup, the `Header` is used instead of `title`, the `Content` is used instead of children and the `Actions` is used instead of handlers `onCancel`, `onConfirm`. They can be used separately.
+
+```jsx example
+const $visible = $(false)
+
+return (
+  <React.Fragment>
+    <Button onPress={() => $visible.set(true)}>
+      Open advanced modal
+    </Button>
+    <Modal $visible={$visible}>
+      <Modal.Header>Advanced modal</Modal.Header>
+      <Modal.Content>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.
+      </Modal.Content>
+      <Modal.Actions>
+        <Button
+          shape='circle'
+          onPress={() => $visible.set(false)}
+        >
+          Custom close
+        </Button>
+        <Button
+          pushed
+          shape='circle'
+          onPress={() => $visible.set(false)}
+        >
+          Custom confirm
+        </Button>
+      </Modal.Actions>
+    </Modal>
+  </React.Fragment>
+)
+```
+
+## Sandbox
+
+### Modal
+
+<Sandbox
+  Component={Modal}
+  propsJsonSchema={ModalPropsJsonSchema}
+  props={{ /* $visible: $.session.Props.Modal.visible */ }}
+  $props={$.session.Props.Modal}
+  {...{ _comment: "HACK to make alive sandbox when user click on 'visible' checkbox" }}
+/>
+
+### Modal.Header
+
+<Sandbox
+  Component={Modal.Header}
+  propsJsonSchema={ModalHeaderPropsJsonSchema}
+/>
+
+### Modal.Content
+
+<Sandbox
+  Component={Modal.Content}
+  propsJsonSchema={ModalContentPropsJsonSchema}
+/>
+
+### Modal.Actions
+
+<Sandbox
+  Component={Modal.Actions}
+  propsJsonSchema={ModalActionsPropsJsonSchema}
+/>

package/index.cssx.styl

@@ -0,0 +1,34 @@
+$modalBg = var(--color-bg-main-strong)
+$gutter = $UI.gutters.m
+
+.root
+  height 100%
+
+  &.window
+    padding 0 $gutter
+
+.overlay
+  position absolute
+  top 0
+  right 0
+  left 0
+  bottom 0
+  background-color var(--Modal-overlayBg)
+
+  +web()
+    cursor pointer
+
+.modal
+  flex-shrink 1
+  background-color $modalBg
+
+  &.window
+    margin auto
+    max-height 90%
+    max-width 776px
+    min-width 280px
+    border-radius 4px
+    shadow(4)
+
+  &.fullscreen
+    height 100%

package/index.d.ts

@@ -0,0 +1,63 @@
+/* eslint-disable */
+// DO NOT MODIFY THIS FILE - IT IS AUTOMATICALLY GENERATED ON COMMITS.
+
+import { type ReactNode, type ComponentType, type RefObject } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+type SupportedOrientation = 'portrait' | 'portrait-upside-down' | 'landscape' | 'landscape-left' | 'landscape-right';
+export declare const _PropsJsonSchema: {};
+export interface ModalProps {
+    /** Custom styles applied to the root view */
+    style?: StyleProp<ViewStyle>;
+    /** Custom styles applied to the modal content container */
+    modalStyle?: StyleProp<ViewStyle>;
+    /** Content rendered inside the modal */
+    children?: ReactNode;
+    /** Layout variant @default 'window' */
+    variant?: 'window' | 'fullscreen';
+    /** Controlled visibility flag */
+    visible?: boolean;
+    /** Model binding for two-way visibility control */
+    $visible?: any;
+    /** Imperative ref to open/close modal when not controlled */
+    ref?: RefObject<any>;
+    /** Header title text */
+    title?: string;
+    /** Label for cancel action @default 'Cancel' */
+    cancelLabel?: string;
+    /** Label for confirm action @default 'Confirm' */
+    confirmLabel?: string;
+    /** Show a cross in the header @default true */
+    showCross?: boolean;
+    /** Makes the backdrop clickable @default true */
+    enableBackdropPress?: boolean;
+    /** Component used as modal container @default SafeAreaView */
+    ModalElement?: ComponentType<any>;
+    /** Modal animation type @default 'fade' */
+    animationType?: 'slide' | 'fade' | 'none';
+    /** Render modal with transparent background @default true */
+    transparent?: boolean;
+    /** Control status bar translucency on Android */
+    statusBarTranslucent?: boolean;
+    /** Allowed screen orientations */
+    supportedOrientations?: SupportedOrientation[];
+    /** Callback fired after modal becomes visible */
+    onShow?: () => void;
+    /** Called when user clicks on the cross */
+    onCrossPress?: (event: any) => void | Promise<void>;
+    /** Show only the one `OK` button that uses this handler */
+    onCancel?: (event: any) => void | Promise<void>;
+    /** Show two buttons: `OK` uses this handler and `Cancel` uses the `onCancel` handler */
+    onConfirm?: (event: any) => void | Promise<void>;
+    /** Called when the user clicks on the backdrop (requires enableBackdropPress to be true) */
+    onBackdropPress?: (event: any) => void | Promise<void>;
+    /** Called when the orientation changes while the modal is displayed */
+    onOrientationChange?: (event: any) => void;
+    /** Called when user requests to close the modal (hardware back, menu button, Esc, etc.). Also fired after cross/backdrop/cancel/confirm unless handlers call event.preventDefault() */
+    onRequestClose?: (value?: boolean) => void;
+    /** Called once the modal has been dismissed */
+    onDismiss?: () => void;
+    /** DEPRECATED: use onRequestClose instead */
+    onChange?: (value?: boolean) => void;
+}
+declare const ObservedModal: any;
+export default ObservedModal;

package/index.mdx.cssx.styl

@@ -0,0 +1,2 @@
+.table
+  background-color white

package/index.tsx

@@ -0,0 +1,198 @@
+import React, {
+  useCallback,
+  useImperativeHandle,
+  type ReactNode,
+  type ComponentType,
+  type RefObject
+} from 'react'
+import { SafeAreaView, Modal as RNModal, type StyleProp, type ViewStyle } from 'react-native'
+import { pug, observer, $ } from 'startupjs'
+import { themed } from '@startupjs-ui/core'
+import Portal from '@startupjs-ui/portal'
+import Layout from './layout'
+import ModalHeader from './ModalHeader'
+import ModalContent from './ModalContent'
+import ModalActions, { DEFAULT_CANCEL_LABEL, DEFAULT_CONFIRM_LABEL } from './ModalActions'
+
+type SupportedOrientation =
+  | 'portrait'
+  | 'portrait-upside-down'
+  | 'landscape'
+  | 'landscape-left'
+  | 'landscape-right'
+
+const SUPPORTED_ORIENTATIONS: SupportedOrientation[] = [
+  'portrait',
+  'portrait-upside-down',
+  'landscape',
+  'landscape-left',
+  'landscape-right'
+]
+
+export const _PropsJsonSchema = {/* ModalProps */}
+
+export interface ModalProps {
+  /** Custom styles applied to the root view */
+  style?: StyleProp<ViewStyle>
+  /** Custom styles applied to the modal content container */
+  modalStyle?: StyleProp<ViewStyle>
+  /** Content rendered inside the modal */
+  children?: ReactNode
+  /** Layout variant @default 'window' */
+  variant?: 'window' | 'fullscreen'
+  /** Controlled visibility flag */
+  visible?: boolean
+  /** Model binding for two-way visibility control */
+  $visible?: any
+  /** Imperative ref to open/close modal when not controlled */
+  ref?: RefObject<any>
+  /** Header title text */
+  title?: string
+  /** Label for cancel action @default 'Cancel' */
+  cancelLabel?: string
+  /** Label for confirm action @default 'Confirm' */
+  confirmLabel?: string
+  /** Show a cross in the header @default true */
+  showCross?: boolean
+  /** Makes the backdrop clickable @default true */
+  enableBackdropPress?: boolean
+  /** Component used as modal container @default SafeAreaView */
+  ModalElement?: ComponentType<any>
+  /** Modal animation type @default 'fade' */
+  animationType?: 'slide' | 'fade' | 'none'
+  /** Render modal with transparent background @default true */
+  transparent?: boolean
+  /** Control status bar translucency on Android */
+  statusBarTranslucent?: boolean
+  /** Allowed screen orientations */
+  supportedOrientations?: SupportedOrientation[]
+  /** Callback fired after modal becomes visible */
+  onShow?: () => void
+  /** Called when user clicks on the cross */
+  onCrossPress?: (event: any) => void | Promise<void>
+  /** Show only the one `OK` button that uses this handler */
+  onCancel?: (event: any) => void | Promise<void>
+  /** Show two buttons: `OK` uses this handler and `Cancel` uses the `onCancel` handler */
+  onConfirm?: (event: any) => void | Promise<void>
+  /** Called when the user clicks on the backdrop (requires enableBackdropPress to be true) */
+  onBackdropPress?: (event: any) => void | Promise<void>
+  /** Called when the orientation changes while the modal is displayed */
+  onOrientationChange?: (event: any) => void
+  /** Called when user requests to close the modal (hardware back, menu button, Esc, etc.). Also fired after cross/backdrop/cancel/confirm unless handlers call event.preventDefault() */
+  onRequestClose?: (value?: boolean) => void
+  /** Called once the modal has been dismissed */
+  onDismiss?: () => void
+  /** DEPRECATED: use onRequestClose instead */
+  onChange?: (value?: boolean) => void
+}
+
+function ModalRoot ({
+  style,
+  modalStyle,
+  children,
+  variant = 'window',
+  visible,
+  $visible,
+  ref,
+  title,
+  cancelLabel = DEFAULT_CANCEL_LABEL,
+  confirmLabel = DEFAULT_CONFIRM_LABEL,
+  showCross = true,
+  enableBackdropPress = true,
+  ModalElement = SafeAreaView,
+  animationType = 'fade',
+  transparent = true,
+  supportedOrientations = SUPPORTED_ORIENTATIONS,
+  statusBarTranslucent,
+  onChange, // DEPRECATED
+  onRequestClose,
+  onDismiss,
+  onShow,
+  onCrossPress,
+  onBackdropPress,
+  onCancel,
+  onConfirm,
+  onOrientationChange,
+  ...props
+}: ModalProps): ReactNode {
+  if (onChange) {
+    console.warn('[@startupjs/ui] Modal: onChange is DEPRECATED, use onRequestClose instead.')
+  }
+
+  const _$visible = $() // used for uncontrolled mode
+  if (visible == null) {
+    if ($visible) {
+      visible = $visible.get()
+    } else if (_$visible.get()) {
+      visible = _$visible.get()
+    }
+  }
+
+  // WORKAROUND
+  // convert 'visible' to boolean
+  // because modal window appears for undefined value on web
+  visible = !!visible
+
+  const _onRequestClose = useCallback(() => {
+    onRequestClose?.()
+    if ($visible) {
+      $visible.del()
+    } else {
+      _$visible.del()
+    }
+  }, [onRequestClose, $visible, _$visible])
+
+  useImperativeHandle(ref, () => ({
+    open: () => {
+      if ($visible) {
+        $visible.set(true)
+      } else {
+        _$visible.set(true)
+      }
+    },
+    close: () => {
+      _onRequestClose()
+    }
+  }), [_onRequestClose, $visible, _$visible])
+
+  return pug`
+    RNModal(
+      visible=visible
+      transparent=transparent
+      supportedOrientations=supportedOrientations
+      animationType=animationType
+      statusBarTranslucent=statusBarTranslucent
+      onRequestClose=_onRequestClose
+      onOrientationChange=onOrientationChange
+      onShow=onShow
+      onDismiss=onDismiss
+      ...props
+    )
+      Portal.Provider
+        if visible
+          Layout(
+            style=style
+            modalStyle=modalStyle
+            variant=variant
+            title=title
+            cancelLabel=cancelLabel
+            confirmLabel=confirmLabel
+            showCross=showCross
+            enableBackdropPress=enableBackdropPress
+            ModalElement=ModalElement
+            onRequestClose=_onRequestClose
+            onCrossPress=onCrossPress
+            onBackdropPress=onBackdropPress
+            onCancel=onCancel
+            onConfirm=onConfirm
+          )= children
+  `
+}
+
+const ObservedModal = observer(themed('Modal', ModalRoot)) as any
+
+ObservedModal.Header = ModalHeader
+ObservedModal.Content = ModalContent
+ObservedModal.Actions = ModalActions
+
+export default ObservedModal

package/layout.tsx

@@ -0,0 +1,204 @@
+import React, { type ReactNode, type ComponentType } from 'react'
+import { View, TouchableOpacity, type StyleProp, type ViewStyle } from 'react-native'
+import { pug, observer } from 'startupjs'
+import { themed } from '@startupjs-ui/core'
+import ModalHeader from './ModalHeader'
+import ModalContent from './ModalContent'
+import ModalActions, { DEFAULT_CANCEL_LABEL, DEFAULT_CONFIRM_LABEL } from './ModalActions'
+import './index.cssx.styl'
+
+export interface ModalLayoutProps {
+  /** Custom styles applied to the root view */
+  style?: StyleProp<ViewStyle>
+  /** Custom styles applied to the modal surface */
+  modalStyle?: StyleProp<ViewStyle>
+  /** Children rendered inside modal sections */
+  children?: ReactNode
+  /** Layout variant @default 'window' */
+  variant?: 'window' | 'fullscreen'
+  /** Title rendered when no custom header provided */
+  title?: string
+  /** DEPRECATED: use cancelLabel instead */
+  dismissLabel?: string
+  /** Cancel action label @default 'Cancel' */
+  cancelLabel?: string
+  /** Confirm action label @default 'Confirm' */
+  confirmLabel?: string
+  /** Component used to wrap modal content */
+  ModalElement?: ComponentType<any>
+  /** Show cross button in header */
+  showCross?: boolean
+  /** Enable closing modal by tapping backdrop */
+  enableBackdropPress?: boolean
+  /** Request close handler */
+  onRequestClose?: () => void
+  /** Cross press handler */
+  onCrossPress?: (event: any) => void | Promise<void>
+  /** Backdrop press handler */
+  onBackdropPress?: (event: any) => void | Promise<void>
+  /** Cancel action handler */
+  onCancel?: (event: any) => void | Promise<void>
+  /** Confirm action handler */
+  onConfirm?: (event: any) => void | Promise<void>
+}
+
+function Modal ({
+  style,
+  modalStyle,
+  children,
+  variant,
+  title,
+  dismissLabel,
+  cancelLabel = DEFAULT_CANCEL_LABEL,
+  confirmLabel = DEFAULT_CONFIRM_LABEL,
+  ModalElement,
+  showCross,
+  enableBackdropPress,
+  onRequestClose,
+  onCrossPress,
+  onBackdropPress,
+  onCancel,
+  onConfirm
+}: ModalLayoutProps): ReactNode {
+  // DEPRECATED
+  if (dismissLabel) {
+    console.warn(
+      '[@startupjs/ui] Modal: dismissLabel is DEPRECATED, use cancelLabel instead'
+    )
+    cancelLabel = dismissLabel
+  }
+
+  // Deconstruct template variables
+  let header: ReactNode | undefined
+  let actions: ReactNode | undefined
+  let content: ReactNode | undefined
+  const contentChildren: ReactNode[] = []
+
+  React.Children.forEach(children, child => {
+    if (!child) return
+
+    switch ((child as any).type) {
+      case ModalHeader:
+        if (header) throw Error('[ui -> Modal] You must specify a single <Modal.Header>')
+        header = child
+        break
+      case ModalActions:
+        if (actions) throw Error('[ui -> Modal] You must specify a single <Modal.Actions>')
+        actions = child
+        break
+      case ModalContent:
+        if (content) throw Error('[ui -> Modal] You must specify a single <Modal.Content>')
+        content = child
+        break
+      default:
+        contentChildren.push(child)
+    }
+  })
+
+  if (content && contentChildren.length > 0) {
+    throw Error('[ui -> Modal] React elements found directly within <Modal>. ' +
+      'If <Modal.Content> is specified, you have to put all your content inside it')
+  }
+
+  let _onConfirm
+  let _onCancel
+  const isWindowLayout = variant === 'window'
+  const hasActions = !!onCancel || !!onConfirm
+  const hasHeader = !!title || !!showCross
+
+  const _onCrossPress = async (event: any) => {
+    event.persist() // TODO: remove in react 17
+    const promise: any = onCrossPress?.(event)
+    if (promise && typeof promise.then === 'function') await promise
+    if (event.defaultPrevented) return
+    if (onRequestClose) onRequestClose()
+  }
+
+  const _onBackdropPress = async (event: any) => {
+    event.persist() // TODO: remove in react 17
+    const promise: any = onBackdropPress?.(event)
+    if (promise && typeof promise.then === 'function') await promise
+    if (event.defaultPrevented) return
+    if (onRequestClose) onRequestClose()
+  }
+
+  if (onConfirm) {
+    _onConfirm = async (event: any) => {
+      event.persist() // TODO: remove in react 17
+      const promise: any = onConfirm(event)
+      if (promise && typeof promise.then === 'function') await promise
+      if (event.defaultPrevented) return
+      if (onRequestClose) onRequestClose()
+    }
+  }
+
+  if (hasActions) {
+    _onCancel = async (event: any) => {
+      event.persist() // TODO: remove in react 17
+      const promise: any = onCancel?.(event)
+      if (promise && typeof promise.then === 'function') await promise
+      if (event.defaultPrevented) return
+      if (onRequestClose) onRequestClose()
+    }
+  }
+
+  if (!onConfirm && cancelLabel === DEFAULT_CANCEL_LABEL) {
+    cancelLabel = 'OK'
+  }
+
+  // Handle <Modal.Header>
+  const headerProps = {
+    onCrossPress: showCross ? _onCrossPress : undefined
+  }
+
+  header = header
+    ? React.cloneElement(header as any, { ...headerProps, ...(header as any).props })
+    : hasHeader
+      ? React.createElement(ModalHeader, headerProps, title)
+      : null
+
+  // Handle <Modal.Actions>
+  const actionsProps = {
+    cancelLabel,
+    confirmLabel,
+    onCancel: _onCancel,
+    onConfirm: _onConfirm
+  }
+
+  actions = actions
+    ? React.cloneElement(actions as any, { ...actionsProps, ...(actions as any).props })
+    : hasActions
+      ? React.createElement(ModalActions, actionsProps)
+      : null
+
+  // Handle <Modal.Content>
+  const contentStyle: StyleProp<ViewStyle> = {}
+
+  if (header) contentStyle.paddingTop = 0
+  if (actions) contentStyle.paddingBottom = 0
+
+  const contentProps = { variant, style: contentStyle }
+
+  // content part should always present
+  content = content
+    ? React.cloneElement(content as any, { ...contentProps, ...(content as any).props })
+    : React.createElement(ModalContent, contentProps, contentChildren)
+
+  return pug`
+    View.root(style=style styleName=[variant])
+      if isWindowLayout
+        TouchableOpacity.overlay(
+          activeOpacity=1
+          onPress=enableBackdropPress ? _onBackdropPress : undefined
+        )
+      ModalElement.modal(
+        style=modalStyle
+        styleName=[variant]
+      )
+        = header
+        = content
+        = actions
+  `
+}
+
+export default observer(themed('Modal', Modal))

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@startupjs-ui/modal",
+  "version": "0.1.3",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "index.tsx",
+  "types": "index.d.ts",
+  "type": "module",
+  "dependencies": {
+    "@startupjs-ui/button": "^0.1.3",
+    "@startupjs-ui/core": "^0.1.3",
+    "@startupjs-ui/div": "^0.1.3",
+    "@startupjs-ui/icon": "^0.1.3",
+    "@startupjs-ui/portal": "^0.1.3",
+    "@startupjs-ui/scroll-view": "^0.1.3",
+    "@startupjs-ui/span": "^0.1.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "startupjs": "*"
+  },
+  "gitHead": "fd964ebc3892d3dd0a6c85438c0af619cc50c3f0"
+}