@ticketlayer/elements 0.2.0

package/dist/collection/components/tl-occurrence-selector/tl-occurrence-selector.css

@@ -0,0 +1,658 @@
+/**
+ * TlOccurrenceSelector Styles
+ * 
+ * CSS custom properties for theming:
+ * --tl-primary: Primary brand colour (default: #e64b12)
+ * --tl-primary-foreground: Text on primary (default: #ffffff)
+ * --tl-background: Background colour (default: #ffffff)
+ * --tl-foreground: Main text colour (default: #0f172a)
+ * --tl-muted: Muted background (default: #f1f5f9)
+ * --tl-muted-foreground: Muted text (default: #64748b)
+ * --tl-border: Border colour (default: #e2e8f0)
+ * --tl-radius: Border radius (default: 0.5rem)
+ * --tl-font-family: Font family (default: system-ui)
+ */
+
+:host {
+  /* Don't redefine CSS variables - let them inherit from parent document */
+  /* Only define local fallback for radius mapping */
+  --tl-radius: var(--tl-radius-md, 0.5rem);
+
+  display: block;
+  font-family: var(--tl-font-family, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+  color: var(--tl-foreground, #0f172a);
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+.occurrence-selector {
+  width: 100%;
+}
+
+/* No Occurrences */
+.no-occurrences {
+  text-align: center;
+  padding: 3rem 1rem;
+  color: var(--tl-muted-foreground, #64748b);
+}
+
+/* =========================================================================
+   LIST VIEW
+   ========================================================================= */
+
+.list-view {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.occurrence-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  width: 100%;
+  padding: 1rem 1.25rem;
+  background: var(--tl-background, #ffffff);
+  border: 1px solid var(--tl-border, #e2e8f0);
+  border-radius: var(--tl-radius);
+  text-align: left;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  font-family: inherit;
+}
+
+.occurrence-item:hover:not(:disabled) {
+  border-color: var(--tl-primary, #e64b12);
+  background: color-mix(in srgb, var(--tl-primary, #e64b12) 5%, var(--tl-background, #ffffff));
+}
+
+.occurrence-item:focus-visible {
+  outline: 2px solid var(--tl-primary);
+  outline-offset: 2px;
+}
+
+.occurrence-item:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+  background: var(--tl-muted, #f1f5f9);
+}
+
+.occurrence-item.sold-out {
+  opacity: 0.6;
+  background: var(--tl-muted, #f1f5f9);
+}
+
+.occurrence-info {
+  flex: 1;
+}
+
+.occurrence-date {
+  font-weight: 600;
+  font-size: 0.9375rem;
+  color: var(--tl-foreground, #0f172a);
+  margin-bottom: 0.25rem;
+}
+
+.occurrence-time {
+  font-size: 0.875rem;
+  color: var(--tl-muted-foreground);
+}
+
+.occurrence-status {
+  flex-shrink: 0;
+  text-align: right;
+}
+
+.status-sold-out {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--tl-muted-foreground);
+}
+
+.status-available {
+  font-size: 0.875rem;
+  color: var(--tl-muted-foreground);
+}
+
+.status-arrow {
+  font-size: 1.25rem;
+  color: var(--tl-primary, #e64b12);
+}
+
+/* =========================================================================
+   SLOTS VIEW (Same Day, Multiple Times)
+   ========================================================================= */
+
+.slots-view {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.slots-date-header {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--tl-foreground, #0f172a);
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--tl-border);
+}
+
+.time-slots-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+  gap: 0.5rem;
+}
+
+.time-slot {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0.75rem 0.5rem;
+  background: var(--tl-background, #ffffff);
+  border: 1px solid var(--tl-border, #e2e8f0);
+  border-radius: var(--tl-radius);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  font-family: inherit;
+  min-height: 3.5rem;
+}
+
+.time-slot:hover:not(:disabled) {
+  border-color: var(--tl-primary, #e64b12);
+  background: color-mix(in srgb, var(--tl-primary, #e64b12) 5%, var(--tl-background, #ffffff));
+}
+
+.time-slot:focus-visible {
+  outline: 2px solid var(--tl-primary);
+  outline-offset: 2px;
+}
+
+.time-slot:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+  background: var(--tl-muted, #f1f5f9);
+}
+
+.time-slot.sold-out {
+  opacity: 0.6;
+  background: var(--tl-muted, #f1f5f9);
+}
+
+.slot-time {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: var(--tl-foreground, #0f172a);
+}
+
+.slot-sold-out {
+  font-size: 0.6875rem;
+  color: var(--tl-muted-foreground);
+  margin-top: 0.125rem;
+}
+
+/* =========================================================================
+   CALENDAR VIEW
+   ========================================================================= */
+
+.calendar-view {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.calendar-view.horizontal {
+  flex-direction: row;
+  gap: 1.5rem;
+  align-items: flex-start;
+}
+
+.calendar-view.horizontal .calendar-panel {
+  flex-shrink: 0;
+  width: 340px;
+}
+
+.calendar-view.horizontal .slots-panel {
+  flex: 1;
+  min-width: 0;
+}
+
+.calendar-view.vertical .calendar-panel {
+  width: 100%;
+}
+
+.calendar-view.vertical .slots-panel {
+  width: 100%;
+}
+
+.calendar-panel {
+  border: 1px solid var(--tl-border, #e2e8f0);
+  border-radius: var(--tl-radius);
+  padding: 1rem;
+}
+
+/* Calendar Header */
+.calendar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.75rem;
+}
+
+.month-label {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--tl-foreground, #0f172a);
+  flex: 1;
+}
+
+.calendar-nav-buttons {
+  display: flex;
+  gap: 0.375rem;
+}
+
+.nav-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  padding: 0;
+  background: var(--tl-background, #ffffff);
+  border: 1px solid var(--tl-border, #e2e8f0);
+  border-radius: var(--tl-radius);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  color: var(--tl-foreground, #0f172a);
+}
+
+.nav-button:hover:not(:disabled) {
+  background: var(--tl-muted, #f1f5f9);
+}
+
+.nav-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+.nav-button svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+/* Calendar Grid */
+.calendar-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 0.1875rem;
+}
+
+.weekday-header {
+  text-align: center;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--tl-muted-foreground);
+  padding: 0.375rem 0;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.calendar-day {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 1;
+  padding: 0.1875rem;
+  background: var(--tl-background, #ffffff);
+  border: 1px solid transparent;
+  border-radius: var(--tl-radius);
+  cursor: default;
+  transition: all 0.15s ease;
+  font-family: inherit;
+  font-size: 0.9375rem;
+  font-weight: 500;
+  color: var(--tl-foreground, #0f172a);
+}
+
+.calendar-day.other-month {
+  color: var(--tl-muted-foreground);
+  opacity: 0.5;
+}
+
+.calendar-day.has-occurrences {
+  cursor: pointer;
+  background: color-mix(in srgb, var(--tl-primary, #e64b12) 10%, var(--tl-background, #ffffff));
+  border-color: transparent;
+  font-weight: 600;
+  color: var(--tl-primary, #e64b12);
+}
+
+.calendar-day.has-occurrences:hover {
+  background: color-mix(in srgb, var(--tl-primary, #e64b12) 18%, var(--tl-background, #ffffff));
+  border-color: transparent;
+}
+
+.calendar-day.has-occurrences.sold-out {
+  background: var(--tl-muted, #f1f5f9);
+  border-color: transparent;
+}
+
+.calendar-day.has-occurrences.sold-out:hover {
+  background: color-mix(in srgb, var(--tl-muted, #f1f5f9) 80%, var(--tl-background, #ffffff));
+  border-color: transparent;
+}
+
+.calendar-day.selected {
+  background: var(--tl-primary, #e64b12);
+  border-color: var(--tl-primary, #e64b12);
+  color: var(--tl-primary-foreground, #ffffff);
+}
+
+.calendar-day.selected:hover {
+  background: color-mix(in srgb, var(--tl-primary, #e64b12) 90%, black);
+}
+
+.calendar-day.selected .occurrence-dot {
+  background: var(--tl-primary-foreground);
+}
+
+.calendar-day.today .day-number {
+  font-weight: 700;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.calendar-day.past:not(.has-occurrences) {
+  opacity: 0.4;
+}
+
+.day-number {
+  line-height: 1;
+}
+
+.occurrence-dot {
+  display: none;
+}
+
+/* Slots Panel (Selected Date) */
+.slots-panel {
+  min-height: 200px;
+}
+
+.selected-date-slots {
+  height: 100%;
+}
+
+.selected-date-slots.empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--tl-muted-foreground);
+  background: var(--tl-muted, #f1f5f9);
+  border-radius: var(--tl-radius);
+  padding: 2rem 1rem;
+  text-align: center;
+  min-height: 200px;
+  font-size: 0.875rem;
+}
+
+.selected-date-header {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: var(--tl-foreground, #0f172a);
+  padding-bottom: 0.625rem;
+  margin-bottom: 0.625rem;
+}
+
+.time-slots-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.time-slot-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0.625rem 0.875rem;
+  background: var(--tl-background, #ffffff);
+  border: 1px solid var(--tl-border, #e2e8f0);
+  border-radius: var(--tl-radius);
+  text-align: left;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  font-family: inherit;
+}
+
+.time-slot-item:hover:not(:disabled) {
+  border-color: var(--tl-primary, #e64b12);
+  background: color-mix(in srgb, var(--tl-primary, #e64b12) 5%, var(--tl-background, #ffffff));
+}
+
+.time-slot-item:focus-visible {
+  outline: 2px solid var(--tl-primary);
+  outline-offset: 2px;
+}
+
+.time-slot-item:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+  background: var(--tl-muted, #f1f5f9);
+}
+
+.time-slot-item.sold-out {
+  opacity: 0.6;
+  background: var(--tl-muted, #f1f5f9);
+}
+
+.time-slot-item .slot-time {
+  font-size: 0.9375rem;
+  font-weight: 600;
+}
+
+.slot-status {
+  flex-shrink: 0;
+}
+
+.slot-status .status-sold-out {
+  font-size: 0.75rem;
+}
+
+.slot-status .status-available {
+  font-size: 0.75rem;
+}
+
+.slot-status .status-arrow {
+  font-size: 1rem;
+}
+
+/* =========================================================================
+   RESPONSIVE ADJUSTMENTS
+   ========================================================================= */
+
+@media (max-width: 640px) {
+  .event-name {
+    font-size: 1.25rem;
+  }
+
+  .occurrence-date {
+    font-size: 0.875rem;
+  }
+
+  .time-slots-grid {
+    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+  }
+
+  .time-slot {
+    padding: 0.625rem 0.375rem;
+    min-height: 3rem;
+  }
+
+  .slot-time {
+    font-size: 0.875rem;
+  }
+
+  .calendar-day {
+    font-size: 0.75rem;
+  }
+
+  .weekday-header {
+    font-size: 0.625rem;
+  }
+
+  .calendar-view.horizontal .calendar-panel {
+    width: 100%;
+  }
+}
+
+@media (max-width: 767px) {
+  .calendar-view.horizontal {
+    flex-direction: column;
+  }
+}
+
+/* =========================================================================
+   LOADING STATE
+   ========================================================================= */
+
+.loading-container {
+  padding: 1rem 0;
+  min-height: 400px;
+}
+
+/* Skeleton animation */
+@keyframes skeleton-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.skeleton {
+  background: var(--tl-muted, #f1f5f9);
+  border-radius: var(--tl-radius);
+  animation: skeleton-pulse 1.5s ease-in-out infinite;
+}
+
+/* Skeleton for list view */
+.skeleton-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.skeleton-list-item {
+  height: 4.5rem;
+  border-radius: var(--tl-radius);
+}
+
+/* Skeleton for calendar view */
+.skeleton-calendar {
+  border: 1px solid var(--tl-border, #e2e8f0);
+  border-radius: var(--tl-radius);
+  padding: 1rem;
+  min-height: 350px;
+}
+
+.skeleton-calendar-header {
+  height: 1.75rem;
+  width: 50%;
+  margin-bottom: 0.75rem;
+  border-radius: var(--tl-radius);
+}
+
+.skeleton-calendar-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 0.1875rem;
+  margin-top: 0.75rem;
+}
+
+.skeleton-calendar-day {
+  aspect-ratio: 1;
+  border-radius: var(--tl-radius);
+}
+
+/* Skeleton for slots view */
+.skeleton-slots {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.skeleton-slots-header {
+  height: 1.75rem;
+  width: 60%;
+  border-radius: var(--tl-radius);
+  margin-bottom: 0.5rem;
+}
+
+.skeleton-slots-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+  gap: 0.5rem;
+}
+
+.skeleton-slot-item {
+  height: 3.5rem;
+  border-radius: var(--tl-radius);
+}
+
+/* =========================================================================
+   ERROR STATE
+   ========================================================================= */
+
+.error-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem 1rem;
+  gap: 1rem;
+  text-align: center;
+}
+
+.error-icon {
+  width: 3rem;
+  height: 3rem;
+  color: var(--tl-muted-foreground);
+  stroke-width: 1.5;
+}
+
+.error-message {
+  color: var(--tl-foreground, #0f172a);
+  font-size: 0.9375rem;
+  max-width: 400px;
+}
+
+.retry-button {
+  margin-top: 0.5rem;
+  padding: 0.625rem 1.25rem;
+  background: var(--tl-primary, #e64b12);
+  color: var(--tl-primary-foreground, #ffffff);
+  border: none;
+  border-radius: var(--tl-radius);
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.retry-button:hover {
+  background: color-mix(in srgb, var(--tl-primary, #e64b12) 90%, black);
+}
+
+.retry-button:focus-visible {
+  outline: 2px solid var(--tl-primary);
+  outline-offset: 2px;
+}