@lssm/lib.design-system 1.11.1 → 1.41.1

package/README.md

@@ -72,7 +72,7 @@ export default function Layout({ children }) {
 
 ```tsx
 import { ZodForm } from '@lssm/lib.design-system/components/forms/ZodForm';
-import { z } from 'zod';
+import * as z from "zod";
 
 const schema = z.object({
   name: z.string().min(1),
@@ -104,6 +104,11 @@ export function SignupForm() {
 
 
 
+
+
+
+
+
 
 
 

package/dist/_virtual/rolldown_runtime.js

@@ -1,11 +1,12 @@
 //#region rolldown:runtime
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __esm = (fn, res) => function() {
-	return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
-};
+var __esmMin = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __commonJSMin = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
 var __export = (all, symbols) => {
 	let target = {};
 	for (var name in all) {
@@ -33,6 +34,10 @@ var __copyProps = (to, from, except, desc) => {
 	}
 	return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
 var __toCommonJS = (mod) => __hasOwnProp.call(mod, "module.exports") ? mod["module.exports"] : __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, { get: (a, b) => (typeof require !== "undefined" ? require : a)[b] }) : x)(function(x) {
 	if (typeof require !== "undefined") return require.apply(this, arguments);
@@ -40,4 +45,4 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 });
 
 //#endregion
-export { __esm, __export, __require, __toCommonJS };
+export { __commonJSMin, __esmMin, __export, __require, __toCommonJS, __toESM };

package/dist/components/agent/ApprovalQueue.js

@@ -37,7 +37,7 @@ function ApprovalQueue({ title = "Approvals", description = "Requests escalated
 		] }) }), /* @__PURE__ */ jsx(TableBody, { children: requests.map((request) => /* @__PURE__ */ jsxs(TableRow, { children: [
 			/* @__PURE__ */ jsx(TableCell, {
 				className: "font-medium",
-				children: request.agent
+				children: request.agentId
 			}),
 			/* @__PURE__ */ jsx(TableCell, {
 				className: "max-w-sm truncate",

package/dist/components/atoms/Button.js

@@ -1,17 +1,17 @@
 import "react";
-import { Button as Button$1 } from "@lssm/lib.ui-kit-web/ui/button";
+import { Button } from "@lssm/lib.ui-kit-web/ui/button";
 import { Loader2 } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/atoms/Button.tsx
-function Button({ children, loading, spinnerPlacement = "start", onPress, onPressIn, onPressOut, onLongPress, onTouchStart, onTouchEnd, onTouchCancel, onMouseDown, onMouseUp, onClick, className, disabled, ...rest }) {
+function Button$1({ children, loading, spinnerPlacement = "start", onPress, onPressIn, onPressOut, onLongPress, onTouchStart, onTouchEnd, onTouchCancel, onMouseDown, onMouseUp, onClick, className, disabled, ...rest }) {
 	const isDisabled = Boolean(disabled || loading);
 	const content = !rest.asChild ? /* @__PURE__ */ jsxs(Fragment, { children: [
 		loading && spinnerPlacement === "start" ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : null,
 		children,
 		loading && spinnerPlacement === "end" ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : null
 	] }) : children;
-	return /* @__PURE__ */ jsx(Button$1, {
+	return /* @__PURE__ */ jsx(Button, {
 		...rest,
 		className,
 		disabled: isDisabled,
@@ -28,7 +28,6 @@ function Button({ children, loading, spinnerPlacement = "start", onPress, onPres
 		children: content
 	});
 }
-var Button_default = Button;
 
 //#endregion
-export { Button, Button_default as default };
+export { Button$1 as Button };

package/dist/components/atoms/ButtonLink.js

@@ -2,13 +2,13 @@
 
 import { Button } from "./Button.js";
 import { Link } from "./Link.web.js";
-import * as React$1 from "react";
+import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/atoms/ButtonLink.tsx
 function ButtonLink({ href, target, rel, replace, loading, disabled, children, onClick, ...btn }) {
 	const blocked = Boolean(disabled || loading);
-	const handleClick = React$1.useCallback((e) => {
+	const handleClick = React.useCallback((e) => {
 		if (blocked) {
 			e.preventDefault();
 			e.stopPropagation();

package/dist/components/atoms/Cta.js

@@ -1,6 +1,6 @@
 import { Button } from "./Button.js";
 import { ButtonLink } from "./ButtonLink.js";
-import * as React$1 from "react";
+import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 
@@ -24,7 +24,7 @@ cva("", {
 		emphasis: "default"
 	}
 });
-const Cta = React$1.forwardRef(({ capture, ctaName, as = "button", href, onClick, size = "touch", emphasis = "default", children, ...props }, ref) => {
+const Cta = React.forwardRef(({ capture, ctaName, as = "button", href, onClick, size = "touch", emphasis = "default", children, ...props }, ref) => {
 	const handleClick = (e) => {
 		if (ctaName) try {
 			if (capture) capture(ctaName);
@@ -40,14 +40,13 @@ const Cta = React$1.forwardRef(({ capture, ctaName, as = "button", href, onClick
 		variant: uiVariant,
 		...props,
 		href,
-		ref,
+		onClick: handleClick,
 		children
 	});
 	return /* @__PURE__ */ jsx(Button, {
 		size: uiSize,
 		variant: uiVariant,
-		onPress: handleClick,
-		ref,
+		onClick: handleClick,
 		...props,
 		children
 	});

package/dist/components/atoms/EmptyState.js

@@ -2,12 +2,12 @@
 
 import "react";
 import { jsx } from "react/jsx-runtime";
-import { EmptyState as EmptyState$1 } from "@lssm/lib.ui-kit-web/ui/empty-state";
+import { EmptyState } from "@lssm/lib.ui-kit-web/ui/empty-state";
 
 //#region src/components/atoms/EmptyState.tsx
-function EmptyState(props) {
-	return /* @__PURE__ */ jsx(EmptyState$1, { ...props });
+function EmptyState$1(props) {
+	return /* @__PURE__ */ jsx(EmptyState, { ...props });
 }
 
 //#endregion
-export { EmptyState };
+export { EmptyState$1 as EmptyState };

package/dist/components/atoms/ErrorState.js

@@ -34,7 +34,6 @@ function ErrorState({ title = "Something went wrong", description, icon, onRetry
 		}) })]
 	});
 }
-var ErrorState_default = ErrorState;
 
 //#endregion
-export { ErrorState, ErrorState_default as default };
+export { ErrorState };

package/dist/components/atoms/Input.js

@@ -1,17 +1,17 @@
 import { mapKeyboardToWeb } from "../../lib/keyboard.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
-import { Input as Input$1 } from "@lssm/lib.ui-kit-web/ui/input";
+import { Input } from "@lssm/lib.ui-kit-web/ui/input";
 
 //#region src/components/atoms/Input.tsx
-function Input({ value, defaultValue, onChange, onSubmit, onFocus, onBlur, placeholder, disabled, readOnly, maxLength, name, className, keyboard, ...rest }) {
+function Input$1({ value, defaultValue, onChange, onSubmit, onFocus, onBlur, placeholder, disabled, readOnly, maxLength, name, className, keyboard, ...rest }) {
 	const webKeyboard = mapKeyboardToWeb(keyboard);
-	return /* @__PURE__ */ jsx(Input$1, {
+	return /* @__PURE__ */ jsx(Input, {
 		...rest,
 		className,
 		value,
 		defaultValue,
-		onChange: onChange ? (e) => onChange?.(e.target.value) : void 0,
+		onChange,
 		onFocus,
 		onBlur,
 		placeholder,
@@ -22,7 +22,6 @@ function Input({ value, defaultValue, onChange, onSubmit, onFocus, onBlur, place
 		...webKeyboard
 	});
 }
-var Input_default = Input;
 
 //#endregion
-export { Input, Input_default as default };
+export { Input$1 as Input };

package/dist/components/atoms/Link.js

@@ -8,7 +8,6 @@ function Link({ children, ...props }) {
 		children
 	});
 }
-var Link_default = Link;
 
 //#endregion
-export { Link, Link_default as default };
+export { Link };

package/dist/components/atoms/Link.web.js

@@ -1,10 +1,12 @@
+import { __toESM } from "../../_virtual/rolldown_runtime.js";
+import { require_link } from "../../node_modules/next/link.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
-import NextLink from "next/link";
 
 //#region src/components/atoms/Link.web.tsx
+var import_link = /* @__PURE__ */ __toESM(require_link());
 function Link({ href, children, ...props }) {
-	return /* @__PURE__ */ jsx(NextLink, {
+	return /* @__PURE__ */ jsx(import_link.default, {
 		href,
 		...props,
 		children

package/dist/components/atoms/LoaderCircular.js

@@ -38,7 +38,6 @@ function LoaderCircular({ size, tone, label, className, ...props }) {
 		}) : null]
 	});
 }
-var LoaderCircular_default = LoaderCircular;
 
 //#endregion
-export { LoaderCircular, LoaderCircular_default as default };
+export { LoaderCircular };

package/dist/components/atoms/Stepper.js

@@ -2,12 +2,12 @@
 
 import "react";
 import { jsx } from "react/jsx-runtime";
-import { Stepper as Stepper$1 } from "@lssm/lib.ui-kit-web/ui/stepper";
+import { Stepper } from "@lssm/lib.ui-kit-web/ui/stepper";
 
 //#region src/components/atoms/Stepper.tsx
-function Stepper(props) {
-	return /* @__PURE__ */ jsx(Stepper$1, { ...props });
+function Stepper$1(props) {
+	return /* @__PURE__ */ jsx(Stepper, { ...props });
 }
 
 //#endregion
-export { Stepper };
+export { Stepper$1 as Stepper };

package/dist/components/atoms/Textarea.js

@@ -1,18 +1,18 @@
 import { mapKeyboardToWeb } from "../../lib/keyboard.js";
-import * as React$1 from "react";
+import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { Textarea as Textarea$1 } from "@lssm/lib.ui-kit-web/ui/textarea";
+import { Textarea } from "@lssm/lib.ui-kit-web/ui/textarea";
 
 //#region src/components/atoms/Textarea.tsx
-function Textarea({ value, defaultValue, onChange, onSubmit, onFocus, onBlur, placeholder, disabled, readOnly, maxLength, name, className, rows, keyboard, ...rest }) {
+function Textarea$1({ value, defaultValue, onChange, onSubmit, onFocus, onBlur, placeholder, disabled, readOnly, maxLength, name, className, rows, keyboard, ...rest }) {
 	const webKeyboard = mapKeyboardToWeb(keyboard);
-	const handleChange = React$1.useCallback((e) => onChange?.(e.target.value), [onChange]);
-	const handleKeyDown = React$1.useCallback((e) => {
+	const handleChange = React.useCallback((e) => onChange?.(e), [onChange]);
+	const handleKeyDown = React.useCallback((e) => {
 		if (e.key === "Enter" && webKeyboard.type !== "search") {
-			if (e.metaKey || e.ctrlKey) onSubmit?.();
+			if (e.metaKey || e.ctrlKey) onSubmit?.(e);
 		}
 	}, [onSubmit, webKeyboard.type]);
-	return /* @__PURE__ */ jsx(Textarea$1, {
+	return /* @__PURE__ */ jsx(Textarea, {
 		...rest,
 		className,
 		value,
@@ -30,7 +30,6 @@ function Textarea({ value, defaultValue, onChange, onSubmit, onFocus, onBlur, pl
 		...webKeyboard
 	});
 }
-var Textarea_default = Textarea;
 
 //#endregion
-export { Textarea, Textarea_default as default };
+export { Textarea$1 as Textarea };

package/dist/components/data-view/DataViewRenderer.js

@@ -4,13 +4,13 @@ import { FiltersToolbar } from "../molecules/FiltersToolbar.js";
 import { DataViewList } from "./DataViewList.js";
 import { DataViewTable } from "./DataViewTable.js";
 import { DataViewDetail } from "./DataViewDetail.js";
-import * as React$1 from "react";
+import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@lssm/lib.ui-kit-web/ui/pagination";
 
 //#region src/components/data-view/DataViewRenderer.tsx
 function DataViewRenderer({ spec, items = [], item = null, className, renderActions, onSelect, onRowClick, headerActions, emptyState, footer, search, onSearchChange, filters, onFilterChange, pagination, onPageChange }) {
-	const viewContent = React$1.useMemo(() => {
+	const viewContent = React.useMemo(() => {
 		switch (spec.view.kind) {
 			case "list": return /* @__PURE__ */ jsx(DataViewList, {
 				spec,

package/dist/components/forms/ActionForm.js

@@ -0,0 +1,18 @@
+'use client';
+
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "@lssm/lib.ui-kit-web/ui/utils";
+
+//#region src/components/forms/ActionForm.tsx
+function ActionForm({ action, children, className, ...rest }) {
+	return /* @__PURE__ */ jsx("form", {
+		action,
+		className: cn("space-y-3", className),
+		...rest,
+		children
+	});
+}
+
+//#endregion
+export { ActionForm };

package/dist/components/forms/FormOneByOneLayout.js

@@ -1,12 +1,12 @@
 import { Button } from "../atoms/Button.js";
-import * as React$1 from "react";
+import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "@lssm/lib.ui-kit-web/ui/utils";
 
 //#region src/components/forms/FormOneByOneLayout.tsx
 function FormOneByOneLayout({ fields, initialKey, onComplete, className }) {
-	const indexByKey = React$1.useMemo(() => Object.fromEntries(fields.map((f, i) => [f.key, i])), [fields]);
-	const [idx, setIdx] = React$1.useState(() => {
+	const indexByKey = React.useMemo(() => Object.fromEntries(fields.map((f, i) => [f.key, i])), [fields]);
+	const [idx, setIdx] = React.useState(() => {
 		if (initialKey && initialKey in indexByKey) return indexByKey[initialKey] || 0;
 		return 0;
 	});

package/dist/components/forms/FormStepsLayout.js

@@ -1,13 +1,13 @@
 import { Button } from "../atoms/Button.js";
-import * as React$1 from "react";
+import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "@lssm/lib.ui-kit-web/ui/utils";
 import { Separator } from "@lssm/lib.ui-kit-web/ui/separator";
 
 //#region src/components/forms/FormStepsLayout.tsx
 function FormStepsLayout({ steps, initialStepKey, onFinish, canNext, className }) {
-	const indexByKey = React$1.useMemo(() => Object.fromEntries(steps.map((s, i) => [s.key, i])), [steps]);
-	const [idx, setIdx] = React$1.useState(() => {
+	const indexByKey = React.useMemo(() => Object.fromEntries(steps.map((s, i) => [s.key, i])), [steps]);
+	const [idx, setIdx] = React.useState(() => {
 		if (initialStepKey && initialStepKey in indexByKey) return indexByKey[initialStepKey] || 0;
 		return 0;
 	});

package/dist/components/forms/ZodForm.js

@@ -3,7 +3,7 @@
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { Form, useForm, zodResolver } from "@lssm/lib.ui-kit-web/ui/form";
-import { z } from "zod";
+import "zod";
 
 //#region src/components/forms/ZodForm.tsx
 function ZodForm({ schema, defaultValues, onSubmit, children }) {

package/dist/components/legal/atoms/LegalCallout.js

@@ -20,4 +20,4 @@ function LegalCallout({ tone, className, ...props }) {
 }
 
 //#endregion
-export { LegalCallout, calloutVariants };
+export { LegalCallout };

package/dist/components/legal/atoms/LegalHeading.js

@@ -42,4 +42,4 @@ function LegalHeading({ as, level, tone, spacing, className, ...props }) {
 }
 
 //#endregion
-export { LegalHeading, headingVariants };
+export { LegalHeading };

package/dist/components/legal/atoms/LegalList.js

@@ -34,4 +34,4 @@ function LegalList({ type, spacing, className, children, ...props }) {
 }
 
 //#endregion
-export { LegalList, listVariants };
+export { LegalList };

package/dist/components/legal/atoms/LegalSection.js

@@ -40,4 +40,4 @@ function LegalSection({ spacing, border, tone, className, ...props }) {
 }
 
 //#endregion
-export { LegalSection, sectionVariants };
+export { LegalSection };

package/dist/components/legal/atoms/LegalText.js

@@ -41,4 +41,4 @@ function LegalText({ as = "p", tone, size, spacing, className, ...props }) {
 }
 
 //#endregion
-export { LegalText, textVariants };
+export { LegalText };

package/dist/components/legal/molecules/ContactFields.js

@@ -13,9 +13,9 @@ function ContactFields({ value, onChange, disabled }) {
 				className: "space-y-2",
 				children: [/* @__PURE__ */ jsx(Label, { children: "Nom" }), /* @__PURE__ */ jsx(Input, {
 					value: value.name,
-					onChange: (v) => onChange({
+					onChange: (e) => onChange({
 						...value,
-						name: v
+						name: e.target.value
 					}),
 					disabled
 				})]
@@ -25,9 +25,9 @@ function ContactFields({ value, onChange, disabled }) {
 				children: [/* @__PURE__ */ jsx(Label, { children: "Email" }), /* @__PURE__ */ jsx(Input, {
 					type: "email",
 					value: value.email,
-					onChange: (v) => onChange({
+					onChange: (e) => onChange({
 						...value,
-						email: v
+						email: e.target.value
 					}),
 					disabled
 				})]
@@ -36,9 +36,9 @@ function ContactFields({ value, onChange, disabled }) {
 				className: "space-y-2",
 				children: [/* @__PURE__ */ jsx(Label, { children: "Objet" }), /* @__PURE__ */ jsx(Input, {
 					value: value.subject,
-					onChange: (v) => onChange({
+					onChange: (e) => onChange({
 						...value,
-						subject: v
+						subject: e.target.value
 					}),
 					disabled
 				})]
@@ -47,9 +47,9 @@ function ContactFields({ value, onChange, disabled }) {
 				className: "space-y-2",
 				children: [/* @__PURE__ */ jsx(Label, { children: "Message" }), /* @__PURE__ */ jsx(Textarea, {
 					value: value.message,
-					onChange: (v) => onChange({
+					onChange: (e) => onChange({
 						...value,
-						message: v
+						message: e.target.value
 					}),
 					disabled,
 					rows: 6

package/dist/components/legal/molecules/LegalTOC.js

@@ -48,4 +48,4 @@ function LegalTOC({ items, activeHref, onNavigate, variant, size, className, ...
 }
 
 //#endregion
-export { LegalTOC, tocVariants };
+export { LegalTOC };

package/dist/components/legal/organisms/ContactForm.js

@@ -1,6 +1,6 @@
 import { Button } from "../../atoms/Button.js";
 import { ContactFields } from "../molecules/ContactFields.js";
-import * as React$1 from "react";
+import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/legal/organisms/ContactForm.tsx
@@ -10,8 +10,8 @@ function ContactForm({ labels = { submit: "Envoyer" }, initialValue = {
 	subject: "",
 	message: ""
 }, disabled, onSubmit }) {
-	const [value, setValue] = React$1.useState(initialValue);
-	const [loading, setLoading] = React$1.useState(false);
+	const [value, setValue] = React.useState(initialValue);
+	const [loading, setLoading] = React.useState(false);
 	const handleSubmit = async (e) => {
 		e.preventDefault();
 		if (!onSubmit) return;

package/dist/components/legal/organisms/GDPRDataRequest.js

@@ -2,7 +2,7 @@ import { Button } from "../../atoms/Button.js";
 import { LegalHeading } from "../atoms/LegalHeading.js";
 import { LegalText } from "../atoms/LegalText.js";
 import { LegalSection } from "../atoms/LegalSection.js";
-import * as React$1 from "react";
+import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/legal/organisms/GDPRDataRequest.tsx
@@ -10,7 +10,7 @@ function GDPRDataRequest({ onExport, onDelete, labels = {
 	export: "Demander une copie",
 	delete: "Demander la suppression"
 } }) {
-	const [loading, setLoading] = React$1.useState(null);
+	const [loading, setLoading] = React.useState(null);
 	const handle = async (kind) => {
 		const fn = kind === "export" ? onExport : onDelete;
 		if (!fn) return;

package/dist/components/legal/templates/ContactTemplate.js

@@ -1,18 +1,18 @@
 import { Button } from "../../atoms/Button.js";
 import { ContactFields } from "../molecules/ContactFields.js";
 import { LegalPageLayout } from "../organisms/LegalPageLayout.js";
-import * as React$1 from "react";
+import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/legal/templates/ContactTemplate.tsx
 function ContactTemplate({ title = "Contact", meta, onSubmit }) {
-	const [value, setValue] = React$1.useState({
+	const [value, setValue] = React.useState({
 		name: "",
 		email: "",
 		subject: "",
 		message: ""
 	});
-	const [loading, setLoading] = React$1.useState(false);
+	const [loading, setLoading] = React.useState(false);
 	const handleSubmit = async (e) => {
 		e.preventDefault();
 		if (!onSubmit) return;

package/dist/components/marketing/MarketingCard.js

@@ -0,0 +1,20 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "@lssm/lib.ui-kit-web/ui/utils";
+import { Card, CardContent as CardContent$1, CardDescription, CardHeader as CardHeader$1, CardTitle as CardTitle$1 } from "@lssm/lib.ui-kit-web/ui/card";
+
+//#region src/components/marketing/MarketingCard.tsx
+const toneClasses = {
+	default: "border-border/60 bg-card/90",
+	muted: "border-border/50 bg-muted/50",
+	elevated: "border-border/50 bg-card shadow-lg shadow-black/5"
+};
+function MarketingCard({ tone = "default", className, ...props }) {
+	return /* @__PURE__ */ jsx(Card, {
+		className: cn("backdrop-blur transition-shadow", toneClasses[tone], className),
+		...props
+	});
+}
+
+//#endregion
+export { CardContent$1 as CardContent, CardDescription, CardHeader$1 as CardHeader, CardTitle$1 as CardTitle, MarketingCard };

package/dist/components/marketing/MarketingCardsSection.js

@@ -0,0 +1,28 @@
+import { MarketingSection } from "./MarketingSection.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "@lssm/lib.ui-kit-web/ui/utils";
+
+//#region src/components/marketing/MarketingCardsSection.tsx
+const gridVariants = cva("grid gap-6", {
+	variants: { columns: {
+		1: "grid-cols-1",
+		2: "grid-cols-1 md:grid-cols-2",
+		3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
+		4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4"
+	} },
+	defaultVariants: { columns: 3 }
+});
+function MarketingCardsSection({ children, columns, gridClassName, ...sectionProps }) {
+	return /* @__PURE__ */ jsx(MarketingSection, {
+		...sectionProps,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn(gridVariants({ columns }), gridClassName),
+			children
+		})
+	});
+}
+
+//#endregion
+export { MarketingCardsSection };

package/dist/components/marketing/MarketingComparisonSection.js

@@ -0,0 +1,52 @@
+import { MarketingSection } from "./MarketingSection.js";
+import "react";
+import { CheckCircle } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { HStack, VStack } from "@lssm/lib.ui-kit-web/ui/stack";
+import { Muted, Small } from "@lssm/lib.ui-kit-web/ui/typography";
+
+//#region src/components/marketing/MarketingComparisonSection.tsx
+function MarketingComparisonSection({ eyebrow, title, subtitle, left, right, tone = "default", padding = "comfortable" }) {
+	return /* @__PURE__ */ jsx(MarketingSection, {
+		tone,
+		padding,
+		eyebrow,
+		title,
+		subtitle,
+		align: "center",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "grid gap-8 md:grid-cols-2",
+			children: [left, right].map((col) => /* @__PURE__ */ jsxs(VStack, {
+				gap: "md",
+				align: "start",
+				className: "border-border/50 bg-card/50 rounded-xl border p-6",
+				children: [/* @__PURE__ */ jsx(Small, {
+					className: "text-sm font-semibold",
+					children: col.title
+				}), /* @__PURE__ */ jsx(VStack, {
+					as: "div",
+					role: "list",
+					gap: "sm",
+					align: "start",
+					className: "list-none p-0",
+					children: col.items.map((item, idx) => /* @__PURE__ */ jsxs(HStack, {
+						as: "div",
+						role: "listitem",
+						gap: "sm",
+						align: "start",
+						children: [/* @__PURE__ */ jsx(CheckCircle, {
+							className: "mt-0.5 text-violet-400",
+							size: 18
+						}), /* @__PURE__ */ jsx(Muted, {
+							className: "text-sm leading-relaxed",
+							children: item
+						})]
+					}, idx))
+				})]
+			}, col.title))
+		})
+	});
+}
+
+//#endregion
+export { MarketingComparisonSection };