@sybilion/uilib 1.3.19 → 1.3.21

package/dist/esm/components/ui/Chart/Chart.styl.js

@@ -1,7 +1,7 @@
 import styleInject from 'style-inject';
 
-var css_248z = ".Chart_chartContainer__--q1l{aspect-ratio:16/9;display:flex;font-size:.75rem;justify-content:center;line-height:1rem;max-width:100%;touch-action:none;width:100%}.Chart_chartContainer__--q1l .recharts-cartesian-axis-tick text{fill:var(--muted-foreground)}.Chart_chartContainer__--q1l .recharts-cartesian-grid line[stroke=\"#ccc\"]{stroke:var(--border)}.dark .Chart_chartContainer__--q1l .recharts-cartesian-grid line[stroke=\"#ccc\"]{stroke:var(--sb-slate-900)}.Chart_chartContainer__--q1l .recharts-curve.recharts-tooltip-cursor,.Chart_chartContainer__--q1l .recharts-polar-grid [stroke=\"#ccc\"]{stroke:var(--border)}.Chart_chartContainer__--q1l .recharts-radial-bar-background-sector,.Chart_chartContainer__--q1l .recharts-rectangle.recharts-tooltip-cursor{fill:var(--muted)}.Chart_chartContainer__--q1l .recharts-reference-line [stroke=\"#ccc\"]{stroke:var(--border)}.Chart_chartContainer__--q1l .recharts-dot[stroke=\"#fff\"]{stroke:transparent}.Chart_chartContainer__--q1l .recharts-layer,.Chart_chartContainer__--q1l .recharts-sector{outline:none}.Chart_chartContainer__--q1l .recharts-sector[stroke=\"#fff\"]{stroke:transparent}.Chart_chartContainer__--q1l .recharts-surface{outline:none}.Chart_chartContainer__--q1l .recharts-wrapper{position:relative}.Chart_chartContainer__--q1l .recharts-surface{position:relative;z-index:1}.Chart_chartContainer__--q1l .recharts-tooltip-wrapper{z-index:3!important}.Chart_chartContainer__--q1l .recharts-active-dot{z-index:3}.Chart_chartGrid__t52WF{stroke-width:.6}.Chart_tooltipContainer__6tc0q{align-items:start;box-sizing:border-box;display:grid;max-width:100%;min-width:0;overflow-wrap:break-word;width:-moz-max-content;width:max-content;word-break:break-word;grid-gap:.375rem;background-color:var(--background);border:1px solid var(--border)/.5;border-radius:.5rem;box-shadow:0 10px 10px -5px rgba(0,0,0,.3),0 0 2px 0 rgba(0,0,0,.5);font-size:.75rem;gap:.375rem;line-height:1rem;opacity:0;padding:.375rem .625rem;transition:opacity .5s ease-out}.Chart_chartContainer__--q1l:hover .Chart_tooltipContainer__6tc0q{opacity:1;transition-duration:.5s}.Chart_tooltipItem__j8I9T{align-items:stretch;display:flex;flex-wrap:wrap;gap:.5rem;width:100%}.Chart_tooltipItem__j8I9T>svg{color:var(--muted-foreground);height:.625rem;width:.625rem}.Chart_tooltipIndicator__Z-JWp{background-color:var(--color-bg);border-color:var(--color-border);border-radius:2px;border-width:1px;flex-shrink:0}.Chart_tooltipIndicator__Z-JWp.Chart_indicator-dot__MWcmW{height:.625rem;width:.625rem}.Chart_tooltipIndicator__Z-JWp.Chart_indicator-line__MO3ul{width:.25rem}.Chart_tooltipIndicator__Z-JWp.Chart_indicator-dashed__2LqIN{background-color:transparent;border-style:dashed;border-width:1.5px;width:0}.Chart_tooltipIndicator__Z-JWp.Chart_indicator-dashed__2LqIN.Chart_nested__7EWWk{margin-bottom:.125rem;margin-top:.125rem}.Chart_tooltipContent__M3R-W{display:flex;flex:1 1 0%;justify-content:space-between;line-height:1}.Chart_tooltipLabel__zMpjZ{display:grid;grid-gap:.375rem;gap:.375rem}.Chart_tooltipValue__vTQxU{color:var(--foreground);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:\"tnum\";font-variant-numeric:tabular-nums;font-weight:500;margin-left:var(--p-3)}.Chart_legendContainer__u1J3U{align-items:center;display:flex;gap:1rem;justify-content:center}.Chart_legendItem__0CSyC{align-items:center;display:flex;gap:.375rem}.Chart_legendItem__0CSyC>svg{color:var(--muted-foreground);height:.75rem;width:.75rem}.Chart_legendIndicator__erzzP{border-radius:2px;flex-shrink:0;height:.5rem;width:.5rem}.chart-line-blinking path{animation:chart-line-blink 1s ease-in-out infinite;animation-direction:alternate}@keyframes Chart_chart-line-blink__4EI-g{0%{opacity:.5}to{opacity:1}}";
-var S = {"chartContainer":"Chart_chartContainer__--q1l","chartGrid":"Chart_chartGrid__t52WF","tooltipContainer":"Chart_tooltipContainer__6tc0q","tooltipItem":"Chart_tooltipItem__j8I9T","tooltipIndicator":"Chart_tooltipIndicator__Z-JWp","indicator-dot":"Chart_indicator-dot__MWcmW","indicator-line":"Chart_indicator-line__MO3ul","indicator-dashed":"Chart_indicator-dashed__2LqIN","nested":"Chart_nested__7EWWk","tooltipContent":"Chart_tooltipContent__M3R-W","tooltipLabel":"Chart_tooltipLabel__zMpjZ","tooltipValue":"Chart_tooltipValue__vTQxU","legendContainer":"Chart_legendContainer__u1J3U","legendItem":"Chart_legendItem__0CSyC","legendIndicator":"Chart_legendIndicator__erzzP","chart-line-blink":"Chart_chart-line-blink__4EI-g"};
+var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.Chart_chartContainer__--q1l{aspect-ratio:16/9;display:flex;font-size:.75rem;justify-content:center;line-height:1rem;max-width:100%;touch-action:none;width:100%}.Chart_chartContainer__--q1l .recharts-cartesian-axis-tick text{fill:var(--muted-foreground)}.Chart_chartContainer__--q1l .recharts-cartesian-grid line[stroke=\"#ccc\"]{stroke:var(--border)}.dark .Chart_chartContainer__--q1l .recharts-cartesian-grid line[stroke=\"#ccc\"]{stroke:var(--sb-slate-900)}.Chart_chartContainer__--q1l .recharts-curve.recharts-tooltip-cursor,.Chart_chartContainer__--q1l .recharts-polar-grid [stroke=\"#ccc\"]{stroke:var(--border)}.Chart_chartContainer__--q1l .recharts-radial-bar-background-sector,.Chart_chartContainer__--q1l .recharts-rectangle.recharts-tooltip-cursor{fill:var(--muted)}.Chart_chartContainer__--q1l .recharts-reference-line [stroke=\"#ccc\"]{stroke:var(--border)}.Chart_chartContainer__--q1l .recharts-dot[stroke=\"#fff\"]{stroke:transparent}.Chart_chartContainer__--q1l .recharts-layer,.Chart_chartContainer__--q1l .recharts-sector{outline:none}.Chart_chartContainer__--q1l .recharts-sector[stroke=\"#fff\"]{stroke:transparent}.Chart_chartContainer__--q1l .recharts-surface{outline:none}.Chart_chartContainer__--q1l .recharts-wrapper{position:relative}.Chart_chartContainer__--q1l .recharts-surface{position:relative;z-index:1}.Chart_chartContainer__--q1l .recharts-tooltip-wrapper{box-sizing:border-box;max-width:90%;z-index:3!important}.Chart_chartContainer__--q1l .recharts-active-dot{z-index:3}.Chart_chartGrid__t52WF{stroke-width:.6}.Chart_tooltipContainer__6tc0q{align-items:start;box-sizing:border-box;display:grid;max-width:min(500px,90vw);min-width:0;overflow-wrap:break-word;width:100%;word-break:break-word;grid-gap:.375rem;backdrop-filter:blur(10px);background-color:color-mix(in srgb,var(--background) 50%,transparent);border:1px solid var(--border)/.5;border-radius:.5rem;box-shadow:0 10px 10px -5px rgba(0,0,0,.2),0 0 1px 0 var(--muted-foreground);font-size:.75rem;gap:.375rem;line-height:1rem;opacity:0;padding:.375rem .625rem;transition:opacity .5s ease-out}.dark .Chart_tooltipContainer__6tc0q{box-shadow:0 0 1px 0 var(--sb-slate-700),0 10px 10px -5px rgba(0,0,0,.7)}.Chart_chartContainer__--q1l:hover .Chart_tooltipContainer__6tc0q{opacity:1;transition-duration:.5s}.Chart_tooltipItem__j8I9T{align-items:stretch;display:flex;flex-wrap:wrap;gap:.5rem;width:100%}.Chart_tooltipItem__j8I9T>svg{color:var(--muted-foreground);height:.625rem;width:.625rem}.Chart_tooltipIndicator__Z-JWp{background-color:var(--color-bg);border-color:var(--color-border);border-radius:2px;border-width:1px;flex-shrink:0}.Chart_tooltipIndicator__Z-JWp.Chart_indicator-dot__MWcmW{height:.625rem;width:.625rem}.Chart_tooltipIndicator__Z-JWp.Chart_indicator-line__MO3ul{width:.25rem}.Chart_tooltipIndicator__Z-JWp.Chart_indicator-dashed__2LqIN{background-color:transparent;border-style:dashed;border-width:1.5px;width:0}.Chart_tooltipIndicator__Z-JWp.Chart_indicator-dashed__2LqIN.Chart_nested__7EWWk{margin-bottom:.125rem;margin-top:.125rem}.Chart_tooltipContent__M3R-W{display:flex;flex:1 1 0%;justify-content:space-between;line-height:1;min-width:0}.Chart_tooltipLabel__zMpjZ{display:grid;min-width:0;grid-gap:.375rem;gap:.375rem}.Chart_tooltipLabelText__45osJ{display:-webkit-box;-webkit-line-clamp:3;max-width:100%;min-width:0;overflow:hidden;word-break:break-word;-webkit-box-orient:vertical}.Chart_tooltipValue__vTQxU{color:var(--foreground);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:\"tnum\";font-variant-numeric:tabular-nums;font-weight:500;margin-left:var(--p-3);white-space:nowrap}.Chart_legendContainer__u1J3U{align-items:center;display:flex;gap:1rem;justify-content:center}.Chart_legendItem__0CSyC{align-items:center;display:flex;gap:.375rem}.Chart_legendItem__0CSyC>svg{color:var(--muted-foreground);height:.75rem;width:.75rem}.Chart_legendIndicator__erzzP{border-radius:2px;flex-shrink:0;height:.5rem;width:.5rem}.chart-line-blinking path{animation:chart-line-blink 1s ease-in-out infinite;animation-direction:alternate}@keyframes Chart_chart-line-blink__4EI-g{0%{opacity:.5}to{opacity:1}}";
+var S = {"chartContainer":"Chart_chartContainer__--q1l","chartGrid":"Chart_chartGrid__t52WF","tooltipContainer":"Chart_tooltipContainer__6tc0q","tooltipItem":"Chart_tooltipItem__j8I9T","tooltipIndicator":"Chart_tooltipIndicator__Z-JWp","indicator-dot":"Chart_indicator-dot__MWcmW","indicator-line":"Chart_indicator-line__MO3ul","indicator-dashed":"Chart_indicator-dashed__2LqIN","nested":"Chart_nested__7EWWk","tooltipContent":"Chart_tooltipContent__M3R-W","tooltipLabel":"Chart_tooltipLabel__zMpjZ","tooltipLabelText":"Chart_tooltipLabelText__45osJ","tooltipValue":"Chart_tooltipValue__vTQxU","legendContainer":"Chart_legendContainer__u1J3U","legendItem":"Chart_legendItem__0CSyC","legendIndicator":"Chart_legendIndicator__erzzP","chart-line-blink":"Chart_chart-line-blink__4EI-g"};
 styleInject(css_248z);
 
 export { S as default };

package/dist/esm/components/ui/Chart/components/ChartTooltipItem.js

@@ -16,7 +16,7 @@ function ChartTooltipItem({ item, index, config, indicator, hideIndicator, nestL
     return (jsx("div", { className: cn(S.tooltipItem, indicator === 'dot' && 'items-center'), children: formatter && item?.value !== undefined && item.name ? (formatter(item.value, item.name, item, index, item.payload)) : (jsxs(Fragment, { children: [itemConfig?.icon ? (jsx(itemConfig.icon, {})) : (!hideIndicator && (jsx("div", { className: cn(S.tooltipIndicator, S[`indicator-${indicator}`], nestLabel && S.nested), style: {
                         '--color-bg': indicatorColor,
                         '--color-border': indicatorColor,
-                    } }))), jsxs("div", { className: cn(S.tooltipContent, nestLabel ? 'items-end' : 'items-center'), children: [jsxs("div", { className: S.tooltipLabel, children: [nestLabel ? tooltipLabel : null, jsx("span", { className: "text-muted-foreground", children: itemConfig?.label || item.name })] }), item.value && (jsx("span", { className: S.tooltipValue, children: Array.isArray(item.value)
+                    } }))), jsxs("div", { className: cn(S.tooltipContent, nestLabel ? 'items-end' : 'items-center'), children: [jsxs("div", { className: S.tooltipLabel, children: [nestLabel ? tooltipLabel : null, jsx("span", { className: cn('text-muted-foreground', S.tooltipLabelText), children: itemConfig?.label || item.name })] }), item.value && (jsx("span", { className: S.tooltipValue, children: Array.isArray(item.value)
                                 ? `${item.value[0].toLocaleString(undefined, { maximumFractionDigits: 20 })} – ${item.value[1].toLocaleString(undefined, { maximumFractionDigits: 20 })}`
                                 : item.value.toLocaleString(undefined, {
                                     maximumFractionDigits: 20,

package/dist/esm/components/ui/Dialog/Dialog.js

@@ -1,13 +1,15 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import cn from 'classnames';
-import React__default, { useState, useRef, useId, useEffect } from 'react';
+import React__default, { useState, useRef, useId, useEffect, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { Card, CardHeader, CardContent, CardFooter } from '../Card/Card.js';
+import { APP_MODAL_ID } from '../../../constants/appMount.js';
 import { XIcon } from '@phosphor-icons/react';
 import S from './Dialog.styl.js';
 
 function Dialog({ open, onOpenChange, disabled, trigger, title, subtitle, disableCloseButton, icon, content, contentClassName, footer, footerClassName, footerAlignment = 'center', size = 'default', className, noScroll, maxHeight, autoScrollBottom, width, }) {
     const [isMounted, setIsMounted] = useState(false);
+    const [modalContainer, setModalContainer] = useState(null);
     const [isAnimating, setIsAnimating] = useState(false);
     const dialogRef = useRef(null);
     const triggerRef = useRef(null);
@@ -19,6 +21,9 @@ function Dialog({ open, onOpenChange, disabled, trigger, title, subtitle, disabl
         setIsMounted(true);
         return () => setIsMounted(false);
     }, []);
+    useLayoutEffect(() => {
+        setModalContainer(document.getElementById(APP_MODAL_ID));
+    }, []);
     // Handle open/close animations
     useEffect(() => {
         if (open) {
@@ -120,7 +125,10 @@ function Dialog({ open, onOpenChange, disabled, trigger, title, subtitle, disabl
                         : null,
                 }, children: [(title || subtitle || icon) && (jsx(CardHeader, { icon: icon, title: title, description: subtitle })), !disableCloseButton && (jsx("button", { className: S.dialogClose, onClick: handleCloseClick, "aria-label": "Close dialog", type: "button", children: jsx(XIcon, { size: 16 }) })), content && (jsx(CardContent, { className: contentClassName, noScroll: noScroll, autoScrollBottom: autoScrollBottom, children: content })), footer && (jsx(CardFooter, { className: cn(S.footer, S[`align-${footerAlignment}`], footerClassName), children: footer }))] })] }));
     const onTriggerClick = !disabled ? () => onOpenChange(true) : undefined;
-    return (jsxs(Fragment, { children: [trigger && jsx("div", { onClick: onTriggerClick, children: trigger }), open && !disabled && createPortal(dialogContent, document.body)] }));
+    return (jsxs(Fragment, { children: [trigger && jsx("div", { onClick: onTriggerClick, children: trigger }), open &&
+                !disabled &&
+                modalContainer &&
+                createPortal(dialogContent, modalContainer)] }));
 }
 
 export { Dialog, S as DialogStyles };

package/dist/esm/constants/appMount.js

@@ -0,0 +1,5 @@
+/** DOM id for the main React root mount (`#app-root`). */
+/** DOM id for modal/dialog portals (`#app-modal`). */
+const APP_MODAL_ID = 'app-modal';
+
+export { APP_MODAL_ID };

package/dist/esm/types/src/constants/appMount.d.ts

@@ -0,0 +1,4 @@
+/** DOM id for the main React root mount (`#app-root`). */
+export declare const APP_ROOT_ID = "app-root";
+/** DOM id for modal/dialog portals (`#app-modal`). */
+export declare const APP_MODAL_ID = "app-modal";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.3.19",
+  "version": "1.3.21",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",

package/src/components/ui/Chart/Chart.styl

@@ -1,3 +1,5 @@
+@import 'lib/theme.styl'
+
 // Chart container
 .chartContainer
   display flex
@@ -60,6 +62,8 @@
     // Tooltip portal positions with absolute + transform; do not override with relative.
     .recharts-tooltip-wrapper
       z-index 3 !important
+      max-width 90%
+      box-sizing border-box
 
     // Active dots and cursor
     .recharts-active-dot
@@ -75,8 +79,8 @@
 .tooltipContainer
   display grid
   box-sizing border-box
-  width max-content
-  max-width 100%
+  width 100%
+  max-width unquote('min(500px, 90vw)')
   min-width 0
   overflow-wrap break-word
   word-break break-word
@@ -85,13 +89,18 @@
   padding 0.375rem 0.625rem /* py-1.5 px-2.5 */
   border-radius 0.5rem /* rounded-lg */
   border 1px solid var(--border) / 0.5
-  background-color var(--background)
+  // background-color var(--background)
+  backdrop-filter blur(10px)
+  background-color unquote('color-mix(in srgb, var(--background) 50%, transparent)')
   font-size 0.75rem /* text-xs */
   line-height 1rem
-  box-shadow 0 10px 10px -5px rgba(0 0 0 0.3), 0 0 2px 0 rgba(0 0 0 0.5) /* shadow-xl */
+  box-shadow 0 10px 10px -5px rgba(0 0 0 0.2), 0 0 1px 0 var(--muted-foreground)
   opacity 0
   transition opacity 0.5s ease-out
 
+  :global(.dark) &
+    box-shadow 0 0 1px 0 var(--sb-slate-700), 0 10px 10px -5px rgba(0 0 0 0.7)
+
   .chartContainer:hover &
     opacity 1
     transition-duration 0.5s
@@ -135,19 +144,29 @@
 .tooltipContent
   display flex
   flex 1 1 0%
+  min-width 0
   justify-content space-between
   line-height 1
 
 .tooltipLabel
   display grid
+  min-width 0
   gap 0.375rem /* gap-1.5 */
 
+.tooltipLabelText
+  min-width 0
+  max-width 100%
+  overflow hidden
+  word-break break-word
+  line-clamp(3)
+
 .tooltipValue
   font-family ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
   font-weight 500
   font-variant-numeric tabular-nums
   color var(--foreground)
   margin-left var(--p-3)
+  white-space nowrap
 
 // Legend styles
 .legendContainer

package/src/components/ui/Chart/Chart.styl.d.ts

@@ -16,6 +16,7 @@ interface CssExports {
   'tooltipIndicator': string;
   'tooltipItem': string;
   'tooltipLabel': string;
+  'tooltipLabelText': string;
   'tooltipValue': string;
 }
 export const cssExports: CssExports;

package/src/components/ui/Chart/components/ChartTooltipItem.tsx

@@ -92,7 +92,7 @@ export function ChartTooltipItem({
           >
             <div className={S.tooltipLabel}>
               {nestLabel ? tooltipLabel : null}
-              <span className="text-muted-foreground">
+              <span className={cn('text-muted-foreground', S.tooltipLabelText)}>
                 {itemConfig?.label || item.name}
               </span>
             </div>

package/src/components/ui/Dialog/Dialog.tsx

@@ -1,5 +1,11 @@
 import cn from 'classnames';
-import React, { useEffect, useId, useRef, useState } from 'react';
+import React, {
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
 import { createPortal } from 'react-dom';
 
 import {
@@ -8,6 +14,7 @@ import {
   CardFooter,
   CardHeader,
 } from '#uilib/components/ui/Card/Card';
+import { APP_MODAL_ID } from '#uilib/constants/appMount';
 import { XIcon } from '@phosphor-icons/react';
 
 import S from './Dialog.styl';
@@ -35,6 +42,9 @@ export function Dialog({
   width,
 }: DialogProps) {
   const [isMounted, setIsMounted] = useState(false);
+  const [modalContainer, setModalContainer] = useState<HTMLElement | null>(
+    null,
+  );
   const [isAnimating, setIsAnimating] = useState(false);
   const dialogRef = useRef<HTMLDivElement>(null);
   const triggerRef = useRef<HTMLElement | null>(null);
@@ -48,6 +58,10 @@ export function Dialog({
     return () => setIsMounted(false);
   }, []);
 
+  useLayoutEffect(() => {
+    setModalContainer(document.getElementById(APP_MODAL_ID));
+  }, []);
+
   // Handle open/close animations
   useEffect(() => {
     if (open) {
@@ -228,7 +242,10 @@ export function Dialog({
   return (
     <>
       {trigger && <div onClick={onTriggerClick}>{trigger}</div>}
-      {open && !disabled && createPortal(dialogContent, document.body)}
+      {open &&
+        !disabled &&
+        modalContainer &&
+        createPortal(dialogContent, modalContainer)}
     </>
   );
 }

package/src/constants/appMount.ts

@@ -0,0 +1,5 @@
+/** DOM id for the main React root mount (`#app-root`). */
+export const APP_ROOT_ID = 'app-root';
+
+/** DOM id for modal/dialog portals (`#app-modal`). */
+export const APP_MODAL_ID = 'app-modal';

package/src/docs/index.tsx

@@ -1,12 +1,13 @@
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 
+import { APP_ROOT_ID } from '#uilib/constants/appMount';
 import { DEFAULT_THEME_ACTIVE_COLOR } from '#uilib/docs/lib/theme';
 
 import App from './App/App';
 import { ThemeProvider } from './contexts/theme-context';
 
-const elem = document.getElementById('app-root') as HTMLElement;
+const elem = document.getElementById(APP_ROOT_ID) as HTMLElement;
 const root = createRoot(elem);
 
 root.render(

package/src/docs/pages/ChartAreaInteractivePage.tsx

@@ -85,7 +85,10 @@ const INITIAL_CHART: ChartDataPoint[] = [
 ];
 
 const DEMO_FORECAST_ITEMS: ForecastItemData[] = [
-  { id: DEMO_FORECAST_ID, name: 'My custom forecast' },
+  {
+    id: DEMO_FORECAST_ID,
+    name: 'My custom forecast with an extremely long descriptive name that should wrap and clamp inside the chart tooltip after three lines',
+  },
 ];
 
 type DemoMode = 'none' | OverlayMode;