doom-design-system 0.4.6 → 0.4.8

package/dist/DesignSystemProvider.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-import './styles/globals.scss';
-import { ThemeKey } from './styles/themes';
-export declare function DesignSystemProvider({ children, initialTheme, withBody, className, fontClassName }: {
+import "./styles/globals.scss";
+import React from "react";
+import { ThemeKey } from "./styles/themes";
+export declare function DesignSystemProvider({ children, initialTheme, withBody, className, fontClassName, }: {
     children: React.ReactNode;
     initialTheme?: ThemeKey;
     withBody?: boolean;

package/dist/DesignSystemProvider.js

@@ -1,12 +1,12 @@
-'use client';
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import './styles/globals.css';
-import { ThemeProvider } from './styles/themes/index.js';
-export function DesignSystemProvider({ children, initialTheme = 'default', withBody = false, className = '', fontClassName = '' }) {
+import "./styles/globals.css";
+import { ThemeProvider } from "./styles/themes/index.js";
+export function DesignSystemProvider({ children, initialTheme = "default", withBody = false, className = "", fontClassName = "", }) {
     const content = (_jsx(ThemeProvider, { initialTheme: initialTheme, children: children }));
     const combinedClassName = `${fontClassName} ${className}`.trim();
     if (withBody) {
-        return (_jsx("body", { className: combinedClassName, children: content }));
+        return _jsx("body", { className: combinedClassName, children: content });
     }
-    return (_jsx("div", { className: combinedClassName, style: { display: 'contents' }, children: content }));
+    return (_jsx("div", { className: combinedClassName, style: { display: "contents" }, children: content }));
 }

package/dist/components/Accordion/Accordion.js

@@ -2,23 +2,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import { ChevronDown } from "lucide-react";
-import { Stack } from "../Layout/Layout.js";
+import React, { useState } from "react";
 import { Button } from "../Button/Button.js";
+import { Stack } from "../Layout/Layout.js";
 import { Text } from "../Text/Text.js";
 import styles from "./Accordion.module.css";
-import React, { useState } from "react";
 const AccordionContext = React.createContext(null);
 export function AccordionItem({ value, trigger, children, className, }) {
     const context = React.useContext(AccordionContext);
-    if (!context)
+    if (!context) {
         throw new Error("AccordionItem must be used within Accordion");
+    }
     const reactId = React.useId();
     const triggerId = `accordion-trigger-${reactId}`;
     const contentId = `accordion-content-${reactId}`;
     const isOpen = Array.isArray(context.value)
         ? context.value.includes(value)
         : context.value === value;
-    return (_jsxs("div", { className: clsx(styles.item, isOpen && styles.isOpen, className), children: [_jsx(Text, { variant: "h3", className: styles.header, children: _jsxs(Button, { id: triggerId, variant: "ghost", className: styles.trigger, onClick: () => context.onToggle(value), "aria-expanded": isOpen, "aria-controls": contentId, children: [trigger, _jsx(ChevronDown, { size: 20, strokeWidth: 2.5, className: styles.icon })] }) }), _jsx("div", { id: contentId, className: styles.contentWrapper, "aria-hidden": !isOpen, role: "region", "aria-labelledby": triggerId, children: _jsx("div", { className: styles.contentBody, children: children }) })] }));
+    return (_jsxs("div", { className: clsx(styles.item, isOpen && styles.isOpen, className), children: [_jsx(Text, { className: styles.header, variant: "h3", children: _jsxs(Button, { "aria-controls": contentId, "aria-expanded": isOpen, className: styles.trigger, id: triggerId, variant: "ghost", onClick: () => context.onToggle(value), children: [trigger, _jsx(ChevronDown, { className: styles.icon, size: 20, strokeWidth: 2.5 })] }) }), _jsx("div", { "aria-hidden": !isOpen, "aria-labelledby": triggerId, className: styles.contentWrapper, id: contentId, role: "region", children: _jsx("div", { className: styles.contentBody, children: children }) })] }));
 }
 export function Accordion({ type = "single", children, defaultValue, value: controlledValue, onValueChange, className, }) {
     const [internalValue, setInternalValue] = useState(defaultValue || (type === "multiple" ? [] : ""));
@@ -40,5 +41,5 @@ export function Accordion({ type = "single", children, defaultValue, value: cont
         }
         onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue);
     };
-    return (_jsx(AccordionContext.Provider, { value: { value: currentValue, onToggle: handleToggle, type }, children: _jsx(Stack, { gap: 0, className: clsx(styles.root, className), children: children }) }));
+    return (_jsx(AccordionContext.Provider, { value: { value: currentValue, onToggle: handleToggle, type }, children: _jsx(Stack, { className: clsx(styles.root, className), gap: 0, children: children }) }));
 }

package/dist/components/Accordion/index.d.ts

@@ -1 +1 @@
-export { Accordion, AccordionItem } from './Accordion';
+export { Accordion, AccordionItem } from "./Accordion";

package/dist/components/Accordion/index.js

@@ -1 +1 @@
-export { Accordion, AccordionItem } from './Accordion.js';
+export { Accordion, AccordionItem } from "./Accordion.js";

package/dist/components/ActionRow/ActionRow.js

@@ -11,12 +11,12 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Text } from "../Text/Text.js";
-import { Flex } from "../Layout/Layout.js";
-import { ChevronRight } from "lucide-react";
 import clsx from "clsx";
+import { ChevronRight } from "lucide-react";
+import { Flex } from "../Layout/Layout.js";
+import { Text } from "../Text/Text.js";
 import styles from "./ActionRow.module.css";
 export function ActionRow(_a) {
     var { icon, title, description, onClick, className } = _a, props = __rest(_a, ["icon", "title", "description", "onClick", "className"]);
-    return (_jsxs(Flex, Object.assign({ align: "center", gap: 6, onClick: onClick, className: clsx(styles.actionRow, className) }, props, { children: [_jsx("div", { className: styles.iconWrapper, children: icon }), _jsxs(Flex, { direction: "column", gap: 1, style: { flex: 1 }, children: [_jsx(Text, { variant: "h6", weight: "bold", children: title }), description && (_jsx(Text, { color: "muted", variant: "small", children: description }))] }), _jsx(ChevronRight, { size: 20, strokeWidth: 2.5, style: { color: "var(--muted-foreground)" } })] })));
+    return (_jsxs(Flex, Object.assign({ align: "center", className: clsx(styles.actionRow, className), gap: 6, onClick: onClick }, props, { children: [_jsx("div", { className: styles.iconWrapper, children: icon }), _jsxs(Flex, { direction: "column", gap: 1, style: { flex: 1 }, children: [_jsx(Text, { variant: "h6", weight: "bold", children: title }), description && (_jsx(Text, { color: "muted", variant: "small", children: description }))] }), _jsx(ChevronRight, { size: 20, strokeWidth: 2.5, style: { color: "var(--muted-foreground)" } })] })));
 }

package/dist/components/ActionRow/index.d.ts

@@ -1 +1 @@
-export * from './ActionRow';
+export * from "./ActionRow";

package/dist/components/ActionRow/index.js

@@ -1 +1 @@
-export * from './ActionRow.js';
+export * from "./ActionRow.js";

package/dist/components/Alert/Alert.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-export type AlertVariant = 'info' | 'success' | 'warning' | 'error';
+import React from "react";
+export type AlertVariant = "info" | "success" | "warning" | "error";
 interface AlertProps {
     variant?: AlertVariant;
     title: string;
@@ -7,5 +7,5 @@ interface AlertProps {
     icon?: React.ReactNode;
     className?: string;
 }
-export declare function Alert({ variant, title, description, icon, className }: AlertProps): import("react/jsx-runtime").JSX.Element;
+export declare function Alert({ variant, title, description, icon, className, }: AlertProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Alert/Alert.js

@@ -1,15 +1,15 @@
-'use client';
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { AlertCircle, CheckCircle, Info, XCircle } from 'lucide-react';
-import styles from './Alert.module.css';
+import clsx from "clsx";
+import { AlertCircle, CheckCircle, Info, XCircle } from "lucide-react";
+import styles from "./Alert.module.css";
 const icons = {
     info: Info,
     success: CheckCircle,
     warning: AlertCircle,
     error: XCircle,
 };
-export function Alert({ variant = 'info', title, description, icon, className }) {
+export function Alert({ variant = "info", title, description, icon, className, }) {
     const IconComponent = icons[variant];
     return (_jsxs("div", { className: clsx(styles.alert, styles[variant], className), role: "alert", children: [_jsx("div", { className: clsx(styles.iconWrapper, styles[variant]), children: icon || _jsx(IconComponent, { size: 20, strokeWidth: 2.5 }) }), _jsxs("div", { className: styles.content, children: [_jsx("h5", { className: styles.title, children: title }), description && _jsx("p", { className: styles.description, children: description })] })] }));
 }

package/dist/components/Alert/index.d.ts

@@ -1 +1 @@
-export { Alert, type AlertVariant } from './Alert';
+export { Alert, type AlertVariant } from "./Alert";

package/dist/components/Alert/index.js

@@ -1 +1 @@
-export { Alert } from './Alert.js';
+export { Alert } from "./Alert.js";

package/dist/components/Avatar/Avatar.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from "react";
 import clsx from "clsx";
-import styles from "./Avatar.module.css";
+import { useState } from "react";
 import { Image } from "../Image/Image.js";
+import styles from "./Avatar.module.css";
 export function Avatar({ src, alt = "Avatar", fallback, size = "md", shape = "square", className, }) {
     const [hasError, setHasError] = useState(false);
-    return (_jsx("div", { className: clsx(styles.avatar, styles[size], styles[shape], className), children: src && !hasError ? (_jsx(Image, { src: src, alt: alt, className: styles.image, onError: () => setHasError(true), fit: "cover", rounded: false })) : (_jsx("span", { className: clsx(styles.fallback, styles[size]), children: typeof fallback === "string" ? fallback.slice(0, 2) : fallback })) }));
+    return (_jsx("div", { className: clsx(styles.avatar, styles[size], styles[shape], className), children: src && !hasError ? (_jsx(Image, { alt: alt, className: styles.image, fit: "cover", rounded: false, src: src, onError: () => setHasError(true) })) : (_jsx("span", { className: clsx(styles.fallback, styles[size]), children: typeof fallback === "string" ? fallback.slice(0, 2) : fallback })) }));
 }

package/dist/components/Avatar/index.d.ts

@@ -1 +1 @@
-export { Avatar, type AvatarSize, type AvatarShape } from './Avatar';
+export { Avatar, type AvatarShape, type AvatarSize } from "./Avatar";

package/dist/components/Avatar/index.js

@@ -1 +1 @@
-export { Avatar } from './Avatar.js';
+export { Avatar } from "./Avatar.js";

package/dist/components/Badge/index.d.ts

@@ -1 +1 @@
-export * from './Badge';
+export * from "./Badge";

package/dist/components/Badge/index.js

@@ -1 +1 @@
-export * from './Badge.js';
+export * from "./Badge.js";

package/dist/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 interface BreadcrumbsProps {
     children: React.ReactNode;
     className?: string;
@@ -9,5 +9,5 @@ interface BreadcrumbItemProps {
     isCurrent?: boolean;
     children: React.ReactNode;
 }
-export declare function BreadcrumbItem({ href, isCurrent, children }: BreadcrumbItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function BreadcrumbItem({ href, isCurrent, children, }: BreadcrumbItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -1,14 +1,14 @@
-'use client';
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { Link } from '../Link/Link.js';
-import styles from './Breadcrumbs.module.css';
+import clsx from "clsx";
+import { Link } from "../Link/Link.js";
+import styles from "./Breadcrumbs.module.css";
 export function Breadcrumbs({ children, className }) {
     return (_jsx("nav", { "aria-label": "breadcrumb", className: clsx(styles.nav, className), children: _jsx("ol", { className: styles.list, children: children }) }));
 }
-export function BreadcrumbItem({ href, isCurrent, children }) {
+export function BreadcrumbItem({ href, isCurrent, children, }) {
     if (isCurrent) {
-        return (_jsx("li", { className: styles.li, "aria-current": "page", children: _jsx("span", { className: styles.currentPage, children: children }) }));
+        return (_jsx("li", { "aria-current": "page", className: styles.li, children: _jsx("span", { className: styles.currentPage, children: children }) }));
     }
-    return (_jsx("li", { className: styles.li, children: href ? (_jsx(Link, { href: href, variant: "default", style: { fontSize: 'inherit' }, children: children })) : (_jsx("span", { children: children })) }));
+    return (_jsx("li", { className: styles.li, children: href ? (_jsx(Link, { href: href, style: { fontSize: "inherit" }, variant: "default", children: children })) : (_jsx("span", { children: children })) }));
 }

package/dist/components/Breadcrumbs/index.d.ts

@@ -1 +1 @@
-export { Breadcrumbs, BreadcrumbItem } from './Breadcrumbs';
+export { BreadcrumbItem, Breadcrumbs } from "./Breadcrumbs";

package/dist/components/Breadcrumbs/index.js

@@ -1 +1 @@
-export { Breadcrumbs, BreadcrumbItem } from './Breadcrumbs.js';
+export { BreadcrumbItem, Breadcrumbs } from "./Breadcrumbs.js";

package/dist/components/Button/Button.js

@@ -17,5 +17,5 @@ import styles from "./Button.module.css";
 export function Button(_a) {
     var { children, variant = "primary", size = "md", loading = false, className, disabled } = _a, props = __rest(_a, ["children", "variant", "size", "loading", "className", "disabled"]);
     const buttonClass = clsx(styles.button, styles[variant], styles[size], loading && styles.loading, className);
-    return (_jsxs("button", Object.assign({ className: buttonClass, disabled: disabled || loading }, props, { children: [loading && _jsx(Spinner, { size: "sm", className: styles.spinnerIcon }), children] })));
+    return (_jsxs("button", Object.assign({ className: buttonClass, disabled: disabled || loading }, props, { children: [loading && _jsx(Spinner, { className: styles.spinnerIcon, size: "sm" }), children] })));
 }

package/dist/components/Button/index.d.ts

@@ -1 +1 @@
-export * from './Button';
+export * from "./Button";

package/dist/components/Button/index.js

@@ -1 +1 @@
-export * from './Button.js';
+export * from "./Button.js";

package/dist/components/Card/Card.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     as?: React.ElementType;

package/dist/components/Card/Card.js

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -11,9 +11,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import clsx from 'clsx';
-import styles from './Card.module.css';
+import clsx from "clsx";
+import styles from "./Card.module.css";
 export function Card(_a) {
-    var { children, className, as: Component = 'div' } = _a, props = __rest(_a, ["children", "className", "as"]);
+    var { children, className, as: Component = "div" } = _a, props = __rest(_a, ["children", "className", "as"]);
     return (_jsx(Component, Object.assign({ className: clsx(styles.card, className) }, props, { children: children })));
 }

package/dist/components/Card/index.d.ts

@@ -1 +1 @@
-export * from './Card';
+export * from "./Card";

package/dist/components/Card/index.js

@@ -1 +1 @@
-export * from './Card.js';
+export * from "./Card.js";

package/dist/components/Chart/Chart.d.ts

@@ -0,0 +1,3 @@
+import { ChartProps } from "./types";
+export type { ChartConfig, ChartProps, DrawContext } from "./types";
+export declare function Chart<T>({ data, type, variant, x, y, d3Config, className, style, renderTooltip, flat, title, render, }: ChartProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Chart/Chart.js

@@ -0,0 +1,123 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { pointer, select } from "d3-selection";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Card } from "../Card/Card.js";
+import { Stack } from "../Layout/Layout.js";
+import { Text } from "../Text/Text.js";
+import styles from "./Chart.module.css";
+import { createScales, drawAxes, drawBars, drawGrid, drawLineArea, setupGradient, } from "./renderers.js";
+export function Chart({ data, type = "line", variant = "default", x, y, d3Config, className, style, renderTooltip, flat, title, render, }) {
+    const svgRef = useRef(null);
+    const containerRef = useRef(null);
+    const gradientId = React.useId().replace(/:/g, "");
+    const [hoverState, setHoverState] = useState(null);
+    const config = useMemo(() => (Object.assign({ margin: {
+            top: 20,
+            right: 20,
+            bottom: (d3Config === null || d3Config === void 0 ? void 0 : d3Config.xAxisLabel) ? 60 : 50,
+            left: (d3Config === null || d3Config === void 0 ? void 0 : d3Config.yAxisLabel) ? 65 : 55,
+        }, curve: undefined, showAxes: true, grid: false, withGradient: type === "area", showDots: false }, d3Config)), [d3Config, type]);
+    const wrapperRef = useRef(null);
+    const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+    useEffect(() => {
+        if (!wrapperRef.current)
+            return;
+        const resizeObserver = new ResizeObserver((entries) => {
+            const entry = entries[0];
+            if (entry) {
+                setDimensions({
+                    width: entry.contentRect.width,
+                    height: entry.contentRect.height,
+                });
+            }
+        });
+        resizeObserver.observe(wrapperRef.current);
+        return () => resizeObserver.disconnect();
+    }, []);
+    useEffect(() => {
+        if (!svgRef.current ||
+            !data.length ||
+            dimensions.width === 0 ||
+            dimensions.height === 0) {
+            return;
+        }
+        const { width, height } = dimensions;
+        const { margin } = config;
+        if (width <= 0 || height <= 0)
+            return;
+        const svg = select(svgRef.current);
+        svg.selectAll("*").remove();
+        const g = svg
+            .attr("width", width)
+            .attr("height", height)
+            .append("g")
+            .attr("transform", `translate(${margin.left},${margin.top})`);
+        if (config.withGradient) {
+            setupGradient(svg, gradientId);
+        }
+        const { xScale, yScale, innerWidth, innerHeight } = createScales(data, width, height, margin, x, y, type);
+        if (innerWidth <= 0 || innerHeight <= 0)
+            return;
+        if (config.grid) {
+            drawGrid(g, yScale, innerWidth, styles.grid);
+        }
+        if (config.showAxes) {
+            drawAxes(g, xScale, yScale, innerWidth, innerHeight, margin, config, styles);
+        }
+        const showTooltip = (event, data) => {
+            // Use pointer relative to the full SVG or the group?
+            // If we use d3.pointer(event, g.node()), we get coords relative to g (inside margin).
+            // hoverState requires coords relative to the .responsiveWrapper (div).
+            // .responsiveWrapper contains SVG.
+            // g is translate(margin.left, margin.top).
+            // So px + margin.left is correct relative to wrapper.
+            // pointer(event, g.node()) returns [x_in_g, y_in_g].
+            const [px, py] = select(svgRef.current).select("g").empty()
+                ? [0, 0]
+                : pointer(event, g.node());
+            setHoverState({
+                x: px + margin.left + 20,
+                y: py + margin.top, // margin.top is added because py is relative to g
+                data,
+            });
+        };
+        const hideTooltip = () => setHoverState(null);
+        const ctx = {
+            g,
+            data,
+            xScale,
+            yScale,
+            x,
+            y,
+            innerWidth,
+            innerHeight,
+            margin,
+            config,
+            styles,
+            gradientId,
+            setHoverState,
+            showTooltip,
+            hideTooltip,
+            type,
+        };
+        if (render) {
+            render(ctx);
+        }
+        else if (type === "bar") {
+            drawBars(ctx);
+        }
+        else {
+            drawLineArea(ctx);
+        }
+    }, [data, config, type, gradientId, dimensions, render]);
+    return (_jsx("div", { ref: containerRef, className: clsx(styles.chartContainer, variant === "solid" && styles.solid, flat && styles.flat, className), style: Object.assign({ minHeight: config.height || 400, minWidth: config.width || "100%" }, style), children: _jsxs(Stack, { gap: 4, style: { flex: 1, minHeight: 0 }, children: [title && (_jsx("div", { children: typeof title === "string" ? (_jsx(Text, { style: { margin: 0 }, variant: "h5", children: title })) : (title) })), _jsxs("div", { ref: wrapperRef, className: styles.responsiveWrapper, children: [_jsx("svg", { ref: svgRef, className: styles.chart, style: { display: "block", width: "100%", height: "100%" } }), hoverState && (_jsx("div", { className: styles.tooltipWrapper, style: {
+                                transform: `translate(${hoverState.x}px, ${hoverState.y}px) translateY(-50%)`,
+                            }, children: renderTooltip ? (renderTooltip(hoverState.data)) : (_jsxs(Card, { className: styles.tooltipCard, children: [_jsx("div", { style: { marginBottom: 4 }, children: _jsx(Text, { style: {
+                                                color: "var(--text-secondary)",
+                                                textTransform: "uppercase",
+                                                fontSize: "10px",
+                                                letterSpacing: "0.5px",
+                                            }, variant: "h6", children: x(hoverState.data) }) }), _jsx("div", { children: _jsx(Text, { style: { margin: 0 }, variant: "h4", children: y(hoverState.data) }) })] })) }))] })] }) }));
+}

package/dist/components/Chart/Chart.module.css

@@ -0,0 +1,159 @@
+.chart {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: visible;
+}
+.chart :global .domain {
+  stroke: var(--card-border);
+  stroke-width: var(--border-width);
+}
+.chart :global .domain.hideDomain {
+  stroke: none;
+}
+.chart :global .tick line {
+  stroke: var(--card-border);
+  stroke-width: var(--border-width);
+  opacity: 1;
+}
+.chart :global .tick text {
+  fill: var(--card-border);
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.grid :global(.tick) line {
+  stroke: var(--muted, #ddd);
+  stroke-opacity: 0.5;
+}
+.grid path {
+  display: none;
+}
+
+.path {
+  fill: none;
+  stroke: var(--primary);
+  stroke-width: calc(var(--border-width) * 1.5);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.area {
+  fill: var(--primary);
+  stroke: none;
+}
+
+.bar {
+  fill: var(--primary);
+  stroke: var(--card-border);
+  stroke-width: var(--border-width);
+  stroke-linejoin: round;
+  transition: opacity 0.2s;
+}
+.bar:hover {
+  fill: var(--primary-hover);
+  opacity: 0.8;
+}
+
+.cursorLine {
+  stroke: var(--muted-foreground);
+  stroke-width: 2px;
+  stroke-dasharray: 4 4;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.cursorPoint {
+  fill: var(--primary);
+  stroke: var(--border-strong, #000);
+  stroke-width: var(--border-width);
+  pointer-events: none;
+}
+
+.dot {
+  fill: var(--primary);
+  stroke: var(--border-strong);
+  stroke-width: var(--border-width);
+  transition: r 0.2s;
+  z-index: var(--z-overlay);
+}
+.dot:hover {
+  r: 8;
+  stroke-width: calc(var(--border-width) * 1.5);
+}
+
+.chartContainer {
+  position: relative;
+  background-color: var(--card-bg);
+  border: var(--border-width) solid var(--card-border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-hard);
+  padding: 1rem;
+  overflow: visible;
+  display: flex;
+  flex-direction: column;
+}
+.chartContainer.flat {
+  box-shadow: none;
+}
+.chartContainer.solid {
+  --solid-bg: var(--primary);
+  --solid-fg: var(--primary-foreground);
+  background-color: var(--solid-bg);
+  color: var(--solid-fg);
+  border-color: var(--border-strong);
+  --text-primary: var(--solid-fg);
+  --muted-foreground: color-mix(in srgb, var(--solid-fg) 70%, transparent);
+  --muted: color-mix(in srgb, var(--solid-fg) 20%, transparent);
+  --background: var(--solid-bg);
+  --foreground: var(--solid-fg);
+}
+.chartContainer.solid > * {
+  --primary: var(--solid-fg);
+  --primary-hover: color-mix(in srgb, var(--solid-fg) 80%, transparent);
+}
+.chartContainer.solid :global(.tick) text {
+  fill: var(--solid-fg);
+}
+.chartContainer.solid :global(.domain),
+.chartContainer.solid :global(.tick) line {
+  stroke: var(--solid-fg);
+}
+.chartContainer.solid .tooltipCard {
+  background-color: var(--solid-bg);
+  border-color: var(--solid-fg);
+}
+
+.responsiveWrapper {
+  width: 100%;
+  flex: 1;
+  height: auto;
+  min-height: 0;
+  position: relative;
+  overflow: visible;
+}
+
+.tooltipWrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  z-index: 20;
+  transform: translate(-50%, -120%);
+  transition: transform 0.1s ease-out;
+}
+
+.tooltipCard {
+  padding: 8px 12px;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.axisLabel {
+  fill: var(--foreground);
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  text-anchor: middle;
+}

package/dist/components/Chart/index.d.ts

@@ -0,0 +1 @@
+export * from "./Chart";

package/dist/components/Chart/index.js

@@ -0,0 +1 @@
+export * from "./Chart.js";

package/dist/components/Chart/renderers.d.ts

@@ -0,0 +1,23 @@
+import * as d3Scale from "d3-scale";
+import { ChartConfig, D3Selection, DrawContext, SVGSelection } from "./types";
+export declare function createScales<T>(data: T[], width: number, height: number, margin: {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}, x: (d: T) => any, y: (d: T) => number, type?: "line" | "area" | "bar"): {
+    xScale: any;
+    yScale: d3Scale.ScaleLinear<number, number, never>;
+    innerWidth: number;
+    innerHeight: number;
+};
+export declare function setupGradient(svg: SVGSelection, gradientId: string): void;
+export declare function drawGrid(g: D3Selection, yScale: any, innerWidth: number, className: string): void;
+export declare function drawAxes(g: D3Selection, xScale: any, yScale: any, innerWidth: number, innerHeight: number, margin: {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}, config: ChartConfig, styles: Record<string, string>): void;
+export declare function drawLineArea<T>({ g, data, xScale, yScale, x, y, innerWidth, innerHeight, config, styles, gradientId, setHoverState, margin, type, }: DrawContext<T>): void;
+export declare function drawBars<T>({ g, data, xScale, yScale, x, y, innerHeight, styles, setHoverState, margin, }: DrawContext<T>): void;