@product7/product7-js 0.1.0

package/src/styles/components.js

@@ -0,0 +1,553 @@
+export const componentsStyles = `
+.sdk-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-2);
+  border-radius: 8px;
+  border: none;
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-medium);
+  font-family: inherit;
+  cursor: pointer;
+  transition: all var(--transition-base);
+  outline: none;
+}
+
+.sdk-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.sdk-btn:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+.sdk-btn-primary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-2);
+  background: var(--color-primary);
+  color: var(--color-white);
+  border: 1px solid var(--color-primary);
+  border-radius: 8px;
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+  font-family: inherit;
+  cursor: pointer;
+  height: 40px;
+  padding: 8px 18px;
+  transition: all var(--transition-base);
+}
+
+.sdk-btn-primary:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.sdk-btn-primary:hover:not(:disabled) {
+  background: var(--color-primary-hover);
+}
+
+.sdk-btn-primary:active:not(:disabled) {
+  background: var(--color-primary-active);
+  transform: translateY(1px);
+  transition-duration: 100ms;
+}
+
+.sdk-btn-secondary {
+  background: transparent;
+  color: var(--color-neutral-600);
+  border: 1px solid var(--color-border);
+  height: 40px;
+  padding: 8px 18px;
+}
+
+.sdk-btn-secondary:hover:not(:disabled) {
+  background: var(--color-neutral-50);
+  border-color: var(--color-neutral-400);
+  color: var(--color-neutral-700);
+}
+
+.sdk-btn-secondary:active:not(:disabled) {
+  transform: translateY(1px);
+  transition-duration: 100ms;
+}
+
+.sdk-btn-ghost {
+  background: transparent;
+  color: var(--color-neutral-600);
+}
+
+.sdk-btn-ghost:hover:not(:disabled) {
+  background: var(--color-neutral-100);
+  color: var(--color-neutral-700);
+}
+
+.sdk-btn-ghost:active:not(:disabled) {
+  transform: translateY(1px);
+  transition-duration: 100ms;
+}
+
+.sdk-btn-sm {
+  height: 36px;
+  padding: 8px 14px;
+  font-size: var(--font-size-base);
+}
+
+.sdk-btn-lg {
+  height: 48px;
+  padding: 12px 20px;
+  font-size: var(--font-size-lg);
+}
+
+.sdk-btn-pill {
+  border-radius: var(--radius-full);
+}
+
+.sdk-btn-block {
+  width: 100%;
+}
+
+.sdk-btn-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border: none;
+  background: none;
+  border-radius: 8px;
+  cursor: pointer;
+  color: var(--color-text-secondary);
+  transition: all var(--transition-base);
+  padding: 0;
+}
+
+.sdk-btn-icon:hover {
+  background: rgba(128, 128, 128, 0.12);
+  color: var(--color-text-primary);
+}
+
+.sdk-btn-icon:active {
+  transform: translateY(1px);
+  transition-duration: 100ms;
+}
+
+.sdk-input {
+  width: 100%;
+  height: 40px;
+  border-radius: 8px;
+  border: 1px solid var(--color-border);
+  padding: 8px 14px;
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-normal);
+  line-height: var(--line-height-relaxed);
+  color: var(--color-text-primary);
+  font-family: inherit;
+  outline: none;
+  transition: all var(--transition-base);
+  background: var(--color-white);
+}
+
+.sdk-input::placeholder {
+  color: var(--color-text-tertiary);
+}
+
+.sdk-input:focus {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px var(--color-primary-light);
+}
+
+.sdk-input:disabled {
+  background: var(--color-neutral-50);
+  cursor: not-allowed;
+}
+
+.sdk-textarea {
+  width: 100%;
+  min-height: 120px;
+  resize: vertical;
+  border-radius: 8px;
+  border: 1px solid var(--color-border);
+  padding: 10px 14px;
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-normal);
+  line-height: var(--line-height-relaxed);
+  color: var(--color-text-primary);
+  font-family: inherit;
+  outline: none;
+  transition: all var(--transition-base);
+  background: var(--color-white);
+}
+
+.sdk-textarea::placeholder {
+  color: var(--color-text-tertiary);
+}
+
+.sdk-textarea:focus {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px var(--color-primary-light);
+}
+
+.sdk-select {
+  width: 100%;
+  height: 40px;
+  border-radius: 8px;
+  border: 1px solid var(--color-border);
+  padding: 8px 14px;
+  font-size: var(--font-size-md);
+  color: var(--color-text-primary);
+  font-family: inherit;
+  outline: none;
+  transition: all var(--transition-base);
+  background: var(--color-white);
+  cursor: pointer;
+}
+
+.sdk-select:focus {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px var(--color-primary-light);
+}
+
+.sdk-label {
+  display: block;
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-tight);
+  color: var(--color-neutral-700);
+  margin-bottom: var(--spacing-2);
+}
+
+.sdk-required {
+  color: var(--color-error, #D13212);
+  margin-left: 1px;
+}
+
+.sdk-form-group {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: var(--spacing-5);
+}
+
+.sdk-form-group:last-child {
+  margin-bottom: 0;
+}
+
+.sdk-card {
+  background: var(--color-white);
+  border-radius: 10px;
+  box-shadow: var(--shadow-base);
+  overflow: hidden;
+}
+
+.sdk-card-header {
+  padding: var(--spacing-6);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.sdk-card-body {
+  padding: var(--spacing-6);
+}
+
+.sdk-card-footer {
+  padding: var(--spacing-6);
+  border-top: 1px solid var(--color-border);
+}
+
+.sdk-modal-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  transition: opacity var(--transition-slow);
+  pointer-events: none;
+  z-index: var(--z-modal-backdrop);
+}
+
+.sdk-modal-backdrop.show {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.sdk-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: var(--z-modal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-5);
+  pointer-events: none;
+}
+
+.sdk-modal.open {
+  pointer-events: auto;
+}
+
+.sdk-modal-container {
+  position: relative;
+  width: 100%;
+  max-width: 580px;
+  max-height: 90vh;
+  background: var(--color-white);
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: var(--shadow-2xl);
+  transform: scale(0.95) translateY(20px);
+  opacity: 0;
+  transition: all var(--transition-slow);
+}
+
+.sdk-modal.open .sdk-modal-container {
+  transform: scale(1) translateY(0);
+  opacity: 1;
+}
+
+.sdk-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-6);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.sdk-modal-title {
+  margin: 0;
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+}
+
+.sdk-modal-body {
+  overflow-y: auto;
+  max-height: calc(90vh - 120px);
+}
+
+.sdk-close-btn {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  color: var(--color-neutral-500);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  transition: all var(--transition-base);
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.sdk-close-btn:hover {
+  background: rgba(128, 128, 128, 0.12);
+  color: var(--color-text-primary);
+}
+
+.sdk-close-btn:active {
+  transform: translateY(1px);
+  transition-duration: 100ms;
+}
+
+.sdk-close-btn svg {
+  width: 18px;
+  height: 18px;
+}
+
+.sdk-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-primary);
+  color: var(--color-white);
+  font-weight: var(--font-weight-semibold);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.sdk-avatar-sm {
+  width: 24px;
+  height: 24px;
+  font-size: var(--font-size-xs);
+}
+
+.sdk-avatar-md {
+  width: 32px;
+  height: 32px;
+  font-size: var(--font-size-sm);
+}
+
+.sdk-avatar-lg {
+  width: 40px;
+  height: 40px;
+  font-size: var(--font-size-base);
+}
+
+.sdk-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.sdk-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px var(--spacing-2);
+  border-radius: var(--radius-full);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1;
+}
+
+.sdk-badge-primary {
+  background: var(--color-primary-light);
+  color: var(--color-primary);
+}
+
+.sdk-badge-success {
+  background: var(--color-success-light);
+  color: var(--color-success-dark);
+}
+
+.sdk-badge-error {
+  background: var(--color-error-light);
+  color: var(--color-error-dark);
+}
+
+.sdk-badge-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-full);
+  position: absolute;
+  top: -2px;
+  right: -2px;
+}
+
+.sdk-badge-dot.primary {
+  background: var(--color-primary);
+}
+
+.sdk-badge-dot.error {
+  background: var(--color-error);
+  border: 2px solid var(--color-white);
+}
+
+.sdk-notification {
+  position: fixed;
+  top: var(--spacing-6);
+  right: var(--spacing-6);
+  z-index: var(--z-notification);
+  background: var(--color-white);
+  border-radius: 10px;
+  box-shadow: var(--shadow-lg);
+  min-width: 320px;
+  animation: slideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.sdk-notification-content {
+  display: flex;
+  align-items: center;
+  padding: var(--spacing-4) var(--spacing-5);
+  gap: var(--spacing-3);
+}
+
+.sdk-notification-success {
+  border: 1px solid var(--color-success-light);
+}
+
+.sdk-notification-success .sdk-notification-icon {
+  width: 20px;
+  height: 20px;
+  border-radius: var(--radius-full);
+  background: var(--color-success);
+  color: var(--color-white);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  flex-shrink: 0;
+}
+
+.sdk-notification-text {
+  color: var(--color-success-dark);
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-base);
+  flex: 1;
+}
+
+.sdk-notification .sdk-close-btn {
+  flex-shrink: 0;
+}
+
+.sdk-spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid var(--color-neutral-200);
+  border-top-color: var(--color-primary);
+  border-radius: var(--radius-full);
+  animation: spin 0.8s linear infinite;
+}
+
+.sdk-spinner-sm {
+  width: 20px;
+  height: 20px;
+  border-width: 2px;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    transform: translateX(400px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@media (max-width: 768px) {
+  .sdk-modal {
+    padding: var(--spacing-4);
+  }
+  
+  .sdk-modal-container {
+    max-width: 100%;
+    border-radius: 10px;
+  }
+  
+  .sdk-notification {
+    top: var(--spacing-4);
+    right: var(--spacing-4);
+    left: var(--spacing-4);
+    min-width: auto;
+  }
+}
+`;

