@soybeanjs/ui 0.14.0 → 0.15.0-beta.1

package/dist/components/table/hooks.js

@@ -1 +1 @@
-import{shallowRef as e,watch as t}from"vue";import{useTable as n}from"@soybeanjs/hooks";function r(e){return n({...e,getColumnChecks:a,getColumns:o})}function i(r){let{page:i=1,pageSize:s=10,fetchOnPaginationChange:c=!0,onFetched:l}=r,u=e(i),d=e(s),f=e(0),p=n({...r,pagination:!0,getColumnChecks:a,getColumns:o,onFetched:e=>{e.total&&e.total!==f.value&&(f.value=e.total),e.page&&e.page!==u.value&&(u.value=e.page),e.pageSize&&e.pageSize!==d.value&&(d.value=e.pageSize),l?.(e)}});return t([u,d],()=>{c&&p.fetchData()},{flush:`post`}),{page:u,pageSize:d,total:f,...p}}function a(e){let t=[];return e.forEach(e=>{let{type:n,dataIndex:r,title:i,hidden:a}=e;if(n)return;let o=r,s={key:o,title:i||o,checked:!0,hidden:a,fixed:!1};t.push(s)}),t}function o(e,t){let n=new Map,r=new Map;e.forEach((e,t)=>{if(e.type){r.set(e.type,{column:e,index:t});return}else e.dataIndex&&n.set(e.dataIndex,e)});let i=[];return t.filter(e=>e.checked).forEach(e=>{let t=n.get(e.key);t&&i.push(t)}),r.forEach(({column:e,index:t})=>{t>=i.length?i.push(e):i.splice(t,0,e)}),i}export{i as usePaginatedTable,r as useTable};
+import{shallowRef as e,watch as t}from"vue";import{useTable as n}from"@soybeanjs/hooks";import{getTableColumnKey as r,isTableGroupColumn as i}from"@soybeanjs/headless/table";function a(e){return n({...e,getColumnChecks:s,getColumns:c})}function o(r){let{page:i=1,pageSize:a=10,fetchOnPaginationChange:o=!0,onFetched:l}=r,u=e(i),d=e(a),f=e(0),p=n({...r,pagination:!0,getColumnChecks:s,getColumns:c,onFetched:e=>{e.total&&e.total!==f.value&&(f.value=e.total),e.page&&e.page!==u.value&&(u.value=e.page),e.pageSize&&e.pageSize!==d.value&&(d.value=e.pageSize),l?.(e)}});return t([u,d],()=>{o&&p.fetchData()},{flush:`post`}),{page:u,pageSize:d,total:f,...p}}function s(e){let t=[];return e.forEach(e=>{if(i(e)){t.push(...s(e.children));return}let{type:n,title:a,hidden:o}=e;if(n||!e.dataIndex)return;let c=r(e),l={key:c,title:a||c,checked:!0,hidden:o,fixed:!1};t.push(l)}),t}function c(e,t){let n=new Map,a=new Map(t.map(e=>[e.key,e]));return e.forEach((e,t)=>{if(e.type){n.set(e.type,{column:e,index:t});return}}),e.reduce((e,o,s)=>{if(o.type){let t=n.get(o.type);return!t||t.index!==s||e.push(o),e}if(i(o)){let n=c(o.children,t);return n.length>0&&e.push({...o,children:n}),e}return a.get(r(o))?.checked!==!1&&e.push(o),e},[])}export{o as usePaginatedTable,a as useTable};

package/dist/components/table/index.d.ts

@@ -1,4 +1,4 @@
-import { BaseTableData, TableAlign, TableColumn, TableColumnType, TableEmits, TableProps, TableRadioProps, TableSelectionProps, TableSlots } from "./types.js";
+import { TableBaseData, TableColumn, TableColumnFilter, TableColumnFilterOption, TableColumnFilterValue, TableColumnType, TableEmits, TableExtendedUi, TableExtraUiSlot, TableFilterPopoverColumnMeta, TableFilterPopoverOption, TableFilterPopoverProps, TableProps, TableRadioProps, TableSlots, TableSortOrder } from "./types.js";
 import { _default } from "./table.vue.js";
 import { usePaginatedTable, useTable as useTable$1 } from "./hooks.js";
 import { TableCell as STableCell, TableRow as STableRow } from "@soybeanjs/headless";

package/dist/components/table/table-filter-popover.js

@@ -0,0 +1 @@
+import{miniSizeMap as e}from"../../theme/config.js";import"../../theme/index.js";import t from"../button/button.js";import n from"../button/button-icon.js";import r from"../checkbox/checkbox.js";import i from"../popover/popover.js";import a from"../input/input.js";import{Fragment as o,computed as s,createBlock as c,createCommentVNode as l,createElementBlock as u,createElementVNode as d,createTextVNode as f,createVNode as p,defineComponent as m,normalizeClass as h,openBlock as g,renderList as _,toDisplayString as v,withCtx as y}from"vue";const b=m({name:`STableFilterPopover`,__name:`table-filter-popover`,props:{size:{},ui:{},column:{},filterValue:{},filterValues:{},filterState:{},filtered:{type:Boolean},filterOptions:{},setFilterValue:{type:Function},setFilterValues:{type:Function},setFilterState:{type:Function},toggleFilterOption:{type:Function},isFilterOptionSelected:{type:Function},clearFilter:{type:Function}},setup(m){let b=m,x=s(()=>b.column.title??b.column.key??b.column.dataIndex??`column`),S=s(()=>{let e=b.filterValue.trim().toLowerCase();return e?b.filterOptions.filter(t=>t.label.toLowerCase().includes(e)||t.value.toLowerCase().includes(e)):b.filterOptions}),C=s(()=>S.value.length>0),w=s(()=>b.filterValues.length>0?`${b.filterValues.length} selected`:b.filterValue.trim().length>0?`Keyword active`:b.filterOptions.length>0?`${b.filterOptions.length} options`:`No filter options`),T=s(()=>b.filtered?`Edit filter for ${x.value}`:`Filter ${x.value}`),E=s(()=>`Search filter options for ${x.value}`),D=s(()=>e[b.size??`md`]);function O(e){b.setFilterValue(String(e??``))}return(e,s)=>(g(),c(i,{class:h(m.ui.filterPopup),size:m.size,placement:`bottom-end`,"show-arrow":!1},{trigger:y(()=>[p(n,{icon:`lucide:funnel`,"data-filtered":b.filtered?``:void 0,class:h(m.ui.filterTrigger),size:D.value,"aria-label":T.value,"aria-pressed":m.filtered||void 0},null,8,[`data-filtered`,`class`,`size`,`aria-label`,`aria-pressed`])]),default:y(()=>[p(a,{class:h(m.ui.filterSearch),size:D.value,"model-value":m.filterValue,"control-props":{"aria-label":E.value,placeholder:`Search ${x.value}`},"onUpdate:modelValue":O},null,8,[`class`,`size`,`model-value`,`control-props`]),m.filterOptions.length>0?(g(),u(`div`,{key:0,class:h(m.ui.filterOptions)},[(g(!0),u(o,null,_(S.value,e=>(g(),c(r,{key:e.value,class:h(m.ui.filterOption),size:D.value,disabled:e.disabled,"model-value":m.isFilterOptionSelected(e.value),label:e.label,ui:{label:m.ui.filterOptionLabel},"control-props":{"aria-label":`Select ${e.label}`},"onUpdate:modelValue":t=>m.toggleFilterOption(e.value)},null,8,[`class`,`size`,`disabled`,`model-value`,`label`,`ui`,`control-props`,`onUpdate:modelValue`]))),128)),C.value?l(`v-if`,!0):(g(),u(`div`,{key:0,class:h(m.ui.filterEmpty)},`No matching options`,2))],2)):l(`v-if`,!0),d(`div`,{class:h(m.ui.filterFooter)},[d(`span`,{class:h(m.ui.filterCount)},v(w.value),3),m.filtered?(g(),c(t,{key:0,variant:`ghost`,color:`accent`,"fit-content":``,size:D.value,class:h(m.ui.filterAction),onClick:m.clearFilter},{default:y(()=>[...s[0]||=[f(` Clear `,-1)]]),_:1},8,[`size`,`class`,`onClick`])):l(`v-if`,!0)],2)]),_:1},8,[`class`,`size`]))}});export{b as default};

