@contractspec/lib.design-system 1.44.0

package/dist/components/marketing/MarketingComparisonSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarketingComparisonSection.d.ts","names":[],"sources":["../../../src/components/marketing/MarketingComparisonSection.tsx"],"sourcesContent":[],"mappings":";;;;;UAUU,gBAAA;;mBAES,KAAA,CAAM;AANG;AASX,UAAA,+BAAA,CAA+B;EACpC,OAAM,CAAA,EAAN,KAAA,CAAM,SAAA;EACR,KAAM,CAAA,EAAN,KAAA,CAAM,SAAA;EACH,QAAM,CAAA,EAAN,KAAA,CAAM,SAAA;EACX,IAAA,EAAA,gBAAA;EACC,KAAA,EAAA,gBAAA;EACA,IAAA,CAAA,EAAA,oBAAA;EACG,OAAA,CAAA,EAAA,uBAAA;;AAGI,iBAAA,0BAAA,CAA0B;EAAA,OAAA;EAAA,KAAA;EAAA,QAAA;EAAA,IAAA;EAAA,KAAA;EAAA,IAAA;EAAA;AAAA,CAAA,EAQvC,+BARuC,CAAA,EAQR,mBAAA,CAAA,GAAA,CAAA,OARQ"}

package/dist/components/marketing/MarketingComparisonSection.js

@@ -0,0 +1,53 @@
+import { MarketingSection } from "./MarketingSection.js";
+import "react";
+import { CheckCircle } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { HStack, VStack } from "@contractspec/lib.ui-kit-web/ui/stack";
+import { Muted, Small } from "@contractspec/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 };
+//# sourceMappingURL=MarketingComparisonSection.js.map

package/dist/components/marketing/MarketingComparisonSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarketingComparisonSection.js","names":[],"sources":["../../../src/components/marketing/MarketingComparisonSection.tsx"],"sourcesContent":["import * as React from 'react';\nimport { CheckCircle } from 'lucide-react';\nimport {\n  MarketingSection,\n  type MarketingSectionTone,\n  type MarketingSectionPadding,\n} from './MarketingSection';\nimport { HStack, VStack } from '@contractspec/lib.ui-kit-web/ui/stack';\nimport { Muted, Small } from '@contractspec/lib.ui-kit-web/ui/typography';\n\ninterface ComparisonColumn {\n  title: string;\n  items: (string | React.ReactNode)[];\n}\n\nexport interface MarketingComparisonSectionProps {\n  eyebrow?: React.ReactNode;\n  title?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  left: ComparisonColumn;\n  right: ComparisonColumn;\n  tone?: MarketingSectionTone;\n  padding?: MarketingSectionPadding;\n}\n\nexport function MarketingComparisonSection({\n  eyebrow,\n  title,\n  subtitle,\n  left,\n  right,\n  tone = 'default',\n  padding = 'comfortable',\n}: MarketingComparisonSectionProps) {\n  const columns = [left, right];\n\n  return (\n    <MarketingSection\n      tone={tone}\n      padding={padding}\n      eyebrow={eyebrow}\n      title={title}\n      subtitle={subtitle}\n      align=\"center\"\n    >\n      <div className=\"grid gap-8 md:grid-cols-2\">\n        {columns.map((col) => (\n          <VStack\n            key={col.title}\n            gap=\"md\"\n            align=\"start\"\n            className=\"border-border/50 bg-card/50 rounded-xl border p-6\"\n          >\n            <Small className=\"text-sm font-semibold\">{col.title}</Small>\n            <VStack\n              as=\"div\"\n              role=\"list\"\n              gap=\"sm\"\n              align=\"start\"\n              className=\"list-none p-0\"\n            >\n              {col.items.map((item, idx) => (\n                <HStack\n                  as=\"div\"\n                  role=\"listitem\"\n                  key={idx}\n                  gap=\"sm\"\n                  align=\"start\"\n                >\n                  <CheckCircle className=\"mt-0.5 text-violet-400\" size={18} />\n                  <Muted className=\"text-sm leading-relaxed\">{item}</Muted>\n                </HStack>\n              ))}\n            </VStack>\n          </VStack>\n        ))}\n      </div>\n    </MarketingSection>\n  );\n}\n"],"mappings":";;;;;;;;AAyBA,SAAgB,2BAA2B,EACzC,SACA,OACA,UACA,MACA,OACA,OAAO,WACP,UAAU,iBACwB;AAGlC,QACE,oBAAC;EACO;EACG;EACA;EACF;EACG;EACV,OAAM;YAEN,oBAAC;GAAI,WAAU;aAXH,CAAC,MAAM,MAAM,CAYd,KAAK,QACZ,qBAAC;IAEC,KAAI;IACJ,OAAM;IACN,WAAU;eAEV,oBAAC;KAAM,WAAU;eAAyB,IAAI;MAAc,EAC5D,oBAAC;KACC,IAAG;KACH,MAAK;KACL,KAAI;KACJ,OAAM;KACN,WAAU;eAET,IAAI,MAAM,KAAK,MAAM,QACpB,qBAAC;MACC,IAAG;MACH,MAAK;MAEL,KAAI;MACJ,OAAM;iBAEN,oBAAC;OAAY,WAAU;OAAyB,MAAM;QAAM,EAC5D,oBAAC;OAAM,WAAU;iBAA2B;QAAa;QALpD,IAME,CACT;MACK;MAzBJ,IAAI,MA0BF,CACT;IACE;GACW"}

package/dist/components/marketing/MarketingIconCard.d.ts

@@ -0,0 +1,38 @@
+import { MarketingCardTone } from "./MarketingCard.js";
+import * as React from "react";
+import * as react_jsx_runtime34 from "react/jsx-runtime";
+import { VariantProps } from "class-variance-authority";
+import * as class_variance_authority_types5 from "class-variance-authority/types";
+
+//#region src/components/marketing/MarketingIconCard.d.ts
+type IconComponent = React.ComponentType<{
+  className?: string;
+  size?: number;
+}>;
+declare const layoutVariants: (props?: ({
+  variant?: "iconFirst" | "listing" | "support" | null | undefined;
+} & class_variance_authority_types5.ClassProp) | undefined) => string;
+type MarketingIconCardVariant = VariantProps<typeof layoutVariants>['variant'];
+interface MarketingIconCardProps {
+  icon: IconComponent;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  tone?: MarketingCardTone;
+  iconClassName?: string;
+  headerAction?: React.ReactNode;
+  variant?: MarketingIconCardVariant;
+  className?: string;
+}
+declare function MarketingIconCard({
+  icon: Icon,
+  title,
+  description,
+  tone,
+  iconClassName,
+  headerAction,
+  variant,
+  className
+}: MarketingIconCardProps): react_jsx_runtime34.JSX.Element;
+//#endregion
+export { MarketingIconCard };
+//# sourceMappingURL=MarketingIconCard.d.ts.map

