@vertesia/ui 0.81.0 → 0.81.2-dev.20260204.135023Z

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertesia/ui",
-  "version": "0.81.0",
+  "version": "0.81.2-dev.20260204.135023Z",
   "description": "Vertesia UI components and and hooks",
   "type": "module",
   "main": "./lib/index.js",
@@ -19,9 +19,6 @@
     "hooks"
   ],
   "dependencies": {
-    "@codemirror/lang-json": "^6.0.1",
-    "@codemirror/state": "^6.5.2",
-    "@codemirror/view": "^6.36.8",
     "@floating-ui/dom": "^1.7.1",
     "@floating-ui/react": "^0.27.11",
     "@headlessui/react": "^2.2.2",
@@ -38,7 +35,6 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
-    "codemirror": "^6.0.1",
     "dayjs": "^1.11.13",
     "debounce": "^2.2.0",
     "fast-xml-parser": "^5.2.3",
@@ -48,12 +44,12 @@
     "json-schema": "^0.4.0",
     "jwt-decode": "^4.0.0",
     "lodash-es": "^4.17.21",
-    "lucide-react": "^0.511.0",
+    "lucide-react": "^0.562.0",
     "monaco-editor": "^0.52.2",
     "motion": "^12.12.1",
     "react": "^19.2.3",
     "react-calendar": "^6.0.0",
-    "react-date-picker": "^11.0.0",
+    "react-date-picker": "^12.0.1",
     "react-dom": "^19.2.3",
     "react-error-boundary": "^6.0.0",
     "react-markdown": "^10.1.0",
@@ -64,9 +60,9 @@
     "tailwind-merge": "^3.3.0",
     "ts-md5": "^1.3.1",
     "unist-util-visit": "^5.0.0",
-    "@vertesia/json": "0.81.0",
-    "@vertesia/common": "0.81.0",
-    "@vertesia/client": "0.81.0"
+    "@vertesia/common": "0.81.2-dev.20260204.135023Z",
+    "@vertesia/json": "0.81.2-dev.20260204.135023Z",
+    "@vertesia/client": "0.81.2-dev.20260204.135023Z"
   },
   "devDependencies": {
     "@eslint/js": "^9.27.0",

package/src/core/components/InputList.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React, { useState } from 'react';
 
-import { Badge } from './Badge';
+import { Badge } from './shadcn/badge';
 import { Input } from './shadcn/input';
 import { VTooltip } from '@vertesia/ui/core';
 

package/src/core/components/Overlay.tsx

@@ -2,7 +2,7 @@ import { motion } from "framer-motion"
 import { X } from "lucide-react"
 import { useState, ReactNode } from "react"
 
-import { Button } from "./Button"
+import { Button } from "./shadcn/button"
 
 interface OverlayProps {
     children: ReactNode

package/src/core/components/SidePanel.tsx

@@ -10,8 +10,11 @@ interface SidePanelProps {
     title?: string;
     panelWidth?: number;
     backdrop?: boolean;
+    side?: 'left' | 'right';
+    resizable?: boolean;
+    className?: string;
 }
-export function SidePanel({ isOpen, title, onClose, children, panelWidth = 768, backdrop = false }: SidePanelProps) {
+export function SidePanel({ isOpen, title, onClose, children, panelWidth = 768, backdrop = false, side = 'right', resizable = true, className }: SidePanelProps) {
     const [_panelWidth, setPanelWidth] = useState(panelWidth);
 
     const handleDragStart = (e: React.MouseEvent) => {
@@ -39,6 +42,13 @@ export function SidePanel({ isOpen, title, onClose, children, panelWidth = 768,
         document.addEventListener('mouseup', handleMouseUp);
     };
 
+    const isLeft = side === 'left';
+    const positionClass = isLeft ? 'left-0' : 'right-0';
+    const paddingClass = isLeft ? 'pr-10 sm:pr-16' : 'pl-10 sm:pl-16';
+    const borderClass = isLeft ? 'border-r' : 'border-l';
+    const dragHandleClass = isLeft ? '-right-1' : '-left-1';
+    const initialX = isLeft ? "-100%" : "100%";
+
     return (
         <AnimatePresence>
             {isOpen && (
@@ -54,26 +64,28 @@ export function SidePanel({ isOpen, title, onClose, children, panelWidth = 768,
                         />
                     )}
 
-                    <div className="fixed inset-y-0 right-0 overflow-hidden">
+                    <div className={`fixed inset-y-0 ${positionClass} overflow-hidden`}>
                         <div className="absolute inset-0 overflow-hidden">
-                            <div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10 sm:pl-16">
+                            <div className={`pointer-events-none fixed inset-y-0 ${positionClass} flex max-w-full ${paddingClass}`}>
                                 <motion.div
-                                    className="pointer-events-auto border-l"
+                                    className={`pointer-events-auto ${borderClass}`}
                                     style={{ width: `${_panelWidth}px` }}
-                                    initial={{ x: "100%" }}
+                                    initial={{ x: initialX }}
                                     animate={{ x: 0 }}
-                                    exit={{ x: "100%" }}
+                                    exit={{ x: initialX }}
                                     transition={{ type: "spring", stiffness: 300, damping: 30 }}
                                 >
                                     <div className="relative flex h-full">
                                         {/* Drag Handle */}
-                                        <div
-                                            className="absolute -left-1 top-0 bottom-0 w-3 cursor-ew-resize hover:bg-indigo-500 transition-colors flex items-center justify-center"
-                                            onMouseDown={handleDragStart}
-                                        >
-                                            <Minus className="rotate-90 font-semibold" strokeWidth={4} />
-                                        </div>
-                                        <div className="flex-1 flex flex-col overflow-y-scroll gap-4 bg-background py-2 shadow-xl">
+                                        {resizable && (
+                                            <div
+                                                className={`absolute ${dragHandleClass} top-0 bottom-0 w-3 cursor-ew-resize hover:bg-indigo-500 transition-colors flex items-center justify-center`}
+                                                onMouseDown={handleDragStart}
+                                            >
+                                                <Minus className="rotate-90 font-semibold" strokeWidth={4} />
+                                            </div>
+                                        )}
+                                        <div className={`flex-1 flex flex-col overflow-y-scroll gap-4 bg-background py-2 shadow-xl ${className}`}>
                                             {title && (
                                                 <div className="px-2 sm:px-4">
                                                     <div className="flex items-start justify-between">

package/src/core/components/index.ts

@@ -1,10 +1,7 @@
 
 export * from "./Avatar.js";
-export * from "./Badge.js";
 export * from "./Center.js";
 export * from "./ComboBox.js";
-export * from "./ConfirmModal.js";
-export * from "./DeleteModal.js";
 export * from "./Divider.js";
 export * from "./Dropdown.js";
 export * from "./DropdownList.js";
@@ -14,15 +11,11 @@ export * from "./FormItem.js";
 export * from "./InputList.js";
 export * from "./Link.js";
 export * from "./MenuList.js";
-export * from "./MessageBox.js";
-export * from "./Modal.js";
 export * from "./NumberInput.js";
 export * from "./Overlay.js";
-export * from "./Panel.js";
 export * from "./popup/index.js";
 export * from "./Portal.js";
 export * from "./RadioGroup.js";
-export * from "./SelectBox.js";
 export * from "./SelectList.js";
 export * from "./SelectStack.js";
 export * from "./shadcn/index.js";
@@ -31,7 +24,6 @@ export * from "./Spinner.js";
 export * from "./styles.js";
 export * from "./Switch.js";
 export * from "./table/index.js";
-export * from "./tabs/index.js";
 export * from "./TagsInput.js";
 export * from "./toast/index.js";
 

package/src/core/components/{Panel.tsx → shadcn/Panel.tsx}

@@ -1,4 +1,4 @@
-import { VTooltip } from "./shadcn/tooltip"
+import { VTooltip } from "./tooltip"
 import { Info } from "lucide-react"
 
 interface PanelProps {

package/src/core/components/{Badge.tsx → shadcn/badge.tsx}

@@ -1,6 +1,6 @@
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "./libs/utils"
+import { cn } from "../libs/utils"
 
 // Base badge variants
 const badgeVariants = cva(

package/src/core/components/shadcn/calendar.tsx

@@ -12,7 +12,7 @@ function Calendar({
 }: CalendarProps) {
   const sizeClass = {
     sm: "text-sm",
-    md: "text-base", 
+    md: "text-base",
     lg: "text-lg",
   }[size]
 
@@ -26,4 +26,4 @@ function Calendar({
 }
 Calendar.displayName = "Calendar"
 
-export { Calendar }
+export { Calendar }

package/src/core/components/shadcn/command.tsx

@@ -4,7 +4,7 @@ import { Command as CommandPrimitive } from "cmdk"
 import { Search } from "lucide-react"
 
 import { cn } from "../libs/utils"
-import { Dialog, DialogContent } from "./dialog"
+import { Dialog, DialogContent } from "./modal/dialog"
 
 const Command: React.ForwardRefExoticComponent<
   React.RefAttributes<HTMLDivElement> &

package/src/core/components/shadcn/filters/index.ts

@@ -2,4 +2,4 @@ export * from './animateChangeInHeight';
 export * from './comboBox/comboBox';
 export * from './filterBar';
 export * from './filters';
-export * from './types';
+export * from './types';

package/src/core/components/shadcn/index.ts

@@ -1,9 +1,10 @@
 export * from './theme/ThemeSwitcher';
 export * from './theme/ThemeProvider';
 
+export * from "./badge"
 export * from './button';
 export * from './card';
-export * from './dialog';
+export * from './modal';
 export * from './input';
 export * from './separator';
 export * from './selectBox';
@@ -11,7 +12,6 @@ export * from './tabs';
 export * from './tooltip';
 export * from './label';
 export * from './breadcrumb';
-export * from './dialog';
 export * from './button';
 export * from './filters';
 export * from './popover';
@@ -20,4 +20,6 @@ export * from './checkbox';
 export * from './heading';
 export * from './text';
 export * from './resizeable';
-export * from './textarea';
+export * from './textarea';
+export * from "./MessageBox"
+export * from "./Panel"

package/src/core/components/{ConfirmModal.tsx → shadcn/modal/ConfirmModal.tsx}

@@ -1,7 +1,7 @@
 import { TriangleAlert } from "lucide-react"
 import React, { useRef } from "react"
-import { VModal, VModalTitle, VModalFooter } from "./shadcn"
-import { Button } from "./shadcn/button"
+import { Modal, ModalTitle, ModalFooter } from "./dialog"
+import { Button } from "../button"
 
 interface ConfirmModalProps {
     title: string
@@ -15,15 +15,15 @@ export function ConfirmModal({ title, content, onConfirm, onCancel, isOpen }: Co
     const cancelButtonRef = useRef(null)
 
     return (
-        <VModal isOpen={isOpen} onClose={onCancel} description="Confirm Modal">
+        <Modal isOpen={isOpen} onClose={onCancel} description="Confirm Modal">
             <div className="sm:flex sm:items-start p-2">
                 <div className="mx-auto flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                     <TriangleAlert className="size-6 text-red-600" aria-hidden="true" />
                 </div>
                 <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-                    <VModalTitle className="leading-6" show >
+                    <ModalTitle className="leading-6" show >
                         {title}
-                    </VModalTitle>
+                    </ModalTitle>
                     <div className="mt-2">
                         <div className="prose text-sm text-gray-500">
                             {content}
@@ -31,7 +31,7 @@ export function ConfirmModal({ title, content, onConfirm, onCancel, isOpen }: Co
                     </div>
                 </div>
             </div>
-            <VModalFooter align="right">
+            <ModalFooter align="right">
                 <Button
                     variant="destructive"
                     onClick={onConfirm}
@@ -45,7 +45,7 @@ export function ConfirmModal({ title, content, onConfirm, onCancel, isOpen }: Co
                 >
                     Cancel
                 </Button>
-            </VModalFooter>
-        </VModal>
+            </ModalFooter>
+        </Modal>
     )
 }

package/src/core/components/{DeleteModal.tsx → shadcn/modal/DeleteModal.tsx}

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 import { ConfirmModal } from "./ConfirmModal.js";
-import { useToast } from "./toast/index.js";
+import { useToast } from "../../toast/index.js";
 
 interface DeleteModalProps {
     idToDelete?: string;

package/src/core/components/shadcn/{dialog.tsx → modal/dialog.tsx}

@@ -1,11 +1,12 @@
 import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { cn } from "../libs/utils";
+import { cn } from "../../libs/utils";
 
 import { X } from "lucide-react";
-import { Button } from "./button";
-import { VisuallyHidden } from "../libs/visuallyHidden";
+import { Button } from "../button";
+import { VisuallyHidden } from "../../libs/visuallyHidden";
 import { createContext, useContext } from "react";
+import { usePortalContainer } from "../../../hooks/PortalContainerProvider";
 
 interface ModalProps {
     children: React.ReactNode | React.ReactNode[];
@@ -27,7 +28,7 @@ export function ModalContextProvider({ children }: { children: React.ReactNode }
     return <ModalContext.Provider value={true}>{children}</ModalContext.Provider>
 }
 
-export function VModal({
+export function Modal({
     className,
     children,
     isOpen,
@@ -49,13 +50,13 @@ export function VModal({
             case "sm":
                 return "max-w-[20vw]";
             case "md":
-                return "max-w-[40vw]";
+                return "max-w-[60vw] lg:max-w-[40vw]";
             case "lg":
-                return "max-w-[60vw]";
+                return "max-w-[80vw] md:max-w-[60vw]";
             case "xl":
-                return "max-w-[80vw]";
+                return "max-w-[95vw] lg:max-w-[80vw]";
             default:
-                return "max-w-[40vw]";
+                return "max-w-[60vw] lg:max-w-[40vw]";
         }
     }
 
@@ -109,13 +110,14 @@ export function VModal({
     );
 }
 
-export const VModalTitle = ({
+export const ModalTitle = ({
     children,
     show = true,
     className,
     description,
+    showDivider = false,
     ...props
-}: React.HTMLAttributes<HTMLHeadingElement> & { show?: boolean; description?: string }) => {
+}: React.HTMLAttributes<HTMLHeadingElement> & { show?: boolean; description?: string, showDivider?: boolean }) => {
     if (!show) {
         return (
             <VisuallyHidden>
@@ -127,7 +129,11 @@ export const VModalTitle = ({
     return (
         <>
             <DialogTitle
-                className={cn("text-lg font-semibold leading-6 tracking-tight", { 'py-2': !description }, className)}
+                className={cn(
+                    showDivider ? "border-b-solid border-b border-b-1 pb-2 mb-4" : "",
+                    "text-lg font-semibold leading-6 tracking-tight", 
+                    { 'py-2': !description }, 
+                    className)}
                 {...props}
             >
                 {children}
@@ -141,7 +147,7 @@ export const VModalTitle = ({
     );
 };
 
-export const VModalBody = ({
+export const ModalBody = ({
     children,
     className,
     ...props
@@ -157,7 +163,7 @@ interface ModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {
     align?: "left" | "right" | "center";
 }
 
-export const VModalFooter = ({
+export const ModalFooter = ({
     align = "right",
     children,
     className,
@@ -205,25 +211,28 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 const DialogContent = React.forwardRef<
     React.ElementRef<typeof DialogPrimitive.Content>,
     React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-    <DialogPortal>
-        <DialogOverlay />
-        <DialogPrimitive.Content
-            ref={ref}
-            autoFocus={false}
-            onOpenAutoFocus={(event) => {
-                event.preventDefault();
-            }}
-            className={cn(
-                "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] border bg-background shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-                className
-            )}
-            {...props}
-        >
-            {children}
-        </DialogPrimitive.Content>
-    </DialogPortal>
-));
+>(({ className, children, ...props }, ref) => {
+    const container = usePortalContainer();
+    return (
+        <DialogPortal container={container}>
+            <DialogOverlay />
+            <DialogPrimitive.Content
+                ref={ref}
+                autoFocus={false}
+                onOpenAutoFocus={(event) => {
+                    event.preventDefault();
+                }}
+                className={cn(
+                    "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] border bg-background shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+                    className
+                )}
+                {...props}
+            >
+                {children}
+            </DialogPrimitive.Content>
+        </DialogPortal>
+    );
+});
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogDescription = React.forwardRef<

package/src/core/components/shadcn/modal/index.ts

@@ -0,0 +1,3 @@
+export * from "./ConfirmModal"
+export * from "./DeleteModal"
+export * from "./dialog"

package/src/core/components/shadcn/popover.tsx

@@ -3,7 +3,8 @@ import * as PopoverPrimitive from "@radix-ui/react-popover";
 
 import { cn } from "../libs/utils"
 import { JSX } from "react";
-import { useIsInModal } from "./dialog";
+import { useIsInModal } from "./modal/dialog";
+import { usePortalContainer } from "../../hooks/PortalContainerProvider";
 
 export interface PopoverContextValue {
   open: boolean;
@@ -87,9 +88,10 @@ const PopoverContent = React.forwardRef<
   }
 
   const { setOpen, hover } = context;
+  const container = usePortalContainer();
 
   return (
-    <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Portal container={container}>
       <PopoverPrimitive.Content
         ref={ref}
         align={align}

package/src/core/components/shadcn/selectBox.tsx

@@ -1,15 +1,15 @@
 import clsx from 'clsx';
 import { isEqual } from 'lodash-es';
 import { AlertTriangle, Check, ChevronsUpDown, SearchIcon, SquarePlus, X } from 'lucide-react';
-import { useState, useEffect, useRef, useMemo } from 'react';
+import { useState, useEffect, useRef, useMemo, ReactNode } from 'react';
 
 import { Popover, PopoverContent, PopoverTrigger, PopoverClose } from './popover';
 import { Command, CommandEmpty, CommandGroup, CommandItem, CommandList } from './command';
 import { Input } from './input';
-import { Button } from '@vertesia/ui/core';
+import { Button } from './button';
 import { VTooltip } from './tooltip';
 
-export interface VSelectBoxBaseProps<T> {
+export interface SelectBoxBaseProps<T> {
     options: T[] | undefined;
     optionLabel?: (option: T) => React.ReactNode;
     onBlur?: () => void;
@@ -26,27 +26,29 @@ export interface VSelectBoxBaseProps<T> {
     isClearable?: boolean;
     border?: boolean;
     inline?: boolean;
+    clearIcon?: ReactNode;
+    clearTitle?: string;
     /** Show warning when value is not in options list (default: true) */
     warnOnMissingValue?: boolean;
     /** Custom warning message when value is not in options */
     missingValueWarning?: string;
 }
 
-interface VSelectBoxSingleProps<T> extends VSelectBoxBaseProps<T> {
+interface SelectBoxSingleProps<T> extends SelectBoxBaseProps<T> {
     multiple?: false;
     value?: T;
     onChange: (option: T) => void;
 }
 
-interface VSelectBoxMultipleProps<T> extends VSelectBoxBaseProps<T> {
+interface SelectBoxMultipleProps<T> extends SelectBoxBaseProps<T> {
     multiple: true;
     value?: T[];
     onChange: (options: T[]) => void;
 }
 
-type VSelectBoxProps<T> = VSelectBoxSingleProps<T> | VSelectBoxMultipleProps<T>;
+type SelectBoxProps<T> = SelectBoxSingleProps<T> | SelectBoxMultipleProps<T>;
 
-export function VSelectBox<T = any>({ options, optionLabel, value, onChange, addNew, addNewLabel, disabled, filterBy, label, placeholder, className, popupClass, isClearable, border = true, multiple = false, by, inline = false, warnOnMissingValue = true, missingValueWarning = "Value not in options list, may not be valid" }: Readonly<VSelectBoxProps<T>>) {
+export function SelectBox<T = any>({ options, optionLabel, value, onChange, addNew, addNewLabel, disabled, filterBy, label, placeholder, className, popupClass, isClearable, border = true, multiple = false, by, inline = false, warnOnMissingValue = true, missingValueWarning = "Value not in options list, may not be valid", clearIcon, clearTitle }: Readonly<SelectBoxProps<T>>) {
     const triggerRef = useRef<HTMLDivElement>(null);
     const [open, setOpen] = useState(false);
     const [width, setWidth] = useState<number>(0);
@@ -282,13 +284,13 @@ export function VSelectBox<T = any>({ options, optionLabel, value, onChange, add
                 >
                     <div
                         className={clsx(
-                            "flex flex-col w-full rounded-md text-sm items-center justify-center truncate",
+                            "flex flex-col w-full rounded-md text-sm min-h-6 items-center justify-center truncate",
                             !disabled && "",
                             isClearable && value && (Array.isArray(value) ? value.length > 0 : true) && "pr-6"
                         )}
                     >
                         {label && <div className='w-full text-left text-xs font-semibold'>{label}</div>}
-                        <div className={clsx('w-full text-left min-h-6', !disabled && '', isMissingValue && 'text-destructive')}>
+                        <div className={clsx('w-full text-left ', !disabled && '', isMissingValue && 'text-destructive')}>
                             {isMissingValue && (
                                 <VTooltip description={missingValueWarning} placement="top" asChild>
                                     <AlertTriangle className="inline-block size-4 mr-1 -mt-0.5 cursor-help" />
@@ -301,8 +303,8 @@ export function VSelectBox<T = any>({ options, optionLabel, value, onChange, add
                         {isClearable && value && (Array.isArray(value) ? value.length > 0 : true) && (
                             <Button variant={"link"} size={"icon"}
                                 disabled={disabled}
-                                alt="Clear selection"
-                                onClick={(e) => {
+                                alt={clearTitle || "Clear selection"}
+                                onClick={(e: { stopPropagation: () => void; }) => {
                                     e.stopPropagation();
                                     if (multiple) {
                                         (onChange as (options: T[]) => void)([] as T[]);
@@ -312,7 +314,7 @@ export function VSelectBox<T = any>({ options, optionLabel, value, onChange, add
                                 }}
                                 className="cursor-pointer hover:bg-muted/20 clear-button opacity-0 transition-opacity duration-200 rounded p-1"
                             >
-                                <X className="size-4" />
+                                {clearIcon ? clearIcon : <X className="size-4" />}
                             </Button>
                         )}
                         {!disabled && (

package/src/core/components/shadcn/tabs.tsx

@@ -1,9 +1,18 @@
 import * as React from "react";
+import { ReactNode } from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 
 import { cn } from "../libs/utils";
-import { Tab, TabsContext as _TabContext } from '../tabs/TabsContext.js';
-import { VSelectBox } from "./selectBox";
+import { SelectBox } from "./selectBox";
+
+export interface Tab {
+    name: string;
+    current?: boolean;
+    href?: string;
+    label: ReactNode;
+    content: ReactNode;
+    disabled?: boolean;
+}
 
 const TabsContext = React.createContext<{
   size?: number;
@@ -36,7 +45,7 @@ interface TabsProps {
   updateHash?: boolean;
 }
 
-const VTabs = ({
+const Tabs = ({
   tabs,
   defaultValue,
   current,
@@ -135,7 +144,7 @@ const VTabs = ({
   );
 };
 
-const VTabsBar = ({ className }: { className?: string }) => {
+const TabsBar = ({ className }: { className?: string }) => {
   const { tabs, size, current, setTab, responsive, variant, updateHash } = React.useContext(TabsContext);
 
   const fullWidth = size !== 0;
@@ -164,7 +173,7 @@ const VTabsBar = ({ className }: { className?: string }) => {
     <>
       {responsive && (
         <div className="px-2 block lg:hidden">
-          <VSelectBox
+          <SelectBox
             label="Tab"
             className={(className)}
             options={tabs}
@@ -194,7 +203,7 @@ const VTabsBar = ({ className }: { className?: string }) => {
   );
 };
 
-const VTabsPanel = ({ className }: { className?: string }) => {
+const TabsPanel = ({ className }: { className?: string }) => {
   const { tabs } = React.useContext(TabsContext);
 
   if (!tabs) return null;
@@ -293,4 +302,4 @@ const TabsContent = React.forwardRef<
 ));
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 
-export { VTabs, VTabsBar, VTabsPanel, TabsList, TabsTrigger, TabsContent };
+export { Tabs, TabsBar, TabsPanel, TabsList, TabsTrigger, TabsContent };