@xaui/native 0.0.32 → 0.0.33

package/dist/picker/index.cjs

@@ -0,0 +1,250 @@
+"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; }
+
+var _chunk2ANGPYCPcjs = require('../chunk-2ANGPYCP.cjs');
+
+
+var _chunkRVR42THGcjs = require('../chunk-RVR42THG.cjs');
+require('../chunk-HSPTLUFA.cjs');
+
+
+var _chunkOQ2BLOOGcjs = require('../chunk-OQ2BLOOG.cjs');
+
+// src/components/picker/picker.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+var _reactnative = require('react-native');
+var _core = require('@xaui/core');
+
+// src/components/picker/picker.style.ts
+
+var styles = _reactnative.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: _reactnative.StyleSheet.hairlineWidth,
+    marginHorizontal: 20
+  }
+});
+
+// src/components/picker/picker.tsx
+var ChevronDownIcon = ({
+  color,
+  size
+}) => /* @__PURE__ */ _react2.default.createElement(
+  _reactnative.View,
+  {
+    style: {
+      width: size,
+      height: size,
+      alignItems: "center",
+      justifyContent: "center"
+    }
+  },
+  /* @__PURE__ */ _react2.default.createElement(
+    _reactnative.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__ */ _react2.default.createElement(_reactnative.View, { style: { width: 20, height: 20, alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ _react2.default.createElement(
+  _reactnative.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__ */ _react2.default.createElement(
+    _reactnative.Pressable,
+    {
+      onPress: handlePress,
+      style: [styles.optionItem, option.disabled && styles.optionItemDisabled],
+      disabled: option.disabled
+    },
+    /* @__PURE__ */ _react2.default.createElement(
+      _reactnative.Text,
+      {
+        style: [
+          styles.optionLabel,
+          { color: isSelected ? themeColor : foreground }
+        ]
+      },
+      option.label
+    ),
+    isSelected && /* @__PURE__ */ _react2.default.createElement(CheckIcon, { color: themeColor })
+  );
+};
+var Picker = ({
+  options,
+  value,
+  placeholder = "Select an option...",
+  label,
+  labelPlacement = "outside",
+  description,
+  errorMessage,
+  sheetTitle,
+  themeColor = "primary",
+  variant = "flat",
+  size = "md",
+  radius = "md",
+  isOpened,
+  isDisabled = false,
+  isInvalid = false,
+  fullWidth = true,
+  sheetStyle,
+  endContent,
+  onValueChange,
+  onOpenChange,
+  onClose
+}) => {
+  const [internalIsOpen, setInternalIsOpen] = _react.useState.call(void 0, false);
+  const isControlled = isOpened !== void 0;
+  const isOpen = isControlled ? Boolean(isOpened) : internalIsOpen;
+  const theme = _chunkOQ2BLOOGcjs.useXUITheme.call(void 0, );
+  const sheetBackground = theme.mode === "dark" ? theme.colors.background : "#ffffff";
+  const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  const selectedOption = options.find((opt) => opt.value === value);
+  const displayLabel = _optionalChain([selectedOption, 'optionalAccess', _ => _.label]);
+  const setOpen = (nextOpen) => {
+    if (nextOpen && isDisabled) return;
+    if (!isControlled) {
+      setInternalIsOpen(nextOpen);
+    }
+    _optionalChain([onOpenChange, 'optionalCall', _2 => _2(nextOpen)]);
+  };
+  const handleOpen = () => {
+    setOpen(true);
+  };
+  const requestClose = () => {
+    setOpen(false);
+  };
+  const handleSheetClose = () => {
+    if (isOpen) {
+      setOpen(false);
+    }
+    _optionalChain([onClose, 'optionalCall', _3 => _3()]);
+  };
+  const handleSelect = (selectedValue) => {
+    _optionalChain([onValueChange, 'optionalCall', _4 => _4(selectedValue)]);
+    requestClose();
+  };
+  const chevronColor = _core.withOpacity.call(void 0, theme.colors.foreground, 0.45);
+  return /* @__PURE__ */ _react2.default.createElement(_react2.default.Fragment, null, /* @__PURE__ */ _react2.default.createElement(
+    _chunk2ANGPYCPcjs.InputTrigger,
+    {
+      value: displayLabel,
+      placeholder,
+      label,
+      labelPlacement,
+      description,
+      errorMessage,
+      themeColor,
+      variant,
+      size,
+      radius,
+      isDisabled,
+      isInvalid,
+      fullWidth,
+      endContent: _nullishCoalesce(endContent, () => ( /* @__PURE__ */ _react2.default.createElement(ChevronDownIcon, { color: chevronColor, size: 20 }))),
+      onPress: handleOpen
+    }
+  ), /* @__PURE__ */ _react2.default.createElement(
+    _chunkRVR42THGcjs.BottomSheet,
+    {
+      isOpen,
+      snapPoints: [Math.min(0.35 + options.length * 0.065, 0.85)],
+      themeColor,
+      onClose: handleSheetClose,
+      style: { backgroundColor: sheetBackground, ...sheetStyle }
+    },
+    /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles.sheetContent }, sheetTitle ? /* @__PURE__ */ _react2.default.createElement(
+      _reactnative.Text,
+      {
+        style: [styles.sheetTitle, { color: theme.colors.foreground }]
+      },
+      sheetTitle
+    ) : null, /* @__PURE__ */ _react2.default.createElement(_reactnative.ScrollView, null, options.map((option, index) => /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { key: option.value }, /* @__PURE__ */ _react2.default.createElement(
+      OptionItem,
+      {
+        option,
+        isSelected: option.value === value,
+        themeColor: colorScheme.main,
+        foreground: theme.colors.foreground,
+        onSelect: handleSelect
+      }
+    ), index < options.length - 1 && /* @__PURE__ */ _react2.default.createElement(
+      _reactnative.View,
+      {
+        style: [
+          styles.divider,
+          {
+            backgroundColor: _core.withOpacity.call(void 0, 
+              theme.colors.foreground,
+              0.06
+            )
+          }
+        ]
+      }
+    )))))
+  ));
+};
+
+
+exports.Picker = Picker;

package/dist/picker/index.d.cts

@@ -0,0 +1,121 @@
+import React, { ReactNode } from 'react';
+import { ViewStyle } from 'react-native';
+import { T as ThemeColor, R as Radius } from '../index-DyU3sW3_.cjs';
+import { d as InputTriggerLabelPlacement, b as InputTriggerVariant, c as InputTriggerSize } from '../input-trigger.type-BL70fHE9.cjs';
+
+type PickerOption = {
+    /**
+     * Display label for the option.
+     */
+    label: string;
+    /**
+     * Unique value for the option.
+     */
+    value: string;
+    /**
+     * Whether this option is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+};
+type PickerProps = {
+    /**
+     * List of selectable options.
+     */
+    options: PickerOption[];
+    /**
+     * Currently selected value (controlled).
+     */
+    value?: string;
+    /**
+     * Placeholder text shown when no value is selected.
+     * @default 'Select an option...'
+     */
+    placeholder?: string;
+    /**
+     * Label displayed above or inside the trigger.
+     */
+    label?: ReactNode;
+    /**
+     * Position of the label relative to the trigger.
+     * @default 'outside'
+     */
+    labelPlacement?: InputTriggerLabelPlacement;
+    /**
+     * Helper text displayed below the trigger.
+     */
+    description?: ReactNode;
+    /**
+     * Error message when isInvalid is true.
+     */
+    errorMessage?: ReactNode;
+    /**
+     * Title displayed inside the bottom sheet.
+     */
+    sheetTitle?: string;
+    /**
+     * Theme color.
+     * @default 'primary'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * Visual variant of the trigger.
+     * @default 'flat'
+     */
+    variant?: InputTriggerVariant;
+    /**
+     * Size of the trigger.
+     * @default 'md'
+     */
+    size?: InputTriggerSize;
+    /**
+     * Border radius.
+     * @default 'md'
+     */
+    radius?: Radius;
+    /**
+     * Controlled open state of the sheet.
+     */
+    isOpened?: boolean;
+    /**
+     * Whether the trigger is disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the trigger is in an invalid state.
+     * @default false
+     */
+    isInvalid?: boolean;
+    /**
+     * Whether the trigger takes full available width.
+     * @default true
+     */
+    fullWidth?: boolean;
+    /**
+     * Custom style for the bottom sheet container.
+     */
+    sheetStyle?: ViewStyle;
+    /**
+     * Custom end content for the trigger (replaces chevron).
+     */
+    endContent?: ReactNode;
+} & PickerEvents;
+type PickerEvents = {
+    /**
+     * Called when the selected value changes.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Called when the sheet opens or closes.
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * Called when the sheet closes.
+     */
+    onClose?: () => void;
+};
+
+declare const Picker: React.FC<PickerProps>;
+
+export { Picker, type PickerEvents, type PickerOption, type PickerProps };

package/dist/picker/index.d.ts

@@ -0,0 +1,121 @@
+import React, { ReactNode } from 'react';
+import { ViewStyle } from 'react-native';
+import { T as ThemeColor, R as Radius } from '../index-DyU3sW3_.js';
+import { d as InputTriggerLabelPlacement, b as InputTriggerVariant, c as InputTriggerSize } from '../input-trigger.type-BODYStHk.js';
+
+type PickerOption = {
+    /**
+     * Display label for the option.
+     */
+    label: string;
+    /**
+     * Unique value for the option.
+     */
+    value: string;
+    /**
+     * Whether this option is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+};
+type PickerProps = {
+    /**
+     * List of selectable options.
+     */
+    options: PickerOption[];
+    /**
+     * Currently selected value (controlled).
+     */
+    value?: string;
+    /**
+     * Placeholder text shown when no value is selected.
+     * @default 'Select an option...'
+     */
+    placeholder?: string;
+    /**
+     * Label displayed above or inside the trigger.
+     */
+    label?: ReactNode;
+    /**
+     * Position of the label relative to the trigger.
+     * @default 'outside'
+     */
+    labelPlacement?: InputTriggerLabelPlacement;
+    /**
+     * Helper text displayed below the trigger.
+     */
+    description?: ReactNode;
+    /**
+     * Error message when isInvalid is true.
+     */
+    errorMessage?: ReactNode;
+    /**
+     * Title displayed inside the bottom sheet.
+     */
+    sheetTitle?: string;
+    /**
+     * Theme color.
+     * @default 'primary'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * Visual variant of the trigger.
+     * @default 'flat'
+     */
+    variant?: InputTriggerVariant;
+    /**
+     * Size of the trigger.
+     * @default 'md'
+     */
+    size?: InputTriggerSize;
+    /**
+     * Border radius.
+     * @default 'md'
+     */
+    radius?: Radius;
+    /**
+     * Controlled open state of the sheet.
+     */
+    isOpened?: boolean;
+    /**
+     * Whether the trigger is disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the trigger is in an invalid state.
+     * @default false
+     */
+    isInvalid?: boolean;
+    /**
+     * Whether the trigger takes full available width.
+     * @default true
+     */
+    fullWidth?: boolean;
+    /**
+     * Custom style for the bottom sheet container.
+     */
+    sheetStyle?: ViewStyle;
+    /**
+     * Custom end content for the trigger (replaces chevron).
+     */
+    endContent?: ReactNode;
+} & PickerEvents;
+type PickerEvents = {
+    /**
+     * Called when the selected value changes.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Called when the sheet opens or closes.
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * Called when the sheet closes.
+     */
+    onClose?: () => void;
+};
+
+declare const Picker: React.FC<PickerProps>;
+
+export { Picker, type PickerEvents, type PickerOption, type PickerProps };