@xaui/native 0.2.8 → 0.9.1-alpha.1

package/dist/segment-button/index.cjs

@@ -1,405 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }require('../chunk-56RPWZD2.cjs');
-
-
-
-var _chunk7UFBLUMVcjs = require('../chunk-7UFBLUMV.cjs');
-
-// src/components/segment-button/segment-button.tsx
-var _react = require('react'); var _react2 = _interopRequireDefault(_react);
-var _reactnative = require('react-native');
-
-// src/components/segment-button/segment-button.style.ts
-
-var styles = _reactnative.StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    alignItems: "stretch",
-    overflow: "hidden",
-    alignSelf: "flex-start"
-  },
-  fullWidth: {
-    width: "100%",
-    alignSelf: "stretch"
-  },
-  segment: {
-    flex: 1
-  },
-  segmentInner: {
-    flex: 1,
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  segmentContent: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 4
-  },
-  segmentText: {
-    fontWeight: "500",
-    textAlign: "center"
-  },
-  disabled: {
-    opacity: 0.5
-  },
-  divider: {
-    width: 1,
-    alignSelf: "stretch"
-  }
-});
-
-// src/components/segment-button/segment-button.hook.ts
-
-var _core = require('@xaui/core');
-function useSegmentSizeStyles(size) {
-  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  return _react.useMemo.call(void 0, () => {
-    const sizes = {
-      xs: {
-        paddingHorizontal: theme.spacing.sm,
-        paddingVertical: theme.spacing.xs,
-        minHeight: theme.componentSizes.xs,
-        fontSize: theme.fontSizes.xs,
-        iconSize: 14
-      },
-      sm: {
-        paddingHorizontal: theme.spacing.md,
-        paddingVertical: theme.spacing.xs,
-        minHeight: theme.componentSizes.sm,
-        fontSize: theme.fontSizes.sm,
-        iconSize: 16
-      },
-      md: {
-        paddingHorizontal: theme.spacing.md,
-        paddingVertical: theme.spacing.sm,
-        minHeight: theme.componentSizes.md,
-        fontSize: theme.fontSizes.md,
-        iconSize: 18
-      },
-      lg: {
-        paddingHorizontal: theme.spacing.lg,
-        paddingVertical: theme.spacing.md,
-        minHeight: theme.componentSizes.lg,
-        fontSize: theme.fontSizes.lg,
-        iconSize: 20
-      }
-    };
-    return sizes[size];
-  }, [size, theme]);
-}
-function useSegmentVariantStyles(themeColor, variant, elevation = 0) {
-  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
-  const colorScheme = theme.colors[safeThemeColor];
-  const selectedBackgroundColor = _core.withPaletteNumber.call(void 0, colorScheme.main, 400);
-  return _react.useMemo.call(void 0, () => {
-    const variants = {
-      outlined: {
-        containerBackground: "transparent",
-        containerBorderWidth: theme.borderWidth.md,
-        containerBorderColor: colorScheme.main,
-        selectedBackground: selectedBackgroundColor,
-        unselectedBackground: "transparent",
-        selectedTextColor: colorScheme.onMain,
-        unselectedTextColor: colorScheme.main
-      },
-      flat: {
-        containerBackground: colorScheme.container,
-        containerBorderWidth: 0,
-        containerBorderColor: "transparent",
-        selectedBackground: _core.withOpacity.call(void 0, colorScheme.main, 0.2),
-        unselectedBackground: "transparent",
-        selectedTextColor: colorScheme.main,
-        unselectedTextColor: colorScheme.main
-      },
-      light: {
-        containerBackground: "transparent",
-        containerBorderWidth: 0,
-        containerBorderColor: "transparent",
-        selectedBackground: selectedBackgroundColor,
-        unselectedBackground: "transparent",
-        selectedTextColor: colorScheme.onMain,
-        unselectedTextColor: colorScheme.main
-      },
-      faded: {
-        containerBackground: _core.withOpacity.call(void 0, colorScheme.container, 0.58),
-        containerBorderWidth: theme.borderWidth.md,
-        containerBorderColor: `${colorScheme.main}90`,
-        selectedBackground: _core.withOpacity.call(void 0, colorScheme.main, 0.2),
-        unselectedBackground: "transparent",
-        selectedTextColor: colorScheme.main,
-        unselectedTextColor: colorScheme.main
-      }
-    };
-    const baseStyle = _nullishCoalesce(variants[variant], () => ( variants.outlined));
-    const shouldApplyElevation = variant !== "outlined" && variant !== "light";
-    const shadowStyles = elevation === 0 ? {} : elevation === 1 ? theme.shadows.sm : elevation === 2 ? theme.shadows.md : elevation === 3 ? theme.shadows.lg : theme.shadows.xl;
-    return {
-      ...baseStyle,
-      containerShadow: shouldApplyElevation && elevation > 0 ? shadowStyles : baseStyle.containerShadow
-    };
-  }, [variant, colorScheme, theme, elevation]);
-}
-
-// src/components/segment-button/segment-button-context.ts
-
-var SegmentButtonContext = _react.createContext.call(void 0, void 0);
-var useSegmentButtonContext = () => {
-  const context = _react.useContext.call(void 0, SegmentButtonContext);
-  if (!context) {
-    throw new Error(
-      "SegmentButtonItem must be used within a SegmentButton component"
-    );
-  }
-  return context;
-};
-
-// src/components/segment-button/segment-button.tsx
-var SegmentButton = ({
-  children,
-  selected: controlledSelected,
-  defaultSelected,
-  onSelectionChange,
-  selectionMode = "single",
-  themeColor = "primary",
-  variant = "outlined",
-  size = "md",
-  radius = "full",
-  fullWidth = false,
-  isDisabled = false,
-  showCheckmark = true,
-  elevation = 0,
-  customAppearance
-}) => {
-  const isControlled = controlledSelected !== void 0;
-  const [internalSelected, setInternalSelected] = _react.useState.call(void 0, 
-    () => _nullishCoalesce(defaultSelected, () => ( ""))
-  );
-  const selected = isControlled ? controlledSelected : internalSelected;
-  const selectedKeys = _react.useMemo.call(void 0, () => {
-    if (Array.isArray(selected)) return selected;
-    return selected ? [selected] : [];
-  }, [selected]);
-  const variantStyles = useSegmentVariantStyles(themeColor, variant, elevation);
-  const radiusStyles = _chunk7UFBLUMVcjs.useBorderRadiusStyles.call(void 0, radius);
-  const toggleItem = _react.useCallback.call(void 0, 
-    (key) => {
-      let nextSelected;
-      if (selectionMode === "single") {
-        nextSelected = key;
-      } else {
-        const isCurrentlySelected = selectedKeys.includes(key);
-        if (isCurrentlySelected && selectedKeys.length > 1) {
-          nextSelected = selectedKeys.filter((k) => k !== key);
-        } else if (!isCurrentlySelected) {
-          nextSelected = [...selectedKeys, key];
-        } else {
-          return;
-        }
-      }
-      if (!isControlled) {
-        setInternalSelected(nextSelected);
-      }
-      _optionalChain([onSelectionChange, 'optionalCall', _ => _(nextSelected)]);
-    },
-    [selectionMode, selectedKeys, onSelectionChange, isControlled]
-  );
-  const contextValue = _react.useMemo.call(void 0, 
-    () => ({
-      selectedKeys,
-      toggleItem,
-      themeColor,
-      variant,
-      size,
-      elevation,
-      isDisabled,
-      showCheckmark
-    }),
-    [
-      selectedKeys,
-      toggleItem,
-      themeColor,
-      variant,
-      size,
-      elevation,
-      isDisabled,
-      showCheckmark
-    ]
-  );
-  const showDivider = variant === "outlined" || variant === "faded";
-  const childrenArray = _react2.default.Children.toArray(children);
-  const getItemKey = (child) => {
-    if (!_react2.default.isValidElement(child)) {
-      return void 0;
-    }
-    return child.props.itemKey;
-  };
-  return /* @__PURE__ */ _react2.default.createElement(SegmentButtonContext.Provider, { value: contextValue }, /* @__PURE__ */ _react2.default.createElement(
-    _reactnative.View,
-    {
-      style: [
-        styles.container,
-        {
-          backgroundColor: variantStyles.containerBackground,
-          borderWidth: variantStyles.containerBorderWidth,
-          borderColor: variantStyles.containerBorderColor,
-          borderRadius: radiusStyles.borderRadius,
-          ...variantStyles.containerShadow
-        },
-        fullWidth && styles.fullWidth,
-        _optionalChain([customAppearance, 'optionalAccess', _2 => _2.container])
-      ]
-    },
-    childrenArray.map((child, index) => {
-      const isLast = index === childrenArray.length - 1;
-      const childItemKey = getItemKey(child);
-      const childKey = _nullishCoalesce(childItemKey, () => ( index));
-      const isSelected = selectedKeys.includes(String(childKey));
-      const nextChildKey = !isLast ? getItemKey(childrenArray[index + 1]) : void 0;
-      const nextSelected = nextChildKey ? selectedKeys.includes(String(nextChildKey)) : false;
-      return /* @__PURE__ */ _react2.default.createElement(_react2.default.Fragment, { key: childKey }, child, showDivider && !isLast && !isSelected && !nextSelected && /* @__PURE__ */ _react2.default.createElement(
-        _reactnative.View,
-        {
-          style: [
-            styles.divider,
-            {
-              backgroundColor: variantStyles.containerBorderColor
-            }
-          ]
-        }
-      ));
-    })
-  ));
-};
-
-// src/components/segment-button/segment-button-item.tsx
-
-
-var _reactnativesvg = require('react-native-svg'); var _reactnativesvg2 = _interopRequireDefault(_reactnativesvg);
-
-// src/components/segment-button/segment-button.animation.ts
-
-var runCheckmarkEnterAnimation = (animatedValue) => {
-  animatedValue.setValue(0);
-  _reactnative.Animated.timing(animatedValue, {
-    toValue: 1,
-    duration: 200,
-    useNativeDriver: true
-  }).start();
-};
-var runCheckmarkExitAnimation = (animatedValue) => {
-  _reactnative.Animated.timing(animatedValue, {
-    toValue: 0,
-    duration: 150,
-    useNativeDriver: true
-  }).start();
-};
-
-// src/components/segment-button/segment-button-item.tsx
-var CheckIcon = ({ size, color }) => /* @__PURE__ */ _react2.default.createElement(_reactnativesvg2.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ _react2.default.createElement(
-  _reactnativesvg.Path,
-  {
-    d: "M20 6L9 17l-5-5",
-    stroke: color,
-    strokeWidth: 2.5,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }
-));
-var SegmentButtonItem = ({
-  itemKey,
-  label,
-  startContent,
-  icon,
-  endContent,
-  checkIndicator,
-  isDisabled: itemDisabled = false,
-  customAppearance
-}) => {
-  const {
-    selectedKeys,
-    toggleItem,
-    themeColor,
-    variant,
-    size,
-    elevation,
-    isDisabled: groupDisabled,
-    showCheckmark
-  } = useSegmentButtonContext();
-  const isSelected = selectedKeys.includes(itemKey);
-  const disabled = groupDisabled || itemDisabled;
-  const checkmarkAnim = _react.useRef.call(void 0, new _reactnative.Animated.Value(isSelected ? 1 : 0)).current;
-  const prevSelected = _react.useRef.call(void 0, isSelected);
-  _react.useEffect.call(void 0, () => {
-    if (isSelected && !prevSelected.current) {
-      runCheckmarkEnterAnimation(checkmarkAnim);
-    } else if (!isSelected && prevSelected.current) {
-      runCheckmarkExitAnimation(checkmarkAnim);
-    }
-    prevSelected.current = isSelected;
-  }, [isSelected, checkmarkAnim]);
-  const sizeStyles = useSegmentSizeStyles(size);
-  const variantStyles = useSegmentVariantStyles(themeColor, variant, elevation);
-  const handlePress = () => {
-    if (!disabled) {
-      toggleItem(itemKey);
-    }
-  };
-  const backgroundColor = isSelected ? variantStyles.selectedBackground : variantStyles.unselectedBackground;
-  const textColor = isSelected ? variantStyles.selectedTextColor : variantStyles.unselectedTextColor;
-  const showCheck = isSelected && showCheckmark;
-  const startNode = showCheck ? _nullishCoalesce(checkIndicator, () => ( /* @__PURE__ */ _react2.default.createElement(CheckIcon, { size: sizeStyles.iconSize, color: textColor }))) : _nullishCoalesce(startContent, () => ( icon));
-  return /* @__PURE__ */ _react2.default.createElement(
-    _reactnative.Pressable,
-    {
-      style: [styles.segment, disabled && styles.disabled],
-      onPress: handlePress,
-      disabled
-    },
-    /* @__PURE__ */ _react2.default.createElement(
-      _reactnative.View,
-      {
-        style: [
-          styles.segmentInner,
-          {
-            paddingHorizontal: sizeStyles.paddingHorizontal,
-            paddingVertical: sizeStyles.paddingVertical,
-            minHeight: sizeStyles.minHeight,
-            backgroundColor
-          },
-          isSelected ? _optionalChain([customAppearance, 'optionalAccess', _3 => _3.selectedSegment]) : _optionalChain([customAppearance, 'optionalAccess', _4 => _4.segment])
-        ]
-      },
-      /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles.segmentContent }, startNode && /* @__PURE__ */ _react2.default.createElement(
-        _reactnative.Animated.View,
-        {
-          style: {
-            opacity: showCheck ? checkmarkAnim : 1,
-            transform: [{ scale: showCheck ? checkmarkAnim : 1 }]
-          }
-        },
-        startNode
-      ), /* @__PURE__ */ _react2.default.createElement(
-        _reactnative.Text,
-        {
-          numberOfLines: 1,
-          style: [
-            styles.segmentText,
-            {
-              fontSize: sizeStyles.fontSize,
-              color: textColor
-            },
-            isSelected ? _optionalChain([customAppearance, 'optionalAccess', _5 => _5.selectedText]) : _optionalChain([customAppearance, 'optionalAccess', _6 => _6.text])
-          ]
-        },
-        label
-      ), endContent)
-    )
-  );
-};
-SegmentButtonItem.displayName = "SegmentButtonItem";
-
-
-
-exports.SegmentButton = SegmentButton; exports.SegmentButtonItem = SegmentButtonItem;

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

@@ -1,141 +0,0 @@
-import React, { ReactNode } from 'react';
-import { ViewStyle, TextStyle } from 'react-native';
-import { ThemeColor, Size } from '@xaui/core/types';
-
-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,141 +0,0 @@
-import React, { ReactNode } from 'react';
-import { ViewStyle, TextStyle } from 'react-native';
-import { ThemeColor, Size } from '@xaui/core/types';
-
-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 };