@xaui/native 0.0.23 → 0.0.24

package/dist/pager/index.d.ts

@@ -1,4 +1,93 @@
-export { Pager } from './pager';
-export { PagerItem } from './pager-item';
-export type { PagerProps, PagerItemProps, PagerIndicatorRenderState, } from './pager.type';
-//# sourceMappingURL=index.d.ts.map
+import React, { ReactNode } from 'react';
+import { ViewStyle } from 'react-native';
+
+type PagerIndicatorRenderState = {
+    index: number;
+    isActive: boolean;
+    total: number;
+};
+type PagerCustomAppearance = {
+    /**
+     * Custom styles for the outer wrapper.
+     */
+    container?: ViewStyle;
+    /**
+     * Custom styles for the internal scroll view.
+     */
+    scrollView?: ViewStyle;
+    /**
+     * Custom styles applied to each page wrapper.
+     */
+    page?: ViewStyle;
+    /**
+     * Custom styles for the indicator row.
+     */
+    indicatorContainer?: ViewStyle;
+    /**
+     * Custom styles for each indicator item.
+     */
+    indicator?: ViewStyle;
+    /**
+     * Custom styles for the active indicator item.
+     */
+    activeIndicator?: ViewStyle;
+};
+type PagerProps = {
+    /**
+     * Whether the pager should fill its parent and render indicators inside.
+     * @default false
+     */
+    isFullscreen?: boolean;
+    /**
+     * Alias of `isFullscreen`.
+     * @default false
+     */
+    isfullscreen?: boolean;
+    /**
+     * Controlled active page index.
+     */
+    page?: number;
+    /**
+     * Default active page index (uncontrolled mode).
+     * @default 0
+     */
+    defaultPage?: number;
+    /**
+     * Callback fired when active page changes.
+     */
+    onPageChange?: (page: number) => void;
+    /**
+     * Whether swipe gesture is enabled.
+     * @default true
+     */
+    swipeEnabled?: boolean;
+    /**
+     * Whether to render indicators.
+     * @default true
+     */
+    showIndicator?: boolean;
+    /**
+     * Optional custom indicator renderer.
+     */
+    renderIndicator?: (state: PagerIndicatorRenderState) => ReactNode;
+    /**
+     * Pager pages. Prefer using `PagerItem`.
+     */
+    children: ReactNode;
+    /**
+     * Appearance overrides.
+     */
+    customAppearance?: PagerCustomAppearance;
+};
+type PagerItemProps = {
+    /**
+     * Page content.
+     */
+    children?: ReactNode;
+};
+
+declare const Pager: React.FC<PagerProps>;
+
+declare const PagerItem: React.FC<PagerItemProps>;
+
+export { Pager, type PagerIndicatorRenderState, PagerItem, type PagerItemProps, type PagerProps };

package/dist/{components/progress/progress.type.d.mts → progress/index.d.cts}

