@particle-network/ui-native 0.0.2

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

@@ -0,0 +1,141 @@
+import { useMemo } from "react";
+import { ms as external_react_native_size_matters_ms } from "react-native-size-matters";
+import { useColors, useRadius, useSpacing } from "../../../hooks/index.js";
+const borderFunc = (value)=>{
+    if ('number' == typeof value) return external_react_native_size_matters_ms(value);
+    return value;
+};
+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 { getColor } = useColors();
+    const { getSpacing } = useSpacing();
+    const { getRadius } = useRadius();
+    const boxStyle = useMemo(()=>{
+        const styleObj = {};
+        styleObj.width = fullWidth ? '100%' : getSpacing(w);
+        styleObj.height = fullHeight ? '100%' : getSpacing(h);
+        styleObj.minHeight = getSpacing(minH);
+        styleObj.maxHeight = getSpacing(maxH);
+        styleObj.minWidth = getSpacing(minW);
+        styleObj.maxWidth = getSpacing(maxW);
+        styleObj.margin = getSpacing(m);
+        styleObj.marginTop = getSpacing(mt);
+        styleObj.marginRight = getSpacing(mr);
+        styleObj.marginBottom = getSpacing(mb);
+        styleObj.marginLeft = getSpacing(ml);
+        styleObj.marginStart = getSpacing(ms);
+        styleObj.marginEnd = getSpacing(me);
+        styleObj.marginHorizontal = getSpacing(mh);
+        styleObj.marginVertical = getSpacing(mv);
+        styleObj.padding = getSpacing(p);
+        styleObj.paddingTop = getSpacing(pt);
+        styleObj.paddingRight = getSpacing(pr);
+        styleObj.paddingBottom = getSpacing(pb);
+        styleObj.paddingLeft = getSpacing(pl);
+        styleObj.paddingStart = getSpacing(ps);
+        styleObj.paddingEnd = getSpacing(pe);
+        styleObj.paddingHorizontal = getSpacing(ph);
+        styleObj.paddingVertical = getSpacing(pv);
+        styleObj.borderStyle = borderStyle;
+        styleObj.borderWidth = borderFunc(border);
+        styleObj.borderTopWidth = borderFunc(borderTop);
+        styleObj.borderRightWidth = borderFunc(borderRight);
+        styleObj.borderBottomWidth = borderFunc(borderBottom);
+        styleObj.borderLeftWidth = borderFunc(borderLeft);
+        styleObj.borderStartWidth = borderFunc(borderStart);
+        styleObj.borderEndWidth = borderFunc(borderEnd);
+        styleObj.borderColor = getColor(borderColor);
+        styleObj.borderTopColor = getColor(borderTopColor);
+        styleObj.borderRightColor = getColor(borderRightColor);
+        styleObj.borderBottomColor = getColor(borderBottomColor);
+        styleObj.borderLeftColor = getColor(borderLeftColor);
+        styleObj.borderStartColor = getColor(borderStartColor);
+        styleObj.borderEndColor = getColor(borderEndColor);
+        styleObj.borderRadius = getRadius(radius);
+        styleObj.borderTopLeftRadius = getRadius(topLeftRadius);
+        styleObj.borderTopRightRadius = getRadius(topRightRadius);
+        styleObj.borderBottomLeftRadius = getRadius(bottomLeftRadius);
+        styleObj.borderBottomRightRadius = getRadius(bottomRightRadius);
+        styleObj.borderTopStartRadius = getRadius(topStartRadius);
+        styleObj.borderTopEndRadius = getRadius(topEndRadius);
+        styleObj.borderBottomStartRadius = getRadius(bottomStartRadius);
+        styleObj.borderBottomEndRadius = getRadius(bottomEndRadius);
+        styleObj.position = position;
+        styleObj.top = getSpacing(top);
+        styleObj.right = getSpacing(right);
+        styleObj.bottom = getSpacing(bottom);
+        styleObj.left = getSpacing(left);
+        styleObj.start = getSpacing(start);
+        styleObj.end = getSpacing(end);
+        styleObj.backgroundColor = getColor(bg, bgOpacity);
+        styleObj.opacity = opacity;
+        styleObj.zIndex = zIndex;
+        styleObj.overflow = overflow;
+        return styleObj;
+    }, [
+        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
+    ]);
+    return boxStyle;
+};
+export { useBoxStyle };

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

