@salt-ds/lab 1.0.0-alpha.6 → 1.0.0-alpha.7

package/dist-cjs/packages/lab/src/status-adornment/StatusAdornment.js

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var React = require('react');
+var core = require('@salt-ds/core');
+var ErrorAdornment = require('./ErrorAdornment.js');
+var SuccessAdornment = require('./SuccessAdornment.js');
+var WarningAdornment = require('./WarningAdornment.js');
+require('./StatusAdornment.css.js');
+
+const icons = {
+  error: ErrorAdornment.ErrorAdornmentIcon,
+  warning: WarningAdornment.WarningAdornmentIcon,
+  success: SuccessAdornment.SuccessAdornmentIcon
+};
+const statusToAriaLabelMap = {
+  error: "error",
+  warning: "warning",
+  success: "success"
+};
+const withBaseName = core.makePrefixer("saltStatusAdornment");
+const StatusAdornment = React.forwardRef(
+  function StatusAdornment2({ className, status, ...restProps }, ref) {
+    const AdornmentComponent = icons[status];
+    const ariaLabel = statusToAriaLabelMap[status];
+    return /* @__PURE__ */ jsxRuntime.jsx(AdornmentComponent, {
+      className: clsx.clsx(withBaseName(), withBaseName(status), className),
+      "aria-label": ariaLabel,
+      ...restProps,
+      ref
+    });
+  }
+);
+
+exports.StatusAdornment = StatusAdornment;
+//# sourceMappingURL=StatusAdornment.js.map

package/dist-cjs/packages/lab/src/status-adornment/StatusAdornment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusAdornment.js","sources":["../src/status-adornment/StatusAdornment.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { makePrefixer, ValidationStatus } from \"@salt-ds/core\";\nimport { IconProps } from \"@salt-ds/icons\";\nimport { ErrorAdornmentIcon } from \"./ErrorAdornment\";\nimport { SuccessAdornmentIcon } from \"./SuccessAdornment\";\nimport { WarningAdornmentIcon } from \"./WarningAdornment\";\n\nimport \"./StatusAdornment.css\";\n\nconst icons = {\n  error: ErrorAdornmentIcon,\n  warning: WarningAdornmentIcon,\n  success: SuccessAdornmentIcon,\n};\n\ntype AdornmentValidationStatus = Exclude<ValidationStatus, \"info\">;\n\nexport interface StatusAdornmentProps extends IconProps {\n  /**\n   * Status adornment to be displayed.\n   */\n  status: AdornmentValidationStatus;\n}\n\nconst statusToAriaLabelMap: Record<AdornmentValidationStatus, string> = {\n  error: \"error\",\n  warning: \"warning\",\n  success: \"success\",\n};\n\nconst withBaseName = makePrefixer(\"saltStatusAdornment\");\n\nexport const StatusAdornment = forwardRef<SVGSVGElement, StatusAdornmentProps>(\n  function StatusAdornment({ className, status, ...restProps }, ref) {\n    const AdornmentComponent = icons[status];\n    const ariaLabel = statusToAriaLabelMap[status];\n\n    return (\n      <AdornmentComponent\n        className={clsx(withBaseName(), withBaseName(status), className)}\n        aria-label={ariaLabel}\n        {...restProps}\n        ref={ref}\n      />\n    );\n  }\n);\n"],"names":["ErrorAdornmentIcon","WarningAdornmentIcon","SuccessAdornmentIcon","makePrefixer","forwardRef","StatusAdornment","jsx","clsx"],"mappings":";;;;;;;;;;;;;AAUA,MAAM,KAAQ,GAAA;AAAA,EACZ,KAAO,EAAAA,iCAAA;AAAA,EACP,OAAS,EAAAC,qCAAA;AAAA,EACT,OAAS,EAAAC,qCAAA;AACX,CAAA,CAAA;AAWA,MAAM,oBAAkE,GAAA;AAAA,EACtE,KAAO,EAAA,OAAA;AAAA,EACP,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA,SAAA;AACX,CAAA,CAAA;AAEA,MAAM,YAAA,GAAeC,kBAAa,qBAAqB,CAAA,CAAA;AAEhD,MAAM,eAAkB,GAAAC,gBAAA;AAAA,EAC7B,SAASC,gBAAgB,CAAA,EAAE,WAAW,MAAW,EAAA,GAAA,SAAA,IAAa,GAAK,EAAA;AACjE,IAAA,MAAM,qBAAqB,KAAM,CAAA,MAAA,CAAA,CAAA;AACjC,IAAA,MAAM,YAAY,oBAAqB,CAAA,MAAA,CAAA,CAAA;AAEvC,IAAA,uBACGC,cAAA,CAAA,kBAAA,EAAA;AAAA,MACC,WAAWC,SAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,MAC/D,YAAY,EAAA,SAAA;AAAA,MACX,GAAG,SAAA;AAAA,MACJ,GAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/packages/lab/src/status-adornment/SuccessAdornment.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+const SuccessAdornmentIcon = React.forwardRef(function SuccessAdornmentIcon2({ children, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", {
+    className,
+    ...rest,
+    role: "img",
+    viewBox: "0 0 10 8",
+    ref,
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", {
+      "fill-rule": "evenodd",
+      "clip-rule": "evenodd",
+      d: "M2.92089 5.95735L8.96399 0L10 1.02133L2.92088 8L0 5.1205L1.03602 4.09918L2.92089 5.95735Z"
+    })
+  });
+});
+
+exports.SuccessAdornmentIcon = SuccessAdornmentIcon;
+//# sourceMappingURL=SuccessAdornment.js.map

package/dist-cjs/packages/lab/src/status-adornment/SuccessAdornment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SuccessAdornment.js","sources":["../src/status-adornment/SuccessAdornment.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { IconProps } from \"@salt-ds/icons\";\n\nexport type SuccessAdornmentIconProps = IconProps;\n\nexport const SuccessAdornmentIcon = forwardRef<\n  SVGSVGElement,\n  SuccessAdornmentIconProps\n>(function SuccessAdornmentIcon(\n  { children, className, ...rest }: SuccessAdornmentIconProps,\n  ref\n) {\n  return (\n    <svg\n      className={className}\n      {...rest}\n      role=\"img\"\n      viewBox=\"0 0 10 8\"\n      ref={ref}\n    >\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M2.92089 5.95735L8.96399 0L10 1.02133L2.92088 8L0 5.1205L1.03602 4.09918L2.92089 5.95735Z\"\n      />\n    </svg>\n  );\n});\n"],"names":["forwardRef","SuccessAdornmentIcon","jsx"],"mappings":";;;;;;;AAKa,MAAA,oBAAA,GAAuBA,iBAGlC,SAASC,qBAAAA,CACT,EAAE,QAAU,EAAA,SAAA,EAAA,GAAc,IAAK,EAAA,EAC/B,GACA,EAAA;AACA,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAA;AAAA,IACC,GAAG,IAAA;AAAA,IACJ,IAAK,EAAA,KAAA;AAAA,IACL,OAAQ,EAAA,UAAA;AAAA,IACR,GAAA;AAAA,IAEA,QAAC,kBAAAA,cAAA,CAAA,MAAA,EAAA;AAAA,MACC,WAAU,EAAA,SAAA;AAAA,MACV,WAAU,EAAA,SAAA;AAAA,MACV,CAAE,EAAA,2FAAA;AAAA,KACJ,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-cjs/packages/lab/src/status-adornment/WarningAdornment.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+const WarningAdornmentIcon = React.forwardRef(function WarningAdornmentIcon2({ children, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", {
+    className,
+    ...rest,
+    role: "img",
+    viewBox: "0 0 9 8",
+    ref,
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", {
+      d: "M0 8L4.5 0L9 8H0Z"
+    })
+  });
+});
+
+exports.WarningAdornmentIcon = WarningAdornmentIcon;
+//# sourceMappingURL=WarningAdornment.js.map

