le-kit 0.1.7 → 0.1.8

package/dist/core/types/types/blocks.d.ts

@@ -0,0 +1,136 @@
+/**
+ * Block types for the rich text editor.
+ *
+ * Used by: le-rich-text-editor, le-editor-block, le-block-menu
+ */
+/**
+ * Available block types for the editor.
+ * Start with essential types, expand in future versions.
+ */
+export type BlockType = 'paragraph' | 'heading1' | 'heading2' | 'heading3' | 'bullet-list' | 'numbered-list' | 'quote' | 'code' | 'divider';
+/**
+ * A single block in the editor.
+ *
+ * @example Paragraph block
+ * ```typescript
+ * const block: LeBlock = {
+ *   id: 'block-1',
+ *   type: 'paragraph',
+ *   content: 'Hello <strong>world</strong>!'
+ * };
+ * ```
+ *
+ * @example Code block with language
+ * ```typescript
+ * const block: LeBlock = {
+ *   id: 'block-2',
+ *   type: 'code',
+ *   content: 'const x = 1;',
+ *   attributes: { language: 'typescript' }
+ * };
+ * ```
+ */
+export interface LeBlock {
+    /**
+     * Unique identifier for the block.
+     */
+    id: string;
+    /**
+     * The type of block (paragraph, heading, list, etc.)
+     */
+    type: BlockType;
+    /**
+     * HTML content of the block.
+     * For most blocks, this is the inner HTML.
+     * For divider, this is empty.
+     */
+    content: string;
+    /**
+     * Block-specific attributes.
+     */
+    attributes?: LeBlockAttributes;
+}
+/**
+ * Block-specific attributes
+ */
+export interface LeBlockAttributes {
+    /**
+     * Programming language for code blocks.
+     */
+    language?: string;
+    /**
+     * Placeholder text shown when block is empty.
+     */
+    placeholder?: string;
+    /**
+     * Custom CSS class for the block.
+     */
+    className?: string;
+    /**
+     * Additional custom attributes.
+     */
+    [key: string]: unknown;
+}
+/**
+ * Configuration for a block type.
+ * Used by the block registry to render and manage blocks.
+ */
+export interface BlockTypeConfig {
+    /**
+     * Block type identifier.
+     */
+    type: BlockType;
+    /**
+     * Display label for the block type (shown in block menu).
+     */
+    label: string;
+    /**
+     * Icon for the block type (emoji or icon name).
+     */
+    icon?: string;
+    /**
+     * HTML tag to render for this block type.
+     */
+    tag: string;
+    /**
+     * CSS class applied to the block element.
+     */
+    className?: string;
+    /**
+     * Placeholder text shown when block is empty.
+     */
+    placeholder?: string;
+    /**
+     * Whether the block content is editable.
+     * Set to false for blocks like divider.
+     */
+    editable?: boolean;
+    /**
+     * Description shown in block menu.
+     */
+    description?: string;
+    /**
+     * Keyboard shortcut hint (e.g., "# " for heading).
+     */
+    shortcut?: string;
+}
+/**
+ * Default block type configurations.
+ */
+export declare const DEFAULT_BLOCK_CONFIGS: BlockTypeConfig[];
+/**
+ * Event detail for block changes
+ */
+export interface LeBlockChangeDetail {
+    blocks: LeBlock[];
+    changedBlock?: LeBlock;
+    action: 'add' | 'remove' | 'update' | 'move';
+}
+/**
+ * Generate a unique block ID
+ */
+export declare function generateBlockId(): string;
+/**
+ * Create a new block with default values
+ */
+export declare function createBlock(type: BlockType, content?: string): LeBlock;

package/dist/core/types/types/options.d.ts

