@pathscale/ui 0.1.0 → 1.2.0

package/dist/components/modal/modal.css

@@ -0,0 +1,170 @@
+@layer components {
+  .modal {
+      pointer-events: none;
+      visibility: hidden;
+      position: fixed;
+      inset: calc(0.25rem * 0);
+      margin: calc(0.25rem * 0);
+      display: grid;
+      height: 100%;
+      max-height: none;
+      width: 100%;
+      max-width: none;
+      align-items: center;
+      justify-items: center;
+      background-color: transparent;
+      padding: calc(0.25rem * 0);
+      color: inherit;
+      transition: visibility 0.3s allow-discrete, background-color 0.3s ease-out, opacity 0.1s ease-out;
+      overflow: clip;
+      overscroll-behavior: contain;
+      z-index: 999;
+      scrollbar-gutter: auto;
+    }
+
+  .modal::backdrop {
+      display: none;
+    }
+
+  .modal.modal-open,
+    .modal[open],
+    .modal:target,
+    .modal-toggle:checked + .modal {
+      pointer-events: auto;
+      visibility: visible;
+      opacity: 100%;
+      transition: visibility 0s allow-discrete, background-color 0.3s ease-out, opacity 0.1s ease-out;
+      background-color: oklch(0% 0 0/ 0.4);
+    }
+
+  .modal.modal-open .modal-box,
+    .modal[open] .modal-box,
+    .modal:target .modal-box,
+    .modal-toggle:checked + .modal .modal-box {
+      translate: 0 0;
+      scale: 1;
+      opacity: 1;
+    }
+
+  :root:has(.modal.modal-open),
+    :root:has(.modal[open]),
+    :root:has(.modal:target),
+    :root:has(.modal-toggle:checked + .modal) {
+      --page-has-backdrop: 1;
+      --page-overflow: hidden;
+      --page-scroll-bg: var(--page-scroll-bg-on);
+      --page-scroll-gutter: stable;
+      --page-scroll-transition: var(--page-scroll-transition-on);
+      animation: set-page-has-scroll forwards;
+      animation-timeline: scroll();
+    }
+
+  @starting-style {
+    .modal.modal-open,
+    .modal[open],
+    .modal:target,
+    .modal-toggle:checked + .modal {
+      opacity: 0%;
+    }
+    }
+
+  .modal-toggle {
+      position: fixed;
+      height: calc(0.25rem * 0);
+      width: calc(0.25rem * 0);
+      appearance: none;
+      opacity: 0%;
+    }
+
+  .modal-backdrop {
+      grid-column-start: 1;
+      grid-row-start: 1;
+      display: grid;
+      align-self: stretch;
+      justify-self: stretch;
+      color: transparent;
+      z-index: -1;
+    }
+
+  .modal-backdrop button {
+      cursor: pointer;
+    }
+
+  .modal-box {
+      grid-column-start: 1;
+      grid-row-start: 1;
+      max-height: 100vh;
+      width: calc(11/12 * 100%);
+      max-width: 32rem;
+      background-color: var(--color-base-100);
+      padding: calc(0.25rem * 6);
+      transition: translate 0.3s ease-out, scale 0.3s ease-out, opacity 0.2s ease-out 0.05s, box-shadow 0.3s ease-out;
+      border-top-left-radius: var(--modal-tl, var(--radius-box));
+      border-top-right-radius: var(--modal-tr, var(--radius-box));
+      border-bottom-left-radius: var(--modal-bl, var(--radius-box));
+      border-bottom-right-radius: var(--modal-br, var(--radius-box));
+      scale: 95%;
+      opacity: 0;
+      box-shadow: oklch(0% 0 0/ 0.25) 0px 25px 50px -12px;
+      overflow-y: auto;
+      overscroll-behavior: contain;
+    }
+
+  .modal-action {
+      margin-top: calc(0.25rem * 6);
+      display: flex;
+      justify-content: flex-end;
+      gap: calc(0.25rem * 2);
+    }
+
+  .modal-bottom {
+      place-items: end;
+    }
+
+  .modal-bottom .modal-box {
+      height: auto;
+      width: 100%;
+      max-width: none;
+      max-height: calc(100vh - 5em);
+      translate: 0 100%;
+      scale: 1;
+      --modal-tl: var(--radius-box);
+      --modal-tr: var(--radius-box);
+      --modal-bl: 0;
+      --modal-br: 0;
+    }
+
+  .modal-middle {
+      place-items: center;
+    }
+
+  .modal-middle .modal-box {
+      height: auto;
+      width: calc(11/12 * 100%);
+      max-width: 32rem;
+      max-height: calc(100vh - 5em);
+      translate: 0 2%;
+      scale: 98%;
+      --modal-tl: var(--radius-box);
+      --modal-tr: var(--radius-box);
+      --modal-bl: var(--radius-box);
+      --modal-br: var(--radius-box);
+    }
+
+  .modal-top {
+      place-items: start;
+    }
+
+  .modal-top .modal-box {
+      height: auto;
+      width: 100%;
+      max-width: none;
+      max-height: calc(100vh - 5em);
+      translate: 0 -100%;
+      scale: 1;
+      --modal-tl: 0;
+      --modal-tr: 0;
+      --modal-bl: var(--radius-box);
+      --modal-br: var(--radius-box);
+    }
+}

