@xaui/native 0.2.8 → 0.9.1-alpha.0

package/dist/picker/index.js

@@ -1,244 +0,0 @@
-import {
-  InputTrigger
-} from "../chunk-A45TVXU5.js";
-import {
-  BottomSheet
-} from "../chunk-4JFWQ5XT.js";
-import "../chunk-SHBDANQN.js";
-import {
-  useXUITheme
-} from "../chunk-RBSA4NH4.js";
-
-// src/components/picker/picker.tsx
-import React, { useState } from "react";
-import { Pressable, ScrollView, Text, View } from "react-native";
-import { getSafeThemeColor, withOpacity } from "@xaui/core";
-
-// src/components/picker/picker.style.ts
-import { StyleSheet } from "react-native";
-var styles = StyleSheet.create({
-  sheetContent: {
-    flex: 1,
-    paddingBottom: 24
-  },
-  sheetTitle: {
-    paddingHorizontal: 20,
-    paddingTop: 4,
-    paddingBottom: 12,
-    fontSize: 16,
-    fontWeight: "600"
-  },
-  optionItem: {
-    flexDirection: "row",
-    alignItems: "center",
-    paddingHorizontal: 20,
-    paddingVertical: 14,
-    gap: 12
-  },
-  optionItemDisabled: {
-    opacity: 0.4
-  },
-  optionLabel: {
-    flex: 1,
-    fontSize: 16
-  },
-  checkmark: {
-    width: 20,
-    height: 20,
-    borderRadius: 10,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  divider: {
-    height: StyleSheet.hairlineWidth,
-    marginHorizontal: 20
-  }
-});
-
-// src/components/picker/picker.tsx
-var ChevronDownIcon = ({
-  color,
-  size
-}) => /* @__PURE__ */ React.createElement(
-  View,
-  {
-    style: {
-      width: size,
-      height: size,
-      alignItems: "center",
-      justifyContent: "center"
-    }
-  },
-  /* @__PURE__ */ React.createElement(
-    View,
-    {
-      style: {
-        width: size * 0.5,
-        height: size * 0.5,
-        borderRightWidth: 2,
-        borderBottomWidth: 2,
-        borderColor: color,
-        transform: [{ rotate: "45deg" }],
-        marginTop: -(size * 0.15)
-      }
-    }
-  )
-);
-var CheckIcon = ({ color }) => /* @__PURE__ */ React.createElement(
-  View,
-  {
-    style: { width: 20, height: 20, alignItems: "center", justifyContent: "center" }
-  },
-  /* @__PURE__ */ React.createElement(
-    View,
-    {
-      style: {
-        width: 6,
-        height: 10,
-        borderRightWidth: 2,
-        borderBottomWidth: 2,
-        borderColor: color,
-        transform: [{ rotate: "45deg" }],
-        marginTop: -3
-      }
-    }
-  )
-);
-var OptionItem = ({
-  option,
-  isSelected,
-  themeColor,
-  foreground,
-  onSelect
-}) => {
-  const handlePress = () => {
-    if (!option.disabled) {
-      onSelect(option.value);
-    }
-  };
-  return /* @__PURE__ */ React.createElement(
-    Pressable,
-    {
-      onPress: handlePress,
-      style: [styles.optionItem, option.disabled && styles.optionItemDisabled],
-      disabled: option.disabled
-    },
-    /* @__PURE__ */ React.createElement(
-      Text,
-      {
-        style: [styles.optionLabel, { color: isSelected ? themeColor : foreground }]
-      },
-      option.label
-    ),
-    isSelected && /* @__PURE__ */ React.createElement(CheckIcon, { color: themeColor })
-  );
-};
-var Picker = ({
-  options,
-  value,
-  placeholder = "Select an option...",
-  label,
-  labelPlacement = "outside",
-  description,
-  errorMessage,
-  sheetTitle,
-  themeColor = "primary",
-  variant = "colored",
-  size = "md",
-  radius = "md",
-  isOpened,
-  isDisabled = false,
-  isInvalid = false,
-  fullWidth = true,
-  sheetStyle,
-  endContent,
-  onValueChange,
-  onOpenChange,
-  onClose
-}) => {
-  const [internalIsOpen, setInternalIsOpen] = useState(false);
-  const isControlled = isOpened !== void 0;
-  const isOpen = isControlled ? Boolean(isOpened) : internalIsOpen;
-  const theme = useXUITheme();
-  const sheetBackground = theme.mode === "dark" ? theme.colors.background : "#ffffff";
-  const safeThemeColor = getSafeThemeColor(themeColor);
-  const colorScheme = theme.colors[safeThemeColor];
-  const selectedOption = options.find((opt) => opt.value === value);
-  const displayLabel = selectedOption?.label;
-  const setOpen = (nextOpen) => {
-    if (nextOpen && isDisabled) return;
-    if (!isControlled) {
-      setInternalIsOpen(nextOpen);
-    }
-    onOpenChange?.(nextOpen);
-  };
-  const handleOpen = () => {
-    setOpen(true);
-  };
-  const requestClose = () => {
-    setOpen(false);
-  };
-  const handleSheetClose = () => {
-    if (isOpen) {
-      setOpen(false);
-    }
-    onClose?.();
-  };
-  const handleSelect = (selectedValue) => {
-    onValueChange?.(selectedValue);
-    requestClose();
-  };
-  const chevronColor = withOpacity(theme.colors.foreground, 0.45);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    InputTrigger,
-    {
-      value: displayLabel,
-      placeholder,
-      label,
-      labelPlacement,
-      description,
-      errorMessage,
-      themeColor,
-      variant,
-      size,
-      radius,
-      isDisabled,
-      isInvalid,
-      fullWidth,
-      endContent: endContent ?? /* @__PURE__ */ React.createElement(ChevronDownIcon, { color: chevronColor, size: 20 }),
-      onPress: handleOpen
-    }
-  ), /* @__PURE__ */ React.createElement(
-    BottomSheet,
-    {
-      isOpen,
-      snapPoints: [Math.min(0.35 + options.length * 0.065, 0.85)],
-      themeColor,
-      onClose: handleSheetClose,
-      style: { backgroundColor: sheetBackground, ...sheetStyle }
-    },
-    /* @__PURE__ */ React.createElement(View, { style: styles.sheetContent }, sheetTitle ? /* @__PURE__ */ React.createElement(Text, { style: [styles.sheetTitle, { color: theme.colors.foreground }] }, sheetTitle) : null, /* @__PURE__ */ React.createElement(ScrollView, null, options.map((option, index) => /* @__PURE__ */ React.createElement(View, { key: option.value }, /* @__PURE__ */ React.createElement(
-      OptionItem,
-      {
-        option,
-        isSelected: option.value === value,
-        themeColor: colorScheme.main,
-        foreground: theme.colors.foreground,
-        onSelect: handleSelect
-      }
-    ), index < options.length - 1 && /* @__PURE__ */ React.createElement(
-      View,
-      {
-        style: [
-          styles.divider,
-          {
-            backgroundColor: withOpacity(theme.colors.foreground, 0.06)
-          }
-        ]
-      }
-    )))))
-  ));
-};
-export {
-  Picker
-};

