@alpic-ai/ui 0.0.0-dev.edeed3c → 0.0.0-dev.ee56854

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;
+  variant?: "destructive" | "secondary" | "primary" | "tertiary" | "link" | "link-muted" | "cta" | 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;
   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/form.d.mts

@@ -115,5 +115,40 @@ declare function SelectField<TFieldValues extends FieldValues, TName extends Fie
   options,
   placeholder
 }: SelectFieldProps<TFieldValues, TName>): _$react_jsx_runtime0.JSX.Element;
+interface RadioFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> extends FormFieldBaseProps<TFieldValues, TName> {
+  options: SelectFieldOption[];
+}
+declare function RadioField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({
+  control,
+  name,
+  rules,
+  required,
+  label,
+  description,
+  tooltip,
+  options
+}: RadioFieldProps<TFieldValues, TName>): _$react_jsx_runtime0.JSX.Element;
+interface ChecklistFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> extends FormFieldBaseProps<TFieldValues, TName> {
+  options: SelectFieldOption[];
+}
+declare function ChecklistField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({
+  control,
+  name,
+  rules,
+  required,
+  label,
+  description,
+  tooltip,
+  options
+}: ChecklistFieldProps<TFieldValues, TName>): _$react_jsx_runtime0.JSX.Element;
+interface CheckboxFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> extends Omit<FormFieldBaseProps<TFieldValues, TName>, "required"> {}
+declare function CheckboxField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({
+  control,
+  name,
+  rules,
+  label,
+  description,
+  tooltip
+}: CheckboxFieldProps<TFieldValues, TName>): _$react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Form, FormControl, FormDescription, FormField, FormFields, FormHeader, FormItem, FormLabel, FormMessage, InputField, SelectField, type SelectFieldOption, TextareaField, useFormField };
+export { CheckboxField, ChecklistField, Form, FormControl, FormDescription, FormField, FormFields, FormHeader, FormItem, FormLabel, FormMessage, InputField, RadioField, SelectField, type SelectFieldOption, TextareaField, useFormField };

package/dist/components/form.mjs

@@ -1,8 +1,10 @@
 "use client";
 import { cn } from "../lib/cn.mjs";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.mjs";
+import { Checkbox } from "./checkbox.mjs";
 import { Label } from "./label.mjs";
 import { Input } from "./input.mjs";
+import { RadioGroup, RadioGroupItem } from "./radio-group.mjs";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.mjs";
 import { Textarea } from "./textarea.mjs";
 import { Info } from "lucide-react";
@@ -88,7 +90,7 @@ function FormDescription({ className, ...props }) {
 	return /* @__PURE__ */ jsx("p", {
 		"data-slot": "form-description",
 		id: formDescriptionId,
-		className: cn("text-muted-foreground text-sm", className),
+		className: cn("text-muted-foreground type-text-sm whitespace-pre-line", className),
 		...props
 	});
 }
@@ -134,11 +136,11 @@ function InputField({ control, name, rules, required, label, description, toolti
 				tooltip,
 				children: label
 			}),
+			description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
 			/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Input, {
 				...inputProps,
 				...field
 			}) }),
-			description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
 			/* @__PURE__ */ jsx(FormMessage, {})
 		] })
 	});
@@ -154,11 +156,11 @@ function TextareaField({ control, name, rules, required, label, description, too
 				tooltip,
 				children: label
 			}),
+			description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
 			/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Textarea, {
 				...textareaProps,
 				...field
 			}) }),
-			description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
 			/* @__PURE__ */ jsx(FormMessage, {})
 		] })
 	});
@@ -174,6 +176,7 @@ function SelectField({ control, name, rules, required, label, description, toolt
 				tooltip,
 				children: label
 			}),
+			description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
 			/* @__PURE__ */ jsxs(Select, {
 				value: field.value,
 				onValueChange: field.onChange,
@@ -183,10 +186,117 @@ function SelectField({ control, name, rules, required, label, description, toolt
 					children: option.label
 				}, option.value)) })]
 			}),
