@xaui/native 0.9.1-alpha.33 → 0.9.1-alpha.34

package/dist/chunk-DUQUCOUY.cjs

@@ -0,0 +1,198 @@
+"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 _chunk54FJOKANcjs = require('./chunk-54FJOKAN.cjs');
+
+
+
+var _chunkFNEUOBCVcjs = require('./chunk-FNEUOBCV.cjs');
+
+
+var _chunkI6ZB3FZIcjs = require('./chunk-I6ZB3FZI.cjs');
+
+
+var _chunk57SJ4LJFcjs = require('./chunk-57SJ4LJF.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 = _chunkFNEUOBCVcjs.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: _chunkFNEUOBCVcjs.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 = _chunk57SJ4LJFcjs.useXAUITheme.call(void 0, );
+  const [styleProps, rest] = _chunkI6ZB3FZIcjs.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 = _chunk54FJOKANcjs.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 ? _chunk54FJOKANcjs.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;

package/dist/chunk-LZK77LFX.js

@@ -0,0 +1,198 @@
+import {
+  Slot,
+  childrenToString
+} from "./chunk-YXPYOOHU.js";
+import {
+  createRecipe,
+  radiusAxis
+} from "./chunk-4GTAZM2C.js";
+import {
+  useStyleProps
+} from "./chunk-MEYCZS32.js";
+import {
+  useXAUITheme
+} from "./chunk-A3EGFI6T.js";
+
+// src/components/badge/badge.tsx
+import { forwardRef, useMemo } from "react";
+import { Text, View } from "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 = createRecipe({
+  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: radiusAxis("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
+import { jsx } from "react/jsx-runtime";
+var Badge = forwardRef(function Badge2({
+  children,
+  variant,
+  size,
+  radius,
+  color,
+  isDot = false,
+  placement,
+  asChild = false,
+  style,
+  ...props
+}, ref) {
+  const theme = useXAUITheme();
+  const [styleProps, rest] = useStyleProps(props);
+  const resolvedSize = 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 = useMemo(
+    () => placementInsets(placement, badgeOffset(theme, resolvedSize, isDot)),
+    [placement, theme, resolvedSize, isDot]
+  );
+  const rootStyle = [styles.root, tint?.root, insets, styleProps, style];
+  const text = childrenToString(children);
+  const label = text !== null ? /* @__PURE__ */ jsx(Text, { style: [styles.label, tint?.label], numberOfLines: 1, children: text }) : children;
+  const content = isDot ? null : label;
+  const Root = asChild ? Slot : View;
+  return /* @__PURE__ */ jsx(
+    Root,
+    {
+      ref,
+      ...rest,
+      style: rootStyle,
+      children: asChild ? children : content
+    }
+  );
+});
+Badge.displayName = "XAUI.Badge";
+
+export {
+  badgeRecipe,
+  placementInsets,
+  Badge
+};

package/dist/components/badge/index.cjs

@@ -0,0 +1,16 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+
+
+var _chunkDUQUCOUYcjs = require('../../chunk-DUQUCOUY.cjs');
+require('../../chunk-54FJOKAN.cjs');
+require('../../chunk-H4E4HDEP.cjs');
+require('../../chunk-FNEUOBCV.cjs');
+require('../../chunk-I6ZB3FZI.cjs');
+require('../../chunk-57SJ4LJF.cjs');
+require('../../chunk-MC7SY2QH.cjs');
+
+
+
+
+exports.Badge = _chunkDUQUCOUYcjs.Badge; exports.badgeRecipe = _chunkDUQUCOUYcjs.badgeRecipe; exports.placementInsets = _chunkDUQUCOUYcjs.placementInsets;

package/dist/components/badge/index.d.cts

@@ -0,0 +1,157 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as react_native from 'react-native';
+import { ViewProps, StyleProp, ViewStyle, View } from 'react-native';
+import { V as ViewStyleProps } from '../../style-props.type-CfnoGEP7.cjs';
+import { S as Size, R as RadiusKey, X as XAUITheme } from '../../theme.type-C2gNHpEx.cjs';
+import { R as Recipe, S as SlotStyles, a as StyleFn } from '../../create-recipe-dC7wMfnj.cjs';
+
+type BadgeSlot = 'root' | 'label';
+/**
+ * The full vocabulary (§1 bis), and the `Chip`'s eleven — a badge is what a chip is when
+ * it is too small to hold a word: something a component **reports** about itself. So the
+ * three status families are here for the same reason they are there, and a name means the
+ * same thing in both.
+ *
+ * `danger` is the default rather than `primary`, and it is the only component in the
+ * library whose default is not the first name in the ladder. A badge is overwhelmingly the
+ * count of something that wants attention — unread, failed, overdue — and a red one is what
+ * a caller writing `<Badge>3</Badge>` means. The accent count is a `variant` away.
+ */
+type BadgeVariant = 'primary' | 'secondary' | 'default' | 'tertiary' | 'ghost' | 'success' | 'success-soft' | 'warning' | 'warning-soft' | 'danger' | 'danger-soft';
+type BadgeSize = Size;
+/**
+ * Which corner it hangs off, when it hangs off something.
+ *
+ * Unset, the badge is in flow and the parent lays it out like any other node — which is the
+ * right thing for a badge at the end of a list row. Set, it is absolutely positioned in
+ * that corner of the **parent**, so the parent is whatever the badge decorates:
+ *
+ * ```tsx
+ * <View>
+ *   <Icon as={BellIcon} size={24} />
+ *   <Badge placement="top-end">3</Badge>
+ * </View>
+ * ```
+ *
+ * It is a prop rather than four style keys the caller writes because the offset is derived
+ * from the badge's own `size` — it is pulled out by half its height on each axis, so its
+ * centre sits on the corner it marks, and that arithmetic belongs with the measurements
+ * rather than at every call site. R13 is the other half: the keys are `start` and `end`, so
+ * a badge on the trailing corner mirrors in RTL instead of staying put.
+ */
+type BadgePlacement = 'top-end' | 'top-start' | 'bottom-end' | 'bottom-start';
+/**
+ * What the `Badge` itself understands. R14 — a name in here is the component's, so the
+ * style prop that shares it is not exposed: `size` is the badge's scale and never
+ * `ViewStyle`'s, and `color` is R7's tint.
+ */
+type BadgeOwnProps = {
+    variant?: BadgeVariant;
+    /** Height, horizontal padding and type. The width follows the count inside it. */
+    size?: BadgeSize;
+    /**
+     * Overrides the capsule. A badge is a pill at every size — that is what makes a
+     * two-digit count read as one object — so this is the prop for the square marker.
+     */
+    radius?: RadiusKey;
+    /**
+     * A raw tint (`'#7c3aed'`), never a token (R7). Where it lands follows the variant: the
+     * fill of a `primary`, the border and label of a `tertiary`, the label of a `ghost`.
+     */
+    color?: string;
+    /**
+     * The bare circle — no label, no padding, a fixed diameter. It is what a badge is when
+     * the fact that there is *something* is the whole message: a dot on a tab, an unsaved
+     * marker on a row.
+     *
+     * Children are not rendered while it is set: a dot is the absence of a label, so there
+     * is nothing for one to sit in.
+     */
+    isDot?: boolean;
+    placement?: BadgePlacement;
+    /** R12 — the child element becomes the badge and keeps this variant's style. */
+    asChild?: boolean;
+    style?: StyleProp<ViewStyle>;
+    children?: ReactNode;
+};
+type BadgeProps = Omit<ViewProps, 'style'> & BadgeOwnProps & Omit<ViewStyleProps, keyof BadgeOwnProps | keyof ViewProps>;
+
+/**
+ * A count, or the fact that there is one.
+ *
+ * ```tsx
+ * <Badge>3</Badge>
+ * <Badge variant="success-soft" size="sm">Payé</Badge>
+ * <Badge isDot variant="warning" />
+ *
+ * <View>
+ *   <Icon as={BellIcon} size={24} />
+ *   <Badge placement="top-end">12</Badge>
+ * </View>
+ * ```
+ *
+ * **One node and no slots**, per the plan. A badge is a mark: whatever is inside it is one
+ * line of two or three characters, and a slot would be a name for a `Text` this component
+ * can just as well insert itself (R3).
+ *
+ * **It is not a small `Chip`.** A chip holds a word and hugs it; a badge holds a count and
+ * is round unless the count is too wide to be. That is the `minWidth` equal to the height —
+ * one digit is a circle, two are a capsule — and it is why the label stays at 12pt through
+ * three of the four sizes, because a count that grows with its badge stops being a count.
+ *
+ * **`placement` makes the parent whatever the badge decorates.** Unset, the badge is in
+ * flow and laid out like any other node, which is what a badge at the end of a list row
+ * wants. Set, it is pulled half its own height out of that corner of the parent, so its
+ * centre lands on the corner it marks.
+ */
+declare const Badge: react.ForwardRefExoticComponent<Omit<react_native.ViewProps, "style"> & {
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    radius?: RadiusKey;
+    color?: string;
+    isDot?: boolean;
+    placement?: BadgePlacement;
+    asChild?: boolean;
+    style?: react_native.StyleProp<react_native.ViewStyle>;
+    children?: react.ReactNode;
+} & Omit<ViewStyleProps, "color" | "pointerEvents" | "style" | "children" | "hitSlop" | "id" | "needsOffscreenAlphaCompositing" | "onLayout" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "collapsableChildren" | "onBlur" | "onFocus" | "renderToHardwareTextureAndroid" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "asChild" | "radius" | "size" | "variant" | "isDot" | "placement"> & react.RefAttributes<View>>;
+
+declare const badgeRecipe: Recipe<"label" | "root", BadgeVariant, {
+    readonly size: {
+        readonly xs: (theme: XAUITheme) => SlotStyles<BadgeSlot>;
+        readonly sm: (theme: XAUITheme) => SlotStyles<BadgeSlot>;
+        readonly md: (theme: XAUITheme) => SlotStyles<BadgeSlot>;
+        readonly lg: (theme: XAUITheme) => SlotStyles<BadgeSlot>;
+    };
+    /**
+     * 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.
+     */
+    readonly dot: {
+        readonly xs: (theme: XAUITheme) => SlotStyles<BadgeSlot>;
+        readonly sm: (theme: XAUITheme) => SlotStyles<BadgeSlot>;
+        readonly md: (theme: XAUITheme) => SlotStyles<BadgeSlot>;
+        readonly lg: (theme: XAUITheme) => SlotStyles<BadgeSlot>;
+    };
+    readonly radius: Record<RadiusKey, StyleFn<BadgeSlot>>;
+}>;
+
+/**
+ * `placement` turned into the four keys React Native understands, given how far the badge
+ * has to be pulled out of the corner it marks.
+ *
+ * A pure function rather than a lookup in the recipe, because the insets must **not** exist
+ * when there is no placement: in flow the node is `position: 'relative'`, where an inset is
+ * a nudge rather than a placement, and a cached style carrying `top: -10` would shift every
+ * badge that is simply sitting at the end of a row.
+ *
+ * R13 — `start` and `end`, never `left` and `right`, so a badge on the trailing corner
+ * mirrors with the layout instead of staying put.
+ */
+declare function placementInsets(placement: BadgePlacement | undefined, offset: number): ViewStyle | undefined;
+
+export { Badge, type BadgePlacement, type BadgeProps, type BadgeSize, type BadgeSlot, type BadgeVariant, badgeRecipe, placementInsets };

package/dist/components/badge/index.d.ts

@@ -0,0 +1,157 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as react_native from 'react-native';
+import { ViewProps, StyleProp, ViewStyle, View } from 'react-native';
+import { V as ViewStyleProps } from '../../style-props.type-CfnoGEP7.js';
+import { S as Size, R as RadiusKey, X as XAUITheme } from '../../theme.type-C2gNHpEx.js';
+import { R as Recipe, S as SlotStyles, a as StyleFn } from '../../create-recipe-BdVd2ffi.js';
+
+type BadgeSlot = 'root' | 'label';
+/**
+ * The full vocabulary (§1 bis), and the `Chip`'s eleven — a badge is what a chip is when
+ * it is too small to hold a word: something a component **reports** about itself. So the
+ * three status families are here for the same reason they are there, and a name means the
+ * same thing in both.
+ *
+ * `danger` is the default rather than `primary`, and it is the only component in the
+ * library whose default is not the first name in the ladder. A badge is overwhelmingly the
+ * count of something that wants attention — unread, failed, overdue — and a red one is what
+ * a caller writing `<Badge>3</Badge>` means. The accent count is a `variant` away.
+ */
+type BadgeVariant = 'primary' | 'secondary' | 'default' | 'tertiary' | 'ghost' | 'success' | 'success-soft' | 'warning' | 'warning-soft' | 'danger' | 'danger-soft';
+type BadgeSize = Size;
+/**
+ * Which corner it hangs off, when it hangs off something.
+ *
+ * Unset, the badge is in flow and the parent lays it out like any other node — which is the
+ * right thing for a badge at the end of a list row. Set, it is absolutely positioned in
+ * that corner of the **parent**, so the parent is whatever the badge decorates:
+ *
+ * ```tsx
+ * <View>
+ *   <Icon as={BellIcon} size={24} />
+ *   <Badge placement="top-end">3</Badge>
+ * </View>
+ * ```
+ *
+ * It is a prop rather than four style keys the caller writes because the offset is derived
+ * from the badge's own `size` — it is pulled out by half its height on each axis, so its
+ * centre sits on the corner it marks, and that arithmetic belongs with the measurements
+ * rather than at every call site. R13 is the other half: the keys are `start` and `end`, so
+ * a badge on the trailing corner mirrors in RTL instead of staying put.
+ */
+type BadgePlacement = 'top-end' | 'top-start' | 'bottom-end' | 'bottom-start';
+/**
+ * What the `Badge` itself understands. R14 — a name in here is the component's, so the
+ * style prop that shares it is not exposed: `size` is the badge's scale and never
+ * `ViewStyle`'s, and `color` is R7's tint.
+ */
+type BadgeOwnProps = {
+    variant?: BadgeVariant;
+    /** Height, horizontal padding and type. The width follows the count inside it. */
+    size?: BadgeSize;
+    /**
+     * Overrides the capsule. A badge is a pill at every size — that is what makes a
+     * two-digit count read as one object — so this is the prop for the square marker.
+     */
+    radius?: RadiusKey;
+    /**
+     * A raw tint (`'#7c3aed'`), never a token (R7). Where it lands follows the variant: the
+     * fill of a `primary`, the border and label of a `tertiary`, the label of a `ghost`.
+     */
+    color?: string;
+    /**
+     * The bare circle — no label, no padding, a fixed diameter. It is what a badge is when
+     * the fact that there is *something* is the whole message: a dot on a tab, an unsaved
+     * marker on a row.
+     *
+     * Children are not rendered while it is set: a dot is the absence of a label, so there
+     * is nothing for one to sit in.
+     */
+    isDot?: boolean;
+    placement?: BadgePlacement;
+    /** R12 — the child element becomes the badge and keeps this variant's style. */
+    asChild?: boolean;
+    style?: StyleProp<ViewStyle>;
+    children?: ReactNode;
+};
+type BadgeProps = Omit<ViewProps, 'style'> & BadgeOwnProps & Omit<ViewStyleProps, keyof BadgeOwnProps | keyof ViewProps>;
+
+/**
+ * A count, or the fact that there is one.
+ *
+ * ```tsx
+ * <Badge>3</Badge>
+ * <Badge variant="success-soft" size="sm">Payé</Badge>
+ * <Badge isDot variant="warning" />
+ *
+ * <View>
+ *   <Icon as={BellIcon} size={24} />
+ *   <Badge placement="top-end">12</Badge>
+ * </View>
+ * ```
+ *
+ * **One node and no slots**, per the plan. A badge is a mark: whatever is inside it is one
+ * line of two or three characters, and a slot would be a name for a `Text` this component
+ * can just as well insert itself (R3).
+ *
+ * **It is not a small `Chip`.** A chip holds a word and hugs it; a badge holds a count and
+ * is round unless the count is too wide to be. That is the `minWidth` equal to the height —
+ * one digit is a circle, two are a capsule — and it is why the label stays at 12pt through
+ * three of the four sizes, because a count that grows with its badge stops being a count.
+ *
+ * **`placement` makes the parent whatever the badge decorates.** Unset, the badge is in
+ * flow and laid out like any other node, which is what a badge at the end of a list row
+ * wants. Set, it is pulled half its own height out of that corner of the parent, so its
+ * centre lands on the corner it marks.
+ */
+declare const Badge: react.ForwardRefExoticComponent<Omit<react_native.ViewProps, "style"> & {
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    radius?: RadiusKey;
+    color?: string;
+    isDot?: boolean;
+    placement?: BadgePlacement;
+    asChild?: boolean;
+    style?: react_native.StyleProp<react_native.ViewStyle>;
+    children?: react.ReactNode;
+} & Omit<ViewStyleProps, "color" | "pointerEvents" | "style" | "children" | "hitSlop" | "id" | "needsOffscreenAlphaCompositing" | "onLayout" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "collapsableChildren" | "onBlur" | "onFocus" | "renderToHardwareTextureAndroid" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "asChild" | "radius" | "size" | "variant" | "isDot" | "placement"> & react.RefAttributes<View>>;
+
+declare const badgeRecipe: Recipe<"label" | "root", BadgeVariant, {
+    readonly size: {
+        readonly xs: (theme: XAUITheme) => SlotStyles<BadgeSlot>;
+        readonly sm: (theme: XAUITheme) => SlotStyles<BadgeSlot>;
+        readonly md: (theme: XAUITheme) => SlotStyles<BadgeSlot>;
+        readonly lg: (theme: XAUITheme) => SlotStyles<BadgeSlot>;
+    };
+    /**
+     * 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.
+     */
+    readonly dot: {
+        readonly xs: (theme: XAUITheme) => SlotStyles<BadgeSlot>;
+        readonly sm: (theme: XAUITheme) => SlotStyles<BadgeSlot>;
+        readonly md: (theme: XAUITheme) => SlotStyles<BadgeSlot>;
+        readonly lg: (theme: XAUITheme) => SlotStyles<BadgeSlot>;
+    };
+    readonly radius: Record<RadiusKey, StyleFn<BadgeSlot>>;
+}>;
+
+/**
+ * `placement` turned into the four keys React Native understands, given how far the badge
+ * has to be pulled out of the corner it marks.
+ *
+ * A pure function rather than a lookup in the recipe, because the insets must **not** exist
+ * when there is no placement: in flow the node is `position: 'relative'`, where an inset is
+ * a nudge rather than a placement, and a cached style carrying `top: -10` would shift every
+ * badge that is simply sitting at the end of a row.
+ *
+ * R13 — `start` and `end`, never `left` and `right`, so a badge on the trailing corner
+ * mirrors with the layout instead of staying put.
+ */
+declare function placementInsets(placement: BadgePlacement | undefined, offset: number): ViewStyle | undefined;
+
+export { Badge, type BadgePlacement, type BadgeProps, type BadgeSize, type BadgeSlot, type BadgeVariant, badgeRecipe, placementInsets };

package/dist/components/badge/index.js

@@ -0,0 +1,16 @@
+import {
+  Badge,
+  badgeRecipe,
+  placementInsets
+} from "../../chunk-LZK77LFX.js";
+import "../../chunk-YXPYOOHU.js";
+import "../../chunk-36PRYGAM.js";
+import "../../chunk-4GTAZM2C.js";
+import "../../chunk-MEYCZS32.js";
+import "../../chunk-A3EGFI6T.js";
+import "../../chunk-GGW42MY4.js";
+export {
+  Badge,
+  badgeRecipe,
+  placementInsets
+};

package/dist/index.cjs

@@ -1,6 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
+var _chunkCM4LI5OHcjs = require('./chunk-CM4LI5OH.cjs');
+
+
+
 
 var _chunkAOEXU5UVcjs = require('./chunk-AOEXU5UV.cjs');
 
@@ -30,16 +34,17 @@ var _chunkOHEHPQLCcjs = require('./chunk-OHEHPQLC.cjs');
 
 
 
+var _chunkVSALV7VOcjs = require('./chunk-VSALV7VO.cjs');
 
 
 
 
 
 
-var _chunkTVCS5UOEcjs = require('./chunk-TVCS5UOE.cjs');
 
 
 
+var _chunkTVCS5UOEcjs = require('./chunk-TVCS5UOE.cjs');
 
 
 
@@ -47,37 +52,36 @@ var _chunkTVCS5UOEcjs = require('./chunk-TVCS5UOE.cjs');
 
 
 
-var _chunkPBR44KVVcjs = require('./chunk-PBR44KVV.cjs');
 
 
 
+var _chunkPBR44KVVcjs = require('./chunk-PBR44KVV.cjs');
 
 
 
 
-var _chunkMSMZBUZOcjs = require('./chunk-MSMZBUZO.cjs');
 
 
 
-var _chunkLT6XHFXJcjs = require('./chunk-LT6XHFXJ.cjs');
 
 
+var _chunkQ3D6KIVFcjs = require('./chunk-Q3D6KIVF.cjs');
 
-var _chunkXWMB66ZMcjs = require('./chunk-XWMB66ZM.cjs');
 
 
 
 
 
 
+var _chunkMSMZBUZOcjs = require('./chunk-MSMZBUZO.cjs');
 
 
-var _chunkOX2YNMNScjs = require('./chunk-OX2YNMNS.cjs');
 
+var _chunkLT6XHFXJcjs = require('./chunk-LT6XHFXJ.cjs');
 
 
-var _chunkCM4LI5OHcjs = require('./chunk-CM4LI5OH.cjs');
 
+var _chunkXWMB66ZMcjs = require('./chunk-XWMB66ZM.cjs');
 
 
 
@@ -86,7 +90,7 @@ var _chunkCM4LI5OHcjs = require('./chunk-CM4LI5OH.cjs');
 
 
 
-var _chunkQ3D6KIVFcjs = require('./chunk-Q3D6KIVF.cjs');
+var _chunkOX2YNMNScjs = require('./chunk-OX2YNMNS.cjs');
 
 
 
@@ -101,6 +105,11 @@ var _chunkI66VMLHEcjs = require('./chunk-I66VMLHE.cjs');
 
 
 
+var _chunkDUQUCOUYcjs = require('./chunk-DUQUCOUY.cjs');
+
+
+
+
 var _chunkDBXFFJTCcjs = require('./chunk-DBXFFJTC.cjs');
 
 
@@ -172,10 +181,6 @@ require('./chunk-EJQCQPET.cjs');
 
 
 
-var _chunkVSALV7VOcjs = require('./chunk-VSALV7VO.cjs');
-
-
-
 
 
 var _chunk54FJOKANcjs = require('./chunk-54FJOKAN.cjs');
@@ -333,4 +338,7 @@ require('./chunk-MC7SY2QH.cjs');
 
 
 
-exports.Alert = _chunkK7LLERKTcjs.Alert; exports.Avatar = _chunkI66VMLHEcjs.Avatar; exports.Button = _chunkDBXFFJTCcjs.Button; exports.CARD_BACKGROUND = _chunkUORTYL63cjs.CARD_BACKGROUND; exports.Card = _chunkUORTYL63cjs.Card; exports.Checkbox = _chunkCNNLMMFVcjs.Checkbox; exports.CheckboxIndicator = _chunkCNNLMMFVcjs.CheckboxIndicator; exports.CheckboxLabel = _chunkCNNLMMFVcjs.CheckboxLabel; exports.CheckboxRoot = _chunkCNNLMMFVcjs.CheckboxRoot; exports.Chip = _chunkQY4MN7X3cjs.Chip; exports.CloseButton = _chunkCYS6U374cjs.CloseButton; exports.Column = _chunk7CTIE42Jcjs.Column; exports.Divider = _chunkVSALV7VOcjs.Divider; exports.FEEDBACK_OVERLAY = _chunk6M7RUU7Vcjs.FEEDBACK_OVERLAY; exports.Grid = _chunk7CTIE42Jcjs.Grid; exports.HIGHLIGHT_DURATION = _chunk6M7RUU7Vcjs.HIGHLIGHT_DURATION; exports.HIGHLIGHT_OPACITY = _chunk6M7RUU7Vcjs.HIGHLIGHT_OPACITY; exports.Icon = _chunkPCWT2YBEcjs.Icon; exports.IconContext = _chunkPCWT2YBEcjs.IconContext; exports.Input = _chunkQ3D6KIVFcjs.Input; exports.InputDescription = _chunkQ3D6KIVFcjs.InputDescription; exports.InputError = _chunkQ3D6KIVFcjs.InputError; exports.InputField = _chunkQ3D6KIVFcjs.InputField; exports.InputGroup = _chunkTVCS5UOEcjs.InputGroup; exports.InputGroupField = _chunkTVCS5UOEcjs.InputGroupField; exports.InputGroupIcon = _chunkTVCS5UOEcjs.InputGroupIcon; exports.InputGroupPrefix = _chunkTVCS5UOEcjs.InputGroupPrefix; exports.InputGroupRoot = _chunkTVCS5UOEcjs.InputGroupRoot; exports.InputGroupSuffix = _chunkTVCS5UOEcjs.InputGroupSuffix; exports.InputLabel = _chunkQ3D6KIVFcjs.InputLabel; exports.InputOTP = _chunkPBR44KVVcjs.InputOTP; exports.InputRoot = _chunkQ3D6KIVFcjs.InputRoot; exports.OTP_ALPHANUMERIC = _chunkPBR44KVVcjs.OTP_ALPHANUMERIC; exports.OTP_DIGITS = _chunkPBR44KVVcjs.OTP_DIGITS; exports.OTP_LETTERS = _chunkPBR44KVVcjs.OTP_LETTERS; exports.PRESS_DURATION = _chunk6M7RUU7Vcjs.PRESS_DURATION; exports.PRESS_SCALE = _chunk6M7RUU7Vcjs.PRESS_SCALE; exports.Portal = _chunk4SLOOIE5cjs.Portal; exports.PortalContext = _chunk4SLOOIE5cjs.PortalContext; exports.PortalHost = _chunk4SLOOIE5cjs.PortalHost; exports.PressableFeedback = _chunk6M7RUU7Vcjs.PressableFeedback; exports.RIPPLE_CONFIRM_DURATION = _chunk6M7RUU7Vcjs.RIPPLE_CONFIRM_DURATION; exports.RIPPLE_EXPAND_DURATION = _chunk6M7RUU7Vcjs.RIPPLE_EXPAND_DURATION; exports.RIPPLE_FADE_IN = _chunk6M7RUU7Vcjs.RIPPLE_FADE_IN; exports.RIPPLE_FADE_OUT = _chunk6M7RUU7Vcjs.RIPPLE_FADE_OUT; exports.RIPPLE_FADE_OUT_DELAY = _chunk6M7RUU7Vcjs.RIPPLE_FADE_OUT_DELAY; exports.RIPPLE_OPACITY = _chunk6M7RUU7Vcjs.RIPPLE_OPACITY; exports.RIPPLE_START_SCALE = _chunk6M7RUU7Vcjs.RIPPLE_START_SCALE; exports.ROTATION_DURATION = _chunkK4TWKF5Ucjs.ROTATION_DURATION; exports.Radio = _chunkMSMZBUZOcjs.Radio; exports.RadioIndicator = _chunkMSMZBUZOcjs.RadioIndicator; exports.RadioLabel = _chunkMSMZBUZOcjs.RadioLabel; exports.RadioRoot = _chunkMSMZBUZOcjs.RadioRoot; exports.Row = _chunk7CTIE42Jcjs.Row; exports.SCALE_REFERENCE_WIDTH = _chunk6M7RUU7Vcjs.SCALE_REFERENCE_WIDTH; exports.SelectionFill = _chunkF6CQ6CBIcjs.SelectionFill; exports.Skeleton = _chunkLT6XHFXJcjs.Skeleton; exports.Slot = _chunk54FJOKANcjs.Slot; exports.Spinner = _chunkXWMB66ZMcjs.Spinner; exports.Stack = _chunk7CTIE42Jcjs.Stack; exports.Switch = _chunkOX2YNMNScjs.Switch; exports.SwitchLabel = _chunkOX2YNMNScjs.SwitchLabel; exports.SwitchRoot = _chunkOX2YNMNScjs.SwitchRoot; exports.SwitchThumb = _chunkOX2YNMNScjs.SwitchThumb; exports.SwitchTrack = _chunkOX2YNMNScjs.SwitchTrack; exports.TextArea = _chunkCM4LI5OHcjs.TextArea; exports.TextSpan = _chunkAOEXU5UVcjs.TextSpan; exports.ThemeContext = _chunk57SJ4LJFcjs.ThemeContext; exports.Typography = _chunkAOEXU5UVcjs.Typography; exports.XAUIProvider = _chunkOHEHPQLCcjs.XAUIProvider; exports.alertRecipe = _chunkK7LLERKTcjs.alertRecipe; exports.avatarRecipe = _chunkI66VMLHEcjs.avatarRecipe; exports.buildRadius = _chunkOHEHPQLCcjs.buildRadius; exports.buildShadows = _chunkOHEHPQLCcjs.buildShadows; exports.buildSlots = _chunkPBR44KVVcjs.buildSlots; exports.buttonRecipe = _chunkDBXFFJTCcjs.buttonRecipe; exports.cardRecipe = _chunkUORTYL63cjs.cardRecipe; exports.checkboxRecipe = _chunkCNNLMMFVcjs.checkboxRecipe; exports.childrenToString = _chunk54FJOKANcjs.childrenToString; exports.chipRecipe = _chunkQY4MN7X3cjs.chipRecipe; exports.closeButtonBase = _chunkCYS6U374cjs.closeButtonBase; exports.createRecipe = _chunkFNEUOBCVcjs.createRecipe; exports.createSlotContext = _chunk54FJOKANcjs.createSlotContext; exports.createTheme = _chunkOHEHPQLCcjs.createTheme; exports.decoratorPadding = _chunkTVCS5UOEcjs.decoratorPadding; exports.defaultTheme = _chunkOHEHPQLCcjs.defaultTheme; exports.deriveColors = _chunkOHEHPQLCcjs.deriveColors; exports.deriveTint = _chunk57SJ4LJFcjs.deriveTint; exports.dividerRecipe = _chunkVSALV7VOcjs.dividerRecipe; exports.extractPastedCode = _chunkPBR44KVVcjs.extractPastedCode; exports.inputOTPRecipe = _chunkPBR44KVVcjs.inputOTPRecipe; exports.inputRecipe = _chunkQ3D6KIVFcjs.inputRecipe; exports.markBackground = _chunkUORTYL63cjs.markBackground; exports.markOverlay = _chunk6M7RUU7Vcjs.markOverlay; exports.mergeProps = _chunk54FJOKANcjs.mergeProps; exports.mergeRefs = _chunkH4E4HDEPcjs.mergeRefs; exports.palette = _chunkOHEHPQLCcjs.palette; exports.pressScaleFor = _chunk6M7RUU7Vcjs.pressScaleFor; exports.primitives = _chunkOHEHPQLCcjs.primitives; exports.radioRecipe = _chunkMSMZBUZOcjs.radioRecipe; exports.radiusAxis = _chunkFNEUOBCVcjs.radiusAxis; exports.resolveAnimation = _chunk6M7RUU7Vcjs.resolveAnimation; exports.resolveSlotAnimation = _chunk6M7RUU7Vcjs.resolveSlotAnimation; exports.rippleRadiusFor = _chunk6M7RUU7Vcjs.rippleRadiusFor; exports.skeletonRecipe = _chunkLT6XHFXJcjs.skeletonRecipe; exports.sourceKeys = _chunkOHEHPQLCcjs.sourceKeys; exports.spinnerRecipe = _chunkXWMB66ZMcjs.spinnerRecipe; exports.switchRecipe = _chunkOX2YNMNScjs.switchRecipe; exports.tokens = _chunkOHEHPQLCcjs.tokens; exports.typographyRecipe = _chunkAOEXU5UVcjs.typographyRecipe; exports.useAlert = _chunkK7LLERKTcjs.useAlert; exports.useAvatar = _chunkI66VMLHEcjs.useAvatar; exports.useButton = _chunkDBXFFJTCcjs.useButton; exports.useCard = _chunkUORTYL63cjs.useCard; exports.useCheckbox = _chunkCNNLMMFVcjs.useCheckbox; exports.useChip = _chunkQY4MN7X3cjs.useChip; exports.useColorMode = _chunk57SJ4LJFcjs.useColorMode; exports.useControllableState = _chunk7EIHHOHPcjs.useControllableState; exports.useFeedback = _chunk6M7RUU7Vcjs.useFeedback; exports.useGrid = _chunk7CTIE42Jcjs.useGrid; exports.useIconContext = _chunkPCWT2YBEcjs.useIconContext; exports.useInput = _chunkQ3D6KIVFcjs.useInput; exports.useInputGroup = _chunkTVCS5UOEcjs.useInputGroup; exports.useInputOTP = _chunkPBR44KVVcjs.useInputOTP; exports.useInputOTPBox = _chunkPBR44KVVcjs.useInputOTPBox; exports.useMergedRef = _chunkK4TWKF5Ucjs.useMergedRef; exports.usePressState = _chunk7DPL3ZDScjs.usePressState; exports.usePrevious = _chunkK4TWKF5Ucjs.usePrevious; exports.useRadio = _chunkMSMZBUZOcjs.useRadio; exports.useRotation = _chunkK4TWKF5Ucjs.useRotation; exports.useStyleProps = _chunkI6ZB3FZIcjs.useStyleProps; exports.useSwitch = _chunkOX2YNMNScjs.useSwitch; exports.useTextArea = _chunkCM4LI5OHcjs.useTextArea; exports.useThemeColor = _chunk57SJ4LJFcjs.useThemeColor; exports.useXAUITheme = _chunk57SJ4LJFcjs.useXAUITheme;
+
+
+
+exports.Alert = _chunkK7LLERKTcjs.Alert; exports.Avatar = _chunkI66VMLHEcjs.Avatar; exports.Badge = _chunkDUQUCOUYcjs.Badge; exports.Button = _chunkDBXFFJTCcjs.Button; exports.CARD_BACKGROUND = _chunkUORTYL63cjs.CARD_BACKGROUND; exports.Card = _chunkUORTYL63cjs.Card; exports.Checkbox = _chunkCNNLMMFVcjs.Checkbox; exports.CheckboxIndicator = _chunkCNNLMMFVcjs.CheckboxIndicator; exports.CheckboxLabel = _chunkCNNLMMFVcjs.CheckboxLabel; exports.CheckboxRoot = _chunkCNNLMMFVcjs.CheckboxRoot; exports.Chip = _chunkQY4MN7X3cjs.Chip; exports.CloseButton = _chunkCYS6U374cjs.CloseButton; exports.Column = _chunk7CTIE42Jcjs.Column; exports.Divider = _chunkVSALV7VOcjs.Divider; exports.FEEDBACK_OVERLAY = _chunk6M7RUU7Vcjs.FEEDBACK_OVERLAY; exports.Grid = _chunk7CTIE42Jcjs.Grid; exports.HIGHLIGHT_DURATION = _chunk6M7RUU7Vcjs.HIGHLIGHT_DURATION; exports.HIGHLIGHT_OPACITY = _chunk6M7RUU7Vcjs.HIGHLIGHT_OPACITY; exports.Icon = _chunkPCWT2YBEcjs.Icon; exports.IconContext = _chunkPCWT2YBEcjs.IconContext; exports.Input = _chunkQ3D6KIVFcjs.Input; exports.InputDescription = _chunkQ3D6KIVFcjs.InputDescription; exports.InputError = _chunkQ3D6KIVFcjs.InputError; exports.InputField = _chunkQ3D6KIVFcjs.InputField; exports.InputGroup = _chunkTVCS5UOEcjs.InputGroup; exports.InputGroupField = _chunkTVCS5UOEcjs.InputGroupField; exports.InputGroupIcon = _chunkTVCS5UOEcjs.InputGroupIcon; exports.InputGroupPrefix = _chunkTVCS5UOEcjs.InputGroupPrefix; exports.InputGroupRoot = _chunkTVCS5UOEcjs.InputGroupRoot; exports.InputGroupSuffix = _chunkTVCS5UOEcjs.InputGroupSuffix; exports.InputLabel = _chunkQ3D6KIVFcjs.InputLabel; exports.InputOTP = _chunkPBR44KVVcjs.InputOTP; exports.InputRoot = _chunkQ3D6KIVFcjs.InputRoot; exports.OTP_ALPHANUMERIC = _chunkPBR44KVVcjs.OTP_ALPHANUMERIC; exports.OTP_DIGITS = _chunkPBR44KVVcjs.OTP_DIGITS; exports.OTP_LETTERS = _chunkPBR44KVVcjs.OTP_LETTERS; exports.PRESS_DURATION = _chunk6M7RUU7Vcjs.PRESS_DURATION; exports.PRESS_SCALE = _chunk6M7RUU7Vcjs.PRESS_SCALE; exports.Portal = _chunk4SLOOIE5cjs.Portal; exports.PortalContext = _chunk4SLOOIE5cjs.PortalContext; exports.PortalHost = _chunk4SLOOIE5cjs.PortalHost; exports.PressableFeedback = _chunk6M7RUU7Vcjs.PressableFeedback; exports.RIPPLE_CONFIRM_DURATION = _chunk6M7RUU7Vcjs.RIPPLE_CONFIRM_DURATION; exports.RIPPLE_EXPAND_DURATION = _chunk6M7RUU7Vcjs.RIPPLE_EXPAND_DURATION; exports.RIPPLE_FADE_IN = _chunk6M7RUU7Vcjs.RIPPLE_FADE_IN; exports.RIPPLE_FADE_OUT = _chunk6M7RUU7Vcjs.RIPPLE_FADE_OUT; exports.RIPPLE_FADE_OUT_DELAY = _chunk6M7RUU7Vcjs.RIPPLE_FADE_OUT_DELAY; exports.RIPPLE_OPACITY = _chunk6M7RUU7Vcjs.RIPPLE_OPACITY; exports.RIPPLE_START_SCALE = _chunk6M7RUU7Vcjs.RIPPLE_START_SCALE; exports.ROTATION_DURATION = _chunkK4TWKF5Ucjs.ROTATION_DURATION; exports.Radio = _chunkMSMZBUZOcjs.Radio; exports.RadioIndicator = _chunkMSMZBUZOcjs.RadioIndicator; exports.RadioLabel = _chunkMSMZBUZOcjs.RadioLabel; exports.RadioRoot = _chunkMSMZBUZOcjs.RadioRoot; exports.Row = _chunk7CTIE42Jcjs.Row; exports.SCALE_REFERENCE_WIDTH = _chunk6M7RUU7Vcjs.SCALE_REFERENCE_WIDTH; exports.SelectionFill = _chunkF6CQ6CBIcjs.SelectionFill; exports.Skeleton = _chunkLT6XHFXJcjs.Skeleton; exports.Slot = _chunk54FJOKANcjs.Slot; exports.Spinner = _chunkXWMB66ZMcjs.Spinner; exports.Stack = _chunk7CTIE42Jcjs.Stack; exports.Switch = _chunkOX2YNMNScjs.Switch; exports.SwitchLabel = _chunkOX2YNMNScjs.SwitchLabel; exports.SwitchRoot = _chunkOX2YNMNScjs.SwitchRoot; exports.SwitchThumb = _chunkOX2YNMNScjs.SwitchThumb; exports.SwitchTrack = _chunkOX2YNMNScjs.SwitchTrack; exports.TextArea = _chunkCM4LI5OHcjs.TextArea; exports.TextSpan = _chunkAOEXU5UVcjs.TextSpan; exports.ThemeContext = _chunk57SJ4LJFcjs.ThemeContext; exports.Typography = _chunkAOEXU5UVcjs.Typography; exports.XAUIProvider = _chunkOHEHPQLCcjs.XAUIProvider; exports.alertRecipe = _chunkK7LLERKTcjs.alertRecipe; exports.avatarRecipe = _chunkI66VMLHEcjs.avatarRecipe; exports.badgeRecipe = _chunkDUQUCOUYcjs.badgeRecipe; exports.buildRadius = _chunkOHEHPQLCcjs.buildRadius; exports.buildShadows = _chunkOHEHPQLCcjs.buildShadows; exports.buildSlots = _chunkPBR44KVVcjs.buildSlots; exports.buttonRecipe = _chunkDBXFFJTCcjs.buttonRecipe; exports.cardRecipe = _chunkUORTYL63cjs.cardRecipe; exports.checkboxRecipe = _chunkCNNLMMFVcjs.checkboxRecipe; exports.childrenToString = _chunk54FJOKANcjs.childrenToString; exports.chipRecipe = _chunkQY4MN7X3cjs.chipRecipe; exports.closeButtonBase = _chunkCYS6U374cjs.closeButtonBase; exports.createRecipe = _chunkFNEUOBCVcjs.createRecipe; exports.createSlotContext = _chunk54FJOKANcjs.createSlotContext; exports.createTheme = _chunkOHEHPQLCcjs.createTheme; exports.decoratorPadding = _chunkTVCS5UOEcjs.decoratorPadding; exports.defaultTheme = _chunkOHEHPQLCcjs.defaultTheme; exports.deriveColors = _chunkOHEHPQLCcjs.deriveColors; exports.deriveTint = _chunk57SJ4LJFcjs.deriveTint; exports.dividerRecipe = _chunkVSALV7VOcjs.dividerRecipe; exports.extractPastedCode = _chunkPBR44KVVcjs.extractPastedCode; exports.inputOTPRecipe = _chunkPBR44KVVcjs.inputOTPRecipe; exports.inputRecipe = _chunkQ3D6KIVFcjs.inputRecipe; exports.markBackground = _chunkUORTYL63cjs.markBackground; exports.markOverlay = _chunk6M7RUU7Vcjs.markOverlay; exports.mergeProps = _chunk54FJOKANcjs.mergeProps; exports.mergeRefs = _chunkH4E4HDEPcjs.mergeRefs; exports.palette = _chunkOHEHPQLCcjs.palette; exports.placementInsets = _chunkDUQUCOUYcjs.placementInsets; exports.pressScaleFor = _chunk6M7RUU7Vcjs.pressScaleFor; exports.primitives = _chunkOHEHPQLCcjs.primitives; exports.radioRecipe = _chunkMSMZBUZOcjs.radioRecipe; exports.radiusAxis = _chunkFNEUOBCVcjs.radiusAxis; exports.resolveAnimation = _chunk6M7RUU7Vcjs.resolveAnimation; exports.resolveSlotAnimation = _chunk6M7RUU7Vcjs.resolveSlotAnimation; exports.rippleRadiusFor = _chunk6M7RUU7Vcjs.rippleRadiusFor; exports.skeletonRecipe = _chunkLT6XHFXJcjs.skeletonRecipe; exports.sourceKeys = _chunkOHEHPQLCcjs.sourceKeys; exports.spinnerRecipe = _chunkXWMB66ZMcjs.spinnerRecipe; exports.switchRecipe = _chunkOX2YNMNScjs.switchRecipe; exports.tokens = _chunkOHEHPQLCcjs.tokens; exports.typographyRecipe = _chunkAOEXU5UVcjs.typographyRecipe; exports.useAlert = _chunkK7LLERKTcjs.useAlert; exports.useAvatar = _chunkI66VMLHEcjs.useAvatar; exports.useButton = _chunkDBXFFJTCcjs.useButton; exports.useCard = _chunkUORTYL63cjs.useCard; exports.useCheckbox = _chunkCNNLMMFVcjs.useCheckbox; exports.useChip = _chunkQY4MN7X3cjs.useChip; exports.useColorMode = _chunk57SJ4LJFcjs.useColorMode; exports.useControllableState = _chunk7EIHHOHPcjs.useControllableState; exports.useFeedback = _chunk6M7RUU7Vcjs.useFeedback; exports.useGrid = _chunk7CTIE42Jcjs.useGrid; exports.useIconContext = _chunkPCWT2YBEcjs.useIconContext; exports.useInput = _chunkQ3D6KIVFcjs.useInput; exports.useInputGroup = _chunkTVCS5UOEcjs.useInputGroup; exports.useInputOTP = _chunkPBR44KVVcjs.useInputOTP; exports.useInputOTPBox = _chunkPBR44KVVcjs.useInputOTPBox; exports.useMergedRef = _chunkK4TWKF5Ucjs.useMergedRef; exports.usePressState = _chunk7DPL3ZDScjs.usePressState; exports.usePrevious = _chunkK4TWKF5Ucjs.usePrevious; exports.useRadio = _chunkMSMZBUZOcjs.useRadio; exports.useRotation = _chunkK4TWKF5Ucjs.useRotation; exports.useStyleProps = _chunkI6ZB3FZIcjs.useStyleProps; exports.useSwitch = _chunkOX2YNMNScjs.useSwitch; exports.useTextArea = _chunkCM4LI5OHcjs.useTextArea; exports.useThemeColor = _chunk57SJ4LJFcjs.useThemeColor; exports.useXAUITheme = _chunk57SJ4LJFcjs.useXAUITheme;

package/dist/index.d.cts

@@ -1,5 +1,6 @@
 export { Alert, AlertCloseProps, AlertContentProps, AlertContextValue, AlertDescriptionProps, AlertIconProps, AlertProps, AlertSize, AlertSlot, AlertTitleProps, AlertVariant, alertRecipe, useAlert } from './components/alert/index.cjs';
 export { Avatar, AvatarContextValue, AvatarFallbackProps, AvatarImageProps, AvatarInitialsProps, AvatarProps, AvatarSize, AvatarSlot, AvatarVariant, avatarRecipe, useAvatar } from './components/avatar/index.cjs';
+export { Badge, BadgePlacement, BadgeProps, BadgeSize, BadgeSlot, BadgeVariant, badgeRecipe, placementInsets } from './components/badge/index.cjs';
 export { Button, ButtonContextValue, ButtonIconProps, ButtonLabelProps, ButtonProps, ButtonSize, ButtonSlot, ButtonSpinnerProps, ButtonVariant, buttonRecipe, useButton } from './components/button/index.cjs';
 export { CARD_BACKGROUND, Card, CardBackgroundProps, CardBodyProps, CardContextValue, CardDescriptionProps, CardFooterProps, CardHeaderProps, CardProps, CardSize, CardSlot, CardTitleProps, CardVariant, cardRecipe, markBackground, useCard } from './components/card/index.cjs';
 export { Checkbox, CheckboxContextValue, CheckboxIndicator, CheckboxIndicatorProps, CheckboxLabel, CheckboxLabelProps, CheckboxProps, CheckboxRoot, CheckboxSize, CheckboxSlot, CheckboxVariant, checkboxRecipe, useCheckbox } from './components/checkbox/index.cjs';

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export { Alert, AlertCloseProps, AlertContentProps, AlertContextValue, AlertDescriptionProps, AlertIconProps, AlertProps, AlertSize, AlertSlot, AlertTitleProps, AlertVariant, alertRecipe, useAlert } from './components/alert/index.js';
 export { Avatar, AvatarContextValue, AvatarFallbackProps, AvatarImageProps, AvatarInitialsProps, AvatarProps, AvatarSize, AvatarSlot, AvatarVariant, avatarRecipe, useAvatar } from './components/avatar/index.js';
+export { Badge, BadgePlacement, BadgeProps, BadgeSize, BadgeSlot, BadgeVariant, badgeRecipe, placementInsets } from './components/badge/index.js';
 export { Button, ButtonContextValue, ButtonIconProps, ButtonLabelProps, ButtonProps, ButtonSize, ButtonSlot, ButtonSpinnerProps, ButtonVariant, buttonRecipe, useButton } from './components/button/index.js';
 export { CARD_BACKGROUND, Card, CardBackgroundProps, CardBodyProps, CardContextValue, CardDescriptionProps, CardFooterProps, CardHeaderProps, CardProps, CardSize, CardSlot, CardTitleProps, CardVariant, cardRecipe, markBackground, useCard } from './components/card/index.js';
 export { Checkbox, CheckboxContextValue, CheckboxIndicator, CheckboxIndicatorProps, CheckboxLabel, CheckboxLabelProps, CheckboxProps, CheckboxRoot, CheckboxSize, CheckboxSlot, CheckboxVariant, checkboxRecipe, useCheckbox } from './components/checkbox/index.js';

package/dist/index.js

@@ -1,3 +1,7 @@
+import {
+  TextArea,
+  useTextArea
+} from "./chunk-HXL2QCMR.js";
 import {
   TextSpan,
   Typography,
@@ -27,6 +31,10 @@ import {
   sourceKeys,
   tokens
 } from "./chunk-TZG3DERP.js";
+import {
+  Divider,
+  dividerRecipe
+} from "./chunk-JCYWU5TO.js";
 import {
   InputGroup,
   InputGroupField,
@@ -48,6 +56,16 @@ import {
   useInputOTP,
   useInputOTPBox
 } from "./chunk-SLUJFE6R.js";
+import {
+  Input,
+  InputDescription,
+  InputError,
+  InputField,
+  InputLabel,
+  InputRoot,
+  inputRecipe,
+  useInput
+} from "./chunk-L55CDXNI.js";
 import {
   Radio,
   RadioIndicator,
@@ -73,20 +91,6 @@ import {
   switchRecipe,
   useSwitch
 } from "./chunk-BA2MPBCO.js";
-import {
-  TextArea,
-  useTextArea
-} from "./chunk-HXL2QCMR.js";
-import {
-  Input,
-  InputDescription,
-  InputError,
-  InputField,
-  InputLabel,
-  InputRoot,
-  inputRecipe,
-  useInput
-} from "./chunk-L55CDXNI.js";
 import {
   Alert,
   alertRecipe,
@@ -97,6 +101,11 @@ import {
   avatarRecipe,
   useAvatar
 } from "./chunk-ZA6RT3XQ.js";
+import {
+  Badge,
+  badgeRecipe,
+  placementInsets
+} from "./chunk-LZK77LFX.js";
 import {
   Button,
   buttonRecipe,
@@ -169,10 +178,6 @@ import {
   usePressState
 } from "./chunk-423RQBOX.js";
 import "./chunk-EGLLDKN6.js";
-import {
-  Divider,
-  dividerRecipe
-} from "./chunk-JCYWU5TO.js";
 import {
   Slot,
   childrenToString,
@@ -200,6 +205,7 @@ import "./chunk-GGW42MY4.js";
 export {
   Alert,
   Avatar,
+  Badge,
   Button,
   CARD_BACKGROUND,
   Card,
@@ -270,6 +276,7 @@ export {
   XAUIProvider,
   alertRecipe,
   avatarRecipe,
+  badgeRecipe,
   buildRadius,
   buildShadows,
   buildSlots,
@@ -295,6 +302,7 @@ export {
   mergeProps,
   mergeRefs,
   palette,
+  placementInsets,
   pressScaleFor,
   primitives,
   radioRecipe,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaui/native",
-  "version": "0.9.1-alpha.33",
+  "version": "0.9.1-alpha.34",
   "description": "Composition-first React Native UI components with native animations powered by Reanimated",
   "keywords": [
     "react-native",
@@ -47,6 +47,16 @@
         "default": "./dist/components/avatar/index.cjs"
       }
     },
+    "./badge": {
+      "import": {
+        "types": "./dist/components/badge/index.d.ts",
+        "default": "./dist/components/badge/index.js"
+      },
+      "require": {
+        "types": "./dist/components/badge/index.d.cts",
+        "default": "./dist/components/badge/index.cjs"
+      }
+    },
     "./button": {
       "import": {
         "types": "./dist/components/button/index.d.ts",