@psnext/design-system 1.0.0 → 1.2.0

package/dist/layouts/Stack/index.js

@@ -0,0 +1,55 @@
+import { t as cn } from "../../cn.js";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/layouts/Stack/Stack.tsx
+const stackVariants = cva("flex", {
+	variants: {
+		direction: {
+			vertical: "flex-col",
+			horizontal: "flex-row"
+		},
+		gap: {
+			none: "gap-0",
+			xs: "gap-2",
+			sm: "gap-3",
+			md: "gap-4",
+			lg: "gap-6",
+			xl: "gap-8",
+			"2xl": "gap-12"
+		},
+		align: {
+			start: "items-start",
+			center: "items-center",
+			end: "items-end",
+			stretch: "items-stretch"
+		},
+		justify: {
+			start: "justify-start",
+			center: "justify-center",
+			between: "justify-between",
+			end: "justify-end"
+		}
+	},
+	defaultVariants: {
+		direction: "vertical",
+		gap: "md",
+		align: "stretch"
+	}
+});
+/** Stack — flex container that lays out children in a column or row with token-spaced gaps. */
+function Stack({ as, className, direction, gap, align, justify, ...props }) {
+	return /* @__PURE__ */ jsx(as ?? "div", {
+		"data-slot": "stack",
+		className: cn(stackVariants({
+			direction,
+			gap,
+			align,
+			justify
+		}), className),
+		...props
+	});
+}
+//#endregion
+export { Stack, stackVariants };
+
+//# sourceMappingURL=index.js.map

package/dist/layouts/Stack/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/layouts/Stack/Stack.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// Stack — flex layout with token-spaced gaps. Vertical by default (single\n// column); set `direction=\"horizontal\"` for a row.\nconst stackVariants = cva(\"flex\", {\n  variants: {\n    direction: {\n      vertical: \"flex-col\",\n      horizontal: \"flex-row\",\n    },\n    gap: {\n      none: \"gap-0\",\n      xs: \"gap-2\",\n      sm: \"gap-3\",\n      md: \"gap-4\",\n      lg: \"gap-6\",\n      xl: \"gap-8\",\n      \"2xl\": \"gap-12\",\n    },\n    align: {\n      start: \"items-start\",\n      center: \"items-center\",\n      end: \"items-end\",\n      stretch: \"items-stretch\",\n    },\n    justify: {\n      start: \"justify-start\",\n      center: \"justify-center\",\n      between: \"justify-between\",\n      end: \"justify-end\",\n    },\n  },\n  defaultVariants: {\n    direction: \"vertical\",\n    gap: \"md\",\n    align: \"stretch\",\n  },\n});\n\ntype StackProps = React.ComponentProps<\"div\"> &\n  VariantProps<typeof stackVariants> & {\n    /** Render as a different element/component instead of the default `div`. */\n    as?: React.ElementType;\n    /** Layout axis: `vertical` (column) or `horizontal` (row). Defaults to `vertical`. */\n    direction?: VariantProps<typeof stackVariants>[\"direction\"];\n    /** Spacing between children, mapped to spacing tokens. Defaults to `md`. */\n    gap?: VariantProps<typeof stackVariants>[\"gap\"];\n    /** Cross-axis alignment (`align-items`). Defaults to `stretch`. */\n    align?: VariantProps<typeof stackVariants>[\"align\"];\n    /** Main-axis distribution (`justify-content`). */\n    justify?: VariantProps<typeof stackVariants>[\"justify\"];\n  };\n\n/** Stack — flex container that lays out children in a column or row with token-spaced gaps. */\nfunction Stack({ as, className, direction, gap, align, justify, ...props }: StackProps) {\n  const Comp = as ?? \"div\";\n  return (\n    <Comp\n      data-slot=\"stack\"\n      className={cn(stackVariants({ direction, gap, align, justify }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Stack, stackVariants, type StackProps };\n"],"mappings":";;;;AAOA,MAAM,gBAAgB,IAAI,QAAQ;CAChC,UAAU;EACR,WAAW;GACT,UAAU;GACV,YAAY;EACd;EACA,KAAK;GACH,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OAAO;EACT;EACA,OAAO;GACL,OAAO;GACP,QAAQ;GACR,KAAK;GACL,SAAS;EACX;EACA,SAAS;GACP,OAAO;GACP,QAAQ;GACR,SAAS;GACT,KAAK;EACP;CACF;CACA,iBAAiB;EACf,WAAW;EACX,KAAK;EACL,OAAO;CACT;AACF,CAAC;;AAiBD,SAAS,MAAM,EAAE,IAAI,WAAW,WAAW,KAAK,OAAO,SAAS,GAAG,SAAqB;CAEtF,OACE,oBAFW,MAAM,OAEjB;EACE,aAAU;EACV,WAAW,GAAG,cAAc;GAAE;GAAW;GAAK;GAAO;EAAQ,CAAC,GAAG,SAAS;EAC1E,GAAI;CACL,CAAA;AAEL"}

