@particle-network/ui-native 0.1.3-beta.7 → 0.1.4-beta.0

package/dist/components/Text/text.js

@@ -6,7 +6,7 @@ import { Box, useBoxStyle } from "../layout/Box/index.js";
 import { HStack } from "../layout/HStack.js";
 import { useTextStyles } from "./text.style.js";
 const text_Text = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { variant = 'body2Bold', fontWeight, color = 'default', lineHeight, align, style, h1, h2, h3, body1, body1Bold, body2, body2Bold, body3, body3Bold, caption1, caption1Bold, underlineStyle, fullWidth, fullHeight, h, minH, maxH, w, minW, maxW, m, mt, mr, mb, ml, ms, me, mh, mv, p, pt, pr, pb, pl, ps, pe, ph, pv, borderStyle, border, borderTop, borderRight, borderBottom, borderLeft, borderStart, borderEnd, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderStartColor, borderEndColor, radius, topLeftRadius, topRightRadius, bottomLeftRadius, bottomRightRadius, topStartRadius, topEndRadius, bottomStartRadius, bottomEndRadius, position, top, right, bottom, left, start, end, bg, bgOpacity, opacity, zIndex, overflow, ...restProps } = props;
+    const { variant = 'body2Bold', fontWeight, color = 'default', lineHeight, align, style, h1, h2, h3, body1, body1Bold, body2, body2Bold, body3, body3Bold, caption1, caption1Bold, underlineStyle, fullWidth, fullHeight, h, minH, maxH, w, minW, maxW, m, mt, mr, mb, ml, ms, me, mh, mv, p, pt, pr, pb, pl, ps, pe, ph, pv, borderStyle, border, borderTop, borderRight, borderBottom, borderLeft, borderStart, borderEnd, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderStartColor, borderEndColor, radius, topLeftRadius, topRightRadius, bottomLeftRadius, bottomRightRadius, topStartRadius, topEndRadius, bottomStartRadius, bottomEndRadius, position, top, right, bottom, left, start, end, bg, bgOpacity, opacity, zIndex, overflow, shadow, ...restProps } = props;
     const [textWidth, setTextWidth] = useState(0);
     const { getColor } = useColors();
     const boxStyle = useBoxStyle({
@@ -71,7 +71,8 @@ const text_Text = /*#__PURE__*/ forwardRef((props, ref)=>{
         bgOpacity,
         opacity,
         zIndex,
-        overflow
+        overflow,
+        shadow
     });
     const { styles } = useTextStyles({
         variant,

package/dist/components/UXChip/styles.js

@@ -2,6 +2,7 @@ import { useMemo } from "react";
 import { StyleSheet } from "react-native";
 import { useColors, useMs } from "../../hooks/index.js";
 import { disabledOpacity } from "../../theme/index.js";
+const isCustomColor = (color)=>'string' == typeof color && color.startsWith('#');
 const useStyles = ({ size = 'md', color = 'default', variant = 'flat', isDisabled, bg })=>{
     const { getColor } = useColors();
     const { ms } = useMs();
@@ -22,8 +23,11 @@ const useStyles = ({ size = 'md', color = 'default', variant = 'flat', isDisable
         size
     ]);
     const textColor = useMemo(()=>{
-        if ('default' === color) return getColor('default');
-        if ('secondary' === color) return getColor('secondary');
+        if (isCustomColor(color)) {
+            if ('solid' === variant) return 'white';
+            return color;
+        }
+        if ('default' === color) return getColor('secondary');
         if ('solid' === variant) return getColor('white');
         return getColor(color);
     }, [
@@ -33,18 +37,20 @@ const useStyles = ({ size = 'md', color = 'default', variant = 'flat', isDisable
     ]);
     const backgroundColor = useMemo(()=>{
         if (bg) return getColor(bg);
+        if (isCustomColor(color)) {
+            if ('solid' === variant) return color;
+            return `${color}20`;
+        }
         if ('solid' === variant) {
             if ([
-                'default',
-                'secondary'
+                'default'
             ].includes(color)) return getColor('bg-200');
             return getColor(color);
         }
         if ('flat' === variant) {
             if ([
-                'default',
-                'secondary'
-            ].includes(color)) return getColor('bg-200');
+                'default'
+            ].includes(color)) return getColor('bg-300');
             return `${getColor(color)}20`;
         }
         return 'transparent';

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

@@ -2,7 +2,7 @@ import type React from 'react';
 import type { UXForegroundColor } from '@particle-network/ui-shared';
 import type { HStackProps } from '../layout/HStack';
 export interface UXChipProps extends HStackProps {
-    color?: UXForegroundColor;
+    color?: UXForegroundColor | `#${string}`;
     size?: 'sm' | 'md' | 'lg';
     variant?: 'solid' | 'flat';
     isDisabled?: boolean;

package/dist/components/layout/Box/box.js

@@ -3,7 +3,7 @@ import react, { forwardRef } from "react";
 import { View } from "react-native";
 import { useBoxStyle } from "./useBox.style.js";
 const Box = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { as, style, fullWidth, fullHeight, h, minH, maxH, w, minW, maxW, m, mt, mr, mb, ml, ms, me, mh, mv, p, pt, pr, pb, pl, ps, pe, ph, pv, borderStyle, border, borderTop, borderRight, borderBottom, borderLeft, borderStart, borderEnd, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderStartColor, borderEndColor, radius, topLeftRadius, topRightRadius, bottomLeftRadius, bottomRightRadius, topStartRadius, topEndRadius, bottomStartRadius, bottomEndRadius, position, top, right, bottom, left, start, end, bg, bgOpacity, opacity, zIndex, overflow, ...restProps } = props;
+    const { as, style, fullWidth, fullHeight, h, minH, maxH, w, minW, maxW, m, mt, mr, mb, ml, ms, me, mh, mv, p, pt, pr, pb, pl, ps, pe, ph, pv, borderStyle, border, borderTop, borderRight, borderBottom, borderLeft, borderStart, borderEnd, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderStartColor, borderEndColor, radius, topLeftRadius, topRightRadius, bottomLeftRadius, bottomRightRadius, topStartRadius, topEndRadius, bottomStartRadius, bottomEndRadius, position, top, right, bottom, left, start, end, bg, bgOpacity, opacity, zIndex, overflow, shadow, ...restProps } = props;
     const boxStyle = useBoxStyle({
         fullWidth,
         fullHeight,
@@ -66,7 +66,8 @@ const Box = /*#__PURE__*/ forwardRef((props, ref)=>{
         bgOpacity,
         opacity,
         zIndex,
-        overflow
+        overflow,
+        shadow
     });
     if (as) return /*#__PURE__*/ react.cloneElement(as, {
         ...restProps,

package/dist/components/layout/Box/useBox.style.js

@@ -1,10 +1,12 @@
 import { useColors, useMs, useRadius, useSpacing } from "../../../hooks/index.js";
+import { useShadow } from "../../../hooks/useShadow.js";
 const useBoxStyle = (props)=>{
-    const { fullWidth, fullHeight, h, minH, maxH, w, minW, maxW, m, mt, mr, mb, ml, ms, me, mh, mv, p, pt, pr, pb, pl, ps, pe, ph, pv, borderStyle, border, borderTop, borderRight, borderBottom, borderLeft, borderStart, borderEnd, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderStartColor, borderEndColor, radius, topLeftRadius, topRightRadius, bottomLeftRadius, bottomRightRadius, topStartRadius, topEndRadius, bottomStartRadius, bottomEndRadius, position, top, right, bottom, left, start, end, bg, bgOpacity, opacity, zIndex, overflow } = props;
+    const { fullWidth, fullHeight, h, minH, maxH, w, minW, maxW, m, mt, mr, mb, ml, ms, me, mh, mv, p, pt, pr, pb, pl, ps, pe, ph, pv, borderStyle, border, borderTop, borderRight, borderBottom, borderLeft, borderStart, borderEnd, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderStartColor, borderEndColor, radius, topLeftRadius, topRightRadius, bottomLeftRadius, bottomRightRadius, topStartRadius, topEndRadius, bottomStartRadius, bottomEndRadius, position, top, right, bottom, left, start, end, bg, bgOpacity, opacity, zIndex, overflow, shadow } = props;
     const { ms: uxms } = useMs();
     const { getColor } = useColors();
     const { getSpacing } = useSpacing();
     const { getRadius } = useRadius();
+    const { getShadow } = useShadow();
     const borderFunc = (value)=>{
         if ('number' == typeof value) return uxms(value);
         return value;
@@ -69,6 +71,7 @@ const useBoxStyle = (props)=>{
     styleObj.opacity = opacity;
     styleObj.zIndex = zIndex;
     styleObj.overflow = overflow;
+    styleObj.boxShadow = getShadow(shadow);
     const boxStyle = styleObj;
     return boxStyle;
 };

package/dist/components/layout/Box/useBox.type.d.ts

@@ -289,4 +289,5 @@ export interface UseBoxProps {
      * Shorthand for the `overflow` style property.
      */
     overflow?: ViewStyle['overflow'];
+    shadow?: 'default' | true;
 }

package/dist/config/config.default.js

@@ -42,7 +42,7 @@ const defaultComponentConfig = {
         bg: 'overlay',
         backdrop: {
             light: '#00000050',
-            dark: '#00000050'
+            dark: '#00000070'
         }
     },
     tabs: {

package/dist/hooks/useShadow.d.ts

@@ -0,0 +1,3 @@
+export declare function useShadow(): {
+    getShadow: (shadow: "default" | true | undefined) => string | undefined;
+};

package/dist/hooks/useShadow.js

@@ -0,0 +1,12 @@
+import { useTheme } from "./useTheme.js";
+function useShadow() {
+    const theme = useTheme();
+    return {
+        getShadow: (shadow)=>{
+            if (!shadow) return;
+            if (true === shadow) return theme.shadow.default;
+            return theme.shadow[shadow];
+        }
+    };
+}
+export { useShadow };

package/dist/theme/shadow.d.ts

@@ -0,0 +1,3 @@
+export declare const createShadow: (theme: "light" | "dark") => {
+    default: string;
+};

package/dist/theme/shadow.js

@@ -0,0 +1,9 @@
+const createShadow = (theme)=>{
+    if ('light' === theme) return {
+        default: '0px 2px 12px 0px rgba(23, 23, 28, 0.15)'
+    };
+    return {
+        default: '0px 2px 12px 0px rgba(0, 0, 0, 0.5)'
+    };
+};
+export { createShadow };

package/dist/theme/theme.js

@@ -1,5 +1,6 @@
 import { createColors } from "./colors.js";
 import { createRadius } from "./radius.js";
+import { createShadow } from "./shadow.js";
 import { createSpacing } from "./spacing.js";
 function createTheme(theme, dynamicColors, msFactor) {
     return {
@@ -7,6 +8,7 @@ function createTheme(theme, dynamicColors, msFactor) {
         colors: createColors(theme, dynamicColors),
         spacing: createSpacing(msFactor),
         radius: createRadius(msFactor),
+        shadow: createShadow(theme),
         msFactor
     };
 }

package/dist/types/theme.d.ts

@@ -49,6 +49,9 @@ export interface Theme {
     colors: ThemeColors;
     spacing: SpacingScale;
     radius: RadiusScale;
+    shadow: {
+        default: string;
+    };
     msFactor?: number;
 }
 export interface ThemeContextValue {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-native",
-  "version": "0.1.3-beta.7",
+  "version": "0.1.4-beta.0",
   "main": "./entry.js",
   "react-native": "./dist/index.js",
   "module": "./dist/index.js",
@@ -46,7 +46,7 @@
     "react-native-paper": "^5.14.5",
     "react-native-size-matters": "^0.4.2",
     "react-native-toast-message": "^2.3.3",
-    "@particle-network/ui-shared": "0.1.1-beta.0"
+    "@particle-network/ui-shared": "0.1.1"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
@@ -88,9 +88,9 @@
     "unfetch": "^4.2.0",
     "vite": "^6.3.5",
     "zustand": "^5.0.8",
-    "@particle-network/eslint-config": "0.2.0",
-    "@particle-network/lintstaged-config": "0.0.0",
-    "@particle-network/icons": "0.1.2-beta.7"
+    "@particle-network/eslint-config": "0.3.0",
+    "@particle-network/lintstaged-config": "0.1.0",
+    "@particle-network/icons": "0.1.3-beta.1"
   },
   "overrides": {
     "react-docgen-typescript": "2.2.2",