@xaui/native 0.9.1-alpha.9 → 0.9.1-alpha.91

package/dist/chunk-UFKSUELU.cjs

@@ -0,0 +1,453 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+var _chunkWDDXU3OHcjs = require('./chunk-WDDXU3OH.cjs');
+
+
+var _chunkOW4N2C3Mcjs = require('./chunk-OW4N2C3M.cjs');
+
+
+var _chunk7DPL3ZDScjs = require('./chunk-7DPL3ZDS.cjs');
+
+
+
+var _chunkSL3V7R2Ycjs = require('./chunk-SL3V7R2Y.cjs');
+
+
+var _chunkCDRGTUYFcjs = require('./chunk-CDRGTUYF.cjs');
+
+
+var _chunkEJQCQPETcjs = require('./chunk-EJQCQPET.cjs');
+
+
+var _chunkIIAQISBGcjs = require('./chunk-IIAQISBG.cjs');
+
+
+var _chunkTK44VBIEcjs = require('./chunk-TK44VBIE.cjs');
+
+// src/components/toast/toast-actions.tsx
+var _react = require('react');
+var _reactnative = require('react-native');
+
+// src/components/toast/toast.context.ts
+
+var [ToastProvider, useToastContext] = _chunkCDRGTUYFcjs.createSlotContext.call(void 0, "Toast");
+var ToastDismissContext = _react.createContext.call(void 0, null);
+var ToastQueueContext = _react.createContext.call(void 0, null);
+var NO_HOST = {
+  toast: () => "",
+  dismiss: () => {
+  },
+  dismissAll: () => {
+  }
+};
+function useToast() {
+  const queue = _react.useContext.call(void 0, ToastQueueContext);
+  if (queue === null) {
+    _chunkEJQCQPETcjs.warnDev.call(void 0, 
+      "useToast was called outside a <ToastHost>. Nothing will be shown. Mount one once, at the root of the app \u2014 it is where the stack renders."
+    );
+    return NO_HOST;
+  }
+  return queue;
+}
+
+// src/components/toast/toast-actions.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var ToastActions = _react.forwardRef.call(void 0, 
+  function ToastActions2({ children, style, ...props }, ref) {
+    const { actionsStyle } = useToastContext();
+    const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.View, { ref, ...rest, style: [actionsStyle, styleProps, style], children });
+  }
+);
+ToastActions.displayName = "XAUI.Toast.Actions";
+
+// src/components/toast/toast-close.tsx
+
+
+var ToastClose = _react.forwardRef.call(void 0, function ToastClose2({
+  children,
+  asChild = false,
+  accessibilityRole = "button",
+  style,
+  onPress,
+  onPressIn,
+  onPressOut,
+  ...props
+}, ref) {
+  const { dismiss } = useToastContext();
+  const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+  const [isPressed, press] = _chunk7DPL3ZDScjs.usePressState.call(void 0, { onPressIn, onPressOut });
+  const handlePress = _react.useCallback.call(void 0, 
+    (event) => {
+      _optionalChain([onPress, 'optionalCall', _ => _(event)]);
+      dismiss();
+    },
+    [dismiss, onPress]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkOW4N2C3Mcjs.PressableFeedback,
+    {
+      ref,
+      isPressed,
+      asChild,
+      accessibilityRole,
+      ...rest,
+      style: [
+        styleProps,
+        typeof style === "function" ? style({ pressed: isPressed }) : style
+      ],
+      onPress: handlePress,
+      onPressIn: press.onPressIn,
+      onPressOut: press.onPressOut,
+      children
+    }
+  );
+});
+ToastClose.displayName = "XAUI.Toast.Close";
+
+// src/components/toast/toast-description.tsx
+
+
+
+var ToastDescription = _react.forwardRef.call(void 0, 
+  function ToastDescription2({ children, style, ...props }, ref) {
+    const { descriptionStyle } = useToastContext();
+    const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.Text, { ref, ...rest, style: [descriptionStyle, styleProps, style], children });
+  }
+);
+ToastDescription.displayName = "XAUI.Toast.Description";
+
+// src/components/toast/toast-title.tsx
+
+
+
+var ToastTitle = _react.forwardRef.call(void 0, function ToastTitle2({ children, style, ...props }, ref) {
+  const { titleStyle } = useToastContext();
+  const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.Text, { ref, ...rest, style: [titleStyle, styleProps, style], children });
+});
+ToastTitle.displayName = "XAUI.Toast.Title";
+
+// src/components/toast/toast.tsx
+
+
+
+// src/components/toast/toast.recipe.ts
+var SLOTS = ["root", "title", "description", "actions"];
+var VARIANT_TOKENS = {
+  default: { fg: "overlayForeground" },
+  accent: { fg: "accentSoftForeground" },
+  success: { fg: "successSoftForeground" },
+  warning: { fg: "warningSoftForeground" },
+  danger: { fg: "dangerSoftForeground" }
+};
+var toastRecipe = _chunkSL3V7R2Ycjs.createRecipe.call(void 0, {
+  slots: SLOTS,
+  base: (theme) => ({
+    root: {
+      backgroundColor: theme.colors.overlay,
+      padding: theme.spacing(4),
+      // HeroUI's `--radius-3xl` on a base of 8 is 24 points; ours is 12, so the same 24
+      // is `2xl`.
+      borderRadius: theme.radius["2xl"],
+      borderCurve: "continuous",
+      gap: theme.spacing(1),
+      ...theme.shadows.overlay
+    },
+    title: {
+      fontFamily: theme.fontFamilies.body,
+      fontWeight: theme.fontWeights.medium,
+      fontSize: theme.fontSizes.md,
+      lineHeight: theme.lineHeights.md
+    },
+    description: {
+      fontFamily: theme.fontFamilies.body,
+      fontSize: theme.fontSizes.sm,
+      lineHeight: theme.lineHeights.sm,
+      color: theme.colors.muted
+    },
+    actions: {
+      flexDirection: "row",
+      justifyContent: "flex-end",
+      gap: theme.spacing(2),
+      paddingTop: theme.spacing(1)
+    }
+  }),
+  variantTokens: VARIANT_TOKENS,
+  paint: (_theme, colors) => ({ title: { color: colors.fg } }),
+  variants: { radius: _chunkSL3V7R2Ycjs.radiusAxis.call(void 0, "root") },
+  defaultVariants: { variant: "default" }
+});
+
+// src/components/toast/toast.tsx
+
+var Toast = _react.forwardRef.call(void 0, function Toast2({ children, variant, radius, accessibilityRole = "alert", style, ...props }, ref) {
+  const theme = _chunkIIAQISBGcjs.useXAUITheme.call(void 0, );
+  const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+  const dismiss = _nullishCoalesce(_react.useContext.call(void 0, ToastDismissContext), () => ( NOOP));
+  const styles = toastRecipe.resolve({ theme, selection: { variant, radius } });
+  const context = _react.useMemo.call(void 0, 
+    () => ({
+      rootStyle: styles.root,
+      titleStyle: styles.title,
+      descriptionStyle: styles.description,
+      actionsStyle: styles.actions,
+      dismiss
+    }),
+    [styles, dismiss]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ToastProvider, { value: context, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _reactnative.View,
+    {
+      ref,
+      accessibilityRole,
+      accessibilityLiveRegion: "polite",
+      ...rest,
+      style: [styles.root, styleProps, style],
+      children
+    }
+  ) });
+});
+var NOOP = () => {
+};
+Toast.displayName = "XAUI.Toast.Root";
+
+// src/components/toast/toast-host.tsx
+
+
+var _reactnativegesturehandler = require('react-native-gesture-handler');
+
+
+
+
+
+
+
+
+
+
+var _reactnativereanimated = require('react-native-reanimated'); var _reactnativereanimated2 = _interopRequireDefault(_reactnativereanimated);
+
+
+// src/components/toast/toast.animation.ts
+
+
+
+
+
+
+
+var ENTER_MS = 260;
+var EXIT_MS = 180;
+function toastEntering(placement) {
+  const slide = placement === "top" ? _reactnativereanimated.SlideInUp : _reactnativereanimated.SlideInDown;
+  return slide.duration(ENTER_MS).easing(_reactnativereanimated.Easing.out(_reactnativereanimated.Easing.cubic));
+}
+function toastExiting(placement) {
+  const slide = placement === "top" ? _reactnativereanimated.SlideOutUp : _reactnativereanimated.SlideOutDown;
+  return slide.duration(EXIT_MS).easing(_reactnativereanimated.Easing.in(_reactnativereanimated.Easing.cubic));
+}
+var STACK_TIMING = { duration: 300 };
+var SWIPE_DISTANCE = 50;
+var SWIPE_VELOCITY = 500;
+var DRAG_RUBBER = 40;
+var PRESS_SCALE = 0.995;
+var SWIPE_DECAY = 1.5;
+var SWIPE_HIDE_MS = 200;
+
+// src/components/toast/toast.utils.ts
+var PEEK = 10;
+var SHRINK = 0.03;
+function toastStackStyle(depth, placement, maxVisible) {
+  const sign = placement === "top" ? 1 : -1;
+  return {
+    // `|| 0` normalises the negative zero the front card of a bottom stack produces.
+    // It renders the same, but `Object.is(-0, 0)` is false, and a caller comparing two
+    // stack styles would see a difference that is not there.
+    translateY: PEEK * depth * sign || 0,
+    // Clamped, because a deep enough stack would otherwise turn the card inside out. It is
+    // invisible long before that, but a negative scale is a mirrored card, not a small one.
+    scale: Math.max(1 - SHRINK * depth, 0),
+    opacity: depth >= maxVisible ? 0 : 1
+  };
+}
+
+// src/components/toast/toast-host.tsx
+
+function ToastHost({
+  children,
+  placement = "bottom",
+  duration = 4e3,
+  maxVisible = 3,
+  isSwipeable = true
+}) {
+  const theme = _chunkIIAQISBGcjs.useXAUITheme.call(void 0, );
+  const [records, setRecords] = _react.useState.call(void 0, []);
+  const seed = _react.useId.call(void 0, );
+  const count = _react.useRef.call(void 0, 0);
+  const timers = _react.useRef.call(void 0, /* @__PURE__ */ new Map());
+  const dismiss = _react.useCallback.call(void 0, (id) => {
+    const timer = timers.current.get(id);
+    if (timer) {
+      clearTimeout(timer);
+      timers.current.delete(id);
+    }
+    setRecords((current) => current.filter((record) => record.id !== id));
+  }, []);
+  const dismissAll = _react.useCallback.call(void 0, () => {
+    for (const timer of timers.current.values()) clearTimeout(timer);
+    timers.current.clear();
+    setRecords([]);
+  }, []);
+  const toast = _react.useCallback.call(void 0, 
+    (options) => {
+      count.current += 1;
+      const id = `${seed}-${count.current}`;
+      const life = _nullishCoalesce(options.duration, () => ( duration));
+      setRecords((current) => [...current, { ...options, id }]);
+      if (life > 0) {
+        timers.current.set(
+          id,
+          setTimeout(() => dismiss(id), life)
+        );
+      }
+      return id;
+    },
+    [dismiss, duration, seed]
+  );
+  const queue = _react.useMemo.call(void 0, 
+    () => ({ toast, dismiss, dismissAll }),
+    [toast, dismiss, dismissAll]
+  );
+  const inset = theme.spacing(4);
+  const entry = {
+    ...sheet.entry,
+    start: inset,
+    end: inset,
+    ...placement === "top" ? { top: inset } : { bottom: inset }
+  };
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ToastQueueContext.Provider, { value: queue, children: [
+    children,
+    records.length > 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWDDXU3OHcjs.Portal, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.View, { pointerEvents: "box-none", style: sheet.stack, children: records.map((record, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      ToastStackEntry,
+      {
+        depth: records.length - 1 - index,
+        placement,
+        maxVisible,
+        isSwipeable,
+        onSwipe: () => dismiss(record.id),
+        style: entry,
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ToastDismissContext.Provider, { value: () => dismiss(record.id), children: record.render({ dismiss: () => dismiss(record.id) }) })
+      },
+      record.id
+    )) }) }) : null
+  ] });
+}
+function ToastStackEntry({
+  children,
+  depth,
+  placement,
+  maxVisible,
+  isSwipeable,
+  onSwipe,
+  style
+}) {
+  const { translateY, scale, opacity } = toastStackStyle(
+    depth,
+    placement,
+    maxVisible
+  );
+  const stackY = _reactnativereanimated.useDerivedValue.call(void 0, 
+    () => _reactnativereanimated.withTiming.call(void 0, translateY, STACK_TIMING),
+    [translateY]
+  );
+  const stackScale = _reactnativereanimated.useDerivedValue.call(void 0, () => _reactnativereanimated.withTiming.call(void 0, scale, STACK_TIMING), [scale]);
+  const fade = _reactnativereanimated.useDerivedValue.call(void 0, () => _reactnativereanimated.withTiming.call(void 0, opacity, STACK_TIMING), [opacity]);
+  const drag = _reactnativereanimated.useSharedValue.call(void 0, 0);
+  const press = _reactnativereanimated.useSharedValue.call(void 0, 1);
+  const screenHeight = _reactnative.Dimensions.get("window").height;
+  const away = placement === "top" ? -1 : 1;
+  const hideAfterThrow = _react.useCallback.call(void 0, 
+    (velocity) => {
+      setTimeout(onSwipe, Math.min(SWIPE_HIDE_MS, Math.abs(velocity)));
+    },
+    [onSwipe]
+  );
+  const pan = _reactnativegesturehandler.Gesture.Pan().enabled(isSwipeable && depth === 0).onBegin(() => {
+    press.set(PRESS_SCALE);
+  }).onChange((event) => {
+    const towardExit = event.translationY * away;
+    if (towardExit > 0) {
+      drag.set(event.translationY);
+      return;
+    }
+    const give = _reactnativereanimated.interpolate.call(void 0, 
+      Math.abs(event.translationY),
+      [0, screenHeight],
+      [0, DRAG_RUBBER],
+      _reactnativereanimated.Extrapolation.CLAMP
+    );
+    drag.set(-give * away);
+  }).onFinalize((event) => {
+    press.set(1);
+    const towardExit = event.translationY * away > 0;
+    const farEnough = Math.abs(event.translationY) > SWIPE_DISTANCE;
+    const fastEnough = Math.abs(event.velocityY) > SWIPE_VELOCITY;
+    if (!towardExit || !(farEnough || fastEnough)) {
+      drag.set(_reactnativereanimated.withSpring.call(void 0, 0));
+      return;
+    }
+    drag.set(
+      _reactnativereanimated.withDecay.call(void 0, {
+        velocity: event.velocityY * SWIPE_DECAY,
+        clamp: away === 1 ? [0, Number.POSITIVE_INFINITY] : [Number.NEGATIVE_INFINITY, 0]
+      })
+    );
+    _reactnativereanimated.runOnJS.call(void 0, hideAfterThrow)(event.velocityY);
+  });
+  const stacking = _reactnativereanimated.useAnimatedStyle.call(void 0, () => ({
+    opacity: fade.get(),
+    transform: [
+      { translateY: stackY.get() + drag.get() },
+      { scale: stackScale.get() * press.get() }
+    ]
+  }));
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnativegesturehandler.GestureDetector, { gesture: pan, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _reactnativereanimated2.default.View,
+    {
+      pointerEvents: opacity === 0 ? "none" : "auto",
+      entering: toastEntering(placement),
+      exiting: toastExiting(placement),
+      style: [style, stacking],
+      children
+    }
+  ) });
+}
+var sheet = _reactnative.StyleSheet.create({
+  stack: { position: "absolute", top: 0, bottom: 0, start: 0, end: 0 },
+  entry: { position: "absolute" }
+});
+ToastHost.displayName = "XAUI.ToastHost";
+
+// src/components/toast/index.ts
+var Toast3 = Object.assign(Toast, {
+  Title: ToastTitle,
+  Description: ToastDescription,
+  Actions: ToastActions,
+  Close: ToastClose
+});
+
+
+
+
+
+
+
+
+
+
+
+
+exports.useToastContext = useToastContext; exports.useToast = useToast; exports.ToastActions = ToastActions; exports.ToastClose = ToastClose; exports.ToastDescription = ToastDescription; exports.ToastTitle = ToastTitle; exports.toastRecipe = toastRecipe; exports.Toast = Toast; exports.ToastHost = ToastHost; exports.Toast2 = Toast3;

