@wavv/ui 2.2.2-alpha.4 → 2.2.2-alpha.6

package/build/theme/eighties/light/light.js

@@ -0,0 +1,456 @@
+import common, { button as index_js_button } from "../../common/index.js";
+import colors from "../colors.js";
+import lightScale from "./lightScale.js";
+const white = '#FFFFFF';
+const light_light = {
+    ...common,
+    ...lightScale,
+    name: 'light',
+    button: {
+        ...index_js_button,
+        primary: {
+            color: {
+                default: white,
+                hover: white,
+                active: white
+            },
+            outlineColor: {
+                default: lightScale.scale10,
+                hover: lightScale.scale10,
+                active: lightScale.scale10
+            },
+            background: {
+                default: colors.brand,
+                hover: colors.brandShade1,
+                active: colors.brandShade2
+            },
+            outlineBackground: {
+                default: colors.brandTint0,
+                hover: colors.brandTint1,
+                active: colors.brandTint2
+            },
+            border: {
+                default: colors.brand,
+                hover: colors.brandShade1,
+                active: colors.brandShade2
+            },
+            divider: lightScale.scale2
+        },
+        secondary: {
+            color: {
+                default: lightScale.scale10,
+                hover: lightScale.scale10,
+                active: lightScale.scale10
+            },
+            outlineColor: {
+                default: lightScale.scale10,
+                hover: lightScale.scale10,
+                active: lightScale.scale10
+            },
+            background: {
+                default: lightScale.scale1,
+                hover: lightScale.scale2,
+                active: lightScale.scale3
+            },
+            outlineBackground: {
+                default: lightScale.scale1,
+                hover: lightScale.scale2,
+                active: lightScale.scale3
+            },
+            border: {
+                default: lightScale.scale2,
+                hover: lightScale.scale2,
+                active: lightScale.scale2
+            },
+            divider: lightScale.scale2
+        },
+        positive: {
+            color: {
+                default: white,
+                hover: white,
+                active: white
+            },
+            outlineColor: {
+                default: lightScale.scale10,
+                hover: lightScale.scale10,
+                active: lightScale.scale10
+            },
+            background: {
+                default: colors.success,
+                hover: colors.successShade1,
+                active: colors.successShade2
+            },
+            outlineBackground: {
+                default: colors.successTint0,
+                hover: colors.successTint1,
+                active: colors.successTint2
+            },
+            border: {
+                default: colors.success,
+                hover: colors.successShade1,
+                active: colors.successShade2
+            },
+            divider: lightScale.scale2
+        },
+        negative: {
+            color: {
+                default: white,
+                hover: white,
+                active: white
+            },
+            outlineColor: {
+                default: lightScale.scale10,
+                hover: lightScale.scale10,
+                active: lightScale.scale10
+            },
+            background: {
+                default: colors.error,
+                hover: colors.errorShade1,
+                active: colors.errorShade2
+            },
+            outlineBackground: {
+                default: colors.errorTint0,
+                hover: colors.errorTint1,
+                active: colors.errorTint2
+            },
+            border: {
+                default: colors.error,
+                hover: colors.errorShade1,
+                active: colors.errorShade2
+            },
+            divider: lightScale.scale2
+        },
+        caution: {
+            color: {
+                default: white,
+                hover: white,
+                active: white
+            },
+            outlineColor: {
+                default: lightScale.scale10,
+                hover: lightScale.scale10,
+                active: lightScale.scale10
+            },
+            background: {
+                default: colors.warning,
+                hover: colors.warningShade1,
+                active: colors.warningShade2
+            },
+            outlineBackground: {
+                default: colors.warningTint0,
+                hover: colors.warningTint1,
+                active: colors.warningTint2
+            },
+            border: {
+                default: colors.warning,
+                hover: colors.warningShade1,
+                active: colors.warningShade2
+            },
+            divider: lightScale.scale2
+        },
+        subtle: {
+            color: {
+                default: colors.brand,
+                hover: colors.brand,
+                active: colors.brand
+            },
+            outlineColor: {
+                default: colors.brand,
+                hover: colors.brand,
+                active: colors.brand
+            },
+            secondaryColor: {
+                default: lightScale.scale10,
+                hover: lightScale.scale10,
+                active: lightScale.scale10
+            },
+            positiveColor: {
+                default: colors.success,
+                hover: colors.success,
+                active: colors.success
+            },
+            negativeColor: {
+                default: colors.error,
+                hover: colors.error,
+                active: colors.error
+            },
+            cautionColor: {
+                default: colors.warning,
+                hover: colors.warning,
+                active: colors.warning
+            },
+            background: {
+                default: 'transparent',
+                hover: lightScale.scale1,
+                active: lightScale.scale2
+            },
+            outlineBackground: {
+                default: 'transparent',
+                hover: lightScale.scale1,
+                active: lightScale.scale2
+            },
+            border: {
+                default: 'transparent',
+                hover: lightScale.scale2,
+                active: lightScale.scale2
+            },
+            divider: lightScale.scale2
+        },
+        link: {
+            color: {
+                default: colors.brand,
+                hover: colors.brandShade1,
+                active: colors.brandShade2
+            },
+            outlineColor: {
+                default: colors.brand,
+                hover: colors.brandShade1,
+                active: colors.brandShade2
+            },
+            secondaryColor: {
+                default: lightScale.scale8,
+                hover: lightScale.scale9,
+                active: lightScale.scale10
+            },
+            positiveColor: {
+                default: colors.success,
+                hover: colors.successShade1,
+                active: colors.successShade2
+            },
+            negativeColor: {
+                default: colors.error,
+                hover: colors.errorShade1,
+                active: colors.errorShade2
+            },
+            cautionColor: {
+                default: colors.warning,
+                hover: colors.warningShade1,
+                active: colors.warningShade2
+            },
+            background: {
+                default: 'transparent',
+                hover: 'transparent',
+                active: 'transparent'
+            },
+            outlineBackground: {
+                default: 'transparent',
+                hover: 'transparent',
+                active: 'transparent'
+            },
+            border: {
+                default: 'transparent',
+                hover: 'transparent',
+                active: 'transparent'
+            },
+            divider: 'transparent'
+        },
+        disabled: {
+            color: {
+                default: lightScale.scale4,
+                hover: lightScale.scale4,
+                active: lightScale.scale4
+            },
+            outlineColor: {
+                default: lightScale.scale4,
+                hover: lightScale.scale4,
+                active: lightScale.scale4
+            },
+            background: {
+                default: lightScale.scale1,
+                hover: lightScale.scale1,
+                active: lightScale.scale1
+            },
+            outlineBackground: {
+                default: lightScale.scale0,
+                hover: lightScale.scale0,
+                active: lightScale.scale0
+            },
+            border: {
+                default: lightScale.scale1,
+                hover: lightScale.scale1,
+                active: lightScale.scale1
+            },
+            divider: lightScale.scale1
+        },
+        color: {
+            default: white
+        }
+    },
+    calendar: {
+        background: {
+            container: colors.contrast10,
+            hover: lightScale.scale1,
+            active: colors.brand,
+            activeHover: colors.brandShade1,
+            activeRange: colors.brandTint4
+        },
+        color: {
+            disabled: lightScale.scale4,
+            default: lightScale.scale10,
+            active: colors.contrast10,
+            current: colors.brand,
+            outside: lightScale.scale6,
+            weekday: lightScale.scale8,
+            monthYear: lightScale.scale8,
+            iconDefault: lightScale.scale6,
+            iconDisabled: lightScale.scale2,
+            iconHover: lightScale.scale10
+        }
+    },
+    defaultBorder: `1px solid ${lightScale.scale1}`,
+    formControl: {
+        color: {
+            default: lightScale.scale8,
+            hover: lightScale.scale10,
+            active: colors.brand,
+            activeHover: colors.brandShade1,
+            disabled: lightScale.scale4
+        }
+    },
+    input: {
+        borderRadius: 4,
+        background: {
+            default: lightScale.scale0,
+            hover: lightScale.scale1,
+            focused: lightScale.scale1,
+            disabled: lightScale.scale0,
+            invalid: colors.errorTint2,
+            invalidHover: colors.errorTint1
+        },
+        color: {
+            default: lightScale.scale10,
+            disabled: lightScale.scale4,
+            placeholder: lightScale.scale6,
+            description: lightScale.scale6,
+            descriptionError: colors.error
+        },
+        borderColor: {
+            default: lightScale.scale6,
+            hover: lightScale.scale8,
+            focused: colors.brand,
+            disabled: lightScale.scale4,
+            error: colors.error
+        },
+        labelColor: {
+            default: lightScale.scale8,
+            hover: lightScale.scale8,
+            filled: lightScale.scale6,
+            focused: colors.brand,
+            disabled: lightScale.scale4
+        }
+    },
+    menu: {
+        background: white
+    },
+    menuItem: {
+        borderColor: colors.brand,
+        background: {
+            active: lightScale.scale0,
+            hover: lightScale.scale1,
+            inactive: 'transparent'
+        },
+        color: {
+            active: lightScale.scale10,
+            hover: lightScale.scale10,
+            inactive: lightScale.scale6
+        }
+    },
+    modal: {
+        background: colors.contrast10,
+        color: {
+            header: lightScale.scale10,
+            body: lightScale.scale6
+        }
+    },
+    options: {
+        background: colors.contrast10,
+        backdropFilter: void 0
+    },
+    optionItem: {
+        background: {
+            hover: lightScale.scale0,
+            active: lightScale.scale1,
+            inactive: 'transparent'
+        },
+        color: {
+            active: lightScale.scale10,
+            inactive: lightScale.scale10,
+            accent: colors.brand
+        }
+    },
+    table: {
+        color: {
+            header: lightScale.scale6,
+            body: lightScale.scale10
+        },
+        backgroundLevel: {
+            0: lightScale.background0,
+            1: lightScale.background1,
+            2: lightScale.background2,
+            3: lightScale.background3,
+            4: lightScale.background4,
+            5: lightScale.background5
+        },
+        borderColor: lightScale.scale1
+    },
+    tag: {
+        default: {
+            background: lightScale.scale1,
+            backgroundHover: lightScale.scale2,
+            backgroundDisabled: lightScale.scale0
+        },
+        error: {
+            background: colors.errorTint2,
+            backgroundHover: colors.error,
+            backgroundDisabled: colors.errorTint1
+        },
+        success: {
+            background: colors.successTint2,
+            backgroundHover: colors.success,
+            backgroundDisabled: colors.successTint1
+        },
+        warning: {
+            background: colors.warningTint2,
+            backgroundHover: colors.warning,
+            backgroundDisabled: colors.warningTint1
+        }
+    },
+    toast: {
+        color: lightScale.scale10,
+        background: {
+            default: '#FFE6F5',
+            info: '#E0F9FF',
+            success: '#E4FFE0',
+            warning: '#FFF5CC',
+            error: '#FFD6E0'
+        },
+        border: {
+            default: lightScale.scale8,
+            info: colors.brand,
+            success: colors.success,
+            warning: colors.warning,
+            error: colors.error
+        }
+    },
+    toggle: {
+        slider: colors.contrast10
+    },
+    tooltip: {
+        background: '#FFF',
+        color: {
+            default: lightScale.scale10,
+            subtext: lightScale.scale6
+        }
+    },
+    editor: {
+        highlight: {
+            yellow: colors.alert,
+            blue: colors.brandDarkShade1,
+            red: colors.error,
+            green: colors.success,
+            orange: colors.warning
+        }
+    }
+};
+const light = light_light;
+export { light as default };

