@edenapp/sdk 0.1.0

package/edencss/components/lists.css

@@ -0,0 +1,242 @@
+/**
+ * Eden Design System - List Components
+ * Frosted glass styled lists and menus
+ */
+
+/* ===== Base List ===== */
+.eden-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  
+  border-radius: var(--eden-radius-lg);
+  overflow: hidden;
+  
+  background: var(--eden-color-bg-glass-medium);
+  backdrop-filter: var(--eden-glass-medium);
+  -webkit-backdrop-filter: var(--eden-glass-medium);
+  
+  border: 1px solid var(--eden-color-border-light);
+  box-shadow: var(--eden-shadow-md);
+}
+
+/* ===== List Item ===== */
+.eden-list-item {
+  padding: var(--eden-space-md) var(--eden-space-lg);
+  border-bottom: 1px solid var(--eden-color-border-light);
+  transition: all var(--eden-transition-base);
+  color: var(--eden-color-text-primary);
+  display: flex;
+  align-items: center;
+  gap: var(--eden-space-md);
+}
+
+.eden-list-item:last-child {
+  border-bottom: none;
+}
+
+.eden-list-item:hover {
+  background: var(--eden-color-surface-hover);
+}
+
+.eden-list-item-active {
+  background: var(--eden-color-surface-active);
+  border-left: 3px solid var(--eden-color-accent-primary);
+  padding-left: calc(var(--eden-space-lg) - 3px);
+}
+
+.eden-list-item-interactive {
+  cursor: pointer;
+  user-select: none;
+}
+
+.eden-list-item-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.eden-list-item-disabled:hover {
+  background: transparent;
+}
+
+/* ===== List Item Content ===== */
+.eden-list-item-icon {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--eden-color-accent-primary);
+}
+
+.eden-list-item-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--eden-space-xs);
+}
+
+.eden-list-item-title {
+  font-weight: var(--eden-font-weight-medium);
+  color: var(--eden-color-text-primary);
+}
+
+.eden-list-item-description {
+  font-size: var(--eden-font-size-sm);
+  color: var(--eden-color-text-secondary);
+}
+
+.eden-list-item-meta {
+  font-size: var(--eden-font-size-sm);
+  color: var(--eden-color-text-muted);
+  flex-shrink: 0;
+}
+
+/* ===== Menu ===== */
+.eden-menu {
+  list-style: none;
+  padding: var(--eden-space-sm);
+  margin: 0;
+  
+  border-radius: var(--eden-radius-lg);
+  
+  background: var(--eden-color-bg-glass-strong);
+  backdrop-filter: var(--eden-glass-ultra);
+  -webkit-backdrop-filter: var(--eden-glass-ultra);
+  
+  border: 1px solid var(--eden-color-border-medium);
+  box-shadow: var(--eden-shadow-xl);
+  
+  min-width: 200px;
+}
+
+.eden-menu-item {
+  padding: var(--eden-space-sm) var(--eden-space-md);
+  border-radius: var(--eden-radius-sm);
+  cursor: pointer;
+  transition: all var(--eden-transition-fast);
+  color: var(--eden-color-text-primary);
+  display: flex;
+  align-items: center;
+  gap: var(--eden-space-sm);
+  font-size: var(--eden-font-size-md);
+  user-select: none;
+}
+
+.eden-menu-item:hover {
+  background: var(--eden-color-surface-hover);
+}
+
+.eden-menu-item-active {
+  background: var(--eden-color-surface-active);
+  color: var(--eden-color-accent-primary);
+}
+
+.eden-menu-divider {
+  height: 1px;
+  background: var(--eden-color-border-light);
+  margin: var(--eden-space-sm) 0;
+}
+
+.eden-menu-title {
+  padding: var(--eden-space-sm) var(--eden-space-md);
+  font-size: var(--eden-font-size-xs);
+  font-weight: var(--eden-font-weight-semibold);
+  color: var(--eden-color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: var(--eden-font-letter-spacing-wide);
+}
+
+/* ===== Dropdown Menu ===== */
+.eden-dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.eden-dropdown-menu {
+  position: absolute;
+  top: calc(100% + var(--eden-space-sm));
+  left: 0;
+  z-index: var(--eden-z-dropdown);
+  
+  animation: eden-fade-in var(--eden-duration-fast) var(--eden-transition-ease-out);
+}
+
+.eden-dropdown-menu-right {
+  left: auto;
+  right: 0;
+}
+
+/* ===== Steps List ===== */
+.eden-steps {
+  display: flex;
+  align-items: center;
+  gap: var(--eden-space-md);
+  padding: var(--eden-space-lg);
+  
+  background: var(--eden-color-bg-glass-medium);
+  backdrop-filter: var(--eden-glass-medium);
+  -webkit-backdrop-filter: var(--eden-glass-medium);
+  
+  border-radius: var(--eden-radius-lg);
+  border: 1px solid var(--eden-color-border-light);
+}
+
+.eden-step {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--eden-space-sm);
+  position: relative;
+}
+
+.eden-step::after {
+  content: '';
+  position: absolute;
+  left: calc(100% + var(--eden-space-sm));
+  width: var(--eden-space-md);
+  height: 2px;
+  background: var(--eden-color-border-light);
+}
+
+.eden-step:last-child::after {
+  display: none;
+}
+
+.eden-step-number {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--eden-radius-round);
+  background: var(--eden-color-bg-glass-light);
+  border: 2px solid var(--eden-color-border-medium);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: var(--eden-font-weight-semibold);
+  color: var(--eden-color-text-muted);
+  flex-shrink: 0;
+}
+
+.eden-step-active .eden-step-number {
+  background: var(--eden-color-accent-primary);
+  border-color: var(--eden-color-accent-primary);
+  color: white;
+}
+
+.eden-step-completed .eden-step-number {
+  background: var(--eden-color-success);
+  border-color: var(--eden-color-success);
+  color: white;
+}
+
+.eden-step-label {
+  font-size: var(--eden-font-size-sm);
+  color: var(--eden-color-text-secondary);
+}
+
+.eden-step-active .eden-step-label {
+  color: var(--eden-color-text-primary);
+  font-weight: var(--eden-font-weight-medium);
+}
+