@@ -0,0 +1,124 @@
+/**
+ * Universal option interface used across Le-Kit components.
+ *
+ * Used by: le-select, le-combobox, le-multiselect, le-tabs,
+ * le-block-menu, le-emoji-picker, and any menu/list components.
+ *
+ * @example Basic option
+ * ```typescript
+ * const option: LeOption = {
+ *   label: 'Option 1',
+ *   value: 'opt1'
+ * };
+ * ```
+ *
+ * @example With icons and description
+ * ```typescript
+ * const option: LeOption = {
+ *   label: 'Settings',
+ *   value: 'settings',
+ *   iconStart: '⚙️',
+ *   description: 'Configure application settings'
+ * };
+ * ```
+ *
+ * @example Grouped options
+ * ```typescript
+ * const options: LeOption[] = [
+ *   { label: 'Apple', value: 'apple', group: 'Fruits' },
+ *   { label: 'Banana', value: 'banana', group: 'Fruits' },
+ *   { label: 'Carrot', value: 'carrot', group: 'Vegetables' },
+ * ];
+ * ```
+ *
+ * @example Nested options (for submenus)
+ * ```typescript
+ * const option: LeOption = {
+ *   label: 'More actions',
+ *   iconEnd: '▶',
+ *   children: [
+ *     { label: 'Duplicate', value: 'duplicate' },
+ *     { label: 'Archive', value: 'archive' },
+ *   ]
+ * };
+ * ```
+ */
+export interface LeOption {
+    /**
+     * Unique identifier for the option.
+     * Auto-generated if not provided.
+     */
+    id?: string;
+    /**
+     * Display text for the option (required).
+     */
+    label: string;
+    /**
+     * Selection value. Defaults to label if not provided.
+     */
+    value?: string | number;
+    /**
+     * Whether the option is disabled and cannot be selected.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the option is currently selected.
+     * Used for multiselect and menu components.
+     */
+    selected?: boolean;
+    /**
+     * Whether the option is checked.
+     * Used for checkbox/radio menu items.
+     */
+    checked?: boolean;
+    /**
+     * Icon displayed at the start (left) of the option.
+     * Can be a URL, icon name, or emoji character.
+     */
+    iconStart?: string;
+    /**
+     * Icon displayed at the end (right) of the option.
+     * Can be a URL, icon name, or emoji character.
+     */
+    iconEnd?: string;
+    /**
+     * Secondary description text displayed below the label.
+     */
+    description?: string;
+    /**
+     * Nested child options for hierarchical menus or submenus.
+     */
+    children?: LeOption[];
+    /**
+     * Group label for categorizing options in flat lists.
+     * Options with the same group value are visually grouped together.
+     */
+    group?: string;
+    /**
+     * Add a visual separator line before or after this option.
+     */
+    separator?: 'before' | 'after';
+    /**
+     * Custom data passthrough for application-specific needs.
+     * This data is included in selection events.
+     */
+    data?: Record<string, unknown>;
+}
+/**
+ * Helper type for option value
+ */
+export type LeOptionValue = string | number;
+/**
+ * Event detail for option selection events
+ */
+export interface LeOptionSelectDetail {
+    value: LeOptionValue;
+    option: LeOption;
+}
+/**
+ * Event detail for multi-option selection events
+ */
+export interface LeMultiOptionSelectDetail {
+    values: LeOptionValue[];
+    options: LeOption[];
+}

