@particle-network/ui-react 0.0.1

package/dist/components/UXTabs/tabs.classes.js

@@ -0,0 +1,530 @@
+import { colorVariants } from "../../utils/index.js";
+const tabsClasses = {
+    variants: {
+        variant: {
+            solid: {
+                tabList: 'gap-0 bg-background-400',
+                tab: 'py-0',
+                cursor: 'shadow-none inset-0',
+                tabContent: 'text-foreground-300 font-medium'
+            },
+            switch: {
+                tabList: 'p-0 gap-0 bg-background-200',
+                tab: 'py-0',
+                cursor: 'shadow-none inset-0',
+                tabContent: 'text-foreground-300 font-medium'
+            },
+            light: {
+                tabList: 'p-0 gap-md rounded-none bg-transparent dark:bg-transparent',
+                tab: 'py-0 h-full',
+                cursor: 'shadow-none',
+                tabContent: 'text-foreground-300 font-medium'
+            },
+            text: {
+                tabList: 'p-0 rounded-none bg-transparent dark:bg-transparent',
+                tab: 'font-medium p-0 h-fit rounded-none',
+                tabContent: 'text-foreground-300 font-medium',
+                cursor: 'hidden'
+            }
+        },
+        size: {
+            sm: {},
+            md: {},
+            lg: {}
+        },
+        color: {
+            default: {},
+            primary: {},
+            secondary: {},
+            success: {},
+            alert: {},
+            warning: {},
+            danger: {},
+            bullish: {},
+            bearish: {}
+        },
+        radius: {
+            none: {
+                tabList: 'rounded-none',
+                tab: 'rounded-none',
+                cursor: 'rounded-none'
+            },
+            sm: {
+                tabList: 'rounded-medium',
+                tab: 'rounded-small',
+                cursor: 'rounded-small'
+            },
+            md: {
+                tabList: 'rounded-medium',
+                tab: 'rounded-small',
+                cursor: 'rounded-small'
+            },
+            lg: {
+                tabList: 'rounded-large',
+                tab: 'rounded-medium',
+                cursor: 'rounded-medium'
+            },
+            full: {
+                tabList: 'rounded-full',
+                tab: 'rounded-full',
+                cursor: 'rounded-full'
+            }
+        },
+        fullWidth: {
+            true: {
+                base: 'w-full',
+                tabList: 'w-full'
+            }
+        },
+        isDisabled: {
+            true: {
+                tabList: 'opacity-disabled pointer-events-none'
+            }
+        },
+        disableAnimation: {
+            true: {
+                tab: 'transition-none',
+                tabContent: 'transition-none'
+            }
+        },
+        placement: {
+            top: {
+                panel: 'py-3 px-0'
+            },
+            start: {
+                tabList: 'flex-col',
+                panel: 'py-0 px-3',
+                tabWrapper: 'flex'
+            },
+            end: {
+                tabList: 'flex-col',
+                panel: 'py-0 px-3',
+                tabWrapper: 'flex flex-row-reverse'
+            },
+            bottom: {
+                tabWrapper: 'flex flex-col-reverse'
+            }
+        }
+    },
+    defaultVariants: {
+        color: 'default',
+        variant: 'solid',
+        size: 'md',
+        fullWidth: false,
+        isDisabled: false,
+        placement: 'top'
+    },
+    compoundVariants: [
+        {
+            variant: [
+                'text'
+            ],
+            size: 'sm',
+            class: {
+                tabList: 'gap-lg',
+                tab: 'text-body2'
+            }
+        },
+        {
+            variant: [
+                'text'
+            ],
+            size: 'md',
+            class: {
+                tabList: 'gap-5',
+                tab: 'text-body1'
+            }
+        },
+        {
+            variant: [
+                'text'
+            ],
+            size: 'lg',
+            class: {
+                tabList: 'gap-6',
+                tab: 'text-h3'
+            }
+        },
+        {
+            variant: [
+                'light'
+            ],
+            size: 'sm',
+            class: {
+                tabList: 'h-6',
+                tab: 'text-tiny rounded-small px-2',
+                cursor: 'rounded-small'
+            }
+        },
+        {
+            variant: [
+                'light'
+            ],
+            size: 'md',
+            class: {
+                tabList: 'h-[30px]',
+                tab: 'text-small rounded-none px-md',
+                cursor: 'rounded-small'
+            }
+        },
+        {
+            variant: [
+                'light'
+            ],
+            size: 'lg',
+            class: {
+                tabList: 'h-[34px]',
+                tab: 'text-medium rounded-small',
+                cursor: 'rounded-small'
+            }
+        },
+        {
+            variant: [
+                'solid'
+            ],
+            size: 'sm',
+            class: {
+                tabList: 'rounded-small p-0.5',
+                tab: 'h-5 text-tiny rounded-none',
+                cursor: 'rounded-small'
+            }
+        },
+        {
+            variant: [
+                'solid'
+            ],
+            size: 'md',
+            class: {
+                tabList: 'rounded-small p-0.5',
+                tab: 'h-[30px] text-medium rounded-none',
+                cursor: 'rounded-small'
+            }
+        },
+        {
+            variant: [
+                'solid'
+            ],
+            size: 'lg',
+            class: {
+                tabList: 'rounded-medium',
+                tab: 'h-9 text-medium',
+                cursor: 'rounded-small'
+            }
+        },
+        {
+            variant: [
+                'switch'
+            ],
+            size: 'sm',
+            class: {
+                tabList: 'rounded-small',
+                tab: 'h-6 text-tiny rounded-none',
+                cursor: 'rounded-small'
+            }
+        },
+        {
+            variant: [
+                'switch'
+            ],
+            size: 'md',
+            class: {
+                tabList: 'rounded-small',
+                tab: 'h-[30px] text-medium rounded-none',
+                cursor: 'rounded-small'
+            }
+        },
+        {
+            variant: [
+                'switch'
+            ],
+            size: 'lg',
+            class: {
+                tabList: 'rounded-medium',
+                tab: 'h-[34px] text-medium',
+                cursor: 'rounded-small'
+            }
+        },
+        {
+            variant: [
+                'solid'
+            ],
+            color: 'default',
+            class: {
+                cursor: [
+                    'bg-background-200'
+                ],
+                tabContent: 'group-data-[selected=true]:text-default-foreground'
+            }
+        },
+        {
+            variant: [
+                'switch'
+            ],
+            color: 'default',
+            class: {
+                cursor: [
+                    'bg-foreground-100'
+                ],
+                tabContent: 'group-data-[selected=true]:text-default-foreground'
+            }
+        },
+        {
+            variant: [
+                'light'
+            ],
+            color: 'default',
+            class: {
+                cursor: [
+                    'bg-background-300'
+                ],
+                tabContent: 'group-data-[selected=true]:text-default-foreground'
+            }
+        },
+        {
+            variant: [
+                'solid',
+                'switch',
+                'light'
+            ],
+            color: 'primary',
+            class: {
+                cursor: colorVariants.solid.primary,
+                tabContent: 'group-data-[selected=true]:text-primary-foreground'
+            }
+        },
+        {
+            variant: [
+                'solid',
+                'switch',
+                'light'
+            ],
+            color: 'success',
+            class: {
+                cursor: colorVariants.solid.success,
+                tabContent: 'group-data-[selected=true]:text-success-foreground'
+            }
+        },
+        {
+            variant: [
+                'solid',
+                'switch',
+                'light'
+            ],
+            color: 'warning',
+            class: {
+                cursor: colorVariants.solid.warning,
+                tabContent: 'group-data-[selected=true]:text-warning-foreground'
+            }
+        },
+        {
+            variant: [
+                'solid',
+                'switch',
+                'light'
+            ],
+            color: 'danger',
+            class: {
+                cursor: colorVariants.solid.danger,
+                tabContent: 'group-data-[selected=true]:text-danger-foreground'
+            }
+        },
+        {
+            variant: [
+                'solid',
+                'switch',
+                'light'
+            ],
+            color: 'bullish',
+            class: {
+                cursor: colorVariants.solid.bullish,
+                tabContent: 'group-data-[selected=true]:text-bullish-foreground'
+            }
+        },
+        {
+            variant: [
+                'solid',
+                'switch',
+                'light'
+            ],
+            color: 'bearish',
+            class: {
+                cursor: colorVariants.solid.bearish,
+                tabContent: 'group-data-[selected=true]:text-bearish-foreground'
+            }
+        },
+        {
+            variant: 'text',
+            color: 'default',
+            class: {
+                tabContent: 'group-data-[selected=true]:text-foreground'
+            }
+        },
+        {
+            variant: 'text',
+            color: 'primary',
+            class: {
+                tabContent: 'group-data-[selected=true]:text-primary'
+            }
+        },
+        {
+            variant: 'text',
+            color: 'success',
+            class: {
+                tabContent: 'group-data-[selected=true]:text-success'
+            }
+        },
+        {
+            variant: 'text',
+            color: 'warning',
+            class: {
+                tabContent: 'group-data-[selected=true]:text-warning'
+            }
+        },
+        {
+            variant: 'text',
+            color: 'danger',
+            class: {
+                tabContent: 'group-data-[selected=true]:text-danger'
+            }
+        },
+        {
+            variant: 'text',
+            color: 'bullish',
+            class: {
+                tabContent: 'group-data-[selected=true]:text-bullish'
+            }
+        },
+        {
+            variant: 'text',
+            color: 'bearish',
+            class: {
+                tabContent: 'group-data-[selected=true]:text-bearish'
+            }
+        },
+        {
+            disableAnimation: true,
+            variant: 'text',
+            class: {
+                tab: [
+                    "after:content-['']",
+                    'after:absolute',
+                    'after:bottom-0',
+                    'after:h-[2px]',
+                    'after:w-[80%]',
+                    'after:opacity-0',
+                    'after:shadow-[0_1px_0px_0_rgba(0,0,0,0.05)]',
+                    'data-[selected=true]:after:opacity-100'
+                ]
+            }
+        },
+        {
+            disableAnimation: true,
+            color: 'default',
+            variant: [
+                'solid',
+                'light'
+            ],
+            class: {
+                tab: 'data-[selected=true]:bg-default data-[selected=true]:text-default-foreground'
+            }
+        },
+        {
+            disableAnimation: true,
+            color: 'primary',
+            variant: [
+                'solid',
+                'light'
+            ],
+            class: {
+                tab: 'data-[selected=true]:bg-primary data-[selected=true]:text-primary-foreground'
+            }
+        },
+        {
+            disableAnimation: true,
+            color: 'success',
+            variant: [
+                'solid',
+                'light'
+            ],
+            class: {
+                tab: 'data-[selected=true]:bg-success data-[selected=true]:text-success-foreground'
+            }
+        },
+        {
+            disableAnimation: true,
+            color: 'warning',
+            variant: [
+                'solid',
+                'light'
+            ],
+            class: {
+                tab: 'data-[selected=true]:bg-warning data-[selected=true]:text-warning-foreground'
+            }
+        },
+        {
+            disableAnimation: true,
+            color: 'danger',
+            variant: [
+                'solid',
+                'light'
+            ],
+            class: {
+                tab: 'data-[selected=true]:bg-danger data-[selected=true]:text-danger-foreground'
+            }
+        },
+        {
+            disableAnimation: true,
+            color: 'default',
+            variant: 'text',
+            class: {
+                tab: 'data-[selected=true]:after:bg-foreground'
+            }
+        },
+        {
+            disableAnimation: true,
+            color: 'primary',
+            variant: 'text',
+            class: {
+                tab: 'data-[selected=true]:after:bg-primary'
+            }
+        },
+        {
+            disableAnimation: true,
+            color: 'success',
+            variant: 'text',
+            class: {
+                tab: 'data-[selected=true]:after:bg-success'
+            }
+        },
+        {
+            disableAnimation: true,
+            color: 'warning',
+            variant: 'text',
+            class: {
+                tab: 'data-[selected=true]:after:bg-warning'
+            }
+        },
+        {
+            disableAnimation: true,
+            color: 'danger',
+            variant: 'text',
+            class: {
+                tab: 'data-[selected=true]:after:bg-danger'
+            }
+        }
+    ],
+    compoundSlots: [
+        {
+            variant: 'text',
+            slots: [
+                'tab',
+                'tabList',
+                'cursor'
+            ],
+            class: [
+                'rounded-none'
+            ]
+        }
+    ]
+};
+export { tabsClasses };