@@ -0,0 +1,292 @@
+import type { ViewStyle } from 'react-native';
+import type { RadiusType, SpacingType, UXColor } from '@particle-network/ui-shared';
+export interface UseBoxProps {
+    /**
+     * Shorthand for the `width=100%` style property.
+     */
+    fullWidth?: boolean;
+    /**
+     * Shorthand for the `height=100%` style property.
+     */
+    fullHeight?: boolean;
+    /**
+     * Shorthand for the `height` style property.
+     */
+    h?: SpacingType;
+    /**
+     * Shorthand for the `minHeight` style property.
+     */
+    minH?: SpacingType;
+    /**
+     * Shorthand for the `maxHeight` style property.
+     */
+    maxH?: SpacingType;
+    /**
+     * Shorthand for the `width` style property.
+     */
+    w?: SpacingType;
+    /**
+     * Shorthand for the `minWidth` style property.
+     */
+    minW?: SpacingType;
+    /**
+     * Shorthand for the `maxWidth` style property.
+     */
+    maxW?: SpacingType;
+    /**
+     * Shorthand for the `margin` style property.
+     */
+    m?: SpacingType;
+    /**
+     * Shorthand for the `marginTop` style property.
+     */
+    mt?: SpacingType;
+    /**
+     * Shorthand for the `marginRight` style property.
+     */
+    mr?: SpacingType;
+    /**
+     * Shorthand for the `marginBottom` style property.
+     */
+    mb?: SpacingType;
+    /**
+     * Shorthand for the `marginLeft` style property.
+     */
+    ml?: SpacingType;
+    /**
+     * Shorthand for the `marginStart` style property.
+     */
+    ms?: SpacingType;
+    /**
+     * Shorthand for the `marginEnd` style property.
+     */
+    me?: SpacingType;
+    /**
+     * Shorthand for the `marginHorizontal` style property.
+     */
+    mh?: SpacingType;
+    /**
+     * Shorthand for the `marginVertical` style property.
+     */
+    mv?: SpacingType;
+    /**
+     * Shorthand for the `padding` style property.
+     */
+    p?: SpacingType;
+    /**
+     * Shorthand for the `paddingTop` style property.
+     */
+    pt?: SpacingType;
+    /**
+     * Shorthand for the `paddingRight` style property.
+     */
+    pr?: SpacingType;
+    /**
+     * Shorthand for the `paddingBottom` style property.
+     */
+    pb?: SpacingType;
+    /**
+     * Shorthand for the `paddingLeft` style property.
+     */
+    pl?: SpacingType;
+    /**
+     * Shorthand for the `paddingStart` style property.
+     */
+    ps?: SpacingType;
+    /**
+     * Shorthand for the `paddingEnd` style property.
+     */
+    pe?: SpacingType;
+    /**
+     * Shorthand for the `paddingHorizontal` style property.
+     */
+    ph?: SpacingType;
+    /**
+     * Shorthand for the `paddingVertical` style property.
+     */
+    pv?: SpacingType;
+    /**
+     * Shorthand for the `borderStyle` style property.
+     */
+    borderStyle?: ViewStyle['borderStyle'];
+    /**
+     * Shorthand for the `borderWidth` style property.
+     */
+    border?: ViewStyle['borderWidth'];
+    /**
+     * Shorthand for the `borderTopWidth` style property.
+     */
+    borderTop?: ViewStyle['borderTopWidth'];
+    /**
+     * Shorthand for the `borderRightWidth` style property.
+     */
+    borderRight?: ViewStyle['borderRightWidth'];
+    /**
+     * Shorthand for the `borderBottomWidth` style property.
+     */
+    borderBottom?: ViewStyle['borderBottomWidth'];
+    /**
+     * Shorthand for the `borderLeftWidth` style property.
+     */
+    borderLeft?: ViewStyle['borderLeftWidth'];
+    /**
+     * Shorthand for the `borderStartWidth` style property.
+     */
+    borderStart?: ViewStyle['borderStartWidth'];
+    /**
+     * Shorthand for the `borderEndWidth` style property.
+     */
+    borderEnd?: ViewStyle['borderEndWidth'];
+    /**
+     * Shorthand for the `borderColor` style property.
+     *
+     * | color      | dark      | light     |
+     * | :--------- | :-------- | :-------- |
+     * | default    | #FFFFFF   | #000000   |
+     * | foreground | #FFFFFF   | #000000   |
+     * | white      | #FFFFFF   | #FFFFFF  |
+     * | secondary  | #A1A1AA   | #767A80   |
+     * | tertiary   | #4E4E56   | #C0C0C9   |
+     * | primary    | #D745FF   | #000000   |
+     * | success    | #45B167   | #2E9F4A   |
+     * | danger     | #E84A5A   | #DE4A40   |
+     * | alert      | #F57733   | #E65E16   |
+     * | warning    | #FF9821   | #FF9821   |
+     * | gold       | #FFB800   | #F38300   |
+     */
+    borderColor?: UXColor;
+    /**
+     * Shorthand for the `borderTopColor` style property.
+     */
+    borderTopColor?: UXColor;
+    /**
+     * Shorthand for the `borderRightColor` style property.
+     */
+    borderRightColor?: UXColor;
+    /**
+     * Shorthand for the `borderBottomColor` style property.
+     */
+    borderBottomColor?: UXColor;
+    /**
+     * Shorthand for the `borderLeftColor` style property.
+     */
+    borderLeftColor?: UXColor;
+    /**
+     * Shorthand for the `borderStartColor` style property.
+     */
+    borderStartColor?: UXColor;
+    /**
+     * Shorthand for the `borderEndColor` style property.
+     */
+    borderEndColor?: UXColor;
+    /**
+     * Shorthand for the `borderRadius` style property.
+     */
+    radius?: RadiusType;
+    /**
+     * Shorthand for the `borderTopLeftRadius` style property.
+     */
+    topLeftRadius?: RadiusType;
+    /**
+     * Shorthand for the `borderTopRightRadius` style property.
+     */
+    topRightRadius?: RadiusType;
+    /**
+     * Shorthand for the `borderBottomLeftRadius` style property.
+     */
+    bottomLeftRadius?: RadiusType;
+    /**
+     * Shorthand for the `borderBottomRightRadius` style property.
+     */
+    bottomRightRadius?: RadiusType;
+    /**
+     * Shorthand for the `borderTopStartRadius` style property.
+     */
+    topStartRadius?: RadiusType;
+    /**
+     * Shorthand for the `borderTopEndRadius` style property.
+     */
+    topEndRadius?: RadiusType;
+    /**
+     * Shorthand for the `borderBottomStartRadius` style property.
+     */
+    bottomStartRadius?: RadiusType;
+    /**
+     * Shorthand for the `borderBottomEndRadius` style property.
+     */
+    bottomEndRadius?: RadiusType;
+    /**
+     * Shorthand for the `position` style property.
+     */
+    position?: ViewStyle['position'];
+    /**
+     * Shorthand for the `top` style property.
+     */
+    top?: SpacingType;
+    /**
+     * Shorthand for the `right` style property.
+     */
+    right?: SpacingType;
+    /**
+     * Shorthand for the `bottom` style property.
+     */
+    bottom?: SpacingType;
+    /**
+     * Shorthand for the `left` style property.
+     */
+    left?: SpacingType;
+    /**
+     * Shorthand for the `start` style property.
+     */
+    start?: SpacingType;
+    /**
+     * Shorthand for the `end` style property.
+     */
+    end?: SpacingType;
+    /**
+     * Shorthand for the `backgroundColor` style property.
+     *
+     * - Background Color
+     * | color      |  dark        | light       |
+     * | :--------- | :----------- | :---------- |
+     * | bg-default | #000000      | #FFFFFF     |
+     * | bg-200     | #1F1F23      | #E8E8ED     |
+     * | bg-300     | #17171C      | #F0F0F2     |
+     * | bg-400     | #0F0F0F      | #F8F8FA     |
+     * | divider    | #282828      | #E0E0E6     |
+     * | transparent | transparent | transparent |
+     *
+     * - Foreground Color
+     * | color      | dark      | light     |
+     * | :--------- | :-------- | :-------- |
+     * | default    | #FFFFFF   | #000000   |
+     * | foreground | #FFFFFF   | #000000   |
+     * | white      | #FFFFFF   | #FFFFFF   |
+     * | secondary  | #A1A1AA   | #767A80   |
+     * | tertiary   | #4E4E56   | #C0C0C9   |
+     * | primary    | #D745FF   | #000000   |
+     * | success    | #45B167   | #2E9F4A   |
+     * | danger     | #E84A5A   | #DE4A40   |
+     * | alert      | #F57733   | #E65E16   |
+     * | warning    | #FF9821   | #FF9821   |
+     * | gold       | #FFB800   | #F38300   |
+     */
+    bg?: UXColor;
+    /**
+     * 背景色透明度
+     * @example bgOpacity={0.2}
+     */
+    bgOpacity?: number;
+    /**
+     * Shorthand for the `opacity` style property.
+     */
+    opacity?: ViewStyle['opacity'];
+    /**
+     * Shorthand for the `zIndex` style property.
+     */
+    zIndex?: ViewStyle['zIndex'];
+    /**
+     * Shorthand for the `overflow` style property.
+     */
+    overflow?: ViewStyle['overflow'];
+}

