@particle-network/ui-react 0.0.1

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

@@ -0,0 +1,37 @@
+import type { ReactRef } from '@heroui/react-utils';
+import { type HTMLHeroUIProps, type PropGetter } from '@heroui/system';
+import type { ButtonProps } from './button';
+import { type ButtonGroupVariantProps } from './button-theme';
+interface Props extends HTMLHeroUIProps, ButtonGroupVariantProps {
+    /**
+     * Ref to the DOM node.
+     */
+    ref?: ReactRef<HTMLDivElement | null>;
+    /**
+     * Whether the buttons are disabled.
+     * @default false
+     */
+    isDisabled?: ButtonProps['isDisabled'];
+}
+export interface ContextType {
+    size?: ButtonProps['size'];
+    color?: ButtonProps['color'];
+    variant?: ButtonProps['variant'];
+    radius?: ButtonProps['radius'];
+    isDisabled?: ButtonProps['isDisabled'];
+    disableAnimation?: ButtonProps['disableAnimation'];
+    disableRipple?: ButtonProps['disableRipple'];
+    isIconOnly?: ButtonProps['isIconOnly'];
+    fullWidth?: boolean;
+}
+export type UseButtonGroupProps = Props & Partial<Pick<ButtonProps, 'size' | 'color' | 'radius' | 'variant' | 'isIconOnly' | 'disableAnimation' | 'disableRipple'>>;
+export declare function useButtonGroup(originalProps: UseButtonGroupProps): {
+    Component: import("@heroui/system-rsc").As<any>;
+    children: import("react").ReactNode;
+    domRef: import("react").RefObject<HTMLDivElement>;
+    context: ContextType;
+    classNames: string;
+    getButtonGroupProps: PropGetter;
+};
+export type UseButtonGroupReturn = ReturnType<typeof useButtonGroup>;
+export {};

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

@@ -0,0 +1,55 @@
+import { useCallback, useMemo } from "react";
+import { useDOMRef } from "@heroui/react-utils";
+import { objectToDeps } from "@heroui/shared-utils";
+import { mapPropsVariants, useProviderContext } from "@heroui/system";
+import { buttonGroup } from "./button-theme.js";
+function useButtonGroup(originalProps) {
+    const globalContext = useProviderContext();
+    const [props, variantProps] = mapPropsVariants(originalProps, buttonGroup.variantKeys);
+    const { ref, as, children, color = 'default', size = 'md', variant = 'solid', radius, isDisabled = false, isIconOnly = false, disableRipple = globalContext?.disableRipple ?? false, disableAnimation = globalContext?.disableAnimation ?? false, className, ...otherProps } = props;
+    const Component = as || 'div';
+    const domRef = useDOMRef(ref);
+    const classNames = useMemo(()=>buttonGroup({
+            ...variantProps,
+            className
+        }), [
+        objectToDeps(variantProps),
+        className
+    ]);
+    const context = useMemo(()=>({
+            size,
+            color,
+            variant,
+            radius,
+            isIconOnly,
+            isDisabled,
+            disableAnimation,
+            disableRipple,
+            fullWidth: !!originalProps?.fullWidth
+        }), [
+        size,
+        color,
+        variant,
+        radius,
+        isDisabled,
+        isIconOnly,
+        disableAnimation,
+        disableRipple,
+        originalProps?.fullWidth
+    ]);
+    const getButtonGroupProps = useCallback(()=>({
+            role: 'group',
+            ...otherProps
+        }), [
+        otherProps
+    ]);
+    return {
+        Component,
+        children,
+        domRef,
+        context,
+        classNames,
+        getButtonGroupProps
+    };
+}
+export { useButtonGroup };

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

