@soybeanjs/ui 0.3.2 → 0.4.0

package/dist/index.js

@@ -1 +1 @@
-import e from"./components/alert-dialog/alert-dialog.js";import t from"./components/button/button.js";import n from"./components/alert-dialog/alert-dialog-cancel.js";import r from"./components/alert-dialog/alert-dialog-action.js";import{useDialog as i}from"./components/dialog/context.js";import{useConfigProvider as a}from"./components/config-provider/context.js";import{useToast as o}from"./components/toast/context.js";import s from"./components/button/button-icon.js";import c from"./components/toast/toast.js";import l from"./components/config-provider/config-provider.js";import u from"./components/icon/icon.js";import d from"./components/accordion/accordion.js";import f from"./components/alert/alert.js";import{SArrow as p}from"./components/arrow/index.js";import{SAspectRatio as m}from"./components/aspect-ratio/index.js";import h from"./components/avatar/avatar.js";import g from"./components/badge/badge.js";import _ from"./components/breadcrumb/breadcrumb.js";import{SBreadcrumbEllipsis as v,SBreadcrumbPage as y}from"./components/breadcrumb/index.js";import b from"./components/button/button-loading.js";import x from"./components/link/link.js";import S from"./components/button/button-link.js";import C from"./components/button/button-group.js";import w from"./components/card/card.js";import T from"./components/checkbox/checkbox.js";import E from"./components/checkbox/checkbox-group.js";import D from"./components/checkbox/checkbox-card.js";import O from"./components/checkbox/checkbox-card-group.js";import k from"./components/collapsible/collapsible.js";import{SCollapsibleContent as A,SCollapsibleTrigger as j}from"./components/collapsible/index.js";import M from"./components/kbd/kbd.js";import N from"./components/command/command.js";import P from"./components/menu/menu-option.js";import F from"./components/menu/menu-options.js";import I from"./components/context-menu/context-menu-wrapper.js";import L from"./components/context-menu/context-menu.js";import R from"./components/menu/menu-checkbox-options.js";import z from"./components/context-menu/context-menu-checkbox.js";import B from"./components/menu/menu-radio-options.js";import V from"./components/context-menu/context-menu-radio.js";import H from"./components/dialog/dialog.js";import U from"./components/dialog/dialog-close.js";import W from"./components/dialog/dialog-pure.js";import G from"./components/drawer/drawer.js";import K from"./components/drawer/drawer-close.js";import q from"./components/dropdown-menu/dropdown-menu-wrapper.js";import J from"./components/dropdown-menu/dropdown-menu.js";import Y from"./components/dropdown-menu/dropdown-menu-checkbox.js";import X from"./components/dropdown-menu/dropdown-menu-radio.js";import Z from"./components/form/form.js";import{useForm as Q}from"./components/form/use-form.js";import $ from"./components/input/input.js";import ee from"./components/label/label.js";import te from"./components/layout/layout.js";import ne from"./components/layout/layout-trigger.js";import re from"./components/list/list.js";import ie from"./components/list/list-item.js";import ae from"./components/navigation-menu/navigation-menu.js";import oe from"./components/number-input/number-input.js";import se from"./components/pagination/pagination.js";import ce from"./components/password/password.js";import le from"./components/popover/popover.js";import ue from"./components/radio-group/radio.js";import de from"./components/radio-group/radio-group.js";import fe from"./components/radio-group/radio-card.js";import pe from"./components/radio-group/radio-card-group.js";import me from"./components/segment/segment.js";import he from"./components/select/select.js";import ge from"./components/separator/separator.js";import _e from"./components/switch/switch.js";import ve from"./components/tabs/tabs.js";import ye from"./components/tag/tag.js";import be from"./components/textarea/textarea.js";import{SToastAction as xe,SToastClose as Se}from"./components/toast/index.js";import Ce from"./components/tooltip/tooltip.js";import we from"./components/tree/tree.js";import Te from"./components/tree/tree-virtualizer.js";import{STreeItem as Ee,STreeVirtualizerItem as De}from"./components/tree/index.js";import Oe from"./components/tree-menu/tree-menu.js";import ke from"./components/tree-menu/tree-menu-styled-item.js";import Ae from"./components/virtualizer/virtualizer.js";import{SVirtualizerItem as je}from"./components/virtualizer/index.js";export{d as SAccordion,f as SAlert,e as SAlertDialog,r as SAlertDialogAction,n as SAlertDialogCancel,p as SArrow,m as SAspectRatio,h as SAvatar,g as SBadge,_ as SBreadcrumb,v as SBreadcrumbEllipsis,y as SBreadcrumbPage,t as SButton,C as SButtonGroup,s as SButtonIcon,S as SButtonLink,b as SButtonLoading,w as SCard,T as SCheckbox,D as SCheckboxCard,O as SCheckboxCardGroup,E as SCheckboxGroup,k as SCollapsible,A as SCollapsibleContent,j as SCollapsibleTrigger,N as SCommand,l as SConfigProvider,L as SContextMenu,z as SContextMenuCheckbox,V as SContextMenuRadio,I as SContextMenuWrapper,H as SDialog,U as SDialogClose,W as SDialogPure,G as SDrawer,K as SDrawerClose,J as SDropdownMenu,Y as SDropdownMenuCheckbox,X as SDropdownMenuRadio,q as SDropdownMenuWrapper,Z as SForm,u as SIcon,$ as SInput,M as SKbd,ee as SLabel,te as SLayout,ne as SLayoutTrigger,x as SLink,re as SList,ie as SListItem,R as SMenuCheckboxOptions,P as SMenuOption,F as SMenuOptions,B as SMenuRadioOptions,ae as SNavigationMenu,oe as SNumberInput,se as SPagination,ce as SPassword,le as SPopover,ue as SRadio,fe as SRadioCard,pe as SRadioCardGroup,de as SRadioGroup,me as SSegment,he as SSelect,ge as SSeparator,_e as SSwitch,ve as STabs,ye as STag,be as STextarea,c as SToast,xe as SToastAction,Se as SToastClose,Ce as STooltip,we as STree,Ee as STreeItem,Oe as STreeMenu,ke as STreeMenuStyledItem,Te as STreeVirtualizer,De as STreeVirtualizerItem,Ae as SVirtualizer,je as SVirtualizerItem,a as useConfigProvider,i as useDialog,Q as useForm,o as useToast};
+import e from"./components/alert-dialog/alert-dialog.js";import t from"./components/button/button.js";import n from"./components/alert-dialog/alert-dialog-cancel.js";import r from"./components/alert-dialog/alert-dialog-action.js";import{useDialog as i}from"./components/dialog/context.js";import{useConfigProvider as a}from"./components/config-provider/context.js";import{useToast as o}from"./components/toast/context.js";import s from"./components/button/button-icon.js";import c from"./components/toast/toast.js";import l from"./components/config-provider/config-provider.js";import u from"./components/icon/icon.js";import d from"./components/accordion/accordion.js";import f from"./components/alert/alert.js";import{SArrow as p}from"./components/arrow/index.js";import{SAspectRatio as m}from"./components/aspect-ratio/index.js";import h from"./components/avatar/avatar.js";import g from"./components/badge/badge.js";import _ from"./components/breadcrumb/breadcrumb.js";import{SBreadcrumbEllipsis as v,SBreadcrumbPage as y}from"./components/breadcrumb/index.js";import b from"./components/button/button-loading.js";import x from"./components/link/link.js";import S from"./components/button/button-link.js";import C from"./components/button/button-group.js";import w from"./components/card/card.js";import T from"./components/checkbox/checkbox.js";import E from"./components/checkbox/checkbox-group.js";import D from"./components/checkbox/checkbox-card.js";import O from"./components/checkbox/checkbox-card-group.js";import k from"./components/collapsible/collapsible.js";import{SCollapsibleContent as A,SCollapsibleTrigger as j}from"./components/collapsible/index.js";import M from"./components/kbd/kbd.js";import N from"./components/command/command.js";import P from"./components/menu/menu-option.js";import F from"./components/menu/menu-options.js";import I from"./components/context-menu/context-menu-wrapper.js";import L from"./components/context-menu/context-menu.js";import R from"./components/menu/menu-checkbox-options.js";import z from"./components/context-menu/context-menu-checkbox.js";import B from"./components/menu/menu-radio-options.js";import V from"./components/context-menu/context-menu-radio.js";import H from"./components/dialog/dialog.js";import U from"./components/dialog/dialog-close.js";import W from"./components/dialog/dialog-pure.js";import G from"./components/drawer/drawer.js";import K from"./components/drawer/drawer-close.js";import q from"./components/dropdown-menu/dropdown-menu-wrapper.js";import J from"./components/dropdown-menu/dropdown-menu.js";import Y from"./components/dropdown-menu/dropdown-menu-checkbox.js";import X from"./components/dropdown-menu/dropdown-menu-radio.js";import Z from"./components/form/form.js";import{useForm as Q}from"./components/form/use-form.js";import $ from"./components/input/input.js";import ee from"./components/label/label.js";import te from"./components/layout/layout.js";import ne from"./components/layout/layout-trigger.js";import re from"./components/list/list.js";import ie from"./components/list/list-item.js";import ae from"./components/navigation-menu/navigation-menu.js";import oe from"./components/number-input/number-input.js";import se from"./components/page-tabs/page-tabs.js";import ce from"./components/pagination/pagination.js";import le from"./components/password/password.js";import ue from"./components/popover/popover.js";import de from"./components/radio-group/radio.js";import fe from"./components/radio-group/radio-group.js";import pe from"./components/radio-group/radio-card.js";import me from"./components/radio-group/radio-card-group.js";import he from"./components/segment/segment.js";import ge from"./components/select/select.js";import _e from"./components/separator/separator.js";import ve from"./components/switch/switch.js";import ye from"./components/tabs/tabs.js";import be from"./components/tag/tag.js";import xe from"./components/textarea/textarea.js";import{SToastAction as Se,SToastClose as Ce}from"./components/toast/index.js";import we from"./components/tooltip/tooltip.js";import Te from"./components/tree/tree.js";import Ee from"./components/tree/tree-virtualizer.js";import{STreeItem as De,STreeVirtualizerItem as Oe}from"./components/tree/index.js";import ke from"./components/tree-menu/tree-menu.js";import Ae from"./components/tree-menu/tree-menu-styled-item.js";import je from"./components/virtualizer/virtualizer.js";import{SVirtualizerItem as Me}from"./components/virtualizer/index.js";export{d as SAccordion,f as SAlert,e as SAlertDialog,r as SAlertDialogAction,n as SAlertDialogCancel,p as SArrow,m as SAspectRatio,h as SAvatar,g as SBadge,_ as SBreadcrumb,v as SBreadcrumbEllipsis,y as SBreadcrumbPage,t as SButton,C as SButtonGroup,s as SButtonIcon,S as SButtonLink,b as SButtonLoading,w as SCard,T as SCheckbox,D as SCheckboxCard,O as SCheckboxCardGroup,E as SCheckboxGroup,k as SCollapsible,A as SCollapsibleContent,j as SCollapsibleTrigger,N as SCommand,l as SConfigProvider,L as SContextMenu,z as SContextMenuCheckbox,V as SContextMenuRadio,I as SContextMenuWrapper,H as SDialog,U as SDialogClose,W as SDialogPure,G as SDrawer,K as SDrawerClose,J as SDropdownMenu,Y as SDropdownMenuCheckbox,X as SDropdownMenuRadio,q as SDropdownMenuWrapper,Z as SForm,u as SIcon,$ as SInput,M as SKbd,ee as SLabel,te as SLayout,ne as SLayoutTrigger,x as SLink,re as SList,ie as SListItem,R as SMenuCheckboxOptions,P as SMenuOption,F as SMenuOptions,B as SMenuRadioOptions,ae as SNavigationMenu,oe as SNumberInput,se as SPageTabs,ce as SPagination,le as SPassword,ue as SPopover,de as SRadio,pe as SRadioCard,me as SRadioCardGroup,fe as SRadioGroup,he as SSegment,ge as SSelect,_e as SSeparator,ve as SSwitch,ye as STabs,be as STag,xe as STextarea,c as SToast,Se as SToastAction,Ce as SToastClose,we as STooltip,Te as STree,De as STreeItem,ke as STreeMenu,Ae as STreeMenuStyledItem,Ee as STreeVirtualizer,Oe as STreeVirtualizerItem,je as SVirtualizer,Me as SVirtualizerItem,a as useConfigProvider,i as useDialog,Q as useForm,o as useToast};

