@pathscale/ui 1.3.1 → 1.5.0

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

@@ -0,0 +1,27 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./NoiseBackground.css";
+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: __LayoutComponent<NoiseBackgroundProps>;
+export default NoiseBackground;

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

@@ -0,0 +1,225 @@
+import { insert, memo, mergeProps, spread, template, use } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import "./NoiseBackground.css";
+import { onCleanup, onMount, splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { CLASSES, componentRecipe } from "./NoiseBackground.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<div><div></div><div></div><div></div><div></div><div>"), _tmpl$2 = /*#__PURE__*/ template("<div><img alt>");
+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 __solidLayoutNoiseBackground = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "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
+        };
+    };
+    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);
+    });
+    onCleanup(()=>{
+        if (void 0 !== rafId) cancelAnimationFrame(rafId);
+    });
+    const containerClasses = ()=>twMerge(CLASSES.base, (local.backdropBlur ?? false) && CLASSES.flag.backdropBlur, local.containerClass);
+    const contentClasses = ()=>twMerge(CLASSES.slot.content, 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$ ? use(_ref$, _el$) : containerRef = _el$;
+        spread(_el$, mergeProps(()=>({
+                class: containerClasses()
+            }), {
+            get style () {
+                return {
+                    "--noise-opacity": noiseIntensity(),
+                    "border-radius": borderRadius(),
+                    ..."object" == typeof local.style ? local.style : {}
+                };
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            }
+        }, others), false, true);
+        var _ref$2 = layer0;
+        "function" == typeof _ref$2 ? use(_ref$2, _el$2) : layer0 = _el$2;
+        spread(_el$2, mergeProps(()=>({
+                class: CLASSES.slot.layer0
+            })), false, false);
+        var _ref$3 = layer1;
+        "function" == typeof _ref$3 ? use(_ref$3, _el$3) : layer1 = _el$3;
+        spread(_el$3, mergeProps(()=>({
+                class: CLASSES.slot.layer1
+            })), false, false);
+        var _ref$4 = layer2;
+        "function" == typeof _ref$4 ? use(_ref$4, _el$4) : layer2 = _el$4;
+        spread(_el$4, mergeProps(()=>({
+                class: CLASSES.slot.layer2
+            })), false, false);
+        var _ref$5 = stripEl;
+        "function" == typeof _ref$5 ? use(_ref$5, _el$5) : stripEl = _el$5;
+        spread(_el$5, mergeProps(()=>({
+                class: CLASSES.slot.strip
+            }), {
+            get style () {
+                return {
+                    background: `linear-gradient(to right, ${colors().join(", ")})`,
+                    "border-radius": `${borderRadius()} ${borderRadius()} 0 0`
+                };
+            }
+        }), false, false);
+        insert(_el$, (()=>{
+            var _c$ = memo(()=>!!(local.showNoise ?? false));
+            return ()=>_c$() && (()=>{
+                    var _el$7 = _tmpl$2(), _el$8 = _el$7.firstChild;
+                    spread(_el$7, mergeProps(()=>({
+                            class: CLASSES.slot.noiseWrap
+                        })), false, true);
+                    spread(_el$8, mergeProps({
+                        get src () {
+                            return local.noiseSrc ?? "/noise.webp";
+                        }
+                    }, ()=>({
+                            class: CLASSES.slot.noiseImage
+                        }), {
+                        style: {
+                            opacity: "var(--noise-opacity, 0.2)"
+                        }
+                    }), false, false);
+                    return _el$7;
+                })();
+        })(), _el$6);
+        spread(_el$6, mergeProps(()=>({
+                class: contentClasses()
+            })), false, true);
+        insert(_el$6, ()=>local.children);
+        return _el$;
+    })();
+};
+const NoiseBackground = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutNoiseBackground,
+    embedded: true
+});
+const NoiseBackground_generated = NoiseBackground;
+export default NoiseBackground_generated;

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

