@fiestaboard/ui 1.6.3

package/dist/components/chrome/language-selector.d.ts

@@ -0,0 +1,21 @@
+export interface LanguageOption {
+    value: string;
+    label: string;
+}
+interface LanguageSelectorProps {
+    /** Current locale value. */
+    value: string;
+    /** Available locales with display names, in menu order. */
+    options: LanguageOption[];
+    /** Called with the newly selected locale value. */
+    onChange: (value: string) => void;
+    /** Localized accessible label for the trigger, e.g. "Language". */
+    label: string;
+    disabled?: boolean;
+}
+/**
+ * Controlled presentational language picker. Locale registry, cookie
+ * persistence, and the i18next mutation stay in the app wrapper.
+ */
+export declare const LanguageSelector: import("react").MemoExoticComponent<({ value, options, onChange, label, disabled, }: LanguageSelectorProps) => import("react").JSX.Element>;
+export {};

package/dist/components/chrome/language-selector.js

@@ -0,0 +1,29 @@
+"use client";
+import { Select as e, SelectContent as t, SelectItem as n, SelectTrigger as r, SelectValue as i } from "../ui/select.js";
+import { Globe as a } from "lucide-react";
+import { memo as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/chrome/language-selector.tsx
+var l = o(function({ value: o, options: l, onChange: u, label: d, disabled: f }) {
+	return /* @__PURE__ */ c(e, {
+		value: o,
+		onValueChange: u,
+		disabled: f,
+		children: [/* @__PURE__ */ c(r, {
+			className: "h-8 w-[130px] text-xs gap-1",
+			"aria-label": d,
+			children: [/* @__PURE__ */ s(a, {
+				className: "h-3.5 w-3.5 flex-shrink-0",
+				"aria-hidden": "true"
+			}), /* @__PURE__ */ s(i, {})]
+		}), /* @__PURE__ */ s(t, { children: l.map((e) => /* @__PURE__ */ s(n, {
+			value: e.value,
+			className: "text-xs",
+			children: e.label
+		}, e.value)) })]
+	});
+});
+//#endregion
+export { l as LanguageSelector };
+
+//# sourceMappingURL=language-selector.js.map

package/dist/components/chrome/language-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"language-selector.js","names":[],"sources":["../../../src/components/chrome/language-selector.tsx"],"mappings":";;;;;;AA4BA,IAAa,IAAmB,EAAK,SAA0B,EAC7D,UACA,YACA,aACA,UACA,eACwB;CACxB,OACE,kBAAC,GAAD;EAAe;EAAO,eAAe;EAAoB;EAAzD,UAAA,CACE,kBAAC,GAAD;GAAe,WAAU;GAA8B,cAAY;GAAnE,UAAA,CACE,kBAAC,GAAD;IAAO,WAAU;IAA4B,eAAY;GAAQ,CAAA,GACjE,kBAAC,GAAD,CAAc,CAAA,CACD;EACf,CAAA,GAAA,kBAAC,GAAD,EAAA,UACG,EAAQ,KAAK,MACZ,kBAAC,GAAD;GAA4B,OAAO,EAAI;GAAO,WAAU;GACrD,UAAA,EAAI;EACK,GAFK,EAAI,KAET,CACb,EACY,CAAA,CACT;;AAEZ,CAAC"}

package/dist/components/chrome/main-content.d.ts

