@particle-network/ui-react 0.0.1

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

@@ -0,0 +1,626 @@
+import { tv } from "@heroui/theme";
+import { collapseAdjacentVariantBorders, colorVariants, dataFocusVisibleClasses } from "../../utils/index.js";
+const button_theme_button = tv({
+    base: [
+        'z-0',
+        'group',
+        'relative',
+        'inline-flex',
+        'items-center',
+        'justify-center',
+        'box-border',
+        'appearance-none',
+        'outline-none',
+        'select-none',
+        'whitespace-nowrap',
+        'min-w-max',
+        'font-normal',
+        'subpixel-antialiased',
+        'overflow-hidden',
+        'tap-highlight-transparent',
+        'transform-gpu data-[pressed=true]:scale-[0.97]',
+        ...dataFocusVisibleClasses
+    ],
+    variants: {
+        variant: {
+            solid: '',
+            bordered: 'border-small bg-transparent',
+            light: 'bg-transparent',
+            flat: '',
+            faded: 'border-small',
+            shadow: '',
+            ghost: 'border-small bg-transparent',
+            text: 'bg-transparent min-w-0 w-auto h-auto px-0'
+        },
+        size: {
+            sm: 'gap-2 rounded-small !text-body3 min-w-min font-medium [&_[aria-label="Loading"]>div]:size-3',
+            md: 'gap-2 rounded-small text-tiny min-w-min font-medium [&_[aria-label="Loading"]>div]:size-4',
+            lg: 'gap-2 rounded-medium text-medium min-w-min font-medium [&_[aria-label="Loading"]>div]:size-6',
+            auto: 'min-w-min rounded-medium'
+        },
+        color: {
+            default: '',
+            primary: '',
+            secondary: '',
+            success: '',
+            warning: '',
+            danger: '',
+            bullish: '',
+            bearish: '',
+            contrast: ''
+        },
+        radius: {
+            none: 'rounded-none',
+            sm: 'rounded-small',
+            md: 'rounded-medium',
+            lg: 'rounded-large',
+            full: 'rounded-full'
+        },
+        fullWidth: {
+            true: 'w-full'
+        },
+        isDisabled: {
+            true: 'opacity-disabled pointer-events-none cursor-not-allowed'
+        },
+        isSelected: {
+            true: 'ux-button-selected'
+        },
+        isInGroup: {
+            true: '[&:not(:first-child):not(:last-child)]:rounded-none'
+        },
+        isIconOnly: {
+            true: '!px-0 !gap-0',
+            false: '[&>svg]:max-w-[theme(spacing.8)]'
+        },
+        disableAnimation: {
+            true: '!transition-none data-[pressed=true]:scale-100',
+            false: 'transition-transform-colors-opacity motion-reduce:transition-none'
+        }
+    },
+    defaultVariants: {
+        size: 'md',
+        variant: 'solid',
+        color: 'default',
+        fullWidth: false,
+        isDisabled: false,
+        isInGroup: false,
+        disableAnimation: false
+    },
+    compoundVariants: [
+        {
+            size: 'sm',
+            variant: [
+                'solid',
+                'flat',
+                'light',
+                'bordered'
+            ],
+            class: 'px-sm h-6'
+        },
+        {
+            size: 'md',
+            variant: [
+                'solid',
+                'flat',
+                'light',
+                'bordered'
+            ],
+            class: 'px-md h-[30px]'
+        },
+        {
+            size: 'lg',
+            variant: [
+                'solid',
+                'flat',
+                'light',
+                'bordered'
+            ],
+            class: 'px-lg h-11'
+        },
+        {
+            variant: 'solid',
+            color: 'default',
+            class: colorVariants.solid["default"]
+        },
+        {
+            variant: 'solid',
+            color: 'primary',
+            class: colorVariants.solid.primary
+        },
+        {
+            variant: 'solid',
+            color: 'secondary',
+            class: colorVariants.solid.secondary
+        },
+        {
+            variant: 'solid',
+            color: 'success',
+            class: colorVariants.solid.success
+        },
+        {
+            variant: 'solid',
+            color: 'warning',
+            class: colorVariants.solid.warning
+        },
+        {
+            variant: 'solid',
+            color: 'danger',
+            class: colorVariants.solid.danger
+        },
+        {
+            variant: 'solid',
+            color: 'bullish',
+            class: colorVariants.solid.bullish
+        },
+        {
+            variant: 'solid',
+            color: 'bearish',
+            class: colorVariants.solid.bearish
+        },
+        {
+            variant: 'solid',
+            color: 'contrast',
+            class: colorVariants.solid.contrast
+        },
+        {
+            variant: 'light',
+            color: 'default',
+            class: [
+                colorVariants.light["default"],
+                'data-[hover=true]:bg-default/40'
+            ]
+        },
+        {
+            variant: 'light',
+            color: 'primary',
+            class: [
+                colorVariants.light.primary,
+                'data-[hover=true]:bg-primary/20'
+            ]
+        },
+        {
+            variant: 'light',
+            color: 'secondary',
+            class: [
+                colorVariants.light.secondary,
+                'data-[hover=true]:bg-default/40'
+            ]
+        },
+        {
+            variant: 'light',
+            color: 'success',
+            class: [
+                colorVariants.light.success,
+                'data-[hover=true]:bg-success/20'
+            ]
+        },
+        {
+            variant: 'light',
+            color: 'warning',
+            class: [
+                colorVariants.light.warning,
+                'data-[hover=true]:bg-warning/20'
+            ]
+        },
+        {
+            variant: 'light',
+            color: 'danger',
+            class: [
+                colorVariants.light.danger,
+                'data-[hover=true]:bg-danger/20'
+            ]
+        },
+        {
+            variant: 'light',
+            color: 'bullish',
+            class: [
+                colorVariants.light.bullish,
+                'data-[hover=true]:bg-bullish/20'
+            ]
+        },
+        {
+            variant: 'light',
+            color: 'bearish',
+            class: [
+                colorVariants.light.bearish,
+                'data-[hover=true]:bg-bearish/20'
+            ]
+        },
+        {
+            variant: 'bordered',
+            color: 'default',
+            class: colorVariants.bordered["default"]
+        },
+        {
+            variant: 'bordered',
+            color: 'primary',
+            class: colorVariants.bordered.primary
+        },
+        {
+            variant: 'bordered',
+            color: 'secondary',
+            class: colorVariants.bordered.secondary
+        },
+        {
+            variant: 'bordered',
+            color: 'success',
+            class: colorVariants.bordered.success
+        },
+        {
+            variant: 'bordered',
+            color: 'warning',
+            class: colorVariants.bordered.warning
+        },
+        {
+            variant: 'bordered',
+            color: 'danger',
+            class: colorVariants.bordered.danger
+        },
+        {
+            variant: 'bordered',
+            color: 'bullish',
+            class: colorVariants.bordered.bullish
+        },
+        {
+            variant: 'bordered',
+            color: 'bearish',
+            class: colorVariants.bordered.bearish
+        },
+        {
+            variant: 'flat',
+            color: 'default',
+            class: colorVariants.flat["default"]
+        },
+        {
+            variant: 'flat',
+            color: 'primary',
+            class: colorVariants.flat.primary
+        },
+        {
+            variant: 'flat',
+            color: 'secondary',
+            class: colorVariants.flat.secondary
+        },
+        {
+            variant: 'flat',
+            color: 'success',
+            class: colorVariants.flat.success
+        },
+        {
+            variant: 'flat',
+            color: 'warning',
+            class: colorVariants.flat.warning
+        },
+        {
+            variant: 'flat',
+            color: 'danger',
+            class: colorVariants.flat.danger
+        },
+        {
+            variant: 'flat',
+            color: 'bullish',
+            class: colorVariants.flat.bullish
+        },
+        {
+            variant: 'flat',
+            color: 'bearish',
+            class: colorVariants.flat.bearish
+        },
+        {
+            variant: 'text',
+            color: 'default',
+            class: [
+                colorVariants.text["default"]
+            ]
+        },
+        {
+            variant: 'text',
+            color: 'primary',
+            class: [
+                colorVariants.text.primary
+            ]
+        },
+        {
+            variant: 'text',
+            color: 'secondary',
+            class: [
+                colorVariants.text.secondary
+            ]
+        },
+        {
+            variant: 'text',
+            color: 'success',
+            class: [
+                colorVariants.text.success
+            ]
+        },
+        {
+            variant: 'text',
+            color: 'warning',
+            class: [
+                colorVariants.text.warning
+            ]
+        },
+        {
+            variant: 'text',
+            color: 'danger',
+            class: [
+                colorVariants.text.danger
+            ]
+        },
+        {
+            variant: 'text',
+            color: 'bullish',
+            class: [
+                colorVariants.text.bullish
+            ]
+        },
+        {
+            variant: 'text',
+            color: 'bearish',
+            class: [
+                colorVariants.text.bearish
+            ]
+        },
+        {
+            isSelected: true,
+            color: 'default',
+            variant: 'solid',
+            class: 'bg-foreground-100'
+        },
+        {
+            isSelected: true,
+            variant: 'light',
+            color: 'default',
+            class: colorVariants.flat["default"]
+        },
+        {
+            isSelected: true,
+            variant: 'light',
+            color: 'primary',
+            class: colorVariants.flat.primary
+        },
+        {
+            isSelected: true,
+            variant: 'light',
+            color: 'secondary',
+            class: colorVariants.flat.secondary
+        },
+        {
+            isSelected: true,
+            variant: 'light',
+            color: 'success',
+            class: colorVariants.flat.success
+        },
+        {
+            isSelected: true,
+            variant: 'light',
+            color: 'warning',
+            class: colorVariants.flat.warning
+        },
+        {
+            isSelected: true,
+            variant: 'light',
+            color: 'danger',
+            class: colorVariants.flat.danger
+        },
+        {
+            isSelected: true,
+            variant: 'light',
+            color: 'bullish',
+            class: colorVariants.flat.bullish
+        },
+        {
+            isSelected: true,
+            variant: 'light',
+            color: 'bearish',
+            class: colorVariants.flat.bearish
+        },
+        {
+            isSelected: true,
+            variant: 'flat',
+            color: 'default',
+            class: colorVariants.solid["default"]
+        },
+        {
+            isSelected: true,
+            variant: 'flat',
+            color: 'primary',
+            class: colorVariants.solid.primary
+        },
+        {
+            isSelected: true,
+            variant: 'flat',
+            color: 'success',
+            class: colorVariants.solid.success
+        },
+        {
+            isSelected: true,
+            variant: 'flat',
+            color: 'warning',
+            class: colorVariants.solid.warning
+        },
+        {
+            isSelected: true,
+            variant: 'flat',
+            color: 'danger',
+            class: colorVariants.solid.danger
+        },
+        {
+            isSelected: true,
+            variant: 'flat',
+            color: 'bullish',
+            class: colorVariants.solid.bullish
+        },
+        {
+            isSelected: true,
+            variant: 'flat',
+            color: 'bearish',
+            class: colorVariants.solid.bearish
+        },
+        {
+            isInGroup: true,
+            class: 'rounded-none first:rounded-s-small last:rounded-e-small'
+        },
+        {
+            isInGroup: true,
+            size: 'sm',
+            class: 'rounded-none first:rounded-s-small last:rounded-e-small'
+        },
+        {
+            isInGroup: true,
+            size: 'md',
+            class: 'rounded-none first:rounded-s-small last:rounded-e-small'
+        },
+        {
+            isInGroup: true,
+            size: 'lg',
+            class: 'rounded-none first:rounded-s-medium last:rounded-e-medium'
+        },
+        {
+            isInGroup: true,
+            isRounded: true,
+            class: 'rounded-none first:rounded-s-full last:rounded-e-full'
+        },
+        {
+            isInGroup: true,
+            radius: 'none',
+            class: 'rounded-none first:rounded-s-none last:rounded-e-none'
+        },
+        {
+            isInGroup: true,
+            radius: 'sm',
+            class: 'rounded-none first:rounded-s-small last:rounded-e-small'
+        },
+        {
+            isInGroup: true,
+            radius: 'md',
+            class: 'rounded-none first:rounded-s-medium last:rounded-e-medium'
+        },
+        {
+            isInGroup: true,
+            radius: 'lg',
+            class: 'rounded-none first:rounded-s-large last:rounded-e-large'
+        },
+        {
+            isInGroup: true,
+            radius: 'full',
+            class: 'rounded-none first:rounded-s-full last:rounded-e-full'
+        },
+        {
+            isInGroup: true,
+            variant: [
+                'ghost',
+                'bordered'
+            ],
+            color: 'default',
+            class: collapseAdjacentVariantBorders["default"]
+        },
+        {
+            isInGroup: true,
+            variant: [
+                'ghost',
+                'bordered'
+            ],
+            color: 'primary',
+            class: collapseAdjacentVariantBorders.primary
+        },
+        {
+            isInGroup: true,
+            variant: [
+                'ghost',
+                'bordered'
+            ],
+            color: 'secondary',
+            class: collapseAdjacentVariantBorders.secondary
+        },
+        {
+            isInGroup: true,
+            variant: [
+                'ghost',
+                'bordered'
+            ],
+            color: 'success',
+            class: collapseAdjacentVariantBorders.success
+        },
+        {
+            isInGroup: true,
+            variant: [
+                'ghost',
+                'bordered'
+            ],
+            color: 'warning',
+            class: collapseAdjacentVariantBorders.warning
+        },
+        {
+            isInGroup: true,
+            variant: [
+                'ghost',
+                'bordered'
+            ],
+            color: 'danger',
+            class: collapseAdjacentVariantBorders.danger
+        },
+        {
+            isInGroup: true,
+            variant: [
+                'ghost',
+                'bordered'
+            ],
+            color: 'bullish',
+            class: collapseAdjacentVariantBorders.bullish
+        },
+        {
+            isInGroup: true,
+            variant: [
+                'ghost',
+                'bordered'
+            ],
+            color: 'bearish',
+            class: collapseAdjacentVariantBorders.bearish
+        },
+        {
+            isIconOnly: true,
+            size: 'sm',
+            class: 'min-w-6 w-6 h-6'
+        },
+        {
+            isIconOnly: true,
+            size: 'md',
+            class: 'min-w-[30px] w-[30px] h-[30px]'
+        },
+        {
+            isIconOnly: true,
+            size: 'lg',
+            class: 'min-w-11 w-11 h-11'
+        },
+        {
+            isIconOnly: true,
+            size: 'auto',
+            class: ''
+        },
+        {
+            variant: [
+                'solid',
+                'faded',
+                'flat',
+                'bordered',
+                'shadow',
+                'text'
+            ],
+            class: 'data-[hover=true]:opacity-hover'
+        }
+    ]
+});
+const buttonGroup = tv({
+    base: 'inline-flex items-center justify-center h-auto',
+    variants: {
+        fullWidth: {
+            true: 'w-full'
+        }
+    },
+    defaultVariants: {
+        fullWidth: false
+    }
+});
+export { button_theme_button as button, buttonGroup };

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

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