@@ -0,0 +1,21 @@
+export declare const CLASSES: {
+    readonly base: "noise-background";
+    readonly flag: {
+        readonly backdropBlur: "noise-background--backdrop-blur";
+    };
+    readonly slot: {
+        readonly layer0: "noise-background__layer noise-background__layer--0";
+        readonly layer1: "noise-background__layer noise-background__layer--1";
+        readonly layer2: "noise-background__layer noise-background__layer--2";
+        readonly strip: "noise-background__strip";
+        readonly noiseWrap: "noise-background__noise-wrap";
+        readonly noiseImage: "noise-background__noise-image";
+        readonly content: "noise-background__content";
+    };
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "noise-background";
+    readonly slots: {
+        readonly root: {};
+    };
+}>;

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

@@ -0,0 +1,35 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    base: "noise-background",
+    flag: {
+        backdropBlur: "noise-background--backdrop-blur"
+    },
+    slot: {
+        layer0: "noise-background__layer noise-background__layer--0",
+        layer1: "noise-background__layer noise-background__layer--1",
+        layer2: "noise-background__layer noise-background__layer--2",
+        strip: "noise-background__strip",
+        noiseWrap: "noise-background__noise-wrap",
+        noiseImage: "noise-background__noise-image",
+        content: "noise-background__content"
+    }
+};
+const componentRecipe = recipe({
+    component: "noise-background",
+    slots: {
+        root: {}
+    },
+    _layouts: {
+        slots: {
+            root: {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            root: 0
+        }
+    }
+});
+export { CLASSES, componentRecipe };

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

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

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

@@ -1 +1 @@
-export { default } from "./NoiseBackground.js";
+export { default } from "./NoiseBackground.generated.js";

package/dist/components/number-field/NumberField.generated.d.ts

@@ -0,0 +1,49 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./NumberField.css";
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type NumberFieldVariant = "primary" | "secondary";
+export type NumberFieldRenderProps = {
+    value: number | undefined;
+    isInvalid: boolean;
+    isDisabled: boolean;
+};
+export type NumberFieldRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "onChange" | "onBlur"> & IComponentBaseProps & {
+    children?: JSX.Element | ((props: NumberFieldRenderProps) => JSX.Element);
+    name?: string;
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number | undefined) => void;
+    onBlur?: JSX.EventHandlerUnion<HTMLInputElement, FocusEvent>;
+    min?: number;
+    max?: number;
+    step?: number;
+    fullWidth?: boolean;
+    variant?: NumberFieldVariant;
+    isDisabled?: boolean;
+    disabled?: boolean;
+    isInvalid?: boolean;
+};
+export type NumberFieldGroupProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element | ((props: NumberFieldRenderProps) => JSX.Element);
+};
+export type NumberFieldInputProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "value" | "onInput" | "type"> & IComponentBaseProps & {
+    onInput?: JSX.EventHandlerUnion<HTMLInputElement, InputEvent>;
+};
+export type NumberFieldIncrementButtonProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "type"> & IComponentBaseProps;
+export type NumberFieldDecrementButtonProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "type"> & IComponentBaseProps;
+declare const NumberFieldRoot: __LayoutComponent<NumberFieldRootProps>;
+declare const NumberFieldGroup: __LayoutComponent<NumberFieldGroupProps>;
+declare const NumberFieldInput: __LayoutComponent<NumberFieldInputProps>;
+declare const NumberFieldIncrementButton: __LayoutComponent<NumberFieldIncrementButtonProps>;
+declare const NumberFieldDecrementButton: __LayoutComponent<NumberFieldDecrementButtonProps>;
+declare const NumberField: __LayoutComponent<NumberFieldRootProps> & {
+    Root: __LayoutComponent<NumberFieldRootProps>;
+    Group: __LayoutComponent<NumberFieldGroupProps>;
+    Input: __LayoutComponent<NumberFieldInputProps>;
+    IncrementButton: __LayoutComponent<NumberFieldIncrementButtonProps>;
+    DecrementButton: __LayoutComponent<NumberFieldDecrementButtonProps>;
+};
+export default NumberField;
+export { NumberField, NumberFieldRoot, NumberFieldGroup, NumberFieldInput, NumberFieldIncrementButton, NumberFieldDecrementButton, };
+export type { NumberFieldRootProps as NumberFieldProps };