@burdenoff/website-sdk 2026.703.2 → 2026.709.2

package/dist/components/problems-solved.d.ts

@@ -0,0 +1,37 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentType, ReactNode } from 'react';
+
+interface ProblemSolved {
+    /** The pain point or before-state. */
+    problem: string;
+    /** How the product addresses the pain point. */
+    solution: string;
+    /** Lucide-style icon component. */
+    icon: ComponentType<{
+        className?: string;
+        "aria-hidden"?: boolean;
+    }>;
+    /** Optional use-case story slug for linking to /use-cases/:slug. */
+    storySlug?: string;
+}
+interface ProblemsSolvedSectionProps {
+    /** Section eyebrow text. */
+    eyebrow?: string;
+    /** Section heading. */
+    title?: string;
+    /** Section subtitle. */
+    subtitle?: string;
+    /** Problem/solution pairs to render. */
+    problems: ProblemSolved[];
+    /** Base path for use-case story links. */
+    storyBasePath?: string;
+    /** Label for story links. */
+    storyLabel?: string;
+    /** Optional additional CSS class for the outer section. */
+    className?: string;
+    /** Optional child element rendered at the bottom of the section. */
+    children?: ReactNode;
+}
+declare function ProblemsSolvedSection({ eyebrow, title, subtitle, problems, storyBasePath, storyLabel, className, children, }: ProblemsSolvedSectionProps): react_jsx_runtime.JSX.Element;
+
+export { type ProblemSolved, ProblemsSolvedSection, type ProblemsSolvedSectionProps };

package/dist/components/problems-solved.js

@@ -0,0 +1,157 @@
+'use strict';
+
+var lucideReact = require('lucide-react');
+var React = require('react');
+var reactSlot = require('@radix-ui/react-slot');
+var classVarianceAuthority = require('class-variance-authority');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var buttonVariants = classVarianceAuthority.cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React__namespace.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? reactSlot.Slot : "button";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+function ProblemsSolvedSection({
+  eyebrow,
+  title,
+  subtitle,
+  problems,
+  storyBasePath = "/use-cases",
+  storyLabel = "See the story",
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "section",
+    {
+      className: cn(
+        "py-16 md:py-24 px-4 sm:px-6 lg:px-8 bg-muted/30",
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-7xl mx-auto", children: [
+        (eyebrow || title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-3xl mx-auto text-center mb-12 md:mb-16", children: [
+          eyebrow && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-mono uppercase tracking-widest text-primary mb-4", children: eyebrow }),
+          title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl sm:text-4xl font-bold text-foreground mb-4", children: title }),
+          subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg text-muted-foreground", children: subtitle })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: problems.map((item, index) => {
+          const Icon = item.icon;
+          const storyHref = item.storySlug ? `${storyBasePath.replace(/\/$/, "")}/${item.storySlug}` : null;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "group relative flex flex-col rounded-2xl border border-border/40 bg-card p-6 transition-colors",
+                "hover:border-primary/30"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "mb-5 inline-flex h-12 w-12 items-center justify-center rounded-xl",
+                      "bg-primary/10 text-primary"
+                    ),
+                    children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-6 w-6", "aria-hidden": true })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-foreground mb-2", children: item.problem }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground leading-relaxed mb-4 flex-1", children: item.solution }),
+                storyHref && /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    className: "justify-start px-0 h-auto py-0 text-sm group/link",
+                    asChild: true,
+                    children: /* @__PURE__ */ jsxRuntime.jsxs(
+                      "a",
+                      {
+                        href: storyHref,
+                        className: "inline-flex items-center gap-1 text-primary hover:underline",
+                        children: [
+                          storyLabel,
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            lucideReact.ArrowRight,
+                            {
+                              className: "h-3.5 w-3.5 transition-transform group-hover/link:translate-x-0.5",
+                              "aria-hidden": "true"
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  }
+                )
+              ]
+            },
+            `${item.problem}-${index}`
+          );
+        }) }),
+        children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-12", children })
+      ] })
+    }
+  );
+}
+
+exports.ProblemsSolvedSection = ProblemsSolvedSection;
+//# sourceMappingURL=problems-solved.js.map
+//# sourceMappingURL=problems-solved.js.map

package/dist/components/problems-solved.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/ui/button.tsx","../../src/components/problems-solved.tsx"],"names":["twMerge","clsx","cva","React","Slot","jsx","jsxs","ArrowRight"],"mappings":"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","file":"problems-solved.js","sourcesContent":["/**\n * Utility function to merge Tailwind CSS classes\n * Combines clsx and tailwind-merge for optimal class handling\n */\n\nimport { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Merge multiple class names intelligently\n * - Handles conditional classes via clsx\n * - Deduplicates and resolves Tailwind conflicts via tailwind-merge\n *\n * @example\n * ```ts\n * cn('px-4 py-2', 'bg-blue-500', { 'text-white': isActive })\n * // => 'px-4 py-2 bg-blue-500 text-white' (if isActive is true)\n * ```\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","import * as React from \"react\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../utils/cn\";\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground shadow hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90\",\n        outline:\n          \"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground\",\n        secondary:\n          \"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-9 px-4 py-2\",\n        sm: \"h-8 rounded-md px-3 text-xs\",\n        lg: \"h-10 rounded-md px-8\",\n        icon: \"h-9 w-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\nexport interface ButtonProps\n  extends\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\";\n    return (\n      <Comp\n        className={cn(buttonVariants({ variant, size, className }))}\n        ref={ref}\n        {...props}\n      />\n    );\n  },\n);\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };\n","\"use client\";\n\n/**\n * ProblemsSolvedSection Component\n *\n * A creative, conversion-oriented section that pairs a problem with the\n * product's solution. Each card highlights the pain point, the fix, and an\n * optional link to a deeper use-case story.\n *\n * @example\n * ```tsx\n * import { ProblemsSolvedSection } from '@burdenoff/website-sdk'\n *\n * <ProblemsSolvedSection\n *   eyebrow=\"Why teams switch\"\n *   title=\"Stop fighting your tools\"\n *   subtitle=\"We built VibeControls around the friction that actually slows engineering teams down.\"\n *   problems={[...]}\n * />\n * ```\n */\n\nimport type { ComponentType, ReactNode } from \"react\";\n\nimport { ArrowRight } from \"lucide-react\";\n\nimport { Button } from \"../ui/button\";\nimport { cn } from \"../utils/cn\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface ProblemSolved {\n  /** The pain point or before-state. */\n  problem: string;\n  /** How the product addresses the pain point. */\n  solution: string;\n  /** Lucide-style icon component. */\n  icon: ComponentType<{ className?: string; \"aria-hidden\"?: boolean }>;\n  /** Optional use-case story slug for linking to /use-cases/:slug. */\n  storySlug?: string;\n}\n\nexport interface ProblemsSolvedSectionProps {\n  /** Section eyebrow text. */\n  eyebrow?: string;\n  /** Section heading. */\n  title?: string;\n  /** Section subtitle. */\n  subtitle?: string;\n  /** Problem/solution pairs to render. */\n  problems: ProblemSolved[];\n  /** Base path for use-case story links. */\n  storyBasePath?: string;\n  /** Label for story links. */\n  storyLabel?: string;\n  /** Optional additional CSS class for the outer section. */\n  className?: string;\n  /** Optional child element rendered at the bottom of the section. */\n  children?: ReactNode;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport function ProblemsSolvedSection({\n  eyebrow,\n  title,\n  subtitle,\n  problems,\n  storyBasePath = \"/use-cases\",\n  storyLabel = \"See the story\",\n  className,\n  children,\n}: ProblemsSolvedSectionProps) {\n  return (\n    <section\n      className={cn(\n        \"py-16 md:py-24 px-4 sm:px-6 lg:px-8 bg-muted/30\",\n        className,\n      )}\n    >\n      <div className=\"max-w-7xl mx-auto\">\n        {(eyebrow || title || subtitle) && (\n          <div className=\"max-w-3xl mx-auto text-center mb-12 md:mb-16\">\n            {eyebrow && (\n              <p className=\"text-xs font-mono uppercase tracking-widest text-primary mb-4\">\n                {eyebrow}\n              </p>\n            )}\n            {title && (\n              <h2 className=\"text-3xl sm:text-4xl font-bold text-foreground mb-4\">\n                {title}\n              </h2>\n            )}\n            {subtitle && (\n              <p className=\"text-lg text-muted-foreground\">{subtitle}</p>\n            )}\n          </div>\n        )}\n\n        <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n          {problems.map((item, index) => {\n            const Icon = item.icon;\n            const storyHref = item.storySlug\n              ? `${storyBasePath.replace(/\\/$/, \"\")}/${item.storySlug}`\n              : null;\n\n            return (\n              <div\n                key={`${item.problem}-${index}`}\n                className={cn(\n                  \"group relative flex flex-col rounded-2xl border border-border/40 bg-card p-6 transition-colors\",\n                  \"hover:border-primary/30\",\n                )}\n              >\n                <div\n                  className={cn(\n                    \"mb-5 inline-flex h-12 w-12 items-center justify-center rounded-xl\",\n                    \"bg-primary/10 text-primary\",\n                  )}\n                >\n                  <Icon className=\"h-6 w-6\" aria-hidden={true} />\n                </div>\n\n                <h3 className=\"text-lg font-semibold text-foreground mb-2\">\n                  {item.problem}\n                </h3>\n\n                <p className=\"text-sm text-muted-foreground leading-relaxed mb-4 flex-1\">\n                  {item.solution}\n                </p>\n\n                {storyHref && (\n                  <Button\n                    variant=\"ghost\"\n                    className=\"justify-start px-0 h-auto py-0 text-sm group/link\"\n                    asChild\n                  >\n                    <a\n                      href={storyHref}\n                      className=\"inline-flex items-center gap-1 text-primary hover:underline\"\n                    >\n                      {storyLabel}\n                      <ArrowRight\n                        className=\"h-3.5 w-3.5 transition-transform group-hover/link:translate-x-0.5\"\n                        aria-hidden=\"true\"\n                      />\n                    </a>\n                  </Button>\n                )}\n              </div>\n            );\n          })}\n        </div>\n\n        {children && <div className=\"mt-12\">{children}</div>}\n      </div>\n    </section>\n  );\n}\n"]}

