@rosettadash/react 0.1.1 → 0.1.3

package/src/layout/flex/FlexLayout.js

@@ -1,10 +1,30 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import { Children, cloneElement, forwardRef, isValidElement } from 'react';
 /** @rosettadash/react/layout/flex — layout.flex */
 export const FlexLayout = forwardRef(function FlexLayout(props, ref) {
     var _a, _b;
-    const { className, style, children } = props;
-    const rootClass = ['rd-flex', className].filter(Boolean).join(' ');
-    return (_jsxs("section", { ref: ref, className: rootClass, style: style, "data-testid": "rd-flex", children: [props.title ? _jsx("span", { className: "rd-flex__title", children: props.title }) : null, _jsx("div", { className: "rd-flex__flex", style: { flexDirection: (_a = props.direction) !== null && _a !== void 0 ? _a : 'row', gap: (_b = props.gap) !== null && _b !== void 0 ? _b : 12 }, children: children })] }));
+    const { className, style, children, itemFlex, stretchItems } = props;
+    const rootClass = ['rd-flex', stretchItems ? 'rd-flex--stretch-items' : '', className]
+        .filter(Boolean)
+        .join(' ');
+    const childArray = Children.toArray(children);
+    const wrappedChildren = childArray.map((child, index) => {
+        var _a;
+        if (!isValidElement(child)) {
+            return child;
+        }
+        const grow = itemFlex === null || itemFlex === void 0 ? void 0 : itemFlex[index];
+        const itemStyle = grow !== undefined
+            ? { '--rd-flex-grow': String(grow) }
+            : undefined;
+        const itemClass = grow !== undefined ? 'rd-flex__item rd-flex__item--grow' : 'rd-flex__item';
+        return cloneElement(child, {
+            className: [itemClass, child.props.className]
+                .filter(Boolean)
+                .join(' '),
+            style: Object.assign(Object.assign({}, ((_a = child.props.style) !== null && _a !== void 0 ? _a : {})), itemStyle),
+        });
+    });
+    return (_jsxs("section", { ref: ref, className: rootClass, style: style, "data-testid": "rd-flex", children: [props.title ? _jsx("span", { className: "rd-flex__title", children: props.title }) : null, _jsx("div", { className: "rd-flex__flex", style: { flexDirection: (_a = props.direction) !== null && _a !== void 0 ? _a : 'row', gap: (_b = props.gap) !== null && _b !== void 0 ? _b : 12 }, children: wrappedChildren })] }));
 });
 //# sourceMappingURL=FlexLayout.js.map

package/src/layout/flex/FlexLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlexLayout.js","sourceRoot":"","sources":["../../../../../../packages/react/src/layout/flex/FlexLayout.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsC,MAAM,OAAO,CAAC;AAWvE,mDAAmD;AACnD,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAA+B,SAAS,UAAU,CACpF,KAAK,EACL,GAAG;;IAEH,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC7C,MAAM,SAAS,GAAG,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEnE,OAAO,CACL,mBAAS,GAAG,EAAE,GAAmC,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,iBAAc,SAAS,aACzG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,eAAM,SAAS,EAAC,gBAAgB,YAAE,KAAK,CAAC,KAAK,GAAQ,CAAC,CAAC,CAAC,IAAI,EAC3E,cAAK,SAAS,EAAC,eAAe,EAAC,KAAK,EAAE,EAAE,aAAa,EAAE,MAAA,KAAK,CAAC,SAAS,mCAAI,KAAK,EAAE,GAAG,EAAE,MAAA,KAAK,CAAC,GAAG,mCAAI,EAAE,EAAE,YAAG,QAAQ,GAAO,IACjH,CACX,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"FlexLayout.js","sourceRoot":"","sources":["../../../../../../packages/react/src/layout/flex/FlexLayout.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,UAAU,EAAE,cAAc,EAAyD,MAAM,OAAO,CAAC;AAclI,mDAAmD;AACnD,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAA+B,SAAS,UAAU,CACpF,KAAK,EACL,GAAG;;IAEH,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;IACrE,MAAM,SAAS,GAAG,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,EAAE,SAAS,CAAC;SACnF,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,MAAM,UAAU,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAC9C,MAAM,eAAe,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;;QACtD,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;YAC3B,OAAO,KAAK,CAAC;QACf,CAAC;QACD,MAAM,IAAI,GAAG,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,KAAK,CAAC,CAAC;QAC/B,MAAM,SAAS,GACb,IAAI,KAAK,SAAS;YAChB,CAAC,CAAE,EAAE,gBAAgB,EAAE,MAAM,CAAC,IAAI,CAAC,EAAoB;YACvD,CAAC,CAAC,SAAS,CAAC;QAChB,MAAM,SAAS,GAAG,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,mCAAmC,CAAC,CAAC,CAAC,eAAe,CAAC;QAC7F,OAAO,YAAY,CAAC,KAAoE,EAAE;YACxF,SAAS,EAAE,CAAC,SAAS,EAAG,KAA8C,CAAC,KAAK,CAAC,SAAS,CAAC;iBACpF,MAAM,CAAC,OAAO,CAAC;iBACf,IAAI,CAAC,GAAG,CAAC;YACZ,KAAK,kCAAO,CAAC,MAAC,KAAiD,CAAC,KAAK,CAAC,KAAK,mCAAI,EAAE,CAAC,GAAK,SAAS,CAAE;SACnG,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,mBAAS,GAAG,EAAE,GAAmC,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,iBAAc,SAAS,aACzG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,eAAM,SAAS,EAAC,gBAAgB,YAAE,KAAK,CAAC,KAAK,GAAQ,CAAC,CAAC,CAAC,IAAI,EAC3E,cAAK,SAAS,EAAC,eAAe,EAAC,KAAK,EAAE,EAAE,aAAa,EAAE,MAAA,KAAK,CAAC,SAAS,mCAAI,KAAK,EAAE,GAAG,EAAE,MAAA,KAAK,CAAC,GAAG,mCAAI,EAAE,EAAE,YACpG,eAAe,GACZ,IACE,CACX,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/src/layout/form-section/FormSectionGrid.d.ts

@@ -0,0 +1,21 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface FormSectionGridProps {
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+}
+export interface FormSectionProps {
+    title: string;
+    fullWidth?: boolean;
+    columns?: 1 | 2;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+}
+declare function FormSectionGridRoot({ className, style, children }: FormSectionGridProps): import("react").JSX.Element;
+declare function FormSection({ title, fullWidth, columns, className, style, children }: FormSectionProps): import("react").JSX.Element;
+/** @rosettadash/react/layout/form-section — layout.form-section */
+export declare const FormSectionGrid: typeof FormSectionGridRoot & {
+    Section: typeof FormSection;
+};
+export {};

package/src/layout/form-section/FormSectionGrid.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function FormSectionGridRoot({ className, style, children }) {
+    return (_jsx("div", { className: ['rd-form-section-grid', className].filter(Boolean).join(' '), style: style, "data-testid": "rd-form-section-grid", children: children }));
+}
+function FormSection({ title, fullWidth, columns = 1, className, style, children }) {
+    const sectionClass = ['rd-form-section', fullWidth ? 'rd-form-section--full' : '', className]
+        .filter(Boolean)
+        .join(' ');
+    const bodyClass = ['rd-form-section__body', columns === 2 ? 'rd-form-section__body--2col' : '']
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs("section", { className: sectionClass, style: style, "data-testid": "rd-form-section", children: [_jsx("h3", { className: "rd-form-section__title", children: title }), _jsx("div", { className: bodyClass, children: children })] }));
+}
+/** @rosettadash/react/layout/form-section — layout.form-section */
+export const FormSectionGrid = Object.assign(FormSectionGridRoot, { Section: FormSection });
+//# sourceMappingURL=FormSectionGrid.js.map

