@particle-network/ui-native 0.0.11 → 0.0.12

package/dist/components/UXListBox/UXListBox.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { type Item, type UXListBoxProps } from './types';
+interface ListBoxContextValue {
+    selectedValues: Set<string>;
+    selectionMode?: 'single' | 'multiple';
+    disabledKeys?: Set<string>;
+    onItemPress: (key: string) => void;
+    onAction?: (key: string) => void;
+}
+export declare const ListBoxContext: React.Context<ListBoxContextValue>;
+export declare function UXListBox<T = Item>({ items, selectionMode, selectedValues: controlledselectedValues, disabledKeys, defaultselectedValues, onSelectionChange, onAction, disallowEmptySelection, 'aria-label': ariaLabel, children, }: UXListBoxProps<T>): React.JSX.Element;
+export {};

package/dist/components/UXListBox/UXListBox.js

@@ -0,0 +1,61 @@
+import { jsx } from "react/jsx-runtime";
+import react, { useState } from "react";
+import { ScrollView } from "react-native";
+const ListBoxContext = /*#__PURE__*/ react.createContext({
+    selectedValues: new Set(),
+    onItemPress: ()=>null
+});
+function UXListBox({ items, selectionMode, selectedValues: controlledselectedValues, disabledKeys, defaultselectedValues, onSelectionChange, onAction, disallowEmptySelection = false, 'aria-label': ariaLabel, children }) {
+    const [internalselectedValues, setInternalselectedValues] = useState(()=>{
+        if ('all' === defaultselectedValues) return new Set();
+        return defaultselectedValues || new Set();
+    });
+    const selectedValues = void 0 !== controlledselectedValues ? controlledselectedValues : internalselectedValues;
+    const isControlled = void 0 !== controlledselectedValues;
+    const handleItemPress = (key)=>{
+        if (onAction && !selectionMode) return void onAction(key);
+        if (selectionMode) {
+            const newselectedValues = new Set('all' === selectedValues ? [] : selectedValues);
+            if ('single' === selectionMode) if (newselectedValues.has(key)) {
+                if (!disallowEmptySelection) newselectedValues.clear();
+            } else {
+                newselectedValues.clear();
+                newselectedValues.add(key);
+            }
+            else if ('multiple' === selectionMode) if (newselectedValues.has(key)) {
+                if (!disallowEmptySelection || newselectedValues.size > 1) newselectedValues.delete(key);
+            } else newselectedValues.add(key);
+            if (!isControlled) setInternalselectedValues(newselectedValues);
+            onSelectionChange?.(newselectedValues);
+        }
+    };
+    const renderChildren = ()=>{
+        if (items && 'function' == typeof children) {
+            const itemsArray = Array.from(items);
+            return itemsArray.map((item)=>{
+                const child = children(item);
+                return /*#__PURE__*/ react.cloneElement(child, {
+                    key: child.key || item.key || item.value
+                });
+            });
+        }
+        return children;
+    };
+    const contextValue = {
+        selectedValues: 'all' === selectedValues ? new Set() : selectedValues,
+        selectionMode,
+        disabledKeys,
+        onItemPress: handleItemPress,
+        onAction
+    };
+    return /*#__PURE__*/ jsx(ListBoxContext.Provider, {
+        value: contextValue,
+        children: /*#__PURE__*/ jsx(ScrollView, {
+            showsVerticalScrollIndicator: false,
+            accessibilityRole: 'list',
+            accessibilityLabel: ariaLabel,
+            children: renderChildren()
+        })
+    });
+}
+export { ListBoxContext, UXListBox };

package/dist/components/UXListBox/UXListBoxItem.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { type UXListBoxItemProps } from './types';
+export declare const UXListBoxItem: React.FC<UXListBoxItemProps>;

package/dist/components/UXListBox/UXListBoxItem.js

@@ -0,0 +1,56 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { ms } from "react-native-size-matters";
+import CheckIcon from "../../icons/CheckIcon.js";
+import { HStack } from "../layout/HStack.js";
+import { Text } from "../Text/index.js";
+import { UXTouchableOpacity } from "../UXTouchableOpacity/index.js";
+import { ListBoxContext } from "./UXListBox.js";
+const disabledOpacity = 0.4;
+const UXListBoxItem = ({ value = '', startContent, isDisabled = false, onPress, children })=>{
+    const context = useContext(ListBoxContext);
+    const { selectedValues, selectionMode, disabledKeys, onItemPress } = context;
+    const isSelected = selectedValues.has(value);
+    const isItemDisabled = isDisabled || disabledKeys?.has(value);
+    const handlePress = ()=>{
+        if (isItemDisabled) return;
+        if (onPress) onPress();
+        else onItemPress(value);
+    };
+    return /*#__PURE__*/ jsxs(UXTouchableOpacity, {
+        radius: "sm",
+        ph: "md",
+        pv: "sm",
+        gap: 4,
+        items: "center",
+        justify: "between",
+        minH: 40,
+        disabled: isItemDisabled,
+        activeOpacity: 0.7,
+        accessibilityRole: "button",
+        accessibilityState: {
+            selected: isSelected,
+            disabled: isItemDisabled
+        },
+        onPress: handlePress,
+        children: [
+            /*#__PURE__*/ jsxs(HStack, {
+                gap: 4,
+                children: [
+                    startContent,
+                    /*#__PURE__*/ jsx(Text, {
+                        body1Bold: true,
+                        opacity: isItemDisabled ? disabledOpacity : 1,
+                        color: isSelected ? 'foreground' : 'secondary',
+                        children: children
+                    })
+                ]
+            }),
+            selectionMode && isSelected ? /*#__PURE__*/ jsx(CheckIcon, {
+                size: ms(16),
+                color: "foreground"
+            }) : null
+        ]
+    });
+};
+export { UXListBoxItem };