package/dist/components/table/table-radio.js

@@ -1 +1 @@
-import{tableVariants as e}from"./variants.js";import{computed as t,createCommentVNode as n,createElementBlock as r,defineComponent as i,normalizeClass as a,openBlock as o}from"vue";const s=i({name:`STableRadio`,__name:`table-radio`,props:{size:{},checked:{type:Boolean}},setup(i){let s=i,c=t(()=>{let t=e({size:s.size});return{radioRoot:t.radioRoot(),radioIndicator:t.radioIndicator()}});return(e,t)=>(o(),r(`button`,{class:a(c.value.radioRoot)},[i.checked?(o(),r(`span`,{key:0,class:a(c.value.radioIndicator)},null,2)):n(`v-if`,!0)],2))}});export{s as default};
+import{tableVariants as e}from"./variants.js";import{computed as t,createCommentVNode as n,createElementBlock as r,defineComponent as i,normalizeClass as a,openBlock as o}from"vue";const s=[`aria-pressed`],c=i({name:`STableRadio`,__name:`table-radio`,props:{size:{},checked:{type:Boolean}},setup(i){let c=i,l=t(()=>{let t=e({size:c.size});return{radioRoot:t.radioRoot(),radioIndicator:t.radioIndicator()}});return(e,t)=>(o(),r(`button`,{type:`button`,"aria-pressed":i.checked,class:a(l.value.radioRoot)},[i.checked?(o(),r(`span`,{key:0,class:a(l.value.radioIndicator)},null,2)):n(`v-if`,!0)],10,s))}});export{c as default};

package/dist/components/table/table.js

