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

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

@@ -1 +1 @@
-{"version":3,"file":"InputNext.js","sources":["../src/input-next/InputNext.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  AriaAttributes,\n  ChangeEvent,\n  ElementType,\n  FocusEvent,\n  forwardRef,\n  HTMLAttributes,\n  InputHTMLAttributes,\n  useState,\n} from \"react\";\nimport { makePrefixer, useControlled } from \"@salt-ds/core\";\nimport { useFormFieldPropsNext } from \"../form-field-context\";\n\nimport \"./InputNext.css\";\n\nconst withBaseName = makePrefixer(\"saltInputNext\");\n\n// TODO: Double confirm whether this should be extending DivElement given root is `<div>`.\n// And forwarded ref is not assigned to the root like other components.\nexport interface InputProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\"> {\n  /**\n   * The value of the `input` element, required for an uncontrolled component.\n   */\n  defaultValue?: HTMLInputElement[\"defaultValue\"];\n  /**\n   * If `true`, the component is disabled.\n   */\n  disabled?: HTMLInputElement[\"disabled\"];\n  /**\n   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n   */\n  inputProps?: InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Callback for change event.\n   */\n  onChange?: (event: ChangeEvent<HTMLInputElement>, value: string) => void;\n  /**\n   * If `true`, the component is read only.\n   */\n  readOnly?: boolean;\n  type?: HTMLInputElement[\"type\"];\n  /**\n   * The value of the `input` element, required for a controlled component.\n   */\n  value?: HTMLInputElement[\"value\"];\n  /**\n   * Styling variant. Defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\";\n}\n\nfunction mergeA11yProps(\n  a11yProps: Partial<\n    ReturnType<typeof useFormFieldPropsNext>[\"a11yProps\"]\n  > = {},\n  inputProps: InputProps[\"inputProps\"] = {},\n  misplacedAriaProps: AriaAttributes\n) {\n  const ariaLabelledBy = clsx(\n    a11yProps[\"aria-labelledby\"],\n    inputProps[\"aria-labelledby\"]\n  );\n\n  return {\n    ...misplacedAriaProps,\n    ...a11yProps,\n    ...inputProps,\n    // TODO: look at this - The weird filtering is due to TokenizedInputBase\n    \"aria-label\": ariaLabelledBy\n      ? Array.from(new Set(ariaLabelledBy.split(\" \"))).join(\" \")\n      : undefined,\n  };\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n  {\n    \"aria-activedescendant\": ariaActiveDescendant,\n    \"aria-expanded\": ariaExpanded,\n    \"aria-owns\": ariaOwns,\n    className: classNameProp,\n    disabled,\n    id,\n    inputProps: inputPropsProp,\n    onChange,\n    readOnly: readOnlyProp,\n    role,\n    style,\n    type = \"text\",\n    value: valueProp,\n    // If we leave both value and defaultValue undefined, we will get a React warning on first edit\n    // (uncontrolled to controlled warning) from the React input\n    defaultValue: defaultValueProp = valueProp === undefined ? \"\" : undefined,\n    variant = \"primary\",\n    ...other\n  },\n  ref\n) {\n  const {\n    a11yProps: {\n      disabled: a11yDisabled,\n      readOnly: a11yReadOnly,\n      ...restA11y\n    } = {},\n  } = useFormFieldPropsNext();\n\n  const isDisabled = disabled || a11yDisabled;\n  const isReadOnly = readOnlyProp || a11yReadOnly;\n\n  const [focused, setFocused] = useState(false);\n\n  const misplacedAriaProps = {\n    \"aria-activedescendant\": ariaActiveDescendant,\n    \"aria-expanded\": ariaExpanded,\n    \"aria-owns\": ariaOwns,\n    role,\n  };\n  const inputProps = mergeA11yProps(\n    restA11y,\n    inputPropsProp,\n    misplacedAriaProps\n  );\n\n  const {\n    onBlur,\n    onFocus,\n    onKeyDown,\n    onKeyUp,\n    onMouseUp,\n    onMouseMove,\n    onMouseDown,\n    ...restInputProps\n  } = inputProps;\n\n  const [value, setValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValueProp,\n    name: \"Input\",\n    state: \"value\",\n  });\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const value = event.target.value;\n    setValue(value);\n    onChange?.(event, value);\n  };\n\n  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n    onBlur?.(event);\n    setFocused(false);\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n    onFocus?.(event);\n    setFocused(true);\n  };\n\n  return (\n    <div\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"focused\")]: !isDisabled && focused,\n          [withBaseName(\"disabled\")]: isDisabled,\n          [withBaseName(\"readOnly\")]: isReadOnly,\n          [withBaseName(variant)]: variant,\n        },\n        classNameProp\n      )}\n      style={style}\n      {...other}\n    >\n      <input\n        type={type}\n        id={id}\n        className={clsx(withBaseName(\"input\"), inputProps?.className)}\n        disabled={isDisabled}\n        readOnly={isReadOnly}\n        ref={ref}\n        value={value}\n        tabIndex={isReadOnly || isDisabled ? -1 : 0}\n        onBlur={handleBlur}\n        onChange={handleChange}\n        onFocus={!isDisabled ? handleFocus : undefined}\n        {...restInputProps}\n      />\n    </div>\n  );\n});\n"],"names":["Input","value"],"mappings":"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"}
+{"version":3,"file":"InputNext.js","sources":["../src/input-next/InputNext.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  AriaAttributes,\n  ChangeEvent,\n  FocusEvent,\n  forwardRef,\n  HTMLAttributes,\n  InputHTMLAttributes,\n  ReactNode,\n  useState,\n} from \"react\";\nimport { makePrefixer, useControlled } from \"@salt-ds/core\";\nimport { useFormFieldPropsNext } from \"../form-field-context\";\nimport { StatusAdornment } from \"../status-adornment\";\n\nimport \"./InputNext.css\";\n\nconst withBaseName = makePrefixer(\"saltInputNext\");\n\n// TODO: Double confirm whether this should be extending DivElement given root is `<div>`.\n// And forwarded ref is not assigned to the root like other components.\nexport interface InputProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"defaultValue\"> {\n  /**\n   * The value of the `input` element, required for an uncontrolled component.\n   */\n  defaultValue?: HTMLInputElement[\"defaultValue\"];\n  /**\n   * If `true`, the component is disabled.\n   */\n  disabled?: HTMLInputElement[\"disabled\"];\n  /**\n   * End adornment component\n   */\n  endAdornment?: ReactNode;\n  /**\n   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n   */\n  inputProps?: InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * If `true`, the component is read only.\n   */\n  readOnly?: boolean;\n  /**\n   * Start adornment component\n   */\n  startAdornment?: ReactNode;\n  /**\n   * Validation status.\n   */\n  validationStatus?: \"error\" | \"warning\" | \"success\";\n  /**\n   * The value of the `input` element, required for a controlled component.\n   */\n  value?: HTMLInputElement[\"value\"];\n  /**\n   * Styling variant. Defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\";\n}\n\nfunction mergeA11yProps(\n  a11yProps: Partial<\n    ReturnType<typeof useFormFieldPropsNext>[\"a11yProps\"]\n  > = {},\n  inputProps: InputProps[\"inputProps\"] = {},\n  misplacedAriaProps: AriaAttributes\n) {\n  const ariaLabelledBy = clsx(\n    a11yProps[\"aria-labelledby\"],\n    inputProps[\"aria-labelledby\"]\n  );\n\n  return {\n    ...misplacedAriaProps,\n    ...a11yProps,\n    ...inputProps,\n    // TODO: look at this - The weird filtering is due to TokenizedInputBase\n    \"aria-label\": ariaLabelledBy\n      ? Array.from(new Set(ariaLabelledBy.split(\" \"))).join(\" \")\n      : undefined,\n  };\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n  {\n    \"aria-activedescendant\": ariaActiveDescendant,\n    \"aria-expanded\": ariaExpanded,\n    \"aria-owns\": ariaOwns,\n    className: classNameProp,\n    disabled,\n    endAdornment,\n    id,\n    inputProps: inputPropsProp,\n    readOnly: readOnlyProp,\n    role,\n    startAdornment,\n    style,\n    value: valueProp,\n    // If we leave both value and defaultValue undefined, we will get a React warning on first edit\n    // (uncontrolled to controlled warning) from the React input\n    defaultValue: defaultValueProp = valueProp === undefined ? \"\" : undefined,\n    validationStatus: validationStatusProp,\n    variant = \"primary\",\n    ...other\n  },\n  ref\n) {\n  const {\n    disabled: formFieldDisabled,\n    readOnly: formFieldReadOnly,\n    validationStatus: formFieldValidationStatus,\n    a11yProps,\n  } = useFormFieldPropsNext();\n\n  const isDisabled = disabled || formFieldDisabled;\n  const isReadOnly = readOnlyProp || formFieldReadOnly;\n\n  const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n  const [focused, setFocused] = useState(false);\n\n  const misplacedAriaProps = {\n    \"aria-activedescendant\": ariaActiveDescendant,\n    \"aria-expanded\": ariaExpanded,\n    \"aria-owns\": ariaOwns,\n    role,\n  };\n  const inputProps = mergeA11yProps(\n    a11yProps,\n    inputPropsProp,\n    misplacedAriaProps\n  );\n\n  const { onBlur, onChange, onFocus, ...restInputProps } = inputProps;\n\n  const [value, setValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValueProp,\n    name: \"Input\",\n    state: \"value\",\n  });\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const value = event.target.value;\n    setValue(value);\n    onChange?.(event);\n  };\n\n  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n    onBlur?.(event);\n    setFocused(false);\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n    onFocus?.(event);\n    setFocused(true);\n  };\n\n  return (\n    <div\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"focused\")]: !isDisabled && focused,\n          [withBaseName(\"disabled\")]: isDisabled,\n          [withBaseName(\"readOnly\")]: isReadOnly,\n          [withBaseName(validationStatus || \"\")]: validationStatus,\n          [withBaseName(variant)]: variant,\n        },\n        classNameProp\n      )}\n      style={style}\n      {...other}\n    >\n      {startAdornment && (\n        <div className={withBaseName(\"startAdornmentContainer\")}>\n          {startAdornment}\n        </div>\n      )}\n      <input\n        id={id}\n        className={clsx(\n          withBaseName(\"input\"),\n          { [withBaseName(\"withAdornment\")]: validationStatus },\n          inputProps?.className\n        )}\n        disabled={isDisabled}\n        readOnly={isReadOnly}\n        ref={ref}\n        value={value}\n        tabIndex={isReadOnly || isDisabled ? -1 : 0}\n        onBlur={handleBlur}\n        onChange={handleChange}\n        onFocus={!isDisabled ? handleFocus : undefined}\n        {...restInputProps}\n      />\n      {!isDisabled && !isReadOnly && validationStatus && (\n        <StatusAdornment status={validationStatus} />\n      )}\n      {endAdornment && (\n        <div className={withBaseName(\"endAdornmentContainer\")}>\n          {endAdornment}\n        </div>\n      )}\n    </div>\n  );\n});\n"],"names":["Input","value"],"mappings":";;;;;;;;;;AAiBA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA,CAAA;AA4CjD,SAAS,eACP,SAEI,GAAA,IACJ,UAAuC,GAAA,IACvC,kBACA,EAAA;AACA,EAAA,MAAM,cAAiB,GAAA,IAAA;AAAA,IACrB,SAAU,CAAA,iBAAA,CAAA;AAAA,IACV,UAAW,CAAA,iBAAA,CAAA;AAAA,GACb,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,GAAG,kBAAA;AAAA,IACH,GAAG,SAAA;AAAA,IACH,GAAG,UAAA;AAAA,IAEH,YAAc,EAAA,cAAA,GACV,KAAM,CAAA,IAAA,CAAK,IAAI,GAAI,CAAA,cAAA,CAAe,KAAM,CAAA,GAAG,CAAC,CAAC,CAAE,CAAA,IAAA,CAAK,GAAG,CACvD,GAAA,KAAA,CAAA;AAAA,GACN,CAAA;AACF,CAAA;AAEa,MAAA,KAAA,GAAQ,UAAyC,CAAA,SAASA,MACrE,CAAA;AAAA,EACE,uBAAyB,EAAA,oBAAA;AAAA,EACzB,eAAiB,EAAA,YAAA;AAAA,EACjB,WAAa,EAAA,QAAA;AAAA,EACb,SAAW,EAAA,aAAA;AAAA,EACX,QAAA;AAAA,EACA,YAAA;AAAA,EACA,EAAA;AAAA,EACA,UAAY,EAAA,cAAA;AAAA,EACZ,QAAU,EAAA,YAAA;AAAA,EACV,IAAA;AAAA,EACA,cAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAO,EAAA,SAAA;AAAA,EAGP,YAAc,EAAA,gBAAA,GAAmB,SAAc,KAAA,KAAA,CAAA,GAAY,EAAK,GAAA,KAAA,CAAA;AAAA,EAChE,gBAAkB,EAAA,oBAAA;AAAA,EAClB,OAAU,GAAA,SAAA;AAAA,EACP,GAAA,KAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAM,MAAA;AAAA,IACJ,QAAU,EAAA,iBAAA;AAAA,IACV,QAAU,EAAA,iBAAA;AAAA,IACV,gBAAkB,EAAA,yBAAA;AAAA,IAClB,SAAA;AAAA,MACE,qBAAsB,EAAA,CAAA;AAE1B,EAAA,MAAM,aAAa,QAAY,IAAA,iBAAA,CAAA;AAC/B,EAAA,MAAM,aAAa,YAAgB,IAAA,iBAAA,CAAA;AAEnC,EAAA,MAAM,mBAAmB,yBAA6B,IAAA,IAAA,GAAA,yBAAA,GAAA,oBAAA,CAAA;AAEtD,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAE5C,EAAA,MAAM,kBAAqB,GAAA;AAAA,IACzB,uBAAyB,EAAA,oBAAA;AAAA,IACzB,eAAiB,EAAA,YAAA;AAAA,IACjB,WAAa,EAAA,QAAA;AAAA,IACb,IAAA;AAAA,GACF,CAAA;AACA,EAAA,MAAM,UAAa,GAAA,cAAA;AAAA,IACjB,SAAA;AAAA,IACA,cAAA;AAAA,IACA,kBAAA;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,EAAE,MAAA,EAAQ,QAAU,EAAA,OAAA,EAAA,GAAY,gBAAmB,GAAA,UAAA,CAAA;AAEzD,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,aAAc,CAAA;AAAA,IACtC,UAAY,EAAA,SAAA;AAAA,IACZ,OAAS,EAAA,gBAAA;AAAA,IACT,IAAM,EAAA,OAAA;AAAA,IACN,KAAO,EAAA,OAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAM,MAAA,YAAA,GAAe,CAAC,KAAyC,KAAA;AAC7D,IAAMC,MAAAA,MAAAA,GAAQ,MAAM,MAAO,CAAA,KAAA,CAAA;AAC3B,IAAA,QAAA,CAASA,MAAK,CAAA,CAAA;AACd,IAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACb,CAAA;AAEA,EAAM,MAAA,UAAA,GAAa,CAAC,KAAwC,KAAA;AAC1D,IAAS,MAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAA,KAAA,CAAA,CAAA;AACT,IAAA,UAAA,CAAW,KAAK,CAAA,CAAA;AAAA,GAClB,CAAA;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,KAAwC,KAAA;AAC3D,IAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AACV,IAAA,UAAA,CAAW,IAAI,CAAA,CAAA;AAAA,GACjB,CAAA;AAEA,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAA,CAAa,SAAS,CAAA,GAAI,CAAC,UAAc,IAAA,OAAA;AAAA,QAC1C,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,UAAA;AAAA,QAC5B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,UAAA;AAAA,QAC5B,CAAC,YAAA,CAAa,gBAAoB,IAAA,EAAE,CAAI,GAAA,gBAAA;AAAA,QACxC,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,OAAA;AAAA,OAC3B;AAAA,MACA,aAAA;AAAA,KACF;AAAA,IACA,KAAA;AAAA,IACC,GAAG,KAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAA,cAAA,oBACE,GAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,yBAAyB,CAAA;AAAA,QACnD,QAAA,EAAA,cAAA;AAAA,OACH,CAAA;AAAA,sBAED,GAAA,CAAA,OAAA,EAAA;AAAA,QACC,EAAA;AAAA,QACA,SAAW,EAAA,IAAA;AAAA,UACT,aAAa,OAAO,CAAA;AAAA,UACpB,EAAE,CAAC,YAAa,CAAA,eAAe,IAAI,gBAAiB,EAAA;AAAA,UACpD,UAAY,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,UAAA,CAAA,SAAA;AAAA,SACd;AAAA,QACA,QAAU,EAAA,UAAA;AAAA,QACV,QAAU,EAAA,UAAA;AAAA,QACV,GAAA;AAAA,QACA,KAAA;AAAA,QACA,QAAA,EAAU,UAAc,IAAA,UAAA,GAAa,CAAK,CAAA,GAAA,CAAA;AAAA,QAC1C,MAAQ,EAAA,UAAA;AAAA,QACR,QAAU,EAAA,YAAA;AAAA,QACV,OAAA,EAAS,CAAC,UAAA,GAAa,WAAc,GAAA,KAAA,CAAA;AAAA,QACpC,GAAG,cAAA;AAAA,OACN,CAAA;AAAA,MACC,CAAC,UAAA,IAAc,CAAC,UAAA,IAAc,oCAC5B,GAAA,CAAA,eAAA,EAAA;AAAA,QAAgB,MAAQ,EAAA,gBAAA;AAAA,OAAkB,CAAA;AAAA,MAE5C,gCACE,GAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,uBAAuB,CAAA;AAAA,QACjD,QAAA,EAAA,YAAA;AAAA,OACH,CAAA;AAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/packages/lab/src/status-adornment/ErrorAdornment.js

@@ -0,0 +1,20 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+const ErrorAdornmentIcon = forwardRef(function ErrorAdornmentIcon2({ children, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx("svg", {
+    className,
+    ...rest,
+    role: "img",
+    ref,
+    viewBox: "0 0 8 8",
+    children: /* @__PURE__ */ jsx("path", {
+      "fill-rule": "evenodd",
+      "clip-rule": "evenodd",
+      d: "M4 8C6.20914 8 8 6.20914 8 4C8 1.79086 6.20914 0 4 0C1.79086 0 0 1.79086 0 4C0 6.20914 1.79086 8 4 8Z"
+    })
+  });
+});
+
+export { ErrorAdornmentIcon };
+//# sourceMappingURL=ErrorAdornment.js.map

package/dist-es/packages/lab/src/status-adornment/ErrorAdornment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorAdornment.js","sources":["../src/status-adornment/ErrorAdornment.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { IconProps } from \"@salt-ds/icons\";\n\nexport type ErrorAdornmentIconProps = IconProps;\n\nexport const ErrorAdornmentIcon = forwardRef<\n  SVGSVGElement,\n  ErrorAdornmentIconProps\n>(function ErrorAdornmentIcon(\n  { children, className, ...rest }: ErrorAdornmentIconProps,\n  ref\n) {\n  return (\n    <svg className={className} {...rest} role=\"img\" ref={ref} viewBox=\"0 0 8 8\">\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M4 8C6.20914 8 8 6.20914 8 4C8 1.79086 6.20914 0 4 0C1.79086 0 0 1.79086 0 4C0 6.20914 1.79086 8 4 8Z\"\n      />\n    </svg>\n  );\n});\n"],"names":["ErrorAdornmentIcon"],"mappings":";;;AAKa,MAAA,kBAAA,GAAqB,WAGhC,SAASA,mBAAAA,CACT,EAAE,QAAU,EAAA,SAAA,EAAA,GAAc,IAAK,EAAA,EAC/B,GACA,EAAA;AACA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAA;AAAA,IAAuB,GAAG,IAAA;AAAA,IAAM,IAAK,EAAA,KAAA;AAAA,IAAM,GAAA;AAAA,IAAU,OAAQ,EAAA,SAAA;AAAA,IAChE,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,MACC,WAAU,EAAA,SAAA;AAAA,MACV,WAAU,EAAA,SAAA;AAAA,MACV,CAAE,EAAA,uGAAA;AAAA,KACJ,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

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

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".saltStatusAdornment {\n  fill: var(--saltStatusAdornment-color, var(--statusAdornment-color));\n  display: inline-block;\n  position: relative;\n  height: var(--salt-icon-size-status-adornment);\n  min-height: var(--salt-icon-size-status-adornment);\n}\n\n.saltStatusAdornment-error {\n  --statusAdornment-color: var(--salt-status-error-foreground);\n}\n\n.saltStatusAdornment-warning {\n  --statusAdornment-color: var(--salt-status-warning-foreground);\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=StatusAdornment.css.js.map

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

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

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

@@ -0,0 +1,35 @@
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { makePrefixer } from '@salt-ds/core';
+import { ErrorAdornmentIcon } from './ErrorAdornment.js';
+import { SuccessAdornmentIcon } from './SuccessAdornment.js';
+import { WarningAdornmentIcon } from './WarningAdornment.js';
+import './StatusAdornment.css.js';
+
+const icons = {
+  error: ErrorAdornmentIcon,
+  warning: WarningAdornmentIcon,
+  success: SuccessAdornmentIcon
+};
+const statusToAriaLabelMap = {
+  error: "error",
+  warning: "warning",
+  success: "success"
+};
+const withBaseName = makePrefixer("saltStatusAdornment");
+const StatusAdornment = forwardRef(
+  function StatusAdornment2({ className, status, ...restProps }, ref) {
+    const AdornmentComponent = icons[status];
+    const ariaLabel = statusToAriaLabelMap[status];
+    return /* @__PURE__ */ jsx(AdornmentComponent, {
+      className: clsx(withBaseName(), withBaseName(status), className),
+      "aria-label": ariaLabel,
+      ...restProps,
+      ref
+    });
+  }
+);
+
+export { StatusAdornment };
+//# sourceMappingURL=StatusAdornment.js.map

package/dist-es/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":["StatusAdornment"],"mappings":";;;;;;;;;AAUA,MAAM,KAAQ,GAAA;AAAA,EACZ,KAAO,EAAA,kBAAA;AAAA,EACP,OAAS,EAAA,oBAAA;AAAA,EACT,OAAS,EAAA,oBAAA;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,GAAe,aAAa,qBAAqB,CAAA,CAAA;AAEhD,MAAM,eAAkB,GAAA,UAAA;AAAA,EAC7B,SAASA,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,uBACG,GAAA,CAAA,kBAAA,EAAA;AAAA,MACC,WAAW,IAAK,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-es/packages/lab/src/status-adornment/SuccessAdornment.js

@@ -0,0 +1,20 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+const SuccessAdornmentIcon = forwardRef(function SuccessAdornmentIcon2({ children, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx("svg", {
+    className,
+    ...rest,
+    role: "img",
+    viewBox: "0 0 10 8",
+    ref,
+    children: /* @__PURE__ */ 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"
+    })
+  });
+});
+
+export { SuccessAdornmentIcon };
+//# sourceMappingURL=SuccessAdornment.js.map