@@ -0,0 +1,28 @@
+interface MainContentProps {
+    children: React.ReactNode;
+    /** Sidebar collapse state (drives left padding). */
+    collapsed: boolean;
+    /** True while the sidebar width transition is running. */
+    transitioning?: boolean;
+    /** Whether the app-wide AI panel is open (drives right padding). */
+    aiPanelOpen?: boolean;
+    /** Auth screens render edge-to-edge with no chrome padding. */
+    isAuthScreen?: boolean;
+    /** App max width in px (FiestaBoard passes MAX_APP_WIDTH). */
+    maxWidth?: number;
+    /** Fired when the collapse/expand slide completes. */
+    onTransitionEnd?: () => void;
+}
+/**
+ * The app's main landmark. Layout math is presentational; collapse/AI-panel
+ * state and route awareness are injected by the app shell.
+ *
+ * Sidebar collapse/expand (#92): the paddings on <main> snap instantly (one
+ * layout pass) and an inner wrapper FLIPs — it starts translated at the old
+ * visual offset and slides to identity via a compositor-only transform
+ * transition — instead of transitioning padding-left, which relayouted the
+ * entire content subtree on every animation frame. The settled state carries
+ * no transform (the inline style is cleared, so computed transform is none).
+ */
+export declare const MainContent: import("react").MemoExoticComponent<({ children, collapsed, transitioning, aiPanelOpen, isAuthScreen, maxWidth, onTransitionEnd, }: MainContentProps) => import("react").JSX.Element>;
+export {};

package/dist/components/chrome/main-content.js

