@salt-ds/lab 1.0.0-alpha.3 → 1.0.0-alpha.31

package/dist-cjs/form-field-legacy/FormHelperText.js

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var FormHelperText$1 = require('./FormHelperText.css.js');
+
+const FormHelperText = ({
+  helperText,
+  helperTextPlacement,
+  ...restProps
+}) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-form-helper-text",
+    css: FormHelperText$1,
+    window: targetWindow
+  });
+  if (helperText) {
+    if (helperTextPlacement === "bottom") {
+      return /* @__PURE__ */ jsxRuntime.jsx("p", {
+        className: "saltFormHelperText",
+        ...restProps,
+        children: helperText
+      });
+    } else if (helperTextPlacement === "tooltip") {
+      console.warn("helperTextPlacement tooltip has not yet implemented");
+      return null;
+    } else {
+      return null;
+    }
+  } else {
+    return null;
+  }
+};
+
+exports.FormHelperText = FormHelperText;
+//# sourceMappingURL=FormHelperText.js.map

package/dist-cjs/form-field-legacy/FormHelperText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormHelperText.js","sources":["../src/form-field-legacy/FormHelperText.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef } from \"react\";\nimport { FormFieldLegacyProps as FormFieldProps } from \"./FormFieldLegacy\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport formHelperTextCss from \"./FormHelperText.css\";\n\nexport type FormHelperTextProps<E extends React.ElementType = \"p\"> =\n  ComponentPropsWithoutRef<E> & {\n    helperText: FormFieldProps[\"helperText\"];\n    helperTextPlacement: FormFieldProps[\"helperTextPlacement\"];\n  };\n\nexport const FormHelperText = <E extends React.ElementType = \"p\">({\n  helperText,\n  helperTextPlacement,\n  ...restProps\n}: FormHelperTextProps<E>) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-form-helper-text\",\n    css: formHelperTextCss,\n    window: targetWindow,\n  });\n\n  if (helperText) {\n    if (helperTextPlacement === \"bottom\") {\n      return (\n        <p className=\"saltFormHelperText\" {...restProps}>\n          {helperText}\n        </p>\n      );\n    } else if (helperTextPlacement === \"tooltip\") {\n      console.warn(\"helperTextPlacement tooltip has not yet implemented\");\n      return null;\n    } else {\n      return null;\n    }\n  } else {\n    return null;\n  }\n};\n"],"names":["useWindow","useComponentCssInjection","formHelperTextCss","jsx"],"mappings":";;;;;;;;;AAcO,MAAM,iBAAiB,CAAoC;AAAA,EAChE,UAAA;AAAA,EACA,mBAAA;AAAA,EACG,GAAA,SAAA;AACL,CAA8B,KAAA;AAC5B,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAAC,gBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,IAAI,UAAY,EAAA;AACd,IAAA,IAAI,wBAAwB,QAAU,EAAA;AACpC,MAAA,uBACGC,cAAA,CAAA,GAAA,EAAA;AAAA,QAAE,SAAU,EAAA,oBAAA;AAAA,QAAsB,GAAG,SAAA;AAAA,QACnC,QAAA,EAAA,UAAA;AAAA,OACH,CAAA,CAAA;AAAA,KAEJ,MAAA,IAAW,wBAAwB,SAAW,EAAA;AAC5C,MAAA,OAAA,CAAQ,KAAK,qDAAqD,CAAA,CAAA;AAClE,MAAO,OAAA,IAAA,CAAA;AAAA,KACF,MAAA;AACL,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAAA,GACK,MAAA;AACL,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AACF;;;;"}

