@bysages/react 0.4.4 → 0.6.0

package/dist/components/signature-pad/index.mjs

@@ -1,9 +1,9 @@
-import { r as iconNode } from "../../icon-Cri0-7-x.mjs";
-import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { r as iconNode } from "../../icon-C9udWCyz.mjs";
+import { t as useElementId } from "../../id-Ctic_3o8.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { SignaturePad as SignaturePad$1 } from "@ark-ui/react/signature-pad";
-//#region src/components/signature-pad/index.tsx
+// src/components/signature-pad/index.tsx
 /** SignaturePad, dressed in the paper-and-ink system: a quiet paper
 * field with a guide hairline where ink — real ink strokes — is laid down.
 * The parts — Root, Label, Control, Segment, SegmentPath, Guide,
@@ -41,5 +41,4 @@ const SignaturePad = Object.assign(SignaturePadFacade, {
 	Root: SignaturePadRoot
 });
 injectComponentStyle("signature-pad");
-//#endregion
 export { SignaturePad };

package/dist/components/skeleton/index.d.mts

@@ -1,5 +1,4 @@
 import { HTMLAttributes } from "react";
-//#region src/components/skeleton/index.d.ts
 /** A waiting sheet of unset paper. Size it from the outside; the breath
  * is the component's own. */
 export type SkeletonProps = HTMLAttributes<HTMLDivElement>;
@@ -7,4 +6,4 @@ declare function SkeletonImpl({ ...rest }: SkeletonProps): import("react").JSX.E
 export declare const Skeleton: typeof SkeletonImpl & {
   Root: typeof SkeletonImpl;
 };
-//#endregion
+export {};

package/dist/components/skeleton/index.mjs

