@ktjs/mui 0.17.0

package/dist/index.mjs

@@ -0,0 +1,489 @@
+import { jsxs, jsx } from 'kt.js/jsx-runtime';
+import { ref, createRedrawable } from 'kt.js';
+
+/**
+ * Alert component - mimics MUI Alert appearance and behavior
+ */
+function Alert(props) {
+    const { children, severity = 'info', variant = 'standard', icon, onClose, sx } = props;
+    const classes = ['mui-alert', `mui-alert-${severity}`, `mui-alert-${variant}`, props.class ? props.class : '']
+        .filter(Boolean)
+        .join(' ');
+    // Convert sx object to style string
+    let styleString = props.style || '';
+    if (sx) {
+        const sxStyles = Object.entries(sx)
+            .map(([key, value]) => {
+            // Convert camelCase to kebab-case
+            const cssKey = key.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+            return `${cssKey}: ${value}`;
+        })
+            .join('; ');
+        styleString = styleString ? `${styleString}; ${sxStyles}` : sxStyles;
+    }
+    // Icon SVG paths for different severities
+    const getIcon = () => {
+        if (icon === false)
+            return null;
+        if (icon)
+            return icon;
+        const iconSize = '22px';
+        const iconClass = 'mui-alert-icon';
+        switch (severity) {
+            case 'success':
+                return (jsx("svg", { class: iconClass, viewBox: "0 0 24 24", width: iconSize, height: iconSize, children: jsx("path", { fill: "currentColor", d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }) }));
+            case 'error':
+                return (jsx("svg", { class: iconClass, viewBox: "0 0 24 24", width: iconSize, height: iconSize, children: jsx("path", { fill: "currentColor", d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" }) }));
+            case 'warning':
+                return (jsx("svg", { class: iconClass, viewBox: "0 0 24 24", width: iconSize, height: iconSize, children: jsx("path", { fill: "currentColor", d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" }) }));
+            case 'info':
+            default:
+                return (jsx("svg", { class: iconClass, viewBox: "0 0 24 24", width: iconSize, height: iconSize, children: jsx("path", { fill: "currentColor", d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" }) }));
+        }
+    };
+    const alertIcon = getIcon();
+    const alert = (jsxs("div", { class: classes, style: styleString, role: "alert", children: [alertIcon && jsx("div", { class: "mui-alert-icon-wrapper", children: alertIcon }), jsx("div", { class: "mui-alert-message", children: children }), onClose && (jsx("button", { class: "mui-alert-close", "on:click": onClose, "aria-label": "Close", children: jsx("svg", { viewBox: "0 0 24 24", width: "18px", height: "18px", children: jsx("path", { fill: "currentColor", d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) }))] }));
+    return alert;
+}
+
+const emptyFn$3 = () => { };
+/**
+ * Button component - mimics MUI Button appearance and behavior
+ */
+function Button(props) {
+    const { children, variant = 'text', color = 'primary', size = 'medium', disabled = false, fullWidth = false, iconOnly = false, startIcon, endIcon, type = 'button', 'on:click': onClick = emptyFn$3, } = props;
+    const classes = [
+        'mui-button',
+        `mui-button-${variant}`,
+        `mui-button-${variant}-${color}`,
+        `mui-button-size-${size}`,
+        fullWidth && 'mui-button-fullwidth',
+        iconOnly && 'mui-button-icon-only',
+        disabled && 'mui-button-disabled',
+        props.class ? props.class : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const handleClick = (e) => {
+        if (disabled) {
+            e.preventDefault();
+            return;
+        }
+        // Create ripple effect
+        const button = e.currentTarget;
+        const rippleContainer = button.querySelector('.mui-button-ripple');
+        if (rippleContainer) {
+            const rect = button.getBoundingClientRect();
+            const size = Math.max(rect.width, rect.height);
+            const x = e.clientX - rect.left - size / 2;
+            const y = e.clientY - rect.top - size / 2;
+            const ripple = document.createElement('span');
+            ripple.style.width = ripple.style.height = `${size}px`;
+            ripple.style.left = `${x}px`;
+            ripple.style.top = `${y}px`;
+            ripple.classList.add('mui-button-ripple-effect');
+            rippleContainer.appendChild(ripple);
+            // Remove ripple after animation
+            setTimeout(() => {
+                ripple.remove();
+            }, 600);
+        }
+        onClick(e);
+    };
+    return (jsxs("button", { class: classes, style: props.style ? props.style : '', type: type, disabled: disabled, "on:click": handleClick, children: [startIcon && jsx("span", { class: "mui-button-start-icon", children: startIcon }), jsx("span", { class: "mui-button-label", children: children }), endIcon && jsx("span", { class: "mui-button-end-icon", children: endIcon }), jsx("span", { class: "mui-button-ripple" })] }));
+}
+
+/**
+ * Dialog component - mimics MUI Dialog appearance and behavior
+ * Only handles open/close state, title and content are passed as props
+ */
+function Dialog(props) {
+    const { open = false, onClose, title, children, actions, maxWidth = 'sm', fullWidth = false } = props;
+    // Handle backdrop click
+    const handleBackdropClick = (e) => {
+        if (e.target === backdrop) {
+            onClose?.();
+        }
+    };
+    // Handle ESC key
+    const handleKeyDown = (e) => {
+        if (e.key === 'Escape' && open) {
+            onClose?.();
+        }
+    };
+    // Backdrop element
+    const backdrop = (jsx("div", { class: `kt-dialog-backdrop ${open ? 'kt-dialog-backdrop-open' : ''}`, "on:click": handleBackdropClick, style: { display: open ? 'flex' : 'none' }, children: jsxs("div", { class: `kt-dialog-paper ${maxWidth ? `kt-dialog-maxWidth-${maxWidth}` : ''} ${fullWidth ? 'kt-dialog-fullWidth' : ''}`, "on:click": (e) => e.stopPropagation(), children: [title && (jsx("div", { class: "kt-dialog-title", children: jsx("h2", { children: title }) })), children && jsx("div", { class: "kt-dialog-content", children: children }), actions && jsx("div", { class: "kt-dialog-actions", children: actions })] }) }));
+    // Add/remove ESC key listener
+    if (open) {
+        document.addEventListener('keydown', handleKeyDown);
+    }
+    else {
+        document.removeEventListener('keydown', handleKeyDown);
+    }
+    return backdrop;
+}
+
+/**
+ * FormLabel component - mimics MUI FormLabel appearance and behavior
+ */
+function FormLabel(props) {
+    const { children, required = false, error = false, disabled = false, focused = false, filled = false, component = 'label', htmlFor, } = props;
+    const classes = [
+        'mui-form-label',
+        error && 'mui-form-label-error',
+        disabled && 'mui-form-label-disabled',
+        focused && 'mui-form-label-focused',
+        filled && 'mui-form-label-filled',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const labelProps = {
+        class: classes,
+    };
+    if (htmlFor) {
+        labelProps.for = htmlFor;
+    }
+    const element = component === 'legend' ? (jsxs("legend", { ...labelProps, children: [children, required && jsx("span", { class: "mui-form-label-asterisk", children: " *" })] })) : (jsxs("label", { ...labelProps, children: [children, required && jsx("span", { class: "mui-form-label-asterisk", children: " *" })] }));
+    return element;
+}
+
+/**
+ * LinearProgress component - mimics MUI LinearProgress appearance and behavior
+ */
+function LinearProgress(props) {
+    const { variant = 'indeterminate', progress: value = 0, color = 'primary', sx } = props;
+    const classes = [
+        'mui-linear-progress',
+        `mui-linear-progress-${color}`,
+        `mui-linear-progress-${variant}`,
+        props.class ? props.class : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    // Convert sx object to style string
+    let styleString = props.style || '';
+    if (sx) {
+        const sxStyles = Object.entries(sx)
+            .map(([key, value]) => {
+            // Convert camelCase to kebab-case
+            const cssKey = key.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+            return `${cssKey}: ${value}`;
+        })
+            .join('; ');
+        styleString = styleString ? `${styleString}; ${sxStyles}` : sxStyles;
+    }
+    // Calculate progress percentage
+    const progressValue = Math.min(Math.max(value, 0), 100);
+    const barStyle = variant === 'determinate' ? `width: ${progressValue}%` : '';
+    return (jsx("div", { class: classes, style: styleString, role: "progressbar", "aria-valuenow": progressValue, children: jsx("div", { class: "mui-linear-progress-bar", style: barStyle }) }));
+}
+
+const emptyFn$2 = () => { };
+/**
+ * TextField component - mimics MUI TextField appearance and behavior
+ */
+function TextField(props) {
+    const { label = '', placeholder = '', value = '', type = 'text', disabled = false, required = false, error = false, helperText = '', fullWidth = false, multiline = false, rows = 3, maxRows = 10, size = 'medium', 'mui:input': onInput = emptyFn$2, 'mui:change': onChange = emptyFn$2, 'mui:blur': onBlur = emptyFn$2, 'mui:focus': onFocus = emptyFn$2, } = props;
+    let isFocused = false;
+    const inputRef = ref();
+    // Update container classes
+    const updateClasses = () => {
+        const hasValue = inputRef.value?.value || '';
+        const classes = [
+            'mui-textfield-root',
+            `mui-textfield-size-${size}`,
+            isFocused && 'mui-textfield-focused',
+            error && 'mui-textfield-error',
+            disabled && 'mui-textfield-disabled',
+            fullWidth && 'mui-textfield-fullwidth',
+            (isFocused || hasValue) && 'mui-textfield-has-value',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        container.className = classes;
+    };
+    const handleInput = (e) => {
+        const target = e.target;
+        updateClasses();
+        onInput(target.value, e);
+    };
+    const handleChange = (e) => {
+        const target = e.target;
+        onChange(target.value, e);
+    };
+    const handleFocus = (e) => {
+        isFocused = true;
+        updateClasses();
+        const target = e.target;
+        onFocus(target.value, e);
+    };
+    const handleBlur = (e) => {
+        isFocused = false;
+        updateClasses();
+        const target = e.target;
+        onBlur(target.value, e);
+    };
+    // Create input or textarea element
+    // Only show placeholder when label is floating (focused or has value)
+    const getPlaceholder = () => (label && !isFocused && !value ? '' : placeholder);
+    const inputElement = multiline ? (jsx("textarea", { ref: inputRef, class: "mui-textfield-input", placeholder: getPlaceholder(), value: value, disabled: disabled, required: required, rows: rows, "on:input": handleInput, "on:change": handleChange, "on:focus": handleFocus, "on:blur": handleBlur })) : (jsx("input", { ref: inputRef, type: type, class: "mui-textfield-input", placeholder: getPlaceholder(), value: value, disabled: disabled, required: required, "on:input": handleInput, "on:change": handleChange, "on:focus": handleFocus, "on:blur": handleBlur }));
+    const container = (jsxs("div", { class: 'mui-textfield-root ' + (props.class ? props.class : ''), style: props.style ? props.style : '', children: [jsxs("div", { class: "mui-textfield-wrapper", children: [label && (jsxs("label", { class: "mui-textfield-label", children: [label, required && jsx("span", { class: "mui-textfield-required", children: "*" })] })), jsx("div", { class: "mui-textfield-input-wrapper", children: inputElement }), jsx("fieldset", { class: "mui-textfield-fieldset", children: jsx("legend", { class: "mui-textfield-legend", children: jsxs("span", { children: [label, required && '*'] }) }) })] }), helperText && jsx("p", { class: "mui-textfield-helper-text", children: helperText })] }));
+    // Initialize classes
+    setTimeout(() => updateClasses(), 0);
+    return container;
+}
+
+const emptyFn$1 = () => { };
+/**
+ * Radio component - mimics MUI Radio appearance and behavior
+ */
+function Radio(props) {
+    const toggleIcon = (checked) => {
+        uncheckedIcon.style.display = checked ? 'none' : '';
+        checkedIcon.style.display = checked ? '' : 'none';
+    };
+    // Handle change
+    const handleChange = () => {
+        if (disabled) {
+            return;
+        }
+        checked = inputRef.value.checked;
+        toggleIcon(checked);
+        onChange(checked, value);
+    };
+    const { checked: initChecked = false, value = '', text = '', size = 'small', 'mui:change': onChange = emptyFn$1, disabled: initDisabled = false, color = 'primary', } = props;
+    const inputRef = ref();
+    let checked = initChecked;
+    let disabled = initDisabled;
+    const uncheckedIcon = (jsx("span", { class: "mui-radio-icon-unchecked", children: jsx("svg", { viewBox: "0 0 24 24", children: jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" }) }) }));
+    const checkedIcon = (jsx("span", { class: "mui-radio-icon-checked", children: jsx("svg", { viewBox: "0 0 24 24", children: jsx("path", { d: "M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" }) }) }));
+    // initialize icon state
+    toggleIcon(checked);
+    const container = (jsxs("label", { class: `mui-radio-wrapper mui-radio-size-${size} ${disabled ? 'mui-radio-disabled' : ''} mui-radio-color-${color}`, children: [jsx("input", { ref: inputRef, type: "radio", class: "mui-radio-input", checked: checked, value: value, disabled: disabled, "on:change": handleChange }), jsxs("span", { class: "mui-radio-icon", children: [uncheckedIcon, checkedIcon] }), jsx("span", { class: "mui-radio-label", children: text })] }));
+    container.redrawIcon = (newValue) => {
+        checked = newValue === value;
+        inputRef.value.checked = checked;
+        toggleIcon(checked);
+    };
+    return container;
+}
+/**
+ * RadioGroup component - groups multiple radios together
+ */
+function RadioGroup(props) {
+    const { value = '', size = 'small', 'mui:change': onChange = emptyFn$1, row = false } = props;
+    const changeHandler = (checked, value) => {
+        if (checked) {
+            onChange(value);
+        }
+        radios.forEach((radio) => radio.redrawIcon(value));
+    };
+    const radios = props.options.map((o) => {
+        o.size = size;
+        o.checked = value === o.value;
+        const originalChange = o['mui:change'];
+        if (originalChange) {
+            o['mui:change'] = (checked, newValue) => {
+                originalChange(checked, newValue);
+                changeHandler(checked, newValue);
+            };
+        }
+        else {
+            o['mui:change'] = changeHandler;
+        }
+        return Radio(o);
+    });
+    return (jsx("div", { class: `mui-radio-group ${row ? 'mui-radio-group-row' : ''} ${props.class ? props.class : ''}`, style: props.style ? props.style : '', role: "radiogroup", children: radios }));
+}
+
+const emptyFn = () => { };
+/**
+ * Select component - mimics MUI Select appearance and behavior
+ */
+function Select(props) {
+    let { value = '', options = [], label = '', placeholder = '', size = 'medium', 'mui:change': onChange = emptyFn, fullWidth = false, disabled = false, } = props;
+    let isOpen = false;
+    let isFocused = false;
+    const selectRef = ref();
+    // Toggle dropdown
+    const toggleMenu = () => {
+        if (disabled) {
+            return;
+        }
+        isOpen = !isOpen;
+        updateMenu();
+    };
+    // Update menu visibility
+    const updateMenu = () => {
+        if (isOpen) {
+            menu.value.style.display = 'block';
+            // Trigger reflow to enable animation
+            menu.value.offsetHeight;
+            menu.value.classList.add('mui-select-menu-open');
+        }
+        else {
+            menu.value.classList.remove('mui-select-menu-open');
+            // Hide after animation completes
+            setTimeout(() => {
+                if (!isOpen) {
+                    menu.value.style.display = 'none';
+                }
+            }, 200);
+        }
+        selectRef.value.classList.toggle('mui-select-open', isOpen);
+    };
+    // Handle option click
+    const handleOptionClick = (newValue) => {
+        value = newValue;
+        isOpen = false;
+        onChange(value);
+        updateMenu();
+        updateLabelState();
+        valueDisplay.value.redraw();
+        setTimeout(() => {
+            // Trigger redraw of parent if needed
+            menu.value.redraw();
+        }, 200);
+    };
+    // Close menu when clicking outside
+    const handleClickOutside = (e) => {
+        if (!selectRef.value.contains(e.target)) {
+            isOpen = false;
+            updateMenu();
+        }
+    };
+    // Handle focus
+    const handleFocus = () => {
+        isFocused = true;
+        updateLabelState();
+    };
+    const handleBlur = () => {
+        isFocused = false;
+        updateLabelState();
+    };
+    // Update label focused state
+    const updateLabelState = () => {
+        const labelElement = selectRef.value.querySelector('.mui-select-label');
+        if (labelElement) {
+            if (isFocused || value) {
+                labelElement.classList.add('focused');
+            }
+            else {
+                labelElement.classList.remove('focused');
+            }
+        }
+    };
+    const valueDisplay = createRedrawable(() => {
+        const o = options.find((opt) => opt.value === value);
+        let inner;
+        if (o === undefined) {
+            inner = jsx("span", { class: "mui-select-placeholder", children: placeholder || '\u00a0' });
+        }
+        else {
+            inner = o.label;
+        }
+        return jsx("div", { class: "mui-select-display", children: inner });
+    });
+    const menu = createRedrawable(() => {
+        return (jsx("div", { class: "mui-select-menu", style: { display: 'none' }, children: options.map((option) => (jsx("div", { class: `mui-select-option ${option.value === value ? 'selected' : ''}`, "on:click": () => handleOptionClick(option.value), children: option.label }))) }));
+    });
+    // Create container
+    const container = (jsxs("div", { ref: selectRef, class: `mui-select-wrapper mui-select-size-${size} ${props.class ? props.class : ''} ${fullWidth ? 'mui-select-fullWidth' : ''} ${disabled ? 'mui-select-disabled' : ''}`, style: props.style ? props.style : '', children: [label && jsx("label", { class: `mui-select-label ${value || isFocused ? 'focused' : ''}`, children: label }), jsxs("div", { class: "mui-select-control mui-select-outlined", "on:click": toggleMenu, "on:focus": handleFocus, "on:blur": handleBlur, tabIndex: disabled ? -1 : 0, children: [valueDisplay, jsx("input", { type: "hidden", value: value }), jsx("fieldset", { class: "mui-select-fieldset", children: jsx("legend", { children: jsx("span", { children: label }) }) }), jsx("svg", { class: "mui-select-icon", focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24", width: "24", height: "24", children: jsx("path", { d: "M7 10l5 5 5-5Z", fill: "currentColor" }) })] }), menu] }));
+    // Add global click listener
+    setTimeout(() => {
+        document.removeEventListener('click', handleClickOutside);
+        document.addEventListener('click', handleClickOutside);
+        updateLabelState();
+    }, 0);
+    return container;
+}
+
+function DownloadIcon(props) {
+    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" }) }));
+}
+
+function CompressIcon(props) {
+    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M4 9h16v2H4zm0 4h16v2H4zm8-9 4 4H8zm0 14 4-4H8z" }) }));
+}
+
+function SubtitlesIcon(props) {
+    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM4 12h4v2H4v-2zm10 6H4v-2h10v2zm6 0h-4v-2h4v2zm0-4H10v-2h10v2z" }) }));
+}
+
+function SettingsIcon(props) {
+    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z" }) }));
+}
+
+function NewReleasesIcon(props) {
+    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "m23 12-2.44-2.79.34-3.69-3.61-.82-1.89-3.2L12 2.96 8.6 1.5 6.71 4.69 3.1 5.5l.34 3.7L1 12l2.44 2.79-.34 3.7 3.61.82L8.6 22.5l3.4-1.47 3.4 1.46 1.89-3.19 3.61-.82-.34-3.69L23 12zm-12.91 4.72-3.8-3.81 1.48-1.48 2.32 2.33 5.85-5.87 1.48 1.48-7.33 7.35z" }) }));
+}
+
+function FolderOpenIcon(props) {
+    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z" }) }));
+}
+
+function PlayArrowIcon(props) {
+    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M8 5v14l11-7z" }) }));
+}
+
+function ContentPasteIcon(props) {
+    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z" }) }));
+}
+
+function DeleteIcon(props) {
+    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" }) }));
+}
+
+function StopIcon(props) {
+    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M6 6h12v12H6z" }) }));
+}
+
+function FileOpenIcon(props) {
+    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H15l6-6V4c0-1.1-.9-2-2-2zm-1 7V3.5L18.5 9H13z" }) }));
+}
+
+function ColorLensIcon(props) {
+    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" }) }));
+}
+
+function WallpaperIcon(props) {
+    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M4 4h7V2H4c-1.1 0-2 .9-2 2v7h2V4zm6 9-4 5h12l-3-4-2.03 2.71L10 13zm7-4.5c0-.83-.67-1.5-1.5-1.5S14 7.67 14 8.5s.67 1.5 1.5 1.5S17 9.33 17 8.5zM20 2h-7v2h7v7h2V4c0-1.1-.9-2-2-2zm0 18h-7v2h7c1.1 0 2-.9 2-2v-7h-2v7zM4 13H2v7c0 1.1.9 2 2 2h7v-2H4v-7z" }) }));
+}
+
+function ExpandMoreIcon(props) {
+    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z" }) }));
+}
+
+function SaveIcon(props) {
+    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z" }) }));
+}
+
+function UploadFileIcon(props) {
+    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11zM8 15.01l1.41 1.41L11 14.84V19h2v-4.16l1.59 1.59L16 15.01 12.01 11z" }) }));
+}
+
+function VideoFileIcon(props) {
+    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6zm10-7v-1.5l2 1.5-2 1.5V13H8v-2h8z" }) }));
+}
+
+function QueuePlayNextIcon(props) {
+    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M21 3H3c-1.11 0-2 .89-2 2v12c0 1.1.89 2 2 2h5v2h8v-2h2v-2H3V5h18v8h2V5c0-1.11-.9-2-2-2zm-8 7V7h-2v3H8v2h3v3h2v-3h3v-2h-3zm11 8-4.5 4.5L18 21l3-3-3-3 1.5-1.5L24 18z" }) }));
+}
+
+function MenuIcon(props) {
+    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" }) }));
+}
+
+function HomeIcon(props) {
+    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" }) }));
+}
+
+function ContentCopyIcon(props) {
+    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" }) }));
+}
+
+function SelectAllIcon(props) {
+    return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M3 5h2V3c-1.1 0-2 .9-2 2zm0 8h2v-2H3v2zm4 8h2v-2H7v2zM3 9h2V7H3v2zm10-6h-2v2h2V3zm6 0v2h2c0-1.1-.9-2-2-2zM5 21v-2H3c0 1.1.9 2 2 2zm-2-4h2v-2H3v2zM9 3H7v2h2V3zm2 18h2v-2h-2v2zm8-8h2v-2h-2v2zm0 8c1.1 0 2-.9 2-2h-2v2zm0-12h2V7h-2v2zm0 8h2v-2h-2v2zm-4 4h2v-2h-2v2zm0-16h2V3h-2v2zM7 17h10V7H7v10zm2-8h6v6H9V9z" }) }));
+}
+
+export { Alert, Button, ColorLensIcon, CompressIcon, ContentCopyIcon, ContentPasteIcon, DeleteIcon, Dialog, DownloadIcon, ExpandMoreIcon, FileOpenIcon as FileOpen, FileOpenIcon, FolderOpenIcon, FormLabel, HomeIcon, LinearProgress, MenuIcon, NewReleasesIcon, PlayArrowIcon, QueuePlayNextIcon, Radio, RadioGroup, SaveIcon, Select, SelectAllIcon, SettingsIcon, StopIcon, SubtitlesIcon, TextField, UploadFileIcon, VideoFileIcon, WallpaperIcon };

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@ktjs/mui",
+  "version": "0.17.0",
+  "description": "Material-UI inspired components for kt.js - pre-styled UI components",
+  "type": "module",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "default": "./dist/index.mjs"
+    },
+    "./kt-mui-styles": "./dist/kt-mui-styles"
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "kt.js",
+    "ui",
+    "components",
+    "material-ui",
+    "mui",
+    "web"
+  ],
+  "license": "MIT",
+  "author": {
+    "name": "Kasukabe Tsumugi",
+    "email": "futami16237@gmail.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/baendlorel/kt.js",
+    "directory": "packages/mui"
+  },
+  "dependencies": {
+    "@ktjs/core": "0.17.2"
+  },
+  "scripts": {
+    "build": "rollup -c rollup.config.mjs",
+    "dev": "rollup -c rollup.config.mjs -w"
+  }
+}