lightview 1.8.2 → 2.0.1

package/components/data-input/textarea.js

@@ -0,0 +1,287 @@
+/**
+ * Lightview Components - Textarea
+ * A multi-line text input component using DaisyUI 5 styling with validation support
+ * @see https://daisyui.com/components/textarea/
+ * 
+ * Uses DaisyUI's fieldset pattern:
+ * <fieldset class="fieldset">
+ *     <legend class="fieldset-legend">Label</legend>
+ *     <textarea class="textarea" />
+ *     <p class="label">Helper text</p>
+ * </fieldset>
+ */
+
+import '../daisyui.js';
+
+/**
+ * Textarea Component
+ * @param {Object} props - Textarea properties
+ * @param {string|Signal} props.value - Textarea value (controlled)
+ * @param {string} props.defaultValue - Default value (uncontrolled)
+ * @param {string} props.placeholder - Placeholder text
+ * @param {string} props.size - 'xs' | 'sm' | 'md' | 'lg' (default: 'md')
+ * @param {string} props.color - 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'
+ * @param {boolean} props.ghost - Ghost style (no background)
+ * @param {boolean} props.disabled - Disable textarea
+ * @param {boolean} props.required - Required field
+ * @param {boolean} props.readOnly - Make read-only
+ * @param {string} props.label - Label text (rendered as fieldset legend)
+ * @param {string} props.helper - Helper text (rendered below textarea)
+ * @param {string|Function} props.error - Error message (string or validation function)
+ * @param {Function} props.validate - Validation function (value) => errorMessage | null
+ * @param {number} props.rows - Number of visible rows (default: 3)
+ * @param {number} props.maxLength - Maximum character length
+ * @param {boolean} props.showCount - Show character count
+ * @param {Function} props.onChange - Change handler
+ * @param {Function} props.onBlur - Blur handler
+ * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
+ */
+const Textarea = (props = {}) => {
+    const { tags, signal } = window.Lightview || {};
+    const LVX = window.LightviewX || {};
+
+    if (!tags) {
+        console.error('Lightview not found');
+        return null;
+    }
+
+    const { div, textarea, fieldset, legend, p, span, shadowDOM } = tags;
+
+    const {
+        value,
+        defaultValue = '',
+        placeholder,
+        size = 'md',
+        color,
+        ghost = false,
+        disabled = false,
+        readOnly = false,
+        required = false,
+        label: labelText,
+        helper,
+        error,
+        validate,
+        rows = 3,
+        maxLength,
+        showCount = false,
+        onChange,
+        onBlur,
+        onInput,
+        name,
+        id,
+        class: className = '',
+        useShadow,
+        ...rest
+    } = props;
+
+    // Generate unique ID if not provided
+    const textareaId = id || `textarea-${Math.random().toString(36).slice(2, 9)}`;
+    const textareaName = name || textareaId;
+
+    // Internal state
+    const internalValue = signal ? signal(defaultValue) : { value: defaultValue };
+    const internalError = signal ? signal(null) : { value: null };
+    const touched = signal ? signal(false) : { value: false };
+
+    const isControlled = value !== undefined;
+
+    const getValue = () => {
+        if (isControlled) {
+            return typeof value === 'function' ? value() :
+                (value && typeof value.value !== 'undefined') ? value.value : value;
+        }
+        return internalValue.value;
+    };
+
+    const getError = () => {
+        // External error takes priority
+        if (error) {
+            const err = typeof error === 'function' ? error() : error;
+            if (err) return err;
+        }
+        // Then internal validation error
+        return internalError.value;
+    };
+
+    const runValidation = (val) => {
+        if (!validate) return null;
+        const result = validate(val);
+        internalError.value = result;
+        return result;
+    };
+
+    const handleInput = (e) => {
+        const newValue = e.target.value;
+
+        if (!isControlled) {
+            internalValue.value = newValue;
+        }
+
+        if (isControlled && value && typeof value.value !== 'undefined') {
+            value.value = newValue;
+        }
+
+        // Validate on input if already touched
+        if (touched.value && validate) {
+            runValidation(newValue);
+        }
+
+        if (onInput) onInput(e);
+        if (onChange) onChange(newValue, e);
+    };
+
+    const handleBlur = (e) => {
+        touched.value = true;
+        runValidation(e.target.value);
+        if (onBlur) onBlur(e);
+    };
+
+    // Build DaisyUI textarea classes
+    const getTextareaClass = () => {
+        const classes = ['textarea', 'w-full'];
+
+        // Ghost style
+        if (ghost) {
+            classes.push('textarea-ghost');
+        }
+
+        // Size
+        if (size && size !== 'md') {
+            classes.push(`textarea-${size}`);
+        }
+
+        // Color
+        if (color) {
+            classes.push(`textarea-${color}`);
+        }
+
+        // Error state
+        const currentError = getError();
+        if (currentError) {
+            classes.push('textarea-error');
+        }
+
+        return classes.join(' ');
+    };
+
+    const getCharCount = () => {
+        const val = getValue() || '';
+        return val.length;
+    };
+
+    // Build textarea attributes
+    const textareaAttrs = {
+        class: validate || error ? () => getTextareaClass() : getTextareaClass(),
+        value: isControlled
+            ? (typeof value === 'function' ? value : () => getValue())
+            : () => internalValue.value,
+        disabled: typeof disabled === 'function' ? disabled : disabled,
+        readonly: readOnly,
+        required,
+        rows,
+        name: textareaName,
+        id: textareaId,
+        oninput: handleInput,
+        onblur: handleBlur,
+        'aria-invalid': () => !!getError(),
+        ...rest
+    };
+
+    // Only add placeholder if defined
+    if (placeholder !== undefined) {
+        textareaAttrs.placeholder = placeholder;
+    }
+
+    // Only add maxlength if defined
+    if (maxLength !== undefined) {
+        textareaAttrs.maxlength = maxLength;
+    }
+
+    const textareaEl = textarea(textareaAttrs);
+
+    // Build the component using DaisyUI fieldset pattern
+    const fieldsetContent = [];
+
+    // Legend/Label (DaisyUI fieldset-legend)
+    if (labelText) {
+        fieldsetContent.push(
+            legend({ class: 'fieldset-legend' },
+                labelText,
+                required ? span({ class: 'text-error' }, ' *') : null
+            )
+        );
+    }
+
+    // Textarea element
+    fieldsetContent.push(textareaEl);
+
+    // Footer with helper/error and character count
+    const hasFooter = helper || validate || error || showCount || maxLength;
+    if (hasFooter) {
+        fieldsetContent.push(
+            div({ class: 'flex justify-between items-center' },
+                () => {
+                    const currentError = getError();
+                    if (currentError) {
+                        return p({
+                            class: 'label text-error flex-1',
+                            role: 'alert'
+                        }, currentError);
+                    }
+                    if (helper) {
+                        return p({
+                            class: 'label flex-1'
+                        }, helper);
+                    }
+                    return span({ class: 'flex-1' });
+                },
+                (showCount || maxLength) ? span({
+                    class: () => {
+                        const count = getCharCount();
+                        let classes = 'label text-xs';
+                        if (maxLength) {
+                            if (count > maxLength) classes += ' text-error';
+                            else if (count > maxLength * 0.9) classes += ' text-warning';
+                        }
+                        return classes;
+                    }
+                }, () => maxLength ? `${getCharCount()}/${maxLength}` : getCharCount()) : null
+            )
+        );
+    }
+
+    // Wrapper with DaisyUI fieldset class
+    const wrapperEl = fieldset({
+        class: `fieldset ${className}`.trim()
+    }, ...fieldsetContent);
+
+    // Check if we should use shadow DOM
+    let usesShadow = false;
+    if (LVX.shouldUseShadow) {
+        usesShadow = LVX.shouldUseShadow(useShadow);
+    } else {
+        usesShadow = useShadow === true;
+    }
+
+    if (usesShadow) {
+        const adoptedStyleSheets = LVX.getAdoptedStyleSheets ? LVX.getAdoptedStyleSheets() : [];
+
+        // Get current theme from document
+        const themeValue = LVX.themeSignal ? () => LVX.themeSignal.value : 'light';
+
+        return div({ class: 'content', style: 'display: inline-block' },
+            shadowDOM({ mode: 'open', adoptedStyleSheets },
+                div({ 'data-theme': themeValue },
+                    wrapperEl
+                )
+            )
+        );
+    }
+
+    return wrapperEl;
+};
+
+// Auto-register
+window.Lightview.tags.Textarea = Textarea;
+
+export default Textarea;