@@ -1,6 +1,8 @@
-import { ThemeColor } from '../../types';
-export type ProgressVariant = 'linear' | 'circular';
-export type ProgressIndicatorProps = {
+import React from 'react';
+import { T as ThemeColor } from '../index-BOw6tbkc.cjs';
+
+type ProgressVariant = 'linear' | 'circular';
+type ProgressIndicatorProps = {
     /**
      * The variant of the progress indicator.
      * @default 'linear'
@@ -39,4 +41,7 @@ export type ProgressIndicatorProps = {
      */
     borderRadius?: number;
 };
-//# sourceMappingURL=progress.type.d.ts.map
+
+declare const Progress: React.FC<ProgressIndicatorProps>;
+
+export { Progress, type ProgressIndicatorProps };

package/dist/progress/index.d.ts

@@ -1,3 +1,47 @@
-export { Progress } from './progress';
-export type { ProgressIndicatorProps } from './progress.type';
-//# sourceMappingURL=index.d.ts.map
+import React from 'react';
+import { T as ThemeColor } from '../index-BOw6tbkc.js';
+
+type ProgressVariant = 'linear' | 'circular';
+type ProgressIndicatorProps = {
+    /**
+     * The variant of the progress indicator.
+     * @default 'linear'
+     */
+    variant?: ProgressVariant;
+    /**
+     * The size of the progress indicator (height for linear, diameter for circular).
+     * @default 4 for linear, 40 for circular
+     */
+    size?: number;
+    /**
+     * The theme color of the progress indicator.
+     * @default 'primary'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * The custom color of the progress indicator.
+     * Overrides themeColor.
+     */
+    color?: string;
+    /**
+     * The background color of the track.
+     */
+    backgroundColor?: string;
+    /**
+     * The current value of the progress bar (0 to 1).
+     */
+    value: number;
+    /**
+     * Whether to disable the animation.
+     * @default false
+     */
+    disableAnimation?: boolean;
+    /**
+     * The border radius of the indicator and track.
+     */
+    borderRadius?: number;
+};
+
+declare const Progress: React.FC<ProgressIndicatorProps>;
+
+export { Progress, type ProgressIndicatorProps };

package/dist/progress/index.js

@@ -1,7 +1,6 @@
-import "../chunk-DXXNBF5P.js";
 import {
   useXUITheme
-} from "../chunk-LTKYHG5V.js";
+} from "../chunk-GHCVNQET.js";
 
 // src/components/progress/progress.tsx
 import React3 from "react";

package/dist/radio/index.cjs

