@pathscale/ui 0.1.0 → 1.2.0

package/dist/components/tooltip/Tooltip.css

@@ -0,0 +1,161 @@
+@layer components {
+  /* -------------------------------------------------------------------------------------------------
+   * Root
+   * -----------------------------------------------------------------------------------------------*/
+  .tooltip {
+    position: relative;
+    display: inline-flex;
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Trigger
+   * -----------------------------------------------------------------------------------------------*/
+  .tooltip__trigger {
+    display: inline-flex;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .tooltip__trigger:focus-visible,
+  .tooltip__trigger[data-focus-visible="true"] {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+    border-radius: var(--radius-field, 0.375rem);
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Content
+   * -----------------------------------------------------------------------------------------------*/
+  .tooltip__content {
+    position: absolute;
+    z-index: 9999;
+    max-width: 20rem;
+    border-radius: var(--radius-field, 0.5rem);
+    padding: 0.25rem 0.5rem;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    white-space: normal;
+    word-break: break-word;
+    text-align: center;
+    width: max-content;
+    pointer-events: none;
+    background-color: var(--color-neutral);
+    color: var(--color-neutral-content);
+    box-shadow:
+      0 4px 6px -1px oklch(0% 0 0 / 0.1),
+      0 2px 4px -2px oklch(0% 0 0 / 0.1);
+
+    opacity: 0;
+    overflow: visible;
+    transition:
+      opacity 150ms ease,
+      transform 150ms ease;
+  }
+
+  /* Visible state */
+  .tooltip__content[data-open="true"] {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  /* ----- Placement: top (default) ----- */
+  .tooltip__content[data-placement="top"] {
+    bottom: calc(100% + 0.75rem);
+    left: 50%;
+    transform: translateX(-50%) translateY(0.25rem);
+  }
+
+  .tooltip__content[data-placement="top"][data-open="true"] {
+    transform: translateX(-50%) translateY(0);
+  }
+
+  /* ----- Placement: bottom ----- */
+  .tooltip__content[data-placement="bottom"] {
+    top: calc(100% + 0.75rem);
+    left: 50%;
+    transform: translateX(-50%) translateY(-0.25rem);
+  }
+
+  .tooltip__content[data-placement="bottom"][data-open="true"] {
+    transform: translateX(-50%) translateY(0);
+  }
+
+  /* ----- Placement: left ----- */
+  .tooltip__content[data-placement="left"] {
+    right: calc(100% + 0.75rem);
+    top: 50%;
+    transform: translateX(0.25rem) translateY(-50%);
+  }
+
+  .tooltip__content[data-placement="left"][data-open="true"] {
+    transform: translateX(0) translateY(-50%);
+  }
+
+  /* ----- Placement: right ----- */
+  .tooltip__content[data-placement="right"] {
+    left: calc(100% + 0.75rem);
+    top: 50%;
+    transform: translateX(-0.25rem) translateY(-50%);
+  }
+
+  .tooltip__content[data-placement="right"][data-open="true"] {
+    transform: translateX(0) translateY(-50%);
+  }
+
+  /* ----- Reduced motion ----- */
+  @media (prefers-reduced-motion: reduce) {
+    .tooltip__content {
+      transition: none;
+    }
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Arrow
+   * Arrow lives inside .tooltip__content, so it positions relative to the content bubble.
+   * The default SVG (viewBox 0 0 12 12, path "M0 0C5.48483 8 6.5 8 12 0Z") points downward.
+   * -----------------------------------------------------------------------------------------------*/
+  .tooltip__arrow {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+    color: var(--color-neutral);
+  }
+
+  /* Arrow placement: top → content is above trigger, arrow hangs below content pointing down */
+  .tooltip__arrow[data-placement="top"] {
+    top: calc(100% - 1px);
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  /* Arrow placement: bottom → content is below trigger, arrow sits above content pointing up */
+  .tooltip__arrow[data-placement="bottom"] {
+    bottom: calc(100% - 1px);
+    left: 50%;
+    transform: translateX(-50%) rotate(180deg);
+  }
+
+  /* Arrow placement: left → content is left of trigger, arrow at right edge pointing right */
+  .tooltip__arrow[data-placement="left"] {
+    left: calc(100% - 1px);
+    top: 50%;
+    transform: translateY(-50%) rotate(-90deg);
+  }
+
+  /* Arrow placement: right → content is right of trigger, arrow at left edge pointing left */
+  .tooltip__arrow[data-placement="right"] {
+    right: calc(100% - 1px);
+    top: 50%;
+    transform: translateY(-50%) rotate(90deg);
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Disabled state
+   * -----------------------------------------------------------------------------------------------*/
+  .tooltip[data-disabled="true"] .tooltip__trigger {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+}

package/dist/components/tooltip/Tooltip.d.ts

@@ -0,0 +1,35 @@
+import "./Tooltip.css";
+import { type Component, type JSX, type ParentComponent } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type TooltipPlacement = "top" | "bottom" | "left" | "right";
+export type TooltipRootProps = IComponentBaseProps & {
+    children: JSX.Element;
+    placement?: TooltipPlacement;
+    showArrow?: boolean;
+    delay?: number;
+    closeDelay?: number;
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+};
+export type TooltipTriggerProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children: JSX.Element;
+};
+export type TooltipContentProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children: JSX.Element;
+};
+export type TooltipArrowProps = JSX.HTMLAttributes<HTMLSpanElement> & IComponentBaseProps & {
+    children?: JSX.Element;
+};
+declare const TooltipRoot: ParentComponent<TooltipRootProps>;
+declare const TooltipTrigger: Component<TooltipTriggerProps>;
+declare const TooltipContent: Component<TooltipContentProps>;
+declare const TooltipArrow: Component<TooltipArrowProps>;
+declare const Tooltip: ParentComponent<TooltipRootProps> & {
+    Root: ParentComponent<TooltipRootProps>;
+    Trigger: Component<TooltipTriggerProps>;
+    Content: Component<TooltipContentProps>;
+    Arrow: Component<TooltipArrowProps>;
+};
+export default Tooltip;
+export { TooltipRoot, TooltipTrigger, TooltipContent, TooltipArrow };

package/dist/components/tooltip/Tooltip.js

@@ -0,0 +1,204 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./Tooltip.css";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span data-slot=tooltip-root>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<svg aria-hidden=true data-slot=tooltip-arrow-svg height=12 viewBox="0 0 12 12"width=12 xmlns=http://www.w3.org/2000/svg><path d="M0 0C5.48483 8 6.5 8 12 0Z"fill=currentColor>'), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>");
+const TooltipContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
+const useTooltipContext = ()=>{
+    const ctx = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(TooltipContext);
+    if (!ctx) throw new Error("Tooltip compound components must be used within <Tooltip>");
+    return ctx;
+};
+const TooltipRoot = (props)=>{
+    const [local, _others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "placement",
+        "showArrow",
+        "delay",
+        "closeDelay",
+        "isOpen",
+        "defaultOpen",
+        "onOpenChange",
+        "dataTheme",
+        "class",
+        "className",
+        "style"
+    ]);
+    const [internalOpen, setInternalOpen] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(Boolean(local.defaultOpen));
+    const [triggerRef, setTriggerRef] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)();
+    const isControlled = ()=>void 0 !== local.isOpen;
+    const isOpen = ()=>isControlled() ? Boolean(local.isOpen) : internalOpen();
+    const setIsOpen = (v)=>{
+        if (!isControlled()) setInternalOpen(v);
+        local.onOpenChange?.(v);
+    };
+    const ctx = {
+        isOpen,
+        setIsOpen,
+        placement: ()=>local.placement ?? "top",
+        showArrow: ()=>Boolean(local.showArrow),
+        triggerRef,
+        setTriggerRef
+    };
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(TooltipContext.Provider, {
+        value: ctx,
+        get children () {
+            var _el$ = _tmpl$();
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+                var _v$ = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("tooltip", local.class, local.className), _v$2 = local.dataTheme, _v$3 = local.style;
+                _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, _p$.e = _v$);
+                _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "data-theme", _p$.t = _v$2);
+                _p$.a = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.style)(_el$, _v$3, _p$.a);
+                return _p$;
+            }, {
+                e: void 0,
+                t: void 0,
+                a: void 0
+            });
+            return _el$;
+        }
+    });
+};
+const TooltipTrigger = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "onMouseEnter",
+        "onMouseLeave",
+        "onFocusIn",
+        "onFocusOut"
+    ]);
+    const ctx = useTooltipContext();
+    let delayTimer;
+    let closeTimer;
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+        clearTimeout(delayTimer);
+        clearTimeout(closeTimer);
+    });
+    const handleMouseEnter = (e)=>{
+        clearTimeout(closeTimer);
+        ctx.setIsOpen(true);
+        if ("function" == typeof local.onMouseEnter) local.onMouseEnter(e);
+    };
+    const handleMouseLeave = (e)=>{
+        closeTimer = setTimeout(()=>ctx.setIsOpen(false), 100);
+        if ("function" == typeof local.onMouseLeave) local.onMouseLeave(e);
+    };
+    const handleFocusIn = (e)=>{
+        clearTimeout(closeTimer);
+        ctx.setIsOpen(true);
+        if ("function" == typeof local.onFocusIn) local.onFocusIn(e);
+    };
+    const handleFocusOut = (e)=>{
+        ctx.setIsOpen(false);
+        if ("function" == typeof local.onFocusOut) local.onFocusOut(e);
+    };
+    return (()=>{
+        var _el$2 = _tmpl$2();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)((el)=>ctx.setTriggerRef(el), _el$2);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("tooltip__trigger", local.class, local.className);
+            },
+            "data-slot": "tooltip-trigger",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            },
+            onMouseEnter: handleMouseEnter,
+            onMouseLeave: handleMouseLeave,
+            onFocusIn: handleFocusIn,
+            onFocusOut: handleFocusOut
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.children);
+        return _el$2;
+    })();
+};
+const TooltipContent = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    const ctx = useTooltipContext();
+    return (()=>{
+        var _el$3 = _tmpl$2();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            role: "tooltip",
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("tooltip__content", local.class, local.className);
+            },
+            "data-slot": "tooltip-content",
+            get ["data-placement"] () {
+                return ctx.placement();
+            },
+            get ["data-open"] () {
+                return ctx.isOpen() ? "true" : "false";
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.children);
+        return _el$3;
+    })();
+};
+const TooltipArrow = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    const ctx = useTooltipContext();
+    const defaultArrow = _tmpl$3();
+    return (()=>{
+        var _el$5 = _tmpl$4();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("tooltip__arrow", local.class, local.className);
+            },
+            "data-slot": "tooltip-arrow",
+            get ["data-placement"] () {
+                return ctx.placement();
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            },
+            "aria-hidden": "true"
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+            get when () {
+                return local.children;
+            },
+            fallback: defaultArrow,
+            get children () {
+                return local.children;
+            }
+        }));
+        return _el$5;
+    })();
+};
+const Tooltip_Tooltip = Object.assign(TooltipRoot, {
+    Root: TooltipRoot,
+    Trigger: TooltipTrigger,
+    Content: TooltipContent,
+    Arrow: TooltipArrow
+});
+const Tooltip = Tooltip_Tooltip;
+export { TooltipArrow, TooltipContent, TooltipRoot, TooltipTrigger, Tooltip as default };