package/dist/components/marketing/MarketingIconCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarketingIconCard.d.ts","names":[],"sources":["../../../src/components/marketing/MarketingIconCard.tsx"],"sourcesContent":[],"mappings":";;;;;;;KAWK,aAAA,GAAgB,KAAA,CAAM;;;;AAFF,cAInB,cAFY,EAAA,CAAA,KAaqB,CAblB,EAAM,CAAA;EAErB,OAAA,CAAA,EAAA,WASJ,GAAA,SAAA,GAAA,SAAA,GAAA,IAAA,GAAA,SAAA;AAEF,CAAA,GAFE,+BAAA,CAAA,SAGO,CAAA,GAAA,SAD8B,EAAA,GAAY,MAAA;AAIzC,KAJE,wBAAA,GAA2B,YAIP,CAAA,OAHvB,cAGuB,CAAA,CAAA,SAAA,CAAA;UAAtB,sBAAA,CACF;EACC,IAAM,EADP,aACO;EACC,KAAM,EADb,KAAA,CAAM,SACO;EACb,WAAA,CAAA,EADO,KAAA,CAAM,SACb;EAEQ,IAAM,CAAA,EAFd,iBAEc;EACX,aAAA,CAAA,EAAA,MAAA;EAAwB,YAAA,CAAA,EADnB,KAAA,CAAM,SACa;EAIpB,OAAA,CAAA,EAJJ,wBAIqB;EACzB,SAAA,CAAA,EAAA,MAAA;;AAEN,iBAHc,iBAAA,CAGd;EAAA,IAAA,EAFM,IAEN;EAAA,KAAA;EAAA,WAAA;EAAA,IAAA;EAAA,aAAA;EAAA,YAAA;EAAA,OAAA;EAAA;AAAA,CAAA,EAMC,sBAND,CAAA,EAMuB,mBAAA,CAAA,GAAA,CAAA,OANvB"}

package/dist/components/marketing/MarketingIconCard.js

@@ -0,0 +1,74 @@
+import { CardContent, CardTitle, MarketingCard } from "./MarketingCard.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { HStack, VStack } from "@contractspec/lib.ui-kit-web/ui/stack";
+import { Muted, Small } from "@contractspec/lib.ui-kit-web/ui/typography";
+
+//#region src/components/marketing/MarketingIconCard.tsx
+const layoutVariants = cva("w-full", {
+	variants: { variant: {
+		iconFirst: "space-y-3",
+		listing: "",
+		support: ""
+	} },
+	defaultVariants: { variant: "iconFirst" }
+});
+function MarketingIconCard({ icon: Icon, title, description, tone = "default", iconClassName, headerAction, variant = "iconFirst", className }) {
+	return /* @__PURE__ */ jsx(MarketingCard, {
+		tone,
+		className,
+		children: /* @__PURE__ */ jsx(CardContent, {
+			className: layoutVariants({ variant }),
+			children: variant === "iconFirst" ? /* @__PURE__ */ jsxs(VStack, {
+				gap: "sm",
+				align: "start",
+				children: [
+					/* @__PURE__ */ jsxs(HStack, {
+						gap: "sm",
+						align: "center",
+						justify: "between",
+						className: "w-full",
+						children: [/* @__PURE__ */ jsx(Icon, {
+							className: iconClassName,
+							size: 24
+						}), headerAction]
+					}),
+					/* @__PURE__ */ jsx(CardTitle, {
+						className: "text-xl",
+						children: title
+					}),
+					description ? /* @__PURE__ */ jsx(Muted, {
+						className: "text-sm leading-relaxed",
+						children: description
+					}) : null
+				]
+			}) : /* @__PURE__ */ jsxs(HStack, {
+				gap: "md",
+				align: "start",
+				children: [/* @__PURE__ */ jsx(Icon, {
+					className: iconClassName,
+					size: variant === "listing" ? 18 : 20
+				}), /* @__PURE__ */ jsxs(VStack, {
+					gap: "xs",
+					align: "start",
+					children: [
+						/* @__PURE__ */ jsx(CardTitle, {
+							className: "text-base font-semibold",
+							children: title
+						}),
+						description ? /* @__PURE__ */ jsx(Muted, {
+							className: "text-sm leading-relaxed",
+							children: description
+						}) : null,
+						headerAction ? /* @__PURE__ */ jsx(Small, { children: headerAction }) : null
+					]
+				})]
+			})
+		})
+	});
+}
+
+//#endregion
+export { MarketingIconCard };
+//# sourceMappingURL=MarketingIconCard.js.map

