@particle-network/ui-react 0.5.1-beta.0 → 0.5.1-beta.10

package/dist/components/typography/Text.type.js

@@ -1,47 +0,0 @@
-const textClasses = {
-    variant: {
-        h1: 'text-[1.5rem] leading-[1.75rem] font-semibold',
-        h2: 'text-[1.25rem] leading-[1.5rem] font-semibold',
-        h3: 'text-[1rem] leading-[1.25rem] font-semibold',
-        body1Bold: 'text-[0.875rem] leading-[1.125rem] font-medium',
-        body1: 'text-[0.875rem] leading-[1.125rem] font-normal',
-        body2Bold: 'text-[0.75rem] leading-[1rem] font-medium',
-        body2: 'text-[0.75rem] leading-[1rem] font-normal',
-        body3Bold: 'text-[0.6875rem] leading-[1rem] font-medium',
-        body3: 'text-[0.6875rem] leading-[1rem] font-normal',
-        caption1Bold: 'text-[0.625rem] leading-[0.875rem] font-medium',
-        caption1: 'text-[0.625rem] leading-[0.875rem] font-normal'
-    },
-    color: {
-        default: '',
-        foreground: 'text-foreground',
-        secondary: 'text-foreground-300',
-        white: 'text-white',
-        tertiary: 'text-foreground-100',
-        primary: 'text-primary',
-        success: 'text-success',
-        danger: 'text-danger',
-        alert: 'text-alert',
-        warning: 'text-warning',
-        gold: 'text-gold',
-        bullish: 'text-bullish',
-        bearish: 'text-bearish'
-    },
-    fontWeight: {
-        normal: 'font-normal',
-        medium: 'font-medium',
-        semibold: 'font-semibold',
-        bold: 'font-bold',
-        extrabold: 'font-extrabold'
-    },
-    lineHeight: {
-        1: 'leading-none',
-        '1.4': 'leading-[1.4]'
-    },
-    align: {
-        left: 'text-left',
-        center: 'text-center',
-        right: 'text-right'
-    }
-};
-export { textClasses };

package/dist/components/typography/text-theme.d.ts

@@ -0,0 +1,178 @@
+export declare const textVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        h1: string;
+        h2: string;
+        h3: string;
+        body1Bold: string;
+        body1: string;
+        body2Bold: string;
+        body2: string;
+        body3Bold: string;
+        body3: string;
+        caption1Bold: string;
+        caption1: string;
+    };
+    h1: {
+        true: string;
+    };
+    h2: {
+        true: string;
+    };
+    h3: {
+        true: string;
+    };
+    body1Bold: {
+        true: string;
+    };
+    body1: {
+        true: string;
+    };
+    body2Bold: {
+        true: string;
+    };
+    body2: {
+        true: string;
+    };
+    body3Bold: {
+        true: string;
+    };
+    body3: {
+        true: string;
+    };
+    caption1Bold: {
+        true: string;
+    };
+    caption1: {
+        true: string;
+    };
+    fontWeight: {
+        normal: string;
+        medium: string;
+        semibold: string;
+        bold: string;
+        extrabold: string;
+    };
+    lineHeight: {
+        none: string;
+        '1': string;
+        '1.4': string;
+    };
+}, undefined, "ux-text-base", {
+    variant: {
+        h1: string;
+        h2: string;
+        h3: string;
+        body1Bold: string;
+        body1: string;
+        body2Bold: string;
+        body2: string;
+        body3Bold: string;
+        body3: string;
+        caption1Bold: string;
+        caption1: string;
+    };
+    h1: {
+        true: string;
+    };
+    h2: {
+        true: string;
+    };
+    h3: {
+        true: string;
+    };
+    body1Bold: {
+        true: string;
+    };
+    body1: {
+        true: string;
+    };
+    body2Bold: {
+        true: string;
+    };
+    body2: {
+        true: string;
+    };
+    body3Bold: {
+        true: string;
+    };
+    body3: {
+        true: string;
+    };
+    caption1Bold: {
+        true: string;
+    };
+    caption1: {
+        true: string;
+    };
+    fontWeight: {
+        normal: string;
+        medium: string;
+        semibold: string;
+        bold: string;
+        extrabold: string;
+    };
+    lineHeight: {
+        none: string;
+        '1': string;
+        '1.4': string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        h1: string;
+        h2: string;
+        h3: string;
+        body1Bold: string;
+        body1: string;
+        body2Bold: string;
+        body2: string;
+        body3Bold: string;
+        body3: string;
+        caption1Bold: string;
+        caption1: string;
+    };
+    h1: {
+        true: string;
+    };
+    h2: {
+        true: string;
+    };
+    h3: {
+        true: string;
+    };
+    body1Bold: {
+        true: string;
+    };
+    body1: {
+        true: string;
+    };
+    body2Bold: {
+        true: string;
+    };
+    body2: {
+        true: string;
+    };
+    body3Bold: {
+        true: string;
+    };
+    body3: {
+        true: string;
+    };
+    caption1Bold: {
+        true: string;
+    };
+    caption1: {
+        true: string;
+    };
+    fontWeight: {
+        normal: string;
+        medium: string;
+        semibold: string;
+        bold: string;
+        extrabold: string;
+    };
+    lineHeight: {
+        none: string;
+        '1': string;
+        '1.4': string;
+    };
+}, undefined, "ux-text-base", unknown, unknown, undefined>>;

