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

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?: "destructive" | "default" | "success" | "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/avatar.d.mts

@@ -6,7 +6,7 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 
 //#region src/components/avatar.d.ts
 declare const avatarVariants: (props?: ({
-  size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+  size?: "sm" | "lg" | "xs" | "md" | "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?: "warning" | "success" | "secondary" | "primary" | "error" | null | undefined;
+  variant?: "primary" | "secondary" | "success" | "warning" | "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,7 +5,7 @@ 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?: "link" | "primary" | "secondary" | "tertiary" | "link-muted" | "destructive" | 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> {

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

@@ -23,7 +23,7 @@ declare function DropdownMenuGroup({
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>): _$react_jsx_runtime0.JSX.Element;
 declare const dropdownMenuItemVariants: (props?: ({
-  variant?: "default" | "destructive" | null | undefined;
+  variant?: "destructive" | "default" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 declare function DropdownMenuItem({
   className,

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";
@@ -132,8 +131,7 @@ function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas"
 	});
 }
 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 +143,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", {
@@ -182,22 +203,16 @@ 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 p-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",
-					children: [/* @__PURE__ */ jsx("span", {
-						className: "transition-opacity 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("div", {
+					className: "shrink-0",
+					children: icon
 				}),
-				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 +247,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 +287,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,8 +4,8 @@ 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;
-  size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+  variant?: "primary" | "secondary" | null | undefined;
+  size?: "sm" | "lg" | "md" | "xl" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 interface SpinnerProps extends Omit<React.ComponentProps<"svg">, "children">, VariantProps<typeof spinnerVariants> {}
 declare function Spinner({

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?: "destructive" | "success" | "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?: "line" | "default" | "pill" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 declare function Tabs({
   className,
@@ -14,7 +14,7 @@ declare function Tabs({
   ...props
 }: React.ComponentProps<typeof TabsPrimitive.Root>): _$react_jsx_runtime0.JSX.Element;
 declare const tabsListVariants: (props?: ({
-  variant?: "default" | "line" | null | undefined;
+  variant?: "line" | "default" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 declare function TabsList({
   className,

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.e051bb2",
   "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",
+    "lucide-react": "^1.8.0",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
     "react-hook-form": "^7.72.1",
-    "sonner": "^2.0.0",
-    "tailwindcss": "^4.0.0",
-    "tw-animate-css": "^1.0.0"
+    "sonner": "^2.0.7",
+    "tailwindcss": "^4.2.2",
+    "tw-animate-css": "^1.4.0"
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.12",
@@ -59,14 +59,14 @@
     "@tailwindcss/postcss": "^4.2.2",
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
-    "lucide-react": "^1.7.0",
+    "lucide-react": "^1.8.0",
     "react-hook-form": "^7.72.1",
     "shx": "^0.4.0",
     "sonner": "^2.0.7",
     "tailwindcss": "^4.2.2",
-    "tsdown": "^0.21.7",
+    "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/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";
@@ -231,9 +230,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 +245,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();
 
@@ -316,21 +322,14 @@ 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 p-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}
-          </span>
-        )}
+      <div className="flex h-8 items-center gap-2 px-3">
+        <div className="shrink-0">{icon}</div>
+        <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 +375,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 +452,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/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>
@@ -118,7 +118,7 @@ export const AllVariants: Story = () => (
         <Sidebar collapsible="icon">
           <TeamHeader />
           <SidebarContent>
-            <SidebarGroup className="px-3">
+            <SidebarGroup>
               <SidebarGroupLabel>Workspace</SidebarGroupLabel>
               <SidebarGroupContent>
                 <SidebarMenu>
@@ -146,7 +146,7 @@ export const AllVariants: Story = () => (
               </SidebarGroupContent>
             </SidebarGroup>
             <SidebarSeparator />
-            <SidebarGroup className="px-3">
+            <SidebarGroup>
               <SidebarGroupLabel>Account</SidebarGroupLabel>
               <SidebarGroupContent>
                 <SidebarMenu>
@@ -180,7 +180,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) => (
@@ -214,7 +214,7 @@ export const AllVariants: Story = () => (
             </div>
           </SidebarHeader>
           <SidebarContent>
-            <SidebarGroup className="px-3">
+            <SidebarGroup>
               <SidebarGroupContent>
                 <SidebarMenu>
                   <SidebarMenuItem>

package/src/styles/tokens.css

@@ -106,6 +106,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 +128,32 @@
   }
 }
 
+@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));
+  }
+}
+
 /* ─── Dark mode ───────────────────────────────────────────────────────────── */
 
 .dark {