package/dist/components/tooltip/index.d.ts

@@ -0,0 +1 @@
+export { default, TooltipRoot, TooltipTrigger, TooltipContent, TooltipArrow, type TooltipPlacement, type TooltipRootProps, type TooltipTriggerProps, type TooltipContentProps, type TooltipArrowProps, } from "./Tooltip";

package/dist/components/tooltip/index.js

@@ -0,0 +1,7 @@
+import * as __WEBPACK_EXTERNAL_MODULE__Tooltip_js_5e198f9c__ from "./Tooltip.js";
+var __webpack_exports__TooltipArrow = __WEBPACK_EXTERNAL_MODULE__Tooltip_js_5e198f9c__.TooltipArrow;
+var __webpack_exports__TooltipContent = __WEBPACK_EXTERNAL_MODULE__Tooltip_js_5e198f9c__.TooltipContent;
+var __webpack_exports__TooltipRoot = __WEBPACK_EXTERNAL_MODULE__Tooltip_js_5e198f9c__.TooltipRoot;
+var __webpack_exports__TooltipTrigger = __WEBPACK_EXTERNAL_MODULE__Tooltip_js_5e198f9c__.TooltipTrigger;
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Tooltip_js_5e198f9c__["default"];
+export { __webpack_exports__TooltipArrow as TooltipArrow, __webpack_exports__TooltipContent as TooltipContent, __webpack_exports__TooltipRoot as TooltipRoot, __webpack_exports__TooltipTrigger as TooltipTrigger, __webpack_exports__default as default };

