fancy-ui-react 0.2.0

package/dist/components/focus/Focus.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Focus - Sentence with a roving focus frame
+ *
+ * Splits a sentence into words, blurs all but the current one, and moves a
+ * cornered frame over the word in focus. Cycles automatically on an interval,
+ * or follows the hovered word in manual mode.
+ */
+export interface FocusProps {
+    /** Sentence to split into words */
+    sentence?: string;
+    /** Follow the hovered word instead of auto-cycling */
+    manualMode?: boolean;
+    /** Blur applied to out-of-focus words, in px */
+    blurAmount?: number;
+    /** Color of the focus frame corners */
+    borderColor?: string;
+    /** Focus transition duration in seconds */
+    animationDuration?: number;
+    /** Pause between auto-cycle steps in seconds */
+    pauseBetweenAnimations?: number;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function Focus({ sentence, manualMode, blurAmount, borderColor, animationDuration, pauseBetweenAnimations, className, }: FocusProps): import("react").JSX.Element;

package/dist/components/focus/Focus.js

@@ -0,0 +1,103 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+import { cn } from "../../utils.js";
+import { useLiveRef } from "../../internals/dom/use-live-ref.js";
+import { useIsomorphicLayoutEffect } from "../../internals/dom/ssr.js";
+/* empty css          */
+function Focus({
+  sentence = "Fancy Focus",
+  manualMode = false,
+  blurAmount = 5,
+  borderColor = "green",
+  animationDuration = 0.5,
+  pauseBetweenAnimations = 1,
+  className = ""
+}) {
+  const words = sentence.split(" ");
+  const containerRef = useRef(null);
+  const wordElements = useRef([]);
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [focusRect, setFocusRect] = useState({ x: 0, y: 0, width: 0, height: 0 });
+  const wordCount = useLiveRef(words.length);
+  function handleMouseEnter(index) {
+    if (manualMode) {
+      setCurrentIndex(index);
+    }
+  }
+  function handleMouseLeave() {
+    if (manualMode) {
+      setCurrentIndex(0);
+    }
+  }
+  useIsomorphicLayoutEffect(() => {
+    const wordEl = wordElements.current[currentIndex];
+    const container = containerRef.current;
+    if (!wordEl || !container) return;
+    const parentRect = container.getBoundingClientRect();
+    const wordRect = wordEl.getBoundingClientRect();
+    setFocusRect({
+      x: wordRect.left - parentRect.left,
+      y: wordRect.top - parentRect.top,
+      width: wordRect.width,
+      height: wordRect.height
+    });
+  }, [currentIndex]);
+  const startupRef = useRef({ manualMode, animationDuration, pauseBetweenAnimations });
+  useEffect(() => {
+    const { manualMode: manualMode2, animationDuration: animationDuration2, pauseBetweenAnimations: pauseBetweenAnimations2 } = startupRef.current;
+    if (manualMode2) return;
+    const intervalMs = animationDuration2 * 1e3 + pauseBetweenAnimations2 * 1e3;
+    const id = setInterval(() => {
+      setCurrentIndex((index) => (index + 1) % wordCount.current);
+    }, intervalMs);
+    return () => clearInterval(id);
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: cn("focus-container", className), children: [
+    words.map((word, index) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref: (node) => {
+          wordElements.current[index] = node;
+        },
+        className: cn(
+          "focus-word",
+          manualMode && "manual",
+          index === currentIndex && !manualMode && "active"
+        ),
+        style: {
+          filter: index === currentIndex ? "blur(0px)" : `blur(${blurAmount}px)`,
+          transition: `filter ${animationDuration}s ease`,
+          "--border-color": borderColor
+        },
+        onMouseEnter: () => handleMouseEnter(index),
+        onMouseLeave: handleMouseLeave,
+        children: word
+      },
+      index
+    )),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "focus-frame",
+        style: {
+          transform: `translate(${focusRect.x}px, ${focusRect.y}px)`,
+          width: `${focusRect.width}px`,
+          height: `${focusRect.height}px`,
+          opacity: currentIndex >= 0 ? 1 : 0,
+          transition: `all ${animationDuration}s ease`,
+          "--border-color": borderColor
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "corner top-left" }),
+          /* @__PURE__ */ jsx("span", { className: "corner top-right" }),
+          /* @__PURE__ */ jsx("span", { className: "corner bottom-left" }),
+          /* @__PURE__ */ jsx("span", { className: "corner bottom-right" })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  Focus
+};

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

@@ -0,0 +1,2 @@
+export { Focus } from "./Focus.js";
+export type { FocusProps } from "./Focus.js";

package/dist/components/form-field/FormField.d.ts

@@ -0,0 +1,46 @@
+import type { ReactNode } from "react";
+/**
+ * FormField wraps a single control with a label, help/error text and the id
+ * plumbing the field context publishes — see `internals/field.ts` for the
+ * FieldContext contract every control in this wave reads through
+ * `useField()`.
+ */
+export interface FormFieldProps {
+    /**
+     * Label text — the common case. For label content beyond plain text,
+     * render a `Label` yourself as part of `children` instead: it resolves
+     * `htmlFor` and `required` from this same FormField's context on its own,
+     * so there is nothing extra to wire.
+     */
+    label?: string;
+    /** Help text under the control, replaced by `error` while the field is invalid. */
+    description?: string;
+    /** Error text. Setting it marks the field invalid and replaces the help text. */
+    error?: string;
+    /**
+     * Marks the field as passing validation — a decorative checkmark next to
+     * the help text, plus `valid` on the field context for a control to draw
+     * its own success look. `error` always wins if both are set. See the
+     * README for why this stays decorative rather than growing its own
+     * message the way `error` does.
+     */
+    valid?: boolean;
+    /** Marks the field required: the label gets an asterisk and the control gets `aria-required`. */
+    required?: boolean;
+    /** Disables the field: reaches the wrapped control through context. */
+    disabled?: boolean;
+    /** Opts out of the generated id. */
+    id?: string;
+    /** The control. */
+    children?: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * A single form control's label, help/error text and id plumbing.
+ *
+ * The root element arrives through the ref channel, per PORTING.md — the
+ * Svelte source declares `ref = $bindable(null)`. Rest props are not spread:
+ * the Svelte source takes no rest props either.
+ */
+export declare const FormField: import("react").ForwardRefExoticComponent<FormFieldProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/form-field/FormField.js

@@ -0,0 +1,151 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo, useRef } from "react";
+import { cn } from "../../utils.js";
+import { useIsomorphicLayoutEffect } from "../../internals/dom/ssr.js";
+import { createFieldState, FieldProvider } from "../../internals/field.js";
+import { useFancyId } from "../../internals/use-id.js";
+import { runTransition } from "../../internals/motion/animate.js";
+import { preset } from "../../internals/motion/transitions.js";
+import { prefersReducedMotion } from "../../internals/motion/anchored.js";
+import { DURATIONS } from "../../internals/motion/tokens.js";
+/* empty css               */
+import { Label } from "../label/Label.js";
+const pop = preset("scale");
+const FormField = forwardRef(function FormField2({
+  label,
+  description,
+  error,
+  valid = false,
+  required = false,
+  disabled = false,
+  id,
+  children,
+  className
+}, ref) {
+  const uid = useFancyId();
+  const base = id ?? uid;
+  const controlId = id ?? `${uid}-control`;
+  const descriptionId = `${base}-description`;
+  const errorId = `${base}-error`;
+  const labelId = label ? `${base}-label` : void 0;
+  const hasError = !!error;
+  const hasDescription = !hasError && !!description;
+  const showValid = valid && !hasError;
+  const field = useMemo(
+    () => createFieldState({
+      controlId,
+      labelId,
+      descriptionId,
+      errorId,
+      hasDescription,
+      hasError,
+      valid,
+      required,
+      disabled
+    }),
+    [
+      controlId,
+      labelId,
+      descriptionId,
+      errorId,
+      hasDescription,
+      hasError,
+      valid,
+      required,
+      disabled
+    ]
+  );
+  const branch = hasError ? "error" : hasDescription ? "description" : null;
+  const messageRef = useRef(null);
+  const glyphRef = useRef(null);
+  const firstPassRef = useRef(true);
+  const previousBranchRef = useRef(null);
+  const previousValidRef = useRef(false);
+  useIsomorphicLayoutEffect(() => {
+    const first = firstPassRef.current;
+    firstPassRef.current = false;
+    const previousBranch = previousBranchRef.current;
+    previousBranchRef.current = branch;
+    const previousValid = previousValidRef.current;
+    previousValidRef.current = showValid;
+    if (first) return;
+    let run;
+    if (branch !== null && branch !== previousBranch) {
+      const el = messageRef.current;
+      if (el) {
+        run = runTransition(
+          el,
+          pop(el, { duration: prefersReducedMotion() ? 0 : DURATIONS.fast }, {
+            direction: "in"
+          }),
+          1,
+          void 0,
+          () => run?.abort()
+        );
+      }
+      return () => run?.abort();
+    }
+    if (branch === "description" && previousBranch === "description" && showValid && !previousValid) {
+      const el = glyphRef.current;
+      if (el) {
+        run = runTransition(
+          el,
+          pop(el, { duration: prefersReducedMotion() ? 0 : DURATIONS.micro }, {
+            direction: "in"
+          }),
+          1,
+          void 0,
+          () => run?.abort()
+        );
+      }
+    }
+    return () => run?.abort();
+  }, [branch, showValid]);
+  return /* @__PURE__ */ jsx(FieldProvider, { value: field, children: /* @__PURE__ */ jsxs("div", { ref, className: cn("ft-form-field flex flex-col gap-1.5", className), children: [
+    label ? (
+      // No htmlFor/required passed explicitly: Label reads both
+      // straight off this same context, which is the entire point of
+      // publishing it.
+      /* @__PURE__ */ jsx(Label, { children: label })
+    ) : null,
+    children,
+    branch === "error" ? /* @__PURE__ */ jsxs(
+      "p",
+      {
+        ref: messageRef,
+        id: errorId,
+        role: "alert",
+        className: "ft-form-field-message text-destructive flex items-center gap-1.5 text-[12px]",
+        children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "✕" }),
+          " ",
+          error
+        ]
+      },
+      "error"
+    ) : branch === "description" ? /* @__PURE__ */ jsxs(
+      "p",
+      {
+        ref: messageRef,
+        id: descriptionId,
+        className: "ft-form-field-message text-muted-foreground flex items-center gap-1.5 text-[12px]",
+        children: [
+          showValid ? (
+            // Decorative reinforcement of the help text next to it,
+            // not a replacement for it — see the README for why this
+            // doesn't grow its own message the way the error state
+            // does.
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ft-form-field-valid-glyph", ref: glyphRef, children: "✓" })
+          ) : null,
+          " ",
+          description
+        ]
+      },
+      "description"
+    ) : null
+  ] }) });
+});
+export {
+  FormField
+};