package/dist/components/UXListBox/UXListBoxSection.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { UXListBoxSectionProps } from './types';
+export declare const UXListBoxSection: React.FC<UXListBoxSectionProps>;

package/dist/components/UXListBox/UXListBoxSection.js

@@ -0,0 +1,15 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { VStack } from "../layout/VStack.js";
+import { Text } from "../Text/index.js";
+const UXListBoxSection = ({ title, children })=>/*#__PURE__*/ jsxs(VStack, {
+        children: [
+            /*#__PURE__*/ jsx(Text, {
+                body1Bold: true,
+                mt: "md",
+                children: title
+            }),
+            children
+        ]
+    });
+export { UXListBoxSection };

package/dist/components/UXListBox/index.d.ts

@@ -0,0 +1,4 @@
+export type { UXListBoxItemProps, UXListBoxProps, UXListBoxSectionProps } from './types';
+export { UXListBox } from './UXListBox';
+export { UXListBoxItem } from './UXListBoxItem';
+export { UXListBoxSection } from './UXListBoxSection';

package/dist/components/UXListBox/index.js

@@ -0,0 +1,4 @@
+import { UXListBox } from "./UXListBox.js";
+import { UXListBoxItem } from "./UXListBoxItem.js";
+import { UXListBoxSection } from "./UXListBoxSection.js";
+export { UXListBox, UXListBoxItem, UXListBoxSection };

package/dist/components/UXListBox/types.d.ts

@@ -0,0 +1,25 @@
+import { type ReactNode } from 'react';
+export type Item = Record<string, unknown>;
+export interface UXListBoxProps<T = Item> {
+    items?: Iterable<T>;
+    selectionMode?: 'single' | 'multiple';
+    selectedValues?: Set<string> | 'all';
+    disabledKeys?: Set<string>;
+    defaultselectedValues?: Set<string> | 'all';
+    onSelectionChange?: (keys: Set<string>) => void;
+    onAction?: (key: string) => void;
+    disallowEmptySelection?: boolean;
+    'aria-label'?: string;
+    children?: ReactNode | ((item: T) => ReactNode);
+}
+export interface UXListBoxSectionProps {
+    title: string;
+    children?: ReactNode;
+}
+export interface UXListBoxItemProps {
+    value?: string;
+    startContent?: ReactNode;
+    isDisabled?: boolean;
+    onPress?: () => void;
+    children?: ReactNode;
+}

package/dist/components/index.d.ts

@@ -13,6 +13,7 @@ export * from './UXCheckbox';
 export * from './UXChip';
 export * from './UXDivider';
 export * from './UXHint';
+export * from './UXListBox';
 export * from './UXModal';
 export * from './UXPressable';
 export * from './UXRadio';

package/dist/components/index.js

@@ -13,6 +13,7 @@ export * from "./UXCheckbox/index.js";
 export * from "./UXChip/index.js";
 export * from "./UXDivider/index.js";
 export * from "./UXHint/index.js";
+export * from "./UXListBox/index.js";
 export * from "./UXModal/index.js";
 export * from "./UXPressable/index.js";
 export * from "./UXRadio/index.js";

package/dist/icons/CheckIcon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { IconProps } from './types';
+declare const CheckIcon: React.FC<IconProps>;
+export default CheckIcon;

package/dist/icons/CheckIcon.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import react_native_svg, { Path } from "react-native-svg";
+import { useColors } from "../hooks/index.js";
+const CheckIcon_CheckIcon = ({ size = 16, color = 'default', ...props })=>{
+    const { getColor } = useColors();
+    return /*#__PURE__*/ jsx(react_native_svg, {
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        ...props,
+        children: /*#__PURE__*/ jsx(Path, {
+            d: "M19.3281 6.28711C19.7108 5.90439 20.3302 5.9044 20.7129 6.28711C21.0956 6.66983 21.0956 7.28916 20.7129 7.67188L10.042 18.3389C10.0336 18.3479 10.0264 18.3584 10.0176 18.3672C9.82525 18.5574 9.57459 18.6514 9.32422 18.6514C9.07383 18.6513 8.82312 18.5555 8.63281 18.3652L3.28711 13.0186C2.90448 12.6358 2.90442 12.0165 3.28711 11.6338C3.66982 11.2513 4.28923 11.2512 4.67188 11.6338L9.32422 16.2891L19.3281 6.28711Z",
+            fill: getColor(color)
+        })
+    });
+};
+const CheckIcon = CheckIcon_CheckIcon;
+export { CheckIcon as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-native",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "license": "MIT",
   "main": "./entry.js",
   "react-native": "./dist/index.js",
@@ -29,7 +29,8 @@
     "build": "rslib build",
     "lint": "eslint . --no-error-on-unmatched-pattern --quiet",
     "lint:fix": "eslint . --fix --no-error-on-unmatched-pattern --quiet",
-    "clean": "rm -rf .turbo node_modules dist"
+    "clean": "rm -rf .turbo node_modules dist",
+    "deploy:dev": "sh ./scripts/deploy-dev.sh"
   },
   "files": [
     "dist",
@@ -53,6 +54,7 @@
     "@particle-network/ui-shared": "*",
     "ahooks": "^3.9.4",
     "expo-haptics": "^14.1.4",
+    "react-native-paper": "^5.14.5",
     "react-native-size-matters": "^0.4.2"
   },
   "devDependencies": {
@@ -88,7 +90,6 @@
     "react-dom": "19.0.0",
     "react-native": "0.79.5",
     "react-native-gesture-handler": "~2.24.0",
-    "react-native-paper": "^5.14.5",
     "react-native-reanimated": "~3.17.4",
     "react-native-safe-area-context": "5.4.0",
     "react-native-svg": "15.11.2",