@particle-network/ui-react 0.0.1

package/dist/utils/input-classes.js

@@ -0,0 +1,568 @@
+const inputClasses = {
+    defaultVariants: {
+        variant: 'flat',
+        color: 'primary',
+        size: 'md',
+        fullWidth: true,
+        labelPlacement: 'inside',
+        isDisabled: false,
+        hideStepper: true,
+        textAlign: 'left'
+    },
+    variants: {
+        variant: {
+            flat: {
+                inputWrapper: [
+                    'bg-background-200',
+                    'data-[hover=true]:bg-background-200/70',
+                    'group-data-[focus=true]:border',
+                    'group-data-[focus=true]:bg-background-200'
+                ]
+            },
+            bordered: {
+                inputWrapper: [
+                    'border-small',
+                    'data-[hover=true]:bg-background-200/70',
+                    'group-data-[focus=true]:border'
+                ]
+            }
+        },
+        textAlign: {
+            left: {
+                input: 'text-left'
+            },
+            center: {
+                input: 'text-center'
+            },
+            right: {
+                input: 'text-right'
+            }
+        },
+        color: {
+            default: {
+                inputWrapper: 'caret-foreground',
+                input: 'text-foreground-100'
+            },
+            primary: {
+                inputWrapper: 'caret-primary',
+                stepperButton: 'text-primary'
+            },
+            secondary: {
+                inputWrapper: 'caret-foreground',
+                input: 'text-foreground-300'
+            },
+            success: {
+                inputWrapper: 'caret-success',
+                stepperButton: 'text-success'
+            },
+            warning: {
+                inputWrapper: 'caret-warning',
+                stepperButton: 'text-warning'
+            },
+            danger: {
+                inputWrapper: 'caret-danger',
+                stepperButton: 'text-danger'
+            },
+            bullish: {
+                inputWrapper: 'caret-bullish',
+                stepperButton: 'text-bullish'
+            },
+            bearish: {
+                inputWrapper: 'caret-bearish',
+                stepperButton: 'text-bearish'
+            }
+        },
+        size: {
+            sm: {
+                label: 'text-tiny text-foreground-300',
+                inputWrapper: 'text-tiny h-6 min-h-6 px-2 rounded-small',
+                input: 'text-tiny',
+                clearButton: 'text-medium'
+            },
+            md: {
+                label: 'text-tiny text-foreground-300',
+                inputWrapper: 'text-tiny h-[30px] min-h-[30px] rounded-small',
+                input: 'text-tiny',
+                clearButton: 'text-large'
+            },
+            lg: {
+                label: 'text-small text-foreground-300',
+                inputWrapper: 'text-small h-11 min-h-11 rounded-medium',
+                input: 'text-small',
+                clearButton: 'text-large'
+            }
+        },
+        radius: {
+            none: {
+                inputWrapper: 'rounded-none'
+            },
+            sm: {
+                inputWrapper: 'rounded-small'
+            },
+            md: {
+                inputWrapper: 'rounded-medium'
+            },
+            lg: {
+                inputWrapper: 'rounded-large'
+            },
+            full: {
+                inputWrapper: 'rounded-full'
+            }
+        },
+        labelPlacement: {
+            inside: {
+                label: 'cursor-text',
+                inputWrapper: 'flex-col items-start justify-center gap-0',
+                innerWrapper: 'group-data-[has-label=true]:items-end'
+            }
+        },
+        fullWidth: {
+            true: {
+                base: 'w-full'
+            },
+            false: {}
+        },
+        isClearable: {
+            true: {
+                input: 'peer pe-6 input-search-cancel-button-none',
+                clearButton: [
+                    'peer-data-[filled=true]:pointer-events-auto',
+                    'peer-data-[filled=true]:opacity-70 peer-data-[filled=true]:block',
+                    'peer-data-[filled=true]:scale-100'
+                ]
+            }
+        },
+        isDisabled: {
+            true: {
+                base: 'opacity-disabled pointer-events-none',
+                inputWrapper: 'pointer-events-none',
+                label: 'pointer-events-none'
+            }
+        },
+        isInvalid: {
+            true: {
+                inputWrapper: 'group-data-[focus=true]:border-danger caret-danger',
+                label: 'text-danger',
+                input: 'placeholder:text-danger text-danger'
+            }
+        },
+        isRequired: {
+            true: {
+                label: "after:content-['*'] after:text-danger after:ms-0.5"
+            }
+        },
+        disableAnimation: {
+            true: {
+                input: 'transition-none',
+                inputWrapper: 'transition-none',
+                label: 'transition-none'
+            },
+            false: {
+                inputWrapper: 'transition-background motion-reduce:transition-none !duration-150',
+                label: [
+                    'will-change-auto',
+                    '!duration-200',
+                    '!ease-out',
+                    'motion-reduce:transition-none',
+                    'transition-[transform,color,left,opacity]'
+                ],
+                clearButton: [
+                    'scale-90',
+                    'ease-out',
+                    'duration-150',
+                    'transition-[opacity,transform]',
+                    'motion-reduce:transition-none',
+                    'motion-reduce:scale-100'
+                ]
+            }
+        }
+    },
+    compoundVariants: [
+        {
+            size: [
+                'sm',
+                'md',
+                'lg'
+            ],
+            class: {
+                inputWrapper: 'bg-background-200 text-foreground-100 font-medium',
+                label: 'font-medium',
+                input: '!outline-none placeholder:text-foreground-100 placeholder:font-medium font-medium text-foreground'
+            }
+        },
+        {
+            variant: 'flat',
+            color: 'default',
+            isInvalid: false,
+            class: {
+                inputWrapper: 'group-data-[focus=true]:border-foreground-100'
+            }
+        },
+        {
+            variant: 'flat',
+            color: 'primary',
+            isInvalid: false,
+            class: {
+                inputWrapper: 'group-data-[focus=true]:border-primary'
+            }
+        },
+        {
+            variant: 'flat',
+            color: 'secondary',
+            isInvalid: false,
+            class: {
+                inputWrapper: 'group-data-[focus=true]:border-foreground-300'
+            }
+        },
+        {
+            variant: 'flat',
+            color: 'success',
+            isInvalid: false,
+            class: {
+                inputWrapper: 'group-data-[focus=true]:border-success'
+            }
+        },
+        {
+            variant: 'flat',
+            color: 'warning',
+            isInvalid: false,
+            class: {
+                inputWrapper: 'group-data-[focus=true]:border-warning'
+            }
+        },
+        {
+            variant: 'flat',
+            color: 'danger',
+            isInvalid: false,
+            class: {
+                inputWrapper: 'group-data-[focus=true]:border-danger'
+            }
+        },
+        {
+            variant: 'flat',
+            color: 'bullish',
+            isInvalid: false,
+            class: {
+                inputWrapper: 'group-data-[focus=true]:border-bullish'
+            }
+        },
+        {
+            variant: 'flat',
+            color: 'bearish',
+            isInvalid: false,
+            class: {
+                inputWrapper: 'group-data-[focus=true]:border-bearish'
+            }
+        },
+        {
+            variant: 'bordered',
+            color: 'default',
+            isInvalid: false,
+            class: {
+                inputWrapper: [
+                    'border-foreground-100',
+                    'data-[hover=true]:border-foreground-100',
+                    'group-data-[focus=true]:border-foreground-100'
+                ]
+            }
+        },
+        {
+            variant: 'bordered',
+            color: 'primary',
+            isInvalid: false,
+            class: {
+                inputWrapper: [
+                    'border-primary',
+                    'data-[hover=true]:border-primary',
+                    'group-data-[focus=true]:border-primary'
+                ]
+            }
+        },
+        {
+            variant: 'bordered',
+            color: 'secondary',
+            isInvalid: false,
+            class: {
+                inputWrapper: [
+                    'border-foreground-300',
+                    'data-[hover=true]:bg-background-200/70',
+                    'group-data-[focus=true]:border-foreground-300'
+                ]
+            }
+        },
+        {
+            variant: 'bordered',
+            color: 'success',
+            isInvalid: false,
+            class: {
+                inputWrapper: [
+                    'border-success',
+                    'data-[hover=true]:border-success',
+                    'group-data-[focus=true]:border-success'
+                ]
+            }
+        },
+        {
+            variant: 'bordered',
+            color: 'warning',
+            isInvalid: false,
+            class: {
+                inputWrapper: [
+                    'border-warning',
+                    'data-[hover=true]:border-warning',
+                    'group-data-[focus=true]:border-warning'
+                ]
+            }
+        },
+        {
+            variant: 'bordered',
+            color: 'danger',
+            isInvalid: false,
+            class: {
+                inputWrapper: [
+                    'border-danger',
+                    'data-[hover=true]:border-danger',
+                    'group-data-[focus=true]:border-danger'
+                ]
+            }
+        },
+        {
+            variant: 'bordered',
+            color: 'bullish',
+            isInvalid: false,
+            class: {
+                inputWrapper: [
+                    'border-bullish',
+                    'data-[hover=true]:border-bullish',
+                    'group-data-[focus=true]:border-bullish'
+                ]
+            }
+        },
+        {
+            variant: 'bordered',
+            color: 'bearish',
+            isInvalid: false,
+            class: {
+                inputWrapper: [
+                    'border-bearish',
+                    'data-[hover=true]:border-bearish',
+                    'group-data-[focus=true]:border-bearish'
+                ]
+            }
+        },
+        {
+            labelPlacement: 'inside',
+            color: 'default',
+            class: {
+                label: 'group-data-[filled-within=true]:text-default-600'
+            }
+        },
+        {
+            radius: 'full',
+            size: [
+                'sm'
+            ],
+            class: {
+                inputWrapper: 'px-3'
+            }
+        },
+        {
+            radius: 'full',
+            size: 'md',
+            class: {
+                inputWrapper: 'px-4'
+            }
+        },
+        {
+            radius: 'full',
+            size: 'lg',
+            class: {
+                inputWrapper: 'px-5'
+            }
+        },
+        {
+            disableAnimation: false,
+            variant: [
+                'bordered'
+            ],
+            class: {
+                inputWrapper: 'transition-colors motion-reduce:transition-none'
+            }
+        },
+        {
+            isInvalid: true,
+            variant: 'flat',
+            class: {
+                inputWrapper: [
+                    '!bg-danger-50',
+                    'data-[hover=true]:!bg-danger-100',
+                    'group-data-[focus=true]:!bg-danger-50'
+                ]
+            }
+        },
+        {
+            isInvalid: true,
+            variant: 'bordered',
+            class: {
+                inputWrapper: '!border-danger group-data-[focus=true]:!border-danger'
+            }
+        },
+        {
+            labelPlacement: 'inside',
+            size: 'sm',
+            class: {
+                inputWrapper: 'h-6 py-1.5 px-3'
+            }
+        },
+        {
+            labelPlacement: 'inside',
+            size: 'md',
+            class: {
+                inputWrapper: 'h-[30px] py-2'
+            }
+        },
+        {
+            labelPlacement: 'inside',
+            size: 'lg',
+            class: {
+                inputWrapper: 'h-11 py-2.5 gap-0'
+            }
+        },
+        {
+            labelPlacement: 'inside',
+            size: 'sm',
+            variant: [
+                'bordered',
+                'faded'
+            ],
+            class: {
+                inputWrapper: 'py-1'
+            }
+        },
+        {
+            labelPlacement: [
+                'inside',
+                'outside'
+            ],
+            class: {
+                label: [
+                    'group-data-[filled-within=true]:pointer-events-auto'
+                ]
+            }
+        },
+        {
+            labelPlacement: [
+                'inside'
+            ],
+            class: {
+                label: [
+                    'group-data-[filled-within=true]:scale-85'
+                ]
+            }
+        },
+        {
+            labelPlacement: 'inside',
+            size: 'sm',
+            class: {
+                label: [
+                    'group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px)]'
+                ]
+            }
+        },
+        {
+            labelPlacement: 'inside',
+            size: 'md',
+            class: {
+                label: [
+                    'group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px)]'
+                ]
+            }
+        },
+        {
+            labelPlacement: 'inside',
+            size: 'lg',
+            class: {
+                label: [
+                    'text-medium',
+                    'group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px)]'
+                ]
+            }
+        },
+        {
+            labelPlacement: [
+                'inside'
+            ],
+            variant: 'flat',
+            class: {
+                innerWrapper: 'pb-0'
+            }
+        },
+        {
+            labelPlacement: 'inside',
+            size: [
+                'sm',
+                'md'
+            ],
+            class: {
+                label: 'text-small',
+                stepperButton: 'before:h-6'
+            }
+        },
+        {
+            labelPlacement: 'inside',
+            variant: [
+                'faded',
+                'bordered'
+            ],
+            size: 'sm',
+            class: {
+                label: [
+                    'group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px_-_theme(borderWidth.medium))]'
+                ]
+            }
+        },
+        {
+            labelPlacement: 'inside',
+            variant: [
+                'faded',
+                'bordered'
+            ],
+            isMultiline: false,
+            size: 'md',
+            class: {
+                label: [
+                    'group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px_-_theme(borderWidth.medium))]'
+                ]
+            }
+        },
+        {
+            labelPlacement: 'inside',
+            variant: [
+                'faded',
+                'bordered'
+            ],
+            size: 'lg',
+            class: {
+                label: [
+                    'text-medium',
+                    'group-data-[filled-within=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px_-_theme(borderWidth.medium))]'
+                ]
+            }
+        },
+        {
+            labelPlacement: [
+                'inside',
+                'outside'
+            ],
+            class: {
+                label: [
+                    'pe-2',
+                    'max-w-full',
+                    'text-ellipsis',
+                    'overflow-hidden'
+                ]
+            }
+        }
+    ]
+};
+export { inputClasses };

package/dist/utils/variants.d.ts

@@ -0,0 +1,91 @@
+export declare const colorVariants: {
+    solid: {
+        default: string;
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+        danger: string;
+        foreground: string;
+        bullish: string;
+        bearish: string;
+        contrast: string;
+    };
+    shadow: {
+        default: string;
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+        danger: string;
+        foreground: string;
+        bullish: string;
+        bearish: string;
+    };
+    bordered: {
+        default: string;
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+        danger: string;
+        foreground: string;
+        bullish: string;
+        bearish: string;
+    };
+    flat: {
+        default: string;
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+        danger: string;
+        foreground: string;
+        bullish: string;
+        bearish: string;
+    };
+    faded: {
+        default: string;
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+        danger: string;
+        foreground: string;
+        bullish: string;
+        bearish: string;
+    };
+    light: {
+        default: string;
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+        danger: string;
+        foreground: string;
+        bullish: string;
+        bearish: string;
+    };
+    ghost: {
+        default: string;
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+        danger: string;
+        foreground: string;
+        bullish: string;
+        bearish: string;
+    };
+    text: {
+        default: string;
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+        danger: string;
+        foreground: string;
+        bullish: string;
+        bearish: string;
+    };
+};