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

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,172 @@
+import { useTheme } from '@mui/material/styles';
+import {
+  FormControl,
+  FormControlLabel,
+  FormHelperText,
+  Switch as MuiSwitch,
+  type SwitchProps as MuiSwitchProps,
+  type SxProps,
+  type Theme,
+} from '@mui/material';
+import { Controller, type Control, type RegisterOptions } from 'react-hook-form';
+
+import { buildSwitchSx } from './Switch.sx';
+import { resolvePreset } from '../_shared/resolvePreset';
+
+// ── Tipos de dominio ─────────────────────────────────────────────────────
+export type SwitchSize = 'small' | 'medium';
+export type SwitchLabelPlacement = 'start' | 'end' | 'top' | 'bottom';
+
+// ── Props base (todo lo común entre RHF y controlado) ────────────────────
+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>;
+}
+
+// ── Variantes discriminadas (RHF vs controlado) ──────────────────────────
+export interface RHFSwitchProps extends BaseSwitchProps {
+  name: string;
+  control: Control<any>;
+  validation?: RegisterOptions;
+  checked?: never;
+  onChange?: never;
+}
+
+export interface ControlledSwitchProps extends BaseSwitchProps {
+  name?: string;
+  control?: never;
+  validation?: never;
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+}
+
+// ── API pública final ────────────────────────────────────────────────────
+export type SwitchProps = RHFSwitchProps | ControlledSwitchProps;
+
+export const Switch: React.FC<SwitchProps> = (props) => {
+  const {
+    label,
+    size = 'medium',
+    labelPlacement = 'end',
+    disabled = false,
+    error = false,
+    helperText,
+    bordered = false,
+    borderRadius = 10,
+    defaultChecked,
+    preset,
+    sx,
+    ...rest
+  } = props as ControlledSwitchProps & {
+    control?: Control<any>;
+    validation?: RegisterOptions;
+  };
+
+  const theme = useTheme();
+  const presetSx = resolvePreset('Switch', preset, theme);
+
+  // Construye el sx con el estado de error efectivo; se llama por rama
+  // (RHF usa el error del Controller, controlado usa el prop `error`).
+  const buildSx = (effectiveError: boolean) => [
+    buildSwitchSx({
+      bordered,
+      borderRadius,
+      hasLabel: !!label,
+      error: effectiveError,
+    }),
+    ...(presetSx ? [presetSx] : []),
+    ...(Array.isArray(sx) ? sx : [sx]),
+  ];
+
+  const renderSwitch = (
+    checked: boolean,
+    onChange: (next: boolean) => void,
+    onBlur?: () => void,
+    inputRef?: React.Ref<HTMLInputElement>,
+  ) => {
+    const switchEl = (
+      <MuiSwitch
+        {...rest}
+        size={size}
+        checked={!!checked}
+        onChange={(_e, next) => onChange(next)}
+        onBlur={onBlur}
+        inputRef={inputRef}
+        disabled={disabled}
+      />
+    );
+
+    return label ? (
+      <FormControlLabel
+        control={switchEl}
+        label={label}
+        labelPlacement={labelPlacement}
+        disabled={disabled}
+      />
+    ) : (
+      switchEl
+    );
+  };
+
+  // ── RHF mode ──────────────────────────────────────────────────────────
+  if ('control' in props && props.control) {
+    const { name, control, validation } = props as RHFSwitchProps;
+    return (
+      <Controller
+        name={name}
+        control={control}
+        rules={validation}
+        defaultValue={defaultChecked}
+        render={({ field, fieldState: { error: fieldError } }) => {
+          const finalError = !!fieldError || error;
+          const finalHelperText = fieldError?.message ?? helperText;
+          return (
+            <FormControl
+              error={finalError}
+              disabled={disabled}
+              sx={buildSx(finalError)}
+            >
+              {renderSwitch(
+                !!field.value,
+                (next) => field.onChange(next),
+                field.onBlur,
+                field.ref,
+              )}
+              {finalHelperText && <FormHelperText>{finalHelperText}</FormHelperText>}
+            </FormControl>
+          );
+        }}
+      />
+    );
+  }
+
+  // ── Controlled mode ───────────────────────────────────────────────────
+  const { checked, onChange } = props as ControlledSwitchProps;
+  return (
+    <FormControl error={error} disabled={disabled} sx={buildSx(error)}>
+      {renderSwitch(checked, onChange)}
+      {helperText && <FormHelperText>{helperText}</FormHelperText>}
+    </FormControl>
+  );
+};
+
+export default Switch;

