@xaui/native 0.2.8 → 0.9.1-alpha.1

package/dist/input-trigger.type-Ba4bM3Qp.d.ts

@@ -1,180 +0,0 @@
-import { ReactNode } from 'react';
-import { StyleProp, ViewStyle, TextStyle } from 'react-native';
-import { ThemeColor, Radius } from '@xaui/core/types';
-
-type InputTriggerVariant = 'colored' | 'light' | 'bordered' | 'underlined';
-type InputTriggerSize = 'sm' | 'md' | 'lg';
-type InputTriggerLabelPlacement = 'outside' | 'inside';
-type InputTriggerCustomAppearance = {
-    container?: StyleProp<ViewStyle>;
-    inputContainer?: StyleProp<ViewStyle>;
-    inputWrapper?: StyleProp<ViewStyle>;
-    label?: StyleProp<TextStyle>;
-    content?: StyleProp<TextStyle>;
-    helperText?: StyleProp<TextStyle>;
-};
-type InputTriggerProps = {
-    /**
-     * Value displayed inside the trigger (acts as placeholder when no value).
-     */
-    value?: ReactNode;
-    /**
-     * Placeholder text shown when no value is set.
-     */
-    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 displayed when isInvalid is true.
-     */
-    errorMessage?: ReactNode;
-    /**
-     * Content rendered at the start of the trigger.
-     */
-    startContent?: ReactNode;
-    /**
-     * Content rendered at the end of the trigger.
-     */
-    endContent?: ReactNode;
-    /**
-     * Theme color for focus and active states.
-     * @default 'primary'
-     */
-    themeColor?: ThemeColor;
-    /**
-     * Visual style variant.
-     * @default 'colored'
-     */
-    variant?: InputTriggerVariant;
-    /**
-     * Size of the trigger.
-     * @default 'md'
-     */
-    size?: InputTriggerSize;
-    /**
-     * Border radius of the trigger.
-     * @default 'md'
-     */
-    radius?: Radius;
-    /**
-     * Whether the trigger is disabled.
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * Whether the trigger is in an invalid state.
-     * @default false
-     */
-    isInvalid?: boolean;
-    /**
-     * Whether the component takes the full available width.
-     * @default true
-     */
-    fullWidth?: boolean;
-    /**
-     * Custom style overrides for trigger parts.
-     */
-    customAppearance?: InputTriggerCustomAppearance;
-} & InputTriggerEvents;
-type InputTriggerEvents = {
-    /**
-     * Called when the trigger is pressed.
-     */
-    onPress?: () => void;
-};
-type FileInputTriggerCustomAppearance = {
-    container?: StyleProp<ViewStyle>;
-    inputContainer?: StyleProp<ViewStyle>;
-    inputWrapper?: StyleProp<ViewStyle>;
-    plusButton?: StyleProp<ViewStyle>;
-    label?: StyleProp<TextStyle>;
-    content?: StyleProp<TextStyle>;
-    helperText?: StyleProp<TextStyle>;
-};
-type FileInputTriggerProps = {
-    /**
-     * Value rendered in the center content area.
-     */
-    value?: ReactNode;
-    /**
-     * Placeholder text shown when value is empty.
-     */
-    placeholder?: string;
-    /**
-     * Label displayed above or inside the trigger.
-     */
-    label?: ReactNode;
-    /**
-     * Position of the label relative to the trigger.
-     * @default 'outside'
-     */
-    labelPlacement?: InputTriggerLabelPlacement;
-    /**
-     * Optional helper text below the trigger.
-     */
-    description?: ReactNode;
-    /**
-     * Error text shown when isInvalid is true.
-     */
-    errorMessage?: ReactNode;
-    /**
-     * Theme color for the trigger.
-     * @default 'primary'
-     */
-    themeColor?: ThemeColor;
-    /**
-     * Visual style variant.
-     * @default 'colored'
-     */
-    variant?: InputTriggerVariant;
-    /**
-     * Size of the trigger.
-     * @default 'md'
-     */
-    size?: InputTriggerSize;
-    /**
-     * Border radius.
-     * @default 'md'
-     */
-    radius?: Radius;
-    /**
-     * Whether the trigger is disabled.
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * Whether the trigger is invalid.
-     * @default false
-     */
-    isInvalid?: boolean;
-    /**
-     * Whether the component takes full width.
-     * @default false
-     */
-    fullWidth?: boolean;
-    /**
-     * Optional fully custom center content.
-     */
-    centerContent?: ReactNode;
-    /**
-     * Content shown when a file is selected (for image/video preview).
-     */
-    selectedContent?: ReactNode;
-    /**
-     * Custom style overrides for file trigger parts.
-     */
-    customAppearance?: FileInputTriggerCustomAppearance;
-} & InputTriggerEvents;
-
-export type { FileInputTriggerProps as F, InputTriggerProps as I, InputTriggerEvents as a, InputTriggerVariant as b, InputTriggerSize as c, InputTriggerLabelPlacement as d, InputTriggerCustomAppearance as e, FileInputTriggerCustomAppearance as f };

