@lssm/lib.design-system 0.0.0-canary-20251120170226

package/dist/components/organisms/Header.js

@@ -0,0 +1,101 @@
+'use client';
+
+
+import { Button } from "../atoms/Button.js";
+import { ButtonLink } from "../atoms/ButtonLink.js";
+import { NavMain } from "../molecules/NavMain.js";
+import { NavUser } from "../molecules/NavUser.js";
+import { AppSidebar } from "./AppSidebar.js";
+import "react";
+import { Menu } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "@lssm/lib.ui-kit-web/ui/utils";
+import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "@lssm/lib.ui-kit-web/ui/sheet";
+import { Separator } from "@lssm/lib.ui-kit-web/ui/separator";
+
+//#region src/components/organisms/Header.tsx
+const desktopHeaderVariants = cva("hidden items-center justify-between gap-4 md:flex", {
+	variants: { density: {
+		compact: "px-3 py-1",
+		comfortable: "px-4 py-2"
+	} },
+	defaultVariants: { density: "comfortable" }
+});
+const mobileHeaderVariants = cva("flex items-center justify-between md:hidden", {
+	variants: { density: {
+		compact: "px-2 py-1",
+		comfortable: "px-3 py-2"
+	} },
+	defaultVariants: { density: "comfortable" }
+});
+function DesktopHeader({ logo, nav, userMenu, cta, className, density }) {
+	return /* @__PURE__ */ jsxs("header", {
+		className: cn(desktopHeaderVariants({ density }), className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-4",
+			children: [
+				logo,
+				/* @__PURE__ */ jsx(Separator, {
+					orientation: "vertical",
+					className: "h-6"
+				}),
+				/* @__PURE__ */ jsx(NavMain, { items: nav })
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [cta && /* @__PURE__ */ jsx(ButtonLink, {
+				variant: cta.variant,
+				href: cta.href,
+				children: cta.label
+			}), userMenu && /* @__PURE__ */ jsx(NavUser, { ...userMenu })]
+		})]
+	});
+}
+function MobileHeader({ logo, userMenu, mobileSidebar, className, density }) {
+	return /* @__PURE__ */ jsxs("header", {
+		className: cn(mobileHeaderVariants({ density }), className),
+		children: [
+			/* @__PURE__ */ jsxs(Sheet, { children: [
+				/* @__PURE__ */ jsx(SheetTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "icon",
+						"aria-label": "Open menu",
+						children: /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" })
+					})
+				}),
+				/* @__PURE__ */ jsx(SheetTitle, { children: "Menu" }),
+				/* @__PURE__ */ jsx(SheetContent, {
+					side: "left",
+					className: "w-[300px] p-0",
+					children: mobileSidebar ? /* @__PURE__ */ jsx(AppSidebar, {
+						sections: mobileSidebar.sections,
+						top: mobileSidebar.top,
+						bottom: mobileSidebar.bottom,
+						className: "h-svh"
+					}) : /* @__PURE__ */ jsx("div", {
+						className: "p-4",
+						children: "No sidebar configured"
+					})
+				})
+			] }),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex-1 px-2",
+				children: logo
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex items-center gap-2",
+				children: userMenu && /* @__PURE__ */ jsx(NavUser, { ...userMenu })
+			})
+		]
+	});
+}
+function Header(props) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MobileHeader, { ...props }), /* @__PURE__ */ jsx(DesktopHeader, { ...props })] });
+}
+
+//#endregion
+export { DesktopHeader, Header, MobileHeader };
+//# sourceMappingURL=Header.js.map

