@stackcraftmx/calcita 0.32.2 → 0.51.0

package/dist/calendar/EventDetails.js.map

@@ -1 +1 @@
-{"version":3,"file":"EventDetails.js","sources":["../../src/calendar/EventDetails.jsx"],"sourcesContent":["// El detalle de una cita, para la ventana que se abre al picarla en el calendario: su título con el color de su tipo,\n// cuándo (el día y las horas), dónde, la liga de la reunión con «Unirse», los invitados con su respuesta, el recordatorio y\n// las notas. Pinta lo que la cita traiga; lo que no trae no ocupa lugar.\n//\n//   <EventDetails event={{title: 'Junta de cierre', start: '2026-10-20T10:00', end: '2026-10-20T11:00', location: 'Sala 2',\n//                         meetingUrl: 'https://meet.example.com/abc', attendees: [{id: 'ana', name: 'Ana', response: 'accepted'}],\n//                         reminderMinutes: 15}}\n//                 actions={<Button onClick={edit}>Editar</Button>} />\n//\n// No llama a ningún servidor ni abre la reunión por su cuenta: «Unirse» es una liga (solo http o https) y lo demás lo pone la\n// pantalla en actions. Sus textos se cambian con texts (la forma de `calendar` en los textos del paquete).\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaEventDetails con defaultProps y\n// styleOverrides de sus partes: row, rowContent, titleRow, toneDot, linkRow, link, guestsTitle, guest, guestAvatar,\n// guestName, notes, actions.\n//\n// Genérico del paquete: function (regla de la casa).\nimport Avatar from '@mui/material/Avatar';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport Chip from '@mui/material/Chip';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport AccessTimeRoundedIcon from '@mui/icons-material/AccessTimeRounded';\nimport NotesRoundedIcon from '@mui/icons-material/NotesRounded';\nimport NotificationsNoneRoundedIcon from '@mui/icons-material/NotificationsNoneRounded';\nimport PeopleOutlineRoundedIcon from '@mui/icons-material/PeopleOutlineRounded';\nimport PlaceOutlinedIcon from '@mui/icons-material/PlaceOutlined';\nimport VideocamOutlinedIcon from '@mui/icons-material/VideocamOutlined';\n\nimport {initialsOf} from '@/appShell/menuItemText.js';\nimport {REMINDER_UNIT, isOpenableMeetingUrl, reminderOf} from '@/calendar/calendarEvents.js';\nimport {useFormatters} from '@/toolkit/useFormatters.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaEventDetails)\nconst THEME_NAME = 'CalcitaEventDetails';\nconst EventRow = piecePart(THEME_NAME, 'Row', Stack);\nconst EventRowContent = piecePart(THEME_NAME, 'RowContent', Box);\nconst EventTitleRow = piecePart(THEME_NAME, 'TitleRow', Stack);\nconst EventToneDot = piecePart(THEME_NAME, 'ToneDot', Box);\nconst EventLinkRow = piecePart(THEME_NAME, 'LinkRow', Stack);\nconst EventLink = piecePart(THEME_NAME, 'Link', Typography);\nconst EventGuestsTitle = piecePart(THEME_NAME, 'GuestsTitle', Typography);\nconst EventGuest = piecePart(THEME_NAME, 'Guest', Stack);\nconst EventGuestAvatar = piecePart(THEME_NAME, 'GuestAvatar', Avatar);\nconst EventGuestName = piecePart(THEME_NAME, 'GuestName', Typography);\nconst EventNotes = piecePart(THEME_NAME, 'Notes', Typography);\nconst EventActions = piecePart(THEME_NAME, 'Actions', Stack);\n\n/** Las respuestas de un invitado. */\nexport const ATTENDEE_RESPONSE = Object.freeze({accepted: 'accepted', declined: 'declined', pending: 'pending'});\n// el color de cada respuesta (el color es información: verde va, rojo no va, gris no ha contestado)\nconst RESPONSE_COLOR = Object.freeze({\n    [ATTENDEE_RESPONSE.accepted]: 'success', [ATTENDEE_RESPONSE.declined]: 'error', [ATTENDEE_RESPONSE.pending]: 'default',\n});\n// un día completo viene sin hora («2026-10-20»)\nconst WHOLE_DAY_PATTERN = /^\\d{4}-\\d{2}-\\d{2}$/;\nconst ICON_SIZE = 20;\n\n/** Un renglón del detalle: su ícono a la izquierda y lo de adentro. */\nfunction DetailRow({Icon, label, children}) {\n    return (\n        <EventRow direction=\"row\" spacing={1.5} ownSx={{alignItems: 'flex-start'}} aria-label={label} role=\"group\">\n            <Icon sx={{fontSize: ICON_SIZE, color: 'text.secondary', mt: 0.25}} aria-hidden=\"true\" />\n            <EventRowContent ownSx={{minWidth: 0, flexGrow: 1}}>{children}</EventRowContent>\n        </EventRow>\n    );\n}\n\n/**\n * @param {object} props\n * @param {{title: string, start: string, end?: string|null, allDay?: boolean, tone?: string, location?: string, meetingUrl?: string, attendees?: Array<{id: string, name: string, email?: string, response?: 'accepted'|'declined'|'pending'}>, reminderMinutes?: number|null, description?: string}} props.event\n *     start y end como texto ISO (o AAAA-MM-DD un día completo); tone: el color de su tipo\n * @param {import('react').ReactNode} [props.actions] botones de la pantalla (editar, borrar, responder…)\n * @param {string} [props.titleId] el id del título: la ventana que lo contiene se nombra con él (aria-labelledby)\n * @param {object} [props.texts] los textos que cambian, con la forma de `calendar` en los textos del paquete\n */\nexport default function EventDetails(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaEventDetails.defaultProps) y encima lo que llega aquí\n    const {event, actions, titleId, texts, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('calendar', texts);\n    const {formatDate, formatTime} = useFormatters();\n    const isWholeDay = event.allDay || WHOLE_DAY_PATTERN.test(event.start);\n    let when = formatDate(event.start);\n    if (!isWholeDay) {\n        when = t('details.timeRange', {date: formatDate(event.start), start: formatTime(event.start), end: event.end ? formatTime(event.end) : ''});\n    }\n    const reminder = reminderOf(event.reminderMinutes);\n    const canJoin = isOpenableMeetingUrl(event.meetingUrl);\n\n    return (\n        <Stack spacing={2}>\n            <EventTitleRow direction=\"row\" spacing={1.5} ownSx={{alignItems: 'center'}}>\n                <EventToneDot aria-hidden=\"true\" ownSx={{width: 12, height: 12, borderRadius: '4px', flexShrink: 0, bgcolor: `${event.tone ?? 'primary'}.main`}} />\n                <Typography id={titleId} variant=\"h6\" component=\"h2\">{event.title}</Typography>\n            </EventTitleRow>\n            <DetailRow Icon={AccessTimeRoundedIcon} label={t('details.when')}>\n                <Typography variant=\"body2\">{isWholeDay ? t('details.allDay', {date: when}) : when}</Typography>\n            </DetailRow>\n            {event.location && (\n                <DetailRow Icon={PlaceOutlinedIcon} label={t('details.location')}>\n                    <Typography variant=\"body2\">{event.location}</Typography>\n                </DetailRow>\n            )}\n            {event.meetingUrl && (\n                <DetailRow Icon={VideocamOutlinedIcon} label={t('details.meeting')}>\n                    <EventLinkRow direction=\"row\" spacing={1} ownSx={{alignItems: 'center', flexWrap: 'wrap'}} useFlexGap>\n                        {canJoin && (\n                            <Button variant=\"contained\" size=\"small\" href={event.meetingUrl} target=\"_blank\" rel=\"noreferrer\">{t('details.join')}</Button>\n                        )}\n                        <EventLink variant=\"caption\" color=\"text.secondary\" ownSx={{wordBreak: 'break-all'}}>{event.meetingUrl}</EventLink>\n                    </EventLinkRow>\n                </DetailRow>\n            )}\n            {event.attendees?.length > 0 && (\n                <DetailRow Icon={PeopleOutlineRoundedIcon} label={t('details.attendees')}>\n                    <EventGuestsTitle variant=\"body2\" ownSx={{mb: 0.75}}>{t('details.attendeesCount', {count: event.attendees.length})}</EventGuestsTitle>\n                    <Stack spacing={0.75}>\n                        {event.attendees.map((attendee) => {\n                            const response = attendee.response ?? ATTENDEE_RESPONSE.pending;\n                            return (\n                                <EventGuest key={attendee.id} direction=\"row\" spacing={1} ownSx={{alignItems: 'center'}}>\n                                    <EventGuestAvatar ownSx={{width: 24, height: 24, fontSize: 11}}>{initialsOf(attendee.name)}</EventGuestAvatar>\n                                    <EventGuestName variant=\"body2\" ownSx={{flexGrow: 1, minWidth: 0}} noWrap>{attendee.name}</EventGuestName>\n                                    <Chip size=\"small\" variant=\"outlined\" color={RESPONSE_COLOR[response] ?? 'default'} label={t(`details.response.${response}`)} />\n                                </EventGuest>\n                            );\n                        })}\n                    </Stack>\n                </DetailRow>\n            )}\n            {reminder.unit !== REMINDER_UNIT.none && (\n                <DetailRow Icon={NotificationsNoneRoundedIcon} label={t('details.reminder')}>\n                    <Typography variant=\"body2\">{t(`details.reminderUnit.${reminder.unit}`, {count: reminder.count})}</Typography>\n                </DetailRow>\n            )}\n            {event.description && (\n                <DetailRow Icon={NotesRoundedIcon} label={t('details.notes')}>\n                    <EventNotes variant=\"body2\" ownSx={{whiteSpace: 'pre-wrap'}}>{event.description}</EventNotes>\n                </DetailRow>\n            )}\n            {actions && <EventActions direction=\"row\" spacing={1} useFlexGap ownSx={{justifyContent: 'flex-end', flexWrap: 'wrap'}}>{actions}</EventActions>}\n        </Stack>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAsCA,MAAM,aAAa;AACnB,MAAM,WAAW,UAAU,YAAY,OAAO,KAAK;AACnD,MAAM,kBAAkB,UAAU,YAAY,cAAc,GAAG;AAC/D,MAAM,gBAAgB,UAAU,YAAY,YAAY,KAAK;AAC7D,MAAM,eAAe,UAAU,YAAY,WAAW,GAAG;AACzD,MAAM,eAAe,UAAU,YAAY,WAAW,KAAK;AAC3D,MAAM,YAAY,UAAU,YAAY,QAAQ,UAAU;AAC1D,MAAM,mBAAmB,UAAU,YAAY,eAAe,UAAU;AACxE,MAAM,aAAa,UAAU,YAAY,SAAS,KAAK;AACvD,MAAM,mBAAmB,UAAU,YAAY,eAAe,MAAM;AACpE,MAAM,iBAAiB,UAAU,YAAY,aAAa,UAAU;AACpE,MAAM,aAAa,UAAU,YAAY,SAAS,UAAU;AAC5D,MAAM,eAAe,UAAU,YAAY,WAAW,KAAK;AAGpD,MAAM,oBAAoB,OAAO,OAAO,EAAC,UAAU,YAAY,UAAU,YAAY,SAAS,UAAA,CAAU;AAE/G,MAAM,iBAAiB,OAAO,OAAO;AAAA,EACjC,CAAC,kBAAkB,QAAQ,GAAG;AAAA,EAAW,CAAC,kBAAkB,QAAQ,GAAG;AAAA,EAAS,CAAC,kBAAkB,OAAO,GAAG;AACjH,CAAC;AAED,MAAM,oBAAoB;AAC1B,MAAM,YAAY;AAGlB,SAAS,UAAU,EAAC,MAAM,OAAO,YAAW;AACxC,SACI,qBAAC,UAAA,EAAS,WAAU,OAAM,SAAS,KAAK,OAAO,EAAC,YAAY,aAAA,GAAe,cAAY,OAAO,MAAK,SAC/F,UAAA;AAAA,IAAA,oBAAC,MAAA,EAAK,IAAI,EAAC,UAAU,WAAW,OAAO,kBAAkB,IAAI,KAAA,GAAO,eAAY,OAAA,CAAO;AAAA,IACvF,oBAAC,mBAAgB,OAAO,EAAC,UAAU,GAAG,UAAU,EAAA,GAAK,SAAA,CAAS;AAAA,EAAA,GAClE;AAER;AAUA,SAAwB,aAAa,OAAO;AAExC,QAAM,EAAC,OAAO,SAAS,SAAS,OAAO,GAAG,iBAAgB,cAAc,OAAO,UAAU;AACzF,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,EAAA,IAAK,sBAAsB,YAAY,KAAK;AACnD,QAAM,EAAC,YAAY,WAAA,IAAc,cAAA;AACjC,QAAM,aAAa,MAAM,UAAU,kBAAkB,KAAK,MAAM,KAAK;AACrE,MAAI,OAAO,WAAW,MAAM,KAAK;AACjC,MAAI,CAAC,YAAY;AACb,WAAO,EAAE,qBAAqB,EAAC,MAAM,WAAW,MAAM,KAAK,GAAG,OAAO,WAAW,MAAM,KAAK,GAAG,KAAK,MAAM,MAAM,WAAW,MAAM,GAAG,IAAI,IAAG;AAAA,EAC9I;AACA,QAAM,WAAW,WAAW,MAAM,eAAe;AACjD,QAAM,UAAU,qBAAqB,MAAM,UAAU;AAErD,SACI,qBAAC,OAAA,EAAM,SAAS,GACZ,UAAA;AAAA,IAAA,qBAAC,eAAA,EAAc,WAAU,OAAM,SAAS,KAAK,OAAO,EAAC,YAAY,SAAA,GAC7D,UAAA;AAAA,MAAA,oBAAC,gBAAa,eAAY,QAAO,OAAO,EAAC,OAAO,IAAI,QAAQ,IAAI,cAAc,OAAO,YAAY,GAAG,SAAS,GAAG,MAAM,QAAQ,SAAS,WAAU;AAAA,MACjJ,oBAAC,cAAW,IAAI,SAAS,SAAQ,MAAK,WAAU,MAAM,UAAA,MAAM,MAAA,CAAM;AAAA,IAAA,GACtE;AAAA,IACA,oBAAC,aAAU,MAAM,uBAAuB,OAAO,EAAE,cAAc,GAC3D,UAAA,oBAAC,YAAA,EAAW,SAAQ,SAAS,UAAA,aAAa,EAAE,kBAAkB,EAAC,MAAM,KAAA,CAAK,IAAI,KAAA,CAAK,EAAA,CACvF;AAAA,IACC,MAAM,YACH,oBAAC,WAAA,EAAU,MAAM,mBAAmB,OAAO,EAAE,kBAAkB,GAC3D,8BAAC,YAAA,EAAW,SAAQ,SAAS,UAAA,MAAM,UAAS,GAChD;AAAA,IAEH,MAAM,cACH,oBAAC,WAAA,EAAU,MAAM,sBAAsB,OAAO,EAAE,iBAAiB,GAC7D,UAAA,qBAAC,cAAA,EAAa,WAAU,OAAM,SAAS,GAAG,OAAO,EAAC,YAAY,UAAU,UAAU,OAAA,GAAS,YAAU,MAChG,UAAA;AAAA,MAAA,WACG,oBAAC,QAAA,EAAO,SAAQ,aAAY,MAAK,SAAQ,MAAM,MAAM,YAAY,QAAO,UAAS,KAAI,cAAc,UAAA,EAAE,cAAc,GAAE;AAAA,MAEzH,oBAAC,WAAA,EAAU,SAAQ,WAAU,OAAM,kBAAiB,OAAO,EAAC,WAAW,YAAA,GAAe,UAAA,MAAM,WAAA,CAAW;AAAA,IAAA,EAAA,CAC3G,EAAA,CACJ;AAAA,IAEH,MAAM,WAAW,SAAS,KACvB,qBAAC,WAAA,EAAU,MAAM,0BAA0B,OAAO,EAAE,mBAAmB,GACnE,UAAA;AAAA,MAAA,oBAAC,oBAAiB,SAAQ,SAAQ,OAAO,EAAC,IAAI,KAAA,GAAQ,UAAA,EAAE,0BAA0B,EAAC,OAAO,MAAM,UAAU,OAAA,CAAO,GAAE;AAAA,MACnH,oBAAC,SAAM,SAAS,MACX,gBAAM,UAAU,IAAI,CAAC,aAAa;AAC/B,cAAM,WAAW,SAAS,YAAY,kBAAkB;AACxD,eACI,qBAAC,YAAA,EAA6B,WAAU,OAAM,SAAS,GAAG,OAAO,EAAC,YAAY,SAAA,GAC1E,UAAA;AAAA,UAAA,oBAAC,kBAAA,EAAiB,OAAO,EAAC,OAAO,IAAI,QAAQ,IAAI,UAAU,GAAA,GAAM,UAAA,WAAW,SAAS,IAAI,GAAE;AAAA,UAC3F,oBAAC,gBAAA,EAAe,SAAQ,SAAQ,OAAO,EAAC,UAAU,GAAG,UAAU,EAAA,GAAI,QAAM,MAAE,mBAAS,MAAK;AAAA,8BACxF,MAAA,EAAK,MAAK,SAAQ,SAAQ,YAAW,OAAO,eAAe,QAAQ,KAAK,WAAW,OAAO,EAAE,oBAAoB,QAAQ,EAAE,EAAA,CAAG;AAAA,QAAA,EAAA,GAHjH,SAAS,EAI1B;AAAA,MAER,CAAC,EAAA,CACL;AAAA,IAAA,GACJ;AAAA,IAEH,SAAS,SAAS,cAAc,QAC7B,oBAAC,WAAA,EAAU,MAAM,8BAA8B,OAAO,EAAE,kBAAkB,GACtE,UAAA,oBAAC,YAAA,EAAW,SAAQ,SAAS,UAAA,EAAE,wBAAwB,SAAS,IAAI,IAAI,EAAC,OAAO,SAAS,MAAA,CAAM,EAAA,CAAE,EAAA,CACrG;AAAA,IAEH,MAAM,eACH,oBAAC,WAAA,EAAU,MAAM,kBAAkB,OAAO,EAAE,eAAe,GACvD,8BAAC,YAAA,EAAW,SAAQ,SAAQ,OAAO,EAAC,YAAY,WAAA,GAAc,UAAA,MAAM,YAAA,CAAY,EAAA,CACpF;AAAA,IAEH,WAAW,oBAAC,cAAA,EAAa,WAAU,OAAM,SAAS,GAAG,YAAU,MAAC,OAAO,EAAC,gBAAgB,YAAY,UAAU,OAAA,GAAU,UAAA,QAAA,CAAQ;AAAA,EAAA,GACrI;AAER;"}
+{"version":3,"file":"EventDetails.js","sources":["../../src/calendar/EventDetails.jsx"],"sourcesContent":["// El detalle de una cita, para la ventana que se abre al picarla en el calendario: su título con el color de su tipo,\n// cuándo (el día y las horas), dónde, la liga de la reunión con «Unirse», los invitados con su respuesta, el recordatorio y\n// las notas. Pinta lo que la cita traiga; lo que no trae no ocupa lugar.\n//\n//   <EventDetails event={{title: 'Junta de cierre', start: '2026-10-20T10:00', end: '2026-10-20T11:00', location: 'Sala 2',\n//                         meetingUrl: 'https://meet.example.com/abc', attendees: [{id: 'ana', name: 'Ana', response: 'accepted'}],\n//                         reminderMinutes: 15}}\n//                 actions={<Button onClick={edit}>Editar</Button>} />\n//\n// No llama a ningún servidor ni abre la reunión por su cuenta: «Unirse» es una liga (solo http o https) y lo demás lo pone la\n// pantalla en actions. Sus textos se cambian con texts (la forma de `calendar` en los textos del paquete).\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaEventDetails con defaultProps y\n// styleOverrides de sus partes: row, rowContent, titleRow, toneDot, linkRow, link, guestsTitle, guest, guestAvatar,\n// guestName, notes, actions.\n//\n// Genérico del paquete: function (regla de la casa).\nimport Avatar from '@mui/material/Avatar';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport Chip from '@mui/material/Chip';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport AccessTimeRoundedIcon from '@mui/icons-material/AccessTimeRounded';\nimport NotesRoundedIcon from '@mui/icons-material/NotesRounded';\nimport NotificationsNoneRoundedIcon from '@mui/icons-material/NotificationsNoneRounded';\nimport PeopleOutlineRoundedIcon from '@mui/icons-material/PeopleOutlineRounded';\nimport PlaceOutlinedIcon from '@mui/icons-material/PlaceOutlined';\nimport VideocamOutlinedIcon from '@mui/icons-material/VideocamOutlined';\n\nimport {initialsOf} from '@/appShell/menuItemText.js';\nimport {REMINDER_UNIT, isOpenableMeetingUrl, reminderOf} from '@/calendar/calendarEvents.js';\nimport {useFormatters} from '@/toolkit/useFormatters.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaEventDetails)\nconst THEME_NAME = 'CalcitaEventDetails';\nconst EventRow = piecePart(THEME_NAME, 'Row', Stack);\nconst EventRowContent = piecePart(THEME_NAME, 'RowContent', Box);\nconst EventTitleRow = piecePart(THEME_NAME, 'TitleRow', Stack);\nconst EventToneDot = piecePart(THEME_NAME, 'ToneDot', Box);\nconst EventLinkRow = piecePart(THEME_NAME, 'LinkRow', Stack);\nconst EventLink = piecePart(THEME_NAME, 'Link', Typography);\nconst EventGuestsTitle = piecePart(THEME_NAME, 'GuestsTitle', Typography);\nconst EventGuest = piecePart(THEME_NAME, 'Guest', Stack);\nconst EventGuestAvatar = piecePart(THEME_NAME, 'GuestAvatar', Avatar);\nconst EventGuestName = piecePart(THEME_NAME, 'GuestName', Typography);\nconst EventNotes = piecePart(THEME_NAME, 'Notes', Typography);\nconst EventActions = piecePart(THEME_NAME, 'Actions', Stack);\n\n/** Las respuestas de un invitado. */\nexport const ATTENDEE_RESPONSE = Object.freeze({accepted: 'accepted', declined: 'declined', pending: 'pending'});\n// el color de cada respuesta (el color es información: verde va, rojo no va, gris no ha contestado)\nconst RESPONSE_COLOR = Object.freeze({\n    [ATTENDEE_RESPONSE.accepted]: 'success', [ATTENDEE_RESPONSE.declined]: 'error', [ATTENDEE_RESPONSE.pending]: 'default',\n});\n// un día completo viene sin hora («2026-10-20»)\nconst WHOLE_DAY_PATTERN = /^\\d{4}-\\d{2}-\\d{2}$/;\nconst ICON_SIZE = 20;\n\n/** Un renglón del detalle: su ícono a la izquierda y lo de adentro. */\nfunction DetailRow({Icon, label, children}) {\n    return (\n        <EventRow direction=\"row\" spacing={1.5} ownSx={{alignItems: 'flex-start'}} aria-label={label} role=\"group\">\n            <Icon sx={{fontSize: ICON_SIZE, color: 'text.secondary', mt: 0.25}} aria-hidden=\"true\" />\n            <EventRowContent ownSx={{minWidth: 0, flexGrow: 1}}>{children}</EventRowContent>\n        </EventRow>\n    );\n}\n\n/**\n * @param {object} props\n * @param {{title: string, start: string, end?: string|null, allDay?: boolean, tone?: string, location?: string, meetingUrl?: string, attendees?: Array<{id: string, name: string, email?: string, response?: 'accepted'|'declined'|'pending'}>, reminderMinutes?: number|null, description?: string}} props.event\n *     start y end como texto ISO (o AAAA-MM-DD un día completo); tone: el color de su tipo\n * @param {import('react').ReactNode} [props.actions] botones de la pantalla (editar, borrar, responder…)\n * @param {string} [props.titleId] el id del título: la ventana que lo contiene se nombra con él (aria-labelledby)\n * @param {object} [props.texts] los textos que cambian, con la forma de `calendar` en los textos del paquete\n */\nfunction EventDetailsContent(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaEventDetails.defaultProps) y encima lo que llega aquí\n    const {event, actions, titleId, texts, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('calendar', texts);\n    const {formatDate, formatTime} = useFormatters();\n    const isWholeDay = event.allDay || WHOLE_DAY_PATTERN.test(event.start);\n    let when = formatDate(event.start);\n    if (!isWholeDay) {\n        when = t('details.timeRange', {date: formatDate(event.start), start: formatTime(event.start), end: event.end ? formatTime(event.end) : ''});\n    }\n    const reminder = reminderOf(event.reminderMinutes);\n    const canJoin = isOpenableMeetingUrl(event.meetingUrl);\n\n    return (\n        <Stack spacing={2}>\n            <EventTitleRow direction=\"row\" spacing={1.5} ownSx={{alignItems: 'center'}}>\n                <EventToneDot aria-hidden=\"true\" ownSx={{width: 12, height: 12, borderRadius: '4px', flexShrink: 0, bgcolor: `${event.tone ?? 'primary'}.main`}} />\n                <Typography id={titleId} variant=\"h6\" component=\"h2\">{event.title}</Typography>\n            </EventTitleRow>\n            <DetailRow Icon={AccessTimeRoundedIcon} label={t('details.when')}>\n                <Typography variant=\"body2\">{isWholeDay ? t('details.allDay', {date: when}) : when}</Typography>\n            </DetailRow>\n            {event.location && (\n                <DetailRow Icon={PlaceOutlinedIcon} label={t('details.location')}>\n                    <Typography variant=\"body2\">{event.location}</Typography>\n                </DetailRow>\n            )}\n            {event.meetingUrl && (\n                <DetailRow Icon={VideocamOutlinedIcon} label={t('details.meeting')}>\n                    <EventLinkRow direction=\"row\" spacing={1} ownSx={{alignItems: 'center', flexWrap: 'wrap'}} useFlexGap>\n                        {canJoin && (\n                            <Button variant=\"contained\" size=\"small\" href={event.meetingUrl} target=\"_blank\" rel=\"noreferrer\">{t('details.join')}</Button>\n                        )}\n                        <EventLink variant=\"caption\" color=\"text.secondary\" ownSx={{wordBreak: 'break-all'}}>{event.meetingUrl}</EventLink>\n                    </EventLinkRow>\n                </DetailRow>\n            )}\n            {event.attendees?.length > 0 && (\n                <DetailRow Icon={PeopleOutlineRoundedIcon} label={t('details.attendees')}>\n                    <EventGuestsTitle variant=\"body2\" ownSx={{mb: 0.75}}>{t('details.attendeesCount', {count: event.attendees.length})}</EventGuestsTitle>\n                    <Stack spacing={0.75}>\n                        {event.attendees.map((attendee) => {\n                            const response = attendee.response ?? ATTENDEE_RESPONSE.pending;\n                            return (\n                                <EventGuest key={attendee.id} direction=\"row\" spacing={1} ownSx={{alignItems: 'center'}}>\n                                    <EventGuestAvatar ownSx={{width: 24, height: 24, fontSize: 11}}>{initialsOf(attendee.name)}</EventGuestAvatar>\n                                    <EventGuestName variant=\"body2\" ownSx={{flexGrow: 1, minWidth: 0}} noWrap>{attendee.name}</EventGuestName>\n                                    <Chip size=\"small\" variant=\"outlined\" color={RESPONSE_COLOR[response] ?? 'default'} label={t(`details.response.${response}`)} />\n                                </EventGuest>\n                            );\n                        })}\n                    </Stack>\n                </DetailRow>\n            )}\n            {reminder.unit !== REMINDER_UNIT.none && (\n                <DetailRow Icon={NotificationsNoneRoundedIcon} label={t('details.reminder')}>\n                    <Typography variant=\"body2\">{t(`details.reminderUnit.${reminder.unit}`, {count: reminder.count})}</Typography>\n                </DetailRow>\n            )}\n            {event.description && (\n                <DetailRow Icon={NotesRoundedIcon} label={t('details.notes')}>\n                    <EventNotes variant=\"body2\" ownSx={{whiteSpace: 'pre-wrap'}}>{event.description}</EventNotes>\n                </DetailRow>\n            )}\n            {actions && <EventActions direction=\"row\" spacing={1} useFlexGap ownSx={{justifyContent: 'flex-end', flexWrap: 'wrap'}}>{actions}</EventActions>}\n        </Stack>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst EventDetails = withPieceSlots(EventDetailsContent, THEME_NAME);\nexport default EventDetails;\n"],"names":[],"mappings":"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"}

package/dist/date-pickers.js

@@ -1,8 +1,34 @@
-import { CALENDAR_DATE_FORMAT, default as default2 } from "./datePickers/DateInput.js";
+import { default as default2 } from "./datePickers/DateInput.js";
 import { default as default3 } from "./datePickers/FormDateField.js";
+import { default as default4 } from "./datePickers/DateTimeInput.js";
+import { default as default5 } from "./datePickers/FormDateTimeField.js";
+import { default as default6 } from "./datePickers/TimeInput.js";
+import { default as default7 } from "./datePickers/FormTimeField.js";
+import { default as default8 } from "./datePickers/MonthInput.js";
+import { default as default9 } from "./datePickers/FormMonthField.js";
+import { CALENDAR_DATE_FORMAT, CALENDAR_MONTH_FORMAT, DEFAULT_MINUTES_STEP, INSTANT_FORMAT, TIME_OF_DAY_FORMAT, earliestInstantFromNow, instantPlusMinutes, latestInstantOf, timeZoneNameOf } from "./datePickers/pickerValues.js";
+import { minutesAfterRule, minutesFromNowRule } from "./datePickers/dateTimeRules.js";
+import { useCurrentMinute } from "./datePickers/useCurrentMinute.js";
 export {
   CALENDAR_DATE_FORMAT,
+  CALENDAR_MONTH_FORMAT,
+  DEFAULT_MINUTES_STEP,
   default2 as DateInput,
-  default3 as FormDateField
+  default4 as DateTimeInput,
+  default3 as FormDateField,
+  default5 as FormDateTimeField,
+  default9 as FormMonthField,
+  default7 as FormTimeField,
+  INSTANT_FORMAT,
+  default8 as MonthInput,
+  TIME_OF_DAY_FORMAT,
+  default6 as TimeInput,
+  earliestInstantFromNow,
+  instantPlusMinutes,
+  latestInstantOf,
+  minutesAfterRule,
+  minutesFromNowRule,
+  timeZoneNameOf,
+  useCurrentMinute
 };
 //# sourceMappingURL=date-pickers.js.map

package/dist/date-pickers.js.map

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

package/dist/datePickers/DateInput.js

@@ -1,52 +1,45 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { useId } from "react";
 import dayjs from "dayjs";
-import "dayjs/locale/es";
-import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
-import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
-import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
-import { enUS, esES } from "@mui/x-date-pickers/locales";
-import { translateValidationMessage } from "../forms/validationMessages.js";
-import FieldFrame from "../inputs/FieldFrame.js";
+import PickerFrame, { textFieldSlotPropsOf } from "./PickerFrame.js";
+import { CALENDAR_DATE_FORMAT } from "./pickerValues.js";
+import { usePickerField } from "./usePickerField.js";
 import { warnUnknownProps } from "../toolkit/unknownProps.js";
-const CALENDAR_DATE_FORMAT = "YYYY-MM-DD";
-const DATE_LOOK_BY_LANGUAGE = Object.freeze({
-  es: { adapterLocale: "es", displayFormat: "DD/MM/YYYY", localeText: esES.components.MuiLocalizationProvider.defaultProps.localeText },
-  en: { adapterLocale: "en", displayFormat: "MM/DD/YYYY", localeText: enUS.components.MuiLocalizationProvider.defaultProps.localeText }
-});
+import { piecePart, withPieceSlots, usePieceProps } from "../theme/themePieces.js";
+const THEME_NAME = "CalcitaDateInput";
+const DateInputPicker = piecePart(THEME_NAME, "Picker", DatePicker);
 function pickerValueOf(calendarDate) {
   return calendarDate ? dayjs(calendarDate) : null;
 }
-function DateInput({
-  name,
-  label,
-  value,
-  onChange,
-  onBlur,
-  error,
-  helperText = " ",
-  minDate,
-  maxDate,
-  disableFuture = false,
-  disablePast = false,
-  openTo = "day",
-  disabled = false,
-  inputRef,
-  texts,
-  ...unknownProps
-}) {
-  warnUnknownProps("DateInput", unknownProps);
-  const { t, language } = useToolkitTranslation("common", texts);
-  const generatedId = useId();
-  const inputId = `${name ?? "date"}-${generatedId}`;
-  const errorText = translateValidationMessage(t, error);
-  const look = DATE_LOOK_BY_LANGUAGE[language] ?? DATE_LOOK_BY_LANGUAGE.es;
-  return /* @__PURE__ */ jsx(FieldFrame, { inputId, label, children: /* @__PURE__ */ jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, adapterLocale: look.adapterLocale, localeText: look.localeText, children: /* @__PURE__ */ jsx(
-    DatePicker,
+function DateInputContent(props) {
+  const {
+    name,
+    label,
+    value,
+    onChange,
+    onBlur,
+    error,
+    helperText = " ",
+    minDate,
+    maxDate,
+    disableFuture = false,
+    disablePast = false,
+    openTo = "day",
+    disabled = false,
+    inputRef,
+    pickerProps,
+    messages,
+    texts,
+    ...unknownProps
+  } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
+  const { language, inputId, errorText, formats } = usePickerField({ name, kind: "date", error, label, messages, texts });
+  return /* @__PURE__ */ jsx(PickerFrame, { inputId, label, language, children: /* @__PURE__ */ jsx(
+    DateInputPicker,
     {
-      format: look.displayFormat,
+      ...pickerProps,
+      format: formats.date,
       value: pickerValueOf(value),
       minDate: pickerValueOf(minDate) ?? void 0,
       maxDate: pickerValueOf(maxDate) ?? void 0,
@@ -54,24 +47,18 @@ function DateInput({
       disablePast,
       disabled,
       openTo,
-      views: openTo === "year" ? ["year", "month", "day"] : void 0,
+      views: openTo === "year" ? ["year", "month", "day"] : pickerProps?.views,
       inputRef,
       onChange: (pickedDate) => onChange(pickedDate?.isValid() ? pickedDate.format(CALENDAR_DATE_FORMAT) : ""),
-      onClose: onBlur,
-      slotProps: {
-        textField: {
-          id: inputId,
-          name,
-          size: "small",
-          fullWidth: true,
-          onBlur,
-          error: Boolean(errorText),
-          helperText: errorText ?? helperText
-        }
-      }
+      onClose: () => {
+        pickerProps?.onClose?.();
+        onBlur?.();
+      },
+      slotProps: textFieldSlotPropsOf({ id: inputId, name, onBlur, error: Boolean(errorText), helperText: errorText ?? helperText }, pickerProps)
     }
-  ) }) });
+  ) });
 }
+const DateInput = withPieceSlots(DateInputContent, THEME_NAME);
 export {
   CALENDAR_DATE_FORMAT,
   DateInput as default

package/dist/datePickers/DateInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateInput.js","sources":["../../src/datePickers/DateInput.jsx"],"sourcesContent":["// Campo de FECHA suelto con el DatePicker de MUI X (@stackcraftmx/calcita/date-pickers), con la etiqueta arriba como los\n// demás campos del paquete.\n//\n// Al formulario (y al servidor) viaja la fecha de calendario 'AAAA-MM-DD' en texto; en pantalla se ve DD/MM/AAAA en español\n// y MM/DD/AAAA en inglés, con el calendario y sus textos en el idioma activo. '' = sin fecha. Una fecha de calendario no\n// tiene hora ni zona: nunca se pasa por Date (que la movería de día según la zona).\n//\n// Cada campo trae su LocalizationProvider con dayjs: la pantalla no tiene que poner nada alrededor.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useId} from 'react';\nimport dayjs from 'dayjs';\nimport 'dayjs/locale/es';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {AdapterDayjs} from '@mui/x-date-pickers/AdapterDayjs';\nimport {DatePicker} from '@mui/x-date-pickers/DatePicker';\nimport {LocalizationProvider} from '@mui/x-date-pickers/LocalizationProvider';\nimport {enUS, esES} from '@mui/x-date-pickers/locales';\n\nimport {translateValidationMessage} from '@/forms/validationMessages.js';\nimport FieldFrame from '@/inputs/FieldFrame.jsx';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n/** Cómo viaja una fecha de calendario. */\nexport const CALENDAR_DATE_FORMAT = 'YYYY-MM-DD';\n\n// cómo se ve y con qué textos sale el calendario en cada idioma\nconst DATE_LOOK_BY_LANGUAGE = Object.freeze({\n    es: {adapterLocale: 'es', displayFormat: 'DD/MM/YYYY', localeText: esES.components.MuiLocalizationProvider.defaultProps.localeText},\n    en: {adapterLocale: 'en', displayFormat: 'MM/DD/YYYY', localeText: enUS.components.MuiLocalizationProvider.defaultProps.localeText},\n});\n\n/**\n * Una fecha de calendario 'AAAA-MM-DD' como la quiere el DatePicker; null si está vacía.\n *\n * @param {string|null|undefined} calendarDate\n * @returns {import('dayjs').Dayjs|null}\n */\nfunction pickerValueOf(calendarDate) {\n    // dayjs lee 'AAAA-MM-DD' como día local (a diferencia de new Date, que lo toma en UTC y lo mueve de día)\n    return calendarDate ? dayjs(calendarDate) : null;\n}\n\n/**\n * @param {object} props\n * @param {string} [props.name]\n * @param {string} props.label ya traducido\n * @param {string|null|undefined} props.value 'AAAA-MM-DD' o ''\n * @param {(value: string) => void} props.onChange recibe 'AAAA-MM-DD' ('' al borrar o con una fecha a medias)\n * @param {() => void} [props.onBlur]\n * @param {string|{key: string, values?: object}} [props.error]\n * @param {string} [props.helperText]\n * @param {string} [props.minDate] 'AAAA-MM-DD'\n * @param {string} [props.maxDate] 'AAAA-MM-DD'\n * @param {boolean} [props.disableFuture] p. ej. una fecha de nacimiento\n * @param {boolean} [props.disablePast] p. ej. una cita\n * @param {'day'|'month'|'year'} [props.openTo] por dónde abre el calendario (year para un nacimiento)\n * @param {boolean} [props.disabled]\n * @param {import('react').Ref<HTMLInputElement>} [props.inputRef]\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nexport default function DateInput({\n    name, label, value, onChange, onBlur, error, helperText = ' ', minDate, maxDate, disableFuture = false, disablePast = false,\n    openTo = 'day', disabled = false, inputRef, texts,\n    ...unknownProps\n}) {\n    warnUnknownProps('DateInput', unknownProps);\n    const {t, language} = useToolkitTranslation('common', texts);\n    const generatedId = useId();\n    const inputId = `${name ?? 'date'}-${generatedId}`;\n    const errorText = translateValidationMessage(t, error);\n    const look = DATE_LOOK_BY_LANGUAGE[language] ?? DATE_LOOK_BY_LANGUAGE.es;\n\n    return (\n        <FieldFrame inputId={inputId} label={label}>\n            <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={look.adapterLocale} localeText={look.localeText}>\n                <DatePicker\n                    format={look.displayFormat}\n                    value={pickerValueOf(value)}\n                    minDate={pickerValueOf(minDate) ?? undefined}\n                    maxDate={pickerValueOf(maxDate) ?? undefined}\n                    disableFuture={disableFuture}\n                    disablePast={disablePast}\n                    disabled={disabled}\n                    openTo={openTo}\n                    views={openTo === 'year' ? ['year', 'month', 'day'] : undefined}\n                    inputRef={inputRef}\n                    // una fecha a medias (25/1_/____) todavía no es fecha: viaja como vacía hasta que se complete\n                    onChange={(pickedDate) => onChange(pickedDate?.isValid() ? pickedDate.format(CALENDAR_DATE_FORMAT) : '')}\n                    onClose={onBlur}\n                    slotProps={{\n                        textField: {\n                            id: inputId, name, size: 'small', fullWidth: true, onBlur, error: Boolean(errorText), helperText: errorText ?? helperText,\n                        },\n                    }}\n                />\n            </LocalizationProvider>\n        </FieldFrame>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAwBO,MAAM,uBAAuB;AAGpC,MAAM,wBAAwB,OAAO,OAAO;AAAA,EACxC,IAAI,EAAC,eAAe,MAAM,eAAe,cAAc,YAAY,KAAK,WAAW,wBAAwB,aAAa,WAAA;AAAA,EACxH,IAAI,EAAC,eAAe,MAAM,eAAe,cAAc,YAAY,KAAK,WAAW,wBAAwB,aAAa,WAAA;AAC5H,CAAC;AAQD,SAAS,cAAc,cAAc;AAEjC,SAAO,eAAe,MAAM,YAAY,IAAI;AAChD;AAoBA,SAAwB,UAAU;AAAA,EAC9B;AAAA,EAAM;AAAA,EAAO;AAAA,EAAO;AAAA,EAAU;AAAA,EAAQ;AAAA,EAAO,aAAa;AAAA,EAAK;AAAA,EAAS;AAAA,EAAS,gBAAgB;AAAA,EAAO,cAAc;AAAA,EACtH,SAAS;AAAA,EAAO,WAAW;AAAA,EAAO;AAAA,EAAU;AAAA,EAC5C,GAAG;AACP,GAAG;AACC,mBAAiB,aAAa,YAAY;AAC1C,QAAM,EAAC,GAAG,SAAA,IAAY,sBAAsB,UAAU,KAAK;AAC3D,QAAM,cAAc,MAAA;AACpB,QAAM,UAAU,GAAG,QAAQ,MAAM,IAAI,WAAW;AAChD,QAAM,YAAY,2BAA2B,GAAG,KAAK;AACrD,QAAM,OAAO,sBAAsB,QAAQ,KAAK,sBAAsB;AAEtE,SACI,oBAAC,YAAA,EAAW,SAAkB,OAC1B,UAAA,oBAAC,sBAAA,EAAqB,aAAa,cAAc,eAAe,KAAK,eAAe,YAAY,KAAK,YACjG,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,QAAQ,KAAK;AAAA,MACb,OAAO,cAAc,KAAK;AAAA,MAC1B,SAAS,cAAc,OAAO,KAAK;AAAA,MACnC,SAAS,cAAc,OAAO,KAAK;AAAA,MACnC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO,WAAW,SAAS,CAAC,QAAQ,SAAS,KAAK,IAAI;AAAA,MACtD;AAAA,MAEA,UAAU,CAAC,eAAe,SAAS,YAAY,YAAY,WAAW,OAAO,oBAAoB,IAAI,EAAE;AAAA,MACvG,SAAS;AAAA,MACT,WAAW;AAAA,QACP,WAAW;AAAA,UACP,IAAI;AAAA,UAAS;AAAA,UAAM,MAAM;AAAA,UAAS,WAAW;AAAA,UAAM;AAAA,UAAQ,OAAO,QAAQ,SAAS;AAAA,UAAG,YAAY,aAAa;AAAA,QAAA;AAAA,MACnH;AAAA,IACJ;AAAA,EAAA,GAER,EAAA,CACJ;AAER;"}
+{"version":3,"file":"DateInput.js","sources":["../../src/datePickers/DateInput.jsx"],"sourcesContent":["// Campo de FECHA suelto con el DatePicker de MUI X (@stackcraftmx/calcita/date-pickers), con la etiqueta arriba como los\n// demás campos del paquete.\n//\n// Al formulario (y al servidor) viaja la fecha de calendario 'AAAA-MM-DD' en texto; en pantalla se ve DD/MM/AAAA en español\n// y MM/DD/AAAA en inglés, con el calendario y sus textos en el idioma activo. '' = sin fecha. Una fecha de calendario no\n// tiene hora ni zona: nunca se pasa por Date (que la movería de día según la zona).\n//\n// Cada campo trae su LocalizationProvider con dayjs (PickerFrame): la pantalla no tiene que poner nada alrededor.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaDateInput con defaultProps, styleOverrides de\n// sus partes (picker) y slots/slotProps para cambiarlas.\n//\n// Genérico del paquete: function (regla de la casa).\nimport dayjs from 'dayjs';\nimport {DatePicker} from '@mui/x-date-pickers/DatePicker';\n\nimport PickerFrame, {textFieldSlotPropsOf} from '@/datePickers/PickerFrame.jsx';\nimport {CALENDAR_DATE_FORMAT} from '@/datePickers/pickerValues.js';\nimport {usePickerField} from '@/datePickers/usePickerField.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaDateInput)\nconst THEME_NAME = 'CalcitaDateInput';\nconst DateInputPicker = piecePart(THEME_NAME, 'Picker', DatePicker);\n\nexport {CALENDAR_DATE_FORMAT};\n\n/**\n * Una fecha de calendario 'AAAA-MM-DD' como la quiere el DatePicker; null si está vacía.\n *\n * @param {string|null|undefined} calendarDate\n * @returns {import('dayjs').Dayjs|null}\n */\nfunction pickerValueOf(calendarDate) {\n    // dayjs lee 'AAAA-MM-DD' como día local (a diferencia de new Date, que lo toma en UTC y lo mueve de día)\n    return calendarDate ? dayjs(calendarDate) : null;\n}\n\n/**\n * @param {object} props\n * @param {string} [props.name]\n * @param {string} props.label ya traducido\n * @param {string|null|undefined} props.value 'AAAA-MM-DD' o ''\n * @param {(value: string) => void} props.onChange recibe 'AAAA-MM-DD' ('' al borrar o con una fecha a medias)\n * @param {() => void} [props.onBlur]\n * @param {string|{key: string, values?: object}} [props.error]\n * @param {string} [props.helperText]\n * @param {string} [props.minDate] 'AAAA-MM-DD'\n * @param {string} [props.maxDate] 'AAAA-MM-DD'\n * @param {boolean} [props.disableFuture] p. ej. una fecha de nacimiento\n * @param {boolean} [props.disablePast] p. ej. una cita\n * @param {'day'|'month'|'year'} [props.openTo] por dónde abre el calendario (year para un nacimiento)\n * @param {boolean} [props.disabled]\n * @param {import('react').Ref<HTMLInputElement>} [props.inputRef]\n * @param {object} [props.pickerProps] lo demás del DatePicker de MUI X que aquí no tiene nombre (shouldDisableDate, slots,\n *     slotProps…); value y onChange son del campo\n * @param {Record<string, string|object>} [props.messages] el texto del error de este campo, por regla de validación\n *     ({required: 'Elija la fecha', min: 'Desde mañana'}): gana al de Calcita y al de los textos\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nfunction DateInputContent(props) {\n    const {\n        name, label, value, onChange, onBlur, error, helperText = ' ', minDate, maxDate, disableFuture = false, disablePast = false,\n        openTo = 'day', disabled = false, inputRef, pickerProps, messages, texts,\n        ...unknownProps\n    } = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {language, inputId, errorText, formats} = usePickerField({name, kind: 'date', error, label, messages, texts});\n\n    return (\n        <PickerFrame inputId={inputId} label={label} language={language}>\n            <DateInputPicker\n                {...pickerProps}\n                format={formats.date}\n                value={pickerValueOf(value)}\n                minDate={pickerValueOf(minDate) ?? undefined}\n                maxDate={pickerValueOf(maxDate) ?? undefined}\n                disableFuture={disableFuture}\n                disablePast={disablePast}\n                disabled={disabled}\n                openTo={openTo}\n                views={openTo === 'year' ? ['year', 'month', 'day'] : pickerProps?.views}\n                inputRef={inputRef}\n                // una fecha a medias (25/1_/____) todavía no es fecha: viaja como vacía hasta que se complete\n                onChange={(pickedDate) => onChange(pickedDate?.isValid() ? pickedDate.format(CALENDAR_DATE_FORMAT) : '')}\n                onClose={() => {\n                    pickerProps?.onClose?.();\n                    onBlur?.();\n                }}\n                slotProps={textFieldSlotPropsOf({id: inputId, name, onBlur, error: Boolean(errorText), helperText: errorText ?? helperText}, pickerProps)}\n            />\n        </PickerFrame>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst DateInput = withPieceSlots(DateInputContent, THEME_NAME);\nexport default DateInput;\n"],"names":[],"mappings":";;;;;;;;;AAuBA,MAAM,aAAa;AACnB,MAAM,kBAAkB,UAAU,YAAY,UAAU,UAAU;AAUlE,SAAS,cAAc,cAAc;AAEjC,SAAO,eAAe,MAAM,YAAY,IAAI;AAChD;AAwBA,SAAS,iBAAiB,OAAO;AAC7B,QAAM;AAAA,IACF;AAAA,IAAM;AAAA,IAAO;AAAA,IAAO;AAAA,IAAU;AAAA,IAAQ;AAAA,IAAO,aAAa;AAAA,IAAK;AAAA,IAAS;AAAA,IAAS,gBAAgB;AAAA,IAAO,cAAc;AAAA,IACtH,SAAS;AAAA,IAAO,WAAW;AAAA,IAAO;AAAA,IAAU;AAAA,IAAa;AAAA,IAAU;AAAA,IACnE,GAAG;AAAA,EAAA,IACH,cAAc,OAAO,UAAU;AACnC,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,UAAU,SAAS,WAAW,YAAW,eAAe,EAAC,MAAM,MAAM,QAAQ,OAAO,OAAO,UAAU,OAAM;AAElH,SACI,oBAAC,aAAA,EAAY,SAAkB,OAAc,UACzC,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,QAAQ,QAAQ;AAAA,MAChB,OAAO,cAAc,KAAK;AAAA,MAC1B,SAAS,cAAc,OAAO,KAAK;AAAA,MACnC,SAAS,cAAc,OAAO,KAAK;AAAA,MACnC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO,WAAW,SAAS,CAAC,QAAQ,SAAS,KAAK,IAAI,aAAa;AAAA,MACnE;AAAA,MAEA,UAAU,CAAC,eAAe,SAAS,YAAY,YAAY,WAAW,OAAO,oBAAoB,IAAI,EAAE;AAAA,MACvG,SAAS,MAAM;AACX,qBAAa,UAAA;AACb,iBAAA;AAAA,MACJ;AAAA,MACA,WAAW,qBAAqB,EAAC,IAAI,SAAS,MAAM,QAAQ,OAAO,QAAQ,SAAS,GAAG,YAAY,aAAa,WAAA,GAAa,WAAW;AAAA,IAAA;AAAA,EAAA,GAEhJ;AAER;AAGA,MAAM,YAAY,eAAe,kBAAkB,UAAU;"}

package/dist/datePickers/DateTimeInput.js

@@ -0,0 +1,81 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
+import PickerFrame, { textFieldSlotPropsOf } from "./PickerFrame.js";
+import { DEFAULT_MINUTES_STEP, timeZoneNameOf, latestInstantOf, earliestInstantFromNow, instantTextOf, pickerInstantOf } from "./pickerValues.js";
+import { useCurrentMinute } from "./useCurrentMinute.js";
+import { usePickerField } from "./usePickerField.js";
+import { intlLocaleOf } from "../toolkit/toolkitSettings.js";
+import { useToolkitSettings } from "../toolkit/toolkitContext.js";
+import { warnUnknownProps } from "../toolkit/unknownProps.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../theme/themePieces.js";
+const THEME_NAME = "CalcitaDateTimeInput";
+const DateTimeInputPicker = piecePart(THEME_NAME, "Picker", DateTimePicker);
+const HELPER_SEPARATOR = " · ";
+function DateTimeInputContent(props) {
+  const {
+    name,
+    label,
+    value,
+    onChange,
+    onBlur,
+    error,
+    helperText,
+    minDateTime,
+    minimumMinutesFromNow,
+    maxDateTime,
+    disableFuture = false,
+    disablePast = false,
+    minutesStep = DEFAULT_MINUTES_STEP,
+    timeZone,
+    showTimeZone = true,
+    timeZoneLabel,
+    disabled = false,
+    inputRef,
+    pickerProps,
+    messages,
+    texts,
+    ...unknownProps
+  } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
+  const field = usePickerField({ name, kind: "dateTime", error, label, messages, texts });
+  const { languages } = useToolkitSettings();
+  const shownTimeZone = timeZone ?? field.timeZone;
+  const zoneText = showTimeZone ? timeZoneLabel ?? timeZoneNameOf(shownTimeZone, intlLocaleOf(field.language, languages)) : null;
+  const helperLine = [helperText, zoneText].filter(Boolean).join(HELPER_SEPARATOR) || " ";
+  const hasClockRule = minimumMinutesFromNow != null;
+  const currentMinute = useCurrentMinute(hasClockRule);
+  const earliest = latestInstantOf(minDateTime, hasClockRule ? earliestInstantFromNow(minimumMinutesFromNow, currentMinute) : "");
+  return /* @__PURE__ */ jsx(PickerFrame, { inputId: field.inputId, label, language: field.language, children: /* @__PURE__ */ jsx(
+    DateTimeInputPicker,
+    {
+      ...pickerProps,
+      timezone: shownTimeZone,
+      format: field.formats.dateTime,
+      ampm: field.formats.ampm,
+      value: pickerInstantOf(value, shownTimeZone),
+      minDateTime: pickerInstantOf(earliest, shownTimeZone) ?? void 0,
+      maxDateTime: pickerInstantOf(maxDateTime, shownTimeZone) ?? void 0,
+      disableFuture,
+      disablePast,
+      disabled,
+      minutesStep,
+      timeSteps: { minutes: minutesStep, ...pickerProps?.timeSteps },
+      inputRef,
+      onChange: (pickedValue) => onChange(instantTextOf(pickedValue)),
+      onClose: () => {
+        pickerProps?.onClose?.();
+        onBlur?.();
+      },
+      slotProps: textFieldSlotPropsOf(
+        { id: field.inputId, name, onBlur, error: Boolean(field.errorText), helperText: field.errorText ?? helperLine },
+        pickerProps
+      )
+    }
+  ) });
+}
+const DateTimeInput = withPieceSlots(DateTimeInputContent, THEME_NAME);
+export {
+  DateTimeInput as default
+};
+//# sourceMappingURL=DateTimeInput.js.map

package/dist/datePickers/DateTimeInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeInput.js","sources":["../../src/datePickers/DateTimeInput.jsx"],"sourcesContent":["// Campo de FECHA CON HORA suelto con el DateTimePicker de MUI X (@stackcraftmx/calcita/date-pickers), para un instante:\n// una cita, un envío programado, «posponer hasta».\n//\n// Viaja como instante en UTC ('2026-11-01T18:30:00Z') y se pinta en la zona del proveedor (ToolkitProvider timeZone),\n// rotulada abajo con su nombre («Hora estándar central»): quien lo ve sabe en qué hora está escribiendo aunque su equipo\n// esté en otra zona. Lee también lo que llega del servidor con desfase ('…-06:00'). '' = vacío. La hora sale de 24 horas o\n// con a.m. y p.m. según el hourCycle del proveedor.\n//\n// Los minutos van de uno en uno (minutesStep los cambia). Para «al menos N minutos después de ahora» (publicar con\n// anticipación) está minimumMinutesFromNow: el mínimo se recorre solo con el reloj mientras la pantalla está abierta. Para\n// «el fin, al menos N minutos después del inicio», minDateTime={instantPlusMinutes(startsAt, N)}. Con formik, las mismas\n// reglas en yup: minutesFromNowRule y minutesAfterRule (el servidor vuelve a revisar).\n//\n// Para una hora del día sin fecha («abre a las 09:00») va TimeInput; para una fecha sin hora, DateInput.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaDateTimeInput con defaultProps, styleOverrides de\n// sus partes (picker) y slots/slotProps para cambiarlas.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {DateTimePicker} from '@mui/x-date-pickers/DateTimePicker';\n\nimport PickerFrame, {textFieldSlotPropsOf} from '@/datePickers/PickerFrame.jsx';\nimport {\n    DEFAULT_MINUTES_STEP, earliestInstantFromNow, instantTextOf, latestInstantOf, pickerInstantOf, timeZoneNameOf,\n} from '@/datePickers/pickerValues.js';\nimport {useCurrentMinute} from '@/datePickers/useCurrentMinute.js';\nimport {usePickerField} from '@/datePickers/usePickerField.js';\nimport {intlLocaleOf} from '@/toolkit/toolkitSettings.js';\nimport {useToolkitSettings} from '@/toolkit/toolkitContext.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaDateTimeInput)\nconst THEME_NAME = 'CalcitaDateTimeInput';\nconst DateTimeInputPicker = piecePart(THEME_NAME, 'Picker', DateTimePicker);\n\n// entre la ayuda de la pantalla y el nombre de la zona\nconst HELPER_SEPARATOR = ' · ';\n\n/**\n * @param {object} props\n * @param {string} [props.name]\n * @param {string} props.label ya traducido\n * @param {string|null|undefined} props.value el instante ('2026-11-01T18:30:00Z' o con desfase) o ''\n * @param {(value: string) => void} props.onChange recibe el instante en UTC ('' al borrar o a medias)\n * @param {() => void} [props.onBlur]\n * @param {string|{key: string, values?: object}} [props.error]\n * @param {string} [props.helperText] ya traducida; va antes del nombre de la zona\n * @param {string} [props.minDateTime] instante (el fin de algo: instantPlusMinutes(startsAt, 30))\n * @param {number} [props.minimumMinutesFromNow] al menos tantos minutos después de ahora; se recorre con el reloj\n * @param {string} [props.maxDateTime] instante\n * @param {boolean} [props.disableFuture]\n * @param {boolean} [props.disablePast] p. ej. un envío programado\n * @param {number} [props.minutesStep] de cuánto en cuánto van los minutos; por omisión de uno en uno (15 para citas de\n *     cuarto de hora)\n * @param {string} [props.timeZone] otra zona que la del proveedor (la de una sucursal); rotulada igual\n * @param {boolean} [props.showTimeZone] false quita el nombre de la zona de abajo (por omisión se ve)\n * @param {string} [props.timeZoneLabel] ya traducido, en lugar del nombre que da el navegador\n * @param {boolean} [props.disabled]\n * @param {import('react').Ref<HTMLInputElement>} [props.inputRef]\n * @param {object} [props.pickerProps] lo demás del DateTimePicker de MUI X que aquí no tiene nombre (views, shouldDisableDate,\n *     slots, slotProps…); value y onChange son del campo\n * @param {Record<string, string|object>} [props.messages] el texto del error de este campo, por regla de validación\n *     ({required: 'Elija la fecha', min: 'Desde mañana'}): gana al de Calcita y al de los textos\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nfunction DateTimeInputContent(props) {\n    const {\n        name, label, value, onChange, onBlur, error, helperText, minDateTime, minimumMinutesFromNow, maxDateTime, disableFuture = false,\n        disablePast = false, minutesStep = DEFAULT_MINUTES_STEP, timeZone, showTimeZone = true, timeZoneLabel, disabled = false, inputRef, pickerProps, messages, texts,\n        ...unknownProps\n    } = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const field = usePickerField({name, kind: 'dateTime', error, label, messages, texts});\n    const {languages} = useToolkitSettings();\n    const shownTimeZone = timeZone ?? field.timeZone;\n    const zoneText = showTimeZone ? (timeZoneLabel ?? timeZoneNameOf(shownTimeZone, intlLocaleOf(field.language, languages))) : null;\n    const helperLine = [helperText, zoneText].filter(Boolean).join(HELPER_SEPARATOR) || ' ';\n    // el mínimo que de verdad aplica: el que da la pantalla o el de «ahora + N minutos», el más tarde\n    const hasClockRule = minimumMinutesFromNow != null;\n    const currentMinute = useCurrentMinute(hasClockRule);\n    const earliest = latestInstantOf(minDateTime, hasClockRule ? earliestInstantFromNow(minimumMinutesFromNow, currentMinute) : '');\n\n    return (\n        <PickerFrame inputId={field.inputId} label={label} language={field.language}>\n            <DateTimeInputPicker\n                {...pickerProps}\n                timezone={shownTimeZone}\n                format={field.formats.dateTime}\n                ampm={field.formats.ampm}\n                value={pickerInstantOf(value, shownTimeZone)}\n                minDateTime={pickerInstantOf(earliest, shownTimeZone) ?? undefined}\n                maxDateTime={pickerInstantOf(maxDateTime, shownTimeZone) ?? undefined}\n                disableFuture={disableFuture}\n                disablePast={disablePast}\n                disabled={disabled}\n                minutesStep={minutesStep}\n                timeSteps={{minutes: minutesStep, ...pickerProps?.timeSteps}}\n                inputRef={inputRef}\n                onChange={(pickedValue) => onChange(instantTextOf(pickedValue))}\n                onClose={() => {\n                    pickerProps?.onClose?.();\n                    onBlur?.();\n                }}\n                slotProps={textFieldSlotPropsOf(\n                    {id: field.inputId, name, onBlur, error: Boolean(field.errorText), helperText: field.errorText ?? helperLine},\n                    pickerProps,\n                )}\n            />\n        </PickerFrame>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst DateTimeInput = withPieceSlots(DateTimeInputContent, THEME_NAME);\nexport default DateTimeInput;\n"],"names":[],"mappings":";;;;;;;;;;;AAiCA,MAAM,aAAa;AACnB,MAAM,sBAAsB,UAAU,YAAY,UAAU,cAAc;AAG1E,MAAM,mBAAmB;AA6BzB,SAAS,qBAAqB,OAAO;AACjC,QAAM;AAAA,IACF;AAAA,IAAM;AAAA,IAAO;AAAA,IAAO;AAAA,IAAU;AAAA,IAAQ;AAAA,IAAO;AAAA,IAAY;AAAA,IAAa;AAAA,IAAuB;AAAA,IAAa,gBAAgB;AAAA,IAC1H,cAAc;AAAA,IAAO,cAAc;AAAA,IAAsB;AAAA,IAAU,eAAe;AAAA,IAAM;AAAA,IAAe,WAAW;AAAA,IAAO;AAAA,IAAU;AAAA,IAAa;AAAA,IAAU;AAAA,IAC1J,GAAG;AAAA,EAAA,IACH,cAAc,OAAO,UAAU;AACnC,mBAAiB,YAAY,YAAY;AACzC,QAAM,QAAQ,eAAe,EAAC,MAAM,MAAM,YAAY,OAAO,OAAO,UAAU,OAAM;AACpF,QAAM,EAAC,UAAA,IAAa,mBAAA;AACpB,QAAM,gBAAgB,YAAY,MAAM;AACxC,QAAM,WAAW,eAAgB,iBAAiB,eAAe,eAAe,aAAa,MAAM,UAAU,SAAS,CAAC,IAAK;AAC5H,QAAM,aAAa,CAAC,YAAY,QAAQ,EAAE,OAAO,OAAO,EAAE,KAAK,gBAAgB,KAAK;AAEpF,QAAM,eAAe,yBAAyB;AAC9C,QAAM,gBAAgB,iBAAiB,YAAY;AACnD,QAAM,WAAW,gBAAgB,aAAa,eAAe,uBAAuB,uBAAuB,aAAa,IAAI,EAAE;AAE9H,SACI,oBAAC,eAAY,SAAS,MAAM,SAAS,OAAc,UAAU,MAAM,UAC/D,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,UAAU;AAAA,MACV,QAAQ,MAAM,QAAQ;AAAA,MACtB,MAAM,MAAM,QAAQ;AAAA,MACpB,OAAO,gBAAgB,OAAO,aAAa;AAAA,MAC3C,aAAa,gBAAgB,UAAU,aAAa,KAAK;AAAA,MACzD,aAAa,gBAAgB,aAAa,aAAa,KAAK;AAAA,MAC5D;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,EAAC,SAAS,aAAa,GAAG,aAAa,UAAA;AAAA,MAClD;AAAA,MACA,UAAU,CAAC,gBAAgB,SAAS,cAAc,WAAW,CAAC;AAAA,MAC9D,SAAS,MAAM;AACX,qBAAa,UAAA;AACb,iBAAA;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,QACP,EAAC,IAAI,MAAM,SAAS,MAAM,QAAQ,OAAO,QAAQ,MAAM,SAAS,GAAG,YAAY,MAAM,aAAa,WAAA;AAAA,QAClG;AAAA,MAAA;AAAA,IACJ;AAAA,EAAA,GAER;AAER;AAGA,MAAM,gBAAgB,eAAe,sBAAsB,UAAU;"}

package/dist/datePickers/FormDateTimeField.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import DateTimeInput from "./DateTimeInput.js";
+import { useFormikField } from "../forms/useFormikField.js";
+function FormDateTimeField({ name, ...inputProps }) {
+  const fieldProps = useFormikField(name);
+  return /* @__PURE__ */ jsx(DateTimeInput, { ...inputProps, ...fieldProps });
+}
+export {
+  FormDateTimeField as default
+};
+//# sourceMappingURL=FormDateTimeField.js.map

package/dist/datePickers/FormDateTimeField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormDateTimeField.js","sources":["../../src/datePickers/FormDateTimeField.jsx"],"sourcesContent":["// Campo de fecha con hora de formik: DateTimeInput conectado a su campo. Al formulario llega el instante en\n// UTC ('2026-11-01T18:30:00Z').\n//\n// Con react-hook-form no hay uno listo (esta puerta no pide react-hook-form): DateTimeInput va dentro de un Controller.\n//\n// Genérico del paquete: function (regla de la casa).\nimport DateTimeInput from '@/datePickers/DateTimeInput.jsx';\nimport {useFormikField} from '@/forms/useFormikField.js';\n\n/**\n * @param {{name: string} & Omit<Parameters<typeof import('@/datePickers/DateTimeInput.jsx').default>[0], 'name'|'value'|'onChange'|'onBlur'|'error'>} props las de\n *     DateTimeInput (minDateTime, minimumMinutesFromNow, disablePast, minutesStep, timeZone…), sin value / onChange / onBlur / error\n */\nexport default function FormDateTimeField({name, ...inputProps}) {\n    const fieldProps = useFormikField(name);\n    return <DateTimeInput {...inputProps} {...fieldProps} />;\n}\n"],"names":[],"mappings":";;;;AAaA,SAAwB,kBAAkB,EAAC,MAAM,GAAG,cAAa;AAC7D,QAAM,aAAa,eAAe,IAAI;AACtC,SAAO,oBAAC,eAAA,EAAe,GAAG,YAAa,GAAG,WAAA,CAAY;AAC1D;"}

package/dist/datePickers/FormMonthField.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import MonthInput from "./MonthInput.js";
+import { useFormikField } from "../forms/useFormikField.js";
+function FormMonthField({ name, ...inputProps }) {
+  const fieldProps = useFormikField(name);
+  return /* @__PURE__ */ jsx(MonthInput, { ...inputProps, ...fieldProps });
+}
+export {
+  FormMonthField as default
+};
+//# sourceMappingURL=FormMonthField.js.map

package/dist/datePickers/FormMonthField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormMonthField.js","sources":["../../src/datePickers/FormMonthField.jsx"],"sourcesContent":["// Campo de mes de formik: MonthInput conectado a su campo. Al formulario llega 'AAAA-MM'.\n//\n// Con react-hook-form no hay uno listo (esta puerta no pide react-hook-form): MonthInput va dentro de un Controller.\n//\n// Genérico del paquete: function (regla de la casa).\nimport MonthInput from '@/datePickers/MonthInput.jsx';\nimport {useFormikField} from '@/forms/useFormikField.js';\n\n/**\n * @param {{name: string} & Omit<Parameters<typeof import('@/datePickers/MonthInput.jsx').default>[0], 'name'|'value'|'onChange'|'onBlur'|'error'>} props las de\n *     MonthInput (minMonth, maxMonth, disableFuture…), sin value / onChange / onBlur / error\n */\nexport default function FormMonthField({name, ...inputProps}) {\n    const fieldProps = useFormikField(name);\n    return <MonthInput {...inputProps} {...fieldProps} />;\n}\n"],"names":[],"mappings":";;;;AAYA,SAAwB,eAAe,EAAC,MAAM,GAAG,cAAa;AAC1D,QAAM,aAAa,eAAe,IAAI;AACtC,SAAO,oBAAC,YAAA,EAAY,GAAG,YAAa,GAAG,WAAA,CAAY;AACvD;"}

package/dist/datePickers/FormTimeField.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import TimeInput from "./TimeInput.js";
+import { useFormikField } from "../forms/useFormikField.js";
+function FormTimeField({ name, ...inputProps }) {
+  const fieldProps = useFormikField(name);
+  return /* @__PURE__ */ jsx(TimeInput, { ...inputProps, ...fieldProps });
+}
+export {
+  FormTimeField as default
+};
+//# sourceMappingURL=FormTimeField.js.map

package/dist/datePickers/FormTimeField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormTimeField.js","sources":["../../src/datePickers/FormTimeField.jsx"],"sourcesContent":["// Campo de hora de formik: TimeInput conectado a su campo. Al formulario llega 'HH:mm'.\n//\n// Con react-hook-form no hay uno listo (esta puerta no pide react-hook-form): TimeInput va dentro de un Controller.\n//\n// Genérico del paquete: function (regla de la casa).\nimport TimeInput from '@/datePickers/TimeInput.jsx';\nimport {useFormikField} from '@/forms/useFormikField.js';\n\n/**\n * @param {{name: string} & Omit<Parameters<typeof import('@/datePickers/TimeInput.jsx').default>[0], 'name'|'value'|'onChange'|'onBlur'|'error'>} props las de\n *     TimeInput (minTime, maxTime, minutesStep…), sin value / onChange / onBlur / error\n */\nexport default function FormTimeField({name, ...inputProps}) {\n    const fieldProps = useFormikField(name);\n    return <TimeInput {...inputProps} {...fieldProps} />;\n}\n"],"names":[],"mappings":";;;;AAYA,SAAwB,cAAc,EAAC,MAAM,GAAG,cAAa;AACzD,QAAM,aAAa,eAAe,IAAI;AACtC,SAAO,oBAAC,WAAA,EAAW,GAAG,YAAa,GAAG,WAAA,CAAY;AACtD;"}

package/dist/datePickers/MonthInput.js

@@ -0,0 +1,64 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { DatePicker } from "@mui/x-date-pickers/DatePicker";
+import PickerFrame, { textFieldSlotPropsOf } from "./PickerFrame.js";
+import { monthTextOf, pickerMonthOf } from "./pickerValues.js";
+import { usePickerField } from "./usePickerField.js";
+import { warnUnknownProps } from "../toolkit/unknownProps.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../theme/themePieces.js";
+const THEME_NAME = "CalcitaMonthInput";
+const MonthInputPicker = piecePart(THEME_NAME, "Picker", DatePicker);
+const MONTH_VIEWS = ["year", "month"];
+function MonthInputContent(props) {
+  const {
+    name,
+    label,
+    value,
+    onChange,
+    onBlur,
+    error,
+    helperText = " ",
+    minMonth,
+    maxMonth,
+    disableFuture = false,
+    disablePast = false,
+    disabled = false,
+    inputRef,
+    pickerProps,
+    messages,
+    texts,
+    ...unknownProps
+  } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
+  const field = usePickerField({ name, kind: "month", error, label, messages, texts });
+  return /* @__PURE__ */ jsx(PickerFrame, { inputId: field.inputId, label, language: field.language, children: /* @__PURE__ */ jsx(
+    MonthInputPicker,
+    {
+      ...pickerProps,
+      views: MONTH_VIEWS,
+      openTo: "month",
+      format: field.formats.month,
+      value: pickerMonthOf(value),
+      minDate: pickerMonthOf(minMonth) ?? void 0,
+      maxDate: pickerMonthOf(maxMonth) ?? void 0,
+      disableFuture,
+      disablePast,
+      disabled,
+      inputRef,
+      onChange: (pickedValue) => onChange(monthTextOf(pickedValue)),
+      onClose: () => {
+        pickerProps?.onClose?.();
+        onBlur?.();
+      },
+      slotProps: textFieldSlotPropsOf(
+        { id: field.inputId, name, onBlur, error: Boolean(field.errorText), helperText: field.errorText ?? helperText },
+        pickerProps
+      )
+    }
+  ) });
+}
+const MonthInput = withPieceSlots(MonthInputContent, THEME_NAME);
+export {
+  MonthInput as default
+};
+//# sourceMappingURL=MonthInput.js.map

package/dist/datePickers/MonthInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MonthInput.js","sources":["../../src/datePickers/MonthInput.jsx"],"sourcesContent":["// Campo de MES suelto con el DatePicker de MUI X en meses y años (@stackcraftmx/calcita/date-pickers): el mes de un\n// reporte, de un saldo, de un cierre.\n//\n// Viaja 'AAAA-MM' en texto y se ve con el nombre del mes en el idioma activo («noviembre 2026»). Abre en los meses del año\n// que ya tiene; el año se cambia arriba. '' = vacío. Como la fecha, no se pasa por Date (que lo movería de mes según la\n// zona el día 1).\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaMonthInput con defaultProps, styleOverrides de\n// sus partes (picker) y slots/slotProps para cambiarlas.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {DatePicker} from '@mui/x-date-pickers/DatePicker';\n\nimport PickerFrame, {textFieldSlotPropsOf} from '@/datePickers/PickerFrame.jsx';\nimport {monthTextOf, pickerMonthOf} from '@/datePickers/pickerValues.js';\nimport {usePickerField} from '@/datePickers/usePickerField.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaMonthInput)\nconst THEME_NAME = 'CalcitaMonthInput';\nconst MonthInputPicker = piecePart(THEME_NAME, 'Picker', DatePicker);\n\n// primero el año y luego el mes: el selector abre en los meses y el año se cambia con su botón de arriba\nconst MONTH_VIEWS = ['year', 'month'];\n\n/**\n * @param {object} props\n * @param {string} [props.name]\n * @param {string} props.label ya traducido\n * @param {string|null|undefined} props.value 'AAAA-MM' o ''\n * @param {(value: string) => void} props.onChange recibe 'AAAA-MM' ('' al borrar o a medias)\n * @param {() => void} [props.onBlur]\n * @param {string|{key: string, values?: object}} [props.error]\n * @param {string} [props.helperText]\n * @param {string} [props.minMonth] 'AAAA-MM'\n * @param {string} [props.maxMonth] 'AAAA-MM'\n * @param {boolean} [props.disableFuture] p. ej. el mes de un reporte que ya cerró\n * @param {boolean} [props.disablePast]\n * @param {boolean} [props.disabled]\n * @param {import('react').Ref<HTMLInputElement>} [props.inputRef]\n * @param {object} [props.pickerProps] lo demás del DatePicker de MUI X que aquí no tiene nombre (shouldDisableMonth, slots,\n *     slotProps…); value y onChange son del campo\n * @param {Record<string, string|object>} [props.messages] el texto del error de este campo, por regla de validación\n *     ({required: 'Elija la fecha', min: 'Desde mañana'}): gana al de Calcita y al de los textos\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nfunction MonthInputContent(props) {\n    const {\n        name, label, value, onChange, onBlur, error, helperText = ' ', minMonth, maxMonth, disableFuture = false, disablePast = false,\n        disabled = false, inputRef, pickerProps, messages, texts,\n        ...unknownProps\n    } = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const field = usePickerField({name, kind: 'month', error, label, messages, texts});\n\n    return (\n        <PickerFrame inputId={field.inputId} label={label} language={field.language}>\n            <MonthInputPicker\n                {...pickerProps}\n                views={MONTH_VIEWS}\n                openTo=\"month\"\n                format={field.formats.month}\n                value={pickerMonthOf(value)}\n                minDate={pickerMonthOf(minMonth) ?? undefined}\n                maxDate={pickerMonthOf(maxMonth) ?? undefined}\n                disableFuture={disableFuture}\n                disablePast={disablePast}\n                disabled={disabled}\n                inputRef={inputRef}\n                onChange={(pickedValue) => onChange(monthTextOf(pickedValue))}\n                onClose={() => {\n                    pickerProps?.onClose?.();\n                    onBlur?.();\n                }}\n                slotProps={textFieldSlotPropsOf(\n                    {id: field.inputId, name, onBlur, error: Boolean(field.errorText), helperText: field.errorText ?? helperText},\n                    pickerProps,\n                )}\n            />\n        </PickerFrame>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst MonthInput = withPieceSlots(MonthInputContent, THEME_NAME);\nexport default MonthInput;\n"],"names":[],"mappings":";;;;;;;;AAoBA,MAAM,aAAa;AACnB,MAAM,mBAAmB,UAAU,YAAY,UAAU,UAAU;AAGnE,MAAM,cAAc,CAAC,QAAQ,OAAO;AAuBpC,SAAS,kBAAkB,OAAO;AAC9B,QAAM;AAAA,IACF;AAAA,IAAM;AAAA,IAAO;AAAA,IAAO;AAAA,IAAU;AAAA,IAAQ;AAAA,IAAO,aAAa;AAAA,IAAK;AAAA,IAAU;AAAA,IAAU,gBAAgB;AAAA,IAAO,cAAc;AAAA,IACxH,WAAW;AAAA,IAAO;AAAA,IAAU;AAAA,IAAa;AAAA,IAAU;AAAA,IACnD,GAAG;AAAA,EAAA,IACH,cAAc,OAAO,UAAU;AACnC,mBAAiB,YAAY,YAAY;AACzC,QAAM,QAAQ,eAAe,EAAC,MAAM,MAAM,SAAS,OAAO,OAAO,UAAU,OAAM;AAEjF,SACI,oBAAC,eAAY,SAAS,MAAM,SAAS,OAAc,UAAU,MAAM,UAC/D,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,OAAO;AAAA,MACP,QAAO;AAAA,MACP,QAAQ,MAAM,QAAQ;AAAA,MACtB,OAAO,cAAc,KAAK;AAAA,MAC1B,SAAS,cAAc,QAAQ,KAAK;AAAA,MACpC,SAAS,cAAc,QAAQ,KAAK;AAAA,MACpC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,CAAC,gBAAgB,SAAS,YAAY,WAAW,CAAC;AAAA,MAC5D,SAAS,MAAM;AACX,qBAAa,UAAA;AACb,iBAAA;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,QACP,EAAC,IAAI,MAAM,SAAS,MAAM,QAAQ,OAAO,QAAQ,MAAM,SAAS,GAAG,YAAY,MAAM,aAAa,WAAA;AAAA,QAClG;AAAA,MAAA;AAAA,IACJ;AAAA,EAAA,GAER;AAER;AAGA,MAAM,aAAa,eAAe,mBAAmB,UAAU;"}

package/dist/datePickers/PickerFrame.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import "dayjs/locale/es.js";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { enUS, esES } from "@mui/x-date-pickers/locales";
+import FieldFrame from "../inputs/FieldFrame.js";
+const ADAPTER_BY_LANGUAGE = Object.freeze({
+  es: { adapterLocale: "es", localeText: esES.components.MuiLocalizationProvider.defaultProps.localeText },
+  en: { adapterLocale: "en", localeText: enUS.components.MuiLocalizationProvider.defaultProps.localeText }
+});
+function textFieldSlotPropsOf(textField, pickerProps) {
+  const screenSlotProps = pickerProps?.slotProps ?? {};
+  return {
+    ...screenSlotProps,
+    textField: { size: "small", fullWidth: true, ...textField, ...screenSlotProps.textField }
+  };
+}
+function PickerFrame({ inputId, label, language, children }) {
+  const adapter = ADAPTER_BY_LANGUAGE[language] ?? ADAPTER_BY_LANGUAGE.es;
+  return /* @__PURE__ */ jsx(FieldFrame, { inputId, label, children: /* @__PURE__ */ jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, adapterLocale: adapter.adapterLocale, localeText: adapter.localeText, children }) });
+}
+export {
+  PickerFrame as default,
+  textFieldSlotPropsOf
+};
+//# sourceMappingURL=PickerFrame.js.map

package/dist/datePickers/PickerFrame.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PickerFrame.js","sources":["../../src/datePickers/PickerFrame.jsx"],"sourcesContent":["// El marco que comparten los campos de fecha, fecha con hora, hora y mes: la etiqueta arriba como los demás campos del\n// paquete (FieldFrame; dentro de una FormSection, el renglón de Apple) y el LocalizationProvider de MUI X con dayjs, el\n// idioma activo y los textos del calendario en ese idioma. Así la pantalla no pone nada alrededor.\n//\n// También arma las piezas de MUI X que se repiten en los cuatro (textFieldSlotPropsOf): el campo chico, a todo lo ancho,\n// con su error o su ayuda abajo, y lo que la pantalla le pase en pickerProps.slotProps.textField encima.\n//\n// Genérico del paquete: function (regla de la casa).\n\n// con .js: Node (la prueba de humo, Next al pintar en el servidor) no completa la extensión de un archivo suelto de dayjs\nimport 'dayjs/locale/es.js';\nimport {AdapterDayjs} from '@mui/x-date-pickers/AdapterDayjs';\nimport {LocalizationProvider} from '@mui/x-date-pickers/LocalizationProvider';\nimport {enUS, esES} from '@mui/x-date-pickers/locales';\n\nimport FieldFrame from '@/inputs/FieldFrame.jsx';\n\n// el idioma de dayjs (nombres de meses y días) y los textos del calendario de MUI X en cada idioma; el que no está aquí\n// sale en español, como desde antes\nconst ADAPTER_BY_LANGUAGE = Object.freeze({\n    es: {adapterLocale: 'es', localeText: esES.components.MuiLocalizationProvider.defaultProps.localeText},\n    en: {adapterLocale: 'en', localeText: enUS.components.MuiLocalizationProvider.defaultProps.localeText},\n});\n\n/**\n * Los slotProps del selector con el campo de la casa y, encima, lo que pasó la pantalla en pickerProps.slotProps.\n *\n * @param {object} textField lo de la casa: id, name, onBlur, error, helperText\n * @param {object} [pickerProps] lo que la pantalla le pasa al selector de MUI X\n * @returns {object}\n */\nexport function textFieldSlotPropsOf(textField, pickerProps) {\n    const screenSlotProps = pickerProps?.slotProps ?? {};\n    return {\n        ...screenSlotProps,\n        textField: {size: 'small', fullWidth: true, ...textField, ...screenSlotProps.textField},\n    };\n}\n\n/**\n * @param {object} props\n * @param {string} props.inputId\n * @param {import('react').ReactNode} props.label ya traducida\n * @param {string} props.language el del proveedor más cercano\n * @param {import('react').ReactNode} props.children el selector de MUI X\n */\nexport default function PickerFrame({inputId, label, language, children}) {\n    const adapter = ADAPTER_BY_LANGUAGE[language] ?? ADAPTER_BY_LANGUAGE.es;\n\n    return (\n        <FieldFrame inputId={inputId} label={label}>\n            <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={adapter.adapterLocale} localeText={adapter.localeText}>\n                {children}\n            </LocalizationProvider>\n        </FieldFrame>\n    );\n}\n"],"names":[],"mappings":";;;;;;;AAmBA,MAAM,sBAAsB,OAAO,OAAO;AAAA,EACtC,IAAI,EAAC,eAAe,MAAM,YAAY,KAAK,WAAW,wBAAwB,aAAa,WAAA;AAAA,EAC3F,IAAI,EAAC,eAAe,MAAM,YAAY,KAAK,WAAW,wBAAwB,aAAa,WAAA;AAC/F,CAAC;AASM,SAAS,qBAAqB,WAAW,aAAa;AACzD,QAAM,kBAAkB,aAAa,aAAa,CAAA;AAClD,SAAO;AAAA,IACH,GAAG;AAAA,IACH,WAAW,EAAC,MAAM,SAAS,WAAW,MAAM,GAAG,WAAW,GAAG,gBAAgB,UAAA;AAAA,EAAS;AAE9F;AASA,SAAwB,YAAY,EAAC,SAAS,OAAO,UAAU,YAAW;AACtE,QAAM,UAAU,oBAAoB,QAAQ,KAAK,oBAAoB;AAErE,SACI,oBAAC,YAAA,EAAW,SAAkB,OAC1B,8BAAC,sBAAA,EAAqB,aAAa,cAAc,eAAe,QAAQ,eAAe,YAAY,QAAQ,YACtG,UACL,GACJ;AAER;"}

package/dist/datePickers/TimeInput.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { TimePicker } from "@mui/x-date-pickers/TimePicker";
+import PickerFrame, { textFieldSlotPropsOf } from "./PickerFrame.js";
+import { DEFAULT_MINUTES_STEP, timeTextOf, pickerTimeOf } from "./pickerValues.js";
+import { usePickerField } from "./usePickerField.js";
+import { warnUnknownProps } from "../toolkit/unknownProps.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../theme/themePieces.js";
+const THEME_NAME = "CalcitaTimeInput";
+const TimeInputPicker = piecePart(THEME_NAME, "Picker", TimePicker);
+function TimeInputContent(props) {
+  const {
+    name,
+    label,
+    value,
+    onChange,
+    onBlur,
+    error,
+    helperText = " ",
+    minTime,
+    maxTime,
+    minutesStep = DEFAULT_MINUTES_STEP,
+    disabled = false,
+    inputRef,
+    pickerProps,
+    messages,
+    texts,
+    ...unknownProps
+  } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
+  const field = usePickerField({ name, kind: "time", error, label, messages, texts });
+  return /* @__PURE__ */ jsx(PickerFrame, { inputId: field.inputId, label, language: field.language, children: /* @__PURE__ */ jsx(
+    TimeInputPicker,
+    {
+      ...pickerProps,
+      format: field.formats.time,
+      ampm: field.formats.ampm,
+      value: pickerTimeOf(value),
+      minTime: pickerTimeOf(minTime) ?? void 0,
+      maxTime: pickerTimeOf(maxTime) ?? void 0,
+      disabled,
+      minutesStep,
+      timeSteps: { minutes: minutesStep, ...pickerProps?.timeSteps },
+      inputRef,
+      onChange: (pickedValue) => onChange(timeTextOf(pickedValue)),
+      onClose: () => {
+        pickerProps?.onClose?.();
+        onBlur?.();
+      },
+      slotProps: textFieldSlotPropsOf(
+        { id: field.inputId, name, onBlur, error: Boolean(field.errorText), helperText: field.errorText ?? helperText },
+        pickerProps
+      )
+    }
+  ) });
+}
+const TimeInput = withPieceSlots(TimeInputContent, THEME_NAME);
+export {
+  TimeInput as default
+};
+//# sourceMappingURL=TimeInput.js.map