@nuraly/lumenui 0.1.0

package/packages/common/dist/shared/validation.types.d.ts

@@ -0,0 +1,108 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Validation event detail structure that validation controllers emit
+ */
+export interface ValidationEventDetail {
+    /** Whether the field is currently valid */
+    isValid: boolean;
+    /** Current validation message */
+    validationMessage: string;
+    /** Current validation state */
+    validationState: string;
+    /** Array of error messages */
+    errors: string[];
+    /** Array of warning messages */
+    warnings: string[];
+    /** Complete validation result object */
+    validationResult: any;
+}
+/**
+ * Validation status information returned by getValidationStatus()
+ */
+export interface ValidationStatus {
+    /** Whether the field is currently valid */
+    isValid: boolean;
+    /** Whether validation is currently in progress */
+    isValidating?: boolean;
+    /** Array of error messages */
+    errors: string[];
+    /** Array of warning messages */
+    warnings: string[];
+}
+/**
+ * Generic validation rule interface
+ */
+export interface ValidationRule {
+    /** Validation function */
+    validator: (value: any) => boolean | Promise<boolean>;
+    /** Error/warning message */
+    message: string;
+    /** Validation level */
+    level?: 'error' | 'warning';
+    /** Whether this rule blocks form submission */
+    blocking?: boolean;
+}
+/**
+ * Interface for components that support validation through events and API
+ * This is the shared pattern used by input, textarea, and other form field components
+ */
+export interface ValidatableComponent {
+    /** Field name for form submission */
+    name?: string;
+    /** Field value */
+    value: any;
+    /** Required field indicator */
+    required?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Readonly state */
+    readonly?: boolean;
+    /** Current validation message */
+    validationMessage?: string;
+    /** Add a validation rule */
+    addRule?(rule: ValidationRule): void;
+    /** Remove validation rules matching predicate */
+    removeRule?(predicate: (rule: ValidationRule) => boolean): void;
+    /** Clear all validation rules */
+    clearRules?(): void;
+    /** Get current validation status */
+    getValidationStatus(): ValidationStatus;
+    /** Trigger validation manually */
+    validate(): Promise<boolean> | boolean;
+    /** Clear validation state */
+    clearValidation?(): void;
+    /** Dispatches 'nr-validation' events with ValidationEventDetail */
+    addEventListener(type: 'nr-validation', listener: (event: CustomEvent<ValidationEventDetail>) => void): void;
+    /** Removes 'nr-validation' event listeners */
+    removeEventListener(type: 'nr-validation', listener: (event: CustomEvent<ValidationEventDetail>) => void): void;
+}
+/**
+ * Form field information for form integration
+ */
+export interface FormFieldInfo {
+    element: HTMLElement & ValidatableComponent;
+    name: string;
+    value: any;
+    isValid: boolean;
+    validationMessage: string;
+    required: boolean;
+    touched: boolean;
+    dirty: boolean;
+}
+/**
+ * Constants for validation events
+ */
+export declare const VALIDATION_EVENTS: {
+    readonly VALIDATION: "nr-validation";
+    readonly FIELD_FOCUS: "nr-focus";
+    readonly FIELD_BLUR: "nr-blur";
+    readonly FIELD_CHANGE: "nr-change";
+    readonly FIELD_INPUT: "nr-input";
+    readonly FIELD_CLEAR: "nr-clear";
+};
+export type ValidationEventType = typeof VALIDATION_EVENTS[keyof typeof VALIDATION_EVENTS];
+//# sourceMappingURL=validation.types.d.ts.map

package/packages/common/dist/shared/validation.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation.types.d.ts","sourceRoot":"","sources":["../../src/shared/validation.types.ts"],"names":[],"mappings":"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"}

package/packages/common/dist/shared/validation.types.js

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Constants for validation events
+ */
+export const VALIDATION_EVENTS = {
+    VALIDATION: 'nr-validation',
+    FIELD_FOCUS: 'nr-focus',
+    FIELD_BLUR: 'nr-blur',
+    FIELD_CHANGE: 'nr-change',
+    FIELD_INPUT: 'nr-input',
+    FIELD_CLEAR: 'nr-clear'
+};
+//# sourceMappingURL=validation.types.js.map

package/packages/common/dist/shared/validation.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation.types.js","sourceRoot":"","sources":["../../src/shared/validation.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAqGH;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,UAAU,EAAE,eAAe;IAC3B,WAAW,EAAE,UAAU;IACvB,UAAU,EAAE,SAAS;IACrB,YAAY,EAAE,WAAW;IACzB,WAAW,EAAE,UAAU;IACvB,WAAW,EAAE,UAAU;CACf,CAAC"}

package/packages/common/dist/themes/index.d.ts

@@ -0,0 +1,2 @@
+export * from '../themes.js';
+//# sourceMappingURL=index.d.ts.map

package/packages/common/dist/themes/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/themes/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/packages/common/dist/themes/index.js

@@ -0,0 +1,2 @@
+export * from '../themes.js';
+//# sourceMappingURL=index.js.map

