@tb-dev/vue-components 5.1.0 → 5.2.0

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 Andrew Ferreira <andrew.shien2@gmail.com>
-
-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.
+MIT License
+
+Copyright (c) 2025 Andrew Ferreira <andrew.shien2@gmail.com>
+
+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/components/index.d.ts

@@ -40,3 +40,4 @@ export * from './tags-input';
 export * from './textarea';
 export * from './toggle';
 export * from './tooltip';
+export { FocusScope, Presence, Primitive, RovingFocusGroup, RovingFocusItem, Slot, useDateFormatter, useEmitAsProps, useFilter, useForwardExpose, useForwardProps, useForwardPropsEmits, VisuallyHidden, } from 'reka-ui';

package/dist/index.js

@@ -1,6 +1,6 @@
 import { defineComponent, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot, createElementVNode, normalizeClass, createVNode, createElementBlock, computed, Fragment, renderList, createTextVNode, toDisplayString, createCommentVNode, ref, reactive, watch, normalizeProps, guardReactiveProps, onMounted, onUnmounted, withDirectives, isRef, vModelText, resolveDynamicComponent, normalizeStyle } from 'vue';
 import { useForwardPropsEmits, AccordionRoot, AccordionContent, useForwardProps, AccordionItem, AccordionHeader, AccordionTrigger, AlertDialogRoot, Primitive, AlertDialogAction, AlertDialogCancel, AlertDialogPortal, AlertDialogOverlay, AlertDialogContent, AlertDialogDescription, AlertDialogTitle, AlertDialogTrigger, AvatarRoot, AvatarFallback, AvatarImage, CalendarRoot, CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNext, CalendarPrev, CheckboxRoot, CheckboxIndicator, ComboboxRoot, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxLabel, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxPortal, ComboboxContent, ComboboxSeparator, ComboboxViewport, useFilter, ListboxRoot, DialogRoot, DialogClose, DialogOverlay, DialogPortal, DialogContent, DialogDescription, DialogTitle, DialogTrigger, useId, ListboxGroup, ListboxGroupLabel, ListboxFilter, ListboxItem, ListboxContent, Separator, createContext, ContextMenuRoot, ContextMenuCheckboxItem, ContextMenuItemIndicator, ContextMenuPortal, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DropdownMenuRoot, DropdownMenuCheckboxItem, DropdownMenuItemIndicator, DropdownMenuPortal, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, HoverCardRoot, HoverCardPortal, HoverCardContent, HoverCardTrigger, Label, MenubarRoot, MenubarCheckboxItem, MenubarItemIndicator, MenubarPortal, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavigationMenuViewport, NavigationMenuRoot, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NumberFieldRoot, NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, PaginationRoot, PaginationList, PaginationEllipsis, PaginationFirst, PaginationListItem, PaginationLast, PaginationNext, PaginationPrev, PopoverRoot, PopoverAnchor, PopoverPortal, PopoverContent, PopoverTrigger, ProgressRoot, ProgressIndicator, RadioGroupRoot, RadioGroupItem, RadioGroupIndicator, SplitterResizeHandle, SplitterPanel, SplitterGroup, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaRoot, ScrollAreaViewport, ScrollAreaCorner, SelectRoot, SelectPortal, SelectContent, SelectViewport, SelectGroup, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectIcon, SelectValue, TooltipRoot, TooltipPortal, TooltipContent, TooltipArrow, TooltipProvider, TooltipTrigger, SliderRoot, SliderTrack, SliderRange, SliderThumb, SwitchRoot, SwitchThumb, TabsRoot, TabsContent, TabsList, TabsTrigger, TagsInputRoot, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText, Toggle } from 'reka-ui';
-export { ComboboxCancel, ComboboxTrigger, DropdownMenuPortal, PaginationList, PaginationListItem } from 'reka-ui';
+export { ComboboxCancel, ComboboxTrigger, DropdownMenuPortal, FocusScope, PaginationList, PaginationListItem, Presence, Primitive, RovingFocusGroup, RovingFocusItem, Slot, VisuallyHidden, useDateFormatter, useEmitAsProps, useFilter, useForwardExpose, useForwardProps, useForwardPropsEmits } from 'reka-ui';
 import { reactiveOmit, useCurrentElement, useVModel, useMediaQuery } from '@vueuse/core';
 import { twMerge } from 'tailwind-merge';
 import { clsx } from 'clsx';