package/dist/layouts/TwoColumn/index.cjs

@@ -0,0 +1,51 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_cn = require("../../cn.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/layouts/TwoColumn/TwoColumn.tsx
+const twoColumnVariants = (0, require("class-variance-authority").cva)("flex flex-col lg:flex-row", {
+	variants: {
+		gap: {
+			none: "gap-0",
+			sm: "gap-3",
+			md: "gap-4",
+			lg: "gap-6",
+			xl: "gap-8"
+		},
+		reverse: { true: "lg:flex-row-reverse" }
+	},
+	defaultVariants: { gap: "lg" }
+});
+/** Composable two-column layout (aside + main) that stacks vertically below `lg`. */
+function TwoColumn({ className, gap, reverse, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "two-column",
+		className: require_cn.cn(twoColumnVariants({
+			gap,
+			reverse
+		}), className),
+		...props
+	});
+}
+/** Sidebar column — full width when stacked, fixed `lg:w-64` beside the main column (override via `className`). */
+function TwoColumnAside({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
+		"data-slot": "two-column-aside",
+		className: require_cn.cn("w-full shrink-0 lg:w-64", className),
+		...props
+	});
+}
+/** Main content column — fills the remaining space (`min-w-0 flex-1`) so it can shrink and truncate. */
+function TwoColumnMain({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "two-column-main",
+		className: require_cn.cn("min-w-0 flex-1", className),
+		...props
+	});
+}
+//#endregion
+exports.TwoColumn = TwoColumn;
+exports.TwoColumnAside = TwoColumnAside;
+exports.TwoColumnMain = TwoColumnMain;
+exports.twoColumnVariants = twoColumnVariants;
+
+//# sourceMappingURL=index.cjs.map

package/dist/layouts/TwoColumn/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["cn"],"sources":["../../../src/layouts/TwoColumn/TwoColumn.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// TwoColumn — composable two-column layout (aside + main). Stacks vertically\n// below `lg`. Compose: <TwoColumn><TwoColumnAside/><TwoColumnMain/></TwoColumn>.\n// The aside width is set on TwoColumnAside (default lg:w-64; override via className,\n// e.g. a 56px nav rail with `lg:w-14`).\nconst twoColumnVariants = cva(\"flex flex-col lg:flex-row\", {\n  variants: {\n    gap: {\n      none: \"gap-0\",\n      sm: \"gap-3\",\n      md: \"gap-4\",\n      lg: \"gap-6\",\n      xl: \"gap-8\",\n    },\n    reverse: {\n      true: \"lg:flex-row-reverse\",\n    },\n  },\n  defaultVariants: {\n    gap: \"lg\",\n  },\n});\n\ntype TwoColumnProps = React.ComponentProps<\"div\"> &\n  VariantProps<typeof twoColumnVariants> & {\n    /** Space between the aside and main columns (and between stacked rows below `lg`). */\n    gap?: VariantProps<typeof twoColumnVariants>[\"gap\"];\n    /** Place the aside after the main column at `lg` and up (`flex-row-reverse`). */\n    reverse?: VariantProps<typeof twoColumnVariants>[\"reverse\"];\n  };\n\n/** Composable two-column layout (aside + main) that stacks vertically below `lg`. */\nfunction TwoColumn({ className, gap, reverse, ...props }: TwoColumnProps) {\n  return (\n    <div\n      data-slot=\"two-column\"\n      className={cn(twoColumnVariants({ gap, reverse }), className)}\n      {...props}\n    />\n  );\n}\n\n/** Sidebar column — full width when stacked, fixed `lg:w-64` beside the main column (override via `className`). */\nfunction TwoColumnAside({ className, ...props }: React.ComponentProps<\"aside\">) {\n  return (\n    <aside\n      data-slot=\"two-column-aside\"\n      className={cn(\"w-full shrink-0 lg:w-64\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Main content column — fills the remaining space (`min-w-0 flex-1`) so it can shrink and truncate. */\nfunction TwoColumnMain({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"two-column-main\" className={cn(\"min-w-0 flex-1\", className)} {...props} />;\n}\n\nexport { TwoColumn, TwoColumnAside, TwoColumnMain, twoColumnVariants, type TwoColumnProps };\n"],"mappings":";;;;AASA,MAAM,qBAAA,qCAAA,EAAA,KAAwB,6BAA6B;CACzD,UAAU;EACR,KAAK;GACH,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,SAAS,EACP,MAAM,sBACR;CACF;CACA,iBAAiB,EACf,KAAK,KACP;AACF,CAAC;;AAWD,SAAS,UAAU,EAAE,WAAW,KAAK,SAAS,GAAG,SAAyB;CACxE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,kBAAkB;GAAE;GAAK;EAAQ,CAAC,GAAG,SAAS;EAC5D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAwC;CAC9E,OACE,iBAAA,GAAA,kBAAA,KAAC,SAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,2BAA2B,SAAS;EAClD,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;CAC3E,OAAO,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,aAAU;EAAkB,WAAWA,WAAAA,GAAG,kBAAkB,SAAS;EAAG,GAAI;CAAQ,CAAA;AAClG"}