package/dist/components/form-field/index.d.ts

@@ -0,0 +1,2 @@
+export { FormField } from "./FormField.js";
+export type { FormFieldProps } from "./FormField.js";

package/dist/components/frosted-glass/FrostedGlass.d.ts

@@ -0,0 +1,48 @@
+import type { ReactNode } from "react";
+/**
+ * FrostedGlass - frosted glass surface with an organic, wavy refraction of
+ * whatever sits behind it.
+ *
+ * Four layers stack inside a rounded container:
+ *
+ * 1. Filter layer - `backdrop-filter: blur(0)` pulls the backdrop into this
+ *    element's own rendering, then `filter: url(#...)` pointing at the inline
+ *    SVG filter distorts it (`feTurbulence` -> `feGaussianBlur` ->
+ *    `feDisplacementMap`).
+ * 2. Overlay - translucent tint (`tint`).
+ * 3. Specular - inset highlights simulating a lit glass rim (`highlight`).
+ * 4. Content - the children.
+ *
+ * An optional conic-gradient border (`border`) frames the container.
+ */
+export interface FrostedGlassProps {
+    /** Border radius in pixels */
+    radius?: number;
+    /** Turbulence noise frequency (lower = wider waves) */
+    baseFrequency?: number;
+    /** Turbulence octaves (detail of the noise) */
+    numOctaves?: number;
+    /** Turbulence random seed */
+    seed?: number;
+    /** Gaussian blur softening the noise before displacement */
+    noiseBlur?: number;
+    /** Displacement intensity */
+    scale?: number;
+    /** Overlay tint color */
+    tint?: string;
+    /** Specular rim highlight color */
+    highlight?: string;
+    /** Show the conic-gradient glass border */
+    border?: boolean;
+    /** Backdrop blur (px) for the WebKit fallback */
+    fallbackBlur?: number;
+    /** Backdrop saturation (%) for the WebKit fallback */
+    fallbackSaturation?: number;
+    /** CSS classes for the content layer */
+    className?: string;
+    /** CSS classes for the outer container */
+    containerClass?: string;
+    /** Content rendered on top of the glass */
+    children?: ReactNode;
+}
+export declare function FrostedGlass({ radius, baseFrequency, numOctaves, seed, noiseBlur, scale, tint, highlight, border, fallbackBlur, fallbackSaturation, className, containerClass, children, }: FrostedGlassProps): import("react").JSX.Element;