package/edencss/components/modals.css

@@ -0,0 +1,207 @@
+/**
+ * Eden Design System - Modal Components
+ * Frosted glass styled dialogs and overlays
+ */
+
+/* ===== Modal Overlay ===== */
+.eden-modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--eden-z-modal);
+  
+  background: var(--eden-color-bg-overlay);
+  backdrop-filter: var(--eden-glass-strong);
+  -webkit-backdrop-filter: var(--eden-glass-strong);
+  
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--eden-space-2xl);
+  
+  animation: eden-fade-in var(--eden-duration-normal) var(--eden-transition-ease-out);
+}
+
+/* ===== Modal Container ===== */
+.eden-modal {
+  position: relative;
+  width: 100%;
+  max-width: 500px;
+  max-height: 90vh;
+  
+  border-radius: var(--eden-radius-2xl);
+  
+  /* Ultra frosted glass effect */
+  background: var(--eden-color-bg-glass-strong);
+  backdrop-filter: var(--eden-glass-ultra);
+  -webkit-backdrop-filter: var(--eden-glass-ultra);
+  
+  border: 1px solid var(--eden-color-border-medium);
+  box-shadow: var(--eden-shadow-2xl);
+  
+  display: flex;
+  flex-direction: column;
+  
+  animation: eden-scale-in var(--eden-duration-normal) var(--eden-transition-ease-out);
+  overflow: hidden;
+}
+
+.eden-modal-lg {
+  max-width: 800px;
+}
+
+.eden-modal-sm {
+  max-width: 400px;
+}
+
+.eden-modal-full {
+  max-width: 95vw;
+  max-height: 95vh;
+}
+
+/* ===== Modal Header ===== */
+.eden-modal-header {
+  padding: var(--eden-space-xl);
+  padding-bottom: var(--eden-space-lg);
+  border-bottom: 1px solid var(--eden-color-border-light);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--eden-space-md);
+}
+
+.eden-modal-title {
+  font-size: var(--eden-font-size-2xl);
+  font-weight: var(--eden-font-weight-semibold);
+  color: var(--eden-color-text-primary);
+  margin: 0;
+}
+
+.eden-modal-close {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--eden-radius-md);
+  border: none;
+  background: var(--eden-color-bg-glass-light);
+  color: var(--eden-color-text-secondary);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--eden-transition-base);
+  flex-shrink: 0;
+}
+
+.eden-modal-close:hover {
+  background: var(--eden-color-surface-hover);
+  color: var(--eden-color-text-primary);
+}
+
+/* ===== Modal Body ===== */
+.eden-modal-body {
+  padding: var(--eden-space-xl);
+  overflow-y: auto;
+  flex: 1;
+  color: var(--eden-color-text-secondary);
+}
+
+/* ===== Modal Footer ===== */
+.eden-modal-footer {
+  padding: var(--eden-space-xl);
+  padding-top: var(--eden-space-lg);
+  border-top: 1px solid var(--eden-color-border-light);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--eden-space-md);
+}
+
+/* ===== Alert Modal ===== */
+.eden-alert-modal {
+  text-align: center;
+  padding: var(--eden-space-2xl);
+}
+
+.eden-alert-icon {
+  width: 64px;
+  height: 64px;
+  margin: 0 auto var(--eden-space-lg) auto;
+  border-radius: var(--eden-radius-round);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--eden-font-size-3xl);
+}
+
+.eden-alert-icon-info {
+  background: rgba(77, 171, 247, 0.2);
+  color: var(--eden-color-info);
+}
+
+.eden-alert-icon-success {
+  background: rgba(81, 207, 102, 0.2);
+  color: var(--eden-color-success);
+}
+
+.eden-alert-icon-warning {
+  background: rgba(255, 217, 61, 0.2);
+  color: var(--eden-color-warning);
+}
+
+.eden-alert-icon-danger {
+  background: rgba(255, 59, 48, 0.2);
+  color: var(--eden-color-danger);
+}
+
+/* ===== Tooltip ===== */
+.eden-tooltip {
+  position: absolute;
+  z-index: var(--eden-z-tooltip);
+  padding: var(--eden-space-sm) var(--eden-space-md);
+  border-radius: var(--eden-radius-sm);
+  
+  background: var(--eden-color-surface-secondary);
+  backdrop-filter: var(--eden-glass-strong);
+  -webkit-backdrop-filter: var(--eden-glass-strong);
+  
+  border: 1px solid var(--eden-color-border-light);
+  box-shadow: var(--eden-shadow-lg);
+  
+  font-size: var(--eden-font-size-sm);
+  color: var(--eden-color-text-primary);
+  white-space: nowrap;
+  
+  pointer-events: none;
+  animation: eden-fade-in var(--eden-duration-fast) var(--eden-transition-ease-out);
+}
+
+/* ===== Popover ===== */
+.eden-popover {
+  position: absolute;
+  z-index: var(--eden-z-popover);
+  min-width: 200px;
+  max-width: 400px;
+  border-radius: var(--eden-radius-lg);
+  padding: var(--eden-space-lg);
+  
+  background: var(--eden-color-bg-glass-strong);
+  backdrop-filter: var(--eden-glass-ultra);
+  -webkit-backdrop-filter: var(--eden-glass-ultra);
+  
+  border: 1px solid var(--eden-color-border-medium);
+  box-shadow: var(--eden-shadow-xl);
+  
+  color: var(--eden-color-text-primary);
+  
+  animation: eden-scale-in var(--eden-duration-fast) var(--eden-transition-ease-out);
+}
+
+.eden-popover-title {
+  font-weight: var(--eden-font-weight-semibold);
+  margin: 0 0 var(--eden-space-sm) 0;
+}
+
+.eden-popover-content {
+  font-size: var(--eden-font-size-sm);
+  color: var(--eden-color-text-secondary);
+}
+

