@xaui/native 0.0.23 → 0.0.24

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

@@ -1,23 +1,24 @@
-import type { ReactNode } from 'react';
-import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
-import type { Size, ThemeColor } from '../../types';
-export type StepperDirection = 'horizontal' | 'vertical';
-export type StepperLineDisplayMode = 'progress' | 'all';
-export type StepperSize = Exclude<Size, 'xs'>;
-export type StepperItemIndicatorState = {
+import React, { ReactNode } from 'react';
+import { StyleProp, ViewStyle, TextStyle } from 'react-native';
+import { T as ThemeColor, S as Size } from '../index-BOw6tbkc.cjs';
+
+type StepperDirection = 'horizontal' | 'vertical';
+type StepperLineDisplayMode = 'progress' | 'all';
+type StepperSize = Exclude<Size, 'xs'>;
+type StepperItemIndicatorState = {
     index: number;
     isActive: boolean;
     isCompleted: boolean;
     isLocked: boolean;
     isDisabled: boolean;
 };
-export type StepperCustomAppearance = {
+type StepperCustomAppearance = {
     container?: StyleProp<ViewStyle>;
     itemContainer?: StyleProp<ViewStyle>;
     line?: StyleProp<ViewStyle>;
     activeLine?: StyleProp<ViewStyle>;
 };
-export type StepperItemCustomAppearance = {
+type StepperItemCustomAppearance = {
     container?: StyleProp<ViewStyle>;
     indicator?: StyleProp<ViewStyle>;
     activeIndicator?: StyleProp<ViewStyle>;
@@ -26,7 +27,7 @@ export type StepperItemCustomAppearance = {
     title?: StyleProp<TextStyle>;
     description?: StyleProp<TextStyle>;
 };
-export type StepperProps = {
+type StepperProps = {
     /**
      * StepperItem children.
      */
@@ -84,7 +85,7 @@ export type StepperProps = {
      */
     customAppearance?: StepperCustomAppearance;
 };
-export type StepperItemProps = {
+type StepperItemProps = {
     /**
      * Unique key for this step.
      */
@@ -128,4 +129,9 @@ export type StepperItemProps = {
      */
     customAppearance?: StepperItemCustomAppearance;
 };
-//# sourceMappingURL=stepper.type.d.ts.map
+
+declare const Stepper: React.FC<StepperProps>;
+
+declare const StepperItem: React.FC<StepperItemProps>;
+
+export { Stepper, type StepperDirection, StepperItem, type StepperItemIndicatorState, type StepperItemProps, type StepperLineDisplayMode, type StepperProps, type StepperSize };

package/dist/stepper/index.d.ts

@@ -1,4 +1,137 @@
-export { Stepper } from './stepper';
-export { StepperItem } from './stepper-item';
-export type { StepperProps, StepperItemProps, StepperDirection, StepperLineDisplayMode, StepperSize, StepperItemIndicatorState, } from './stepper.type';
-//# sourceMappingURL=index.d.ts.map
+import React, { ReactNode } from 'react';
+import { StyleProp, ViewStyle, TextStyle } from 'react-native';
+import { T as ThemeColor, S as Size } from '../index-BOw6tbkc.js';
+
+type StepperDirection = 'horizontal' | 'vertical';
+type StepperLineDisplayMode = 'progress' | 'all';
+type StepperSize = Exclude<Size, 'xs'>;
+type StepperItemIndicatorState = {
+    index: number;
+    isActive: boolean;
+    isCompleted: boolean;
+    isLocked: boolean;
+    isDisabled: boolean;
+};
+type StepperCustomAppearance = {
+    container?: StyleProp<ViewStyle>;
+    itemContainer?: StyleProp<ViewStyle>;
+    line?: StyleProp<ViewStyle>;
+    activeLine?: StyleProp<ViewStyle>;
+};
+type StepperItemCustomAppearance = {
+    container?: StyleProp<ViewStyle>;
+    indicator?: StyleProp<ViewStyle>;
+    activeIndicator?: StyleProp<ViewStyle>;
+    completedIndicator?: StyleProp<ViewStyle>;
+    lockedIndicator?: StyleProp<ViewStyle>;
+    title?: StyleProp<TextStyle>;
+    description?: StyleProp<TextStyle>;
+};
+type StepperProps = {
+    /**
+     * StepperItem children.
+     */
+    children: ReactNode;
+    /**
+     * Direction of the stepper layout.
+     * @default 'horizontal'
+     */
+    direction?: StepperDirection;
+    /**
+     * Whether connector lines between steps are shown.
+     * @default true
+     */
+    showLines?: boolean;
+    /**
+     * Controls connector line visibility.
+     * - `progress`: only progress to current step is shown.
+     * - `all`: all connectors are shown with progress highlight.
+     * @default 'progress'
+     */
+    lineDisplayMode?: StepperLineDisplayMode;
+    /**
+     * Controlled active step key.
+     */
+    activeKey?: string;
+    /**
+     * Uncontrolled default active step key.
+     */
+    defaultActiveKey?: string;
+    /**
+     * Callback fired when active step changes.
+     */
+    onStepChange?: (key: string) => void;
+    /**
+     * Shared theme color.
+     * @default 'primary'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * Shared stepper size.
+     * @default 'md'
+     */
+    size?: StepperSize;
+    /**
+     * Whether all steps are disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Stepper container style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Custom appearance styles.
+     */
+    customAppearance?: StepperCustomAppearance;
+};
+type StepperItemProps = {
+    /**
+     * Unique key for this step.
+     */
+    itemKey: string;
+    /**
+     * Main title/label.
+     */
+    title?: ReactNode;
+    /**
+     * Optional secondary description.
+     */
+    description?: ReactNode;
+    /**
+     * Custom indicator content or indicator render function.
+     */
+    indicator?: ReactNode | ((state: StepperItemIndicatorState) => ReactNode);
+    /**
+     * Locks this step from interaction.
+     * @default false
+     */
+    isLocked?: boolean;
+    /**
+     * Disables this step from interaction.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Additional content rendered below title/description.
+     */
+    children?: ReactNode;
+    /**
+     * Callback fired when this item is pressed.
+     */
+    onPress?: (itemKey: string) => void;
+    /**
+     * Custom style for this item.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Custom appearance styles.
+     */
+    customAppearance?: StepperItemCustomAppearance;
+};
+
+declare const Stepper: React.FC<StepperProps>;
+
+declare const StepperItem: React.FC<StepperItemProps>;
+
+export { Stepper, type StepperDirection, StepperItem, type StepperItemIndicatorState, type StepperItemProps, type StepperLineDisplayMode, type StepperProps, type StepperSize };

package/dist/stepper/index.js

@@ -1,7 +1,6 @@
-import "../chunk-DXXNBF5P.js";
 import {
   useXUITheme
-} from "../chunk-LTKYHG5V.js";
+} from "../chunk-4KSZLONZ.js";
 
 // src/components/stepper/stepper.tsx
 import React, { useMemo, useState } from "react";
@@ -319,7 +318,15 @@ var StepperItem = ({
       );
     }
     return String(indicatorState.index + 1);
-  }, [indicator, indicatorState, sizeStyles.indicatorSize, isLocked, isCompleted, itemKey, colors]);
+  }, [
+    indicator,
+    indicatorState,
+    sizeStyles.indicatorSize,
+    isLocked,
+    isCompleted,
+    itemKey,
+    colors
+  ]);
   useEffect(() => {
     Animated.timing(lineProgress, {
       toValue: lineTargetProgress,

package/dist/switch/index.d.cts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { TextStyle, ViewStyle } from 'react-native';
+import { T as ThemeColor } from '../index-BOw6tbkc.cjs';
+
+type SwitchVariant = 'inside' | 'overlap';
+type SwitchSize = 'sm' | 'md' | 'lg';
+type SwitchRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
+type SwitchLabelAlignment = 'left' | 'right' | 'justify-left' | 'justify-right';
+type SwitchEvents = {
+    onValueChange?: (isSelected: boolean) => void;
+};
+type SwitchProps = {
+    label?: string;
+    labelAlignment?: SwitchLabelAlignment;
+    themeColor?: ThemeColor;
+    variant?: SwitchVariant;
+    size?: SwitchSize;
+    radius?: SwitchRadius;
+    fullWidth?: boolean;
+    isSelected?: boolean;
+    isDisabled?: boolean;
+    labelStyle?: TextStyle;
+    style?: ViewStyle;
+} & SwitchEvents;
+
+declare const Switch: React.FC<SwitchProps>;
+
+export { Switch, type SwitchLabelAlignment, type SwitchProps, type SwitchRadius, type SwitchSize, type SwitchVariant };

package/dist/switch/index.d.ts

@@ -1,3 +1,28 @@
-export { Switch } from './switch';
-export type { SwitchProps, SwitchVariant, SwitchSize, SwitchRadius, SwitchLabelAlignment, } from './switch.type';
-//# sourceMappingURL=index.d.ts.map
+import React from 'react';
+import { TextStyle, ViewStyle } from 'react-native';
+import { T as ThemeColor } from '../index-BOw6tbkc.js';
+
+type SwitchVariant = 'inside' | 'overlap';
+type SwitchSize = 'sm' | 'md' | 'lg';
+type SwitchRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
+type SwitchLabelAlignment = 'left' | 'right' | 'justify-left' | 'justify-right';
+type SwitchEvents = {
+    onValueChange?: (isSelected: boolean) => void;
+};
+type SwitchProps = {
+    label?: string;
+    labelAlignment?: SwitchLabelAlignment;
+    themeColor?: ThemeColor;
+    variant?: SwitchVariant;
+    size?: SwitchSize;
+    radius?: SwitchRadius;
+    fullWidth?: boolean;
+    isSelected?: boolean;
+    isDisabled?: boolean;
+    labelStyle?: TextStyle;
+    style?: ViewStyle;
+} & SwitchEvents;
+
+declare const Switch: React.FC<SwitchProps>;
+
+export { Switch, type SwitchLabelAlignment, type SwitchProps, type SwitchRadius, type SwitchSize, type SwitchVariant };

package/dist/switch/index.js

@@ -1,7 +1,6 @@
-import "../chunk-DXXNBF5P.js";
 import {
   useXUITheme
-} from "../chunk-LTKYHG5V.js";
+} from "../chunk-GHCVNQET.js";
 
 // src/components/switch/switch.tsx
 import React, { useEffect, useMemo as useMemo2, useRef, useState } from "react";

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

@@ -1,8 +1,9 @@
-import type { ReactNode } from 'react';
-import type { TextStyle, ViewStyle } from 'react-native';
-import type { Radius, Size, ThemeColor } from '../../types';
-export type TabsVariant = 'solid' | 'bordered' | 'light' | 'underlined';
-export type TabsItem = {
+import React, { ReactNode } from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+import { T as ThemeColor, S as Size, R as Radius } from '../index-BOw6tbkc.cjs';
+
+type TabsVariant = 'solid' | 'bordered' | 'light' | 'underlined';
+type TabsItem = {
     /**
      * Unique key for the tab.
      */
@@ -29,7 +30,7 @@ export type TabsItem = {
      */
     content?: ReactNode;
 };
-export type TabProps = {
+type TabProps = {
     /**
      * Label content for the tab trigger.
      */
@@ -94,7 +95,7 @@ type RenderChildrenState = {
     selectedKey: string;
     selectedItem?: TabsItem;
 };
-export type TabsProps = {
+type TabsProps = {
     /**
      * Controlled selected key.
      */
@@ -168,5 +169,8 @@ export type TabsProps = {
      */
     customAppearance?: TabsCustomAppearance;
 };
-export {};
-//# sourceMappingURL=tabs.type.d.ts.map
+
+declare const Tab: React.FC<TabProps>;
+declare const Tabs: React.FC<TabsProps>;
+
+export { Tab, type TabProps, Tabs, type TabsItem, type TabsProps, type TabsVariant };

package/dist/tabs/index.d.ts

@@ -1,3 +1,176 @@
-export { Tab, Tabs } from './tabs';
-export type { TabProps, TabsProps, TabsItem, TabsVariant } from './tabs.type';
-//# sourceMappingURL=index.d.ts.map
+import React, { ReactNode } from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+import { T as ThemeColor, S as Size, R as Radius } from '../index-BOw6tbkc.js';
+
+type TabsVariant = 'solid' | 'bordered' | 'light' | 'underlined';
+type TabsItem = {
+    /**
+     * Unique key for the tab.
+     */
+    key: string;
+    /**
+     * Label content for the tab trigger.
+     */
+    title: ReactNode;
+    /**
+     * Optional content displayed before the title.
+     */
+    startContent?: ReactNode;
+    /**
+     * Optional content displayed after the title.
+     */
+    endContent?: ReactNode;
+    /**
+     * Whether this tab is disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Optional content rendered when this tab is selected.
+     */
+    content?: ReactNode;
+};
+type TabProps = {
+    /**
+     * Label content for the tab trigger.
+     */
+    title: ReactNode;
+    /**
+     * Optional content displayed before the title.
+     */
+    startContent?: ReactNode;
+    /**
+     * Optional content displayed after the title.
+     */
+    endContent?: ReactNode;
+    /**
+     * Whether this tab is disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Optional content rendered when this tab is selected.
+     */
+    children?: ReactNode;
+};
+type TabsCustomAppearance = {
+    /**
+     * Custom styles for the outer container.
+     */
+    container?: ViewStyle;
+    /**
+     * Custom styles for the tabs list wrapper.
+     */
+    list?: ViewStyle;
+    /**
+     * Custom styles for each tab trigger.
+     */
+    tab?: ViewStyle;
+    /**
+     * Custom styles for the selected tab trigger.
+     */
+    selectedTab?: ViewStyle;
+    /**
+     * Custom styles for tab title text.
+     */
+    text?: TextStyle;
+    /**
+     * Custom styles for selected tab title text.
+     */
+    selectedText?: TextStyle;
+    /**
+     * Custom styles for the animated cursor.
+     */
+    cursor?: ViewStyle;
+    /**
+     * Custom styles for optional content area.
+     */
+    content?: ViewStyle;
+};
+type RenderTabState = {
+    isSelected: boolean;
+    isDisabled: boolean;
+};
+type RenderChildrenState = {
+    selectedKey: string;
+    selectedItem?: TabsItem;
+};
+type TabsProps = {
+    /**
+     * Controlled selected key.
+     */
+    selectedKey?: string;
+    /**
+     * Default selected key in uncontrolled mode.
+     */
+    defaultSelectedKey?: string;
+    /**
+     * Callback fired when selection changes.
+     */
+    onSelectionChange?: (key: string) => void;
+    /**
+     * Keys that should be disabled.
+     */
+    disabledKeys?: string[];
+    /**
+     * Theme color of tabs.
+     * @default 'primary'
+     */
+    color?: ThemeColor;
+    /**
+     * Visual variant.
+     * @default 'solid'
+     */
+    variant?: TabsVariant;
+    /**
+     * Size of tab triggers.
+     * @default 'md'
+     */
+    size?: Size;
+    /**
+     * Border radius for list and cursor.
+     * @default 'full'
+     */
+    radius?: Radius;
+    /**
+     * Whether tabs should stretch to full width.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Whether all tabs are disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Disable cursor animation.
+     * @default false
+     */
+    disableAnimation?: boolean;
+    /**
+     * Animation duration in milliseconds.
+     * @default 220
+     */
+    animationDuration?: number;
+    /**
+     * Optional custom tab renderer.
+     */
+    renderTab?: (item: TabsItem, state: RenderTabState) => ReactNode;
+    /**
+     * Tab items as children.
+     */
+    children: ReactNode;
+    /**
+     * Optional content area rendered below the tabs.
+     */
+    content?: ReactNode | ((state: RenderChildrenState) => ReactNode);
+    /**
+     * Custom appearance overrides.
+     */
+    customAppearance?: TabsCustomAppearance;
+};
+
+declare const Tab: React.FC<TabProps>;
+declare const Tabs: React.FC<TabsProps>;
+
+export { Tab, type TabProps, Tabs, type TabsItem, type TabsProps, type TabsVariant };

package/dist/tabs/index.js

@@ -1,8 +1,7 @@
-import "../chunk-DXXNBF5P.js";
 import {
   useBorderRadiusStyles,
   useXUITheme
-} from "../chunk-LTKYHG5V.js";
+} from "../chunk-4KSZLONZ.js";
 
 // src/components/tabs/tabs.tsx
 import React, { useCallback, useEffect, useMemo as useMemo2, useRef, useState } from "react";

package/dist/timepicker/index.cjs

@@ -266,7 +266,12 @@ var useTimePickerColors = (themeColor) => {
       clockFace: (0, import_core.withOpacity)(colorScheme.main, 0.08),
       selectedDigit: (0, import_core.withOpacity)(colorScheme.main, 0.12)
     };
-  }, [colorScheme.main, colorScheme.foreground, theme.colors.background, theme.colors.foreground]);
+  }, [
+    colorScheme.main,
+    colorScheme.foreground,
+    theme.colors.background,
+    theme.colors.foreground
+  ]);
 };
 
 // src/components/timepicker/timepicker.style.ts
@@ -478,12 +483,19 @@ var TimePicker = ({
     setMode
   } = useTimePickerState(value, is24Hour, onChange);
   const colors2 = useTimePickerColors(themeColor);
-  const hourAngle = (0, import_react7.useMemo)(() => getHourAngle(displayHours, is24Hour), [displayHours, is24Hour]);
+  const hourAngle = (0, import_react7.useMemo)(
+    () => getHourAngle(displayHours, is24Hour),
+    [displayHours, is24Hour]
+  );
   const minuteAngle = (0, import_react7.useMemo)(() => getMinuteAngle(time.minutes), [time.minutes]);
   const currentAngle = mode === "hour" ? hourAngle : minuteAngle;
   const handRotation = (0, import_react_native_reanimated.useSharedValue)(currentAngle);
-  const [hourInput, setHourInput] = (0, import_react7.useState)(displayHours.toString().padStart(2, "0"));
-  const [minuteInput, setMinuteInput] = (0, import_react7.useState)(time.minutes.toString().padStart(2, "0"));
+  const [hourInput, setHourInput] = (0, import_react7.useState)(
+    displayHours.toString().padStart(2, "0")
+  );
+  const [minuteInput, setMinuteInput] = (0, import_react7.useState)(
+    time.minutes.toString().padStart(2, "0")
+  );
   (0, import_react7.useEffect)(() => {
     handRotation.value = (0, import_react_native_reanimated.withTiming)(currentAngle - 180, {
       duration: 120,
@@ -632,10 +644,7 @@ var TimePicker = ({
   return /* @__PURE__ */ import_react7.default.createElement(import_react_native5.View, { style: [styles.container, style] }, /* @__PURE__ */ import_react7.default.createElement(import_react_native5.View, { style: styles.header }, /* @__PURE__ */ import_react7.default.createElement(import_react_native5.Text, { style: [styles.headerTitle, { color: colors2.textSecondary }] }, "Select time"), /* @__PURE__ */ import_react7.default.createElement(
     import_react_native5.View,
     {
-      style: [
-        styles.timeDisplay,
-        !is24Hour && styles.timeDisplayWithPeriod
-      ]
+      style: [styles.timeDisplay, !is24Hour && styles.timeDisplayWithPeriod]
     },
     /* @__PURE__ */ import_react7.default.createElement(import_react_native5.View, { style: styles.timeSection }, /* @__PURE__ */ import_react7.default.createElement(
       import_react_native5.TextInput,

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

@@ -1,7 +1,8 @@
-import type { ReactNode } from 'react';
-import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
-import type { ThemeColor } from '../../types';
-export type TimeValue = {
+import React, { ReactNode } from 'react';
+import { StyleProp, ViewStyle, TextStyle } from 'react-native';
+import { T as ThemeColor } from '../index-BOw6tbkc.cjs';
+
+type TimeValue = {
     /**
      * Hours value (0-23 for 24-hour format, 1-12 for 12-hour format)
      */
@@ -11,9 +12,9 @@ export type TimeValue = {
      */
     minutes: number;
 };
-export type TimePickerMode = 'hour' | 'minute';
-export type TimePeriod = 'AM' | 'PM';
-export type TimePickerProps = {
+type TimePickerMode = 'hour' | 'minute';
+type TimePeriod = 'AM' | 'PM';
+type TimePickerProps = {
     /**
      * Current time value
      */
@@ -45,7 +46,7 @@ export type TimePickerProps = {
      */
     maxTime?: TimeValue;
 };
-export type TimePickerDialogProps = {
+type TimePickerDialogProps = {
     /**
      * Whether the dialog is open
      */
@@ -96,7 +97,7 @@ export type TimePickerDialogProps = {
      */
     onCancel?: () => void;
 };
-export type TimePickerTriggerProps = {
+type TimePickerTriggerProps = {
     /**
      * Current time value shown in trigger.
      */
@@ -152,4 +153,63 @@ export type TimePickerTriggerProps = {
      */
     onClear?: () => void;
 };
-//# sourceMappingURL=timepicker.type.d.ts.map
+
+declare const TimePicker: React.FC<TimePickerProps>;
+
+declare const TimePickerDialog: React.FC<TimePickerDialogProps>;
+
+declare const TimePickerTrigger: React.FC<TimePickerTriggerProps>;
+
+/**
+ * Convert 24-hour time to 12-hour format with period
+ */
+declare const to12HourFormat: (hours: number) => {
+    hours: number;
+    period: TimePeriod;
+};
+/**
+ * Convert 12-hour time with period to 24-hour format
+ */
+declare const to24HourFormat: (hours: number, period: TimePeriod) => number;
+/**
+ * Format time value to display string
+ */
+declare const formatTimeValue: (time: TimeValue, is24Hour: boolean) => string;
+/**
+ * Calculate angle for hour hand on clock face
+ */
+declare const getHourAngle: (hour: number, is24Hour: boolean) => number;
+/**
+ * Calculate angle for minute hand on clock face
+ */
+declare const getMinuteAngle: (minute: number) => number;
+/**
+ * Convert angle to hour value
+ */
+declare const angleToHour: (angle: number, _is24Hour: boolean) => number;
+/**
+ * Convert angle to minute value
+ */
+declare const angleToMinute: (angle: number) => number;
+/**
+ * Calculate angle from touch position on clock face
+ */
+declare const calculateAngleFromPosition: (centerX: number, centerY: number, touchX: number, touchY: number) => number;
+/**
+ * Validate if time is within min/max range
+ */
+declare const isTimeInRange: (time: TimeValue, minTime?: TimeValue, maxTime?: TimeValue) => boolean;
+/**
+ * Get current time as TimeValue
+ */
+declare const getCurrentTime: () => TimeValue;
+/**
+ * Clamp hour value to valid range
+ */
+declare const clampHour: (hour: number, is24Hour: boolean) => number;
+/**
+ * Clamp minute value to valid range
+ */
+declare const clampMinute: (minute: number) => number;
+
+export { type TimePeriod, TimePicker, TimePickerDialog, type TimePickerDialogProps, type TimePickerMode, type TimePickerProps, TimePickerTrigger, type TimePickerTriggerProps, type TimeValue, angleToHour, angleToMinute, calculateAngleFromPosition, clampHour, clampMinute, formatTimeValue, getCurrentTime, getHourAngle, getMinuteAngle, isTimeInRange, to12HourFormat, to24HourFormat };