package/dist/components/frosted-glass/FrostedGlass.js

@@ -0,0 +1,89 @@
+"use client";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { cn } from "../../utils.js";
+import { uid } from "../../internals/use-id.js";
+/* empty css                  */
+function FrostedGlass({
+  radius = 24,
+  baseFrequency = 8e-3,
+  numOctaves = 2,
+  seed = 92,
+  noiseBlur = 2,
+  scale = 70,
+  tint = "hsla(0, 0%, 100%, 0.25)",
+  highlight = "hsla(0, 0%, 100%, 0.75)",
+  border = true,
+  fallbackBlur = 20,
+  fallbackSaturation = 180,
+  className = "",
+  containerClass = "",
+  children
+}) {
+  const [filterId, setFilterId] = useState("");
+  useEffect(() => {
+    setFilterId(uid("fg-dist"));
+  }, []);
+  const containerStyle = {
+    borderRadius: `${radius}px`,
+    "--fg-tint": tint,
+    "--fg-highlight": highlight,
+    "--fg-fallback-blur": `${fallbackBlur}px`,
+    "--fg-fallback-saturation": `${fallbackSaturation}%`
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("frosted-glass", border && "frosted-glass-border", containerClass),
+      style: containerStyle,
+      children: [
+        filterId ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "frosted-glass-filter", style: { filter: `url(#${filterId})` } }),
+          /* @__PURE__ */ jsx("svg", { className: "frosted-glass-defs", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+            "filter",
+            {
+              id: filterId,
+              x: "-50%",
+              y: "-50%",
+              width: "200%",
+              height: "200%",
+              filterUnits: "objectBoundingBox",
+              primitiveUnits: "userSpaceOnUse",
+              colorInterpolationFilters: "linearRGB",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "feTurbulence",
+                  {
+                    type: "fractalNoise",
+                    baseFrequency: `${baseFrequency} ${baseFrequency}`,
+                    numOctaves,
+                    seed,
+                    stitchTiles: "stitch",
+                    result: "noise"
+                  }
+                ),
+                /* @__PURE__ */ jsx("feGaussianBlur", { in: "noise", stdDeviation: noiseBlur, result: "blurred" }),
+                /* @__PURE__ */ jsx(
+                  "feDisplacementMap",
+                  {
+                    in: "SourceGraphic",
+                    in2: "blurred",
+                    scale,
+                    xChannelSelector: "R",
+                    yChannelSelector: "G"
+                  }
+                )
+              ]
+            }
+          ) }) })
+        ] }) : null,
+        /* @__PURE__ */ jsx("div", { className: "frosted-glass-overlay" }),
+        /* @__PURE__ */ jsx("div", { className: "frosted-glass-specular" }),
+        /* @__PURE__ */ jsx("div", { className: cn("frosted-glass-content", className), children })
+      ]
+    }
+  );
+}
+export {
+  FrostedGlass
+};