package/dist/styles.css

@@ -100,7 +100,8 @@
 .bottom-3\.5{bottom:0.875rem;}
 .group[data-collapsible=offcanvas] .group-data-\[collapsible\=offcanvas\]\:left-\[calc\(var\(--soybean-sidebar-width\)\*-1\)\]{left:calc(var(--soybean-sidebar-width) * -1);}
 .group[data-collapsible=offcanvas] .group-data-\[collapsible\=offcanvas\]\:right-\[calc\(var\(--soybean-sidebar-width\)\*-1\)\]{right:calc(var(--soybean-sidebar-width) * -1);}
-.group[data-orientation=vertical] .group-data-\[orientation\=vertical\]\:left-full{left:100%;}
+.group[data-orientation=vertical] .group-data-\[orientation\=vertical\]\:left-full,
+.left-full{left:100%;}
 .group[data-orientation=vertical] .group-data-\[orientation\=vertical\]\:top-\[calc\(var\(--soybean-navigation-menu-indicator-size\)\/2\)\]{top:calc(var(--soybean-navigation-menu-indicator-size) / 2);}
 .group[data-orientation=vertical] .group-data-\[orientation\=vertical\]\:top-0,
 .top-0{top:0;}
@@ -148,6 +149,7 @@
 .right-3{right:0.75rem;}
 .right-3\.5{right:0.875rem;}
 .right-4{right:1rem;}