package/dist/components/types.d.ts

@@ -0,0 +1,15 @@
+import type { JSX } from "solid-js";
+export interface IComponentBaseProps {
+    dataTheme?: string;
+    class?: string;
+    className?: string;
+    style?: JSX.CSSProperties;
+}
+export type ResponsiveBreakpoints = "base" | "sm" | "md" | "lg" | "xl";
+export type ResponsiveProp<T> = T | Partial<Record<ResponsiveBreakpoints, T>>;
+export declare const breakpoints: readonly ["base", "sm", "md", "lg", "xl"];
+export type ComponentSize = "xs" | "sm" | "md" | "lg" | "xl";
+export type ComponentShape = "circle" | "square" | "rounded";
+export type ComponentColor = "neutral" | "primary" | "secondary" | "accent" | "info" | "success" | "warning" | "error" | "ghost";
+export type ComponentVariant = "soft" | "dash" | "outline" | "filled" | "ghost" | "outlined";
+export type ComponentPosition = "top" | "bottom" | "left" | "right";

package/dist/components/types.js

@@ -0,0 +1,8 @@
+const breakpoints = [
+    "base",
+    "sm",
+    "md",
+    "lg",
+    "xl"
+];
+export { breakpoints };

package/dist/components/utils.d.ts

@@ -0,0 +1,9 @@
+import { type JSX } from "solid-js";
+import type { ResponsiveProp } from "./types";
+export declare function wrapWithElementIfInvalid({ node, wrapper, className, }: {
+    node: JSX.Element | string | number | null | undefined;
+    wrapper?: keyof JSX.IntrinsicElements;
+    className?: string;
+}): JSX.Element;
+export declare function mapResponsiveProp<T extends string | boolean>(prop: ResponsiveProp<T> | undefined, classMap: Record<string, string>): string[];
+export declare function useDesktop(breakpoint?: number): import("solid-js").Accessor<boolean>;

