medos-sdk 1.1.7 → 1.1.8

package/dist/vanilla/components/theme-injector.js

@@ -0,0 +1,447 @@
+export function injectThemedStyles() {
+    if (typeof document === "undefined")
+        return;
+    const styleId = "medos-themed-styles";
+    if (document.getElementById(styleId))
+        return;
+    const styleElement = document.createElement("style");
+    styleElement.id = styleId;
+    styleElement.innerHTML = `
+/* Default Theme Variables */
+:root {
+  /* Colors */
+  --medos-color-primary: #27903f;
+  --medos-color-primary-dark: #1e7032;
+  --medos-color-background: #ffffff;
+  --medos-color-background-secondary: #f9fafb;
+  --medos-color-surface: #ffffff;
+  --medos-color-surface-hover: #f9fafb;
+  --medos-color-text: #111827;
+  --medos-color-text-secondary: #374151;
+  --medos-color-text-muted: #9ca3af;
+  --medos-color-text-on-primary: #ffffff;
+  --medos-color-border: #e5e7eb;
+  --medos-color-border-hover: #d1d5db;
+  --medos-color-border-focus: #27903f;
+  --medos-color-error: #ef4444;
+  --medos-color-error-background: #fee2e2;
+  --medos-color-error-border: #fca5a5;
+  --medos-color-success: #10b981;
+  --medos-color-success-background: #ecfdf5;
+  
+  /* Typography */
+  --medos-typography-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --medos-typography-font-size-xs: 12px;
+  --medos-typography-font-size-sm: 14px;
+  --medos-typography-font-size-md: 16px;
+  --medos-typography-font-size-lg: 18px;
+  --medos-typography-font-size-xl: 20px;
+  --medos-typography-font-weight-normal: 400;
+  --medos-typography-font-weight-medium: 500;
+  --medos-typography-font-weight-semibold: 600;
+  
+  /* Spacing */
+  --medos-spacing-xs: 4px;
+  --medos-spacing-sm: 8px;
+  --medos-spacing-md: 12px;
+  --medos-spacing-lg: 16px;
+  --medos-spacing-xl: 20px;
+  --medos-spacing-2xl: 24px;
+  
+  /* Radius */
+  --medos-radius-sm: 4px;
+  --medos-radius-md: 8px;
+  --medos-radius-lg: 12px;
+  --medos-radius-full: 999px;
+  
+  /* Shadows */
+  --medos-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --medos-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  --medos-shadow-lg: 0 8px 24px rgba(16, 24, 40, 0.08);
+  
+  /* Transitions */
+  --medos-transition-normal: 200ms ease-in-out;
+}
+
+/* Container & Card */
+.medos-appointment-container {
+  display: flex;
+  justify-content: center;
+  padding: var(--medos-spacing-xl, 20px);
+  font-family: var(--medos-typography-font-family);
+  background: var(--medos-color-background, #f6f8fa);
+}
+
+.medos-appointment-card {
+  width: 100%;
+  max-width: 720px;
+  background: var(--medos-color-surface, #fff);
+  border-radius: var(--medos-radius-lg, 12px);
+  box-shadow: var(--medos-shadow-lg);
+  padding: var(--medos-spacing-2xl, 24px);
+  box-sizing: border-box;
+}
+
+/* Section Cards */
+.medos-section-card {
+  background: var(--medos-color-surface, #fff);
+  border: 1px solid var(--medos-color-border, #e5e7eb);
+  border-radius: var(--medos-radius-lg, 12px);
+  margin-bottom: var(--medos-spacing-lg, 16px);
+  overflow: visible;
+}
+
+.medos-section-header {
+  display: flex;
+  align-items: center;
+  gap: var(--medos-spacing-sm, 8px);
+  padding: var(--medos-spacing-md, 12px) var(--medos-spacing-lg, 16px);
+  background: var(--medos-color-background-secondary, #f9fafb);
+  border-bottom: 1px solid var(--medos-color-border, #e5e7eb);
+  border-radius: var(--medos-radius-lg, 12px) var(--medos-radius-lg, 12px) 0 0;
+}
+
+.medos-section-header svg {
+  color: var(--medos-color-primary, #27903f);
+  flex-shrink: 0;
+}
+
+.medos-section-title {
+  font-size: var(--medos-typography-font-size-sm, 14px);
+  font-weight: var(--medos-typography-font-weight-semibold, 600);
+  color: var(--medos-color-text, #111827);
+  margin: 0;
+}
+
+.medos-section-body {
+  padding: var(--medos-spacing-lg, 16px);
+}
+
+.medos-section-description {
+  margin: 0 0 var(--medos-spacing-md, 12px) 0;
+  font-size: var(--medos-typography-font-size-sm, 14px);
+  color: var(--medos-color-text-secondary, #6b7280);
+}
+
+/* Form Groups */
+.medos-form-group {
+  margin-bottom: var(--medos-spacing-md, 12px);
+}
+
+.medos-form-row {
+  display: flex;
+  gap: var(--medos-spacing-md, 12px);
+}
+
+.medos-form-row .medos-form-group {
+  flex: 1;
+}
+
+.medos-label {
+  display: block;
+  font-size: var(--medos-typography-font-size-xs, 13px);
+  font-weight: var(--medos-typography-font-weight-medium, 500);
+  color: var(--medos-color-text-secondary, #374151);
+  margin-bottom: var(--medos-spacing-xs, 6px);
+}
+
+.medos-required {
+  color: var(--medos-color-error, #ef4444);
+}
+
+/* Inputs */
+.medos-input,
+.medos-textarea {
+  width: 100%;
+  padding: var(--medos-spacing-sm, 10px) var(--medos-spacing-md, 12px);
+  border-radius: var(--medos-radius-md, 8px);
+  border: 1px solid var(--medos-color-border, #e5e7eb);
+  outline: none;
+  font-size: var(--medos-typography-font-size-sm, 14px);
+  box-sizing: border-box;
+  font-family: inherit;
+  color: var(--medos-color-text, #111827);
+  background: var(--medos-color-surface, #fff);
+  transition: var(--medos-transition-normal);
+}
+
+.medos-input:focus,
+.medos-textarea:focus {
+  border-color: var(--medos-color-primary, #27903f);
+  box-shadow: 0 0 0 2px rgba(39, 144, 63, 0.15);
+}
+
+/* Buttons */
+.medos-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--medos-spacing-xs, 6px);
+  padding: var(--medos-spacing-sm, 10px) var(--medos-spacing-lg, 16px);
+  border-radius: var(--medos-radius-md, 8px);
+  font-size: var(--medos-typography-font-size-sm, 14px);
+  font-weight: var(--medos-typography-font-weight-semibold, 600);
+  cursor: pointer;
+  border: none;
+  transition: var(--medos-transition-normal);
+  font-family: inherit;
+}
+
+.medos-btn-primary {
+  background: var(--medos-color-primary, #27903f);
+  color: var(--medos-color-text-on-primary, #fff);
+}
+
+.medos-btn-primary:hover:not(:disabled) {
+  background: var(--medos-color-primary-dark, #1e7032);
+}
+
+.medos-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.medos-btn-secondary {
+  background: var(--medos-color-surface, #fff);
+  color: var(--medos-color-text, #111827);
+  border: 1px solid var(--medos-color-border, #e5e7eb);
+}
+
+.medos-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--medos-spacing-md, 12px);
+  margin-top: var(--medos-spacing-lg, 16px);
+}
+
+/* Radio Options */
+.medos-radio-option {
+  display: flex;
+  align-items: center;
+  gap: var(--medos-spacing-sm, 8px);
+  padding: var(--medos-spacing-sm, 10px) var(--medos-spacing-md, 12px);
+  border: 1px solid var(--medos-color-border, #e5e7eb);
+  border-radius: var(--medos-radius-md, 8px);
+  cursor: pointer;
+  transition: var(--medos-transition-normal);
+  margin-bottom: var(--medos-spacing-xs, 4px);
+}
+
+.medos-radio-option:hover {
+  border-color: var(--medos-color-primary, #27903f);
+  background: var(--medos-color-surface-hover, #f9fafb);
+}
+
+.medos-radio-option.selected {
+  border-color: var(--medos-color-primary, #27903f);
+  background: rgba(39, 144, 63, 0.05);
+}
+
+/* Time Slots */
+.medos-slots-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: var(--medos-spacing-sm, 8px);
+}
+
+.medos-slot-card {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--medos-spacing-xs, 4px);
+  padding: var(--medos-spacing-sm, 10px) var(--medos-spacing-md, 12px);
+  border: 1px solid var(--medos-color-border, #e5e7eb);
+  border-radius: var(--medos-radius-md, 8px);
+  cursor: pointer;
+  transition: var(--medos-transition-normal);
+  position: relative;
+}
+
+.medos-slot-card:hover {
+  border-color: var(--medos-color-primary, #27903f);
+  background: var(--medos-color-surface-hover, #f9fafb);
+}
+
+.medos-slot-card.selected {
+  border-color: var(--medos-color-primary, #27903f);
+  background: rgba(39, 144, 63, 0.1);
+}
+
+/* Phone Input */
+.medos-phone-input-row {
+  display: flex;
+  gap: var(--medos-spacing-sm, 8px);
+  align-items: flex-start;
+}
+
+.medos-country-code-wrapper {
+  width: 140px;
+  flex-shrink: 0;
+}
+
+.medos-phone-wrapper {
+  flex: 1;
+}
+
+/* VanillaSelect Styles */
+.vanilla-select-container {
+  position: relative;
+  width: 100%;
+  z-index: 1;
+}
+
+.vanilla-select-container.open {
+  z-index: 10000;
+}
+
+.vanilla-select-display {
+  width: 100%;
+  padding: var(--medos-spacing-sm, 10px) var(--medos-spacing-md, 12px);
+  border-radius: var(--medos-radius-md, 8px);
+  border: 1px solid var(--medos-color-border, #e5e7eb);
+  background: var(--medos-color-surface, #fff);
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: var(--medos-typography-font-size-sm, 14px);
+  color: var(--medos-color-text, #111827);
+  box-sizing: border-box;
+  transition: var(--medos-transition-normal);
+}
+
+.vanilla-select-display:hover {
+  border-color: var(--medos-color-border-hover, #d1d5db);
+}
+
+.vanilla-select-display.open {
+  border-color: var(--medos-color-primary, #27903f);
+  box-shadow: 0 0 0 2px rgba(39, 144, 63, 0.15);
+}
+
+.vanilla-select-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: var(--medos-color-surface, #fff);
+  border: 1px solid var(--medos-color-border, #e5e7eb);
+  border-radius: var(--medos-radius-md, 8px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 9999;
+  max-height: 200px;
+  overflow-y: auto;
+  margin-top: 4px;
+}
+
+.vanilla-select-option {
+  padding: var(--medos-spacing-sm, 10px) var(--medos-spacing-md, 12px);
+  cursor: pointer;
+  font-size: var(--medos-typography-font-size-sm, 14px);
+  color: var(--medos-color-text, #111827);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  transition: var(--medos-transition-normal);
+}
+
+.vanilla-select-option:hover {
+  background: var(--medos-color-surface-hover, #f9fafb);
+}
+
+.vanilla-select-option.selected {
+  background: rgba(39, 144, 63, 0.1);
+  color: var(--medos-color-primary, #27903f);
+}
+
+/* VanillaCalendar Styles */
+.vanilla-calendar-container {
+  width: 100%;
+  background: var(--medos-color-surface, #fff);
+  border: 1px solid var(--medos-color-border, #e5e7eb);
+  border-radius: var(--medos-radius-md, 8px);
+  padding: var(--medos-spacing-lg, 16px);
+}
+
+.vanilla-calendar-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--medos-spacing-lg, 16px);
+}
+
+.vanilla-calendar-nav-btn {
+  background: none;
+  border: none;
+  padding: var(--medos-spacing-xs, 4px);
+  cursor: pointer;
+  border-radius: var(--medos-radius-sm, 4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: var(--medos-transition-normal);
+}
+
+.vanilla-calendar-nav-btn:hover {
+  background: var(--medos-color-surface-hover, #f9fafb);
+}
+
+.vanilla-calendar-month-year {
+  font-size: var(--medos-typography-font-size-md, 16px);
+  font-weight: var(--medos-typography-font-weight-semibold, 600);
+  color: var(--medos-color-text, #111827);
+}
+
+.vanilla-calendar-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+}
+
+.vanilla-calendar-day-header {
+  text-align: center;
+  font-size: var(--medos-typography-font-size-xs, 12px);
+  font-weight: var(--medos-typography-font-weight-medium, 500);
+  color: var(--medos-color-text-secondary, #6b7280);
+  padding: var(--medos-spacing-sm, 8px);
+}
+
+.vanilla-calendar-day {
+  text-align: center;
+  padding: var(--medos-spacing-sm, 8px);
+  cursor: pointer;
+  border-radius: var(--medos-radius-sm, 4px);
+  font-size: var(--medos-typography-font-size-sm, 14px);
+  transition: var(--medos-transition-normal);
+  min-height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.vanilla-calendar-day:hover:not(.disabled):not(.other-month) {
+  background: var(--medos-color-surface-hover, #f9fafb);
+}
+
+.vanilla-calendar-day.selected {
+  background: var(--medos-color-primary, #27903f);
+  color: var(--medos-color-text-on-primary, #fff);
+}
+
+.vanilla-calendar-day.disabled {
+  color: var(--medos-color-text-muted, #9ca3af);
+  cursor: not-allowed;
+}
+
+.vanilla-calendar-day.other-month {
+  color: var(--medos-color-text-muted, #9ca3af);
+}
+
+.vanilla-calendar-day.today {
+  background: rgba(39, 144, 63, 0.1);
+  font-weight: var(--medos-typography-font-weight-semibold, 600);
+}
+  `;
+    document.head.appendChild(styleElement);
+}