doom-design-system 0.4.9 → 0.4.10

package/dist/components/Chart/Chart.js

@@ -9,13 +9,19 @@ 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, withFrame = true, onValueChange, }) {
+    const TOOLTIP_OFFSET = 20;
+    const HIDE_DELAY_MS = 16;
+    const MOBILE_BREAKPOINT = 480;
     const svgRef = useRef(null);
     const containerRef = useRef(null);
+    const wrapperRef = useRef(null);
     const tooltipRef = useRef(null);
     const tooltipPosRef = useRef({ x: 0, y: 0 });
     const hideTimeoutRef = useRef(null);
     const gradientId = React.useId().replace(/:/g, "");
     const [activeData, setActiveData] = useState(null);
+    const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+    const isMobile = dimensions.width > 0 && dimensions.width < MOBILE_BREAKPOINT;
     useEffect(() => {
         onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(activeData !== null && activeData !== void 0 ? activeData : null);
     }, [activeData, onValueChange]);
@@ -23,19 +29,19 @@ export function Chart({ data, type = "line", variant = "default", x, y, d3Config
             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,
+            left: (d3Config === null || d3Config === void 0 ? void 0 : d3Config.yAxisLabel) ? 85 : 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 });
-    const isMobile = dimensions.width > 0 && dimensions.width < 480;
     React.useLayoutEffect(() => {
         if (activeData && tooltipRef.current && wrapperRef.current) {
             const { x, y } = tooltipPosRef.current;
             const rect = wrapperRef.current.getBoundingClientRect();
+            const tooltipWidth = tooltipRef.current.offsetWidth;
             const absX = rect.left + x;
-            const isRightEdge = absX > window.innerWidth - 220;
-            const offsetX = isRightEdge ? x - 20 : x + 20;
-            tooltipRef.current.style.transform = `translate3d(${offsetX}px, calc(${y}px - 50%), 0)`;
+            const isRightEdge = absX + tooltipWidth + TOOLTIP_OFFSET > window.innerWidth - 10;
+            const xOffset = isRightEdge
+                ? -TOOLTIP_OFFSET - tooltipWidth
+                : TOOLTIP_OFFSET;
+            tooltipRef.current.style.transform = `translate3d(${x + xOffset}px, calc(${y}px - 50%), 0)`;
         }
     }, [activeData]);
     useEffect(() => {
@@ -46,8 +52,9 @@ export function Chart({ data, type = "line", variant = "default", x, y, d3Config
         };
     }, []);
     useEffect(() => {
-        if (!wrapperRef.current)
+        if (!wrapperRef.current) {
             return;
+        }
         const resizeObserver = new ResizeObserver((entries) => {
             const entry = entries[0];
             if (entry) {
@@ -72,9 +79,10 @@ export function Chart({ data, type = "line", variant = "default", x, y, d3Config
                 ? (d3Config === null || d3Config === void 0 ? void 0 : d3Config.xAxisLabel)
                     ? 50
                     : 30
-                : config.margin.bottom, left: isMobile ? ((d3Config === null || d3Config === void 0 ? void 0 : d3Config.yAxisLabel) ? 50 : 30) : config.margin.left });
-        if (width <= 0 || height <= 0)
+                : config.margin.bottom, left: isMobile ? ((d3Config === null || d3Config === void 0 ? void 0 : d3Config.yAxisLabel) ? 65 : 30) : config.margin.left });
+        if (width <= 0 || height <= 0) {
             return;
+        }
         const svg = select(svgRef.current);
         svg.selectAll("*").remove();
         const g = svg
@@ -86,8 +94,9 @@ export function Chart({ data, type = "line", variant = "default", x, y, d3Config
             setupGradient(svg, gradientId);
         }
         const { xScale, yScale, innerWidth, innerHeight } = createScales(data, width, height, margin, x, y, type);
-        if (innerWidth <= 0 || innerHeight <= 0)
+        if (innerWidth <= 0 || innerHeight <= 0) {
             return;
+        }
         if (config.grid) {
             drawGrid(g, yScale, innerWidth, styles.grid);
         }
@@ -102,10 +111,13 @@ export function Chart({ data, type = "line", variant = "default", x, y, d3Config
             tooltipPosRef.current = { x: tx, y: ty };
             if (tooltipRef.current && wrapperRef.current) {
                 const rect = wrapperRef.current.getBoundingClientRect();
+                const tooltipWidth = tooltipRef.current.offsetWidth;
                 const absX = rect.left + tx;
-                const isRightEdge = absX > window.innerWidth - 220;
-                const offsetX = isRightEdge ? tx - 20 : tx + 20;
-                tooltipRef.current.style.transform = `translate3d(${offsetX}px, calc(${ty}px - 50%), 0)`;
+                const isRightEdge = absX + tooltipWidth + TOOLTIP_OFFSET > window.innerWidth - 10;
+                const xOffset = isRightEdge
+                    ? -TOOLTIP_OFFSET - tooltipWidth
+                    : TOOLTIP_OFFSET;
+                tooltipRef.current.style.transform = `translate3d(${tx + xOffset}px, calc(${ty}px - 50%), 0)`;
             }
             setActiveData((prev) => (prev === data ? prev : data));
         };
@@ -113,13 +125,12 @@ export function Chart({ data, type = "line", variant = "default", x, y, d3Config
             const [px, py] = select(svgRef.current).select("g").empty()
                 ? [0, 0]
                 : pointer(event, g.node());
-            const tx = px + margin.left + 20;
+            const tx = px + margin.left;
             const ty = py + margin.top;
             updateTooltip(tx, ty, data);
         };
         const hideTooltip = () => {
-            // Delay prevents flickering when moving between adjacent elements
-            hideTimeoutRef.current = setTimeout(() => setActiveData(null), 16);
+            hideTimeoutRef.current = setTimeout(() => setActiveData(null), HIDE_DELAY_MS);
         };
         const ctx = {
             g,

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

@@ -1,23 +1,50 @@
+/**
+ * Chart Renderers
+ *
+ * D3-based rendering functions for charts. Each renderer handles
+ * drawing a specific chart type (line, area, bar) and managing
+ * user interactions (hover, touch).
+ */
 import * as d3Scale from "d3-scale";
 import { ChartConfig, D3Selection, DrawContext, SVGSelection } from "./types";
+/**
+ * Creates X and Y scales based on data and chart dimensions.
+ * Automatically selects appropriate scale type (linear, point, band).
+ */
 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;
+}, x: (d: T) => string | number, y: (d: T) => number, type?: "line" | "area" | "bar"): {
+    xScale: d3Scale.ScaleLinear<number, number, never> | d3Scale.ScalePoint<string> | d3Scale.ScaleBand<string>;
     yScale: d3Scale.ScaleLinear<number, number, never>;
     innerWidth: number;
     innerHeight: number;
 };
+/**
+ * Sets up an SVG gradient for area chart fills.
+ */
 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: {
+/**
+ * Draws horizontal grid lines behind the chart.
+ */
+export declare function drawGrid(g: D3Selection, yScale: d3Scale.ScaleLinear<number, number>, innerWidth: number, className: string): void;
+/**
+ * Draws X and Y axes with labels.
+ * Automatically adjusts tick count to prevent label overlap.
+ */
+export declare function drawAxes(g: D3Selection, xScale: d3Scale.ScaleLinear<number, number> | d3Scale.ScalePoint<string> | d3Scale.ScaleBand<string>, yScale: d3Scale.ScaleLinear<number, number>, innerWidth: number, innerHeight: number, margin: {
     top: number;
     right: number;
     bottom: number;
     left: number;
 }, config: ChartConfig, styles: Record<string, string>, isMobile: boolean): void;
+/**
+ * Renders line and area charts with interactive cursor tracking.
+ */
 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;
+/**
+ * Renders bar charts with hover highlighting.
+ */
+export declare function drawBars<T>({ g, data, xScale, yScale, x, y, innerWidth, innerHeight, styles, setHoverState, margin, }: DrawContext<T>): void;

package/dist/components/Chart/renderers.js

@@ -1,9 +1,71 @@
+/**
+ * Chart Renderers
+ *
+ * D3-based rendering functions for charts. Each renderer handles
+ * drawing a specific chart type (line, area, bar) and managing
+ * user interactions (hover, touch).
+ */
 import * as d3Array from "d3-array";
 import * as d3Axis from "d3-axis";
 import * as d3Scale from "d3-scale";
 import * as d3Selection from "d3-selection";
 import * as d3Shape from "d3-shape";
 const d3 = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, d3Scale), d3Shape), d3Selection), d3Axis), d3Array);
+// ============================================================================
+// UTILITIES
+// ============================================================================
+/**
+ * Extracts pointer coordinates from mouse or touch events.
+ * Uses the parent SVG as reference for accurate positioning across all devices.
+ */
+function getPointerCoords(event, gElement, margin) {
+    if (!gElement) {
+        return [0, 0];
+    }
+    const svg = gElement.ownerSVGElement;
+    if (!svg) {
+        return [0, 0];
+    }
+    const rect = svg.getBoundingClientRect();
+    let clientX;
+    let clientY;
+    if ("touches" in event && event.touches.length > 0) {
+        clientX = event.touches[0].clientX;
+        clientY = event.touches[0].clientY;
+    }
+    else if ("changedTouches" in event && event.changedTouches.length > 0) {
+        clientX = event.changedTouches[0].clientX;
+        clientY = event.changedTouches[0].clientY;
+    }
+    else {
+        clientX = event.clientX;
+        clientY = event.clientY;
+    }
+    return [clientX - rect.left - margin.left, clientY - rect.top - margin.top];
+}
+/**
+ * Creates an SVG path for a rectangle with rounded top corners.
+ * Used for bar charts to create a softer, modern look.
+ */
+function createRoundedTopBarPath(xPos, yPos, width, height, radius) {
+    const r = Math.min(radius, width / 2, height);
+    return `
+    M ${xPos},${yPos + height}
+    L ${xPos},${yPos + r}
+    A ${r},${r} 0 0 1 ${xPos + r},${yPos}
+    L ${xPos + width - r},${yPos}
+    A ${r},${r} 0 0 1 ${xPos + width},${yPos + r}
+    L ${xPos + width},${yPos + height}
+    Z
+  `;
+}
+// ============================================================================
+// SCALE & AXIS SETUP
+// ============================================================================
+/**
+ * Creates X and Y scales based on data and chart dimensions.
+ * Automatically selects appropriate scale type (linear, point, band).
+ */
 export function createScales(data, width, height, margin, x, y, type) {
     const innerWidth = width - margin.left - margin.right;
     const innerHeight = height - margin.top - margin.bottom;
@@ -37,6 +99,9 @@ export function createScales(data, width, height, margin, x, y, type) {
         .range([innerHeight, 0]);
     return { xScale, yScale, innerWidth, innerHeight };
 }
+/**
+ * Sets up an SVG gradient for area chart fills.
+ */
 export function setupGradient(svg, gradientId) {
     const defs = svg.append("defs");
     const gradient = defs
@@ -57,6 +122,9 @@ export function setupGradient(svg, gradientId) {
         .attr("stop-color", "var(--primary)")
         .attr("stop-opacity", 0);
 }
+/**
+ * Draws horizontal grid lines behind the chart.
+ */
 export function drawGrid(g, yScale, innerWidth, className) {
     g.append("g")
         .attr("class", className)
@@ -65,12 +133,15 @@ export function drawGrid(g, yScale, innerWidth, className) {
         .tickSize(-innerWidth)
         .tickFormat(() => ""));
 }
+/**
+ * Draws X and Y axes with labels.
+ * Automatically adjusts tick count to prevent label overlap.
+ */
 export function drawAxes(g, xScale, yScale, innerWidth, innerHeight, margin, config, styles, isMobile) {
-    const tickWidth = 40; // Approx max width of a label "SEPT"
-    const maxTicks = Math.floor(innerWidth / tickWidth);
+    const TICK_WIDTH = 40; // Approximate width of a tick label
+    const maxTicks = Math.floor(innerWidth / TICK_WIDTH);
     const axisBottom = d3.axisBottom(xScale);
-    // If discrete scale (has domain array), reduce ticks to prevent overlap
-    if (xScale.domain && Array.isArray(xScale.domain())) {
+    if ("domain" in xScale && Array.isArray(xScale.domain())) {
         const domain = xScale.domain();
         if (domain.length > maxTicks) {
             const step = Math.ceil(domain.length / maxTicks);
@@ -80,8 +151,7 @@ export function drawAxes(g, xScale, yScale, innerWidth, innerHeight, margin, con
     else {
         axisBottom.ticks(Math.min(5, maxTicks));
     }
-    const xAxis = g
-        .append("g")
+    g.append("g")
         .attr("transform", `translate(0,${innerHeight})`)
         .call(axisBottom);
     const yAxis = g.append("g").call(d3
@@ -107,6 +177,12 @@ export function drawAxes(g, xScale, yScale, innerWidth, innerHeight, margin, con
             .text(config.yAxisLabel);
     }
 }
+// ============================================================================
+// CHART RENDERERS
+// ============================================================================
+/**
+ * Renders line and area charts with interactive cursor tracking.
+ */
 export function drawLineArea({ g, data, xScale, yScale, x, y, innerWidth, innerHeight, config, styles, gradientId, setHoverState, margin, type, }) {
     const lineGenerator = d3
         .line()
@@ -146,14 +222,14 @@ export function drawLineArea({ g, data, xScale, yScale, x, y, innerWidth, innerH
             .attr("cy", (d) => yScale(y(d)))
             .attr("r", 5);
     }
-    // Interaction Overlay
     const overlay = g
         .append("rect")
         .attr("class", "overlay")
         .attr("width", innerWidth)
         .attr("height", innerHeight)
         .style("fill", "transparent")
-        .style("cursor", "crosshair");
+        .style("cursor", "crosshair")
+        .style("touch-action", "none");
     const cursorLine = g
         .append("line")
         .attr("class", styles.cursorLine)
@@ -165,59 +241,65 @@ export function drawLineArea({ g, data, xScale, yScale, x, y, innerWidth, innerH
         .attr("class", styles.cursorPoint)
         .attr("r", 6)
         .style("opacity", 0);
-    const interactionHandler = (event) => {
-        var _a;
-        if (event.type.startsWith("touch")) {
-            event.preventDefault();
-        }
-        const [pointerX, pointerY] = d3.pointer(event);
-        let selectedData = null;
-        if (xScale.invert) {
+    const findNearestPoint = (pointerX) => {
+        if ("invert" in xScale && typeof xScale.invert === "function") {
             const x0 = xScale.invert(pointerX);
             const bisect = d3.bisector(x).left;
             const i = bisect(data, x0, 1);
             const d0 = data[i - 1];
             const d1 = data[i];
             if (!d0) {
-                selectedData = d1;
-            }
-            else if (!d1) {
-                selectedData = d0;
+                return d1;
             }
-            else {
-                const d0Dist = x0 - x(d0);
-                const d1Dist = x(d1) - x0;
-                selectedData = d0Dist > d1Dist ? d1 : d0;
+            if (!d1) {
+                return d0;
             }
+            const d0Dist = x0 - x(d0);
+            const d1Dist = x(d1) - x0;
+            return d0Dist > d1Dist ? d1 : d0;
         }
-        else {
+        else if ("step" in xScale && typeof xScale.step === "function") {
             const step = xScale.step();
             const index = Math.round(pointerX / step);
-            selectedData = data[Math.min(Math.max(0, index), data.length - 1)];
+            return data[Math.min(Math.max(0, index), data.length - 1)];
+        }
+        return null;
+    };
+    const handleInteraction = (event) => {
+        var _a;
+        if (event.type.startsWith("touch") && event.cancelable) {
+            event.preventDefault();
         }
+        const [pointerX, pointerY] = getPointerCoords(event, g.node(), margin);
+        const selectedData = findNearestPoint(pointerX);
         if (selectedData) {
             const cx = (_a = xScale(x(selectedData))) !== null && _a !== void 0 ? _a : 0;
             const cy = yScale(y(selectedData));
             cursorLine.attr("x1", cx).attr("x2", cx).style("opacity", 1);
             cursorDot.attr("cx", cx).attr("cy", cy).style("opacity", 1);
+            const isTouch = event.type.startsWith("touch");
             setHoverState({
-                x: pointerX + margin.left,
-                y: pointerY + margin.top,
+                x: (isTouch ? cx : pointerX) + margin.left,
+                y: (isTouch ? cy : pointerY) + margin.top, // Snap Y to point on touch, cursor on mouse
                 data: selectedData,
             });
         }
     };
     overlay
-        .on("mousemove touchmove touchstart", interactionHandler)
-        .on("mouseleave touchend", () => {
+        .on("mousemove touchmove touchstart", handleInteraction)
+        .on("mouseleave touchend touchcancel", () => {
         cursorLine.style("opacity", 0);
         cursorDot.style("opacity", 0);
         setHoverState(null);
     });
 }
-export function drawBars({ g, data, xScale, yScale, x, y, innerHeight, styles, setHoverState, margin, }) {
-    const radius = 4; // Matching --radius token
-    g.selectAll(".bar")
+/**
+ * Renders bar charts with hover highlighting.
+ */
+export function drawBars({ g, data, xScale, yScale, x, y, innerWidth, innerHeight, styles, setHoverState, margin, }) {
+    const BAR_RADIUS = 4;
+    const bars = g
+        .selectAll(".bar")
         .data(data)
         .enter()
         .append("path")
@@ -225,28 +307,60 @@ export function drawBars({ g, data, xScale, yScale, x, y, innerHeight, styles, s
         .attr("d", (d) => {
         const xVal = xScale(x(d)) || 0;
         const yVal = yScale(y(d));
-        const w = xScale.bandwidth ? xScale.bandwidth() : 10;
+        const w = "bandwidth" in xScale ? xScale.bandwidth() : 10;
         const h = innerHeight - yVal;
-        const r = Math.min(radius, w / 2, h);
-        return `
-        M ${xVal},${yVal + h}
-        L ${xVal},${yVal + r}
-        A ${r},${r} 0 0 1 ${xVal + r},${yVal}
-        L ${xVal + w - r},${yVal}
-        A ${r},${r} 0 0 1 ${xVal + w},${yVal + r}
-        L ${xVal + w},${yVal + h}
-        Z
-      `;
-    })
-        .on("mouseenter mousemove touchstart", (event, d) => {
-        if (event.type === "touchstart")
+        return createRoundedTopBarPath(xVal, yVal, w, h, BAR_RADIUS);
+    });
+    const overlay = g
+        .append("rect")
+        .attr("class", "overlay")
+        .attr("width", innerWidth)
+        .attr("height", innerHeight)
+        .style("fill", "transparent")
+        .style("cursor", "crosshair")
+        .style("touch-action", "none");
+    const findNearestBar = (pointerX) => {
+        const bandwidth = "bandwidth" in xScale ? xScale.bandwidth() : 10;
+        let nearestData = null;
+        let minDist = Infinity;
+        for (const d of data) {
+            const barX = xScale(x(d)) || 0;
+            const barCenter = barX + bandwidth / 2;
+            const dist = Math.abs(pointerX - barCenter);
+            if (dist < minDist) {
+                minDist = dist;
+                nearestData = d;
+            }
+        }
+        return nearestData;
+    };
+    const handleInteraction = (event) => {
+        if (event.type.startsWith("touch") && event.cancelable) {
             event.preventDefault();
-        const [px, py] = d3Selection.pointer(event, g.node());
-        setHoverState({
-            x: px + margin.left,
-            y: py + margin.top,
-            data: d,
-        });
-    })
-        .on("mouseleave touchend", () => setHoverState(null));
+        }
+        const [pointerX, pointerY] = getPointerCoords(event, g.node(), margin);
+        const selectedData = findNearestBar(pointerX);
+        if (selectedData) {
+            bars.style("opacity", (d) => (d === selectedData ? 1 : 0.6));
+            let hoverX = pointerX;
+            let hoverY = pointerY;
+            if (event.type.startsWith("touch")) {
+                const xVal = xScale(x(selectedData)) || 0;
+                const bandwidth = "bandwidth" in xScale ? xScale.bandwidth() : 10;
+                hoverX = xVal + bandwidth / 2;
+                hoverY = yScale(y(selectedData));
+            }
+            setHoverState({
+                x: hoverX + margin.left,
+                y: hoverY + margin.top,
+                data: selectedData,
+            });
+        }
+    };
+    overlay
+        .on("mousemove touchmove touchstart", handleInteraction)
+        .on("mouseleave touchend touchcancel", () => {
+        bars.style("opacity", 1);
+        setHoverState(null);
+    });
 }

package/dist/components/Image/Image.js

@@ -95,7 +95,7 @@ export function Image(_a) {
             }
         }
         setStatus("error");
-        setShowSkeleton(false); // Remove skeleton immediately on error to show broken image icon or alt
+        setShowSkeleton(false); // Remove skeleton immediately on error
         onError === null || onError === void 0 ? void 0 : onError(e);
     }, [fallbackSrc, status, onError]);
     return (_jsxs("div", { className: clsx(styles.wrapper, rounded && styles.rounded, className), style: Object.assign({ aspectRatio: computedAspectRatio, width: toCssValue(width), height: toCssValue(height) }, style), children: [_jsx("div", { "aria-hidden": "true", className: clsx(styles.skeletonLayer, status === "loaded" && styles.fadeOut), children: showSkeleton && (_jsx(Skeleton, { style: {

package/dist/components/Layout/Layout.d.ts

@@ -25,7 +25,8 @@ export interface LayoutProps extends React.HTMLAttributes<HTMLElement> {
 export interface GridProps extends LayoutProps {
     /**
      * Defines the columns of the grid.
-     * Accepts a number (e.g., `3` for 3 equal columns) or a CSS string (e.g., `"1fr 2fr"`).
+     * Accepts a number (e.g., `3` for 3 equal columns) or a CSS string
+     * (e.g., `"1fr 2fr"`).
      * @default "1fr"
      */
     columns?: string | number;
@@ -38,7 +39,8 @@ export interface GridProps extends LayoutProps {
 }
 /**
  * A CSS Grid container for creating two-dimensional layouts.
- * Use this when you need precise control over columns and rows, or complex grid placements.
+ * Use this when you need precise control over columns and rows, or complex
+ * grid placements.
  */
 export declare function Grid({ children, columns, gap, className, style, as: Component, ...props }: GridProps): import("react/jsx-runtime").JSX.Element;
 export interface FlexProps extends LayoutProps {
@@ -64,7 +66,8 @@ export interface FlexProps extends LayoutProps {
      */
     gap?: Spacing;
     /**
-     * Controls whether flex items are forced onto one line or can wrap onto multiple lines.
+     * Controls whether flex items are forced onto one line or can wrap onto
+     * multiple lines.
      * @default false
      */
     wrap?: boolean | "wrap" | "nowrap" | "wrap-reverse";
@@ -87,20 +90,22 @@ export interface StackProps extends Omit<FlexProps, "direction"> {
  * A specialized Flex container explicitly optimized for vertical stacking.
  * Use this for lists, form fields, card content, or any group of elements
  * that should be arranged vertically with consistent spacing.
- * Note: While it defaults to column, `direction="row"` is supported for semantic overrides.
+ * Note: While it defaults to column, `direction="row"` is supported for
+ * semantic overrides.
  */
 export declare function Stack({ children, direction, gap, align, ...props }: StackProps): import("react/jsx-runtime").JSX.Element;
 export interface SwitcherProps extends FlexProps {
     /**
-     * The breakpoint threshold at which the layout switches from horizontal to vertical.
-     * e.g., "xs" means it will be horizontal on screens larger than "xs" (480px), and vertical below.
+     * The breakpoint threshold at which the layout switches from horizontal to
+     * vertical. e.g., "xs" means it will be horizontal on screens larger than
+     * "xs" (480px), and vertical below.
      * @default "xs"
      */
     threshold?: "xxs" | "xs" | "sm" | "md";
 }
 /**
- * A responsive layout component that switches from horizontal to vertical layout
- * based on a container query or breakpoint threshold.
+ * A responsive layout component that switches from horizontal to vertical
+ * layout based on a container query or breakpoint threshold.
  * Use this for "sidebar + main content" layouts or any pattern that needs
  * to stack on smaller screens but sit side-by-side on larger ones.
  */

package/dist/components/Layout/Layout.js

@@ -34,7 +34,8 @@ function resolveGap(gap) {
 }
 /**
  * A CSS Grid container for creating two-dimensional layouts.
- * Use this when you need precise control over columns and rows, or complex grid placements.
+ * Use this when you need precise control over columns and rows, or complex
+ * grid placements.
  */
 export function Grid(_a) {
     var { children, columns = "1fr", gap = 4, className, style, as: Component = "div" } = _a, props = __rest(_a, ["children", "columns", "gap", "className", "style", "as"]);
@@ -57,15 +58,16 @@ export function Flex(_a) {
  * A specialized Flex container explicitly optimized for vertical stacking.
  * Use this for lists, form fields, card content, or any group of elements
  * that should be arranged vertically with consistent spacing.
- * Note: While it defaults to column, `direction="row"` is supported for semantic overrides.
+ * Note: While it defaults to column, `direction="row"` is supported for
+ * semantic overrides.
  */
 export function Stack(_a) {
     var { children, direction = "column", gap = 4, align = "stretch" } = _a, props = __rest(_a, ["children", "direction", "gap", "align"]);
     return (_jsx(Flex, Object.assign({ align: align, direction: direction, gap: gap }, props, { children: children })));
 }
 /**
- * A responsive layout component that switches from horizontal to vertical layout
- * based on a container query or breakpoint threshold.
+ * A responsive layout component that switches from horizontal to vertical
+ * layout based on a container query or breakpoint threshold.
  * Use this for "sidebar + main content" layouts or any pattern that needs
  * to stack on smaller screens but sit side-by-side on larger ones.
  */

package/dist/components/Table/Table.js

@@ -29,7 +29,8 @@ export function Table({ data, columns, enablePagination = true, enableFiltering
         onGlobalFilterChange: setGlobalFilter,
         onPaginationChange: setPagination,
         getCoreRowModel: getCoreRowModel(),
-        getSortedRowModel: getSortedRowModel(), // Always provide the model, enableSorting controls if it's used
+        // Always provide the model, enableSorting controls usage
+        getSortedRowModel: getSortedRowModel(),
         getPaginationRowModel: enablePagination
             ? getPaginationRowModel()
             : undefined,

package/dist/styles/globals.css

@@ -1,11 +1,14 @@
 /* _reset.scss */
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }
 
-html, body {
+html,
+body {
   height: 100%;
 }
 
@@ -17,16 +20,29 @@ body {
   font-family: var(--font-sans, system-ui, sans-serif);
 }
 
-img, picture, video, canvas, svg {
+img,
+picture,
+video,
+canvas,
+svg {
   display: block;
   max-width: 100%;
 }
 
-input, button, textarea, select {
+input,
+button,
+textarea,
+select {
   font: inherit;
 }
 
-p, h1, h2, h3, h4, h5, h6 {
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   overflow-wrap: break-word;
 }