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

package/dist/components/segment/index.js

@@ -0,0 +1,374 @@
+import {
+  useSlidingIndicator
+} from "../../chunk-CHFPFYNV.js";
+import {
+  useControllableState
+} from "../../chunk-F6W3JQ7K.js";
+import {
+  PressableFeedback
+} from "../../chunk-XZ42OWKC.js";
+import {
+  usePressState
+} from "../../chunk-423RQBOX.js";
+import {
+  childrenToString
+} from "../../chunk-WFZDAXDI.js";
+import {
+  createRecipe,
+  radiusAxis
+} from "../../chunk-DKVXTMIJ.js";
+import "../../chunk-3Q42X6EQ.js";
+import {
+  Slot,
+  createSlotContext
+} from "../../chunk-TTZOIXKE.js";
+import "../../chunk-36PRYGAM.js";
+import "../../chunk-EGLLDKN6.js";
+import {
+  useXAUITheme
+} from "../../chunk-Z6JBWRPL.js";
+import {
+  useStyleProps
+} from "../../chunk-M63GFNKV.js";
+
+// src/components/segment/segment.tsx
+import { forwardRef, useCallback, useMemo, useState } from "react";
+import { StyleSheet as StyleSheet2, View } from "react-native";
+import Animated from "react-native-reanimated";
+
+// src/components/segment/segment.context.ts
+var [SegmentProvider, useSegment] = createSlotContext("Segment");
+var [SegmentItemProvider, useSegmentItem] = createSlotContext("Segment.Item");
+
+// src/components/segment/segment.recipe.ts
+import { StyleSheet } from "react-native";
+var SLOTS = [
+  "root",
+  "indicator",
+  "item",
+  "separator",
+  "label",
+  "labelSelected"
+];
+var VARIANT_TOKENS = {
+  default: {
+    bg: "default",
+    bgSelected: "segment",
+    fgSelected: "segmentForeground"
+  }
+};
+var HAIRLINE = StyleSheet.hairlineWidth;
+var TRACK_INSET = 3;
+var SIZES = {
+  sm: { paddingHorizontal: 2.5, paddingVertical: 1, gap: 1, label: "sm" },
+  md: { paddingHorizontal: 3, paddingVertical: 1.5, gap: 1.5, label: "md" },
+  lg: { paddingHorizontal: 4, paddingVertical: 2, gap: 2, label: "lg" }
+};
+function sizeAxis(step) {
+  const { paddingHorizontal, paddingVertical, gap, label } = step;
+  return (theme) => ({
+    item: {
+      paddingHorizontal: theme.spacing(paddingHorizontal),
+      paddingVertical: theme.spacing(paddingVertical),
+      gap: theme.spacing(gap)
+    },
+    // Inset by the option's own vertical padding, so the rule spans exactly the label
+    // beside it. A hairline running the full height of the track reads as a column edge
+    // rather than as the seam between two options.
+    separator: {
+      top: theme.spacing(paddingVertical),
+      bottom: theme.spacing(paddingVertical)
+    },
+    label: {
+      fontSize: theme.fontSizes[label],
+      lineHeight: theme.lineHeights[label]
+    }
+  });
+}
+var segmentRecipe = createRecipe({
+  slots: SLOTS,
+  base: (theme) => ({
+    root: {
+      // Hugs its options rather than filling the row. A segment as wide as the screen with
+      // two options in it is a navigation bar pretending to be a filter.
+      alignSelf: "flex-start",
+      flexDirection: "row",
+      alignItems: "center",
+      padding: TRACK_INSET,
+      borderRadius: theme.radius["3xl"],
+      borderCurve: "continuous"
+    },
+    indicator: {
+      position: "absolute",
+      zIndex: 0,
+      top: TRACK_INSET,
+      bottom: TRACK_INSET,
+      borderRadius: theme.radius["3xl"],
+      borderCurve: "continuous",
+      ...theme.shadows.surface
+    },
+    item: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    // Pinned to the option's own leading edge, which is the boundary between it and the
+    // one before it: the track lays its options out with no gap, so the two edges coincide.
+    separator: {
+      position: "absolute",
+      start: 0,
+      width: HAIRLINE,
+      backgroundColor: theme.colors.separator
+    },
+    label: {
+      fontFamily: theme.fontFamilies.body,
+      fontWeight: theme.fontWeights.medium,
+      color: theme.colors.muted
+    }
+  }),
+  variantTokens: VARIANT_TOKENS,
+  paint: (_theme, colors) => ({
+    root: { backgroundColor: colors.bg },
+    indicator: { backgroundColor: colors.bgSelected },
+    // Read by the root and handed to the chosen option's label alone, which is why it is
+    // on a slot the recipe otherwise leaves to `muted`.
+    labelSelected: { color: colors.fgSelected }
+  }),
+  variants: {
+    size: {
+      sm: sizeAxis(SIZES.sm),
+      md: sizeAxis(SIZES.md),
+      lg: sizeAxis(SIZES.lg)
+    },
+    radius: radiusAxis("root", "indicator")
+  },
+  states: {
+    disabled: (theme) => ({ root: { opacity: theme.opacity.disabled } })
+  },
+  defaultVariants: { variant: "default", size: "md" }
+});
+
+// src/components/segment/segment.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var SegmentRoot = forwardRef(function Segment({
+  children,
+  size,
+  radius,
+  color,
+  value: controlledValue,
+  defaultValue,
+  onValueChange,
+  hasSeparator = false,
+  isDisabled = false,
+  asChild = false,
+  style,
+  ...props
+}, ref) {
+  const theme = useXAUITheme();
+  const [styleProps, rest] = useStyleProps(props);
+  const [rects, setRects] = useState({});
+  const [value, setValue] = useControllableState({
+    value: controlledValue,
+    defaultValue,
+    onChange: onValueChange
+  });
+  const selection = { size, radius };
+  const styles = segmentRecipe.resolve({
+    theme,
+    selection,
+    states: { disabled: isDisabled }
+  });
+  const tint = color ? segmentRecipe.tint({ theme, color, selection }) : void 0;
+  const select = useCallback((next) => setValue(next), [setValue]);
+  const setRect = useCallback((option, rect) => {
+    setRects((current) => {
+      const previous = current[option];
+      if (previous && previous.x === rect.x && previous.width === rect.width)
+        return current;
+      return { ...current, [option]: rect };
+    });
+  }, []);
+  const context = useMemo(() => {
+    const selected = StyleSheet2.flatten([
+      styles.labelSelected,
+      tint?.labelSelected
+    ]);
+    return {
+      itemStyle: styles.item,
+      separatorStyle: styles.separator,
+      labelStyle: styles.label,
+      labelSelectedStyle: { color: selected.color },
+      value,
+      hasSeparator,
+      isDisabled,
+      select,
+      rects,
+      setRect
+    };
+  }, [styles, tint, value, hasSeparator, isDisabled, select, rects, setRect]);
+  const travel = useSlidingIndicator(value === void 0 ? void 0 : rects[value]);
+  const rootStyle = [styles.root, tint?.root, styleProps, style];
+  const Node = asChild ? Slot : View;
+  return /* @__PURE__ */ jsx(SegmentProvider, { value: context, children: /* @__PURE__ */ jsxs(
+    Node,
+    {
+      ref,
+      accessibilityRole: "radiogroup",
+      ...rest,
+      style: rootStyle,
+      children: [
+        /* @__PURE__ */ jsx(
+          Animated.View,
+          {
+            style: [styles.indicator, tint?.indicator, travel],
+            pointerEvents: "none"
+          }
+        ),
+        children
+      ]
+    }
+  ) });
+});
+SegmentRoot.displayName = "XAUI.Segment.Root";
+
+// src/components/segment/segment-item.tsx
+import { forwardRef as forwardRef3, useCallback as useCallback2, useMemo as useMemo2 } from "react";
+import { View as View2 } from "react-native";
+
+// src/components/segment/segment-label.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { Text } from "react-native";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var SegmentLabel = forwardRef2(
+  function SegmentLabel2({ children, style, ...props }, ref) {
+    const { labelStyle, labelSelectedStyle } = useSegment();
+    const { isSelected } = useSegmentItem();
+    const [styleProps, rest] = useStyleProps(props);
+    return /* @__PURE__ */ jsx2(
+      Text,
+      {
+        ref,
+        ...rest,
+        style: [labelStyle, isSelected && labelSelectedStyle, styleProps, style],
+        children
+      }
+    );
+  }
+);
+SegmentLabel.displayName = "XAUI.Segment.Label";
+
+// src/components/segment/segment.utils.ts
+function hasLeadingSeparator(rects, value, selected) {
+  const self = rects[value];
+  if (self === void 0 || value === selected) return false;
+  let previous;
+  let previousX = -Infinity;
+  for (const [key, rect] of Object.entries(rects)) {
+    if (rect.x < self.x && rect.x > previousX) {
+      previous = key;
+      previousX = rect.x;
+    }
+  }
+  return previous !== void 0 && previous !== selected;
+}
+
+// src/components/segment/segment-item.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var SegmentItem = forwardRef3(function SegmentItem2({
+  value,
+  children,
+  isDisabled = false,
+  asChild = false,
+  accessibilityRole = "radio",
+  accessibilityState,
+  style,
+  onLayout,
+  onPress,
+  onPressIn,
+  onPressOut,
+  ...props
+}, ref) {
+  const {
+    itemStyle,
+    separatorStyle,
+    hasSeparator,
+    rects,
+    value: selected,
+    isDisabled: isRootDisabled,
+    select,
+    setRect
+  } = useSegment();
+  const [styleProps, rest] = useStyleProps(props);
+  const [isPressed, press] = usePressState({ onPressIn, onPressOut });
+  const isSelected = selected === value;
+  const disabled = isRootDisabled || isDisabled;
+  const measure = useCallback2(
+    (event) => {
+      onLayout?.(event);
+      const { x, width } = event.nativeEvent.layout;
+      setRect(value, { x, width });
+    },
+    [onLayout, setRect, value]
+  );
+  const handlePress = useCallback2(
+    (event) => {
+      onPress?.(event);
+      select(value);
+    },
+    [onPress, select, value]
+  );
+  const context = useMemo2(
+    () => ({ isSelected, isPressed, isDisabled: disabled }),
+    [isSelected, isPressed, disabled]
+  );
+  const text = typeof children === "function" ? null : childrenToString(children);
+  return /* @__PURE__ */ jsx3(SegmentItemProvider, { value: context, children: /* @__PURE__ */ jsxs2(
+    PressableFeedback,
+    {
+      ref,
+      isPressed,
+      isDisabled: disabled,
+      asChild,
+      accessibilityRole,
+      accessibilityState: {
+        disabled,
+        checked: isSelected,
+        ...accessibilityState
+      },
+      ...rest,
+      onLayout: measure,
+      style: [
+        itemStyle,
+        styleProps,
+        typeof style === "function" ? style({ pressed: isPressed }) : style
+      ],
+      onPress: handlePress,
+      onPressIn: press.onPressIn,
+      onPressOut: press.onPressOut,
+      children: [
+        hasSeparator && hasLeadingSeparator(rects, value, selected) ? /* @__PURE__ */ jsx3(View2, { style: separatorStyle }) : null,
+        typeof children === "function" ? children(context) : text !== null ? (
+          // R3 — a stringifiable option becomes its label, which is what makes the common
+          // case `<Segment.Item value="all">Tout</Segment.Item>`.
+          /* @__PURE__ */ jsx3(SegmentLabel, { children: text })
+        ) : children
+      ]
+    }
+  ) });
+});
+SegmentItem.displayName = "XAUI.Segment.Item";
+
+// src/components/segment/index.ts
+var Segment2 = Object.assign(SegmentRoot, {
+  Item: SegmentItem,
+  Label: SegmentLabel
+});
+export {
+  Segment2 as Segment,
+  SegmentItem,
+  SegmentLabel,
+  SegmentRoot,
+  segmentRecipe,
+  useSegment,
+  useSegmentItem
+};