@@ -0,0 +1,65 @@
+import type { MouseEventHandler, ReactNode } from 'react';
+import type { ReactRef } from '@heroui/react-utils';
+import type { RippleProps } from '@heroui/ripple';
+import type { HTMLHeroUIProps, PropGetter } from '@heroui/system';
+import type { AriaButtonProps } from '@heroui/use-aria-button';
+import type { ButtonVariantProps } from './button-theme';
+interface Props extends HTMLHeroUIProps<'button'> {
+    /**
+     * Ref to the DOM node.
+     */
+    ref?: ReactRef<HTMLButtonElement | null>;
+    /**
+     * Whether the button should display a ripple effect on press.
+     * @default false
+     */
+    disableRipple?: boolean;
+    /**
+     * The button start content.
+     */
+    startContent?: ReactNode;
+    /**
+     * The button end content.
+     */
+    endContent?: ReactNode;
+    /**
+     * Spinner to display when loading.
+     * @see https://heroui.com/components/spinner
+     */
+    spinner?: ReactNode;
+    /**
+     * The spinner placement.
+     * @default "start"
+     */
+    spinnerPlacement?: 'start' | 'end';
+    /**
+     * Whether the button should display a loading spinner.
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * The native button click event handler.
+     * use `onPress` instead.
+     * @deprecated
+     */
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+}
+export type UseButtonProps = Props & Omit<AriaButtonProps, keyof ButtonVariantProps> & Omit<ButtonVariantProps, 'isInGroup'>;
+export declare function useButton(props: UseButtonProps): {
+    Component: import("@heroui/system-rsc").As<any>;
+    children: ReactNode;
+    domRef: import("react").RefObject<HTMLButtonElement>;
+    spinner: ReactNode;
+    styles: string;
+    startContent: import("react").DetailedReactHTMLElement<import("react").HTMLAttributes<HTMLElement>, HTMLElement> | null;
+    endContent: import("react").DetailedReactHTMLElement<import("react").HTMLAttributes<HTMLElement>, HTMLElement> | null;
+    isLoading: boolean;
+    spinnerPlacement: "start" | "end";
+    spinnerSize: "sm" | "md" | "lg" | undefined;
+    disableRipple: boolean;
+    getButtonProps: PropGetter;
+    getRippleProps: () => RippleProps;
+    isIconOnly: boolean;
+};
+export type UseButtonReturn = ReturnType<typeof useButton>;
+export {};

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

