@vadimcomanescu/nadicode-design-system 2.0.0

package/dist/components/blocks/InteractiveAreaChartBlock.js

@@ -0,0 +1,407 @@
+'use client';
+import { AreaChart } from '../../chunk-IPXL7WX7.js';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../../chunk-WH62BE24.js';
+import '../../chunk-WSU2PCA2.js';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '../../chunk-AH6YSYYT.js';
+import '../../chunk-PD2YEH3H.js';
+import '../../chunk-CRY67BIF.js';
+import '../../chunk-HJC6U46F.js';
+import '../../chunk-GO35FTNJ.js';
+import '../../chunk-PSVQ7ZNX.js';
+import '../../chunk-FLF5AMNO.js';
+import '../../chunk-WFJQ43SM.js';
+import '../../chunk-S4GKGKON.js';
+import '../../chunk-LCDDAE7J.js';
+import '../../chunk-R674XI7C.js';
+import '../../chunk-WUO7OONN.js';
+import '../../chunk-BPCCTJSK.js';
+import '../../chunk-CGUCH322.js';
+import '../../chunk-ELKIUARM.js';
+import '../../chunk-ZU2GYVAP.js';
+import '../../chunk-KSHJQ2VT.js';
+import '../../chunk-3CLXYQKB.js';
+import '../../chunk-JHQ5NMLZ.js';
+import '../../chunk-CRZ2JE24.js';
+import '../../chunk-TXGANOAX.js';
+import '../../chunk-OITJWGFV.js';
+import '../../chunk-Z74D6D2W.js';
+import '../../chunk-HNY45VUQ.js';
+import '../../chunk-IJJI4RQU.js';
+import '../../chunk-E7RBK6ML.js';
+import '../../chunk-UBIGDGOP.js';
+import '../../chunk-Q7LVUGFL.js';
+import '../../chunk-ALMGJVMT.js';
+import '../../chunk-QPXTBZWN.js';
+import '../../chunk-GAKU7DFY.js';
+import '../../chunk-T6BRD7TS.js';
+import '../../chunk-R5XP45PD.js';
+import '../../chunk-G5EO5FWC.js';
+import '../../chunk-NCULQXJE.js';
+import '../../chunk-VDYPDMYR.js';
+import '../../chunk-WDGIQDQG.js';
+import '../../chunk-WKRIKCJC.js';
+import '../../chunk-7WDT2PRI.js';
+import '../../chunk-AP5Y5M3R.js';
+import '../../chunk-JZ4G2SJH.js';
+import '../../chunk-KYGKJ553.js';
+import '../../chunk-M7YSMMAC.js';
+import '../../chunk-XQ2UDMPO.js';
+import '../../chunk-JMCSAGZ3.js';
+import '../../chunk-QUKDUSHD.js';
+import '../../chunk-4NXZIMYZ.js';
+import '../../chunk-TBKJ34BB.js';
+import '../../chunk-2IZC7HSV.js';
+import '../../chunk-2SDZMTB2.js';
+import '../../chunk-R3AO6AZM.js';
+import '../../chunk-RYOTIXZO.js';
+import '../../chunk-W3B3UOEG.js';
+import '../../chunk-ACRVOD7W.js';
+import '../../chunk-QSU23VYZ.js';
+import '../../chunk-BJYCQ2NV.js';
+import '../../chunk-VM462WZC.js';
+import '../../chunk-O74AEVHW.js';
+import '../../chunk-ZUHIWALK.js';
+import '../../chunk-5UZDOF6V.js';
+import '../../chunk-PKVTEDKO.js';
+import '../../chunk-I3TH7PIB.js';
+import '../../chunk-WGPK3FQ7.js';
+import '../../chunk-JL4MVVFH.js';
+import '../../chunk-IQEBXXB5.js';
+import '../../chunk-AZUJNRQU.js';
+import '../../chunk-WA45EC4Y.js';
+import '../../chunk-2MOEOEOI.js';
+import '../../chunk-5LCXASRW.js';
+import '../../chunk-2ZJVU7NV.js';
+import '../../chunk-5ESF6N36.js';
+import '../../chunk-RBPLOM3A.js';
+import '../../chunk-GCUTJI7M.js';
+import '../../chunk-2NT57K4U.js';
+import '../../chunk-6G3RRWJT.js';
+import '../../chunk-JRJGSNI4.js';
+import '../../chunk-RF6ECFS5.js';
+import '../../chunk-TV4RSQH4.js';
+import '../../chunk-4FEAWXJD.js';
+import '../../chunk-JHQTKMKG.js';
+import '../../chunk-CI7GPGCJ.js';
+import '../../chunk-226EBOTK.js';
+import '../../chunk-G5YLGJXR.js';
+import '../../chunk-G24VV5NO.js';
+import '../../chunk-6BAV4TZ5.js';
+import '../../chunk-SW6QPJM4.js';
+import '../../chunk-V6WNRZT3.js';
+import '../../chunk-JBK2LA6U.js';
+import '../../chunk-55U27XY4.js';
+import '../../chunk-LSPO6OBI.js';
+import '../../chunk-Y56WBNCY.js';
+import '../../chunk-KYZT3RNW.js';
+import '../../chunk-UEG2LI7Z.js';
+import '../../chunk-JJTQOH7J.js';
+import '../../chunk-72X6SXOX.js';
+import '../../chunk-SR5U52V3.js';
+import '../../chunk-74RKVIBV.js';
+import '../../chunk-AWIJHDNK.js';
+import '../../chunk-BRP6D56U.js';
+import '../../chunk-S733NAYS.js';
+import '../../chunk-MAUTIHQG.js';
+import '../../chunk-666N6OTL.js';
+import '../../chunk-FMH55OKV.js';
+import '../../chunk-WXVNTJIB.js';
+import '../../chunk-CXACRCZ4.js';
+import '../../chunk-T7H53CK2.js';
+import '../../chunk-BFLN54VR.js';
+import '../../chunk-P6IRHPFM.js';
+import '../../chunk-SXHYB7JB.js';
+import '../../chunk-ONGJ7AC2.js';
+import '../../chunk-UHXGBV5N.js';
+import '../../chunk-UIUMTURU.js';
+import '../../chunk-PRUXIDBD.js';
+import '../../chunk-NURPUVUV.js';
+import '../../chunk-HJBXUXTD.js';
+import '../../chunk-ASKFAYYR.js';
+import { cn } from '../../chunk-QYZT24TS.js';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var defaultTimeRanges = [
+  { value: "90d", label: "Last 3 months", days: 90 },
+  { value: "30d", label: "Last 30 days", days: 30 },
+  { value: "7d", label: "Last 7 days", days: 7 }
+];
+var defaultData = (() => {
+  const base = /* @__PURE__ */ new Date("2024-06-15");
+  const desktopValues = [
+    312,
+    245,
+    178,
+    389,
+    267,
+    334,
+    198,
+    421,
+    156,
+    290,
+    375,
+    203,
+    348,
+    187,
+    412,
+    256,
+    301,
+    169,
+    395,
+    228,
+    367,
+    194,
+    340,
+    275,
+    403,
+    215,
+    352,
+    183,
+    298,
+    246,
+    385,
+    210,
+    327,
+    171,
+    416,
+    263,
+    309,
+    195,
+    388,
+    231,
+    370,
+    201,
+    345,
+    278,
+    407,
+    219,
+    356,
+    186,
+    302,
+    249,
+    380,
+    207,
+    332,
+    174,
+    413,
+    260,
+    305,
+    192,
+    392,
+    234,
+    373,
+    198,
+    342,
+    272,
+    405,
+    222,
+    359,
+    189,
+    306,
+    252,
+    377,
+    204,
+    335,
+    177,
+    410,
+    257,
+    308,
+    196,
+    390,
+    237,
+    376,
+    200,
+    339,
+    270,
+    408,
+    225,
+    362,
+    191,
+    303,
+    248,
+    382,
+    209,
+    330,
+    173,
+    415,
+    261,
+    311,
+    193,
+    387,
+    233
+  ];
+  const mobileValues = [
+    215,
+    312,
+    178,
+    256,
+    345,
+    189,
+    278,
+    367,
+    201,
+    290,
+    234,
+    156,
+    323,
+    198,
+    267,
+    389,
+    212,
+    345,
+    176,
+    301,
+    248,
+    167,
+    334,
+    205,
+    278,
+    356,
+    189,
+    312,
+    223,
+    267,
+    241,
+    159,
+    328,
+    201,
+    271,
+    382,
+    195,
+    338,
+    179,
+    305,
+    245,
+    162,
+    330,
+    208,
+    274,
+    360,
+    192,
+    315,
+    226,
+    270,
+    238,
+    155,
+    325,
+    198,
+    268,
+    385,
+    191,
+    342,
+    182,
+    308,
+    242,
+    164,
+    332,
+    210,
+    276,
+    358,
+    188,
+    318,
+    220,
+    264,
+    240,
+    157,
+    322,
+    195,
+    265,
+    388,
+    194,
+    340,
+    180,
+    302,
+    247,
+    166,
+    336,
+    212,
+    280,
+    362,
+    190,
+    320,
+    228,
+    272,
+    236,
+    153,
+    327,
+    200,
+    270,
+    380,
+    193,
+    335,
+    175,
+    310
+  ];
+  return Array.from({ length: 100 }, (_, i) => {
+    const date = new Date(base);
+    date.setDate(date.getDate() - (99 - i));
+    return {
+      date: date.toISOString().split("T")[0],
+      desktop: desktopValues[i],
+      mobile: mobileValues[i]
+    };
+  });
+})();
+var defaultConfig = {
+  visitors: {
+    label: "Visitors"
+  },
+  desktop: {
+    label: "Desktop",
+    color: "rgb(var(--chart-1))"
+  },
+  mobile: {
+    label: "Mobile",
+    color: "rgb(var(--chart-2))"
+  }
+};
+function InteractiveAreaChart({
+  data = defaultData,
+  config = defaultConfig,
+  title = "Traffic Analysis",
+  description = "Showing total visitors for the last 3 months",
+  timeRanges = defaultTimeRanges,
+  className
+}) {
+  const [timeRange, setTimeRange] = React.useState(timeRanges[0]?.value ?? "90d");
+  const filteredData = React.useMemo(() => data.filter((item) => {
+    const date = new Date(item.date);
+    const now = /* @__PURE__ */ new Date();
+    const selectedRange = timeRanges.find((r) => r.value === timeRange);
+    const daysToSubtract = selectedRange?.days ?? 90;
+    now.setDate(now.getDate() - daysToSubtract);
+    return date >= now;
+  }), [data, timeRanges, timeRange]);
+  return /* @__PURE__ */ jsxs(Card, { className: cn(className), children: [
+    /* @__PURE__ */ jsxs(CardHeader, { className: "flex items-center gap-2 space-y-0 border-b border-border py-6 sm:flex-row", children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid flex-1 gap-1.5 text-center sm:text-left", children: [
+        /* @__PURE__ */ jsx(CardTitle, { children: title }),
+        /* @__PURE__ */ jsx(CardDescription, { children: description })
+      ] }),
+      /* @__PURE__ */ jsxs(Select, { value: timeRange, onValueChange: setTimeRange, children: [
+        /* @__PURE__ */ jsx(
+          SelectTrigger,
+          {
+            className: "w-[160px] rounded-lg sm:ml-auto",
+            "aria-label": "Select a value",
+            children: /* @__PURE__ */ jsx(SelectValue, { placeholder: timeRanges[0]?.label ?? "Last 3 months" })
+          }
+        ),
+        /* @__PURE__ */ jsx(SelectContent, { className: "rounded-xl", children: timeRanges.map((range) => /* @__PURE__ */ jsx(SelectItem, { value: range.value, className: "rounded-lg", children: range.label }, range.value)) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(CardContent, { className: "px-2 pt-4 sm:px-6 sm:pt-6", children: /* @__PURE__ */ jsx(
+      AreaChart,
+      {
+        data: filteredData,
+        config,
+        indexKey: "date",
+        areas: ["mobile", "desktop"],
+        stacked: true
+      }
+    ) })
+  ] });
+}
+
+export { InteractiveAreaChart };

package/dist/components/blocks/KanbanDemoBlock.d.ts

@@ -0,0 +1,4 @@
+export interface KanbanDemoBlockProps {
+    className?: string;
+}
+export declare function KanbanDemoBlock({ className }: KanbanDemoBlockProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/blocks/KanbanDemoBlock.js

@@ -0,0 +1,154 @@
+'use client';
+import { Typography } from '../../chunk-N53OMWW2.js';
+import { KanbanBoard, KanbanColumn, KanbanColumnHeader, KanbanItem, KanbanHandle } from '../../chunk-PJNHVPHF.js';
+import '../../chunk-B3BYBSF2.js';
+import '../../chunk-FOFGPWFS.js';
+import '../../chunk-VTAOHSPW.js';
+import { Heading } from '../../chunk-WI547C47.js';
+import { Empty, EmptyDescription } from '../../chunk-55HD4L6G.js';
+import { Avatar, AvatarFallback } from '../../chunk-NAAU5IWU.js';
+import '../../chunk-PD2YEH3H.js';
+import '../../chunk-CRY67BIF.js';
+import '../../chunk-HJC6U46F.js';
+import '../../chunk-WXVNTJIB.js';
+import { Badge } from '../../chunk-S4JAHKOP.js';
+import '../../chunk-ASKFAYYR.js';
+import { cn } from '../../chunk-QYZT24TS.js';
+import { useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var PRIORITY_STYLES = {
+  low: { dot: "bg-success", badge: "bg-success/10 text-success" },
+  medium: { dot: "bg-warning", badge: "bg-warning/10 text-warning" },
+  high: { dot: "bg-destructive", badge: "bg-destructive/10 text-destructive" },
+  critical: { dot: "bg-destructive", badge: "bg-destructive/20 text-destructive" }
+};
+var COLUMN_META = {
+  backlog: { label: "Backlog", color: "bg-text-tertiary" },
+  todo: { label: "To Do", color: "bg-accent" },
+  "in-progress": { label: "In Progress", color: "bg-warning" },
+  review: { label: "Review", color: "bg-info" },
+  done: { label: "Done", color: "bg-success" }
+};
+var INITIAL_COLUMNS = [
+  {
+    id: "backlog",
+    items: [
+      { id: "t1", title: "Design token audit", description: "Review all semantic tokens for contrast compliance", priority: "medium", assignee: "AK", tags: ["tokens", "a11y"] },
+      { id: "t2", title: "Update changelog", description: "Document v2.0 breaking changes", priority: "low", assignee: "VM", tags: ["docs"] },
+      { id: "t3", title: "Virtualized list primitive", description: "Research windowing for large data tables", priority: "low", assignee: "JR", tags: ["perf", "research"] }
+    ]
+  },
+  {
+    id: "todo",
+    items: [
+      { id: "t4", title: "Date range picker a11y", description: "Fix keyboard navigation between months", priority: "high", assignee: "AK", tags: ["a11y", "datepicker"] },
+      { id: "t5", title: "Carousel keyboard nav", description: "Arrow keys should cycle through slides", priority: "high", assignee: "VM", tags: ["a11y", "carousel"] }
+    ]
+  },
+  {
+    id: "in-progress",
+    items: [
+      { id: "t6", title: "Kanban board primitive", description: "dnd-kit compound component with glass styling", priority: "critical", assignee: "VM", tags: ["dnd", "new"] },
+      { id: "t7", title: "Bloom theme spring tuning", description: "Adjust bloom spring presets for more playful overshoot", priority: "medium", assignee: "JR", tags: ["motion", "bloom"] }
+    ]
+  },
+  {
+    id: "review",
+    items: [
+      { id: "t8", title: "Form wizard validation", description: "Zod schema per step with async validation support", priority: "high", assignee: "AK", tags: ["forms", "zod"] }
+    ]
+  },
+  {
+    id: "done",
+    items: [
+      { id: "t9", title: "Dark mode polish", description: "Fix washed-out glass panels in dark mode", priority: "medium", assignee: "VM", tags: ["theme", "glass"] },
+      { id: "t10", title: "Icon animation system", description: "77 animated icons with imperative handles", priority: "low", assignee: "JR", tags: ["icons", "motion"] }
+    ]
+  }
+];
+function TaskCard({ task, compact = false }) {
+  const ps = PRIORITY_STYLES[task.priority];
+  const content = /* @__PURE__ */ jsxs("div", { className: cn("min-w-0 flex-1 space-y-2", compact && "w-[260px] p-3"), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-text-primary leading-snug", children: task.title }),
+      !compact && /* @__PURE__ */ jsx("div", { className: cn("mt-0.5 h-2 w-2 shrink-0 rounded-full", ps.dot) })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "text-xs text-text-secondary line-clamp-2", children: task.description }),
+    !compact && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: task.tags.map((tag) => /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "rounded bg-surface-secondary px-1.5 text-[10px] font-medium text-text-tertiary", children: tag }, tag)) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pt-1", children: [
+      /* @__PURE__ */ jsx(Badge, { variant: "outline", className: cn("rounded px-1.5 text-[10px] uppercase tracking-wider", ps.badge), children: task.priority }),
+      !compact && /* @__PURE__ */ jsx(Avatar, { className: "h-5 w-5 text-[10px]", children: /* @__PURE__ */ jsx(AvatarFallback, { children: task.assignee }) })
+    ] })
+  ] });
+  if (compact) return content;
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+    /* @__PURE__ */ jsx(KanbanHandle, { "aria-label": `Move ${task.title}` }),
+    content
+  ] });
+}
+var getTaskId = (task) => task.id;
+var getTaskLabel = (task) => task.title;
+var renderOverlay = (task) => /* @__PURE__ */ jsx(TaskCard, { task, compact: true });
+function KanbanDemoBlock({ className }) {
+  const [columns, setColumns] = useState(INITIAL_COLUMNS);
+  const [moveLog, setMoveLog] = useState([]);
+  function handleMove(next, meta) {
+    setColumns([...next]);
+    const entry = `${meta.item.title}: ${meta.fromColumnId} \u2192 ${meta.toColumnId} (pos ${meta.toIndex})`;
+    setMoveLog((prev) => [entry, ...prev].slice(0, 10));
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-6", className), children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(Heading, { level: 1, size: "display", children: "Kanban Board" }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body", className: "mt-1 text-text-secondary", children: "Drag tasks between columns. Uses handle-only drag with keyboard support." })
+    ] }),
+    /* @__PURE__ */ jsx(
+      KanbanBoard,
+      {
+        value: columns,
+        onValueChange: handleMove,
+        getItemId: getTaskId,
+        getItemLabel: getTaskLabel,
+        renderOverlay,
+        className: "pb-4",
+        children: columns.map((col) => {
+          const colMeta = COLUMN_META[col.id] ?? { label: col.id, color: "bg-accent" };
+          return /* @__PURE__ */ jsxs(
+            KanbanColumn,
+            {
+              id: col.id,
+              items: col.items,
+              "aria-label": colMeta.label,
+              className: "w-[280px] shrink-0",
+              children: [
+                /* @__PURE__ */ jsxs(KanbanColumnHeader, { children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx("div", { className: cn("h-2 w-2 rounded-full", colMeta.color) }),
+                    /* @__PURE__ */ jsx("span", { children: colMeta.label })
+                  ] }),
+                  /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "text-xs tabular-nums", children: col.items.length })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: col.items.map((task) => /* @__PURE__ */ jsx(KanbanItem, { value: task, children: /* @__PURE__ */ jsx(TaskCard, { task }) }, task.id)) }),
+                col.items.length === 0 && /* @__PURE__ */ jsx(Empty, { className: "h-24 p-4", children: /* @__PURE__ */ jsx(EmptyDescription, { className: "text-xs", children: "Drop tasks here" }) })
+              ]
+            },
+            col.id
+          );
+        })
+      }
+    ),
+    moveLog.length > 0 && /* @__PURE__ */ jsxs("div", { className: "glass-panel rounded-lg p-4", children: [
+      /* @__PURE__ */ jsx(Heading, { level: 4, size: "title", className: "mb-2", children: "Move Log" }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-1 font-mono text-xs text-text-secondary", children: moveLog.map((entry, i) => /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-text-tertiary", children: [
+          moveLog.length - i,
+          "."
+        ] }),
+        /* @__PURE__ */ jsx("span", { children: entry })
+      ] }, i)) })
+    ] })
+  ] });
+}
+
+export { KanbanDemoBlock };