package/dist/components/segment/segment-item.d.cts

@@ -0,0 +1,22 @@
+import { View } from 'react-native';
+/**
+ * One option.
+ *
+ * It publishes its own rectangle on every layout, and the layout event's `x` and `width`
+ * are the right ones — the option and the pill are laid out in the same parent, so the
+ * parent's coordinates are the ones that matter.
+ *
+ * It announces itself as a `radio` rather than as a `tab`: the segment holds a value, and
+ * `checked` is what a screen reader needs to hear. Overridable (R9), like every default.
+ */
+export declare const SegmentItem: import("react").ForwardRefExoticComponent<{
+    value: string;
+    children?: import("react").ReactNode | ((state: import("./segment.type").SegmentItemRenderState) => import("react").ReactNode);
+    isDisabled?: boolean;
+    asChild?: boolean;
+} & Omit<import("react-native").PressableProps, keyof {
+    value: string;
+    children?: import("react").ReactNode | ((state: import("./segment.type").SegmentItemRenderState) => import("react").ReactNode);
+    isDisabled?: boolean;
+    asChild?: boolean;
+}> & Omit<import("../..").ViewStyleProps, "value" | "pointerEvents" | "disabled" | "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" | "onHoverIn" | "onHoverOut" | "onPress" | "onPressIn" | "onPressOut" | "onLongPress" | "cancelable" | "delayHoverIn" | "delayHoverOut" | "delayLongPress" | "pressRetentionOffset" | "android_disableSound" | "android_ripple" | "testOnly_pressed" | "unstable_pressDelay" | "isDisabled" | "asChild"> & import("react").RefAttributes<View>>;

