@forthtilliath/forth-ui 0.2.0

package/dist/components/accordion/variants.js

@@ -0,0 +1,96 @@
+import { cva } from "class-variance-authority";
+export const accordionRootVariants = cva("max-w-lg my-4 w-full text-foreground", {
+    variants: {
+        variant: {
+            default: "space-y-2",
+            outline: "space-y-2",
+            box: "",
+            contained: "space-y-2",
+            "box-contained": "",
+            tabs: "space-y-2",
+            "highlight-active": "space-y-2",
+        },
+        size: {
+            sm: "text-sm",
+            default: "text-[15px]",
+            lg: "text-lg",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+export const accordionItemVariants = cva("", {
+    variants: {
+        variant: {
+            default: "",
+            outline: "px-4 border rounded-md last:border-b",
+            box: "px-4 border border-b-0 last:border-b first:rounded-t-md last:rounded-b-md",
+            contained: "px-4 border-none rounded-md bg-secondary text-secondary-foreground",
+            "box-contained": "px-4 last:border-none first:rounded-t-md last:rounded-b-md bg-muted",
+            tabs: "px-4 border-none rounded-md data-[state=open]:bg-secondary",
+            "highlight-active": "px-4 data-[state=open]:border-b-2 data-[state=open]:border-indigo-600 dark:data-[state=open]:border-indigo-500",
+        },
+        size: {
+            sm: "px-2",
+            default: "",
+            lg: "px-6",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+export const accordionTriggerVariants = cva("hover:no-underline group items-center", {
+    variants: {
+        variant: {
+            default: "",
+            outline: "",
+            box: "",
+            contained: "",
+            "box-contained": "",
+            tabs: "data-[state=closed]:py-2",
+            "highlight-active": "data-[state=open]:text-indigo-600 dark:data-[state=open]:text-indigo-500",
+        },
+        size: {
+            sm: "py-3 text-sm [&_[data-slot=subtitle]]:text-xs",
+            default: "py-4 text-[15px] [&_[data-slot=subtitle]]:text-sm",
+            lg: "py-5 text-lg [&_[data-slot=subtitle]]:text-base",
+        },
+        disabled: {
+            false: "",
+            true: "opacity-50",
+        },
+        chevronAlignment: {
+            right: "",
+            left: "flex-row-reverse",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+        disabled: false,
+        chevronAlignment: "right",
+    },
+});
+export const accordionContentVariants = cva("", {
+    variants: {
+        variant: {
+            default: "",
+            outline: "",
+            box: "",
+            contained: "",
+            "box-contained": "",
+            tabs: "",
+            "highlight-active": "",
+        },
+        size: {
+            sm: "pb-3 text-sm",
+            default: "pb-4 text-[15px]",
+            lg: "pb-5 text-lg",
+        },
+    },
+    defaultVariants: { variant: "default", size: "default" },
+});

package/dist/components/alert/alert.d.ts

@@ -0,0 +1,38 @@
+import * as React from "react";
+import type { AlertVariants } from "./variants";
+export type AlertProps = React.ComponentProps<"div"> & AlertVariants & {
+    /**
+     * Shows a close button. Uncontrolled by default (the alert 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 alert is dismissed, whether controlled or not.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Extra action content (e.g. a button) rendered top-right, before the
+     * close button when `dismissible` is also set.
+     */
+    action?: React.ReactNode;
+};
+/**
+ * Displays a callout for user attention.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://ui.shadcn.com/docs/components/alert
+ * @see https://ktui.io/docs/alert
+ * @see https://ktui.io/docs/dismiss
+ * @see https://www.shadcnui-blocks.com/components/alert
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function Alert({ className, variant, look, size, dismissible, open, onOpenChange, action, children, ...props }: AlertProps): React.JSX.Element | null;
+//# sourceMappingURL=alert.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/alert/alert.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAGhD,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAClD,aAAa,GAAG;IACd;;;OAGG;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;CAC1B,CAAC;AAEJ;;;;;;;;;;;;GAYG;AACH,wBAAgB,KAAK,CAAC,EACpB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,WAAmB,EACnB,IAAI,EACJ,YAAY,EACZ,MAAM,EACN,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,UAAU,4BA8CZ"}

package/dist/components/alert/alert.js

@@ -0,0 +1,32 @@
+"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 { alertVariants } from "./variants";
+/**
+ * Displays a callout for user attention.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://ui.shadcn.com/docs/components/alert
+ * @see https://ktui.io/docs/alert
+ * @see https://ktui.io/docs/dismiss
+ * @see https://www.shadcnui-blocks.com/components/alert
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function Alert({ className, variant, look, size, dismissible = false, open, onOpenChange, action, children, ...props }) {
+    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(true);
+    const isOpen = open ?? uncontrolledOpen;
+    const hasActions = Boolean(action) || dismissible;
+    function handleDismiss() {
+        setUncontrolledOpen(false);
+        onOpenChange?.(false);
+    }
+    if (!isOpen) {
+        return null;
+    }
+    return (_jsxs("div", { "data-slot": "alert", role: "alert", className: cn(alertVariants({ variant, look, size }), hasActions && "pr-10", className), ...props, children: [children, hasActions && (_jsxs("div", { "data-slot": "alert-actions", className: "absolute top-2.5 right-2.5 flex items-center gap-1.5", children: [action, dismissible && (_jsx("button", { type: "button", onClick: handleDismiss, "aria-label": "Dismiss", className: "rounded-sm opacity-70 transition-opacity outline-none hover:opacity-100 focus-visible:ring-2 focus-visible:ring-current", children: _jsx(X, { className: "size-3.5" }) }))] }))] }));
+}

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

@@ -0,0 +1,5 @@
+export type { AlertProps } from "./alert";
+export { Alert } from "./alert";
+export type { AlertVariants } from "./variants";
+export { AlertDescription, AlertTitle, } from "@forthtilliath/shadcn-ui/components/alert";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/alert/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;AAIhD,OAAO,EACL,gBAAgB,EAChB,UAAU,GACX,MAAM,2CAA2C,CAAC"}

package/dist/components/alert/index.js

@@ -0,0 +1,4 @@
+export { Alert } from "./alert";
+// Title/description need no forth-ui-specific behavior on top of shadcn-ui's
+// — re-exported here so consumers only need one import path.
+export { AlertDescription, AlertTitle, } from "@forthtilliath/shadcn-ui/components/alert";

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

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

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

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

package/dist/components/alert/variants.js

@@ -0,0 +1,110 @@
+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 alertVariants = cva("relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm transition-colors has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", {
+    variants: {
+        variant: {
+            default: "bg-card text-card-foreground",
+            primary: "",
+            success: "",
+            warning: "",
+            info: "",
+            destructive: "",
+        },
+        look: {
+            solid: "",
+            soft: "",
+            outline: "bg-transparent",
+        },
+        size: {
+            sm: "gap-x-2 px-3 py-2 text-xs [&>svg]:size-3.5",
+            default: "",
+            lg: "gap-x-4 px-5 py-4 text-base [&>svg]:size-5",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        look: "soft",
+        size: "default",
+    },
+    compoundVariants: [
+        // default (neutral) ignores `look` — none of the reference sources
+        // show a "solid neutral" or "outline neutral" alert, only colored
+        // ones vary by look.
+        {
+            variant: "primary",
+            look: "solid",
+            className: "bg-primary text-primary-foreground border-transparent",
+        },
+        {
+            variant: "primary",
+            look: "soft",
+            className: "bg-primary/10 text-primary border-primary/20 [&>svg]:text-primary",
+        },
+        {
+            variant: "primary",
+            look: "outline",
+            className: "text-primary border-primary/50 [&>svg]:text-primary",
+        },
+        {
+            variant: "success",
+            look: "solid",
+            className: "bg-green-600 text-white border-transparent",
+        },
+        {
+            variant: "success",
+            look: "soft",
+            className: "bg-green-50 text-green-700 border-green-200 [&>svg]:text-green-600 dark:bg-green-950 dark:text-green-300 dark:border-green-900 dark:[&>svg]:text-green-400",
+        },
+        {
+            variant: "success",
+            look: "outline",
+            className: "text-green-700 border-green-300 [&>svg]:text-green-600 dark:text-green-300 dark:border-green-800 dark:[&>svg]:text-green-400",
+        },
+        {
+            variant: "warning",
+            look: "solid",
+            className: "bg-amber-500 text-white border-transparent",
+        },
+        {
+            variant: "warning",
+            look: "soft",
+            className: "bg-amber-50 text-amber-700 border-amber-200 [&>svg]:text-amber-600 dark:bg-amber-950 dark:text-amber-300 dark:border-amber-900 dark:[&>svg]:text-amber-400",
+        },
+        {
+            variant: "warning",
+            look: "outline",
+            className: "text-amber-700 border-amber-300 [&>svg]:text-amber-600 dark:text-amber-300 dark:border-amber-800 dark:[&>svg]:text-amber-400",
+        },
+        {
+            variant: "info",
+            look: "solid",
+            className: "bg-sky-600 text-white border-transparent",
+        },
+        {
+            variant: "info",
+            look: "soft",
+            className: "bg-sky-50 text-sky-700 border-sky-200 [&>svg]:text-sky-600 dark:bg-sky-950 dark:text-sky-300 dark:border-sky-900 dark:[&>svg]:text-sky-400",
+        },
+        {
+            variant: "info",
+            look: "outline",
+            className: "text-sky-700 border-sky-300 [&>svg]:text-sky-600 dark:text-sky-300 dark:border-sky-800 dark:[&>svg]:text-sky-400",
+        },
+        {
+            variant: "destructive",
+            look: "solid",
+            className: "bg-destructive text-white border-transparent",
+        },
+        {
+            variant: "destructive",
+            look: "soft",
+            className: "bg-destructive/10 text-destructive border-destructive/20 [&>svg]:text-destructive",
+        },
+        {
+            variant: "destructive",
+            look: "outline",
+            className: "text-destructive border-destructive/50 [&>svg]:text-destructive",
+        },
+    ],
+});

package/dist/components/avatar/avatar-group.d.ts

@@ -0,0 +1,26 @@
+import type { JSX } from "react";
+import type { AvatarProps } from "./avatar";
+export type AvatarGroupProps = React.ComponentProps<"div"> & {
+    avatars: AvatarProps[];
+    /**
+     * Maximum number of avatars to display before collapsing the rest into a
+     * "+N" indicator, matching the `avatars` array's order.
+     */
+    max?: number;
+};
+/**
+ * A component to group multiple avatars together.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://ui.shadcn.com/docs/components/avatar
+ * @see https://www.kibo-ui.com/components/avatar-stack
+ * @see https://www.shadcnui-blocks.com/components/avatar
+ *
+ * @param {AvatarGroupProps} props The props for the component.
+ * @param {AvatarProps[]} props.avatars The avatars to be grouped together.
+ * @param {number} [props.max] Collapse avatars beyond this count into a "+N" bubble.
+ * @param {React.ComponentProps<'div'>} props The props for the outer div element.
+ * @returns {JSX.Element} The component.
+ */
+export declare function AvatarGroup({ className, avatars, max, ...props }: AvatarGroupProps): JSX.Element;
+//# sourceMappingURL=avatar-group.d.ts.map

package/dist/components/avatar/avatar-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAIjC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAG5C,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC3D,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAIF;;;;;;;;;;;;;GAaG;AACH,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,OAAO,EACP,GAAG,EACH,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CA6BhC"}

package/dist/components/avatar/avatar-group.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+import { Avatar } from "./avatar";
+const RING_CLASS = "ring-2 ring-background hover:z-10";
+/**
+ * A component to group multiple avatars together.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://ui.shadcn.com/docs/components/avatar
+ * @see https://www.kibo-ui.com/components/avatar-stack
+ * @see https://www.shadcnui-blocks.com/components/avatar
+ *
+ * @param {AvatarGroupProps} props The props for the component.
+ * @param {AvatarProps[]} props.avatars The avatars to be grouped together.
+ * @param {number} [props.max] Collapse avatars beyond this count into a "+N" bubble.
+ * @param {React.ComponentProps<'div'>} props The props for the outer div element.
+ * @returns {JSX.Element} The component.
+ */
+export function AvatarGroup({ className, avatars, max, ...props }) {
+    const visibleAvatars = max ? avatars.slice(0, max) : avatars;
+    const overflowCount = max ? Math.max(avatars.length - max, 0) : 0;
+    return (_jsxs("div", { className: cn("flex -space-x-2", className), ...props, children: [visibleAvatars.map((avatar, index) => (_jsx(Avatar, { ...avatar, className: {
+                    ...avatar.className,
+                    root: cn(RING_CLASS, avatar.className?.root),
+                } }, `avatar-${index.toString()}`))), overflowCount > 0 && (_jsx(Avatar, { fallback: `+${overflowCount.toString()}`, size: visibleAvatars.at(-1)?.size, shape: visibleAvatars.at(-1)?.shape, className: {
+                    root: cn(RING_CLASS),
+                    fallback: "bg-muted text-muted-foreground",
+                } }))] }));
+}

package/dist/components/avatar/avatar.d.ts

@@ -0,0 +1,107 @@
+import type React from "react";
+import { Avatar as AvatarPrimitive } from "@forthtilliath/shadcn-ui/components/avatar";
+import type { Shape, Size } from "./constants";
+import type { BadgeVariants, FallbackVariants, StatusVariants } from "./variants";
+export type AvatarProps = Omit<React.ComponentProps<typeof AvatarPrimitive>, "className" | "size"> & {
+    /**
+     * The source URL of the image.
+     */
+    src?: string;
+    /**
+     * The alt text for the image.
+     */
+    alt?: string;
+    /**
+     * The fallback text for the image (3 letters max if possible).
+     */
+    fallback: string;
+    /**
+     * The variant of the fallback box.
+     *
+     * You can also use ``className.fallback`` to change the color of the fallback box.
+     *
+     * @example
+     * ```tsx
+     * <Avatar fallback="CN" fallbackVariant="emerald" />
+     * <Avatar fallback="CN" className={{ fallback: "bg-emerald-500" }} />
+     * ```
+     */
+    fallbackVariant?: FallbackVariants["fallbackVariant"];
+    /**
+     * The size of the avatar.
+     */
+    size?: Size;
+    /**
+     * The shape of the avatar.
+     */
+    shape?: Shape;
+    /**
+     * Use the `ring` prop to add a ring to the avatar.
+     * @default false
+     */
+    ring?: boolean;
+    /**
+     * The status of the user.
+     */
+    status?: StatusVariants["status"];
+    /**
+     * Position of the status indicator.
+     */
+    position?: StatusVariants["position"];
+    /**
+     * Arbitrary content (notification count, icon) shown in a badge overlay.
+     *
+     * Distinct from `status`: `status` is a plain color dot for
+     * online/offline/away/busy, `badge` holds real content and its own color
+     * variant. Both can be shown at once, since they default to opposite
+     * corners (`status` bottom-right, `badge` top-right) and accept
+     * independent `position`/`badgePosition` overrides.
+     *
+     * @example
+     * ```tsx
+     * <Avatar fallback="CN" badge={5} />
+     * <Avatar fallback="CN" badge={<Check className="size-3" />} badgeVariant="default" />
+     * ```
+     */
+    badge?: React.ReactNode;
+    /**
+     * The color variant of the `badge`.
+     */
+    badgeVariant?: BadgeVariants["badgeVariant"];
+    /**
+     * Position of the `badge`.
+     * @default "top-right"
+     */
+    badgePosition?: BadgeVariants["position"];
+    /**
+     * Render a tooltip for the avatar.
+     */
+    renderTooltip?: () => React.ReactNode;
+    /**
+     * Custom classes for each part of the component.
+     *
+     * - `root` is the root element of the component.
+     * - `image` is the image element.
+     * - `fallback` is the fallback element.
+     * - `status` is the status element.
+     * - `badge` is the badge element.
+     * - `tooltipTrigger` is the tooltip trigger element.
+     * - `tooltipContent` is the tooltip content element.
+     */
+    className?: Partial<Record<"root" | "image" | "fallback" | "status" | "badge" | "tooltipTrigger" | "tooltipContent", string>>;
+};
+/**
+ * An image element with a fallback for representing the user.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://ui.shadcn.com/docs/components/avatar
+ * @see https://bundui.io/components/avatar
+ * @see https://www.shadcnui-blocks.com/components/avatar
+ * @see https://ktui.io/docs/avatar
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2025 Forth
+ */
+export declare function Avatar({ src, alt, fallback, fallbackVariant, shape, size, ring, status, position, badge, badgeVariant, badgePosition, className, renderTooltip, ...props }: AvatarProps): React.JSX.Element;
+//# sourceMappingURL=avatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,MAAM,IAAI,eAAe,EAG1B,MAAM,4CAA4C,CAAC;AAQpD,OAAO,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,KAAK,EACV,aAAa,EACb,gBAAgB,EAChB,cAAc,EACf,MAAM,YAAY,CAAC;AASpB,MAAM,MAAM,WAAW,GAAG,IAAI,CAC5B,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,EAC5C,WAAW,GAAG,MAAM,CACrB,GAAG;IACF;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;;;;;;;;OAUG;IACH,eAAe,CAAC,EAAE,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;IACtD;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;IACtC;;;;;;;;;;;;;;OAcG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IAC7C;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IAC1C;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IAEtC;;;;;;;;;;OAUG;IACH,SAAS,CAAC,EAAE,OAAO,CACjB,MAAM,CACF,MAAM,GACN,OAAO,GACP,UAAU,GACV,QAAQ,GACR,OAAO,GACP,gBAAgB,GAChB,gBAAgB,EAClB,MAAM,CACP,CACF,CAAC;CACH,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,wBAAgB,MAAM,CAAC,EACrB,GAAG,EACH,GAAG,EACH,QAAQ,EACR,eAAe,EACf,KAAK,EACL,IAAI,EACJ,IAAY,EACZ,MAAM,EACN,QAAQ,EACR,KAAK,EACL,YAAY,EACZ,aAAsC,EACtC,SAAS,EACT,aAAa,EACb,GAAG,KAAK,EACT,EAAE,WAAW,qBAgEb"}

package/dist/components/avatar/avatar.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar as AvatarPrimitive, AvatarFallback, AvatarImage, } from "@forthtilliath/shadcn-ui/components/avatar";
+import { Tooltip, TooltipContent, TooltipTrigger, } from "@forthtilliath/shadcn-ui/components/tooltip";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+import { DEFAULT_BADGE_POSITION, STATUS_LABEL } from "./constants";
+import { avatarVariants, badgeVariants, fallbackVariants, statusVariants, tooltipTriggerVariants, } from "./variants";
+/**
+ * An image element with a fallback for representing the user.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://ui.shadcn.com/docs/components/avatar
+ * @see https://bundui.io/components/avatar
+ * @see https://www.shadcnui-blocks.com/components/avatar
+ * @see https://ktui.io/docs/avatar
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2025 Forth
+ */
+export function Avatar({ src, alt, fallback, fallbackVariant, shape, size, ring = false, status, position, badge, badgeVariant, badgePosition = DEFAULT_BADGE_POSITION, className, renderTooltip, ...props }) {
+    const avatar = (_jsxs("div", { className: "relative", children: [_jsxs(AvatarPrimitive, { className: cn("block", avatarVariants({ shape, ring, size }), className?.root), ...props, children: [_jsx(AvatarImage, { src: src, alt: alt, className: className?.image }), _jsx(AvatarFallback, { className: cn(fallbackVariants({ fallbackVariant, shape }), className?.fallback), children: fallback })] }), status && (_jsx("div", { className: cn(statusVariants({ status, position }), className?.status), children: _jsx("span", { className: "sr-only", children: STATUS_LABEL[status] }) })), badge !== undefined && (_jsx("div", { className: cn(badgeVariants({ badgeVariant, position: badgePosition }), className?.badge), children: badge }))] }));
+    if (typeof renderTooltip === "function") {
+        return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { className: cn(tooltipTriggerVariants({ shape }), className?.tooltipTrigger), asChild: true, children: avatar }), _jsx(TooltipContent, { className: cn(className?.tooltipContent), children: renderTooltip() })] }));
+    }
+    return avatar;
+}

package/dist/components/avatar/constants.d.ts

@@ -0,0 +1,13 @@
+export declare const STATUS_LABEL: Readonly<{
+    online: "Online";
+    offline: "Offline";
+    away: "Away";
+    busy: "Busy";
+}>;
+export type StatusLabel = keyof typeof STATUS_LABEL;
+export type Shape = "square" | "rounded" | "circle";
+export type Size = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+export type IndicatorPosition = "top-right" | "bottom-right" | "top-left" | "bottom-left";
+export declare const DEFAULT_SHAPE: Shape;
+export declare const DEFAULT_BADGE_POSITION: IndicatorPosition;
+//# sourceMappingURL=constants.d.ts.map

package/dist/components/avatar/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY;;;;;EAKvB,CAAC;AAEH,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,YAAY,CAAC;AAEpD,MAAM,MAAM,KAAK,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;AACpD,MAAM,MAAM,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,CAAC;AACpE,MAAM,MAAM,iBAAiB,GAC3B,WAAW,GAAG,cAAc,GAAG,UAAU,GAAG,aAAa,CAAC;AAE5D,eAAO,MAAM,aAAa,EAAE,KAAgB,CAAC;AAC7C,eAAO,MAAM,sBAAsB,EAAE,iBAA+B,CAAC"}

package/dist/components/avatar/constants.js

@@ -0,0 +1,8 @@
+export const STATUS_LABEL = Object.freeze({
+    online: "Online",
+    offline: "Offline",
+    away: "Away",
+    busy: "Busy",
+});
+export const DEFAULT_SHAPE = "circle";
+export const DEFAULT_BADGE_POSITION = "top-right";

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

@@ -0,0 +1,5 @@
+export type { AvatarProps } from "./avatar";
+export { Avatar } from "./avatar";
+export type { AvatarGroupProps } from "./avatar-group";
+export { AvatarGroup } from "./avatar-group";
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/avatar/index.js

@@ -0,0 +1,2 @@
+export { Avatar } from "./avatar";
+export { AvatarGroup } from "./avatar-group";

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

@@ -0,0 +1,31 @@
+import type { VariantProps } from "class-variance-authority";
+export declare const avatarVariants: (props?: ({
+    ring?: boolean | null | undefined;
+    shape?: "circle" | "square" | "rounded" | null | undefined;
+    size?: "sm" | "lg" | "xs" | "md" | "xl" | "2xl" | "3xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const statusVariants: (props?: ({
+    status?: "online" | "offline" | "away" | "busy" | null | undefined;
+    position?: "top-right" | "bottom-right" | "top-left" | "bottom-left" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type StatusVariants = VariantProps<typeof statusVariants>;
+/**
+ * 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 declare const badgeVariants: (props?: ({
+    badgeVariant?: "default" | "outline" | "destructive" | "secondary" | null | undefined;
+    position?: "top-right" | "bottom-right" | "top-left" | "bottom-left" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type BadgeVariants = VariantProps<typeof badgeVariants>;
+export declare const fallbackVariants: (props?: ({
+    fallbackVariant?: "default" | "amber" | "blue" | "cyan" | "emerald" | "fuchsia" | "gray" | "green" | "indigo" | "lime" | "orange" | "pink" | "purple" | "red" | "rose" | "slate" | "sky" | "teal" | "violet" | "yellow" | "amber-full" | "blue-full" | "cyan-full" | "emerald-full" | "fuchsia-full" | "gray-full" | "green-full" | "indigo-full" | "lime-full" | "orange-full" | "pink-full" | "purple-full" | "red-full" | "rose-full" | "slate-full" | "sky-full" | "teal-full" | "violet-full" | "yellow-full" | null | undefined;
+    shape?: "circle" | "square" | "rounded" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type FallbackVariants = VariantProps<typeof fallbackVariants>;
+export declare const tooltipTriggerVariants: (props?: ({
+    shape?: "circle" | "square" | "rounded" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//# sourceMappingURL=variants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/variants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAM7D,eAAO,MAAM,cAAc;;;;8EA2BzB,CAAC;AAEH,eAAO,MAAM,cAAc;;;8EAwBzB,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAEjE;;;;;GAKG;AACH,eAAO,MAAM,aAAa;;;8EAsBzB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAE/D,eAAO,MAAM,gBAAgB;;;8EAsD3B,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAErE,eAAO,MAAM,sBAAsB;;8EAWjC,CAAC"}