@omnibase/shadcn 0.1.0

package/dist/index.js

@@ -0,0 +1,748 @@
+// src/components/ui/card.tsx
+import "react";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/ui/card.tsx
+import { jsx } from "react/jsx-runtime";
+function Card({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card",
+      className: cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-header",
+      className: cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-title",
+      className: cn("leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function CardDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+function CardContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-content",
+      className: cn("px-6", className),
+      ...props
+    }
+  );
+}
+function CardFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-footer",
+      className: cn("flex items-center px-6 [.border-t]:pt-6", className),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/button.tsx
+import "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx2(
+    Comp,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/input.tsx
+import "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsx3(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/label.tsx
+import "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function Label({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(
+    LabelPrimitive.Root,
+    {
+      "data-slot": "label",
+      className: cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/form/index.tsx
+import { jsx as jsx5, jsxs } from "react/jsx-runtime";
+function isUiNodeInputAttributes(attributes) {
+  return attributes && typeof attributes === "object" && "name" in attributes && "type" in attributes;
+}
+function CustomFlowForm({ flow, Header }) {
+  const hasSubmitButton = flow.ui.nodes.some(
+    (node) => isUiNodeInputAttributes(node.attributes) && node.attributes.type === "submit"
+  );
+  return /* @__PURE__ */ jsx5("div", { children: /* @__PURE__ */ jsx5(Card, { className: "w-full max-w-md mx-auto", children: /* @__PURE__ */ jsxs("form", { action: flow.ui.action, method: flow.ui.method, children: [
+    Header && /* @__PURE__ */ jsx5(CardHeader, { children: /* @__PURE__ */ jsx5(CardTitle, { className: "text-center pb-4", children: Header }) }),
+    /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
+      flow.ui.nodes.map((node) => {
+        if (isUiNodeInputAttributes(node.attributes)) {
+          const isSubmitButton = node.attributes.type === "submit";
+          const isHiddenField = node.attributes.type === "hidden";
+          const isVisibleField = !isHiddenField && !isSubmitButton;
+          if (isHiddenField) {
+            return /* @__PURE__ */ jsx5(
+              "input",
+              {
+                name: node.attributes.name,
+                type: "hidden",
+                value: node.attributes.value || "",
+                readOnly: true
+              },
+              node.attributes.name
+            );
+          }
+          if (isSubmitButton) {
+            return /* @__PURE__ */ jsx5(
+              Button,
+              {
+                type: "submit",
+                name: node.attributes.name,
+                value: node.attributes.value || "",
+                className: "w-full mt-2",
+                children: node.meta.label?.text || node.attributes.value || "Submit"
+              },
+              node.attributes.name
+            );
+          }
+          if (isVisibleField && [
+            "default",
+            "password",
+            "code",
+            "webauthn",
+            "passkey",
+            "totp",
+            "lookup_secret"
+          ].includes(node.group)) {
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "space-y-2",
+                children: [
+                  /* @__PURE__ */ jsxs(Label, { htmlFor: node.attributes.name, children: [
+                    node.meta.label?.text,
+                    node.attributes.required && /* @__PURE__ */ jsx5("span", { className: "text-destructive ml-1", children: "*" })
+                  ] }),
+                  /* @__PURE__ */ jsx5(
+                    Input,
+                    {
+                      id: node.attributes.name,
+                      name: node.attributes.name,
+                      type: node.attributes.type,
+                      defaultValue: node.attributes.value || "",
+                      required: node.attributes.required,
+                      placeholder: `Enter your ${node.meta.label?.text?.toLowerCase() || node.attributes.name}`
+                    }
+                  )
+                ]
+              },
+              node.meta.label?.id || node.attributes.name
+            );
+          }
+        }
+        return null;
+      }),
+      !hasSubmitButton && /* @__PURE__ */ jsx5(Button, { type: "submit", className: "w-full", children: "Submit" })
+    ] })
+  ] }) }) });
+}
+
+// src/tenant-switcher/index.tsx
+import * as React6 from "react";
+
+// src/components/ui/select.tsx
+import * as React5 from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+var Select = SelectPrimitive.Root;
+var SelectValue = SelectPrimitive.Value;
+var SelectTrigger = React5.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs2(
+  SelectPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx6(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx6(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectScrollUpButton = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
+  SelectPrimitive.ScrollUpButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx6(ChevronUp, { className: "h-4 w-4" })
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+var SelectScrollDownButton = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
+  SelectPrimitive.ScrollDownButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx6(ChevronDown, { className: "h-4 w-4" })
+  }
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+var SelectContent = React5.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx6(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs2(
+  SelectPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground 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 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+      className
+    ),
+    position,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx6(SelectScrollUpButton, {}),
+      /* @__PURE__ */ jsx6(
+        SelectPrimitive.Viewport,
+        {
+          className: cn(
+            "p-1",
+            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          ),
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx6(SelectScrollDownButton, {})
+    ]
+  }
+) }));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectLabel = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
+  SelectPrimitive.Label,
+  {
+    ref,
+    className: cn("px-2 py-1.5 text-sm font-semibold", className),
+    ...props
+  }
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+var SelectItem = React5.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs2(
+  SelectPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx6("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx6(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx6(Check, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx6(SelectPrimitive.ItemText, { children })
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+var SelectSeparator = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
+  SelectPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+// src/tenant-switcher/index.tsx
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+function SwitchActiveTenant({
+  tenants,
+  currentTenantId,
+  formAction,
+  placeholder = "Select tenant...",
+  className,
+  onTenantChange
+}) {
+  const [isLoading, setIsLoading] = React6.useState(false);
+  const handleTenantChange = async (tenantId) => {
+    if (tenantId === currentTenantId) return;
+    setIsLoading(true);
+    try {
+      onTenantChange?.(tenantId);
+      if (formAction) {
+        const formData = new FormData();
+        formData.append("tenant_id", tenantId);
+        await formAction(formData);
+      }
+    } catch (error) {
+      console.error("Failed to switch tenant:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const currentTenant = tenants.find((tenant) => tenant.id === currentTenantId);
+  return /* @__PURE__ */ jsxs3(
+    Select,
+    {
+      value: currentTenantId,
+      onValueChange: handleTenantChange,
+      disabled: isLoading,
+      children: [
+        /* @__PURE__ */ jsx7(SelectTrigger, { className: cn("max-w-64", className), children: /* @__PURE__ */ jsx7(SelectValue, { placeholder, children: currentTenant ? currentTenant.name : placeholder }) }),
+        /* @__PURE__ */ jsx7(SelectContent, { children: tenants.map((tenant) => /* @__PURE__ */ jsx7(SelectItem, { value: tenant.id, children: tenant.name }, tenant.id)) })
+      ]
+    }
+  );
+}
+
+// src/pricing-table/index.tsx
+import * as React7 from "react";
+import { Check as Check2, Star, ChevronLeft, ChevronRight } from "lucide-react";
+import { Fragment, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+var getCurrencySymbol = (currency) => {
+  const symbols = {
+    USD: "$",
+    EUR: "\u20AC",
+    GBP: "\xA3",
+    JPY: "\xA5",
+    CAD: "C$",
+    AUD: "A$"
+  };
+  return symbols[currency] || currency;
+};
+var formatPrice = (price) => {
+  const priceUI = price.ui || {};
+  if (priceUI.price_display?.custom_text)
+    return priceUI.price_display.custom_text;
+  if (!price.amount || price.amount === 0) return "Free";
+  const amount = price.amount / 100;
+  const currency = price.currency.toUpperCase();
+  let formattedPrice = priceUI.price_display?.show_currency !== false ? `${getCurrencySymbol(currency)}${amount.toFixed(2)}` : amount.toFixed(2);
+  if (priceUI.price_display?.suffix)
+    formattedPrice += ` ${priceUI.price_display.suffix}`;
+  return formattedPrice;
+};
+var formatBillingPeriod = (price) => {
+  const priceUI = price.ui || {};
+  if (priceUI.billing_period) return priceUI.billing_period;
+  if (price.interval) {
+    const count = price.interval_count || 1;
+    return `per ${count === 1 ? price.interval : `${count} ${price.interval}s`}`;
+  }
+  return "one-time";
+};
+function PricingCard({
+  product,
+  isSelected,
+  onPriceSelect,
+  displayedPrice
+}) {
+  const ui = product.ui || {};
+  const isHighlighted = ui.highlighted;
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: cn(
+        "flex flex-col h-full pb-6",
+        isHighlighted ? "relative" : ""
+      ),
+      children: [
+        /* @__PURE__ */ jsx8("div", { className: "h-4 flex-shrink-0 relative", children: ui.badge && /* @__PURE__ */ jsx8("div", { className: "absolute top-0 left-1/2 transform -translate-x-1/2 z-10", children: /* @__PURE__ */ jsxs4("div", { className: "bg-primary text-primary-foreground px-3 py-1 rounded-full text-sm font-medium flex items-center gap-1 whitespace-nowrap shadow-md", children: [
+          ui.badge === "Most Popular" && /* @__PURE__ */ jsx8(Star, { className: "w-3 h-3" }),
+          ui.badge
+        ] }) }) }),
+        /* @__PURE__ */ jsxs4(
+          Card,
+          {
+            className: cn(
+              "flex flex-col flex-1 w-full transition-all duration-200 hover:shadow-lg",
+              isHighlighted && "border-primary shadow-lg",
+              isSelected && "ring-2 ring-primary"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs4(CardHeader, { className: "text-center", children: [
+                /* @__PURE__ */ jsx8(CardTitle, { className: "text-xl font-bold", children: ui.display_name || product.name }),
+                ui.tagline && /* @__PURE__ */ jsx8(CardDescription, { className: "text-base", children: ui.tagline })
+              ] }),
+              /* @__PURE__ */ jsxs4(CardContent, { className: "flex-1 space-y-6", children: [
+                /* @__PURE__ */ jsxs4("div", { className: "text-center", children: [
+                  /* @__PURE__ */ jsx8("div", { className: "text-3xl font-bold", children: formatPrice(displayedPrice) }),
+                  /* @__PURE__ */ jsx8("div", { className: "text-sm text-muted-foreground", children: formatBillingPeriod(displayedPrice) })
+                ] }),
+                (ui.features && ui.features.length > 0 || displayedPrice.ui?.features?.length > 0 || displayedPrice.ui?.limits?.length > 0) && /* @__PURE__ */ jsxs4("div", { className: "space-y-4", children: [
+                  ui.features && ui.features.length > 0 && /* @__PURE__ */ jsxs4("div", { className: "space-y-2", children: [
+                    /* @__PURE__ */ jsx8("h4", { className: "font-medium text-sm text-muted-foreground uppercase tracking-wide", children: "Features" }),
+                    /* @__PURE__ */ jsx8("ul", { className: "space-y-2", children: ui.features.map((feature, index) => /* @__PURE__ */ jsxs4("li", { className: "flex items-start gap-2", children: [
+                      /* @__PURE__ */ jsx8(Check2, { className: "w-4 h-4 text-green-500 mt-0.5 flex-shrink-0" }),
+                      /* @__PURE__ */ jsx8("span", { className: "text-sm", children: feature })
+                    ] }, index)) })
+                  ] }),
+                  displayedPrice.ui?.features && displayedPrice.ui.features.length > 0 && /* @__PURE__ */ jsxs4("div", { className: "space-y-2", children: [
+                    /* @__PURE__ */ jsx8("h4", { className: "font-medium text-sm text-muted-foreground uppercase tracking-wide", children: "This Plan" }),
+                    /* @__PURE__ */ jsx8("ul", { className: "space-y-2", children: displayedPrice.ui.features.map(
+                      (feature, index) => /* @__PURE__ */ jsxs4("li", { className: "flex items-start gap-2", children: [
+                        /* @__PURE__ */ jsx8(Check2, { className: "w-4 h-4 text-blue-500 mt-0.5 flex-shrink-0" }),
+                        /* @__PURE__ */ jsx8("span", { className: "text-sm", children: feature })
+                      ] }, index)
+                    ) })
+                  ] }),
+                  displayedPrice.ui?.limits && displayedPrice.ui.limits.length > 0 && /* @__PURE__ */ jsxs4("div", { className: "space-y-2", children: [
+                    /* @__PURE__ */ jsx8("h4", { className: "font-medium text-sm text-muted-foreground uppercase tracking-wide", children: "Usage Limits" }),
+                    /* @__PURE__ */ jsx8("ul", { className: "space-y-1", children: displayedPrice.ui.limits.map(
+                      (limit, index) => /* @__PURE__ */ jsx8(
+                        "li",
+                        {
+                          className: "text-sm text-muted-foreground",
+                          children: limit.text
+                        },
+                        index
+                      )
+                    ) })
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx8(CardFooter, { children: /* @__PURE__ */ jsx8(
+                Button,
+                {
+                  className: "w-full",
+                  variant: isHighlighted ? "default" : "outline",
+                  size: "lg",
+                  onClick: () => onPriceSelect?.(displayedPrice.id, product.id),
+                  children: ui.cta_text || "Choose Plan"
+                }
+              ) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var CARD_WIDTH = 320;
+var GAP = 24;
+function PricingTable({
+  products,
+  selectedPriceId,
+  onPriceSelect,
+  className,
+  showPricingToggle = false,
+  defaultInterval = "month"
+}) {
+  const [selectedInterval, setSelectedInterval] = React7.useState(defaultInterval);
+  const [carouselIndex, setCarouselIndex] = React7.useState(0);
+  const sortedProducts = React7.useMemo(
+    () => [...products].sort(
+      (a, b) => (a.ui?.sort_order ?? 999) - (b.ui?.sort_order ?? 999)
+    ),
+    [products]
+  );
+  const hasMultipleIntervals = React7.useMemo(
+    () => products.some(
+      (p) => new Set(p.prices.map((price) => price.interval)).size > 1
+    ),
+    [products]
+  );
+  const getDisplayedPrice = (product) => product.prices.find((p) => p.interval === selectedInterval) || product.prices[0];
+  const renderCard = (product) => {
+    const displayedPrice = getDisplayedPrice(product);
+    return /* @__PURE__ */ jsx8(
+      PricingCard,
+      {
+        product,
+        displayedPrice,
+        isSelected: selectedPriceId === displayedPrice.id,
+        onPriceSelect
+      }
+    );
+  };
+  const desktopCarousel = /* @__PURE__ */ jsxs4("div", { className: "relative max-w-7xl mx-auto", children: [
+    /* @__PURE__ */ jsx8(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        className: "absolute left-0 top-1/2 transform -translate-y-1/2 -translate-x-4 z-10 bg-white shadow-lg border hover:bg-gray-50 disabled:opacity-50",
+        onClick: () => setCarouselIndex(Math.max(0, carouselIndex - 1)),
+        disabled: carouselIndex === 0,
+        children: /* @__PURE__ */ jsx8(ChevronLeft, { className: "w-4 h-4" })
+      }
+    ),
+    /* @__PURE__ */ jsx8(
+      "div",
+      {
+        className: "overflow-hidden mx-auto",
+        style: { width: `${3 * CARD_WIDTH + 2 * GAP}px` },
+        children: /* @__PURE__ */ jsx8(
+          "div",
+          {
+            className: "flex items-stretch transition-transform duration-300 ease-in-out",
+            style: {
+              transform: `translateX(-${carouselIndex * (CARD_WIDTH + GAP)}px)`,
+              gap: `${GAP}px`
+            },
+            children: sortedProducts.map((p) => /* @__PURE__ */ jsx8(
+              "div",
+              {
+                style: { width: `${CARD_WIDTH}px` },
+                className: "flex-shrink-0",
+                children: renderCard(p)
+              },
+              p.id
+            ))
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx8(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        className: "absolute right-0 top-1/2 transform -translate-y-1/2 translate-x-4 z-10 bg-white shadow-lg border hover:bg-gray-50 disabled:opacity-50",
+        onClick: () => setCarouselIndex(
+          Math.min(sortedProducts.length - 3, carouselIndex + 1)
+        ),
+        disabled: carouselIndex >= sortedProducts.length - 3,
+        children: /* @__PURE__ */ jsx8(ChevronRight, { className: "w-4 h-4" })
+      }
+    ),
+    /* @__PURE__ */ jsx8("div", { className: "flex justify-center mt-6 space-x-2", children: Array.from(
+      { length: Math.max(1, sortedProducts.length - 2) },
+      (_, i) => /* @__PURE__ */ jsx8(
+        "button",
+        {
+          onClick: () => setCarouselIndex(i),
+          className: cn(
+            "w-2 h-2 rounded-full transition-colors",
+            i === carouselIndex ? "bg-primary" : "bg-gray-300"
+          ),
+          "aria-label": `Go to slide ${i + 1}`
+        },
+        i
+      )
+    ) })
+  ] });
+  const staticLayout = /* @__PURE__ */ jsx8(
+    "div",
+    {
+      className: "flex flex-row items-stretch justify-center",
+      style: { gap: `${GAP}px` },
+      children: sortedProducts.map((p) => /* @__PURE__ */ jsx8(
+        "div",
+        {
+          style: { width: `${CARD_WIDTH}px` },
+          className: "flex-shrink-0",
+          children: renderCard(p)
+        },
+        p.id
+      ))
+    }
+  );
+  return /* @__PURE__ */ jsxs4("div", { className: cn("w-full", className), children: [
+    showPricingToggle && hasMultipleIntervals && /* @__PURE__ */ jsx8("div", { className: "flex justify-center mb-4", children: /* @__PURE__ */ jsxs4("div", { className: "flex bg-gray-100 p-1 rounded-lg", children: [
+      /* @__PURE__ */ jsx8(
+        Button,
+        {
+          variant: selectedInterval === "month" ? "default" : "ghost",
+          size: "sm",
+          onClick: () => setSelectedInterval("month"),
+          className: "rounded-md",
+          children: "Monthly"
+        }
+      ),
+      /* @__PURE__ */ jsx8(
+        Button,
+        {
+          variant: selectedInterval === "year" ? "default" : "ghost",
+          size: "sm",
+          onClick: () => setSelectedInterval("year"),
+          className: "rounded-md",
+          children: "Yearly"
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxs4("div", { className: "lg:hidden relative", children: [
+      /* @__PURE__ */ jsx8(
+        "div",
+        {
+          className: "overflow-hidden mx-auto",
+          style: { width: `${CARD_WIDTH}px` },
+          children: /* @__PURE__ */ jsx8(
+            "div",
+            {
+              className: "flex transition-transform duration-300 ease-in-out items-stretch",
+              style: {
+                transform: `translateX(-${carouselIndex * CARD_WIDTH}px)`
+              },
+              children: sortedProducts.map((product) => /* @__PURE__ */ jsx8(
+                "div",
+                {
+                  className: "flex-shrink-0",
+                  style: { width: `${CARD_WIDTH}px` },
+                  children: renderCard(product)
+                },
+                product.id
+              ))
+            }
+          )
+        }
+      ),
+      sortedProducts.length > 1 && /* @__PURE__ */ jsxs4(Fragment, { children: [
+        /* @__PURE__ */ jsx8(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            className: "absolute left-0 top-1/2 -translate-y-1/2 -translate-x-2 z-10 bg-white shadow-lg border hover:bg-gray-50 disabled:opacity-50",
+            onClick: () => setCarouselIndex((prev) => Math.max(0, prev - 1)),
+            disabled: carouselIndex === 0,
+            children: /* @__PURE__ */ jsx8(ChevronLeft, { className: "w-5 h-5" })
+          }
+        ),
+        /* @__PURE__ */ jsx8(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            className: "absolute right-0 top-1/2 -translate-y-1/2 translate-x-2 z-10 bg-white shadow-lg border hover:bg-gray-50 disabled:opacity-50",
+            onClick: () => setCarouselIndex(
+              (prev) => Math.min(sortedProducts.length - 1, prev + 1)
+            ),
+            disabled: carouselIndex >= sortedProducts.length - 1,
+            children: /* @__PURE__ */ jsx8(ChevronRight, { className: "w-5 h-5" })
+          }
+        ),
+        /* @__PURE__ */ jsx8("div", { className: "flex justify-center mt-6 space-x-2", children: Array.from({ length: sortedProducts.length }, (_, i) => /* @__PURE__ */ jsx8(
+          "button",
+          {
+            onClick: () => setCarouselIndex(i),
+            className: cn(
+              "w-2 h-2 rounded-full transition-colors",
+              i === carouselIndex ? "bg-primary" : "bg-gray-300"
+            ),
+            "aria-label": `Go to slide ${i + 1}`
+          },
+          i
+        )) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx8("div", { className: "hidden lg:block", children: sortedProducts.length <= 3 ? staticLayout : desktopCarousel })
+  ] });
+}
+export {
+  CustomFlowForm,
+  PricingTable,
+  SwitchActiveTenant
+};