@soyfri/shared-library 2.0.0-beta.1 → 2.0.0-beta.10

package/dist/components/RadioGroup/RadioGroup.sx.d.ts

@@ -0,0 +1,20 @@
+import { SxProps, Theme } from '@mui/material/styles';
+export interface BuildRadioGroupSxOptions {
+    bordered: boolean;
+    borderRadius: number | string;
+    error: boolean;
+}
+/**
+ * Builder de sx para RadioGroup. Reproduce el estilo del antiguo
+ * `FormRadioGroup` legacy: contenedor con borde + padding vertical.
+ *
+ * Cuando `bordered=true`, el contenedor gana:
+ * - `:focus-within` → borde + shadow primario (mismo patrón que `InputGroup`).
+ * - `error=true` → borde + shadow de error (palette.error.main).
+ *
+ * El shadow es de 1px, así que no hay shift de layout — sólo se intensifica
+ * visualmente el borde sin empujar nada alrededor.
+ *
+ * Si `bordered=false`, devuelve un sx mínimo (sólo helper text reset).
+ */
+export declare const buildRadioGroupSx: ({ bordered, borderRadius, error, }: BuildRadioGroupSxOptions) => SxProps<Theme>;

package/dist/components/RadioGroup/RadioGroup.types.d.ts

@@ -0,0 +1 @@
+export type { RadioOption, RadioGroupSize, BaseRadioGroupProps, RHFRadioGroupProps, ControlledRadioGroupProps, RadioGroupProps, } from './RadioGroup';

package/dist/components/RadioGroup/index.d.ts

@@ -0,0 +1,2 @@
+export { RadioGroup, default } from './RadioGroup';
+export type { RadioOption, RadioGroupSize, BaseRadioGroupProps, RHFRadioGroupProps, ControlledRadioGroupProps, RadioGroupProps, } from './RadioGroup.types';

package/dist/components/RadioGroup.d.ts

@@ -0,0 +1,6 @@
+export * from './RadioGroup/index'
+export {}
+import _default from './RadioGroup/index'
+export default _default
+export * from './RadioGroup/index'
+export {}

package/dist/components/Stepper/Stepper.cjs

@@ -1,7 +1,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
 const material = require("@mui/material");
