@webority/mobile-ui 0.0.39 → 0.2.0

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

@@ -1,382 +1 @@
-"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
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.Drawer=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_reactNativeGestureHandler=require("react-native-gesture-handler"),_reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated")),_reactNativeSafeAreaContext=require("react-native-safe-area-context"),_index=require("../../theme/index.js"),_index2=require("../../utils/index.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var a=new WeakMap,r=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var i,n,o={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return o;if(i=t?r:a){if(i.has(e))return i.get(e);i.set(e,o)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((n=(i=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(n.get||n.set)?i(o,t,n):o[t]=e[t]);return o})(e,t)}const DEFAULT_CLOSE_VELOCITY_THRESHOLD=1e3,DEFAULT_DRAG_ACTIVATION_OFFSET=10,Drawer=exports.Drawer=(0,_react.forwardRef)((e,t)=>{const{visible:a,defaultVisible:r=!1,onChange:i,side:n="left",width:o,enableSwipe:s=!0,enableBackdropPress:l=!0,backdropOpacity:c=.5,haptic:u,containerStyle:d,children:_,accessibilityLabel:p,testID:f}=e,v=(0,_index.useTheme)(),h=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)(),b="boolean"==typeof a,m=v.components.drawer,g=m?.closeVelocityThreshold??1e3,w=m?.dragActivationOffset??10,[y,N]=(0,_react.useState)(()=>_reactNative.Dimensions.get("window"));(0,_react.useEffect)(()=>{const e=_reactNative.Dimensions.addEventListener("change",({window:e})=>N(e));return()=>e.remove()},[]);const R="left"===n||"right"===n,x=(0,_react.useMemo)(()=>resolveSize(o,R,y),[o,R,y]),S=(0,_react.useMemo)(()=>{switch(n){case"left":case"top":return-x;case"right":case"bottom":return x}},[n,x]),k=(0,_reactNativeReanimated.useSharedValue)(r?0:S),j=(0,_reactNativeReanimated.useSharedValue)(r?0:S),[M,O]=(0,_react.useState)(r),C=(0,_reactNativeReanimated.useSharedValue)(r);(0,_react.useEffect)(()=>{M||(k.value=S,j.value=S)},[S,M,k,j]);const D=v.motion.spring.snappy,E=(0,_react.useCallback)(()=>{k.value=(0,_reactNativeReanimated.withSpring)(0,D)},[k,D]),L=(0,_react.useCallback)(()=>{k.value=(0,_reactNativeReanimated.withSpring)(S,D)},[k,S,D]),q=(0,_react.useCallback)(e=>{O(t=>t===e?t:(i?.(e),e)),C.value=e},[i,C]),A=(0,_react.useCallback)(()=>{q(!0),E()},[q,E]),T=(0,_react.useCallback)(()=>{q(!1),L()},[q,L]),V=(0,_react.useCallback)(()=>{M?T():A()},[M,A,T]);(0,_react.useImperativeHandle)(t,()=>({open:A,close:T,toggle:V}),[A,T,V]),(0,_react.useEffect)(()=>{b&&a!==M&&(a?A():T())},[a]);const P=(0,_react.useMemo)(()=>{const e=S,t=n,a=s;let r=_reactNativeGestureHandler.Gesture.Pan();return r=R?r.activeOffsetX([-w,w]).failOffsetY([-15,15]):r.activeOffsetY([-w,w]).failOffsetX([-15,15]),r.onStart(()=>{"worklet";a&&(j.value=k.value)}).onUpdate(t=>{"worklet";if(!a)return;const r=R?t.translationX:t.translationY,i=j.value+r,n=Math.min(0,e),o=Math.max(0,e);k.value=i<n?n+.25*(i-n):i>o?o+.25*(i-o):i}).onEnd(r=>{"worklet";if(!a)return;const i=R?r.velocityX:r.velocityY,n=k.value;let o=!1;o="left"===t||"top"===t?i<-g:i>g;const s=Math.abs(e),l=Math.abs(n)/s;o||l>.5?((0,_reactNativeReanimated.runOnJS)(q)(!1),k.value=(0,_reactNativeReanimated.withSpring)(e,D)):((0,_reactNativeReanimated.runOnJS)(q)(!0),k.value=(0,_reactNativeReanimated.withSpring)(0,D))})},[S,j,s,R,k,q,n,D,g,w]),F=(0,_reactNativeReanimated.useAnimatedStyle)(()=>R?{transform:[{translateX:k.value}]}:{transform:[{translateY:k.value}]}),H=(0,_reactNativeReanimated.useAnimatedStyle)(()=>({opacity:(0,_reactNativeReanimated.interpolate)(k.value,[S,0],[0,c],_reactNativeReanimated.Extrapolation.CLAMP),pointerEvents:Math.abs(k.value-S)<.5?"none":"auto"}),[S,c]),I=(0,_react.useMemo)(()=>buildStyles(v),[v]),W=(0,_react.useCallback)(()=>{if(!l)return;const e=(0,_index2.resolveHaptic)(u,"selection");e&&(0,_index2.triggerHaptic)(e),T()},[l,T,u]),G=(0,_react.useMemo)(()=>{switch(n){case"left":return{position:"absolute",top:0,bottom:0,left:0,width:x,paddingTop:h.top,paddingBottom:h.bottom,paddingLeft:h.left};case"right":return{position:"absolute",top:0,bottom:0,right:0,width:x,paddingTop:h.top,paddingBottom:h.bottom,paddingRight:h.right};case"top":return{position:"absolute",top:0,left:0,right:0,height:x,paddingTop:h.top,paddingLeft:h.left,paddingRight:h.right};case"bottom":return{position:"absolute",bottom:0,left:0,right:0,height:x,paddingBottom:h.bottom,paddingLeft:h.left,paddingRight:h.right}}},[n,x,h]),Y=(0,_react.useRef)(r);return M&&(Y.current=!0),Y.current?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_reactNative.StyleSheet.absoluteFill,pointerEvents:"box-none",testID:f,accessibilityViewIsModal:M,children:[(0,_jsxRuntime.jsx)(_reactNativeReanimated.default.View,{style:[I.backdrop,{backgroundColor:v.colors.background.overlay},H],children:(0,_jsxRuntime.jsx)(_reactNative.Pressable,{style:_reactNative.StyleSheet.absoluteFill,onPress:W,accessibilityRole:"button",accessibilityLabel:"Close drawer",disabled:!l||!M})}),(0,_jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector,{gesture:P,children:(0,_jsxRuntime.jsx)(_reactNativeReanimated.default.View,{accessibilityRole:"alert",accessibilityLabel:p??"Drawer",style:[G,{backgroundColor:v.colors.background.elevated,...v.shadows.xl},d,F],children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:I.content,children:_})})})]}):null});Drawer.displayName="Drawer";const resolveSize=(e,t,a)=>{if("number"==typeof e)return e;if("string"==typeof e){const r=parseFloat(e);if(Number.isNaN(r))return t?280:Math.round(.4*a.height);return r/100*(t?a.width:a.height)}return t?280:Math.round(.4*a.height)},buildStyles=e=>_reactNative.StyleSheet.create({backdrop:{..._reactNative.StyleSheet.absoluteFill},content:{flex:1}});var _default=exports.default=Drawer;

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

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

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