package/dist/components/frosted-glass/index.d.ts

@@ -0,0 +1,2 @@
+export { FrostedGlass } from "./FrostedGlass.js";
+export type { FrostedGlassProps } from "./FrostedGlass.js";

package/dist/components/glare-card/GlareCard.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+export interface GlareCardProps {
+    /** Additional CSS classes for the card content wrapper. */
+    className?: string;
+    /** Card content. */
+    children?: ReactNode;
+}
+export declare function GlareCard({ className, children }: GlareCardProps): import("react").JSX.Element;

package/dist/components/glare-card/GlareCard.js

@@ -0,0 +1,103 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { cn } from "../../utils.js";
+/* empty css               */
+function cssVars(glare, rotate, background) {
+  return `--m-x:${glare.x}%;--m-y:${glare.y}%;--r-x:${rotate.x}deg;--r-y:${rotate.y}deg;--bg-x:${background.x}%;--bg-y:${background.y}%;--duration:300ms;--foil-size:100%;--opacity:0;--radius:48px;--easing:ease;--transition:var(--duration) var(--easing);`;
+}
+const initialStyle = {
+  "--m-x": "50%",
+  "--m-y": "50%",
+  "--r-x": "0deg",
+  "--r-y": "0deg",
+  "--bg-x": "50%",
+  "--bg-y": "50%",
+  "--duration": "300ms",
+  "--foil-size": "100%",
+  "--opacity": "0",
+  "--radius": "48px",
+  "--easing": "ease",
+  "--transition": "var(--duration) var(--easing)"
+};
+function GlareCard({ className = "", children }) {
+  const refElement = useRef(null);
+  const isPointerInside = useRef(false);
+  const timeoutId = useRef(void 0);
+  const glare = useRef({ x: 50, y: 50 });
+  const background = useRef({ x: 50, y: 50 });
+  const rotate = useRef({ x: 0, y: 0 });
+  useEffect(() => {
+    return () => {
+      if (timeoutId.current) clearTimeout(timeoutId.current);
+    };
+  }, []);
+  function writeVars() {
+    refElement.current?.setAttribute(
+      "style",
+      cssVars(glare.current, rotate.current, background.current)
+    );
+  }
+  function handlePointerMove(event) {
+    const rotateFactor = 0.4;
+    const rect = refElement.current?.getBoundingClientRect();
+    if (rect) {
+      const position = {
+        x: event.clientX - rect.left,
+        y: event.clientY - rect.top
+      };
+      const percentage = {
+        x: 100 / rect.width * position.x,
+        y: 100 / rect.height * position.y
+      };
+      const delta = {
+        x: percentage.x - 50,
+        y: percentage.y - 50
+      };
+      background.current.x = 50 + percentage.x / 4 - 12.5;
+      background.current.y = 50 + percentage.y / 3 - 16.67;
+      rotate.current.x = -(delta.x / 3.5) * rotateFactor;
+      rotate.current.y = delta.y / 2 * rotateFactor;
+      glare.current.x = percentage.x;
+      glare.current.y = percentage.y;
+      writeVars();
+    }
+  }
+  function handlePointerEnter() {
+    isPointerInside.current = true;
+    if (timeoutId.current) clearTimeout(timeoutId.current);
+    timeoutId.current = setTimeout(() => {
+      if (isPointerInside.current && refElement.current) {
+        refElement.current.style.setProperty("--duration", "0s");
+      }
+    }, 300);
+  }
+  function handlePointerLeave() {
+    isPointerInside.current = false;
+    if (timeoutId.current) clearTimeout(timeoutId.current);
+    if (refElement.current) {
+      refElement.current.style.removeProperty("--duration");
+      rotate.current = { x: 0, y: 0 };
+      writeVars();
+    }
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: refElement,
+      className: "glare-container relative isolate [aspect-ratio:17/21] w-[320px] transition-transform delay-[var(--delay)] duration-[var(--duration)] ease-[var(--easing)] will-change-transform [contain:layout_style] [perspective:600px]",
+      style: initialStyle,
+      onPointerMove: handlePointerMove,
+      onPointerEnter: handlePointerEnter,
+      onPointerLeave: handlePointerLeave,
+      children: /* @__PURE__ */ jsxs("div", { className: "grid h-full origin-center [transform:rotateY(var(--r-x))_rotateX(var(--r-y))] overflow-hidden rounded-lg border border-slate-800 transition-transform delay-[var(--delay)] duration-[var(--duration)] ease-[var(--easing)] will-change-transform hover:filter-none hover:[--duration:200ms] hover:[--easing:linear] hover:[--opacity:0.6]", children: [
+        /* @__PURE__ */ jsx("div", { className: "grid size-full mix-blend-soft-light [clip-path:inset(0_0_0_0_round_var(--radius))] [grid-area:1/1]", children: /* @__PURE__ */ jsx("div", { className: cn("size-full bg-slate-950", className), children }) }),
+        /* @__PURE__ */ jsx("div", { className: "will-change-background grid size-full opacity-[var(--opacity)] mix-blend-soft-light transition-opacity delay-[var(--delay)] duration-[var(--duration)] ease-[var(--easing)] [background:radial-gradient(farthest-corner_circle_at_var(--m-x)_var(--m-y),_rgba(255,255,255,0.8)_10%,_rgba(255,255,255,0.65)_20%,_rgba(255,255,255,0)_90%)] [clip-path:inset(0_0_1px_0_round_var(--radius))] [grid-area:1/1]" }),
+        /* @__PURE__ */ jsx("div", { className: "glare-foil relative grid size-full opacity-[var(--opacity)] [background-blend-mode:hue_hue_hue_overlay] mix-blend-color-dodge transition-opacity will-change-[background] [background:var(--pattern),_var(--rainbow),_var(--diagonal),_var(--shade)] [clip-path:inset(0_0_1px_0_round_var(--radius))] [grid-area:1/1] after:bg-[inherit] after:[background-size:var(--foil-size),_200%_400%,_800%,_200%] after:[background-position:center,_0%_var(--bg-y),_calc(var(--bg-x)*_-1)_calc(var(--bg-y)*_-1),_var(--bg-x)_var(--bg-y)] after:[background-blend-mode:soft-light,_hue,_hard-light] after:mix-blend-exclusion after:content-[''] after:[grid-area:1/1]" })
+      ] })
+    }
+  );
+}
+export {
+  GlareCard
+};