+			/* @__PURE__ */ jsx(FormMessage, {})
+		] })
+	});
+}
+function RadioField({ control, name, rules, required, label, description, tooltip, options }) {
+	return /* @__PURE__ */ jsx(FormField, {
+		control,
+		name,
+		rules,
+		render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
+			label && /* @__PURE__ */ jsx(FormLabel, {
+				required,
+				tooltip,
+				children: label
+			}),
 			description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
+			/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(RadioGroup, {
+				value: field.value ?? "",
+				onValueChange: field.onChange,
+				onBlur: field.onBlur,
+				children: options.map((option) => {
+					const itemId = `${field.name}-${option.value}`;
+					return /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ jsx(RadioGroupItem, {
+							id: itemId,
+							value: option.value,
+							disabled: option.disabled
+						}), /* @__PURE__ */ jsx(Label, {
+							htmlFor: itemId,
+							className: "type-text-sm font-normal",
+							children: option.label
+						})]
+					}, option.value);
+				})
+			}) }),
 			/* @__PURE__ */ jsx(FormMessage, {})
 		] })
 	});
 }
+function ChecklistField({ control, name, rules, required, label, description, tooltip, options }) {
+	return /* @__PURE__ */ jsx(FormField, {
+		control,
+		name,
+		rules,
+		render: ({ field }) => {
+			const selected = Array.isArray(field.value) ? field.value : [];
+			const toggle = (value, checked) => {
+				if (checked) field.onChange([...selected, value]);
+				else field.onChange(selected.filter((existing) => existing !== value));
+			};
+			return /* @__PURE__ */ jsxs(FormItem, { children: [
+				label && /* @__PURE__ */ jsx(FormLabel, {
+					required,
+					tooltip,
+					children: label
+				}),
+				description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
+				/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx("fieldset", {
+					className: "m-0 flex flex-col gap-2 border-0 p-0",
+					onBlur: field.onBlur,
+					children: options.map((option) => {
+						const itemId = `${field.name}-${option.value}`;
+						return /* @__PURE__ */ jsxs("div", {
+							className: "flex items-start gap-2",
+							children: [/* @__PURE__ */ jsx(Checkbox, {
+								id: itemId,
+								checked: selected.includes(option.value),
+								onCheckedChange: (next) => toggle(option.value, Boolean(next)),
+								disabled: option.disabled
+							}), /* @__PURE__ */ jsx(Label, {
+								htmlFor: itemId,
+								className: "type-text-sm font-normal leading-tight",
+								children: option.label
+							})]
+						}, option.value);
+					})
+				}) }),
+				/* @__PURE__ */ jsx(FormMessage, {})
+			] });
+		}
+	});
+}
+function CheckboxField({ control, name, rules, label, description, tooltip }) {
+	return /* @__PURE__ */ jsx(FormField, {
+		control,
+		name,
+		rules,
+		render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, {
+			className: "gap-1.5",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-start gap-2",
+					children: [/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Checkbox, {
+						checked: field.value ?? false,
+						onCheckedChange: (next) => field.onChange(Boolean(next)),
+						onBlur: field.onBlur
+					}) }), label && /* @__PURE__ */ jsx(FormLabel, {
+						tooltip,
+						className: "font-normal",
+						children: label
+					})]
+				}),
+				description && /* @__PURE__ */ jsx(FormDescription, {
+					className: "ml-6",
+					children: description
+				}),
+				/* @__PURE__ */ jsx(FormMessage, { className: "ml-6" })
+			]
+		})
+	});
+}
 //#endregion
-export { Form, FormControl, FormDescription, FormField, FormFields, FormHeader, FormItem, FormLabel, FormMessage, InputField, SelectField, TextareaField, useFormField };
+export { CheckboxField, ChecklistField, Form, FormControl, FormDescription, FormField, FormFields, FormHeader, FormItem, FormLabel, FormMessage, InputField, RadioField, SelectField, TextareaField, useFormField };

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/page-loader.d.mts

