@alpic-ai/ui 0.0.0-dev.d4f6edf → 0.0.0-dev.d826cd8

package/dist/components/accordion-card.d.mts

@@ -1,6 +1,6 @@
-import * as React from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as React from "react";
 
 //#region src/components/accordion-card.d.ts
 declare function AccordionCard({

package/dist/components/accordion.d.mts

@@ -1,6 +1,6 @@
-import * as React from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as React from "react";
 
 //#region src/components/accordion.d.ts
 declare function Accordion({

package/dist/components/alert.d.mts

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

package/dist/components/attachment-tile.mjs

@@ -1,9 +1,9 @@
 "use client";
 import { cn } from "../lib/cn.mjs";
 import { TooltipIconButton } from "./tooltip-icon-button.mjs";
-import { useState } from "react";
 import { FileText, XIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 //#region src/components/attachment-tile.tsx
 function AttachmentTile({ src, isImage, label, onRemove, onClick, className }) {
 	const [hasError, setHasError] = useState(false);

package/dist/components/avatar.d.mts

@@ -1,12 +1,12 @@
-import * as React from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { VariantProps } from "class-variance-authority";
+import * as React from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import * as _$class_variance_authority_types0 from "class-variance-authority/types";
 
 //#region src/components/avatar.d.ts
 declare const avatarVariants: (props?: ({
-  size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+  size?: "sm" | "md" | "xs" | "lg" | "xl" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 type AvatarSize = NonNullable<VariantProps<typeof avatarVariants>["size"]>;
 type AvatarStatus = "online";

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?: "primary" | "secondary" | "success" | "warning" | "error" | null | undefined;
+  variant?: "warning" | "success" | "secondary" | "primary" | "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/breadcrumb.d.mts

@@ -1,5 +1,5 @@
-import * as React from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as React from "react";
 
 //#region src/components/breadcrumb.d.ts
 declare function Breadcrumb({

package/dist/components/button.d.mts

@@ -1,12 +1,12 @@
-import * as React from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { VariantProps } from "class-variance-authority";
+import * as React from "react";
 import * as _$class_variance_authority_types0 from "class-variance-authority/types";
 
 //#region src/components/button.d.ts
 declare const buttonVariants: (props?: ({
-  variant?: "link" | "primary" | "secondary" | "tertiary" | "link-muted" | "destructive" | null | undefined;
-  size?: "default" | "pill" | "icon" | "icon-rounded" | null | undefined;
+  variant?: "destructive" | "secondary" | "primary" | "tertiary" | "link" | "link-muted" | null | undefined;
+  size?: "default" | "icon" | "icon-rounded" | "pill" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 interface ButtonProps extends React.ComponentProps<"button">, VariantProps<typeof buttonVariants> {
   asChild?: boolean;

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",
@@ -50,7 +50,7 @@ const buttonVariants = cva([
 	}
 });
 function Button({ className, variant, size, type = "button", asChild = false, loading = false, icon, disabled, children, ...props }) {
-	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
+	return /* @__PURE__ */ jsxs(asChild ? Slot : "button", {
 		"data-slot": "button",
 		className: cn(buttonVariants({
 			variant,
@@ -60,7 +60,7 @@ 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]
 	});
 }
 //#endregion

package/dist/components/card.d.mts

@@ -1,5 +1,5 @@
-import * as React from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as React from "react";
 
 //#region src/components/card.d.ts
 declare function Card({

package/dist/components/checkbox.d.mts

@@ -1,5 +1,5 @@
-import * as React from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 
 //#region src/components/checkbox.d.ts

package/dist/components/collapsible.d.mts

@@ -1,5 +1,5 @@
-import * as React from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as React from "react";
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
 
 //#region src/components/collapsible.d.ts

package/dist/components/combobox.d.mts

@@ -1,8 +1,8 @@
 import { PopoverContent } from "./popover.mjs";
 import { selectTriggerVariants } from "./select-trigger-variants.mjs";
-import { ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { VariantProps } from "class-variance-authority";
+import { ReactNode } from "react";
 import { Command } from "cmdk";
 
 //#region src/components/combobox.d.ts

package/dist/components/combobox.mjs

@@ -3,9 +3,9 @@ import { cn } from "../lib/cn.mjs";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.mjs";
 import { selectTriggerVariants } from "./select-trigger-variants.mjs";
 import { TagDismissible } from "./tag.mjs";
-import { createContext, useCallback, useContext, useMemo, useState } from "react";
 import { CheckIcon, ChevronDownIcon, SearchIcon } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useMemo, useState } from "react";
 import { Command } from "cmdk";
 //#region src/components/combobox.tsx
 const ComboboxContext = createContext(null);

package/dist/components/command.d.mts

@@ -1,5 +1,5 @@
-import * as React from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as React from "react";
 import { Command as Command$1 } from "cmdk";
 
 //#region src/components/command.d.ts

package/dist/components/copyable.d.mts

@@ -1,5 +1,5 @@
-import { ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactNode } from "react";
 
 //#region src/components/copyable.d.ts
 interface CopyableProps {

package/dist/components/copyable.mjs

@@ -1,7 +1,7 @@
 "use client";
-import { useCopyToClipboard } from "../hooks/use-copy-to-clipboard.mjs";
 import { cn } from "../lib/cn.mjs";
 import { Button } from "./button.mjs";
+import { useCopyToClipboard } from "../hooks/use-copy-to-clipboard.mjs";
 import { Check, Copy } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/copyable.tsx

package/dist/components/description-list.d.mts

@@ -1,5 +1,5 @@
-import * as React from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as React from "react";
 
 //#region src/components/description-list.d.ts
 declare function DescriptionList({

package/dist/components/dialog.d.mts

@@ -1,7 +1,7 @@
 import { ButtonProps } from "./button.mjs";
-import * as React from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { VariantProps } from "class-variance-authority";
+import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import * as _$class_variance_authority_types0 from "class-variance-authority/types";
 

package/dist/components/dropdown-menu.d.mts

@@ -1,6 +1,6 @@
-import * as React from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { VariantProps } from "class-variance-authority";
+import * as React from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import * as _$class_variance_authority_types0 from "class-variance-authority/types";
 

package/dist/components/form.d.mts

@@ -1,8 +1,8 @@
 import { InputProps } from "./input.mjs";
 import { Label } from "./label.mjs";
 import { TextareaProps } from "./textarea.mjs";
-import * as React from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import * as _$react_hook_form0 from "react-hook-form";
 import { ControllerProps, FieldPath, FieldValues } from "react-hook-form";

package/dist/components/form.mjs

@@ -5,9 +5,9 @@ import { Label } from "./label.mjs";
 import { Input } from "./input.mjs";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.mjs";
 import { Textarea } from "./textarea.mjs";
-import * as React from "react";
 import { Info } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { Controller, FormProvider, useFormContext, useFormState } from "react-hook-form";
 //#region src/components/form.tsx

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/input-group.d.mts

@@ -1,6 +1,6 @@
-import * as React from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { VariantProps } from "class-variance-authority";
+import * as React from "react";
 import * as _$class_variance_authority_types0 from "class-variance-authority/types";
 
 //#region src/components/input-group.d.ts

package/dist/components/input.d.mts

@@ -1,5 +1,5 @@
-import * as React from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as React from "react";
 
 //#region src/components/input.d.ts
 interface InputProps extends Omit<React.ComponentProps<"input">, "size"> {

package/dist/components/input.mjs

@@ -2,9 +2,9 @@
 import { cn } from "../lib/cn.mjs";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.mjs";
 import { Label } from "./label.mjs";
-import * as React from "react";
 import { Info } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
 //#region src/components/input.tsx
 const inputSizeStyles = {
 	sm: {

package/dist/components/label.d.mts

@@ -1,5 +1,5 @@
-import * as React from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as React from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
 
 //#region src/components/label.d.ts

package/dist/components/pagination.d.mts

@@ -1,5 +1,5 @@
-import * as React from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as React from "react";
 
 //#region src/components/pagination.d.ts
 interface PaginationProps extends React.ComponentProps<"nav"> {

package/dist/components/popover.d.mts

@@ -1,5 +1,5 @@
-import * as React from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 
 //#region src/components/popover.d.ts

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

@@ -1,5 +1,5 @@
-import * as React from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as React from "react";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 
 //#region src/components/radio-group.d.ts

package/dist/components/scroll-area.d.mts

@@ -1,5 +1,5 @@
-import * as React from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as React from "react";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 
 //#region src/components/scroll-area.d.ts

package/dist/components/select.d.mts

@@ -1,7 +1,7 @@
 import { selectTriggerVariants } from "./select-trigger-variants.mjs";
-import * as React from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { VariantProps } from "class-variance-authority";
+import * as React from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 
 //#region src/components/select.d.ts

package/dist/components/separator.d.mts

@@ -1,5 +1,5 @@
-import * as React from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as React from "react";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
 
 //#region src/components/separator.d.ts

package/dist/components/sheet.d.mts

@@ -1,5 +1,5 @@
-import * as React from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as React from "react";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 
 //#region src/components/sheet.d.ts

package/dist/components/sidebar.d.mts

@@ -1,8 +1,8 @@
 import { Button } from "./button.mjs";
 import { TooltipContent } from "./tooltip.mjs";
-import * as React from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { VariantProps } from "class-variance-authority";
+import * as React from "react";
 import * as _$class_variance_authority_types0 from "class-variance-authority/types";
 
 //#region src/components/sidebar.d.ts

package/dist/components/sidebar.mjs

@@ -1,14 +1,14 @@
 "use client";
-import { useIsMobile } from "../hooks/use-mobile.mjs";
 import { cn } from "../lib/cn.mjs";
 import { Button } from "./button.mjs";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.mjs";
 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 * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
+import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 //#region src/components/sidebar.tsx
 const SIDEBAR_COOKIE_NAME = "sidebar_state";
@@ -17,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);
@@ -80,7 +92,17 @@ 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),
@@ -124,7 +146,8 @@ function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas"
 			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 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
 			})
 		})]
@@ -181,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
 	});
 }
@@ -203,14 +226,20 @@ 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", 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-3",
 			children: [
-				/* @__PURE__ */ jsx("div", {
-					className: "shrink-0",
-					children: icon
+				/* @__PURE__ */ jsxs("span", {
+					className: "relative flex size-8 shrink-0 items-center justify-center",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "transition-opacity duration-200 group-data-[collapsible=icon]:group-hover:opacity-0",
+						children: icon
+					}), /* @__PURE__ */ jsx(SidebarTrigger, {
+						tabIndex: -1,
+						className: "absolute inset-0 opacity-0 transition-opacity duration-200 group-data-[collapsible=icon]:group-hover:opacity-100"
+					})]
 				}),
 				/* @__PURE__ */ jsx("span", {
 					className: "text-foreground text-md min-w-0 truncate font-medium group-data-[collapsible=icon]:hidden",

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?: "circle" | "rectangle" | null | undefined;
+  shape?: "rectangle" | "circle" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 interface SkeletonProps extends React.ComponentProps<"div">, VariantProps<typeof skeletonVariants> {}
 declare function Skeleton({

package/dist/components/sonner.d.mts

@@ -1,5 +1,5 @@
-import * as React from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as React from "react";
 import { Toaster as Toaster$1, toast } from "sonner";
 
 //#region src/components/sonner.d.ts

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?: "primary" | "secondary" | null | undefined;
+  variant?: "secondary" | "primary" | 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" | "success" | "warning" | "muted" | null | undefined;
+  variant?: "destructive" | "warning" | "success" | "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/switch.d.mts

@@ -1,5 +1,5 @@
-import * as React from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as React from "react";
 import * as SwitchPrimitive from "@radix-ui/react-switch";
 
 //#region src/components/switch.d.ts

package/dist/components/table.d.mts

@@ -1,5 +1,5 @@
-import * as React from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as React from "react";
 
 //#region src/components/table.d.ts
 declare function Table({

package/dist/components/tabs.d.mts

@@ -1,12 +1,12 @@
-import * as React from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { VariantProps } from "class-variance-authority";
+import * as React from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import * as _$class_variance_authority_types0 from "class-variance-authority/types";
 
 //#region src/components/tabs.d.ts
 declare const tabsTriggerVariants: (props?: ({
-  variant?: "default" | "line" | "pill" | null | undefined;
+  variant?: "default" | "pill" | "line" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 declare function Tabs({
   className,

package/dist/components/tabs.mjs

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../lib/cn.mjs";
-import { createContext, use } from "react";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
+import { createContext, use } from "react";
 import { Slot } from "@radix-ui/react-slot";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 //#region src/components/tabs.tsx

package/dist/components/textarea.d.mts

@@ -1,5 +1,5 @@
-import * as React from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as React from "react";
 
 //#region src/components/textarea.d.ts
 interface TextareaProps extends React.ComponentProps<"textarea"> {

package/dist/components/textarea.mjs

@@ -2,9 +2,9 @@
 import { cn } from "../lib/cn.mjs";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.mjs";
 import { Label } from "./label.mjs";
-import * as React from "react";
 import { Info } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
 //#region src/components/textarea.tsx
 function Textarea({ className, id, label, required, hint, error, tooltip, ...props }) {
 	const generatedId = React.useId();

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

@@ -1,6 +1,6 @@
-import * as React from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { VariantProps } from "class-variance-authority";
+import * as React from "react";
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 import * as _$class_variance_authority_types0 from "class-variance-authority/types";
 

package/dist/components/toggle-group.mjs

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../lib/cn.mjs";
-import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
+import * as React from "react";
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 //#region src/components/toggle-group.tsx
 const toggleGroupItemVariants = cva([

package/dist/components/tooltip-icon-button.mjs

@@ -1,8 +1,8 @@
 "use client";
 import { Button } from "./button.mjs";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.mjs";
-import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { Slottable } from "@radix-ui/react-slot";
 //#region src/components/tooltip-icon-button.tsx
 const TooltipIconButton = forwardRef(({ children, tooltip, side = "bottom", ...rest }, ref) => {

package/dist/components/tooltip.d.mts

@@ -1,5 +1,5 @@
-import * as React from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
 //#region src/components/tooltip.d.ts

package/dist/components/typography.d.mts

@@ -1,5 +1,5 @@
-import { ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactNode } from "react";
 
 //#region src/components/typography.d.ts
 declare function H1({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alpic-ai/ui",
-  "version": "0.0.0-dev.d4f6edf",
+  "version": "0.0.0-dev.d826cd8",
   "description": "Alpic design system — shared UI components",
   "type": "module",
   "exports": {
@@ -26,9 +26,9 @@
     "lucide-react": "^1.8.0",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
-    "react-hook-form": "^7.72.1",
+    "react-hook-form": "^7.73.1",
     "sonner": "^2.0.7",
-    "tailwindcss": "^4.2.2",
+    "tailwindcss": "^4.2.3",
     "tw-animate-css": "^1.4.0"
   },
   "dependencies": {
@@ -56,14 +56,14 @@
   },
   "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.8.0",
-    "react-hook-form": "^7.72.1",
+    "react-hook-form": "^7.73.1",
     "shx": "^0.4.0",
     "sonner": "^2.0.7",
-    "tailwindcss": "^4.2.2",
+    "tailwindcss": "^4.2.3",
     "tsdown": "^0.21.9",
     "tw-animate-css": "^1.4.0",
     "typescript": "^6.0.3"

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";
@@ -90,14 +90,8 @@ 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}
     </Comp>
   );
 }

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

@@ -19,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;
@@ -142,7 +155,25 @@ 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 (
@@ -220,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 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>
@@ -272,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",
@@ -322,11 +352,19 @@ 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", className)}
+      className={cn("flex flex-col gap-2 py-2", className)}
       {...props}
     >
       <div className="flex h-8 items-center gap-2 px-3">
-        <div className="shrink-0">{icon}</div>
+        <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>

package/src/stories/sidebar.stories.tsx

@@ -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>
@@ -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>
@@ -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>