@onesaz/ui 0.4.7 → 0.4.9

package/dist/index.d.ts

@@ -1870,6 +1870,8 @@ interface SidebarProps extends React.HTMLAttributes<HTMLElement> {
 }
 declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLElement>>;
 interface SidebarHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Use accent color for text */
+    accentColor?: boolean;
 }
 declare const SidebarHeader: React.ForwardRefExoticComponent<SidebarHeaderProps & React.RefAttributes<HTMLDivElement>>;
 interface SidebarContentProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -1951,6 +1953,8 @@ interface SidebarRailProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const SidebarRail: React.ForwardRefExoticComponent<SidebarRailProps & React.RefAttributes<HTMLDivElement>>;
 interface IconRailProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Expand rail on hover */
+    hoverExpandRail?: boolean;
 }
 declare const IconRail: React.ForwardRefExoticComponent<IconRailProps & React.RefAttributes<HTMLDivElement>>;
 interface IconRailHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -1973,6 +1977,8 @@ interface IconRailItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement
     asButton?: boolean;
     /** Toggle rail expansion when clicked */
     toggleRail?: boolean;
+    /** Custom color for the icon (CSS color value or Tailwind class) */
+    iconColor?: string;
 }
 declare const IconRailItem: React.ForwardRefExoticComponent<IconRailItemProps & React.RefAttributes<HTMLButtonElement>>;
 interface RailPanelProps extends React.HTMLAttributes<HTMLDivElement> {

package/dist/index.js

@@ -955,7 +955,7 @@ var Button = React6.forwardRef(
     const variantClasses3 = colorOverride ? null : {
       "bg-accent text-accent-foreground hover:bg-accent-hover": resolvedVariant === "default",
       "bg-destructive text-destructive-foreground hover:bg-destructive/90": resolvedVariant === "destructive",
-      "border border-accent bg-transparent text-accent hover:bg-accent/10 dark:border-border dark:text-foreground dark:hover:bg-muted": resolvedVariant === "outline",
+      "border border-input bg-background hover:text-foreground dark:border-border dark:text-foreground dark:hover:bg-muted": resolvedVariant === "outline",
       "bg-muted text-foreground hover:bg-muted/80": resolvedVariant === "secondary",
       "hover:bg-muted hover:text-foreground": resolvedVariant === "ghost",
       "text-accent underline-offset-4 hover:underline": resolvedVariant === "link"
@@ -1008,7 +1008,7 @@ var IconButton = React6.forwardRef(
     const variantClasses3 = colorOverride ? null : {
       "bg-accent text-accent-foreground hover:bg-accent-hover": variant === "default",
       "bg-destructive text-destructive-foreground hover:bg-destructive/90": variant === "destructive",
-      "border border-accent bg-transparent text-accent hover:bg-accent/10 dark:border-border dark:text-foreground dark:hover:bg-muted": variant === "outline",
+      "border border-input bg-background hover:text-foreground dark:border-border dark:text-foreground dark:hover:bg-muted": variant === "outline",
       "bg-muted text-foreground hover:bg-muted/80": variant === "secondary",
       "hover:bg-muted hover:text-foreground": variant === "ghost",
       "text-accent underline-offset-4 hover:underline": variant === "link"
@@ -8513,12 +8513,16 @@ var Sidebar = React47.forwardRef(
 );
 Sidebar.displayName = "Sidebar";
 var SidebarHeader = React47.forwardRef(
-  ({ className, children, ...props }, ref) => {
+  ({ className, accentColor = false, children, ...props }, ref) => {
     return /* @__PURE__ */ jsx47(
       "div",
       {
         ref,
-        className: cn("flex items-center h-14 px-4 border-b border-border shrink-0", className),
+        className: cn(
+          "flex items-center h-14 px-4 border-b border-border shrink-0",
+          accentColor && "text-[var(--accent-7)] font-semibold",
+          className
+        ),
         ...props,
         children
       }
@@ -8782,9 +8786,19 @@ var SidebarRail = React48.forwardRef(
 );
 SidebarRail.displayName = "SidebarRail";
 var IconRail = React48.forwardRef(
-  ({ className, children, ...props }, ref) => {
-    const { railExpanded, overlayRail, expandableRail } = useSidebarRail();
+  ({ className, children, hoverExpandRail = false, ...props }, ref) => {
+    const { railExpanded, overlayRail, expandableRail, setRailExpanded } = useSidebarRail();
     const isExpanded = expandableRail && railExpanded;
+    const handleMouseEnter = () => {
+      if (hoverExpandRail && expandableRail) {
+        setRailExpanded(true);
+      }
+    };
+    const handleMouseLeave = () => {
+      if (hoverExpandRail && expandableRail) {
+        setRailExpanded(false);
+      }
+    };
     return /* @__PURE__ */ jsx48(
       "div",
       {
@@ -8793,6 +8807,8 @@ var IconRail = React48.forwardRef(
           "relative h-full shrink-0",
           isExpanded && !overlayRail ? "w-[var(--rail-expanded-width)]" : "w-[var(--rail-width)]"
         ),
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
         ...props,
         children: /* @__PURE__ */ jsx48(
           "div",
@@ -8863,7 +8879,7 @@ var IconRailFooter = React48.forwardRef(
 );
 IconRailFooter.displayName = "IconRailFooter";
 var IconRailItem = React48.forwardRef(
-  ({ className, railId, icon, label, asButton = false, toggleRail = false, onClick, ...props }, ref) => {
+  ({ className, railId, icon, label, asButton = false, toggleRail = false, iconColor, onClick, ...props }, ref) => {
     const {
       activeRail,
       setActiveRail,
@@ -8888,6 +8904,7 @@ var IconRailItem = React48.forwardRef(
         setActiveRail(railId);
       }
     };
+    const iconWithColor = iconColor ? /* @__PURE__ */ jsx48("span", { style: { color: iconColor }, className: "flex items-center justify-center", children: icon }) : icon;
     return /* @__PURE__ */ jsxs33(
       "button",
       {
@@ -8899,14 +8916,15 @@ var IconRailItem = React48.forwardRef(
           "flex items-center rounded-md transition-colors cursor-pointer",
           isRailExpanded ? "h-10 px-3 justify-start gap-3 w-full" : "w-10 h-10 justify-center",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-          isActive ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:text-foreground hover:bg-muted",
+          isActive ? "bg-accent text-accent-foreground" : !iconColor && "text-muted-foreground hover:text-foreground hover:bg-muted",
+          iconColor && !isActive && "hover:bg-muted",
           className
         ),
         title: label,
         "aria-label": label,
         ...props,
         children: [
-          icon,
+          iconWithColor,
           isRailExpanded && label && /* @__PURE__ */ jsx48("span", { className: "text-sm font-medium truncate", children: label })
         ]
       }