@etus/ui 0.4.0-beta.2 → 0.4.0-beta.3

package/dist/chunk-XV6NXXXP.js

@@ -0,0 +1,206 @@
+import { ChartTooltipContent, ChartContainer, ChartTooltip, ChartLegend, ChartLegendContent } from './chunk-7I6KK6QE.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import * as React from 'react';
+import { LineChart as LineChart$1, CartesianGrid, XAxis, Label, YAxis, Line } from 'recharts';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function normalizeSeriesConfig(series) {
+  return series.map(
+    (s) => typeof s === "string" ? { dataKey: s } : s
+  );
+}
+function getVariantStrokeDasharray(variant) {
+  switch (variant) {
+    case "dashed":
+      return "5 5";
+    case "dotted":
+      return "2 2";
+    default:
+      return void 0;
+  }
+}
+function LineChart({
+  activeDot = { r: 6 },
+  allowDecimals = true,
+  autoMinValue = false,
+  className,
+  config,
+  connectNulls = false,
+  customTooltip,
+  curveType = "monotone",
+  data,
+  dot = false,
+  enableLegendSlider = false,
+  gridDashArray = "3 3",
+  intervalType,
+  legendPosition = "bottom",
+  maxValue,
+  minValue,
+  onValueChange,
+  series,
+  showGrid = true,
+  showLegend = false,
+  showTooltip = true,
+  showXAxis = true,
+  showYAxis = true,
+  startEndOnly = false,
+  strokeWidth = 2,
+  tickGap,
+  tooltipCallback,
+  tooltipIndicator = "dot",
+  variant = "default",
+  xAxisLabel,
+  xAxisKey,
+  xAxisTickFormatter,
+  yAxisLabel,
+  yAxisTickFormatter,
+  yAxisWidth,
+  ...props
+}) {
+  const normalizedSeries = normalizeSeriesConfig(series);
+  const variantStrokeDasharray = getVariantStrokeDasharray(variant);
+  const prevTooltipStateRef = React.useRef(false);
+  const handleDotClick = React.useCallback(
+    (dataKey) => (data2) => {
+      if (!onValueChange) return;
+      const payload = data2.payload;
+      const value = payload[dataKey];
+      onValueChange({
+        category: payload[xAxisKey],
+        dataKey,
+        payload,
+        value: typeof value === "number" ? value : 0
+      });
+    },
+    [onValueChange, xAxisKey]
+  );
+  const TooltipContentWithCallback = React.useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (props2) => {
+      const { active = false, label, payload } = props2;
+      if (tooltipCallback && active !== prevTooltipStateRef.current) {
+        prevTooltipStateRef.current = active;
+        tooltipCallback({
+          active,
+          label,
+          payload: payload?.map((p) => ({
+            dataKey: String(p.dataKey),
+            value: p.value,
+            payload: p.payload
+          }))
+        });
+      }
+      return /* @__PURE__ */ jsx(ChartTooltipContent, { indicator: tooltipIndicator, ...props2 });
+    },
+    [tooltipCallback, tooltipIndicator]
+  );
+  const yDomain = React.useMemo(() => {
+    const min = minValue ?? (autoMinValue ? "auto" : 0);
+    const max = maxValue ?? "auto";
+    return [min, max];
+  }, [autoMinValue, maxValue, minValue]);
+  const xAxisTicks = React.useMemo(() => {
+    if (!startEndOnly || data.length < 2) return;
+    const first = data[0];
+    const last = data[data.length - 1];
+    if (!first || !last) return;
+    return [first[xAxisKey], last[xAxisKey]];
+  }, [data, startEndOnly, xAxisKey]);
+  return /* @__PURE__ */ jsx("div", { "data-slot": "line-chart", ...props, children: /* @__PURE__ */ jsx(
+    ChartContainer,
+    {
+      className: cn(className),
+      config,
+      children: /* @__PURE__ */ jsxs(
+        LineChart$1,
+        {
+          accessibilityLayer: true,
+          data,
+          margin: { left: xAxisLabel ? 20 : 12, right: 12, bottom: yAxisLabel ? 20 : 0 },
+          children: [
+            showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: gridDashArray, vertical: false }),
+            showXAxis && /* @__PURE__ */ jsx(
+              XAxis,
+              {
+                axisLine: false,
+                dataKey: xAxisKey,
+                interval: intervalType,
+                minTickGap: tickGap,
+                tickFormatter: xAxisTickFormatter,
+                tickLine: false,
+                tickMargin: 8,
+                ticks: xAxisTicks,
+                children: xAxisLabel && /* @__PURE__ */ jsx(Label, { offset: -5, position: "insideBottom", value: xAxisLabel })
+              }
+            ),
+            showYAxis && /* @__PURE__ */ jsx(
+              YAxis,
+              {
+                allowDecimals,
+                axisLine: false,
+                domain: yDomain,
+                tickFormatter: yAxisTickFormatter,
+                tickLine: false,
+                tickMargin: 8,
+                width: yAxisWidth,
+                children: yAxisLabel && /* @__PURE__ */ jsx(Label, { angle: -90, offset: -5, position: "insideLeft", value: yAxisLabel })
+              }
+            ),
+            showTooltip && /* @__PURE__ */ jsx(
+              ChartTooltip,
+              {
+                content: customTooltip ?? (tooltipCallback ? /* @__PURE__ */ jsx(TooltipContentWithCallback, {}) : /* @__PURE__ */ jsx(ChartTooltipContent, { indicator: tooltipIndicator })),
+                cursor: false
+              }
+            ),
+            showLegend && /* @__PURE__ */ jsx(
+              ChartLegend,
+              {
+                align: legendPosition === "left" ? "left" : legendPosition === "right" ? "right" : "center",
+                content: /* @__PURE__ */ jsx(ChartLegendContent, { enableSlider: enableLegendSlider }),
+                layout: legendPosition === "left" || legendPosition === "right" ? "vertical" : "horizontal",
+                verticalAlign: legendPosition === "top" ? "top" : legendPosition === "bottom" ? "bottom" : "middle"
+              }
+            ),
+            normalizedSeries.map((seriesConfig) => {
+              const {
+                activeDot: seriesActiveDot,
+                dataKey,
+                dot: seriesDot,
+                strokeDasharray: seriesStrokeDasharray,
+                strokeOpacity,
+                strokeWidth: seriesStrokeWidth
+              } = seriesConfig;
+              const stroke = `var(--color-${dataKey})`;
+              const finalStrokeDasharray = seriesStrokeDasharray ?? variantStrokeDasharray;
+              const finalDot = seriesDot ?? dot;
+              const finalStrokeWidth = seriesStrokeWidth ?? strokeWidth;
+              const baseActiveDot = seriesActiveDot ?? activeDot;
+              const finalActiveDot = onValueChange ? typeof baseActiveDot === "object" ? { ...baseActiveDot, onClick: handleDotClick(dataKey), style: { cursor: "pointer" } } : !baseActiveDot ? false : { r: 6, onClick: handleDotClick(dataKey), style: { cursor: "pointer" } } : baseActiveDot;
+              return /* @__PURE__ */ jsx(
+                Line,
+                {
+                  activeDot: finalActiveDot,
+                  connectNulls,
+                  dataKey,
+                  dot: finalDot,
+                  stroke,
+                  strokeDasharray: finalStrokeDasharray,
+                  strokeOpacity,
+                  strokeWidth: finalStrokeWidth,
+                  type: curveType
+                },
+                dataKey
+              );
+            })
+          ]
+        }
+      )
+    }
+  ) });
+}
+LineChart.displayName = "LineChart";
+
+export { LineChart };
+//# sourceMappingURL=chunk-XV6NXXXP.js.map
+//# sourceMappingURL=chunk-XV6NXXXP.js.map

