atomicuilibrary 0.0.1

package/dist/collection/components/library/library-card.js

@@ -0,0 +1,203 @@
+import { h, Host } from "@stencil/core";
+export class LibraryCard {
+    /** Component ID (used for linking) */
+    componentId;
+    /** Title of the component */
+    cardTitle;
+    /** Short description */
+    description;
+    /** Icon emoji */
+    icon = '📦';
+    /** Optional badge text */
+    badge;
+    /** Optional documentation URL */
+    docs;
+    /** Mode: 'demo' or 'doc' */
+    mode = 'demo';
+    handleViewDemo = () => {
+        if (this.mode === 'doc') {
+            if (this.docs) {
+                window.location.href = this.docs;
+            }
+            return;
+        }
+        // Check if global showSection exists (defined in dashboard.html)
+        if (window.showSection) {
+            window.showSection(this.componentId);
+            return;
+        }
+        // Fallback navigation
+        const targetUrl = `/index.html#${this.componentId}`;
+        try {
+            if (window.parent !== window) {
+                window.parent.location.href = targetUrl;
+            }
+            else {
+                window.location.href = targetUrl;
+            }
+        }
+        catch (e) {
+            window.location.href = targetUrl;
+        }
+    };
+    handleViewDocs = (e) => {
+        e.stopPropagation();
+        if (this.docs) {
+            window.location.href = this.docs;
+        }
+    };
+    render() {
+        return (h(Host, { key: '3a3ff13a2954f14c350206fdad4ba6340f653e4e' }, h("div", { key: 'b92cca51b6cc6af60d8476f386482ccfdd475a34', class: "card", onClick: this.handleViewDemo }, h("div", { key: '30a68d761de621658d2fc34a40ea101fbf04141e', class: "card-icon" }, this.icon), h("div", { key: '9ac9cba2c76b9568e2a5f319f0b04cb283a5e682', class: "card-content" }, h("h3", { key: '0b62e3e8b4839a79a4f567dee7ff1da61a8799cf', class: "card-title" }, this.cardTitle, this.badge && h("span", { key: '2254007ce97d9a0cc9cbcf66f8b397e48eaca256', class: "badge" }, this.badge)), h("p", { key: '4d5a519fd7d9759ae9f17783e680002e66a82106', class: "card-description" }, this.description)), h("div", { key: '71b72af77182f87ce4e09ad2f17a3f66618ffc12', class: "card-action" }, this.docs && (h("ui-button", { key: '3b9318ef02116646198e2535f97394ccf634f674', variant: "ghost", size: "md", icon: "file-text", "icon-library": "lucide", title: "View Documentation", onClick: this.handleViewDocs })), h("ui-button", { key: 'de3abccdcdd7e3504e7fc57d3525e0a41b27b731', variant: "filled", color: "primary", size: "md", icon: "play", "icon-library": "lucide", title: "View Demo" })))));
+    }
+    static get is() { return "library-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["library-card.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["library-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "componentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Component ID (used for linking)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "component-id"
+            },
+            "cardTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Title of the component"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "card-title"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Short description"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon emoji"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon",
+                "defaultValue": "'\uD83D\uDCE6'"
+            },
+            "badge": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional badge text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "badge"
+            },
+            "docs": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional documentation URL"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "docs"
+            },
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'demo' | 'doc'",
+                    "resolved": "\"demo\" | \"doc\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mode: 'demo' or 'doc'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mode",
+                "defaultValue": "'demo'"
+            }
+        };
+    }
+}

package/dist/collection/components/library/library.css