+.right-full{right:100%;}
 .top-\[50\%\],
 .top-1\/2{top:50%;}
 .top-\[calc\(1\.5rem\+4px\)\]{top:calc(1.5rem + 4px);}
@@ -180,10 +182,12 @@
 .after\:left-1\/2::after{left:50%;}
 .after\:left-full::after{left:100%;}
 .line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;}
+.data-\[active\=true\]\:z-2[data-active=true],
+.group\/item[data-active=true] .group-data-\[active\=true\]\/item\:z-2,
+.z-2{z-index:2;}
 .z-1{z-index:1;}
 .z-10{z-index:10;}
 .z-100{z-index:100;}
-.z-2{z-index:2;}
 .z-20{z-index:20;}
 .z-3{z-index:3;}
 .z-50{z-index:50;}
@@ -353,7 +357,8 @@
 .h-\[--soybean-select-trigger-height\]{height:var(--soybean-select-trigger-height);}
 .h-\[--soybean-tabs-indicator-size\]{height:var(--soybean-tabs-indicator-size);}
 .h-\[calc\(100\%-8px\)\]{height:calc(100% - 8px);}
-.h-0\.125rem{height:0.125rem;}
+.h-0\.125rem,
+.h-0\.5{height:0.125rem;}
 .h-0\.5em{height:0.5em;}
 .h-1\.25{height:0.3125rem;}
 .h-1\.5{height:0.375rem;}