package/dist/chunk-XV6NXXXP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/LineChart/LineChart.tsx"],"names":["data","props","RechartsLineChart"],"mappings":"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","file":"chunk-XV6NXXXP.js","sourcesContent":["\"use client\"\n\nimport type {\n  LineChartProps,\n  LineChartSeriesConfig,\n} from \"./LineChart.types\"\n\nimport * as React from \"react\"\nimport {\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart as RechartsLineChart,\n  XAxis,\n  YAxis,\n} from \"recharts\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"../Chart\"\n\n/**\n * Normalize series to LineChartSeriesConfig format\n */\nfunction normalizeSeriesConfig(\n  series: (LineChartSeriesConfig | string)[]\n): LineChartSeriesConfig[] {\n  return series.map((s) =>\n    typeof s === \"string\" ? { dataKey: s } : s\n  )\n}\n\n/**\n * Get stroke dash array based on variant\n */\nfunction getVariantStrokeDasharray(variant: LineChartProps[\"variant\"]): string | undefined {\n  switch (variant) {\n    case \"dashed\":\n      return \"5 5\"\n    case \"dotted\":\n      return \"2 2\"\n    default:\n      return undefined\n  }\n}\n\n/**\n * LineChart - Data visualization component for trends and time series\n *\n * Connects data points with lines, ideal for showing trends and changes\n * over a continuous axis (usually time). Supports multiple series for\n * comparison.\n *\n * @example\n * ```tsx\n * const data = [\n *   { month: \"Jan\", desktop: 186, mobile: 80 },\n *   { month: \"Feb\", desktop: 305, mobile: 200 },\n * ]\n *\n * const config = {\n *   desktop: { label: \"Desktop\", color: \"hsl(var(--chart-1))\" },\n *   mobile: { label: \"Mobile\", color: \"hsl(var(--chart-2))\" },\n * }\n *\n * <LineChart\n *   data={data}\n *   config={config}\n *   xAxisKey=\"month\"\n *   series={[\"desktop\", \"mobile\"]}\n * />\n * ```\n */\nexport function LineChart({\n  activeDot = { r: 6 },\n  allowDecimals = true,\n  autoMinValue = false,\n  className,\n  config,\n  connectNulls = false,\n  customTooltip,\n  curveType = \"monotone\",\n  data,\n  dot = false,\n  enableLegendSlider = false,\n  gridDashArray = \"3 3\",\n  intervalType,\n  legendPosition = \"bottom\",\n  maxValue,\n  minValue,\n  onValueChange,\n  series,\n  showGrid = true,\n  showLegend = false,\n  showTooltip = true,\n  showXAxis = true,\n  showYAxis = true,\n  startEndOnly = false,\n  strokeWidth = 2,\n  tickGap,\n  tooltipCallback,\n  tooltipIndicator = \"dot\",\n  variant = \"default\",\n  xAxisLabel,\n  xAxisKey,\n  xAxisTickFormatter,\n  yAxisLabel,\n  yAxisTickFormatter,\n  yAxisWidth,\n  ...props\n}: LineChartProps) {\n  const normalizedSeries = normalizeSeriesConfig(series)\n  const variantStrokeDasharray = getVariantStrokeDasharray(variant)\n  const prevTooltipStateRef = React.useRef<boolean>(false)\n\n  // Handle dot click for onValueChange\n  const handleDotClick = React.useCallback(\n    (dataKey: string) => (data: { payload: Record<string, unknown> }) => {\n      if (!onValueChange) return\n      const payload = data.payload\n      const value = payload[dataKey]\n      onValueChange({\n        category: payload[xAxisKey],\n        dataKey,\n        payload,\n        value: typeof value === \"number\" ? value : 0,\n      })\n    },\n    [onValueChange, xAxisKey]\n  )\n\n  /* eslint-disable react-hooks/static-components, @eslint-react/no-nested-component-definitions, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access -- Intentional: memoized render function with Recharts any-typed props */\n  // Custom tooltip content wrapper for tooltipCallback\n  const TooltipContentWithCallback = React.useCallback(\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    (props: any) => {\n      const { active = false, label, payload } = props\n\n      // Call tooltipCallback when state changes\n      if (tooltipCallback && active !== prevTooltipStateRef.current) {\n        prevTooltipStateRef.current = active\n        tooltipCallback({\n          active,\n          label,\n          payload: payload?.map((p: { dataKey: number | string; payload: Record<string, unknown>; value: number; }) => ({\n            dataKey: String(p.dataKey),\n            value: p.value,\n            payload: p.payload,\n          })),\n        })\n      }\n\n      return <ChartTooltipContent indicator={tooltipIndicator} {...props} />\n    },\n    [tooltipCallback, tooltipIndicator]\n  )\n\n  // Calculate Y-axis domain\n  const yDomain = React.useMemo(() => {\n    const min = minValue ?? (autoMinValue ? \"auto\" : 0)\n    const max = maxValue ?? \"auto\"\n    return [min, max] as const\n  }, [autoMinValue, maxValue, minValue])\n\n  // Calculate X-axis ticks for startEndOnly\n  const xAxisTicks = React.useMemo(() => {\n    if (!startEndOnly || data.length < 2) return\n    const first = data[0]\n    const last = data[data.length - 1]\n    if (!first || !last) return\n    return [first[xAxisKey], last[xAxisKey]] as string[]\n  }, [data, startEndOnly, xAxisKey])\n\n  return (\n    <div data-slot=\"line-chart\" {...props}>\n      <ChartContainer\n        className={cn(className)}\n        config={config}\n      >\n        <RechartsLineChart\n          accessibilityLayer\n          data={data}\n          margin={{ left: xAxisLabel ? 20 : 12, right: 12, bottom: yAxisLabel ? 20 : 0 }}\n        >\n          {showGrid && (\n            <CartesianGrid strokeDasharray={gridDashArray} vertical={false} />\n          )}\n\n          {showXAxis && (\n            <XAxis\n              axisLine={false}\n              dataKey={xAxisKey}\n              interval={intervalType}\n              minTickGap={tickGap}\n              tickFormatter={xAxisTickFormatter}\n              tickLine={false}\n              tickMargin={8}\n              ticks={xAxisTicks}\n            >\n              {xAxisLabel && (\n                <Label offset={-5} position=\"insideBottom\" value={xAxisLabel} />\n              )}\n            </XAxis>\n          )}\n\n          {showYAxis && (\n            <YAxis\n              allowDecimals={allowDecimals}\n              axisLine={false}\n              domain={yDomain}\n              tickFormatter={yAxisTickFormatter}\n              tickLine={false}\n              tickMargin={8}\n              width={yAxisWidth}\n            >\n              {yAxisLabel && (\n                <Label angle={-90} offset={-5} position=\"insideLeft\" value={yAxisLabel} />\n              )}\n            </YAxis>\n          )}\n\n          {showTooltip && (\n            <ChartTooltip\n              content={\n                customTooltip\n                  ?? (tooltipCallback\n                    ? <TooltipContentWithCallback />\n                    : <ChartTooltipContent indicator={tooltipIndicator} />)\n              }\n              cursor={false}\n            />\n          )}\n\n          {showLegend && (\n            <ChartLegend\n              align={legendPosition === \"left\" ? \"left\" : legendPosition === \"right\" ? \"right\" : \"center\"}\n              content={<ChartLegendContent enableSlider={enableLegendSlider} />}\n              layout={legendPosition === \"left\" || legendPosition === \"right\" ? \"vertical\" : \"horizontal\"}\n              verticalAlign={legendPosition === \"top\" ? \"top\" : legendPosition === \"bottom\" ? \"bottom\" : \"middle\"}\n            />\n          )}\n\n          {normalizedSeries.map((seriesConfig) => {\n            const {\n              activeDot: seriesActiveDot,\n              dataKey,\n              dot: seriesDot,\n              strokeDasharray: seriesStrokeDasharray,\n              strokeOpacity,\n              strokeWidth: seriesStrokeWidth,\n            } = seriesConfig\n\n            const stroke = `var(--color-${dataKey})`\n            const finalStrokeDasharray = seriesStrokeDasharray ?? variantStrokeDasharray\n            const finalDot = seriesDot ?? dot\n            const finalStrokeWidth = seriesStrokeWidth ?? strokeWidth\n\n            // Merge activeDot config with click handler\n            const baseActiveDot = seriesActiveDot ?? activeDot\n            const finalActiveDot = onValueChange\n              ? typeof baseActiveDot === \"object\"\n                ? { ...baseActiveDot, onClick: handleDotClick(dataKey), style: { cursor: \"pointer\" } }\n                : !baseActiveDot\n                  ? false\n                  : { r: 6, onClick: handleDotClick(dataKey), style: { cursor: \"pointer\" } }\n              : baseActiveDot\n\n            return (\n              <Line\n                key={dataKey}\n                activeDot={finalActiveDot}\n                connectNulls={connectNulls}\n                dataKey={dataKey}\n                dot={finalDot}\n                stroke={stroke}\n                strokeDasharray={finalStrokeDasharray}\n                strokeOpacity={strokeOpacity}\n                strokeWidth={finalStrokeWidth}\n                type={curveType}\n              />\n            )\n          })}\n        </RechartsLineChart>\n      </ChartContainer>\n    </div>\n  )\n}\n\nLineChart.displayName = \"LineChart\"\n"]}