package/src/layout/form-section/FormSectionGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormSectionGrid.js","sourceRoot":"","sources":["../../../../../../packages/react/src/layout/form-section/FormSectionGrid.tsx"],"names":[],"mappings":";AAiBA,SAAS,mBAAmB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAwB;IAC/E,OAAO,CACL,cAAK,SAAS,EAAE,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,KAAK,iBAAc,sBAAsB,YAC5H,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAED,SAAS,WAAW,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,GAAG,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAoB;IAClG,MAAM,YAAY,GAAG,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE,EAAE,SAAS,CAAC;SAC1F,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IACb,MAAM,SAAS,GAAG,CAAC,uBAAuB,EAAE,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAC,CAAC,EAAE,CAAC;SAC5F,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,CACL,mBAAS,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,iBAAc,iBAAiB,aAC3E,aAAI,SAAS,EAAC,wBAAwB,YAAE,KAAK,GAAM,EACnD,cAAK,SAAS,EAAE,SAAS,YAAG,QAAQ,GAAO,IACnC,CACX,CAAC;AACJ,CAAC;AAED,mEAAmE;AACnE,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,mBAAmB,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE,CAAC,CAAC"}

package/src/layout/form-section/index.d.ts

@@ -0,0 +1,2 @@
+export type { FormSectionGridProps, FormSectionProps } from './FormSectionGrid.js';
+export { FormSectionGrid } from './FormSectionGrid.js';

package/src/layout/form-section/index.js

@@ -0,0 +1,2 @@
+export { FormSectionGrid } from './FormSectionGrid.js';
+//# sourceMappingURL=index.js.map

package/src/layout/form-section/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../packages/react/src/layout/form-section/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC"}

package/src/layout/geo-explorer/GeoExplorerLayout.d.ts

@@ -0,0 +1,18 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import { type DestinationSelectItem } from '../../visual/destination/destination-select-list/DestinationSelectList.js';
+export type GeoExplorerListPlacement = 'left' | 'right';
+export interface GeoExplorerLayoutProps {
+    title?: string;
+    listTitle?: string;
+    listPlacement?: GeoExplorerListPlacement;
+    listWidth?: string;
+    viewportMinHeight?: string;
+    items: DestinationSelectItem[];
+    selectedId?: string;
+    onSelect?: (id: string) => void;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+}
+/** @rosettadash/react/layout/geo-explorer — map/globe viewport + destination sidebar list */
+export declare const GeoExplorerLayout: import("react").ForwardRefExoticComponent<GeoExplorerLayoutProps & import("react").RefAttributes<HTMLElement>>;

package/src/layout/geo-explorer/GeoExplorerLayout.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { DestinationSelectList, } from '../../visual/destination/destination-select-list/DestinationSelectList.js';
+/** @rosettadash/react/layout/geo-explorer — map/globe viewport + destination sidebar list */
+export const GeoExplorerLayout = forwardRef(function GeoExplorerLayout({ title, listTitle, listPlacement = 'right', listWidth = '14rem', viewportMinHeight = '28rem', items, selectedId, onSelect, className, style, children, }, ref) {
+    const rootClass = ['rd-geo-explorer', className].filter(Boolean).join(' ');
+    const bodyClass = [
+        'rd-geo-explorer__body',
+        listPlacement === 'left' ? 'rd-geo-explorer__body--list-left' : 'rd-geo-explorer__body--list-right',
+    ].join(' ');
+    const layoutStyle = Object.assign(Object.assign({}, style), { '--rd-geo-explorer-list-width': listWidth, '--rd-geo-explorer-min-height': viewportMinHeight });
+    return (_jsxs("section", { ref: ref, className: rootClass, style: layoutStyle, "data-testid": "rd-geo-explorer", children: [title ? _jsx("span", { className: "rd-geo-explorer__title", children: title }) : null, _jsxs("div", { className: bodyClass, children: [_jsx("div", { className: "rd-geo-explorer__viewport", children: children }), _jsx(DestinationSelectList, { className: "rd-geo-explorer__list", title: listTitle, items: items, selectedId: selectedId, onSelect: onSelect })] })] }));
+});
+//# sourceMappingURL=GeoExplorerLayout.js.map

