@ultraviolet/ui 3.0.0-beta.26 → 3.0.0-beta.27

package/dist/helpers/treeMap.d.ts

@@ -0,0 +1,90 @@
+import type { Theme } from '@emotion/react';
+import type { DefaultTreeMapDatum } from '@nivo/treemap';
+type ReturnType = Record<string, string>;
+/**
+ * Recursively collects all IDs from a tree map data structure.
+ *
+ * @param {DefaultTreeMapDatum} datum - The root node of the tree map to traverse
+ * @returns {string[]} An array containing the ID of the root node and all descendant node IDs
+ *
+ * @description
+ * This function performs a depth-first traversal of a tree map structure, collecting
+ * the ID from each node. It starts with the root node's ID and recursively processes
+ * all children if they exist, flattening the hierarchical structure into a single array.
+ *
+ * @example
+ * const tree = {
+ *   id: 'root',
+ *   children: [
+ *     { id: 'child1', children: [{ id: 'grandchild1' }] },
+ *     { id: 'child2' }
+ *   ]
+ * }
+ * getAllIds(tree) // returns ['root', 'child1', 'grandchild1', 'child2']
+ */
+export declare const getAllIds: (data: DefaultTreeMapDatum) => string[];
+/**
+ * Converts a number to an opacity value using a custom mapping algorithm.
+ *
+ * @param {number} n - The input number to convert (expected range: 0-100)
+ * @returns {number} The calculated opacity value (range: 0-100)
+ *
+ * @description
+ * This function applies the following transformations:
+ * - 0 → 100 (special case: full opacity)
+ * - 100 → 0 (special case: full transparency)
+ * - 1-9 → 10-90 (multiply by 10)
+ * - 10-99 → swap digits (e.g., 12 → 21, 45 → 54)
+ * We disperse values like that so we don't get the almost the same opacity
+ * for successive data
+ *
+ * @example
+ * getOpacity(0)   // returns 100
+ * getOpacity(5)   // returns 50
+ * getOpacity(12)  // returns 21
+ * getOpacity(100) // returns 0
+ */
+export declare const getOpacity: (n: number) => number;
+/**
+ * Converts a percentage value to a two-digit hexadecimal string.
+ *
+ * @param {number} percentage - The percentage value to convert (range: 0-100)
+ * @returns {string} A two-digit uppercase hexadecimal string (range: "00"-"FF")
+ *
+ * @description
+ * This function is commonly used for converting opacity/alpha percentages to hex values
+ * for use in color codes (e.g., #RRGGBBAA format). The percentage is mapped to the
+ * 0-255 range, converted to hexadecimal, and formatted as a two-character uppercase string.
+ *
+ * @example
+ * percentToHex(0)    // returns "00"
+ * percentToHex(50)   // returns "80"
+ * percentToHex(100)  // returns "FF"
+ * percentToHex(25.5) // returns "41"
+ */
+export declare const percentToHex: (percentage: number) => string;
+/**
+ * Generates a color mapping for tree map data with graduated opacity values.
+ *
+ * @param {DefaultTreeMapDatum} data - The tree map data structure to generate colors for
+ * @param {Theme} theme - The theme object containing color configuration
+ * @returns {ReturnType} An object mapping node IDs to color strings in hex format with alpha channel
+ *
+ * @description
+ * This function creates a color scheme for a tree map visualization by:
+ * 1. Extracting all node IDs from the tree structure
+ * 2. Assigning each node a color based on the primary text color from the theme
+ * 3. Applying graduated opacity values (100% to 0%) based on node order
+ * 4. Using modulo arithmetic to cycle through opacity values for datasets with >100 nodes
+ *
+ * The resulting colors follow the format: #RRGGBBAA where AA is the alpha/opacity channel.
+ * Earlier nodes in the traversal order receive higher opacity, creating a visual hierarchy.
+ *
+ * @example
+ * const data = { id: 'root', children: [{ id: 'child1' }, { id: 'child2' }] }
+ * const theme = { colors: { primary: { text: '#3B82F6' } } }
+ * getDataColors(data, theme)
+ * // returns { 'root': '#3B82F6FF', 'child1': '#3B82F600', 'child2': '#3B82F610' }
+ */
+export declare const getDataColors: (data: DefaultTreeMapDatum, theme: Theme) => ReturnType;
+export {};

package/dist/helpers/treeMap.js

@@ -0,0 +1,42 @@
+const getAllIds = (data) => {
+  const ids = [data.id];
+  if (data.children) {
+    for (const child of data.children) {
+      ids.push(...getAllIds(child));
+    }
+  }
+  return ids;
+};
+const getOpacity = (n) => {
+  if (n === 0) {
+    return 100;
+  }
+  if (n === 100) {
+    return 0;
+  }
+  if (n >= 1 && n <= 9) {
+    return n * 10;
+  }
+  const tens = Math.floor(n / 10);
+  const units = n % 10;
+  return units * 10 + tens;
+};
+const percentToHex = (percentage) => {
+  const intValue = Math.round(percentage / 100 * 255);
+  const hexValue = intValue.toString(16);
+  return hexValue.padStart(2, "0").toUpperCase();
+};
+const getDataColors = (data, theme) => {
+  const baseColor = theme.colors.primary.text;
+  const colors = {};
+  getAllIds(data).forEach((element, key) => {
+    colors[element] = `${baseColor}${percentToHex(getOpacity((100 - key) % 100))}`;
+  });
+  return colors;
+};
+export {
+  getAllIds,
+  getDataColors,
+  getOpacity,
+  percentToHex
+};

package/dist/hooks/useIsOverflowing.js

@@ -10,10 +10,11 @@ const useIsOverflowing = (ref, callback) => {
       const hasOverflow = element.clientWidth < element.scrollWidth;
       setIsOverflowing(hasOverflow);
     };
-    setTimeout(() => handleResize(), 0);
+    const timeout = setTimeout(() => handleResize(), 0);
     window.addEventListener("resize", handleResize);
     return () => {
       window.removeEventListener("resize", handleResize);
+      clearTimeout(timeout);
     };
   }, [ref, callback]);
   return isOverflowing;

package/dist/index.d.ts

@@ -1,4 +1,5 @@
+import './utils/animations/animations.css';
 export * from './components';
 export type { UltravioletUITheme } from './theme';
 export { darkTheme, default as theme, extendTheme, ThemeProvider, useTheme, } from './theme';
-export { Breakpoint, bounce, down, fadeIn, fadeInVanillaExtract, fadeOut, flash, getUUID, normalize, ping, pingVanillaExtract, pulse, quickScaleDown, scaleBack, scaleDown, scaleForward, scaleUp, sketchIn, sketchOut, slideDownLarge, slideFromBottom, slideFromBottomVanillaExtract, slideFromLeft, slideFromRight, slideFromTop, slideToBottom, slideToLeft, slideToRight, slideToTop, slideUpLarge, unfoldIn, unfoldOut, up, zoomIn, zoomInVanillaExtract, zoomOut, } from './utils';
+export { Breakpoint, bounce, bounceDefault, down, fadeIn, fadeInDefault, fadeOut, fadeOutDefault, flash, flashDefault, getUUID, normalize, ping, pingDefault, pulse, pulseDefault, quickScaleDown, quickScaleDownDefault, scaleBack, scaleBackDefault, scaleDown, scaleDownDefault, scaleForward, scaleForwardDefault, scaleUp, scaleUpDefault, sketchIn, sketchInDefault, sketchOut, sketchOutDefault, slideDownLarge, slideDownLargeDefault, slideFromBottom, slideFromBottomDefault, slideFromLeft, slideFromLeftDefault, slideFromRight, slideFromRightDefault, slideFromTop, slideFromTopDefault, slideToBottom, slideToBottomDefault, slideToLeft, slideToLeftDefault, slideToRight, slideToRightDefault, slideToTop, slideToTopDefault, slideUpLarge, slideUpLargeDefault, unfoldIn, unfoldInDefault, unfoldOut, unfoldOutDefault, up, zoomIn, zoomInDefault, zoomOut, zoomOutDefault, } from './utils';

package/dist/index.js

@@ -1,10 +1,11 @@
+/* empty css                                */
 import { extendTheme } from "./theme/index.js";
 import { default as default2 } from "./utils/responsive/Breakpoint.js";
 import { default as default3 } from "./utils/normalize.js";
 import { ThemeProvider, consoleDarkTheme, consoleLightTheme, useTheme } from "@ultraviolet/themes";
-import { bounce, fadeIn, fadeOut, flash, ping, pulse, quickScaleDown, scaleBack, scaleDown, scaleForward, scaleUp, sketchIn, sketchOut, slideDownLarge, slideFromBottom, slideFromLeft, slideFromRight, slideFromTop, slideToBottom, slideToLeft, slideToRight, slideToTop, slideUpLarge, unfoldIn, unfoldOut, zoomIn, zoomOut } from "./utils/animations.js";
+import { bounce, fadeIn, fadeOut, flash, ping, pulse, quickScaleDown, scaleBack, scaleDown, scaleForward, scaleUp, sketchIn, sketchOut, slideDownLarge, slideFromBottom, slideFromLeft, slideFromRight, slideFromTop, slideToBottom, slideToLeft, slideToRight, slideToTop, slideUpLarge, unfoldIn, unfoldOut, zoomIn, zoomOut } from "./utils/animations/animationsVE.css.js";
+import { bounce as bounce2, fadeIn as fadeIn2, fadeOut as fadeOut2, flash as flash2, ping as ping2, pulse as pulse2, quickScaleDown as quickScaleDown2, scaleBack as scaleBack2, scaleDown as scaleDown2, scaleForward as scaleForward2, scaleUp as scaleUp2, sketchIn as sketchIn2, sketchOut as sketchOut2, slideDownLarge as slideDownLarge2, slideFromBottom as slideFromBottom2, slideFromLeft as slideFromLeft2, slideFromRight as slideFromRight2, slideFromTop as slideFromTop2, slideToBottom as slideToBottom2, slideToLeft as slideToLeft2, slideToRight as slideToRight2, slideToTop as slideToTop2, slideUpLarge as slideUpLarge2, unfoldIn as unfoldIn2, unfoldOut as unfoldOut2, zoomIn as zoomIn2, zoomOut as zoomOut2 } from "./utils/animations/animations.js";
 import { down, up } from "./utils/responsive/utilities.js";
