@marigold/components 6.7.0 → 6.8.0

package/dist/index.d.mts

@@ -179,6 +179,7 @@ interface HelpTextProps {
     size?: string;
     description?: ReactNode;
     error?: boolean;
+    isInvalid?: ValidationResult['isInvalid'];
     errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode);
 }
 
@@ -311,7 +312,7 @@ interface FooterProps extends Omit<HtmlProps<'footer'>, 'className'> {
 }
 declare const Footer: ({ children, variant, size, ...props }: FooterProps) => react_jsx_runtime.JSX.Element;
 
-interface HeaderProps extends Omit<RAC.HeadingProps, 'children' | 'className'> {
+interface HeaderProps extends Omit<RAC.HeadingProps, 'children'> {
     children?: ReactNode;
     variant?: string;
     size?: string;

package/dist/index.d.ts

@@ -179,6 +179,7 @@ interface HelpTextProps {
     size?: string;
     description?: ReactNode;
     error?: boolean;
+    isInvalid?: ValidationResult['isInvalid'];
     errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode);
 }
 
@@ -311,7 +312,7 @@ interface FooterProps extends Omit<HtmlProps<'footer'>, 'className'> {
 }
 declare const Footer: ({ children, variant, size, ...props }: FooterProps) => react_jsx_runtime.JSX.Element;
 
-interface HeaderProps extends Omit<RAC.HeadingProps, 'children' | 'className'> {
+interface HeaderProps extends Omit<RAC.HeadingProps, 'children'> {
     children?: ReactNode;
     variant?: string;
     size?: string;

package/dist/index.js

@@ -1387,6 +1387,7 @@ var HelpText2 = ({
   description,
   error,
   errorMessage,
+  isInvalid,
   ...props
 }) => {
   const hasErrorMessage = errorMessage && error;
@@ -1398,27 +1399,29 @@ var HelpText2 = ({
   if (!description && !errorMessage) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-    import_react_aria_components4.Text,
-    {
-      ...props,
-      slot: hasErrorMessage ? "errorMessage" : "description",
-      className: (0, import_system23.cn)("flex items-center gap-1", classNames2.container),
-      children: hasErrorMessage ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-          "svg",
-          {
-            className: (0, import_system23.cn)("h-4 w-4", classNames2.icon),
-            viewBox: "0 0 24 24",
-            role: "presentation",
-            fill: "currentColor",
-            children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "M2.25 20.3097H21.75L12 3.46875L2.25 20.3097ZM12.8864 17.2606H11.1136V15.4879H12.8864V17.2606ZM12.8864 13.7151H11.1136V10.1697H12.8864V13.7151Z" })
-          }
-        ),
-        errorMessage
-      ] }) : description
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: (0, import_system23.cn)(classNames2.container), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+      import_react_aria_components4.FieldError,
+      {
+        ...props,
+        className: "grid grid-flow-col items-center justify-start gap-1",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            "svg",
+            {
+              className: (0, import_system23.cn)("h-4 w-4", classNames2.icon),
+              viewBox: "0 0 24 24",
+              role: "presentation",
+              fill: "currentColor",
+              children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "M2.25 20.3097H21.75L12 3.46875L2.25 20.3097ZM12.8864 17.2606H11.1136V15.4879H12.8864V17.2606ZM12.8864 13.7151H11.1136V10.1697H12.8864V13.7151Z" })
+            }
+          ),
+          errorMessage
+        ]
+      }
+    ),
+    !hasErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_aria_components4.Text, { slot: "description", children: description })
+  ] });
 };
 
 // src/FieldBase/_FieldBase.tsx
