@alpic-ai/ui 0.0.0-dev.85c8341 → 0.0.0-dev.862c47d

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-dev.85c8341",
+  "version": "0.0.0-dev.862c47d",
   "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.14.0",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "react-hook-form": "^7.75.0",
+    "sonner": "^2.0.7",
+    "tailwindcss": "^4.3.0",
+    "tw-animate-css": "^1.4.0"
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.12",
@@ -52,21 +52,21 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
-    "tailwind-merge": "^3.5.0"
+    "tailwind-merge": "^3.6.0"
   },
   "devDependencies": {
     "@ladle/react": "^5.1.1",
-    "@tailwindcss/postcss": "^4.2.2",
+    "@tailwindcss/postcss": "^4.3.0",
     "@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.14.0",
+    "react-hook-form": "^7.75.0",
     "shx": "^0.4.0",
     "sonner": "^2.0.7",
-    "tailwindcss": "^4.2.2",
-    "tsdown": "^0.21.7",
+    "tailwindcss": "^4.3.0",
+    "tsdown": "^0.22.0",
     "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],
@@ -349,7 +361,7 @@ function ComboboxItem({ className, children, itemValue, ...props }: ComboboxItem
       data-selected-item={selected || undefined}
       onSelect={() => onSelect(itemValue)}
       className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-2.5 outline-hidden select-none",
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 outline-hidden select-none",
         "type-text-md font-medium text-foreground mx-1.5 my-px",
         "data-[selected=true]:bg-background-hover",
         "data-[selected-item]:bg-accent",

package/src/components/dialog.tsx

@@ -37,7 +37,7 @@ function DialogOverlay({ className, ...props }: React.ComponentProps<typeof Dial
 const dialogContentVariants = cva(
   [
     "bg-background fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2",
-    "overflow-y-auto rounded-2xl px-6 shadow-lg outline-none",
+    "max-h-[calc(100vh-4rem)] overflow-hidden rounded-2xl px-6 shadow-lg outline-none",
     "data-[state=open]:animate-in data-[state=closed]:animate-out",
     "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
     "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -93,7 +93,7 @@ function DialogContent({ className, children, size, showCloseButton = true, ...p
 }
 
 function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return <div data-slot="dialog-header" className={cn("flex flex-col gap-0.5 pt-6 pr-10", className)} {...props} />;
+  return <div data-slot="dialog-header" className={cn("flex flex-col gap-0.5 py-6 pr-10", className)} {...props} />;
 }
 
 const dialogFooterVariants = cva("pb-6 pt-6", {

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

@@ -0,0 +1,59 @@
+"use client";
+
+import { cn } from "../lib/cn";
+
+const CABLE_CAR_SVG = (
+  <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"
+  >
+    <line x1="60" y1="3" x2="60" y2="58" stroke="#333" strokeWidth="4" />
+    <circle cx="60" cy="11" r="10" fill="#555" />
+    <rect x="5" y="58" width="110" height="64" rx="4" fill="#e90060" />
+    <rect x="5" y="58" width="110" height="20" rx="4" fill="#F5F0E8" />
+    <rect x="5" y="68" width="110" height="10" fill="#F5F0E8" />
+    <rect x="14" y="66" width="26" height="30" rx="2" fill="#5B8EC9" stroke="#C4B9A8" strokeWidth="1.5" />
+    <rect x="47" y="66" width="26" height="30" rx="2" fill="#5B8EC9" stroke="#C4B9A8" strokeWidth="1.5" />
+    <rect x="80" y="66" width="26" height="30" rx="2" fill="#5B8EC9" stroke="#C4B9A8" strokeWidth="1.5" />
+    <rect x="5" y="115" width="110" height="7" rx="3" fill="#9f0042" />
+  </svg>
+);
+
+interface PageLoaderProps {
+  className?: string;
+}
+
+function PageLoader({ className }: PageLoaderProps) {
+  return (
+    <div
+      className={cn("flex min-h-screen items-center justify-center bg-background", className)}
+      role="status"
+      aria-label="Loading Alpic…"
+    >
+      <div className="relative h-[120px] w-[200px]">
+        <div
+          className="absolute top-[30px] left-0 h-[3px] w-full rounded-sm bg-[#6c6c77]"
+          style={{ transform: "rotate(-15deg)", transformOrigin: "left center" }}
+        />
+        <div className="absolute top-[33px] -left-[45px] w-[45px] motion-safe:animate-[alpic-ride_4s_linear_infinite]">
+          {CABLE_CAR_SVG}
+        </div>
+        <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)" }}
+        />
+        <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%)" }}
+        />
+      </div>
+    </div>
+  );
+}
+
+export type { PageLoaderProps };
+export { PageLoader };

package/src/components/select.tsx

@@ -2,7 +2,7 @@
 
 import * as SelectPrimitive from "@radix-ui/react-select";
 import type { VariantProps } from "class-variance-authority";
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { CheckIcon, ChevronDownIcon } from "lucide-react";
 import type * as React from "react";
 
 import { cn } from "../lib/cn";
@@ -75,7 +75,6 @@ function SelectContent({
         position={position}
         {...props}
       >
-        <SelectScrollUpButton />
         <SelectPrimitive.Viewport
           className={cn(
             "p-1",
@@ -85,7 +84,6 @@ function SelectContent({
         >
           {children}
         </SelectPrimitive.Viewport>
-        <SelectScrollDownButton />
       </SelectPrimitive.Content>
     </SelectPrimitive.Portal>
   );
@@ -110,7 +108,7 @@ function SelectItem({ className, children, ...props }: React.ComponentProps<type
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "relative flex w-full cursor-default items-center gap-2 rounded-sm py-2 pr-8 pl-2.5 outline-hidden select-none",
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pl-2 outline-hidden select-none",
         "type-text-md font-medium text-foreground mx-1 my-px",
         "[@media(hover:hover)]:hover:bg-background-hover",
         "focus:bg-background-hover",
@@ -142,43 +140,12 @@ function SelectSeparator({ className, ...props }: React.ComponentProps<typeof Se
   );
 }
 
-/* ── Scroll buttons ──────────────────────────────────────────────────────── */
-
-function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
-  return (
-    <SelectPrimitive.ScrollUpButton
-      data-slot="select-scroll-up-button"
-      className={cn("flex cursor-default items-center justify-center py-1", className)}
-      {...props}
-    >
-      <ChevronUpIcon className="size-4" />
-    </SelectPrimitive.ScrollUpButton>
-  );
-}
-
-function SelectScrollDownButton({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
-  return (
-    <SelectPrimitive.ScrollDownButton
-      data-slot="select-scroll-down-button"
-      className={cn("flex cursor-default items-center justify-center py-1", className)}
-      {...props}
-    >
-      <ChevronDownIcon className="size-4" />
-    </SelectPrimitive.ScrollDownButton>
-  );
-}
-
 export {
   Select,
   SelectContent,
   SelectGroup,
   SelectItem,
   SelectLabel,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
   SelectSeparator,
   SelectTrigger,
   SelectValue,

package/src/components/shimmer-text.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import type React from "react";
+
+import { cn } from "../lib/cn";
+
+const shimmerStyle: React.CSSProperties = {
+  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",
+};
+
+export function ShimmerText({ children, className }: { children: string | number; className?: string }) {
+  return (
+    <span className={cn(className)} style={shimmerStyle}>
+      {children}
+    </span>
+  );
+}

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}
     />
   );