@soybeanjs/ui 0.23.0 → 0.23.1-beta.1

package/dist/components/config-provider/config-provider.js

@@ -1 +1 @@
-import{themeSizes as e}from"../../constants/common.js";import t from"../dialog/dialog-provider.js";import n from"../progress/progress-provider.js";import r from"../toast/toast-provider.js";import{provideConfigProviderContext as i}from"./context.js";import a from"../icon/icon.js";import{createBlock as o,createCommentVNode as s,createTextVNode as c,createVNode as l,defineComponent as u,guardReactiveProps as d,h as f,mergeProps as p,normalizeProps as m,openBlock as h,renderSlot as g,toDisplayString as _,unref as v,watch as y,watchEffect as b,withCtx as x}from"vue";import{useOmitProps as S}from"@soybeanjs/headless/composables";import{useStorage as C}from"@vueuse/core";import{ConfigProvider as w}from"@soybeanjs/headless/config-provider";import{Primitive as T}from"@soybeanjs/headless/primitive";import{isClient as E,transformPropsToContext as D}from"@soybeanjs/headless/shared";import{createShadcnTheme as O}from"@soybeanjs/shadcn-theme";const k=u({name:`SConfigProvider`,__name:`config-provider`,props:{theme:{default:()=>({})},size:{default:`md`},iconify:{default:()=>({width:`1.25em`,height:`1.25em`})},progress:{},toast:{},customToast:{type:Boolean},dir:{},locale:{},nonce:{},tooltip:{},nuxt:{type:Boolean},iconRender:{},messages:{}},setup(u){let k=u,A=S(k,[`iconRender`,`theme`,`size`,`iconify`,`progress`,`toast`,`customToast`]),j=k.iconRender??(e=>f(a,{icon:e}));i({...D(k),iconRender:j});let{getCss:M}=O(k.theme),N=()=>M(k.theme,k.theme.radius),P=C(`__SoybeanUI_themeVars`,N());function F(t){if(!E)return;document.documentElement.classList.add(`size-${t}`);let n=e.filter(e=>e!==t).map(e=>`size-${e}`);document.documentElement.classList.remove(...n)}return y(()=>k.size,e=>{F(e)},{immediate:!0,flush:`sync`}),b(()=>{P.value=N()}),(e,i)=>(h(),o(v(w),p(v(A),{"icon-render":v(j)}),{default:x(()=>[l(v(T),{id:`__SoybeanUI_themeVars`,as:`style`},{default:x(()=>[c(_(v(P)),1)]),_:1}),g(e.$slots,`default`),k.customToast?s(`v-if`,!0):(h(),o(r,m(p({key:0},k.toast)),null,16)),l(t),l(n,m(d(k.progress)),null,16)]),_:3},16,[`icon-render`]))}});export{k as default};
+import{themeSizeMap as e}from"../../theme/config.js";import"../../theme/index.js";import t from"../dialog/dialog-provider.js";import n from"../progress/progress-provider.js";import r from"../toast/toast-provider.js";import{provideConfigProviderContext as i}from"./context.js";import a from"./global.js";import o from"../icon/icon.js";import{createBlock as s,createCommentVNode as c,createTextVNode as l,createVNode as u,defineComponent as d,guardReactiveProps as f,h as p,mergeProps as m,normalizeProps as h,openBlock as g,renderSlot as _,toDisplayString as v,unref as y,watchEffect as b,withCtx as x}from"vue";import{useOmitProps as S}from"@soybeanjs/headless/composables";import{useStorage as C}from"@vueuse/core";import{ConfigProvider as w}from"@soybeanjs/headless/config-provider";import{Primitive as T}from"@soybeanjs/headless/primitive";import{isClient as E,transformPropsToContext as D}from"@soybeanjs/headless/shared";import{createShadcnTheme as O}from"@soybeanjs/shadcn-theme";const k=d({name:`SConfigProvider`,__name:`config-provider`,props:{theme:{default:()=>({})},size:{default:`md`},iconify:{default:()=>({width:`1.25em`,height:`1.25em`})},progress:{},toast:{},customToast:{type:Boolean},dir:{},locale:{},nonce:{},tooltip:{},nuxt:{type:Boolean},iconRender:{},messages:{}},setup(d){let k=d,A=S(k,[`iconRender`,`theme`,`size`,`iconify`,`progress`,`toast`,`customToast`]),j=k.iconRender??(e=>p(o,{icon:e}));i({...D(k),iconRender:j});let{getCss:M}=O(k.theme),N=()=>`${a}\n${M(k.theme,k.theme.radius)}`,P=C(`__SoybeanUI_themeVars`,N());return b(()=>{if(!E)return;let t=e[k.size??`md`];document.documentElement.style.fontSize=`${t}px`},{flush:`post`}),b(()=>{P.value=N()}),(e,i)=>(g(),s(y(w),m(y(A),{"icon-render":y(j)}),{default:x(()=>[u(y(T),{id:`__SoybeanUI_themeVars`,as:`style`},{default:x(()=>[l(v(y(P)),1)]),_:1}),_(e.$slots,`default`),k.customToast?c(`v-if`,!0):(g(),s(r,h(m({key:0},k.toast)),null,16)),u(t),u(n,h(f(k.progress)),null,16)]),_:3},16,[`icon-render`]))}});export{k as default};

