@santi020k/lumen-react 3.0.0 → 4.0.0

package/dist/image-comparison.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { type LumenImageComparisonMode } from '@santi020k/lumen-core/image-comparison';
+export interface ImageComparisonProps extends ComponentPropsWithoutRef<'figure'> {
+    after: ReactNode;
+    afterLabel?: string;
+    before: ReactNode;
+    beforeLabel?: string;
+    defaultValue?: number;
+    disabled?: boolean;
+    fit?: 'contain' | 'cover';
+    label: string;
+    locale?: string;
+    mode?: LumenImageComparisonMode;
+    name?: string;
+    onValueChange?: (value: number) => void;
+    ratio?: number;
+    value?: number;
+}
+export declare const ImageComparison: ({ after, afterLabel, before, beforeLabel, children, className, defaultValue, disabled, fit, label, locale, name, mode: requestedMode, onValueChange, ratio, value, ...props }: ImageComparisonProps) => import("react").JSX.Element;
+//# sourceMappingURL=image-comparison.d.ts.map

package/dist/image-comparison.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-comparison.d.ts","sourceRoot":"","sources":["../src/image-comparison.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,wBAAwB,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAG/E,OAAO,EAEL,KAAK,wBAAwB,EAI9B,MAAM,wCAAwC,CAAA;AAG/C,MAAM,WAAW,oBAAqB,SAAQ,wBAAwB,CAAC,QAAQ,CAAC;IAC9E,KAAK,EAAE,SAAS,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,MAAM,EAAE,SAAS,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,GAAG,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,wBAAwB,CAAA;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAOD,eAAO,MAAM,eAAe,GAAI,+KAI7B,oBAAoB,gCA8FtB,CAAA"}

package/dist/image-comparison.js

@@ -0,0 +1,55 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { formatLumenImageComparisonValue, normalizeLumenImageComparisonMode, normalizeLumenImageComparisonRatio, normalizeLumenImageComparisonValue } from '@santi020k/lumen-core/image-comparison';
+import { composeClassName } from '@santi020k/lumen-core/tokens';
+export const ImageComparison = ({ after, afterLabel = 'After', before, beforeLabel = 'Before', children, className, defaultValue = 50, disabled = false, fit = 'cover', label, locale, name, mode: requestedMode = 'reveal', onValueChange, ratio = 16 / 9, value, ...props }) => {
+    const [internalValue, setInternalValue] = useState(() => normalizeLumenImageComparisonValue(defaultValue));
+    const mode = normalizeLumenImageComparisonMode(requestedMode);
+    const inputRef = useRef(null);
+    const position = normalizeLumenImageComparisonValue(value ?? internalValue);
+    useEffect(() => {
+        const input = inputRef.current;
+        if (!input)
+            return;
+        const pendingResets = new Set();
+        let pendingReset;
+        const reset = (event) => {
+            if (event.target !== input.form)
+                return;
+            pendingResets.add(event);
+            if (pendingReset !== undefined)
+                return;
+            pendingReset = window.setTimeout(() => {
+                pendingReset = undefined;
+                const shouldReset = [...pendingResets].some(resetEvent => !resetEvent.defaultPrevented);
+                pendingResets.clear();
+                if (!shouldReset || !input.isConnected)
+                    return;
+                const next = normalizeLumenImageComparisonValue(value ?? defaultValue);
+                input.value = String(next);
+                if (value === undefined)
+                    setInternalValue(next);
+            });
+        };
+        input.ownerDocument.addEventListener('reset', reset, true);
+        return () => {
+            if (pendingReset !== undefined)
+                window.clearTimeout(pendingReset);
+            pendingResets.clear();
+            input.ownerDocument.removeEventListener('reset', reset, true);
+        };
+    }, [defaultValue, value]);
+    const frameStyle = {
+        '--ui-image-comparison-position': `${position}%`,
+        '--ui-image-comparison-ratio': normalizeLumenImageComparisonRatio(ratio)
+    };
+    return (_jsxs("figure", { ...props, className: composeClassName('ui-image-comparison', className), "data-fit": fit, "data-mode": mode, children: [_jsxs("div", { className: "ui-image-comparison__frame", style: frameStyle, children: [_jsx("div", { className: "ui-image-comparison__before", hidden: mode === 'after', children: before }), _jsx("div", { className: "ui-image-comparison__after", hidden: mode === 'before', children: after }), _jsx("div", { "aria-hidden": "true", className: "ui-image-comparison__divider" })] }), _jsxs("div", { "aria-hidden": "true", className: "ui-image-comparison__labels", children: [_jsx("span", { hidden: mode === 'after', children: beforeLabel }), _jsx("span", { hidden: mode === 'before', children: afterLabel })] }), _jsxs("figcaption", { className: "ui-image-comparison__caption", children: [_jsxs("label", { className: "ui-image-comparison__control", hidden: mode !== 'reveal', children: [_jsx("span", { children: label }), _jsx("input", { ref: inputRef, "aria-valuetext": formatLumenImageComparisonValue(position, afterLabel, locale), className: "ui-slider ui-image-comparison__range", disabled: disabled || mode !== 'reveal', max: 100, min: 0, name: name, onChange: event => {
+                                    if (disabled || mode !== 'reveal')
+                                        return;
+                                    const next = normalizeLumenImageComparisonValue(event.currentTarget.valueAsNumber);
+                                    if (value === undefined)
+                                        setInternalValue(next);
+                                    onValueChange?.(next);
+                                }, step: 1, type: "range", value: position })] }), children] })] }));
+};