@@ -1447,6 +1450,7 @@ var _FieldBase = (props, ref) => {
     {
       ref,
       className: (0, import_system24.cn)("group/field", import_system24.width[width], classNames2, className),
+      "data-required": props.isRequired ? true : void 0,
       ...rest,
       children: [
         label ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(_Label, { variant, size, children: label }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { "aria-hidden": "true" }),

package/dist/index.mjs

@@ -1304,15 +1304,16 @@ import { forwardRef as forwardRef10 } from "react";
 import { cn as cn17, width as twWidth2, useClassNames as useClassNames15 } from "@marigold/system";
 
 // src/HelpText/_HelpText.tsx
-import { Text } from "react-aria-components";
+import { FieldError, Text } from "react-aria-components";
 import { cn as cn16, useClassNames as useClassNames14 } from "@marigold/system";
-import { Fragment as Fragment5, jsx as jsx30, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs14 } from "react/jsx-runtime";
 var HelpText2 = ({
   variant,
   size,
   description,
   error,
   errorMessage,
+  isInvalid,
   ...props
 }) => {
   const hasErrorMessage = errorMessage && error;
@@ -1324,27 +1325,29 @@ var HelpText2 = ({
   if (!description && !errorMessage) {
     return null;
   }
-  return /* @__PURE__ */ jsx30(
-    Text,
-    {
-      ...props,
-      slot: hasErrorMessage ? "errorMessage" : "description",
-      className: cn16("flex items-center gap-1", classNames2.container),
-      children: hasErrorMessage ? /* @__PURE__ */ jsxs14(Fragment5, { children: [
-        /* @__PURE__ */ jsx30(
-          "svg",
-          {
-            className: cn16("h-4 w-4", classNames2.icon),
-            viewBox: "0 0 24 24",
-            role: "presentation",
-            fill: "currentColor",
-            children: /* @__PURE__ */ jsx30("path", { d: "M2.25 20.3097H21.75L12 3.46875L2.25 20.3097ZM12.8864 17.2606H11.1136V15.4879H12.8864V17.2606ZM12.8864 13.7151H11.1136V10.1697H12.8864V13.7151Z" })
-          }
-        ),
-        errorMessage
-      ] }) : description
-    }
-  );
+  return /* @__PURE__ */ jsxs14("div", { className: cn16(classNames2.container), children: [
+    /* @__PURE__ */ jsxs14(
+      FieldError,
+      {
+        ...props,
+        className: "grid grid-flow-col items-center justify-start gap-1",
+        children: [
+          /* @__PURE__ */ jsx30(
+            "svg",
+            {
+              className: cn16("h-4 w-4", classNames2.icon),
+              viewBox: "0 0 24 24",
+              role: "presentation",
+              fill: "currentColor",
+              children: /* @__PURE__ */ jsx30("path", { d: "M2.25 20.3097H21.75L12 3.46875L2.25 20.3097ZM12.8864 17.2606H11.1136V15.4879H12.8864V17.2606ZM12.8864 13.7151H11.1136V10.1697H12.8864V13.7151Z" })
+            }
+          ),
+          errorMessage
+        ]
+      }
+    ),
+    !hasErrorMessage && /* @__PURE__ */ jsx30(Text, { slot: "description", children: description })
+  ] });
 };
 
 // src/FieldBase/_FieldBase.tsx
@@ -1373,6 +1376,7 @@ var _FieldBase = (props, ref) => {
     {
       ref,
       className: cn17("group/field", twWidth2[width], classNames2, className),
+      "data-required": props.isRequired ? true : void 0,
       ...rest,
       children: [
         label ? /* @__PURE__ */ jsx31(_Label, { variant, size, children: label }) : /* @__PURE__ */ jsx31("span", { "aria-hidden": "true" }),
@@ -2175,7 +2179,7 @@ var YearDropdown = ({ state, setSelectedDropdown }) => {
 var YearDropdown_default = YearDropdown;
 
 // src/Calendar/Calendar.tsx
-import { Fragment as Fragment6, jsx as jsx50, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx50, jsxs as jsxs21 } from "react/jsx-runtime";
 var buttonStyles = "flex items-center justify-between gap-1 overflow-hidden";
 var Calendar = ({
   disabled,
@@ -2255,7 +2259,7 @@ var Calendar = ({
           setSelectedDropdown,
           state
         }
-      ) : /* @__PURE__ */ jsxs21(Fragment6, { children: [
+      ) : /* @__PURE__ */ jsxs21(Fragment5, { children: [
         /* @__PURE__ */ jsxs21("div", { className: "mb-4 flex items-center justify-between", children: [
           /* @__PURE__ */ jsxs21("div", { className: "flex w-full gap-4", children: [
             /* @__PURE__ */ jsxs21(
@@ -2311,7 +2315,7 @@ import { useDatePicker } from "@react-aria/datepicker";
 import { mergeProps as mergeProps9 } from "@react-aria/utils";
 import { useDatePickerState } from "@react-stately/datepicker";
 import { useClassNames as useClassNames26, useStateProps as useStateProps8 } from "@marigold/system";
-import { Fragment as Fragment7, jsx as jsx51, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx51, jsxs as jsxs22 } from "react/jsx-runtime";
 var DatePicker = ({
   disabled,
   required,
@@ -2350,7 +2354,7 @@ var DatePicker = ({
     size,
     variant
   });
-  return /* @__PURE__ */ jsxs22(Fragment7, { children: [
+  return /* @__PURE__ */ jsxs22(Fragment6, { children: [
     /* @__PURE__ */ jsx51("div", { className: "flex w-full min-w-[300px]", ...groupProps, children: /* @__PURE__ */ jsx51(
       DateField,
       {
@@ -2517,14 +2521,14 @@ var MenuItem = ({
 // src/Menu/MenuSection.tsx
 import { useMenuSection } from "@react-aria/menu";
 import { useClassNames as useClassNames29 } from "@marigold/system";
-import { Fragment as Fragment8, jsx as jsx57, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx57, jsxs as jsxs23 } from "react/jsx-runtime";
 var MenuSection = ({ onAction, item, state }) => {
   let { itemProps, headingProps, groupProps } = useMenuSection({
     heading: item.rendered,
     "aria-label": item["aria-label"]
   });
   const className = useClassNames29({ component: "Menu" });
-  return /* @__PURE__ */ jsxs23(Fragment8, { children: [
+  return /* @__PURE__ */ jsxs23(Fragment7, { children: [
     item.key !== state.collection.getFirstKey() && /* @__PURE__ */ jsx57("li", { children: /* @__PURE__ */ jsx57(_Divider, { variant: "section" }) }),
     /* @__PURE__ */ jsxs23("li", { ...itemProps, children: [
       item.rendered && /* @__PURE__ */ jsx57("span", { ...headingProps, className: className.section, children: item.rendered }),
@@ -2992,7 +2996,7 @@ var _RadioGroup = ({
 };
 
 // src/Radio/Radio.tsx
-import { Fragment as Fragment9, jsx as jsx66, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx66, jsxs as jsxs28 } from "react/jsx-runtime";
 var Dot = () => /* @__PURE__ */ jsx66("svg", { viewBox: "0 0 6 6", children: /* @__PURE__ */ jsx66("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }) });
 var Icon2 = ({ checked, className, ...props }) => /* @__PURE__ */ jsx66(
   "div",
@@ -3027,7 +3031,7 @@ var _Radio = forwardRef13(
         value,
         isDisabled: disabled,
         ...props,
-        children: ({ isSelected }) => /* @__PURE__ */ jsxs28(Fragment9, { children: [
+        children: ({ isSelected }) => /* @__PURE__ */ jsxs28(Fragment8, { children: [
           /* @__PURE__ */ jsx66(
             Icon2,
             {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/components",
-  "version": "6.7.0",
+  "version": "6.8.0",
   "description": "Components for the Marigold Design System",
   "license": "MIT",
   "keywords": [
@@ -85,8 +85,8 @@
     "@react-types/table": "3.9.1",
     "@react-types/tooltip": "3.4.6",
     "react-aria-components": "1.0.0-rc.0",
-    "@marigold/icons": "1.2.26",
-    "@marigold/system": "6.7.0",
+    "@marigold/icons": "1.2.27",
+    "@marigold/system": "6.8.0",
     "@marigold/types": "1.1.0"
   },
   "peerDependencies": {