@xaui/native 0.0.19 → 0.0.21

package/dist/list/index.d.ts

@@ -0,0 +1,188 @@
+import React, { ReactNode } from 'react';
+import * as react_native from 'react-native';
+import { ViewStyle, TextStyle, GestureResponderEvent } from 'react-native';
+import { T as ThemeColor, S as Size } from '../index-BOw6tbkc.js';
+
+type ListSelectionMode = 'single' | 'multiple' | 'none';
+type ListItemCustomAppearance = {
+    /**
+     * Custom styles for the item container
+     */
+    container?: ViewStyle;
+    /**
+     * Custom styles for the content container
+     */
+    content?: ViewStyle;
+    /**
+     * Custom styles for the title text
+     */
+    title?: TextStyle;
+    /**
+     * Custom styles for the description text
+     */
+    description?: TextStyle;
+};
+type ListItemProps = {
+    /**
+     * Unique key for the item (used for selection)
+     */
+    itemKey: string;
+    /**
+     * Title text for the ListItem
+     */
+    title: ReactNode;
+    /**
+     * Optional description text
+     */
+    description?: ReactNode;
+    /**
+     * Content to display at the start of the item
+     */
+    startContent?: ReactNode;
+    /**
+     * Content to display at the end of the item
+     */
+    endContent?: ReactNode;
+    /**
+     * Whether the item is disabled
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the item is selected
+     * @default false
+     */
+    isSelected?: boolean;
+    /**
+     * Custom appearance styles for item parts
+     */
+    customAppearance?: ListItemCustomAppearance;
+    /**
+     * Callback fired when the item is pressed
+     */
+    onPress?: (event: GestureResponderEvent) => void;
+};
+type ListProps = {
+    /**
+     * List items
+     */
+    children: ReactNode;
+    /**
+     * Selection mode for the list
+     * @default 'none'
+     */
+    selectionMode?: ListSelectionMode;
+    /**
+     * Controlled selected keys
+     */
+    selectedKeys?: string[];
+    /**
+     * Default selected keys (uncontrolled)
+     */
+    defaultSelectedKeys?: string[];
+    /**
+     * Whether to show dividers between items
+     * @default false
+     */
+    showDivider?: boolean;
+    /**
+     * Whether items are pressable
+     * @default true
+     */
+    isPressable?: boolean;
+    /**
+     * Whether items are selectable
+     * @default false
+     */
+    isSelectable?: boolean;
+    /**
+     * Theme color for selected items
+     * @default 'primary'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * Size of the list items
+     * @default 'md'
+     */
+    size?: Size;
+    /**
+     * Callback fired when selection changes
+     */
+    onSelectionChange?: (keys: string[]) => void;
+    /**
+     * Custom styles for the list container
+     */
+    style?: ViewStyle;
+};
+type ListBuilderProps<T> = {
+    /**
+     * Data array to render
+     */
+    data: T[];
+    /**
+     * Function to extract unique key from item
+     */
+    keyExtractor: (item: T, index: number) => string;
+    /**
+     * Function to render each item
+     */
+    renderItem: (item: T, index: number) => ReactNode;
+    /**
+     * Selection mode for the list
+     * @default 'none'
+     */
+    selectionMode?: ListSelectionMode;
+    /**
+     * Controlled selected keys
+     */
+    selectedKeys?: string[];
+    /**
+     * Default selected keys (uncontrolled)
+     */
+    defaultSelectedKeys?: string[];
+    /**
+     * Whether to show dividers between items
+     * @default false
+     */
+    showDivider?: boolean;
+    /**
+     * Whether items are pressable
+     * @default true
+     */
+    isPressable?: boolean;
+    /**
+     * Whether items are selectable
+     * @default false
+     */
+    isSelectable?: boolean;
+    /**
+     * Theme color for selected items
+     * @default 'primary'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * Size of the list items
+     * @default 'md'
+     */
+    size?: Size;
+    /**
+     * Callback fired when selection changes
+     */
+    onSelectionChange?: (keys: string[]) => void;
+    /**
+     * Custom styles for the list container
+     */
+    style?: ViewStyle;
+    /**
+     * FlatList props to pass through
+     */
+    flatListProps?: Omit<React.ComponentProps<typeof react_native.FlatList<T>>, 'data' | 'renderItem' | 'keyExtractor'>;
+};
+
+declare const List: React.FC<ListProps>;
+
+declare const ListItem: React.FC<ListItemProps>;
+
+declare function ListBuilder<T>({ data, keyExtractor, renderItem, selectionMode, selectedKeys: controlledSelectedKeys, defaultSelectedKeys, showDivider, isPressable, isSelectable, themeColor, size, onSelectionChange, style, flatListProps, }: ListBuilderProps<T>): React.JSX.Element;
+
+export { List, ListBuilder, type ListBuilderProps, ListItem, type ListItemCustomAppearance, type ListItemProps, type ListProps, type ListSelectionMode };