package/build/theme/eighties/light/lightScale.js

@@ -0,0 +1,35 @@
+import colors from "../colors.js";
+const scale0 = colors.grayscale0;
+const scale1 = colors.grayscale1;
+const scale2 = colors.grayscale2;
+const scale3 = colors.grayscale3;
+const scale4 = colors.grayscale4;
+const scale5 = colors.grayscale5;
+const scale6 = colors.grayscale6;
+const scale7 = colors.grayscale7;
+const scale8 = colors.grayscale8;
+const scale9 = colors.grayscale9;
+const scale10 = colors.grayscale10;
+const lightScale = {
+    scale0,
+    scale1,
+    scale2,
+    scale3,
+    scale4,
+    scale5,
+    scale6,
+    scale7,
+    scale8,
+    scale9,
+    scale10,
+    accent: colors.brand,
+    accentShade: colors.brandShade1,
+    background0: '#FFFDF2',
+    background1: '#F0EEE3',
+    background2: '#E1E5DC',
+    background3: '#D2D8CF',
+    background4: '#C3CBC2',
+    background5: '#B4BEB5'
+};
+const light_lightScale = lightScale;
+export { light_lightScale as default };

package/build/theme/index.js

@@ -0,0 +1,28 @@
+import dark from "./core/dark/dark.js";
+import light from "./core/light/light.js";
+const theme = {
+    light: light,
+    dark: dark
+};
+const lib_theme = theme;
+const themeClasses = [
+    'light',
+    'dark'
+];
+const themeOptions = [
+    {
+        id: 'light',
+        value: 'Light',
+        classes: [
+            'light'
+        ]
+    },
+    {
+        id: 'dark',
+        value: 'Dark',
+        classes: [
+            'dark'
+        ]
+    }
+];
+export { lib_theme as default, themeClasses, themeOptions };