package/dist/components/segment/segment-item.d.ts

@@ -0,0 +1,22 @@
+import { View } from 'react-native';
+/**
+ * One option.
+ *
+ * It publishes its own rectangle on every layout, and the layout event's `x` and `width`
+ * are the right ones — the option and the pill are laid out in the same parent, so the
+ * parent's coordinates are the ones that matter.
+ *
+ * It announces itself as a `radio` rather than as a `tab`: the segment holds a value, and
+ * `checked` is what a screen reader needs to hear. Overridable (R9), like every default.
+ */
+export declare const SegmentItem: import("react").ForwardRefExoticComponent<{
+    value: string;
+    children?: import("react").ReactNode | ((state: import("./segment.type").SegmentItemRenderState) => import("react").ReactNode);
+    isDisabled?: boolean;
+    asChild?: boolean;
+} & Omit<import("react-native").PressableProps, keyof {
+    value: string;
+    children?: import("react").ReactNode | ((state: import("./segment.type").SegmentItemRenderState) => import("react").ReactNode);
+    isDisabled?: boolean;
+    asChild?: boolean;
+}> & Omit<import("../..").ViewStyleProps, "value" | "pointerEvents" | "disabled" | "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" | "onHoverIn" | "onHoverOut" | "onPress" | "onPressIn" | "onPressOut" | "onLongPress" | "cancelable" | "delayHoverIn" | "delayHoverOut" | "delayLongPress" | "pressRetentionOffset" | "android_disableSound" | "android_ripple" | "testOnly_pressed" | "unstable_pressDelay" | "isDisabled" | "asChild"> & import("react").RefAttributes<View>>;

