@elyracode/mini-lit 0.9.4

package/dist/Sidebar.js

@@ -0,0 +1,151 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { Menu, X } from "lucide";
+import { Button } from "./Button.js";
+import { icon } from "./icons.js";
+import { fc } from "./mini.js";
+let Sidebar = class Sidebar extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.defaultOpen = false;
+        this.breakpoint = "md";
+        this.className = "";
+        this.logo = "";
+        this.footer = "";
+        this.content = "";
+        this.isOpen = false;
+        this.toggleSidebar = () => {
+            this.isOpen = !this.isOpen;
+        };
+    }
+    createRenderRoot() {
+        return this; // Use light DOM for global styles
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.isOpen = this.defaultOpen;
+    }
+    render() {
+        // Responsive classes based on breakpoint
+        const hideOnDesktop = {
+            sm: "sm:hidden",
+            md: "md:hidden",
+            lg: "lg:hidden",
+            xl: "xl:hidden",
+        }[this.breakpoint];
+        const showDesktopSidebar = {
+            sm: "sm:translate-x-0",
+            md: "md:translate-x-0",
+            lg: "lg:translate-x-0",
+            xl: "xl:translate-x-0",
+        }[this.breakpoint];
+        // On mobile, use isOpen state. On desktop, always show.
+        const mobileTransform = this.isOpen ? "translate-x-0" : "-translate-x-full";
+        return html `
+         <!-- Mobile menu button (only visible on mobile when sidebar is closed) -->
+         <div
+            class="${hideOnDesktop} fixed top-4 left-4 z-50 ${this.isOpen ? "opacity-0 pointer-events-none" : "opacity-100"}"
+         >
+            ${Button({
+            variant: "outline",
+            size: "icon",
+            onClick: this.toggleSidebar,
+            children: icon(Menu, "sm"),
+        })}
+         </div>
+
+         <!-- Overlay for mobile -->
+         <div
+            class="fixed inset-0 bg-black/50 z-40 ${hideOnDesktop} ${this.isOpen ? "" : "hidden"}"
+            @click=${this.toggleSidebar}
+         ></div>
+
+         <!-- Sidebar -->
+         <aside
+            class="fixed top-0 left-0 z-40 h-full w-64 bg-card border-r border-border transition-transform duration-300
+               ${mobileTransform}
+               ${showDesktopSidebar}
+               ${this.className}"
+         >
+            <div class="flex flex-col h-full">
+               <!-- Close button for mobile -->
+               <div class="${hideOnDesktop} absolute top-4 right-4">
+                  ${Button({
+            variant: "ghost",
+            size: "icon",
+            onClick: this.toggleSidebar,
+            children: icon(X, "sm"),
+        })}
+               </div>
+
+               <!-- Logo/Header -->
+               ${this.logo ? html ` <div class="p-4">${this.logo}</div> ` : ""}
+
+               <!-- Scrollable content -->
+               <div class="flex-1 overflow-y-auto p-4 space-y-4">${this.content}</div>
+
+               <!-- Footer -->
+               ${this.footer ? html ` <div class="p-4">${this.footer}</div> ` : ""}
+            </div>
+         </aside>
+      `;
+    }
+};
+__decorate([
+    property({ type: Boolean, attribute: "default-open" })
+], Sidebar.prototype, "defaultOpen", void 0);
+__decorate([
+    property({ type: String })
+], Sidebar.prototype, "breakpoint", void 0);
+__decorate([
+    property({ type: String, attribute: "class-name" })
+], Sidebar.prototype, "className", void 0);
+__decorate([
+    property({ type: Object })
+], Sidebar.prototype, "logo", void 0);
+__decorate([
+    property({ type: Object })
+], Sidebar.prototype, "footer", void 0);
+__decorate([
+    property({ type: Object })
+], Sidebar.prototype, "content", void 0);
+__decorate([
+    state()
+], Sidebar.prototype, "isOpen", void 0);
+Sidebar = __decorate([
+    customElement("mini-sidebar")
+], Sidebar);
+export { Sidebar };
+export const SidebarItem = fc(({ href, active = false, onClick, children, className = "" }) => {
+    const baseClasses = "block px-2 py-1 text-sm rounded transition-colors";
+    const activeClasses = active ? "bg-muted text-foreground font-medium" : "hover:bg-muted text-foreground";
+    if (href) {
+        return html `
+         <a href="${href}" class="${baseClasses} ${activeClasses} ${className}" @click=${onClick}> ${children} </a>
+      `;
+    }
+    return html `
+      <button class="${baseClasses} ${activeClasses} ${className} w-full text-left" @click=${onClick}>
+         ${children}
+      </button>
+   `;
+});
+export const SidebarSection = fc(({ title, children, className = "" }) => {
+    if (!title) {
+        // No title means top-level items, no wrapper needed
+        return html ` <div class="space-y-1 ${className}">${children}</div> `;
+    }
+    return html `
+      <div class="space-y-2 ${className}">
+         <h4 class="font-medium text-sm px-2">${title}</h4>
+         <nav class="space-y-1 pl-4">${children}</nav>
+      </div>
+   `;
+});
+//# sourceMappingURL=Sidebar.js.map

