@edenapp/sdk 0.1.0

package/edencss/components/sidebar.css

@@ -0,0 +1,232 @@
+/**
+ * Eden Design System - Sidebar Component
+ * Reusable sidebar with sections, items, and navigation
+ */
+
+/* ===== Base Sidebar ===== */
+.eden-sidebar {
+  width: 280px;
+  min-width: 280px;
+  max-height: 100%;
+  background: var(--eden-color-bg-glass-strong);
+  backdrop-filter: var(--eden-glass-strong);
+  -webkit-backdrop-filter: var(--eden-glass-strong);
+  border: 1px solid var(--eden-color-border-light);
+  border-radius: var(--eden-radius-xl);
+  box-shadow: var(--eden-shadow-lg);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.eden-sidebar-compact {
+  width: 240px;
+  min-width: 240px;
+}
+
+.eden-sidebar-wide {
+  width: 320px;
+  min-width: 320px;
+}
+
+/* ===== Sidebar Header ===== */
+.eden-sidebar-header {
+  padding: var(--eden-space-lg);
+  border-bottom: 1px solid var(--eden-color-border-light);
+}
+
+.eden-sidebar-header h2,
+.eden-sidebar-header-title {
+  font-size: var(--eden-font-size-lg);
+  font-weight: var(--eden-font-weight-semibold);
+  color: var(--eden-color-text-primary);
+  margin: 0 0 var(--eden-space-sm) 0;
+}
+
+.eden-sidebar-header-subtitle {
+  font-size: var(--eden-font-size-sm);
+  color: var(--eden-color-text-muted);
+  margin-top: var(--eden-space-xs);
+}
+
+/* ===== Sidebar Section ===== */
+.eden-sidebar-section {
+  padding: var(--eden-space-md);
+}
+
+.eden-sidebar-section-scrollable {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.eden-sidebar-section-title {
+  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: 0.05em;
+  margin-bottom: var(--eden-space-sm);
+  padding: 0 var(--eden-space-sm);
+}
+
+/* ===== Sidebar Divider ===== */
+.eden-sidebar-divider {
+  height: 1px;
+  background: var(--eden-color-border-light);
+  margin: 0 var(--eden-space-md);
+}
+
+/* ===== Sidebar Items Container ===== */
+.eden-sidebar-items {
+  display: flex;
+  flex-direction: column;
+  gap: var(--eden-space-xs);
+}
+
+.eden-sidebar-items-scrollable {
+  flex: 1;
+  overflow-y: auto;
+}
+
+/* ===== Sidebar Item ===== */
+.eden-sidebar-item {
+  display: flex;
+  align-items: center;
+  gap: var(--eden-space-md);
+  padding: var(--eden-space-md);
+  border-radius: var(--eden-radius-md);
+  cursor: pointer;
+  transition: all var(--eden-transition-base);
+  color: var(--eden-color-text-secondary);
+  user-select: none;
+}
+
+.eden-sidebar-item:hover {
+  background: var(--eden-color-bg-glass-medium);
+  color: var(--eden-color-text-primary);
+}
+
+.eden-sidebar-item-selected {
+  background: var(--eden-color-surface-active);
+  border: 1px solid var(--eden-color-accent-primary);
+  color: var(--eden-color-text-primary);
+}
+
+.eden-sidebar-item-disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.eden-sidebar-item-disabled:hover {
+  background: transparent;
+  color: var(--eden-color-text-secondary);
+}
+
+/* ===== Sidebar Item Content ===== */
+.eden-sidebar-item-icon {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  flex-shrink: 0;
+}
+
+.eden-sidebar-item-icon img {
+  width: 24px;
+  height: 24px;
+  border-radius: var(--eden-radius-sm);
+  object-fit: contain;
+}
+
+.eden-sidebar-item-icon-lg {
+  width: 32px;
+  height: 32px;
+  font-size: 20px;
+}
+
+.eden-sidebar-item-icon-lg img {
+  width: 32px;
+  height: 32px;
+}
+
+.eden-sidebar-item-text {
+  font-size: var(--eden-font-size-sm);
+  font-weight: var(--eden-font-weight-medium);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+}
+
+.eden-sidebar-item-meta {
+  font-size: var(--eden-font-size-xs);
+  color: var(--eden-color-text-muted);
+  background: var(--eden-color-bg-glass-medium);
+  padding: var(--eden-space-xs) var(--eden-space-sm);
+  border-radius: var(--eden-radius-full);
+  flex-shrink: 0;
+}
+
+/* ===== Sidebar Item with Details ===== */
+.eden-sidebar-item-details {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.eden-sidebar-item-title {
+  font-size: var(--eden-font-size-sm);
+  font-weight: var(--eden-font-weight-medium);
+  color: var(--eden-color-text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.eden-sidebar-item-subtitle {
+  font-size: var(--eden-font-size-xs);
+  color: var(--eden-color-text-muted);
+  font-family: var(--eden-font-mono);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ===== Sidebar Search ===== */
+.eden-sidebar-search {
+  width: 100%;
+  padding: var(--eden-space-sm) var(--eden-space-md);
+  background: var(--eden-color-bg-glass-medium);
+  border: 1px solid var(--eden-color-border-light);
+  border-radius: var(--eden-radius-md);
+  color: var(--eden-color-text-primary);
+  font-size: var(--eden-font-size-sm);
+  outline: none;
+  transition: all var(--eden-transition-base);
+}
+
+.eden-sidebar-search:focus {
+  border-color: var(--eden-color-accent-primary);
+  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
+}
+
+.eden-sidebar-search::placeholder {
+  color: var(--eden-color-text-muted);
+}
+
+/* ===== Sidebar Footer ===== */
+.eden-sidebar-footer {
+  padding: var(--eden-space-md);
+  border-top: 1px solid var(--eden-color-border-light);
+}
+
+/* ===== Animations ===== */
+.eden-sidebar-item {
+  animation: eden-fade-in 0.2s ease-out;
+}

package/edencss/components/tabs.css

@@ -0,0 +1,189 @@
+/**
+ * Eden Design System - Tab Components
+ * Frosted glass styled tabs and navigation
+ */
+
+/* ===== Tab Container ===== */
+.eden-tabs {
+  width: 100%;
+}
+
+/* ===== Tab List ===== */
+.eden-tab-list {
+  display: flex;
+  gap: var(--eden-space-xs);
+  padding: var(--eden-space-xs);
+  
+  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);
+  
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.eden-tab-list::-webkit-scrollbar {
+  display: none;
+}
+
+/* ===== Tab Button ===== */
+.eden-tab {
+  flex-shrink: 0;
+  padding: var(--eden-space-sm) var(--eden-space-lg);
+  border-radius: var(--eden-radius-md);
+  border: none;
+  background: transparent;
+  color: var(--eden-color-text-secondary);
+  font-size: var(--eden-font-size-md);
+  font-weight: var(--eden-font-weight-medium);
+  cursor: pointer;
+  transition: all var(--eden-transition-base);
+  user-select: none;
+  white-space: nowrap;
+  outline: none;
+}
+
+.eden-tab:hover {
+  background: var(--eden-color-bg-glass-light);
+  color: var(--eden-color-text-primary);
+}
+
+.eden-tab-active {
+  background: var(--eden-color-surface-elevated);
+  color: var(--eden-color-text-primary);
+  box-shadow: var(--eden-shadow-sm);
+}
+
+.eden-tab:focus-visible {
+  outline: 2px solid var(--eden-color-accent-primary);
+  outline-offset: 2px;
+}
+
+.eden-tab:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ===== Tab Panels ===== */
+.eden-tab-panels {
+  padding: var(--eden-space-lg);
+}
+
+.eden-tab-panel {
+  display: none;
+  animation: eden-fade-in var(--eden-duration-normal) var(--eden-transition-ease-out);
+}
+
+.eden-tab-panel-active {
+  display: block;
+}
+
+/* ===== Underline Tabs ===== */
+.eden-tab-list-underline {
+  background: transparent;
+  border: none;
+  border-bottom: 1px solid var(--eden-color-border-light);
+  border-radius: 0;
+  gap: var(--eden-space-lg);
+  padding: 0;
+}
+
+.eden-tab-underline {
+  border-radius: 0;
+  padding: var(--eden-space-md) 0;
+  position: relative;
+}
+
+.eden-tab-underline::after {
+  content: '';
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: transparent;
+  transition: background var(--eden-transition-base);
+}
+
+.eden-tab-underline:hover::after {
+  background: var(--eden-color-border-medium);
+}
+
+.eden-tab-underline.eden-tab-active::after {
+  background: var(--eden-color-accent-primary);
+}
+
+/* ===== Pill Tabs ===== */
+.eden-tab-list-pills {
+  background: transparent;
+  border: none;
+  padding: 0;
+  gap: var(--eden-space-sm);
+}
+
+.eden-tab-pill {
+  border-radius: var(--eden-radius-lg);
+  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);
+}
+
+.eden-tab-pill:hover {
+  background: var(--eden-color-bg-glass-strong);
+  border-color: var(--eden-color-border-medium);
+}
+
+.eden-tab-pill.eden-tab-active {
+  background: linear-gradient(135deg, var(--eden-color-accent-blue), var(--eden-color-accent-blue-dark));
+  border-color: transparent;
+  color: white;
+}
+
+/* ===== Vertical Tabs ===== */
+.eden-tabs-vertical {
+  display: flex;
+  gap: var(--eden-space-lg);
+}
+
+.eden-tab-list-vertical {
+  flex-direction: column;
+  width: 200px;
+  flex-shrink: 0;
+}
+
+.eden-tab-list-vertical .eden-tab {
+  justify-content: flex-start;
+  text-align: left;
+  width: 100%;
+}
+
+/* ===== Tab with Icon ===== */
+.eden-tab-with-icon {
+  display: flex;
+  align-items: center;
+  gap: var(--eden-space-sm);
+}
+
+.eden-tab-icon {
+  width: 18px;
+  height: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ===== Tab with Badge ===== */
+.eden-tab-badge {
+  margin-left: var(--eden-space-xs);
+  padding: 2px var(--eden-space-xs);
+  border-radius: var(--eden-radius-xs);
+  background: var(--eden-color-danger);
+  color: white;
+  font-size: 10px;
+  font-weight: var(--eden-font-weight-bold);
+}
+

package/edencss/eden.css

@@ -0,0 +1,16 @@
+/* Design Tokens */
+@import "./tokens.css";
+
+/* Utility Classes */
+@import "./utilities.css";
+
+/* Components */
+@import "./components/buttons.css";
+@import "./components/inputs.css";
+@import "./components/cards.css";
+@import "./components/modals.css";
+@import "./components/badges.css";
+@import "./components/progress.css";
+@import "./components/lists.css";
+@import "./components/tabs.css";
+@import "./components/sidebar.css";

package/edencss/index.ts

@@ -0,0 +1,11 @@
+// Import all CSS component files
+import "./tokens.css";
+import "./utilities.css";
+import "./components/buttons.css";
+import "./components/inputs.css";
+import "./components/cards.css";
+import "./components/modals.css";
+import "./components/badges.css";
+import "./components/progress.css";
+import "./components/lists.css";
+import "./components/tabs.css";

package/edencss/style-dictionary.config.mjs

@@ -0,0 +1,75 @@
+/**
+ * Style Dictionary Configuration
+ * 
+ * This configuration defines how design tokens are transformed and output.
+ * Single source of truth: src/design-system/tokens.json
+ */
+
+export default {
+  source: ['tokens.json'],
+
+  platforms: {
+    // Generate CSS custom properties
+    css: {
+      transformGroup: 'css',
+      prefix: 'eden',
+      buildPath: './',
+      files: [
+        {
+          destination: 'tokens.css',
+          format: 'css/variables',
+          options: {
+            selector: ':root',
+            outputReferences: true,
+            fileHeader: () => [
+              'Eden CSS - Design Tokens',
+              '',
+              '⚠️  AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY',
+              '',
+              'This file is generated from src/edencss/tokens.json',
+              'Run `npm run tokens:build` to regenerate',
+              '',
+              'These CSS custom properties define the visual language of Eden.',
+              'They can be used in any app or component.',
+            ],
+          },
+        },
+      ],
+    },
+
+    // Generate TypeScript/JavaScript module
+    js: {
+      transformGroup: 'js',
+      prefix: 'eden',
+      buildPath: './',
+      files: [
+        {
+          destination: 'tokens.ts',
+          format: 'javascript/es6',
+          options: {
+            outputReferences: false,
+            fileHeader: () => [
+              'Eden CSS - TypeScript/JavaScript API',
+              '',
+              '⚠️  AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY',
+              '',
+              '🎯 SINGLE SOURCE OF TRUTH: src/design-system/tokens.json',
+              '',
+              'This file is generated from tokens.json using Style Dictionary.',
+              'Run `npm run tokens:build` to regenerate',
+              '',
+              'This provides programmatic access to design tokens for TypeScript/JavaScript code.',
+            ],
+          },
+        },
+        {
+          destination: 'tokens.d.ts',
+          format: 'typescript/es6-declarations',
+          options: {
+            outputReferences: false,
+          },
+        },
+      ],
+    },
+  },
+};

package/edencss/tokens-pink.json

@@ -0,0 +1,163 @@
+{
+  "color": {
+    "bg": {
+      "primary": {
+        "value": "linear-gradient(135deg, #faf5f7 0%, #f5eef1 50%, #f0e6ea 100%)"
+      },
+      "secondary": {
+        "value": "linear-gradient(135deg, #ffeef5 0%, #ffe0eb 100%)"
+      },
+      "glass": {
+        "light": { "value": "rgba(255, 255, 255, 0.6)" },
+        "medium": { "value": "rgba(255, 255, 255, 0.7)" },
+        "strong": { "value": "rgba(255, 240, 245, 0.8)" }
+      },
+      "overlay": { "value": "rgba(0, 0, 0, 0.4)" },
+      "dark": { "value": "rgba(0, 0, 0, 0.04)" }
+    },
+    "surface": {
+      "primary": { "value": "#ffffff" },
+      "secondary": { "value": "#faf5f7" },
+      "tertiary": { "value": "#f5eef1" },
+      "elevated": { "value": "rgba(255, 255, 255, 0.9)" },
+      "hover": { "value": "rgba(255, 240, 245, 0.5)" },
+      "active": { "value": "rgba(255, 182, 193, 0.3)" }
+    },
+    "text": {
+      "primary": { "value": "rgba(30, 30, 30, 0.95)" },
+      "secondary": { "value": "rgba(60, 60, 60, 0.85)" },
+      "tertiary": { "value": "rgba(100, 100, 100, 0.75)" },
+      "muted": { "value": "rgba(120, 120, 120, 0.6)" },
+      "inverse": { "value": "#ffffff" },
+      "on-dark": { "value": "#ffffff" }
+    },
+    "accent": {
+      "primary": { "value": "#ff69b4" },
+      "primary-hover": { "value": "#ff85c1" },
+      "primary-active": { "value": "#ff1493" },
+      "blue": { "value": "rgb(255, 182, 193)" },
+      "blue-dark": { "value": "rgb(255, 105, 180)" },
+      "purple": { "value": "#ff6b9d" },
+      "purple-light": { "value": "#ffb3d9" }
+    },
+    "success": { "value": "#51cf66" },
+    "success-hover": { "value": "#69db7c" },
+    "danger": { "value": "#ff3b30" },
+    "danger-hover": { "value": "#ff6b6b" },
+    "danger-bg": { "value": "rgba(255, 59, 48, 0.1)" },
+    "warning": { "value": "#ffd93d" },
+    "info": { "value": "#ff91a4" },
+    "border": {
+      "light": { "value": "rgba(255, 182, 193, 0.2)" },
+      "medium": { "value": "rgba(255, 182, 193, 0.3)" },
+      "dark": { "value": "rgba(0, 0, 0, 0.1)" },
+      "separator": { "value": "rgba(255, 182, 193, 0.25)" }
+    }
+  },
+  "space": {
+    "xs": { "value": "4px" },
+    "sm": { "value": "8px" },
+    "md": { "value": "16px" },
+    "lg": { "value": "24px" },
+    "xl": { "value": "36px" },
+    "2xl": { "value": "48px" },
+    "3xl": { "value": "64px" }
+  },
+  "radius": {
+    "xs": { "value": "6px" },
+    "sm": { "value": "10px" },
+    "md": { "value": "14px" },
+    "lg": { "value": "18px" },
+    "xl": { "value": "20px" },
+    "2xl": { "value": "28px" },
+    "round": { "value": "50%" }
+  },
+  "shadow": {
+    "xs": { "value": "0 1px 3px rgba(0, 0, 0, 0.1)" },
+    "sm": { "value": "0 2px 6px rgba(0, 0, 0, 0.12)" },
+    "md": { "value": "0 8px 20px rgba(0, 0, 0, 0.15)" },
+    "lg": { "value": "0 10px 30px rgba(0, 0, 0, 0.18)" },
+    "xl": { "value": "0 20px 60px rgba(0, 0, 0, 0.2)" },
+    "2xl": { "value": "0 28px 80px rgba(0, 0, 0, 0.25)" },
+    "inner": { "value": "inset 0 1px 3px rgba(0, 0, 0, 0.1)" }
+  },
+  "glass": {
+    "light": { "value": "blur(10px) saturate(120%)" },
+    "medium": { "value": "blur(18px) saturate(140%)" },
+    "strong": { "value": "blur(26px) saturate(160%)" },
+    "ultra": { "value": "blur(34px) saturate(170%)" }
+  },
+  "font": {
+    "family": {
+      "base": {
+        "value": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif"
+      },
+      "mono": {
+        "value": "\"SF Mono\", Monaco, \"Cascadia Code\", \"Roboto Mono\", Consolas, \"Courier New\", monospace"
+      }
+    },
+    "size": {
+      "xs": { "value": "10px" },
+      "sm": { "value": "11px" },
+      "base": { "value": "13px" },
+      "md": { "value": "14px" },
+      "lg": { "value": "16px" },
+      "xl": { "value": "18px" },
+      "2xl": { "value": "24px" },
+      "3xl": { "value": "32px" },
+      "4xl": { "value": "48px" }
+    },
+    "weight": {
+      "normal": { "value": 400 },
+      "medium": { "value": 500 },
+      "semibold": { "value": 600 },
+      "bold": { "value": 700 }
+    },
+    "line-height": {
+      "tight": { "value": 1.2 },
+      "normal": { "value": 1.5 },
+      "relaxed": { "value": 1.75 }
+    },
+    "letter-spacing": {
+      "tight": { "value": "-0.6px" },
+      "normal": { "value": "-0.2px" },
+      "wide": { "value": "0.1px" }
+    }
+  },
+  "transition": {
+    "fast": { "value": "0.15s ease" },
+    "base": { "value": "0.2s cubic-bezier(0.4, 0, 0.2, 1)" },
+    "smooth": { "value": "0.3s cubic-bezier(0.4, 0, 0.2, 1)" },
+    "bounce": { "value": "0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55)" },
+    "ease": {
+      "in": { "value": "cubic-bezier(0.4, 0, 1, 1)" },
+      "out": { "value": "cubic-bezier(0, 0, 0.2, 1)" },
+      "in-out": { "value": "cubic-bezier(0.4, 0, 0.2, 1)" }
+    }
+  },
+  "z": {
+    "base": { "value": 0 },
+    "dropdown": { "value": 100 },
+    "sticky": { "value": 200 },
+    "overlay": { "value": 1000 },
+    "modal": { "value": 2000 },
+    "popover": { "value": 2001 },
+    "tooltip": { "value": 3000 }
+  },
+  "layout": {
+    "dock-height": { "value": "72px" },
+    "icon-size": {
+      "sm": { "value": "24px" },
+      "md": { "value": "40px" },
+      "lg": { "value": "64px" },
+      "xl": { "value": "88px" }
+    }
+  },
+  "duration": {
+    "instant": { "value": "0.1s" },
+    "fast": { "value": "0.15s" },
+    "normal": { "value": "0.22s" },
+    "slow": { "value": "0.32s" },
+    "slower": { "value": "0.5s" }
+  }
+}