@codeenvision/ui-webcomponents 1.0.0

package/dist/components/web-components/color-gradient.js

@@ -0,0 +1,168 @@
+import { ColorGradient } from "../ColorGradient/ColorGradient.js";
+import { defineComponentElement } from "../../src/runtime/component-element.js";
+import { shouldUseDomValue } from "./utils/hydration.js";
+const DEFAULT_COLOR_GRADIENT_PROPS = {
+    startColor: undefined,
+    middleColor: undefined,
+    endColor: undefined,
+    variant: "custom",
+    direction: "to-r",
+    angle: undefined,
+    size: "md",
+    shape: "rounded",
+    hoverEffect: false,
+    cover: false,
+    interactive: false,
+    label: undefined,
+    width: undefined,
+    height: undefined,
+};
+const COLOR_GRADIENT_PROP_DEFINITIONS = [
+    { attribute: "start-color", prop: "startColor" },
+    { attribute: "middle-color", prop: "middleColor" },
+    { attribute: "end-color", prop: "endColor" },
+    { attribute: "variant", prop: "variant" },
+    { attribute: "direction", prop: "direction" },
+    { attribute: "angle", prop: "angle", type: "number" },
+    { attribute: "size", prop: "size" },
+    { attribute: "shape", prop: "shape" },
+    { attribute: "hover-effect", prop: "hoverEffect", type: "boolean" },
+    { attribute: "cover", prop: "cover", type: "boolean" },
+    { attribute: "interactive", prop: "interactive", type: "boolean" },
+    { attribute: "label", prop: "label" },
+    { attribute: "width", prop: "width" },
+    { attribute: "height", prop: "height" },
+];
+let colorGradientId = 0;
+const applyColorGradientParts = (wrapper) => {
+    wrapper.setAttribute("data-ce-component", "color-gradient");
+    wrapper.setAttribute("part", "base");
+    wrapper
+        .querySelectorAll(".ce-color-gradient__label")
+        .forEach((node) => node.setAttribute("part", "label"));
+};
+const parseGradientProps = (wrapper) => {
+    if (!wrapper) {
+        return {};
+    }
+    const directionClass = Array.from(wrapper.classList).find((entry) => entry.startsWith("ce-color-gradient--to-"));
+    const size = wrapper.classList.contains("ce-color-gradient--sm")
+        ? "sm"
+        : wrapper.classList.contains("ce-color-gradient--lg")
+            ? "lg"
+            : "md";
+    const shape = wrapper.classList.contains("ce-color-gradient--square")
+        ? "square"
+        : wrapper.classList.contains("ce-color-gradient--pill")
+            ? "pill"
+            : "rounded";
+    const variant = Array.from(wrapper.classList).find((entry) => ["primary", "secondary", "success", "danger", "warning", "info", "dark", "light"].some((variant) => entry === `ce-color-gradient--${variant}`));
+    const label = wrapper.querySelector(".ce-color-gradient__label")?.textContent?.trim() ?? undefined;
+    return {
+        direction: directionClass?.replace("ce-color-gradient--", ""),
+        size,
+        shape,
+        variant: (variant?.replace("ce-color-gradient--", "") ?? "custom"),
+        label,
+        hoverEffect: wrapper.classList.contains("ce-color-gradient--hover"),
+        cover: wrapper.classList.contains("ce-color-gradient--cover"),
+        interactive: wrapper.classList.contains("ce-color-gradient--interactive"),
+    };
+};
+const colorGradientComponent = {
+    mount({ target, props, on }) {
+        const host = target;
+        const existingWrapper = host.querySelector(".ce-color-gradient");
+        const elementId = existingWrapper?.id || `ce-color-gradient-${++colorGradientId}`;
+        let wrapper = existingWrapper ?? undefined;
+        let currentProps = { ...DEFAULT_COLOR_GRADIENT_PROPS, ...props };
+        if (existingWrapper) {
+            const parsedProps = parseGradientProps(existingWrapper);
+            if (shouldUseDomValue(host, "direction", parsedProps.direction)) {
+                currentProps.direction = parsedProps.direction;
+            }
+            if (shouldUseDomValue(host, "size", parsedProps.size)) {
+                currentProps.size = parsedProps.size;
+            }
+            if (shouldUseDomValue(host, "shape", parsedProps.shape)) {
+                currentProps.shape = parsedProps.shape;
+            }
+            if (shouldUseDomValue(host, "variant", parsedProps.variant)) {
+                currentProps.variant = parsedProps.variant;
+            }
+            if (shouldUseDomValue(host, "label", parsedProps.label)) {
+                currentProps.label = parsedProps.label;
+            }
+            if (shouldUseDomValue(host, "hover-effect", parsedProps.hoverEffect)) {
+                currentProps.hoverEffect = Boolean(parsedProps.hoverEffect);
+            }
+            if (shouldUseDomValue(host, "cover", parsedProps.cover)) {
+                currentProps.cover = Boolean(parsedProps.cover);
+            }
+            if (shouldUseDomValue(host, "interactive", parsedProps.interactive)) {
+                currentProps.interactive = Boolean(parsedProps.interactive);
+            }
+        }
+        let instance;
+        const getColors = (input) => ({
+            start: input.startColor,
+            middle: input.middleColor,
+            end: input.endColor,
+        });
+        const render = () => {
+            if (!wrapper) {
+                host.innerHTML = "";
+                wrapper = document.createElement("div");
+                wrapper.id = elementId;
+                host.appendChild(wrapper);
+            }
+            else {
+                if (!wrapper.id) {
+                    wrapper.id = elementId;
+                }
+                if (!wrapper.classList.contains("ce-color-gradient")) {
+                    wrapper.classList.add("ce-color-gradient");
+                }
+            }
+            applyColorGradientParts(wrapper);
+            instance = new ColorGradient({
+                ...currentProps,
+                selector: `#${elementId}`,
+                hydrate: Boolean(wrapper),
+                onClick: () => on?.click?.({ colors: getColors(currentProps) }),
+                onCopy: (colors) => on?.copy?.({ colors }),
+            });
+            instance.init();
+        };
+        render();
+        return {
+            destroy() {
+                instance?.destroy?.();
+                if (!existingWrapper) {
+                    host.innerHTML = "";
+                }
+            },
+            updateProps(partial) {
+                currentProps = { ...currentProps, ...(partial ?? {}) };
+                render();
+            },
+        };
+    },
+    renderToString(props) {
+        const merged = { ...DEFAULT_COLOR_GRADIENT_PROPS, ...props };
+        const label = merged.label ? `<span class="ce-color-gradient__label" part="label">${merged.label}</span>` : "";
+        return `<div class="ce-color-gradient ce-color-gradient--${merged.direction ?? "to-r"}" data-ce-component="color-gradient" part="base">${label}</div>`;
+    },
+};
+export function registerColorGradientElement() {
+    return defineComponentElement({
+        tag: "ce-color-gradient",
+        component: colorGradientComponent,
+        props: COLOR_GRADIENT_PROP_DEFINITIONS,
+        defaultProps: DEFAULT_COLOR_GRADIENT_PROPS,
+        shadow: false,
+        events: ["click", "copy"],
+        preserveLightDom: true,
+    });
+}
+//# sourceMappingURL=color-gradient.js.map