package/dist/Sidebar.js.map

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

package/dist/SplitPanel.d.ts

@@ -0,0 +1,40 @@
+import { LitElement, type TemplateResult } from "lit";
+export declare class SplitPanel extends LitElement {
+    leftPanel?: TemplateResult | HTMLElement;
+    rightPanel?: TemplateResult | HTMLElement;
+    topPanel?: TemplateResult | HTMLElement;
+    bottomPanel?: TemplateResult | HTMLElement;
+    initialSplit: number;
+    minSize: number;
+    hideRight: boolean;
+    hideBottom: boolean;
+    mobileBreakpoint: number;
+    vertical: boolean;
+    private currentSplit;
+    private isMobile;
+    private containerRef;
+    private firstPanelRef;
+    private secondPanelRef;
+    private dividerRef;
+    private isDragging;
+    private startPos;
+    private startSplit;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleResize;
+    private checkMobile;
+    private handleMouseDown;
+    private handleMouseMove;
+    private handleMouseUp;
+    private handleTouchStart;
+    private handleTouchMove;
+    private handleTouchEnd;
+    render(): TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "split-panel": SplitPanel;
+    }
+}
+//# sourceMappingURL=SplitPanel.d.ts.map

package/dist/SplitPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitPanel.d.ts","sourceRoot":"","sources":["../src/SplitPanel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAK5D,qBACa,UAAW,SAAQ,UAAU;IACX,SAAS,CAAC,EAAE,cAAc,GAAG,WAAW,CAAC;IACzC,UAAU,CAAC,EAAE,cAAc,GAAG,WAAW,CAAC;IAC1C,QAAQ,CAAC,EAAE,cAAc,GAAG,WAAW,CAAC;IACxC,WAAW,CAAC,EAAE,cAAc,GAAG,WAAW,CAAC;IAC3D,YAAY,SAAM;IAClB,OAAO,SAAO;IACd,SAAS,UAAS;IAClB,UAAU,UAAS;IACnB,gBAAgB,SAAQ;IACP,QAAQ,UAAS;IAErC,OAAO,CAAC,YAAY,CAAM;IAC1B,OAAO,CAAC,QAAQ,CAAS;IAElC,OAAO,CAAC,YAAY,CAAoC;IACxD,OAAO,CAAC,aAAa,CAAoC;IACzD,OAAO,CAAC,cAAc,CAAoC;IAC1D,OAAO,CAAC,UAAU,CAAoC;IAEtD,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,QAAQ,CAAK;IACrB,OAAO,CAAC,UAAU,CAAM;cAEL,gBAAgB,IAAI,WAAW,GAAG,gBAAgB;IAI5D,iBAAiB;IAOjB,oBAAoB;IAK7B,OAAO,CAAC,YAAY,CAElB;IAEF,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,eAAe,CAsBrB;IAEF,OAAO,CAAC,eAAe,CAyCrB;IAEF,OAAO,CAAC,aAAa,CAOnB;IAGF,OAAO,CAAC,gBAAgB,CAQtB;IAEF,OAAO,CAAC,eAAe,CAUrB;IAEF,OAAO,CAAC,cAAc,CAEpB;IAEO,MAAM;CA+FjB;AAED,OAAO,CAAC,MAAM,CAAC;IACZ,UAAU,qBAAqB;QAC5B,aAAa,EAAE,UAAU,CAAC;KAC5B;CACH"}