package/dist/progress/index.cjs

@@ -1,219 +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(); } }require('../chunk-56RPWZD2.cjs');
-
-
-var _chunk7UFBLUMVcjs = require('../chunk-7UFBLUMV.cjs');
-
-// src/components/progress/progress.tsx
-var _react = require('react'); var _react2 = _interopRequireDefault(_react);
-var _reactnative = require('react-native');
-
-// src/components/progress/circular-progress-indicator.tsx
-
-
-var _reactnativereanimated = require('react-native-reanimated'); var _reactnativereanimated2 = _interopRequireDefault(_reactnativereanimated);
-var _reactnativesvg = require('react-native-svg'); var _reactnativesvg2 = _interopRequireDefault(_reactnativesvg);
-
-// src/components/progress/progress.hook.ts
-
-
-var MIN_VALUE = 0;
-var MAX_VALUE = 1;
-var clampProgress = (value) => Math.max(MIN_VALUE, Math.min(MAX_VALUE, value));
-var useProgressAnimation = (value, disableAnimation) => {
-  const progressAnim = _reactnativereanimated.useSharedValue.call(void 0, clampProgress(value));
-  _react.useEffect.call(void 0, () => {
-    const clampedValue = clampProgress(value);
-    if (disableAnimation) {
-      progressAnim.value = clampedValue;
-      return;
-    }
-    progressAnim.value = _reactnativereanimated.withTiming.call(void 0, clampedValue, {
-      duration: 500,
-      easing: _reactnativereanimated.Easing.bezier(0, 0, 0.2, 1)
-    });
-  }, [value, disableAnimation, progressAnim]);
-  return progressAnim;
-};
-
-// src/components/progress/progress.style.ts
-
-var styles = _reactnative.StyleSheet.create({
-  container: {
-    flexShrink: 1,
-    flexBasis: "auto",
-    width: "100%"
-  },
-  track: {
-    width: "100%",
-    overflow: "hidden"
-  },
-  progress: {
-    height: "100%"
-  },
-  circleContainer: {
-    justifyContent: "center",
-    alignItems: "center"
-  }
-});
-
-// src/components/progress/circular-progress-indicator.tsx
-var AnimatedCircle = _reactnativereanimated2.default.createAnimatedComponent(_reactnativesvg.Circle);
-var CircularProgressIndicator = ({
-  size = 40,
-  color,
-  backgroundColor,
-  value,
-  borderRadius,
-  disableAnimation
-}) => {
-  const progressAnim = useProgressAnimation(value, disableAnimation);
-  const strokeWidth = size * 0.1;
-  const radius = (size - strokeWidth) / 2;
-  const circumference = 2 * Math.PI * radius;
-  const center = size / 2;
-  const strokeCap = borderRadius && borderRadius > 0 ? "round" : "butt";
-  const animatedProps = _reactnativereanimated.useAnimatedProps.call(void 0, () => ({
-    strokeDashoffset: circumference * (1 - progressAnim.value)
-  }));
-  return /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles.circleContainer, { width: size, height: size }] }, /* @__PURE__ */ _react2.default.createElement(_reactnativesvg2.default, { width: size, height: size, style: { transform: [{ rotate: "-90deg" }] } }, /* @__PURE__ */ _react2.default.createElement(
-    _reactnativesvg.Circle,
-    {
-      cx: center,
-      cy: center,
-      r: radius,
-      stroke: backgroundColor,
-      strokeWidth,
-      fill: "none"
-    }
-  ), /* @__PURE__ */ _react2.default.createElement(
-    AnimatedCircle,
-    {
-      cx: center,
-      cy: center,
-      r: radius,
-      stroke: color,
-      strokeWidth,
-      strokeLinecap: strokeCap,
-      strokeDasharray: circumference,
-      animatedProps,
-      fill: "none"
-    }
-  )));
-};
-
-// src/components/progress/linear-progress-indicator.tsx
-
-
-
-var LinearProgressIndicator = ({
-  size = 4,
-  color,
-  backgroundColor,
-  value,
-  borderRadius,
-  disableAnimation
-}) => {
-  const progressAnim = useProgressAnimation(value, disableAnimation);
-  const radius = Math.max(0, Math.min(size / 2, _nullishCoalesce(borderRadius, () => ( 0))));
-  const animatedStyle = _reactnativereanimated.useAnimatedStyle.call(void 0, () => ({
-    width: `${progressAnim.value * 100}%`
-  }));
-  return /* @__PURE__ */ _react2.default.createElement(
-    _reactnative.View,
-    {
-      style: [
-        styles.track,
-        {
-          height: size,
-          backgroundColor,
-          borderRadius: radius
-        }
-      ]
-    },
-    /* @__PURE__ */ _react2.default.createElement(
-      _reactnativereanimated2.default.View,
-      {
-        style: [
-          styles.progress,
-          animatedStyle,
-          {
-            backgroundColor: color,
-            borderRadius: radius
-          }
-        ]
-      }
-    )
-  );
-};
-
-// src/components/progress/progress.tsx
-var Progress = (props) => {
-  const {
-    variant = "linear",
-    themeColor = "primary",
-    value,
-    color,
-    backgroundColor,
-    size,
-    disableAnimation = false
-  } = props;
-  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  const colorScheme = theme.colors[themeColor];
-  const mainColor = _nullishCoalesce(color, () => ( colorScheme.main));
-  const trackColor = _nullishCoalesce(backgroundColor, () => ( colorScheme.container));
-  const clampedValue = clampProgress(value);
-  const accessibilityValue = {
-    min: 0,
-    max: 100,
-    now: clampedValue * 100
-  };
-  if (variant === "circular") {
-    const circleSize = _nullishCoalesce(size, () => ( 40));
-    const borderRadius2 = "borderRadius" in props ? props.borderRadius : void 0;
-    return /* @__PURE__ */ _react2.default.createElement(
-      _reactnative.View,
-      {
-        style: [styles.circleContainer, { width: circleSize, height: circleSize }],
-        accessible: true,
-        accessibilityRole: "progressbar",
-        accessibilityValue
-      },
-      /* @__PURE__ */ _react2.default.createElement(
-        CircularProgressIndicator,
-        {
-          size: circleSize,
-          color: mainColor,
-          backgroundColor: trackColor,
-          value: clampedValue,
-          borderRadius: borderRadius2,
-          disableAnimation
-        }
-      )
-    );
-  }
-  const linearSize = _nullishCoalesce(size, () => ( 4));
-  const borderRadius = "borderRadius" in props ? props.borderRadius : void 0;
-  return /* @__PURE__ */ _react2.default.createElement(
-    _reactnative.View,
-    {
-      style: styles.container,
-      accessible: true,
-      accessibilityRole: "progressbar",
-      accessibilityValue
-    },
-    /* @__PURE__ */ _react2.default.createElement(
-      LinearProgressIndicator,
-      {
-        size: linearSize,
-        color: mainColor,
-        backgroundColor: trackColor,
-        value: clampedValue,
-        borderRadius,
-        disableAnimation
-      }
-    )
-  );
-};
-
-
-exports.Progress = Progress;

package/dist/progress/index.d.cts

@@ -1,47 +0,0 @@
-import React from 'react';
-import { ThemeColor } from '@xaui/core/types';
-
-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.d.ts

@@ -1,47 +0,0 @@
-import React from 'react';
-import { ThemeColor } from '@xaui/core/types';
-
-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 };