package/edencss/components/progress.css

@@ -0,0 +1,186 @@
+/**
+ * Eden Design System - Progress Components
+ * Frosted glass styled progress indicators
+ */
+
+/* ===== Progress Bar ===== */
+.eden-progress {
+  width: 100%;
+  height: 8px;
+  border-radius: 999px;
+  overflow: hidden;
+  
+  background: var(--eden-color-bg-glass-medium);
+  backdrop-filter: var(--eden-glass-light);
+  -webkit-backdrop-filter: var(--eden-glass-light);
+  
+  border: 1px solid var(--eden-color-border-light);
+  position: relative;
+}
+
+.eden-progress-bar {
+  height: 100%;
+  border-radius: 999px;
+  background: linear-gradient(90deg, var(--eden-color-accent-blue), var(--eden-color-accent-blue-dark));
+  transition: width var(--eden-duration-slow) var(--eden-transition-ease-out);
+  box-shadow: 0 0 10px rgba(82, 163, 255, 0.5);
+}
+
+.eden-progress-bar-success {
+  background: linear-gradient(90deg, var(--eden-color-success), var(--eden-color-success-hover));
+  box-shadow: 0 0 10px rgba(81, 207, 102, 0.5);
+}
+
+.eden-progress-bar-danger {
+  background: linear-gradient(90deg, var(--eden-color-danger), var(--eden-color-danger-hover));
+  box-shadow: 0 0 10px rgba(255, 59, 48, 0.5);
+}
+
+.eden-progress-bar-warning {
+  background: var(--eden-color-warning);
+  box-shadow: 0 0 10px rgba(255, 217, 61, 0.5);
+}
+
+.eden-progress-animated .eden-progress-bar {
+  animation: eden-progress-shimmer 2s infinite;
+  background-size: 200% 100%;
+}
+
+@keyframes eden-progress-shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+/* ===== Progress Sizes ===== */
+.eden-progress-sm {
+  height: 4px;
+}
+
+.eden-progress-lg {
+  height: 12px;
+}
+
+.eden-progress-xl {
+  height: 16px;
+}
+
+/* ===== Circular Progress ===== */
+.eden-progress-circle {
+  width: 80px;
+  height: 80px;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.eden-progress-circle-svg {
+  transform: rotate(-90deg);
+  width: 100%;
+  height: 100%;
+}
+
+.eden-progress-circle-bg {
+  fill: none;
+  stroke: var(--eden-color-bg-glass-medium);
+  stroke-width: 4;
+}
+
+.eden-progress-circle-bar {
+  fill: none;
+  stroke: var(--eden-color-accent-primary);
+  stroke-width: 4;
+  stroke-linecap: round;
+  transition: stroke-dashoffset var(--eden-duration-slow) var(--eden-transition-ease-out);
+}
+
+.eden-progress-circle-text {
+  position: absolute;
+  font-size: var(--eden-font-size-lg);
+  font-weight: var(--eden-font-weight-semibold);
+  color: var(--eden-color-text-primary);
+}
+
+/* ===== Spinner ===== */
+.eden-spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid var(--eden-color-bg-glass-medium);
+  border-top-color: var(--eden-color-accent-primary);
+  border-radius: var(--eden-radius-round);
+  animation: eden-spin 0.8s linear infinite;
+}
+
+@keyframes eden-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.eden-spinner-sm {
+  width: 20px;
+  height: 20px;
+  border-width: 2px;
+}
+
+.eden-spinner-lg {
+  width: 60px;
+  height: 60px;
+  border-width: 4px;
+}
+
+/* ===== Skeleton Loader ===== */
+.eden-skeleton {
+  background: var(--eden-color-bg-glass-medium);
+  border-radius: var(--eden-radius-md);
+  position: relative;
+  overflow: hidden;
+}
+
+.eden-skeleton::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    var(--eden-color-surface-hover),
+    transparent
+  );
+  animation: eden-skeleton-shimmer 1.5s infinite;
+}
+
+@keyframes eden-skeleton-shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.eden-skeleton-text {
+  height: 1em;
+  width: 100%;
+}
+
+.eden-skeleton-title {
+  height: 2em;
+  width: 70%;
+}
+
+.eden-skeleton-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--eden-radius-round);
+}
+
+.eden-skeleton-button {
+  height: 40px;
+  width: 120px;
+}
+