@baseline-ui/charts 0.0.0-nightly-20260509002035

package/dist/index.css

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2023-2024 PSPDFKit GmbH. All rights reserved.
+ *
+ * THIS SOURCE CODE AND ANY ACCOMPANYING DOCUMENTATION ARE PROTECTED BY INTERNATIONAL COPYRIGHT LAW
+ * AND MAY NOT BE RESOLD OR REDISTRIBUTED. USAGE IS BOUND TO THE PSPDFKIT LICENSE AGREEMENT.
+ * UNAUTHORIZED REPRODUCTION OR DISTRIBUTION IS SUBJECT TO CIVIL AND CRIMINAL PENALTIES.
+ * This notice may not be removed from this file.
+ *
+ */
+.ofrh9o0{width:100%;flex:1;min-height:0;position:relative}.ofrh9o0 .recharts-surface{overflow:visible}.ofrh9o0 :focus:not(:focus-visible){outline:none}.ofrh9o0 .recharts-surface:focus-visible{outline:none}.ofrh9o0:has(.recharts-surface:focus-visible):after{content:"";position:absolute;top:0;bottom:0;right:0;left:calc(-1 * var(--chart-focus-left-overflow, 0px));outline:2px solid var(--bui-color-focused-default);border-radius:var(--bui-rounded-xs);pointer-events:none}.ofrh9o1{width:100%;list-style:none;margin:0;padding:0;row-gap:var(--bui-spacing-xs);column-gap:var(--bui-spacing-xl)}.ofrh9o2,.ofrh9o3{width:12px;height:12px}._1o5hr0b0{fill:var(--bui-color-text-primary)}._1ojkdm40{fill:var(--bui-color-text-primary)}._1sy8dya0{fill:var(--bui-color-text-oninteractive);pointer-events:none}._1sy8dya1{outline:none}

package/dist/index.d.mts

@@ -0,0 +1,176 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CSSProperties } from 'react';
+import { LineProps } from 'recharts';
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+
+interface AriaLabelingProps {
+  /**
+   * Defines a string value that labels the current element.
+   */
+  'aria-label'?: string,
+
+  /**
+   * Identifies the element (or elements) that labels the current element.
+   */
+  'aria-labelledby'?: string,
+
+  /**
+   * Identifies the element (or elements) that describes the object.
+   */
+  'aria-describedby'?: string,
+
+  /**
+   * Identifies the element (or elements) that provide a detailed, extended description for the object.
+   */
+  'aria-details'?: string
+}
+
+/** Width can be a fixed pixel number or a percent literal like `"100%"`. */
+type ChartDimension = number | `${number}%`;
+/**
+ * Shared base props applied to every chart component. Charts forward
+ * `aria-*` labelling attributes for screen-reader integration and accept
+ * standard `className`/`style` for styling.
+ */
+interface ChartBaseProps extends AriaLabelingProps {
+    /** Additional class name for the chart root. */
+    className?: string;
+    /** Additional inline styles for the chart root. */
+    style?: CSSProperties;
+    /** Chart width. @default "100%" */
+    width?: ChartDimension;
+    /** Chart height. @default 300 */
+    height?: number;
+    /** Whether to show the tooltip on hover. @default true */
+    showTooltip?: boolean;
+    /** Whether to show the legend. */
+    showLegend?: boolean;
+}
+/** Base props shared by cartesian (axis-bearing) charts. */
+interface CartesianChartBaseProps extends ChartBaseProps {
+    /** Whether to show the grid lines. @default true */
+    showGrid?: boolean;
+    /** Whether to show the X axis. @default true */
+    showXAxis?: boolean;
+    /** Whether to show the Y axis. @default true */
+    showYAxis?: boolean;
+}
+
+interface BarChartBar {
+    /** The data key to map to this bar series. */
+    dataKey: string;
+    /** Display name for the legend/tooltip. Defaults to `dataKey`. */
+    name?: string;
+    /** Fill color. Uses theme token colors by default. */
+    color?: string;
+    /**
+     * Stack ID. Bars sharing the same `stackId` are stacked on top of each other.
+     * Bars with different (or no) `stackId` are rendered grouped side-by-side.
+     */
+    stackId?: string | number;
+}
+type BarChartVariant = "default" | "stacked";
+interface BarChartProps extends CartesianChartBaseProps {
+    /** The data array to render. Each item is an object keyed by `xAxisDataKey` and bar `dataKey` values. */
+    data: readonly Record<string, unknown>[];
+    /** Configuration for each bar series to render. */
+    bars: readonly BarChartBar[];
+    /** The data key for the X axis. */
+    xAxisDataKey: string;
+    /**
+     * Visual variant. `"stacked"` stacks every series on top of each other; the
+     * default groups them side-by-side. Per-bar `stackId` overrides the variant
+     * default for that bar.
+     * @default "default"
+     */
+    variant?: BarChartVariant;
+    /** Fixed width of each bar in pixels. @default 12 */
+    barSize?: number;
+    /**
+     * Maximum gap in pixels between adjacent bars within the same X-axis
+     * category. Falls back toward a 1px floor when there isn't enough room
+     * to fit every bar at the requested gap.
+     * @default 4
+     */
+    barGap?: number;
+    /** Border radius applied to the top of each bar in pixels. @default 2 */
+    barRadius?: number;
+}
+
+declare function BarChart({ data, bars, xAxisDataKey, variant, barSize, barGap, barRadius, width, height, showTooltip, showLegend, showGrid, showXAxis, showYAxis, className, style, ...ariaProps }: BarChartProps): react_jsx_runtime.JSX.Element;
+
+type CurveType = NonNullable<LineProps["type"]>;
+interface LineChartLine {
+    /** The data key to map to this line. */
+    dataKey: string;
+    /** Display name for the legend/tooltip. Defaults to `dataKey`. */
+    name?: string;
+    /** Stroke color. Uses theme token colors by default. */
+    color?: string;
+    /** Stroke width in pixels. @default 2 */
+    strokeWidth?: number;
+    /** Curve interpolation type. @default "monotone" */
+    type?: CurveType;
+    /** Whether to render dots on data points. @default false */
+    dot?: boolean;
+}
+type LineChartVariant = "default" | "sparkline";
+interface LineChartProps extends CartesianChartBaseProps {
+    /** The data array to render. Each item is an object keyed by `xAxisDataKey` and line `dataKey` values. */
+    data: readonly Record<string, unknown>[];
+    /** Configuration for each line to render. */
+    lines: readonly LineChartLine[];
+    /** The data key for the X axis. */
+    xAxisDataKey: string;
+    /**
+     * Visual variant. `"sparkline"` renders a compact 40×20 line with no axes,
+     * grid, tooltip, or legend — suitable for inline trend indicators.
+     * @default "default"
+     */
+    variant?: LineChartVariant;
+}
+
+declare function LineChart({ data, lines, xAxisDataKey, variant, width, height, showTooltip, showLegend, showGrid, showXAxis, showYAxis, className, style, ...ariaProps }: LineChartProps): react_jsx_runtime.JSX.Element;
+
+interface PieChartSlice {
+    /**
+     * Display name for the legend, tooltip, and accessibility label. When
+     * multiple slices share the same `name`, legend items still render but
+     * are disambiguated by their position.
+     */
+    name: string;
+    /** Numeric value contributed by this slice. Must be `>= 0`. */
+    value: number;
+    /** Fill color. Uses theme token colors by default. */
+    color?: string;
+}
+interface PieChartProps extends ChartBaseProps {
+    /** The slices to render. Each slice contributes a wedge proportional to `value`. */
+    data: readonly PieChartSlice[];
+    /** Inner radius in pixels. @default 0 */
+    innerRadius?: number;
+    /**
+     * Outer radius in pixels. When omitted, the chart fits the smaller of its
+     * width and height.
+     */
+    outerRadius?: number;
+    /** Whether to render percentage labels inside each slice. @default true */
+    showLabels?: boolean;
+}
+
+declare function PieChart({ data, width, height, innerRadius, outerRadius, showTooltip, showLegend, showLabels, className, style, ...ariaProps }: PieChartProps): react_jsx_runtime.JSX.Element;
+
+export { BarChart, type BarChartBar, type BarChartProps, type BarChartVariant, LineChart, type LineChartLine, type LineChartProps, type LineChartVariant, PieChart, type PieChartProps, type PieChartSlice };