@@ -387,6 +392,12 @@
 .max-h-screen{max-height:100vh;}
 .max-w-2xl{max-width:42rem;}
 .max-w-3xl{max-width:48rem;}
+.max-w-50{max-width:12.5rem;}
+.max-w-55{max-width:13.75rem;}
+.max-w-60{max-width:15rem;}
+.max-w-65{max-width:16.25rem;}
+.max-w-70{max-width:17.5rem;}
+.max-w-75{max-width:18.75rem;}
 .max-w-lg{max-width:32rem;}
 .max-w-md{max-width:28rem;}
 .max-w-xl{max-width:36rem;}
@@ -684,6 +695,7 @@
 .rounded-t-3{border-top-left-radius:0.75rem;border-top-right-radius:0.75rem;}
 .rounded-t-3\.5{border-top-left-radius:0.875rem;border-top-right-radius:0.875rem;}
 .rounded-t-4{border-top-left-radius:1rem;border-top-right-radius:1rem;}
+.rounded-t-md{border-top-left-radius:calc(var(--radius) - 2px);border-top-right-radius:calc(var(--radius) - 2px);}
 .first\:\[\&\>\*\]\:rd-b-0>*:first-child{border-bottom-left-radius:0;border-bottom-right-radius:0;}
 .first\:\[\&\>\*\]\:rd-r-0>*:first-child{border-top-right-radius:0;border-bottom-right-radius:0;}
 .first\:rounded-l-md:first-child{border-top-left-radius:calc(var(--radius) - 2px);border-bottom-left-radius:calc(var(--radius) - 2px);}
@@ -743,7 +755,8 @@
 .data-\[state\=checked\]\:bg-primary[data-state=checked],
 .data-\[state\=indeterminate\]\:bg-primary[data-state=indeterminate],
 .group[data-state=active] .group-data-\[state\=active\]\:bg-primary,
-.group[data-state=completed] .group-data-\[state\=completed\]\:bg-primary{--un-bg-opacity:1;background-color:hsl(var(--primary) / var(--un-bg-opacity)) /* hsl(var(--primary)) */;}
+.group[data-state=completed] .group-data-\[state\=completed\]\:bg-primary,
+.group\/item[data-active=true] .group-data-\[active\=true\]\/item\:bg-primary{--un-bg-opacity:1;background-color:hsl(var(--primary) / var(--un-bg-opacity)) /* hsl(var(--primary)) */;}
 .bg-primary-100{--un-bg-opacity:1;background-color:hsl(var(--primary-100) / var(--un-bg-opacity)) /* hsl(var(--primary-100)) */;}
 .bg-primary\/10,
 .data-\[active\=true\]\:bg-primary\/10[data-active=true],
@@ -774,6 +787,7 @@
 .bg-warning\/20{background-color:hsl(var(--warning) / 0.2) /* hsl(var(--warning)) */;}
 .data-\[active\]\:bg-accent\/50[data-active],
 .data-\[state\=open\]\:bg-accent\/50[data-state=open]{background-color:hsl(var(--accent) / 0.5) /* hsl(var(--accent)) */;}
+.data-\[active\=true\]\:bg-primary-50[data-active=true]{--un-bg-opacity:1;background-color:hsl(var(--primary-50) / var(--un-bg-opacity)) /* hsl(var(--primary-50)) */;}
 .data-\[state\=unchecked\]\:bg-input[data-state=unchecked]{--un-bg-opacity:var(--input-alpha, 1);background-color:hsl(var(--input) / var(--un-bg-opacity)) /* hsl(var(--input) / var(--input-alpha, 1)) */;}
 .data-\[active\=false\]\:hover\:bg-accent:hover[data-active=false]{--un-bg-opacity:1;background-color:hsl(var(--accent) / var(--un-bg-opacity)) /* hsl(var(--accent)) */;}
 .data-\[active\=false\]\:hover\:bg-sidebar-accent:hover[data-active=false]{--un-bg-opacity:1;background-color:hsl(var(--sidebar-accent) / var(--un-bg-opacity)) /* hsl(var(--sidebar-accent)) */;}