package/dist/components/UXTabs/tabs.extend.d.ts

@@ -0,0 +1,8 @@
+import type React from 'react';
+import { type TabsProps } from '@heroui/tabs';
+type ExtendedTabsProps = Omit<TabsProps, 'variant' | 'color'> & {
+    variant?: 'solid' | 'light' | 'text' | 'switch';
+    color?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'bullish' | 'bearish';
+};
+declare const ExtendedTabs: React.ForwardRefExoticComponent<ExtendedTabsProps>;
+export default ExtendedTabs;

package/dist/components/UXTabs/tabs.extend.js

@@ -0,0 +1,6 @@
+import { extendVariants } from "@heroui/system-rsc";
+import { Tabs } from "@heroui/tabs";
+import { tabsClasses } from "./tabs.classes.js";
+const ExtendedTabs = extendVariants(Tabs, tabsClasses);
+const tabs_extend = ExtendedTabs;
+export { tabs_extend as default };

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import ExtendedTooltip from './tooltip.extend';
+export type UXTooltipProps = React.ComponentPropsWithRef<typeof ExtendedTooltip>;
+declare const UXTooltip: React.FC<UXTooltipProps>;
+export default UXTooltip;

package/dist/components/UXTooltip/index.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import tooltip_extend from "./tooltip.extend.js";
+const renderContent = (content)=>{
+    if (!content || 'string' != typeof content) return null;
+    if (!content.includes('\n')) return content;
+    return content.split('\n').flatMap((x, i, arr)=>i < arr.length - 1 ? [
+            x,
+            /*#__PURE__*/ jsx("br", {}, i)
+        ] : [
+            x
+        ]);
+};
+const UXTooltip_UXTooltip = (props)=>{
+    const { content, ...restProps } = props;
+    return /*#__PURE__*/ jsx(tooltip_extend, {
+        content: renderContent(content),
+        ...restProps
+    });
+};
+UXTooltip_UXTooltip.displayName = 'UX.Tooltip';
+const UXTooltip = UXTooltip_UXTooltip;
+export { UXTooltip as default };