package/dist-es/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":["SuccessAdornmentIcon"],"mappings":";;;AAKa,MAAA,oBAAA,GAAuB,WAGlC,SAASA,qBAAAA,CACT,EAAE,QAAU,EAAA,SAAA,EAAA,GAAc,IAAK,EAAA,EAC/B,GACA,EAAA;AACA,EAAA,uBACG,GAAA,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,kBAAA,GAAA,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-es/packages/lab/src/status-adornment/WarningAdornment.js

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+const WarningAdornmentIcon = forwardRef(function WarningAdornmentIcon2({ children, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx("svg", {
+    className,
+    ...rest,
+    role: "img",
+    viewBox: "0 0 9 8",
+    ref,
+    children: /* @__PURE__ */ jsx("path", {
+      d: "M0 8L4.5 0L9 8H0Z"
+    })
+  });
+});
+
+export { WarningAdornmentIcon };
+//# sourceMappingURL=WarningAdornment.js.map

package/dist-es/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":["WarningAdornmentIcon"],"mappings":";;;AAKa,MAAA,oBAAA,GAAuB,WAGlC,SAASA,qBAAAA,CACT,EAAE,QAAU,EAAA,SAAA,EAAA,GAAc,IAAK,EAAA,EAC/B,GACA,EAAA;AACA,EAAA,uBACG,GAAA,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,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,MAAK,CAAE,EAAA,mBAAA;AAAA,KAAoB,CAAA;AAAA,GAC9B,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-types/form-field-context/FormFieldContextNext.d.ts

@@ -1,6 +1,9 @@
 /// <reference types="react" />
-import { useA11yValueValue } from "../form-field-next";
+import { a11yValueAriaProps } from "../form-field-next";
 export interface FormFieldContextNextValue {
-    a11yProps: useA11yValueValue;
+    a11yProps: a11yValueAriaProps;
+    disabled: boolean;
+    readOnly: boolean;
+    validationStatus: "error" | "warning" | "success" | undefined;
 }
 export declare const FormFieldContextNext: import("react").Context<FormFieldContextNextValue>;

package/dist-types/form-field-next/FormFieldControlWrapper.d.ts

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from "react";
+import "./FormFieldControlWrapper.css";
+export declare const FormFieldControlWrapper: ({ children }: PropsWithChildren) => JSX.Element;

package/dist-types/form-field-next/FormFieldHelperText.d.ts

@@ -1,9 +1,4 @@
 /// <reference types="react" />
 import { TextProps } from "@salt-ds/core";
-import { FormFieldProps } from "./FormFieldNext";
 import "./FormFieldHelperText.css";
-export interface FormFieldHelperTextProps extends Omit<TextProps<"label">, "variant" | "styleAs"> {
-    helperText: FormFieldProps["helperText"];
-    disabled?: boolean;
-}
-export declare const FormFieldHelperText: ({ className, disabled, helperText, ...restProps }: FormFieldHelperTextProps) => JSX.Element;
+export declare const FormFieldHelperText: ({ className, children, ...restProps }: Omit<TextProps<"label">, "variant" | "styleAs">) => JSX.Element;

package/dist-types/form-field-next/FormFieldLabel.d.ts

@@ -1,14 +1,4 @@
 /// <reference types="react" />
 import { TextProps } from "@salt-ds/core";
 import "./FormFieldLabel.css";
-export interface FormFieldLabelProps extends Omit<TextProps<"label">, "variant" | "styleAs"> {
-    /**
-     * Whether the Form Field is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * The label value for the FormFieldLabel
-     */
-    label?: string;
-}
-export declare const FormFieldLabel: ({ className, disabled, label, ...restProps }: FormFieldLabelProps) => JSX.Element;
+export declare const FormFieldLabel: ({ className, children, ...restProps }: Omit<TextProps<"label">, "variant" | "styleAs">) => JSX.Element;

package/dist-types/form-field-next/FormFieldNext.d.ts

@@ -7,15 +7,7 @@ export interface FormFieldProps extends HTMLAttributes<HTMLDivElement>, A11yValu
      */
     disabled?: boolean;
     /**
-     * The helper text content
-     */
-    helperText?: string;
-    /**
-     * The label value for the FormField
-     */
-    label?: string;
-    /**
-     * Location the label, values: 'top' (default) or 'left'
+     * Location of the label, values: 'top' (default) or 'left'
      */
     labelPlacement?: FormFieldLabelPlacement;
     /**
@@ -26,25 +18,23 @@ export interface FormFieldProps extends HTMLAttributes<HTMLDivElement>, A11yValu
      * Optional id prop
      */
     id?: string;
+    /**
+     * Validation status
+     */
+    validationStatus?: "error" | "warning" | "success";
 }
 export interface A11yValueProps {
     /**
-     * If `true`, the FormField will be disabled.
+     * id for FormFieldHelperText
      */
-    disabled?: boolean;
-    /** Helper Text */
     helperTextId?: string;
-    /** id of the label node */
-    labelId?: string;
     /**
-     * If `true`, the FormField will be readonly.
+     * id for FormFieldLabel
      */
-    readOnly?: boolean;
+    labelId?: string;
 }