package/dist/components/utils.js

@@ -0,0 +1,46 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE__types_js_7eec16d2__ from "./types.js";
+function isJSXElement(node) {
+    return "object" == typeof node && null !== node;
+}
+function wrapWithElementIfInvalid({ node, wrapper = "div", className = "" }) {
+    null == node || "string" == typeof node || "number" == typeof node || isJSXElement(node);
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Dynamic, {
+        component: wrapper,
+        class: className,
+        children: node
+    });
+}
+function mapResponsiveProp(prop, classMap) {
+    if (void 0 === prop) return [];
+    if ("string" == typeof prop || "boolean" == typeof prop) return [
+        classMap[String(prop)]
+    ];
+    return __WEBPACK_EXTERNAL_MODULE__types_js_7eec16d2__.breakpoints.flatMap((bp)=>{
+        const value = prop[bp];
+        if (void 0 === value) return [];
+        const className = classMap[String(value)];
+        return "base" === bp ? [
+            className
+        ] : [
+            `${bp}:${className}`
+        ];
+    });
+}
+function useDesktop(breakpoint = 1024) {
+    const [isDesktop, setIsDesktop] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    const checkIfDesktop = ()=>{
+        const width = window.innerWidth;
+        setIsDesktop(width >= breakpoint);
+    };
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
+        checkIfDesktop();
+        window.addEventListener("resize", checkIfDesktop);
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+        window.removeEventListener("resize", checkIfDesktop);
+    });
+    return isDesktop;
+}
+export { mapResponsiveProp, useDesktop, wrapWithElementIfInvalid };