package/dist-cjs/packages/lab/src/status-adornment/WarningAdornment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WarningAdornment.js","sources":["../src/status-adornment/WarningAdornment.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { IconProps } from \"@salt-ds/icons\";\n\nexport type WarningAdornmentIconProps = IconProps;\n\nexport const WarningAdornmentIcon = forwardRef<\n  SVGSVGElement,\n  WarningAdornmentIconProps\n>(function WarningAdornmentIcon(\n  { children, className, ...rest }: WarningAdornmentIconProps,\n  ref\n) {\n  return (\n    <svg className={className} {...rest} role=\"img\" viewBox=\"0 0 9 8\" ref={ref}>\n      <path d=\"M0 8L4.5 0L9 8H0Z\" />\n    </svg>\n  );\n});\n"],"names":["forwardRef","WarningAdornmentIcon","jsx"],"mappings":";;;;;;;AAKa,MAAA,oBAAA,GAAuBA,iBAGlC,SAASC,qBAAAA,CACT,EAAE,QAAU,EAAA,SAAA,EAAA,GAAc,IAAK,EAAA,EAC/B,GACA,EAAA;AACA,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAA;AAAA,IAAuB,GAAG,IAAA;AAAA,IAAM,IAAK,EAAA,KAAA;AAAA,IAAM,OAAQ,EAAA,SAAA;AAAA,IAAU,GAAA;AAAA,IAChE,QAAC,kBAAAA,cAAA,CAAA,MAAA,EAAA;AAAA,MAAK,CAAE,EAAA,mBAAA;AAAA,KAAoB,CAAA;AAAA,GAC9B,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/packages/lab/src/form-field-context/FormFieldContextNext.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldContextNext.js","sources":["../src/form-field-context/FormFieldContextNext.ts"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport { useA11yValueValue } from \"../form-field-next\";\n\nexport interface FormFieldContextNextValue {\n  a11yProps: useA11yValueValue;\n}\n\nexport const FormFieldContextNext = createContext(\n  \"FormFieldContext\",\n  {} as FormFieldContextNextValue\n);\n"],"names":[],"mappings":";;AAOO,MAAM,oBAAuB,GAAA,aAAA;AAAA,EAClC,kBAAA;AAAA,EACA,EAAC;AACH;;;;"}
+{"version":3,"file":"FormFieldContextNext.js","sources":["../src/form-field-context/FormFieldContextNext.ts"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport { a11yValueAriaProps } from \"../form-field-next\";\n\nexport interface FormFieldContextNextValue {\n  a11yProps: a11yValueAriaProps;\n  disabled: boolean;\n  readOnly: boolean;\n  validationStatus: \"error\" | \"warning\" | \"success\" | undefined;\n}\n\nexport const FormFieldContextNext = createContext(\n  \"FormFieldContext\",\n  {} as FormFieldContextNextValue\n);\n"],"names":[],"mappings":";;AAUO,MAAM,oBAAuB,GAAA,aAAA;AAAA,EAClC,kBAAA;AAAA,EACA,EAAC;AACH;;;;"}

package/dist-es/packages/lab/src/form-field-next/FormFieldControlWrapper.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".saltFormFieldControlWrapper {\n  align-items: center;\n  display: grid;\n  grid-auto-columns: minmax(min-content, 1fr);\n  grid-auto-flow: column;\n  grid-column-gap: var(--salt-size-unit);\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=FormFieldControlWrapper.css.js.map

package/dist-es/packages/lab/src/form-field-next/FormFieldControlWrapper.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldControlWrapper.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist-es/packages/lab/src/form-field-next/FormFieldControlWrapper.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer } from '@salt-ds/core';
+import './FormFieldControlWrapper.css.js';
+
+const withBaseName = makePrefixer("saltFormFieldControlWrapper");
+const FormFieldControlWrapper = ({ children }) => /* @__PURE__ */ jsx("div", {
+  className: withBaseName(),
+  children
+});
+
+export { FormFieldControlWrapper };
+//# sourceMappingURL=FormFieldControlWrapper.js.map

package/dist-es/packages/lab/src/form-field-next/FormFieldControlWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldControlWrapper.js","sources":["../src/form-field-next/FormFieldControlWrapper.tsx"],"sourcesContent":["import { PropsWithChildren } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport \"./FormFieldControlWrapper.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldControlWrapper\");\n\nexport const FormFieldControlWrapper = ({ children }: PropsWithChildren) => (\n  <div className={withBaseName()}>{children}</div>\n);\n"],"names":[],"mappings":";;;;AAKA,MAAM,YAAA,GAAe,aAAa,6BAA6B,CAAA,CAAA;AAExD,MAAM,uBAA0B,GAAA,CAAC,EAAE,QAAA,uBACvC,GAAA,CAAA,KAAA,EAAA;AAAA,EAAI,WAAW,YAAa,EAAA;AAAA,EAAI,QAAA;AAAA,CAAS;;;;"}

package/dist-es/packages/lab/src/form-field-next/FormFieldHelperText.css.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".saltFormFieldHelperText.saltText {\n  font-style: var(--saltFormField-helperText-fontStyle, var(--salt-editable-help-fontStyle));\n  width: 100%;\n}\n";
+var css_248z = ".saltFormFieldHelperText {\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n}\n\n.saltFormFieldHelperText .saltText {\n  font-style: var(--saltFormField-helperText-fontStyle, var(--salt-editable-help-fontStyle));\n}\n\n.saltFormFieldHelperText-withValidation {\n  column-gap: var(--salt-size-adornmentGap);\n}\n";
 styleInject(css_248z);
 
 export { css_248z as default };

package/dist-es/packages/lab/src/form-field-next/FormFieldHelperText.js

