@hilum/ui 3.2.5 → 3.2.7

package/dist/index.d.ts

@@ -1288,18 +1288,24 @@ declare namespace StatCardGrid {
 }
 
 type StatusBadgeVariant = NonNullable<React.ComponentProps<typeof Badge>["variant"]>;
+type StatusBadgeIcon = React.ComponentType<{
+    className?: string;
+}>;
 interface StatusBadgeProps extends Omit<React.ComponentProps<typeof Badge>, "children" | "variant"> {
     status?: string | null;
     label?: React.ReactNode;
     variant?: StatusBadgeVariant;
     variantMap?: Record<string, StatusBadgeVariant>;
     labelMap?: Record<string, React.ReactNode>;
+    icon?: StatusBadgeIcon;
+    iconMap?: Record<string, StatusBadgeIcon>;
+    iconClassName?: string;
     showDot?: boolean;
     dotClassName?: string;
 }
 declare function statusLabel(status?: string | null): string;
 declare function statusBadgeVariantFor(status?: string | null, variantMap?: Record<string, StatusBadgeVariant>): StatusBadgeVariant;
-declare function StatusBadge({ status, label, variant, variantMap, labelMap, showDot, dotClassName, className, ...props }: StatusBadgeProps): react_jsx_runtime.JSX.Element;
+declare function StatusBadge({ status, label, variant, variantMap, labelMap, icon, iconMap, iconClassName, showDot, dotClassName, className, ...props }: StatusBadgeProps): react_jsx_runtime.JSX.Element;
 declare namespace StatusBadge {
     var displayName: string;
 }

package/dist/index.js

