@hunterchen/canvas 0.6.0 → 0.8.0

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;
+}