-export interface useA11yValueValue {
+export interface a11yValueAriaProps {
     "aria-labelledby": A11yValueProps["labelId"];
     "aria-describedby": A11yValueProps["helperTextId"] | undefined;
-    disabled: A11yValueProps["disabled"];
-    readOnly: A11yValueProps["readOnly"];
 }
 export declare const FormField: import("react").ForwardRefExoticComponent<FormFieldProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/form-field-next/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./FormFieldControlWrapper";
 export * from "./FormFieldNext";
 export * from "./FormFieldHelperText";
 export * from "./FormFieldLabel";

package/dist-types/index.d.ts

@@ -23,7 +23,7 @@ export * from "./dropdown";
 export * from "./editable-label";
 export * from "./file-drop-zone";
 export * from "./form-field";
-export { FormField as FormFieldNext } from "./form-field-next";
+export { FormField as FormFieldNext, FormFieldHelperText, FormFieldLabel, FormFieldControlWrapper, } from "./form-field-next";
 export * from "./form-field-context";
 export * from "./form-group";
 export * from "./formatted-input";

package/dist-types/input-next/InputNext.d.ts

@@ -1,6 +1,6 @@
-import { ChangeEvent, HTMLAttributes, InputHTMLAttributes } from "react";
+import { HTMLAttributes, InputHTMLAttributes, ReactNode } from "react";
 import "./InputNext.css";
-export interface InputProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+export interface InputProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultValue"> {
     /**
      * The value of the `input` element, required for an uncontrolled component.
      */
@@ -10,18 +10,25 @@ export interface InputProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChan
      */
     disabled?: HTMLInputElement["disabled"];
     /**
-     * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
+     * End adornment component
      */
-    inputProps?: InputHTMLAttributes<HTMLInputElement>;
+    endAdornment?: ReactNode;
     /**
-     * Callback for change event.
+     * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
      */
-    onChange?: (event: ChangeEvent<HTMLInputElement>, value: string) => void;
+    inputProps?: InputHTMLAttributes<HTMLInputElement>;
     /**
      * If `true`, the component is read only.
      */
     readOnly?: boolean;
-    type?: HTMLInputElement["type"];
+    /**
+     * Start adornment component
+     */
+    startAdornment?: ReactNode;
+    /**
+     * Validation status.
+     */
+    validationStatus?: "error" | "warning" | "success";
     /**
      * The value of the `input` element, required for a controlled component.
      */

package/dist-types/status-adornment/ErrorAdornment.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IconProps } from "@salt-ds/icons";
+export declare type ErrorAdornmentIconProps = IconProps;
+export declare const ErrorAdornmentIcon: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;