@@ -1,7 +1,7 @@
-import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { t as withSelfRoot } from "../../family-Co1YsN4N.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/skeleton/index.tsx
+// src/components/skeleton/index.tsx
 function SkeletonImpl({ ...rest }) {
 	injectComponentStyle("skeleton");
 	return /* @__PURE__ */ jsx("div", {
@@ -11,5 +11,4 @@ function SkeletonImpl({ ...rest }) {
 	});
 }
 const Skeleton = withSelfRoot(SkeletonImpl);
-//#endregion
 export { Skeleton };

package/dist/components/slider/index.d.mts

@@ -1,6 +1,5 @@
 import { ComponentProps } from "react";
 import { Slider as Slider$1 } from "@ark-ui/react/slider";
-//#region src/components/slider/index.d.ts
 type SliderRootProps = ComponentProps<typeof Slider$1.Root> & {
   /** One rung of the part-size ladder for the thumb seal. */
   size?: "sm" | "md" | "lg";
@@ -32,4 +31,4 @@ type SliderParts = Omit<typeof Slider$1, "Root"> & {
   Root: typeof SliderRoot;
 };
 export declare const Slider: typeof SliderFacade & SliderParts;
-//#endregion
+export {};

package/dist/components/slider/index.mjs

@@ -1,8 +1,8 @@
-import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { t as useElementId } from "../../id-Ctic_3o8.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Slider as Slider$1 } from "@ark-ui/react/slider";
-//#region src/components/slider/index.tsx
+// src/components/slider/index.tsx
 function SliderRoot(props) {
 	const id = useElementId("slider", props);
 	const { size = "md", ...rest } = props;
@@ -40,5 +40,4 @@ const Slider = Object.assign(SliderFacade, {
 	Root: SliderRoot
 });
 injectComponentStyle("slider");
-//#endregion
 export { Slider };

package/dist/components/spinner/index.d.mts

@@ -1,5 +1,4 @@
 import { HTMLAttributes } from "react";
-//#region src/components/spinner/index.d.ts
 export interface SpinnerProps extends HTMLAttributes<HTMLElement> {
   size?: "sm" | "md" | "lg";
 }
@@ -9,4 +8,4 @@ declare function SpinnerImpl({ size, children, ...rest }: SpinnerProps): import(
 export declare const Spinner: typeof SpinnerImpl & {
   Root: typeof SpinnerImpl;
 };
-//#endregion
+export {};

package/dist/components/spinner/index.mjs

@@ -1,8 +1,8 @@
-import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
-import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
+import { t as withSelfRoot } from "../../family-Co1YsN4N.mjs";
+import { n as useComponentMessages } from "../../messages-B6n0lVyt.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/spinner/index.tsx
+// src/components/spinner/index.tsx
 /** A wheel of waiting: one arc of ink turning about its center. Quiet by
 * default — it reports progress without claiming attention. */
 function SpinnerImpl({ size = "md", children, ...rest }) {
@@ -36,5 +36,4 @@ function SpinnerImpl({ size = "md", children, ...rest }) {
 	});
 }
 const Spinner = withSelfRoot(SpinnerImpl);
-//#endregion
 export { Spinner };

package/dist/components/split-button/index.d.mts

@@ -1,6 +1,6 @@
+import { n as FloatingPortalTarget } from "../../floating-BhcDRgnx.mjs";
 import { Menu } from "../menu/index.mjs";
 import { HTMLAttributes } from "react";
-//#region src/components/split-button/index.d.ts
 export interface SplitButtonEntry {
   label: string;
   /** Handed back with `onSelect` when the entry is chosen. */
@@ -9,6 +9,8 @@ export interface SplitButtonEntry {
   disabled?: boolean;
 }
 export interface SplitButtonProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
+  /** Portal after hydration; `false` keeps the vessel inline. */
+  portal?: FloatingPortalTarget;
   /** The main action's label. */
   label: string;
   /** The dropdown's entries. */
@@ -33,6 +35,6 @@ export interface SplitButtonProps extends Omit<HTMLAttributes<HTMLDivElement>, "
  * button stylesheet's trigger register dresses it. The popup keeps the
  * menu parts untouched.
  */
-declare function SplitButtonImpl({ label, items, variant, tone, size, disabled, onClick, onSelect, ...rest }: SplitButtonProps): import("react").JSX.Element;
+declare function SplitButtonImpl({ portal, label, items, variant, tone, size, disabled, onClick, onSelect, ...rest }: SplitButtonProps): import("react").JSX.Element;
 export declare const SplitButton: typeof SplitButtonImpl & typeof Menu;
-//#endregion
+export {};

package/dist/components/split-button/index.mjs

@@ -1,13 +1,13 @@
-import { r as iconNode } from "../../icon-Cri0-7-x.mjs";
-import { t as useElementId } from "../../id-C37UYLwJ.mjs";
-import { n as useComponentMessages } from "../../messages-1jJWtaYU.mjs";
+import { r as iconNode } from "../../icon-C9udWCyz.mjs";
+import { t as useElementId } from "../../id-Ctic_3o8.mjs";
+import { n as useComponentMessages } from "../../messages-B6n0lVyt.mjs";
 import { Button } from "../button/index.mjs";
+import { t as FloatingPortal } from "../../floating-CMR7cvmA.mjs";
 import { Menu as Menu$1 } from "../menu/index.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Portal } from "@ark-ui/react/portal";
 import { Menu } from "@ark-ui/react/menu";
-//#region src/components/split-button/index.tsx
+// src/components/split-button/index.tsx
 /**
 * A primary action with its alternatives one seam away: the main button
 * fires `onClick`, the fitted arrow opens a paper vessel of the same
@@ -17,7 +17,7 @@ import { Menu } from "@ark-ui/react/menu";
 * button stylesheet's trigger register dresses it. The popup keeps the
 * menu parts untouched.
 */
-function SplitButtonImpl({ label, items = [], variant = "solid", tone = "ink", size = "md", disabled = false, onClick, onSelect, ...rest }) {
+function SplitButtonImpl({ portal = false, label, items = [], variant = "solid", tone = "ink", size = "md", disabled = false, onClick, onSelect, ...rest }) {
 	injectComponentStyle("split-button");
 	injectComponentStyle("menu");
 	const hostId = useElementId("split-button", rest);
@@ -49,13 +49,16 @@ function SplitButtonImpl({ label, items = [], variant = "solid", tone = "ink", s
 					"aria-label": messages.more.actions,
 					children: chevronDown
 				})
-			}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, { children: /* @__PURE__ */ jsx(Menu.Content, { children: items.map((entry) => /* @__PURE__ */ jsx(Menu.Item, {
-				value: entry.value,
-				disabled: entry.disabled,
-				"data-danger": entry.danger ? "" : void 0,
-				onSelect: () => onSelect?.(entry.value),
-				children: /* @__PURE__ */ jsx(Menu.ItemText, { children: entry.label })
-			}, entry.value)) }) }) })]
+			}), /* @__PURE__ */ jsx(FloatingPortal, {
+				portal,
+				children: /* @__PURE__ */ jsx(Menu.Positioner, { children: /* @__PURE__ */ jsx(Menu.Content, { children: items.map((entry) => /* @__PURE__ */ jsx(Menu.Item, {
+					value: entry.value,
+					disabled: entry.disabled,
+					"data-danger": entry.danger ? "" : void 0,
+					onSelect: () => onSelect?.(entry.value),
+					children: /* @__PURE__ */ jsx(Menu.ItemText, { children: entry.label })
+				}, entry.value)) }) })
+			})]
 		})]
 	});
 }
