@marigold/components 1.0.1 → 1.1.0

package/dist/index.d.ts

@@ -414,6 +414,7 @@ interface TableThemeExtension extends ThemeExtensionsWithParts<'Table', [
 interface TableProps extends Pick<TableProps$1<object>, 'focusMode' | 'onRowAction' | 'onCellAction'>, Omit<TableStateProps<object>, 'showSelectionCheckboxes'> {
     variant?: string;
     size?: string;
+    stretch?: boolean;
 }
 declare const Table: Table;
 /**
@@ -552,6 +553,10 @@ interface InlineProps {
 }
 declare const Inline: ({ space, alignX, alignY, children, ...props }: InlineProps) => JSX.Element;
 
+interface SplitProps extends ComponentProps<'div'> {
+}
+declare const Split: (props: SplitProps) => JSX.Element;
+
 declare const ALIGNMENT_X: {
     left: string;
     center: string;
@@ -593,4 +598,4 @@ interface TilesProps {
 }
 declare const Tiles: React.ForwardRefExoticComponent<TilesProps & React.RefAttributes<HTMLDivElement>>;
 
-export { Aside, AsideProps, Aspect, AspectProps, Badge, BadgeProps, BadgeThemeExtension, Breakout, BreakoutProps, Button, ButtonOwnProps, ButtonProps, ButtonThemeExtension, Card, CardProps, CardThemeExtension, Center, CenterProps, Checkbox, CheckboxGroup, CheckboxGroupContext, CheckboxGroupContextProps, CheckboxGroupThemeExtension, CheckboxProps, CheckboxThemeExtension, Columns, ColumnsProps, Container, ContainerProps, Content, ContentProps, ContentThemeExtension, CustomCheckboxProps, CustomRadioProps, CustomSwitchProps, CustomTextAreEvents, Dialog, DialogChildProps, DialogProps, DialogThemeExtension, Divider, DividerProps, DividerThemeExtension, Footer, FooterProps, FooterThemeExtension, Header, HeaderProps, HeaderThemeExtension, Headline, HeadlineProps, HeadlineThemeExtension, Image, ImageProps, ImageThemeExtension, Inline, InlineProps, Input, InputOwnProps, InputProps, InputThemeExtension, Label, LabelProps, LabelThemeExtension, Link, LinkOwnProps, LinkProps, LinkThemeExtension, MarigoldProvider, MarigoldProviderProps, Menu, MenuProps, MenuThemeExtension, Message, MessageProps, MessageThemeExtension, NumberField, NumberFieldProps, NumberFieldThemeExtension, Overlay, OverlayProps, Popover, PopoverProps, Radio, RadioGroupProps, RadioGroupThemeExtension, RadioProps, RadioThemeExtension, RootThemeExtension, Select, SelectProps, SelectThemeExtension, Slider, SliderProps, SliderThemeExtension, Stack, StackProps, Switch, SwitchProps, SwitchThemeExtension, Table, TableProps, TableThemeExtension, Text, TextArea, TextAreaProps, TextAreaThemeExtension, TextField, TextFieldProps, TextProps, TextThemeExtension, Theme, Tiles, TilesProps, Tooltip, TooltipProps, TooltipThemeExtension, Underlay, UnderlayProps, UnderlayThemeExtension, useCheckboxGroupContext };
+export { Aside, AsideProps, Aspect, AspectProps, Badge, BadgeProps, BadgeThemeExtension, Breakout, BreakoutProps, Button, ButtonOwnProps, ButtonProps, ButtonThemeExtension, Card, CardProps, CardThemeExtension, Center, CenterProps, Checkbox, CheckboxGroup, CheckboxGroupContext, CheckboxGroupContextProps, CheckboxGroupThemeExtension, CheckboxProps, CheckboxThemeExtension, Columns, ColumnsProps, Container, ContainerProps, Content, ContentProps, ContentThemeExtension, CustomCheckboxProps, CustomRadioProps, CustomSwitchProps, CustomTextAreEvents, Dialog, DialogChildProps, DialogProps, DialogThemeExtension, Divider, DividerProps, DividerThemeExtension, Footer, FooterProps, FooterThemeExtension, Header, HeaderProps, HeaderThemeExtension, Headline, HeadlineProps, HeadlineThemeExtension, Image, ImageProps, ImageThemeExtension, Inline, InlineProps, Input, InputOwnProps, InputProps, InputThemeExtension, Label, LabelProps, LabelThemeExtension, Link, LinkOwnProps, LinkProps, LinkThemeExtension, MarigoldProvider, MarigoldProviderProps, Menu, MenuProps, MenuThemeExtension, Message, MessageProps, MessageThemeExtension, NumberField, NumberFieldProps, NumberFieldThemeExtension, Overlay, OverlayProps, Popover, PopoverProps, Radio, RadioGroupProps, RadioGroupThemeExtension, RadioProps, RadioThemeExtension, RootThemeExtension, Select, SelectProps, SelectThemeExtension, Slider, SliderProps, SliderThemeExtension, Split, SplitProps, Stack, StackProps, Switch, SwitchProps, SwitchThemeExtension, Table, TableProps, TableThemeExtension, Text, TextArea, TextAreaProps, TextAreaThemeExtension, TextField, TextFieldProps, TextProps, TextThemeExtension, Theme, Tiles, TilesProps, Tooltip, TooltipProps, TooltipThemeExtension, Underlay, UnderlayProps, UnderlayThemeExtension, useCheckboxGroupContext };

package/dist/index.js

@@ -85,6 +85,7 @@ __export(src_exports, {
   SSRProvider: () => import_ssr.SSRProvider,
   Select: () => Select,
   Slider: () => Slider,
+  Split: () => Split,
   Stack: () => Stack,
   Switch: () => Switch,
   Table: () => Table,
@@ -1871,8 +1872,16 @@ var Slider = (_a) => {
   })));
 };
 
-// src/Stack/Stack.tsx
+// src/Split/Split.tsx
 var import_react49 = __toESM(require("react"));
+var import_system35 = require("@marigold/system");
+var Split = (props) => /* @__PURE__ */ import_react49.default.createElement(import_system35.Box, __spreadProps(__spreadValues({}, props), {
+  role: "separator",
+  css: { flexGrow: 1 }
+}));
+
+// src/Stack/Stack.tsx
+var import_react50 = __toESM(require("react"));
 var ALIGNMENT_X2 = {
   left: "flex-start",
   center: "center",
@@ -1897,7 +1906,7 @@ var Stack = (_a) => {
     "alignY",
     "stretch"
   ]);
-  return /* @__PURE__ */ import_react49.default.createElement(import_system.Box, __spreadValues({
+  return /* @__PURE__ */ import_react50.default.createElement(import_system.Box, __spreadValues({
     css: {
       display: "flex",
       flexDirection: "column",
@@ -1911,11 +1920,11 @@ var Stack = (_a) => {
 };
 
 // src/Switch/Switch.tsx
-var import_react50 = __toESM(require("react"));
+var import_react51 = __toESM(require("react"));
 var import_focus10 = require("@react-aria/focus");
 var import_switch = require("@react-aria/switch");
 var import_toggle2 = require("@react-stately/toggle");
-var import_system35 = require("@marigold/system");
+var import_system36 = require("@marigold/system");
 var Switch = (_a) => {
   var _b = _a, {
     variant,
@@ -1934,7 +1943,7 @@ var Switch = (_a) => {
     "readOnly",
     "defaultChecked"
   ]);
-  const ref = (0, import_react50.useRef)(null);
+  const ref = (0, import_react51.useRef)(null);
   const props = __spreadValues({
     isSelected: checked,
     isDisabled: disabled,
@@ -1944,14 +1953,14 @@ var Switch = (_a) => {
   const state = (0, import_toggle2.useToggleState)(props);
   const { inputProps } = (0, import_switch.useSwitch)(props, state, ref);
   const { isFocusVisible, focusProps } = (0, import_focus10.useFocusRing)();
-  const stateProps = (0, import_system35.useStateProps)({
+  const stateProps = (0, import_system36.useStateProps)({
     checked: state.isSelected,
     disabled,
     readOnly,
     focus: isFocusVisible
   });
-  const styles = (0, import_system35.useComponentStyles)("Switch", { variant, size }, { parts: ["container", "label", "track", "thumb"] });
-  return /* @__PURE__ */ import_react50.default.createElement(import_system.Box, {
+  const styles = (0, import_system36.useComponentStyles)("Switch", { variant, size }, { parts: ["container", "label", "track", "thumb"] });
+  return /* @__PURE__ */ import_react51.default.createElement(import_system.Box, {
     as: "label",
     __baseCSS: {
       display: "flex",
@@ -1962,7 +1971,7 @@ var Switch = (_a) => {
       width
     },
     css: styles.container
-  }, /* @__PURE__ */ import_react50.default.createElement(import_system.Box, __spreadValues(__spreadValues({
+  }, /* @__PURE__ */ import_react51.default.createElement(import_system.Box, __spreadValues(__spreadValues({
     as: "input",
     ref,
     css: {
@@ -1975,9 +1984,9 @@ var Switch = (_a) => {
       opacity: 1e-4,
       cursor: inputProps.disabled ? "not-allowed" : "pointer"
     }
-  }, inputProps), focusProps)), props.children && /* @__PURE__ */ import_react50.default.createElement(import_system.Box, {
+  }, inputProps), focusProps)), props.children && /* @__PURE__ */ import_react51.default.createElement(import_system.Box, {
     css: styles.label
-  }, props.children), /* @__PURE__ */ import_react50.default.createElement(import_system.Box, __spreadValues({
+  }, props.children), /* @__PURE__ */ import_react51.default.createElement(import_system.Box, __spreadValues({
     __baseCSS: {
       position: "relative",
       width: 48,
@@ -1986,7 +1995,7 @@ var Switch = (_a) => {
       borderRadius: 20
     },
     css: styles.track
-  }, stateProps), /* @__PURE__ */ import_react50.default.createElement(import_system.Box, __spreadValues({
+  }, stateProps), /* @__PURE__ */ import_react51.default.createElement(import_system.Box, __spreadValues({
     __baseCSS: {
       display: "block",
       position: "absolute",
@@ -2008,40 +2017,40 @@ var Switch = (_a) => {
 };
 
 // src/Table/Table.tsx
-var import_react60 = __toESM(require("react"));
+var import_react61 = __toESM(require("react"));
 var import_table9 = require("@react-aria/table");
 var import_table10 = require("@react-stately/table");
-var import_system41 = require("@marigold/system");
+var import_system42 = require("@marigold/system");
 
 // src/Table/Context.tsx
-var import_react51 = require("react");
-var TableContext = (0, import_react51.createContext)({});
-var useTableContext = () => (0, import_react51.useContext)(TableContext);
+var import_react52 = require("react");
+var TableContext = (0, import_react52.createContext)({});
+var useTableContext = () => (0, import_react52.useContext)(TableContext);
 
 // src/Table/TableBody.tsx
-var import_react52 = __toESM(require("react"));
+var import_react53 = __toESM(require("react"));
 var import_table = require("@react-aria/table");
 var TableBody = ({ children }) => {
   const { rowGroupProps } = (0, import_table.useTableRowGroup)();
-  return /* @__PURE__ */ import_react52.default.createElement("tbody", __spreadValues({}, rowGroupProps), children);
+  return /* @__PURE__ */ import_react53.default.createElement("tbody", __spreadValues({}, rowGroupProps), children);
 };
 
 // src/Table/TableCell.tsx
-var import_react53 = __toESM(require("react"));
+var import_react54 = __toESM(require("react"));
 var import_table2 = require("@react-aria/table");
 var import_focus11 = require("@react-aria/focus");
 var import_utils10 = require("@react-aria/utils");
-var import_system36 = require("@marigold/system");
+var import_system37 = require("@marigold/system");
 var TableCell = ({ cell }) => {
-  const ref = (0, import_react53.useRef)(null);
+  const ref = (0, import_react54.useRef)(null);
   const { state, styles } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = (0, import_table2.useTableCell)({
     node: cell
   }, state, ref);
   const { focusProps, isFocusVisible } = (0, import_focus11.useFocusRing)();
-  const stateProps = (0, import_system36.useStateProps)({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ import_react53.default.createElement(import_system36.Box, __spreadValues(__spreadValues({
+  const stateProps = (0, import_system37.useStateProps)({ disabled, focusVisible: isFocusVisible });
+  return /* @__PURE__ */ import_react54.default.createElement(import_system37.Box, __spreadValues(__spreadValues({
     as: "td",
     ref,
     css: styles.cell
@@ -2049,11 +2058,11 @@ var TableCell = ({ cell }) => {
 };
 
 // src/Table/TableCheckboxCell.tsx
-var import_react54 = __toESM(require("react"));
+var import_react55 = __toESM(require("react"));
 var import_table3 = require("@react-aria/table");
 var import_focus12 = require("@react-aria/focus");
 var import_utils11 = require("@react-aria/utils");
-var import_system37 = require("@marigold/system");
+var import_system38 = require("@marigold/system");
 
 // src/Table/utils.ts
 var mapCheckboxProps = (_a) => {
@@ -2081,7 +2090,7 @@ var mapCheckboxProps = (_a) => {
 
 // src/Table/TableCheckboxCell.tsx
 var TableCheckboxCell = ({ cell }) => {
-  const ref = (0, import_react54.useRef)(null);
+  const ref = (0, import_react55.useRef)(null);
   const { state, styles } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = (0, import_table3.useTableCell)({
@@ -2089,8 +2098,8 @@ var TableCheckboxCell = ({ cell }) => {
   }, state, ref);
   const { checkboxProps } = mapCheckboxProps((0, import_table3.useTableSelectionCheckbox)({ key: cell.parentKey }, state));
   const { focusProps, isFocusVisible } = (0, import_focus12.useFocusRing)();
-  const stateProps = (0, import_system37.useStateProps)({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ import_react54.default.createElement(import_system37.Box, __spreadValues(__spreadValues({
+  const stateProps = (0, import_system38.useStateProps)({ disabled, focusVisible: isFocusVisible });
+  return /* @__PURE__ */ import_react55.default.createElement(import_system38.Box, __spreadValues(__spreadValues({
     as: "td",
     ref,
     __baseCSS: {
@@ -2099,65 +2108,82 @@ var TableCheckboxCell = ({ cell }) => {
       lineHeight: 1
     },
     css: styles.cell
-  }, (0, import_utils11.mergeProps)(gridCellProps, focusProps)), stateProps), /* @__PURE__ */ import_react54.default.createElement(Checkbox, __spreadValues({}, checkboxProps)));
+  }, (0, import_utils11.mergeProps)(gridCellProps, focusProps)), stateProps), /* @__PURE__ */ import_react55.default.createElement(Checkbox, __spreadValues({}, checkboxProps)));
 };
 
 // src/Table/TableColumnHeader.tsx
-var import_react55 = __toESM(require("react"));
+var import_react56 = __toESM(require("react"));
 var import_focus13 = require("@react-aria/focus");
 var import_interactions7 = require("@react-aria/interactions");
 var import_table4 = require("@react-aria/table");
 var import_utils13 = require("@react-aria/utils");
-var import_system38 = require("@marigold/system");
+var import_system39 = require("@marigold/system");
+var SortIndicator = ({
+  direction = "ascending",
+  visible
+}) => /* @__PURE__ */ import_react56.default.createElement(import_system39.Box, {
+  as: "span",
+  role: "presentation",
+  "aria-hidden": "true",
+  css: {
+    color: "currentColor",
+    paddingInlineStart: "0.5ch",
+    visibility: visible ? "visible" : "hidden"
+  }
+}, direction === "ascending" ? "\u25B2" : "\u25BC");
 var TableColumnHeader = ({ column }) => {
-  const ref = (0, import_react55.useRef)(null);
+  var _a, _b;
+  const ref = (0, import_react56.useRef)(null);
   const { state, styles } = useTableContext();
   const { columnHeaderProps } = (0, import_table4.useTableColumnHeader)({
     node: column
   }, state, ref);
   const { hoverProps, isHovered } = (0, import_interactions7.useHover)({});
   const { focusProps, isFocusVisible } = (0, import_focus13.useFocusRing)();
-  const stateProps = (0, import_system38.useStateProps)({
+  const stateProps = (0, import_system39.useStateProps)({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ import_react55.default.createElement(import_system38.Box, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ import_react56.default.createElement(import_system39.Box, __spreadValues(__spreadValues({
     as: "th",
     colSpan: column.colspan,
     ref,
     css: styles.header
-  }, (0, import_utils13.mergeProps)(columnHeaderProps, hoverProps, focusProps)), stateProps), column.rendered);
+  }, (0, import_utils13.mergeProps)(columnHeaderProps, hoverProps, focusProps)), stateProps), column.rendered, column.props.allowsSorting && /* @__PURE__ */ import_react56.default.createElement(SortIndicator, {
+    direction: (_a = state.sortDescriptor) == null ? void 0 : _a.direction,
+    visible: ((_b = state.sortDescriptor) == null ? void 0 : _b.column) === column.key
+  }));
 };
 
 // src/Table/TableHeader.tsx
-var import_react56 = __toESM(require("react"));
+var import_react57 = __toESM(require("react"));
 var import_table5 = require("@react-aria/table");
 var TableHeader = ({ children }) => {
   const { rowGroupProps } = (0, import_table5.useTableRowGroup)();
-  return /* @__PURE__ */ import_react56.default.createElement("thead", __spreadValues({}, rowGroupProps), children);
+  return /* @__PURE__ */ import_react57.default.createElement("thead", __spreadValues({}, rowGroupProps), children);
 };
 
 // src/Table/TableHeaderRow.tsx
-var import_react57 = __toESM(require("react"));
+var import_react58 = __toESM(require("react"));
 var import_table6 = require("@react-aria/table");
 var TableHeaderRow = ({ item, children }) => {
   const { state } = useTableContext();
-  const ref = (0, import_react57.useRef)(null);
+  const ref = (0, import_react58.useRef)(null);
   const { rowProps } = (0, import_table6.useTableHeaderRow)({ node: item }, state, ref);
-  return /* @__PURE__ */ import_react57.default.createElement("tr", __spreadProps(__spreadValues({}, rowProps), {
+  return /* @__PURE__ */ import_react58.default.createElement("tr", __spreadProps(__spreadValues({}, rowProps), {
     ref
   }), children);
 };
 
 // src/Table/TableRow.tsx
-var import_react58 = __toESM(require("react"));
+var import_react59 = __toESM(require("react"));
 var import_focus14 = require("@react-aria/focus");
 var import_interactions8 = require("@react-aria/interactions");
 var import_table7 = require("@react-aria/table");
 var import_utils14 = require("@react-aria/utils");
-var import_system39 = require("@marigold/system");
+var import_system40 = require("@marigold/system");
 var TableRow = ({ children, row }) => {
-  const ref = (0, import_react58.useRef)(null);
+  const ref = (0, import_react59.useRef)(null);
   const { state, styles } = useTableContext();
   const { rowProps, isPressed } = (0, import_table7.useTableRow)({
     node: row
@@ -2166,14 +2192,14 @@ var TableRow = ({ children, row }) => {
   const selected = state.selectionManager.isSelected(row.key);
   const { focusProps, isFocusVisible } = (0, import_focus14.useFocusRing)({ within: true });
   const { hoverProps, isHovered } = (0, import_interactions8.useHover)({ isDisabled: disabled });
-  const stateProps = (0, import_system39.useStateProps)({
+  const stateProps = (0, import_system40.useStateProps)({
     disabled,
     selected,
     hover: isHovered,
     focusVisible: isFocusVisible,
     active: isPressed
   });
-  return /* @__PURE__ */ import_react58.default.createElement(import_system39.Box, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ import_react59.default.createElement(import_system40.Box, __spreadValues(__spreadValues({
     as: "tr",
     ref,
     css: styles.row
@@ -2181,14 +2207,14 @@ var TableRow = ({ children, row }) => {
 };
 
 // src/Table/TableSelectAllCell.tsx
-var import_react59 = __toESM(require("react"));
+var import_react60 = __toESM(require("react"));
 var import_focus15 = require("@react-aria/focus");
 var import_interactions9 = require("@react-aria/interactions");
 var import_table8 = require("@react-aria/table");
 var import_utils15 = require("@react-aria/utils");
-var import_system40 = require("@marigold/system");
+var import_system41 = require("@marigold/system");
 var TableSelectAllCell = ({ column }) => {
-  const ref = (0, import_react59.useRef)(null);
+  const ref = (0, import_react60.useRef)(null);
   const { state, styles } = useTableContext();
   const { columnHeaderProps } = (0, import_table8.useTableColumnHeader)({
     node: column
@@ -2196,11 +2222,11 @@ var TableSelectAllCell = ({ column }) => {
   const { checkboxProps } = mapCheckboxProps((0, import_table8.useTableSelectAllCheckbox)(state));
   const { hoverProps, isHovered } = (0, import_interactions9.useHover)({});
   const { focusProps, isFocusVisible } = (0, import_focus15.useFocusRing)();
-  const stateProps = (0, import_system40.useStateProps)({
+  const stateProps = (0, import_system41.useStateProps)({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ import_react59.default.createElement(import_system40.Box, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ import_react60.default.createElement(import_system41.Box, __spreadValues(__spreadValues({
     as: "th",
     ref,
     __baseCSS: {
@@ -2209,46 +2235,58 @@ var TableSelectAllCell = ({ column }) => {
       lineHeight: 1
     },
     css: styles.header
-  }, (0, import_utils15.mergeProps)(columnHeaderProps, hoverProps, focusProps)), stateProps), /* @__PURE__ */ import_react59.default.createElement(Checkbox, __spreadValues({}, checkboxProps)));
+  }, (0, import_utils15.mergeProps)(columnHeaderProps, hoverProps, focusProps)), stateProps), /* @__PURE__ */ import_react60.default.createElement(Checkbox, __spreadValues({}, checkboxProps)));
 };
 
 // src/Table/Table.tsx
 var Table = (_a) => {
-  var _b = _a, { variant, size } = _b, props = __objRest(_b, ["variant", "size"]);
-  const tableRef = (0, import_react60.useRef)(null);
+  var _b = _a, {
+    variant,
+    size,
+    stretch
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "size",
+    "stretch"
+  ]);
+  const tableRef = (0, import_react61.useRef)(null);
   const state = (0, import_table10.useTableState)(__spreadProps(__spreadValues({}, props), {
     showSelectionCheckboxes: props.selectionMode === "multiple" && props.selectionBehavior !== "replace"
   }));
   const { gridProps } = (0, import_table9.useTable)(props, state, tableRef);
-  const styles = (0, import_system41.useComponentStyles)("Table", { variant, size }, { parts: ["table", "header", "row", "cell"] });
+  const styles = (0, import_system42.useComponentStyles)("Table", { variant, size }, { parts: ["table", "header", "row", "cell"] });
   const { collection } = state;
-  return /* @__PURE__ */ import_react60.default.createElement(TableContext.Provider, {
+  return /* @__PURE__ */ import_react61.default.createElement(TableContext.Provider, {
     value: { state, styles }
-  }, /* @__PURE__ */ import_react60.default.createElement(import_system41.Box, __spreadValues({
+  }, /* @__PURE__ */ import_react61.default.createElement(import_system42.Box, __spreadValues({
     as: "table",
     ref: tableRef,
+    __baseCSS: {
+      borderCollapse: "collapse",
+      width: stretch ? "100%" : void 0
+    },
     css: styles.table
-  }, gridProps), /* @__PURE__ */ import_react60.default.createElement(TableHeader, null, collection.headerRows.map((headerRow) => /* @__PURE__ */ import_react60.default.createElement(TableHeaderRow, {
+  }, gridProps), /* @__PURE__ */ import_react61.default.createElement(TableHeader, null, collection.headerRows.map((headerRow) => /* @__PURE__ */ import_react61.default.createElement(TableHeaderRow, {
     key: headerRow.key,
     item: headerRow
   }, [...headerRow.childNodes].map((column) => {
     var _a2;
-    return ((_a2 = column.props) == null ? void 0 : _a2.isSelectionCell) ? /* @__PURE__ */ import_react60.default.createElement(TableSelectAllCell, {
+    return ((_a2 = column.props) == null ? void 0 : _a2.isSelectionCell) ? /* @__PURE__ */ import_react61.default.createElement(TableSelectAllCell, {
       key: column.key,
       column
-    }) : /* @__PURE__ */ import_react60.default.createElement(TableColumnHeader, {
+    }) : /* @__PURE__ */ import_react61.default.createElement(TableColumnHeader, {
       key: column.key,
       column
     });
-  })))), /* @__PURE__ */ import_react60.default.createElement(TableBody, null, [...collection.body.childNodes].map((row) => /* @__PURE__ */ import_react60.default.createElement(TableRow, {
+  })))), /* @__PURE__ */ import_react61.default.createElement(TableBody, null, [...collection.body.childNodes].map((row) => /* @__PURE__ */ import_react61.default.createElement(TableRow, {
     key: row.key,
     row
   }, [...row.childNodes].map((cell) => {
     var _a2;
-    return ((_a2 = cell.props) == null ? void 0 : _a2.isSelectionCell) ? /* @__PURE__ */ import_react60.default.createElement(TableCheckboxCell, {
+    return ((_a2 = cell.props) == null ? void 0 : _a2.isSelectionCell) ? /* @__PURE__ */ import_react61.default.createElement(TableCheckboxCell, {
       key: cell.key,
       cell
-    }) : /* @__PURE__ */ import_react60.default.createElement(TableCell, {
+    }) : /* @__PURE__ */ import_react61.default.createElement(TableCell, {
       key: cell.key,
       cell
     });
@@ -2261,9 +2299,9 @@ Table.Header = import_table10.TableHeader;
 Table.Row = import_table10.Row;
 
 // src/Text/Text.tsx
-var import_react61 = __toESM(require("react"));
-var import_system42 = require("@marigold/system");
+var import_react62 = __toESM(require("react"));
 var import_system43 = require("@marigold/system");
+var import_system44 = require("@marigold/system");
 var Text = (_a) => {
   var _b = _a, {
     variant,
@@ -2284,11 +2322,11 @@ var Text = (_a) => {
     "outline",
     "children"
   ]);
-  const styles = (0, import_system42.useComponentStyles)("Text", {
+  const styles = (0, import_system43.useComponentStyles)("Text", {
     variant,
     size
   });
-  return /* @__PURE__ */ import_react61.default.createElement(import_system43.Box, __spreadProps(__spreadValues({
+  return /* @__PURE__ */ import_react62.default.createElement(import_system44.Box, __spreadProps(__spreadValues({
     as: "p"
   }, props), {
     css: __spreadValues({ color, cursor, outline, fontSize, textAlign: align }, styles)
@@ -2296,9 +2334,9 @@ var Text = (_a) => {
 };
 
 // src/TextArea/TextArea.tsx
-var import_react62 = __toESM(require("react"));
+var import_react63 = __toESM(require("react"));
 var import_textfield = require("@react-aria/textfield");
-var import_system44 = require("@marigold/system");
+var import_system45 = require("@marigold/system");
 var import_interactions10 = require("@react-aria/interactions");
 var import_focus16 = require("@react-aria/focus");
 var TextArea = (_a) => {
@@ -2322,7 +2360,7 @@ var TextArea = (_a) => {
     "rows"
   ]);
   const { label, description, errorMessage } = props;
-  const ref = (0, import_react62.useRef)(null);
+  const ref = (0, import_react63.useRef)(null);
   const { labelProps, inputProps, descriptionProps, errorMessageProps } = (0, import_textfield.useTextField)(__spreadValues({
     inputElementType: "textarea",
     isDisabled: disabled,
@@ -2332,15 +2370,15 @@ var TextArea = (_a) => {
   }, props), ref);
   const { hoverProps, isHovered } = (0, import_interactions10.useHover)({});
   const { focusProps, isFocusVisible } = (0, import_focus16.useFocusRing)();
-  const stateProps = (0, import_system44.useStateProps)({
+  const stateProps = (0, import_system45.useStateProps)({
     hover: isHovered,
     focus: isFocusVisible,
     disabled,
     readOnly,
     error
   });
-  const styles = (0, import_system44.useComponentStyles)("TextArea", { variant, size });
-  return /* @__PURE__ */ import_react62.default.createElement(FieldBase, {
+  const styles = (0, import_system45.useComponentStyles)("TextArea", { variant, size });
+  return /* @__PURE__ */ import_react63.default.createElement(FieldBase, {
     label,
     labelProps,
     required,
@@ -2353,7 +2391,7 @@ var TextArea = (_a) => {
     variant,
     size,
     width
-  }, /* @__PURE__ */ import_react62.default.createElement(import_system44.Box, __spreadValues(__spreadValues(__spreadValues(__spreadValues({
+  }, /* @__PURE__ */ import_react63.default.createElement(import_system45.Box, __spreadValues(__spreadValues(__spreadValues(__spreadValues({
     as: "textarea",
     css: styles,
     ref,
@@ -2362,11 +2400,11 @@ var TextArea = (_a) => {
 };
 
 // src/TextField/TextField.tsx
-var import_react63 = __toESM(require("react"));
+var import_react64 = __toESM(require("react"));
 var import_interactions11 = require("@react-aria/interactions");
 var import_focus17 = require("@react-aria/focus");
 var import_textfield2 = require("@react-aria/textfield");
-var import_system45 = require("@marigold/system");
+var import_system46 = require("@marigold/system");
 var TextField = (_a) => {
   var _b = _a, {
     variant,
@@ -2386,7 +2424,7 @@ var TextField = (_a) => {
     "error"
   ]);
   const { label, description, errorMessage, autoFocus } = props;
-  const ref = (0, import_react63.useRef)(null);
+  const ref = (0, import_react64.useRef)(null);
   const { labelProps, inputProps, descriptionProps, errorMessageProps } = (0, import_textfield2.useTextField)(__spreadValues({
     isDisabled: disabled,
     isRequired: required,
@@ -2398,14 +2436,14 @@ var TextField = (_a) => {
     isTextInput: true,
     autoFocus
   });
-  const stateProps = (0, import_system45.useStateProps)({
+  const stateProps = (0, import_system46.useStateProps)({
     hover: isHovered,
     focus: isFocusVisible,
     disabled,
     readOnly,
     error
   });
-  return /* @__PURE__ */ import_react63.default.createElement(FieldBase, {
+  return /* @__PURE__ */ import_react64.default.createElement(FieldBase, {
     label,
     labelProps,
     required,
@@ -2418,7 +2456,7 @@ var TextField = (_a) => {
     variant,
     size,
     width
-  }, /* @__PURE__ */ import_react63.default.createElement(Input, __spreadValues(__spreadValues(__spreadValues(__spreadValues({
+  }, /* @__PURE__ */ import_react64.default.createElement(Input, __spreadValues(__spreadValues(__spreadValues(__spreadValues({
     ref,
     variant,
     size
@@ -2426,10 +2464,10 @@ var TextField = (_a) => {
 };
 
 // src/Tiles/Tiles.tsx
-var import_react64 = __toESM(require("react"));
-var Tiles = import_react64.default.forwardRef((_a, ref) => {
+var import_react65 = __toESM(require("react"));
+var Tiles = import_react65.default.forwardRef((_a, ref) => {
   var _b = _a, { space = "none", itemMinWidth = "250px", children } = _b, props = __objRest(_b, ["space", "itemMinWidth", "children"]);
-  return /* @__PURE__ */ import_react64.default.createElement(import_system.Box, __spreadValues({
+  return /* @__PURE__ */ import_react65.default.createElement(import_system.Box, __spreadValues({
     ref,
     display: "grid",
     __baseCSS: {
@@ -2440,17 +2478,17 @@ var Tiles = import_react64.default.forwardRef((_a, ref) => {
 });
 
 // src/Tooltip/Tooltip.tsx
-var import_react67 = __toESM(require("react"));
+var import_react68 = __toESM(require("react"));
 var import_tooltip3 = require("@react-aria/tooltip");
-var import_system46 = require("@marigold/system");
+var import_system47 = require("@marigold/system");
 
 // src/Tooltip/Context.ts
-var import_react65 = require("react");
-var TooltipContext = (0, import_react65.createContext)({});
-var useTooltipContext = () => (0, import_react65.useContext)(TooltipContext);
+var import_react66 = require("react");
+var TooltipContext = (0, import_react66.createContext)({});
+var useTooltipContext = () => (0, import_react66.useContext)(TooltipContext);
 
 // src/Tooltip/TooltipTrigger.tsx
-var import_react66 = __toESM(require("react"));
+var import_react67 = __toESM(require("react"));
 var import_focus18 = require("@react-aria/focus");
 var import_overlays9 = require("@react-aria/overlays");
 var import_tooltip = require("@react-aria/tooltip");
@@ -2469,15 +2507,15 @@ var TooltipTrigger = (_a) => {
     "placement",
     "children"
   ]);
-  const [tooltipTrigger, tooltip] = import_react66.default.Children.toArray(children);
+  const [tooltipTrigger, tooltip] = import_react67.default.Children.toArray(children);
   const props = __spreadProps(__spreadValues({}, rest), {
     isDisabled: disabled,
     isOpen: open,
     delay,
     placement
   });
-  const tooltipTriggerRef = (0, import_react66.useRef)(null);
-  const overlayRef = (0, import_react66.useRef)(null);
+  const tooltipTriggerRef = (0, import_react67.useRef)(null);
+  const overlayRef = (0, import_react67.useRef)(null);
   const state = (0, import_tooltip2.useTooltipTriggerState)(props);
   const { triggerProps, tooltipProps } = (0, import_tooltip.useTooltipTrigger)(props, state, tooltipTriggerRef);
   const {
@@ -2492,16 +2530,16 @@ var TooltipTrigger = (_a) => {
     isOpen: state.isOpen,
     overlayRef
   });
-  return /* @__PURE__ */ import_react66.default.createElement(import_focus18.FocusableProvider, __spreadValues({
+  return /* @__PURE__ */ import_react67.default.createElement(import_focus18.FocusableProvider, __spreadValues({
     ref: tooltipTriggerRef
-  }, triggerProps), tooltipTrigger, /* @__PURE__ */ import_react66.default.createElement(TooltipContext.Provider, {
+  }, triggerProps), tooltipTrigger, /* @__PURE__ */ import_react67.default.createElement(TooltipContext.Provider, {
     value: __spreadValues(__spreadValues({
       state,
       overlayRef,
       arrowProps,
       placement: overlayPlacement
     }, tooltipProps), positionProps)
-  }, /* @__PURE__ */ import_react66.default.createElement(Overlay, {
+  }, /* @__PURE__ */ import_react67.default.createElement(Overlay, {
     open: state.isOpen
   }, tooltip)));
 };
@@ -2510,12 +2548,12 @@ var TooltipTrigger = (_a) => {
 var Tooltip = ({ children, variant, size }) => {
   const _a = useTooltipContext(), { arrowProps, state, overlayRef, placement } = _a, rest = __objRest(_a, ["arrowProps", "state", "overlayRef", "placement"]);
   const { tooltipProps } = (0, import_tooltip3.useTooltip)({}, state);
-  const styles = (0, import_system46.useComponentStyles)("Tooltip", { variant, size }, { parts: ["container", "arrow"] });
-  return /* @__PURE__ */ import_react67.default.createElement(import_system46.Box, __spreadProps(__spreadValues(__spreadValues({}, tooltipProps), rest), {
+  const styles = (0, import_system47.useComponentStyles)("Tooltip", { variant, size }, { parts: ["container", "arrow"] });
+  return /* @__PURE__ */ import_react68.default.createElement(import_system47.Box, __spreadProps(__spreadValues(__spreadValues({}, tooltipProps), rest), {
     ref: overlayRef,
     css: styles.container,
     "data-placement": placement
-  }), /* @__PURE__ */ import_react67.default.createElement("div", null, children), /* @__PURE__ */ import_react67.default.createElement(import_system46.Box, __spreadProps(__spreadValues({}, arrowProps), {
+  }), /* @__PURE__ */ import_react68.default.createElement("div", null, children), /* @__PURE__ */ import_react68.default.createElement(import_system47.Box, __spreadProps(__spreadValues({}, arrowProps), {
     __baseCSS: {
       position: "absolute",
       height: 0,
@@ -2565,6 +2603,7 @@ Tooltip.Trigger = TooltipTrigger;
   SSRProvider,
   Select,
   Slider,
+  Split,
   Stack,
   Switch,
   Table,

package/dist/index.mjs

@@ -1862,8 +1862,16 @@ var Slider = (_a) => {
   })));
 };
 
-// src/Stack/Stack.tsx
+// src/Split/Split.tsx
 import React45 from "react";
+import { Box as Box25 } from "@marigold/system";
+var Split = (props) => /* @__PURE__ */ React45.createElement(Box25, __spreadProps(__spreadValues({}, props), {
+  role: "separator",
+  css: { flexGrow: 1 }
+}));
+
+// src/Stack/Stack.tsx
+import React46 from "react";
 var ALIGNMENT_X2 = {
   left: "flex-start",
   center: "center",
@@ -1888,7 +1896,7 @@ var Stack = (_a) => {
     "alignY",
     "stretch"
   ]);
-  return /* @__PURE__ */ React45.createElement(Box, __spreadValues({
+  return /* @__PURE__ */ React46.createElement(Box, __spreadValues({
     css: {
       display: "flex",
       flexDirection: "column",
@@ -1902,7 +1910,7 @@ var Stack = (_a) => {
 };
 
 // src/Switch/Switch.tsx
-import React46, { useRef as useRef14 } from "react";
+import React47, { useRef as useRef14 } from "react";
 import { useFocusRing as useFocusRing8 } from "@react-aria/focus";
 import { useSwitch } from "@react-aria/switch";
 import { useToggleState as useToggleState2 } from "@react-stately/toggle";
@@ -1945,7 +1953,7 @@ var Switch = (_a) => {
     focus: isFocusVisible
   });
   const styles = useComponentStyles26("Switch", { variant, size }, { parts: ["container", "label", "track", "thumb"] });
-  return /* @__PURE__ */ React46.createElement(Box, {
+  return /* @__PURE__ */ React47.createElement(Box, {
     as: "label",
     __baseCSS: {
       display: "flex",
@@ -1956,7 +1964,7 @@ var Switch = (_a) => {
       width
     },
     css: styles.container
-  }, /* @__PURE__ */ React46.createElement(Box, __spreadValues(__spreadValues({
+  }, /* @__PURE__ */ React47.createElement(Box, __spreadValues(__spreadValues({
     as: "input",
     ref,
     css: {
@@ -1969,9 +1977,9 @@ var Switch = (_a) => {
       opacity: 1e-4,
       cursor: inputProps.disabled ? "not-allowed" : "pointer"
     }
-  }, inputProps), focusProps)), props.children && /* @__PURE__ */ React46.createElement(Box, {
+  }, inputProps), focusProps)), props.children && /* @__PURE__ */ React47.createElement(Box, {
     css: styles.label
-  }, props.children), /* @__PURE__ */ React46.createElement(Box, __spreadValues({
+  }, props.children), /* @__PURE__ */ React47.createElement(Box, __spreadValues({
     __baseCSS: {
       position: "relative",
       width: 48,
@@ -1980,7 +1988,7 @@ var Switch = (_a) => {
       borderRadius: 20
     },
     css: styles.track
-  }, stateProps), /* @__PURE__ */ React46.createElement(Box, __spreadValues({
+  }, stateProps), /* @__PURE__ */ React47.createElement(Box, __spreadValues({
     __baseCSS: {
       display: "block",
       position: "absolute",
@@ -2002,7 +2010,7 @@ var Switch = (_a) => {
 };
 
 // src/Table/Table.tsx
-import React55, { useRef as useRef21 } from "react";
+import React56, { useRef as useRef21 } from "react";
 import { useTable } from "@react-aria/table";
 import {
   Cell,
@@ -2013,7 +2021,7 @@ import {
   useTableState
 } from "@react-stately/table";
 import {
-  Box as Box30,
+  Box as Box31,
   useComponentStyles as useComponentStyles27
 } from "@marigold/system";
 
@@ -2023,19 +2031,19 @@ var TableContext = createContext6({});
 var useTableContext = () => useContext6(TableContext);
 
 // src/Table/TableBody.tsx
-import React47 from "react";
+import React48 from "react";
 import { useTableRowGroup } from "@react-aria/table";
 var TableBody = ({ children }) => {
   const { rowGroupProps } = useTableRowGroup();
-  return /* @__PURE__ */ React47.createElement("tbody", __spreadValues({}, rowGroupProps), children);
+  return /* @__PURE__ */ React48.createElement("tbody", __spreadValues({}, rowGroupProps), children);
 };
 
 // src/Table/TableCell.tsx
-import React48, { useRef as useRef15 } from "react";
+import React49, { useRef as useRef15 } from "react";
 import { useTableCell } from "@react-aria/table";
 import { useFocusRing as useFocusRing9 } from "@react-aria/focus";
 import { mergeProps as mergeProps9 } from "@react-aria/utils";
-import { Box as Box25, useStateProps as useStateProps11 } from "@marigold/system";
+import { Box as Box26, useStateProps as useStateProps11 } from "@marigold/system";
 var TableCell = ({ cell }) => {
   const ref = useRef15(null);
   const { state, styles } = useTableContext();
@@ -2045,7 +2053,7 @@ var TableCell = ({ cell }) => {
   }, state, ref);
   const { focusProps, isFocusVisible } = useFocusRing9();
   const stateProps = useStateProps11({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ React48.createElement(Box25, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ React49.createElement(Box26, __spreadValues(__spreadValues({
     as: "td",
     ref,
     css: styles.cell
@@ -2053,11 +2061,11 @@ var TableCell = ({ cell }) => {
 };
 
 // src/Table/TableCheckboxCell.tsx
-import React49, { useRef as useRef16 } from "react";
+import React50, { useRef as useRef16 } from "react";
 import { useTableCell as useTableCell2, useTableSelectionCheckbox } from "@react-aria/table";
 import { useFocusRing as useFocusRing10 } from "@react-aria/focus";
 import { mergeProps as mergeProps10 } from "@react-aria/utils";
-import { Box as Box26, useStateProps as useStateProps12 } from "@marigold/system";
+import { Box as Box27, useStateProps as useStateProps12 } from "@marigold/system";
 
 // src/Table/utils.ts
 var mapCheckboxProps = (_a) => {
@@ -2094,7 +2102,7 @@ var TableCheckboxCell = ({ cell }) => {
   const { checkboxProps } = mapCheckboxProps(useTableSelectionCheckbox({ key: cell.parentKey }, state));
   const { focusProps, isFocusVisible } = useFocusRing10();
   const stateProps = useStateProps12({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ React49.createElement(Box26, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ React50.createElement(Box27, __spreadValues(__spreadValues({
     as: "td",
     ref,
     __baseCSS: {
@@ -2103,17 +2111,31 @@ var TableCheckboxCell = ({ cell }) => {
       lineHeight: 1
     },
     css: styles.cell
-  }, mergeProps10(gridCellProps, focusProps)), stateProps), /* @__PURE__ */ React49.createElement(Checkbox, __spreadValues({}, checkboxProps)));
+  }, mergeProps10(gridCellProps, focusProps)), stateProps), /* @__PURE__ */ React50.createElement(Checkbox, __spreadValues({}, checkboxProps)));
 };
 
 // src/Table/TableColumnHeader.tsx
-import React50, { useRef as useRef17 } from "react";
+import React51, { useRef as useRef17 } from "react";
 import { useFocusRing as useFocusRing11 } from "@react-aria/focus";
 import { useHover as useHover5 } from "@react-aria/interactions";
 import { useTableColumnHeader } from "@react-aria/table";
 import { mergeProps as mergeProps11 } from "@react-aria/utils";
-import { Box as Box27, useStateProps as useStateProps13 } from "@marigold/system";
+import { Box as Box28, useStateProps as useStateProps13 } from "@marigold/system";
+var SortIndicator = ({
+  direction = "ascending",
+  visible
+}) => /* @__PURE__ */ React51.createElement(Box28, {
+  as: "span",
+  role: "presentation",
+  "aria-hidden": "true",
+  css: {
+    color: "currentColor",
+    paddingInlineStart: "0.5ch",
+    visibility: visible ? "visible" : "hidden"
+  }
+}, direction === "ascending" ? "\u25B2" : "\u25BC");
 var TableColumnHeader = ({ column }) => {
+  var _a, _b;
   const ref = useRef17(null);
   const { state, styles } = useTableContext();
   const { columnHeaderProps } = useTableColumnHeader({
@@ -2125,41 +2147,44 @@ var TableColumnHeader = ({ column }) => {
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ React50.createElement(Box27, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ React51.createElement(Box28, __spreadValues(__spreadValues({
     as: "th",
     colSpan: column.colspan,
     ref,
     css: styles.header
-  }, mergeProps11(columnHeaderProps, hoverProps, focusProps)), stateProps), column.rendered);
+  }, mergeProps11(columnHeaderProps, hoverProps, focusProps)), stateProps), column.rendered, column.props.allowsSorting && /* @__PURE__ */ React51.createElement(SortIndicator, {
+    direction: (_a = state.sortDescriptor) == null ? void 0 : _a.direction,
+    visible: ((_b = state.sortDescriptor) == null ? void 0 : _b.column) === column.key
+  }));
 };
 
 // src/Table/TableHeader.tsx
-import React51 from "react";
+import React52 from "react";
 import { useTableRowGroup as useTableRowGroup2 } from "@react-aria/table";
 var TableHeader = ({ children }) => {
   const { rowGroupProps } = useTableRowGroup2();
-  return /* @__PURE__ */ React51.createElement("thead", __spreadValues({}, rowGroupProps), children);
+  return /* @__PURE__ */ React52.createElement("thead", __spreadValues({}, rowGroupProps), children);
 };
 
 // src/Table/TableHeaderRow.tsx
-import React52, { useRef as useRef18 } from "react";
+import React53, { useRef as useRef18 } from "react";
 import { useTableHeaderRow } from "@react-aria/table";
 var TableHeaderRow = ({ item, children }) => {
   const { state } = useTableContext();
   const ref = useRef18(null);
   const { rowProps } = useTableHeaderRow({ node: item }, state, ref);
-  return /* @__PURE__ */ React52.createElement("tr", __spreadProps(__spreadValues({}, rowProps), {
+  return /* @__PURE__ */ React53.createElement("tr", __spreadProps(__spreadValues({}, rowProps), {
     ref
   }), children);
 };
 
 // src/Table/TableRow.tsx
-import React53, { useRef as useRef19 } from "react";
+import React54, { useRef as useRef19 } from "react";
 import { useFocusRing as useFocusRing12 } from "@react-aria/focus";
 import { useHover as useHover6 } from "@react-aria/interactions";
 import { useTableRow } from "@react-aria/table";
 import { mergeProps as mergeProps12 } from "@react-aria/utils";
-import { Box as Box28, useStateProps as useStateProps14 } from "@marigold/system";
+import { Box as Box29, useStateProps as useStateProps14 } from "@marigold/system";
 var TableRow = ({ children, row }) => {
   const ref = useRef19(null);
   const { state, styles } = useTableContext();
@@ -2177,7 +2202,7 @@ var TableRow = ({ children, row }) => {
     focusVisible: isFocusVisible,
     active: isPressed
   });
-  return /* @__PURE__ */ React53.createElement(Box28, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ React54.createElement(Box29, __spreadValues(__spreadValues({
     as: "tr",
     ref,
     css: styles.row
@@ -2185,7 +2210,7 @@ var TableRow = ({ children, row }) => {
 };
 
 // src/Table/TableSelectAllCell.tsx
-import React54, { useRef as useRef20 } from "react";
+import React55, { useRef as useRef20 } from "react";
 import { useFocusRing as useFocusRing13 } from "@react-aria/focus";
 import { useHover as useHover7 } from "@react-aria/interactions";
 import {
@@ -2193,7 +2218,7 @@ import {
   useTableSelectAllCheckbox
 } from "@react-aria/table";
 import { mergeProps as mergeProps13 } from "@react-aria/utils";
-import { Box as Box29, useStateProps as useStateProps15 } from "@marigold/system";
+import { Box as Box30, useStateProps as useStateProps15 } from "@marigold/system";
 var TableSelectAllCell = ({ column }) => {
   const ref = useRef20(null);
   const { state, styles } = useTableContext();
@@ -2207,7 +2232,7 @@ var TableSelectAllCell = ({ column }) => {
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ React54.createElement(Box29, __spreadValues(__spreadValues({
+  return /* @__PURE__ */ React55.createElement(Box30, __spreadValues(__spreadValues({
     as: "th",
     ref,
     __baseCSS: {
@@ -2216,12 +2241,20 @@ var TableSelectAllCell = ({ column }) => {
       lineHeight: 1
     },
     css: styles.header
-  }, mergeProps13(columnHeaderProps, hoverProps, focusProps)), stateProps), /* @__PURE__ */ React54.createElement(Checkbox, __spreadValues({}, checkboxProps)));
+  }, mergeProps13(columnHeaderProps, hoverProps, focusProps)), stateProps), /* @__PURE__ */ React55.createElement(Checkbox, __spreadValues({}, checkboxProps)));
 };
 
 // src/Table/Table.tsx
 var Table = (_a) => {
-  var _b = _a, { variant, size } = _b, props = __objRest(_b, ["variant", "size"]);
+  var _b = _a, {
+    variant,
+    size,
+    stretch
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "size",
+    "stretch"
+  ]);
   const tableRef = useRef21(null);
   const state = useTableState(__spreadProps(__spreadValues({}, props), {
     showSelectionCheckboxes: props.selectionMode === "multiple" && props.selectionBehavior !== "replace"
@@ -2229,33 +2262,37 @@ var Table = (_a) => {
   const { gridProps } = useTable(props, state, tableRef);
   const styles = useComponentStyles27("Table", { variant, size }, { parts: ["table", "header", "row", "cell"] });
   const { collection } = state;
-  return /* @__PURE__ */ React55.createElement(TableContext.Provider, {
+  return /* @__PURE__ */ React56.createElement(TableContext.Provider, {
     value: { state, styles }
-  }, /* @__PURE__ */ React55.createElement(Box30, __spreadValues({
+  }, /* @__PURE__ */ React56.createElement(Box31, __spreadValues({
     as: "table",
     ref: tableRef,
+    __baseCSS: {
+      borderCollapse: "collapse",
+      width: stretch ? "100%" : void 0
+    },
     css: styles.table
-  }, gridProps), /* @__PURE__ */ React55.createElement(TableHeader, null, collection.headerRows.map((headerRow) => /* @__PURE__ */ React55.createElement(TableHeaderRow, {
+  }, gridProps), /* @__PURE__ */ React56.createElement(TableHeader, null, collection.headerRows.map((headerRow) => /* @__PURE__ */ React56.createElement(TableHeaderRow, {
     key: headerRow.key,
     item: headerRow
   }, [...headerRow.childNodes].map((column) => {
     var _a2;
-    return ((_a2 = column.props) == null ? void 0 : _a2.isSelectionCell) ? /* @__PURE__ */ React55.createElement(TableSelectAllCell, {
+    return ((_a2 = column.props) == null ? void 0 : _a2.isSelectionCell) ? /* @__PURE__ */ React56.createElement(TableSelectAllCell, {
       key: column.key,
       column
-    }) : /* @__PURE__ */ React55.createElement(TableColumnHeader, {
+    }) : /* @__PURE__ */ React56.createElement(TableColumnHeader, {
       key: column.key,
       column
     });
-  })))), /* @__PURE__ */ React55.createElement(TableBody, null, [...collection.body.childNodes].map((row) => /* @__PURE__ */ React55.createElement(TableRow, {
+  })))), /* @__PURE__ */ React56.createElement(TableBody, null, [...collection.body.childNodes].map((row) => /* @__PURE__ */ React56.createElement(TableRow, {
     key: row.key,
     row
   }, [...row.childNodes].map((cell) => {
     var _a2;
-    return ((_a2 = cell.props) == null ? void 0 : _a2.isSelectionCell) ? /* @__PURE__ */ React55.createElement(TableCheckboxCell, {
+    return ((_a2 = cell.props) == null ? void 0 : _a2.isSelectionCell) ? /* @__PURE__ */ React56.createElement(TableCheckboxCell, {
       key: cell.key,
       cell
-    }) : /* @__PURE__ */ React55.createElement(TableCell, {
+    }) : /* @__PURE__ */ React56.createElement(TableCell, {
       key: cell.key,
       cell
     });
@@ -2268,11 +2305,11 @@ Table.Header = Header2;
 Table.Row = Row;
 
 // src/Text/Text.tsx
-import React56 from "react";
+import React57 from "react";
 import {
   useComponentStyles as useComponentStyles28
 } from "@marigold/system";
-import { Box as Box31 } from "@marigold/system";
+import { Box as Box32 } from "@marigold/system";
 var Text = (_a) => {
   var _b = _a, {
     variant,
@@ -2297,7 +2334,7 @@ var Text = (_a) => {
     variant,
     size
   });
-  return /* @__PURE__ */ React56.createElement(Box31, __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React57.createElement(Box32, __spreadProps(__spreadValues({
     as: "p"
   }, props), {
     css: __spreadValues({ color, cursor, outline, fontSize, textAlign: align }, styles)
@@ -2305,10 +2342,10 @@ var Text = (_a) => {
 };
 
 // src/TextArea/TextArea.tsx
-import React57, { useRef as useRef22 } from "react";
+import React58, { useRef as useRef22 } from "react";
 import { useTextField } from "@react-aria/textfield";
 import {
-  Box as Box32,
+  Box as Box33,
   useComponentStyles as useComponentStyles29,
   useStateProps as useStateProps16
 } from "@marigold/system";
@@ -2353,7 +2390,7 @@ var TextArea = (_a) => {
     error
   });
   const styles = useComponentStyles29("TextArea", { variant, size });
-  return /* @__PURE__ */ React57.createElement(FieldBase, {
+  return /* @__PURE__ */ React58.createElement(FieldBase, {
     label,
     labelProps,
     required,
@@ -2366,7 +2403,7 @@ var TextArea = (_a) => {
     variant,
     size,
     width
-  }, /* @__PURE__ */ React57.createElement(Box32, __spreadValues(__spreadValues(__spreadValues(__spreadValues({
+  }, /* @__PURE__ */ React58.createElement(Box33, __spreadValues(__spreadValues(__spreadValues(__spreadValues({
     as: "textarea",
     css: styles,
     ref,
@@ -2375,7 +2412,7 @@ var TextArea = (_a) => {
 };
 
 // src/TextField/TextField.tsx
-import React58, { useRef as useRef23 } from "react";
+import React59, { useRef as useRef23 } from "react";
 import { useHover as useHover9 } from "@react-aria/interactions";
 import { useFocusRing as useFocusRing15 } from "@react-aria/focus";
 import { useTextField as useTextField2 } from "@react-aria/textfield";
@@ -2418,7 +2455,7 @@ var TextField = (_a) => {
     readOnly,
     error
   });
-  return /* @__PURE__ */ React58.createElement(FieldBase, {
+  return /* @__PURE__ */ React59.createElement(FieldBase, {
     label,
     labelProps,
     required,
@@ -2431,7 +2468,7 @@ var TextField = (_a) => {
     variant,
     size,
     width
-  }, /* @__PURE__ */ React58.createElement(Input, __spreadValues(__spreadValues(__spreadValues(__spreadValues({
+  }, /* @__PURE__ */ React59.createElement(Input, __spreadValues(__spreadValues(__spreadValues(__spreadValues({
     ref,
     variant,
     size
@@ -2439,10 +2476,10 @@ var TextField = (_a) => {
 };
 
 // src/Tiles/Tiles.tsx
-import React59 from "react";
-var Tiles = React59.forwardRef((_a, ref) => {
+import React60 from "react";
+var Tiles = React60.forwardRef((_a, ref) => {
   var _b = _a, { space = "none", itemMinWidth = "250px", children } = _b, props = __objRest(_b, ["space", "itemMinWidth", "children"]);
-  return /* @__PURE__ */ React59.createElement(Box, __spreadValues({
+  return /* @__PURE__ */ React60.createElement(Box, __spreadValues({
     ref,
     display: "grid",
     __baseCSS: {
@@ -2453,10 +2490,10 @@ var Tiles = React59.forwardRef((_a, ref) => {
 });
 
 // src/Tooltip/Tooltip.tsx
-import React61 from "react";
+import React62 from "react";
 import { useTooltip } from "@react-aria/tooltip";
 import {
-  Box as Box33,
+  Box as Box34,
   useComponentStyles as useComponentStyles30
 } from "@marigold/system";
 
@@ -2466,7 +2503,7 @@ var TooltipContext = createContext7({});
 var useTooltipContext = () => useContext7(TooltipContext);
 
 // src/Tooltip/TooltipTrigger.tsx
-import React60, { useRef as useRef24 } from "react";
+import React61, { useRef as useRef24 } from "react";
 import { FocusableProvider } from "@react-aria/focus";
 import { useOverlayPosition as useOverlayPosition3 } from "@react-aria/overlays";
 import { useTooltipTrigger } from "@react-aria/tooltip";
@@ -2485,7 +2522,7 @@ var TooltipTrigger = (_a) => {
     "placement",
     "children"
   ]);
-  const [tooltipTrigger, tooltip] = React60.Children.toArray(children);
+  const [tooltipTrigger, tooltip] = React61.Children.toArray(children);
   const props = __spreadProps(__spreadValues({}, rest), {
     isDisabled: disabled,
     isOpen: open,
@@ -2508,16 +2545,16 @@ var TooltipTrigger = (_a) => {
     isOpen: state.isOpen,
     overlayRef
   });
-  return /* @__PURE__ */ React60.createElement(FocusableProvider, __spreadValues({
+  return /* @__PURE__ */ React61.createElement(FocusableProvider, __spreadValues({
     ref: tooltipTriggerRef
-  }, triggerProps), tooltipTrigger, /* @__PURE__ */ React60.createElement(TooltipContext.Provider, {
+  }, triggerProps), tooltipTrigger, /* @__PURE__ */ React61.createElement(TooltipContext.Provider, {
     value: __spreadValues(__spreadValues({
       state,
       overlayRef,
       arrowProps,
       placement: overlayPlacement
     }, tooltipProps), positionProps)
-  }, /* @__PURE__ */ React60.createElement(Overlay, {
+  }, /* @__PURE__ */ React61.createElement(Overlay, {
     open: state.isOpen
   }, tooltip)));
 };
@@ -2527,11 +2564,11 @@ var Tooltip = ({ children, variant, size }) => {
   const _a = useTooltipContext(), { arrowProps, state, overlayRef, placement } = _a, rest = __objRest(_a, ["arrowProps", "state", "overlayRef", "placement"]);
   const { tooltipProps } = useTooltip({}, state);
   const styles = useComponentStyles30("Tooltip", { variant, size }, { parts: ["container", "arrow"] });
-  return /* @__PURE__ */ React61.createElement(Box33, __spreadProps(__spreadValues(__spreadValues({}, tooltipProps), rest), {
+  return /* @__PURE__ */ React62.createElement(Box34, __spreadProps(__spreadValues(__spreadValues({}, tooltipProps), rest), {
     ref: overlayRef,
     css: styles.container,
     "data-placement": placement
-  }), /* @__PURE__ */ React61.createElement("div", null, children), /* @__PURE__ */ React61.createElement(Box33, __spreadProps(__spreadValues({}, arrowProps), {
+  }), /* @__PURE__ */ React62.createElement("div", null, children), /* @__PURE__ */ React62.createElement(Box34, __spreadProps(__spreadValues({}, arrowProps), {
     __baseCSS: {
       position: "absolute",
       height: 0,
@@ -2580,6 +2617,7 @@ export {
   SSRProvider,
   Select,
   Slider,
+  Split,
   Stack,
   Switch,
   Table,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/components",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Components for the Marigold Design System",
   "license": "MIT",
   "keywords": [
@@ -23,8 +23,8 @@
     "directory": "packages/components"
   },
   "dependencies": {
-    "@marigold/icons": "0.7.1",
-    "@marigold/system": "1.0.1",
+    "@marigold/icons": "0.7.2",
+    "@marigold/system": "1.1.0",
     "@marigold/tokens": "3.0.0",
     "@marigold/types": "0.5.1",
     "@react-aria/button": "^3.3.3",
@@ -78,11 +78,12 @@
     "@marigold/tsconfig": "0.3.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "tsup": "5.12.8"
+    "tsup": "5.12.9"
   },
   "scripts": {
     "build": "tsup src/index.ts",
     "watch": "tsup src/index.ts --watch",
     "clean": "rm -rf node_modules && rm -rf dist"
-  }
+  },
+  "readme": "# `@marigold/components`\n\n> Marigold components\n"
 }