package/dist/components/web-components/color-gradient.js.map

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

package/dist/components/web-components/color-palette.d.ts

@@ -0,0 +1,13 @@
+import type { ColorPaletteOptions, ColorPaletteSwatch } from "../ColorPalette/ColorPalette.types.js";
+export interface ColorPaletteProps extends Omit<ColorPaletteOptions, "selector" | "onSelect" | "onSwatchSelect">, Record<string, unknown> {
+    colors: ColorPaletteOptions["colors"];
+}
+export interface ColorPaletteSelectDetail {
+    value: string;
+    swatch?: ColorPaletteSwatch;
+}
+export interface ColorPaletteSwatchSelectDetail {
+    swatch: ColorPaletteSwatch;
+}
+export declare function registerColorPaletteElement(): CustomElementConstructor | undefined;
+//# sourceMappingURL=color-palette.d.ts.map

package/dist/components/web-components/color-palette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-palette.d.ts","sourceRoot":"","sources":["../../../components/web-components/color-palette.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAIrG,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,mBAAmB,EAAE,UAAU,GAAG,UAAU,GAAG,gBAAgB,CAAC,EAC3E,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACzB,MAAM,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;CACvC;AAED,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,kBAAkB,CAAC;CAC7B;AAED,MAAM,WAAW,8BAA8B;IAC7C,MAAM,EAAE,kBAAkB,CAAC;CAC5B;AAqJD,wBAAgB,2BAA2B,IAAI,wBAAwB,GAAG,SAAS,CAUlF"}