package/dist/components/marketing/MarketingIconCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarketingIconCard.js","names":["MarketingCardContent","MarketingCardTitle"],"sources":["../../../src/components/marketing/MarketingIconCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { HStack, VStack } from '@contractspec/lib.ui-kit-web/ui/stack';\nimport { Muted, Small } from '@contractspec/lib.ui-kit-web/ui/typography';\nimport {\n  MarketingCard,\n  MarketingCardContent,\n  MarketingCardTitle,\n  type MarketingCardTone,\n} from './MarketingCard';\n\ntype IconComponent = React.ComponentType<{ className?: string; size?: number }>;\n\nconst layoutVariants = cva('w-full', {\n  variants: {\n    variant: {\n      iconFirst: 'space-y-3',\n      listing: '',\n      support: '',\n    },\n  },\n  defaultVariants: { variant: 'iconFirst' },\n});\n\nexport type MarketingIconCardVariant = VariantProps<\n  typeof layoutVariants\n>['variant'];\n\ninterface MarketingIconCardProps {\n  icon: IconComponent;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  tone?: MarketingCardTone;\n  iconClassName?: string;\n  headerAction?: React.ReactNode;\n  variant?: MarketingIconCardVariant;\n  className?: string;\n}\n\nexport function MarketingIconCard({\n  icon: Icon,\n  title,\n  description,\n  tone = 'default',\n  iconClassName,\n  headerAction,\n  variant = 'iconFirst',\n  className,\n}: MarketingIconCardProps) {\n  return (\n    <MarketingCard tone={tone} className={className}>\n      <MarketingCardContent className={layoutVariants({ variant })}>\n        {variant === 'iconFirst' ? (\n          <VStack gap=\"sm\" align=\"start\">\n            <HStack\n              gap=\"sm\"\n              align=\"center\"\n              justify=\"between\"\n              className=\"w-full\"\n            >\n              <Icon className={iconClassName} size={24} />\n              {headerAction}\n            </HStack>\n            <MarketingCardTitle className=\"text-xl\">{title}</MarketingCardTitle>\n            {description ? (\n              <Muted className=\"text-sm leading-relaxed\">{description}</Muted>\n            ) : null}\n          </VStack>\n        ) : (\n          <HStack gap=\"md\" align=\"start\">\n            <Icon\n              className={iconClassName}\n              size={variant === 'listing' ? 18 : 20}\n            />\n            <VStack gap=\"xs\" align=\"start\">\n              <MarketingCardTitle className=\"text-base font-semibold\">\n                {title}\n              </MarketingCardTitle>\n              {description ? (\n                <Muted className=\"text-sm leading-relaxed\">{description}</Muted>\n              ) : null}\n              {headerAction ? <Small>{headerAction}</Small> : null}\n            </VStack>\n          </HStack>\n        )}\n      </MarketingCardContent>\n    </MarketingCard>\n  );\n}\n"],"mappings":";;;;;;;;AAaA,MAAM,iBAAiB,IAAI,UAAU;CACnC,UAAU,EACR,SAAS;EACP,WAAW;EACX,SAAS;EACT,SAAS;EACV,EACF;CACD,iBAAiB,EAAE,SAAS,aAAa;CAC1C,CAAC;AAiBF,SAAgB,kBAAkB,EAChC,MAAM,MACN,OACA,aACA,OAAO,WACP,eACA,cACA,UAAU,aACV,aACyB;AACzB,QACE,oBAAC;EAAoB;EAAiB;YACpC,oBAACA;GAAqB,WAAW,eAAe,EAAE,SAAS,CAAC;aACzD,YAAY,cACX,qBAAC;IAAO,KAAI;IAAK,OAAM;;KACrB,qBAAC;MACC,KAAI;MACJ,OAAM;MACN,SAAQ;MACR,WAAU;iBAEV,oBAAC;OAAK,WAAW;OAAe,MAAM;QAAM,EAC3C;OACM;KACT,oBAACC;MAAmB,WAAU;gBAAW;OAA2B;KACnE,cACC,oBAAC;MAAM,WAAU;gBAA2B;OAAoB,GAC9D;;KACG,GAET,qBAAC;IAAO,KAAI;IAAK,OAAM;eACrB,oBAAC;KACC,WAAW;KACX,MAAM,YAAY,YAAY,KAAK;MACnC,EACF,qBAAC;KAAO,KAAI;KAAK,OAAM;;MACrB,oBAACA;OAAmB,WAAU;iBAC3B;QACkB;MACpB,cACC,oBAAC;OAAM,WAAU;iBAA2B;QAAoB,GAC9D;MACH,eAAe,oBAAC,mBAAO,eAAqB,GAAG;;MACzC;KACF;IAEU;GACT"}

package/dist/components/marketing/MarketingSection.d.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+import * as react_jsx_runtime31 from "react/jsx-runtime";
+import { VariantProps } from "class-variance-authority";
+import * as class_variance_authority_types3 from "class-variance-authority/types";
+
+//#region src/components/marketing/MarketingSection.d.ts
+declare const sectionVariants: (props?: ({
+  tone?: "default" | "muted" | "panel" | "gradient" | null | undefined;
+  padding?: "compact" | "comfortable" | "spacious" | null | undefined;
+} & class_variance_authority_types3.ClassProp) | undefined) => string;
+type MarketingSectionTone = VariantProps<typeof sectionVariants>['tone'];
+type MarketingSectionPadding = VariantProps<typeof sectionVariants>['padding'];
+type MarketingSectionProps = React.PropsWithChildren<VariantProps<typeof sectionVariants> & {
+  eyebrow?: React.ReactNode;
+  title?: React.ReactNode;
+  subtitle?: React.ReactNode;
+  align?: 'left' | 'center';
+  maxWidth?: 'lg' | 'xl';
+  className?: string;
+}>;
+declare function MarketingSection({
+  children,
+  eyebrow,
+  title,
+  subtitle,
+  align,
+  maxWidth,
+  tone,
+  padding,
+  className
+}: MarketingSectionProps): react_jsx_runtime31.JSX.Element;
+//#endregion
+export { MarketingSection, MarketingSectionPadding, MarketingSectionTone };
+//# sourceMappingURL=MarketingSection.d.ts.map

package/dist/components/marketing/MarketingSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarketingSection.d.ts","names":[],"sources":["../../../src/components/marketing/MarketingSection.tsx"],"sourcesContent":[],"mappings":";;;;;;cAMM;;;IAoBJ,+BAAA,CAAA;AApBI,KAsBM,oBAAA,GAAuB,YAFjC,CAAA,OAEqD,eAFrD,CAAA,CAAA,MAAA,CAAA;AAEU,KACA,uBAAA,GAA0B,YADiB,CAAA,OAE9C,eAFsC,CAAA,CAAA,SAAA,CAAA;AAC/C,KAIK,qBAAA,GAAwB,KAAA,CAAM,iBAH1B,CAIP,YALoC,CAAA,OAKhB,eAL4B,CAAA,GAAA;EAI7C,OAAA,CAAA,EAES,KAAA,CAAM,SAFM;EACJ,KAAA,CAAA,EAEV,KAAA,CAAM,SAFI;EAApB,QAAA,CAAA,EAGa,KAAA,CAAM,SAHnB;EACY,KAAM,CAAA,EAAA,MAAA,GAAA,QAAA;EACR,QAAM,CAAA,EAAA,IAAA,GAAA,IAAA;EACH,SAAM,CAAA,EAAA,MAAA;CAJQ,CAAA;AAAuB,iBAWpC,gBAAA,CAXoC;EAAA,QAAA;EAAA,OAAA;EAAA,KAAA;EAAA,QAAA;EAAA,KAAA;EAAA,QAAA;EAAA,IAAA;EAAA,OAAA;EAAA;AAAA,CAAA,EAqBjD,qBArBiD,CAAA,EAqB5B,mBAAA,CAAA,GAAA,CAAA,OArB4B"}

package/dist/components/marketing/MarketingSection.js

@@ -0,0 +1,62 @@
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { VStack } from "@contractspec/lib.ui-kit-web/ui/stack";
+import { cn } from "@contractspec/lib.ui-kit-web/ui/utils";
+import { Muted } from "@contractspec/lib.ui-kit-web/ui/typography";
+
+//#region src/components/marketing/MarketingSection.tsx
+const sectionVariants = cva("w-full", {
+	variants: {
+		tone: {
+			default: "bg-background",
+			muted: "bg-muted/40 border-b border-border/60",
+			panel: "bg-card/60 shadow-[0_10px_60px_-45px_rgba(0,0,0,0.35)] backdrop-blur",
+			gradient: "bg-gradient-to-br from-violet-500/10 via-indigo-500/5 to-blue-500/5"
+		},
+		padding: {
+			compact: "py-10",
+			comfortable: "py-16 sm:py-20",
+			spacious: "py-20 sm:py-24"
+		}
+	},
+	defaultVariants: {
+		tone: "default",
+		padding: "comfortable"
+	}
+});
+function MarketingSection({ children, eyebrow, title, subtitle, align = "center", maxWidth = "xl", tone, padding, className }) {
+	const contentWidth = maxWidth === "lg" ? "max-w-5xl" : "max-w-6xl";
+	const headerAlign = align === "center" ? "items-center text-center" : "items-start text-left";
+	return /* @__PURE__ */ jsx("section", {
+		className: cn(sectionVariants({
+			tone,
+			padding
+		}), "transition-colors", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cn("mx-auto w-full px-4 sm:px-6 lg:px-8", contentWidth),
+			children: [(eyebrow || title || subtitle) && /* @__PURE__ */ jsxs(VStack, {
+				gap: "sm",
+				className: cn("mb-10", headerAlign),
+				children: [
+					eyebrow ? /* @__PURE__ */ jsx(Muted, {
+						className: "text-[11px] font-semibold tracking-[0.2em] uppercase",
+						children: eyebrow
+					}) : null,
+					title ? /* @__PURE__ */ jsx("div", {
+						className: "text-3xl leading-tight font-bold md:text-4xl",
+						children: title
+					}) : null,
+					subtitle ? /* @__PURE__ */ jsx(Muted, {
+						className: "text-base md:text-lg",
+						children: subtitle
+					}) : null
+				]
+			}), children]
+		})
+	});
+}
+
+//#endregion
+export { MarketingSection };
+//# sourceMappingURL=MarketingSection.js.map

package/dist/components/marketing/MarketingSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarketingSection.js","names":[],"sources":["../../../src/components/marketing/MarketingSection.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '@contractspec/lib.ui-kit-web/ui/utils';\nimport { VStack } from '@contractspec/lib.ui-kit-web/ui/stack';\nimport { Muted } from '@contractspec/lib.ui-kit-web/ui/typography';\n\nconst sectionVariants = cva('w-full', {\n  variants: {\n    tone: {\n      default: 'bg-background',\n      muted: 'bg-muted/40 border-b border-border/60',\n      panel:\n        'bg-card/60 shadow-[0_10px_60px_-45px_rgba(0,0,0,0.35)] backdrop-blur',\n      gradient:\n        'bg-gradient-to-br from-violet-500/10 via-indigo-500/5 to-blue-500/5',\n    },\n    padding: {\n      compact: 'py-10',\n      comfortable: 'py-16 sm:py-20',\n      spacious: 'py-20 sm:py-24',\n    },\n  },\n  defaultVariants: {\n    tone: 'default',\n    padding: 'comfortable',\n  },\n});\n\nexport type MarketingSectionTone = VariantProps<typeof sectionVariants>['tone'];\nexport type MarketingSectionPadding = VariantProps<\n  typeof sectionVariants\n>['padding'];\n\ntype MarketingSectionProps = React.PropsWithChildren<\n  VariantProps<typeof sectionVariants> & {\n    eyebrow?: React.ReactNode;\n    title?: React.ReactNode;\n    subtitle?: React.ReactNode;\n    align?: 'left' | 'center';\n    maxWidth?: 'lg' | 'xl';\n    className?: string;\n  }\n>;\n\nexport function MarketingSection({\n  children,\n  eyebrow,\n  title,\n  subtitle,\n  align = 'center',\n  maxWidth = 'xl',\n  tone,\n  padding,\n  className,\n}: MarketingSectionProps) {\n  const contentWidth = maxWidth === 'lg' ? 'max-w-5xl' : 'max-w-6xl';\n  const headerAlign =\n    align === 'center' ? 'items-center text-center' : 'items-start text-left';\n\n  return (\n    <section\n      className={cn(\n        sectionVariants({ tone, padding }),\n        'transition-colors',\n        className\n      )}\n    >\n      <div className={cn('mx-auto w-full px-4 sm:px-6 lg:px-8', contentWidth)}>\n        {(eyebrow || title || subtitle) && (\n          <VStack gap=\"sm\" className={cn('mb-10', headerAlign)}>\n            {eyebrow ? (\n              <Muted className=\"text-[11px] font-semibold tracking-[0.2em] uppercase\">\n                {eyebrow}\n              </Muted>\n            ) : null}\n            {title ? (\n              <div className=\"text-3xl leading-tight font-bold md:text-4xl\">\n                {title}\n              </div>\n            ) : null}\n            {subtitle ? (\n              <Muted className=\"text-base md:text-lg\">{subtitle}</Muted>\n            ) : null}\n          </VStack>\n        )}\n        {children}\n      </div>\n    </section>\n  );\n}\n"],"mappings":";;;;;;;;AAMA,MAAM,kBAAkB,IAAI,UAAU;CACpC,UAAU;EACR,MAAM;GACJ,SAAS;GACT,OAAO;GACP,OACE;GACF,UACE;GACH;EACD,SAAS;GACP,SAAS;GACT,aAAa;GACb,UAAU;GACX;EACF;CACD,iBAAiB;EACf,MAAM;EACN,SAAS;EACV;CACF,CAAC;AAkBF,SAAgB,iBAAiB,EAC/B,UACA,SACA,OACA,UACA,QAAQ,UACR,WAAW,MACX,MACA,SACA,aACwB;CACxB,MAAM,eAAe,aAAa,OAAO,cAAc;CACvD,MAAM,cACJ,UAAU,WAAW,6BAA6B;AAEpD,QACE,oBAAC;EACC,WAAW,GACT,gBAAgB;GAAE;GAAM;GAAS,CAAC,EAClC,qBACA,UACD;YAED,qBAAC;GAAI,WAAW,GAAG,uCAAuC,aAAa;eACnE,WAAW,SAAS,aACpB,qBAAC;IAAO,KAAI;IAAK,WAAW,GAAG,SAAS,YAAY;;KACjD,UACC,oBAAC;MAAM,WAAU;gBACd;OACK,GACN;KACH,QACC,oBAAC;MAAI,WAAU;gBACZ;OACG,GACJ;KACH,WACC,oBAAC;MAAM,WAAU;gBAAwB;OAAiB,GACxD;;KACG,EAEV;IACG;GACE"}

package/dist/components/marketing/MarketingStepCard.d.ts

@@ -0,0 +1,20 @@
+import { MarketingCardTone } from "./MarketingCard.js";
+import * as React from "react";
+import * as react_jsx_runtime35 from "react/jsx-runtime";
+
+//#region src/components/marketing/MarketingStepCard.d.ts
+interface MarketingStepCardProps {
+  step: number | string;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  tone?: MarketingCardTone;
+}
+declare function MarketingStepCard({
+  step,
+  title,
+  description,
+  tone
+}: MarketingStepCardProps): react_jsx_runtime35.JSX.Element;
+//#endregion
+export { MarketingStepCard };
+//# sourceMappingURL=MarketingStepCard.d.ts.map

package/dist/components/marketing/MarketingStepCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarketingStepCard.d.ts","names":[],"sources":["../../../src/components/marketing/MarketingStepCard.tsx"],"sourcesContent":[],"mappings":";;;;;UAWU,sBAAA;;SAED,KAAA,CAAM;EAFL,WAAA,CAAA,EAGM,KAAA,CAAM,SAHU;EAEvB,IAAM,CAAA,EAEN,iBAFM;;AAEN,iBAGO,iBAAA,CAHP;EAAA,IAAA;EAAA,KAAA;EAAA,WAAA;EAAA;AAAA,CAAA,EAQN,sBARM,CAAA,EAQgB,mBAAA,CAAA,GAAA,CAAA,OARhB"}

package/dist/components/marketing/MarketingStepCard.js

@@ -0,0 +1,37 @@
+import { CardContent, CardHeader, CardTitle, MarketingCard } from "./MarketingCard.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { HStack, VStack } from "@contractspec/lib.ui-kit-web/ui/stack";
+import { Muted, Small } from "@contractspec/lib.ui-kit-web/ui/typography";
+
+//#region src/components/marketing/MarketingStepCard.tsx
+function MarketingStepCard({ step, title, description, tone = "default" }) {
+	return /* @__PURE__ */ jsxs(MarketingCard, {
+		tone,
+		children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(HStack, {
+			gap: "md",
+			align: "center",
+			className: "w-full",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "bg-primary/15 flex h-10 w-10 items-center justify-center rounded-lg",
+				children: /* @__PURE__ */ jsx(Small, {
+					className: "text-primary font-semibold",
+					children: step
+				})
+			}), /* @__PURE__ */ jsx(CardTitle, {
+				className: "text-lg",
+				children: title
+			})]
+		}) }), description ? /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(VStack, {
+			gap: "sm",
+			children: /* @__PURE__ */ jsx(Muted, {
+				className: "text-sm leading-relaxed",
+				children: description
+			})
+		}) }) : null]
+	});
+}
+
+//#endregion
+export { MarketingStepCard };
+//# sourceMappingURL=MarketingStepCard.js.map

package/dist/components/marketing/MarketingStepCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarketingStepCard.js","names":["MarketingCardHeader","MarketingCardTitle","MarketingCardContent"],"sources":["../../../src/components/marketing/MarketingStepCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport { HStack, VStack } from '@contractspec/lib.ui-kit-web/ui/stack';\nimport { Muted, Small } from '@contractspec/lib.ui-kit-web/ui/typography';\nimport {\n  MarketingCard,\n  MarketingCardContent,\n  MarketingCardHeader,\n  MarketingCardTitle,\n  type MarketingCardTone,\n} from './MarketingCard';\n\ninterface MarketingStepCardProps {\n  step: number | string;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  tone?: MarketingCardTone;\n}\n\nexport function MarketingStepCard({\n  step,\n  title,\n  description,\n  tone = 'default',\n}: MarketingStepCardProps) {\n  return (\n    <MarketingCard tone={tone}>\n      <MarketingCardHeader>\n        <HStack gap=\"md\" align=\"center\" className=\"w-full\">\n          <div className=\"bg-primary/15 flex h-10 w-10 items-center justify-center rounded-lg\">\n            <Small className=\"text-primary font-semibold\">{step}</Small>\n          </div>\n          <MarketingCardTitle className=\"text-lg\">{title}</MarketingCardTitle>\n        </HStack>\n      </MarketingCardHeader>\n      {description ? (\n        <MarketingCardContent>\n          <VStack gap=\"sm\">\n            <Muted className=\"text-sm leading-relaxed\">{description}</Muted>\n          </VStack>\n        </MarketingCardContent>\n      ) : null}\n    </MarketingCard>\n  );\n}\n"],"mappings":";;;;;;;AAkBA,SAAgB,kBAAkB,EAChC,MACA,OACA,aACA,OAAO,aACkB;AACzB,QACE,qBAAC;EAAoB;aACnB,oBAACA,wBACC,qBAAC;GAAO,KAAI;GAAK,OAAM;GAAS,WAAU;cACxC,oBAAC;IAAI,WAAU;cACb,oBAAC;KAAM,WAAU;eAA8B;MAAa;KACxD,EACN,oBAACC;IAAmB,WAAU;cAAW;KAA2B;IAC7D,GACW,EACrB,cACC,oBAACC,yBACC,oBAAC;GAAO,KAAI;aACV,oBAAC;IAAM,WAAU;cAA2B;KAAoB;IACzD,GACY,GACrB;GACU"}

package/dist/components/molecules/AiLinkButton.d.ts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime69 from "react/jsx-runtime";
+
+//#region src/components/molecules/AiLinkButton.d.ts
+type Provider = 'chatgpt' | 'claude';
+interface AiLinkButtonProps {
+  href: string;
+  provider?: Provider;
+  className?: string;
+}
+declare function AiLinkButton({
+  href,
+  className
+}: AiLinkButtonProps): react_jsx_runtime69.JSX.Element;
+//#endregion
+export { AiLinkButton };
+//# sourceMappingURL=AiLinkButton.d.ts.map

package/dist/components/molecules/AiLinkButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AiLinkButton.d.ts","names":[],"sources":["../../../src/components/molecules/AiLinkButton.tsx"],"sourcesContent":[],"mappings":";;;KAUK,QAAA;UAEY,iBAAA;;EAFZ,QAAA,CAAA,EAIQ,QAJA;EAEI,SAAA,CAAA,EAAA,MAAA;AAqBjB;AAA+B,iBAAf,YAAA,CAAe;EAAA,IAAA;EAAA;AAAA,CAAA,EAAmB,iBAAnB,CAAA,EAAoC,mBAAA,CAAA,GAAA,CAAA,OAApC"}

package/dist/components/molecules/AiLinkButton.js

@@ -0,0 +1,67 @@
+import { Button } from "../atoms/Button.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@contractspec/lib.ui-kit-web/ui/dropdown-menu";
+
+//#region src/components/molecules/AiLinkButton.tsx
+function buildPrompt(href) {
+	return `Please load and use this markdown context when answering: ${href}`;
+}
+function buildProviderUrl(provider, href) {
+	const prompt = encodeURIComponent(buildPrompt(href));
+	switch (provider) {
+		case "claude": return `https://claude.ai/new?prompt=${prompt}`;
+		case "chatgpt":
+		default: return `https://chatgpt.com/?q=${prompt}`;
+	}
+}
+function AiLinkButton({ href, className }) {
+	const copyLink = React.useCallback(() => {
+		try {
+			navigator.clipboard?.writeText(href).catch(() => {});
+		} catch (_e) {}
+	}, [href]);
+	const openChatGPT = React.useCallback(() => {
+		const url = buildProviderUrl("chatgpt", href);
+		try {
+			navigator.clipboard?.writeText(href).catch(() => {});
+		} catch (_e) {}
+		window.open(url, "_blank", "noopener,noreferrer");
+	}, [href]);
+	const openClaude = React.useCallback(() => {
+		const url = buildProviderUrl("claude", href);
+		try {
+			navigator.clipboard?.writeText(href).catch(() => {});
+		} catch (_e) {}
+		window.open(url, "_blank", "noopener,noreferrer");
+	}, [href]);
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(Button, {
+			className,
+			variant: "secondary",
+			"aria-label": "AI actions",
+			children: "AI"
+		})
+	}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+		align: "end",
+		children: [
+			/* @__PURE__ */ jsx(DropdownMenuItem, {
+				onClick: copyLink,
+				children: "Get link for AI"
+			}),
+			/* @__PURE__ */ jsx(DropdownMenuItem, {
+				onClick: openChatGPT,
+				children: "Open in ChatGPT"
+			}),
+			/* @__PURE__ */ jsx(DropdownMenuItem, {
+				onClick: openClaude,
+				children: "Open in Claude"
+			})
+		]
+	})] });
+}
+
+//#endregion
+export { AiLinkButton };
+//# sourceMappingURL=AiLinkButton.js.map

package/dist/components/molecules/AiLinkButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AiLinkButton.js","names":[],"sources":["../../../src/components/molecules/AiLinkButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Button } from '../atoms/Button';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@contractspec/lib.ui-kit-web/ui/dropdown-menu';\n// } from './DropdownMenu';\n\ntype Provider = 'chatgpt' | 'claude';\n\nexport interface AiLinkButtonProps {\n  href: string; // canonical or .md URL\n  provider?: Provider;\n  className?: string;\n}\n\nfunction buildPrompt(href: string) {\n  return `Please load and use this markdown context when answering: ${href}`;\n}\n\nfunction buildProviderUrl(provider: Provider, href: string) {\n  const prompt = encodeURIComponent(buildPrompt(href));\n  switch (provider) {\n    case 'claude':\n      return `https://claude.ai/new?prompt=${prompt}`;\n    case 'chatgpt':\n    default:\n      return `https://chatgpt.com/?q=${prompt}`;\n  }\n}\n\nexport function AiLinkButton({ href, className }: AiLinkButtonProps) {\n  const copyLink = React.useCallback(() => {\n    try {\n      navigator.clipboard?.writeText(href).catch(() => {\n        /* ignore */\n      });\n    } catch (_e) {\n      /* ignore */\n    }\n  }, [href]);\n\n  const openChatGPT = React.useCallback(() => {\n    const url = buildProviderUrl('chatgpt', href);\n    try {\n      navigator.clipboard?.writeText(href).catch(() => {\n        /* ignore */\n      });\n    } catch (_e) {\n      /* ignore */\n    }\n    window.open(url, '_blank', 'noopener,noreferrer');\n  }, [href]);\n\n  const openClaude = React.useCallback(() => {\n    const url = buildProviderUrl('claude', href);\n    try {\n      navigator.clipboard?.writeText(href).catch(() => {\n        /* ignore */\n      });\n    } catch (_e) {\n      /* ignore */\n    }\n    window.open(url, '_blank', 'noopener,noreferrer');\n  }, [href]);\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button\n          className={className}\n          variant=\"secondary\"\n          aria-label=\"AI actions\"\n        >\n          AI\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\">\n        <DropdownMenuItem onClick={copyLink}>Get link for AI</DropdownMenuItem>\n        <DropdownMenuItem onClick={openChatGPT}>\n          Open in ChatGPT\n        </DropdownMenuItem>\n        <DropdownMenuItem onClick={openClaude}>Open in Claude</DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"mappings":";;;;;;AAkBA,SAAS,YAAY,MAAc;AACjC,QAAO,6DAA6D;;AAGtE,SAAS,iBAAiB,UAAoB,MAAc;CAC1D,MAAM,SAAS,mBAAmB,YAAY,KAAK,CAAC;AACpD,SAAQ,UAAR;EACE,KAAK,SACH,QAAO,gCAAgC;EACzC,KAAK;EACL,QACE,QAAO,0BAA0B;;;AAIvC,SAAgB,aAAa,EAAE,MAAM,aAAgC;CACnE,MAAM,WAAW,MAAM,kBAAkB;AACvC,MAAI;AACF,aAAU,WAAW,UAAU,KAAK,CAAC,YAAY,GAE/C;WACK,IAAI;IAGZ,CAAC,KAAK,CAAC;CAEV,MAAM,cAAc,MAAM,kBAAkB;EAC1C,MAAM,MAAM,iBAAiB,WAAW,KAAK;AAC7C,MAAI;AACF,aAAU,WAAW,UAAU,KAAK,CAAC,YAAY,GAE/C;WACK,IAAI;AAGb,SAAO,KAAK,KAAK,UAAU,sBAAsB;IAChD,CAAC,KAAK,CAAC;CAEV,MAAM,aAAa,MAAM,kBAAkB;EACzC,MAAM,MAAM,iBAAiB,UAAU,KAAK;AAC5C,MAAI;AACF,aAAU,WAAW,UAAU,KAAK,CAAC,YAAY,GAE/C;WACK,IAAI;AAGb,SAAO,KAAK,KAAK,UAAU,sBAAsB;IAChD,CAAC,KAAK,CAAC;AAEV,QACE,qBAAC,2BACC,oBAAC;EAAoB;YACnB,oBAAC;GACY;GACX,SAAQ;GACR,cAAW;aACZ;IAEQ;GACW,EACtB,qBAAC;EAAoB,OAAM;;GACzB,oBAAC;IAAiB,SAAS;cAAU;KAAkC;GACvE,oBAAC;IAAiB,SAAS;cAAa;KAErB;GACnB,oBAAC;IAAiB,SAAS;cAAY;KAAiC;;GACpD,IACT"}