package/dist/components/typography/text-theme.js

@@ -0,0 +1,79 @@
+import { tv } from "@heroui/theme";
+const h1 = 'text-[1.5rem] leading-[1.75rem] font-semibold';
+const h2 = 'text-[1.25rem] leading-[1.5rem] font-semibold';
+const h3 = 'text-[1rem] leading-[1.25rem] font-semibold';
+const body1Bold = 'text-[0.875rem] leading-[1.125rem] font-medium';
+const body1 = 'text-[0.875rem] leading-[1.125rem] font-normal';
+const body2Bold = 'text-[0.75rem] leading-[1rem] font-medium';
+const body2 = 'text-[0.75rem] leading-[1rem] font-normal';
+const body3Bold = 'text-[0.6875rem] leading-[1rem] font-medium';
+const body3 = 'text-[0.6875rem] leading-[1rem] font-normal';
+const caption1Bold = 'text-[0.625rem] leading-[0.875rem] font-medium';
+const caption1 = 'text-[0.625rem] leading-[0.875rem] font-normal';
+const textVariants = tv({
+    base: 'ux-text-base',
+    variants: {
+        variant: {
+            h1,
+            h2,
+            h3,
+            body1Bold,
+            body1,
+            body2Bold,
+            body2,
+            body3Bold,
+            body3,
+            caption1Bold,
+            caption1
+        },
+        h1: {
+            true: h1
+        },
+        h2: {
+            true: h2
+        },
+        h3: {
+            true: h3
+        },
+        body1Bold: {
+            true: body1Bold
+        },
+        body1: {
+            true: body1
+        },
+        body2Bold: {
+            true: body2Bold
+        },
+        body2: {
+            true: body2
+        },
+        body3Bold: {
+            true: body3Bold
+        },
+        body3: {
+            true: body3
+        },
+        caption1Bold: {
+            true: caption1Bold
+        },
+        caption1: {
+            true: caption1
+        },
+        fontWeight: {
+            normal: 'font-normal',
+            medium: 'font-medium',
+            semibold: 'font-semibold',
+            bold: 'font-bold',
+            extrabold: 'font-extrabold'
+        },
+        lineHeight: {
+            none: 'leading-none',
+            1: 'leading-none',
+            '1.4': 'leading-[1.4]'
+        }
+    },
+    defaultVariants: {
+        variant: 'body2Bold'
+    }
+});
+export { textVariants };

package/dist/heroui/constants.d.ts