package/dist/components/segment/segment-label.d.cts

@@ -0,0 +1,10 @@
+import { Text } from 'react-native';
+/**
+ * The word on an option.
+ *
+ * The chosen one takes the colour that reads against the pill; the rest stay muted, which
+ * is the whole of what says which option is current once the pill has slid.
+ */
+export declare const SegmentLabel: import("react").ForwardRefExoticComponent<{
+    children?: import("react").ReactNode;
+} & Omit<import("react-native").TextProps, "children"> & Omit<import("../..").TextStyleProps, keyof import("react-native").TextProps> & import("react").RefAttributes<Text>>;

package/dist/components/segment/segment-label.d.ts

@@ -0,0 +1,10 @@
+import { Text } from 'react-native';
+/**
+ * The word on an option.
+ *
+ * The chosen one takes the colour that reads against the pill; the rest stay muted, which
+ * is the whole of what says which option is current once the pill has slid.
+ */
+export declare const SegmentLabel: import("react").ForwardRefExoticComponent<{
+    children?: import("react").ReactNode;
+} & Omit<import("react-native").TextProps, "children"> & Omit<import("../..").TextStyleProps, keyof import("react-native").TextProps> & import("react").RefAttributes<Text>>;

package/dist/components/segment/segment.context.d.cts

