@undevy-org/tablewright 0.7.7 → 0.7.9

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 +13 -3
  3. package/dist/tablewright.cjs +46 -22
  4. package/dist/tablewright.css +13 -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 hover:bg-[var(--bg-hover)] data-[highlighted]: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 hover:bg-[var(--bg-hover)] data-[highlighted]: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
@@ -1669,6 +1673,9 @@
1669
1673
  .data-\[state\=indeterminate\]\:border-\[var\(--accent-primary\)\][data-state="indeterminate"] {
1670
1674
  border-color: var(--accent-primary)
1671
1675
  }
1676
+ .data-\[highlighted\]\:bg-\[var\(--bg-hover\)\][data-highlighted] {
1677
+ background-color: var(--bg-hover)
1678
+ }
1672
1679
  .data-\[selected\=true\]\:bg-\[var\(--bg-hover\)\][data-selected="true"] {
1673
1680
  background-color: var(--bg-hover)
1674
1681
  }
@@ -1678,6 +1685,9 @@
1678
1685
  .data-\[state\=checked\]\:bg-\[var\(--accent-primary\)\][data-state="checked"] {
1679
1686
  background-color: var(--accent-primary)
1680
1687
  }
1688
+ .data-\[state\=checked\]\:bg-\[var\(--bg-secondary\)\][data-state="checked"] {
1689
+ background-color: var(--bg-secondary)
1690
+ }
1681
1691
  .data-\[state\=indeterminate\]\:bg-\[var\(--accent-primary\)\][data-state="indeterminate"] {
1682
1692
  background-color: var(--accent-primary)
1683
1693
  }
@@ -1687,12 +1697,12 @@
1687
1697
  .data-\[state\=active\]\:text-\[var\(--text-primary\)\][data-state="active"] {
1688
1698
  color: var(--text-primary)
1689
1699
  }
1700
+ .data-\[state\=checked\]\:text-\[var\(--text-primary\)\][data-state="checked"] {
1701
+ color: var(--text-primary)
1702
+ }
1690
1703
  .data-\[disabled\=true\]\:opacity-50[data-disabled="true"] {
1691
1704
  opacity: 0.5
1692
1705
  }
1693
- .data-\[disabled\]\:opacity-100[data-disabled] {
1694
- opacity: 1
1695
- }
1696
1706
  .data-\[state\=open\]\:opacity-100[data-state="open"] {
1697
1707
  opacity: 1
1698
1708
  }
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 hover:bg-[var(--bg-hover)] data-[highlighted]: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 hover:bg-[var(--bg-hover)] data-[highlighted]: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
@@ -1517,6 +1521,9 @@
1517
1521
  .data-\[state\=indeterminate\]\:border-\[var\(--accent-primary\)\][data-state="indeterminate"] {
1518
1522
  border-color: var(--accent-primary)
1519
1523
  }
1524
+ .data-\[highlighted\]\:bg-\[var\(--bg-hover\)\][data-highlighted] {
1525
+ background-color: var(--bg-hover)
1526
+ }
1520
1527
  .data-\[selected\=true\]\:bg-\[var\(--bg-hover\)\][data-selected="true"] {
1521
1528
  background-color: var(--bg-hover)
1522
1529
  }
@@ -1526,6 +1533,9 @@
1526
1533
  .data-\[state\=checked\]\:bg-\[var\(--accent-primary\)\][data-state="checked"] {
1527
1534
  background-color: var(--accent-primary)
1528
1535
  }
1536
+ .data-\[state\=checked\]\:bg-\[var\(--bg-secondary\)\][data-state="checked"] {
1537
+ background-color: var(--bg-secondary)
1538
+ }
1529
1539
  .data-\[state\=indeterminate\]\:bg-\[var\(--accent-primary\)\][data-state="indeterminate"] {
1530
1540
  background-color: var(--accent-primary)
1531
1541
  }
@@ -1535,12 +1545,12 @@
1535
1545
  .data-\[state\=active\]\:text-\[var\(--text-primary\)\][data-state="active"] {
1536
1546
  color: var(--text-primary)
1537
1547
  }
1548
+ .data-\[state\=checked\]\:text-\[var\(--text-primary\)\][data-state="checked"] {
1549
+ color: var(--text-primary)
1550
+ }
1538
1551
  .data-\[disabled\=true\]\:opacity-50[data-disabled="true"] {
1539
1552
  opacity: 0.5
1540
1553
  }
1541
- .data-\[disabled\]\:opacity-100[data-disabled] {
1542
- opacity: 1
1543
- }
1544
1554
  .data-\[state\=open\]\:opacity-100[data-state="open"] {
1545
1555
  opacity: 1
1546
1556
  }
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.9",
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": {