package/src/layout/geo-explorer/GeoExplorerLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GeoExplorerLayout.js","sourceRoot":"","sources":["../../../../../../packages/react/src/layout/geo-explorer/GeoExplorerLayout.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsC,MAAM,OAAO,CAAC;AACvE,OAAO,EACL,qBAAqB,GAEtB,MAAM,2EAA2E,CAAC;AAkBnF,6FAA6F;AAC7F,MAAM,CAAC,MAAM,iBAAiB,GAAG,UAAU,CAAsC,SAAS,iBAAiB,CACzG,EACE,KAAK,EACL,SAAS,EACT,aAAa,GAAG,OAAO,EACvB,SAAS,GAAG,OAAO,EACnB,iBAAiB,GAAG,OAAO,EAC3B,KAAK,EACL,UAAU,EACV,QAAQ,EACR,SAAS,EACT,KAAK,EACL,QAAQ,GACT,EACD,GAAG;IAEH,MAAM,SAAS,GAAG,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC3E,MAAM,SAAS,GAAG;QAChB,uBAAuB;QACvB,aAAa,KAAK,MAAM,CAAC,CAAC,CAAC,kCAAkC,CAAC,CAAC,CAAC,mCAAmC;KACpG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEZ,MAAM,WAAW,GAAG,gCACf,KAAK,KACR,8BAA8B,EAAE,SAAS,EACzC,8BAA8B,EAAE,iBAAiB,GACjC,CAAC;IAEnB,OAAO,CACL,mBAAS,GAAG,EAAE,GAAmC,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,iBAAc,iBAAiB,aACvH,KAAK,CAAC,CAAC,CAAC,eAAM,SAAS,EAAC,wBAAwB,YAAE,KAAK,GAAQ,CAAC,CAAC,CAAC,IAAI,EACvE,eAAK,SAAS,EAAE,SAAS,aACvB,cAAK,SAAS,EAAC,2BAA2B,YAAE,QAAQ,GAAO,EAC3D,KAAC,qBAAqB,IACpB,SAAS,EAAC,uBAAuB,EACjC,KAAK,EAAE,SAAS,EAChB,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,GAClB,IACE,IACE,CACX,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/src/layout/geo-explorer/index.d.ts

@@ -0,0 +1,2 @@
+export type { GeoExplorerLayoutProps, GeoExplorerListPlacement, } from './GeoExplorerLayout.js';
+export { GeoExplorerLayout } from './GeoExplorerLayout.js';

package/src/layout/geo-explorer/index.js

@@ -0,0 +1,2 @@
+export { GeoExplorerLayout } from './GeoExplorerLayout.js';
+//# sourceMappingURL=index.js.map

package/src/layout/geo-explorer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../packages/react/src/layout/geo-explorer/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC"}

package/src/layout/scroll-region/ScrollRegion.d.ts

@@ -0,0 +1,13 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface ScrollRegionProps {
+    title?: string;
+    /** When set, constrains height and enables vertical scroll when content overflows. */
+    maxHeight?: string;
+    /** Show scrollbar only while scrolling / when overflow exists (default true). */
+    overlayScrollbar?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+}
+/** @rosettadash/react/layout/scroll-region — designated scroll container for long-form content */
+export declare const ScrollRegion: import("react").ForwardRefExoticComponent<ScrollRegionProps & import("react").RefAttributes<HTMLElement>>;