package/build/utils/chunk.js

@@ -0,0 +1,13 @@
+const chunk_chunk = (array, chunkLength)=>{
+    const copy = [
+        ...array
+    ];
+    const chunkArray = [];
+    while(copy.length > 0){
+        const subArray = copy.splice(0, chunkLength);
+        chunkArray.push(subArray);
+    }
+    return chunkArray;
+};
+const chunk = chunk_chunk;
+export { chunk as default };

package/build/utils/copyToClipboard.js

@@ -0,0 +1,29 @@
+const legacyCopy = (text)=>{
+    try {
+        const textArea = document.createElement('textarea');
+        textArea.value = text;
+        textArea.setAttribute('readonly', '');
+        textArea.style.position = 'fixed';
+        textArea.style.top = '0';
+        textArea.style.left = '0';
+        textArea.style.opacity = '0';
+        document.body.appendChild(textArea);
+        textArea.select();
+        textArea.setSelectionRange(0, text.length);
+        const successful = document.execCommand('copy');
+        document.body.removeChild(textArea);
+        if (!successful) console.error('Failed to copy text to clipboard');
+    } catch (_) {
+        console.error('Failed to copy text to clipboard');
+    }
+};
+const copyToClipboard_copyToClipboard = (text)=>{
+    if ('undefined' == typeof window || 'undefined' == typeof document) return;
+    const canUseModernApi = 'undefined' != typeof navigator && navigator.clipboard && 'function' == typeof navigator.clipboard.writeText;
+    if (canUseModernApi) return void navigator.clipboard.writeText(text).catch(()=>{
+        legacyCopy(text);
+    });
+    legacyCopy(text);
+};
+const copyToClipboard = copyToClipboard_copyToClipboard;
+export { copyToClipboard as default };