@@ -1,22 +1,37 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { makePrefixer, Text } from '@salt-ds/core';
+import { makePrefixer, StatusIndicator, Text } from '@salt-ds/core';
+import '../form-field-context/FormFieldContext.js';
+import '../form-field-context/FormFieldContextNext.js';
+import 'react';
+import { useFormFieldPropsNext } from '../form-field-context/useFormFieldPropsNext.js';
 import './FormFieldHelperText.css.js';
 
 const withBaseName = makePrefixer("saltFormFieldHelperText");
 const FormFieldHelperText = ({
   className,
-  disabled,
-  helperText,
+  children,
   ...restProps
 }) => {
-  return /* @__PURE__ */ jsx(Text, {
-    className: clsx(withBaseName(), className),
-    disabled,
-    variant: "secondary",
-    styleAs: "label",
-    ...restProps,
-    children: helperText
+  const { disabled, readOnly, validationStatus } = useFormFieldPropsNext();
+  return /* @__PURE__ */ jsxs("div", {
+    className: clsx(
+      withBaseName(),
+      { [withBaseName("withValidation")]: validationStatus },
+      className
+    ),
+    children: [
+      !disabled && !readOnly && validationStatus && /* @__PURE__ */ jsx(StatusIndicator, {
+        status: validationStatus
+      }),
+      /* @__PURE__ */ jsx(Text, {
+        disabled,
+        variant: "secondary",
+        styleAs: "label",
+        ...restProps,
+        children
+      })
+    ]
   });
 };
 

package/dist-es/packages/lab/src/form-field-next/FormFieldHelperText.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldHelperText.js","sources":["../src/form-field-next/FormFieldHelperText.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { makePrefixer, Text, TextProps } from \"@salt-ds/core\";\nimport { FormFieldProps } from \"./FormFieldNext\";\n\nimport \"./FormFieldHelperText.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldHelperText\");\n\nexport interface FormFieldHelperTextProps\n  extends Omit<TextProps<\"label\">, \"variant\" | \"styleAs\"> {\n  helperText: FormFieldProps[\"helperText\"];\n  disabled?: boolean;\n}\n\nexport const FormFieldHelperText = ({\n  className,\n  disabled,\n  helperText,\n  ...restProps\n}: FormFieldHelperTextProps) => {\n  return (\n    <Text\n      className={clsx(withBaseName(), className)}\n      disabled={disabled}\n      variant=\"secondary\"\n      styleAs=\"label\"\n      {...restProps}\n    >\n      {helperText}\n    </Text>\n  );\n};\n"],"names":[],"mappings":";;;;;AAMA,MAAM,YAAA,GAAe,aAAa,yBAAyB,CAAA,CAAA;AAQpD,MAAM,sBAAsB,CAAC;AAAA,EAClC,SAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACG,GAAA,SAAA;AACL,CAAgC,KAAA;AAC9B,EAAA,uBACG,GAAA,CAAA,IAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IACzC,QAAA;AAAA,IACA,OAAQ,EAAA,WAAA;AAAA,IACR,OAAQ,EAAA,OAAA;AAAA,IACP,GAAG,SAAA;AAAA,IAEH,QAAA,EAAA,UAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"FormFieldHelperText.js","sources":["../src/form-field-next/FormFieldHelperText.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { makePrefixer, StatusIndicator, Text, TextProps } from \"@salt-ds/core\";\nimport { useFormFieldPropsNext } from \"../form-field-context\";\n\nimport \"./FormFieldHelperText.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldHelperText\");\n\nexport const FormFieldHelperText = ({\n  className,\n  children,\n  ...restProps\n}: Omit<TextProps<\"label\">, \"variant\" | \"styleAs\">) => {\n  const { disabled, readOnly, validationStatus } = useFormFieldPropsNext();\n\n  return (\n    <div\n      className={clsx(\n        withBaseName(),\n        { [withBaseName(\"withValidation\")]: validationStatus },\n        className\n      )}\n    >\n      {!disabled && !readOnly && validationStatus && (\n        <StatusIndicator status={validationStatus} />\n      )}\n      <Text\n        disabled={disabled}\n        variant=\"secondary\"\n        styleAs=\"label\"\n        {...restProps}\n      >\n        {children}\n      </Text>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAMA,MAAM,YAAA,GAAe,aAAa,yBAAyB,CAAA,CAAA;AAEpD,MAAM,sBAAsB,CAAC;AAAA,EAClC,SAAA;AAAA,EACA,QAAA;AAAA,EACG,GAAA,SAAA;AACL,CAAuD,KAAA;AACrD,EAAA,MAAM,EAAE,QAAA,EAAU,QAAU,EAAA,gBAAA,KAAqB,qBAAsB,EAAA,CAAA;AAEvE,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb,EAAE,CAAC,YAAa,CAAA,gBAAgB,IAAI,gBAAiB,EAAA;AAAA,MACrD,SAAA;AAAA,KACF;AAAA,IAEC,QAAA,EAAA;AAAA,MAAA,CAAC,QAAY,IAAA,CAAC,QAAY,IAAA,gBAAA,oBACxB,GAAA,CAAA,eAAA,EAAA;AAAA,QAAgB,MAAQ,EAAA,gBAAA;AAAA,OAAkB,CAAA;AAAA,sBAE5C,GAAA,CAAA,IAAA,EAAA;AAAA,QACC,QAAA;AAAA,QACA,OAAQ,EAAA,WAAA;AAAA,QACR,OAAQ,EAAA,OAAA;AAAA,QACP,GAAG,SAAA;AAAA,QAEH,QAAA;AAAA,OACH,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/packages/lab/src/form-field-next/FormFieldLabel.css.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".saltFormFieldLabel.saltText {\n  align-self: center;\n  font-weight: var(--saltFormField-label-fontWeight, var(--salt-text-fontWeight-strong));\n  width: 100%;\n}\n\n.saltFormFieldLabel:hover + .saltFormFieldNext-controls * {\n  --inputNext-borderColor: var(--salt-editable-borderColor-hover);\n}\n";
+var css_248z = ".saltFormFieldLabel.saltText {\n  align-self: center;\n  font-weight: var(--saltFormField-label-fontWeight, var(--salt-text-fontWeight-strong));\n  width: 100%;\n}\n\n.saltFormFieldLabel:hover + .saltFormFieldNext-controls * {\n  --inputNext-borderColor: var(--inputNext-borderColor-hover);\n}\n";
 styleInject(css_248z);
 
 export { css_248z as default };

package/dist-es/packages/lab/src/form-field-next/FormFieldLabel.js

@@ -1,22 +1,28 @@
 import { jsx } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
 import { makePrefixer, Label } from '@salt-ds/core';
+import '../form-field-context/FormFieldContext.js';
+import '../form-field-context/FormFieldContextNext.js';
+import 'react';
+import { useFormFieldPropsNext } from '../form-field-context/useFormFieldPropsNext.js';
 import './FormFieldLabel.css.js';
 
 const withBaseName = makePrefixer("saltFormFieldLabel");
 const FormFieldLabel = ({
   className,
-  disabled,
-  label,
+  children,
   ...restProps
-}) => /* @__PURE__ */ jsx(Label, {
-  as: "label",
-  className: clsx(withBaseName(), className),
-  disabled,
-  variant: "secondary",
-  ...restProps,
-  children: label
-});
+}) => {
+  const { disabled } = useFormFieldPropsNext();
+  return /* @__PURE__ */ jsx(Label, {
+    as: "label",
+    className: clsx(withBaseName(), className),
+    disabled,
+    variant: "secondary",
+    ...restProps,
+    children
+  });
+};
 
 export { FormFieldLabel };
 //# sourceMappingURL=FormFieldLabel.js.map

