@soyfri/shared-library 2.0.0-beta.3 → 2.0.0-beta.31

package/components/Stepper/Stepper.js

@@ -1,49 +1,10 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { Box, Stepper as Stepper$1, Step as Step$1, StepLabel } from "@mui/material";
-import { u as useWizard } from "../../useWizard-CWq--C3o.js";
-const Stepper = ({
-  children,
-  orientation = "horizontal",
-  alternateLabel = false,
-  sx,
-  currentStep: currentStepProp
-}) => {
-  const wizard = useWizard();
-  const currentStep = currentStepProp !== void 0 ? currentStepProp : wizard.totalSteps > 0 ? wizard.currentStep : 0;
-  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
-            }
-          },
-          children: label
-        }
-      ) }, idx);
-    }) }),
-    /* @__PURE__ */ jsx(Box, { mt: 2, children: children.map(
-      (child, idx) => idx === currentStep ? /* @__PURE__ */ jsx(Box, { children: child.props.children }, idx) : null
-    ) })
-  ] });
-};
-const Step = (_) => null;
-Step.displayName = "Step";
+import { a, S, c, b, S as S2, u } from "../../Step-BArsou1V.js";
 export {
-  Step,
-  Stepper
+  a as Step,
+  S as Stepper,
+  c as StepperContext,
+  b as StepperProvider,
+  S2 as default,
+  u as useStepper
 };
 //# sourceMappingURL=Stepper.js.map

package/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":[],"sourcesContent":[],"names":[],"mappings":";"}

package/{hooks/Wizard/WizardContext.d.ts → components/Stepper/StepperContext.d.ts}

@@ -1,17 +1,11 @@
-import { default as React, FC, ReactNode } from 'react';
+import { FC, ReactNode } from 'react';
 /**
- * API expuesta por `useWizard()`.
- *
- * Nota de retro-compatibilidad: los nombres `submitStep`, `nextStep`,
- * `prevStep`, `goToStep` se mantienen idénticos al `WizardContext` de
- * `@soyfri/fri-web-components` para que consumers migrando no tengan que
- * cambiar sus llamadas. Se agregan campos extra opcionales que antes no
- * existían (`currentStep`, `totalSteps`, `isFirst`, `isLast`, `completed`).
+ * API expuesta por `useStepper()`.
  */
