jfs-components 0.0.42 → 0.0.43

package/lib/commonjs/components/Toast/Toast.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _useToast = require("./useToast");
+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 ANIMATION_DURATION = 250;
+function Toast({
+  id,
+  title,
+  timeout = 4000,
+  onClose,
+  modes = {},
+  placement = 'bottom',
+  style
+}) {
+  const timerRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (timeout <= 0) return;
+    timerRef.current = setTimeout(() => (0, _useToast.closeToast)(id), timeout);
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [id, timeout]);
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('toast/background', modes) || '#303338';
+  const foreground = (0, _figmaVariablesResolver.getVariableByName)('toast/foreground', modes) || '#ffffff';
+  const fontSize = (0, _figmaVariablesResolver.getVariableByName)('toast/fontSize', modes) || 14;
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('toast/fontFamily', modes) || undefined;
+  const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('toast/fontWeight', modes) || '500';
+  const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('toast/lineHeight', modes) || 18;
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('toast/radius', modes) || 14;
+  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('toast/padding/horizontal', modes) || 16;
+  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('toast/padding/vertical', modes) || 14;
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('toast/gap', modes) || 8;
+  const borderWidth = (0, _figmaVariablesResolver.getVariableByName)('toast/border/size', modes) || 1;
+  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('toast/border/color', modes) || 'rgba(255,255,255,0.1)';
+  const shadowBlurPrimary = (0, _figmaVariablesResolver.getVariableByName)('toast/shadow/primary/blur', modes) || 48;
+  const shadowOffsetYPrimary = (0, _figmaVariablesResolver.getVariableByName)('toast/shadow/primary/offsetY', modes) || 16;
+  const shadowColorPrimary = (0, _figmaVariablesResolver.getVariableByName)('toast/shadow/primary/color', modes) || 'rgba(13,13,15,0.16)';
+  const enterAnimation = placement === 'top' ? _reactNativeReanimated.SlideInUp.duration(ANIMATION_DURATION) : _reactNativeReanimated.SlideInDown.duration(ANIMATION_DURATION);
+  const containerStyle = {
+    backgroundColor,
+    borderRadius: radius,
+    paddingHorizontal,
+    paddingVertical,
+    gap,
+    borderWidth,
+    borderColor,
+    shadowColor: shadowColorPrimary,
+    shadowOffset: {
+      width: 0,
+      height: shadowOffsetYPrimary
+    },
+    shadowOpacity: 1,
+    shadowRadius: shadowBlurPrimary / 2,
+    elevation: 8
+  };
+  const textStyle = {
+    color: foreground,
+    fontSize,
+    fontFamily,
+    fontWeight: String(fontWeight),
+    lineHeight
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+    entering: enterAnimation,
+    exiting: _reactNativeReanimated.FadeOut.duration(ANIMATION_DURATION),
+    style: [styles.toast, containerStyle, style],
+    accessibilityRole: "alert",
+    accessibilityLiveRegion: "assertive",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: textStyle,
+      numberOfLines: 2,
+      children: title
+    })
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  toast: {
+    alignSelf: 'center',
+    maxWidth: '90%',
+    minWidth: 200,
+    overflow: 'hidden'
+  }
+});
+var _default = exports.default = Toast;

