@marigold/components 9.0.0 → 9.0.2

package/dist/index.mjs

@@ -306,10 +306,9 @@ var Aspect = ({
 };
 
 // src/Autocomplete/Autocomplete.tsx
-import {
+import React, {
   forwardRef as forwardRef8
 } from "react";
-import React from "react";
 import { ComboBox, ComboBoxStateContext } from "react-aria-components";
 import { cn as cn13, useClassNames as useClassNames9 } from "@marigold/system";
 
@@ -600,10 +599,10 @@ import { createContext as createContext2, useContext as useContext3 } from "reac
 var ListBoxContext = createContext2({});
 var useListBoxContext = () => useContext3(ListBoxContext);
 
-// src/ListBox/ListBoxOption.tsx
+// src/ListBox/ListBoxItem.tsx
 import { ListBoxItem } from "react-aria-components";
 import { jsx as jsx13 } from "react/jsx-runtime";
-var _ListBoxItem = (props) => {
+var _ListBoxItem = ({ ...props }) => {
   const { classNames: classNames2 } = useListBoxContext();
   return /* @__PURE__ */ jsx13(ListBoxItem, { ...props, className: classNames2.option });
 };
@@ -705,7 +704,7 @@ var Underlay = ({
     ModalOverlay,
     {
       className: ({ isEntering, isExiting }) => cn11(
-        "fixed inset-0 z-40 flex min-h-full items-center justify-center overflow-y-auto backdrop-blur ",
+        "fixed inset-0 z-40 flex min-h-full items-center justify-center overflow-y-auto backdrop-blur",
         isEntering ? "animate-in fade-in duration-300 ease-out" : "",
         isExiting ? "animate-out fade-out duration-200 ease-in" : "",
         classNames2
@@ -779,7 +778,10 @@ var AutocompleteInput = ({
     {
       ref,
       className: {
-        action: cn13((state == null ? void 0 : state.inputValue) === "" ? "hidden" : void 0, classNames2)
+        action: cn13(
+          (state == null ? void 0 : state.inputValue) === "" ? "invisible" : "visible",
+          classNames2
+        )
       },
       onKeyDown: (e) => {
         if (e.key === "Enter" || e.key === "Escape") {
@@ -825,7 +827,7 @@ var _Autocomplete = forwardRef8(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ jsxs8(FieldBase, { as: ComboBox, ...props, children: [
+    return /* @__PURE__ */ jsxs8(FieldBase, { as: ComboBox, ref, ...props, children: [
       /* @__PURE__ */ jsx19(AutocompleteInput, { onSubmit, onClear, ref }),
       /* @__PURE__ */ jsx19(_Popover, { children: /* @__PURE__ */ jsx19(_ListBox, { children }) })
     ] });
@@ -1106,7 +1108,6 @@ var _Checkbox = forwardRef11(
     };
     const { labelWidth } = useFieldGroupContext();
     const group = useCheckboxGroupContext();
-    console.log(group);
     const classNames2 = useClassNames16({
       component: "Checkbox",
       variant: variant || (group == null ? void 0 : group.variant),
@@ -1539,21 +1540,16 @@ var Image = ({
 };
 
 // src/Inline/Inline.tsx
-import {
-  alignment as alignment2,
-  cn as cn27,
-  gapSpace as gapSpace6
-} from "@marigold/system";
+import { alignment as alignment2, cn as cn27, gapSpace as gapSpace6 } from "@marigold/system";
 import { jsx as jsx42 } from "react/jsx-runtime";
 var Inline = ({
   space = 0,
-  orientation,
-  alignX = ((_a) => (_a = orientation == null ? void 0 : orientation.horizontal) == null ? void 0 : _a.alignX)(),
-  alignY = ((_b) => (_b = orientation == null ? void 0 : orientation.horizontal) == null ? void 0 : _b.alignY)(),
+  alignX,
+  alignY,
   children,
   ...props
 }) => {
-  var _a2, _b2, _c, _d;
+  var _a, _b, _c, _d;
   return /* @__PURE__ */ jsx42(
     "div",
     {
@@ -1561,7 +1557,7 @@ var Inline = ({
       className: cn27(
         "flex flex-wrap",
         gapSpace6[space],
-        alignX && ((_b2 = (_a2 = alignment2) == null ? void 0 : _a2.horizontal) == null ? void 0 : _b2.alignmentX[alignX]),
+        alignX && ((_b = (_a = alignment2) == null ? void 0 : _a.horizontal) == null ? void 0 : _b.alignmentX[alignX]),
         alignY && ((_d = (_c = alignment2) == null ? void 0 : _c.horizontal) == null ? void 0 : _d.alignmentY[alignY])
       ),
       children
@@ -2736,7 +2732,7 @@ var _Select = forwardRef18(
                 classNames2.select
               ),
               children: [
-                /* @__PURE__ */ jsx73(SelectValue, {}),
+                /* @__PURE__ */ jsx73(SelectValue, { className: "[&>[slot=description]]:hidden" }),
                 /* @__PURE__ */ jsx73(ChevronDown, { className: cn42("size-4", classNames2.icon) })
               ]
             }
@@ -2778,7 +2774,10 @@ var _SelectListItem = forwardRef19(
       {
         textValue,
         ...props,
-        className: cn43("flex items-center", classNames2 == null ? void 0 : classNames2.option),
+        className: cn43(
+          "items-center group-data-[layout=grid]/list:flex-row",
+          classNames2 == null ? void 0 : classNames2.option
+        ),
         ref,
         children: ({ selectionMode }) => /* @__PURE__ */ jsxs30(Fragment8, { children: [
           selectionMode === "multiple" && /* @__PURE__ */ jsx74(FieldGroup, { children: /* @__PURE__ */ jsx74(_Checkbox, { slot: "selection" }) }),
@@ -2802,9 +2801,10 @@ var _SelectList = forwardRef20(
       SelectList,
       {
         ...props,
+        layout: "grid",
         ref,
         className: cn44(
-          "overflow-y-auto sm:max-h-[75vh] lg:max-h-[45vh]",
+          "group/list overflow-y-auto sm:max-h-[75vh] lg:max-h-[45vh]",
           classNames2.list
         ),
         children: props.children
@@ -2974,7 +2974,7 @@ var _Switch = forwardRef22(
             "div",
             {
               className: cn48(
-                "h-6 w-12 basis-12 rounded-3xl group-disabled/switch:cursor-not-allowed ",
+                "h-6 w-12 basis-12 rounded-3xl group-disabled/switch:cursor-not-allowed",
                 classNames2.track
               ),
               children: /* @__PURE__ */ jsx80(
@@ -3019,8 +3019,20 @@ var useTableContext = () => useContext15(TableContext);
 // src/Table/TableBody.tsx
 import { useTableRowGroup } from "@react-aria/table";
 import { jsx as jsx81 } from "react/jsx-runtime";
-var TableBody = ({ children }) => {
+var TableBody = ({ children, emptyState }) => {
   const { rowGroupProps } = useTableRowGroup();
+  const { state, classNames: classNames2 } = useTableContext();
+  if (state.collection.size === 0 && emptyState) {
+    return /* @__PURE__ */ jsx81("tbody", { children: /* @__PURE__ */ jsx81("tr", { className: classNames2 == null ? void 0 : classNames2.row, role: "row", children: /* @__PURE__ */ jsx81(
+      "td",
+      {
+        className: classNames2 == null ? void 0 : classNames2.cell,
+        colSpan: state.collection.size,
+        role: "rowheader",
+        children: emptyState()
+      }
+    ) }) });
+  }
   return /* @__PURE__ */ jsx81("tbody", { ...rowGroupProps, children });
 };
 
@@ -3130,8 +3142,7 @@ import { useHover } from "@react-aria/interactions";
 import { useTableColumnHeader } from "@react-aria/table";
 import { mergeProps as mergeProps5 } from "@react-aria/utils";
 import { SortDown, SortUp } from "@marigold/icons";
-import { cn as cn51, useStateProps as useStateProps4 } from "@marigold/system";
-import { width as twWidth5 } from "@marigold/system";
+import { cn as cn51, width as twWidth5, useStateProps as useStateProps4 } from "@marigold/system";
 import { jsx as jsx84, jsxs as jsxs33 } from "react/jsx-runtime";
 var TableColumnHeader = ({
   column,
@@ -3165,7 +3176,7 @@ var TableColumnHeader = ({
       align,
       children: [
         column.rendered,
-        column.props.allowsSorting && (((_a = state.sortDescriptor) == null ? void 0 : _a.column) === column.key ? ((_b = state.sortDescriptor) == null ? void 0 : _b.direction) === "ascending" ? /* @__PURE__ */ jsx84(SortUp, { className: "inline-block" }) : /* @__PURE__ */ jsx84(SortDown, { className: "inline-block" }) : /* @__PURE__ */ jsx84(SortDown, { className: "inline-block" }))
+        column.props.allowsSorting && (((_a = state.sortDescriptor) == null ? void 0 : _a.column) === column.key ? ((_b = state.sortDescriptor) == null ? void 0 : _b.direction) === "ascending" ? /* @__PURE__ */ jsx84(SortUp, { className: "inline-block" }) : /* @__PURE__ */ jsx84(SortDown, { className: "inline-block" }) : /* @__PURE__ */ jsx84("span", { className: "invisible", children: /* @__PURE__ */ jsx84(SortDown, { className: "inline-block" }) }))
       ]
     }
   );
@@ -3291,7 +3302,7 @@ var TableSelectAllCell = ({
     "th",
     {
       ref,
-      className: cn53(twWidth6[width], ["  leading-none"], classNames2 == null ? void 0 : classNames2.header),
+      className: cn53(twWidth6[width], ["leading-none"], classNames2 == null ? void 0 : classNames2.header),
       ...mergeProps7(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       align,
@@ -3309,6 +3320,7 @@ var Table = ({
   selectionMode = "none",
   disableKeyboardNavigation = false,
   stickyHeader,
+  emptyState,
   ...props
 }) => {
   const interactive = selectionMode !== "none";
@@ -3367,7 +3379,7 @@ var Table = ({
                 );
               }
             ) }, headerRow.key)) }),
-            /* @__PURE__ */ jsxs34(TableBody, { children: [
+            /* @__PURE__ */ jsxs34(TableBody, { emptyState, children: [
               ...collection.rows.map(
                 (row) => row.type === "item" && /* @__PURE__ */ jsx89(TableRow, { row, children: [...collection.getChildren(row.key)].map((cell, index) => {
                   var _a, _b;
@@ -3396,6 +3408,7 @@ Table.Header = Header2;
 Table.Row = Row;
 
 // src/Text/Text.tsx
+import { Text as Text2 } from "react-aria-components";
 import {
   cn as cn55,
   createVar as createVar11,
@@ -3409,7 +3422,7 @@ import {
   useTheme as useTheme3
 } from "@marigold/system";
 import { jsx as jsx90 } from "react/jsx-runtime";
-var Text2 = ({
+var _Text = ({
   variant,
   size,
   color,
@@ -3419,6 +3432,7 @@ var Text2 = ({
   fontSize,
   fontStyle,
   children,
+  as = "div",
   ...props
 }) => {
   const theme = useTheme3();
@@ -3428,9 +3442,10 @@ var Text2 = ({
     size
   });
   return /* @__PURE__ */ jsx90(
-    "p",
+    Text2,
     {
       ...props,
+      elementType: as,
       className: cn55(
         "text-[--color] outline-[--outline]",
         classNames2,
@@ -3930,7 +3945,7 @@ export {
   Table,
   _Tabs as Tabs,
   _Tag as Tag,
-  Text2 as Text,
+  _Text as Text,
   _TextArea as TextArea,
   _TextField as TextField,
   ThemeProvider2 as ThemeProvider,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/components",
-  "version": "9.0.0",
+  "version": "9.0.2",
   "description": "Components for the Marigold Design System",
   "license": "MIT",
   "keywords": [
@@ -23,28 +23,28 @@
     "directory": "packages/components"
   },
   "dependencies": {
-    "@internationalized/date": "3.5.4",
-    "@react-aria/accordion": "3.0.0-alpha.29",
-    "@react-aria/button": "3.9.5",
-    "@react-aria/calendar": "3.5.8",
-    "@react-aria/focus": "3.17.1",
-    "@react-aria/i18n": "3.11.1",
-    "@react-aria/interactions": "3.21.3",
-    "@react-aria/overlays": "3.22.1",
-    "@react-aria/selection": "3.18.1",
-    "@react-aria/ssr": "3.9.4",
-    "@react-aria/table": "3.14.1",
-    "@react-aria/utils": "3.24.1",
-    "@react-aria/visually-hidden": "3.8.12",
-    "@react-stately/collections": "3.10.7",
-    "@react-stately/data": "3.11.4",
-    "@react-stately/table": "3.11.8",
-    "@react-stately/tree": "3.8.1",
-    "@react-types/shared": "3.23.1",
-    "@react-types/table": "3.9.5",
-    "react-aria-components": "1.2.1",
-    "@marigold/icons": "1.2.55",
-    "@marigold/system": "9.0.0",
+    "@internationalized/date": "3.5.5",
+    "@react-aria/accordion": "3.0.0-alpha.33",
+    "@react-aria/button": "3.9.8",
+    "@react-aria/calendar": "3.5.11",
+    "@react-aria/focus": "3.18.2",
+    "@react-aria/i18n": "3.12.2",
+    "@react-aria/interactions": "3.22.2",
+    "@react-aria/overlays": "3.23.2",
+    "@react-aria/selection": "3.19.3",
+    "@react-aria/ssr": "3.9.5",
+    "@react-aria/table": "3.15.3",
+    "@react-aria/utils": "3.25.2",
+    "@react-aria/visually-hidden": "3.8.15",
+    "@react-stately/collections": "3.10.9",
+    "@react-stately/data": "3.11.6",
+    "@react-stately/table": "3.12.2",
+    "@react-stately/tree": "3.8.4",
+    "@react-types/shared": "3.24.1",
+    "@react-types/table": "3.10.1",
+    "react-aria-components": "1.3.3",
+    "@marigold/icons": "1.2.57",
+    "@marigold/system": "9.0.2",
     "@marigold/types": "1.1.1"
   },
   "peerDependencies": {
@@ -52,7 +52,7 @@
     "react-dom": "18.x"
   },
   "devDependencies": {
-    "@types/react": "18.3.3",
+    "@types/react": "18.3.5",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "tsup": "8.1.0",