@@ -0,0 +1,18 @@
+import type { Config, ConfigColors, ConfigLayout } from './types';
+export declare const defaultDarkColorWeight = 20;
+export declare const defaultLightColorWeight = 17.5;
+export declare const colorWeight = 17.5;
+export declare const floatNumberPattern: RegExp;
+export declare const colorsId = "th-colors";
+export declare const defaultColorsId = "th-default-colors";
+export declare const baseColorsId = "th-base-colors";
+export declare const otherColorsId = "th-other-colors";
+export declare const showcaseId = "th-showcase";
+export declare const contentShowcaseId = "th-content-showcase";
+export declare const contentColorsId = "th-content-colors";
+export declare const configKey = "config";
+export declare const syncThemesKey = "sync-themes";
+export declare const initialLightTheme: ConfigColors;
+export declare const initialDarkTheme: ConfigColors;
+export declare const initialLayout: ConfigLayout;
+export declare const initialConfig: Config;

package/dist/heroui/constants.js

@@ -0,0 +1,98 @@
+import { colors } from "@heroui/theme";
+const defaultDarkColorWeight = 20;
+const defaultLightColorWeight = 17.5;
+const colorWeight = 17.5;
+const floatNumberPattern = /^\d+(\.\d*)?$/;
+const colorsId = 'th-colors';
+const defaultColorsId = 'th-default-colors';
+const baseColorsId = 'th-base-colors';
+const otherColorsId = 'th-other-colors';
+const showcaseId = 'th-showcase';
+const contentShowcaseId = 'th-content-showcase';
+const contentColorsId = 'th-content-colors';
+const configKey = 'config';
+const syncThemesKey = 'sync-themes';
+const initialLightTheme = {
+    defaultColor: {
+        default: '#d4d4d8'
+    },
+    baseColor: {
+        primary: colors.blue["500"],
+        secondary: colors.purple["500"],
+        success: colors.green["500"],
+        warning: colors.yellow["500"],
+        danger: colors.red["500"]
+    },
+    layoutColor: {
+        foreground: colors.black,
+        background: colors.white,
+        focus: colors.blue["500"],
+        overlay: colors.white
+    },
+    contentColor: {
+        content1: colors.white,
+        content2: colors.zinc["100"],
+        content3: colors.zinc["200"],
+        content4: colors.zinc["300"]
+    }
+};
+const initialDarkTheme = {
+    defaultColor: {
+        default: colors.zinc["700"]
+    },
+    baseColor: {
+        primary: colors.blue["500"],
+        secondary: colors.purple["500"],
+        success: colors.green["500"],
+        warning: colors.yellow["500"],
+        danger: colors.red["500"]
+    },
+    layoutColor: {
+        foreground: colors.white,
+        background: colors.black,
+        focus: colors.blue["500"],
+        overlay: colors.black
+    },
+    contentColor: {
+        content1: colors.zinc["900"],
+        content2: colors.zinc["800"],
+        content3: colors.zinc["700"],
+        content4: colors.zinc["600"]
+    }
+};
+const initialLayout = {
+    fontSize: {
+        tiny: '0.75',
+        small: '0.875',
+        medium: '1',
+        large: '1.125'
+    },
+    lineHeight: {
+        tiny: '1',
+        small: '1.25',
+        medium: '1.5',
+        large: '1.75'
+    },
+    radius: {
+        small: '0.5',
+        medium: '0.75',
+        large: '0.875'
+    },
+    borderWidth: {
+        small: '1',
+        medium: '2',
+        large: '3'
+    },
+    otherParams: {
+        disabledOpacity: '0.5',
+        dividerWeight: '1',
+        hoverOpacity: '0.9'
+    }
+};
+const initialConfig = {
+    name: 'heroui',
+    light: initialLightTheme,
+    dark: initialDarkTheme,
+    layout: initialLayout
+};
+export { baseColorsId, colorWeight, colorsId, configKey, contentColorsId, contentShowcaseId, defaultColorsId, defaultDarkColorWeight, defaultLightColorWeight, floatNumberPattern, initialConfig, initialDarkTheme, initialLayout, initialLightTheme, otherColorsId, showcaseId, syncThemesKey };

package/dist/heroui/types.d.ts