package/dist/SplitPanel.js

@@ -0,0 +1,275 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { createRef, ref } from "lit/directives/ref.js";
+import { i18n } from "./i18n.js";
+let SplitPanel = class SplitPanel extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.initialSplit = 50; // percentage for left/top panel
+        this.minSize = 200; // minimum size in pixels for each panel
+        this.hideRight = false; // controls visibility of right panel
+        this.hideBottom = false; // controls visibility of bottom panel
+        this.mobileBreakpoint = 1024; // px, below this is mobile mode
+        this.vertical = false; // vertical split mode
+        this.currentSplit = 50;
+        this.isMobile = false;
+        this.containerRef = createRef();
+        this.firstPanelRef = createRef();
+        this.secondPanelRef = createRef();
+        this.dividerRef = createRef();
+        this.isDragging = false;
+        this.startPos = 0;
+        this.startSplit = 50;
+        this.handleResize = () => {
+            this.checkMobile();
+        };
+        this.handleMouseDown = (e) => {
+            this.isDragging = true;
+            this.startPos = this.vertical ? e.clientY : e.clientX;
+            const container = this.containerRef.value;
+            if (container) {
+                const rect = container.getBoundingClientRect();
+                if (this.vertical) {
+                    const currentTop = this.firstPanelRef.value?.offsetHeight || 0;
+                    this.startSplit = (currentTop / rect.height) * 100;
+                }
+                else {
+                    const currentLeft = this.firstPanelRef.value?.offsetWidth || 0;
+                    this.startSplit = (currentLeft / rect.width) * 100;
+                }
+            }
+            document.body.style.userSelect = "none";
+            document.body.style.cursor = this.vertical ? "row-resize" : "col-resize";
+            document.addEventListener("mousemove", this.handleMouseMove);
+            document.addEventListener("mouseup", this.handleMouseUp);
+            e.preventDefault();
+        };
+        this.handleMouseMove = (e) => {
+            if (!this.isDragging)
+                return;
+            const container = this.containerRef.value;
+            if (!container)
+                return;
+            const rect = container.getBoundingClientRect();
+            if (this.vertical) {
+                const deltaY = e.clientY - this.startPos;
+                const deltaPercent = (deltaY / rect.height) * 100;
+                let newSplit = this.startSplit + deltaPercent;
+                // Apply constraints
+                const minPercent = (this.minSize / rect.height) * 100;
+                const maxPercent = 100 - minPercent;
+                newSplit = Math.max(minPercent, Math.min(maxPercent, newSplit));
+                // Update panel sizes directly
+                if (this.firstPanelRef.value && this.secondPanelRef.value) {
+                    this.firstPanelRef.value.style.height = `${newSplit}%`;
+                    this.secondPanelRef.value.style.height = `${100 - newSplit}%`;
+                    this.currentSplit = newSplit;
+                }
+            }
+            else {
+                const deltaX = e.clientX - this.startPos;
+                const deltaPercent = (deltaX / rect.width) * 100;
+                let newSplit = this.startSplit + deltaPercent;
+                // Apply constraints
+                const minPercent = (this.minSize / rect.width) * 100;
+                const maxPercent = 100 - minPercent;
+                newSplit = Math.max(minPercent, Math.min(maxPercent, newSplit));
+                // Update panel sizes directly
+                if (this.firstPanelRef.value && this.secondPanelRef.value) {
+                    this.firstPanelRef.value.style.width = `${newSplit}%`;
+                    this.secondPanelRef.value.style.width = `${100 - newSplit}%`;
+                    this.currentSplit = newSplit;
+                }
+            }
+        };
+        this.handleMouseUp = () => {
+            this.isDragging = false;
+            document.body.style.userSelect = "";
+            document.body.style.cursor = "";
+            document.removeEventListener("mousemove", this.handleMouseMove);
+            document.removeEventListener("mouseup", this.handleMouseUp);
+        };
+        // Touch support
+        this.handleTouchStart = (e) => {
+            const touch = e.touches[0];
+            const mouseEvent = new MouseEvent("mousedown", {
+                clientX: touch.clientX,
+                clientY: touch.clientY,
+                button: 0,
+            });
+            this.handleMouseDown(mouseEvent);
+        };
+        this.handleTouchMove = (e) => {
+            if (!this.isDragging)
+                return;
+            const touch = e.touches[0];
+            const mouseEvent = new MouseEvent("mousemove", {
+                clientX: touch.clientX,
+                clientY: touch.clientY,
+            });
+            this.handleMouseMove(mouseEvent);
+            e.preventDefault();
+        };
+        this.handleTouchEnd = () => {
+            this.handleMouseUp();
+        };
+    }
+    createRenderRoot() {
+        return this; // light DOM
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.currentSplit = this.initialSplit;
+        this.checkMobile();
+        window.addEventListener("resize", this.handleResize);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener("resize", this.handleResize);
+    }
+    checkMobile() {
+        const wasMobile = this.isMobile;
+        this.isMobile = window.innerWidth < this.mobileBreakpoint;
+        if (wasMobile !== this.isMobile) {
+            this.requestUpdate();
+        }
+    }
+    render() {
+        // Vertical mode
+        if (this.vertical) {
+            const panel1 = this.topPanel || this.leftPanel;
+            const panel2 = this.bottomPanel || this.rightPanel;
+            const hideSecond = this.hideBottom || this.hideRight;
+            if (!panel1 || !panel2) {
+                return html `<div>${i18n("Loading...")}</div>`;
+            }
+            return html `
+            <div class="flex flex-col h-full w-full relative" ${ref(this.containerRef)}>
+               <!-- Top Panel -->
+               <div
+                  class="w-full overflow-hidden"
+                  style="height: ${hideSecond ? "100%" : this.currentSplit + "%"}"
+                  ${ref(this.firstPanelRef)}
+               >
+                  ${panel1}
+               </div>
+
+               <!-- Horizontal Divider -->
+               <div
+                  class="h-1 bg-border hover:bg-accent cursor-row-resize relative flex-shrink-0
+						       before:content-[''] before:absolute before:inset-x-0 before:-top-2 before:-bottom-2 before:h-5
+						       md:before:-top-1 md:before:-bottom-1 md:before:h-3 ${hideSecond ? "hidden" : ""}"
+                  @mousedown=${this.handleMouseDown}
+                  @touchstart=${this.handleTouchStart}
+                  @touchmove=${this.handleTouchMove}
+                  @touchend=${this.handleTouchEnd}
+                  ${ref(this.dividerRef)}
+               >
+                  <!-- Grab handle indicator -->
+                  <div
+                     class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-1 w-8 bg-muted-foreground/30 rounded-full"
+                  ></div>
+               </div>
+
+               <!-- Bottom Panel -->
+               <div
+                  class="w-full overflow-hidden ${hideSecond ? "hidden" : ""}"
+                  style="height: ${100 - this.currentSplit}%"
+                  ${ref(this.secondPanelRef)}
+               >
+                  ${panel2}
+               </div>
+            </div>
+         `;
+        }
+        // Horizontal mode (default)
+        if (!this.leftPanel || !this.rightPanel) {
+            return html `<div>${i18n("Loading...")}</div>`;
+        }
+        return html `
+         <div class="flex h-full w-full relative" ${ref(this.containerRef)}>
+            <!-- Left Panel -->
+            <div
+               class="h-full overflow-hidden"
+               style="width: ${this.hideRight ? "100%" : this.currentSplit + "%"}"
+               ${ref(this.firstPanelRef)}
+            >
+               ${this.leftPanel}
+            </div>
+
+            <!-- Vertical Divider -->
+            <div
+               class="w-1 bg-border hover:bg-accent cursor-col-resize relative flex-shrink-0
+					       before:content-[''] before:absolute before:inset-y-0 before:-left-2 before:-right-2 before:w-5
+					       md:before:-left-1 md:before:-right-1 md:before:w-3 ${this.hideRight ? "hidden" : ""}"
+               @mousedown=${this.handleMouseDown}
+               @touchstart=${this.handleTouchStart}
+               @touchmove=${this.handleTouchMove}
+               @touchend=${this.handleTouchEnd}
+               ${ref(this.dividerRef)}
+            >
+               <!-- Grab handle indicator -->
+               <div
+                  class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-1 h-8 bg-muted-foreground/30 rounded-full"
+               ></div>
+            </div>
+
+            <!-- Right Panel -->
+            <div
+               class="h-full overflow-hidden ${this.hideRight ? "hidden" : ""}"
+               style="width: ${100 - this.currentSplit}%"
+               ${ref(this.secondPanelRef)}
+            >
+               ${this.rightPanel}
+            </div>
+         </div>
+      `;
+    }
+};
+__decorate([
+    property({ type: Object })
+], SplitPanel.prototype, "leftPanel", void 0);
+__decorate([
+    property({ type: Object })
+], SplitPanel.prototype, "rightPanel", void 0);
+__decorate([
+    property({ type: Object })
+], SplitPanel.prototype, "topPanel", void 0);
+__decorate([
+    property({ type: Object })
+], SplitPanel.prototype, "bottomPanel", void 0);
+__decorate([
+    property()
+], SplitPanel.prototype, "initialSplit", void 0);
+__decorate([
+    property()
+], SplitPanel.prototype, "minSize", void 0);
+__decorate([
+    property()
+], SplitPanel.prototype, "hideRight", void 0);
+__decorate([
+    property()
+], SplitPanel.prototype, "hideBottom", void 0);
+__decorate([
+    property()
+], SplitPanel.prototype, "mobileBreakpoint", void 0);
+__decorate([
+    property({ type: Boolean })
+], SplitPanel.prototype, "vertical", void 0);
+__decorate([
+    state()
+], SplitPanel.prototype, "currentSplit", void 0);
+__decorate([
+    state()
+], SplitPanel.prototype, "isMobile", void 0);
+SplitPanel = __decorate([
+    customElement("split-panel")
+], SplitPanel);
+export { SplitPanel };
+//# sourceMappingURL=SplitPanel.js.map

package/dist/SplitPanel.js.map

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

package/dist/Switch.d.ts

@@ -0,0 +1,13 @@
+import { type ComponentPropsWithoutChildren, type TemplateResult } from "./mini.js";
+interface SwitchProps extends ComponentPropsWithoutChildren {
+    checked?: boolean;
+    disabled?: boolean;
+    label?: TemplateResult | string;
+    name?: string;
+    id?: string;
+    onChange?: (checked: boolean) => void;
+}
+export declare function Switch(props: SwitchProps): TemplateResult;
+export declare function Switch(checked?: boolean, onChange?: (checked: boolean) => void, label?: TemplateResult | string, disabled?: boolean, className?: string): TemplateResult;
+export {};
+//# sourceMappingURL=Switch.d.ts.map

package/dist/Switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../src/Switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,6BAA6B,EAAY,KAAK,cAAc,EAAE,MAAM,WAAW,CAAC;AAE9F,UAAU,WAAY,SAAQ,6BAA6B;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,cAAc,GAAG,MAAM,CAAC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAqDD,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,cAAc,CAAC;AAC3D,wBAAgB,MAAM,CACnB,OAAO,CAAC,EAAE,OAAO,EACjB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,EACrC,KAAK,CAAC,EAAE,cAAc,GAAG,MAAM,EAC/B,QAAQ,CAAC,EAAE,OAAO,EAClB,SAAS,CAAC,EAAE,MAAM,GAClB,cAAc,CAAC"}