+const ChevronLeftIcon = require("@mui/icons-material/ChevronLeft");
+const ChevronRightIcon = require("@mui/icons-material/ChevronRight");
 const useWizard = require("../../useWizard-CWdIxZzX.cjs");
 const Stepper = ({
   children,
@@ -12,31 +15,141 @@ const Stepper = ({
 }) => {
   const wizard = useWizard.useWizard();
   const currentStep = currentStepProp !== void 0 ? currentStepProp : wizard.totalSteps > 0 ? wizard.currentStep : 0;
+  const isHorizontal = orientation === "horizontal";
+  const scrollRef = React.useRef(null);
+  const [canScrollLeft, setCanScrollLeft] = React.useState(false);
+  const [canScrollRight, setCanScrollRight] = React.useState(false);
+  const updateScrollState = () => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const { scrollLeft, scrollWidth, clientWidth } = el;
+    setCanScrollLeft(scrollLeft > 1);
+    setCanScrollRight(scrollLeft + clientWidth < scrollWidth - 1);
+  };
+  React.useLayoutEffect(() => {
+    if (!isHorizontal) return;
+    updateScrollState();
+  }, [isHorizontal, children.length, currentStep]);
+  React.useEffect(() => {
+    if (!isHorizontal) return;
+    const el = scrollRef.current;
+    if (!el) return;
+    const onScroll = () => updateScrollState();
+    el.addEventListener("scroll", onScroll, { passive: true });
+    const ro = new ResizeObserver(() => updateScrollState());
+    ro.observe(el);
+    return () => {
+      el.removeEventListener("scroll", onScroll);
+      ro.disconnect();
+    };
+  }, [isHorizontal]);
+  const scrollBy = (delta) => {
+    const el = scrollRef.current;
+    if (!el) return;
+    el.scrollBy({ left: delta, behavior: "smooth" });
+  };
+  const showArrows = isHorizontal && (canScrollLeft || canScrollRight);
   return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(material.Stepper, { activeStep: currentStep, orientation, alternativeLabel: alternateLabel, children: children.map((child, idx) => {
-      const { label, completed, disabled, className, sx: stepSx, dotColor, activeDotColor, completedDotColor, iconTextColor } = child.props;
-      return /* @__PURE__ */ jsxRuntime.jsx(material.Step, { completed, disabled, className, sx: stepSx, children: /* @__PURE__ */ jsxRuntime.jsx(
-        material.StepLabel,
-        {
-          sx: {
-            pointerEvents: "none",
-            "& .MuiStepIcon-root": {
-              color: dotColor
-            },
-            "& .MuiStepIcon-active": {
-              color: activeDotColor
-            },
-            "& .MuiStepIcon-completed": {
-              color: completedDotColor
-            },
-            "& .MuiStepIcon-text": {
-              fill: iconTextColor
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      material.Box,
+      {
+        sx: isHorizontal ? {
+          display: "flex",
+          alignItems: "center",
+          width: "100%",
+          gap: 0.5
+        } : void 0,
+        children: [
+          isHorizontal && /* @__PURE__ */ jsxRuntime.jsx(
+            material.IconButton,
+            {
+              "aria-label": "Anterior",
+              size: "small",
+              onClick: () => scrollBy(-160),
+              disabled: !canScrollLeft,
+              sx: {
+                flex: "0 0 auto",
+                // Reservamos el slot siempre que haya overflow en algún lado,
+                // así el área scroll tiene un ancho estable (no saltan los
+                // steps cuando aparece/desaparece la flecha).
+                visibility: showArrows ? "visible" : "hidden"
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, { fontSize: "small" })
             }
-          },
-          children: label
-        }
-      ) }, idx);
-    }) }),
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            material.Box,
+            {
+              ref: scrollRef,
+              sx: isHorizontal ? {
+                flex: "1 1 auto",
+                minWidth: 0,
+                overflowX: "auto",
+                scrollBehavior: "smooth",
+                WebkitOverflowScrolling: "touch",
+                // Ocultamos la scrollbar (la navegación es con flechas)
+                scrollbarWidth: "none",
+                "&::-webkit-scrollbar": { display: "none" }
+              } : void 0,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                material.Stepper,
+                {
+                  activeStep: currentStep,
+                  orientation,
+                  alternativeLabel: alternateLabel,
+                  sx: isHorizontal ? {
+                    display: "inline-flex",
+                    flexWrap: "nowrap",
+                    minWidth: "100%",
+                    width: "max-content",
+                    // Evita que los steps se compriman al punto de solaparse.
+                    "& .MuiStep-root": { flex: "0 0 auto", minWidth: 120 }
+                  } : void 0,
+                  children: children.map((child, idx) => {
+                    const { label, completed, disabled, className, sx: stepSx, dotColor, activeDotColor, completedDotColor, iconTextColor } = child.props;
+                    return /* @__PURE__ */ jsxRuntime.jsx(material.Step, { completed, disabled, className, sx: stepSx, children: /* @__PURE__ */ jsxRuntime.jsx(
+                      material.StepLabel,
+                      {
+                        sx: {
+                          pointerEvents: "none",
+                          "& .MuiStepIcon-root": {
+                            color: dotColor
+                          },
+                          "& .MuiStepIcon-active": {
+                            color: activeDotColor
+                          },
+                          "& .MuiStepIcon-completed": {
+                            color: completedDotColor
+                          },
+                          "& .MuiStepIcon-text": {
+                            fill: iconTextColor
+                          }
+                        },
+                        children: label
+                      }
+                    ) }, idx);
+                  })
+                }
+              )
+            }
+          ),
+          isHorizontal && /* @__PURE__ */ jsxRuntime.jsx(
+            material.IconButton,
+            {
+              "aria-label": "Siguiente",
+              size: "small",
+              onClick: () => scrollBy(160),
+              disabled: !canScrollRight,
+              sx: {
+                flex: "0 0 auto",
+                visibility: showArrows ? "visible" : "hidden"
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon, { fontSize: "small" })
+            }
+          )
+        ]
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(material.Box, { mt: 2, children: children.map(
       (child, idx) => idx === currentStep ? /* @__PURE__ */ jsxRuntime.jsx(material.Box, { children: child.props.children }, idx) : null
     ) })

package/dist/components/Stepper/Stepper.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.cjs","sources":["../../../src/components/Stepper/Stepper.tsx","../../../src/components/Stepper/Step.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\nimport { Stepper as MuiStepper, Step as MuiStep, StepLabel as MuiStepLabel, Box } from \"@mui/material\";\nimport { StepProps } from \"./Step\";\nimport { useWizard } from \"../../hooks/Wizard\";\n\ninterface MyStepperProps {\n  children: ReactElement<StepProps>[];\n  orientation?: \"horizontal\" | \"vertical\";\n  sx?: object;\n  alternateLabel?: boolean;\n  /**\n   * Índice 0-based del paso activo. Si no se provee, el Stepper intenta\n   * leerlo del `WizardContext` (si está dentro de un `<WizardProvider>`).\n   * Si tampoco hay provider, el default es 0.\n   */\n  currentStep?: number;\n}\n\nexport const Stepper: React.FC<MyStepperProps> = ({\n  children,\n  orientation = \"horizontal\",\n  alternateLabel = false,\n\n  sx,\n  currentStep: currentStepProp,\n}) => {\n  // Lee el paso desde el WizardContext cuando el consumer no lo pasa como prop.\n  // Si el Stepper NO está dentro de un WizardProvider, `useWizard()` devuelve\n  // el valor default (currentStep=0, totalSteps=0), así que no rompe nada.\n  const wizard = useWizard();\n  const currentStep =\n    currentStepProp !== undefined\n      ? currentStepProp\n      : wizard.totalSteps > 0\n        ? wizard.currentStep\n        : 0;\n\n  return (\n    <Box sx={sx}>\n      <MuiStepper activeStep={currentStep} orientation={orientation} alternativeLabel={alternateLabel} >\n        {children.map((child, idx) => {\n          const { label, completed, disabled, className, sx: stepSx, dotColor, activeDotColor, completedDotColor, iconTextColor } = child.props;\n          return (\n            <MuiStep key={idx} completed={completed} disabled={disabled} className={className} sx={stepSx}>\n              <MuiStepLabel sx={{\n                pointerEvents: 'none',\n                \"& .MuiStepIcon-root\": {\n                  color: dotColor,\n                },\n                \"& .MuiStepIcon-active\": {\n                  color: activeDotColor,\n                },\n                \"& .MuiStepIcon-completed\": {\n                  color: completedDotColor,\n                },\n                \"& .MuiStepIcon-text\": {\n                  fill: iconTextColor,\n                },\n              }}\n              >{label}\n              </MuiStepLabel>\n            </MuiStep>\n          );\n        })}\n      </MuiStepper>\n      <Box mt={2}>\n        {children.map((child, idx) =>\n          idx === currentStep ? <Box key={idx}>{child.props.children}</Box> : null\n        )}\n      </Box>\n    </Box>\n  );\n};\n\nexport default Stepper;","import React from \"react\";\nimport { StepProps as MuiStepProps } from \"@mui/material\";\n\ntype PickMuiStepProps = Pick<MuiStepProps, \"completed\" | \"disabled\" | \"sx\" | \"className\">;\n\nexport interface StepProps extends PickMuiStepProps {\n  label: React.ReactNode;\n  children?: React.ReactNode;\n  disabled?: boolean;\n  sx?: object;\n  dotColor?: string;          // dot base\n  activeDotColor?: string;    // dot activa\n  completedDotColor?: string; // dot completada\n  iconTextColor?: string;     // número o check dentro\n}\n\nexport const Step = (_: StepProps): null => null;\n\nStep.displayName = \"Step\";\n\nexport default Step;"],"names":["useWizard","jsxs","Box","jsx","MuiStepper","MuiStep","MuiStepLabel"],"mappings":";;;;;AAkBO,MAAM,UAAoC,CAAC;AAAA,EAChD;AAAA,EACA,cAAc;AAAA,EACd,iBAAiB;AAAA,EAEjB;AAAA,EACA,aAAa;AACf,MAAM;AAIJ,QAAM,SAASA,UAAAA,UAAA;AACf,QAAM,cACJ,oBAAoB,SAChB,kBACA,OAAO,aAAa,IAClB,OAAO,cACP;AAER,SACEC,gCAACC,SAAAA,OAAI,IACH,UAAA;AAAA,IAAAC,2BAAAA,IAACC,SAAAA,SAAA,EAAW,YAAY,aAAa,aAA0B,kBAAkB,gBAC9E,UAAA,SAAS,IAAI,CAAC,OAAO,QAAQ;AAC5B,YAAM,EAAE,OAAO,WAAW,UAAU,WAAW,IAAI,QAAQ,UAAU,gBAAgB,mBAAmB,cAAA,IAAkB,MAAM;AAChI,4CACGC,eAAA,EAAkB,WAAsB,UAAoB,WAAsB,IAAI,QACrF,UAAAF,2BAAAA;AAAAA,QAACG,SAAAA;AAAAA,QAAA;AAAA,UAAa,IAAI;AAAA,YAChB,eAAe;AAAA,YACf,uBAAuB;AAAA,cACrB,OAAO;AAAA,YAAA;AAAA,YAET,yBAAyB;AAAA,cACvB,OAAO;AAAA,YAAA;AAAA,YAET,4BAA4B;AAAA,cAC1B,OAAO;AAAA,YAAA;AAAA,YAET,uBAAuB;AAAA,cACrB,MAAM;AAAA,YAAA;AAAA,UACR;AAAA,UAEA,UAAA;AAAA,QAAA;AAAA,MAAA,KAhBU,GAkBd;AAAA,IAEJ,CAAC,EAAA,CACH;AAAA,IACAH,2BAAAA,IAACD,SAAAA,KAAA,EAAI,IAAI,GACN,UAAA,SAAS;AAAA,MAAI,CAAC,OAAO,QACpB,QAAQ,cAAcC,2BAAAA,IAACD,SAAAA,KAAA,EAAe,UAAA,MAAM,MAAM,SAAA,GAAlB,GAA2B,IAAS;AAAA,IAAA,EACtE,CACF;AAAA,EAAA,GACF;AAEJ;ACxDO,MAAM,OAAO,CAAC,MAAuB;AAE5C,KAAK,cAAc;;;"}
+{"version":3,"file":"Stepper.cjs","sources":["../../../src/components/Stepper/Stepper.tsx","../../../src/components/Stepper/Step.tsx"],"sourcesContent":["import React, { ReactElement, useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport {\n  Stepper as MuiStepper,\n  Step as MuiStep,\n  StepLabel as MuiStepLabel,\n  Box,\n  IconButton,\n} from \"@mui/material\";\nimport ChevronLeftIcon from \"@mui/icons-material/ChevronLeft\";\nimport ChevronRightIcon from \"@mui/icons-material/ChevronRight\";\nimport { StepProps } from \"./Step\";\nimport { useWizard } from \"../../hooks/Wizard\";\n\ninterface MyStepperProps {\n  children: ReactElement<StepProps>[];\n  orientation?: \"horizontal\" | \"vertical\";\n  sx?: object;\n  alternateLabel?: boolean;\n  /**\n   * Índice 0-based del paso activo. Si no se provee, el Stepper intenta\n   * leerlo del `WizardContext` (si está dentro de un `<WizardProvider>`).\n   * Si tampoco hay provider, el default es 0.\n   */\n  currentStep?: number;\n}\n\nexport const Stepper: React.FC<MyStepperProps> = ({\n  children,\n  orientation = \"horizontal\",\n  alternateLabel = false,\n\n  sx,\n  currentStep: currentStepProp,\n}) => {\n  // Lee el paso desde el WizardContext cuando el consumer no lo pasa como prop.\n  // Si el Stepper NO está dentro de un WizardProvider, `useWizard()` devuelve\n  // el valor default (currentStep=0, totalSteps=0), así que no rompe nada.\n  const wizard = useWizard();\n  const currentStep =\n    currentStepProp !== undefined\n      ? currentStepProp\n      : wizard.totalSteps > 0\n        ? wizard.currentStep\n        : 0;\n\n  const isHorizontal = orientation === \"horizontal\";\n\n  // Scroll horizontal con flechitas cuando los steps no caben.\n  const scrollRef = useRef<HTMLDivElement | null>(null);\n  const [canScrollLeft, setCanScrollLeft] = useState(false);\n  const [canScrollRight, setCanScrollRight] = useState(false);\n\n  const updateScrollState = () => {\n    const el = scrollRef.current;\n    if (!el) return;\n    const { scrollLeft, scrollWidth, clientWidth } = el;\n    // Tolerancia de 1px por redondeos de subpixel.\n    setCanScrollLeft(scrollLeft > 1);\n    setCanScrollRight(scrollLeft + clientWidth < scrollWidth - 1);\n  };\n\n  useLayoutEffect(() => {\n    if (!isHorizontal) return;\n    updateScrollState();\n  }, [isHorizontal, children.length, currentStep]);\n\n  useEffect(() => {\n    if (!isHorizontal) return;\n    const el = scrollRef.current;\n    if (!el) return;\n    const onScroll = () => updateScrollState();\n    el.addEventListener(\"scroll\", onScroll, { passive: true });\n    const ro = new ResizeObserver(() => updateScrollState());\n    ro.observe(el);\n    return () => {\n      el.removeEventListener(\"scroll\", onScroll);\n      ro.disconnect();\n    };\n  }, [isHorizontal]);\n\n  const scrollBy = (delta: number) => {\n    const el = scrollRef.current;\n    if (!el) return;\n    el.scrollBy({ left: delta, behavior: \"smooth\" });\n  };\n\n  const showArrows = isHorizontal && (canScrollLeft || canScrollRight);\n\n  return (\n    <Box sx={sx}>\n      {/*\n        En horizontal envolvemos el MuiStepper en un Box con `overflowX: auto`\n        y flechitas `<` `>` a los costados para navegar cuando los steps no\n        caben en el contenedor. Mantenemos el scroll nativo (rueda / swipe)\n        y ocultamos la scrollbar visual.\n      */}\n      <Box\n        sx={\n          isHorizontal\n            ? {\n                display: \"flex\",\n                alignItems: \"center\",\n                width: \"100%\",\n                gap: 0.5,\n              }\n            : undefined\n        }\n      >\n        {isHorizontal && (\n          <IconButton\n            aria-label=\"Anterior\"\n            size=\"small\"\n            onClick={() => scrollBy(-160)}\n            disabled={!canScrollLeft}\n            sx={{\n              flex: \"0 0 auto\",\n              // Reservamos el slot siempre que haya overflow en algún lado,\n              // así el área scroll tiene un ancho estable (no saltan los\n              // steps cuando aparece/desaparece la flecha).\n              visibility: showArrows ? \"visible\" : \"hidden\",\n            }}\n          >\n            <ChevronLeftIcon fontSize=\"small\" />\n          </IconButton>\n        )}\n      <Box\n        ref={scrollRef}\n        sx={\n          isHorizontal\n            ? {\n                flex: \"1 1 auto\",\n                minWidth: 0,\n                overflowX: \"auto\",\n                scrollBehavior: \"smooth\",\n                WebkitOverflowScrolling: \"touch\",\n                // Ocultamos la scrollbar (la navegación es con flechas)\n                scrollbarWidth: \"none\",\n                \"&::-webkit-scrollbar\": { display: \"none\" },\n              }\n            : undefined\n        }\n      >\n        <MuiStepper\n          activeStep={currentStep}\n          orientation={orientation}\n          alternativeLabel={alternateLabel}\n          sx={\n            isHorizontal\n              ? {\n                  display: \"inline-flex\",\n                  flexWrap: \"nowrap\",\n                  minWidth: \"100%\",\n                  width: \"max-content\",\n                  // Evita que los steps se compriman al punto de solaparse.\n                  \"& .MuiStep-root\": { flex: \"0 0 auto\", minWidth: 120 },\n                }\n              : undefined\n          }\n        >\n        {children.map((child, idx) => {\n          const { label, completed, disabled, className, sx: stepSx, dotColor, activeDotColor, completedDotColor, iconTextColor } = child.props;\n          return (\n            <MuiStep key={idx} completed={completed} disabled={disabled} className={className} sx={stepSx}>\n              <MuiStepLabel sx={{\n                pointerEvents: 'none',\n                \"& .MuiStepIcon-root\": {\n                  color: dotColor,\n                },\n                \"& .MuiStepIcon-active\": {\n                  color: activeDotColor,\n                },\n                \"& .MuiStepIcon-completed\": {\n                  color: completedDotColor,\n                },\n                \"& .MuiStepIcon-text\": {\n                  fill: iconTextColor,\n                },\n              }}\n              >{label}\n              </MuiStepLabel>\n            </MuiStep>\n          );\n        })}\n        </MuiStepper>\n      </Box>\n        {isHorizontal && (\n          <IconButton\n            aria-label=\"Siguiente\"\n            size=\"small\"\n            onClick={() => scrollBy(160)}\n            disabled={!canScrollRight}\n            sx={{\n              flex: \"0 0 auto\",\n              visibility: showArrows ? \"visible\" : \"hidden\",\n            }}\n          >\n            <ChevronRightIcon fontSize=\"small\" />\n          </IconButton>\n        )}\n      </Box>\n      <Box mt={2}>\n        {children.map((child, idx) =>\n          idx === currentStep ? <Box key={idx}>{child.props.children}</Box> : null\n        )}\n      </Box>\n    </Box>\n  );\n};\n\nexport default Stepper;","import React from \"react\";\nimport { StepProps as MuiStepProps } from \"@mui/material\";\n\ntype PickMuiStepProps = Pick<MuiStepProps, \"completed\" | \"disabled\" | \"sx\" | \"className\">;\n\nexport interface StepProps extends PickMuiStepProps {\n  label: React.ReactNode;\n  children?: React.ReactNode;\n  disabled?: boolean;\n  sx?: object;\n  dotColor?: string;          // dot base\n  activeDotColor?: string;    // dot activa\n  completedDotColor?: string; // dot completada\n  iconTextColor?: string;     // número o check dentro\n}\n\nexport const Step = (_: StepProps): null => null;\n\nStep.displayName = \"Step\";\n\nexport default Step;"],"names":["useWizard","useRef","useState","useLayoutEffect","useEffect","jsxs","Box","jsx","IconButton","MuiStepper","MuiStep","MuiStepLabel"],"mappings":"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"}

package/dist/components/Stepper/Stepper.js

@@ -1,5 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Box, Stepper as Stepper$1, Step as Step$1, StepLabel } from "@mui/material";
+import { useRef, useState, useLayoutEffect, useEffect } from "react";
+import { Box, IconButton, Stepper as Stepper$1, Step as Step$1, StepLabel } from "@mui/material";
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import { u as useWizard } from "../../useWizard-CWq--C3o.js";
 const Stepper = ({
   children,
@@ -10,31 +13,141 @@ const Stepper = ({
 }) => {
   const wizard = useWizard();
   const currentStep = currentStepProp !== void 0 ? currentStepProp : wizard.totalSteps > 0 ? wizard.currentStep : 0;
+  const isHorizontal = orientation === "horizontal";
+  const scrollRef = useRef(null);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+  const updateScrollState = () => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const { scrollLeft, scrollWidth, clientWidth } = el;
+    setCanScrollLeft(scrollLeft > 1);
+    setCanScrollRight(scrollLeft + clientWidth < scrollWidth - 1);
+  };
+  useLayoutEffect(() => {
+    if (!isHorizontal) return;
+    updateScrollState();
+  }, [isHorizontal, children.length, currentStep]);
+  useEffect(() => {
+    if (!isHorizontal) return;
+    const el = scrollRef.current;
+    if (!el) return;
+    const onScroll = () => updateScrollState();
+    el.addEventListener("scroll", onScroll, { passive: true });
+    const ro = new ResizeObserver(() => updateScrollState());
+    ro.observe(el);
+    return () => {
+      el.removeEventListener("scroll", onScroll);
+      ro.disconnect();
+    };
+  }, [isHorizontal]);
+  const scrollBy = (delta) => {
+    const el = scrollRef.current;
+    if (!el) return;
+    el.scrollBy({ left: delta, behavior: "smooth" });
+  };
+  const showArrows = isHorizontal && (canScrollLeft || canScrollRight);
   return /* @__PURE__ */ jsxs(Box, { sx, children: [
-    /* @__PURE__ */ jsx(Stepper$1, { activeStep: currentStep, orientation, alternativeLabel: alternateLabel, children: children.map((child, idx) => {
-      const { label, completed, disabled, className, sx: stepSx, dotColor, activeDotColor, completedDotColor, iconTextColor } = child.props;
-      return /* @__PURE__ */ jsx(Step$1, { completed, disabled, className, sx: stepSx, children: /* @__PURE__ */ jsx(
-        StepLabel,
-        {
-          sx: {
-            pointerEvents: "none",
-            "& .MuiStepIcon-root": {
-              color: dotColor
-            },
-            "& .MuiStepIcon-active": {
-              color: activeDotColor
-            },
-            "& .MuiStepIcon-completed": {
-              color: completedDotColor
-            },
-            "& .MuiStepIcon-text": {
-              fill: iconTextColor
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: isHorizontal ? {
+          display: "flex",
+          alignItems: "center",
+          width: "100%",
+          gap: 0.5
+        } : void 0,
+        children: [
+          isHorizontal && /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              "aria-label": "Anterior",
+              size: "small",
+              onClick: () => scrollBy(-160),
+              disabled: !canScrollLeft,
+              sx: {
+                flex: "0 0 auto",
+                // Reservamos el slot siempre que haya overflow en algún lado,
+                // así el área scroll tiene un ancho estable (no saltan los
+                // steps cuando aparece/desaparece la flecha).
+                visibility: showArrows ? "visible" : "hidden"
+              },
+              children: /* @__PURE__ */ jsx(ChevronLeftIcon, { fontSize: "small" })
             }
-          },
-          children: label
-        }
-      ) }, idx);
-    }) }),
+          ),
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              ref: scrollRef,
+              sx: isHorizontal ? {
+                flex: "1 1 auto",
+                minWidth: 0,
+                overflowX: "auto",
+                scrollBehavior: "smooth",
+                WebkitOverflowScrolling: "touch",
+                // Ocultamos la scrollbar (la navegación es con flechas)
+                scrollbarWidth: "none",
+                "&::-webkit-scrollbar": { display: "none" }
+              } : void 0,
+              children: /* @__PURE__ */ jsx(
+                Stepper$1,
+                {
+                  activeStep: currentStep,
+                  orientation,
+                  alternativeLabel: alternateLabel,
+                  sx: isHorizontal ? {
+                    display: "inline-flex",
+                    flexWrap: "nowrap",
+                    minWidth: "100%",
+                    width: "max-content",
+                    // Evita que los steps se compriman al punto de solaparse.
+                    "& .MuiStep-root": { flex: "0 0 auto", minWidth: 120 }
+                  } : void 0,
+                  children: children.map((child, idx) => {
+                    const { label, completed, disabled, className, sx: stepSx, dotColor, activeDotColor, completedDotColor, iconTextColor } = child.props;
+                    return /* @__PURE__ */ jsx(Step$1, { completed, disabled, className, sx: stepSx, children: /* @__PURE__ */ jsx(
+                      StepLabel,
+                      {
+                        sx: {
+                          pointerEvents: "none",
+                          "& .MuiStepIcon-root": {
+                            color: dotColor
+                          },
+                          "& .MuiStepIcon-active": {
+                            color: activeDotColor
+                          },
+                          "& .MuiStepIcon-completed": {
+                            color: completedDotColor
+                          },
+                          "& .MuiStepIcon-text": {
+                            fill: iconTextColor
+                          }
+                        },
+                        children: label
+                      }
+                    ) }, idx);
+                  })
+                }
+              )
+            }
+          ),
+          isHorizontal && /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              "aria-label": "Siguiente",
+              size: "small",
+              onClick: () => scrollBy(160),
+              disabled: !canScrollRight,
+              sx: {
+                flex: "0 0 auto",
+                visibility: showArrows ? "visible" : "hidden"
+              },
+              children: /* @__PURE__ */ jsx(ChevronRightIcon, { fontSize: "small" })
+            }
+          )
+        ]
+      }
+    ),
     /* @__PURE__ */ jsx(Box, { mt: 2, children: children.map(
       (child, idx) => idx === currentStep ? /* @__PURE__ */ jsx(Box, { children: child.props.children }, idx) : null
     ) })