package/dist/components/problems-solved.mjs

@@ -0,0 +1,135 @@
+import { ArrowRight } from 'lucide-react';
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+function ProblemsSolvedSection({
+  eyebrow,
+  title,
+  subtitle,
+  problems,
+  storyBasePath = "/use-cases",
+  storyLabel = "See the story",
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      className: cn(
+        "py-16 md:py-24 px-4 sm:px-6 lg:px-8 bg-muted/30",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "max-w-7xl mx-auto", children: [
+        (eyebrow || title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "max-w-3xl mx-auto text-center mb-12 md:mb-16", children: [
+          eyebrow && /* @__PURE__ */ jsx("p", { className: "text-xs font-mono uppercase tracking-widest text-primary mb-4", children: eyebrow }),
+          title && /* @__PURE__ */ jsx("h2", { className: "text-3xl sm:text-4xl font-bold text-foreground mb-4", children: title }),
+          subtitle && /* @__PURE__ */ jsx("p", { className: "text-lg text-muted-foreground", children: subtitle })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: problems.map((item, index) => {
+          const Icon = item.icon;
+          const storyHref = item.storySlug ? `${storyBasePath.replace(/\/$/, "")}/${item.storySlug}` : null;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "group relative flex flex-col rounded-2xl border border-border/40 bg-card p-6 transition-colors",
+                "hover:border-primary/30"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "mb-5 inline-flex h-12 w-12 items-center justify-center rounded-xl",
+                      "bg-primary/10 text-primary"
+                    ),
+                    children: /* @__PURE__ */ jsx(Icon, { className: "h-6 w-6", "aria-hidden": true })
+                  }
+                ),
+                /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-foreground mb-2", children: item.problem }),
+                /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground leading-relaxed mb-4 flex-1", children: item.solution }),
+                storyHref && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    className: "justify-start px-0 h-auto py-0 text-sm group/link",
+                    asChild: true,
+                    children: /* @__PURE__ */ jsxs(
+                      "a",
+                      {
+                        href: storyHref,
+                        className: "inline-flex items-center gap-1 text-primary hover:underline",
+                        children: [
+                          storyLabel,
+                          /* @__PURE__ */ jsx(
+                            ArrowRight,
+                            {
+                              className: "h-3.5 w-3.5 transition-transform group-hover/link:translate-x-0.5",
+                              "aria-hidden": "true"
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  }
+                )
+              ]
+            },
+            `${item.problem}-${index}`
+          );
+        }) }),
+        children && /* @__PURE__ */ jsx("div", { className: "mt-12", children })
+      ] })
+    }
+  );
+}
+
+export { ProblemsSolvedSection };
+//# sourceMappingURL=problems-solved.mjs.map
+//# sourceMappingURL=problems-solved.mjs.map

package/dist/components/problems-solved.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/ui/button.tsx","../../src/components/problems-solved.tsx"],"names":["jsx"],"mappings":"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","file":"problems-solved.mjs","sourcesContent":["/**\n * Utility function to merge Tailwind CSS classes\n * Combines clsx and tailwind-merge for optimal class handling\n */\n\nimport { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Merge multiple class names intelligently\n * - Handles conditional classes via clsx\n * - Deduplicates and resolves Tailwind conflicts via tailwind-merge\n *\n * @example\n * ```ts\n * cn('px-4 py-2', 'bg-blue-500', { 'text-white': isActive })\n * // => 'px-4 py-2 bg-blue-500 text-white' (if isActive is true)\n * ```\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","import * as React from \"react\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../utils/cn\";\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground shadow hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90\",\n        outline:\n          \"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground\",\n        secondary:\n          \"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-9 px-4 py-2\",\n        sm: \"h-8 rounded-md px-3 text-xs\",\n        lg: \"h-10 rounded-md px-8\",\n        icon: \"h-9 w-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\nexport interface ButtonProps\n  extends\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\";\n    return (\n      <Comp\n        className={cn(buttonVariants({ variant, size, className }))}\n        ref={ref}\n        {...props}\n      />\n    );\n  },\n);\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };\n","\"use client\";\n\n/**\n * ProblemsSolvedSection Component\n *\n * A creative, conversion-oriented section that pairs a problem with the\n * product's solution. Each card highlights the pain point, the fix, and an\n * optional link to a deeper use-case story.\n *\n * @example\n * ```tsx\n * import { ProblemsSolvedSection } from '@burdenoff/website-sdk'\n *\n * <ProblemsSolvedSection\n *   eyebrow=\"Why teams switch\"\n *   title=\"Stop fighting your tools\"\n *   subtitle=\"We built VibeControls around the friction that actually slows engineering teams down.\"\n *   problems={[...]}\n * />\n * ```\n */\n\nimport type { ComponentType, ReactNode } from \"react\";\n\nimport { ArrowRight } from \"lucide-react\";\n\nimport { Button } from \"../ui/button\";\nimport { cn } from \"../utils/cn\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface ProblemSolved {\n  /** The pain point or before-state. */\n  problem: string;\n  /** How the product addresses the pain point. */\n  solution: string;\n  /** Lucide-style icon component. */\n  icon: ComponentType<{ className?: string; \"aria-hidden\"?: boolean }>;\n  /** Optional use-case story slug for linking to /use-cases/:slug. */\n  storySlug?: string;\n}\n\nexport interface ProblemsSolvedSectionProps {\n  /** Section eyebrow text. */\n  eyebrow?: string;\n  /** Section heading. */\n  title?: string;\n  /** Section subtitle. */\n  subtitle?: string;\n  /** Problem/solution pairs to render. */\n  problems: ProblemSolved[];\n  /** Base path for use-case story links. */\n  storyBasePath?: string;\n  /** Label for story links. */\n  storyLabel?: string;\n  /** Optional additional CSS class for the outer section. */\n  className?: string;\n  /** Optional child element rendered at the bottom of the section. */\n  children?: ReactNode;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport function ProblemsSolvedSection({\n  eyebrow,\n  title,\n  subtitle,\n  problems,\n  storyBasePath = \"/use-cases\",\n  storyLabel = \"See the story\",\n  className,\n  children,\n}: ProblemsSolvedSectionProps) {\n  return (\n    <section\n      className={cn(\n        \"py-16 md:py-24 px-4 sm:px-6 lg:px-8 bg-muted/30\",\n        className,\n      )}\n    >\n      <div className=\"max-w-7xl mx-auto\">\n        {(eyebrow || title || subtitle) && (\n          <div className=\"max-w-3xl mx-auto text-center mb-12 md:mb-16\">\n            {eyebrow && (\n              <p className=\"text-xs font-mono uppercase tracking-widest text-primary mb-4\">\n                {eyebrow}\n              </p>\n            )}\n            {title && (\n              <h2 className=\"text-3xl sm:text-4xl font-bold text-foreground mb-4\">\n                {title}\n              </h2>\n            )}\n            {subtitle && (\n              <p className=\"text-lg text-muted-foreground\">{subtitle}</p>\n            )}\n          </div>\n        )}\n\n        <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n          {problems.map((item, index) => {\n            const Icon = item.icon;\n            const storyHref = item.storySlug\n              ? `${storyBasePath.replace(/\\/$/, \"\")}/${item.storySlug}`\n              : null;\n\n            return (\n              <div\n                key={`${item.problem}-${index}`}\n                className={cn(\n                  \"group relative flex flex-col rounded-2xl border border-border/40 bg-card p-6 transition-colors\",\n                  \"hover:border-primary/30\",\n                )}\n              >\n                <div\n                  className={cn(\n                    \"mb-5 inline-flex h-12 w-12 items-center justify-center rounded-xl\",\n                    \"bg-primary/10 text-primary\",\n                  )}\n                >\n                  <Icon className=\"h-6 w-6\" aria-hidden={true} />\n                </div>\n\n                <h3 className=\"text-lg font-semibold text-foreground mb-2\">\n                  {item.problem}\n                </h3>\n\n                <p className=\"text-sm text-muted-foreground leading-relaxed mb-4 flex-1\">\n                  {item.solution}\n                </p>\n\n                {storyHref && (\n                  <Button\n                    variant=\"ghost\"\n                    className=\"justify-start px-0 h-auto py-0 text-sm group/link\"\n                    asChild\n                  >\n                    <a\n                      href={storyHref}\n                      className=\"inline-flex items-center gap-1 text-primary hover:underline\"\n                    >\n                      {storyLabel}\n                      <ArrowRight\n                        className=\"h-3.5 w-3.5 transition-transform group-hover/link:translate-x-0.5\"\n                        aria-hidden=\"true\"\n                      />\n                    </a>\n                  </Button>\n                )}\n              </div>\n            );\n          })}\n        </div>\n\n        {children && <div className=\"mt-12\">{children}</div>}\n      </div>\n    </section>\n  );\n}\n"]}

package/dist/components/website-switcher.d.mts

@@ -0,0 +1,27 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface WebsiteSwitcherProduct {
+    /** Stable identifier for the product. */
+    slug: string;
+    /** Human-readable product name. */
+    name: string;
+    /** URL to the product logo (absolute or relative). */
+    logoUrl?: string | null;
+    /** Product marketing site URL. */
+    websiteUrl: string;
+}
+interface WebsiteSwitcherProps {
+    /** All Burdenoff ecosystem products to display. */
+    products: WebsiteSwitcherProduct[];
+    /** Accessible label for the trigger. */
+    triggerLabel?: string;
+    /** Placeholder text for the search input. */
+    searchPlaceholder?: string;
+    /** Empty-state text when filtering returns no results. */
+    emptyText?: string;
+    /** Optional additional CSS class for the trigger. */
+    className?: string;
+}
+declare function WebsiteSwitcher({ products, triggerLabel, searchPlaceholder, emptyText, className, }: WebsiteSwitcherProps): react_jsx_runtime.JSX.Element;
+
+export { WebsiteSwitcher, type WebsiteSwitcherProduct, type WebsiteSwitcherProps };

package/dist/components/website-switcher.d.ts

@@ -0,0 +1,27 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface WebsiteSwitcherProduct {
+    /** Stable identifier for the product. */
+    slug: string;
+    /** Human-readable product name. */
+    name: string;
+    /** URL to the product logo (absolute or relative). */
+    logoUrl?: string | null;
+    /** Product marketing site URL. */
+    websiteUrl: string;
+}
+interface WebsiteSwitcherProps {
+    /** All Burdenoff ecosystem products to display. */
+    products: WebsiteSwitcherProduct[];
+    /** Accessible label for the trigger. */
+    triggerLabel?: string;
+    /** Placeholder text for the search input. */
+    searchPlaceholder?: string;
+    /** Empty-state text when filtering returns no results. */
+    emptyText?: string;
+    /** Optional additional CSS class for the trigger. */
+    className?: string;
+}
+declare function WebsiteSwitcher({ products, triggerLabel, searchPlaceholder, emptyText, className, }: WebsiteSwitcherProps): react_jsx_runtime.JSX.Element;
+
+export { WebsiteSwitcher, type WebsiteSwitcherProduct, type WebsiteSwitcherProps };

package/dist/components/website-switcher.js

@@ -0,0 +1,168 @@
+'use strict';
+
+var React = require('react');
+var DropdownMenu = require('@radix-ui/react-dropdown-menu');
+var lucideReact = require('lucide-react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var DropdownMenu__namespace = /*#__PURE__*/_interopNamespace(DropdownMenu);
+
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var Input = React__namespace.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type,
+        className: cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+function normalizeSearch(value) {
+  return value.toLowerCase().trim();
+}
+function filterProducts(products, query) {
+  const normalized = normalizeSearch(query);
+  if (!normalized) return products;
+  return products.filter((p) => normalizeSearch(p.name).includes(normalized));
+}
+function WebsiteSwitcher({
+  products,
+  triggerLabel = "Explore products",
+  searchPlaceholder = "Find a product\u2026",
+  emptyText = "No products match your search.",
+  className
+}) {
+  const [open, setOpen] = React.useState(false);
+  const [query, setQuery] = React.useState("");
+  const filtered = React.useMemo(
+    () => filterProducts(products, query),
+    [products, query]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu__namespace.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      DropdownMenu__namespace.Trigger,
+      {
+        className: cn(
+          "inline-flex items-center gap-1.5 text-sm font-medium transition-colors",
+          "text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring rounded-md",
+          className
+        ),
+        "aria-label": triggerLabel,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Globe, { className: "h-4 w-4", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: triggerLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            lucideReact.ChevronDown,
+            {
+              className: cn(
+                "h-3.5 w-3.5 transition-transform duration-200",
+                open && "rotate-180"
+              ),
+              "aria-hidden": "true"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      DropdownMenu__namespace.Content,
+      {
+        className: "z-50 min-w-[16rem] max-w-[20rem] rounded-lg border border-border/60 bg-popover p-2 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2",
+        sideOffset: 8,
+        align: "end",
+        avoidCollisions: true,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-2 pb-2 pt-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-muted-foreground mb-2", children: "Burdenoff ecosystem" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                lucideReact.Search,
+                {
+                  className: "absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground",
+                  "aria-hidden": "true"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Input,
+                {
+                  type: "search",
+                  value: query,
+                  onChange: (e) => setQuery(e.target.value),
+                  placeholder: searchPlaceholder,
+                  className: "h-8 pl-8 text-sm",
+                  "aria-label": searchPlaceholder,
+                  onKeyDown: (e) => {
+                    if (e.key === "Escape") {
+                      setQuery("");
+                    }
+                  }
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Separator, { className: "my-1 h-px bg-border/60" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-[min(60vh,24rem)] overflow-y-auto py-1", children: filtered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-4 text-center text-sm text-muted-foreground", children: emptyText }) : filtered.map((product) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Item, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "a",
+            {
+              href: product.websiteUrl,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: cn(
+                "flex items-center gap-3 rounded-md px-2 py-2 text-sm outline-none",
+                "text-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+              ),
+              children: [
+                product.logoUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "img",
+                  {
+                    src: product.logoUrl,
+                    alt: "",
+                    "aria-hidden": "true",
+                    className: "h-5 w-5 shrink-0 rounded object-contain"
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded bg-primary/10 text-[10px] font-bold text-primary", children: product.name.charAt(0) }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: product.name })
+              ]
+            }
+          ) }, product.slug)) }),
+          /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Arrow, { className: "fill-popover" })
+        ]
+      }
+    ) })
+  ] });
+}
+
+exports.WebsiteSwitcher = WebsiteSwitcher;
+//# sourceMappingURL=website-switcher.js.map
+//# sourceMappingURL=website-switcher.js.map