@@ -783,6 +797,8 @@
 .data-\[selected\]\:hover\:bg-transparent:hover[data-selected]{background-color:transparent /* transparent */;}
 .data-\[state\=on\]\:hover\:bg-accent:hover[data-state=on]{--un-bg-opacity:1;background-color:hsl(var(--accent) / var(--un-bg-opacity)) /* hsl(var(--accent)) */;}
 .group[data-state=collapsed] .group-data-\[state\=collapsed\]\:hover\:bg-sidebar-accent:hover{--un-bg-opacity:1;background-color:hsl(var(--sidebar-accent) / var(--un-bg-opacity)) /* hsl(var(--sidebar-accent)) */;}
+.group\/item[data-active=false] .group-data-\[active\=false\]\/item\:hover\:bg-accent-foreground\/20:hover{background-color:hsl(var(--accent-foreground) / 0.2) /* hsl(var(--accent-foreground)) */;}
+.group\/item[data-active=true] .group-data-\[active\=true\]\/item\:hover\:bg-primary\/50:hover{background-color:hsl(var(--primary) / 0.5) /* hsl(var(--primary)) */;}
 .hover\:after\:bg-sidebar-border:hover::after{--un-bg-opacity:var(--sidebar-border-alpha, 1);background-color:hsl(var(--sidebar-border) / var(--un-bg-opacity)) /* hsl(var(--sidebar-border) / var(--sidebar-border-alpha, 1)) */;}
 .hover\:bg-accent-foreground\/10:hover{background-color:hsl(var(--accent-foreground) / 0.1) /* hsl(var(--accent-foreground)) */;}
 .hover\:bg-accent:hover{--un-bg-opacity:1;background-color:hsl(var(--accent) / var(--un-bg-opacity)) /* hsl(var(--accent)) */;}
@@ -826,6 +842,9 @@
 .data-\[selected\]\:active\:bg-primary\/20:active[data-selected]{background-color:hsl(var(--primary) / 0.2) /* hsl(var(--primary)) */;}
 .file\:bg-transparent::file-selector-button{background-color:transparent /* transparent */;}
 .fill-popover{--un-fill-opacity:1;fill:hsl(var(--popover) / var(--un-fill-opacity)) /* hsl(var(--popover)) */;}
+.fill-transparent{fill:transparent /* transparent */;}
+.group\/item[data-active=true] .group-data-\[active\=true\]\/item\:fill-primary-50{--un-fill-opacity:1;fill:hsl(var(--primary-50) / var(--un-fill-opacity)) /* hsl(var(--primary-50)) */;}
+.group\/item:hover .group-hover\/item\:fill-accent{--un-fill-opacity:1;fill:hsl(var(--accent) / var(--un-fill-opacity)) /* hsl(var(--accent)) */;}
 .stroke-border{--un-stroke-opacity:var(--border-alpha, 1);stroke:hsl(var(--border) / var(--un-stroke-opacity)) /* hsl(var(--border) / var(--border-alpha, 1)) */;}
 .object-cover{object-fit:cover;}
 .group[data-state=collapsed] .group-data-\[state\=collapsed\]\:p-0,
@@ -1020,6 +1039,7 @@
 .hover\:text-foreground:hover{--un-text-opacity:1;color:hsl(var(--foreground) / var(--un-text-opacity)) /* hsl(var(--foreground)) */;}
 .hover\:text-info:hover{--un-text-opacity:1;color:hsl(var(--info) / var(--un-text-opacity)) /* hsl(var(--info)) */;}
 .hover\:text-muted-foreground:hover{--un-text-opacity:1;color:hsl(var(--muted-foreground) / var(--un-text-opacity)) /* hsl(var(--muted-foreground)) */;}
+.hover\:text-muted:hover{--un-text-opacity:1;color:hsl(var(--muted) / var(--un-text-opacity)) /* hsl(var(--muted)) */;}
 .hover\:text-primary:hover{--un-text-opacity:1;color:hsl(var(--primary) / var(--un-text-opacity)) /* hsl(var(--primary)) */;}
 .hover\:text-secondary-foreground:hover{--un-text-opacity:1;color:hsl(var(--secondary-foreground) / var(--un-text-opacity)) /* hsl(var(--secondary-foreground)) */;}
 .hover\:text-success:hover{--un-text-opacity:1;color:hsl(var(--success) / var(--un-text-opacity)) /* hsl(var(--success)) */;}

package/dist/variants/alert.d.ts

@@ -1,8 +1,8 @@
-import * as tailwind_variants9 from "tailwind-variants";
+import * as tailwind_variants0 from "tailwind-variants";
 import { VariantProps } from "tailwind-variants";
 
 //#region src/variants/alert.d.ts
