@particle-network/ui-react 0.5.1-beta.5 → 0.5.1-beta.6

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

@@ -0,0 +1,328 @@
+import { tv } from "@heroui/theme";
+const spacingClasses = (prefix)=>({
+        px: `${prefix}-px`,
+        0: `${prefix}-0`,
+        1: `${prefix}-1`,
+        2: `${prefix}-2`,
+        3: `${prefix}-3`,
+        4: `${prefix}-4`,
+        5: `${prefix}-5`,
+        6: `${prefix}-6`,
+        7: `${prefix}-7`,
+        8: `${prefix}-8`,
+        9: `${prefix}-9`,
+        10: `${prefix}-10`,
+        xs: `${prefix}-xs`,
+        sm: `${prefix}-sm`,
+        md: `${prefix}-md`,
+        lg: `${prefix}-lg`
+    });
+const sizingClasses = (prefix)=>({
+        auto: `${prefix}-auto`,
+        px: `${prefix}-px`,
+        full: `${prefix}-full`,
+        screen: `${prefix}-screen`,
+        dvw: `${prefix}-dvw`,
+        dvh: `${prefix}-dvh`,
+        lvw: `${prefix}-lvw`,
+        lvh: `${prefix}-lvh`,
+        svw: `${prefix}-svw`,
+        svh: `${prefix}-svh`,
+        min: `${prefix}-min`,
+        max: `${prefix}-max`,
+        fit: `${prefix}-fit`
+    });
+const sizingPresets = [
+    'auto',
+    'px',
+    'full',
+    'screen',
+    'dvw',
+    'dvh',
+    'lvw',
+    'lvh',
+    'svw',
+    'svh',
+    'min',
+    'max',
+    'fit'
+];
+const bgClasses = {
+    current: 'bg-current',
+    transparent: 'bg-transparent',
+    default: 'bg-default',
+    pure: 'light:bg-white dark:bg-black',
+    bg100: 'bg-background-100',
+    bg200: 'bg-background-200',
+    bg300: 'bg-background-300',
+    bg400: 'bg-background-400',
+    overlay: 'bg-overlay',
+    divider: 'bg-divider',
+    foreground: 'bg-foreground',
+    secondary: 'bg-secondary',
+    tertiary: 'bg-tertiary',
+    primary: 'bg-primary',
+    success: 'bg-success',
+    warning: 'bg-warning',
+    danger: 'bg-danger',
+    alert: 'bg-alert',
+    bullish: 'bg-bullish',
+    bearish: 'bg-bearish'
+};
+const colorClasses = {
+    current: 'text-current',
+    transparent: 'text-transparent',
+    divider: 'text-divider',
+    foreground: 'text-foreground',
+    secondary: 'text-secondary',
+    tertiary: 'text-tertiary',
+    primary: 'text-primary',
+    success: 'text-success',
+    warning: 'text-warning',
+    danger: 'text-danger',
+    alert: 'text-alert',
+    bullish: 'text-bullish',
+    bearish: 'text-bearish'
+};
+const borderColorClasses = {
+    transparent: 'border-transparent',
+    divider: 'border-divider',
+    foreground: 'border-foreground',
+    secondary: 'border-secondary',
+    tertiary: 'border-tertiary',
+    primary: 'border-primary',
+    success: 'border-success',
+    warning: 'border-warning',
+    danger: 'border-danger',
+    alert: 'border-alert',
+    bullish: 'border-bullish',
+    bearish: 'border-bearish'
+};
+const roundedClasses = {
+    none: 'rounded-none',
+    sm: 'rounded-sm',
+    md: 'rounded-md',
+    lg: 'rounded-lg',
+    xl: 'rounded-xl',
+    small: 'rounded-small',
+    medium: 'rounded-medium',
+    large: 'rounded-large',
+    full: 'rounded-full'
+};
+const boxVariants = tv({
+    base: 'ux-box',
+    variants: {
+        position: {
+            static: 'static',
+            relative: 'relative',
+            absolute: 'absolute',
+            fixed: 'fixed',
+            sticky: 'sticky'
+        },
+        display: {
+            flex: 'flex',
+            inlineFlex: 'inline-flex',
+            block: 'block',
+            hidden: 'hidden',
+            grid: 'grid',
+            inlineGrid: 'inline-grid'
+        },
+        aspect: {
+            square: 'aspect-square',
+            video: 'aspect-video',
+            auto: 'aspect-auto'
+        },
+        overflow: {
+            visible: 'overflow-visible',
+            hidden: 'overflow-hidden',
+            clip: 'overflow-clip',
+            scroll: 'overflow-scroll',
+            auto: 'overflow-auto'
+        },
+        zIndex: {
+            auto: 'z-auto',
+            0: 'z-0',
+            10: 'z-10',
+            20: 'z-20',
+            30: 'z-30',
+            40: 'z-40',
+            50: 'z-50',
+            60: 'z-60',
+            70: 'z-70',
+            80: 'z-80',
+            90: 'z-90',
+            100: 'z-100'
+        },
+        direction: {
+            row: 'flex-row',
+            column: 'flex-col',
+            'row-reverse': 'flex-row-reverse',
+            'col-reverse': 'flex-col-reverse'
+        },
+        items: {
+            start: 'items-start',
+            center: 'items-center',
+            end: 'items-end',
+            baseline: 'items-baseline',
+            stretch: 'items-stretch',
+            normal: 'items-normal'
+        },
+        justify: {
+            start: 'justify-start',
+            center: 'justify-center',
+            end: 'justify-end',
+            between: 'justify-between',
+            around: 'justify-around',
+            evenly: 'justify-evenly',
+            stretch: 'justify-stretch',
+            baseline: 'justify-baseline',
+            normal: 'justify-normal'
+        },
+        gap: spacingClasses('gap'),
+        wrap: {
+            true: 'flex-wrap',
+            wrap: 'flex-wrap',
+            nowrap: 'flex-nowrap',
+            'wrap-reverse': 'flex-wrap-reverse'
+        },
+        self: {
+            auto: 'self-auto',
+            start: 'self-start',
+            end: 'self-end',
+            center: 'self-center',
+            stretch: 'self-stretch',
+            baseline: 'self-baseline',
+            normal: 'self-normal'
+        },
+        grow: {
+            true: 'grow',
+            0: 'grow-0',
+            1: 'grow-1',
+            2: 'grow-2',
+            3: 'grow-3'
+        },
+        shrink: {
+            true: 'shrink',
+            0: 'shrink-0',
+            1: 'shrink-1',
+            2: 'shrink-2',
+            3: 'shrink-3'
+        },
+        order: {
+            first: 'order-first',
+            last: 'order-last',
+            none: 'order-none',
+            0: 'order-0',
+            1: 'order-1',
+            2: 'order-2',
+            3: 'order-3',
+            4: 'order-4',
+            5: 'order-5',
+            6: 'order-6',
+            7: 'order-7',
+            8: 'order-8',
+            9: 'order-9',
+            10: 'order-10'
+        },
+        fill: {
+            true: 'flex-1'
+        },
+        vertical: {
+            true: 'flex-col'
+        },
+        horizontal: {
+            true: 'flex-row'
+        },
+        center: {
+            true: 'items-center justify-center'
+        },
+        p: spacingClasses('p'),
+        pt: spacingClasses('pt'),
+        pr: spacingClasses('pr'),
+        pb: spacingClasses('pb'),
+        pl: spacingClasses('pl'),
+        ps: spacingClasses('ps'),
+        pe: spacingClasses('pe'),
+        px: spacingClasses('px'),
+        py: spacingClasses('py'),
+        m: spacingClasses('m'),
+        mt: spacingClasses('mt'),
+        mr: spacingClasses('mr'),
+        mb: spacingClasses('mb'),
+        ml: spacingClasses('ml'),
+        ms: spacingClasses('ms'),
+        me: spacingClasses('me'),
+        mx: spacingClasses('mx'),
+        my: spacingClasses('my'),
+        w: sizingClasses('w'),
+        h: sizingClasses('h'),
+        minW: sizingClasses('min-w'),
+        maxW: sizingClasses('max-w'),
+        minH: sizingClasses('min-h'),
+        maxH: sizingClasses('max-h'),
+        fullWidth: {
+            true: 'w-full'
+        },
+        fullHeight: {
+            true: 'h-full'
+        },
+        bg: bgClasses,
+        opacity: {
+            disabled: 'opacity-disabled',
+            hover: 'opacity-hover'
+        },
+        shadow: {
+            true: 'shadow-box',
+            box: 'shadow-box',
+            none: 'shadow-none',
+            sm: 'shadow-sm',
+            md: 'shadow-md',
+            lg: 'shadow-lg',
+            xl: 'shadow-xl'
+        },
+        rounded: roundedClasses,
+        radius: roundedClasses,
+        borderStyle: {
+            solid: 'border-solid',
+            dashed: 'border-dashed',
+            dotted: 'border-dotted',
+            double: 'border-double'
+        },
+        borderColor: borderColorClasses,
+        borderWidth: {
+            none: 'border-none',
+            '0.5': 'border-[0.5px]',
+            1: 'border-px',
+            '1.5': 'border-[1.5px]',
+            2: 'border-2'
+        },
+        cursor: {
+            auto: 'cursor-auto',
+            default: 'cursor-default',
+            pointer: 'cursor-pointer',
+            wait: 'cursor-wait',
+            help: 'cursor-help',
+            notAllowed: 'cursor-not-allowed'
+        },
+        color: colorClasses,
+        fontWeight: {
+            normal: 'font-normal',
+            medium: 'font-medium',
+            semibold: 'font-semibold',
+            bold: 'font-bold',
+            extrabold: 'font-extrabold'
+        },
+        lineHeight: {
+            1: 'leading-none',
+            '1.4': 'leading-[1.4]'
+        },
+        textAlign: {
+            left: 'text-left',
+            center: 'text-center',
+            right: 'text-right'
+        }
+    },
+    compoundVariants: [],
+    defaultVariants: {}
+});
+export { boxVariants, sizingPresets };

