@zuii/booking 0.1.1 → 1.0.0

package/dist/style/booking.css

@@ -18,11 +18,12 @@
 
 .booking__calendar-column {
   flex: 1;
-  max-width: 100%;
+  width: 100%;
 }
-@media (max-width: 450px) {
+@media screen and (min-width: 640px) {
   .booking__calendar-column {
-    width: 100%;
+    flex: none;
+    width: 400px;
   }
 }
 
@@ -121,4 +122,10 @@
   color: var(--booking-text);
 }
 
+.booking-form {
+  display: grid;
+  gap: var(--spacing-sm);
+  margin: 1rem 0;
+}
+
 /*# sourceMappingURL=booking.css.map */

package/dist/style/booking.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/style/_booking.scss","../../src/style/_booking-empty-message.scss","../../src/style/_booking-slots.scss","../../src/style/_booking-slot.scss","../../src/style/_booking-footer.scss","../../src/style/_booking-empty.scss","../../src/style/_booking-title.scss"],"names":[],"mappings":"AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAKD;EACC;EAEA;;AAEA;EALD;IAME;;;;AAIF;EACC;;;AAKD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACvDD;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;;;ACdF;EACC;EACA;EACA;;;ACHD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;;;AAGD;EACC;EACA;;;ACxBD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACRD;EACC;EACA;;;ACFD;EACC;EACA","file":"booking.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/style/_booking.scss","../../src/style/_booking-empty-message.scss","../../src/style/_booking-slots.scss","../../src/style/_booking-slot.scss","../../src/style/_booking-footer.scss","../../src/style/_booking-empty.scss","../../src/style/_booking-title.scss","../../src/style/_booking-form.scss"],"names":[],"mappings":"AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAMD;EACC;EACA;;AAEA;EAJD;IAKE;IACD;;;;AAMD;EACC;;;AAKD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AC1DD;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;;;ACdF;EACC;EACA;EACA;;;ACHD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;;;AAGD;EACC;EACA;;;ACxBD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACRD;EACC;EACA;;;ACFD;EACC;EACA;;;ACFD;EACC;EACA;EACA","file":"booking.css"}

package/dist/style/booking.min.css