@@ -1,236 +1 @@
-"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
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.EmptyState=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_usePressAnimation=require("../../hooks/usePressAnimation.js"),_index=require("../../theme/index.js"),_corners=require("../../utils/corners.js"),_hapticUtils=require("../../utils/hapticUtils.js"),_SquircleFill=require("../SquircleFill/SquircleFill.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var i=new WeakMap,r=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var n,o,s={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return s;if(n=t?r:i){if(n.has(e))return n.get(e);n.set(e,s)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((o=(n=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(o.get||o.set)?n(s,t,o):s[t]=e[t]);return s})(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"}},sizeFor=(e,t)=>{const i={...SIZE_FALLBACK[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]}},ActionButton=({action:e,variant:t})=>{const i=(0,_index.useTheme)(),{scale:r,pressIn:n,pressOut:o}=(0,_usePressAnimation.usePressAnimation)({enabled:!0}),s=(0,_react.useMemo)(()=>buildActionStyles(i),[i]),a="primary"===t,l=(0,_SquircleFill.useSquircle)(!0,i.radius.md),fillFor=e=>a?i.colors.primary:e?i.colors.surface.pressed:"transparent";return(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:{transform:[{scale:r}]},children:(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:()=>{(0,_hapticUtils.triggerHaptic)("selection"),e.onPress()},onPressIn:n,onPressOut:o,accessibilityRole:"button",accessibilityLabel:e.accessibilityLabel??e.label,accessibilityHint:e.accessibilityHint,testID:e.testID,onLayout:l.onLayout,android_ripple:{color:a?i.colors.primaryHover:i.colors.surface.pressed,borderless:!1},style:({pressed:e})=>[s.button,a?s.buttonPrimary:s.buttonSecondary,!e||a||l.active?null:s.buttonSecondaryPressed,l.active?s.buttonSquircleHost:null],children:({pressed:t})=>(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[l.active&&l.size?(0,_jsxRuntime.jsx)(_SquircleFill.SquircleFill,{width:l.size.width,height:l.size.height,radius:i.radius.md,fill:fillFor(t),stroke:a?void 0:i.colors.border.primary,strokeWidth:a?0:1,outset:a?0:1}):null,(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[s.buttonText,a?s.buttonTextPrimary:s.buttonTextSecondary],numberOfLines:1,children:e.label})]})})})},EmptyState=exports.EmptyState=(0,_react.forwardRef)((e,t)=>{const{icon:i,title:r,description:n,action:o,secondaryAction:s,size:a="md",fill:l=!1,style:c,testID:u}=e,d=(0,_index.useTheme)(),p=(0,_react.useMemo)(()=>sizeFor(d,a),[d,a]),m=(0,_react.useMemo)(()=>buildStyles(d),[d]);return(0,_jsxRuntime.jsxs)(_reactNative.View,{ref:t,accessibilityRole:"summary",testID:u,style:[m.root,{paddingVertical:p.paddingVertical},l?m.fill:null,c],children:[i?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[m.iconCircle,{width:p.iconSize,height:p.iconSize,borderRadius:p.iconSize/2,..._corners.smoothCorners}],children:i}):null,(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[m.title,{fontSize:p.titleSize,...(0,_index.fontFor)(d,"semibold")}],children:r}),n?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[m.description,{fontSize:p.descriptionSize}],children:n}):null,o||s?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:m.actions,children:[o?(0,_jsxRuntime.jsx)(ActionButton,{action:o,variant:"primary"}):null,s?(0,_jsxRuntime.jsx)(ActionButton,{action:s,variant:"secondary"}):null]}):null]})});EmptyState.displayName="EmptyState";const buildStyles=e=>_reactNative.StyleSheet.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=>_reactNative.StyleSheet.create({button:{paddingHorizontal:e.spacing.lg,paddingVertical:e.spacing.sm,minHeight:42,borderRadius:e.radius.md,..._corners.smoothCorners,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,...(0,_index.fontFor)(e,"semibold")},buttonTextPrimary:{color:e.colors.onPrimary},buttonTextSecondary:{color:e.colors.text.primary}});var _default=exports.default=EmptyState;