fancy-ui-react 0.2.1 → 0.4.0

package/dist/components/marquee/Marquee.js

@@ -1,26 +1,158 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
 import { cn } from "../../utils.js";
+import { useReducedMotion } from "../../internals/motion/media-query.js";
 /* empty css            */
+const EASE_TAU = 140;
+const SETTLE_EPSILON = 2e-3;
+const DEFAULT_DURATION_MS = 4e4;
+function parseDuration(raw) {
+  const match = /^\s*([\d.]+)\s*(ms|s)\s*$/i.exec(raw);
+  if (!match) return DEFAULT_DURATION_MS;
+  const value = Number.parseFloat(match[1] ?? "");
+  if (!Number.isFinite(value) || value <= 0) return DEFAULT_DURATION_MS;
+  return (match[2] ?? "s").toLowerCase() === "ms" ? value : value * 1e3;
+}
+function createConveyor() {
+  const c = {
+    speed: 1,
+    pauseOnHover: false,
+    engaged: false,
+    factor: 1,
+    animations: [],
+    rafId: 0,
+    lastTs: 0,
+    resumeAt: null,
+    applyRate() {
+      const rate = c.speed * c.factor;
+      for (const animation of c.animations) animation.playbackRate = rate;
+    },
+    wake() {
+      if (!c.animations.length || c.rafId) return;
+      c.lastTs = 0;
+      c.rafId = requestAnimationFrame(tick);
+    },
+    setEngaged(next) {
+      c.engaged = next && c.pauseOnHover;
+      c.wake();
+    }
+  };
+  function tick(ts) {
+    const dt = c.lastTs ? Math.min(ts - c.lastTs, 64) : 16;
+    c.lastTs = ts;
+    const target = c.engaged ? 0 : 1;
+    c.factor += (target - c.factor) * (1 - Math.exp(-dt / EASE_TAU));
+    if (Math.abs(target - c.factor) < SETTLE_EPSILON) c.factor = target;
+    c.applyRate();
+    if (c.factor === target) {
+      c.rafId = 0;
+      c.lastTs = 0;
+      return;
+    }
+    c.rafId = requestAnimationFrame(tick);
+  }
+  return c;
+}
 function Marquee({
   className,
   reverse = false,
   pauseOnHover = false,
   vertical = false,
   repeat = 4,
+  fade = true,
+  speed = 1,
   children
 }) {
+  const reduced = useReducedMotion();
+  const rootRef = useRef(null);
+  const [upgraded, setUpgraded] = useState(false);
+  const safeSpeed = Number.isFinite(speed) && speed > 0 ? speed : 1;
+  const conveyorRef = useRef(null);
+  if (!conveyorRef.current) conveyorRef.current = createConveyor();
+  const conveyor = conveyorRef.current;
+  useEffect(() => {
+    conveyor.speed = safeSpeed;
+    conveyor.applyRate();
+  }, [conveyor, safeSpeed]);
+  useEffect(() => {
+    conveyor.pauseOnHover = pauseOnHover;
+    if (!pauseOnHover && conveyor.engaged) conveyor.setEngaged(false);
+  }, [conveyor, pauseOnHover]);
+  useEffect(() => {
+    const el = rootRef.current;
+    if (!el || reduced) return;
+    if (typeof Element === "undefined" || typeof Element.prototype.animate !== "function") return;
+    const styles = getComputedStyle(el);
+    const duration = parseDuration(styles.getPropertyValue("--duration"));
+    const gapPx = Number.parseFloat(vertical ? styles.rowGap : styles.columnGap) || 0;
+    const axis = vertical ? "translateY" : "translateX";
+    const keyframes = [
+      { transform: `${axis}(0)` },
+      { transform: `${axis}(calc(-100% - ${gapPx}px))` }
+    ];
+    const tracks = Array.from(el.querySelectorAll(":scope > [data-marquee-track]"));
+    let startTime = 0;
+    if (conveyor.resumeAt !== null) {
+      startTime = (reverse ? 1 - conveyor.resumeAt : conveyor.resumeAt) * duration;
+    } else {
+      const running = tracks[0]?.getAnimations?.()[0];
+      if (running && typeof running.currentTime === "number") {
+        startTime = running.currentTime * conveyor.speed;
+      }
+    }
+    conveyor.animations = tracks.map(
+      (track) => track.animate(keyframes, {
+        duration,
+        iterations: Infinity,
+        easing: "linear",
+        direction: reverse ? "reverse" : "normal"
+      })
+    ).filter(Boolean);
+    for (const animation of conveyor.animations) animation.currentTime = startTime % duration;
+    conveyor.applyRate();
+    setUpgraded(true);
+    if (conveyor.factor !== (conveyor.engaged ? 0 : 1)) conveyor.wake();
+    return () => {
+      if (conveyor.rafId) cancelAnimationFrame(conveyor.rafId);
+      conveyor.rafId = 0;
+      const t = conveyor.animations[0]?.currentTime;
+      if (typeof t === "number") {
+        const progress = t % duration / duration;
+        conveyor.resumeAt = reverse ? 1 - progress : progress;
+      } else {
+        conveyor.resumeAt = null;
+      }
+      for (const animation of conveyor.animations) animation.cancel?.();
+      conveyor.animations = [];
+      setUpgraded(false);
+    };
+  }, [conveyor, vertical, reverse, repeat, className, reduced]);
+  function onFocusOut(event) {
+    if (!rootRef.current?.contains(event.relatedTarget)) conveyor.setEngaged(false);
+  }
   return /* @__PURE__ */ jsx(
     "div",
     {
+      ref: rootRef,
       className: cn(
-        "fancy-marquee group flex [gap:var(--gap)] overflow-hidden p-2 [--duration:40s] [--gap:1rem]",
-        vertical ? "flex-col" : "flex-row",
+        "marquee group flex [gap:var(--gap)] overflow-hidden p-2 [--duration:40s] [--gap:1rem]",
+        vertical ? "marquee-vertical flex-col" : "flex-row",
+        fade && "marquee-fade",
+        upgraded && "marquee-upgraded",
         className
       ),
+      style: { "--marquee-speed": safeSpeed },
+      "data-paused-on-hover": pauseOnHover ? "" : void 0,
+      onPointerEnter: () => conveyor.setEngaged(true),
+      onPointerLeave: () => conveyor.setEngaged(false),
+      onFocus: () => conveyor.setEngaged(true),
+      onBlur: onFocusOut,
       children: Array.from({ length: repeat }, (_, index) => /* @__PURE__ */ jsx(
         "div",
         {
+          "data-marquee-track": "",
+          "aria-hidden": index > 0 ? "true" : void 0,
           className: cn(
             "flex shrink-0 justify-around [gap:var(--gap)]",
             vertical ? "animate-marquee-vertical flex-col" : "animate-marquee flex-row",

package/dist/components/marquee/ReviewCard.d.ts

@@ -4,5 +4,6 @@ export interface ReviewCardProps {
     username: string;
     body: string;
 }
-/** A ready-made card for testimonial-style marquees. */
+/** A ready-made card for testimonial-style marquees: a nested double frame,
+ * a hairline shell holding a hairline inner panel. */
 export declare function ReviewCard({ img, name, username, body }: ReviewCardProps): import("react").JSX.Element;

package/dist/components/marquee/ReviewCard.js

@@ -1,16 +1,27 @@
 "use client";
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+/* empty css                */
 function ReviewCard({ img, name, username, body }) {
-  return /* @__PURE__ */ jsxs("figure", { className: "relative w-64 cursor-pointer overflow-hidden rounded-xl border border-gray-950/[.1] bg-gray-950/[.01] p-4 hover:bg-gray-950/[.05] dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center gap-2", children: [
-      /* @__PURE__ */ jsx("img", { src: img, className: "rounded-full", width: "32", height: "32", alt: "" }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium dark:text-white", children: name }),
-        /* @__PURE__ */ jsx("p", { className: "text-xs font-medium dark:text-white/40", children: username })
+  return /* @__PURE__ */ jsx("figure", { className: "review-card relative flex w-72 shrink-0 flex-col rounded-2xl border p-1", children: /* @__PURE__ */ jsxs("div", { className: "review-card-inner relative flex-1 overflow-hidden rounded-[12px] border px-4 pt-3.5 pb-4", children: [
+    /* @__PURE__ */ jsx("span", { className: "review-card-sheen", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs("div", { className: "relative flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: img,
+          className: "review-card-avatar size-8 rounded-full",
+          width: "32",
+          height: "32",
+          alt: ""
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col leading-tight", children: [
+        /* @__PURE__ */ jsx("span", { className: "review-card-name truncate text-[13px] font-medium tracking-[-0.01em]", children: name }),
+        /* @__PURE__ */ jsx("span", { className: "review-card-handle truncate text-[12px]", children: username })
       ] })
     ] }),
-    /* @__PURE__ */ jsx("blockquote", { className: "mt-2 text-sm", children: body })
-  ] });
+    /* @__PURE__ */ jsx("blockquote", { className: "review-card-body relative mt-3 text-[13px] leading-relaxed", children: body })
+  ] }) });
 }
 export {
   ReviewCard

package/dist/components/meteors/Meteors.d.ts

@@ -1,21 +1,43 @@
 /**
  * Meteors - Animated meteor shower effect
  *
- * Generates N span elements with randomized positions, delays, and durations
- * that animate diagonally across the container.
+ * A seeded field of meteors, each at its own depth: near ones are larger,
+ * brighter, longer-tailed and faster, far ones faint and slow, so the
+ * shower reads in parallax. Each meteor fades in, streaks across on a
+ * diagonal and burns out; a few flare before they go.
  */
 export interface MeteorsProps {
     /** Number of meteors to render */
     count?: number;
     /** Additional CSS classes applied to each meteor */
     className?: string;
-    /**
-     * Seed for the meteor layout. The same seed always produces the same
-     * shower, which is what keeps a server render and its hydration
-     * identical. Change it to give two showers on one page different
-     * layouts — the default is shared, so two `<Meteors />` with no seed
-     * fall the same way.
-     */
+    /** Direction of travel, in degrees (215 = down and to the right) */
+    angle?: number;
+    /** Speed multiplier: 2 is twice as fast */
+    speed?: number;
+    /** Head and tail colour. Defaults to a pale blue-white on dark pages, slate on light ones */
+    color?: string;
+    /** Seed for the field — same seed, same shower (and the same markup on server and client) */
     seed?: number;
 }
-export declare function Meteors({ count, className, seed }: MeteorsProps): import("react").JSX.Element;
+export interface Meteor {
+    /** Start position, % of the container */
+    left: number;
+    top: number;
+    /** 0 (far) to 1 (near) */
+    depth: number;
+    /** Seconds for one pass */
+    duration: number;
+    /** Negative start offset, so the shower is already under way */
+    delay: number;
+    /** Whether this one flares before it burns out */
+    flare: boolean;
+}
+/**
+ * The shower. Starts reach well past the left edge (meteors drift right
+ * as they fall, so a start on the left is what fills the left half) and
+ * over the upper part of the height; depth skewed toward far, the way a
+ * real sky has many faint meteors and few bright ones.
+ */
+export declare function meteorField(count: number, seed?: number): Meteor[];
+export declare function Meteors({ count, className, angle, speed, color, seed, }: MeteorsProps): import("react").JSX.Element;

package/dist/components/meteors/Meteors.js

@@ -4,42 +4,75 @@ import { useMemo } from "react";
 import { cn } from "../../utils.js";
 /* empty css            */
 function mulberry32(seed) {
-  let state = seed >>> 0;
+  let a = seed >>> 0;
   return () => {
-    state = state + 1831565813 >>> 0;
-    let t = state;
+    a = a + 1831565813 >>> 0;
+    let t = a;
     t = Math.imul(t ^ t >>> 15, t | 1);
     t ^= t + Math.imul(t ^ t >>> 7, t | 61);
     return ((t ^ t >>> 14) >>> 0) / 4294967296;
   };
 }
-function createMeteors(count, seed) {
-  const random = mulberry32(seed);
-  return Array.from({ length: count }, () => ({
-    left: `${Math.floor(random() * 800 - 400)}px`,
-    animationDelay: `${(random() * 0.6 + 0.2).toFixed(2)}s`,
-    animationDuration: `${Math.floor(random() * 8 + 2)}s`
-  }));
+function meteorField(count, seed = 1) {
+  const n = Math.max(0, Math.floor(Number.isFinite(count) ? count : 0));
+  const rand = mulberry32(seed);
+  return Array.from({ length: n }, () => {
+    const depth = Math.pow(rand(), 1.6);
+    const duration = 7 - depth * 4.5 + rand() * 1.5;
+    return {
+      left: -50 + rand() * 150,
+      top: -30 + rand() * 60,
+      depth,
+      duration,
+      delay: -rand() * duration * 1.6,
+      flare: rand() < 0.2
+    };
+  });
 }
-function Meteors({ count = 20, className, seed = 1 }) {
-  const meteors = useMemo(() => createMeteors(count, seed), [count, seed]);
+function styleFor(m, speed, angle, color) {
+  const scale = 0.55 + m.depth * 0.9;
+  const tail = Math.round(40 + m.depth * 110);
+  const brightness = (0.35 + m.depth * 0.65).toFixed(2);
+  const style = {
+    left: `${m.left.toFixed(2)}%`,
+    top: `${m.top.toFixed(2)}%`,
+    animationDelay: `${(m.delay / speed).toFixed(2)}s`,
+    animationDuration: `${(m.duration / speed).toFixed(2)}s`,
+    "--meteor-angle": `${angle}deg`,
+    "--meteor-scale": scale.toFixed(2),
+    "--meteor-tail": `${tail}px`,
+    "--meteor-brightness": brightness,
+    "--meteor-travel": `${Math.round(700 + m.depth * 500)}px`
+  };
+  if (color) style["--meteor-color"] = color;
+  return style;
+}
+function Meteors({
+  count = 20,
+  className,
+  angle = 215,
+  speed = 1,
+  color,
+  seed = 1
+}) {
+  const meteors = useMemo(() => meteorField(count, seed), [count, seed]);
+  const speedC = Number.isFinite(speed) && speed > 0 ? speed : 1;
+  const angleC = Number.isFinite(angle) ? angle : 215;
   return /* @__PURE__ */ jsx(Fragment, { children: meteors.map((meteor, i) => /* @__PURE__ */ jsx(
     "span",
     {
       className: cn(
-        "meteor pointer-events-none absolute top-0 h-0.5 w-0.5 rounded-full bg-slate-500 opacity-0 shadow-[0_0_0_1px_#ffffff10]",
-        "before:absolute before:top-1/2 before:h-px before:w-[50px] before:-translate-y-1/2 before:bg-gradient-to-r before:from-slate-500 before:to-transparent before:content-['']",
+        "meteor pointer-events-none absolute top-0 h-0.5 w-0.5 rounded-full opacity-0",
+        meteor.flare && "meteor--flare",
         className
       ),
-      style: {
-        left: meteor.left,
-        animationDelay: meteor.animationDelay,
-        animationDuration: meteor.animationDuration
-      }
+      style: styleFor(meteor, speedC, angleC, color),
+      "aria-hidden": "true"
     },
     i
   )) });
 }
 export {
-  Meteors
+  Meteors,
+  meteorField
 };

package/dist/components/mosaic-glow/mosaic-glow-core.d.ts

@@ -1,16 +1,17 @@
 /**
- * MosaicGlow core — pure math, no DOM.
+ * MosaicGlow core — the framework-free half of the component.
  *
- * Everything the canvas loop needs that can be unit-tested without a browser:
- * a seeded PRNG, per-tile grid state, the halo falloff curve, the fps-independent
- * heat step, ambient flicker, the colour LUT and the idle drift path.
+ * First the pure math, unit-testable without a browser: a seeded PRNG, per-tile
+ * grid state, the halo falloff curve, the fps-independent heat step, ambient
+ * flicker, the colour LUT and the idle drift path. Then `createMosaicGlow`, the
+ * engine that owns the canvas, the rAF loop and the pointer listeners. No
+ * framework imports, and nothing touches `window` or `document` at module scope,
+ * so the file is safe to import on the server.
  *
- * Ported unchanged from the Svelte package's `mosaic-glow-core.ts`. The only
- * edits are the `!` assertions on typed-array, string and regex-group reads:
- * this package compiles with `noUncheckedIndexedAccess`, which widens every
- * indexed read to `| undefined`. Each one is in bounds by construction (the
- * loops are driven by the array's own length, the regex groups are guaranteed
- * by a successful match), so the assertions change no behaviour.
+ * Compiles under `noUncheckedIndexedAccess`, which widens every indexed read
+ * to `| undefined`. The `!` assertions below are all in bounds by construction
+ * (the loops are driven by the array's own length, the regex groups are
+ * guaranteed by a successful match), so they change no behaviour.
  */
 export type Rgb = [number, number, number];
 /** Small, fast, seedable PRNG (32-bit state). Same seed → same sequence. */
@@ -92,3 +93,90 @@ export declare function releaseTau(trail: number): number;
 /** `smoothing` 0..1 → pointer lag time constant in seconds (0 = instant). */
 export declare function smoothingTau(smoothing: number): number;
 export declare function clamp01(v: number): number;
+/** What the halo does with no pointer: wander on its own or switch off. */
+export type MosaicGlowIdle = "drift" | "none";
+/** Wait after the pointer leaves before the idle drift takes over (ms). */
+export declare const IDLE_DELAY_MS = 1500;
+/** Ambient-only frames are drawn at most this often (ms). */
+export declare const AMBIENT_FRAME_MS = 50;
+/** Chance per second that a tile re-rolls its resting level. */
+export declare const FLICKER_CHANCE = 0.15;
+/** Steps in the tile colour ramp. */
+export declare const LUT_SIZE = 64;
+/** `tileSize` → tile edge in CSS px. */
+export declare function normalizeTileSize(v: number): number;
+/** `gap` → gap between tiles in CSS px. */
+export declare function normalizeGap(v: number): number;
+/** `radius` → halo radius in CSS px. */
+export declare function normalizeRadius(v: number): number;
+export interface MosaicGlowElements {
+    /** Positioned host: measured for the backing store, and the pointer surface. */
+    host: HTMLElement;
+    /** Canvas the mosaic is painted on. The engine owns its width/height. */
+    canvas: HTMLCanvasElement;
+}
+/**
+ * Mount-only options. MosaicGlow has none — every prop the wrapper passes is
+ * reacted to after mount — so the split is recorded here as "nothing is frozen".
+ */
+export type MosaicGlowInitOptions = Record<never, never>;
+/**
+ * Options the engine reacts to after mount. `setOptions` acts on the keys that
+ * are present (an absent or `undefined` key is left alone), grouped by concern
+ * exactly as the wrapper's effects are:
+ * structural (`tileSize`, `gap`, `seed`, `noise`, `ambient`) rebuilds the grid,
+ * colour (`color`, `background`) drops the ramp cache, visual (`idle`,
+ * `flicker`, `radius`, `intensity`) repaints, `reducedMotion` swaps the loop for
+ * a single static frame, `interactive` attaches or detaches the pointer
+ * listeners, `visible` pauses and resumes the loop. `trail` and `smoothing` are
+ * read by the next frame and schedule nothing.
+ */
+export interface MosaicGlowLiveOptions {
+    /** Tile edge in CSS px. */
+    tileSize?: number;
+    /** Gap between tiles in CSS px. */
+    gap?: number;
+    /** Halo / tile colour — hex or rgb(). */
+    color?: string;
+    /** Surface colour behind the tiles — hex or rgb(). */
+    background?: string;
+    /** Halo radius in CSS px. */
+    radius?: number;
+    /** Overall brightness of lit tiles, 0–1. */
+    intensity?: number;
+    /** How long lit tiles linger after the halo moves on, 0–1. */
+    trail?: number;
+    /** Pointer lag, 0 (instant) to 1 (very laggy). */
+    smoothing?: number;
+    /** Spread of per-tile random brightness inside the halo, 0–1. */
+    noise?: number;
+    /** Visibility of the random faint tiles outside the halo, 0–1. */
+    ambient?: number;
+    /** Slowly re-roll the faint tiles over time. */
+    flicker?: boolean;
+    /** What the halo does with no pointer. */
+    idle?: MosaicGlowIdle;
+    /** Follow the pointer. Off leaves only the idle behaviour. */
+    interactive?: boolean;
+    /** Seed for the per-tile randomness — same seed, same mosaic. */
+    seed?: number;
+    /** The wrapper's `prefers-reduced-motion` gate: no loop, one settled frame. */
+    reducedMotion?: boolean;
+    /** The wrapper's visibility gate: false parks the loop. */
+    visible?: boolean;
+}
+export interface MosaicGlowEngine {
+    setOptions(next: Partial<MosaicGlowLiveOptions>): void;
+    /** Re-measure the host; rebuilds only when the box or the pixel ratio moved. */
+    resize(): void;
+    destroy(): void;
+}
+/**
+ * Drive a MosaicGlow canvas. Returns null when no 2D context is available
+ * (server, jsdom without a stub, a browser that refuses the context) — the
+ * caller then simply renders an inert canvas.
+ *
+ * `random` feeds the ambient flicker only; the per-tile field is seeded through
+ * the `seed` option and stays deterministic.
+ */
+export declare function createMosaicGlow(el: MosaicGlowElements, options?: MosaicGlowInitOptions & MosaicGlowLiveOptions, random?: () => number): MosaicGlowEngine | null;

package/dist/components/neon-border/NeonBorder.d.ts

@@ -1,22 +1,41 @@
 import type { HTMLAttributes, ReactNode } from "react";
 /**
- * NeonBorder - Dual-color neon glow border effect
+ * NeonBorder - a two-colour neon tube around its content
  *
- * Two gradient layers with blur and drop-shadow create a bicolor neon effect.
- * Optional rotation animation with half or full coverage.
+ * A faint tube runs all the way round; two beams, one per colour, chase
+ * each other along it from opposite sides. Each beam has a white-hot core
+ * and a coloured glow that spills both inside and outside the edge. The
+ * glow hums (a slow breathing), and the tube flickers once as it ignites.
  */
 export interface NeonBorderProps extends Omit<HTMLAttributes<HTMLDivElement>, "className" | "style"> {
     /** First neon color */
     color1?: string;
     /** Second neon color */
     color2?: string;
-    /** Animation type: none (static), half (50% coverage), full (100% coverage) */
+    /**
+     * How much of the tube is lit: none (two short beams, static), half
+     * (two short beams chasing), full (two long beams that nearly close the ring)
+     */
     animationType?: "none" | "half" | "full";
-    /** Animation duration in seconds */
+    /** Time for the beams to travel once around, in seconds */
     duration?: number;
     /** Additional CSS classes */
     className?: string;
     /** Content */
     children?: ReactNode;
 }
+export type NeonAnimationType = NonNullable<NeonBorderProps["animationType"]>;
+/** Share of the turn each beam covers, in %. */
+export declare function beamArc(type: NeonAnimationType): number;
+/**
+ * The static tube (`animationType="none"`): lit at two opposite corners,
+ * the first colour top-left and the second bottom-right.
+ */
+export declare function neonCorners(color1: string, color2: string, core?: boolean): string;
+/**
+ * The two beams as one conic gradient: each fades in from its tail and
+ * cuts off sharply at its head, the second half a turn behind the first.
+ * `core` whitens each colour for the hot centre of the tube.
+ */
+export declare function neonBeams(color1: string, color2: string, arc: number, core?: boolean): string;
 export declare function NeonBorder({ color1, color2, animationType, duration, className, children, ...rest }: NeonBorderProps): import("react").JSX.Element;

package/dist/components/neon-border/NeonBorder.js

@@ -2,6 +2,26 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { cn } from "../../utils.js";
 /* empty css                */
+function beamArc(type) {
+  return type === "full" ? 46 : 22;
+}
+function neonCorners(color1, color2, core = false) {
+  const tint = (c) => core ? `color-mix(in srgb, ${c} 45%, #fff)` : c;
+  return `linear-gradient(135deg, ${tint(color1)} 0%, transparent 32%, transparent 68%, ${tint(color2)} 100%)`;
+}
+function neonBeams(color1, color2, arc, core = false) {
+  const tint = (c) => core ? `color-mix(in srgb, ${c} 45%, #fff)` : c;
+  const beam = (c, from) => {
+    const head = from + arc;
+    return [
+      `transparent ${from}%`,
+      `color-mix(in srgb, ${tint(c)} 55%, transparent) ${(from + arc * 0.45).toFixed(1)}%`,
+      `${tint(c)} ${(head - 0.6).toFixed(1)}%`,
+      `transparent ${head.toFixed(1)}%`
+    ].join(", ");
+  };
+  return `conic-gradient(from var(--neon-angle), ${beam(color1, 0)}, ${beam(color2, 50)}, transparent 100%)`;
+}
 function getWidth(type) {
   switch (type) {
     case "none":
@@ -21,30 +41,40 @@ function NeonBorder({
   children,
   ...rest
 }) {
+  const arc = beamArc(animationType);
+  const animated = animationType !== "none";
   const styleVars = {
     "--neon-duration": `${duration}s`,
     "--neon-color1": color1,
     "--neon-color2": color2,
-    "--neon-width": `${getWidth(animationType)}%`
+    "--neon-width": `${getWidth(animationType)}%`,
+    "--neon-beams": animated ? neonBeams(color1, color2, arc) : neonCorners(color1, color2),
+    "--neon-core": animated ? neonBeams(color1, color2, arc, true) : neonCorners(color1, color2, true)
   };
-  const animated = animationType !== "none";
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
-        "neon-border-container relative z-10 inline-block h-10 w-full max-w-sm overflow-hidden rounded-lg p-px",
+        "neon-border-container relative z-10 inline-block h-10 w-full max-w-sm rounded-lg p-px",
+        animated && "neon-animated",
         className
       ),
       style: styleVars,
       ...rest,
       children: [
-        /* @__PURE__ */ jsx("div", { className: cn("neon-layer-one rounded-lg", animated && "neon-animated") }),
-        /* @__PURE__ */ jsx("div", { className: cn("neon-layer-two rounded-lg", animated && "neon-animated") }),
-        children
+        children,
+        /* @__PURE__ */ jsx("span", { className: "neon-tube", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxs("span", { className: "neon-light", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx("span", { className: "neon-glow", children: /* @__PURE__ */ jsx("span", {}) }),
+          /* @__PURE__ */ jsx("span", { className: "neon-core" })
+        ] })
       ]
     }
   );
 }
 export {
-  NeonBorder
+  NeonBorder,
+  beamArc,
+  neonBeams,
+  neonCorners
 };