@@ -0,0 +1,358 @@
+.sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border-width: 0 !important;
+}
+
+.a11y-sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border-width: 0 !important;
+}
+
+:host {
+  display: block;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  /* Default Dark Theme */
+  --primary: #6366f1;
+  --primary-light: #818cf8;
+  --bg-dark: #0f172a;
+  --bg-card: rgba(30, 41, 59, 0.6);
+  --text-primary: #f1f5f9;
+  --text-secondary: #94a3b8;
+  --border: rgba(255, 255, 255, 0.08);
+  --header-bg: rgba(15, 23, 42, 0.85);
+  --input-bg: rgba(255, 255, 255, 0.05);
+}
+
+/* Light Theme Override */
+:host-context([data-theme=light]),
+:host-context(.light),
+html[data-theme=light] :host {
+  --bg-dark: #f8fafc;
+  --bg-card: #ffffff;
+  --text-primary: #1e293b;
+  --text-secondary: #64748b;
+  --border: #e2e8f0;
+  --header-bg: rgba(255, 255, 255, 0.85);
+  --input-bg: rgba(0, 0, 0, 0.04);
+}
+
+/* Green Theme Override */
+:host-context([data-theme=green]),
+:host-context(.green),
+html[data-theme=green] :host {
+  --primary: #22c55e;
+  --primary-light: #86efac;
+  --bg-dark: #052e16;
+  --bg-card: rgba(20, 83, 45, 0.6);
+  --text-primary: #f0fdf4;
+  --text-secondary: #86efac;
+  --border: rgba(34, 197, 94, 0.2);
+  --header-bg: rgba(5, 46, 22, 0.85);
+  --input-bg: rgba(255, 255, 255, 0.1);
+}
+
+.library-container {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
+  background-attachment: fixed;
+  color: var(--text-primary);
+}
+
+/* Header */
+.library-header {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background: var(--header-bg);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-bottom: 1px solid var(--border);
+  padding: 16px 32px;
+}
+
+.header-content {
+  max-width: 1400px;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 32px;
+  flex-wrap: wrap;
+}
+
+.logo-section {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.logo-icon {
+  font-size: 2rem;
+  animation: float 3s ease-in-out infinite;
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-5px);
+  }
+}
+.logo-text {
+  font-size: 1.5rem;
+  font-weight: 800;
+  background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.version-badge {
+  font-size: 0.7rem;
+  font-weight: 600;
+  padding: 4px 10px;
+  background: rgba(99, 102, 241, 0.2);
+  color: #a5b4fc;
+  border-radius: 20px;
+  border: 1px solid rgba(99, 102, 241, 0.3);
+}
+
+.search-container {
+  flex: 1;
+  max-width: 500px;
+  position: relative;
+}
+
+.search-icon {
+  position: absolute;
+  left: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--text-secondary);
+}
+
+.search-input {
+  width: 100%;
+  padding: 14px 48px;
+  background: var(--input-bg);
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  color: var(--text-primary);
+  font-size: 1rem;
+  font-family: inherit;
+  transition: all 0.3s ease;
+}
+
+.search-input::placeholder {
+  color: var(--text-secondary);
+}
+
+.search-input:focus {
+  outline: none;
+  border-color: var(--primary);
+  background: rgba(99, 102, 241, 0.08);
+  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
+}
+
+.clear-search {
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: rgba(255, 255, 255, 0.1);
+  border: none;
+  color: var(--text-secondary);
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  transition: all 0.2s ease;
+}
+
+.clear-search:hover {
+  background: rgba(239, 68, 68, 0.3);
+  color: #fca5a5;
+}
+
+.header-stats {
+  display: flex;
+  gap: 20px;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+.stat {
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+  padding: 8px 16px;
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 10px;
+  white-space: nowrap;
+}
+
+/* Category Navigation */
+.category-nav {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 24px 32px;
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.category-pill {
+  padding: 10px 20px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid var(--border);
+  border-radius: 30px;
+  color: var(--text-secondary);
+  font-size: 0.9rem;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  white-space: nowrap;
+}
+
+.category-pill:hover {
+  background: rgba(99, 102, 241, 0.15);
+  border-color: rgba(99, 102, 241, 0.3);
+  color: var(--text-primary);
+  transform: translateY(-2px);
+}
+
+.category-pill.active {
+  background: linear-gradient(135deg, #10b981 0%, #047857 100%);
+  border-color: transparent;
+  color: white;
+  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.2);
+  font-weight: 600;
+}
+
+.category-pill.active:hover {
+  transform: translateY(-2px);
+}
+
+/* Main Content */
+.library-content {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 0 32px 48px;
+}
+
+/* No Results */
+.no-results {
+  text-align: center;
+  padding: 80px 20px;
+  color: var(--text-secondary);
+}
+
+.no-results-icon {
+  font-size: 4rem;
+  display: block;
+  margin-bottom: 16px;
+  opacity: 0.5;
+}
+
+.no-results h3 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0 0 8px 0;
+}
+
+.no-results p {
+  margin: 0;
+  font-size: 1rem;
+}
+
+/* Footer */
+.library-footer {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 32px;
+  text-align: center;
+  border-top: 1px solid var(--border);
+}
+
+.library-footer p {
+  margin: 0 0 16px 0;
+  color: var(--text-secondary);
+  font-size: 0.9rem;
+}
+
+.footer-links {
+  display: flex;
+  justify-content: center;
+  gap: 24px;
+}
+
+.footer-link {
+  color: var(--primary-light);
+  text-decoration: none;
+  font-size: 0.9rem;
+  font-weight: 500;
+  transition: color 0.2s ease;
+}
+
+.footer-link:hover {
+  color: #a5b4fc;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .library-header {
+    padding: 12px 16px;
+  }
+  .header-content {
+    flex-wrap: wrap;
+    gap: 16px;
+  }
+  .logo-section {
+    flex: 1;
+  }
+  .search-container {
+    order: 3;
+    flex: 100%;
+    max-width: none;
+  }
+  .header-stats {
+    display: none;
+  }
+  .category-nav {
+    padding: 16px;
+    gap: 8px;
+  }
+  .category-pill {
+    padding: 8px 14px;
+    font-size: 0.8rem;
+  }
+  .library-content {
+    padding: 0 16px 32px;
+  }
+}

