import { c as P } from "./chunk-3YVJ2ELD.js";
import { a as y } from "./chunk-RJYZ5FAR.js";
import { d as c, a as l } from "./chunk-A3GF4PYW.js";
import { b as g } from "./chunk-5YRC3IT3.js";
import { b as s, d as b } from "./chunk-ZTZJHY4E.js";
import { c as y$1 } from "./chunk-CZRCW5EN.js";
import { Type } from "@sinclair/typebox";
import { RxButton } from "../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.1.1/node_modules/react-icons/rx/index.js";
/*! Upstart.gg - Copyright (C) 2024 Flippable - https://github.com/upstart-gg/upstart/blob/main/LICENSE */
var h = y({ type: "button", name: "Button", category: "basic", description: "A button", aiInstructions: "A clickable button that can link to a URL or a page within the site. It can be styled with different colors, font sizes, and border radii. Don't use it in forms since forms have their own submit button.", resizable: "horizontal", icon: RxButton, minWidth: { desktop: 120, mobile: 120 }, defaultWidth: { mobile: "100%" }, props: P({ colorPreset: Type.Optional(y$1({ default: { color: "primary-500" }, title: "Color", "ui:default-gradient-direction": "bg-gradient-to-b" })), label: l("Label", { default: "My button", metadata: { category: "content" } }), fontSize: Type.Optional(g({ title: "Font size", description: "The font size of the button text.", default: "text-base", "ui:responsive": "desktop", "ui:no-extra-large-sizes": true })), rounding: Type.Optional(b({ default: "rounded-md" })), border: Type.Optional(s({ default: { width: "border-0" }, "ui:responsive": "desktop" })), link: c({ title: "Link", "ui:placeholder": "https://example.com", metadata: { category: "content" } }) }, { noGrow: true }) }), x = [{ description: "Primary button, full width, linking to an external URL", type: "button", props: { label: "Click me", link: "https://example.com", colorPreset: { color: "primary-500" } } }, { description: "Secondary button, block width, linking to a page id", type: "button", props: { label: "Go to page", link: "page-id-123", colorPreset: { color: "secondary-500" } } }, { description: "Neutral colored button with large text and rounded corners and external link", type: "button", props: { label: "Submit", fontSize: "text-lg", rounding: "rounded-full", link: "https://example.com", colorPreset: { color: "neutral-500" } } }, { description: "Dynamic label from a page query alias named 'employee'", type: "button", props: { label: "Go to profile of {{employee.name}}", link: "/employees/{{employee.$slug}}", fontSize: "text-lg", rounding: "rounded-full", colorPreset: { color: "neutral-500" } } }, { description: "Accent colored call-to-action button with medium text and subtle border", type: "button", props: { label: "Get Started", link: "/signup", fontSize: "text-base", rounding: "rounded-lg", colorPreset: { color: "accent-600" }, border: { width: "border", color: "border-accent-700" } } }, { description: "Small text button with sharp corners for minimal design", type: "button", props: { label: "Learn More", link: "/about", fontSize: "text-sm", rounding: "rounded-none", colorPreset: { color: "primary-400" } } }, { description: "Large download button with thick border and rounded corners", type: "button", props: { label: "Download Now", link: "https://download.example.com/file.zip", fontSize: "text-xl", rounding: "rounded-xl", colorPreset: { color: "secondary-600" }, border: { width: "border-2", color: "border-secondary-800" } } }, { description: "Contact button with neutral colors and medium border radius", type: "button", props: { label: "Contact Us", link: "/contact", fontSize: "text-base", rounding: "rounded-md", colorPreset: { color: "neutral-600" }, border: { width: "border", color: "border-neutral-400" } } }, { description: "Newsletter signup button with gradient background and full rounding", type: "button", props: { label: "Subscribe to Newsletter", link: "/newsletter", fontSize: "text-lg", rounding: "rounded-full", colorPreset: { color: "primary-500", gradientDirection: "bg-gradient-to-r" } } }, { description: "Shop now button with accent colors and extra large text", type: "button", props: { label: "Shop Now", link: "/shop", fontSize: "text-xl", rounding: "rounded-lg", colorPreset: { color: "accent-500" } } }, { description: "Dynamic product button using product query data", type: "button", props: { label: "Buy {{product.name}} - ${{product.price}}", link: "/products/{{product.id}}/purchase", fontSize: "text-base", rounding: "rounded-md", colorPreset: { color: "primary-600" }, border: { width: "border", color: "border-primary-800" } } }, { description: "Event registration button with secondary gradient and medium text", type: "button", props: { label: "Register for Event", link: "/events/register", fontSize: "text-base", rounding: "rounded-lg", colorPreset: { color: "secondary-500", gradientDirection: "bg-gradient-to-br" }, border: { width: "border", color: "border-secondary-300" } } }];
export {
  h as a,
  x as b
};
//# sourceMappingURL=chunk-IKHZD2JH.js.map