package/components/data-input/toggle.js

@@ -0,0 +1,201 @@
+/**
+ * Lightview Components - Toggle
+ * A toggle switch component using DaisyUI 5 styling
+ * @see https://daisyui.com/components/toggle/
+ * 
+ * Uses DaisyUI's form-control pattern:
+ * <div class="form-control">
+ *     <label class="label cursor-pointer">
+ *         <span class="label-text">Label</span>
+ *         <input type="checkbox" class="toggle" />
+ *     </label>
+ * </div>
+ */
+
+import '../daisyui.js';
+
+/**
+ * Toggle Component
+ * @param {Object} props - Toggle properties
+ * @param {boolean|Signal} props.checked - Controlled checked state
+ * @param {boolean} props.defaultChecked - Initial checked state (uncontrolled)
+ * @param {string} props.size - 'xs' | 'sm' | 'md' | 'lg' (default: 'md')
+ * @param {string} props.color - 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'
+ * @param {boolean} props.disabled - Disable toggle
+ * @param {string} props.label - Label text
+ * @param {string} props.labelPosition - 'left' | 'right' (default: 'left')
+ * @param {string} props.description - Description text below label
+ * @param {Function} props.onChange - Change handler
+ * @param {boolean} props.useShadow - Render in Shadow DOM
+ */
+const Toggle = (props = {}) => {
+    const { tags, signal } = window.Lightview || {};
+    const LVX = window.LightviewX || {};
+
+    if (!tags) {
+        console.error('Lightview not found');
+        return null;
+    }
+
+    const { div, input, label, span, shadowDOM } = tags;
+
+    const {
+        checked,
+        defaultChecked = false,
+        size = 'md',
+        color,
+        disabled = false,
+        label: labelText,
+        labelPosition = 'left',
+        description,
+        onChange,
+        name,
+        id,
+        class: className = '',
+        useShadow,
+        theme, // Explicit theme override
+        ...rest
+    } = props;
+
+    const toggleId = id || `toggle-${Math.random().toString(36).slice(2, 9)}`;
+
+    // Internal state for uncontrolled mode
+    const internalChecked = signal ? signal(defaultChecked) : { value: defaultChecked };
+
+    const isControlled = checked !== undefined;
+
+    const getChecked = () => {
+        if (isControlled) {
+            return typeof checked === 'function' ? checked() :
+                (checked && typeof checked.value !== 'undefined') ? checked.value : checked;
+        }
+        return internalChecked.value;
+    };
+
+    const handleChange = (e) => {
+        const newValue = e.target.checked;
+
+        if (!isControlled) {
+            internalChecked.value = newValue;
+        }
+
+        // If controlled with a signal, update it
+        if (isControlled && checked && typeof checked.value !== 'undefined') {
+            checked.value = newValue;
+        }
+
+        if (onChange) onChange(newValue, e);
+    };
+
+    // Build DaisyUI toggle classes
+    const getToggleClass = () => {
+        const classes = ['toggle'];
+
+        if (size && size !== 'md') {
+            classes.push(`toggle-${size}`);
+        }
+
+        if (color) {
+            classes.push(`toggle-${color}`);
+        }
+
+        return classes.join(' ');
+    };
+
+    const toggleInput = input({
+        type: 'checkbox',
+        class: getToggleClass(),
+        checked: isControlled
+            ? (typeof checked === 'function' ? checked : () => getChecked())
+            : () => internalChecked.value,
+        disabled: typeof disabled === 'function' ? disabled : disabled,
+        name,
+        id: toggleId,
+        onchange: handleChange,
+        role: 'switch',
+        'aria-checked': isControlled
+            ? (typeof checked === 'function' ? checked : () => getChecked())
+            : () => internalChecked.value,
+        ...rest
+    });
+
+    // If no label, return just the toggle
+    if (!labelText) {
+        // Check if we should use shadow DOM
+        let usesShadow = false;
+        if (LVX.shouldUseShadow) {
+            usesShadow = LVX.shouldUseShadow(useShadow);
+        } else {
+            usesShadow = useShadow === true;
+        }
+
+        if (usesShadow) {
+            const adoptedStyleSheets = LVX.getAdoptedStyleSheets ? LVX.getAdoptedStyleSheets() : [];
+            // Use reactive theme signal if available, otherwise fallback to explicit 'theme' prop or default
+            const themeValue = theme || (LVX.themeSignal ? () => LVX.themeSignal.value : 'light');
+
+            return div({ class: 'content', style: 'display: inline-block' },
+                shadowDOM({ mode: 'open', adoptedStyleSheets },
+                    div({ 'data-theme': themeValue }, toggleInput)
+                )
+            );
+        }
+
+        return toggleInput;
+    }
+
+    // Build label content
+    const labelContent = div({ style: 'display: flex; flex-direction: column;' },
+        span({ class: 'label-text' }, labelText),
+        description ? span({ class: 'label-text-alt', style: 'opacity: 0.7;' }, description) : null
+    );
+
+    // Arrange based on label position
+    const labelChildren = labelPosition === 'right'
+        ? [toggleInput, labelContent]
+        : [labelContent, toggleInput];
+
+    const formControl = div({
+        class: `form-control ${className}`.trim()
+    },
+        label({ class: 'label cursor-pointer', style: 'justify-content: flex-start; gap: 0.75rem;' },
+            ...labelChildren
+        )
+    );
+
+    // Check if we should use shadow DOM
+    let usesShadow = false;
+    if (LVX.shouldUseShadow) {
+        usesShadow = LVX.shouldUseShadow(useShadow);
+    } else {
+        usesShadow = useShadow === true;
+    }
+
+    if (usesShadow) {
+        const adoptedStyleSheets = LVX.getAdoptedStyleSheets ? LVX.getAdoptedStyleSheets() : [];
+
+        // Use reactive theme signal if available, otherwise fallback to explicit 'theme' prop or default
+        const themeValue = theme || (LVX.themeSignal ? () => LVX.themeSignal.value : 'light');
+
+        return span({ style: 'margin-right: 0.5rem' },
+            shadowDOM({ mode: 'open', adoptedStyleSheets },
+                div({ 'data-theme': themeValue, style: 'display: inline-block' }, formControl)
+            )
+        );
+    }
+
+    return formControl;
+};
+
+// Auto-register
+window.Lightview.tags.Toggle = Toggle;
+
+// Register as Custom Element
+if (window.LightviewX?.createCustomElement) {
+    const ToggleElement = window.LightviewX.createCustomElement(Toggle);
+    if (!customElements.get('lv-toggle')) {
+        customElements.define('lv-toggle', ToggleElement);
+    }
+}
+
+export default Toggle;

