@marigold/components 6.10.0 → 6.11.0

package/dist/index.js

@@ -47,6 +47,7 @@ __export(src_exports, {
   Center: () => Center,
   Checkbox: () => _Checkbox,
   CheckboxGroup: () => _CheckboxGroup,
+  CloseButton: () => CloseButton2,
   Columns: () => Columns,
   ComboBox: () => ComboBox,
   Container: () => Container,
@@ -84,7 +85,7 @@ __export(src_exports, {
   Switch: () => _Switch,
   Table: () => Table,
   Tabs: () => _Tabs,
-  Tag: () => Tag2,
+  Tag: () => _Tag,
   Text: () => Text2,
   TextArea: () => _TextArea,
   TextField: () => _TextField,
@@ -352,7 +353,6 @@ var Aside = ({
   sideWidth,
   space = 0,
   side = "left",
-  stretch = true,
   wrap = "50%"
 }) => {
   const [left, right] = import_react5.Children.toArray(children);
@@ -360,34 +360,24 @@ var Aside = ({
     aside: (0, import_system4.createVar)({ sideWidth }),
     content: (0, import_system4.createVar)({ wrap })
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-    "div",
-    {
-      className: (0, import_system4.cn)(
-        "flex flex-wrap",
-        import_system4.gapSpace[space],
-        !stretch && "items-start"
-      ),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          "div",
-          {
-            className: classNames[side === "left" ? "aside" : "content"],
-            style: vars[side === "left" ? "aside" : "content"],
-            children: left
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          "div",
-          {
-            className: classNames[side === "right" ? "aside" : "content"],
-            style: vars[side === "right" ? "aside" : "content"],
-            children: right
-          }
-        )
-      ]
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: (0, import_system4.cn)("flex flex-wrap", import_system4.gapSpace[space]), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "div",
+      {
+        className: classNames[side === "left" ? "aside" : "content"],
+        style: vars[side === "left" ? "aside" : "content"],
+        children: left
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "div",
+      {
+        className: classNames[side === "right" ? "aside" : "content"],
+        style: vars[side === "right" ? "aside" : "content"],
+        children: right
+      }
+    )
+  ] });
 };
 
 // src/Aspect/Aspect.tsx
@@ -613,7 +603,7 @@ var Input = (0, import_react7.forwardRef)(
   }
 );
 
-// src/ListBox/ListBox.tsx
+// src/ListBox/_ListBox.tsx
 var import_react10 = require("react");
 var import_listbox3 = require("@react-aria/listbox");
 var import_utils6 = require("@react-aria/utils");
@@ -624,7 +614,7 @@ var import_react8 = require("react");
 var ListBoxContext = (0, import_react8.createContext)({});
 var useListBoxContext = () => (0, import_react8.useContext)(ListBoxContext);
 
-// src/ListBox/ListBoxOption.tsx
+// src/ListBox/_ListBoxOption.tsx
 var import_react9 = require("react");
 var import_listbox = require("@react-aria/listbox");
 var import_utils5 = require("@react-aria/utils");
@@ -657,7 +647,7 @@ var ListBoxOption = ({ item, state }) => {
   );
 };
 
-// src/ListBox/ListBoxSection.tsx
+// src/ListBox/_ListBoxSection.tsx
 var import_listbox2 = require("@react-aria/listbox");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var ListBoxSection = ({ section, state }) => {
@@ -672,25 +662,27 @@ var ListBoxSection = ({ section, state }) => {
   ] });
 };
 