package/dist-cjs/form-field-legacy/FormLabel.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = "/* Styles applied to root element */\n.salt-density-touch {\n  --formFieldLegacy-label-default-top: 11px;\n  --formFieldLegacy-label-left-top: 16px;\n  --formFieldLegacy-label-minHeight: 16px;\n}\n.salt-density-low {\n  --formFieldLegacy-label-default-top: 7px;\n  --formFieldLegacy-label-left-top: 12px;\n}\n.salt-density-medium {\n  --formFieldLegacy-label-default-top: 5px;\n  --formFieldLegacy-label-left-top: 8px;\n}\n.salt-density-high {\n  --formFieldLegacy-label-default-top: 3px;\n  --formFieldLegacy-label-left-top: 4px;\n}\n\n.saltFormLabel {\n  --formFieldLegacy-label-fontSize: var(--saltFormFieldLegacy-label-fontSize, var(--salt-text-label-fontSize));\n  --formFieldLegacy-label-top: var(--formFieldLegacy-label-default-top);\n  --formFieldLegacy-label-width: 100%;\n}\n\n.saltFormFieldLegacy-labelLeft .saltFormLabel {\n  --formFieldLegacy-label-top: var(--formFieldLegacy-label-left-top);\n  --formFieldLegacy-label-width: auto;\n}\n\n.saltFormLabel {\n  align-items: center;\n  color: var(--saltFormFieldLegacy-label-text-color, var(--salt-content-secondary-foreground));\n  display: block;\n  font-size: var(--formFieldLegacy-label-fontSize);\n  margin-bottom: var(--saltFormFieldLegacy-label-marginBottom, var(--formFieldLegacy-label-marginBottom));\n  min-height: var(--saltFormFieldLegacy-label-minHeight, var(--formFieldLegacy-label-minHeight, var(--salt-text-label-minHeight)));\n  margin-top: var(--saltFormFieldLegacy-label-marginTop, 0px);\n  line-height: var(--saltFormFieldLegacy-label-lineHeight, var(--salt-text-label-lineHeight));\n  overflow: hidden;\n  padding-left: var(--saltFormFieldLegacy-label-paddingLeft, var(--formFieldLegacy-label-paddingLeft));\n  padding-right: var(--saltFormFieldLegacy-label-paddingRight, var(--formFieldLegacy-label-paddingRight));\n  padding-top: var(--saltFormFieldLegacy-label-paddingTop, 0);\n  padding-bottom: var(--saltFormFieldLegacy-label-paddingBottom, 0);\n  text-overflow: ellipsis;\n  top: var(--saltFormFieldLegacy-label-top, var(--formFieldLegacy-label-top));\n  transform: translate(var(--saltFormFieldLegacy-label-transform-x, 0), var(--saltFormFieldLegacy-label-transform-y, var(--formFieldLegacy-label-top)));\n  white-space: nowrap;\n  width: var(--saltFormFieldLegacy-label-width, var(--formFieldLegacy-label-width, 100%));\n}\n\n.saltFormLabel ~ * {\n  z-index: 1;\n}\n\n/* Styles applied when `disabled={true}` */\n.saltFormLabel-disabled {\n  color: var(--saltFormFieldLegacy-label-text-color-disabled, var(--salt-content-secondary-foreground-disabled));\n  cursor: var(--salt-editable-cursor-disabled);\n}\n\n/* Styles applied when displayedNecessity or necessityText provided */\n.saltFormLabel-necessityIndicator {\n  font-style: var(--saltFormFieldLegacy-label-necessityIndicator-fontStyle, var(--salt-editable-help-fontStyle));\n  margin-left: 1ch;\n}\n\n/* Styles applied if `hasStatusIndicator={true}` */\n.saltFormLabel-statusIndicator {\n  margin-left: 6px;\n  vertical-align: top;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=FormLabel.css.js.map

package/dist-cjs/form-field-legacy/FormLabel.css.js.map

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

package/dist-cjs/form-field-legacy/FormLabel.js