package/lib/commonjs/components/Toast/ToastProvider.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
+var _useToast = require("./useToast");
+var _Toast = _interopRequireDefault(require("./Toast"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+function ToastProvider({
+  children,
+  maxVisibleToasts = 3,
+  placement = 'bottom',
+  modes
+}) {
+  const {
+    toasts
+  } = (0, _useToast.useToast)();
+  const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
+  const visibleToasts = (0, _react.useMemo)(() => toasts.slice(-maxVisibleToasts), [toasts, maxVisibleToasts]);
+  const regionStyle = (0, _react.useMemo)(() => [styles.region, placement === 'top' ? {
+    top: insets.top + 8
+  } : {
+    bottom: insets.bottom + 8
+  }], [placement, insets.top, insets.bottom]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.container,
+    children: [children, visibleToasts.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: regionStyle,
+      pointerEvents: "box-none",
+      children: visibleToasts.map(entry => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toast.default, {
+        id: entry.id,
+        title: entry.title,
+        timeout: entry.timeout,
+        onClose: entry.onClose,
+        modes: entry.modes ?? modes,
+        placement: placement
+      }, entry.id))
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  region: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+    gap: 8,
+    zIndex: 9999,
+    pointerEvents: 'box-none'
+  }
+});
+var _default = exports.default = ToastProvider;

package/lib/commonjs/components/Toast/useToast.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.addToast = addToast;
+exports.closeAll = closeAll;
+exports.closeToast = closeToast;
+exports.useToast = useToast;
+var _react = require("react");
+let idCounter = 0;
+let toasts = [];
+const listeners = new Set();
+function emit() {
+  for (const listener of listeners) {
+    listener();
+  }
+}
+function getSnapshot() {
+  return toasts;
+}
+function subscribe(listener) {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+function addToast(options) {
+  const id = `toast-${++idCounter}`;
+  const entry = {
+    id,
+    title: options.title,
+    timeout: options.timeout ?? 4000,
+    onClose: options.onClose,
+    modes: options.modes
+  };
+  toasts = [...toasts, entry];
+  emit();
+  return id;
+}
+function closeToast(id) {
+  const entry = toasts.find(t => t.id === id);
+  toasts = toasts.filter(t => t.id !== id);
+  emit();
+  entry?.onClose?.();
+}
+function closeAll() {
+  const prev = toasts;
+  toasts = [];
+  emit();
+  prev.forEach(t => t.onClose?.());
+}
+function useToast() {
+  const queue = (0, _react.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  return {
+    toasts: queue,
+    addToast: (0, _react.useCallback)(addToast, []),
+    closeToast: (0, _react.useCallback)(closeToast, []),
+    closeAll: (0, _react.useCallback)(closeAll, [])
+  };
+}

package/lib/commonjs/components/index.js

@@ -279,6 +279,18 @@ Object.defineProperty(exports, "ThreadHero", {
     return _ThreadHero.default;
   }
 });
+Object.defineProperty(exports, "Toast", {
+  enumerable: true,
+  get: function () {
+    return _Toast.default;
+  }
+});
+Object.defineProperty(exports, "ToastProvider", {
+  enumerable: true,
+  get: function () {
+    return _ToastProvider.default;
+  }
+});
 Object.defineProperty(exports, "Tooltip", {
   enumerable: true,
   get: function () {
@@ -309,12 +321,36 @@ Object.defineProperty(exports, "VStack", {
     return _VStack.default;
   }
 });
+Object.defineProperty(exports, "addToast", {
+  enumerable: true,
+  get: function () {
+    return _useToast.addToast;
+  }
+});
+Object.defineProperty(exports, "closeAll", {
+  enumerable: true,
+  get: function () {
+    return _useToast.closeAll;
+  }
+});
+Object.defineProperty(exports, "closeToast", {
+  enumerable: true,
+  get: function () {
+    return _useToast.closeToast;
+  }
+});
 Object.defineProperty(exports, "useFormContext", {
   enumerable: true,
   get: function () {
     return _Form.useFormContext;
   }
 });
+Object.defineProperty(exports, "useToast", {
+  enumerable: true,
+  get: function () {
+    return _useToast.useToast;
+  }
+});
 var _ActionFooter = _interopRequireDefault(require("./ActionFooter/ActionFooter"));
 var _AppBar = _interopRequireDefault(require("./AppBar/AppBar"));
 var _Avatar = _interopRequireDefault(require("./Avatar/Avatar"));
@@ -366,5 +402,8 @@ var _InputSearch = _interopRequireDefault(require("./InputSearch/InputSearch"));
 var _SupportText = _interopRequireDefault(require("./SupportText/SupportText"));
 var _SupportTextIcon = _interopRequireDefault(require("./SupportText/SupportTextIcon"));
 var _RadioButton = _interopRequireDefault(require("./RadioButton/RadioButton"));
+var _Toast = _interopRequireDefault(require("./Toast/Toast"));
+var _ToastProvider = _interopRequireDefault(require("./Toast/ToastProvider"));
+var _useToast = require("./Toast/useToast");
 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); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }