@soybeanjs/ui 0.3.3 → 0.4.1

package/dist/components/menu/menu-option.vue.d.ts

@@ -1,18 +1,18 @@
 import { MenuOptionData, MenuOptionProps } from "./types.js";
-import * as vue233 from "vue";
-import * as _soybeanjs_headless149 from "@soybeanjs/headless";
+import * as vue208 from "vue";
+import * as _soybeanjs_headless117 from "@soybeanjs/headless";
 import { DefinedValue } from "@soybeanjs/headless";
 
 //#region src/components/menu/menu-option.vue.d.ts
 declare const __VLS_export: <T extends DefinedValue = DefinedValue>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-  props: vue233.PublicProps & __VLS_PrettifyLocal<MenuOptionProps<T> & {
+  props: vue208.PublicProps & __VLS_PrettifyLocal<MenuOptionProps<T> & {
     onSelect?: ((item: MenuOptionData<T>, event: Event) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
     onEntryFocus?: ((event: Event) => any) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
-    onPointerDownOutside?: ((event: _soybeanjs_headless149.PointerDownOutsideEvent) => any) | undefined;
-    onFocusOutside?: ((event: _soybeanjs_headless149.FocusOutsideEvent) => any) | undefined;
-    onInteractOutside?: ((event: _soybeanjs_headless149.PointerDownOutsideEvent | _soybeanjs_headless149.FocusOutsideEvent) => any) | undefined;
+    onPointerDownOutside?: ((event: _soybeanjs_headless117.PointerDownOutsideEvent) => any) | undefined;
+    onFocusOutside?: ((event: _soybeanjs_headless117.FocusOutsideEvent) => any) | undefined;
+    onInteractOutside?: ((event: _soybeanjs_headless117.PointerDownOutsideEvent | _soybeanjs_headless117.FocusOutsideEvent) => any) | undefined;
     onOpenAutoFocus?: ((event: Event) => any) | undefined;
     onCloseAutoFocus?: ((event: Event) => any) | undefined;
   }> & (typeof globalThis extends {
@@ -38,8 +38,8 @@ declare const __VLS_export: <T extends DefinedValue = DefinedValue>(__VLS_props:
       item: MenuOptionData<T>;
     }) => any;
   };
-  emit: ((evt: "select", item: MenuOptionData<T>, event: Event) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "entryFocus", event: Event) => void) & ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: _soybeanjs_headless149.PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: _soybeanjs_headless149.FocusOutsideEvent) => void) & ((evt: "interactOutside", event: _soybeanjs_headless149.PointerDownOutsideEvent | _soybeanjs_headless149.FocusOutsideEvent) => void) & ((evt: "openAutoFocus", event: Event) => void) & ((evt: "closeAutoFocus", event: Event) => void);
-}>) => vue233.VNode & {
+  emit: ((evt: "select", item: MenuOptionData<T>, event: Event) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "entryFocus", event: Event) => void) & ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: _soybeanjs_headless117.PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: _soybeanjs_headless117.FocusOutsideEvent) => void) & ((evt: "interactOutside", event: _soybeanjs_headless117.PointerDownOutsideEvent | _soybeanjs_headless117.FocusOutsideEvent) => void) & ((evt: "openAutoFocus", event: Event) => void) & ((evt: "closeAutoFocus", event: Event) => void);
+}>) => vue208.VNode & {
   __ctx?: Awaited<typeof __VLS_setup>;
 };
 declare const _default: typeof __VLS_export;

package/dist/components/menu/menu-options.vue.d.ts

@@ -1,18 +1,18 @@
 import { MenuOptionData, MenuOptionsProps } from "./types.js";
-import * as vue235 from "vue";
-import * as _soybeanjs_headless157 from "@soybeanjs/headless";
+import * as vue210 from "vue";
+import * as _soybeanjs_headless125 from "@soybeanjs/headless";
 import { DefinedValue } from "@soybeanjs/headless";
 
 //#region src/components/menu/menu-options.vue.d.ts
 declare const __VLS_export: <T extends DefinedValue = DefinedValue, S extends MenuOptionData<T> = MenuOptionData<T>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-  props: vue235.PublicProps & __VLS_PrettifyLocal<MenuOptionsProps<T, S> & {
+  props: vue210.PublicProps & __VLS_PrettifyLocal<MenuOptionsProps<T, S> & {
     onSelect?: ((item: S, event: Event) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
     onEntryFocus?: ((event: Event) => any) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
-    onPointerDownOutside?: ((event: _soybeanjs_headless157.PointerDownOutsideEvent) => any) | undefined;
-    onFocusOutside?: ((event: _soybeanjs_headless157.FocusOutsideEvent) => any) | undefined;
-    onInteractOutside?: ((event: _soybeanjs_headless157.PointerDownOutsideEvent | _soybeanjs_headless157.FocusOutsideEvent) => any) | undefined;
+    onPointerDownOutside?: ((event: _soybeanjs_headless125.PointerDownOutsideEvent) => any) | undefined;
+    onFocusOutside?: ((event: _soybeanjs_headless125.FocusOutsideEvent) => any) | undefined;
+    onInteractOutside?: ((event: _soybeanjs_headless125.PointerDownOutsideEvent | _soybeanjs_headless125.FocusOutsideEvent) => any) | undefined;
     onOpenAutoFocus?: ((event: Event) => any) | undefined;
     onCloseAutoFocus?: ((event: Event) => any) | undefined;
   }> & (typeof globalThis extends {
@@ -38,8 +38,8 @@ declare const __VLS_export: <T extends DefinedValue = DefinedValue, S extends Me
       item: MenuOptionData<T>;
     }) => any;
   };
-  emit: ((evt: "select", item: S, event: Event) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "entryFocus", event: Event) => void) & ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: _soybeanjs_headless157.PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: _soybeanjs_headless157.FocusOutsideEvent) => void) & ((evt: "interactOutside", event: _soybeanjs_headless157.PointerDownOutsideEvent | _soybeanjs_headless157.FocusOutsideEvent) => void) & ((evt: "openAutoFocus", event: Event) => void) & ((evt: "closeAutoFocus", event: Event) => void);
-}>) => vue235.VNode & {
+  emit: ((evt: "select", item: S, event: Event) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "entryFocus", event: Event) => void) & ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: _soybeanjs_headless125.PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: _soybeanjs_headless125.FocusOutsideEvent) => void) & ((evt: "interactOutside", event: _soybeanjs_headless125.PointerDownOutsideEvent | _soybeanjs_headless125.FocusOutsideEvent) => void) & ((evt: "openAutoFocus", event: Event) => void) & ((evt: "closeAutoFocus", event: Event) => void);
+}>) => vue210.VNode & {
   __ctx?: Awaited<typeof __VLS_setup>;
 };
 declare const _default: typeof __VLS_export;

package/dist/components/menu/menu-radio-options.vue.d.ts

@@ -1,10 +1,10 @@
 import { MenuRadioOptionData, MenuRadioOptionsProps } from "./types.js";
-import * as vue229 from "vue";
+import * as vue214 from "vue";
 import { AcceptableBooleanValue } from "@soybeanjs/headless";
 
 //#region src/components/menu/menu-radio-options.vue.d.ts
 declare const __VLS_export: <T extends AcceptableBooleanValue = AcceptableBooleanValue, S extends MenuRadioOptionData<T> = MenuRadioOptionData<T>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-  props: vue229.PublicProps & __VLS_PrettifyLocal<MenuRadioOptionsProps<T, S> & {
+  props: vue214.PublicProps & __VLS_PrettifyLocal<MenuRadioOptionsProps<T, S> & {
     onSelect?: ((item: S, event: Event) => any) | undefined;
     "onUpdate:modelValue"?: ((payload: NonNullable<T>) => any) | undefined;
   }> & (typeof globalThis extends {
@@ -19,7 +19,7 @@ declare const __VLS_export: <T extends AcceptableBooleanValue = AcceptableBoolea
     'item-indicator-icon': (props: S) => any;
   };
   emit: ((evt: "select", item: S, event: Event) => void) & ((evt: "update:modelValue", payload: NonNullable<T>) => void);
-}>) => vue229.VNode & {
+}>) => vue214.VNode & {
   __ctx?: Awaited<typeof __VLS_setup>;
 };
 declare const _default: typeof __VLS_export;

package/dist/components/navigation-menu/navigation-menu.vue.d.ts

@@ -1,6 +1,6 @@
 import { NavigationMenuOptionData, NavigationMenuProps } from "./types.js";
-import * as vue120 from "vue";
-import * as _soybeanjs_headless78 from "@soybeanjs/headless";
+import * as vue193 from "vue";
+import * as _soybeanjs_headless109 from "@soybeanjs/headless";
 
 //#region src/components/navigation-menu/navigation-menu.vue.d.ts
 type Slots = {
@@ -25,25 +25,25 @@ type Slots = {
   }) => any;
 };
 type __VLS_Slots = Slots;
