@nova-design-system/nova-react 3.12.0 → 3.13.0

package/README.md

@@ -5,7 +5,8 @@
 - [Nova Components React](#nova-components-react)
   - [Key Features](#key-features)
   - [Installation](#installation)
-  - [Setup Using Tailwind (Recommended)](#setup-using-tailwind-recommended)
+  - [Setting up Tailwind](#setting-up-tailwind)
+    - [About Tailwind and the Nova Plugin](#about-tailwind-and-the-nova-plugin)
     - [1. Install Tailwind CSS and the Vite Plugin](#1-install-tailwind-css-and-the-vite-plugin)
     - [2. Configure the Vite Plugin](#2-configure-the-vite-plugin)
     - [3. Create `tailwind.config.ts`](#3-create-tailwindconfigts)
@@ -14,9 +15,6 @@
     - [6. Use Nova Components with Tailwind Utilities](#6-use-nova-components-with-tailwind-utilities)
     - [7. Setup the Nova Font](#7-setup-the-nova-font)
     - [Creating Your Own Style Components with Tailwind](#creating-your-own-style-components-with-tailwind)
-  - [Setup Without Tailwind (Not Recommended)](#setup-without-tailwind-not-recommended)
-    - [1. Include Nova Tokens and Nova Utilities](#1-include-nova-tokens-and-nova-utilities)
-    - [2. Use Nova Components](#2-use-nova-components)
   - [Nova Font Pro Integration](#nova-font-pro-integration)
     - [Option 1: Import in Global CSS (Recommended)](#option-1-import-in-global-css-recommended)
     - [Option 2: HTML Integration](#option-2-html-integration)
@@ -27,7 +25,7 @@
 ## Key Features
 
 - **Lightweight Integration**: Leverage Nova Web Components with minimal configuration in React.
-- **Customizable Styling**: Use Tailwind (recommended) or Nova’s utility classes to quickly style components.
+- **Customizable Styling**: Use Tailwind’s utility classes with the Nova Tailwind theme and plugin for token-driven styling and layouts.
 - **Dark Mode Ready**: Toggle dark mode by adding the `dark` class to your `body` element.
 - **Nova Font Pro Support**: Easily integrate Nova’s custom font for a consistent design experience.
 
@@ -59,13 +57,27 @@ npm config set strict-ssl false
 
 ---
 
-## Setup Using Tailwind (Recommended)
+## Setting up Tailwind
 
-We highly recommend using Tailwind CSS for styling, as it ensures an optimized bundle size and a powerful utility-first workflow. Nova offers a dedicated Tailwind plugin and theme, allowing you to seamlessly integrate Nova’s design tokens with Tailwind’s utility classes for a consistent and efficient styling workflow.
+Nova React requires Tailwind CSS for styling. Tailwind provides a powerful utility-first workflow and an optimized bundle size. Nova includes a dedicated Tailwind theme and plugin that map Nova’s design tokens to Tailwind’s theme and utilities, enabling consistent, token-driven styling across your app.
 
 > **Tailwind Version**
 > This guide is written for Tailwind v4. While compatible with v3, some features may not work as expected.
 
+### About Tailwind and the Nova Plugin
+
+- **What is Tailwind?** A utility-first CSS framework with low-level, composable classes (flex, grid, spacing, color, typography) to rapidly build UIs.
+- **Nova Tokens**: Nova ships design tokens as CSS variables (via the Spark and Ocean themes) covering colors, spacing, typography, radii, shadows, and more.
+- **Integration**:
+  - `novaTailwindTheme` wires Nova tokens into Tailwind’s theme scales.
+  - The Nova Tailwind plugin exposes utilities and variants that reference those tokens, so your Tailwind classes resolve to Nova’s token values at runtime.
+- **Why import tokens CSS?** Import one token CSS file (`spark.css` or `ocean.css`) so the underlying CSS variables exist at runtime. The Tailwind utilities generated by the plugin read from these variables.
+- **How to use**:
+  - Build responsive layouts with standard Tailwind utilities (flex, grid, gap, spacing).
+  - Customize Nova components by applying classes to `nv-*` elements and their slotted content.
+  - Centralize repeated patterns using Tailwind’s `@apply`.
+- **Do not mix with legacy utilities**: When using Tailwind, do not import `@nova-design-system/nova-base/dist/css/nova-utils.css` to avoid redundant CSS and larger bundles.
+
 Below is an example setup using Vite + React. If you’re using another framework or bundler, please refer to the [Tailwind Installation Guide](https://tailwindcss.com/docs/installation).
 
 ### 1. Install Tailwind CSS and the Vite Plugin
@@ -137,6 +149,8 @@ createRoot(document.getElementById('root')!).render(
 )
 ```
 
+> When using Tailwind, do not import `@nova-design-system/nova-base/dist/css/nova-utils.css`.
+
 ### 6. Use Nova Components with Tailwind Utilities
 
 ```tsx
@@ -158,6 +172,9 @@ const MyComponent: React.FC = () => {
 export default MyComponent
 ```
 
+- Apply Tailwind classes to build layouts (e.g., `flex`, `grid`, `gap-*`, `p-*`, `m-*`).
+- Compose classes to customize the look and spacing of Nova components and their content.
+
 ### 7. Setup the Nova Font
 
 Follow the steps in the [Nova Font Pro Integration](#nova-font-pro-integration) section below.
@@ -201,59 +218,11 @@ This ensures consistent styling and keeps your markup clean. Any colors or spaci
 
 ---
 
-## Setup Without Tailwind (Not Recommended)
-
-If you don’t plan to use Tailwind, Nova provides a large utility CSS file for quick prototyping. Be aware that this approach will increase your CSS bundle size, offer less options, and lacks the flexibility and optimizations of Tailwind.
-
-### 1. Include Nova Tokens and Nova Utilities
-
-In your entry point (`main.tsx`):
-
-```ts
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-
-import '@nova-design-system/nova-base/dist/css/spark.css' // or ocean.css
-import '@nova-design-system/nova-base/dist/css/nova-utils.css'
-import './index.css'
-
-import App from './App.tsx'
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>
-)
-```
-
-### 2. Use Nova Components
-
-```tsx
-import { useState } from 'react'
-import { NvButton } from "@nova-design-system/nova-react"
-
-const MyComponent: React.FC = () => {
-  const [count, setCount] = useState(0)
-
-  return (
-    <div className="flex items-center justify-center">
-      <NvButton danger onClick={() => setCount(count + 1)}>
-        Count is {count}
-      </NvButton>
-    </div>
-  )
-}
-
-export default MyComponent
-```
-
----
-
 ## Nova Font Pro Integration
 
 > [!WARNING]
 > Nova Fonts is a protected asset and is not included in the Nova Base package. You need to include the Nova Fonts CSS file in your project.
-> To get the Nova Fonts URL, please contact us via Teams or get the URL in the Nova Design System [internal wiki](https://dev.azure.com/elia-digitization/Nova/_wiki/wikis/Nova.wiki/30245/Nova-Font-Pro).
+> To get the Nova Fonts URL, **please contact us via Teams** or get the URL in the Nova Design System [internal wiki](https://dev.azure.com/elia-digitization/Nova/_wiki/wikis/Nova.wiki/30245/Nova-Font-Pro).
 
  Once you have the URL, you can integrate it using any of these methods:
 
@@ -261,7 +230,7 @@ export default MyComponent
 In your main CSS file (e.g., `src/index.css`):
 
 ```css
-@import url('https://novaassets.azureedge.net/fonts/nova-fonts-pro.css');
+@import url('contact-us-for-URL/nova-fonts-pro.css');
 ```
 
 ### Option 2: HTML Integration
@@ -271,7 +240,7 @@ In your `index.html`:
 <!DOCTYPE html>
 <html>
 <head>
-  <link rel="stylesheet" href="https://novaassets.azureedge.net/fonts/nova-fonts-pro.css">
+  <link rel="stylesheet" href="contact-us-for-URL/nova-fonts-pro.css">
 </head>
 <body>
   <div id="root"></div>

package/dist/cjs/collapse.animation-acda1bf5-BuORVmQv.js

@@ -0,0 +1,214 @@
+'use strict';
+
+var styleValueTypes_esF5d10b79 = require('./style-value-types.es-f5d10b79-D0QCM8OB.js');
+
+const a = (a1, a2) => 1.0 - 3.0 * a2 + 3.0 * a1;
+const b = (a1, a2) => 3.0 * a2 - 6.0 * a1;
+const c = (a1) => 3.0 * a1;
+const calcBezier = (t, a1, a2) => ((a(a1, a2) * t + b(a1, a2)) * t + c(a1)) * t;
+const getSlope = (t, a1, a2) => 3.0 * a(a1, a2) * t * t + 2.0 * b(a1, a2) * t + c(a1);
+const subdivisionPrecision = 0.0000001;
+const subdivisionMaxIterations = 10;
+function binarySubdivide(aX, aA, aB, mX1, mX2) {
+    let currentX;
+    let currentT;
+    let i = 0;
+    do {
+        currentT = aA + (aB - aA) / 2.0;
+        currentX = calcBezier(currentT, mX1, mX2) - aX;
+        if (currentX > 0.0) {
+            aB = currentT;
+        }
+        else {
+            aA = currentT;
+        }
+    } while (Math.abs(currentX) > subdivisionPrecision &&
+        ++i < subdivisionMaxIterations);
+    return currentT;
+}
+const newtonIterations = 8;
+const newtonMinSlope = 0.001;
+function newtonRaphsonIterate(aX, aGuessT, mX1, mX2) {
+    for (let i = 0; i < newtonIterations; ++i) {
+        const currentSlope = getSlope(aGuessT, mX1, mX2);
+        if (currentSlope === 0.0) {
+            return aGuessT;
+        }
+        const currentX = calcBezier(aGuessT, mX1, mX2) - aX;
+        aGuessT -= currentX / currentSlope;
+    }
+    return aGuessT;
+}
+const kSplineTableSize = 11;
+const kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);
+function cubicBezier(mX1, mY1, mX2, mY2) {
+    const sampleValues = new Float32Array(kSplineTableSize);
+    for (let i = 0; i < kSplineTableSize; ++i) {
+        sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
+    }
+    function getTForX(aX) {
+        let intervalStart = 0.0;
+        let currentSample = 1;
+        const lastSample = kSplineTableSize - 1;
+        for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) {
+            intervalStart += kSampleStepSize;
+        }
+        --currentSample;
+        const dist = (aX - sampleValues[currentSample]) /
+            (sampleValues[currentSample + 1] - sampleValues[currentSample]);
+        const guessForT = intervalStart + dist * kSampleStepSize;
+        const initialSlope = getSlope(guessForT, mX1, mX2);
+        if (initialSlope >= newtonMinSlope) {
+            return newtonRaphsonIterate(aX, guessForT, mX1, mX2);
+        }
+        else if (initialSlope === 0.0) {
+            return guessForT;
+        }
+        else {
+            return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);
+        }
+    }
+    return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2);
+}
+
+/**
+ * Read current box metrics (height + vertical margins).
+ * @param {HTMLElement} node - The element to measure.
+ * @returns {object} The box metrics.
+ */
+function getBoxMetrics(node) {
+    const rectHeight = node.getBoundingClientRect().height;
+    const style = getComputedStyle(node);
+    const marginTop = parseFloat(style.marginTop) || 0;
+    const marginBottom = parseFloat(style.marginBottom) || 0;
+    const total = rectHeight + marginTop + marginBottom;
+    return { height: rectHeight, marginTop, marginBottom, total };
+}
+const useCollapse = (node, { duration = 200, overflow = 'hidden' } = {}) => {
+    let currentAnimation = null;
+    const stop = () => {
+        if (currentAnimation) {
+            currentAnimation.stop();
+            currentAnimation = null;
+        }
+    };
+    const setStyle = (styles) => {
+        for (const [k, v] of Object.entries(styles)) {
+            node.style[k] = v;
+        }
+    };
+    /** Instantly apply collapsed styles (no animation). */
+    function setCollapsed() {
+        stop();
+        setStyle({
+            height: '0px',
+            marginTop: '0px',
+            marginBottom: '0px',
+            overflow,
+        });
+    }
+    /** Instantly apply expanded styles (no animation). */
+    function setExpanded() {
+        stop();
+        setStyle({
+            height: '',
+            marginTop: '',
+            marginBottom: '',
+            overflow: '',
+        });
+    }
+    /**
+     * Collapse: animate from current box (height + margins) down to 0.
+     */
+    function collapse() {
+        stop();
+        return new Promise(resolve => {
+            const { height, marginTop, marginBottom, total } = getBoxMetrics(node);
+            // Lock current box
+            setStyle({
+                height: `${height}px`,
+                marginTop: `${marginTop}px`,
+                marginBottom: `${marginBottom}px`,
+                overflow,
+                willChange: 'height, margin',
+            });
+            const denom = total > 0 ? total : 0.0001; // avoid divide-by-zero
+            currentAnimation = styleValueTypes_esF5d10b79.animate({
+                from: total,
+                to: 0,
+                duration,
+                ease: cubicBezier(0.2, 0, 0, 1),
+                onUpdate: v => {
+                    const ratio = v / denom;
+                    setStyle({
+                        height: `${height * ratio}px`,
+                        marginTop: `${marginTop * ratio}px`,
+                        marginBottom: `${marginBottom * ratio}px`,
+                    });
+                },
+                onComplete: () => {
+                    setStyle({
+                        height: '0px',
+                        marginTop: '0px',
+                        marginBottom: '0px',
+                        willChange: '',
+                    });
+                    resolve();
+                },
+            });
+        });
+    }
+    /**
+     * Expand: animate from 0 box to the element's natural box (height + margins),
+     * then restore `height: auto` and computed margins.
+     */
+    function expand() {
+        stop();
+        return new Promise(resolve => {
+            // Let the element size naturally to measure the target box
+            setStyle({
+                height: '',
+                marginTop: '',
+                marginBottom: '',
+                overflow,
+            });
+            const { height, marginTop, marginBottom, total } = getBoxMetrics(node);
+            // Start locked at zero box
+            setStyle({
+                height: '0px',
+                marginTop: '0px',
+                marginBottom: '0px',
+                willChange: 'height, margin',
+            });
+            const denom = total > 0 ? total : 0.0001;
+            currentAnimation = styleValueTypes_esF5d10b79.animate({
+                from: 0,
+                to: total,
+                duration,
+                ease: cubicBezier(0.2, 0, 0, 1),
+                onUpdate: v => {
+                    const ratio = v / denom;
+                    setStyle({
+                        height: `${height * ratio}px`,
+                        marginTop: `${marginTop * ratio}px`,
+                        marginBottom: `${marginBottom * ratio}px`,
+                    });
+                },
+                onComplete: () => {
+                    // Restore natural layout
+                    setStyle({
+                        height: '',
+                        marginTop: '',
+                        marginBottom: '',
+                        overflow: '',
+                        willChange: '',
+                    });
+                    resolve();
+                },
+            });
+        });
+    }
+    return { collapse, expand, setCollapsed, setExpanded };
+};
+
+exports.useCollapse = useCollapse;

package/dist/cjs/{constants-a857c476-Cj2b-su0.js → constants-d0f19e7b-s0SCO_vi.js}

@@ -44,6 +44,11 @@ exports.ButtonType = void 0;
     ButtonType["Reset"] = "reset";
     ButtonType["Button"] = "button";
 })(exports.ButtonType || (exports.ButtonType = {}));
+var NotificationEmphasis;
+(function (NotificationEmphasis) {
+    NotificationEmphasis["Medium"] = "medium";
+    NotificationEmphasis["High"] = "high";
+})(NotificationEmphasis || (NotificationEmphasis = {}));
 var ToggleButtonEmphasis;
 (function (ToggleButtonEmphasis) {
     ToggleButtonEmphasis["High"] = "high";