@alpic-ai/ui 0.0.0-staging.dcd2ccb → 0.0.0-staging.ddb67e5

package/dist/components/alert.d.mts

@@ -5,7 +5,7 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 
 //#region src/components/alert.d.ts
 declare const alertVariants: (props?: ({
-  variant?: "default" | "destructive" | "warning" | "success" | null | undefined;
+  variant?: "default" | "success" | "destructive" | "warning" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {}
 declare function Alert({

package/dist/components/badge.d.mts

@@ -4,7 +4,7 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 
 //#region src/components/badge.d.ts
 declare const badgeVariants: (props?: ({
-  variant?: "warning" | "success" | "secondary" | "primary" | "error" | null | undefined;
+  variant?: "success" | "warning" | "primary" | "secondary" | "error" | null | undefined;
   size?: "sm" | "md" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 interface BadgeProps extends React.ComponentProps<"span">, VariantProps<typeof badgeVariants> {}

package/dist/components/button.d.mts

@@ -5,13 +5,14 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 
 //#region src/components/button.d.ts
 declare const buttonVariants: (props?: ({
-  variant?: "destructive" | "secondary" | "primary" | "tertiary" | "link" | "link-muted" | null | undefined;
-  size?: "default" | "icon" | "icon-rounded" | "pill" | null | undefined;
+  variant?: "destructive" | "primary" | "secondary" | "tertiary" | "link" | "link-muted" | "cta" | null | undefined;
+  size?: "default" | "pill" | "icon" | "icon-rounded" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 interface ButtonProps extends React.ComponentProps<"button">, VariantProps<typeof buttonVariants> {
   asChild?: boolean;
   loading?: boolean;
   icon?: React.ReactNode;
+  iconTrailing?: React.ReactNode;
 }
 declare function Button({
   className,
@@ -21,6 +22,7 @@ declare function Button({
   asChild,
   loading,
   icon,
+  iconTrailing,
   disabled,
   children,
   ...props

package/dist/components/button.mjs

@@ -1,9 +1,9 @@
 "use client";
 import { cn } from "../lib/cn.mjs";
 import { Loader2 } from "lucide-react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
-import { Slot } from "@radix-ui/react-slot";
+import { Slot, Slottable } from "@radix-ui/react-slot";
 //#region src/components/button.tsx
 const buttonVariants = cva([
 	"inline-flex items-center justify-center gap-1 whitespace-nowrap",
@@ -35,7 +35,14 @@ const buttonVariants = cva([
 				"[@media(hover:hover)]:hover:underline",
 				"focus-visible:bg-background"
 			].join(" "),
-			destructive: ["bg-destructive text-destructive-foreground", "[@media(hover:hover)]:hover:bg-destructive-hover"].join(" ")
+			destructive: ["bg-destructive text-destructive-foreground", "[@media(hover:hover)]:hover:bg-destructive-hover"].join(" "),
+			cta: [
+				"button-cta",
+				"h-9 px-4 gap-2 rounded-md",
+				"dark:bg-inverted text-foreground",
+				"transition-[transform,filter] duration-300 ease-out",
+				"active:scale-[0.99]"
+			].join(" ")
 		},
 		size: {
 			default: "type-text-sm",
@@ -49,8 +56,8 @@ const buttonVariants = cva([
 		size: "default"
 	}
 });
-function Button({ className, variant, size, type = "button", asChild = false, loading = false, icon, disabled, children, ...props }) {
-	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
+function Button({ className, variant, size, type = "button", asChild = false, loading = false, icon, iconTrailing, disabled, children, ...props }) {
+	return /* @__PURE__ */ jsxs(asChild ? Slot : "button", {
 		"data-slot": "button",
 		className: cn(buttonVariants({
 			variant,
@@ -60,7 +67,14 @@ function Button({ className, variant, size, type = "button", asChild = false, lo
 		disabled: disabled || loading,
 		"aria-busy": loading || void 0,
 		...props,
-		children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [loading ? /* @__PURE__ */ jsx(Loader2, { className: "motion-safe:animate-spin" }) : icon, children] })
+		children: [
+			loading ? /* @__PURE__ */ jsx(Loader2, { className: "motion-safe:animate-spin" }) : icon,
+			asChild ? /* @__PURE__ */ jsx(Slottable, { children }) : children,
+			!loading && iconTrailing ? /* @__PURE__ */ jsx("span", {
+				"data-cta-icon-trailing": true,
+				children: iconTrailing
+			}) : null
+		]
 	});
 }
 //#endregion

package/dist/components/github-button.d.mts

@@ -0,0 +1,13 @@
+import { Button } from "./button.mjs";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentProps } from "react";
+
+//#region src/components/github-button.d.ts
+type GitHubButtonProps = Omit<ComponentProps<typeof Button>, "variant" | "icon">;
+declare function GitHubButton({
+  className,
+  children,
+  ...props
+}: GitHubButtonProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { GitHubButton, type GitHubButtonProps };

package/dist/components/github-button.mjs

@@ -0,0 +1,24 @@
+"use client";
+import { cn } from "../lib/cn.mjs";
+import { Button } from "./button.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/github-button.tsx
+const GITHUB_ICON_PATH = "M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12";
+function GitHubIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		fill: "currentColor",
+		viewBox: "0 0 24 24",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: GITHUB_ICON_PATH })
+	});
+}
+function GitHubButton({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		...props,
+		icon: /* @__PURE__ */ jsx(GitHubIcon, {}),
+		className: cn("bg-foreground text-background [@media(hover:hover)]:hover:bg-foreground/90", className),
+		children
+	});
+}
+//#endregion
+export { GitHubButton };

package/dist/components/sidebar.d.mts

@@ -108,7 +108,7 @@ declare function SidebarMenuItem({
 }: React.ComponentProps<"li">): _$react_jsx_runtime0.JSX.Element;
 declare const sidebarMenuButtonVariants: (props?: ({
   variant?: "default" | "outline" | null | undefined;
-  size?: "default" | "sm" | "lg" | null | undefined;
+  size?: "sm" | "lg" | "default" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 declare function SidebarMenuButton({
   asChild,

package/dist/components/sidebar.mjs

@@ -6,7 +6,6 @@ import { Separator } from "./separator.mjs";
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "./sheet.mjs";
 import { useIsMobile } from "../hooks/use-mobile.mjs";
 import { Skeleton } from "./skeleton.mjs";
-import { PanelLeftClose, PanelLeftOpen } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import * as React from "react";
@@ -18,6 +17,18 @@ const SIDEBAR_WIDTH = "15rem";
 const SIDEBAR_WIDTH_MOBILE = "16rem";
 const SIDEBAR_WIDTH_ICON = "3.5rem";
 const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+const INTERACTIVE_SIDEBAR_ELEMENT_SELECTOR = [
+	"a",
+	"button",
+	"input",
+	"select",
+	"textarea",
+	"[role='button']",
+	"[role='link']",
+	"[role='menuitem']",
+	"[contenteditable='true']",
+	"[tabindex]:not([tabindex='-1'])"
+].join(", ");
 const SidebarContext = React.createContext(null);
 function useSidebar() {
 	const context = React.useContext(SidebarContext);
@@ -81,10 +92,20 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: set
 	});
 }
 function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, ...props }) {
-	const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+	const { isMobile, state, openMobile, setOpenMobile, open, setOpen } = useSidebar();
+	function handleSurfaceClickCapture(event) {
+		if (event.target instanceof Element && event.target.closest(INTERACTIVE_SIDEBAR_ELEMENT_SELECTOR)) return;
+		if (!open) {
+			event.preventDefault();
+			event.stopPropagation();
+			setOpen(true);
+			return;
+		}
+		setOpen(false);
+	}
 	if (collapsible === "none") return /* @__PURE__ */ jsx("div", {
 		"data-slot": "sidebar",
-		className: cn("bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col", className),
+		className: cn("bg-sidebar-surface text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col", className),
 		...props,
 		children
 	});
@@ -96,7 +117,7 @@ function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas"
 			"data-sidebar": "sidebar",
 			"data-slot": "sidebar",
 			"data-mobile": "true",
-			className: "bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden",
+			className: "bg-sidebar-surface text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden",
 			style: { "--sidebar-width": SIDEBAR_WIDTH_MOBILE },
 			side,
 			children: [/* @__PURE__ */ jsxs(SheetHeader, {
@@ -120,20 +141,20 @@ function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas"
 			className: cn("relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-out", "group-data-[collapsible=offcanvas]:w-0", "group-data-[side=right]:rotate-180", variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)")
 		}), /* @__PURE__ */ jsx("div", {
 			"data-slot": "sidebar-container",
-			className: cn("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out md:flex", side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]", variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l", className),
+			className: cn("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-out md:flex", side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]", variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "border-sidebar-border group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l", className),
 			...props,
 			children: /* @__PURE__ */ jsx("div", {
 				"data-sidebar": "sidebar",
 				"data-slot": "sidebar-inner",
-				className: "bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm",
+				className: "bg-sidebar-surface group-data-[variant=floating]:border-sidebar-border flex h-full w-full cursor-pointer flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm",
+				onClickCapture: handleSurfaceClickCapture,
 				children
 			})
 		})]
 	});
 }
 function SidebarTrigger({ className, onClick, ...props }) {
-	const { state, isMobile, openMobile, toggleSidebar } = useSidebar();
-	const isOpen = isMobile ? openMobile : state === "expanded";
+	const { toggleSidebar } = useSidebar();
 	return /* @__PURE__ */ jsxs(Button, {
 		"data-sidebar": "trigger",
 		"data-slot": "sidebar-trigger",
@@ -145,12 +166,35 @@ function SidebarTrigger({ className, onClick, ...props }) {
 			toggleSidebar();
 		},
 		...props,
-		children: [isOpen ? /* @__PURE__ */ jsx(PanelLeftClose, { className: "size-4.5" }) : /* @__PURE__ */ jsx(PanelLeftOpen, { className: "size-4.5" }), /* @__PURE__ */ jsx("span", {
+		children: [/* @__PURE__ */ jsx(SidebarToggleIcon, { className: "size-4.5" }), /* @__PURE__ */ jsx("span", {
 			className: "sr-only",
 			children: "Toggle Sidebar"
 		})]
 	});
 }
+function SidebarToggleIcon({ className, ...props }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 20 20",
+		fill: "none",
+		"aria-hidden": "true",
+		className,
+		...props,
+		children: [/* @__PURE__ */ jsx("rect", {
+			x: "2.75",
+			y: "2.75",
+			width: "14.5",
+			height: "14.5",
+			rx: "4",
+			stroke: "currentColor",
+			strokeWidth: "1.5"
+		}), /* @__PURE__ */ jsx("path", {
+			d: "M10 4.75V15.25",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinecap: "round"
+		})]
+	});
+}
 function SidebarRail({ className, ...props }) {
 	const { toggleSidebar } = useSidebar();
 	return /* @__PURE__ */ jsx("button", {
@@ -160,7 +204,7 @@ function SidebarRail({ className, ...props }) {
 		tabIndex: -1,
 		onClick: toggleSidebar,
 		title: "Toggle Sidebar",
-		className: cn("[@media(hover:hover)]:hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "[@media(hover:hover)]:hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", className),
+		className: cn("absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex", "[@media(hover:hover)]:hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", className),
 		...props
 	});
 }
@@ -182,22 +226,22 @@ function SidebarHeader({ className, icon, title, children, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "sidebar-header",
 		"data-sidebar": "header",
-		className: cn("flex flex-col gap-2 p-2 group-data-[collapsible=icon]:items-center", className),
+		className: cn("flex flex-col gap-2 py-2", className),
 		...props,
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex h-8 items-center gap-2 px-2 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:gap-0 group-data-[collapsible=icon]:px-0",
+			className: "flex h-8 items-center gap-2 px-3",
 			children: [
-				/* @__PURE__ */ jsxs("div", {
-					className: "relative shrink-0",
+				/* @__PURE__ */ jsxs("span", {
+					className: "relative flex size-8 shrink-0 items-center justify-center",
 					children: [/* @__PURE__ */ jsx("span", {
-						className: "transition-opacity group-data-[collapsible=icon]:group-hover:opacity-0",
+						className: "transition-opacity duration-200 group-data-[collapsible=icon]:group-hover:opacity-0",
 						children: icon
-					}), /* @__PURE__ */ jsx("div", {
-						className: "absolute inset-0 flex items-center justify-center opacity-0 transition-opacity group-data-[collapsible=icon]:group-hover:opacity-100",
-						children: /* @__PURE__ */ jsx(SidebarTrigger, { className: "!size-4 !p-0" })
+					}), /* @__PURE__ */ jsx(SidebarTrigger, {
+						tabIndex: -1,
+						className: "absolute inset-0 opacity-0 transition-opacity duration-200 group-data-[collapsible=icon]:group-hover:opacity-100"
 					})]
 				}),
-				title && /* @__PURE__ */ jsx("span", {
+				/* @__PURE__ */ jsx("span", {
 					className: "text-foreground text-md min-w-0 truncate font-medium group-data-[collapsible=icon]:hidden",
 					children: title
 				}),
@@ -232,7 +276,7 @@ function SidebarGroup({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "sidebar-group",
 		"data-sidebar": "group",
-		className: cn("relative flex w-full min-w-0 flex-col p-2", className),
+		className: cn("relative flex w-full min-w-0 flex-col", className),
 		...props
 	});
 }
@@ -272,7 +316,7 @@ function SidebarMenuItem({ className, ...props }) {
 	return /* @__PURE__ */ jsx("li", {
 		"data-slot": "sidebar-menu-item",
 		"data-sidebar": "menu-item",
-		className: cn("group/menu-item relative", className),
+		className: cn("group/menu-item relative px-3", className),
 		...props
 	});
 }

package/dist/components/skeleton.d.mts

@@ -4,7 +4,7 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 
 //#region src/components/skeleton.d.ts
 declare const skeletonVariants: (props?: ({
-  shape?: "rectangle" | "circle" | null | undefined;
+  shape?: "circle" | "rectangle" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 interface SkeletonProps extends React.ComponentProps<"div">, VariantProps<typeof skeletonVariants> {}
 declare function Skeleton({

package/dist/components/spinner.d.mts

@@ -4,7 +4,7 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 
 //#region src/components/spinner.d.ts
 declare const spinnerVariants: (props?: ({
-  variant?: "secondary" | "primary" | null | undefined;
+  variant?: "primary" | "secondary" | null | undefined;
   size?: "sm" | "md" | "lg" | "xl" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 interface SpinnerProps extends Omit<React.ComponentProps<"svg">, "children">, VariantProps<typeof spinnerVariants> {}

package/dist/components/status-dot.d.mts

@@ -4,7 +4,7 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 
 //#region src/components/status-dot.d.ts
 declare const statusDotVariants: (props?: ({
-  variant?: "destructive" | "warning" | "success" | "muted" | null | undefined;
+  variant?: "success" | "destructive" | "warning" | "muted" | null | undefined;
   pulse?: boolean | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 interface StatusDotProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof statusDotVariants> {}

package/dist/components/tabs.d.mts

@@ -6,7 +6,7 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 
 //#region src/components/tabs.d.ts
 declare const tabsTriggerVariants: (props?: ({
-  variant?: "default" | "pill" | "line" | null | undefined;
+  variant?: "default" | "line" | "pill" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 declare function Tabs({
   className,

package/dist/components/toggle-group.d.mts

@@ -7,7 +7,7 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 //#region src/components/toggle-group.d.ts
 declare const toggleGroupItemVariants: (props?: ({
   variant?: "default" | "outline" | null | undefined;
-  size?: "default" | "sm" | null | undefined;
+  size?: "sm" | "default" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 type ToggleGroupContextValue = VariantProps<typeof toggleGroupItemVariants>;
 declare function ToggleGroup({

package/dist/components/typography.d.mts

@@ -0,0 +1,34 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactNode } from "react";
+
+//#region src/components/typography.d.ts
+declare function H1({
+  children,
+  className
+}: {
+  children: ReactNode;
+  className?: string;
+}): _$react_jsx_runtime0.JSX.Element;
+declare function H2({
+  children,
+  className
+}: {
+  children: ReactNode;
+  className?: string;
+}): _$react_jsx_runtime0.JSX.Element;
+declare function H3({
+  children,
+  className
+}: {
+  children: ReactNode;
+  className?: string;
+}): _$react_jsx_runtime0.JSX.Element;
+declare function H4({
+  children,
+  className
+}: {
+  children: ReactNode;
+  className?: string;
+}): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { H1, H2, H3, H4 };

package/dist/components/typography.mjs

@@ -0,0 +1,29 @@
+import { cn } from "../lib/cn.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/typography.tsx
+function H1({ children, className }) {
+	return /* @__PURE__ */ jsx("h1", {
+		className: cn("scroll-m-20 type-display-sm font-bold", className),
+		children
+	});
+}
+function H2({ children, className }) {
+	return /* @__PURE__ */ jsx("h2", {
+		className: cn("scroll-m-20 type-display-xs font-semibold", className),
+		children
+	});
+}
+function H3({ children, className }) {
+	return /* @__PURE__ */ jsx("h3", {
+		className: cn("scroll-m-20 type-text-lg font-semibold", className),
+		children
+	});
+}
+function H4({ children, className }) {
+	return /* @__PURE__ */ jsx("h4", {
+		className: cn("scroll-m-20 type-text-md font-semibold", className),
+		children
+	});
+}
+//#endregion
+export { H1, H2, H3, H4 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alpic-ai/ui",
-  "version": "0.0.0-staging.dcd2ccb",
+  "version": "0.0.0-staging.ddb67e5",
   "description": "Alpic design system — shared UI components",
   "type": "module",
   "exports": {
@@ -23,13 +23,13 @@
     "src"
   ],
   "peerDependencies": {
-    "lucide-react": "^1.0.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-hook-form": "^7.72.1",
-    "sonner": "^2.0.0",
-    "tailwindcss": "^4.0.0",
-    "tw-animate-css": "^1.0.0"
+    "lucide-react": "^1.8.0",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "react-hook-form": "^7.73.1",
+    "sonner": "^2.0.7",
+    "tailwindcss": "^4.2.3",
+    "tw-animate-css": "^1.4.0"
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.12",
@@ -56,17 +56,17 @@
   },
   "devDependencies": {
     "@ladle/react": "^5.1.1",
-    "@tailwindcss/postcss": "^4.2.2",
+    "@tailwindcss/postcss": "^4.2.3",
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
-    "lucide-react": "^1.7.0",
-    "react-hook-form": "^7.72.1",
+    "lucide-react": "^1.8.0",
+    "react-hook-form": "^7.73.1",
     "shx": "^0.4.0",
     "sonner": "^2.0.7",
-    "tailwindcss": "^4.2.2",
-    "tsdown": "^0.21.7",
+    "tailwindcss": "^4.2.3",
+    "tsdown": "^0.21.9",
     "tw-animate-css": "^1.4.0",
-    "typescript": "^6.0.2"
+    "typescript": "^6.0.3"
   },
   "scripts": {
     "build": "shx rm -rf dist && tsdown",

package/src/components/button.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Slot } from "@radix-ui/react-slot";
+import { Slot, Slottable } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
 import { Loader2 } from "lucide-react";
 import type * as React from "react";
@@ -46,6 +46,13 @@ const buttonVariants = cva(
           "bg-destructive text-destructive-foreground",
           "[@media(hover:hover)]:hover:bg-destructive-hover",
         ].join(" "),
+        cta: [
+          "button-cta",
+          "h-9 px-4 gap-2 rounded-md",
+          "dark:bg-inverted text-foreground",
+          "transition-[transform,filter] duration-300 ease-out",
+          "active:scale-[0.99]",
+        ].join(" "),
       },
       size: {
         default: "type-text-sm",
@@ -65,6 +72,7 @@ interface ButtonProps extends React.ComponentProps<"button">, VariantProps<typeo
   asChild?: boolean;
   loading?: boolean;
   icon?: React.ReactNode;
+  iconTrailing?: React.ReactNode;
 }
 
 function Button({
@@ -75,6 +83,7 @@ function Button({
   asChild = false,
   loading = false,
   icon,
+  iconTrailing,
   disabled,
   children,
   ...props
@@ -90,14 +99,9 @@ function Button({
       aria-busy={loading || undefined}
       {...props}
     >
-      {asChild ? (
-        children
-      ) : (
-        <>
-          {loading ? <Loader2 className="motion-safe:animate-spin" /> : icon}
-          {children}
-        </>
-      )}
+      {loading ? <Loader2 className="motion-safe:animate-spin" /> : icon}
+      {asChild ? <Slottable>{children}</Slottable> : children}
+      {!loading && iconTrailing ? <span data-cta-icon-trailing>{iconTrailing}</span> : null}
     </Comp>
   );
 }

package/src/components/combobox.tsx

@@ -84,7 +84,9 @@ function Combobox(props: ComboboxProps) {
 
   const onOpenChange = useCallback(
     (newOpen: boolean) => {
-      if (!isOpenControlled) setUncontrolledOpen(newOpen);
+      if (!isOpenControlled) {
+        setUncontrolledOpen(newOpen);
+      }
       controlledOnOpenChange?.(newOpen);
     },
     [isOpenControlled, controlledOnOpenChange],
@@ -105,7 +107,9 @@ function Combobox(props: ComboboxProps) {
 
   const isSelected = useCallback(
     (itemValue: string) => {
-      if (multiple) return multiValues.includes(itemValue);
+      if (multiple) {
+        return multiValues.includes(itemValue);
+      }
       return singleValue === itemValue;
     },
     [multiple, singleValue, multiValues],
@@ -123,11 +127,15 @@ function Combobox(props: ComboboxProps) {
         const next = multiValues.includes(itemValue)
           ? multiValues.filter((val) => val !== itemValue)
           : [...multiValues, itemValue];
-        if (!isControlledMulti) setUncontrolledMultiValue(next);
+        if (!isControlledMulti) {
+          setUncontrolledMultiValue(next);
+        }
         onValueChangeMulti?.(next);
         // Stay open in multi mode
       } else {
-        if (!isControlledSingle) setUncontrolledSingleValue(itemValue);
+        if (!isControlledSingle) {
+          setUncontrolledSingleValue(itemValue);
+        }
         onValueChangeSingle?.(itemValue);
         onOpenChange(false);
       }
@@ -145,9 +153,13 @@ function Combobox(props: ComboboxProps) {
 
   const onDeselect = useCallback(
     (itemValue: string) => {
-      if (!multiple) return;
+      if (!multiple) {
+        return;
+      }
       const next = multiValues.filter((val) => val !== itemValue);
-      if (!isControlledMulti) setUncontrolledMultiValue(next);
+      if (!isControlledMulti) {
+        setUncontrolledMultiValue(next);
+      }
       onValueChangeMulti?.(next);
     },
     [multiple, isControlledMulti, onValueChangeMulti, multiValues],

package/src/components/github-button.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import type { ComponentProps } from "react";
+
+import { cn } from "../lib/cn";
+import { Button } from "./button";
+
+const GITHUB_ICON_PATH =
+  "M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12";
+
+function GitHubIcon() {
+  return (
+    <svg fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+      <path d={GITHUB_ICON_PATH} />
+    </svg>
+  );
+}
+
+type GitHubButtonProps = Omit<ComponentProps<typeof Button>, "variant" | "icon">;
+
+function GitHubButton({ className, children, ...props }: GitHubButtonProps) {
+  return (
+    <Button
+      {...props}
+      icon={<GitHubIcon />}
+      className={cn("bg-foreground text-background [@media(hover:hover)]:hover:bg-foreground/90", className)}
+    >
+      {children}
+    </Button>
+  );
+}
+
+export type { GitHubButtonProps };
+export { GitHubButton };

package/src/components/sidebar.tsx

@@ -2,7 +2,6 @@
 
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
-import { PanelLeftClose, PanelLeftOpen } from "lucide-react";
 import * as React from "react";
 
 import { useIsMobile } from "../hooks/use-mobile";
@@ -20,6 +19,19 @@ const SIDEBAR_WIDTH_MOBILE = "16rem";
 const SIDEBAR_WIDTH_ICON = "3.5rem";
 const SIDEBAR_KEYBOARD_SHORTCUT = "b";
 
+const INTERACTIVE_SIDEBAR_ELEMENT_SELECTOR = [
+  "a",
+  "button",
+  "input",
+  "select",
+  "textarea",
+  "[role='button']",
+  "[role='link']",
+  "[role='menuitem']",
+  "[contenteditable='true']",
+  "[tabindex]:not([tabindex='-1'])",
+].join(", ");
+
 type SidebarContextProps = {
   state: "expanded" | "collapsed";
   open: boolean;
@@ -143,13 +155,31 @@ function Sidebar({
   variant?: "sidebar" | "floating" | "inset";
   collapsible?: "offcanvas" | "icon" | "none";
 }) {
-  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+  const { isMobile, state, openMobile, setOpenMobile, open, setOpen } = useSidebar();
+
+  function handleSurfaceClickCapture(event: React.MouseEvent<HTMLDivElement>) {
+    const clickedInteractiveElement =
+      event.target instanceof Element && event.target.closest(INTERACTIVE_SIDEBAR_ELEMENT_SELECTOR);
+
+    if (clickedInteractiveElement) {
+      return;
+    }
+
+    if (!open) {
+      event.preventDefault();
+      event.stopPropagation();
+      setOpen(true);
+      return;
+    }
+
+    setOpen(false);
+  }
 
   if (collapsible === "none") {
     return (
       <div
         data-slot="sidebar"
-        className={cn("bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col", className)}
+        className={cn("bg-sidebar-surface text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col", className)}
         {...props}
       >
         {children}
@@ -164,7 +194,7 @@ function Sidebar({
           data-sidebar="sidebar"
           data-slot="sidebar"
           data-mobile="true"
-          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+          className="bg-sidebar-surface text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
           style={
             {
               "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
@@ -213,7 +243,7 @@ function Sidebar({
           // Adjust the padding for floating and inset variants.
           variant === "floating" || variant === "inset"
             ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
-            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+            : "border-sidebar-border group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
           className,
         )}
         {...props}
@@ -221,7 +251,8 @@ function Sidebar({
         <div
           data-sidebar="sidebar"
           data-slot="sidebar-inner"
-          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+          className="bg-sidebar-surface group-data-[variant=floating]:border-sidebar-border flex h-full w-full cursor-pointer flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+          onClickCapture={handleSurfaceClickCapture}
         >
           {children}
         </div>
@@ -231,9 +262,7 @@ function Sidebar({
 }
 
 function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {
-  const { state, isMobile, openMobile, toggleSidebar } = useSidebar();
-
-  const isOpen = isMobile ? openMobile : state === "expanded";
+  const { toggleSidebar } = useSidebar();
 
   return (
     <Button
@@ -248,12 +277,21 @@ function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<t
       }}
       {...props}
     >
-      {isOpen ? <PanelLeftClose className="size-4.5" /> : <PanelLeftOpen className="size-4.5" />}
+      <SidebarToggleIcon className="size-4.5" />
       <span className="sr-only">Toggle Sidebar</span>
     </Button>
   );
 }
 
+function SidebarToggleIcon({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true" className={className} {...props}>
+      <rect x="2.75" y="2.75" width="14.5" height="14.5" rx="4" stroke="currentColor" strokeWidth="1.5" />
+      <path d="M10 4.75V15.25" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    </svg>
+  );
+}
+
 function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
   const { toggleSidebar } = useSidebar();
 
@@ -266,9 +304,7 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
       onClick={toggleSidebar}
       title="Toggle Sidebar"
       className={cn(
-        "[@media(hover:hover)]:hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
-        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
-        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
         "[@media(hover:hover)]:hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
         "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
         "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
@@ -316,21 +352,22 @@ function SidebarHeader({ className, icon, title, children, ...props }: SidebarHe
     <div
       data-slot="sidebar-header"
       data-sidebar="header"
-      className={cn("flex flex-col gap-2 p-2 group-data-[collapsible=icon]:items-center", className)}
+      className={cn("flex flex-col gap-2 py-2", className)}
       {...props}
     >
-      <div className="flex h-8 items-center gap-2 px-2 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:gap-0 group-data-[collapsible=icon]:px-0">
-        <div className="relative shrink-0">
-          <span className="transition-opacity group-data-[collapsible=icon]:group-hover:opacity-0">{icon}</span>
-          <div className="absolute inset-0 flex items-center justify-center opacity-0 transition-opacity group-data-[collapsible=icon]:group-hover:opacity-100">
-            <SidebarTrigger className="!size-4 !p-0" />
-          </div>
-        </div>
-        {title && (
-          <span className="text-foreground text-md min-w-0 truncate font-medium group-data-[collapsible=icon]:hidden">
-            {title}
+      <div className="flex h-8 items-center gap-2 px-3">
+        <span className="relative flex size-8 shrink-0 items-center justify-center">
+          <span className="transition-opacity duration-200 group-data-[collapsible=icon]:group-hover:opacity-0">
+            {icon}
           </span>
-        )}
+          <SidebarTrigger
+            tabIndex={-1}
+            className="absolute inset-0 opacity-0 transition-opacity duration-200 group-data-[collapsible=icon]:group-hover:opacity-100"
+          />
+        </span>
+        <span className="text-foreground text-md min-w-0 truncate font-medium group-data-[collapsible=icon]:hidden">
+          {title}
+        </span>
         <SidebarTrigger className="ml-auto shrink-0 group-data-[collapsible=icon]:hidden" />
       </div>
       {children}
@@ -376,7 +413,7 @@ function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="sidebar-group"
       data-sidebar="group"
-      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      className={cn("relative flex w-full min-w-0 flex-col", className)}
       {...props}
     />
   );
@@ -453,7 +490,7 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
     <li
       data-slot="sidebar-menu-item"
       data-sidebar="menu-item"
-      className={cn("group/menu-item relative", className)}
+      className={cn("group/menu-item relative px-3", className)}
       {...props}
     />
   );

package/src/components/typography.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+
+import { cn } from "../lib/cn";
+
+export function H1({ children, className }: { children: ReactNode; className?: string }) {
+  return <h1 className={cn("scroll-m-20 type-display-sm font-bold", className)}>{children}</h1>;
+}
+
+export function H2({ children, className }: { children: ReactNode; className?: string }) {
+  return <h2 className={cn("scroll-m-20 type-display-xs font-semibold", className)}>{children}</h2>;
+}
+
+export function H3({ children, className }: { children: ReactNode; className?: string }) {
+  return <h3 className={cn("scroll-m-20 type-text-lg font-semibold", className)}>{children}</h3>;
+}
+
+export function H4({ children, className }: { children: ReactNode; className?: string }) {
+  return <h4 className={cn("scroll-m-20 type-text-md font-semibold", className)}>{children}</h4>;
+}

package/src/hooks/use-copy-to-clipboard.ts

@@ -8,7 +8,9 @@ export function useCopyToClipboard({ resetDelay = 2000 }: { resetDelay?: number
 
   useEffect(() => {
     return () => {
-      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
     };
   }, []);
 
@@ -16,7 +18,9 @@ export function useCopyToClipboard({ resetDelay = 2000 }: { resetDelay?: number
     (text: string) => {
       navigator.clipboard.writeText(text).then(() => {
         setIsCopied(true);
-        if (timeoutRef.current) clearTimeout(timeoutRef.current);
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
         timeoutRef.current = setTimeout(() => setIsCopied(false), resetDelay);
       });
     },

package/src/stories/button.stories.tsx

@@ -1,4 +1,4 @@
-import { Plus } from "lucide-react";
+import { ArrowRight, Plus, Sparkles } from "lucide-react";
 
 import { Button } from "../components/button";
 
@@ -323,6 +323,28 @@ export const AllVariants = () => {
         </Button>
       </div>
 
+      {/* ── CTA (animated gradient ring) ────────────────────────────────── */}
+      <span className={SECTION_HEADER}>CTA — animated</span>
+      <p className="type-text-xs text-muted-foreground -mt-2 max-w-md">
+        Hover to rotate the conic gradient around the border and ignite the soft halo.
+      </p>
+
+      <div className="flex items-center gap-6">
+        <Button variant="cta" iconTrailing={<ArrowRight />}>
+          Get started
+        </Button>
+        <Button variant="cta" icon={<Sparkles />} iconTrailing={<ArrowRight />}>
+          Launch server
+        </Button>
+        <Button variant="cta">Deploy now</Button>
+        <Button variant="cta" iconTrailing={<ArrowRight />} disabled>
+          Disabled
+        </Button>
+        <Button variant="cta" iconTrailing={<ArrowRight />} loading>
+          Deploying
+        </Button>
+      </div>
+
       {/* ── asChild ─────────────────────────────────────────────────────── */}
       <span className={SECTION_HEADER}>asChild</span>
 

package/src/stories/sidebar.stories.tsx

@@ -62,7 +62,7 @@ export const AllVariants: Story = () => (
         <Sidebar collapsible="icon">
           <TeamHeader />
           <SidebarContent>
-            <SidebarGroup className="px-3">
+            <SidebarGroup>
               <SidebarGroupContent>
                 <SidebarMenu>
                   <SidebarMenuItem>
@@ -107,7 +107,8 @@ export const AllVariants: Story = () => (
           <UserFooter />
         </Sidebar>
         <SidebarInset>
-          <div className="p-4">
+          <div className="flex items-center gap-2 p-4">
+            <SidebarTrigger />
             <span className="type-text-sm text-muted-foreground">Sub-menus expand inline under their parent</span>
           </div>
         </SidebarInset>
@@ -118,7 +119,7 @@ export const AllVariants: Story = () => (
         <Sidebar collapsible="icon">
           <TeamHeader />
           <SidebarContent>
-            <SidebarGroup className="px-3">
+            <SidebarGroup>
               <SidebarGroupLabel>Workspace</SidebarGroupLabel>
               <SidebarGroupContent>
                 <SidebarMenu>
@@ -146,7 +147,7 @@ export const AllVariants: Story = () => (
               </SidebarGroupContent>
             </SidebarGroup>
             <SidebarSeparator />
-            <SidebarGroup className="px-3">
+            <SidebarGroup>
               <SidebarGroupLabel>Account</SidebarGroupLabel>
               <SidebarGroupContent>
                 <SidebarMenu>
@@ -169,7 +170,8 @@ export const AllVariants: Story = () => (
           <UserFooter />
         </Sidebar>
         <SidebarInset>
-          <div className="p-4">
+          <div className="flex items-center gap-2 p-4">
+            <SidebarTrigger />
             <span className="type-text-sm text-muted-foreground">Groups with labels, badges, and separator</span>
           </div>
         </SidebarInset>
@@ -180,7 +182,7 @@ export const AllVariants: Story = () => (
         <Sidebar collapsible="icon">
           <TeamHeader />
           <SidebarContent>
-            <SidebarGroup className="px-3">
+            <SidebarGroup>
               <SidebarGroupContent>
                 <SidebarMenu>
                   {["skeleton-1", "skeleton-2", "skeleton-3", "skeleton-4", "skeleton-5"].map((key) => (
@@ -195,7 +197,8 @@ export const AllVariants: Story = () => (
           <UserFooter />
         </Sidebar>
         <SidebarInset>
-          <div className="p-4">
+          <div className="flex items-center gap-2 p-4">
+            <SidebarTrigger />
             <span className="type-text-sm text-muted-foreground">Loading state with skeleton placeholders</span>
           </div>
         </SidebarInset>
@@ -214,7 +217,7 @@ export const AllVariants: Story = () => (
             </div>
           </SidebarHeader>
           <SidebarContent>
-            <SidebarGroup className="px-3">
+            <SidebarGroup>
               <SidebarGroupContent>
                 <SidebarMenu>
                   <SidebarMenuItem>

package/src/styles/tokens.css

@@ -39,6 +39,9 @@
 
   --color-ring: #f22b79; /* Figma: focus-ring */
 
+  /* cta — decorative gradient accent, used with --color-primary in the CTA button ring */
+  --color-cta-accent: #6eece7; /* Figma: CTA border accent (cyan) */
+
   /* sidebar */
   --color-sidebar: #f8fafa; /* Figma: bg-secondary-subtle */
   --color-sidebar-foreground: #3a4848; /* Figma: fg-secondary */
@@ -106,6 +109,8 @@
   /* animations */
   --animate-accordion-down: accordion-down 200ms ease-out;
   --animate-accordion-up: accordion-up 200ms ease-out;
+  --animate-beacon-ring-core: beacon-ring-core 2.2s ease-in-out infinite;
+  --animate-beacon-ring-pulse: beacon-ring-pulse 2.2s ease-in-out infinite;
 }
 
 @keyframes accordion-down {
@@ -126,6 +131,186 @@
   }
 }
 
+@keyframes beacon-ring-core {
+  0%,
+  100% {
+    opacity: 0.55;
+    transform: scale(0.98);
+  }
+  50% {
+    opacity: 0.85;
+    transform: scale(1.02);
+  }
+}
+
+@keyframes beacon-ring-pulse {
+  0%,
+  100% {
+    opacity: 0.88;
+    transform: scale(1);
+    filter: drop-shadow(0 0 0 rgba(59, 130, 246, 0));
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.02);
+    filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.24));
+  }
+}
+
+/* ─── CTA button — animated conic gradient ring ───────────────────────────── */
+
+@property --cta-angle {
+  syntax: "<angle>";
+  inherits: false;
+  initial-value: 135deg;
+}
+
+@keyframes cta-rotate {
+  to {
+    --cta-angle: 495deg;
+  }
+}
+
+.button-cta {
+  position: relative;
+  isolation: isolate;
+  /* light mode: whisper-of-gradient surface tint + soft rose drop-shadow */
+  background-image: linear-gradient(
+    135deg,
+    color-mix(in oklab, var(--color-primary) 5%, transparent) 0%,
+    color-mix(in oklab, var(--color-cta-accent) 5%, transparent) 100%
+  );
+  box-shadow:
+    0 6px 24px -10px color-mix(in oklab, var(--color-primary) 38%, transparent),
+    0 2px 6px -4px color-mix(in oklab, var(--color-cta-accent) 30%, transparent);
+  transition:
+    box-shadow 400ms ease,
+    transform 300ms ease,
+    filter 300ms ease;
+}
+
+@media (hover: hover) {
+  .button-cta:hover {
+    box-shadow:
+      0 10px 30px -8px color-mix(in oklab, var(--color-primary) 52%, transparent),
+      0 3px 10px -3px color-mix(in oklab, var(--color-cta-accent) 40%, transparent);
+  }
+}
+
+/* dark mode: solid inverted surface, no tint or shadow — let the halo do the work */
+.dark .button-cta {
+  background-image: none;
+  box-shadow: none;
+}
+
+.button-cta::before,
+.button-cta::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  /* Always "running" in browser terms, but paused at rest — freezes at current
+     angle on unhover instead of snapping back. */
+  animation: cta-rotate 3.2s linear infinite;
+  animation-play-state: paused;
+}
+
+/* Gradient ring (masked so only the border shows) */
+.button-cta::before {
+  padding: 1.5px;
+  background: conic-gradient(
+    from var(--cta-angle),
+    var(--color-cta-accent) 0deg,
+    var(--color-primary) 150deg,
+    var(--color-cta-accent) 300deg,
+    var(--color-cta-accent) 360deg
+  );
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  transition: filter 400ms ease;
+}
+
+/* Blurred glow halo behind the button — subtle in light, bolder in dark */
+.button-cta::after {
+  z-index: -1;
+  background: conic-gradient(
+    from var(--cta-angle),
+    var(--color-cta-accent) 0deg,
+    var(--color-primary) 150deg,
+    var(--color-cta-accent) 300deg,
+    var(--color-cta-accent) 360deg
+  );
+  filter: blur(12px);
+  opacity: 0.05;
+  transition: opacity 400ms ease;
+}
+
+.dark .button-cta::after {
+  opacity: 0.14;
+}
+
+@media (hover: hover) {
+  .button-cta:hover::before,
+  .button-cta:hover::after {
+    animation-play-state: running;
+  }
+  .button-cta:hover::before {
+    filter: saturate(1.15) brightness(1.05);
+  }
+  .button-cta:hover::after {
+    opacity: 0.18;
+  }
+  .dark .button-cta:hover::after {
+    opacity: 0.32;
+  }
+}
+
+.button-cta:focus-visible::before,
+.button-cta:focus-visible::after {
+  animation-play-state: running;
+}
+
+.button-cta:disabled::before,
+.button-cta:disabled::after,
+[aria-busy="true"].button-cta::before,
+[aria-busy="true"].button-cta::after {
+  animation-play-state: paused;
+}
+.button-cta:disabled::after {
+  opacity: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .button-cta::before,
+  .button-cta::after {
+    animation: none;
+  }
+}
+
+/* Icon slide on hover (applied to [data-cta-icon-trailing]) */
+.button-cta [data-cta-icon-trailing] {
+  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+@media (hover: hover) {
+  .button-cta:hover [data-cta-icon-trailing] {
+    transform: translateX(2px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .button-cta [data-cta-icon-trailing] {
+    transition: none;
+  }
+  .button-cta:hover [data-cta-icon-trailing] {
+    transform: none;
+  }
+}
+
 /* ─── Dark mode ───────────────────────────────────────────────────────────── */
 
 .dark {
@@ -163,6 +348,9 @@
 
   --color-ring: #f22b79; /* Figma: focus-ring */
 
+  /* cta — decorative gradient accent, used with --color-primary in the CTA button ring */
+  --color-cta-accent: #6eece7; /* Figma: CTA border accent (cyan) */
+
   /* sidebar */
   --color-sidebar: #0c1c1c; /* Figma: bg-secondary */
   --color-sidebar-foreground: #90a4a4; /* Figma: fg-secondary */
@@ -221,6 +409,14 @@
 
 @custom-variant dark (&:where(.dark, .dark *));
 
+:root {
+  --gradient-sidebar: linear-gradient(0deg, #c9e2e280 0%, #ffffff 70%); /* Figma: bg-nav-gradiant-light */
+}
+
+.dark {
+  --gradient-sidebar: linear-gradient(0deg, #213535 0%, #121e1e 70%); /* Figma: bg-nav-gradiant-dark */
+}
+
 @layer base {
   * {
     @apply border-border shadow-shadow;
@@ -274,6 +470,11 @@
 
 /* ─── Type preset utilities ───────────────────────────────────────────────── */
 
+@utility bg-sidebar-surface {
+  background-color: var(--color-background);
+  background-image: var(--gradient-sidebar);
+}
+
 @utility type-display-2xl {
   font-family: var(--font-display);
   font-size: var(--font-size-display-2xl);