package/build/utils/flattenListOptions.js

@@ -0,0 +1,4 @@
+const isListSection = (item)=>'object' == typeof item && null !== item && 'options' in item;
+const flattenListOptions = (options)=>options.flatMap((item)=>isListSection(item) ? item.options : item);
+const utils_flattenListOptions = flattenListOptions;
+export { utils_flattenListOptions as default };

package/build/utils/formatDate.js

@@ -0,0 +1,55 @@
+import { differenceInMinutes, differenceInWeeks, format, isFuture, isThisYear, isToday, isTomorrow, isYesterday } from "date-fns";
+const formatDate = (value, option)=>{
+    if (!value) return '';
+    const date = new Date(value);
+    let timeSpec = option;
+    let lowercase = false;
+    if ('object' == typeof option) {
+        timeSpec = option.time;
+        lowercase = !!option.lowercase;
+    }
+    const onlyTime = 'onlyTime' === timeSpec || false;
+    const withTime = 'withTime' === timeSpec || false;
+    const relative = 'relative' === timeSpec || false;
+    const now = new Date();
+    const dayName = format(date, 'EEEE');
+    const outsideWeek = format(date, 'MMM d');
+    const fullDate = format(date, 'MMM d, y');
+    const time = format(date, 'h:mm aaa');
+    const thisYear = isThisYear(date);
+    const future = isFuture(date);
+    const today = isToday(date);
+    const yesterday = isYesterday(date);
+    const tomorrow = isTomorrow(date);
+    const diffMin = differenceInMinutes(now, date);
+    const diffWeeks = differenceInWeeks(now, date);
+    const withinMin = diffMin >= -10 && diffMin <= 10;
+    const withTimeString = withTime || relative ? `, ${time}` : '';
+    const final = (dateString)=>{
+        if (lowercase) {
+            const lowercaseWords = [
+                'Just',
+                'Yesterday',
+                'Today',
+                'Tomorrow'
+            ];
+            const toLower = lowercaseWords.some((word)=>dateString.includes(word));
+            return toLower ? dateString.toLowerCase() : dateString;
+        }
+        return dateString;
+    };
+    if (onlyTime) return final(time);
+    if (relative) {
+        if (0 === diffMin) return final('Just now');
+        if (withinMin) return final(future ? `Today, in ${-1 * diffMin} min.` : `${diffMin} min. ago`);
+        if (today) return final(future ? `Today${withTimeString}` : time);
+    }
+    if (today) return final(`Today${withTimeString}`);
+    if (yesterday) return final(`Yesterday${withTimeString}`);
+    if (tomorrow) return final(`Tomorrow${withTimeString}`);
+    if (0 === diffWeeks && !future) return final(`${dayName}${withTimeString}`);
+    if (thisYear) return final(`${outsideWeek}${withTimeString}`);
+    return final(`${fullDate}${withTimeString}`);
+};
+const utils_formatDate = formatDate;
+export { utils_formatDate as default };