package/dist/components/layout/Center.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { View } from 'react-native';
+import { type FlexProps } from '..';
+export type CenterProps = Omit<FlexProps, 'justify' | 'align'>;
+export declare const Center: React.ForwardRefExoticComponent<CenterProps & React.RefAttributes<View>>;

package/dist/components/layout/Center.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Flex } from "../index.js";
+const Center = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx(Flex, {
+        ref: ref,
+        center: true,
+        ...props
+    }));
+Center.displayName = 'UXCenter';
+export { Center };

package/dist/components/layout/Circle.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { View } from 'react-native';
+import { type SquareProps } from '..';
+export type CircleProps = SquareProps;
+export declare const Circle: React.ForwardRefExoticComponent<Omit<import("..").CenterProps, "h" | "w"> & {
+    size?: number;
+} & React.RefAttributes<View>>;

package/dist/components/layout/Circle.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Square } from "../index.js";
+const Circle = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { size, ...restProps } = props;
+    return /*#__PURE__*/ jsx(Square, {
+        ref: ref,
+        radius: "full",
+        size: size,
+        ...restProps
+    });
+});
+Circle.displayName = 'UXCircle';
+export { Circle };

package/dist/components/layout/Flex/flex.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { View } from 'react-native';
+import type { BoxProps } from '../Box';
+import type { UseFlexProps } from './useFlex.type';
+export type FlexProps = UseFlexProps & BoxProps;
+export declare const Flex: React.ForwardRefExoticComponent<UseFlexProps & BoxProps & React.RefAttributes<View>>;