package/src/layout/scroll-region/ScrollRegion.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+/** @rosettadash/react/layout/scroll-region — designated scroll container for long-form content */
+export const ScrollRegion = forwardRef(function ScrollRegion({ title, maxHeight, overlayScrollbar = true, className, style, children }, ref) {
+    const rootClass = [
+        'rd-scroll-region',
+        overlayScrollbar ? 'rd-scroll-region--overlay-scrollbar' : '',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const regionStyle = Object.assign(Object.assign({}, style), (maxHeight ? { maxHeight } : {}));
+    return (_jsxs("section", { ref: ref, className: rootClass, style: regionStyle, "data-testid": "rd-scroll-region", "aria-label": title !== null && title !== void 0 ? title : 'Scrollable content', children: [title ? _jsx("header", { className: "rd-scroll-region__header", children: title }) : null, _jsx("div", { className: "rd-scroll-region__body", children: children })] }));
+});
+//# sourceMappingURL=ScrollRegion.js.map

package/src/layout/scroll-region/ScrollRegion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollRegion.js","sourceRoot":"","sources":["../../../../../../packages/react/src/layout/scroll-region/ScrollRegion.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsC,MAAM,OAAO,CAAC;AAavE,kGAAkG;AAClG,MAAM,CAAC,MAAM,YAAY,GAAG,UAAU,CAAiC,SAAS,YAAY,CAC1F,EAAE,KAAK,EAAE,SAAS,EAAE,gBAAgB,GAAG,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,EACzE,GAAG;IAEH,MAAM,SAAS,GAAG;QAChB,kBAAkB;QAClB,gBAAgB,CAAC,CAAC,CAAC,qCAAqC,CAAC,CAAC,CAAC,EAAE;QAC7D,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,MAAM,WAAW,mCACZ,KAAK,GACL,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CACpC,CAAC;IAEF,OAAO,CACL,mBACE,GAAG,EAAE,GAAmC,EACxC,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,WAAW,iBACN,kBAAkB,gBAClB,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,oBAAoB,aAExC,KAAK,CAAC,CAAC,CAAC,iBAAQ,SAAS,EAAC,0BAA0B,YAAE,KAAK,GAAU,CAAC,CAAC,CAAC,IAAI,EAC7E,cAAK,SAAS,EAAC,wBAAwB,YAAE,QAAQ,GAAO,IAChD,CACX,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/src/layout/scroll-region/index.d.ts

@@ -0,0 +1,2 @@
+export type { ScrollRegionProps } from './ScrollRegion.js';
+export { ScrollRegion } from './ScrollRegion.js';

package/src/layout/scroll-region/index.js

@@ -0,0 +1,2 @@
+export { ScrollRegion } from './ScrollRegion.js';
+//# sourceMappingURL=index.js.map

package/src/layout/scroll-region/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../packages/react/src/layout/scroll-region/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC"}

package/src/layout/tabs/TabsLayout.d.ts

@@ -8,6 +8,7 @@ export interface TabsLayoutProps {
     tabs?: TabsLayoutTab[];
     activeTabId?: string;
     onTabChange?: (tabId: string) => void;
+    panelMinHeight?: string;
     className?: string;
     style?: CSSProperties;
     children?: ReactNode;

package/src/layout/tabs/TabsLayout.js

@@ -3,8 +3,13 @@ import { forwardRef } from 'react';
 /** @rosettadash/react/layout/tabs — layout.tabs */
 export const TabsLayout = forwardRef(function TabsLayout(props, ref) {
     var _a;
-    const { className, style, children } = props;
+    const { className, style, children, panelMinHeight } = props;
     const rootClass = ['rd-tabs', className].filter(Boolean).join(' ');
-    return (_jsxs("section", { ref: ref, className: rootClass, style: style, "data-testid": "rd-tabs", children: [props.title ? _jsx("span", { className: "rd-tabs__title", children: props.title }) : null, _jsx("div", { className: "rd-tabs__tabs", role: "tablist", children: ((_a = props.tabs) !== null && _a !== void 0 ? _a : []).map((tab) => (_jsx("button", { type: "button", role: "tab", className: ['rd-tabs__tab', props.activeTabId === tab.id ? 'rd-tabs__tab--active' : ''].filter(Boolean).join(' '), onClick: () => { var _a; return (_a = props.onTabChange) === null || _a === void 0 ? void 0 : _a.call(props, tab.id); }, children: tab.label }, tab.id))) }), _jsx("div", { className: "rd-tabs__panel", children: children })] }));
+    const panelStyle = panelMinHeight
+        ? { '--rd-tabs-panel-min-height': panelMinHeight }
+        : undefined;
+    return (_jsxs("section", { ref: ref, className: rootClass, style: style, "data-testid": "rd-tabs", children: [props.title ? _jsx("span", { className: "rd-tabs__title", children: props.title }) : null, _jsx("div", { className: "rd-tabs__tabs", role: "tablist", children: ((_a = props.tabs) !== null && _a !== void 0 ? _a : []).map((tab) => (_jsx("button", { type: "button", role: "tab", className: ['rd-tabs__tab', props.activeTabId === tab.id ? 'rd-tabs__tab--active' : '']
+                        .filter(Boolean)
+                        .join(' '), onClick: () => { var _a; return (_a = props.onTabChange) === null || _a === void 0 ? void 0 : _a.call(props, tab.id); }, children: tab.label }, tab.id))) }), _jsx("div", { className: "rd-tabs__panel", style: panelStyle, children: children })] }));
 });
 //# sourceMappingURL=TabsLayout.js.map

package/src/layout/tabs/TabsLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsLayout.js","sourceRoot":"","sources":["../../../../../../packages/react/src/layout/tabs/TabsLayout.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsC,MAAM,OAAO,CAAC;AAiBvE,mDAAmD;AACnD,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAA+B,SAAS,UAAU,CACpF,KAAK,EACL,GAAG;;IAEH,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC7C,MAAM,SAAS,GAAG,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEnE,OAAO,CACL,mBAAS,GAAG,EAAE,GAAmC,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,iBAAc,SAAS,aACzG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,eAAM,SAAS,EAAC,gBAAgB,YAAE,KAAK,CAAC,KAAK,GAAQ,CAAC,CAAC,CAAC,IAAI,EAC3E,cAAK,SAAS,EAAC,eAAe,EAAC,IAAI,EAAC,SAAS,YAC1C,CAAC,MAAA,KAAK,CAAC,IAAI,mCAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAC/B,iBAAqB,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAE,CAAC,cAAc,EAAE,KAAK,CAAC,WAAW,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,WAAC,OAAA,MAAA,KAAK,CAAC,WAAW,sDAAG,GAAG,CAAC,EAAE,CAAC,CAAA,EAAA,YAAG,GAAG,CAAC,KAAK,IAA1M,GAAG,CAAC,EAAE,CAA8M,CAClO,CAAC,GACE,EACN,cAAK,SAAS,EAAC,gBAAgB,YAAE,QAAQ,GAAO,IACxC,CACX,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"TabsLayout.js","sourceRoot":"","sources":["../../../../../../packages/react/src/layout/tabs/TabsLayout.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsC,MAAM,OAAO,CAAC;AAkBvE,mDAAmD;AACnD,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAA+B,SAAS,UAAU,CACpF,KAAK,EACL,GAAG;;IAEH,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAC7D,MAAM,SAAS,GAAG,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACnE,MAAM,UAAU,GAAG,cAAc;QAC/B,CAAC,CAAE,EAAE,4BAA4B,EAAE,cAAc,EAAoB;QACrE,CAAC,CAAC,SAAS,CAAC;IAEd,OAAO,CACL,mBAAS,GAAG,EAAE,GAAmC,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,iBAAc,SAAS,aACzG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,eAAM,SAAS,EAAC,gBAAgB,YAAE,KAAK,CAAC,KAAK,GAAQ,CAAC,CAAC,CAAC,IAAI,EAC3E,cAAK,SAAS,EAAC,eAAe,EAAC,IAAI,EAAC,SAAS,YAC1C,CAAC,MAAA,KAAK,CAAC,IAAI,mCAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAC/B,iBAEE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,KAAK,EACV,SAAS,EAAE,CAAC,cAAc,EAAE,KAAK,CAAC,WAAW,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,CAAC;yBACpF,MAAM,CAAC,OAAO,CAAC;yBACf,IAAI,CAAC,GAAG,CAAC,EACZ,OAAO,EAAE,GAAG,EAAE,WAAC,OAAA,MAAA,KAAK,CAAC,WAAW,sDAAG,GAAG,CAAC,EAAE,CAAC,CAAA,EAAA,YAEzC,GAAG,CAAC,KAAK,IARL,GAAG,CAAC,EAAE,CASJ,CACV,CAAC,GACE,EACN,cAAK,SAAS,EAAC,gBAAgB,EAAC,KAAK,EAAE,UAAU,YAC9C,QAAQ,GACL,IACE,CACX,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/src/lib/custom-element-host.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useRef, } from 'react';
 import { mergeRef } from './merge-ref.js';
 function toKebab(name) {
     return name.replace(/[A-Z]/g, (ch) => `-${ch.toLowerCase()}`);
@@ -43,7 +43,7 @@ export function useCustomElementHost(options, values, handlers = {}, forwardedRe
         registerRef.current();
     }, []);
     const propertyKeys = (_c = options.properties) !== null && _c !== void 0 ? _c : [];
-    useEffect(() => {
+    useLayoutEffect(() => {
         const el = host.current;
         if (!el) {
             return;

package/src/lib/custom-element-host.js.map

@@ -1 +1 @@
-{"version":3,"file":"custom-element-host.js","sourceRoot":"","sources":["../../../../../packages/react/src/lib/custom-element-host.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"custom-element-host.js","sourceRoot":"","sources":["../../../../../packages/react/src/lib/custom-element-host.ts"],"names":[],"mappings":"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"}

package/src/visual/chart/bar/BarChart.d.ts

@@ -1,6 +1,13 @@
 import { type CSSProperties, type ReactNode } from 'react';
+export interface BarChartBar {
+    label: string;
+    value: number;
+}
 export interface BarChartProps {
     title?: string;
+    bars?: BarChartBar[];
+    yAxisLabel?: string;
+    valueFormat?: (value: number) => string;
     className?: string;
     style?: CSSProperties;
     children?: ReactNode;

package/src/visual/chart/bar/BarChart.js

@@ -1,10 +1,40 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
+const FALLBACK_BARS = [
+    { label: 'A', value: 40 },
+    { label: 'B', value: 65 },
+    { label: 'C', value: 55 },
+    { label: 'D', value: 80 },
+    { label: 'E', value: 48 },
+];
+function defaultFormat(value) {
+    if (value >= 1000000) {
+        return `${(value / 1000000).toFixed(1)}M`;
+    }
+    if (value >= 1000) {
+        return `${(value / 1000).toFixed(0)}K`;
+    }
+    return String(Math.round(value));
+}
+function buildTicks(max, count = 4) {
+    if (max <= 0) {
+        return [0];
+    }
+    const step = max / (count - 1);
+    return Array.from({ length: count }, (_, index) => step * index);
+}
 /** @rosettadash/react/visual/chart/bar — visual.chart.bar */
 export const BarChart = forwardRef(function BarChart(props, ref) {
-    var _a;
+    var _a, _b, _c, _d;
     const { className, style, children } = props;
     const rootClass = ['rd-chart-bar', className].filter(Boolean).join(' ');
-    return (_jsxs("section", { ref: ref, className: rootClass, style: style, "data-testid": "rd-chart-bar", children: [_jsx("header", { className: "rd-chart-bar__header", children: _jsx("span", { children: (_a = props.title) !== null && _a !== void 0 ? _a : 'Bar chart' }) }), _jsx("div", { className: "rd-chart-bar__bars", "aria-hidden": "true", children: [40, 65, 55, 80, 48].map((h, i) => (_jsx("div", { className: "rd-chart-bar__bar-wrap", children: _jsx("div", { className: "rd-chart-bar__bar", style: { height: `${h}%` } }) }, i))) }), children] }));
+    const bars = ((_a = props.bars) === null || _a === void 0 ? void 0 : _a.length) ? props.bars : FALLBACK_BARS;
+    const format = (_b = props.valueFormat) !== null && _b !== void 0 ? _b : defaultFormat;
+    const maxValue = Math.max(...bars.map((bar) => bar.value), 1);
+    const ticks = buildTicks(maxValue);
+    return (_jsxs("section", { ref: ref, className: rootClass, style: style, "data-testid": "rd-chart-bar", role: "img", "aria-label": (_c = props.title) !== null && _c !== void 0 ? _c : 'Bar chart', children: [_jsx("header", { className: "rd-chart-bar__header", children: _jsx("span", { children: (_d = props.title) !== null && _d !== void 0 ? _d : 'Bar chart' }) }), _jsxs("div", { className: "rd-chart-bar__body", children: [_jsxs("div", { className: "rd-chart-bar__y-axis", "aria-hidden": "true", children: [_jsx("div", { className: "rd-chart-bar__y-ticks", children: [...ticks].reverse().map((tick) => (_jsx("span", { className: "rd-chart-bar__y-tick", children: format(tick) }, tick))) }), props.yAxisLabel ? (_jsx("span", { className: "rd-chart-bar__y-label", children: props.yAxisLabel })) : null] }), _jsxs("div", { className: "rd-chart-bar__plot", children: [_jsx("div", { className: "rd-chart-bar__grid-lines", "aria-hidden": "true", children: ticks.map((tick) => (_jsx("span", { className: "rd-chart-bar__grid-line", style: { bottom: `${(tick / maxValue) * 100}%` } }, tick))) }), _jsx("div", { className: "rd-chart-bar__bars", children: bars.map((bar) => {
+                                    const heightPct = (bar.value / maxValue) * 100;
+                                    return (_jsxs("div", { className: "rd-chart-bar__bar-group", children: [_jsx("div", { className: "rd-chart-bar__bar-wrap", children: _jsx("div", { className: "rd-chart-bar__bar", style: { height: `${heightPct}%` }, title: `${bar.label}: ${format(bar.value)}` }) }), _jsx("span", { className: "rd-chart-bar__x-label", children: bar.label }), _jsx("span", { className: "rd-chart-bar__value", children: format(bar.value) })] }, bar.label));
+                                }) })] })] }), children] }));
 });
 //# sourceMappingURL=BarChart.js.map

package/src/visual/chart/bar/BarChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"BarChart.js","sourceRoot":"","sources":["../../../../../../../packages/react/src/visual/chart/bar/BarChart.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsC,MAAM,OAAO,CAAC;AASvE,6DAA6D;AAC7D,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAA6B,SAAS,QAAQ,CAC9E,KAAK,EACL,GAAG;;IAEH,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC7C,MAAM,SAAS,GAAG,CAAC,cAAc,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAExE,OAAO,CACL,mBAAS,GAAG,EAAE,GAAmC,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,iBAAc,cAAc,aAC/G,iBAAQ,SAAS,EAAC,sBAAsB,YAAC,yBAAO,MAAA,KAAK,CAAC,KAAK,mCAAI,WAAW,GAAQ,GAAS,EAC3F,cAAK,SAAS,EAAC,oBAAoB,iBAAa,MAAM,YACnD,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAClC,cAAa,SAAS,EAAC,wBAAwB,YAAC,cAAK,SAAS,EAAC,mBAAmB,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,CAAC,GAAG,EAAE,GAAI,IAAvG,CAAC,CAA4G,CACxH,CAAC,GACE,EACL,QAAQ,IACD,CACX,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"BarChart.js","sourceRoot":"","sources":["../../../../../../../packages/react/src/visual/chart/bar/BarChart.tsx"],"names":[],"mappings":"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"}

package/src/visual/chart/bar/index.d.ts

@@ -1,2 +1,2 @@
-export type { BarChartProps } from './BarChart.js';
+export type { BarChartProps, BarChartBar } from './BarChart.js';
 export { BarChart } from './BarChart.js';

package/src/visual/chart/line/LineChart.d.ts

@@ -1,6 +1,14 @@
 import { type CSSProperties, type ReactNode } from 'react';
+export interface LineChartPoint {
+    x: string | number;
+    y: number;
+}
 export interface LineChartProps {
     title?: string;
+    points?: LineChartPoint[];
+    xAxisLabel?: string;
+    yAxisLabel?: string;
+    valueFormat?: (value: number) => string;
     className?: string;
     style?: CSSProperties;
     children?: ReactNode;

package/src/visual/chart/line/LineChart.js

@@ -1,10 +1,66 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
+const FALLBACK_POINTS = [
+    { x: '2019', y: 42 },
+    { x: '2020', y: 18 },
+    { x: '2021', y: 12 },
+    { x: '2022', y: 19 },
+    { x: '2023', y: 31 },
+    { x: '2024', y: 36 },
+];
+const CHART_WIDTH = 320;
+const CHART_HEIGHT = 200;
+const PAD_LEFT = 58;
+const PAD_RIGHT = 12;
+const PAD_TOP = 16;
+const PAD_BOTTOM = 36;
+const Y_TICK_X = PAD_LEFT - 6;
+function defaultFormat(value) {
+    if (value >= 1000000) {
+        return `${(value / 1000000).toFixed(1)}M`;
+    }
+    if (value >= 1000) {
+        return `${(value / 1000).toFixed(0)}K`;
+    }
+    return String(Math.round(value));
+}
+function buildTicks(min, max, count = 4) {
+    if (min === max) {
+        return [min];
+    }
+    const step = (max - min) / (count - 1);
+    return Array.from({ length: count }, (_, index) => min + step * index);
+}
+function chartCoords(points, minY, rangeY) {
+    const plotW = CHART_WIDTH - PAD_LEFT - PAD_RIGHT;
+    const plotH = CHART_HEIGHT - PAD_TOP - PAD_BOTTOM;
+    const lastIndex = Math.max(points.length - 1, 1);
+    return points.map((point, index) => {
+        const x = PAD_LEFT + (index / lastIndex) * plotW;
+        const y = PAD_TOP + plotH - ((point.y - minY) / rangeY) * plotH;
+        return { x, y, label: String(point.x) };
+    });
+}
 /** @rosettadash/react/visual/chart/line — visual.chart.line */
 export const LineChart = forwardRef(function LineChart(props, ref) {
-    var _a;
+    var _a, _b, _c, _d;
     const { className, style, children } = props;
     const rootClass = ['rd-chart-line', className].filter(Boolean).join(' ');
-    return (_jsxs("section", { ref: ref, className: rootClass, style: style, "data-testid": "rd-chart-line", children: [_jsx("header", { className: "rd-chart-line__header", children: _jsx("span", { children: (_a = props.title) !== null && _a !== void 0 ? _a : 'Line chart' }) }), _jsx("svg", { viewBox: "0 0 240 96", className: "rd-chart-line__svg", "aria-hidden": "true", children: _jsx("polyline", { className: "rd-chart-line__line", points: "0,80 40,60 80,65 120,40 160,45 200,20 240,30" }) }), children] }));
+    const points = ((_a = props.points) === null || _a === void 0 ? void 0 : _a.length) ? props.points : FALLBACK_POINTS;
+    const format = (_b = props.valueFormat) !== null && _b !== void 0 ? _b : defaultFormat;
+    const values = points.map((point) => point.y);
+    const dataMin = Math.min(...values);
+    const dataMax = Math.max(...values);
+    const minY = dataMin >= 0 ? 0 : dataMin;
+    const maxY = dataMax;
+    const rangeY = maxY - minY || 1;
+    const ticks = buildTicks(minY, maxY);
+    const coords = chartCoords(points, minY, rangeY);
+    const polyline = coords.map(({ x, y }) => `${x},${y}`).join(' ');
+    const plotH = CHART_HEIGHT - PAD_TOP - PAD_BOTTOM;
+    return (_jsxs("section", { ref: ref, className: rootClass, style: style, "data-testid": "rd-chart-line", role: "img", "aria-label": (_c = props.title) !== null && _c !== void 0 ? _c : 'Line chart', children: [_jsx("header", { className: "rd-chart-line__header", children: _jsx("span", { children: (_d = props.title) !== null && _d !== void 0 ? _d : 'Line chart' }) }), _jsx("div", { className: "rd-chart-line__body", children: _jsxs("svg", { viewBox: `0 0 ${CHART_WIDTH} ${CHART_HEIGHT}`, className: "rd-chart-line__svg", "aria-hidden": "true", children: [ticks.map((tick) => {
+                            const y = PAD_TOP + plotH - ((tick - minY) / rangeY) * plotH;
+                            return (_jsxs("g", { className: "rd-chart-line__tick", children: [_jsx("line", { x1: PAD_LEFT, y1: y, x2: CHART_WIDTH - PAD_RIGHT, y2: y, className: "rd-chart-line__grid" }), _jsx("text", { x: Y_TICK_X, y: y + 4, className: "rd-chart-line__tick-label", children: format(tick) })] }, tick));
+                        }), _jsx("polyline", { className: "rd-chart-line__line", points: polyline }), coords.map(({ x, y, label }) => (_jsxs("g", { className: "rd-chart-line__point", children: [_jsx("circle", { cx: x, cy: y, r: 3.5, className: "rd-chart-line__dot" }), _jsx("text", { x: x, y: CHART_HEIGHT - 10, className: "rd-chart-line__x-label", children: label })] }, label))), props.yAxisLabel ? (_jsx("text", { x: 12, y: PAD_TOP + plotH / 2, className: "rd-chart-line__axis-label rd-chart-line__axis-label--y", children: props.yAxisLabel })) : null, props.xAxisLabel ? (_jsx("text", { x: PAD_LEFT + (CHART_WIDTH - PAD_LEFT - PAD_RIGHT) / 2, y: CHART_HEIGHT - 2, className: "rd-chart-line__axis-label rd-chart-line__axis-label--x", children: props.xAxisLabel })) : null] }) }), children] }));
 });
 //# sourceMappingURL=LineChart.js.map

package/src/visual/chart/line/LineChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.js","sourceRoot":"","sources":["../../../../../../../packages/react/src/visual/chart/line/LineChart.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsC,MAAM,OAAO,CAAC;AASvE,+DAA+D;AAC/D,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CAA8B,SAAS,SAAS,CACjF,KAAK,EACL,GAAG;;IAEH,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC7C,MAAM,SAAS,GAAG,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEzE,OAAO,CACL,mBAAS,GAAG,EAAE,GAAmC,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,iBAAc,eAAe,aAChH,iBAAQ,SAAS,EAAC,uBAAuB,YAAC,yBAAO,MAAA,KAAK,CAAC,KAAK,mCAAI,YAAY,GAAQ,GAAS,EAC7F,cAAK,OAAO,EAAC,YAAY,EAAC,SAAS,EAAC,oBAAoB,iBAAa,MAAM,YACzE,mBAAU,SAAS,EAAC,qBAAqB,EAAC,MAAM,EAAC,8CAA8C,GAAG,GAC9F,EACL,QAAQ,IACD,CACX,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"LineChart.js","sourceRoot":"","sources":["../../../../../../../packages/react/src/visual/chart/line/LineChart.tsx"],"names":[],"mappings":"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"}

package/src/visual/chart/line/index.d.ts

@@ -1,2 +1,2 @@
-export type { LineChartProps } from './LineChart.js';
+export type { LineChartProps, LineChartPoint } from './LineChart.js';
 export { LineChart } from './LineChart.js';

package/src/visual/chart/sankey/JourneySankeyChart.d.ts

@@ -0,0 +1,20 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface SankeyNode {
+    id: string;
+    label: string;
+}
+export interface SankeyLink {
+    source: string;
+    target: string;
+    value: number;
+}
+export interface JourneySankeyChartProps {
+    title?: string;
+    nodes?: SankeyNode[];
+    links?: SankeyLink[];
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+}
+/** @rosettadash/react/visual/chart/sankey — SVG journey / flow sankey chart */
+export declare const JourneySankeyChart: import("react").ForwardRefExoticComponent<JourneySankeyChartProps & import("react").RefAttributes<HTMLElement>>;

package/src/visual/chart/sankey/JourneySankeyChart.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo } from 'react';
+const FALLBACK_NODES = [
+    { id: 'a', label: 'Start' },
+    { id: 'b', label: 'Middle' },
+    { id: 'c', label: 'End' },
+];
+const FALLBACK_LINKS = [
+    { source: 'a', target: 'b', value: 40 },
+    { source: 'b', target: 'c', value: 40 },
+];
+const WIDTH = 640;
+const HEIGHT = 280;
+const PADDING = 16;
+const NODE_WIDTH = 12;
+function buildLayout(nodes, links) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const columns = new Map();
+    const incoming = new Set(links.map((link) => link.target));
+    const roots = nodes.filter((node) => !incoming.has(node.id));
+    const queue = roots.length ? roots.map((node) => node.id) : [(_a = nodes[0]) === null || _a === void 0 ? void 0 : _a.id].filter(Boolean);
+    for (const id of queue) {
+        columns.set(id, 0);
+    }
+    let guard = 0;
+    while (guard < nodes.length * 2) {
+        guard += 1;
+        let progressed = false;
+        for (const link of links) {
+            const sourceCol = columns.get(link.source);
+            if (sourceCol === undefined) {
+                continue;
+            }
+            const nextCol = sourceCol + 1;
+            const existing = columns.get(link.target);
+            if (existing === undefined || nextCol > existing) {
+                columns.set(link.target, nextCol);
+                progressed = true;
+            }
+        }
+        if (!progressed) {
+            break;
+        }
+    }
+    for (const node of nodes) {
+        if (!columns.has(node.id)) {
+            columns.set(node.id, 0);
+        }
+    }
+    const maxColumn = Math.max(...columns.values(), 0);
+    const byColumn = new Map();
+    for (const node of nodes) {
+        const column = (_b = columns.get(node.id)) !== null && _b !== void 0 ? _b : 0;
+        const list = (_c = byColumn.get(column)) !== null && _c !== void 0 ? _c : [];
+        list.push(node);
+        byColumn.set(column, list);
+    }
+    const outTotals = new Map();
+    const inTotals = new Map();
+    for (const link of links) {
+        outTotals.set(link.source, ((_d = outTotals.get(link.source)) !== null && _d !== void 0 ? _d : 0) + link.value);
+        inTotals.set(link.target, ((_e = inTotals.get(link.target)) !== null && _e !== void 0 ? _e : 0) + link.value);
+    }
+    const layoutNodes = [];
+    for (const [column, columnNodes] of byColumn.entries()) {
+        const totalValue = columnNodes.reduce((sum, node) => { var _a, _b; return sum + Math.max((_a = outTotals.get(node.id)) !== null && _a !== void 0 ? _a : 0, (_b = inTotals.get(node.id)) !== null && _b !== void 0 ? _b : 0, 1); }, 0);
+        let yCursor = PADDING;
+        for (const node of columnNodes) {
+            const nodeValue = Math.max((_f = outTotals.get(node.id)) !== null && _f !== void 0 ? _f : 0, (_g = inTotals.get(node.id)) !== null && _g !== void 0 ? _g : 0, 1);
+            const height = Math.max(((HEIGHT - PADDING * 2) * nodeValue) / totalValue, 18);
+            layoutNodes.push(Object.assign(Object.assign({}, node), { column, y: yCursor, height }));
+            yCursor += height + 10;
+        }
+    }
+    const nodeMap = new Map(layoutNodes.map((node) => [node.id, node]));
+    const xForColumn = (column) => PADDING + (column / Math.max(maxColumn, 1)) * (WIDTH - PADDING * 2 - NODE_WIDTH);
+    const paths = [];
+    for (const link of links) {
+        const source = nodeMap.get(link.source);
+        const target = nodeMap.get(link.target);
+        if (!source || !target) {
+            continue;
+        }
+        const sourceTotal = (_h = outTotals.get(link.source)) !== null && _h !== void 0 ? _h : link.value;
+        const linkHeight = Math.max((source.height * link.value) / sourceTotal, 4);
+        const x1 = xForColumn(source.column) + NODE_WIDTH;
+        const x2 = xForColumn(target.column);
+        const y1 = source.y + source.height / 2 - linkHeight / 2;
+        const y2 = target.y + target.height / 2 - linkHeight / 2;
+        const midX = (x1 + x2) / 2;
+        paths.push(`M ${x1} ${y1} C ${midX} ${y1}, ${midX} ${y2}, ${x2} ${y2} L ${x2} ${y2 + linkHeight} C ${midX} ${y2 + linkHeight}, ${midX} ${y1 + linkHeight}, ${x1} ${y1 + linkHeight} Z`);
+    }
+    return { layoutNodes, paths };
+}
+/** @rosettadash/react/visual/chart/sankey — SVG journey / flow sankey chart */
+export const JourneySankeyChart = forwardRef(function JourneySankeyChart({ title, nodes, links, className, style, children }, ref) {
+    const rootClass = ['rd-chart-sankey', className].filter(Boolean).join(' ');
+    const chartNodes = (nodes === null || nodes === void 0 ? void 0 : nodes.length) ? nodes : FALLBACK_NODES;
+    const chartLinks = (links === null || links === void 0 ? void 0 : links.length) ? links : FALLBACK_LINKS;
+    const { layoutNodes, paths } = useMemo(() => buildLayout(chartNodes, chartLinks), [chartNodes, chartLinks]);
+    const maxColumn = Math.max(...layoutNodes.map((node) => node.column), 0);
+    const xForColumn = (column) => PADDING + (column / Math.max(maxColumn, 1)) * (WIDTH - PADDING * 2 - NODE_WIDTH);
+    return (_jsxs("section", { ref: ref, className: rootClass, style: style, "data-testid": "rd-chart-sankey", role: "img", "aria-label": title !== null && title !== void 0 ? title : 'Journey sankey chart', children: [_jsx("header", { className: "rd-chart-sankey__header", children: _jsx("span", { children: title !== null && title !== void 0 ? title : 'Journey flow' }) }), _jsx("div", { className: "rd-chart-sankey__body", children: _jsxs("svg", { viewBox: `0 0 ${WIDTH} ${HEIGHT}`, className: "rd-chart-sankey__svg", "aria-hidden": "true", children: [paths.map((path, index) => (_jsx("path", { d: path, className: "rd-chart-sankey__link" }, index))), layoutNodes.map((node) => (_jsxs("g", { children: [_jsx("rect", { x: xForColumn(node.column), y: node.y, width: NODE_WIDTH, height: node.height, className: "rd-chart-sankey__node", rx: 2 }), _jsx("text", { x: xForColumn(node.column) + (node.column === maxColumn ? NODE_WIDTH + 6 : -6), y: node.y + node.height / 2, className: "rd-chart-sankey__label", textAnchor: node.column === maxColumn ? 'start' : 'end', dominantBaseline: "middle", children: node.label })] }, node.id)))] }) }), children] }));
+});
+//# sourceMappingURL=JourneySankeyChart.js.map