-import { fadeInVanillaExtract, pingVanillaExtract, slideFromBottomVanillaExtract, zoomInVanillaExtract } from "./utils/animationVanillaExtract.css.js";
 import { getUUID } from "./utils/ids.js";
 import { ActionBar } from "./components/ActionBar/index.js";
 import { Alert } from "./components/Alert/index.js";
@@ -40,7 +41,8 @@ import { Menu } from "./components/Menu/index.js";
 import { Meter } from "./components/Meter/index.js";
 import { Modal } from "./components/Modal/index.js";
 import { Notice } from "./components/Notice/index.js";
-import { NotificationContainer, notification } from "./components/Notification/index.js";
+import { NotificationContainer } from "./components/Notification/NotificationContainer.js";
+import { notification } from "./components/Notification/Notification.js";
 import { NumberInput } from "./components/NumberInput/index.js";
 import { Pagination } from "./components/Pagination/index.js";
 import { PasswordCheck } from "./components/PasswordCheck/index.js";
@@ -74,10 +76,12 @@ import { Text } from "./components/Text/index.js";
 import { TextArea } from "./components/TextArea/index.js";
 import { TextInput } from "./components/TextInput/index.js";
 import { TimeInput } from "./components/TimeInput/index.js";
-import { ToastContainer, toast } from "./components/Toaster/index.js";
+import { ToastContainer } from "./components/Toaster/ToasterContainer.js";
+import { toast } from "./components/Toaster/Toaster.js";
 import { Toggle } from "./components/Toggle/index.js";
 import { ToggleGroup } from "./components/ToggleGroup/index.js";
 import { Tooltip } from "./components/Tooltip/index.js";
+import { TreeMapChart } from "./components/TreeMapChart/index.js";
 import { UnitInput } from "./components/UnitInput/index.js";
 import { VerificationCode } from "./components/VerificationCode/index.js";
 export {
@@ -156,47 +160,71 @@ export {
   Toggle,
   ToggleGroup,
   Tooltip,
+  TreeMapChart,
   UnitInput,
   VerificationCode,
   bounce,
+  bounce2 as bounceDefault,
   consoleDarkTheme as darkTheme,
   down,
   extendTheme,
   fadeIn,
-  fadeInVanillaExtract,
+  fadeIn2 as fadeInDefault,
   fadeOut,
+  fadeOut2 as fadeOutDefault,
   flash,
+  flash2 as flashDefault,
   getUUID,
   default3 as normalize,
   notification,
   ping,
-  pingVanillaExtract,
+  ping2 as pingDefault,
   pulse,
+  pulse2 as pulseDefault,
   quickScaleDown,
+  quickScaleDown2 as quickScaleDownDefault,
   scaleBack,
+  scaleBack2 as scaleBackDefault,
   scaleDown,
+  scaleDown2 as scaleDownDefault,
   scaleForward,
+  scaleForward2 as scaleForwardDefault,
   scaleUp,
+  scaleUp2 as scaleUpDefault,
   sketchIn,
+  sketchIn2 as sketchInDefault,
   sketchOut,
+  sketchOut2 as sketchOutDefault,
   slideDownLarge,
+  slideDownLarge2 as slideDownLargeDefault,
   slideFromBottom,
-  slideFromBottomVanillaExtract,
+  slideFromBottom2 as slideFromBottomDefault,
   slideFromLeft,
+  slideFromLeft2 as slideFromLeftDefault,
   slideFromRight,
+  slideFromRight2 as slideFromRightDefault,
   slideFromTop,
+  slideFromTop2 as slideFromTopDefault,
   slideToBottom,
+  slideToBottom2 as slideToBottomDefault,
   slideToLeft,
+  slideToLeft2 as slideToLeftDefault,
   slideToRight,
+  slideToRight2 as slideToRightDefault,
   slideToTop,
+  slideToTop2 as slideToTopDefault,
   slideUpLarge,
+  slideUpLarge2 as slideUpLargeDefault,
   consoleLightTheme as theme,
   toast,
   unfoldIn,
+  unfoldIn2 as unfoldInDefault,
   unfoldOut,
+  unfoldOut2 as unfoldOutDefault,
   up,
   useTheme,
   zoomIn,
-  zoomInVanillaExtract,
-  zoomOut
+  zoomIn2 as zoomInDefault,
+  zoomOut,
+  zoomOut2 as zoomOutDefault
 };