@particle-network/ui-react 0.0.1

package/README.md

@@ -0,0 +1,23 @@
+# Rslib project
+
+## Setup
+
+Install the dependencies:
+
+```bash
+pnpm install
+```
+
+## Get started
+
+Build the library:
+
+```bash
+pnpm build
+```
+
+Build the library in watch mode:
+
+```bash
+pnpm dev
+```

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { type UXForegroundColor, type UXRadius } from '@particle-network/ui-shared';
+export interface ProgressWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * 进度 (%)
+     */
+    value?: number;
+    /**
+     * 宽度
+     */
+    width?: number;
+    /**
+     * 高度
+     */
+    height?: number;
+    /**
+     * 进度条宽度
+     */
+    strokeWidth?: number;
+    /**
+     * 圆角
+     */
+    radius?: UXRadius | number;
+    /**
+     * 进度条颜色
+     */
+    color?: UXForegroundColor | 'transparent';
+    /**
+     * 进度条 SVG 样式
+     */
+    svgClassName?: string;
+}
+declare const ProgressWrapper: React.FC<ProgressWrapperProps>;
+export default ProgressWrapper;

package/dist/components/ProgressWrapper/index.js

@@ -0,0 +1,102 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useRef } from "react";
+import { cn } from "@heroui/theme";
+import { getHexColorFromCSSVariable, radiusMap } from "@particle-network/ui-shared";
+import { useSize } from "ahooks";
+import Center from "../layout/Center.js";
+const ProgressWrapper = ({ className, value = 0, width, height, radius = 'sm', strokeWidth = 1, color = 'primary', children, svgClassName, ...restProps })=>{
+    const autoLayout = !width && !height;
+    const containerRef = useRef(null);
+    const { width: childWidth, height: childHeight } = useSize(containerRef) ?? {
+        width: 0,
+        height: 0
+    };
+    const widthValue = useMemo(()=>{
+        if (width) return width;
+        return childWidth + 2 * strokeWidth;
+    }, [
+        childWidth,
+        strokeWidth,
+        width
+    ]);
+    const heightValue = useMemo(()=>{
+        if (height) return height;
+        return childHeight + 2 * strokeWidth;
+    }, [
+        childHeight,
+        strokeWidth,
+        height
+    ]);
+    const clampedProgress = Math.max(0, Math.min(100, value));
+    const rectWidth = widthValue - strokeWidth;
+    const rectHeight = heightValue - strokeWidth;
+    const rectXY = strokeWidth / 2;
+    const perimeter = 2 * (rectWidth + rectHeight);
+    const strokeDashoffset = perimeter * (1 - clampedProgress / 100);
+    const colorValue = 'transparent' === color ? 'transparent' : getHexColorFromCSSVariable(color);
+    const trackColor = 'transparent' === color ? 'transparent' : `${colorValue}40`;
+    const radiusValue = 'number' == typeof radius ? radius : radiusMap[radius];
+    const createPathData = (x, y, w, h, r)=>{
+        if (0 === r) return `
+        M ${x + w} ${y + h}
+        L ${x} ${y + h}
+        L ${x} ${y}
+        L ${x + w} ${y}
+        Z
+      `;
+        return `
+        M ${x + w - r} ${y + h}
+        L ${x + r} ${y + h}
+        Q ${x} ${y + h} ${x} ${y + h - r}
+        L ${x} ${y + r}
+        Q ${x} ${y} ${x + r} ${y}
+        L ${x + w - r} ${y}
+        Q ${x + w} ${y} ${x + w} ${y + r}
+        L ${x + w} ${y + h - r}
+        Q ${x + w} ${y + h} ${x + w - r} ${y + h}
+        Z
+      `;
+    };
+    const pathData = createPathData(rectXY, rectXY, rectWidth, rectHeight, radiusValue);
+    return /*#__PURE__*/ jsxs(Center, {
+        style: {
+            width: `${widthValue}px`,
+            height: `${heightValue}px`
+        },
+        className: cn('relative cursor-pointer', className),
+        ...restProps,
+        children: [
+            /*#__PURE__*/ jsxs("svg", {
+                className: cn('absolute left-0 top-0', svgClassName),
+                width: widthValue,
+                height: heightValue,
+                children: [
+                    /*#__PURE__*/ jsx("path", {
+                        d: pathData,
+                        fill: "none",
+                        stroke: trackColor,
+                        strokeWidth: strokeWidth
+                    }),
+                    /*#__PURE__*/ jsx("path", {
+                        d: pathData,
+                        fill: "none",
+                        stroke: colorValue,
+                        strokeWidth: strokeWidth,
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        strokeDasharray: perimeter,
+                        strokeDashoffset: strokeDashoffset
+                    })
+                ]
+            }),
+            autoLayout ? /*#__PURE__*/ jsx("div", {
+                ref: containerRef,
+                children: children
+            }) : children
+        ]
+    });
+};
+ProgressWrapper.displayName = 'UX.ProgressWrapper';
+const components_ProgressWrapper = ProgressWrapper;
+export { components_ProgressWrapper as default };

package/dist/components/UXButton/button-group-context.d.ts

@@ -0,0 +1,2 @@
+import type { ContextType } from './use-button-group';
+export declare const ButtonGroupProvider: import("react").Provider<ContextType>, useButtonGroupContext: () => ContextType;

package/dist/components/UXButton/button-group-context.js

