@wavv/ui 2.2.7 → 2.3.0-alpha.1

package/build/theme/mono/light/light.js

@@ -0,0 +1,561 @@
+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 = {
+    ...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
+        }
+    },
+    toggleButton: {
+        ...index_js_button,
+        primary: {
+            color: {
+                default: lightScale.scale10,
+                hover: lightScale.scale10,
+                active: lightScale.scale10
+            },
+            background: {
+                default: colors.brandTint0,
+                hover: colors.brandTint2,
+                active: colors.brandTint4
+            },
+            border: {
+                default: colors.brand,
+                hover: colors.brand,
+                active: colors.brand
+            }
+        },
+        secondary: {
+            color: {
+                default: lightScale.scale10,
+                hover: lightScale.scale10,
+                active: lightScale.scale10
+            },
+            background: {
+                default: lightScale.scale0,
+                hover: lightScale.scale1,
+                active: lightScale.scale3
+            },
+            border: {
+                default: lightScale.background5,
+                hover: lightScale.background5,
+                active: lightScale.background5
+            }
+        },
+        negative: {
+            color: {
+                default: lightScale.scale10,
+                hover: lightScale.scale10,
+                active: lightScale.scale10
+            },
+            background: {
+                default: colors.errorTint0,
+                hover: colors.errorTint2,
+                active: colors.errorTint4
+            },
+            border: {
+                default: colors.error,
+                hover: colors.error,
+                active: colors.error
+            }
+        },
+        positive: {
+            color: {
+                default: lightScale.scale10,
+                hover: lightScale.scale10,
+                active: lightScale.scale10
+            },
+            background: {
+                default: colors.successTint0,
+                hover: colors.successTint2,
+                active: colors.successTint4
+            },
+            border: {
+                default: colors.success,
+                hover: colors.success,
+                active: colors.success
+            }
+        },
+        caution: {
+            color: {
+                default: lightScale.scale10,
+                hover: lightScale.scale10,
+                active: lightScale.scale10
+            },
+            background: {
+                default: colors.warningTint0,
+                hover: colors.warningTint2,
+                active: colors.warningTint4
+            },
+            border: {
+                default: colors.warning,
+                hover: colors.warning,
+                active: colors.warning
+            }
+        },
+        disabled: {
+            color: {
+                default: lightScale.scale4,
+                hover: lightScale.scale4,
+                active: lightScale.scale4
+            },
+            background: {
+                default: lightScale.scale0,
+                hover: lightScale.scale0,
+                active: lightScale.scale0
+            },
+            border: {
+                default: lightScale.scale1,
+                hover: lightScale.scale1,
+                active: lightScale.scale1
+            }
+        }
+    },
+    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: lightScale.background1
+    },
+    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: '#F2F3F4',
+            info: '#CCE3FD',
+            success: '#CCF3D9',
+            warning: '#FFEBCC',
+            error: '#FFDFE1'
+        },
+        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_light as default };

package/build/theme/mono/light/lightScale.d.ts

@@ -0,0 +1,22 @@
+declare const lightScale: {
+    scale0: string;
+    scale1: string;
+    scale2: string;
+    scale3: string;
+    scale4: string;
+    scale5: string;
+    scale6: string;
+    scale7: string;
+    scale8: string;
+    scale9: string;
+    scale10: string;
+    accent: string;
+    accentShade: string;
+    background0: string;
+    background1: string;
+    background2: string;
+    background3: string;
+    background4: string;
+    background5: string;
+};
+export default lightScale;

package/build/theme/mono/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: '#FFFFFF',
+    background1: '#F2F3F4',
+    background2: '#E6E9EB',
+    background3: '#CCD2D6',
+    background4: '#B3BCC2',
+    background5: '#99A5AD'
+};
+const light_lightScale = lightScale;
+export { light_lightScale as default };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wavv/ui",
-	"version": "2.2.7",
+	"version": "2.3.0-alpha.1",
 	"type": "module",
 	"exports": {
 		".": {
@@ -31,29 +31,29 @@
 		"@emotion/styled": "^11.14.1",
 		"@internationalized/date": "3.10.0",
 		"@react-hook/resize-observer": "^2.0.2",
-		"@tiptap/core": "^3.10.1",
-		"@tiptap/extension-character-count": "^3.10.1",
-		"@tiptap/extension-highlight": "^3.10.1",
-		"@tiptap/extension-placeholder": "^3.10.1",
-		"@tiptap/extension-task-item": "^3.10.1",
-		"@tiptap/extension-task-list": "^3.10.1",
-		"@tiptap/markdown": "^3.10.1",
-		"@tiptap/pm": "^3.10.1",
-		"@tiptap/react": "^3.10.1",
-		"@tiptap/starter-kit": "^3.10.1",
+		"@tiptap/core": "^3.10.7",
+		"@tiptap/extension-character-count": "^3.10.7",
+		"@tiptap/extension-highlight": "^3.10.7",
+		"@tiptap/extension-placeholder": "^3.10.7",
+		"@tiptap/extension-task-item": "^3.10.7",
+		"@tiptap/extension-task-list": "^3.10.7",
+		"@tiptap/markdown": "^3.10.7",
+		"@tiptap/pm": "^3.10.7",
+		"@tiptap/react": "^3.10.7",
+		"@tiptap/starter-kit": "^3.10.7",
 		"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.552.0",
+		"libphonenumber-js": "^1.12.26",
+		"lucide-react": "^0.553.0",
 		"polished": "^4.1.4",
 		"prism-react-renderer": "^2.4.1",
 		"react-aria": "3.44.0",
 		"react-aria-components": "1.13.0",
 		"react-keyed-flatten-children": "^5.0.1",
 		"react-phone-input-auto-format": "^0.1.0",
-		"recharts": "^3.3.0",
+		"recharts": "^3.4.1",
 		"sanitize.css": "^13.0.0",
 		"webfontloader": "^1.6.28"
 	},
@@ -61,14 +61,14 @@
 		"@babel/core": "^7.28.5",
 		"@babel/preset-env": "^7.28.5",
 		"@babel/preset-typescript": "^7.28.5",
-		"@biomejs/biome": "2.3.3",
+		"@biomejs/biome": "2.3.4",
 		"@chromatic-com/storybook": "^4.1.2",
 		"@emotion/babel-plugin": "^11.13.5",
 		"@emotion/react": "^11.14.0",
-		"@rsbuild/core": "1.6.1",
-		"@rsbuild/plugin-react": "^1.4.1",
+		"@rsbuild/core": "1.6.3",
+		"@rsbuild/plugin-react": "^1.4.2",
 		"@rsbuild/plugin-svgr": "^1.2.2",
-		"@rslib/core": "^0.17.0",
+		"@rslib/core": "^0.17.1",
 		"@storybook/addon-docs": "^9.1.16",
 		"@storybook/addon-links": "^9.1.16",
 		"@storybook/addon-themes": "^9.1.16",
@@ -91,7 +91,7 @@
 		"change-case": "^5.4.4",
 		"chromatic": "^13.3.3",
 		"jest": "^30.2.0",
-		"lefthook": "^2.0.2",
+		"lefthook": "^2.0.3",
 		"ncp": "^2.0.0",
 		"path": "^0.12.7",
 		"phone": "^3.1.67",