@theguild/components 9.5.0 → 9.6.0-alpha-20250401154052-c98b68bae167b2530013b0a1e4b07f08ad386efd

package/dist/components/call-to-action.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLAttributes } from 'react';
 import { Anchor } from './anchor.mjs';
-import 'react';
 import 'url';
 import '../types/components.mjs';
 import 'next/image';
@@ -21,16 +21,27 @@ declare namespace CallToActionProps {
     }
     interface AnchorProps extends BaseProps, React.ComponentPropsWithoutRef<typeof Anchor> {
         href: string;
+        as?: never;
     }
     interface ButtonProps extends BaseProps, React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
         href?: never;
-        onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+        as?: never;
+    }
+    /**
+     * Use inside `<summary>` or as visual part of bigger interactive element.
+     * Prefer using `href` prop using CallToAction as `<button>` in other cases.
+     */
+    interface NonInteractiveProps extends BaseProps, React.DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
+        href?: never;
+        as: 'span' | 'div';
     }
 }
-type CallToActionProps = CallToActionProps.AnchorProps | CallToActionProps.ButtonProps;
+type CallToActionProps = CallToActionProps.AnchorProps | CallToActionProps.ButtonProps | CallToActionProps.NonInteractiveProps;
 /**
  * This is called `Button` in Figma in the new Hive brand design system.
- * It's a styled variant of {@link Anchor}.
+ * It's a styled variant of {@link Anchor}. Based on the presence of the
+ * `href` prop or `as` prop, it renders a `button`, `a` or `props.as`
+ * (for non-interactive elements) element.
  *
  * // TODO: Consider renaming it to `Button`.
  */

package/dist/components/call-to-action.js

@@ -24,16 +24,25 @@ function CallToAction(props) {
     variantStyles[props.variant],
     props.className
   );
+  const growingBorderBox = /* @__PURE__ */ jsx("span", { className: "absolute inset-0 rounded-lg border border-green-800 dark:border-neutral-200" });
   if ("href" in props && typeof props.href === "string") {
     const { className: _12, variant: _22, children: children2, ...rest2 } = props;
     return /* @__PURE__ */ jsxs(Anchor, { className, ...rest2, children: [
-      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-lg border border-green-800 dark:border-neutral-200" }),
+      growingBorderBox,
+      children2
+    ] });
+  }
+  if (props.as) {
+    const { className: _12, variant: _22, children: children2, as, ...rest2 } = props;
+    const Root = as;
+    return /* @__PURE__ */ jsxs(Root, { className, ...rest2, children: [
+      growingBorderBox,
       children2
     ] });
   }
   const { className: _1, variant: _2, children, ...rest } = props;
   return /* @__PURE__ */ jsxs("button", { className, ...rest, children: [
-    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-lg border border-green-800 dark:border-neutral-200" }),
+    growingBorderBox,
     children
   ] });
 }

package/dist/components/contact-us.d.mts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { CallToActionProps } from './call-to-action.mjs';
-import './anchor.mjs';
 import 'react';
+import './anchor.mjs';
 import 'url';
 import '../types/components.mjs';
 import 'next/image';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theguild/components",
-  "version": "9.5.0",
+  "version": "9.6.0-alpha-20250401154052-c98b68bae167b2530013b0a1e4b07f08ad386efd",
   "repository": {
     "url": "https://github.com/the-guild-org/docs",
     "directory": "packages/components"