package/dist/components/video-preview/VideoPreview.d.ts

@@ -0,0 +1,21 @@
+import { type Accessor, type Component, type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+type VideoPreviewBaseProps = {
+    /**
+     * Reactive accessor for the MediaStream to display
+     */
+    stream: Accessor<MediaStream | null>;
+    /**
+     * Whether the video should be muted
+     * @default true
+     */
+    muted?: boolean;
+    /**
+     * Whether to mirror the video (applies scaleX(-1))
+     * @default false
+     */
+    mirror?: boolean;
+};
+export type VideoPreviewProps = VideoPreviewBaseProps & IComponentBaseProps & Omit<JSX.VideoHTMLAttributes<HTMLVideoElement>, keyof VideoPreviewBaseProps>;
+export declare const VideoPreview: Component<VideoPreviewProps>;
+export default VideoPreview;

package/dist/components/video-preview/VideoPreview.js

@@ -0,0 +1,55 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<video>");
+const VideoPreview = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "stream",
+        "muted",
+        "mirror",
+        "dataTheme",
+        "class",
+        "className",
+        "style"
+    ]);
+    const muted = ()=>local.muted ?? true;
+    const mirror = ()=>local.mirror ?? false;
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+        get when () {
+            return local.stream();
+        },
+        children: (stream)=>{
+            let videoRef;
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+                videoRef.srcObject = stream();
+            });
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+                videoRef.srcObject = null;
+            });
+            return (()=>{
+                var _el$ = _tmpl$();
+                var _ref$ = videoRef;
+                "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : videoRef = _el$;
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+                    autoplay: true,
+                    playsinline: true,
+                    get muted () {
+                        return muted();
+                    },
+                    get ["data-theme"] () {
+                        return local.dataTheme;
+                    },
+                    get ["class"] () {
+                        return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(mirror() && "-scale-x-100", local.class, local.className);
+                    },
+                    get style () {
+                        return local.style;
+                    }
+                }), false, false);
+                return _el$;
+            })();
+        }
+    });
+};
+const video_preview_VideoPreview = VideoPreview;
+export { VideoPreview, video_preview_VideoPreview as default };

package/dist/components/video-preview/index.d.ts

@@ -0,0 +1,2 @@
+export { default as VideoPreview } from "./VideoPreview";
+export type { VideoPreviewProps } from "./VideoPreview";

package/dist/components/video-preview/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__VideoPreview_js_8a695d89__ from "./VideoPreview.js";
+var __webpack_exports__VideoPreview = __WEBPACK_EXTERNAL_MODULE__VideoPreview_js_8a695d89__["default"];
+export { __webpack_exports__VideoPreview as VideoPreview };

package/dist/components/windowmockup/WindowMockup.d.ts

@@ -0,0 +1,11 @@
+import { type ParentComponent, type JSX } from "solid-js";
+import type { IComponentBaseProps, ComponentColor } from "../types";
+export type WindowMockupColors = Exclude<ComponentColor, "ghost">;
+export type WindowMockupProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps & {
+    frameColor?: WindowMockupColors;
+    backgroundColor?: WindowMockupColors;
+    border?: boolean;
+    borderColor?: WindowMockupColors;
+};
+declare const WindowMockup: ParentComponent<WindowMockupProps>;
+export default WindowMockup;