package/dist/components/navbar/Navbar.d.ts

@@ -0,0 +1,16 @@
+import "./navbar.css";
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type NavbarProps = JSX.HTMLAttributes<HTMLElement> & IComponentBaseProps & {
+    as?: keyof JSX.IntrinsicElements;
+    dataTheme?: string;
+    className?: string;
+};
+declare const _default: ((props: NavbarProps) => JSX.Element) & {
+    Start: (props: JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+    Center: (props: JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+    End: (props: JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+    Stack: (props: import("./NavbarStack").NavbarStackProps) => JSX.Element;
+    Row: (props: import("./NavbarRow").NavbarRowProps) => JSX.Element;
+};
+export default _default;

package/dist/components/navbar/Navbar.js

@@ -0,0 +1,54 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./navbar.css";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE__NavbarSection_js_c2bbb2b2__ from "./NavbarSection.js";
+import * as __WEBPACK_EXTERNAL_MODULE__NavbarStack_js_59d9b581__ from "./NavbarStack.js";
+import * as __WEBPACK_EXTERNAL_MODULE__NavbarRow_js_2f1ed444__ from "./NavbarRow.js";
+const Navbar = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "as",
+        "class",
+        "className",
+        "style",
+        "children",
+        "dataTheme"
+    ]);
+    const Tag = local.as || "div";
+    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("navbar", local.class, local.className);
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Dynamic, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+        component: Tag,
+        role: "navigation",
+        "aria-label": "Navbar"
+    }, others, {
+        get ["data-theme"] () {
+            return local.dataTheme;
+        },
+        get ["class"] () {
+            return classes();
+        },
+        get style () {
+            return local.style;
+        },
+        get children () {
+            return local.children;
+        }
+    }));
+};
+const NavbarStart = (props)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__NavbarSection_js_c2bbb2b2__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+        section: "start"
+    }, props));
+const NavbarCenter = (props)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__NavbarSection_js_c2bbb2b2__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+        section: "center"
+    }, props));
+const NavbarEnd = (props)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__NavbarSection_js_c2bbb2b2__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+        section: "end"
+    }, props));
+const navbar_Navbar = Object.assign(Navbar, {
+    Start: NavbarStart,
+    Center: NavbarCenter,
+    End: NavbarEnd,
+    Stack: __WEBPACK_EXTERNAL_MODULE__NavbarStack_js_59d9b581__["default"],
+    Row: __WEBPACK_EXTERNAL_MODULE__NavbarRow_js_2f1ed444__["default"]
+});
+export { navbar_Navbar as default };

package/dist/components/navbar/NavbarRow.d.ts

@@ -0,0 +1,9 @@
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps, ComponentColor } from "../types";
+export type NavbarRowProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps & {
+    bordered?: boolean;
+    padded?: boolean;
+    color?: ComponentColor;
+};
+declare const NavbarRow: (props: NavbarRowProps) => JSX.Element;
+export default NavbarRow;

package/dist/components/navbar/NavbarRow.js