package/dist/layouts/TwoColumn/index.d.cts

@@ -0,0 +1,2 @@
+import { a as twoColumnVariants, i as TwoColumnProps, n as TwoColumnAside, r as TwoColumnMain, t as TwoColumn } from "../../index68.cjs";
+export { TwoColumn, TwoColumnAside, TwoColumnMain, TwoColumnProps, twoColumnVariants };

package/dist/layouts/TwoColumn/index.d.ts

@@ -0,0 +1,2 @@
+import { a as twoColumnVariants, i as TwoColumnProps, n as TwoColumnAside, r as TwoColumnMain, t as TwoColumn } from "../../index68.js";
+export { TwoColumn, TwoColumnAside, TwoColumnMain, TwoColumnProps, twoColumnVariants };

package/dist/layouts/TwoColumn/index.js

@@ -0,0 +1,48 @@
+import { t as cn } from "../../cn.js";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/layouts/TwoColumn/TwoColumn.tsx
+const twoColumnVariants = cva("flex flex-col lg:flex-row", {
+	variants: {
+		gap: {
+			none: "gap-0",
+			sm: "gap-3",
+			md: "gap-4",
+			lg: "gap-6",
+			xl: "gap-8"
+		},
+		reverse: { true: "lg:flex-row-reverse" }
+	},
+	defaultVariants: { gap: "lg" }
+});
+/** Composable two-column layout (aside + main) that stacks vertically below `lg`. */
+function TwoColumn({ className, gap, reverse, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "two-column",
+		className: cn(twoColumnVariants({
+			gap,
+			reverse
+		}), className),
+		...props
+	});
+}
+/** Sidebar column — full width when stacked, fixed `lg:w-64` beside the main column (override via `className`). */
+function TwoColumnAside({ className, ...props }) {
+	return /* @__PURE__ */ jsx("aside", {
+		"data-slot": "two-column-aside",
+		className: cn("w-full shrink-0 lg:w-64", className),
+		...props
+	});
+}
+/** Main content column — fills the remaining space (`min-w-0 flex-1`) so it can shrink and truncate. */
+function TwoColumnMain({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "two-column-main",
+		className: cn("min-w-0 flex-1", className),
+		...props
+	});
+}
+//#endregion
+export { TwoColumn, TwoColumnAside, TwoColumnMain, twoColumnVariants };
+
+//# sourceMappingURL=index.js.map

package/dist/layouts/TwoColumn/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/layouts/TwoColumn/TwoColumn.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// TwoColumn — composable two-column layout (aside + main). Stacks vertically\n// below `lg`. Compose: <TwoColumn><TwoColumnAside/><TwoColumnMain/></TwoColumn>.\n// The aside width is set on TwoColumnAside (default lg:w-64; override via className,\n// e.g. a 56px nav rail with `lg:w-14`).\nconst twoColumnVariants = cva(\"flex flex-col lg:flex-row\", {\n  variants: {\n    gap: {\n      none: \"gap-0\",\n      sm: \"gap-3\",\n      md: \"gap-4\",\n      lg: \"gap-6\",\n      xl: \"gap-8\",\n    },\n    reverse: {\n      true: \"lg:flex-row-reverse\",\n    },\n  },\n  defaultVariants: {\n    gap: \"lg\",\n  },\n});\n\ntype TwoColumnProps = React.ComponentProps<\"div\"> &\n  VariantProps<typeof twoColumnVariants> & {\n    /** Space between the aside and main columns (and between stacked rows below `lg`). */\n    gap?: VariantProps<typeof twoColumnVariants>[\"gap\"];\n    /** Place the aside after the main column at `lg` and up (`flex-row-reverse`). */\n    reverse?: VariantProps<typeof twoColumnVariants>[\"reverse\"];\n  };\n\n/** Composable two-column layout (aside + main) that stacks vertically below `lg`. */\nfunction TwoColumn({ className, gap, reverse, ...props }: TwoColumnProps) {\n  return (\n    <div\n      data-slot=\"two-column\"\n      className={cn(twoColumnVariants({ gap, reverse }), className)}\n      {...props}\n    />\n  );\n}\n\n/** Sidebar column — full width when stacked, fixed `lg:w-64` beside the main column (override via `className`). */\nfunction TwoColumnAside({ className, ...props }: React.ComponentProps<\"aside\">) {\n  return (\n    <aside\n      data-slot=\"two-column-aside\"\n      className={cn(\"w-full shrink-0 lg:w-64\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Main content column — fills the remaining space (`min-w-0 flex-1`) so it can shrink and truncate. */\nfunction TwoColumnMain({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"two-column-main\" className={cn(\"min-w-0 flex-1\", className)} {...props} />;\n}\n\nexport { TwoColumn, TwoColumnAside, TwoColumnMain, twoColumnVariants, type TwoColumnProps };\n"],"mappings":";;;;AASA,MAAM,oBAAoB,IAAI,6BAA6B;CACzD,UAAU;EACR,KAAK;GACH,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,SAAS,EACP,MAAM,sBACR;CACF;CACA,iBAAiB,EACf,KAAK,KACP;AACF,CAAC;;AAWD,SAAS,UAAU,EAAE,WAAW,KAAK,SAAS,GAAG,SAAyB;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,kBAAkB;GAAE;GAAK;EAAQ,CAAC,GAAG,SAAS;EAC5D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAwC;CAC9E,OACE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,SAAS;EAClD,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;CAC3E,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAkB,WAAW,GAAG,kBAAkB,SAAS;EAAG,GAAI;CAAQ,CAAA;AAClG"}