-// src/ListBox/ListBox.tsx
+// src/ListBox/_ListBox.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var ListBox = (0, import_react10.forwardRef)(
   ({ state, variant, size, ...props }, ref) => {
     const innerRef = (0, import_utils6.useObjectRef)(ref);
     const { listBoxProps } = (0, import_listbox3.useListBox)(props, state, innerRef);
     const classNames2 = (0, import_system11.useClassNames)({ component: "ListBox", variant, size });
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ListBoxContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-      "div",
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ListBoxContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: classNames2.container, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      "ul",
       {
         className: (0, import_system11.cn)(
-          "overflow-y-auto overflow-x-hidden",
-          classNames2.container
+          "overflow-y-auto sm:max-h-[75vh] lg:max-h-[45vh]",
+          classNames2.list
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("ul", { className: classNames2.list, ref: innerRef, ...listBoxProps, children: [...state.collection].map(
+        ref: innerRef,
+        ...listBoxProps,
+        children: [...state.collection].map(
           (item) => item.type === "section" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ListBoxSection, { section: item, state }, item.key) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ListBoxOption, { item, state }, item.key)
-        ) })
+        )
       }
-    ) });
+    ) }) });
   }
 );
 
@@ -779,7 +771,7 @@ var Overlay = ({ children, container, open }) => {
   ) });
 };
 
-// src/Overlay/Popover.tsx
+// src/Overlay/_Popover.tsx
 var import_react13 = require("react");
 var import_focus2 = require("@react-aria/focus");
 var import_overlays2 = require("@react-aria/overlays");