package/dist/components/layout/Box/box.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { HexColor } from '@particle-network/ui-shared';
+import type { BoxVariants, Sizing } from './box-theme';
+export interface BoxProps<T extends HTMLElement = HTMLDivElement> extends Omit<React.HTMLAttributes<T>, 'color'>, Omit<BoxVariants, 'color' | 'w' | 'h' | 'minW' | 'maxW' | 'minH' | 'maxH'> {
+    as?: React.ElementType;
+    w?: Sizing | number;
+    h?: Sizing | number;
+    minW?: Sizing | number;
+    maxW?: Sizing | number;
+    minH?: Sizing | number;
+    maxH?: Sizing | number;
+    color?: BoxVariants['color'] | HexColor;
+}
+export declare const Box: React.ForwardRefExoticComponent<BoxProps<HTMLDivElement> & React.RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,90 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
+import { cn } from "@heroui/theme";
+import { boxVariants } from "./box-theme.js";
+const Box = /*#__PURE__*/ forwardRef(({ as, position, display, aspect, overflow, zIndex, direction, items, justify, gap, wrap, self, fill, vertical, horizontal, center, grow, shrink, order, p, pt, pr, pb, pl, ps, pe, px, py, m, mt, mr, mb, ml, ms, me, mx, my, w, h, minW, maxW, minH, maxH, fullWidth, fullHeight, bg, opacity, shadow, rounded, radius, borderStyle, cursor, color, fontWeight, lineHeight, textAlign, style = {}, className, ...props }, ref)=>{
+    const Component = as || 'div';
+    const boxStyle = useMemo(()=>({
+            width: 'number' == typeof w ? `${w}px` : void 0,
+            height: 'number' == typeof h ? `${h}px` : void 0,
+            minWidth: 'number' == typeof minW ? `${minW}px` : void 0,
+            maxWidth: 'number' == typeof maxW ? `${maxW}px` : void 0,
+            minHeight: 'number' == typeof minH ? `${minH}px` : void 0,
+            maxHeight: 'number' == typeof maxH ? `${maxH}px` : void 0,
+            color: color?.startsWith('#') ? color : void 0,
+            ...style
+        }), [
+        w,
+        h,
+        minW,
+        maxW,
+        minH,
+        maxH,
+        color,
+        style
+    ]);
+    return /*#__PURE__*/ jsx(Component, {
+        ref: ref,
+        style: boxStyle,
+        className: cn(boxVariants({
+            position,
+            display,
+            aspect,
+            overflow,
+            zIndex,
+            direction,
+            items,
+            justify,
+            gap,
+            wrap,
+            self,
+            fill,
+            vertical,
+            horizontal,
+            center,
+            grow,
+            shrink,
+            order,
+            p,
+            pt,
+            pr,
+            pb,
+            pl,
+            ps,
+            pe,
+            px,
+            py,
+            m,
+            mt,
+            mr,
+            mb,
+            ml,
+            ms,
+            me,
+            mx,
+            my,
+            w: w,
+            h: h,
+            minW: minW,
+            maxW: maxW,
+            minH: minH,
+            maxH: maxH,
+            fullWidth,
+            fullHeight,
+            bg,
+            opacity,
+            shadow,
+            rounded,
+            radius,
+            borderStyle,
+            cursor,
+            color: color,
+            fontWeight,
+            lineHeight,
+            textAlign
+        }), className),
+        ...props
+    });
+});
+Box.displayName = 'Box';
+export { Box };

