@xaui/native 0.0.20 → 0.0.21

package/dist/list/index.cjs

@@ -0,0 +1,470 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/list/index.ts
+var list_exports = {};
+__export(list_exports, {
+  List: () => List,
+  ListBuilder: () => ListBuilder,
+  ListItem: () => ListItem
+});
+module.exports = __toCommonJS(list_exports);
+
+// src/components/list/list.tsx
+var import_react8 = __toESM(require("react"), 1);
+var import_react_native6 = require("react-native");
+
+// src/components/list/list-context.ts
+var import_react = require("react");
+var ListContext = (0, import_react.createContext)(null);
+
+// src/components/list/list.style.ts
+var import_react_native = require("react-native");
+var styles = import_react_native.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 import_react7 = __toESM(require("react"), 1);
+var import_react_native5 = require("react-native");
+
+// src/core/theme-context.tsx
+var import_react5 = __toESM(require("react"), 1);
+var import_react_native3 = require("react-native");
+var import_theme = require("@xaui/core/theme");
+var import_palette = require("@xaui/core/palette");
+
+// src/core/portal/portal.tsx
+var import_react3 = require("react");
+
+// src/core/portal/portal-context.ts
+var import_react2 = require("react");
+var PortalContext = (0, import_react2.createContext)(null);
+
+// src/core/portal/portal-host.tsx
+var import_react4 = __toESM(require("react"), 1);
+var import_react_native2 = require("react-native");
+var hostStyles = import_react_native2.StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});
+
+// src/core/theme-context.tsx
+var XUIThemeContext = (0, import_react5.createContext)(null);
+
+// src/core/theme-hooks.ts
+var import_react6 = require("react");
+var import_react_native4 = require("react-native");
+function useXUITheme() {
+  const theme = (0, import_react6.useContext)(XUIThemeContext);
+  if (!theme) {
+    throw new Error("useXUITheme must be used within XUIProvider");
+  }
+  return theme;
+}
+
+// src/core/index.ts
+var import_theme2 = require("@xaui/core/theme");
+
+// src/components/list/list-divider.tsx
+var ListDivider = () => {
+  const theme = useXUITheme();
+  return /* @__PURE__ */ import_react7.default.createElement(
+    import_react_native5.View,
+    {
+      style: [styles.divider, { backgroundColor: theme.colors.foreground + "30" }]
+    }
+  );
+};
+var ListChildren = ({ children, showDivider }) => {
+  if (!showDivider) {
+    return /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, children);
+  }
+  const childArray = import_react7.Children.toArray(children);
+  return /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, childArray.map((child, index) => /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, { key: index }, child, index < childArray.length - 1 && /* @__PURE__ */ import_react7.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] = (0, import_react8.useState)(defaultSelectedKeys);
+  const selectedKeys = isControlled ? controlledSelectedKeys : internalSelectedKeys;
+  const isSelected = (0, import_react8.useCallback)(
+    (key) => {
+      return selectedKeys.includes(key);
+    },
+    [selectedKeys]
+  );
+  const toggleSelection = (0, import_react8.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 = (0, import_react8.useMemo)(
+    () => ({
+      selectionMode,
+      selectedKeys,
+      isPressable,
+      isSelectable,
+      themeColor,
+      size,
+      showDivider,
+      toggleSelection,
+      isSelected
+    }),
+    [
+      selectionMode,
+      selectedKeys,
+      isPressable,
+      isSelectable,
+      themeColor,
+      size,
+      showDivider,
+      toggleSelection,
+      isSelected
+    ]
+  );
+  return /* @__PURE__ */ import_react8.default.createElement(ListContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react8.default.createElement(import_react_native6.View, { style: [styles.list, style] }, /* @__PURE__ */ import_react8.default.createElement(ListChildren, { showDivider }, children)));
+};
+
+// src/components/list/list-item.tsx
+var import_react10 = __toESM(require("react"), 1);
+var import_react_native7 = require("react-native");
+
+// src/components/list/list.hook.ts
+var import_react9 = require("react");
+var useListItemSizeStyles = (size) => {
+  const theme = useXUITheme();
+  return (0, import_react9.useMemo)(() => {
+    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 import_core3 = require("@xaui/core");
+var ListItem = ({
+  itemKey,
+  title,
+  description,
+  startContent,
+  endContent,
+  isDisabled = false,
+  isSelected: propIsSelected,
+  customAppearance,
+  onPress
+}) => {
+  const context = (0, import_react10.useContext)(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 = (0, import_core3.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__ */ import_react10.default.createElement(
+        import_react_native7.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__ */ import_react10.default.createElement(
+        import_react_native7.Text,
+        {
+          style: [
+            styles.description,
+            { fontSize: sizeStyles.descriptionSize, color: descriptionColor },
+            customAppearance?.description
+          ],
+          numberOfLines: 2
+        },
+        description
+      );
+    }
+    return description;
+  };
+  const content = /* @__PURE__ */ import_react10.default.createElement(
+    import_react_native7.View,
+    {
+      style: [
+        styles.item,
+        {
+          paddingVertical: sizeStyles.paddingVertical,
+          paddingHorizontal: sizeStyles.paddingHorizontal,
+          backgroundColor
+        },
+        isDisabled && styles.disabled,
+        customAppearance?.container
+      ]
+    },
+    startContent && /* @__PURE__ */ import_react10.default.createElement(import_react_native7.View, { style: customAppearance?.content }, startContent),
+    /* @__PURE__ */ import_react10.default.createElement(import_react_native7.View, { style: [styles.content, customAppearance?.content] }, renderTitle(), renderDescription()),
+    endContent && /* @__PURE__ */ import_react10.default.createElement(import_react_native7.View, { style: customAppearance?.content }, endContent)
+  );
+  if (!isPressable) {
+    return content;
+  }
+  return /* @__PURE__ */ import_react10.default.createElement(
+    import_react_native7.Pressable,
+    {
+      onPress: handlePress,
+      disabled: isDisabled,
+      style: ({ pressed }) => [
+        pressed && !isDisabled && {
+          backgroundColor: theme.colors.foreground + "10"
+        }
+      ]
+    },
+    content
+  );
+};
+
+// src/components/list/list-builder.tsx
+var import_react11 = __toESM(require("react"), 1);
+var import_react_native8 = require("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] = (0, import_react11.useState)(defaultSelectedKeys);
+  const selectedKeys = isControlled ? controlledSelectedKeys : internalSelectedKeys;
+  const isSelected = (0, import_react11.useCallback)(
+    (key) => {
+      return selectedKeys.includes(key);
+    },
+    [selectedKeys]
+  );
+  const toggleSelection = (0, import_react11.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 = (0, import_react11.useMemo)(
+    () => ({
+      selectionMode,
+      selectedKeys,
+      isPressable,
+      isSelectable,
+      themeColor,
+      size,
+      showDivider,
+      toggleSelection,
+      isSelected
+    }),
+    [
+      selectionMode,
+      selectedKeys,
+      isPressable,
+      isSelectable,
+      themeColor,
+      size,
+      showDivider,
+      toggleSelection,
+      isSelected
+    ]
+  );
+  const renderListItem = (0, import_react11.useCallback)(
+    (item, index) => {
+      const element = renderItem(item, index);
+      if (!showDivider || index === data.length - 1) {
+        return /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, { key: keyExtractor(item, index) }, element);
+      }
+      return /* @__PURE__ */ import_react11.default.createElement(import_react_native8.View, { key: keyExtractor(item, index) }, element, /* @__PURE__ */ import_react11.default.createElement(
+        import_react_native8.View,
+        {
+          style: [
+            styles.divider,
+            { backgroundColor: theme.colors.foreground + "15" }
+          ]
+        }
+      ));
+    },
+    [data.length, keyExtractor, renderItem, showDivider, theme.colors.foreground]
+  );
+  return /* @__PURE__ */ import_react11.default.createElement(ListContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react11.default.createElement(import_react_native8.View, { style: [styles.list, style] }, /* @__PURE__ */ import_react11.default.createElement(
+    import_react_native8.FlatList,
+    {
+      data,
+      keyExtractor,
+      renderItem: ({ item, index }) => renderListItem(item, index),
+      ...flatListProps
+    }
+  )));
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  List,
+  ListBuilder,
+  ListItem
+});

package/dist/list/index.d.cts

@@ -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.cjs';
+
+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.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.20",
+  "version": "0.0.21",
   "description": "Flutter-inspired React Native UI components with native animations powered by React Native Reanimated",
   "keywords": [
     "react-native",
@@ -151,6 +151,11 @@
       "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": [