package/dist/components/web-components/color-palette.js

@@ -0,0 +1,150 @@
+import { ColorPalette } from "../ColorPalette/ColorPalette.js";
+import { defineComponentElement } from "../../src/runtime/component-element.js";
+import { shouldUseDomValue } from "./utils/hydration.js";
+const DEFAULT_COLOR_PALETTE_PROPS = {
+    colors: [],
+    layout: "grid",
+    columns: undefined,
+    showValue: true,
+    showToken: true,
+    interactive: false,
+    ariaLabel: undefined,
+    selectedValue: undefined,
+};
+const COLOR_PALETTE_PROP_DEFINITIONS = [
+    { attribute: "colors", prop: "colors", type: "json" },
+    { attribute: "layout", prop: "layout" },
+    { attribute: "columns", prop: "columns", type: "number" },
+    { attribute: "show-value", prop: "showValue", type: "boolean" },
+    { attribute: "show-token", prop: "showToken", type: "boolean" },
+    { attribute: "interactive", prop: "interactive", type: "boolean" },
+    { attribute: "aria-label", prop: "ariaLabel" },
+    { attribute: "selected-value", prop: "selectedValue" },
+];
+let colorPaletteId = 0;
+const applyColorPaletteParts = (wrapper) => {
+    wrapper.setAttribute("data-ce-component", "color-palette");
+    wrapper.setAttribute("part", "base");
+    wrapper.querySelectorAll(".ce-color-palette__item").forEach((node) => node.setAttribute("part", "item"));
+    wrapper.querySelectorAll(".ce-color-palette__swatch").forEach((node) => node.setAttribute("part", "swatch"));
+    wrapper.querySelectorAll(".ce-color-palette__label").forEach((node) => node.setAttribute("part", "label"));
+    wrapper.querySelectorAll(".ce-color-palette__token").forEach((node) => node.setAttribute("part", "token"));
+    wrapper.querySelectorAll(".ce-color-palette__value").forEach((node) => node.setAttribute("part", "value"));
+    wrapper
+        .querySelectorAll(".ce-color-palette__description")
+        .forEach((node) => node.setAttribute("part", "description"));
+};
+const parsePaletteSwatches = (wrapper) => {
+    if (!wrapper) {
+        return [];
+    }
+    const items = Array.from(wrapper.querySelectorAll(".ce-color-palette__item"));
+    return items.map((item, index) => {
+        const label = item.querySelector(".ce-color-palette__label")?.textContent?.trim();
+        const value = item.querySelector(".ce-color-palette__value")?.textContent?.trim();
+        const token = item.querySelector(".ce-color-palette__token")?.textContent?.trim();
+        const description = item.querySelector(".ce-color-palette__description")?.textContent?.trim();
+        item.dataset.swatchIndex = String(index);
+        return {
+            label: label ?? value ?? `Swatch ${index + 1}`,
+            value: value ?? label ?? "",
+            token: token ?? undefined,
+            description: description ?? undefined,
+        };
+    });
+};
+const colorPaletteComponent = {
+    mount({ target, props, on }) {
+        const host = target;
+        const existingWrapper = host.querySelector(".ce-color-palette");
+        const elementId = existingWrapper?.id || `ce-color-palette-${++colorPaletteId}`;
+        let wrapper = existingWrapper ?? undefined;
+        let currentProps = { ...DEFAULT_COLOR_PALETTE_PROPS, ...props };
+        if (existingWrapper) {
+            const parsedColors = parsePaletteSwatches(existingWrapper);
+            if (shouldUseDomValue(host, "colors", parsedColors)) {
+                currentProps.colors = parsedColors;
+            }
+            if (shouldUseDomValue(host, "layout", existingWrapper.classList.contains("ce-color-palette--stacked") ? "stacked" : "grid")) {
+                currentProps.layout = existingWrapper.classList.contains("ce-color-palette--stacked") ? "stacked" : "grid";
+            }
+            const selected = existingWrapper.querySelector(".ce-color-palette__item.is-selected");
+            const selectedIndex = selected?.dataset.swatchIndex;
+            if (shouldUseDomValue(host, "selected-value", selectedIndex ? parsedColors[Number(selectedIndex)]?.value : undefined)) {
+                currentProps.selectedValue = selectedIndex ? parsedColors[Number(selectedIndex)]?.value : undefined;
+            }
+        }
+        let instance;
+        const render = () => {
+            if (!wrapper) {
+                host.innerHTML = "";
+                wrapper = document.createElement("div");
+                wrapper.id = elementId;
+                host.appendChild(wrapper);
+            }
+            else {
+                if (!wrapper.id) {
+                    wrapper.id = elementId;
+                }
+                if (!wrapper.classList.contains("ce-color-palette")) {
+                    wrapper.classList.add("ce-color-palette");
+                }
+            }
+            applyColorPaletteParts(wrapper);
+            const propsToUse = {
+                ...DEFAULT_COLOR_PALETTE_PROPS,
+                ...currentProps,
+                colors: currentProps.colors ?? [],
+            };
+            currentProps = propsToUse;
+            instance = new ColorPalette({
+                ...propsToUse,
+                selector: `#${elementId}`,
+                hydrate: Boolean(wrapper),
+                onSelect: (value, swatch) => on?.select?.({ value, swatch }),
+                onSwatchSelect: (swatch) => on?.swatchSelect?.({ swatch }),
+            });
+            instance.init();
+        };
+        render();
+        return {
+            destroy() {
+                instance?.destroy?.();
+                if (!existingWrapper) {
+                    host.innerHTML = "";
+                }
+            },
+            updateProps(partial) {
+                currentProps = { ...DEFAULT_COLOR_PALETTE_PROPS, ...currentProps, ...(partial ?? {}) };
+                render();
+            },
+        };
+    },
+    renderToString(props) {
+        const merged = { ...DEFAULT_COLOR_PALETTE_PROPS, ...props };
+        const colors = merged.colors ?? [];
+        const swatches = colors.map((entry, index) => {
+            if (typeof entry === "string") {
+                return `<li class="ce-color-palette__item" part="item" data-swatch-index="${index}"><div class="ce-color-palette__swatch" part="swatch" style="--swatch-color: ${entry};"></div><span class="ce-color-palette__label" part="label">${entry}</span>${merged.showValue !== false ? `<span class="ce-color-palette__value" part="value">${entry}</span>` : ""}</li>`;
+            }
+            const label = entry.label ?? entry.value;
+            const token = merged.showToken !== false && entry.token ? `<span class="ce-color-palette__token" part="token">${entry.token}</span>` : "";
+            const value = merged.showValue !== false ? `<span class="ce-color-palette__value" part="value">${entry.value}</span>` : "";
+            const description = entry.description ? `<span class="ce-color-palette__description" part="description">${entry.description}</span>` : "";
+            return `<li class="ce-color-palette__item" part="item" data-swatch-index="${index}"><div class="ce-color-palette__swatch" part="swatch" style="--swatch-color: ${entry.value};"></div><span class="ce-color-palette__label" part="label">${label}</span>${token}${value}${description}</li>`;
+        }).join("") ?? "";
+        return `<ul class="ce-color-palette${merged.layout === "stacked" ? " ce-color-palette--stacked" : ""}" data-ce-component="color-palette" part="base">${swatches}</ul>`;
+    },
+};
+export function registerColorPaletteElement() {
+    return defineComponentElement({
+        tag: "ce-color-palette",
+        component: colorPaletteComponent,
+        props: COLOR_PALETTE_PROP_DEFINITIONS,
+        defaultProps: DEFAULT_COLOR_PALETTE_PROPS,
+        shadow: false,
+        events: ["select", "swatchSelect"],
+        preserveLightDom: true,
+    });
+}
+//# sourceMappingURL=color-palette.js.map