package/dist/layouts/index.cjs

@@ -1,13 +1,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_layouts = require("../layouts.cjs");
-exports.AnimatedBackground = require_layouts.AnimatedBackground;
-exports.AppHeader = require_layouts.AppHeader;
-exports.BodhiHeader = require_layouts.BodhiHeader;
-exports.Header = require_layouts.Header;
-exports.LeftNavigation = require_layouts.LeftNavigation;
-exports.Logo = require_layouts.Logo;
-exports.MobileGate = require_layouts.MobileGate;
-exports.PSAIHeader = require_layouts.PSAIHeader;
-exports.RightSidebar = require_layouts.RightSidebar;
-exports.SlingshotHeader = require_layouts.SlingshotHeader;
-exports.SustainHeader = require_layouts.SustainHeader;
+const require_layouts_Container_index = require("./Container/index.cjs");
+const require_layouts_PageBackground_index = require("./PageBackground/index.cjs");
+const require_layouts_Stack_index = require("./Stack/index.cjs");
+const require_layouts_TwoColumn_index = require("./TwoColumn/index.cjs");
+exports.Container = require_layouts_Container_index.Container;
+exports.PageBackground = require_layouts_PageBackground_index.PageBackground;
+exports.Stack = require_layouts_Stack_index.Stack;
+exports.TwoColumn = require_layouts_TwoColumn_index.TwoColumn;
+exports.TwoColumnAside = require_layouts_TwoColumn_index.TwoColumnAside;
+exports.TwoColumnMain = require_layouts_TwoColumn_index.TwoColumnMain;
+exports.containerVariants = require_layouts_Container_index.containerVariants;
+exports.stackVariants = require_layouts_Stack_index.stackVariants;
+exports.twoColumnVariants = require_layouts_TwoColumn_index.twoColumnVariants;

package/dist/layouts/index.d.cts