package/dist/components/Stepper/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","sources":["../../../src/components/Stepper/Stepper.tsx","../../../src/components/Stepper/Step.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\nimport { Stepper as MuiStepper, Step as MuiStep, StepLabel as MuiStepLabel, Box } from \"@mui/material\";\nimport { StepProps } from \"./Step\";\nimport { useWizard } from \"../../hooks/Wizard\";\n\ninterface MyStepperProps {\n  children: ReactElement<StepProps>[];\n  orientation?: \"horizontal\" | \"vertical\";\n  sx?: object;\n  alternateLabel?: boolean;\n  /**\n   * Índice 0-based del paso activo. Si no se provee, el Stepper intenta\n   * leerlo del `WizardContext` (si está dentro de un `<WizardProvider>`).\n   * Si tampoco hay provider, el default es 0.\n   */\n  currentStep?: number;\n}\n\nexport const Stepper: React.FC<MyStepperProps> = ({\n  children,\n  orientation = \"horizontal\",\n  alternateLabel = false,\n\n  sx,\n  currentStep: currentStepProp,\n}) => {\n  // Lee el paso desde el WizardContext cuando el consumer no lo pasa como prop.\n  // Si el Stepper NO está dentro de un WizardProvider, `useWizard()` devuelve\n  // el valor default (currentStep=0, totalSteps=0), así que no rompe nada.\n  const wizard = useWizard();\n  const currentStep =\n    currentStepProp !== undefined\n      ? currentStepProp\n      : wizard.totalSteps > 0\n        ? wizard.currentStep\n        : 0;\n\n  return (\n    <Box sx={sx}>\n      <MuiStepper activeStep={currentStep} orientation={orientation} alternativeLabel={alternateLabel} >\n        {children.map((child, idx) => {\n          const { label, completed, disabled, className, sx: stepSx, dotColor, activeDotColor, completedDotColor, iconTextColor } = child.props;\n          return (\n            <MuiStep key={idx} completed={completed} disabled={disabled} className={className} sx={stepSx}>\n              <MuiStepLabel sx={{\n                pointerEvents: 'none',\n                \"& .MuiStepIcon-root\": {\n                  color: dotColor,\n                },\n                \"& .MuiStepIcon-active\": {\n                  color: activeDotColor,\n                },\n                \"& .MuiStepIcon-completed\": {\n                  color: completedDotColor,\n                },\n                \"& .MuiStepIcon-text\": {\n                  fill: iconTextColor,\n                },\n              }}\n              >{label}\n              </MuiStepLabel>\n            </MuiStep>\n          );\n        })}\n      </MuiStepper>\n      <Box mt={2}>\n        {children.map((child, idx) =>\n          idx === currentStep ? <Box key={idx}>{child.props.children}</Box> : null\n        )}\n      </Box>\n    </Box>\n  );\n};\n\nexport default Stepper;","import React from \"react\";\nimport { StepProps as MuiStepProps } from \"@mui/material\";\n\ntype PickMuiStepProps = Pick<MuiStepProps, \"completed\" | \"disabled\" | \"sx\" | \"className\">;\n\nexport interface StepProps extends PickMuiStepProps {\n  label: React.ReactNode;\n  children?: React.ReactNode;\n  disabled?: boolean;\n  sx?: object;\n  dotColor?: string;          // dot base\n  activeDotColor?: string;    // dot activa\n  completedDotColor?: string; // dot completada\n  iconTextColor?: string;     // número o check dentro\n}\n\nexport const Step = (_: StepProps): null => null;\n\nStep.displayName = \"Step\";\n\nexport default Step;"],"names":["MuiStepper","MuiStep","MuiStepLabel"],"mappings":";;;AAkBO,MAAM,UAAoC,CAAC;AAAA,EAChD;AAAA,EACA,cAAc;AAAA,EACd,iBAAiB;AAAA,EAEjB;AAAA,EACA,aAAa;AACf,MAAM;AAIJ,QAAM,SAAS,UAAA;AACf,QAAM,cACJ,oBAAoB,SAChB,kBACA,OAAO,aAAa,IAClB,OAAO,cACP;AAER,SACE,qBAAC,OAAI,IACH,UAAA;AAAA,IAAA,oBAACA,WAAA,EAAW,YAAY,aAAa,aAA0B,kBAAkB,gBAC9E,UAAA,SAAS,IAAI,CAAC,OAAO,QAAQ;AAC5B,YAAM,EAAE,OAAO,WAAW,UAAU,WAAW,IAAI,QAAQ,UAAU,gBAAgB,mBAAmB,cAAA,IAAkB,MAAM;AAChI,iCACGC,QAAA,EAAkB,WAAsB,UAAoB,WAAsB,IAAI,QACrF,UAAA;AAAA,QAACC;AAAAA,QAAA;AAAA,UAAa,IAAI;AAAA,YAChB,eAAe;AAAA,YACf,uBAAuB;AAAA,cACrB,OAAO;AAAA,YAAA;AAAA,YAET,yBAAyB;AAAA,cACvB,OAAO;AAAA,YAAA;AAAA,YAET,4BAA4B;AAAA,cAC1B,OAAO;AAAA,YAAA;AAAA,YAET,uBAAuB;AAAA,cACrB,MAAM;AAAA,YAAA;AAAA,UACR;AAAA,UAEA,UAAA;AAAA,QAAA;AAAA,MAAA,KAhBU,GAkBd;AAAA,IAEJ,CAAC,EAAA,CACH;AAAA,IACA,oBAAC,KAAA,EAAI,IAAI,GACN,UAAA,SAAS;AAAA,MAAI,CAAC,OAAO,QACpB,QAAQ,cAAc,oBAAC,KAAA,EAAe,UAAA,MAAM,MAAM,SAAA,GAAlB,GAA2B,IAAS;AAAA,IAAA,EACtE,CACF;AAAA,EAAA,GACF;AAEJ;ACxDO,MAAM,OAAO,CAAC,MAAuB;AAE5C,KAAK,cAAc;"}
+{"version":3,"file":"Stepper.js","sources":["../../../src/components/Stepper/Stepper.tsx","../../../src/components/Stepper/Step.tsx"],"sourcesContent":["import React, { ReactElement, useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport {\n  Stepper as MuiStepper,\n  Step as MuiStep,\n  StepLabel as MuiStepLabel,\n  Box,\n  IconButton,\n} from \"@mui/material\";\nimport ChevronLeftIcon from \"@mui/icons-material/ChevronLeft\";\nimport ChevronRightIcon from \"@mui/icons-material/ChevronRight\";\nimport { StepProps } from \"./Step\";\nimport { useWizard } from \"../../hooks/Wizard\";\n\ninterface MyStepperProps {\n  children: ReactElement<StepProps>[];\n  orientation?: \"horizontal\" | \"vertical\";\n  sx?: object;\n  alternateLabel?: boolean;\n  /**\n   * Índice 0-based del paso activo. Si no se provee, el Stepper intenta\n   * leerlo del `WizardContext` (si está dentro de un `<WizardProvider>`).\n   * Si tampoco hay provider, el default es 0.\n   */\n  currentStep?: number;\n}\n\nexport const Stepper: React.FC<MyStepperProps> = ({\n  children,\n  orientation = \"horizontal\",\n  alternateLabel = false,\n\n  sx,\n  currentStep: currentStepProp,\n}) => {\n  // Lee el paso desde el WizardContext cuando el consumer no lo pasa como prop.\n  // Si el Stepper NO está dentro de un WizardProvider, `useWizard()` devuelve\n  // el valor default (currentStep=0, totalSteps=0), así que no rompe nada.\n  const wizard = useWizard();\n  const currentStep =\n    currentStepProp !== undefined\n      ? currentStepProp\n      : wizard.totalSteps > 0\n        ? wizard.currentStep\n        : 0;\n\n  const isHorizontal = orientation === \"horizontal\";\n\n  // Scroll horizontal con flechitas cuando los steps no caben.\n  const scrollRef = useRef<HTMLDivElement | null>(null);\n  const [canScrollLeft, setCanScrollLeft] = useState(false);\n  const [canScrollRight, setCanScrollRight] = useState(false);\n\n  const updateScrollState = () => {\n    const el = scrollRef.current;\n    if (!el) return;\n    const { scrollLeft, scrollWidth, clientWidth } = el;\n    // Tolerancia de 1px por redondeos de subpixel.\n    setCanScrollLeft(scrollLeft > 1);\n    setCanScrollRight(scrollLeft + clientWidth < scrollWidth - 1);\n  };\n\n  useLayoutEffect(() => {\n    if (!isHorizontal) return;\n    updateScrollState();\n  }, [isHorizontal, children.length, currentStep]);\n\n  useEffect(() => {\n    if (!isHorizontal) return;\n    const el = scrollRef.current;\n    if (!el) return;\n    const onScroll = () => updateScrollState();\n    el.addEventListener(\"scroll\", onScroll, { passive: true });\n    const ro = new ResizeObserver(() => updateScrollState());\n    ro.observe(el);\n    return () => {\n      el.removeEventListener(\"scroll\", onScroll);\n      ro.disconnect();\n    };\n  }, [isHorizontal]);\n\n  const scrollBy = (delta: number) => {\n    const el = scrollRef.current;\n    if (!el) return;\n    el.scrollBy({ left: delta, behavior: \"smooth\" });\n  };\n\n  const showArrows = isHorizontal && (canScrollLeft || canScrollRight);\n\n  return (\n    <Box sx={sx}>\n      {/*\n        En horizontal envolvemos el MuiStepper en un Box con `overflowX: auto`\n        y flechitas `<` `>` a los costados para navegar cuando los steps no\n        caben en el contenedor. Mantenemos el scroll nativo (rueda / swipe)\n        y ocultamos la scrollbar visual.\n      */}\n      <Box\n        sx={\n          isHorizontal\n            ? {\n                display: \"flex\",\n                alignItems: \"center\",\n                width: \"100%\",\n                gap: 0.5,\n              }\n            : undefined\n        }\n      >\n        {isHorizontal && (\n          <IconButton\n            aria-label=\"Anterior\"\n            size=\"small\"\n            onClick={() => scrollBy(-160)}\n            disabled={!canScrollLeft}\n            sx={{\n              flex: \"0 0 auto\",\n              // Reservamos el slot siempre que haya overflow en algún lado,\n              // así el área scroll tiene un ancho estable (no saltan los\n              // steps cuando aparece/desaparece la flecha).\n              visibility: showArrows ? \"visible\" : \"hidden\",\n            }}\n          >\n            <ChevronLeftIcon fontSize=\"small\" />\n          </IconButton>\n        )}\n      <Box\n        ref={scrollRef}\n        sx={\n          isHorizontal\n            ? {\n                flex: \"1 1 auto\",\n                minWidth: 0,\n                overflowX: \"auto\",\n                scrollBehavior: \"smooth\",\n                WebkitOverflowScrolling: \"touch\",\n                // Ocultamos la scrollbar (la navegación es con flechas)\n                scrollbarWidth: \"none\",\n                \"&::-webkit-scrollbar\": { display: \"none\" },\n              }\n            : undefined\n        }\n      >\n        <MuiStepper\n          activeStep={currentStep}\n          orientation={orientation}\n          alternativeLabel={alternateLabel}\n          sx={\n            isHorizontal\n              ? {\n                  display: \"inline-flex\",\n                  flexWrap: \"nowrap\",\n                  minWidth: \"100%\",\n                  width: \"max-content\",\n                  // Evita que los steps se compriman al punto de solaparse.\n                  \"& .MuiStep-root\": { flex: \"0 0 auto\", minWidth: 120 },\n                }\n              : undefined\n          }\n        >\n        {children.map((child, idx) => {\n          const { label, completed, disabled, className, sx: stepSx, dotColor, activeDotColor, completedDotColor, iconTextColor } = child.props;\n          return (\n            <MuiStep key={idx} completed={completed} disabled={disabled} className={className} sx={stepSx}>\n              <MuiStepLabel sx={{\n                pointerEvents: 'none',\n                \"& .MuiStepIcon-root\": {\n                  color: dotColor,\n                },\n                \"& .MuiStepIcon-active\": {\n                  color: activeDotColor,\n                },\n                \"& .MuiStepIcon-completed\": {\n                  color: completedDotColor,\n                },\n                \"& .MuiStepIcon-text\": {\n                  fill: iconTextColor,\n                },\n              }}\n              >{label}\n              </MuiStepLabel>\n            </MuiStep>\n          );\n        })}\n        </MuiStepper>\n      </Box>\n        {isHorizontal && (\n          <IconButton\n            aria-label=\"Siguiente\"\n            size=\"small\"\n            onClick={() => scrollBy(160)}\n            disabled={!canScrollRight}\n            sx={{\n              flex: \"0 0 auto\",\n              visibility: showArrows ? \"visible\" : \"hidden\",\n            }}\n          >\n            <ChevronRightIcon fontSize=\"small\" />\n          </IconButton>\n        )}\n      </Box>\n      <Box mt={2}>\n        {children.map((child, idx) =>\n          idx === currentStep ? <Box key={idx}>{child.props.children}</Box> : null\n        )}\n      </Box>\n    </Box>\n  );\n};\n\nexport default Stepper;","import React from \"react\";\nimport { StepProps as MuiStepProps } from \"@mui/material\";\n\ntype PickMuiStepProps = Pick<MuiStepProps, \"completed\" | \"disabled\" | \"sx\" | \"className\">;\n\nexport interface StepProps extends PickMuiStepProps {\n  label: React.ReactNode;\n  children?: React.ReactNode;\n  disabled?: boolean;\n  sx?: object;\n  dotColor?: string;          // dot base\n  activeDotColor?: string;    // dot activa\n  completedDotColor?: string; // dot completada\n  iconTextColor?: string;     // número o check dentro\n}\n\nexport const Step = (_: StepProps): null => null;\n\nStep.displayName = \"Step\";\n\nexport default Step;"],"names":["MuiStepper","MuiStep","MuiStepLabel"],"mappings":"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"}

