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

package/build/components/BarChart.d.ts

@@ -25,7 +25,7 @@ type Props = {
     /** The width of the Y axis */
     yAxisWidth?: number;
 } & ChartProps;
-declare const BarChart: ({ data, legend, keys, stacked, barGap, barCategoryGap, barSize, maxBarSize, vertical, hideYLabels, hideXLabels, diagonalXLabels, maxXLabelLength, xAxisHeight, yAxisWidth, axisColor, tooltipLegendPostfix, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const BarChart: ({ data, legend, keys, stacked, barGap, barCategoryGap, barSize, maxBarSize, vertical, hideYLabels, hideXLabels, diagonalXLabels, maxXLabelLength, xAxisHeight, yAxisWidth, axisColor, tooltipLegendPostfix, initialDimension, width, height, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export declare const DiagonalAxisTick: ({ x, y, payload, maxXLabelLength, axisColor, }: {
     x: number;
     y: number;

package/build/components/BarChart.js

@@ -1,23 +1,27 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useTheme } from "@emotion/react";
 import styled from "@emotion/styled";
-import millify from "millify";
 import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, XAxis, YAxis } from "recharts";
-import { ChartContainer, ChartStyles, LegendContent, Tooltip } from "./ChartHelpers.js";
-const BarChart_BarChart = ({ data, legend, keys, stacked, barGap, barCategoryGap, barSize = 16, maxBarSize, vertical = false, hideYLabels, hideXLabels, diagonalXLabels, maxXLabelLength = 10, xAxisHeight = 22, yAxisWidth = 45, axisColor, tooltipLegendPostfix, ...rest })=>{
+import { formatNumber } from "../utils/formatNumber.js";
+import { ChartContainer, ChartStyles, LegendContent, Tooltip, getInitialDimension } from "./ChartHelpers.js";
+const BarChart_BarChart = ({ data, legend, keys, stacked, barGap, barCategoryGap, barSize = 16, maxBarSize, vertical = false, hideYLabels, hideXLabels, diagonalXLabels, maxXLabelLength = 10, xAxisHeight = 22, yAxisWidth = 45, axisColor, tooltipLegendPostfix, initialDimension, width, height, ...rest })=>{
     const { scale2 } = useTheme();
     const xAxisTick = diagonalXLabels ? (args)=>DiagonalAxisTick({
             ...args,
             maxXLabelLength,
             axisColor
         }) : {};
+    const initial = getInitialDimension(initialDimension, width, height);
     return /*#__PURE__*/ jsxs(ChartContainer, {
+        width: width,
+        height: height,
         ...rest,
         children: [
             /*#__PURE__*/ jsx(ChartStyles, {}),
             /*#__PURE__*/ jsx(ResponsiveContainer, {
                 width: "100%",
                 height: "100%",
+                initialDimension: initial,
                 children: /*#__PURE__*/ jsxs(BarChart, {
                     margin: {
                         top: 0,
@@ -41,7 +45,7 @@ const BarChart_BarChart = ({ data, legend, keys, stacked, barGap, barCategoryGap
                         /*#__PURE__*/ jsx(XAxis, {
                             stroke: axisColor || scale2,
                             tickMargin: 4,
-                            tickFormatter: (value)=>vertical ? millify(value) : value,
+                            tickFormatter: (value)=>vertical ? formatNumber(value) : value,
                             tick: hideXLabels ? false : xAxisTick,
                             height: hideXLabels ? 12 : xAxisHeight,
                             interval: diagonalXLabels ? 0 : void 0,
@@ -51,7 +55,7 @@ const BarChart_BarChart = ({ data, legend, keys, stacked, barGap, barCategoryGap
                         /*#__PURE__*/ jsx(YAxis, {
                             stroke: axisColor || scale2,
                             tickMargin: 4,
-                            tickFormatter: (value)=>vertical ? value : millify(value),
+                            tickFormatter: (value)=>vertical ? value : formatNumber(value),
                             tick: hideYLabels ? false : {},
                             width: hideYLabels ? 5 : yAxisWidth,
                             dataKey: vertical ? 'name' : void 0,

package/build/components/ChartHelpers.d.ts

@@ -1,4 +1,4 @@
-import { type LegendPayload, type TooltipContentProps } from 'recharts';
+import { type LegendPayload, type TooltipContentProps, type ResponsiveContainerProps } from 'recharts';
 import type { Attributes } from './typeDefs/elementTypes';
 import type { Margin, MaxWidthHeight, WidthHeight } from './types';
 type ChartData = {
@@ -23,7 +23,11 @@ export type ChartProps = {
     axisColor?: string;
     /** The postfix to display after the legend value in the tooltip */
     tooltipLegendPostfix?: React.ReactNode;
-} & Margin & WidthHeight & MaxWidthHeight & ElAttributes;
+} & Pick<ResponsiveContainerProps, 'initialDimension'> & Margin & WidthHeight & MaxWidthHeight & ElAttributes;
+type InitialDimension = ResponsiveContainerProps['initialDimension'];
+type Width = WidthHeight['width'];
+type Height = WidthHeight['height'];
+export declare const getInitialDimension: (initialDimension: InitialDimension, width: Width, height: Height) => InitialDimension;
 export declare const ChartStyles: () => import("react/jsx-runtime").JSX.Element;
 export declare const ChartContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;

package/build/components/ChartHelpers.js

@@ -5,6 +5,13 @@ import { Tooltip } from "recharts";
 import { numberWithCommas } from "../utils/index.js";
 import Dot from "./Dot.js";
 import { marginProps } from "./helpers/styledProps.js";
+const getInitialDimension = (initialDimension, width, height)=>{
+    if (initialDimension) return initialDimension;
+    if ('number' == typeof width && 'number' == typeof height) return {
+        width,
+        height
+    };
+};
 const ChartStyles = ()=>/*#__PURE__*/ jsx(Global, {
         styles: {
             '.recharts-cartesian-grid-vertical line:first-of-type': {
@@ -118,4 +125,4 @@ const TooltipLabel = styled.div(({ theme })=>({
         color: theme.tooltip.color.subtext,
         marginBottom: 4
     }));
-export { ChartContainer, ChartStyles, LegendContent, ChartHelpers_Tooltip as Tooltip, TooltipContent };
+export { ChartContainer, ChartStyles, LegendContent, ChartHelpers_Tooltip as Tooltip, TooltipContent, getInitialDimension };

package/build/components/LineChart.d.ts

@@ -2,5 +2,5 @@ import { type ChartProps } from './ChartHelpers';
 type Props = {
     enableLegendToggle?: boolean;
 } & ChartProps;
-declare const LineChart: ({ data, legend, keys, enableLegendToggle, axisColor, tooltipLegendPostfix, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const LineChart: ({ data, legend, keys, enableLegendToggle, axisColor, tooltipLegendPostfix, initialDimension, width, height, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export default LineChart;

package/build/components/LineChart.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useTheme } from "@emotion/react";
-import millify from "millify";
 import { useState } from "react";
 import { CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, XAxis, YAxis } from "recharts";
-import { ChartContainer, ChartStyles, LegendContent, Tooltip } from "./ChartHelpers.js";
-const LineChart_LineChart = ({ data, legend, keys, enableLegendToggle, axisColor, tooltipLegendPostfix, ...rest })=>{
+import { formatNumber } from "../utils/formatNumber.js";
+import { ChartContainer, ChartStyles, LegendContent, Tooltip, getInitialDimension } from "./ChartHelpers.js";
+const LineChart_LineChart = ({ data, legend, keys, enableLegendToggle, axisColor, tooltipLegendPostfix, initialDimension, width, height, ...rest })=>{
     const [lines, setLines] = useState(keys);
     const { scale2 } = useTheme();
     const handleLineToggle = (item)=>{
@@ -19,13 +19,17 @@ const LineChart_LineChart = ({ data, legend, keys, enableLegendToggle, axisColor
         setLines((prevLines)=>toggleLines(prevLines));
     };
     const toggleData = enableLegendToggle && keys.length > 1 ? handleLineToggle : void 0;
+    const initial = getInitialDimension(initialDimension, width, height);
     return /*#__PURE__*/ jsxs(ChartContainer, {
+        width: width,
+        height: height,
         ...rest,
         children: [
             /*#__PURE__*/ jsx(ChartStyles, {}),
             /*#__PURE__*/ jsx(ResponsiveContainer, {
                 width: "100%",
                 height: "100%",
+                initialDimension: initial,
                 children: /*#__PURE__*/ jsxs(LineChart, {
                     margin: {
                         top: 8,
@@ -48,7 +52,7 @@ const LineChart_LineChart = ({ data, legend, keys, enableLegendToggle, axisColor
                         /*#__PURE__*/ jsx(YAxis, {
                             stroke: axisColor || scale2,
                             tickMargin: 4,
-                            tickFormatter: (value)=>millify(value)
+                            tickFormatter: (value)=>formatNumber(value)
                         }),
                         Tooltip({
                             legendPostfix: tooltipLegendPostfix

package/build/index.d.ts

@@ -85,5 +85,6 @@ export { default as useCopy } from './hooks/useCopy';
 export { marginProps, paddingProps, positionProps, widthHeightProps } from './components/helpers/styledProps';
 export { default as copyToClipboard } from './utils/copyToClipboard';
 export { default as formatDate } from './utils/formatDate';
+export { default as formatNumber } from './utils/formatNumber';
 export { default as numberWithCommas } from './utils/numberWithCommas';
 export { createEditorContent, editorContentToText } from './components/Editor';

package/build/index.js

@@ -75,5 +75,6 @@ import useCopy from "./hooks/useCopy.js";
 import { marginProps, paddingProps, positionProps, widthHeightProps } from "./components/helpers/styledProps.js";
 import copyToClipboard from "./utils/copyToClipboard.js";
 import formatDate from "./utils/formatDate.js";
+import formatNumber from "./utils/formatNumber.js";
 import numberWithCommas from "./utils/numberWithCommas.js";
-export { Accordion, Audio, BarChart, Button, Calendar, Checkbox, Code, ComboBox, CommandMenu, DatePicker, DateRangePicker, DateRangeSelect, DocTable, Dot, DraftEditor, Dropdown, DropdownMenu, DropdownSelect, Editor, Ellipsis, Form, Grid, Icon, ImageViewer, InlineCode, InlineInput, InputHelpers as InputUtils, Label, LineChart, Menu, Message, MessageHr, Modal, MultiSelect, NumberInput, Pagination, PhoneInput, PieChart, Popover, PortalScope, Progress, Radio, RangeCalendar, ResetStyles, ScrollbarStyles, SearchInput, Select, Slider, Spinner, Table, Tabs, Tag, TextArea, TextInput, TimeInput, ToastStyles, Toggle, ToggleButton, ToggleButtonGroup, Tooltip, TransferList, Tree, UnstyledButton, colors, copyToClipboard, createEditorContent, darkScale, editorContentToText, formatDate, lightScale, marginProps, numberWithCommas, paddingProps, positionProps, theme, themeClasses, themeOptions, useConfirm, useCopy, useElementObserver, useEventListener, useOnClickOutside, usePrevious, useSelectAll, useWindowSize, widthHeightProps };
+export { Accordion, Audio, BarChart, Button, Calendar, Checkbox, Code, ComboBox, CommandMenu, DatePicker, DateRangePicker, DateRangeSelect, DocTable, Dot, DraftEditor, Dropdown, DropdownMenu, DropdownSelect, Editor, Ellipsis, Form, Grid, Icon, ImageViewer, InlineCode, InlineInput, InputHelpers as InputUtils, Label, LineChart, Menu, Message, MessageHr, Modal, MultiSelect, NumberInput, Pagination, PhoneInput, PieChart, Popover, PortalScope, Progress, Radio, RangeCalendar, ResetStyles, ScrollbarStyles, SearchInput, Select, Slider, Spinner, Table, Tabs, Tag, TextArea, TextInput, TimeInput, ToastStyles, Toggle, ToggleButton, ToggleButtonGroup, Tooltip, TransferList, Tree, UnstyledButton, colors, copyToClipboard, createEditorContent, darkScale, editorContentToText, formatDate, formatNumber, lightScale, marginProps, numberWithCommas, paddingProps, positionProps, theme, themeClasses, themeOptions, useConfirm, useCopy, useElementObserver, useEventListener, useOnClickOutside, usePrevious, useSelectAll, useWindowSize, widthHeightProps };

package/build/utils/formatNumber.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Formats a number with thousand separators and unit suffixes (K, M, B, T)
+ * @param value - The number to format
+ * @param decimals - Number of decimal places (default: 1)
+ * @returns Formatted number string (e.g., "1.2K", "500M")
+ */
+export declare const formatNumber: (value: number, decimals?: number) => string;
+export default formatNumber;

package/build/utils/formatNumber.js

@@ -0,0 +1,32 @@
+const formatNumber_formatNumber = (value, decimals = 1)=>{
+    if (0 === value) return '0';
+    if (!Number.isFinite(value)) return String(value);
+    const absValue = Math.abs(value);
+    const sign = value < 0 ? '-' : '';
+    const units = [
+        {
+            threshold: 1e12,
+            suffix: 'T'
+        },
+        {
+            threshold: 1e9,
+            suffix: 'B'
+        },
+        {
+            threshold: 1e6,
+            suffix: 'M'
+        },
+        {
+            threshold: 1e3,
+            suffix: 'K'
+        }
+    ];
+    for (const unit of units)if (absValue >= unit.threshold) {
+        const formatted = (absValue / unit.threshold).toFixed(decimals);
+        const trimmed = formatted.replace(/\.?0+$/, '');
+        return `${sign}${trimmed}${unit.suffix}`;
+    }
+    return String(value);
+};
+const formatNumber = formatNumber_formatNumber;
+export { formatNumber as default, formatNumber_formatNumber as formatNumber };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wavv/ui",
-	"version": "2.2.2-alpha.6",
+	"version": "2.2.2-alpha.8",
 	"type": "module",
 	"exports": {
 		".": {
@@ -31,23 +31,22 @@
 		"@emotion/styled": "^11.14.1",
 		"@internationalized/date": "3.10.0",
 		"@react-hook/resize-observer": "^2.0.2",
-		"@tiptap/core": "^3.8.0",
-		"@tiptap/extension-character-count": "^3.8.0",
-		"@tiptap/extension-highlight": "^3.8.0",
-		"@tiptap/extension-placeholder": "^3.8.0",
-		"@tiptap/extension-task-item": "^3.8.0",
-		"@tiptap/extension-task-list": "^3.8.0",
-		"@tiptap/markdown": "^3.8.0",
-		"@tiptap/pm": "^3.8.0",
-		"@tiptap/react": "^3.8.0",
-		"@tiptap/starter-kit": "^3.8.0",
+		"@tiptap/core": "^3.9.1",
+		"@tiptap/extension-character-count": "^3.9.1",
+		"@tiptap/extension-highlight": "^3.9.1",
+		"@tiptap/extension-placeholder": "^3.9.1",
+		"@tiptap/extension-task-item": "^3.9.1",
+		"@tiptap/extension-task-list": "^3.9.1",
+		"@tiptap/markdown": "^3.9.1",
+		"@tiptap/pm": "^3.9.1",
+		"@tiptap/react": "^3.9.1",
+		"@tiptap/starter-kit": "^3.9.1",
 		"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",
@@ -62,7 +61,7 @@
 		"@babel/core": "^7.28.5",
 		"@babel/preset-env": "^7.28.5",
 		"@babel/preset-typescript": "^7.28.5",
-		"@biomejs/biome": "2.3.0",
+		"@biomejs/biome": "2.3.2",
 		"@chromatic-com/storybook": "^4.1.1",
 		"@emotion/babel-plugin": "^11.13.5",
 		"@emotion/react": "^11.14.0",
@@ -87,7 +86,7 @@
 		"@types/draft-js": "^0.11.18",
 		"@types/jest": "^30.0.0",
 		"@types/ncp": "^2.0.8",
-		"@types/node": "^24.9.1",
+		"@types/node": "^24.9.2",
 		"@types/prompts": "^2.4.9",
 		"@types/randomcolor": "^0.5.9",
 		"@types/react": "^19.2.2",
@@ -99,7 +98,7 @@
 		"change-case": "^5.4.4",
 		"chromatic": "^13.3.2",
 		"jest": "^30.2.0",
-		"lefthook": "^2.0.1",
+		"lefthook": "^2.0.2",
 		"ncp": "^2.0.0",
 		"path": "^0.12.7",
 		"phone": "^3.1.67",