@@ -0,0 +1,61 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var core = require('@salt-ds/core');
+var NecessityIndicator = require('./NecessityIndicator.js');
+var StatusIndicator = require('./StatusIndicator.js');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var FormLabel$1 = require('./FormLabel.css.js');
+
+const withBaseName = core.makePrefixer("saltFormLabel");
+const FormLabel = ({
+  label,
+  NecessityIndicator: NecessityIndicator$1 = NecessityIndicator.NecessityIndicator,
+  required,
+  displayedNecessity,
+  hasStatusIndicator = false,
+  StatusIndicatorProps: StatusIndicatorProps2,
+  validationStatus,
+  necessityText,
+  className,
+  disabled,
+  readOnly,
+  tooltipText,
+  ...restProps
+}) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-form-label",
+    css: FormLabel$1,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", {
+    className: clsx.clsx(withBaseName(), className, {
+      [withBaseName("disabled")]: disabled
+    }),
+    ...restProps,
+    children: [
+      label,
+      /* @__PURE__ */ jsxRuntime.jsx(NecessityIndicator$1, {
+        required,
+        displayedNecessity,
+        necessityText,
+        className: withBaseName("necessityIndicator")
+      }),
+      hasStatusIndicator && /* @__PURE__ */ jsxRuntime.jsx(StatusIndicator.StatusIndicator, {
+        className: withBaseName("statusIndicator"),
+        status: validationStatus,
+        tooltipText,
+        hasTooltip: true,
+        ...StatusIndicatorProps2
+      })
+    ]
+  });
+};
+
+exports.FormLabel = FormLabel;
+//# sourceMappingURL=FormLabel.js.map