@@ -1,133 +1,5 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-
-//#region src/layouts/AnimatedBackground/AnimatedBackground.d.ts
-interface AnimatedBackgroundProps {
-  isDarkMode: boolean;
-}
-declare function AnimatedBackground({
-  isDarkMode
-}: AnimatedBackgroundProps): react_jsx_runtime0.JSX.Element;
-//#endregion
-//#region src/layouts/AppHeader/AppHeader.d.ts
-/**
- * Brand identity for {@link AppHeader}. Selects the wordmark logo and the
- * DOM id-prefix used for the portalled dropdown panels.
- *
- * Note: `slingshot` intentionally uses an empty id-prefix to preserve the
- * panel ids the prototype shipped with (`org-dropdown-panel`, …).
- */
-type AppHeaderBrand = "bodhi" | "slingshot" | "sustain";
-interface AppHeaderProps {
-  /** Brand variant — selects the wordmark logo and the dropdown panel id-prefix. */
-  brand: AppHeaderBrand;
-  isDarkMode: boolean;
-  onToggleTheme: () => void;
-}
-/**
- * Unified product header (logo + org/project switchers + theme toggle + credit
- * badge + avatar menu). Replaces the previously triplicated per-product headers;
- * `BodhiHeader`, `SlingshotHeader`, and `SustainHeader` are thin wrappers around
- * this component.
- */
-declare function AppHeader({
-  brand,
-  isDarkMode,
-  onToggleTheme
-}: AppHeaderProps): react_jsx_runtime0.JSX.Element;
-//# sourceMappingURL=AppHeader.d.ts.map
-//#endregion
-//#region src/layouts/BodhiHeader/BodhiHeader.d.ts
-interface BodhiHeaderProps {
-  isDarkMode: boolean;
-  onToggleTheme: () => void;
-}
-/** Bodhi-branded {@link AppHeader}. Kept for backwards compatibility; prefer `<AppHeader brand="bodhi" />`. */
-declare function BodhiHeader({
-  isDarkMode,
-  onToggleTheme
-}: BodhiHeaderProps): react_jsx_runtime0.JSX.Element;
-//#endregion
-//#region src/layouts/Header/Header.d.ts
-interface HeaderProps {
-  isDarkMode: boolean;
-  onToggleTheme: () => void;
-  onLogout?: () => void;
-}
-declare function Header({
-  isDarkMode,
-  onToggleTheme,
-  onLogout
-}: HeaderProps): react_jsx_runtime0.JSX.Element;
-//#endregion
-//#region src/layouts/LeftNavigation/LeftNavigation.d.ts
-interface LeftNavigationProps {
-  activePage: string;
-  onNavigate: (page: string) => void;
-}
-declare function LeftNavigation({
-  activePage,
-  onNavigate
-}: LeftNavigationProps): react_jsx_runtime0.JSX.Element;
-//#endregion
-//#region src/layouts/Logo/Logo.d.ts
-declare function Logo({
-  isDarkMode
-}: {
-  isDarkMode: boolean;
-}): react_jsx_runtime0.JSX.Element;
-//# sourceMappingURL=Logo.d.ts.map
-//#endregion
-//#region src/layouts/MobileGate/MobileGate.d.ts
-declare function MobileGate(): react_jsx_runtime0.JSX.Element;
-//# sourceMappingURL=MobileGate.d.ts.map
-//#endregion
-//#region src/layouts/PsaiHeader/PsaiHeader.d.ts
-interface PSAIHeaderProps {
-  isDarkMode: boolean;
-  onToggleTheme: () => void;
-  onAdminLogin?: () => void;
-  adminLoginLabel?: string;
-  onBack?: () => void;
-  showBackButton?: boolean;
-}
-declare function PSAIHeader({
-  isDarkMode,
-  onToggleTheme,
-  onAdminLogin,
-  adminLoginLabel,
-  onBack,
-  showBackButton
-}: PSAIHeaderProps): react_jsx_runtime0.JSX.Element;
-//#endregion
-//#region src/layouts/RightSidebar/RightSidebar.d.ts
-declare function RightSidebar({
-  domain
-}: {
-  domain?: "slingshot" | "bodhi" | "sustain";
-}): react_jsx_runtime0.JSX.Element;
-//# sourceMappingURL=RightSidebar.d.ts.map
-//#endregion
-//#region src/layouts/SlingshotHeader/SlingshotHeader.d.ts
-interface SlingshotHeaderProps {
-  isDarkMode: boolean;
-  onToggleTheme: () => void;
-}
-/** Slingshot-branded {@link AppHeader}. Kept for backwards compatibility; prefer `<AppHeader brand="slingshot" />`. */
-declare function SlingshotHeader({
-  isDarkMode,
-  onToggleTheme
-}: SlingshotHeaderProps): react_jsx_runtime0.JSX.Element;
-//#endregion
-//#region src/layouts/SustainHeader/SustainHeader.d.ts
-interface SustainHeaderProps {
-  isDarkMode: boolean;
-  onToggleTheme: () => void;
-}
-/** Sustain-branded {@link AppHeader}. Kept for backwards compatibility; prefer `<AppHeader brand="sustain" />`. */
-declare function SustainHeader({
-  isDarkMode,
-  onToggleTheme
-}: SustainHeaderProps): react_jsx_runtime0.JSX.Element;
-//#endregion
-export { AnimatedBackground, AppHeader, AppHeaderBrand, AppHeaderProps, BodhiHeader, Header, LeftNavigation, Logo, MobileGate, PSAIHeader, RightSidebar, SlingshotHeader, SustainHeader };
-//# sourceMappingURL=index.d.cts.map
+import { n as ContainerProps, r as containerVariants, t as Container } from "../index65.cjs";
+import { n as PageBackgroundProps, t as PageBackground } from "../index66.cjs";
+import { n as StackProps, r as stackVariants, t as Stack } from "../index67.cjs";
+import { a as twoColumnVariants, i as TwoColumnProps, n as TwoColumnAside, r as TwoColumnMain, t as TwoColumn } from "../index68.cjs";
+export { Container, ContainerProps, PageBackground, PageBackgroundProps, Stack, StackProps, TwoColumn, TwoColumnAside, TwoColumnMain, TwoColumnProps, containerVariants, stackVariants, twoColumnVariants };

package/dist/layouts/index.d.ts