package/dist/components/layout/Flex/flex.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Box } from "../Box/index.js";
+import { useFlexStyle } from "./useFlex.style.js";
+const Flex = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { fill, vertical, gap, inline, center, direction = 'row', justify, items, self, content, wrap, basis, grow, shrink, style, ...restProps } = props;
+    const flexStyle = useFlexStyle({
+        fill,
+        vertical,
+        gap,
+        inline,
+        center,
+        direction,
+        justify,
+        items,
+        self,
+        content,
+        wrap,
+        basis,
+        grow,
+        shrink
+    });
+    return /*#__PURE__*/ jsx(Box, {
+        ref: ref,
+        style: [
+            flexStyle,
+            style
+        ],
+        ...restProps
+    });
+});
+Flex.displayName = 'UXFlex';
+export { Flex };

package/dist/components/layout/Flex/index.d.ts

@@ -0,0 +1,4 @@
+export * from './flex';
+export * from './useFlex.style';
+export type * from './useFlex.type';
+export * from './useFlexBox.style';

package/dist/components/layout/Flex/index.js

@@ -0,0 +1,3 @@
+export * from "./flex.js";
+export * from "./useFlex.style.js";
+export * from "./useFlexBox.style.js";

package/dist/components/layout/Flex/useFlex.style.d.ts

