@forthtilliath/forth-ui 0.2.0

package/dist/components/avatar/variants.js

@@ -0,0 +1,147 @@
+import { cva } from "class-variance-authority";
+import { DEFAULT_BADGE_POSITION, DEFAULT_SHAPE } from "./constants";
+export const avatarVariants = cva("size-10", {
+    variants: {
+        ring: {
+            false: "",
+            true: "ring-2 ring-green-500 ring-offset-[3px] ring-offset-background",
+        },
+        shape: {
+            square: "rounded-none",
+            rounded: "rounded-md",
+            circle: "",
+        },
+        size: {
+            xs: "size-6",
+            sm: "size-8",
+            md: "size-10",
+            lg: "size-14",
+            xl: "size-20",
+            "2xl": "size-40",
+            "3xl": "size-60",
+            // @container ? for ring and border
+        },
+    },
+    defaultVariants: {
+        ring: false,
+        shape: DEFAULT_SHAPE,
+        size: "md",
+    },
+});
+export const statusVariants = cva("", {
+    variants: {
+        status: {
+            online: "bg-green-500",
+            offline: "bg-gray-500",
+            away: "bg-yellow-500",
+            busy: "bg-red-500",
+        },
+        position: {
+            "top-right": "absolute right-0.25 top-0.25",
+            "bottom-right": "absolute right-0.25 bottom-0.25",
+            "top-left": "absolute left-0.25 top-0.25",
+            "bottom-left": "absolute left-0.25 bottom-0.25",
+        },
+    },
+    defaultVariants: {
+        position: "bottom-right",
+    },
+    compoundVariants: [
+        {
+            status: ["online", "offline", "away", "busy"],
+            className: "border-background size-3/12 rounded-full border-2",
+        },
+    ],
+});
+/**
+ * A badge overlay for arbitrary content (notification count, icon), distinct
+ * from `statusVariants`' plain color dot — positioned independently so both
+ * can be shown on the same avatar at once (e.g. status bottom-right, badge
+ * top-right).
+ */
+export const badgeVariants = cva("border-background absolute flex h-5 min-w-5 items-center justify-center rounded-full border-2 px-1 text-[10px] leading-none font-medium", {
+    variants: {
+        badgeVariant: {
+            default: "bg-primary text-primary-foreground",
+            secondary: "bg-secondary text-secondary-foreground",
+            destructive: "bg-destructive text-white",
+            outline: "bg-background text-foreground",
+        },
+        position: {
+            "top-right": "-top-1 -right-1",
+            "bottom-right": "-bottom-1 -right-1",
+            "top-left": "-top-1 -left-1",
+            "bottom-left": "-bottom-1 -left-1",
+        },
+    },
+    defaultVariants: {
+        badgeVariant: "default",
+        position: DEFAULT_BADGE_POSITION,
+    },
+});
+export const fallbackVariants = cva("", {
+    variants: {
+        fallbackVariant: {
+            default: "",
+            amber: "bg-amber-500",
+            blue: "bg-blue-500",
+            cyan: "bg-cyan-500",
+            emerald: "bg-emerald-500",
+            fuchsia: "bg-fuchsia-500",
+            gray: "bg-gray-500",
+            green: "bg-green-500",
+            indigo: "bg-indigo-500",
+            lime: "bg-lime-500",
+            orange: "bg-orange-500",
+            pink: "bg-pink-500",
+            purple: "bg-purple-500",
+            red: "bg-red-500",
+            rose: "bg-rose-500",
+            slate: "bg-slate-500",
+            sky: "bg-sky-500",
+            teal: "bg-teal-500",
+            violet: "bg-violet-500",
+            yellow: "bg-yellow-500",
+            "amber-full": "bg-amber-500/25 text-amber-500",
+            "blue-full": "bg-blue-500/25 text-blue-500",
+            "cyan-full": "bg-cyan-500/25 text-cyan-500",
+            "emerald-full": "bg-emerald-500/25 text-emerald-500",
+            "fuchsia-full": "bg-fuchsia-500/25 text-fuchsia-500",
+            "gray-full": "bg-gray-500/25 text-gray-500",
+            "green-full": "bg-green-500/25 text-green-500",
+            "indigo-full": "bg-indigo-500/25 text-indigo-500",
+            "lime-full": "bg-lime-500/25 text-lime-500",
+            "orange-full": "bg-orange-500/25 text-orange-500",
+            "pink-full": "bg-pink-500/25 text-pink-500",
+            "purple-full": "bg-purple-500/25 text-purple-500",
+            "red-full": "bg-red-500/25 text-red-500",
+            "rose-full": "bg-rose-500/25 text-rose-500",
+            "slate-full": "bg-slate-500/25 text-slate-500",
+            "sky-full": "bg-sky-500/25 text-sky-500",
+            "teal-full": "bg-teal-500/25 text-teal-500",
+            "violet-full": "bg-violet-500/25 text-violet-500",
+            "yellow-full": "bg-yellow-500/25 text-yellow-500",
+        },
+        shape: {
+            square: "rounded-none",
+            rounded: "rounded-lg",
+            circle: "",
+        },
+    },
+    defaultVariants: {
+        fallbackVariant: "default",
+        shape: DEFAULT_SHAPE,
+    },
+});
+export const tooltipTriggerVariants = cva("ring-background ring-2 hover:z-10", {
+    variants: {
+        shape: {
+            square: "rounded-none",
+            rounded: "rounded-md",
+            circle: "rounded-full",
+        },
+    },
+    defaultVariants: {
+        shape: DEFAULT_SHAPE,
+    },
+});

