@arquimedes.co/eureka-forms 3.0.59-new-steps → 3.0.59

package/dist/Shared/ErkBookingPicker/ErkBookingPicker.module.css

@@ -1,608 +0,0 @@
-.container {
-    max-width: 100%;
-    box-sizing: border-box;
-}
-
-.card {
-    border: 1px solid var(--eureka-outline, #d9dee6);
-    border-radius: 16px;
-    overflow: hidden;
-    background: var(--eureka-bg, #fff);
-    box-shadow: 0 12px 34px rgba(43, 65, 93, 0.08);
-    transition: opacity 0.15s ease;
-    /* La columna derecha queda a la medida de su contenido (calendario ~360px, personas ~420px) */
-    max-width: 700px;
-    margin: 0 auto;
-}
-/* En el paso final el contenido es una sola columna: la tarjeta se angosta aún más */
-.cardFinal {
-    max-width: 560px;
-}
-.xfade {
-    opacity: 0;
-}
-.book {
-    display: grid;
-    grid-template-columns: 280px 1fr;
-    min-height: 400px;
-}
-
-/* ---------- Left: who + details + progress ---------- */
-.who {
-    padding: 22px 20px;
-    border-right: 1px solid var(--eureka-outline, #eceff3);
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    background: color-mix(in srgb, var(--eureka-primary, #3d5a7f) 4%, #fff);
-}
-.brand {
-    display: flex;
-    align-items: center;
-    gap: 11px;
-}
-.avatar {
-    width: 46px;
-    height: 46px;
-    border-radius: 50%;
-    background: var(--eureka-primary, #3d5a7f);
-    color: #fff;
-    display: grid;
-    place-items: center;
-    font-weight: 800;
-    font-size: 17px;
-    flex: none;
-}
-.brandName {
-    margin: 0;
-    font-size: 16px;
-    font-weight: 800;
-    color: var(--eureka-text, #293241);
-}
-.brandRole {
-    margin: 2px 0 0;
-    font-size: 12.5px;
-    color: #787878;
-}
-.meta {
-    display: flex;
-    flex-direction: column;
-    gap: 11px;
-}
-.row {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    font-size: 13px;
-    color: var(--eureka-text, #293241);
-}
-.ic {
-    color: var(--eureka-primary, #3d5a7f);
-    width: 16px;
-    text-align: center;
-    flex: none;
-}
-.pill {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    font-size: 12px;
-    font-weight: 700;
-    padding: 3px 10px;
-    border-radius: 20px;
-    background: color-mix(in srgb, var(--eureka-primary, #3d5a7f) 10%, #fff);
-    color: var(--eureka-primary, #3d5a7f);
-}
-
-.sum {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    border-top: 1px solid var(--eureka-outline, #eceff3);
-    padding-top: 14px;
-}
-.srow {
-    display: flex;
-    align-items: center;
-    gap: 9px;
-    font-size: 13px;
-    color: #787878;
-}
-.dot {
-    width: 18px;
-    height: 18px;
-    border-radius: 50%;
-    border: 1.5px dashed var(--eureka-outline, #d9dee6);
-    flex: none;
-    display: grid;
-    place-items: center;
-    font-size: 10px;
-    color: transparent;
-}
-.srowOn {
-    color: var(--eureka-text, #293241);
-    font-weight: 600;
-}
-.srowOn .dot {
-    border: none;
-    background: #2e9367;
-    color: #fff;
-}
-
-.lock {
-    margin-top: auto;
-    font-size: 12px;
-    color: #787878;
-    background: #fff7ed;
-    border: 1px solid #f4d9b0;
-    border-radius: 9px;
-    padding: 8px 10px;
-}
-.lock b {
-    color: #b7791f;
-}
-
-/* ---------- Right: breadcrumb + one pane at a time ---------- */
-.right {
-    padding: 18px 22px 22px;
-    min-width: 0;
-    display: flex;
-    flex-direction: column;
-}
-
-.stepper {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 12.5px;
-    color: #787878;
-    margin-bottom: 20px;
-    flex-wrap: wrap;
-}
-.stepGroup {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-}
-.stepItem {
-    display: inline-flex;
-    align-items: center;
-    gap: 7px;
-    border: none;
-    background: none;
-    padding: 0;
-    font: inherit;
-    color: inherit;
-    cursor: default;
-}
-.stepNum {
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-    display: grid;
-    place-items: center;
-    font-size: 11px;
-    font-weight: 800;
-    background: color-mix(in srgb, var(--eureka-primary, #3d5a7f) 8%, #fff);
-    color: #9aa3b0;
-    flex: none;
-}
-.stepDone {
-    color: var(--eureka-text, #293241);
-    cursor: pointer;
-}
-.stepDone .stepNum {
-    background: #2e9367;
-    color: #fff;
-}
-.stepOn {
-    color: var(--eureka-text, #293241);
-    font-weight: 700;
-}
-.stepOn .stepNum {
-    background: var(--eureka-primary, #3d5a7f);
-    color: #fff;
-}
-.stepSep {
-    width: 22px;
-    height: 1px;
-    background: var(--eureka-outline, #d9dee6);
-}
-
-.pane {
-    flex: 1;
-    animation: erk-booking-fadein 0.22s ease;
-}
-@keyframes erk-booking-fadein {
-    from {
-        opacity: 0;
-        transform: translateY(4px);
-    }
-    to {
-        opacity: 1;
-        transform: none;
-    }
-}
-
-.q {
-    margin: 0 0 4px;
-    font-size: 17px;
-    font-weight: 800;
-    color: var(--eureka-text, #293241);
-    text-wrap: balance;
-}
-.qsub {
-    margin: 0 0 18px;
-    font-size: 13px;
-    color: #787878;
-}
-
-/* step: person */
-.persons {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    max-width: 420px;
-}
-.pcard {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    border: 1px solid var(--eureka-outline, #d9dee6);
-    border-radius: 12px;
-    padding: 11px 14px 11px 11px;
-    background: #fff;
-    cursor: pointer;
-    text-align: left;
-    width: 100%;
-    font: inherit;
-}
-.pcard:hover {
-    border-color: var(--eureka-primary, #3d5a7f);
-}
-.pcardOn {
-    border-color: var(--eureka-primary, #3d5a7f);
-    background: color-mix(in srgb, var(--eureka-primary, #3d5a7f) 8%, #fff);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--eureka-primary, #3d5a7f) 12%, transparent);
-}
-.pav {
-    width: 38px;
-    height: 38px;
-    border-radius: 50%;
-    background: #c9d4e2;
-    color: #2b415d;
-    display: grid;
-    place-items: center;
-    font-weight: 800;
-    font-size: 13px;
-    flex: none;
-}
-.pcardAny .pav {
-    background: color-mix(in srgb, var(--eureka-primary, #3d5a7f) 8%, #fff);
-    color: var(--eureka-primary, #3d5a7f);
-}
-.pinfo {
-    display: flex;
-    flex-direction: column;
-}
-.pn {
-    font-size: 14px;
-    font-weight: 700;
-    color: var(--eureka-text, #293241);
-}
-.pr {
-    font-size: 12px;
-    color: #787878;
-}
-.chk {
-    margin-left: auto;
-    color: #2e9367;
-    font-weight: 800;
-    visibility: hidden;
-}
-.pcardOn .chk {
-    visibility: visible;
-}
-
-/* step: day (month grid) */
-.monthWrap {
-    max-width: 360px;
-}
-.monthHead {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 8px;
-}
-.monthTitle {
-    font-size: 13.5px;
-    font-weight: 700;
-    color: var(--eureka-text, #293241);
-}
-.monthNav button {
-    border: none;
-    background: none;
-    color: #787878;
-    cursor: pointer;
-    font-size: 15px;
-    padding: 2px 8px;
-    border-radius: 6px;
-}
-.monthNav button:hover {
-    background: color-mix(in srgb, var(--eureka-primary, #3d5a7f) 8%, #fff);
-}
-.mgrid {
-    display: grid;
-    grid-template-columns: repeat(7, 1fr);
-    gap: 4px;
-    font-variant-numeric: tabular-nums;
-}
-.mdow {
-    text-align: center;
-    font-size: 10px;
-    font-weight: 700;
-    color: #9aa3b0;
-    padding-bottom: 2px;
-}
-.mday {
-    position: relative;
-    aspect-ratio: 1;
-    display: grid;
-    place-items: center;
-    font-size: 13px;
-    border: none;
-    background: none;
-    border-radius: 9px;
-    cursor: pointer;
-    font: inherit;
-}
-.mdayFree {
-    color: var(--eureka-text, #293241);
-    font-weight: 600;
-}
-.mdayFree::after {
-    content: '';
-    position: absolute;
-    bottom: 5px;
-    width: 4px;
-    height: 4px;
-    border-radius: 50%;
-    background: #2e9367;
-}
-.mdayFree:hover {
-    background: color-mix(in srgb, var(--eureka-primary, #3d5a7f) 8%, #fff);
-}
-.mdayNone {
-    color: #c8ced7;
-    cursor: default;
-}
-.mdaySel {
-    background: var(--eureka-primary, #3d5a7f);
-    color: #fff;
-    font-weight: 700;
-}
-.mdaySel::after {
-    content: '';
-    position: absolute;
-    bottom: 5px;
-    width: 4px;
-    height: 4px;
-    border-radius: 50%;
-    background: #fff;
-}
-
-/* step: hour */
-.slots {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 9px;
-    max-width: 380px;
-}
-.slot {
-    border: 1px solid var(--eureka-outline, #d9dee6);
-    background: #fff;
-    border-radius: 10px;
-    padding: 11px 0;
-    font-size: 13.5px;
-    font-weight: 600;
-    color: var(--eureka-primary, #3d5a7f);
-    cursor: pointer;
-    font-variant-numeric: tabular-nums;
-    font-family: inherit;
-}
-.slot:hover {
-    border-color: var(--eureka-primary, #3d5a7f);
-    background: color-mix(in srgb, var(--eureka-primary, #3d5a7f) 7%, #fff);
-}
-.slotSel {
-    background: var(--eureka-primary, #3d5a7f);
-    color: #fff;
-    border-color: var(--eureka-primary, #3d5a7f);
-}
-.slotTaken {
-    color: #c3c9d2;
-    border-style: dashed;
-    cursor: not-allowed;
-    text-decoration: line-through;
-}
-.takenNote {
-    margin: 10px 0 0;
-    font-size: 11.5px;
-    color: #787878;
-}
-.empty {
-    font-size: 13px;
-    color: #787878;
-    padding: 12px 0;
-}
-
-/* step: confirm — the left summary expands into a centered stacked column */
-.bookFinal {
-    display: flex;
-    flex-direction: column;
-}
-.bookFinal .right {
-    order: 1;
-    flex: none;
-}
-.bookFinal .who {
-    order: 2;
-    flex: 1;
-    border-right: none;
-    border-top: 1px solid var(--eureka-outline, #eceff3);
-    padding: 24px 20px;
-    gap: 18px;
-    align-items: center;
-}
-.bookFinal .who > * {
-    width: 100%;
-    max-width: 440px;
-}
-.bookFinal .lock {
-    margin-top: 4px;
-}
-.bookFinal .right {
-    padding-bottom: 10px;
-}
-.paneFinal {
-    flex: none;
-}
-.paneFinal .qsub {
-    margin-bottom: 0;
-}
-
-/* ---------- Bottom bar: navigation ---------- */
-.navbar {
-    display: flex;
-    align-items: center;
-    gap: 14px;
-    padding: 14px 22px;
-    border-top: 1px solid var(--eureka-outline, #eceff3);
-    background: color-mix(in srgb, var(--eureka-primary, #3d5a7f) 3%, #fff);
-}
-.navSummary {
-    flex: 1;
-    min-width: 0;
-    font-size: 13px;
-    color: #787878;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-.navSummary b {
-    color: var(--eureka-text, #293241);
-}
-.navHl {
-    color: var(--booking-accent, #ee6c4d);
-    font-weight: 800;
-}
-/* Contacto: vive en la columna del paso final, apilado como el resto del resumen */
-.cfields {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-}
-.err {
-    font-size: 12px;
-    color: #d0473f;
-    margin-top: 6px;
-}
-
-/* entry card — trigger and booked summary share the wizard card aesthetic */
-.entry {
-    display: flex;
-    align-items: center;
-    gap: 13px;
-    border: 1px solid var(--eureka-outline, #d9dee6);
-    border-radius: 16px;
-    padding: 14px 18px;
-    background: var(--eureka-bg, #fff);
-    box-shadow: 0 12px 34px rgba(43, 65, 93, 0.08);
-    max-width: 560px;
-}
-.entryInfo {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    min-width: 0;
-}
-.entryLabel {
-    font-size: 14.5px;
-    font-weight: 700;
-    color: var(--eureka-text, #293241);
-}
-.entrySub {
-    font-size: 12.5px;
-    color: #787878;
-}
-.bookedIcon {
-    width: 46px;
-    height: 46px;
-    border-radius: 50%;
-    background: #2e9367;
-    color: #fff;
-    display: grid;
-    place-items: center;
-    font-weight: 800;
-    font-size: 17px;
-    flex: none;
-}
-.bookedMain {
-    font-size: 13.5px;
-    font-weight: 600;
-    color: var(--eureka-text, #293241);
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .pane {
-        animation: none;
-    }
-    .card {
-        transition: none;
-    }
-}
-
-/* responsive */
-@media (max-width: 760px) {
-    .book {
-        grid-template-columns: 1fr;
-        min-height: 0;
-    }
-    .who {
-        border-right: none;
-        border-bottom: 1px solid var(--eureka-outline, #eceff3);
-    }
-    .lock {
-        margin-top: 4px;
-    }
-    .right {
-        padding: 16px 16px 20px;
-    }
-    .persons,
-    .monthWrap {
-        max-width: none;
-    }
-    .slots {
-        max-width: none;
-    }
-    .navbar {
-        flex-wrap: wrap;
-    }
-    .navSummary {
-        flex-basis: 100%;
-        white-space: normal;
-    }
-}
-@media (max-width: 400px) {
-    .slots {
-        grid-template-columns: repeat(2, 1fr);
-    }
-    .stepper {
-        font-size: 11.5px;
-        gap: 5px;
-    }
-    .stepSep {
-        width: 12px;
-    }
-}

package/dist/Shared/ErkBookingPicker/ErkBookingPicker.stories.d.ts

@@ -1,28 +0,0 @@
-import type { StoryObj } from '@storybook/react-vite';
-import ErkBookingPicker, { ErkBookingPickerProps } from './ErkBookingPicker';
-import { withFormStepProviders } from '../../FormSteps/@StoryDecorators/FormStepDecorator';
-/** Controlled wrapper so the picker's value is interactive in Storybook. */
-declare function Interactive(args: ErkBookingPickerProps): JSX.Element;
-declare const meta: {
-    component: typeof ErkBookingPicker;
-    tags: string[];
-    decorators: (typeof withFormStepProviders)[];
-    render: typeof Interactive;
-    args: {
-        onChange: () => void;
-    };
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-/** Full flow: person → date → time. */
-export declare const WithPersonSelection: Story;
-/** Optional person — adds a "Cualquiera" option. */
-export declare const PersonOptional: Story;
-/** No person selection → straight to date + time. */
-export declare const NoPerson: Story;
-/** Extra contact step (collectContact). */
-export declare const WithContact: Story;
-/** Full config: contact data, buffer, lock notice and in-person mode. */
-export declare const Complete: Story;
-/** Already booked / read-only summary. */
-export declare const ReadOnly: Story;