@webority/mobile-ui 0.0.0-stage → 0.0.33

package/lib/commonjs/components/Drawer/Drawer.js

@@ -0,0 +1,382 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Drawer = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeGestureHandler = require("react-native-gesture-handler");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
+var _index = require("../../theme/index.js");
+var _index2 = require("../../utils/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * Drawer — slide-in side drawer (left / right / top / bottom).
+ *
+ * Built on Reanimated 3 + Gesture Handler 2 — gestures and animations run on the
+ * UI thread for buttery 60/120fps motion. Mirrors the BottomSheet ergonomics:
+ * imperative ref API, controlled/uncontrolled visibility, swipe-to-dismiss,
+ * tap-backdrop-to-dismiss, full a11y (modal dialog).
+ *
+ * USAGE:
+ *
+ * const ref = useRef<DrawerRef>(null);
+ * <Drawer ref={ref} side="left" width={300}>
+ *   <YourMenu />
+ * </Drawer>
+ *
+ * ref.current?.open();
+ * ref.current?.close();
+ * ref.current?.toggle();
+ */
+
+const DEFAULT_CLOSE_VELOCITY_THRESHOLD = 1000;
+const DEFAULT_DRAG_ACTIVATION_OFFSET = 10;
+const Drawer = exports.Drawer = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    visible: controlledVisible,
+    defaultVisible = false,
+    onChange,
+    side = 'left',
+    width,
+    enableSwipe = true,
+    enableBackdropPress = true,
+    backdropOpacity = 0.5,
+    haptic,
+    containerStyle,
+    children,
+    accessibilityLabel,
+    testID
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
+  const isControlled = typeof controlledVisible === 'boolean';
+  const drawerTokens = theme.components.drawer;
+  const closeVelocityThreshold = drawerTokens?.closeVelocityThreshold ?? DEFAULT_CLOSE_VELOCITY_THRESHOLD;
+  const dragActivationOffset = drawerTokens?.dragActivationOffset ?? DEFAULT_DRAG_ACTIVATION_OFFSET;
+  const [windowDims, setWindowDims] = (0, _react.useState)(() => _reactNative.Dimensions.get('window'));
+  (0, _react.useEffect)(() => {
+    const sub = _reactNative.Dimensions.addEventListener('change', ({
+      window
+    }) => setWindowDims(window));
+    return () => sub.remove();
+  }, []);
+  const isHorizontal = side === 'left' || side === 'right';
+  const sheetSize = (0, _react.useMemo)(() => resolveSize(width, isHorizontal, windowDims), [width, isHorizontal, windowDims]);
+
+  // closedOffset is signed: drawer is translated by `closedOffset` when fully closed,
+  // and by 0 when fully open. We always animate a single shared value `progress`
+  // (signed offset along the slide axis) so the same interpolation works for any side.
+  const closedOffset = (0, _react.useMemo)(() => {
+    switch (side) {
+      case 'left':
+        return -sheetSize;
+      case 'right':
+        return sheetSize;
+      case 'top':
+        return -sheetSize;
+      case 'bottom':
+        return sheetSize;
+    }
+  }, [side, sheetSize]);
+
+  // Uncontrolled defaultVisible starts already open — the offset must start at the
+  // open position (0) too, or the sheet is logically open while visually still
+  // pinned at the closed edge until the next explicit open()/close()/drag.
+  const offset = (0, _reactNativeReanimated.useSharedValue)(defaultVisible ? 0 : closedOffset);
+  const dragStart = (0, _reactNativeReanimated.useSharedValue)(defaultVisible ? 0 : closedOffset);
+  const [isOpen, setIsOpen] = (0, _react.useState)(defaultVisible);
+  const isOpenShared = (0, _reactNativeReanimated.useSharedValue)(defaultVisible);
+
+  // Whenever closedOffset changes (orientation / width prop), keep current state coherent.
+  (0, _react.useEffect)(() => {
+    if (!isOpen) {
+      offset.value = closedOffset;
+      dragStart.value = closedOffset;
+    }
+  }, [closedOffset, isOpen, offset, dragStart]);
+  const springCfg = theme.motion.spring.snappy;
+  const animateOpen = (0, _react.useCallback)(() => {
+    offset.value = (0, _reactNativeReanimated.withSpring)(0, springCfg);
+  }, [offset, springCfg]);
+  const animateClose = (0, _react.useCallback)(() => {
+    offset.value = (0, _reactNativeReanimated.withSpring)(closedOffset, springCfg);
+  }, [offset, closedOffset, springCfg]);
+  const setOpenJS = (0, _react.useCallback)(next => {
+    setIsOpen(prev => {
+      if (prev === next) {
+        return prev;
+      }
+      onChange?.(next);
+      return next;
+    });
+    isOpenShared.value = next;
+  }, [onChange, isOpenShared]);
+  const open = (0, _react.useCallback)(() => {
+    setOpenJS(true);
+    animateOpen();
+  }, [setOpenJS, animateOpen]);
+  const close = (0, _react.useCallback)(() => {
+    setOpenJS(false);
+    animateClose();
+  }, [setOpenJS, animateClose]);
+  const toggle = (0, _react.useCallback)(() => {
+    if (isOpen) {
+      close();
+    } else {
+      open();
+    }
+  }, [isOpen, open, close]);
+  (0, _react.useImperativeHandle)(ref, () => ({
+    open,
+    close,
+    toggle
+  }), [open, close, toggle]);
+
+  // Drive the controlled `visible` prop.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: controlled-prop driver: must react to `controlledVisible` alone, or the internal open/close state it sets would re-trigger it
+  (0, _react.useEffect)(() => {
+    if (!isControlled) {
+      return;
+    }
+    if (controlledVisible === isOpen) {
+      return;
+    }
+    if (controlledVisible) {
+      open();
+    } else {
+      close();
+    }
+  }, [controlledVisible]);
+
+  // ───────── Gesture (UI thread) ─────────
+  const panGesture = (0, _react.useMemo)(() => {
+    const closed = closedOffset;
+    const sideValue = side;
+    const swipeAllowed = enableSwipe;
+    let g = _reactNativeGestureHandler.Gesture.Pan();
+    if (isHorizontal) {
+      g = g.activeOffsetX([-dragActivationOffset, dragActivationOffset]).failOffsetY([-15, 15]);
+    } else {
+      g = g.activeOffsetY([-dragActivationOffset, dragActivationOffset]).failOffsetX([-15, 15]);
+    }
+    return g.onStart(() => {
+      'worklet';
+
+      if (!swipeAllowed) {
+        return;
+      }
+      dragStart.value = offset.value;
+    }).onUpdate(event => {
+      'worklet';
+
+      if (!swipeAllowed) {
+        return;
+      }
+      const delta = isHorizontal ? event.translationX : event.translationY;
+      const next = dragStart.value + delta;
+      // Clamp at the open edge (offset = 0) with a touch of rubber-banding
+      // and at the closed edge (offset = closed).
+      const minBound = Math.min(0, closed);
+      const maxBound = Math.max(0, closed);
+      if (next < minBound) {
+        offset.value = minBound + (next - minBound) * 0.25;
+      } else if (next > maxBound) {
+        offset.value = maxBound + (next - maxBound) * 0.25;
+      } else {
+        offset.value = next;
+      }
+    }).onEnd(event => {
+      'worklet';
+
+      if (!swipeAllowed) {
+        return;
+      }
+      const velocity = isHorizontal ? event.velocityX : event.velocityY;
+      const releaseOffset = offset.value;
+
+      // Direction the user must swipe to *close* the drawer:
+      //   left   → negative X
+      //   right  → positive X
+      //   top    → negative Y
+      //   bottom → positive Y
+      let isFastClose = false;
+      if (sideValue === 'left' || sideValue === 'top') {
+        isFastClose = velocity < -closeVelocityThreshold;
+      } else {
+        isFastClose = velocity > closeVelocityThreshold;
+      }
+      const closedAbs = Math.abs(closed);
+      const traveledClosed = Math.abs(releaseOffset) / closedAbs; // 0 = open, 1 = closed
+      const shouldClose = isFastClose || traveledClosed > 0.5;
+      if (shouldClose) {
+        (0, _reactNativeReanimated.runOnJS)(setOpenJS)(false);
+        offset.value = (0, _reactNativeReanimated.withSpring)(closed, springCfg);
+      } else {
+        (0, _reactNativeReanimated.runOnJS)(setOpenJS)(true);
+        offset.value = (0, _reactNativeReanimated.withSpring)(0, springCfg);
+      }
+    });
+  }, [closedOffset, dragStart, enableSwipe, isHorizontal, offset, setOpenJS, side, springCfg, closeVelocityThreshold, dragActivationOffset]);
+
+  // ───────── Animated styles ─────────
+  const sheetStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    if (isHorizontal) {
+      return {
+        transform: [{
+          translateX: offset.value
+        }]
+      };
+    }
+    return {
+      transform: [{
+        translateY: offset.value
+      }]
+    };
+  });
+  const backdropStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    // When offset === closedOffset → 0 opacity; when offset === 0 → backdropOpacity.
+    const opacity = (0, _reactNativeReanimated.interpolate)(offset.value, [closedOffset, 0], [0, backdropOpacity], _reactNativeReanimated.Extrapolation.CLAMP);
+    const closedDistance = Math.abs(offset.value - closedOffset);
+    return {
+      opacity,
+      pointerEvents: closedDistance < 0.5 ? 'none' : 'auto'
+    };
+  }, [closedOffset, backdropOpacity]);
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const handleBackdropPress = (0, _react.useCallback)(() => {
+    if (!enableBackdropPress) {
+      return;
+    }
+    const h = (0, _index2.resolveHaptic)(haptic, 'selection');
+    if (h) {
+      (0, _index2.triggerHaptic)(h);
+    }
+    close();
+  }, [enableBackdropPress, close, haptic]);
+
+  // Per-side container layout — must be a hook on every render path so we
+  // can't gate it on the lazy-mount early-return below.
+  const sideLayout = (0, _react.useMemo)(() => {
+    switch (side) {
+      case 'left':
+        return {
+          position: 'absolute',
+          top: 0,
+          bottom: 0,
+          left: 0,
+          width: sheetSize,
+          paddingTop: insets.top,
+          paddingBottom: insets.bottom,
+          paddingLeft: insets.left
+        };
+      case 'right':
+        return {
+          position: 'absolute',
+          top: 0,
+          bottom: 0,
+          right: 0,
+          width: sheetSize,
+          paddingTop: insets.top,
+          paddingBottom: insets.bottom,
+          paddingRight: insets.right
+        };
+      case 'top':
+        return {
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          height: sheetSize,
+          paddingTop: insets.top,
+          paddingLeft: insets.left,
+          paddingRight: insets.right
+        };
+      case 'bottom':
+        return {
+          position: 'absolute',
+          bottom: 0,
+          left: 0,
+          right: 0,
+          height: sheetSize,
+          paddingBottom: insets.bottom,
+          paddingLeft: insets.left,
+          paddingRight: insets.right
+        };
+    }
+  }, [side, sheetSize, insets]);
+
+  // Mount lazily — only render the heavy gesture/animation tree once the drawer
+  // has been opened at least once. Same trick as BottomSheet.
+  const everOpenedRef = (0, _react.useRef)(defaultVisible);
+  if (isOpen) {
+    everOpenedRef.current = true;
+  }
+  if (!everOpenedRef.current) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: _reactNative.StyleSheet.absoluteFill,
+    pointerEvents: "box-none",
+    testID: testID,
+    accessibilityViewIsModal: isOpen,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+      style: [styles.backdrop, {
+        backgroundColor: theme.colors.background.overlay
+      }, backdropStyle],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+        style: _reactNative.StyleSheet.absoluteFill,
+        onPress: handleBackdropPress,
+        accessibilityRole: "button",
+        accessibilityLabel: "Close drawer",
+        disabled: !enableBackdropPress || !isOpen
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
+      gesture: panGesture,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+        accessibilityRole: "alert",
+        accessibilityLabel: accessibilityLabel ?? 'Drawer',
+        style: [sideLayout, {
+          backgroundColor: theme.colors.background.elevated,
+          ...theme.shadows.xl
+        }, containerStyle, sheetStyle],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.content,
+          children: children
+        })
+      })
+    })]
+  });
+});
+Drawer.displayName = 'Drawer';
+
+// ───────── Helpers ─────────
+
+const resolveSize = (width, isHorizontal, win) => {
+  if (typeof width === 'number') {
+    return width;
+  }
+  if (typeof width === 'string') {
+    const pct = parseFloat(width);
+    if (Number.isNaN(pct)) {
+      return isHorizontal ? 280 : Math.round(win.height * 0.4);
+    }
+    const base = isHorizontal ? win.width : win.height;
+    return pct / 100 * base;
+  }
+  // Defaults
+  return isHorizontal ? 280 : Math.round(win.height * 0.4);
+};
+const buildStyles = _theme => _reactNative.StyleSheet.create({
+  backdrop: {
+    ..._reactNative.StyleSheet.absoluteFill
+  },
+  content: {
+    flex: 1
+  }
+});
+var _default = exports.default = Drawer;
+//# sourceMappingURL=Drawer.js.map

