@neasg/design-system 0.1.3 → 0.2.1

package/dist/animated-icons/trending-down.js

@@ -0,0 +1,86 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion, useAnimation } from "motion/react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { cn } from "../lib/utils";
+const SVG_VARIANTS = {
+    animate: {
+        x: 0,
+        y: 0,
+        translateX: [0, 2, 0],
+        translateY: [0, 2, 0],
+        transition: {
+            duration: 0.5,
+        },
+    },
+};
+const PATH_VARIANTS = {
+    normal: {
+        opacity: 1,
+        pathLength: 1,
+        transition: {
+            duration: 0.4,
+            opacity: { duration: 0.1 },
+        },
+    },
+    animate: {
+        opacity: [0, 1],
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        transition: {
+            duration: 0.4,
+            opacity: { duration: 0.1 },
+        },
+    },
+};
+const ARROW_VARIANTS = {
+    normal: {
+        opacity: 1,
+        pathLength: 1,
+        transition: {
+            delay: 0.3,
+            duration: 0.3,
+            opacity: { duration: 0.1, delay: 0.3 },
+        },
+    },
+    animate: {
+        opacity: [0, 1],
+        pathLength: [0, 1],
+        pathOffset: [0.5, 0],
+        transition: {
+            delay: 0.3,
+            duration: 0.3,
+            opacity: { duration: 0.1, delay: 0.3 },
+        },
+    },
+};
+const TrendingDownIcon = forwardRef(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start("animate"),
+            stopAnimation: () => controls.start("normal"),
+        };
+    });
+    const handleMouseEnter = useCallback((e) => {
+        if (isControlledRef.current) {
+            onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
+        }
+        else {
+            controls.start("animate");
+        }
+    }, [controls, onMouseEnter]);
+    const handleMouseLeave = useCallback((e) => {
+        if (isControlledRef.current) {
+            onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
+        }
+        else {
+            controls.start("normal");
+        }
+    }, [controls, onMouseLeave]);
+    return (_jsx("div", { className: cn(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props, children: _jsxs(motion.svg, { animate: controls, fill: "none", height: size, initial: "normal", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", variants: SVG_VARIANTS, viewBox: "0 0 24 24", width: size, xmlns: "http://www.w3.org/2000/svg", children: [_jsx(motion.polyline, { animate: controls, initial: "normal", points: "22 17 13.5 8.5 8.5 13.5 2 7", variants: PATH_VARIANTS }), _jsx(motion.polyline, { animate: controls, initial: "normal", points: "16 17 22 17 22 11", variants: ARROW_VARIANTS })] }) }));
+});
+TrendingDownIcon.displayName = "TrendingDownIcon";
+export { TrendingDownIcon };

package/dist/animated-icons/trending-up.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from "react";
+export interface TrendingUpIconHandle {
+    startAnimation: () => void;
+    stopAnimation: () => void;
+}
+interface TrendingUpIconProps extends HTMLAttributes<HTMLDivElement> {
+    size?: number;
+}
+declare const TrendingUpIcon: import("react").ForwardRefExoticComponent<TrendingUpIconProps & import("react").RefAttributes<TrendingUpIconHandle>>;
+export { TrendingUpIcon };

package/dist/animated-icons/trending-up.js

@@ -0,0 +1,86 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion, useAnimation } from "motion/react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { cn } from "../lib/utils";
+const SVG_VARIANTS = {
+    animate: {
+        x: 0,
+        y: 0,
+        translateX: [0, 2, 0],
+        translateY: [0, -2, 0],
+        transition: {
+            duration: 0.5,
+        },
+    },
+};
+const PATH_VARIANTS = {
+    normal: {
+        opacity: 1,
+        pathLength: 1,
+        transition: {
+            duration: 0.4,
+            opacity: { duration: 0.1 },
+        },
+    },
+    animate: {
+        opacity: [0, 1],
+        pathLength: [0, 1],
+        pathOffset: [1, 0],
+        transition: {
+            duration: 0.4,
+            opacity: { duration: 0.1 },
+        },
+    },
+};
+const ARROW_VARIANTS = {
+    normal: {
+        opacity: 1,
+        pathLength: 1,
+        transition: {
+            delay: 0.3,
+            duration: 0.3,
+            opacity: { duration: 0.1, delay: 0.3 },
+        },
+    },
+    animate: {
+        opacity: [0, 1],
+        pathLength: [0, 1],
+        pathOffset: [0.5, 0],
+        transition: {
+            delay: 0.3,
+            duration: 0.3,
+            opacity: { duration: 0.1, delay: 0.3 },
+        },
+    },
+};
+const TrendingUpIcon = forwardRef(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start("animate"),
+            stopAnimation: () => controls.start("normal"),
+        };
+    });
+    const handleMouseEnter = useCallback((e) => {
+        if (isControlledRef.current) {
+            onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
+        }
+        else {
+            controls.start("animate");
+        }
+    }, [controls, onMouseEnter]);
+    const handleMouseLeave = useCallback((e) => {
+        if (isControlledRef.current) {
+            onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
+        }
+        else {
+            controls.start("normal");
+        }
+    }, [controls, onMouseLeave]);
+    return (_jsx("div", { className: cn(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props, children: _jsxs(motion.svg, { animate: controls, fill: "none", height: size, initial: "normal", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", variants: SVG_VARIANTS, viewBox: "0 0 24 24", width: size, xmlns: "http://www.w3.org/2000/svg", children: [_jsx(motion.polyline, { animate: controls, initial: "normal", points: "22 7 13.5 15.5 8.5 10.5 2 17", variants: PATH_VARIANTS }), _jsx(motion.polyline, { animate: controls, initial: "normal", points: "16 7 22 7 22 13", variants: ARROW_VARIANTS })] }) }));
+});
+TrendingUpIcon.displayName = "TrendingUpIcon";
+export { TrendingUpIcon };

package/dist/animated-icons/underline.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from "react";
+export interface UnderlineIconHandle {
+    startAnimation: () => void;
+    stopAnimation: () => void;
+}
+interface UnderlineIconProps extends HTMLAttributes<HTMLDivElement> {
+    size?: number;
+}
+declare const UnderlineIcon: import("react").ForwardRefExoticComponent<UnderlineIconProps & import("react").RefAttributes<UnderlineIconHandle>>;
+export { UnderlineIcon };

package/dist/animated-icons/underline.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion, useAnimation } from "motion/react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { cn } from "../lib/utils";
+const LINE_VARIANTS = {
+    normal: { scaleX: 1 },
+    animate: {
+        scaleX: [0, 1],
+        transition: {
+            duration: 0.3,
+            ease: "easeInOut",
+        },
+    },
+};
+const UnderlineIcon = forwardRef(({ onMouseEnter, onMouseLeave, className, size = 24, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start("animate"),
+            stopAnimation: () => controls.start("normal"),
+        };
+    });
+    const handleMouseEnter = useCallback((e) => {
+        if (isControlledRef.current) {
+            onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
+        }
+        else {
+            controls.start("animate");
+        }
+    }, [controls, onMouseEnter]);
+    const handleMouseLeave = useCallback((e) => {
+        if (isControlledRef.current) {
+            onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
+        }
+        else {
+            controls.start("normal");
+        }
+    }, [controls, onMouseLeave]);
+    return (_jsx("div", { className: cn(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props, children: _jsxs("svg", { fill: "none", height: size, stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", width: size, xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M6 4v6a6 6 0 0 0 12 0V4" }), _jsx(motion.line, { animate: controls, style: { originX: 0 }, variants: LINE_VARIANTS, x1: "4", x2: "20", y1: "20", y2: "20" })] }) }));
+});
+UnderlineIcon.displayName = "UnderlineIcon";
+export { UnderlineIcon };