package/dist-types/status-adornment/StatusAdornment.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { ValidationStatus } from "@salt-ds/core";
+import { IconProps } from "@salt-ds/icons";
+import "./StatusAdornment.css";
+declare type AdornmentValidationStatus = Exclude<ValidationStatus, "info">;
+export interface StatusAdornmentProps extends IconProps {
+    /**
+     * Status adornment to be displayed.
+     */
+    status: AdornmentValidationStatus;
+}
+export declare const StatusAdornment: import("react").ForwardRefExoticComponent<StatusAdornmentProps & import("react").RefAttributes<SVGSVGElement>>;
+export {};

package/dist-types/status-adornment/SuccessAdornment.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IconProps } from "@salt-ds/icons";
+export declare type SuccessAdornmentIconProps = IconProps;
+export declare const SuccessAdornmentIcon: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;

package/dist-types/status-adornment/WarningAdornment.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IconProps } from "@salt-ds/icons";
+export declare type WarningAdornmentIconProps = IconProps;
+export declare const WarningAdornmentIcon: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;

package/dist-types/status-adornment/index.d.ts

@@ -0,0 +1 @@
+export * from "./StatusAdornment";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salt-ds/lab",
-  "version": "1.0.0-alpha.6",
+  "version": "1.0.0-alpha.7",
   "license": "Apache-2.0",
   "main": "dist-cjs/packages/lab/src/index.js",
   "sideEffects": [
@@ -23,7 +23,7 @@
   "module": "dist-es/packages/lab/src/index.js",
   "typings": "dist-types/index.d.ts",
   "dependencies": {
-    "@salt-ds/core": "1.6.0",
+    "@salt-ds/core": "1.7.0",
     "clsx": "^1.2.1",
     "react-window": "^1.8.6",
     "compute-scroll-into-view": "^3.0.0",