@@ -337,7 +337,11 @@ var Radio = ({
   const sizeStyles = useSizeStyles(resolvedSize, resolvedVariant);
   const radiusStyles = useRadiusStyles(resolvedRadius);
   const dotColors = useDotColors(resolvedThemeColor, resolvedVariant, isChecked);
-  const variantStyles = useVariantStyles(resolvedThemeColor, resolvedVariant, isChecked);
+  const variantStyles = useVariantStyles(
+    resolvedThemeColor,
+    resolvedVariant,
+    isChecked
+  );
   const containerStyles = useContainerStyles(resolvedLabelAlignment);
   (0, import_react8.useEffect)(() => {
     if (resolvedVariant !== "filled") return;

package/dist/{components/radio/radio.type.d.mts → radio/index.d.cts}

@@ -1,10 +1,11 @@
-import type { ReactNode } from 'react';
-import type { TextStyle, ViewStyle } from 'react-native';
-import type { Radius, Size, ThemeColor } from '../../types';
-export type RadioVariant = 'filled' | 'light';
-export type RadioLabelAlignment = 'left' | 'right' | 'justify-left' | 'justify-right';
-export type RadioOrientation = 'vertical' | 'horizontal';
-export type RadioProps = {
+import React, { ReactNode } from 'react';
+import { TextStyle, ViewStyle } from 'react-native';
+import { T as ThemeColor, S as Size, R as Radius } from '../index-BOw6tbkc.cjs';
+
+type RadioVariant = 'filled' | 'light';
+type RadioLabelAlignment = 'left' | 'right' | 'justify-left' | 'justify-right';
+type RadioOrientation = 'vertical' | 'horizontal';
+type RadioProps = {
     /**
      * The label to display alongside the radio.
      */
@@ -70,7 +71,7 @@ export type RadioProps = {
      */
     onValueChange?: (isChecked: boolean) => void;
 };
-export type RadioGroupProps = {
+type RadioGroupProps = {
     /**
      * Group options.
      */
@@ -136,4 +137,9 @@ export type RadioGroupProps = {
      */
     style?: ViewStyle;
 };
-//# sourceMappingURL=radio.type.d.ts.map
+
+declare const Radio: React.FC<RadioProps>;
+
+declare const RadioGroup: React.FC<RadioGroupProps>;
+
+export { Radio, RadioGroup, type RadioGroupProps, type RadioLabelAlignment, type RadioOrientation, type RadioProps, type RadioVariant };

package/dist/radio/index.d.ts

@@ -1,4 +1,145 @@
-export { Radio } from './radio';
-export { RadioGroup } from './radio-group';
-export type { RadioProps, RadioVariant, RadioLabelAlignment, RadioGroupProps, RadioOrientation, } from './radio.type';
-//# sourceMappingURL=index.d.ts.map
+import React, { ReactNode } from 'react';
+import { TextStyle, ViewStyle } from 'react-native';
+import { T as ThemeColor, S as Size, R as Radius } from '../index-BOw6tbkc.js';
+
+type RadioVariant = 'filled' | 'light';
+type RadioLabelAlignment = 'left' | 'right' | 'justify-left' | 'justify-right';
+type RadioOrientation = 'vertical' | 'horizontal';
+type RadioProps = {
+    /**
+     * The label to display alongside the radio.
+     */
+    label?: string;
+    /**
+     * Value associated to this option when used inside RadioGroup.
+     */
+    value?: string;
+    /**
+     * Alignment of the label relative to the radio.
+     * @default 'right'
+     */
+    labelAlignment?: RadioLabelAlignment;
+    /**
+     * The theme color of the radio.
+     * @default 'primary'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * The variant of the radio.
+     * @default 'filled'
+     */
+    variant?: RadioVariant;
+    /**
+     * The size of the radio.
+     * @default 'md'
+     */
+    size?: Size;
+    /**
+     * The border radius of the radio.
+     * @default 'full'
+     */
+    radius?: Radius;
+    /**
+     * Whether the radio should take full width.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Controlled checked state when used outside RadioGroup.
+     */
+    isChecked?: boolean;
+    /**
+     * Uncontrolled checked state when used outside RadioGroup.
+     * @default false
+     */
+    defaultChecked?: boolean;
+    /**
+     * Whether the radio is disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Custom style for label text.
+     */
+    labelStyle?: TextStyle;
+    /**
+     * Custom style for container.
+     */
+    style?: ViewStyle;
+    /**
+     * Callback fired when the radio checked state changes.
+     */
+    onValueChange?: (isChecked: boolean) => void;
+};
+type RadioGroupProps = {
+    /**
+     * Group options.
+     */
+    children: ReactNode;
+    /**
+     * Controlled selected value.
+     */
+    value?: string;
+    /**
+     * Uncontrolled default selected value.
+     */
+    defaultValue?: string;
+    /**
+     * Callback fired when selected value changes.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Whether all radios in group are disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Shared theme color for radios.
+     * @default 'primary'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * Shared variant for radios.
+     * @default 'filled'
+     */
+    variant?: RadioVariant;
+    /**
+     * Shared size for radios.
+     * @default 'md'
+     */
+    size?: Size;
+    /**
+     * Shared radius for radios.
+     * @default 'full'
+     */
+    radius?: Radius;
+    /**
+     * Shared label alignment for radios.
+     * @default 'right'
+     */
+    labelAlignment?: RadioLabelAlignment;
+    /**
+     * Shared full width behavior for radios.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Group orientation.
+     * @default 'vertical'
+     */
+    orientation?: RadioOrientation;
+    /**
+     * Space between options.
+     */
+    gap?: number;
+    /**
+     * Custom style for the group container.
+     */
+    style?: ViewStyle;
+};
+
+declare const Radio: React.FC<RadioProps>;
+
+declare const RadioGroup: React.FC<RadioGroupProps>;
+
+export { Radio, RadioGroup, type RadioGroupProps, type RadioLabelAlignment, type RadioOrientation, type RadioProps, type RadioVariant };

package/dist/radio/index.js

@@ -1,7 +1,6 @@
-import "../chunk-DXXNBF5P.js";
 import {
   useXUITheme
-} from "../chunk-LTKYHG5V.js";
+} from "../chunk-4KSZLONZ.js";
 
 // src/components/radio/radio.tsx
 import React2, { useContext, useEffect, useRef, useState } from "react";
@@ -266,7 +265,11 @@ var Radio = ({
   const sizeStyles = useSizeStyles(resolvedSize, resolvedVariant);
   const radiusStyles = useRadiusStyles(resolvedRadius);
   const dotColors = useDotColors(resolvedThemeColor, resolvedVariant, isChecked);
-  const variantStyles = useVariantStyles(resolvedThemeColor, resolvedVariant, isChecked);
+  const variantStyles = useVariantStyles(
+    resolvedThemeColor,
+    resolvedVariant,
+    isChecked
+  );
   const containerStyles = useContainerStyles(resolvedLabelAlignment);
   useEffect(() => {
     if (resolvedVariant !== "filled") return;

package/dist/segment-button/index.d.cts

@@ -0,0 +1,141 @@
+import React, { ReactNode } from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+import { T as ThemeColor, S as Size } from '../index-BOw6tbkc.cjs';
+
+type SegmentButtonVariant = 'outlined' | 'flat' | 'light' | 'faded';
+type ElevationLevel = 0 | 1 | 2 | 3 | 4;
+type SegmentButtonRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
+type SegmentButtonSelectionMode = 'single' | 'multiple';
+type SegmentButtonProps = {
+    /**
+     * SegmentButtonItem children
+     */
+    children: ReactNode;
+    /**
+     * The currently selected key(s) (controlled mode).
+     * Use a string for single-select, string array for multi-select.
+     */
+    selected?: string | string[];
+    /**
+     * Default selected key(s) for uncontrolled mode.
+     * Use a string for single-select, string array for multi-select.
+     */
+    defaultSelected?: string | string[];
+    /**
+     * Callback fired when selection changes.
+     * Returns a string for single-select mode, string array for multi-select.
+     */
+    onSelectionChange?: (selected: string | string[]) => void;
+    /**
+     * Selection mode: single or multiple
+     * @default 'single'
+     */
+    selectionMode?: SegmentButtonSelectionMode;
+    /**
+     * The theme color of the segment button
+     * @default 'primary'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * The variant of the segment button
+     * @default 'outlined'
+     */
+    variant?: SegmentButtonVariant;
+    /**
+     * The size of the segment button
+     * @default 'md'
+     */
+    size?: Size;
+    /**
+     * The border radius of the segment button
+     * @default 'full'
+     */
+    radius?: SegmentButtonRadius;
+    /**
+     * Whether the segment button should take the full width of its container
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Whether the entire segment button group is disabled
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether to show a checkmark icon on selected segments
+     * @default true
+     */
+    showCheckmark?: boolean;
+    /**
+     * Android elevation level from 0 to 4.
+     * Does not apply to `outlined` and `light` variants.
+     * @default 0
+     */
+    elevation?: ElevationLevel;
+    /**
+     * Custom styles for the outer container
+     */
+    customAppearance?: {
+        container?: ViewStyle;
+    };
+};
+
+declare const SegmentButton: React.FC<SegmentButtonProps>;
+
+type SegmentButtonItemCustomAppearance = {
+    /**
+     * Custom styles for the segment container
+     */
+    segment?: ViewStyle;
+    /**
+     * Custom styles for the selected segment
+     */
+    selectedSegment?: ViewStyle;
+    /**
+     * Custom styles for segment label text
+     */
+    text?: TextStyle;
+    /**
+     * Custom styles for selected segment label text
+     */
+    selectedText?: TextStyle;
+};
+type SegmentButtonItemProps = {
+    /**
+     * Unique key for the segment item
+     */
+    itemKey: string;
+    /**
+     * Label text for the segment
+     */
+    label: string;
+    /**
+     * Content to display at the start of the segment item
+     */
+    startContent?: ReactNode;
+    /**
+     * @deprecated Use `startContent` instead
+     */
+    icon?: ReactNode;
+    /**
+     * Content to display at the end of the segment item
+     */
+    endContent?: ReactNode;
+    /**
+     * Custom indicator shown when the segment item is selected
+     */
+    checkIndicator?: ReactNode;
+    /**
+     * Whether the segment item is disabled
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Custom appearance styles for this segment item
+     */
+    customAppearance?: SegmentButtonItemCustomAppearance;
+};
+
+declare const SegmentButtonItem: React.FC<SegmentButtonItemProps>;
+
+export { type ElevationLevel, SegmentButton, SegmentButtonItem, type SegmentButtonItemProps, type SegmentButtonProps, type SegmentButtonRadius, type SegmentButtonSelectionMode, type SegmentButtonVariant };

package/dist/segment-button/index.d.ts

@@ -1,5 +1,141 @@
-export { SegmentButton } from './segment-button';
-export { SegmentButtonItem } from './segment-button-item';
-export type { SegmentButtonProps, SegmentButtonVariant, SegmentButtonRadius, SegmentButtonSelectionMode, ElevationLevel, } from './segment-button.type';
-export type { SegmentButtonItemProps } from './segment-button-item.type';
-//# sourceMappingURL=index.d.ts.map
+import React, { ReactNode } from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+import { T as ThemeColor, S as Size } from '../index-BOw6tbkc.js';
+
+type SegmentButtonVariant = 'outlined' | 'flat' | 'light' | 'faded';
+type ElevationLevel = 0 | 1 | 2 | 3 | 4;
+type SegmentButtonRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
+type SegmentButtonSelectionMode = 'single' | 'multiple';
+type SegmentButtonProps = {
+    /**
+     * SegmentButtonItem children
+     */
+    children: ReactNode;
+    /**
+     * The currently selected key(s) (controlled mode).
+     * Use a string for single-select, string array for multi-select.
+     */
+    selected?: string | string[];
+    /**
+     * Default selected key(s) for uncontrolled mode.
+     * Use a string for single-select, string array for multi-select.
+     */
+    defaultSelected?: string | string[];
+    /**
+     * Callback fired when selection changes.
+     * Returns a string for single-select mode, string array for multi-select.
+     */
+    onSelectionChange?: (selected: string | string[]) => void;
+    /**
+     * Selection mode: single or multiple
+     * @default 'single'
+     */
+    selectionMode?: SegmentButtonSelectionMode;
+    /**
+     * The theme color of the segment button
+     * @default 'primary'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * The variant of the segment button
+     * @default 'outlined'
+     */
+    variant?: SegmentButtonVariant;
+    /**
+     * The size of the segment button
+     * @default 'md'
+     */
+    size?: Size;
+    /**
+     * The border radius of the segment button
+     * @default 'full'
+     */
+    radius?: SegmentButtonRadius;
+    /**
+     * Whether the segment button should take the full width of its container
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Whether the entire segment button group is disabled
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether to show a checkmark icon on selected segments
+     * @default true
+     */
+    showCheckmark?: boolean;
+    /**
+     * Android elevation level from 0 to 4.
+     * Does not apply to `outlined` and `light` variants.
+     * @default 0
+     */
+    elevation?: ElevationLevel;
+    /**
+     * Custom styles for the outer container
+     */
+    customAppearance?: {
+        container?: ViewStyle;
+    };
+};
+
+declare const SegmentButton: React.FC<SegmentButtonProps>;
+
+type SegmentButtonItemCustomAppearance = {
+    /**
+     * Custom styles for the segment container
+     */
+    segment?: ViewStyle;
+    /**
+     * Custom styles for the selected segment
+     */
+    selectedSegment?: ViewStyle;
+    /**
+     * Custom styles for segment label text
+     */
+    text?: TextStyle;
+    /**
+     * Custom styles for selected segment label text
+     */
+    selectedText?: TextStyle;
+};
+type SegmentButtonItemProps = {
+    /**
+     * Unique key for the segment item
+     */
+    itemKey: string;
+    /**
+     * Label text for the segment
+     */
+    label: string;
+    /**
+     * Content to display at the start of the segment item
+     */
+    startContent?: ReactNode;
+    /**
+     * @deprecated Use `startContent` instead
+     */
+    icon?: ReactNode;
+    /**
+     * Content to display at the end of the segment item
+     */
+    endContent?: ReactNode;
+    /**
+     * Custom indicator shown when the segment item is selected
+     */
+    checkIndicator?: ReactNode;
+    /**
+     * Whether the segment item is disabled
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Custom appearance styles for this segment item
+     */
+    customAppearance?: SegmentButtonItemCustomAppearance;
+};
+
+declare const SegmentButtonItem: React.FC<SegmentButtonItemProps>;
+
+export { type ElevationLevel, SegmentButton, SegmentButtonItem, type SegmentButtonItemProps, type SegmentButtonProps, type SegmentButtonRadius, type SegmentButtonSelectionMode, type SegmentButtonVariant };