package/dist/components/organisms/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","names":[],"sources":["../../../src/components/organisms/Header.tsx"],"sourcesContent":["'use client';\nimport * as React from 'react';\nimport { cn } from '@lssm/lib.ui-kit-web/ui/utils';\nimport {\n  Sheet,\n  SheetContent,\n  SheetTitle,\n  SheetTrigger,\n} from '@lssm/lib.ui-kit-web/ui/sheet';\nimport { Separator } from '@lssm/lib.ui-kit-web/ui/separator';\nimport { Menu } from 'lucide-react';\nimport { cva } from 'class-variance-authority';\nimport type {\n  CtaAction,\n  HeaderNavItem,\n  NavSection,\n} from '../../types/navigation';\nimport { NavMain } from '../molecules/NavMain';\nimport { NavUser } from '../molecules/NavUser';\nimport { AppSidebar } from './AppSidebar';\nimport { ButtonLink } from '../atoms/ButtonLink';\nimport { Button } from '../atoms/Button';\n\nexport interface HeaderProps {\n  logo: React.ReactNode;\n  nav: HeaderNavItem[];\n  userMenu?: React.ComponentProps<typeof NavUser>;\n  cta?: CtaAction;\n  className?: string;\n  density?: 'compact' | 'comfortable';\n  mobileSidebar?: {\n    sections: NavSection[];\n    top?: React.ReactNode;\n    bottom?: React.ReactNode;\n  };\n}\n\nconst desktopHeaderVariants = cva(\n  'hidden items-center justify-between gap-4 md:flex',\n  {\n    variants: {\n      density: {\n        compact: 'px-3 py-1',\n        comfortable: 'px-4 py-2',\n      },\n    },\n    defaultVariants: { density: 'comfortable' },\n  }\n);\n\nconst mobileHeaderVariants = cva(\n  'flex items-center justify-between md:hidden',\n  {\n    variants: {\n      density: {\n        compact: 'px-2 py-1',\n        comfortable: 'px-3 py-2',\n      },\n    },\n    defaultVariants: { density: 'comfortable' },\n  }\n);\n\nexport function DesktopHeader({\n  logo,\n  nav,\n  userMenu,\n  cta,\n  className,\n  density,\n}: HeaderProps) {\n  return (\n    <header className={cn(desktopHeaderVariants({ density }), className)}>\n      <div className=\"flex items-center gap-4\">\n        {logo}\n        <Separator orientation=\"vertical\" className=\"h-6\" />\n        <NavMain items={nav} />\n      </div>\n      <div className=\"flex items-center gap-2\">\n        {cta && (\n          <ButtonLink variant={cta.variant} href={cta.href}>\n            {cta.label}\n          </ButtonLink>\n        )}\n        {userMenu && <NavUser {...userMenu} />}\n      </div>\n    </header>\n  );\n}\n\nexport function MobileHeader({\n  logo,\n  userMenu,\n  mobileSidebar,\n  className,\n  density,\n}: HeaderProps) {\n  return (\n    <header className={cn(mobileHeaderVariants({ density }), className)}>\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"ghost\" size=\"icon\" aria-label=\"Open menu\">\n            <Menu className=\"h-5 w-5\" />\n          </Button>\n        </SheetTrigger>\n        <SheetTitle>Menu</SheetTitle>\n        <SheetContent side=\"left\" className=\"w-[300px] p-0\">\n          {mobileSidebar ? (\n            <AppSidebar\n              sections={mobileSidebar.sections}\n              top={mobileSidebar.top}\n              bottom={mobileSidebar.bottom}\n              className=\"h-svh\"\n            />\n          ) : (\n            <div className=\"p-4\">No sidebar configured</div>\n          )}\n        </SheetContent>\n      </Sheet>\n      <div className=\"flex-1 px-2\">{logo}</div>\n      <div className=\"flex items-center gap-2\">\n        {userMenu && <NavUser {...userMenu} />}\n      </div>\n    </header>\n  );\n}\n\nexport function Header(props: HeaderProps) {\n  return (\n    <>\n      <MobileHeader {...props} />\n      <DesktopHeader {...props} />\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAqCA,MAAM,wBAAwB,IAC5B,qDACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,aAAa;EACd,EACF;CACD,iBAAiB,EAAE,SAAS,eAAe;CAC5C,CACF;AAED,MAAM,uBAAuB,IAC3B,+CACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,aAAa;EACd,EACF;CACD,iBAAiB,EAAE,SAAS,eAAe;CAC5C,CACF;AAED,SAAgB,cAAc,EAC5B,MACA,KACA,UACA,KACA,WACA,WACc;AACd,QACE,qBAAC;EAAO,WAAW,GAAG,sBAAsB,EAAE,SAAS,CAAC,EAAE,UAAU;aAClE,qBAAC;GAAI,WAAU;;IACZ;IACD,oBAAC;KAAU,aAAY;KAAW,WAAU;MAAQ;IACpD,oBAAC,WAAQ,OAAO,MAAO;;IACnB,EACN,qBAAC;GAAI,WAAU;cACZ,OACC,oBAAC;IAAW,SAAS,IAAI;IAAS,MAAM,IAAI;cACzC,IAAI;KACM,EAEd,YAAY,oBAAC,WAAQ,GAAI,WAAY;IAClC;GACC;;AAIb,SAAgB,aAAa,EAC3B,MACA,UACA,eACA,WACA,WACc;AACd,QACE,qBAAC;EAAO,WAAW,GAAG,qBAAqB,EAAE,SAAS,CAAC,EAAE,UAAU;;GACjE,qBAAC;IACC,oBAAC;KAAa;eACZ,oBAAC;MAAO,SAAQ;MAAQ,MAAK;MAAO,cAAW;gBAC7C,oBAAC,QAAK,WAAU,YAAY;OACrB;MACI;IACf,oBAAC,wBAAW,SAAiB;IAC7B,oBAAC;KAAa,MAAK;KAAO,WAAU;eACjC,gBACC,oBAAC;MACC,UAAU,cAAc;MACxB,KAAK,cAAc;MACnB,QAAQ,cAAc;MACtB,WAAU;OACV,GAEF,oBAAC;MAAI,WAAU;gBAAM;OAA2B;MAErC;OACT;GACR,oBAAC;IAAI,WAAU;cAAe;KAAW;GACzC,oBAAC;IAAI,WAAU;cACZ,YAAY,oBAAC,WAAQ,GAAI,WAAY;KAClC;;GACC;;AAIb,SAAgB,OAAO,OAAoB;AACzC,QACE,4CACE,oBAAC,gBAAa,GAAI,QAAS,EAC3B,oBAAC,iBAAc,GAAI,QAAS,IAC3B"}

package/dist/components/organisms/Header.mobile.d.ts

@@ -0,0 +1,25 @@
+import * as React$1 from "react";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
+
+//#region src/components/organisms/Header.mobile.d.ts
+interface HeaderProps {
+  logo: React$1.ReactNode;
+  nav: any[];
+  userMenu?: any;
+  cta?: any;
+  className?: string;
+  density?: 'compact' | 'comfortable';
+  mobileSidebar?: {
+    sections: any[];
+    top?: React$1.ReactNode;
+    bottom?: React$1.ReactNode;
+  };
+}
+declare function Header({
+  logo
+}: HeaderProps): react_jsx_runtime6.JSX.Element;
+declare const DesktopHeader: typeof Header;
+declare const MobileHeader: typeof Header;
+//#endregion
+export { DesktopHeader, Header, HeaderProps, MobileHeader };
+//# sourceMappingURL=Header.mobile.d.ts.map

package/dist/components/organisms/Header.mobile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.mobile.d.ts","names":[],"sources":["../../../src/components/organisms/Header.mobile.tsx"],"sourcesContent":[],"mappings":";;;;UAKiB,WAAA;QACT,OAAA,CAAM;;EADG,QAAA,CAAA,EAAA,GAAW;EACpB,GAAA,CAAA,EAAM,GAAA;EAQJ,SAAM,CAAA,EAAA,MAAA;EACH,OAAM,CAAA,EAAA,SAAA,GAAA,aAAA;EAAS,aAAA,CAAA,EAAA;IAIZ,QAAM,EAAA,GAAA,EAAA;IAAG,GAAA,CAAA,EALf,OAAA,CAAM,SAKS;IAAQ,MAAA,CAAA,EAJpB,OAAA,CAAM,SAIc;EAAW,CAAA;;AAI/B,iBAJG,MAAA,CAImB;EAAT;AAAS,CAAA,EAJF,WAIE,CAAA,EAJS,kBAAA,CAAA,GAAA,CAAA,OAIT;AACtB,cADA,aACY,EAAA,OADC,MACQ;cAArB,qBAAY"}

package/dist/components/organisms/Header.mobile.js

@@ -0,0 +1,20 @@
+'use client';
+
+
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { VStack } from "@lssm/lib.ui-kit/ui/stack";
+
+//#region src/components/organisms/Header.mobile.tsx
+function Header({ logo }) {
+	return /* @__PURE__ */ jsx(VStack, {
+		className: "px-3 py-2",
+		children: logo
+	});
+}
+const DesktopHeader = Header;
+const MobileHeader = Header;
+
+//#endregion
+export { DesktopHeader, Header, MobileHeader };
+//# sourceMappingURL=Header.mobile.js.map

package/dist/components/organisms/Header.mobile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.mobile.js","names":[],"sources":["../../../src/components/organisms/Header.mobile.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { VStack } from '@lssm/lib.ui-kit/ui/stack';\n\nexport interface HeaderProps {\n  logo: React.ReactNode;\n  nav: any[];\n  userMenu?: any;\n  cta?: any;\n  className?: string;\n  density?: 'compact' | 'comfortable';\n  mobileSidebar?: {\n    sections: any[];\n    top?: React.ReactNode;\n    bottom?: React.ReactNode;\n  };\n}\n\nexport function Header({ logo }: HeaderProps) {\n  return <VStack className=\"px-3 py-2\">{logo}</VStack>;\n}\n\nexport const DesktopHeader = Header;\nexport const MobileHeader = Header;\n"],"mappings":";;;;;;;;AAmBA,SAAgB,OAAO,EAAE,QAAqB;AAC5C,QAAO,oBAAC;EAAO,WAAU;YAAa;GAAc;;AAGtD,MAAa,gBAAgB;AAC7B,MAAa,eAAe"}

