@lazhus/kg-ui 0.2.2

package/README.md

@@ -0,0 +1,128 @@
+# KG UI
+
+Modern, lightweight UI component library built with LitElement.
+
+## 🚀 Features
+
+- ✨ **22+ Modern Components** - Button, Input, Modal, Drawer, and more
+- 🎨 **Customizable Theming** - CSS variables for easy customization
+- 🌓 **Dark Mode Support** - Built-in dark theme
+- 📱 **Responsive** - Mobile-first design
+- ⚡ **Lightweight** - Built with LitElement
+- 🎯 **TypeScript Ready** - Full type support
+- ♿ **Accessible** - ARIA compliant components
+
+## 📦 Installation
+
+```bash
+npm install @kolaygelsin2/ui
+```
+
+## 🎯 Quick Start
+
+### 1. Import Components
+
+```javascript
+// Import the components you need
+import '@kg/ui/components/kg-button.js';
+import '@kg/ui/components/kg-input.js';
+import '@kg/ui/components/kg-card.js';
+```
+
+### 2. Import Styles
+
+```html
+<link rel="stylesheet" href="node_modules/@kg/ui/dist/index.css">
+```
+
+Or in your JavaScript:
+
+```javascript
+import '@kg/ui/styles';
+```
+
+### 3. Use in HTML
+
+```html
+<kg-button color="primary">Click Me</kg-button>
+<kg-input label="Username" placeholder="Enter your name"></kg-input>
+<kg-card>
+  <span slot="header">Card Title</span>
+  <p>Card content goes here</p>
+</kg-card>
+```
+
+## 🎨 Theming
+
+KG UI uses CSS variables for easy theming:
+
+```css
+:root {
+  --kg-primary: #41ab34;
+  --kg-secondary: #1367FF;
+  --kg-tertiary: #FBB140;
+  --kg-bg: #ffffff;
+  --kg-text: #1a1a1a;
+  /* ... more variables */
+}
+```
+
+### Dark Mode
+
+Enable dark mode by adding the `data-theme` attribute:
+
+```javascript
+document.documentElement.setAttribute('data-theme', 'dark');
+```
+
+## 📚 Components
+
+### Form Components
+- `kg-button` - Customizable button
+- `kg-input` - Text input with validation
+- `kg-textarea` - Multi-line text input
+- `kg-select` - Dropdown select
+- `kg-checkbox` - Checkbox input
+- `kg-radio` - Radio button
+- `kg-switch` - Toggle switch
+- `kg-slider` - Range slider
+- `kg-file-upload` - File upload
+- `kg-datepicker` - Date picker
+- `kg-colorpicker` - Color picker
+
+### Layout Components
+- `kg-card` - Content card
+- `kg-grid` - Responsive grid system
+- `kg-divider` - Visual separator
+- `kg-accordion` - Collapsible sections
+- `kg-tabs` - Tabbed interface
+- `kg-stepper` - Step indicator
+
+### Overlay Components
+- `kg-modal` - Modal dialog
+- `kg-drawer` - Side panel
+- `kg-toast` - Notification
+
+### Feedback Components
+- `kg-skeleton` - Loading placeholder
+
+### Typography
+- `kg-text` - Text component with variants
+
+## 📖 Documentation
+
+Visit our [documentation site](https://your-docs-url.com) for detailed component APIs and examples.
+
+## 🤝 Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## 📄 License
+
+MIT © KG Team
+
+## 🔗 Links
+
+- [Documentation](https://your-docs-url.com)
+- [GitHub](https://github.com/yourusername/kg-ui)
+- [npm](https://www.npmjs.com/package/@kg/ui)