package/dist/chunk-XXFKDEFH.js

@@ -0,0 +1,143 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import 'react';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var panelVariants = cva(
+  ["flex flex-col rounded-[var(--panel-root-radius)]"],
+  {
+    variants: {
+      /**
+       * Visual variant of the panel
+       * - default: Background with subtle border
+       * - subtle: Muted background, no border
+       * - outlined: Border only, no background
+       * - elevated: With light shadow
+       * - inset: Inner shadow effect
+       */
+      variant: {
+        default: "bg-[color:var(--panel-variant-default-bg)] border border-[color:var(--panel-root-border-color)]",
+        subtle: "bg-[color:var(--panel-variant-subtle-bg)]",
+        outlined: "border border-[color:var(--panel-root-border-color)] bg-transparent",
+        elevated: "bg-[color:var(--panel-variant-elevated-bg)] shadow-[var(--panel-root-shadow)]",
+        inset: "bg-[color:var(--panel-variant-subtle-bg)] shadow-inner"
+      },
+      /**
+       * Width of the panel
+       * - xs: 240px (compact sidebar)
+       * - sm: 280px (standard sidebar)
+       * - md: 320px (medium panel)
+       * - lg: 400px (wide panel)
+       * - xl: 480px (extra wide panel)
+       * - auto: Content width
+       * - full: 100% width
+       */
+      size: {
+        xs: "w-[var(--panel-size-xs)]",
+        sm: "w-[var(--panel-size-sm)]",
+        md: "w-[var(--panel-size-md)]",
+        lg: "w-[var(--panel-size-lg)]",
+        xl: "w-[var(--panel-size-xl)]",
+        auto: "w-auto",
+        full: "w-full"
+      },
+      /**
+       * Position variant for styling based on panel placement
+       * - left: Left-positioned panel (sidebar)
+       * - right: Right-positioned panel (inspector)
+       * - top: Top-positioned panel
+       * - bottom: Bottom-positioned panel
+       * - center: Centered panel
+       */
+      position: {
+        left: "border-r",
+        right: "border-l",
+        top: "border-b",
+        bottom: "border-t",
+        center: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "auto"
+    }
+  }
+);
+var panelHeaderVariants = cva([
+  "px-[var(--panel-header-padding-x)] py-[var(--panel-header-padding-y)] shrink-0"
+]);
+var panelContentVariants = cva(["flex-1"], {
+  variants: {
+    scrollable: {
+      true: "overflow-auto",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    scrollable: false
+  }
+});
+var panelFooterVariants = cva([
+  "px-[var(--panel-footer-padding-x)] py-[var(--panel-footer-padding-y)] shrink-0"
+]);
+function Panel({
+  as: Component = "div",
+  variant,
+  size,
+  position,
+  collapsible,
+  collapsed,
+  onCollapse: _onCollapse,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: cn(panelVariants({ variant, size, position }), className),
+      "data-collapsed": collapsed ?? void 0,
+      "data-collapsible": collapsible ?? void 0,
+      "data-slot": "panel",
+      "data-state": collapsible ? collapsed ? "collapsed" : "expanded" : void 0,
+      ...props
+    }
+  );
+}
+function PanelHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(panelHeaderVariants(), className),
+      "data-slot": "panel-header",
+      ...props
+    }
+  );
+}
+function PanelContent({
+  scrollable = false,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(panelContentVariants({ scrollable }), className),
+      "data-slot": "panel-content",
+      ...props
+    }
+  );
+}
+function PanelFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(panelFooterVariants(), className),
+      "data-slot": "panel-footer",
+      ...props
+    }
+  );
+}
+
+export { Panel, PanelContent, PanelFooter, PanelHeader, panelContentVariants, panelFooterVariants, panelHeaderVariants, panelVariants };
+//# sourceMappingURL=chunk-XXFKDEFH.js.map
+//# sourceMappingURL=chunk-XXFKDEFH.js.map