package/dist/index.d.ts

@@ -1,4 +1,28 @@
+export * from './ai-surfaces.js';
+export * from './amount-field.js';
+export * from './attachments.js';
+export * from './bullet-chart.js';
+export { ChangeSummary, type ChangeSummaryProps } from './change-summary.js';
+export { type ChartInteractionProps } from './chart-interaction.js';
+export { type ComparisonChartProps, DumbbellChart, LollipopChart } from './comparison-chart.js';
 export * from './components.js';
+export * from './dashboard.js';
+export * from './data-table.js';
+export * from './data-table-saved-views.js';
+export { parseDataTableViewState } from './data-table-state.js';
+export * from './data-table-view.js';
+export * from './date-range-calendar.js';
+export * from './date-range-input.js';
+export { DeviceFrame, type DeviceFrameProps } from './device-frame.js';
+export * from './expanded-charts.js';
+export * from './form-workflow.js';
 export * from './hooks.js';
-export { type LumenComponentName, lumenComponentNames, type LumenTabsChangeDetail, type LumenTabsChangeEvent } from '@santi020k/lumen-core';
+export * from './image-comparison.js';
+export * from './interval-charts.js';
+export * from './media-selection.js';
+export * from './media-viewport.js';
+export { ToastProvider } from './toast-provider.js';
+export * from './visual-interactions.js';
+export * from './world-map.js';
+export { type LumenChartDatumActivationDetail, type LumenComponentName, lumenComponentNames, type LumenTabsChangeDetail, type LumenTabsChangeEvent } from '@santi020k/lumen-core';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,YAAY,CAAA;AAC1B,OAAO,EACL,KAAK,kBAAkB,EACvB,mBAAmB,EACnB,KAAK,qBAAqB,EAC1B,KAAK,oBAAoB,EAC1B,MAAM,uBAAuB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,cAAc,kBAAkB,CAAA;AAChC,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,mBAAmB,CAAA;AACjC,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AAC5E,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,wBAAwB,CAAA;AACnE,OAAO,EAAE,KAAK,oBAAoB,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAC/F,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,6BAA6B,CAAA;AAC3C,OAAO,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAA;AAC/D,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AACtE,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AACnD,cAAc,0BAA0B,CAAA;AACxC,cAAc,gBAAgB,CAAA;AAC9B,OAAO,EACL,KAAK,+BAA+B,EACpC,KAAK,kBAAkB,EACvB,mBAAmB,EACnB,KAAK,qBAAqB,EAC1B,KAAK,oBAAoB,EAC1B,MAAM,uBAAuB,CAAA"}

package/dist/index.js

@@ -1,4 +1,28 @@
 'use client';
+export * from './ai-surfaces.js';
+export * from './amount-field.js';
+export * from './attachments.js';
+export * from './bullet-chart.js';
+export { ChangeSummary } from './change-summary.js';
+export {} from './chart-interaction.js';
+export { DumbbellChart, LollipopChart } from './comparison-chart.js';
 export * from './components.js';