@@ -162,12 +162,10 @@ const _sfc_main$3A = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         "data-slot": "alert-description",
-        class: normalizeClass(
-          unref(cn)(
-            "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
-            props.class
-          )
-        )
+        class: normalizeClass(unref(cn)(
+          "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+          props.class
+        ))
       }, [
         renderSlot(_ctx.$slots, "default")
       ], 2);
@@ -594,12 +592,10 @@ const _sfc_main$3k = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         "data-slot": "card",
-        class: normalizeClass(
-          unref(cn)(
-            "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
-            props.class
-          )
-        )
+        class: normalizeClass(unref(cn)(
+          "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+          props.class
+        ))
       }, [
         renderSlot(_ctx.$slots, "default")
       ], 2);
@@ -689,12 +685,10 @@ const _sfc_main$3f = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         "data-slot": "card-header",
-        class: normalizeClass(
-          unref(cn)(
-            "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
-            props.class
-          )
-        )
+        class: normalizeClass(unref(cn)(
+          "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+          props.class
+        ))
       }, [
         renderSlot(_ctx.$slots, "default")
       ], 2);
@@ -3438,14 +3432,12 @@ const _sfc_main$1X = /* @__PURE__ */ defineComponent({
       return withDirectives((openBlock(), createElementBlock("input", {
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(modelValue) ? modelValue.value = $event : null),
         "data-slot": "input",
-        class: normalizeClass(
-          unref(cn)(
-            "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-            "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-            "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-            props.class
-          )
-        )
+        class: normalizeClass(unref(cn)(
+          "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+          "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+          props.class
+        ))
       }, null, 2)), [
         [vModelText, unref(modelValue)]
       ]);
@@ -4288,12 +4280,10 @@ const _sfc_main$1w = /* @__PURE__ */ defineComponent({
     const props = __props;
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(
-          unref(cn)(
-            "relative [&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5 [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5",
-            props.class
-          )
-        )
+        class: normalizeClass(unref(cn)(
+          "relative [&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5 [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5",
+          props.class
+        ))
       }, [
         renderSlot(_ctx.$slots, "default")
       ], 2);
@@ -4377,12 +4367,10 @@ const _sfc_main$1t = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(NumberFieldInput), {
         "data-slot": "input",
-        class: normalizeClass(
-          unref(cn)(
-            "border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent py-1 text-center text-sm shadow-sm transition-colors focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
-            props.class
-          )
-        )
+        class: normalizeClass(unref(cn)(
+          "border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent py-1 text-center text-sm shadow-sm transition-colors focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+          props.class
+        ))
       }, null, 8, ["class"]);
     };
   }