@@ -0,0 +1,91 @@
+export interface ColorShades {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+}
+export type ColorPickerType = 'background' | 'content1' | 'content2' | 'content3' | 'content4' | 'danger' | 'default' | 'divider' | 'focus' | 'foreground' | 'overlay' | 'primary' | 'secondary' | 'success' | 'warning';
+export type Color = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
+export type Size = 'sm' | 'md' | 'lg';
+export type Variant = 'dot' | 'solid' | 'faded' | 'bordered' | 'light' | 'flat' | 'ghost' | 'shadow' | 'underlined';
+export type Radius = 'none' | 'sm' | 'md' | 'lg' | 'full';
+export type HeroUIScaling = 90 | 95 | 100 | 105 | 110;
+export type Border = 'thin' | 'medium' | 'thick';
+export type FontName = 'Inter' | 'Roboto' | 'Outfit' | 'Lora';
+export type ThemeType = 'light' | 'dark';
+export interface ThemeColor extends ColorShades {
+    foreground: string;
+    DEFAULT: string;
+}
+export interface Config {
+    name: TemplateType;
+    light: ConfigColors;
+    dark: ConfigColors;
+    layout: ConfigLayout;
+}
+export interface ConfigColors {
+    defaultColor: {
+        default: string;
+    };
+    baseColor: {
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+        danger: string;
+    };
+    layoutColor: {
+        foreground: string;
+        background: string;
+        focus: string;
+        overlay: string;
+    };
+    contentColor: {
+        content1: string;
+        content2: string;
+        content3: string;
+        content4: string;
+    };
+}
+export interface ConfigLayout {
+    fontSize: {
+        tiny: string;
+        small: string;
+        medium: string;
+        large: string;
+    };
+    lineHeight: {
+        tiny: string;
+        small: string;
+        medium: string;
+        large: string;
+    };
+    radius: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    borderWidth: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    otherParams: {
+        disabledOpacity: string;
+        dividerWeight: string;
+        hoverOpacity: string;
+    };
+}
+export interface Template {
+    label: string;
+    name: TemplateType;
+    value: Config;
+}
+export type TemplateType = 'coffee' | 'emerald' | 'heroui' | 'elegant' | 'modern' | 'retro';
+export type FontType = 'Inter' | 'Roboto' | 'Outfit' | 'Lora';

package/dist/heroui/utils/colors.d.ts