-export interface WizardContextValue {
+export interface StepperContextValue {
     /** Índice del paso actual (0-based). */
     currentStep: number;
-    /** Total de pasos del wizard. */
+    /** Total de pasos del stepper. */
     totalSteps: number;
     /** True si `currentStep === 0`. */
     isFirst: boolean;
@@ -26,16 +20,25 @@ export interface WizardContextValue {
     /** Salta a un paso específico (0-based). No-op si fuera de rango. */
     goToStep: (stepNumber: number) => void;
     /**
-     * Envía el wizard. Marca `completed = true` y dispara el callback
+     * Envía el stepper. Marca `completed = true` y dispara el callback
      * `onSubmit` del provider. En el último paso suele reemplazar a `nextStep`.
      */
     submitStep: () => void;
-    /** Resetea el wizard al paso inicial y limpia `completed`. */
+    /** Resetea al paso inicial y limpia `completed`. */
     reset: () => void;
 }
-export declare const WizardContext: React.Context<WizardContextValue>;
-export interface WizardProviderProps {
-    /** Número total de pasos del wizard. Requerido. */
+export declare const StepperContext: import('react').Context<StepperContextValue>;
+/**
+ * Hook para consumir el `StepperContext` desde cualquier descendiente de
+ * `<StepperProvider>`.
+ *
+ * Si se llama fuera de un provider, devuelve los valores por defecto (no-op)
+ * para que componentes como `<Stepper>` puedan leerlo sin romper cuando no
+ * hay provider envolvente.
+ */
+export declare function useStepper(): StepperContextValue;
+export interface StepperProviderProps {
+    /** Número total de pasos. Requerido. */
     totalSteps: number;
     /** Paso inicial (0-based). Default: 0. */
     initialStep?: number;
@@ -52,16 +55,19 @@ export interface WizardProviderProps {
     children?: ReactNode;
 }
 /**
- * Provider del wizard. Administra el `currentStep` internamente. El consumer
- * no necesita gestionar estado — sólo consumirlo con `useWizard()` desde
+ * Provider del stepper. Administra el `currentStep` internamente. El consumer
+ * no necesita gestionar estado — solo consumirlo con `useStepper()` desde
  * cualquier descendiente.
  *
  * ```tsx
- * <WizardProvider totalSteps={3} onSubmit={handleFinalSubmit}>
- *   <Stepper ... />
- *   <StepContent />
- *   <WizardControls />
- * </WizardProvider>
+ * <StepperProvider totalSteps={3} onSubmit={handleFinalSubmit}>
+ *   <Stepper>
+ *     <Step label="Paso 1"><StepOne /></Step>
+ *     <Step label="Paso 2"><StepTwo /></Step>
+ *     <Step label="Paso 3"><StepThree /></Step>
+ *   </Stepper>
+ *   <StepperControls />
+ * </StepperProvider>
  * ```
  */
-export declare const WizardProvider: FC<WizardProviderProps>;
+export declare const StepperProvider: FC<StepperProviderProps>;

package/components/Stepper/_hooks/useHorizontalScroll.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Hook interno del Stepper para manejar scroll horizontal cuando los steps
+ * no caben en el contenedor. No se exporta desde el barrel — es un detalle
+ * de implementación.
+ *
+ * @param enabled - Si el scroll está activo (típicamente sólo en orientación horizontal).
+ * @param deps    - Cosas que afectan el layout y disparan un recompute (ej. cantidad de steps, paso activo).
+ *
+ * Retorna:
+ * - `scrollRef`: ref a asignar al contenedor con `overflow-x: auto`.
+ * - `canScrollLeft` / `canScrollRight`: flags para habilitar/deshabilitar flechas.
+ * - `scrollBy(delta)`: imperativo con scroll suave.
+ */
+export declare function useHorizontalScroll(enabled: boolean, deps?: unknown[]): {
+    scrollRef: import('react').RefObject<HTMLDivElement | null>;
+    canScrollLeft: boolean;
+    canScrollRight: boolean;
+    scrollBy: (delta: number) => void;
+};

package/components/Stepper/_parts/StepperScrollArrow.d.ts

@@ -0,0 +1,19 @@
+interface StepperScrollArrowProps {
+    direction: 'left' | 'right';
+    /** Cuando `false`, el botón está deshabilitado (por ejemplo, ya estás al inicio). */
+    enabled: boolean;
+    /**
+     * Cuando `false`, el botón queda con `visibility: hidden` (reserva su
+     * espacio pero no se ve). Útil para que el área de scroll no se corra
+     * horizontalmente cuando no hay overflow en ningún lado.
+     */
+    visible: boolean;
+    onClick: () => void;
+}
+/**
+ * Flecha de scroll (`<` / `>`) del Stepper horizontal. Se muestra a los
+ * costados del área scrollable cuando hay overflow. Componente privado —
+ * no se exporta del barrel.
+ */
+export declare const StepperScrollArrow: ({ direction, enabled, visible, onClick, }: StepperScrollArrowProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/components/Stepper/index.d.ts

@@ -1,2 +1,6 @@
-export { default as Stepper } from './Stepper';
-export { default as Step } from './Step';
+export { Stepper, default } from './Stepper';
+export type { StepperProps } from './Stepper';
+export { Step } from './Step';
+export type { StepProps } from './Step';
+export { StepperProvider, StepperContext, useStepper, } from './StepperContext';
+export type { StepperContextValue, StepperProviderProps, } from './StepperContext';

package/components/Stepper.d.ts

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

package/components/Switch/Switch.cjs

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const Switch = require("../../Switch-CQFOopYy.cjs");
+exports.Switch = Switch.Switch;
+exports.default = Switch.Switch;
+//# sourceMappingURL=Switch.cjs.map

package/components/Switch/Switch.cjs.map

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

package/components/Switch/Switch.d.ts

@@ -0,0 +1,48 @@
+import { SwitchProps as MuiSwitchProps, SxProps, Theme } from '@mui/material';
+import { RegisterOptions } from 'react-hook-form';
+export type SwitchSize = 'small' | 'medium';
+export type SwitchLabelPlacement = 'start' | 'end' | 'top' | 'bottom';
+export interface BaseSwitchProps extends Omit<MuiSwitchProps, 'value' | 'onChange' | 'checked' | 'defaultChecked' | 'size'> {
+    /** Texto al lado del switch. Si está ausente, no se renderiza FormControlLabel. */
+    label?: string;
+    size?: SwitchSize;
+    /** Posición del label. Default: 'end' (legacy `FormToggleInput` lo ponía a la izquierda con su flex-stack). */
+    labelPlacement?: SwitchLabelPlacement;
+    disabled?: boolean;
+    error?: boolean;
+    helperText?: string;
+    /** Renderiza un contenedor con borde alrededor del switch + label. Default: false. */
+    bordered?: boolean;
+    /** Border radius del contenedor (cuando bordered). Default: 10. */
+    borderRadius?: number | string;
+    defaultChecked?: boolean;
+    /**
+     * Nombre del preset de estilo registrado en `theme.styles.Switch`.
+     * - `"default"` (o ausente) = estilo built-in del paquete.
+     * - Cualquier otro string = mergea el preset encima del estilo built-in.
+     */
+    preset?: string;
+    sx?: SxProps<Theme>;
+}
+export interface RHFSwitchProps extends BaseSwitchProps {
+    name: string;
+    control: any;
+    validation?: RegisterOptions;
+    /**
+     * Side-effect que corre después de que RHF actualiza el form state.
+     * Útil para cascadas entre campos. NO reemplaza al handler de RHF.
+     */
+    onValueChange?: (checked: boolean) => void;
+    checked?: never;
+    onChange?: never;
+}
+export interface ControlledSwitchProps extends BaseSwitchProps {
+    name?: string;
+    control?: never;
+    validation?: never;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+}
+export type SwitchProps = RHFSwitchProps | ControlledSwitchProps;
+export declare const Switch: React.FC<SwitchProps>;
+export default Switch;

package/components/Switch/Switch.definitions.d.ts

@@ -0,0 +1,7 @@
+export declare const BasicSwitchDefinition = "\nimport React, { useState } from 'react';\nimport { Switch } from './Switch';\nimport { Box, Typography } from '@mui/material';\n\nexport const BasicSwitchExample = () => {\n  const [checked, setChecked] = useState(false);\n  return (\n    <Box sx={{ width: 280 }}>\n      <Switch checked={checked} onChange={setChecked} />\n      <Typography sx={{ mt: 2 }}>Estado: {checked ? 'ON' : 'OFF'}</Typography>\n    </Box>\n  );\n};\n";
+export declare const SwitchWithLabelDefinition = "\nimport React, { useState } from 'react';\nimport { Switch } from './Switch';\nimport { Box } from '@mui/material';\n\nexport const SwitchWithLabelExample = () => {\n  const [checked, setChecked] = useState(true);\n  return (\n    <Box sx={{ width: 280 }}>\n      <Switch\n        label=\"Notificaciones por email\"\n        checked={checked}\n        onChange={setChecked}\n      />\n    </Box>\n  );\n};\n";
+export declare const BorderedSwitchDefinition = "\nimport React, { useState } from 'react';\nimport { Switch } from './Switch';\nimport { Box } from '@mui/material';\n\nexport const BorderedSwitchExample = () => {\n  const [checked, setChecked] = useState(true);\n  return (\n    <Box sx={{ width: 360 }}>\n      <Switch\n        label=\"Recibir reportes diarios\"\n        checked={checked}\n        onChange={setChecked}\n        bordered\n      />\n    </Box>\n  );\n};\n";
+export declare const SwitchSizesDefinition = "\nimport React, { useState } from 'react';\nimport { Switch } from './Switch';\nimport { Box } from '@mui/material';\n\nexport const SwitchSizesExample = () => {\n  const [a, setA] = useState(false);\n  const [b, setB] = useState(true);\n  return (\n    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, width: 280 }}>\n      <Switch label=\"Peque\u00F1o\" size=\"small\" checked={a} onChange={setA} />\n      <Switch label=\"Mediano (default)\" size=\"medium\" checked={b} onChange={setB} />\n    </Box>\n  );\n};\n";
+export declare const SwitchWithErrorDefinition = "\nimport React, { useState } from 'react';\nimport { Switch } from './Switch';\nimport { Box } from '@mui/material';\n\nexport const SwitchWithErrorExample = () => {\n  const [checked, setChecked] = useState(false);\n  const hasError = !checked;\n  return (\n    <Box sx={{ width: 320 }}>\n      <Switch\n        label=\"Aceptar t\u00E9rminos y condiciones\"\n        checked={checked}\n        onChange={setChecked}\n        error={hasError}\n        helperText={hasError ? 'Debes aceptar los t\u00E9rminos para continuar' : ''}\n      />\n    </Box>\n  );\n};\n";
+export declare const DisabledSwitchDefinition = "\nimport React from 'react';\nimport { Switch } from './Switch';\nimport { Box } from '@mui/material';\n\nexport const DisabledSwitchExample = () => (\n  <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, width: 280 }}>\n    <Switch label=\"Off bloqueado\" checked={false} onChange={() => {}} disabled />\n    <Switch label=\"On bloqueado\" checked={true} onChange={() => {}} disabled />\n  </Box>\n);\n";
+export declare const RHFSwitchDefinition = "\nimport React from 'react';\nimport { useForm } from 'react-hook-form';\nimport { Switch } from './Switch';\nimport { Box, Button, Typography } from '@mui/material';\n\nexport const RHFSwitchExample = () => {\n  const { control, handleSubmit, watch } = useForm({\n    defaultValues: { darkMode: false },\n  });\n  const value = watch('darkMode');\n  return (\n    <Box sx={{ width: 320 }} component=\"form\" onSubmit={handleSubmit(console.log)}>\n      <Switch\n        label=\"Modo oscuro\"\n        name=\"darkMode\"\n        control={control}\n        bordered\n      />\n      <Typography sx={{ mt: 2 }}>Valor en el form: {String(value)}</Typography>\n      <Button type=\"submit\" sx={{ mt: 1 }}>Enviar</Button>\n    </Box>\n  );\n};\n";

package/components/Switch/Switch.js

@@ -0,0 +1,6 @@
+import { S, S as S2 } from "../../Switch-D72dpkH2.js";
+export {
+  S as Switch,
+  S2 as default
+};
+//# sourceMappingURL=Switch.js.map

package/components/Switch/Switch.js.map

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

package/components/Switch/Switch.sx.d.ts

@@ -0,0 +1,22 @@
+import { SxProps, Theme } from '@mui/material/styles';
+export interface BuildSwitchSxOptions {
+    bordered: boolean;
+    borderRadius: number | string;
+    hasLabel: boolean;
+    error: boolean;
+}
+/**
+ * Builder de sx para Switch. Reproduce el estilo del antiguo
+ * `FormToggleInput` legacy cuando `bordered=true`: contenedor con borde,
+ * label a la izquierda y switch a la derecha (vía justify-content: space-between).
+ *
+ * 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`, sólo aplica un reset de margin del helper text.
+ */
+export declare const buildSwitchSx: ({ bordered, borderRadius, hasLabel, error, }: BuildSwitchSxOptions) => SxProps<Theme>;

package/components/Switch/Switch.types.d.ts

@@ -0,0 +1 @@
+export type { SwitchSize, SwitchLabelPlacement, BaseSwitchProps, RHFSwitchProps, ControlledSwitchProps, SwitchProps, } from './Switch';

package/components/Switch/index.d.ts

@@ -0,0 +1,2 @@
+export { Switch, default } from './Switch';
+export type { SwitchSize, SwitchLabelPlacement, BaseSwitchProps, RHFSwitchProps, ControlledSwitchProps, SwitchProps, } from './Switch.types';

package/components/Switch.d.ts

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