@motiadev/workbench 0.0.29 → 0.0.31

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Motia
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE. 

package/dist/index.html

@@ -5,7 +5,7 @@
 
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=PT+Sans:wght@0,200..1000;1,200..1000&display=swap&family=PT+Mono:wght@0,200..1000;1,200..1000&display=swap"
+      href="https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap"
       rel="stylesheet"
     />
 

package/dist/src/components/app-sidebar.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useListFlows } from '@/hooks/use-list-flows';
 import { File, Logs, Workflow } from 'lucide-react';
 import { Link, useLocation } from 'react-router';
-import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, } from './ui/sidebar';
+import { Sidebar, SidebarButton, SidebarGroup } from './ui/sidebar';
 import { Badge } from './ui/badge';
 import { useLogs } from '../stores/use-logs';
 export const AppSidebar = () => {
@@ -10,5 +10,5 @@ export const AppSidebar = () => {
     const { pathname } = useLocation();
     const isActive = (flowId) => pathname.includes(`/flow/${flowId}`);
     const unreadLogsCount = useLogs((state) => state.unreadLogsCount);
-    return (_jsxs(Sidebar, { children: [_jsx(SidebarHeader, {}), _jsx(SidebarContent, { children: _jsxs(SidebarGroup, { children: [_jsx(SidebarGroupLabel, { children: "Motia" }), _jsx(SidebarGroupContent, { children: _jsxs(SidebarMenu, { children: [_jsx(SidebarMenuItem, { children: _jsx(SidebarMenuButton, { asChild: true, className: "cursor-pointer", isActive: pathname === '/logs', children: _jsxs(Link, { to: "/logs", children: [_jsx(Logs, {}), "Logs", pathname !== '/logs' && unreadLogsCount > 0 && (_jsx(Badge, { variant: "red-rounded", children: unreadLogsCount }))] }) }) }), _jsx(SidebarMenuItem, { children: _jsx(SidebarMenuButton, { asChild: true, className: "cursor-pointer", isActive: pathname === '/states', children: _jsxs(Link, { to: "/states", children: [_jsx(File, {}), "States"] }) }) })] }) }), _jsx(SidebarGroupLabel, { children: "Flows" }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: flows.map((flow) => (_jsx(SidebarMenuItem, { children: _jsx(SidebarMenuButton, { asChild: true, className: "cursor-pointer", isActive: isActive(flow.id), children: _jsxs(Link, { to: `/flow/${flow.id}`, className: "flex items-center gap-2", "data-testid": `flow-link-${flow.id}`, children: [_jsx(Workflow, {}), _jsx("span", { children: flow.name })] }) }) }, flow.id))) }) })] }) }), _jsx(SidebarFooter, {})] }));
+    return (_jsxs(Sidebar, { children: [_jsxs(SidebarGroup, { title: "Motia", children: [_jsx(Link, { to: "/logs", children: _jsxs(SidebarButton, { isActive: pathname === '/logs', icon: _jsx(Logs, { className: "w-4 h-4" }), children: ["Logs", pathname !== '/logs' && unreadLogsCount > 0 && _jsx(Badge, { variant: "red-rounded", children: unreadLogsCount })] }) }), _jsx(Link, { to: "/states", children: _jsx(SidebarButton, { isActive: pathname === '/states', icon: _jsx(File, { className: "w-4 h-4" }), children: "States" }) })] }), _jsx(SidebarGroup, { title: "Flows", children: flows.map((flow) => (_jsx(Link, { to: `/flow/${flow.id}`, children: _jsx(SidebarButton, { isActive: isActive(flow.id), icon: _jsx(Workflow, { className: "w-4 h-4" }), children: flow.name }) }, flow.id))) })] }));
 };

package/dist/src/components/logs/log-console.js

@@ -41,5 +41,5 @@ export const LogConsole = () => {
             document.removeEventListener('mouseup', handleMouseUp);
         };
     }, [isDragging]);
-    return (_jsxs("div", { className: "absolute bottom-0 left-0 right-0 w-full bg-zinc-900/90 border-t border-zinc-700", children: [_jsx("div", { ref: dragRef, onMouseDown: handleMouseDown, className: cn('absolute -top-1 left-0 right-0 h-1 cursor-ns-resize hover:bg-green-500/20', isDragging && 'bg-green-500/40') }), _jsxs("div", { className: "flex justify-between w-full items-center p-2", children: [_jsx("label", { className: "text-green-500 w-full text-left justify-start h-full text-lg font-bold", children: "Logs" }), logs.length > 0 && (_jsxs(Button, { variant: "link", onClick: resetLogs, className: "text-green-500", children: [_jsx(Trash2, { className: "w-4 h-4 text-green-500" }), "Clear logs"] })), _jsx(Button, { variant: "link", onClick: toggleExpand, className: "text-green-500", children: isExpanded ? _jsx(ChevronDown, { className: "w-4 h-4" }) : _jsx(ChevronUp, { className: "w-4 h-4" }) })] }), _jsx(AnimatePresence, { children: isExpanded && (_jsx(motion.div, { initial: { height: 0 }, animate: { height }, exit: { height: 0 }, transition: { duration: 0.2 }, className: "overflow-hidden", children: _jsx(Logs, {}) }, "log-content")) })] }));
+    return (_jsxs("div", { className: "absolute bottom-0 left-0 right-0 bg-background/80 border border-solid border-border m-4 rounded-lg", children: [_jsx("div", { ref: dragRef, onMouseDown: handleMouseDown, className: cn('absolute -top-1 left-0 right-0 h-1 cursor-ns-resize hover:bg-background/40', isDragging && 'bg-background/40') }), _jsxs("div", { className: "text-white/50 flex justify-between w-full items-center p-4 gap-2", children: [_jsx("label", { className: "w-full text-left justify-start h-full text-md uppercase", children: "Logs" }), logs.length > 0 && (_jsxs(Button, { variant: "outline", onClick: resetLogs, children: [_jsx(Trash2, { className: "w-4 h-4" }), "Clear logs"] })), _jsx(Button, { variant: "outline", onClick: toggleExpand, children: isExpanded ? _jsx(ChevronDown, { className: "w-4 h-4" }) : _jsx(ChevronUp, { className: "w-4 h-4" }) })] }), _jsx(AnimatePresence, { children: isExpanded && (_jsx(motion.div, { initial: { height: 0 }, animate: { height }, exit: { height: 0 }, transition: { duration: 0.2 }, className: "overflow-hidden", children: _jsx(Logs, {}) }, "log-content")) })] }));
 };