package/dist-cjs/form-field-legacy/FormLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormLabel.js","sources":["../src/form-field-legacy/FormLabel.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ElementType, HTMLAttributes } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { FormFieldValidationStatus } from \"./FormFieldLegacy\";\nimport {\n  NecessityIndicator as DefaultNecessityIndicator,\n  NecessityIndicatorOptions,\n} from \"./NecessityIndicator\";\nimport { StatusIndicator, StatusIndicatorProps } from \"./StatusIndicator\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport formLabelCss from \"./FormLabel.css\";\n\nconst withBaseName = makePrefixer(\"saltFormLabel\");\nexport interface FormLabelProps\n  extends HTMLAttributes<HTMLLabelElement>,\n    NecessityIndicatorOptions {\n  /**\n   * Whether the form field is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Adjusts whether the StatusIndicator component is shown\n   */\n  hasStatusIndicator?: boolean;\n  /**\n   * The label value for the FormLabel\n   */\n  label?: string;\n  /**\n   * An optional renderer function used to customize the necessity adornment\n   */\n  NecessityIndicator?: ElementType<NecessityIndicatorOptions>;\n  /**\n   * Whether the form field is readOnly.\n   */\n  readOnly?: boolean;\n  /**\n   * Props used to configure the StatusIndicator component if hasStatusIndicator is true\n   */\n  StatusIndicatorProps?: Partial<StatusIndicatorProps>;\n  /**\n   * The status for the FormField: Must be one of: 'error'|'warning'|undefined\n   */\n  validationStatus?: FormFieldValidationStatus;\n  /**\n   * Text to be shown in the Tooltip.\n   */\n  tooltipText?: string;\n}\n\nexport const FormLabel = ({\n  label,\n  NecessityIndicator = DefaultNecessityIndicator,\n  required,\n  displayedNecessity,\n  hasStatusIndicator = false,\n  StatusIndicatorProps,\n  validationStatus,\n  necessityText,\n  className,\n  disabled,\n  readOnly,\n  tooltipText,\n  ...restProps\n}: FormLabelProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-form-label\",\n    css: formLabelCss,\n    window: targetWindow,\n  });\n\n  return (\n    <label\n      className={clsx(withBaseName(), className, {\n        [withBaseName(\"disabled\")]: disabled,\n      })}\n      {...restProps}\n    >\n      {label}\n\n      <NecessityIndicator\n        required={required}\n        displayedNecessity={displayedNecessity}\n        necessityText={necessityText}\n        className={withBaseName(\"necessityIndicator\")}\n      />\n      {hasStatusIndicator && (\n        <StatusIndicator\n          className={withBaseName(\"statusIndicator\")}\n          status={validationStatus}\n          tooltipText={tooltipText}\n          hasTooltip\n          {...StatusIndicatorProps}\n        />\n      )}\n    </label>\n  );\n};\n"],"names":["makePrefixer","NecessityIndicator","DefaultNecessityIndicator","StatusIndicatorProps","useWindow","useComponentCssInjection","formLabelCss","jsxs","clsx","jsx","StatusIndicator"],"mappings":";;;;;;;;;;;;;AAeA,MAAM,YAAA,GAAeA,kBAAa,eAAe,CAAA,CAAA;AAsC1C,MAAM,YAAY,CAAC;AAAA,EACxB,KAAA;AAAA,sBACAC,oBAAqB,GAAAC,qCAAA;AAAA,EACrB,QAAA;AAAA,EACA,kBAAA;AAAA,EACA,kBAAqB,GAAA,KAAA;AAAA,EACrB,oBAAAC,EAAAA,qBAAAA;AAAA,EACA,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACG,GAAA,SAAA;AACL,CAAsB,KAAA;AACpB,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAAC,WAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACGC,eAAA,CAAA,OAAA,EAAA;AAAA,IACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAW,EAAA;AAAA,MACzC,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,KAC7B,CAAA;AAAA,IACA,GAAG,SAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAA,KAAA;AAAA,sBAEAC,cAAA,CAAAR,oBAAA,EAAA;AAAA,QACC,QAAA;AAAA,QACA,kBAAA;AAAA,QACA,aAAA;AAAA,QACA,SAAA,EAAW,aAAa,oBAAoB,CAAA;AAAA,OAC9C,CAAA;AAAA,MACC,sCACEQ,cAAA,CAAAC,+BAAA,EAAA;AAAA,QACC,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,QACzC,MAAQ,EAAA,gBAAA;AAAA,QACR,WAAA;AAAA,QACA,UAAU,EAAA,IAAA;AAAA,QACT,GAAGP,qBAAAA;AAAA,OACN,CAAA;AAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/form-field-legacy/NecessityIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NecessityIndicator.js","sources":["../src/form-field-legacy/NecessityIndicator.tsx"],"sourcesContent":["import { HTMLAttributes, ReactNode } from \"react\";\n\nexport type FormLabelNecessity = \"optional\" | \"required\";\n// export type FormLabelNecessityStyle = 'full' | 'abbreviated';\n\nexport interface NecessityIndicatorOptions {\n  /**\n   * The FormField is required\n   */\n  required?: boolean;\n  /**\n   * Whether to show a label adornment for required or optional\n   */\n  displayedNecessity?: FormLabelNecessity;\n  // This API is removed as this is not flexible enough.\n  // User could always use `necessityText` to display more customized text, e.g. in other language.\n  // necessityStyle?: FormLabelNecessityStyle;\n  /**\n   * Customize text displayed for necessity. Default to `(Required)` or `(Optional)`.\n   */\n  necessityText?: ReactNode;\n  className?: string;\n}\n\nexport const NecessityIndicator = ({\n  required,\n  children,\n  necessityText: necessityTextProp = children,\n  displayedNecessity,\n  className,\n  ...restProps\n}: NecessityIndicatorOptions & HTMLAttributes<HTMLSpanElement>) => {\n  let necessityText: ReactNode = \"\";\n\n  if (necessityTextProp) {\n    necessityText = necessityTextProp;\n  } else {\n    if (required && displayedNecessity === \"required\") {\n      necessityText = `(Required)`;\n    } else if (!required && displayedNecessity === \"optional\") {\n      necessityText = `(Optional)`;\n    }\n  }\n\n  if (necessityText) {\n    return (\n      <span\n        className={className}\n        data-testid=\"necessity-indicator\"\n        {...restProps}\n      >\n        {necessityText}\n      </span>\n    );\n  }\n  return null;\n};\n"],"names":["jsx"],"mappings":";;;;;;AAwBO,MAAM,qBAAqB,CAAC;AAAA,EACjC,QAAA;AAAA,EACA,QAAA;AAAA,EACA,eAAe,iBAAoB,GAAA,QAAA;AAAA,EACnC,kBAAA;AAAA,EACA,SAAA;AAAA,EACG,GAAA,SAAA;AACL,CAAmE,KAAA;AACjE,EAAA,IAAI,aAA2B,GAAA,EAAA,CAAA;AAE/B,EAAA,IAAI,iBAAmB,EAAA;AACrB,IAAgB,aAAA,GAAA,iBAAA,CAAA;AAAA,GACX,MAAA;AACL,IAAI,IAAA,QAAA,IAAY,uBAAuB,UAAY,EAAA;AACjD,MAAgB,aAAA,GAAA,CAAA,UAAA,CAAA,CAAA;AAAA,KACP,MAAA,IAAA,CAAC,QAAY,IAAA,kBAAA,KAAuB,UAAY,EAAA;AACzD,MAAgB,aAAA,GAAA,CAAA,UAAA,CAAA,CAAA;AAAA,KAClB;AAAA,GACF;AAEA,EAAA,IAAI,aAAe,EAAA;AACjB,IAAA,uBACGA,cAAA,CAAA,MAAA,EAAA;AAAA,MACC,SAAA;AAAA,MACA,aAAY,EAAA,qBAAA;AAAA,MACX,GAAG,SAAA;AAAA,MAEH,QAAA,EAAA,aAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACA,EAAO,OAAA,IAAA,CAAA;AACT;;;;"}