@@ -0,0 +1,3 @@
+import type { ViewStyle } from 'react-native';
+import type { UseFlexProps } from './useFlex.type';
+export declare const useFlexStyle: (props: UseFlexProps) => ViewStyle;

package/dist/components/layout/Flex/useFlex.style.js

@@ -0,0 +1,122 @@
+import { useMemo } from "react";
+import { useSpacing } from "../../../hooks/index.js";
+const useFlexStyle = (props)=>{
+    const { fill, vertical, gap, inline, center, direction = 'row', justify, items, self, content, wrap, basis, grow, shrink } = props;
+    const { getSpacing } = useSpacing();
+    const flex = useMemo(()=>{
+        if ('boolean' == typeof fill) return fill ? 1 : void 0;
+        return fill;
+    }, [
+        fill
+    ]);
+    const flexGap = useMemo(()=>getSpacing(gap), [
+        gap
+    ]);
+    const flexDirection = useMemo(()=>{
+        if (inline) return 'row';
+        if (vertical) return 'column';
+        if ('col' === direction) return 'column';
+        if ('col-reverse' === direction) return 'column-reverse';
+        return direction;
+    }, [
+        inline,
+        vertical,
+        direction
+    ]);
+    const justifyContent = useMemo(()=>{
+        if (center) return 'center';
+        switch(justify){
+            case 'start':
+                return 'flex-start';
+            case 'end':
+                return 'flex-end';
+            case 'between':
+                return 'space-between';
+            case 'around':
+                return 'space-around';
+            case 'evenly':
+                return 'space-evenly';
+            default:
+                return justify;
+        }
+    }, [
+        center,
+        justify
+    ]);
+    const alignItems = useMemo(()=>{
+        if (center) return 'center';
+        switch(items){
+            case 'start':
+                return 'flex-start';
+            case 'end':
+                return 'flex-end';
+            default:
+                return items;
+        }
+    }, [
+        center,
+        items
+    ]);
+    const alignSelf = useMemo(()=>{
+        switch(self){
+            case 'start':
+                return 'flex-start';
+            case 'end':
+                return 'flex-end';
+            default:
+                return self;
+        }
+    }, [
+        self
+    ]);
+    const alignContent = useMemo(()=>{
+        switch(content){
+            case 'start':
+                return 'flex-start';
+            case 'end':
+                return 'flex-end';
+            case 'between':
+                return 'space-between';
+            case 'around':
+                return 'space-around';
+            default:
+                return content;
+        }
+    }, [
+        content
+    ]);
+    const flexWrap = useMemo(()=>{
+        if (!wrap) return;
+        if (true === wrap) return 'wrap';
+        return wrap;
+    }, [
+        wrap
+    ]);
+    const flexStyle = useMemo(()=>({
+            flex,
+            gap: flexGap,
+            flexDirection,
+            justifyContent,
+            alignItems,
+            alignSelf,
+            alignContent,
+            flexWrap,
+            flexBasis: basis,
+            flexGrow: grow,
+            flexShrink: shrink
+        }), [
+        flex,
+        flexGap,
+        flexDirection,
+        justifyContent,
+        alignItems,
+        alignSelf,
+        alignContent,
+        flexWrap,
+        basis,
+        grow,
+        shrink
+    ]);
+    return flexStyle;
+};
+export { useFlexStyle };