package/dist/index.d.ts

@@ -0,0 +1,176 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CSSProperties } from 'react';
+import { LineProps } from 'recharts';
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+
+interface AriaLabelingProps {
+  /**
+   * Defines a string value that labels the current element.
+   */
+  'aria-label'?: string,
+
+  /**
+   * Identifies the element (or elements) that labels the current element.
+   */
+  'aria-labelledby'?: string,
+
+  /**
+   * Identifies the element (or elements) that describes the object.
+   */
+  'aria-describedby'?: string,
+
+  /**
+   * Identifies the element (or elements) that provide a detailed, extended description for the object.
+   */
+  'aria-details'?: string
+}
+
+/** Width can be a fixed pixel number or a percent literal like `"100%"`. */
+type ChartDimension = number | `${number}%`;
+/**
+ * Shared base props applied to every chart component. Charts forward
+ * `aria-*` labelling attributes for screen-reader integration and accept
+ * standard `className`/`style` for styling.
+ */
+interface ChartBaseProps extends AriaLabelingProps {
+    /** Additional class name for the chart root. */
+    className?: string;
+    /** Additional inline styles for the chart root. */
+    style?: CSSProperties;
+    /** Chart width. @default "100%" */
+    width?: ChartDimension;
+    /** Chart height. @default 300 */
+    height?: number;
+    /** Whether to show the tooltip on hover. @default true */
+    showTooltip?: boolean;
+    /** Whether to show the legend. */
+    showLegend?: boolean;
+}
+/** Base props shared by cartesian (axis-bearing) charts. */
+interface CartesianChartBaseProps extends ChartBaseProps {
+    /** Whether to show the grid lines. @default true */
+    showGrid?: boolean;
+    /** Whether to show the X axis. @default true */
+    showXAxis?: boolean;
+    /** Whether to show the Y axis. @default true */
+    showYAxis?: boolean;
+}
+
+interface BarChartBar {
+    /** The data key to map to this bar series. */
+    dataKey: string;
+    /** Display name for the legend/tooltip. Defaults to `dataKey`. */
+    name?: string;
+    /** Fill color. Uses theme token colors by default. */
+    color?: string;
+    /**
+     * Stack ID. Bars sharing the same `stackId` are stacked on top of each other.
+     * Bars with different (or no) `stackId` are rendered grouped side-by-side.
+     */
+    stackId?: string | number;
+}
+type BarChartVariant = "default" | "stacked";
+interface BarChartProps extends CartesianChartBaseProps {
+    /** The data array to render. Each item is an object keyed by `xAxisDataKey` and bar `dataKey` values. */
+    data: readonly Record<string, unknown>[];
+    /** Configuration for each bar series to render. */
+    bars: readonly BarChartBar[];
+    /** The data key for the X axis. */
+    xAxisDataKey: string;
+    /**
+     * Visual variant. `"stacked"` stacks every series on top of each other; the
+     * default groups them side-by-side. Per-bar `stackId` overrides the variant
+     * default for that bar.
+     * @default "default"
+     */
+    variant?: BarChartVariant;
+    /** Fixed width of each bar in pixels. @default 12 */
+    barSize?: number;
+    /**
+     * Maximum gap in pixels between adjacent bars within the same X-axis
+     * category. Falls back toward a 1px floor when there isn't enough room
+     * to fit every bar at the requested gap.
+     * @default 4
+     */
+    barGap?: number;
+    /** Border radius applied to the top of each bar in pixels. @default 2 */
+    barRadius?: number;
+}
+
+declare function BarChart({ data, bars, xAxisDataKey, variant, barSize, barGap, barRadius, width, height, showTooltip, showLegend, showGrid, showXAxis, showYAxis, className, style, ...ariaProps }: BarChartProps): react_jsx_runtime.JSX.Element;
+
+type CurveType = NonNullable<LineProps["type"]>;
+interface LineChartLine {
+    /** The data key to map to this line. */
+    dataKey: string;
+    /** Display name for the legend/tooltip. Defaults to `dataKey`. */
+    name?: string;
+    /** Stroke color. Uses theme token colors by default. */
+    color?: string;
+    /** Stroke width in pixels. @default 2 */
+    strokeWidth?: number;
+    /** Curve interpolation type. @default "monotone" */
+    type?: CurveType;
+    /** Whether to render dots on data points. @default false */
+    dot?: boolean;
+}
+type LineChartVariant = "default" | "sparkline";
+interface LineChartProps extends CartesianChartBaseProps {
+    /** The data array to render. Each item is an object keyed by `xAxisDataKey` and line `dataKey` values. */
+    data: readonly Record<string, unknown>[];
+    /** Configuration for each line to render. */
+    lines: readonly LineChartLine[];
+    /** The data key for the X axis. */
+    xAxisDataKey: string;
+    /**
+     * Visual variant. `"sparkline"` renders a compact 40×20 line with no axes,
+     * grid, tooltip, or legend — suitable for inline trend indicators.
+     * @default "default"
+     */
+    variant?: LineChartVariant;
+}
+
+declare function LineChart({ data, lines, xAxisDataKey, variant, width, height, showTooltip, showLegend, showGrid, showXAxis, showYAxis, className, style, ...ariaProps }: LineChartProps): react_jsx_runtime.JSX.Element;
+
+interface PieChartSlice {
+    /**
+     * Display name for the legend, tooltip, and accessibility label. When
+     * multiple slices share the same `name`, legend items still render but
+     * are disambiguated by their position.
+     */
+    name: string;
+    /** Numeric value contributed by this slice. Must be `>= 0`. */
+    value: number;
+    /** Fill color. Uses theme token colors by default. */
+    color?: string;
+}
+interface PieChartProps extends ChartBaseProps {
+    /** The slices to render. Each slice contributes a wedge proportional to `value`. */
+    data: readonly PieChartSlice[];
+    /** Inner radius in pixels. @default 0 */
+    innerRadius?: number;
+    /**
+     * Outer radius in pixels. When omitted, the chart fits the smaller of its
+     * width and height.
+     */
+    outerRadius?: number;
+    /** Whether to render percentage labels inside each slice. @default true */
+    showLabels?: boolean;
+}
+
+declare function PieChart({ data, width, height, innerRadius, outerRadius, showTooltip, showLegend, showLabels, className, style, ...ariaProps }: PieChartProps): react_jsx_runtime.JSX.Element;
+
+export { BarChart, type BarChartBar, type BarChartProps, type BarChartVariant, LineChart, type LineChartLine, type LineChartProps, type LineChartVariant, PieChart, type PieChartProps, type PieChartSlice };