package/dist/components/UXButton/button.js

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Ripple } from "@heroui/ripple";
+import { Spinner } from "@heroui/spinner";
+import { forwardRef } from "@heroui/system";
+import { useButton } from "./use-button.js";
+const Button = forwardRef((props, ref)=>{
+    const { Component, domRef, children, spinnerSize, spinner = /*#__PURE__*/ jsx(Spinner, {
+        color: "current",
+        size: spinnerSize
+    }), spinnerPlacement, startContent, endContent, isLoading, disableRipple, getButtonProps, getRippleProps, isIconOnly } = useButton({
+        ...props,
+        ref
+    });
+    return /*#__PURE__*/ jsxs(Component, {
+        ref: domRef,
+        ...getButtonProps(),
+        children: [
+            startContent,
+            isLoading && 'start' === spinnerPlacement ? spinner : null,
+            isLoading && isIconOnly ? null : children,
+            isLoading && 'end' === spinnerPlacement ? spinner : null,
+            endContent,
+            !disableRipple && /*#__PURE__*/ jsx(Ripple, {
+                ...getRippleProps()
+            })
+        ]
+    });
+});
+Button.displayName = 'HeroUI.Button';
+const UXButton_button = Button;
+export { UXButton_button as default };

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

@@ -0,0 +1,8 @@
+import UXButton from './button';
+import UXButtonGroup from './button-group';
+export type { ButtonProps as UXButtonProps } from './button';
+export type { ButtonGroupProps as UXButtonGroupProps } from './button-group';
+export { useButton as useUXButton } from './use-button';
+export { useButtonGroup as useUXButtonGroup } from './use-button-group';
+export { ButtonGroupProvider, useButtonGroupContext } from './button-group-context';
+export { UXButton, UXButtonGroup };

package/dist/components/UXButton/index.js

@@ -0,0 +1,6 @@
+import button_0 from "./button.js";
+import button_group from "./button-group.js";
+import { useButton } from "./use-button.js";
+import { useButtonGroup } from "./use-button-group.js";
+import { ButtonGroupProvider, useButtonGroupContext } from "./button-group-context.js";
+export { ButtonGroupProvider, button_0 as UXButton, button_group as UXButtonGroup, useButtonGroupContext, useButton as useUXButton, useButtonGroup as useUXButtonGroup };