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

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,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 AvatarPrimitive from "@radix-ui/react-avatar";
 import * as _$class_variance_authority_types0 from "class-variance-authority/types";
 

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/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/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,15 @@
 "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 { PanelLeftClose, PanelLeftOpen } from "lucide-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";
@@ -131,7 +132,8 @@ function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas"
 	});
 }
 function SidebarTrigger({ className, onClick, ...props }) {
-	const { toggleSidebar } = useSidebar();
+	const { state, isMobile, openMobile, toggleSidebar } = useSidebar();
+	const isOpen = isMobile ? openMobile : state === "expanded";
 	return /* @__PURE__ */ jsxs(Button, {
 		"data-sidebar": "trigger",
 		"data-slot": "sidebar-trigger",
@@ -143,35 +145,12 @@ function SidebarTrigger({ className, onClick, ...props }) {
 			toggleSidebar();
 		},
 		...props,
-		children: [/* @__PURE__ */ jsx(SidebarToggleIcon, { className: "size-4.5" }), /* @__PURE__ */ jsx("span", {
+		children: [isOpen ? /* @__PURE__ */ jsx(PanelLeftClose, { className: "size-4.5" }) : /* @__PURE__ */ jsx(PanelLeftOpen, { 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", {
@@ -208,9 +187,15 @@ function SidebarHeader({ className, icon, title, children, ...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("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, {})
+					})]
 				}),
 				/* @__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.d8b931a",
   "description": "Alpic design system — shared UI components",
   "type": "module",
   "exports": {
@@ -64,9 +64,9 @@
     "shx": "^0.4.0",
     "sonner": "^2.0.7",
     "tailwindcss": "^4.2.2",
-    "tsdown": "^0.21.9",
+    "tsdown": "^0.21.7",
     "tw-animate-css": "^1.4.0",
-    "typescript": "^6.0.3"
+    "typescript": "^6.0.2"
   },
   "scripts": {
     "build": "shx rm -rf dist && tsdown",

package/src/components/sidebar.tsx

@@ -2,6 +2,7 @@
 
 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";
@@ -230,7 +231,9 @@ function Sidebar({
 }
 
 function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {
-  const { toggleSidebar } = useSidebar();
+  const { state, isMobile, openMobile, toggleSidebar } = useSidebar();
+
+  const isOpen = isMobile ? openMobile : state === "expanded";
 
   return (
     <Button
@@ -245,21 +248,12 @@ function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<t
       }}
       {...props}
     >
-      <SidebarToggleIcon className="size-4.5" />
+      {isOpen ? <PanelLeftClose className="size-4.5" /> : <PanelLeftOpen 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();
 
@@ -326,7 +320,12 @@ function SidebarHeader({ className, icon, title, children, ...props }: SidebarHe
       {...props}
     >
       <div className="flex h-8 items-center gap-2 px-3">
-        <div className="shrink-0">{icon}</div>
+        <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 />
+          </div>
+        </div>
         <span className="text-foreground text-md min-w-0 truncate font-medium group-data-[collapsible=icon]:hidden">
           {title}
         </span>

package/src/styles/tokens.css

@@ -106,8 +106,6 @@
   /* 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 {
@@ -128,32 +126,6 @@
   }
 }
 
-@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 {