package/dist/list/index.js

@@ -0,0 +1,395 @@
+import "../chunk-DXXNBF5P.js";
+import {
+  useXUITheme
+} from "../chunk-LTKYHG5V.js";
+
+// src/components/list/list.tsx
+import React2, { useCallback, useMemo, useState } from "react";
+import { View as View2 } from "react-native";
+
+// src/components/list/list-context.ts
+import { createContext, useContext } from "react";
+var ListContext = createContext(null);
+
+// src/components/list/list.style.ts
+import { StyleSheet } from "react-native";
+var styles = 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
+import React, { Children } from "react";
+import { View } from "react-native";
+var ListDivider = () => {
+  const theme = useXUITheme();
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: [styles.divider, { backgroundColor: theme.colors.foreground + "30" }]
+    }
+  );
+};
+var ListChildren = ({ children, showDivider }) => {
+  if (!showDivider) {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+  }
+  const childArray = Children.toArray(children);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, childArray.map((child, index) => /* @__PURE__ */ React.createElement(React.Fragment, { key: index }, child, index < childArray.length - 1 && /* @__PURE__ */ React.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] = useState(defaultSelectedKeys);
+  const selectedKeys = isControlled ? controlledSelectedKeys : internalSelectedKeys;
+  const isSelected = useCallback(
+    (key) => {
+      return selectedKeys.includes(key);
+    },
+    [selectedKeys]
+  );
+  const toggleSelection = useCallback(
+    (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);
+      }
+      onSelectionChange?.(newSelectedKeys);
+    },
+    [
+      selectionMode,
+      isSelectable,
+      isSelected,
+      selectedKeys,
+      isControlled,
+      onSelectionChange
+    ]
+  );
+  const contextValue = useMemo(
+    () => ({
+      selectionMode,
+      selectedKeys,
+      isPressable,
+      isSelectable,
+      themeColor,
+      size,
+      showDivider,
+      toggleSelection,
+      isSelected
+    }),
+    [
+      selectionMode,
+      selectedKeys,
+      isPressable,
+      isSelectable,
+      themeColor,
+      size,
+      showDivider,
+      toggleSelection,
+      isSelected
+    ]
+  );
+  return /* @__PURE__ */ React2.createElement(ListContext.Provider, { value: contextValue }, /* @__PURE__ */ React2.createElement(View2, { style: [styles.list, style] }, /* @__PURE__ */ React2.createElement(ListChildren, { showDivider }, children)));
+};
+
+// src/components/list/list-item.tsx
+import React3, { useContext as useContext2 } from "react";
+import { Pressable, Text, View as View3 } from "react-native";
+
+// src/components/list/list.hook.ts
+import { useMemo as useMemo2 } from "react";
+var useListItemSizeStyles = (size) => {
+  const theme = useXUITheme();
+  return useMemo2(() => {
+    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
+import { getSafeThemeColor } from "@xaui/core";
+var ListItem = ({
+  itemKey,
+  title,
+  description,
+  startContent,
+  endContent,
+  isDisabled = false,
+  isSelected: propIsSelected,
+  customAppearance,
+  onPress
+}) => {
+  const context = useContext2(ListContext);
+  const theme = useXUITheme();
+  const selectionMode = context?.selectionMode ?? "none";
+  const isPressable = context?.isPressable ?? true;
+  const isSelectable = context?.isSelectable ?? false;
+  const themeColor = context?.themeColor ?? "primary";
+  const size = context?.size ?? "md";
+  const isSelected = propIsSelected ?? (context ? context.isSelected(itemKey) : false);
+  const sizeStyles = useListItemSizeStyles(size);
+  const safeThemeColor = getSafeThemeColor(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  const backgroundColor = isSelected ? colorScheme.background : "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") {
+      context?.toggleSelection(itemKey);
+    }
+    onPress?.({});
+  };
+  const renderTitle = () => {
+    if (typeof title === "string" || typeof title === "number") {
+      return /* @__PURE__ */ React3.createElement(
+        Text,
+        {
+          style: [
+            styles.title,
+            { fontSize: sizeStyles.titleSize, color: titleColor },
+            customAppearance?.title
+          ],
+          numberOfLines: 1
+        },
+        title
+      );
+    }
+    return title;
+  };
+  const renderDescription = () => {
+    if (!description) return null;
+    if (typeof description === "string" || typeof description === "number") {
+      return /* @__PURE__ */ React3.createElement(
+        Text,
+        {
+          style: [
+            styles.description,
+            { fontSize: sizeStyles.descriptionSize, color: descriptionColor },
+            customAppearance?.description
+          ],
+          numberOfLines: 2
+        },
+        description
+      );
+    }
+    return description;
+  };
+  const content = /* @__PURE__ */ React3.createElement(
+    View3,
+    {
+      style: [
+        styles.item,
+        {
+          paddingVertical: sizeStyles.paddingVertical,
+          paddingHorizontal: sizeStyles.paddingHorizontal,
+          backgroundColor
+        },
+        isDisabled && styles.disabled,
+        customAppearance?.container
+      ]
+    },
+    startContent && /* @__PURE__ */ React3.createElement(View3, { style: customAppearance?.content }, startContent),
+    /* @__PURE__ */ React3.createElement(View3, { style: [styles.content, customAppearance?.content] }, renderTitle(), renderDescription()),
+    endContent && /* @__PURE__ */ React3.createElement(View3, { style: customAppearance?.content }, endContent)
+  );
+  if (!isPressable) {
+    return content;
+  }
+  return /* @__PURE__ */ React3.createElement(
+    Pressable,
+    {
+      onPress: handlePress,
+      disabled: isDisabled,
+      style: ({ pressed }) => [
+        pressed && !isDisabled && {
+          backgroundColor: theme.colors.foreground + "10"
+        }
+      ]
+    },
+    content
+  );
+};
+
+// src/components/list/list-builder.tsx
+import React4, { useCallback as useCallback2, useMemo as useMemo3, useState as useState2 } from "react";
+import { FlatList, View as View4 } from "react-native";
+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 = useXUITheme();
+  const isControlled = controlledSelectedKeys !== void 0;
+  const [internalSelectedKeys, setInternalSelectedKeys] = useState2(defaultSelectedKeys);
+  const selectedKeys = isControlled ? controlledSelectedKeys : internalSelectedKeys;
+  const isSelected = useCallback2(
+    (key) => {
+      return selectedKeys.includes(key);
+    },
+    [selectedKeys]
+  );
+  const toggleSelection = useCallback2(
+    (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);
+      }
+      onSelectionChange?.(newSelectedKeys);
+    },
+    [
+      selectionMode,
+      isSelectable,
+      isSelected,
+      selectedKeys,
+      isControlled,
+      onSelectionChange
+    ]
+  );
+  const contextValue = useMemo3(
+    () => ({
+      selectionMode,
+      selectedKeys,
+      isPressable,
+      isSelectable,
+      themeColor,
+      size,
+      showDivider,
+      toggleSelection,
+      isSelected
+    }),
+    [
+      selectionMode,
+      selectedKeys,
+      isPressable,
+      isSelectable,
+      themeColor,
+      size,
+      showDivider,
+      toggleSelection,
+      isSelected
+    ]
+  );
+  const renderListItem = useCallback2(
+    (item, index) => {
+      const element = renderItem(item, index);
+      if (!showDivider || index === data.length - 1) {
+        return /* @__PURE__ */ React4.createElement(React4.Fragment, { key: keyExtractor(item, index) }, element);
+      }
+      return /* @__PURE__ */ React4.createElement(View4, { key: keyExtractor(item, index) }, element, /* @__PURE__ */ React4.createElement(
+        View4,
+        {
+          style: [
+            styles.divider,
+            { backgroundColor: theme.colors.foreground + "15" }
+          ]
+        }
+      ));
+    },
+    [data.length, keyExtractor, renderItem, showDivider, theme.colors.foreground]
+  );
+  return /* @__PURE__ */ React4.createElement(ListContext.Provider, { value: contextValue }, /* @__PURE__ */ React4.createElement(View4, { style: [styles.list, style] }, /* @__PURE__ */ React4.createElement(
+    FlatList,
+    {
+      data,
+      keyExtractor,
+      renderItem: ({ item, index }) => renderListItem(item, index),
+      ...flatListProps
+    }
+  )));
+}
+export {
+  List,
+  ListBuilder,
+  ListItem
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaui/native",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "description": "Flutter-inspired React Native UI components with native animations powered by React Native Reanimated",
   "keywords": [
     "react-native",
@@ -146,6 +146,16 @@
       "types": "./dist/card/index.d.ts",
       "import": "./dist/card/index.js",
       "require": "./dist/card/index.js"
+    },
+    "./input": {
+      "types": "./dist/input/index.d.ts",
+      "import": "./dist/input/index.js",
+      "require": "./dist/input/index.js"
+    },
+    "./list": {
+      "types": "./dist/list/index.d.ts",
+      "import": "./dist/list/index.js",
+      "require": "./dist/list/index.js"
     }
   },
   "files": [