npm - kenikool-ui - Versions diffs - 1.0.0 - Mend

kenikool-ui 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (196) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,144 @@
+# Kenikool UI
+A modern, zero-configuration Web Components library with TypeScript development, built-in themes, and comprehensive accessibility features.
+## Features
+- 🎨 **Five Built-in Themes** - Modern, Classic, Bold, Soft, and Dark themes
+- 🚀 **Zero Configuration** - Components work perfectly out of the box
+- ♿ **Accessibility First** - Built-in ARIA attributes and keyboard navigation
+- 📱 **Responsive Design** - Mobile-first approach with responsive breakpoints
+- 🔧 **Optional Styling** - Customize components via `styles` attribute
+- 🌐 **CDN Distribution** - Easy inclusion via CDN
+- 🎯 **Framework Wrappers** - React, Vue, and Angular support
+- 📦 **Tree-shakable** - Only include components you use
+- 🏗️ **TypeScript** - Full TypeScript support with type definitions
+## Quick Start
+### Via CDN
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Kenikool UI Example</title>
+</head>
+<body>
+  <!-- Components work immediately -->
+  <k-button>Click me</k-button>
+  <k-input type="email" placeholder="Enter email"></k-input>
+  <!-- Load the library -->
+  <script type="module" src="https://cdn.jsdelivr.net/npm/kenikool-ui@latest/dist/kenikool-ui.es.js"></script>
+</body>
+</html>
+```
+### Via npm
+```bash
+npm install kenikool-ui
+```
+```javascript
+import 'kenikool-ui';
+// Components are now available in your HTML
+```
+## Components
+### Layout Components
+- `<k-card>` - Content containers with padding and shadows
+- `<k-grid>` - Responsive grid layouts
+- `<k-stack>` - Vertical and horizontal stacks
+- `<k-container>` - Page containers with max-width
+### Form Components
+- `<k-input>` - Text inputs with smart defaults
+- `<k-button>` - Buttons with loading states
+- `<k-select>` - Dropdown selects
+- `<k-checkbox>` - Checkboxes with labels
+- `<k-radio>` - Radio buttons
+### Typography
+- `<k-text>` - Headings and body text
+### Feedback
+- `<k-toast>` - Toast notifications
+- `<k-modal>` - Modal dialogs
+- `<k-alert>` - Alert messages
+- `<k-loading>` - Loading indicators
+### Navigation
+- `<k-navbar>` - Navigation bars
+- `<k-sidebar>` - Side navigation
+- `<k-breadcrumbs>` - Breadcrumb navigation
+### Data Display
+- `<k-table>` - Data tables
+- `<k-list>` - Lists and menus
+- `<k-badge>` - Status badges
+- `<k-avatar>` - User avatars
+### Advanced
+- `<k-datepicker>` - Date selection
+- `<k-fileupload>` - File uploads
+- `<k-datatable>` - Advanced data tables
+## Themes
+Switch themes by setting the `data-theme` attribute:
+```html
+<div data-theme="dark">
+  <k-button>Dark theme button</k-button>
+</div>
+```
+Available themes:
+- `modern` (default)
+- `classic`
+- `bold`
+- `soft`
+- `dark`
+## Styling
+Customize components with the `styles` attribute:
+```html
+<k-button styles="large primary rounded">Submit</k-button>
+<k-input styles="small outline">Search</k-input>
+```
+## Development
+```bash
+# Install dependencies
+npm install
+# Start development server
+npm run dev
+# Run tests
+npm test
+# Build for production
+npm run build
+```
+## License
+MIT License - see [LICENSE](LICENSE) file for details.
+## Contributing
+Contributions are welcome! Please read our contributing guidelines and submit pull requests to our repository.
+## Support
+- 📖 [Documentation](https://kenikool-ui.dev)
+- 🐛 [Issue Tracker](https://github.com/kenikool/kenikool-ui/issues)
+- 💬 [Discussions](https://github.com/kenikool/kenikool-ui/discussions)

package/dist/cdn-auto-register.js ADDED Viewed

@@ -0,0 +1,188 @@
+/**
+ * Kenikool UI - CDN Auto-Registration Script
+ *
+ * This script automatically registers all Kenikool UI components
+ * when included via CDN. It handles component discovery and lazy loading.
+ *
+ * Usage:
+ * <script src="https://cdn.jsdelivr.net/npm/kenikool-ui@latest/dist/cdn-auto-register.js"></script>
+ */
+(function() {
+  'use strict';
+  // Configuration
+  const config = {
+    version: '1.0.0',
+    cdnUrl: 'https://cdn.jsdelivr.net/npm/kenikool-ui@latest/dist',
+    components: [
+      // Forms
+      'k-button', 'k-input', 'k-select', 'k-checkbox', 'k-radio',
+      // Layout
+      'k-card', 'k-grid', 'k-stack', 'k-container',
+      // Feedback
+      'k-modal', 'k-alert', 'k-toast', 'k-loading',
+      // Data
+      'k-table', 'k-list', 'k-badge', 'k-avatar',
+      // Navigation
+      'k-navbar', 'k-sidebar', 'k-breadcrumbs',
+      // Typography
+      'k-text',
+      // Advanced
+      'k-datepicker', 'k-fileupload'
+    ],
+    themes: ['modern', 'classic', 'bold', 'soft', 'dark'],
+    autoLoadTheme: 'modern'
+  };
+  /**
+   * Load a script dynamically
+   */
+  function loadScript(src) {
+    return new Promise((resolve, reject) => {
+      const script = document.createElement('script');
+      script.src = src;
+      script.type = 'module';
+      script.onload = resolve;
+      script.onerror = reject;
+      document.head.appendChild(script);
+    });
+  }
+  /**
+   * Load a stylesheet dynamically
+   */
+  function loadStylesheet(href) {
+    return new Promise((resolve, reject) => {
+      const link = document.createElement('link');
+      link.rel = 'stylesheet';
+      link.href = href;
+      link.onload = resolve;
+      link.onerror = reject;
+      document.head.appendChild(link);
+    });
+  }
+  /**
+   * Check if a component is used in the DOM
+   */
+  function isComponentUsed(componentName) {
+    return document.querySelector(componentName) !== null;
+  }
+  /**
+   * Get all used components
+   */
+  function getUsedComponents() {
+    return config.components.filter(isComponentUsed);
+  }
+  /**
+   * Initialize Kenikool UI
+   */
+  async function initialize() {
+    try {
+      // Log initialization
+      console.log(`[Kenikool UI] Initializing v${config.version}`);
+      // Load theme CSS
+      const themeUrl = `${config.cdnUrl}/themes/${config.autoLoadTheme}.css`;
+      console.log(`[Kenikool UI] Loading theme: ${config.autoLoadTheme}`);
+      await loadStylesheet(themeUrl);
+      // Load main library
+      const libUrl = `${config.cdnUrl}/kenikool-ui.umd.js`;
+      console.log(`[Kenikool UI] Loading library from CDN`);
+      await loadScript(libUrl);
+      // Get used components
+      const usedComponents = getUsedComponents();
+      console.log(`[Kenikool UI] Found ${usedComponents.length} components in use:`, usedComponents);
+      // Dispatch ready event
+      const event = new CustomEvent('kenikool-ui:ready', {
+        detail: {
+          version: config.version,
+          components: usedComponents,
+          theme: config.autoLoadTheme
+        }
+      });
+      document.dispatchEvent(event);
+      console.log(`[Kenikool UI] Ready!`);
+    } catch (error) {
+      console.error('[Kenikool UI] Initialization failed:', error);
+      const event = new CustomEvent('kenikool-ui:error', {
+        detail: { error: error.message }
+      });
+      document.dispatchEvent(event);
+    }
+  }
+  /**
+   * Public API
+   */
+  window.KenikoolUI = {
+    version: config.version,
+    config: config,
+    /**
+     * Load a specific theme
+     */
+    loadTheme(themeName) {
+      if (!config.themes.includes(themeName)) {
+        console.error(`[Kenikool UI] Unknown theme: ${themeName}`);
+        return Promise.reject(new Error(`Unknown theme: ${themeName}`));
+      }
+      const themeUrl = `${config.cdnUrl}/themes/${themeName}.css`;
+      return loadStylesheet(themeUrl);
+    },
+    /**
+     * Get all used components
+     */
+    getUsedComponents() {
+      return getUsedComponents();
+    },
+    /**
+     * Check if a component is available
+     */
+    isComponentAvailable(componentName) {
+      return config.components.includes(componentName);
+    },
+    /**
+     * Get configuration
+     */
+    getConfig() {
+      return { ...config };
+    },
+    /**
+     * Set CDN URL (must be called before initialization)
+     */
+    setCdnUrl(url) {
+      config.cdnUrl = url;
+    },
+    /**
+     * Set auto-load theme
+     */
+    setAutoLoadTheme(themeName) {
+      if (!config.themes.includes(themeName)) {
+        console.error(`[Kenikool UI] Unknown theme: ${themeName}`);
+        return false;
+      }
+      config.autoLoadTheme = themeName;
+      return true;
+    }
+  };
+  // Initialize when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initialize);
+  } else {
+    initialize();
+  }
+})();