package/dist/components/blocks/LoginBlock.d.ts

@@ -0,0 +1,41 @@
+import type { FormEvent } from "react";
+declare const defaultLabels: {
+    loginTitle: string;
+    loginDescription: string;
+    loginSubmit: string;
+    loginPending: string;
+    loginSwitchPrompt: string;
+    loginSwitchAction: string;
+    signupTitle: string;
+    signupDescription: string;
+    signupSubmit: string;
+    signupPending: string;
+    signupSwitchPrompt: string;
+    signupSwitchAction: string;
+    continueWithGoogle: string;
+    orContinueWith: string;
+    emailAddress: string;
+    password: string;
+    fullName: string;
+    fullNamePlaceholder: string;
+    emailPlaceholder: string;
+    forgotPassword: string;
+};
+interface LoginBlockProps {
+    className?: string;
+    type?: "login" | "signup";
+    showSocial?: boolean;
+    labels?: Partial<typeof defaultLabels>;
+    /** React 19 server action for form submission */
+    action?: (formData: FormData) => void | Promise<void>;
+    /** Error message to display (e.g. from a failed server action) */
+    error?: string | null;
+    /** @deprecated Use `action` instead */
+    onLogin?: (e: FormEvent) => void;
+    googleAction?: (formData: FormData) => void | Promise<void>;
+    forgotPasswordHref?: string;
+    signUpHref?: string;
+    signInHref?: string;
+}
+export declare function LoginBlock({ className, type, showSocial, labels: userLabels, action, error, onLogin, googleAction, forgotPasswordHref, signUpHref, signInHref, }: LoginBlockProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/blocks/LoginBlock.js

@@ -0,0 +1,13 @@
+'use client';
+export { LoginBlock } from '../../chunk-ALUL3PF7.js';
+import '../../chunk-DQPK2XRL.js';
+import '../../chunk-WI547C47.js';
+import '../../chunk-AP3XXYAY.js';
+import '../../chunk-LIBXYD5Q.js';
+import '../../chunk-DJTF3XFB.js';
+import '../../chunk-AH6YSYYT.js';
+import '../../chunk-7KIDDF3I.js';
+import '../../chunk-PD2YEH3H.js';
+import '../../chunk-CRY67BIF.js';
+import '../../chunk-HJC6U46F.js';
+import '../../chunk-QYZT24TS.js';

package/dist/components/blocks/LogoCloud.d.ts

@@ -0,0 +1,12 @@
+interface LogoItem {
+    src: string;
+    alt: string;
+    height: number;
+}
+interface LogoCloudProps {
+    title?: string;
+    logos?: LogoItem[];
+    className?: string;
+}
+export declare function LogoCloud({ title, logos, className, }: LogoCloudProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/blocks/LogoCloud.js

@@ -0,0 +1,47 @@
+'use client';
+import { Heading } from '../../chunk-WI547C47.js';
+import { cn } from '../../chunk-QYZT24TS.js';
+import Image from 'next/image';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var defaultLogos = [
+  { src: "https://html.tailus.io/blocks/customers/nvidia.svg", alt: "Nvidia Logo", height: 20 },
+  { src: "https://html.tailus.io/blocks/customers/column.svg", alt: "Column Logo", height: 16 },
+  { src: "https://html.tailus.io/blocks/customers/github.svg", alt: "GitHub Logo", height: 16 },
+  { src: "https://html.tailus.io/blocks/customers/nike.svg", alt: "Nike Logo", height: 20 },
+  { src: "https://html.tailus.io/blocks/customers/laravel.svg", alt: "Laravel Logo", height: 16 },
+  { src: "https://html.tailus.io/blocks/customers/lilly.svg", alt: "Lilly Logo", height: 28 },
+  { src: "https://html.tailus.io/blocks/customers/lemonsqueezy.svg", alt: "Lemon Squeezy Logo", height: 20 },
+  { src: "https://html.tailus.io/blocks/customers/openai.svg", alt: "OpenAI Logo", height: 24 },
+  { src: "https://html.tailus.io/blocks/customers/tailwindcss.svg", alt: "Tailwind CSS Logo", height: 16 },
+  { src: "https://html.tailus.io/blocks/customers/vercel.svg", alt: "Vercel Logo", height: 20 },
+  { src: "https://html.tailus.io/blocks/customers/zapier.svg", alt: "Zapier Logo", height: 20 }
+];
+function heightClass(h) {
+  if (h <= 16) return "h-4";
+  if (h <= 20) return "h-5";
+  if (h <= 24) return "h-6";
+  return "h-7";
+}
+function LogoCloud({
+  title = "Your favorite companies are our partners.",
+  logos = defaultLogos,
+  className
+}) {
+  return /* @__PURE__ */ jsx("section", { className: className ?? "bg-background py-16", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-5xl px-6", children: [
+    /* @__PURE__ */ jsx(Heading, { level: 2, size: "eyebrow", className: "text-center", children: title }),
+    /* @__PURE__ */ jsx("div", { className: "mx-auto mt-20 flex max-w-4xl flex-wrap items-center justify-center gap-x-12 gap-y-8 sm:gap-x-16 sm:gap-y-12", children: logos.map((logo) => /* @__PURE__ */ jsx(
+      Image,
+      {
+        className: cn(heightClass(logo.height), "w-auto dark:invert"),
+        src: logo.src,
+        alt: logo.alt,
+        height: logo.height,
+        width: logo.height * 4
+      },
+      logo.alt
+    )) })
+  ] }) });
+}
+
+export { LogoCloud };