package/dist-cjs/form-field-legacy/StatusIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusIndicator.js","sources":["../src/form-field-legacy/StatusIndicator.tsx"],"sourcesContent":["import { IconProps } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { ElementType } from \"react\";\nimport {\n  makePrefixer,\n  StatusIndicator as BaseStatusIndicator,\n  Tooltip,\n  TooltipProps,\n} from \"@salt-ds/core\";\n\nconst withBaseName = makePrefixer(\"saltFormField\");\n\nexport type StatusIndicatorStatus = \"error\" | \"info\" | \"warning\" | \"success\";\n\nexport interface StatusIndicatorProps extends IconProps {\n  hasTooltip?: boolean;\n  IconProps?: Partial<IconProps>;\n  status?: StatusIndicatorStatus;\n  TooltipComponent?: ElementType<TooltipProps>;\n  TooltipProps?: Partial<TooltipProps>;\n  tooltipText?: string;\n}\n\nexport const StatusIndicator = (props: StatusIndicatorProps) => {\n  const {\n    TooltipComponent = Tooltip,\n    hasTooltip = false,\n    TooltipProps,\n    tooltipText,\n    IconProps,\n    className,\n    status = \"info\",\n    ...restProps\n  } = props;\n\n  return (\n    <TooltipComponent\n      hideIcon\n      status={status}\n      content={tooltipText}\n      placement=\"top\"\n      disabled={!hasTooltip}\n      {...TooltipProps}\n    >\n      <BaseStatusIndicator\n        status={status}\n        {...restProps}\n        {...IconProps}\n        className={clsx(\n          withBaseName(\"statusIndicator\"),\n          className,\n          IconProps?.className\n        )}\n      />\n    </TooltipComponent>\n  );\n};\n"],"names":["makePrefixer","Tooltip","TooltipProps","IconProps","jsx","BaseStatusIndicator","clsx"],"mappings":";;;;;;;;AAUA,MAAM,YAAA,GAAeA,kBAAa,eAAe,CAAA,CAAA;AAapC,MAAA,eAAA,GAAkB,CAAC,KAAgC,KAAA;AAC9D,EAAM,MAAA;AAAA,IACJ,gBAAmB,GAAAC,YAAA;AAAA,IACnB,UAAa,GAAA,KAAA;AAAA,IACb,YAAAC,EAAAA,aAAAA;AAAA,IACA,WAAA;AAAA,IACA,SAAAC,EAAAA,UAAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAS,GAAA,MAAA;AAAA,IACN,GAAA,SAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,uBACGC,cAAA,CAAA,gBAAA,EAAA;AAAA,IACC,QAAQ,EAAA,IAAA;AAAA,IACR,MAAA;AAAA,IACA,OAAS,EAAA,WAAA;AAAA,IACT,SAAU,EAAA,KAAA;AAAA,IACV,UAAU,CAAC,UAAA;AAAA,IACV,GAAGF,aAAAA;AAAA,IAEJ,QAAC,kBAAAE,cAAA,CAAAC,oBAAA,EAAA;AAAA,MACC,MAAA;AAAA,MACC,GAAG,SAAA;AAAA,MACH,GAAGF,UAAAA;AAAA,MACJ,SAAW,EAAAG,SAAA;AAAA,QACT,aAAa,iBAAiB,CAAA;AAAA,QAC9B,SAAA;AAAA,QACAH,UAAAA,IAAA,gBAAAA,UAAW,CAAA,SAAA;AAAA,OACb;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/form-field-legacy/constant.js

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const classBase = "saltFormFieldLegacy";
+
+exports.classBase = classBase;
+//# sourceMappingURL=constant.js.map

