mautourco-components 0.2.23 → 0.2.24

package/src/styles/components/molecule/accomodation-docket.css

@@ -0,0 +1,117 @@
+.accomodation-docket {
+  @apply flex flex-col;
+  gap: 12px;
+}
+
+.accomodation-docket__header {
+  @apply flex items-center justify-between;
+}
+
+.accomodation-docket__title-section {
+  @apply flex items-center gap-x-2 text-[var(--color-atoll-green-800)];
+  position: relative;
+}
+
+.accomodation-docket__title-bar {
+  height: 20px;
+  width: 3px;
+  background-color: var(--color-elevation-brand-subtle, #fe8839);
+  flex-shrink: 0;
+}
+
+.accomodation-docket__hotel-name {
+  @apply pl-3;
+}
+
+.accomodation-docket__rooms {
+  @apply flex flex-col;
+  gap: 12px;
+}
+
+.accomodation-docket__room {
+  @apply flex flex-col;
+  gap: 12px;
+  padding-left: 12px;
+}
+
+.accomodation-docket__room-header {
+  @apply flex items-center;
+}
+
+.accomodation-docket__room-empty {
+  @apply flex items-center;
+}
+
+.accomodation-docket__room-details {
+  @apply flex flex-col;
+  gap: 4px;
+}
+
+.accomodation-docket__date-section {
+  @apply flex flex-col;
+  gap: 4px;
+}
+
+.accomodation-docket__date-range {
+  @apply flex items-center gap-x-2;
+}
+
+.accomodation-docket__date-item {
+  @apply flex items-center gap-x-2;
+}
+
+.accomodation-docket__client-info {
+  @apply flex flex-col;
+  gap: 4px;
+}
+
+.accomodation-docket__client-type {
+  @apply flex items-center gap-x-0.5;
+}
+
+.accomodation-docket__guests {
+  @apply flex flex-col;
+  gap: 4px;
+}
+
+.accomodation-docket__children-wrapper {
+  @apply flex items-center gap-x-2;
+  color: var(--color-text-subtle, #303642);
+}
+
+.accomodation-docket__children {
+  @apply flex items-center gap-x-2;
+}
+
+.accomodation-docket__child-info {
+  @apply flex items-center;
+}
+
+.accomodation-docket__child-count {
+  color: var(--color-text-subtle, #303642);
+}
+
+.accomodation-docket__child-age {
+  color: var(--color-tuna-500);
+}
+
+.accomodation-docket__divider-vertical {
+  width: 0;
+  height: 14px;
+  border-left: 1px solid rgba(163, 163, 163, 1);
+  margin: 0 8px;
+}
+
+.accomodation-docket__room-info {
+  @apply flex flex-col;
+  gap: 4px;
+}
+
+.accomodation-docket__meal-plan {
+  @apply flex items-center gap-x-2;
+}
+
+.accomodation-docket__meal-plan-label {
+  @apply flex items-center gap-x-2;
+}
+

package/src/styles/components/molecule/docket-prices.css

@@ -0,0 +1,13 @@
+.docket-prices {
+  @apply flex items-center justify-between;
+  padding: 0 var(--spacing-padding-px-2, 8px);
+}
+
+.docket-prices__label {
+  @apply shrink-0;
+}
+
+.docket-prices__price-list {
+  @apply flex flex-col items-end justify-center shrink-0;
+  gap: var(--spacing-gap-gap-1, 4px);
+}

package/src/styles/components/molecule/excursion-docket.css

@@ -0,0 +1,47 @@
+.excursion-docket {
+  @apply flex flex-col;
+  gap: 16px;
+}
+
+.excursion-docket__header {
+  @apply flex items-center justify-between;
+}
+
+.excursion-docket__title-section {
+  @apply flex items-center gap-x-2 text-[var(--color-atoll-green-800)];
+  position: relative;
+}
+
+.excursion-docket__title-bar {
+  height: 20px;
+  width: 3px;
+  background-color: var(--color-elevation-brand-subtle, #fe8839);
+  flex-shrink: 0;
+}
+
+.excursion-docket__excursion-name {
+  @apply pl-5;
+}
+
+.excursion-docket__details {
+  @apply flex flex-col;
+  gap: 12px;
+  padding-left: 12px;
+}
+
+.excursion-docket__pickup {
+  @apply flex items-center gap-x-0.5;
+}
+
+.excursion-docket__details-list {
+  @apply flex flex-col;
+  gap: 4px;
+}
+
+.excursion-docket__detail-item {
+  @apply flex items-center gap-x-2;
+}
+
+.excursion-docket__detail-label {
+  min-width: 100px;
+}

package/src/styles/components/molecule/other-service-docket.css

@@ -0,0 +1,30 @@
+.other-service-docket {
+  @apply flex flex-col;
+  gap: 16px;
+}
+
+.other-service-docket__header {
+  @apply flex items-center justify-between;
+}
+
+.other-service-docket__title-section {
+  @apply flex items-center gap-x-2 text-[var(--color-atoll-green-800)];
+  position: relative;
+}
+
+.other-service-docket__title-bar {
+  height: 20px;
+  width: 3px;
+  background-color: var(--color-elevation-brand-subtle, #fe8839);
+  flex-shrink: 0;
+}
+
+.other-service-docket__details {
+  @apply flex flex-col;
+  gap: 12px;
+  padding-left: 12px;
+}
+
+.other-service-docket__service-info {
+  @apply flex items-center;
+}

package/src/styles/components/molecule/transfer-docket.css

@@ -0,0 +1,61 @@
+.transfer-docket {
+  @apply flex flex-col;
+  gap: 12px;
+}
+
+.transfer-docket__header {
+  @apply flex items-center justify-between;
+}
+
+.transfer-docket__title-section {
+  @apply flex items-center gap-x-2 text-[var(--color-atoll-green-800)];
+  position: relative;
+}
+
+.transfer-docket__title-bar {
+  height: 20px;
+  width: 3px;
+  background-color: var(--color-elevation-brand-subtle, #fe8839);
+  flex-shrink: 0;
+}
+
+.transfer-docket__details {
+  @apply flex flex-col;
+  gap: 12px;
+  padding-left: 12px;
+}
+
+.transfer-docket__transfer-point {
+  @apply flex flex-col;
+  gap: 8px;
+}
+
+.transfer-docket__guests {
+  @apply flex flex-col;
+  gap: 4px;
+}
+
+.transfer-docket__children-wrapper {
+  @apply flex items-center gap-x-2;
+  color: var(--color-text-subtle, #303642);
+}
+
+.transfer-docket__children {
+  @apply flex items-center gap-x-2;
+}
+
+.transfer-docket__child-info {
+  @apply flex items-center;
+}
+
+.transfer-docket__child-age {
+  color: var(--color-tuna-500);
+}
+
+.transfer-docket__divider-vertical {
+  width: 0;
+  height: 14px;
+  border-left: 1px solid rgba(163, 163, 163, 1);
+  margin: 0 8px;
+}
+

package/src/styles/components/organism/docket.css

@@ -0,0 +1,360 @@
+.docket {
+  @apply flex flex-col gap-6 p-6;
+  width: 384px;
+  min-height: 724px;
+  background: var(--color-elevation-level-1, #ffffff);
+  border: var(--border-border, 1px) solid var(--color-border-subtle, #e5e5e5);
+  border-radius: var(--border-radius-lg, 8px);
+  box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
+}
+
+.docket__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.docket__header-title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-gap-md, 8px);
+}
+
+.docket__header-title-text {
+  font-family: var(--font-font-family-heading, 'Satoshi', sans-serif);
+  font-weight: var(--font-weight-bold, 700);
+  font-size: var(--font-size-text-xl, 20px);
+  line-height: var(--font-leading-leading-lg, 28px);
+  color: var(--color-text-default, #262626);
+  margin: 0;
+  white-space: nowrap;
+}
+
+.docket__header-more-options {
+  background: var(--tag-action-color-background-default, #ffffff) !important;
+  box-shadow:
+    0 0 4px 0 rgba(48, 54, 66, 0.11),
+    0 2px 2px 0 rgba(48, 54, 66, 0.1);
+  border-radius: var(--tag-action-border-radius-full, 8px);
+  padding: var(--tag-action-spacing-sm-padding-y, 6px)
+    var(--tag-action-spacing-sm-padding-x, 14px);
+  font-family: var(--font-font-family-body, 'Satoshi', sans-serif);
+  font-weight: var(--font-weight-medium, 500);
+  font-size: var(--font-size-text-sm, 14px);
+  line-height: var(--font-leading-leading-sm, 20px);
+  color: var(--tag-action-color-foreground-default, #262626) !important;
+  cursor: pointer;
+  border: none !important;
+  gap: var(--tag-action-spacing-sm-gap, 4px);
+  min-height: 32px;
+  transition: background-color 0.2s ease;
+}
+
+.docket__header-more-options .chip__label {
+  color: var(--tag-action-color-foreground-default, #262626) !important;
+}
+
+.docket__header-more-options:hover {
+  background: var(--tag-action-color-background-hover, #d9d9d9) !important;
+  color: var(--tag-action-color-foreground-hover, #262626) !important;
+}
+
+.docket__header-more-options:hover .chip__label {
+  color: var(--tag-action-color-foreground-hover, #262626) !important;
+}
+
+.docket__header-more-options:active {
+  background: var(--tag-action-color-background-active, #ffffff) !important;
+  color: var(--tag-action-color-foreground-active, #262626) !important;
+}
+
+.docket__header-more-options:active .chip__label {
+  color: var(--tag-action-color-foreground-active, #262626) !important;
+}
+
+.docket__header-more-options:focus {
+  background: var(--tag-action-color-background-focus, #ffffff) !important;
+  color: var(--tag-action-color-foreground-focus, #262626) !important;
+  outline: 1px solid var(--accordion-color-filled-icon-focused, black);
+  outline-offset: 0;
+}
+
+.docket__header-more-options:focus .chip__label {
+  color: var(--tag-action-color-foreground-focus, #262626) !important;
+}
+
+.docket__content {
+  flex: 1;
+  width: 100%;
+  max-height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: thin;
+  scrollbar-color: var(--scroll-bar-color-foreground, #9ca3af)
+    var(--scroll-bar-color-background, #f3f4f6);
+}
+
+.docket__content::-webkit-scrollbar {
+  width: 6px;
+}
+
+.docket__content::-webkit-scrollbar-track {
+  background: var(--scroll-bar-color-background, #f3f4f6);
+  border-radius: 4px;
+  padding: 4px;
+}
+
+.docket__content::-webkit-scrollbar-thumb {
+  background: var(--scroll-bar-color-foreground, #9ca3af);
+  border-radius: 4px;
+  min-height: 20px;
+}
+
+.docket__content::-webkit-scrollbar-thumb:hover {
+  background: var(--scroll-bar-color-foreground-hover, #6b7280);
+}
+
+.docket__services {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-lg, 24px);
+  width: 100%;
+}
+
+.docket__prices-section {
+  @apply w-full bg-[var(--color-gray-100)] flex flex-col gap-2;
+}
+
+/* Empty state */
+.docket__empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-gap-md, 16px);
+  width: 100%;
+  padding: var(--spacing-padding-md, 16px);
+}
+
+.docket__empty-state-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-gap-md, 16px);
+  width: 100%;
+}
+
+.docket__empty-state-illustration {
+  width: 100px;
+  height: 100px;
+  position: relative;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.docket__empty-state-image {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 80px;
+  height: 72px;
+  object-fit: contain;
+}
+
+.docket__empty-state-text {
+  font-family: var(--font-font-family-body, 'Satoshi', sans-serif);
+  font-size: var(--font-size-text-sm, 14px);
+  line-height: var(--font-leading-leading-sm, 20px);
+  color: var(--color-text-default, #262626);
+  text-align: center;
+  margin: 0;
+  max-width: 100%;
+}
+
+.docket__empty-state-text-bold {
+  font-weight: var(--font-weight-bold, 700);
+}
+
+.docket__empty-state-text-regular {
+  font-weight: var(--font-weight-normal, 400);
+}
+
+.docket__footer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-md, 16px);
+  width: 100%;
+}
+
+.docket__footer-button {
+  flex: 1;
+}
+
+.docket__footer-button--full {
+  width: 100%;
+}
+
+.docket__footer-button--primary {
+  min-width: 162px;
+}
+
+.docket__footer-actions {
+  display: flex;
+  gap: var(--spacing-gap-md, 8px);
+  align-items: flex-start;
+  justify-content: flex-end;
+  width: 100%;
+}
+
+.docket__footer-actions .docket__footer-button {
+  flex: 1;
+}
+
+.docket__footer-actions .docket__footer-button--primary {
+  flex: 0 0 auto;
+}
+
+/* Collapsed header for mobile/tablet */
+.docket__collapsed-header {
+  display: none;
+  align-items: center;
+  justify-content: space-between;
+  width: 256px;
+  height: 76px;
+  padding: var(--spacing-padding-md, 16px);
+  background: var(--color-elevation-level-1, #ffffff);
+  border: var(--border-border, 1px) solid var(--color-border-subtle, #e5e5e5);
+  border-radius: var(--border-radius-2xl, 16px);
+  box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  gap: var(--spacing-gap-md, 16px);
+}
+
+.docket__collapsed-header:hover {
+  background: var(--color-gray-50, #f9fafb);
+}
+
+.docket__collapsed-header-title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-gap-md, 8px);
+  width: 208px;
+  height: 28px;
+}
+
+.docket__collapsed-header-title-text {
+  font-family: var(--font-font-family-heading, 'Satoshi', sans-serif);
+  font-weight: var(--font-weight-bold, 700);
+  font-size: var(--font-size-text-xl, 20px);
+  line-height: var(--font-leading-leading-lg, 28px);
+  color: var(--color-text-default, #262626);
+  margin: 0;
+  white-space: nowrap;
+}
+
+/* Mobile wrapper to control spacing */
+.docket__mobile-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+/* Close header for mobile/tablet */
+.docket__close-header {
+  display: none;
+  width: 141px;
+  height: 76px;
+  padding: var(--spacing-padding-lg, 24px);
+  background: var(--card-color-background-default, #fafafa);
+  border: var(--card-border-width-default, 1px) solid
+    var(--card-color-border-default, #a3a3a3);
+  border-radius: var(--border-radius-xl, 12px);
+  margin: 0;
+}
+
+.docket__close-header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-gap-md, 16px);
+}
+
+.docket__close-header-text {
+  font-family: var(--font-font-family-heading, 'Satoshi', sans-serif);
+  font-weight: var(--font-weight-bold, 700);
+  font-size: var(--font-size-text-xl, 20px);
+  line-height: var(--font-leading-leading-lg, 28px);
+  color: var(--color-text-default, #262626);
+  margin: 0;
+}
+
+.docket__close-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  color: var(--color-text-default, #262626);
+  transition: opacity 0.2s ease;
+}
+
+.docket__close-button:hover {
+  opacity: 0.7;
+}
+
+.docket__close-button:active {
+  opacity: 0.5;
+}
+
+/* Responsive behavior */
+@media (max-width: 1023px) {
+  .docket {
+    width: 384px;
+  }
+
+  .docket--collapsed {
+    display: none !important;
+  }
+
+  .docket--open {
+    display: flex !important;
+  }
+
+  .docket__collapsed-header {
+    display: flex;
+    width: 256px;
+  }
+
+  .docket__mobile-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+  }
+
+  .docket__close-header {
+    display: block;
+    width: 141px;
+    margin-bottom: 0;
+  }
+
+  /* Remove gap between close header and docket */
+  .docket__mobile-wrapper .docket {
+    margin-top: 0;
+  }
+}
+
+@media (min-width: 1024px) {
+  .docket__collapsed-header,
+  .docket__close-header {
+    display: none;
+  }
+
+  .docket--collapsed,
+  .docket--open {
+    display: flex;
+  }
+}