package/dist/Switch.js

@@ -0,0 +1,48 @@
+import { fc, html } from "./mini.js";
+const _Switch = fc(({ checked = false, disabled = false, label = "", name = "", id = "", onChange, className = "" }) => {
+    // Generate a unique ID if label is provided but ID is not
+    const switchId = id || (label ? `switch-${Math.random().toString(36).substr(2, 9)}` : "");
+    const handleClick = () => {
+        if (!disabled) {
+            onChange?.(!checked);
+        }
+    };
+    const baseClasses = "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50";
+    const checkedClasses = "data-[state=checked]:bg-primary data-[state=unchecked]:bg-input";
+    const thumbClasses = "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0";
+    return html `
+         <div class="flex items-center space-x-2 ${className}">
+            <button
+               type="button"
+               role="switch"
+               id="${switchId}"
+               aria-checked="${checked}"
+               data-state="${checked ? "checked" : "unchecked"}"
+               ?disabled=${disabled}
+               class="${baseClasses} ${checkedClasses}"
+               @click=${handleClick}
+            >
+               <span data-state="${checked ? "checked" : "unchecked"}" class="${thumbClasses}"></span>
+            </button>
+            ${label
+        ? html `
+                    <label
+                       for="${switchId}"
+                       class="text-sm font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer select-none"
+                       @click=${handleClick}
+                    >
+                       ${label}
+                    </label>
+                 `
+        : ""}
+            ${name ? html ` <input type="hidden" name="${name}" .value=${checked ? "on" : "off"} /> ` : ""}
+         </div>
+      `;
+});
+export function Switch(propsOrChecked = false, onChange, label = "", disabled = false, className = "") {
+    if (typeof propsOrChecked === "object" && propsOrChecked !== null) {
+        return _Switch(propsOrChecked);
+    }
+    return _Switch({ checked: propsOrChecked, onChange, label, disabled, className });
+}
+//# sourceMappingURL=Switch.js.map