package/dist/components/config-provider/global.js

@@ -0,0 +1,11 @@
+var e=`* {
+  border-color: hsl(var(--border) / var(--border-alpha, 1));
+}
+body {
+  color: hsl(var(--foreground));
+  background: hsl(var(--background));
+}
+button {
+  background-color: transparent;
+}
+`;export{e as default};

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

@@ -4,8 +4,8 @@ import { PageTabsOptionData } from "@soybeanjs/headless/page-tabs";
 //#region src/components/page-tabs/page-tabs.vue.d.ts
 declare const __VLS_export: <T extends PageTabsOptionData = 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: import("vue").PublicProps & __VLS_PrettifyLocal<PageTabsProps<T> & {
-    onContextmenu?: ((tab: T) => any) | undefined;
     onClose?: ((tab: T) => any) | undefined;
+    onContextmenu?: ((tab: T) => any) | undefined;
     onClick?: ((tab: T) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
     "onUpdate:items"?: ((items: T[]) => any) | undefined;

package/dist/components/splitter/splitter-panel.vue.d.ts

@@ -12,13 +12,13 @@ type __VLS_Slots = {} & {
   default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<SplitterPanelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-  resize: (size: number, prevSize: number | undefined) => any;
   collapse: () => any;
   expand: () => any;
+  resize: (size: number, prevSize: number | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<SplitterPanelProps> & Readonly<{
-  onResize?: ((size: number, prevSize: number | undefined) => any) | undefined;
   onCollapse?: (() => any) | undefined;
   onExpand?: (() => any) | undefined;
+  onResize?: ((size: number, prevSize: number | undefined) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/splitter/splitter-resize-handle.vue.d.ts

@@ -402,9 +402,9 @@ declare const __VLS_export: import("vue").DefineComponent<{
   onDragging?: ((_value: boolean) => any) | undefined;
 }>, {
   class: import("@soybeanjs/headless").ClassValue;
-  tabindex: number;
   asChild: boolean;
   as: string | Function | Record<string, any>;
+  tabindex: number;
   disabled: boolean;
   withHandle: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/components/toggle/toggle.js

@@ -1 +1 @@
-import{toggleVariants as e}from"../../styles/toggle.js";import{computed as t,createBlock as n,defineComponent as r,guardReactiveProps as i,mergeProps as a,normalizeProps as o,openBlock as s,renderSlot as c,unref as l,withCtx as u}from"vue";import{useOmitProps as d}from"@soybeanjs/headless/composables";import{Toggle as f}from"@soybeanjs/headless/toggle";const p=r({name:`SToggle`,__name:`toggle`,props:{class:{type:[Boolean,null,String,Object,Array]},color:{},size:{},variant:{},shape:{},defaultValue:{type:Boolean},modelValue:{type:Boolean,default:void 0},type:{},disabled:{type:Boolean},asChild:{type:Boolean},as:{}},emits:[`update:modelValue`],setup(r,{emit:p}){let m=r,h=p,g=d(m,[`class`,`color`,`variant`,`size`,`shape`]),_=t(()=>e({color:m.color,variant:m.variant,size:m.size,shape:m.shape}));return(e,t)=>(s(),n(l(f),a(l(g),{class:_.value,"onUpdate:modelValue":t[0]||=e=>h(`update:modelValue`,e)}),{default:u(t=>[c(e.$slots,`default`,o(i(t)))]),_:3},16,[`class`]))}});export{p as default};
+import{toggleVariants as e}from"../../styles/toggle.js";import{computed as t,createBlock as n,defineComponent as r,guardReactiveProps as i,mergeProps as a,normalizeProps as o,openBlock as s,renderSlot as c,unref as l,withCtx as u}from"vue";import{useOmitProps as d}from"@soybeanjs/headless/composables";import{Toggle as f}from"@soybeanjs/headless/toggle";const p=r({name:`SToggle`,__name:`toggle`,props:{class:{type:[Boolean,null,String,Object,Array]},color:{},size:{},variant:{},shape:{},defaultValue:{type:Boolean},modelValue:{type:Boolean,default:void 0},type:{},disabled:{type:Boolean},asChild:{type:Boolean},as:{}},emits:[`update:modelValue`],setup(r,{emit:p}){let m=r,h=p,g=d(m,[`class`,`color`,`variant`,`size`,`shape`]),_=t(()=>e({color:m.color,variant:m.variant,size:m.size,shape:m.shape},m.class));return(e,t)=>(s(),n(l(f),a(l(g),{class:_.value,"onUpdate:modelValue":t[0]||=e=>h(`update:modelValue`,e)}),{default:u(t=>[c(e.$slots,`default`,o(i(t)))]),_:3},16,[`class`]))}});export{p as default};

package/dist/styles/accordion.js

@@ -1 +1 @@
-import{scv as e}from"@soybeanjs/cva";const t=e({slots:{root:``,item:`border-b`,header:`flex`,content:[`overflow-hidden transition will-change-auto`,`data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up`],description:`m-0`,trigger:[`flex-1 flex items-center justify-start font-medium transition-all-200 bg-transparent`,`outline-none focus-visible:ring-3 focus-visible:ring-offset-background focus-visible:ring-primary/30`,`hover:underline [&[data-state=open]>.trigger-icon]:rotate-180`],triggerLeadingIcon:`shrink-0`,triggerIcon:`trigger-icon ms-auto shrink-0 text-muted-foreground transition-transform-200`},variants:{size:{xs:{root:`text-2xs`,description:`pb-3`,trigger:`py-3 gap-2.5`},sm:{root:`text-xs`,description:`pb-3.5`,trigger:`py-3.5 gap-3`},md:{root:`text-sm`,description:`pb-4`,trigger:`py-4 gap-3.5`},lg:{root:`text-base`,description:`pb-4.5`,trigger:`py-4.5 gap-4`},xl:{root:`text-lg`,description:`pb-5`,trigger:`py-5 gap-4.5`},"2xl":{root:`text-2xl`,description:`pb-6`,trigger:`py-6 gap-5`}}},defaultVariants:{size:`md`}});export{t as accordionVariants};
+import{scv as e}from"@soybeanjs/cva";const t=e({slots:{root:``,item:`border-b`,header:`flex`,content:[`overflow-hidden transition will-change-auto`,`data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up`],description:`m-0`,trigger:[`flex-1 flex items-center justify-start font-medium transition-all-200 bg-transparent`,`outline-none focus-visible:ring-3 focus-visible:ring-offset-background focus-visible:ring-primary/30`,`hover:underline [&[data-state=open]>.trigger-icon]:rotate-180`],triggerLeadingIcon:`shrink-0`,triggerIcon:`trigger-icon ms-auto shrink-0 text-muted-foreground transition-transform-200`},variants:{size:{xs:{root:`text-2xs`,description:`pb-3`,trigger:`py-3 gap-2.5`},sm:{root:`text-xs`,description:`pb-3.5`,trigger:`py-3.5 gap-3`},md:{root:`text-sm`,description:`pb-4`,trigger:`py-4 gap-3.5`},lg:{root:`text-base`,description:`pb-4.5`,trigger:`py-4.5 gap-4`},xl:{root:`text-lg`,description:`pb-5`,trigger:`py-5 gap-4.5`},"2xl":{root:`text-2xl`,description:`pb-6`,trigger:`py-6 gap-5`}}},defaultVariants:{size:`md`}});export{t as accordionVariants};

package/dist/styles/collapsible.js

@@ -1 +1 @@
-import{scv as e}from"@soybeanjs/cva";const t=e({slots:{root:``,trigger:``,content:[`overflow-hidden transition will-change-auto`,`data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down`]},variants:{size:{xs:{root:`text-2xs`},sm:{root:`text-xs`},md:{root:`text-sm`},lg:{root:`text-base`},xl:{root:`text-lg`},"2xl":{root:`text-xl`}}}});export{t as collapsibleVariants};
+import{scv as e}from"@soybeanjs/cva";const t=e({slots:{root:``,trigger:``,content:[`overflow-hidden transition will-change-auto`,`data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up`]},variants:{size:{xs:{root:`text-2xs`},sm:{root:`text-xs`},md:{root:`text-sm`},lg:{root:`text-base`},xl:{root:`text-lg`},"2xl":{root:`text-xl`}}}});export{t as collapsibleVariants};

package/dist/styles/pagination.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from "@soybeanjs/cva";
 
 //#region src/styles/pagination.d.ts
-declare const paginationVariants: import("@soybeanjs/cva").SCVResult<"list" | "next" | "first" | "last" | "ellipsis" | "root" | "prev" | "listItem", NoInfer<{
+declare const paginationVariants: import("@soybeanjs/cva").SCVResult<"list" | "next" | "root" | "first" | "last" | "ellipsis" | "prev" | "listItem", NoInfer<{
   size: {
     xs: {
       list: "gap-0.75 text-2xs";

package/dist/styles/switch.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from "@soybeanjs/cva";
 
 //#region src/styles/switch.d.ts
-declare const switchVariants: import("@soybeanjs/cva").SCVResult<"root" | "thumb" | "control", NoInfer<{
+declare const switchVariants: import("@soybeanjs/cva").SCVResult<"root" | "control" | "thumb", NoInfer<{
   color: {
     primary: {
       control: "data-[state=checked]:bg-primary focus-visible:ring-primary/30";

package/dist/styles/table.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from "@soybeanjs/cva";
 
 //#region src/styles/table.d.ts
-declare const tableVariants: import("@soybeanjs/cva").SCVResult<"header" | "content" | "footer" | "fixed" | "scroll" | "body" | "head" | "cell" | "row" | "root" | "resizeHandle" | "selection" | "sortTrigger" | "filterInput" | "treeCell" | "treeToggle" | "treeTogglePlaceholder" | "filterTrigger" | "filterPopup" | "filterSearch" | "filterOptions" | "filterOption" | "filterOptionLabel" | "filterFooter" | "filterCount" | "filterAction" | "filterEmpty" | "radioIndicator" | "radioRoot", NoInfer<{
+declare const tableVariants: import("@soybeanjs/cva").SCVResult<"header" | "content" | "footer" | "fixed" | "root" | "resizeHandle" | "body" | "head" | "scroll" | "cell" | "row" | "sortTrigger" | "filterInput" | "treeCell" | "treeToggle" | "treeTogglePlaceholder" | "selection" | "filterTrigger" | "filterPopup" | "filterSearch" | "filterOptions" | "filterOption" | "filterOptionLabel" | "filterFooter" | "filterCount" | "filterAction" | "filterEmpty" | "radioIndicator" | "radioRoot", NoInfer<{
   size: {
     xs: {
       root: "text-2xs";

package/dist/styles/tabs.d.ts

@@ -68,8 +68,8 @@ declare const tabsVariants: import("@soybeanjs/cva").SCVResult<"list" | "content
     };
   };
 }>, {
-  fill?: "auto" | "full" | undefined;
   size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | undefined;
+  fill?: "auto" | "full" | undefined;
   shape?: "rounded" | "square" | undefined;
   orientation?: "horizontal" | "vertical" | undefined;
   enableIndicator?: boolean | undefined;

package/dist/styles/tree-menu.js

@@ -1 +1 @@
-import{scv as e}from"@soybeanjs/cva";const t=e({slots:{root:`group flex-1 flex flex-col w-full h-full overflow-auto data-[state=collapsed]:w-[--soybean-tree-menu-collapsed-width] transition-[width,height]-200 ease-out`,groupRoot:`group-data-[state=collapsed]:mb-0`,group:`flex flex-col m-0 p-0 list-none`,groupLabel:`flex items-center text-foreground/70 group-data-[state=collapsed]:size-0 group-data-[state=collapsed]:p-0 group-data-[state=collapsed]:opacity-0 group-data-[state=collapsed]:overflow-hidden transition-[height,padding,opacity]-200`,item:`relative m-0 p-0 group-data-[state=collapsed]:hover:bg-sidebar-accent group-data-[state=collapsed]:hover:rounded-sm`,button:[`group/button relative flex items-center w-full rounded-sm outline-none cursor-pointer select-none group-data-[state=collapsed]:overflow-hidden`,`data-[active=true]:bg-primary/10 data-[active=true]:text-primary`,`data-[active=false]:hover:bg-sidebar-accent data-[active=false]:focus:bg-sidebar-accent`,`data-[child-active]:text-primary`,`data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50`],collapsibleRoot:``,collapsibleTrigger:``,collapsibleContent:[`overflow-hidden transition will-change-auto`,`data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down`],collapsibleIcon:`shrink-0 ms-auto text-muted-foreground transition-transform-200 group-data-[state=open]/button:rotate-90 group-data-[child-active]/button:text-primary`,sub:`flex flex-col m-0 list-none ms-[--soybean-tree-menu-indent] border-s border-sidebar-border border-solid`,itemLabel:`truncate`,itemLinkIcon:`shrink-0 self-start text-muted-foreground rtl:rotate-270`,itemBadge:``,itemTag:`shrink-0 ms-auto inline-flex items-center rounded-sm bg-accent/15 text-accent-foreground`,itemAction:[`absolute end-0 top-1/2 -translate-y-1/2 z-2 inline-flex items-center justify-center rounded-sm text-muted-foreground outline-none transition-colors`,`focus-visible:bg-sidebar-accent focus-visible:text-foreground focus-visible:ring-3 focus-visible:ring-accent-foreground/20`,`disabled:pointer-events-none disabled:opacity-50`],itemAbsolute:`absolute inset-0 z-1 cursor-pointer`},variants:{size:{xs:{root:`gap-0.875 p-1.5 text-2xs`,groupRoot:`mb-0.875`,groupLabel:`h-6 gap-1 px-1.5 py-1 text-3xs`,group:`gap-0.875`,button:`gap-1.5 h-6 px-1.5 py-1 group-data-[state=collapsed]:w-6`,sub:`gap-0.875 ps-1.5 pt-0.875`,subButton:`gap-1.5 h-6 px-1.5 py-1 group-data-[state=collapsed]:w-6`,itemLinkIcon:`size-2 -ms-1`,itemTag:`min-h-3.5 px-1 text-4xs`,itemAction:`end-1 size-4 text-2xs`},sm:{root:`gap-1 p-1.75 text-xs`,groupRoot:`mb-1`,groupLabel:`h-7 gap-1.5 px-1.75 py-1 text-2xs`,group:`gap-1`,button:`gap-1.75 h-7 px-1.75 py-1 group-data-[state=collapsed]:w-7`,sub:`gap-1 ps-1.75 pt-1`,subButton:`gap-1.75 h-7 px-1.75 py-1 group-data-[state=collapsed]:w-7`,itemLinkIcon:`size-2.5 -ms-1.5`,itemTag:`min-h-4 px-1.25 text-3xs`,itemAction:`end-1.25 size-4.5 text-xs`},md:{root:`gap-1.25 p-2 text-sm`,groupRoot:`mb-1.25`,groupLabel:`h-8 gap-2 px-2 py-1.5 text-xs`,group:`gap-1.25`,button:`gap-2 h-8 px-2 py-1.5 group-data-[state=collapsed]:w-8`,sub:`gap-1.25 ps-2 pt-1.25`,subButton:`gap-2 h-8 px-2 py-1.5 group-data-[state=collapsed]:w-8`,itemLinkIcon:`size-3 -ms-2`,itemTag:`min-h-4.5 px-1.5 text-2xs`,itemAction:`end-1.5 size-5 text-sm`},lg:{root:`gap-1.5 p-2.25 text-base`,groupRoot:`mb-1.5`,groupLabel:`h-9 gap-2.5 px-2.25 py-1.5 text-sm`,group:`gap-1.5`,button:`gap-2.25 h-9 px-2.25 py-1.5 group-data-[state=collapsed]:w-9`,sub:`gap-1.5 ps-2.25 pt-1.5`,subButton:`gap-2.25 h-9 px-2.25 py-1.5 group-data-[state=collapsed]:w-9`,itemLinkIcon:`size-3.5 -ms-2.5`,itemTag:`min-h-5 px-1.75 text-xs`,itemAction:`end-1.75 size-5.5 text-base`},xl:{root:`gap-2 p-2.5 text-lg`,groupRoot:`mb-2`,groupLabel:`h-10 gap-3 px-2.5 py-2 text-base`,group:`gap-2`,button:`gap-2.5 h-10 px-2.5 py-2 group-data-[state=collapsed]:w-10`,sub:`gap-2 ps-2.5 pt-2`,subButton:`gap-2.5 h-10 px-2.5 py-2 group-data-[state=collapsed]:w-10`,itemLinkIcon:`size-4 -ms-3`,itemTag:`min-h-5.5 px-2 text-sm`,itemAction:`end-2 size-6 text-lg`},"2xl":{root:`gap-2.5 p-3 text-xl`,groupRoot:`mb-2.5`,groupLabel:`h-12 gap-3.5 px-3 py-2.5 text-lg`,group:`gap-2.5`,button:`gap-3 h-12 px-3 py-2.5 group-data-[state=collapsed]:w-12`,sub:`gap-2.5 ps-3 pt-2.5`,subButton:`gap-3 h-12 px-3 py-2.5 group-data-[state=collapsed]:w-12`,itemLinkIcon:`size-5 -ms-4`,itemTag:`min-h-6 px-2.5 text-base`,itemAction:`end-2.5 size-7 text-xl`}}},defaultVariants:{size:`md`}});export{t as treeMenuVariants};
+import{scv as e}from"@soybeanjs/cva";const t=e({slots:{root:`group flex-1 flex flex-col w-full h-full overflow-auto data-[state=collapsed]:w-[--soybean-tree-menu-collapsed-width] transition-[width,height]-200 ease-out`,groupRoot:`group-data-[state=collapsed]:mb-0`,group:`flex flex-col m-0 p-0 list-none`,groupLabel:`flex items-center text-foreground/70 group-data-[state=collapsed]:size-0 group-data-[state=collapsed]:p-0 group-data-[state=collapsed]:opacity-0 group-data-[state=collapsed]:overflow-hidden transition-[height,padding,opacity]-200`,item:`relative m-0 p-0 group-data-[state=collapsed]:hover:bg-sidebar-accent group-data-[state=collapsed]:hover:rounded-sm`,button:[`group/button relative flex items-center w-full rounded-sm outline-none cursor-pointer select-none group-data-[state=collapsed]:overflow-hidden`,`data-[active=true]:bg-primary/10 data-[active=true]:text-primary`,`data-[active=false]:hover:bg-sidebar-accent data-[active=false]:focus:bg-sidebar-accent`,`data-[child-active]:text-primary`,`data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50`],collapsibleRoot:``,collapsibleTrigger:``,collapsibleContent:[`overflow-hidden transition will-change-auto`,`data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up`],collapsibleIcon:`shrink-0 ms-auto text-muted-foreground transition-transform-200 group-data-[state=open]/button:rotate-90 group-data-[child-active]/button:text-primary`,sub:`flex flex-col m-0 list-none ms-[--soybean-tree-menu-indent] border-s border-sidebar-border border-solid`,itemLabel:`truncate`,itemLinkIcon:`shrink-0 self-start text-muted-foreground rtl:rotate-270`,itemBadge:``,itemTag:`shrink-0 ms-auto inline-flex items-center rounded-sm bg-accent/15 text-accent-foreground`,itemAction:[`absolute end-0 top-1/2 -translate-y-1/2 z-2 inline-flex items-center justify-center rounded-sm text-muted-foreground outline-none transition-colors`,`focus-visible:bg-sidebar-accent focus-visible:text-foreground focus-visible:ring-3 focus-visible:ring-accent-foreground/20`,`disabled:pointer-events-none disabled:opacity-50`],itemAbsolute:`absolute inset-0 z-1 cursor-pointer`},variants:{size:{xs:{root:`gap-0.875 p-1.5 text-2xs`,groupRoot:`mb-0.875`,groupLabel:`h-6 gap-1 px-1.5 py-1 text-3xs`,group:`gap-0.875`,button:`gap-1.5 h-6 px-1.5 py-1 group-data-[state=collapsed]:w-6`,sub:`gap-0.875 ps-1.5 pt-0.875`,subButton:`gap-1.5 h-6 px-1.5 py-1 group-data-[state=collapsed]:w-6`,itemLinkIcon:`size-2 -ms-1`,itemTag:`min-h-3.5 px-1 text-4xs`,itemAction:`end-1 size-4 text-2xs`},sm:{root:`gap-1 p-1.75 text-xs`,groupRoot:`mb-1`,groupLabel:`h-7 gap-1.5 px-1.75 py-1 text-2xs`,group:`gap-1`,button:`gap-1.75 h-7 px-1.75 py-1 group-data-[state=collapsed]:w-7`,sub:`gap-1 ps-1.75 pt-1`,subButton:`gap-1.75 h-7 px-1.75 py-1 group-data-[state=collapsed]:w-7`,itemLinkIcon:`size-2.5 -ms-1.5`,itemTag:`min-h-4 px-1.25 text-3xs`,itemAction:`end-1.25 size-4.5 text-xs`},md:{root:`gap-1.25 p-2 text-sm`,groupRoot:`mb-1.25`,groupLabel:`h-8 gap-2 px-2 py-1.5 text-xs`,group:`gap-1.25`,button:`gap-2 h-8 px-2 py-1.5 group-data-[state=collapsed]:w-8`,sub:`gap-1.25 ps-2 pt-1.25`,subButton:`gap-2 h-8 px-2 py-1.5 group-data-[state=collapsed]:w-8`,itemLinkIcon:`size-3 -ms-2`,itemTag:`min-h-4.5 px-1.5 text-2xs`,itemAction:`end-1.5 size-5 text-sm`},lg:{root:`gap-1.5 p-2.25 text-base`,groupRoot:`mb-1.5`,groupLabel:`h-9 gap-2.5 px-2.25 py-1.5 text-sm`,group:`gap-1.5`,button:`gap-2.25 h-9 px-2.25 py-1.5 group-data-[state=collapsed]:w-9`,sub:`gap-1.5 ps-2.25 pt-1.5`,subButton:`gap-2.25 h-9 px-2.25 py-1.5 group-data-[state=collapsed]:w-9`,itemLinkIcon:`size-3.5 -ms-2.5`,itemTag:`min-h-5 px-1.75 text-xs`,itemAction:`end-1.75 size-5.5 text-base`},xl:{root:`gap-2 p-2.5 text-lg`,groupRoot:`mb-2`,groupLabel:`h-10 gap-3 px-2.5 py-2 text-base`,group:`gap-2`,button:`gap-2.5 h-10 px-2.5 py-2 group-data-[state=collapsed]:w-10`,sub:`gap-2 ps-2.5 pt-2`,subButton:`gap-2.5 h-10 px-2.5 py-2 group-data-[state=collapsed]:w-10`,itemLinkIcon:`size-4 -ms-3`,itemTag:`min-h-5.5 px-2 text-sm`,itemAction:`end-2 size-6 text-lg`},"2xl":{root:`gap-2.5 p-3 text-xl`,groupRoot:`mb-2.5`,groupLabel:`h-12 gap-3.5 px-3 py-2.5 text-lg`,group:`gap-2.5`,button:`gap-3 h-12 px-3 py-2.5 group-data-[state=collapsed]:w-12`,sub:`gap-2.5 ps-3 pt-2.5`,subButton:`gap-3 h-12 px-3 py-2.5 group-data-[state=collapsed]:w-12`,itemLinkIcon:`size-5 -ms-4`,itemTag:`min-h-6 px-2.5 text-base`,itemAction:`end-2.5 size-7 text-xl`}}},defaultVariants:{size:`md`}});export{t as treeMenuVariants};

package/dist/styles.css

@@ -6,45 +6,6 @@
 .data-\[motion\^\=to-\]\:animate-out[data-motion^=to-],
 .data-\[state\=closed\]\:animate-out[data-state=closed],
 .data-\[state\=hidden\]\:animate-out[data-state=hidden]{animation:una-out;animation-name:una-out;animation-duration:150ms;--una-exit-opacity:initial;--una-exit-scale:initial;--una-exit-rotate:initial;--una-exit-translate-x:initial;--una-exit-translate-y:initial;}
-/* layer: preflights */
-*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}
-
-      * {
-        border-color: hsl(var(--border) / var(--border-alpha, 1));
-      }
-
-      button {
-        background-color: transparent;
-      }
-
-      body {
-        color: hsl(var(--foreground));
-        background: hsl(var(--background));
-      }
-
-      html.size-xs {
-        font-size: 12px;
-      }
-      html.size-sm {
-        font-size: 14px;
-      }
-      html.size-md {
-        font-size: 16px;
-      }
-      html.size-lg {
-        font-size: 18px;
-      }
-      html.size-xl {
-        font-size: 20px;
-      }
-      html.size-2xl {
-        font-size: 24px;
-      }
-
-      @keyframes shadcn-down { from{ height: 0 } to { height: var(--soybean-accordion-content-height)} }
-      @keyframes shadcn-up { from{ height: var(--soybean-accordion-content-height)} to { height: 0 } }
-      @keyframes shadcn-collapsible-down { from{ height: 0 } to { height: var(--soybean-collapsible-content-height)} }
-      @keyframes shadcn-collapsible-up { from{ height: var(--soybean-collapsible-content-height)} to { height: 0 } }
 /* layer: shortcuts */
 .container{width:100%;}
 @media (min-width: 640px){
@@ -387,7 +348,6 @@
 .block,
 .group:hover .group-hover\:block{display:block;}
 .inline-block{display:inline-block;}
-.contents{display:contents;}
 .hidden{display:none;}
 .aspect-square{aspect-ratio:1/1;}
 .\[\&_svg\:not\(\[class\*\=size-\]\)\]\:size-4 svg:not([class*=size-]),
@@ -544,7 +504,6 @@
 .max-h-60{max-height:15rem;}
 .max-h-65{max-height:16.25rem;}
 .max-h-70{max-height:17.5rem;}
-.max-h-72{max-height:18rem;}
 .max-h-75{max-height:18.75rem;}
 .max-h-80{max-height:20rem;}
 .max-h-90{max-height:22.5rem;}
@@ -607,7 +566,6 @@
 .w-\[--soybean-tabs-indicator-size\]{width:var(--soybean-tabs-indicator-size);}
 .w-\[calc\(var\(--soybean-sidebar-width\)\+var\(--soybean-layout-spacing\)\)\]{width:calc(var(--soybean-sidebar-width) + var(--soybean-layout-spacing));}
 .w-0\.5{width:0.125rem;}
-.w-0\.75{width:0.1875rem;}
 .w-100{width:25rem;}
 .w-11{width:2.75rem;}
 .w-110{width:27.5rem;}
@@ -669,7 +627,6 @@
 .flex-shrink-0,
 .group[data-orientation=horizontal] .group-data-\[orientation\=horizontal\]\:shrink-0,
 .shrink-0{flex-shrink:0;}
-.flex-shrink{flex-shrink:1;}
 .flex-grow,
 .grow{flex-grow:1;}
 .grow-0{flex-grow:0;}
@@ -741,8 +698,12 @@
 .transform-gpu{transform:translate3d(var(--un-translate-x), var(--un-translate-y), var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
 @keyframes una-in{from{opacity:var(--una-enter-opacity,1);transform:translate3d(var(--una-enter-translate-x,0),var(--una-enter-translate-y,0),0) scale3d(var(--una-enter-scale,1),var(--una-enter-scale,1),var(--una-enter-scale,1)) rotate(var(--una-enter-rotate,0))}}
 @keyframes una-out{to{opacity:var(--una-exit-opacity,1);transform:translate3d(var(--una-exit-translate-x,0),var(--una-exit-translate-y,0),0) scale3d(var(--una-exit-scale,1),var(--una-exit-scale,1),var(--una-exit-scale,1)) rotate(var(--una-exit-rotate,0))}}
+@keyframes collapsible-down{from{ height: 0 } to { height: var(--soybean-collapsible-content-height)}}
+@keyframes collapsible-up{from{ height: var(--soybean-collapsible-content-height)} to { height: 0 }}
 @keyframes pulse{0%, 100% {opacity:1} 50% {opacity:.5}}
 .animate-pulse{animation:pulse 2s cubic-bezier(0.4,0,.6,1) infinite;}
+.data-\[state\=closed\]\:animate-collapsible-up[data-state=closed]{animation:collapsible-up 200ms ease-out 1;}
+.data-\[state\=open\]\:animate-collapsible-down[data-state=open]{animation:collapsible-down 200ms ease-out 1;}
 .cursor-default,
 .data-\[disabled\]\:cursor-default[data-disabled],
 .data-\[readonly\]\:cursor-default[data-readonly]{cursor:default;}
@@ -1061,7 +1022,6 @@
 .data-\[state\=active\]\:bg-info\/10[data-state=active]{background-color:hsl(var(--info) / 0.1) /* hsl(var(--info)) */;}
 .bg-muted{--un-bg-opacity:1;background-color:hsl(var(--muted) / var(--un-bg-opacity)) /* hsl(var(--muted)) */;}
 .bg-muted-foreground{--un-bg-opacity:1;background-color:hsl(var(--muted-foreground) / var(--un-bg-opacity)) /* hsl(var(--muted-foreground)) */;}
-.bg-muted-foreground\/70{background-color:hsl(var(--muted-foreground) / 0.7) /* hsl(var(--muted-foreground)) */;}
 .bg-popover{--un-bg-opacity:1;background-color:hsl(var(--popover) / var(--un-bg-opacity)) /* hsl(var(--popover)) */;}
 .bg-primary\/10,
 .data-\[active\=true\]\:bg-primary\/10[data-active=true],
@@ -1247,8 +1207,6 @@
 .px-1\.5{padding-left:0.375rem;padding-right:0.375rem;}
 .data-\[segment\=timeZoneName\]\:px-2[data-segment=timeZoneName],
 .px-2{padding-left:0.5rem;padding-right:0.5rem;}
-.px,
-.px-4{padding-left:1rem;padding-right:1rem;}
 .px-0\.625{padding-left:0.15625rem;padding-right:0.15625rem;}
 .px-0\.875{padding-left:0.21875rem;padding-right:0.21875rem;}
 .px-1\.125{padding-left:0.28125rem;padding-right:0.28125rem;}
@@ -1260,6 +1218,7 @@
 .px-2\.875{padding-left:0.71875rem;padding-right:0.71875rem;}
 .px-3{padding-left:0.75rem;padding-right:0.75rem;}
 .px-3\.5{padding-left:0.875rem;padding-right:0.875rem;}
+.px-4{padding-left:1rem;padding-right:1rem;}
 .px-4\.5{padding-left:1.125rem;padding-right:1.125rem;}
 .px-5{padding-left:1.25rem;padding-right:1.25rem;}
 .px-6{padding-left:1.5rem;padding-right:1.5rem;}
@@ -1648,7 +1607,6 @@
 .focus-within\:ring-offset-background:focus-within{--un-ring-offset-opacity:1;--un-ring-offset-color:hsl(var(--background) / var(--un-ring-offset-opacity)) /* hsl(var(--background)) */;}
 .focus\:ring-offset-background:focus{--un-ring-offset-opacity:1;--un-ring-offset-color:hsl(var(--background) / var(--un-ring-offset-opacity)) /* hsl(var(--background)) */;}
 .focus-visible\:ring-offset-background:focus-visible{--un-ring-offset-opacity:1;--un-ring-offset-color:hsl(var(--background) / var(--un-ring-offset-opacity)) /* hsl(var(--background)) */;}
-.filter{filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);}
 .transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
 .transition-\[border-color\,box-shadow\,transform\]{transition-property:border-color,box-shadow,transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
 .transition-\[box-shadow\,background-color\]{transition-property:box-shadow,background-color;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
@@ -1720,10 +1678,6 @@
 .data-\[state\=closed\]\:slide-out-to-bottom[data-state=closed]{--una-exit-translate-y:100%;}
 .data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state=closed]{--una-exit-translate-x:-50%;}
 .data-\[state\=closed\]\:slide-out-to-top[data-state=closed]{--una-exit-translate-y:-100%;}
-.data-\[state\=open\]\:animate-accordion-down[data-state=open]{animation:shadcn-down 0.2s ease-out;}
-.data-\[state\=closed\]\:animate-accordion-up[data-state=closed]{animation:shadcn-up 0.2s ease-out;}
-.data-\[state\=open\]\:animate-collapsible-down[data-state=open]{animation:shadcn-collapsible-down 0.2s ease-out;}
-.data-\[state\=closed\]\:animate-collapsible-up[data-state=closed]{animation:shadcn-collapsible-up 0.2s ease-out;}
 @supports (overflow:clip){
 .supports-\[overflow\:clip\]\:overflow-clip{overflow:clip;}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soybeanjs/ui",
-  "version": "0.23.0",
+  "version": "0.23.1-beta.1",
   "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": {
@@ -52,13 +52,13 @@
     "fuse.js": "^7.3.0",
     "valibot": "^1.4.0",
     "zod": "^4.4.3",
-    "@soybeanjs/headless": "^0.23.0"
+    "@soybeanjs/headless": "^0.23.1-beta.1"
   },
   "devDependencies": {
     "@soybeanjs/cli": "^1.7.2",
     "@soybeanjs/eslint-config-vue": "^0.0.2",
     "@soybeanjs/unocss-preset": "^0.2.0",
-    "@soybeanjs/unocss-shadcn": "^0.4.0",
+    "@soybeanjs/unocss-shadcn": "^0.5.0",
     "@types/node": "^25.9.0",
     "@unocss/cli": "^66.6.8",
     "@vitejs/plugin-vue": "^6.0.7",
@@ -100,7 +100,7 @@
   },
   "scripts": {
     "build": "pnpm build:headless && pnpm build:ui && pnpm build:css && pnpm sui skills",
-    "build:css": "unocss build",
+    "build:css": "unocss 'src/styles/**/*.ts' -o dist/styles.css --preflights false",
     "build:docs": "pnpm --filter @soybeanjs/ui-docs build",
     "build:headless": "pnpm --filter @soybeanjs/headless build",
     "build:play": "vite build",
@@ -115,7 +115,7 @@
     "preview:docs": "pnpm --filter @soybeanjs/ui-docs preview",
     "publish-pkg": "pnpm publish -r --access public",
     "release": "soy release -e 'pnpm release-execute'",
-    "release-execute": "pnpm sui skills && pnpm sui changelog && pnpm sui changelog-translate",
+    "release-execute": "pnpm soy changelog && pnpm sui skills && pnpm sui changelog && pnpm sui changelog-translate",
     "sui": "tsx scripts/cli.ts",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",

package/dist/constants/common.js

@@ -1 +0,0 @@
-const e=[`xs`,`sm`,`md`,`lg`,`xl`,`2xl`];export{e as themeSizes};