package/dist/chunk-XXFKDEFH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Panel/Panel.variants.ts","../src/components/layout/Panel/Panel.tsx"],"names":[],"mappings":"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","file":"chunk-XXFKDEFH.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * Panel variant styles\n * Layout container for sidebars, inspectors, and section panels\n */\nexport const panelVariants = cva(\n  [\"flex flex-col rounded-[var(--panel-root-radius)]\"],\n  {\n  variants: {\n    /**\n     * Visual variant of the panel\n     * - default: Background with subtle border\n     * - subtle: Muted background, no border\n     * - outlined: Border only, no background\n     * - elevated: With light shadow\n     * - inset: Inner shadow effect\n     */\n    variant: {\n      default: \"bg-[color:var(--panel-variant-default-bg)] border border-[color:var(--panel-root-border-color)]\",\n      subtle: \"bg-[color:var(--panel-variant-subtle-bg)]\",\n      outlined: \"border border-[color:var(--panel-root-border-color)] bg-transparent\",\n      elevated: \"bg-[color:var(--panel-variant-elevated-bg)] shadow-[var(--panel-root-shadow)]\",\n      inset: \"bg-[color:var(--panel-variant-subtle-bg)] shadow-inner\",\n    },\n    /**\n     * Width of the panel\n     * - xs: 240px (compact sidebar)\n     * - sm: 280px (standard sidebar)\n     * - md: 320px (medium panel)\n     * - lg: 400px (wide panel)\n     * - xl: 480px (extra wide panel)\n     * - auto: Content width\n     * - full: 100% width\n     */\n    size: {\n      xs: \"w-[var(--panel-size-xs)]\",\n      sm: \"w-[var(--panel-size-sm)]\",\n      md: \"w-[var(--panel-size-md)]\",\n      lg: \"w-[var(--panel-size-lg)]\",\n      xl: \"w-[var(--panel-size-xl)]\",\n      auto: \"w-auto\",\n      full: \"w-full\",\n    },\n    /**\n     * Position variant for styling based on panel placement\n     * - left: Left-positioned panel (sidebar)\n     * - right: Right-positioned panel (inspector)\n     * - top: Top-positioned panel\n     * - bottom: Bottom-positioned panel\n     * - center: Centered panel\n     */\n    position: {\n      left: \"border-r\",\n      right: \"border-l\",\n      top: \"border-b\",\n      bottom: \"border-t\",\n      center: \"\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"auto\",\n  },\n})\n\n/**\n * PanelHeader variant styles\n * Header section with padding and shrink behavior\n */\nexport const panelHeaderVariants = cva([\n  \"px-[var(--panel-header-padding-x)] py-[var(--panel-header-padding-y)] shrink-0\",\n])\n\n/**\n * PanelContent variant styles\n * Main content area with flex-grow\n */\nexport const panelContentVariants = cva([\"flex-1\"], {\n  variants: {\n    scrollable: {\n      true: \"overflow-auto\",\n      false: \"\",\n    },\n  },\n  defaultVariants: {\n    scrollable: false,\n  },\n})\n\n/**\n * PanelFooter variant styles\n * Footer section with padding and shrink behavior\n */\nexport const panelFooterVariants = cva([\n  \"px-[var(--panel-footer-padding-x)] py-[var(--panel-footer-padding-y)] shrink-0\",\n])\n\nexport type PanelVariantProps = VariantProps<typeof panelVariants>\nexport type PanelContentVariantProps = VariantProps<typeof panelContentVariants>\n","import type {\n  PanelContentProps,\n  PanelFooterProps,\n  PanelHeaderProps,\n  PanelProps,\n} from \"./Panel.types\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  panelContentVariants,\n  panelFooterVariants,\n  panelHeaderVariants,\n  panelVariants,\n} from \"./Panel.variants\"\n\nfunction Panel({\n  as: Component = \"div\",\n  variant,\n  size,\n  position,\n  collapsible,\n  collapsed,\n  onCollapse: _onCollapse,\n  className,\n  ...props\n}: PanelProps) {\n  return (\n    <Component\n      className={cn(panelVariants({ variant, size, position }), className)}\n      data-collapsed={collapsed ?? undefined}\n      data-collapsible={collapsible ?? undefined}\n      data-slot=\"panel\"\n      data-state={collapsible ? (collapsed ? \"collapsed\" : \"expanded\") : undefined}\n      {...props}\n    />\n  )\n}\n\nfunction PanelHeader({ className, ...props }: PanelHeaderProps) {\n  return (\n    <div\n      className={cn(panelHeaderVariants(), className)}\n      data-slot=\"panel-header\"\n      {...props}\n    />\n  )\n}\n\nfunction PanelContent({\n  scrollable = false,\n  className,\n  ...props\n}: PanelContentProps) {\n  return (\n    <div\n      className={cn(panelContentVariants({ scrollable }), className)}\n      data-slot=\"panel-content\"\n      {...props}\n    />\n  )\n}\n\nfunction PanelFooter({ className, ...props }: PanelFooterProps) {\n  return (\n    <div\n      className={cn(panelFooterVariants(), className)}\n      data-slot=\"panel-footer\"\n      {...props}\n    />\n  )\n}\n\nexport { Panel, PanelContent, PanelFooter, PanelHeader }\n"]}