package/dist/components/web-components/color-palette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-palette.js","sourceRoot":"","sources":["../../../components/web-components/color-palette.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAE/D,OAAO,EAAE,sBAAsB,EAAuB,MAAM,wCAAwC,CAAC;AACrG,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAiBzD,MAAM,2BAA2B,GAAsB;IACrD,MAAM,EAAE,EAAE;IACV,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,SAAS;IAClB,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,IAAI;IACf,WAAW,EAAE,KAAK;IAClB,SAAS,EAAE,SAAS;IACpB,aAAa,EAAE,SAAS;CACzB,CAAC;AAEF,MAAM,8BAA8B,GAA6C;IAC/E,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE;IACrD,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE;IACvC,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE;IACzD,EAAE,SAAS,EAAE,YAAY,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE;IAC/D,EAAE,SAAS,EAAE,YAAY,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE;IAC/D,EAAE,SAAS,EAAE,aAAa,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,EAAE;IAClE,EAAE,SAAS,EAAE,YAAY,EAAE,IAAI,EAAE,WAAW,EAAE;IAC9C,EAAE,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,eAAe,EAAE;CACvD,CAAC;AAEF,IAAI,cAAc,GAAG,CAAC,CAAC;AAEvB,MAAM,sBAAsB,GAAG,CAAC,OAAoB,EAAQ,EAAE;IAC5D,OAAO,CAAC,YAAY,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC;IAC3D,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrC,OAAO,CAAC,gBAAgB,CAAc,yBAAyB,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACtH,OAAO,CAAC,gBAAgB,CAAc,2BAA2B,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAC1H,OAAO,CAAC,gBAAgB,CAAc,0BAA0B,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IACxH,OAAO,CAAC,gBAAgB,CAAc,0BAA0B,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IACxH,OAAO,CAAC,gBAAgB,CAAc,0BAA0B,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IACxH,OAAO;SACJ,gBAAgB,CAAc,gCAAgC,CAAC;SAC/D,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC;AACjE,CAAC,CAAC;AAEF,MAAM,oBAAoB,GAAG,CAAC,OAA2B,EAAwB,EAAE;IACjF,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,EAAE,CAAC;IACZ,CAAC;IACD,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAc,yBAAyB,CAAC,CAAC,CAAC;IAC3F,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;QAC/B,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAc,0BAA0B,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;QAC/F,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAc,0BAA0B,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;QAC/F,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAc,0BAA0B,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;QAC/F,MAAM,WAAW,GAAG,IAAI,CAAC,aAAa,CAAc,gCAAgC,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;QAC3G,IAAI,CAAC,OAAO,CAAC,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;QACzC,OAAO;YACL,KAAK,EAAE,KAAK,IAAI,KAAK,IAAI,UAAU,KAAK,GAAG,CAAC,EAAE;YAC9C,KAAK,EAAE,KAAK,IAAI,KAAK,IAAI,EAAE;YAC3B,KAAK,EAAE,KAAK,IAAI,SAAS;YACzB,WAAW,EAAE,WAAW,IAAI,SAAS;SACtC,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,qBAAqB,GAAwC;IACjE,KAAK,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE;QACzB,MAAM,IAAI,GAAG,MAAqB,CAAC;QACnC,MAAM,eAAe,GAAG,IAAI,CAAC,aAAa,CAAc,mBAAmB,CAAC,CAAC;QAC7E,MAAM,SAAS,GAAG,eAAe,EAAE,EAAE,IAAI,oBAAoB,EAAE,cAAc,EAAE,CAAC;QAChF,IAAI,OAAO,GAAG,eAAe,IAAI,SAAS,CAAC;QAE3C,IAAI,YAAY,GAAsB,EAAE,GAAG,2BAA2B,EAAE,GAAG,KAAK,EAAE,CAAC;QACnF,IAAI,eAAe,EAAE,CAAC;YACpB,MAAM,YAAY,GAAG,oBAAoB,CAAC,eAAe,CAAC,CAAC;YAC3D,IAAI,iBAAiB,CAAC,IAAI,EAAE,QAAQ,EAAE,YAAY,CAAC,EAAE,CAAC;gBACpD,YAAY,CAAC,MAAM,GAAG,YAAY,CAAC;YACrC,CAAC;YACD,IAAI,iBAAiB,CAAC,IAAI,EAAE,QAAQ,EAAE,eAAe,CAAC,SAAS,CAAC,QAAQ,CAAC,2BAA2B,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC;gBAC5H,YAAY,CAAC,MAAM,GAAG,eAAe,CAAC,SAAS,CAAC,QAAQ,CAAC,2BAA2B,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;YAC7G,CAAC;YACD,MAAM,QAAQ,GAAG,eAAe,CAAC,aAAa,CAAc,qCAAqC,CAAC,CAAC;YACnG,MAAM,aAAa,GAAG,QAAQ,EAAE,OAAO,CAAC,WAAW,CAAC;YACpD,IAAI,iBAAiB,CAAC,IAAI,EAAE,gBAAgB,EAAE,aAAa,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC;gBACtH,YAAY,CAAC,aAAa,GAAG,aAAa,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;YACtG,CAAC;QACH,CAAC;QACD,IAAI,QAAkC,CAAC;QAEvC,MAAM,MAAM,GAAG,GAAS,EAAE;YACxB,IAAI,CAAC,OAAO,EAAE,CAAC;gBACb,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;gBACpB,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;gBACxC,OAAO,CAAC,EAAE,GAAG,SAAS,CAAC;gBACvB,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;YAC5B,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,OAAO,CAAC,EAAE,EAAE,CAAC;oBAChB,OAAO,CAAC,EAAE,GAAG,SAAS,CAAC;gBACzB,CAAC;gBACD,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,kBAAkB,CAAC,EAAE,CAAC;oBACpD,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;gBAC5C,CAAC;YACH,CAAC;YACD,sBAAsB,CAAC,OAAO,CAAC,CAAC;YAEhC,MAAM,UAAU,GAAG;gBACjB,GAAG,2BAA2B;gBAC9B,GAAG,YAAY;gBACf,MAAM,EAAE,YAAY,CAAC,MAAM,IAAI,EAAE;aACN,CAAC;YAC9B,YAAY,GAAG,UAAU,CAAC;YAE1B,QAAQ,GAAG,IAAI,YAAY,CAAC;gBAC1B,GAAI,UAAgC;gBACpC,QAAQ,EAAE,IAAI,SAAS,EAAE;gBACzB,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC;gBACzB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAqC,CAAC;gBAC/F,cAAc,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE,EAAE,YAAY,EAAE,CAAC,EAAE,MAAM,EAA2C,CAAC;aACtE,CAAC,CAAC;YACjC,QAAQ,CAAC,IAAI,EAAE,CAAC;QAClB,CAAC,CAAC;QAEF,MAAM,EAAE,CAAC;QAET,OAAO;YACL,OAAO;gBACL,QAAQ,EAAE,OAAO,EAAE,EAAE,CAAC;gBACtB,IAAI,CAAC,eAAe,EAAE,CAAC;oBACrB,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;gBACtB,CAAC;YACH,CAAC;YACD,WAAW,CAAC,OAAO;gBACjB,YAAY,GAAG,EAAE,GAAG,2BAA2B,EAAE,GAAG,YAAY,EAAE,GAAG,CAAC,OAAO,IAAI,EAAE,CAAC,EAAE,CAAC;gBACvF,MAAM,EAAE,CAAC;YACX,CAAC;SACF,CAAC;IACJ,CAAC;IACD,cAAc,CAAC,KAAK;QAClB,MAAM,MAAM,GAAG,EAAE,GAAG,2BAA2B,EAAE,GAAG,KAAK,EAA8B,CAAC;QACxF,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,IAAI,EAAE,CAAC;QACnC,MAAM,QAAQ,GACZ,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;YAC1B,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;gBAC9B,OAAO,qEAAqE,KAAK,gFAAgF,KAAK,+DAA+D,KAAK,UAAU,MAAM,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,sDAAsD,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC;YACpW,CAAC;YACD,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC;YACzC,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,KAAK,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,sDAAsD,KAAK,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;YAC1I,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,sDAAsD,KAAK,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;YAC3H,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,kEAAkE,KAAK,CAAC,WAAW,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;YAC1I,OAAO,qEAAqE,KAAK,gFAAgF,KAAK,CAAC,KAAK,+DAA+D,KAAK,UAAU,KAAK,GAAG,KAAK,GAAG,WAAW,OAAO,CAAC;QAC/R,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC;QACpB,OAAO,8BAA8B,MAAM,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,EAAE,mDAAmD,QAAQ,OAAO,CAAC;IACzK,CAAC;CACF,CAAC;AAEF,MAAM,UAAU,2BAA2B;IACzC,OAAO,sBAAsB,CAAoB;QAC/C,GAAG,EAAE,kBAAkB;QACvB,SAAS,EAAE,qBAAqB;QAChC,KAAK,EAAE,8BAA8B;QACrC,YAAY,EAAE,2BAA2B;QACzC,MAAM,EAAE,KAAK;QACb,MAAM,EAAE,CAAC,QAAQ,EAAE,cAAc,CAAC;QAClC,gBAAgB,EAAE,IAAI;KACvB,CAAC,CAAC;AACL,CAAC"}

