@hilum/ui 3.2.5 → 3.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hilum/ui",
-  "version": "3.2.5",
+  "version": "3.2.7",
   "private": false,
   "description": "Hilum UI — design system primitives (Button, Input, Dialog, Combobox, …) + tokens + fonts + icons",
   "license": "MIT",

package/src/components/button.tsx

@@ -31,7 +31,7 @@ const 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",

package/src/components/dialog.tsx

@@ -49,7 +49,7 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <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">
+      <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">
         <X size={16} />
         <span className="sr-only">Close</span>
       </Dialog.Close>

package/src/components/notification.tsx

@@ -95,7 +95,7 @@ function Notification({
               <button
                 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"
               >
                 <span className="sr-only">Close</span>
                 <X size={16} />

package/src/components/pagination.tsx

@@ -32,7 +32,7 @@ const PaginationLink = ({ className, isActive, ...props }: PaginationLinkProps)
     aria-current={isActive ? "page" : undefined}
     className={cn(
       buttonVariants({ variant: isActive ? "default" : "ghost", size: "icon" }),
-      "size-10 rounded-md body",
+      "size-9 rounded-md body",
       className,
     )}
     {...props}
@@ -70,7 +70,7 @@ PaginationNext.displayName = "PaginationNext";
 const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
   <span
     aria-hidden
-    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}
   >
     <MoreHorizontal size={14} />

package/src/components/rich-text-editor.tsx

@@ -294,7 +294,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={title}
       aria-label={title}
       onMouseDown={(event) => {
@@ -334,7 +334,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) => {
@@ -349,7 +349,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) => {

package/src/components/sheet.tsx

@@ -65,7 +65,7 @@ const SheetContent = React.forwardRef<React.ComponentRef<typeof Dialog.Content>,
         {...props}
       >
         {children}
-        <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">
+        <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">
           <X size={16} />
           <span className="sr-only">Close</span>
         </Dialog.Close>

package/src/components/sidebar.tsx

@@ -514,7 +514,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,
       )}

package/src/components/status-badge.tsx

@@ -5,6 +5,7 @@ import { Badge } from "./badge";
 import { cn } from "../lib/utils";
 
 type StatusBadgeVariant = NonNullable<React.ComponentProps<typeof Badge>["variant"]>;
+type StatusBadgeIcon = React.ComponentType<{ className?: string }>;
 
 interface StatusBadgeProps extends Omit<
   React.ComponentProps<typeof Badge>,
@@ -15,6 +16,9 @@ interface StatusBadgeProps extends Omit<
   variant?: StatusBadgeVariant;
   variantMap?: Record<string, StatusBadgeVariant>;
   labelMap?: Record<string, React.ReactNode>;
+  icon?: StatusBadgeIcon;
+  iconMap?: Record<string, StatusBadgeIcon>;
+  iconClassName?: string;
   showDot?: boolean;
   dotClassName?: string;
 }
@@ -108,6 +112,9 @@ function StatusBadge({
   variant,
   variantMap,
   labelMap,
+  icon,
+  iconMap,
+  iconClassName,
   showDot = false,
   dotClassName,
   className,
@@ -116,11 +123,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 (
     <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}
     >
       {showDot && (
@@ -133,6 +141,7 @@ function StatusBadge({
           aria-hidden="true"
         />
       )}
+      {Icon && <Icon className={cn("size-3 shrink-0", iconClassName)} aria-hidden="true" />}
       <span className="min-w-0 truncate">{resolvedLabel}</span>
     </Badge>
   );

package/src/components/toggle.tsx

@@ -37,7 +37,7 @@ const 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",
       },