@@ -0,0 +1,136 @@
+import { cloneElement, isValidElement, useCallback, useMemo } from "react";
+import { filterDOMProps, useDOMRef } from "@heroui/react-utils";
+import { useRipple } from "@heroui/ripple";
+import { dataAttr } from "@heroui/shared-utils";
+import { useProviderContext } from "@heroui/system";
+import { useAriaButton } from "@heroui/use-aria-button";
+import { useFocusRing } from "@react-aria/focus";
+import { useHover } from "@react-aria/interactions";
+import { chain, mergeProps } from "@react-aria/utils";
+import { useButtonGroupContext } from "./button-group-context.js";
+import { button as external_button_theme_js_button } from "./button-theme.js";
+function useButton(props) {
+    const groupContext = useButtonGroupContext();
+    const globalContext = useProviderContext();
+    const isInGroup = !!groupContext;
+    const { ref, as, children, startContent: startContentProp, endContent: endContentProp, autoFocus, className, spinner, isLoading = false, isSelected = false, disableRipple: disableRippleProp = false, fullWidth = groupContext?.fullWidth ?? false, radius = groupContext?.radius, size = groupContext?.size ?? 'md', color = groupContext?.color ?? 'default', variant = groupContext?.variant ?? 'solid', disableAnimation = groupContext?.disableAnimation ?? globalContext?.disableAnimation ?? false, isDisabled: isDisabledProp = groupContext?.isDisabled ?? false, isIconOnly = groupContext?.isIconOnly ?? false, spinnerPlacement = 'start', onPress, onClick, ...otherProps } = props;
+    const Component = as || 'button';
+    const shouldFilterDOMProps = 'string' == typeof Component;
+    const domRef = useDOMRef(ref);
+    const disableRipple = (disableRippleProp || globalContext?.disableRipple) ?? disableAnimation;
+    const { isFocusVisible, isFocused, focusProps } = useFocusRing({
+        autoFocus
+    });
+    const isDisabled = isDisabledProp || isLoading;
+    const styles = useMemo(()=>external_button_theme_js_button({
+            size,
+            color,
+            variant,
+            radius,
+            fullWidth,
+            isDisabled,
+            isInGroup,
+            disableAnimation,
+            isIconOnly,
+            isSelected,
+            className
+        }), [
+        size,
+        color,
+        variant,
+        radius,
+        fullWidth,
+        isDisabled,
+        isInGroup,
+        isIconOnly,
+        disableAnimation,
+        className,
+        isSelected
+    ]);
+    const { onPress: onRipplePressHandler, onClear: onClearRipple, ripples } = useRipple();
+    const handlePress = useCallback((e)=>{
+        if (disableRipple || isDisabled || disableAnimation) return;
+        if (domRef.current) onRipplePressHandler(e);
+    }, [
+        disableRipple,
+        isDisabled,
+        disableAnimation,
+        domRef,
+        onRipplePressHandler
+    ]);
+    const { buttonProps: ariaButtonProps, isPressed } = useAriaButton({
+        elementType: as,
+        isDisabled,
+        onPress: chain(onPress, handlePress),
+        onClick,
+        ...otherProps
+    }, domRef);
+    const { isHovered, hoverProps } = useHover({
+        isDisabled
+    });
+    const getButtonProps = useCallback((props = {})=>({
+            'data-disabled': dataAttr(isDisabled),
+            'data-focus': dataAttr(isFocused),
+            'data-pressed': dataAttr(isPressed),
+            'data-focus-visible': dataAttr(isFocusVisible),
+            'data-hover': dataAttr(isHovered),
+            'data-loading': dataAttr(isLoading),
+            ...mergeProps(ariaButtonProps, focusProps, hoverProps, filterDOMProps(otherProps, {
+                enabled: shouldFilterDOMProps
+            }), filterDOMProps(props)),
+            className: styles
+        }), [
+        isLoading,
+        isDisabled,
+        isFocused,
+        isPressed,
+        shouldFilterDOMProps,
+        isFocusVisible,
+        isHovered,
+        ariaButtonProps,
+        focusProps,
+        hoverProps,
+        otherProps,
+        styles
+    ]);
+    const getIconClone = (icon)=>isValidElement(icon) ? cloneElement(icon, {
+            'aria-hidden': true,
+            focusable: false
+        }) : null;
+    const startContent = getIconClone(startContentProp);
+    const endContent = getIconClone(endContentProp);
+    const spinnerSize = useMemo(()=>{
+        const buttonSpinnerSizeMap = {
+            sm: 'sm',
+            md: 'sm',
+            lg: 'md'
+        };
+        return buttonSpinnerSizeMap[size];
+    }, [
+        size
+    ]);
+    const getRippleProps = useCallback(()=>({
+            ripples,
+            onClear: onClearRipple
+        }), [
+        ripples,
+        onClearRipple
+    ]);
+    return {
+        Component,
+        children,
+        domRef,
+        spinner,
+        styles,
+        startContent,
+        endContent,
+        isLoading,
+        spinnerPlacement,
+        spinnerSize,
+        disableRipple,
+        getButtonProps,
+        getRippleProps,
+        isIconOnly
+    };
+}
+export { useButton };

package/dist/components/UXCheckbox/checkbox.extend.d.ts

@@ -0,0 +1,7 @@
+import type React from 'react';
+import { type CheckboxProps } from '@heroui/checkbox';
+type ExtendedCheckboxProps = Omit<CheckboxProps, 'color'> & {
+    color?: 'primary' | 'success' | 'warning' | 'danger' | 'bullish' | 'bearish';
+};
+declare const ExtendedCheckbox: React.ForwardRefExoticComponent<ExtendedCheckboxProps>;
+export default ExtendedCheckbox;

package/dist/components/UXCheckbox/checkbox.extend.js

