gridsmith-ui 0.2.3 → 0.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.d.ts +4 -1
  2. package/dist/index.js +14 -8
  3. package/dist/index.js.map +1 -1
  4. package/dist/roots.css +13 -5
  5. package/dist/tailwind.css +0 -1
  6. package/dist-static/tailwind.css +0 -1
  7. package/package.json +2 -2
package/dist/index.d.ts CHANGED
@@ -849,6 +849,7 @@ interface SidebarItem {
849
849
  badge?: ReactNode;
850
850
  children?: SidebarItem[];
851
851
  defaultExpanded?: boolean;
852
+ onClick?: () => void;
852
853
  }
853
854
  interface SidebarSection {
854
855
  label?: string;
@@ -863,11 +864,13 @@ interface SidebarNavProps {
863
864
  onItemClick?: (item: SidebarItem, index: number) => void;
864
865
  /** Override sidebar type (defaults to parent Sidebar context type) */
865
866
  type?: SidebarType;
867
+ /** Apply data-mode for independent light/dark theming when used standalone */
868
+ mode?: "light" | "dark";
866
869
  /** Mobile mode: disables hover flyouts for compact items, renders children inline instead. */
867
870
  mobile?: boolean;
868
871
  className?: string;
869
872
  }
870
- declare function SidebarNav({ items, sections, collapsed: propsCollapsed, onCollapsedChange: propsOnChange, footer, onItemClick, type: propsType, mobile, className, }: SidebarNavProps): react_jsx_runtime.JSX.Element;
873
+ declare function SidebarNav({ items, sections, collapsed: propsCollapsed, onCollapsedChange: propsOnChange, footer, onItemClick, type: propsType, mode, mobile, className, }: SidebarNavProps): react_jsx_runtime.JSX.Element;
871
874
 
872
875
  interface SegmentedControlOption {
873
876
  value: string;
package/dist/index.js CHANGED
@@ -94217,7 +94217,7 @@ function CompactFlyout({
94217
94217
  },
94218
94218
  className: cn(
94219
94219
  "flex items-center gap-ds-2 px-ds-2 py-ds-1.5 text-xs rounded-[var(--ds-radius-sm)] transition-colors cursor-pointer",
94220
- child.active ? "bg-sidebar-accent-subtle text-[var(--ds-sidebar-accent)] font-medium" : "text-[var(--ds-sidebar-text-secondary)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)]"
94220
+ child.active ? "bg-[var(--ds-sidebar-item-active)] text-[var(--ds-sidebar-accent)] font-medium" : "text-[var(--ds-sidebar-text-secondary)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)]"
94221
94221
  ),
94222
94222
  children: [
94223
94223
  child.icon && /* @__PURE__ */ jsx(Icon, { name: child.icon, size: 14 }),
@@ -94240,6 +94240,7 @@ function SidebarNav({
94240
94240
  footer,
94241
94241
  onItemClick,
94242
94242
  type: propsType,
94243
+ mode,
94243
94244
  mobile = false,
94244
94245
  className
94245
94246
  }) {
@@ -94279,13 +94280,14 @@ function SidebarNav({
94279
94280
  href: item.href ?? "#",
94280
94281
  onClick: (e) => {
94281
94282
  e.preventDefault();
94283
+ item.onClick?.();
94282
94284
  onItemClick?.(item, index);
94283
94285
  },
94284
94286
  className: cn(
94285
94287
  "flex items-center gap-ds-2 transition-colors cursor-pointer",
94286
94288
  isRoot ? cn("py-ds-2 text-sm", isMinimal ? "rounded-full" : "rounded-[var(--ds-radius-md)]") : "py-ds-1.5 text-xs rounded-[var(--ds-radius-sm)]",
94287
94289
  isRoot ? collapsed ? "justify-center px-0" : "px-ds-3" : "px-ds-2",
94288
- item.active ? isRoot ? isMinimal ? "bg-sidebar-accent-subtle text-[var(--ds-sidebar-accent)] font-medium" : "bg-sidebar-accent-subtle text-[var(--ds-sidebar-accent)] font-medium border-l-2 border-[var(--ds-sidebar-accent)]" : "bg-sidebar-accent-subtle text-[var(--ds-sidebar-accent)] font-medium" : isRoot ? isMinimal ? "text-[var(--ds-sidebar-text-secondary)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)]" : "text-[var(--ds-sidebar-text-secondary)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)] border-l-2 border-transparent" : "text-[var(--ds-sidebar-text-muted)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)]"
94290
+ item.active ? isRoot ? isMinimal ? "bg-[var(--ds-sidebar-item-active)] text-[var(--ds-sidebar-text)] font-medium" : "bg-[var(--ds-sidebar-item-active)] text-[var(--ds-sidebar-text)] font-medium border-l-2 border-[var(--ds-sidebar-accent)]" : "bg-[var(--ds-sidebar-item-active)] text-[var(--ds-sidebar-accent)] font-medium" : isRoot ? isMinimal ? "text-[var(--ds-sidebar-text-secondary)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)]" : "text-[var(--ds-sidebar-text-secondary)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)] border-l-2 border-transparent" : "text-[var(--ds-sidebar-text-muted)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)]"
94289
94291
  ),
94290
94292
  children: [
94291
94293
  item.icon && /* @__PURE__ */ jsx(
@@ -94445,8 +94447,9 @@ function SidebarNav({
94445
94447
  return /* @__PURE__ */ jsxs(
94446
94448
  "aside",
94447
94449
  {
94450
+ "data-mode": mode || void 0,
94448
94451
  className: cn(
94449
- "flex flex-col shrink-0 overflow-y-auto",
94452
+ "flex flex-col shrink-0 h-full overflow-y-auto",
94450
94453
  "bg-[var(--ds-sidebar-bg)]",
94451
94454
  "border-r-[length:var(--ds-border-width)] border-[var(--ds-sidebar-border)]",
94452
94455
  "text-[var(--ds-sidebar-text)]",
@@ -94542,7 +94545,7 @@ function CompactNavItem({
94542
94545
  "aria-expanded": hasChildren ? mobile ? expanded : isOpen : void 0,
94543
94546
  className: cn(
94544
94547
  "relative flex flex-col items-center justify-center gap-[3px] w-full py-ds-3 px-ds-1 rounded-[var(--ds-radius-md)] transition-colors cursor-pointer",
94545
- item.active || childActive ? "bg-sidebar-accent-subtle text-[var(--ds-sidebar-accent)]" : "text-[var(--ds-sidebar-text-secondary)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)]"
94548
+ item.active || childActive ? "bg-[var(--ds-sidebar-item-active)] text-[var(--ds-sidebar-accent)]" : "text-[var(--ds-sidebar-text-secondary)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)]"
94546
94549
  ),
94547
94550
  children: [
94548
94551
  item.icon && /* @__PURE__ */ jsx(
@@ -94587,7 +94590,7 @@ function CompactNavItem({
94587
94590
  onClick: () => onItemClick?.(child, ci),
94588
94591
  className: cn(
94589
94592
  "flex items-center gap-ds-2 px-ds-3 py-ds-1.5 text-[length:var(--ds-font-size-xs)] rounded-[var(--ds-radius-sm)] transition-colors cursor-pointer w-full",
94590
- child.active ? "bg-sidebar-accent-subtle text-[var(--ds-sidebar-accent)] font-medium" : "text-[var(--ds-sidebar-text-muted)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)]"
94593
+ child.active ? "bg-[var(--ds-sidebar-item-active)] text-[var(--ds-sidebar-accent)] font-medium" : "text-[var(--ds-sidebar-text-muted)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)]"
94591
94594
  ),
94592
94595
  children: [
94593
94596
  child.icon && /* @__PURE__ */ jsx(Icon, { name: child.icon, size: 14, className: "shrink-0" }),
@@ -94719,7 +94722,7 @@ function PageHeader({
94719
94722
  "header",
94720
94723
  {
94721
94724
  className: cn(
94722
- "space-y-1",
94725
+ "space-y-ds-2",
94723
94726
  hasBanner && [
94724
94727
  "relative overflow-hidden rounded-[var(--ds-radius-lg)]",
94725
94728
  "bg-[var(--ds-bg-muted)]"
@@ -94776,8 +94779,10 @@ function PageHeader({
94776
94779
  className: cn(
94777
94780
  "flex items-center justify-center shrink-0",
94778
94781
  "w-[var(--ds-control-height-sm)] h-[var(--ds-control-height-sm)] rounded-[var(--ds-radius-md)]",
94779
- "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)]",
94780
- "hover:bg-[var(--ds-bg-surface)] transition-colors duration-[var(--ds-transition-speed)]",
94782
+ "bg-[var(--ds-bg-surface)] text-[var(--ds-text-secondary)]",
94783
+ "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
94784
+ "hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]",
94785
+ "transition-colors duration-[var(--ds-transition-speed)]",
94781
94786
  "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
94782
94787
  "cursor-pointer"
94783
94788
  ),
@@ -95262,6 +95267,7 @@ var Navbar = forwardRef(function Navbar2({
95262
95267
  "border-b-[length:var(--ds-border-width)] border-[var(--ds-accent-primary-hover)]"
95263
95268
  ) : cn(
95264
95269
  "bg-[var(--ds-bg-surface)]",
95270
+ "text-[var(--ds-text-primary)]",
95265
95271
  "border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
95266
95272
  GLASS_BACKDROP
95267
95273
  );