package/dist/components/molecules/Breadcrumbs.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import * as react_jsx_runtime43 from "react/jsx-runtime";
+
+//#region src/components/molecules/Breadcrumbs.d.ts
+interface BreadcrumbItemDef {
+  href?: string;
+  label: React.ReactNode;
+}
+declare function Breadcrumbs({
+  items
+}: {
+  items: BreadcrumbItemDef[];
+}): react_jsx_runtime43.JSX.Element | null;
+//#endregion
+export { Breadcrumbs };
+//# sourceMappingURL=Breadcrumbs.d.ts.map

package/dist/components/molecules/Breadcrumbs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.d.ts","names":[],"sources":["../../../src/components/molecules/Breadcrumbs.tsx"],"sourcesContent":[],"mappings":";;;;UAYiB,iBAAA;;SAER,KAAA,CAAM;AAFf;AAKgB,iBAAA,WAAA,CAAW;EAAA;CAAA,EAAA;EAAG,KAAA,EAAkB,iBAAlB,EAAA;CAAkB,CAAA,EAAqB,mBAAA,CAAA,GAAA,CAAA,OAAA,GAArB,IAAA"}

package/dist/components/molecules/Breadcrumbs.js

@@ -0,0 +1,18 @@
+'use client';
+
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@contractspec/lib.ui-kit-web/ui/breadcrumb";
+
+//#region src/components/molecules/Breadcrumbs.tsx
+function Breadcrumbs({ items }) {
+	if (!items?.length) return null;
+	return /* @__PURE__ */ jsx(Breadcrumb, { children: /* @__PURE__ */ jsx(BreadcrumbList, { children: items.map((it, idx) => /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsx(BreadcrumbItem, { children: it.href ? /* @__PURE__ */ jsx(BreadcrumbLink, {
+		href: it.href,
+		children: it.label
+	}) : /* @__PURE__ */ jsx(BreadcrumbPage, { children: it.label }) }), idx < items.length - 1 && /* @__PURE__ */ jsx(BreadcrumbSeparator, {})] }, idx)) }) });
+}
+
+//#endregion
+export { Breadcrumbs };
+//# sourceMappingURL=Breadcrumbs.js.map

package/dist/components/molecules/Breadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.js","names":["Root"],"sources":["../../../src/components/molecules/Breadcrumbs.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  Breadcrumb as Root,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@contractspec/lib.ui-kit-web/ui/breadcrumb';\n\nexport interface BreadcrumbItemDef {\n  href?: string;\n  label: React.ReactNode;\n}\n\nexport function Breadcrumbs({ items }: { items: BreadcrumbItemDef[] }) {\n  if (!items?.length) return null;\n  return (\n    <Root>\n      <BreadcrumbList>\n        {items.map((it, idx) => (\n          <React.Fragment key={idx}>\n            <BreadcrumbItem>\n              {it.href ? (\n                <BreadcrumbLink href={it.href}>{it.label}</BreadcrumbLink>\n              ) : (\n                <BreadcrumbPage>{it.label}</BreadcrumbPage>\n              )}\n            </BreadcrumbItem>\n            {idx < items.length - 1 && <BreadcrumbSeparator />}\n          </React.Fragment>\n        ))}\n      </BreadcrumbList>\n    </Root>\n  );\n}\n"],"mappings":";;;;;;;AAiBA,SAAgB,YAAY,EAAE,SAAyC;AACrE,KAAI,CAAC,OAAO,OAAQ,QAAO;AAC3B,QACE,oBAACA,wBACC,oBAAC,4BACE,MAAM,KAAK,IAAI,QACd,qBAAC,MAAM,uBACL,oBAAC,4BACE,GAAG,OACF,oBAAC;EAAe,MAAM,GAAG;YAAO,GAAG;GAAuB,GAE1D,oBAAC,4BAAgB,GAAG,QAAuB,GAE9B,EAChB,MAAM,MAAM,SAAS,KAAK,oBAAC,wBAAsB,KAR/B,IASJ,CACjB,GACa,GACZ"}

package/dist/components/molecules/CommandPalette.d.ts

@@ -0,0 +1,27 @@
+import * as react_jsx_runtime40 from "react/jsx-runtime";
+
+//#region src/components/molecules/CommandPalette.d.ts
+interface CommandPaletteProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  groups: {
+    heading?: string;
+    items: {
+      id: string;
+      label: string;
+      shortcut?: string;
+      onSelect?: () => void;
+    }[];
+  }[];
+  placeholder?: string;
+  kbd?: string;
+}
+declare function CommandPalette({
+  open,
+  onOpenChange,
+  groups,
+  placeholder
+}: CommandPaletteProps): react_jsx_runtime40.JSX.Element;
+//#endregion
+export { CommandPalette };
+//# sourceMappingURL=CommandPalette.d.ts.map

package/dist/components/molecules/CommandPalette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalette.d.ts","names":[],"sources":["../../../src/components/molecules/CommandPalette.tsx"],"sourcesContent":[],"mappings":";;;UAciB,mBAAA;;;EAAA,MAAA,EAAA;IAgBD,OAAA,CAAA,EAAA,MAAc;IAC5B,KAAA,EAAA;MACA,EAAA,EAAA,MAAA;MACA,KAAA,EAAA,MAAA;MACA,QAAA,CAAA,EAAA,MAAA;MACC,QAAA,CAAA,EAAA,GAAA,GAAA,IAAA;IAAmB,CAAA,EAAA;EAAA,CAAA,EAAA;;;;iBALN,cAAA;;;;;GAKb,sBAAmB,mBAAA,CAAA,GAAA,CAAA"}

package/dist/components/molecules/CommandPalette.js