+export * from './dashboard.js';
+export * from './data-table.js';
+export * from './data-table-saved-views.js';
+export { parseDataTableViewState } from './data-table-state.js';
+export * from './data-table-view.js';
+export * from './date-range-calendar.js';
+export * from './date-range-input.js';
+export { DeviceFrame } from './device-frame.js';
+export * from './expanded-charts.js';
+export * from './form-workflow.js';
 export * from './hooks.js';
+export * from './image-comparison.js';
+export * from './interval-charts.js';
+export * from './media-selection.js';
+export * from './media-viewport.js';
+export { ToastProvider } from './toast-provider.js';
+export * from './visual-interactions.js';
+export * from './world-map.js';
 export { lumenComponentNames } from '@santi020k/lumen-core';

package/dist/interval-charts.d.ts

@@ -0,0 +1,21 @@
+import { type LumenChartLabels, type LumenChartTone, type LumenHistogramBin, type LumenWaterfallDatum } from '@santi020k/lumen-core';
+import { type ChartProps } from './components.js';
+interface IntervalChartProps extends Omit<ChartProps, 'children'> {
+    formatValue?: (value: number) => string;
+    labels?: Partial<LumenChartLabels>;
+    showTable?: boolean;
+    valueLabel?: string;
+}
+export interface WaterfallChartProps extends IntervalChartProps {
+    data?: readonly LumenWaterfallDatum[];
+}
+export declare const WaterfallChart: ({ className, data, formatValue, ...props }: WaterfallChartProps) => import("react").JSX.Element;
+export interface HistogramProps extends IntervalChartProps {
+    bins?: readonly LumenHistogramBin[];
+    formatBoundary?: (value: number) => string;
+    frequency?: 'count' | 'density';
+    tone?: LumenChartTone;
+}
+export declare const Histogram: ({ bins, className, formatBoundary, formatValue, frequency, labels, tone, valueLabel, ...props }: HistogramProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=interval-charts.d.ts.map

package/dist/interval-charts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interval-charts.d.ts","sourceRoot":"","sources":["../src/interval-charts.tsx"],"names":[],"mappings":"AAIA,OAAO,EAML,KAAK,gBAAgB,EACrB,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACtB,KAAK,mBAAmB,EAEzB,MAAM,uBAAuB,CAAA;AAG9B,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAExD,UAAU,kBAAmB,SAAQ,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC;IAC/D,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IACvC,MAAM,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAA;IAClC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAqHD,MAAM,WAAW,mBAAoB,SAAQ,kBAAkB;IAC7D,IAAI,CAAC,EAAE,SAAS,mBAAmB,EAAE,CAAA;CACtC;AAED,eAAO,MAAM,cAAc,GAAI,4CAA0E,mBAAmB,gCAAiN,CAAA;AAE7U,MAAM,WAAW,cAAe,SAAQ,kBAAkB;IACxD,IAAI,CAAC,EAAE,SAAS,iBAAiB,EAAE,CAAA;IACnC,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IAC1C,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC/B,IAAI,CAAC,EAAE,cAAc,CAAA;CACtB;AAED,eAAO,MAAM,SAAS,GAAI,iGAA+J,cAAc,gCAAyX,CAAA"}

package/dist/interval-charts.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { composeClassName, createLumenHistogramGeometry, createLumenWaterfallGeometry, formatLumenChartSummary, getLumenChartToneClassName, resolveLumenChartLabels } from '@santi020k/lumen-core';
+import { getChartPlotLabel } from './chart-label.js';
+import { Chart } from './components.js';
+const isDensityModel = (model) => 'bins' in model && model.frequency === 'density';
+const intervalRows = (model, formatValue, formatBoundary) => model.marks.map((mark, index) => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: mark.label }), _jsx("td", { children: formatBoundary(mark.start) }), _jsx("td", { children: formatBoundary(mark.end) }), _jsx("td", { children: formatValue(mark.value) }), isDensityModel(model) && _jsx("td", { children: model.bins[index]?.count })] }, mark.key)));
+const intervalSummary = (valid, summary, factual, invalid) => summary ?? (valid ? factual : invalid);
+const intervalValueLabel = (label, fallback) => label ?? fallback;
+const IntervalPlot = ({ formatBoundary, formatValue = String, labels, model, showTable = true, summary, valueLabel, ...props }) => {
+    const text = resolveLumenChartLabels(labels);
+    const label = intervalValueLabel(valueLabel, text.value);
+    const data = model.marks.map(mark => ({ x: mark.key, xLabel: mark.label, y: mark.value }));
+    const factualSummary = formatLumenChartSummary([{ id: 'values', label, data }], formatValue, text);
+    const hasData = model.marks.length > 0;
+    const rows = intervalRows(model, formatValue, formatBoundary);
+    return (_jsxs(Chart, { ...props, summary: intervalSummary(model.valid, summary, factualSummary, text.invalidData), children: [!hasData && _jsx("p", { className: "ui-chart__empty", role: "status", children: model.valid ? text.empty : text.invalidData }), hasData && (_jsxs(_Fragment, { children: [_jsx("p", { className: "ui-chart__axis-title", children: label }), _jsx("div", { className: "ui-chart__plot", role: "region", tabIndex: 0, "aria-label": getChartPlotLabel(props['aria-label'], props.heading, text.chartData), children: _jsxs("svg", { "aria-hidden": "true", viewBox: `0 0 ${model.width} ${model.height}`, children: [_jsx("g", { className: "ui-chart__grid", children: model.ticks.map(tick => (_jsxs(Fragment, { children: [_jsx("line", { x1: model.left, x2: model.right, y1: model.y(tick), y2: model.y(tick) }), _jsx("text", { x: model.left - 8, y: model.y(tick), children: formatValue(tick) })] }, tick))) }), _jsx("g", { className: "ui-chart__axis-labels", children: model.categoryTicks.map(tick => _jsx("text", { textAnchor: tick.textAnchor, x: tick.position, y: model.height - 16, children: tick.label }, tick.index)) }), 'connectors' in model && model.connectors.map(connector => (_jsx("line", { className: "ui-waterfall-chart__connector", x1: connector.x1, x2: connector.x2, y1: connector.y, y2: connector.y }, connector.x1))), _jsx("g", { className: "ui-bar-chart__marks", children: model.marks.map(mark => (_jsx("rect", { className: getLumenChartToneClassName(mark.tone), x: mark.x, y: mark.y, width: mark.width, height: mark.height, children: _jsxs("title", { children: [mark.label, ":", ' ', formatValue(mark.value)] }) }, mark.key))) })] }) })] })), showTable && hasData && (_jsxs("details", { className: "ui-chart__data", children: [_jsx("summary", { children: text.viewData }), _jsx("div", { "aria-label": text.chartData, role: "group", tabIndex: 0, children: _jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: text.category }), _jsx("th", { scope: "col", children: text.start }), _jsx("th", { scope: "col", children: text.end }), _jsx("th", { scope: "col", children: label }), isDensityModel(model) && _jsx("th", { scope: "col", children: text.count })] }) }), _jsx("tbody", { children: rows })] }) })] }))] }));
+};
+const emptyWaterfallData = [];
+const emptyHistogramBins = [];
+export const WaterfallChart = ({ className, data = emptyWaterfallData, formatValue = String, ...props }) => _jsx(IntervalPlot, { ...props, className: composeClassName('ui-waterfall-chart', className), model: createLumenWaterfallGeometry(data, { formatValue }), formatValue: formatValue, formatBoundary: formatValue });
+export const Histogram = ({ bins = emptyHistogramBins, className, formatBoundary = String, formatValue = String, frequency = 'count', labels, tone = 'series-1', valueLabel, ...props }) => _jsx(IntervalPlot, { ...props, ...(labels ? { labels } : {}), className: composeClassName('ui-histogram', className), model: createLumenHistogramGeometry(bins, { formatBoundary, formatValue, frequency, tone }), formatBoundary: formatBoundary, formatValue: formatValue, valueLabel: valueLabel ?? resolveLumenChartLabels(labels)[frequency === 'density' ? 'density' : 'count'] });

