@upstart.gg/sdk 0.0.137 → 0.0.139

package/dist/shared/bricks/manifests/button.manifest.d.ts

@@ -1,70 +1,77 @@
-import type { BrickExample } from "./_types";
-export declare const manifest: {
-    readonly icon: import("react-icons/lib").IconType;
-    readonly props: import("@sinclair/typebox").TObject<{
-        lastTouched: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TNumber>;
-        hidden: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TObject<{
-            desktop: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
-            mobile: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
-        }>>;
-        editable: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
-        width: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
-        height: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TString>;
-        grow: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TBoolean>;
-        alignSelf: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<"self-auto" | "self-start" | "self-center" | "self-end" | "self-stretch">>;
-    } & {
-        colorPreset: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TObject<{
-            color: import("@sinclair/typebox").TUnsafe<"none" | "primary-50" | "primary-100" | "primary-200" | "primary-300" | "primary-400" | "primary-500" | "primary-600" | "primary-700" | "primary-800" | "primary-900" | "secondary-50" | "secondary-100" | "secondary-200" | "secondary-300" | "secondary-400" | "secondary-500" | "secondary-600" | "secondary-700" | "secondary-800" | "secondary-900" | "accent-50" | "accent-100" | "accent-200" | "accent-300" | "accent-400" | "accent-500" | "accent-600" | "accent-700" | "accent-800" | "accent-900" | "neutral-50" | "neutral-100" | "neutral-200" | "neutral-300" | "neutral-400" | "neutral-500" | "neutral-600" | "neutral-700" | "neutral-800" | "neutral-900" | "base-100" | "base-200" | "base-300" | "primary-gradient-100" | "primary-gradient-200" | "primary-gradient-300" | "primary-gradient-400" | "primary-gradient-500" | "primary-gradient-600" | "primary-gradient-700" | "primary-gradient-800" | "secondary-gradient-100" | "secondary-gradient-200" | "secondary-gradient-300" | "secondary-gradient-400" | "secondary-gradient-500" | "secondary-gradient-600" | "secondary-gradient-700" | "secondary-gradient-800" | "accent-gradient-100" | "accent-gradient-200" | "accent-gradient-300" | "accent-gradient-400" | "accent-gradient-500" | "accent-gradient-600" | "accent-gradient-700" | "accent-gradient-800" | "neutral-gradient-100" | "neutral-gradient-200" | "neutral-gradient-300" | "neutral-gradient-400" | "neutral-gradient-500" | "neutral-gradient-600" | "neutral-gradient-700" | "neutral-gradient-800" | "base-gradient-100" | "base-gradient-200">;
-            gradientDirection: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<"bg-gradient-to-t" | "bg-gradient-to-r" | "bg-gradient-to-b" | "bg-gradient-to-l" | "bg-gradient-to-tl" | "bg-gradient-to-tr" | "bg-gradient-to-br" | "bg-gradient-to-bl">>;
-        }>>;
-        label: import("@sinclair/typebox").TString;
-        fontSize: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<"inherit" | "text-xs" | "text-sm" | "text-base" | "text-lg" | "text-xl">>;
-        rounding: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<"rounded-auto" | "rounded-none" | "rounded-sm" | "rounded-md" | "rounded-lg" | "rounded-xl" | "rounded-2xl" | "rounded-full">>;
-        fill: import("@sinclair/typebox").TOptional<import("@sinclair/typebox").TUnsafe<"outline" | "solid">>;
-        link: import("@sinclair/typebox").TUnion<[import("@sinclair/typebox").TString, import("@sinclair/typebox").TString]>;
-    }>;
-    readonly category: import("~/shared/brick-manifest").BrickCategory;
-    readonly defaultInspectorTab: "content" | "style" | "preset";
-    readonly hideInLibrary: boolean;
-    readonly deletable: boolean;
-    readonly movable: boolean;
-    readonly resizable: boolean | "horizontal" | "vertical";
-    readonly duplicatable: boolean;
-    readonly isContainer: boolean;
-    readonly isGlobalBrick: boolean;
-    readonly defaultWidth: {
-        readonly mobile: string;
-        readonly desktop: string;
-    };
-    readonly defaultHeight: {
-        readonly mobile: string;
-        readonly desktop: string;
-    };
-    readonly type: string;
-    readonly name: string;
-    readonly iconClassName?: string;
-    readonly staticClasses?: string;
-    readonly description?: string;
-    readonly minWidth?: {
-        mobile?: number;
-        desktop?: number;
-    };
-    readonly maxWidth?: {
-        mobile?: number;
-        desktop?: number;
-    };
-    readonly minHeight?: {
-        mobile?: number;
-        desktop?: number;
-    };
-    readonly maxHeight?: {
-        mobile?: number;
-        desktop?: number;
-    };
-    readonly consumesMultipleQueryRows?: boolean;
-    readonly inlineDragDisabled?: boolean;
-    readonly aiInstructions?: string;
+import { BrickCategory } from "../../brick-manifest.js";
+import { BrickExample } from "./_types.js";
+import * as _sinclair_typebox2207 from "@sinclair/typebox";
+import * as react_icons_lib0 from "react-icons/lib";
+
+//#region src/shared/bricks/manifests/button.manifest.d.ts
+declare const manifest: {
+  readonly icon: react_icons_lib0.IconType;
+  readonly props: _sinclair_typebox2207.TObject<{
+    lastTouched: _sinclair_typebox2207.TOptional<_sinclair_typebox2207.TNumber>;
+    hidden: _sinclair_typebox2207.TOptional<_sinclair_typebox2207.TObject<{
+      desktop: _sinclair_typebox2207.TOptional<_sinclair_typebox2207.TBoolean>;
+      mobile: _sinclair_typebox2207.TOptional<_sinclair_typebox2207.TBoolean>;
+    }>>;
+    editable: _sinclair_typebox2207.TOptional<_sinclair_typebox2207.TBoolean>;
+    width: _sinclair_typebox2207.TOptional<_sinclair_typebox2207.TString>;
+    height: _sinclair_typebox2207.TOptional<_sinclair_typebox2207.TString>;
+    grow: _sinclair_typebox2207.TOptional<_sinclair_typebox2207.TBoolean>;
+    alignSelf: _sinclair_typebox2207.TOptional<_sinclair_typebox2207.TUnsafe<"self-auto" | "self-start" | "self-center" | "self-end" | "self-stretch">>;
+  } & {
+    colorPreset: _sinclair_typebox2207.TOptional<_sinclair_typebox2207.TObject<{
+      color: _sinclair_typebox2207.TUnsafe<"primary-50" | "primary-100" | "primary-200" | "primary-300" | "primary-400" | "primary-500" | "primary-600" | "primary-700" | "primary-800" | "primary-900" | "secondary-50" | "secondary-100" | "secondary-200" | "secondary-300" | "secondary-400" | "secondary-500" | "secondary-600" | "secondary-700" | "secondary-800" | "secondary-900" | "accent-50" | "accent-100" | "accent-200" | "accent-300" | "accent-400" | "accent-500" | "accent-600" | "accent-700" | "accent-800" | "accent-900" | "neutral-50" | "neutral-100" | "neutral-200" | "neutral-300" | "neutral-400" | "neutral-500" | "neutral-600" | "neutral-700" | "neutral-800" | "neutral-900" | "base-100" | "base-200" | "base-300" | "primary-gradient-100" | "primary-gradient-200" | "primary-gradient-300" | "primary-gradient-400" | "primary-gradient-500" | "primary-gradient-600" | "primary-gradient-700" | "primary-gradient-800" | "secondary-gradient-100" | "secondary-gradient-200" | "secondary-gradient-300" | "secondary-gradient-400" | "secondary-gradient-500" | "secondary-gradient-600" | "secondary-gradient-700" | "secondary-gradient-800" | "accent-gradient-100" | "accent-gradient-200" | "accent-gradient-300" | "accent-gradient-400" | "accent-gradient-500" | "accent-gradient-600" | "accent-gradient-700" | "accent-gradient-800" | "neutral-gradient-100" | "neutral-gradient-200" | "neutral-gradient-300" | "neutral-gradient-400" | "neutral-gradient-500" | "neutral-gradient-600" | "neutral-gradient-700" | "neutral-gradient-800" | "base-gradient-100" | "base-gradient-200" | "none">;
+      gradientDirection: _sinclair_typebox2207.TOptional<_sinclair_typebox2207.TUnsafe<"bg-gradient-to-t" | "bg-gradient-to-r" | "bg-gradient-to-b" | "bg-gradient-to-l" | "bg-gradient-to-tl" | "bg-gradient-to-tr" | "bg-gradient-to-br" | "bg-gradient-to-bl">>;
+    }>>;
+    label: _sinclair_typebox2207.TString;
+    fontSize: _sinclair_typebox2207.TOptional<_sinclair_typebox2207.TUnsafe<"text-sm" | "inherit" | "text-xs" | "text-base" | "text-lg" | "text-xl">>;
+    rounding: _sinclair_typebox2207.TOptional<_sinclair_typebox2207.TUnsafe<"rounded-md" | "rounded-auto" | "rounded-none" | "rounded-sm" | "rounded-lg" | "rounded-xl" | "rounded-2xl" | "rounded-full">>;
+    fill: _sinclair_typebox2207.TOptional<_sinclair_typebox2207.TUnsafe<"outline" | "solid">>;
+    link: _sinclair_typebox2207.TUnion<[_sinclair_typebox2207.TString, _sinclair_typebox2207.TString]>;
+  }>;
+  readonly category: BrickCategory;
+  readonly defaultInspectorTab: "preset" | "style" | "content";
+  readonly hideInLibrary: boolean;
+  readonly deletable: boolean;
+  readonly movable: boolean;
+  readonly resizable: boolean | "horizontal" | "vertical";
+  readonly duplicatable: boolean;
+  readonly isContainer: boolean;
+  readonly isGlobalBrick: boolean;
+  readonly defaultWidth: {
+    readonly mobile: string;
+    readonly desktop: string;
+  };
+  readonly defaultHeight: {
+    readonly mobile: string;
+    readonly desktop: string;
+  };
+  readonly type: string;
+  readonly name: string;
+  readonly iconClassName?: string;
+  readonly staticClasses?: string;
+  readonly description?: string;
+  readonly minWidth?: {
+    mobile?: number;
+    desktop?: number;
+  };
+  readonly maxWidth?: {
+    mobile?: number;
+    desktop?: number;
+  };
+  readonly minHeight?: {
+    mobile?: number;
+    desktop?: number;
+  };
+  readonly maxHeight?: {
+    mobile?: number;
+    desktop?: number;
+  };
+  readonly consumesMultipleQueryRows?: boolean;
+  readonly inlineDragDisabled?: boolean;
+  readonly aiInstructions?: string;
 };
-export type Manifest = typeof manifest;
-export declare const examples: BrickExample<Manifest>[];
+type Manifest = typeof manifest;
+declare const examples: BrickExample<Manifest>[];
+//#endregion
+export { Manifest, examples, manifest };
 //# sourceMappingURL=button.manifest.d.ts.map

package/dist/shared/bricks/manifests/button.manifest.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.manifest.d.ts","sourceRoot":"","sources":["../../../../src/shared/bricks/manifests/button.manifest.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAAG,CAAC;eACvB,CAAD;;;cAGQ,CAAC;eACN,CAAC;;;cAAmE,CAAC;eAAqB,CAAC;;;cAGxD,CAAC;eAC9B,CAAC;;;;;CAsET,CAAC;AAEH,MAAM,MAAM,QAAQ,GAAG,OAAO,QAAQ,CAAC;AAEvC,eAAO,MAAM,QAAQ,EAAE,YAAY,CAAC,QAAQ,CAAC,EA8O5C,CAAC"}
+{"version":3,"file":"button.manifest.d.ts","names":[],"sources":["../../../../src/shared/bricks/manifests/button.manifest.ts"],"sourcesContent":[],"mappings":";;;;;;cAWa;iBA+EX,gBAAA,CAAA;;;;MA/EW,OA+EX,iCAAA,gCAAA;MAAA,MAAA,iCAAA,gCAAA;IAAA,CAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAEU,SAAA,aAAQ,CAAU,EAAA,MAAA;EAEjB,SAAA,WA8OZ,CAAA,EAAA,MAAA;EAAA,SAAA,QAAA,CAAA,EAAA;IA9OmC,MAAA,CAAA,EAAA,MAAA;IAAb,OAAA,CAAA,EAAA,MAAA;EAAY,CAAA;;;;;;;;;;;;;;;;;KAFvB,QAAA,UAAkB;cAEjB,UAAU,aAAa"}

package/dist/shared/bricks/manifests/button.manifest.js

@@ -1,24 +1,310 @@
-/*! Upstart.gg - Copyright (C) 2024 Flippable - https://github.com/upstart-gg/upstart/blob/main/LICENSE */
+import { StringEnum } from "../../utils/string-enum.js";
+import { defineBrickManifest } from "../../brick-manifest.js";
+import { defineProps } from "../props/helpers.js";
+import { urlOrPageId } from "../props/string.js";
+import { fontSize } from "../props/text.js";
+import { colorPreset } from "../props/color-preset.js";
+import { rounding } from "../props/border.js";
+import { Type } from "@sinclair/typebox";
+import { RxButton } from "react-icons/rx";
 
-import {
-  examples,
-  manifest
-} from "../../chunk-7U5WPHXB.js";
-import "../../chunk-SRYBJ6NQ.js";
-import "../../chunk-JSDKK5QN.js";
-import "../../chunk-VTCHJT4O.js";
-import "../../chunk-2U5U3CCJ.js";
-import "../../chunk-SQXZNGQF.js";
-import "../../chunk-XXPSM6UA.js";
-import "../../chunk-OJ6KL7FU.js";
-import "../../chunk-ZRBTAC3G.js";
-import "../../chunk-IEMCCHM4.js";
-import "../../chunk-J45LSQT6.js";
-import "../../chunk-HY7JOP3J.js";
-import "../../chunk-GDYCCB3B.js";
-import "../../chunk-ZGQ3AQBG.js";
-export {
-  examples,
-  manifest
-};
+//#region src/shared/bricks/manifests/button.manifest.ts
+const manifest = defineBrickManifest({
+	type: "button",
+	name: "Button",
+	category: "basic",
+	description: "A button",
+	aiInstructions: `Use this button component for navigation and call-to-action elements throughout the site.
+
+WHEN TO USE:
+- Navigation links (Learn More, About Us, Contact)
+- Call-to-action buttons (Sign Up, Get Started, Buy Now)
+- External links (Download, Visit Website, Social Media)
+- Internal page navigation (Go to Services, View Portfolio)
+
+STYLING GUIDELINES:
+- colorPreset: Use "primary-500" for main CTAs, "secondary-500" for secondary actions, "neutral-500" for low-priority actions, "accent-500" for highlight actions
+- fontSize: "text-sm" for compact buttons, "text-base" for standard, "text-lg" for emphasis, "text-xl" for hero buttons
+- rounding: "rounded-none" for sharp/modern, "rounded-md" for standard, "rounded-lg" for friendly, "rounded-full" for pills
+- fill: Use "solid" for primary actions with background color, "outline" for secondary actions with transparent background and border
+- link: Use full URLs for external (https://example.com), relative paths for internal (/about), or page IDs for site pages (about-us)
+
+DYNAMIC CONTENT:
+- Support template variables: "Buy {{product.name}}" or "Contact {{employee.name}}"
+- Link to dynamic pages: "/products/{{product.id}}" or "/team/{{employee.slug}}"
+
+AVOID:
+- Using in forms (forms have dedicated submit buttons)
+- Empty or unclear labels (use descriptive action words)
+- Mixing multiple high-emphasis colors on same page`,
+	resizable: "horizontal",
+	icon: RxButton,
+	minWidth: {
+		desktop: 120,
+		mobile: 120
+	},
+	defaultWidth: { mobile: "100%" },
+	props: defineProps({
+		colorPreset: Type.Optional(colorPreset({
+			default: { color: "primary-500" },
+			title: "Color",
+			"ui:default-gradient-direction": "bg-gradient-to-b"
+		})),
+		label: Type.String({
+			title: "Label",
+			default: "My button",
+			metadata: { category: "content" }
+		}),
+		fontSize: Type.Optional(fontSize({
+			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(rounding({ default: "rounded-md" })),
+		fill: Type.Optional(StringEnum(["solid", "outline"], {
+			title: "Fill",
+			description: "Button appearance style - solid background or outlined.",
+			default: "solid",
+			enumNames: ["Solid", "Outline"],
+			"ui:field": "enum",
+			"ui:display": "select"
+		})),
+		link: urlOrPageId({
+			title: "Link",
+			"ui:placeholder": "https://example.com",
+			metadata: { category: "content" }
+		})
+	}, { noGrow: true })
+});
+const examples = [
+	{
+		description: "Primary call-to-action button - Use for main actions users should take",
+		type: "button",
+		props: {
+			label: "Get Started",
+			link: "/signup",
+			colorPreset: { color: "primary-500" },
+			fontSize: "text-base",
+			rounding: "rounded-md",
+			fill: "solid"
+		}
+	},
+	{
+		description: "Secondary button - Use for supporting actions or alternatives",
+		type: "button",
+		props: {
+			label: "Learn More",
+			link: "/about",
+			colorPreset: { color: "secondary-500" },
+			fontSize: "text-base",
+			rounding: "rounded-md",
+			fill: "outline"
+		}
+	},
+	{
+		description: "Neutral button - Use for low-priority actions or navigation",
+		type: "button",
+		props: {
+			label: "View Details",
+			link: "/details",
+			colorPreset: { color: "neutral-500" },
+			fontSize: "text-sm",
+			rounding: "rounded-md"
+		}
+	},
+	{
+		description: "Accent button - Use for special promotions or highlighted actions",
+		type: "button",
+		props: {
+			label: "Special Offer",
+			link: "/promo",
+			colorPreset: { color: "accent-500" },
+			fontSize: "text-lg",
+			rounding: "rounded-lg"
+		}
+	},
+	{
+		description: "External website link - Full URL for outside navigation",
+		type: "button",
+		props: {
+			label: "Visit Our Store",
+			link: "https://store.example.com",
+			colorPreset: { color: "primary-500" },
+			fontSize: "text-base",
+			rounding: "rounded-md"
+		}
+	},
+	{
+		description: "Download button - Direct file download link",
+		type: "button",
+		props: {
+			label: "Download PDF",
+			link: "https://example.com/brochure.pdf",
+			colorPreset: { color: "secondary-600" },
+			fontSize: "text-base",
+			rounding: "rounded-lg",
+			fill: "outline"
+		}
+	},
+	{
+		description: "Internal page navigation using page ID reference",
+		type: "button",
+		props: {
+			label: "Contact Us",
+			link: "contact",
+			colorPreset: { color: "neutral-600" },
+			fontSize: "text-base",
+			rounding: "rounded-md"
+		}
+	},
+	{
+		description: "Internal relative URL navigation",
+		type: "button",
+		props: {
+			label: "Our Services",
+			link: "/services",
+			colorPreset: { color: "primary-500" },
+			fontSize: "text-base",
+			rounding: "rounded-md"
+		}
+	},
+	{
+		description: "Dynamic product purchase button using product query data",
+		type: "button",
+		props: {
+			label: "Buy {{product.name}} - ${{product.price}}",
+			link: "/checkout/{{product.id}}",
+			colorPreset: { color: "primary-600" },
+			fontSize: "text-base",
+			rounding: "rounded-md",
+			fill: "outline"
+		}
+	},
+	{
+		description: "Dynamic employee contact button using team member data",
+		type: "button",
+		props: {
+			label: "Contact {{employee.name}}",
+			link: "mailto:{{employee.email}}",
+			colorPreset: { color: "neutral-500" },
+			fontSize: "text-sm",
+			rounding: "rounded-md"
+		}
+	},
+	{
+		description: "Dynamic event registration using event query data",
+		type: "button",
+		props: {
+			label: "Register for {{event.title}}",
+			link: "/events/{{event.slug}}/register",
+			colorPreset: { color: "accent-500" },
+			fontSize: "text-base",
+			rounding: "rounded-lg"
+		}
+	},
+	{
+		description: "Small compact button - Use in tight spaces or secondary contexts",
+		type: "button",
+		props: {
+			label: "Edit",
+			link: "/edit",
+			colorPreset: { color: "neutral-400" },
+			fontSize: "text-sm",
+			rounding: "rounded-sm"
+		}
+	},
+	{
+		description: "Large hero button - Use for prominent call-to-actions",
+		type: "button",
+		props: {
+			label: "Start Free Trial",
+			link: "/trial",
+			colorPreset: { color: "primary-600" },
+			fontSize: "text-xl",
+			rounding: "rounded-xl",
+			fill: "outline"
+		}
+	},
+	{
+		description: "Pill-shaped button - Modern rounded design",
+		type: "button",
+		props: {
+			label: "Subscribe",
+			link: "/newsletter",
+			colorPreset: { color: "accent-500" },
+			fontSize: "text-base",
+			rounding: "rounded-full"
+		}
+	},
+	{
+		description: "Sharp modern button - Angular design with no rounding",
+		type: "button",
+		props: {
+			label: "Join Now",
+			link: "/join",
+			colorPreset: { color: "primary-500" },
+			fontSize: "text-base",
+			rounding: "rounded-none",
+			fill: "outline"
+		}
+	},
+	{
+		description: "Gradient button - Eye-catching with color transitions",
+		type: "button",
+		props: {
+			label: "Premium Upgrade",
+			link: "/upgrade",
+			colorPreset: {
+				color: "primary-500",
+				gradientDirection: "bg-gradient-to-r"
+			},
+			fontSize: "text-lg",
+			rounding: "rounded-lg"
+		}
+	},
+	{
+		description: "Diagonal gradient button - Unique visual appeal",
+		type: "button",
+		props: {
+			label: "Launch Campaign",
+			link: "/campaigns/new",
+			colorPreset: {
+				color: "accent-600",
+				gradientDirection: "bg-gradient-to-br"
+			},
+			fontSize: "text-base",
+			rounding: "rounded-md",
+			fill: "outline"
+		}
+	},
+	{
+		description: "Solid fill button - Traditional filled background style",
+		type: "button",
+		props: {
+			label: "Solid Button",
+			link: "/solid",
+			colorPreset: { color: "primary-500" },
+			fontSize: "text-base",
+			rounding: "rounded-md",
+			fill: "solid"
+		}
+	},
+	{
+		description: "Outline fill button - Transparent background with border",
+		type: "button",
+		props: {
+			label: "Outline Button",
+			link: "/outline",
+			colorPreset: { color: "primary-500" },
+			fontSize: "text-base",
+			rounding: "rounded-md",
+			fill: "outline"
+		}
+	}
+];
+
+//#endregion
+export { examples, manifest };
 //# sourceMappingURL=button.manifest.js.map

package/dist/shared/bricks/manifests/button.manifest.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
+{"version":3,"file":"button.manifest.js","names":["examples: BrickExample<Manifest>[]"],"sources":["../../../../src/shared/bricks/manifests/button.manifest.ts"],"sourcesContent":["import { Type } from \"@sinclair/typebox\";\nimport { RxButton } from \"react-icons/rx\";\nimport { defineBrickManifest } from \"~/shared/brick-manifest\";\nimport { defineProps } from \"../props/helpers\";\nimport { urlOrPageId } from \"../props/string\";\nimport { rounding } from \"../props/border\";\nimport { StringEnum } from \"~/shared/utils/string-enum\";\nimport { fontSize } from \"../props/text\";\nimport { colorPreset } from \"../props/color-preset\";\nimport type { BrickExample } from \"./_types\";\n\nexport const manifest = defineBrickManifest({\n  type: \"button\",\n  name: \"Button\",\n  category: \"basic\",\n  description: \"A button\",\n  aiInstructions: `Use this button component for navigation and call-to-action elements throughout the site.\n\nWHEN TO USE:\n- Navigation links (Learn More, About Us, Contact)\n- Call-to-action buttons (Sign Up, Get Started, Buy Now)\n- External links (Download, Visit Website, Social Media)\n- Internal page navigation (Go to Services, View Portfolio)\n\nSTYLING GUIDELINES:\n- colorPreset: Use \"primary-500\" for main CTAs, \"secondary-500\" for secondary actions, \"neutral-500\" for low-priority actions, \"accent-500\" for highlight actions\n- fontSize: \"text-sm\" for compact buttons, \"text-base\" for standard, \"text-lg\" for emphasis, \"text-xl\" for hero buttons\n- rounding: \"rounded-none\" for sharp/modern, \"rounded-md\" for standard, \"rounded-lg\" for friendly, \"rounded-full\" for pills\n- fill: Use \"solid\" for primary actions with background color, \"outline\" for secondary actions with transparent background and border\n- link: Use full URLs for external (https://example.com), relative paths for internal (/about), or page IDs for site pages (about-us)\n\nDYNAMIC CONTENT:\n- Support template variables: \"Buy {{product.name}}\" or \"Contact {{employee.name}}\"\n- Link to dynamic pages: \"/products/{{product.id}}\" or \"/team/{{employee.slug}}\"\n\nAVOID:\n- Using in forms (forms have dedicated submit buttons)\n- Empty or unclear labels (use descriptive action words)\n- Mixing multiple high-emphasis colors on same page`,\n  resizable: \"horizontal\",\n  icon: RxButton,\n  minWidth: {\n    desktop: 120,\n    mobile: 120,\n  },\n  defaultWidth: {\n    mobile: \"100%\",\n  },\n  props: defineProps(\n    {\n      colorPreset: Type.Optional(\n        colorPreset({\n          default: { color: \"primary-500\" },\n          title: \"Color\",\n          \"ui:default-gradient-direction\": \"bg-gradient-to-b\",\n        }),\n      ),\n      label: Type.String({ title: \"Label\", default: \"My button\", metadata: { category: \"content\" } }),\n      fontSize: Type.Optional(\n        fontSize({\n          title: \"Font size\",\n          description: \"The font size of the button text.\",\n          default: \"text-base\",\n          \"ui:responsive\": \"desktop\",\n          \"ui:no-extra-large-sizes\": true,\n        }),\n      ),\n      rounding: Type.Optional(\n        rounding({\n          default: \"rounded-md\",\n        }),\n      ),\n      fill: Type.Optional(\n        StringEnum([\"solid\", \"outline\"], {\n          title: \"Fill\",\n          description: \"Button appearance style - solid background or outlined.\",\n          default: \"solid\",\n          enumNames: [\"Solid\", \"Outline\"],\n          \"ui:field\": \"enum\",\n          \"ui:display\": \"select\",\n        }),\n      ),\n      link: urlOrPageId({\n        title: \"Link\",\n        \"ui:placeholder\": \"https://example.com\",\n        metadata: { category: \"content\" },\n      }),\n    },\n    { noGrow: true },\n  ),\n});\n\nexport type Manifest = typeof manifest;\n\nexport const examples: BrickExample<Manifest>[] = [\n  // BASIC BUTTON TYPES\n  {\n    description: \"Primary call-to-action button - Use for main actions users should take\",\n    type: \"button\",\n    props: {\n      label: \"Get Started\",\n      link: \"/signup\",\n      colorPreset: { color: \"primary-500\" },\n      fontSize: \"text-base\",\n      rounding: \"rounded-md\",\n      fill: \"solid\",\n    },\n  },\n  {\n    description: \"Secondary button - Use for supporting actions or alternatives\",\n    type: \"button\",\n    props: {\n      label: \"Learn More\",\n      link: \"/about\",\n      colorPreset: { color: \"secondary-500\" },\n      fontSize: \"text-base\",\n      rounding: \"rounded-md\",\n      fill: \"outline\",\n    },\n  },\n  {\n    description: \"Neutral button - Use for low-priority actions or navigation\",\n    type: \"button\",\n    props: {\n      label: \"View Details\",\n      link: \"/details\",\n      colorPreset: { color: \"neutral-500\" },\n      fontSize: \"text-sm\",\n      rounding: \"rounded-md\",\n    },\n  },\n  {\n    description: \"Accent button - Use for special promotions or highlighted actions\",\n    type: \"button\",\n    props: {\n      label: \"Special Offer\",\n      link: \"/promo\",\n      colorPreset: { color: \"accent-500\" },\n      fontSize: \"text-lg\",\n      rounding: \"rounded-lg\",\n    },\n  },\n\n  // EXTERNAL LINK EXAMPLES\n  {\n    description: \"External website link - Full URL for outside navigation\",\n    type: \"button\",\n    props: {\n      label: \"Visit Our Store\",\n      link: \"https://store.example.com\",\n      colorPreset: { color: \"primary-500\" },\n      fontSize: \"text-base\",\n      rounding: \"rounded-md\",\n    },\n  },\n  {\n    description: \"Download button - Direct file download link\",\n    type: \"button\",\n    props: {\n      label: \"Download PDF\",\n      link: \"https://example.com/brochure.pdf\",\n      colorPreset: { color: \"secondary-600\" },\n      fontSize: \"text-base\",\n      rounding: \"rounded-lg\",\n      fill: \"outline\",\n    },\n  },\n\n  // INTERNAL NAVIGATION EXAMPLES\n  {\n    description: \"Internal page navigation using page ID reference\",\n    type: \"button\",\n    props: {\n      label: \"Contact Us\",\n      link: \"contact\",\n      colorPreset: { color: \"neutral-600\" },\n      fontSize: \"text-base\",\n      rounding: \"rounded-md\",\n    },\n  },\n  {\n    description: \"Internal relative URL navigation\",\n    type: \"button\",\n    props: {\n      label: \"Our Services\",\n      link: \"/services\",\n      colorPreset: { color: \"primary-500\" },\n      fontSize: \"text-base\",\n      rounding: \"rounded-md\",\n    },\n  },\n\n  // DYNAMIC CONTENT EXAMPLES\n  {\n    description: \"Dynamic product purchase button using product query data\",\n    type: \"button\",\n    props: {\n      label: \"Buy {{product.name}} - ${{product.price}}\",\n      link: \"/checkout/{{product.id}}\",\n      colorPreset: { color: \"primary-600\" },\n      fontSize: \"text-base\",\n      rounding: \"rounded-md\",\n      fill: \"outline\",\n    },\n  },\n  {\n    description: \"Dynamic employee contact button using team member data\",\n    type: \"button\",\n    props: {\n      label: \"Contact {{employee.name}}\",\n      link: \"mailto:{{employee.email}}\",\n      colorPreset: { color: \"neutral-500\" },\n      fontSize: \"text-sm\",\n      rounding: \"rounded-md\",\n    },\n  },\n  {\n    description: \"Dynamic event registration using event query data\",\n    type: \"button\",\n    props: {\n      label: \"Register for {{event.title}}\",\n      link: \"/events/{{event.slug}}/register\",\n      colorPreset: { color: \"accent-500\" },\n      fontSize: \"text-base\",\n      rounding: \"rounded-lg\",\n    },\n  },\n\n  // STYLING VARIATIONS\n  {\n    description: \"Small compact button - Use in tight spaces or secondary contexts\",\n    type: \"button\",\n    props: {\n      label: \"Edit\",\n      link: \"/edit\",\n      colorPreset: { color: \"neutral-400\" },\n      fontSize: \"text-sm\",\n      rounding: \"rounded-sm\",\n    },\n  },\n  {\n    description: \"Large hero button - Use for prominent call-to-actions\",\n    type: \"button\",\n    props: {\n      label: \"Start Free Trial\",\n      link: \"/trial\",\n      colorPreset: { color: \"primary-600\" },\n      fontSize: \"text-xl\",\n      rounding: \"rounded-xl\",\n      fill: \"outline\",\n    },\n  },\n  {\n    description: \"Pill-shaped button - Modern rounded design\",\n    type: \"button\",\n    props: {\n      label: \"Subscribe\",\n      link: \"/newsletter\",\n      colorPreset: { color: \"accent-500\" },\n      fontSize: \"text-base\",\n      rounding: \"rounded-full\",\n    },\n  },\n  {\n    description: \"Sharp modern button - Angular design with no rounding\",\n    type: \"button\",\n    props: {\n      label: \"Join Now\",\n      link: \"/join\",\n      colorPreset: { color: \"primary-500\" },\n      fontSize: \"text-base\",\n      rounding: \"rounded-none\",\n      fill: \"outline\",\n    },\n  },\n\n  // GRADIENT EXAMPLES\n  {\n    description: \"Gradient button - Eye-catching with color transitions\",\n    type: \"button\",\n    props: {\n      label: \"Premium Upgrade\",\n      link: \"/upgrade\",\n      colorPreset: {\n        color: \"primary-500\",\n        gradientDirection: \"bg-gradient-to-r\",\n      },\n      fontSize: \"text-lg\",\n      rounding: \"rounded-lg\",\n    },\n  },\n  {\n    description: \"Diagonal gradient button - Unique visual appeal\",\n    type: \"button\",\n    props: {\n      label: \"Launch Campaign\",\n      link: \"/campaigns/new\",\n      colorPreset: {\n        color: \"accent-600\",\n        gradientDirection: \"bg-gradient-to-br\",\n      },\n      fontSize: \"text-base\",\n      rounding: \"rounded-md\",\n      fill: \"outline\",\n    },\n  },\n\n  // FILL STYLE COMPARISON EXAMPLES\n  {\n    description: \"Solid fill button - Traditional filled background style\",\n    type: \"button\",\n    props: {\n      label: \"Solid Button\",\n      link: \"/solid\",\n      colorPreset: { color: \"primary-500\" },\n      fontSize: \"text-base\",\n      rounding: \"rounded-md\",\n      fill: \"solid\",\n    },\n  },\n  {\n    description: \"Outline fill button - Transparent background with border\",\n    type: \"button\",\n    props: {\n      label: \"Outline Button\",\n      link: \"/outline\",\n      colorPreset: { color: \"primary-500\" },\n      fontSize: \"text-base\",\n      rounding: \"rounded-md\",\n      fill: \"outline\",\n    },\n  },\n];\n"],"mappings":";;;;;;;;;;;AAWA,MAAa,WAAW,oBAAoB;CAC1C,MAAM;CACN,MAAM;CACN,UAAU;CACV,aAAa;CACb,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;CAuBhB,WAAW;CACX,MAAM;CACN,UAAU;EACR,SAAS;EACT,QAAQ;EACT;CACD,cAAc,EACZ,QAAQ,QACT;CACD,OAAO,YACL;EACE,aAAa,KAAK,SAChB,YAAY;GACV,SAAS,EAAE,OAAO,eAAe;GACjC,OAAO;GACP,iCAAiC;GAClC,CAAC,CACH;EACD,OAAO,KAAK,OAAO;GAAE,OAAO;GAAS,SAAS;GAAa,UAAU,EAAE,UAAU,WAAW;GAAE,CAAC;EAC/F,UAAU,KAAK,SACb,SAAS;GACP,OAAO;GACP,aAAa;GACb,SAAS;GACT,iBAAiB;GACjB,2BAA2B;GAC5B,CAAC,CACH;EACD,UAAU,KAAK,SACb,SAAS,EACP,SAAS,cACV,CAAC,CACH;EACD,MAAM,KAAK,SACT,WAAW,CAAC,SAAS,UAAU,EAAE;GAC/B,OAAO;GACP,aAAa;GACb,SAAS;GACT,WAAW,CAAC,SAAS,UAAU;GAC/B,YAAY;GACZ,cAAc;GACf,CAAC,CACH;EACD,MAAM,YAAY;GAChB,OAAO;GACP,kBAAkB;GAClB,UAAU,EAAE,UAAU,WAAW;GAClC,CAAC;EACH,EACD,EAAE,QAAQ,MAAM,CACjB;CACF,CAAC;AAIF,MAAaA,WAAqC;CAEhD;EACE,aAAa;EACb,MAAM;EACN,OAAO;GACL,OAAO;GACP,MAAM;GACN,aAAa,EAAE,OAAO,eAAe;GACrC,UAAU;GACV,UAAU;GACV,MAAM;GACP;EACF;CACD;EACE,aAAa;EACb,MAAM;EACN,OAAO;GACL,OAAO;GACP,MAAM;GACN,aAAa,EAAE,OAAO,iBAAiB;GACvC,UAAU;GACV,UAAU;GACV,MAAM;GACP;EACF;CACD;EACE,aAAa;EACb,MAAM;EACN,OAAO;GACL,OAAO;GACP,MAAM;GACN,aAAa,EAAE,OAAO,eAAe;GACrC,UAAU;GACV,UAAU;GACX;EACF;CACD;EACE,aAAa;EACb,MAAM;EACN,OAAO;GACL,OAAO;GACP,MAAM;GACN,aAAa,EAAE,OAAO,cAAc;GACpC,UAAU;GACV,UAAU;GACX;EACF;CAGD;EACE,aAAa;EACb,MAAM;EACN,OAAO;GACL,OAAO;GACP,MAAM;GACN,aAAa,EAAE,OAAO,eAAe;GACrC,UAAU;GACV,UAAU;GACX;EACF;CACD;EACE,aAAa;EACb,MAAM;EACN,OAAO;GACL,OAAO;GACP,MAAM;GACN,aAAa,EAAE,OAAO,iBAAiB;GACvC,UAAU;GACV,UAAU;GACV,MAAM;GACP;EACF;CAGD;EACE,aAAa;EACb,MAAM;EACN,OAAO;GACL,OAAO;GACP,MAAM;GACN,aAAa,EAAE,OAAO,eAAe;GACrC,UAAU;GACV,UAAU;GACX;EACF;CACD;EACE,aAAa;EACb,MAAM;EACN,OAAO;GACL,OAAO;GACP,MAAM;GACN,aAAa,EAAE,OAAO,eAAe;GACrC,UAAU;GACV,UAAU;GACX;EACF;CAGD;EACE,aAAa;EACb,MAAM;EACN,OAAO;GACL,OAAO;GACP,MAAM;GACN,aAAa,EAAE,OAAO,eAAe;GACrC,UAAU;GACV,UAAU;GACV,MAAM;GACP;EACF;CACD;EACE,aAAa;EACb,MAAM;EACN,OAAO;GACL,OAAO;GACP,MAAM;GACN,aAAa,EAAE,OAAO,eAAe;GACrC,UAAU;GACV,UAAU;GACX;EACF;CACD;EACE,aAAa;EACb,MAAM;EACN,OAAO;GACL,OAAO;GACP,MAAM;GACN,aAAa,EAAE,OAAO,cAAc;GACpC,UAAU;GACV,UAAU;GACX;EACF;CAGD;EACE,aAAa;EACb,MAAM;EACN,OAAO;GACL,OAAO;GACP,MAAM;GACN,aAAa,EAAE,OAAO,eAAe;GACrC,UAAU;GACV,UAAU;GACX;EACF;CACD;EACE,aAAa;EACb,MAAM;EACN,OAAO;GACL,OAAO;GACP,MAAM;GACN,aAAa,EAAE,OAAO,eAAe;GACrC,UAAU;GACV,UAAU;GACV,MAAM;GACP;EACF;CACD;EACE,aAAa;EACb,MAAM;EACN,OAAO;GACL,OAAO;GACP,MAAM;GACN,aAAa,EAAE,OAAO,cAAc;GACpC,UAAU;GACV,UAAU;GACX;EACF;CACD;EACE,aAAa;EACb,MAAM;EACN,OAAO;GACL,OAAO;GACP,MAAM;GACN,aAAa,EAAE,OAAO,eAAe;GACrC,UAAU;GACV,UAAU;GACV,MAAM;GACP;EACF;CAGD;EACE,aAAa;EACb,MAAM;EACN,OAAO;GACL,OAAO;GACP,MAAM;GACN,aAAa;IACX,OAAO;IACP,mBAAmB;IACpB;GACD,UAAU;GACV,UAAU;GACX;EACF;CACD;EACE,aAAa;EACb,MAAM;EACN,OAAO;GACL,OAAO;GACP,MAAM;GACN,aAAa;IACX,OAAO;IACP,mBAAmB;IACpB;GACD,UAAU;GACV,UAAU;GACV,MAAM;GACP;EACF;CAGD;EACE,aAAa;EACb,MAAM;EACN,OAAO;GACL,OAAO;GACP,MAAM;GACN,aAAa,EAAE,OAAO,eAAe;GACrC,UAAU;GACV,UAAU;GACV,MAAM;GACP;EACF;CACD;EACE,aAAa;EACb,MAAM;EACN,OAAO;GACL,OAAO;GACP,MAAM;GACN,aAAa,EAAE,OAAO,eAAe;GACrC,UAAU;GACV,UAAU;GACV,MAAM;GACP;EACF;CACF"}