-declare const __VLS_base: vue120.DefineComponent<NavigationMenuProps, {}, {}, {}, {}, vue120.ComponentOptionsMixin, vue120.ComponentOptionsMixin, {
+declare const __VLS_base: vue193.DefineComponent<NavigationMenuProps, {}, {}, {}, {}, vue193.ComponentOptionsMixin, vue193.ComponentOptionsMixin, {
   select: (payload: CustomEvent<{
     originalEvent: Event;
   }>) => any;
   "update:modelValue": (value: string) => any;
   escapeKeyDown: (event: KeyboardEvent) => any;
-  pointerDownOutside: (event: _soybeanjs_headless78.PointerDownOutsideEvent) => any;
-  focusOutside: (event: _soybeanjs_headless78.FocusOutsideEvent) => any;
-  interactOutside: (event: _soybeanjs_headless78.PointerDownOutsideEvent | _soybeanjs_headless78.FocusOutsideEvent) => any;
-}, string, vue120.PublicProps, Readonly<NavigationMenuProps> & Readonly<{
+  pointerDownOutside: (event: _soybeanjs_headless109.PointerDownOutsideEvent) => any;
+  focusOutside: (event: _soybeanjs_headless109.FocusOutsideEvent) => any;
+  interactOutside: (event: _soybeanjs_headless109.PointerDownOutsideEvent | _soybeanjs_headless109.FocusOutsideEvent) => any;
+}, string, vue193.PublicProps, Readonly<NavigationMenuProps> & Readonly<{
   onSelect?: ((payload: CustomEvent<{
     originalEvent: Event;
   }>) => any) | undefined;
   "onUpdate:modelValue"?: ((value: string) => any) | undefined;
   onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
-  onPointerDownOutside?: ((event: _soybeanjs_headless78.PointerDownOutsideEvent) => any) | undefined;
-  onFocusOutside?: ((event: _soybeanjs_headless78.FocusOutsideEvent) => any) | undefined;
-  onInteractOutside?: ((event: _soybeanjs_headless78.PointerDownOutsideEvent | _soybeanjs_headless78.FocusOutsideEvent) => any) | undefined;
-}>, {}, {}, {}, {}, string, vue120.ComponentProvideOptions, false, {}, any>;
+  onPointerDownOutside?: ((event: _soybeanjs_headless109.PointerDownOutsideEvent) => any) | undefined;
+  onFocusOutside?: ((event: _soybeanjs_headless109.FocusOutsideEvent) => any) | undefined;
+  onInteractOutside?: ((event: _soybeanjs_headless109.PointerDownOutsideEvent | _soybeanjs_headless109.FocusOutsideEvent) => any) | undefined;
+}>, {}, {}, {}, {}, string, vue193.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 type __VLS_WithSlots<T, S> = T & {

package/dist/components/number-input/number-input.vue.d.ts

@@ -1,5 +1,5 @@
 import { NumberInputProps } from "./types.js";
-import * as vue237 from "vue";
+import * as vue219 from "vue";
 
 //#region src/components/number-input/number-input.vue.d.ts
 declare var __VLS_10: {}, __VLS_24: {}, __VLS_32: {}, __VLS_45: {};
@@ -12,11 +12,11 @@ type __VLS_Slots = {} & {
 } & {
   increment?: (props: typeof __VLS_45) => any;
 };
-declare const __VLS_base: vue237.DefineComponent<NumberInputProps, {}, {}, {}, {}, vue237.ComponentOptionsMixin, vue237.ComponentOptionsMixin, {
+declare const __VLS_base: vue219.DefineComponent<NumberInputProps, {}, {}, {}, {}, vue219.ComponentOptionsMixin, vue219.ComponentOptionsMixin, {
   "update:modelValue": (val: number) => any;
-}, string, vue237.PublicProps, Readonly<NumberInputProps> & Readonly<{
+}, string, vue219.PublicProps, Readonly<NumberInputProps> & Readonly<{
   "onUpdate:modelValue"?: ((val: number) => any) | undefined;
-}>, {}, {}, {}, {}, string, vue237.ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, vue219.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 type __VLS_WithSlots<T, S> = T & {

package/dist/components/page-tabs/index.d.ts

@@ -0,0 +1,3 @@
+import { PageTabsVariant } from "../../variants/page-tabs.js";
+import { PageTabsContextMenuOptionData, PageTabsEmits, PageTabsExtendedUi, PageTabsExtraUiSlot, PageTabsOperations, PageTabsOptionData, PageTabsProps, PageTabsState } from "./types.js";
+import { _default } from "./page-tabs.vue.js";

package/dist/components/page-tabs/page-tabs.js

@@ -0,0 +1 @@
+import{mergeSlotVariants as e}from"../../theme/shared.js";import t from"../icon/icon.js";import n from"../context-menu/context-menu.js";import{pageTabsVariants as r}from"../../variants/page-tabs.js";import{Fragment as i,computed as a,createBlock as o,createCommentVNode as s,createElementBlock as c,createElementVNode as l,createVNode as u,defineComponent as d,mergeProps as f,normalizeClass as p,openBlock as m,renderList as h,shallowRef as g,toDisplayString as _,unref as v,useTemplateRef as y,watchEffect as b,withCtx as x}from"vue";import{useControllableState as S,useOmitProps as C}from"@soybeanjs/headless/composables";import{PageTabsClose as w,PageTabsItem as T,PageTabsPin as E,PageTabsRoot as D,providePageTabsUi as O}from"@soybeanjs/headless";var k=d({name:`SPageTabs`,__name:`page-tabs`,props:{class:{},size:{},variant:{default:`chrome`},ui:{},items:{},contextMenuFactory:{},modelValue:{},beforeClose:{},middleClickClose:{type:Boolean}},emits:[`update:modelValue`,`update:items`,`close`,`pin`],setup(d,{expose:k,emit:A}){let j=d,M=A,N=C(j,[`class`,`size`,`variant`,`ui`,`items`,`contextMenuFactory`]),P=y(`root`),F=S(()=>j.items,e=>{M(`update:items`,e)},[]),I=a({get:()=>F.value.map(e=>e.value),set:e=>{F.value=F.value.filter(t=>e.includes(t.value))}}),L=a({get:()=>F.value.filter(e=>e.pinned).map(e=>e.value),set:e=>{F.value=F.value.map(t=>({...t,pinned:e.includes(t.value)}))}}),R=a(()=>F.value.filter(e=>e.closable===!1).map(e=>e.value)),z=g(null),B=a(()=>{if(!z.value||!P.value?.operations)return[];let{pinTab:e,unpinTab:t,closeTab:n,closeLeftTabs:r,closeRightTabs:i,closeOtherTabs:a,closeAllTabs:o,canPinTab:s,canUnpinTab:c,canCloseTab:l,canCloseLeftTabs:u,canCloseRightTabs:d,canCloseOtherTabs:f,canCloseAllTabs:p}=P.value.operations,m=z.value.value,h={pinTab:()=>{e(m)},unpinTab:()=>{t(m)},closeTab:async()=>{await n(m)},closeLeftTabs:()=>{r(m)},closeRightTabs:()=>{i(m)},closeOtherTabs:()=>{a(m)},closeAllTabs:()=>{o()},canPinTab:s(m),canUnpinTab:c(m),canCloseTab:l(m),canCloseLeftTabs:u(m),canCloseRightTabs:d(m),canCloseOtherTabs:f(m),canCloseAllTabs:p()};return j.contextMenuFactory?.(z.value,h)??[]}),V=g(null),H=(e,t)=>{V.value=e.currentTarget,z.value=t},U=e=>{z.value&&e.action()};function W(e){let t=[],n=[],r=[];e.forEach(e=>{e.closable===!1?t.push(e):e.pinned?n.push(e):r.push(e)});let i=[...t,...n,...r];return i.length!==e.length||i.some((t,n)=>t.value!==e[n].value)?i:e}let G=a(()=>e(r({size:j.size,variant:j.variant}),j.ui,{root:j.class}));return b(()=>{F.value=W(F.value)}),O(G),k({operations:P.value?.operations}),(e,r)=>(m(),o(v(D),f({ref:`root`},v(N),{values:I.value,"onUpdate:values":r[0]||=e=>I.value=e,pins:L.value,"onUpdate:pins":r[1]||=e=>L.value=e,residents:R.value,"onUpdate:modelValue":r[2]||=e=>M(`update:modelValue`,e)}),{default:x(()=>[(m(!0),c(i,null,h(v(F),e=>(m(),o(v(T),{key:e.value,value:e.value,closable:e.closable,onClose:t=>M(`close`,e),onPin:t=>M(`pin`,e),onPointerenter:t=>H(t,e)},{default:x(()=>[e.icon?(m(),o(t,{key:0,icon:e.icon},null,8,[`icon`])):s(`v-if`,!0),l(`span`,{class:p(G.value.itemText)},_(e.label),3),u(v(E),{"as-child":``},{default:x(()=>[u(t,{icon:`lucide:pin`})]),_:1}),u(v(w),{"as-child":``},{default:x(()=>[u(t,{icon:`lucide:x`})]),_:1}),d.variant===`chrome`?(m(),c(i,{key:1},[(m(),c(`svg`,{height:`100%`,width:`100%`,viewBox:`0 0 8 8`,class:p(G.value.chromeBgLeft)},[...r[3]||=[l(`path`,{d:`M 0 8 A 8 8 0 0 0 8 0 L 8 8 Z`},null,-1)]],2)),(m(),c(`svg`,{height:`100%`,width:`100%`,viewBox:`0 0 8 8`,class:p(G.value.chromeBgRight)},[...r[4]||=[l(`path`,{d:`M 0 0 A 8 8 0 0 0 8 8 L 0 8 Z`},null,-1)]],2))],64)):s(`v-if`,!0),d.variant===`slider`?(m(),c(`div`,{key:2,class:p(G.value.sliderIndicator)},null,2)):s(`v-if`,!0)]),_:2},1032,[`value`,`closable`,`onClose`,`onPin`,`onPointerenter`]))),128)),u(n,{modal:!1,items:B.value,"trigger-props":{reference:V.value},onSelect:U},null,8,[`items`,`trigger-props`])]),_:1},16,[`values`,`pins`,`residents`]))}});export{k as default};

package/dist/components/page-tabs/page-tabs.vue.d.ts

@@ -0,0 +1,27 @@
+import { PageTabsEmits, PageTabsOptionData, PageTabsProps } from "./types.js";
+import * as vue216 from "vue";
+import * as _soybeanjs_headless133 from "@soybeanjs/headless";
+
+//#region src/components/page-tabs/page-tabs.vue.d.ts
+declare const __VLS_export: <T extends PageTabsOptionData>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+  props: vue216.PublicProps & __VLS_PrettifyLocal<PageTabsProps<T> & {
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onClose?: ((tab: T) => any) | undefined;
+    onPin?: ((tab: T) => any) | undefined;
+    "onUpdate:items"?: ((value: T[]) => any) | undefined;
+  }> & (typeof globalThis extends {
+    __VLS_PROPS_FALLBACK: infer P;
+  } ? P : {});
+  expose: (exposed: vue216.ShallowUnwrapRef<{
+    operations: _soybeanjs_headless133.PageTabsOperations | undefined;
+  }>) => void;
+  attrs: any;
+  slots: {};
+  emit: PageTabsEmits<T>;
+}>) => vue216.VNode & {
+  __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+type __VLS_PrettifyLocal<T> = (T extends any ? { [K in keyof T]: T[K] } : { [K in keyof T as K]: T[K] }) & {};
+//#endregion
+export { _default };

package/dist/components/page-tabs/types.d.ts

@@ -0,0 +1,64 @@
+import { ThemeSize } from "../../theme/types.js";
+import "../../theme/index.js";
+import { IconValue } from "../icon/types.js";
+import { MenuOptionData } from "../menu/types.js";
+import { PageTabsVariant } from "../../variants/page-tabs.js";
+import { ClassValue, MaybePromise, PageTabsItemProps, PageTabsOperations, PageTabsRootProps, PageTabsUiSlot } from "@soybeanjs/headless";
+
+//#region src/components/page-tabs/types.d.ts
+interface PageTabsOptionData extends PageTabsItemProps {
+  label: string;
+  icon?: IconValue;
+  /**
+   * Whether the tab is closable or not.
+   *
+   * @default true
+   */
+  closable?: boolean;
+  /**
+   * Whether the tab is pinned or not.
+   *
+   * @default false
+   */
+  pinned?: boolean;
+}
+type PageTabsExtraUiSlot = 'itemText' | 'chromeBgLeft' | 'chromeBgRight' | 'sliderIndicator';
+type PageTabsExtendedUi = Record<PageTabsUiSlot | PageTabsExtraUiSlot, ClassValue>;
+interface PageTabsState {
+  pinTab: () => void;
+  unpinTab: () => void;
+  closeTab: () => Promise<void>;
+  closeLeftTabs: () => void;
+  closeRightTabs: () => void;
+  closeOtherTabs: () => void;
+  closeAllTabs: () => void;
+  canPinTab: boolean;
+  canUnpinTab: boolean;
+  canCloseTab: boolean;
+  canCloseLeftTabs: boolean;
+  canCloseRightTabs: boolean;
+  canCloseOtherTabs: boolean;
+  canCloseAllTabs: boolean;
+}
+interface PageTabsContextMenuOptionData extends MenuOptionData<string> {
+  action: () => MaybePromise<void>;
+}
+interface PageTabsProps<T extends PageTabsOptionData> extends Omit<PageTabsRootProps, 'values' | 'pins' | 'residents'> {
+  /**
+   * root element class
+   */
+  class?: ClassValue;
+  size?: ThemeSize;
+  variant?: PageTabsVariant;
+  ui?: Partial<PageTabsExtendedUi>;
+  items: T[];
+  contextMenuFactory?: (tab: T, state: PageTabsState) => PageTabsContextMenuOptionData[];
+}
+type PageTabsEmits<T> = {
+  (e: 'update:modelValue', value: string): void;
+  (e: 'update:items', value: T[]): void;
+  (e: 'close', tab: T): void;
+  (e: 'pin', tab: T): void;
+};
+//#endregion
+export { PageTabsContextMenuOptionData, PageTabsEmits, PageTabsExtendedUi, PageTabsExtraUiSlot, type PageTabsOperations, PageTabsOptionData, PageTabsProps, PageTabsState };

package/dist/components/pagination/pagination.vue.d.ts

@@ -1,5 +1,5 @@
 import { PaginationProps } from "./types.js";
-import * as vue125 from "vue";
+import * as vue310 from "vue";
 
 //#region src/components/pagination/pagination.vue.d.ts
 declare var __VLS_22: {}, __VLS_35: {}, __VLS_53: {}, __VLS_66: {}, __VLS_79: {};
@@ -14,13 +14,13 @@ type __VLS_Slots = {} & {
 } & {
   last?: (props: typeof __VLS_79) => any;
 };
-declare const __VLS_base: vue125.DefineComponent<PaginationProps, {}, {}, {}, {}, vue125.ComponentOptionsMixin, vue125.ComponentOptionsMixin, {
+declare const __VLS_base: vue310.DefineComponent<PaginationProps, {}, {}, {}, {}, vue310.ComponentOptionsMixin, vue310.ComponentOptionsMixin, {
   "update:page": (value: number) => any;
-}, string, vue125.PublicProps, Readonly<PaginationProps> & Readonly<{
+}, string, vue310.PublicProps, Readonly<PaginationProps> & Readonly<{
   "onUpdate:page"?: ((value: number) => any) | undefined;
 }>, {
   showFirstOrLast: boolean;
-}, {}, {}, {}, string, vue125.ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, vue310.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 type __VLS_WithSlots<T, S> = T & {

package/dist/components/password/password.vue.d.ts

@@ -1,5 +1,5 @@
 import { PasswordProps } from "./types.js";
-import * as vue130 from "vue";
+import * as vue229 from "vue";
 
 //#region src/components/password/password.vue.d.ts
 declare var __VLS_10: {}, __VLS_24: {}, __VLS_26: {
@@ -13,15 +13,15 @@ type __VLS_Slots = {} & {
 } & {
   visible?: (props: typeof __VLS_26) => any;
 };
-declare const __VLS_base: vue130.DefineComponent<PasswordProps, {}, {}, {}, {}, vue130.ComponentOptionsMixin, vue130.ComponentOptionsMixin, {
+declare const __VLS_base: vue229.DefineComponent<PasswordProps, {}, {}, {}, {}, vue229.ComponentOptionsMixin, vue229.ComponentOptionsMixin, {
   "update:modelValue": (value: string) => any;
   "update:visible": (visible: boolean) => any;
-}, string, vue130.PublicProps, Readonly<PasswordProps> & Readonly<{
+}, string, vue229.PublicProps, Readonly<PasswordProps> & Readonly<{
   "onUpdate:modelValue"?: ((value: string) => any) | undefined;
   "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
 }>, {
   visible: boolean;
-}, {}, {}, {}, string, vue130.ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, vue229.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 type __VLS_WithSlots<T, S> = T & {

package/dist/components/popover/popover.vue.d.ts

@@ -1,6 +1,6 @@
 import { PopoverProps } from "./types.js";
-import * as vue242 from "vue";
-import * as _soybeanjs_headless165 from "@soybeanjs/headless";
+import * as vue224 from "vue";
+import * as _soybeanjs_headless134 from "@soybeanjs/headless";
 
 //#region src/components/popover/popover.vue.d.ts
 declare var __VLS_16: {}, __VLS_36: {}, __VLS_49: {};
@@ -11,27 +11,27 @@ type __VLS_Slots = {} & {
 } & {
   close?: (props: typeof __VLS_49) => any;
 };
-declare const __VLS_base: vue242.DefineComponent<PopoverProps, {}, {}, {}, {}, vue242.ComponentOptionsMixin, vue242.ComponentOptionsMixin, {
+declare const __VLS_base: vue224.DefineComponent<PopoverProps, {}, {}, {}, {}, vue224.ComponentOptionsMixin, vue224.ComponentOptionsMixin, {
   "update:open": (value: boolean) => any;
   escapeKeyDown: (event: KeyboardEvent) => any;
-  pointerDownOutside: (event: _soybeanjs_headless165.PointerDownOutsideEvent) => any;
-  focusOutside: (event: _soybeanjs_headless165.FocusOutsideEvent) => any;
-  interactOutside: (event: _soybeanjs_headless165.PointerDownOutsideEvent | _soybeanjs_headless165.FocusOutsideEvent) => any;
+  pointerDownOutside: (event: _soybeanjs_headless134.PointerDownOutsideEvent) => any;
+  focusOutside: (event: _soybeanjs_headless134.FocusOutsideEvent) => any;
+  interactOutside: (event: _soybeanjs_headless134.PointerDownOutsideEvent | _soybeanjs_headless134.FocusOutsideEvent) => any;
   openAutoFocus: (event: Event) => any;
   closeAutoFocus: (event: Event) => any;
-}, string, vue242.PublicProps, Readonly<PopoverProps> & Readonly<{
+}, string, vue224.PublicProps, Readonly<PopoverProps> & Readonly<{
   "onUpdate:open"?: ((value: boolean) => any) | undefined;
   onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
-  onPointerDownOutside?: ((event: _soybeanjs_headless165.PointerDownOutsideEvent) => any) | undefined;
-  onFocusOutside?: ((event: _soybeanjs_headless165.FocusOutsideEvent) => any) | undefined;
-  onInteractOutside?: ((event: _soybeanjs_headless165.PointerDownOutsideEvent | _soybeanjs_headless165.FocusOutsideEvent) => any) | undefined;
+  onPointerDownOutside?: ((event: _soybeanjs_headless134.PointerDownOutsideEvent) => any) | undefined;
+  onFocusOutside?: ((event: _soybeanjs_headless134.FocusOutsideEvent) => any) | undefined;
+  onInteractOutside?: ((event: _soybeanjs_headless134.PointerDownOutsideEvent | _soybeanjs_headless134.FocusOutsideEvent) => any) | undefined;
   onOpenAutoFocus?: ((event: Event) => any) | undefined;
   onCloseAutoFocus?: ((event: Event) => any) | undefined;
 }>, {
   open: boolean;
   defaultOpen: boolean;
   showArrow: boolean;
-}, {}, {}, {}, string, vue242.ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, vue224.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 type __VLS_WithSlots<T, S> = T & {

package/dist/components/radio-group/radio-card-group.vue.d.ts

@@ -1,10 +1,10 @@
 import { RadioCardGroupOptionData, RadioCardGroupProps } from "./types.js";
-import * as vue254 from "vue";
+import * as vue250 from "vue";
 import { AcceptableBooleanValue } from "@soybeanjs/headless";
 
 //#region src/components/radio-group/radio-card-group.vue.d.ts
 declare const __VLS_export: <T extends AcceptableBooleanValue = AcceptableBooleanValue, S extends RadioCardGroupOptionData<T> = RadioCardGroupOptionData<T>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-  props: vue254.PublicProps & __VLS_PrettifyLocal<RadioCardGroupProps<T, S> & {
+  props: vue250.PublicProps & __VLS_PrettifyLocal<RadioCardGroupProps<T, S> & {
     "onUpdate:modelValue"?: ((payload: NonNullable<AcceptableBooleanValue>) => any) | undefined;
   }> & (typeof globalThis extends {
     __VLS_PROPS_FALLBACK: infer P;
@@ -13,7 +13,7 @@ declare const __VLS_export: <T extends AcceptableBooleanValue = AcceptableBoolea
   attrs: any;
   slots: {};
   emit: (evt: "update:modelValue", payload: NonNullable<AcceptableBooleanValue>) => void;
-}>) => vue254.VNode & {
+}>) => vue250.VNode & {
   __ctx?: Awaited<typeof __VLS_setup>;
 };
 declare const _default: typeof __VLS_export;

package/dist/components/radio-group/radio-card.vue.d.ts

@@ -1,5 +1,5 @@
 import { RadioCardProps } from "./types.js";
-import * as vue256 from "vue";
+import * as vue245 from "vue";
 
 //#region src/components/radio-group/radio-card.vue.d.ts
 declare var __VLS_19: {
@@ -10,7 +10,7 @@ type __VLS_Slots = {} & {
 } & {
   description?: (props: typeof __VLS_27) => any;
 };
-declare const __VLS_base: vue256.DefineComponent<RadioCardProps, {}, {}, {}, {}, vue256.ComponentOptionsMixin, vue256.ComponentOptionsMixin, {}, string, vue256.PublicProps, Readonly<RadioCardProps> & Readonly<{}>, {}, {}, {}, {}, string, vue256.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: vue245.DefineComponent<RadioCardProps, {}, {}, {}, {}, vue245.ComponentOptionsMixin, vue245.ComponentOptionsMixin, {}, string, vue245.PublicProps, Readonly<RadioCardProps> & Readonly<{}>, {}, {}, {}, {}, string, vue245.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 type __VLS_WithSlots<T, S> = T & {

package/dist/components/radio-group/radio-group.vue.d.ts

@@ -1,10 +1,10 @@
 import { RadioGroupOptionData, RadioGroupProps } from "./types.js";
-import * as vue247 from "vue";
+import * as vue238 from "vue";
 import { AcceptableBooleanValue } from "@soybeanjs/headless";
 
 //#region src/components/radio-group/radio-group.vue.d.ts
 declare const __VLS_export: <T extends AcceptableBooleanValue = AcceptableBooleanValue, S extends RadioGroupOptionData<T> = RadioGroupOptionData<T>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-  props: vue247.PublicProps & __VLS_PrettifyLocal<RadioGroupProps<T, S> & {
+  props: vue238.PublicProps & __VLS_PrettifyLocal<RadioGroupProps<T, S> & {
     "onUpdate:modelValue"?: ((payload: NonNullable<T>) => any) | undefined;
   }> & (typeof globalThis extends {
     __VLS_PROPS_FALLBACK: infer P;
@@ -13,7 +13,7 @@ declare const __VLS_export: <T extends AcceptableBooleanValue = AcceptableBoolea
   attrs: any;
   slots: {};
   emit: (evt: "update:modelValue", payload: NonNullable<T>) => void;
-}>) => vue247.VNode & {
+}>) => vue238.VNode & {
   __ctx?: Awaited<typeof __VLS_setup>;
 };
 declare const _default: typeof __VLS_export;

package/dist/components/radio-group/radio.vue.d.ts

@@ -1,12 +1,12 @@
 import { RadioProps } from "./types.js";
-import * as vue249 from "vue";
+import * as vue240 from "vue";
 
 //#region src/components/radio-group/radio.vue.d.ts
 declare var __VLS_31: {};
 type __VLS_Slots = {} & {
   default?: (props: typeof __VLS_31) => any;
 };
-declare const __VLS_base: vue249.DefineComponent<RadioProps, {}, {}, {}, {}, vue249.ComponentOptionsMixin, vue249.ComponentOptionsMixin, {}, string, vue249.PublicProps, Readonly<RadioProps> & Readonly<{}>, {}, {}, {}, {}, string, vue249.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: vue240.DefineComponent<RadioProps, {}, {}, {}, {}, vue240.ComponentOptionsMixin, vue240.ComponentOptionsMixin, {}, string, vue240.PublicProps, Readonly<RadioProps> & Readonly<{}>, {}, {}, {}, {}, string, vue240.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 type __VLS_WithSlots<T, S> = T & {

package/dist/components/segment/segment.vue.d.ts

@@ -1,10 +1,10 @@
 import { SegmentOptionData, SegmentProps } from "./types.js";
-import * as vue261 from "vue";
+import * as vue234 from "vue";
 import { AcceptableValue } from "@soybeanjs/headless";
 
 //#region src/components/segment/segment.vue.d.ts
 declare const __VLS_export: <T extends AcceptableValue = AcceptableValue, S extends SegmentOptionData<NonNullable<T>> = SegmentOptionData<NonNullable<T>>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-  props: vue261.PublicProps & __VLS_PrettifyLocal<SegmentProps<T, S> & {
+  props: vue234.PublicProps & __VLS_PrettifyLocal<SegmentProps<T, S> & {
     "onUpdate:modelValue"?: ((payload: NonNullable<T>) => any) | undefined;
   }> & (typeof globalThis extends {
     __VLS_PROPS_FALLBACK: infer P;
@@ -17,7 +17,7 @@ declare const __VLS_export: <T extends AcceptableValue = AcceptableValue, S exte
     }) => any;
   };
   emit: (evt: "update:modelValue", payload: NonNullable<T>) => void;
-}>) => vue261.VNode & {
+}>) => vue234.VNode & {
   __ctx?: Awaited<typeof __VLS_setup>;
 };
 declare const _default: typeof __VLS_export;

package/dist/components/select/select.vue.d.ts

@@ -1,16 +1,16 @@
 import { SelectGroupOptionData, SelectProps, SelectSingleOptionData } from "./types.js";
-import * as vue263 from "vue";
-import * as _soybeanjs_headless173 from "@soybeanjs/headless";
+import * as vue315 from "vue";
+import * as _soybeanjs_headless189 from "@soybeanjs/headless";
 import { DefinedValue } from "@soybeanjs/headless";
 
 //#region src/components/select/select.vue.d.ts
 declare const __VLS_export: <T extends DefinedValue, M extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-  props: vue263.PublicProps & __VLS_PrettifyLocal<SelectProps<T, M> & {
-    onSelect?: ((event: _soybeanjs_headless173.SelectItemEvent<T>) => any) | undefined;
+  props: vue315.PublicProps & __VLS_PrettifyLocal<SelectProps<T, M> & {
+    onSelect?: ((event: _soybeanjs_headless189.SelectItemEvent<T>) => any) | undefined;
     "onUpdate:modelValue"?: ((value: M extends true ? T[] : T) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
-    onPointerDownOutside?: ((event: _soybeanjs_headless173.PointerDownOutsideEvent) => any) | undefined;
+    onPointerDownOutside?: ((event: _soybeanjs_headless189.PointerDownOutsideEvent) => any) | undefined;
     onCloseAutoFocus?: ((event: Event) => any) | undefined;
   }> & (typeof globalThis extends {
     __VLS_PROPS_FALLBACK: infer P;
@@ -44,8 +44,8 @@ declare const __VLS_export: <T extends DefinedValue, M extends boolean = false>(
       item: SelectSingleOptionData<T>;
     }) => any;
   };
-  emit: ((evt: "select", event: _soybeanjs_headless173.SelectItemEvent<T>) => void) & ((evt: "update:modelValue", value: M extends true ? T[] : T) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: _soybeanjs_headless173.PointerDownOutsideEvent) => void) & ((evt: "closeAutoFocus", event: Event) => void);
-}>) => vue263.VNode & {
+  emit: ((evt: "select", event: _soybeanjs_headless189.SelectItemEvent<T>) => void) & ((evt: "update:modelValue", value: M extends true ? T[] : T) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: _soybeanjs_headless189.PointerDownOutsideEvent) => void) & ((evt: "closeAutoFocus", event: Event) => void);
+}>) => vue315.VNode & {
   __ctx?: Awaited<typeof __VLS_setup>;
 };
 declare const _default: typeof __VLS_export;

package/dist/components/separator/separator.vue.d.ts

@@ -1,11 +1,11 @@
 import { SeparatorProps } from "./types.js";
-import * as vue265 from "vue";
-import * as _soybeanjs_headless177 from "@soybeanjs/headless";
+import * as vue252 from "vue";
+import * as _soybeanjs_headless142 from "@soybeanjs/headless";
 
 //#region src/components/separator/separator.vue.d.ts
-declare const __VLS_export: vue265.DefineComponent<SeparatorProps, {}, {}, {}, {}, vue265.ComponentOptionsMixin, vue265.ComponentOptionsMixin, {}, string, vue265.PublicProps, Readonly<SeparatorProps> & Readonly<{}>, {
-  orientation: _soybeanjs_headless177.DataOrientation;
-}, {}, {}, {}, string, vue265.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: vue252.DefineComponent<SeparatorProps, {}, {}, {}, {}, vue252.ComponentOptionsMixin, vue252.ComponentOptionsMixin, {}, string, vue252.PublicProps, Readonly<SeparatorProps> & Readonly<{}>, {
+  orientation: _soybeanjs_headless142.DataOrientation;
+}, {}, {}, {}, string, vue252.ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion
 export { _default };