package/src/components/Switch/Switch.types.ts

@@ -0,0 +1,10 @@
+// Re-export barrel para compatibilidad con imports antiguos.
+// Los tipos viven dentro de Switch.tsx.
+export type {
+  SwitchSize,
+  SwitchLabelPlacement,
+  BaseSwitchProps,
+  RHFSwitchProps,
+  ControlledSwitchProps,
+  SwitchProps,
+} from './Switch';

package/src/components/Switch/index.ts

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

package/src/mui.ts

@@ -22,6 +22,16 @@ export {
 // ── Tipografía ────────────────────────────────────────────────────────────
 export { Typography, Link } from '@mui/material';
 
+// ── Listas ────────────────────────────────────────────────────────────────
+export {
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  ListSubheader,
+} from '@mui/material';
+
 // ── Feedback / misc ───────────────────────────────────────────────────────
 export {
   CircularProgress,

package/src/theme/componentStyles.ts

@@ -14,7 +14,9 @@ export type LibraryComponentName =
   | 'Drawer'
   | 'AppBar'
   | 'Card'
-  | 'ScrollTopButton';
+  | 'ScrollTopButton'
+  | 'RadioGroup'
+  | 'Switch';
 
 /**
  * Un estilo de preset. Puede ser un objeto sx directo o una función del theme

package/storybook-static/assets/AccountCircle-BDZFsbTw.js

@@ -0,0 +1 @@
+import{j as c}from"./jsx-runtime-D_zvdyIk.js";import{c as o}from"./createSvgIcon-D_Gca4vA.js";const r=o(c.jsx("path",{d:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 4c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6m0 14c-2.03 0-4.43-.82-6.14-2.88C7.55 15.8 9.68 15 12 15s4.45.8 6.14 2.12C16.43 19.18 14.03 20 12 20"}));export{r as A};

package/storybook-static/assets/ActionMenu-EynP8yU1.js

@@ -0,0 +1,19 @@
+import{j as t}from"./jsx-runtime-D_zvdyIk.js";import{c as j}from"./createSvgIcon-D_Gca4vA.js";import{r as M,R as i}from"./iframe-BAJnc_4n.js";import{M as T}from"./MoreVert-BoIVG4gh.js";import{T as z}from"./Tooltip-DbnHUxNj.js";import{I as k}from"./IconButton-9OYSTH58.js";import{M as E}from"./Menu-ClzfjLc3.js";import{M as q}from"./MenuItem-iU6tAqJI.js";import{L as A}from"./ListItemIcon-hca6xN79.js";import{L as C}from"./ListItemText-BFLAwLdl.js";import{D as w}from"./Divider-BbCj9wT4.js";const F=j(t.jsx("path",{d:"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75z"}));function D({items:h,trigger:r,triggerTooltip:s="Acciones",anchorOrigin:f={vertical:"bottom",horizontal:"right"},transformOrigin:g={vertical:"top",horizontal:"right"},menuSx:v,disabled:o=!1,className:b}){const[c,m]=M.useState(null),x=!!c,l=e=>{o||(e.stopPropagation(),m(e.currentTarget))},u=()=>m(null),y=(e,n)=>{e.stopPropagation(),n.onClick?.(e),u()},I=r?i.isValidElement(r)?i.cloneElement(r,{onClick:l,disabled:o}):t.jsx("span",{onClick:l,children:r}):t.jsx(z,{title:s,arrow:!0,children:t.jsx("span",{children:t.jsx(k,{size:"small",onClick:l,disabled:o,"aria-label":s,children:t.jsx(T,{fontSize:"small"})})})});return t.jsxs("span",{className:b,children:[I,t.jsx(E,{anchorEl:c,open:x,onClose:u,anchorOrigin:f,transformOrigin:g,slotProps:{paper:{sx:{minWidth:180,...v}}},children:h.map((e,n)=>{const p=e.key??`${String(e.label)}-${n}`,d=t.jsxs(q,{disabled:e.disabled,onClick:a=>y(a,e),sx:a=>({color:e.danger?a.palette.error.main:"inherit","& .MuiListItemIcon-root":{color:e.danger?a.palette.error.main:"inherit",minWidth:32}}),children:[e.icon&&t.jsx(A,{children:e.icon}),t.jsx(C,{primary:e.label})]},p);return e.dividerBefore&&n>0?t.jsxs(i.Fragment,{children:[t.jsx(w,{}),d]},`${p}-frag`):d})})]})}D.__docgenInfo={description:`Menú de acciones compacto, pensado para celdas de tabla y cabeceras.
+Reemplaza los patrones \`<Dropdown>\` de react-bootstrap.
+
+\`\`\`tsx
+<ActionMenu
+  items={[
+    { label: 'Editar', icon: <EditIcon />, onClick: handleEdit },
+    { label: 'Duplicar', icon: <CopyIcon />, onClick: handleDup },
+    { label: 'Eliminar', icon: <TrashIcon />, onClick: handleDel, danger: true, dividerBefore: true },
+  ]}
+/>
+\`\`\``,methods:[],displayName:"ActionMenu",props:{items:{required:!0,tsType:{name:"Array",elements:[{name:"ActionMenuItem"}],raw:"ActionMenuItem[]"},description:"Lista de items del menú."},trigger:{required:!1,tsType:{name:"ReactNode"},description:`Elemento trigger. Si no se provee, se renderiza un IconButton con icono
+de tres puntos (MoreVertIcon) — el patrón típico de celda de tabla.`},triggerTooltip:{required:!1,tsType:{name:"string"},description:'Texto de tooltip sobre el trigger default. Default: "Acciones".',defaultValue:{value:"'Acciones'",computed:!1}},anchorOrigin:{required:!1,tsType:{name:"signature",type:"object",raw:`{
+  vertical: 'top' | 'center' | 'bottom';
+  horizontal: 'left' | 'center' | 'right';
+}`,signature:{properties:[{key:"vertical",value:{name:"union",raw:"'top' | 'center' | 'bottom'",elements:[{name:"literal",value:"'top'"},{name:"literal",value:"'center'"},{name:"literal",value:"'bottom'"}],required:!0}},{key:"horizontal",value:{name:"union",raw:"'left' | 'center' | 'right'",elements:[{name:"literal",value:"'left'"},{name:"literal",value:"'center'"},{name:"literal",value:"'right'"}],required:!0}}]}},description:"Anchor origin del menu. Default: { vertical: 'bottom', horizontal: 'right' }.",defaultValue:{value:"{ vertical: 'bottom', horizontal: 'right' }",computed:!1}},transformOrigin:{required:!1,tsType:{name:"signature",type:"object",raw:`{
+  vertical: 'top' | 'center' | 'bottom';
+  horizontal: 'left' | 'center' | 'right';
+}`,signature:{properties:[{key:"vertical",value:{name:"union",raw:"'top' | 'center' | 'bottom'",elements:[{name:"literal",value:"'top'"},{name:"literal",value:"'center'"},{name:"literal",value:"'bottom'"}],required:!0}},{key:"horizontal",value:{name:"union",raw:"'left' | 'center' | 'right'",elements:[{name:"literal",value:"'left'"},{name:"literal",value:"'center'"},{name:"literal",value:"'right'"}],required:!0}}]}},description:"Transform origin del menu. Default: { vertical: 'top', horizontal: 'right' }.",defaultValue:{value:"{ vertical: 'top', horizontal: 'right' }",computed:!1}},menuSx:{required:!1,tsType:{name:"SxProps",elements:[{name:"Theme"}],raw:"SxProps<Theme>"},description:"sx del Menu (Paper interno)."},disabled:{required:!1,tsType:{name:"boolean"},description:"Deshabilita el trigger entero.",defaultValue:{value:"false",computed:!1}},className:{required:!1,tsType:{name:"string"},description:""}}};export{D as A,F as E};

package/storybook-static/assets/ActionMenu.stories-DqSqRGix.js

@@ -0,0 +1,185 @@
+import{j as e}from"./jsx-runtime-D_zvdyIk.js";import{f as o}from"./index-B1tlhOpe.js";import{A as C,E as r}from"./ActionMenu-EynP8yU1.js";import{C as u}from"./ContentCopy-BfLTDb10.js";import{D as m}from"./Delete-D2SMMmIA.js";import{c as p}from"./createSvgIcon-D_Gca4vA.js";import{B as x}from"./Button-DBpqmVB_.js";import{P as h}from"./Paper-SwQBhqI7.js";import{T as j,a as z,b,c as i,d as S}from"./TableRow-CS88-1HF.js";import{C as E}from"./Chip-C3vKPpzR.js";import"./iframe-BAJnc_4n.js";import"./preload-helper-PPVm8Dsz.js";import"./MoreVert-BoIVG4gh.js";import"./Tooltip-DbnHUxNj.js";import"./DefaultPropsProvider-BGoQxtDa.js";import"./useSlotProps-C0uMfuBt.js";import"./useSlot-b6pXgp5_.js";import"./useForkRef-0ANIrxcF.js";import"./useTheme-BmOJK7ra.js";import"./extendSxProp-CEpa30hT.js";import"./useTimeout-DNjRaOWc.js";import"./useControlled-DsVh1a5j.js";import"./useId-b4fZxjOL.js";import"./getReactElementRef-BQ3ANZdy.js";import"./index-CY7j4a7o.js";import"./index-BF3FAXTk.js";import"./Grow-8y4FglGK.js";import"./Popper-CnCTYXxy.js";import"./ownerDocument-DW-IO8s5.js";import"./Portal-Cj8XF9Lf.js";import"./isFocusVisible-B8k4qzLc.js";import"./IconButton-9OYSTH58.js";import"./createSimplePaletteValueFilter-bm0fmN_7.js";import"./ButtonBase-qyaMEhe4.js";import"./emotion-react.browser.esm--g-C9cX9.js";import"./CircularProgress-DC7ZNWwl.js";import"./Menu-ClzfjLc3.js";import"./ownerWindow-HkKU3E4x.js";import"./debounce-Be36O1Ab.js";import"./mergeSlotProps-B0UBKBMe.js";import"./Modal-3okp9H2i.js";import"./Fade-Ll96CvH8.js";import"./MenuItem-iU6tAqJI.js";import"./listItemTextClasses-CC_rwJam.js";import"./ListItemIcon-hca6xN79.js";import"./ListItemText-BFLAwLdl.js";import"./Typography-BgntX2Ep.js";import"./Divider-BbCj9wT4.js";const f=p(e.jsx("path",{d:"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5M12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5m0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3"})),I=p(e.jsx("path",{d:"M5 20h14v-2H5zM19 9h-4V3H9v6H5l7 7z"})),k=p(e.jsx("path",{d:"M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92-1.31-2.92-2.92-2.92"})),T=p(e.jsx("path",{d:"M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"})),ze={title:"Components/ActionMenu",component:C,tags:["autodocs"],parameters:{docs:{description:{component:"Menú de acciones compacto pensado para celdas de tabla, cabeceras y cualquier lugar donde hagan falta acciones secundarias detrás de un trigger. Reemplaza los patrones `<Dropdown>` de react-bootstrap."}}}},t={args:{items:[{label:"Editar",icon:e.jsx(r,{fontSize:"small"}),onClick:o()},{label:"Duplicar",icon:e.jsx(u,{fontSize:"small"}),onClick:o()},{label:"Ver detalle",icon:e.jsx(f,{fontSize:"small"}),onClick:o()}]},parameters:{docs:{description:{story:"Menú básico con trigger de 3 puntos (icono por defecto). Cada item tiene label + icono + onClick."}}}},l={args:{items:[{label:"Editar",icon:e.jsx(r,{fontSize:"small"}),onClick:o()},{label:"Duplicar",icon:e.jsx(u,{fontSize:"small"}),onClick:o()},{label:"Eliminar",icon:e.jsx(m,{fontSize:"small"}),onClick:o(),danger:!0,dividerBefore:!0}]},parameters:{docs:{description:{story:"Item final marcado como `danger` (pintado en rojo) con `dividerBefore: true` para separarlo visualmente del resto. Patrón típico para acciones destructivas."}}}},n={args:{items:[{label:"Editar",icon:e.jsx(r,{fontSize:"small"}),onClick:o()},{label:"Exportar",icon:e.jsx(I,{fontSize:"small"}),onClick:o(),disabled:!0},{label:"Compartir",icon:e.jsx(k,{fontSize:"small"}),onClick:o(),disabled:!0}]},parameters:{docs:{description:{story:"Items deshabilitados condicionalmente — útil cuando una acción no aplica al estado actual del row (ej. exportar un recurso que aún no se procesó)."}}}},s={args:{items:[{label:"Editar",icon:e.jsx(r,{fontSize:"small"}),onClick:o()},{label:"Duplicar",icon:e.jsx(u,{fontSize:"small"}),onClick:o()},{label:"Eliminar",icon:e.jsx(m,{fontSize:"small"}),onClick:o(),danger:!0}],trigger:e.jsx(x,{variant:"outlined",startIcon:e.jsx(T,{}),children:"Más"})},parameters:{docs:{description:{story:"El trigger por defecto es un IconButton de 3 puntos, pero podés pasar cualquier nodo (botón, chip, icono custom). El `onClick` del menú se inyecta automáticamente al trigger clonado."}}}},c={render:()=>{const g=[{id:1,name:"Comercio A",status:"Activo"},{id:2,name:"Comercio B",status:"Pendiente"},{id:3,name:"Comercio C",status:"Suspendido"}];return e.jsx(h,{sx:{maxWidth:720},children:e.jsxs(j,{size:"small",children:[e.jsx(z,{children:e.jsxs(b,{children:[e.jsx(i,{children:"ID"}),e.jsx(i,{children:"Comercio"}),e.jsx(i,{children:"Estado"}),e.jsx(i,{align:"right",children:"Acciones"})]})}),e.jsx(S,{children:g.map(a=>e.jsxs(b,{hover:!0,children:[e.jsx(i,{children:a.id}),e.jsx(i,{children:a.name}),e.jsx(i,{children:e.jsx(E,{label:a.status,size:"small",color:a.status==="Activo"?"success":a.status==="Pendiente"?"warning":"error"})}),e.jsx(i,{align:"right",children:e.jsx(C,{items:[{label:"Ver detalle",icon:e.jsx(f,{fontSize:"small"}),onClick:o(()=>console.log("Ver",a.id))},{label:"Editar",icon:e.jsx(r,{fontSize:"small"}),onClick:o(()=>console.log("Editar",a.id))},{label:"Eliminar",icon:e.jsx(m,{fontSize:"small"}),onClick:o(()=>console.log("Eliminar",a.id)),danger:!0,dividerBefore:!0}]})})]},a.id))})]})})},parameters:{docs:{description:{story:"Caso de uso principal: un `ActionMenu` por cada fila de una tabla. Reemplaza exactamente el patrón `DropDownActions` + `react-bootstrap Dropdown` usado hoy en Afiliaciones."}}}},d={args:{disabled:!0,items:[{label:"Editar",icon:e.jsx(r,{fontSize:"small"}),onClick:o()},{label:"Eliminar",icon:e.jsx(m,{fontSize:"small"}),onClick:o(),danger:!0}]},parameters:{docs:{description:{story:"Cuando el row o la acción no tiene permisos, se puede deshabilitar el trigger entero pasando `disabled`."}}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
+  args: {
+    items: [{
+      label: 'Editar',
+      icon: <EditIcon fontSize="small" />,
+      onClick: fn()
+    }, {
+      label: 'Duplicar',
+      icon: <ContentCopyIcon fontSize="small" />,
+      onClick: fn()
+    }, {
+      label: 'Ver detalle',
+      icon: <VisibilityIcon fontSize="small" />,
+      onClick: fn()
+    }]
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Menú básico con trigger de 3 puntos (icono por defecto). Cada item tiene label + icono + onClick.'
+      }
+    }
+  }
+}`,...t.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+  args: {
+    items: [{
+      label: 'Editar',
+      icon: <EditIcon fontSize="small" />,
+      onClick: fn()
+    }, {
+      label: 'Duplicar',
+      icon: <ContentCopyIcon fontSize="small" />,
+      onClick: fn()
+    }, {
+      label: 'Eliminar',
+      icon: <DeleteIcon fontSize="small" />,
+      onClick: fn(),
+      danger: true,
+      dividerBefore: true
+    }]
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Item final marcado como \`danger\` (pintado en rojo) con \`dividerBefore: true\` para separarlo visualmente del resto. Patrón típico para acciones destructivas.'
+      }
+    }
+  }
+}`,...l.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
+  args: {
+    items: [{
+      label: 'Editar',
+      icon: <EditIcon fontSize="small" />,
+      onClick: fn()
+    }, {
+      label: 'Exportar',
+      icon: <DownloadIcon fontSize="small" />,
+      onClick: fn(),
+      disabled: true
+    }, {
+      label: 'Compartir',
+      icon: <ShareIcon fontSize="small" />,
+      onClick: fn(),
+      disabled: true
+    }]
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Items deshabilitados condicionalmente — útil cuando una acción no aplica al estado actual del row (ej. exportar un recurso que aún no se procesó).'
+      }
+    }
+  }
+}`,...n.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+  args: {
+    items: [{
+      label: 'Editar',
+      icon: <EditIcon fontSize="small" />,
+      onClick: fn()
+    }, {
+      label: 'Duplicar',
+      icon: <ContentCopyIcon fontSize="small" />,
+      onClick: fn()
+    }, {
+      label: 'Eliminar',
+      icon: <DeleteIcon fontSize="small" />,
+      onClick: fn(),
+      danger: true
+    }],
+    trigger: <Button variant="outlined" startIcon={<MoreHorizIcon />}>
+        Más
+      </Button>
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'El trigger por defecto es un IconButton de 3 puntos, pero podés pasar cualquier nodo (botón, chip, icono custom). El \`onClick\` del menú se inyecta automáticamente al trigger clonado.'
+      }
+    }
+  }
+}`,...s.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const rows = [{
+      id: 1,
+      name: 'Comercio A',
+      status: 'Activo'
+    }, {
+      id: 2,
+      name: 'Comercio B',
+      status: 'Pendiente'
+    }, {
+      id: 3,
+      name: 'Comercio C',
+      status: 'Suspendido'
+    }];
+    return <Paper sx={{
+      maxWidth: 720
+    }}>
+        <Table size="small">
+          <TableHead>
+            <TableRow>
+              <TableCell>ID</TableCell>
+              <TableCell>Comercio</TableCell>
+              <TableCell>Estado</TableCell>
+              <TableCell align="right">Acciones</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {rows.map(row => <TableRow key={row.id} hover>
+                <TableCell>{row.id}</TableCell>
+                <TableCell>{row.name}</TableCell>
+                <TableCell>
+                  <Chip label={row.status} size="small" color={row.status === 'Activo' ? 'success' : row.status === 'Pendiente' ? 'warning' : 'error'} />
+                </TableCell>
+                <TableCell align="right">
+                  <ActionMenu items={[{
+                label: 'Ver detalle',
+                icon: <VisibilityIcon fontSize="small" />,
+                onClick: fn(() => console.log('Ver', row.id))
+              }, {
+                label: 'Editar',
+                icon: <EditIcon fontSize="small" />,
+                onClick: fn(() => console.log('Editar', row.id))
+              }, {
+                label: 'Eliminar',
+                icon: <DeleteIcon fontSize="small" />,
+                onClick: fn(() => console.log('Eliminar', row.id)),
+                danger: true,
+                dividerBefore: true
+              }]} />
+                </TableCell>
+              </TableRow>)}
+          </TableBody>
+        </Table>
+      </Paper>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Caso de uso principal: un \`ActionMenu\` por cada fila de una tabla. Reemplaza exactamente el patrón \`DropDownActions\` + \`react-bootstrap Dropdown\` usado hoy en Afiliaciones.'
+      }
+    }
+  }
+}`,...c.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+  args: {
+    disabled: true,
+    items: [{
+      label: 'Editar',
+      icon: <EditIcon fontSize="small" />,
+      onClick: fn()
+    }, {
+      label: 'Eliminar',
+      icon: <DeleteIcon fontSize="small" />,
+      onClick: fn(),
+      danger: true
+    }]
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Cuando el row o la acción no tiene permisos, se puede deshabilitar el trigger entero pasando \`disabled\`.'
+      }
+    }
+  }
+}`,...d.parameters?.docs?.source}}};const Se=["Default","WithDangerItem","WithDisabledItems","CustomTrigger","InsideTableCell","DisabledTrigger"];export{s as CustomTrigger,t as Default,d as DisabledTrigger,c as InsideTableCell,l as WithDangerItem,n as WithDisabledItems,Se as __namedExportsOrder,ze as default};

package/storybook-static/assets/Alert-3zvTPc0p.js

@@ -0,0 +1 @@
+import{r as V}from"./iframe-BAJnc_4n.js";import{a as Z,g as D,u as q,s as d,c as G,b as v,d as J,m as K}from"./DefaultPropsProvider-BGoQxtDa.js";import{u as n}from"./useSlot-b6pXgp5_.js";import{c as f}from"./createSimplePaletteValueFilter-bm0fmN_7.js";import{c as u}from"./createSvgIcon-D_Gca4vA.js";import{j as e}from"./jsx-runtime-D_zvdyIk.js";import{C as Q}from"./Close-Cy8nELYU.js";import{I as X}from"./IconButton-9OYSTH58.js";import{P as Y}from"./Paper-SwQBhqI7.js";function _(o){return D("MuiAlert",o)}const M=Z("MuiAlert",["root","action","icon","message","filled","colorSuccess","colorInfo","colorWarning","colorError","filledSuccess","filledInfo","filledWarning","filledError","outlined","outlinedSuccess","outlinedInfo","outlinedWarning","outlinedError","standard","standardSuccess","standardInfo","standardWarning","standardError"]),oo=u(e.jsx("path",{d:"M20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4C12.76,4 13.5,4.11 14.2, 4.31L15.77,2.74C14.61,2.26 13.34,2 12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0, 0 22,12M7.91,10.08L6.5,11.5L11,16L21,6L19.59,4.58L11,13.17L7.91,10.08Z"})),to=u(e.jsx("path",{d:"M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"})),eo=u(e.jsx("path",{d:"M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"})),so=u(e.jsx("path",{d:"M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20, 12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10, 10 0 0,0 12,2M11,17H13V11H11V17Z"})),ro=o=>{const{variant:s,color:r,severity:t,classes:i}=o,g={root:["root",`color${v(r||t)}`,`${s}${v(r||t)}`,`${s}`],icon:["icon"],message:["message"],action:["action"]};return J(g,_,i)},lo=d(Y,{name:"MuiAlert",slot:"Root",overridesResolver:(o,s)=>{const{ownerState:r}=o;return[s.root,s[r.variant],s[`${r.variant}${v(r.color||r.severity)}`]]}})(K(({theme:o})=>{const s=o.palette.mode==="light"?o.darken:o.lighten,r=o.palette.mode==="light"?o.lighten:o.darken;return{...o.typography.body2,backgroundColor:"transparent",display:"flex",padding:"6px 16px",variants:[...Object.entries(o.palette).filter(f(["light"])).map(([t])=>({props:{colorSeverity:t,variant:"standard"},style:{color:o.vars?o.vars.palette.Alert[`${t}Color`]:s(o.palette[t].light,.6),backgroundColor:o.vars?o.vars.palette.Alert[`${t}StandardBg`]:r(o.palette[t].light,.9),[`& .${M.icon}`]:o.vars?{color:o.vars.palette.Alert[`${t}IconColor`]}:{color:o.palette[t].main}}})),...Object.entries(o.palette).filter(f(["light"])).map(([t])=>({props:{colorSeverity:t,variant:"outlined"},style:{color:o.vars?o.vars.palette.Alert[`${t}Color`]:s(o.palette[t].light,.6),border:`1px solid ${(o.vars||o).palette[t].light}`,[`& .${M.icon}`]:o.vars?{color:o.vars.palette.Alert[`${t}IconColor`]}:{color:o.palette[t].main}}})),...Object.entries(o.palette).filter(f(["dark"])).map(([t])=>({props:{colorSeverity:t,variant:"filled"},style:{fontWeight:o.typography.fontWeightMedium,...o.vars?{color:o.vars.palette.Alert[`${t}FilledColor`],backgroundColor:o.vars.palette.Alert[`${t}FilledBg`]}:{backgroundColor:o.palette.mode==="dark"?o.palette[t].dark:o.palette[t].main,color:o.palette.getContrastText(o.palette[t].main)}}}))]}})),ao=d("div",{name:"MuiAlert",slot:"Icon"})({marginRight:12,padding:"7px 0",display:"flex",fontSize:22,opacity:.9}),no=d("div",{name:"MuiAlert",slot:"Message"})({padding:"8px 0",minWidth:0,overflow:"auto"}),io=d("div",{name:"MuiAlert",slot:"Action"})({display:"flex",alignItems:"flex-start",padding:"4px 0 0 16px",marginLeft:"auto",marginRight:-8}),j={success:e.jsx(oo,{fontSize:"inherit"}),warning:e.jsx(to,{fontSize:"inherit"}),error:e.jsx(eo,{fontSize:"inherit"}),info:e.jsx(so,{fontSize:"inherit"})},Ao=V.forwardRef(function(s,r){const t=q({props:s,name:"MuiAlert"}),{action:i,children:g,className:P,closeText:m="Close",color:C,components:x={},componentsProps:$={},icon:A,iconMapping:z=j,onClose:S,role:b="alert",severity:c="success",slotProps:L={},slots:k={},variant:h="standard",...B}=t,l={...t,color:C,severity:c,variant:h,colorSeverity:C||c},p=ro(l),a={slots:{closeButton:x.CloseButton,closeIcon:x.CloseIcon,...k},slotProps:{...$,...L}},[R,T]=n("root",{ref:r,shouldForwardComponentProp:!0,className:G(p.root,P),elementType:lo,externalForwardedProps:{...a,...B},ownerState:l,additionalProps:{role:b,elevation:0}}),[w,E]=n("icon",{className:p.icon,elementType:ao,externalForwardedProps:a,ownerState:l}),[O,W]=n("message",{className:p.message,elementType:no,externalForwardedProps:a,ownerState:l}),[y,I]=n("action",{className:p.action,elementType:io,externalForwardedProps:a,ownerState:l}),[F,H]=n("closeButton",{elementType:X,externalForwardedProps:a,ownerState:l}),[N,U]=n("closeIcon",{elementType:Q,externalForwardedProps:a,ownerState:l});return e.jsxs(R,{...T,children:[A!==!1?e.jsx(w,{...E,children:A||z[c]||j[c]}):null,e.jsx(O,{...W,children:g}),i!=null?e.jsx(y,{...I,children:i}):null,i==null&&S?e.jsx(y,{...I,children:e.jsx(F,{size:"small","aria-label":m,title:m,color:"inherit",onClick:S,...H,children:e.jsx(N,{fontSize:"small",...U})})}):null]})});export{Ao as A};