@arolariu/components
Version:
🎨 60+ beautiful, accessible React components built on Radix UI. TypeScript-first, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
221 lines (220 loc) • 12.3 kB
JavaScript
"use client";
;
var __webpack_require__ = {};
(()=>{
__webpack_require__.d = (exports1, definition)=>{
for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
enumerable: true,
get: definition[key]
});
};
})();
(()=>{
__webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
})();
(()=>{
__webpack_require__.r = (exports1)=>{
if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
value: 'Module'
});
Object.defineProperty(exports1, '__esModule', {
value: true
});
};
})();
var __webpack_exports__ = {};
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, {
ChartTooltip: ()=>ChartTooltip,
ChartContainer: ()=>ChartContainer,
ChartLegendContent: ()=>ChartLegendContent,
ChartTooltipContent: ()=>ChartTooltipContent,
ChartLegend: ()=>ChartLegend,
ChartStyle: ()=>ChartStyle
});
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
const external_react_namespaceObject = require("react");
const external_recharts_namespaceObject = require("recharts");
const utils_cjs_namespaceObject = require("../../lib/utils.cjs");
const THEMES = {
light: "",
dark: ".dark"
};
const ChartContext = /*#__PURE__*/ external_react_namespaceObject.createContext(null);
function useChart() {
const context = external_react_namespaceObject.useContext(ChartContext);
if (!context) throw new Error("useChart must be used within a <ChartContainer />");
return context;
}
function ChartContainer({ id, className, children, config, ...props }) {
const uniqueId = external_react_namespaceObject.useId();
const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ChartContext.Provider, {
value: {
config
},
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
"data-slot": "chart",
"data-chart": chartId,
className: (0, utils_cjs_namespaceObject.cn)("[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", className),
...props,
children: [
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ChartStyle, {
id: chartId,
config: config
}),
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_recharts_namespaceObject.ResponsiveContainer, {
children: children
})
]
})
});
}
const ChartStyle = ({ id, config })=>{
const colorConfig = Object.entries(config).filter(([, config])=>config.theme || config.color);
if (!colorConfig.length) return null;
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("style", {
dangerouslySetInnerHTML: {
__html: Object.entries(THEMES).map(([theme, prefix])=>`
${prefix} [data-chart=${id}] {
${colorConfig.map(([key, itemConfig])=>{
const color = itemConfig.theme?.[theme] || itemConfig.color;
return color ? ` --color-${key}: ${color};` : null;
}).join("\n")}
}
`).join("\n")
}
});
};
const ChartTooltip = external_recharts_namespaceObject.Tooltip;
function ChartTooltipContent({ active, payload, label, className, indicator = "dot", hideLabel = false, hideIndicator = false, labelFormatter, formatter, labelClassName, color, nameKey, labelKey }) {
const { config } = useChart();
const tooltipLabel = external_react_namespaceObject.useMemo(()=>{
if (hideLabel || !payload?.length) return null;
const [item] = payload;
const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
const itemConfig = getPayloadConfigFromPayload(config, item, key);
const value = labelKey || "string" != typeof label ? itemConfig?.label : config[label]?.label || label;
if (labelFormatter) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
className: (0, utils_cjs_namespaceObject.cn)("font-medium", labelClassName),
children: labelFormatter(value, payload)
});
if (!value) return null;
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
className: (0, utils_cjs_namespaceObject.cn)("font-medium", labelClassName),
children: value
});
}, [
label,
labelFormatter,
payload,
hideLabel,
labelClassName,
config,
labelKey
]);
if (!active || !payload?.length) return null;
const nestLabel = 1 === payload.length && "dot" !== indicator;
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
className: (0, utils_cjs_namespaceObject.cn)("border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl", className),
children: [
nestLabel ? null : tooltipLabel,
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
className: "grid gap-1.5",
children: payload.map((item, index)=>{
const key = `${nameKey || item.name || item.dataKey || "value"}`;
const itemConfig = getPayloadConfigFromPayload(config, item, key);
const indicatorColor = color || item.payload.fill || item.color;
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
className: (0, utils_cjs_namespaceObject.cn)("[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5", "dot" === indicator && "items-center"),
children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
children: [
itemConfig?.icon ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(itemConfig.icon, {}) : !hideIndicator && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
className: (0, utils_cjs_namespaceObject.cn)("shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", {
"h-2.5 w-2.5": "dot" === indicator,
"w-1": "line" === indicator,
"w-0 border-[1.5px] border-dashed bg-transparent": "dashed" === indicator,
"my-0.5": nestLabel && "dashed" === indicator
}),
style: {
"--color-bg": indicatorColor,
"--color-border": indicatorColor
}
}),
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
className: (0, utils_cjs_namespaceObject.cn)("flex flex-1 justify-between leading-none", nestLabel ? "items-end" : "items-center"),
children: [
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
className: "grid gap-1.5",
children: [
nestLabel ? tooltipLabel : null,
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
className: "text-muted-foreground",
children: itemConfig?.label || item.name
})
]
}),
item.value && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
className: "text-foreground font-mono font-medium tabular-nums",
children: item.value.toLocaleString()
})
]
})
]
})
}, item.dataKey);
})
})
]
});
}
const ChartLegend = external_recharts_namespaceObject.Legend;
function ChartLegendContent({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }) {
const { config } = useChart();
if (!payload?.length) return null;
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
className: (0, utils_cjs_namespaceObject.cn)("flex items-center justify-center gap-4", "top" === verticalAlign ? "pb-3" : "pt-3", className),
children: payload.map((item)=>{
const key = `${nameKey || item.dataKey || "value"}`;
const itemConfig = getPayloadConfigFromPayload(config, item, key);
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
className: (0, utils_cjs_namespaceObject.cn)("[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"),
children: [
itemConfig?.icon && !hideIcon ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(itemConfig.icon, {}) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
className: "h-2 w-2 shrink-0 rounded-[2px]",
style: {
backgroundColor: item.color
}
}),
itemConfig?.label
]
}, item.value);
})
});
}
function getPayloadConfigFromPayload(config, payload, key) {
if ("object" != typeof payload || null === payload) return;
const payloadPayload = "payload" in payload && "object" == typeof payload.payload && null !== payload.payload ? payload.payload : void 0;
let configLabelKey = key;
if (key in payload && "string" == typeof payload[key]) configLabelKey = payload[key];
else if (payloadPayload && key in payloadPayload && "string" == typeof payloadPayload[key]) configLabelKey = payloadPayload[key];
return configLabelKey in config ? config[configLabelKey] : config[key];
}
exports.ChartContainer = __webpack_exports__.ChartContainer;
exports.ChartLegend = __webpack_exports__.ChartLegend;
exports.ChartLegendContent = __webpack_exports__.ChartLegendContent;
exports.ChartStyle = __webpack_exports__.ChartStyle;
exports.ChartTooltip = __webpack_exports__.ChartTooltip;
exports.ChartTooltipContent = __webpack_exports__.ChartTooltipContent;
for(var __webpack_i__ in __webpack_exports__)if (-1 === [
"ChartContainer",
"ChartLegend",
"ChartLegendContent",
"ChartStyle",
"ChartTooltip",
"ChartTooltipContent"
].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
Object.defineProperty(exports, '__esModule', {
value: true
});
//# sourceMappingURL=chart.cjs.map