@undevy-org/tablewright 0.7.7 → 0.7.8

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 (5) hide show
  1. package/dist/es/components/layout/SidebarAccountMenu.js +49 -25
  2. package/dist/styles.css +10 -3
  3. package/dist/tablewright.cjs +46 -22
  4. package/dist/tablewright.css +10 -3
  5. package/package.json +1 -1
package/dist/es/components/layout/SidebarAccountMenu.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
- import { ChevronDown, SunMoon, LogOut } from "lucide-react";
3
- import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator } from "../ui/dropdown-menu.js";
4
- import { ThemeSwitch } from "../ui/theme-switch.js";
2
+ import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
3
+ import { ChevronDown, SunMoon, Sun, Moon, LogOut } from "lucide-react";
4
+ import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup, DropdownMenuItem } from "../ui/dropdown-menu.js";
5
5
  import { cn } from "../../lib/utils.js";
6
6
  import { useAppShell } from "./app-shell-context.js";
7
7
  function getInitials(name) {
@@ -58,10 +58,9 @@ function SidebarAccountMenu({
58
58
  className: "min-w-[220px]",
59
59
  children: [
60
60
  /* @__PURE__ */ jsxs(
61
- DropdownMenuItem,
61
+ DropdownMenuLabel,
62
62
  {
63
- disabled: true,
64
- className: "gap-2.5 px-2 py-2 opacity-100 focus:bg-transparent data-[disabled]:opacity-100",
63
+ className: "flex cursor-default select-none items-center gap-2.5 px-2 py-2 font-normal",
65
64
  children: [
66
65
  avatarUrl ? /* @__PURE__ */ jsx(
67
66
  "img",
@@ -80,27 +79,52 @@ function SidebarAccountMenu({
80
79
  ),
81
80
  /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
82
81
  showTheme && /* @__PURE__ */ jsxs(Fragment, { children: [
83
- /* @__PURE__ */ jsxs(
84
- DropdownMenuItem,
85
- {
86
- className: "flex items-center justify-between px-3 py-2 focus:bg-transparent",
87
- onSelect: (event) => event.preventDefault(),
88
- children: [
89
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
82
+ /* @__PURE__ */ jsxs(DropdownMenuGroup, { className: "flex items-center justify-between px-3 py-2", children: [
83
+ /* @__PURE__ */ jsxs(
84
+ DropdownMenuLabel,
85
+ {
86
+ className: "flex cursor-default select-none items-center gap-2 p-0 font-normal",
87
+ children: [
90
88
  /* @__PURE__ */ jsx(SunMoon, { className: "h-4 w-4" }),
91
89
  /* @__PURE__ */ jsx("span", { className: "text-[13px]", children: "Theme" })
92
- ] }),
93
- /* @__PURE__ */ jsx(
94
- ThemeSwitch,
95
- {
96
- variant: "icon",
97
- value: theme,
98
- onValueChange: onThemeChange
99
- }
100
- )
101
- ]
102
- }
103
- ),
90
+ ]
91
+ }
92
+ ),
93
+ /* @__PURE__ */ jsx(
94
+ DropdownMenuPrimitive.RadioGroup,
95
+ {
96
+ value: theme,
97
+ onValueChange: (value) => onThemeChange(value),
98
+ className: "inline-flex h-[var(--size-control-md)] items-center gap-1 rounded-lg border border-[var(--border-subtle)] bg-[var(--bg-surface)] px-1 py-1",
99
+ children: /* @__PURE__ */ jsxs("div", { className: "inline-flex self-stretch items-center gap-1", children: [
100
+ /* @__PURE__ */ jsx(
101
+ DropdownMenuPrimitive.RadioItem,
102
+ {
103
+ value: "light",
104
+ "aria-label": "Light",
105
+ onSelect: (event) => event.preventDefault(),
106
+ className: cn(
107
+ "relative flex cursor-default select-none items-center justify-center rounded-md px-2 py-0 outline-none focus:bg-transparent hover:bg-[var(--bg-hover)] data-[state=checked]:bg-[var(--bg-secondary)] data-[state=checked]:text-[var(--text-primary)] text-[var(--text-secondary)]"
108
+ ),
109
+ children: /* @__PURE__ */ jsx(Sun, { className: "h-4 w-4" })
110
+ }
111
+ ),
112
+ /* @__PURE__ */ jsx(
113
+ DropdownMenuPrimitive.RadioItem,
114
+ {
115
+ value: "dark",
116
+ "aria-label": "Dark",
117
+ onSelect: (event) => event.preventDefault(),
118
+ className: cn(
119
+ "relative flex cursor-default select-none items-center justify-center rounded-md px-2 py-0 outline-none focus:bg-transparent hover:bg-[var(--bg-hover)] data-[state=checked]:bg-[var(--bg-secondary)] data-[state=checked]:text-[var(--text-primary)] text-[var(--text-secondary)]"
120
+ ),
121
+ children: /* @__PURE__ */ jsx(Moon, { className: "h-4 w-4" })
122
+ }
123
+ )
124
+ ] })
125
+ }
126
+ )
127
+ ] }),
104
128
  hasItemsBelow && /* @__PURE__ */ jsx(DropdownMenuSeparator, {})
105
129
  ] }),
106
130
  menuItems && menuItems.map((item) => {
package/dist/styles.css CHANGED
@@ -1139,6 +1139,10 @@
1139
1139
  padding-left: 1.5rem;
1140
1140
  padding-right: 1.5rem
1141
1141
  }
1142
+ .py-0 {
1143
+ padding-top: 0px;
1144
+ padding-bottom: 0px
1145
+ }
1142
1146
  .py-0\.5 {
1143
1147
  padding-top: 0.125rem;
1144
1148
  padding-bottom: 0.125rem
@@ -1678,6 +1682,9 @@
1678
1682
  .data-\[state\=checked\]\:bg-\[var\(--accent-primary\)\][data-state="checked"] {
1679
1683
  background-color: var(--accent-primary)
1680
1684
  }
1685
+ .data-\[state\=checked\]\:bg-\[var\(--bg-secondary\)\][data-state="checked"] {
1686
+ background-color: var(--bg-secondary)
1687
+ }
1681
1688
  .data-\[state\=indeterminate\]\:bg-\[var\(--accent-primary\)\][data-state="indeterminate"] {
1682
1689
  background-color: var(--accent-primary)
1683
1690
  }
@@ -1687,12 +1694,12 @@
1687
1694
  .data-\[state\=active\]\:text-\[var\(--text-primary\)\][data-state="active"] {
1688
1695
  color: var(--text-primary)
1689
1696
  }
1697
+ .data-\[state\=checked\]\:text-\[var\(--text-primary\)\][data-state="checked"] {
1698
+ color: var(--text-primary)
1699
+ }
1690
1700
  .data-\[disabled\=true\]\:opacity-50[data-disabled="true"] {
1691
1701
  opacity: 0.5
1692
1702
  }
1693
- .data-\[disabled\]\:opacity-100[data-disabled] {
1694
- opacity: 1
1695
- }
1696
1703
  .data-\[state\=open\]\:opacity-100[data-state="open"] {
1697
1704
  opacity: 1
1698
1705
  }
package/dist/tablewright.cjs CHANGED
@@ -2260,10 +2260,9 @@ function SidebarAccountMenu({
2260
2260
  className: "min-w-[220px]",
2261
2261
  children: [
2262
2262
  /* @__PURE__ */ jsxRuntime.jsxs(
2263
- DropdownMenuItem,
2263
+ DropdownMenuLabel,
2264
2264
  {
2265
- disabled: true,
2266
- className: "gap-2.5 px-2 py-2 opacity-100 focus:bg-transparent data-[disabled]:opacity-100",
2265
+ className: "flex cursor-default select-none items-center gap-2.5 px-2 py-2 font-normal",
2267
2266
  children: [
2268
2267
  avatarUrl ? /* @__PURE__ */ jsxRuntime.jsx(
2269
2268
  "img",
@@ -2282,27 +2281,52 @@ function SidebarAccountMenu({
2282
2281
  ),
2283
2282
  /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {}),
2284
2283
  showTheme && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
2285
- /* @__PURE__ */ jsxRuntime.jsxs(
2286
- DropdownMenuItem,
2287
- {
2288
- className: "flex items-center justify-between px-3 py-2 focus:bg-transparent",
2289
- onSelect: (event) => event.preventDefault(),
2290
- children: [
2291
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
2284
+ /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuGroup, { className: "flex items-center justify-between px-3 py-2", children: [
2285
+ /* @__PURE__ */ jsxRuntime.jsxs(
2286
+ DropdownMenuLabel,
2287
+ {
2288
+ className: "flex cursor-default select-none items-center gap-2 p-0 font-normal",
2289
+ children: [
2292
2290
  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SunMoon, { className: "h-4 w-4" }),
2293
2291
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[13px]", children: "Theme" })
2294
- ] }),
2295
- /* @__PURE__ */ jsxRuntime.jsx(
2296
- ThemeSwitch,
2297
- {
2298
- variant: "icon",
2299
- value: theme,
2300
- onValueChange: onThemeChange
2301
- }
2302
- )
2303
- ]
2304
- }
2305
- ),
2292
+ ]
2293
+ }
2294
+ ),
2295
+ /* @__PURE__ */ jsxRuntime.jsx(
2296
+ DropdownMenuPrimitive__namespace.RadioGroup,
2297
+ {
2298
+ value: theme,
2299
+ onValueChange: (value) => onThemeChange(value),
2300
+ className: "inline-flex h-[var(--size-control-md)] items-center gap-1 rounded-lg border border-[var(--border-subtle)] bg-[var(--bg-surface)] px-1 py-1",
2301
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex self-stretch items-center gap-1", children: [
2302
+ /* @__PURE__ */ jsxRuntime.jsx(
2303
+ DropdownMenuPrimitive__namespace.RadioItem,
2304
+ {
2305
+ value: "light",
2306
+ "aria-label": "Light",
2307
+ onSelect: (event) => event.preventDefault(),
2308
+ className: cn(
2309
+ "relative flex cursor-default select-none items-center justify-center rounded-md px-2 py-0 outline-none focus:bg-transparent hover:bg-[var(--bg-hover)] data-[state=checked]:bg-[var(--bg-secondary)] data-[state=checked]:text-[var(--text-primary)] text-[var(--text-secondary)]"
2310
+ ),
2311
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sun, { className: "h-4 w-4" })
2312
+ }
2313
+ ),
2314
+ /* @__PURE__ */ jsxRuntime.jsx(
2315
+ DropdownMenuPrimitive__namespace.RadioItem,
2316
+ {
2317
+ value: "dark",
2318
+ "aria-label": "Dark",
2319
+ onSelect: (event) => event.preventDefault(),
2320
+ className: cn(
2321
+ "relative flex cursor-default select-none items-center justify-center rounded-md px-2 py-0 outline-none focus:bg-transparent hover:bg-[var(--bg-hover)] data-[state=checked]:bg-[var(--bg-secondary)] data-[state=checked]:text-[var(--text-primary)] text-[var(--text-secondary)]"
2322
+ ),
2323
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Moon, { className: "h-4 w-4" })
2324
+ }
2325
+ )
2326
+ ] })
2327
+ }
2328
+ )
2329
+ ] }),
2306
2330
  hasItemsBelow && /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {})
2307
2331
  ] }),
2308
2332
  menuItems && menuItems.map((item) => {
package/dist/tablewright.css CHANGED
@@ -987,6 +987,10 @@
987
987
  padding-left: 1.5rem;
988
988
  padding-right: 1.5rem
989
989
  }
990
+ .py-0 {
991
+ padding-top: 0px;
992
+ padding-bottom: 0px
993
+ }
990
994
  .py-0\.5 {
991
995
  padding-top: 0.125rem;
992
996
  padding-bottom: 0.125rem
@@ -1526,6 +1530,9 @@
1526
1530
  .data-\[state\=checked\]\:bg-\[var\(--accent-primary\)\][data-state="checked"] {
1527
1531
  background-color: var(--accent-primary)
1528
1532
  }
1533
+ .data-\[state\=checked\]\:bg-\[var\(--bg-secondary\)\][data-state="checked"] {
1534
+ background-color: var(--bg-secondary)
1535
+ }
1529
1536
  .data-\[state\=indeterminate\]\:bg-\[var\(--accent-primary\)\][data-state="indeterminate"] {
1530
1537
  background-color: var(--accent-primary)
1531
1538
  }
@@ -1535,12 +1542,12 @@
1535
1542
  .data-\[state\=active\]\:text-\[var\(--text-primary\)\][data-state="active"] {
1536
1543
  color: var(--text-primary)
1537
1544
  }
1545
+ .data-\[state\=checked\]\:text-\[var\(--text-primary\)\][data-state="checked"] {
1546
+ color: var(--text-primary)
1547
+ }
1538
1548
  .data-\[disabled\=true\]\:opacity-50[data-disabled="true"] {
1539
1549
  opacity: 0.5
1540
1550
  }
1541
- .data-\[disabled\]\:opacity-100[data-disabled] {
1542
- opacity: 1
1543
- }
1544
1551
  .data-\[state\=open\]\:opacity-100[data-state="open"] {
1545
1552
  opacity: 1
1546
1553
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@undevy-org/tablewright",
3
- "version": "0.7.7",
3
+ "version": "0.7.8",
4
4
  "description": "React data-table and application-shell components: filters, drawers, row controls, sortable and resizable columns, built on Radix UI and TanStack Table.",
5
5
  "license": "MIT",
6
6
  "repository": {