package/dist/index.js

@@ -0,0 +1,10 @@
+'use strict';var core=require('@baseline-ui/core'),tokens=require('@baseline-ui/tokens'),react=require('react'),recharts=require('recharts'),jsxRuntime=require('react/jsx-runtime');/**
+ * Copyright (c) 2023-2024 PSPDFKit GmbH. All rights reserved.
+ *
+ * THIS SOURCE CODE AND ANY ACCOMPANYING DOCUMENTATION ARE PROTECTED BY INTERNATIONAL COPYRIGHT LAW
+ * AND MAY NOT BE RESOLD OR REDISTRIBUTED. USAGE IS BOUND TO THE PSPDFKIT LICENSE AGREEMENT.
+ * UNAUTHORIZED REPRODUCTION OR DISTRIBUTION IS SUBJECT TO CIVIL AND CRIMINAL PENALTIES.
+ * This notice may not be removed from this file.
+ *
+ */
+var ee="_1yep5z6is _1yep5z6it _1yep5z6iu _1yep5z6j4 _1yep5z6j5 _1yep5z6j6 _1yep5z6jg _1yep5z6jh _1yep5z6ji",te="ofrh9o1 _1yep5z6is _1yep5z6it _1yep5z6iu _1yep5z6j1 _1yep5z6j2 _1yep5z6j3 _1yep5z6jj _1yep5z6jk _1yep5z6jl _1yep5z6le",re="_1yep5z6iv _1yep5z6iw _1yep5z6ix _1yep5z6jj _1yep5z6jk _1yep5z6jl _1yep5z69f _1yep5z69g _1yep5z69h",oe="ofrh9o2 _1yep5z6ai _1yep5z6aj _1yep5z6ak _1yep5z6b6 _1yep5z6b7 _1yep5z6b8 _1yep5z6bu _1yep5z6bv _1yep5z6bw _1yep5z6ci _1yep5z6cj _1yep5z6ck _1yep5z6lk",ne="ofrh9o0",ae="_1yep5z66 _1yep5z67 _1yep5z68 _1yep5z62i _1yep5z62j _1yep5z62k _1yep5z63o _1yep5z63p _1yep5z63q _1yep5z61c _1yep5z61d _1yep5z61e _1yep5z6al _1yep5z6am _1yep5z6an _1yep5z6b9 _1yep5z6ba _1yep5z6bb _1yep5z6bx _1yep5z6by _1yep5z6bz _1yep5z6cl _1yep5z6cm _1yep5z6cn _1yep5z6is _1yep5z6it _1yep5z6iu _1yep5z6j4 _1yep5z6j5 _1yep5z6j6 _1yep5z69f _1yep5z69g _1yep5z69h _1yep5z6lz _1yep5z6m1 _1yep5z6g1 _1yep5z6h4 _1yep5z6d7",se="_1yep5z6is _1yep5z6it _1yep5z6iu _1yep5z6jj _1yep5z6jk _1yep5z6jl _1yep5z69f _1yep5z69g _1yep5z69h",ie="_1yep5z6is _1yep5z6it _1yep5z6iu _1yep5z6j4 _1yep5z6j5 _1yep5z6j6 _1yep5z69c _1yep5z69d _1yep5z69e",le="ofrh9o3 _1yep5z6ai _1yep5z6aj _1yep5z6ak _1yep5z6b6 _1yep5z6b7 _1yep5z6b8 _1yep5z6bu _1yep5z6bv _1yep5z6bw _1yep5z6ci _1yep5z6cj _1yep5z6ck _1yep5z6lk";function S({rootClassName:e,className:t,style:o,width:r,height:n,variant:a,legend:s,surfaceRef:f,surfaceStyle:i,children:u,...l}){return jsxRuntime.jsxs("div",{...l,className:core.classNames(ee,e,t),"data-variant":a,style:{width:r,height:n,...o},children:[s,jsxRuntime.jsx("div",{ref:f,className:core.classNames(ne,"BaselineUI-Chart-Surface"),style:i,children:u})]})}function P({series:e,resolveColor:t,paddingLeft:o}){return jsxRuntime.jsx("ul",{className:`${te} BaselineUI-Chart-Legend`,style:o==null?void 0:{paddingLeft:o},children:e.map((r,n)=>jsxRuntime.jsxs("li",{className:`${re} BaselineUI-Chart-LegendItem`,children:[jsxRuntime.jsx("span",{className:`${oe} BaselineUI-Chart-LegendSwatch`,style:{backgroundColor:t(r,n)}}),jsxRuntime.jsx(core.Text,{type:"label",size:"sm",children:r.name??r.dataKey})]},r.dataKey))})}var Ee=e=>{if(typeof e=="number")return Number.isFinite(e)?e:null;if(typeof e=="string"&&e.trim()!==""){let t=Number(e);return Number.isFinite(t)?t:null}return null},ke=(e,t)=>{if(!t)return e;let o=Ee(e);return o==null?(process.env.NODE_ENV!=="production"&&e!=null&&core.devWarnOnce("ChartTooltip:nonNumeric",`[ChartTooltip] \`formatterProps\` was provided but a non-numeric value was received (got ${JSON.stringify(e)}). The value will render unformatted.`),e):jsxRuntime.jsx(core.NumberFormat,{value:o,...t})};function N({active:e,payload:t,label:o,formatterProps:r}){return !e||!t?.length?null:jsxRuntime.jsxs("div",{className:`${ae} BaselineUI-Chart-Tooltip`,children:[o==null?null:jsxRuntime.jsx(core.Text,{elementType:"div",type:"label",size:"sm",children:String(o)}),jsxRuntime.jsx("div",{className:ie,children:t.map(n=>jsxRuntime.jsxs("div",{className:`${se} BaselineUI-Chart-TooltipItem`,children:[jsxRuntime.jsx("span",{className:`${le} BaselineUI-Chart-TooltipSwatch`,style:{backgroundColor:n.color}}),jsxRuntime.jsxs(core.Text,{type:"label",size:"sm",children:[n.name,": ",ke(n.value,r)]})]},String(n.dataKey)))})]})}function R(e,t){let o=null,r=()=>{o==null&&(o=requestAnimationFrame(()=>{o=null,t();}));};t();let n=new ResizeObserver(r);n.observe(e);let a=new MutationObserver(r);return a.observe(e,{childList:true,subtree:true}),()=>{o!=null&&cancelAnimationFrame(o),n.disconnect(),a.disconnect();}}var ue=".recharts-yAxis-tick-labels .recharts-cartesian-axis-tick-value";function O(e){let[t,o]=react.useState(0);return react.useLayoutEffect(()=>{let r=e.current;if(!r)return;let n=false,a=false,s=0;return R(r,()=>{let i=r.querySelectorAll(ue);if(i.length===0){s+=1,process.env.NODE_ENV!=="production"&&!a&&!n&&s>5&&(a=true,console.warn(`[useLeftmostYAxisLabelOffset] Could not find "${ue}" \u2014 Recharts may have renamed its internals. Legend will fall back to flush-left alignment.`)),o(0);return}n=true;let u=r.getBoundingClientRect().left,l=1/0;for(let C of i)l=Math.min(l,C.getBoundingClientRect().left);if(!Number.isFinite(l)){o(0);return}o(Math.max(0,l-u));})},[e]),t}var me=".recharts-cartesian-grid";function q(e){let[t,o]=react.useState(0);return react.useLayoutEffect(()=>{let r=e.current;if(!r)return;let n=false,a=false,s=0;return R(r,()=>{let i=r.querySelector(me);if(!i){s+=1,process.env.NODE_ENV!=="production"&&!a&&!n&&s>5&&(a=true,console.warn(`[usePlotAreaWidth] Could not find "${me}" \u2014 Recharts may have renamed its internals. Bar layouts will fall back to requested sizes.`));return}n=true;let u=i.getBoundingClientRect().width;o(l=>Math.abs(l-u)<.5?l:u);})},[e]),t}var fe=".recharts-yAxis-tick-labels .recharts-cartesian-axis-tick-value";function D(e){let[t,o]=react.useState(0);return react.useLayoutEffect(()=>{let r=e.current;if(!r)return;let n=false,a=false,s=0;return R(r,()=>{let i=r.querySelectorAll(fe);if(i.length===0){s+=1,process.env.NODE_ENV!=="production"&&!a&&!n&&s>5&&(a=true,console.warn(`[useYAxisLeftOverflow] Could not find "${fe}" \u2014 Recharts may have renamed its internals. The focus outline will not extend over overflowing axis labels.`)),o(0);return}n=true;let u=r.getBoundingClientRect().left,l=1/0;for(let h of i)l=Math.min(l,h.getBoundingClientRect().left);if(!Number.isFinite(l)){o(0);return}let C=Math.max(0,Math.ceil(u-l));o(h=>h===C?h:C);})},[e]),t}var H="_1o5hr0b0 _1yep5z6dy",de="_1yep5z69r _1yep5z69s _1yep5z69t";var W=[tokens.themeVars.color.support.info.medium,tokens.themeVars.color.support.success.medium,tokens.themeVars.color.support.warning.medium,tokens.themeVars.color.support.error.medium],Xe=12,Je=2,Ze=4,M=1,Qe={width:1,height:1},et=({plotWidth:e,categoryCount:t,barCount:o,barSize:r,barGap:n})=>{if(e<=0||t<=0||o<=0)return {barSize:r,barGap:n};let a=e/t-M,s=o-1;if(o*r+s*n<=a)return {barSize:r,barGap:n};let i=o*r+s*M;if(s>0&&i<=a){let l=Math.floor((a-o*r)/s);return {barSize:r,barGap:Math.max(M,l)}}let u=Math.floor((a-s*M)/o);return {barSize:Math.max(1,u),barGap:M}},ye=(e,t)=>e.color??W[t%W.length],tt=e=>{if(process.env.NODE_ENV==="production")return;let t=e.length>W.length,o=e.some(r=>r.color==null);t&&o&&core.devWarnOnce("BarChart:paletteWrap",`[BarChart] More than ${W.length} bar series with default colors \u2014 colors will repeat and series may become visually indistinguishable. Set an explicit \`color\` on each bar.`);},X=(e,t)=>{if(e.stackId!=null)return e.stackId;if(t==="stacked")return "default"},rt=(e,t)=>{let o=new Map,r=new Map;for(let[n,a]of e.entries()){let s=X(a,t);s==null?o.set(n,true):r.set(s,n);}for(let n of r.values())o.set(n,true);return o},Ce=false,ot=({offset:e,xAxis:t})=>{process.env.NODE_ENV!=="production"&&!Ce&&(!e||!t||typeof t.scale?.domain!="function")&&(Ce=true,console.warn("[BarChart] Recharts passed an unexpected shape to verticalCoordinatesGenerator (missing offset/xAxis/scale.domain). Vertical grid lines will not render \u2014 likely caused by a Recharts upgrade."));let o=t?.scale?.domain?.(),r=Array.isArray(o)?o.length:0,n=e?.width??0;if(r===0||n===0)return [];let a=e?.left??0,s=n/r;return Array.from({length:r},(f,i)=>a+s*(i+1))};function nt({data:e,bars:t,xAxisDataKey:o,variant:r="default",barSize:n=Xe,barGap:a=Ze,barRadius:s=Je,width:f="100%",height:i=300,showTooltip:u=true,showLegend:l=false,showGrid:C=true,showXAxis:h=true,showYAxis:E=true,className:d,style:k,...I}){tt(t);let c=react.useRef(null),m=O(c),b=q(c),T=D(c),p=react.useMemo(()=>rt(t,r),[t,r]),_=react.useMemo(()=>{let y=new Set,B=0;for(let Q of t){let j=X(Q,r);j==null?B+=1:y.add(j);}return B+y.size},[t,r]),{barSize:$,barGap:v}=et({plotWidth:b,categoryCount:e.length,barCount:_,barSize:n,barGap:a});return jsxRuntime.jsx(S,{...I,rootClassName:core.classNames("BaselineUI-BarChart",de),className:d,style:k,width:f,height:i,variant:r,legend:l?jsxRuntime.jsx(P,{series:t,resolveColor:ye,paddingLeft:m}):null,surfaceRef:c,surfaceStyle:{"--chart-focus-left-overflow":`${T}px`},children:jsxRuntime.jsx(recharts.ResponsiveContainer,{width:"100%",height:"100%",initialDimension:Qe,children:jsxRuntime.jsxs(recharts.BarChart,{accessibilityLayer:true,barGap:v,data:e,children:[C?jsxRuntime.jsx(recharts.CartesianGrid,{stroke:tokens.themeVars.color.border.strong,strokeDasharray:"3 3",verticalCoordinatesGenerator:ot}):null,h?jsxRuntime.jsx(recharts.XAxis,{dataKey:o,stroke:tokens.themeVars.color.border.inverse,tick:{className:H}}):null,E?jsxRuntime.jsx(recharts.YAxis,{stroke:tokens.themeVars.color.border.inverse,tick:{className:H}}):null,u?jsxRuntime.jsx(recharts.Tooltip,{content:N,cursor:{fill:tokens.themeVars.color.background.overlay.interactive}}):null,t.map((y,B)=>{let j=p.get(B)??false?[s,s,0,0]:[0,0,0,0];return jsxRuntime.jsx(recharts.Bar,{barSize:$,dataKey:y.dataKey,fill:ye(y,B),name:y.name??y.dataKey,radius:j,stackId:X(y,r)},y.dataKey)})]})})})}var J="_1ojkdm40 _1yep5z6dy",_e="_1yep5z69r _1yep5z69s _1yep5z69t";var U=[tokens.themeVars.color.support.info.medium,tokens.themeVars.color.support.success.medium,tokens.themeVars.color.support.warning.medium,tokens.themeVars.color.support.error.medium],F={width:40,height:20,strokeWidth:1,margin:{top:1,right:1,bottom:1,left:1}},yt={width:1,height:1},Z=(e,t)=>e.color??U[t%U.length],Ct=e=>{if(process.env.NODE_ENV==="production")return;let t=e.length>U.length,o=e.some(r=>r.color==null);t&&o&&core.devWarnOnce("LineChart:paletteWrap",`[LineChart] More than ${U.length} line series with default colors \u2014 colors will repeat and series may become visually indistinguishable. Set an explicit \`color\` on each line.`);};function _t({data:e,lines:t,xAxisDataKey:o,variant:r="default",width:n,height:a,showTooltip:s,showLegend:f=false,showGrid:i,showXAxis:u,showYAxis:l,className:C,style:h,...E}){Ct(t);let d=r==="sparkline",k=n??(d?F.width:"100%"),I=a??(d?F.height:300),c=s??!d,m=i??!d,b=u??!d,T=l??!d,p=react.useRef(null),_=O(p),$=D(p);return jsxRuntime.jsx(S,{...E,rootClassName:core.classNames("BaselineUI-LineChart",_e),className:C,style:h,width:k,height:I,variant:r,legend:f?jsxRuntime.jsx(P,{series:t,resolveColor:Z,paddingLeft:_}):null,surfaceRef:p,surfaceStyle:{"--chart-focus-left-overflow":`${$}px`},children:jsxRuntime.jsx(recharts.ResponsiveContainer,{width:"100%",height:"100%",initialDimension:yt,children:jsxRuntime.jsxs(recharts.LineChart,{accessibilityLayer:!d,data:e,margin:d?F.margin:void 0,children:[m?jsxRuntime.jsx(recharts.CartesianGrid,{stroke:tokens.themeVars.color.border.strong,strokeDasharray:"3 3"}):null,b?jsxRuntime.jsx(recharts.XAxis,{dataKey:o,stroke:tokens.themeVars.color.border.inverse,tick:{className:J}}):null,T?jsxRuntime.jsx(recharts.YAxis,{stroke:tokens.themeVars.color.border.inverse,tick:{className:J}}):null,c?jsxRuntime.jsx(recharts.Tooltip,{content:N,cursor:{stroke:tokens.themeVars.color.border.interactive.enabled,strokeDasharray:"3 3"}}):null,t.map((v,y)=>jsxRuntime.jsx(recharts.Line,{activeDot:d?false:{r:4,strokeWidth:2,stroke:tokens.themeVars.color.background.positive.subtle,fill:Z(v,y),style:{filter:"drop-shadow(0 0 4px rgba(0,0,0,0.4))"}},dataKey:v.dataKey,dot:v.dot??false,name:v.name??v.dataKey,stroke:Z(v,y),strokeWidth:v.strokeWidth??(d?F.strokeWidth:2),type:v.type??"monotone"},v.dataKey))]})})})}var ve="_1yep5z69o _1yep5z69p _1yep5z69q",ge="_1sy8dya1",be="_1sy8dya0 _1yep5z6dy";var G=[tokens.themeVars.color.support.info.medium,tokens.themeVars.color.support.success.medium,tokens.themeVars.color.support.error.medium,tokens.themeVars.color.support.warning.medium],At=90,Et=-270,kt=.05,It={width:1,height:1},xe=(e,t)=>e.color??G[t%G.length],Bt=e=>{if(process.env.NODE_ENV==="production")return;let t=e.length>G.length,o=e.some(r=>r.color==null);t&&o&&core.devWarnOnce("PieChart:paletteWrap",`[PieChart] More than ${G.length} slices with default colors \u2014 colors will repeat and slices may become visually indistinguishable. Set an explicit \`color\` on each slice.`);},Ot=({cx:e,cy:t,midAngle:o,innerRadius:r=0,outerRadius:n=0,percent:a=0})=>{if(e==null||t==null||o==null||a<kt)return null;let s=r+(n-r)*.65,f=-o*(Math.PI/180),i=e+s*Math.cos(f),u=t+s*Math.sin(f);return jsxRuntime.jsx("text",{className:be,x:i,y:u,textAnchor:"middle",dominantBaseline:"central",children:jsxRuntime.jsx(core.NumberFormat,{value:a,style:"percent",maximumFractionDigits:0})})},Dt={style:"percent",maximumFractionDigits:0},Mt=3,jt=({cx:e,cy:t,innerRadius:o,outerRadius:r=0,startAngle:n,endAngle:a,fill:s})=>jsxRuntime.jsxs("g",{children:[jsxRuntime.jsx(recharts.Sector,{cx:e,cy:t,innerRadius:o,outerRadius:r+Mt,startAngle:n,endAngle:a,fill:s}),jsxRuntime.jsx(recharts.Sector,{cx:e,cy:t,innerRadius:o,outerRadius:r,startAngle:n,endAngle:a,fill:s,stroke:tokens.themeVars.color.focused.inset,strokeWidth:1})]}),Le=new WeakSet;function Vt({data:e,width:t="100%",height:o=300,innerRadius:r,outerRadius:n,showTooltip:a=true,showLegend:s=true,showLabels:f=true,className:i,style:u,...l}){Bt(e);let C=react.useRef(null),{sortedData:h,sliceData:E}=react.useMemo(()=>{let c=e.filter(p=>p.value>=0);process.env.NODE_ENV!=="production"&&c.length!==e.length&&console.warn("[PieChart] Negative slice values were dropped. PieChart expects all `value`s to be >= 0.");let m=c.toSorted((p,_)=>_.value-p.value),b=m.reduce((p,_)=>p+_.value,0);process.env.NODE_ENV!=="production"&&b<=0&&e.length>0&&!Le.has(e)&&(Le.add(e),console.warn("[PieChart] Received data with a non-positive total. The chart will render empty."));let T=m.map(p=>({...p,fraction:b>0?p.value/b:0}));return {sortedData:m,sliceData:T}},[e]);react.useEffect(()=>{let c=C.current;if(!c)return;let m=()=>{let p=c.querySelector(".recharts-active-shape")?.parentElement,_=p?.parentElement;p&&_&&_.lastElementChild!==p&&_.append(p);};m();let b=new MutationObserver(m);return b.observe(c,{subtree:true,attributes:true,attributeFilter:["class"]}),()=>{b.disconnect();}},[]);let d=n??"100%",k=r??0,I=h.map((c,m)=>({dataKey:`${c.name}-${m}`,name:c.name}));return jsxRuntime.jsx(S,{...l,rootClassName:core.classNames("BaselineUI-PieChart",ve),className:i,style:u,width:t,height:o,variant:"default",legend:s?jsxRuntime.jsx(P,{series:I,resolveColor:(c,m)=>xe(h[m],m)}):null,surfaceRef:C,children:jsxRuntime.jsx(recharts.ResponsiveContainer,{width:"100%",height:"100%",initialDimension:It,children:jsxRuntime.jsxs(recharts.PieChart,{accessibilityLayer:true,children:[a?jsxRuntime.jsx(recharts.Tooltip,{content:c=>jsxRuntime.jsx(N,{...c,formatterProps:Dt})}):null,jsxRuntime.jsx(recharts.Pie,{data:E,dataKey:"fraction",nameKey:"name",innerRadius:k,outerRadius:d,startAngle:At,endAngle:Et,isAnimationActive:false,label:f?Ot:false,labelLine:false,stroke:tokens.themeVars.color.focused.inset,strokeWidth:1,activeShape:jt,rootTabIndex:-1,children:h.map((c,m)=>jsxRuntime.jsx(recharts.Cell,{className:ge,fill:xe(c,m)},`${c.name}-${m}`))})]})})})}exports.BarChart=nt;exports.LineChart=_t;exports.PieChart=Vt;

