@cronus-ui/ui 0.6.0

package/dist/components/magnetic.js

@@ -0,0 +1,172 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useRef, } from "react";
+import { cn } from "../lib/cn.js";
+const DEFAULT_STRENGTH = 0.3;
+const DEFAULT_RADIUS = 120;
+/** Fraction of the remaining distance covered per frame — the lerp smoothing. */
+const FOLLOW = 0.35;
+/** Distance (px) below which the lerp is considered settled and the loop stops. */
+const SETTLE = 0.05;
+/**
+ * The effect is decorative, so it steps aside for visitors who ask for less
+ * motion and on touch/coarse-pointer devices, where there is no hover to
+ * attract toward. Evaluated on every pointer-enter (not once at mount) so a
+ * live OS-setting change is honoured on the very next interaction.
+ */
+const canAttract = () => typeof window !== "undefined" &&
+    typeof window.matchMedia === "function" &&
+    !window.matchMedia("(prefers-reduced-motion: reduce)").matches &&
+    !window.matchMedia("(pointer: coarse)").matches;
+/**
+ * Re-entering mid-spring-back: seed the lerp from the element's live computed
+ * transform so the new pull continues from wherever the ease-back had reached,
+ * instead of jumping to the stale resting position.
+ */
+function seedFromComputedTransform(target, state) {
+    state.x = 0;
+    state.y = 0;
+    const transform = window.getComputedStyle(target).transform;
+    const match = /matrix(3d)?\(([^)]+)\)/.exec(transform ?? "");
+    if (!match) {
+        return;
+    }
+    const parts = (match[2] ?? "").split(",");
+    const [tx, ty] = match[1]
+        ? [Number.parseFloat(parts[12] ?? "0"), Number.parseFloat(parts[13] ?? "0")]
+        : [Number.parseFloat(parts[4] ?? "0"), Number.parseFloat(parts[5] ?? "0")];
+    if (Number.isFinite(tx) && Number.isFinite(ty)) {
+        state.x = tx;
+        state.y = ty;
+    }
+}
+/**
+ * A magnetic-hover wrapper: its children are gently attracted toward the
+ * cursor while it is inside a proximity field around the wrapper's center.
+ * Classic use is a hero call-to-action or an icon row that leans into the
+ * pointer before it even lands.
+ *
+ * Mechanism: `pointermove` on the wrapper records the cursor, and a
+ * `requestAnimationFrame` loop lerps a `translate` that is written **straight
+ * to the child's `style.transform`** — pointer tracking never touches React
+ * state, so there are zero re-renders during the interaction. The pull is the
+ * pointer's offset from center scaled by {@link MagneticProps.strength} and by
+ * a linear falloff that reaches zero at {@link MagneticProps.radius}, so the
+ * attraction dissolves smoothly at the field's edge. On leave the transform is
+ * reset to zero and a short springy CSS transition (suppressed while tracking
+ * via a `data-magnetic-active` attribute) eases the content back to rest.
+ *
+ * The effect is disabled entirely under `prefers-reduced-motion: reduce` and
+ * on coarse pointers (`(pointer: coarse)` — touch has no hover to attract
+ * toward), with a `motion-reduce` CSS backstop on the transform itself.
+ * Accessibility: purely decorative — the wrapper is not a control, children
+ * keep their natural focus order and focus-visible styling, and keyboard users
+ * simply see the content at rest.
+ */
+export const Magnetic = forwardRef(({ strength = DEFAULT_STRENGTH, radius = DEFAULT_RADIUS, className, children, onPointerEnter, onPointerMove, onPointerLeave, ...props }, ref) => {
+    const wrapperRef = useRef(null);
+    const targetRef = useRef(null);
+    const frameRef = useRef(null);
+    const stateRef = useRef({
+        active: false,
+        pointerX: 0,
+        pointerY: 0,
+        x: 0,
+        y: 0,
+    });
+    const setRef = useCallback((node) => {
+        wrapperRef.current = node;
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    const step = useCallback(() => {
+        frameRef.current = null;
+        const wrapper = wrapperRef.current;
+        const target = targetRef.current;
+        const state = stateRef.current;
+        if (!wrapper || !target || !state.active) {
+            return;
+        }
+        const rect = wrapper.getBoundingClientRect();
+        const offsetX = state.pointerX - (rect.left + rect.width / 2);
+        const offsetY = state.pointerY - (rect.top + rect.height / 2);
+        const field = Math.max(radius, 1);
+        const distance = Math.hypot(offsetX, offsetY);
+        // Pull grows with the offset near the center but eases back to zero at
+        // the field's edge, so entering/leaving the radius never jumps.
+        const falloff = distance >= field ? 0 : 1 - distance / field;
+        const pull = Math.min(Math.max(strength, 0), 1) * falloff;
+        const targetX = offsetX * pull;
+        const targetY = offsetY * pull;
+        state.x += (targetX - state.x) * FOLLOW;
+        state.y += (targetY - state.y) * FOLLOW;
+        target.style.transform = `translate(${state.x.toFixed(2)}px, ${state.y.toFixed(2)}px)`;
+        // Keep lerping until the follow has settled; a new pointermove restarts it.
+        if (Math.abs(targetX - state.x) > SETTLE || Math.abs(targetY - state.y) > SETTLE) {
+            frameRef.current = requestAnimationFrame(step);
+        }
+    }, [strength, radius]);
+    const handlePointerEnter = useCallback((event) => {
+        const target = targetRef.current;
+        if (target && canAttract()) {
+            const state = stateRef.current;
+            state.active = true;
+            state.pointerX = event.clientX;
+            state.pointerY = event.clientY;
+            seedFromComputedTransform(target, state);
+            // While tracking, the rAF lerp is the smoothing — the CSS transition
+            // (which would only add lag on top) is suppressed via this attribute.
+            target.setAttribute("data-magnetic-active", "true");
+        }
+        onPointerEnter?.(event);
+    }, [onPointerEnter]);
+    const handlePointerMove = useCallback((event) => {
+        const state = stateRef.current;
+        if (state.active) {
+            state.pointerX = event.clientX;
+            state.pointerY = event.clientY;
+            if (frameRef.current !== null) {
+                cancelAnimationFrame(frameRef.current);
+            }
+            frameRef.current = requestAnimationFrame(step);
+        }
+        onPointerMove?.(event);
+    }, [step, onPointerMove]);
+    const handlePointerLeave = useCallback((event) => {
+        const state = stateRef.current;
+        if (state.active) {
+            state.active = false;
+            state.x = 0;
+            state.y = 0;
+            if (frameRef.current !== null) {
+                cancelAnimationFrame(frameRef.current);
+                frameRef.current = null;
+            }
+            const target = targetRef.current;
+            if (target) {
+                // Drop the tracking attribute first so the class transition is
+                // live when the zero transform lands — that transition IS the
+                // spring-back.
+                target.removeAttribute("data-magnetic-active");
+                target.style.transform = "translate(0px, 0px)";
+            }
+        }
+        onPointerLeave?.(event);
+    }, [onPointerLeave]);
+    // Cancel any in-flight frame if the wrapper unmounts mid-attraction.
+    useEffect(() => () => {
+        if (frameRef.current !== null) {
+            cancelAnimationFrame(frameRef.current);
+        }
+    }, []);
+    return (_jsx("div", { ref: setRef, "data-slot": "magnetic", className: cn("inline-block", className), onPointerEnter: handlePointerEnter, onPointerMove: handlePointerMove, onPointerLeave: handlePointerLeave, ...props, children: _jsx("div", { ref: targetRef, "data-slot": "magnetic-target", className: cn("will-change-transform", 
+            // Springy ease-back on leave; suppressed while actively tracking
+            // (the rAF lerp smooths the follow) and under reduced motion.
+            "transition-transform duration-300 ease-[cubic-bezier(0.34,1.56,0.64,1)]", "data-[magnetic-active]:transition-none", "motion-reduce:transition-none motion-reduce:!transform-none"), children: children }) }));
+});
+Magnetic.displayName = "Magnetic";
+//# sourceMappingURL=magnetic.js.map

package/dist/components/marquee.d.ts

@@ -0,0 +1,71 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+/**
+ * Whether the marquee scrolls. `"respect"` (default) honours the visitor's
+ * `prefers-reduced-motion` setting — it scrolls for everyone except those who
+ * opt out, who get a static, fully-legible row. `"always"` always scrolls,
+ * ignoring the OS setting (e.g. a showcase that must demonstrate the motion);
+ * `"never"` is always static.
+ */
+export type MarqueeMotionPreference = "respect" | "always" | "never";
+export interface MarqueeProps extends HTMLAttributes<HTMLDivElement> {
+    /** The items to scroll — logos, cards, testimonials, or a text ticker. */
+    children: ReactNode;
+    /**
+     * Scroll direction. Horizontal: `"left"` (default) | `"right"`. When
+     * {@link MarqueeProps.vertical} is set, the same prop reads as `"up"`
+     * (default) | `"down"` — i.e. `"left"`/`"up"` share the forward sense and
+     * `"right"`/`"down"` the reverse, so one prop covers both axes.
+     */
+    direction?: "left" | "right";
+    /** Scroll the marquee on the vertical axis instead of the horizontal one. */
+    vertical?: boolean;
+    /**
+     * Travel speed in **pixels per second** — resolution-independent and stable
+     * across content widths (the loop duration is derived from the measured track
+     * size). Defaults to `40` (a tasteful, slow drift).
+     */
+    speed?: number;
+    /** Pause the scroll while the pointer is over the marquee. Defaults to `true`. */
+    pauseOnHover?: boolean;
+    /**
+     * Fade the leading and trailing edges into the background with a gradient
+     * `mask-image`, so items dissolve rather than clip. Defaults to `true`.
+     */
+    fade?: boolean;
+    /** Spacing between repeated items. Accepts any CSS length. Defaults to `"1rem"`. */
+    gap?: string;
+    /**
+     * How many copies of {@link MarqueeProps.children} are rendered back-to-back.
+     * The track translates by exactly one copy, so any count ≥ 2 loops
+     * seamlessly. Defaults to `2`; raise it when a single copy cannot fill wide
+     * viewports (leaving a visible gap before the loop point).
+     */
+    repeat?: number;
+    /**
+     * Whether the marquee scrolls vs. honours `prefers-reduced-motion`:
+     * `"respect"` (default), `"always"` (force motion), or `"never"` (force
+     * static). Defaults to `"respect"`.
+     */
+    motionPreference?: MarqueeMotionPreference;
+    /** Class applied to each repeated copy (the flex row/column of items). */
+    groupClassName?: string;
+}
+/**
+ * A seamless, constant-velocity infinite scroller for logos, testimonials, or a
+ * text ticker. The track is rendered as N (`repeat`, default 2) identical copies
+ * laid back-to-back; a CSS keyframe translates the whole track by exactly **one
+ * copy's length** and loops, so the moment it resets is pixel-identical to the
+ * start — there is no visible jump. The animation runs on a single composited
+ * `transform`, so it stays buttery regardless of how many items it carries.
+ *
+ * The keyframe travels by percentage (robust to resize), while the loop
+ * *duration* is computed from the live track measurement so the apparent
+ * {@link MarqueeProps.speed} (px/sec) holds whatever the content width is.
+ *
+ * **Pause on hover** is pure CSS (`animation-play-state`), so hovering never
+ * drops a frame. **Reduced motion** is honoured: when the visitor prefers
+ * reduced motion (or {@link MarqueeProps.motionPreference} forces it), a single
+ * static copy is rendered with no animation — the content stays fully legible.
+ */
+export declare const Marquee: import("react").ForwardRefExoticComponent<MarqueeProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=marquee.d.ts.map

package/dist/components/marquee.js

@@ -0,0 +1,141 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useReducedMotion } from "motion/react";
+import { forwardRef, useId, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { cn } from "../lib/cn.js";
+const DEFAULT_SPEED = 40;
+const DEFAULT_GAP = "1rem";
+const DEFAULT_REPEAT = 2;
+const MIN_REPEAT = 2;
+const MIN_DURATION = 1;
+function finiteOr(value, fallback) {
+    return Number.isFinite(value) ? value : fallback;
+}
+/**
+ * A seamless, constant-velocity infinite scroller for logos, testimonials, or a
+ * text ticker. The track is rendered as N (`repeat`, default 2) identical copies
+ * laid back-to-back; a CSS keyframe translates the whole track by exactly **one
+ * copy's length** and loops, so the moment it resets is pixel-identical to the
+ * start — there is no visible jump. The animation runs on a single composited
+ * `transform`, so it stays buttery regardless of how many items it carries.
+ *
+ * The keyframe travels by percentage (robust to resize), while the loop
+ * *duration* is computed from the live track measurement so the apparent
+ * {@link MarqueeProps.speed} (px/sec) holds whatever the content width is.
+ *
+ * **Pause on hover** is pure CSS (`animation-play-state`), so hovering never
+ * drops a frame. **Reduced motion** is honoured: when the visitor prefers
+ * reduced motion (or {@link MarqueeProps.motionPreference} forces it), a single
+ * static copy is rendered with no animation — the content stays fully legible.
+ */
+export const Marquee = forwardRef(({ children, className, groupClassName, direction = "left", vertical = false, speed = DEFAULT_SPEED, pauseOnHover = true, fade = true, gap = DEFAULT_GAP, repeat = DEFAULT_REPEAT, motionPreference = "respect", style, ...props }, ref) => {
+    const systemReducedMotion = useReducedMotion();
+    const prefersReducedMotion = motionPreference === "always"
+        ? false
+        : motionPreference === "never"
+            ? true
+            : systemReducedMotion;
+    // Per-instance keyframe name so multiple marquees (different axes/durations)
+    // never collide on a shared `@keyframes`. `useId` is SSR-stable; sanitise it
+    // since CSS identifiers cannot contain the `:` React emits.
+    const rawId = useId();
+    const animationName = `cronus-marquee-${rawId.replace(/[^a-zA-Z0-9_-]/g, "")}`;
+    const safeSpeed = Math.max(finiteOr(speed, DEFAULT_SPEED), 1);
+    const copies = Math.max(Math.round(finiteOr(repeat, DEFAULT_REPEAT)), MIN_REPEAT);
+    // Measure one copy along the scroll axis so the loop duration tracks the real
+    // content size — the keyframe itself moves by percentage, so we only need the
+    // distance to keep px/sec speed constant. Falls back to a sane duration until
+    // the measurement lands (and stays correct under resize via ResizeObserver).
+    const measureRef = useRef(null);
+    const [copySize, setCopySize] = useState(0);
+    useLayoutEffect(() => {
+        const node = measureRef.current;
+        if (!node || prefersReducedMotion)
+            return;
+        const read = () => {
+            const rect = node.getBoundingClientRect();
+            setCopySize(vertical ? rect.height : rect.width);
+        };
+        read();
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(read);
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [vertical, prefersReducedMotion]);
+    // distance = one copy + the gap that follows it before the next copy starts,
+    // so the reset lands exactly on the seam (no half-gap stutter).
+    const gapPx = useMemo(() => parseGap(gap), [gap]);
+    const distance = copySize + gapPx;
+    const duration = Math.max(distance / safeSpeed, MIN_DURATION);
+    // The keyframe always animates 0 → -(100/copies)% of the TRACK (one copy).
+    // For "forward" (left / up) the row slides toward its start; "right"/"down"
+    // reverse it by swapping the from/to endpoints, so velocity stays linear and
+    // the seam is identical in both directions.
+    const axisSign = vertical ? "Y" : "X";
+    const forward = direction === "left";
+    // Each copy is one full repeat of the children; sliding it by exactly its
+    // own length PLUS the inter-copy gap lands the *next* copy precisely where
+    // this one began, so the reset is pixel-identical — a seamless loop. The
+    // travel is one copy + gap regardless of `copies` (which only needs to be
+    // ≥ 2 to keep the viewport filled), and it matches the `distance` the
+    // duration is derived from, so the apparent px/sec speed is exact. Both
+    // endpoints use the SAME translate function on the scroll axis so the
+    // browser interpolates them linearly (mismatched function lists fall back
+    // to matrix decomposition, which can stutter); `[will-change:transform]`
+    // already composites the track, so the 3d hint is unnecessary.
+    const zero = `translate${axisSign}(0)`;
+    const shifted = `translate${axisSign}(calc(-100% - var(--marquee-gap)))`;
+    const fromTransform = forward ? zero : shifted;
+    const toTransform = forward ? shifted : zero;
+    const fadeMask = vertical
+        ? "linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent)"
+        : "linear-gradient(to right, transparent, #000 12%, #000 88%, transparent)";
+    const trackStyle = {
+        "--marquee-duration": `${duration}s`,
+        "--marquee-gap": gap,
+        "--marquee-from": fromTransform,
+        "--marquee-to": toTransform,
+    };
+    if (prefersReducedMotion) {
+        // Static, fully-legible fallback: one copy, no track animation, no clones.
+        return (_jsx("div", { ref: ref, "data-slot": "marquee", "data-vertical": vertical || undefined, "data-reduced-motion": "true", className: cn("relative overflow-hidden", fade && "[mask-image:var(--marquee-mask)] [-webkit-mask-image:var(--marquee-mask)]", className), style: {
+                ...style,
+                ...(fade ? { "--marquee-mask": fadeMask } : {}),
+            }, ...props, children: _jsx("div", { "data-slot": "marquee-group", className: cn("flex w-max items-center", vertical ? "flex-col" : "flex-row", groupClassName), style: { gap }, children: children }) }));
+    }
+    return (_jsxs("div", { ref: ref, "data-slot": "marquee", "data-vertical": vertical || undefined, className: cn("group relative flex overflow-hidden", vertical ? "flex-col" : "flex-row", fade && "[mask-image:var(--marquee-mask)] [-webkit-mask-image:var(--marquee-mask)]", className), style: {
+            ...style,
+            ...trackStyle,
+            // Space the back-to-back copies by the SAME gap used between items,
+            // so the gap straddling the loop seam matches every other gap (the
+            // `<style>` child is display:none, so it never gets a flex gap).
+            gap,
+            ...(fade ? { "--marquee-mask": fadeMask } : {}),
+        }, ...props, children: [_jsx("style", { children: `@keyframes ${animationName}{from{transform:var(--marquee-from)}to{transform:var(--marquee-to)}}` }), Array.from({ length: copies }, (_, copyIndex) => (_jsx("div", { ref: copyIndex === 0 ? measureRef : undefined, "aria-hidden": copyIndex === 0 ? undefined : "true", "data-slot": "marquee-group", className: cn("flex w-max shrink-0 items-center [animation:var(--marquee-animation)] [will-change:transform]", 
+                // SSR backstop: until hydration swaps in the static fallback, this
+                // stops motion for reduced-motion visitors. `"always"` opts out —
+                // it must scroll regardless of the OS setting.
+                motionPreference !== "always" && "motion-reduce:[animation:none]", vertical ? "min-h-max flex-col" : "min-w-max flex-row", pauseOnHover && "group-hover:[animation-play-state:paused]", groupClassName), style: {
+                    gap,
+                    "--marquee-animation": `${animationName} var(--marquee-duration) linear infinite`,
+                }, children: children }, `copy-${copyIndex}`)))] }));
+});
+Marquee.displayName = "Marquee";
+/**
+ * Resolve a CSS gap length to pixels for the duration maths. Handles the common
+ * `px`/`rem`/`em` units (rem/em assume the 16px root default — exact enough for
+ * timing, which only needs to be perceptually constant, not sub-pixel precise);
+ * anything else contributes 0 so the loop still runs at the copy width.
+ */
+function parseGap(gap) {
+    const match = /^(-?[\d.]+)(px|rem|em)?$/.exec(gap.trim());
+    if (!match)
+        return 0;
+    const value = Number.parseFloat(match[1] ?? "0");
+    if (!Number.isFinite(value))
+        return 0;
+    const unit = match[2] ?? "px";
+    return unit === "px" ? value : value * 16;
+}
+//# sourceMappingURL=marquee.js.map

package/dist/components/masonry.d.ts

@@ -0,0 +1,16 @@
+import { type HTMLAttributes } from "react";
+export interface MasonryColumns {
+    base?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+}
+export interface MasonryProps extends HTMLAttributes<HTMLDivElement> {
+    /** Number of columns, either a fixed count or a responsive map keyed by breakpoint. */
+    columns?: number | MasonryColumns;
+    /** CSS length used for both the column gap and the vertical gap between items. */
+    gap?: string;
+}
+export declare const Masonry: import("react").ForwardRefExoticComponent<MasonryProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=masonry.d.ts.map

package/dist/components/masonry.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../lib/cn.js";
+const BASE_COLUMNS = {
+    1: "columns-1",
+    2: "columns-2",
+    3: "columns-3",
+    4: "columns-4",
+    5: "columns-5",
+    6: "columns-6",
+};
+const SM_COLUMNS = {
+    1: "sm:columns-1",
+    2: "sm:columns-2",
+    3: "sm:columns-3",
+    4: "sm:columns-4",
+    5: "sm:columns-5",
+    6: "sm:columns-6",
+};
+const MD_COLUMNS = {
+    1: "md:columns-1",
+    2: "md:columns-2",
+    3: "md:columns-3",
+    4: "md:columns-4",
+    5: "md:columns-5",
+    6: "md:columns-6",
+};
+const LG_COLUMNS = {
+    1: "lg:columns-1",
+    2: "lg:columns-2",
+    3: "lg:columns-3",
+    4: "lg:columns-4",
+    5: "lg:columns-5",
+    6: "lg:columns-6",
+};
+const XL_COLUMNS = {
+    1: "xl:columns-1",
+    2: "xl:columns-2",
+    3: "xl:columns-3",
+    4: "xl:columns-4",
+    5: "xl:columns-5",
+    6: "xl:columns-6",
+};
+function clampCount(value) {
+    if (value === undefined)
+        return undefined;
+    const rounded = Math.round(value);
+    if (rounded < 1)
+        return 1;
+    if (rounded > 6)
+        return 6;
+    return rounded;
+}
+const DEFAULT_COLUMNS = { base: 1, sm: 2, lg: 3 };
+function resolveColumnClasses(columns) {
+    const config = typeof columns === "number" ? { base: columns } : columns;
+    const classes = [];
+    const base = clampCount(config.base);
+    if (base)
+        classes.push(BASE_COLUMNS[base]);
+    const sm = clampCount(config.sm);
+    if (sm)
+        classes.push(SM_COLUMNS[sm]);
+    const md = clampCount(config.md);
+    if (md)
+        classes.push(MD_COLUMNS[md]);
+    const lg = clampCount(config.lg);
+    if (lg)
+        classes.push(LG_COLUMNS[lg]);
+    const xl = clampCount(config.xl);
+    if (xl)
+        classes.push(XL_COLUMNS[xl]);
+    return classes;
+}
+export const Masonry = forwardRef(({ className, columns = DEFAULT_COLUMNS, gap = "1rem", style, ...props }, ref) => {
+    const columnClasses = resolveColumnClasses(columns);
+    return (_jsx("div", { ref: ref, "data-slot": "masonry", className: cn(...columnClasses, "[&>*]:mb-[var(--masonry-gap)] [&>*]:break-inside-avoid", className), style: {
+            columnGap: gap,
+            "--masonry-gap": gap,
+            ...style,
+        }, ...props }));
+});
+Masonry.displayName = "Masonry";
+//# sourceMappingURL=masonry.js.map

package/dist/components/menubar.d.ts

@@ -0,0 +1,33 @@
+import * as MenubarPrimitive from "@radix-ui/react-menubar";
+import { type HTMLAttributes } from "react";
+export declare const MenubarMenu: {
+    (props: MenubarPrimitive.MenubarMenuProps & {
+        __scopeMenubar?: import("@radix-ui/react-context").Scope;
+    }): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const MenubarGroup: import("react").ForwardRefExoticComponent<MenubarPrimitive.MenubarGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const MenubarPortal: import("react").FC<MenubarPrimitive.MenubarPortalProps>;
+export declare const MenubarSub: import("react").FC<MenubarPrimitive.MenubarSubProps>;
+export declare const MenubarRadioGroup: import("react").ForwardRefExoticComponent<MenubarPrimitive.MenubarRadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Menubar: import("react").ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const MenubarTrigger: import("react").ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const MenubarSubTrigger: import("react").ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarSubTriggerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const MenubarSubContent: import("react").ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarSubContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const MenubarContent: import("react").ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const MenubarItem: import("react").ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const MenubarCheckboxItem: import("react").ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarCheckboxItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const MenubarRadioItem: import("react").ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarRadioItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const MenubarLabel: import("react").ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarLabelProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const MenubarSeparator: import("react").ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarSeparatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const MenubarShortcut: {
+    ({ className, ...props }: HTMLAttributes<HTMLSpanElement>): import("react").JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=menubar.d.ts.map

package/dist/components/menubar.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as MenubarPrimitive from "@radix-ui/react-menubar";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import { forwardRef, } from "react";
+import { cn } from "../lib/cn.js";
+export const MenubarMenu = MenubarPrimitive.Menu;
+export const MenubarGroup = MenubarPrimitive.Group;
+export const MenubarPortal = MenubarPrimitive.Portal;
+export const MenubarSub = MenubarPrimitive.Sub;
+export const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
+export const Menubar = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(MenubarPrimitive.Root, { ref: ref, "data-slot": "menubar", className: cn("flex items-center gap-1 rounded-md border border-border bg-surface-floating p-1 shadow-xs", className), ...props }));
+});
+Menubar.displayName = "Menubar";
+export const MenubarTrigger = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(MenubarPrimitive.Trigger, { ref: ref, "data-slot": "menubar-trigger", className: cn("flex cursor-default select-none items-center rounded-md px-3 py-1 text-sm font-medium outline-none transition-colors focus:bg-surface-overlay focus:text-fg data-[state=open]:bg-surface-overlay data-[state=open]:text-fg", className), ...props }));
+});
+MenubarTrigger.displayName = "MenubarTrigger";
+export const MenubarSubTrigger = forwardRef(({ className, inset, children, ...props }, ref) => {
+    return (_jsxs(MenubarPrimitive.SubTrigger, { ref: ref, "data-slot": "menubar-sub-trigger", className: cn("relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none transition-colors focus:bg-surface-overlay focus:text-fg data-[state=open]:bg-surface-overlay data-[disabled]:opacity-50 data-[disabled]:pointer-events-none [&_svg]:size-4", inset && "ps-8", className), ...props, children: [children, _jsx(ChevronRight, { className: "ms-auto" })] }));
+});
+MenubarSubTrigger.displayName = "MenubarSubTrigger";
+export const MenubarSubContent = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(MenubarPrimitive.SubContent, { ref: ref, "data-slot": "menubar-sub-content", className: cn("z-50 min-w-[8rem] overflow-hidden rounded-lg border border-border bg-surface-floating p-1 text-fg shadow-lg data-[state=open]:animate-[cronus-pop-in_180ms_var(--ease-out-quart)_both] data-[state=closed]:animate-[cronus-pop-out_140ms_var(--ease-out-quart)_both]", className), ...props }));
+});
+MenubarSubContent.displayName = "MenubarSubContent";
+export const MenubarContent = forwardRef(({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, ref) => {
+    return (_jsx(MenubarPrimitive.Portal, { children: _jsx(MenubarPrimitive.Content, { ref: ref, "data-slot": "menubar-content", align: align, alignOffset: alignOffset, sideOffset: sideOffset, className: cn("z-50 min-w-[12rem] overflow-hidden rounded-lg border border-border bg-surface-floating p-1 text-fg shadow-lg data-[state=open]:animate-[cronus-pop-in_180ms_var(--ease-out-quart)_both] data-[state=closed]:animate-[cronus-pop-out_140ms_var(--ease-out-quart)_both]", className), ...props }) }));
+});
+MenubarContent.displayName = "MenubarContent";
+export const MenubarItem = forwardRef(({ className, inset, ...props }, ref) => {
+    return (_jsx(MenubarPrimitive.Item, { ref: ref, "data-slot": "menubar-item", className: cn("relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none transition-colors focus:bg-surface-overlay focus:text-fg data-[disabled]:opacity-50 data-[disabled]:pointer-events-none [&_svg]:size-4", inset && "ps-8", className), ...props }));
+});
+MenubarItem.displayName = "MenubarItem";
+export const MenubarCheckboxItem = forwardRef(({ className, children, checked, ...props }, ref) => {
+    return (_jsxs(MenubarPrimitive.CheckboxItem, { ref: ref, "data-slot": "menubar-checkbox-item", checked: checked, className: cn("relative flex cursor-default select-none items-center gap-2 rounded-md py-1.5 pe-2 ps-8 text-sm outline-none transition-colors focus:bg-surface-overlay focus:text-fg data-[disabled]:opacity-50 data-[disabled]:pointer-events-none [&_svg]:size-4", className), ...props, children: [_jsx("span", { className: "absolute start-2 flex size-4 items-center justify-center", children: _jsx(MenubarPrimitive.ItemIndicator, { children: _jsx(Check, { className: "size-4" }) }) }), children] }));
+});
+MenubarCheckboxItem.displayName = "MenubarCheckboxItem";
+export const MenubarRadioItem = forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsxs(MenubarPrimitive.RadioItem, { ref: ref, "data-slot": "menubar-radio-item", className: cn("relative flex cursor-default select-none items-center gap-2 rounded-md py-1.5 pe-2 ps-8 text-sm outline-none transition-colors focus:bg-surface-overlay focus:text-fg data-[disabled]:opacity-50 data-[disabled]:pointer-events-none [&_svg]:size-4", className), ...props, children: [_jsx("span", { className: "absolute start-2 flex size-4 items-center justify-center", children: _jsx(MenubarPrimitive.ItemIndicator, { children: _jsx(Circle, { className: "size-2 fill-current" }) }) }), children] }));
+});
+MenubarRadioItem.displayName = "MenubarRadioItem";
+export const MenubarLabel = forwardRef(({ className, inset, ...props }, ref) => {
+    return (_jsx(MenubarPrimitive.Label, { ref: ref, "data-slot": "menubar-label", className: cn("px-2 py-1.5 text-xs text-fg-tertiary", inset && "ps-8", className), ...props }));
+});
+MenubarLabel.displayName = "MenubarLabel";
+export const MenubarSeparator = forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(MenubarPrimitive.Separator, { ref: ref, "data-slot": "menubar-separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props }));
+});
+MenubarSeparator.displayName = "MenubarSeparator";
+export const MenubarShortcut = ({ className, ...props }) => {
+    return (_jsx("span", { "data-slot": "menubar-shortcut", className: cn("ms-auto text-xs tracking-widest text-fg-tertiary", className), ...props }));
+};
+MenubarShortcut.displayName = "MenubarShortcut";
+//# sourceMappingURL=menubar.js.map