@@ -1,133 +1,5 @@
-import * as react_jsx_runtime19 from "react/jsx-runtime";
-
-//#region src/layouts/AnimatedBackground/AnimatedBackground.d.ts
-interface AnimatedBackgroundProps {
-  isDarkMode: boolean;
-}
-declare function AnimatedBackground({
-  isDarkMode
-}: AnimatedBackgroundProps): react_jsx_runtime19.JSX.Element;
-//#endregion
-//#region src/layouts/AppHeader/AppHeader.d.ts
-/**
- * Brand identity for {@link AppHeader}. Selects the wordmark logo and the
- * DOM id-prefix used for the portalled dropdown panels.
- *
- * Note: `slingshot` intentionally uses an empty id-prefix to preserve the
- * panel ids the prototype shipped with (`org-dropdown-panel`, …).
- */
-type AppHeaderBrand = "bodhi" | "slingshot" | "sustain";
-interface AppHeaderProps {
-  /** Brand variant — selects the wordmark logo and the dropdown panel id-prefix. */
-  brand: AppHeaderBrand;
-  isDarkMode: boolean;
-  onToggleTheme: () => void;
-}
-/**
- * Unified product header (logo + org/project switchers + theme toggle + credit
- * badge + avatar menu). Replaces the previously triplicated per-product headers;
- * `BodhiHeader`, `SlingshotHeader`, and `SustainHeader` are thin wrappers around
- * this component.
- */
-declare function AppHeader({
-  brand,
-  isDarkMode,
-  onToggleTheme
-}: AppHeaderProps): react_jsx_runtime19.JSX.Element;
-//# sourceMappingURL=AppHeader.d.ts.map
-//#endregion
-//#region src/layouts/BodhiHeader/BodhiHeader.d.ts
-interface BodhiHeaderProps {
-  isDarkMode: boolean;
-  onToggleTheme: () => void;
-}
-/** Bodhi-branded {@link AppHeader}. Kept for backwards compatibility; prefer `<AppHeader brand="bodhi" />`. */
-declare function BodhiHeader({
-  isDarkMode,
-  onToggleTheme
-}: BodhiHeaderProps): react_jsx_runtime19.JSX.Element;
-//#endregion
-//#region src/layouts/Header/Header.d.ts
-interface HeaderProps {
-  isDarkMode: boolean;
-  onToggleTheme: () => void;
-  onLogout?: () => void;
-}
-declare function Header({
-  isDarkMode,
-  onToggleTheme,
-  onLogout
-}: HeaderProps): react_jsx_runtime19.JSX.Element;
-//#endregion
-//#region src/layouts/LeftNavigation/LeftNavigation.d.ts
-interface LeftNavigationProps {
-  activePage: string;
-  onNavigate: (page: string) => void;
-}
-declare function LeftNavigation({
-  activePage,
-  onNavigate
-}: LeftNavigationProps): react_jsx_runtime19.JSX.Element;
-//#endregion
-//#region src/layouts/Logo/Logo.d.ts
-declare function Logo({
-  isDarkMode
-}: {
-  isDarkMode: boolean;
-}): react_jsx_runtime19.JSX.Element;
-//# sourceMappingURL=Logo.d.ts.map
-//#endregion
-//#region src/layouts/MobileGate/MobileGate.d.ts
-declare function MobileGate(): react_jsx_runtime19.JSX.Element;
-//# sourceMappingURL=MobileGate.d.ts.map
-//#endregion
-//#region src/layouts/PsaiHeader/PsaiHeader.d.ts
-interface PSAIHeaderProps {
-  isDarkMode: boolean;
-  onToggleTheme: () => void;
-  onAdminLogin?: () => void;
-  adminLoginLabel?: string;
-  onBack?: () => void;
-  showBackButton?: boolean;
-}
-declare function PSAIHeader({
-  isDarkMode,
-  onToggleTheme,
-  onAdminLogin,
-  adminLoginLabel,
-  onBack,
-  showBackButton
-}: PSAIHeaderProps): react_jsx_runtime19.JSX.Element;
-//#endregion
-//#region src/layouts/RightSidebar/RightSidebar.d.ts
-declare function RightSidebar({
-  domain
-}: {
-  domain?: "slingshot" | "bodhi" | "sustain";
-}): react_jsx_runtime19.JSX.Element;
-//# sourceMappingURL=RightSidebar.d.ts.map
-//#endregion
-//#region src/layouts/SlingshotHeader/SlingshotHeader.d.ts
-interface SlingshotHeaderProps {
-  isDarkMode: boolean;
-  onToggleTheme: () => void;
-}
-/** Slingshot-branded {@link AppHeader}. Kept for backwards compatibility; prefer `<AppHeader brand="slingshot" />`. */
-declare function SlingshotHeader({
-  isDarkMode,
-  onToggleTheme
-}: SlingshotHeaderProps): react_jsx_runtime19.JSX.Element;
-//#endregion
-//#region src/layouts/SustainHeader/SustainHeader.d.ts
-interface SustainHeaderProps {
-  isDarkMode: boolean;
-  onToggleTheme: () => void;
-}
-/** Sustain-branded {@link AppHeader}. Kept for backwards compatibility; prefer `<AppHeader brand="sustain" />`. */
-declare function SustainHeader({
-  isDarkMode,
-  onToggleTheme
-}: SustainHeaderProps): react_jsx_runtime19.JSX.Element;
-//#endregion
-export { AnimatedBackground, AppHeader, AppHeaderBrand, AppHeaderProps, BodhiHeader, Header, LeftNavigation, Logo, MobileGate, PSAIHeader, RightSidebar, SlingshotHeader, SustainHeader };
-//# sourceMappingURL=index.d.ts.map
+import { n as ContainerProps, r as containerVariants, t as Container } from "../index65.js";
+import { n as PageBackgroundProps, t as PageBackground } from "../index66.js";
+import { n as StackProps, r as stackVariants, t as Stack } from "../index67.js";
+import { a as twoColumnVariants, i as TwoColumnProps, n as TwoColumnAside, r as TwoColumnMain, t as TwoColumn } from "../index68.js";
+export { Container, ContainerProps, PageBackground, PageBackgroundProps, Stack, StackProps, TwoColumn, TwoColumnAside, TwoColumnMain, TwoColumnProps, containerVariants, stackVariants, twoColumnVariants };

