@particle-network/ui-native 0.1.4-beta.1 → 0.1.4-beta.2

package/dist/components/UXCheckbox/checkbox.js

@@ -1,13 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
 import { useMs } from "../../hooks/index.js";
-import { Icon } from "../../icons/index.js";
 import { disabledOpacity } from "../../theme/index.js";
 import { Flex } from "../layout/Flex/index.js";
 import { Text } from "../Text/index.js";
 import { UXPressable } from "../UXPressable/index.js";
 import { useCheckboxGroup } from "./context.js";
-const UXCheckbox = ({ size, color, defaultSelected = false, isSelected, children, value, onValueChange, isDisabled, ...props })=>{
+import { CheckboxOffIcon, CheckboxOnIcon } from "./icons.js";
+const UXCheckbox = ({ size, color, defaultSelected = false, isSelected, children, value, onValueChange, isDisabled, labelPlacement = 'right', ...props })=>{
     const { ms } = useMs();
     const [internalSelected, setInternalSelected] = useState(defaultSelected ?? isSelected);
     const groupContext = useCheckboxGroup();
@@ -21,6 +21,19 @@ const UXCheckbox = ({ size, color, defaultSelected = false, isSelected, children
         defaultSelected
     ]);
     const checkboxColor = color || groupContext?.color || 'primary';
+    const displayLabelPlacement = labelPlacement || groupContext?.labelPlacement || 'right';
+    const bgColor = useMemo(()=>{
+        if ('secondary' === checkboxColor) return 'tertiary';
+        return checkboxColor;
+    }, [
+        checkboxColor
+    ]);
+    const foregroundColor = useMemo(()=>{
+        if ('secondary' === checkboxColor) return 'foreground';
+        return 'white';
+    }, [
+        checkboxColor
+    ]);
     const checkboxIsDisabled = isDisabled || groupContext?.isDisabled;
     const checkboxSize = size || groupContext?.size || 'md';
     const handleSelectChange = ()=>{
@@ -32,23 +45,24 @@ const UXCheckbox = ({ size, color, defaultSelected = false, isSelected, children
     };
     const iconSize = useMemo(()=>{
         if ('sm' === checkboxSize) return ms(14);
-        if ('lg' === checkboxSize) return ms(20);
+        if ('lg' === checkboxSize) return ms(18);
         return ms(16);
     }, [
-        checkboxSize
+        checkboxSize,
+        ms
     ]);
     const labelVariant = useMemo(()=>{
-        if ('sm' === checkboxSize) return 'body3Bold';
-        if ('lg' === checkboxSize) return 'body1Bold';
-        return 'body2Bold';
+        if ('sm' === checkboxSize) return 'body3';
+        if ('lg' === checkboxSize) return 'body1';
+        return 'body2';
     }, [
         checkboxSize
     ]);
-    const gap = useMemo(()=>{
-        if ('sm' === checkboxSize) return 6;
-        return 8;
+    const flexDirection = useMemo(()=>{
+        if ('left' === displayLabelPlacement) return 'row-reverse';
+        return 'row';
     }, [
-        checkboxSize
+        displayLabelPlacement
     ]);
     return /*#__PURE__*/ jsx(UXPressable, {
         disabled: checkboxIsDisabled,
@@ -57,16 +71,16 @@ const UXCheckbox = ({ size, color, defaultSelected = false, isSelected, children
         },
         onPress: handleSelectChange,
         children: /*#__PURE__*/ jsxs(Flex, {
-            gap: gap,
+            direction: flexDirection,
+            gap: 8,
             items: "center",
             ...props,
             children: [
-                internalSelected ? /*#__PURE__*/ jsx(Icon, {
-                    name: "checkboxOn",
-                    color: checkboxColor,
+                internalSelected ? /*#__PURE__*/ jsx(CheckboxOnIcon, {
+                    color1: bgColor,
+                    color2: foregroundColor,
                     size: iconSize
-                }) : /*#__PURE__*/ jsx(Icon, {
-                    name: "checkboxOff",
+                }) : /*#__PURE__*/ jsx(CheckboxOffIcon, {
                     color: "secondary",
                     size: iconSize
                 }),

package/dist/components/UXCheckbox/icons.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { UXColor } from '@particle-network/ui-shared';
+interface CheckboxOnIconProps {
+    size?: number;
+    color1?: UXColor;
+    color2?: UXColor;
+}
+interface CheckboxOffIconProps {
+    size?: number;
+    color?: UXColor;
+}
+export declare const CheckboxOnIcon: ({ size, color1, color2 }: CheckboxOnIconProps) => React.JSX.Element;
+export declare const CheckboxOffIcon: ({ size, color }: CheckboxOffIconProps) => React.JSX.Element;
+export {};

package/dist/components/UXCheckbox/icons.js

@@ -0,0 +1,41 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import react_native_svg, { Path } from "react-native-svg";
+import { useColors } from "../../hooks/index.js";
+const CheckboxOnIcon = ({ size = 16, color1 = 'default', color2 = 'white' })=>{
+    const { getColor } = useColors();
+    const color1Value = getColor(color1);
+    const color2Value = getColor(color2);
+    return /*#__PURE__*/ jsxs(react_native_svg, {
+        fill: "none",
+        viewBox: "0 0 16 16",
+        width: size,
+        height: size,
+        children: [
+            /*#__PURE__*/ jsx(Path, {
+                d: "M2.46154 16H13.5385C14.8979 16 16 14.8979 16 13.5385V2.46154C16 1.10207 14.8979 0 13.5385 0H2.46154C1.10207 0 0 1.10207 0 2.46154V13.5385C0 14.8979 1.10207 16 2.46154 16Z",
+                fill: color1Value
+            }),
+            /*#__PURE__*/ jsx(Path, {
+                d: "M6.75547 9.24601L4.84436 7.3349C4.68139 7.17193 4.47399 7.09045 4.22214 7.09045C3.97028 7.09045 3.76288 7.17193 3.59991 7.3349C3.43695 7.49786 3.35547 7.70527 3.35547 7.95712C3.35547 8.20897 3.43695 8.41638 3.59991 8.57934L6.13325 11.1127C6.31102 11.2905 6.51843 11.3793 6.75547 11.3793C6.99251 11.3793 7.19991 11.2905 7.37769 11.1127L12.3999 6.09045C12.5629 5.92749 12.6444 5.72008 12.6444 5.46823C12.6444 5.21638 12.5629 5.00897 12.3999 4.84601C12.237 4.68304 12.0295 4.60156 11.7777 4.60156C11.5258 4.60156 11.3184 4.68304 11.1555 4.84601L6.75547 9.24601Z",
+                fill: color2Value
+            })
+        ]
+    });
+};
+const CheckboxOffIcon = ({ size = 16, color = 'default' })=>{
+    const { getColor } = useColors();
+    const colorValue = getColor(color);
+    return /*#__PURE__*/ jsx(react_native_svg, {
+        fill: "none",
+        viewBox: "0 0 16 16",
+        width: size,
+        height: size,
+        children: /*#__PURE__*/ jsx(Path, {
+            d: "M2.46191 0.615234H13.5381C14.5577 0.615234 15.3848 1.44231 15.3848 2.46191V13.5381C15.3848 14.5577 14.5577 15.3848 13.5381 15.3848H2.46191C1.44231 15.3848 0.615234 14.5577 0.615234 13.5381V2.46191C0.615234 1.44231 1.44231 0.615234 2.46191 0.615234Z",
+            stroke: colorValue,
+            strokeWidth: 1.23077
+        })
+    });
+};
+export { CheckboxOffIcon, CheckboxOnIcon };

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

@@ -1,6 +1,6 @@
-import type { UXForegroundColor } from '@particle-network/ui-shared';
 export interface UXCheckboxCommonProps {
-    color?: UXForegroundColor;
+    color?: 'secondary' | 'primary' | 'success' | 'danger' | 'alert' | 'warning' | 'gold' | 'bullish' | 'bearish';
     size?: 'sm' | 'md' | 'lg';
     isDisabled?: boolean;
+    labelPlacement?: 'left' | 'right';
 }

package/dist/icons/index.js

@@ -6,37 +6,6 @@ const Icon = ({ name, size = 16, color = 'default', ...props })=>{
     const { getColor } = useColors();
     const colorValue = getColor(color);
     switch(name){
-        case 'checkboxOff':
-            return /*#__PURE__*/ jsx(react_native_svg, {
-                fill: "none",
-                height: size,
-                viewBox: "0 0 16 16",
-                width: size,
-                ...props,
-                children: /*#__PURE__*/ jsx(Path, {
-                    d: "M2.46191 0.615234H13.5381C14.5577 0.615234 15.3848 1.44231 15.3848 2.46191V13.5381C15.3848 14.5577 14.5577 15.3848 13.5381 15.3848H2.46191C1.44231 15.3848 0.615234 14.5577 0.615234 13.5381V2.46191C0.615234 1.44231 1.44231 0.615234 2.46191 0.615234Z",
-                    stroke: colorValue,
-                    strokeWidth: 1.23077
-                })
-            });
-        case 'checkboxOn':
-            return /*#__PURE__*/ jsxs(react_native_svg, {
-                fill: "none",
-                height: size,
-                viewBox: "0 0 16 16",
-                width: size,
-                ...props,
-                children: [
-                    /*#__PURE__*/ jsx(Path, {
-                        d: "M2.46154 16H13.5385C14.8979 16 16 14.8979 16 13.5385V2.46154C16 1.10207 14.8979 0 13.5385 0H2.46154C1.10207 0 0 1.10207 0 2.46154V13.5385C0 14.8979 1.10207 16 2.46154 16Z",
-                        fill: colorValue
-                    }),
-                    /*#__PURE__*/ jsx(Path, {
-                        d: "M6.75547 9.24601L4.84436 7.3349C4.68139 7.17193 4.47399 7.09045 4.22214 7.09045C3.97028 7.09045 3.76288 7.17193 3.59991 7.3349C3.43695 7.49786 3.35547 7.70527 3.35547 7.95712C3.35547 8.20897 3.43695 8.41638 3.59991 8.57934L6.13325 11.1127C6.31102 11.2905 6.51843 11.3793 6.75547 11.3793C6.99251 11.3793 7.19991 11.2905 7.37769 11.1127L12.3999 6.09045C12.5629 5.92749 12.6444 5.72008 12.6444 5.46823C12.6444 5.21638 12.5629 5.00897 12.3999 4.84601C12.237 4.68304 12.0295 4.60156 11.7777 4.60156C11.5258 4.60156 11.3184 4.68304 11.1555 4.84601L6.75547 9.24601Z",
-                        fill: "#ffffff"
-                    })
-                ]
-            });
         case 'check':
             return /*#__PURE__*/ jsx(react_native_svg, {
                 width: size,

package/dist/icons/types.d.ts

@@ -1,7 +1,7 @@
 import type { SvgProps } from 'react-native-svg';
 import type { UXForegroundColor } from '@particle-network/ui-shared';
 export type IconProps = SvgProps & {
-    name: 'checkboxOff' | 'checkboxOn' | 'check' | 'close' | 'dot' | 'radioOff' | 'radioOn' | 'question' | 'arrow-right';
+    name: 'check' | 'close' | 'dot' | 'radioOff' | 'radioOn' | 'question' | 'arrow-right';
     size?: number;
     color?: UXForegroundColor;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-native",
-  "version": "0.1.4-beta.1",
+  "version": "0.1.4-beta.2",
   "main": "./entry.js",
   "react-native": "./dist/index.js",
   "module": "./dist/index.js",
@@ -90,9 +90,9 @@
     "unfetch": "^4.2.0",
     "vite": "^6.3.5",
     "zustand": "^5.0.8",
+    "@particle-network/lintstaged-config": "0.1.0",
     "@particle-network/icons": "0.1.3-beta.3",
-    "@particle-network/eslint-config": "0.3.0",
-    "@particle-network/lintstaged-config": "0.1.0"
+    "@particle-network/eslint-config": "0.3.0"
   },
   "overrides": {
     "react-docgen-typescript": "2.2.2",