package/dist/components/website-switcher.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/ui/input.tsx","../../src/components/website-switcher.tsx"],"names":["twMerge","clsx","React","jsx","useState","useMemo","jsxs","DropdownMenu","Globe","ChevronDown","Search"],"mappings":"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","file":"website-switcher.js","sourcesContent":["/**\n * Utility function to merge Tailwind CSS classes\n * Combines clsx and tailwind-merge for optimal class handling\n */\n\nimport { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Merge multiple class names intelligently\n * - Handles conditional classes via clsx\n * - Deduplicates and resolves Tailwind conflicts via tailwind-merge\n *\n * @example\n * ```ts\n * cn('px-4 py-2', 'bg-blue-500', { 'text-white': isActive })\n * // => 'px-4 py-2 bg-blue-500 text-white' (if isActive is true)\n * ```\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","import * as React from \"react\";\n\nimport { cn } from \"../utils/cn\";\n\nconst Input = React.forwardRef<HTMLInputElement, React.ComponentProps<\"input\">>(\n  ({ className, type, ...props }, ref) => {\n    return (\n      <input\n        type={type}\n        className={cn(\n          \"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm\",\n          className,\n        )}\n        ref={ref}\n        {...props}\n      />\n    );\n  },\n);\nInput.displayName = \"Input\";\n\nexport { Input };\n","\"use client\";\n\n/**\n * WebsiteSwitcher Component\n *\n * A dropdown menu for navigating between Burdenoff ecosystem product websites.\n * Includes a search filter and renders each product with its logo and name.\n *\n * @example\n * ```tsx\n * import { WebsiteSwitcher } from '@burdenoff/website-sdk'\n *\n * <WebsiteSwitcher\n *   products={[\n *     { slug: 'vibecontrols', name: 'VibeControls', logoUrl: '/vibe.svg', websiteUrl: 'https://vibecontrols.com' },\n *     { slug: 'fluidgrids', name: 'FluidGrids', logoUrl: '/fg.svg', websiteUrl: 'https://fluidgrids.com' },\n *   ]}\n * />\n * ```\n */\n\nimport { useMemo, useState } from \"react\";\n\nimport * as DropdownMenu from \"@radix-ui/react-dropdown-menu\";\nimport { ChevronDown, Globe, Search } from \"lucide-react\";\n\nimport { Input } from \"../ui/input\";\nimport { cn } from \"../utils/cn\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface WebsiteSwitcherProduct {\n  /** Stable identifier for the product. */\n  slug: string;\n  /** Human-readable product name. */\n  name: string;\n  /** URL to the product logo (absolute or relative). */\n  logoUrl?: string | null;\n  /** Product marketing site URL. */\n  websiteUrl: string;\n}\n\nexport interface WebsiteSwitcherProps {\n  /** All Burdenoff ecosystem products to display. */\n  products: WebsiteSwitcherProduct[];\n  /** Accessible label for the trigger. */\n  triggerLabel?: string;\n  /** Placeholder text for the search input. */\n  searchPlaceholder?: string;\n  /** Empty-state text when filtering returns no results. */\n  emptyText?: string;\n  /** Optional additional CSS class for the trigger. */\n  className?: string;\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nfunction normalizeSearch(value: string): string {\n  return value.toLowerCase().trim();\n}\n\nfunction filterProducts(\n  products: WebsiteSwitcherProduct[],\n  query: string,\n): WebsiteSwitcherProduct[] {\n  const normalized = normalizeSearch(query);\n  if (!normalized) return products;\n  return products.filter((p) => normalizeSearch(p.name).includes(normalized));\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport function WebsiteSwitcher({\n  products,\n  triggerLabel = \"Explore products\",\n  searchPlaceholder = \"Find a product…\",\n  emptyText = \"No products match your search.\",\n  className,\n}: WebsiteSwitcherProps) {\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState(\"\");\n\n  const filtered = useMemo(\n    () => filterProducts(products, query),\n    [products, query],\n  );\n\n  return (\n    <DropdownMenu.Root open={open} onOpenChange={setOpen}>\n      <DropdownMenu.Trigger\n        className={cn(\n          \"inline-flex items-center gap-1.5 text-sm font-medium transition-colors\",\n          \"text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring rounded-md\",\n          className,\n        )}\n        aria-label={triggerLabel}\n      >\n        <Globe className=\"h-4 w-4\" aria-hidden=\"true\" />\n        <span className=\"hidden sm:inline\">{triggerLabel}</span>\n        <ChevronDown\n          className={cn(\n            \"h-3.5 w-3.5 transition-transform duration-200\",\n            open && \"rotate-180\",\n          )}\n          aria-hidden=\"true\"\n        />\n      </DropdownMenu.Trigger>\n\n      <DropdownMenu.Portal>\n        <DropdownMenu.Content\n          className=\"z-50 min-w-[16rem] max-w-[20rem] rounded-lg border border-border/60 bg-popover p-2 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2\"\n          sideOffset={8}\n          align=\"end\"\n          avoidCollisions\n        >\n          <div className=\"px-2 pb-2 pt-1\">\n            <p className=\"text-xs font-medium text-muted-foreground mb-2\">\n              Burdenoff ecosystem\n            </p>\n            <div className=\"relative\">\n              <Search\n                className=\"absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground\"\n                aria-hidden=\"true\"\n              />\n              <Input\n                type=\"search\"\n                value={query}\n                onChange={(e) => setQuery(e.target.value)}\n                placeholder={searchPlaceholder}\n                className=\"h-8 pl-8 text-sm\"\n                aria-label={searchPlaceholder}\n                onKeyDown={(e) => {\n                  if (e.key === \"Escape\") {\n                    setQuery(\"\");\n                  }\n                }}\n              />\n            </div>\n          </div>\n\n          <DropdownMenu.Separator className=\"my-1 h-px bg-border/60\" />\n\n          <div className=\"max-h-[min(60vh,24rem)] overflow-y-auto py-1\">\n            {filtered.length === 0 ? (\n              <div className=\"px-3 py-4 text-center text-sm text-muted-foreground\">\n                {emptyText}\n              </div>\n            ) : (\n              filtered.map((product) => (\n                <DropdownMenu.Item key={product.slug} asChild>\n                  <a\n                    href={product.websiteUrl}\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                    className={cn(\n                      \"flex items-center gap-3 rounded-md px-2 py-2 text-sm outline-none\",\n                      \"text-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\",\n                    )}\n                  >\n                    {product.logoUrl ? (\n                      <img\n                        src={product.logoUrl}\n                        alt=\"\"\n                        aria-hidden=\"true\"\n                        className=\"h-5 w-5 shrink-0 rounded object-contain\"\n                      />\n                    ) : (\n                      <span className=\"flex h-5 w-5 shrink-0 items-center justify-center rounded bg-primary/10 text-[10px] font-bold text-primary\">\n                        {product.name.charAt(0)}\n                      </span>\n                    )}\n                    <span className=\"truncate\">{product.name}</span>\n                  </a>\n                </DropdownMenu.Item>\n              ))\n            )}\n          </div>\n\n          <DropdownMenu.Arrow className=\"fill-popover\" />\n        </DropdownMenu.Content>\n      </DropdownMenu.Portal>\n    </DropdownMenu.Root>\n  );\n}\n"]}