@@ -0,0 +1,8 @@
+import type { SegmentContextValue } from './segment.type';
+/**
+ * R10 — `useSegment` is exported so a third party can write its own option against the
+ * same resolved values the built-in ones read. Outside a `<Segment>` it throws by name.
+ */
+export declare const SegmentProvider: import("react").Provider<SegmentContextValue | null>, useSegment: () => SegmentContextValue;
+/** One option's own state, for the label inside it. */
+export declare const SegmentItemProvider: import("react").Provider<import("./segment.type").SegmentItemRenderState | null>, useSegmentItem: () => import("./segment.type").SegmentItemRenderState;

package/dist/components/segment/segment.context.d.ts

@@ -0,0 +1,8 @@
+import type { SegmentContextValue } from './segment.type';
+/**
+ * R10 — `useSegment` is exported so a third party can write its own option against the
+ * same resolved values the built-in ones read. Outside a `<Segment>` it throws by name.
+ */
+export declare const SegmentProvider: import("react").Provider<SegmentContextValue | null>, useSegment: () => SegmentContextValue;
+/** One option's own state, for the label inside it. */
+export declare const SegmentItemProvider: import("react").Provider<import("./segment.type").SegmentItemRenderState | null>, useSegmentItem: () => import("./segment.type").SegmentItemRenderState;

package/dist/components/segment/segment.d.cts

@@ -0,0 +1,45 @@
+import { View } from 'react-native';
+/**
+ * A filter: one of a few options, chosen in place.
+ *
+ * ```tsx
+ * <Segment value={view} onValueChange={setView}>
+ *   <Segment.Item value="dashboard">Dashboard</Segment.Item>
+ *   <Segment.Item value="analytics">Analytics</Segment.Item>
+ * </Segment>
+ * ```
+ *
+ * **It is not `Tabs`.** They wear the same clothes — a pill sliding under the chosen option
+ * inside a filled track, on the theme's own `segment` tokens — and they do different jobs.
+ * A tab bar **wraps content**: its triggers name panels that live under it, and it says
+ * `tablist` / `tab` out loud. A segment names nothing; it holds a value, the way a radio
+ * group does, and it says `radiogroup` / `radio`. Reach for tabs when the options are
+ * places to go and for a segment when they are a value something else reads.
+ *
+ * **The pill is not a slot.** `Tabs` makes you write its indicator because a tab bar can be
+ * `light` and have none; a segment without its pill is not a segment, so the root draws it.
+ * A `color` is how you move it.
+ */
+export declare const SegmentRoot: import("react").ForwardRefExoticComponent<{
+    children?: import("react").ReactNode;
+    size?: import("./segment.type").SegmentSize;
+    radius?: import("../..").RadiusKey;
+    color?: string;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    hasSeparator?: boolean;
+    isDisabled?: boolean;
+    asChild?: boolean;
+} & Omit<import("react-native").ViewProps, keyof {
+    children?: import("react").ReactNode;
+    size?: import("./segment.type").SegmentSize;
+    radius?: import("../..").RadiusKey;
+    color?: string;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    hasSeparator?: boolean;
+    isDisabled?: boolean;
+    asChild?: boolean;
+}> & Omit<import("../..").ViewStyleProps, "color" | "value" | "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" | "isDisabled" | "asChild" | "radius" | "size" | "defaultValue" | "onValueChange" | "hasSeparator"> & import("react").RefAttributes<View>>;

