@jiwambe/components 0.3.5 → 0.3.6

package/dist/client.d.ts

@@ -36,5 +36,13 @@ export { Toggle, ToggleButton } from './components/Toggle/Toggle';
 export type { ToggleProps, ToggleButtonProps, ToggleOption, ToggleSize } from './components/Toggle/Toggle';
 export { ProductImage, ProductImageGallery } from './components/ProductImage/ProductImage';
 export type { ProductImageProps, ProductImageGalleryProps, GalleryImage } from './components/ProductImage/ProductImage';
+export { Dialog } from './components/Dialog/Dialog';
+export type { DialogProps } from './components/Dialog/Dialog';
+export { DataTable } from './components/DataTable/DataTable';
+export type { DataTableProps } from './components/DataTable/DataTable';
+export { LineGraph } from './components/LineGraph/LineGraph';
+export { BarGraph } from './components/BarGraph/BarGraph';
+export { Card } from './components/Card/Card';
 export type { ButtonVariant, ButtonSize, AccordionItem, AccordionVariant, AccordionSpecItem, FAQItem, TabItem, } from './types';
+export type { CardProps } from './components/Card/Card';
 //# sourceMappingURL=client.d.ts.map

package/dist/client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,YAAY,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAE9D,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAC7E,YAAY,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAE5F,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAC;AAC3C,YAAY,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAC;AAC3C,YAAY,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AACvD,YAAY,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAEjE,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE5E,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AACvD,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAE/E,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC7D,YAAY,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAEvE,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC1D,YAAY,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAEpE,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE5E,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC7D,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAExF,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC7D,YAAY,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAElF,OAAO,EAAE,UAAU,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AACvF,YAAY,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAExF,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,YAAY,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAE7E,OAAO,EAAE,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAChE,YAAY,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAEvF,OAAO,EAAE,aAAa,EAAE,MAAM,0CAA0C,CAAC;AACzE,YAAY,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAEnG,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,YAAY,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAE9D,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAClE,YAAY,EAAE,WAAW,EAAE,iBAAiB,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAE3G,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAC3F,YAAY,EAAE,iBAAiB,EAAE,wBAAwB,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC;AAExH,YAAY,EACV,aAAa,EACb,UAAU,EACV,aAAa,EACb,gBAAgB,EAChB,iBAAiB,EACjB,OAAO,EACP,OAAO,GACR,MAAM,SAAS,CAAC"}
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"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"}

package/dist/client.js

@@ -18,15 +18,25 @@ import { CheckboxGroup } from "./components/CheckboxGroup/CheckboxGroup.js";
 import { Slider } from "./components/Slider/Slider.js";
 import { Toggle, ToggleButton } from "./components/Toggle/Toggle.js";
 import { ProductImage, ProductImageGallery } from "./components/ProductImage/ProductImage.js";
