@hunterchen/canvas 0.7.0 → 0.8.0

package/src/components/canvas/navbar/single-button.tsx

@@ -1,6 +1,12 @@
 import { useState, useEffect } from "react";
 import * as LucideIcons from "lucide-react";
 import { AnimatePresence, motion } from "framer-motion";
+import type {
+  NavbarDisplayMode,
+  NavbarButtonConfig,
+  NavbarTooltipConfig,
+} from "../../../types";
+import { cn } from "../../../lib/utils";
 
 interface SingleButtonProps {
   label: string;
@@ -10,6 +16,14 @@ interface SingleButtonProps {
   isPushed: boolean;
   link?: string;
   onDebouncedClick?: (callback: () => void) => void;
+  /** Display mode for the button */
+  displayMode?: NavbarDisplayMode;
+  /** Button styling configuration */
+  buttonConfig?: NavbarButtonConfig;
+  /** Tooltip configuration */
+  tooltipConfig?: NavbarTooltipConfig;
+  /** Whether the navbar is in vertical layout */
+  isVertical?: boolean;
 }
 
 export default function SingleButton({
@@ -19,17 +33,48 @@ export default function SingleButton({
   isPushed,
   link,
   onDebouncedClick,
+  displayMode = "icons",
+  buttonConfig = {},
+  tooltipConfig = {},
+  isVertical = false,
 }: SingleButtonProps) {
   const [isHovered, setIsHovered] = useState(false);
   const [showTag, setShowTag] = useState(false);
   const [copiedEmail, setCopiedEmail] = useState(false);
+
   const isLucideIconName = typeof icon === "string";
   const IconComponent = isLucideIconName
     ? (LucideIcons[icon as keyof typeof LucideIcons] as LucideIcons.LucideIcon | undefined)
     : icon;
-  const TagDelay = 100;
 
-  if (!IconComponent) {
+  // Extract config values
+  const {
+    className: buttonClassName,
+    style: buttonStyle,
+    activeClassName,
+    activeStyle,
+    hoverClassName,
+    hoverStyle,
+    iconClassName,
+    iconSize = 20,
+    labelClassName,
+    labelStyle,
+  } = buttonConfig;
+
+  const {
+    disabled: tooltipDisabled = false,
+    className: tooltipClassName,
+    style: tooltipStyle,
+    delay: tooltipDelay = 100,
+  } = tooltipConfig;
+
+  // Determine what to show based on display mode
+  const showIcon = displayMode !== "labels";
+  const allowExpand = displayMode === "icons"; // Only expand on active in icons mode
+  const showTooltip = (displayMode === "icons" || displayMode === "compact") && !tooltipDisabled;
+
+  // Validate icon component for modes that need it
+  if (showIcon && !IconComponent) {
     throw new Error(
       "A valid 'icon' prop is required (Lucide icon name or custom icon component).",
     );
@@ -38,10 +83,10 @@ export default function SingleButton({
   useEffect(() => {
     let timeoutId: NodeJS.Timeout;
 
-    if (isHovered) {
+    if (isHovered && showTooltip) {
       timeoutId = setTimeout(() => {
         setShowTag(true);
-      }, TagDelay);
+      }, tooltipDelay);
     } else {
       setShowTag(false);
     }
@@ -49,7 +94,7 @@ export default function SingleButton({
     return () => {
       clearTimeout(timeoutId);
     };
-  }, [isHovered]);
+  }, [isHovered, showTooltip, tooltipDelay]);
 
   useEffect(() => {
     setShowTag(false);
@@ -85,11 +130,168 @@ export default function SingleButton({
 
   const displayLabel = copiedEmail ? "Email copied!" : label;
 
+  // Compute button classes
+  const baseButtonClass = "relative flex items-center rounded-md p-2 text-neutral-500 transition-colors duration-200 focus:outline-none";
+  // Only apply default classes if no custom style is provided
+  const stateClass = isPushed
+    ? (activeClassName || (!activeStyle && "bg-neutral-200"))
+    : isHovered
+      ? (hoverClassName || (!hoverStyle && "bg-neutral-100"))
+      : "";
+
+  // Compute button styles
+  const computedButtonStyle: React.CSSProperties = {
+    ...buttonStyle,
+    ...(isPushed && activeStyle),
+    ...(isHovered && !isPushed && hoverStyle),
+  };
+
+  // Compute icon classes and styles
+  const iconSizeStyle = { width: iconSize, height: iconSize };
+  const baseIconClass = "flex-shrink-0";
+  // Only apply default icon colors if no custom button color style is provided
+  const hasCustomColor = buttonStyle?.color;
+  const iconColorClass = hasCustomColor
+    ? ""
+    : isPushed
+      ? "text-neutral-700"
+      : "text-neutral-500";
+
+  // Compute label classes
+  const baseLabelClass = "whitespace-nowrap font-canvas-figtree text-sm font-medium text-neutral-700";
+
+  // Tooltip position based on vertical layout
+  const tooltipPositionClass = isVertical
+    ? "left-full top-1/2 -translate-y-1/2 ml-2"
+    : "-top-10 left-1/2";
+  const tooltipTransform = isVertical
+    ? { x: 0, y: "-50%" }
+    : { x: "-50%" };
+
+  // Render icon element
+  const renderIcon = () => {
+    if (!showIcon || !IconComponent) return null;
+    return (
+      <IconComponent
+        className={cn(baseIconClass, iconColorClass, iconClassName)}
+        style={iconSizeStyle}
+      />
+    );
+  };
+
+  // Render label element
+  const renderLabel = (animated = false) => {
+    if (animated) {
+      return (
+        <motion.span
+          initial={{ opacity: 0, width: 0 }}
+          animate={{ opacity: 1, width: "auto" }}
+          exit={{ opacity: 0, width: 0 }}
+          transition={{
+            duration: 0.1,
+            ease: "easeInOut",
+          }}
+          className={cn("overflow-hidden", baseLabelClass, labelClassName)}
+          style={labelStyle}
+        >
+          {displayLabel}
+        </motion.span>
+      );
+    }
+    return (
+      <span
+        className={cn(baseLabelClass, labelClassName)}
+        style={labelStyle}
+      >
+        {displayLabel}
+      </span>
+    );
+  };
+
+  // Render tooltip
+  const renderTooltip = () => {
+    if (!showTooltip || !showTag || isPushed) return null;
+
+    return (
+      <AnimatePresence>
+        <motion.div
+          initial={{ opacity: 0, y: isVertical ? 0 : 5, scale: 0.9, ...tooltipTransform }}
+          animate={{ opacity: 1, y: 0, scale: 1, ...tooltipTransform }}
+          exit={{ opacity: 0, y: isVertical ? 0 : 5, scale: 0.9, ...tooltipTransform }}
+          transition={{
+            duration: 0.05,
+            ease: "easeOut",
+          }}
+          className={cn("pointer-events-none absolute z-50", tooltipPositionClass)}
+        >
+          <div className="rounded-sm bg-gradient-to-t from-black/10 to-transparent px-[1px] pb-[2.5px] pt-[1px]">
+            <div
+              className={cn(
+                "whitespace-nowrap rounded-sm px-2 py-1 font-canvas-figtree text-sm",
+                !tooltipStyle?.backgroundColor && "bg-neutral-50",
+                !tooltipStyle?.color && "text-neutral-600",
+                tooltipClassName,
+              )}
+              style={tooltipStyle}
+            >
+              {displayLabel}
+            </div>
+          </div>
+        </motion.div>
+      </AnimatePresence>
+    );
+  };
+
+  // Render based on display mode
+  const renderContent = () => {
+    // Labels only mode
+    if (displayMode === "labels") {
+      return renderLabel();
+    }
+
+    // Icons + labels always mode
+    if (displayMode === "icons-labels") {
+      return (
+        <div className="flex items-center gap-2">
+          {renderIcon()}
+          {renderLabel()}
+        </div>
+      );
+    }
+
+    // Compact mode - icons only, no expansion
+    if (displayMode === "compact") {
+      return (
+        <>
+          {renderIcon()}
+          {renderTooltip()}
+        </>
+      );
+    }
+
+    // Icons mode (default) - expands on active
+    if (isPushed && allowExpand) {
+      return (
+        <div className="flex items-center gap-2">
+          <div>{renderIcon()}</div>
+          {renderLabel(true)}
+        </div>
+      );
+    }
+
+    return (
+      <>
+        {renderIcon()}
+        {renderTooltip()}
+      </>
+    );
+  };
+
   return (
     <motion.button
       aria-label={label}
-      className={`relative flex items-center rounded-md p-2 text-canvas-medium transition-colors duration-200 ${isPushed ? "bg-[#EEE2FB]" : isHovered ? "bg-canvas-highlight" : ""
-        }`}
+      className={cn(baseButtonClass, stateClass, buttonClassName)}
+      style={computedButtonStyle}
       onClick={handleClick}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
@@ -100,55 +302,7 @@ export default function SingleButton({
         damping: 25,
       }}
     >
-      {isPushed ? (
-        <div className="flex items-center gap-2">
-          <div>
-            <IconComponent
-              className={`h-5 w-5 flex-shrink-0 ${isPushed ? (isLucideIconName ? "text-canvas-emphasis" : "text-white") : "text-canvas-medium"
-                }`}
-            />
-          </div>
-          <motion.span
-            initial={{ opacity: 0, width: 0 }}
-            animate={{ opacity: 1, width: "auto" }}
-            exit={{ opacity: 0, width: 0 }}
-            transition={{
-              duration: 0.1,
-              ease: "easeInOut",
-            }}
-            className="overflow-hidden whitespace-nowrap font-canvas-figtree text-sm font-medium text-canvas-emphasis"
-          >
-            {displayLabel}
-          </motion.span>
-        </div>
-      ) : (
-        <div>
-          <IconComponent
-            className={`h-5 w-5 flex-shrink-0 ${isPushed ? (isLucideIconName ? "text-canvas-emphasis" : "text-white") : "text-canvas-medium"
-              }`}
-          />
-          <AnimatePresence>
-            {showTag && !isPushed && (
-              <motion.div
-                initial={{ opacity: 0, y: 5, scale: 0.9, x: "-50%" }}
-                animate={{ opacity: 1, y: 0, scale: 1, x: "-50%" }}
-                exit={{ opacity: 0, y: 5, scale: 0.9, x: "-50%" }}
-                transition={{
-                  duration: 0.05,
-                  ease: "easeOut",
-                }}
-                className="pointer-events-none absolute -top-10 left-1/2 z-50"
-              >
-                <div className="rounded-sm bg-gradient-to-t from-black/10 to-transparent px-[1px] pb-[2.5px] pt-[1px]">
-                  <div className="whitespace-nowrap rounded-sm bg-canvas-offwhite px-2 py-1 font-canvas-figtree text-sm text-canvas-medium">
-                    {displayLabel}
-                  </div>
-                </div>
-              </motion.div>
-            )}
-          </AnimatePresence>
-        </div>
-      )}
+      {renderContent()}
     </motion.button>
   );
 }

package/src/index.ts

@@ -56,4 +56,9 @@ export type {
   ToolbarConfig,
   ToolbarPosition,
   ToolbarDisplayMode,
+  NavbarConfig,
+  NavbarPosition,
+  NavbarDisplayMode,
+  NavbarButtonConfig,
+  NavbarTooltipConfig,
 } from "./types";

package/src/styles.css

@@ -4,19 +4,21 @@
 
 @layer base {
   :root {
-    --canvas-beige: #f7f1e5;
-    --canvas-coral: #ffb5a7;
-    --canvas-lilac: #d9c8e6;
-    --canvas-salmon: #ffa585;
-    --canvas-heavy: #3c204c;
-    --canvas-emphasis: #513b7a;
-    --canvas-active: #8f57ad;
-    --canvas-tinted: #c9a7db;
-    --canvas-medium: #776780;
-    --canvas-light: #c3b8cb;
-    --canvas-faint-lilac: #f5f2f7;
-    --canvas-offwhite: #fdfcfd;
-    --canvas-highlight: #f5f2f7;
+    /* Neutral gray palette (default) */
+    --canvas-beige: #f5f5f5;
+    --canvas-coral: #d4d4d4;
+    --canvas-lilac: #e5e5e5;
+    --canvas-salmon: #a3a3a3;
+    --canvas-heavy: #171717;
+    --canvas-emphasis: #262626;
+    --canvas-active: #525252;
+    --canvas-tinted: #a3a3a3;
+    --canvas-medium: #737373;
+    --canvas-light: #a3a3a3;
+    --canvas-faint-lilac: #fafafa;
+    --canvas-offwhite: #ffffff;
+    --canvas-highlight: #f5f5f5;
+    --canvas-pushed: #e5e5e5;
     --canvas-border-light: 0 0% 89%;
   }
 }

package/src/types/index.ts

@@ -97,3 +97,94 @@ export interface ToolbarConfig {
   /** Format for scale. Default: '1.00x' */
   scaleFormat?: (scale: number) => string;
 }
+
+/**
+ * Preset positions for the navbar
+ */
+export type NavbarPosition = 'top' | 'bottom' | 'left' | 'right';
+
+/**
+ * Display modes for navbar items
+ */
+export type NavbarDisplayMode =
+  | 'icons'         // Icons only, label shows on expand (default)
+  | 'labels'        // Labels only, no icons
+  | 'icons-labels'  // Always show both icon and label
+  | 'compact';      // Icons only, no expansion - just highlight
+
+/**
+ * Tooltip configuration for navbar buttons
+ */
+export interface NavbarTooltipConfig {
+  /** Disable tooltips entirely. Default: false */
+  disabled?: boolean;
+  /** Additional className for tooltip */
+  className?: string;
+  /** Inline styles for tooltip */
+  style?: React.CSSProperties;
+  /** Delay before showing tooltip in ms. Default: 100 */
+  delay?: number;
+}
+
+/**
+ * Button styling configuration for navbar
+ */
+export interface NavbarButtonConfig {
+  /** Additional className for all buttons */
+  className?: string;
+  /** Inline styles for all buttons */
+  style?: React.CSSProperties;
+  /** Active/pushed state className */
+  activeClassName?: string;
+  /** Active state inline styles */
+  activeStyle?: React.CSSProperties;
+  /** Hover state className */
+  hoverClassName?: string;
+  /** Hover state inline styles */
+  hoverStyle?: React.CSSProperties;
+  /** Icon className */
+  iconClassName?: string;
+  /** Icon size in pixels. Default: 20 */
+  iconSize?: number;
+  /** Label className */
+  labelClassName?: string;
+  /** Label inline styles */
+  labelStyle?: React.CSSProperties;
+}
+
+/**
+ * Configuration options for the canvas navbar
+ */
+export interface NavbarConfig {
+  // === Visibility ===
+  /** Hide the navbar entirely. Default: false */
+  hidden?: boolean;
+
+  // === Display Mode ===
+  /** How to display items. Default: 'icons' */
+  display?: NavbarDisplayMode;
+
+  // === Positioning ===
+  /** Preset position. Default: 'bottom' */
+  position?: NavbarPosition;
+
+  // === Container Styling ===
+  /** Additional className for the navbar container */
+  className?: string;
+  /** Inline styles for the navbar container */
+  style?: React.CSSProperties;
+
+  // === Button Configuration ===
+  /** Button styling options */
+  buttonConfig?: NavbarButtonConfig;
+
+  // === Tooltip Configuration ===
+  /** Tooltip options */
+  tooltipConfig?: NavbarTooltipConfig;
+
+  // === Spacing ===
+  /** Gap between buttons in pixels. Default: 4 */
+  gap?: number;
+  /** Padding inside the navbar in pixels. Default: 4 */
+  padding?: number;
+}