@marigold/components 8.0.2 → 9.0.0

package/dist/index.mjs

@@ -322,13 +322,6 @@ import { useContext } from "react";
 import { FieldError, FieldErrorContext, Text } from "react-aria-components";
 import { cn as cn4, useClassNames as useClassNames2 } from "@marigold/system";
 import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
-var Description = ({ children }) => {
-  const ctx = useContext(FieldErrorContext);
-  if (ctx && ctx.isInvalid) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx7(Text, { slot: "description", children });
-};
 var Icon = ({ className }) => /* @__PURE__ */ jsx7(
   "svg",
   {
@@ -351,6 +344,10 @@ var HelpText = ({
     variant,
     size
   });
+  const ctx = useContext(FieldErrorContext);
+  if (!description && ctx && !ctx.isInvalid) {
+    return null;
+  }
   return /* @__PURE__ */ jsxs3("div", { className: cn4(classNames2.container), children: [
     /* @__PURE__ */ jsx7(FieldError, { ...props, className: "flex flex-col", children: (validation) => {
       const messages = (typeof errorMessage === "function" ? errorMessage(validation) : errorMessage) || validation.validationErrors;
@@ -362,7 +359,7 @@ var HelpText = ({
         messages
       ] });
     } }),
-    /* @__PURE__ */ jsx7(Description, { children: description })
+    ctx && ctx.isInvalid ? null : /* @__PURE__ */ jsx7(Text, { slot: "description", children: description })
   ] });
 };
 
@@ -759,6 +756,7 @@ var _Popover = forwardRef7(
         ref,
         ...props,
         className: classNames2,
+        placement,
         offset: 0,
         UNSTABLE_portalContainer: portal,
         children
@@ -915,7 +913,7 @@ import { useClassNames as useClassNames12 } from "@marigold/system";
 import { jsx as jsx22 } from "react/jsx-runtime";
 var Badge = ({ variant, size, children, ...props }) => {
   const classNames2 = useClassNames12({ component: "Badge", variant, size });
-  return /* @__PURE__ */ jsx22("div", { ...props, className: classNames2, children });
+  return /* @__PURE__ */ jsx22("div", { className: classNames2, ...props, children });
 };
 
 // src/Breakout/Breakout.tsx
@@ -925,8 +923,7 @@ var Breakout = ({
   height,
   children,
   alignX = "left",
-  alignY = "center",
-  ...props
+  alignY = "center"
 }) => {
   var _a, _b, _c, _d;
   return /* @__PURE__ */ jsx23(
@@ -940,7 +937,6 @@ var Breakout = ({
         "h-[--height]"
       ),
       style: createVar4({ height }),
-      ...props,
       children
     }
   );
@@ -1029,9 +1025,8 @@ var Center = ({
 };
 
 // src/Checkbox/Checkbox.tsx
-import { forwardRef as forwardRef11, useContext as useContext5 } from "react";
+import { forwardRef as forwardRef11 } from "react";
 import { Checkbox } from "react-aria-components";
-import { CheckboxGroupStateContext } from "react-aria-components";
 import { cn as cn18, useClassNames as useClassNames16 } from "@marigold/system";
 
 // src/Checkbox/CheckBoxField.tsx
@@ -1045,6 +1040,11 @@ var CheckboxField = ({ children, labelWidth }) => {
   ] });
 };
 