package/dist/collection/components/library/library.js

@@ -0,0 +1,91 @@
+import { h, Host } from "@stencil/core";
+import { componentsData, categories } from "./data";
+export class Library {
+    searchQuery = '';
+    selectedCategory = null;
+    mode = 'demo';
+    getCategoryIcon(category) {
+        const icons = {
+            'Foundation & Layout': '🏗️',
+            'Navigation': '🧭',
+            'Inputs & Forms': '🎮',
+            'Data Display': '📊',
+            'Feedback & Overlays': '💬',
+            'Settings': '⚙️',
+            'About': 'ℹ️',
+        };
+        return icons[category] || '📦';
+    }
+    getFilteredComponents() {
+        const filtered = {};
+        const query = this.searchQuery.toLowerCase();
+        for (const category of categories) {
+            if (this.selectedCategory && this.selectedCategory !== category) {
+                continue;
+            }
+            const categoryComponents = componentsData.filter(comp => {
+                if (comp.category !== category)
+                    return false;
+                if (!query)
+                    return true;
+                return (comp.name.toLowerCase().includes(query) ||
+                    comp.description.toLowerCase().includes(query) ||
+                    comp.id.toLowerCase().includes(query));
+            });
+            if (categoryComponents.length > 0) {
+                filtered[category] = categoryComponents;
+            }
+        }
+        return filtered;
+    }
+    handleCategoryClick = (category) => {
+        this.selectedCategory = this.selectedCategory === category ? null : category;
+    };
+    render() {
+        const filteredByCategory = this.getFilteredComponents();
+        const totalComponents = componentsData.length;
+        return (h(Host, { key: 'beac989569c0ca806ae655da242ec9904445d39f' }, h("div", { key: '959612c2d98c7daca8a4ac1f35cf3df93ae7b2c7', class: "library-container" }, h("header", { key: '27e8009daad08c4b07d52e64881c29b87e3b9c40', class: "library-header" }, h("div", { key: 'b07dcdd2b87367c4c2d83f00b0a739e3b3713c7a', class: "header-content" }, h("div", { key: 'da37733ca7ee6888845f17acc3636efa8119300c', class: "logo-section" }, h("div", { key: 'f621cc915750bcf3ede6518baa6aceb6ca8d39a5', class: "logo" }, h("span", { key: 'bd201dccfd00236e31789149190244b08d38a005', class: "logo-icon" }, "\uD83C\uDFA8"), h("span", { key: 'eb94d775fce9a5d47127b19eb5d512857cfb0de0', class: "logo-text" }, "App UI")), h("span", { key: '225b246368e5e6fe765387ed2d03fdb3722fe463', class: "version-badge" }, "v0.1.0")), h("div", { key: '961bed93bdb2e56ec60b1dae9a5389c1a75e067f', class: "search-container" }, h("ui-input", { key: 'feda70660a055323076630917b0e7a49afcb0a8a', class: "search-input", placeholder: "Search components...", value: this.searchQuery, onInputChange: (e) => this.searchQuery = e.detail, "prefix-icon": "search", "icon-library": "lucide", clearable: true })), h("div", { key: '592f3d4fe0f19a5bc1a33f8cd6ffc2f98766b13c', class: "header-stats" }, h("span", { key: 'edfe4fe44fc73aa922883f30ee2c50abcd407aa0', class: "stat" }, totalComponents, " components"), h("span", { key: '1271653612b2d1e56327e4eb043ef1848be9e7ae', class: "stat" }, categories.length, " categories")))), h("nav", { key: 'd5e1be2e568e66c317362e85baa4f8b184b2ad05', class: "category-nav" }, h("ui-button", { key: 'a43178b8702bda6441c706d7b27d7d5268b1017e', label: "All", variant: this.selectedCategory === null ? 'filled' : 'ghost', color: "primary", size: "md", onClick: () => this.handleCategoryClick(null), style: { borderRadius: '20px' } }), categories.map(cat => (h("ui-button", { key: cat, label: `${this.getCategoryIcon(cat)} ${cat}`, variant: this.selectedCategory === cat ? 'filled' : 'ghost', color: "primary", size: "md", onClick: () => this.handleCategoryClick(cat), style: { borderRadius: '20px' } })))), h("main", { key: '011117cd9c223602cc8dc11af1f8a058b8b25a5a', class: "library-content" }, Object.keys(filteredByCategory).length === 0 ? (h("div", { class: "no-results" }, h("ui-icon", { name: "search", library: "lucide", size: "2em", class: "no-results-icon" }), h("h3", null, "No components found"), h("p", null, "Try adjusting your search or filter criteria"))) : (Object.entries(filteredByCategory).map(([category, components]) => (h("category-section", { key: category, "category-name": category, "category-icon": this.getCategoryIcon(category), components: components, mode: this.mode }))))), h("footer", { key: 'fd993854e47f108c29bda48371866c5ab43935a5', class: "library-footer" }, h("p", { key: '78fbe5d2283722f32297cc99446e37b8b366d045' }, "Built with \u2764\uFE0F using Stencil.js"), h("div", { key: '0be6641e6a4f57e02a0070311eceeab0fff6136a', class: "footer-links" }, h("a", { key: 'e166e252d8367239b62ab1904cddef9425dcb7c1', href: "#", class: "footer-link" }, "Documentation"), h("a", { key: 'fdcd853536091767eefcdc8d28a231972f573a51', href: "#", class: "footer-link" }, "GitHub"), h("a", { key: 'a8d34f3e11ed0aa47aa82f074530d774f6982635', href: "#", class: "footer-link" }, "Changelog"))))));
+    }
+    static get is() { return "ui-library"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["library.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["library.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'demo' | 'doc'",
+                    "resolved": "\"demo\" | \"doc\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mode",
+                "defaultValue": "'demo'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "searchQuery": {},
+            "selectedCategory": {}
+        };
+    }
+}