package/dist/animated-icons/upload.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from "react";
+export interface UploadIconHandle {
+    startAnimation: () => void;
+    stopAnimation: () => void;
+}
+interface UploadIconProps extends HTMLAttributes<HTMLDivElement> {
+    size?: number;
+}
+declare const UploadIcon: import("react").ForwardRefExoticComponent<UploadIconProps & import("react").RefAttributes<UploadIconHandle>>;
+export { UploadIcon };

package/dist/animated-icons/upload.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion, useAnimation } from "motion/react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { cn } from "../lib/utils";
+const ARROW_VARIANTS = {
+    normal: { y: 0 },
+    animate: {
+        y: -2,
+        transition: {
+            type: "spring",
+            stiffness: 200,
+            damping: 10,
+            mass: 1,
+        },
+    },
+};
+const UploadIcon = forwardRef(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start("animate"),
+            stopAnimation: () => controls.start("normal"),
+        };
+    });
+    const handleMouseEnter = useCallback((e) => {
+        if (isControlledRef.current) {
+            onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
+        }
+        else {
+            controls.start("animate");
+        }
+    }, [controls, onMouseEnter]);
+    const handleMouseLeave = useCallback((e) => {
+        if (isControlledRef.current) {
+            onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
+        }
+        else {
+            controls.start("normal");
+        }
+    }, [controls, onMouseLeave]);
+    return (_jsx("div", { className: cn(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props, children: _jsxs("svg", { fill: "none", height: size, stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", width: size, xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), _jsxs(motion.g, { animate: controls, variants: ARROW_VARIANTS, children: [_jsx("polyline", { points: "17 8 12 3 7 8" }), _jsx("line", { x1: "12", x2: "12", y1: "3", y2: "15" })] })] }) }));
+});
+UploadIcon.displayName = "UploadIcon";
+export { UploadIcon };

package/dist/animated-icons/users.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from "react";
+export interface UsersIconHandle {
+    startAnimation: () => void;
+    stopAnimation: () => void;
+}
+interface UsersIconProps extends HTMLAttributes<HTMLDivElement> {
+    size?: number;
+}
+declare const UsersIcon: import("react").ForwardRefExoticComponent<UsersIconProps & import("react").RefAttributes<UsersIconHandle>>;
+export { UsersIcon };

package/dist/animated-icons/users.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion, useAnimation } from "motion/react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { cn } from "../lib/utils";
+const USER_VARIANTS = {
+    normal: { x: 0 },
+    animate: {
+        x: [0, -2, 2, 0],
+        transition: {
+            duration: 0.4,
+            ease: "easeInOut",
+        },
+    },
+};
+const UsersIcon = forwardRef(({ onMouseEnter, onMouseLeave, className, size = 24, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start("animate"),
+            stopAnimation: () => controls.start("normal"),
+        };
+    });
+    const handleMouseEnter = useCallback((e) => {
+        if (isControlledRef.current) {
+            onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
+        }
+        else {
+            controls.start("animate");
+        }
+    }, [controls, onMouseEnter]);
+    const handleMouseLeave = useCallback((e) => {
+        if (isControlledRef.current) {
+            onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
+        }
+        else {
+            controls.start("normal");
+        }
+    }, [controls, onMouseLeave]);
+    return (_jsx("div", { className: cn(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props, children: _jsxs("svg", { fill: "none", height: size, stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", width: size, xmlns: "http://www.w3.org/2000/svg", children: [_jsxs(motion.g, { animate: controls, variants: USER_VARIANTS, children: [_jsx("path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }), _jsx("circle", { cx: "9", cy: "7", r: "4" })] }), _jsxs(motion.g, { animate: controls, variants: USER_VARIANTS, children: [_jsx("path", { d: "M22 21v-2a4 4 0 0 0-3-3.87" }), _jsx("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })] })] }) }));
+});
+UsersIcon.displayName = "UsersIcon";
+export { UsersIcon };

package/dist/animated-icons/x.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from "react";
+export interface XIconHandle {
+    startAnimation: () => void;
+    stopAnimation: () => void;
+}
+interface XIconProps extends HTMLAttributes<HTMLDivElement> {
+    size?: number;
+}
+declare const XIcon: import("react").ForwardRefExoticComponent<XIconProps & import("react").RefAttributes<XIconHandle>>;
+export { XIcon };

package/dist/animated-icons/x.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion, useAnimation } from "motion/react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { cn } from "../lib/utils";
+const PATH_VARIANTS = {
+    normal: {
+        opacity: 1,
+        pathLength: 1,
+    },
+    animate: {
+        opacity: [0, 1],
+        pathLength: [0, 1],
+    },
+};
+const XIcon = forwardRef(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+    useImperativeHandle(ref, () => {
+        isControlledRef.current = true;
+        return {
+            startAnimation: () => controls.start("animate"),
+            stopAnimation: () => controls.start("normal"),
+        };
+    });
+    const handleMouseEnter = useCallback((e) => {
+        if (isControlledRef.current) {
+            onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
+        }
+        else {
+            controls.start("animate");
+        }
+    }, [controls, onMouseEnter]);
+    const handleMouseLeave = useCallback((e) => {
+        if (isControlledRef.current) {
+            onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
+        }
+        else {
+            controls.start("normal");
+        }
+    }, [controls, onMouseLeave]);
+    return (_jsx("div", { className: cn(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props, children: _jsxs("svg", { fill: "none", height: size, stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", width: size, xmlns: "http://www.w3.org/2000/svg", children: [_jsx(motion.path, { animate: controls, d: "M18 6 6 18", variants: PATH_VARIANTS }), _jsx(motion.path, { animate: controls, d: "m6 6 12 12", transition: { delay: 0.2 }, variants: PATH_VARIANTS })] }) }));
+});
+XIcon.displayName = "XIcon";
+export { XIcon };

package/dist/avatar.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+declare const AvatarRoot: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
+declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+interface AvatarProps extends Omit<React.ComponentPropsWithoutRef<typeof AvatarRoot>, "children"> {
+    src?: string | null;
+    alt?: string;
+    fallback: React.ReactNode;
+    imageClassName?: string;
+    fallbackClassName?: string;
+}
+interface AvatarProfileProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "role"> {
+    src?: string | null;
+    alt?: string;
+    fallback: React.ReactNode;
+    name?: React.ReactNode;
+    role?: React.ReactNode;
+    rolePlacement?: "above" | "below";
+    avatarClassName?: string;
+    imageClassName?: string;
+    fallbackClassName?: string;
+    contentClassName?: string;
+    nameClassName?: string;
+    roleClassName?: string;
+    avatarOverlay?: React.ReactNode;
+}
+declare function Avatar({ src, alt, fallback, className, imageClassName, fallbackClassName, ...props }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+declare function AvatarProfile({ src, alt, fallback, name, role, rolePlacement, className, avatarClassName, imageClassName, fallbackClassName, contentClassName, nameClassName, roleClassName, avatarOverlay, ...props }: AvatarProfileProps): import("react/jsx-runtime").JSX.Element;
+export { Avatar, AvatarProfile, AvatarRoot, AvatarImage, AvatarFallback };
+export type AvatarRootProps = React.ComponentPropsWithoutRef<typeof AvatarRoot>;
+export type { AvatarProps, AvatarProfileProps };

package/dist/avatar.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cn } from "./lib/utils";
+const AvatarRoot = React.forwardRef(({ className, ...props }, ref) => (_jsx(AvatarPrimitive.Root, { ref: ref, className: cn("relative flex shrink-0 overflow-hidden rounded-full", className), ...props })));
+AvatarRoot.displayName = "AvatarRoot";
+const AvatarImage = React.forwardRef(({ className, ...props }, ref) => (_jsx(AvatarPrimitive.Image, { ref: ref, className: cn("aspect-square size-full", className), ...props })));
+AvatarImage.displayName = "AvatarImage";
+const AvatarFallback = React.forwardRef(({ className, ...props }, ref) => (_jsx(AvatarPrimitive.Fallback, { ref: ref, className: cn("flex size-full items-center justify-center rounded-full bg-muted", className), ...props })));
+AvatarFallback.displayName = "AvatarFallback";
+function Avatar({ src, alt = "", fallback, className, imageClassName, fallbackClassName, ...props }) {
+    return (_jsxs(AvatarRoot, { className: cn("h-8 w-8", className), ...props, children: [src ? (_jsx(AvatarImage, { src: src, alt: alt, className: imageClassName })) : null, _jsx(AvatarFallback, { className: cn("bg-green-100 text-xs font-medium text-green-800", fallbackClassName), children: fallback })] }));
+}
+function AvatarProfile({ src, alt = "", fallback, name, role, rolePlacement = "above", className, avatarClassName, imageClassName, fallbackClassName, contentClassName, nameClassName, roleClassName, avatarOverlay, ...props }) {
+    const hasMeta = name !== undefined || role !== undefined;
+    const roleNode = role ? (_jsx("span", { className: cn("text-[10px] font-medium uppercase tracking-wide text-muted-foreground", roleClassName), children: role })) : null;
+    const nameNode = name ? (_jsx("span", { className: cn("truncate text-sm font-medium text-foreground", nameClassName), children: name })) : null;
+    return (_jsxs("div", { className: cn("flex items-center gap-2", className), ...props, children: [_jsxs("div", { className: "relative shrink-0", children: [_jsx(Avatar, { src: src, alt: alt, fallback: fallback, className: cn("h-8 w-8", avatarClassName), imageClassName: imageClassName, fallbackClassName: fallbackClassName }), avatarOverlay] }), hasMeta ? (_jsxs("div", { className: cn("flex min-w-0 flex-1 flex-col", contentClassName), children: [rolePlacement === "above" ? roleNode : null, nameNode, rolePlacement === "below" ? roleNode : null] })) : null] }));
+}
+export { Avatar, AvatarProfile, AvatarRoot, AvatarImage, AvatarFallback };

package/dist/badge.d.ts

@@ -1,11 +1,12 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "secondary" | "muted" | "destructive" | "outline" | "success" | "warning" | "info" | "actionRead" | "actionCreate" | "actionUpdate" | "actionDelete" | "actionExport" | null | undefined;
+    variant?: "muted" | "outline" | "secondary" | "destructive" | "success" | "warning" | "info" | "accent" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
- * Visual status label used for short categorical values like case state, action type,
- * or approval result. Badges truncate long text and surface the full label via `title`.
+ * Visual status label used for short categorical values like case state,
+ * approval result, or subdued UI metadata. Badges truncate long text and
+ * surface the full label via `title`.
  */
 export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
 }

package/dist/badge.js

@@ -2,26 +2,21 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "./lib/utils";
-const badgeVariants = cva("inline-flex items-center justify-center rounded-md border px-1.5 py-1 text-[11px] font-semibold leading-none uppercase transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 max-w-[200px] truncate", {
+const badgeVariants = cva("inline-flex max-w-[200px] items-center justify-center text-center rounded-md border px-2 py-0.5 text-xs font-semibold uppercase transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 truncate", {
     variants: {
         variant: {
-            default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
             secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
             muted: "border-transparent bg-muted text-muted-foreground",
-            destructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+            destructive: "border-transparent bg-[hsl(var(--status-destructive))] text-[hsl(var(--status-destructive-foreground))]",
             outline: "text-foreground",
-            success: "border-transparent bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300",
-            warning: "border-transparent bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300",
-            info: "border-transparent bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300",
-            actionRead: "border-transparent bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300",
-            actionCreate: "border-transparent bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300",
-            actionUpdate: "border-transparent bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-300",
-            actionDelete: "border-transparent bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300",
-            actionExport: "border-transparent bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300",
+            success: "border-transparent bg-[hsl(var(--status-success))] text-[hsl(var(--status-success-foreground))]",
+            warning: "border-transparent bg-[hsl(var(--status-warning))] text-[hsl(var(--status-warning-foreground))]",
+            info: "border-transparent bg-[hsl(var(--status-info))] text-[hsl(var(--status-info-foreground))]",
+            accent: "border-transparent bg-[hsl(var(--status-accent))] text-[hsl(var(--status-accent-foreground))]",
         },
     },
     defaultVariants: {
-        variant: "default",
+        variant: "secondary",
     },
 });
 function Badge({ className, variant, children, ...props }) {

package/dist/breadcrumb.d.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+declare const BreadcrumbNav: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+declare const BreadcrumbList: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;
+declare const BreadcrumbItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+declare const BreadcrumbLink: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+    asChild?: boolean;
+} & React.RefAttributes<HTMLAnchorElement>>;
+declare const BreadcrumbPage: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const BreadcrumbSeparator: {
+    ({ children, className, ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const BreadcrumbEllipsis: {
+    ({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export interface BreadcrumbEntry {
+    label: React.ReactNode;
+    href?: string;
+}
+export interface BreadcrumbProps extends Omit<React.ComponentPropsWithoutRef<"nav">, "children"> {
+    items: BreadcrumbEntry[];
+    separator?: React.ReactNode;
+    listClassName?: string;
+    itemClassName?: string;
+    linkClassName?: string;
+    currentClassName?: string;
+}
+declare function Breadcrumb({ items, separator, className, listClassName, itemClassName, linkClassName, currentClassName, ...props }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element | null;
+export { Breadcrumb, BreadcrumbNav, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };

package/dist/breadcrumb.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "./lib/utils";
+const BreadcrumbNav = React.forwardRef(({ ...props }, ref) => _jsx("nav", { ref: ref, "aria-label": "breadcrumb", ...props }));
+BreadcrumbNav.displayName = "BreadcrumbNav";
+const BreadcrumbList = React.forwardRef(({ className, ...props }, ref) => (_jsx("ol", { ref: ref, className: cn("flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5", className), ...props })));
+BreadcrumbList.displayName = "BreadcrumbList";
+const BreadcrumbItem = React.forwardRef(({ className, ...props }, ref) => (_jsx("li", { ref: ref, className: cn("inline-flex items-center gap-1.5", className), ...props })));
+BreadcrumbItem.displayName = "BreadcrumbItem";
+const BreadcrumbLink = React.forwardRef(({ asChild, className, ...props }, ref) => {
+    const Comp = asChild ? Slot : "a";
+    return (_jsx(Comp, { ref: ref, className: cn("transition-colors hover:text-foreground", className), ...props }));
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
+const BreadcrumbPage = React.forwardRef(({ className, ...props }, ref) => (_jsx("span", { ref: ref, role: "link", "aria-disabled": "true", "aria-current": "page", className: cn("font-normal text-foreground", className), ...props })));
+BreadcrumbPage.displayName = "BreadcrumbPage";
+const BreadcrumbSeparator = ({ children, className, ...props }) => (_jsx("li", { role: "presentation", "aria-hidden": "true", className: cn("[&>svg]:h-3.5 [&>svg]:w-3.5", className), ...props, children: children !== null && children !== void 0 ? children : (_jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.75", children: _jsx("path", { d: "M6 3.5 10.5 8 6 12.5" }) })) }));
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+const BreadcrumbEllipsis = ({ className, ...props }) => (_jsxs("span", { role: "presentation", "aria-hidden": "true", className: cn("flex h-9 w-9 items-center justify-center", className), ...props, children: [_jsx("span", { className: "text-lg leading-none", children: "\u2026" }), _jsx("span", { className: "sr-only", children: "More" })] }));
+BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
+function Breadcrumb({ items, separator, className, listClassName, itemClassName, linkClassName, currentClassName, ...props }) {
+    if (!items.length) {
+        return null;
+    }
+    return (_jsx(BreadcrumbNav, { className: className, ...props, children: _jsx(BreadcrumbList, { className: listClassName, children: items.map((item, index) => {
+                const isCurrent = index === items.length - 1 || !item.href;
+                return (_jsxs(React.Fragment, { children: [_jsx(BreadcrumbItem, { className: itemClassName, children: isCurrent ? (_jsx(BreadcrumbPage, { className: currentClassName, children: item.label })) : (_jsx(BreadcrumbLink, { href: item.href, className: linkClassName, children: item.label })) }), index < items.length - 1 ? (_jsx(BreadcrumbSeparator, { children: separator })) : null] }, index));
+            }) }) }));
+}
+export { Breadcrumb, BreadcrumbNav, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };

package/dist/button.d.ts

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "secondary" | "destructive" | "outline" | "link" | "ghost" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+    variant?: "link" | "default" | "outline" | "secondary" | "destructive" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "icon" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     /**