@@ -1 +1 @@
-import{mergeSlotVariants as e}from"../../theme/shared.js";import"../../theme/index.js";import t from"../button/button-icon.js";import n from"../checkbox/checkbox.js";import{tableVariants as r}from"./variants.js";import i from"./table-radio.js";import{getTableRowValueByDataIndex as a}from"./shared.js";import{Fragment as o,computed as s,createBlock as c,createCommentVNode as l,createElementBlock as u,createTextVNode as d,createVNode as f,defineComponent as p,guardReactiveProps as m,mergeProps as h,normalizeClass as g,normalizeProps as _,openBlock as v,renderList as y,renderSlot as b,toDisplayString as x,unref as S,useSlots as C,withCtx as w}from"vue";import{useControllableState as T,useSelection as E}from"@soybeanjs/headless/composables";import{TableBody as D,TableCell as O,TableContent as k,TableFooter as A,TableHead as j,TableHeader as M,TableRoot as N,TableRow as P,provideTableUi as F}from"@soybeanjs/headless";const I=p({name:`STable`,__name:`table`,props:{class:{},ui:{},size:{},columns:{},data:{},rowKey:{},bordered:{type:[Boolean,String]},striped:{type:Boolean},defaultExpanded:{},expanded:{},defaultExpandAll:{type:Boolean},contentProps:{},headerProps:{},bodyProps:{},footerProps:{},headProps:{},rowProps:{},cellProps:{},defaultSelected:{},selected:{},multiple:{default:!0}},emits:[`update:expanded`,`update:selected`],setup(p,{emit:I}){let L=p,R=I,z=C(),B=s(()=>e(r({size:L.size,bordered:L.bordered,striped:L.striped}),L.ui,{root:L.class})),V=T(()=>L.expanded,e=>{R(`update:expanded`,e??[])},H());function H(){return L.defaultExpandAll?L.data.map(e=>L.rowKey(e)):L.defaultExpanded??[]}let U=e=>{V.value.indexOf(e)>=0?V.value=V.value.filter(t=>t!==e):V.value=[...V.value,e]},{modelValue:W,onModelValueChange:G,setModelValue:K,resetModelValue:q,isMultiple:J,isValueSelected:Y}=E(s(()=>({modelValue:L.selected,defaultValue:L.defaultSelected,multiple:L.multiple})),e=>{R(`update:selected`,e)}),X=s(()=>!Array.isArray(W.value)||W.value.length===0?!1:W.value.length===L.data.length?!0:`indeterminate`),Z=e=>{Array.isArray(W.value)&&(e===!0?K(L.data.map(e=>L.rowKey(e))):q())},Q=s(()=>L.columns.filter(e=>!e.hidden)),$=s(()=>L.columns.some(e=>e.type===`expand`));return F(B),(e,r)=>(v(),c(S(N),null,{default:w(()=>[f(S(k),_(m(p.contentProps)),{default:w(()=>[f(S(M),_(m(p.headerProps)),{default:w(()=>[f(S(P),_(m(p.rowProps)),{default:w(()=>[(v(!0),u(o,null,y(Q.value,t=>(v(),u(o,null,[t.dataIndex?(v(),c(S(j),h({key:0,ref_for:!0},p.headProps,{key:t.dataIndex,align:t.align??`left`,style:{width:t.width}}),{default:w(()=>[b(e.$slots,`header-${t.dataIndex}`,{column:t},()=>[d(x(t.title),1)])]),_:2},1040,[`align`,`style`])):t.type?(v(),c(S(j),h({key:1,ref_for:!0},p.headProps,{key:`__${t.type}`,align:t.align??`center`,style:{width:t.width}}),{default:w(()=>[b(e.$slots,`header-${t.type}`,{column:t,multiple:S(J)},()=>[t.type===`index`?(v(),u(o,{key:0},[d(x(t.title??`#`),1)],64)):l(`v-if`,!0),t.type===`selection`?(v(),u(o,{key:1},[S(J)?(v(),c(n,{key:0,"model-value":X.value,class:g(B.value.selection),"onUpdate:modelValue":Z},null,8,[`model-value`,`class`])):l(`v-if`,!0)],64)):l(`v-if`,!0),t.type===`expand`?(v(),u(o,{key:2},[d(x(t.title),1)],64)):l(`v-if`,!0)])]),_:2},1040,[`align`,`style`])):l(`v-if`,!0)],64))),256))]),_:3},16)]),_:3},16),f(S(D),_(m(p.bodyProps)),{default:w(()=>[(v(!0),u(o,null,y(p.data,(r,s)=>(v(),u(o,{key:p.rowKey(r)},[f(S(P),h({ref_for:!0},p.rowProps,{"data-row":``}),{default:w(()=>[(v(!0),u(o,null,y(Q.value,f=>(v(),u(o,null,[f.dataIndex?(v(),c(S(O),h({key:0,ref_for:!0},p.cellProps,{key:f.dataIndex,align:f.align??`left`,style:{width:f.width}}),{default:w(()=>[b(e.$slots,f.dataIndex,{index:s,column:f,row:r,value:S(a)(r,f.dataIndex)},()=>[d(x(S(a)(r,f.dataIndex)),1)])]),_:2},1040,[`align`,`style`])):f.type?(v(),c(S(O),h({key:1,ref_for:!0},p.cellProps,{key:`__${f.type}`,align:f.align??`center`,style:{width:f.width}}),{default:w(()=>[f.type===`index`?b(e.$slots,`index`,{key:0,index:s,column:f,row:r},()=>[d(x(s+1),1)]):l(`v-if`,!0),f.type===`selection`?b(e.$slots,`selection`,{key:1,index:s,column:f,row:r,multiple:S(J)},()=>[S(J)?(v(),c(n,{key:0,class:g(B.value.selection),"model-value":S(Y)(p.rowKey(r)),"onUpdate:modelValue":e=>S(G)(p.rowKey(r))},null,8,[`class`,`model-value`,`onUpdate:modelValue`])):(v(),c(i,{key:1,size:p.size,checked:S(Y)(p.rowKey(r)),onClick:e=>S(G)(p.rowKey(r))},null,8,[`size`,`checked`,`onClick`]))]):l(`v-if`,!0),f.type===`expand`?b(e.$slots,`expand`,{key:2,index:s,column:f,row:r,expanded:S(V).includes(p.rowKey(r)),toggleExpand:()=>U(p.rowKey(r))},()=>[S(V).includes(p.rowKey(r))?(v(),c(t,{key:0,icon:`lucide:chevron-down`,onClick:e=>U(p.rowKey(r))},null,8,[`onClick`])):(v(),c(t,{key:1,icon:`lucide:chevron-right`,onClick:e=>U(p.rowKey(r))},null,8,[`onClick`]))]):l(`v-if`,!0)]),_:2},1040,[`align`,`style`])):l(`v-if`,!0)],64))),256))]),_:2},1040),$.value&&S(V).includes(p.rowKey(r))?(v(),c(S(P),h({key:0,ref_for:!0},p.rowProps,{"data-expanded-row":``}),{default:w(()=>[f(S(O),h({ref_for:!0},p.cellProps,{colspan:Q.value.length}),{default:w(()=>[b(e.$slots,`expanded-row`,{index:s,row:r})]),_:2},1040,[`colspan`])]),_:2},1040)):l(`v-if`,!0)],64))),128))]),_:3},16),z.footer?(v(),c(S(A),_(h({key:0},p.footerProps)),{default:w(()=>[b(e.$slots,`footer`,{columnSize:Q.value.length})]),_:3},16)):l(`v-if`,!0)]),_:3},16)]),_:3}))}});export{I as default};
+import{mergeSlotVariants as e}from"../../theme/shared.js";import{miniSizeMap as t}from"../../theme/config.js";import"../../theme/index.js";import n from"../button/button-icon.js";import r from"../checkbox/checkbox.js";import i from"./table-filter-popover.js";import{tableVariants as a}from"./variants.js";import o from"./table-radio.js";import{computed as s,createBlock as c,createCommentVNode as l,createElementVNode as u,createSlots as d,createVNode as f,defineComponent as p,guardReactiveProps as m,mergeProps as h,normalizeClass as g,normalizeProps as _,openBlock as v,renderList as y,renderSlot as b,toHandlers as x,unref as S,useSlots as C,withCtx as w}from"vue";import{useForwardListeners as T,useOmitProps as E}from"@soybeanjs/headless/composables";import{TableCompact as D,provideTableUi as O}from"@soybeanjs/headless";const k=[`aria-label`,`aria-pressed`,`data-resizing`,`onPointerdown`,`onKeydown`],A=p({name:`STable`,__name:`table`,props:{class:{},size:{},ui:{},bordered:{type:Boolean},striped:{type:Boolean},columns:{},data:{},rowKey:{type:Function},defaultSortState:{},sortState:{},defaultFilterState:{},filterState:{},defaultColumnWidths:{},columnWidths:{},getChildren:{type:Function},indent:{},virtual:{type:Boolean},height:{},estimateSize:{type:[Number,Function]},virtualizerOptions:{},defaultExpanded:{},expanded:{},defaultExpandAll:{type:Boolean},contentProps:{},headerProps:{},bodyProps:{},footerProps:{},headProps:{},rowProps:{},cellProps:{},dir:{},defaultSelected:{},selected:{},multiple:{}},emits:[`update:sortState`,`update:filterState`,`update:columnWidths`,`update:expanded`,`update:selected`],setup(p,{emit:A}){let j=p,M=A,N=C(),P=E(j,[`class`,`ui`,`size`,`bordered`,`striped`]),F=T(M),I=s(()=>Object.keys(N)),L=s(()=>e(a({size:j.size,bordered:j.bordered,striped:j.striped}),j.ui,{root:j.class})),R=s(()=>t[j.size??`md`]),z=e=>e===`asc`?`lucide:arrow-up`:e===`desc`?`lucide:arrow-down`:`lucide:arrow-up-down`;return O(L),(e,t)=>(v(),c(S(D),h(S(P),x(S(F))),d({_:2},[y(I.value,t=>({name:t,fn:w(n=>[b(e.$slots,t,_(m(n)))])})),N[`header-selection`]?void 0:{name:`header-selection`,fn:w(({checked:e,disabled:t,multiple:n,updateChecked:i})=>[n?(v(),c(r,{key:0,disabled:t,"model-value":e,class:g(L.value.selection),"control-props":{"aria-label":`Select all rows`},"onUpdate:modelValue":i},null,8,[`disabled`,`model-value`,`class`,`onUpdate:modelValue`])):l(`v-if`,!0)]),key:`0`},N.selection?void 0:{name:`selection`,fn:w(({checked:e,multiple:t,ariaLabel:n,toggleSelect:i})=>[t?(v(),c(r,{key:0,class:g(L.value.selection),"model-value":e,"control-props":{"aria-label":n},"onUpdate:modelValue":e=>i()},null,8,[`class`,`model-value`,`control-props`,`onUpdate:modelValue`])):(v(),c(o,{key:1,size:p.size,checked:e,"aria-label":n,onClick:e=>i()},null,8,[`size`,`checked`,`aria-label`,`onClick`]))]),key:`1`},N[`header-sort`]?void 0:{name:`header-sort`,fn:w(({sortOrder:e,ariaLabel:t,toggleSort:r})=>[f(n,{icon:z(e),class:g(L.value.sortTrigger),size:R.value,"aria-label":t,"data-sorted":e?``:void 0,onClick:e=>r()},null,8,[`icon`,`class`,`size`,`aria-label`,`data-sorted`,`onClick`])]),key:`2`},N[`header-filter`]?void 0:{name:`header-filter`,fn:w(e=>[f(i,h(e,{ui:L.value,size:p.size}),null,16,[`ui`,`size`])]),key:`3`},N[`header-resize`]?void 0:{name:`header-resize`,fn:w(({resizing:e,ariaLabel:t,onPointerdown:n,onKeydown:r})=>[u(`button`,{type:`button`,class:g(L.value.resizeHandle),"aria-label":t,"aria-pressed":e,"data-resizing":e||void 0,onPointerdown:n,onKeydown:r},null,42,k)]),key:`4`},N[`tree-toggle`]?void 0:{name:`tree-toggle`,fn:w(({expanded:e,ariaLabel:t,toggleExpand:r})=>[f(n,{class:g(L.value.treeToggle),size:R.value,"aria-expanded":e,"aria-label":t,icon:e?`lucide:chevron-down`:`lucide:chevron-right`,onClick:e=>r()},null,8,[`class`,`size`,`aria-expanded`,`aria-label`,`icon`,`onClick`])]),key:`5`},N.expand?void 0:{name:`expand`,fn:w(({expanded:e,ariaLabel:t,hasChildren:r,toggleExpand:i})=>[r||N[`expanded-row`]?(v(),c(n,{key:0,icon:e?`lucide:chevron-down`:`lucide:chevron-right`,class:g(L.value.treeToggle),size:R.value,"aria-expanded":e,"aria-label":t,"data-expanded":e?``:void 0,onClick:e=>i()},null,8,[`icon`,`class`,`size`,`aria-expanded`,`aria-label`,`data-expanded`,`onClick`])):l(`v-if`,!0)]),key:`6`}]),1040))}});export{A as default};

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