package/dist/core/types/utils/utils.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Utility functions for le-kit components
+ */
+/**
+ * Generates a unique ID for component instances
+ */
+export declare function generateId(prefix?: string): string;
+/**
+ * Parses a comma-separated string into an array
+ */
+export declare function parseCommaSeparated(value: string | undefined): string[];
+/**
+ * Checks if a slot has content
+ */
+export declare function slotHasContent(el: HTMLElement, slotName?: string): boolean;
+/**
+ * Sets up a MutationObserver to track mode changes on ancestor elements.
+ * Returns a cleanup function to disconnect the observer.
+ *
+ * If the element or any ancestor has an explicit `mode` attribute, that creates
+ * a "mode boundary" - the mode is determined from that point, not from further up.
+ * This allows components like le-popover to force default mode for their children.
+ *
+ * @param el - The component's host element
+ * @param callback - Function to call when mode changes, receives the new mode
+ * @returns Cleanup function to disconnect the observer
+ *
+ * @example
+ * ```tsx
+ * export class MyComponent {
+ *   @Element() el: HTMLElement;
+ *   @State() adminMode: boolean = false;
+ *   private disconnectModeObserver?: () => void;
+ *
+ *   connectedCallback() {
+ *     this.disconnectModeObserver = observeModeChanges(this.el, (mode) => {
+ *       this.adminMode = mode === 'admin';
+ *     });
+ *   }
+ *
+ *   disconnectedCallback() {
+ *     this.disconnectModeObserver?.();
+ *   }
+ * }
+ * ```
+ */
+export declare function observeModeChanges(el: HTMLElement, callback: (mode: string) => void): () => void;
+/**
+ * Combines multiple class names into a single string, filtering out falsy values.
+ *
+ * @param classes - arguments of class names, undefined, arrays, objects with boolean values and nested combinations of these
+ * @returns Combined class names string
+ */
+export declare function classnames(...classes: any[]): string;

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-12-14T07:57:36",
+  "timestamp": "2025-12-15T09:19:01",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.38.3",
@@ -3076,7 +3076,7 @@
             "references": {
               "PopupPosition": {
                 "location": "local",
-                "path": "/Users/leechy/Projects/le-kit/src/components/le-popup/le-popup.tsx",
+                "path": "/Users/andreylechev/Projects/le-kit/src/components/le-popup/le-popup.tsx",
                 "id": "src/components/le-popup/le-popup.tsx::PopupPosition"
               }
             }
@@ -3136,7 +3136,7 @@
             "references": {
               "PopupType": {
                 "location": "local",
-                "path": "/Users/leechy/Projects/le-kit/src/components/le-popup/le-popup.tsx",
+                "path": "/Users/andreylechev/Projects/le-kit/src/components/le-popup/le-popup.tsx",
                 "id": "src/components/le-popup/le-popup.tsx::PopupType"
               }
             }
@@ -3199,7 +3199,7 @@
               },
               "PopupResult": {
                 "location": "local",
-                "path": "/Users/leechy/Projects/le-kit/src/components/le-popup/le-popup.tsx",
+                "path": "/Users/andreylechev/Projects/le-kit/src/components/le-popup/le-popup.tsx",
                 "id": "src/components/le-popup/le-popup.tsx::PopupResult"
               }
             },
@@ -3232,7 +3232,7 @@
               },
               "PopupResult": {
                 "location": "local",
-                "path": "/Users/leechy/Projects/le-kit/src/components/le-popup/le-popup.tsx",
+                "path": "/Users/andreylechev/Projects/le-kit/src/components/le-popup/le-popup.tsx",
                 "id": "src/components/le-popup/le-popup.tsx::PopupResult"
               }
             },
@@ -3255,7 +3255,7 @@
             "references": {
               "PopupResult": {
                 "location": "local",
-                "path": "/Users/leechy/Projects/le-kit/src/components/le-popup/le-popup.tsx",
+                "path": "/Users/andreylechev/Projects/le-kit/src/components/le-popup/le-popup.tsx",
                 "id": "src/components/le-popup/le-popup.tsx::PopupResult"
               }
             }
@@ -3275,7 +3275,7 @@
             "references": {
               "PopupResult": {
                 "location": "local",
-                "path": "/Users/leechy/Projects/le-kit/src/components/le-popup/le-popup.tsx",
+                "path": "/Users/andreylechev/Projects/le-kit/src/components/le-popup/le-popup.tsx",
                 "id": "src/components/le-popup/le-popup.tsx::PopupResult"
               }
             }
@@ -3295,7 +3295,7 @@
             "references": {
               "PopupResult": {
                 "location": "local",
-                "path": "/Users/leechy/Projects/le-kit/src/components/le-popup/le-popup.tsx",
+                "path": "/Users/andreylechev/Projects/le-kit/src/components/le-popup/le-popup.tsx",
                 "id": "src/components/le-popup/le-popup.tsx::PopupResult"
               }
             }