package/dist/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../src/Switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsC,EAAE,EAAE,IAAI,EAAuB,MAAM,WAAW,CAAC;AAW9F,MAAM,OAAO,GAAG,EAAE,CACf,CAAC,EAAE,OAAO,GAAG,KAAK,EAAE,QAAQ,GAAG,KAAK,EAAE,KAAK,GAAG,EAAE,EAAE,IAAI,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,SAAS,GAAG,EAAE,EAAE,EAAE,EAAE;IACjG,0DAA0D;IAC1D,MAAM,QAAQ,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAE1F,MAAM,WAAW,GAAG,GAAG,EAAE;QACtB,IAAI,CAAC,QAAQ,EAAE,CAAC;YACb,QAAQ,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC;QACxB,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,WAAW,GACd,oTAAoT,CAAC;IACxT,MAAM,cAAc,GAAG,iEAAiE,CAAC;IACzF,MAAM,YAAY,GACf,4KAA4K,CAAC;IAEhL,OAAO,IAAI,CAAA;mDACkC,SAAS;;;;qBAIvC,QAAQ;+BACE,OAAO;6BACT,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW;2BACnC,QAAQ;wBACX,WAAW,IAAI,cAAc;wBAC7B,WAAW;;mCAEA,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,YAAY,YAAY;;cAG7E,KAAK;QACF,CAAC,CAAC,IAAI,CAAA;;8BAEM,QAAQ;;gCAEN,WAAW;;yBAElB,KAAK;;kBAEZ;QACA,CAAC,CAAC,EACR;cACE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,+BAA+B,IAAI,YAAY,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE;;OAElG,CAAC;AACL,CAAC,CACH,CAAC;AAWF,MAAM,UAAU,MAAM,CACnB,iBAAwC,KAAK,EAC7C,QAAqC,EACrC,QAAiC,EAAE,EACnC,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,EAAE;IAEd,IAAI,OAAO,cAAc,KAAK,QAAQ,IAAI,cAAc,KAAK,IAAI,EAAE,CAAC;QACjE,OAAO,OAAO,CAAC,cAA6B,CAAC,CAAC;IACjD,CAAC;IACD,OAAO,OAAO,CAAC,EAAE,OAAO,EAAE,cAAyB,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,CAAC;AAChG,CAAC"}

package/dist/Textarea.d.ts