@@ -0,0 +1,33 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { memo as t, useLayoutEffect as n, useRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/chrome/main-content.tsx
+var a = t(function({ children: t, collapsed: a, transitioning: o = !1, aiPanelOpen: s = !1, isAuthScreen: c = !1, maxWidth: l, onTransitionEnd: u }) {
+	let d = r(null), f = r(null), p = r(a);
+	return n(() => {
+		if (p.current === a) return;
+		p.current = a;
+		let e = d.current, t = f.current;
+		if (!e || !t || c || !window.matchMedia("(min-width: 1024px)").matches || parseFloat(getComputedStyle(t).transitionDuration) === 0) return;
+		let n = new DOMMatrixReadOnly(getComputedStyle(t).transform).e, r = (a ? 192 : -192) + n;
+		e.style.overflowX = "clip", t.style.transition = "none", t.style.transform = `translateX(${r}px)`, t.getBoundingClientRect(), t.style.transition = "", t.style.transform = "";
+	}, [a, c]), /* @__PURE__ */ i("main", {
+		ref: d,
+		id: "main-content",
+		className: e("min-h-dvh flex flex-col w-full mx-auto", !c && "pt-[calc(var(--mobile-header-height,56px)+16px)] lg:pt-0 content-root", !c && (a ? "lg:pl-[76px]" : "lg:pl-[268px]"), !c && (s ? "lg:pr-[384px]" : "lg:pr-0")),
+		style: { maxWidth: c ? void 0 : l },
+		children: /* @__PURE__ */ i("div", {
+			ref: f,
+			className: e("flex grow flex-col content-shift", !c && o && "is-transitioning"),
+			onTransitionEnd: (e) => {
+				e.target === e.currentTarget && e.propertyName === "transform" && (d.current && (d.current.style.overflowX = ""), u?.());
+			},
+			children: t
+		})
+	});
+});
+//#endregion
+export { a as MainContent };
+
+//# sourceMappingURL=main-content.js.map

package/dist/components/chrome/main-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main-content.js","names":[],"sources":["../../../src/components/chrome/main-content.tsx"],"mappings":";;;;;AAqCA,IAAa,IAAc,EAAK,SAAqB,EACnD,aACA,cACA,mBAAgB,IAChB,iBAAc,IACd,kBAAe,IACf,aACA,sBACmB;CACnB,IAAM,IAAU,EAAoB,IAAI,GAClC,IAAW,EAAuB,IAAI,GACtC,IAAgB,EAAO,CAAS;CAkCtC,OAhCA,QAAsB;EACpB,IAAI,EAAc,YAAY,GAAW;EACzC,EAAc,UAAU;EACxB,IAAM,IAAO,EAAQ,SACf,IAAQ,EAAS;EAMvB,IALI,CAAC,KAAQ,CAAC,KAAS,KAEnB,CAAC,OAAO,WAAW,qBAAqB,CAAC,CAAC,WAG1C,WAAW,iBAAiB,CAAK,CAAC,CAAC,kBAAkB,MAAM,GAAG;EAUlE,IAAM,IAAW,IAAI,kBAAkB,iBAAiB,CAAK,CAAC,CAAC,SAAS,CAAC,CAAC,GACpE,KAAS,IAAY,MAA6B,QAA8B;EAQtF,AALA,EAAK,MAAM,YAAY,QACvB,EAAM,MAAM,aAAa,QACzB,EAAM,MAAM,YAAY,cAAc,EAAM,MAC5C,EAAW,sBAAsB,GACjC,EAAM,MAAM,aAAa,IACzB,EAAM,MAAM,YAAY;CAC1B,GAAG,CAAC,GAAW,CAAY,CAAC,GAG1B,kBAAC,QAAD;EACE,KAAK;EACL,IAAG;EACH,WAAW,EACT,0CACA,CAAC,KAAgB,yEACjB,CAAC,MAAiB,IAAY,iBAAiB,kBAC/C,CAAC,MAAiB,IAAc,kBAAkB,UACpD;EACA,OAAO,EAAE,UAAU,IAAe,KAAA,IAAY,EAAS;EAEvD,UAAA,kBAAC,OAAD;GACE,KAAK;GACL,WAAW,EAAG,oCAAoC,CAAC,KAAgB,KAAiB,kBAAkB;GACtG,kBAAkB,MAAM;IACtB,AAAI,EAAE,WAAW,EAAE,iBAAiB,EAAE,iBAAiB,gBACjD,EAAQ,YAAS,EAAQ,QAAQ,MAAM,YAAY,KACvD,IAAkB;GAEtB;GAEC;EACE,CAAA;CACD,CAAA;AAEV,CAAC"}

package/dist/components/chrome/page-header.d.ts

@@ -0,0 +1,23 @@
+import type { LucideIcon } from "lucide-react";
+interface PageHeaderProps {
+    icon: LucideIcon;
+    title: string;
+    description: string | React.ReactNode;
+    children?: React.ReactNode;
+    className?: string;
+    animationDelay?: string;
+}
+/**
+ * The icon stroke references the `page-icon-gradient` SVG gradient.
+ * Mount <PageIconGradientDefs /> once near the app root (FiestaBoard does
+ * this in root.tsx) or the icon falls back to an unstroked glyph.
+ */
+export declare const PageHeader: import("react").MemoExoticComponent<({ icon: Icon, title, description, children, className, animationDelay, }: PageHeaderProps) => import("react").JSX.Element>;
+/**
+ * Global SVG defs for the page-icon gradient. Stops read the --icon-g1..6
+ * custom properties from theme.css, so the gradient follows the theme
+ * (including the pride-month rainbow override). Render exactly once,
+ * anywhere in the document.
+ */
+export declare const PageIconGradientDefs: import("react").MemoExoticComponent<() => import("react").JSX.Element>;
+export {};

package/dist/components/chrome/page-header.js

@@ -0,0 +1,69 @@
+import { cn as e } from "../../lib/utils.js";
+import { memo as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/chrome/page-header.tsx
+var i = { stroke: "url(#page-icon-gradient)" }, a = { position: "absolute" }, o = t(function({ icon: t, title: a, description: o, children: s, className: c, animationDelay: l = "0ms" }) {
+	return /* @__PURE__ */ r("div", {
+		className: e("mb-5 rounded-xl border bg-card text-card-foreground px-6 py-4 animate-card-fade-in", c),
+		style: { animationDelay: l },
+		children: [/* @__PURE__ */ r("div", {
+			className: "min-w-0",
+			children: [/* @__PURE__ */ r("h1", {
+				className: "page-title flex items-center gap-3",
+				children: [/* @__PURE__ */ n(t, {
+					className: "h-5 w-5 flex-shrink-0",
+					style: i,
+					"aria-hidden": "true"
+				}), a]
+			}), /* @__PURE__ */ n("p", {
+				className: "page-description",
+				children: o
+			})]
+		}), s]
+	});
+}), s = t(function() {
+	return /* @__PURE__ */ n("svg", {
+		width: "0",
+		height: "0",
+		"aria-hidden": "true",
+		style: a,
+		children: /* @__PURE__ */ n("defs", { children: /* @__PURE__ */ r("linearGradient", {
+			id: "page-icon-gradient",
+			gradientUnits: "userSpaceOnUse",
+			x1: "0",
+			y1: "0",
+			x2: "24",
+			y2: "24",
+			children: [
+				/* @__PURE__ */ n("stop", {
+					offset: "0%",
+					stopColor: "var(--icon-g1)"
+				}),
+				/* @__PURE__ */ n("stop", {
+					offset: "20%",
+					stopColor: "var(--icon-g2)"
+				}),
+				/* @__PURE__ */ n("stop", {
+					offset: "40%",
+					stopColor: "var(--icon-g3)"
+				}),
+				/* @__PURE__ */ n("stop", {
+					offset: "60%",
+					stopColor: "var(--icon-g4)"
+				}),
+				/* @__PURE__ */ n("stop", {
+					offset: "80%",
+					stopColor: "var(--icon-g5)"
+				}),
+				/* @__PURE__ */ n("stop", {
+					offset: "100%",
+					stopColor: "var(--icon-g6)"
+				})
+			]
+		}) })
+	});
+});
+//#endregion
+export { o as PageHeader, s as PageIconGradientDefs };
+
+//# sourceMappingURL=page-header.js.map

package/dist/components/chrome/page-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header.js","names":[],"sources":["../../../src/components/chrome/page-header.tsx"],"mappings":";;;;AAMA,IAAM,IAA2C,EAAE,QAAQ,2BAA2B,GAChF,IAAsC,EAAE,UAAU,WAAW,GAgBtD,IAAa,EAAK,SAAoB,EACjD,MAAM,GACN,UACA,gBACA,aACA,cACA,oBAAiB,SACC;CAClB,OACE,kBAAC,OAAD;EACE,WAAW,EAAG,sFAAsF,CAAS;EAC7G,OAAO,EAAE,kBAAe;EAF1B,UAAA,CAIE,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,kBAAC,MAAD;IAAI,WAAU;IAAd,UAAA,CACE,kBAAC,GAAD;KAAM,WAAU;KAAwB,OAAO;KAAqB,eAAY;IAAQ,CAAA,GACvF,CACC;GACJ,CAAA,GAAA,kBAAC,KAAD;IAAG,WAAU;IAAoB,UAAA;GAAe,CAAA,CAC7C;EACJ,CAAA,GAAA,CACE;;AAET,CAAC,GAQY,IAAuB,EAAK,WAAgC;CACvE,OACE,kBAAC,OAAD;EAAK,OAAM;EAAI,QAAO;EAAI,eAAY;EAAO,OAAO;EAClD,UAAA,kBAAC,QAAD,EAAA,UACE,kBAAC,kBAAD;GAAgB,IAAG;GAAqB,eAAc;GAAiB,IAAG;GAAI,IAAG;GAAI,IAAG;GAAK,IAAG;GAAhG,UAAA;IACE,kBAAC,QAAD;KAAM,QAAO;KAAK,WAAU;IAAkB,CAAA;IAC9C,kBAAC,QAAD;KAAM,QAAO;KAAM,WAAU;IAAkB,CAAA;IAC/C,kBAAC,QAAD;KAAM,QAAO;KAAM,WAAU;IAAkB,CAAA;IAC/C,kBAAC,QAAD;KAAM,QAAO;KAAM,WAAU;IAAkB,CAAA;IAC/C,kBAAC,QAAD;KAAM,QAAO;KAAM,WAAU;IAAkB,CAAA;IAC/C,kBAAC,QAAD;KAAM,QAAO;KAAO,WAAU;IAAkB,CAAA;GAClC;EACZ,CAAA,EAAA,CAAA;CACH,CAAA;AAET,CAAC"}

package/dist/components/chrome/page-layout.d.ts

@@ -0,0 +1,10 @@
+interface PageLayoutProps {
+    children: React.ReactNode;
+    className?: string;
+    outerClassName?: string;
+    /** When true, the layout fills the viewport height and hides overflow so
+     *  inner content (e.g. the schedule calendar) can scroll independently. */
+    fillHeight?: boolean;
+}
+export declare const PageLayout: import("react").MemoExoticComponent<({ children, className, outerClassName, fillHeight, }: PageLayoutProps) => import("react").JSX.Element>;
+export {};

package/dist/components/chrome/page-layout.js

@@ -0,0 +1,17 @@
+import { cn as e } from "../../lib/utils.js";
+import { memo as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/chrome/page-layout.tsx
+var r = t(function({ children: t, className: r, outerClassName: i, fillHeight: a }) {
+	return /* @__PURE__ */ n("div", {
+		className: e("bg-background overflow-x-hidden", a ? "min-h-full sm:h-[calc(100dvh-72px)] sm:flex sm:flex-col sm:overflow-hidden lg:h-dvh" : "min-h-full", i),
+		children: /* @__PURE__ */ n("div", {
+			className: e("container mx-auto px-3 sm:px-4 md:px-6 py-4 sm:py-6 md:py-8 lg:py-3 max-w-full", a && "py-2 sm:py-3 sm:flex-1 sm:min-h-0 sm:flex sm:flex-col sm:overflow-hidden", r),
+			children: t
+		})
+	});
+});
+//#endregion
+export { r as PageLayout };
+
+//# sourceMappingURL=page-layout.js.map

package/dist/components/chrome/page-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-layout.js","names":[],"sources":["../../../src/components/chrome/page-layout.tsx"],"mappings":";;;;AAaA,IAAa,IAAa,EAAK,SAAoB,EACjD,aACA,cACA,mBACA,iBACkB;CAClB,OACE,kBAAC,OAAD;EACE,WAAW,EACT,mCAKA,IACI,wFACA,cACJ,CACF;EAEA,UAAA,kBAAC,OAAD;GACE,WAAW,EACT,kFAIA,KAAc,4EACd,CACF;GAEC;EACE,CAAA;CACF,CAAA;AAET,CAAC"}

package/dist/components/chrome/page-toolbar.d.ts

@@ -0,0 +1,7 @@
+interface PageToolbarProps {
+    left?: React.ReactNode;
+    right?: React.ReactNode;
+    className?: string;
+}
+export declare const PageToolbar: import("react").MemoExoticComponent<({ left, right, className }: PageToolbarProps) => import("react").JSX.Element>;
+export {};

package/dist/components/chrome/page-toolbar.js

@@ -0,0 +1,21 @@
+import { cn as e } from "../../lib/utils.js";
+import { memo as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/chrome/page-toolbar.tsx
+var i = { animationDelay: "50ms" }, a = t(function({ left: t, right: a, className: o }) {
+	return /* @__PURE__ */ r("div", {
+		className: e("mb-4 flex items-center animate-card-fade-in", t && a ? "justify-between" : a ? "justify-end" : "justify-start", o),
+		style: i,
+		children: [t && /* @__PURE__ */ n("div", {
+			className: "flex items-center gap-3",
+			children: t
+		}), a && /* @__PURE__ */ n("div", {
+			className: "flex items-center gap-3",
+			children: a
+		})]
+	});
+});
+//#endregion
+export { a as PageToolbar };
+
+//# sourceMappingURL=page-toolbar.js.map

package/dist/components/chrome/page-toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-toolbar.js","names":[],"sources":["../../../src/components/chrome/page-toolbar.tsx"],"mappings":";;;;AAKA,IAAM,IAAqC,EAAE,gBAAgB,OAAO,GAQvD,IAAc,EAAK,SAAqB,EAAE,SAAM,UAAO,gBAA+B;CACjG,OACE,kBAAC,OAAD;EACE,WAAW,EACT,+CACA,KAAQ,IAAQ,oBAAoB,IAAQ,gBAAgB,iBAC5D,CACF;EACA,OAAO;EANT,UAAA,CAQG,KAAQ,kBAAC,OAAD;GAAK,WAAU;GAA2B,UAAA;EAAU,CAAA,GAC5D,KAAS,kBAAC,OAAD;GAAK,WAAU;GAA2B,UAAA;EAAW,CAAA,CAC5D;;AAET,CAAC"}

package/dist/components/chrome/sidebar.d.ts

@@ -0,0 +1,83 @@
+import type { Season } from "../../lib/seasons";
+export interface SidebarNavItem {
+    key: string;
+    href: string;
+    icon: React.ComponentType<{
+        className?: string;
+    }>;
+    /** Localized display name (the app resolves i18n). */
+    label: string;
+    external?: boolean;
+    /** Active-route state (the app derives this from its router). */
+    active?: boolean;
+    /** Optional data-prefetch handler fired on hover/focus. */
+    onPrefetch?: () => void;
+}
+export interface SidebarLinkProps {
+    href: string;
+    className?: string;
+    "aria-label"?: string;
+    onClick?: () => void;
+    onMouseEnter?: () => void;
+    onFocus?: () => void;
+    children: React.ReactNode;
+}
+export interface SidebarLabels {
+    mainNavigation: string;
+    primaryNavigation: string;
+    secondaryNavigation: string;
+    navigationMenu: string;
+    openMenu: string;
+    closeMenu: string;
+    expandSidebar: string;
+    collapseSidebar: string;
+    aiAssistant: string;
+    logoButtonAriaLabel?: string;
+}
+export interface SidebarProps {
+    labels: SidebarLabels;
+    primaryItems: SidebarNavItem[];
+    secondaryItems: SidebarNavItem[];
+    /**
+     * Renders internal navigation links — inject your router's Link here
+     * (FiestaBoard passes its ViewTransitionLink). External items render a
+     * plain <a target="_blank"> internally and never hit this.
+     */
+    renderLink: (props: SidebarLinkProps, item: SidebarNavItem) => React.ReactNode;
+    collapsed: boolean;
+    transitioning?: boolean;
+    onToggleCollapsed: () => void;
+    onTransitionEnd?: () => void;
+    /**
+     * src for the 32×32 brand icon next to the logo. Defaults to the
+     * embedded pixel-taco brand mark; apps may override (e.g. base-path
+     * aware asset URLs).
+     */
+    logoIconSrc?: string;
+    /** Active season: auroras render in its colors and the logo becomes a button. */
+    season?: Season | null;
+    /** Click handler for the seasonal logo button (celebration lives in the app). */
+    onLogoClick?: (e: React.MouseEvent) => void;
+    /** AI assistant nav entry; omit to hide. */
+    ai?: {
+        active: boolean;
+        onOpen: () => void;
+    };
+    /** Board switcher slots (rendered only when provided). */
+    boardSelector?: React.ReactNode;
+    mobileBoardSelector?: React.ReactNode;
+    /** Account row inside the secondary nav. */
+    renderAccount?: (ctx: {
+        variant: "mobile" | "desktop";
+        collapsed: boolean;
+    }) => React.ReactNode;
+    /** Version indicator in the footer row. */
+    versionSlot?: React.ReactNode;
+    /** Theme toggle in the footer row. */
+    themeToggleSlot?: React.ReactNode;
+    /** App max width in px — the sidebar centers itself against it. */
+    maxWidth: number;
+    /** Gap between the app edge and the sidebar in px. */
+    sidebarInset: number;
+}
+export declare const Sidebar: import("react").MemoExoticComponent<({ labels, primaryItems, secondaryItems, renderLink, collapsed, transitioning, onToggleCollapsed, onTransitionEnd, logoIconSrc, season, onLogoClick, ai, boardSelector, mobileBoardSelector, renderAccount, versionSlot, themeToggleSlot, maxWidth, sidebarInset, }: SidebarProps) => import("react").JSX.Element>;