@neasg/design-system 0.4.28 → 0.4.30

package/dist/alert-stack.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+export interface AlertStackProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+declare const AlertStack: React.ForwardRefExoticComponent<AlertStackProps & React.RefAttributes<HTMLDivElement>>;
+export { AlertStack };

package/dist/alert-stack.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { AnimatePresence, MotionConfig, motion } from "motion/react";
+import { cn } from "./lib/utils";
+const MAX_VISIBLE_ALERTS = 3;
+const stackItemClasses = [
+    "z-50",
+    "pointer-events-none z-40 mx-1",
+    "pointer-events-none z-30 mx-2",
+];
+const stackPaddingClasses = ["", "", "pb-2", "pb-4"];
+const AlertStack = React.forwardRef(({ children, className, ...props }, ref) => {
+    const alerts = React.Children.toArray(children);
+    const visibleAlerts = alerts.slice(0, MAX_VISIBLE_ALERTS);
+    return (_jsx(MotionConfig, { reducedMotion: "user", children: _jsx("div", { ref: ref, "data-slot": "alert-stack", className: cn("grid", stackPaddingClasses[visibleAlerts.length], className), ...props, children: _jsx(AnimatePresence, { initial: true, children: visibleAlerts.map((alert, index) => {
+                    const isFront = index === 0;
+                    return (_jsx(motion.div, { "data-slot": "alert-stack-item", "data-position": isFront ? "front" : "back", "data-depth": index, className: cn("col-start-1 row-start-1 origin-top overflow-hidden rounded-surface", stackItemClasses[index], isFront
+                            ? "cursor-pointer"
+                            : "border border-border/80 bg-muted shadow-sm"), initial: { scale: 0.98, y: -12 }, animate: {
+                            opacity: 1,
+                            scale: 1,
+                            y: index * 8,
+                        }, whileHover: isFront ? { y: -2 } : undefined, exit: { opacity: 0, scale: 0.98, y: -16, zIndex: 60 }, transition: isFront
+                            ? { duration: 0.2, ease: "easeOut" }
+                            : { type: "spring", stiffness: 420, damping: 34 }, "aria-hidden": isFront ? undefined : true, ...(isFront ? {} : { inert: "" }), children: _jsx("div", { className: cn("h-full", !isFront && "invisible"), children: alert }) }, React.isValidElement(alert) && alert.key !== null
+                        ? alert.key
+                        : index));
+                }) }) }) }));
+});
+AlertStack.displayName = "AlertStack";
+export { AlertStack };

package/dist/count-badge.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Badge } from "./badge";
 import { cn } from "./lib/utils";
+const countFormatter = new Intl.NumberFormat("en-SG");
 function CountBadge({ count, variant = "default", size = "md", max, pulse = false, className, hideWhenZero = false, ...props }) {
     if (count < 0 || (count === 0 && hideWhenZero))
         return null;
@@ -9,7 +10,7 @@ function CountBadge({ count, variant = "default", size = "md", max, pulse = fals
         ? Math.floor(max)
         : undefined;
     const isCapped = resolvedMax !== undefined && count > resolvedMax;
-    const displayCount = isCapped ? `${resolvedMax}+` : count;
+    const displayCount = `${countFormatter.format(isCapped ? resolvedMax : count)}${isCapped ? "+" : ""}`;
     const sizeClasses = {
         sm: "h-[18px] min-w-[18px] px-1",
         md: "h-[20px] min-w-[20px] px-1.5",

package/dist/index.d.ts

@@ -3,8 +3,10 @@ export type { AvatarProps, AvatarSize, AvatarProfileProps, AvatarRootProps, } fr
 export { AvatarProfilePopover, AvatarProfilePopoverContent, AvatarProfilePopoverHeader, AvatarProfilePopoverSection, AvatarProfilePopoverFooter, AvatarProfilePopoverFooterAction, } from "./avatar-profile-popover";
 export type { AvatarProfilePopoverProps, AvatarProfilePopoverContentProps, AvatarProfilePopoverHeaderProps, AvatarProfilePopoverSectionProps, AvatarProfilePopoverFooterProps, AvatarProfilePopoverFooterActionProps, } from "./avatar-profile-popover";
 export * from "./animated-icons";
-export { Alert, AlertAction, AlertConsent, alertVariants } from "./alert";
-export type { AlertActionProps, AlertConsentProps, AlertProps } from "./alert";
+export { Alert, AlertAction, AlertConsent, alertVariants, } from "./alert";
+export type { AlertActionProps, AlertConsentProps, AlertProps, } from "./alert";
+export { AlertStack } from "./alert-stack";
+export type { AlertStackProps } from "./alert-stack";
 export { Badge, badgeVariants } from "./badge";
 export { Card, CardGrid, CardSplitGrid, CardList, CardListItem, } from "./card";
 export type { CardGridProps, CardListItemProps, CardListProps, CardProps, CardSplitGridProps, } from "./card";

package/dist/index.js

@@ -1,7 +1,8 @@
 export { Avatar, AvatarProfile, AvatarRoot, AvatarImage, } from "./avatar";
 export { AvatarProfilePopover, AvatarProfilePopoverContent, AvatarProfilePopoverHeader, AvatarProfilePopoverSection, AvatarProfilePopoverFooter, AvatarProfilePopoverFooterAction, } from "./avatar-profile-popover";
 export * from "./animated-icons";
-export { Alert, AlertAction, AlertConsent, alertVariants } from "./alert";
+export { Alert, AlertAction, AlertConsent, alertVariants, } from "./alert";
+export { AlertStack } from "./alert-stack";
 export { Badge, badgeVariants } from "./badge";
 export { Card, CardGrid, CardSplitGrid, CardList, CardListItem, } from "./card";
 export { MessageAttachmentRow, MessageItem, MessageNewDivider, MessageThread, formatMessageDate, } from "./message-item";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neasg/design-system",
-  "version": "0.4.28",
+  "version": "0.4.30",
   "description": "NEA shared design system primitives, theme tokens, and Storybook docs.",
   "license": "UNLICENSED",
   "type": "module",