package/dist/components/badge/badge.d.ts

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { Badge as BadgePrimitive } from "@forthtilliath/shadcn-ui/components/badge";
+import type { BadgeVariants } from "./variants";
+export type BadgeProps = Omit<React.ComponentProps<typeof BadgePrimitive>, "variant"> & BadgeVariants & {
+    /**
+     * Show a small colored dot before the content instead of filling the
+     * whole badge — pairs best with `look="soft"` or `"outline"`, where the
+     * dot itself carries the color signal.
+     */
+    dot?: boolean;
+    /**
+     * Adds an animated ping ring around the `dot`, for a live/status
+     * indicator. Ignored without `dot`.
+     */
+    pulse?: boolean;
+    /**
+     * Shows a close button. Uncontrolled by default (the badge hides itself
+     * once dismissed) — pass `open`/`onOpenChange` to control it instead.
+     *
+     * Not meant to be combined with `asChild`: `Slot` requires a single
+     * child, and the close button renders as an extra sibling.
+     */
+    dismissible?: boolean;
+    /**
+     * Controlled visibility. Omit for uncontrolled (self-managed via
+     * `dismissible`'s internal state).
+     */
+    open?: boolean;
+    /**
+     * Called when the badge is dismissed, whether controlled or not.
+     */
+    onOpenChange?: (open: boolean) => void;
+};
+/**
+ * Displays a badge or a component that looks like a badge.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://ui.shadcn.com/docs/components/badge
+ * @see https://ktui.io/docs/badge
+ * @see https://www.shadcnui-blocks.com/components/badge
+ * @see https://www.kibo-ui.com/components/status
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function Badge({ className, variant, look, shape, size, dot, pulse, dismissible, open, onOpenChange, children, ...props }: BadgeProps): React.JSX.Element | null;
+//# sourceMappingURL=badge.d.ts.map

package/dist/components/badge/badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/badge/badge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAGpF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAGhD,MAAM,MAAM,UAAU,GAAG,IAAI,CAC3B,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,EAC3C,SAAS,CACV,GACC,aAAa,GAAG;IACd;;;;OAIG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC,CAAC;AAEJ;;;;;;;;;;;;GAYG;AACH,wBAAgB,KAAK,CAAC,EACpB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,GAAW,EACX,KAAa,EACb,WAAmB,EACnB,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,UAAU,4BA6CZ"}

package/dist/components/badge/badge.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { X } from "lucide-react";
+import { Badge as BadgePrimitive } from "@forthtilliath/shadcn-ui/components/badge";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+import { badgeVariants, dotVariants } from "./variants";
+/**
+ * Displays a badge or a component that looks like a badge.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://ui.shadcn.com/docs/components/badge
+ * @see https://ktui.io/docs/badge
+ * @see https://www.shadcnui-blocks.com/components/badge
+ * @see https://www.kibo-ui.com/components/status
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function Badge({ className, variant, look, shape, size, dot = false, pulse = false, dismissible = false, open, onOpenChange, children, ...props }) {
+    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(true);
+    const isOpen = open ?? uncontrolledOpen;
+    function handleDismiss(event) {
+        event.stopPropagation();
+        setUncontrolledOpen(false);
+        onOpenChange?.(false);
+    }
+    if (!isOpen) {
+        return null;
+    }
+    return (_jsxs(BadgePrimitive, { className: cn(badgeVariants({ variant, look, shape, size }), className), ...props, children: [dot && (_jsxs("span", { className: "relative inline-flex size-1.5", children: [pulse && (_jsx("span", { className: cn(dotVariants({ variant }), "absolute inline-flex size-full animate-ping opacity-75") })), _jsx("span", { className: cn(dotVariants({ variant }), "relative") })] })), children, dismissible && (_jsx("button", { type: "button", onClick: handleDismiss, "aria-label": "Dismiss", className: "-mr-0.5 ml-0.5 rounded-full opacity-70 transition-opacity outline-none hover:opacity-100 focus-visible:ring-2 focus-visible:ring-current [&>svg]:size-2.5", children: _jsx(X, {}) }))] }));
+}

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

@@ -0,0 +1,4 @@
+export type { BadgeProps } from "./badge";
+export { Badge } from "./badge";
+export type { BadgeVariants } from "./variants";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/badge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/badge/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/badge/index.js

@@ -0,0 +1 @@
+export { Badge } from "./badge";

package/dist/components/badge/variants.d.ts

@@ -0,0 +1,12 @@
+import type { VariantProps } from "class-variance-authority";
+export declare const badgeVariants: (props?: ({
+    variant?: "default" | "primary" | "success" | "warning" | "info" | "destructive" | "secondary" | null | undefined;
+    look?: "outline" | "solid" | "soft" | null | undefined;
+    shape?: "square" | "rounded" | "pill" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type BadgeVariants = VariantProps<typeof badgeVariants>;
+export declare const dotVariants: (props?: ({
+    variant?: "default" | "primary" | "success" | "warning" | "info" | "destructive" | "secondary" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//# sourceMappingURL=variants.d.ts.map

package/dist/components/badge/variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../src/components/badge/variants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAK7D,eAAO,MAAM,aAAa;;;;;8EA2HzB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAE/D,eAAO,MAAM,WAAW;;8EAetB,CAAC"}

package/dist/components/badge/variants.js

@@ -0,0 +1,134 @@
+import { cva } from "class-variance-authority";
+// Tailwind's scanner needs literal class strings in source — no
+// runtime-templated `bg-${color}-600` here, it wouldn't be picked up.
+export const badgeVariants = cva("inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-colors [&>svg]:pointer-events-none [&>svg]:size-3", {
+    variants: {
+        variant: {
+            default: "border-transparent bg-primary text-primary-foreground",
+            secondary: "border-transparent bg-secondary text-secondary-foreground",
+            primary: "",
+            success: "",
+            warning: "",
+            info: "",
+            destructive: "",
+        },
+        look: {
+            solid: "",
+            soft: "",
+            outline: "bg-transparent",
+        },
+        shape: {
+            rounded: "rounded-md",
+            pill: "rounded-full",
+            square: "rounded-sm",
+        },
+        size: {
+            sm: "px-1.5 py-0 text-[10px] [&>svg]:size-2.5",
+            default: "",
+            lg: "px-2.5 py-1 text-sm [&>svg]:size-3.5",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        look: "solid",
+        shape: "rounded",
+        size: "default",
+    },
+    compoundVariants: [
+        // default/secondary ignore `look` — like Alert's neutral variant,
+        // none of the reference sources show a "soft"/"outline" neutral
+        // badge distinct from `outline` itself already being a variant
+        // upstream. Only the semantic colors vary by look here.
+        {
+            variant: "primary",
+            look: "solid",
+            className: "bg-primary text-primary-foreground border-transparent",
+        },
+        {
+            variant: "primary",
+            look: "soft",
+            className: "bg-primary/10 text-primary border-transparent",
+        },
+        {
+            variant: "primary",
+            look: "outline",
+            className: "text-primary border-primary/50",
+        },
+        {
+            variant: "success",
+            look: "solid",
+            className: "bg-green-600 text-white border-transparent",
+        },
+        {
+            variant: "success",
+            look: "soft",
+            className: "bg-green-50 text-green-700 border-transparent dark:bg-green-950 dark:text-green-300",
+        },
+        {
+            variant: "success",
+            look: "outline",
+            className: "text-green-700 border-green-300 dark:text-green-300 dark:border-green-800",
+        },
+        {
+            variant: "warning",
+            look: "solid",
+            className: "bg-amber-500 text-white border-transparent",
+        },
+        {
+            variant: "warning",
+            look: "soft",
+            className: "bg-amber-50 text-amber-700 border-transparent dark:bg-amber-950 dark:text-amber-300",
+        },
+        {
+            variant: "warning",
+            look: "outline",
+            className: "text-amber-700 border-amber-300 dark:text-amber-300 dark:border-amber-800",
+        },
+        {
+            variant: "info",
+            look: "solid",
+            className: "bg-sky-600 text-white border-transparent",
+        },
+        {
+            variant: "info",
+            look: "soft",
+            className: "bg-sky-50 text-sky-700 border-transparent dark:bg-sky-950 dark:text-sky-300",
+        },
+        {
+            variant: "info",
+            look: "outline",
+            className: "text-sky-700 border-sky-300 dark:text-sky-300 dark:border-sky-800",
+        },
+        {
+            variant: "destructive",
+            look: "solid",
+            className: "bg-destructive text-white border-transparent",
+        },
+        {
+            variant: "destructive",
+            look: "soft",
+            className: "bg-destructive/10 text-destructive border-transparent",
+        },
+        {
+            variant: "destructive",
+            look: "outline",
+            className: "text-destructive border-destructive/50",
+        },
+    ],
+});
+export const dotVariants = cva("size-1.5 shrink-0 rounded-full", {
+    variants: {
+        variant: {
+            default: "bg-current",
+            secondary: "bg-current",
+            primary: "bg-primary",
+            success: "bg-green-600 dark:bg-green-400",
+            warning: "bg-amber-500 dark:bg-amber-400",
+            info: "bg-sky-600 dark:bg-sky-400",
+            destructive: "bg-destructive",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});

package/dist/components/banner/banner.d.ts

@@ -0,0 +1,43 @@
+import * as React from "react";
+import type { BannerVariants } from "./variants";
+export type BannerProps = React.ComponentProps<"div"> & BannerVariants & {
+    /**
+     * Shows a close button. Uncontrolled by default (the banner hides
+     * itself once dismissed) — pass `open`/`onOpenChange` to control it
+     * instead.
+     */
+    dismissible?: boolean;
+    /**
+     * Controlled visibility. Omit for uncontrolled (self-managed via
+     * `dismissible`'s internal state).
+     */
+    open?: boolean;
+    /**
+     * Called when the banner is dismissed, whether controlled or not.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Extra action content (e.g. a link or button) rendered after the
+     * message, before the close button when `dismissible` is also set.
+     */
+    action?: React.ReactNode;
+    /**
+     * Hides the banner once the page has scrolled past ~40px. Only
+     * meaningful when `sticky` is also set.
+     */
+    hideOnScroll?: boolean;
+};
+/**
+ * A full-width, page-level announcement bar — as opposed to `Alert`, which
+ * is an inline callout within page content.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://www.kibo-ui.com/components/banner
+ * @see https://ui.aceternity.com/components/sticky-banner
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function Banner({ className, variant, look, inset, sticky, dismissible, open, onOpenChange, hideOnScroll, action, children, ...props }: BannerProps): React.JSX.Element | null;
+//# sourceMappingURL=banner.d.ts.map

package/dist/components/banner/banner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"banner.d.ts","sourceRoot":"","sources":["../../../src/components/banner/banner.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAGjD,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GACnD,cAAc,GAAG;IACf;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAIJ;;;;;;;;;;;GAWG;AACH,wBAAgB,MAAM,CAAC,EACrB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,KAAK,EACL,MAAM,EACN,WAAmB,EACnB,IAAI,EACJ,YAAY,EACZ,YAAoB,EACpB,MAAM,EACN,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,WAAW,4BAmDb"}

package/dist/components/banner/banner.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { X } from "lucide-react";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+import { bannerVariants } from "./variants";
+const HIDE_ON_SCROLL_THRESHOLD = 40;
+/**
+ * A full-width, page-level announcement bar — as opposed to `Alert`, which
+ * is an inline callout within page content.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://www.kibo-ui.com/components/banner
+ * @see https://ui.aceternity.com/components/sticky-banner
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function Banner({ className, variant, look, inset, sticky, dismissible = false, open, onOpenChange, hideOnScroll = false, action, children, ...props }) {
+    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(true);
+    const [scrolledPast, setScrolledPast] = React.useState(false);
+    const isOpen = (open ?? uncontrolledOpen) && !scrolledPast;
+    React.useEffect(() => {
+        if (!hideOnScroll) {
+            return;
+        }
+        function onScroll() {
+            setScrolledPast(window.scrollY > HIDE_ON_SCROLL_THRESHOLD);
+        }
+        window.addEventListener("scroll", onScroll, { passive: true });
+        return () => {
+            window.removeEventListener("scroll", onScroll);
+        };
+    }, [hideOnScroll]);
+    function handleDismiss() {
+        setUncontrolledOpen(false);
+        onOpenChange?.(false);
+    }
+    if (!isOpen) {
+        return null;
+    }
+    return (_jsxs("div", { "data-slot": "banner", role: "region", className: cn(bannerVariants({ variant, look, inset, sticky }), className), ...props, children: [children, action, dismissible && (_jsx("button", { type: "button", onClick: handleDismiss, "aria-label": "Dismiss", className: "ml-1 shrink-0 rounded-sm opacity-70 transition-opacity outline-none hover:opacity-100 focus-visible:ring-2 focus-visible:ring-current", children: _jsx(X, { className: "size-4" }) }))] }));
+}

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

@@ -0,0 +1,4 @@
+export type { BannerProps } from "./banner";
+export { Banner } from "./banner";
+export type { BannerVariants } from "./variants";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/banner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/banner/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/banner/index.js

@@ -0,0 +1 @@
+export { Banner } from "./banner";

package/dist/components/banner/variants.d.ts

@@ -0,0 +1,9 @@
+import type { VariantProps } from "class-variance-authority";
+export declare const bannerVariants: (props?: ({
+    variant?: "default" | "primary" | "success" | "warning" | "info" | "destructive" | null | undefined;
+    look?: "outline" | "solid" | "soft" | null | undefined;
+    inset?: boolean | null | undefined;
+    sticky?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type BannerVariants = VariantProps<typeof bannerVariants>;
+//# sourceMappingURL=variants.d.ts.map

package/dist/components/banner/variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../src/components/banner/variants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAK7D,eAAO,MAAM,cAAc;;;;;8EAmH1B,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC"}

package/dist/components/banner/variants.js

@@ -0,0 +1,111 @@
+import { cva } from "class-variance-authority";
+// Tailwind's scanner needs literal class strings in source — no
+// runtime-templated `bg-${color}-600` here, it wouldn't be picked up.
+export const bannerVariants = cva("relative flex w-full items-center justify-center gap-x-3 px-4 py-2.5 text-sm [&>svg]:size-4 [&>svg]:shrink-0", {
+    variants: {
+        variant: {
+            default: "bg-card text-card-foreground border-b",
+            primary: "",
+            success: "",
+            warning: "",
+            info: "",
+            destructive: "",
+        },
+        look: {
+            solid: "",
+            soft: "",
+            outline: "border-b bg-transparent",
+        },
+        inset: {
+            false: "",
+            true: "mx-4 mt-4 w-auto rounded-lg border",
+        },
+        sticky: {
+            false: "",
+            true: "sticky top-0 z-50",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        look: "solid",
+        inset: false,
+        sticky: false,
+    },
+    compoundVariants: [
+        {
+            variant: "primary",
+            look: "solid",
+            className: "bg-primary text-primary-foreground",
+        },
+        {
+            variant: "primary",
+            look: "soft",
+            className: "bg-primary/10 text-primary",
+        },
+        {
+            variant: "primary",
+            look: "outline",
+            className: "text-primary border-primary/50",
+        },
+        {
+            variant: "success",
+            look: "solid",
+            className: "bg-green-600 text-white",
+        },
+        {
+            variant: "success",
+            look: "soft",
+            className: "bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300",
+        },
+        {
+            variant: "success",
+            look: "outline",
+            className: "text-green-700 border-green-300 dark:text-green-300 dark:border-green-800",
+        },
+        {
+            variant: "warning",
+            look: "solid",
+            className: "bg-amber-500 text-white",
+        },
+        {
+            variant: "warning",
+            look: "soft",
+            className: "bg-amber-50 text-amber-700 dark:bg-amber-950 dark:text-amber-300",
+        },
+        {
+            variant: "warning",
+            look: "outline",
+            className: "text-amber-700 border-amber-300 dark:text-amber-300 dark:border-amber-800",
+        },
+        {
+            variant: "info",
+            look: "solid",
+            className: "bg-sky-600 text-white",
+        },
+        {
+            variant: "info",
+            look: "soft",
+            className: "bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300",
+        },
+        {
+            variant: "info",
+            look: "outline",
+            className: "text-sky-700 border-sky-300 dark:text-sky-300 dark:border-sky-800",
+        },
+        {
+            variant: "destructive",
+            look: "solid",
+            className: "bg-destructive text-white",
+        },
+        {
+            variant: "destructive",
+            look: "soft",
+            className: "bg-destructive/10 text-destructive",
+        },
+        {
+            variant: "destructive",
+            look: "outline",
+            className: "text-destructive border-destructive/50",
+        },
+    ],
+});

package/dist/components/bento-grid/bento-grid.d.ts

@@ -0,0 +1,23 @@
+import type React from "react";
+export declare function BentoGrid({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export type BentoGridItemProps = React.ComponentProps<"div"> & {
+    /** Columns (out of the grid's 3) this item spans. @default 1 */
+    colSpan?: 1 | 2 | 3;
+    /** Rows this item spans. @default 1 */
+    rowSpan?: 1 | 2;
+};
+/**
+ * A CSS-grid layout for unevenly-sized cards ("bento box" layouts) — a
+ * lightweight layout helper (`grid`+`col-span`/`row-span`), not a
+ * dependency-driven masonry/packing algorithm.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://ui.aceternity.com/components/bento-grid
+ * @see https://blocks.mvp-subha.me/docs/grids/bento
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function BentoGridItem({ colSpan, rowSpan, className, ...props }: BentoGridItemProps): React.JSX.Element;
+//# sourceMappingURL=bento-grid.d.ts.map

package/dist/components/bento-grid/bento-grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bento-grid.d.ts","sourceRoot":"","sources":["../../../src/components/bento-grid/bento-grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ7B;AAED,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC7D,gEAAgE;IAChE,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACpB,uCAAuC;IACvC,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;CACjB,CAAC;AAmBF;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAW,EACX,OAAW,EACX,SAAS,EACT,GAAG,KAAK,EACT,EAAE,kBAAkB,qBAapB"}