package/dist/chunk-Y555RCRZ.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+// src/hooks/use-media-query.ts
+function useMediaQuery(query) {
+  const subscribe = React.useCallback(
+    (callback) => {
+      const matchMedia = window.matchMedia(query);
+      matchMedia.addEventListener("change", callback);
+      return () => {
+        matchMedia.removeEventListener("change", callback);
+      };
+    },
+    [query]
+  );
+  const getSnapshot = () => {
+    return window.matchMedia(query).matches;
+  };
+  const getServerSnapshot = () => {
+    return false;
+  };
+  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+
+export { useMediaQuery };
+//# sourceMappingURL=chunk-Y555RCRZ.js.map
+//# sourceMappingURL=chunk-Y555RCRZ.js.map

package/dist/chunk-Y555RCRZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/use-media-query.ts"],"names":[],"mappings":";;;AAEO,SAAS,cAAc,KAAA,EAAe;AAC3C,EAAA,MAAM,SAAA,GAAkB,KAAA,CAAA,WAAA;AAAA,IACtB,CAAC,QAAA,KAAyB;AACxB,MAAA,MAAM,UAAA,GAAa,MAAA,CAAO,UAAA,CAAW,KAAK,CAAA;AAC1C,MAAA,UAAA,CAAW,gBAAA,CAAiB,UAAU,QAAQ,CAAA;AAC9C,MAAA,OAAO,MAAM;AACX,QAAA,UAAA,CAAW,mBAAA,CAAoB,UAAU,QAAQ,CAAA;AAAA,MACnD,CAAA;AAAA,IACF,CAAA;AAAA,IACA,CAAC,KAAK;AAAA,GACR;AAEA,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,OAAO,MAAA,CAAO,UAAA,CAAW,KAAK,CAAA,CAAE,OAAA;AAAA,EAClC,CAAA;AAEA,EAAA,MAAM,oBAAoB,MAAM;AAC9B,IAAA,OAAO,KAAA;AAAA,EACT,CAAA;AAEA,EAAA,OAAa,KAAA,CAAA,oBAAA,CAAqB,SAAA,EAAW,WAAA,EAAa,iBAAiB,CAAA;AAC7E","file":"chunk-Y555RCRZ.js","sourcesContent":["import * as React from \"react\"\n\nexport function useMediaQuery(query: string) {\n  const subscribe = React.useCallback(\n    (callback: () => void) => {\n      const matchMedia = window.matchMedia(query)\n      matchMedia.addEventListener(\"change\", callback)\n      return () => {\n        matchMedia.removeEventListener(\"change\", callback)\n      }\n    },\n    [query]\n  )\n\n  const getSnapshot = () => {\n    return window.matchMedia(query).matches\n  }\n\n  const getServerSnapshot = () => {\n    return false\n  }\n\n  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)\n}\n"]}

