react-shadcn-kit 0.1.1 → 0.2.1

package/dist/components/composites/ComponentSearch.js

@@ -0,0 +1,141 @@
+import { jsxs as a, jsx as o } from "react/jsx-runtime";
+import { useState as d, useRef as S, useEffect as w } from "react";
+import { Search as N, Loader2 as A, X as D } from "lucide-react";
+import { AnimatePresence as F, motion as K } from "framer-motion";
+import { Input as T } from "../primitives/input.js";
+import { cn as q } from "../../lib/utils.js";
+function H({
+  placeholder: y = "Search components...",
+  onSearch: m,
+  onSelect: u,
+  minQueryLength: l = 2,
+  debounceMs: h = 300,
+  className: k,
+  showOnMobile: C = !1
+}) {
+  const [t, p] = d(""), [x, i] = d([]), [b, c] = d(!1), [g, s] = d(!1), f = S(null);
+  w(() => {
+    const e = (n) => {
+      f.current && !f.current.contains(n.target) && s(!1);
+    };
+    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+  }, []), w(() => {
+    const e = new AbortController(), n = setTimeout(async () => {
+      if (t.trim().length >= l) {
+        c(!0), s(!0);
+        try {
+          if (m) {
+            const r = await m(t);
+            e.signal.aborted || (i(r || []), c(!1));
+          } else
+            i([]), c(!1);
+        } catch {
+          e.signal.aborted || (i([]), c(!1));
+        }
+      } else
+        i([]), t.length === 0 && s(!1);
+    }, h);
+    return () => {
+      clearTimeout(n), e.abort();
+    };
+  }, [t, l, h, m]);
+  const R = () => {
+    t.trim().length >= l && s(!0);
+  }, E = () => {
+    p(""), i([]), s(!1);
+  }, j = (e) => {
+    s(!1), u && u(e);
+  }, O = (e) => {
+    e.key === "Enter" && t.trim().length >= l && s(!1), e.key === "Escape" && s(!1);
+  }, I = x.reduce(
+    (e, n) => {
+      const r = n.category || "Results";
+      return e[r] || (e[r] = []), e[r].push(n), e;
+    },
+    {}
+  ), v = x.length > 0;
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      ref: f,
+      className: q("relative w-full max-w-md", !C && "hidden md:flex", k),
+      children: [
+        /* @__PURE__ */ a("div", { className: "relative group w-full", children: [
+          /* @__PURE__ */ o("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none", children: /* @__PURE__ */ o(N, { className: "h-4 w-4 text-muted-foreground group-focus-within:text-primary transition-colors" }) }),
+          /* @__PURE__ */ o(
+            T,
+            {
+              type: "text",
+              value: t,
+              onChange: (e) => p(e.target.value),
+              onFocus: R,
+              onKeyDown: O,
+              placeholder: y,
+              role: "combobox",
+              "aria-autocomplete": "list",
+              "aria-expanded": g && t.length >= l,
+              "aria-controls": "search-results-dropdown",
+              className: "pl-10 pr-10 h-9 w-full border-none bg-muted/50 rounded-full focus-visible:ring-1 focus-visible:bg-background focus-visible:border-border transition-all"
+            }
+          ),
+          t.length > 0 && /* @__PURE__ */ o(
+            "button",
+            {
+              onClick: E,
+              className: "absolute inset-y-0 right-0 pr-3 flex items-center text-muted-foreground hover:text-foreground transition-colors",
+              "aria-label": "Clear search",
+              children: b ? /* @__PURE__ */ o(A, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ o(D, { className: "h-4 w-4" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ o(F, { children: g && t.length >= l && /* @__PURE__ */ a(
+          K.div,
+          {
+            initial: { opacity: 0, y: 10 },
+            animate: { opacity: 1, y: 0 },
+            exit: { opacity: 0, y: 10 },
+            transition: { duration: 0.2 },
+            id: "search-results-dropdown",
+            role: "listbox",
+            className: "absolute top-full left-0 right-0 mt-2 bg-card border border-border rounded-xl shadow-lg overflow-hidden z-50 max-h-[80vh] overflow-y-auto",
+            children: [
+              !v && !b && /* @__PURE__ */ a("div", { className: "p-4 text-center text-sm text-muted-foreground", children: [
+                'No results found for "',
+                t,
+                '"'
+              ] }),
+              v && /* @__PURE__ */ o("div", { className: "py-2", children: Object.entries(I).map(([e, n]) => /* @__PURE__ */ a("div", { className: "mb-2 last:mb-0", children: [
+                /* @__PURE__ */ o("div", { className: "px-3 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: e }),
+                n.map((r) => /* @__PURE__ */ a(
+                  "button",
+                  {
+                    onClick: () => j(r),
+                    className: "flex items-center gap-3 px-4 py-2 hover:bg-accent transition-colors w-full text-left",
+                    children: [
+                      r.icon && /* @__PURE__ */ o("div", { className: "shrink-0 text-muted-foreground", children: r.icon }),
+                      /* @__PURE__ */ a("div", { className: "overflow-hidden flex-1", children: [
+                        /* @__PURE__ */ o("div", { className: "text-sm font-medium truncate text-foreground", children: r.title }),
+                        r.description && /* @__PURE__ */ o("div", { className: "text-xs text-muted-foreground truncate", children: r.description })
+                      ] })
+                    ]
+                  },
+                  r.id
+                ))
+              ] }, e)) }),
+              t.length >= l && /* @__PURE__ */ a("div", { className: "flex items-center justify-center gap-2 w-full p-4 text-sm font-medium border-t border-border hover:bg-accent transition-colors text-primary cursor-pointer", children: [
+                /* @__PURE__ */ o(N, { className: "h-4 w-4" }),
+                'View all results for "',
+                t,
+                '"'
+              ] })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}
+export {
+  H as default
+};
+//# sourceMappingURL=ComponentSearch.js.map

package/dist/components/composites/ComponentSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentSearch.js","sources":["../../../src/components/composites/ComponentSearch.tsx"],"sourcesContent":["import { useState, useEffect, useRef } from \"react\";\nimport { Search, X, Loader2 } from \"lucide-react\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { Input } from \"../primitives/input\";\nimport { cn } from \"../../lib/utils\";\n\nexport interface SearchResult {\n  id: string;\n  title: string;\n  description?: string;\n  icon?: React.ReactNode;\n  href?: string;\n  category?: string;\n}\n\nexport interface ComponentSearchProps {\n  /**\n   * Placeholder text for the search input\n   * @default \"Search components...\"\n   */\n  placeholder?: string;\n  /**\n   * Async function to fetch search results based on query\n   */\n  onSearch?: (query: string) => Promise<SearchResult[]>;\n  /**\n   * Callback when a search result is selected\n   */\n  onSelect?: (result: SearchResult) => void;\n  /**\n   * Minimum characters required before triggering search\n   * @default 2\n   */\n  minQueryLength?: number;\n  /**\n   * Debounce delay in milliseconds\n   * @default 300\n   */\n  debounceMs?: number;\n  /**\n   * Custom className for the container\n   */\n  className?: string;\n  /**\n   * Whether to show the component on mobile\n   * @default false\n   */\n  showOnMobile?: boolean;\n}\n\nexport default function ComponentSearch({\n  placeholder = \"Search components...\",\n  onSearch,\n  onSelect,\n  minQueryLength = 2,\n  debounceMs = 300,\n  className,\n  showOnMobile = false,\n}: ComponentSearchProps) {\n  const [query, setQuery] = useState(\"\");\n  const [results, setResults] = useState<SearchResult[]>([]);\n  const [isLoading, setIsLoading] = useState(false);\n  const [isOpen, setIsOpen] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  // Handle outside click\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => document.removeEventListener(\"mousedown\", handleClickOutside);\n  }, []);\n\n  // Debounced search implementation\n  useEffect(() => {\n    const abortController = new AbortController();\n    const timer = setTimeout(async () => {\n      if (query.trim().length >= minQueryLength) {\n        setIsLoading(true);\n        setIsOpen(true);\n        try {\n          if (onSearch) {\n            const res = await onSearch(query);\n            if (!abortController.signal.aborted) {\n              setResults(res || []);\n              setIsLoading(false);\n            }\n          } else {\n            // Default mock search if no onSearch provided\n            setResults([]);\n            setIsLoading(false);\n          }\n        } catch {\n          if (!abortController.signal.aborted) {\n            setResults([]);\n            setIsLoading(false);\n          }\n        }\n      } else {\n        setResults([]);\n        if (query.length === 0) setIsOpen(false);\n      }\n    }, debounceMs);\n\n    return () => {\n      clearTimeout(timer);\n      abortController.abort();\n    };\n  }, [query, minQueryLength, debounceMs, onSearch]);\n\n  const handleFocus = () => {\n    if (query.trim().length >= minQueryLength) {\n      setIsOpen(true);\n    }\n  };\n\n  const clearSearch = () => {\n    setQuery(\"\");\n    setResults([]);\n    setIsOpen(false);\n  };\n\n  const handleSelect = (result: SearchResult) => {\n    setIsOpen(false);\n    if (onSelect) {\n      onSelect(result);\n    }\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === \"Enter\" && query.trim().length >= minQueryLength) {\n      // Handle enter key - could navigate to search results page\n      setIsOpen(false);\n    }\n    if (e.key === \"Escape\") {\n      setIsOpen(false);\n    }\n  };\n\n  // Group results by category\n  const groupedResults = results.reduce(\n    (acc, result) => {\n      const category = result.category || \"Results\";\n      if (!acc[category]) {\n        acc[category] = [];\n      }\n      acc[category].push(result);\n      return acc;\n    },\n    {} as Record<string, SearchResult[]>,\n  );\n\n  const hasResults = results.length > 0;\n\n  return (\n    <div\n      ref={containerRef}\n      className={cn(\"relative w-full max-w-md\", !showOnMobile && \"hidden md:flex\", className)}\n    >\n      <div className=\"relative group w-full\">\n        <div className=\"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none\">\n          <Search className=\"h-4 w-4 text-muted-foreground group-focus-within:text-primary transition-colors\" />\n        </div>\n        <Input\n          type=\"text\"\n          value={query}\n          onChange={(e) => setQuery(e.target.value)}\n          onFocus={handleFocus}\n          onKeyDown={handleKeyDown}\n          placeholder={placeholder}\n          role=\"combobox\"\n          aria-autocomplete=\"list\"\n          aria-expanded={isOpen && query.length >= minQueryLength}\n          aria-controls=\"search-results-dropdown\"\n          className=\"pl-10 pr-10 h-9 w-full border-none bg-muted/50 rounded-full focus-visible:ring-1 focus-visible:bg-background focus-visible:border-border transition-all\"\n        />\n        {query.length > 0 && (\n          <button\n            onClick={clearSearch}\n            className=\"absolute inset-y-0 right-0 pr-3 flex items-center text-muted-foreground hover:text-foreground transition-colors\"\n            aria-label=\"Clear search\"\n          >\n            {isLoading ? <Loader2 className=\"h-4 w-4 animate-spin\" /> : <X className=\"h-4 w-4\" />}\n          </button>\n        )}\n      </div>\n\n      <AnimatePresence>\n        {isOpen && query.length >= minQueryLength && (\n          <motion.div\n            initial={{ opacity: 0, y: 10 }}\n            animate={{ opacity: 1, y: 0 }}\n            exit={{ opacity: 0, y: 10 }}\n            transition={{ duration: 0.2 }}\n            id=\"search-results-dropdown\"\n            role=\"listbox\"\n            className=\"absolute top-full left-0 right-0 mt-2 bg-card border border-border rounded-xl shadow-lg overflow-hidden z-50 max-h-[80vh] overflow-y-auto\"\n          >\n            {!hasResults && !isLoading && (\n              <div className=\"p-4 text-center text-sm text-muted-foreground\">\n                No results found for &quot;{query}&quot;\n              </div>\n            )}\n\n            {hasResults && (\n              <div className=\"py-2\">\n                {Object.entries(groupedResults).map(([category, categoryResults]) => (\n                  <div key={category} className=\"mb-2 last:mb-0\">\n                    <div className=\"px-3 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider\">\n                      {category}\n                    </div>\n                    {categoryResults.map((result) => (\n                      <button\n                        key={result.id}\n                        onClick={() => handleSelect(result)}\n                        className=\"flex items-center gap-3 px-4 py-2 hover:bg-accent transition-colors w-full text-left\"\n                      >\n                        {result.icon && (\n                          <div className=\"shrink-0 text-muted-foreground\">{result.icon}</div>\n                        )}\n                        <div className=\"overflow-hidden flex-1\">\n                          <div className=\"text-sm font-medium truncate text-foreground\">\n                            {result.title}\n                          </div>\n                          {result.description && (\n                            <div className=\"text-xs text-muted-foreground truncate\">\n                              {result.description}\n                            </div>\n                          )}\n                        </div>\n                      </button>\n                    ))}\n                  </div>\n                ))}\n              </div>\n            )}\n\n            {query.length >= minQueryLength && (\n              <div className=\"flex items-center justify-center gap-2 w-full p-4 text-sm font-medium border-t border-border hover:bg-accent transition-colors text-primary cursor-pointer\">\n                <Search className=\"h-4 w-4\" />\n                View all results for &quot;{query}&quot;\n              </div>\n            )}\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </div>\n  );\n}\n"],"names":["jsxs","jsx","useState","useRef","useEffect","Search","Loader2","X","AnimatePresence","motion","Input","cn","ComponentSearch","placeholder","onSearch","onSelect","minQueryLength","debounceMs","className","showOnMobile","query","setQuery","results","setResults","isLoading","setIsLoading","isOpen","setIsOpen","containerRef","handleClickOutside","event","abortController","timer","res","handleFocus","clearSearch","handleSelect","result","handleKeyDown","groupedResults","acc","category","hasResults","categoryResults"],"mappings":"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"}

package/dist/components/composites/action-button.d.ts

@@ -0,0 +1,16 @@
+import { CustomButtonProps } from '../primitives/custom-button';
+import * as React from "react";
+interface ActionButtonProps extends CustomButtonProps {
+    action: () => Promise<{
+        error: boolean;
+        message?: string;
+    }>;
+    requireAreYouSure?: boolean;
+    areYouSureTitle?: React.ReactNode;
+    areYouSureDescription?: React.ReactNode;
+    showSuccessToast?: boolean;
+    showErrorToast?: boolean;
+}
+declare const ActionButton: React.ForwardRefExoticComponent<ActionButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { ActionButton };
+export type { ActionButtonProps };

package/dist/components/composites/action-button.js

@@ -0,0 +1,71 @@
+import { jsx as t, jsxs as e } from "react/jsx-runtime";
+import * as B from "react";
+import { useTransition as y } from "react";
+import { toast as n } from "sonner";
+import { AlertDialog as T, AlertDialogTrigger as v, AlertDialogContent as x, AlertDialogHeader as b, AlertDialogTitle as j, AlertDialogDescription as k, AlertDialogFooter as R, AlertDialogCancel as w, AlertDialogAction as F } from "../primitives/alert-dialog.js";
+import { CustomButton as s } from "../primitives/custom-button.js";
+const H = B.forwardRef(
+  ({
+    action: d,
+    requireAreYouSure: o = !1,
+    areYouSureTitle: g = "Are you sure?",
+    areYouSureDescription: m = "This action cannot be undone.",
+    showSuccessToast: f = !0,
+    showErrorToast: l = !0,
+    children: u,
+    onClick: A,
+    disabled: h,
+    ...p
+  }, D) => {
+    const [i, C] = y(), c = () => {
+      C(async () => {
+        try {
+          const r = await d();
+          r.error ? l && n.error(r.message || "An error occurred") : f && r.message && n.success(r.message);
+        } catch (r) {
+          l && n.error("A critical error occurred"), console.error("ActionButton error:", r);
+        }
+      });
+    }, a = /* @__PURE__ */ t(
+      s,
+      {
+        ...p,
+        ref: D,
+        disabled: h || i,
+        loading: !o && i,
+        onClick: (r) => {
+          o || c(), A?.(r);
+        },
+        children: u
+      }
+    );
+    return o ? /* @__PURE__ */ e(T, { children: [
+      /* @__PURE__ */ t(v, { asChild: !0, children: a }),
+      /* @__PURE__ */ e(x, { children: [
+        /* @__PURE__ */ e(b, { children: [
+          /* @__PURE__ */ t(j, { children: g }),
+          /* @__PURE__ */ t(k, { children: m })
+        ] }),
+        /* @__PURE__ */ e(R, { children: [
+          /* @__PURE__ */ t(w, { children: "Cancel" }),
+          /* @__PURE__ */ t(F, { asChild: !0, children: /* @__PURE__ */ t(
+            s,
+            {
+              variant: "destructive",
+              loading: i,
+              onClick: (r) => {
+                r.preventDefault(), c();
+              },
+              children: "Confirm"
+            }
+          ) })
+        ] })
+      ] })
+    ] }) : a;
+  }
+);
+H.displayName = "ActionButton";
+export {
+  H as ActionButton
+};
+//# sourceMappingURL=action-button.js.map

package/dist/components/composites/action-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-button.js","sources":["../../../src/components/composites/action-button.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { useTransition } from \"react\";\nimport { toast } from \"sonner\";\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"../primitives/alert-dialog\";\nimport { CustomButton, type CustomButtonProps } from \"../primitives/custom-button\";\n\ninterface ActionButtonProps extends CustomButtonProps {\n  action: () => Promise<{ error: boolean; message?: string }>;\n  requireAreYouSure?: boolean;\n  areYouSureTitle?: React.ReactNode;\n  areYouSureDescription?: React.ReactNode;\n  showSuccessToast?: boolean;\n  showErrorToast?: boolean;\n}\n\nconst ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProps>(\n  (\n    {\n      action,\n      requireAreYouSure = false,\n      areYouSureTitle = \"Are you sure?\",\n      areYouSureDescription = \"This action cannot be undone.\",\n      showSuccessToast = true,\n      showErrorToast = true,\n      children,\n      onClick,\n      disabled,\n      ...props\n    },\n    ref,\n  ) => {\n    const [isPending, startTransition] = useTransition();\n\n    const performAction = () => {\n      startTransition(async () => {\n        try {\n          const result = await action();\n          if (result.error) {\n            if (showErrorToast) {\n              toast.error(result.message || \"An error occurred\");\n            }\n          } else {\n            if (showSuccessToast && result.message) {\n              toast.success(result.message);\n            }\n          }\n        } catch (error) {\n          if (showErrorToast) {\n            toast.error(\"A critical error occurred\");\n          }\n          console.error(\"ActionButton error:\", error);\n        }\n      });\n    };\n\n    const triggerButton = (\n      <CustomButton\n        {...props}\n        ref={ref}\n        disabled={disabled || isPending}\n        loading={!requireAreYouSure && isPending}\n        onClick={(e) => {\n          if (!requireAreYouSure) {\n            performAction();\n          }\n          onClick?.(e);\n        }}\n      >\n        {children}\n      </CustomButton>\n    );\n\n    if (requireAreYouSure) {\n      return (\n        <AlertDialog>\n          <AlertDialogTrigger asChild>{triggerButton}</AlertDialogTrigger>\n          <AlertDialogContent>\n            <AlertDialogHeader>\n              <AlertDialogTitle>{areYouSureTitle}</AlertDialogTitle>\n              <AlertDialogDescription>{areYouSureDescription}</AlertDialogDescription>\n            </AlertDialogHeader>\n            <AlertDialogFooter>\n              <AlertDialogCancel>Cancel</AlertDialogCancel>\n              <AlertDialogAction asChild>\n                <CustomButton\n                  variant=\"destructive\"\n                  loading={isPending}\n                  onClick={(e) => {\n                    e.preventDefault(); // Prevent closing immediately if we want to show loading\n                    performAction();\n                  }}\n                >\n                  Confirm\n                </CustomButton>\n              </AlertDialogAction>\n            </AlertDialogFooter>\n          </AlertDialogContent>\n        </AlertDialog>\n      );\n    }\n\n    return triggerButton;\n  },\n);\n\nActionButton.displayName = \"ActionButton\";\n\nexport { ActionButton };\nexport type { ActionButtonProps };\n"],"names":["jsx","jsxs","React","useTransition","toast","AlertDialog","AlertDialogTrigger","AlertDialogContent","AlertDialogHeader","AlertDialogTitle","AlertDialogDescription","AlertDialogFooter","AlertDialogCancel","AlertDialogAction","CustomButton","ActionButton","action","requireAreYouSure","areYouSureTitle","areYouSureDescription","showSuccessToast","showErrorToast","children","onClick","disabled","props","ref","isPending","startTransition","performAction","result","error","triggerButton","e"],"mappings":"AA2BA,SAAA,OAAAA,GAAA,QAAAC,SAAA;AAAA,YAAAC,OAAA;AAAA,SAAA,iBAAAC,SAAA;AAAA,SAAA,SAAAC,SAAA;AAAA,SAAA,eAAAC,GAAA,sBAAAC,GAAA,sBAAAC,GAAA,qBAAAC,GAAA,oBAAAC,GAAA,0BAAAC,GAAA,qBAAAC,GAAA,qBAAAC,GAAA,qBAAAC,SAAA;AAAA,SAAA,gBAAAC,SAAA;AAAA,MAAMC,IAAeb,EAAM;AAAA,EACzB,CACE;AAAA,IACE,QAAAc;AAAA,IACA,mBAAAC,IAAoB;AAAA,IACpB,iBAAAC,IAAkB;AAAA,IAClB,uBAAAC,IAAwB;AAAA,IACxB,kBAAAC,IAAmB;AAAA,IACnB,gBAAAC,IAAiB;AAAA,IACjB,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAM,CAACC,GAAWC,CAAe,IAAIzB,EAAA,GAE/B0B,IAAgB,MAAM;AAC1B,MAAAD,EAAgB,YAAY;AAC1B,YAAI;AACF,gBAAME,IAAS,MAAMd,EAAA;AACrB,UAAIc,EAAO,QACLT,KACFjB,EAAM,MAAM0B,EAAO,WAAW,mBAAmB,IAG/CV,KAAoBU,EAAO,WAC7B1B,EAAM,QAAQ0B,EAAO,OAAO;AAAA,QAGlC,SAASC,GAAO;AACd,UAAIV,KACFjB,EAAM,MAAM,2BAA2B,GAEzC,QAAQ,MAAM,uBAAuB2B,CAAK;AAAA,QAC5C;AAAA,MACF,CAAC;AAAA,IACH,GAEMC,IACJ,gBAAAhC;AAAA,MAACc;AAAA,MAAA;AAAA,QACE,GAAGW;AAAA,QACJ,KAAAC;AAAA,QACA,UAAUF,KAAYG;AAAA,QACtB,SAAS,CAACV,KAAqBU;AAAA,QAC/B,SAAS,CAACM,MAAM;AACd,UAAKhB,KACHY,EAAA,GAEFN,IAAUU,CAAC;AAAA,QACb;AAAA,QAEC,UAAAX;AAAA,MAAA;AAAA,IAAA;AAIL,WAAIL,sBAECZ,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAL,EAACM,GAAA,EAAmB,SAAO,IAAE,UAAA0B,GAAc;AAAA,wBAC1CzB,GAAA,EACC,UAAA;AAAA,QAAA,gBAAAN,EAACO,GAAA,EACC,UAAA;AAAA,UAAA,gBAAAR,EAACS,KAAkB,UAAAS,EAAA,CAAgB;AAAA,UACnC,gBAAAlB,EAACU,KAAwB,UAAAS,EAAA,CAAsB;AAAA,QAAA,GACjD;AAAA,0BACCR,GAAA,EACC,UAAA;AAAA,UAAA,gBAAAX,EAACY,KAAkB,UAAA,SAAA,CAAM;AAAA,UACzB,gBAAAZ,EAACa,GAAA,EAAkB,SAAO,IACxB,UAAA,gBAAAb;AAAA,YAACc;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,SAASa;AAAA,cACT,SAAS,CAACM,MAAM;AACd,gBAAAA,EAAE,eAAA,GACFJ,EAAA;AAAA,cACF;AAAA,cACD,UAAA;AAAA,YAAA;AAAA,UAAA,EAED,CACF;AAAA,QAAA,EAAA,CACF;AAAA,MAAA,EAAA,CACF;AAAA,IAAA,GACF,IAIGG;AAAA,EACT;AACF;AAEAjB,EAAa,cAAc;"}

package/dist/components/composites/index.d.ts

@@ -0,0 +1,9 @@
+export * from './theme-toggle';
+export * from './user-menu';
+export * from './sidebar-wrapper';
+export * from './action-button';
+export { default as ComponentSearch } from './ComponentSearch';
+export type * from './theme-toggle';
+export type * from './user-menu';
+export type * from './sidebar-wrapper';
+export type * from './action-button';

package/dist/components/composites/sidebar-wrapper.d.ts

@@ -0,0 +1,27 @@
+import { Sidebar } from '../primitives/sidebar';
+import * as React from "react";
+export interface SidebarWrapperProps extends React.ComponentPropsWithoutRef<typeof Sidebar> {
+    /**
+     * Optional custom trigger component. If not provided, a default trigger button is rendered.
+     */
+    trigger?: React.ReactNode;
+    /**
+     * Children rendered inside the SidebarContent area.
+     */
+    children: React.ReactNode;
+}
+/**
+ * SidebarWrapper
+ *
+ * A composable wrapper around the shadcn/ui `Sidebar` components tailored for the
+ * `mcomposites` package. It provides a ready‑to‑use layout consisting of a
+ * `SidebarProvider`, a `Sidebar` with optional custom trigger, and a content
+ * area. The wrapper can be dropped into any page to instantly gain a fully
+ * functional, accessible sidebar.
+ *
+ * Example usage:
+ * ```tsx
+ * <SidebarWrapper trigger={<MyTrigger />}>...</SidebarWrapper>
+ * ```
+ */
+export declare function SidebarWrapper({ trigger, children, className, ...sidebarProps }: SidebarWrapperProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/composites/sidebar-wrapper.js

@@ -0,0 +1,21 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import { SidebarProvider as o, Sidebar as t, SidebarHeader as b, SidebarContent as S, SidebarTrigger as p, SidebarInset as m } from "../primitives/sidebar.js";
+function f({
+  trigger: i,
+  children: d,
+  className: a,
+  ...n
+}) {
+  return /* @__PURE__ */ e(o, { children: [
+    /* @__PURE__ */ e(t, { className: a, ...n, children: [
+      /* @__PURE__ */ r(b, {}),
+      /* @__PURE__ */ r(S, { children: d }),
+      i ?? /* @__PURE__ */ r(p, {})
+    ] }),
+    /* @__PURE__ */ r(m, {})
+  ] });
+}
+export {
+  f as SidebarWrapper
+};
+//# sourceMappingURL=sidebar-wrapper.js.map

package/dist/components/composites/sidebar-wrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-wrapper.js","sources":["../../../src/components/composites/sidebar-wrapper.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n  Sidebar,\n  SidebarHeader,\n  SidebarContent,\n  SidebarProvider,\n  SidebarTrigger,\n  SidebarInset,\n} from \"../primitives/sidebar\";\n\nexport interface SidebarWrapperProps extends React.ComponentPropsWithoutRef<typeof Sidebar> {\n  /**\n   * Optional custom trigger component. If not provided, a default trigger button is rendered.\n   */\n  trigger?: React.ReactNode;\n  /**\n   * Children rendered inside the SidebarContent area.\n   */\n  children: React.ReactNode;\n}\n\n/**\n * SidebarWrapper\n *\n * A composable wrapper around the shadcn/ui `Sidebar` components tailored for the\n * `mcomposites` package. It provides a ready‑to‑use layout consisting of a\n * `SidebarProvider`, a `Sidebar` with optional custom trigger, and a content\n * area. The wrapper can be dropped into any page to instantly gain a fully\n * functional, accessible sidebar.\n *\n * Example usage:\n * ```tsx\n * <SidebarWrapper trigger={<MyTrigger />}>...</SidebarWrapper>\n * ```\n */\nexport function SidebarWrapper({\n  trigger,\n  children,\n  className,\n  ...sidebarProps\n}: SidebarWrapperProps) {\n  return (\n    <SidebarProvider>\n      <Sidebar className={className} {...sidebarProps}>\n        {/* Header can be customized by the consumer via children or by extending this component */}\n        <SidebarHeader />\n        <SidebarContent>{children}</SidebarContent>\n        {/* Optional trigger – falls back to the default button when omitted */}\n        {trigger ?? <SidebarTrigger />}\n      </Sidebar>\n      {/* Inset provides the main content area next to the sidebar */}\n      <SidebarInset />\n    </SidebarProvider>\n  );\n}\n"],"names":["jsxs","jsx","SidebarProvider","Sidebar","SidebarHeader","SidebarContent","SidebarTrigger","SidebarInset","SidebarWrapper","trigger","children","className","sidebarProps"],"mappings":"AAmCO,SAAA,QAAAA,GAAA,OAAAC,SAAA;AAAA,SAAA,mBAAAC,GAAA,WAAAC,GAAA,iBAAAC,GAAA,kBAAAC,GAAA,kBAAAC,GAAA,gBAAAC,SAAA;AAAA,SAASC,EAAe;AAAA,EAC7B,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GAAwB;AACtB,2BACGV,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAF,EAACG,GAAA,EAAQ,WAAAQ,GAAuB,GAAGC,GAEjC,UAAA;AAAA,MAAA,gBAAAX,EAACG,GAAA,EAAc;AAAA,MACf,gBAAAH,EAACI,KAAgB,UAAAK,GAAS;AAAA,MAEzBD,uBAAYH,GAAA,CAAA,CAAe;AAAA,IAAA,GAC9B;AAAA,sBAECC,GAAA,CAAA,CAAa;AAAA,EAAA,GAChB;AAEJ;"}

package/dist/{molecules → components/composites}/theme-toggle.js

@@ -1,9 +1,9 @@
 import { jsxs as o, jsx as e } from "react/jsx-runtime";
 import { Sun as m, Moon as c } from "lucide-react";
 import { useTheme as d } from "next-themes";
-import { Button as h } from "../atoms/button.js";
-import { DropdownMenu as p, DropdownMenuTrigger as u, DropdownMenuContent as k, DropdownMenuItem as n } from "../atoms/dropdown-menu.js";
-import { cn as f } from "../lib/utils.js";
+import { Button as h } from "../primitives/button.js";
+import { DropdownMenu as p, DropdownMenuTrigger as u, DropdownMenuContent as k, DropdownMenuItem as n } from "../primitives/dropdown-menu.js";
+import { cn as f } from "../../lib/utils.js";
 function N({
   align: a = "end",
   side: l = "bottom",

package/dist/components/composites/theme-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-toggle.js","sources":["../../../src/components/composites/theme-toggle.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Moon, Sun } from \"lucide-react\";\nimport { useTheme } from \"next-themes\";\n\nimport { Button } from \"../primitives/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"../primitives/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface ThemeToggleProps {\n  align?: \"center\" | \"start\" | \"end\";\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  sideOffset?: number;\n  className?: string;\n  trigger?: React.ReactNode;\n}\n\nexport function ThemeToggle({\n  align = \"end\",\n  side = \"bottom\",\n  sideOffset = 4,\n  className,\n  trigger,\n}: ThemeToggleProps) {\n  const { setTheme } = useTheme();\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        {trigger ? (\n          trigger\n        ) : (\n          <Button variant=\"ghost\" size=\"icon\" className={cn(\"h-9 w-9\", className)}>\n            <Sun className=\"h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0\" />\n            <Moon className=\"absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100\" />\n            <span className=\"sr-only\">Toggle theme</span>\n          </Button>\n        )}\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align={align} side={side} sideOffset={sideOffset}>\n        <DropdownMenuItem onClick={() => setTheme(\"light\")}>Light</DropdownMenuItem>\n        <DropdownMenuItem onClick={() => setTheme(\"dark\")}>Dark</DropdownMenuItem>\n        <DropdownMenuItem onClick={() => setTheme(\"system\")}>System</DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"names":["jsxs","jsx","Sun","Moon","useTheme","Button","DropdownMenu","DropdownMenuTrigger","DropdownMenuContent","DropdownMenuItem","cn","ThemeToggle","align","side","sideOffset","className","trigger","setTheme"],"mappings":"AAuBO,SAAA,QAAAA,GAAA,OAAAC,SAAA;AAAA,SAAA,OAAAC,GAAA,QAAAC,SAAA;AAAA,SAAA,YAAAC,SAAA;AAAA,SAAA,UAAAC,SAAA;AAAA,SAAA,gBAAAC,GAAA,uBAAAC,GAAA,uBAAAC,GAAA,oBAAAC,SAAA;AAAA,SAAA,MAAAC,SAAA;AAAA,SAASC,EAAY;AAAA,EAC1B,OAAAC,IAAQ;AAAA,EACR,MAAAC,IAAO;AAAA,EACP,YAAAC,IAAa;AAAA,EACb,WAAAC;AAAA,EACA,SAAAC;AACF,GAAqB;AACnB,QAAM,EAAE,UAAAC,EAAA,IAAab,EAAA;AAErB,2BACGE,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAL,EAACM,GAAA,EAAoB,SAAO,IACzB,UAAAS,KAGC,gBAAAhB,EAACK,GAAA,EAAO,SAAQ,SAAQ,MAAK,QAAO,WAAWK,EAAG,WAAWK,CAAS,GACpE,UAAA;AAAA,MAAA,gBAAAd,EAACC,GAAA,EAAI,WAAU,uFAAA,CAAuF;AAAA,MACtG,gBAAAD,EAACE,GAAA,EAAK,WAAU,+FAAA,CAA+F;AAAA,MAC/G,gBAAAF,EAAC,QAAA,EAAK,WAAU,WAAU,UAAA,eAAA,CAAY;AAAA,IAAA,EAAA,CACxC,EAAA,CAEJ;AAAA,IACA,gBAAAD,EAACQ,GAAA,EAAoB,OAAAI,GAAc,MAAAC,GAAY,YAAAC,GAC7C,UAAA;AAAA,MAAA,gBAAAb,EAACQ,KAAiB,SAAS,MAAMQ,EAAS,OAAO,GAAG,UAAA,SAAK;AAAA,wBACxDR,GAAA,EAAiB,SAAS,MAAMQ,EAAS,MAAM,GAAG,UAAA,QAAI;AAAA,wBACtDR,GAAA,EAAiB,SAAS,MAAMQ,EAAS,QAAQ,GAAG,UAAA,SAAA,CAAM;AAAA,IAAA,EAAA,CAC7D;AAAA,EAAA,GACF;AAEJ;"}

package/dist/{molecules → components/composites}/user-menu.js

@@ -1,9 +1,9 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
 import * as i from "react";
-import { Avatar as t, AvatarImage as d, AvatarFallback as m } from "../atoms/avatar.js";
-import { Button as s } from "../atoms/button.js";
-import { DropdownMenu as h, DropdownMenuTrigger as p, DropdownMenuContent as f, DropdownMenuLabel as u, DropdownMenuSeparator as x, DropdownMenuItem as g } from "../atoms/dropdown-menu.js";
-import { cn as w } from "../lib/utils.js";
+import { Avatar as t, AvatarImage as d, AvatarFallback as m } from "../primitives/avatar.js";
+import { Button as s } from "../primitives/button.js";
+import { DropdownMenu as h, DropdownMenuTrigger as p, DropdownMenuContent as f, DropdownMenuLabel as u, DropdownMenuSeparator as x, DropdownMenuItem as g } from "../primitives/dropdown-menu.js";
+import { cn as w } from "../../lib/utils.js";
 function b({ user: n, items: o, className: l }) {
   return /* @__PURE__ */ a(h, { children: [
     /* @__PURE__ */ e(p, { asChild: !0, children: /* @__PURE__ */ e(s, { variant: "ghost", size: "icon", className: w("rounded-full", l), children: /* @__PURE__ */ a(t, { className: "h-8 w-8", children: [

package/dist/components/composites/user-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"user-menu.js","sources":["../../../src/components/composites/user-menu.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"../primitives/avatar\";\nimport { Button } from \"../primitives/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"../primitives/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface UserMenuProps {\n  user: {\n    name: string;\n    email: string;\n    avatar?: string;\n  };\n  items?: Array<{\n    label: string;\n    href?: string;\n    onClick?: () => void;\n    icon?: React.ComponentType<{ className?: string }>;\n  }>;\n  className?: string;\n}\n\nexport function UserMenu({ user, items, className }: UserMenuProps) {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"ghost\" size=\"icon\" className={cn(\"rounded-full\", className)}>\n          <Avatar className=\"h-8 w-8\">\n            <AvatarImage src={user.avatar} alt={user.name} />\n            <AvatarFallback>{user.name?.[0] ?? \"U\"}</AvatarFallback>\n          </Avatar>\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\">\n        <DropdownMenuLabel className=\"p-0 font-normal\">\n          <div className=\"flex flex-col space-y-1\">\n            <p className=\"text-sm font-medium leading-none\">{user.name}</p>\n            <p className=\"text-xs leading-none text-muted-foreground\">{user.email}</p>\n          </div>\n        </DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        {items?.map((item, i) => (\n          <DropdownMenuItem key={i} asChild>\n            <a href={item.href ?? \"#\"} onClick={item.onClick}>\n              {item.icon && React.createElement(item.icon, { className: \"mr-2 h-4 w-4\" })}\n              <span>{item.label}</span>\n            </a>\n          </DropdownMenuItem>\n        ))}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"names":["UserMenu","user","items","className","DropdownMenu","jsx","DropdownMenuTrigger","Button","cn","jsxs","Avatar","AvatarImage","AvatarFallback","DropdownMenuContent","DropdownMenuLabel","DropdownMenuSeparator","item","i","DropdownMenuItem","React"],"mappings":";;;;;;AA8BO,SAASA,EAAS,EAAE,MAAAC,GAAM,OAAAC,GAAO,WAAAC,KAA4B;AAClE,2BACGC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC,EAACC,KAAoB,SAAO,IAC1B,UAAA,gBAAAD,EAACE,GAAA,EAAO,SAAQ,SAAQ,MAAK,QAAO,WAAWC,EAAG,gBAAgBL,CAAS,GACzE,UAAA,gBAAAM,EAACC,GAAA,EAAO,WAAU,WAChB,UAAA;AAAA,MAAA,gBAAAL,EAACM,KAAY,KAAKV,EAAK,QAAQ,KAAKA,EAAK,MAAM;AAAA,wBAC9CW,GAAA,EAAgB,UAAAX,EAAK,OAAO,CAAC,KAAK,IAAA,CAAI;AAAA,IAAA,EAAA,CACzC,GACF,GACF;AAAA,IACA,gBAAAQ,EAACI,GAAA,EAAoB,OAAM,OACzB,UAAA;AAAA,MAAA,gBAAAR,EAACS,KAAkB,WAAU,mBAC3B,UAAA,gBAAAL,EAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,QAAA,gBAAAJ,EAAC,KAAA,EAAE,WAAU,oCAAoC,UAAAJ,EAAK,MAAK;AAAA,QAC3D,gBAAAI,EAAC,KAAA,EAAE,WAAU,8CAA8C,YAAK,MAAA,CAAM;AAAA,MAAA,EAAA,CACxE,EAAA,CACF;AAAA,wBACCU,GAAA,EAAsB;AAAA,MACtBb,GAAO,IAAI,CAACc,GAAMC,wBAChBC,GAAA,EAAyB,SAAO,IAC/B,UAAA,gBAAAT,EAAC,OAAE,MAAMO,EAAK,QAAQ,KAAK,SAASA,EAAK,SACtC,UAAA;AAAA,QAAAA,EAAK,QAAQG,EAAM,cAAcH,EAAK,MAAM,EAAE,WAAW,gBAAgB;AAAA,QAC1E,gBAAAX,EAAC,QAAA,EAAM,UAAAW,EAAK,MAAA,CAAM;AAAA,MAAA,EAAA,CACpB,EAAA,GAJqBC,CAKvB,CACD;AAAA,IAAA,EAAA,CACH;AAAA,EAAA,GACF;AAEJ;"}

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

@@ -0,0 +1,12 @@
+import * as React from "react";
+interface HeroSectionProps extends React.HTMLAttributes<HTMLElement> {
+    title: string;
+    subtitle?: string;
+    ctaText?: string;
+    ctaHref?: string;
+    secondaryCtaText?: string;
+    secondaryCtaHref?: string;
+    badge?: string;
+}
+declare const HeroSection: React.ForwardRefExoticComponent<HeroSectionProps & React.RefAttributes<HTMLElement>>;
+export { HeroSection };

package/dist/components/marketing/hero.js

@@ -0,0 +1,87 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import * as p from "react";
+import { CustomButton as n } from "../primitives/custom-button.js";
+import { cn as h } from "../../lib/utils.js";
+const x = p.forwardRef(
+  ({
+    title: o,
+    subtitle: r,
+    ctaText: l,
+    ctaHref: a = "#",
+    secondaryCtaText: i,
+    secondaryCtaHref: c = "#",
+    badge: s,
+    className: d,
+    ...m
+  }, f) => /* @__PURE__ */ t(
+    "section",
+    {
+      ref: f,
+      className: h(
+        "relative flex flex-col items-center justify-center overflow-hidden px-6 py-24 text-center sm:py-32 lg:px-8",
+        d
+      ),
+      ...m,
+      children: [
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: "absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ e(
+              "div",
+              {
+                className: "relative left-[calc(50%-11rem)] aspect-1155/678 w-144.5 -translate-x-1/2 rotate-30 bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-20 sm:left-[calc(50%-30rem)] sm:w-288.75",
+                style: {
+                  clipPath: "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ t("div", { className: "mx-auto max-w-2xl", children: [
+          s && /* @__PURE__ */ e("div", { className: "mb-8 flex justify-center", children: /* @__PURE__ */ t("div", { className: "relative rounded-full px-3 py-1 text-sm leading-6 text-muted-foreground ring-1 ring-border hover:ring-border/80 transition-all", children: [
+            s,
+            " ",
+            /* @__PURE__ */ t("a", { href: a, className: "font-semibold text-primary", children: [
+              /* @__PURE__ */ e("span", { className: "absolute inset-0", "aria-hidden": "true" }),
+              "Read more ",
+              /* @__PURE__ */ e("span", { "aria-hidden": "true", children: "→" })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ e("h1", { className: "text-4xl font-bold tracking-tight text-foreground sm:text-6xl bg-clip-text", children: o }),
+          r && /* @__PURE__ */ e("p", { className: "mt-6 text-lg leading-8 text-muted-foreground", children: r }),
+          /* @__PURE__ */ t("div", { className: "mt-10 flex items-center justify-center gap-x-6", children: [
+            l && /* @__PURE__ */ e("a", { href: a, children: /* @__PURE__ */ e(n, { size: "lg", effect: "expandIcon", children: l }) }),
+            i && /* @__PURE__ */ e("a", { href: c, children: /* @__PURE__ */ t(n, { variant: "ghost", size: "lg", children: [
+              i,
+              " ",
+              /* @__PURE__ */ e("span", { "aria-hidden": "true", children: "→" })
+            ] }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: "absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ e(
+              "div",
+              {
+                className: "relative left-[calc(50%+3rem)] aspect-1155/678 w-144.5 -translate-x-1/2 bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-20 sm:left-[calc(50%+36rem)] sm:w-288.75",
+                style: {
+                  clipPath: "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"
+                }
+              }
+            )
+          }
+        )
+      ]
+    }
+  )
+);
+x.displayName = "HeroSection";
+export {
+  x as HeroSection
+};
+//# sourceMappingURL=hero.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hero.js","sources":["../../../src/components/marketing/hero.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { CustomButton } from \"../primitives/custom-button\";\nimport { cn } from \"@/lib/utils\";\n\ninterface HeroSectionProps extends React.HTMLAttributes<HTMLElement> {\n  title: string;\n  subtitle?: string;\n  ctaText?: string;\n  ctaHref?: string;\n  secondaryCtaText?: string;\n  secondaryCtaHref?: string;\n  badge?: string;\n}\n\nconst HeroSection = React.forwardRef<HTMLElement, HeroSectionProps>(\n  (\n    {\n      title,\n      subtitle,\n      ctaText,\n      ctaHref = \"#\",\n      secondaryCtaText,\n      secondaryCtaHref = \"#\",\n      badge,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <section\n        ref={ref}\n        className={cn(\n          \"relative flex flex-col items-center justify-center overflow-hidden px-6 py-24 text-center sm:py-32 lg:px-8\",\n          className,\n        )}\n        {...props}\n      >\n        {/* Abstract Background Decoration */}\n        <div\n          className=\"absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80\"\n          aria-hidden=\"true\"\n        >\n          <div\n            className=\"relative left-[calc(50%-11rem)] aspect-1155/678 w-144.5 -translate-x-1/2 rotate-30 bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-20 sm:left-[calc(50%-30rem)] sm:w-288.75\"\n            style={{\n              clipPath:\n                \"polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)\",\n            }}\n          />\n        </div>\n\n        <div className=\"mx-auto max-w-2xl\">\n          {badge && (\n            <div className=\"mb-8 flex justify-center\">\n              <div className=\"relative rounded-full px-3 py-1 text-sm leading-6 text-muted-foreground ring-1 ring-border hover:ring-border/80 transition-all\">\n                {badge}{\" \"}\n                <a href={ctaHref} className=\"font-semibold text-primary\">\n                  <span className=\"absolute inset-0\" aria-hidden=\"true\" />\n                  Read more <span aria-hidden=\"true\">&rarr;</span>\n                </a>\n              </div>\n            </div>\n          )}\n          <h1 className=\"text-4xl font-bold tracking-tight text-foreground sm:text-6xl bg-clip-text\">\n            {title}\n          </h1>\n          {subtitle && <p className=\"mt-6 text-lg leading-8 text-muted-foreground\">{subtitle}</p>}\n          <div className=\"mt-10 flex items-center justify-center gap-x-6\">\n            {ctaText && (\n              <a href={ctaHref}>\n                <CustomButton size=\"lg\" effect=\"expandIcon\">\n                  {ctaText}\n                </CustomButton>\n              </a>\n            )}\n            {secondaryCtaText && (\n              <a href={secondaryCtaHref}>\n                <CustomButton variant=\"ghost\" size=\"lg\">\n                  {secondaryCtaText} <span aria-hidden=\"true\">→</span>\n                </CustomButton>\n              </a>\n            )}\n          </div>\n        </div>\n\n        <div\n          className=\"absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]\"\n          aria-hidden=\"true\"\n        >\n          <div\n            className=\"relative left-[calc(50%+3rem)] aspect-1155/678 w-144.5 -translate-x-1/2 bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-20 sm:left-[calc(50%+36rem)] sm:w-288.75\"\n            style={{\n              clipPath:\n                \"polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)\",\n            }}\n          />\n        </div>\n      </section>\n    );\n  },\n);\n\nHeroSection.displayName = \"HeroSection\";\n\nexport { HeroSection };\n"],"names":["jsxs","jsx","React","CustomButton","cn","HeroSection","title","subtitle","ctaText","ctaHref","secondaryCtaText","secondaryCtaHref","badge","className","props","ref"],"mappings":"AAgBA,SAAA,QAAAA,GAAA,OAAAC,SAAA;AAAA,YAAAC,OAAA;AAAA,SAAA,gBAAAC,SAAA;AAAA,SAAA,MAAAC,SAAA;AAAA,MAAMC,IAAcH,EAAM;AAAA,EACxB,CACE;AAAA,IACE,OAAAI;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,kBAAAC;AAAA,IACA,kBAAAC,IAAmB;AAAA,IACnB,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MAGE,gBAAAf;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAe;AAAA,MACA,WAAWX;AAAA,QACT;AAAA,QACAS;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,MAGJ,UAAA;AAAA,QAAA,gBAAAb;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,eAAY;AAAA,YAEZ,UAAA,gBAAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO;AAAA,kBACL,UACE;AAAA,gBAAA;AAAA,cACJ;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,QAGF,gBAAAD,EAAC,OAAA,EAAI,WAAU,qBACZ,UAAA;AAAA,UAAAY,uBACE,OAAA,EAAI,WAAU,4BACb,UAAA,gBAAAZ,EAAC,OAAA,EAAI,WAAU,kIACZ,UAAA;AAAA,YAAAY;AAAA,YAAO;AAAA,YACR,gBAAAZ,EAAC,KAAA,EAAE,MAAMS,GAAS,WAAU,8BAC1B,UAAA;AAAA,cAAA,gBAAAR,EAAC,QAAA,EAAK,WAAU,oBAAmB,eAAY,QAAO;AAAA,cAAE;AAAA,cAC9C,gBAAAA,EAAC,QAAA,EAAK,eAAY,QAAO,UAAA,IAAA,CAAM;AAAA,YAAA,EAAA,CAC3C;AAAA,UAAA,EAAA,CACF,EAAA,CACF;AAAA,UAEF,gBAAAA,EAAC,MAAA,EAAG,WAAU,8EACX,UAAAK,GACH;AAAA,UACCC,KAAY,gBAAAN,EAAC,KAAA,EAAE,WAAU,gDAAgD,UAAAM,GAAS;AAAA,UACnF,gBAAAP,EAAC,OAAA,EAAI,WAAU,kDACZ,UAAA;AAAA,YAAAQ,KACC,gBAAAP,EAAC,KAAA,EAAE,MAAMQ,GACP,UAAA,gBAAAR,EAACE,GAAA,EAAa,MAAK,MAAK,QAAO,cAC5B,UAAAK,EAAA,CACH,GACF;AAAA,YAEDE,KACC,gBAAAT,EAAC,KAAA,EAAE,MAAMU,GACP,4BAACR,GAAA,EAAa,SAAQ,SAAQ,MAAK,MAChC,UAAA;AAAA,cAAAO;AAAA,cAAiB;AAAA,cAAC,gBAAAT,EAAC,QAAA,EAAK,eAAY,QAAO,UAAA,IAAA,CAAC;AAAA,YAAA,EAAA,CAC/C,EAAA,CACF;AAAA,UAAA,EAAA,CAEJ;AAAA,QAAA,GACF;AAAA,QAEA,gBAAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,eAAY;AAAA,YAEZ,UAAA,gBAAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO;AAAA,kBACL,UACE;AAAA,gBAAA;AAAA,cACJ;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIR;AAEAI,EAAY,cAAc;"}

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

@@ -0,0 +1,6 @@
+export * from './hero';
+export * from './social-proof';
+export * from './value-props';
+export type * from './hero';
+export type * from './social-proof';
+export type * from './value-props';

package/dist/components/marketing/social-proof.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+interface SocialProofProps extends React.HTMLAttributes<HTMLElement> {
+    logos: {
+        name: string;
+        src: string;
+    }[];
+    title?: string;
+}
+declare const SocialProof: React.ForwardRefExoticComponent<SocialProofProps & React.RefAttributes<HTMLElement>>;
+export { SocialProof };

package/dist/components/marketing/social-proof.js

@@ -0,0 +1,21 @@
+import { jsx as e, jsxs as m } from "react/jsx-runtime";
+import * as i from "react";
+import { cn as c } from "../../lib/utils.js";
+const n = i.forwardRef(
+  ({ logos: t, title: r = "Trusted by the world's most innovative teams", className: s, ...o }, l) => /* @__PURE__ */ e("section", { ref: l, className: c("py-24 sm:py-32 bg-secondary/30", s), ...o, children: /* @__PURE__ */ m("div", { className: "mx-auto max-w-7xl px-6 lg:px-8", children: [
+    /* @__PURE__ */ e("h2", { className: "text-center text-lg font-semibold leading-8 text-muted-foreground", children: r }),
+    /* @__PURE__ */ e("div", { className: "mx-auto mt-10 grid max-w-lg grid-cols-4 items-center gap-x-8 gap-y-10 sm:max-w-xl sm:grid-cols-6 sm:gap-x-10 lg:mx-0 lg:max-w-none lg:grid-cols-5", children: t.map((a) => /* @__PURE__ */ e(
+      "div",
+      {
+        className: "flex items-center justify-center grayscale opacity-50 hover:grayscale-0 hover:opacity-100 transition-all duration-300",
+        children: /* @__PURE__ */ e("span", { className: "text-xl font-bold italic text-muted-foreground", children: a.name })
+      },
+      a.name
+    )) })
+  ] }) })
+);
+n.displayName = "SocialProof";
+export {
+  n as SocialProof
+};
+//# sourceMappingURL=social-proof.js.map

package/dist/components/marketing/social-proof.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"social-proof.js","sources":["../../../src/components/marketing/social-proof.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface SocialProofProps extends React.HTMLAttributes<HTMLElement> {\n  logos: { name: string; src: string }[];\n  title?: string;\n}\n\nconst SocialProof = React.forwardRef<HTMLElement, SocialProofProps>(\n  ({ logos, title = \"Trusted by the world's most innovative teams\", className, ...props }, ref) => {\n    return (\n      <section ref={ref} className={cn(\"py-24 sm:py-32 bg-secondary/30\", className)} {...props}>\n        <div className=\"mx-auto max-w-7xl px-6 lg:px-8\">\n          <h2 className=\"text-center text-lg font-semibold leading-8 text-muted-foreground\">\n            {title}\n          </h2>\n          <div className=\"mx-auto mt-10 grid max-w-lg grid-cols-4 items-center gap-x-8 gap-y-10 sm:max-w-xl sm:grid-cols-6 sm:gap-x-10 lg:mx-0 lg:max-w-none lg:grid-cols-5\">\n            {logos.map((logo) => (\n              <div\n                key={logo.name}\n                className=\"flex items-center justify-center grayscale opacity-50 hover:grayscale-0 hover:opacity-100 transition-all duration-300\"\n              >\n                <span className=\"text-xl font-bold italic text-muted-foreground\">{logo.name}</span>\n              </div>\n            ))}\n          </div>\n        </div>\n      </section>\n    );\n  },\n);\n\nSocialProof.displayName = \"SocialProof\";\n\nexport { SocialProof };\n"],"names":["jsx","jsxs","React","cn","SocialProof","logos","title","className","props","ref","logo"],"mappings":"AAUA,SAAA,OAAAA,GAAA,QAAAC,SAAA;AAAA,YAAAC,OAAA;AAAA,SAAA,MAAAC,SAAA;AAAA,MAAMC,IAAcF,EAAM;AAAA,EACxB,CAAC,EAAE,OAAAG,GAAO,OAAAC,IAAQ,gDAAgD,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAErF,gBAAAT,EAAC,WAAA,EAAQ,KAAAS,GAAU,WAAWN,EAAG,kCAAkCI,CAAS,GAAI,GAAGC,GACjF,UAAA,gBAAAP,EAAC,OAAA,EAAI,WAAU,kCACb,UAAA;AAAA,IAAA,gBAAAD,EAAC,MAAA,EAAG,WAAU,qEACX,UAAAM,GACH;AAAA,sBACC,OAAA,EAAI,WAAU,qJACZ,UAAAD,EAAM,IAAI,CAACK,MACV,gBAAAV;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAU;AAAA,QAEV,UAAA,gBAAAA,EAAC,QAAA,EAAK,WAAU,kDAAkD,YAAK,KAAA,CAAK;AAAA,MAAA;AAAA,MAHvEU,EAAK;AAAA,IAAA,CAKb,EAAA,CACH;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAGN;AAEAN,EAAY,cAAc;"}

package/dist/components/marketing/value-props.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+interface Feature {
+    name: string;
+    description: string;
+    icon?: React.ElementType;
+}
+interface ValuePropsProps extends React.HTMLAttributes<HTMLElement> {
+    features: Feature[];
+    title: string;
+    subtitle?: string;
+    badge?: string;
+}
+declare const ValueProps: React.ForwardRefExoticComponent<ValuePropsProps & React.RefAttributes<HTMLElement>>;
+export { ValueProps };

package/dist/components/marketing/value-props.js

@@ -0,0 +1,25 @@
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import * as x from "react";
+import { cn as c } from "../../lib/utils.js";
+import { CheckIcon as d } from "lucide-react";
+const p = x.forwardRef(
+  ({ features: s, title: r, subtitle: t, badge: m, className: i, ...n }, o) => /* @__PURE__ */ e("section", { ref: o, className: c("py-24 sm:py-32", i), ...n, children: /* @__PURE__ */ l("div", { className: "mx-auto max-w-7xl px-6 lg:px-8", children: [
+    /* @__PURE__ */ l("div", { className: "mx-auto max-w-2xl lg:text-center", children: [
+      m && /* @__PURE__ */ e("h2", { className: "text-base font-semibold leading-7 text-primary", children: m }),
+      /* @__PURE__ */ e("p", { className: "mt-2 text-3xl font-bold tracking-tight text-foreground sm:text-4xl", children: r }),
+      t && /* @__PURE__ */ e("p", { className: "mt-6 text-lg leading-8 text-muted-foreground", children: t })
+    ] }),
+    /* @__PURE__ */ e("div", { className: "mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none", children: /* @__PURE__ */ e("dl", { className: "grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3", children: s.map((a) => /* @__PURE__ */ l("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ l("dt", { className: "flex items-center gap-x-3 text-base font-semibold leading-7 text-foreground", children: [
+        a.icon ? /* @__PURE__ */ e(a.icon, { className: "size-5 flex-none text-primary", "aria-hidden": "true" }) : /* @__PURE__ */ e(d, { className: "size-5 flex-none text-primary", "aria-hidden": "true" }),
+        a.name
+      ] }),
+      /* @__PURE__ */ e("dd", { className: "mt-4 flex flex-auto flex-col text-base leading-7 text-muted-foreground", children: /* @__PURE__ */ e("p", { className: "flex-auto", children: a.description }) })
+    ] }, a.name)) }) })
+  ] }) })
+);
+p.displayName = "ValueProps";
+export {
+  p as ValueProps
+};
+//# sourceMappingURL=value-props.js.map

package/dist/components/marketing/value-props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"value-props.js","sources":["../../../src/components/marketing/value-props.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { CheckIcon } from \"lucide-react\";\n\ninterface Feature {\n  name: string;\n  description: string;\n  icon?: React.ElementType;\n}\n\ninterface ValuePropsProps extends React.HTMLAttributes<HTMLElement> {\n  features: Feature[];\n  title: string;\n  subtitle?: string;\n  badge?: string;\n}\n\nconst ValueProps = React.forwardRef<HTMLElement, ValuePropsProps>(\n  ({ features, title, subtitle, badge, className, ...props }, ref) => {\n    return (\n      <section ref={ref} className={cn(\"py-24 sm:py-32\", className)} {...props}>\n        <div className=\"mx-auto max-w-7xl px-6 lg:px-8\">\n          <div className=\"mx-auto max-w-2xl lg:text-center\">\n            {badge && <h2 className=\"text-base font-semibold leading-7 text-primary\">{badge}</h2>}\n            <p className=\"mt-2 text-3xl font-bold tracking-tight text-foreground sm:text-4xl\">\n              {title}\n            </p>\n            {subtitle && <p className=\"mt-6 text-lg leading-8 text-muted-foreground\">{subtitle}</p>}\n          </div>\n          <div className=\"mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none\">\n            <dl className=\"grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3\">\n              {features.map((feature) => (\n                <div key={feature.name} className=\"flex flex-col\">\n                  <dt className=\"flex items-center gap-x-3 text-base font-semibold leading-7 text-foreground\">\n                    {feature.icon ? (\n                      <feature.icon className=\"size-5 flex-none text-primary\" aria-hidden=\"true\" />\n                    ) : (\n                      <CheckIcon className=\"size-5 flex-none text-primary\" aria-hidden=\"true\" />\n                    )}\n                    {feature.name}\n                  </dt>\n                  <dd className=\"mt-4 flex flex-auto flex-col text-base leading-7 text-muted-foreground\">\n                    <p className=\"flex-auto\">{feature.description}</p>\n                  </dd>\n                </div>\n              ))}\n            </dl>\n          </div>\n        </div>\n      </section>\n    );\n  },\n);\n\nValueProps.displayName = \"ValueProps\";\n\nexport { ValueProps };\n"],"names":["jsx","jsxs","React","cn","CheckIcon","ValueProps","features","title","subtitle","badge","className","props","ref","feature"],"mappings":"AAmBA,SAAA,OAAAA,GAAA,QAAAC,SAAA;AAAA,YAAAC,OAAA;AAAA,SAAA,MAAAC,SAAA;AAAA,SAAA,aAAAC,SAAA;AAAA,MAAMC,IAAaH,EAAM;AAAA,EACvB,CAAC,EAAE,UAAAI,GAAU,OAAAC,GAAO,UAAAC,GAAU,OAAAC,GAAO,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAExD,gBAAAZ,EAAC,WAAA,EAAQ,KAAAY,GAAU,WAAWT,EAAG,kBAAkBO,CAAS,GAAI,GAAGC,GACjE,UAAA,gBAAAV,EAAC,OAAA,EAAI,WAAU,kCACb,UAAA;AAAA,IAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,oCACZ,UAAA;AAAA,MAAAQ,KAAS,gBAAAT,EAAC,MAAA,EAAG,WAAU,kDAAkD,UAAAS,GAAM;AAAA,MAChF,gBAAAT,EAAC,KAAA,EAAE,WAAU,sEACV,UAAAO,GACH;AAAA,MACCC,KAAY,gBAAAR,EAAC,KAAA,EAAE,WAAU,gDAAgD,UAAAQ,EAAA,CAAS;AAAA,IAAA,GACrF;AAAA,IACA,gBAAAR,EAAC,OAAA,EAAI,WAAU,2DACb,4BAAC,MAAA,EAAG,WAAU,2EACX,UAAAM,EAAS,IAAI,CAACO,MACb,gBAAAZ,EAAC,OAAA,EAAuB,WAAU,iBAChC,UAAA;AAAA,MAAA,gBAAAA,EAAC,MAAA,EAAG,WAAU,+EACX,UAAA;AAAA,QAAAY,EAAQ,OACP,gBAAAb,EAACa,EAAQ,MAAR,EAAa,WAAU,iCAAgC,eAAY,OAAA,CAAO,IAE3E,gBAAAb,EAACI,GAAA,EAAU,WAAU,iCAAgC,eAAY,QAAO;AAAA,QAEzES,EAAQ;AAAA,MAAA,GACX;AAAA,MACA,gBAAAb,EAAC,MAAA,EAAG,WAAU,0EACZ,UAAA,gBAAAA,EAAC,OAAE,WAAU,aAAa,UAAAa,EAAQ,YAAA,CAAY,EAAA,CAChD;AAAA,IAAA,EAAA,GAXQA,EAAQ,IAYlB,CACD,EAAA,CACH,EAAA,CACF;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAGN;AAEAR,EAAW,cAAc;"}