+import { Dialog } from "./components/Dialog/Dialog.js";
+import { DataTable } from "./components/DataTable/DataTable.js";
+import { LineGraph } from "./components/LineGraph/LineGraph.js";
+import { BarGraph } from "./components/BarGraph/BarGraph.js";
+import { Card } from "./components/Card/Card.js";
 export {
   Accordion,
   AccordionSpecs,
+  BarGraph,
   Button,
+  Card,
   CheckboxGroup,
+  DataTable,
   DateInput,
+  Dialog,
   Drawer,
   EAST_AFRICA_COUNTRIES,
   FAQ,
+  LineGraph,
   Overlay,
   PhoneInput,
   Popover,

package/dist/client.js.map

@@ -1 +1 @@
-{"version":3,"file":"client.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"client.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Accordion.test.d.ts.map

package/dist/components/Accordion/Accordion.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.test.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.test.tsx"],"names":[],"mappings":""}

package/dist/components/BarGraph/BarGraph.d.ts

@@ -0,0 +1,66 @@
+export interface BarGraphDataPoint {
+    /** Category label rendered on the X axis */
+    x: string | number;
+    /** Numeric value rendered as bar height */
+    y: number;
+}
+export interface BarGraphSeries {
+    /** Unique identifier for this series */
+    id: string;
+    /** Display label shown in legend and tooltip */
+    label: string;
+    /** Data points — x is the category label, y is the numeric value */
+    data: BarGraphDataPoint[];
+    /**
+     * Optional color override. Must be a CSS color or Jiwambe CSS variable
+     * e.g. 'var(--color-green-500)'. Falls back to SERIES_COLORS palette.
+     */
+    color?: string;
+    /** Hide this series from the chart but keep it in the legend */
+    hidden?: boolean;
+}
+export interface BarGraphProps {
+    /** Array of data series to display */
+    series: BarGraphSeries[];
+    /** Optional title displayed above the chart */
+    title?: string;
+    /** Optional description displayed below the title */
+    description?: string;
+    /** Label for the X-axis */
+    xAxisLabel?: string;
+    /** Label for the Y-axis */
+    yAxisLabel?: string;
+    /** Custom formatter for X-axis ticks */
+    xTickFormatter?: (value: string | number) => string;
+    /** Custom formatter for Y-axis ticks */
+    yTickFormatter?: (value: number) => string;
+    /** Custom formatter for tooltip values and labels */
+    tooltipValueFormatter?: (value: number, seriesLabel: string) => string;
+    /** height of the chart in px. @default 320 */
+    height?: number;
+    /** Whether the chart is in a loading state */
+    loading?: boolean;
+    /** Whether to show the background grid. @default true */
+    showGrid?: boolean;
+    /** Position of the legend. @default 'bottom' */
+    legendPosition?: 'top' | 'bottom' | 'none';
+    /** Whether to allow toggling series visibility via the legend. @default true */
+    interactiveLegend?: boolean;
+    /** Callback fired when a bar is clicked */
+    onBarClick?: (point: BarGraphDataPoint, series: BarGraphSeries) => void;
+    /** Width of each bar in px. @default 24 */
+    barSize?: number;
+    /** Corner radius applied to the top of each bar. @default 4 */
+    barRadius?: number;
+    /** Gap between bar groups as a fraction or number. @default '20%' */
+    barCategoryGap?: string | number;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * A themed Bar Graph component for Jiwambe.
+ * Renders grouped or single series data using SVG-based Recharts.
+ * Integrates with design tokens for colors, spacing, and typography.
+ */
+export declare function BarGraph({ series, title, description, xAxisLabel, yAxisLabel, xTickFormatter, yTickFormatter, tooltipValueFormatter, height, loading, showGrid, legendPosition, interactiveLegend, onBarClick, barSize, barRadius, barCategoryGap, className, }: BarGraphProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BarGraph.d.ts.map

package/dist/components/BarGraph/BarGraph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarGraph.d.ts","sourceRoot":"","sources":["../../../src/components/BarGraph/BarGraph.tsx"],"names":[],"mappings":"AAwBA,MAAM,WAAW,iBAAiB;IAChC,4CAA4C;IAC5C,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACnB,2CAA2C;IAC3C,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,cAAc;IAC7B,wCAAwC;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,IAAI,EAAE,iBAAiB,EAAE,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gEAAgE;IAChE,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,aAAa;IAC5B,sCAAsC;IACtC,MAAM,EAAE,cAAc,EAAE,CAAC;IACzB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2BAA2B;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2BAA2B;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wCAAwC;IACxC,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,MAAM,CAAC;IACpD,wCAAwC;IACxC,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C,qDAAqD;IACrD,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,MAAM,CAAC;IACvE,8CAA8C;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gDAAgD;IAChD,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,gFAAgF;IAChF,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,2CAA2C;IAC3C,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,EAAE,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IACxE,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,KAAK,EACL,WAAW,EACX,UAAU,EACV,UAAU,EACV,cAAc,EACd,cAAc,EACd,qBAAqB,EACrB,MAAY,EACZ,OAAe,EACf,QAAe,EACf,cAAyB,EACzB,iBAAwB,EACxB,UAAU,EACV,OAAY,EACZ,SAAa,EACb,cAAsB,EACtB,SAAc,GACf,EAAE,aAAa,2CA+Hf"}

package/dist/components/BarGraph/BarGraph.js

@@ -0,0 +1,151 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useMemo } from "react";
+import { ResponsiveContainer, BarChart, CartesianGrid, XAxis, YAxis, Tooltip, Bar } from "recharts";
+import { Typography } from "../Typography/Typography.js";
+import { Stack } from "../Stack/Stack.js";
+import { LineGraphTooltip } from "../LineGraph/LineGraphTooltip.js";
+import { LineGraphLegend } from "../LineGraph/LineGraphLegend.js";
+import { validateSeries, transformToBarChartData, formatAxisTick, getSeriesColor } from "../LineGraph/lineGraphUtils.js";
+import { BarGraphSkeleton } from "./BarGraphSkeleton.js";
+function BarGraph({
+  series,
+  title,
+  description,
+  xAxisLabel,
+  yAxisLabel,
+  xTickFormatter,
+  yTickFormatter,
+  tooltipValueFormatter,
+  height = 320,
+  loading = false,
+  showGrid = true,
+  legendPosition = "bottom",
+  interactiveLegend = true,
+  onBarClick,
+  barSize = 24,
+  barRadius = 4,
+  barCategoryGap = "20%",
+  className = ""
+}) {
+  const [mounted, setMounted] = useState(false);
+  const [hiddenIds, setHiddenIds] = useState([]);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  useEffect(() => {
+    validateSeries(series);
+  }, [series]);
+  const chartData = useMemo(() => transformToBarChartData(series), [series]);
+  const handleToggle = (id) => {
+    setHiddenIds(
+      (prev) => prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]
+    );
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsx(BarGraphSkeleton, { height, showTitle: !!(title || description) });
+  }
+  const renderLegend = () => /* @__PURE__ */ jsx(
+    LineGraphLegend,
+    {
+      series,
+      hiddenIds,
+      onToggle: handleToggle,
+      interactive: interactiveLegend
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "figure",
+    {
+      role: "figure",
+      "aria-label": title ?? "Bar graph",
+      className: ["flex flex-col w-full jiwambe-bar-graph", className].filter(Boolean).join(" "),
+      children: [
+        (title || description) && /* @__PURE__ */ jsxs(Stack, { spacing: "space-1", className: "mb-space-4", children: [
+          title && /* @__PURE__ */ jsx(Typography, { variant: "title-md", className: "font-bold text-text-primary", children: title }),
+          description && /* @__PURE__ */ jsx(Typography, { variant: "text-xs", className: "text-text-secondary", children: description })
+        ] }),
+        legendPosition === "top" && renderLegend(),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: { height: `${height}px`, width: "100%", minWidth: 0, minHeight: 0 },
+            className: "relative",
+            children: mounted && /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+              BarChart,
+              {
+                data: chartData,
+                margin: { top: 10, right: 10, left: 0, bottom: 0 },
+                barCategoryGap,
+                children: [
+                  showGrid && /* @__PURE__ */ jsx(
+                    CartesianGrid,
+                    {
+                      strokeDasharray: "3 3",
+                      vertical: false,
+                      stroke: "var(--color-neutral-200, #E5E5E5)"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    XAxis,
+                    {
+                      dataKey: "x",
+                      axisLine: false,
+                      tickLine: false,
+                      tick: { fill: "var(--color-neutral-600, #4B5563)", fontSize: 12 },
+                      tickFormatter: xTickFormatter || formatAxisTick,
+                      label: xAxisLabel ? { value: xAxisLabel, position: "insideBottom", offset: -5 } : void 0,
+                      dy: 10
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    YAxis,
+                    {
+                      axisLine: false,
+                      tickLine: false,
+                      tick: { fill: "var(--color-neutral-600, #4B5563)", fontSize: 12 },
+                      tickFormatter: yTickFormatter,
+                      label: yAxisLabel ? { value: yAxisLabel, angle: -90, position: "insideLeft" } : void 0
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Tooltip,
+                    {
+                      content: /* @__PURE__ */ jsx(LineGraphTooltip, { tooltipValueFormatter }),
+                      cursor: { fill: "var(--color-neutral-100, #F3F4F6)", opacity: 0.4 }
+                    }
+                  ),
+                  series.map((s, index) => {
+                    if (hiddenIds.includes(s.id) || s.hidden) return null;
+                    return /* @__PURE__ */ jsx(
+                      Bar,
+                      {
+                        dataKey: s.id,
+                        name: s.label,
+                        fill: getSeriesColor(s, index),
+                        barSize,
+                        radius: [barRadius, barRadius, 0, 0],
+                        onClick: (data) => {
+                          if (onBarClick) {
+                            const point = s.data.find((p) => p.x === data.x);
+                            if (point) onBarClick(point, s);
+                          }
+                        }
+                      },
+                      s.id
+                    );
+                  })
+                ]
+              }
+            ) })
+          }
+        ),
+        legendPosition === "bottom" && renderLegend()
+      ]
+    }
+  );
+}
+export {
+  BarGraph
+};
+//# sourceMappingURL=BarGraph.js.map

package/dist/components/BarGraph/BarGraph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarGraph.js","sources":["../../../src/components/BarGraph/BarGraph.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo, useState, useEffect } from 'react';\nimport {\n  ResponsiveContainer,\n  BarChart,\n  Bar,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Tooltip,\n} from 'recharts';\nimport { Typography } from '../Typography/Typography';\nimport { Stack } from '../Stack/Stack';\nimport { LineGraphTooltip } from '../LineGraph/LineGraphTooltip';\nimport { LineGraphLegend } from '../LineGraph/LineGraphLegend';\nimport {\n  getSeriesColor,\n  formatAxisTick,\n  validateSeries,\n  transformToBarChartData,\n} from '../LineGraph/lineGraphUtils';\nimport { BarGraphSkeleton } from './BarGraphSkeleton';\n\nexport interface BarGraphDataPoint {\n  /** Category label rendered on the X axis */\n  x: string | number;\n  /** Numeric value rendered as bar height */\n  y: number;\n}\n\nexport interface BarGraphSeries {\n  /** Unique identifier for this series */\n  id: string;\n  /** Display label shown in legend and tooltip */\n  label: string;\n  /** Data points — x is the category label, y is the numeric value */\n  data: BarGraphDataPoint[];\n  /**\n   * Optional color override. Must be a CSS color or Jiwambe CSS variable\n   * e.g. 'var(--color-green-500)'. Falls back to SERIES_COLORS palette.\n   */\n  color?: string;\n  /** Hide this series from the chart but keep it in the legend */\n  hidden?: boolean;\n}\n\nexport interface BarGraphProps {\n  /** Array of data series to display */\n  series: BarGraphSeries[];\n  /** Optional title displayed above the chart */\n  title?: string;\n  /** Optional description displayed below the title */\n  description?: string;\n  /** Label for the X-axis */\n  xAxisLabel?: string;\n  /** Label for the Y-axis */\n  yAxisLabel?: string;\n  /** Custom formatter for X-axis ticks */\n  xTickFormatter?: (value: string | number) => string;\n  /** Custom formatter for Y-axis ticks */\n  yTickFormatter?: (value: number) => string;\n  /** Custom formatter for tooltip values and labels */\n  tooltipValueFormatter?: (value: number, seriesLabel: string) => string;\n  /** height of the chart in px. @default 320 */\n  height?: number;\n  /** Whether the chart is in a loading state */\n  loading?: boolean;\n  /** Whether to show the background grid. @default true */\n  showGrid?: boolean;\n  /** Position of the legend. @default 'bottom' */\n  legendPosition?: 'top' | 'bottom' | 'none';\n  /** Whether to allow toggling series visibility via the legend. @default true */\n  interactiveLegend?: boolean;\n  /** Callback fired when a bar is clicked */\n  onBarClick?: (point: BarGraphDataPoint, series: BarGraphSeries) => void;\n  /** Width of each bar in px. @default 24 */\n  barSize?: number;\n  /** Corner radius applied to the top of each bar. @default 4 */\n  barRadius?: number;\n  /** Gap between bar groups as a fraction or number. @default '20%' */\n  barCategoryGap?: string | number;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * A themed Bar Graph component for Jiwambe.\n * Renders grouped or single series data using SVG-based Recharts.\n * Integrates with design tokens for colors, spacing, and typography.\n */\nexport function BarGraph({\n  series,\n  title,\n  description,\n  xAxisLabel,\n  yAxisLabel,\n  xTickFormatter,\n  yTickFormatter,\n  tooltipValueFormatter,\n  height = 320,\n  loading = false,\n  showGrid = true,\n  legendPosition = 'bottom',\n  interactiveLegend = true,\n  onBarClick,\n  barSize = 24,\n  barRadius = 4,\n  barCategoryGap = '20%',\n  className = '',\n}: BarGraphProps) {\n  const [mounted, setMounted] = useState(false);\n  const [hiddenIds, setHiddenIds] = useState<string[]>([]);\n\n  // Hydration safety\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  // Validation\n  useEffect(() => {\n    validateSeries(series as any);\n  }, [series]);\n\n  // Data transformation for Recharts\n  const chartData = useMemo(() => transformToBarChartData(series), [series]);\n\n  const handleToggle = (id: string) => {\n    setHiddenIds((prev) =>\n      prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]\n    );\n  };\n\n  if (loading) {\n    return (\n      <BarGraphSkeleton height={height} showTitle={!!(title || description)} />\n    );\n  }\n\n  const renderLegend = () => (\n    <LineGraphLegend\n      series={series as any}\n      hiddenIds={hiddenIds}\n      onToggle={handleToggle}\n      interactive={interactiveLegend}\n    />\n  );\n\n  return (\n    <figure\n      role=\"figure\"\n      aria-label={title ?? 'Bar graph'}\n      className={['flex flex-col w-full jiwambe-bar-graph', className]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {(title || description) && (\n        <Stack spacing=\"space-1\" className=\"mb-space-4\">\n          {title && <Typography variant=\"title-md\" className=\"font-bold text-text-primary\">{title}</Typography>}\n          {description && <Typography variant=\"text-xs\" className=\"text-text-secondary\">{description}</Typography>}\n        </Stack>\n      )}\n\n      {legendPosition === 'top' && renderLegend()}\n\n      <div \n        style={{ height: `${height}px`, width: '100%', minWidth: 0, minHeight: 0 }} \n        className=\"relative\"\n      >\n        {mounted && (\n          <ResponsiveContainer width=\"100%\" height=\"100%\">\n            <BarChart\n              data={chartData}\n              margin={{ top: 10, right: 10, left: 0, bottom: 0 }}\n              barCategoryGap={barCategoryGap}\n            >\n              {showGrid && (\n                <CartesianGrid\n                  strokeDasharray=\"3 3\"\n                  vertical={false}\n                  stroke=\"var(--color-neutral-200, #E5E5E5)\"\n                />\n              )}\n              \n              <XAxis\n                dataKey=\"x\"\n                axisLine={false}\n                tickLine={false}\n                tick={{ fill: 'var(--color-neutral-600, #4B5563)', fontSize: 12 }}\n                tickFormatter={xTickFormatter || formatAxisTick}\n                label={xAxisLabel ? { value: xAxisLabel, position: 'insideBottom', offset: -5 } : undefined}\n                dy={10}\n              />\n              \n              <YAxis\n                axisLine={false}\n                tickLine={false}\n                tick={{ fill: 'var(--color-neutral-600, #4B5563)', fontSize: 12 }}\n                tickFormatter={yTickFormatter}\n                label={yAxisLabel ? { value: yAxisLabel, angle: -90, position: 'insideLeft' } : undefined}\n              />\n\n              <Tooltip\n                content={\n                  <LineGraphTooltip tooltipValueFormatter={tooltipValueFormatter} />\n                }\n                cursor={{ fill: 'var(--color-neutral-100, #F3F4F6)', opacity: 0.4 }}\n              />\n\n              {series.map((s, index) => {\n                if (hiddenIds.includes(s.id) || s.hidden) return null;\n                \n                return (\n                  <Bar\n                    key={s.id}\n                    dataKey={s.id}\n                    name={s.label}\n                    fill={getSeriesColor(s as any, index)}\n                    barSize={barSize}\n                    radius={[barRadius, barRadius, 0, 0]}\n                    onClick={(data) => {\n                      if (onBarClick) {\n                        const point = s.data.find(p => p.x === data.x);\n                        if (point) onBarClick(point, s);\n                      }\n                    }}\n                  />\n                );\n              })}\n            </BarChart>\n          </ResponsiveContainer>\n        )}\n      </div>\n\n      {legendPosition === 'bottom' && renderLegend()}\n    </figure>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;AA2FO;AAAkB;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACS;AACC;AACC;AACM;AACG;AACpB;AACU;AACE;AACK;AAEnB;AACE;AACA;AAGA;AACE;AAAe;AAIjB;AACE;AAA4B;AAI9B;AAEA;AACE;AAAA;AACuE;AAAA;AAIzE;AACE;AACyE;AAI3E;AACE;AAAC;AAAA;AACC;AACA;AACU;AACG;AAAA;AAIjB;AACE;AAAC;AAAA;AACM;AACgB;AAGV;AAET;AAEG;AAAuF;AACG;AAC7F;AAG2B;AAE7B;AAAC;AAAA;AACwE;AAC7D;AAIN;AAAC;AAAA;AACO;AACyC;AAC/C;AAEC;AACC;AAAC;AAAA;AACiB;AACN;AACH;AAAA;AAAA;AAIX;AAAC;AAAA;AACS;AACE;AACA;AACmD;AAC5B;AACiD;AAC9E;AAAA;AAAA;AAGN;AAAC;AAAA;AACW;AACA;AACmD;AAC9C;AACiE;AAAA;AAAA;AAGlF;AAAC;AAAA;AAEmE;AAEJ;AAAI;AAAA;AAIlE;AAEA;AACE;AAAC;AAAA;AAEY;AACH;AAC4B;AACpC;AACmC;AAEjC;AACE;AACA;AAA8B;AAChC;AACF;AAAA;AAXO;AAAA;AAcZ;AAAA;AAAA;AAEL;AAAA;AAAA;AAI4B;AAAa;AAAA;AAGnD;;;;"}

package/dist/components/BarGraph/BarGraph.test.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=BarGraph.test.d.ts.map

package/dist/components/BarGraph/BarGraph.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarGraph.test.d.ts","sourceRoot":"","sources":["../../../src/components/BarGraph/BarGraph.test.tsx"],"names":[],"mappings":"AAKA,OAAO,2BAA2B,CAAC"}

package/dist/components/BarGraph/BarGraphSkeleton.d.ts

@@ -0,0 +1,12 @@
+export interface BarGraphSkeletonProps {
+    /** Chart height in px. @default 320 */
+    height?: number;
+    /** Whether to show the title block. @default true */
+    showTitle?: boolean;
+}
+/**
+ * Loading skeleton for the BarGraph component.
+ * Mirrors the structure of a rendered column chart.
+ */
+export declare function BarGraphSkeleton({ height, showTitle }: BarGraphSkeletonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BarGraphSkeleton.d.ts.map

package/dist/components/BarGraph/BarGraphSkeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarGraphSkeleton.d.ts","sourceRoot":"","sources":["../../../src/components/BarGraph/BarGraphSkeleton.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,qBAAqB;IACpC,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qDAAqD;IACrD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,MAAY,EAAE,SAAgB,EAAE,EAAE,qBAAqB,2CAgCzF"}

package/dist/components/BarGraph/BarGraphSkeleton.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Skeleton } from "../Skeleton/Skeleton.js";
+import { Stack } from "../Stack/Stack.js";
+function BarGraphSkeleton({ height = 320, showTitle = true }) {
+  return /* @__PURE__ */ jsxs(Stack, { spacing: "space-4", className: "w-full", children: [
+    showTitle && /* @__PURE__ */ jsxs(Stack, { spacing: "space-1", children: [
+      /* @__PURE__ */ jsx(Skeleton, { width: "40%", height: "1.5rem", radius: "xs" }),
+      /* @__PURE__ */ jsx(Skeleton, { width: "60%", height: "1rem", radius: "xs" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "flex items-end gap-space-3 px-space-4 border-b border-border-light",
+        style: { height: `${height}px` },
+        children: [60, 85, 45, 90, 70, 55].map((h, i) => /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            style: { height: `${h}%` },
+            className: "flex-1 rounded-t-rad-sm"
+          },
+          i
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: "space-4", justifyContent: "center", children: [
+      /* @__PURE__ */ jsx(Skeleton, { width: "5rem", height: "1.25rem", radius: "rounded" }),
+      /* @__PURE__ */ jsx(Skeleton, { width: "6rem", height: "1.25rem", radius: "rounded" }),
+      /* @__PURE__ */ jsx(Skeleton, { width: "5rem", height: "1.25rem", radius: "rounded" })
+    ] })
+  ] });
+}
+export {
+  BarGraphSkeleton
+};
+//# sourceMappingURL=BarGraphSkeleton.js.map

package/dist/components/BarGraph/BarGraphSkeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarGraphSkeleton.js","sources":["../../../src/components/BarGraph/BarGraphSkeleton.tsx"],"sourcesContent":["'use client';\n\nimport { Skeleton } from '../Skeleton/Skeleton';\nimport { Stack } from '../Stack/Stack';\n\nexport interface BarGraphSkeletonProps {\n  /** Chart height in px. @default 320 */\n  height?: number;\n  /** Whether to show the title block. @default true */\n  showTitle?: boolean;\n}\n\n/**\n * Loading skeleton for the BarGraph component.\n * Mirrors the structure of a rendered column chart.\n */\nexport function BarGraphSkeleton({ height = 320, showTitle = true }: BarGraphSkeletonProps) {\n  return (\n    <Stack spacing=\"space-4\" className=\"w-full\">\n      {showTitle && (\n        <Stack spacing=\"space-1\">\n          <Skeleton width=\"40%\" height=\"1.5rem\" radius=\"xs\" />\n          <Skeleton width=\"60%\" height=\"1rem\" radius=\"xs\" />\n        </Stack>\n      )}\n\n      {/* Main chart area placeholder: array of varying-height columns */}\n      <div \n        className=\"flex items-end gap-space-3 px-space-4 border-b border-border-light\" \n        style={{ height: `${height}px` }}\n      >\n        {[60, 85, 45, 90, 70, 55].map((h, i) => (\n          <Skeleton \n            key={i} \n            style={{ height: `${h}%` }} \n            className=\"flex-1 rounded-t-rad-sm\" \n          />\n        ))}\n      </div>\n\n      {/* Legend placeholder */}\n      <Stack direction=\"row\" spacing=\"space-4\" justifyContent=\"center\">\n        <Skeleton width=\"5rem\" height=\"1.25rem\" radius=\"rounded\" />\n        <Skeleton width=\"6rem\" height=\"1.25rem\" radius=\"rounded\" />\n        <Skeleton width=\"5rem\" height=\"1.25rem\" radius=\"rounded\" />\n      </Stack>\n    </Stack>\n  );\n}\n"],"names":[],"mappings":";;;;AAgBO;AACL;AAEK;AAEG;AAAkD;AACF;AAClD;AAIF;AAAC;AAAA;AACW;AACgB;AAGxB;AAAC;AAAA;AAEsB;AACX;AAAA;AAFL;AAIR;AAAA;AAAA;AAKD;AAAyD;AACA;AACA;AAC3D;AAGN;;;;"}

package/dist/components/Box/Box.test.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Register Vitest matchers.
+ */
+declare module 'vitest' {
+    interface Assertion<T = any> {
+        toHaveNoViolations(): Promise<T>;
+        toBeInTheDocument(): T;
+        toHaveTextContent(text: string | RegExp): T;
+        toBeVisible(): T;
+        toHaveClass(...classNames: string[]): T;
+        toHaveAttribute(attr: string, value?: string): T;
+        toBeInstanceOf(cls: any): T;
+    }
+}
+//# sourceMappingURL=Box.test.d.ts.map

package/dist/components/Box/Box.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Box.test.d.ts","sourceRoot":"","sources":["../../../src/components/Box/Box.test.tsx"],"names":[],"mappings":"AAUA,OAAO,2BAA2B,CAAC;AAEnC;;GAEG;AACH,OAAO,QAAQ,QAAQ,CAAC;IACtB,UAAU,SAAS,CAAC,CAAC,GAAG,GAAG;QACzB,kBAAkB,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC;QACjC,iBAAiB,IAAI,CAAC,CAAC;QACvB,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,CAAC,CAAC;QAC5C,WAAW,IAAI,CAAC,CAAC;QACjB,WAAW,CAAC,GAAG,UAAU,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC;QACxC,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC;QACjD,cAAc,CAAC,GAAG,EAAE,GAAG,GAAG,CAAC,CAAC;KAC7B;CACF"}

package/dist/components/Breadcrumb/Breadcrumb.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/Breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC7B,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;GAIG;AACH,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,SAAS,CAAC;AAEtD;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B,wFAAwF;IACxF,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAChC,yEAAyE;IACzE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kCAAkC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAUD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAgB,EAChB,WAAwB,EACxB,SAAmB,EACnB,YAAY,EAAE,SAAwB,EACtC,SAAc,EACd,KAAK,GACN,EAAE,eAAe,kDAwFjB"}
+{"version":3,"file":"Breadcrumb.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/Breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC7B,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;GAIG;AACH,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,SAAS,CAAC;AAEtD;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B,wFAAwF;IACxF,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAChC,yEAAyE;IACzE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kCAAkC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAUD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAgB,EAChB,WAAwB,EACxB,SAAmB,EACnB,YAAY,EAAE,SAAwB,EACtC,SAAc,EACd,KAAK,GACN,EAAE,eAAe,kDAwFjB"}

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,89 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import n from "../../node_modules/.pnpm/@jiwambe_icons@0.3.1_react@19.2.4/node_modules/@jiwambe/icons/dist/icons/ChevronRight.js";
+import { Link } from "../Link/Link.js";
+import { Icon } from "../Icon/Icon.js";
+const separatorSymbol = {
+  slash: "/",
+  chevron: ""
+};
+const gapClass = "gap-x-1.5 gap-y-1";
+function Breadcrumb({
+  items,
+  truncate = false,
+  linkVariant = "tertiary",
+  separator = "slash",
+  "aria-label": ariaLabel = "Breadcrumb",
+  className = "",
+  style
+}) {
+  if (items.length === 0) return null;
+  const showTruncated = truncate && items.length > 3;
+  const displayItems = showTruncated ? [items[0], items[items.length - 2], items[items.length - 1]] : items;
+  const baseClasses = [
+    "flex flex-wrap items-center font-normal leading-[1.4] tracking-[0.16px] whitespace-nowrap",
+    gapClass,
+    className
+  ].filter(Boolean).join(" ");
+  const renderSeparator = () => /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "shrink-0 text-text-sm text-text-disabled select-none",
+      "aria-hidden": true,
+      children: separator === "chevron" ? /* @__PURE__ */ jsx(
+        Icon,
+        {
+          icon: /* @__PURE__ */ jsx(n, {}),
+          size: 16,
+          className: "text-text-disabled",
+          "aria-hidden": true
+        }
+      ) : separatorSymbol[separator]
+    }
+  );
+  const renderItem = (item, index, isLast) => {
+    const isCurrent = isLast && item.href == null;
+    return /* @__PURE__ */ jsxs(
+      "li",
+      {
+        className: `flex items-center ${gapClass}`,
+        "aria-current": isCurrent ? "page" : void 0,
+        children: [
+          index > 0 && renderSeparator(),
+          item.href != null ? /* @__PURE__ */ jsx(
+            Link,
+            {
+              href: item.href,
+              variant: linkVariant,
+              size: "xs",
+              className: "underline decoration-solid",
+              children: item.label
+            }
+          ) : /* @__PURE__ */ jsx("span", { className: "text-text-sm text-text-primary shrink-0", children: item.label })
+        ]
+      },
+      `breadcrumb-${index}`
+    );
+  };
+  return /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel, className: baseClasses, style, children: /* @__PURE__ */ jsx("ol", { className: `flex flex-wrap items-center list-none p-0 m-0 ${gapClass}`, children: showTruncated ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    renderItem(displayItems[0], 0, false),
+    /* @__PURE__ */ jsxs("li", { className: `flex items-center ${gapClass}`, children: [
+      renderSeparator(),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "shrink-0 text-text-sm text-text-disabled",
+          "aria-hidden": true,
+          children: "..."
+        }
+      )
+    ] }, "ellipsis"),
+    renderItem(displayItems[1], 1, false),
+    renderItem(displayItems[2], 2, true)
+  ] }) : displayItems.map(
+    (item, index) => renderItem(item, index, index === displayItems.length - 1)
+  ) }) });
+}
+export {
+  Breadcrumb
+};
+//# sourceMappingURL=Breadcrumb.js.map