@@ -0,0 +1,151 @@
+import { Checkbox } from "@heroui/checkbox";
+import { extendVariants } from "@heroui/system-rsc";
+const ExtendedCheckbox = extendVariants(Checkbox, {
+    variants: {
+        color: {
+            primary: {
+                wrapper: 'after:bg-primary after:text-primary-foreground text-primary-foreground'
+            },
+            success: {
+                wrapper: 'after:bg-success after:text-success-foreground text-success-foreground'
+            },
+            warning: {
+                wrapper: 'after:bg-warning after:text-warning-foreground text-warning-foreground'
+            },
+            danger: {
+                wrapper: 'after:bg-danger after:text-danger-foreground text-danger-foreground'
+            },
+            bullish: {
+                wrapper: 'after:bg-bullish after:text-bullish-foreground text-bullish-foreground'
+            },
+            bearish: {
+                wrapper: 'after:bg-bearish after:text-bearish-foreground text-bearish-foreground'
+            }
+        },
+        size: {
+            sm: {
+                wrapper: [
+                    'w-3.5 h-3.5 me-sm',
+                    'rounded-[calc(theme(borderRadius.medium)*0.2)]',
+                    'before:rounded-[calc(theme(borderRadius.medium)*0.2)] before:border-foreground-300 before:border-1.5',
+                    'after:rounded-[calc(theme(borderRadius.medium)*0.2)]'
+                ],
+                label: '!text-body3 font-medium',
+                icon: 'h-2.5'
+            },
+            md: {
+                wrapper: [
+                    'w-4 h-4 me-2',
+                    'rounded-[calc(theme(borderRadius.medium)*0.2)]',
+                    'before:rounded-[calc(theme(borderRadius.medium)*0.2)] before:border-foreground-300 before:border-2',
+                    'after:rounded-[calc(theme(borderRadius.medium)*0.2)]'
+                ],
+                label: '!text-body2 font-medium',
+                icon: 'h-3'
+            },
+            lg: {
+                wrapper: [
+                    'w-5 h-5 me-2',
+                    'rounded-[calc(theme(borderRadius.medium)*0.3)]',
+                    'before:rounded-[calc(theme(borderRadius.medium)*0.3)] before:border-foreground-300 before:border-2',
+                    'after:rounded-[calc(theme(borderRadius.medium)*0.3)]'
+                ],
+                label: '!text-body1 font-medium',
+                icon: 'h-3.5'
+            }
+        },
+        radius: {
+            none: {
+                wrapper: 'rounded-none before:rounded-none after:rounded-none'
+            },
+            sm: {
+                wrapper: [
+                    'rounded-[calc(theme(borderRadius.medium)*0.5)]',
+                    'before:rounded-[calc(theme(borderRadius.medium)*0.5)]',
+                    'after:rounded-[calc(theme(borderRadius.medium)*0.5)]'
+                ]
+            },
+            md: {
+                wrapper: [
+                    'rounded-[calc(theme(borderRadius.medium)*0.6)]',
+                    'before:rounded-[calc(theme(borderRadius.medium)*0.6)]',
+                    'after:rounded-[calc(theme(borderRadius.medium)*0.6)]'
+                ]
+            },
+            lg: {
+                wrapper: [
+                    'rounded-[calc(theme(borderRadius.medium)*0.7)]',
+                    'before:rounded-[calc(theme(borderRadius.medium)*0.7)]',
+                    'after:rounded-[calc(theme(borderRadius.medium)*0.7)]'
+                ]
+            },
+            full: {
+                wrapper: 'rounded-full before:rounded-full after:rounded-full'
+            }
+        },
+        lineThrough: {
+            true: {
+                label: [
+                    'inline-flex',
+                    'items-center',
+                    'justify-center',
+                    "before:content-['']",
+                    'before:absolute',
+                    'before:bg-foreground',
+                    'before:w-0',
+                    'before:h-0.5',
+                    'group-data-[selected=true]:opacity-60',
+                    'group-data-[selected=true]:before:w-full'
+                ]
+            }
+        },
+        isDisabled: {
+            true: {
+                base: 'opacity-disabled pointer-events-none'
+            }
+        },
+        isInvalid: {
+            true: {
+                wrapper: 'before:border-danger',
+                label: 'text-danger'
+            }
+        },
+        isRadio: {
+            true: {
+                wrapper: [
+                    'group-data-[selected=true]:after:bg-transparent',
+                    'group-data-[selected=true]:before:border-primary'
+                ],
+                icon: 'w-2 h-2'
+            }
+        },
+        disableAnimation: {
+            true: {
+                wrapper: 'transition-none',
+                icon: 'transition-none',
+                label: 'transition-none'
+            },
+            false: {
+                wrapper: [
+                    'before:transition-colors',
+                    'group-data-[pressed=true]:scale-95',
+                    'transition-transform',
+                    'after:transition-transform-opacity',
+                    'after:!ease-linear',
+                    'after:!duration-200',
+                    'motion-reduce:transition-none'
+                ],
+                icon: 'transition-opacity motion-reduce:transition-none',
+                label: 'transition-colors-opacity before:transition-width motion-reduce:transition-none'
+            }
+        }
+    },
+    defaultVariants: {
+        color: 'primary',
+        size: 'md',
+        isDisabled: false,
+        lineThrough: false
+    }
+});
+const checkbox_extend = ExtendedCheckbox;
+export { checkbox_extend as default };

