@meetreeve/ui 0.8.0 → 0.8.1

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 (3) hide show
  1. package/dist/index.js +36 -16
  2. package/dist/index.mjs +36 -16
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -839,13 +839,23 @@ function Flyout({
839
839
  className: cn(
840
840
  "group flex w-full items-center gap-2.5 rounded-md px-3 py-1.5 text-sm transition-colors",
841
841
  collapsed && "justify-center px-0",
842
- active ? "bg-primary/10 text-foreground" : "text-muted-foreground hover:bg-foreground/5 hover:text-foreground"
842
+ // DEV-6586: this trigger renders as a row inside AppSidebar's own
843
+ // `<nav>` (a `bg-sidebar` surface that stays dark navy in both
844
+ // themes) — same fix as NavLink, same measured ratios (default
845
+ // 8.05:1, hover 13.65:1, active 10.95:1). The flyout PANEL below
846
+ // is intentionally left on document tokens: it renders via
847
+ // `position: fixed`, floating over the main content area on
848
+ // `bg-background`, not over the sidebar.
849
+ active ? "bg-sidebar-accent text-sidebar-accent-foreground" : "text-sidebar-foreground/70 hover:bg-sidebar-foreground/5 hover:text-sidebar-foreground"
843
850
  ),
844
851
  children: [
845
852
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
846
853
  Icon,
847
854
  {
848
- className: cn("size-4 shrink-0", active ? "text-primary" : "text-muted-foreground"),
855
+ className: cn(
856
+ "size-4 shrink-0",
857
+ active ? "text-sidebar-accent-foreground" : "text-sidebar-foreground/70"
858
+ ),
849
859
  strokeWidth: 1.5,
850
860
  "aria-hidden": "true"
851
861
  }
@@ -928,13 +938,23 @@ function NavLink({
928
938
  className: cn(
929
939
  "group flex items-center gap-2.5 rounded-md px-3 py-1.5 text-sm transition-colors",
930
940
  collapsed && "justify-center px-0",
931
- active ? "bg-primary/10 text-foreground" : "text-muted-foreground hover:bg-foreground/5 hover:text-foreground"
941
+ // DEV-6586: the sidebar is a permanently dark-navy surface in BOTH
942
+ // app themes (see `--sidebar-*` in globals.css) — styling from
943
+ // document-theme tokens (text-foreground/text-muted-foreground) put
944
+ // dark-on-dark text here in light mode. `--sidebar-foreground` /
945
+ // `--sidebar-accent(-foreground)` are theme-invariant, so hover/
946
+ // active reliably INCREASE legibility instead of erasing it:
947
+ // default 8.05:1, hover 13.65:1, active 10.95:1 (all >= 4.5:1 AA).
948
+ active ? "bg-sidebar-accent text-sidebar-accent-foreground" : "text-sidebar-foreground/70 hover:bg-sidebar-foreground/5 hover:text-sidebar-foreground"
932
949
  ),
933
950
  children: [
934
951
  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
935
952
  Icon,
936
953
  {
937
- className: cn("size-4 shrink-0", active ? "text-primary" : "text-muted-foreground"),
954
+ className: cn(
955
+ "size-4 shrink-0",
956
+ active ? "text-sidebar-accent-foreground" : "text-sidebar-foreground/70"
957
+ ),
938
958
  strokeWidth: 1.5,
939
959
  "aria-hidden": "true"
940
960
  }
@@ -1077,7 +1097,7 @@ function AppSidebar({
1077
1097
  href: brand.href,
1078
1098
  "data-testid": "app-sidebar-brand",
1079
1099
  title: brand.label,
1080
- className: "flex items-center justify-center border-b border-border px-1 py-4",
1100
+ className: "flex items-center justify-center border-b border-sidebar-border px-1 py-4",
1081
1101
  children: [
1082
1102
  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "sr-only", children: brand.label }),
1083
1103
  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BrandGlyph, { brand: { name: brand.label }, size: "xl" })
@@ -1090,9 +1110,9 @@ function AppSidebar({
1090
1110
  {
1091
1111
  href: brand.href,
1092
1112
  "data-testid": "app-sidebar-brand",
1093
- className: "flex items-center gap-2.5 border-b border-border px-5 py-4",
1113
+ className: "flex items-center gap-2.5 border-b border-sidebar-border px-5 py-4 text-sidebar-foreground",
1094
1114
  children: [
1095
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "grid size-7 place-items-center rounded-md bg-primary text-primary-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "font-mono text-sm font-bold", children: (brand.label[0] ?? "r").toUpperCase() }) }),
1115
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "grid size-7 place-items-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "font-mono text-sm font-bold", children: (brand.label[0] ?? "r").toUpperCase() }) }),
1096
1116
  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "truncate text-sm font-semibold tracking-tight", children: brand.label })
1097
1117
  ]
1098
1118
  }
@@ -1148,7 +1168,7 @@ function AppSidebar({
1148
1168
  "aria-modal": "true",
1149
1169
  "aria-label": "Navigation",
1150
1170
  "data-testid": "app-sidebar-mobile-drawer",
1151
- className: "absolute inset-y-0 left-0 flex w-72 flex-col overflow-y-auto border-r border-border bg-sidebar",
1171
+ className: "absolute inset-y-0 left-0 flex w-72 flex-col overflow-y-auto border-r border-sidebar-border bg-sidebar",
1152
1172
  children: [
1153
1173
  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "sticky top-0 z-10 flex justify-end bg-sidebar p-2", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
1154
1174
  "button",
@@ -1159,7 +1179,7 @@ function AppSidebar({
1159
1179
  "aria-label": `Close ${menuLabel.toLowerCase()}`,
1160
1180
  onClick: () => setMobileOpen(false),
1161
1181
  style: TOUCH_TARGET_STYLE,
1162
- className: "flex items-center justify-center rounded-md p-2 text-foreground hover:bg-foreground/5",
1182
+ className: "flex items-center justify-center rounded-md p-2 text-sidebar-foreground/70 hover:bg-sidebar-foreground/5 hover:text-sidebar-foreground",
1163
1183
  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.X, { className: "h-5 w-5", "aria-hidden": "true" })
1164
1184
  }
1165
1185
  ) }),
@@ -1177,7 +1197,7 @@ function AppSidebar({
1177
1197
  {
1178
1198
  "data-testid": "app-sidebar-desktop",
1179
1199
  className: cn(
1180
- "hidden shrink-0 flex-col border-r border-border bg-sidebar md:flex",
1200
+ "hidden shrink-0 flex-col border-r border-sidebar-border bg-sidebar md:flex",
1181
1201
  collapsed ? COLLAPSED_WIDTH_CLASS : EXPANDED_WIDTH_CLASS,
1182
1202
  // DEV-5331: a plain CSS width transition is enough — no new deps
1183
1203
  // for a spring/JS animation. Respect prefers-reduced-motion.
@@ -1198,7 +1218,7 @@ function AppSidebar({
1198
1218
  ) })
1199
1219
  }
1200
1220
  ),
1201
- collapsible && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "border-t border-border px-2 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
1221
+ collapsible && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "border-t border-sidebar-border px-2 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
1202
1222
  "button",
1203
1223
  {
1204
1224
  type: "button",
@@ -1208,7 +1228,7 @@ function AppSidebar({
1208
1228
  title: collapsed ? "Expand sidebar" : "Collapse sidebar",
1209
1229
  onClick: handleToggleCollapsed,
1210
1230
  className: cn(
1211
- "flex items-center gap-2.5 rounded-md px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-foreground/5 hover:text-foreground",
1231
+ "flex items-center gap-2.5 rounded-md px-3 py-1.5 text-sm text-sidebar-foreground/70 transition-colors hover:bg-sidebar-foreground/5 hover:text-sidebar-foreground",
1212
1232
  collapsed && "justify-center px-0"
1213
1233
  ),
1214
1234
  children: [
@@ -1346,18 +1366,18 @@ function ContextSwitcher({
1346
1366
  type: "button",
1347
1367
  title: active?.name || placeholder,
1348
1368
  "aria-label": active?.name || placeholder,
1349
- className: "flex h-10 w-10 items-center justify-center rounded-lg text-zinc-700 transition-colors hover:bg-zinc-900/5 dark:text-zinc-300 dark:hover:bg-white/5",
1369
+ className: "flex h-10 w-10 items-center justify-center rounded-lg text-sidebar-foreground/70 transition-colors hover:bg-sidebar-foreground/5 hover:text-sidebar-foreground",
1350
1370
  children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BrandGlyph, { brand: toBrand(active ?? { name: "" }), size: "lg" })
1351
1371
  }
1352
1372
  ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
1353
1373
  "button",
1354
1374
  {
1355
1375
  type: "button",
1356
- className: "group flex items-center gap-2 rounded-md border border-border bg-card/60 px-2.5 py-1.5 text-sm font-medium transition-colors hover:bg-muted",
1376
+ className: "group flex items-center gap-2 rounded-md border border-sidebar-border bg-sidebar-accent/60 px-2.5 py-1.5 text-sm font-medium transition-colors hover:bg-sidebar",
1357
1377
  children: [
1358
1378
  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BrandGlyph, { brand: toBrand(active ?? { name: "" }) }),
1359
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "max-w-[140px] truncate text-foreground/90", children: active?.name || placeholder }),
1360
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react3.ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" })
1379
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "max-w-[140px] truncate text-sidebar-accent-foreground", children: active?.name || placeholder }),
1380
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react3.ChevronDown, { className: "h-3.5 w-3.5 text-sidebar-foreground/70 transition-transform group-data-[state=open]:rotate-180" })
1361
1381
  ]
1362
1382
  }
1363
1383
  ) }),
package/dist/index.mjs CHANGED
@@ -784,13 +784,23 @@ function Flyout({
784
784
  className: cn(
785
785
  "group flex w-full items-center gap-2.5 rounded-md px-3 py-1.5 text-sm transition-colors",
786
786
  collapsed && "justify-center px-0",
787
- active ? "bg-primary/10 text-foreground" : "text-muted-foreground hover:bg-foreground/5 hover:text-foreground"
787
+ // DEV-6586: this trigger renders as a row inside AppSidebar's own
788
+ // `<nav>` (a `bg-sidebar` surface that stays dark navy in both
789
+ // themes) — same fix as NavLink, same measured ratios (default
790
+ // 8.05:1, hover 13.65:1, active 10.95:1). The flyout PANEL below
791
+ // is intentionally left on document tokens: it renders via
792
+ // `position: fixed`, floating over the main content area on
793
+ // `bg-background`, not over the sidebar.
794
+ active ? "bg-sidebar-accent text-sidebar-accent-foreground" : "text-sidebar-foreground/70 hover:bg-sidebar-foreground/5 hover:text-sidebar-foreground"
788
795
  ),
789
796
  children: [
790
797
  /* @__PURE__ */ jsx3(
791
798
  Icon,
792
799
  {
793
- className: cn("size-4 shrink-0", active ? "text-primary" : "text-muted-foreground"),
800
+ className: cn(
801
+ "size-4 shrink-0",
802
+ active ? "text-sidebar-accent-foreground" : "text-sidebar-foreground/70"
803
+ ),
794
804
  strokeWidth: 1.5,
795
805
  "aria-hidden": "true"
796
806
  }
@@ -873,13 +883,23 @@ function NavLink({
873
883
  className: cn(
874
884
  "group flex items-center gap-2.5 rounded-md px-3 py-1.5 text-sm transition-colors",
875
885
  collapsed && "justify-center px-0",
876
- active ? "bg-primary/10 text-foreground" : "text-muted-foreground hover:bg-foreground/5 hover:text-foreground"
886
+ // DEV-6586: the sidebar is a permanently dark-navy surface in BOTH
887
+ // app themes (see `--sidebar-*` in globals.css) — styling from
888
+ // document-theme tokens (text-foreground/text-muted-foreground) put
889
+ // dark-on-dark text here in light mode. `--sidebar-foreground` /
890
+ // `--sidebar-accent(-foreground)` are theme-invariant, so hover/
891
+ // active reliably INCREASE legibility instead of erasing it:
892
+ // default 8.05:1, hover 13.65:1, active 10.95:1 (all >= 4.5:1 AA).
893
+ active ? "bg-sidebar-accent text-sidebar-accent-foreground" : "text-sidebar-foreground/70 hover:bg-sidebar-foreground/5 hover:text-sidebar-foreground"
877
894
  ),
878
895
  children: [
879
896
  /* @__PURE__ */ jsx4(
880
897
  Icon,
881
898
  {
882
- className: cn("size-4 shrink-0", active ? "text-primary" : "text-muted-foreground"),
899
+ className: cn(
900
+ "size-4 shrink-0",
901
+ active ? "text-sidebar-accent-foreground" : "text-sidebar-foreground/70"
902
+ ),
883
903
  strokeWidth: 1.5,
884
904
  "aria-hidden": "true"
885
905
  }
@@ -1022,7 +1042,7 @@ function AppSidebar({
1022
1042
  href: brand.href,
1023
1043
  "data-testid": "app-sidebar-brand",
1024
1044
  title: brand.label,
1025
- className: "flex items-center justify-center border-b border-border px-1 py-4",
1045
+ className: "flex items-center justify-center border-b border-sidebar-border px-1 py-4",
1026
1046
  children: [
1027
1047
  /* @__PURE__ */ jsx4("span", { className: "sr-only", children: brand.label }),
1028
1048
  /* @__PURE__ */ jsx4(BrandGlyph, { brand: { name: brand.label }, size: "xl" })
@@ -1035,9 +1055,9 @@ function AppSidebar({
1035
1055
  {
1036
1056
  href: brand.href,
1037
1057
  "data-testid": "app-sidebar-brand",
1038
- className: "flex items-center gap-2.5 border-b border-border px-5 py-4",
1058
+ className: "flex items-center gap-2.5 border-b border-sidebar-border px-5 py-4 text-sidebar-foreground",
1039
1059
  children: [
1040
- /* @__PURE__ */ jsx4("span", { className: "grid size-7 place-items-center rounded-md bg-primary text-primary-foreground", children: /* @__PURE__ */ jsx4("span", { className: "font-mono text-sm font-bold", children: (brand.label[0] ?? "r").toUpperCase() }) }),
1060
+ /* @__PURE__ */ jsx4("span", { className: "grid size-7 place-items-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground", children: /* @__PURE__ */ jsx4("span", { className: "font-mono text-sm font-bold", children: (brand.label[0] ?? "r").toUpperCase() }) }),
1041
1061
  /* @__PURE__ */ jsx4("span", { className: "truncate text-sm font-semibold tracking-tight", children: brand.label })
1042
1062
  ]
1043
1063
  }
@@ -1093,7 +1113,7 @@ function AppSidebar({
1093
1113
  "aria-modal": "true",
1094
1114
  "aria-label": "Navigation",
1095
1115
  "data-testid": "app-sidebar-mobile-drawer",
1096
- className: "absolute inset-y-0 left-0 flex w-72 flex-col overflow-y-auto border-r border-border bg-sidebar",
1116
+ className: "absolute inset-y-0 left-0 flex w-72 flex-col overflow-y-auto border-r border-sidebar-border bg-sidebar",
1097
1117
  children: [
1098
1118
  /* @__PURE__ */ jsx4("div", { className: "sticky top-0 z-10 flex justify-end bg-sidebar p-2", children: /* @__PURE__ */ jsx4(
1099
1119
  "button",
@@ -1104,7 +1124,7 @@ function AppSidebar({
1104
1124
  "aria-label": `Close ${menuLabel.toLowerCase()}`,
1105
1125
  onClick: () => setMobileOpen(false),
1106
1126
  style: TOUCH_TARGET_STYLE,
1107
- className: "flex items-center justify-center rounded-md p-2 text-foreground hover:bg-foreground/5",
1127
+ className: "flex items-center justify-center rounded-md p-2 text-sidebar-foreground/70 hover:bg-sidebar-foreground/5 hover:text-sidebar-foreground",
1108
1128
  children: /* @__PURE__ */ jsx4(X2, { className: "h-5 w-5", "aria-hidden": "true" })
1109
1129
  }
1110
1130
  ) }),
@@ -1122,7 +1142,7 @@ function AppSidebar({
1122
1142
  {
1123
1143
  "data-testid": "app-sidebar-desktop",
1124
1144
  className: cn(
1125
- "hidden shrink-0 flex-col border-r border-border bg-sidebar md:flex",
1145
+ "hidden shrink-0 flex-col border-r border-sidebar-border bg-sidebar md:flex",
1126
1146
  collapsed ? COLLAPSED_WIDTH_CLASS : EXPANDED_WIDTH_CLASS,
1127
1147
  // DEV-5331: a plain CSS width transition is enough — no new deps
1128
1148
  // for a spring/JS animation. Respect prefers-reduced-motion.
@@ -1143,7 +1163,7 @@ function AppSidebar({
1143
1163
  ) })
1144
1164
  }
1145
1165
  ),
1146
- collapsible && /* @__PURE__ */ jsx4("div", { className: "border-t border-border px-2 py-2", children: /* @__PURE__ */ jsxs4(
1166
+ collapsible && /* @__PURE__ */ jsx4("div", { className: "border-t border-sidebar-border px-2 py-2", children: /* @__PURE__ */ jsxs4(
1147
1167
  "button",
1148
1168
  {
1149
1169
  type: "button",
@@ -1153,7 +1173,7 @@ function AppSidebar({
1153
1173
  title: collapsed ? "Expand sidebar" : "Collapse sidebar",
1154
1174
  onClick: handleToggleCollapsed,
1155
1175
  className: cn(
1156
- "flex items-center gap-2.5 rounded-md px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-foreground/5 hover:text-foreground",
1176
+ "flex items-center gap-2.5 rounded-md px-3 py-1.5 text-sm text-sidebar-foreground/70 transition-colors hover:bg-sidebar-foreground/5 hover:text-sidebar-foreground",
1157
1177
  collapsed && "justify-center px-0"
1158
1178
  ),
1159
1179
  children: [
@@ -1291,18 +1311,18 @@ function ContextSwitcher({
1291
1311
  type: "button",
1292
1312
  title: active?.name || placeholder,
1293
1313
  "aria-label": active?.name || placeholder,
1294
- className: "flex h-10 w-10 items-center justify-center rounded-lg text-zinc-700 transition-colors hover:bg-zinc-900/5 dark:text-zinc-300 dark:hover:bg-white/5",
1314
+ className: "flex h-10 w-10 items-center justify-center rounded-lg text-sidebar-foreground/70 transition-colors hover:bg-sidebar-foreground/5 hover:text-sidebar-foreground",
1295
1315
  children: /* @__PURE__ */ jsx6(BrandGlyph, { brand: toBrand(active ?? { name: "" }), size: "lg" })
1296
1316
  }
1297
1317
  ) : /* @__PURE__ */ jsxs5(
1298
1318
  "button",
1299
1319
  {
1300
1320
  type: "button",
1301
- className: "group flex items-center gap-2 rounded-md border border-border bg-card/60 px-2.5 py-1.5 text-sm font-medium transition-colors hover:bg-muted",
1321
+ className: "group flex items-center gap-2 rounded-md border border-sidebar-border bg-sidebar-accent/60 px-2.5 py-1.5 text-sm font-medium transition-colors hover:bg-sidebar",
1302
1322
  children: [
1303
1323
  /* @__PURE__ */ jsx6(BrandGlyph, { brand: toBrand(active ?? { name: "" }) }),
1304
- /* @__PURE__ */ jsx6("span", { className: "max-w-[140px] truncate text-foreground/90", children: active?.name || placeholder }),
1305
- /* @__PURE__ */ jsx6(ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" })
1324
+ /* @__PURE__ */ jsx6("span", { className: "max-w-[140px] truncate text-sidebar-accent-foreground", children: active?.name || placeholder }),
1325
+ /* @__PURE__ */ jsx6(ChevronDown, { className: "h-3.5 w-3.5 text-sidebar-foreground/70 transition-transform group-data-[state=open]:rotate-180" })
1306
1326
  ]
1307
1327
  }
1308
1328
  ) }),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@meetreeve/ui",
3
- "version": "0.8.0",
3
+ "version": "0.8.1",
4
4
  "description": "Shared brand-adaptive UI primitives for MindFortress frontends — min-size tokens, a favicon→logo→monogram BrandGlyph, a responsive header that keeps the search bar usable on mobile, and AppSidebar's viewport-driven auto-collapse ladder.",
5
5
  "license": "UNLICENSED",
6
6
  "main": "./dist/index.js",