package/dist/components/web-components/color-picker.d.ts

@@ -0,0 +1,8 @@
+import type { ColorPickerOptions } from "../ColorPicker/ColorPicker.types.js";
+export interface ColorPickerProps extends Omit<ColorPickerOptions, "selector" | "onChange">, Record<string, unknown> {
+}
+export interface ColorPickerChangeDetail {
+    value: string | null;
+}
+export declare function registerColorPickerElement(): CustomElementConstructor | undefined;
+//# sourceMappingURL=color-picker.d.ts.map

package/dist/components/web-components/color-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.d.ts","sourceRoot":"","sources":["../../../components/web-components/color-picker.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAI9E,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,kBAAkB,EAAE,UAAU,GAAG,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;CAAG;AAEvH,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAmID,wBAAgB,0BAA0B,IAAI,wBAAwB,GAAG,SAAS,CAUjF"}

package/dist/components/web-components/color-picker.js

@@ -0,0 +1,130 @@
+import { ColorPicker } from "../ColorPicker/ColorPicker.js";
+import { defineComponentElement } from "../../src/runtime/component-element.js";
+import { shouldUseDomValue } from "./utils/hydration.js";
+const DEFAULT_COLOR_PICKER_PROPS = {
+    value: undefined,
+    palette: undefined,
+    showInput: true,
+    allowClear: false,
+    disabled: false,
+    theme: undefined,
+};
+const COLOR_PICKER_PROP_DEFINITIONS = [
+    { attribute: "value", prop: "value" },
+    { attribute: "palette", prop: "palette", type: "json" },
+    { attribute: "show-input", prop: "showInput", type: "boolean" },
+    { attribute: "allow-clear", prop: "allowClear", type: "boolean" },
+    { attribute: "disabled", prop: "disabled", type: "boolean" },
+    { attribute: "theme", prop: "theme" },
+];
+let colorPickerId = 0;
+const applyColorPickerParts = (wrapper) => {
+    const root = wrapper.matches?.(".ce-color-picker") ? wrapper : wrapper.querySelector(".ce-color-picker");
+    if (!root) {
+        return;
+    }
+    root.setAttribute("data-ce-component", "color-picker");
+    root.setAttribute("part", "base");
+    root.querySelectorAll(".ce-color-picker__swatches").forEach((node) => node.setAttribute("part", "swatches"));
+    root.querySelectorAll(".ce-color-picker__swatch").forEach((node) => node.setAttribute("part", "swatch"));
+    root.querySelectorAll(".ce-color-picker__controls").forEach((node) => node.setAttribute("part", "controls"));
+    root.querySelectorAll(".ce-color-picker__input").forEach((node) => node.setAttribute("part", "input"));
+    root.querySelectorAll(".ce-color-picker__hex").forEach((node) => node.setAttribute("part", "hex"));
+    root.querySelectorAll(".ce-color-picker__clear").forEach((node) => node.setAttribute("part", "clear"));
+};
+const parseColorPickerPalette = (wrapper) => {
+    if (!wrapper) {
+        return [];
+    }
+    const swatches = Array.from(wrapper.querySelectorAll(".ce-color-picker__swatch"));
+    return swatches.map((swatch) => swatch.getAttribute("title") ?? "");
+};
+const colorPickerComponent = {
+    mount({ target, props, on }) {
+        const host = target;
+        const existingWrapper = host.querySelector(".ce-color-picker");
+        const elementId = existingWrapper?.id || `ce-color-picker-${++colorPickerId}`;
+        let wrapper = existingWrapper ?? undefined;
+        let currentProps = { ...DEFAULT_COLOR_PICKER_PROPS, ...props };
+        if (existingWrapper) {
+            const dataValue = existingWrapper.getAttribute("data-value");
+            if (shouldUseDomValue(host, "value", dataValue)) {
+                currentProps.value = dataValue ?? undefined;
+            }
+            const parsedPalette = parseColorPickerPalette(existingWrapper);
+            if (shouldUseDomValue(host, "palette", parsedPalette)) {
+                currentProps.palette = parsedPalette;
+            }
+            if (shouldUseDomValue(host, "theme", existingWrapper.classList.contains("ce-color-picker--dark") ? "dark" : "light")) {
+                currentProps.theme = existingWrapper.classList.contains("ce-color-picker--dark") ? "dark" : "light";
+            }
+            if (shouldUseDomValue(host, "disabled", existingWrapper.classList.contains("ce-color-picker--disabled"))) {
+                currentProps.disabled = existingWrapper.classList.contains("ce-color-picker--disabled");
+            }
+        }
+        let instance;
+        const render = () => {
+            if (!wrapper) {
+                host.innerHTML = "";
+                wrapper = document.createElement("div");
+                wrapper.id = elementId;
+                host.appendChild(wrapper);
+            }
+            else {
+                if (!wrapper.id) {
+                    wrapper.id = elementId;
+                }
+                if (!wrapper.classList.contains("ce-color-picker")) {
+                    wrapper.classList.add("ce-color-picker");
+                }
+            }
+            instance = new ColorPicker({
+                ...currentProps,
+                selector: `#${elementId}`,
+                hydrate: Boolean(wrapper),
+                onChange: (value) => on?.change?.({ value }),
+            });
+            instance.init();
+            applyColorPickerParts(wrapper);
+        };
+        render();
+        return {
+            destroy() {
+                instance?.destroy?.();
+                if (!existingWrapper) {
+                    host.innerHTML = "";
+                }
+            },
+            updateProps(partial) {
+                currentProps = { ...currentProps, ...(partial ?? {}) };
+                render();
+            },
+        };
+    },
+    renderToString(props) {
+        const merged = { ...DEFAULT_COLOR_PICKER_PROPS, ...props };
+        const palette = merged.palette?.length ? merged.palette : ["#2563eb", "#22c55e", "#f97316", "#ef4444"];
+        const swatches = palette
+            .map((color) => `<button type="button" class="ce-color-picker__swatch" part="swatch" title="${color}" style="background-color: ${color};"></button>`)
+            .join("");
+        const controls = merged.showInput === false
+            ? ""
+            : `<div class="ce-color-picker__controls" part="controls"><input class="ce-color-picker__input" part="input" type="color" value="${merged.value ?? ""}"><input class="ce-color-picker__hex" part="hex" type="text" placeholder="#000000" value="${merged.value ?? ""}">${merged.allowClear ? `<button type="button" class="ce-color-picker__clear" part="clear">Clear</button>` : ""}</div>`;
+        const classes = ["ce-color-picker", merged.theme === "dark" ? "ce-color-picker--dark" : null, merged.disabled ? "ce-color-picker--disabled" : null]
+            .filter(Boolean)
+            .join(" ");
+        return `<div class="${classes}" data-ce-component="color-picker" part="base" data-value="${merged.value ?? ""}"><div class="ce-color-picker__swatches" part="swatches">${swatches}</div>${controls}</div>`;
+    },
+};
+export function registerColorPickerElement() {
+    return defineComponentElement({
+        tag: "ce-color-picker",
+        component: colorPickerComponent,
+        props: COLOR_PICKER_PROP_DEFINITIONS,
+        defaultProps: DEFAULT_COLOR_PICKER_PROPS,
+        shadow: false,
+        events: ["change"],
+        preserveLightDom: true,
+    });
+}
+//# sourceMappingURL=color-picker.js.map

package/dist/components/web-components/color-picker.js.map

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

package/dist/components/web-components/combobox.d.ts

@@ -0,0 +1,9 @@
+import type { ComboBoxOption, ComboBoxOptions } from "../ComboBox/ComboBox.types.js";
+export interface ComboBoxProps extends Omit<ComboBoxOptions, "selector" | "onSelect">, Record<string, unknown> {
+    options: ComboBoxOption[];
+}
+export interface ComboBoxSelectDetail {
+    option: ComboBoxOption;
+}
+export declare function registerComboBoxElement(): CustomElementConstructor | undefined;
+//# sourceMappingURL=combobox.d.ts.map

package/dist/components/web-components/combobox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../components/web-components/combobox.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAIrF,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC5G,OAAO,EAAE,cAAc,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,cAAc,CAAC;CACxB;AAqHD,wBAAgB,uBAAuB,IAAI,wBAAwB,GAAG,SAAS,CAW9E"}