@@ -0,0 +1,11 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/page-loader.d.ts
+interface PageLoaderProps {
+  className?: string;
+}
+declare function PageLoader({
+  className
+}: PageLoaderProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { PageLoader, type PageLoaderProps };

package/dist/components/page-loader.mjs

@@ -0,0 +1,122 @@
+"use client";
+import { cn } from "../lib/cn.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/page-loader.tsx
+const CABLE_CAR_SVG = /* @__PURE__ */ jsxs("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 120 130",
+	width: "240",
+	height: "260",
+	"aria-hidden": "true",
+	className: "block h-auto w-full",
+	children: [
+		/* @__PURE__ */ jsx("line", {
+			x1: "60",
+			y1: "3",
+			x2: "60",
+			y2: "58",
+			stroke: "#333",
+			strokeWidth: "4"
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: "60",
+			cy: "11",
+			r: "10",
+			fill: "#555"
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			x: "5",
+			y: "58",
+			width: "110",
+			height: "64",
+			rx: "4",
+			fill: "#e90060"
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			x: "5",
+			y: "58",
+			width: "110",
+			height: "20",
+			rx: "4",
+			fill: "#F5F0E8"
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			x: "5",
+			y: "68",
+			width: "110",
+			height: "10",
+			fill: "#F5F0E8"
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			x: "14",
+			y: "66",
+			width: "26",
+			height: "30",
+			rx: "2",
+			fill: "#5B8EC9",
+			stroke: "#C4B9A8",
+			strokeWidth: "1.5"
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			x: "47",
+			y: "66",
+			width: "26",
+			height: "30",
+			rx: "2",
+			fill: "#5B8EC9",
+			stroke: "#C4B9A8",
+			strokeWidth: "1.5"
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			x: "80",
+			y: "66",
+			width: "26",
+			height: "30",
+			rx: "2",
+			fill: "#5B8EC9",
+			stroke: "#C4B9A8",
+			strokeWidth: "1.5"
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			x: "5",
+			y: "115",
+			width: "110",
+			height: "7",
+			rx: "3",
+			fill: "#9f0042"
+		})
+	]
+});
+function PageLoader({ className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex min-h-screen items-center justify-center bg-background", className),
+		role: "status",
+		"aria-label": "Loading Alpic…",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "relative h-[120px] w-[200px]",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "absolute top-[30px] left-0 h-[3px] w-full rounded-sm bg-[#6c6c77]",
+					style: {
+						transform: "rotate(-15deg)",
+						transformOrigin: "left center"
+					}
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "absolute top-[33px] -left-[45px] w-[45px] motion-safe:animate-[alpic-ride_4s_linear_infinite]",
+					children: CABLE_CAR_SVG
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "pointer-events-none absolute -top-[40px] -left-[45px] z-10 h-[200px] w-[95px]",
+					style: { background: "linear-gradient(to right, var(--color-background) 47%, transparent)" }
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "pointer-events-none absolute -top-[40px] left-[142px] z-10 h-[200px] w-[95px]",
+					style: { background: "linear-gradient(to right, transparent, var(--color-background) 53%)" }
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { PageLoader };

package/dist/components/shimmer-text.d.mts

@@ -0,0 +1,12 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/shimmer-text.d.ts
+declare function ShimmerText({
+  children,
+  className
+}: {
+  children: string | number;
+  className?: string;
+}): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ShimmerText };

package/dist/components/shimmer-text.mjs

@@ -0,0 +1,22 @@
+"use client";
+import { cn } from "../lib/cn.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/shimmer-text.tsx
+const shimmerStyle = {
+	background: `linear-gradient(90deg, #0000 calc(50% - 60px), var(--color-foreground), #0000 calc(50% + 60px)), linear-gradient(color-mix(in oklab, var(--color-muted-foreground) 70%, transparent), color-mix(in oklab, var(--color-muted-foreground) 70%, transparent))`,
+	backgroundSize: "250% 100%, auto",
+	backgroundRepeat: "no-repeat, padding-box",
+	WebkitBackgroundClip: "text",
+	WebkitTextFillColor: "transparent",
+	backgroundClip: "text",
+	animation: "shimmer-text 2.5s linear infinite"
+};
+function ShimmerText({ children, className }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn(className),
+		style: shimmerStyle,
+		children
+	});
+}
+//#endregion
+export { ShimmerText };

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,19 +226,19 @@ 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__ */ 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, {})
+					}), /* @__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", {