@xaui/native 0.0.20 → 0.0.23

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/dist/menu/index.d.mts

@@ -0,0 +1,5 @@
+export { Menu } from './menu';
+export { MenuItem } from './menu-item';
+export type { MenuProps, MenuPosition, MenuCustomAppearance } from './menu.type';
+export type { MenuItemProps, MenuItemCustomAppearance } from './menu-item.type';
+//# sourceMappingURL=index.d.ts.map

package/dist/menu/index.d.ts

@@ -1,107 +1,5 @@
-import React, { ReactNode } from 'react';
-import { ViewStyle, GestureResponderEvent, TextStyle } from 'react-native';
-
-type MenuPosition = 'top' | 'bottom';
-type MenuCustomAppearance = {
-    /**
-     * Custom styles for the overlay container
-     */
-    overlay?: ViewStyle;
-    /**
-     * Custom styles for the menu container
-     */
-    container?: ViewStyle;
-    /**
-     * Custom styles for the menu content
-     */
-    content?: ViewStyle;
-};
-type MenuProps = {
-    /**
-     * Whether the Menu is currently visible.
-     */
-    visible: boolean;
-    /**
-     * The trigger element to open the menu from. This is the component that will trigger the menu display.
-     */
-    trigger: ReactNode;
-    /**
-     * Whether the menu should open at the top of the trigger or at its bottom.
-     * @default 'bottom'
-     */
-    position?: MenuPosition;
-    /**
-     * Callback called when Menu is dismissed. The `visible` prop needs to be updated when this is called.
-     */
-    onDismiss?: () => void;
-    /**
-     * Content of the Menu.
-     */
-    children: ReactNode;
-    /**
-     * Custom appearance styles for menu parts
-     */
-    customAppearance?: MenuCustomAppearance;
-    /**
-     * Maximum height of the scrollable menu content
-     * @default 280
-     */
-    maxHeight?: number;
-};
-
-declare const Menu: React.FC<MenuProps>;
-
-type MenuItemCustomAppearance = {
-    /**
-     * Custom styles for the item container
-     */
-    container?: ViewStyle;
-    /**
-     * Custom styles for the item content
-     */
-    content?: ViewStyle;
-    /**
-     * Custom styles for the title text
-     */
-    title?: TextStyle;
-};
-type MenuItemProps = {
-    /**
-     * Title text for the MenuItem.
-     */
-    title: 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. A disabled item is greyed out and onPress is not called on touch.
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * Sets min height with densed layout.
-     * @default false
-     */
-    dense?: boolean;
-    /**
-     * Function to execute on press.
-     */
-    onPress?: (e: GestureResponderEvent) => void;
-    /**
-     * Custom appearance styles for item parts
-     */
-    customAppearance?: MenuItemCustomAppearance;
-    /**
-     * Accessibility label for the item. This is read by the screen reader when the user taps the component.
-     */
-    accessibilityLabel?: string;
-};
-
-declare const MenuItem: React.FC<MenuItemProps>;
-
-export { Menu, type MenuCustomAppearance, MenuItem, type MenuItemCustomAppearance, type MenuItemProps, type MenuPosition, type MenuProps };
+export { Menu } from './menu';
+export { MenuItem } from './menu-item';
+export type { MenuProps, MenuPosition, MenuCustomAppearance } from './menu.type';
+export type { MenuItemProps, MenuItemCustomAppearance } from './menu-item.type';
+//# sourceMappingURL=index.d.ts.map