package/dist/components/layout/Circle.js

@@ -1,10 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { cn } from "@heroui/theme";
 import { Square } from "./Square.js";
-const Circle = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Square, {
+const Circle = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx(Square, {
         ref: ref,
-        className: cn('rounded-full', className),
+        rounded: "full",
         ...props
     }));
 Circle.displayName = 'UX.Circle';

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

@@ -1,28 +1,4 @@
 import React from 'react';
-import { type UXSpacing } from '@particle-network/ui-shared';
-export type AlignItems = 'start' | 'end' | 'center' | 'baseline' | 'stretch' | 'normal';
-export type JustifyContent = 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | 'stretch' | 'baseline' | 'normal';
-export interface FlexProps extends React.HTMLAttributes<HTMLDivElement> {
-    fill?: boolean;
-    fullWidth?: boolean;
-    direction?: 'row' | 'col' | 'row-reverse' | 'col-reverse';
-    vertical?: boolean;
-    center?: boolean;
-    items?: AlignItems;
-    justify?: JustifyContent;
-    grow?: number | true;
-    shrink?: number;
-    /**
-     * 常用的非标准 gap
-     * xs - 2px
-     * sm - 6px
-     * md - 10px
-     * lg - 14px
-     */
-    gap?: UXSpacing | number;
-    wrap?: 'wrap' | 'nowrap' | 'wrap-reverse' | true;
-    order?: number;
-    self?: 'auto' | 'start' | 'end' | 'end-safe' | 'center' | 'center-safe' | 'stretch' | 'baseline' | 'baseline-last';
-    children?: React.ReactNode;
-}
-export declare const Flex: React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<HTMLDivElement>>;
+import type { BoxProps } from './Box/box';
+export type FlexProps = BoxProps;
+export declare const Flex: React.ForwardRefExoticComponent<BoxProps<HTMLDivElement> & React.RefAttributes<HTMLElement>>;