package/components/index.js

@@ -0,0 +1,137 @@
+/**
+ * Lightview Components - DaisyUI Edition
+ * Main export file for all components
+ */
+
+// DaisyUI utilities
+export * from './daisyui.js';
+export { default as DaisyUI } from './daisyui.js';
+
+// Actions
+export { default as Button } from './actions/button.js';
+export { default as Dropdown } from './actions/dropdown.js';
+export { default as Modal } from './actions/modal.js';
+export { default as Swap } from './actions/swap.js';
+
+
+// Data Display
+export { default as Accordion } from './data-display/accordion.js';
+export { default as Alert } from './data-display/alert.js';
+export { default as Avatar } from './data-display/avatar.js';
+export { default as Badge } from './data-display/badge.js';
+export { default as Card } from './data-display/card.js';
+export { default as Chart } from './data-display/chart.js';
+export { default as Carousel } from './data-display/carousel.js';
+export { default as Chat } from './data-display/chat.js';
+export { default as Collapse } from './data-display/collapse.js';
+export { default as Countdown } from './data-display/countdown.js';
+export { default as Diff } from './data-display/diff.js';
+export { default as Kbd } from './data-display/kbd.js';
+export { default as Loading } from './data-display/loading.js';
+export { default as Progress } from './data-display/progress.js';
+export { default as RadialProgress } from './data-display/radial-progress.js';
+export { default as Skeleton } from './data-display/skeleton.js';
+export { default as Stats } from './data-display/stats.js';
+export { default as Table } from './data-display/table.js';
+export { default as Timeline } from './data-display/timeline.js';
+export { default as Toast } from './data-display/toast.js';
+export { default as Tooltip } from './data-display/tooltip.js';
+
+// Data Input
+export { default as Checkbox } from './data-input/checkbox.js';
+export { default as FileInput } from './data-input/file-input.js';
+export { default as Radio } from './data-input/radio.js';
+export { default as Range } from './data-input/range.js';
+export { default as Rating } from './data-input/rating.js';
+export { default as Select } from './data-input/select.js';
+export { default as Input } from './data-input/input.js';
+export { default as Textarea } from './data-input/textarea.js';
+export { default as Toggle } from './data-input/toggle.js';
+
+// Layout
+export { default as Divider } from './layout/divider.js';
+export { default as Drawer } from './layout/drawer.js';
+export { default as Footer } from './layout/footer.js';
+export { default as Hero } from './layout/hero.js';
+export { default as Indicator } from './layout/indicator.js';
+export { default as Join } from './layout/join.js';
+export { default as Navbar } from './layout/navbar.js';
+
+// Navigation
+export { default as Breadcrumbs } from './navigation/breadcrumbs.js';
+export { default as Dock } from './navigation/dock.js';
+export { default as Menu } from './navigation/menu.js';
+export { default as Pagination } from './navigation/pagination.js';
+export { default as Steps } from './navigation/steps.js';
+export { default as Tabs } from './navigation/tabs.js';
+
+/**
+ * Component manifest for documentation/tooling
+ */
+export const componentManifest = {
+    actions: [
+        { name: 'Button', description: 'Versatile button with variants, colors, and loading states' },
+        { name: 'Dropdown', description: 'Dropdown menu that opens on click or hover' },
+        { name: 'Modal', description: 'Dialog overlay for important content' },
+        { name: 'Swap', description: 'Toggle between two elements with animation' },
+
+    ],
+    dataDisplay: [
+        { name: 'Accordion', description: 'Collapsible content sections' },
+        { name: 'Alert', description: 'Inline messages and notifications' },
+        { name: 'Avatar', description: 'User avatar with image/initials fallback' },
+        { name: 'Badge', description: 'Small label for status or counts' },
+        { name: 'Card', description: 'Container for grouping content' },
+        { name: 'Chart', description: 'Charts and graphs powered by charts.css' },
+        { name: 'Carousel', description: 'Scrollable image/content gallery' },
+        { name: 'Chat', description: 'Chat bubble messages' },
+        { name: 'Collapse', description: 'Show/hide content sections' },
+        { name: 'Countdown', description: 'Animated countdown number' },
+        { name: 'Diff', description: 'Side-by-side comparison' },
+        { name: 'Kbd', description: 'Keyboard shortcut indicator' },
+        { name: 'Loading', description: 'Loading spinner animations' },
+        { name: 'Progress', description: 'Linear progress bar' },
+        { name: 'RadialProgress', description: 'Circular progress indicator' },
+        { name: 'Skeleton', description: 'Loading placeholder' },
+        { name: 'Stats', description: 'Statistics display blocks' },
+        { name: 'Table', description: 'Data table with styling' },
+        { name: 'Timeline', description: 'Chronological event list' },
+        { name: 'Toast', description: 'Positioned notification container' },
+        { name: 'Tooltip', description: 'Hover tooltip' }
+    ],
+    dataInput: [
+        { name: 'Checkbox', description: 'Checkbox input' },
+        { name: 'FileInput', description: 'File upload input' },
+        { name: 'Radio', description: 'Radio button' },
+        { name: 'Range', description: 'Slider input' },
+        { name: 'Rating', description: 'Star rating input' },
+        { name: 'Select', description: 'Dropdown select' },
+        { name: 'Input', description: 'Text input field' },
+        { name: 'Textarea', description: 'Multi-line text input' },
+        { name: 'Toggle', description: 'Switch toggle' }
+    ],
+    layout: [
+        { name: 'Divider', description: 'Content separator' },
+        { name: 'Drawer', description: 'Slide-out sidebar' },
+        { name: 'Footer', description: 'Page footer' },
+        { name: 'Hero', description: 'Large banner section' },
+        { name: 'Indicator', description: 'Position badges on corners' },
+        { name: 'Join', description: 'Group items with shared borders' },
+        { name: 'Navbar', description: 'Navigation bar' }
+    ],
+    navigation: [
+        { name: 'Breadcrumbs', description: 'Navigation breadcrumb trail' },
+        { name: 'Dock', description: 'Bottom navigation bar' },
+        { name: 'Menu', description: 'Navigation menu list' },
+        { name: 'Pagination', description: 'Page navigation' },
+        { name: 'Steps', description: 'Step progress indicator' },
+        { name: 'Tabs', description: 'Tabbed navigation' }
+    ]
+};
+
+/**
+ * Initialize all components
+ */
+export const initComponents = () => {
+    console.log('Lightview Components (DaisyUI) initialized');
+};