@@ -64,5 +67,4 @@ const chevronDown = iconNode("chevron-down", {
 	width: 16,
 	height: 16
 });
-//#endregion
 export { SplitButton };

package/dist/components/splitter/index.d.mts

@@ -1,5 +1,4 @@
 import { Splitter as Splitter$1 } from "@ark-ui/react/splitter";
-//#region src/components/splitter/index.d.ts
 export type SplitterItem = {
   id: string;
   label: string;
@@ -17,4 +16,4 @@ declare namespace SplitterFacade {
 }
 type SplitterParts = typeof Splitter$1;
 export declare const Splitter: typeof SplitterFacade & SplitterParts;
-//#endregion
+export {};

package/dist/components/splitter/index.mjs

@@ -1,9 +1,9 @@
-import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { t as useElementId } from "../../id-Ctic_3o8.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment$1 } from "react";
 import { Splitter as Splitter$1 } from "@ark-ui/react/splitter";
-//#region src/components/splitter/index.tsx
+// src/components/splitter/index.tsx
 /** Ark's Splitter, dressed in the paper-and-ink system: panels divide on
 * a hairline and a small paper-seal thumb answers the hand. The API is
 * Ark's own — Root, Panel, ResizeTrigger, ResizeTriggerIndicator. */
@@ -40,5 +40,4 @@ const Splitter = Object.assign(SplitterFacade, {
 	Root: SplitterRoot
 });
 injectComponentStyle("splitter");
-//#endregion
 export { Splitter };

package/dist/components/spotlight/index.d.mts

@@ -1,5 +1,4 @@
 import { HTMLAttributes, ReactNode } from "react";
-//#region src/components/spotlight/index.d.ts
 export interface SpotlightProps extends HTMLAttributes<HTMLDivElement> {
   /** How far the lamp throws before the ink swallows it. */
   radius?: string;
@@ -12,4 +11,4 @@ declare function SpotlightImpl({ radius, children, ...rest }: SpotlightProps): i
 export declare const Spotlight: typeof SpotlightImpl & {
   Root: typeof SpotlightImpl;
 };
-//#endregion
+export {};

package/dist/components/spotlight/index.mjs

@@ -1,7 +1,7 @@
-import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { t as withSelfRoot } from "../../family-Co1YsN4N.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/spotlight/index.tsx
+// src/components/spotlight/index.tsx
 /** The ink-light card: a vessel whose rim and face take light from the
 * reader's hand. The wrapper only measures and writes the geometry —
 * the lamp itself is the two layers the stylesheet paints. */
@@ -31,5 +31,4 @@ function SpotlightImpl({ radius, children, ...rest }) {
 	});
 }
 const Spotlight = withSelfRoot(SpotlightImpl);
-//#endregion
 export { Spotlight };

package/dist/components/stack/index.d.mts

@@ -1,5 +1,4 @@
 import { HTMLAttributes } from "react";
