@xaui/native 0.9.1-alpha.4 → 0.9.1-alpha.40

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" | "size" | "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" | "variant" | "radius" | "asChild" | "placement" | "isDot"> & 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" | "size" | "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" | "variant" | "radius" | "asChild" | "placement" | "isDot"> & 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,15 @@
+import {
+  Badge,
+  badgeRecipe,
+  placementInsets
+} from "../../chunk-H7DS4IO7.js";
+import "../../chunk-4GTAZM2C.js";
+import "../../chunk-A3EGFI6T.js";
+import "../../chunk-K72UDPVN.js";
+import "../../chunk-36PRYGAM.js";
+import "../../chunk-M63GFNKV.js";
+export {
+  Badge,
+  badgeRecipe,
+  placementInsets
+};

package/dist/components/button/index.cjs

@@ -0,0 +1,22 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+
+
+var _chunkR73XQK7Xcjs = require('../../chunk-R73XQK7X.cjs');
+require('../../chunk-XSQPVDFH.cjs');
+require('../../chunk-WFEMJCXO.cjs');
+require('../../chunk-4KFKWBN5.cjs');
+require('../../chunk-7EIHHOHP.cjs');
+require('../../chunk-3E7CDKFO.cjs');
+require('../../chunk-7DPL3ZDS.cjs');
+require('../../chunk-EJQCQPET.cjs');
+require('../../chunk-FNEUOBCV.cjs');
+require('../../chunk-57SJ4LJF.cjs');
+require('../../chunk-7GHM4GKL.cjs');
+require('../../chunk-H4E4HDEP.cjs');
+require('../../chunk-TK44VBIE.cjs');
+
+
+
+
+exports.Button = _chunkR73XQK7Xcjs.Button; exports.buttonRecipe = _chunkR73XQK7Xcjs.buttonRecipe; exports.useButton = _chunkR73XQK7Xcjs.useButton;