@@ -1,9 +1,13 @@
-import { BaseTableData, TableProps, TableSlots } from "./types.js";
+import { TableBaseData, TableProps, TableSlots } from "./types.js";
 import * as _$vue from "vue";
+import * as _$_soybeanjs_headless0 from "@soybeanjs/headless";
 
 //#region src/components/table/table.vue.d.ts
-declare const __VLS_export: <T extends BaseTableData = BaseTableData, R extends string | number = string | number, M extends boolean = boolean>(__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<{
+declare const __VLS_export: <T extends TableBaseData = TableBaseData, R extends string | number = string | number, M extends boolean = boolean>(__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: _$vue.PublicProps & __VLS_PrettifyLocal<TableProps<T, R, M> & {
+    "onUpdate:sortState"?: ((state: _$_soybeanjs_headless0.TableSortState | undefined) => any) | undefined;
+    "onUpdate:filterState"?: ((state: _$_soybeanjs_headless0.TableFilterState) => any) | undefined;
+    "onUpdate:columnWidths"?: ((state: _$_soybeanjs_headless0.TableColumnWidthState) => any) | undefined;
     "onUpdate:expanded"?: ((expanded: R[]) => any) | undefined;
     "onUpdate:selected"?: ((selected: M extends true ? R[] : R | undefined) => any) | undefined;
   }> & (typeof globalThis extends {
@@ -12,7 +16,7 @@ declare const __VLS_export: <T extends BaseTableData = BaseTableData, R extends
   expose: (exposed: {}) => void;
   attrs: any;
   slots: TableSlots<T>;
-  emit: ((evt: "update:expanded", expanded: R[]) => void) & ((evt: "update:selected", selected: M extends true ? R[] : R | undefined) => void);
+  emit: ((evt: "update:sortState", state: _$_soybeanjs_headless0.TableSortState | undefined) => void) & ((evt: "update:filterState", state: _$_soybeanjs_headless0.TableFilterState) => void) & ((evt: "update:columnWidths", state: _$_soybeanjs_headless0.TableColumnWidthState) => void) & ((evt: "update:expanded", expanded: R[]) => void) & ((evt: "update:selected", selected: M extends true ? R[] : R | undefined) => void);
 }>) => _$vue.VNode & {
   __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/components/table/types.d.ts

@@ -1,97 +1,39 @@
 import { ThemeSize } from "../../theme/types.js";
-import { Path, PathValue, TableBodyProps, TableCellProps, TableContentProps, TableFooterProps, TableHeadProps, TableHeaderProps, TableRootProps, TableRowProps, TableUi } from "@soybeanjs/headless";
+import { ClassValue, UiClass } from "@soybeanjs/headless";
+import { TableBaseData, TableColumn, TableColumnFilter, TableColumnFilterOption, TableColumnFilterValue, TableColumnType, TableCompactEmits, TableCompactProps, TableCompactSlots, TableHeaderFilterSlotProps, TableSortOrder, TableUiSlot, TableUnifiedKey } from "@soybeanjs/headless/table";
 
 //#region src/components/table/types.d.ts
-type BaseTableData = Record<string, any>;
-type TableAlign = 'left' | 'center' | 'right';
-type TableColumnType = 'index' | 'selection' | 'expand';
-interface TableColumn<T = BaseTableData> {
-  type?: TableColumnType;
-  dataIndex?: Path<T>;
-  title?: string;
-  align?: TableAlign;
-  width?: string;
-  hidden?: boolean;
-}
-interface TableSelectionProps<R extends string | number = string | number, M extends boolean = false> {
-  defaultSelected?: M extends true ? R[] : R;
-  selected?: M extends true ? R[] : R;
-  multiple?: M;
-}
-interface TableProps<T extends BaseTableData = BaseTableData, R extends string | number = string | number, M extends boolean = false> extends TableRootProps, TableSelectionProps<R, M> {
+type TableExtraUiSlot = 'selection' | 'filterTrigger' | 'filterPopup' | 'filterSearch' | 'filterOptions' | 'filterOption' | 'filterOptionLabel' | 'filterFooter' | 'filterCount' | 'filterAction' | 'filterEmpty';
+type TableExtendedUi = UiClass<TableUiSlot | TableExtraUiSlot>;
+interface TableProps<T extends TableBaseData = TableBaseData, R extends string | number = string | number, M extends boolean = false> extends TableCompactProps<T, R, M> {
   /**
    * Additional class names to apply to the table.
    */
-  class?: string;
-  ui?: Partial<TableUi>;
+  class?: ClassValue;
   size?: ThemeSize;
-  columns: TableColumn<T>[];
-  data: T[];
-  rowKey: (row: T) => R;
-  bordered?: boolean | 'all';
+  ui?: Partial<TableExtendedUi>;
+  bordered?: boolean;
   striped?: boolean;
-  defaultExpanded?: R[];
-  expanded?: R[];
-  defaultExpandAll?: boolean;
-  contentProps?: TableContentProps;
-  headerProps?: TableHeaderProps;
-  bodyProps?: TableBodyProps;
-  footerProps?: TableFooterProps;
-  headProps?: TableHeadProps;
-  rowProps?: TableRowProps;
-  cellProps?: TableCellProps;
 }
-type TableEmits<R extends string | number, M extends boolean = false> = {
-  'update:expanded': [expanded: R[]];
-  'update:selected': [selected: M extends true ? R[] : R | undefined];
-};
-type TableSlots<T extends BaseTableData> = { [K in `header-${Path<T>}`]?: (props: {
-  column: TableColumn<T>;
-}) => any } & { [K in Path<T>]?: (props: {
-  index: number;
-  column: TableColumn<T>;
-  row: T;
-  value: PathValue<T, K>;
-}) => any } & {
-  'header-index'?: (props: {
-    column: TableColumn<T>;
-  }) => any;
-  'header-selection'?: (props: {
-    column: TableColumn<T>;
-    multiple: boolean;
-  }) => any;
-  'header-expand'?: (props: {
-    column: TableColumn<T>;
-  }) => any;
-  index?: (props: {
-    index: number;
-    column: TableColumn<T>;
-    row: T;
-  }) => any;
-  selection?: (props: {
-    index: number;
-    column: TableColumn<T>;
-    row: T;
-    multiple: boolean;
-  }) => any;
-  expand?: (props: {
-    index: number;
-    column: TableColumn<T>;
-    row: T;
-    expanded: boolean;
-    toggleExpand: () => void;
-  }) => any;
-  'expanded-row'?: (props: {
-    index: number;
-    row: T;
-  }) => any;
-  footer?: (props: {
-    columnSize: number;
-  }) => any;
-};
+type TableEmits<R extends TableUnifiedKey = TableUnifiedKey, M extends boolean = false> = TableCompactEmits<R, M>;
+type TableSlots<T extends TableBaseData = TableBaseData> = TableCompactSlots<T>;
 interface TableRadioProps {
   size?: ThemeSize;
   checked?: boolean;
 }
+interface TableFilterPopoverColumnMeta {
+  title?: string;
+  key?: string;
+  dataIndex?: string;
+}
+interface TableFilterPopoverOption {
+  label: string;
+  value: string;
+  disabled?: boolean;
+}
+interface TableFilterPopoverProps<T extends TableBaseData = TableBaseData> extends TableHeaderFilterSlotProps<T> {
+  size?: ThemeSize;
+  ui: TableExtendedUi;
+}
 //#endregion
-export { BaseTableData, TableAlign, TableColumn, TableColumnType, TableEmits, TableProps, TableRadioProps, TableSelectionProps, TableSlots };
+export { type TableBaseData, type TableColumn, type TableColumnFilter, type TableColumnFilterOption, type TableColumnFilterValue, type TableColumnType, TableEmits, TableExtendedUi, TableExtraUiSlot, TableFilterPopoverColumnMeta, TableFilterPopoverOption, TableFilterPopoverProps, TableProps, TableRadioProps, TableSlots, type TableSortOrder };

package/dist/components/table/variants.js

@@ -1 +1 @@
-import{tv as e}from"tailwind-variants";const t=e({slots:{root:`relative overflow-auto`,content:`w-full`,header:`sticky top-0 left-0 z-10 bg-accent`,body:``,footer:`bg-accent font-medium`,row:`data-[row]:hover:bg-accent transition-colors`,head:`text-foreground font-medium whitespace-nowrap`,cell:`whitespace-nowrap`,selection:`text-foreground`,radioRoot:[`peer relative shrink-0 rounded-full border border-solid shadow cursor-pointer transition-all-150`,`border-primary focus-visible:ring-primary/30`,`focus-visible:outline-none focus-visible:ring-3  focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50`],radioIndicator:`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-1/2 bg-primary rounded-full`},variants:{size:{xs:{root:`text-2xs`,caption:`py-2`,head:`h-8 px-1.5`,cell:`p-1.5`,radioRoot:`w-3 h-3`},sm:{root:`text-xs`,caption:`py-2.5`,head:`h-9 px-1.75`,cell:`p-1.75`,radioRoot:`w-3.5 h-3.5`},md:{root:`text-sm`,caption:`py-3`,head:`h-10 px-2`,cell:`p-2`,radioRoot:`w-4 h-4`},lg:{root:`text-base`,caption:`py-3.5`,head:`h-12 px-2.5`,cell:`p-2.5`,radioRoot:`w-4.5 h-4.5`},xl:{root:`text-lg`,caption:`py-4`,head:`h-14 px-3`,cell:`p-3`,radioRoot:`w-5 h-5`},"2xl":{root:`text-xl`,caption:`py-4.5`,head:`h-16 px-3.5`,cell:`p-3.5`,radioRoot:`w-6 h-6`}},bordered:{all:{content:`border border-border border-collapse`,head:`border border-border`,cell:`border border-border`},true:{header:`[&_tr]:border`,body:`[&_tr]:border-x`,footer:`[&>tr]:border-x border-t`,row:`border-b`},false:{header:`[&_tr]:border-b`,body:`[&_tr:last-child]:border-0`,footer:`[&>tr]:last:border-b-0 border-t`,row:`border-b`}},striped:{true:{row:`data-[row]:even:bg-accent`}}},defaultVariants:{size:`md`,bordered:!1,striped:!1}});export{t as tableVariants};
+import{tv as e}from"tailwind-variants";const t=e({slots:{root:`relative overflow-auto rounded-md bg-accent`,content:`min-w-full w-max border-spacing-0`,header:`sticky top-0 start-0 z-10 [&>tr:last-child]:border-b-0`,body:[`[&>tr:first-child>td:first-child]:rounded-tl-md [&>tr:first-child>td:last-child]:rounded-tr-md`,`[&>tr:last-child>td:first-child]:rounded-bl-md [&>tr:last-child>td:last-child]:rounded-br-md`],footer:`font-medium [&>tr:last-child]:border-b-0`,row:`bg-background border-b hover:bg-primary-foreground transition-colors`,head:`box-border bg-accent text-foreground relative font-medium whitespace-nowrap`,cell:`box-border whitespace-nowrap data-[fixed]:bg-background`,fixed:[`relative`,`data-[fixed-side=start]:after:pointer-events-none data-[fixed-side=start]:after:absolute data-[fixed-side=start]:after:bottom-0 data-[fixed-side=start]:after:end-0 data-[fixed-side=start]:after:top-0 data-[fixed-side=start]:after:w-4 data-[fixed-side=start]:after:bg-gradient-to-l data-[fixed-side=start]:after:from-foreground/8 data-[fixed-side=start]:after:to-transparent data-[fixed-side=start]:after:content-empty`,`data-[fixed-side=end]:before:pointer-events-none data-[fixed-side=end]:before:absolute data-[fixed-side=end]:before:bottom-0 data-[fixed-side=end]:before:start-0 data-[fixed-side=end]:before:top-0 data-[fixed-side=end]:before:w-4 data-[fixed-side=end]:before:bg-gradient-to-r data-[fixed-side=end]:before:from-foreground/8 data-[fixed-side=end]:before:to-transparent data-[fixed-side=end]:before:content-empty`],resizeHandle:[`absolute end-0 top-1/2 w-3 h-2/3 -translate-y-1/2 rounded bg-transparent`,`cursor-col-resize border-none touch-none select-none`,`after:bg-border hover:after:bg-primary data-[resizing]:after:bg-primary focus-visible:after:bg-primary`,`focus-visible:outline-none focus-visible:ring-ring/40 focus-visible:ring-2`,`after:absolute after:bottom-0 after:end-0 after:top-0 after:w-px after:rounded-full after:content-empty`],treeCell:`flex min-w-0 items-center gap-1`,treeToggle:``,treeTogglePlaceholder:`inline-block size-5 shrink-0`,sortTrigger:`absolute top-1/2 -translate-y-1/2 data-[sorted]:text-primary`,filterTrigger:`absolute top-1/2 -translate-y-1/2 data-[filtered]:text-primary`,filterInput:``,filterPopup:``,filterSearch:``,filterOptions:`flex flex-col overflow-auto`,filterOption:`w-full rounded-md hover:bg-accent`,filterOptionLabel:`min-w-0 flex-1 truncate`,filterFooter:`flex items-center justify-between border-t border-border`,filterCount:`text-muted-foreground`,filterAction:[`text-xs font-medium text-primary rounded-md border-none bg-transparent px-2 py-1`,`transition-colors hover:bg-accent focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2`],filterEmpty:`text-muted-foreground py-6 text-center text-xs`,selection:`text-foreground`,radioRoot:[`peer relative shrink-0 rounded-full border border-solid shadow cursor-pointer transition-all-150`,`border-primary focus-visible:ring-primary/30`,`focus-visible:outline-none focus-visible:ring-3  focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50`],radioIndicator:`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-1/2 bg-primary rounded-full`},variants:{size:{xs:{root:`px-0.75 pb-0.75 text-2xs`,caption:`py-2`,head:`h-8 px-1.5`,cell:`p-1.5`,radioRoot:`w-3 h-3`,sortTrigger:`end-1 p-0.75`,filterTrigger:`end-1`,filterPopup:`p-1.5`,filterOptions:`max-h-50 gap-0.75 py-1.5`,filterOption:`p-0.75`,filterFooter:`pt-1`,filterCount:`text-3xs leading-4`},sm:{root:`px-0.875 pb-0.875 text-xs`,caption:`py-2.5`,head:`h-9 px-1.75`,cell:`p-1.75`,radioRoot:`w-3.5 h-3.5`,sortTrigger:`end-1.25 p-0.875`,filterTrigger:`end-1.25`,filterPopup:`p-1.75`,filterOptions:`max-h-55 gap-0.875 py-2`,filterOption:`p-0.875`,filterFooter:`pt-1.25`,filterCount:`text-2xs leading-5`},md:{root:`px-1 pb-1 text-sm`,caption:`py-3`,head:`h-10 px-2`,cell:`p-2`,radioRoot:`w-4 h-4`,sortTrigger:`end-1.5 p-1`,filterTrigger:`end-1.5`,filterPopup:`p-2`,filterOptions:`max-h-60 gap-1 py-2.5`,filterOption:`p-1`,filterFooter:`pt-1.5`,filterCount:`text-xs leading-6`},lg:{root:`px-1.25 pb-1.25 text-base`,caption:`py-3.5`,head:`h-12 px-2.5`,cell:`p-2.5`,radioRoot:`w-4.5 h-4.5`,sortTrigger:`end-1.75 p-1.25`,filterTrigger:`end-1.75`,filterPopup:`p-2.5`,filterOptions:`max-h-65 gap-1.25 py-3`,filterOption:`p-1.25`,filterFooter:`pt-1.75`,filterCount:`text-sm leading-7`},xl:{root:`px-1.5 pb-1.5 text-lg`,caption:`py-4`,head:`h-14 px-3`,cell:`p-3`,radioRoot:`w-5 h-5`,sortTrigger:`end-2 p-1.5`,filterTrigger:`end-2`,filterPopup:`p-3`,filterOptions:`max-h-70 gap-1.5 py-3.5`,filterOption:`p-1.5`,filterFooter:`pt-2`,filterCount:`text-base leading-8`},"2xl":{root:`px-2 pb-2 text-xl`,caption:`py-4.5`,head:`h-16 px-3.5`,cell:`p-3.5`,radioRoot:`w-6 h-6`,sortTrigger:`end-2.5 p-1.75`,filterTrigger:`end-2.5`,filterPopup:`p-3.5`,filterOptions:`max-h-75 gap-1.75 py-4`,filterOption:`p-1.75`,filterFooter:`pt-2.5`,filterCount:`text-lg leading-9`}},bordered:{true:{cell:`border-l border-border first:border-l-0`}},striped:{true:{row:`data-[row]:even:bg-accent`}}},defaultVariants:{size:`md`,striped:!1}});export{t as tableVariants};

package/dist/components/tags-input/index.d.ts

@@ -0,0 +1,5 @@
+import { TagsInputEmits, TagsInputProps } from "./types.js";
+import { _default } from "./tags-input.vue.js";
+import { _default as _default$1 } from "./tags-input-item-delete.vue.js";
+import { TagsInputAcceptableValue, TagsInputClear as STagsInputClear, TagsInputClearProps, TagsInputInput as STagsInputInput, TagsInputInputProps, TagsInputItem as STagsInputItem, TagsInputItemDeleteProps as TagsInputItemDeleteProps$1, TagsInputItemProps, TagsInputItemText as STagsInputItemText, TagsInputItemTextProps, TagsInputRootEmits, TagsInputRootProps, TagsInputUi, TagsInputUiSlot } from "@soybeanjs/headless/tags-input";
+export { STagsInputClear, STagsInputInput, STagsInputItem, STagsInputItemText, type TagsInputAcceptableValue, type TagsInputClearProps, type TagsInputInputProps, type TagsInputItemDeleteProps$1 as TagsInputItemDeleteProps, type TagsInputItemProps, type TagsInputItemTextProps, type TagsInputRootEmits, type TagsInputRootProps, type TagsInputUi, type TagsInputUiSlot };

package/dist/components/tags-input/index.js

@@ -0,0 +1 @@
+import"./tags-input.js";import"./tags-input-item-delete.js";import{TagsInputClear as e,TagsInputInput as t,TagsInputItem as n,TagsInputItemText as r}from"@soybeanjs/headless/tags-input";export{e as STagsInputClear,t as STagsInputInput,n as STagsInputItem,r as STagsInputItemText};

package/dist/components/tags-input/tags-input-item-delete.js

@@ -0,0 +1 @@
+import e from"../icon/icon.js";import{createBlock as t,createVNode as n,defineComponent as r,guardReactiveProps as i,normalizeProps as a,openBlock as o,renderSlot as s,unref as c,withCtx as l}from"vue";import{TagsInputItemDelete as u}from"@soybeanjs/headless";const d=r({name:`STagsInputItemDelete`,__name:`tags-input-item-delete`,props:{asChild:{type:Boolean},as:{}},setup(r){let d=r;return(r,f)=>(o(),t(c(u),a(i(d)),{default:l(()=>[s(r.$slots,`default`,{},()=>[n(e,{icon:`lucide:x`,"aria-hidden":!0})])]),_:3},16))}});export{d as default};

package/dist/components/tags-input/tags-input-item-delete.vue.d.ts

@@ -0,0 +1,18 @@
+import * as _$vue from "vue";
+import { TagsInputItemDeleteProps } from "@soybeanjs/headless/tags-input";
+
+//#region src/components/tags-input/tags-input-item-delete.vue.d.ts
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+  default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: _$vue.DefineComponent<TagsInputItemDeleteProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<TagsInputItemDeleteProps> & Readonly<{}>, {}, {}, {}, {}, string, _$vue.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 & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default };

package/dist/components/tags-input/tags-input.js

@@ -0,0 +1 @@
+import{mergeSlotVariants as e}from"../../theme/shared.js";import"../../theme/index.js";import{tagsInputVariants as t}from"./variants.js";import{computed as n,createBlock as r,defineComponent as i,guardReactiveProps as a,mergeProps as o,normalizeProps as s,openBlock as c,renderSlot as l,toHandlers as u,unref as d,withCtx as f}from"vue";import{useForwardListeners as p,useOmitProps as m}from"@soybeanjs/headless/composables";import{TagsInputRoot as h,provideTagsInputUi as g}from"@soybeanjs/headless";const _=i({name:`STagsInput`,__name:`tags-input`,props:{class:{},size:{},ui:{},id:{},modelValue:{},defaultValue:{},addOnPaste:{type:Boolean},addOnTab:{type:Boolean},addOnBlur:{type:Boolean},duplicate:{type:Boolean},disabled:{type:Boolean},delimiter:{},dir:{},max:{},convertValue:{type:Function},displayValue:{type:Function},name:{},required:{type:Boolean}},emits:[`update:modelValue`,`invalid`,`addTag`,`removeTag`],setup(i,{emit:_}){let v=i,y=_,b=m(v,[`class`,`size`,`ui`,`onInvalid`]),x=p(y);return g(n(()=>e(t({size:v.size}),v.ui,{root:v.class}))),(e,t)=>(c(),r(d(h),o(d(b),u(d(x))),{default:f(t=>[l(e.$slots,`default`,s(a(t)))]),_:3},16))}});export{_ as default};

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

@@ -0,0 +1,29 @@
+import { TagsInputProps } from "./types.js";
+import * as _$vue from "vue";
+import { TagsInputAcceptableValue } from "@soybeanjs/headless";
+
+//#region src/components/tags-input/tags-input.vue.d.ts
+declare const __VLS_export: <T extends TagsInputAcceptableValue = string>(__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: _$vue.PublicProps & __VLS_PrettifyLocal<TagsInputProps<T> & {
+    "onUpdate:modelValue"?: ((value: T[]) => any) | undefined;
+    onInvalid?: ((value: T) => any) | undefined;
+    onAddTag?: ((value: T) => any) | undefined;
+    onRemoveTag?: ((value: T) => any) | undefined;
+  }> & (typeof globalThis extends {
+    __VLS_PROPS_FALLBACK: infer P;
+  } ? P : {});
+  expose: (exposed: {}) => void;
+  attrs: any;
+  slots: {
+    default?: (props: {
+      modelValue: TagsInputAcceptableValue[] | undefined;
+    }) => any;
+  };
+  emit: ((evt: "update:modelValue", value: T[]) => void) & ((evt: "invalid", value: T) => void) & ((evt: "addTag", value: T) => void) & ((evt: "removeTag", value: T) => void);
+}>) => _$vue.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/tags-input/types.d.ts

@@ -0,0 +1,12 @@
+import { ThemeSize } from "../../theme/types.js";
+import { ClassValue, TagsInputRootEmits, TagsInputRootProps, TagsInputUi } from "@soybeanjs/headless";
+
+//#region src/components/tags-input/types.d.ts
+interface TagsInputProps<T = string> extends TagsInputRootProps<T> {
+  class?: ClassValue;
+  size?: ThemeSize;
+  ui?: Partial<TagsInputUi>;
+}
+type TagsInputEmits<T = string> = TagsInputRootEmits<T>;
+//#endregion
+export { TagsInputEmits, TagsInputProps };

package/dist/components/tags-input/variants.js

@@ -0,0 +1 @@
+import{tv as e}from"tailwind-variants";const t=e({slots:{root:[`flex w-full flex-wrap items-center rounded-md border border-input bg-background shadow-xs transition-[color,box-shadow]`,`focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50`,`data-[invalid]:border-destructive data-[invalid]:ring-3 data-[invalid]:ring-destructive/20`,`data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50`],item:[`inline-flex items-center rounded-md bg-secondary ring-offset-background transition-[box-shadow,background-color]`,`data-[state=active]:ring-2 data-[state=active]:ring-ring data-[state=active]:ring-offset-2`,`data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50`],itemText:`rounded bg-transparent`,itemDelete:[`inline-flex items-center justify-center rounded bg-transparent text-muted-foreground transition-colors`,`hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2`],input:[`min-w-24 flex-1 bg-transparent text-foreground outline-none`,`placeholder:text-muted-foreground disabled:cursor-not-allowed`],clear:[`inline-flex items-center justify-center rounded-md text-muted-foreground transition-colors`,`hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2`,`data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50`]},variants:{size:{xs:{root:`gap-1 px-1.5 py-1 text-2xs`,item:`min-h-5 gap-0.5`,itemText:`px-1.5 py-0.5 text-2xs`,itemDelete:`me-0.5 size-4`,input:`min-h-5 px-1 text-2xs`,clear:`size-4 text-xs`},sm:{root:`gap-1.5 px-2 py-1 text-xs`,item:`min-h-5 gap-0.75`,itemText:`px-1.5 py-0.5 text-xs`,itemDelete:`me-0.5 size-4`,input:`min-h-5 px-1 text-xs`,clear:`size-4 text-xs`},md:{root:`gap-2 px-2 py-1 text-sm`,item:`min-h-5 gap-1`,itemText:`px-2 py-0.5 text-sm`,itemDelete:`me-1 size-4`,input:`min-h-5 px-1 text-sm`,clear:`size-4 text-sm`},lg:{root:`gap-2 px-2.5 py-1.5 text-base`,item:`min-h-6 gap-1`,itemText:`px-2 py-0.5 text-base`,itemDelete:`me-1 size-4.5`,input:`min-h-6 px-1 text-base`,clear:`size-4.5 text-base`},xl:{root:`gap-2.5 px-3 py-2 text-lg`,item:`min-h-7 gap-1.5`,itemText:`px-2.5 py-1 text-lg`,itemDelete:`me-1 size-5`,input:`min-h-7 px-1.5 text-lg`,clear:`size-5 text-lg`},"2xl":{root:`gap-3 px-3.5 py-2.5 text-xl`,item:`min-h-8 gap-1.5`,itemText:`px-3 py-1 text-xl`,itemDelete:`me-1.5 size-5.5`,input:`min-h-8 px-1.5 text-xl`,clear:`size-5.5 text-xl`}}},defaultVariants:{size:`md`}});export{t as tagsInputVariants};

package/dist/components/toast/index.d.ts

@@ -1,5 +1,4 @@
-import { ToastColor, ToastProps, UseToastOptions } from "./types.js";
-import { _default } from "./toast.vue.js";
-import { useToast } from "./context.js";
-import { ToastAction as SToastAction, ToastClose as SToastClose } from "@soybeanjs/headless/toast";
-export { SToastAction, SToastClose };
+import { SwipeDirection, ToastPosition, ToastType, ToasterProps } from "./types.js";
+import { _default } from "./toaster.vue.js";
+import { toast } from "@soybeanjs/headless/toast";
+export { toast };

package/dist/components/toast/index.js

@@ -1 +1 @@
-import"./context.js";import"./toast.js";import{ToastAction as e,ToastClose as t}from"@soybeanjs/headless/toast";export{e as SToastAction,t as SToastClose};
+import"./toaster.js";import{toast as e}from"@soybeanjs/headless/toast";export{e as toast};

package/dist/components/toast/styles.js

@@ -0,0 +1,274 @@
+var e=`[data-slot='toast'] {
+  --y: translateY(100%);
+  --lift: 1;
+  --lift-amount: calc(var(--lift) * var(--gap));
+  z-index: var(--z-index);
+  transform: var(--y);
+  overflow-wrap: anywhere;
+
+  transition:
+    transform 400ms,
+    opacity 400ms,
+    height 400ms,
+    box-shadow 200ms;
+
+  box-shadow: 0 4px 12px hsl(var(--foreground) / 0.1);
+}
+
+[data-slot='toast']:focus-visible {
+  box-shadow:
+    0 4px 12px hsl(var(--foreground) / 0.1),
+    0 0 0 2px hsl(var(--foreground) / 0.2);
+}
+
+[data-slot='toast'][data-swiping='true'] {
+  transform: var(--y) translateY(var(--swipe-amount-y, 0px)) translateX(var(--swipe-amount-x, 0px));
+  transition: none;
+}
+
+[data-slot='toast'][data-swiping='true']::before {
+  content: '';
+  position: absolute;
+  inset-inline: -100%;
+  height: 100%;
+  z-index: -1;
+}
+
+[data-slot='toast'][data-y-position='top'][data-swiping='true']::before {
+  bottom: 50%;
+  transform: scaleY(3) translateY(50%);
+}
+
+[data-slot='toast'][data-y-position='bottom'][data-swiping='true']::before {
+  top: 50%;
+  transform: scaleY(3) translateY(-50%);
+}
+
+[data-slot='toast'][data-swiping='false'][data-removed='true']::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  transform: scaleY(2);
+}
+
+[data-slot='toast'][data-expanded='true']::after {
+  content: '';
+  position: absolute;
+  inset-inline-start: 0;
+  height: calc(var(--gap) + 1px);
+  bottom: 100%;
+  width: 100%;
+}
+
+[data-slot='toast'][data-mounted='true'] {
+  --y: translateY(0);
+  opacity: 1;
+}
+
+[data-slot='toast'][data-expanded='false'][data-front='false'] {
+  --scale: var(--toasts-before) * 0.05 + 1;
+  --y: translateY(calc(var(--lift-amount) * var(--toasts-before))) scale(calc(-1 * var(--scale)));
+  height: var(--front-toast-height);
+}
+
+[data-slot='toast'][data-expanded='false'][data-front='false'] > * {
+  opacity: 0;
+}
+
+[data-slot='toast'][data-visible='false'] {
+  opacity: 0;
+  pointer-events: none;
+}
+
+[data-slot='toast'][data-mounted='true'][data-expanded='true'] {
+  --y: translateY(calc(var(--lift) * var(--offset)));
+  height: var(--initial-height);
+}
+
+[data-slot='toast'][data-removed='true'][data-front='true'][data-swipe-out='false'] {
+  --y: translateY(calc(var(--lift) * -100%));
+  opacity: 0;
+}
+
+[data-slot='toast'][data-removed='true'][data-front='false'][data-swipe-out='false'][data-expanded='true'] {
+  --y: translateY(calc(var(--lift) * var(--offset) + var(--lift) * -100%));
+  opacity: 0;
+}
+
+[data-slot='toast'][data-removed='true'][data-front='false'][data-swipe-out='false'][data-expanded='false'] {
+  --y: translateY(40%);
+  opacity: 0;
+  transition:
+    transform 500ms,
+    opacity 200ms;
+}
+
+[data-slot='toast'][data-removed='true'][data-front='false']::before {
+  height: calc(var(--initial-height) + 20%);
+}
+
+[data-slot='toast'][data-swiped='true'] {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+[data-slot='toast'][data-swipe-out='true'][data-y-position='bottom'],
+[data-slot='toast'][data-swipe-out='true'][data-y-position='top'] {
+  animation-duration: 200ms;
+  animation-timing-function: ease-out;
+  animation-fill-mode: forwards;
+}
+
+[data-slot='toast'][data-swipe-out='true'][data-swipe-direction='left'] {
+  animation-name: swipe-out-left;
+}
+
+[data-slot='toast'][data-swipe-out='true'][data-swipe-direction='right'] {
+  animation-name: swipe-out-right;
+}
+
+[data-slot='toast'][data-swipe-out='true'][data-swipe-direction='up'] {
+  animation-name: swipe-out-up;
+}
+
+[data-slot='toast'][data-swipe-out='true'][data-swipe-direction='down'] {
+  animation-name: swipe-out-down;
+}
+
+[data-slot='toast'][data-rich-color='true'][data-type='success'] {
+  background-color: hsl(var(--success-100));
+  border-color: hsl(var(--success));
+  color: hsl(var(--success-foreground));
+}
+
+[data-slot='toast'][data-rich-color='true'][data-type='info'] {
+  background-color: hsl(var(--info-100));
+  border-color: hsl(var(--info));
+  color: hsl(var(--info-foreground));
+}
+
+[data-slot='toast'][data-rich-color='true'][data-type='warning'] {
+  background-color: hsl(var(--warning-100));
+  border-color: hsl(var(--warning));
+  color: hsl(var(--warning-foreground));
+}
+
+[data-slot='toast'][data-rich-color='true'][data-type='error'] {
+  background-color: hsl(var(--destructive-100));
+  border-color: hsl(var(--destructive));
+  color: hsl(var(--destructive-foreground));
+}
+
+[data-slot='toast'][data-inverted='true'] {
+  background-color: hsl(var(--carbon));
+  border-color: hsl(var(--carbon));
+  color: hsl(var(--carbon-foreground));
+}
+
+[data-slot='toast'] > * {
+  transition: opacity 400ms;
+}
+
+@keyframes swipe-out-left {
+  from {
+    transform: var(--y) translateX(var(--swipe-amount-x));
+    opacity: 1;
+  }
+
+  to {
+    transform: var(--y) translateX(calc(var(--swipe-amount-x) - 100%));
+    opacity: 0;
+  }
+}
+
+@keyframes swipe-out-right {
+  from {
+    transform: var(--y) translateX(var(--swipe-amount-x));
+    opacity: 1;
+  }
+
+  to {
+    transform: var(--y) translateX(calc(var(--swipe-amount-x) + 100%));
+    opacity: 0;
+  }
+}
+
+@keyframes swipe-out-up {
+  from {
+    transform: var(--y) translateY(var(--swipe-amount-y));
+    opacity: 1;
+  }
+
+  to {
+    transform: var(--y) translateY(calc(var(--swipe-amount-y) - 100%));
+    opacity: 0;
+  }
+}
+
+@keyframes swipe-out-down {
+  from {
+    transform: var(--y) translateY(var(--swipe-amount-y));
+    opacity: 1;
+  }
+
+  to {
+    transform: var(--y) translateY(calc(var(--swipe-amount-y) + 100%));
+    opacity: 0;
+  }
+}
+
+@keyframes sonner-fade-in {
+  0% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes sonner-fade-out {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+}
+
+@media (max-width: 600px) {
+  [data-slot='toaster'] {
+    width: 100%;
+    inset-inline-start: var(--mobile-offset-left);
+    inset-inline-end: var(--mobile-offset-right);
+  }
+
+  [data-slot='toaster'] [data-slot='toast'] {
+    inset-inline: 0;
+    width: calc(100% - var(--mobile-offset-left) * 2);
+  }
+
+  [data-slot='toaster'][data-x-position='left'] {
+    inset-inline-start: var(--mobile-offset-left);
+  }
+
+  [data-slot='toaster'][data-y-position='bottom'] {
+    bottom: var(--mobile-offset-bottom);
+  }
+
+  [data-slot='toaster'][data-y-position='top'] {
+    top: var(--mobile-offset-top);
+  }
+
+  [data-slot='toaster'][data-x-position='center'] {
+    inset-inline-start: var(--mobile-offset-left);
+    inset-inline-end: var(--mobile-offset-right);
+    transform: none;
+  }
+}
+`;export{e as default};

package/dist/components/toast/toaster.js

@@ -0,0 +1 @@
+import{mergeSlotVariants as e}from"../../theme/shared.js";import{miniSizeMap as t}from"../../theme/config.js";import"../../theme/index.js";import n from"../button/button.js";import{toastVariants as r}from"./variants.js";import i from"./styles.js";import a from"../icon/icon.js";import{computed as o,createBlock as s,createTextVNode as c,createVNode as l,defineComponent as u,h as d,mergeProps as f,openBlock as p,renderSlot as m,toDisplayString as h,unref as g,withCtx as _}from"vue";import{useOmitProps as v}from"@soybeanjs/headless/composables";import{Primitive as y,Toaster as b,provideToastUi as x}from"@soybeanjs/headless";const S=u({name:`SToaster`,__name:`toaster`,props:{size:{},ui:{},id:{},dir:{},hotkey:{},customAriaLabel:{},containerAriaLabel:{},position:{},defaultExpanded:{type:Boolean},duration:{},gap:{},offset:{},visibleCounts:{},swipeDirections:{},showIcon:{type:Boolean,default:!0},showClose:{type:Boolean,default:!0},icons:{},iconRender:{type:Function,default:e=>d(a,{icon:e})},buttonRender:{},toastProps:{},wrapperProps:{},contentProps:{},titleProps:{},descriptionProps:{},iconProps:{},footerProps:{},actionProps:{},cancelProps:{},closeProps:{}},setup(a){let u=a,S=v(u,[`size`,`ui`,`icons`,`buttonRender`]),C=o(()=>e(r({size:u.size}),u.ui)),w={info:`lucide:info`,success:`lucide:circle-check`,warning:`lucide:circle-alert`,error:`lucide:circle-x`,close:`lucide:x`,loading:`svg-spinners:270-ring`},T=o(()=>({...w,...u.icons})),E=(e,r)=>u.buttonRender?u.buttonRender(e,r):d(n,{size:t[u.size??`md`],variant:r===`action`?`solid`:`pure`,color:`primary`},{default:()=>e});return x(C),(e,t)=>(p(),s(g(b),f(g(S),{icons:T.value,"button-render":E}),{default:_(()=>[m(e.$slots,`default`),l(g(y),{id:`__SoybeanUI_toastStyle`,as:`style`},{default:_(()=>[c(h(g(i)),1)]),_:1})]),_:3},16,[`icons`]))}});export{S as default};