package/dist/chunk-UJMGXRGM.cjs

@@ -0,0 +1,200 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+var _chunkFHNIGHN5cjs = require('./chunk-FHNIGHN5.cjs');
+
+
+
+var _chunkSL3V7R2Ycjs = require('./chunk-SL3V7R2Y.cjs');
+
+
+var _chunkCDRGTUYFcjs = require('./chunk-CDRGTUYF.cjs');
+
+
+var _chunkIIAQISBGcjs = require('./chunk-IIAQISBG.cjs');
+
+
+var _chunkTK44VBIEcjs = require('./chunk-TK44VBIE.cjs');
+
+// src/components/badge/badge.tsx
+var _react = require('react');
+var _reactnative = require('react-native');
+
+// src/components/badge/badge.recipe.ts
+var SLOTS = ["root", "label"];
+var VARIANT_TOKENS = {
+  primary: { bg: "accent", fg: "accentForeground" },
+  secondary: { bg: "accentSoft", fg: "accentSoftForeground" },
+  default: { bg: "default", fg: "defaultForeground" },
+  tertiary: { border: "border", fg: "foreground" },
+  ghost: { fg: "foreground" },
+  success: { bg: "success", fg: "successForeground" },
+  "success-soft": { bg: "successSoft", fg: "successSoftForeground" },
+  warning: { bg: "warning", fg: "warningForeground" },
+  "warning-soft": { bg: "warningSoft", fg: "warningSoftForeground" },
+  danger: { bg: "danger", fg: "dangerForeground" },
+  "danger-soft": { bg: "dangerSoft", fg: "dangerSoftForeground" }
+};
+function sizeAxis(step) {
+  return (theme) => {
+    const height = theme.spacing(step.height);
+    return {
+      root: {
+        height,
+        minWidth: height,
+        paddingHorizontal: theme.spacing(step.padding)
+      },
+      label: { fontSize: theme.fontSizes[step.label] }
+    };
+  };
+}
+function dotAxis(diameter) {
+  return (theme) => {
+    const size = theme.spacing(diameter);
+    return {
+      root: { height: size, width: size, minWidth: size, paddingHorizontal: 0 }
+    };
+  };
+}
+var BADGE_DEFAULT_SIZE = "md";
+var SIZES = {
+  xs: { height: 4, padding: 1.25, label: "xs", dot: 1.5 },
+  sm: { height: 4.5, padding: 1.5, label: "xs", dot: 2 },
+  md: { height: 5, padding: 1.5, label: "xs", dot: 2.5 },
+  lg: { height: 6, padding: 2, label: "sm", dot: 3 }
+};
+function badgeOffset(theme, size, isDot) {
+  const step = SIZES[size];
+  return theme.spacing(isDot ? step.dot : step.height) / 2;
+}
+var badgeRecipe = _chunkSL3V7R2Ycjs.createRecipe.call(void 0, {
+  slots: SLOTS,
+  base: (theme) => ({
+    root: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      borderWidth: 0,
+      // The capsule at every size, which is what makes a two-digit count read as one
+      // object. `radius` is still there for the square marker.
+      borderRadius: theme.radius.full,
+      // Squircle corners for when `radius` overrides the pill. Free on Android.
+      borderCurve: "continuous"
+    },
+    label: {
+      fontFamily: theme.fontFamilies.body,
+      fontWeight: theme.fontWeights.semibold,
+      // Android reserves leading above and below the glyphs, which in a 16pt box is the
+      // difference between a centred digit and one sitting low.
+      includeFontPadding: false,
+      // No `lineHeight`: the scale's leading is taller than the box at every size here,
+      // and the root centres the label anyway.
+      textAlign: "center"
+    }
+  }),
+  variantTokens: VARIANT_TOKENS,
+  /**
+   * Where the variant's colours land, for every variant at once. The border width follows
+   * the *presence* of the border role, so `ghost` needs no rule of its own.
+   */
+  paint: (theme, colors) => ({
+    root: {
+      backgroundColor: colors.bg,
+      borderColor: colors.border,
+      borderWidth: colors.border ? theme.borderWidth.default : 0
+    },
+    label: { color: colors.fg }
+  }),
+  /** Declaration order is application order: `dot` overrides the box `size` set, and
+   *  `radius` overrides the capsule from `base`. */
+  variants: {
+    size: {
+      xs: sizeAxis(SIZES.xs),
+      sm: sizeAxis(SIZES.sm),
+      md: sizeAxis(SIZES.md),
+      lg: sizeAxis(SIZES.lg)
+    },
+    /**
+     * The same four keys as `size`, and the root selects it with the resolved size when
+     * `isDot` is set and with nothing when it is not — an axis left unselected contributes
+     * nothing, which is exactly "this badge has a label". A `{ true, false }` axis would
+     * have needed a `false` branch with nothing to say, and a `size × isDot` compound
+     * would have been sixteen entries for four measurements.
+     */
+    dot: {
+      xs: dotAxis(SIZES.xs.dot),
+      sm: dotAxis(SIZES.sm.dot),
+      md: dotAxis(SIZES.md.dot),
+      lg: dotAxis(SIZES.lg.dot)
+    },
+    radius: _chunkSL3V7R2Ycjs.radiusAxis.call(void 0, "root")
+  },
+  /**
+   * `danger`, where every other component in the library defaults to the first name in its
+   * ladder. A badge is overwhelmingly the count of something that wants attention — unread,
+   * failed, overdue — and a red one is what `<Badge>3</Badge>` means. The accent count is a
+   * `variant` away.
+   */
+  defaultVariants: { variant: "danger", size: BADGE_DEFAULT_SIZE }
+});
+
+// src/components/badge/badge.utils.ts
+function placementInsets(placement, offset) {
+  if (!placement) return void 0;
+  const vertical = placement.startsWith("top") ? { top: -offset } : { bottom: -offset };
+  const horizontal = placement.endsWith("start") ? { start: -offset } : { end: -offset };
+  return { position: "absolute", ...vertical, ...horizontal };
+}
+
+// src/components/badge/badge.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var Badge = _react.forwardRef.call(void 0, function Badge2({
+  children,
+  variant,
+  size,
+  radius,
+  color,
+  isDot = false,
+  placement,
+  asChild = false,
+  style,
+  ...props
+}, ref) {
+  const theme = _chunkIIAQISBGcjs.useXAUITheme.call(void 0, );
+  const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+  const resolvedSize = _nullishCoalesce(size, () => ( BADGE_DEFAULT_SIZE));
+  const selection = {
+    variant,
+    size,
+    radius,
+    // An axis left unselected contributes nothing, which is exactly "this badge has a
+    // label" — no `false` branch with nothing to say.
+    dot: isDot ? resolvedSize : void 0
+  };
+  const styles = badgeRecipe.resolve({ theme, selection });
+  const tint = color ? badgeRecipe.tint({ theme, color, selection }) : void 0;
+  const insets = _react.useMemo.call(void 0, 
+    () => placementInsets(placement, badgeOffset(theme, resolvedSize, isDot)),
+    [placement, theme, resolvedSize, isDot]
+  );
+  const rootStyle = [styles.root, _optionalChain([tint, 'optionalAccess', _ => _.root]), insets, styleProps, style];
+  const text = _chunkFHNIGHN5cjs.childrenToString.call(void 0, children);
+  const label = text !== null ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.Text, { style: [styles.label, _optionalChain([tint, 'optionalAccess', _2 => _2.label])], numberOfLines: 1, children: text }) : children;
+  const content = isDot ? null : label;
+  const Root = asChild ? _chunkCDRGTUYFcjs.Slot : _reactnative.View;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    Root,
+    {
+      ref,
+      ...rest,
+      style: rootStyle,
+      children: asChild ? children : content
+    }
+  );
+});
+Badge.displayName = "XAUI.Badge";
+
+
+
+
+
+exports.badgeRecipe = badgeRecipe; exports.placementInsets = placementInsets; exports.Badge = Badge;