package/dist/components/organisms/HeroResponsive.d.ts

@@ -0,0 +1,15 @@
+import { HeroSection } from "./HeroSection.js";
+import * as React$1 from "react";
+import * as react_jsx_runtime10 from "react/jsx-runtime";
+
+//#region src/components/organisms/HeroResponsive.d.ts
+declare function HeroResponsive({
+  title,
+  subtitle,
+  primaryCta,
+  secondaryCta,
+  className
+}: React$1.ComponentProps<typeof HeroSection>): react_jsx_runtime10.JSX.Element;
+//#endregion
+export { HeroResponsive };
+//# sourceMappingURL=HeroResponsive.d.ts.map

package/dist/components/organisms/HeroResponsive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeroResponsive.d.ts","names":[],"sources":["../../../src/components/organisms/HeroResponsive.tsx"],"sourcesContent":[],"mappings":";;;;;iBAMgB,cAAA;;;;;;GAMb,OAAA,CAAM,sBAAsB,eAAY,mBAAA,CAAA,GAAA,CAAA"}

package/dist/components/organisms/HeroResponsive.js

@@ -0,0 +1,26 @@
+'use client';
+
+
+import { HeroSection } from "./HeroSection.js";
+import { useResponsive } from "../../platform/useResponsive.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/organisms/HeroResponsive.tsx
+function HeroResponsive({ title, subtitle, primaryCta, secondaryCta, className }) {
+	const { screen } = useResponsive();
+	return /* @__PURE__ */ jsx(HeroSection, {
+		title: /* @__PURE__ */ jsx("div", {
+			className: `${screen === "desktop" ? "text-5xl" : screen === "tablet" ? "text-4xl" : "text-3xl"}`,
+			children: title
+		}),
+		subtitle,
+		primaryCta,
+		secondaryCta,
+		className: [className, screen === "desktop" ? "gap-6" : screen === "tablet" ? "gap-4" : "gap-3"].filter(Boolean).join(" ")
+	});
+}
+
+//#endregion
+export { HeroResponsive };
+//# sourceMappingURL=HeroResponsive.js.map

package/dist/components/organisms/HeroResponsive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeroResponsive.js","names":[],"sources":["../../../src/components/organisms/HeroResponsive.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { HeroSection } from './HeroSection';\nimport { useResponsive } from '../../platform/useResponsive';\n\nexport function HeroResponsive({\n  title,\n  subtitle,\n  primaryCta,\n  secondaryCta,\n  className,\n}: React.ComponentProps<typeof HeroSection>) {\n  const { screen } = useResponsive();\n  const spacing =\n    screen === 'desktop' ? 'gap-6' : screen === 'tablet' ? 'gap-4' : 'gap-3';\n  const size =\n    screen === 'desktop'\n      ? 'text-5xl'\n      : screen === 'tablet'\n        ? 'text-4xl'\n        : 'text-3xl';\n  return (\n    <HeroSection\n      title={<div className={`${size}`}>{title}</div>}\n      subtitle={subtitle}\n      primaryCta={primaryCta}\n      secondaryCta={secondaryCta}\n      className={[className, spacing].filter(Boolean).join(' ')}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;AAMA,SAAgB,eAAe,EAC7B,OACA,UACA,YACA,cACA,aAC2C;CAC3C,MAAM,EAAE,WAAW,eAAe;AASlC,QACE,oBAAC;EACC,OAAO,oBAAC;GAAI,WAAW,GAPzB,WAAW,YACP,aACA,WAAW,WACT,aACA;aAG+B;IAAY;EACrC;EACE;EACE;EACd,WAAW,CAAC,WAbd,WAAW,YAAY,UAAU,WAAW,WAAW,UAAU,QAahC,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;GACzD"}

package/dist/components/organisms/HeroSection.d.ts

@@ -0,0 +1,30 @@
+import * as React$1 from "react";
+import * as react_jsx_runtime11 from "react/jsx-runtime";
+
+//#region src/components/organisms/HeroSection.d.ts
+declare function HeroSection({
+  title,
+  subtitle,
+  primaryCta,
+  secondaryCta,
+  className,
+  density
+}: {
+  title: React$1.ReactNode;
+  subtitle?: React$1.ReactNode;
+  primaryCta?: {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+  };
+  secondaryCta?: {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+  };
+  className?: string;
+  density?: 'compact' | 'comfortable';
+}): react_jsx_runtime11.JSX.Element;
+//#endregion
+export { HeroSection };
+//# sourceMappingURL=HeroSection.d.ts.map

package/dist/components/organisms/HeroSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeroSection.d.ts","names":[],"sources":["../../../src/components/organisms/HeroSection.tsx"],"sourcesContent":[],"mappings":";;;;iBAiBgB,WAAA;;;;;;;;SAQP,OAAA,CAAM;aACF,OAAA,CAAM;EATH,UAAA,CAAA,EAAA;IACd,KAAA,EAAA,MAAA;IACA,IAAA,CAAA,EAAA,MAAA;IACA,OAAA,CAAA,EAAA,GAAA,GAAA,IAAA;EACA,CAAA;EACA,YAAA,CAAA,EAAA;IACA,KAAA,EAAA,MAAA;IAEO,IAAM,CAAA,EAAA,MAAA;IACF,OAAM,CAAA,EAAA,GAAA,GAAA,IAAA;EAKlB,CAAA;EAAA,SAAA,CAAA,EAAA,MAAA;;IAAA,mBAAA,CAAA,GAAA,CAAA"}

package/dist/components/organisms/HeroSection.js

@@ -0,0 +1,31 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Hero } from "@lssm/lib.ui-kit-web/ui/marketing/Hero";
+
+//#region src/components/organisms/HeroSection.tsx
+const sectionVariants = cva("relative overflow-hidden bg-linear-to-b from-background to-muted/20", {
+	variants: { density: {
+		compact: "py-12",
+		comfortable: "py-16 sm:py-24 lg:py-32"
+	} },
+	defaultVariants: { density: "comfortable" }
+});
+function HeroSection({ title, subtitle, primaryCta, secondaryCta, className, density }) {
+	return /* @__PURE__ */ jsx("section", {
+		className: [sectionVariants({ density }), className].filter(Boolean).join(" "),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "container mx-auto px-4 sm:px-6 lg:px-8",
+			children: /* @__PURE__ */ jsx(Hero, {
+				title,
+				subtitle,
+				primaryCta,
+				secondaryCta
+			})
+		})
+	});
+}
+
+//#endregion
+export { HeroSection };
+//# sourceMappingURL=HeroSection.js.map