@@ -446,7 +446,7 @@ var buttonVariants = cva(
         xs: "h-6 gap-1 px-2 caption rounded-md",
         sm: "h-8 gap-1.5 px-3 rounded-md",
         lg: "h-11 px-6 rounded-md",
-        icon: "size-10 rounded-md",
+        icon: "size-9 rounded-md",
         "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
         "icon-sm": "size-8 rounded-md",
         "icon-lg": "size-11 rounded-md"
@@ -2042,7 +2042,7 @@ var DialogContent = React19.forwardRef(({ className, children, ...props }, ref)
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxs(Dialog.Close, { className: "absolute right-3 top-3 flex size-10 items-center justify-center rounded-md text-muted-foreground opacity-70 transition-[opacity,scale] hover:opacity-100 active:scale-[0.96] focus:outline-none focus:ring-2 focus:ring-ground-900/20", children: [
+        /* @__PURE__ */ jsxs(Dialog.Close, { className: "absolute right-3 top-3 flex size-9 items-center justify-center rounded-md text-muted-foreground opacity-70 transition-[opacity,scale] hover:opacity-100 active:scale-[0.96] focus:outline-none focus:ring-2 focus:ring-ground-900/20", children: [
           /* @__PURE__ */ jsx(X, { size: 16 }),
           /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
         ] })
@@ -4182,7 +4182,7 @@ function Notification({
           {
             type: "button",
             onClick: onClose,
-            className: "flex size-10 items-center justify-center rounded-md text-muted-foreground transition-[color,scale] hover:text-muted-foreground active:scale-[0.96] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30",
+            className: "flex size-9 items-center justify-center rounded-md text-muted-foreground transition-[color,scale] hover:text-muted-foreground active:scale-[0.96] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30",
             children: [
               /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" }),
               /* @__PURE__ */ jsx(X, { size: 16 })
@@ -4275,7 +4275,7 @@ var PaginationLink = ({ className, isActive, ...props }) => /* @__PURE__ */ jsx(
     "aria-current": isActive ? "page" : void 0,
     className: cn(
       buttonVariants({ variant: isActive ? "default" : "ghost", size: "icon" }),
-      "size-10 rounded-md body",
+      "size-9 rounded-md body",
       className
     ),
     ...props
@@ -4315,7 +4315,7 @@ var PaginationEllipsis = ({ className, ...props }) => /* @__PURE__ */ jsx(
   "span",
   {
     "aria-hidden": true,
-    className: cn("flex size-10 items-center justify-center text-muted-foreground", className),
+    className: cn("flex size-9 items-center justify-center text-muted-foreground", className),
     ...props,
     children: /* @__PURE__ */ jsx(MoreHorizontal, { size: 14 })
   }
@@ -4741,7 +4741,7 @@ function RichTextEditor({
       type: "button",
       variant: "ghost",
       size: "icon",
-      className: "size-10 text-muted-foreground hover:text-foreground",
+      className: "size-9 text-muted-foreground hover:text-foreground",
       title,
       "aria-label": title,
       onMouseDown: (event) => {
@@ -4783,7 +4783,7 @@ function RichTextEditor({
                   type: "button",
                   variant: "ghost",
                   size: "icon",
-                  className: "size-10 text-muted-foreground hover:text-foreground",
+                  className: "size-9 text-muted-foreground hover:text-foreground",
                   title: "Insert link",
                   "aria-label": "Insert link",
                   onMouseDown: (event) => {
@@ -4800,7 +4800,7 @@ function RichTextEditor({
                   type: "button",
                   variant: "ghost",
                   size: "icon",
-                  className: "size-10 text-muted-foreground hover:text-foreground",
+                  className: "size-9 text-muted-foreground hover:text-foreground",
                   title: "Insert image",
                   "aria-label": "Insert image",
                   onMouseDown: (event) => {
@@ -5258,7 +5258,7 @@ var SheetContent = React19.forwardRef(
         ...props,
         children: [
           children,
-          /* @__PURE__ */ jsxs(Dialog.Close, { className: "absolute right-3 top-3 flex size-10 items-center justify-center rounded-md text-muted-foreground opacity-70 transition-[opacity,scale] hover:opacity-100 active:scale-[0.96] focus:outline-none focus:ring-2 focus:ring-ground-900/20", children: [
+          /* @__PURE__ */ jsxs(Dialog.Close, { className: "absolute right-3 top-3 flex size-9 items-center justify-center rounded-md text-muted-foreground opacity-70 transition-[opacity,scale] hover:opacity-100 active:scale-[0.96] focus:outline-none focus:ring-2 focus:ring-ground-900/20", children: [
             /* @__PURE__ */ jsx(X, { size: 16 }),
             /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
           ] })
@@ -5687,7 +5687,7 @@ function SidebarMenuButton({
         ],
         // Collapsed state
         "group-data-[state=collapsed]/sidebar-wrapper:justify-center",
-        "group-data-[state=collapsed]/sidebar-wrapper:size-10",
+        "group-data-[state=collapsed]/sidebar-wrapper:size-9",
         "group-data-[state=collapsed]/sidebar-wrapper:p-0",
         className
       ),
@@ -6045,6 +6045,9 @@ function StatusBadge({
   variant,
   variantMap,
   labelMap,
+  icon,
+  iconMap,
+  iconClassName,
   showDot = false,
   dotClassName,
   className,
@@ -6053,11 +6056,12 @@ function StatusBadge({
   const normalized = normalizeStatus(status);
   const resolvedVariant = variant ?? statusBadgeVariantFor(normalized, variantMap);
   const resolvedLabel = label ?? labelMap?.[normalized] ?? statusLabel(normalized);
+  const Icon = icon ?? iconMap?.[normalized];
   return /* @__PURE__ */ jsxs(
     Badge,
     {
       variant: resolvedVariant,
-      className: cn("max-w-full whitespace-nowrap", showDot && "pl-2", className),
+      className: cn("max-w-full whitespace-nowrap", (showDot || Icon) && "pl-2", className),
       ...props,
       children: [
         showDot && /* @__PURE__ */ jsx(
@@ -6071,6 +6075,7 @@ function StatusBadge({
             "aria-hidden": "true"
           }
         ),
+        Icon && /* @__PURE__ */ jsx(Icon, { className: cn("size-3 shrink-0", iconClassName), "aria-hidden": "true" }),
         /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: resolvedLabel })
       ]
     }
@@ -6378,7 +6383,7 @@ var toggleVariants = cva(
         sm: "h-8 gap-1.5 px-3",
         default: "h-10 px-3",
         lg: "h-11 px-4",
-        icon: "size-10",
+        icon: "size-9",
         "icon-sm": "size-8",
         "icon-lg": "size-11"
       }