package/dist/components/layout/Flex.js

@@ -1,23 +1,10 @@
 import { jsx } from "react/jsx-runtime";
-import { forwardRef, useMemo } from "react";
-import { cn } from "@heroui/theme";
-import { spacingMap } from "@particle-network/ui-shared";
-const isNil = (value)=>null == value;
-const Flex = /*#__PURE__*/ forwardRef(({ fill, fullWidth, direction, center, items, justify, gap, wrap, vertical, grow, shrink, order, self, className, children, ...props }, ref)=>{
-    const gapValue = useMemo(()=>{
-        if (!gap) return '';
-        if ('number' == typeof gap) return `gap-${gap}`;
-        if (!isNil(spacingMap[gap])) return `gap-${gap}`;
-        return `gap-[${gap}]`;
-    }, [
-        gap
-    ]);
-    return /*#__PURE__*/ jsx("div", {
+import { forwardRef } from "react";
+import { Box } from "./Box/box.js";
+const Flex = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx(Box, {
         ref: ref,
-        className: cn('flex', fullWidth && 'w-full', direction && `flex-${direction}`, vertical && 'flex-col', items && `items-${items}`, justify && `justify-${justify}`, center && 'items-center justify-center', gapValue, 'string' == typeof wrap && `flex-${wrap}`, true === wrap && 'flex-wrap', 'number' == typeof grow && `flex-${grow}`, true === grow && 'flex-1', fill && 'flex-1', !isNil(shrink) && `shrink-${shrink}`, !isNil(order) && `order-${order}`, self && `self-${self}`, className),
-        ...props,
-        children: children
-    });
-});
+        display: "flex",
+        ...props
+    }));
 Flex.displayName = 'UX.Flex';
 export { Flex };

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