package/dist/components/organisms/HeroSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeroSection.js","names":[],"sources":["../../../src/components/organisms/HeroSection.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Hero } from '@lssm/lib.ui-kit-web/ui/marketing/Hero';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nconst sectionVariants = cva(\n  'relative overflow-hidden bg-linear-to-b from-background to-muted/20',\n  {\n    variants: {\n      density: {\n        compact: 'py-12',\n        comfortable: 'py-16 sm:py-24 lg:py-32',\n      },\n    },\n    defaultVariants: { density: 'comfortable' },\n  }\n);\n\nexport function HeroSection({\n  title,\n  subtitle,\n  primaryCta,\n  secondaryCta,\n  className,\n  density,\n}: {\n  title: React.ReactNode;\n  subtitle?: React.ReactNode;\n  primaryCta?: { label: string; href?: string; onClick?: () => void };\n  secondaryCta?: { label: string; href?: string; onClick?: () => void };\n  className?: string;\n  density?: 'compact' | 'comfortable';\n}) {\n  return (\n    <section\n      className={[sectionVariants({ density }), className]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className=\"container mx-auto px-4 sm:px-6 lg:px-8\">\n        <Hero\n          title={title}\n          subtitle={subtitle}\n          primaryCta={primaryCta}\n          secondaryCta={secondaryCta}\n        />\n      </div>\n    </section>\n  );\n}\n"],"mappings":";;;;;;AAIA,MAAM,kBAAkB,IACtB,uEACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,aAAa;EACd,EACF;CACD,iBAAiB,EAAE,SAAS,eAAe;CAC5C,CACF;AAED,SAAgB,YAAY,EAC1B,OACA,UACA,YACA,cACA,WACA,WAQC;AACD,QACE,oBAAC;EACC,WAAW,CAAC,gBAAgB,EAAE,SAAS,CAAC,EAAE,UAAU,CACjD,OAAO,QAAQ,CACf,KAAK,IAAI;YAEZ,oBAAC;GAAI,WAAU;aACb,oBAAC;IACQ;IACG;IACE;IACE;KACd;IACE;GACE"}

package/dist/components/organisms/ListCardPage.d.ts

@@ -0,0 +1,37 @@
+import * as React$1 from "react";
+import * as react_jsx_runtime12 from "react/jsx-runtime";
+import { VariantProps } from "class-variance-authority";
+import * as class_variance_authority_types1 from "class-variance-authority/types";
+
+//#region src/components/organisms/ListCardPage.d.ts
+declare const containerVariants: (props?: ({
+  density?: "compact" | "comfortable" | null | undefined;
+} & class_variance_authority_types1.ClassProp) | undefined) => string;
+declare const gridVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types1.ClassProp) | undefined) => string;
+interface ListCardPageProps<T> extends VariantProps<typeof containerVariants>, VariantProps<typeof gridVariants> {
+  title: React$1.ReactNode;
+  subtitle?: React$1.ReactNode;
+  items: T[];
+  renderCard: (item: T, index: number) => React$1.ReactNode;
+  className?: string;
+  columns?: {
+    mobile?: number;
+    tablet?: number;
+    desktop?: number;
+  };
+}
+declare function ListCardPage<T>({
+  title,
+  subtitle,
+  items,
+  renderCard,
+  className,
+  columns,
+  density,
+  size
+}: ListCardPageProps<T>): react_jsx_runtime12.JSX.Element;
+//#endregion
+export { ListCardPage, ListCardPageProps };
+//# sourceMappingURL=ListCardPage.d.ts.map

package/dist/components/organisms/ListCardPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListCardPage.d.ts","names":[],"sources":["../../../src/components/organisms/ListCardPage.tsx"],"sourcesContent":[],"mappings":";;;;;;cAQM;;IAUJ,+BAAA,CAAA;cAEI,oBAWJ;EAvBI,IAAA,CAAA,EAAA,IAAA,GAAA,IAAA,GAUJ,IAAA,GAAA,IAAA,GAAA,SAAA;IAaA,+BAAA,CAAA,SAAA,CAAA,GAAA,SAAA,EAAA,GAAA,MAAA;AAEe,UAAA,iBAAiB,CAAA,CAAA,CAAA,SACxB,YADwB,CAAA,OACJ,iBADI,CAAA,EAE9B,YAF8B,CAAA,OAEV,YAFU,CAAA,CAAA;EACJ,KAAA,EAErB,OAAA,CAAM,SAFe;EACN,QAAA,CAAA,EAEX,OAAA,CAAM,SAFK;EACf,KAAM,EAEN,CAFM,EAAA;EACF,UAAM,EAAA,CAAA,IAAA,EAEE,CAFF,EAAA,KAAA,EAAA,MAAA,EAAA,GAEuB,OAAA,CAAM,SAF7B;EACV,SAAA,CAAA,EAAA,MAAA;EACY,OAAA,CAAA,EAAA;IAAqB,MAAM,CAAA,EAAA,MAAA;IALtC,MAAA,CAAA,EAAA,MAAA;IACN,OAAA,CAAA,EAAA,MAAA;EAAY,CAAA;AAShB;AACE,iBADc,YACd,CAAA,CAAA,CAAA,CAAA;EAAA,KAAA;EAAA,QAAA;EAAA,KAAA;EAAA,UAAA;EAAA,SAAA;EAAA,OAAA;EAAA,OAAA;EAAA;AAAA,CAAA,EAQC,iBARD,CAQmB,CARnB,CAAA,CAAA,EAQqB,mBAAA,CAAA,GAAA,CAAA,OARrB"}

