@webority/mobile-ui 0.0.38 → 0.1.0

package/lib/module/components/Drawer/Drawer.js

@@ -1,378 +1 @@
-"use strict";
-
-/**
- * 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();
- */
-
-import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { Dimensions, Pressable, StyleSheet, View } from 'react-native';
-import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-import Animated, { Extrapolation, interpolate, runOnJS, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useTheme } from "../../theme/index.js";
-import { resolveHaptic, triggerHaptic } from "../../utils/index.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const DEFAULT_CLOSE_VELOCITY_THRESHOLD = 1000;
-const DEFAULT_DRAG_ACTIVATION_OFFSET = 10;
-const Drawer = /*#__PURE__*/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 = useTheme();
-  const insets = 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] = useState(() => Dimensions.get('window'));
-  useEffect(() => {
-    const sub = Dimensions.addEventListener('change', ({
-      window
-    }) => setWindowDims(window));
-    return () => sub.remove();
-  }, []);
-  const isHorizontal = side === 'left' || side === 'right';
-  const sheetSize = 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 = 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 = useSharedValue(defaultVisible ? 0 : closedOffset);
-  const dragStart = useSharedValue(defaultVisible ? 0 : closedOffset);
-  const [isOpen, setIsOpen] = useState(defaultVisible);
-  const isOpenShared = useSharedValue(defaultVisible);
-
-  // Whenever closedOffset changes (orientation / width prop), keep current state coherent.
-  useEffect(() => {
-    if (!isOpen) {
-      offset.value = closedOffset;
-      dragStart.value = closedOffset;
-    }
-  }, [closedOffset, isOpen, offset, dragStart]);
-  const springCfg = theme.motion.spring.snappy;
-  const animateOpen = useCallback(() => {
-    offset.value = withSpring(0, springCfg);
-  }, [offset, springCfg]);
-  const animateClose = useCallback(() => {
-    offset.value = withSpring(closedOffset, springCfg);
-  }, [offset, closedOffset, springCfg]);
-  const setOpenJS = useCallback(next => {
-    setIsOpen(prev => {
-      if (prev === next) {
-        return prev;
-      }
-      onChange?.(next);
-      return next;
-    });
-    isOpenShared.value = next;
-  }, [onChange, isOpenShared]);
-  const open = useCallback(() => {
-    setOpenJS(true);
-    animateOpen();
-  }, [setOpenJS, animateOpen]);
-  const close = useCallback(() => {
-    setOpenJS(false);
-    animateClose();
-  }, [setOpenJS, animateClose]);
-  const toggle = useCallback(() => {
-    if (isOpen) {
-      close();
-    } else {
-      open();
-    }
-  }, [isOpen, open, close]);
-  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
-  useEffect(() => {
-    if (!isControlled) {
-      return;
-    }
-    if (controlledVisible === isOpen) {
-      return;
-    }
-    if (controlledVisible) {
-      open();
-    } else {
-      close();
-    }
-  }, [controlledVisible]);
-
-  // ───────── Gesture (UI thread) ─────────
-  const panGesture = useMemo(() => {
-    const closed = closedOffset;
-    const sideValue = side;
-    const swipeAllowed = enableSwipe;
-    let g = 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) {
-        runOnJS(setOpenJS)(false);
-        offset.value = withSpring(closed, springCfg);
-      } else {
-        runOnJS(setOpenJS)(true);
-        offset.value = withSpring(0, springCfg);
-      }
-    });
-  }, [closedOffset, dragStart, enableSwipe, isHorizontal, offset, setOpenJS, side, springCfg, closeVelocityThreshold, dragActivationOffset]);
-
-  // ───────── Animated styles ─────────
-  const sheetStyle = useAnimatedStyle(() => {
-    if (isHorizontal) {
-      return {
-        transform: [{
-          translateX: offset.value
-        }]
-      };
-    }
-    return {
-      transform: [{
-        translateY: offset.value
-      }]
-    };
-  });
-  const backdropStyle = useAnimatedStyle(() => {
-    // When offset === closedOffset → 0 opacity; when offset === 0 → backdropOpacity.
-    const opacity = interpolate(offset.value, [closedOffset, 0], [0, backdropOpacity], Extrapolation.CLAMP);
-    const closedDistance = Math.abs(offset.value - closedOffset);
-    return {
-      opacity,
-      pointerEvents: closedDistance < 0.5 ? 'none' : 'auto'
-    };
-  }, [closedOffset, backdropOpacity]);
-  const styles = useMemo(() => buildStyles(theme), [theme]);
-  const handleBackdropPress = useCallback(() => {
-    if (!enableBackdropPress) {
-      return;
-    }
-    const h = resolveHaptic(haptic, 'selection');
-    if (h) {
-      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 = 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 = useRef(defaultVisible);
-  if (isOpen) {
-    everOpenedRef.current = true;
-  }
-  if (!everOpenedRef.current) {
-    return null;
-  }
-  return /*#__PURE__*/_jsxs(View, {
-    style: StyleSheet.absoluteFill,
-    pointerEvents: "box-none",
-    testID: testID,
-    accessibilityViewIsModal: isOpen,
-    children: [/*#__PURE__*/_jsx(Animated.View, {
-      style: [styles.backdrop, {
-        backgroundColor: theme.colors.background.overlay
-      }, backdropStyle],
-      children: /*#__PURE__*/_jsx(Pressable, {
-        style: StyleSheet.absoluteFill,
-        onPress: handleBackdropPress,
-        accessibilityRole: "button",
-        accessibilityLabel: "Close drawer",
-        disabled: !enableBackdropPress || !isOpen
-      })
-    }), /*#__PURE__*/_jsx(GestureDetector, {
-      gesture: panGesture,
-      children: /*#__PURE__*/_jsx(Animated.View, {
-        accessibilityRole: "alert",
-        accessibilityLabel: accessibilityLabel ?? 'Drawer',
-        style: [sideLayout, {
-          backgroundColor: theme.colors.background.elevated,
-          ...theme.shadows.xl
-        }, containerStyle, sheetStyle],
-        children: /*#__PURE__*/_jsx(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 => StyleSheet.create({
-  backdrop: {
-    ...StyleSheet.absoluteFill
-  },
-  content: {
-    flex: 1
-  }
-});
-export { Drawer };
-export default Drawer;
-//# sourceMappingURL=Drawer.js.map
+import t,{forwardRef as e,useCallback as o,useEffect as a,useImperativeHandle as i,useMemo as r,useRef as n,useState as s}from"react";import{Dimensions as l,Pressable as c,StyleSheet as d,View as p}from"react-native";import{Gesture as u,GestureDetector as f}from"react-native-gesture-handler";import h,{Extrapolation as b,interpolate as g,runOnJS as m,useAnimatedStyle as v,useSharedValue as y,withSpring as w}from"react-native-reanimated";import{useSafeAreaInsets as x}from"react-native-safe-area-context";import{useTheme as M}from"../../theme/index.js";import{resolveHaptic as k,triggerHaptic as L}from"../../utils/index.js";import{jsx as O,jsxs as j}from"react/jsx-runtime";const C=e((t,e)=>{const{visible:C,defaultVisible:R=!1,onChange:V,side:X="left",width:Y,enableSwipe:B=!0,enableBackdropPress:D=!0,backdropOpacity:E=.5,haptic:F,containerStyle:N,children:P,accessibilityLabel:T,testID:I}=t,S=M(),A=x(),U="boolean"==typeof C,q=S.components.drawer,z=q?.closeVelocityThreshold??1e3,G=q?.dragActivationOffset??10,[H,J]=s(()=>l.get("window"));a(()=>{const t=l.addEventListener("change",({window:t})=>J(t));return()=>t.remove()},[]);const K="left"===X||"right"===X,Q=r(()=>resolveSize(Y,K,H),[Y,K,H]),W=r(()=>{switch(X){case"left":case"top":return-Q;case"right":case"bottom":return Q}},[X,Q]),Z=y(R?0:W),$=y(R?0:W),[_,tt]=s(R),et=y(R);a(()=>{_||(Z.value=W,$.value=W)},[W,_,Z,$]);const ot=S.motion.spring.snappy,at=o(()=>{Z.value=w(0,ot)},[Z,ot]),it=o(()=>{Z.value=w(W,ot)},[Z,W,ot]),rt=o(t=>{tt(e=>e===t?e:(V?.(t),t)),et.value=t},[V,et]),nt=o(()=>{rt(!0),at()},[rt,at]),st=o(()=>{rt(!1),it()},[rt,it]),lt=o(()=>{_?st():nt()},[_,nt,st]);i(e,()=>({open:nt,close:st,toggle:lt}),[nt,st,lt]),a(()=>{U&&C!==_&&(C?nt():st())},[C]);const ct=r(()=>{const t=W,e=X,o=B;let a=u.Pan();return a=K?a.activeOffsetX([-G,G]).failOffsetY([-15,15]):a.activeOffsetY([-G,G]).failOffsetX([-15,15]),a.onStart(()=>{o&&($.value=Z.value)}).onUpdate(e=>{if(!o)return;const a=K?e.translationX:e.translationY,i=$.value+a,r=Math.min(0,t),n=Math.max(0,t);Z.value=i<r?r+.25*(i-r):i>n?n+.25*(i-n):i}).onEnd(a=>{if(!o)return;const i=K?a.velocityX:a.velocityY,r=Z.value;let n=!1;n="left"===e||"top"===e?i<-z:i>z;const s=Math.abs(t),l=Math.abs(r)/s;n||l>.5?(m(rt)(!1),Z.value=w(t,ot)):(m(rt)(!0),Z.value=w(0,ot))})},[W,$,B,K,Z,rt,X,ot,z,G]),dt=v(()=>K?{transform:[{translateX:Z.value}]}:{transform:[{translateY:Z.value}]}),pt=v(()=>({opacity:g(Z.value,[W,0],[0,E],b.CLAMP),pointerEvents:Math.abs(Z.value-W)<.5?"none":"auto"}),[W,E]),ut=r(()=>buildStyles(S),[S]),ft=o(()=>{if(!D)return;const t=k(F,"selection");t&&L(t),st()},[D,st,F]),ht=r(()=>{switch(X){case"left":return{position:"absolute",top:0,bottom:0,left:0,width:Q,paddingTop:A.top,paddingBottom:A.bottom,paddingLeft:A.left};case"right":return{position:"absolute",top:0,bottom:0,right:0,width:Q,paddingTop:A.top,paddingBottom:A.bottom,paddingRight:A.right};case"top":return{position:"absolute",top:0,left:0,right:0,height:Q,paddingTop:A.top,paddingLeft:A.left,paddingRight:A.right};case"bottom":return{position:"absolute",bottom:0,left:0,right:0,height:Q,paddingBottom:A.bottom,paddingLeft:A.left,paddingRight:A.right}}},[X,Q,A]),bt=n(R);return _&&(bt.current=!0),bt.current?j(p,{style:d.absoluteFill,pointerEvents:"box-none",testID:I,accessibilityViewIsModal:_,children:[O(h.View,{style:[ut.backdrop,{backgroundColor:S.colors.background.overlay},pt],children:O(c,{style:d.absoluteFill,onPress:ft,accessibilityRole:"button",accessibilityLabel:"Close drawer",disabled:!D||!_})}),O(f,{gesture:ct,children:O(h.View,{accessibilityRole:"alert",accessibilityLabel:T??"Drawer",style:[ht,{backgroundColor:S.colors.background.elevated,...S.shadows.xl},N,dt],children:O(p,{style:ut.content,children:P})})})]}):null});C.displayName="Drawer";const resolveSize=(t,e,o)=>{if("number"==typeof t)return t;if("string"==typeof t){const a=parseFloat(t);if(Number.isNaN(a))return e?280:Math.round(.4*o.height);return a/100*(e?o.width:o.height)}return e?280:Math.round(.4*o.height)},buildStyles=t=>d.create({backdrop:{...d.absoluteFill},content:{flex:1}});export{C as Drawer};export default C;

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

@@ -1,4 +1 @@
-"use strict";
-
-export { Drawer, default } from "./Drawer.js";
-//# sourceMappingURL=index.js.map
+export{Drawer,default}from"./Drawer.js";

package/lib/module/components/EmptyState/EmptyState.js

@@ -1,232 +1 @@
-"use strict";
-
-import React, { forwardRef, useMemo } from 'react';
-import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
-import { usePressAnimation } from "../../hooks/usePressAnimation.js";
-import { fontFor, useTheme } from "../../theme/index.js";
-import { smoothCorners } from "../../utils/corners.js";
-import { triggerHaptic } from "../../utils/hapticUtils.js";
-import { SquircleFill, useSquircle } from "../SquircleFill/SquircleFill.js";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-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 = useTheme();
-  const {
-    scale,
-    pressIn,
-    pressOut
-  } = usePressAnimation({
-    enabled: true
-  });
-  const styles = useMemo(() => buildActionStyles(theme), [theme]);
-  const isPrimary = variant === 'primary';
-  const onPress = () => {
-    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 = useSquircle(true, theme.radius.md);
-  const fillFor = pressed => isPrimary ? theme.colors.primary : pressed ? theme.colors.surface.pressed : 'transparent';
-  return /*#__PURE__*/_jsx(Animated.View, {
-    style: {
-      transform: [{
-        scale
-      }]
-    },
-    children: /*#__PURE__*/_jsx(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__*/_jsxs(_Fragment, {
-        children: [squircle.active && squircle.size ? /*#__PURE__*/_jsx(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__*/_jsx(Text, {
-          style: [styles.buttonText, isPrimary ? styles.buttonTextPrimary : styles.buttonTextSecondary],
-          numberOfLines: 1,
-          children: action.label
-        })]
-      })
-    })
-  });
-};
-const EmptyState = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    icon,
-    title,
-    description,
-    action,
-    secondaryAction,
-    size = 'md',
-    style,
-    testID
-  } = props;
-  const theme = useTheme();
-  const sz = useMemo(() => sizeFor(theme, size), [theme, size]);
-  const styles = useMemo(() => buildStyles(theme), [theme]);
-  return /*#__PURE__*/_jsxs(View, {
-    ref: ref,
-    accessibilityRole: "summary",
-    testID: testID,
-    style: [styles.root, {
-      paddingVertical: sz.paddingVertical
-    }, style],
-    children: [icon ? /*#__PURE__*/_jsx(View, {
-      style: [styles.iconCircle, {
-        width: sz.iconSize,
-        height: sz.iconSize,
-        borderRadius: sz.iconSize / 2,
-        ...smoothCorners
-      }],
-      children: icon
-    }) : null, /*#__PURE__*/_jsx(Text, {
-      style: [styles.title, {
-        fontSize: sz.titleSize,
-        ...fontFor(theme, 'semibold')
-      }],
-      children: title
-    }), description ? /*#__PURE__*/_jsx(Text, {
-      style: [styles.description, {
-        fontSize: sz.descriptionSize
-      }],
-      children: description
-    }) : null, action || secondaryAction ? /*#__PURE__*/_jsxs(View, {
-      style: styles.actions,
-      children: [action ? /*#__PURE__*/_jsx(ActionButton, {
-        action: action,
-        variant: "primary"
-      }) : null, secondaryAction ? /*#__PURE__*/_jsx(ActionButton, {
-        action: secondaryAction,
-        variant: "secondary"
-      }) : null]
-    }) : null]
-  });
-});
-EmptyState.displayName = 'EmptyState';
-const buildStyles = theme => 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 => StyleSheet.create({
-  button: {
-    paddingHorizontal: theme.spacing.lg,
-    paddingVertical: theme.spacing.sm,
-    minHeight: 42,
-    borderRadius: theme.radius.md,
-    ...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,
-    ...fontFor(theme, 'semibold')
-  },
-  buttonTextPrimary: {
-    color: theme.colors.text.inverse
-  },
-  buttonTextSecondary: {
-    color: theme.colors.text.primary
-  }
-});
-export { EmptyState };
-export default EmptyState;
-//# sourceMappingURL=EmptyState.js.map
+import e,{forwardRef as t,useMemo as i}from"react";import{Animated as r,Pressable as o,StyleSheet as n,Text as s,View as l}from"react-native";import{usePressAnimation as a}from"../../hooks/usePressAnimation.js";import{fontFor as c,useTheme as d}from"../../theme/index.js";import{smoothCorners as p}from"../../utils/corners.js";import{triggerHaptic as u}from"../../utils/hapticUtils.js";import{SquircleFill as m,useSquircle as y}from"../SquircleFill/SquircleFill.js";import{jsx as b,Fragment as g,jsxs as S}from"react/jsx-runtime";const f={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"}},ActionButton=({action:e,variant:t})=>{const n=d(),{scale:l,pressIn:c,pressOut:p}=a({enabled:!0}),f=i(()=>buildActionStyles(n),[n]),z="primary"===t,h=y(!0,n.radius.md),fillFor=e=>z?n.colors.primary:e?n.colors.surface.pressed:"transparent";return b(r.View,{style:{transform:[{scale:l}]},children:b(o,{onPress:()=>{u("selection"),e.onPress()},onPressIn:c,onPressOut:p,accessibilityRole:"button",accessibilityLabel:e.accessibilityLabel??e.label,accessibilityHint:e.accessibilityHint,testID:e.testID,onLayout:h.onLayout,android_ripple:{color:z?n.colors.primaryHover:n.colors.surface.pressed,borderless:!1},style:({pressed:e})=>[f.button,z?f.buttonPrimary:f.buttonSecondary,!e||z||h.active?null:f.buttonSecondaryPressed,h.active?f.buttonSquircleHost:null],children:({pressed:t})=>S(g,{children:[h.active&&h.size?b(m,{width:h.size.width,height:h.size.height,radius:n.radius.md,fill:fillFor(t),stroke:z?void 0:n.colors.border.primary,strokeWidth:z?0:1,outset:z?0:1}):null,b(s,{style:[f.buttonText,z?f.buttonTextPrimary:f.buttonTextSecondary],numberOfLines:1,children:e.label})]})})})},z=t((e,t)=>{const{icon:r,title:o,description:n,action:a,secondaryAction:u,size:m="md",fill:y=!1,style:g,testID:z}=e,h=d(),x=i(()=>((e,t)=>{const i={...f[t],...e.components.emptyState?.[t]??{}};return{iconSize:i.iconSize,titleSize:e.typography.fontSize[i.titleFontSize],descriptionSize:e.typography.fontSize[i.descriptionFontSize],paddingVertical:e.spacing[i.paddingVertical]}})(h,m),[h,m]),C=i(()=>buildStyles(h),[h]);return S(l,{ref:t,accessibilityRole:"summary",testID:z,style:[C.root,{paddingVertical:x.paddingVertical},y?C.fill:null,g],children:[r?b(l,{style:[C.iconCircle,{width:x.iconSize,height:x.iconSize,borderRadius:x.iconSize/2,...p}],children:r}):null,b(s,{style:[C.title,{fontSize:x.titleSize,...c(h,"semibold")}],children:o}),n?b(s,{style:[C.description,{fontSize:x.descriptionSize}],children:n}):null,a||u?S(l,{style:C.actions,children:[a?b(ActionButton,{action:a,variant:"primary"}):null,u?b(ActionButton,{action:u,variant:"secondary"}):null]}):null]})});z.displayName="EmptyState";const buildStyles=e=>n.create({root:{alignItems:"center",justifyContent:"center",paddingHorizontal:e.spacing.lg,gap:e.spacing.md},fill:{flexGrow:1},iconCircle:{backgroundColor:e.colors.surface.disabled,alignItems:"center",justifyContent:"center"},title:{color:e.colors.text.primary,textAlign:"center"},description:{color:e.colors.text.secondary,textAlign:"center",maxWidth:320,lineHeight:e.typography.fontSize.base*e.typography.lineHeight.normal},actions:{flexDirection:"row",alignItems:"center",gap:e.spacing.sm,marginTop:e.spacing.xs}}),buildActionStyles=e=>n.create({button:{paddingHorizontal:e.spacing.lg,paddingVertical:e.spacing.sm,minHeight:42,borderRadius:e.radius.md,...p,alignItems:"center",justifyContent:"center",flexDirection:"row"},buttonPrimary:{backgroundColor:e.colors.primary},buttonSecondary:{backgroundColor:"transparent",borderWidth:1,borderColor:e.colors.border.primary},buttonSecondaryPressed:{backgroundColor:e.colors.surface.pressed},buttonSquircleHost:{backgroundColor:"transparent",borderColor:"transparent",overflow:"visible"},buttonText:{fontSize:e.typography.fontSize.base,...c(e,"semibold")},buttonTextPrimary:{color:e.colors.onPrimary},buttonTextSecondary:{color:e.colors.text.primary}});export{z as EmptyState};export default z;

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

@@ -1,4 +1 @@
-"use strict";
-
-export { default, EmptyState } from "./EmptyState.js";
-//# sourceMappingURL=index.js.map
+export{default,EmptyState}from"./EmptyState.js";