@@ -1,3 +1,3 @@
 import { type FlexProps } from './Flex';
-export type HStackProps = Omit<FlexProps, 'direction' | 'vertical'>;
+export type HStackProps = Omit<FlexProps, 'direction' | 'vertical' | 'horizontal'>;
 export declare const HStack: import("react").ForwardRefExoticComponent<HStackProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/layout/Square.js

@@ -1,11 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { cn } from "@heroui/theme";
 import { Center } from "./Center.js";
-const Square = /*#__PURE__*/ forwardRef(({ size, className, ...props }, ref)=>/*#__PURE__*/ jsx(Center, {
+const Square = /*#__PURE__*/ forwardRef(({ size, ...props }, ref)=>/*#__PURE__*/ jsx(Center, {
         ref: ref,
         shrink: 0,
-        className: cn(size && `w-[${size}px] h-[${size}px]`, className),
+        style: {
+            width: `${size}px`,
+            height: `${size}px`
+        },
         ...props
     }));
 Square.displayName = 'UX.Square';

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

@@ -1,3 +1,3 @@
 import { type FlexProps } from './Flex';
-export type VStackProps = Omit<FlexProps, 'direction' | 'vertical'>;
+export type VStackProps = Omit<FlexProps, 'direction' | 'vertical' | 'horizontal'>;
 export declare const VStack: import("react").ForwardRefExoticComponent<VStackProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/layout/VStack.js

@@ -1,10 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Flex } from "./Flex.js";
-const VStack = /*#__PURE__*/ forwardRef(({ items = 'stretch', ...props }, ref)=>/*#__PURE__*/ jsx(Flex, {
+const VStack = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx(Flex, {
         ref: ref,
         vertical: true,
-        items: items,
+        items: "stretch",
         ...props
     }));
 VStack.displayName = 'UX.VStack';

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

@@ -1,3 +1,4 @@
+export * from './Box/box';
 export * from './Center';
 export * from './Circle';
 export * from './Flex';

package/dist/components/layout/index.js

@@ -1,3 +1,4 @@
+export * from "./Box/box.js";
 export * from "./Center.js";
 export * from "./Circle.js";
 export * from "./Flex.js";

package/dist/components/typography/Text.js

@@ -1,13 +1,28 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { cn } from "@heroui/theme";
-import { textClasses } from "./Text.type.js";
-const Text = /*#__PURE__*/ forwardRef(({ variant = 'body2Bold', fontWeight, color, lineHeight, align, className, h1, h2, h3, body1, body1Bold, body2, body2Bold, body3, body3Bold, caption1, caption1Bold, ...props }, ref)=>/*#__PURE__*/ jsx("span", {
+import { Box } from "../layout/index.js";
+import { textVariants } from "./text-theme.js";
+const Text = /*#__PURE__*/ forwardRef(({ variant, className, h1, h2, h3, body1, body1Bold, body2, body2Bold, body3, body3Bold, caption1, caption1Bold, fontWeight, lineHeight, align, textAlign, ...props }, ref)=>/*#__PURE__*/ jsx(Box, {
         ref: ref,
-        style: {
-            color: color?.startsWith('#') ? color : void 0
-        },
-        className: cn(textClasses.variant[variant], h1 && textClasses.variant.h1, h2 && textClasses.variant.h2, h3 && textClasses.variant.h3, body1 && textClasses.variant.body1, body1Bold && textClasses.variant.body1Bold, body2 && textClasses.variant.body2, body2Bold && textClasses.variant.body2Bold, body3 && textClasses.variant.body3, body3Bold && textClasses.variant.body3Bold, caption1 && textClasses.variant.caption1, caption1Bold && textClasses.variant.caption1Bold, textClasses.fontWeight[fontWeight], !color?.startsWith('#') && textClasses.color[color], textClasses.lineHeight[lineHeight], textClasses.align[align], className),
+        as: "span",
+        textAlign: textAlign || align,
+        className: cn(textVariants({
+            variant,
+            h1,
+            h2,
+            h3,
+            body1,
+            body1Bold,
+            body2,
+            body2Bold,
+            body3,
+            body3Bold,
+            caption1,
+            caption1Bold,
+            fontWeight,
+            lineHeight
+        }), className),
         ...props
     }));
 Text.displayName = 'UX.Text';

package/dist/components/typography/Text.type.d.ts

@@ -1,10 +1,6 @@
-import type React from 'react';
-import type { HexColor, UXForegroundColor } from '@particle-network/ui-shared';
+import type { BoxProps } from '../layout';
 type TextVariant = 'h1' | 'h2' | 'h3' | 'body1' | 'body1Bold' | 'body2' | 'body2Bold' | 'body3' | 'body3Bold' | 'caption1' | 'caption1Bold';
-type TextWeight = 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold';
-type TextLineHeight = '1' | '1.4';
-type TextAlign = 'left' | 'center' | 'right';
-export interface TextProps extends React.HTMLAttributes<HTMLSpanElement> {
+export interface TextProps extends BoxProps<HTMLSpanElement> {
     /**
      * | variant      | font-size | font-weight |
      * | :----------- | :-------- | :---------- |
@@ -65,25 +61,6 @@ export interface TextProps extends React.HTMLAttributes<HTMLSpanElement> {
      * `10px 500`
      */
     caption1Bold?: boolean;
-    /**
-     * | weight    | font-weight |
-     * | :-------- | :---------: |
-     * | normal    | 400         |
-     * | medium    | 500         |
-     * | semibold  | 600         |
-     * | bold      | 700         |
-     * | extrabold | 800         |
-     */
-    fontWeight?: TextWeight;
-    color?: UXForegroundColor | HexColor;
-    lineHeight?: TextLineHeight;
-    align?: TextAlign;
+    align?: BoxProps['textAlign'];
 }
-export declare const textClasses: {
-    variant: Record<TextVariant, string>;
-    color: Record<UXForegroundColor, string>;
-    fontWeight: Record<TextWeight, string>;
-    lineHeight: Record<TextLineHeight, string>;
-    align: Record<TextAlign, string>;
-};
 export {};