package/dist-es/packages/lab/src/form-field-next/FormFieldLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldLabel.js","sources":["../src/form-field-next/FormFieldLabel.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { Label, makePrefixer, TextProps } from \"@salt-ds/core\";\n\nimport \"./FormFieldLabel.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldLabel\");\nexport interface FormFieldLabelProps\n  extends Omit<TextProps<\"label\">, \"variant\" | \"styleAs\"> {\n  /**\n   * Whether the Form Field is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The label value for the FormFieldLabel\n   */\n  label?: string;\n}\n\nexport const FormFieldLabel = ({\n  className,\n  disabled,\n  label,\n  ...restProps\n}: FormFieldLabelProps) => (\n  <Label\n    as=\"label\"\n    className={clsx(withBaseName(), className)}\n    disabled={disabled}\n    variant=\"secondary\"\n    {...restProps}\n  >\n    {label}\n  </Label>\n);\n"],"names":[],"mappings":";;;;;AAKA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;AAa/C,MAAM,iBAAiB,CAAC;AAAA,EAC7B,SAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACG,GAAA,SAAA;AACL,CAAA,qBACG,GAAA,CAAA,KAAA,EAAA;AAAA,EACC,EAAG,EAAA,OAAA;AAAA,EACH,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,EACzC,QAAA;AAAA,EACA,OAAQ,EAAA,WAAA;AAAA,EACP,GAAG,SAAA;AAAA,EAEH,QAAA,EAAA,KAAA;AAAA,CACH;;;;"}
+{"version":3,"file":"FormFieldLabel.js","sources":["../src/form-field-next/FormFieldLabel.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { Label, makePrefixer, TextProps } from \"@salt-ds/core\";\nimport { useFormFieldPropsNext } from \"../form-field-context\";\n\nimport \"./FormFieldLabel.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldLabel\");\n\nexport const FormFieldLabel = ({\n  className,\n  children,\n  ...restProps\n}: Omit<TextProps<\"label\">, \"variant\" | \"styleAs\">) => {\n  const { disabled } = useFormFieldPropsNext();\n\n  return (\n    <Label\n      as=\"label\"\n      className={clsx(withBaseName(), className)}\n      disabled={disabled}\n      variant=\"secondary\"\n      {...restProps}\n    >\n      {children}\n    </Label>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAMA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;AAE/C,MAAM,iBAAiB,CAAC;AAAA,EAC7B,SAAA;AAAA,EACA,QAAA;AAAA,EACG,GAAA,SAAA;AACL,CAAuD,KAAA;AACrD,EAAM,MAAA,EAAE,QAAS,EAAA,GAAI,qBAAsB,EAAA,CAAA;AAE3C,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,EAAG,EAAA,OAAA;AAAA,IACH,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IACzC,QAAA;AAAA,IACA,OAAQ,EAAA,WAAA;AAAA,IACP,GAAG,SAAA;AAAA,IAEH,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/packages/lab/src/form-field-next/FormFieldNext.css.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".saltFormFieldNext {\n  display: inline-grid;\n  position: relative;\n  column-gap: var(--salt-size-adornmentGap);\n  row-gap: var(--salt-size-adornmentGap);\n  vertical-align: top;\n  width: var(--saltFormFieldNext-width, 100%);\n}\n\n.saltFormFieldNext-labelLeft {\n  align-self: center;\n  grid-template-columns: auto 1fr;\n}\n\n.saltFormFieldNext-labelTop {\n}\n\n.saltFormFieldNext-controls {\n  align-items: center;\n  display: grid;\n  grid-auto-columns: minmax(0, 1fr);\n  grid-auto-flow: column;\n  grid-column-gap: var(--salt-size-adornmentGap);\n}\n\n.saltFormFieldNext > * {\n  grid-row-start: 2;\n  grid-row-end: 3;\n}\n\n.saltFormFieldNext > .saltFormFieldLabel {\n  grid-row-start: 1;\n  grid-row-end: 2;\n}\n\n.saltFormFieldNext-labelLeft > * {\n  grid-row-start: 1;\n  grid-row-end: 2;\n}\n\n.saltFormFieldNext > .saltFormFieldHelperText {\n  grid-row-start: 3;\n  grid-row-end: 4;\n}\n\n.saltFormFieldNext.saltFormFieldNext-labelLeft > .saltFormFieldHelperText {\n  grid-row-start: 2;\n  grid-row-end: 3;\n}\n\n.saltFormFieldNext-labelLeft > .saltFormFieldLabel ~ * {\n  grid-column-start: 2;\n  grid-column-end: 2;\n}\n\n.saltFormFieldNext-disabled .saltInputNext-focused {\n  outline: none;\n}\n";
+var css_248z = ".saltFormFieldNext {\n  display: inline-grid;\n  position: relative;\n  column-gap: var(--salt-size-adornmentGap);\n  row-gap: var(--salt-size-adornmentGap);\n  vertical-align: top;\n  width: var(--saltFormFieldNext-width, 100%);\n}\n\n.saltFormFieldNext-labelLeft {\n  align-self: center;\n  grid-template-columns: 40% 1fr;\n}\n\n.saltFormFieldNext-labelTop {\n}\n\n.saltFormFieldNext-controls {\n  align-items: center;\n  display: grid;\n  grid-auto-columns: minmax(0, 1fr);\n  grid-auto-flow: column;\n  grid-column-gap: var(--salt-size-adornmentGap);\n}\n\n.saltFormFieldNext > * {\n  grid-row-start: 2;\n  grid-row-end: 3;\n}\n\n.saltFormFieldNext > .saltFormFieldLabel {\n  grid-row-start: 1;\n  grid-row-end: 2;\n}\n\n.saltFormFieldNext-labelLeft > * {\n  grid-row-start: 1;\n  grid-row-end: 2;\n}\n\n.saltFormFieldNext > .saltFormFieldHelperText {\n  grid-row-start: 3;\n  grid-row-end: 4;\n}\n\n.saltFormFieldNext.saltFormFieldNext-labelLeft > .saltFormFieldHelperText {\n  grid-row-start: 2;\n  grid-row-end: 3;\n}\n\n.saltFormFieldNext-labelLeft > .saltFormFieldLabel ~ * {\n  grid-column-start: 2;\n  grid-column-end: 2;\n}\n\n.saltFormFieldNext-disabled .saltInputNext-focused {\n  outline: none;\n}\n";
 styleInject(css_248z);
 
 export { css_248z as default };

package/dist-es/packages/lab/src/form-field-next/FormFieldNext.js

@@ -1,52 +1,34 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
 import { forwardRef, useMemo } from 'react';
 import { makePrefixer, useId, capitalize } from '@salt-ds/core';
 import '../form-field-context/FormFieldContext.js';
 import { FormFieldContextNext } from '../form-field-context/FormFieldContextNext.js';
-import { FormFieldLabel } from './FormFieldLabel.js';
-import { FormFieldHelperText } from './FormFieldHelperText.js';
 import './FormFieldNext.css.js';
 
-const useA11yValue = ({
-  disabled,
-  labelId,
-  helperTextId,
-  readOnly
-}) => {
-  return useMemo(
-    () => ({
-      "aria-labelledby": labelId,
-      "aria-describedby": helperTextId,
-      disabled,
-      readOnly
-    }),
-    [labelId, disabled, helperTextId, readOnly]
-  );
-};
 const withBaseName = makePrefixer("saltFormFieldNext");
 const FormField = forwardRef(
   ({
     children,
     className,
     disabled = false,
-    helperText,
-    label,
     labelPlacement = "top",
     onBlur,
     onFocus,
     readOnly = false,
     id: idProp,
+    validationStatus,
     ...restProps
   }, ref) => {
     const labelId = useId();
     const helperTextId = useId();
-    const a11yValue = useA11yValue({
-      labelId,
-      helperTextId,
-      disabled,
-      readOnly
-    });
+    const a11yProps = useMemo(
+      () => ({
+        "aria-labelledby": labelId,
+        "aria-describedby": helperTextId
+      }),
+      [labelId, helperTextId]
+    );
     return /* @__PURE__ */ jsx("div", {
       ref,
       className: clsx(
@@ -59,24 +41,9 @@ const FormField = forwardRef(
         className
       ),
       ...restProps,
-      children: /* @__PURE__ */ jsxs(FormFieldContextNext.Provider, {
-        value: { a11yProps: a11yValue },
-        children: [
-          label && /* @__PURE__ */ jsx(FormFieldLabel, {
-            id: labelId,
-            disabled,
-            label
-          }),
-          /* @__PURE__ */ jsx("div", {
-            className: withBaseName("controls"),
-            children
-          }),
-          helperText && /* @__PURE__ */ jsx(FormFieldHelperText, {
-            id: helperTextId,
-            disabled,
-            helperText
-          })
-        ]
+      children: /* @__PURE__ */ jsx(FormFieldContextNext.Provider, {
+        value: { a11yProps, disabled, readOnly, validationStatus },
+        children
       })
     });
   }

package/dist-es/packages/lab/src/form-field-next/FormFieldNext.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldNext.js","sources":["../src/form-field-next/FormFieldNext.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ForwardedRef, forwardRef, HTMLAttributes, useMemo } from \"react\";\nimport { makePrefixer, useId, capitalize } from \"@salt-ds/core\";\nimport { FormFieldContextNext } from \"../form-field-context\";\nimport { FormFieldLabel } from \"./FormFieldLabel\";\nimport { FormFieldHelperText } from \"./FormFieldHelperText\";\n\nimport \"./FormFieldNext.css\";\n\nexport type FormFieldLabelPlacement = \"top\" | \"left\";\n\nexport interface FormFieldProps\n  extends HTMLAttributes<HTMLDivElement>,\n    A11yValueProps {\n  /**\n   * Disabled prop\n   */\n  disabled?: boolean;\n  /**\n   * The helper text content\n   */\n  helperText?: string;\n  /**\n   * The label value for the FormField\n   */\n  label?: string;\n  /**\n   * Location the label, values: 'top' (default) or 'left'\n   */\n  labelPlacement?: FormFieldLabelPlacement;\n  /**\n   * Readonly prop\n   */\n  readOnly?: boolean;\n  /**\n   * Optional id prop\n   */\n  id?: string;\n}\n\nexport interface A11yValueProps {\n  /**\n   * If `true`, the FormField will be disabled.\n   */\n  disabled?: boolean;\n  /** Helper Text */\n  helperTextId?: string;\n  /** id of the label node */\n  labelId?: string;\n  /**\n   * If `true`, the FormField will be readonly.\n   */\n  readOnly?: boolean;\n}\nexport interface useA11yValueValue {\n  \"aria-labelledby\": A11yValueProps[\"labelId\"];\n  \"aria-describedby\": A11yValueProps[\"helperTextId\"] | undefined;\n  disabled: A11yValueProps[\"disabled\"];\n  readOnly: A11yValueProps[\"readOnly\"];\n}\n\nconst useA11yValue = ({\n  disabled,\n  labelId,\n  helperTextId,\n  readOnly,\n}: A11yValueProps) => {\n  return useMemo(\n    () => ({\n      \"aria-labelledby\": labelId,\n      \"aria-describedby\": helperTextId,\n      disabled,\n      readOnly,\n    }),\n    [labelId, disabled, helperTextId, readOnly]\n  );\n};\n\nconst withBaseName = makePrefixer(\"saltFormFieldNext\");\n\nexport const FormField = forwardRef(\n  (\n    {\n      children,\n      className,\n      disabled = false,\n      helperText,\n      label,\n      labelPlacement = \"top\",\n      onBlur,\n      onFocus,\n      readOnly = false,\n      id: idProp,\n      ...restProps\n    }: FormFieldProps,\n    ref: ForwardedRef<HTMLDivElement>\n  ) => {\n    const labelId = useId();\n    const helperTextId = useId();\n\n    const a11yValue = useA11yValue({\n      labelId,\n      helperTextId,\n      disabled,\n      readOnly,\n    });\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"readOnly\")]: readOnly,\n            [withBaseName(`label${capitalize(labelPlacement)}`)]:\n              labelPlacement,\n          },\n          className\n        )}\n        {...restProps}\n      >\n        <FormFieldContextNext.Provider value={{ a11yProps: a11yValue }}>\n          {label && (\n            <FormFieldLabel id={labelId} disabled={disabled} label={label} />\n          )}\n          <div className={withBaseName(\"controls\")}>{children}</div>\n          {helperText && (\n            <FormFieldHelperText\n              id={helperTextId}\n              disabled={disabled}\n              helperText={helperText}\n            />\n          )}\n        </FormFieldContextNext.Provider>\n      </div>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;AA6DA,MAAM,eAAe,CAAC;AAAA,EACpB,QAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AACF,CAAsB,KAAA;AACpB,EAAO,OAAA,OAAA;AAAA,IACL,OAAO;AAAA,MACL,iBAAmB,EAAA,OAAA;AAAA,MACnB,kBAAoB,EAAA,YAAA;AAAA,MACpB,QAAA;AAAA,MACA,QAAA;AAAA,KACF,CAAA;AAAA,IACA,CAAC,OAAA,EAAS,QAAU,EAAA,YAAA,EAAc,QAAQ,CAAA;AAAA,GAC5C,CAAA;AACF,CAAA,CAAA;AAEA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAE9C,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,UAAA;AAAA,IACA,KAAA;AAAA,IACA,cAAiB,GAAA,KAAA;AAAA,IACjB,MAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,EAAI,EAAA,MAAA;AAAA,IACD,GAAA,SAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,UAAU,KAAM,EAAA,CAAA;AACtB,IAAA,MAAM,eAAe,KAAM,EAAA,CAAA;AAE3B,IAAA,MAAM,YAAY,YAAa,CAAA;AAAA,MAC7B,OAAA;AAAA,MACA,YAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,KACD,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,UAC5B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,UAC5B,CAAC,YAAa,CAAA,CAAA,KAAA,EAAQ,UAAW,CAAA,cAAc,GAAG,CAChD,GAAA,cAAA;AAAA,SACJ;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MAEJ,QAAA,kBAAA,IAAA,CAAC,qBAAqB,QAArB,EAAA;AAAA,QAA8B,KAAA,EAAO,EAAE,SAAA,EAAW,SAAU,EAAA;AAAA,QAC1D,QAAA,EAAA;AAAA,UAAA,KAAA,oBACE,GAAA,CAAA,cAAA,EAAA;AAAA,YAAe,EAAI,EAAA,OAAA;AAAA,YAAS,QAAA;AAAA,YAAoB,KAAA;AAAA,WAAc,CAAA;AAAA,0BAEhE,GAAA,CAAA,KAAA,EAAA;AAAA,YAAI,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,YAAI,QAAA;AAAA,WAAS,CAAA;AAAA,UACnD,8BACE,GAAA,CAAA,mBAAA,EAAA;AAAA,YACC,EAAI,EAAA,YAAA;AAAA,YACJ,QAAA;AAAA,YACA,UAAA;AAAA,WACF,CAAA;AAAA,SAAA;AAAA,OAEJ,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"FormFieldNext.js","sources":["../src/form-field-next/FormFieldNext.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ForwardedRef, forwardRef, HTMLAttributes, useMemo } from \"react\";\nimport { makePrefixer, useId, capitalize } from \"@salt-ds/core\";\nimport { FormFieldContextNext } from \"../form-field-context\";\n\nimport \"./FormFieldNext.css\";\n\nexport type FormFieldLabelPlacement = \"top\" | \"left\";\n\nexport interface FormFieldProps\n  extends HTMLAttributes<HTMLDivElement>,\n    A11yValueProps {\n  /**\n   * Disabled prop\n   */\n  disabled?: boolean;\n  /**\n   * Location of the label, values: 'top' (default) or 'left'\n   */\n  labelPlacement?: FormFieldLabelPlacement;\n  /**\n   * Readonly prop\n   */\n  readOnly?: boolean;\n  /**\n   * Optional id prop\n   */\n  id?: string;\n  /**\n   * Validation status\n   */\n  validationStatus?: \"error\" | \"warning\" | \"success\";\n}\n\nexport interface A11yValueProps {\n  /**\n   * id for FormFieldHelperText\n   */\n  helperTextId?: string;\n  /**\n   * id for FormFieldLabel\n   */\n  labelId?: string;\n}\nexport interface a11yValueAriaProps {\n  \"aria-labelledby\": A11yValueProps[\"labelId\"];\n  \"aria-describedby\": A11yValueProps[\"helperTextId\"] | undefined;\n}\n\nconst withBaseName = makePrefixer(\"saltFormFieldNext\");\n\nexport const FormField = forwardRef(\n  (\n    {\n      children,\n      className,\n      disabled = false,\n      labelPlacement = \"top\",\n      onBlur,\n      onFocus,\n      readOnly = false,\n      id: idProp,\n      validationStatus,\n      ...restProps\n    }: FormFieldProps,\n    ref: ForwardedRef<HTMLDivElement>\n  ) => {\n    const labelId = useId();\n    const helperTextId = useId();\n\n    const a11yProps = useMemo(\n      () => ({\n        \"aria-labelledby\": labelId,\n        \"aria-describedby\": helperTextId,\n      }),\n      [labelId, helperTextId]\n    );\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"readOnly\")]: readOnly,\n            [withBaseName(`label${capitalize(labelPlacement)}`)]:\n              labelPlacement,\n          },\n          className\n        )}\n        {...restProps}\n      >\n        <FormFieldContextNext.Provider\n          value={{ a11yProps, disabled, readOnly, validationStatus }}\n        >\n          {children}\n        </FormFieldContextNext.Provider>\n      </div>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;AAiDA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAE9C,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,cAAiB,GAAA,KAAA;AAAA,IACjB,MAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,EAAI,EAAA,MAAA;AAAA,IACJ,gBAAA;AAAA,IACG,GAAA,SAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,UAAU,KAAM,EAAA,CAAA;AACtB,IAAA,MAAM,eAAe,KAAM,EAAA,CAAA;AAE3B,IAAA,MAAM,SAAY,GAAA,OAAA;AAAA,MAChB,OAAO;AAAA,QACL,iBAAmB,EAAA,OAAA;AAAA,QACnB,kBAAoB,EAAA,YAAA;AAAA,OACtB,CAAA;AAAA,MACA,CAAC,SAAS,YAAY,CAAA;AAAA,KACxB,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,UAC5B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,UAC5B,CAAC,YAAa,CAAA,CAAA,KAAA,EAAQ,UAAW,CAAA,cAAc,GAAG,CAChD,GAAA,cAAA;AAAA,SACJ;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA,CAAC,qBAAqB,QAArB,EAAA;AAAA,QACC,KAAO,EAAA,EAAE,SAAW,EAAA,QAAA,EAAU,UAAU,gBAAiB,EAAA;AAAA,QAExD,QAAA;AAAA,OACH,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/packages/lab/src/index.js

@@ -78,9 +78,10 @@ export { FileDropZone } from './file-drop-zone/FileDropZone.js';
 export { createFileTypeValidator, createTotalSizeValidator } from './file-drop-zone/validators.js';
 export { FormField, useFormField } from './form-field/FormField.js';
 export { FormLabel } from './form-field/FormLabel.js';
+export { FormFieldControlWrapper } from './form-field-next/FormFieldControlWrapper.js';
 export { FormField as FormFieldNext } from './form-field-next/FormFieldNext.js';
-import './form-field-next/FormFieldHelperText.js';
-import './form-field-next/FormFieldLabel.js';
+export { FormFieldHelperText } from './form-field-next/FormFieldHelperText.js';
+export { FormFieldLabel } from './form-field-next/FormFieldLabel.js';
 export { FormFieldContext } from './form-field-context/FormFieldContext.js';
 export { FormFieldContextNext } from './form-field-context/FormFieldContextNext.js';
 export { useFormFieldProps } from './form-field-context/useFormFieldProps.js';

package/dist-es/packages/lab/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist-es/packages/lab/src/input-next/InputNext.css.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = "/* Style applied to the root element */\n.saltInputNext {\n  --inputNext-borderColor: var(--salt-editable-borderColor);\n  --inputNext-borderStyle: var(--salt-editable-borderStyle);\n\n  align-items: center;\n  background: var(--saltInputNext-background, var(--inputNext-background));\n  border-color: var(--saltInputNext-borderColor, var(--inputNext-borderColor));\n  border-width: var(--saltInputNext-borderWidth, 0 0 var(--salt-size-border) 0);\n  border-style: var(--saltInputNext-borderStyle, var(--inputNext-borderStyle));\n  border-radius: var(--saltInputNext-borderRadius, 0);\n  color: var(--saltInputNext-color, var(--salt-text-primary-foreground));\n  display: inline-flex;\n  font-family: var(--saltInputNext-fontFamily, var(--salt-text-fontFamily));\n  font-size: var(--saltInputNext-fontSize, var(--salt-text-fontSize));\n  height: var(--saltInputNext-height, var(--salt-size-base));\n  line-height: var(--salt-text-lineHeight);\n  min-height: var(--saltInputNext-minHeight, var(--salt-size-base));\n  min-width: var(--saltInputNext-minWidth, 8em);\n  padding: var(--saltInputNext-padding, 0 var(--salt-size-unit));\n  position: var(--saltInputNext-position, relative);\n  width: 100%;\n}\n\n.saltInputNext:hover {\n  --inputNext-background: var(--inputNext-background-hover);\n  --inputNext-borderColor: var(--salt-editable-borderColor-hover);\n  --inputNext-borderStyle: var(--salt-editable-borderStyle-hover);\n}\n\n.saltInputNext:active {\n  --inputNext-background: var(--inputNext-background-active);\n  --inputNext-borderColor: var(--salt-editable-borderColor-active);\n  --inputNext-borderStyle: var(--salt-editable-borderStyle-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltInputNext-primary {\n  --inputNext-background: var(--salt-editable-primary-background);\n  --inputNext-background-active: var(--salt-editable-primary-background-active);\n  --inputNext-background-hover: var(--salt-editable-primary-background-hover);\n  --inputNext-background-disabled: var(--salt-editable-primary-background-disabled);\n  --inputNext-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltInputNext-secondary {\n  --inputNext-background: var(--salt-editable-secondary-background);\n  --inputNext-background-active: var(--salt-editable-secondary-background-active);\n  --inputNext-background-hover: var(--salt-editable-secondary-background-active);\n  --inputNext-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --inputNext-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to inner input component */\n.saltInputNext-input {\n  background: none;\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  cursor: var(--saltInputNext-cursor, default);\n  display: block;\n  flex: 1;\n  font: inherit;\n  height: 100%;\n  letter-spacing: var(--saltInputNext-letterSpacing, 0);\n  margin: 0;\n  min-width: 0;\n  overflow: hidden;\n  padding: 0;\n  text-align: var(--saltInputNext-textAlign, left);\n  width: 100%;\n}\n\n/* Style applied if `readOnly={true}` */\n.saltInputNext.saltInputNext-readOnly {\n  --inputNext-background: var(--inputNext-background-readonly);\n  --inputNext-background-hover: var(--inputNext-background-readonly);\n  --inputNext-borderColor: var(--salt-editable-borderColor-readonly);\n  --inputNext-borderStyle: var(--salt-editable-borderStyle-readonly);\n}\n\n/* Reset in the next class */\n.saltInputNext-input:focus {\n  outline: none;\n}\n\n/* Styling when focused */\n.saltInputNext-focused {\n  outline-style: var(--saltInputNext-focused-outlineStyle, var(--salt-focused-outlineStyle));\n  outline-width: var(--saltInputNext-focused-outlineWidth, var(--salt-focused-outlineWidth));\n  outline-color: var(--saltInputNext-focused-outlineColor, var(--salt-focused-outlineColor));\n  outline-offset: var(--saltInputNext-focused-outlineOffset, var(--salt-focused-outlineOffset));\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` */\n.saltInputNext-focused.saltInputNext-readOnly,\n.saltInputNext-disabled .saltInputNext-focused {\n  outline: none;\n}\n\n/* Style applied to selected input */\n.saltInputNext-input::selection {\n  background: var(--saltInputNext-highlight-color, var(--salt-text-background-selected));\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltInputNext-disabled .saltInputNext-input::selection {\n  background: none;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltInputNext-disabled .saltInputNext-input,\n.saltInputNext.saltInputNext-disabled,\n.saltInputNext.saltInputNext-disabled:hover,\n.saltInputNext.saltInputNext-disabled:active {\n  --inputNext-background: var(--inputNext-background-disabled);\n  --inputNext-borderColor: var(--salt-editable-borderColor-disabled);\n  --inputNext-borderStyle: var(--salt-editable-borderStyle-disabled);\n\n  cursor: var(--salt-editable-cursor-disabled);\n  color: var(--saltInputNext-text-color-disabled, var(--salt-text-primary-foreground-disabled));\n}\n";
+var css_248z = "/* Style applied to the root element */\n.saltInputNext {\n  --inputNext-borderColor: var(--salt-editable-borderColor);\n  --inputNext-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --inputNext-borderStyle: var(--salt-editable-borderStyle);\n\n  align-items: center;\n  background: var(--saltInputNext-background, var(--inputNext-background));\n  border-color: var(--saltInputNext-borderColor, var(--inputNext-borderColor));\n  border-width: var(--saltInputNext-borderWidth, 0 0 var(--salt-size-border) 0);\n  border-style: var(--saltInputNext-borderStyle, var(--inputNext-borderStyle));\n  border-radius: var(--saltInputNext-borderRadius, 0);\n  color: var(--saltInputNext-color, var(--salt-text-primary-foreground));\n  display: inline-flex;\n  font-family: var(--saltInputNext-fontFamily, var(--salt-text-fontFamily));\n  font-size: var(--saltInputNext-fontSize, var(--salt-text-fontSize));\n  height: var(--saltInputNext-height, var(--salt-size-base));\n  line-height: var(--salt-text-lineHeight);\n  min-height: var(--saltInputNext-minHeight, var(--salt-size-base));\n  min-width: var(--saltInputNext-minWidth, 8em);\n  padding: var(--saltInputNext-padding, 0 var(--salt-size-unit));\n  position: var(--saltInputNext-position, relative);\n  width: 100%;\n}\n\n.saltInputNext:hover {\n  --inputNext-background: var(--inputNext-background-hover);\n  --inputNext-borderColor: var(--inputNext-borderColor-hover);\n  --inputNext-borderStyle: var(--salt-editable-borderStyle-hover);\n  --inputNext-cursor: var(--salt-editable-cursor-hover);\n}\n\n.saltInputNext:active {\n  --inputNext-background: var(--inputNext-background-active);\n  --inputNext-borderColor: var(--salt-editable-borderColor-active);\n  --inputNext-borderStyle: var(--salt-editable-borderStyle-active);\n  --inputNext-cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltInputNext-primary {\n  --inputNext-background: var(--salt-editable-primary-background);\n  --inputNext-background-active: var(--salt-editable-primary-background-active);\n  --inputNext-background-hover: var(--salt-editable-primary-background-hover);\n  --inputNext-background-disabled: var(--salt-editable-primary-background-disabled);\n  --inputNext-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltInputNext-secondary {\n  --inputNext-background: var(--salt-editable-secondary-background);\n  --inputNext-background-active: var(--salt-editable-secondary-background-active);\n  --inputNext-background-hover: var(--salt-editable-secondary-background-active);\n  --inputNext-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --inputNext-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltInputNext-error,\n.saltInputNext-error:hover {\n  --inputNext-background: var(--salt-status-error-background);\n  --inputNext-outlineColor: var(--salt-status-error-borderColor);\n  --inputNext-borderColor: var(--salt-status-error-borderColor);\n  --inputNext-borderColor-hover: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltInputNext-warning,\n.saltInputNext-warning:hover {\n  --inputNext-background: var(--salt-status-warning-background);\n  --inputNext-outlineColor: var(--salt-status-warning-borderColor);\n  --inputNext-borderColor: var(--salt-status-warning-borderColor);\n  --inputNext-borderColor-hover: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltInputNext-success,\n.saltInputNext-success:hover {\n  --inputNext-background: var(--salt-status-success-background);\n  --inputNext-outlineColor: var(--salt-status-success-borderColor);\n  --inputNext-borderColor: var(--salt-status-success-borderColor);\n  --inputNext-borderColor-hover: var(--salt-status-success-borderColor);\n}\n\n/* Style applied to inner input component */\n.saltInputNext-input {\n  background: none;\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  cursor: var(--saltInputNext-cursor, var(--inputNext-cursor));\n  display: block;\n  flex: 1;\n  font: inherit;\n  height: 100%;\n  letter-spacing: var(--saltInputNext-letterSpacing, 0);\n  margin: 0;\n  min-width: 0;\n  overflow: hidden;\n  padding: 0;\n  text-align: var(--saltInputNext-textAlign, left);\n  width: 100%;\n}\n\n/* Reset in the next class */\n.saltInputNext-input:focus {\n  outline: none;\n}\n\n/* Style applied to selected input */\n.saltInputNext-input::selection {\n  background: var(--saltInputNext-highlight-color, var(--salt-text-background-selected));\n}\n\n/* Styling when focused */\n.saltInputNext-focused {\n  --inputNext-outlineColor: var(--salt-focused-outlineColor);\n\n  outline-style: var(--saltInputNext-focused-outlineStyle, var(--salt-focused-outlineStyle));\n  outline-width: var(--saltInputNext-focused-outlineWidth, var(--salt-focused-outlineWidth));\n  outline-color: var(--saltInputNext-focused-outlineColor, var(--inputNext-outlineColor));\n  outline-offset: var(--saltInputNext-focused-outlineOffset, var(--salt-focused-outlineOffset));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltInputNext.saltInputNext-readOnly {\n  --inputNext-background: var(--inputNext-background-readonly);\n  --inputNext-background-hover: var(--inputNext-background-readonly);\n  --inputNext-borderColor: var(--salt-editable-borderColor-readonly);\n  --inputNext-borderColor-hover: var(--salt-editable-borderColor-readonly);\n  --inputNext-borderStyle: var(--salt-editable-borderStyle-readonly);\n  --inputNext-cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` */\n.saltInputNext-focused.saltInputNext-readOnly,\n.saltInputNext-disabled .saltInputNext-focused {\n  outline: none;\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltInputNext-disabled .saltInputNext-input::selection {\n  background: none;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltInputNext-disabled .saltInputNext-input,\n.saltInputNext.saltInputNext-disabled,\n.saltInputNext.saltInputNext-disabled:hover,\n.saltInputNext.saltInputNext-disabled:active {\n  --inputNext-background: var(--inputNext-background-disabled);\n  --inputNext-borderColor: var(--salt-editable-borderColor-disabled);\n  --inputNext-borderColor-hover: var(--salt-editable-borderColor-disabled);\n  --inputNext-borderStyle: var(--salt-editable-borderStyle-disabled);\n\n  cursor: var(--salt-editable-cursor-disabled);\n  color: var(--saltInputNext-text-color-disabled, var(--salt-text-primary-foreground-disabled));\n}\n\n/* Style applied to input if adornment provided */\n.saltInputNext-withAdornment {\n  padding-right: var(--salt-size-adornmentGap);\n}\n\n/* Style applied to start adornments */\n.saltInputNext-startAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-right: var(--salt-size-adornmentGap);\n  column-gap: var(--salt-size-adornmentGap);\n}\n\n/* Style applied to end adornments */\n.saltInputNext-endAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-left: var(--salt-size-adornmentGap);\n  column-gap: var(--salt-size-adornmentGap);\n}\n";
 styleInject(css_248z);
 
 export { css_248z as default };

package/dist-es/packages/lab/src/input-next/InputNext.js

@@ -1,10 +1,11 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
 import { forwardRef, useState } from 'react';
 import { makePrefixer, useControlled } from '@salt-ds/core';
 import '../form-field-context/FormFieldContext.js';
 import '../form-field-context/FormFieldContextNext.js';
 import { useFormFieldPropsNext } from '../form-field-context/useFormFieldPropsNext.js';
+import { StatusAdornment } from '../status-adornment/StatusAdornment.js';
 import './InputNext.css.js';
 
 const withBaseName = makePrefixer("saltInputNext");
@@ -26,27 +27,28 @@ const Input = forwardRef(function Input2({
   "aria-owns": ariaOwns,
   className: classNameProp,
   disabled,
+  endAdornment,
   id,
   inputProps: inputPropsProp,
-  onChange,
   readOnly: readOnlyProp,
   role,
+  startAdornment,
   style,
-  type = "text",
   value: valueProp,
   defaultValue: defaultValueProp = valueProp === void 0 ? "" : void 0,
+  validationStatus: validationStatusProp,
   variant = "primary",
   ...other
 }, ref) {
   const {
-    a11yProps: {
-      disabled: a11yDisabled,
-      readOnly: a11yReadOnly,
-      ...restA11y
-    } = {}
+    disabled: formFieldDisabled,
+    readOnly: formFieldReadOnly,
+    validationStatus: formFieldValidationStatus,
+    a11yProps
   } = useFormFieldPropsNext();
-  const isDisabled = disabled || a11yDisabled;
-  const isReadOnly = readOnlyProp || a11yReadOnly;
+  const isDisabled = disabled || formFieldDisabled;
+  const isReadOnly = readOnlyProp || formFieldReadOnly;
+  const validationStatus = formFieldValidationStatus != null ? formFieldValidationStatus : validationStatusProp;
   const [focused, setFocused] = useState(false);
   const misplacedAriaProps = {
     "aria-activedescendant": ariaActiveDescendant,
@@ -55,20 +57,11 @@ const Input = forwardRef(function Input2({
     role
   };
   const inputProps = mergeA11yProps(
-    restA11y,
+    a11yProps,
     inputPropsProp,
     misplacedAriaProps
   );
-  const {
-    onBlur,
-    onFocus,
-    onKeyDown,
-    onKeyUp,
-    onMouseUp,
-    onMouseMove,
-    onMouseDown,
-    ...restInputProps
-  } = inputProps;
+  const { onBlur, onChange, onFocus, ...restInputProps } = inputProps;
   const [value, setValue] = useControlled({
     controlled: valueProp,
     default: defaultValueProp,
@@ -78,7 +71,7 @@ const Input = forwardRef(function Input2({
   const handleChange = (event) => {
     const value2 = event.target.value;
     setValue(value2);
-    onChange == null ? void 0 : onChange(event, value2);
+    onChange == null ? void 0 : onChange(event);
   };
   const handleBlur = (event) => {
     onBlur == null ? void 0 : onBlur(event);
@@ -88,33 +81,50 @@ const Input = forwardRef(function Input2({
     onFocus == null ? void 0 : onFocus(event);
     setFocused(true);
   };
-  return /* @__PURE__ */ jsx("div", {
+  return /* @__PURE__ */ jsxs("div", {
     className: clsx(
       withBaseName(),
       {
         [withBaseName("focused")]: !isDisabled && focused,
         [withBaseName("disabled")]: isDisabled,
         [withBaseName("readOnly")]: isReadOnly,
+        [withBaseName(validationStatus || "")]: validationStatus,
         [withBaseName(variant)]: variant
       },
       classNameProp
     ),
     style,
     ...other,
-    children: /* @__PURE__ */ jsx("input", {
-      type,
-      id,
-      className: clsx(withBaseName("input"), inputProps == null ? void 0 : inputProps.className),
-      disabled: isDisabled,
-      readOnly: isReadOnly,
-      ref,
-      value,
-      tabIndex: isReadOnly || isDisabled ? -1 : 0,
-      onBlur: handleBlur,
-      onChange: handleChange,
-      onFocus: !isDisabled ? handleFocus : void 0,
-      ...restInputProps
-    })
+    children: [
+      startAdornment && /* @__PURE__ */ jsx("div", {
+        className: withBaseName("startAdornmentContainer"),
+        children: startAdornment
+      }),
+      /* @__PURE__ */ jsx("input", {
+        id,
+        className: clsx(
+          withBaseName("input"),
+          { [withBaseName("withAdornment")]: validationStatus },
+          inputProps == null ? void 0 : inputProps.className
+        ),
+        disabled: isDisabled,
+        readOnly: isReadOnly,
+        ref,
+        value,
+        tabIndex: isReadOnly || isDisabled ? -1 : 0,
+        onBlur: handleBlur,
+        onChange: handleChange,
+        onFocus: !isDisabled ? handleFocus : void 0,
+        ...restInputProps
+      }),
+      !isDisabled && !isReadOnly && validationStatus && /* @__PURE__ */ jsx(StatusAdornment, {
+        status: validationStatus
+      }),
+      endAdornment && /* @__PURE__ */ jsx("div", {
+        className: withBaseName("endAdornmentContainer"),
+        children: endAdornment
+      })
+    ]
   });
 });