@@ -5122,12 +5110,10 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
             default: withCtx(() => [
               createVNode(unref(_sfc_main$11)),
               createVNode(unref(SelectViewport), {
-                class: normalizeClass(
-                  unref(cn)(
-                    "p-1",
-                    _ctx.position === "popper" && "h-[var(--reka-select-trigger-height)] w-full min-w-[var(--reka-select-trigger-width)] scroll-my-1"
-                  )
-                )
+                class: normalizeClass(unref(cn)(
+                  "p-1",
+                  _ctx.position === "popper" && "h-[var(--reka-select-trigger-height)] w-full min-w-[var(--reka-select-trigger-width)] scroll-my-1"
+                ))
               }, {
                 default: withCtx(() => [
                   renderSlot(_ctx.$slots, "default")
@@ -5738,14 +5724,12 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
         "data-side": _ctx.side
       }, [
         createElementVNode("div", {
-          class: normalizeClass(
-            unref(cn)(
-              "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
-              "group-data-[collapsible=offcanvas]:w-0",
-              "group-data-[side=right]:rotate-180",
-              _ctx.variant === "floating" || _ctx.variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
-            )
-          )
+          class: normalizeClass(unref(cn)(
+            "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+            "group-data-[collapsible=offcanvas]:w-0",
+            "group-data-[side=right]:rotate-180",
+            _ctx.variant === "floating" || _ctx.variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+          ))
         }, null, 2),
         createElementVNode("div", mergeProps({
           class: unref(cn)(
@@ -5776,12 +5760,10 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         "data-slot": "sidebar-content",
         "data-sidebar": "content",
-        class: normalizeClass(
-          unref(cn)(
-            "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
-            props.class
-          )
-        )
+        class: normalizeClass(unref(cn)(
+          "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+          props.class
+        ))
       }, [
         renderSlot(_ctx.$slots, "default")
       ], 2);
@@ -5842,14 +5824,12 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
         "data-sidebar": "group-action",
         as: _ctx.as,
         "as-child": _ctx.asChild,
-        class: normalizeClass(
-          unref(cn)(
-            "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-            "after:absolute after:-inset-2 md:after:hidden",
-            "group-data-[collapsible=icon]:hidden",
-            props.class
-          )
-        )
+        class: normalizeClass(unref(cn)(
+          "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+          "after:absolute after:-inset-2 md:after:hidden",
+          "group-data-[collapsible=icon]:hidden",
+          props.class
+        ))
       }, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default")
@@ -5894,13 +5874,11 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
         "data-sidebar": "group-label",
         as: _ctx.as,
         "as-child": _ctx.asChild,
-        class: normalizeClass(
-          unref(cn)(
-            "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-            "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
-            props.class
-          )
-        )
+        class: normalizeClass(unref(cn)(
+          "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+          "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+          props.class
+        ))
       }, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default")
@@ -5962,13 +5940,11 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("main", {
         "data-slot": "sidebar-inset",
-        class: normalizeClass(
-          unref(cn)(
-            "bg-background relative flex w-full flex-1 flex-col",
-            "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
-            props.class
-          )
-        )
+        class: normalizeClass(unref(cn)(
+          "bg-background relative flex w-full flex-1 flex-col",
+          "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+          props.class
+        ))
       }, [
         renderSlot(_ctx.$slots, "default")
       ], 2);
@@ -6009,18 +5985,16 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(unref(Primitive), {
         "data-slot": "sidebar-menu-action",
         "data-sidebar": "menu-action",
-        class: normalizeClass(
-          unref(cn)(
-            "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-            "after:absolute after:-inset-2 md:after: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",
-            _ctx.showOnHover && "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
-            props.class
-          )
-        ),
+        class: normalizeClass(unref(cn)(
+          "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+          "after:absolute after:-inset-2 md:after: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",
+          _ctx.showOnHover && "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
+          props.class
+        )),
         as: _ctx.as,
         "as-child": _ctx.asChild
       }, {
@@ -6044,17 +6018,15 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         "data-slot": "sidebar-menu-badge",
         "data-sidebar": "menu-badge",
-        class: normalizeClass(
-          unref(cn)(
-            "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-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",
-            props.class
-          )
-        )
+        class: normalizeClass(unref(cn)(
+          "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-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",
+          props.class
+        ))
       }, [
         renderSlot(_ctx.$slots, "default")
       ], 2);
@@ -6352,13 +6324,11 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("ul", {
         "data-slot": "sidebar-menu-sub",
         "data-sidebar": "menu-badge",
-        class: normalizeClass(
-          unref(cn)(
-            "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
-            "group-data-[collapsible=icon]:hidden",
-            props.class
-          )
-        )
+        class: normalizeClass(unref(cn)(
+          "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+          "group-data-[collapsible=icon]:hidden",
+          props.class
+        ))
       }, [
         renderSlot(_ctx.$slots, "default")
       ], 2);
@@ -6385,16 +6355,14 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
         "as-child": _ctx.asChild,
         "data-size": _ctx.size,
         "data-active": _ctx.isActive,
-        class: normalizeClass(
-          unref(cn)(
-            "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 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",
-            "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
-            _ctx.size === "sm" && "text-xs",
-            _ctx.size === "md" && "text-sm",
-            "group-data-[collapsible=icon]:hidden",
-            props.class
-          )
-        )
+        class: normalizeClass(unref(cn)(
+          "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 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",
+          "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+          _ctx.size === "sm" && "text-xs",
+          _ctx.size === "md" && "text-sm",
+          "group-data-[collapsible=icon]:hidden",
+          props.class
+        ))
       }, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default")
@@ -6499,17 +6467,15 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
         "aria-label": "Toggle Sidebar",
         tabindex: -1,
         title: "Toggle Sidebar",
-        class: normalizeClass(
-          unref(cn)(
-            "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
-            "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
-            "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
-            "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
-            "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
-            "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
-            props.class
-          )
-        ),
+        class: normalizeClass(unref(cn)(
+          "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
+          "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+          "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+          "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+          "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+          "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+          props.class
+        )),
         onClick: _cache[0] || (_cache[0] = //@ts-ignore
         (...args) => unref(toggleSidebar) && unref(toggleSidebar)(...args))
       }, [
@@ -6722,11 +6688,9 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
         default: withCtx(() => [
           createVNode(unref(SwitchThumb), {
             "data-slot": "switch-thumb",
-            class: normalizeClass(
-              unref(cn)(
-                "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
-              )
-            )
+            class: normalizeClass(unref(cn)(
+              "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+            ))
           }, {
             default: withCtx(() => [
               renderSlot(_ctx.$slots, "thumb")
@@ -6762,14 +6726,12 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         "data-slot": "table-container",
         style: normalizeStyle([containerHeight.value, containerWidth.value, _ctx.style]),
-        class: normalizeClass(
-          unref(cn)(
-            "relative w-full",
-            containerWidth.value ? "overflow-x-auto" : "overflow-x-hidden",
-            containerHeight.value ? "overflow-y-auto" : "overflow-y-hidden",
-            props.class
-          )
-        )
+        class: normalizeClass(unref(cn)(
+          "relative w-full",
+          containerWidth.value ? "overflow-x-auto" : "overflow-x-hidden",
+          containerHeight.value ? "overflow-y-auto" : "overflow-y-hidden",
+          props.class
+        ))
       }, [
         createElementVNode("table", {
           "data-slot": "table",
@@ -6829,12 +6791,10 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("td", {
         "data-slot": "table-cell",
-        class: normalizeClass(
-          unref(cn)(
-            "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-            props.class
-          )
-        )
+        class: normalizeClass(unref(cn)(
+          "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+          props.class
+        ))
       }, [
         renderSlot(_ctx.$slots, "default")
       ], 2);
@@ -6852,9 +6812,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("tr", {
         "data-slot": "table-row",
-        class: normalizeClass(
-          unref(cn)("hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors", props.class)
-        )
+        class: normalizeClass(unref(cn)("hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors", props.class))
       }, [
         renderSlot(_ctx.$slots, "default")
       ], 2);
@@ -6923,12 +6881,10 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("th", {
         "data-slot": "table-head",
-        class: normalizeClass(
-          unref(cn)(
-            "text-muted-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-            props.class
-          )
-        )
+        class: normalizeClass(unref(cn)(
+          "text-muted-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+          props.class
+        ))
       }, [
         renderSlot(_ctx.$slots, "default")
       ], 2);
@@ -7251,12 +7207,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       return withDirectives((openBlock(), createElementBlock("textarea", {
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(modelValue) ? modelValue.value = $event : null),
         "data-slot": "textarea",
-        class: normalizeClass(
-          unref(cn)(
-            "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-            props.class
-          )
-        )
+        class: normalizeClass(unref(cn)(
+          "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          props.class
+        ))
       }, null, 2)), [
         [vModelText, unref(modelValue)]
       ]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tb-dev/vue-components",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "description": "Vue components",
   "license": "MIT",
   "type": "module",
@@ -24,12 +24,12 @@
   ],
   "dependencies": {
     "@tanstack/vue-table": "^8.21.3",
-    "@tb-dev/utils": "^7.0.9",
-    "@tb-dev/vue": "^3.0.1",
+    "@tb-dev/utils": "^7.0.10",
+    "@tb-dev/vue": "^3.1.1",
     "@vueuse/core": "^13.6.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-vue-next": "^0.534.0",
+    "lucide-vue-next": "^0.539.0",
     "reka-ui": "^2.4.1",
     "tailwind-merge": "^3.3.1",
     "tw-animate-css": "^1.3.6",
@@ -40,19 +40,16 @@
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.1.11",
-    "@tb-dev/eslint-config": "^8.0.3",
-    "@types/node": "^24.1.0",
+    "@tb-dev/eslint-config": "^8.0.4",
+    "@types/node": "^24.2.1",
     "@vitejs/plugin-vue": "^6.0.1",
-    "eslint": "^9.32.0",
-    "prettier": "^3.6.2",
-    "prettier-plugin-css-order": "^2.1.2",
-    "prettier-plugin-tailwindcss": "^0.6.14",
+    "eslint": "^9.33.0",
     "tailwindcss": "^4.1.11",
     "tslib": "^2.8.1",
-    "typescript": "~5.8.3",
-    "vite": "^7.0.6",
+    "typescript": "~5.9.2",
+    "vite": "^7.1.2",
     "vite-plugin-dts": "^4.5.4",
-    "vue-tsc": "~3.0.4"
+    "vue-tsc": "~3.0.5"
   },
   "files": [
     "dist"
@@ -70,7 +67,7 @@
   },
   "scripts": {
     "build": "vite build",
-    "format": "prettier . --write",
+    "format": "dprint fmt",
     "lint": "eslint . --config eslint.config.js",
     "release": "pnpm run build && pnpm publish",
     "type-check": "vue-tsc --noEmit"