package/dist/components/UXCheckbox/checkbox.icon.d.ts

@@ -0,0 +1,6 @@
+import type { CheckboxIconProps } from '@heroui/checkbox';
+/**
+ * CheckboxIcon is used to visually indicate the checked or indeterminate
+ * state of a checkbox.
+ */
+export declare function CheckboxIcon(props: Partial<CheckboxIconProps>): import("react/jsx-runtime").JSX.Element;

package/dist/components/UXCheckbox/checkbox.icon.js

@@ -0,0 +1,46 @@
+import { jsx } from "react/jsx-runtime";
+function CheckIcon(props) {
+    const { isSelected, disableAnimation, ...otherProps } = props;
+    return /*#__PURE__*/ jsx("svg", {
+        "aria-hidden": "true",
+        fill: "none",
+        role: "presentation",
+        stroke: "currentColor",
+        strokeDasharray: 22,
+        strokeDashoffset: isSelected ? 44 : 66,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 3,
+        style: !disableAnimation && isSelected ? {
+            transition: 'stroke-dashoffset 250ms linear 0.2s'
+        } : {},
+        viewBox: "0 0 17 18",
+        ...otherProps,
+        children: /*#__PURE__*/ jsx("polyline", {
+            points: "1 9 7 14 15 4"
+        })
+    });
+}
+function IndeterminateIcon(props) {
+    const { isSelected, disableAnimation, ...otherProps } = props;
+    return /*#__PURE__*/ jsx("svg", {
+        stroke: "currentColor",
+        strokeWidth: 3,
+        viewBox: "0 0 24 24",
+        ...otherProps,
+        children: /*#__PURE__*/ jsx("line", {
+            x1: "21",
+            x2: "3",
+            y1: "12",
+            y2: "12"
+        })
+    });
+}
+function CheckboxIcon(props) {
+    const { isIndeterminate, ...otherProps } = props;
+    const BaseIcon = isIndeterminate ? IndeterminateIcon : CheckIcon;
+    return /*#__PURE__*/ jsx(BaseIcon, {
+        ...otherProps
+    });
+}
+export { CheckboxIcon };

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { type CheckboxGroupProps } from '@heroui/checkbox';
+import ExtendedCheckbox from './checkbox.extend';
+export type UXCheckboxProps = React.ComponentPropsWithRef<typeof ExtendedCheckbox>;
+declare const UXCheckbox: React.ForwardRefExoticComponent<Omit<Omit<import("@heroui/checkbox").CheckboxProps, "color"> & {
+    color?: "primary" | "success" | "warning" | "danger" | "bullish" | "bearish";
+}, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export default UXCheckbox;
+export declare const UXCheckboxGroup: import("@heroui/system-rsc").InternalForwardRefRenderFunction<"div", CheckboxGroupProps, never>;
+export type UXCheckboxGroupProps = CheckboxGroupProps;

package/dist/components/UXCheckbox/index.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { CheckboxGroup } from "@heroui/checkbox";
+import checkbox_extend from "./checkbox.extend.js";
+import { CheckboxIcon } from "./checkbox.icon.js";
+const UXCheckbox = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { icon = /*#__PURE__*/ jsx(CheckboxIcon, {}), ...otherProps } = props;
+    return /*#__PURE__*/ jsx(checkbox_extend, {
+        ref: ref,
+        icon: icon,
+        ...otherProps
+    });
+});
+UXCheckbox.displayName = 'UX.Checkbox';
+const components_UXCheckbox = UXCheckbox;
+const UXCheckboxGroup = CheckboxGroup;
+export { UXCheckboxGroup, components_UXCheckbox as default };