@etus/ui 0.4.0-beta.1 → 0.4.0-beta.10

package/dist/chunk-ZARZYMBM.js

@@ -0,0 +1,95 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function FloatLabel({
+  children,
+  label,
+  hasValue = false,
+  variant = "over",
+  className,
+  ...props
+}) {
+  const [isFocused, setIsFocused] = React.useState(false);
+  const [inputId, setInputId] = React.useState();
+  const generatedId = React.useId();
+  const wrapperRef = React.useRef(null);
+  React.useEffect(() => {
+    if (wrapperRef.current) {
+      const input = wrapperRef.current.querySelector("input, select, textarea");
+      if (input) {
+        const existingId = input.getAttribute("id");
+        if (existingId) {
+          setInputId(existingId);
+        } else {
+          const newId = `float-label-input-${generatedId.replaceAll(":", "")}`;
+          input.setAttribute("id", newId);
+          setInputId(newId);
+        }
+      }
+    }
+  }, [generatedId, children]);
+  const handleFocusIn = React.useCallback(() => {
+    setIsFocused(true);
+  }, []);
+  const handleFocusOut = React.useCallback((event) => {
+    if (!wrapperRef.current?.contains(event.relatedTarget)) {
+      setIsFocused(false);
+    }
+  }, []);
+  const isFloated = isFocused || hasValue;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: wrapperRef,
+      className: cn(
+        "group relative",
+        // No wrapper padding - label uses negative positioning to float above
+        className
+      ),
+      "data-focused": isFocused || void 0,
+      "data-has-value": hasValue || void 0,
+      "data-slot": "float-label",
+      "data-variant": variant,
+      onBlur: handleFocusOut,
+      onFocus: handleFocusIn,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "label",
+          {
+            className: cn(
+              "pointer-events-none absolute text-muted-foreground transition-all duration-200 motion-reduce:transition-none",
+              // Error state: if input is invalid (aria-invalid="true"), label turns red
+              "group-has-[[aria-invalid=true]]:text-destructive",
+              // Unfocused: label centered in input
+              !isFloated && "left-3 top-1/2 -translate-y-1/2 text-sm",
+              // Focused: variant-specific positioning (aligned with PrimeVue metrics)
+              isFloated && [
+                "text-xs font-medium text-foreground",
+                // Error state color persistence when floated
+                "group-has-[[aria-invalid=true]]:text-destructive",
+                // "over": top: -20px (label floats above)
+                variant === "over" && "left-3 -top-5",
+                // "in": top: -2 (label at top inside input)
+                // PrimeVue 'in' actually floats to top inside. Input needs padding-top.
+                variant === "in" && "left-3 top-2",
+                // "on": top: -2 (label ON border with background)
+                // sits on the border line
+                variant === "on" && "left-2 -top-2 bg-background px-1"
+              ]
+            ),
+            "data-slot": "float-label-text",
+            htmlFor: inputId,
+            children: label
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+
+export { FloatLabel };
+//# sourceMappingURL=chunk-ZARZYMBM.js.map
+//# sourceMappingURL=chunk-ZARZYMBM.js.map

package/dist/chunk-ZARZYMBM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/FloatLabel/FloatLabel.tsx"],"names":[],"mappings":"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","file":"chunk-ZARZYMBM.js","sourcesContent":["import type { FloatLabelProps } from \"./FloatLabel.types\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\n\n/**\n * FloatLabel - A wrapper component that provides floating label behavior\n *\n * Wraps form inputs (TextInput, Autocomplete, Select, etc.) to provide\n * a label that floats up when the input is focused or has a value.\n *\n * @example\n * ```tsx\n * <FloatLabel label=\"Email\" hasValue={!!email}>\n *   <TextInput value={email} onChange={(e) => setEmail(e.target.value)} />\n * </FloatLabel>\n * ```\n */\nfunction FloatLabel({\n  children,\n  label,\n  hasValue = false,\n  variant = \"over\",\n  className,\n  ...props\n}: FloatLabelProps) {\n  const [isFocused, setIsFocused] = React.useState(false)\n  const [inputId, setInputId] = React.useState<string | undefined>()\n  const generatedId = React.useId()\n  const wrapperRef = React.useRef<HTMLDivElement>(null)\n\n  // Find the input element and get its id\n  /* eslint-disable react-you-might-not-need-an-effect/no-adjust-state-on-prop-change, @eslint-react/hooks-extra/no-direct-set-state-in-use-effect -- DOM discovery for label-input association */\n  React.useEffect(() => {\n    if (wrapperRef.current) {\n      const input = wrapperRef.current.querySelector(\"input, select, textarea\")\n      if (input) {\n        const existingId = input.getAttribute(\"id\")\n        if (existingId) {\n          setInputId(existingId)\n        } else {\n          // Generate and set an id if none exists\n          const newId = `float-label-input-${generatedId.replaceAll(':', \"\")}`\n          input.setAttribute(\"id\", newId)\n          setInputId(newId)\n        }\n      }\n    }\n  }, [generatedId, children])\n  /* eslint-enable react-you-might-not-need-an-effect/no-adjust-state-on-prop-change, @eslint-react/hooks-extra/no-direct-set-state-in-use-effect */\n\n  // Handle focus/blur events on the wrapper\n  const handleFocusIn = React.useCallback(() => {\n    setIsFocused(true)\n  }, [])\n\n  const handleFocusOut = React.useCallback((event: React.FocusEvent) => {\n    // Check if focus is still within the wrapper\n    if (!wrapperRef.current?.contains(event.relatedTarget as Node)) {\n      setIsFocused(false)\n    }\n  }, [])\n\n  // Determine if label should be floated (focused or has value)\n  const isFloated = isFocused || hasValue\n\n  return (\n    <div\n      ref={wrapperRef}\n      className={cn(\n        \"group relative\",\n        // No wrapper padding - label uses negative positioning to float above\n        className\n      )}\n      data-focused={isFocused || undefined}\n      data-has-value={hasValue || undefined}\n      data-slot=\"float-label\"\n      data-variant={variant}\n      onBlur={handleFocusOut}\n      onFocus={handleFocusIn}\n      {...props}\n    >\n      <label\n        className={cn(\n          \"pointer-events-none absolute text-muted-foreground transition-all duration-200 motion-reduce:transition-none\",\n          // Error state: if input is invalid (aria-invalid=\"true\"), label turns red\n          \"group-has-[[aria-invalid=true]]:text-destructive\",\n          \n          // Unfocused: label centered in input\n          !isFloated && \"left-3 top-1/2 -translate-y-1/2 text-sm\",\n          \n          // Focused: variant-specific positioning (aligned with PrimeVue metrics)\n          isFloated && [\n            \"text-xs font-medium text-foreground\",\n             // Error state color persistence when floated\n            \"group-has-[[aria-invalid=true]]:text-destructive\",\n\n            // \"over\": top: -20px (label floats above)\n            variant === \"over\" && \"left-3 -top-5\",\n            \n            // \"in\": top: -2 (label at top inside input)\n            // PrimeVue 'in' actually floats to top inside. Input needs padding-top.\n            variant === \"in\" && \"left-3 top-2\",\n            \n            // \"on\": top: -2 (label ON border with background)\n            // sits on the border line\n            variant === \"on\" && \"left-2 -top-2 bg-background px-1\",\n          ]\n        )}\n        data-slot=\"float-label-text\"\n        htmlFor={inputId}\n      >\n        {label}\n      </label>\n      {children}\n    </div>\n  )\n}\n\nexport { FloatLabel }\n"]}