@@ -1 +1 @@
-:root{--booking-bg: var(--white);--booking-color: var(--primary);--booking-text: var(--booking-color);--booking-selected-bg: #3c4e62;--booking-selected-text: #fff;--booking-footer-bg: #3c4e62;--booking-footer-text: #fff;--booking-radius: var(--radius-base);--booking-gap: 1rem}.booking-wrapper{display:flex;gap:var(--booking-gap);flex-wrap:wrap}.booking__calendar-column{flex:1;max-width:100%}@media(max-width: 450px){.booking__calendar-column{width:100%}}.booking__slots-column{flex:1}.booking{width:100%;border-radius:var(--booking-radius);overflow:hidden;color:var(--booking-text);user-select:none;display:flex;flex-direction:column;height:100%}.booking--empty{display:flex;flex-direction:column;height:100%;justify-content:center;align-items:center;background:var(--booking-bg);border:1px dashed var(--booking-color);border-radius:var(--booking-radius)}.booking__empty-message{text-align:center;color:#94a3b8;padding:40px}.booking__empty-message svg{width:48px;height:48px;margin-bottom:16px;opacity:.5}.booking__empty-message p{font-size:16px;margin:0}.booking__slots{display:grid;grid-template-columns:repeat(auto-fill, minmax(130px, 1fr));gap:15px}.booking__slot{background:var(--booking-bg);padding:20px 10px;border:none;border-radius:4px;text-align:center;cursor:pointer;font-weight:700;font-size:20px;color:var(--booking-text);transition:all .2s}.booking__slot:hover{background:color-mix(in srgb, var(--booking-bg), #000 5%)}.booking__slot--selected{background:var(--booking-selected-bg);color:var(--booking-selected-text)}.booking__slot--range{background:color-mix(in srgb, var(--booking-selected-bg), transparent 60%);color:var(--booking-selected-text)}.booking__footer{background:var(--booking-footer-bg);color:var(--booking-footer-text);padding:25px;border-radius:4px;text-align:left;font-size:22px;font-weight:400;line-height:1.4}.booking__empty{color:#6c757d;font-style:italic}.booking__title{font-size:1.2rem;color:var(--booking-text)}/*# sourceMappingURL=booking.min.css.map */
+:root{--booking-bg: var(--white);--booking-color: var(--primary);--booking-text: var(--booking-color);--booking-selected-bg: #3c4e62;--booking-selected-text: #fff;--booking-footer-bg: #3c4e62;--booking-footer-text: #fff;--booking-radius: var(--radius-base);--booking-gap: 1rem}.booking-wrapper{display:flex;gap:var(--booking-gap);flex-wrap:wrap}.booking__calendar-column{flex:1;width:100%}@media screen and (min-width: 640px){.booking__calendar-column{flex:none;width:400px}}.booking__slots-column{flex:1}.booking{width:100%;border-radius:var(--booking-radius);overflow:hidden;color:var(--booking-text);user-select:none;display:flex;flex-direction:column;height:100%}.booking--empty{display:flex;flex-direction:column;height:100%;justify-content:center;align-items:center;background:var(--booking-bg);border:1px dashed var(--booking-color);border-radius:var(--booking-radius)}.booking__empty-message{text-align:center;color:#94a3b8;padding:40px}.booking__empty-message svg{width:48px;height:48px;margin-bottom:16px;opacity:.5}.booking__empty-message p{font-size:16px;margin:0}.booking__slots{display:grid;grid-template-columns:repeat(auto-fill, minmax(130px, 1fr));gap:15px}.booking__slot{background:var(--booking-bg);padding:20px 10px;border:none;border-radius:4px;text-align:center;cursor:pointer;font-weight:700;font-size:20px;color:var(--booking-text);transition:all .2s}.booking__slot:hover{background:color-mix(in srgb, var(--booking-bg), #000 5%)}.booking__slot--selected{background:var(--booking-selected-bg);color:var(--booking-selected-text)}.booking__slot--range{background:color-mix(in srgb, var(--booking-selected-bg), transparent 60%);color:var(--booking-selected-text)}.booking__footer{background:var(--booking-footer-bg);color:var(--booking-footer-text);padding:25px;border-radius:4px;text-align:left;font-size:22px;font-weight:400;line-height:1.4}.booking__empty{color:#6c757d;font-style:italic}.booking__title{font-size:1.2rem;color:var(--booking-text)}.booking-form{display:grid;gap:var(--spacing-sm);margin:1rem 0}/*# sourceMappingURL=booking.min.css.map */

package/dist/style/booking.min.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/style/_booking.scss","../../src/style/_booking-empty-message.scss","../../src/style/_booking-slots.scss","../../src/style/_booking-slot.scss","../../src/style/_booking-footer.scss","../../src/style/_booking-empty.scss","../../src/style/_booking-title.scss"],"names":[],"mappings":"AAAA,MACC,2BACA,gCACA,qCACA,+BACA,8BACA,6BACA,4BACA,qCACA,oBAGD,iBACC,aACA,uBACA,eAKD,0BACC,OAEA,eAEA,yBALD,0BAME,YAIF,uBACC,OAKD,SACC,WACA,oCACA,gBACA,0BACA,iBACA,aACA,sBACA,YAGD,gBACC,aACA,sBACA,YACA,uBACA,mBACA,6BACA,uCACA,oCCvDD,wBACC,kBACA,cACA,aAEA,4BACC,WACA,YACA,mBACA,WAGD,0BACC,eACA,SCdF,gBACC,aACA,4DACA,SCHD,eACC,6BACA,kBACA,YACA,kBACA,kBACA,eACA,gBACA,eACA,0BACA,mBAEA,qBACC,0DAIF,yBACC,sCACA,mCAGD,sBACC,2EACA,mCCxBD,iBACC,oCACA,iCACA,aACA,kBACA,gBACA,eACA,gBACA,gBCRD,gBACC,cACA,kBCFD,gBACC,iBACA","file":"booking.min.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/style/_booking.scss","../../src/style/_booking-empty-message.scss","../../src/style/_booking-slots.scss","../../src/style/_booking-slot.scss","../../src/style/_booking-footer.scss","../../src/style/_booking-empty.scss","../../src/style/_booking-title.scss","../../src/style/_booking-form.scss"],"names":[],"mappings":"AAAA,MACC,2BACA,gCACA,qCACA,+BACA,8BACA,6BACA,4BACA,qCACA,oBAGD,iBACC,aACA,uBACA,eAMD,0BACC,OACA,WAEA,qCAJD,0BAKE,UACD,aAMD,uBACC,OAKD,SACC,WACA,oCACA,gBACA,0BACA,iBACA,aACA,sBACA,YAGD,gBACC,aACA,sBACA,YACA,uBACA,mBACA,6BACA,uCACA,oCC1DD,wBACC,kBACA,cACA,aAEA,4BACC,WACA,YACA,mBACA,WAGD,0BACC,eACA,SCdF,gBACC,aACA,4DACA,SCHD,eACC,6BACA,kBACA,YACA,kBACA,kBACA,eACA,gBACA,eACA,0BACA,mBAEA,qBACC,0DAIF,yBACC,sCACA,mCAGD,sBACC,2EACA,mCCxBD,iBACC,oCACA,iCACA,aACA,kBACA,gBACA,eACA,gBACA,gBCRD,gBACC,cACA,kBCFD,gBACC,iBACA,0BCFD,cACC,aACA,sBACA","file":"booking.min.css"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zuii/booking",
-  "version": "0.1.1",
+  "version": "1.0.0",
   "type": "module",
   "description": "Composant Booking pour zuii",
   "main": "./dist/index.cjs",
@@ -8,7 +8,7 @@
   "types": "./dist/index.d.ts",
   "files": [
     "dist",
-    "src/symfony"
+    "src"
   ],
   "exports": {
     ".": {
@@ -26,11 +26,12 @@
   },
   "dependencies": {
     "date-fns": "^4.1.0",
-    "@zuii/calendar": "0.1.1"
+    "@zuii/calendar": "1.0.0",
+    "@zuii/modal": "0.1.2"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@zuii/core": "1.0.0"
+    "@zuii/core": "1.2.0"
   },
   "keywords": [
     "zuii",

package/src/js/Booking.ts

@@ -0,0 +1,289 @@
+import { format } from 'date-fns';
+import { fr as localeFr, enUS as localeEn } from 'date-fns/locale';
+import { Calendar, type CalendarOptions } from '@zuii/calendar';
+import { Modal } from '@zuii/modal';
+
+
+const trads: any = {
+	fr: {
+		selectSlot: 'Vous avez sélectionné le',
+		noSlots: 'Pas de créneaux disponibles pour cette date.',
+		selectDay: 'Sélectionnez un jour dans le calendrier',
+		selectTime: 'Sélectionner un horaire pour le',
+		confirmTitle: 'Confirmer la réservation',
+		confirmBody: 'Vous avez sélectionné le <strong>{date}</strong> {prep} <strong>{slot}</strong>.',
+		confirmBtn: 'Réserver ce créneau',
+		cancelBtn: 'Annuler'
+	},
+	en: {
+		selectSlot: 'You have selected',
+		noSlots: 'No slots available for this date.',
+		selectDay: 'Please select a day in the calendar',
+		selectTime: 'Select a time slot for',
+		confirmTitle: 'Confirm Booking',
+		confirmBody: 'You selected <strong>{date}</strong> {prep} <strong>{slot}</strong>.',
+		confirmBtn: 'Book this slot',
+		cancelBtn: 'Cancel'
+	}
+};
+
+export interface BookingField {
+	name: string;
+	label: string;
+	type: 'text' | 'email' | 'tel' | 'textarea' | 'number' | 'date';
+	required?: boolean;
+	placeholder?: string;
+}
+
+export interface BookingOptions extends Omit<CalendarOptions, 'onDateSelect'> {
+	lang?: 'fr' | 'en';
+	availability: Record<string, string[]>;
+	selectedDate?: Date | null;
+	inputName?: string;
+	fields?: BookingField[];
+	onSlotSelect?: (date: Date, slot: string, formData: Record<string, any>) => void;
+}
+
+/**
+ * Composant Réservation (Booking) Vanilla JS.
+ * Englobe le calendrier et la sélection de créneaux.
+ */
+export class Booking {
+	private container: HTMLElement;
+	private calendarContainer: HTMLElement | null = null;
+	private slotsContainer: HTMLElement | null = null;
+	private calendarInstance: Calendar | null = null;
+	private selectedDate: Date | null = null;
+	private selectedSlot: string | null = null;
+	private options: Required<BookingOptions>;
+	private currentTrads: any;
+
+	/**
+	 * @param {HTMLElement} container - Élément DOM où injecter le booking.
+	 * @param {BookingOptions} options - Options de configuration.
+	 */
+	constructor(container: HTMLElement, options: BookingOptions) {
+		this.container = container;
+		this.options = {
+			lang: 'fr',
+			selectedDate: null,
+			inputName: 'booking_datetime',
+			onSlotSelect: () => {},
+			mode: 'single',
+			disablePast: false,
+			onRangeSelect: () => {},
+			initialDate: new Date(),
+			...options
+		} as Required<BookingOptions>;
+
+		if (!this.options.fields) {
+			this.options.fields = [
+				{ name: 'firstname', label: this.options.lang === 'en' ? 'Firstname' : 'Prénom', type: 'text', required: true },
+				{ name: 'lastname', label: this.options.lang === 'en' ? 'Lastname' : 'Nom', type: 'text', required: true },
+				{ name: 'email', label: 'Email', type: 'email', required: true }
+			];
+		}
+
+
+		this.selectedDate = this.options.selectedDate;
+		this.currentTrads = trads[this.options.lang];
+		this.initLayout();
+		this.render();
+	}
+
+	/**
+	 * Initialise la structure de base (deux colonnes).
+	 */
+	private initLayout(): void {
+		this.container.innerHTML = `
+			<div class="booking-wrapper">
+				<div class="booking__calendar-column"></div>
+				<div class="booking__slots-column"></div>
+			</div>
+		`;
+		this.calendarContainer = this.container.querySelector('.booking__calendar-column');
+		this.slotsContainer = this.container.querySelector('.booking__slots-column');
+
+		if (this.calendarContainer) {
+			this.calendarInstance = new Calendar(this.calendarContainer, {
+				lang: this.options.lang,
+				mode: this.options.mode,
+				disablePast: this.options.disablePast,
+				availability: this.options.availability,
+				initialDate: this.options.initialDate,
+				onDateSelect: (date: Date) => {
+					this.updateDate(date);
+				}
+			});
+		}
+	}
+
+	/**
+	 * Met à jour la date sélectionnée.
+	 * @param {Date} date - La nouvelle date sélectionnée.
+	 */
+	public updateDate(date: Date): void {
+		this.selectedDate = date;
+		this.selectedSlot = null;
+		this.render();
+	}
+
+	/**
+	 * Change la langue du composant.
+	 * @param {string} lang - 'fr' ou 'en'.
+	 */
+	public setLanguage(lang: 'fr' | 'en'): void {
+		this.options.lang = lang;
+		this.currentTrads = trads[lang];
+		if (this.calendarInstance) {
+			this.calendarInstance.setLanguage(lang);
+		}
+		this.render();
+	}
+
+	/**
+	 * Rendu HTML de la partie créneaux (booking).
+	 */
+	private render(): void {
+		if (!this.slotsContainer) return;
+
+		if (!this.selectedDate) {
+			this.slotsContainer.innerHTML = `
+				<div class="booking--empty">
+					<div class="booking__empty-message">
+						<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="4" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
+						<p>${this.currentTrads.selectDay}</p>
+					</div>
+				</div>
+			`;
+			return;
+		}
+
+		const dateStr = format(this.selectedDate, 'yyyy-MM-dd');
+		const slots = this.options.availability[dateStr] || [];
+		const locale = this.options.lang === 'fr' ? localeFr : localeEn;
+		const formattedDate = format(this.selectedDate, 'EEEE d MMMM yyyy', { locale });
+
+		this.slotsContainer.innerHTML = `
+			<div class="booking">
+				<h3 class="booking__title">${this.currentTrads.selectTime} ${formattedDate}</h3>
+				<div class="booking__slots">
+					${slots.map(slot => `
+						<button class="booking__slot ${this.selectedSlot === slot ? 'booking__slot--selected' : ''}" data-slot="${slot}">
+							${slot.includes(':') ? slot.replace(':', 'h') : slot}
+						</button>
+					`).join('')}
+					${slots.length === 0 ? `<p class="booking__empty">${this.currentTrads.noSlots}</p>` : ''}
+				</div>
+
+				<input type="hidden" name="${this.options.inputName}[date]" value="${this.selectedSlot ? dateStr : ''}" />
+				<input type="hidden" name="${this.options.inputName}[slot]" value="${this.selectedSlot || ''}" />
+			</div>
+		`;
+
+		this.bindEvents();
+	}
+
+	/**
+	 * Attache les événements DOM.
+	 */
+	private bindEvents(): void {
+		if (!this.slotsContainer) return;
+
+		const slotBtns = this.slotsContainer.querySelectorAll('.booking__slot');
+		slotBtns.forEach(btn => {
+			btn.addEventListener('click', (e) => {
+				e.preventDefault();
+				const slot = btn.getAttribute('data-slot');
+				if (slot && this.selectedDate) {
+					this.openConfirmationModal(this.selectedDate, slot);
+				}
+			});
+		});
+	}
+
+	/**
+	 * Ouvre la modale de confirmation pour un créneau donné.
+	 * @param {Date} date - La date sélectionnée.
+	 * @param {string} slot - Le créneau horaire.
+	 */
+	private openConfirmationModal(date: Date, slot: string): void {
+		const locale = this.options.lang === 'fr' ? localeFr : localeEn;
+		const formattedDate = format(date, 'EEEE d MMMM yyyy', { locale });
+		const displaySlot = slot.includes(':') ? slot.replace(':', 'h') : slot;
+
+		const prep = this.options.lang === 'fr' ? (slot.includes(':') ? 'à' : 'le') : (slot.includes(':') ? 'at' : 'on');
+		const body = `
+			<p class="booking-modal__text">${this.currentTrads.confirmBody.replace('{date}', formattedDate).replace('{slot}', displaySlot).replace('{prep}', prep)}</p>
+			<form id="booking-confirmation-form" class="form booking-form">
+				${this.options.fields.map(field => `
+					<div class="form__group booking-form-group booking-form-group--${field.name}">
+						<label for="field-${field.name}" class="form-label">
+							${field.label}${field.required ? ' <span class="text-danger">*</span>' : ''}
+						</label>
+						<div class="form__input">
+							${field.type === 'textarea' ? `
+								<textarea
+									id="field-${field.name}"
+									name="${field.name}"
+									class="form-control"
+									${field.required ? 'required' : ''}
+									placeholder="${field.placeholder || ''}"
+								></textarea>
+							` : `
+								<input
+									type="${field.type}"
+									id="field-${field.name}"
+									name="${field.name}"
+									class="form-control"
+									${field.required ? 'required' : ''}
+									placeholder="${field.placeholder || ''}"
+								/>
+							`}
+						</div>
+					</div>
+				`).join('')}
+			</form>
+		`;
+
+		const footer = `
+			<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+				${this.currentTrads.cancelBtn}
+			</button>
+			<button type="submit" form="booking-confirmation-form" class="btn btn-primary" id="confirm-booking-btn">
+				${this.currentTrads.confirmBtn}
+			</button>
+		`;
+
+		const modal = Modal.open({
+			title: this.currentTrads.confirmTitle,
+			body: body,
+			footer: footer,
+			centered: true
+		});
+
+		// Gérer la soumission du formulaire
+		setTimeout(() => {
+			const form = document.getElementById('booking-confirmation-form') as HTMLFormElement;
+			if (form) {
+				form.addEventListener('submit', (e) => {
+					e.preventDefault();
+
+					const formDataRaw = new FormData(form);
+					const formData: Record<string, any> = {};
+					formDataRaw.forEach((value, key) => {
+						formData[key] = value;
+					});
+
+					this.selectedSlot = slot;
+					this.render();
+					modal.hide();
+
+					if (this.options.onSlotSelect) {
+						this.options.onSlotSelect(date, slot, formData);
+					}
+				});
+			}
+		}, 0);
+	}
+}

package/src/js/index.ts

@@ -0,0 +1 @@
+export * from './Booking';

package/src/react/Booking.tsx

@@ -0,0 +1,64 @@
+import { useEffect, useRef } from 'react';
+import { Booking as VanillaBooking, type BookingOptions } from '../js/Booking';
+
+export interface BookingProps extends BookingOptions {
+	className?: string;
+}
+
+/**
+ * Wrapper React pour le composant Booking (Calendrier + Créneaux).
+ * @param {BookingProps} props - Les propriétés de la réservation.
+ * @returns {JSX.Element}
+ */
+export const Booking = ({
+	lang = 'fr',
+	availability = {},
+	onSlotSelect,
+	selectedDate = null,
+	inputName = 'booking_datetime',
+	className = '',
+	mode = 'single',
+	disablePast = false,
+	initialDate = new Date(),
+	onRangeSelect,
+	fields,
+}: BookingProps) => {
+	const containerRef = useRef<HTMLDivElement>(null);
+	const bookingInstance = useRef<VanillaBooking | null>(null);
+
+	useEffect(() => {
+		if (containerRef.current && !bookingInstance.current) {
+			bookingInstance.current = new VanillaBooking(containerRef.current, {
+				lang,
+				availability,
+				selectedDate,
+				inputName,
+				onSlotSelect,
+				mode,
+				disablePast,
+				initialDate,
+				onRangeSelect,
+				fields,
+			});
+		}
+	}, []);
+
+	useEffect(() => {
+		if (bookingInstance.current) {
+			bookingInstance.current.setLanguage(lang);
+		}
+	}, [lang]);
+
+	useEffect(() => {
+		if (bookingInstance.current) {
+			if (selectedDate) {
+				bookingInstance.current.updateDate(selectedDate);
+			} else if (selectedDate === null) {
+				// Gérer le cas où on repasse à null
+				bookingInstance.current.updateDate(null as any);
+			}
+		}
+	}, [selectedDate]);
+
+	return <div ref={containerRef} className={`booking ${className}`} />;
+};

package/src/react/index.tsx

@@ -0,0 +1 @@
+export * from './Booking';

package/src/style/_booking-empty-message.scss

@@ -0,0 +1,17 @@
+.booking__empty-message {
+	text-align: center;
+	color: #94a3b8;
+	padding: 40px;
+
+	svg {
+		width: 48px;
+		height: 48px;
+		margin-bottom: 16px;
+		opacity: 0.5;
+	}
+
+	p {
+		font-size: 16px;
+		margin: 0;
+	}
+}

package/src/style/_booking-empty.scss

@@ -0,0 +1,4 @@
+.booking__empty {
+	color: #6c757d;
+	font-style: italic;
+}

package/src/style/_booking-footer.scss

@@ -0,0 +1,10 @@
+.booking__footer {
+	background: var(--booking-footer-bg);
+	color: var(--booking-footer-text);
+	padding: 25px;
+	border-radius: 4px;
+	text-align: left;
+	font-size: 22px;
+	font-weight: 400;
+	line-height: 1.4;
+}

package/src/style/_booking-form.scss

@@ -0,0 +1,6 @@
+.booking-form{
+	display: grid;
+	gap: var(--spacing-sm);
+	margin: 1rem 0;
+
+}

package/src/style/_booking-slot.scss

@@ -0,0 +1,26 @@
+.booking__slot {
+	background: var(--booking-bg);
+	padding: 20px 10px;
+	border: none;
+	border-radius: 4px;
+	text-align: center;
+	cursor: pointer;
+	font-weight: 700;
+	font-size: 20px;
+	color: var(--booking-text);
+	transition: all 0.2s;
+
+	&:hover {
+		background: color-mix(in srgb, var(--booking-bg), #000 5%);
+	}
+}
+
+.booking__slot--selected {
+	background: var(--booking-selected-bg);
+	color: var(--booking-selected-text);
+}
+
+.booking__slot--range {
+	background: color-mix(in srgb, var(--booking-selected-bg), transparent 60%);
+	color: var(--booking-selected-text);
+}

package/src/style/_booking-slots.scss

@@ -0,0 +1,5 @@
+.booking__slots {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
+	gap: 15px;
+}

package/src/style/_booking-title.scss

@@ -0,0 +1,4 @@
+.booking__title {
+	font-size: 1.2rem;
+	color: var(--booking-text);
+}

package/src/style/_booking.scss

@@ -0,0 +1,60 @@
+:root {
+	--booking-bg: var(--white);
+	--booking-color: var(--primary);
+	--booking-text: var(--booking-color);
+	--booking-selected-bg: #3c4e62;
+	--booking-selected-text: #fff;
+	--booking-footer-bg: #3c4e62;
+	--booking-footer-text: #fff;
+	--booking-radius: var(--radius-base);
+	--booking-gap: 1rem;
+}
+
+.booking-wrapper {
+	display: flex;
+	gap: var(--booking-gap);
+	flex-wrap: wrap;
+	// align-items: flex-start;
+	// width: 100%;
+
+}
+
+.booking__calendar-column {
+	flex: 1;
+	width: 100%;
+
+	@media screen and (min-width: 640px){
+		flex: none;
+	width: 400px;
+	}
+
+
+}
+
+.booking__slots-column {
+	flex: 1;
+	// min-width: 300px;
+	// max-width: 100%;
+}
+
+.booking {
+	width: 100%;
+	border-radius: var(--booking-radius);
+	overflow: hidden;
+	color: var(--booking-text);
+	user-select: none;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+}
+
+.booking--empty {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	justify-content: center;
+	align-items: center;
+	background: var(--booking-bg);
+	border: 1px dashed var(--booking-color);
+	border-radius: var(--booking-radius);
+}

package/src/style/index.scss

@@ -0,0 +1,8 @@
+@use 'booking';
+@use 'booking-empty-message';
+@use 'booking-slots';
+@use 'booking-slot';
+@use 'booking-footer';
+@use 'booking-empty';
+@use 'booking-title';
+@use 'booking-form';