@@ -0,0 +1,34 @@
+import type { ColorPickerType, ThemeType } from '../types';
+import Values from 'values.js';
+/**
+ * Convert color values to RGB
+ */
+export declare function colorValuesToRgb(value: Values): string;
+/**
+ * Convert hex color to HSL
+ */
+export declare function hexToHsl(hex: string): string;
+/**
+ * Get the color weight
+ */
+export declare function getColorWeight(colorType: ColorPickerType, theme: ThemeType): 20 | 17.5;
+/**
+ * Generate theme color
+ */
+export declare function generateThemeColor(color: string, type: ColorPickerType, theme: ThemeType): {
+    twTheme: {
+        foreground: string;
+        DEFAULT: string;
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    cssVariables: string[][];
+};

package/dist/heroui/utils/colors.js

@@ -0,0 +1,121 @@
+import { readableColor } from "color2k";
+import { colorWeight as external_constants_js_colorWeight, defaultDarkColorWeight, defaultLightColorWeight } from "../constants.js";
+import { swapColorValues } from "./object.js";
+import values_0 from "values.js";
+function colorValuesToRgb(value) {
+    return `rgba(${value.rgb.join(', ')}, ${value.alpha})`;
+}
+function hexToRgb(hex) {
+    let r = 0, g = 0, b = 0;
+    if (4 === hex.length || 5 === hex.length) {
+        r = parseInt(hex[1] + hex[1], 16);
+        g = parseInt(hex[2] + hex[2], 16);
+        b = parseInt(hex[3] + hex[3], 16);
+    } else if (7 === hex.length || 9 === hex.length) {
+        r = parseInt(hex.slice(1, 3), 16);
+        g = parseInt(hex.slice(3, 5), 16);
+        b = parseInt(hex.slice(5, 7), 16);
+    } else throw new Error('Invalid hex color format');
+    return [
+        r,
+        g,
+        b
+    ];
+}
+function hexToHsl(hex) {
+    const [r, g, b] = hexToRgb(hex);
+    const normalizedR = r / 255;
+    const normalizedG = g / 255;
+    const normalizedB = b / 255;
+    const max = Math.max(normalizedR, normalizedG, normalizedB);
+    const min = Math.min(normalizedR, normalizedG, normalizedB);
+    const lightness = (max + min) / 2;
+    if (max === min) return `0 0% ${100 * lightness}%`;
+    let saturation = 0;
+    saturation = lightness < 0.5 ? (max - min) / (max + min) : (max - min) / (2 - max - min);
+    let hue;
+    hue = max === normalizedR ? (normalizedG - normalizedB) / (max - min) : max === normalizedG ? 2 + (normalizedB - normalizedR) / (max - min) : 4 + (normalizedR - normalizedG) / (max - min);
+    hue *= 60;
+    if (hue < 0) hue += 360;
+    return `${hue.toFixed(2)} ${(100 * saturation).toFixed(2)}% ${(100 * lightness).toFixed(2)}%`;
+}
+function getColorWeight(colorType, theme) {
+    if ('default' === colorType) return 'dark' === theme ? defaultDarkColorWeight : defaultLightColorWeight;
+    return external_constants_js_colorWeight;
+}
+function rgbValueToHex(c) {
+    const hex = c.toString(16);
+    return 1 === hex.length ? `0${hex}` : hex;
+}
+function rgbToHex([r, g, b]) {
+    return `#${rgbValueToHex(r)}${rgbValueToHex(g)}${rgbValueToHex(b)}`;
+}
+function generateThemeColor(color, type, theme) {
+    const values = new values_0(color);
+    const colorWeight = getColorWeight(type, theme);
+    const colorValues = values.all(colorWeight);
+    const shades = colorValues.slice(0, colorValues.length - 1).reduce((acc, shadeValue, index)=>{
+        acc[0 === index ? 50 : 100 * index] = rgbToHex(shadeValue.rgb);
+        return acc;
+    }, {});
+    const twTheme = {
+        ...'light' === theme ? shades : swapColorValues(shades),
+        foreground: readableColor(shades[500]),
+        DEFAULT: shades[500]
+    };
+    const cssVariables = [
+        [
+            `--heroui-${type}-50`,
+            twTheme[50]
+        ],
+        [
+            `--heroui-${type}-100`,
+            twTheme[100]
+        ],
+        [
+            `--heroui-${type}-200`,
+            twTheme[200]
+        ],
+        [
+            `--heroui-${type}-300`,
+            twTheme[300]
+        ],
+        [
+            `--heroui-${type}-400`,
+            twTheme[400]
+        ],
+        [
+            `--heroui-${type}-500`,
+            twTheme[500]
+        ],
+        [
+            `--heroui-${type}-600`,
+            twTheme[600]
+        ],
+        [
+            `--heroui-${type}-700`,
+            twTheme[700]
+        ],
+        [
+            `--heroui-${type}-800`,
+            twTheme[800]
+        ],
+        [
+            `--heroui-${type}-900`,
+            twTheme[900]
+        ],
+        [
+            `--heroui-${type}-foreground`,
+            twTheme.foreground
+        ],
+        [
+            `--heroui-${type}`,
+            twTheme.DEFAULT
+        ]
+    ];
+    return {
+        twTheme,
+        cssVariables
+    };
+}
+export { colorValuesToRgb, generateThemeColor, getColorWeight, hexToHsl };

package/dist/heroui/utils/object.d.ts

@@ -0,0 +1 @@
+export declare function swapColorValues<T extends Object>(colors: T): {};

package/dist/heroui/utils/object.js

@@ -0,0 +1,17 @@
+function swapColorValues(colors) {
+    const swappedColors = {};
+    const keys = Object.keys(colors);
+    const { length } = keys;
+    for(let i = 0; i < length / 2; i++){
+        const key1 = keys[i];
+        const key2 = keys[length - 1 - i];
+        swappedColors[key1] = colors[key2];
+        swappedColors[key2] = colors[key1];
+    }
+    if (length % 2 !== 0) {
+        const middleKey = keys[Math.floor(length / 2)];
+        swappedColors[middleKey] = colors[middleKey];
+    }
+    return swappedColors;
+}
+export { swapColorValues };