package/dist/components/segment/segment.d.ts

@@ -0,0 +1,45 @@
+import { View } from 'react-native';
+/**
+ * A filter: one of a few options, chosen in place.
+ *
+ * ```tsx
+ * <Segment value={view} onValueChange={setView}>
+ *   <Segment.Item value="dashboard">Dashboard</Segment.Item>
+ *   <Segment.Item value="analytics">Analytics</Segment.Item>
+ * </Segment>
+ * ```
+ *
+ * **It is not `Tabs`.** They wear the same clothes — a pill sliding under the chosen option
+ * inside a filled track, on the theme's own `segment` tokens — and they do different jobs.
+ * A tab bar **wraps content**: its triggers name panels that live under it, and it says
+ * `tablist` / `tab` out loud. A segment names nothing; it holds a value, the way a radio
+ * group does, and it says `radiogroup` / `radio`. Reach for tabs when the options are
+ * places to go and for a segment when they are a value something else reads.
+ *
+ * **The pill is not a slot.** `Tabs` makes you write its indicator because a tab bar can be
+ * `light` and have none; a segment without its pill is not a segment, so the root draws it.
+ * A `color` is how you move it.
+ */
+export declare const SegmentRoot: import("react").ForwardRefExoticComponent<{
+    children?: import("react").ReactNode;
+    size?: import("./segment.type").SegmentSize;
+    radius?: import("../..").RadiusKey;
+    color?: string;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    hasSeparator?: boolean;
+    isDisabled?: boolean;
+    asChild?: boolean;
+} & Omit<import("react-native").ViewProps, keyof {
+    children?: import("react").ReactNode;
+    size?: import("./segment.type").SegmentSize;
+    radius?: import("../..").RadiusKey;
+    color?: string;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    hasSeparator?: boolean;
+    isDisabled?: boolean;
+    asChild?: boolean;
+}> & Omit<import("../..").ViewStyleProps, "color" | "value" | "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" | "isDisabled" | "asChild" | "radius" | "size" | "defaultValue" | "onValueChange" | "hasSeparator"> & import("react").RefAttributes<View>>;

package/dist/components/segment/segment.recipe.d.cts

@@ -0,0 +1,12 @@
+import type { SlotStyles } from '../../system/recipe';
+import type { XAUITheme } from '../../theme/theme.type';
+import type { SegmentSlot } from './segment.type';
+export declare const segmentRecipe: import("../..").Recipe<"label" | "separator" | "root" | "indicator" | "item" | "labelSelected", "default", {
+    readonly size: {
+        readonly sm: (theme: XAUITheme) => SlotStyles<SegmentSlot>;
+        readonly md: (theme: XAUITheme) => SlotStyles<SegmentSlot>;
+        readonly lg: (theme: XAUITheme) => SlotStyles<SegmentSlot>;
+    };
+    readonly radius: Record<import("../..").RadiusKey, import("../..").StyleFn<"root" | "indicator">>;
+}>;
+export type { SegmentSlot };

package/dist/components/segment/segment.recipe.d.ts