package/dist/chunk-Y5GO2F6P.js

@@ -0,0 +1,188 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var tabNavigationVariants = cva(
+  [
+    "flex items-center gap-1",
+    "overflow-x-auto scrollbar-none"
+  ],
+  {
+    defaultVariants: {
+      variant: "line"
+    },
+    variants: {
+      variant: {
+        line: [
+          "border-b border-border"
+        ],
+        solid: [
+          "rounded-lg bg-muted p-1"
+        ]
+      }
+    }
+  }
+);
+var tabNavigationLinkVariants = cva(
+  [
+    "inline-flex items-center justify-center gap-2",
+    "whitespace-nowrap text-sm font-medium",
+    "transition-all duration-200",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+    "disabled:pointer-events-none disabled:opacity-50"
+  ],
+  {
+    compoundVariants: [
+      // Line variant - active state
+      {
+        active: true,
+        variant: "line",
+        class: [
+          "border-b-2 border-primary text-foreground"
+        ]
+      },
+      // Line variant - inactive state
+      {
+        active: false,
+        variant: "line",
+        class: [
+          "border-b-2 border-transparent text-muted-foreground",
+          "hover:text-foreground hover:border-border"
+        ]
+      },
+      // Solid variant - active state
+      {
+        active: true,
+        variant: "solid",
+        class: [
+          "bg-background text-foreground shadow-sm"
+        ]
+      },
+      // Solid variant - inactive state
+      {
+        active: false,
+        variant: "solid",
+        class: [
+          "text-muted-foreground",
+          "hover:text-foreground hover:bg-background/50"
+        ]
+      }
+    ],
+    defaultVariants: {
+      active: false,
+      variant: "line"
+    },
+    variants: {
+      active: {
+        false: "",
+        true: ""
+      },
+      variant: {
+        line: [
+          "px-3 py-2 -mb-px"
+        ],
+        solid: [
+          "px-3 py-1.5 rounded-md"
+        ]
+      }
+    }
+  }
+);
+var TabNavigationContext = React.createContext({
+  activeValue: void 0,
+  onValueChange: void 0,
+  variant: "line"
+});
+function TabNavigation({
+  children,
+  className,
+  defaultValue,
+  onValueChange,
+  value: controlledValue,
+  variant = "line",
+  ...props
+}) {
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const activeValue = isControlled ? controlledValue : uncontrolledValue;
+  const handleValueChange = React.useCallback(
+    (newValue) => {
+      if (!isControlled) {
+        setUncontrolledValue(newValue);
+      }
+      onValueChange?.(newValue);
+    },
+    [isControlled, onValueChange]
+  );
+  const contextValue = React.useMemo(
+    () => ({
+      activeValue,
+      onValueChange: handleValueChange,
+      variant
+    }),
+    [activeValue, handleValueChange, variant]
+  );
+  return /* @__PURE__ */ jsx(TabNavigationContext, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "aria-label": "Tab navigation",
+      className: cn(tabNavigationVariants({ variant }), className),
+      "data-slot": "tab-navigation",
+      role: "navigation",
+      ...props,
+      children
+    }
+  ) });
+}
+function TabNavigationLink({
+  active: activeProp,
+  children,
+  className,
+  disabled = false,
+  href,
+  icon,
+  onClick,
+  value,
+  ...props
+}) {
+  const { activeValue, onValueChange, variant } = React.use(TabNavigationContext);
+  const isActive = activeProp ?? activeValue === value;
+  const handleClick = (e) => {
+    if (disabled) {
+      e.preventDefault();
+      return;
+    }
+    onValueChange?.(value);
+    onClick?.(e);
+  };
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      className: cn(
+        tabNavigationLinkVariants({ active: isActive, variant }),
+        disabled && "pointer-events-none opacity-50",
+        className
+      ),
+      "aria-current": isActive ? "page" : void 0,
+      "aria-disabled": disabled,
+      "data-active": isActive,
+      "data-slot": "tab-navigation-link",
+      href: disabled ? void 0 : href,
+      role: "link",
+      tabIndex: disabled ? -1 : 0,
+      onClick: handleClick,
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "size-4 shrink-0", "data-slot": "tab-navigation-icon", children: icon }),
+        children
+      ]
+    }
+  );
+}
+TabNavigation.displayName = "TabNavigation";
+TabNavigationLink.displayName = "TabNavigationLink";
+
+export { TabNavigation, TabNavigationLink, tabNavigationLinkVariants, tabNavigationVariants };
+//# sourceMappingURL=chunk-Y5GO2F6P.js.map
+//# sourceMappingURL=chunk-Y5GO2F6P.js.map

