@soyfri/shared-library 2.0.0-beta.9 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Button-C17mExpd.cjs.map +1 -1
- package/Button-UkkP-bNw.js.map +1 -1
- package/README.md +182 -150
- package/components/ActionMenu/ActionMenu.cjs +52 -52
- package/components/ActionMenu/ActionMenu.cjs.map +1 -1
- package/components/ActionMenu/ActionMenu.d.ts +20 -36
- package/components/ActionMenu/ActionMenu.js +55 -55
- package/components/ActionMenu/ActionMenu.js.map +1 -1
- package/components/ActionMenu/index.d.ts +2 -2
- package/components/AppBar/AppBar.cjs +2 -219
- package/components/AppBar/AppBar.cjs.map +1 -1
- package/components/AppBar/AppBar.d.ts +6 -6
- package/components/AppBar/AppBar.js +5 -222
- package/components/AppBar/AppBar.js.map +1 -1
- package/components/AppBar/index.d.ts +0 -6
- package/components/Autocomplete/Autocomplete.cjs +93 -94
- package/components/Autocomplete/Autocomplete.cjs.map +1 -1
- package/components/Autocomplete/Autocomplete.d.ts +29 -26
- package/components/Autocomplete/Autocomplete.definitions.d.ts +2 -1
- package/components/Autocomplete/Autocomplete.helpers.d.ts +12 -8
- package/components/Autocomplete/Autocomplete.js +94 -95
- package/components/Autocomplete/Autocomplete.js.map +1 -1
- package/components/Autocomplete/_parts/AutocompleteChips.d.ts +7 -6
- package/components/Autocomplete/_parts/AutocompleteOption.d.ts +10 -13
- package/components/Autocomplete/index.d.ts +1 -1
- package/components/Avatar/Avatar.cjs +17 -18
- package/components/Avatar/Avatar.cjs.map +1 -1
- package/components/Avatar/Avatar.js +17 -18
- package/components/Avatar/Avatar.js.map +1 -1
- package/components/Avatar/index.d.ts +1 -0
- package/components/Button/Button.d.ts +5 -5
- package/components/Button/index.d.ts +1 -0
- package/components/Card/Card.cjs +3 -92
- package/components/Card/Card.cjs.map +1 -1
- package/components/Card/Card.d.ts +3 -50
- package/components/Card/Card.js +5 -94
- package/components/Card/Card.js.map +1 -1
- package/components/Card/Card.sx.d.ts +3 -6
- package/components/Card/index.d.ts +1 -1
- package/components/Checkbox/Checkbox.cjs +189 -0
- package/components/Checkbox/Checkbox.cjs.map +1 -0
- package/components/Checkbox/Checkbox.d.ts +55 -0
- package/components/Checkbox/Checkbox.js +189 -0
- package/components/Checkbox/Checkbox.js.map +1 -0
- package/components/Checkbox/Checkbox.sx.d.ts +13 -0
- package/components/Checkbox/index.d.ts +2 -0
- package/components/Checkbox.d.ts +6 -0
- package/components/Chip/Chip.cjs +2 -1
- package/components/Chip/Chip.cjs.map +1 -1
- package/components/Chip/Chip.js +2 -1
- package/components/Chip/Chip.js.map +1 -1
- package/components/Chip/index.d.ts +2 -1
- package/components/Chip.d.ts +4 -0
- package/components/DatePicker/DatePicker.cjs +40 -63
- package/components/DatePicker/DatePicker.cjs.map +1 -1
- package/components/DatePicker/DatePicker.d.ts +1 -13
- package/components/DatePicker/DatePicker.js +36 -59
- package/components/DatePicker/DatePicker.js.map +1 -1
- package/components/DatePicker/index.d.ts +1 -1
- package/components/DateTimePicker/DateTimePicker.cjs +58 -82
- package/components/DateTimePicker/DateTimePicker.cjs.map +1 -1
- package/components/DateTimePicker/DateTimePicker.d.ts +9 -17
- package/components/DateTimePicker/DateTimePicker.definitions.d.ts +2 -0
- package/components/DateTimePicker/DateTimePicker.helpers.d.ts +4 -2
- package/components/DateTimePicker/DateTimePicker.js +54 -78
- package/components/DateTimePicker/DateTimePicker.js.map +1 -1
- package/components/DateTimePicker/index.d.ts +1 -1
- package/components/Drawer/Drawer.cjs +12 -6
- package/components/Drawer/Drawer.cjs.map +1 -1
- package/components/Drawer/Drawer.d.ts +3 -1
- package/components/Drawer/Drawer.js +13 -7
- package/components/Drawer/Drawer.js.map +1 -1
- package/components/Drawer/DrawerItem.d.ts +6 -1
- package/components/Gallery/Gallery.cjs +154 -79
- package/components/Gallery/Gallery.cjs.map +1 -1
- package/components/Gallery/Gallery.d.ts +25 -9
- package/components/Gallery/Gallery.js +154 -79
- package/components/Gallery/Gallery.js.map +1 -1
- package/components/Gallery/GalleryLightbox.d.ts +6 -10
- package/components/Gallery/GalleryMain.d.ts +3 -7
- package/components/Gallery/GalleryThumbnails.d.ts +7 -11
- package/components/Gallery/index.d.ts +2 -1
- package/components/Gallery.d.ts +4 -0
- package/components/Icon/Icon.cjs +6 -8
- package/components/Icon/Icon.cjs.map +1 -1
- package/components/Icon/Icon.d.ts +11 -17
- package/components/Icon/Icon.js +6 -8
- package/components/Icon/Icon.js.map +1 -1
- package/components/Icon/index.d.ts +2 -1
- package/components/Icon.d.ts +4 -0
- package/components/Input/Input.cjs +26 -13
- package/components/Input/Input.cjs.map +1 -1
- package/components/Input/Input.d.ts +9 -2
- package/components/Input/Input.helpers.d.ts +3 -3
- package/components/Input/Input.js +23 -10
- package/components/Input/Input.js.map +1 -1
- package/components/Input/index.d.ts +1 -1
- package/components/InputGroup/InputGroup.cjs +23 -22
- package/components/InputGroup/InputGroup.cjs.map +1 -1
- package/components/InputGroup/InputGroup.d.ts +4 -4
- package/components/InputGroup/InputGroup.js +22 -21
- package/components/InputGroup/InputGroup.js.map +1 -1
- package/components/InputGroup/index.d.ts +2 -1
- package/components/InputGroup.d.ts +4 -0
- package/components/Modal/Modal.cjs +127 -98
- package/components/Modal/Modal.cjs.map +1 -1
- package/components/Modal/Modal.d.ts +20 -5
- package/components/Modal/Modal.js +130 -101
- package/components/Modal/Modal.js.map +1 -1
- package/components/Modal/ModalBody.d.ts +6 -1
- package/components/Modal/ModalFooter.d.ts +4 -4
- package/components/Modal/ModalHeader.d.ts +6 -1
- package/components/Modal/index.d.ts +4 -2
- package/components/Modal.d.ts +4 -0
- package/components/RadioGroup/RadioGroup.cjs +9 -7
- package/components/RadioGroup/RadioGroup.cjs.map +1 -1
- package/components/RadioGroup/RadioGroup.d.ts +9 -3
- package/components/RadioGroup/RadioGroup.js +9 -7
- package/components/RadioGroup/RadioGroup.js.map +1 -1
- package/components/RadioGroup/index.d.ts +1 -1
- package/components/Select/Select.cjs +129 -264
- package/components/Select/Select.cjs.map +1 -1
- package/components/Select/Select.d.ts +35 -20
- package/components/Select/Select.helpers.d.ts +6 -19
- package/components/Select/Select.js +134 -269
- package/components/Select/Select.js.map +1 -1
- package/components/Select/index.d.ts +1 -1
- package/components/Stat/Stat.cjs +2 -2
- package/components/Stat/Stat.cjs.map +1 -1
- package/components/Stat/Stat.js +2 -2
- package/components/Stat/Stat.js.map +1 -1
- package/components/Stat/index.d.ts +2 -1
- package/components/Stat.d.ts +4 -0
- package/components/StatusMessage/StatusMessage.cjs +84 -55
- package/components/StatusMessage/StatusMessage.cjs.map +1 -1
- package/components/StatusMessage/StatusMessage.d.ts +20 -36
- package/components/StatusMessage/StatusMessage.js +86 -57
- package/components/StatusMessage/StatusMessage.js.map +1 -1
- package/components/StatusMessage/StatusMessageContext.d.ts +16 -0
- package/components/StatusMessage/index.d.ts +4 -1
- package/components/StatusMessage.d.ts +4 -0
- package/components/Stepper/Stepper.cjs +289 -55
- package/components/Stepper/Stepper.cjs.map +1 -1
- package/components/Stepper/Stepper.d.ts +9 -20
- package/components/Stepper/Stepper.js +291 -57
- package/components/Stepper/Stepper.js.map +1 -1
- package/{hooks/Wizard/WizardContext.d.ts → components/Stepper/StepperContext.d.ts} +29 -23
- package/components/Stepper/_hooks/useHorizontalScroll.d.ts +19 -0
- package/components/Stepper/_parts/StepperScrollArrow.d.ts +19 -0
- package/components/Stepper/index.d.ts +6 -2
- package/components/Stepper.d.ts +4 -0
- package/components/Switch/Switch.cjs +5 -2
- package/components/Switch/Switch.cjs.map +1 -1
- package/components/Switch/Switch.d.ts +7 -2
- package/components/Switch/Switch.js +5 -2
- package/components/Switch/Switch.js.map +1 -1
- package/components/Tabs/Tabs.cjs +45 -29
- package/components/Tabs/Tabs.cjs.map +1 -1
- package/components/Tabs/Tabs.d.ts +21 -16
- package/components/Tabs/Tabs.js +46 -30
- package/components/Tabs/Tabs.js.map +1 -1
- package/components/Tabs/index.d.ts +4 -2
- package/components/Tabs.d.ts +4 -0
- package/components/Timeline/Timeline.cjs +3 -2
- package/components/Timeline/Timeline.cjs.map +1 -1
- package/components/Timeline/Timeline.d.ts +4 -8
- package/components/Timeline/Timeline.js +3 -2
- package/components/Timeline/Timeline.js.map +1 -1
- package/components/Timeline/index.d.ts +4 -2
- package/components/Timeline.d.ts +4 -0
- package/components/_shared/mergeSx.d.ts +7 -0
- package/{formField.sx-DfVbMe0V.js → formField.sx-8_QRnKxv.js} +2 -11
- package/formField.sx-8_QRnKxv.js.map +1 -0
- package/{formField.sx-CQ1mbk9M.cjs → formField.sx-BAX7KwMR.cjs} +10 -19
- package/formField.sx-BAX7KwMR.cjs.map +1 -0
- package/index.cjs +31 -2
- package/index.cjs.map +1 -1
- package/index.d.ts +1 -0
- package/index.js +16 -2
- package/index.js.map +1 -1
- package/mergeSx-BXoNZjB_.js +10 -0
- package/mergeSx-BXoNZjB_.js.map +1 -0
- package/mergeSx-Dbccoo_H.cjs +9 -0
- package/mergeSx-Dbccoo_H.cjs.map +1 -0
- package/mui.d.ts +3 -2
- package/package.json +6 -16
- package/theme/componentStyles.d.ts +1 -1
- package/tokens-BRrcP_p_.js +21 -0
- package/tokens-BRrcP_p_.js.map +1 -0
- package/tokens-jaWWNk39.cjs +20 -0
- package/tokens-jaWWNk39.cjs.map +1 -0
- package/utils/index.d.ts +2 -0
- package/{components/ScrollTopButton → utils}/scrollToTop.d.ts +6 -7
- package/components/AppBar/AppBarBrand.d.ts +0 -31
- package/components/AppBar/AppBarUserMenu.d.ts +0 -65
- package/components/Autocomplete/Autocomplete.types.d.ts +0 -1
- package/components/DatePicker/DatePicker.types.d.ts +0 -1
- package/components/DateTimePicker/DateTimePicker.types.d.ts +0 -1
- package/components/Input/Input.types.d.ts +0 -1
- package/components/PageLoader/PageLoader.cjs +0 -61
- package/components/PageLoader/PageLoader.cjs.map +0 -1
- package/components/PageLoader/PageLoader.d.ts +0 -38
- package/components/PageLoader/PageLoader.js +0 -61
- package/components/PageLoader/PageLoader.js.map +0 -1
- package/components/PageLoader/index.d.ts +0 -2
- package/components/PageLoader.d.ts +0 -6
- package/components/RadioGroup/RadioGroup.types.d.ts +0 -1
- package/components/ScrollTopButton/ScrollTopButton.cjs +0 -79
- package/components/ScrollTopButton/ScrollTopButton.cjs.map +0 -1
- package/components/ScrollTopButton/ScrollTopButton.d.ts +0 -48
- package/components/ScrollTopButton/ScrollTopButton.js +0 -79
- package/components/ScrollTopButton/ScrollTopButton.js.map +0 -1
- package/components/ScrollTopButton/index.d.ts +0 -4
- package/components/ScrollTopButton.d.ts +0 -6
- package/components/Select/Select.definitions.d.ts +0 -17
- package/components/Select/Select.types.d.ts +0 -1
- package/components/Select/_parts/SelectSearchHeader.d.ts +0 -15
- package/components/Select/_parts/SelectValue.d.ts +0 -22
- package/formField.sx-CQ1mbk9M.cjs.map +0 -1
- package/formField.sx-DfVbMe0V.js.map +0 -1
- package/hooks/Wizard/Wizard.cjs +0 -7
- package/hooks/Wizard/Wizard.cjs.map +0 -1
- package/hooks/Wizard/Wizard.js +0 -7
- package/hooks/Wizard/Wizard.js.map +0 -1
- package/hooks/Wizard/index.d.ts +0 -3
- package/hooks/Wizard/useWizard.d.ts +0 -9
- package/hooks/Wizard.d.ts +0 -2
- package/useWizard-CWdIxZzX.cjs +0 -94
- package/useWizard-CWdIxZzX.cjs.map +0 -1
- package/useWizard-CWq--C3o.js +0 -95
- package/useWizard-CWq--C3o.js.map +0 -1
- /package/{styles.css → index.css} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.sx.ts","../../../src/components/Card/Card.tsx"],"sourcesContent":["import type { SxProps, Theme } from '@mui/material/styles';\n\nexport type CardVariant = 'elevated' | 'outlined' | 'plain';\nexport type CardPadding = 'none' | 'dense' | 'normal' | 'loose';\n\nexport interface BuildCardSxArgs {\n variant: CardVariant;\n padding: CardPadding;\n clickable: boolean;\n}\n\nconst paddingMap: Record<CardPadding, number> = {\n none: 0,\n dense: 1.5,\n normal: 2.5,\n loose: 4,\n};\n\n/**\n * Estilo base del Card (root). La props `sx` del consumer se compone encima\n * junto al preset resuelto (en Card.tsx). Este builder solo se ocupa del\n * variant + padding, para que siga siendo predecible.\n */\nexport function buildCardSx({\n variant,\n padding,\n clickable,\n}: BuildCardSxArgs): SxProps<Theme> {\n return (theme) => ({\n borderRadius: 2,\n backgroundColor: 'background.paper',\n boxShadow:\n variant === 'elevated'\n ? theme.shadows[1]\n : 'none',\n border:\n variant === 'outlined'\n ? `1px solid ${theme.palette.divider}`\n : 'none',\n transition: theme.transitions.create(\n ['box-shadow', 'transform', 'border-color'],\n { duration: theme.transitions.duration.shorter },\n ),\n cursor: clickable ? 'pointer' : 'default',\n ...(clickable && {\n '&:hover': {\n boxShadow:\n variant === 'elevated'\n ? theme.shadows[3]\n : variant === 'outlined'\n ? theme.shadows[1]\n : 'none',\n transform: variant !== 'plain' ? 'translateY(-1px)' : 'none',\n },\n '&:active': {\n transform: 'translateY(0)',\n },\n }),\n // Body padding (cuando no hay header/footer envolventes). Para el caso\n // compuesto los slots manejan su propio padding, dejamos el root en 0.\n p: paddingMap[padding],\n });\n}\n\nexport function buildCardHeaderSx(): SxProps<Theme> {\n return (theme) => ({\n display: 'flex',\n alignItems: 'center',\n gap: 1.5,\n px: 2.5,\n py: 1.75,\n borderBottom: `1px solid ${theme.palette.divider}`,\n '& .card-header-text': {\n flex: 1,\n minWidth: 0,\n },\n '& .card-header-actions': {\n display: 'flex',\n alignItems: 'center',\n gap: 0.5,\n flexShrink: 0,\n },\n });\n}\n\nexport function buildCardBodySx(padding: CardPadding): SxProps<Theme> {\n return {\n px: padding === 'none' ? 0 : padding === 'dense' ? 1.5 : padding === 'loose' ? 4 : 2.5,\n py: padding === 'none' ? 0 : padding === 'dense' ? 1.5 : padding === 'loose' ? 4 : 2.5,\n };\n}\n\nexport function buildCardFooterSx(): SxProps<Theme> {\n return (theme) => ({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-end',\n gap: 1,\n px: 2.5,\n py: 1.5,\n borderTop: `1px solid ${theme.palette.divider}`,\n backgroundColor: theme.palette.action.hover,\n });\n}\n","import React, { type ReactNode } from 'react';\nimport { Box, Card as MuiCard, Typography, useTheme } from '@mui/material';\nimport type { SxProps, Theme } from '@mui/material/styles';\n\nimport { resolvePreset } from '../_shared/resolvePreset';\nimport {\n buildCardSx,\n buildCardHeaderSx,\n buildCardBodySx,\n buildCardFooterSx,\n type CardVariant,\n type CardPadding,\n} from './Card.sx';\n\nexport interface CardProps {\n /** Contenido principal. */\n children?: ReactNode;\n /**\n * Título del Card. Si se provee, renderiza un header con separador. Puede\n * ser string o cualquier ReactNode para permitir iconos / chips.\n */\n title?: ReactNode;\n /** Texto secundario debajo del título. */\n subtitle?: ReactNode;\n /**\n * Acciones del header (botones, ActionMenu, etc). Se renderizan alineadas\n * a la derecha.\n */\n actions?: ReactNode;\n /**\n * Header totalmente custom. Si se provee, ignora `title`/`subtitle`/`actions`\n * y toma control del slot entero.\n */\n header?: ReactNode;\n /** Footer custom (botones, mensajes, etc). */\n footer?: ReactNode;\n /**\n * Variante visual.\n * - `elevated` (default): sombra sutil.\n * - `outlined`: borde sin sombra.\n * - `plain`: sin borde ni sombra, útil para layouts con nesting.\n */\n variant?: CardVariant;\n /**\n * Densidad del padding interno. Solo aplica al body cuando hay header/footer;\n * cuando no hay slots, aplica al root.\n */\n padding?: CardPadding;\n /** Si `true`, muestra feedback de hover/active (cursor, sombra). */\n clickable?: boolean;\n /**\n * Preset registrado en `theme.styles.Card`. `\"default\"` usa el estilo\n * built-in sin preset extra.\n */\n preset?: string;\n /**\n * MUI `raised` legacy — mantenido por backward-compat. Equivale a\n * `variant=\"elevated\"` con sombra mayor. Ignora `variant` si se usa.\n */\n raised?: boolean;\n /** sx del root. Se compone sobre el base + preset. */\n sx?: SxProps<Theme>;\n /** sx custom del slot body. */\n bodySx?: SxProps<Theme>;\n /** sx custom del slot header. */\n headerSx?: SxProps<Theme>;\n /** sx custom del slot footer. */\n footerSx?: SxProps<Theme>;\n onClick?: () => void;\n onBlur?: () => void;\n className?: string;\n 'data-testid'?: string;\n}\n\n/**\n * Card semántico con slots `title` / `subtitle` / `actions` / `footer`.\n * Reemplaza el patrón `<div class=\"card\"><div class=\"card-header\">...</div>...`\n * de Metronic/Bootstrap con composición declarativa.\n *\n * Backward-compat: si solo se pasa `children`, se comporta como el Card\n * original (MUI Card + body padding).\n *\n * ```tsx\n * <Card\n * title=\"Datos del cliente\"\n * subtitle=\"Última actualización: hace 2h\"\n * actions={<ActionMenu items={menuItems} />}\n * footer={<Button>Guardar</Button>}\n * >\n * <CustomerForm />\n * </Card>\n * ```\n */\nexport function Card({\n children,\n title,\n subtitle,\n actions,\n header,\n footer,\n variant,\n padding = 'normal',\n clickable = false,\n preset,\n raised,\n sx,\n bodySx,\n headerSx,\n footerSx,\n onClick,\n onBlur,\n className,\n 'data-testid': dataTestId,\n}: CardProps) {\n const theme = useTheme();\n\n // Back-compat: `raised` legacy => elevated. Si no vienen ni `raised` ni\n // `variant`, default a 'elevated'.\n const resolvedVariant: CardVariant = raised\n ? 'elevated'\n : (variant ?? 'elevated');\n\n const hasHeader = Boolean(header || title || subtitle || actions);\n const hasFooter = Boolean(footer);\n const isCompound = hasHeader || hasFooter;\n\n // Cuando hay slots, el root no lleva padding (lo llevan los slots).\n const rootPadding: CardPadding = isCompound ? 'none' : padding;\n\n const presetSx = resolvePreset('Card', preset, theme);\n\n const rootSx: SxProps<Theme> = [\n buildCardSx({\n variant: resolvedVariant,\n padding: rootPadding,\n clickable: clickable || Boolean(onClick),\n }),\n ...(presetSx ? [presetSx] : []),\n ...(Array.isArray(sx) ? sx : sx ? [sx] : []),\n ];\n\n const renderHeader = () => {\n if (header) return <Box sx={[buildCardHeaderSx(), ...(Array.isArray(headerSx) ? headerSx : headerSx ? [headerSx] : [])]}>{header}</Box>;\n if (!title && !subtitle && !actions) return null;\n return (\n <Box sx={[buildCardHeaderSx(), ...(Array.isArray(headerSx) ? headerSx : headerSx ? [headerSx] : [])]}>\n <Box className=\"card-header-text\">\n {title && (\n <Typography\n variant=\"subtitle1\"\n component=\"div\"\n sx={{ fontWeight: 600, lineHeight: 1.3 }}\n noWrap\n >\n {title}\n </Typography>\n )}\n {subtitle && (\n <Typography\n variant=\"caption\"\n color=\"text.secondary\"\n component=\"div\"\n noWrap\n >\n {subtitle}\n </Typography>\n )}\n </Box>\n {actions && <Box className=\"card-header-actions\">{actions}</Box>}\n </Box>\n );\n };\n\n return (\n <MuiCard\n sx={rootSx}\n className={className}\n data-testid={dataTestId}\n onClick={onClick}\n onBlur={onBlur}\n elevation={0} // sombra la maneja buildCardSx\n >\n {renderHeader()}\n {isCompound ? (\n <Box sx={[buildCardBodySx(padding), ...(Array.isArray(bodySx) ? bodySx : bodySx ? [bodySx] : [])]}>\n {children}\n </Box>\n ) : (\n children\n )}\n {hasFooter && (\n <Box sx={[buildCardFooterSx(), ...(Array.isArray(footerSx) ? footerSx : footerSx ? [footerSx] : [])]}>\n {footer}\n </Box>\n )}\n </MuiCard>\n );\n}\n\nexport default Card;\n"],"names":["MuiCard"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.sx.ts","../../../src/components/Card/Card.tsx"],"sourcesContent":["import type { SxProps, Theme } from '@mui/material/styles';\n\nexport type CardVariant = 'elevated' | 'outlined' | 'plain';\nexport type CardPadding = 'none' | 'dense' | 'normal' | 'loose';\n\nexport interface BuildCardSxArgs {\n variant: CardVariant;\n padding: CardPadding;\n clickable: boolean;\n}\n\nconst paddingMap: Record<CardPadding, number> = {\n none: 0,\n dense: 1.5,\n normal: 2.5,\n loose: 4,\n};\n\n/**\n * Estilo base del Card. La prop `sx` del consumer se compone encima junto al\n * preset resuelto (en Card.tsx). Este builder solo se ocupa de variant +\n * padding para que siga siendo predecible.\n */\nexport function buildCardSx({\n variant,\n padding,\n clickable,\n}: BuildCardSxArgs): SxProps<Theme> {\n return (theme) => ({\n borderRadius: 2,\n backgroundColor: 'background.paper',\n boxShadow: variant === 'elevated' ? theme.shadows[1] : 'none',\n border:\n variant === 'outlined'\n ? `1px solid ${theme.palette.divider}`\n : 'none',\n transition: theme.transitions.create(\n ['box-shadow', 'transform', 'border-color'],\n { duration: theme.transitions.duration.shorter },\n ),\n cursor: clickable ? 'pointer' : 'default',\n ...(clickable && {\n '&:hover': {\n boxShadow:\n variant === 'elevated'\n ? theme.shadows[3]\n : variant === 'outlined'\n ? theme.shadows[1]\n : 'none',\n transform: variant !== 'plain' ? 'translateY(-1px)' : 'none',\n },\n '&:active': {\n transform: 'translateY(0)',\n },\n }),\n p: paddingMap[padding],\n });\n}\n","import React, { type ReactNode } from 'react';\nimport { Card as MuiCard, useTheme } from '@mui/material';\nimport type { SxProps, Theme } from '@mui/material/styles';\n\nimport { resolvePreset } from '../_shared/resolvePreset';\nimport { buildCardSx, type CardVariant, type CardPadding } from './Card.sx';\n\nexport interface CardProps {\n /** Contenido del Card. */\n children?: ReactNode;\n /**\n * Variante visual.\n * - `elevated` (default): sombra sutil.\n * - `outlined`: borde sin sombra.\n * - `plain`: sin borde ni sombra, útil para layouts con nesting.\n */\n variant?: CardVariant;\n /** Densidad del padding interno. */\n padding?: CardPadding;\n /** Si `true`, muestra feedback de hover/active (cursor, sombra). */\n clickable?: boolean;\n /**\n * Preset registrado en `theme.styles.Card`. `\"default\"` usa el estilo\n * built-in sin preset extra.\n */\n preset?: string;\n /**\n * MUI `raised` legacy — mantenido por backward-compat. Equivale a\n * `variant=\"elevated\"` con sombra mayor. Ignora `variant` si se usa.\n */\n raised?: boolean;\n /** sx del root. Se compone sobre el base + preset. */\n sx?: SxProps<Theme>;\n onClick?: () => void;\n onBlur?: () => void;\n className?: string;\n 'data-testid'?: string;\n}\n\nexport function Card({\n children,\n variant,\n padding = 'normal',\n clickable = false,\n preset,\n raised,\n sx,\n onClick,\n onBlur,\n className,\n 'data-testid': dataTestId,\n}: CardProps) {\n const theme = useTheme();\n\n const resolvedVariant: CardVariant = raised\n ? 'elevated'\n : (variant ?? 'elevated');\n\n const presetSx = resolvePreset('Card', preset, theme);\n\n const rootSx: SxProps<Theme> = [\n buildCardSx({\n variant: resolvedVariant,\n padding,\n clickable: clickable || Boolean(onClick),\n }),\n ...(presetSx ? [presetSx] : []),\n ...(Array.isArray(sx) ? sx : sx ? [sx] : []),\n ];\n\n return (\n <MuiCard\n sx={rootSx}\n className={className}\n data-testid={dataTestId}\n onClick={onClick}\n onBlur={onBlur}\n >\n {children}\n </MuiCard>\n );\n}\n\nexport default Card;\n"],"names":["MuiCard"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,aAA0C;AAAA,EAC9C,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AAOO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AACF,GAAoC;AAClC,SAAO,CAAC,UAAW;AAAA,IACjB,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,WAAW,YAAY,aAAa,MAAM,QAAQ,CAAC,IAAI;AAAA,IACvD,QACE,YAAY,aACR,aAAa,MAAM,QAAQ,OAAO,KAClC;AAAA,IACN,YAAY,MAAM,YAAY;AAAA,MAC5B,CAAC,cAAc,aAAa,cAAc;AAAA,MAC1C,EAAE,UAAU,MAAM,YAAY,SAAS,QAAA;AAAA,IAAQ;AAAA,IAEjD,QAAQ,YAAY,YAAY;AAAA,KAC5B,aAAa;AAAA,IACf,WAAW;AAAA,MACT,WACE,YAAY,aACR,MAAM,QAAQ,CAAC,IACf,YAAY,aACV,MAAM,QAAQ,CAAC,IACf;AAAA,MACR,WAAW,YAAY,UAAU,qBAAqB;AAAA,IAAA;AAAA,IAExD,YAAY;AAAA,MACV,WAAW;AAAA,IAAA;AAAA,EACb,IAzBe;AAAA,IA2BjB,GAAG,WAAW,OAAO;AAAA,EAAA;AAEzB;AClBO,SAAS,KAAK;AAAA,EACnB;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AACjB,GAAc;AACZ,QAAM,QAAQ,SAAA;AAEd,QAAM,kBAA+B,SACjC,aACC,4BAAW;AAEhB,QAAM,WAAW,cAAc,QAAQ,QAAQ,KAAK;AAEpD,QAAM,SAAyB;AAAA,IAC7B,YAAY;AAAA,MACV,SAAS;AAAA,MACT;AAAA,MACA,WAAW,aAAa,QAAQ,OAAO;AAAA,IAAA,CACxC;AAAA,IACD,GAAI,WAAW,CAAC,QAAQ,IAAI,CAAA;AAAA,IAC5B,GAAI,MAAM,QAAQ,EAAE,IAAI,KAAK,KAAK,CAAC,EAAE,IAAI,CAAA;AAAA,EAAC;AAG5C,SACE;AAAA,IAACA;AAAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ;AAAA,MACA,eAAa;AAAA,MACb;AAAA,MACA;AAAA,MAEC;AAAA,IAAA;AAAA,EAAA;AAGP;"}
|
|
@@ -7,11 +7,8 @@ export interface BuildCardSxArgs {
|
|
|
7
7
|
clickable: boolean;
|
|
8
8
|
}
|
|
9
9
|
/**
|
|
10
|
-
* Estilo base del Card
|
|
11
|
-
*
|
|
12
|
-
*
|
|
10
|
+
* Estilo base del Card. La prop `sx` del consumer se compone encima junto al
|
|
11
|
+
* preset resuelto (en Card.tsx). Este builder solo se ocupa de variant +
|
|
12
|
+
* padding para que siga siendo predecible.
|
|
13
13
|
*/
|
|
14
14
|
export declare function buildCardSx({ variant, padding, clickable, }: BuildCardSxArgs): SxProps<Theme>;
|
|
15
|
-
export declare function buildCardHeaderSx(): SxProps<Theme>;
|
|
16
|
-
export declare function buildCardBodySx(padding: CardPadding): SxProps<Theme>;
|
|
17
|
-
export declare function buildCardFooterSx(): SxProps<Theme>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export { Card, default } from './Card';
|
|
2
2
|
export type { CardProps } from './Card';
|
|
3
3
|
export type { CardVariant, CardPadding } from './Card.sx';
|
|
4
|
-
export { buildCardSx
|
|
4
|
+
export { buildCardSx } from './Card.sx';
|
|
@@ -0,0 +1,189 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __defProps = Object.defineProperties;
|
|
4
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
5
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
8
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
9
|
+
var __spreadValues = (a, b) => {
|
|
10
|
+
for (var prop in b || (b = {}))
|
|
11
|
+
if (__hasOwnProp.call(b, prop))
|
|
12
|
+
__defNormalProp(a, prop, b[prop]);
|
|
13
|
+
if (__getOwnPropSymbols)
|
|
14
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
15
|
+
if (__propIsEnum.call(b, prop))
|
|
16
|
+
__defNormalProp(a, prop, b[prop]);
|
|
17
|
+
}
|
|
18
|
+
return a;
|
|
19
|
+
};
|
|
20
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
21
|
+
var __objRest = (source, exclude) => {
|
|
22
|
+
var target = {};
|
|
23
|
+
for (var prop in source)
|
|
24
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
25
|
+
target[prop] = source[prop];
|
|
26
|
+
if (source != null && __getOwnPropSymbols)
|
|
27
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
28
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
29
|
+
target[prop] = source[prop];
|
|
30
|
+
}
|
|
31
|
+
return target;
|
|
32
|
+
};
|
|
33
|
+
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
34
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
35
|
+
const material = require("@mui/material");
|
|
36
|
+
const styles = require("@mui/material/styles");
|
|
37
|
+
const reactHookForm = require("react-hook-form");
|
|
38
|
+
const resolvePreset = require("../../resolvePreset-CT3kU-K2.cjs");
|
|
39
|
+
const toRadius = (borderRadius) => typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius;
|
|
40
|
+
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";
|
|
41
|
+
const buildCheckboxSx = ({
|
|
42
|
+
bordered,
|
|
43
|
+
borderRadius,
|
|
44
|
+
hasLabel,
|
|
45
|
+
error
|
|
46
|
+
}) => {
|
|
47
|
+
const radius = toRadius(borderRadius);
|
|
48
|
+
if (!bordered) {
|
|
49
|
+
return {
|
|
50
|
+
"& .MuiFormHelperText-root": { marginLeft: 0 }
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
return (theme) => ({
|
|
54
|
+
"& .MuiFormControlLabel-root": __spreadValues(__spreadProps(__spreadValues({
|
|
55
|
+
marginLeft: 0,
|
|
56
|
+
marginRight: 0,
|
|
57
|
+
paddingX: 1.5,
|
|
58
|
+
paddingY: 0.5,
|
|
59
|
+
border: `1px solid ${error ? theme.palette.error.main : theme.palette.divider}`,
|
|
60
|
+
borderRadius: radius,
|
|
61
|
+
transition: FOCUS_TRANSITION
|
|
62
|
+
}, error && {
|
|
63
|
+
boxShadow: `0 0 0 1px ${theme.palette.error.main}`
|
|
64
|
+
}), {
|
|
65
|
+
"&:focus-within": {
|
|
66
|
+
borderColor: error ? theme.palette.error.main : theme.palette.primary.main,
|
|
67
|
+
boxShadow: `0 0 0 1px ${error ? theme.palette.error.main : theme.palette.primary.main}`
|
|
68
|
+
}
|
|
69
|
+
}), hasLabel && {
|
|
70
|
+
width: "100%",
|
|
71
|
+
justifyContent: "space-between"
|
|
72
|
+
}),
|
|
73
|
+
"& .MuiFormHelperText-root": {
|
|
74
|
+
marginLeft: 0
|
|
75
|
+
}
|
|
76
|
+
});
|
|
77
|
+
};
|
|
78
|
+
const Checkbox = (props) => {
|
|
79
|
+
const _a = props, {
|
|
80
|
+
label,
|
|
81
|
+
size = "medium",
|
|
82
|
+
color = "primary",
|
|
83
|
+
labelPlacement = "end",
|
|
84
|
+
indeterminate = false,
|
|
85
|
+
disabled = false,
|
|
86
|
+
error = false,
|
|
87
|
+
helperText,
|
|
88
|
+
bordered = false,
|
|
89
|
+
borderRadius = 10,
|
|
90
|
+
defaultChecked,
|
|
91
|
+
preset,
|
|
92
|
+
sx
|
|
93
|
+
} = _a, rest = __objRest(_a, [
|
|
94
|
+
"label",
|
|
95
|
+
"size",
|
|
96
|
+
"color",
|
|
97
|
+
"labelPlacement",
|
|
98
|
+
"indeterminate",
|
|
99
|
+
"disabled",
|
|
100
|
+
"error",
|
|
101
|
+
"helperText",
|
|
102
|
+
"bordered",
|
|
103
|
+
"borderRadius",
|
|
104
|
+
"defaultChecked",
|
|
105
|
+
"preset",
|
|
106
|
+
"sx"
|
|
107
|
+
]);
|
|
108
|
+
const theme = styles.useTheme();
|
|
109
|
+
const presetSx = resolvePreset.resolvePreset("Checkbox", preset, theme);
|
|
110
|
+
const buildSx = (effectiveError) => [
|
|
111
|
+
buildCheckboxSx({
|
|
112
|
+
bordered,
|
|
113
|
+
borderRadius,
|
|
114
|
+
hasLabel: !!label,
|
|
115
|
+
error: effectiveError
|
|
116
|
+
}),
|
|
117
|
+
...presetSx ? [presetSx] : [],
|
|
118
|
+
...Array.isArray(sx) ? sx : sx ? [sx] : []
|
|
119
|
+
];
|
|
120
|
+
const renderCheckbox = (checked2, onChange2, onBlur, inputRef) => {
|
|
121
|
+
const checkboxEl = /* @__PURE__ */ jsxRuntime.jsx(
|
|
122
|
+
material.Checkbox,
|
|
123
|
+
__spreadProps(__spreadValues({}, rest), {
|
|
124
|
+
size,
|
|
125
|
+
color,
|
|
126
|
+
checked: !!checked2,
|
|
127
|
+
indeterminate,
|
|
128
|
+
onChange: (_e, next) => onChange2(next),
|
|
129
|
+
onBlur,
|
|
130
|
+
inputRef,
|
|
131
|
+
disabled
|
|
132
|
+
})
|
|
133
|
+
);
|
|
134
|
+
return label ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
135
|
+
material.FormControlLabel,
|
|
136
|
+
{
|
|
137
|
+
control: checkboxEl,
|
|
138
|
+
label,
|
|
139
|
+
labelPlacement,
|
|
140
|
+
disabled
|
|
141
|
+
}
|
|
142
|
+
) : checkboxEl;
|
|
143
|
+
};
|
|
144
|
+
if ("control" in props && props.control) {
|
|
145
|
+
const { name, control, validation, onValueChange } = props;
|
|
146
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
147
|
+
reactHookForm.Controller,
|
|
148
|
+
{
|
|
149
|
+
name,
|
|
150
|
+
control,
|
|
151
|
+
rules: validation,
|
|
152
|
+
defaultValue: defaultChecked,
|
|
153
|
+
render: ({ field, fieldState: { error: fieldError } }) => {
|
|
154
|
+
var _a2;
|
|
155
|
+
const finalError = !!fieldError || error;
|
|
156
|
+
const finalHelperText = (_a2 = fieldError == null ? void 0 : fieldError.message) != null ? _a2 : helperText;
|
|
157
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
158
|
+
material.FormControl,
|
|
159
|
+
{
|
|
160
|
+
error: finalError,
|
|
161
|
+
disabled,
|
|
162
|
+
sx: buildSx(finalError),
|
|
163
|
+
children: [
|
|
164
|
+
renderCheckbox(
|
|
165
|
+
!!field.value,
|
|
166
|
+
(next) => {
|
|
167
|
+
field.onChange(next);
|
|
168
|
+
onValueChange == null ? void 0 : onValueChange(next);
|
|
169
|
+
},
|
|
170
|
+
field.onBlur,
|
|
171
|
+
field.ref
|
|
172
|
+
),
|
|
173
|
+
finalHelperText && /* @__PURE__ */ jsxRuntime.jsx(material.FormHelperText, { children: finalHelperText })
|
|
174
|
+
]
|
|
175
|
+
}
|
|
176
|
+
);
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
);
|
|
180
|
+
}
|
|
181
|
+
const { checked, onChange } = props;
|
|
182
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(material.FormControl, { error, disabled, sx: buildSx(error), children: [
|
|
183
|
+
renderCheckbox(checked, onChange),
|
|
184
|
+
helperText && /* @__PURE__ */ jsxRuntime.jsx(material.FormHelperText, { children: helperText })
|
|
185
|
+
] });
|
|
186
|
+
};
|
|
187
|
+
exports.Checkbox = Checkbox;
|
|
188
|
+
exports.default = Checkbox;
|
|
189
|
+
//# sourceMappingURL=Checkbox.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Checkbox.cjs","sources":["../../../src/components/Checkbox/Checkbox.sx.ts","../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import type { SxProps, Theme } from '@mui/material/styles';\n\nexport interface BuildCheckboxSxOptions {\n bordered: boolean;\n borderRadius: number | string;\n hasLabel: boolean;\n error: boolean;\n}\n\nconst toRadius = (borderRadius: number | string) =>\n typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius;\n\nconst FOCUS_TRANSITION =\n 'border-color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, ' +\n 'box-shadow 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms';\n\n/**\n * Builder de sx para Checkbox. Cuando `bordered=true`, el contenedor del\n * `FormControlLabel` gana un borde estilo \"form field\" con focus ring y\n * estado de error (matchea InputGroup / Switch / RadioGroup).\n */\nexport const buildCheckboxSx = ({\n bordered,\n borderRadius,\n hasLabel,\n error,\n}: BuildCheckboxSxOptions): SxProps<Theme> => {\n const radius = toRadius(borderRadius);\n\n if (!bordered) {\n return {\n '& .MuiFormHelperText-root': { marginLeft: 0 },\n };\n }\n\n return (theme) => ({\n '& .MuiFormControlLabel-root': {\n marginLeft: 0,\n marginRight: 0,\n paddingX: 1.5,\n paddingY: 0.5,\n border: `1px solid ${\n error ? theme.palette.error.main : theme.palette.divider\n }`,\n borderRadius: radius,\n transition: FOCUS_TRANSITION,\n ...(error && {\n boxShadow: `0 0 0 1px ${theme.palette.error.main}`,\n }),\n '&:focus-within': {\n borderColor: error\n ? theme.palette.error.main\n : theme.palette.primary.main,\n boxShadow: `0 0 0 1px ${\n error ? theme.palette.error.main : theme.palette.primary.main\n }`,\n },\n ...(hasLabel && {\n width: '100%',\n justifyContent: 'space-between',\n }),\n },\n '& .MuiFormHelperText-root': {\n marginLeft: 0,\n },\n });\n};\n","import type { FC, Ref } from 'react';\nimport {\n Checkbox as MuiCheckbox,\n FormControl,\n FormControlLabel,\n FormHelperText,\n type CheckboxProps as MuiCheckboxProps,\n type SxProps,\n type Theme,\n} from '@mui/material';\nimport { useTheme } from '@mui/material/styles';\nimport { Controller, type Control, type RegisterOptions } from 'react-hook-form';\n\nimport { buildCheckboxSx } from './Checkbox.sx';\nimport { resolvePreset } from '../_shared/resolvePreset';\n\n// ── Tipos de dominio ─────────────────────────────────────────────────────\nexport type CheckboxSize = 'small' | 'medium';\nexport type CheckboxLabelPlacement = 'start' | 'end' | 'top' | 'bottom';\nexport type CheckboxColor =\n | 'default'\n | 'primary'\n | 'secondary'\n | 'success'\n | 'error'\n | 'info'\n | 'warning';\n\n// ── Props base (todo lo común entre RHF y controlado) ────────────────────\nexport interface BaseCheckboxProps\n extends Omit<\n MuiCheckboxProps,\n 'value' | 'onChange' | 'checked' | 'defaultChecked' | 'size' | 'color'\n > {\n /** Texto al lado del checkbox. Si está ausente, se renderiza solo el control. */\n label?: string;\n size?: CheckboxSize;\n /** Color del checkbox. Default: `'primary'`. */\n color?: CheckboxColor;\n /** Posición del label respecto al checkbox. Default: `'end'`. */\n labelPlacement?: CheckboxLabelPlacement;\n /** Estado indeterminate (tri-state). Típico para \"select all\" parcial. */\n indeterminate?: boolean;\n disabled?: boolean;\n error?: boolean;\n helperText?: string;\n /** Renderiza un contenedor con borde alrededor del checkbox + label. Default: false. */\n bordered?: boolean;\n /** Border radius del contenedor (cuando bordered). Default: 10. */\n borderRadius?: number | string;\n /** Valor inicial del checkbox en modo RHF. */\n defaultChecked?: boolean;\n /**\n * Nombre del preset de estilo registrado en `theme.styles.Checkbox`.\n * - `\"default\"` (o ausente) = estilo built-in del paquete.\n * - Cualquier otro string = mergea el preset encima del estilo built-in.\n */\n preset?: string;\n sx?: SxProps<Theme>;\n}\n\n// ── Variantes discriminadas (RHF vs controlado) ──────────────────────────\nexport interface RHFCheckboxProps extends BaseCheckboxProps {\n name: string;\n // `any` plano (no `Control<any>`): RHF tipa `Control<T>` con generics en\n // posiciones tanto contravariantes como covariantes (ej. `_subjects.state`).\n // Cuando el componente o su uso involucra generics adicionales, TS se\n // confunde narroweando el discriminated union y `Control<any>` no logra\n // absorber `Control<MyForm>` en la comparación estructural profunda. El\n // `any` plano elimina ese ruido. RHF adentro sigue teniendo sus tipos\n // fuertes — solo degradamos la superficie del prop del componente.\n control: any;\n validation?: RegisterOptions;\n /**\n * Side-effect que corre después de que RHF actualiza el form state.\n * Útil para cascadas entre campos. NO reemplaza al handler de RHF.\n */\n onValueChange?: (checked: boolean) => void;\n checked?: never;\n onChange?: never;\n}\n\nexport interface ControlledCheckboxProps extends BaseCheckboxProps {\n name?: string;\n control?: never;\n validation?: never;\n checked: boolean;\n onChange: (checked: boolean) => void;\n}\n\n// ── API pública final ────────────────────────────────────────────────────\nexport type CheckboxProps = RHFCheckboxProps | ControlledCheckboxProps;\n\nexport const Checkbox: FC<CheckboxProps> = (props) => {\n const {\n label,\n size = 'medium',\n color = 'primary',\n labelPlacement = 'end',\n indeterminate = false,\n disabled = false,\n error = false,\n helperText,\n bordered = false,\n borderRadius = 10,\n defaultChecked,\n preset,\n sx,\n ...rest\n } = props as ControlledCheckboxProps & {\n control?: Control<any>;\n validation?: RegisterOptions;\n };\n\n const theme = useTheme();\n const presetSx = resolvePreset('Checkbox', preset, theme);\n\n // Construye el sx con el estado de error efectivo; se llama por rama\n // (RHF usa el error del Controller, controlado usa el prop `error`).\n const buildSx = (effectiveError: boolean) => [\n buildCheckboxSx({\n bordered,\n borderRadius,\n hasLabel: !!label,\n error: effectiveError,\n }),\n ...(presetSx ? [presetSx] : []),\n ...(Array.isArray(sx) ? sx : sx ? [sx] : []),\n ];\n\n const renderCheckbox = (\n checked: boolean,\n onChange: (next: boolean) => void,\n onBlur?: () => void,\n inputRef?: Ref<HTMLInputElement>,\n ) => {\n const checkboxEl = (\n <MuiCheckbox\n {...rest}\n size={size}\n color={color}\n checked={!!checked}\n indeterminate={indeterminate}\n onChange={(_e, next) => onChange(next)}\n onBlur={onBlur}\n inputRef={inputRef}\n disabled={disabled}\n />\n );\n\n return label ? (\n <FormControlLabel\n control={checkboxEl}\n label={label}\n labelPlacement={labelPlacement}\n disabled={disabled}\n />\n ) : (\n checkboxEl\n );\n };\n\n // ── RHF mode ──────────────────────────────────────────────────────────\n if ('control' in props && props.control) {\n const { name, control, validation, onValueChange } = props as RHFCheckboxProps;\n return (\n <Controller\n name={name}\n control={control}\n rules={validation}\n defaultValue={defaultChecked}\n render={({ field, fieldState: { error: fieldError } }) => {\n const finalError = !!fieldError || error;\n const finalHelperText = fieldError?.message ?? helperText;\n return (\n <FormControl\n error={finalError}\n disabled={disabled}\n sx={buildSx(finalError)}\n >\n {renderCheckbox(\n !!field.value,\n (next) => {\n field.onChange(next);\n onValueChange?.(next);\n },\n field.onBlur,\n field.ref,\n )}\n {finalHelperText && <FormHelperText>{finalHelperText}</FormHelperText>}\n </FormControl>\n );\n }}\n />\n );\n }\n\n // ── Controlled mode ───────────────────────────────────────────────────\n const { checked, onChange } = props as ControlledCheckboxProps;\n return (\n <FormControl error={error} disabled={disabled} sx={buildSx(error)}>\n {renderCheckbox(checked, onChange)}\n {helperText && <FormHelperText>{helperText}</FormHelperText>}\n </FormControl>\n );\n};\n\nexport default Checkbox;\n"],"names":["useTheme","resolvePreset","checked","onChange","jsx","MuiCheckbox","FormControlLabel","Controller","_a","jsxs","FormControl","FormHelperText"],"mappings":"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"}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { CheckboxProps as MuiCheckboxProps, SxProps, Theme } from '@mui/material';
|
|
3
|
+
import { RegisterOptions } from 'react-hook-form';
|
|
4
|
+
export type CheckboxSize = 'small' | 'medium';
|
|
5
|
+
export type CheckboxLabelPlacement = 'start' | 'end' | 'top' | 'bottom';
|
|
6
|
+
export type CheckboxColor = 'default' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
|
|
7
|
+
export interface BaseCheckboxProps extends Omit<MuiCheckboxProps, 'value' | 'onChange' | 'checked' | 'defaultChecked' | 'size' | 'color'> {
|
|
8
|
+
/** Texto al lado del checkbox. Si está ausente, se renderiza solo el control. */
|
|
9
|
+
label?: string;
|
|
10
|
+
size?: CheckboxSize;
|
|
11
|
+
/** Color del checkbox. Default: `'primary'`. */
|
|
12
|
+
color?: CheckboxColor;
|
|
13
|
+
/** Posición del label respecto al checkbox. Default: `'end'`. */
|
|
14
|
+
labelPlacement?: CheckboxLabelPlacement;
|
|
15
|
+
/** Estado indeterminate (tri-state). Típico para "select all" parcial. */
|
|
16
|
+
indeterminate?: boolean;
|
|
17
|
+
disabled?: boolean;
|
|
18
|
+
error?: boolean;
|
|
19
|
+
helperText?: string;
|
|
20
|
+
/** Renderiza un contenedor con borde alrededor del checkbox + label. Default: false. */
|
|
21
|
+
bordered?: boolean;
|
|
22
|
+
/** Border radius del contenedor (cuando bordered). Default: 10. */
|
|
23
|
+
borderRadius?: number | string;
|
|
24
|
+
/** Valor inicial del checkbox en modo RHF. */
|
|
25
|
+
defaultChecked?: boolean;
|
|
26
|
+
/**
|
|
27
|
+
* Nombre del preset de estilo registrado en `theme.styles.Checkbox`.
|
|
28
|
+
* - `"default"` (o ausente) = estilo built-in del paquete.
|
|
29
|
+
* - Cualquier otro string = mergea el preset encima del estilo built-in.
|
|
30
|
+
*/
|
|
31
|
+
preset?: string;
|
|
32
|
+
sx?: SxProps<Theme>;
|
|
33
|
+
}
|
|
34
|
+
export interface RHFCheckboxProps extends BaseCheckboxProps {
|
|
35
|
+
name: string;
|
|
36
|
+
control: any;
|
|
37
|
+
validation?: RegisterOptions;
|
|
38
|
+
/**
|
|
39
|
+
* Side-effect que corre después de que RHF actualiza el form state.
|
|
40
|
+
* Útil para cascadas entre campos. NO reemplaza al handler de RHF.
|
|
41
|
+
*/
|
|
42
|
+
onValueChange?: (checked: boolean) => void;
|
|
43
|
+
checked?: never;
|
|
44
|
+
onChange?: never;
|
|
45
|
+
}
|
|
46
|
+
export interface ControlledCheckboxProps extends BaseCheckboxProps {
|
|
47
|
+
name?: string;
|
|
48
|
+
control?: never;
|
|
49
|
+
validation?: never;
|
|
50
|
+
checked: boolean;
|
|
51
|
+
onChange: (checked: boolean) => void;
|
|
52
|
+
}
|
|
53
|
+
export type CheckboxProps = RHFCheckboxProps | ControlledCheckboxProps;
|
|
54
|
+
export declare const Checkbox: FC<CheckboxProps>;
|
|
55
|
+
export default Checkbox;
|
|
@@ -0,0 +1,189 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
+
var __objRest = (source, exclude) => {
|
|
21
|
+
var target = {};
|
|
22
|
+
for (var prop in source)
|
|
23
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
24
|
+
target[prop] = source[prop];
|
|
25
|
+
if (source != null && __getOwnPropSymbols)
|
|
26
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
27
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
28
|
+
target[prop] = source[prop];
|
|
29
|
+
}
|
|
30
|
+
return target;
|
|
31
|
+
};
|
|
32
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
33
|
+
import { FormControl, FormHelperText, Checkbox as Checkbox$1, FormControlLabel } from "@mui/material";
|
|
34
|
+
import { useTheme } from "@mui/material/styles";
|
|
35
|
+
import { Controller } from "react-hook-form";
|
|
36
|
+
import { r as resolvePreset } from "../../resolvePreset-B-IB0ehH.js";
|
|
37
|
+
const toRadius = (borderRadius) => typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius;
|
|
38
|
+
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";
|
|
39
|
+
const buildCheckboxSx = ({
|
|
40
|
+
bordered,
|
|
41
|
+
borderRadius,
|
|
42
|
+
hasLabel,
|
|
43
|
+
error
|
|
44
|
+
}) => {
|
|
45
|
+
const radius = toRadius(borderRadius);
|
|
46
|
+
if (!bordered) {
|
|
47
|
+
return {
|
|
48
|
+
"& .MuiFormHelperText-root": { marginLeft: 0 }
|
|
49
|
+
};
|
|
50
|
+
}
|
|
51
|
+
return (theme) => ({
|
|
52
|
+
"& .MuiFormControlLabel-root": __spreadValues(__spreadProps(__spreadValues({
|
|
53
|
+
marginLeft: 0,
|
|
54
|
+
marginRight: 0,
|
|
55
|
+
paddingX: 1.5,
|
|
56
|
+
paddingY: 0.5,
|
|
57
|
+
border: `1px solid ${error ? theme.palette.error.main : theme.palette.divider}`,
|
|
58
|
+
borderRadius: radius,
|
|
59
|
+
transition: FOCUS_TRANSITION
|
|
60
|
+
}, error && {
|
|
61
|
+
boxShadow: `0 0 0 1px ${theme.palette.error.main}`
|
|
62
|
+
}), {
|
|
63
|
+
"&:focus-within": {
|
|
64
|
+
borderColor: error ? theme.palette.error.main : theme.palette.primary.main,
|
|
65
|
+
boxShadow: `0 0 0 1px ${error ? theme.palette.error.main : theme.palette.primary.main}`
|
|
66
|
+
}
|
|
67
|
+
}), hasLabel && {
|
|
68
|
+
width: "100%",
|
|
69
|
+
justifyContent: "space-between"
|
|
70
|
+
}),
|
|
71
|
+
"& .MuiFormHelperText-root": {
|
|
72
|
+
marginLeft: 0
|
|
73
|
+
}
|
|
74
|
+
});
|
|
75
|
+
};
|
|
76
|
+
const Checkbox = (props) => {
|
|
77
|
+
const _a = props, {
|
|
78
|
+
label,
|
|
79
|
+
size = "medium",
|
|
80
|
+
color = "primary",
|
|
81
|
+
labelPlacement = "end",
|
|
82
|
+
indeterminate = false,
|
|
83
|
+
disabled = false,
|
|
84
|
+
error = false,
|
|
85
|
+
helperText,
|
|
86
|
+
bordered = false,
|
|
87
|
+
borderRadius = 10,
|
|
88
|
+
defaultChecked,
|
|
89
|
+
preset,
|
|
90
|
+
sx
|
|
91
|
+
} = _a, rest = __objRest(_a, [
|
|
92
|
+
"label",
|
|
93
|
+
"size",
|
|
94
|
+
"color",
|
|
95
|
+
"labelPlacement",
|
|
96
|
+
"indeterminate",
|
|
97
|
+
"disabled",
|
|
98
|
+
"error",
|
|
99
|
+
"helperText",
|
|
100
|
+
"bordered",
|
|
101
|
+
"borderRadius",
|
|
102
|
+
"defaultChecked",
|
|
103
|
+
"preset",
|
|
104
|
+
"sx"
|
|
105
|
+
]);
|
|
106
|
+
const theme = useTheme();
|
|
107
|
+
const presetSx = resolvePreset("Checkbox", preset, theme);
|
|
108
|
+
const buildSx = (effectiveError) => [
|
|
109
|
+
buildCheckboxSx({
|
|
110
|
+
bordered,
|
|
111
|
+
borderRadius,
|
|
112
|
+
hasLabel: !!label,
|
|
113
|
+
error: effectiveError
|
|
114
|
+
}),
|
|
115
|
+
...presetSx ? [presetSx] : [],
|
|
116
|
+
...Array.isArray(sx) ? sx : sx ? [sx] : []
|
|
117
|
+
];
|
|
118
|
+
const renderCheckbox = (checked2, onChange2, onBlur, inputRef) => {
|
|
119
|
+
const checkboxEl = /* @__PURE__ */ jsx(
|
|
120
|
+
Checkbox$1,
|
|
121
|
+
__spreadProps(__spreadValues({}, rest), {
|
|
122
|
+
size,
|
|
123
|
+
color,
|
|
124
|
+
checked: !!checked2,
|
|
125
|
+
indeterminate,
|
|
126
|
+
onChange: (_e, next) => onChange2(next),
|
|
127
|
+
onBlur,
|
|
128
|
+
inputRef,
|
|
129
|
+
disabled
|
|
130
|
+
})
|
|
131
|
+
);
|
|
132
|
+
return label ? /* @__PURE__ */ jsx(
|
|
133
|
+
FormControlLabel,
|
|
134
|
+
{
|
|
135
|
+
control: checkboxEl,
|
|
136
|
+
label,
|
|
137
|
+
labelPlacement,
|
|
138
|
+
disabled
|
|
139
|
+
}
|
|
140
|
+
) : checkboxEl;
|
|
141
|
+
};
|
|
142
|
+
if ("control" in props && props.control) {
|
|
143
|
+
const { name, control, validation, onValueChange } = props;
|
|
144
|
+
return /* @__PURE__ */ jsx(
|
|
145
|
+
Controller,
|
|
146
|
+
{
|
|
147
|
+
name,
|
|
148
|
+
control,
|
|
149
|
+
rules: validation,
|
|
150
|
+
defaultValue: defaultChecked,
|
|
151
|
+
render: ({ field, fieldState: { error: fieldError } }) => {
|
|
152
|
+
var _a2;
|
|
153
|
+
const finalError = !!fieldError || error;
|
|
154
|
+
const finalHelperText = (_a2 = fieldError == null ? void 0 : fieldError.message) != null ? _a2 : helperText;
|
|
155
|
+
return /* @__PURE__ */ jsxs(
|
|
156
|
+
FormControl,
|
|
157
|
+
{
|
|
158
|
+
error: finalError,
|
|
159
|
+
disabled,
|
|
160
|
+
sx: buildSx(finalError),
|
|
161
|
+
children: [
|
|
162
|
+
renderCheckbox(
|
|
163
|
+
!!field.value,
|
|
164
|
+
(next) => {
|
|
165
|
+
field.onChange(next);
|
|
166
|
+
onValueChange == null ? void 0 : onValueChange(next);
|
|
167
|
+
},
|
|
168
|
+
field.onBlur,
|
|
169
|
+
field.ref
|
|
170
|
+
),
|
|
171
|
+
finalHelperText && /* @__PURE__ */ jsx(FormHelperText, { children: finalHelperText })
|
|
172
|
+
]
|
|
173
|
+
}
|
|
174
|
+
);
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
);
|
|
178
|
+
}
|
|
179
|
+
const { checked, onChange } = props;
|
|
180
|
+
return /* @__PURE__ */ jsxs(FormControl, { error, disabled, sx: buildSx(error), children: [
|
|
181
|
+
renderCheckbox(checked, onChange),
|
|
182
|
+
helperText && /* @__PURE__ */ jsx(FormHelperText, { children: helperText })
|
|
183
|
+
] });
|
|
184
|
+
};
|
|
185
|
+
export {
|
|
186
|
+
Checkbox,
|
|
187
|
+
Checkbox as default
|
|
188
|
+
};
|
|
189
|
+
//# sourceMappingURL=Checkbox.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.sx.ts","../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import type { SxProps, Theme } from '@mui/material/styles';\n\nexport interface BuildCheckboxSxOptions {\n bordered: boolean;\n borderRadius: number | string;\n hasLabel: boolean;\n error: boolean;\n}\n\nconst toRadius = (borderRadius: number | string) =>\n typeof borderRadius === 'number' ? `${borderRadius}px` : borderRadius;\n\nconst FOCUS_TRANSITION =\n 'border-color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, ' +\n 'box-shadow 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms';\n\n/**\n * Builder de sx para Checkbox. Cuando `bordered=true`, el contenedor del\n * `FormControlLabel` gana un borde estilo \"form field\" con focus ring y\n * estado de error (matchea InputGroup / Switch / RadioGroup).\n */\nexport const buildCheckboxSx = ({\n bordered,\n borderRadius,\n hasLabel,\n error,\n}: BuildCheckboxSxOptions): SxProps<Theme> => {\n const radius = toRadius(borderRadius);\n\n if (!bordered) {\n return {\n '& .MuiFormHelperText-root': { marginLeft: 0 },\n };\n }\n\n return (theme) => ({\n '& .MuiFormControlLabel-root': {\n marginLeft: 0,\n marginRight: 0,\n paddingX: 1.5,\n paddingY: 0.5,\n border: `1px solid ${\n error ? theme.palette.error.main : theme.palette.divider\n }`,\n borderRadius: radius,\n transition: FOCUS_TRANSITION,\n ...(error && {\n boxShadow: `0 0 0 1px ${theme.palette.error.main}`,\n }),\n '&:focus-within': {\n borderColor: error\n ? theme.palette.error.main\n : theme.palette.primary.main,\n boxShadow: `0 0 0 1px ${\n error ? theme.palette.error.main : theme.palette.primary.main\n }`,\n },\n ...(hasLabel && {\n width: '100%',\n justifyContent: 'space-between',\n }),\n },\n '& .MuiFormHelperText-root': {\n marginLeft: 0,\n },\n });\n};\n","import type { FC, Ref } from 'react';\nimport {\n Checkbox as MuiCheckbox,\n FormControl,\n FormControlLabel,\n FormHelperText,\n type CheckboxProps as MuiCheckboxProps,\n type SxProps,\n type Theme,\n} from '@mui/material';\nimport { useTheme } from '@mui/material/styles';\nimport { Controller, type Control, type RegisterOptions } from 'react-hook-form';\n\nimport { buildCheckboxSx } from './Checkbox.sx';\nimport { resolvePreset } from '../_shared/resolvePreset';\n\n// ── Tipos de dominio ─────────────────────────────────────────────────────\nexport type CheckboxSize = 'small' | 'medium';\nexport type CheckboxLabelPlacement = 'start' | 'end' | 'top' | 'bottom';\nexport type CheckboxColor =\n | 'default'\n | 'primary'\n | 'secondary'\n | 'success'\n | 'error'\n | 'info'\n | 'warning';\n\n// ── Props base (todo lo común entre RHF y controlado) ────────────────────\nexport interface BaseCheckboxProps\n extends Omit<\n MuiCheckboxProps,\n 'value' | 'onChange' | 'checked' | 'defaultChecked' | 'size' | 'color'\n > {\n /** Texto al lado del checkbox. Si está ausente, se renderiza solo el control. */\n label?: string;\n size?: CheckboxSize;\n /** Color del checkbox. Default: `'primary'`. */\n color?: CheckboxColor;\n /** Posición del label respecto al checkbox. Default: `'end'`. */\n labelPlacement?: CheckboxLabelPlacement;\n /** Estado indeterminate (tri-state). Típico para \"select all\" parcial. */\n indeterminate?: boolean;\n disabled?: boolean;\n error?: boolean;\n helperText?: string;\n /** Renderiza un contenedor con borde alrededor del checkbox + label. Default: false. */\n bordered?: boolean;\n /** Border radius del contenedor (cuando bordered). Default: 10. */\n borderRadius?: number | string;\n /** Valor inicial del checkbox en modo RHF. */\n defaultChecked?: boolean;\n /**\n * Nombre del preset de estilo registrado en `theme.styles.Checkbox`.\n * - `\"default\"` (o ausente) = estilo built-in del paquete.\n * - Cualquier otro string = mergea el preset encima del estilo built-in.\n */\n preset?: string;\n sx?: SxProps<Theme>;\n}\n\n// ── Variantes discriminadas (RHF vs controlado) ──────────────────────────\nexport interface RHFCheckboxProps extends BaseCheckboxProps {\n name: string;\n // `any` plano (no `Control<any>`): RHF tipa `Control<T>` con generics en\n // posiciones tanto contravariantes como covariantes (ej. `_subjects.state`).\n // Cuando el componente o su uso involucra generics adicionales, TS se\n // confunde narroweando el discriminated union y `Control<any>` no logra\n // absorber `Control<MyForm>` en la comparación estructural profunda. El\n // `any` plano elimina ese ruido. RHF adentro sigue teniendo sus tipos\n // fuertes — solo degradamos la superficie del prop del componente.\n control: any;\n validation?: RegisterOptions;\n /**\n * Side-effect que corre después de que RHF actualiza el form state.\n * Útil para cascadas entre campos. NO reemplaza al handler de RHF.\n */\n onValueChange?: (checked: boolean) => void;\n checked?: never;\n onChange?: never;\n}\n\nexport interface ControlledCheckboxProps extends BaseCheckboxProps {\n name?: string;\n control?: never;\n validation?: never;\n checked: boolean;\n onChange: (checked: boolean) => void;\n}\n\n// ── API pública final ────────────────────────────────────────────────────\nexport type CheckboxProps = RHFCheckboxProps | ControlledCheckboxProps;\n\nexport const Checkbox: FC<CheckboxProps> = (props) => {\n const {\n label,\n size = 'medium',\n color = 'primary',\n labelPlacement = 'end',\n indeterminate = false,\n disabled = false,\n error = false,\n helperText,\n bordered = false,\n borderRadius = 10,\n defaultChecked,\n preset,\n sx,\n ...rest\n } = props as ControlledCheckboxProps & {\n control?: Control<any>;\n validation?: RegisterOptions;\n };\n\n const theme = useTheme();\n const presetSx = resolvePreset('Checkbox', preset, theme);\n\n // Construye el sx con el estado de error efectivo; se llama por rama\n // (RHF usa el error del Controller, controlado usa el prop `error`).\n const buildSx = (effectiveError: boolean) => [\n buildCheckboxSx({\n bordered,\n borderRadius,\n hasLabel: !!label,\n error: effectiveError,\n }),\n ...(presetSx ? [presetSx] : []),\n ...(Array.isArray(sx) ? sx : sx ? [sx] : []),\n ];\n\n const renderCheckbox = (\n checked: boolean,\n onChange: (next: boolean) => void,\n onBlur?: () => void,\n inputRef?: Ref<HTMLInputElement>,\n ) => {\n const checkboxEl = (\n <MuiCheckbox\n {...rest}\n size={size}\n color={color}\n checked={!!checked}\n indeterminate={indeterminate}\n onChange={(_e, next) => onChange(next)}\n onBlur={onBlur}\n inputRef={inputRef}\n disabled={disabled}\n />\n );\n\n return label ? (\n <FormControlLabel\n control={checkboxEl}\n label={label}\n labelPlacement={labelPlacement}\n disabled={disabled}\n />\n ) : (\n checkboxEl\n );\n };\n\n // ── RHF mode ──────────────────────────────────────────────────────────\n if ('control' in props && props.control) {\n const { name, control, validation, onValueChange } = props as RHFCheckboxProps;\n return (\n <Controller\n name={name}\n control={control}\n rules={validation}\n defaultValue={defaultChecked}\n render={({ field, fieldState: { error: fieldError } }) => {\n const finalError = !!fieldError || error;\n const finalHelperText = fieldError?.message ?? helperText;\n return (\n <FormControl\n error={finalError}\n disabled={disabled}\n sx={buildSx(finalError)}\n >\n {renderCheckbox(\n !!field.value,\n (next) => {\n field.onChange(next);\n onValueChange?.(next);\n },\n field.onBlur,\n field.ref,\n )}\n {finalHelperText && <FormHelperText>{finalHelperText}</FormHelperText>}\n </FormControl>\n );\n }}\n />\n );\n }\n\n // ── Controlled mode ───────────────────────────────────────────────────\n const { checked, onChange } = props as ControlledCheckboxProps;\n return (\n <FormControl error={error} disabled={disabled} sx={buildSx(error)}>\n {renderCheckbox(checked, onChange)}\n {helperText && <FormHelperText>{helperText}</FormHelperText>}\n </FormControl>\n );\n};\n\nexport default Checkbox;\n"],"names":["checked","onChange","MuiCheckbox","_a"],"mappings":"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"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { SxProps, Theme } from '@mui/material/styles';
|
|
2
|
+
export interface BuildCheckboxSxOptions {
|
|
3
|
+
bordered: boolean;
|
|
4
|
+
borderRadius: number | string;
|
|
5
|
+
hasLabel: boolean;
|
|
6
|
+
error: boolean;
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* Builder de sx para Checkbox. Cuando `bordered=true`, el contenedor del
|
|
10
|
+
* `FormControlLabel` gana un borde estilo "form field" con focus ring y
|
|
11
|
+
* estado de error (matchea InputGroup / Switch / RadioGroup).
|
|
12
|
+
*/
|
|
13
|
+
export declare const buildCheckboxSx: ({ bordered, borderRadius, hasLabel, error, }: BuildCheckboxSxOptions) => SxProps<Theme>;
|
package/components/Chip/Chip.cjs
CHANGED
|
@@ -27,7 +27,7 @@ var __objRest = (source, exclude) => {
|
|
|
27
27
|
}
|
|
28
28
|
return target;
|
|
29
29
|
};
|
|
30
|
-
Object.
|
|
30
|
+
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
31
31
|
const jsxRuntime = require("react/jsx-runtime");
|
|
32
32
|
const material = require("@mui/material");
|
|
33
33
|
const Chip = (_a) => {
|
|
@@ -71,4 +71,5 @@ const Chip = (_a) => {
|
|
|
71
71
|
);
|
|
72
72
|
};
|
|
73
73
|
exports.Chip = Chip;
|
|
74
|
+
exports.default = Chip;
|
|
74
75
|
//# sourceMappingURL=Chip.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chip.cjs","sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import React from 'react';\nimport { Chip as MuiChip
|
|
1
|
+
{"version":3,"file":"Chip.cjs","sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import React from 'react';\nimport { Chip as MuiChip } from '@mui/material';\nimport type { ChipProps as MuiChipProps } from '@mui/material';\n\n// Define las props para el componente Chip personalizado\n// Omitimos algunas props de MuiChipProps que redefiniremos para mayor claridad\nexport interface ChipProps extends Omit<MuiChipProps, 'onClick' | 'onDelete' | 'avatar' | 'icon' | 'label' | 'variant' | 'color' | 'size'> {\n // Contenido principal del chip\n label: React.ReactNode;\n // Handler para el evento click del chip\n onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;\n // Handler para el evento delete del chip (muestra un botón de borrar)\n onDelete?: (event: React.MouseEvent<HTMLDivElement>) => void;\n // Elemento Avatar a mostrar al inicio del chip\n avatar?: React.ReactElement;\n // Icono a mostrar al inicio del chip (alternativa a avatar)\n icon?: React.ReactElement;\n // Si el chip está deshabilitado\n disabled?: boolean;\n // Variante visual del chip\n variant?: 'filled' | 'outlined';\n // Color del chip\n color?: 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';\n // Tamaño del chip\n size?: 'small' | 'medium';\n}\n\n/**\n * Componente Chip personalizado de Material UI.\n * Proporciona una interfaz simplificada para el componente Chip de Material UI,\n * permitiendo una fácil personalización de etiquetas, avatares, iconos y acciones.\n */\nexport const Chip: React.FC<ChipProps> = ({\n label,\n onClick,\n onDelete,\n avatar,\n icon,\n disabled = false,\n variant = 'filled', // Default variant\n color = 'default', // Default color\n size = 'medium', // Default size\n ...rest // Permite pasar otras props de MuiChipProps (ej. sx, className)\n}) => {\n return (\n <MuiChip\n label={label}\n onClick={onClick}\n onDelete={onDelete}\n avatar={avatar}\n icon={icon}\n disabled={disabled}\n variant={variant}\n color={color}\n size={size}\n clickable={!!onClick} // Habilita el estilo clickable si se proporciona onClick\n {...rest}\n />\n );\n};\n\nexport default Chip;\n"],"names":["jsx","MuiChip"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCO,MAAM,OAA4B,CAAC,OAWpC;AAXoC,eACxC;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,UAAU;AAAA,IACV,eAAQ;AAAA,IACR,aAAO;AAAA,MATiC,IAUrC,iBAVqC,IAUrC;AAAA,IATH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAGA,SACEA,2BAAAA;AAAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,CAAC,CAAC;AAAA,OACT;AAAA,EAAA;AAGV;;;"}
|
package/components/Chip/Chip.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chip.js","sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import React from 'react';\nimport { Chip as MuiChip
|
|
1
|
+
{"version":3,"file":"Chip.js","sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import React from 'react';\nimport { Chip as MuiChip } from '@mui/material';\nimport type { ChipProps as MuiChipProps } from '@mui/material';\n\n// Define las props para el componente Chip personalizado\n// Omitimos algunas props de MuiChipProps que redefiniremos para mayor claridad\nexport interface ChipProps extends Omit<MuiChipProps, 'onClick' | 'onDelete' | 'avatar' | 'icon' | 'label' | 'variant' | 'color' | 'size'> {\n // Contenido principal del chip\n label: React.ReactNode;\n // Handler para el evento click del chip\n onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;\n // Handler para el evento delete del chip (muestra un botón de borrar)\n onDelete?: (event: React.MouseEvent<HTMLDivElement>) => void;\n // Elemento Avatar a mostrar al inicio del chip\n avatar?: React.ReactElement;\n // Icono a mostrar al inicio del chip (alternativa a avatar)\n icon?: React.ReactElement;\n // Si el chip está deshabilitado\n disabled?: boolean;\n // Variante visual del chip\n variant?: 'filled' | 'outlined';\n // Color del chip\n color?: 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';\n // Tamaño del chip\n size?: 'small' | 'medium';\n}\n\n/**\n * Componente Chip personalizado de Material UI.\n * Proporciona una interfaz simplificada para el componente Chip de Material UI,\n * permitiendo una fácil personalización de etiquetas, avatares, iconos y acciones.\n */\nexport const Chip: React.FC<ChipProps> = ({\n label,\n onClick,\n onDelete,\n avatar,\n icon,\n disabled = false,\n variant = 'filled', // Default variant\n color = 'default', // Default color\n size = 'medium', // Default size\n ...rest // Permite pasar otras props de MuiChipProps (ej. sx, className)\n}) => {\n return (\n <MuiChip\n label={label}\n onClick={onClick}\n onDelete={onDelete}\n avatar={avatar}\n icon={icon}\n disabled={disabled}\n variant={variant}\n color={color}\n size={size}\n clickable={!!onClick} // Habilita el estilo clickable si se proporciona onClick\n {...rest}\n />\n );\n};\n\nexport default Chip;\n"],"names":["MuiChip"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCO,MAAM,OAA4B,CAAC,OAWpC;AAXoC,eACxC;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,UAAU;AAAA,IACV,eAAQ;AAAA,IACR,aAAO;AAAA,MATiC,IAUrC,iBAVqC,IAUrC;AAAA,IATH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAAA,IACA;AAAA;AAGA,SACE;AAAA,IAACA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,CAAC,CAAC;AAAA,OACT;AAAA,EAAA;AAGV;"}
|