package/components/layout/divider.js

@@ -0,0 +1,72 @@
+/**
+ * Lightview Divider Component (DaisyUI)
+ * @see https://daisyui.com/components/divider/
+ */
+
+import '../daisyui.js';
+
+/**
+ * Divider Component
+ * @param {Object} props
+ * @param {boolean} props.horizontal - Horizontal divider (default is vertical in flex row)
+ * @param {boolean} props.vertical - Vertical divider (explicit)
+ * @param {string} props.position - 'start' | 'end' for text position
+ * @param {string} props.color - 'neutral' | 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'info' | 'error'
+ * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
+ */
+const Divider = (props = {}, ...children) => {
+    const { tags } = window.Lightview || {};
+    const LVX = window.LightviewX || {};
+
+    if (!tags) return null;
+
+    const { div, shadowDOM } = tags;
+
+    const {
+        horizontal = false,
+        vertical = false,
+        position,
+        color,
+        useShadow,
+        class: className = '',
+        ...rest
+    } = props;
+
+    const classes = ['divider'];
+    if (horizontal) classes.push('divider-horizontal');
+    if (vertical) classes.push('divider-vertical');
+    if (position === 'start') classes.push('divider-start');
+    else if (position === 'end') classes.push('divider-end');
+    if (color) classes.push(`divider-${color}`);
+    if (className) classes.push(className);
+
+    const dividerEl = div({ class: classes.join(' '), ...rest }, ...children);
+
+    // Check if we should use shadow DOM
+    let usesShadow = false;
+    if (LVX.shouldUseShadow) {
+        usesShadow = LVX.shouldUseShadow(useShadow);
+    } else {
+        usesShadow = useShadow === true;
+    }
+
+    if (usesShadow) {
+        const adoptedStyleSheets = LVX.getAdoptedStyleSheets ? LVX.getAdoptedStyleSheets() : [];
+
+        const themeValue = LVX.themeSignal ? () => LVX.themeSignal.value : 'light';
+
+        return div({ class: 'contents' },
+            shadowDOM({ mode: 'open', adoptedStyleSheets },
+                div({ 'data-theme': themeValue },
+                    dividerEl
+                )
+            )
+        );
+    }
+
+    return dividerEl;
+};
+
+window.Lightview.tags.Divider = Divider;
+
+export default Divider;