package/packages/common/dist/themes/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/themes/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/packages/common/dist/themes.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+/**
+ * Theme utilities and definitions for Nuraly UI components
+ *
+ * @module @nuralyui/common/themes
+ *
+ * @example
+ * ```typescript
+ * import { getCurrentTheme, type ThemeVariant } from '@nuralyui/common/themes';
+ *
+ * const theme = getCurrentTheme(element);
+ * console.log('Current theme:', theme);
+ * ```
+ *
+ * @note CSS theme files are in the @nuralyui/themes package
+ */
+export * from './shared/themes.js';
+//# sourceMappingURL=themes.d.ts.map

package/packages/common/dist/themes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../src/themes.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;;;;;;;;GAcG;AAGH,cAAc,oBAAoB,CAAC"}

package/packages/common/dist/themes.js

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+/**
+ * Theme utilities and definitions for Nuraly UI components
+ *
+ * @module @nuralyui/common/themes
+ *
+ * @example
+ * ```typescript
+ * import { getCurrentTheme, type ThemeVariant } from '@nuralyui/common/themes';
+ *
+ * const theme = getCurrentTheme(element);
+ * console.log('Current theme:', theme);
+ * ```
+ *
+ * @note CSS theme files are in the @nuralyui/themes package
+ */
+// Export theme utilities (types and functions only, no CSS)
+export * from './shared/themes.js';
+//# sourceMappingURL=themes.js.map

package/packages/common/dist/themes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"themes.js","sourceRoot":"","sources":["../src/themes.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;;;;;;;;GAcG;AAEH,4DAA4D;AAC5D,cAAc,oBAAoB,CAAC"}

package/packages/common/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from '../utils.js';
+//# sourceMappingURL=index.d.ts.map

package/packages/common/dist/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}

package/packages/common/dist/utils/index.js

@@ -0,0 +1,2 @@
+export * from '../utils.js';
+//# sourceMappingURL=index.js.map

package/packages/common/dist/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}

package/packages/common/dist/utils.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+/**
+ * Shared utility functions for Nuraly UI components
+ *
+ * @module @nuralyui/common/utils
+ *
+ * @example
+ * ```typescript
+ * import { throttle, debounce, rafThrottle } from '@nuralyui/common/utils';
+ *
+ * const handleResize = throttle(() => {
+ *   console.log('Window resized');
+ * }, 100);
+ * ```
+ */
+export * from './shared/utils.js';
+export * from './shared/render-utils.js';
+//# sourceMappingURL=utils.d.ts.map

package/packages/common/dist/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;;;;;;;GAaG;AAGH,cAAc,mBAAmB,CAAC;AAGlC,cAAc,0BAA0B,CAAC"}

package/packages/common/dist/utils.js

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+/**
+ * Shared utility functions for Nuraly UI components
+ *
+ * @module @nuralyui/common/utils
+ *
+ * @example
+ * ```typescript
+ * import { throttle, debounce, rafThrottle } from '@nuralyui/common/utils';
+ *
+ * const handleResize = throttle(() => {
+ *   console.log('Window resized');
+ * }, 100);
+ * ```
+ */
+// Export utility functions
+export * from './shared/utils.js';
+// Export render utilities
+export * from './shared/render-utils.js';
+//# sourceMappingURL=utils.js.map

package/packages/common/dist/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;;;;;;;GAaG;AAEH,2BAA2B;AAC3B,cAAc,mBAAmB,CAAC;AAElC,0BAA0B;AAC1B,cAAc,0BAA0B,CAAC"}

package/packages/themes/README.md