package/dist/layouts/index.js

@@ -1,2 +1,5 @@
-import { a as MobileGate, c as Header, d as AnimatedBackground, i as PSAIHeader, l as BodhiHeader, n as SlingshotHeader, o as Logo, r as RightSidebar, s as LeftNavigation, t as SustainHeader, u as AppHeader } from "../layouts.js";
-export { AnimatedBackground, AppHeader, BodhiHeader, Header, LeftNavigation, Logo, MobileGate, PSAIHeader, RightSidebar, SlingshotHeader, SustainHeader };
+import { Container, containerVariants } from "./Container/index.js";
+import { PageBackground } from "./PageBackground/index.js";
+import { Stack, stackVariants } from "./Stack/index.js";
+import { TwoColumn, TwoColumnAside, TwoColumnMain, twoColumnVariants } from "./TwoColumn/index.js";
+export { Container, PageBackground, Stack, TwoColumn, TwoColumnAside, TwoColumnMain, containerVariants, stackVariants, twoColumnVariants };

package/dist/patterns/DataTable/index.cjs

@@ -0,0 +1,114 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../../chunk.cjs");
+const require_cn = require("../../cn.cjs");
+const require_primitives_Button_index = require("../../primitives/Button/index.cjs");
+const require_primitives_Table_index = require("../../primitives/Table/index.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let lucide_react = require("lucide-react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _tanstack_react_table = require("@tanstack/react-table");
+//#region src/patterns/DataTable/DataTable.tsx
+/**
+* TanStack-Table-backed data table with sorting, row selection, and optional
+* client-side pagination, rendered through the Table primitives.
+*/
+function DataTable({ columns, data, striped = true, enablePagination = true, pageSize = 10 }) {
+	const [sorting, setSorting] = react.useState([]);
+	const [rowSelection, setRowSelection] = react.useState({});
+	const table = (0, _tanstack_react_table.useReactTable)({
+		data,
+		columns,
+		state: {
+			sorting,
+			rowSelection
+		},
+		onSortingChange: setSorting,
+		onRowSelectionChange: setRowSelection,
+		getCoreRowModel: (0, _tanstack_react_table.getCoreRowModel)(),
+		getSortedRowModel: (0, _tanstack_react_table.getSortedRowModel)(),
+		getPaginationRowModel: enablePagination ? (0, _tanstack_react_table.getPaginationRowModel)() : void 0,
+		initialState: { pagination: { pageSize } }
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-slot": "data-table",
+		className: "space-y-4",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "overflow-hidden rounded-md border",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_primitives_Table_index.Table, {
+				striped,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Table_index.TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Table_index.TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Table_index.TableHead, {
+					colSpan: header.colSpan,
+					children: header.isPlaceholder ? null : (0, _tanstack_react_table.flexRender)(header.column.columnDef.header, header.getContext())
+				}, header.id)) }, headerGroup.id)) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Table_index.TableBody, { children: table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Table_index.TableRow, {
+					"data-state": row.getIsSelected() ? "selected" : void 0,
+					children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Table_index.TableCell, { children: (0, _tanstack_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+				}, row.id)) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Table_index.TableRow, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Table_index.TableCell, {
+					colSpan: columns.length,
+					className: "h-24 text-center text-muted-foreground",
+					children: "No results."
+				}) }) })]
+			})
+		}), enablePagination ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center justify-between gap-4",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+				className: "text-sm text-muted-foreground",
+				"data-slot": "data-table-selection",
+				children: [
+					table.getFilteredSelectedRowModel().rows.length,
+					" of",
+					" ",
+					table.getFilteredRowModel().rows.length,
+					" row(s) selected."
+				]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center gap-2",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "text-sm text-muted-foreground",
+						children: [
+							"Page ",
+							table.getState().pagination.pageIndex + 1,
+							" of ",
+							table.getPageCount() || 1
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Button_index.Button, {
+						variant: "outline",
+						size: "sm",
+						onClick: () => table.previousPage(),
+						disabled: !table.getCanPreviousPage(),
+						children: "Previous"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Button_index.Button, {
+						variant: "outline",
+						size: "sm",
+						onClick: () => table.nextPage(),
+						disabled: !table.getCanNextPage(),
+						children: "Next"
+					})
+				]
+			})]
+		}) : null]
+	});
+}
+/** Sortable column header — drop into a column's `header` to get click-to-sort. */
+function DataTableColumnHeader({ column, title, className }) {
+	if (!column.getCanSort()) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className,
+		children: title
+	});
+	const sorted = column.getIsSorted();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_primitives_Button_index.Button, {
+		variant: "ghost",
+		size: "sm",
+		className: require_cn.cn("-ml-2 h-8", className),
+		onClick: () => column.toggleSorting(sorted === "asc"),
+		children: [title, sorted === "asc" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowUpIcon, {}) : sorted === "desc" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowDownIcon, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronsUpDownIcon, {})]
+	});
+}
+//#endregion
+exports.DataTable = DataTable;
+exports.DataTableColumnHeader = DataTableColumnHeader;
+
+//# sourceMappingURL=index.cjs.map

