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

package/dist/chunk-EZYXD2YI.js

@@ -0,0 +1,147 @@
+import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from './chunk-WG34IXUV.js';
+import { Field, FieldLabel, FieldError, FieldDescription } from './chunk-LRE3LJMW.js';
+import * as React from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+
+function InputOTPField({
+  label,
+  description,
+  errorMessage,
+  required,
+  digits = 6,
+  placeholder,
+  size = "md",
+  slotSize,
+  onChange,
+  onComplete,
+  value,
+  defaultValue,
+  disabled,
+  pattern,
+  className,
+  containerClassName
+}) {
+  const id = React.useId();
+  const inputId = `${id}-input`;
+  const descriptionId = `${id}-description`;
+  const errorId = `${id}-error`;
+  const hasError = !!errorMessage;
+  const resolvedSlotSize = slotSize ?? size;
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = React.useState(defaultValue ?? "");
+  const currentValue = isControlled ? value : internalValue;
+  const handleChange = React.useCallback(
+    (nextValue) => {
+      if (!isControlled) {
+        setInternalValue(nextValue);
+      }
+      onChange?.(nextValue);
+    },
+    [isControlled, onChange]
+  );
+  const renderSlots = () => {
+    const slotProps = {
+      size: resolvedSlotSize,
+      ...placeholder ? { placeholder } : {}
+    };
+    if (digits === 4) {
+      return /* @__PURE__ */ jsx(InputOTPGroup, { children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsx(InputOTPSlot, { index: i, ...slotProps }, i)) });
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(InputOTPGroup, { children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsx(InputOTPSlot, { index: i, ...slotProps }, i)) }),
+      /* @__PURE__ */ jsx(InputOTPSeparator, {}),
+      /* @__PURE__ */ jsx(InputOTPGroup, { children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsx(InputOTPSlot, { index: i + 3, ...slotProps }, i + 3)) })
+    ] });
+  };
+  return /* @__PURE__ */ jsxs(Field, { children: [
+    label && /* @__PURE__ */ jsxs(FieldLabel, { htmlFor: inputId, children: [
+      label,
+      required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-destructive ml-1", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      InputOTP,
+      {
+        id: inputId,
+        maxLength: digits,
+        slotSize: resolvedSlotSize,
+        onChange: handleChange,
+        ...onComplete ? { onComplete } : {},
+        disabled,
+        value: currentValue,
+        ...pattern ? { pattern } : {},
+        ...className ? { className } : {},
+        ...containerClassName ? { containerClassName } : {},
+        "aria-describedby": hasError ? errorId : description ? descriptionId : void 0,
+        "aria-invalid": hasError || void 0,
+        "aria-required": required || void 0,
+        children: renderSlots()
+      }
+    ),
+    hasError ? /* @__PURE__ */ jsx(FieldError, { id: errorId, children: errorMessage }) : description ? /* @__PURE__ */ jsx(FieldDescription, { id: descriptionId, children: description }) : null
+  ] });
+}
+var inputOTPFieldVariants = cva(
+  "flex flex-col gap-2",
+  {
+    variants: {
+      size: {
+        sm: "gap-1.5",
+        md: "gap-2",
+        lg: "gap-2.5"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var inputOTPFieldLabelVariants = cva(
+  "font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var inputOTPFieldDescriptionVariants = cva(
+  "text-muted-foreground",
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-sm"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var inputOTPFieldErrorVariants = cva(
+  "text-destructive font-medium",
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-sm"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+
+export { InputOTPField, inputOTPFieldDescriptionVariants, inputOTPFieldErrorVariants, inputOTPFieldLabelVariants, inputOTPFieldVariants };
+//# sourceMappingURL=chunk-EZYXD2YI.js.map
+//# sourceMappingURL=chunk-EZYXD2YI.js.map

package/dist/chunk-EZYXD2YI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/InputOTPField/InputOTPField.tsx","../src/components/forms/InputOTPField/InputOTPField.variants.ts"],"names":[],"mappings":";;;;;;AAyCA,SAAS,aAAA,CAAc;AAAA,EACrB,KAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA,GAAS,CAAA;AAAA,EACT,WAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,QAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,KAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAAuB;AACrB,EAAA,MAAM,KAAW,KAAA,CAAA,KAAA,EAAM;AACvB,EAAA,MAAM,OAAA,GAAU,GAAG,EAAE,CAAA,MAAA,CAAA;AACrB,EAAA,MAAM,aAAA,GAAgB,GAAG,EAAE,CAAA,YAAA,CAAA;AAC3B,EAAA,MAAM,OAAA,GAAU,GAAG,EAAE,CAAA,MAAA,CAAA;AAErB,EAAA,MAAM,QAAA,GAAW,CAAC,CAAC,YAAA;AACnB,EAAA,MAAM,mBAAmB,QAAA,IAAY,IAAA;AACrC,EAAA,MAAM,eAAe,KAAA,KAAU,MAAA;AAC/B,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAU,KAAA,CAAA,QAAA,CAAS,gBAAgB,EAAE,CAAA;AAE3E,EAAA,MAAM,YAAA,GAAe,eAAe,KAAA,GAAQ,aAAA;AAE5C,EAAA,MAAM,YAAA,GAAqB,KAAA,CAAA,WAAA;AAAA,IACzB,CAAC,SAAA,KAAsB;AACrB,MAAA,IAAI,CAAC,YAAA,EAAc;AACjB,QAAA,gBAAA,CAAiB,SAAS,CAAA;AAAA,MAC5B;AACA,MAAA,QAAA,GAAW,SAAS,CAAA;AAAA,IACtB,CAAA;AAAA,IACA,CAAC,cAAc,QAAQ;AAAA,GACzB;AAKA,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,MAAM,SAAA,GAAY;AAAA,MAChB,IAAA,EAAM,gBAAA;AAAA,MACN,GAAI,WAAA,GAAc,EAAE,WAAA,KAAgB;AAAC,KACvC;AAEA,IAAA,IAAI,WAAW,CAAA,EAAG;AAChB,MAAA,uBACE,GAAA,CAAC,iBACE,QAAA,EAAA,KAAA,CAAM,IAAA,CAAK,EAAE,MAAA,EAAQ,CAAA,EAAG,CAAA,CAAE,GAAA,CAAI,CAAC,CAAA,EAAG,CAAA,yBAChC,YAAA,EAAA,EAAqB,KAAA,EAAO,GAAI,GAAG,SAAA,EAAA,EAAjB,CAA4B,CAChD,CAAA,EACH,CAAA;AAAA,IAEJ;AAGA,IAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,aAAA,EAAA,EACE,gBAAM,IAAA,CAAK,EAAE,QAAQ,CAAA,EAAG,EAAE,GAAA,CAAI,CAAC,GAAG,CAAA,qBACjC,GAAA,CAAC,gBAAqB,KAAA,EAAO,CAAA,EAAI,GAAG,SAAA,EAAA,EAAjB,CAA4B,CAChD,CAAA,EACH,CAAA;AAAA,0BACC,iBAAA,EAAA,EAAkB,CAAA;AAAA,sBACnB,GAAA,CAAC,iBACE,QAAA,EAAA,KAAA,CAAM,IAAA,CAAK,EAAE,MAAA,EAAQ,CAAA,EAAG,CAAA,CAAE,GAAA,CAAI,CAAC,GAAG,CAAA,qBACjC,GAAA,CAAC,YAAA,EAAA,EAAyB,KAAA,EAAO,CAAA,GAAI,CAAA,EAAI,GAAG,SAAA,EAAA,EAAzB,CAAA,GAAI,CAAgC,CACxD,CAAA,EACH;AAAA,KAAA,EACF,CAAA;AAAA,EAEJ,CAAA;AAGA,EAAA,4BACG,KAAA,EAAA,EACE,QAAA,EAAA;AAAA,IAAA,KAAA,oBACC,IAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAS,OAAA,EAClB,QAAA,EAAA;AAAA,MAAA,KAAA;AAAA,MACA,4BACC,GAAA,CAAC,MAAA,EAAA,EAAK,eAAY,MAAA,EAAO,SAAA,EAAU,yBAAwB,QAAA,EAAA,GAAA,EAE3D;AAAA,KAAA,EAEJ,CAAA;AAAA,oBAEF,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,EAAA,EAAI,OAAA;AAAA,QACJ,SAAA,EAAW,MAAA;AAAA,QACX,QAAA,EAAU,gBAAA;AAAA,QACV,QAAA,EAAU,YAAA;AAAA,QACT,GAAI,UAAA,GAAa,EAAE,UAAA,KAAe,EAAC;AAAA,QACpC,QAAA;AAAA,QACA,KAAA,EAAO,YAAA;AAAA,QACN,GAAI,OAAA,GAAU,EAAE,OAAA,KAAY,EAAC;AAAA,QAC7B,GAAI,SAAA,GAAY,EAAE,SAAA,KAAc,EAAC;AAAA,QACjC,GAAI,kBAAA,GAAqB,EAAE,kBAAA,KAAuB,EAAC;AAAA,QACpD,kBAAA,EACE,QAAA,GAAW,OAAA,GAAW,WAAA,GAAc,aAAA,GAAgB,MAAA;AAAA,QAEtD,gBAAc,QAAA,IAAY,MAAA;AAAA,QAE1B,iBAAe,QAAA,IAAY,MAAA;AAAA,QAE1B,QAAA,EAAA,WAAA;AAAY;AAAA,KACf;AAAA,IACC,QAAA,mBACC,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAI,OAAA,EAAU,QAAA,EAAA,YAAA,EAAa,CAAA,GACrC,WAAA,mBACF,GAAA,CAAC,gBAAA,EAAA,EAAiB,EAAA,EAAI,aAAA,EAAgB,uBAAY,CAAA,GAChD;AAAA,GAAA,EACN,CAAA;AAEJ;ACxJO,IAAM,qBAAA,GAAwB,GAAA;AAAA,EACnC,qBAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,SAAA;AAAA,QACJ,EAAA,EAAI,OAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM;AAAA;AACR;AAEJ;AAKO,IAAM,0BAAA,GAA6B,GAAA;AAAA,EACxC,oFAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,SAAA;AAAA,QACJ,EAAA,EAAI,SAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM;AAAA;AACR;AAEJ;AAKO,IAAM,gCAAA,GAAmC,GAAA;AAAA,EAC9C,uBAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,SAAA;AAAA,QACJ,EAAA,EAAI,SAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM;AAAA;AACR;AAEJ;AAKO,IAAM,0BAAA,GAA6B,GAAA;AAAA,EACxC,8BAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,SAAA;AAAA,QACJ,EAAA,EAAI,SAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM;AAAA;AACR;AAEJ","file":"chunk-EZYXD2YI.js","sourcesContent":["\"use client\"\n\nimport type { InputOTPFieldProps } from \"./InputOTPField.types\"\n\nimport * as React from \"react\"\n\nimport { Field, FieldDescription, FieldError, FieldLabel } from \"../Field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"../InputOTP\"\n\n/**\n * InputOTPField - A complete OTP input field with label, description, and error handling\n *\n * @example\n * ```tsx\n * // 6-digit OTP with two groups\n * <InputOTPField\n *   label=\"Verification Code\"\n *   description=\"Enter the 6-digit code sent to your phone\"\n *   digits={6}\n * />\n *\n * // 4-digit OTP with placeholder\n * <InputOTPField\n *   label=\"PIN\"\n *   digits={4}\n *   placeholder=\"0\"\n * />\n *\n * // With error state\n * <InputOTPField\n *   label=\"Code\"\n *   errorMessage=\"Invalid verification code\"\n *   digits={6}\n * />\n * ```\n */\nfunction InputOTPField({\n  label,\n  description,\n  errorMessage,\n  required,\n  digits = 6,\n  placeholder,\n  size = \"md\",\n  slotSize,\n  onChange,\n  onComplete,\n  value,\n  defaultValue,\n  disabled,\n  pattern,\n  className,\n  containerClassName,\n}: InputOTPFieldProps) {\n  const id = React.useId()\n  const inputId = `${id}-input`\n  const descriptionId = `${id}-description`\n  const errorId = `${id}-error`\n\n  const hasError = !!errorMessage\n  const resolvedSlotSize = slotSize ?? size\n  const isControlled = value !== undefined\n  const [internalValue, setInternalValue] = React.useState(defaultValue ?? \"\")\n\n  const currentValue = isControlled ? value : internalValue\n\n  const handleChange = React.useCallback(\n    (nextValue: string) => {\n      if (!isControlled) {\n        setInternalValue(nextValue)\n      }\n      onChange?.(nextValue)\n    },\n    [isControlled, onChange]\n  )\n\n  // Generate slot elements based on digit count\n  // Index keys are safe here: OTP slots are static, fixed-length, never reordered\n  /* eslint-disable @eslint-react/no-array-index-key */\n  const renderSlots = () => {\n    const slotProps = {\n      size: resolvedSlotSize,\n      ...(placeholder ? { placeholder } : {}),\n    }\n\n    if (digits === 4) {\n      return (\n        <InputOTPGroup>\n          {Array.from({ length: 4 }).map((_, i) => (\n            <InputOTPSlot key={i} index={i} {...slotProps} />\n          ))}\n        </InputOTPGroup>\n      )\n    }\n\n    // 6 digits: two groups of 3 with separator\n    return (\n      <>\n        <InputOTPGroup>\n          {Array.from({ length: 3 }).map((_, i) => (\n            <InputOTPSlot key={i} index={i} {...slotProps} />\n          ))}\n        </InputOTPGroup>\n        <InputOTPSeparator />\n        <InputOTPGroup>\n          {Array.from({ length: 3 }).map((_, i) => (\n            <InputOTPSlot key={i + 3} index={i + 3} {...slotProps} />\n          ))}\n        </InputOTPGroup>\n      </>\n    )\n  }\n  /* eslint-enable @eslint-react/no-array-index-key */\n\n  return (\n    <Field>\n      {label && (\n        <FieldLabel htmlFor={inputId}>\n          {label}\n          {required && (\n            <span aria-hidden=\"true\" className=\"text-destructive ml-1\">\n              *\n            </span>\n          )}\n        </FieldLabel>\n      )}\n      <InputOTP\n        id={inputId}\n        maxLength={digits}\n        slotSize={resolvedSlotSize}\n        onChange={handleChange}\n        {...(onComplete ? { onComplete } : {})}\n        disabled={disabled}\n        value={currentValue}\n        {...(pattern ? { pattern } : {})}\n        {...(className ? { className } : {})}\n        {...(containerClassName ? { containerClassName } : {})}\n        aria-describedby={\n          hasError ? errorId : (description ? descriptionId : undefined)\n        }\n        aria-invalid={hasError || undefined}\n        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- Using || intentionally: false || undefined = undefined, false ?? undefined = false\n        aria-required={required || undefined}\n      >\n        {renderSlots()}\n      </InputOTP>\n      {hasError ? (\n        <FieldError id={errorId}>{errorMessage}</FieldError>\n      ) : description ? (\n        <FieldDescription id={descriptionId}>{description}</FieldDescription>\n      ) : null}\n    </Field>\n  )\n}\n\nexport { InputOTPField }\n","import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * InputOTPField container variant styles using CVA\n * Wraps the Field + InputOTP combination with consistent spacing\n */\nexport const inputOTPFieldVariants = cva(\n  \"flex flex-col gap-2\",\n  {\n    variants: {\n      size: {\n        sm: \"gap-1.5\",\n        md: \"gap-2\",\n        lg: \"gap-2.5\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\n/**\n * InputOTPField label variant styles using CVA\n */\nexport const inputOTPFieldLabelVariants = cva(\n  \"font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\",\n  {\n    variants: {\n      size: {\n        sm: \"text-xs\",\n        md: \"text-sm\",\n        lg: \"text-base\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\n/**\n * InputOTPField description variant styles using CVA\n */\nexport const inputOTPFieldDescriptionVariants = cva(\n  \"text-muted-foreground\",\n  {\n    variants: {\n      size: {\n        sm: \"text-xs\",\n        md: \"text-sm\",\n        lg: \"text-sm\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\n/**\n * InputOTPField error variant styles using CVA\n */\nexport const inputOTPFieldErrorVariants = cva(\n  \"text-destructive font-medium\",\n  {\n    variants: {\n      size: {\n        sm: \"text-xs\",\n        md: \"text-sm\",\n        lg: \"text-sm\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nexport type InputOTPFieldVariantProps = VariantProps<typeof inputOTPFieldVariants>\nexport type InputOTPFieldLabelVariantProps = VariantProps<typeof inputOTPFieldLabelVariants>\nexport type InputOTPFieldDescriptionVariantProps = VariantProps<typeof inputOTPFieldDescriptionVariants>\nexport type InputOTPFieldErrorVariantProps = VariantProps<typeof inputOTPFieldErrorVariants>\n"]}

package/dist/chunk-F3ETIDS7.js

@@ -0,0 +1,236 @@
+import { ChartTooltipContent, ChartContainer, ChartTooltip, ChartLegend, ChartLegendContent } from './chunk-XXWCMY2G.js';
+import { cn } from './chunk-RVAYDRMA.js';
+import * as React from 'react';
+import { AreaChart as AreaChart$1, CartesianGrid, XAxis, Label, YAxis, Area } from 'recharts';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function normalizeSeriesConfig(series) {
+  return series.map(
+    (s) => typeof s === "string" ? { dataKey: s } : s
+  );
+}
+function GradientDefs({
+  idPrefix,
+  series
+}) {
+  return /* @__PURE__ */ jsx("defs", { children: series.map((s) => /* @__PURE__ */ jsxs(
+    "linearGradient",
+    {
+      id: `${idPrefix}-${s.dataKey}`,
+      x1: "0",
+      x2: "0",
+      y1: "0",
+      y2: "1",
+      children: [
+        /* @__PURE__ */ jsx(
+          "stop",
+          {
+            offset: "5%",
+            stopColor: `var(--color-${s.dataKey})`,
+            stopOpacity: 0.8
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "stop",
+          {
+            offset: "95%",
+            stopColor: `var(--color-${s.dataKey})`,
+            stopOpacity: 0.1
+          }
+        )
+      ]
+    },
+    s.dataKey
+  )) });
+}
+function AreaChart({
+  allowDecimals = true,
+  ariaLabel,
+  autoMinValue = false,
+  className,
+  config,
+  connectNulls = false,
+  customTooltip,
+  enableLegendSlider = false,
+  curveType = "monotone",
+  data,
+  fill = "solid",
+  fillOpacity = 0.3,
+  gradientIdPrefix = "area-gradient",
+  gridDashArray = "3 3",
+  intervalType,
+  legendPosition = "bottom",
+  maxValue,
+  minValue,
+  onValueChange,
+  series,
+  showGrid = true,
+  showLegend = false,
+  showTooltip = true,
+  showXAxis = true,
+  showYAxis = true,
+  startEndOnly = false,
+  tickGap,
+  tooltipCallback,
+  tooltipIndicator = "dot",
+  variant = "default",
+  xAxisLabel,
+  xAxisKey,
+  xAxisTickFormatter,
+  yAxisLabel,
+  yAxisTickFormatter,
+  yAxisWidth,
+  ...props
+}) {
+  const normalizedSeries = normalizeSeriesConfig(series);
+  const isStacked = variant === "stacked" || variant === "percent";
+  const isPercent = variant === "percent";
+  const isGradient = variant === "gradient" || fill === "gradient";
+  const isNoFill = fill === "none";
+  const chartId = React.useId().replaceAll(":", "");
+  const gradientPrefix = `${gradientIdPrefix}-${chartId}`;
+  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",
+    {
+      "aria-label": ariaLabel,
+      "data-slot": "area-chart",
+      role: ariaLabel ? "img" : void 0,
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        ChartContainer,
+        {
+          className: cn(className),
+          config,
+          children: /* @__PURE__ */ jsxs(
+            AreaChart$1,
+            {
+              accessibilityLayer: true,
+              data,
+              margin: { left: xAxisLabel ? 20 : 12, right: 12, bottom: yAxisLabel ? 20 : 0 },
+              stackOffset: isPercent ? "expand" : void 0,
+              children: [
+                isGradient && /* @__PURE__ */ jsx(GradientDefs, { idPrefix: gradientPrefix, series: normalizedSeries }),
+                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: isPercent ? [0, 1] : yDomain,
+                    tickFormatter: isPercent ? (value) => `${(value * 100).toFixed(0)}%` : 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 { dataKey, fillOpacity: seriesFillOpacity, stackId } = seriesConfig;
+                  const areaFill = isGradient ? `url(#${gradientPrefix}-${dataKey})` : `var(--color-${dataKey})`;
+                  const stroke = `var(--color-${dataKey})`;
+                  const computedFillOpacity = isNoFill ? 0 : seriesFillOpacity ?? fillOpacity;
+                  return /* @__PURE__ */ jsx(
+                    Area,
+                    {
+                      activeDot: onValueChange ? { onClick: handleDotClick(dataKey), r: 6, style: { cursor: "pointer" } } : { r: 6 },
+                      connectNulls,
+                      dataKey,
+                      fill: areaFill,
+                      fillOpacity: computedFillOpacity,
+                      stackId: isStacked ? "area-stack" : stackId,
+                      stroke,
+                      type: curveType
+                    },
+                    dataKey
+                  );
+                })
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+}
+AreaChart.displayName = "AreaChart";
+
+export { AreaChart };
+//# sourceMappingURL=chunk-F3ETIDS7.js.map
+//# sourceMappingURL=chunk-F3ETIDS7.js.map

package/dist/chunk-F3ETIDS7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/AreaChart/AreaChart.tsx"],"names":["data","props","RechartsAreaChart"],"mappings":"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","file":"chunk-F3ETIDS7.js","sourcesContent":["\"use client\"\n\nimport type {\n  AreaChartProps,\n  AreaChartSeriesConfig,\n} from \"./AreaChart.types\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  CartesianGrid,\n  Label,\n  AreaChart as RechartsAreaChart,\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 AreaChartSeriesConfig format\n */\nfunction normalizeSeriesConfig(\n  series: (AreaChartSeriesConfig | string)[]\n): AreaChartSeriesConfig[] {\n  return series.map((s) =>\n    typeof s === \"string\" ? { dataKey: s } : s\n  )\n}\n\n/**\n * Generate gradient defs for gradient variant\n */\nfunction GradientDefs({\n  idPrefix,\n  series,\n}: {\n  idPrefix: string\n  series: AreaChartSeriesConfig[]\n}) {\n  return (\n    <defs>\n      {series.map((s) => (\n        <linearGradient\n          key={s.dataKey}\n          id={`${idPrefix}-${s.dataKey}`}\n          x1=\"0\"\n          x2=\"0\"\n          y1=\"0\"\n          y2=\"1\"\n        >\n          <stop\n            offset=\"5%\"\n            stopColor={`var(--color-${s.dataKey})`}\n            stopOpacity={0.8}\n          />\n          <stop\n            offset=\"95%\"\n            stopColor={`var(--color-${s.dataKey})`}\n            stopOpacity={0.1}\n          />\n        </linearGradient>\n      ))}\n    </defs>\n  )\n}\n\n/**\n * AreaChart - Data visualization component for cumulative data\n *\n * Displays quantitative values along a continuous axis with filled area.\n * Ideal for showing trends over time and comparing volumes between series.\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 * <AreaChart\n *   data={data}\n *   config={config}\n *   xAxisKey=\"month\"\n *   series={[\"desktop\", \"mobile\"]}\n * />\n * ```\n */\nexport function AreaChart({\n  allowDecimals = true,\n  ariaLabel,\n  autoMinValue = false,\n  className,\n  config,\n  connectNulls = false,\n  customTooltip,\n  enableLegendSlider = false,\n  curveType = \"monotone\",\n  data,\n  fill = \"solid\",\n  fillOpacity = 0.3,\n  gradientIdPrefix = \"area-gradient\",\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  tickGap,\n  tooltipCallback,\n  tooltipIndicator = \"dot\",\n  variant = \"default\",\n  xAxisLabel,\n  xAxisKey,\n  xAxisTickFormatter,\n  yAxisLabel,\n  yAxisTickFormatter,\n  yAxisWidth,\n  ...props\n}: AreaChartProps) {\n  const normalizedSeries = normalizeSeriesConfig(series)\n  const isStacked = variant === \"stacked\" || variant === \"percent\"\n  const isPercent = variant === \"percent\"\n  const isGradient = variant === \"gradient\" || fill === \"gradient\"\n  const isNoFill = fill === \"none\"\n  const chartId = React.useId().replaceAll(\":\", \"\")\n  const gradientPrefix = `${gradientIdPrefix}-${chartId}`\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\n      aria-label={ariaLabel}\n      data-slot=\"area-chart\"\n      role={ariaLabel ? \"img\" : undefined}\n      {...props}\n    >\n      <ChartContainer\n        className={cn(className)}\n        config={config}\n      >\n      <RechartsAreaChart\n        accessibilityLayer\n        data={data}\n        margin={{ left: xAxisLabel ? 20 : 12, right: 12, bottom: yAxisLabel ? 20 : 0 }}\n        stackOffset={isPercent ? \"expand\" : undefined}\n      >\n        {isGradient && (\n          <GradientDefs idPrefix={gradientPrefix} series={normalizedSeries} />\n        )}\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={isPercent ? [0, 1] : yDomain}\n            tickFormatter={isPercent ? (value) => `${(value * 100).toFixed(0)}%` : 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 { dataKey, fillOpacity: seriesFillOpacity, stackId } = seriesConfig\n\n          const areaFill = isGradient\n            ? `url(#${gradientPrefix}-${dataKey})`\n            : `var(--color-${dataKey})`\n\n          const stroke = `var(--color-${dataKey})`\n\n          // Calculate fill opacity: 0 for \"none\", otherwise use series or default\n          const computedFillOpacity = isNoFill ? 0 : (seriesFillOpacity ?? fillOpacity)\n\n          return (\n            <Area\n              key={dataKey}\n              activeDot={\n                onValueChange\n                  ? { onClick: handleDotClick(dataKey), r: 6, style: { cursor: \"pointer\" } }\n                  : { r: 6 }\n              }\n              connectNulls={connectNulls}\n              dataKey={dataKey}\n              fill={areaFill}\n              fillOpacity={computedFillOpacity}\n              stackId={isStacked ? \"area-stack\" : stackId}\n              stroke={stroke}\n              type={curveType}\n            />\n          )\n        })}\n      </RechartsAreaChart>\n      </ChartContainer>\n    </div>\n  )\n}\n\nAreaChart.displayName = \"AreaChart\"\n"]}