-//#region src/components/stack/index.d.ts
 export interface StackProps extends HTMLAttributes<HTMLDivElement> {
   direction?: "column" | "row";
   gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
@@ -11,4 +10,4 @@ declare function StackImpl({ direction, gap, wrap, align, justify, ...rest }: St
 export declare const Stack: typeof StackImpl & {
   Root: typeof StackImpl;
 };
-//#endregion
+export {};

package/dist/components/stack/index.mjs

@@ -1,7 +1,7 @@
-import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { t as withSelfRoot } from "../../family-Co1YsN4N.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/stack/index.tsx
+// src/components/stack/index.tsx
 /** Whitespace chosen by name: the named steps point at the space ramp so
 * siblings are held apart by one token, never by ad-hoc margins. */
 const gapVars = {
@@ -30,5 +30,4 @@ function StackImpl({ direction = "column", gap = "md", wrap = false, align, just
 	});
 }
 const Stack = withSelfRoot(StackImpl);
-//#endregion
 export { Stack };

package/dist/components/stat/index.d.mts

@@ -1,5 +1,4 @@
 import { HTMLAttributes } from "react";
-//#region src/components/stat/index.d.ts
 export interface StatDeltaProps extends HTMLAttributes<HTMLElement> {
   direction?: "up" | "down" | "flat";
   "data-direction"?: string;
@@ -25,5 +24,4 @@ export declare const Stat: {
     ({ children, ...rest }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
     displayName: string;
   };
-};
-//#endregion
+};

package/dist/components/stat/index.mjs

@@ -1,6 +1,6 @@
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/stat/index.tsx
+// src/components/stat/index.tsx
 function part(name, tag) {
 	const Tag = tag;
 	const Component = ({ children, ...rest }) => /* @__PURE__ */ jsx(Tag, {
@@ -33,5 +33,4 @@ const Stat = Object.assign(Root, {
 	Description
 });
 injectComponentStyle("stat");
-//#endregion
 export { Stat };

package/dist/components/steps/index.d.mts

@@ -1,6 +1,5 @@
 import { ComponentProps } from "react";
 import { Steps as Steps$1 } from "@ark-ui/react/steps";
-//#region src/components/steps/index.d.ts
 type StepsRootProps = ComponentProps<typeof Steps$1.Root> & {
   /** One rung of the control-height ladder every indicator stands on. */
   size?: "sm" | "md" | "lg";
@@ -43,5 +42,4 @@ type StepsParts = Omit<typeof Steps$1, "Root" | "Item"> & {
   Item: typeof StepsItem;
 };
 export declare const Steps: typeof StepsFacade & StepsParts;
-//#endregion
 export { StepsItem };

package/dist/components/steps/index.mjs

@@ -1,8 +1,8 @@
-import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { t as useElementId } from "../../id-Ctic_3o8.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Steps as Steps$1 } from "@ark-ui/react/steps";
-//#region src/components/steps/index.tsx
+// src/components/steps/index.tsx
 function StepsRoot(props) {
 	const id = useElementId("steps", props);
 	const { size = "md", variant = "default", ...rest } = props;
@@ -46,5 +46,4 @@ const Steps = Object.assign(StepsFacade, {
 	Item: StepsItem
 });
 injectComponentStyle("steps");
-//#endregion
 export { Steps };

package/dist/components/swap/index.d.mts

@@ -1,6 +1,5 @@
 import { ReactNode } from "react";
 import { Swap as Swap$1 } from "@ark-ui/react/swap";
-//#region src/components/swap/index.d.ts
 interface SwapFacadeProps {
   swap?: boolean;
   on?: ReactNode;
@@ -11,4 +10,4 @@ interface SwapFacadeProps {
  * transitions and indicators stay on the anatomy. */
 declare function SwapFacade({ swap, on, off }: SwapFacadeProps): import("react").JSX.Element;
 export declare const Swap: typeof SwapFacade & typeof Swap$1;
-//#endregion
+export {};

package/dist/components/swap/index.mjs

@@ -1,9 +1,9 @@
-import { r as iconNode } from "../../icon-Cri0-7-x.mjs";
-import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { r as iconNode } from "../../icon-C9udWCyz.mjs";
+import { t as useElementId } from "../../id-Ctic_3o8.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Swap as Swap$1 } from "@ark-ui/react/swap";
-//#region src/components/swap/index.tsx
+// src/components/swap/index.tsx
 /** Swap, dressed in the paper-and-ink system: two impressions
 * occupying one seal, the arriving one growing into place on the spring
 * while the departing one shrinks away. The parts — Root,
@@ -34,5 +34,4 @@ const Swap = Object.assign(SwapFacade, {
 	Root: SwapRoot
 });
 injectComponentStyle("swap");
-//#endregion
 export { Swap };

package/dist/components/switch/index.d.mts

@@ -1,6 +1,5 @@
 import { ComponentProps } from "react";
 import { Switch as Switch$1 } from "@ark-ui/react/switch";
-//#region src/components/switch/index.d.ts
 type SwitchRootProps = ComponentProps<typeof Switch$1.Root> & {
   /** One rung for the thumb; the track travels with it. */
   size?: "sm" | "md" | "lg";
@@ -31,4 +30,4 @@ type SwitchParts = Omit<typeof Switch$1, "Root"> & {
   Root: typeof SwitchRoot;
 };
 export declare const Switch: typeof SwitchFacade & SwitchParts;
-//#endregion
+export {};

package/dist/components/switch/index.mjs

@@ -1,8 +1,8 @@
-import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { t as useElementId } from "../../id-Ctic_3o8.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Switch as Switch$1 } from "@ark-ui/react/switch";
-//#region src/components/switch/index.tsx
+// src/components/switch/index.tsx
 function SwitchRoot(props) {
 	const id = useElementId("switch", props);
 	const { size = "md", ...rest } = props;
@@ -36,5 +36,4 @@ const Switch = Object.assign(SwitchFacade, {
 	Root: SwitchRoot
 });
 injectComponentStyle("switch");
-//#endregion
 export { Switch };

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

@@ -1,6 +1,5 @@
-import { CSSProperties } from "react";
+import { CSSProperties, ReactNode } from "react";
 import { CellData, ColumnDef, FlexRender, RowData, SortingState, TableFeatures, createColumnHelper } from "@tanstack/react-table";
-//#region src/components/table/index.d.ts
 /** Column metadata understood by this table: mark columns whose values
  * read right-aligned in tabular figures. The type parameters mirror the
  * library's own declaration — augmentation merging demands an identical
@@ -73,12 +72,31 @@ export interface DataTableProps {
   onRowReorder?: (rows: RowData[]) => void;
   /** Fires with the full leaf-column id order after a header drop. */
   onColumnReorder?: (ids: string[]) => void;
+  /** Render a caller-owned toolbar instead of the built-in global filter.
+   * The function receives the live filter values and setters. */
+  toolbar?: (slot: DataTableToolbarSlot) => ReactNode;
   /** Applied to the root vessel. */
   style?: CSSProperties;
 }
+/** A stable toolbar contract: the wrapper owns TanStack's state atoms and
+ * exposes only the two filter decisions a caller toolbar needs. */
+export interface DataTableToolbarSlot {
+  /** The current global filter value; empty string reads as no filter. */
+  globalFilter: string;
+  setGlobalFilter(value: string): void;
+  /** Current per-column filters, each as `{ id, value }`. */
+  columnFilters: Array<{
+    id: string;
+    value: unknown;
+  }>;
+  setColumnFilters(filters: Array<{
+    id: string;
+    value: unknown;
+  }>): void;
+  clearFilters(): void;
+}
 declare function DataTableImpl(rawProps: DataTableProps): import("react").JSX.Element;
 export declare const DataTable: typeof DataTableImpl & {
   Root: typeof DataTableImpl;
 };
-//#endregion
 export { type ColumnDef, FlexRender, type SortingState, createColumnHelper };

package/dist/components/table/index.mjs

@@ -1,15 +1,15 @@
-import { r as iconNode } from "../../icon-Cri0-7-x.mjs";
-import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
-import { n as useComponentMessages, t as formatMessage } from "../../messages-1jJWtaYU.mjs";
+import { r as iconNode } from "../../icon-C9udWCyz.mjs";
+import { t as withSelfRoot } from "../../family-Co1YsN4N.mjs";
+import { n as useComponentMessages, t as formatMessage } from "../../messages-B6n0lVyt.mjs";
 import { Pagination } from "../pagination/index.mjs";
-import { t as Select$1 } from "../../select-D_soVdWK.mjs";
+import { t as Select$1 } from "../../select-BLFqfeVw.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
 import { createListCollection } from "@ark-ui/react/select";
 import { FlexRender, cellSpanningFeature, columnFilteringFeature, columnOrderingFeature, columnPinningFeature, columnSizingFeature, columnVisibilityFeature, createColumnHelper, createExpandedRowModel, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, filterFn_arrIncludes, filterFn_equals, filterFn_inDateRange, filterFn_inNumberRange, filterFn_includesString, filterFn_weakEquals, globalFilteringFeature, rowExpandingFeature, rowPaginationFeature, rowSelectionFeature, rowSortingFeature, sortFn_alphanumeric, sortFn_alphanumericCaseSensitive, sortFn_basic, sortFn_datetime, sortFn_text, sortFn_textCaseSensitive, tableFeatures, useTable } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
-//#region src/components/table/index.tsx
+// src/components/table/index.tsx
 function pageIcon(direction) {
 	return iconNode(direction === "start" ? "chevron-left" : "chevron-right", {
 		width: 14,
@@ -584,13 +584,16 @@ function DataTableImpl(rawProps) {
 			children: [/* @__PURE__ */ jsx(Select$1.Control, { children: /* @__PURE__ */ jsxs(Select$1.Trigger, {
 				"aria-label": messages.table.rowsPerPage,
 				children: [/* @__PURE__ */ jsx(Select$1.ValueText, {}), /* @__PURE__ */ jsx(Select$1.Indicator, { children: chevronDownIcon })]
-			}) }), /* @__PURE__ */ jsx(Select$1.Positioner, { children: /* @__PURE__ */ jsx(Select$1.Content, { children: sizeItems.items.map((item) => /* @__PURE__ */ jsxs(Select$1.Item, {
-				item,
-				children: [/* @__PURE__ */ jsx(Select$1.ItemText, { children: item.label }), /* @__PURE__ */ jsx(Select$1.ItemIndicator, { children: iconNode("check", {
-					width: 14,
-					height: 14
-				}) })]
-			}, item.value)) }) })]
+			}) }), /* @__PURE__ */ jsx(Select$1.Positioner, {
+				portal: true,
+				children: /* @__PURE__ */ jsx(Select$1.Content, { children: sizeItems.items.map((item) => /* @__PURE__ */ jsxs(Select$1.Item, {
+					item,
+					children: [/* @__PURE__ */ jsx(Select$1.ItemText, { children: item.label }), /* @__PURE__ */ jsx(Select$1.ItemIndicator, { children: iconNode("check", {
+						width: 14,
+						height: 14
+					}) })]
+				}, item.value)) })
+			})]
 		});
 		const pager = /* @__PURE__ */ jsxs(Pagination.Root, {
 			count: rowCount,
@@ -621,7 +624,19 @@ function DataTableImpl(rawProps) {
 			})]
 		});
 	})() : null;
-	const toolbar = filterable && showToolbar ? /* @__PURE__ */ jsx("div", {
+	const toolbarSlot = filterable ? {
+		globalFilter: table.atoms.globalFilter.get() ?? "",
+		setGlobalFilter: (value) => table.setGlobalFilter(value),
+		columnFilters: table.atoms.columnFilters.get().map((filter) => ({ ...filter })),
+		setColumnFilters: (filters) => table.setColumnFilters(filters),
+		clearFilters: () => table.setColumnFilters([])
+	} : void 0;
+	const customToolbar = toolbarSlot ? props.toolbar?.(toolbarSlot) : void 0;
+	const toolbar = customToolbar !== void 0 ? /* @__PURE__ */ jsx("div", {
+		"data-scope": "table",
+		"data-part": "toolbar",
+		children: customToolbar
+	}) : filterable && showToolbar ? /* @__PURE__ */ jsx("div", {
 		"data-scope": "table",
 		"data-part": "toolbar",
 		children: /* @__PURE__ */ jsx("input", {
@@ -667,5 +682,4 @@ function DataTableImpl(rawProps) {
 	});
 }
 const DataTable = withSelfRoot(DataTableImpl);
-//#endregion
 export { DataTable, FlexRender, createColumnHelper };

package/dist/components/tabs/index.d.mts

@@ -1,10 +1,12 @@
 import { ComponentProps, ReactNode } from "react";
 import { Tabs as Tabs$1 } from "@ark-ui/react/tabs";
-//#region src/components/tabs/index.d.ts
 export type TabsItem = {
   value: string;
   label: string;
   content?: ReactNode;
+  disabled?: boolean;
+  closable?: boolean;
+  icon?: string;
 };
 export interface TabsFacadeProps {
   value?: string;
@@ -16,9 +18,13 @@ export interface TabsFacadeProps {
   /** One rung of the control-height ladder for the tab rows. */
   size?: "sm" | "md" | "lg";
   className?: string;
+  scrollable?: boolean;
+  contentless?: boolean;
+  closable?: boolean;
   onValueChange?: (value: string) => void;
+  onClose?: (item: TabsItem) => void;
 }
-declare function TabsFacade({ value, defaultValue, items, variant, orientation, size, className, onValueChange }: TabsFacadeProps): import("react").JSX.Element;
+declare function TabsFacade({ value, defaultValue, items, variant, orientation, size, className, scrollable, contentless, closable, onValueChange, onClose }: TabsFacadeProps): import("react").JSX.Element;
 declare namespace TabsFacade {
   var displayName: string;
 }
@@ -39,4 +45,4 @@ type TabsParts = Omit<typeof Tabs$1, "Root"> & {
   Root: typeof TabsRoot;
 };
 export declare const Tabs: typeof TabsFacade & TabsParts;
-//#endregion
+export {};

package/dist/components/tabs/index.mjs

@@ -1,9 +1,12 @@
-import { t as useElementId } from "../../id-C37UYLwJ.mjs";
+import { t as useElementId } from "../../id-Ctic_3o8.mjs";
+import { n as useComponentMessages, t as formatMessage } from "../../messages-B6n0lVyt.mjs";
+import { Icon } from "../icon/index.mjs";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tabs as Tabs$1 } from "@ark-ui/react/tabs";
-//#region src/components/tabs/index.tsx
-function TabsFacade({ value, defaultValue, items, variant = "line", orientation = "horizontal", size = "md", className, onValueChange }) {
+// src/components/tabs/index.tsx
+function TabsFacade({ value, defaultValue, items, variant = "line", orientation = "horizontal", size = "md", className, scrollable = false, contentless = false, closable = false, onValueChange, onClose }) {
+	const messages = useComponentMessages();
 	return /* @__PURE__ */ jsxs(TabsRoot, {
 		className,
 		size,
@@ -12,10 +15,36 @@ function TabsFacade({ value, defaultValue, items, variant = "line", orientation
 		defaultValue,
 		...value === void 0 ? {} : { value },
 		onValueChange: (details) => onValueChange?.(details.value),
-		children: [/* @__PURE__ */ jsxs(Tabs$1.List, { children: [items.map((item) => /* @__PURE__ */ jsx(Tabs$1.Trigger, {
-			value: item.value,
-			children: item.label
-		}, item.value)), /* @__PURE__ */ jsx(Tabs$1.Indicator, {})] }), items.map((item) => /* @__PURE__ */ jsx(Tabs$1.Content, {
+		children: [/* @__PURE__ */ jsxs(Tabs$1.List, {
+			"data-scrollable": scrollable ? "" : void 0,
+			children: [items.map((item) => {
+				const itemClosable = item.closable ?? closable;
+				const trigger = /* @__PURE__ */ jsxs(Tabs$1.Trigger, {
+					value: item.value,
+					disabled: item.disabled,
+					"data-closable": itemClosable ? "" : void 0,
+					children: [item.icon ? /* @__PURE__ */ jsx(Icon, { name: item.icon }) : null, /* @__PURE__ */ jsx("span", { children: item.label })]
+				}, item.value);
+				if (!itemClosable) return trigger;
+				return /* @__PURE__ */ jsxs("span", {
+					"data-scope": "tabs",
+					"data-part": "item",
+					children: [trigger, /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"data-scope": "tabs",
+						"data-part": "close",
+						"aria-label": formatMessage(messages.tabs.closeTab, { name: item.label }),
+						disabled: item.disabled,
+						onClick: (event) => {
+							event.preventDefault();
+							event.stopPropagation();
+							onClose?.(item);
+						},
+						children: /* @__PURE__ */ jsx(Icon, { name: "x" })
+					})]
+				}, item.value);
+			}), /* @__PURE__ */ jsx(Tabs$1.Indicator, {})]
+		}), !contentless && items.map((item) => /* @__PURE__ */ jsx(Tabs$1.Content, {
 			value: item.value,
 			children: item.content
 		}, item.value))]
@@ -36,5 +65,4 @@ const Tabs = Object.assign(TabsFacade, {
 	Root: TabsRoot
 });
 injectComponentStyle("tabs");
-//#endregion
 export { Tabs };

package/dist/components/tag/index.d.mts

@@ -1,5 +1,4 @@
 import { HTMLAttributes } from "react";
-//#region src/components/tag/index.d.ts
 export interface TagProps extends Omit<HTMLAttributes<HTMLElement>, "defaultValue"> {
   /** The pigment the tag is inked with; ink is the solemn default,
    * and the fixed pigments speak for their meaning. */
@@ -30,4 +29,4 @@ declare namespace TagImpl {
 export declare const Tag: typeof TagImpl & {
   Root: typeof TagImpl;
 };
-//#endregion
+export {};