package/dist/components/organisms/ListCardPage.js

@@ -0,0 +1,57 @@
+'use client';
+
+
+import { useResponsive } from "../../platform/useResponsive.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { VStack } from "@lssm/lib.ui-kit-web/ui/stack";
+import { Card, CardContent } from "@lssm/lib.ui-kit-web/ui/card";
+
+//#region src/components/organisms/ListCardPage.tsx
+const containerVariants = cva("", {
+	variants: { density: {
+		compact: "gap-3",
+		comfortable: "gap-4 md:gap-5"
+	} },
+	defaultVariants: { density: "comfortable" }
+});
+const gridVariants = cva("grid", {
+	variants: { size: {
+		sm: "gap-3",
+		md: "gap-4",
+		lg: "gap-6"
+	} },
+	defaultVariants: { size: "md" }
+});
+function ListCardPage({ title, subtitle, items, renderCard, className, columns, density, size }) {
+	const { screen } = useResponsive();
+	const cols = screen === "desktop" ? columns?.desktop ?? 3 : screen === "tablet" ? columns?.tablet ?? 2 : columns?.mobile ?? 1;
+	const presetColsClass = cols === 1 ? "grid-cols-1" : cols === 2 ? "grid-cols-2" : cols === 3 ? "grid-cols-3" : cols === 4 ? "grid-cols-4" : "grid-cols-3";
+	return /* @__PURE__ */ jsxs(VStack, {
+		className: [containerVariants({ density }), className].filter(Boolean).join(" "),
+		children: [/* @__PURE__ */ jsxs(VStack, {
+			className: "gap-1",
+			children: [/* @__PURE__ */ jsx("h1", {
+				className: "text-2xl font-bold md:text-3xl",
+				children: title
+			}), subtitle ? /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground text-base",
+				children: subtitle
+			}) : null]
+		}), /* @__PURE__ */ jsx("div", {
+			className: [gridVariants({ size }), presetColsClass].join(" "),
+			children: items.map((item, index) => /* @__PURE__ */ jsx(Card, {
+				className: "border-none shadow-2xs",
+				children: /* @__PURE__ */ jsx(CardContent, {
+					className: "p-4 md:p-5 lg:p-6",
+					children: renderCard(item, index)
+				})
+			}, index))
+		})]
+	});
+}
+
+//#endregion
+export { ListCardPage };
+//# sourceMappingURL=ListCardPage.js.map