package/dist/patterns/DataTable/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["React","Table","TableHeader","TableRow","TableHead","TableBody","TableCell","Button","cn","ArrowUpIcon","ArrowDownIcon","ChevronsUpDownIcon"],"sources":["../../../src/patterns/DataTable/DataTable.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type Column,\n  type ColumnDef,\n  type RowSelectionState,\n  type SortingState,\n  flexRender,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from \"@tanstack/react-table\";\nimport { ArrowDownIcon, ArrowUpIcon, ChevronsUpDownIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { Button } from \"@/primitives/Button\";\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from \"@/primitives/Table\";\nimport { cn } from \"@/utils\";\n\ntype DataTableProps<TData, TValue> = {\n  /** TanStack Table column definitions describing each column's header and cell. */\n  columns: ColumnDef<TData, TValue>[];\n  /** The row objects to render in the table body. */\n  data: TData[];\n  /** Zebra-stripe the rows (default true). */\n  striped?: boolean;\n  /** Client-side pagination + page size (default true, 10). */\n  enablePagination?: boolean;\n  /** Rows per page when pagination is enabled (default 10). */\n  pageSize?: number;\n};\n\n/**\n * TanStack-Table-backed data table with sorting, row selection, and optional\n * client-side pagination, rendered through the Table primitives.\n */\nfunction DataTable<TData, TValue>({\n  columns,\n  data,\n  striped = true,\n  enablePagination = true,\n  pageSize = 10,\n}: DataTableProps<TData, TValue>) {\n  const [sorting, setSorting] = React.useState<SortingState>([]);\n  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});\n\n  const table = useReactTable({\n    data,\n    columns,\n    state: { sorting, rowSelection },\n    onSortingChange: setSorting,\n    onRowSelectionChange: setRowSelection,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getPaginationRowModel: enablePagination ? getPaginationRowModel() : undefined,\n    initialState: { pagination: { pageSize } },\n  });\n\n  return (\n    <div data-slot=\"data-table\" className=\"space-y-4\">\n      <div className=\"overflow-hidden rounded-md border\">\n        <Table striped={striped}>\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow key={headerGroup.id}>\n                {headerGroup.headers.map((header) => (\n                  <TableHead key={header.id} colSpan={header.colSpan}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(header.column.columnDef.header, header.getContext())}\n                  </TableHead>\n                ))}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow key={row.id} data-state={row.getIsSelected() ? \"selected\" : undefined}>\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id}>\n                      {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  colSpan={columns.length}\n                  className=\"h-24 text-center text-muted-foreground\"\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n\n      {enablePagination ? (\n        <div className=\"flex items-center justify-between gap-4\">\n          <p className=\"text-sm text-muted-foreground\" data-slot=\"data-table-selection\">\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </p>\n          <div className=\"flex items-center gap-2\">\n            <span className=\"text-sm text-muted-foreground\">\n              Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount() || 1}\n            </span>\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              onClick={() => table.previousPage()}\n              disabled={!table.getCanPreviousPage()}\n            >\n              Previous\n            </Button>\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              onClick={() => table.nextPage()}\n              disabled={!table.getCanNextPage()}\n            >\n              Next\n            </Button>\n          </div>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\n/** Sortable column header — drop into a column's `header` to get click-to-sort. */\nfunction DataTableColumnHeader<TData, TValue>({\n  column,\n  title,\n  className,\n}: {\n  /** The TanStack Table column instance this header controls. */\n  column: Column<TData, TValue>;\n  /** Visible label for the column. */\n  title: string;\n  /** Optional class applied to the header button (or span when unsortable). */\n  className?: string;\n}) {\n  if (!column.getCanSort()) {\n    return <span className={className}>{title}</span>;\n  }\n\n  const sorted = column.getIsSorted();\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"sm\"\n      className={cn(\"-ml-2 h-8\", className)}\n      onClick={() => column.toggleSorting(sorted === \"asc\")}\n    >\n      {title}\n      {sorted === \"asc\" ? (\n        <ArrowUpIcon />\n      ) : sorted === \"desc\" ? (\n        <ArrowDownIcon />\n      ) : (\n        <ChevronsUpDownIcon />\n      )}\n    </Button>\n  );\n}\n\nexport { DataTable, DataTableColumnHeader };\nexport type { ColumnDef };\n"],"mappings":"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"}