package/dist/index.mjs

@@ -0,0 +1,10 @@
+import {classNames,devWarnOnce,Text,NumberFormat}from'@baseline-ui/core';import {themeVars}from'@baseline-ui/tokens';import {useRef,useMemo,useEffect,useState,useLayoutEffect}from'react';import {ResponsiveContainer,BarChart,CartesianGrid,XAxis,YAxis,Tooltip,Bar,LineChart,Line,PieChart,Pie,Cell,Sector}from'recharts';import {jsx,jsxs}from'react/jsx-runtime';/**
+ * Copyright (c) 2023-2024 PSPDFKit GmbH. All rights reserved.
+ *
+ * THIS SOURCE CODE AND ANY ACCOMPANYING DOCUMENTATION ARE PROTECTED BY INTERNATIONAL COPYRIGHT LAW
+ * AND MAY NOT BE RESOLD OR REDISTRIBUTED. USAGE IS BOUND TO THE PSPDFKIT LICENSE AGREEMENT.
+ * UNAUTHORIZED REPRODUCTION OR DISTRIBUTION IS SUBJECT TO CIVIL AND CRIMINAL PENALTIES.
+ * This notice may not be removed from this file.
+ *
+ */
+var ee="_1yep5z6is _1yep5z6it _1yep5z6iu _1yep5z6j4 _1yep5z6j5 _1yep5z6j6 _1yep5z6jg _1yep5z6jh _1yep5z6ji",te="ofrh9o1 _1yep5z6is _1yep5z6it _1yep5z6iu _1yep5z6j1 _1yep5z6j2 _1yep5z6j3 _1yep5z6jj _1yep5z6jk _1yep5z6jl _1yep5z6le",re="_1yep5z6iv _1yep5z6iw _1yep5z6ix _1yep5z6jj _1yep5z6jk _1yep5z6jl _1yep5z69f _1yep5z69g _1yep5z69h",oe="ofrh9o2 _1yep5z6ai _1yep5z6aj _1yep5z6ak _1yep5z6b6 _1yep5z6b7 _1yep5z6b8 _1yep5z6bu _1yep5z6bv _1yep5z6bw _1yep5z6ci _1yep5z6cj _1yep5z6ck _1yep5z6lk",ne="ofrh9o0",ae="_1yep5z66 _1yep5z67 _1yep5z68 _1yep5z62i _1yep5z62j _1yep5z62k _1yep5z63o _1yep5z63p _1yep5z63q _1yep5z61c _1yep5z61d _1yep5z61e _1yep5z6al _1yep5z6am _1yep5z6an _1yep5z6b9 _1yep5z6ba _1yep5z6bb _1yep5z6bx _1yep5z6by _1yep5z6bz _1yep5z6cl _1yep5z6cm _1yep5z6cn _1yep5z6is _1yep5z6it _1yep5z6iu _1yep5z6j4 _1yep5z6j5 _1yep5z6j6 _1yep5z69f _1yep5z69g _1yep5z69h _1yep5z6lz _1yep5z6m1 _1yep5z6g1 _1yep5z6h4 _1yep5z6d7",se="_1yep5z6is _1yep5z6it _1yep5z6iu _1yep5z6jj _1yep5z6jk _1yep5z6jl _1yep5z69f _1yep5z69g _1yep5z69h",ie="_1yep5z6is _1yep5z6it _1yep5z6iu _1yep5z6j4 _1yep5z6j5 _1yep5z6j6 _1yep5z69c _1yep5z69d _1yep5z69e",le="ofrh9o3 _1yep5z6ai _1yep5z6aj _1yep5z6ak _1yep5z6b6 _1yep5z6b7 _1yep5z6b8 _1yep5z6bu _1yep5z6bv _1yep5z6bw _1yep5z6ci _1yep5z6cj _1yep5z6ck _1yep5z6lk";function S({rootClassName:e,className:t,style:o,width:r,height:n,variant:a,legend:s,surfaceRef:f,surfaceStyle:i,children:u,...l}){return jsxs("div",{...l,className:classNames(ee,e,t),"data-variant":a,style:{width:r,height:n,...o},children:[s,jsx("div",{ref:f,className:classNames(ne,"BaselineUI-Chart-Surface"),style:i,children:u})]})}function P({series:e,resolveColor:t,paddingLeft:o}){return jsx("ul",{className:`${te} BaselineUI-Chart-Legend`,style:o==null?void 0:{paddingLeft:o},children:e.map((r,n)=>jsxs("li",{className:`${re} BaselineUI-Chart-LegendItem`,children:[jsx("span",{className:`${oe} BaselineUI-Chart-LegendSwatch`,style:{backgroundColor:t(r,n)}}),jsx(Text,{type:"label",size:"sm",children:r.name??r.dataKey})]},r.dataKey))})}var Ee=e=>{if(typeof e=="number")return Number.isFinite(e)?e:null;if(typeof e=="string"&&e.trim()!==""){let t=Number(e);return Number.isFinite(t)?t:null}return null},ke=(e,t)=>{if(!t)return e;let o=Ee(e);return o==null?(process.env.NODE_ENV!=="production"&&e!=null&&devWarnOnce("ChartTooltip:nonNumeric",`[ChartTooltip] \`formatterProps\` was provided but a non-numeric value was received (got ${JSON.stringify(e)}). The value will render unformatted.`),e):jsx(NumberFormat,{value:o,...t})};function N({active:e,payload:t,label:o,formatterProps:r}){return !e||!t?.length?null:jsxs("div",{className:`${ae} BaselineUI-Chart-Tooltip`,children:[o==null?null:jsx(Text,{elementType:"div",type:"label",size:"sm",children:String(o)}),jsx("div",{className:ie,children:t.map(n=>jsxs("div",{className:`${se} BaselineUI-Chart-TooltipItem`,children:[jsx("span",{className:`${le} BaselineUI-Chart-TooltipSwatch`,style:{backgroundColor:n.color}}),jsxs(Text,{type:"label",size:"sm",children:[n.name,": ",ke(n.value,r)]})]},String(n.dataKey)))})]})}function R(e,t){let o=null,r=()=>{o==null&&(o=requestAnimationFrame(()=>{o=null,t();}));};t();let n=new ResizeObserver(r);n.observe(e);let a=new MutationObserver(r);return a.observe(e,{childList:true,subtree:true}),()=>{o!=null&&cancelAnimationFrame(o),n.disconnect(),a.disconnect();}}var ue=".recharts-yAxis-tick-labels .recharts-cartesian-axis-tick-value";function O(e){let[t,o]=useState(0);return useLayoutEffect(()=>{let r=e.current;if(!r)return;let n=false,a=false,s=0;return R(r,()=>{let i=r.querySelectorAll(ue);if(i.length===0){s+=1,process.env.NODE_ENV!=="production"&&!a&&!n&&s>5&&(a=true,console.warn(`[useLeftmostYAxisLabelOffset] Could not find "${ue}" \u2014 Recharts may have renamed its internals. Legend will fall back to flush-left alignment.`)),o(0);return}n=true;let u=r.getBoundingClientRect().left,l=1/0;for(let C of i)l=Math.min(l,C.getBoundingClientRect().left);if(!Number.isFinite(l)){o(0);return}o(Math.max(0,l-u));})},[e]),t}var me=".recharts-cartesian-grid";function q(e){let[t,o]=useState(0);return useLayoutEffect(()=>{let r=e.current;if(!r)return;let n=false,a=false,s=0;return R(r,()=>{let i=r.querySelector(me);if(!i){s+=1,process.env.NODE_ENV!=="production"&&!a&&!n&&s>5&&(a=true,console.warn(`[usePlotAreaWidth] Could not find "${me}" \u2014 Recharts may have renamed its internals. Bar layouts will fall back to requested sizes.`));return}n=true;let u=i.getBoundingClientRect().width;o(l=>Math.abs(l-u)<.5?l:u);})},[e]),t}var fe=".recharts-yAxis-tick-labels .recharts-cartesian-axis-tick-value";function D(e){let[t,o]=useState(0);return useLayoutEffect(()=>{let r=e.current;if(!r)return;let n=false,a=false,s=0;return R(r,()=>{let i=r.querySelectorAll(fe);if(i.length===0){s+=1,process.env.NODE_ENV!=="production"&&!a&&!n&&s>5&&(a=true,console.warn(`[useYAxisLeftOverflow] Could not find "${fe}" \u2014 Recharts may have renamed its internals. The focus outline will not extend over overflowing axis labels.`)),o(0);return}n=true;let u=r.getBoundingClientRect().left,l=1/0;for(let h of i)l=Math.min(l,h.getBoundingClientRect().left);if(!Number.isFinite(l)){o(0);return}let C=Math.max(0,Math.ceil(u-l));o(h=>h===C?h:C);})},[e]),t}var H="_1o5hr0b0 _1yep5z6dy",de="_1yep5z69r _1yep5z69s _1yep5z69t";var W=[themeVars.color.support.info.medium,themeVars.color.support.success.medium,themeVars.color.support.warning.medium,themeVars.color.support.error.medium],Xe=12,Je=2,Ze=4,M=1,Qe={width:1,height:1},et=({plotWidth:e,categoryCount:t,barCount:o,barSize:r,barGap:n})=>{if(e<=0||t<=0||o<=0)return {barSize:r,barGap:n};let a=e/t-M,s=o-1;if(o*r+s*n<=a)return {barSize:r,barGap:n};let i=o*r+s*M;if(s>0&&i<=a){let l=Math.floor((a-o*r)/s);return {barSize:r,barGap:Math.max(M,l)}}let u=Math.floor((a-s*M)/o);return {barSize:Math.max(1,u),barGap:M}},ye=(e,t)=>e.color??W[t%W.length],tt=e=>{if(process.env.NODE_ENV==="production")return;let t=e.length>W.length,o=e.some(r=>r.color==null);t&&o&&devWarnOnce("BarChart:paletteWrap",`[BarChart] More than ${W.length} bar series with default colors \u2014 colors will repeat and series may become visually indistinguishable. Set an explicit \`color\` on each bar.`);},X=(e,t)=>{if(e.stackId!=null)return e.stackId;if(t==="stacked")return "default"},rt=(e,t)=>{let o=new Map,r=new Map;for(let[n,a]of e.entries()){let s=X(a,t);s==null?o.set(n,true):r.set(s,n);}for(let n of r.values())o.set(n,true);return o},Ce=false,ot=({offset:e,xAxis:t})=>{process.env.NODE_ENV!=="production"&&!Ce&&(!e||!t||typeof t.scale?.domain!="function")&&(Ce=true,console.warn("[BarChart] Recharts passed an unexpected shape to verticalCoordinatesGenerator (missing offset/xAxis/scale.domain). Vertical grid lines will not render \u2014 likely caused by a Recharts upgrade."));let o=t?.scale?.domain?.(),r=Array.isArray(o)?o.length:0,n=e?.width??0;if(r===0||n===0)return [];let a=e?.left??0,s=n/r;return Array.from({length:r},(f,i)=>a+s*(i+1))};function nt({data:e,bars:t,xAxisDataKey:o,variant:r="default",barSize:n=Xe,barGap:a=Ze,barRadius:s=Je,width:f="100%",height:i=300,showTooltip:u=true,showLegend:l=false,showGrid:C=true,showXAxis:h=true,showYAxis:E=true,className:d,style:k,...I}){tt(t);let c=useRef(null),m=O(c),b=q(c),T=D(c),p=useMemo(()=>rt(t,r),[t,r]),_=useMemo(()=>{let y=new Set,B=0;for(let Q of t){let j=X(Q,r);j==null?B+=1:y.add(j);}return B+y.size},[t,r]),{barSize:$,barGap:v}=et({plotWidth:b,categoryCount:e.length,barCount:_,barSize:n,barGap:a});return jsx(S,{...I,rootClassName:classNames("BaselineUI-BarChart",de),className:d,style:k,width:f,height:i,variant:r,legend:l?jsx(P,{series:t,resolveColor:ye,paddingLeft:m}):null,surfaceRef:c,surfaceStyle:{"--chart-focus-left-overflow":`${T}px`},children:jsx(ResponsiveContainer,{width:"100%",height:"100%",initialDimension:Qe,children:jsxs(BarChart,{accessibilityLayer:true,barGap:v,data:e,children:[C?jsx(CartesianGrid,{stroke:themeVars.color.border.strong,strokeDasharray:"3 3",verticalCoordinatesGenerator:ot}):null,h?jsx(XAxis,{dataKey:o,stroke:themeVars.color.border.inverse,tick:{className:H}}):null,E?jsx(YAxis,{stroke:themeVars.color.border.inverse,tick:{className:H}}):null,u?jsx(Tooltip,{content:N,cursor:{fill:themeVars.color.background.overlay.interactive}}):null,t.map((y,B)=>{let j=p.get(B)??false?[s,s,0,0]:[0,0,0,0];return jsx(Bar,{barSize:$,dataKey:y.dataKey,fill:ye(y,B),name:y.name??y.dataKey,radius:j,stackId:X(y,r)},y.dataKey)})]})})})}var J="_1ojkdm40 _1yep5z6dy",_e="_1yep5z69r _1yep5z69s _1yep5z69t";var U=[themeVars.color.support.info.medium,themeVars.color.support.success.medium,themeVars.color.support.warning.medium,themeVars.color.support.error.medium],F={width:40,height:20,strokeWidth:1,margin:{top:1,right:1,bottom:1,left:1}},yt={width:1,height:1},Z=(e,t)=>e.color??U[t%U.length],Ct=e=>{if(process.env.NODE_ENV==="production")return;let t=e.length>U.length,o=e.some(r=>r.color==null);t&&o&&devWarnOnce("LineChart:paletteWrap",`[LineChart] More than ${U.length} line series with default colors \u2014 colors will repeat and series may become visually indistinguishable. Set an explicit \`color\` on each line.`);};function _t({data:e,lines:t,xAxisDataKey:o,variant:r="default",width:n,height:a,showTooltip:s,showLegend:f=false,showGrid:i,showXAxis:u,showYAxis:l,className:C,style:h,...E}){Ct(t);let d=r==="sparkline",k=n??(d?F.width:"100%"),I=a??(d?F.height:300),c=s??!d,m=i??!d,b=u??!d,T=l??!d,p=useRef(null),_=O(p),$=D(p);return jsx(S,{...E,rootClassName:classNames("BaselineUI-LineChart",_e),className:C,style:h,width:k,height:I,variant:r,legend:f?jsx(P,{series:t,resolveColor:Z,paddingLeft:_}):null,surfaceRef:p,surfaceStyle:{"--chart-focus-left-overflow":`${$}px`},children:jsx(ResponsiveContainer,{width:"100%",height:"100%",initialDimension:yt,children:jsxs(LineChart,{accessibilityLayer:!d,data:e,margin:d?F.margin:void 0,children:[m?jsx(CartesianGrid,{stroke:themeVars.color.border.strong,strokeDasharray:"3 3"}):null,b?jsx(XAxis,{dataKey:o,stroke:themeVars.color.border.inverse,tick:{className:J}}):null,T?jsx(YAxis,{stroke:themeVars.color.border.inverse,tick:{className:J}}):null,c?jsx(Tooltip,{content:N,cursor:{stroke:themeVars.color.border.interactive.enabled,strokeDasharray:"3 3"}}):null,t.map((v,y)=>jsx(Line,{activeDot:d?false:{r:4,strokeWidth:2,stroke:themeVars.color.background.positive.subtle,fill:Z(v,y),style:{filter:"drop-shadow(0 0 4px rgba(0,0,0,0.4))"}},dataKey:v.dataKey,dot:v.dot??false,name:v.name??v.dataKey,stroke:Z(v,y),strokeWidth:v.strokeWidth??(d?F.strokeWidth:2),type:v.type??"monotone"},v.dataKey))]})})})}var ve="_1yep5z69o _1yep5z69p _1yep5z69q",ge="_1sy8dya1",be="_1sy8dya0 _1yep5z6dy";var G=[themeVars.color.support.info.medium,themeVars.color.support.success.medium,themeVars.color.support.error.medium,themeVars.color.support.warning.medium],At=90,Et=-270,kt=.05,It={width:1,height:1},xe=(e,t)=>e.color??G[t%G.length],Bt=e=>{if(process.env.NODE_ENV==="production")return;let t=e.length>G.length,o=e.some(r=>r.color==null);t&&o&&devWarnOnce("PieChart:paletteWrap",`[PieChart] More than ${G.length} slices with default colors \u2014 colors will repeat and slices may become visually indistinguishable. Set an explicit \`color\` on each slice.`);},Ot=({cx:e,cy:t,midAngle:o,innerRadius:r=0,outerRadius:n=0,percent:a=0})=>{if(e==null||t==null||o==null||a<kt)return null;let s=r+(n-r)*.65,f=-o*(Math.PI/180),i=e+s*Math.cos(f),u=t+s*Math.sin(f);return jsx("text",{className:be,x:i,y:u,textAnchor:"middle",dominantBaseline:"central",children:jsx(NumberFormat,{value:a,style:"percent",maximumFractionDigits:0})})},Dt={style:"percent",maximumFractionDigits:0},Mt=3,jt=({cx:e,cy:t,innerRadius:o,outerRadius:r=0,startAngle:n,endAngle:a,fill:s})=>jsxs("g",{children:[jsx(Sector,{cx:e,cy:t,innerRadius:o,outerRadius:r+Mt,startAngle:n,endAngle:a,fill:s}),jsx(Sector,{cx:e,cy:t,innerRadius:o,outerRadius:r,startAngle:n,endAngle:a,fill:s,stroke:themeVars.color.focused.inset,strokeWidth:1})]}),Le=new WeakSet;function Vt({data:e,width:t="100%",height:o=300,innerRadius:r,outerRadius:n,showTooltip:a=true,showLegend:s=true,showLabels:f=true,className:i,style:u,...l}){Bt(e);let C=useRef(null),{sortedData:h,sliceData:E}=useMemo(()=>{let c=e.filter(p=>p.value>=0);process.env.NODE_ENV!=="production"&&c.length!==e.length&&console.warn("[PieChart] Negative slice values were dropped. PieChart expects all `value`s to be >= 0.");let m=c.toSorted((p,_)=>_.value-p.value),b=m.reduce((p,_)=>p+_.value,0);process.env.NODE_ENV!=="production"&&b<=0&&e.length>0&&!Le.has(e)&&(Le.add(e),console.warn("[PieChart] Received data with a non-positive total. The chart will render empty."));let T=m.map(p=>({...p,fraction:b>0?p.value/b:0}));return {sortedData:m,sliceData:T}},[e]);useEffect(()=>{let c=C.current;if(!c)return;let m=()=>{let p=c.querySelector(".recharts-active-shape")?.parentElement,_=p?.parentElement;p&&_&&_.lastElementChild!==p&&_.append(p);};m();let b=new MutationObserver(m);return b.observe(c,{subtree:true,attributes:true,attributeFilter:["class"]}),()=>{b.disconnect();}},[]);let d=n??"100%",k=r??0,I=h.map((c,m)=>({dataKey:`${c.name}-${m}`,name:c.name}));return jsx(S,{...l,rootClassName:classNames("BaselineUI-PieChart",ve),className:i,style:u,width:t,height:o,variant:"default",legend:s?jsx(P,{series:I,resolveColor:(c,m)=>xe(h[m],m)}):null,surfaceRef:C,children:jsx(ResponsiveContainer,{width:"100%",height:"100%",initialDimension:It,children:jsxs(PieChart,{accessibilityLayer:true,children:[a?jsx(Tooltip,{content:c=>jsx(N,{...c,formatterProps:Dt})}):null,jsx(Pie,{data:E,dataKey:"fraction",nameKey:"name",innerRadius:k,outerRadius:d,startAngle:At,endAngle:Et,isAnimationActive:false,label:f?Ot:false,labelLine:false,stroke:themeVars.color.focused.inset,strokeWidth:1,activeShape:jt,rootTabIndex:-1,children:h.map((c,m)=>jsx(Cell,{className:ge,fill:xe(c,m)},`${c.name}-${m}`))})]})})})}export{nt as BarChart,_t as LineChart,Vt as PieChart};

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@baseline-ui/charts",
+  "version": "0.0.0-nightly-20260509002035",
+  "description": "Chart components for Baseline UI",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "style": "dist/index.css",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@baseline-ui/core": "0.0.0-nightly-20260509002035",
+    "@baseline-ui/tokens": "0.0.0-nightly-20260509002035"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "recharts": "^3.8.1"
+  },
+  "devDependencies": {
+    "recharts": "^3.8.1"
+  },
+  "license": "SEE LICENSE IN https://pspdfkit.com/legal/License.pdf",
+  "scripts": {
+    "build": "tsup"
+  }
+}