@orangecheck/app-design 0.5.12 → 0.6.0
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.
- package/dist/chrome.d.mts +2 -1
- package/dist/chrome.d.ts +2 -1
- package/dist/chrome.js +123 -42
- package/dist/chrome.js.map +1 -1
- package/dist/chrome.mjs +123 -42
- package/dist/chrome.mjs.map +1 -1
- package/dist/index.js +123 -42
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +123 -42
- package/dist/index.mjs.map +1 -1
- package/dist/styles/theme.css +7 -0
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -2618,6 +2618,57 @@ function SectionSwitch({
|
|
|
2618
2618
|
}
|
|
2619
2619
|
);
|
|
2620
2620
|
}
|
|
2621
|
+
function TabBar({ items }) {
|
|
2622
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2623
|
+
"nav",
|
|
2624
|
+
{
|
|
2625
|
+
"aria-label": "Pages",
|
|
2626
|
+
"data-oca-tabbar": "",
|
|
2627
|
+
className: "fixed inset-x-0 bottom-0 z-40 border-t border-border bg-background/90 pb-[env(safe-area-inset-bottom)] backdrop-blur-md md:hidden",
|
|
2628
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2629
|
+
"div",
|
|
2630
|
+
{
|
|
2631
|
+
className: "mx-auto grid h-14 max-w-[32rem] px-1.5",
|
|
2632
|
+
style: { gridTemplateColumns: `repeat(${items.length}, minmax(0, 1fr))` },
|
|
2633
|
+
children: items.map((it) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2634
|
+
Link2__default.default,
|
|
2635
|
+
{
|
|
2636
|
+
href: it.href,
|
|
2637
|
+
"aria-current": it.active ? "page" : void 0,
|
|
2638
|
+
className: cn(
|
|
2639
|
+
"flex min-w-0 flex-col items-center justify-center gap-1 rounded-2xl text-[0.6875rem] leading-none outline-none transition-colors [-webkit-tap-highlight-color:transparent] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
|
|
2640
|
+
it.active ? "text-foreground" : "text-muted-foreground hover:text-foreground"
|
|
2641
|
+
),
|
|
2642
|
+
children: [
|
|
2643
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
2644
|
+
"span",
|
|
2645
|
+
{
|
|
2646
|
+
className: cn(
|
|
2647
|
+
"relative flex h-7 w-12 items-center justify-center rounded-full transition-[background-color,box-shadow] duration-200",
|
|
2648
|
+
"[&_svg]:size-[1.125rem] [&_svg]:shrink-0",
|
|
2649
|
+
it.active ? "bg-card shadow-sm ring-1 ring-border [&_svg]:stroke-2" : "[&_svg]:stroke-[1.75]"
|
|
2650
|
+
),
|
|
2651
|
+
children: [
|
|
2652
|
+
it.icon,
|
|
2653
|
+
it.badge ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "absolute right-2.5 top-0.5 size-2 rounded-full bg-oca-orange ring-2 ring-background" }) : null
|
|
2654
|
+
]
|
|
2655
|
+
}
|
|
2656
|
+
),
|
|
2657
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "max-w-full truncate px-0.5", children: it.label }),
|
|
2658
|
+
it.badge ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: it.badge }) : null
|
|
2659
|
+
]
|
|
2660
|
+
},
|
|
2661
|
+
it.href
|
|
2662
|
+
))
|
|
2663
|
+
}
|
|
2664
|
+
)
|
|
2665
|
+
}
|
|
2666
|
+
);
|
|
2667
|
+
}
|
|
2668
|
+
function tabsFor(groups) {
|
|
2669
|
+
const items = groups.flatMap((g) => g.items);
|
|
2670
|
+
return items.length >= 2 && items.length <= 5 && items.every((it) => it.icon) ? items : null;
|
|
2671
|
+
}
|
|
2621
2672
|
var activeItem = (groups) => groups.flatMap((g) => g.items).find((it) => it.active);
|
|
2622
2673
|
var warned = /* @__PURE__ */ new Set();
|
|
2623
2674
|
function warnDuplicateLabels(groups) {
|
|
@@ -2648,6 +2699,7 @@ function AppShell({
|
|
|
2648
2699
|
const current = sections && sections.length > 0 ? sections.find((sec) => sec.id === activeSection) ?? sections.find((sec) => activeItem(sec.groups)) ?? sections[0] : void 0;
|
|
2649
2700
|
const groups = current ? [...current.groups, ...persistent] : [...nav ?? [], ...persistent];
|
|
2650
2701
|
warnDuplicateLabels(groups);
|
|
2702
|
+
const tabs = current ? null : tabsFor(groups);
|
|
2651
2703
|
const page = activeItem(groups);
|
|
2652
2704
|
const place = react.useMemo(
|
|
2653
2705
|
() => ({
|
|
@@ -2657,66 +2709,95 @@ function AppShell({
|
|
|
2657
2709
|
[current, page?.label, pageOverride]
|
|
2658
2710
|
);
|
|
2659
2711
|
const switcher = sections && current && sections.length > 1 ? /* @__PURE__ */ jsxRuntime.jsx(SectionSwitch, { sections, current, onNavigate: () => setOpen(false) }) : null;
|
|
2660
|
-
return /* @__PURE__ */ jsxRuntime.jsx(ShellContext.Provider, { value: place, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2661
|
-
|
|
2662
|
-
|
|
2663
|
-
|
|
2664
|
-
|
|
2665
|
-
|
|
2712
|
+
return /* @__PURE__ */ jsxRuntime.jsx(ShellContext.Provider, { value: place, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2713
|
+
"div",
|
|
2714
|
+
{
|
|
2715
|
+
className: cn(
|
|
2716
|
+
"min-h-dvh bg-background",
|
|
2717
|
+
tabs && "max-md:pb-[calc(3.5rem_+_env(safe-area-inset-bottom))]",
|
|
2718
|
+
className
|
|
2719
|
+
),
|
|
2720
|
+
children: [
|
|
2721
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-0 z-40 border-b border-border bg-background/90 backdrop-blur-md lg:hidden", children: [
|
|
2722
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-14 items-center gap-2 px-3", children: [
|
|
2723
|
+
/* @__PURE__ */ jsxRuntime.jsxs(Sheet, { open, onOpenChange: setOpen, children: [
|
|
2724
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2725
|
+
SheetTrigger,
|
|
2726
|
+
{
|
|
2727
|
+
className: cn(
|
|
2728
|
+
"inline-flex size-10 items-center justify-center rounded-full hover:bg-accent",
|
|
2729
|
+
// The tab bar holds every page; the sheet is left for a footer.
|
|
2730
|
+
tabs && !footer && "max-md:hidden"
|
|
2731
|
+
),
|
|
2732
|
+
"aria-label": "Open navigation",
|
|
2733
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "size-5" })
|
|
2734
|
+
}
|
|
2735
|
+
),
|
|
2736
|
+
/* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { side: "left", className: "flex flex-col gap-6 overflow-y-auto p-4 pt-16", children: [
|
|
2737
|
+
/* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { className: "sr-only", children: "Navigation" }),
|
|
2738
|
+
switcher,
|
|
2739
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: tabs ? "max-md:hidden" : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(SideNav, { groups, onNavigate: () => setOpen(false) }) }),
|
|
2740
|
+
footer ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-auto flex flex-col gap-3", children: footer }) : null
|
|
2741
|
+
] })
|
|
2742
|
+
] }),
|
|
2743
|
+
/* @__PURE__ */ jsxRuntime.jsx(Link2__default.default, { href: home, "aria-label": "Home", className: "rounded-lg p-1", children: /* @__PURE__ */ jsxRuntime.jsx(Lockup, { size: 22 }) }),
|
|
2744
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex items-center", children: account })
|
|
2745
|
+
] }),
|
|
2746
|
+
place.page ? /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2747
|
+
"div",
|
|
2666
2748
|
{
|
|
2667
|
-
className:
|
|
2668
|
-
|
|
2669
|
-
|
|
2749
|
+
className: cn(
|
|
2750
|
+
"flex h-9 items-center gap-1.5 border-t border-border px-4 text-[0.875rem]",
|
|
2751
|
+
// The active tab already names the page.
|
|
2752
|
+
tabs && !pageOverride && "max-md:hidden"
|
|
2753
|
+
),
|
|
2754
|
+
children: [
|
|
2755
|
+
place.section ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
2756
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-muted-foreground", children: place.section }),
|
|
2757
|
+
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { "aria-hidden": true, className: "size-3.5 shrink-0 text-muted-foreground" })
|
|
2758
|
+
] }) : null,
|
|
2759
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-medium", children: place.page })
|
|
2760
|
+
]
|
|
2670
2761
|
}
|
|
2671
|
-
)
|
|
2672
|
-
|
|
2673
|
-
|
|
2762
|
+
) : null
|
|
2763
|
+
] }),
|
|
2764
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex w-full max-w-[90rem]", children: [
|
|
2765
|
+
/* @__PURE__ */ jsxRuntime.jsxs("aside", { className: "sticky top-0 hidden h-dvh w-[17rem] shrink-0 flex-col gap-6 overflow-y-auto px-4 py-6 lg:flex", children: [
|
|
2766
|
+
/* @__PURE__ */ jsxRuntime.jsx(Link2__default.default, { href: home, className: "px-2", "aria-label": "Home", children: /* @__PURE__ */ jsxRuntime.jsx(Lockup, { size: 26 }) }),
|
|
2674
2767
|
switcher,
|
|
2675
|
-
/* @__PURE__ */ jsxRuntime.jsx(SideNav, { groups
|
|
2676
|
-
|
|
2768
|
+
/* @__PURE__ */ jsxRuntime.jsx(SideNav, { groups }),
|
|
2769
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-auto flex flex-col gap-3", children: footer })
|
|
2770
|
+
] }),
|
|
2771
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
|
|
2772
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden h-[4.5rem] items-center justify-end gap-3 px-8 lg:flex", children: account }),
|
|
2773
|
+
banner ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 pb-2 pt-4 md:px-8 lg:pt-0", children: banner }) : null,
|
|
2774
|
+
/* @__PURE__ */ jsxRuntime.jsx("main", { id: "main-content", className: "flex-1 px-4 pb-16 pt-6 md:px-8 lg:pt-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto w-full max-w-[72rem]", children }) })
|
|
2677
2775
|
] })
|
|
2678
2776
|
] }),
|
|
2679
|
-
|
|
2680
|
-
|
|
2681
|
-
|
|
2682
|
-
|
|
2683
|
-
place.section ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
2684
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-muted-foreground", children: place.section }),
|
|
2685
|
-
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { "aria-hidden": true, className: "size-3.5 shrink-0 text-muted-foreground" })
|
|
2686
|
-
] }) : null,
|
|
2687
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-medium", children: place.page })
|
|
2688
|
-
] }) : null
|
|
2689
|
-
] }),
|
|
2690
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex w-full max-w-[90rem]", children: [
|
|
2691
|
-
/* @__PURE__ */ jsxRuntime.jsxs("aside", { className: "sticky top-0 hidden h-dvh w-[17rem] shrink-0 flex-col gap-6 overflow-y-auto px-4 py-6 lg:flex", children: [
|
|
2692
|
-
/* @__PURE__ */ jsxRuntime.jsx(Link2__default.default, { href: home, className: "px-2", "aria-label": "Home", children: /* @__PURE__ */ jsxRuntime.jsx(Lockup, { size: 26 }) }),
|
|
2693
|
-
switcher,
|
|
2694
|
-
/* @__PURE__ */ jsxRuntime.jsx(SideNav, { groups }),
|
|
2695
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-auto flex flex-col gap-3", children: footer })
|
|
2696
|
-
] }),
|
|
2697
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
|
|
2698
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden h-[4.5rem] items-center justify-end gap-3 px-8 lg:flex", children: account }),
|
|
2699
|
-
banner ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 pb-2 pt-4 md:px-8 lg:pt-0", children: banner }) : null,
|
|
2700
|
-
/* @__PURE__ */ jsxRuntime.jsx("main", { id: "main-content", className: "flex-1 px-4 pb-16 pt-6 md:px-8 lg:pt-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto w-full max-w-[72rem]", children }) })
|
|
2701
|
-
] })
|
|
2702
|
-
] })
|
|
2703
|
-
] }) });
|
|
2777
|
+
tabs ? /* @__PURE__ */ jsxRuntime.jsx(TabBar, { items: tabs }) : null
|
|
2778
|
+
]
|
|
2779
|
+
}
|
|
2780
|
+
) });
|
|
2704
2781
|
}
|
|
2705
2782
|
function AccountMenu({
|
|
2706
2783
|
name,
|
|
2707
2784
|
detail,
|
|
2708
|
-
items
|
|
2785
|
+
items,
|
|
2786
|
+
nameFrom = "sm"
|
|
2709
2787
|
}) {
|
|
2710
2788
|
const initial = name.trim().charAt(0).toUpperCase() || "\xB7";
|
|
2711
2789
|
return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
|
|
2712
2790
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
2713
2791
|
DropdownMenuTrigger,
|
|
2714
2792
|
{
|
|
2715
|
-
className:
|
|
2793
|
+
className: cn(
|
|
2794
|
+
"inline-flex h-10 items-center gap-2.5 rounded-full border border-border bg-card pl-1 pr-1 text-[0.9375rem] outline-none transition-colors hover:border-oca-hairline-strong focus-visible:ring-2 focus-visible:ring-ring",
|
|
2795
|
+
nameFrom === "lg" ? "lg:pr-3.5" : "sm:pr-3.5"
|
|
2796
|
+
),
|
|
2716
2797
|
"aria-label": `Account: ${name}`,
|
|
2717
2798
|
children: [
|
|
2718
2799
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-8 items-center justify-center rounded-full bg-foreground text-[0.8125rem] font-medium text-background", children: initial }),
|
|
2719
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "max-w-[10rem] truncate max-sm:hidden", children: name })
|
|
2800
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("max-w-[10rem] truncate", nameFrom === "lg" ? "max-lg:hidden" : "max-sm:hidden"), children: name })
|
|
2720
2801
|
]
|
|
2721
2802
|
}
|
|
2722
2803
|
),
|