package/dist/media-selection.d.ts

@@ -0,0 +1,18 @@
+import type { ComponentPropsWithoutRef } from 'react';
+import { type ButtonProps } from './components.js';
+export interface MediaThumbnailProps extends Omit<ButtonProps, 'asChild'> {
+    label: string;
+    mediaId?: string;
+    order?: number;
+    selected?: boolean;
+    state?: 'ready' | 'loading' | 'error';
+    stateLabel?: string;
+}
+export declare const MediaThumbnail: ({ children, className, disabled, label, mediaId, order, selected, state, stateLabel, ...props }: MediaThumbnailProps) => import("react").JSX.Element;
+export interface MediaFilmstripProps extends ComponentPropsWithoutRef<'section'> {
+    label: string;
+    selectionLabel: string;
+}
+/** Children are native list items containing a thumbnail and optional sibling move actions. */
+export declare const MediaFilmstrip: ({ children, className, label, selectionLabel, ...props }: MediaFilmstripProps) => import("react").JSX.Element;
+//# sourceMappingURL=media-selection.d.ts.map

package/dist/media-selection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-selection.d.ts","sourceRoot":"","sources":["../src/media-selection.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAA;AAKrD,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAE1D,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC;IACvE,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAA;IACrC,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,eAAO,MAAM,cAAc,GAAI,iGAE5B,mBAAmB,gCAYrB,CAAA;AAED,MAAM,WAAW,mBAAoB,SAAQ,wBAAwB,CAAC,SAAS,CAAC;IAC9E,KAAK,EAAE,MAAM,CAAA;IACb,cAAc,EAAE,MAAM,CAAA;CACvB;AAED,+FAA+F;AAC/F,eAAO,MAAM,cAAc,GAAI,0DAA0D,mBAAmB,gCAQ3G,CAAA"}