package/dist-cjs/form-field-legacy/constant.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constant.js","sources":["../src/form-field-legacy/constant.ts"],"sourcesContent":["export const classBase = \"saltFormFieldLegacy\";\n"],"names":[],"mappings":";;;;AAAO,MAAM,SAAY,GAAA;;;;"}

package/dist-cjs/form-group/FormGroup.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltFormGroup {\n  display: flex;\n  flex-direction: column;\n  flex-wrap: wrap;\n  justify-content: space-between;\n}\n\n.saltFormGroup-row {\n  flex-direction: row;\n  float: left;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=FormGroup.css.js.map

package/dist-cjs/form-group/FormGroup.css.js.map

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

package/dist-cjs/form-group/FormGroup.js

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var FormGroup$1 = require('./FormGroup.css.js');
+
+const baseName = "saltFormGroup";
+const FormGroup = React.forwardRef(
+  function FormGroup2({ className, row, ...other }, ref) {
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-form-group",
+      css: FormGroup$1,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", {
+      className: clsx.clsx(baseName, { [`${baseName}-row`]: row }, className),
+      ref,
+      ...other
+    });
+  }
+);
+
+exports.FormGroup = FormGroup;
+//# sourceMappingURL=FormGroup.js.map

package/dist-cjs/form-group/FormGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormGroup.js","sources":["../src/form-group/FormGroup.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport formGroupCss from \"./FormGroup.css\";\n\nexport interface FormGroupProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Display group of elements in a compact row.\n   */\n  row?: boolean;\n}\n\nconst baseName = \"saltFormGroup\";\n\nexport const FormGroup = forwardRef<HTMLDivElement, FormGroupProps>(\n  function FormGroup({ className, row, ...other }, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-form-group\",\n      css: formGroupCss,\n      window: targetWindow,\n    });\n    return (\n      <div\n        className={clsx(baseName, { [`${baseName}-row`]: row }, className)}\n        ref={ref}\n        {...other}\n      />\n    );\n  }\n);\n"],"names":["forwardRef","FormGroup","useWindow","useComponentCssInjection","formGroupCss","jsx","clsx"],"mappings":";;;;;;;;;;;AAeA,MAAM,QAAW,GAAA,eAAA,CAAA;AAEV,MAAM,SAAY,GAAAA,gBAAA;AAAA,EACvB,SAASC,UAAU,CAAA,EAAE,WAAW,GAAQ,EAAA,GAAA,KAAA,IAAS,GAAK,EAAA;AACpD,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,WAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AACD,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAA,EAAWC,UAAK,QAAU,EAAA,EAAE,CAAC,CAAG,EAAA,QAAA,CAAA,IAAA,CAAA,GAAiB,GAAI,EAAA,EAAG,SAAS,CAAA;AAAA,MACjE,GAAA;AAAA,MACC,GAAG,KAAA;AAAA,KACN,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/formatted-input/FormattedInput.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = "/* TODO check multiline styles */\n\n.saltFormattedInput {\n  --formattedInput-mask-color: var(--salt-content-secondary-foreground);\n}\n\n.saltFormattedInput-inputWrapper {\n  position: relative;\n  width: 100%;\n  display: inline-flex;\n}\n\n.saltFormattedInput-mask {\n  position: absolute;\n  color: var(--formattedInput-mask-color);\n  pointer-events: none;\n  display: flex;\n  align-items: center;\n  top: 0;\n  left: 0;\n}\n\n.saltFormattedInput-mask i {\n  color: transparent;\n  opacity: 0;\n  visibility: hidden;\n  font: inherit;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=FormattedInput.css.js.map

package/dist-cjs/formatted-input/FormattedInput.css.js.map

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

package/dist-cjs/formatted-input/FormattedInput.js

@@ -0,0 +1,73 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var React = require('react');
+var rifm = require('rifm');
+var core = require('@salt-ds/core');
+var InputLegacy = require('../input-legacy/InputLegacy.js');
+require('../input-legacy/StaticInputAdornment.js');
+var InputWithMask = require('./internal/InputWithMask.js');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var FormattedInput$1 = require('./FormattedInput.css.js');
+
+const defaultFormatter = (string) => string;
+const defaultRifmOptions = {};
+const FormattedInput = React.forwardRef(
+  function FormattedInput2({
+    defaultValue = "",
+    className,
+    inputProps,
+    mask,
+    onChange,
+    rifmOptions = defaultRifmOptions,
+    value: valueProp,
+    textAlign,
+    ...other
+  }, ref) {
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-formatted-input",
+      css: FormattedInput$1,
+      window: targetWindow
+    });
+    const [valueState, setValueState] = core.useControlled({
+      default: defaultValue,
+      controlled: valueProp,
+      name: "FormattedInput",
+      state: "value"
+    });
+    const handleChange = (value) => {
+      setValueState(value);
+      onChange == null ? void 0 : onChange(value);
+    };
+    let rifmMask = false;
+    if (rifmOptions.mask) {
+      rifmMask = typeof rifmOptions.mask === "function" ? rifmOptions.mask(valueState) : rifmOptions.mask;
+    }
+    const rifm$1 = rifm.useRifm({
+      format: defaultFormatter,
+      accept: /.*/,
+      ...rifmOptions,
+      mask: rifmMask,
+      value: valueState || "",
+      onChange: handleChange
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx(InputLegacy.InputLegacy, {
+      className: clsx.clsx(InputWithMask.baseName, className),
+      inputComponent: InputWithMask.InputWithMask,
+      inputProps: { mask, textAlign, ...inputProps },
+      onChange: rifm$1.onChange,
+      textAlign,
+      value: rifm$1.value,
+      ...other,
+      ref
+    });
+  }
+);
+
+exports.FormattedInput = FormattedInput;
+//# sourceMappingURL=FormattedInput.js.map

package/dist-cjs/formatted-input/FormattedInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormattedInput.js","sources":["../src/formatted-input/FormattedInput.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { useRifm } from \"rifm\";\nimport { useControlled } from \"@salt-ds/core\";\nimport {\n  InputLegacy as Input,\n  InputLegacyProps as InputProps,\n} from \"../input-legacy\";\nimport {\n  baseName,\n  InputWithMask,\n  InputWithMaskProps,\n} from \"./internal/InputWithMask\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport formattedInputCss from \"./FormattedInput.css\";\n\nexport type MaskFunction = (value: string | undefined) => boolean;\n\nexport interface RifmOptions {\n  format?: (str: string) => string;\n  replace?: (str: string) => string;\n  append?: (str: string) => string;\n  mask?: boolean | MaskFunction;\n  accept?: RegExp;\n}\n\nexport interface FormattedInputProps extends Omit<InputProps, \"onChange\"> {\n  mask?: string;\n  onChange?: (value: string) => void;\n  rifmOptions?: RifmOptions;\n  value?: string;\n  defaultValue?: string;\n}\n\nconst defaultFormatter = (string: string): string => string;\nconst defaultRifmOptions: RifmOptions = {};\n\nexport const FormattedInput = forwardRef<HTMLInputElement, FormattedInputProps>(\n  function FormattedInput(\n    {\n      defaultValue = \"\",\n      className,\n      inputProps,\n      mask,\n      onChange,\n      rifmOptions = defaultRifmOptions,\n      value: valueProp,\n      textAlign,\n      ...other\n    },\n    ref\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-formatted-input\",\n      css: formattedInputCss,\n      window: targetWindow,\n    });\n\n    const [valueState, setValueState] = useControlled<string | undefined>({\n      default: defaultValue,\n      controlled: valueProp,\n      name: \"FormattedInput\",\n      state: \"value\",\n    });\n\n    const handleChange = (value: string) => {\n      setValueState(value);\n      onChange?.(value);\n    };\n\n    let rifmMask = false;\n\n    if (rifmOptions.mask) {\n      rifmMask =\n        typeof rifmOptions.mask === \"function\"\n          ? rifmOptions.mask(valueState)\n          : rifmOptions.mask;\n    }\n\n    const rifm = useRifm({\n      format: defaultFormatter,\n      accept: /.*/,\n      ...rifmOptions,\n      mask: rifmMask,\n      value: valueState || \"\",\n      onChange: handleChange,\n    });\n\n    return (\n      <Input\n        className={clsx(baseName, className)}\n        inputComponent={InputWithMask}\n        inputProps={{ mask, textAlign, ...inputProps } as InputWithMaskProps}\n        onChange={rifm.onChange}\n        textAlign={textAlign}\n        value={rifm.value}\n        {...other}\n        ref={ref}\n      />\n    );\n  }\n);\n"],"names":["forwardRef","FormattedInput","useWindow","useComponentCssInjection","formattedInputCss","useControlled","rifm","useRifm","jsx","Input","clsx","baseName","InputWithMask"],"mappings":";;;;;;;;;;;;;;;;AAqCA,MAAM,gBAAA,GAAmB,CAAC,MAA2B,KAAA,MAAA,CAAA;AACrD,MAAM,qBAAkC,EAAC,CAAA;AAElC,MAAM,cAAiB,GAAAA,gBAAA;AAAA,EAC5B,SAASC,eACP,CAAA;AAAA,IACE,YAAe,GAAA,EAAA;AAAA,IACf,SAAA;AAAA,IACA,UAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAc,GAAA,kBAAA;AAAA,IACd,KAAO,EAAA,SAAA;AAAA,IACP,SAAA;AAAA,IACG,GAAA,KAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,gBAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAIC,kBAAkC,CAAA;AAAA,MACpE,OAAS,EAAA,YAAA;AAAA,MACT,UAAY,EAAA,SAAA;AAAA,MACZ,IAAM,EAAA,gBAAA;AAAA,MACN,KAAO,EAAA,OAAA;AAAA,KACR,CAAA,CAAA;AAED,IAAM,MAAA,YAAA,GAAe,CAAC,KAAkB,KAAA;AACtC,MAAA,aAAA,CAAc,KAAK,CAAA,CAAA;AACnB,MAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACb,CAAA;AAEA,IAAA,IAAI,QAAW,GAAA,KAAA,CAAA;AAEf,IAAA,IAAI,YAAY,IAAM,EAAA;AACpB,MACE,QAAA,GAAA,OAAO,YAAY,IAAS,KAAA,UAAA,GACxB,YAAY,IAAK,CAAA,UAAU,IAC3B,WAAY,CAAA,IAAA,CAAA;AAAA,KACpB;AAEA,IAAA,MAAMC,SAAOC,YAAQ,CAAA;AAAA,MACnB,MAAQ,EAAA,gBAAA;AAAA,MACR,MAAQ,EAAA,IAAA;AAAA,MACR,GAAG,WAAA;AAAA,MACH,IAAM,EAAA,QAAA;AAAA,MACN,OAAO,UAAc,IAAA,EAAA;AAAA,MACrB,QAAU,EAAA,YAAA;AAAA,KACX,CAAA,CAAA;AAED,IAAA,uBACGC,cAAA,CAAAC,uBAAA,EAAA;AAAA,MACC,SAAA,EAAWC,SAAK,CAAAC,sBAAA,EAAU,SAAS,CAAA;AAAA,MACnC,cAAgB,EAAAC,2BAAA;AAAA,MAChB,UAAY,EAAA,EAAE,IAAM,EAAA,SAAA,EAAW,GAAG,UAAW,EAAA;AAAA,MAC7C,UAAUN,MAAK,CAAA,QAAA;AAAA,MACf,SAAA;AAAA,MACA,OAAOA,MAAK,CAAA,KAAA;AAAA,MACX,GAAG,KAAA;AAAA,MACJ,GAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}