package/dist/components/meteors.d.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes, Ref } from "react";
+export interface MeteorsProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * Number of shooting stars. Clamped to `1–60`.
+     * @default 20
+     */
+    count?: number;
+}
+/**
+ * A field of thin shooting-star trails that drift diagonally across a surface.
+ * Positions and timings are derived from the meteor index (no `Math.random`),
+ * so server and client paint the same field. Decorative and fully suppressed
+ * under `prefers-reduced-motion: reduce`.
+ */
+export declare function Meteors({ ref, className, children, count, style, ...props }: MeteorsProps): import("react").JSX.Element;
+export declare namespace Meteors {
+    var displayName: string;
+}
+//# sourceMappingURL=meteors.d.ts.map

package/dist/components/meteors.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+/**
+ * Travel is along the meteor's local X after `--meteor-angle`. The animation
+ * must set `rotate(...)` itself — a class `-rotate-45` is overwritten by
+ * `@keyframes { transform }` and the streak then slides sideways as a
+ * horizontal dash.
+ */
+const METEOR_KEYFRAMES = "@keyframes cronus-meteor{0%{transform:rotate(var(--meteor-angle)) translate3d(0,0,0);opacity:0}7%{opacity:1}78%{opacity:1;transform:rotate(var(--meteor-angle)) translate3d(calc(var(--meteor-travel)*0.86),0,0)}88%{opacity:0.55;transform:rotate(var(--meteor-angle)) translate3d(var(--meteor-travel),0,0) scale(1.85)}100%{transform:rotate(var(--meteor-angle)) translate3d(var(--meteor-travel),0,0) scale(0.12);opacity:0}}";
+function finiteOr(value, fallback) {
+    return Number.isFinite(value) ? value : fallback;
+}
+/**
+ * A field of thin shooting-star trails that drift diagonally across a surface.
+ * Positions and timings are derived from the meteor index (no `Math.random`),
+ * so server and client paint the same field. Decorative and fully suppressed
+ * under `prefers-reduced-motion: reduce`.
+ */
+export function Meteors({ ref, className, children, count = 20, style, ...props }) {
+    const meteorCount = Math.min(60, Math.max(1, Math.round(finiteOr(count, 20))));
+    return (_jsxs("div", { ref: ref, "data-slot": "meteors", className: cn("relative overflow-hidden", className), style: style, ...props, children: [_jsxs("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 motion-reduce:hidden", children: [_jsx("style", { children: METEOR_KEYFRAMES }), Array.from({ length: meteorCount }, (_, index) => {
+                        // Spawn along the top / upper-right so travel at ~125° (down-left)
+                        // crosses the field and exits through the bottom.
+                        const meteorStyle = {
+                            insetBlockStart: `${-14 + ((index * 17) % 32)}%`,
+                            insetInlineStart: `${8 + ((index * 43) % 92)}%`,
+                            "--meteor-delay": `${((index * 13) % 80) / 10}s`,
+                            "--meteor-duration": `${1.8 + ((index * 7) % 22) / 10}s`,
+                            "--meteor-travel": `${340 + ((index * 29) % 220)}px`,
+                            "--meteor-angle": `${122 + ((index * 11) % 16)}deg`,
+                        };
+                        return (_jsx("span", { className: "absolute h-px w-16 origin-left [animation-delay:var(--meteor-delay)] [animation-duration:var(--meteor-duration)] [animation-iteration-count:infinite] [animation-name:cronus-meteor] [animation-timing-function:linear]", style: {
+                                ...meteorStyle,
+                                background: "linear-gradient(to right, transparent, color-mix(in oklch, var(--cronus-fg) 85%, transparent))",
+                            } }, index));
+                    })] }), _jsx("div", { className: "relative", children: children })] }));
+}
+Meteors.displayName = "Meteors";
+//# sourceMappingURL=meteors.js.map