package/lib/commonjs/components/Drawer/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Drawer", {
+  enumerable: true,
+  get: function () {
+    return _Drawer.Drawer;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Drawer.default;
+  }
+});
+var _Drawer = _interopRequireWildcard(require("./Drawer.js"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/EmptyState/EmptyState.js

@@ -0,0 +1,236 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.EmptyState = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _usePressAnimation = require("../../hooks/usePressAnimation.js");
+var _index = require("../../theme/index.js");
+var _corners = require("../../utils/corners.js");
+var _hapticUtils = require("../../utils/hapticUtils.js");
+var _SquircleFill = require("../SquircleFill/SquircleFill.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const SIZE_FALLBACK = {
+  sm: {
+    iconSize: 48,
+    titleFontSize: 'lg',
+    descriptionFontSize: 'sm',
+    paddingVertical: 'lg'
+  },
+  md: {
+    iconSize: 64,
+    titleFontSize: 'xl',
+    descriptionFontSize: 'base',
+    paddingVertical: 'xl'
+  },
+  lg: {
+    iconSize: 80,
+    titleFontSize: '2xl',
+    descriptionFontSize: 'base',
+    paddingVertical: '2xl'
+  }
+};
+const sizeFor = (theme, size) => {
+  const tokens = {
+    ...SIZE_FALLBACK[size],
+    ...(theme.components.emptyState?.[size] ?? {})
+  };
+  return {
+    iconSize: tokens.iconSize,
+    titleSize: theme.typography.fontSize[tokens.titleFontSize],
+    descriptionSize: theme.typography.fontSize[tokens.descriptionFontSize],
+    paddingVertical: theme.spacing[tokens.paddingVertical]
+  };
+};
+const ActionButton = ({
+  action,
+  variant
+}) => {
+  const theme = (0, _index.useTheme)();
+  const {
+    scale,
+    pressIn,
+    pressOut
+  } = (0, _usePressAnimation.usePressAnimation)({
+    enabled: true
+  });
+  const styles = (0, _react.useMemo)(() => buildActionStyles(theme), [theme]);
+  const isPrimary = variant === 'primary';
+  const onPress = () => {
+    (0, _hapticUtils.triggerHaptic)('selection');
+    action.onPress();
+  };
+
+  // Android smooth corners: fill, border and the pressed tint move to an SVG
+  // squircle over a transparent host, the same way Button does it.
+  const squircle = (0, _SquircleFill.useSquircle)(true, theme.radius.md);
+  const fillFor = pressed => isPrimary ? theme.colors.primary : pressed ? theme.colors.surface.pressed : 'transparent';
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+    style: {
+      transform: [{
+        scale
+      }]
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      onPress: onPress,
+      onPressIn: pressIn,
+      onPressOut: pressOut,
+      accessibilityRole: "button",
+      accessibilityLabel: action.accessibilityLabel ?? action.label,
+      accessibilityHint: action.accessibilityHint,
+      testID: action.testID,
+      onLayout: squircle.onLayout,
+      android_ripple: {
+        color: isPrimary ? theme.colors.primaryHover : theme.colors.surface.pressed,
+        borderless: false
+      },
+      style: ({
+        pressed
+      }) => [styles.button, isPrimary ? styles.buttonPrimary : styles.buttonSecondary, pressed && !isPrimary && !squircle.active ? styles.buttonSecondaryPressed : null, squircle.active ? styles.buttonSquircleHost : null],
+      children: ({
+        pressed
+      }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [squircle.active && squircle.size ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SquircleFill.SquircleFill, {
+          width: squircle.size.width,
+          height: squircle.size.height,
+          radius: theme.radius.md,
+          fill: fillFor(pressed),
+          stroke: isPrimary ? undefined : theme.colors.border.primary,
+          strokeWidth: isPrimary ? 0 : 1,
+          outset: isPrimary ? 0 : 1
+        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.buttonText, isPrimary ? styles.buttonTextPrimary : styles.buttonTextSecondary],
+          numberOfLines: 1,
+          children: action.label
+        })]
+      })
+    })
+  });
+};
+const EmptyState = exports.EmptyState = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    icon,
+    title,
+    description,
+    action,
+    secondaryAction,
+    size = 'md',
+    style,
+    testID
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const sz = (0, _react.useMemo)(() => sizeFor(theme, size), [theme, size]);
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    ref: ref,
+    accessibilityRole: "summary",
+    testID: testID,
+    style: [styles.root, {
+      paddingVertical: sz.paddingVertical
+    }, style],
+    children: [icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.iconCircle, {
+        width: sz.iconSize,
+        height: sz.iconSize,
+        borderRadius: sz.iconSize / 2,
+        ..._corners.smoothCorners
+      }],
+      children: icon
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.title, {
+        fontSize: sz.titleSize,
+        ...(0, _index.fontFor)(theme, 'semibold')
+      }],
+      children: title
+    }), description ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.description, {
+        fontSize: sz.descriptionSize
+      }],
+      children: description
+    }) : null, action || secondaryAction ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.actions,
+      children: [action ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionButton, {
+        action: action,
+        variant: "primary"
+      }) : null, secondaryAction ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionButton, {
+        action: secondaryAction,
+        variant: "secondary"
+      }) : null]
+    }) : null]
+  });
+});
+EmptyState.displayName = 'EmptyState';
+const buildStyles = theme => _reactNative.StyleSheet.create({
+  root: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: theme.spacing.lg,
+    gap: theme.spacing.md
+  },
+  iconCircle: {
+    backgroundColor: theme.colors.surface.disabled,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  title: {
+    color: theme.colors.text.primary,
+    textAlign: 'center'
+  },
+  description: {
+    color: theme.colors.text.secondary,
+    textAlign: 'center',
+    maxWidth: 320,
+    lineHeight: theme.typography.fontSize.base * theme.typography.lineHeight.normal
+  },
+  actions: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: theme.spacing.sm,
+    marginTop: theme.spacing.xs
+  }
+});
+const buildActionStyles = theme => _reactNative.StyleSheet.create({
+  button: {
+    paddingHorizontal: theme.spacing.lg,
+    paddingVertical: theme.spacing.sm,
+    minHeight: 42,
+    borderRadius: theme.radius.md,
+    ..._corners.smoothCorners,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row'
+  },
+  buttonPrimary: {
+    backgroundColor: theme.colors.primary
+  },
+  buttonSecondary: {
+    backgroundColor: 'transparent',
+    borderWidth: 1,
+    borderColor: theme.colors.border.primary
+  },
+  buttonSecondaryPressed: {
+    backgroundColor: theme.colors.surface.pressed
+  },
+  // Under the Android squircle the host paints nothing; the border width
+  // stays so the layout does not move by a pixel.
+  buttonSquircleHost: {
+    backgroundColor: 'transparent',
+    borderColor: 'transparent',
+    overflow: 'visible'
+  },
+  buttonText: {
+    fontSize: theme.typography.fontSize.base,
+    ...(0, _index.fontFor)(theme, 'semibold')
+  },
+  buttonTextPrimary: {
+    color: theme.colors.text.inverse
+  },
+  buttonTextSecondary: {
+    color: theme.colors.text.primary
+  }
+});
+var _default = exports.default = EmptyState;
+//# sourceMappingURL=EmptyState.js.map

package/lib/commonjs/components/EmptyState/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "EmptyState", {
+  enumerable: true,
+  get: function () {
+    return _EmptyState.EmptyState;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _EmptyState.default;
+  }
+});
+var _EmptyState = _interopRequireWildcard(require("./EmptyState.js"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+//# sourceMappingURL=index.js.map