-declare const alertVariants: tailwind_variants9.TVReturnType<{
+declare const alertVariants: tailwind_variants0.TVReturnType<{
   color: {
     primary: {
       root: string;
@@ -196,7 +196,7 @@ declare const alertVariants: tailwind_variants9.TVReturnType<{
   title: string;
   description: string;
   close: string;
-}, tailwind_variants9.TVReturnType<{
+}, tailwind_variants0.TVReturnType<{
   color: {
     primary: {
       root: string;

package/dist/variants/badge.d.ts

@@ -1,8 +1,8 @@
-import * as tailwind_variants3 from "tailwind-variants";
+import * as tailwind_variants5 from "tailwind-variants";
 import { VariantProps } from "tailwind-variants";
 
 //#region src/variants/badge.d.ts
-declare const badgeVariants: tailwind_variants3.TVReturnType<{
+declare const badgeVariants: tailwind_variants5.TVReturnType<{
   color: {
     primary: {
       content: string;
@@ -130,7 +130,7 @@ declare const badgeVariants: tailwind_variants3.TVReturnType<{
 }, {
   root: string;
   content: string;
-}, tailwind_variants3.TVReturnType<{
+}, tailwind_variants5.TVReturnType<{
   color: {
     primary: {
       content: string;

package/dist/variants/button.d.ts

@@ -1,8 +1,8 @@
-import * as tailwind_variants0 from "tailwind-variants";
+import * as tailwind_variants7 from "tailwind-variants";
 import { VariantProps } from "tailwind-variants";
 
 //#region src/variants/button.d.ts
-declare const buttonVariants: tailwind_variants0.TVReturnType<{
+declare const buttonVariants: tailwind_variants7.TVReturnType<{
   color: {
     primary: string;
     destructive: string;
@@ -92,7 +92,7 @@ declare const buttonVariants: tailwind_variants0.TVReturnType<{
     true: string;
     false: string;
   };
-}, undefined, tailwind_variants0.TVReturnType<{
+}, undefined, tailwind_variants7.TVReturnType<{
   color: {
     primary: string;
     destructive: string;

package/dist/variants/checkbox.d.ts

@@ -1,8 +1,8 @@
-import * as tailwind_variants5 from "tailwind-variants";
+import * as tailwind_variants1 from "tailwind-variants";
 import { VariantProps } from "tailwind-variants";
 
 //#region src/variants/checkbox.d.ts
-declare const checkboxVariants: tailwind_variants5.TVReturnType<{
+declare const checkboxVariants: tailwind_variants1.TVReturnType<{
   color: {
     primary: {
       control: string;
@@ -164,7 +164,7 @@ declare const checkboxVariants: tailwind_variants5.TVReturnType<{
   control: string[];
   indicator: string;
   label: string;
-}, tailwind_variants5.TVReturnType<{
+}, tailwind_variants1.TVReturnType<{
   color: {
     primary: {
       control: string;

package/dist/variants/page-tabs.d.ts

@@ -0,0 +1,183 @@
+import * as tailwind_variants13 from "tailwind-variants";
+import { VariantProps } from "tailwind-variants";
+
+//#region src/variants/page-tabs.d.ts
+declare const pageTabsVariants: tailwind_variants13.TVReturnType<{
+  size: {
+    xs: {
+      root: string;
+      item: string;
+      itemText: string;
+    };
+    sm: {
+      root: string;
+      item: string;
+      itemText: string;
+    };
+    md: {
+      root: string;
+      item: string;
+      itemText: string;
+      chromeBgLeft: string;
+      chromeBgRight: string;
+    };
+    lg: {
+      root: string;
+      item: string;
+      itemText: string;
+    };
+    xl: {
+      root: string;
+      item: string;
+      itemText: string;
+    };
+    '2xl': {
+      root: string;
+      item: string;
+      itemText: string;
+    };
+  };
+  variant: {
+    chrome: {
+      root: string;
+      item: string;
+    };
+    card: {
+      root: string;
+      item: string;
+    };
+    slider: {
+      root: string;
+      item: string;
+    };
+  };
+}, {
+  root: string;
+  item: string[];
+  itemText: string;
+  close: string[];
+  pin: string;
+  chromeBgLeft: string[];
+  chromeBgRight: string[];
+  sliderIndicator: string;
+}, undefined, {
+  size: {
+    xs: {
+      root: string;
+      item: string;
+      itemText: string;
+    };
+    sm: {
+      root: string;
+      item: string;
+      itemText: string;
+    };
+    md: {
+      root: string;
+      item: string;
+      itemText: string;
+      chromeBgLeft: string;
+      chromeBgRight: string;
+    };
+    lg: {
+      root: string;
+      item: string;
+      itemText: string;
+    };
+    xl: {
+      root: string;
+      item: string;
+      itemText: string;
+    };
+    '2xl': {
+      root: string;
+      item: string;
+      itemText: string;
+    };
+  };
+  variant: {
+    chrome: {
+      root: string;
+      item: string;
+    };
+    card: {
+      root: string;
+      item: string;
+    };
+    slider: {
+      root: string;
+      item: string;
+    };
+  };
+}, {
+  root: string;
+  item: string[];
+  itemText: string;
+  close: string[];
+  pin: string;
+  chromeBgLeft: string[];
+  chromeBgRight: string[];
+  sliderIndicator: string;
+}, tailwind_variants13.TVReturnType<{
+  size: {
+    xs: {
+      root: string;
+      item: string;
+      itemText: string;
+    };
+    sm: {
+      root: string;
+      item: string;
+      itemText: string;
+    };
+    md: {
+      root: string;
+      item: string;
+      itemText: string;
+      chromeBgLeft: string;
+      chromeBgRight: string;
+    };
+    lg: {
+      root: string;
+      item: string;
+      itemText: string;
+    };
+    xl: {
+      root: string;
+      item: string;
+      itemText: string;
+    };
+    '2xl': {
+      root: string;
+      item: string;
+      itemText: string;
+    };
+  };
+  variant: {
+    chrome: {
+      root: string;
+      item: string;
+    };
+    card: {
+      root: string;
+      item: string;
+    };
+    slider: {
+      root: string;
+      item: string;
+    };
+  };
+}, {
+  root: string;
+  item: string[];
+  itemText: string;
+  close: string[];
+  pin: string;
+  chromeBgLeft: string[];
+  chromeBgRight: string[];
+  sliderIndicator: string;
+}, undefined, unknown, unknown, undefined>>;
+type PageTabsVariants = VariantProps<typeof pageTabsVariants>;
+type PageTabsVariant = NonNullable<PageTabsVariants['variant']>;
+//#endregion
+export { PageTabsVariant };

package/dist/variants/page-tabs.js

@@ -0,0 +1 @@
+import{tv as e}from"tailwind-variants";const t=e({slots:{root:`flex`,item:[`group/item relative flex items-center cursor-pointer select-none outline-none`,`data-[active=true]:bg-primary-50 data-[active=true]:text-primary data-[active=true]:z-2`,`data-[active=false]:hover:bg-accent data-[active=false]:focus:bg-accent`],itemText:`grow truncate`,close:[`rounded-full hover:text-muted group-data-[active=true]/item:hover:bg-primary/50`,`group-data-[active=false]/item:hover:bg-accent-foreground/20`],pin:``,chromeBgLeft:[`absolute right-full bottom-0 fill-transparent`,`group-hover/item:fill-accent group-data-[active=true]/item:fill-primary-50 group-data-[active=true]/item:z-2`],chromeBgRight:[`absolute left-full bottom-0 fill-transparent`,`group-hover/item:fill-accent group-data-[active=true]/item:fill-primary-50 group-data-[active=true]/item:z-2`],sliderIndicator:`absolute bottom-0 left-0 w-full h-0.5 group-data-[active=true]/item:bg-primary`},variants:{size:{xs:{root:`text-2xs`,item:`gap-2 px-1 py-1`,itemText:`max-w-50`},sm:{root:`text-xs`,item:`gap-2.5 px-1.5 py-1`,itemText:`max-w-55`},md:{root:`text-sm`,item:`gap-3 px-2 py-1.5`,itemText:`max-w-60`,chromeBgLeft:`w-2 h-2`,chromeBgRight:`w-2 h-2`},lg:{root:`text-base`,item:`gap-3.5 px-2.5 py-1.5`,itemText:`max-w-65`},xl:{root:`text-lg`,item:`gap-4 px-3 py-2`,itemText:`max-w-70`},"2xl":{root:`text-xl`,item:`gap-4.5 px-3.5 py-2.5`,itemText:`max-w-75`}},variant:{chrome:{root:`items-end`,item:`rounded-t-md`},card:{root:`items-center gap-2`,item:`rounded-md shadow-sm border border-border`},slider:{root:`items-end`,item:`rounded-t-md`}}},defaultVariants:{size:`md`,variant:`chrome`}});export{t as pageTabsVariants};

package/dist/variants/pagination.d.ts

@@ -1,8 +1,8 @@
-import * as tailwind_variants13 from "tailwind-variants";
+import * as tailwind_variants15 from "tailwind-variants";
 import { VariantProps } from "tailwind-variants";
 
 //#region src/variants/pagination.d.ts
-declare const paginationVariants: tailwind_variants13.TVReturnType<{
+declare const paginationVariants: tailwind_variants15.TVReturnType<{
   size: {
     xs: {
       list: string;
@@ -150,7 +150,7 @@ declare const paginationVariants: tailwind_variants13.TVReturnType<{
   ellipsis: string;
   button: string[];
   navigationButton: string[];
-}, tailwind_variants13.TVReturnType<{
+}, tailwind_variants15.TVReturnType<{
   size: {
     xs: {
       list: string;

package/dist/variants/separator.d.ts

@@ -1,8 +1,8 @@
-import * as tailwind_variants31 from "tailwind-variants";
+import * as tailwind_variants23 from "tailwind-variants";
 import { VariantProps } from "tailwind-variants";
 
 //#region src/variants/separator.d.ts
-declare const separatorVariants: tailwind_variants31.TVReturnType<{
+declare const separatorVariants: tailwind_variants23.TVReturnType<{
   size: {
     xs: {
       label: string;
@@ -114,7 +114,7 @@ declare const separatorVariants: tailwind_variants31.TVReturnType<{
 }, {
   root: string;
   label: string;
-}, tailwind_variants31.TVReturnType<{
+}, tailwind_variants23.TVReturnType<{
   size: {
     xs: {
       label: string;

package/dist/variants/switch.d.ts

@@ -1,8 +1,8 @@
-import * as tailwind_variants23 from "tailwind-variants";
+import * as tailwind_variants27 from "tailwind-variants";
 import { VariantProps } from "tailwind-variants";
 
 //#region src/variants/switch.d.ts
-declare const switchVariants: tailwind_variants23.TVReturnType<{
+declare const switchVariants: tailwind_variants27.TVReturnType<{
   color: {
     primary: {
       control: string;
@@ -136,7 +136,7 @@ declare const switchVariants: tailwind_variants23.TVReturnType<{
   root: string;
   control: string[];
   thumb: string;
-}, tailwind_variants23.TVReturnType<{
+}, tailwind_variants27.TVReturnType<{
   color: {
     primary: {
       control: string;

package/dist/variants/tag.d.ts

@@ -1,8 +1,8 @@
-import * as tailwind_variants15 from "tailwind-variants";
+import * as tailwind_variants25 from "tailwind-variants";
 import { VariantProps } from "tailwind-variants";
 
 //#region src/variants/tag.d.ts
-declare const tagVariants: tailwind_variants15.TVReturnType<{
+declare const tagVariants: tailwind_variants25.TVReturnType<{
   color: {
     primary: string;
     destructive: string;
@@ -64,7 +64,7 @@ declare const tagVariants: tailwind_variants15.TVReturnType<{
     auto: string;
     rounded: string;
   };
-}, undefined, tailwind_variants15.TVReturnType<{
+}, undefined, tailwind_variants25.TVReturnType<{
   color: {
     primary: string;
     destructive: string;

package/dist/variants/textarea.d.ts

@@ -1,8 +1,8 @@
-import * as tailwind_variants25 from "tailwind-variants";
+import * as tailwind_variants33 from "tailwind-variants";
 import { VariantProps } from "tailwind-variants";
 
 //#region src/variants/textarea.d.ts
-declare const textareaVariants: tailwind_variants25.TVReturnType<{
+declare const textareaVariants: tailwind_variants33.TVReturnType<{
   size: {
     xs: {
       root: string;
@@ -118,7 +118,7 @@ declare const textareaVariants: tailwind_variants25.TVReturnType<{
   control: string[];
   counter: string;
   clearable: string;
-}, tailwind_variants25.TVReturnType<{
+}, tailwind_variants33.TVReturnType<{
   size: {
     xs: {
       root: string;

package/dist/variants/toast.d.ts

@@ -1,9 +1,9 @@
-import * as tailwind_variants27 from "tailwind-variants";
+import * as tailwind_variants29 from "tailwind-variants";
 import { VariantProps } from "tailwind-variants";
 
 //#region src/variants/toast.d.ts
 
-declare const toastViewportVariants: tailwind_variants27.TVReturnType<{
+declare const toastViewportVariants: tailwind_variants29.TVReturnType<{
   size: {
     xs: string;
     sm: string;
@@ -37,7 +37,7 @@ declare const toastViewportVariants: tailwind_variants27.TVReturnType<{
     'bottom-left': string;
     'bottom-right': string;
   };
-}, undefined, tailwind_variants27.TVReturnType<{
+}, undefined, tailwind_variants29.TVReturnType<{
   size: {
     xs: string;
     sm: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soybeanjs/ui",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "SoybeanUI is built on top of SoybeanHeadless, providing a collection of styled components for Vue 3.",
   "homepage": "https://github.com/soybeanjs/soybean-ui",
   "bugs": {
@@ -55,7 +55,7 @@
     "tailwind-variants": "^3.2.2",
     "valibot": "^1.2.0",
     "zod": "^4.3.6",
-    "@soybeanjs/headless": "^0.3.2"
+    "@soybeanjs/headless": "^0.4.0"
   },
   "devDependencies": {
     "@soybeanjs/cli": "^1.4.4",
@@ -75,13 +75,15 @@
     "typescript": "^5.9.3",
     "unocss": "^66.6.0",
     "unocss-preset-animations": "^1.3.0",
+    "unplugin-auto-import": "^21.0.0",
     "unplugin-vue": "^7.1.1",
     "unplugin-vue-components": "^31.0.0",
     "unplugin-vue-jsx": "^0.8.1",
     "vite": "^7.3.1",
+    "vite-plugin-vue-meta-layouts": "^0.6.1",
     "vitest": "^4.0.18",
     "vue": "^3.5.27",
-    "vue-router": "^4.6.4",
+    "vue-router": "^5.0.0",
     "vue-tsc": "^3.2.4"
   },
   "simple-git-hooks": {