@@ -0,0 +1,21 @@
+import { type BaseComponentProps, type TemplateResult } from "./mini.js";
+interface TextareaProps extends BaseComponentProps {
+    id?: string;
+    value?: string;
+    placeholder?: string;
+    label?: string;
+    error?: string;
+    disabled?: boolean;
+    required?: boolean;
+    name?: string;
+    rows?: number;
+    cols?: number;
+    maxLength?: number;
+    resize?: "none" | "both" | "horizontal" | "vertical";
+    onInput?: (e: Event) => void;
+    onChange?: (e: Event) => void;
+}
+export declare function Textarea(props: TextareaProps): TemplateResult;
+export declare function Textarea(value?: string, placeholder?: string, onInput?: (e: Event) => void, rows?: number, className?: string): TemplateResult;
+export {};
+//# sourceMappingURL=Textarea.d.ts.map

package/dist/Textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../src/Textarea.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,kBAAkB,EAAY,KAAK,cAAc,EAAE,MAAM,WAAW,CAAC;AAEnF,UAAU,aAAc,SAAQ,kBAAkB;IAC/C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,CAAC;IACrD,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;CAChC;AAgED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,cAAc,CAAC;AAC/D,wBAAgB,QAAQ,CACrB,KAAK,CAAC,EAAE,MAAM,EACd,WAAW,CAAC,EAAE,MAAM,EACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,EAC5B,IAAI,CAAC,EAAE,MAAM,EACb,SAAS,CAAC,EAAE,MAAM,GAClB,cAAc,CAAC"}

package/dist/Textarea.js

@@ -0,0 +1,67 @@
+import { i18n } from "./i18n.js";
+import { fc, html } from "./mini.js";
+const _Textarea = fc(({ id = "", value = "", placeholder = "", label = "", error = "", disabled = false, required = false, name = "", rows = 4, cols, maxLength, resize = "vertical", onInput, onChange, className = "", }) => {
+    const resizeClasses = {
+        none: "resize-none",
+        both: "resize",
+        horizontal: "resize-x",
+        vertical: "resize-y",
+    };
+    const baseClasses = "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50";
+    const stateClasses = error ? "border-destructive" : "";
+    return html `
+         <div class="flex flex-col gap-1.5 ${className}">
+            ${label
+        ? html `
+                    <label class="text-sm font-medium text-foreground">
+                       ${label} ${required ? html `<span class="text-destructive">${i18n("*")}</span>` : ""}
+                    </label>
+                 `
+        : ""}
+            <textarea
+               id="${id}"
+               class="${baseClasses} ${resizeClasses[resize]} ${stateClasses}"
+               .value=${value || ""}
+               placeholder="${placeholder}"
+               ?disabled=${disabled}
+               ?required=${required}
+               ?aria-invalid=${!!error}
+               name="${name}"
+               rows="${rows}"
+               cols="${cols ?? ""}"
+               maxlength="${maxLength ?? ""}"
+               @input=${onInput}
+               @change=${onChange}
+            ></textarea>
+            ${error ? html `<span class="text-sm text-destructive">${error}</span>` : ""}
+         </div>
+      `;
+});
+export function Textarea(propsOrValue = "", placeholder = "", onInput, rows = 4, className = "") {
+    // Check if it's a props object (has any TextareaProps properties)
+    if (typeof propsOrValue === "object" && propsOrValue !== null && !Array.isArray(propsOrValue)) {
+        // Check if it looks like a props object by checking for common properties
+        const obj = propsOrValue;
+        if ("value" in obj ||
+            "placeholder" in obj ||
+            "label" in obj ||
+            "rows" in obj ||
+            "onInput" in obj ||
+            "onChange" in obj ||
+            "disabled" in obj ||
+            "required" in obj ||
+            "error" in obj ||
+            "className" in obj ||
+            "id" in obj ||
+            "name" in obj ||
+            "maxLength" in obj ||
+            "resize" in obj ||
+            "cols" in obj) {
+            return _Textarea(propsOrValue);
+        }
+    }
+    // Convert to string if it's not already
+    const valueStr = typeof propsOrValue === "string" ? propsOrValue : "";
+    return _Textarea({ value: valueStr, placeholder, onInput, rows, className });
+}
+//# sourceMappingURL=Textarea.js.map