package/dist/components/organisms/ListCardPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListCardPage.js","names":[],"sources":["../../../src/components/organisms/ListCardPage.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { VStack } from '@lssm/lib.ui-kit-web/ui/stack';\nimport { Card, CardContent } from '@lssm/lib.ui-kit-web/ui/card';\nimport { useResponsive } from '../../platform/useResponsive';\n\nconst containerVariants = cva('', {\n  variants: {\n    density: {\n      compact: 'gap-3',\n      comfortable: 'gap-4 md:gap-5',\n    },\n  },\n  defaultVariants: {\n    density: 'comfortable',\n  },\n});\n\nconst gridVariants = cva('grid', {\n  variants: {\n    size: {\n      sm: 'gap-3',\n      md: 'gap-4',\n      lg: 'gap-6',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\nexport interface ListCardPageProps<T>\n  extends VariantProps<typeof containerVariants>,\n    VariantProps<typeof gridVariants> {\n  title: React.ReactNode;\n  subtitle?: React.ReactNode;\n  items: T[];\n  renderCard: (item: T, index: number) => React.ReactNode;\n  className?: string;\n  columns?: { mobile?: number; tablet?: number; desktop?: number };\n}\n\nexport function ListCardPage<T>({\n  title,\n  subtitle,\n  items,\n  renderCard,\n  className,\n  columns,\n  density,\n  size,\n}: ListCardPageProps<T>) {\n  const { screen } = useResponsive();\n  const cols =\n    screen === 'desktop'\n      ? (columns?.desktop ?? 3)\n      : screen === 'tablet'\n        ? (columns?.tablet ?? 2)\n        : (columns?.mobile ?? 1);\n  const presetColsClass =\n    cols === 1\n      ? 'grid-cols-1'\n      : cols === 2\n        ? 'grid-cols-2'\n        : cols === 3\n          ? 'grid-cols-3'\n          : cols === 4\n            ? 'grid-cols-4'\n            : 'grid-cols-3';\n  return (\n    <VStack\n      className={[containerVariants({ density }), className]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <VStack className=\"gap-1\">\n        <h1 className=\"text-2xl font-bold md:text-3xl\">{title}</h1>\n        {subtitle ? (\n          <p className=\"text-muted-foreground text-base\">{subtitle}</p>\n        ) : null}\n      </VStack>\n      <div className={[gridVariants({ size }), presetColsClass].join(' ')}>\n        {items.map((item, index) => (\n          <Card key={index} className=\"border-none shadow-2xs\">\n            <CardContent className=\"p-4 md:p-5 lg:p-6\">\n              {renderCard(item, index)}\n            </CardContent>\n          </Card>\n        ))}\n      </div>\n    </VStack>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAQA,MAAM,oBAAoB,IAAI,IAAI;CAChC,UAAU,EACR,SAAS;EACP,SAAS;EACT,aAAa;EACd,EACF;CACD,iBAAiB,EACf,SAAS,eACV;CACF,CAAC;AAEF,MAAM,eAAe,IAAI,QAAQ;CAC/B,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,EACF;CACD,iBAAiB,EACf,MAAM,MACP;CACF,CAAC;AAaF,SAAgB,aAAgB,EAC9B,OACA,UACA,OACA,YACA,WACA,SACA,SACA,QACuB;CACvB,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,OACJ,WAAW,YACN,SAAS,WAAW,IACrB,WAAW,WACR,SAAS,UAAU,IACnB,SAAS,UAAU;CAC5B,MAAM,kBACJ,SAAS,IACL,gBACA,SAAS,IACP,gBACA,SAAS,IACP,gBACA,SAAS,IACP,gBACA;AACZ,QACE,qBAAC;EACC,WAAW,CAAC,kBAAkB,EAAE,SAAS,CAAC,EAAE,UAAU,CACnD,OAAO,QAAQ,CACf,KAAK,IAAI;aAEZ,qBAAC;GAAO,WAAU;cAChB,oBAAC;IAAG,WAAU;cAAkC;KAAW,EAC1D,WACC,oBAAC;IAAE,WAAU;cAAmC;KAAa,GAC3D;IACG,EACT,oBAAC;GAAI,WAAW,CAAC,aAAa,EAAE,MAAM,CAAC,EAAE,gBAAgB,CAAC,KAAK,IAAI;aAChE,MAAM,KAAK,MAAM,UAChB,oBAAC;IAAiB,WAAU;cAC1B,oBAAC;KAAY,WAAU;eACpB,WAAW,MAAM,MAAM;MACZ;MAHL,MAIJ,CACP;IACE;GACC"}

package/dist/components/organisms/ListGridPage.d.ts

@@ -0,0 +1,37 @@
+import * as React$1 from "react";
+import * as react_jsx_runtime13 from "react/jsx-runtime";
+import { VariantProps } from "class-variance-authority";
+import * as class_variance_authority_types3 from "class-variance-authority/types";
+
+//#region src/components/organisms/ListGridPage.d.ts
+declare const containerVariants: (props?: ({
+  density?: "compact" | "comfortable" | null | undefined;
+} & class_variance_authority_types3.ClassProp) | undefined) => string;
+declare const gridGapVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types3.ClassProp) | undefined) => string;
+interface ListGridPageProps<T> extends VariantProps<typeof containerVariants>, VariantProps<typeof gridGapVariants> {
+  title: React$1.ReactNode;
+  subtitle?: React$1.ReactNode;
+  items: T[];
+  renderItem: (item: T, index: number) => React$1.ReactNode;
+  className?: string;
+  columns?: {
+    mobile?: number;
+    tablet?: number;
+    desktop?: number;
+  };
+}
+declare function ListGridPage<T>({
+  title,
+  subtitle,
+  items,
+  renderItem,
+  className,
+  columns,
+  density,
+  size
+}: ListGridPageProps<T>): react_jsx_runtime13.JSX.Element;
+//#endregion
+export { ListGridPage, ListGridPageProps };
+//# sourceMappingURL=ListGridPage.d.ts.map

package/dist/components/organisms/ListGridPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListGridPage.d.ts","names":[],"sources":["../../../src/components/organisms/ListGridPage.tsx"],"sourcesContent":[],"mappings":";;;;;;cAOM;;IAUJ,+BAAA,CAAA;cAEI,uBAWJ;EAvBI,IAAA,CAAA,EAAA,IAAA,GAAA,IAAA,GAUJ,IAAA,GAAA,IAAA,GAAA,SAAA;IAaA,+BAAA,CAAA,SAAA,CAAA,GAAA,SAAA,EAAA,GAAA,MAAA;AAEe,UAAA,iBAAiB,CAAA,CAAA,CAAA,SACxB,YADwB,CAAA,OACJ,iBADI,CAAA,EAE9B,YAF8B,CAAA,OAEV,eAFU,CAAA,CAAA;EACJ,KAAA,EAErB,OAAA,CAAM,SAFe;EACN,QAAA,CAAA,EAEX,OAAA,CAAM,SAFK;EACf,KAAM,EAEN,CAFM,EAAA;EACF,UAAM,EAAA,CAAA,IAAA,EAEE,CAFF,EAAA,KAAA,EAAA,MAAA,EAAA,GAEuB,OAAA,CAAM,SAF7B;EACV,SAAA,CAAA,EAAA,MAAA;EACY,OAAA,CAAA,EAAA;IAAqB,MAAM,CAAA,EAAA,MAAA;IALtC,MAAA,CAAA,EAAA,MAAA;IACN,OAAA,CAAA,EAAA,MAAA;EAAY,CAAA;AAShB;AACE,iBADc,YACd,CAAA,CAAA,CAAA,CAAA;EAAA,KAAA;EAAA,QAAA;EAAA,KAAA;EAAA,UAAA;EAAA,SAAA;EAAA,OAAA;EAAA,OAAA;EAAA;AAAA,CAAA,EAQC,iBARD,CAQmB,CARnB,CAAA,CAAA,EAQqB,mBAAA,CAAA,GAAA,CAAA,OARrB"}

package/dist/components/organisms/ListGridPage.js

@@ -0,0 +1,52 @@
+'use client';
+
+
+import { useResponsive } from "../../platform/useResponsive.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { VStack } from "@lssm/lib.ui-kit-web/ui/stack";
+
+//#region src/components/organisms/ListGridPage.tsx
+const containerVariants = cva("", {
+	variants: { density: {
+		compact: "gap-3",
+		comfortable: "gap-4 md:gap-5 lg:gap-6"
+	} },
+	defaultVariants: { density: "comfortable" }
+});
+const gridGapVariants = cva("", {
+	variants: { size: {
+		sm: "gap-3",
+		md: "gap-4",
+		lg: "gap-6"
+	} },
+	defaultVariants: { size: "md" }
+});
+function ListGridPage({ title, subtitle, items, renderItem, className, columns, density, size }) {
+	const { screen } = useResponsive();
+	const cols = screen === "desktop" ? columns?.desktop ?? 3 : screen === "tablet" ? columns?.tablet ?? 2 : columns?.mobile ?? 1;
+	const gridClass = `grid ${gridGapVariants({ size })}`;
+	`${cols}`;
+	const presetColsClass = cols === 1 ? "grid-cols-1" : cols === 2 ? "grid-cols-2" : cols === 3 ? "grid-cols-3" : cols === 4 ? "grid-cols-4" : "grid-cols-3";
+	return /* @__PURE__ */ jsxs(VStack, {
+		className: [containerVariants({ density }), className].filter(Boolean).join(" "),
+		children: [/* @__PURE__ */ jsxs(VStack, {
+			className: "gap-1",
+			children: [/* @__PURE__ */ jsx("h1", {
+				className: "text-2xl font-bold md:text-3xl",
+				children: title
+			}), subtitle ? /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground text-base",
+				children: subtitle
+			}) : null]
+		}), /* @__PURE__ */ jsx("div", {
+			className: `${gridClass} ${presetColsClass}`,
+			children: items.map((item, idx) => /* @__PURE__ */ jsx("div", { children: renderItem(item, idx) }, idx))
+		})]
+	});
+}
+
+//#endregion
+export { ListGridPage };
+//# sourceMappingURL=ListGridPage.js.map

package/dist/components/organisms/ListGridPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListGridPage.js","names":[],"sources":["../../../src/components/organisms/ListGridPage.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { VStack } from '@lssm/lib.ui-kit-web/ui/stack';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useResponsive } from '../../platform/useResponsive';\n\nconst containerVariants = cva('', {\n  variants: {\n    density: {\n      compact: 'gap-3',\n      comfortable: 'gap-4 md:gap-5 lg:gap-6',\n    },\n  },\n  defaultVariants: {\n    density: 'comfortable',\n  },\n});\n\nconst gridGapVariants = cva('', {\n  variants: {\n    size: {\n      sm: 'gap-3',\n      md: 'gap-4',\n      lg: 'gap-6',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\nexport interface ListGridPageProps<T>\n  extends VariantProps<typeof containerVariants>,\n    VariantProps<typeof gridGapVariants> {\n  title: React.ReactNode;\n  subtitle?: React.ReactNode;\n  items: T[];\n  renderItem: (item: T, index: number) => React.ReactNode;\n  className?: string;\n  columns?: { mobile?: number; tablet?: number; desktop?: number };\n}\n\nexport function ListGridPage<T>({\n  title,\n  subtitle,\n  items,\n  renderItem,\n  className,\n  columns,\n  density,\n  size,\n}: ListGridPageProps<T>) {\n  const { screen } = useResponsive();\n  const cols =\n    screen === 'desktop'\n      ? (columns?.desktop ?? 3)\n      : screen === 'tablet'\n        ? (columns?.tablet ?? 2)\n        : (columns?.mobile ?? 1);\n  const gridClass = `grid ${gridGapVariants({ size })}`;\n  const colsClass = `grid-cols-${cols}`;\n  // Tailwind can't generate dynamic classes reliably; provide common presets\n  const presetColsClass =\n    cols === 1\n      ? 'grid-cols-1'\n      : cols === 2\n        ? 'grid-cols-2'\n        : cols === 3\n          ? 'grid-cols-3'\n          : cols === 4\n            ? 'grid-cols-4'\n            : 'grid-cols-3';\n\n  return (\n    <VStack\n      className={[containerVariants({ density }), className]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <VStack className=\"gap-1\">\n        <h1 className=\"text-2xl font-bold md:text-3xl\">{title}</h1>\n        {subtitle ? (\n          <p className=\"text-muted-foreground text-base\">{subtitle}</p>\n        ) : null}\n      </VStack>\n      <div className={`${gridClass} ${presetColsClass}`}>\n        {items.map((item, idx) => (\n          <div key={idx}>{renderItem(item, idx)}</div>\n        ))}\n      </div>\n    </VStack>\n  );\n}\n"],"mappings":";;;;;;;;;;AAOA,MAAM,oBAAoB,IAAI,IAAI;CAChC,UAAU,EACR,SAAS;EACP,SAAS;EACT,aAAa;EACd,EACF;CACD,iBAAiB,EACf,SAAS,eACV;CACF,CAAC;AAEF,MAAM,kBAAkB,IAAI,IAAI;CAC9B,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,EACF;CACD,iBAAiB,EACf,MAAM,MACP;CACF,CAAC;AAaF,SAAgB,aAAgB,EAC9B,OACA,UACA,OACA,YACA,WACA,SACA,SACA,QACuB;CACvB,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,OACJ,WAAW,YACN,SAAS,WAAW,IACrB,WAAW,WACR,SAAS,UAAU,IACnB,SAAS,UAAU;CAC5B,MAAM,YAAY,QAAQ,gBAAgB,EAAE,MAAM,CAAC;AACjC,IAAa,KAAb;CAElB,MAAM,kBACJ,SAAS,IACL,gBACA,SAAS,IACP,gBACA,SAAS,IACP,gBACA,SAAS,IACP,gBACA;AAEZ,QACE,qBAAC;EACC,WAAW,CAAC,kBAAkB,EAAE,SAAS,CAAC,EAAE,UAAU,CACnD,OAAO,QAAQ,CACf,KAAK,IAAI;aAEZ,qBAAC;GAAO,WAAU;cAChB,oBAAC;IAAG,WAAU;cAAkC;KAAW,EAC1D,WACC,oBAAC;IAAE,WAAU;cAAmC;KAAa,GAC3D;IACG,EACT,oBAAC;GAAI,WAAW,GAAG,UAAU,GAAG;aAC7B,MAAM,KAAK,MAAM,QAChB,oBAAC,mBAAe,WAAW,MAAM,IAAI,IAA3B,IAAkC,CAC5C;IACE;GACC"}

package/dist/components/organisms/ListPageResponsive.d.ts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime14 from "react/jsx-runtime";
+import { ListPageProps } from "@lssm/lib.ui-kit-web/ui/organisms/ListPage/types";
+
+//#region src/components/organisms/ListPageResponsive.d.ts
+declare function ListPageResponsive<T>(props: ListPageProps<T>): react_jsx_runtime14.JSX.Element;
+//#endregion
+export { ListPageResponsive };
+//# sourceMappingURL=ListPageResponsive.d.ts.map

package/dist/components/organisms/ListPageResponsive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListPageResponsive.d.ts","names":[],"sources":["../../../src/components/organisms/ListPageResponsive.tsx"],"sourcesContent":[],"mappings":";;;;iBAOgB,6BAA6B,cAAc,KAAE,mBAAA,CAAA,GAAA,CAAA"}

package/dist/components/organisms/ListPageResponsive.js

@@ -0,0 +1,21 @@
+'use client';
+
+
+import { useResponsive } from "../../platform/useResponsive.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { ListPage } from "@lssm/lib.ui-kit-web/ui/organisms/ListPage";
+
+//#region src/components/organisms/ListPageResponsive.tsx
+function ListPageResponsive(props) {
+	const { screen } = useResponsive();
+	const className = [props.className, screen === "desktop" ? "space-y-6" : screen === "tablet" ? "space-y-5" : "space-y-4"].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(ListPage, {
+		...props,
+		className
+	});
+}
+
+//#endregion
+export { ListPageResponsive };
+//# sourceMappingURL=ListPageResponsive.js.map

package/dist/components/organisms/ListPageResponsive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListPageResponsive.js","names":[],"sources":["../../../src/components/organisms/ListPageResponsive.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useResponsive } from '../../platform/useResponsive';\nimport { ListPage } from '@lssm/lib.ui-kit-web/ui/organisms/ListPage';\nimport type { ListPageProps } from '@lssm/lib.ui-kit-web/ui/organisms/ListPage/types';\n\nexport function ListPageResponsive<T>(props: ListPageProps<T>) {\n  const { screen } = useResponsive();\n  const className = [\n    props.className,\n    screen === 'desktop'\n      ? 'space-y-6'\n      : screen === 'tablet'\n        ? 'space-y-5'\n        : 'space-y-4',\n  ]\n    .filter(Boolean)\n    .join(' ');\n  return <ListPage {...props} className={className} />;\n}\n"],"mappings":";;;;;;;;;AAOA,SAAgB,mBAAsB,OAAyB;CAC7D,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,YAAY,CAChB,MAAM,WACN,WAAW,YACP,cACA,WAAW,WACT,cACA,YACP,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;AACZ,QAAO,oBAAC;EAAS,GAAI;EAAkB;GAAa"}

package/dist/components/organisms/ListTablePage.d.ts

@@ -0,0 +1,34 @@
+import * as React$1 from "react";
+import * as react_jsx_runtime15 from "react/jsx-runtime";
+import { VariantProps } from "class-variance-authority";
+import * as class_variance_authority_types5 from "class-variance-authority/types";
+
+//#region src/components/organisms/ListTablePage.d.ts
+interface TableColumn<T> {
+  header: React$1.ReactNode;
+  cell: (item: T, index: number) => React$1.ReactNode;
+  className?: string;
+}
+declare const containerVariants: (props?: ({
+  density?: "compact" | "comfortable" | null | undefined;
+} & class_variance_authority_types5.ClassProp) | undefined) => string;
+interface ListTablePageProps<T> extends VariantProps<typeof containerVariants> {
+  title: React$1.ReactNode;
+  subtitle?: React$1.ReactNode;
+  items: T[];
+  columns: TableColumn<T>[];
+  className?: string;
+  renderActions?: (item: T, index: number) => React$1.ReactNode;
+}
+declare function ListTablePage<T>({
+  title,
+  subtitle,
+  items,
+  columns,
+  className,
+  density,
+  renderActions
+}: ListTablePageProps<T>): react_jsx_runtime15.JSX.Element;
+//#endregion
+export { ListTablePage, ListTablePageProps, TableColumn };
+//# sourceMappingURL=ListTablePage.d.ts.map

package/dist/components/organisms/ListTablePage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListTablePage.d.ts","names":[],"sources":["../../../src/components/organisms/ListTablePage.tsx"],"sourcesContent":[],"mappings":";;;;;;UAeiB;UACP,OAAA,CAAM;eACD,qBAAqB,OAAA,CAAM;;AAF1C;cAMM,iBALU,EAAA,CAAA,KAC0B,CAD1B,EAAA,CAAA;EACD,OAAA,CAAA,EAAA,SAAA,GAAA,aAAA,GAAA,IAAA,GAAA,SAAA;CAAqB,GAclC,+BAAA,CAAA,SAdwC,CAAA,GAAA,SAAA,EAAA,GAAA,MAAA;AAAS,UAgBlC,kBAhBkC,CAAA,CAAA,CAAA,SAiBzC,YAjByC,CAAA,OAiBrB,iBAjBqB,CAAA,CAAA;EAI7C,KAAA,EAcG,OAAA,CAAM,SAJb;EAEe,QAAA,CAAA,EAGJ,OAAA,CAAM,SAHgB;EACL,KAAA,EAGrB,CAHqB,EAAA;EACrB,OAAM,EAGJ,WAHI,CAGQ,CAHR,CAAA,EAAA;EACF,SAAM,CAAA,EAAA,MAAA;EACV,aAAA,CAAA,EAAA,CAAA,IAAA,EAGgB,CAHhB,EAAA,KAAA,EAAA,MAAA,EAAA,GAGqC,OAAA,CAAM,SAH3C;;AACE,iBAKK,aALL,CAAA,CAAA,CAAA,CAAA;EAAA,KAAA;EAAA,QAAA;EAAA,KAAA;EAAA,OAAA;EAAA,SAAA;EAAA,OAAA;EAAA;AAAA,CAAA,EAaR,kBAbQ,CAaW,CAbX,CAAA,CAAA,EAaa,mBAAA,CAAA,GAAA,CAAA,OAbb"}

package/dist/components/organisms/ListTablePage.js

@@ -0,0 +1,48 @@
+'use client';
+
+
+import { useResponsive } from "../../platform/useResponsive.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { VStack } from "@lssm/lib.ui-kit-web/ui/stack";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@lssm/lib.ui-kit-web/ui/table";
+
+//#region src/components/organisms/ListTablePage.tsx
+const containerVariants = cva("", {
+	variants: { density: {
+		compact: "gap-3",
+		comfortable: "gap-4 md:gap-5"
+	} },
+	defaultVariants: { density: "comfortable" }
+});
+function ListTablePage({ title, subtitle, items, columns, className, density, renderActions }) {
+	const { screen } = useResponsive();
+	const titleSize = screen === "desktop" ? "text-3xl" : "text-2xl";
+	return /* @__PURE__ */ jsxs(VStack, {
+		className: [containerVariants({ density }), className].filter(Boolean).join(" "),
+		children: [/* @__PURE__ */ jsxs(VStack, {
+			className: "gap-1",
+			children: [/* @__PURE__ */ jsx("h1", {
+				className: `${titleSize} font-bold`,
+				children: title
+			}), subtitle ? /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground text-base",
+				children: subtitle
+			}) : null]
+		}), /* @__PURE__ */ jsxs(Table, { children: [/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [columns.map((col, i) => /* @__PURE__ */ jsx(TableHead, {
+			className: col.className,
+			children: col.header
+		}, i)), renderActions ? /* @__PURE__ */ jsx(TableHead, {}) : null] }) }), /* @__PURE__ */ jsx(TableBody, { children: items.map((item, rowIdx) => /* @__PURE__ */ jsxs(TableRow, { children: [columns.map((col, colIdx) => /* @__PURE__ */ jsx(TableCell, {
+			className: col.className,
+			children: col.cell(item, rowIdx)
+		}, colIdx)), renderActions ? /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx("div", {
+			className: "flex items-center justify-end gap-2",
+			children: renderActions(item, rowIdx)
+		}) }) : null] }, rowIdx)) })] })]
+	});
+}
+
+//#endregion
+export { ListTablePage };
+//# sourceMappingURL=ListTablePage.js.map