package/dist/components/Breadcrumb/Breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.js","sources":["../../../src/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import React from 'react';\nimport { ChevronRight } from '@jiwambe/icons';\nimport { Link } from '../Link/Link';\nimport { Icon } from '../Icon/Icon';\nimport type { LinkVariant } from '../../types';\n\n/**\n * A single breadcrumb item. If `href` is provided, the item is rendered as a link;\n * otherwise it is the current page (last segment) and rendered as text with aria-current=\"page\".\n */\nexport interface BreadcrumbItem {\n  /** Display label for the segment. */\n  label: string;\n  /** Optional URL. Omit for the current page (typically the last item). */\n  href?: string;\n}\n\n/**\n * Visual style for the separator between breadcrumb items.\n * - 'slash'    Forward slash (/) — matches design system default.\n * - 'chevron'  Right-pointing chevron.\n */\nexport type BreadcrumbSeparator = 'slash' | 'chevron';\n\n/**\n * Props for the Breadcrumb component. Renders a WAI-ARIA compliant breadcrumb navigation.\n * Matches design: slash separators, optional truncation with ellipsis for long paths.\n */\nexport interface BreadcrumbProps {\n  /** List of breadcrumb segments. Last item without `href` is treated as current page. */\n  items: BreadcrumbItem[];\n  /**\n   * When true and there are more than 3 items, collapse the middle to \"...\" (e.g. Root ... Level-04 / Level-05).\n   * @default false\n   */\n  truncate?: boolean;\n  /**\n   * Link variant for non-current segments. Use tertiary or secondary for muted breadcrumb links.\n   * @default 'tertiary'\n   */\n  linkVariant?: LinkVariant;\n  /**\n   * Separator between items.\n   * @default 'slash'\n   */\n  separator?: BreadcrumbSeparator;\n  /** Accessible name for the navigation landmark. @default 'Breadcrumb' */\n  'aria-label'?: string;\n  /** Additional CSS class names. */\n  className?: string;\n  /** Inline styles. */\n  style?: React.CSSProperties;\n}\n\nconst separatorSymbol: Record<BreadcrumbSeparator, string> = {\n  slash: '/',\n  chevron: '',\n};\n\n/** Gap between items matches design spacing-04 (6px). */\nconst gapClass = 'gap-x-1.5 gap-y-1';\n\n/**\n * Renders a breadcrumb navigation with accessible structure (nav + list), slash or\n * chevron separators, and optional truncation (first ... second-to-last / current).\n * Matches design: links underlined, current page not underlined, separators in disabled color.\n *\n * @example\n * ```tsx\n * <Breadcrumb\n *   items={[\n *     { label: 'Root', href: '/' },\n *     { label: 'Level-01', href: '/l1' },\n *     { label: 'Level-02' },\n *   ]}\n * />\n * <Breadcrumb items={manyItems} truncate />\n * ```\n */\nexport function Breadcrumb({\n  items,\n  truncate = false,\n  linkVariant = 'tertiary',\n  separator = 'slash',\n  'aria-label': ariaLabel = 'Breadcrumb',\n  className = '',\n  style,\n}: BreadcrumbProps) {\n  if (items.length === 0) return null;\n\n  const showTruncated =\n    truncate && items.length > 3;\n  const displayItems: BreadcrumbItem[] = showTruncated\n    ? [items[0], items[items.length - 2], items[items.length - 1]]\n    : items;\n\n  const baseClasses = [\n    'flex flex-wrap items-center font-normal leading-[1.4] tracking-[0.16px] whitespace-nowrap',\n    gapClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const renderSeparator = () => (\n    <span\n      className=\"shrink-0 text-text-sm text-text-disabled select-none\"\n      aria-hidden\n    >\n      {separator === 'chevron' ? (\n        <Icon\n          icon={<ChevronRight />}\n          size={16}\n          className=\"text-text-disabled\"\n          aria-hidden\n        />\n      ) : (\n        separatorSymbol[separator]\n      )}\n    </span>\n  );\n\n  const renderItem = (item: BreadcrumbItem, index: number, isLast: boolean) => {\n    const isCurrent = isLast && item.href == null;\n    return (\n      <li\n        key={`breadcrumb-${index}`}\n        className={`flex items-center ${gapClass}`}\n        aria-current={isCurrent ? 'page' : undefined}\n      >\n        {index > 0 && renderSeparator()}\n        {item.href != null ? (\n          <Link\n            href={item.href}\n            variant={linkVariant}\n            size=\"xs\"\n            className=\"underline decoration-solid\"\n          >\n            {item.label}\n          </Link>\n        ) : (\n          <span className=\"text-text-sm text-text-primary shrink-0\">\n            {item.label}\n          </span>\n        )}\n      </li>\n    );\n  };\n\n  return (\n    <nav aria-label={ariaLabel} className={baseClasses} style={style}>\n      <ol className={`flex flex-wrap items-center list-none p-0 m-0 ${gapClass}`}>\n        {showTruncated ? (\n          <>\n            {renderItem(displayItems[0], 0, false)}\n            <li key=\"ellipsis\" className={`flex items-center ${gapClass}`}>\n              {renderSeparator()}\n              <span\n                className=\"shrink-0 text-text-sm text-text-disabled\"\n                aria-hidden\n              >\n                ...\n              </span>\n            </li>\n            {renderItem(displayItems[1], 1, false)}\n            {renderItem(displayItems[2], 2, true)}\n          </>\n        ) : (\n          displayItems.map((item, index) =>\n            renderItem(item, index, index === displayItems.length - 1),\n          )\n        )}\n      </ol>\n    </nav>\n  );\n}\n"],"names":["ChevronRight"],"mappings":";;;;AAsDA,MAAM,kBAAuD;AAAA,EAC3D,OAAO;AAAA,EACP,SAAS;AACX;AAGA,MAAM,WAAW;AAmBV,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,WAAW;AAAA,EACX,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,cAAc,YAAY;AAAA,EAC1B,YAAY;AAAA,EACZ;AACF,GAAoB;AAClB,MAAI,MAAM,WAAW,EAAG,QAAO;AAE/B,QAAM,gBACJ,YAAY,MAAM,SAAS;AAC7B,QAAM,eAAiC,gBACnC,CAAC,MAAM,CAAC,GAAG,MAAM,MAAM,SAAS,CAAC,GAAG,MAAM,MAAM,SAAS,CAAC,CAAC,IAC3D;AAEJ,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,QAAM,kBAAkB,MACtB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAW;AAAA,MAEV,wBAAc,YACb;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,0BAAOA,GAAA,EAAa;AAAA,UACpB,MAAM;AAAA,UACN,WAAU;AAAA,UACV,eAAW;AAAA,QAAA;AAAA,MAAA,IAGb,gBAAgB,SAAS;AAAA,IAAA;AAAA,EAAA;AAK/B,QAAM,aAAa,CAAC,MAAsB,OAAe,WAAoB;AAC3E,UAAM,YAAY,UAAU,KAAK,QAAQ;AACzC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAW,qBAAqB,QAAQ;AAAA,QACxC,gBAAc,YAAY,SAAS;AAAA,QAElC,UAAA;AAAA,UAAA,QAAQ,KAAK,gBAAA;AAAA,UACb,KAAK,QAAQ,OACZ;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAM,KAAK;AAAA,cACX,SAAS;AAAA,cACT,MAAK;AAAA,cACL,WAAU;AAAA,cAET,UAAA,KAAK;AAAA,YAAA;AAAA,UAAA,IAGR,oBAAC,QAAA,EAAK,WAAU,2CACb,eAAK,MAAA,CACR;AAAA,QAAA;AAAA,MAAA;AAAA,MAjBG,cAAc,KAAK;AAAA,IAAA;AAAA,EAqB9B;AAEA,SACE,oBAAC,OAAA,EAAI,cAAY,WAAW,WAAW,aAAa,OAClD,UAAA,oBAAC,MAAA,EAAG,WAAW,iDAAiD,QAAQ,IACrE,0BACC,qBAAA,UAAA,EACG,UAAA;AAAA,IAAA,WAAW,aAAa,CAAC,GAAG,GAAG,KAAK;AAAA,IACrC,qBAAC,MAAA,EAAkB,WAAW,qBAAqB,QAAQ,IACxD,UAAA;AAAA,MAAA,gBAAA;AAAA,MACD;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,eAAW;AAAA,UACZ,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAED,EAAA,GAPM,UAQR;AAAA,IACC,WAAW,aAAa,CAAC,GAAG,GAAG,KAAK;AAAA,IACpC,WAAW,aAAa,CAAC,GAAG,GAAG,IAAI;AAAA,EAAA,EAAA,CACtC,IAEA,aAAa;AAAA,IAAI,CAAC,MAAM,UACtB,WAAW,MAAM,OAAO,UAAU,aAAa,SAAS,CAAC;AAAA,EAAA,GAG/D,EAAA,CACF;AAEJ;"}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Button.test.d.ts.map

package/dist/components/Button/Button.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.test.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.test.tsx"],"names":[],"mappings":""}