@@ -0,0 +1,49 @@
+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";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+const NavbarRow = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "bordered",
+        "padded",
+        "color",
+        "class",
+        "className",
+        "style",
+        "dataTheme"
+    ]);
+    const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("flex items-center", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+            "border-b border-gray-200": true === local.bordered,
+            "px-4 py-2": false !== local.padded,
+            "bg-base-100": !local.color || "ghost" === local.color,
+            "bg-neutral text-neutral-content": "neutral" === local.color,
+            "bg-primary text-primary-content": "primary" === local.color,
+            "bg-secondary text-secondary-content": "secondary" === local.color,
+            "bg-accent text-accent-content": "accent" === local.color,
+            "bg-info text-info-content": "info" === local.color,
+            "bg-success text-success-content": "success" === local.color,
+            "bg-warning text-warning-content": "warning" === local.color,
+            "bg-error text-error-content": "error" === local.color
+        }), local.class, local.className));
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+            get ["class"] () {
+                return classes();
+            },
+            get style () {
+                return local.style;
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            }
+        }, others), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, resolvedChildren);
+        return _el$;
+    })();
+};
+const navbar_NavbarRow = NavbarRow;
+export { navbar_NavbarRow as default };

package/dist/components/navbar/NavbarSection.d.ts

@@ -0,0 +1,8 @@
+import { type JSX } from "solid-js";
+export type NavbarSectionProps = JSX.HTMLAttributes<HTMLDivElement> & {
+    section: "start" | "center" | "end";
+    dataTheme?: string;
+    className?: string;
+};
+declare const NavbarSection: (props: NavbarSectionProps) => JSX.Element;
+export default NavbarSection;

package/dist/components/navbar/NavbarSection.js

@@ -0,0 +1,38 @@
+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_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+const NavbarSection = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "section",
+        "dataTheme",
+        "class",
+        "className",
+        "style"
+    ]);
+    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(local.class, local.className, (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+            "navbar-start": "start" === local.section,
+            "navbar-center": "center" === local.section,
+            "navbar-end": "end" === local.section
+        }));
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get ["class"] () {
+                return classes();
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
+        return _el$;
+    })();
+};
+const navbar_NavbarSection = NavbarSection;
+export { navbar_NavbarSection as default };

package/dist/components/navbar/NavbarStack.d.ts

@@ -0,0 +1,10 @@
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type NavbarStackProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps & {
+    sticky?: boolean;
+    container?: boolean;
+    className?: string;
+    dataTheme?: string;
+};
+declare const NavbarStack: (props: NavbarStackProps) => JSX.Element;
+export default NavbarStack;

package/dist/components/navbar/NavbarStack.js

@@ -0,0 +1,39 @@
+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";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+const NavbarStack_NavbarStack = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "sticky",
+        "container",
+        "class",
+        "className",
+        "style",
+        "dataTheme"
+    ]);
+    const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("navbar-stack", local.class, local.className, (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+            "sticky top-0 z-30": local.sticky,
+            "max-w-screen-xl mx-auto px-4": local.container
+        })));
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+            get ["class"] () {
+                return classes();
+            },
+            get style () {
+                return local.style;
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            }
+        }, others), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, resolvedChildren);
+        return _el$;
+    })();
+};
+const NavbarStack = NavbarStack_NavbarStack;
+export { NavbarStack as default };

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

@@ -0,0 +1,4 @@
+export { default } from "./Navbar";
+export type { NavbarProps } from "./Navbar";
+export type { NavbarStackProps } from "./NavbarStack";
+export type { NavbarRowProps } from "./NavbarRow";

package/dist/components/navbar/index.js

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

package/dist/components/navbar/navbar.css

@@ -0,0 +1,33 @@
+@layer components {
+  .navbar {
+      display: flex;
+      width: 100%;
+      align-items: center;
+      padding: 0.5rem;
+      min-height: 4rem;
+    }
+
+  :where(.navbar) {
+      position: relative;
+    }
+
+  .navbar-end {
+      display: inline-flex;
+      align-items: center;
+      width: 50%;
+      justify-content: flex-end;
+    }
+
+  .navbar-start {
+      display: inline-flex;
+      align-items: center;
+      width: 50%;
+      justify-content: flex-start;
+    }
+
+  .navbar-center {
+      display: inline-flex;
+      align-items: center;
+      flex-shrink: 0;
+    }
+}

package/dist/components/noise-background/NoiseBackground.d.ts

@@ -0,0 +1,25 @@
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type NoiseBackgroundProps = {
+    children?: JSX.Element;
+    /** Additional CSS classes for the outer container. */
+    containerClass?: string;
+    /** Gradient blob colors (provide 2–3). */
+    gradientColors?: string[];
+    /** Noise texture opacity (0–1). @default 0.2 */
+    noiseIntensity?: number;
+    /** Animation velocity multiplier. @default 0.1 */
+    speed?: number;
+    /** Apply a backdrop-blur over the gradient layers. @default false */
+    backdropBlur?: boolean;
+    /** Enable/disable the wandering animation. @default true */
+    animating?: boolean;
+    /** CSS border-radius value. @default "var(--radius-box, 1rem)" */
+    borderRadius?: string;
+    /** Path or URL to the noise texture image. @default "/noise.webp" */
+    noiseSrc?: string;
+    /** Show the static noise texture overlay. @default false */
+    showNoise?: boolean;
+} & IComponentBaseProps;
+declare const NoiseBackground: (rawProps: NoiseBackgroundProps) => JSX.Element;
+export default NoiseBackground;