package/build/utils/index.js

@@ -0,0 +1,6 @@
+import chunk from "./chunk.js";
+import copyToClipboard from "./copyToClipboard.js";
+import formatDate from "./formatDate.js";
+import numberWithCommas from "./numberWithCommas.js";
+import range from "./range.js";
+export { chunk, copyToClipboard, formatDate, numberWithCommas, range };

package/build/utils/numberWithCommas.js

@@ -0,0 +1,3 @@
+const numberWithCommas = (number)=>number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+const utils_numberWithCommas = numberWithCommas;
+export { utils_numberWithCommas as default };

package/build/utils/range.js

@@ -0,0 +1,11 @@
+function range(from, to, step = 1) {
+    let i = to ? from : 0;
+    const end = to || from;
+    const numbers = [];
+    while(i <= end){
+        numbers.push(i);
+        i += step;
+    }
+    return numbers;
+}
+export { range as default };

package/package.json

@@ -1,12 +1,16 @@
 {
 	"name": "@wavv/ui",
-	"version": "2.2.2-alpha.4",
+	"version": "2.2.2-alpha.6",
 	"type": "module",
 	"exports": {
 		".": {
 			"types": "./build/index.d.ts",
 			"import": "./build/index.js"
 		},
+		"./*": {
+			"types": "./build/*.d.ts",
+			"import": "./build/*.js"
+		},
 		"./theme.css": "./build/tailwind/theme.css"
 	},
 	"types": "./build/index.d.ts",
@@ -37,13 +41,13 @@
 		"@tiptap/pm": "^3.8.0",
 		"@tiptap/react": "^3.8.0",
 		"@tiptap/starter-kit": "^3.8.0",
-		"aveta": "^1.5.2",
 		"cmdk": "^1.1.1",
 		"date-fns": "^4.1.0",
 		"draft-js": "^0.11.7",
 		"es-toolkit": "^1.41.0",
 		"libphonenumber-js": "^1.12.25",
 		"lucide-react": "^0.548.0",
+		"millify": "^6.1.0",
 		"polished": "^4.1.4",
 		"prism-react-renderer": "^2.4.1",
 		"react-aria": "3.44.0",