package/dist/components/Switch/Switch.cjs

@@ -0,0 +1,181 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const styles = require("@mui/material/styles");
+const material = require("@mui/material");
+const reactHookForm = require("react-hook-form");
+const resolvePreset = require("../../resolvePreset-CT3kU-K2.cjs");
+const toRadius = (borderRadius) => typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius;
+const FOCUS_TRANSITION = "border-color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, box-shadow 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms";
+const buildSwitchSx = ({
+  bordered,
+  borderRadius,
+  hasLabel,
+  error
+}) => {
+  const radius = toRadius(borderRadius);
+  if (!bordered) {
+    return {
+      "& .MuiFormHelperText-root": { marginLeft: 0 }
+    };
+  }
+  return (theme) => ({
+    "& .MuiFormControlLabel-root": __spreadValues(__spreadProps(__spreadValues({
+      marginLeft: 0,
+      marginRight: 0,
+      paddingX: 1.5,
+      paddingY: 1.25,
+      border: `1px solid ${error ? theme.palette.error.main : theme.palette.divider}`,
+      borderRadius: radius,
+      transition: FOCUS_TRANSITION
+    }, error && {
+      boxShadow: `0 0 0 1px ${theme.palette.error.main}`
+    }), {
+      // Focus del usuario sobre el switch interno.
+      "&:focus-within": {
+        borderColor: error ? theme.palette.error.main : theme.palette.primary.main,
+        boxShadow: `0 0 0 1px ${error ? theme.palette.error.main : theme.palette.primary.main}`
+      }
+    }), hasLabel && {
+      width: "100%",
+      justifyContent: "space-between"
+    }),
+    "& .MuiFormHelperText-root": {
+      marginLeft: 0
+    }
+  });
+};
+const Switch = (props) => {
+  const _a = props, {
+    label,
+    size = "medium",
+    labelPlacement = "end",
+    disabled = false,
+    error = false,
+    helperText,
+    bordered = false,
+    borderRadius = 10,
+    defaultChecked,
+    preset,
+    sx
+  } = _a, rest = __objRest(_a, [
+    "label",
+    "size",
+    "labelPlacement",
+    "disabled",
+    "error",
+    "helperText",
+    "bordered",
+    "borderRadius",
+    "defaultChecked",
+    "preset",
+    "sx"
+  ]);
+  const theme = styles.useTheme();
+  const presetSx = resolvePreset.resolvePreset("Switch", preset, theme);
+  const buildSx = (effectiveError) => [
+    buildSwitchSx({
+      bordered,
+      borderRadius,
+      hasLabel: !!label,
+      error: effectiveError
+    }),
+    ...presetSx ? [presetSx] : [],
+    ...Array.isArray(sx) ? sx : [sx]
+  ];
+  const renderSwitch = (checked2, onChange2, onBlur, inputRef) => {
+    const switchEl = /* @__PURE__ */ jsxRuntime.jsx(
+      material.Switch,
+      __spreadProps(__spreadValues({}, rest), {
+        size,
+        checked: !!checked2,
+        onChange: (_e, next) => onChange2(next),
+        onBlur,
+        inputRef,
+        disabled
+      })
+    );
+    return label ? /* @__PURE__ */ jsxRuntime.jsx(
+      material.FormControlLabel,
+      {
+        control: switchEl,
+        label,
+        labelPlacement,
+        disabled
+      }
+    ) : switchEl;
+  };
+  if ("control" in props && props.control) {
+    const { name, control, validation } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactHookForm.Controller,
+      {
+        name,
+        control,
+        rules: validation,
+        defaultValue: defaultChecked,
+        render: ({ field, fieldState: { error: fieldError } }) => {
+          var _a2;
+          const finalError = !!fieldError || error;
+          const finalHelperText = (_a2 = fieldError == null ? void 0 : fieldError.message) != null ? _a2 : helperText;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            material.FormControl,
+            {
+              error: finalError,
+              disabled,
+              sx: buildSx(finalError),
+              children: [
+                renderSwitch(
+                  !!field.value,
+                  (next) => field.onChange(next),
+                  field.onBlur,
+                  field.ref
+                ),
+                finalHelperText && /* @__PURE__ */ jsxRuntime.jsx(material.FormHelperText, { children: finalHelperText })
+              ]
+            }
+          );
+        }
+      }
+    );
+  }
+  const { checked, onChange } = props;
+  return /* @__PURE__ */ jsxRuntime.jsxs(material.FormControl, { error, disabled, sx: buildSx(error), children: [
+    renderSwitch(checked, onChange),
+    helperText && /* @__PURE__ */ jsxRuntime.jsx(material.FormHelperText, { children: helperText })
+  ] });
+};
+exports.Switch = Switch;
+exports.default = Switch;
+//# sourceMappingURL=Switch.cjs.map