+// src/Checkbox/Context.tsx
+import { createContext as createContext4, useContext as useContext5 } from "react";
+var CheckboxGroupContext = createContext4(null);
+var useCheckboxGroupContext = () => useContext5(CheckboxGroupContext);
+
 // src/Checkbox/Checkbox.tsx
 import { Fragment as Fragment2, jsx as jsx28, jsxs as jsxs11 } from "react/jsx-runtime";
 var CheckMark = () => /* @__PURE__ */ jsx28("svg", { viewBox: "0 0 12 10", children: /* @__PURE__ */ jsx28(
@@ -1072,7 +1072,7 @@ var Icon2 = ({ className, checked, indeterminate, ...props }) => {
         "flex shrink-0 grow-0 basis-4 items-center justify-center",
         "h-4 w-4 p-px",
         "bg-white",
-        "rounded-[3px] border border-solid border-black ",
+        "rounded-[3px] border border-solid border-black",
         className
       ),
       ...props,
@@ -1082,15 +1082,14 @@ var Icon2 = ({ className, checked, indeterminate, ...props }) => {
 };
 var _Checkbox = forwardRef11(
   ({
-    className,
-    indeterminate,
     error,
     disabled,
-    defaultChecked,
-    children,
-    checked,
     readOnly,
     required,
+    checked,
+    defaultChecked,
+    indeterminate,
+    children,
     variant,
     size,
     ...rest
@@ -1106,8 +1105,13 @@ var _Checkbox = forwardRef11(
       ...rest
     };
     const { labelWidth } = useFieldGroupContext();
-    const classNames2 = useClassNames16({ component: "Checkbox", variant, size });
-    const state = useContext5(CheckboxGroupStateContext);
+    const group = useCheckboxGroupContext();
+    console.log(group);
+    const classNames2 = useClassNames16({
+      component: "Checkbox",
+      variant: variant || (group == null ? void 0 : group.variant),
+      size: size || (group == null ? void 0 : group.size)
+    });
     const component = /* @__PURE__ */ jsx28(
       Checkbox,
       {
@@ -1131,21 +1135,13 @@ var _Checkbox = forwardRef11(
         ] })
       }
     );
-    return !state && labelWidth ? /* @__PURE__ */ jsx28(CheckboxField, { labelWidth, children: component }) : component;
+    return !group && !!labelWidth ? /* @__PURE__ */ jsx28(CheckboxField, { labelWidth, children: component }) : component;
   }
 );
 
 // src/Checkbox/CheckboxGroup.tsx
 import { CheckboxGroup } from "react-aria-components";
 import { cn as cn19, useClassNames as useClassNames17 } from "@marigold/system";
-
-// src/Checkbox/Context.tsx
-import { createContext as createContext4, useContext as useContext6 } from "react";
-var CheckboxGroupContext = createContext4(
-  null
-);
-
-// src/Checkbox/CheckboxGroup.tsx
 import { jsx as jsx29 } from "react/jsx-runtime";
 var _CheckboxGroup = ({
   children,
@@ -1279,7 +1275,7 @@ var Container = ({
 };
 
 // src/Dialog/Dialog.tsx
-import { useContext as useContext7 } from "react";
+import { useContext as useContext6 } from "react";
 import { Dialog, OverlayTriggerStateContext } from "react-aria-components";
 import { cn as cn23, useClassNames as useClassNames19 } from "@marigold/system";
 
@@ -1300,7 +1296,7 @@ var _Headline = ({
   children,
   align = "left",
   color,
-  level = 1,
+  level = "1",
   ...props
 }) => {
   const theme = useTheme2();
@@ -1390,7 +1386,7 @@ var _DialogTrigger = ({
 // src/Dialog/Dialog.tsx
 import { Fragment as Fragment3, jsx as jsx35, jsxs as jsxs13 } from "react/jsx-runtime";
 var CloseButton = ({ className }) => {
-  const { close } = useContext7(OverlayTriggerStateContext);
+  const { close } = useContext6(OverlayTriggerStateContext);
   return /* @__PURE__ */ jsx35("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx35(
     "button",
     {
@@ -1419,7 +1415,7 @@ var _Dialog = ({
   ...props
 }) => {
   const classNames2 = useClassNames19({ component: "Dialog", variant, size });
-  let state = useContext7(OverlayTriggerStateContext);
+  let state = useContext6(OverlayTriggerStateContext);
   let children = props.children;
   if (typeof children === "function") {
     children = children({
@@ -1681,14 +1677,14 @@ import { cn as cn29, useClassNames as useClassNames26 } from "@marigold/system";
 
 // src/Calendar/CalendarGridHeader.tsx
 import { startOfWeek, today } from "@internationalized/date";
-import { useContext as useContext8, useMemo } from "react";
+import { useContext as useContext7, useMemo } from "react";
 import { CalendarStateContext } from "react-aria-components";
 import { useCalendarGrid } from "@react-aria/calendar";
 import { useDateFormatter, useLocale } from "@react-aria/i18n";
 import { useClassNames as useClassNames25 } from "@marigold/system";
 import { jsx as jsx46 } from "react/jsx-runtime";
 function CalendarGridHeader(props) {
-  const state = useContext8(CalendarStateContext);
+  const state = useContext7(CalendarStateContext);
   const { headerProps } = useCalendarGrid(props, state);
   const { locale } = useLocale();
   const dayFormatter = useDateFormatter({
@@ -1727,7 +1723,7 @@ var _CalendarGrid = () => {
 };
 
 // src/Calendar/CalendarListBox.tsx
-import { useContext as useContext9 } from "react";
+import { useContext as useContext8 } from "react";
 import { CalendarStateContext as CalendarStateContext2 } from "react-aria-components";
 import { ChevronDown as ChevronDown2 } from "@marigold/icons";
 import { cn as cn30, useClassNames as useClassNames27 } from "@marigold/system";
@@ -1755,7 +1751,7 @@ function CalendarListBox({
   isDisabled,
   setSelectedDropdown
 }) {
-  const state = useContext9(CalendarStateContext2);
+  const state = useContext8(CalendarStateContext2);
   const months = useFormattedMonths(state.timeZone, state.focusedDate);
   const buttonStyles = "flex items-center justify-between gap-1 overflow-hidden";
   const { select: selectClassNames } = useClassNames27({ component: "Select" });
@@ -1819,11 +1815,11 @@ function MonthControls() {
 var MonthControls_default = MonthControls;
 
 // src/Calendar/MonthListBox.tsx
-import { useContext as useContext10 } from "react";
+import { useContext as useContext9 } from "react";
 import { CalendarStateContext as CalendarStateContext3 } from "react-aria-components";
 import { jsx as jsx50 } from "react/jsx-runtime";
 var MonthListBox = ({ setSelectedDropdown }) => {
-  const state = useContext10(CalendarStateContext3);
+  const state = useContext9(CalendarStateContext3);
   const months = useFormattedMonths(state.timeZone, state.focusedDate);
   let onChange = (index) => {
     let value = Number(index) + 1;
@@ -1858,7 +1854,7 @@ var MonthListBox_default = MonthListBox;
 
 // src/Calendar/YearListBox.tsx
 import {
-  useContext as useContext11,
+  useContext as useContext10,
   useEffect as useEffect2,
   useRef as useRef3
 } from "react";
@@ -1866,7 +1862,7 @@ import { CalendarStateContext as CalendarStateContext4 } from "react-aria-compon
 import { useDateFormatter as useDateFormatter3 } from "@react-aria/i18n";
 import { jsx as jsx51 } from "react/jsx-runtime";
 var YearListBox = ({ setSelectedDropdown }) => {
-  const state = useContext11(CalendarStateContext4);
+  const state = useContext10(CalendarStateContext4);
   const years = [];
   let formatter = useDateFormatter3({
     year: "numeric",
@@ -2097,9 +2093,9 @@ var _Link = forwardRef14(
 import { useClassNames as useClassNames32 } from "@marigold/system";
 
 // src/List/Context.ts
-import { createContext as createContext5, useContext as useContext12 } from "react";
+import { createContext as createContext5, useContext as useContext11 } from "react";
 var ListContext = createContext5({});
-var useListContext = () => useContext12(ListContext);
+var useListContext = () => useContext11(ListContext);
 
 // src/List/ListItem.tsx
 import { jsx as jsx56 } from "react/jsx-runtime";
@@ -2190,9 +2186,9 @@ var ActionMenu = ({
 import { cn as cn36, useClassNames as useClassNames37 } from "@marigold/system";
 
 // src/SectionMessage/Context.tsx
-import { createContext as createContext6, useContext as useContext13 } from "react";
+import { createContext as createContext6, useContext as useContext12 } from "react";
 var SectionMessageContext = createContext6({});
-var useSectionMessageContext = () => useContext13(SectionMessageContext);
+var useSectionMessageContext = () => useContext12(SectionMessageContext);
 
 // src/SectionMessage/SectionMessageContent.tsx
 import { cn as cn34 } from "@marigold/system";
@@ -2552,11 +2548,11 @@ import { Radio } from "react-aria-components";
 import { cn as cn41, useClassNames as useClassNames42 } from "@marigold/system";
 
 // src/Radio/Context.ts
-import { createContext as createContext7, useContext as useContext14 } from "react";
+import { createContext as createContext7, useContext as useContext13 } from "react";
 var RadioGroupContext = createContext7(
   null
 );
-var useRadioGroupContext = () => useContext14(RadioGroupContext);
+var useRadioGroupContext = () => useContext13(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
 import { RadioGroup } from "react-aria-components";
@@ -2722,22 +2718,33 @@ var _Select = forwardRef18(
       ...rest
     };
     const classNames2 = useClassNames43({ component: "Select", variant, size });
-    return /* @__PURE__ */ jsxs29(FieldBase, { isOpen: true, as: Select, ref, ...props, children: [
-      /* @__PURE__ */ jsxs29(
-        Button6,
-        {
-          className: cn42(
-            "flex w-full items-center justify-between gap-1 overflow-hidden",
-            classNames2.select
+    return /* @__PURE__ */ jsxs29(
+      FieldBase,
+      {
+        isOpen: true,
+        as: Select,
+        ref,
+        variant,
+        size,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs29(
+            Button6,
+            {
+              className: cn42(
+                "flex w-full items-center justify-between gap-1 overflow-hidden",
+                classNames2.select
+              ),
+              children: [
+                /* @__PURE__ */ jsx73(SelectValue, {}),
+                /* @__PURE__ */ jsx73(ChevronDown, { className: cn42("size-4", classNames2.icon) })
+              ]
+            }
           ),
-          children: [
-            /* @__PURE__ */ jsx73(SelectValue, {}),
-            /* @__PURE__ */ jsx73(ChevronDown, { className: "size-4" })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx73(_Popover, { children: /* @__PURE__ */ jsx73(_ListBox, { items, children: props.children }) })
-    ] });
+          /* @__PURE__ */ jsx73(_Popover, { children: /* @__PURE__ */ jsx73(_ListBox, { items, children: props.children }) })
+        ]
+      }
+    );
   }
 );
 _Select.Option = _ListBox.Item;
@@ -2751,11 +2758,11 @@ import { GridList as SelectList } from "react-aria-components";
 import { cn as cn44, useClassNames as useClassNames44 } from "@marigold/system";
 
 // src/SelectList/Context.ts
-import { createContext as createContext8, useContext as useContext15 } from "react";
+import { createContext as createContext8, useContext as useContext14 } from "react";
 var SelectListContext = createContext8(
   {}
 );
-var useSelectListContext = () => useContext15(SelectListContext);
+var useSelectListContext = () => useContext14(SelectListContext);
 
 // src/SelectList/SelectListItem.tsx
 import { forwardRef as forwardRef19 } from "react";
@@ -2893,14 +2900,10 @@ var _Slider = forwardRef21(
 
 // src/Split/Split.tsx
 import { jsx as jsx78 } from "react/jsx-runtime";
-var Split = (props) => /* @__PURE__ */ jsx78("div", { ...props, role: "separator", className: "grow" });
+var Split = () => /* @__PURE__ */ jsx78("div", { role: "separator", className: "grow" });
 
 // src/Stack/Stack.tsx
-import {
-  alignment as alignment3,
-  cn as cn47,
-  gapSpace as gapSpace7
-} from "@marigold/system";
+import { alignment as alignment3, cn as cn47, gapSpace as gapSpace7 } from "@marigold/system";
 import { jsx as jsx79 } from "react/jsx-runtime";
 var Stack = ({
   children,
@@ -3009,9 +3012,9 @@ import {
 import { cn as cn54, useClassNames as useClassNames48 } from "@marigold/system";
 
 // src/Table/Context.tsx
-import { createContext as createContext9, useContext as useContext16 } from "react";
+import { createContext as createContext9, useContext as useContext15 } from "react";
 var TableContext = createContext9({});
-var useTableContext = () => useContext16(TableContext);
+var useTableContext = () => useContext15(TableContext);
 
 // src/Table/TableBody.tsx
 import { useTableRowGroup } from "@react-aria/table";
@@ -3483,15 +3486,7 @@ import { forwardRef as forwardRef24 } from "react";
 import { TextField as TextField2 } from "react-aria-components";
 import { jsx as jsx92 } from "react/jsx-runtime";
 var _TextField = forwardRef24(
-  ({
-    variant,
-    size,
-    required,
-    disabled,
-    readOnly,
-    error,
-    ...rest
-  }, ref) => {
+  ({ required, disabled, readOnly, error, ...rest }, ref) => {
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
@@ -3806,9 +3801,9 @@ import { Tabs } from "react-aria-components";
 import { useClassNames as useClassNames52 } from "@marigold/system";
 
 // src/Tabs/Context.ts
-import { createContext as createContext10, useContext as useContext17 } from "react";
+import { createContext as createContext10, useContext as useContext16 } from "react";
 var TabContext = createContext10({});
-var useTabContext = () => useContext17(TabContext);
+var useTabContext = () => useContext16(TabContext);
 
 // src/Tabs/Tab.tsx
 import { Tab } from "react-aria-components";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/components",
-  "version": "8.0.2",
+  "version": "9.0.0",
   "description": "Components for the Marigold Design System",
   "license": "MIT",
   "keywords": [
@@ -43,8 +43,8 @@
     "@react-types/shared": "3.23.1",
     "@react-types/table": "3.9.5",
     "react-aria-components": "1.2.1",
-    "@marigold/icons": "1.2.54",
-    "@marigold/system": "8.0.2",
+    "@marigold/icons": "1.2.55",
+    "@marigold/system": "9.0.0",
     "@marigold/types": "1.1.1"
   },
   "peerDependencies": {