package/dist/list/index.cjs

@@ -1,395 +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/list/list.tsx
-var _react = require('react'); var _react2 = _interopRequireDefault(_react);
-var _reactnative = require('react-native');
-
-// src/components/list/list-context.ts
-
-var ListContext = _react.createContext.call(void 0, null);
-
-// src/components/list/list.style.ts
-
-var styles = _reactnative.StyleSheet.create({
-  list: {
-    flex: 1
-  },
-  item: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 12
-  },
-  content: {
-    flex: 1,
-    gap: 2
-  },
-  title: {
-    fontWeight: "500"
-  },
-  description: {
-    opacity: 0.7
-  },
-  disabled: {
-    opacity: 0.5
-  },
-  divider: {
-    height: 1,
-    marginLeft: 10
-  }
-});
-
-// src/components/list/list-divider.tsx
-
-
-var ListDivider = () => {
-  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  return /* @__PURE__ */ _react2.default.createElement(
-    _reactnative.View,
-    {
-      style: [styles.divider, { backgroundColor: theme.colors.foreground + "30" }]
-    }
-  );
-};
-var ListChildren = ({ children, showDivider }) => {
-  if (!showDivider) {
-    return /* @__PURE__ */ _react2.default.createElement(_react2.default.Fragment, null, children);
-  }
-  const childArray = _react.Children.toArray(children);
-  return /* @__PURE__ */ _react2.default.createElement(_react2.default.Fragment, null, childArray.map((child, index) => /* @__PURE__ */ _react2.default.createElement(_react2.default.Fragment, { key: index }, child, index < childArray.length - 1 && /* @__PURE__ */ _react2.default.createElement(ListDivider, null))));
-};
-
-// src/components/list/list.tsx
-var List = ({
-  children,
-  selectionMode = "none",
-  selectedKeys: controlledSelectedKeys,
-  defaultSelectedKeys = [],
-  showDivider = false,
-  isPressable = true,
-  isSelectable = false,
-  themeColor = "primary",
-  size = "md",
-  onSelectionChange,
-  style
-}) => {
-  const isControlled = controlledSelectedKeys !== void 0;
-  const [internalSelectedKeys, setInternalSelectedKeys] = _react.useState.call(void 0, defaultSelectedKeys);
-  const selectedKeys = isControlled ? controlledSelectedKeys : internalSelectedKeys;
-  const isSelected = _react.useCallback.call(void 0, 
-    (key) => {
-      return selectedKeys.includes(key);
-    },
-    [selectedKeys]
-  );
-  const toggleSelection = _react.useCallback.call(void 0, 
-    (key) => {
-      if (selectionMode === "none" || !isSelectable) {
-        return;
-      }
-      let newSelectedKeys;
-      if (selectionMode === "single") {
-        newSelectedKeys = isSelected(key) ? [] : [key];
-      } else {
-        newSelectedKeys = isSelected(key) ? selectedKeys.filter((k) => k !== key) : [...selectedKeys, key];
-      }
-      if (!isControlled) {
-        setInternalSelectedKeys(newSelectedKeys);
-      }
-      _optionalChain([onSelectionChange, 'optionalCall', _ => _(newSelectedKeys)]);
-    },
-    [
-      selectionMode,
-      isSelectable,
-      isSelected,
-      selectedKeys,
-      isControlled,
-      onSelectionChange
-    ]
-  );
-  const contextValue = _react.useMemo.call(void 0, 
-    () => ({
-      selectionMode,
-      selectedKeys,
-      isPressable,
-      isSelectable,
-      themeColor,
-      size,
-      showDivider,
-      toggleSelection,
-      isSelected
-    }),
-    [
-      selectionMode,
-      selectedKeys,
-      isPressable,
-      isSelectable,
-      themeColor,
-      size,
-      showDivider,
-      toggleSelection,
-      isSelected
-    ]
-  );
-  return /* @__PURE__ */ _react2.default.createElement(ListContext.Provider, { value: contextValue }, /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles.list, style] }, /* @__PURE__ */ _react2.default.createElement(ListChildren, { showDivider }, children)));
-};
-
-// src/components/list/list-item.tsx
-
-
-
-// src/components/list/list.hook.ts
-
-var useListItemSizeStyles = (size) => {
-  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  return _react.useMemo.call(void 0, () => {
-    const sizes = {
-      xs: {
-        paddingVertical: theme.spacing.sm,
-        paddingHorizontal: theme.spacing.sm,
-        titleSize: theme.fontSizes.xs,
-        descriptionSize: theme.fontSizes.xs
-      },
-      sm: {
-        paddingVertical: theme.spacing.sm,
-        paddingHorizontal: theme.spacing.md,
-        titleSize: theme.fontSizes.sm,
-        descriptionSize: theme.fontSizes.xs
-      },
-      md: {
-        paddingVertical: theme.spacing.md,
-        paddingHorizontal: theme.spacing.md,
-        titleSize: theme.fontSizes.md,
-        descriptionSize: theme.fontSizes.sm
-      },
-      lg: {
-        paddingVertical: theme.spacing.lg,
-        paddingHorizontal: theme.spacing.lg,
-        titleSize: theme.fontSizes.lg,
-        descriptionSize: theme.fontSizes.md
-      }
-    };
-    return sizes[size];
-  }, [size, theme]);
-};
-
-// src/components/list/list-item.tsx
-var _core = require('@xaui/core');
-var ListItem = ({
-  itemKey,
-  title,
-  description,
-  startContent,
-  endContent,
-  isDisabled = false,
-  isSelected: propIsSelected,
-  customAppearance,
-  onPress
-}) => {
-  const context = _react.useContext.call(void 0, ListContext);
-  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  const selectionMode = _nullishCoalesce(_optionalChain([context, 'optionalAccess', _2 => _2.selectionMode]), () => ( "none"));
-  const isPressable = _nullishCoalesce(_optionalChain([context, 'optionalAccess', _3 => _3.isPressable]), () => ( true));
-  const isSelectable = _nullishCoalesce(_optionalChain([context, 'optionalAccess', _4 => _4.isSelectable]), () => ( false));
-  const themeColor = _nullishCoalesce(_optionalChain([context, 'optionalAccess', _5 => _5.themeColor]), () => ( "primary"));
-  const size = _nullishCoalesce(_optionalChain([context, 'optionalAccess', _6 => _6.size]), () => ( "md"));
-  const isSelected = _nullishCoalesce(propIsSelected, () => ( (context ? context.isSelected(itemKey) : false)));
-  const sizeStyles = useListItemSizeStyles(size);
-  const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
-  const colorScheme = theme.colors[safeThemeColor];
-  const backgroundColor = isSelected ? colorScheme.container : "transparent";
-  const titleColor = isDisabled ? theme.colors.foreground + "50" : theme.colors.foreground;
-  const descriptionColor = isDisabled ? theme.colors.foreground + "50" : theme.colors.foreground + "99";
-  const handlePress = () => {
-    if (isDisabled) {
-      return;
-    }
-    if (isSelectable && selectionMode !== "none") {
-      _optionalChain([context, 'optionalAccess', _7 => _7.toggleSelection, 'call', _8 => _8(itemKey)]);
-    }
-    _optionalChain([onPress, 'optionalCall', _9 => _9({})]);
-  };
-  const renderTitle = () => {
-    if (typeof title === "string" || typeof title === "number") {
-      return /* @__PURE__ */ _react2.default.createElement(
-        _reactnative.Text,
-        {
-          style: [
-            styles.title,
-            { fontSize: sizeStyles.titleSize, color: titleColor },
-            _optionalChain([customAppearance, 'optionalAccess', _10 => _10.title])
-          ],
-          numberOfLines: 1
-        },
-        title
-      );
-    }
-    return title;
-  };
-  const renderDescription = () => {
-    if (!description) return null;
-    if (typeof description === "string" || typeof description === "number") {
-      return /* @__PURE__ */ _react2.default.createElement(
-        _reactnative.Text,
-        {
-          style: [
-            styles.description,
-            { fontSize: sizeStyles.descriptionSize, color: descriptionColor },
-            _optionalChain([customAppearance, 'optionalAccess', _11 => _11.description])
-          ],
-          numberOfLines: 2
-        },
-        description
-      );
-    }
-    return description;
-  };
-  const content = /* @__PURE__ */ _react2.default.createElement(
-    _reactnative.View,
-    {
-      style: [
-        styles.item,
-        {
-          paddingVertical: sizeStyles.paddingVertical,
-          paddingHorizontal: sizeStyles.paddingHorizontal,
-          backgroundColor
-        },
-        isDisabled && styles.disabled,
-        _optionalChain([customAppearance, 'optionalAccess', _12 => _12.container])
-      ]
-    },
-    startContent && /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: _optionalChain([customAppearance, 'optionalAccess', _13 => _13.content]) }, startContent),
-    /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles.content, _optionalChain([customAppearance, 'optionalAccess', _14 => _14.content])] }, renderTitle(), renderDescription()),
-    endContent && /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: _optionalChain([customAppearance, 'optionalAccess', _15 => _15.content]) }, endContent)
-  );
-  if (!isPressable) {
-    return content;
-  }
-  return /* @__PURE__ */ _react2.default.createElement(
-    _reactnative.Pressable,
-    {
-      onPress: handlePress,
-      disabled: isDisabled,
-      style: ({ pressed }) => [
-        pressed && !isDisabled && {
-          backgroundColor: theme.colors.foreground + "10"
-        }
-      ]
-    },
-    content
-  );
-};
-
-// src/components/list/list-builder.tsx
-
-
-function ListBuilder({
-  data,
-  keyExtractor,
-  renderItem,
-  selectionMode = "none",
-  selectedKeys: controlledSelectedKeys,
-  defaultSelectedKeys = [],
-  showDivider = false,
-  isPressable = true,
-  isSelectable = false,
-  themeColor = "primary",
-  size = "md",
-  onSelectionChange,
-  style,
-  flatListProps
-}) {
-  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
-  const isControlled = controlledSelectedKeys !== void 0;
-  const [internalSelectedKeys, setInternalSelectedKeys] = _react.useState.call(void 0, defaultSelectedKeys);
-  const selectedKeys = isControlled ? controlledSelectedKeys : internalSelectedKeys;
-  const isSelected = _react.useCallback.call(void 0, 
-    (key) => {
-      return selectedKeys.includes(key);
-    },
-    [selectedKeys]
-  );
-  const toggleSelection = _react.useCallback.call(void 0, 
-    (key) => {
-      if (selectionMode === "none" || !isSelectable) {
-        return;
-      }
-      let newSelectedKeys;
-      if (selectionMode === "single") {
-        newSelectedKeys = isSelected(key) ? [] : [key];
-      } else {
-        newSelectedKeys = isSelected(key) ? selectedKeys.filter((k) => k !== key) : [...selectedKeys, key];
-      }
-      if (!isControlled) {
-        setInternalSelectedKeys(newSelectedKeys);
-      }
-      _optionalChain([onSelectionChange, 'optionalCall', _16 => _16(newSelectedKeys)]);
-    },
-    [
-      selectionMode,
-      isSelectable,
-      isSelected,
-      selectedKeys,
-      isControlled,
-      onSelectionChange
-    ]
-  );
-  const contextValue = _react.useMemo.call(void 0, 
-    () => ({
-      selectionMode,
-      selectedKeys,
-      isPressable,
-      isSelectable,
-      themeColor,
-      size,
-      showDivider,
-      toggleSelection,
-      isSelected
-    }),
-    [
-      selectionMode,
-      selectedKeys,
-      isPressable,
-      isSelectable,
-      themeColor,
-      size,
-      showDivider,
-      toggleSelection,
-      isSelected
-    ]
-  );
-  const renderListItem = _react.useCallback.call(void 0, 
-    (item, index) => {
-      const element = renderItem(item, index);
-      if (!showDivider || index === data.length - 1) {
-        return /* @__PURE__ */ _react2.default.createElement(_react2.default.Fragment, { key: keyExtractor(item, index) }, element);
-      }
-      return /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { key: keyExtractor(item, index) }, element, /* @__PURE__ */ _react2.default.createElement(
-        _reactnative.View,
-        {
-          style: [
-            styles.divider,
-            { backgroundColor: theme.colors.foreground + "15" }
-          ]
-        }
-      ));
-    },
-    [data.length, keyExtractor, renderItem, showDivider, theme.colors.foreground]
-  );
-  return /* @__PURE__ */ _react2.default.createElement(ListContext.Provider, { value: contextValue }, /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles.list, style] }, /* @__PURE__ */ _react2.default.createElement(
-    _reactnative.FlatList,
-    {
-      data,
-      keyExtractor,
-      renderItem: ({ item, index }) => renderListItem(item, index),
-      ...flatListProps
-    }
-  )));
-}
-
-
-
-
-exports.List = List; exports.ListBuilder = ListBuilder; exports.ListItem = ListItem;