package/dist/src/components/logs/log-detail.js

@@ -11,5 +11,5 @@ export const LogDetail = ({ log, onClose }) => {
         }
     };
     const otherProps = Object.keys(log ?? {}).filter((key) => !defaultProps.includes(key));
-    return (_jsx(Sheet, { open: isOpen, onOpenChange: onOpenChange, children: _jsxs(SheetContent, { className: "flex flex-col h-full", children: [_jsxs(SheetHeader, { children: [_jsx(SheetTitle, { children: "Logs details" }), _jsx(SheetDescription, { children: "Log details and application." })] }), _jsx("div", { className: "font-mono overflow-y-auto", children: log && (_jsxs("div", { className: "flex flex-col gap-6 ", children: [_jsxs("div", { className: "flex flex-row gap-4", children: [_jsx("span", { className: "bg-gray-900 text-white p-4 rounded-lg flex items-center justify-center", children: _jsx(LogLevelBadge, { level: log.level, className: "text-xl" }) }), _jsx(LogField, { label: "Time", value: new Date(log.time).toLocaleTimeString(), className: "flex-1" })] }), _jsxs("div", { className: "flex flex-row gap-4", children: [_jsx(LogField, { label: "Step", value: log.step, className: "flex-1" }), _jsx(LogField, { label: "Flows", value: log.flows.join(', '), className: "flex-1" })] }), _jsx(LogField, { label: "Trace ID", value: log.traceId }), _jsx(LogField, { label: "Message", value: log.msg }), otherProps.map((key) => (_jsx(LogField, { label: key, value: log[key] }, key)))] })) })] }) }));
+    return (_jsx(Sheet, { open: isOpen, onOpenChange: onOpenChange, children: _jsxs(SheetContent, { className: "flex flex-col h-full", children: [_jsxs(SheetHeader, { children: [_jsx(SheetTitle, { children: "Logs details" }), _jsx(SheetDescription, { children: "Log details and application." })] }), _jsx("div", { className: "font-mono overflow-y-auto", children: log && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex flex-row gap-2", children: [_jsx(LogField, { label: "Level", value: _jsx(LogLevelBadge, { level: log.level }), className: "flex-1" }), _jsx(LogField, { label: "Time", value: new Date(log.time).toLocaleString(), className: "flex-1" })] }), _jsxs("div", { className: "flex flex-row gap-2", children: [_jsx(LogField, { label: "Step", value: log.step, className: "flex-1" }), _jsx(LogField, { label: "Flows", value: log.flows.join(', '), className: "flex-1" })] }), _jsx(LogField, { label: "Trace ID", value: log.traceId }), _jsx(LogField, { label: "Message", value: log.msg }), otherProps.map((key) => (_jsx(LogField, { label: key, value: log[key] }, key)))] })) })] }) }));
 };

package/dist/src/components/logs/log-field.js

@@ -1,16 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { cn } from '../../lib/utils';
+const Value = ({ value }) => {
+    const displayValue = typeof value === 'string' ? value : JSON.stringify(value);
+    return _jsx("div", { className: "text-gray-400 text-md", children: displayValue });
+};
 const LogValue = ({ value }) => {
     if (React.isValidElement(value)) {
         return value;
     }
     if (typeof value === 'object') {
         const valueObject = value;
-        return (_jsx("div", { className: "flex flex-col gap-2", children: Object.keys(valueObject).map((key) => (_jsxs("div", { className: "ml-8 flex flex-col", children: [_jsx("span", { className: "text-gray-400 text-xs font-bold", children: key }), _jsx("span", { className: "text-large font-bold", children: value ? (_jsx(LogValue, { value: valueObject[key] })) : (JSON.stringify(valueObject[key])) })] }, key))) }));
+        return (_jsx("div", { className: "flex flex-col gap-4", children: Object.keys(valueObject).map((key) => (_jsxs("div", { className: "ml-4 flex flex-col gap-2", children: [_jsx("span", { className: "text-md font-semibold", children: key }), _jsx("span", { className: "text-md", children: value ? (_jsx(LogValue, { value: valueObject[key] })) : (_jsx(Value, { value: valueObject[key] })) })] }, key))) }));
     }
-    return `${value}`;
+    return _jsx(Value, { value: value });
 };
 export const LogField = ({ label, value, className }) => {
-    return (_jsx("div", { className: cn('flex row gap-8 bg-gray-900 text-white p-4 rounded-lg font-bold text-sm', className), children: _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-gray-400 text-xs font-bold", children: label }), _jsx("span", { className: "text-large font-bold", children: value ? _jsx(LogValue, { value: value }) : JSON.stringify(value) })] }) }));
+    return (_jsx("div", { className: cn('flex row text-white p-2', className), children: _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("span", { className: "text-md font-semibold", children: label }), _jsx("span", { className: "", children: value ? _jsx(LogValue, { value: value }) : _jsx(Value, { value: value }) })] }) }));
 };

package/dist/src/components/logs/logs.js

@@ -14,5 +14,5 @@ export const Logs = () => {
     const handleLogClick = (log) => {
         setSelectedLog(log);
     };
-    return (_jsxs("div", { className: "overflow-y-auto h-full text-bold p-4", children: [_jsx(LogDetail, { log: selectedLog, onClose: () => setSelectedLog(undefined) }), _jsxs(Table, { children: [_jsx(TableHeader, { className: "sticky top-0", children: _jsxs(TableRow, { className: "bg-zinc-800 border-b border-zinc-700 [&>th]:font-bold", children: [_jsx(TableHead, { children: "Time" }), _jsx(TableHead, { children: "Level" }), _jsx(TableHead, { children: "Trace" }), _jsx(TableHead, { children: "Flow" }), _jsx(TableHead, { children: "Step" }), _jsx(TableHead, { children: "Message" })] }) }), _jsx(TableBody, { className: "text-md font-mono", children: logs.map((log, index) => (_jsxs(TableRow, { className: "font-bold border-b border-zinc-800/50", onClick: () => handleLogClick(log), children: [_jsx(TableCell, { children: timestamp(log.time) }), _jsx(TableCell, { children: _jsx(LogLevelBadge, { level: log.level }) }), _jsx(TableCell, { children: log.traceId.split('-').pop() }), _jsx(TableCell, { children: log.flows?.join?.(', ') }), _jsx(TableCell, { children: log.step }), _jsx(TableCell, { children: log.msg })] }, index))) })] })] }));
+    return (_jsxs("div", { className: "overflow-y-auto h-full text-bold p-4", children: [_jsx(LogDetail, { log: selectedLog, onClose: () => setSelectedLog(undefined) }), _jsxs(Table, { children: [_jsx(TableHeader, { className: "sticky top-0", children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Time" }), _jsx(TableHead, { children: "Level" }), _jsx(TableHead, { children: "Trace" }), _jsx(TableHead, { children: "Flow" }), _jsx(TableHead, { children: "Step" }), _jsx(TableHead, { children: "Message" })] }) }), _jsx(TableBody, { className: "text-md font-mono", children: logs.map((log, index) => (_jsxs(TableRow, { className: "text-white border-b border-zinc-800/50", onClick: () => handleLogClick(log), children: [_jsx(TableCell, { className: "whitespace-nowrap", children: timestamp(log.time) }), _jsx(TableCell, { children: _jsx(LogLevelBadge, { level: log.level }) }), _jsx(TableCell, { children: log.traceId }), _jsx(TableCell, { children: log.flows?.join?.(', ') }), _jsx(TableCell, { children: log.step }), _jsx(TableCell, { children: log.msg })] }, index))) })] })] }));
 };

package/dist/src/components/states/state-detail.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { StateField } from './state-field';
+import { StateValue } from './state-value';
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '../ui/sheet';
 export const StateDetail = ({ state, onClose }) => {
     const isOpen = !!state;
@@ -8,7 +8,5 @@ export const StateDetail = ({ state, onClose }) => {
             onClose();
         }
     };
-    const isObject = typeof state === 'object';
-    const fields = Object.keys(state ?? {});
-    return (_jsx(Sheet, { open: isOpen, onOpenChange: onOpenChange, children: _jsxs(SheetContent, { className: "flex flex-col h-full", children: [_jsxs(SheetHeader, { children: [_jsx(SheetTitle, { children: "State details" }), _jsx(SheetDescription, { children: "State details and application." })] }), _jsx("div", { className: "font-mono overflow-y-auto", children: state && (_jsxs("div", { className: "flex flex-col gap-6 ", children: [isObject && fields.map((key) => _jsx(StateField, { label: key, value: state[key] }, key)), !isObject && _jsx(StateField, { label: "Value", value: state })] })) })] }) }));
+    return (_jsx(Sheet, { open: isOpen, onOpenChange: onOpenChange, children: _jsxs(SheetContent, { className: "flex flex-col h-full", children: [_jsxs(SheetHeader, { children: [_jsx(SheetTitle, { children: "State details" }), _jsx(SheetDescription, { children: "State details and application." })] }), _jsx("div", { className: "font-mono overflow-y-auto", children: state && (_jsx("div", { className: "flex flex-col gap-2", children: _jsx(StateValue, { value: state, isRoot: true }) })) })] }) }));
 };

package/dist/src/components/states/state-value.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type Props = {
+    value: unknown;
+    isRoot?: boolean;
+    label?: string;
+};
+export declare const StateValue: React.FC<Props>;
+export {};

package/dist/src/components/states/state-value.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { SquareMinus, SquarePlus } from 'lucide-react';
+import React, { useState } from 'react';
+import { cn } from '../../lib/utils';
+const valueVariants = cva('text-white/60 text-sm py-2', {
+    variants: {
+        variant: {
+            boolean: 'text-sky-400',
+            number: 'text-teal-400',
+            undefined: 'text-white/60',
+            string: 'text-white/60',
+            object: 'text-gray-800',
+        },
+    },
+    defaultVariants: {
+        variant: 'string',
+    },
+});
+const Value = ({ value, variant, label, }) => {
+    const displayValue = typeof value === 'string' ? value : JSON.stringify(value);
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [label && _jsx("div", { className: "text-md font-semibold py-2", children: label }), _jsx("div", { className: valueVariants({ variant }), children: displayValue })] }));
+};
+export const StateValue = ({ value, label, isRoot = false }) => {
+    const [isOpen, setIsOpen] = useState(true);
+    const toggle = () => setIsOpen(!isOpen);
+    if (React.isValidElement(value)) {
+        return value;
+    }
+    if (typeof value === 'boolean') {
+        return _jsx(Value, { label: label, variant: "boolean", value: value ? 'true' : 'false' });
+    }
+    if (typeof value === 'number') {
+        return _jsx(Value, { label: label, variant: "number", value: value });
+    }
+    if (typeof value === 'undefined') {
+        return _jsx(Value, { label: label, variant: "undefined", value: value });
+    }
+    if (typeof value === 'string') {
+        return _jsx(Value, { label: label, variant: "string", value: value });
+    }
+    const isArray = Array.isArray(value);
+    const [openBracket, closeBracket] = isRoot ? [] : isArray ? ['[', ']'] : ['{', '}'];
+    if (typeof value === 'object' && !!value) {
+        const valueObject = value;
+        return (_jsxs("div", { className: "flex flex-col gap-2", children: [(label || openBracket) && (_jsxs("div", { className: "flex gap-1 items-center text-md font-semibold hover:bg-gray-800 rounded-md py-2", onClick: toggle, children: [isOpen ? (_jsx(SquareMinus, { className: "w-4 h-4 text-white/60" })) : (_jsx(SquarePlus, { className: "w-4 h-4 text-white/60" })), label, ' ', !isRoot && (_jsxs("span", { className: "text-white/60 text-sm", children: [openBracket, !isOpen && ` ... ${closeBracket}`] }))] })), isOpen &&
+                    !!valueObject &&
+                    Object.keys(valueObject).map((key) => (_jsx("div", { className: cn('flex flex-col gap-2', !isRoot && 'ml-4'), children: _jsx("span", { className: "text-md", children: _jsx(StateValue, { label: isArray ? undefined : key, value: valueObject[key] }) }) }, key))), !isRoot && isOpen && _jsx("span", { className: "text-white/60 text-sm", children: closeBracket })] }));
+    }
+    return _jsx(Value, { value: undefined, variant: "object" });
+};

package/dist/src/components/states/states.js

@@ -17,5 +17,5 @@ export const States = () => {
     const handleStateClick = (state) => {
         setSelectedState(state);
     };
-    return (_jsxs("div", { className: "flex flex-row gap-4 h-full", children: [_jsx(StateDetail, { state: values, onClose: () => setSelectedState(undefined) }), _jsx("div", { className: "flex flex-col gap-2 flex-1 pl-4 py-4", children: _jsxs(Table, { children: [_jsx(TableHeader, { className: "sticky top-0", children: _jsx(TableRow, { className: "bg-zinc-800 border-b border-zinc-700 [&>th]:font-bold", children: _jsx(TableHead, { children: "Root Field (Trace ID)" }) }) }), _jsx(TableBody, { className: "text-md font-mono", children: traces.map((trace) => (_jsx(TableRow, { className: `border-b border-zinc-800/50 cursor-pointer font-bold ${selectedTraceId === trace ? 'bg-indigo-900/50 hover:bg-indigo-900/30' : ''}`, onClick: () => handleTraceClick(trace), children: _jsx(TableCell, { children: trace }) }, trace))) })] }) }), _jsx("div", { className: "flex flex-col gap-2 flex-1 pr-4 py-4", children: _jsxs(Table, { children: [_jsx(TableHeader, { className: "sticky top-0", children: _jsx(TableRow, { className: "bg-zinc-800 border-b border-zinc-700 [&>th]:font-bold", children: _jsx(TableHead, { children: "Fields" }) }) }), _jsx(TableBody, { className: "text-md font-mono", children: fields.map((field) => (_jsx(TableRow, { className: `border-b border-zinc-800/50 cursor-pointer font-bold ${selectedState === field ? 'bg-indigo-900/50 hover:bg-indigo-900/30' : ''}`, onClick: () => handleStateClick(field), children: _jsx(TableCell, { children: field }) }, field))) })] }) })] }));
+    return (_jsxs("div", { className: "flex flex-row gap-4 h-full", children: [_jsx(StateDetail, { state: values, onClose: () => setSelectedState(undefined) }), _jsx("div", { className: "flex flex-col gap-2 flex-1 pl-4 py-4", children: _jsxs(Table, { children: [_jsx(TableHeader, { className: "sticky top-0", children: _jsx(TableRow, { children: _jsx(TableHead, { children: "Root Field (Trace ID)" }) }) }), _jsx(TableBody, { children: traces.map((trace) => (_jsx(TableRow, { onClick: () => handleTraceClick(trace), children: _jsx(TableCell, { className: `rounded-lg font-mono font-semibold ${selectedTraceId === trace ? 'bg-indigo-900/50 hover:bg-indigo-900/30' : ''}`, children: trace }) }, trace))) })] }) }), _jsx("div", { className: "flex flex-col gap-2 flex-1 pr-4 py-4", children: _jsxs(Table, { children: [_jsx(TableHeader, { className: "sticky top-0", children: _jsx(TableRow, { children: _jsx(TableHead, { children: "Fields" }) }) }), _jsx(TableBody, { children: fields.map((field) => (_jsx(TableRow, { className: `font-semibold font-mono ${selectedState === field ? 'bg-indigo-900/50 hover:bg-indigo-900/30' : ''}`, onClick: () => handleStateClick(field), children: _jsx(TableCell, { children: field }) }, field))) })] }) })] }));
 };

package/dist/src/components/ui/badge.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cva } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
-const badgeVariants = cva('inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-bold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', {
+const badgeVariants = cva('inline-flex items-center rounded-lg border px-2 py-1 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', {
     variants: {
         variant: {
             default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
             secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
-            info: 'border-transparent bg-sky-500 text-black hover:bg-sky/80',
+            info: 'border-transparent bg-[#47B2FF33] text-[#47B2FF] hover:bg-sky/80',
             error: 'border-transparent bg-rose-500 text-black shadow hover:bg-rose/80',
             warning: 'border-transparent bg-amber-300 text-amber-950 hover:bg-amber/80',
             destructive: 'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',

package/dist/src/components/ui/button.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "none" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "none" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {

package/dist/src/components/ui/sidebar.d.ts

@@ -1,55 +1,11 @@
-import * as React from 'react';
-import { VariantProps } from 'class-variance-authority';
-import { TooltipContent } from '@/components/ui/tooltip';
-declare const SidebarProvider: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
-    defaultOpen?: boolean;
-    open?: boolean;
-    onOpenChange?: (open: boolean) => void;
-}, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const Sidebar: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
-    side?: "left" | "right";
-    variant?: "sidebar" | "floating" | "inset";
-    collapsible?: "offcanvas" | "icon" | "none";
-}, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const SidebarTrigger: React.ForwardRefExoticComponent<Omit<import("@/components/ui/button").ButtonProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-declare const SidebarRail: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-declare const SidebarInset: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const SidebarInput: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
-declare const SidebarHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const SidebarFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const SidebarSeparator: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-separator").SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const SidebarContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const SidebarGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const SidebarGroupLabel: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
-    asChild?: boolean;
-}, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const SidebarGroupAction: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    asChild?: boolean;
-}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-declare const SidebarGroupContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const SidebarMenu: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
-declare const SidebarMenuItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
-declare const SidebarMenuButton: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    asChild?: boolean;
-    isActive?: boolean;
-    tooltip?: string | React.ComponentProps<typeof TooltipContent>;
-} & VariantProps<(props?: ({
-    variant?: "default" | "outline" | null | undefined;
-    size?: "default" | "sm" | "lg" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-declare const SidebarMenuAction: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    asChild?: boolean;
-    showOnHover?: boolean;
-}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-declare const SidebarMenuBadge: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const SidebarMenuSkeleton: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
-    showIcon?: boolean;
-}, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const SidebarMenuSub: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
-declare const SidebarMenuSubItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
-declare const SidebarMenuSubButton: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLAnchorElement> & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
-    asChild?: boolean;
-    size?: "sm" | "md";
-    isActive?: boolean;
-}, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
-export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, };
+import React, { PropsWithChildren } from 'react';
+export declare const Sidebar: React.FC<PropsWithChildren>;
+export declare const SidebarGroup: React.FC<PropsWithChildren<{
+    title: string;
+}>>;
+type SidebarButtonProps = PropsWithChildren<{
+    isActive: boolean;
+    icon: React.ReactNode;
+}>;
+export declare const SidebarButton: React.FC<SidebarButtonProps>;
+export {};

package/dist/src/components/ui/sidebar.js

@@ -1,221 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { cva } from 'class-variance-authority';
-import { PanelLeft } from 'lucide-react';
-import { useIsMobile } from '@/hooks/use-mobile';
-import { cn } from '@/lib/utils';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Separator } from '@/components/ui/separator';
-import { Sheet, SheetContent } from '@/components/ui/sheet';
-import { Skeleton } from '@/components/ui/skeleton';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
-const SIDEBAR_COOKIE_NAME = 'sidebar:state';
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-const SIDEBAR_WIDTH = '16rem';
-const SIDEBAR_WIDTH_MOBILE = '18rem';
-const SIDEBAR_WIDTH_ICON = '3rem';
-const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
-const SidebarContext = React.createContext(null);
-function useSidebar() {
-    const context = React.useContext(SidebarContext);
-    if (!context) {
-        throw new Error('useSidebar must be used within a SidebarProvider.');
-    }
-    return context;
-}
-const SidebarProvider = React.forwardRef(({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }, ref) => {
-    const isMobile = useIsMobile();
-    const [openMobile, setOpenMobile] = React.useState(false);
-    // This is the internal state of the sidebar.
-    // We use openProp and setOpenProp for control from outside the component.
-    const [_open, _setOpen] = React.useState(defaultOpen);
-    const open = openProp ?? _open;
-    const setOpen = React.useCallback((value) => {
-        const openState = typeof value === 'function' ? value(open) : value;
-        if (setOpenProp) {
-            setOpenProp(openState);
-        }
-        else {
-            _setOpen(openState);
-        }
-        // This sets the cookie to keep the sidebar state.
-        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
-    }, [setOpenProp, open]);
-    // Helper to toggle the sidebar.
-    const toggleSidebar = React.useCallback(() => {
-        return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
-    }, [isMobile, setOpen, setOpenMobile]);
-    // Adds a keyboard shortcut to toggle the sidebar.
-    React.useEffect(() => {
-        const handleKeyDown = (event) => {
-            if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
-                event.preventDefault();
-                toggleSidebar();
-            }
-        };
-        window.addEventListener('keydown', handleKeyDown);
-        return () => window.removeEventListener('keydown', handleKeyDown);
-    }, [toggleSidebar]);
-    // We add a state so that we can do data-state="expanded" or "collapsed".
-    // This makes it easier to style the sidebar with Tailwind classes.
-    const state = open ? 'expanded' : 'collapsed';
-    const contextValue = React.useMemo(() => ({
-        state,
-        open,
-        setOpen,
-        isMobile,
-        openMobile,
-        setOpenMobile,
-        toggleSidebar,
-    }), [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]);
-    return (_jsx(SidebarContext.Provider, { value: contextValue, children: _jsx(TooltipProvider, { delayDuration: 0, children: _jsx("div", { style: {
-                    '--sidebar-width': SIDEBAR_WIDTH,
-                    '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
-                    ...style,
-                }, className: cn('group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar', className), ref: ref, ...props, children: children }) }) }));
-});
-SidebarProvider.displayName = 'SidebarProvider';
-const Sidebar = React.forwardRef(({ side = 'left', variant = 'sidebar', collapsible = 'offcanvas', className, children, ...props }, ref) => {
-    const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
-    if (collapsible === 'none') {
-        return (_jsx("div", { className: cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', className), ref: ref, ...props, children: children }));
-    }
-    if (isMobile) {
-        return (_jsx(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: _jsx(SheetContent, { "data-sidebar": "sidebar", "data-mobile": "true", className: "w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden", style: {
-                    '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
-                }, side: side, children: _jsx("div", { className: "flex h-full w-full flex-col", children: children }) }) }));
-    }
-    return (_jsxs("div", { ref: ref, className: "group peer hidden md:block text-sidebar-foreground", "data-state": state, "data-collapsible": state === 'collapsed' ? collapsible : '', "data-variant": variant, "data-side": side, children: [_jsx("div", { className: cn('duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear', '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)_+_theme(spacing.4))]'
-                    : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]') }), _jsx("div", { className: cn('duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear 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)]', 
-                // Adjust the padding for floating and inset variants.
-                variant === 'floating' || variant === 'inset'
-                    ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
-                    : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l', className), ...props, children: _jsx("div", { "data-sidebar": "sidebar", className: "flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow", children: children }) })] }));
-});
-Sidebar.displayName = 'Sidebar';
-const SidebarTrigger = React.forwardRef(({ className, onClick, ...props }, ref) => {
-    const { toggleSidebar } = useSidebar();
-    return (_jsxs(Button, { ref: ref, "data-sidebar": "trigger", variant: "ghost", size: "icon", className: cn('h-7 w-7', className), onClick: (event) => {
-            onClick?.(event);
-            toggleSidebar();
-        }, ...props, children: [_jsx(PanelLeft, {}), _jsx("span", { className: "sr-only", children: "Toggle Sidebar" })] }));
-});
-SidebarTrigger.displayName = 'SidebarTrigger';
-const SidebarRail = React.forwardRef(({ className, ...props }, ref) => {
-    const { toggleSidebar } = useSidebar();
-    return (_jsx("button", { ref: ref, "data-sidebar": "rail", "aria-label": "Toggle Sidebar", tabIndex: -1, onClick: toggleSidebar, title: "Toggle Sidebar", className: cn('absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex', '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize', '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize', 'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar', '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2', '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2', className), ...props }));
-});
-SidebarRail.displayName = 'SidebarRail';
-const SidebarInset = React.forwardRef(({ className, ...props }, ref) => {
-    return (_jsx("main", { ref: ref, className: cn('relative flex min-h-svh flex-1 flex-col bg-background', 'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow', className), ...props }));
-});
-SidebarInset.displayName = 'SidebarInset';
-const SidebarInput = React.forwardRef(({ className, ...props }, ref) => {
-    return (_jsx(Input, { ref: ref, "data-sidebar": "input", className: cn('h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring', className), ...props }));
-});
-SidebarInput.displayName = 'SidebarInput';
-const SidebarHeader = React.forwardRef(({ className, ...props }, ref) => {
-    return _jsx("div", { ref: ref, "data-sidebar": "header", className: cn('flex flex-col gap-2 p-2', className), ...props });
-});
-SidebarHeader.displayName = 'SidebarHeader';
-const SidebarFooter = React.forwardRef(({ className, ...props }, ref) => {
-    return _jsx("div", { ref: ref, "data-sidebar": "footer", className: cn('flex flex-col gap-2 p-2', className), ...props });
-});
-SidebarFooter.displayName = 'SidebarFooter';
-const SidebarSeparator = React.forwardRef(({ className, ...props }, ref) => {
-    return (_jsx(Separator, { ref: ref, "data-sidebar": "separator", className: cn('mx-2 w-auto bg-sidebar-border', className), ...props }));
-});
-SidebarSeparator.displayName = 'SidebarSeparator';
-const SidebarContent = React.forwardRef(({ className, ...props }, ref) => {
-    return (_jsx("div", { ref: ref, "data-sidebar": "content", className: cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', className), ...props }));
-});
-SidebarContent.displayName = 'SidebarContent';
-const SidebarGroup = React.forwardRef(({ className, ...props }, ref) => {
-    return (_jsx("div", { ref: ref, "data-sidebar": "group", className: cn('relative flex w-full min-w-0 flex-col p-2', className), ...props }));
-});
-SidebarGroup.displayName = 'SidebarGroup';
-const SidebarGroupLabel = React.forwardRef(({ className, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'div';
-    return (_jsx(Comp, { ref: ref, "data-sidebar": "group-label", className: cn('duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0', 'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0', className), ...props }));
-});
-SidebarGroupLabel.displayName = 'SidebarGroupLabel';
-const SidebarGroupAction = React.forwardRef(({ className, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'button';
-    return (_jsx(Comp, { ref: ref, "data-sidebar": "group-action", className: cn('absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0', 
-        // Increases the hit area of the button on mobile.
-        'after:absolute after:-inset-2 after:md:hidden', 'group-data-[collapsible=icon]:hidden', className), ...props }));
-});
-SidebarGroupAction.displayName = 'SidebarGroupAction';
-const SidebarGroupContent = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, "data-sidebar": "group-content", className: cn('w-full text-sm', className), ...props })));
-SidebarGroupContent.displayName = 'SidebarGroupContent';
-const SidebarMenu = React.forwardRef(({ className, ...props }, ref) => (_jsx("ul", { ref: ref, "data-sidebar": "menu", className: cn('flex w-full min-w-0 flex-col gap-1', className), ...props })));
-SidebarMenu.displayName = 'SidebarMenu';
-const SidebarMenuItem = React.forwardRef(({ className, ...props }, ref) => (_jsx("li", { ref: ref, "data-sidebar": "menu-item", className: cn('group/menu-item relative', className), ...props })));
-SidebarMenuItem.displayName = 'SidebarMenuItem';
-const sidebarMenuButtonVariants = cva('peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', {
-    variants: {
-        variant: {
-            default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
-            outline: 'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
-        },
-        size: {
-            default: 'h-8 text-sm',
-            sm: 'h-7 text-xs',
-            lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',
-        },
-    },
-    defaultVariants: {
-        variant: 'default',
-        size: 'default',
-    },
-});
-const SidebarMenuButton = React.forwardRef(({ asChild = false, isActive = false, variant = 'default', size = 'default', tooltip, className, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'button';
-    const { isMobile, state } = useSidebar();
-    const button = (_jsx(Comp, { ref: ref, "data-sidebar": "menu-button", "data-size": size, "data-active": isActive, className: cn(sidebarMenuButtonVariants({ variant, size }), className), ...props }));
-    if (!tooltip) {
-        return button;
-    }
-    if (typeof tooltip === 'string') {
-        tooltip = {
-            children: tooltip,
-        };
-    }
-    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: button }), _jsx(TooltipContent, { side: "right", align: "center", hidden: state !== 'collapsed' || isMobile, ...tooltip })] }));
-});
-SidebarMenuButton.displayName = 'SidebarMenuButton';
-const SidebarMenuAction = React.forwardRef(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'button';
-    return (_jsx(Comp, { ref: ref, "data-sidebar": "menu-action", className: cn('absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0', 
-        // Increases the hit area of the button on mobile.
-        'after:absolute after:-inset-2 after:md:hidden', 'peer-data-[size=sm]/menu-button:top-1', 'peer-data-[size=default]/menu-button:top-1.5', 'peer-data-[size=lg]/menu-button:top-2.5', 'group-data-[collapsible=icon]:hidden', showOnHover &&
-            'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0', className), ...props }));
-});
-SidebarMenuAction.displayName = 'SidebarMenuAction';
-const SidebarMenuBadge = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, "data-sidebar": "menu-badge", className: cn('absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none', 'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground', 'peer-data-[size=sm]/menu-button:top-1', 'peer-data-[size=default]/menu-button:top-1.5', 'peer-data-[size=lg]/menu-button:top-2.5', 'group-data-[collapsible=icon]:hidden', className), ...props })));
-SidebarMenuBadge.displayName = 'SidebarMenuBadge';
-const SidebarMenuSkeleton = React.forwardRef(({ className, showIcon = false, ...props }, ref) => {
-    // Random width between 50 to 90%.
-    const width = React.useMemo(() => {
-        return `${Math.floor(Math.random() * 40) + 50}%`;
-    }, []);
-    return (_jsxs("div", { ref: ref, "data-sidebar": "menu-skeleton", className: cn('rounded-md h-8 flex gap-2 px-2 items-center', className), ...props, children: [showIcon && _jsx(Skeleton, { className: "size-4 rounded-md", "data-sidebar": "menu-skeleton-icon" }), _jsx(Skeleton, { className: "h-4 flex-1 max-w-[--skeleton-width]", "data-sidebar": "menu-skeleton-text", style: {
-                    '--skeleton-width': width,
-                } })] }));
-});
-SidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton';
-const SidebarMenuSub = React.forwardRef(({ className, ...props }, ref) => (_jsx("ul", { ref: ref, "data-sidebar": "menu-sub", className: cn('mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5', 'group-data-[collapsible=icon]:hidden', className), ...props })));
-SidebarMenuSub.displayName = 'SidebarMenuSub';
-const SidebarMenuSubItem = React.forwardRef(({ ...props }, ref) => (_jsx("li", { ref: ref, ...props })));
-SidebarMenuSubItem.displayName = 'SidebarMenuSubItem';
-const SidebarMenuSubButton = React.forwardRef(({ asChild = false, size = 'md', isActive, className, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'a';
-    return (_jsx(Comp, { ref: ref, "data-sidebar": "menu-sub-button", "data-size": size, "data-active": isActive, className: cn('flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground', 'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground', size === 'sm' && 'text-xs', size === 'md' && 'text-sm', 'group-data-[collapsible=icon]:hidden', className), ...props }));
-});
-SidebarMenuSubButton.displayName = 'SidebarMenuSubButton';
-export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, };
+import { useState } from 'react';
+import { cn } from '../../lib/utils';
+import { PanelLeftClose, PanelLeftOpen } from 'lucide-react';
+import { Button } from './button';
+export const Sidebar = ({ children }) => {
+    const [isCollapsed, setIsCollapsed] = useState(false);
+    return (_jsxs("div", { className: cn('max-h-screen overflow-y-auto transition-[width] duration-300 border-r border-zinc-800 border-solid', isCollapsed ? 'w-[50px]' : 'w-[250px]'), children: [_jsx("div", { className: "flex items-center justify-end gap-2 px-4 py-3", children: _jsx(Button, { variant: "ghost", size: "icon", onClick: () => setIsCollapsed(!isCollapsed), children: isCollapsed ? _jsx(PanelLeftOpen, { className: "w-4 h-4" }) : _jsx(PanelLeftClose, { className: "w-4 h-4" }) }) }), !isCollapsed && _jsx("div", { className: "overflow-y-auto w-[250px]", children: children })] }));
+};
+export const SidebarGroup = ({ children, title }) => {
+    return (_jsxs("div", { className: "flex flex-col", children: [_jsx("h2", { className: "text-lg text-white/60 px-4 py-2 uppercase", children: title }), children] }));
+};
+export const SidebarButton = ({ children, isActive, icon }) => {
+    return (_jsxs("div", { className: cn('flex items-center gap-2 px-4 py-3 ', isActive && 'bg-[#242036]'), children: [_jsx("div", { className: "text-gray-500", children: icon }), children] }));
+};

package/dist/src/components/ui/table.js

@@ -11,7 +11,7 @@ const TableFooter = React.forwardRef(({ className, ...props }, ref) => (_jsx("tf
 TableFooter.displayName = 'TableFooter';
 const TableRow = React.forwardRef(({ className, ...props }, ref) => (_jsx("tr", { ref: ref, className: cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', className), ...props })));
 TableRow.displayName = 'TableRow';
-const TableHead = React.forwardRef(({ className, ...props }, ref) => (_jsx("th", { ref: ref, className: cn('h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', className), ...props })));
+const TableHead = React.forwardRef(({ className, ...props }, ref) => (_jsx("th", { ref: ref, className: cn('h-10 px-2 text-left align-middle text-lg bg-[#252234] text-muted-foreground first:rounded-l-lg last:rounded-r-lg [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', className), ...props })));
 TableHead.displayName = 'TableHead';
 const TableCell = React.forwardRef(({ className, ...props }, ref) => (_jsx("td", { ref: ref, className: cn('p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', className), ...props })));
 TableCell.displayName = 'TableCell';

package/dist/src/hooks/use-debounced.d.ts

@@ -0,0 +1 @@
+export declare const useDebounced: (fn: () => void, delay?: number) => () => void;

package/dist/src/hooks/use-debounced.js

@@ -0,0 +1,20 @@
+import { useCallback, useEffect, useRef } from 'react';
+export const useDebounced = (fn, delay = 500) => {
+    const saveTimeoutRef = useRef(null);
+    const debouncedFn = useCallback(() => {
+        if (saveTimeoutRef.current) {
+            clearTimeout(saveTimeoutRef.current);
+        }
+        saveTimeoutRef.current = setTimeout(() => {
+            fn();
+        }, delay);
+    }, [fn, delay]);
+    useEffect(() => {
+        return () => {
+            if (saveTimeoutRef.current) {
+                clearTimeout(saveTimeoutRef.current);
+            }
+        };
+    }, []);
+    return debouncedFn;
+};