@happychef/reservation-sidebar 2.5.4 → 2.5.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@happychef/reservation-sidebar",
-  "version": "2.5.4",
+  "version": "2.5.6",
   "description": "A compound component for managing restaurant reservations - JavaScript version with independent styles",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -12,11 +12,10 @@
     ".": {
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
-    },
-    "./dist/index.css": "./dist/index.css"
+    }
   },
   "scripts": {
-    "build": "tsup && node add-use-client.js && node extract-css.js",
+    "build": "tsup",
     "dev": "tsup --watch",
     "prepublishOnly": "npm run build"
   },
@@ -30,27 +29,27 @@
   "author": "HappyChef",
   "license": "MIT",
   "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "axios": "^1.0.0",
     "framer-motion": "^10.0.0 || ^11.0.0 || ^12.0.0",
     "lottie-react": "^2.0.0",
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-icons": "^4.0.0 || ^5.0.0"
   },
   "dependencies": {
+    "@happychef/algorithm": "^1.0.1",
     "moment-timezone": "^0.5.48"
   },
   "devDependencies": {
-    "@happychef/algorithm": "^1.0.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "axios": "^1.7.9",
     "framer-motion": "^12.23.24",
     "lottie-react": "^2.4.1",
     "moment-timezone": "^0.5.48",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
-    "tsup": "^8.5.1",
-    "typescript": "^5.9.3"
+    "tsup": "^8.0.1",
+    "typescript": "^5.3.3"
   },
   "repository": {
     "type": "git",

package/dist/index.css

@@ -1,676 +0,0 @@
-/* src/styles/reservationSidebar.css */
-
-/* reservationSidebar.js */
-
-.reservation-sidebar-component {
-	position: fixed;
-	top: 0;
-	right: -400px; /* Start off-screen */
-	width: 400px;
-	height: 100%;
-	background-color: #fff;
-	box-shadow: -2px 0 5px rgba(0,0,0,0.1);
-	z-index: var(--z-index-sidebar-reservation); /* Updated z-index */
-	display: flex;
-	flex-direction: column;
-	overflow-y: auto;
-	transition: right 0.3s ease-in-out;
-  }
-
-  .admin-title {
-	text-align: center;
-	margin-bottom: 30px;
-  }
-  
-  .reservation-sidebar-component.open {
-	right: 0;
-  }
-  
-  .reservation-sidebar-content {
-	padding: 20px;
-	padding-top: 60px; /* To make room for the close button */
-  }
-  
-  .close-sidebar-button {
-	position: absolute;
-	top: 10px;
-	left: 10px;
-	background-color: transparent;
-	border: none;
-	cursor: pointer;
-  }
-  
-  .close-sidebar-button svg {
-	color: #000;
-  }
-  
-  .sidebar-section-one,
-  .sidebar-section-two {
-	margin-bottom: 20px;
-  }
-  
-  .reservation-footer {
-	margin-top: auto;
-  }
-  
-  .store-reservation-button {
-	width: 100%;
-	padding: 12px;
-	background-color: var(--color-blue);
-	color: #fff;
-	border: none;
-	border-radius: 5px;
-	cursor: pointer;
-	font-size: 1.1rem;
-  }
-  
-  .open-sidebar-button {
-	position: fixed;
-	bottom: 20px;
-	right: 20px;
-	background-color: var(--color-blue);
-	color: #fff;
-	border: none;
-	border-radius: 50%;
-	width: 50px;
-	height: 50px;
-	cursor: pointer;
-	z-index: var(--z-index-modal) !important;
-	transition: all 0.3s ease;
-  }
-
-  .open-sidebar-button:hover {
-	background-color: var(--color-blue-hover-accent) !important;
-  }
-  
-  .open-sidebar-button svg {
-	position: relative;
-	top: 2px;
-  }
-  
-  @media screen and (max-width: 480px) {
-	.reservation-sidebar-component {
-	  width: 100%;
-	}
-  }
-  
-
-  .sidebar-section-personeel {
-	margin-bottom: 10px;
-  }
-
-/* src/styles/newReservationAdmin.css */
-/* newReservationAdmin.css */
-
-  
-.account-manage-title {
-	text-align: center;
-	margin-bottom: 30px;
-  }
-  
-  .account-manage-container {
-	max-width: 800px;
-	margin: 0 auto;
-  }
-  
-  .account-manage-form {
-	display: flex;
-	flex-direction: column;
-	gap: 15px;
-  }
-  
-  .input-container {
-	position: relative;
-  }
-  
-  .input-icon {
-	position: absolute;
-	top: 50%;
-	left: 10px;
-	transform: translateY(-50%);
-	color: #6c757d;
-	pointer-events: none;
-  }
-  
-  .input-container input,
-  .input-container textarea {
-	width: 100%;
-	padding: 10px 10px 10px 35px;
-	border: 1px solid #ccc;
-	border-radius: 5px;
-	font-size: 1rem;
-	transition: border-color 0.3s ease;
-  }
-
-  
-  .form-error {
-	color: #dc3545;
-	font-size: 0.9rem;
-	margin-top: 5px;
-	display: flex;
-	align-items: center;
-	gap: 5px;
-  }
-  
-  .account-manage__button {
-	padding: 12px;
-	background-color: var(--color-blue);
-	color: #fff;
-	border: none;
-	border-radius: 5px;
-	cursor: pointer;
-	font-size: 1.1rem;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	gap: 10px;
-	transition: background-color 0.3s ease;
-  }
-  
-
-/* src/components/FormField/formField.css */
-/* src/components/FormField.css */
-.new-reservation-page .form-group .magic-tooltip {
-	transition: transform 0.2s ease;
-	transform-origin: bottom right;
-  }
-  
-  .new-reservation-page .form-group .magic-tooltip:hover {
-	transform: scale(1.05);
-  }
-  
-
-/* src/components/GiftcardSelection/giftcardSelection.css */
-/* src/Pages/NewReservation/css/giftcardSelection.css */
-
-.new-reservation-page .giftcard-selection {
-	margin-bottom: 20px;
-  }
-  
-  .new-reservation-page .giftcard-options {
-	display: flex;
-	gap: 20px;
-	margin: 10px 0;
-  }
-  
-  .new-reservation-page .giftcard-option {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	cursor: pointer;
-  }
-  
-  .new-reservation-page .form-label {
-	font-weight: 500;
-	margin-bottom: 8px;
-	display: block;
-  }
-  
-  .new-reservation-page .giftcard-option input[type="radio"] {
-	margin: 0;
-	cursor: pointer;
-  }
-  
-  .new-reservation-page .giftcard-option label {
-	cursor: pointer;
-  }
-
-/* src/components/ZitplaatsSelection/zitplaatsSelection.css */
-/* src/Pages/NewReservation/css/zitplaatsSelection.css */
-
-.new-reservation-page .zitplaats-selection {
-	margin-bottom: 15px;
-}
-  
-.new-reservation-page .zitplaats-selection select {
-	width: 100%;
-	padding: 10px;
-	border-radius: 4px;
-	border: 1px solid #ccc;
-	background-color: white;
-}
-
-/* src/components/ReservationStepTwo/reservationStepTwo.css */
-/* Name Fields Container */
-.new-reservation-page .name-fields {
-	display: flex;
-	gap: 20px;
-  }
-
-  .input-container .form-control { /* New reservation prefix can't be added here*/
-	display: flex;
-		align-items: center;
-		justify-content: space-between;
-		width: 100%;
-		padding: 10px;
-		background-color: #fff;
-		border: #ccc 1px solid;
-		cursor: pointer;
-		-webkit-user-select: none;
-		user-select: none;
-		text-align: left;
-		border-radius: 5px;
-		font-size: 16px;
-  }
-
-/* src/components/ReservationSummary/reservationSummary.css */
-/* src/components/ReservationForm/css/reservationSummary.css */
-
-.new-reservation-page .reservation-sidebar-component .reservation-summary .modal-title {
-	margin-top: 0;
-	margin-bottom: 20px;
-  }
-  
-  .new-reservation-page .reservation-sidebar-component .reservation-summary .reservation-details {
-	list-style-type: none;
-	padding: 0;
-	margin: 0 0 20px 0;
-	width: 100%;
-  }
-  
-  .new-reservation-page .reservation-sidebar-component .reservation-summary .reservation-details li {
-	margin-bottom: 10px;
-	font-size: 15px;
-	align-items: left;
-	text-align: left;
-  }
-  
-  .new-reservation-page .reservation-sidebar-component .reservation-summary .reservation-details li strong {
-	font-weight: bold;
-  }
-  
-  .new-reservation-page .reservation-sidebar-component .reservation-summary {
-	align-items: left;
-  }
-  
-
-/* src/components/ReservationStepOne/css/timeSelector.css */
-/* src/components/NewReservation/css/timeSelector.css */
-
-.new-reservation-page .time-selector-container {
-	position: relative;
-  }
-  
-  .new-reservation-page .time-display {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	width: 100%;
-	padding: 10px;
-	background-color: #fff;
-	border: #ccc 1px solid;
-	cursor: pointer;
-	user-select: none;
-	text-align: left;
-	border-radius: 5px;
-  }
-  
-  .new-reservation-page .time-display span:first-child {
-	flex-grow: 1;
-  }
-  
-  .new-reservation-page .time-selector {
-	position: absolute;
-	z-index: 1000;
-	width: 100%;
-	max-height: 300px;
-	overflow-y: auto;
-	background-color: rgba(255, 255, 255, 1);
-	border: 1px solid #ccc;
-	margin-top: 5px;
-	padding: 10px;
-	border-radius: 10px;
-	animation: fadeInTimeSelector 0.3s ease-in-out;
-	top: 75px;
-  }
-  
-  @keyframes fadeInTimeSelector {
-	from {
-	  opacity: 0;
-	}
-	to {
-	  opacity: 1;
-	}
-  }
-  
-  .new-reservation-page .time-period {
-	margin-bottom: 15px;
-  }
-  
-  .new-reservation-page .time-period-label {
-	font-weight: bold;
-	margin-bottom: 5px;
-  }
-  
-  .new-reservation-page .time-options {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 5px;
-  }
-  
-  .new-reservation-page .time-option {
-	padding: 8px 12px;
-	background-color: #ccffcc; /* Green background for available times */
-	color: #006600;
-	border-radius: 5px;
-	cursor: pointer;
-	transition: background-color 0.2s ease;
-  }
-  
-  .new-reservation-page .time-option:hover {
-	background-color: #b3ffb3;
-  }
-  
-  .new-reservation-page .time-option.selected {
-	background-color: #006600;
-	color: #ccffcc;
-  }
-  
-  .new-reservation-page .info-text {
-	color: #666;
-	font-style: italic;
-  }
-  
-  .new-reservation-page .arrow {
-	margin-left: auto;
-	color: gray;
-	display: flex;
-	align-items: center;
-  }
-  
-  @media screen and (max-width: 480px) {
-	.new-reservation-page .time-option {
-	  padding: 6px 10px;
-	  font-size: 14px;
-	}
-  }
-  
-
-/* src/components/ReservationStepOne/css/calendar.css */
-/* calendar.css */
-.new-reservation-page .calendar-container {
-	position: relative;
-	width: 100%;
-}
-
-.new-reservation-page .calendar-container .calendar-display {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	width: 100%;
-	padding: 10px;
-	background-color: #fff;
-	border: #ccc 1px solid;
-	cursor: pointer;
-	user-select: none;
-	text-align: left;
-	border-radius: 5px;
-}
-
-.new-reservation-page .calendar-container .calendar-display span:first-child {
-	flex-grow: 1;
-}
-
-.new-reservation-page .calendar-container .calendar {
-	position: absolute;
-	z-index: 1000;
-	width: 100%;
-	background-color: rgba(255, 255, 255, 1);
-	border: 1px solid #ccc;
-	margin-top: 5px;
-	padding: 10px;
-	border-radius: 10px;
-	animation: fadeInCalendar 0.3s ease-in-out;
-	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-}
-
-@keyframes fadeInCalendar {
-	from {
-	  opacity: 0;
-	}
-	to {
-	  opacity: 1;
-	}
-}
-
-/* NEW: Beschikbaarheden press-and-hold button */
-.new-reservation-page .calendar-container .availability-hold-btn {
-	font-size: 10px;
-}
-
-
-.new-reservation-page .calendar-container .calendar-header {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	margin-bottom: 10px;
-	gap: 8px;
-	flex-wrap: wrap;
-}
-
-.new-reservation-page .calendar-container .calendar-header button {
-	background-color: transparent;
-	border: none;
-	cursor: pointer;
-	font-size: 18px;
-}
-
-.new-reservation-page .calendar-container .calendar-header span {
-	font-size: 15px;
-	color: gray;
-	font-weight: 500;
-}
-
-.new-reservation-page .calendar-container .calendar-weeks-wrapper {
-	overflow: hidden;
-	position: relative;
-	width: 100%;
-}
-
-.new-reservation-page .calendar-container .calendar-table {
-	width: 100%;
-	border-collapse: collapse;
-}
-
-.new-reservation-page .calendar-container .calendar-table th,
-.new-reservation-page .calendar-container .calendar-table td {
-	width: 14.28%;
-	text-align: center;
-	padding: 5px;
-}
-
-.calendar-container .calendar-table th {
-	color: #666;
-	font-weight: normal;
-	padding-bottom: 10px;
-}
-
-.new-reservation-page .calendar-container .calendar-table td {
-	vertical-align: middle;
-	cursor: pointer;
-	border: none;
-	opacity: 1;
-	position: relative; /* For badge positioning */
-}
-
-.new-reservation-page .calendar-container .calendar-table td.empty-day {
-	cursor: default;
-}
-
-.new-reservation-page .calendar-container .calendar-table td:hover .day-square.available {
-	transform: scale(1.05);
-}
-
-/* MINIMAL: Day square with clean layout */
-.new-reservation-page .calendar-container .day-square {
-	position: relative;
-	width: 38px;
-	height: 38px;
-	border-radius: 4px;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	flex-direction: column;
-	transition: all 0.2s ease;
-	font-size: 16px;
-	margin: 0 auto;
-}
-
-.new-reservation-page .calendar-container .day-number {
-	line-height: 1;
-	z-index: 2; /* Ensure number stays above background */
-}
-
-.new-reservation-page .calendar-container .available .day-square {
-	background-color: #ccffcc;
-	color: #006600;
-}
-
-.new-reservation-page .calendar-container .available:hover .day-square {
-	background-color: #b3ffb3;
-}
-
-.new-reservation-page .calendar-container .available:active .day-square {
-	background-color: #99ff99;
-}
-
-.new-reservation-page .calendar-container .unavailable .day-square {
-	background-color: rgba(139, 0, 0, 0.13);
-	color: darkred;
-}
-
-.new-reservation-page .calendar-container .gray-out .day-square {
-	background-color: #e0e0e0;
-	color: #999;
-	cursor: not-allowed;
-}
-
-.new-reservation-page .calendar-container .selected .day-square {
-	background-color: #006600;
-	color: #ccffcc;
-}
-
-.new-reservation-page .calendar-container .calendar-table td.unavailable,
-.new-reservation-page .calendar-container .calendar-table td.gray-out {
-	cursor: not-allowed;
-}
-
-.new-reservation-page .calendar-container .calendar-table td.unavailable:hover .day-square,
-.new-reservation-page .calendar-container .calendar-table td.gray-out:hover .day-square {
-	transform: none;
-}
-
-.new-reservation-page .calendar-container .calendar-table td {
-	border: none;
-}
-
-.new-reservation-page .calendar-container .arrow {
-	margin-left: auto;
-	color: gray;
-	display: flex;
-	align-items: center;
-}
-
-/* Only show badge for available dates with actual capacity */
-.new-reservation-page .calendar-container .available .availability-badge {
-	background: #38a169;
-}
-
-.new-reservation-page .calendar-container .selected .availability-badge {
-	background: #2d3748;
-}
-
-@media screen and (max-width: 900px) {
-	.calendar-container .day-square {
-	  width: 35px !important;
-	  height: 35px !important;
-	  font-size: 15px !important;
-	}
-  
-	.calendar-container .calendar-header span {
-	  font-size: 12px;
-	}
-
-	/* Make availability button more compact on mobile */
-	.new-reservation-page .calendar-container .availability-toggle-btn {
-		padding: 5px 8px;
-		font-size: 11px;
-	}
-}
-
-/* src/components/ReservationStepOne/css/valueSelector.css */
-/* Use the same CSS provided, adjusted for the value selector */
-
-.new-reservation-page .value-selector {
-	display: flex;
-	flex-direction: column;
-	gap: 15px;
-	margin-bottom: 20px;
-  }
-
-  .new-reservation-page .non-absolute {
-	position: relative !important;
-  }
-
-  .new-reservation-page .non-absolute::before {
-	background: none;
-  }
-  
-  .new-reservation-page .predefined-values {
-	display: flex;
-	gap: 10px;
-  }
-  
-  .new-reservation-page .predefined-value-button {
-	flex: 1;
-	padding: 10px;
-	border: 1px solid #ccc;
-	border-radius: var(--border-radius);
-	background-color: var(--color-white);
-	cursor: pointer;
-	font-size: 1rem;
-	transition: background-color 0.3s ease;
-  }
-  
-  .new-reservation-page .predefined-value-button.active,
-  .new-reservation-page .predefined-value-button:hover {
-	background-color: var(--color-blue);
-	color: var(--color-white);
-  }
-  
-  .new-reservation-page .slider-container {
-	display: flex;
-	align-items: center;
-	gap: 15px;
-  }
-  
-  .new-reservation-page .slider {
-	flex: 1;
-	appearance: none;
-	-webkit-appearance: none;
-	height: 5px;
-	background: #ddd;
-	border-radius: 5px;
-	outline: none;
-  }
-  
-  .new-reservation-page .slider::-webkit-slider-thumb {
-	-webkit-appearance: none;
-	appearance: none;
-	width: 20px;
-	height: 20px;
-	background: var(--color-blue);
-	cursor: pointer;
-	border-radius: 50%;
-  }
-  
-  .new-reservation-page .value-input {
-	width: 80px;
-	padding: 10px;
-	border: 1px solid #ccc;
-	border-radius: var(--border-radius);
-	font-size: 1rem;
-  }
-  
-
-