{"_id":"@akaoio/ui","_rev":"3-6d204b7e2b4266b5688dab34a7011444","name":"@akaoio/ui","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.0":{"name":"@akaoio/ui","version":"1.0.0","keywords":["ui","framework","web-components","vanilla-js","css-in-js","shadow-dom","no-framework"],"author":{"name":"AKAO"},"license":"MIT","_id":"@akaoio/ui@1.0.0","maintainers":[{"name":"akaoio","email":"dev@akao.io"}],"homepage":"https://github.com/akaoio/ui#readme","bugs":{"url":"https://github.com/akaoio/ui/issues"},"dist":{"shasum":"2be92d01ffeaec940e28d6dde9b3d2c8a2bf6230","tarball":"https://registry.npmjs.org/@akaoio/ui/-/ui-1.0.0.tgz","fileCount":42,"integrity":"sha512-eDsBPgqTZZsFqvH8kbE86tKowjmNGHGP0Zqr9lIGfW4Wq58gwUPSteOufnWYtqgxEd00Zfa6HWS0WizDJpP+mA==","signatures":[{"sig":"MEQCIHVqXWw1po2HnuHrENXTPNrvE+qUJad7vVG+Ld1KClefAiB6VzuzOR5a3QDTAWRKeIcYfMMkytW6Z1eD2M6EaI2XPw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":35122},"main":"src/index.js","type":"module","module":"src/index.js","exports":{".":{"import":"./src/index.js"},"./css":{"import":"./src/css/index.js"},"./components/*":{"import":"./src/components/*/index.js"}},"gitHead":"9c55c07e90e2b825155b3c5240ed076a1a2587e9","scripts":{"dev":"live-server --port=3000 --open=/examples/","format":"prettier --write \"src/**/*.js\"","publish:npm":"npm publish --access public","prepublishOnly":"npm run format"},"_npmUser":{"name":"akaoio","email":"dev@akao.io"},"repository":{"url":"git+https://github.com/akaoio/ui.git","type":"git"},"_npmVersion":"9.2.0","description":"A powerful vanilla JavaScript UI framework with Web Components","directories":{},"_nodeVersion":"18.19.0","_hasShrinkwrap":false,"devDependencies":{"prettier":"^3.3.3","live-server":"^1.2.2"},"_npmOperationalInternal":{"tmp":"tmp/ui_1.0.0_1755504349074_0.23679571814541078","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@akaoio/ui","version":"1.0.1","keywords":["ui","framework","web-components","vanilla-js","css-in-js","shadow-dom","no-framework"],"author":{"name":"AKAO"},"license":"MIT","_id":"@akaoio/ui@1.0.1","maintainers":[{"name":"akaoio","email":"dev@akao.io"}],"homepage":"https://github.com/akaoio/ui#readme","bugs":{"url":"https://github.com/akaoio/ui/issues"},"dist":{"shasum":"474edc4b0ab8c02d6786375d099cbc128579b347","tarball":"https://registry.npmjs.org/@akaoio/ui/-/ui-1.0.1.tgz","fileCount":48,"integrity":"sha512-hHhSSXq2PtLE4PvrU0QmdFtEzcBXCHZKOcGG5hWqb5F+xSCnPFiyiEiWc+G86IN+3Nzad63vqP5/ZaCUZHNPjQ==","signatures":[{"sig":"MEUCIQDK30zOnuKPIqHDxvcELKygU6qIdzhQ9yHYW8g2TDIzbQIgNA6d47PsZpvS2hRo04EtcKS6PeDzMfrLo4d+Rg681wI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":51076},"main":"src/index.js","type":"module","module":"src/index.js","exports":{".":{"import":"./src/index.js"},"./css":{"import":"./src/css/index.js"},"./components/*":{"import":"./src/components/*/index.js"}},"gitHead":"fa00985f0cf0ff29766e13ac2f7e7b8d85203548","scripts":{"dev":"live-server --port=3000","format":"prettier --write \"src/**/*.js\" \"pages/**/*.js\" \"app.js\"","publish:npm":"npm publish --access public","dev:examples":"live-server --port=3000 --open=/examples/","prepublishOnly":"npm run format"},"_npmUser":{"name":"akaoio","email":"dev@akao.io"},"repository":{"url":"git+https://github.com/akaoio/ui.git","type":"git"},"_npmVersion":"9.2.0","description":"A powerful vanilla JavaScript UI framework with Web Components","directories":{},"_nodeVersion":"18.19.0","_hasShrinkwrap":false,"devDependencies":{"prettier":"^3.3.3","live-server":"^1.2.2"},"_npmOperationalInternal":{"tmp":"tmp/ui_1.0.1_1755516135699_0.03775999493923243","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@akaoio/ui","version":"1.1.0","description":"A powerful vanilla JavaScript UI framework with Web Components","type":"module","main":"src/index.js","module":"src/index.js","exports":{".":{"import":"./src/index.js"},"./css":{"import":"./src/css/index.js"},"./components/*":{"import":"./src/components/*/index.js"}},"scripts":{"dev":"live-server --port=3000","dev:examples":"live-server --port=3000 --open=/examples/","format":"prettier --write \"src/**/*.js\" \"pages/**/*.js\" \"app.js\"","prepublishOnly":"npm run format","publish:npm":"npm publish --access public"},"keywords":["ui","framework","web-components","vanilla-js","css-in-js","shadow-dom","no-framework"],"author":{"name":"AKAO"},"license":"MIT","devDependencies":{"live-server":"^1.2.2","prettier":"^3.3.3"},"repository":{"type":"git","url":"git+https://github.com/akaoio/ui.git"},"bugs":{"url":"https://github.com/akaoio/ui/issues"},"homepage":"https://github.com/akaoio/ui#readme","gitHead":"7888d38c8ae1ede3873770c8ceb41303f8945053","_id":"@akaoio/ui@1.1.0","_nodeVersion":"18.19.0","_npmVersion":"9.2.0","dist":{"integrity":"sha512-OhLEZltCU7qK9mHAcOFk1BLBqI0OJxXgd03c928GfMvrSw8pMwo3Hgoz262/LIheRhiuXwUIIYL8WrYw3ysO8Q==","shasum":"a9ca458813cb1a7fa6dfc90daec9326296d3aae1","tarball":"https://registry.npmjs.org/@akaoio/ui/-/ui-1.1.0.tgz","fileCount":57,"unpackedSize":71826,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCICAtxpg81/P304D2To/mDtHg/uEzPdZ4P169s8FK2BVqAiAA+kGoi3T0NHbe2m+ETmvjhmW3rU3YApINCyYZoC2hxA=="}]},"_npmUser":{"name":"akaoio","email":"dev@akao.io"},"directories":{},"maintainers":[{"name":"akaoio","email":"dev@akao.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui_1.1.0_1756118342632_0.9468578547391711"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-18T08:05:48.995Z","modified":"2025-08-25T10:39:03.006Z","1.0.0":"2025-08-18T08:05:49.235Z","1.0.1":"2025-08-18T11:22:15.865Z","1.1.0":"2025-08-25T10:39:02.816Z"},"bugs":{"url":"https://github.com/akaoio/ui/issues"},"author":{"name":"AKAO"},"license":"MIT","homepage":"https://github.com/akaoio/ui#readme","keywords":["ui","framework","web-components","vanilla-js","css-in-js","shadow-dom","no-framework"],"repository":{"type":"git","url":"git+https://github.com/akaoio/ui.git"},"description":"A powerful vanilla JavaScript UI framework with Web Components","maintainers":[{"name":"akaoio","email":"dev@akao.io"}],"readme":"# 🎨 AKAO UI Framework\n\n[![npm version](https://img.shields.io/npm/v/@akaoio/ui.svg)](https://www.npmjs.com/package/@akaoio/ui)\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)\n[![GitHub Pages](https://img.shields.io/badge/demo-live-green.svg)](https://akaoio.github.io/ui/)\n\nA powerful, modern UI framework built with pure vanilla JavaScript and Web Components. Zero dependencies, just web standards.\n\n## ✨ [Live Demo & Documentation](https://akaoio.github.io/ui/)\n\nVisit our interactive showcase to explore components, read documentation, and test code in the playground.\n\n## 🚀 Features\n\n- **🔧 Zero Dependencies** - Pure vanilla JavaScript, no frameworks required\n- **📦 Web Components** - Native browser APIs with Shadow DOM encapsulation\n- **🎨 CSS-in-JS** - Scoped styles with template literals\n- **🌙 Theme System** - Built-in dark/light mode with CSS variables\n- **📱 Responsive** - Mobile-first design that works everywhere\n- **⚡ Lightning Fast** - Minimal overhead, maximum performance\n- **🔒 Type Safe** - Full TypeScript support\n- **🌳 Tree Shakeable** - Import only what you need\n- **♿ Accessible** - ARIA compliant with keyboard navigation\n\n## 📦 Installation\n\n### NPM (Recommended)\n```bash\nnpm install @akaoio/ui\n# or\nyarn add @akaoio/ui\n# or\npnpm add @akaoio/ui\n```\n\n### CDN\n```html\n<script type=\"module\">\n  import { html, css, Component } from 'https://unpkg.com/@akaoio/ui@latest/src/index.js';\n</script>\n```\n\n## 🎯 Quick Start\n\n```javascript\nimport { html, css } from '@akaoio/ui';\n\nclass MyButton extends HTMLElement {\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n    }\n    \n    connectedCallback() {\n        this.shadowRoot.innerHTML = `\n            <style>\n                button {\n                    padding: 12px 24px;\n                    background: linear-gradient(135deg, #667eea, #764ba2);\n                    color: white;\n                    border: none;\n                    border-radius: 8px;\n                    font-size: 16px;\n                    cursor: pointer;\n                    transition: transform 0.2s;\n                }\n                \n                button:hover {\n                    transform: translateY(-2px);\n                }\n            </style>\n            <button>\n                <slot>Click me</slot>\n            </button>\n        `;\n    }\n}\n\ncustomElements.define('my-button', MyButton);\n```\n\nUse it in your HTML:\n```html\n<my-button>Custom Text</my-button>\n```\n\n## 🧩 Built-in Components\n\n### Core Components\n- **Button** - Versatile button with variants and states\n- **Modal** - Flexible modal dialogs\n- **Card** - Container component with header/footer slots\n- **Tabs** - Tabbed interface with multiple styles\n- **Icon** - SVG icon system\n\n### Form Components\n- **Input** - Enhanced text input\n- **Select** - Custom select dropdown\n- **Checkbox** - Styled checkbox\n- **Radio** - Radio button groups\n- **Form** - Form wrapper with validation\n\n### Layout Components\n- **Container** - Responsive container\n- **Grid** - CSS Grid system\n- **Flex** - Flexbox utilities\n\n## 🎨 Theming\n\nAKAO UI uses CSS custom properties for theming:\n\n```javascript\n// Light theme (default)\ndocument.documentElement.style.setProperty('--color-primary', '#667eea');\ndocument.documentElement.style.setProperty('--bg-primary', '#ffffff');\n\n// Dark theme\ndocument.documentElement.setAttribute('data-theme', 'dark');\n```\n\n### CSS Variables\n```css\n:root {\n    /* Colors */\n    --color-primary: #667eea;\n    --color-secondary: #764ba2;\n    --bg-primary: #ffffff;\n    --bg-secondary: #f7fafc;\n    \n    /* Spacing */\n    --spacing-xs: 4px;\n    --spacing-sm: 8px;\n    --spacing-md: 16px;\n    --spacing-lg: 24px;\n    \n    /* Typography */\n    --font-family: system-ui, sans-serif;\n    --font-size-base: 16px;\n    \n    /* Borders */\n    --border-radius: 8px;\n    --border-color: #e2e8f0;\n    \n    /* Shadows */\n    --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);\n    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);\n}\n```\n\n## 🛠️ Development\n\n### Setup\n```bash\n# Clone the repository\ngit clone https://github.com/akaoio/ui.git\ncd ui\n\n# Install dependencies\nnpm install\n\n# Start development server (showcase)\nnpm run dev\n\n# Or run examples\nnpm run dev:examples\n```\n\n### Scripts\n- `npm run dev` - Start showcase development server\n- `npm run dev:examples` - Start examples server\n- `npm run format` - Format code with Prettier\n- `npm run publish:npm` - Publish to NPM\n\n### Project Structure\n```\n@akaoio/ui/\n├── src/\n│   ├── core/\n│   │   ├── UI.js         # Core UI functions (html, css)\n│   │   ├── Component.js  # Base component class\n│   │   └── UI/           # UI utilities\n│   ├── css/\n│   │   ├── animations/   # Animation utilities\n│   │   ├── elements/     # Element styles\n│   │   ├── global.css.js # Global styles\n│   │   ├── dark.css.js   # Dark theme\n│   │   └── light.css.js  # Light theme\n│   └── components/       # Built-in components\n│       ├── button/\n│       ├── modal/\n│       ├── card/\n│       ├── tabs/\n│       └── icon/\n├── docs/                 # Interactive documentation site\n│   ├── pages/           # Documentation pages\n│   ├── components/      # Showcase components\n│   └── router.js        # Client-side routing\n└── examples/            # Basic usage examples\n```\n\n## 📚 Documentation\n\n### Core Concepts\n- [Web Components](https://akaoio.github.io/ui/#/documentation/web-components)\n- [Shadow DOM](https://akaoio.github.io/ui/#/documentation/shadow-dom)\n- [CSS-in-JS](https://akaoio.github.io/ui/#/documentation/css-in-js)\n- [State Management](https://akaoio.github.io/ui/#/documentation/state-management)\n\n### Guides\n- [Installation](https://akaoio.github.io/ui/#/documentation/installation)\n- [Quick Start](https://akaoio.github.io/ui/#/documentation/quickstart)\n- [Custom Components](https://akaoio.github.io/ui/#/documentation/custom-components)\n- [Theming](https://akaoio.github.io/ui/#/documentation/theming)\n- [Animations](https://akaoio.github.io/ui/#/documentation/animations)\n- [TypeScript](https://akaoio.github.io/ui/#/documentation/typescript)\n\n## 🎮 Interactive Playground\n\nTry AKAO UI components directly in your browser with our [live playground](https://akaoio.github.io/ui/#/playground). Write code, see instant results, and experiment with different component configurations.\n\n## 💡 Example: Complete Component\n\n```javascript\nimport { html, css } from '@akaoio/ui';\n\nclass TodoList extends HTMLElement {\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        this.todos = [];\n    }\n    \n    connectedCallback() {\n        this.render();\n    }\n    \n    addTodo(text) {\n        this.todos.push({ id: Date.now(), text, done: false });\n        this.render();\n    }\n    \n    toggleTodo(id) {\n        const todo = this.todos.find(t => t.id === id);\n        if (todo) {\n            todo.done = !todo.done;\n            this.render();\n        }\n    }\n    \n    render() {\n        this.shadowRoot.innerHTML = `\n            <style>\n                :host {\n                    display: block;\n                    font-family: system-ui, sans-serif;\n                }\n                \n                .container {\n                    max-width: 500px;\n                    padding: 20px;\n                    background: white;\n                    border-radius: 12px;\n                    box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n                }\n                \n                .input-group {\n                    display: flex;\n                    gap: 8px;\n                    margin-bottom: 20px;\n                }\n                \n                input {\n                    flex: 1;\n                    padding: 10px;\n                    border: 1px solid #e2e8f0;\n                    border-radius: 6px;\n                    font-size: 16px;\n                }\n                \n                button {\n                    padding: 10px 20px;\n                    background: #667eea;\n                    color: white;\n                    border: none;\n                    border-radius: 6px;\n                    cursor: pointer;\n                }\n                \n                .todo-item {\n                    display: flex;\n                    align-items: center;\n                    padding: 12px;\n                    background: #f7fafc;\n                    border-radius: 6px;\n                    margin-bottom: 8px;\n                }\n                \n                .todo-item.done {\n                    opacity: 0.6;\n                    text-decoration: line-through;\n                }\n            </style>\n            \n            <div class=\"container\">\n                <h2>Todo List</h2>\n                <div class=\"input-group\">\n                    <input type=\"text\" placeholder=\"Add a todo...\" id=\"todoInput\">\n                    <button onclick=\"this.getRootNode().host.handleAdd()\">Add</button>\n                </div>\n                <div class=\"todos\">\n                    ${this.todos.map(todo => `\n                        <div class=\"todo-item ${todo.done ? 'done' : ''}\">\n                            <input type=\"checkbox\" \n                                ${todo.done ? 'checked' : ''}\n                                onchange=\"this.getRootNode().host.toggleTodo(${todo.id})\">\n                            <span>${todo.text}</span>\n                        </div>\n                    `).join('')}\n                </div>\n            </div>\n        `;\n    }\n    \n    handleAdd() {\n        const input = this.shadowRoot.getElementById('todoInput');\n        if (input.value.trim()) {\n            this.addTodo(input.value);\n            input.value = '';\n        }\n    }\n}\n\ncustomElements.define('todo-list', TodoList);\n```\n\n## 🤝 Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🙏 Acknowledgments\n\n- Built with love for the web platform\n- Inspired by modern component libraries\n- Thanks to all contributors and the web standards community\n\n## 🔗 Links\n\n- [NPM Package](https://www.npmjs.com/package/@akaoio/ui)\n- [GitHub Repository](https://github.com/akaoio/ui)\n- [Live Demo](https://akaoio.github.io/ui/)\n- [Documentation](https://akaoio.github.io/ui/#/documentation)\n- [Components](https://akaoio.github.io/ui/#/components)\n- [Playground](https://akaoio.github.io/ui/#/playground)\n\n## 🌟 Why AKAO UI?\n\n- **Future Proof**: Built on web standards that will last\n- **No Lock-in**: Your components work anywhere\n- **Performance**: No virtual DOM, no diffing, just native speed\n- **Simple**: No complex build tools or configurations\n- **Powerful**: Everything you need for modern UIs\n\n---\n\n<p align=\"center\">Made with ❤️ by AKAO</p>\n<p align=\"center\">\n  <a href=\"https://akaoio.github.io/ui/\">Demo</a> •\n  <a href=\"https://akaoio.github.io/ui/#/documentation\">Docs</a> •\n  <a href=\"https://akaoio.github.io/ui/#/playground\">Playground</a>\n</p>","readmeFilename":"README.md"}