package/dist/components/noise-background/NoiseBackground.js

@@ -0,0 +1,200 @@
+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)('<div><div class="absolute inset-0 opacity-40"></div><div class="absolute inset-0 opacity-30"></div><div class="absolute inset-0 opacity-25"></div><div class="absolute inset-x-0 top-0 h-1 opacity-80 blur-sm"></div><div>'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="pointer-events-none absolute inset-0 overflow-hidden"><img alt class="h-full w-full object-cover mix-blend-overlay">');
+function createSpring(initial, stiffness = 100, damping = 30) {
+    let current = initial;
+    let velocity = 0;
+    let target = initial;
+    return {
+        set (v) {
+            target = v;
+        },
+        get () {
+            return current;
+        },
+        step (dt) {
+            velocity += (-stiffness * (current - target) - damping * velocity) * dt;
+            current += velocity * dt;
+        }
+    };
+}
+const NoiseBackground = (rawProps)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(rawProps, [
+        "children",
+        "class",
+        "className",
+        "containerClass",
+        "gradientColors",
+        "noiseIntensity",
+        "speed",
+        "backdropBlur",
+        "animating",
+        "borderRadius",
+        "noiseSrc",
+        "showNoise",
+        "dataTheme",
+        "style"
+    ]);
+    let containerRef;
+    let layer0;
+    let layer1;
+    let layer2;
+    let stripEl;
+    const colors = ()=>local.gradientColors ?? [
+            "rgb(255, 100, 150)",
+            "rgb(100, 150, 255)",
+            "rgb(255, 200, 100)"
+        ];
+    const noiseIntensity = ()=>local.noiseIntensity ?? 0.2;
+    const speed = ()=>local.speed ?? 0.1;
+    const animating = ()=>local.animating ?? true;
+    const borderRadius = ()=>local.borderRadius ?? "var(--radius-box, 1rem)";
+    const springX = createSpring(0);
+    const springY = createSpring(0);
+    let vx = 0;
+    let vy = 0;
+    let lastDirectionChange = 0;
+    let prevTime = 0;
+    let rafId;
+    const randomVelocity = ()=>{
+        const angle = Math.random() * Math.PI * 2;
+        const mag = speed() * (0.5 + 0.5 * Math.random());
+        return {
+            x: Math.cos(angle) * mag,
+            y: Math.sin(angle) * mag
+        };
+    };
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
+        if (!containerRef) return;
+        const initRect = containerRef.getBoundingClientRect();
+        const cx = initRect.width / 2;
+        const cy = initRect.height / 2;
+        springX.set(cx);
+        springY.set(cy);
+        for(let i = 0; i < 60; i++){
+            springX.step(1 / 60);
+            springY.step(1 / 60);
+        }
+        const v = randomVelocity();
+        vx = v.x;
+        vy = v.y;
+        let rawX = cx;
+        let rawY = cy;
+        let w = initRect.width;
+        let h = initRect.height;
+        const tick = (time)=>{
+            if (!containerRef) {
+                rafId = requestAnimationFrame(tick);
+                return;
+            }
+            const dt = prevTime ? Math.min((time - prevTime) / 1000, 0.05) : 1 / 60;
+            prevTime = time;
+            if (animating()) {
+                const rect = containerRef.getBoundingClientRect();
+                w = rect.width;
+                h = rect.height;
+                const padding = 20;
+                if (time - lastDirectionChange > 1500 + 1500 * Math.random()) {
+                    const nv = randomVelocity();
+                    vx = nv.x;
+                    vy = nv.y;
+                    lastDirectionChange = time;
+                }
+                const frameDt = 16;
+                let nx = rawX + vx * frameDt;
+                let ny = rawY + vy * frameDt;
+                if (nx < padding || nx > w - padding || ny < padding || ny > h - padding) {
+                    const nv = randomVelocity();
+                    vx = nv.x;
+                    vy = nv.y;
+                    lastDirectionChange = time;
+                    nx = Math.max(padding, Math.min(w - padding, nx));
+                    ny = Math.max(padding, Math.min(h - padding, ny));
+                }
+                rawX = nx;
+                rawY = ny;
+                springX.set(rawX);
+                springY.set(rawY);
+            }
+            springX.step(dt);
+            springY.step(dt);
+            const sx = springX.get();
+            const sy = springY.get();
+            const c = colors();
+            const radius = 1.5 * Math.max(w, h);
+            const hw = w / 2;
+            const hh = h / 2;
+            const lx = (m)=>hw + (sx - hw) * m;
+            const ly = (m)=>hh + (sy - hh) * m;
+            if (layer0) layer0.style.background = `radial-gradient(${radius}px circle at ${sx}px ${sy}px, ${c[0]} 0%, transparent 50%)`;
+            if (layer1) layer1.style.background = `radial-gradient(${radius}px circle at ${lx(0.7)}px ${ly(0.7)}px, ${c[1]} 0%, transparent 50%)`;
+            if (layer2) layer2.style.background = `radial-gradient(${radius}px circle at ${lx(1.3)}px ${ly(1.3)}px, ${c[2] || c[0]} 0%, transparent 50%)`;
+            if (stripEl) stripEl.style.transform = animating() ? `translateX(${0.1 * sx - 50}px)` : "none";
+            rafId = requestAnimationFrame(tick);
+        };
+        rafId = requestAnimationFrame(tick);
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+        if (void 0 !== rafId) cancelAnimationFrame(rafId);
+    });
+    const containerClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("group relative overflow-hidden bg-base-200 backdrop-blur-sm", "shadow-[0px_1px_0px_0px_var(--color-base-300)_inset,0px_1px_0px_0px_var(--color-base-100)]", local.containerClass);
+    const contentClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("relative z-10", local.class, local.className);
+    return (()=>{
+        var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling, _el$5 = _el$4.nextSibling, _el$6 = _el$5.nextSibling;
+        var _ref$ = containerRef;
+        "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : containerRef = _el$;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+            get ["class"] () {
+                return containerClasses();
+            },
+            get style () {
+                return {
+                    "--noise-opacity": noiseIntensity(),
+                    "border-radius": borderRadius(),
+                    ..."object" == typeof local.style ? local.style : {}
+                };
+            },
+            get classList () {
+                return {
+                    "after:absolute after:inset-0 after:h-full after:w-full after:backdrop-blur-lg after:content-['']": local.backdropBlur ?? false
+                };
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            }
+        }, others), false, true);
+        var _ref$2 = layer0;
+        "function" == typeof _ref$2 ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$2, _el$2) : layer0 = _el$2;
+        var _ref$3 = layer1;
+        "function" == typeof _ref$3 ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$3, _el$3) : layer1 = _el$3;
+        var _ref$4 = layer2;
+        "function" == typeof _ref$4 ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$4, _el$4) : layer2 = _el$4;
+        var _ref$5 = stripEl;
+        "function" == typeof _ref$5 ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$5, _el$5) : stripEl = _el$5;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (()=>{
+            var _c$ = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!(local.showNoise ?? false));
+            return ()=>_c$() && (()=>{
+                    var _el$7 = _tmpl$2(), _el$8 = _el$7.firstChild;
+                    _el$8.style.setProperty("opacity", "var(--noise-opacity, 0.2)");
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$8, "src", local.noiseSrc ?? "/noise.webp"));
+                    return _el$7;
+                })();
+        })(), _el$6);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, ()=>local.children);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$ = `linear-gradient(to right, ${colors().join(", ")})`, _v$2 = `${borderRadius()} ${borderRadius()} 0 0`, _v$3 = contentClasses();
+            _v$ !== _p$.e && (null != (_p$.e = _v$) ? _el$5.style.setProperty("background", _v$) : _el$5.style.removeProperty("background"));
+            _v$2 !== _p$.t && (null != (_p$.t = _v$2) ? _el$5.style.setProperty("border-radius", _v$2) : _el$5.style.removeProperty("border-radius"));
+            _v$3 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$6, _p$.a = _v$3);
+            return _p$;
+        }, {
+            e: void 0,
+            t: void 0,
+            a: void 0
+        });
+        return _el$;
+    })();
+};
+const noise_background_NoiseBackground = NoiseBackground;
+export { noise_background_NoiseBackground as default };

package/dist/components/noise-background/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./NoiseBackground";
+export type { NoiseBackgroundProps } from "./NoiseBackground";