@bearmenu/ui 0.8.29 → 0.8.31
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.
|
@@ -21,7 +21,8 @@ import * as React from 'react';
|
|
|
21
21
|
* The whole row is one link. Strings arrive formatted and localised; the thumb
|
|
22
22
|
* arrives rendered, so the app picks its own image component.
|
|
23
23
|
*/
|
|
24
|
-
|
|
24
|
+
/** `completed` is the Past tab's row — the evening happened. */
|
|
25
|
+
type BookingRowStatus = "confirmed" | "pending" | "completed";
|
|
25
26
|
type BookingRowLinkProps = {
|
|
26
27
|
href: string;
|
|
27
28
|
className?: string;
|
|
@@ -39,15 +39,18 @@ function BookingRow({
|
|
|
39
39
|
className
|
|
40
40
|
}) {
|
|
41
41
|
const statusPill = /* @__PURE__ */ jsx(Badge, { as: "span", variant: status, children: statusLabel });
|
|
42
|
-
const codeChip = /* @__PURE__ */ jsx(Badge, { as: "span", variant: "code", children: code });
|
|
42
|
+
const codeChip = /* @__PURE__ */ jsx(Badge, { as: "span", variant: "code", className: "shrink-0", children: code });
|
|
43
43
|
return /* @__PURE__ */ jsxs(
|
|
44
44
|
LinkComponent,
|
|
45
45
|
{
|
|
46
46
|
href,
|
|
47
47
|
className: cn(
|
|
48
48
|
"flex gap-3 py-3.5 leading-[1.2] text-foreground",
|
|
49
|
+
// The phone has no hover, so the press is the only feedback a tap on
|
|
50
|
+
// a whole-row link gets before the page changes under it.
|
|
51
|
+
"transition-colors active:bg-surface-2 motion-reduce:transition-none",
|
|
49
52
|
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
|
|
50
|
-
"md:items-center md:gap-3.5 md:px-[18px] md:hover:bg-accent/[0.03]",
|
|
53
|
+
"md:items-center md:gap-3.5 md:px-[18px] md:active:bg-transparent md:hover:bg-accent/[0.03]",
|
|
51
54
|
highlighted && "md:bg-accent/5 md:hover:bg-accent/5",
|
|
52
55
|
className
|
|
53
56
|
),
|
package/package.json
CHANGED
|
@@ -24,7 +24,8 @@ import { Badge } from "./badge";
|
|
|
24
24
|
* arrives rendered, so the app picks its own image component.
|
|
25
25
|
*/
|
|
26
26
|
|
|
27
|
-
|
|
27
|
+
/** `completed` is the Past tab's row — the evening happened. */
|
|
28
|
+
export type BookingRowStatus = "confirmed" | "pending" | "completed";
|
|
28
29
|
|
|
29
30
|
export type BookingRowLinkProps = {
|
|
30
31
|
href: string;
|
|
@@ -92,8 +93,10 @@ export function BookingRow({
|
|
|
92
93
|
{statusLabel}
|
|
93
94
|
</Badge>
|
|
94
95
|
);
|
|
96
|
+
// `shrink-0`: the venue name beside it truncates, and without this the flex
|
|
97
|
+
// row takes the width out of the chip instead, wrapping "BM-8421" in two.
|
|
95
98
|
const codeChip = (
|
|
96
|
-
<Badge as="span" variant="code">
|
|
99
|
+
<Badge as="span" variant="code" className="shrink-0">
|
|
97
100
|
{code}
|
|
98
101
|
</Badge>
|
|
99
102
|
);
|
|
@@ -103,8 +106,11 @@ export function BookingRow({
|
|
|
103
106
|
href={href}
|
|
104
107
|
className={cn(
|
|
105
108
|
"flex gap-3 py-3.5 leading-[1.2] text-foreground",
|
|
109
|
+
// The phone has no hover, so the press is the only feedback a tap on
|
|
110
|
+
// a whole-row link gets before the page changes under it.
|
|
111
|
+
"transition-colors active:bg-surface-2 motion-reduce:transition-none",
|
|
106
112
|
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
|
|
107
|
-
"md:items-center md:gap-3.5 md:px-[18px] md:hover:bg-accent/[0.03]",
|
|
113
|
+
"md:items-center md:gap-3.5 md:px-[18px] md:active:bg-transparent md:hover:bg-accent/[0.03]",
|
|
108
114
|
highlighted && "md:bg-accent/5 md:hover:bg-accent/5",
|
|
109
115
|
className
|
|
110
116
|
)}
|