package/src/styles/design-tokens.js

@@ -0,0 +1,124 @@
+export const designTokens = `
+:root {
+  --color-primary: #155EEF;
+  --color-primary-hover: #1249CA;
+  --color-primary-active: #0D3A9F;
+  --color-primary-light: rgba(21, 94, 239, 0.1);
+  --color-primary-border: rgba(21, 94, 239, 0.3);
+  
+  --color-success: #10B981;
+  --color-success-hover: #059669;
+  --color-success-light: #D1FAE5;
+  --color-success-dark: #065F46;
+  
+  --color-error: #EF4444;
+  --color-error-hover: #DC2626;
+  --color-error-light: #FEE2E2;
+  --color-error-dark: #991B1B;
+  --color-error-border: #FECACA;
+  
+  --color-warning: #F59E0B;
+  --color-warning-light: #FEF3C7;
+  
+  --color-neutral-50: #F9FAFB;
+  --color-neutral-100: #F3F4F6;
+  --color-neutral-200: #E5E7EB;
+  --color-neutral-300: #D1D5DB;
+  --color-neutral-400: #9CA3AF;
+  --color-neutral-500: #6B7280;
+  --color-neutral-600: #4B5563;
+  --color-neutral-700: #374151;
+  --color-neutral-800: #1F2937;
+  --color-neutral-900: #111827;
+  
+  --color-white: #FFFFFF;
+  --color-black: #000000;
+
+  --color-background: #FFFFFF;
+  --color-surface: #F9FAFB;
+  --color-border: #E5E7EB;
+  --color-text-primary: #111827;
+  --color-text-secondary: #4B5563;
+  --color-text-tertiary: #6B7280;
+
+  /* Messenger semantic tokens (light defaults) */
+  --msg-bg: #FFFFFF;
+  --msg-bg-surface: #F3F4F6;
+  --msg-bg-elevated: #FFFFFF;
+  --msg-bg-hover: #F9FAFB;
+  --msg-bg-input: rgba(255, 255, 255, 0.7);
+  --msg-bg-bubble-own: #FFFFFF;
+  --msg-bg-bubble-received: #F3F4F6;
+  --msg-bg-header-gradient: linear-gradient(180deg, #e0e7ff 0%, #f0f4ff 35%, #FFFFFF 65%);
+  --msg-bg-header-glow1: radial-gradient(circle, rgba(21, 94, 239, 0.08) 0%, transparent 70%);
+  --msg-bg-header-glow2: radial-gradient(circle, rgba(139, 92, 246, 0.05) 0%, transparent 70%);
+  --msg-text: #111827;
+  --msg-text-secondary: #4B5563;
+  --msg-text-tertiary: #6B7280;
+  --msg-text-muted: #9CA3AF;
+  --msg-border: #E5E7EB;
+  --msg-border-bubble: #E5E7EB;
+  --msg-shadow-card: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
+  --msg-shadow-card-hover: rgba(9, 30, 66, 0.3) 0px 2px 2px, rgba(9, 30, 66, 0.18) 0px 0px 1px 1px;
+  
+  --spacing-1: 4px;
+  --spacing-2: 8px;
+  --spacing-3: 12px;
+  --spacing-4: 16px;
+  --spacing-5: 20px;
+  --spacing-6: 24px;
+  --spacing-7: 28px;
+  --spacing-8: 32px;
+  --spacing-10: 40px;
+  --spacing-12: 48px;
+  
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.8125rem;
+  --font-size-base: 0.875rem;
+  --font-size-md: 0.9375rem;
+  --font-size-lg: 1rem;
+  --font-size-xl: 1.125rem;
+  --font-size-2xl: 1.25rem;
+  --font-size-3xl: 1.5rem;
+  
+  --font-weight-normal: 450;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  
+  --line-height-tight: 1.25;
+  --line-height-snug: 1.3;
+  --line-height-normal: 1.4;
+  --line-height-relaxed: 1.5;
+  --line-height-loose: 1.6;
+  
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 10px;
+  --radius-xl: 12px;
+  --radius-2xl: 16px;
+  --radius-3xl: 20px;
+  --radius-4xl: 24px;
+  --radius-full: 9999px;
+  
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  
+  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  
+  --z-dropdown: 1000;
+  --z-sticky: 1020;
+  --z-fixed: 1030;
+  --z-modal-backdrop: 999998;
+  --z-modal: 999999;
+  --z-popover: 1000000;
+  --z-tooltip: 1000001;
+  --z-notification: 1000002;
+}
+`;