package/dist/chunk-Y5GO2F6P.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/TabNavigation/TabNavigation.variants.ts","../src/components/navigation/TabNavigation/TabNavigation.tsx"],"names":[],"mappings":"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","file":"chunk-Y5GO2F6P.js","sourcesContent":["import { cva } from \"class-variance-authority\"\n\n/**\n * TabNavigation container variants\n */\nexport const tabNavigationVariants = cva(\n  [\n    \"flex items-center gap-1\",\n    \"overflow-x-auto scrollbar-none\",\n  ],\n  {\n    defaultVariants: {\n      variant: \"line\",\n    },\n    variants: {\n      variant: {\n        line: [\n          \"border-b border-border\",\n        ],\n        solid: [\n          \"rounded-lg bg-muted p-1\",\n        ],\n      },\n    },\n  }\n)\n\n/**\n * TabNavigationLink variants\n */\nexport const tabNavigationLinkVariants = cva(\n  [\n    \"inline-flex items-center justify-center gap-2\",\n    \"whitespace-nowrap text-sm font-medium\",\n    \"transition-all duration-200\",\n    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n    \"disabled:pointer-events-none disabled:opacity-50\",\n  ],\n  {\n    compoundVariants: [\n      // Line variant - active state\n      {\n        active: true,\n        variant: \"line\",\n        class: [\n          \"border-b-2 border-primary text-foreground\",\n        ],\n      },\n      // Line variant - inactive state\n      {\n        active: false,\n        variant: \"line\",\n        class: [\n          \"border-b-2 border-transparent text-muted-foreground\",\n          \"hover:text-foreground hover:border-border\",\n        ],\n      },\n      // Solid variant - active state\n      {\n        active: true,\n        variant: \"solid\",\n        class: [\n          \"bg-background text-foreground shadow-sm\",\n        ],\n      },\n      // Solid variant - inactive state\n      {\n        active: false,\n        variant: \"solid\",\n        class: [\n          \"text-muted-foreground\",\n          \"hover:text-foreground hover:bg-background/50\",\n        ],\n      },\n    ],\n    defaultVariants: {\n      active: false,\n      variant: \"line\",\n    },\n    variants: {\n      active: {\n        false: \"\",\n        true: \"\",\n      },\n      variant: {\n        line: [\n          \"px-3 py-2 -mb-px\",\n        ],\n        solid: [\n          \"px-3 py-1.5 rounded-md\",\n        ],\n      },\n    },\n  }\n)\n","\"use client\"\n\nimport type {\n  TabNavigationLinkProps,\n  TabNavigationProps,\n  TabNavigationVariant,\n} from \"./TabNavigation.types\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  tabNavigationLinkVariants,\n  tabNavigationVariants,\n} from \"./TabNavigation.variants\"\n\n/**\n * Context for TabNavigation\n */\ninterface TabNavigationContextValue {\n  activeValue: string | undefined\n  onValueChange: ((value: string) => void) | undefined\n  variant: TabNavigationVariant\n}\n\nconst TabNavigationContext = React.createContext<TabNavigationContextValue>({\n  activeValue: undefined,\n  onValueChange: undefined,\n  variant: \"line\",\n})\n\n/**\n * TabNavigation - Link-based tab navigation\n *\n * A horizontal navigation component styled like tabs but using links\n * for navigation. Unlike regular Tabs which manage content switching,\n * TabNavigation is meant for actual page/route navigation.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <TabNavigation defaultValue=\"dashboard\">\n *   <TabNavigationLink value=\"dashboard\" href=\"/dashboard\">\n *     Dashboard\n *   </TabNavigationLink>\n *   <TabNavigationLink value=\"reports\" href=\"/reports\">\n *     Reports\n *   </TabNavigationLink>\n *   <TabNavigationLink value=\"settings\" href=\"/settings\">\n *     Settings\n *   </TabNavigationLink>\n * </TabNavigation>\n *\n * // Controlled with router\n * const pathname = usePathname()\n *\n * <TabNavigation value={pathname}>\n *   <TabNavigationLink value=\"/dashboard\" href=\"/dashboard\">\n *     Dashboard\n *   </TabNavigationLink>\n *   <TabNavigationLink value=\"/reports\" href=\"/reports\">\n *     Reports\n *   </TabNavigationLink>\n * </TabNavigation>\n *\n * // Solid variant\n * <TabNavigation variant=\"solid\" defaultValue=\"tab1\">\n *   <TabNavigationLink value=\"tab1\" href=\"/tab1\">Tab 1</TabNavigationLink>\n *   <TabNavigationLink value=\"tab2\" href=\"/tab2\">Tab 2</TabNavigationLink>\n * </TabNavigation>\n *\n * // With icons\n * <TabNavigation defaultValue=\"home\">\n *   <TabNavigationLink value=\"home\" href=\"/\" icon={<HomeIcon />}>\n *     Home\n *   </TabNavigationLink>\n *   <TabNavigationLink value=\"settings\" href=\"/settings\" icon={<SettingsIcon />}>\n *     Settings\n *   </TabNavigationLink>\n * </TabNavigation>\n * ```\n */\nfunction TabNavigation({\n  children,\n  className,\n  defaultValue,\n  onValueChange,\n  value: controlledValue,\n  variant = \"line\",\n  ...props\n}: TabNavigationProps) {\n  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue)\n\n  const isControlled = controlledValue !== undefined\n  const activeValue = isControlled ? controlledValue : uncontrolledValue\n\n  const handleValueChange = React.useCallback(\n    (newValue: string) => {\n      if (!isControlled) {\n        setUncontrolledValue(newValue)\n      }\n      onValueChange?.(newValue)\n    },\n    [isControlled, onValueChange]\n  )\n\n  const contextValue = React.useMemo<TabNavigationContextValue>(\n    () => ({\n      activeValue,\n      onValueChange: handleValueChange,\n      variant,\n    }),\n    [activeValue, handleValueChange, variant]\n  )\n\n  return (\n    <TabNavigationContext value={contextValue}>\n      <nav\n        aria-label=\"Tab navigation\"\n        className={cn(tabNavigationVariants({ variant }), className)}\n        data-slot=\"tab-navigation\"\n        role=\"navigation\"\n        {...props}\n      >\n        {children}\n      </nav>\n    </TabNavigationContext>\n  )\n}\n\n/**\n * TabNavigationLink - Individual navigation link within TabNavigation\n *\n * Renders as an anchor tag for navigation. Can be used with or without href\n * for SPA frameworks that handle navigation differently.\n */\nfunction TabNavigationLink({\n  active: activeProp,\n  children,\n  className,\n  disabled = false,\n  href,\n  icon,\n  onClick,\n  value,\n  ...props\n}: TabNavigationLinkProps) {\n  const { activeValue, onValueChange, variant } = React.use(TabNavigationContext)\n\n  // Determine if this link is active\n  const isActive = activeProp ?? activeValue === value\n\n  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {\n    if (disabled) {\n      e.preventDefault()\n      return\n    }\n\n    // Update active value\n    onValueChange?.(value)\n\n    // Call custom onClick handler\n    onClick?.(e)\n  }\n\n  return (\n    <a\n      className={cn(\n        tabNavigationLinkVariants({ active: isActive, variant }),\n        disabled && \"pointer-events-none opacity-50\",\n        className\n      )}\n      aria-current={isActive ? \"page\" : undefined}\n      aria-disabled={disabled}\n      data-active={isActive}\n      data-slot=\"tab-navigation-link\"\n      href={disabled ? undefined : href}\n      role=\"link\"\n      tabIndex={disabled ? -1 : 0}\n      onClick={handleClick}\n      {...props}\n    >\n      {icon && (\n        <span className=\"size-4 shrink-0\" data-slot=\"tab-navigation-icon\">\n          {icon}\n        </span>\n      )}\n      {children}\n    </a>\n  )\n}\n\nTabNavigation.displayName = \"TabNavigation\"\nTabNavigationLink.displayName = \"TabNavigationLink\"\n\nexport { TabNavigation, TabNavigationLink }\n"]}