@@ -821,10 +813,7 @@ var PopoverWrapper = (0, import_react13.forwardRef)(
         "div",
         {
           ...popoverProps,
-          className: (0, import_system15.cn)(
-            "flex flex-col sm:max-h-[75vh] lg:max-h-[45vh]",
-            classNames2
-          ),
+          className: classNames2,
           style: {
             ...popoverProps.style,
             minWidth: props.triggerRef.current ? props.triggerRef.current.offsetWidth : void 0
@@ -1414,7 +1403,6 @@ var HelpText2 = ({
   description,
   error,
   errorMessage,
-  isInvalid,
   ...props
 }) => {
   const hasErrorMessage = errorMessage && error;
@@ -1660,6 +1648,7 @@ var _DialogTrigger = ({
   open,
   dismissable,
   keyboardDismissable,
+  isNonModal,
   ...rest
 }) => {
   const props = {
@@ -1670,6 +1659,8 @@ var _DialogTrigger = ({
   const [dialogTrigger, dialog] = children;
   const hasDialogTrigger = dialogTrigger.type !== _Dialog;
   const currentDialog = children.length < 2 ? !hasDialogTrigger && dialogTrigger : dialog;
+  if (isNonModal)
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_aria_components9.DialogTrigger, { ...props, children: props.children });
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react_aria_components9.DialogTrigger, { ...props, children: [
     hasDialogTrigger && dialogTrigger,
     /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
@@ -3908,135 +3899,54 @@ var _Tooltip = ({ children, variant, size, open, ...rest }) => {
 };
 _Tooltip.Trigger = _TooltipTrigger;
 
-// src/TagGroup/index.ts
-var import_collections6 = require("@react-stately/collections");
-
-// src/TagGroup/TagGroup.tsx
-var import_react56 = require("react");
-var import_tag2 = require("@react-aria/tag");
-var import_list = require("@react-stately/list");
+// src/TagGroup/Tag.tsx
+var import_react_aria_components27 = require("react-aria-components");
 var import_system74 = require("@marigold/system");
 
-// src/TagGroup/Tag.tsx
-var import_react55 = __toESM(require("react"));
-var import_button4 = require("@react-aria/button");
-var import_focus14 = require("@react-aria/focus");
-var import_tag = require("@react-aria/tag");
-var import_utils24 = require("@react-aria/utils");
+// src/TagGroup/TagGroup.tsx
+var import_react_aria_components26 = require("react-aria-components");
 var import_system73 = require("@marigold/system");
 var import_jsx_runtime89 = require("react/jsx-runtime");
-var CloseButton2 = ({ className, ...props }) => {
-  const ref = (0, import_react55.useRef)(null);
-  const { buttonProps } = (0, import_button4.useButton)({ ...props }, ref);
-  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("button", { className, ...buttonProps, children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("path", { d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }) }) });
-};
-var Tag = ({ variant, size, item, state, ...rest }) => {
-  const props = {
-    item,
-    ...rest
-  };
-  let ref = import_react55.default.useRef(null);
-  let { focusProps } = (0, import_focus14.useFocusRing)({ within: true });
-  const { rowProps, gridCellProps, allowsRemoving, removeButtonProps } = (0, import_tag.useTag)(
-    {
-      ...props,
-      item
-    },
-    state,
-    ref
-  );
-  const classNames2 = (0, import_system73.useClassNames)({ component: "Tag", variant, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
-    "span",
-    {
-      ref,
-      ...(0, import_utils24.mergeProps)(rowProps, focusProps),
-      className: classNames2.tag,
-      children: /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { ...gridCellProps, className: classNames2.gridCell, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", { children: item.rendered }),
-        allowsRemoving && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
-          CloseButton2,
-          {
-            ...removeButtonProps,
-            className: (0, import_system73.cn)("flex items-center", classNames2.closeButton)
-          }
-        )
-      ] })
-    }
-  );
-};
-
-// src/TagGroup/TagGroup.tsx
-var import_jsx_runtime90 = require("react/jsx-runtime");
-var import_react57 = require("react");
-var TagGroup = ({
+var _TagGroup = ({
   width,
-  required,
-  error,
-  allowsRemoving,
+  items,
+  children,
+  variant,
+  size,
   ...rest
 }) => {
-  const props = {
-    isRequired: required,
-    validationState: error ? "invalid" : "valid",
-    ...rest
-  };
-  const inputRef = (0, import_react56.useRef)(null);
-  const state = (0, import_list.useListState)(props);
-  const { gridProps, labelProps, descriptionProps, errorMessageProps } = (0, import_tag2.useTagGroup)(props, state, inputRef);
-  const stateProps = (0, import_system74.useStateProps)({
-    error,
-    required
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
-    FieldBase,
-    {
-      width,
-      label: props.label,
-      labelProps,
-      description: props.description,
-      descriptionProps,
-      error,
-      errorMessage: props.errorMessage,
-      errorMessageProps,
-      stateProps,
-      ...gridProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
-        "div",
-        {
-          role: "presentation",
-          ref: inputRef,
-          className: "flex flex-wrap items-start gap-1",
-          children: [...state.collection].map((item) => /* @__PURE__ */ (0, import_react57.createElement)(
-            Tag,
-            {
-              ...item.props,
-              key: item.key,
-              item,
-              state,
-              allowsRemoving,
-              onRemove: props.onRemove
-            },
-            item.rendered
-          ))
-        }
-      )
-    }
-  );
+  const classNames2 = (0, import_system73.useClassNames)({ component: "Tag", variant, size });
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(FieldBase2, { as: import_react_aria_components26.TagGroup, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_react_aria_components26.TagList, { items, className: classNames2.listItems, children }) });
 };
 
-// src/TagGroup/index.ts
-var Tag2 = import_collections6.Item;
-Tag2.Group = TagGroup;
+// src/TagGroup/Tag.tsx
+var import_jsx_runtime90 = require("react/jsx-runtime");
+var CloseButton2 = ({ className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_react_aria_components27.Button, { slot: "remove", className, children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("path", { d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }) }) });
+};
+var _Tag = ({ variant, size, children, ...props }) => {
+  let textValue = typeof children === "string" ? children : void 0;
+  const classNames2 = (0, import_system74.useClassNames)({ component: "Tag", variant, size });
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_react_aria_components27.Tag, { textValue, ...props, className: classNames2.tag, children: ({ allowsRemoving }) => /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(import_jsx_runtime90.Fragment, { children: [
+    children,
+    allowsRemoving && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+      CloseButton2,
+      {
+        className: (0, import_system74.cn)("flex items-center", classNames2.closeButton)
+      }
+    )
+  ] }) });
+};
+_Tag.Group = _TagGroup;
 
 // src/VisuallyHidden/VisuallyHidden.tsx
 var import_visually_hidden = require("@react-aria/visually-hidden");
 
 // src/XLoader/XLoader.tsx
-var import_react58 = require("react");
+var import_react55 = require("react");
 var import_system75 = require("@marigold/system");
 var import_jsx_runtime91 = require("react/jsx-runtime");
-var XLoader = (0, import_react58.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
+var XLoader = (0, import_react55.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
   import_system75.SVG,
   {
     id: "XLoader",
@@ -4250,22 +4160,22 @@ var XLoader = (0, import_react58.forwardRef)((props, ref) => /* @__PURE__ */ (0,
 ));
 
 // src/Tabs/Tabs.tsx
-var import_react_aria_components29 = require("react-aria-components");
+var import_react_aria_components31 = require("react-aria-components");
 var import_system78 = require("@marigold/system");
 
 // src/Tabs/Context.ts
-var import_react59 = require("react");
-var TabContext = (0, import_react59.createContext)({});
-var useTabContext = () => (0, import_react59.useContext)(TabContext);
+var import_react56 = require("react");
+var TabContext = (0, import_react56.createContext)({});
+var useTabContext = () => (0, import_react56.useContext)(TabContext);
 
 // src/Tabs/Tab.tsx
-var import_react_aria_components26 = require("react-aria-components");
+var import_react_aria_components28 = require("react-aria-components");
 var import_system76 = require("@marigold/system");
 var import_jsx_runtime92 = require("react/jsx-runtime");
 var _Tab = (props) => {
   const { classNames: classNames2 } = useTabContext();
   return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
-    import_react_aria_components26.Tab,
+    import_react_aria_components28.Tab,
     {
       ...props,
       className: (0, import_system76.cn)(
@@ -4278,13 +4188,13 @@ var _Tab = (props) => {
 };
 
 // src/Tabs/TabList.tsx
-var import_react_aria_components27 = require("react-aria-components");
+var import_react_aria_components29 = require("react-aria-components");
 var import_system77 = require("@marigold/system");
 var import_jsx_runtime93 = require("react/jsx-runtime");
 var _TabList = ({ space = 2, ...props }) => {
   const { classNames: classNames2 } = useTabContext();
   return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
-    import_react_aria_components27.TabList,
+    import_react_aria_components29.TabList,
     {
       ...props,
       className: (0, import_system77.cn)("flex", import_system77.gapSpace[space], classNames2.tabsList),
@@ -4294,11 +4204,11 @@ var _TabList = ({ space = 2, ...props }) => {
 };
 
 // src/Tabs/TabPanel.tsx
-var import_react_aria_components28 = require("react-aria-components");
+var import_react_aria_components30 = require("react-aria-components");
 var import_jsx_runtime94 = require("react/jsx-runtime");
 var _TabPanel = (props) => {
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_react_aria_components28.TabPanel, { ...props, className: classNames2.tabpanel, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_react_aria_components30.TabPanel, { ...props, className: classNames2.tabpanel, children: props.children });
 };
 
 // src/Tabs/Tabs.tsx
@@ -4313,7 +4223,7 @@ var _Tabs = ({ disabled, variant, size = "medium", ...rest }) => {
     size,
     variant
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(TabContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_react_aria_components29.Tabs, { ...props, className: classNames2.container, children: props.children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(TabContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_react_aria_components31.Tabs, { ...props, className: classNames2.container, children: props.children }) });
 };
 _Tabs.List = _TabList;
 _Tabs.TabPanel = _TabPanel;
@@ -4337,6 +4247,7 @@ _Tabs.Item = _Tab;
   Center,
   Checkbox,
   CheckboxGroup,
+  CloseButton,
   Columns,
   ComboBox,
   Container,