@@ -0,0 +1,42 @@
+'use client';
+
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "@contractspec/lib.ui-kit-web/ui/command";
+
+//#region src/components/molecules/CommandPalette.tsx
+function CommandPalette({ open, onOpenChange, groups, placeholder = "Type a command or search…" }) {
+	const [internalOpen, setInternalOpen] = React.useState(false);
+	const isControlled = typeof open === "boolean";
+	const visible = isControlled ? open : internalOpen;
+	const setVisible = isControlled && onOpenChange ? onOpenChange : setInternalOpen;
+	React.useEffect(() => {
+		const handler = (e) => {
+			if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
+				e.preventDefault();
+				setVisible(!visible);
+			}
+		};
+		document.addEventListener("keydown", handler);
+		return () => document.removeEventListener("keydown", handler);
+	}, [visible, setVisible]);
+	return /* @__PURE__ */ jsxs(CommandDialog, {
+		open: visible,
+		onOpenChange: setVisible,
+		children: [/* @__PURE__ */ jsx(CommandInput, { placeholder }), /* @__PURE__ */ jsxs(CommandList, { children: [
+			/* @__PURE__ */ jsx(CommandEmpty, { children: "No results found." }),
+			groups.map((g, gi) => /* @__PURE__ */ jsx(CommandGroup, {
+				heading: g.heading,
+				children: g.items.map((it) => /* @__PURE__ */ jsxs(CommandItem, {
+					onSelect: it.onSelect,
+					children: [/* @__PURE__ */ jsx("span", { children: it.label }), it.shortcut && /* @__PURE__ */ jsx(CommandShortcut, { children: it.shortcut })]
+				}, it.id))
+			}, gi)),
+			/* @__PURE__ */ jsx(CommandSeparator, {})
+		] })]
+	});
+}
+
+//#endregion
+export { CommandPalette };
+//# sourceMappingURL=CommandPalette.js.map

package/dist/components/molecules/CommandPalette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalette.js","names":[],"sources":["../../../src/components/molecules/CommandPalette.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from '@contractspec/lib.ui-kit-web/ui/command';\n\nexport interface CommandPaletteProps {\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  groups: {\n    heading?: string;\n    items: {\n      id: string;\n      label: string;\n      shortcut?: string;\n      onSelect?: () => void;\n    }[];\n  }[];\n  placeholder?: string;\n  kbd?: string; // e.g., ⌘K shown in UI copy\n}\n\nexport function CommandPalette({\n  open,\n  onOpenChange,\n  groups,\n  placeholder = 'Type a command or search…',\n}: CommandPaletteProps) {\n  const [internalOpen, setInternalOpen] = React.useState(false);\n  const isControlled = typeof open === 'boolean';\n  const visible = isControlled ? open : internalOpen;\n  const setVisible = (\n    isControlled && onOpenChange ? onOpenChange : setInternalOpen\n  ) as (open: boolean) => void;\n\n  React.useEffect(() => {\n    const handler = (e: KeyboardEvent) => {\n      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {\n        e.preventDefault();\n        setVisible(!visible);\n      }\n    };\n    document.addEventListener('keydown', handler);\n    return () => document.removeEventListener('keydown', handler);\n  }, [visible, setVisible]);\n\n  return (\n    <CommandDialog open={visible} onOpenChange={setVisible}>\n      <CommandInput placeholder={placeholder} />\n      <CommandList>\n        <CommandEmpty>No results found.</CommandEmpty>\n        {groups.map((g, gi) => (\n          <CommandGroup key={gi} heading={g.heading}>\n            {g.items.map((it) => (\n              <CommandItem key={it.id} onSelect={it.onSelect}>\n                <span>{it.label}</span>\n                {it.shortcut && (\n                  <CommandShortcut>{it.shortcut}</CommandShortcut>\n                )}\n              </CommandItem>\n            ))}\n          </CommandGroup>\n        ))}\n        <CommandSeparator />\n      </CommandList>\n    </CommandDialog>\n  );\n}\n"],"mappings":";;;;;;;AA8BA,SAAgB,eAAe,EAC7B,MACA,cACA,QACA,cAAc,+BACQ;CACtB,MAAM,CAAC,cAAc,mBAAmB,MAAM,SAAS,MAAM;CAC7D,MAAM,eAAe,OAAO,SAAS;CACrC,MAAM,UAAU,eAAe,OAAO;CACtC,MAAM,aACJ,gBAAgB,eAAe,eAAe;AAGhD,OAAM,gBAAgB;EACpB,MAAM,WAAW,MAAqB;AACpC,QAAK,EAAE,WAAW,EAAE,YAAY,EAAE,IAAI,aAAa,KAAK,KAAK;AAC3D,MAAE,gBAAgB;AAClB,eAAW,CAAC,QAAQ;;;AAGxB,WAAS,iBAAiB,WAAW,QAAQ;AAC7C,eAAa,SAAS,oBAAoB,WAAW,QAAQ;IAC5D,CAAC,SAAS,WAAW,CAAC;AAEzB,QACE,qBAAC;EAAc,MAAM;EAAS,cAAc;aAC1C,oBAAC,gBAA0B,cAAe,EAC1C,qBAAC;GACC,oBAAC,0BAAa,sBAAgC;GAC7C,OAAO,KAAK,GAAG,OACd,oBAAC;IAAsB,SAAS,EAAE;cAC/B,EAAE,MAAM,KAAK,OACZ,qBAAC;KAAwB,UAAU,GAAG;gBACpC,oBAAC,oBAAM,GAAG,QAAa,EACtB,GAAG,YACF,oBAAC,6BAAiB,GAAG,WAA2B;OAHlC,GAAG,GAKP,CACd;MARe,GASJ,CACf;GACF,oBAAC,qBAAmB;MACR;GACA"}

package/dist/components/molecules/CommandSearchTrigger.d.ts

@@ -0,0 +1,19 @@
+import { CommandPalette } from "./CommandPalette.js";
+import * as React from "react";
+import * as react_jsx_runtime44 from "react/jsx-runtime";
+
+//#region src/components/molecules/CommandSearchTrigger.d.ts
+declare function CommandSearchTrigger({
+  groups,
+  className,
+  placeholder,
+  compact
+}: {
+  groups: React.ComponentProps<typeof CommandPalette>['groups'];
+  className?: string;
+  placeholder?: string;
+  compact?: boolean;
+}): react_jsx_runtime44.JSX.Element;
+//#endregion
+export { CommandSearchTrigger };
+//# sourceMappingURL=CommandSearchTrigger.d.ts.map

package/dist/components/molecules/CommandSearchTrigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandSearchTrigger.d.ts","names":[],"sources":["../../../src/components/molecules/CommandSearchTrigger.tsx"],"sourcesContent":[],"mappings":";;;;;iBAQgB,oBAAA;;;;;;UAMN,KAAA,CAAM,sBAAsB;;EANtB,WAAA,CAAA,EAAA,MAAA;EACd,OAAA,CAAA,EAAA,OAAA;CACA,CAAA,EAQD,mBAAA,CAAA,GAAA,CAAA,OARC"}