@@ -0,0 +1,12 @@
+import type { SlotStyles } from '../../system/recipe';
+import type { XAUITheme } from '../../theme/theme.type';
+import type { SegmentSlot } from './segment.type';
+export declare const segmentRecipe: import("../..").Recipe<"label" | "separator" | "root" | "indicator" | "item" | "labelSelected", "default", {
+    readonly size: {
+        readonly sm: (theme: XAUITheme) => SlotStyles<SegmentSlot>;
+        readonly md: (theme: XAUITheme) => SlotStyles<SegmentSlot>;
+        readonly lg: (theme: XAUITheme) => SlotStyles<SegmentSlot>;
+    };
+    readonly radius: Record<import("../..").RadiusKey, import("../..").StyleFn<"root" | "indicator">>;
+}>;
+export type { SegmentSlot };

package/dist/components/segment/segment.type.d.cts

@@ -0,0 +1,66 @@
+import type { ReactNode } from 'react';
+import type { PressableProps, StyleProp, TextProps, TextStyle, ViewProps, ViewStyle } from 'react-native';
+import type { IndicatorRect } from '../../hooks/use-sliding-indicator';
+import type { TextStyleProps, ViewStyleProps } from '../../system/style-props';
+import type { RadiusKey, Size } from '../../theme/theme.type';
+export type SegmentSlot = 'root' | 'indicator' | 'item' | 'separator' | 'label' | 'labelSelected';
+export type SegmentSize = Exclude<Size, 'xs'>;
+/** One: a segment is a shape, and it is the only shape a segment has. */
+export type SegmentVariant = 'default';
+/** Where an option sits, so the pill knows where to slide. */
+export type SegmentRect = IndicatorRect;
+type SegmentOwnProps = {
+    children?: ReactNode;
+    size?: SegmentSize;
+    radius?: RadiusKey;
+    /** The tint (R7) — a raw value, never a token. */
+    color?: string;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /**
+     * Whether a hairline is drawn between the options the pill is nowhere near.
+     *
+     * Off by default: the pill already says which option is chosen, and the rules are what a
+     * segment adds when its options are a long enough list to need dividing. Both edges of
+     * the pill stay clear — see `hasLeadingSeparator`.
+     */
+    hasSeparator?: boolean;
+    isDisabled?: boolean;
+    asChild?: boolean;
+};
+export type SegmentProps = SegmentOwnProps & Omit<ViewProps, keyof SegmentOwnProps> & Omit<ViewStyleProps, keyof SegmentOwnProps | keyof ViewProps>;
+/** What an option's render function is handed, so it can paint its own chosen state. */
+export type SegmentItemRenderState = {
+    isSelected: boolean;
+    isPressed: boolean;
+    isDisabled: boolean;
+};
+type SegmentItemOwnProps = {
+    value: string;
+    children?: ReactNode | ((state: SegmentItemRenderState) => ReactNode);
+    isDisabled?: boolean;
+    asChild?: boolean;
+};
+export type SegmentItemProps = SegmentItemOwnProps & Omit<PressableProps, keyof SegmentItemOwnProps> & Omit<ViewStyleProps, keyof SegmentItemOwnProps | keyof PressableProps>;
+type SegmentLabelOwnProps = {
+    children?: ReactNode;
+};
+export type SegmentLabelProps = SegmentLabelOwnProps & Omit<TextProps, keyof SegmentLabelOwnProps> & Omit<TextStyleProps, keyof SegmentLabelOwnProps | keyof TextProps>;
+/** R5 — resolved style ids and the state the slots read. */
+export type SegmentContextValue = {
+    itemStyle: StyleProp<ViewStyle>;
+    separatorStyle: StyleProp<ViewStyle>;
+    labelStyle: StyleProp<TextStyle>;
+    labelSelectedStyle: StyleProp<TextStyle>;
+    value: string | undefined;
+    hasSeparator: boolean;
+    isDisabled: boolean;
+    select: (value: string) => void;
+    /** Every option's measured rectangle, keyed by value. The pill reads one. */
+    rects: Readonly<Record<string, SegmentRect>>;
+    setRect: (value: string, rect: SegmentRect) => void;
+};
+/** One option's own state, for the label inside it. */
+export type SegmentItemContextValue = SegmentItemRenderState;
+export {};