@hashicorp/mds-react 0.9.0

package/dist/components/form/file-input/index.d.ts

@@ -0,0 +1,27 @@
+import { HTMLProps, ReactNode } from 'react';
+interface FileInputBaseProps {
+    isRequired?: boolean;
+    className?: string;
+    id?: string;
+    /**
+     * Can be used to supply any props that the native `<input>` element supports.
+     * Since this is for file input, we omit `type`, see here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
+     */
+    field: Omit<HTMLProps<HTMLInputElement>, 'type' | 'id'>;
+    error?: ReactNode;
+}
+declare const FileInputBase: {
+    ({ isRequired, className, id, field, error, ...rest }: FileInputBaseProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface FileInputFieldProps extends FileInputBaseProps {
+    label?: ReactNode;
+    helperText?: ReactNode;
+    error?: ReactNode;
+    isOptional?: boolean;
+}
+declare const FileInputField: {
+    ({ id, label, helperText, error, field, className, isRequired, isOptional, ...rest }: FileInputFieldProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { FileInputBase, FileInputField };

package/dist/components/form/file-input/index.js

@@ -0,0 +1,68 @@
+import { jsx as p } from "react/jsx-runtime";
+import { useId as a } from "react";
+import { Field as I } from "../field/index.js";
+import F from "./form-file-input.module.scss.js";
+const u = ({
+  isRequired: i,
+  className: l,
+  id: e,
+  field: r,
+  error: n,
+  ...d
+}) => {
+  const t = a();
+  return /* @__PURE__ */ p(
+    "input",
+    {
+      type: "file",
+      required: i,
+      id: e ?? t,
+      className: F["file-input"],
+      "aria-describedby": `${n ? "error" : "helper-text"}-${e}`,
+      ...r,
+      ...d
+    }
+  );
+};
+u.displayName = "FileInputBase";
+const f = ({
+  id: i,
+  label: l,
+  helperText: e,
+  error: r,
+  field: n,
+  className: d,
+  isRequired: t,
+  isOptional: o,
+  ...m
+}) => {
+  const c = a(), s = i ?? c;
+  return /* @__PURE__ */ p(
+    I,
+    {
+      label: l,
+      helperText: e,
+      error: r,
+      isRequired: t,
+      isOptional: o,
+      id: s,
+      layout: "vertical",
+      className: d,
+      children: /* @__PURE__ */ p(
+        u,
+        {
+          id: s,
+          isRequired: t,
+          field: n,
+          ...m
+        }
+      )
+    }
+  );
+};
+f.displayName = "FileInputField";
+export {
+  u as FileInputBase,
+  f as FileInputField
+};
+//# sourceMappingURL=index.js.map

package/dist/components/form/file-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/form/file-input/index.tsx"],"sourcesContent":["import type { HTMLProps, ReactNode } from 'react'\nimport { useId } from 'react'\nimport { Field } from '../field'\nimport s from './form-file-input.module.scss'\n\ninterface FileInputBaseProps {\n\tisRequired?: boolean\n\tclassName?: string\n\tid?: string\n\n\t/**\n\t * Can be used to supply any props that the native `<input>` element supports.\n\t * Since this is for file input, we omit `type`, see here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file\n\t */\n\tfield: Omit<HTMLProps<HTMLInputElement>, 'type' | 'id'>\n\terror?: ReactNode\n}\n\nconst FileInputBase = ({\n\tisRequired,\n\tclassName,\n\tid,\n\tfield,\n\terror,\n\t...rest\n}: FileInputBaseProps) => {\n\tconst generatedId = useId()\n\tconst inputId = id ?? generatedId\n\n\treturn (\n\t\t<input\n\t\t\ttype=\"file\"\n\t\t\trequired={isRequired}\n\t\t\tid={inputId}\n\t\t\tclassName={s['file-input']}\n\t\t\taria-describedby={`${error ? 'error' : 'helper-text'}-${id}`}\n\t\t\t{...field}\n\t\t\t{...rest}\n\t\t/>\n\t)\n}\n\nFileInputBase.displayName = 'FileInputBase'\n\ninterface FileInputFieldProps extends FileInputBaseProps {\n\tlabel?: ReactNode\n\thelperText?: ReactNode\n\terror?: ReactNode\n\tisOptional?: boolean\n}\n\nconst FileInputField = ({\n\tid,\n\tlabel,\n\thelperText,\n\terror,\n\tfield,\n\tclassName,\n\tisRequired,\n\tisOptional,\n\t...rest\n}: FileInputFieldProps) => {\n\tconst generatedId = useId()\n\tconst inputId = id ?? generatedId\n\n\treturn (\n\t\t<Field\n\t\t\tlabel={label}\n\t\t\thelperText={helperText}\n\t\t\terror={error}\n\t\t\tisRequired={isRequired}\n\t\t\tisOptional={isOptional}\n\t\t\tid={inputId}\n\t\t\tlayout=\"vertical\"\n\t\t\tclassName={className}\n\t\t>\n\t\t\t<FileInputBase\n\t\t\t\tid={inputId}\n\t\t\t\tisRequired={isRequired}\n\t\t\t\tfield={field}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t</Field>\n\t)\n}\n\nFileInputField.displayName = 'FileInputField'\n\nexport { FileInputBase, FileInputField }\n"],"names":["FileInputBase","isRequired","className","id","field","error","rest","generatedId","useId","jsx","s","FileInputField","label","helperText","isOptional","inputId","Field"],"mappings":";;;;AAkBA,MAAMA,IAAgB,CAAC;AAAA,EACtB,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACJ,MAA0B;AACzB,QAAMC,IAAcC,EAAA;AAGpB,SACC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,MAAK;AAAA,MACL,UAAUR;AAAA,MACV,IANcE,KAAMI;AAAA,MAOpB,WAAWG,EAAE,YAAY;AAAA,MACzB,oBAAkB,GAAGL,IAAQ,UAAU,aAAa,IAAIF,CAAE;AAAA,MACzD,GAAGC;AAAA,MACH,GAAGE;AAAA,IAAA;AAAA,EAAA;AAGP;AAEAN,EAAc,cAAc;AAS5B,MAAMW,IAAiB,CAAC;AAAA,EACvB,IAAAR;AAAA,EACA,OAAAS;AAAA,EACA,YAAAC;AAAA,EACA,OAAAR;AAAA,EACA,OAAAD;AAAA,EACA,WAAAF;AAAA,EACA,YAAAD;AAAA,EACA,YAAAa;AAAA,EACA,GAAGR;AACJ,MAA2B;AAC1B,QAAMC,IAAcC,EAAA,GACdO,IAAUZ,KAAMI;AAEtB,SACC,gBAAAE;AAAA,IAACO;AAAA,IAAA;AAAA,MACA,OAAAJ;AAAA,MACA,YAAAC;AAAA,MACA,OAAAR;AAAA,MACA,YAAAJ;AAAA,MACA,YAAAa;AAAA,MACA,IAAIC;AAAA,MACJ,QAAO;AAAA,MACP,WAAAb;AAAA,MAEA,UAAA,gBAAAO;AAAA,QAACT;AAAA,QAAA;AAAA,UACA,IAAIe;AAAA,UACJ,YAAAd;AAAA,UACA,OAAAG;AAAA,UACC,GAAGE;AAAA,QAAA;AAAA,MAAA;AAAA,IACL;AAAA,EAAA;AAGH;AAEAK,EAAe,cAAc;"}

package/dist/components/form/helper-text/form-helper-text.module.css

@@ -0,0 +1,10 @@
+/*
+* FORM > HELPER-TEXT
+*/
+
+.helper-text {
+	display: block;
+	color: var(--mds-form-helper-text-color);
+	composes: mds-typography-legacy-body-100 from global;
+	composes: mds-typography-font-weight-regular from global;
+}

package/dist/components/form/helper-text/form-helper-text.module.css.js

@@ -0,0 +1,7 @@
+const e = {
+  "helper-text": "helper-text__4mh4z mds-typography-legacy-body-100 mds-typography-font-weight-regular"
+};
+export {
+  e as default
+};
+//# sourceMappingURL=form-helper-text.module.css.js.map

package/dist/components/form/helper-text/form-helper-text.module.css.js.map

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

package/dist/components/form/helper-text/index.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+interface HelperTextProps {
+    children: ReactNode;
+    className?: string;
+    controlId?: string;
+}
+declare const HelperText: {
+    ({ children, className, controlId, ...rest }: HelperTextProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { HelperText };

package/dist/components/form/helper-text/index.js

@@ -0,0 +1,22 @@
+import { jsx as p } from "react/jsx-runtime";
+import s from "classnames";
+import i from "./form-helper-text.module.css.js";
+const o = ({
+  children: r,
+  className: t,
+  controlId: e,
+  ...m
+}) => /* @__PURE__ */ p(
+  "div",
+  {
+    className: s(i["helper-text"], t),
+    id: e ? `helper-text-${e}` : void 0,
+    ...m,
+    children: r
+  }
+);
+o.displayName = "HelperText";
+export {
+  o as HelperText
+};
+//# sourceMappingURL=index.js.map

package/dist/components/form/helper-text/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/form/helper-text/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport type { ReactNode } from 'react'\nimport s from './form-helper-text.module.css'\n\ninterface HelperTextProps {\n\tchildren: ReactNode\n\tclassName?: string\n\tcontrolId?: string\n}\n\nconst HelperText = ({\n\tchildren,\n\tclassName,\n\tcontrolId,\n\t...rest\n}: HelperTextProps) => {\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames(s['helper-text'], className)}\n\t\t\tid={controlId ? `helper-text-${controlId}` : undefined}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t)\n}\n\nHelperText.displayName = 'HelperText'\n\nexport { HelperText }\n"],"names":["HelperText","children","className","controlId","rest","jsx","classNames","s"],"mappings":";;;AAUA,MAAMA,IAAa,CAAC;AAAA,EACnB,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACJ,MAEE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,WAAWC,EAAWC,EAAE,aAAa,GAAGL,CAAS;AAAA,IACjD,IAAIC,IAAY,eAAeA,CAAS,KAAK;AAAA,IAC5C,GAAGC;AAAA,IAEH,UAAAH;AAAA,EAAA;AAAA;AAKJD,EAAW,cAAc;"}

package/dist/components/form/indicator/form-indicator.module.css

@@ -0,0 +1,10 @@
+/*
+* FORM > INDICATOR
+*/
+
+/* Used for the 'optional' indicator */
+.optional {
+	color: var(--mds-form-indicator-optional-color);
+	composes: mds-typography-legacy-body-100 from global;
+	composes: mds-typography-font-weight-regular from global;
+}

package/dist/components/form/indicator/form-indicator.module.css.js

@@ -0,0 +1,8 @@
+const o = "optional__xEN-m mds-typography-legacy-body-100 mds-typography-font-weight-regular", t = {
+  optional: o
+};
+export {
+  t as default,
+  o as optional
+};
+//# sourceMappingURL=form-indicator.module.css.js.map

package/dist/components/form/indicator/form-indicator.module.css.js.map

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

package/dist/components/form/indicator/index.d.ts

@@ -0,0 +1,9 @@
+interface IndicatorProps {
+    isOptional?: boolean;
+    isRequired?: boolean;
+}
+declare const Indicator: {
+    ({ isOptional, isRequired }: IndicatorProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export { Indicator };

package/dist/components/form/indicator/index.js

@@ -0,0 +1,22 @@
+import { jsx as o } from "react/jsx-runtime";
+import { Badge as a } from "../../badge/index.js";
+import { localize as i } from "../../../utils/i18n/index.js";
+import { useLocale as n } from "@web/utils/i18n/helpers";
+import m from "./form-indicator.module.css.js";
+const s = ({ isOptional: r, isRequired: l }) => {
+  const e = n(), t = r ? m.optional : null;
+  return r ? /* @__PURE__ */ o("span", { "aria-hidden": "true", className: t, children: `(${i("optional", e, "title")})` }) : l ? /* @__PURE__ */ o(
+    a,
+    {
+      "aria-hidden": "true",
+      className: t,
+      size: "small",
+      text: i("required", e, "title")
+    }
+  ) : null;
+};
+s.displayName = "Indicator";
+export {
+  s as Indicator
+};
+//# sourceMappingURL=index.js.map

package/dist/components/form/indicator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/form/indicator/index.tsx"],"sourcesContent":["import { Badge } from '../../badge'\nimport { localize } from '../../../utils/i18n'\nimport { useLocale } from '@web/utils/i18n/helpers'\nimport s from './form-indicator.module.css'\n\ninterface IndicatorProps {\n\tisOptional?: boolean\n\tisRequired?: boolean\n}\n\nconst Indicator = ({ isOptional, isRequired }: IndicatorProps) => {\n\tconst locale = useLocale()\n\n\tconst className = isOptional ? s.optional : null\n\n\tif (isOptional) {\n\t\treturn (\n\t\t\t<span aria-hidden=\"true\" className={className}>\n\t\t\t\t{`(${localize('optional', locale, 'title')})`}\n\t\t\t</span>\n\t\t)\n\t} else if (isRequired) {\n\t\treturn (\n\t\t\t<Badge\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tclassName={className}\n\t\t\t\tsize=\"small\"\n\t\t\t\ttext={localize('required', locale, 'title')}\n\t\t\t/>\n\t\t)\n\t}\n\n\treturn null\n}\n\nIndicator.displayName = 'Indicator'\n\nexport { Indicator }\n"],"names":["Indicator","isOptional","isRequired","locale","useLocale","className","s","jsx","localize","Badge"],"mappings":";;;;;AAUA,MAAMA,IAAY,CAAC,EAAE,YAAAC,GAAY,YAAAC,QAAiC;AACjE,QAAMC,IAASC,EAAA,GAETC,IAAYJ,IAAaK,EAAE,WAAW;AAE5C,SAAIL,IAEF,gBAAAM,EAAC,QAAA,EAAK,eAAY,QAAO,WAAAF,GACvB,UAAA,IAAIG,EAAS,YAAYL,GAAQ,OAAO,CAAC,KAC3C,IAESD,IAET,gBAAAK;AAAA,IAACE;AAAA,IAAA;AAAA,MACA,eAAY;AAAA,MACZ,WAAAJ;AAAA,MACA,MAAK;AAAA,MACL,MAAMG,EAAS,YAAYL,GAAQ,OAAO;AAAA,IAAA;AAAA,EAAA,IAKtC;AACR;AAEAH,EAAU,cAAc;"}

package/dist/components/form/label/form-label.module.css

@@ -0,0 +1,15 @@
+.badges {
+	display: inline-flex;
+	align-items: baseline;
+	gap: var(--mds-spacing-01);
+}
+
+.label {
+	display: flex;
+	gap: var(--mds-spacing-01);
+	flex-wrap: wrap;
+	max-width: 100%;
+	color: var(--mds-form-label-color);
+	composes: mds-typography-legacy-body-200 from global;
+	composes: mds-typography-font-weight-semibold from global;
+}

package/dist/components/form/label/form-label.module.css.js

@@ -0,0 +1,10 @@
+const a = "badges__fd5n1", e = "label__p8mfL mds-typography-legacy-body-200 mds-typography-font-weight-semibold", s = {
+  badges: a,
+  label: e
+};
+export {
+  a as badges,
+  s as default,
+  e as label
+};
+//# sourceMappingURL=form-label.module.css.js.map

package/dist/components/form/label/form-label.module.css.js.map

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

package/dist/components/form/label/index.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+interface LabelProps {
+    badgeText?: string;
+    className?: string;
+    controlId: string;
+    children: ReactNode;
+    isRequired?: boolean;
+    isOptional?: boolean;
+}
+declare const Label: {
+    ({ badgeText, className, controlId, children, isRequired, isOptional, ...rest }: LabelProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Label };

package/dist/components/form/label/index.js

@@ -0,0 +1,33 @@
+import { jsxs as a, jsx as m } from "react/jsx-runtime";
+import c from "classnames";
+import { Indicator as i } from "../indicator/index.js";
+import { Badge as f } from "../../badge/index.js";
+import o from "./form-label.module.css.js";
+const N = ({
+  badgeText: l,
+  className: e,
+  controlId: t,
+  children: n,
+  isRequired: r,
+  isOptional: s,
+  ...p
+}) => /* @__PURE__ */ a(
+  "label",
+  {
+    className: c(o.label, e),
+    htmlFor: t,
+    ...p,
+    children: [
+      /* @__PURE__ */ m("span", { children: n }),
+      s || r || l ? /* @__PURE__ */ a("span", { className: o.badges, children: [
+        l ? /* @__PURE__ */ m(f, { size: "small", text: l }) : null,
+        /* @__PURE__ */ m(i, { isRequired: r, isOptional: s })
+      ] }) : null
+    ]
+  }
+);
+N.displayName = "Label";
+export {
+  N as Label
+};
+//# sourceMappingURL=index.js.map

package/dist/components/form/label/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/form/label/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { Indicator } from '../indicator'\nimport { Badge } from '../../badge'\nimport type { ReactNode } from 'react'\nimport s from './form-label.module.css'\n\ninterface LabelProps {\n\tbadgeText?: string\n\tclassName?: string\n\tcontrolId: string\n\tchildren: ReactNode\n\tisRequired?: boolean\n\tisOptional?: boolean\n}\n\nconst Label = ({\n\tbadgeText,\n\tclassName,\n\tcontrolId,\n\tchildren,\n\tisRequired,\n\tisOptional,\n\t...rest\n}: LabelProps) => {\n\treturn (\n\t\t<label\n\t\t\tclassName={classNames(s.label, className)}\n\t\t\thtmlFor={controlId}\n\t\t\t{...rest}\n\t\t>\n\t\t\t<span>{children}</span>\n\t\t\t{isOptional || isRequired || badgeText ? (\n\t\t\t\t<span className={s.badges}>\n\t\t\t\t\t{badgeText ? <Badge size=\"small\" text={badgeText} /> : null}\n\t\t\t\t\t<Indicator isRequired={isRequired} isOptional={isOptional} />\n\t\t\t\t</span>\n\t\t\t) : null}\n\t\t</label>\n\t)\n}\n\nLabel.displayName = 'Label'\n\nexport { Label }\n"],"names":["Label","badgeText","className","controlId","children","isRequired","isOptional","rest","jsxs","classNames","s","jsx","Badge","Indicator"],"mappings":";;;;;AAeA,MAAMA,IAAQ,CAAC;AAAA,EACd,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,GAAGC;AACJ,MAEE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,WAAWC,EAAWC,EAAE,OAAOR,CAAS;AAAA,IACxC,SAASC;AAAA,IACR,GAAGI;AAAA,IAEJ,UAAA;AAAA,MAAA,gBAAAI,EAAC,UAAM,UAAAP,GAAS;AAAA,MACfE,KAAcD,KAAcJ,sBAC3B,QAAA,EAAK,WAAWS,EAAE,QACjB,UAAA;AAAA,QAAAT,sBAAaW,GAAA,EAAM,MAAK,SAAQ,MAAMX,GAAW,IAAK;AAAA,QACvD,gBAAAU,EAACE,GAAA,EAAU,YAAAR,GAAwB,YAAAC,EAAA,CAAwB;AAAA,MAAA,EAAA,CAC5D,IACG;AAAA,IAAA;AAAA,EAAA;AAAA;AAKPN,EAAM,cAAc;"}

package/dist/components/form/legend/form-legend.module.css

@@ -0,0 +1,17 @@
+/*
+* FORM > LEGEND
+*/
+
+.legend {
+	display: block;
+	color: var(--mds-form-legend-color);
+	composes: mds-typography-legacy-body-200 from global;
+	composes: mds-typography-font-weight-semibold from global;
+}
+
+.badge {
+	display: inline-flex;
+	align-items: baseline;
+	gap: var(--mds-spacing-01);
+	margin-left: var(--mds-spacing-01);
+}

package/dist/components/form/legend/form-legend.module.css.js

@@ -0,0 +1,10 @@
+const e = "legend__O8-rs mds-typography-legacy-body-200 mds-typography-font-weight-semibold", d = "badge__rqzw5", g = {
+  legend: e,
+  badge: d
+};
+export {
+  d as badge,
+  g as default,
+  e as legend
+};
+//# sourceMappingURL=form-legend.module.css.js.map

package/dist/components/form/legend/form-legend.module.css.js.map

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

package/dist/components/form/legend/index.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+interface LegendProps {
+    className?: string;
+    isRequired?: boolean;
+    isOptional?: boolean;
+    children: ReactNode;
+}
+declare const Legend: {
+    ({ className, isRequired, isOptional, children, ...rest }: LegendProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Legend };

package/dist/components/form/legend/index.js

@@ -0,0 +1,19 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import d from "classnames";
+import { Indicator as c } from "../indicator/index.js";
+import m from "./form-legend.module.css.js";
+const p = ({
+  className: a,
+  isRequired: r,
+  isOptional: s,
+  children: n,
+  ...o
+}) => /* @__PURE__ */ l("legend", { className: d(m.legend, a), ...o, children: [
+  /* @__PURE__ */ e("span", { children: n }),
+  s || r ? /* @__PURE__ */ e("span", { className: m.badge, children: /* @__PURE__ */ e(c, { isRequired: r, isOptional: s }) }) : null
+] });
+p.displayName = "Legend";
+export {
+  p as Legend
+};
+//# sourceMappingURL=index.js.map

package/dist/components/form/legend/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/form/legend/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport classNames from 'classnames'\nimport { Indicator } from '../indicator'\nimport s from './form-legend.module.css'\n\ninterface LegendProps {\n\tclassName?: string\n\tisRequired?: boolean\n\tisOptional?: boolean\n\tchildren: ReactNode\n}\n\nconst Legend = ({\n\tclassName,\n\tisRequired,\n\tisOptional,\n\tchildren,\n\t...rest\n}: LegendProps) => {\n\treturn (\n\t\t<legend className={classNames(s.legend, className)} {...rest}>\n\t\t\t<span>{children}</span>\n\t\t\t{isOptional || isRequired ? (\n\t\t\t\t<span className={s.badge}>\n\t\t\t\t\t<Indicator isRequired={isRequired} isOptional={isOptional} />\n\t\t\t\t</span>\n\t\t\t) : null}\n\t\t</legend>\n\t)\n}\n\nLegend.displayName = 'Legend'\n\nexport { Legend }\n"],"names":["Legend","className","isRequired","isOptional","children","rest","jsxs","classNames","s","jsx","Indicator"],"mappings":";;;;AAYA,MAAMA,IAAS,CAAC;AAAA,EACf,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACJ,MAEE,gBAAAC,EAAC,YAAO,WAAWC,EAAWC,EAAE,QAAQP,CAAS,GAAI,GAAGI,GACvD,UAAA;AAAA,EAAA,gBAAAI,EAAC,UAAM,UAAAL,GAAS;AAAA,EACfD,KAAcD,IACd,gBAAAO,EAAC,QAAA,EAAK,WAAWD,EAAE,OAClB,UAAA,gBAAAC,EAACC,GAAA,EAAU,YAAAR,GAAwB,YAAAC,EAAA,CAAwB,EAAA,CAC5D,IACG;AAAA,GACL;AAIFH,EAAO,cAAc;"}

package/dist/components/form/radio/form-radio.module.scss

@@ -0,0 +1,74 @@
+/*
+* FORM > RADIO
+*/
+
+/* "BASE" CONTROL */
+
+.radio {
+	width: var(--mds-form-radio-size);
+	height: var(--mds-form-radio-size);
+	margin: 0;
+	padding: 0;
+	background-position: center center;
+	background-size: var(--mds-form-radio-background-image-size)
+		var(--mds-form-radio-background-image-size);
+	border-style: solid;
+	border-width: var(--mds-form-radio-border-width);
+	border-radius: 50%;
+	cursor: pointer;
+	appearance: none;
+
+	/* STATUS */
+
+	/* base (default) */
+
+	&:not(:checked) {
+		background-color: var(--mds-form-control-base-surface-color-default);
+		border-color: var(--mds-form-control-base-border-color-default);
+		box-shadow: var(--mds-elevation-inset-box-shadow);
+	}
+
+	&:checked {
+		background-color: var(--mds-form-control-checked-surface-color-default);
+		background-image: var(--mds-form-radio-background-image-data-url);
+		border-color: var(--mds-form-control-checked-border-color-default);
+	}
+
+	/* hover */
+
+	&:hover:not(:checked) {
+		background-color: var(--mds-form-control-base-surface-color-hover);
+		border-color: var(--mds-form-control-base-border-color-hover);
+	}
+
+	&:hover:checked {
+		background-color: var(--mds-form-control-checked-border-color-default);
+		border-color: var(--mds-form-control-checked-border-color-hover);
+	}
+
+	/* focus (same for all the states) */
+
+	&:focus {
+		outline: 3px solid var(--mds-color-focus-action-external);
+		outline-offset: 1px;
+	}
+
+	/* DISABLED */
+
+	&:disabled:not(:checked) {
+		background-color: var(--mds-form-control-disabled-surface-color);
+		border-color: var(--mds-form-control-disabled-border-color);
+		box-shadow: none;
+		cursor: not-allowed;
+	}
+
+	&:disabled:checked {
+		background-color: var(--mds-form-control-disabled-surface-color);
+		background-image: var(
+			--mds-form-radio-background-image-data-url-disabled
+		);
+		border-color: var(--mds-form-control-disabled-border-color);
+		box-shadow: none;
+		cursor: not-allowed;
+	}
+}

package/dist/components/form/radio/form-radio.module.scss.js

@@ -0,0 +1,8 @@
+const o = "radio__oZ3hf", a = {
+  radio: o
+};
+export {
+  a as default,
+  o as radio
+};
+//# sourceMappingURL=form-radio.module.scss.js.map

package/dist/components/form/radio/form-radio.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-radio.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/components/form/radio/index.d.ts

@@ -0,0 +1,44 @@
+import { ComponentProps, HTMLProps, ReactNode } from 'react';
+import { Fieldset } from '../fieldset';
+interface RadioBaseProps {
+    id: string;
+    required?: boolean;
+    field: HTMLProps<HTMLInputElement>;
+    className?: string;
+    testingKey?: string;
+}
+declare const RadioBase: {
+    ({ id, required, field, className, testingKey, }: RadioBaseProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface RadioFieldProps {
+    isInvalid?: boolean;
+    isLoading?: boolean;
+    isRequired?: boolean;
+    isOptional?: boolean;
+    id?: string;
+    label?: ReactNode;
+    helperText?: ReactNode;
+    error?: ReactNode;
+    field: HTMLProps<HTMLInputElement>;
+    className?: string;
+    testingKey?: string;
+}
+declare const RadioField: {
+    ({ isInvalid, isLoading, isRequired, isOptional, id, label, helperText, error, field, className, testingKey, ...rest }: RadioFieldProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface RadioGroupProps extends ComponentProps<typeof Fieldset> {
+    children: ReactNode;
+}
+declare const RadioGroup: {
+    Root: {
+        ({ layout, legend, isOptional, isRequired, children, }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Field: {
+        (props: RadioFieldProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export { RadioGroup, RadioBase, RadioField };

package/dist/components/form/radio/index.js

@@ -0,0 +1,100 @@
+import { jsx as d } from "react/jsx-runtime";
+import { useId as g } from "react";
+import { Field as G } from "../field/index.js";
+import { Fieldset as I } from "../fieldset/index.js";
+import b from "classnames";
+import v from "./form-radio.module.scss.js";
+const s = ({
+  id: o,
+  required: r,
+  field: i,
+  className: e,
+  testingKey: a
+}) => /* @__PURE__ */ d(
+  "input",
+  {
+    id: o,
+    type: "radio",
+    className: b(v.radio, e),
+    required: r,
+    "data-testid": a,
+    ...i
+  }
+);
+s.displayName = "RadioBase";
+const l = ({
+  isInvalid: o,
+  isLoading: r,
+  isRequired: i,
+  isOptional: e,
+  id: a,
+  label: p,
+  helperText: c,
+  error: u,
+  field: R,
+  className: y,
+  testingKey: f,
+  ...N
+}) => {
+  const F = g(), t = a ?? F;
+  return /* @__PURE__ */ d(
+    G,
+    {
+      label: p,
+      helperText: c,
+      error: u,
+      isRequired: i,
+      isOptional: e,
+      id: t,
+      layout: "flag",
+      className: y,
+      children: /* @__PURE__ */ d(
+        s,
+        {
+          id: t,
+          required: i,
+          field: { ...R, "aria-describedby": `error-${a}` },
+          testingKey: f,
+          ...N
+        }
+      )
+    }
+  );
+};
+l.displayName = "RadioField";
+const m = ({
+  layout: o = "vertical",
+  legend: r,
+  isOptional: i,
+  isRequired: e,
+  children: a
+}) => /* @__PURE__ */ d(
+  I,
+  {
+    layout: o,
+    legend: r,
+    isOptional: i,
+    isRequired: e,
+    children: a
+  }
+);
+m.displayName = "RadioGroupRoot";
+const n = (o) => /* @__PURE__ */ d(
+  l,
+  {
+    ...o,
+    testingKey: o.testingKey,
+    className: o.className
+  }
+);
+n.displayName = "RadioGroupField";
+const $ = {
+  Root: m,
+  Field: n
+};
+export {
+  s as RadioBase,
+  l as RadioField,
+  $ as RadioGroup
+};
+//# sourceMappingURL=index.js.map

package/dist/components/form/radio/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/form/radio/index.tsx"],"sourcesContent":["import {\n\tuseId,\n\ttype ComponentProps,\n\ttype HTMLProps,\n\ttype ReactNode,\n} from 'react'\nimport { Field } from '../field'\nimport { Fieldset } from '../fieldset'\nimport classNames from 'classnames'\nimport s from './form-radio.module.scss'\n\ninterface RadioBaseProps {\n\tid: string\n\trequired?: boolean\n\tfield: HTMLProps<HTMLInputElement>\n\tclassName?: string\n\ttestingKey?: string\n}\n\nconst RadioBase = ({\n\tid,\n\trequired,\n\tfield,\n\tclassName,\n\ttestingKey,\n}: RadioBaseProps) => {\n\treturn (\n\t\t<input\n\t\t\tid={id}\n\t\t\ttype=\"radio\"\n\t\t\tclassName={classNames(s.radio, className)}\n\t\t\trequired={required}\n\t\t\tdata-testid={testingKey}\n\t\t\t{...field}\n\t\t/>\n\t)\n}\n\nRadioBase.displayName = 'RadioBase'\n\ninterface RadioFieldProps {\n\tisInvalid?: boolean\n\tisLoading?: boolean\n\tisRequired?: boolean\n\tisOptional?: boolean\n\tid?: string\n\tlabel?: ReactNode\n\thelperText?: ReactNode\n\terror?: ReactNode\n\tfield: HTMLProps<HTMLInputElement>\n\tclassName?: string\n\ttestingKey?: string\n}\n\nconst RadioField = ({\n\tisInvalid,\n\tisLoading,\n\tisRequired,\n\tisOptional,\n\tid,\n\tlabel,\n\thelperText,\n\terror,\n\tfield,\n\tclassName,\n\ttestingKey,\n\t...rest\n}: RadioFieldProps) => {\n\tconst generatedId = useId()\n\tconst inputId = id ?? generatedId\n\n\treturn (\n\t\t<Field\n\t\t\tlabel={label}\n\t\t\thelperText={helperText}\n\t\t\terror={error}\n\t\t\tisRequired={isRequired}\n\t\t\tisOptional={isOptional}\n\t\t\tid={inputId}\n\t\t\tlayout=\"flag\"\n\t\t\tclassName={className}\n\t\t>\n\t\t\t<RadioBase\n\t\t\t\tid={inputId}\n\t\t\t\trequired={isRequired}\n\t\t\t\tfield={{ ...field, 'aria-describedby': `error-${id}` }}\n\t\t\t\ttestingKey={testingKey}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t</Field>\n\t)\n}\n\nRadioField.displayName = 'RadioField'\n\ninterface RadioGroupProps extends ComponentProps<typeof Fieldset> {\n\tchildren: ReactNode\n}\n\nconst RadioGroupRoot = ({\n\tlayout = 'vertical',\n\tlegend,\n\tisOptional,\n\tisRequired,\n\tchildren,\n}: RadioGroupProps) => {\n\treturn (\n\t\t<Fieldset\n\t\t\tlayout={layout}\n\t\t\tlegend={legend}\n\t\t\tisOptional={isOptional}\n\t\t\tisRequired={isRequired}\n\t\t>\n\t\t\t{children}\n\t\t</Fieldset>\n\t)\n}\n\nRadioGroupRoot.displayName = 'RadioGroupRoot'\n\nconst RadioGroupField = (props: RadioFieldProps) => {\n\treturn (\n\t\t<RadioField\n\t\t\t{...props}\n\t\t\ttestingKey={props.testingKey}\n\t\t\tclassName={props.className}\n\t\t/>\n\t)\n}\n\nRadioGroupField.displayName = 'RadioGroupField'\n\nconst RadioGroup = {\n\tRoot: RadioGroupRoot,\n\tField: RadioGroupField,\n}\n\nexport { RadioGroup, RadioBase, RadioField }\n"],"names":["RadioBase","id","required","field","className","testingKey","jsx","classNames","s","RadioField","isInvalid","isLoading","isRequired","isOptional","label","helperText","error","rest","generatedId","useId","inputId","Field","RadioGroupRoot","layout","legend","children","Fieldset","RadioGroupField","props","RadioGroup"],"mappings":";;;;;;AAmBA,MAAMA,IAAY,CAAC;AAAA,EAClB,IAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AACD,MAEE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,IAAAL;AAAA,IACA,MAAK;AAAA,IACL,WAAWM,EAAWC,EAAE,OAAOJ,CAAS;AAAA,IACxC,UAAAF;AAAA,IACA,eAAaG;AAAA,IACZ,GAAGF;AAAA,EAAA;AAAA;AAKPH,EAAU,cAAc;AAgBxB,MAAMS,IAAa,CAAC;AAAA,EACnB,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,IAAAZ;AAAA,EACA,OAAAa;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAb;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,GAAGY;AACJ,MAAuB;AACtB,QAAMC,IAAcC,EAAA,GACdC,IAAUnB,KAAMiB;AAEtB,SACC,gBAAAZ;AAAA,IAACe;AAAA,IAAA;AAAA,MACA,OAAAP;AAAA,MACA,YAAAC;AAAA,MACA,OAAAC;AAAA,MACA,YAAAJ;AAAA,MACA,YAAAC;AAAA,MACA,IAAIO;AAAA,MACJ,QAAO;AAAA,MACP,WAAAhB;AAAA,MAEA,UAAA,gBAAAE;AAAA,QAACN;AAAA,QAAA;AAAA,UACA,IAAIoB;AAAA,UACJ,UAAUR;AAAA,UACV,OAAO,EAAE,GAAGT,GAAO,oBAAoB,SAASF,CAAE,GAAA;AAAA,UAClD,YAAAI;AAAA,UACC,GAAGY;AAAA,QAAA;AAAA,MAAA;AAAA,IACL;AAAA,EAAA;AAGH;AAEAR,EAAW,cAAc;AAMzB,MAAMa,IAAiB,CAAC;AAAA,EACvB,QAAAC,IAAS;AAAA,EACT,QAAAC;AAAA,EACA,YAAAX;AAAA,EACA,YAAAD;AAAA,EACA,UAAAa;AACD,MAEE,gBAAAnB;AAAA,EAACoB;AAAA,EAAA;AAAA,IACA,QAAAH;AAAA,IACA,QAAAC;AAAA,IACA,YAAAX;AAAA,IACA,YAAAD;AAAA,IAEC,UAAAa;AAAA,EAAA;AAAA;AAKJH,EAAe,cAAc;AAE7B,MAAMK,IAAkB,CAACC,MAEvB,gBAAAtB;AAAA,EAACG;AAAA,EAAA;AAAA,IACC,GAAGmB;AAAA,IACJ,YAAYA,EAAM;AAAA,IAClB,WAAWA,EAAM;AAAA,EAAA;AAAA;AAKpBD,EAAgB,cAAc;AAE9B,MAAME,IAAa;AAAA,EAClB,MAAMP;AAAA,EACN,OAAOK;AACR;"}

package/dist/components/form/radio-card/description.d.ts

@@ -0,0 +1,3 @@
+export default function Description({ description }: {
+    description: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/form/radio-card/description.js

@@ -0,0 +1,10 @@
+import { jsx as o } from "react/jsx-runtime";
+import { Text as i } from "../../text/index.js";
+import t from "./form-radio-card.module.css.js";
+function n({ description: r }) {
+  return /* @__PURE__ */ o(i.HDSBody, { className: t.description, size: "100", children: r });
+}
+export {
+  n as default
+};
+//# sourceMappingURL=description.js.map