package/dist/chunk-ZKK7L7H7.js

@@ -0,0 +1,78 @@
+import { TextInput } from './chunk-PWCMCMDN.js';
+import { EyeOffIcon, EyeIcon } from 'lucide-react';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var passwordToggleVariants = cva(
+  // Base styles
+  [
+    "absolute right-0 top-1/2 -translate-y-1/2",
+    "flex items-center justify-center",
+    "text-muted-foreground hover:text-foreground",
+    "transition-colors",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+    "rounded-sm"
+  ],
+  {
+    variants: {
+      size: {
+        xs: "h-5 w-5 right-1.5 [&_svg]:size-3",
+        sm: "h-6 w-6 right-2 [&_svg]:size-3.5",
+        md: "h-7 w-7 right-2.5 [&_svg]:size-4",
+        lg: "h-8 w-8 right-2.5 [&_svg]:size-4.5",
+        xl: "h-9 w-9 right-3 [&_svg]:size-5"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+function PasswordInput({
+  className,
+  size = "md",
+  variant = "default",
+  showToggle = true,
+  showIcon,
+  hideIcon,
+  disabled,
+  ...props
+}) {
+  const [showPassword, setShowPassword] = React.useState(false);
+  const toggleVisibility = React.useCallback(() => {
+    setShowPassword((prev) => !prev);
+  }, []);
+  const toggleButton = showToggle ? /* @__PURE__ */ jsx(
+    "button",
+    {
+      "aria-label": showPassword ? "Hide password" : "Show password",
+      className: passwordToggleVariants({ size }),
+      "data-slot": "password-toggle",
+      disabled,
+      tabIndex: -1,
+      type: "button",
+      onClick: toggleVisibility,
+      children: showPassword ? hideIcon ?? /* @__PURE__ */ jsx(EyeOffIcon, { "aria-hidden": "true" }) : showIcon ?? /* @__PURE__ */ jsx(EyeIcon, { "aria-hidden": "true" })
+    }
+  ) : void 0;
+  return /* @__PURE__ */ jsx(
+    TextInput,
+    {
+      className,
+      "data-slot": "password-input",
+      disabled,
+      size,
+      trailingIcon: toggleButton,
+      trailingIconInteractive: true,
+      type: showPassword ? "text" : "password",
+      variant,
+      ...props
+    }
+  );
+}
+
+export { PasswordInput, passwordToggleVariants };
+//# sourceMappingURL=chunk-ZKK7L7H7.js.map
+//# sourceMappingURL=chunk-ZKK7L7H7.js.map

package/dist/chunk-ZKK7L7H7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/PasswordInput/PasswordInput.variants.ts","../src/components/forms/PasswordInput/PasswordInput.tsx"],"names":[],"mappings":";;;;;;AAMO,IAAM,sBAAA,GAAyB,GAAA;AAAA;AAAA,EAEpC;AAAA,IACE,2CAAA;AAAA,IACA,kCAAA;AAAA,IACA,6CAAA;AAAA,IACA,mBAAA;AAAA,IACA,kDAAA;AAAA,IACA,qGAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,kCAAA;AAAA,QACJ,EAAA,EAAI,kCAAA;AAAA,QACJ,EAAA,EAAI,kCAAA;AAAA,QACJ,EAAA,EAAI,oCAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM;AAAA;AACR;AAEJ;ACZA,SAAS,aAAA,CAAc;AAAA,EACrB,SAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,OAAA,GAAU,SAAA;AAAA,EACV,UAAA,GAAa,IAAA;AAAA,EACb,QAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAuB;AACrB,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAU,eAAS,KAAK,CAAA;AAE5D,EAAA,MAAM,gBAAA,GAAyB,kBAAY,MAAM;AAC/C,IAAA,eAAA,CAAgB,CAAC,IAAA,KAAS,CAAC,IAAI,CAAA;AAAA,EACjC,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,eAAe,UAAA,mBACnB,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,YAAA,EAAY,eAAe,eAAA,GAAkB,eAAA;AAAA,MAC7C,SAAA,EAAW,sBAAA,CAAuB,EAAE,IAAA,EAAM,CAAA;AAAA,MAC1C,WAAA,EAAU,iBAAA;AAAA,MACV,QAAA;AAAA,MACA,QAAA,EAAU,EAAA;AAAA,MACV,IAAA,EAAK,QAAA;AAAA,MACL,OAAA,EAAS,gBAAA;AAAA,MAER,QAAA,EAAA,YAAA,GACI,QAAA,oBAAY,GAAA,CAAC,UAAA,EAAA,EAAW,aAAA,EAAY,MAAA,EAAO,CAAA,GAC3C,QAAA,oBAAY,GAAA,CAAC,OAAA,EAAA,EAAQ,aAAA,EAAY,MAAA,EAAO;AAAA;AAAA,GAC/C,GACE,MAAA;AAEJ,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACA,WAAA,EAAU,gBAAA;AAAA,MACV,QAAA;AAAA,MACA,IAAA;AAAA,MACA,YAAA,EAAc,YAAA;AAAA,MACd,uBAAA,EAAyB,IAAA;AAAA,MACzB,IAAA,EAAM,eAAe,MAAA,GAAS,UAAA;AAAA,MAC9B,OAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ","file":"chunk-ZKK7L7H7.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * Password toggle button variant styles using CVA\n * Sizes match the input sizes for proper alignment\n */\nexport const passwordToggleVariants = cva(\n  // Base styles\n  [\n    \"absolute right-0 top-1/2 -translate-y-1/2\",\n    \"flex items-center justify-center\",\n    \"text-muted-foreground hover:text-foreground\",\n    \"transition-colors\",\n    \"disabled:pointer-events-none disabled:opacity-50\",\n    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n    \"rounded-sm\",\n  ],\n  {\n    variants: {\n      size: {\n        xs: \"h-5 w-5 right-1.5 [&_svg]:size-3\",\n        sm: \"h-6 w-6 right-2 [&_svg]:size-3.5\",\n        md: \"h-7 w-7 right-2.5 [&_svg]:size-4\",\n        lg: \"h-8 w-8 right-2.5 [&_svg]:size-4.5\",\n        xl: \"h-9 w-9 right-3 [&_svg]:size-5\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nexport type PasswordToggleVariantProps = VariantProps<typeof passwordToggleVariants>\n","\"use client\"\n\nimport type { PasswordInputProps } from \"./PasswordInput.types\"\n\nimport { EyeIcon, EyeOffIcon } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { TextInput } from \"../TextInput\"\nimport { passwordToggleVariants } from \"./PasswordInput.variants\"\n\n/**\n * PasswordInput component with visibility toggle.\n * Now uses TextInput internally for consistency.\n *\n * @example\n * ```tsx\n * <PasswordInput placeholder=\"Enter password\" />\n * ```\n */\nfunction PasswordInput({\n  className,\n  size = \"md\",\n  variant = \"default\",\n  showToggle = true,\n  showIcon,\n  hideIcon,\n  disabled,\n  ...props\n}: PasswordInputProps) {\n  const [showPassword, setShowPassword] = React.useState(false)\n\n  const toggleVisibility = React.useCallback(() => {\n    setShowPassword((prev) => !prev)\n  }, [])\n\n  const toggleButton = showToggle ? (\n    <button\n      aria-label={showPassword ? \"Hide password\" : \"Show password\"}\n      className={passwordToggleVariants({ size })}\n      data-slot=\"password-toggle\"\n      disabled={disabled}\n      tabIndex={-1}\n      type=\"button\"\n      onClick={toggleVisibility}\n    >\n      {showPassword\n        ? (hideIcon ?? <EyeOffIcon aria-hidden=\"true\" />)\n        : (showIcon ?? <EyeIcon aria-hidden=\"true\" />)}\n    </button>\n  ) : undefined\n\n  return (\n    <TextInput\n      className={className}\n      data-slot=\"password-input\"\n      disabled={disabled}\n      size={size}\n      trailingIcon={toggleButton}\n      trailingIconInteractive={true}\n      type={showPassword ? \"text\" : \"password\"}\n      variant={variant}\n      {...props}\n    />\n  )\n}\n\nexport { PasswordInput }"]}

package/dist/chunk-ZPCELVWJ.js

@@ -0,0 +1,127 @@
+import { ChartTooltipContent, ChartContainer, ChartTooltip, ChartLegend, ChartLegendContent } from './chunk-7I6KK6QE.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import * as React from 'react';
+import { FunnelChart as FunnelChart$1, Funnel, Cell, LabelList } from 'recharts';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function FunnelChart({
+  animationDuration = 400,
+  className,
+  config,
+  data,
+  enableLegendSlider = false,
+  isReversed = false,
+  labelPosition = "right",
+  legendPosition = "bottom",
+  nameKey = "name",
+  onClick,
+  showLabels = true,
+  showLegend = false,
+  showTooltip = true,
+  tooltipCallback,
+  tooltipIndicator = "dot",
+  valueFormatter,
+  valueKey = "value",
+  ...props
+}) {
+  const prevTooltipStateRef = React.useRef(false);
+  const TooltipContentWithCallback = React.useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (props2) => {
+      const { active = false, payload } = props2;
+      if (tooltipCallback && active !== prevTooltipStateRef.current) {
+        prevTooltipStateRef.current = active;
+        tooltipCallback({
+          active,
+          name: payload?.[0]?.name,
+          payload: payload?.map((p) => ({
+            name: p.name,
+            value: p.value,
+            payload: p.payload
+          }))
+        });
+      }
+      return /* @__PURE__ */ jsx(
+        ChartTooltipContent,
+        {
+          formatter: valueFormatter ? (value) => valueFormatter(Number(value)) : void 0,
+          indicator: tooltipIndicator,
+          nameKey,
+          ...props2
+        }
+      );
+    },
+    [tooltipCallback, tooltipIndicator, nameKey, valueFormatter]
+  );
+  const handleClick = onClick ? (_, index) => {
+    const item = data[index];
+    if (item) onClick(item, index);
+  } : void 0;
+  return /* @__PURE__ */ jsx("div", { "data-slot": "funnel-chart", ...props, children: /* @__PURE__ */ jsx(
+    ChartContainer,
+    {
+      className: cn(className),
+      config,
+      children: /* @__PURE__ */ jsxs(FunnelChart$1, { children: [
+        showTooltip && /* @__PURE__ */ jsx(
+          ChartTooltip,
+          {
+            content: tooltipCallback ? /* @__PURE__ */ jsx(TooltipContentWithCallback, {}) : /* @__PURE__ */ jsx(
+              ChartTooltipContent,
+              {
+                formatter: valueFormatter ? (value) => valueFormatter(Number(value)) : void 0,
+                indicator: tooltipIndicator,
+                nameKey
+              }
+            )
+          }
+        ),
+        showLegend && /* @__PURE__ */ jsx(
+          ChartLegend,
+          {
+            align: legendPosition === "left" ? "left" : legendPosition === "right" ? "right" : "center",
+            content: /* @__PURE__ */ jsx(ChartLegendContent, { enableSlider: enableLegendSlider, nameKey }),
+            layout: legendPosition === "left" || legendPosition === "right" ? "vertical" : "horizontal",
+            verticalAlign: legendPosition === "top" ? "top" : legendPosition === "bottom" ? "bottom" : "middle"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Funnel,
+          {
+            animationDuration,
+            data,
+            dataKey: valueKey,
+            isAnimationActive: animationDuration > 0,
+            nameKey,
+            reversed: isReversed,
+            onClick: handleClick,
+            children: [
+              data.map((entry) => /* @__PURE__ */ jsx(
+                Cell,
+                {
+                  fill: entry.fill ?? `var(--color-${entry.name.toLowerCase().replaceAll(" ", "-")})`,
+                  style: onClick ? { cursor: "pointer" } : void 0
+                },
+                entry.name
+              )),
+              showLabels && /* @__PURE__ */ jsx(
+                LabelList,
+                {
+                  className: "fill-foreground",
+                  dataKey: nameKey,
+                  position: labelPosition,
+                  stroke: "none"
+                }
+              )
+            ]
+          }
+        )
+      ] })
+    }
+  ) });
+}
+FunnelChart.displayName = "FunnelChart";
+
+export { FunnelChart };
+//# sourceMappingURL=chunk-ZPCELVWJ.js.map
+//# sourceMappingURL=chunk-ZPCELVWJ.js.map

package/dist/chunk-ZPCELVWJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/FunnelChart/FunnelChart.tsx"],"names":["props","RechartsFunnelChart"],"mappings":"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","file":"chunk-ZPCELVWJ.js","sourcesContent":["\"use client\"\n\nimport type {\n  FunnelChartDataItem,\n  FunnelChartProps,\n} from \"./FunnelChart.types\"\n\nimport * as React from \"react\"\nimport {\n  Cell,\n  Funnel,\n  LabelList,\n  FunnelChart as RechartsFunnelChart,\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 * FunnelChart - Data visualization for conversion/process stages\n *\n * Displays data as a funnel with progressively smaller stages,\n * ideal for visualizing conversion rates, sales pipelines,\n * or any sequential process with drop-off.\n *\n * @example\n * ```tsx\n * const data = [\n *   { name: \"Visitors\", value: 5000, fill: \"var(--color-visitors)\" },\n *   { name: \"Leads\", value: 3000, fill: \"var(--color-leads)\" },\n *   { name: \"Opportunities\", value: 1500, fill: \"var(--color-opportunities)\" },\n *   { name: \"Sales\", value: 500, fill: \"var(--color-sales)\" },\n * ]\n *\n * const config = {\n *   visitors: { label: \"Visitors\", color: \"hsl(var(--chart-1))\" },\n *   leads: { label: \"Leads\", color: \"hsl(var(--chart-2))\" },\n *   opportunities: { label: \"Opportunities\", color: \"hsl(var(--chart-3))\" },\n *   sales: { label: \"Sales\", color: \"hsl(var(--chart-4))\" },\n * }\n *\n * <FunnelChart data={data} config={config} />\n * ```\n */\n// eslint-disable-next-line sonarjs/cognitive-complexity -- Chart component requires handling many props and rendering logic\nexport function FunnelChart({\n  animationDuration = 400,\n  className,\n  config,\n  data,\n  enableLegendSlider = false,\n  isReversed = false,\n  labelPosition = \"right\",\n  legendPosition = \"bottom\",\n  nameKey = \"name\",\n  onClick,\n  showLabels = true,\n  showLegend = false,\n  showTooltip = true,\n  tooltipCallback,\n  tooltipIndicator = \"dot\",\n  valueFormatter,\n  valueKey = \"value\",\n  ...props\n}: FunnelChartProps) {\n  const prevTooltipStateRef = React.useRef<boolean>(false)\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, payload } = props\n\n      // Call tooltipCallback when state changes\n      if (tooltipCallback && active !== prevTooltipStateRef.current) {\n        prevTooltipStateRef.current = active\n        tooltipCallback({\n          active,\n          name: payload?.[0]?.name,\n          payload: payload?.map((p: { name: string; payload: FunnelChartDataItem; value: number; }) => ({\n            name: p.name,\n            value: p.value,\n            payload: p.payload,\n          })),\n        })\n      }\n\n      return (\n        <ChartTooltipContent\n          formatter={valueFormatter ? (value) => valueFormatter(Number(value)) : undefined}\n          indicator={tooltipIndicator}\n          nameKey={nameKey}\n          {...props}\n        />\n      )\n    },\n    [tooltipCallback, tooltipIndicator, nameKey, valueFormatter]\n  )\n\n  // Event handler for click\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const handleClick: any = onClick\n    ? (_: unknown, index: number) => {\n        const item = data[index]\n        if (item) onClick(item, index)\n      }\n    : undefined\n\n  return (\n    <div data-slot=\"funnel-chart\" {...props}>\n      <ChartContainer\n        className={cn(className)}\n        config={config}\n      >\n        <RechartsFunnelChart>\n          {showTooltip && (\n            <ChartTooltip\n              content={\n                tooltipCallback\n                  ? <TooltipContentWithCallback />\n                  : <ChartTooltipContent\n                      formatter={valueFormatter ? (value) => valueFormatter(Number(value)) : undefined}\n                      indicator={tooltipIndicator}\n                      nameKey={nameKey}\n                    />\n              }\n            />\n          )}\n\n          {showLegend && (\n            <ChartLegend\n              align={legendPosition === \"left\" ? \"left\" : legendPosition === \"right\" ? \"right\" : \"center\"}\n              content={<ChartLegendContent enableSlider={enableLegendSlider} nameKey={nameKey} />}\n              layout={legendPosition === \"left\" || legendPosition === \"right\" ? \"vertical\" : \"horizontal\"}\n              verticalAlign={legendPosition === \"top\" ? \"top\" : legendPosition === \"bottom\" ? \"bottom\" : \"middle\"}\n            />\n          )}\n\n          <Funnel\n            animationDuration={animationDuration}\n            data={data}\n            dataKey={valueKey}\n            isAnimationActive={animationDuration > 0}\n            nameKey={nameKey}\n            reversed={isReversed}\n            onClick={handleClick}\n          >\n            {data.map((entry) => (\n              <Cell\n                key={entry.name}\n                fill={entry.fill ?? `var(--color-${entry.name.toLowerCase().replaceAll(\" \", \"-\")})`}\n                style={onClick ? { cursor: \"pointer\" } : undefined}\n              />\n            ))}\n\n            {showLabels && (\n              <LabelList\n                className=\"fill-foreground\"\n                dataKey={nameKey}\n                position={labelPosition}\n                stroke=\"none\"\n              />\n            )}\n          </Funnel>\n        </RechartsFunnelChart>\n      </ChartContainer>\n    </div>\n  )\n}\n\nFunnelChart.displayName = \"FunnelChart\"\n"]}