package/dist/components/glare-card/index.d.ts

@@ -0,0 +1,2 @@
+export { GlareCard } from "./GlareCard.js";
+export type { GlareCardProps } from "./GlareCard.js";

package/dist/components/glow-border/GlowBorder.d.ts

@@ -0,0 +1,8 @@
+export interface GlowBorderProps {
+    className?: string;
+    borderRadius?: number;
+    color?: string | string[];
+    borderWidth?: number;
+    duration?: number;
+}
+export declare function GlowBorder({ className, borderRadius, color, borderWidth, duration, }: GlowBorderProps): import("react").JSX.Element;

package/dist/components/glow-border/GlowBorder.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils.js";
+/* empty css                */
+function GlowBorder({
+  className = "",
+  borderRadius = 10,
+  color = "#FFF",
+  borderWidth = 2,
+  duration = 10
+}) {
+  const colorString = Array.isArray(color) ? color.join(",") : color;
+  const styles = {
+    "--glow-border-radius": `${borderRadius}px`,
+    "--glow-border-width": `${borderWidth}px`,
+    "--glow-duration": `${duration}s`,
+    backgroundImage: `radial-gradient(transparent, transparent, ${colorString}, transparent, transparent)`,
+    backgroundSize: "300% 300%",
+    mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+    WebkitMask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+    WebkitMaskComposite: "xor",
+    maskComposite: "exclude",
+    padding: "var(--glow-border-width)",
+    borderRadius: "var(--glow-border-radius)"
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "animate-glow pointer-events-none absolute inset-0 size-full rounded-[inherit] will-change-[background-position]",
+        className
+      ),
+      style: styles
+    }
+  );
+}
+export {
+  GlowBorder
+};

package/dist/components/glow-border/index.d.ts

@@ -0,0 +1,2 @@
+export { GlowBorder } from "./GlowBorder.js";
+export type { GlowBorderProps } from "./GlowBorder.js";

package/dist/components/glowing-effect/GlowingEffect.d.ts

@@ -0,0 +1,23 @@
+export interface GlowingEffectProps {
+    /** Blur amount for the glow. */
+    blur?: number;
+    /** Inner zone radius ratio where glow deactivates. */
+    inactiveZone?: number;
+    /** Extra proximity distance to activate glow. */
+    proximity?: number;
+    /** Spread angle of the conic gradient. */
+    spread?: number;
+    /** Color variant. */
+    variant?: "default" | "white";
+    /** Force glow visible. */
+    glow?: boolean;
+    /** Additional CSS classes. */
+    className?: string;
+    /** Disable mouse tracking. */
+    disabled?: boolean;
+    /** Animation speed. */
+    movementDuration?: number;
+    /** Border width in pixels. */
+    borderWidth?: number;
+}
+export declare function GlowingEffect({ blur, inactiveZone, proximity, spread, variant, glow, className, disabled, movementDuration, borderWidth, }: GlowingEffectProps): import("react").JSX.Element;