@soyfri/shared-library 2.0.0-beta.2 → 2.0.0-beta.20

package/dist/{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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/components/Switch/Switch.cjs.map

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

package/dist/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/dist/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/dist/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/dist/components/Switch/Switch.js.map

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

package/dist/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/dist/components/Switch/Switch.types.d.ts

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

package/dist/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/dist/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 {}