@economic/taco 14.1.1 → 14.2.0-tanstack-virtual-update.0

package/dist/charts/components/Area/AreaChart.cjs

@@ -56,10 +56,10 @@ function AreaChart(props) {
     /* @__PURE__ */ React.createElement(RechartsPrimitive__namespace.Tooltip, { content: /* @__PURE__ */ React.createElement(Tooltip.Tooltip, { title: tooltipTitle }) }),
     /* @__PURE__ */ React.createElement(RechartsPrimitive__namespace.XAxis, { ...common.getAxisProps("x", props) }),
     /* @__PURE__ */ React.createElement(RechartsPrimitive__namespace.YAxis, { ...common.getAxisProps("y", props) }),
-    shapes.map((shape) => /* @__PURE__ */ React.createElement(
+    shapes.map((shape, index) => /* @__PURE__ */ React.createElement(
       RechartsPrimitive__namespace.Area,
       {
-        key: shape.dataKey,
+        key: `${index}-${shape.dataKey}`,
         ...shape,
         dot: showDots ? shape.dot : false,
         fillOpacity: 0.4,

package/dist/charts/components/Area/AreaChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AreaChart.cjs","sources":["../../../../src/charts/components/Area/AreaChart.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as RechartsPrimitive from 'recharts';\n\nimport { getAxisProps, stripCartesianProps } from '@/charts/utils/common';\n\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Legend } from '../Legend';\nimport { Tooltip } from '../Tooltip';\nimport type { ChartChildProps, CartesianChartProps, CurveType } from '../types';\nimport { useChart } from '../useChartData';\n\nexport type AreaChartProps<TData extends object> = {\n    /** Show dots for each data point\n     * @default false\n     */\n    showDots?: boolean;\n    /** Stack areas on top of one another, instead of other each other. 'expand' fills the available space\n     * @default false\n     */\n    stacked?: boolean | 'expand';\n    /** Interpolation type of the line\n     * @default natural\n     */\n    type?: CurveType;\n} & CartesianChartProps<TData>;\n\nexport function AreaChart<TData extends object>(props: AreaChartProps<TData>) {\n    const {\n        children,\n        className: customClassName,\n        data,\n        showLegend = false,\n        showDots = false,\n        stacked = false,\n        tooltipTitle,\n        type = 'natural',\n        ...attributes\n    } = stripCartesianProps<TData, AreaChartProps<TData>>(props);\n\n    const className = cn('relative aspect-video', { 'pb-8': showLegend }, customClassName);\n    const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart<TData>(children);\n\n    return (\n        <div className={className} data-taco=\"chart-wrapper\">\n            <ChartWrapper {...attributes} className=\"h-full w-full\" data-taco=\"chart-area\">\n                <RechartsPrimitive.AreaChart\n                    data={data}\n                    margin={{\n                        bottom: 0,\n                        // ensures dots on the edges of the chart don't get cropped\n                        left: 4,\n                        right: 4,\n                        top: 4,\n                    }}\n                    stackOffset={stacked === 'expand' ? 'expand' : undefined}>\n                    <RechartsPrimitive.CartesianGrid vertical={false} />\n                    <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n                    <RechartsPrimitive.XAxis {...getAxisProps('x', props)} />\n                    <RechartsPrimitive.YAxis {...getAxisProps('y', props)} />\n                    {shapes.map(shape => (\n                        <RechartsPrimitive.Area\n                            key={shape.dataKey}\n                            {...shape}\n                            dot={showDots ? shape.dot : false}\n                            fillOpacity={0.4}\n                            stackId={stacked ? 'stack' : undefined}\n                            type={type}\n                        />\n                    ))}\n                </RechartsPrimitive.AreaChart>\n            </ChartWrapper>\n            {showLegend ? (\n                <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n            ) : null}\n        </div>\n    );\n}\n\n// oxlint-disable-next-line no-empty-object-type\nexport type AreaChartAreaProps<TData extends object> = ChartChildProps<TData>;\n\nfunction Area<TData extends object>(_: AreaChartAreaProps<TData>): React.JSX.Element | null {\n    return null;\n}\nAreaChart.Area = Area;\n"],"names":["stripCartesianProps","useChart","ChartWrapper","RechartsPrimitive","Tooltip","getAxisProps","Legend"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BO,SAAS,UAAgC,OAA8B;AAC1E,QAAM;AAAA,IACF;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,aAAa;AAAA,IACb,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACHA,OAAAA,oBAAkD,KAAK;AAE3D,QAAM,YAAY,GAAG,yBAAyB,EAAE,QAAQ,WAAA,GAAc,eAAe;AACrF,QAAM,EAAE,OAAO,QAAQ,aAAa,gBAAgB,WAAA,IAAeC,aAAAA,SAAgB,QAAQ;AAE3F,SACI,sBAAA,cAAC,OAAA,EAAI,WAAsB,aAAU,gBAAA,GACjC,sBAAA,cAACC,aAAAA,cAAA,EAAc,GAAG,YAAY,WAAU,iBAAgB,aAAU,aAAA,GAC9D,sBAAA;AAAA,IAACC,6BAAkB;AAAA,IAAlB;AAAA,MACG;AAAA,MACA,QAAQ;AAAA,QACJ,QAAQ;AAAA;AAAA,QAER,MAAM;AAAA,QACN,OAAO;AAAA,QACP,KAAK;AAAA,MAAA;AAAA,MAET,aAAa,YAAY,WAAW,WAAW;AAAA,IAAA;AAAA,IAC/C,sBAAA,cAACA,6BAAkB,eAAlB,EAAgC,UAAU,OAAO;AAAA,IAClD,sBAAA,cAACA,6BAAkB,SAAlB,EAA0B,SAAS,sBAAA,cAACC,QAAAA,SAAA,EAAQ,OAAO,aAAA,CAAc,EAAA,CAAI;AAAA,IACtE,sBAAA,cAACD,6BAAkB,OAAlB,EAAyB,GAAGE,oBAAa,KAAK,KAAK,GAAG;AAAA,IACvD,sBAAA,cAACF,6BAAkB,OAAlB,EAAyB,GAAGE,oBAAa,KAAK,KAAK,GAAG;AAAA,IACtD,OAAO,IAAI,CAAA,UACR,sBAAA;AAAA,MAACF,6BAAkB;AAAA,MAAlB;AAAA,QACG,KAAK,MAAM;AAAA,QACV,GAAG;AAAA,QACJ,KAAK,WAAW,MAAM,MAAM;AAAA,QAC5B,aAAa;AAAA,QACb,SAAS,UAAU,UAAU;AAAA,QAC7B;AAAA,MAAA;AAAA,IAAA,CAEP;AAAA,EAAA,CAET,GACC,aACG,sBAAA,cAACG,OAAAA,QAAA,EAAc,OAAc,YAAY,aAAa,SAAS,gBAAgB,UAAU,WAAA,CAAY,IACrG,IACR;AAER;AAKA,SAAS,KAA2B,GAAwD;AACxF,SAAO;AACX;AACA,UAAU,OAAO;;"}
+{"version":3,"file":"AreaChart.cjs","sources":["../../../../src/charts/components/Area/AreaChart.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as RechartsPrimitive from 'recharts';\n\nimport { getAxisProps, stripCartesianProps } from '@/charts/utils/common';\n\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Legend } from '../Legend';\nimport { Tooltip } from '../Tooltip';\nimport type { ChartChildProps, CartesianChartProps, CurveType } from '../types';\nimport { useChart } from '../useChartData';\n\nexport type AreaChartProps<TData extends object> = {\n    /** Show dots for each data point\n     * @default false\n     */\n    showDots?: boolean;\n    /** Stack areas on top of one another, instead of other each other. 'expand' fills the available space\n     * @default false\n     */\n    stacked?: boolean | 'expand';\n    /** Interpolation type of the line\n     * @default natural\n     */\n    type?: CurveType;\n} & CartesianChartProps<TData>;\n\nexport function AreaChart<TData extends object>(props: AreaChartProps<TData>) {\n    const {\n        children,\n        className: customClassName,\n        data,\n        showLegend = false,\n        showDots = false,\n        stacked = false,\n        tooltipTitle,\n        type = 'natural',\n        ...attributes\n    } = stripCartesianProps<TData, AreaChartProps<TData>>(props);\n\n    const className = cn('relative aspect-video', { 'pb-8': showLegend }, customClassName);\n    const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart<TData>(children);\n\n    return (\n        <div className={className} data-taco=\"chart-wrapper\">\n            <ChartWrapper {...attributes} className=\"h-full w-full\" data-taco=\"chart-area\">\n                <RechartsPrimitive.AreaChart\n                    data={data}\n                    margin={{\n                        bottom: 0,\n                        // ensures dots on the edges of the chart don't get cropped\n                        left: 4,\n                        right: 4,\n                        top: 4,\n                    }}\n                    stackOffset={stacked === 'expand' ? 'expand' : undefined}>\n                    <RechartsPrimitive.CartesianGrid vertical={false} />\n                    <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n                    <RechartsPrimitive.XAxis {...getAxisProps('x', props)} />\n                    <RechartsPrimitive.YAxis {...getAxisProps('y', props)} />\n                    {shapes.map((shape, index) => (\n                        <RechartsPrimitive.Area\n                            key={`${index}-${shape.dataKey}`}\n                            {...shape}\n                            dot={showDots ? shape.dot : false}\n                            fillOpacity={0.4}\n                            stackId={stacked ? 'stack' : undefined}\n                            type={type}\n                        />\n                    ))}\n                </RechartsPrimitive.AreaChart>\n            </ChartWrapper>\n            {showLegend ? (\n                <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n            ) : null}\n        </div>\n    );\n}\n\n// oxlint-disable-next-line no-empty-object-type\nexport type AreaChartAreaProps<TData extends object> = ChartChildProps<TData>;\n\nfunction Area<TData extends object>(_: AreaChartAreaProps<TData>): React.JSX.Element | null {\n    return null;\n}\nAreaChart.Area = Area;\n"],"names":["stripCartesianProps","useChart","ChartWrapper","RechartsPrimitive","Tooltip","getAxisProps","Legend"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BO,SAAS,UAAgC,OAA8B;AAC1E,QAAM;AAAA,IACF;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,aAAa;AAAA,IACb,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACHA,OAAAA,oBAAkD,KAAK;AAE3D,QAAM,YAAY,GAAG,yBAAyB,EAAE,QAAQ,WAAA,GAAc,eAAe;AACrF,QAAM,EAAE,OAAO,QAAQ,aAAa,gBAAgB,WAAA,IAAeC,aAAAA,SAAgB,QAAQ;AAE3F,SACI,sBAAA,cAAC,OAAA,EAAI,WAAsB,aAAU,gBAAA,GACjC,sBAAA,cAACC,aAAAA,cAAA,EAAc,GAAG,YAAY,WAAU,iBAAgB,aAAU,aAAA,GAC9D,sBAAA;AAAA,IAACC,6BAAkB;AAAA,IAAlB;AAAA,MACG;AAAA,MACA,QAAQ;AAAA,QACJ,QAAQ;AAAA;AAAA,QAER,MAAM;AAAA,QACN,OAAO;AAAA,QACP,KAAK;AAAA,MAAA;AAAA,MAET,aAAa,YAAY,WAAW,WAAW;AAAA,IAAA;AAAA,IAC/C,sBAAA,cAACA,6BAAkB,eAAlB,EAAgC,UAAU,OAAO;AAAA,IAClD,sBAAA,cAACA,6BAAkB,SAAlB,EAA0B,SAAS,sBAAA,cAACC,QAAAA,SAAA,EAAQ,OAAO,aAAA,CAAc,EAAA,CAAI;AAAA,IACtE,sBAAA,cAACD,6BAAkB,OAAlB,EAAyB,GAAGE,oBAAa,KAAK,KAAK,GAAG;AAAA,IACvD,sBAAA,cAACF,6BAAkB,OAAlB,EAAyB,GAAGE,oBAAa,KAAK,KAAK,GAAG;AAAA,IACtD,OAAO,IAAI,CAAC,OAAO,UAChB,sBAAA;AAAA,MAACF,6BAAkB;AAAA,MAAlB;AAAA,QACG,KAAK,GAAG,KAAK,IAAI,MAAM,OAAO;AAAA,QAC7B,GAAG;AAAA,QACJ,KAAK,WAAW,MAAM,MAAM;AAAA,QAC5B,aAAa;AAAA,QACb,SAAS,UAAU,UAAU;AAAA,QAC7B;AAAA,MAAA;AAAA,IAAA,CAEP;AAAA,EAAA,CAET,GACC,aACG,sBAAA,cAACG,OAAAA,QAAA,EAAc,OAAc,YAAY,aAAa,SAAS,gBAAgB,UAAU,WAAA,CAAY,IACrG,IACR;AAER;AAKA,SAAS,KAA2B,GAAwD;AACxF,SAAO;AACX;AACA,UAAU,OAAO;;"}

package/dist/charts/components/Area/AreaChart.js

@@ -37,10 +37,10 @@ function AreaChart(props) {
     /* @__PURE__ */ React__default.createElement(RechartsPrimitive.Tooltip, { content: /* @__PURE__ */ React__default.createElement(Tooltip, { title: tooltipTitle }) }),
     /* @__PURE__ */ React__default.createElement(RechartsPrimitive.XAxis, { ...getAxisProps("x", props) }),
     /* @__PURE__ */ React__default.createElement(RechartsPrimitive.YAxis, { ...getAxisProps("y", props) }),
-    shapes.map((shape) => /* @__PURE__ */ React__default.createElement(
+    shapes.map((shape, index) => /* @__PURE__ */ React__default.createElement(
       RechartsPrimitive.Area,
       {
-        key: shape.dataKey,
+        key: `${index}-${shape.dataKey}`,
         ...shape,
         dot: showDots ? shape.dot : false,
         fillOpacity: 0.4,

package/dist/charts/components/Area/AreaChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"AreaChart.js","sources":["../../../../src/charts/components/Area/AreaChart.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as RechartsPrimitive from 'recharts';\n\nimport { getAxisProps, stripCartesianProps } from '@/charts/utils/common';\n\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Legend } from '../Legend';\nimport { Tooltip } from '../Tooltip';\nimport type { ChartChildProps, CartesianChartProps, CurveType } from '../types';\nimport { useChart } from '../useChartData';\n\nexport type AreaChartProps<TData extends object> = {\n    /** Show dots for each data point\n     * @default false\n     */\n    showDots?: boolean;\n    /** Stack areas on top of one another, instead of other each other. 'expand' fills the available space\n     * @default false\n     */\n    stacked?: boolean | 'expand';\n    /** Interpolation type of the line\n     * @default natural\n     */\n    type?: CurveType;\n} & CartesianChartProps<TData>;\n\nexport function AreaChart<TData extends object>(props: AreaChartProps<TData>) {\n    const {\n        children,\n        className: customClassName,\n        data,\n        showLegend = false,\n        showDots = false,\n        stacked = false,\n        tooltipTitle,\n        type = 'natural',\n        ...attributes\n    } = stripCartesianProps<TData, AreaChartProps<TData>>(props);\n\n    const className = cn('relative aspect-video', { 'pb-8': showLegend }, customClassName);\n    const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart<TData>(children);\n\n    return (\n        <div className={className} data-taco=\"chart-wrapper\">\n            <ChartWrapper {...attributes} className=\"h-full w-full\" data-taco=\"chart-area\">\n                <RechartsPrimitive.AreaChart\n                    data={data}\n                    margin={{\n                        bottom: 0,\n                        // ensures dots on the edges of the chart don't get cropped\n                        left: 4,\n                        right: 4,\n                        top: 4,\n                    }}\n                    stackOffset={stacked === 'expand' ? 'expand' : undefined}>\n                    <RechartsPrimitive.CartesianGrid vertical={false} />\n                    <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n                    <RechartsPrimitive.XAxis {...getAxisProps('x', props)} />\n                    <RechartsPrimitive.YAxis {...getAxisProps('y', props)} />\n                    {shapes.map(shape => (\n                        <RechartsPrimitive.Area\n                            key={shape.dataKey}\n                            {...shape}\n                            dot={showDots ? shape.dot : false}\n                            fillOpacity={0.4}\n                            stackId={stacked ? 'stack' : undefined}\n                            type={type}\n                        />\n                    ))}\n                </RechartsPrimitive.AreaChart>\n            </ChartWrapper>\n            {showLegend ? (\n                <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n            ) : null}\n        </div>\n    );\n}\n\n// oxlint-disable-next-line no-empty-object-type\nexport type AreaChartAreaProps<TData extends object> = ChartChildProps<TData>;\n\nfunction Area<TData extends object>(_: AreaChartAreaProps<TData>): React.JSX.Element | null {\n    return null;\n}\nAreaChart.Area = Area;\n"],"names":["React"],"mappings":";;;;;;;;AA2BO,SAAS,UAAgC,OAA8B;AAC1E,QAAM;AAAA,IACF;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,aAAa;AAAA,IACb,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACH,oBAAkD,KAAK;AAE3D,QAAM,YAAY,GAAG,yBAAyB,EAAE,QAAQ,WAAA,GAAc,eAAe;AACrF,QAAM,EAAE,OAAO,QAAQ,aAAa,gBAAgB,WAAA,IAAe,SAAgB,QAAQ;AAE3F,SACIA,+BAAA,cAAC,OAAA,EAAI,WAAsB,aAAU,gBAAA,GACjCA,+BAAA,cAAC,cAAA,EAAc,GAAG,YAAY,WAAU,iBAAgB,aAAU,aAAA,GAC9DA,+BAAA;AAAA,IAAC,kBAAkB;AAAA,IAAlB;AAAA,MACG;AAAA,MACA,QAAQ;AAAA,QACJ,QAAQ;AAAA;AAAA,QAER,MAAM;AAAA,QACN,OAAO;AAAA,QACP,KAAK;AAAA,MAAA;AAAA,MAET,aAAa,YAAY,WAAW,WAAW;AAAA,IAAA;AAAA,IAC/CA,+BAAA,cAAC,kBAAkB,eAAlB,EAAgC,UAAU,OAAO;AAAA,IAClDA,+BAAA,cAAC,kBAAkB,SAAlB,EAA0B,SAASA,+BAAA,cAAC,SAAA,EAAQ,OAAO,aAAA,CAAc,EAAA,CAAI;AAAA,IACtEA,+BAAA,cAAC,kBAAkB,OAAlB,EAAyB,GAAG,aAAa,KAAK,KAAK,GAAG;AAAA,IACvDA,+BAAA,cAAC,kBAAkB,OAAlB,EAAyB,GAAG,aAAa,KAAK,KAAK,GAAG;AAAA,IACtD,OAAO,IAAI,CAAA,UACRA,+BAAA;AAAA,MAAC,kBAAkB;AAAA,MAAlB;AAAA,QACG,KAAK,MAAM;AAAA,QACV,GAAG;AAAA,QACJ,KAAK,WAAW,MAAM,MAAM;AAAA,QAC5B,aAAa;AAAA,QACb,SAAS,UAAU,UAAU;AAAA,QAC7B;AAAA,MAAA;AAAA,IAAA,CAEP;AAAA,EAAA,CAET,GACC,aACGA,+BAAA,cAAC,QAAA,EAAc,OAAc,YAAY,aAAa,SAAS,gBAAgB,UAAU,WAAA,CAAY,IACrG,IACR;AAER;AAKA,SAAS,KAA2B,GAAwD;AACxF,SAAO;AACX;AACA,UAAU,OAAO;"}
+{"version":3,"file":"AreaChart.js","sources":["../../../../src/charts/components/Area/AreaChart.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as RechartsPrimitive from 'recharts';\n\nimport { getAxisProps, stripCartesianProps } from '@/charts/utils/common';\n\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Legend } from '../Legend';\nimport { Tooltip } from '../Tooltip';\nimport type { ChartChildProps, CartesianChartProps, CurveType } from '../types';\nimport { useChart } from '../useChartData';\n\nexport type AreaChartProps<TData extends object> = {\n    /** Show dots for each data point\n     * @default false\n     */\n    showDots?: boolean;\n    /** Stack areas on top of one another, instead of other each other. 'expand' fills the available space\n     * @default false\n     */\n    stacked?: boolean | 'expand';\n    /** Interpolation type of the line\n     * @default natural\n     */\n    type?: CurveType;\n} & CartesianChartProps<TData>;\n\nexport function AreaChart<TData extends object>(props: AreaChartProps<TData>) {\n    const {\n        children,\n        className: customClassName,\n        data,\n        showLegend = false,\n        showDots = false,\n        stacked = false,\n        tooltipTitle,\n        type = 'natural',\n        ...attributes\n    } = stripCartesianProps<TData, AreaChartProps<TData>>(props);\n\n    const className = cn('relative aspect-video', { 'pb-8': showLegend }, customClassName);\n    const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart<TData>(children);\n\n    return (\n        <div className={className} data-taco=\"chart-wrapper\">\n            <ChartWrapper {...attributes} className=\"h-full w-full\" data-taco=\"chart-area\">\n                <RechartsPrimitive.AreaChart\n                    data={data}\n                    margin={{\n                        bottom: 0,\n                        // ensures dots on the edges of the chart don't get cropped\n                        left: 4,\n                        right: 4,\n                        top: 4,\n                    }}\n                    stackOffset={stacked === 'expand' ? 'expand' : undefined}>\n                    <RechartsPrimitive.CartesianGrid vertical={false} />\n                    <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n                    <RechartsPrimitive.XAxis {...getAxisProps('x', props)} />\n                    <RechartsPrimitive.YAxis {...getAxisProps('y', props)} />\n                    {shapes.map((shape, index) => (\n                        <RechartsPrimitive.Area\n                            key={`${index}-${shape.dataKey}`}\n                            {...shape}\n                            dot={showDots ? shape.dot : false}\n                            fillOpacity={0.4}\n                            stackId={stacked ? 'stack' : undefined}\n                            type={type}\n                        />\n                    ))}\n                </RechartsPrimitive.AreaChart>\n            </ChartWrapper>\n            {showLegend ? (\n                <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n            ) : null}\n        </div>\n    );\n}\n\n// oxlint-disable-next-line no-empty-object-type\nexport type AreaChartAreaProps<TData extends object> = ChartChildProps<TData>;\n\nfunction Area<TData extends object>(_: AreaChartAreaProps<TData>): React.JSX.Element | null {\n    return null;\n}\nAreaChart.Area = Area;\n"],"names":["React"],"mappings":";;;;;;;;AA2BO,SAAS,UAAgC,OAA8B;AAC1E,QAAM;AAAA,IACF;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,aAAa;AAAA,IACb,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACH,oBAAkD,KAAK;AAE3D,QAAM,YAAY,GAAG,yBAAyB,EAAE,QAAQ,WAAA,GAAc,eAAe;AACrF,QAAM,EAAE,OAAO,QAAQ,aAAa,gBAAgB,WAAA,IAAe,SAAgB,QAAQ;AAE3F,SACIA,+BAAA,cAAC,OAAA,EAAI,WAAsB,aAAU,gBAAA,GACjCA,+BAAA,cAAC,cAAA,EAAc,GAAG,YAAY,WAAU,iBAAgB,aAAU,aAAA,GAC9DA,+BAAA;AAAA,IAAC,kBAAkB;AAAA,IAAlB;AAAA,MACG;AAAA,MACA,QAAQ;AAAA,QACJ,QAAQ;AAAA;AAAA,QAER,MAAM;AAAA,QACN,OAAO;AAAA,QACP,KAAK;AAAA,MAAA;AAAA,MAET,aAAa,YAAY,WAAW,WAAW;AAAA,IAAA;AAAA,IAC/CA,+BAAA,cAAC,kBAAkB,eAAlB,EAAgC,UAAU,OAAO;AAAA,IAClDA,+BAAA,cAAC,kBAAkB,SAAlB,EAA0B,SAASA,+BAAA,cAAC,SAAA,EAAQ,OAAO,aAAA,CAAc,EAAA,CAAI;AAAA,IACtEA,+BAAA,cAAC,kBAAkB,OAAlB,EAAyB,GAAG,aAAa,KAAK,KAAK,GAAG;AAAA,IACvDA,+BAAA,cAAC,kBAAkB,OAAlB,EAAyB,GAAG,aAAa,KAAK,KAAK,GAAG;AAAA,IACtD,OAAO,IAAI,CAAC,OAAO,UAChBA,+BAAA;AAAA,MAAC,kBAAkB;AAAA,MAAlB;AAAA,QACG,KAAK,GAAG,KAAK,IAAI,MAAM,OAAO;AAAA,QAC7B,GAAG;AAAA,QACJ,KAAK,WAAW,MAAM,MAAM;AAAA,QAC5B,aAAa;AAAA,QACb,SAAS,UAAU,UAAU;AAAA,QAC7B;AAAA,MAAA;AAAA,IAAA,CAEP;AAAA,EAAA,CAET,GACC,aACGA,+BAAA,cAAC,QAAA,EAAc,OAAc,YAAY,aAAa,SAAS,gBAAgB,UAAU,WAAA,CAAY,IACrG,IACR;AAER;AAKA,SAAS,KAA2B,GAAwD;AACxF,SAAO;AACX;AACA,UAAU,OAAO;"}

package/dist/charts/components/Bar/BarChart.cjs

@@ -69,7 +69,7 @@ const renderBars = (shapes, showLabels = false, stacked = false, isHorizontal =
   return shapes.map((shape, index) => /* @__PURE__ */ React.createElement(
     RechartsPrimitive__namespace.Bar,
     {
-      key: shape.dataKey,
+      key: `${index}-${shape.dataKey}`,
       ...shape,
       activeBar: { fillOpacity: 1, strokeWidth: 0 },
       maxBarSize: BAR_WIDTH,

package/dist/charts/components/Bar/BarChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BarChart.cjs","sources":["../../../../src/charts/components/Bar/BarChart.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as RechartsPrimitive from 'recharts';\n\nimport { getInverseThemeColor } from '@/charts/utils/color';\nimport { getAxisProps, stripCartesianProps } from '@/charts/utils/common';\n\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Legend } from '../Legend';\nimport { Tooltip } from '../Tooltip';\nimport type { ChartChildProps, CartesianChartProps } from '../types';\nimport type { ChartShape } from '../useChartData';\nimport { useChart } from '../useChartData';\n\nconst BAR_WIDTH = 18;\nexport type BarChartProps<TData extends object> = {\n    /** Orientation of the bars\n     * @default false\n     */\n    orientation?: 'horizontal' | 'vertical';\n    /** Show bar values as labels next to/inside the bar\n     * @default vertical\n     */\n    showLabels?: boolean;\n    /** Stack bars on top of one another, instead of other each other. 'expand' fills the available space\n     * @default false\n     */\n    stacked?: boolean | 'expand';\n} & CartesianChartProps<TData>;\n\nexport function BarChart<TData extends object>(props: BarChartProps<TData>) {\n    const {\n        children,\n        className: customClassName,\n        data,\n        orientation,\n        showLabels = false,\n        showLegend = false,\n        stacked = false,\n        tooltipTitle,\n        ...attributes\n    } = stripCartesianProps<TData, BarChartProps<TData>>(props);\n    const isHorizontal = orientation === 'horizontal';\n\n    const className = cn('relative aspect-video', { 'pb-8': showLegend }, customClassName);\n    const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart<TData>(children);\n\n    return (\n        <div className={className} data-taco=\"chart-wrapper\">\n            <ChartWrapper {...attributes} className=\"h-full w-full\" data-taco=\"chart-bar\">\n                <RechartsPrimitive.BarChart\n                    data={data}\n                    // style props - these are % so that they \"look okay\" for really wide charts as well as small ones\n                    barCategoryGap=\"15%\"\n                    barGap=\"7.5%\"\n                    margin={{\n                        bottom: 0,\n                        left: 0,\n                        right: 0,\n                        // ensures labels on top of bars don't get cropped\n                        top: isHorizontal ? 0 : 10,\n                    }}\n                    layout={isHorizontal ? 'vertical' : undefined}\n                    stackOffset={stacked === 'expand' ? 'expand' : undefined}>\n                    <RechartsPrimitive.CartesianGrid horizontal={!isHorizontal} vertical={false} />\n                    <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n                    <RechartsPrimitive.XAxis {...getAxisProps('x', props, isHorizontal)} />\n                    <RechartsPrimitive.YAxis {...getAxisProps('y', props, isHorizontal)} />\n                    {renderBars(shapes, showLabels, stacked, isHorizontal)}\n                </RechartsPrimitive.BarChart>\n            </ChartWrapper>\n            {showLegend ? (\n                <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n            ) : null}\n        </div>\n    );\n}\n/**\n * Helper function to render bar shapes as Recharts Bar primitives. Extracted to be reusable across BarChart and ComposedChart.\n */\nexport const renderBars = (\n    shapes: ChartShape[],\n    showLabels: boolean = false,\n    stacked: boolean | 'expand' = false,\n    isHorizontal: boolean = false\n) => {\n    return shapes.map((shape, index) => (\n        <RechartsPrimitive.Bar\n            key={shape.dataKey}\n            {...shape}\n            activeBar={{ fillOpacity: 1, strokeWidth: 0 }}\n            maxBarSize={BAR_WIDTH}\n            radius={getRadius(index, shapes.length, !!stacked, isHorizontal)}\n            stackId={stacked ? 'stack' : undefined}\n            strokeWidth={0}>\n            {showLabels ? (\n                <RechartsPrimitive.LabelList\n                    position={isHorizontal ? 'insideRight' : 'top'}\n                    // LabelList's LabelFormatter (single arg, non-JSX return) is incompatible with the\n                    // series Formatter stored on the shape; the runtime label value is always numeric\n                    formatter={shape.formatter as React.ComponentProps<typeof RechartsPrimitive.LabelList>['formatter']}\n                    offset={6}\n                    fill={isHorizontal ? getInverseThemeColor(shape.color ?? '') : 'black'}\n                    fontSize={11}\n                />\n            ) : null}\n        </RechartsPrimitive.Bar>\n    ));\n};\n\nfunction getRadius(\n    index: number,\n    length: number,\n    stacked: boolean,\n    isHorizontal: boolean\n): number | [number, number, number, number] {\n    if (stacked) {\n        if (index === 0) {\n            return isHorizontal ? [3, 0, 0, 3] : [0, 0, 3, 3];\n        }\n\n        if (index === length - 1) {\n            return isHorizontal ? [0, 3, 3, 0] : [3, 3, 0, 0];\n        }\n\n        return 0;\n    }\n\n    return 3;\n}\n\n// oxlint-disable-next-line no-empty-object-type\nexport type BarChartBarProps<TData extends object> = ChartChildProps<TData>;\n\nfunction Bar<TData extends object>(_: BarChartBarProps<TData>): React.JSX.Element | null {\n    return null;\n}\nBarChart.Bar = Bar;\n"],"names":["stripCartesianProps","useChart","ChartWrapper","RechartsPrimitive","Tooltip","getAxisProps","Legend","getInverseThemeColor"],"mappings":"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"}
+{"version":3,"file":"BarChart.cjs","sources":["../../../../src/charts/components/Bar/BarChart.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as RechartsPrimitive from 'recharts';\n\nimport { getInverseThemeColor } from '@/charts/utils/color';\nimport { getAxisProps, stripCartesianProps } from '@/charts/utils/common';\n\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Legend } from '../Legend';\nimport { Tooltip } from '../Tooltip';\nimport type { ChartChildProps, CartesianChartProps } from '../types';\nimport type { ChartShape } from '../useChartData';\nimport { useChart } from '../useChartData';\n\nconst BAR_WIDTH = 18;\nexport type BarChartProps<TData extends object> = {\n    /** Orientation of the bars\n     * @default false\n     */\n    orientation?: 'horizontal' | 'vertical';\n    /** Show bar values as labels next to/inside the bar\n     * @default vertical\n     */\n    showLabels?: boolean;\n    /** Stack bars on top of one another, instead of other each other. 'expand' fills the available space\n     * @default false\n     */\n    stacked?: boolean | 'expand';\n} & CartesianChartProps<TData>;\n\nexport function BarChart<TData extends object>(props: BarChartProps<TData>) {\n    const {\n        children,\n        className: customClassName,\n        data,\n        orientation,\n        showLabels = false,\n        showLegend = false,\n        stacked = false,\n        tooltipTitle,\n        ...attributes\n    } = stripCartesianProps<TData, BarChartProps<TData>>(props);\n    const isHorizontal = orientation === 'horizontal';\n\n    const className = cn('relative aspect-video', { 'pb-8': showLegend }, customClassName);\n    const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart<TData>(children);\n\n    return (\n        <div className={className} data-taco=\"chart-wrapper\">\n            <ChartWrapper {...attributes} className=\"h-full w-full\" data-taco=\"chart-bar\">\n                <RechartsPrimitive.BarChart\n                    data={data}\n                    // style props - these are % so that they \"look okay\" for really wide charts as well as small ones\n                    barCategoryGap=\"15%\"\n                    barGap=\"7.5%\"\n                    margin={{\n                        bottom: 0,\n                        left: 0,\n                        right: 0,\n                        // ensures labels on top of bars don't get cropped\n                        top: isHorizontal ? 0 : 10,\n                    }}\n                    layout={isHorizontal ? 'vertical' : undefined}\n                    stackOffset={stacked === 'expand' ? 'expand' : undefined}>\n                    <RechartsPrimitive.CartesianGrid horizontal={!isHorizontal} vertical={false} />\n                    <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n                    <RechartsPrimitive.XAxis {...getAxisProps('x', props, isHorizontal)} />\n                    <RechartsPrimitive.YAxis {...getAxisProps('y', props, isHorizontal)} />\n                    {renderBars(shapes, showLabels, stacked, isHorizontal)}\n                </RechartsPrimitive.BarChart>\n            </ChartWrapper>\n            {showLegend ? (\n                <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n            ) : null}\n        </div>\n    );\n}\n/**\n * Helper function to render bar shapes as Recharts Bar primitives. Extracted to be reusable across BarChart and ComposedChart.\n */\nexport const renderBars = (\n    shapes: ChartShape[],\n    showLabels: boolean = false,\n    stacked: boolean | 'expand' = false,\n    isHorizontal: boolean = false\n) => {\n    return shapes.map((shape, index) => (\n        <RechartsPrimitive.Bar\n            key={`${index}-${shape.dataKey}`}\n            {...shape}\n            activeBar={{ fillOpacity: 1, strokeWidth: 0 }}\n            maxBarSize={BAR_WIDTH}\n            radius={getRadius(index, shapes.length, !!stacked, isHorizontal)}\n            stackId={stacked ? 'stack' : undefined}\n            strokeWidth={0}>\n            {showLabels ? (\n                <RechartsPrimitive.LabelList\n                    position={isHorizontal ? 'insideRight' : 'top'}\n                    // LabelList's LabelFormatter (single arg, non-JSX return) is incompatible with the\n                    // series Formatter stored on the shape; the runtime label value is always numeric\n                    formatter={shape.formatter as React.ComponentProps<typeof RechartsPrimitive.LabelList>['formatter']}\n                    offset={6}\n                    fill={isHorizontal ? getInverseThemeColor(shape.color ?? '') : 'black'}\n                    fontSize={11}\n                />\n            ) : null}\n        </RechartsPrimitive.Bar>\n    ));\n};\n\nfunction getRadius(\n    index: number,\n    length: number,\n    stacked: boolean,\n    isHorizontal: boolean\n): number | [number, number, number, number] {\n    if (stacked) {\n        if (index === 0) {\n            return isHorizontal ? [3, 0, 0, 3] : [0, 0, 3, 3];\n        }\n\n        if (index === length - 1) {\n            return isHorizontal ? [0, 3, 3, 0] : [3, 3, 0, 0];\n        }\n\n        return 0;\n    }\n\n    return 3;\n}\n\n// oxlint-disable-next-line no-empty-object-type\nexport type BarChartBarProps<TData extends object> = ChartChildProps<TData>;\n\nfunction Bar<TData extends object>(_: BarChartBarProps<TData>): React.JSX.Element | null {\n    return null;\n}\nBarChart.Bar = Bar;\n"],"names":["stripCartesianProps","useChart","ChartWrapper","RechartsPrimitive","Tooltip","getAxisProps","Legend","getInverseThemeColor"],"mappings":"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"}

package/dist/charts/components/Bar/BarChart.js

@@ -50,7 +50,7 @@ const renderBars = (shapes, showLabels = false, stacked = false, isHorizontal =
   return shapes.map((shape, index) => /* @__PURE__ */ React__default.createElement(
     RechartsPrimitive.Bar,
     {
-      key: shape.dataKey,
+      key: `${index}-${shape.dataKey}`,
       ...shape,
       activeBar: { fillOpacity: 1, strokeWidth: 0 },
       maxBarSize: BAR_WIDTH,

package/dist/charts/components/Bar/BarChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"BarChart.js","sources":["../../../../src/charts/components/Bar/BarChart.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as RechartsPrimitive from 'recharts';\n\nimport { getInverseThemeColor } from '@/charts/utils/color';\nimport { getAxisProps, stripCartesianProps } from '@/charts/utils/common';\n\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Legend } from '../Legend';\nimport { Tooltip } from '../Tooltip';\nimport type { ChartChildProps, CartesianChartProps } from '../types';\nimport type { ChartShape } from '../useChartData';\nimport { useChart } from '../useChartData';\n\nconst BAR_WIDTH = 18;\nexport type BarChartProps<TData extends object> = {\n    /** Orientation of the bars\n     * @default false\n     */\n    orientation?: 'horizontal' | 'vertical';\n    /** Show bar values as labels next to/inside the bar\n     * @default vertical\n     */\n    showLabels?: boolean;\n    /** Stack bars on top of one another, instead of other each other. 'expand' fills the available space\n     * @default false\n     */\n    stacked?: boolean | 'expand';\n} & CartesianChartProps<TData>;\n\nexport function BarChart<TData extends object>(props: BarChartProps<TData>) {\n    const {\n        children,\n        className: customClassName,\n        data,\n        orientation,\n        showLabels = false,\n        showLegend = false,\n        stacked = false,\n        tooltipTitle,\n        ...attributes\n    } = stripCartesianProps<TData, BarChartProps<TData>>(props);\n    const isHorizontal = orientation === 'horizontal';\n\n    const className = cn('relative aspect-video', { 'pb-8': showLegend }, customClassName);\n    const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart<TData>(children);\n\n    return (\n        <div className={className} data-taco=\"chart-wrapper\">\n            <ChartWrapper {...attributes} className=\"h-full w-full\" data-taco=\"chart-bar\">\n                <RechartsPrimitive.BarChart\n                    data={data}\n                    // style props - these are % so that they \"look okay\" for really wide charts as well as small ones\n                    barCategoryGap=\"15%\"\n                    barGap=\"7.5%\"\n                    margin={{\n                        bottom: 0,\n                        left: 0,\n                        right: 0,\n                        // ensures labels on top of bars don't get cropped\n                        top: isHorizontal ? 0 : 10,\n                    }}\n                    layout={isHorizontal ? 'vertical' : undefined}\n                    stackOffset={stacked === 'expand' ? 'expand' : undefined}>\n                    <RechartsPrimitive.CartesianGrid horizontal={!isHorizontal} vertical={false} />\n                    <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n                    <RechartsPrimitive.XAxis {...getAxisProps('x', props, isHorizontal)} />\n                    <RechartsPrimitive.YAxis {...getAxisProps('y', props, isHorizontal)} />\n                    {renderBars(shapes, showLabels, stacked, isHorizontal)}\n                </RechartsPrimitive.BarChart>\n            </ChartWrapper>\n            {showLegend ? (\n                <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n            ) : null}\n        </div>\n    );\n}\n/**\n * Helper function to render bar shapes as Recharts Bar primitives. Extracted to be reusable across BarChart and ComposedChart.\n */\nexport const renderBars = (\n    shapes: ChartShape[],\n    showLabels: boolean = false,\n    stacked: boolean | 'expand' = false,\n    isHorizontal: boolean = false\n) => {\n    return shapes.map((shape, index) => (\n        <RechartsPrimitive.Bar\n            key={shape.dataKey}\n            {...shape}\n            activeBar={{ fillOpacity: 1, strokeWidth: 0 }}\n            maxBarSize={BAR_WIDTH}\n            radius={getRadius(index, shapes.length, !!stacked, isHorizontal)}\n            stackId={stacked ? 'stack' : undefined}\n            strokeWidth={0}>\n            {showLabels ? (\n                <RechartsPrimitive.LabelList\n                    position={isHorizontal ? 'insideRight' : 'top'}\n                    // LabelList's LabelFormatter (single arg, non-JSX return) is incompatible with the\n                    // series Formatter stored on the shape; the runtime label value is always numeric\n                    formatter={shape.formatter as React.ComponentProps<typeof RechartsPrimitive.LabelList>['formatter']}\n                    offset={6}\n                    fill={isHorizontal ? getInverseThemeColor(shape.color ?? '') : 'black'}\n                    fontSize={11}\n                />\n            ) : null}\n        </RechartsPrimitive.Bar>\n    ));\n};\n\nfunction getRadius(\n    index: number,\n    length: number,\n    stacked: boolean,\n    isHorizontal: boolean\n): number | [number, number, number, number] {\n    if (stacked) {\n        if (index === 0) {\n            return isHorizontal ? [3, 0, 0, 3] : [0, 0, 3, 3];\n        }\n\n        if (index === length - 1) {\n            return isHorizontal ? [0, 3, 3, 0] : [3, 3, 0, 0];\n        }\n\n        return 0;\n    }\n\n    return 3;\n}\n\n// oxlint-disable-next-line no-empty-object-type\nexport type BarChartBarProps<TData extends object> = ChartChildProps<TData>;\n\nfunction Bar<TData extends object>(_: BarChartBarProps<TData>): React.JSX.Element | null {\n    return null;\n}\nBarChart.Bar = Bar;\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"BarChart.js","sources":["../../../../src/charts/components/Bar/BarChart.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as RechartsPrimitive from 'recharts';\n\nimport { getInverseThemeColor } from '@/charts/utils/color';\nimport { getAxisProps, stripCartesianProps } from '@/charts/utils/common';\n\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Legend } from '../Legend';\nimport { Tooltip } from '../Tooltip';\nimport type { ChartChildProps, CartesianChartProps } from '../types';\nimport type { ChartShape } from '../useChartData';\nimport { useChart } from '../useChartData';\n\nconst BAR_WIDTH = 18;\nexport type BarChartProps<TData extends object> = {\n    /** Orientation of the bars\n     * @default false\n     */\n    orientation?: 'horizontal' | 'vertical';\n    /** Show bar values as labels next to/inside the bar\n     * @default vertical\n     */\n    showLabels?: boolean;\n    /** Stack bars on top of one another, instead of other each other. 'expand' fills the available space\n     * @default false\n     */\n    stacked?: boolean | 'expand';\n} & CartesianChartProps<TData>;\n\nexport function BarChart<TData extends object>(props: BarChartProps<TData>) {\n    const {\n        children,\n        className: customClassName,\n        data,\n        orientation,\n        showLabels = false,\n        showLegend = false,\n        stacked = false,\n        tooltipTitle,\n        ...attributes\n    } = stripCartesianProps<TData, BarChartProps<TData>>(props);\n    const isHorizontal = orientation === 'horizontal';\n\n    const className = cn('relative aspect-video', { 'pb-8': showLegend }, customClassName);\n    const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart<TData>(children);\n\n    return (\n        <div className={className} data-taco=\"chart-wrapper\">\n            <ChartWrapper {...attributes} className=\"h-full w-full\" data-taco=\"chart-bar\">\n                <RechartsPrimitive.BarChart\n                    data={data}\n                    // style props - these are % so that they \"look okay\" for really wide charts as well as small ones\n                    barCategoryGap=\"15%\"\n                    barGap=\"7.5%\"\n                    margin={{\n                        bottom: 0,\n                        left: 0,\n                        right: 0,\n                        // ensures labels on top of bars don't get cropped\n                        top: isHorizontal ? 0 : 10,\n                    }}\n                    layout={isHorizontal ? 'vertical' : undefined}\n                    stackOffset={stacked === 'expand' ? 'expand' : undefined}>\n                    <RechartsPrimitive.CartesianGrid horizontal={!isHorizontal} vertical={false} />\n                    <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n                    <RechartsPrimitive.XAxis {...getAxisProps('x', props, isHorizontal)} />\n                    <RechartsPrimitive.YAxis {...getAxisProps('y', props, isHorizontal)} />\n                    {renderBars(shapes, showLabels, stacked, isHorizontal)}\n                </RechartsPrimitive.BarChart>\n            </ChartWrapper>\n            {showLegend ? (\n                <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n            ) : null}\n        </div>\n    );\n}\n/**\n * Helper function to render bar shapes as Recharts Bar primitives. Extracted to be reusable across BarChart and ComposedChart.\n */\nexport const renderBars = (\n    shapes: ChartShape[],\n    showLabels: boolean = false,\n    stacked: boolean | 'expand' = false,\n    isHorizontal: boolean = false\n) => {\n    return shapes.map((shape, index) => (\n        <RechartsPrimitive.Bar\n            key={`${index}-${shape.dataKey}`}\n            {...shape}\n            activeBar={{ fillOpacity: 1, strokeWidth: 0 }}\n            maxBarSize={BAR_WIDTH}\n            radius={getRadius(index, shapes.length, !!stacked, isHorizontal)}\n            stackId={stacked ? 'stack' : undefined}\n            strokeWidth={0}>\n            {showLabels ? (\n                <RechartsPrimitive.LabelList\n                    position={isHorizontal ? 'insideRight' : 'top'}\n                    // LabelList's LabelFormatter (single arg, non-JSX return) is incompatible with the\n                    // series Formatter stored on the shape; the runtime label value is always numeric\n                    formatter={shape.formatter as React.ComponentProps<typeof RechartsPrimitive.LabelList>['formatter']}\n                    offset={6}\n                    fill={isHorizontal ? getInverseThemeColor(shape.color ?? '') : 'black'}\n                    fontSize={11}\n                />\n            ) : null}\n        </RechartsPrimitive.Bar>\n    ));\n};\n\nfunction getRadius(\n    index: number,\n    length: number,\n    stacked: boolean,\n    isHorizontal: boolean\n): number | [number, number, number, number] {\n    if (stacked) {\n        if (index === 0) {\n            return isHorizontal ? [3, 0, 0, 3] : [0, 0, 3, 3];\n        }\n\n        if (index === length - 1) {\n            return isHorizontal ? [0, 3, 3, 0] : [3, 3, 0, 0];\n        }\n\n        return 0;\n    }\n\n    return 3;\n}\n\n// oxlint-disable-next-line no-empty-object-type\nexport type BarChartBarProps<TData extends object> = ChartChildProps<TData>;\n\nfunction Bar<TData extends object>(_: BarChartBarProps<TData>): React.JSX.Element | null {\n    return null;\n}\nBarChart.Bar = Bar;\n"],"names":["React"],"mappings":"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"}

package/dist/charts/components/Line/LineChart.cjs

@@ -58,7 +58,7 @@ function LineChart(props) {
   )), showLegend ? /* @__PURE__ */ React.createElement(Legend.Legend, { items, hoverIndex: activeIndex, onHover: setActiveIndex, onToggle: toggleItem }) : null);
 }
 const renderLines = (shapes, showDots = false, type = "natural") => {
-  return shapes.map((shape) => /* @__PURE__ */ React.createElement(RechartsPrimitive__namespace.Line, { key: shape.dataKey, ...shape, dot: showDots ? shape.dot : false, type }));
+  return shapes.map((shape, index) => /* @__PURE__ */ React.createElement(RechartsPrimitive__namespace.Line, { key: `${index}-${shape.dataKey}`, ...shape, dot: showDots ? shape.dot : false, type }));
 };
 function Line(_) {
   return null;

package/dist/charts/components/Line/LineChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.cjs","sources":["../../../../src/charts/components/Line/LineChart.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as RechartsPrimitive from 'recharts';\n\nimport { getAxisProps, stripCartesianProps } from '@/charts/utils/common';\n\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Legend } from '../Legend';\nimport { Tooltip } from '../Tooltip';\nimport type { ChartChildProps, CartesianChartProps, CurveType } from '../types';\nimport { type ChartShape, useChart } from '../useChartData';\n\nexport type LineChartProps<TData extends object> = {\n    /** Show dots for each data point\n     * @default false\n     */\n    showDots?: boolean;\n    /** Interpolation type of the line\n     * @default natural\n     */\n    type?: CurveType;\n} & CartesianChartProps<TData>;\n\nexport function LineChart<TData extends object>(props: LineChartProps<TData>) {\n    const {\n        children,\n        className: customClassName,\n        data,\n        showLegend = false,\n        showDots = false,\n        tooltipTitle,\n        type = 'natural',\n        ...attributes\n    } = stripCartesianProps<TData, LineChartProps<TData>>(props);\n\n    const className = cn('relative aspect-video', { 'pb-8': showLegend }, customClassName);\n    const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart<TData>(children);\n\n    return (\n        <div className={className} data-taco=\"chart-wrapper\">\n            <ChartWrapper {...attributes} className=\"h-full w-full\" data-taco=\"chart-line\">\n                <RechartsPrimitive.LineChart\n                    data={data}\n                    margin={{\n                        bottom: 0,\n                        // ensures dots on the edges of the chart don't get cropped\n                        left: 4,\n                        right: 4,\n                        top: 4,\n                    }}>\n                    <RechartsPrimitive.CartesianGrid vertical={false} />\n                    <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n                    <RechartsPrimitive.XAxis {...getAxisProps('x', props)} />\n                    <RechartsPrimitive.YAxis {...getAxisProps('y', props)} />\n                    {renderLines(shapes, showDots, type)}\n                </RechartsPrimitive.LineChart>\n            </ChartWrapper>\n            {showLegend ? (\n                <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n            ) : null}\n        </div>\n    );\n}\n\n/**\n * Helper function to render line shapes as Recharts Line primitives. Extracted to be reusable across LineChart and ComposedChart.\n */\nexport const renderLines = (shapes: ChartShape[], showDots: boolean = false, type: CurveType = 'natural') => {\n    return shapes.map(shape => (\n        <RechartsPrimitive.Line key={shape.dataKey} {...shape} dot={showDots ? shape.dot : false} type={type} />\n    ));\n};\n\n// oxlint-disable-next-line no-empty-object-type\nexport type LineChartAreaProps<TData extends object> = ChartChildProps<TData>;\n\nfunction Line<TData extends object>(_: LineChartAreaProps<TData>): React.JSX.Element | null {\n    return null;\n}\nLineChart.Line = Line;\n"],"names":["stripCartesianProps","useChart","ChartWrapper","RechartsPrimitive","Tooltip","getAxisProps","Legend"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBO,SAAS,UAAgC,OAA8B;AAC1E,QAAM;AAAA,IACF;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,aAAa;AAAA,IACb,WAAW;AAAA,IACX;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACHA,OAAAA,oBAAkD,KAAK;AAE3D,QAAM,YAAY,GAAG,yBAAyB,EAAE,QAAQ,WAAA,GAAc,eAAe;AACrF,QAAM,EAAE,OAAO,QAAQ,aAAa,gBAAgB,WAAA,IAAeC,aAAAA,SAAgB,QAAQ;AAE3F,SACI,sBAAA,cAAC,OAAA,EAAI,WAAsB,aAAU,gBAAA,GACjC,sBAAA,cAACC,aAAAA,cAAA,EAAc,GAAG,YAAY,WAAU,iBAAgB,aAAU,aAAA,GAC9D,sBAAA;AAAA,IAACC,6BAAkB;AAAA,IAAlB;AAAA,MACG;AAAA,MACA,QAAQ;AAAA,QACJ,QAAQ;AAAA;AAAA,QAER,MAAM;AAAA,QACN,OAAO;AAAA,QACP,KAAK;AAAA,MAAA;AAAA,IACT;AAAA,IACA,sBAAA,cAACA,6BAAkB,eAAlB,EAAgC,UAAU,OAAO;AAAA,IAClD,sBAAA,cAACA,6BAAkB,SAAlB,EAA0B,SAAS,sBAAA,cAACC,QAAAA,SAAA,EAAQ,OAAO,aAAA,CAAc,EAAA,CAAI;AAAA,IACtE,sBAAA,cAACD,6BAAkB,OAAlB,EAAyB,GAAGE,oBAAa,KAAK,KAAK,GAAG;AAAA,IACvD,sBAAA,cAACF,6BAAkB,OAAlB,EAAyB,GAAGE,oBAAa,KAAK,KAAK,GAAG;AAAA,IACtD,YAAY,QAAQ,UAAU,IAAI;AAAA,EAAA,CAE3C,GACC,aACG,sBAAA,cAACC,OAAAA,QAAA,EAAc,OAAc,YAAY,aAAa,SAAS,gBAAgB,UAAU,WAAA,CAAY,IACrG,IACR;AAER;AAKO,MAAM,cAAc,CAAC,QAAsB,WAAoB,OAAO,OAAkB,cAAc;AACzG,SAAO,OAAO,IAAI,CAAA,8CACbH,6BAAkB,MAAlB,EAAuB,KAAK,MAAM,SAAU,GAAG,OAAO,KAAK,WAAW,MAAM,MAAM,OAAO,MAAY,CACzG;AACL;AAKA,SAAS,KAA2B,GAAwD;AACxF,SAAO;AACX;AACA,UAAU,OAAO;;;"}
+{"version":3,"file":"LineChart.cjs","sources":["../../../../src/charts/components/Line/LineChart.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as RechartsPrimitive from 'recharts';\n\nimport { getAxisProps, stripCartesianProps } from '@/charts/utils/common';\n\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Legend } from '../Legend';\nimport { Tooltip } from '../Tooltip';\nimport type { ChartChildProps, CartesianChartProps, CurveType } from '../types';\nimport { type ChartShape, useChart } from '../useChartData';\n\nexport type LineChartProps<TData extends object> = {\n    /** Show dots for each data point\n     * @default false\n     */\n    showDots?: boolean;\n    /** Interpolation type of the line\n     * @default natural\n     */\n    type?: CurveType;\n} & CartesianChartProps<TData>;\n\nexport function LineChart<TData extends object>(props: LineChartProps<TData>) {\n    const {\n        children,\n        className: customClassName,\n        data,\n        showLegend = false,\n        showDots = false,\n        tooltipTitle,\n        type = 'natural',\n        ...attributes\n    } = stripCartesianProps<TData, LineChartProps<TData>>(props);\n\n    const className = cn('relative aspect-video', { 'pb-8': showLegend }, customClassName);\n    const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart<TData>(children);\n\n    return (\n        <div className={className} data-taco=\"chart-wrapper\">\n            <ChartWrapper {...attributes} className=\"h-full w-full\" data-taco=\"chart-line\">\n                <RechartsPrimitive.LineChart\n                    data={data}\n                    margin={{\n                        bottom: 0,\n                        // ensures dots on the edges of the chart don't get cropped\n                        left: 4,\n                        right: 4,\n                        top: 4,\n                    }}>\n                    <RechartsPrimitive.CartesianGrid vertical={false} />\n                    <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n                    <RechartsPrimitive.XAxis {...getAxisProps('x', props)} />\n                    <RechartsPrimitive.YAxis {...getAxisProps('y', props)} />\n                    {renderLines(shapes, showDots, type)}\n                </RechartsPrimitive.LineChart>\n            </ChartWrapper>\n            {showLegend ? (\n                <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n            ) : null}\n        </div>\n    );\n}\n\n/**\n * Helper function to render line shapes as Recharts Line primitives. Extracted to be reusable across LineChart and ComposedChart.\n */\nexport const renderLines = (shapes: ChartShape[], showDots: boolean = false, type: CurveType = 'natural') => {\n    return shapes.map((shape, index) => (\n        <RechartsPrimitive.Line key={`${index}-${shape.dataKey}`} {...shape} dot={showDots ? shape.dot : false} type={type} />\n    ));\n};\n\n// oxlint-disable-next-line no-empty-object-type\nexport type LineChartAreaProps<TData extends object> = ChartChildProps<TData>;\n\nfunction Line<TData extends object>(_: LineChartAreaProps<TData>): React.JSX.Element | null {\n    return null;\n}\nLineChart.Line = Line;\n"],"names":["stripCartesianProps","useChart","ChartWrapper","RechartsPrimitive","Tooltip","getAxisProps","Legend"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBO,SAAS,UAAgC,OAA8B;AAC1E,QAAM;AAAA,IACF;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,aAAa;AAAA,IACb,WAAW;AAAA,IACX;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACHA,OAAAA,oBAAkD,KAAK;AAE3D,QAAM,YAAY,GAAG,yBAAyB,EAAE,QAAQ,WAAA,GAAc,eAAe;AACrF,QAAM,EAAE,OAAO,QAAQ,aAAa,gBAAgB,WAAA,IAAeC,aAAAA,SAAgB,QAAQ;AAE3F,SACI,sBAAA,cAAC,OAAA,EAAI,WAAsB,aAAU,gBAAA,GACjC,sBAAA,cAACC,aAAAA,cAAA,EAAc,GAAG,YAAY,WAAU,iBAAgB,aAAU,aAAA,GAC9D,sBAAA;AAAA,IAACC,6BAAkB;AAAA,IAAlB;AAAA,MACG;AAAA,MACA,QAAQ;AAAA,QACJ,QAAQ;AAAA;AAAA,QAER,MAAM;AAAA,QACN,OAAO;AAAA,QACP,KAAK;AAAA,MAAA;AAAA,IACT;AAAA,IACA,sBAAA,cAACA,6BAAkB,eAAlB,EAAgC,UAAU,OAAO;AAAA,IAClD,sBAAA,cAACA,6BAAkB,SAAlB,EAA0B,SAAS,sBAAA,cAACC,QAAAA,SAAA,EAAQ,OAAO,aAAA,CAAc,EAAA,CAAI;AAAA,IACtE,sBAAA,cAACD,6BAAkB,OAAlB,EAAyB,GAAGE,oBAAa,KAAK,KAAK,GAAG;AAAA,IACvD,sBAAA,cAACF,6BAAkB,OAAlB,EAAyB,GAAGE,oBAAa,KAAK,KAAK,GAAG;AAAA,IACtD,YAAY,QAAQ,UAAU,IAAI;AAAA,EAAA,CAE3C,GACC,aACG,sBAAA,cAACC,OAAAA,QAAA,EAAc,OAAc,YAAY,aAAa,SAAS,gBAAgB,UAAU,WAAA,CAAY,IACrG,IACR;AAER;AAKO,MAAM,cAAc,CAAC,QAAsB,WAAoB,OAAO,OAAkB,cAAc;AACzG,SAAO,OAAO,IAAI,CAAC,OAAO,8CACrBH,6BAAkB,MAAlB,EAAuB,KAAK,GAAG,KAAK,IAAI,MAAM,OAAO,IAAK,GAAG,OAAO,KAAK,WAAW,MAAM,MAAM,OAAO,KAAA,CAAY,CACvH;AACL;AAKA,SAAS,KAA2B,GAAwD;AACxF,SAAO;AACX;AACA,UAAU,OAAO;;;"}

package/dist/charts/components/Line/LineChart.js

@@ -39,7 +39,7 @@ function LineChart(props) {
   )), showLegend ? /* @__PURE__ */ React__default.createElement(Legend, { items, hoverIndex: activeIndex, onHover: setActiveIndex, onToggle: toggleItem }) : null);
 }
 const renderLines = (shapes, showDots = false, type = "natural") => {
-  return shapes.map((shape) => /* @__PURE__ */ React__default.createElement(RechartsPrimitive.Line, { key: shape.dataKey, ...shape, dot: showDots ? shape.dot : false, type }));
+  return shapes.map((shape, index) => /* @__PURE__ */ React__default.createElement(RechartsPrimitive.Line, { key: `${index}-${shape.dataKey}`, ...shape, dot: showDots ? shape.dot : false, type }));
 };
 function Line(_) {
   return null;

package/dist/charts/components/Line/LineChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.js","sources":["../../../../src/charts/components/Line/LineChart.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as RechartsPrimitive from 'recharts';\n\nimport { getAxisProps, stripCartesianProps } from '@/charts/utils/common';\n\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Legend } from '../Legend';\nimport { Tooltip } from '../Tooltip';\nimport type { ChartChildProps, CartesianChartProps, CurveType } from '../types';\nimport { type ChartShape, useChart } from '../useChartData';\n\nexport type LineChartProps<TData extends object> = {\n    /** Show dots for each data point\n     * @default false\n     */\n    showDots?: boolean;\n    /** Interpolation type of the line\n     * @default natural\n     */\n    type?: CurveType;\n} & CartesianChartProps<TData>;\n\nexport function LineChart<TData extends object>(props: LineChartProps<TData>) {\n    const {\n        children,\n        className: customClassName,\n        data,\n        showLegend = false,\n        showDots = false,\n        tooltipTitle,\n        type = 'natural',\n        ...attributes\n    } = stripCartesianProps<TData, LineChartProps<TData>>(props);\n\n    const className = cn('relative aspect-video', { 'pb-8': showLegend }, customClassName);\n    const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart<TData>(children);\n\n    return (\n        <div className={className} data-taco=\"chart-wrapper\">\n            <ChartWrapper {...attributes} className=\"h-full w-full\" data-taco=\"chart-line\">\n                <RechartsPrimitive.LineChart\n                    data={data}\n                    margin={{\n                        bottom: 0,\n                        // ensures dots on the edges of the chart don't get cropped\n                        left: 4,\n                        right: 4,\n                        top: 4,\n                    }}>\n                    <RechartsPrimitive.CartesianGrid vertical={false} />\n                    <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n                    <RechartsPrimitive.XAxis {...getAxisProps('x', props)} />\n                    <RechartsPrimitive.YAxis {...getAxisProps('y', props)} />\n                    {renderLines(shapes, showDots, type)}\n                </RechartsPrimitive.LineChart>\n            </ChartWrapper>\n            {showLegend ? (\n                <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n            ) : null}\n        </div>\n    );\n}\n\n/**\n * Helper function to render line shapes as Recharts Line primitives. Extracted to be reusable across LineChart and ComposedChart.\n */\nexport const renderLines = (shapes: ChartShape[], showDots: boolean = false, type: CurveType = 'natural') => {\n    return shapes.map(shape => (\n        <RechartsPrimitive.Line key={shape.dataKey} {...shape} dot={showDots ? shape.dot : false} type={type} />\n    ));\n};\n\n// oxlint-disable-next-line no-empty-object-type\nexport type LineChartAreaProps<TData extends object> = ChartChildProps<TData>;\n\nfunction Line<TData extends object>(_: LineChartAreaProps<TData>): React.JSX.Element | null {\n    return null;\n}\nLineChart.Line = Line;\n"],"names":["React"],"mappings":";;;;;;;;AAuBO,SAAS,UAAgC,OAA8B;AAC1E,QAAM;AAAA,IACF;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,aAAa;AAAA,IACb,WAAW;AAAA,IACX;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACH,oBAAkD,KAAK;AAE3D,QAAM,YAAY,GAAG,yBAAyB,EAAE,QAAQ,WAAA,GAAc,eAAe;AACrF,QAAM,EAAE,OAAO,QAAQ,aAAa,gBAAgB,WAAA,IAAe,SAAgB,QAAQ;AAE3F,SACIA,+BAAA,cAAC,OAAA,EAAI,WAAsB,aAAU,gBAAA,GACjCA,+BAAA,cAAC,cAAA,EAAc,GAAG,YAAY,WAAU,iBAAgB,aAAU,aAAA,GAC9DA,+BAAA;AAAA,IAAC,kBAAkB;AAAA,IAAlB;AAAA,MACG;AAAA,MACA,QAAQ;AAAA,QACJ,QAAQ;AAAA;AAAA,QAER,MAAM;AAAA,QACN,OAAO;AAAA,QACP,KAAK;AAAA,MAAA;AAAA,IACT;AAAA,IACAA,+BAAA,cAAC,kBAAkB,eAAlB,EAAgC,UAAU,OAAO;AAAA,IAClDA,+BAAA,cAAC,kBAAkB,SAAlB,EAA0B,SAASA,+BAAA,cAAC,SAAA,EAAQ,OAAO,aAAA,CAAc,EAAA,CAAI;AAAA,IACtEA,+BAAA,cAAC,kBAAkB,OAAlB,EAAyB,GAAG,aAAa,KAAK,KAAK,GAAG;AAAA,IACvDA,+BAAA,cAAC,kBAAkB,OAAlB,EAAyB,GAAG,aAAa,KAAK,KAAK,GAAG;AAAA,IACtD,YAAY,QAAQ,UAAU,IAAI;AAAA,EAAA,CAE3C,GACC,aACGA,+BAAA,cAAC,QAAA,EAAc,OAAc,YAAY,aAAa,SAAS,gBAAgB,UAAU,WAAA,CAAY,IACrG,IACR;AAER;AAKO,MAAM,cAAc,CAAC,QAAsB,WAAoB,OAAO,OAAkB,cAAc;AACzG,SAAO,OAAO,IAAI,CAAA,uDACb,kBAAkB,MAAlB,EAAuB,KAAK,MAAM,SAAU,GAAG,OAAO,KAAK,WAAW,MAAM,MAAM,OAAO,MAAY,CACzG;AACL;AAKA,SAAS,KAA2B,GAAwD;AACxF,SAAO;AACX;AACA,UAAU,OAAO;"}
+{"version":3,"file":"LineChart.js","sources":["../../../../src/charts/components/Line/LineChart.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as RechartsPrimitive from 'recharts';\n\nimport { getAxisProps, stripCartesianProps } from '@/charts/utils/common';\n\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Legend } from '../Legend';\nimport { Tooltip } from '../Tooltip';\nimport type { ChartChildProps, CartesianChartProps, CurveType } from '../types';\nimport { type ChartShape, useChart } from '../useChartData';\n\nexport type LineChartProps<TData extends object> = {\n    /** Show dots for each data point\n     * @default false\n     */\n    showDots?: boolean;\n    /** Interpolation type of the line\n     * @default natural\n     */\n    type?: CurveType;\n} & CartesianChartProps<TData>;\n\nexport function LineChart<TData extends object>(props: LineChartProps<TData>) {\n    const {\n        children,\n        className: customClassName,\n        data,\n        showLegend = false,\n        showDots = false,\n        tooltipTitle,\n        type = 'natural',\n        ...attributes\n    } = stripCartesianProps<TData, LineChartProps<TData>>(props);\n\n    const className = cn('relative aspect-video', { 'pb-8': showLegend }, customClassName);\n    const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart<TData>(children);\n\n    return (\n        <div className={className} data-taco=\"chart-wrapper\">\n            <ChartWrapper {...attributes} className=\"h-full w-full\" data-taco=\"chart-line\">\n                <RechartsPrimitive.LineChart\n                    data={data}\n                    margin={{\n                        bottom: 0,\n                        // ensures dots on the edges of the chart don't get cropped\n                        left: 4,\n                        right: 4,\n                        top: 4,\n                    }}>\n                    <RechartsPrimitive.CartesianGrid vertical={false} />\n                    <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n                    <RechartsPrimitive.XAxis {...getAxisProps('x', props)} />\n                    <RechartsPrimitive.YAxis {...getAxisProps('y', props)} />\n                    {renderLines(shapes, showDots, type)}\n                </RechartsPrimitive.LineChart>\n            </ChartWrapper>\n            {showLegend ? (\n                <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n            ) : null}\n        </div>\n    );\n}\n\n/**\n * Helper function to render line shapes as Recharts Line primitives. Extracted to be reusable across LineChart and ComposedChart.\n */\nexport const renderLines = (shapes: ChartShape[], showDots: boolean = false, type: CurveType = 'natural') => {\n    return shapes.map((shape, index) => (\n        <RechartsPrimitive.Line key={`${index}-${shape.dataKey}`} {...shape} dot={showDots ? shape.dot : false} type={type} />\n    ));\n};\n\n// oxlint-disable-next-line no-empty-object-type\nexport type LineChartAreaProps<TData extends object> = ChartChildProps<TData>;\n\nfunction Line<TData extends object>(_: LineChartAreaProps<TData>): React.JSX.Element | null {\n    return null;\n}\nLineChart.Line = Line;\n"],"names":["React"],"mappings":";;;;;;;;AAuBO,SAAS,UAAgC,OAA8B;AAC1E,QAAM;AAAA,IACF;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,aAAa;AAAA,IACb,WAAW;AAAA,IACX;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACH,oBAAkD,KAAK;AAE3D,QAAM,YAAY,GAAG,yBAAyB,EAAE,QAAQ,WAAA,GAAc,eAAe;AACrF,QAAM,EAAE,OAAO,QAAQ,aAAa,gBAAgB,WAAA,IAAe,SAAgB,QAAQ;AAE3F,SACIA,+BAAA,cAAC,OAAA,EAAI,WAAsB,aAAU,gBAAA,GACjCA,+BAAA,cAAC,cAAA,EAAc,GAAG,YAAY,WAAU,iBAAgB,aAAU,aAAA,GAC9DA,+BAAA;AAAA,IAAC,kBAAkB;AAAA,IAAlB;AAAA,MACG;AAAA,MACA,QAAQ;AAAA,QACJ,QAAQ;AAAA;AAAA,QAER,MAAM;AAAA,QACN,OAAO;AAAA,QACP,KAAK;AAAA,MAAA;AAAA,IACT;AAAA,IACAA,+BAAA,cAAC,kBAAkB,eAAlB,EAAgC,UAAU,OAAO;AAAA,IAClDA,+BAAA,cAAC,kBAAkB,SAAlB,EAA0B,SAASA,+BAAA,cAAC,SAAA,EAAQ,OAAO,aAAA,CAAc,EAAA,CAAI;AAAA,IACtEA,+BAAA,cAAC,kBAAkB,OAAlB,EAAyB,GAAG,aAAa,KAAK,KAAK,GAAG;AAAA,IACvDA,+BAAA,cAAC,kBAAkB,OAAlB,EAAyB,GAAG,aAAa,KAAK,KAAK,GAAG;AAAA,IACtD,YAAY,QAAQ,UAAU,IAAI;AAAA,EAAA,CAE3C,GACC,aACGA,+BAAA,cAAC,QAAA,EAAc,OAAc,YAAY,aAAa,SAAS,gBAAgB,UAAU,WAAA,CAAY,IACrG,IACR;AAER;AAKO,MAAM,cAAc,CAAC,QAAsB,WAAoB,OAAO,OAAkB,cAAc;AACzG,SAAO,OAAO,IAAI,CAAC,OAAO,uDACrB,kBAAkB,MAAlB,EAAuB,KAAK,GAAG,KAAK,IAAI,MAAM,OAAO,IAAK,GAAG,OAAO,KAAK,WAAW,MAAM,MAAM,OAAO,KAAA,CAAY,CACvH;AACL;AAKA,SAAS,KAA2B,GAAwD;AACxF,SAAO;AACX;AACA,UAAU,OAAO;"}

package/dist/components/Datepicker/Datepicker.cjs

@@ -3,6 +3,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const popover = require("@base-ui/react/popover");
 const cn = require("clsx");
 const React = require("react");
+const ArrowTip = require("../../primitives/ArrowTip/ArrowTip.cjs");
+const tailwind = require("../../utils/tailwind.cjs");
 const useDatepicker = require("./useDatepicker.cjs");
 const Localization = require("../Provider/Localization.cjs");
 const Input = require("../Input/Input.cjs");
@@ -25,19 +27,7 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
-const PopoverArrow = () => /* @__PURE__ */ React__namespace.createElement(popover.Popover.Arrow, { className: "data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=right]:left-[-13px] data-[side=top]:bottom-[-8px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180" }, /* @__PURE__ */ React__namespace.createElement("svg", { width: "20", height: "10", viewBox: "0 0 20 10", fill: "none" }, /* @__PURE__ */ React__namespace.createElement(
-  "path",
-  {
-    d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
-    className: "fill-[canvas]"
-  }
-), /* @__PURE__ */ React__namespace.createElement(
-  "path",
-  {
-    d: "M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z",
-    className: "fill-gray-200"
-  }
-), /* @__PURE__ */ React__namespace.createElement("path", { d: "M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z" })));
+const PopoverArrow = () => /* @__PURE__ */ React__namespace.createElement(popover.Popover.Arrow, { className: tailwind.ARROW_TIP_POSITION_WIDE }, /* @__PURE__ */ React__namespace.createElement(ArrowTip.ArrowTip, { focusFill: "fill-none", innerFill: "fill-gray-50", outerFill: "fill-[canvas]" }));
 const Datepicker = React__namespace.forwardRef(function Datepicker2(props, ref) {
   const { className: externalClassName, onReset: handleReset, style, shortcuts, shortcutsText, ...otherProps } = props;
   const { calendar, input } = useDatepicker.useDatepicker(otherProps, ref);
@@ -98,7 +88,7 @@ const Datepicker = React__namespace.forwardRef(function Datepicker2(props, ref)
           setOpen(false);
         }
       }
-    ), shortcuts && /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col border-l border-gray-100" }, /* @__PURE__ */ React__namespace.createElement("span", { className: "m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold" }, shortcutsText ?? texts.datepicker.shortcuts), /* @__PURE__ */ React__namespace.createElement("ul", null, shortcuts.map((shortcut) => /* @__PURE__ */ React__namespace.createElement("li", { key: shortcut.text }, /* @__PURE__ */ React__namespace.createElement(
+    ), shortcuts && /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col border-l border-gray-100" }, /* @__PURE__ */ React__namespace.createElement("span", { className: "m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold" }, shortcutsText ?? texts.datepicker.shortcuts), /* @__PURE__ */ React__namespace.createElement("ul", null, shortcuts.map((shortcut, index) => /* @__PURE__ */ React__namespace.createElement("li", { key: `${index}-${shortcut.text}` }, /* @__PURE__ */ React__namespace.createElement(
       "button",
       {
         type: "button",

package/dist/components/Datepicker/Datepicker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Datepicker.cjs","sources":["../../../src/components/Datepicker/Datepicker.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport type { CalendarProps, InputProps } from '@/components';\nimport { Calendar, Input, LegacyIconButton, useLocalization } from '@/components';\n\nimport { useDatepicker } from './useDatepicker';\n\nexport type DatepickerTexts = {\n    /** Aria-label for calendar */\n    calendar: string;\n    /** Clear button text */\n    clear: string;\n    /**\n     * Aria-label for calendar icon button in the input.\n     * Calendar will open when user clicks this icon button.\n     */\n    expand: string;\n    /** Shortcut heading text */\n    shortcuts: string;\n};\n\nexport type DatePickerShortcut = {\n    onClick: (event: React.MouseEvent) => void;\n    text: string;\n};\n\nexport type DatepickerProps = Omit<InputProps, 'value'> & {\n    /** [Calendar](component:calendar) component associated with the DatePicker */\n    calendar?: CalendarProps;\n    /** List of shortcuts */\n    shortcuts?: DatePickerShortcut[];\n    /** Title for the shortcuts panel */\n    shortcutsText?: string;\n    /** Handler to be called when the clear button is clicked */\n    onReset?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Date value of the calendar.\n     * This will be displayed in DatePicker's input in the format given to the [Provider](component:provider) component\n     */\n    value?: Date | string;\n};\n\nconst PopoverArrow = () => (\n    <PopoverPrimitive.Arrow className=\"data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=right]:left-[-13px] data-[side=top]:bottom-[-8px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180\">\n        <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\">\n            <path\n                d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n                className=\"fill-[canvas]\"\n            />\n            <path\n                d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n                className=\"fill-gray-200\"\n            />\n            <path d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\" />\n        </svg>\n    </PopoverPrimitive.Arrow>\n);\n\nexport const Datepicker = React.forwardRef(function Datepicker(props: DatepickerProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, onReset: handleReset, style, shortcuts, shortcutsText, ...otherProps } = props;\n    const { calendar, input } = useDatepicker(otherProps, ref);\n    const [open, setOpen] = React.useState(false);\n\n    const { texts } = useLocalization();\n    const className = cn('inline-flex w-full font-normal text-black', externalClassName);\n    const popoverContentRef = React.useRef<HTMLDivElement>(null);\n\n    const handlePopoverClick = React.useCallback((event: React.MouseEvent) => {\n        // Prevent the mouse click event from bubbling up to the parent element\n        event.stopPropagation();\n    }, []);\n\n    const handleCloseAutoFocus = () => input.ref.current;\n\n    const handleOpenAutoFocus = () => {\n        const currentDay: HTMLButtonElement | null = popoverContentRef?.current?.querySelector('td.rdp-selected button') ?? null;\n\n        return currentDay;\n    };\n\n    // Allow preventing default keyDown behaviour if consumer (in our internal case it's Table3) wants to handle it.\n    // We need to have this option for the situations, when Datepicker is used as inline edititng control in Table3,\n    // without it, datepicker cannot be set into detailed editing mode by pressing \"Enter\",\n    // because input.onKeydown is triggering 'focusout', which resets the detailed edititng mode.\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        props.onKeyDown?.(event);\n\n        if (!event.defaultPrevented) {\n            input.onKeyDown?.(event);\n        }\n    };\n\n    return (\n        <span className={className} data-taco=\"datepicker\" style={style}>\n            <PopoverPrimitive.Root modal=\"trap-focus\" open={open} onOpenChange={setOpen}>\n                <Input\n                    {...input}\n                    onKeyDown={handleInputKeyDown}\n                    button={\n                        input.readOnly ? undefined : (\n                            <PopoverPrimitive.Trigger\n                                render={\n                                    <LegacyIconButton\n                                        aria-label={texts.datepicker.expand}\n                                        data-taco=\"toggle-calendar-button\"\n                                        disabled={input.disabled || input.readOnly}\n                                        icon=\"calendar\"\n                                        tabIndex={-1}\n                                        tooltip={texts.datepicker.calendar}\n                                    />\n                                }\n                            />\n                        )\n                    }\n                />\n\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Positioner sideOffset={8}>\n                        <PopoverPrimitive.Popup\n                            initialFocus={handleOpenAutoFocus}\n                            finalFocus={handleCloseAutoFocus}\n                            className=\"group rounded border border-transparent bg-white p-3 shadow outline-none\">\n                            <PopoverArrow />\n                            <div ref={popoverContentRef} className=\"-m-3 flex\" onClick={handlePopoverClick}>\n                                <Calendar\n                                    {...calendar}\n                                    onChange={(date: Date, event?: React.MouseEvent<Element>) => {\n                                        calendar.onChange(date, event);\n                                        setOpen(false);\n                                    }}\n                                />\n                                {shortcuts && (\n                                    <div className=\"flex flex-col border-l border-gray-100\">\n                                        <span className=\"m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold\">\n                                            {shortcutsText ?? texts.datepicker.shortcuts}\n                                        </span>\n                                        <ul>\n                                            {shortcuts.map(shortcut => (\n                                                <li key={shortcut.text}>\n                                                    <button\n                                                        type=\"button\"\n                                                        className=\"flex w-full items-start px-4 py-1 text-xs hover:bg-gray-100 hover:text-black\"\n                                                        data-taco=\"datepicker-shortcut\"\n                                                        onClick={event => {\n                                                            shortcut.onClick(event);\n                                                            setOpen(false);\n                                                        }}>\n                                                        {shortcut.text}\n                                                    </button>\n                                                </li>\n                                            ))}\n                                        </ul>\n                                        {handleReset && (\n                                            <button\n                                                type=\"button\"\n                                                className=\"mx-auto my-4 mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300\"\n                                                data-taco=\"datepicker-clear-button\"\n                                                onClick={event => {\n                                                    handleReset(event);\n                                                    setOpen(false);\n                                                }}>\n                                                {texts.datepicker.clear}\n                                            </button>\n                                        )}\n                                    </div>\n                                )}\n                            </div>\n                        </PopoverPrimitive.Popup>\n                    </PopoverPrimitive.Positioner>\n                </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n        </span>\n    );\n});\nDatepicker.displayName = 'Datepicker';\n"],"names":["React","PopoverPrimitive","Datepicker","useDatepicker","useLocalization","Input","LegacyIconButton","Calendar"],"mappings":"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"}
+{"version":3,"file":"Datepicker.cjs","sources":["../../../src/components/Datepicker/Datepicker.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport type { CalendarProps, InputProps } from '@/components';\nimport { Calendar, Input, LegacyIconButton, useLocalization } from '@/components';\nimport { ArrowTip } from '@/primitives/ArrowTip/ArrowTip';\nimport { ARROW_TIP_POSITION_WIDE } from '@/utils/tailwind';\n\nimport { useDatepicker } from './useDatepicker';\n\nexport type DatepickerTexts = {\n    /** Aria-label for calendar */\n    calendar: string;\n    /** Clear button text */\n    clear: string;\n    /**\n     * Aria-label for calendar icon button in the input.\n     * Calendar will open when user clicks this icon button.\n     */\n    expand: string;\n    /** Shortcut heading text */\n    shortcuts: string;\n};\n\nexport type DatePickerShortcut = {\n    onClick: (event: React.MouseEvent) => void;\n    text: string;\n};\n\nexport type DatepickerProps = Omit<InputProps, 'value'> & {\n    /** [Calendar](component:calendar) component associated with the DatePicker */\n    calendar?: CalendarProps;\n    /** List of shortcuts */\n    shortcuts?: DatePickerShortcut[];\n    /** Title for the shortcuts panel */\n    shortcutsText?: string;\n    /** Handler to be called when the clear button is clicked */\n    onReset?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Date value of the calendar.\n     * This will be displayed in DatePicker's input in the format given to the [Provider](component:provider) component\n     */\n    value?: Date | string;\n};\n\nconst PopoverArrow = () => (\n    <PopoverPrimitive.Arrow className={ARROW_TIP_POSITION_WIDE}>\n        <ArrowTip focusFill=\"fill-none\" innerFill=\"fill-gray-50\" outerFill=\"fill-[canvas]\" />\n    </PopoverPrimitive.Arrow>\n);\n\nexport const Datepicker = React.forwardRef(function Datepicker(props: DatepickerProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, onReset: handleReset, style, shortcuts, shortcutsText, ...otherProps } = props;\n    const { calendar, input } = useDatepicker(otherProps, ref);\n    const [open, setOpen] = React.useState(false);\n\n    const { texts } = useLocalization();\n    const className = cn('inline-flex w-full font-normal text-black', externalClassName);\n    const popoverContentRef = React.useRef<HTMLDivElement>(null);\n\n    const handlePopoverClick = React.useCallback((event: React.MouseEvent) => {\n        // Prevent the mouse click event from bubbling up to the parent element\n        event.stopPropagation();\n    }, []);\n\n    const handleCloseAutoFocus = () => input.ref.current;\n\n    const handleOpenAutoFocus = () => {\n        const currentDay: HTMLButtonElement | null = popoverContentRef?.current?.querySelector('td.rdp-selected button') ?? null;\n\n        return currentDay;\n    };\n\n    // Allow preventing default keyDown behaviour if consumer (in our internal case it's Table3) wants to handle it.\n    // We need to have this option for the situations, when Datepicker is used as inline edititng control in Table3,\n    // without it, datepicker cannot be set into detailed editing mode by pressing \"Enter\",\n    // because input.onKeydown is triggering 'focusout', which resets the detailed edititng mode.\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        props.onKeyDown?.(event);\n\n        if (!event.defaultPrevented) {\n            input.onKeyDown?.(event);\n        }\n    };\n\n    return (\n        <span className={className} data-taco=\"datepicker\" style={style}>\n            <PopoverPrimitive.Root modal=\"trap-focus\" open={open} onOpenChange={setOpen}>\n                <Input\n                    {...input}\n                    onKeyDown={handleInputKeyDown}\n                    button={\n                        input.readOnly ? undefined : (\n                            <PopoverPrimitive.Trigger\n                                render={\n                                    <LegacyIconButton\n                                        aria-label={texts.datepicker.expand}\n                                        data-taco=\"toggle-calendar-button\"\n                                        disabled={input.disabled || input.readOnly}\n                                        icon=\"calendar\"\n                                        tabIndex={-1}\n                                        tooltip={texts.datepicker.calendar}\n                                    />\n                                }\n                            />\n                        )\n                    }\n                />\n\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Positioner sideOffset={8}>\n                        <PopoverPrimitive.Popup\n                            initialFocus={handleOpenAutoFocus}\n                            finalFocus={handleCloseAutoFocus}\n                            className=\"group rounded border border-transparent bg-white p-3 shadow outline-none\">\n                            <PopoverArrow />\n                            <div ref={popoverContentRef} className=\"-m-3 flex\" onClick={handlePopoverClick}>\n                                <Calendar\n                                    {...calendar}\n                                    onChange={(date: Date, event?: React.MouseEvent<Element>) => {\n                                        calendar.onChange(date, event);\n                                        setOpen(false);\n                                    }}\n                                />\n                                {shortcuts && (\n                                    <div className=\"flex flex-col border-l border-gray-100\">\n                                        <span className=\"m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold\">\n                                            {shortcutsText ?? texts.datepicker.shortcuts}\n                                        </span>\n                                        <ul>\n                                            {shortcuts.map((shortcut, index) => (\n                                                <li key={`${index}-${shortcut.text}`}>\n                                                    <button\n                                                        type=\"button\"\n                                                        className=\"flex w-full items-start px-4 py-1 text-xs hover:bg-gray-100 hover:text-black\"\n                                                        data-taco=\"datepicker-shortcut\"\n                                                        onClick={event => {\n                                                            shortcut.onClick(event);\n                                                            setOpen(false);\n                                                        }}>\n                                                        {shortcut.text}\n                                                    </button>\n                                                </li>\n                                            ))}\n                                        </ul>\n                                        {handleReset && (\n                                            <button\n                                                type=\"button\"\n                                                className=\"mx-auto my-4 mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300\"\n                                                data-taco=\"datepicker-clear-button\"\n                                                onClick={event => {\n                                                    handleReset(event);\n                                                    setOpen(false);\n                                                }}>\n                                                {texts.datepicker.clear}\n                                            </button>\n                                        )}\n                                    </div>\n                                )}\n                            </div>\n                        </PopoverPrimitive.Popup>\n                    </PopoverPrimitive.Positioner>\n                </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n        </span>\n    );\n});\nDatepicker.displayName = 'Datepicker';\n"],"names":["React","PopoverPrimitive","ARROW_TIP_POSITION_WIDE","ArrowTip","Datepicker","useDatepicker","useLocalization","Input","LegacyIconButton","Calendar"],"mappings":"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"}

package/dist/components/Datepicker/Datepicker.js

@@ -1,24 +1,14 @@
 import { Popover } from "@base-ui/react/popover";
 import cn from "clsx";
 import * as React from "react";
+import { ArrowTip } from "../../primitives/ArrowTip/ArrowTip.js";
+import { ARROW_TIP_POSITION_WIDE } from "../../utils/tailwind.js";
 import { useDatepicker } from "./useDatepicker.js";
 import { useLocalization } from "../Provider/Localization.js";
 import { Input } from "../Input/Input.js";
 import { LegacyIconButton } from "../LegacyComponents/IconButton/IconButton.js";
 import { Calendar } from "../Calendar/Calendar.js";
-const PopoverArrow = () => /* @__PURE__ */ React.createElement(Popover.Arrow, { className: "data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=right]:left-[-13px] data-[side=top]:bottom-[-8px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180" }, /* @__PURE__ */ React.createElement("svg", { width: "20", height: "10", viewBox: "0 0 20 10", fill: "none" }, /* @__PURE__ */ React.createElement(
-  "path",
-  {
-    d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
-    className: "fill-[canvas]"
-  }
-), /* @__PURE__ */ React.createElement(
-  "path",
-  {
-    d: "M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z",
-    className: "fill-gray-200"
-  }
-), /* @__PURE__ */ React.createElement("path", { d: "M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z" })));
+const PopoverArrow = () => /* @__PURE__ */ React.createElement(Popover.Arrow, { className: ARROW_TIP_POSITION_WIDE }, /* @__PURE__ */ React.createElement(ArrowTip, { focusFill: "fill-none", innerFill: "fill-gray-50", outerFill: "fill-[canvas]" }));
 const Datepicker = React.forwardRef(function Datepicker2(props, ref) {
   const { className: externalClassName, onReset: handleReset, style, shortcuts, shortcutsText, ...otherProps } = props;
   const { calendar, input } = useDatepicker(otherProps, ref);
@@ -79,7 +69,7 @@ const Datepicker = React.forwardRef(function Datepicker2(props, ref) {
           setOpen(false);
         }
       }
-    ), shortcuts && /* @__PURE__ */ React.createElement("div", { className: "flex flex-col border-l border-gray-100" }, /* @__PURE__ */ React.createElement("span", { className: "m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold" }, shortcutsText ?? texts.datepicker.shortcuts), /* @__PURE__ */ React.createElement("ul", null, shortcuts.map((shortcut) => /* @__PURE__ */ React.createElement("li", { key: shortcut.text }, /* @__PURE__ */ React.createElement(
+    ), shortcuts && /* @__PURE__ */ React.createElement("div", { className: "flex flex-col border-l border-gray-100" }, /* @__PURE__ */ React.createElement("span", { className: "m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold" }, shortcutsText ?? texts.datepicker.shortcuts), /* @__PURE__ */ React.createElement("ul", null, shortcuts.map((shortcut, index) => /* @__PURE__ */ React.createElement("li", { key: `${index}-${shortcut.text}` }, /* @__PURE__ */ React.createElement(
       "button",
       {
         type: "button",

package/dist/components/Datepicker/Datepicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"Datepicker.js","sources":["../../../src/components/Datepicker/Datepicker.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport type { CalendarProps, InputProps } from '@/components';\nimport { Calendar, Input, LegacyIconButton, useLocalization } from '@/components';\n\nimport { useDatepicker } from './useDatepicker';\n\nexport type DatepickerTexts = {\n    /** Aria-label for calendar */\n    calendar: string;\n    /** Clear button text */\n    clear: string;\n    /**\n     * Aria-label for calendar icon button in the input.\n     * Calendar will open when user clicks this icon button.\n     */\n    expand: string;\n    /** Shortcut heading text */\n    shortcuts: string;\n};\n\nexport type DatePickerShortcut = {\n    onClick: (event: React.MouseEvent) => void;\n    text: string;\n};\n\nexport type DatepickerProps = Omit<InputProps, 'value'> & {\n    /** [Calendar](component:calendar) component associated with the DatePicker */\n    calendar?: CalendarProps;\n    /** List of shortcuts */\n    shortcuts?: DatePickerShortcut[];\n    /** Title for the shortcuts panel */\n    shortcutsText?: string;\n    /** Handler to be called when the clear button is clicked */\n    onReset?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Date value of the calendar.\n     * This will be displayed in DatePicker's input in the format given to the [Provider](component:provider) component\n     */\n    value?: Date | string;\n};\n\nconst PopoverArrow = () => (\n    <PopoverPrimitive.Arrow className=\"data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=right]:left-[-13px] data-[side=top]:bottom-[-8px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180\">\n        <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\">\n            <path\n                d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n                className=\"fill-[canvas]\"\n            />\n            <path\n                d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n                className=\"fill-gray-200\"\n            />\n            <path d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\" />\n        </svg>\n    </PopoverPrimitive.Arrow>\n);\n\nexport const Datepicker = React.forwardRef(function Datepicker(props: DatepickerProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, onReset: handleReset, style, shortcuts, shortcutsText, ...otherProps } = props;\n    const { calendar, input } = useDatepicker(otherProps, ref);\n    const [open, setOpen] = React.useState(false);\n\n    const { texts } = useLocalization();\n    const className = cn('inline-flex w-full font-normal text-black', externalClassName);\n    const popoverContentRef = React.useRef<HTMLDivElement>(null);\n\n    const handlePopoverClick = React.useCallback((event: React.MouseEvent) => {\n        // Prevent the mouse click event from bubbling up to the parent element\n        event.stopPropagation();\n    }, []);\n\n    const handleCloseAutoFocus = () => input.ref.current;\n\n    const handleOpenAutoFocus = () => {\n        const currentDay: HTMLButtonElement | null = popoverContentRef?.current?.querySelector('td.rdp-selected button') ?? null;\n\n        return currentDay;\n    };\n\n    // Allow preventing default keyDown behaviour if consumer (in our internal case it's Table3) wants to handle it.\n    // We need to have this option for the situations, when Datepicker is used as inline edititng control in Table3,\n    // without it, datepicker cannot be set into detailed editing mode by pressing \"Enter\",\n    // because input.onKeydown is triggering 'focusout', which resets the detailed edititng mode.\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        props.onKeyDown?.(event);\n\n        if (!event.defaultPrevented) {\n            input.onKeyDown?.(event);\n        }\n    };\n\n    return (\n        <span className={className} data-taco=\"datepicker\" style={style}>\n            <PopoverPrimitive.Root modal=\"trap-focus\" open={open} onOpenChange={setOpen}>\n                <Input\n                    {...input}\n                    onKeyDown={handleInputKeyDown}\n                    button={\n                        input.readOnly ? undefined : (\n                            <PopoverPrimitive.Trigger\n                                render={\n                                    <LegacyIconButton\n                                        aria-label={texts.datepicker.expand}\n                                        data-taco=\"toggle-calendar-button\"\n                                        disabled={input.disabled || input.readOnly}\n                                        icon=\"calendar\"\n                                        tabIndex={-1}\n                                        tooltip={texts.datepicker.calendar}\n                                    />\n                                }\n                            />\n                        )\n                    }\n                />\n\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Positioner sideOffset={8}>\n                        <PopoverPrimitive.Popup\n                            initialFocus={handleOpenAutoFocus}\n                            finalFocus={handleCloseAutoFocus}\n                            className=\"group rounded border border-transparent bg-white p-3 shadow outline-none\">\n                            <PopoverArrow />\n                            <div ref={popoverContentRef} className=\"-m-3 flex\" onClick={handlePopoverClick}>\n                                <Calendar\n                                    {...calendar}\n                                    onChange={(date: Date, event?: React.MouseEvent<Element>) => {\n                                        calendar.onChange(date, event);\n                                        setOpen(false);\n                                    }}\n                                />\n                                {shortcuts && (\n                                    <div className=\"flex flex-col border-l border-gray-100\">\n                                        <span className=\"m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold\">\n                                            {shortcutsText ?? texts.datepicker.shortcuts}\n                                        </span>\n                                        <ul>\n                                            {shortcuts.map(shortcut => (\n                                                <li key={shortcut.text}>\n                                                    <button\n                                                        type=\"button\"\n                                                        className=\"flex w-full items-start px-4 py-1 text-xs hover:bg-gray-100 hover:text-black\"\n                                                        data-taco=\"datepicker-shortcut\"\n                                                        onClick={event => {\n                                                            shortcut.onClick(event);\n                                                            setOpen(false);\n                                                        }}>\n                                                        {shortcut.text}\n                                                    </button>\n                                                </li>\n                                            ))}\n                                        </ul>\n                                        {handleReset && (\n                                            <button\n                                                type=\"button\"\n                                                className=\"mx-auto my-4 mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300\"\n                                                data-taco=\"datepicker-clear-button\"\n                                                onClick={event => {\n                                                    handleReset(event);\n                                                    setOpen(false);\n                                                }}>\n                                                {texts.datepicker.clear}\n                                            </button>\n                                        )}\n                                    </div>\n                                )}\n                            </div>\n                        </PopoverPrimitive.Popup>\n                    </PopoverPrimitive.Positioner>\n                </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n        </span>\n    );\n});\nDatepicker.displayName = 'Datepicker';\n"],"names":["PopoverPrimitive","Datepicker"],"mappings":"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"}
+{"version":3,"file":"Datepicker.js","sources":["../../../src/components/Datepicker/Datepicker.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport type { CalendarProps, InputProps } from '@/components';\nimport { Calendar, Input, LegacyIconButton, useLocalization } from '@/components';\nimport { ArrowTip } from '@/primitives/ArrowTip/ArrowTip';\nimport { ARROW_TIP_POSITION_WIDE } from '@/utils/tailwind';\n\nimport { useDatepicker } from './useDatepicker';\n\nexport type DatepickerTexts = {\n    /** Aria-label for calendar */\n    calendar: string;\n    /** Clear button text */\n    clear: string;\n    /**\n     * Aria-label for calendar icon button in the input.\n     * Calendar will open when user clicks this icon button.\n     */\n    expand: string;\n    /** Shortcut heading text */\n    shortcuts: string;\n};\n\nexport type DatePickerShortcut = {\n    onClick: (event: React.MouseEvent) => void;\n    text: string;\n};\n\nexport type DatepickerProps = Omit<InputProps, 'value'> & {\n    /** [Calendar](component:calendar) component associated with the DatePicker */\n    calendar?: CalendarProps;\n    /** List of shortcuts */\n    shortcuts?: DatePickerShortcut[];\n    /** Title for the shortcuts panel */\n    shortcutsText?: string;\n    /** Handler to be called when the clear button is clicked */\n    onReset?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Date value of the calendar.\n     * This will be displayed in DatePicker's input in the format given to the [Provider](component:provider) component\n     */\n    value?: Date | string;\n};\n\nconst PopoverArrow = () => (\n    <PopoverPrimitive.Arrow className={ARROW_TIP_POSITION_WIDE}>\n        <ArrowTip focusFill=\"fill-none\" innerFill=\"fill-gray-50\" outerFill=\"fill-[canvas]\" />\n    </PopoverPrimitive.Arrow>\n);\n\nexport const Datepicker = React.forwardRef(function Datepicker(props: DatepickerProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, onReset: handleReset, style, shortcuts, shortcutsText, ...otherProps } = props;\n    const { calendar, input } = useDatepicker(otherProps, ref);\n    const [open, setOpen] = React.useState(false);\n\n    const { texts } = useLocalization();\n    const className = cn('inline-flex w-full font-normal text-black', externalClassName);\n    const popoverContentRef = React.useRef<HTMLDivElement>(null);\n\n    const handlePopoverClick = React.useCallback((event: React.MouseEvent) => {\n        // Prevent the mouse click event from bubbling up to the parent element\n        event.stopPropagation();\n    }, []);\n\n    const handleCloseAutoFocus = () => input.ref.current;\n\n    const handleOpenAutoFocus = () => {\n        const currentDay: HTMLButtonElement | null = popoverContentRef?.current?.querySelector('td.rdp-selected button') ?? null;\n\n        return currentDay;\n    };\n\n    // Allow preventing default keyDown behaviour if consumer (in our internal case it's Table3) wants to handle it.\n    // We need to have this option for the situations, when Datepicker is used as inline edititng control in Table3,\n    // without it, datepicker cannot be set into detailed editing mode by pressing \"Enter\",\n    // because input.onKeydown is triggering 'focusout', which resets the detailed edititng mode.\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        props.onKeyDown?.(event);\n\n        if (!event.defaultPrevented) {\n            input.onKeyDown?.(event);\n        }\n    };\n\n    return (\n        <span className={className} data-taco=\"datepicker\" style={style}>\n            <PopoverPrimitive.Root modal=\"trap-focus\" open={open} onOpenChange={setOpen}>\n                <Input\n                    {...input}\n                    onKeyDown={handleInputKeyDown}\n                    button={\n                        input.readOnly ? undefined : (\n                            <PopoverPrimitive.Trigger\n                                render={\n                                    <LegacyIconButton\n                                        aria-label={texts.datepicker.expand}\n                                        data-taco=\"toggle-calendar-button\"\n                                        disabled={input.disabled || input.readOnly}\n                                        icon=\"calendar\"\n                                        tabIndex={-1}\n                                        tooltip={texts.datepicker.calendar}\n                                    />\n                                }\n                            />\n                        )\n                    }\n                />\n\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Positioner sideOffset={8}>\n                        <PopoverPrimitive.Popup\n                            initialFocus={handleOpenAutoFocus}\n                            finalFocus={handleCloseAutoFocus}\n                            className=\"group rounded border border-transparent bg-white p-3 shadow outline-none\">\n                            <PopoverArrow />\n                            <div ref={popoverContentRef} className=\"-m-3 flex\" onClick={handlePopoverClick}>\n                                <Calendar\n                                    {...calendar}\n                                    onChange={(date: Date, event?: React.MouseEvent<Element>) => {\n                                        calendar.onChange(date, event);\n                                        setOpen(false);\n                                    }}\n                                />\n                                {shortcuts && (\n                                    <div className=\"flex flex-col border-l border-gray-100\">\n                                        <span className=\"m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold\">\n                                            {shortcutsText ?? texts.datepicker.shortcuts}\n                                        </span>\n                                        <ul>\n                                            {shortcuts.map((shortcut, index) => (\n                                                <li key={`${index}-${shortcut.text}`}>\n                                                    <button\n                                                        type=\"button\"\n                                                        className=\"flex w-full items-start px-4 py-1 text-xs hover:bg-gray-100 hover:text-black\"\n                                                        data-taco=\"datepicker-shortcut\"\n                                                        onClick={event => {\n                                                            shortcut.onClick(event);\n                                                            setOpen(false);\n                                                        }}>\n                                                        {shortcut.text}\n                                                    </button>\n                                                </li>\n                                            ))}\n                                        </ul>\n                                        {handleReset && (\n                                            <button\n                                                type=\"button\"\n                                                className=\"mx-auto my-4 mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300\"\n                                                data-taco=\"datepicker-clear-button\"\n                                                onClick={event => {\n                                                    handleReset(event);\n                                                    setOpen(false);\n                                                }}>\n                                                {texts.datepicker.clear}\n                                            </button>\n                                        )}\n                                    </div>\n                                )}\n                            </div>\n                        </PopoverPrimitive.Popup>\n                    </PopoverPrimitive.Positioner>\n                </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n        </span>\n    );\n});\nDatepicker.displayName = 'Datepicker';\n"],"names":["PopoverPrimitive","Datepicker"],"mappings":"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"}

package/dist/components/HoverCard/HoverCard.cjs

@@ -4,6 +4,8 @@ const previewCard = require("@base-ui/react/preview-card");
 const cn = require("clsx");
 const React = require("react");
 const util = require("../Popover/util.cjs");
+const ArrowTip = require("../../primitives/ArrowTip/ArrowTip.cjs");
+const tailwind = require("../../utils/tailwind.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -21,25 +23,7 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
-const Arrow = () => /* @__PURE__ */ React__namespace.createElement(previewCard.PreviewCard.Arrow, { className: "data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=right]:left-[-13px] data-[side=top]:bottom-[-8px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180" }, /* @__PURE__ */ React__namespace.createElement("svg", { width: "20", height: "10", viewBox: "0 0 20 10", fill: "none" }, /* @__PURE__ */ React__namespace.createElement(
-  "path",
-  {
-    d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
-    className: "fill-[canvas]"
-  }
-), /* @__PURE__ */ React__namespace.createElement(
-  "path",
-  {
-    d: "M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z",
-    className: "fill-gray-100 dark:fill-none"
-  }
-), /* @__PURE__ */ React__namespace.createElement(
-  "path",
-  {
-    d: "M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z",
-    className: "dark:fill-gray-100"
-  }
-)));
+const Arrow = () => /* @__PURE__ */ React__namespace.createElement(previewCard.PreviewCard.Arrow, { className: tailwind.ARROW_TIP_POSITION_WIDE }, /* @__PURE__ */ React__namespace.createElement(ArrowTip.ArrowTip, { outerFill: "fill-[canvas]", innerFill: "fill-gray-100", focusFill: "fill-none" }));
 const Trigger = React__namespace.forwardRef(function HoverCardTrigger(props, ref) {
   const { children, className, ...otherProps } = props;
   return /* @__PURE__ */ React__namespace.createElement(
@@ -55,7 +39,7 @@ const Trigger = React__namespace.forwardRef(function HoverCardTrigger(props, ref
 });
 const Content = React__namespace.forwardRef(function HoverCardContent(props, ref) {
   const { placement: side } = props;
-  const className = cn(util.getPopoverStyleClassnames(), "min-w-[theme(spacing.40)] max-w-[theme(spacing.96)]", props.className);
+  const className = cn(util.POPOVER_CLASSNAMES, "min-w-[theme(spacing.40)] max-w-[theme(spacing.96)]", props.className);
   return /* @__PURE__ */ React__namespace.createElement(previewCard.PreviewCard.Portal, null, /* @__PURE__ */ React__namespace.createElement(previewCard.PreviewCard.Positioner, { side, sideOffset: 12 }, /* @__PURE__ */ React__namespace.createElement(previewCard.PreviewCard.Popup, { className, "data-taco": "hover-card", ref }, props.children, /* @__PURE__ */ React__namespace.createElement(Arrow, null))));
 });
 const HoverCard = Object.assign((props) => /* @__PURE__ */ React__namespace.createElement(previewCard.PreviewCard.Root, { ...props }), {

package/dist/components/HoverCard/HoverCard.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"HoverCard.cjs","sources":["../../../src/components/HoverCard/HoverCard.tsx"],"sourcesContent":["import { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport { getPopoverStyleClassnames } from '@/components/Popover/util';\nimport type { Placement } from '@/types';\n\nconst Arrow = () => (\n    <PreviewCardPrimitive.Arrow className=\"data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=right]:left-[-13px] data-[side=top]:bottom-[-8px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180\">\n        <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\">\n            <path\n                d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n                className=\"fill-[canvas]\"\n            />\n            <path\n                d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n                className=\"fill-gray-100 dark:fill-none\"\n            />\n            <path\n                d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\"\n                className=\"dark:fill-gray-100\"\n            />\n        </svg>\n    </PreviewCardPrimitive.Arrow>\n);\n\n/**\n * @deprecated\n */\nexport type HoverCardTriggerProps = React.HTMLAttributes<HTMLAnchorElement> & { children: React.ReactElement };\nconst Trigger = React.forwardRef(function HoverCardTrigger(props: HoverCardTriggerProps, ref: React.Ref<HTMLAnchorElement>) {\n    const { children, className, ...otherProps } = props;\n\n    return (\n        <PreviewCardPrimitive.Trigger\n            {...otherProps}\n            className={cn('text-black', className)}\n            delay={300}\n            ref={ref}\n            render={children}\n        />\n    );\n});\n\n/**\n * @deprecated\n */\nexport type HoverCardContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Set the position of the HoverCard relative to its trigger. Default value is `bottom` */\n    placement?: Placement;\n};\nconst Content = React.forwardRef(function HoverCardContent(props: HoverCardContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { placement: side } = props;\n    const className = cn(getPopoverStyleClassnames(), 'min-w-[theme(spacing.40)] max-w-[theme(spacing.96)]', props.className);\n\n    return (\n        <PreviewCardPrimitive.Portal>\n            <PreviewCardPrimitive.Positioner side={side} sideOffset={12}>\n                <PreviewCardPrimitive.Popup className={className} data-taco=\"hover-card\" ref={ref}>\n                    {props.children}\n                    <Arrow />\n                </PreviewCardPrimitive.Popup>\n            </PreviewCardPrimitive.Positioner>\n        </PreviewCardPrimitive.Portal>\n    );\n});\n\n/**\n * @deprecated\n */\nexport type HoverCardProps = React.PropsWithChildren<object>;\n\n/**\n * @deprecated\n */\nexport const HoverCard = Object.assign((props: HoverCardProps) => <PreviewCardPrimitive.Root {...props} />, {\n    Trigger,\n    Content,\n});\n"],"names":["React","PreviewCardPrimitive","getPopoverStyleClassnames"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,QAAQ,MACVA,iCAAA,cAACC,YAAAA,YAAqB,OAArB,EAA2B,WAAU,kNAClCD,iCAAA,cAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,UACjDA,iCAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,GAAE;AAAA,IACF,WAAU;AAAA,EAAA;AACd,GACAA,iCAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,GAAE;AAAA,IACF,WAAU;AAAA,EAAA;AACd,GACAA,iCAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,GAAE;AAAA,IACF,WAAU;AAAA,EAAA;AACd,CACJ,CACJ;AAOJ,MAAM,UAAUA,iBAAM,WAAW,SAAS,iBAAiB,OAA8B,KAAmC;AACxH,QAAM,EAAE,UAAU,WAAW,GAAG,eAAe;AAE/C,SACIA,iCAAA;AAAA,IAACC,YAAAA,YAAqB;AAAA,IAArB;AAAA,MACI,GAAG;AAAA,MACJ,WAAW,GAAG,cAAc,SAAS;AAAA,MACrC,OAAO;AAAA,MACP;AAAA,MACA,QAAQ;AAAA,IAAA;AAAA,EAAA;AAGpB,CAAC;AASD,MAAM,UAAUD,iBAAM,WAAW,SAAS,iBAAiB,OAA8B,KAAgC;AACrH,QAAM,EAAE,WAAW,KAAA,IAAS;AAC5B,QAAM,YAAY,GAAGE,KAAAA,0BAAA,GAA6B,uDAAuD,MAAM,SAAS;AAExH,SACIF,iCAAA,cAACC,YAAAA,YAAqB,QAArB,MACGD,iCAAA,cAACC,YAAAA,YAAqB,YAArB,EAAgC,MAAY,YAAY,GAAA,GACrDD,iCAAA,cAACC,YAAAA,YAAqB,OAArB,EAA2B,WAAsB,aAAU,cAAa,IAAA,GACpE,MAAM,UACPD,iCAAA,cAAC,OAAA,IAAM,CACX,CACJ,CACJ;AAER,CAAC;AAUM,MAAM,YAAY,OAAO,OAAO,CAAC,UAA0BA,iCAAA,cAACC,YAAAA,YAAqB,MAArB,EAA2B,GAAG,MAAA,CAAO,GAAI;AAAA,EACxG;AAAA,EACA;AACJ,CAAC;;"}
+{"version":3,"file":"HoverCard.cjs","sources":["../../../src/components/HoverCard/HoverCard.tsx"],"sourcesContent":["import { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport { POPOVER_CLASSNAMES } from '@/components/Popover/util';\nimport { ArrowTip } from '@/primitives/ArrowTip/ArrowTip';\nimport type { Placement } from '@/types';\nimport { ARROW_TIP_POSITION_WIDE } from '@/utils/tailwind';\n\nconst Arrow = () => (\n    <PreviewCardPrimitive.Arrow className={ARROW_TIP_POSITION_WIDE}>\n        <ArrowTip outerFill=\"fill-[canvas]\" innerFill=\"fill-gray-100\" focusFill=\"fill-none\" />\n    </PreviewCardPrimitive.Arrow>\n);\n\n/**\n * @deprecated\n */\nexport type HoverCardTriggerProps = React.HTMLAttributes<HTMLAnchorElement> & { children: React.ReactElement };\nconst Trigger = React.forwardRef(function HoverCardTrigger(props: HoverCardTriggerProps, ref: React.Ref<HTMLAnchorElement>) {\n    const { children, className, ...otherProps } = props;\n\n    return (\n        <PreviewCardPrimitive.Trigger\n            {...otherProps}\n            className={cn('text-black', className)}\n            delay={300}\n            ref={ref}\n            render={children}\n        />\n    );\n});\n\n/**\n * @deprecated\n */\nexport type HoverCardContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Set the position of the HoverCard relative to its trigger. Default value is `bottom` */\n    placement?: Placement;\n};\nconst Content = React.forwardRef(function HoverCardContent(props: HoverCardContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { placement: side } = props;\n    const className = cn(POPOVER_CLASSNAMES, 'min-w-[theme(spacing.40)] max-w-[theme(spacing.96)]', props.className);\n\n    return (\n        <PreviewCardPrimitive.Portal>\n            <PreviewCardPrimitive.Positioner side={side} sideOffset={12}>\n                <PreviewCardPrimitive.Popup className={className} data-taco=\"hover-card\" ref={ref}>\n                    {props.children}\n                    <Arrow />\n                </PreviewCardPrimitive.Popup>\n            </PreviewCardPrimitive.Positioner>\n        </PreviewCardPrimitive.Portal>\n    );\n});\n\n/**\n * @deprecated\n */\nexport type HoverCardProps = React.PropsWithChildren<object>;\n\n/**\n * @deprecated\n */\nexport const HoverCard = Object.assign((props: HoverCardProps) => <PreviewCardPrimitive.Root {...props} />, {\n    Trigger,\n    Content,\n});\n"],"names":["React","PreviewCardPrimitive","ARROW_TIP_POSITION_WIDE","ArrowTip","POPOVER_CLASSNAMES"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,QAAQ,MACVA,iCAAA,cAACC,YAAAA,YAAqB,OAArB,EAA2B,WAAWC,SAAAA,2BACnCF,iCAAA,cAACG,SAAAA,UAAA,EAAS,WAAU,iBAAgB,WAAU,iBAAgB,WAAU,aAAY,CACxF;AAOJ,MAAM,UAAUH,iBAAM,WAAW,SAAS,iBAAiB,OAA8B,KAAmC;AACxH,QAAM,EAAE,UAAU,WAAW,GAAG,eAAe;AAE/C,SACIA,iCAAA;AAAA,IAACC,YAAAA,YAAqB;AAAA,IAArB;AAAA,MACI,GAAG;AAAA,MACJ,WAAW,GAAG,cAAc,SAAS;AAAA,MACrC,OAAO;AAAA,MACP;AAAA,MACA,QAAQ;AAAA,IAAA;AAAA,EAAA;AAGpB,CAAC;AASD,MAAM,UAAUD,iBAAM,WAAW,SAAS,iBAAiB,OAA8B,KAAgC;AACrH,QAAM,EAAE,WAAW,KAAA,IAAS;AAC5B,QAAM,YAAY,GAAGI,KAAAA,oBAAoB,uDAAuD,MAAM,SAAS;AAE/G,SACIJ,iCAAA,cAACC,YAAAA,YAAqB,QAArB,MACGD,iCAAA,cAACC,YAAAA,YAAqB,YAArB,EAAgC,MAAY,YAAY,GAAA,GACrDD,iCAAA,cAACC,YAAAA,YAAqB,OAArB,EAA2B,WAAsB,aAAU,cAAa,IAAA,GACpE,MAAM,UACPD,iCAAA,cAAC,OAAA,IAAM,CACX,CACJ,CACJ;AAER,CAAC;AAUM,MAAM,YAAY,OAAO,OAAO,CAAC,UAA0BA,iCAAA,cAACC,YAAAA,YAAqB,MAArB,EAA2B,GAAG,MAAA,CAAO,GAAI;AAAA,EACxG;AAAA,EACA;AACJ,CAAC;;"}

package/dist/components/HoverCard/HoverCard.js

@@ -1,26 +1,10 @@
 import { PreviewCard } from "@base-ui/react/preview-card";
 import cn from "clsx";
 import * as React from "react";
-import { getPopoverStyleClassnames } from "../Popover/util.js";
-const Arrow = () => /* @__PURE__ */ React.createElement(PreviewCard.Arrow, { className: "data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=right]:left-[-13px] data-[side=top]:bottom-[-8px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180" }, /* @__PURE__ */ React.createElement("svg", { width: "20", height: "10", viewBox: "0 0 20 10", fill: "none" }, /* @__PURE__ */ React.createElement(
-  "path",
-  {
-    d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
-    className: "fill-[canvas]"
-  }
-), /* @__PURE__ */ React.createElement(
-  "path",
-  {
-    d: "M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z",
-    className: "fill-gray-100 dark:fill-none"
-  }
-), /* @__PURE__ */ React.createElement(
-  "path",
-  {
-    d: "M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z",
-    className: "dark:fill-gray-100"
-  }
-)));
+import { POPOVER_CLASSNAMES } from "../Popover/util.js";
+import { ArrowTip } from "../../primitives/ArrowTip/ArrowTip.js";
+import { ARROW_TIP_POSITION_WIDE } from "../../utils/tailwind.js";
+const Arrow = () => /* @__PURE__ */ React.createElement(PreviewCard.Arrow, { className: ARROW_TIP_POSITION_WIDE }, /* @__PURE__ */ React.createElement(ArrowTip, { outerFill: "fill-[canvas]", innerFill: "fill-gray-100", focusFill: "fill-none" }));
 const Trigger = React.forwardRef(function HoverCardTrigger(props, ref) {
   const { children, className, ...otherProps } = props;
   return /* @__PURE__ */ React.createElement(
@@ -36,7 +20,7 @@ const Trigger = React.forwardRef(function HoverCardTrigger(props, ref) {
 });
 const Content = React.forwardRef(function HoverCardContent(props, ref) {
   const { placement: side } = props;
-  const className = cn(getPopoverStyleClassnames(), "min-w-[theme(spacing.40)] max-w-[theme(spacing.96)]", props.className);
+  const className = cn(POPOVER_CLASSNAMES, "min-w-[theme(spacing.40)] max-w-[theme(spacing.96)]", props.className);
   return /* @__PURE__ */ React.createElement(PreviewCard.Portal, null, /* @__PURE__ */ React.createElement(PreviewCard.Positioner, { side, sideOffset: 12 }, /* @__PURE__ */ React.createElement(PreviewCard.Popup, { className, "data-taco": "hover-card", ref }, props.children, /* @__PURE__ */ React.createElement(Arrow, null))));
 });
 const HoverCard = Object.assign((props) => /* @__PURE__ */ React.createElement(PreviewCard.Root, { ...props }), {