@@ -0,0 +1,146 @@
+# @nuraly/themes
+
+A comprehensive theme collection for the Nuraly Hybrid UI Library, providing consistent design system variables and styling across different design frameworks.
+
+## Available Themes
+
+- **Carbon** - Based on IBM Carbon Design System
+- **Polaris** - Based on Shopify Polaris Design System  
+- **Default** - Nuraly's own default theme
+
+## Installation
+
+```bash
+npm install @nuraly/themes
+```
+
+## Usage
+
+### CSS Import
+
+Import individual themes directly:
+
+```css
+/* Import a specific theme */
+@import '@nuraly/themes/carbon';
+@import '@nuraly/themes/polaris';
+@import '@nuraly/themes/default';
+```
+
+### JavaScript/TypeScript
+
+```javascript
+import { applyTheme, themes } from '@nuraly/themes';
+
+// Apply a theme programmatically
+applyTheme('carbon', 'light'); // or 'dark'
+applyTheme('polaris', 'dark');
+
+// Get current theme
+const currentTheme = getCurrentTheme();
+
+// Available themes
+console.log(themes); // { carbon: 'carbon', polaris: 'polaris', default: 'default' }
+```
+
+### HTML Data Attributes
+
+Themes are applied via `data-theme` attributes:
+
+```html
+<!-- Carbon light theme -->
+<html data-theme="carbon-light">
+
+<!-- Carbon dark theme -->
+<html data-theme="carbon-dark">
+
+<!-- Polaris light theme -->
+<html data-theme="polaris-light">
+
+<!-- Default theme -->
+<html data-theme="default-light">
+```
+
+## Theme Structure
+
+Each theme provides consistent CSS custom properties for:
+
+### Typography
+- Font families, weights, and sizes
+- Line heights and letter spacing
+- Responsive typography scales
+
+### Colors
+- Primary, secondary, success, warning, error palettes
+- Background and surface colors
+- Text and icon colors
+- Border and divider colors
+- Both light and dark variants
+
+### Spacing
+- Consistent spacing scale
+- Component-specific spacing
+- Layout margins and padding
+
+### Elevation & Effects
+- Box shadow levels
+- Border radius values
+- Opacity scales
+- Transition timings
+
+### Component Variables
+- Button-specific variables
+- Form control styling
+- Navigation elements
+- Card and surface styling
+
+## Building from Source
+
+If you need to customize or rebuild the themes:
+
+```bash
+# Install dependencies
+npm install
+
+# Build all themes
+npm run build
+
+# Build and watch for changes
+npm run dev
+
+# Clean build directory
+npm run clean
+```
+
+## Theme Customization
+
+Each theme is built from modular CSS files that can be customized:
+
+```
+themes/
+├── carbon/
+│   ├── theme.css          # Main variables
+│   ├── index.css          # Component imports
+│   └── button/
+│       ├── index.css      # Button theme index
+│       ├── light.css      # Light variant
+│       └── dark.css       # Dark variant
+├── polaris/
+│   └── ...
+└── default/
+    └── ...
+```
+
+## Contributing
+
+When adding new themes or modifying existing ones:
+
+1. Follow the established CSS custom property naming convention
+2. Ensure both light and dark variants are provided
+3. Test across all supported components
+4. Run the build process to generate bundled files
+5. Update documentation and examples
+
+## License
+
+MIT License - see LICENSE file for details.

package/packages/themes/dist/README.md

@@ -0,0 +1,146 @@
+# @nuraly/themes
+
+A comprehensive theme collection for the Nuraly Hybrid UI Library, providing consistent design system variables and styling across different design frameworks.
+
+## Available Themes
+
+- **Carbon** - Based on IBM Carbon Design System
+- **Polaris** - Based on Shopify Polaris Design System  
+- **Default** - Nuraly's own default theme
+
+## Installation
+
+```bash
+npm install @nuraly/themes
+```
+
+## Usage
+
+### CSS Import
+
+Import individual themes directly:
+
+```css
+/* Import a specific theme */
+@import '@nuraly/themes/carbon';
+@import '@nuraly/themes/polaris';
+@import '@nuraly/themes/default';
+```
+
+### JavaScript/TypeScript
+
+```javascript
+import { applyTheme, themes } from '@nuraly/themes';
+
+// Apply a theme programmatically
+applyTheme('carbon', 'light'); // or 'dark'
+applyTheme('polaris', 'dark');
+
+// Get current theme
+const currentTheme = getCurrentTheme();
+
+// Available themes
+console.log(themes); // { carbon: 'carbon', polaris: 'polaris', default: 'default' }
+```
+
+### HTML Data Attributes
+
+Themes are applied via `data-theme` attributes:
+
+```html
+<!-- Carbon light theme -->
+<html data-theme="carbon-light">
+
+<!-- Carbon dark theme -->
+<html data-theme="carbon-dark">
+
+<!-- Polaris light theme -->
+<html data-theme="polaris-light">
+
+<!-- Default theme -->
+<html data-theme="default-light">
+```
+
+## Theme Structure
+
+Each theme provides consistent CSS custom properties for:
+
+### Typography
+- Font families, weights, and sizes
+- Line heights and letter spacing
+- Responsive typography scales
+
+### Colors
+- Primary, secondary, success, warning, error palettes
+- Background and surface colors
+- Text and icon colors
+- Border and divider colors
+- Both light and dark variants
+
+### Spacing
+- Consistent spacing scale
+- Component-specific spacing
+- Layout margins and padding
+
+### Elevation & Effects
+- Box shadow levels
+- Border radius values
+- Opacity scales
+- Transition timings
+
+### Component Variables
+- Button-specific variables
+- Form control styling
+- Navigation elements
+- Card and surface styling
+
+## Building from Source
+
+If you need to customize or rebuild the themes:
+
+```bash
+# Install dependencies
+npm install
+
+# Build all themes
+npm run build
+
+# Build and watch for changes
+npm run dev
+
+# Clean build directory
+npm run clean
+```
+
+## Theme Customization
+
+Each theme is built from modular CSS files that can be customized:
+
+```
+themes/
+├── carbon/
+│   ├── theme.css          # Main variables
+│   ├── index.css          # Component imports
+│   └── button/
+│       ├── index.css      # Button theme index
+│       ├── light.css      # Light variant
+│       └── dark.css       # Dark variant
+├── polaris/
+│   └── ...
+└── default/
+    └── ...
+```
+
+## Contributing
+
+When adding new themes or modifying existing ones:
+
+1. Follow the established CSS custom property naming convention
+2. Ensure both light and dark variants are provided
+3. Test across all supported components
+4. Run the build process to generate bundled files
+5. Update documentation and examples
+
+## License
+
+MIT License - see LICENSE file for details.