package/dist/media-selection.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatLumenMediaThumbnailState, resolveLumenMediaOrder } from '@santi020k/lumen-core/media-workspace';
+import { composeClassName } from '@santi020k/lumen-core/tokens';
+import { Button } from './components.js';
+export const MediaThumbnail = ({ children, className, disabled, label, mediaId, order, selected = false, state = 'ready', stateLabel, ...props }) => {
+    const position = resolveLumenMediaOrder(order);
+    const status = formatLumenMediaThumbnailState(state, stateLabel);
+    return (_jsxs(Button, { ...props, className: composeClassName('ui-media-thumbnail', className), variant: "outline", "aria-busy": state === 'loading' || undefined, "aria-pressed": selected, disabled: disabled === true || state !== 'ready', "data-state": state, "data-media-id": mediaId, children: [_jsx("span", { className: "ui-media-thumbnail__media", "aria-hidden": "true", children: children }), _jsx("span", { className: "ui-media-thumbnail__label", children: label }), position !== undefined && _jsx("span", { className: "ui-media-thumbnail__order", children: position }), state !== 'ready' && _jsx("span", { className: "ui-media-thumbnail__state", children: status })] }));
+};
+/** Children are native list items containing a thumbnail and optional sibling move actions. */
+export const MediaFilmstrip = ({ children, className, label, selectionLabel, ...props }) => (_jsxs("section", { ...props, className: composeClassName('ui-media-filmstrip', className), "aria-label": label, children: [_jsxs("div", { className: "ui-media-filmstrip__heading", children: [_jsx("span", { children: label }), _jsx("span", { role: "status", children: selectionLabel })] }), _jsx("ol", { className: "ui-media-filmstrip__items", children: children })] }));

package/dist/media-viewport.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentPropsWithoutRef } from 'react';
+import { type LumenMediaViewportLabels } from '@santi020k/lumen-core/media-viewport';
+import { type LumenMediaViewportValue } from '@santi020k/lumen-core/media-workspace';
+export interface MediaViewportProps extends Omit<ComponentPropsWithoutRef<'figure'>, 'defaultValue'> {
+    defaultValue?: Partial<LumenMediaViewportValue>;
+    disabled?: boolean;
+    label: string;
+    labels?: Partial<LumenMediaViewportLabels>;
+    locale?: string;
+    maxZoom?: number;
+    onValueChange?: (value: LumenMediaViewportValue) => void;
+    ratio?: number;
+    value?: LumenMediaViewportValue;
+}
+export declare const MediaViewport: ({ children, className, defaultValue, disabled, label, labels, locale, maxZoom, onValueChange, ratio, value, ...props }: MediaViewportProps) => import("react").JSX.Element;
+//# sourceMappingURL=media-viewport.d.ts.map