@@ -0,0 +1,6 @@
+import { createContext } from "@heroui/react-utils";
+const [ButtonGroupProvider, useButtonGroupContext] = createContext({
+    name: 'ButtonGroupContext',
+    strict: false
+});
+export { ButtonGroupProvider, useButtonGroupContext };

package/dist/components/UXButton/button-group.d.ts

@@ -0,0 +1,4 @@
+import type { UseButtonGroupProps } from './use-button-group';
+export type ButtonGroupProps = UseButtonGroupProps;
+declare const ButtonGroup: import("@heroui/system-rsc").InternalForwardRefRenderFunction<"div", UseButtonGroupProps, never>;
+export default ButtonGroup;

package/dist/components/UXButton/button-group.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "@heroui/system";
+import { ButtonGroupProvider } from "./button-group-context.js";
+import { useButtonGroup } from "./use-button-group.js";
+const ButtonGroup = forwardRef((props, ref)=>{
+    const { Component, domRef, context, children, classNames, getButtonGroupProps } = useButtonGroup({
+        ...props,
+        ref
+    });
+    return /*#__PURE__*/ jsx(ButtonGroupProvider, {
+        value: context,
+        children: /*#__PURE__*/ jsx(Component, {
+            ref: domRef,
+            className: classNames,
+            ...getButtonGroupProps(),
+            children: children
+        })
+    });
+});
+ButtonGroup.displayName = 'HeroUI.ButtonGroup';
+const button_group = ButtonGroup;
+export { button_group as default };

package/dist/components/UXButton/button-theme.d.ts

@@ -0,0 +1,236 @@
+import type { VariantProps } from 'tailwind-variants';
+/**
+ * Button wrapper **Tailwind Variants** component
+ *
+ * const classNames = button({...})
+ *
+ * @example
+ * <button
+ *  className={classNames())}
+ *  data-pressed={true/false}
+ *  data-hover={true/false}
+ *  data-focus={true/false}
+ *  data-focus-visible={true/false}
+ * >
+ *   Button
+ * </button>
+ */
+declare const button: import("tailwind-variants").TVReturnType<{
+    variant: {
+        solid: string;
+        bordered: string;
+        light: string;
+        flat: string;
+        faded: string;
+        shadow: string;
+        ghost: string;
+        text: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        auto: string;
+    };
+    color: {
+        default: string;
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+        danger: string;
+        /**
+         * 看涨
+         */
+        bullish: string;
+        /**
+         * 看跌
+         */
+        bearish: string;
+        /**
+         * 对比色
+         */
+        contrast: string;
+    };
+    radius: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+        full: string;
+    };
+    fullWidth: {
+        true: string;
+    };
+    isDisabled: {
+        true: string;
+    };
+    isSelected: {
+        true: string;
+    };
+    isInGroup: {
+        true: string;
+    };
+    isIconOnly: {
+        true: string;
+        false: string;
+    };
+    disableAnimation: {
+        true: string;
+        false: string;
+    };
+}, undefined, string[], {
+    variant: {
+        solid: string;
+        bordered: string;
+        light: string;
+        flat: string;
+        faded: string;
+        shadow: string;
+        ghost: string;
+        text: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        auto: string;
+    };
+    color: {
+        default: string;
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+        danger: string;
+        /**
+         * 看涨
+         */
+        bullish: string;
+        /**
+         * 看跌
+         */
+        bearish: string;
+        /**
+         * 对比色
+         */
+        contrast: string;
+    };
+    radius: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+        full: string;
+    };
+    fullWidth: {
+        true: string;
+    };
+    isDisabled: {
+        true: string;
+    };
+    isSelected: {
+        true: string;
+    };
+    isInGroup: {
+        true: string;
+    };
+    isIconOnly: {
+        true: string;
+        false: string;
+    };
+    disableAnimation: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        solid: string;
+        bordered: string;
+        light: string;
+        flat: string;
+        faded: string;
+        shadow: string;
+        ghost: string;
+        text: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        auto: string;
+    };
+    color: {
+        default: string;
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+        danger: string;
+        /**
+         * 看涨
+         */
+        bullish: string;
+        /**
+         * 看跌
+         */
+        bearish: string;
+        /**
+         * 对比色
+         */
+        contrast: string;
+    };
+    radius: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+        full: string;
+    };
+    fullWidth: {
+        true: string;
+    };
+    isDisabled: {
+        true: string;
+    };
+    isSelected: {
+        true: string;
+    };
+    isInGroup: {
+        true: string;
+    };
+    isIconOnly: {
+        true: string;
+        false: string;
+    };
+    disableAnimation: {
+        true: string;
+        false: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+/**
+ * ButtonGroup wrapper **Tailwind Variants** component
+ *
+ * const classNames = buttonGroup({...})
+ *
+ * @example
+ * <div role="group" className={classNames())}>
+ *   // button elements
+ * </div>
+ */
+declare const buttonGroup: import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        true: string;
+    };
+}, undefined, "inline-flex items-center justify-center h-auto", {
+    fullWidth: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        true: string;
+    };
+}, undefined, "inline-flex items-center justify-center h-auto", unknown, unknown, undefined>>;
+export type ButtonGroupVariantProps = VariantProps<typeof buttonGroup>;
+export type ButtonVariantProps = VariantProps<typeof button>;
+export { button, buttonGroup };