package/dist/media-viewport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-viewport.d.ts","sourceRoot":"","sources":["../src/media-viewport.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAA;AAGrD,OAAO,EAIL,KAAK,wBAAwB,EAG9B,MAAM,sCAAsC,CAAA;AAC7C,OAAO,EACL,KAAK,uBAAuB,EAG7B,MAAM,uCAAuC,CAAA;AAK9C,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,wBAAwB,CAAC,QAAQ,CAAC,EAAE,cAAc,CAAC;IAClG,YAAY,CAAC,EAAE,OAAO,CAAC,uBAAuB,CAAC,CAAA;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,OAAO,CAAC,wBAAwB,CAAC,CAAA;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,IAAI,CAAA;IACxD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,uBAAuB,CAAA;CAChC;AAED,eAAO,MAAM,aAAa,GAAI,wHAG3B,kBAAkB,gCAgEpB,CAAA"}

package/dist/media-viewport.js

@@ -0,0 +1,37 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
+import { bindLumenMediaViewport, formatLumenMediaZoom, lumenMediaViewportActions, lumenMediaViewportLabels, syncLumenMediaViewport } from '@santi020k/lumen-core/media-viewport';
+import { normalizeLumenMediaViewport, resolveLumenMediaMaxZoom } from '@santi020k/lumen-core/media-workspace';
+import { composeClassName } from '@santi020k/lumen-core/tokens';
+import { Button } from './components.js';
+export const MediaViewport = ({ children, className, defaultValue, disabled = false, label, labels, locale, maxZoom = 4, onValueChange, ratio = 16 / 9, value, ...props }) => {
+    const [internal, setInternal] = useState(() => normalizeLumenMediaViewport(defaultValue, maxZoom));
+    const current = useMemo(() => normalizeLumenMediaViewport(value ?? internal, maxZoom), [value, internal, maxZoom]);
+    const rootRef = useRef(null);
+    const statusId = useId();
+    const optionsRef = useRef({ current, disabled, maxZoom, onValueChange, controlled: value !== undefined });
+    useEffect(() => {
+        optionsRef.current = { current, disabled, maxZoom, onValueChange, controlled: value !== undefined };
+        if (rootRef.current)
+            syncLumenMediaViewport(rootRef.current, current, maxZoom, disabled, locale);
+    }, [current, disabled, maxZoom, onValueChange, value, locale]);
+    useEffect(() => {
+        const root = rootRef.current;
+        if (!root)
+            return;
+        return bindLumenMediaViewport(root, {
+            disabled: () => optionsRef.current.disabled,
+            getValue: () => optionsRef.current.current,
+            maxZoom: () => optionsRef.current.maxZoom,
+            onValueChange: next => {
+                if (!optionsRef.current.controlled)
+                    setInternal(next);
+                optionsRef.current.onValueChange?.(next);
+            }
+        });
+    }, []);
+    const copy = { ...lumenMediaViewportLabels, ...labels };
+    const safeRatio = Number.isFinite(ratio) && ratio >= 0.1 && ratio <= 10 ? ratio : 16 / 9;
+    return (_jsxs("figure", { ...props, ref: rootRef, className: composeClassName('ui-media-viewport', className), children: [_jsx("div", { "aria-describedby": statusId, "aria-disabled": disabled, "aria-label": label, className: "ui-media-viewport__stage", "data-ui-media-viewport-stage": true, role: "group", style: { aspectRatio: safeRatio, touchAction: current.zoom > 1 && !disabled ? 'none' : 'pan-y' }, tabIndex: 0, children: _jsx("div", { className: "ui-media-viewport__content", "data-ui-media-viewport-content": true, style: { transform: `translate(${current.x * (current.zoom - 1) * 50}%, ${current.y * (current.zoom - 1) * 50}%) scale(${current.zoom})` }, children: children }) }), _jsxs("figcaption", { children: [_jsx("span", { children: label }), _jsx("span", { id: statusId, role: "status", "aria-live": "polite", "data-ui-media-viewport-status": true, children: formatLumenMediaZoom(current.zoom, locale) }), _jsx("div", { className: "ui-media-viewport__actions", role: "group", "aria-label": label, children: lumenMediaViewportActions.map(action => (_jsx(Button, { variant: "outline", "data-ui-media-viewport-action": action, disabled: disabled || (action === 'zoom-in' && current.zoom >= resolveLumenMediaMaxZoom(maxZoom)) || (action !== 'zoom-in' && current.zoom === 1), children: copy[action] }, action))) })] })] }));
+};