@primer/react-brand 0.68.0-rc.59bbed40 → 0.68.0-rc.5bd56cbb

package/esm/fixtures/third-party-logos/VisualStudioLogo.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+type VisualStudioLogoProps = React.SVGProps<SVGSVGElement>;
+export declare const VisualStudioLogo: (props: VisualStudioLogoProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=VisualStudioLogo.d.ts.map

package/esm/fixtures/third-party-logos/VisualStudioLogo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisualStudioLogo.d.ts","sourceRoot":"","sources":["../../../src/fixtures/third-party-logos/VisualStudioLogo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,KAAK,qBAAqB,GAAG,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAA;AAE1D,eAAO,MAAM,gBAAgB,GAAI,OAAO,qBAAqB,4CAmJ5D,CAAA"}

package/esm/forms/Checkbox/Checkbox.d.ts

@@ -0,0 +1,28 @@
+import React, { type InputHTMLAttributes } from 'react';
+import type { BaseProps } from '../../component-helpers';
+import type { FormValidationStatus } from '../form-types';
+export type CheckboxProps = {
+    /**
+     * Apply indeterminate visual appearance to the checkbox
+     */
+    indeterminate?: boolean;
+    /**
+     * Apply inactive visual appearance to the checkbox
+     */
+    disabled?: boolean;
+    /**
+     * Indicates whether the checkbox must be checked
+     */
+    required?: boolean;
+    /**
+     * Only used to inform ARIA attributes. Individual checkboxes do not have validation styles.
+     */
+    validationStatus?: FormValidationStatus;
+    /**
+     * A unique value that is never shown to the user.
+     * Used during form submission and to identify which checkbox inputs are selected
+     */
+    value?: string;
+} & Exclude<InputHTMLAttributes<HTMLInputElement>, 'value'> & BaseProps<HTMLInputElement>;
+export declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<unknown>>;
+//# sourceMappingURL=Checkbox.d.ts.map

package/esm/forms/Checkbox/Checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/forms/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA0B,KAAK,mBAAmB,EAAoB,MAAM,OAAO,CAAA;AAIjG,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,eAAe,CAAA;AAMvD,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;IACvC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,OAAO,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC,GACzD,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAsF7B,eAAO,MAAM,QAAQ,4FAA+B,CAAA"}

package/esm/forms/Checkbox/Checkbox.js

@@ -0,0 +1,74 @@
+import e from "../../node_modules/clsx/dist/clsx.js";
+import { useId as t } from "../../hooks/useId.js";
+import { useProvidedRefOrCreate as n } from "../../hooks/useRef.js";
+import r from "../../hooks/useIsomorphicLayoutEffect.js";
+import i from "./Checkbox.module.js";
+import { forwardRef as a, useCallback as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+var l = a(({ checked: a, className: l, indeterminate: u, disabled: d, id: f, onChange: p, required: m, validationStatus: h, value: g, ..._ }, v) => {
+	let y = n(v || null), b = t(f);
+	r(() => {
+		y.current && (y.current.indeterminate = u || !1);
+	}, [
+		u,
+		a,
+		y
+	]);
+	let x = o(() => {
+		!d && y.current && y.current.click();
+	}, [d, y]);
+	return /* @__PURE__ */ c("span", {
+		className: i["Checkbox-wrapper"],
+		children: [/* @__PURE__ */ s("input", {
+			id: b,
+			"aria-invalid": h === "error" ? "true" : "false",
+			"aria-required": m ? "true" : "false",
+			"aria-checked": u ? "mixed" : a,
+			checked: u ? !1 : a,
+			className: e(i["Checkbox-input"]),
+			disabled: d,
+			name: g,
+			onChange: p,
+			ref: y,
+			required: m,
+			type: "checkbox",
+			value: g,
+			..._
+		}), /* @__PURE__ */ s("span", {
+			className: e(i.Checkbox, u && i["Checkbox--indeterminate"], l),
+			onClick: x,
+			tabIndex: -1,
+			"aria-hidden": "true",
+			children: u ? /* @__PURE__ */ s("svg", {
+				className: e(i["Checkbox-checkmark"]),
+				xmlns: "http://www.w3.org/2000/svg",
+				viewBox: "0 0 16 16",
+				width: "16",
+				height: "16",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ s("path", {
+					fillRule: "evenodd",
+					d: "M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z"
+				})
+			}) : /* @__PURE__ */ s("svg", {
+				viewBox: "0 0 100 100",
+				className: e(i["Checkbox-checkmark"]),
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ s("path", {
+					className: e(i["Checkbox-checkmark-path"]),
+					fill: "none",
+					stroke: "#000",
+					strokeWidth: "13",
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					strokeMiterlimit: "10",
+					d: "M12.1 52.1l24.4 24.4 53-53"
+				})
+			})
+		})]
+	});
+});
+//#endregion
+export { l as Checkbox };
+
+//# sourceMappingURL=Checkbox.js.map

package/esm/forms/Checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","names":[],"sources":["../../../src/forms/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, {forwardRef, useCallback, type InputHTMLAttributes, type ReactElement} from 'react'\nimport {clsx} from 'clsx'\nimport {useId} from '../../hooks/useId'\n\nimport type {BaseProps} from '../../component-helpers'\nimport type {FormValidationStatus} from '../form-types'\nimport useLayoutEffect from '../../hooks/useIsomorphicLayoutEffect'\n\nimport styles from './Checkbox.module.css'\nimport {useProvidedRefOrCreate} from '../../hooks/useRef'\n\nexport type CheckboxProps = {\n  /**\n   * Apply indeterminate visual appearance to the checkbox\n   */\n  indeterminate?: boolean\n  /**\n   * Apply inactive visual appearance to the checkbox\n   */\n  disabled?: boolean\n  /**\n   * Indicates whether the checkbox must be checked\n   */\n  required?: boolean\n  /**\n   * Only used to inform ARIA attributes. Individual checkboxes do not have validation styles.\n   */\n  validationStatus?: FormValidationStatus\n  /**\n   * A unique value that is never shown to the user.\n   * Used during form submission and to identify which checkbox inputs are selected\n   */\n  value?: string\n} & Exclude<InputHTMLAttributes<HTMLInputElement>, 'value'> &\n  BaseProps<HTMLInputElement>\n\nconst CheckboxInternal = (\n  {\n    checked,\n    className,\n    indeterminate,\n    disabled,\n    id,\n    onChange,\n    required,\n    validationStatus,\n    value,\n    ...rest\n  }: CheckboxProps,\n  ref,\n): ReactElement => {\n  const inputRef = useProvidedRefOrCreate<HTMLInputElement | null>(ref || null)\n  const uniqueId = useId(id)\n\n  useLayoutEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = indeterminate || false\n    }\n  }, [indeterminate, checked, inputRef])\n\n  const onClick = useCallback(() => {\n    if (!disabled && inputRef.current) {\n      inputRef.current.click()\n    }\n  }, [disabled, inputRef])\n\n  return (\n    <span className={styles['Checkbox-wrapper']}>\n      <input\n        id={uniqueId}\n        aria-invalid={validationStatus === 'error' ? 'true' : 'false'}\n        aria-required={required ? 'true' : 'false'}\n        aria-checked={indeterminate ? 'mixed' : checked}\n        checked={indeterminate ? false : checked}\n        className={clsx(styles['Checkbox-input'])}\n        disabled={disabled}\n        name={value}\n        onChange={onChange}\n        ref={inputRef}\n        required={required}\n        type=\"checkbox\"\n        value={value}\n        {...rest}\n      />\n      <span\n        className={clsx(styles['Checkbox'], indeterminate && styles['Checkbox--indeterminate'], className)}\n        onClick={onClick}\n        tabIndex={-1}\n        aria-hidden=\"true\"\n      >\n        {indeterminate ? (\n          <svg\n            className={clsx(styles['Checkbox-checkmark'])}\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 16 16\"\n            width=\"16\"\n            height=\"16\"\n            aria-hidden=\"true\"\n          >\n            <path fillRule=\"evenodd\" d=\"M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z\"></path>\n          </svg>\n        ) : (\n          <svg viewBox=\"0 0 100 100\" className={clsx(styles['Checkbox-checkmark'])} aria-hidden=\"true\">\n            <path\n              className={clsx(styles['Checkbox-checkmark-path'])}\n              fill=\"none\"\n              stroke=\"#000\"\n              strokeWidth=\"13\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeMiterlimit=\"10\"\n              d=\"M12.1 52.1l24.4 24.4 53-53\"\n            />\n          </svg>\n        )}\n      </span>\n    </span>\n  )\n}\n\nexport const Checkbox = forwardRef(CheckboxInternal)\n"],"mappings":";;;;;;;AAwHA,IAAa,IAAW,GAnFtB,EACE,YACA,cACA,kBACA,aACA,OACA,aACA,aACA,qBACA,UACA,GAAG,KAEL,MACiB;CACjB,IAAM,IAAW,EAAgD,KAAO,KAAK,EACvE,IAAW,EAAM,EAAG;AAE1B,SAAsB;AACpB,EAAI,EAAS,YACX,EAAS,QAAQ,gBAAgB,KAAiB;IAEnD;EAAC;EAAe;EAAS;EAAS,CAAC;CAEtC,IAAM,IAAU,QAAkB;AAChC,EAAI,CAAC,KAAY,EAAS,WACxB,EAAS,QAAQ,OAAO;IAEzB,CAAC,GAAU,EAAS,CAAC;AAExB,QACE,kBAAC,QAAD;EAAM,WAAW,EAAO;YAAxB,CACE,kBAAC,SAAD;GACE,IAAI;GACJ,gBAAc,MAAqB,UAAU,SAAS;GACtD,iBAAe,IAAW,SAAS;GACnC,gBAAc,IAAgB,UAAU;GACxC,SAAS,IAAgB,KAAQ;GACjC,WAAW,EAAK,EAAO,kBAAkB;GAC/B;GACV,MAAM;GACI;GACV,KAAK;GACK;GACV,MAAK;GACE;GACP,GAAI;GACJ,CAAA,EACF,kBAAC,QAAD;GACE,WAAW,EAAK,EAAO,UAAa,KAAiB,EAAO,4BAA4B,EAAU;GACzF;GACT,UAAU;GACV,eAAY;aAEX,IACC,kBAAC,OAAD;IACE,WAAW,EAAK,EAAO,sBAAsB;IAC7C,OAAM;IACN,SAAQ;IACR,OAAM;IACN,QAAO;IACP,eAAY;cAEZ,kBAAC,QAAD;KAAM,UAAS;KAAU,GAAE;KAA8E,CAAA;IACrG,CAAA,GAEN,kBAAC,OAAD;IAAK,SAAQ;IAAc,WAAW,EAAK,EAAO,sBAAsB;IAAE,eAAY;cACpF,kBAAC,QAAD;KACE,WAAW,EAAK,EAAO,2BAA2B;KAClD,MAAK;KACL,QAAO;KACP,aAAY;KACZ,eAAc;KACd,gBAAe;KACf,kBAAiB;KACjB,GAAE;KACF,CAAA;IACE,CAAA;GAEH,CAAA,CACF;;EAIyC"}

package/esm/forms/Checkbox/Checkbox.module-DTWn-eCl.css

@@ -0,0 +1 @@
+.Primer_Brand__Checkbox-module__Checkbox-wrapper___81I1z{grid-row:1;position:relative}.Primer_Brand__Checkbox-module__Checkbox___u6_Bq{background-color:var(--brand-control-checkbox-bg-default);border:solid 1px var(--brand-control-color-border-default);border:solid var(--brand-borderWidth-thick,1px) var(--brand-control-color-border-default);border-radius:var(--brand-borderRadius-small);cursor:pointer;outline:1px solid var(--brand-control-checkbox-bg-default);justify-content:center;align-items:center;width:20px;height:20px;margin:3px 0;transition:all .35s ease-out;display:inline-flex;box-shadow:0 0 0 3px #0000}.Primer_Brand__Checkbox-module__Checkbox-input___NQtTz{clip:rect(1px, 1px, 1px, 1px);border:0;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}.Primer_Brand__Checkbox-module__Checkbox-checkmark___1RiBT{width:16px;height:16px}.Primer_Brand__Checkbox-module__Checkbox-checkmark-path___NHI_D{stroke:var(--brand-color-focus);stroke-dashoffset:111.46px;stroke-dasharray:111.46;transition:all .35s var(--brand-control-animation-easing)}.Primer_Brand__Checkbox-module__Checkbox-input___NQtTz:checked+.Primer_Brand__Checkbox-module__Checkbox___u6_Bq,.Primer_Brand__Checkbox-module__Checkbox--indeterminate___TsIkM{background:var(--brand-control-checkbox-bg-checked);border-color:var(--brand-control-checkbox-border-checked)}.Primer_Brand__Checkbox-module__Checkbox--indeterminate___TsIkM .Primer_Brand__Checkbox-module__Checkbox-checkmark___1RiBT{fill:var(--brand-control-checkbox-fg-checked)}.Primer_Brand__Checkbox-module__Checkbox-input___NQtTz:checked+.Primer_Brand__Checkbox-module__Checkbox___u6_Bq .Primer_Brand__Checkbox-module__Checkbox-checkmark-path___NHI_D,.Primer_Brand__Checkbox-module__Checkbox--indeterminate___TsIkM .Primer_Brand__Checkbox-module__Checkbox-checkmark-path___NHI_D{stroke:var(--brand-control-checkbox-fg-checked);stroke-dashoffset:0}.Primer_Brand__Checkbox-module__Checkbox-input___NQtTz:focus+.Primer_Brand__Checkbox-module__Checkbox___u6_Bq{box-shadow:0 0 0 3px var(--brand-color-focus)}.Primer_Brand__Checkbox-module__Checkbox-input___NQtTz:checked:focus+.Primer_Brand__Checkbox-module__Checkbox___u6_Bq,.Primer_Brand__Checkbox-module__Checkbox-input___NQtTz:focus+.Primer_Brand__Checkbox-module__Checkbox--indeterminate___TsIkM{border-color:var(--brand-control-checkbox-border-checked)}.Primer_Brand__Checkbox-module__Checkbox-input___NQtTz[disabled]+.Primer_Brand__Checkbox-module__Checkbox___u6_Bq,.Primer_Brand__Checkbox-module__Checkbox-input___NQtTz[disabled]:checked+.Primer_Brand__Checkbox-module__Checkbox___u6_Bq{-webkit-text-fill-color:var(--brand-control-color-fg-disabled);color:var(--brand-control-color-fg-disabled);cursor:not-allowed;background-color:var(--brand-control-checkbox-bg-disabled);border-color:var(--brand-control-color-border-disabled);opacity:1}@media (forced-colors:active){.Primer_Brand__Checkbox-module__Checkbox-input___NQtTz:focus+.Primer_Brand__Checkbox-module__Checkbox___u6_Bq{outline:var(--brand-borderWidth-thick) solid Highlight;outline-offset:var(--base-size-2)}.Primer_Brand__Checkbox-module__Checkbox-input___NQtTz:checked+.Primer_Brand__Checkbox-module__Checkbox___u6_Bq .Primer_Brand__Checkbox-module__Checkbox-checkmark-path___NHI_D{stroke:highlight}.Primer_Brand__Checkbox-module__Checkbox___u6_Bq{transition:none}}@media (prefers-reduced-motion:reduce){.Primer_Brand__Checkbox-module__Checkbox___u6_Bq,.Primer_Brand__Checkbox-module__Checkbox___u6_Bq:before,.Primer_Brand__Checkbox-module__Checkbox___u6_Bq:after,.Primer_Brand__Checkbox-module__Checkbox___u6_Bq *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

package/esm/forms/Checkbox/Checkbox.module.js

@@ -0,0 +1,12 @@
+import './Checkbox.module-DTWn-eCl.css';var e = {
+	"Checkbox-wrapper": "Primer_Brand__Checkbox-module__Checkbox-wrapper___81I1z",
+	Checkbox: "Primer_Brand__Checkbox-module__Checkbox___u6_Bq",
+	"Checkbox-input": "Primer_Brand__Checkbox-module__Checkbox-input___NQtTz",
+	"Checkbox-checkmark": "Primer_Brand__Checkbox-module__Checkbox-checkmark___1RiBT",
+	"Checkbox-checkmark-path": "Primer_Brand__Checkbox-module__Checkbox-checkmark-path___NHI_D",
+	"Checkbox--indeterminate": "Primer_Brand__Checkbox-module__Checkbox--indeterminate___TsIkM"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=Checkbox.module.js.map

package/esm/forms/Checkbox/Checkbox.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.module.js","names":[],"sources":["../../../src/forms/Checkbox/Checkbox.module.css"],"sourcesContent":["/*\n * Default Checkbox styles\n */\n.Checkbox-wrapper {\n  position: relative;\n  grid-row: 1;\n}\n\n.Checkbox {\n  align-items: center;\n  background-color: var(--brand-control-checkbox-bg-default);\n  border: solid var(--brand-borderWidth-thick, 1px) var(--brand-control-color-border-default);\n  border-radius: var(--brand-borderRadius-small);\n  cursor: pointer;\n  display: inline-flex;\n  height: 20px;\n  justify-content: center;\n  margin: 3px 0; /* mimic default browser-applied vertical margin */\n  transition: all 0.35s ease-out;\n  width: 20px;\n  outline: 1px solid var(--brand-control-checkbox-bg-default);\n  box-shadow: 0 0 0 3px transparent;\n}\n\n/**\n * Checkbox native input - visually hidden\n */\n.Checkbox-input {\n  border: 0;\n  clip: rect(1px, 1px, 1px, 1px);\n  height: 1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n}\n\n.Checkbox-checkmark {\n  height: 16px;\n  width: 16px;\n}\n\n.Checkbox-checkmark-path {\n  stroke: var(--brand-color-focus);\n  stroke-dashoffset: 111.46px;\n  stroke-dasharray: 111.46px;\n  transition: all 350ms var(--brand-control-animation-easing);\n}\n\n/*\n* Checked state\n*/\n\n.Checkbox-input:checked + .Checkbox,\n.Checkbox--indeterminate {\n  background: var(--brand-control-checkbox-bg-checked);\n  border-color: var(--brand-control-checkbox-border-checked);\n}\n\n.Checkbox--indeterminate .Checkbox-checkmark {\n  fill: var(--brand-control-checkbox-fg-checked);\n}\n\n.Checkbox-input:checked + .Checkbox .Checkbox-checkmark-path,\n.Checkbox--indeterminate .Checkbox-checkmark-path {\n  stroke: var(--brand-control-checkbox-fg-checked);\n  stroke-dashoffset: 0;\n}\n\n.Checkbox-input:focus + .Checkbox {\n  box-shadow: 0 0 0 3px var(--brand-color-focus);\n}\n\n/* TODO: Check with a11y team */\n.Checkbox-input:checked:focus + .Checkbox,\n.Checkbox-input:focus + .Checkbox--indeterminate {\n  border-color: var(--brand-control-checkbox-border-checked);\n}\n\n.Checkbox-input[disabled] + .Checkbox,\n.Checkbox-input[disabled]:checked + .Checkbox {\n  -webkit-text-fill-color: var(--brand-control-color-fg-disabled);\n  color: var(--brand-control-color-fg-disabled);\n  cursor: not-allowed;\n  background-color: var(--brand-control-checkbox-bg-disabled);\n  border-color: var(--brand-control-color-border-disabled);\n  opacity: 1;\n}\n\n@media (forced-colors: active) {\n  .Checkbox-input:focus + .Checkbox {\n    outline: var(--brand-borderWidth-thick) solid Highlight;\n    outline-offset: var(--base-size-2);\n  }\n\n  .Checkbox-input:checked + .Checkbox .Checkbox-checkmark-path {\n    stroke: Highlight;\n  }\n\n  .Checkbox {\n    transition: none;\n  }\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n  .Checkbox,\n  .Checkbox::before,\n  .Checkbox::after,\n  .Checkbox * {\n    animation: none !important;\n    transition: none !important;\n    scroll-behavior: auto !important;\n  }\n}\n"],"mappings":""}

package/esm/forms/Checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Checkbox';
+//# sourceMappingURL=index.d.ts.map

package/esm/forms/Checkbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/forms/Checkbox/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA"}

package/esm/forms/CheckboxGroup/CheckboxGroup.d.ts

@@ -0,0 +1,15 @@
+import { type ControlGroupCaptionProps, type ControlGroupLabelProps, type ControlGroupProps, type ControlGroupValidationProps } from '../ControlGroup';
+export type CheckboxGroupProps = ControlGroupProps;
+export type CheckboxGroupLabelProps = ControlGroupLabelProps;
+export type CheckboxGroupCaptionProps = ControlGroupCaptionProps;
+export type CheckboxGroupValidationProps = ControlGroupValidationProps;
+export declare const CheckboxGroup: import("react").ForwardRefExoticComponent<ControlGroupProps & import("react").RefAttributes<HTMLFieldSetElement>> & {
+    Label: import("react").ForwardRefExoticComponent<{
+        visuallyHidden?: boolean;
+    } & import("react").HTMLAttributes<HTMLLegendElement> & import("react").RefAttributes<HTMLLegendElement>>;
+    Caption: import("react").ForwardRefExoticComponent<ControlGroupCaptionProps & import("react").RefAttributes<HTMLSpanElement>>;
+    Validation: import("react").ForwardRefExoticComponent<{
+        variant: import("..").FormValidationStatus;
+    } & import("react").HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+};
+//# sourceMappingURL=CheckboxGroup.d.ts.map

package/esm/forms/CheckboxGroup/CheckboxGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["../../../src/forms/CheckboxGroup/CheckboxGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,wBAAwB,EAC7B,KAAK,sBAAsB,EAC3B,KAAK,iBAAiB,EACtB,KAAK,2BAA2B,EACjC,MAAM,iBAAiB,CAAA;AAExB,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,CAAA;AAClD,MAAM,MAAM,uBAAuB,GAAG,sBAAsB,CAAA;AAC5D,MAAM,MAAM,yBAAyB,GAAG,wBAAwB,CAAA;AAChE,MAAM,MAAM,4BAA4B,GAAG,2BAA2B,CAAA;AAEtE,eAAO,MAAM,aAAa;;;;;;;;CAAe,CAAA"}

package/esm/forms/CheckboxGroup/CheckboxGroup.js

@@ -0,0 +1,7 @@
+import { ControlGroup as e } from "../ControlGroup/ControlGroup.js";
+//#region src/forms/CheckboxGroup/CheckboxGroup.tsx
+var t = e;
+//#endregion
+export { t as CheckboxGroup };
+
+//# sourceMappingURL=CheckboxGroup.js.map

package/esm/forms/CheckboxGroup/CheckboxGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.js","names":[],"sources":["../../../src/forms/CheckboxGroup/CheckboxGroup.tsx"],"sourcesContent":["import {\n  ControlGroup,\n  type ControlGroupCaptionProps,\n  type ControlGroupLabelProps,\n  type ControlGroupProps,\n  type ControlGroupValidationProps,\n} from '../ControlGroup'\n\nexport type CheckboxGroupProps = ControlGroupProps\nexport type CheckboxGroupLabelProps = ControlGroupLabelProps\nexport type CheckboxGroupCaptionProps = ControlGroupCaptionProps\nexport type CheckboxGroupValidationProps = ControlGroupValidationProps\n\nexport const CheckboxGroup = ControlGroup\n"],"mappings":";;AAaA,IAAa,IAAgB"}

package/esm/forms/CheckboxGroup/index.d.ts

@@ -0,0 +1,2 @@
+export * from './CheckboxGroup';
+//# sourceMappingURL=index.d.ts.map

package/esm/forms/CheckboxGroup/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/forms/CheckboxGroup/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA"}

package/esm/forms/ControlGroup/ControlGroup.d.ts

@@ -0,0 +1,20 @@
+import React, { type HTMLAttributes } from 'react';
+import type { FormValidationStatus } from '..';
+export type ControlGroupProps = HTMLAttributes<HTMLFieldSetElement>;
+export type ControlGroupLabelProps = {
+    visuallyHidden?: boolean;
+} & HTMLAttributes<HTMLLegendElement>;
+export type ControlGroupCaptionProps = HTMLAttributes<HTMLSpanElement>;
+export type ControlGroupValidationProps = {
+    variant: FormValidationStatus;
+} & HTMLAttributes<HTMLSpanElement>;
+export declare const ControlGroup: React.ForwardRefExoticComponent<ControlGroupProps & React.RefAttributes<HTMLFieldSetElement>> & {
+    Label: React.ForwardRefExoticComponent<{
+        visuallyHidden?: boolean;
+    } & React.HTMLAttributes<HTMLLegendElement> & React.RefAttributes<HTMLLegendElement>>;
+    Caption: React.ForwardRefExoticComponent<ControlGroupCaptionProps & React.RefAttributes<HTMLSpanElement>>;
+    Validation: React.ForwardRefExoticComponent<{
+        variant: FormValidationStatus;
+    } & React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+};
+//# sourceMappingURL=ControlGroup.d.ts.map

package/esm/forms/ControlGroup/ControlGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlGroup.d.ts","sourceRoot":"","sources":["../../../src/forms/ControlGroup/ControlGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAkE,KAAK,cAAc,EAAC,MAAM,OAAO,CAAA;AAKjH,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,IAAI,CAAA;AAsB5C,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,mBAAmB,CAAC,CAAA;AA4BnE,MAAM,MAAM,sBAAsB,GAAG;IAAC,cAAc,CAAC,EAAE,OAAO,CAAA;CAAC,GAAG,cAAc,CAAC,iBAAiB,CAAC,CAAA;AAiBnG,MAAM,MAAM,wBAAwB,GAAG,cAAc,CAAC,eAAe,CAAC,CAAA;AAOtE,MAAM,MAAM,2BAA2B,GAAG;IAAC,OAAO,EAAE,oBAAoB,CAAA;CAAC,GAAG,cAAc,CAAC,eAAe,CAAC,CAAA;AAoC3G,eAAO,MAAM,YAAY;;yBA5D8B,OAAO;;;;iBAwBV,oBAAoB;;CAwCtE,CAAA"}

package/esm/forms/ControlGroup/ControlGroup.js

@@ -0,0 +1,74 @@
+import e from "../../node_modules/clsx/dist/clsx.js";
+import { useId as t } from "../../hooks/useId.js";
+import { Text as n } from "../../Text/Text.js";
+import { AlertFillIcon as r, CheckCircleFillIcon as i } from "../../node_modules/@primer/octicons-react/dist/index.esm.js";
+import a from "./ControlGroup.module.js";
+import { Children as o, createContext as s, forwardRef as c, isValidElement as l, useContext as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/forms/ControlGroup/ControlGroup.tsx
+var p = s(null), m = () => {
+	let e = u(p);
+	if (!e) throw Error("useControlGroup must be used within an ControlGroupProvider. Did you forget to wrap your component in a <ControlGroupProvider>?");
+	return e;
+}, h = c(({ className: n, id: r, ...i }, s) => {
+	let c = t(r), u = o.toArray(i.children).some((e) => l(e) && e.type === _), f = o.toArray(i.children).some((e) => l(e) && e.type === v), m = [u && `${c}-caption`, f && `${c}-validation`].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ d(p.Provider, {
+		value: { id: c },
+		children: /* @__PURE__ */ d("fieldset", {
+			ref: s,
+			className: e(a.ControlGroup__container, n),
+			"aria-describedby": m,
+			...i
+		})
+	});
+}), g = c(({ children: t, className: r, visuallyHidden: i, ...o }, s) => /* @__PURE__ */ d("legend", {
+	ref: s,
+	className: e(a.ControlGroup__label, i && "visually-hidden", r),
+	...o,
+	children: /* @__PURE__ */ d(n, {
+		as: "span",
+		weight: "medium",
+		size: "100",
+		children: t
+	})
+})), _ = c(({ className: e, ...t }, r) => {
+	let { id: i } = m();
+	return /* @__PURE__ */ d(n, {
+		as: "span",
+		size: "100",
+		variant: "muted",
+		ref: r,
+		id: `${i}-caption`,
+		className: e,
+		...t
+	});
+}), v = c(({ className: t, variant: o, children: s, ...c }, l) => {
+	let { id: u } = m();
+	return /* @__PURE__ */ f(n, {
+		as: "span",
+		size: "100",
+		ref: l,
+		id: `${u}-validation`,
+		className: e(a.ControlGroup__validation, a["ControlGroup__validation--animate-in"], o === "success" && a["ControlGroup__validation--success"], o === "error" && a["ControlGroup__validation--error"], t),
+		...c,
+		children: [
+			o === "success" && /* @__PURE__ */ d("span", {
+				className: a["ControlGroup__validation-icon--success"],
+				children: /* @__PURE__ */ d(i, {})
+			}),
+			o === "error" && /* @__PURE__ */ d("span", {
+				className: a["ControlGroup__validation-icon--error"],
+				children: /* @__PURE__ */ d(r, {})
+			}),
+			s
+		]
+	});
+}), y = Object.assign(h, {
+	Label: g,
+	Caption: _,
+	Validation: v
+});
+//#endregion
+export { y as ControlGroup };
+
+//# sourceMappingURL=ControlGroup.js.map

package/esm/forms/ControlGroup/ControlGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlGroup.js","names":[],"sources":["../../../src/forms/ControlGroup/ControlGroup.tsx"],"sourcesContent":["import React, {Children, createContext, forwardRef, isValidElement, useContext, type HTMLAttributes} from 'react'\nimport {clsx} from 'clsx'\nimport {AlertFillIcon, CheckCircleFillIcon} from '@primer/octicons-react'\nimport {useId} from '../../hooks/useId'\n\nimport type {FormValidationStatus} from '..'\nimport {Text} from '../..'\nimport styles from './ControlGroup.module.css'\n\ntype ControlGroupContext = {\n  id?: string\n}\n\nconst ControlGroupContext = createContext<ControlGroupContext | null>(null)\n\nconst useControlGroup = () => {\n  const context = useContext(ControlGroupContext)\n\n  if (!context) {\n    throw new Error(\n      'useControlGroup must be used within an ControlGroupProvider. Did you forget to wrap your component in a <ControlGroupProvider>?',\n    )\n  }\n\n  return context\n}\n\nexport type ControlGroupProps = HTMLAttributes<HTMLFieldSetElement>\nconst _ControlGroup = forwardRef<HTMLFieldSetElement, ControlGroupProps>(({className, id, ...props}, ref) => {\n  const uniqueId = useId(id)\n\n  const containsCaption = Children.toArray(props.children).some(\n    child => isValidElement(child) && child.type === ControlGroupCaption,\n  )\n  const containsValidation = Children.toArray(props.children).some(\n    child => isValidElement(child) && child.type === ControlGroupValidation,\n  )\n\n  const describedBy =\n    [containsCaption && `${uniqueId}-caption`, containsValidation && `${uniqueId}-validation`]\n      .filter(Boolean)\n      .join(' ') || undefined\n\n  return (\n    <ControlGroupContext.Provider value={{id: uniqueId}}>\n      <fieldset\n        ref={ref}\n        className={clsx(styles.ControlGroup__container, className)}\n        aria-describedby={describedBy}\n        {...props}\n      />\n    </ControlGroupContext.Provider>\n  )\n})\n\nexport type ControlGroupLabelProps = {visuallyHidden?: boolean} & HTMLAttributes<HTMLLegendElement>\nconst ControlGroupLabel = forwardRef<HTMLLegendElement, ControlGroupLabelProps>(\n  ({children, className, visuallyHidden, ...props}, ref) => {\n    return (\n      <legend\n        ref={ref}\n        className={clsx(styles.ControlGroup__label, visuallyHidden && 'visually-hidden', className)}\n        {...props}\n      >\n        <Text as=\"span\" weight=\"medium\" size=\"100\">\n          {children}\n        </Text>\n      </legend>\n    )\n  },\n)\n\nexport type ControlGroupCaptionProps = HTMLAttributes<HTMLSpanElement>\nconst ControlGroupCaption = forwardRef<HTMLSpanElement, ControlGroupCaptionProps>(({className, ...props}, ref) => {\n  const {id} = useControlGroup()\n\n  return <Text as=\"span\" size=\"100\" variant=\"muted\" ref={ref} id={`${id}-caption`} className={className} {...props} />\n})\n\nexport type ControlGroupValidationProps = {variant: FormValidationStatus} & HTMLAttributes<HTMLSpanElement>\nconst ControlGroupValidation = forwardRef<HTMLSpanElement, ControlGroupValidationProps>(\n  ({className, variant, children, ...props}, ref) => {\n    const {id} = useControlGroup()\n\n    return (\n      <Text\n        as=\"span\"\n        size=\"100\"\n        ref={ref}\n        id={`${id}-validation`}\n        className={clsx(\n          styles.ControlGroup__validation,\n          styles['ControlGroup__validation--animate-in'],\n          variant === 'success' && styles['ControlGroup__validation--success'],\n          variant === 'error' && styles['ControlGroup__validation--error'],\n          className,\n        )}\n        {...props}\n      >\n        {variant === 'success' && (\n          <span className={styles['ControlGroup__validation-icon--success']}>\n            <CheckCircleFillIcon />\n          </span>\n        )}\n        {variant === 'error' && (\n          <span className={styles['ControlGroup__validation-icon--error']}>\n            <AlertFillIcon />\n          </span>\n        )}\n        {children}\n      </Text>\n    )\n  },\n)\n\nexport const ControlGroup = Object.assign(_ControlGroup, {\n  Label: ControlGroupLabel,\n  Caption: ControlGroupCaption,\n  Validation: ControlGroupValidation,\n})\n"],"mappings":";;;;;;;;AAaA,IAAM,IAAsB,EAA0C,KAAK,EAErE,UAAwB;CAC5B,IAAM,IAAU,EAAW,EAAoB;AAE/C,KAAI,CAAC,EACH,OAAU,MACR,kIACD;AAGH,QAAO;GAIH,IAAgB,GAAoD,EAAC,cAAW,OAAI,GAAG,KAAQ,MAAQ;CAC3G,IAAM,IAAW,EAAM,EAAG,EAEpB,IAAkB,EAAS,QAAQ,EAAM,SAAS,CAAC,MACvD,MAAS,EAAe,EAAM,IAAI,EAAM,SAAS,EAClD,EACK,IAAqB,EAAS,QAAQ,EAAM,SAAS,CAAC,MAC1D,MAAS,EAAe,EAAM,IAAI,EAAM,SAAS,EAClD,EAEK,IACJ,CAAC,KAAmB,GAAG,EAAS,WAAW,KAAsB,GAAG,EAAS,aAAa,CACvF,OAAO,QAAQ,CACf,KAAK,IAAI,IAAI,KAAA;AAElB,QACE,kBAAC,EAAoB,UAArB;EAA8B,OAAO,EAAC,IAAI,GAAS;YACjD,kBAAC,YAAD;GACO;GACL,WAAW,EAAK,EAAO,yBAAyB,EAAU;GAC1D,oBAAkB;GAClB,GAAI;GACJ,CAAA;EAC2B,CAAA;EAEjC,EAGI,IAAoB,GACvB,EAAC,aAAU,cAAW,mBAAgB,GAAG,KAAQ,MAE9C,kBAAC,UAAD;CACO;CACL,WAAW,EAAK,EAAO,qBAAqB,KAAkB,mBAAmB,EAAU;CAC3F,GAAI;WAEJ,kBAAC,GAAD;EAAM,IAAG;EAAO,QAAO;EAAS,MAAK;EAClC;EACI,CAAA;CACA,CAAA,CAGd,EAGK,IAAsB,GAAuD,EAAC,cAAW,GAAG,KAAQ,MAAQ;CAChH,IAAM,EAAC,UAAM,GAAiB;AAE9B,QAAO,kBAAC,GAAD;EAAM,IAAG;EAAO,MAAK;EAAM,SAAQ;EAAa;EAAK,IAAI,GAAG,EAAG;EAAsB;EAAW,GAAI;EAAS,CAAA;EACpH,EAGI,IAAyB,GAC5B,EAAC,cAAW,YAAS,aAAU,GAAG,KAAQ,MAAQ;CACjD,IAAM,EAAC,UAAM,GAAiB;AAE9B,QACE,kBAAC,GAAD;EACE,IAAG;EACH,MAAK;EACA;EACL,IAAI,GAAG,EAAG;EACV,WAAW,EACT,EAAO,0BACP,EAAO,yCACP,MAAY,aAAa,EAAO,sCAChC,MAAY,WAAW,EAAO,oCAC9B,EACD;EACD,GAAI;YAZN;GAcG,MAAY,aACX,kBAAC,QAAD;IAAM,WAAW,EAAO;cACtB,kBAAC,GAAD,EAAuB,CAAA;IAClB,CAAA;GAER,MAAY,WACX,kBAAC,QAAD;IAAM,WAAW,EAAO;cACtB,kBAAC,GAAD,EAAiB,CAAA;IACZ,CAAA;GAER;GACI;;EAGZ,EAEY,IAAe,OAAO,OAAO,GAAe;CACvD,OAAO;CACP,SAAS;CACT,YAAY;CACb,CAAC"}

package/esm/forms/ControlGroup/ControlGroup.module-B7ITrHM_.css

@@ -0,0 +1 @@
+.Primer_Brand__ControlGroup-module__ControlGroup__container___k0gGq{gap:var(--base-size-8);font-family:var(--brand-body-fontFamily);font-size:var(--brand-text-size-100);border:none;flex-direction:column;margin:0;padding:0;display:flex}.Primer_Brand__ControlGroup-module__ControlGroup__label___T4WJ_{margin:0;margin-block-end:var(--base-size-8);padding:0}.Primer_Brand__ControlGroup-module__ControlGroup__validation___Mw_kk{gap:var(--base-size-4);font-weight:var(--base-text-weight-medium);display:flex}.Primer_Brand__ControlGroup-module__ControlGroup__validation--success___MyYHt{color:var(--brand-color-success-fg)}.Primer_Brand__ControlGroup-module__ControlGroup__validation--error___LauSr{color:var(--brand-color-danger-fg)}.Primer_Brand__ControlGroup-module__ControlGroup__validation-icon--success___DM0ZI{position:relative;top:-1px}.Primer_Brand__ControlGroup-module__ControlGroup__validation-icon--error___IDxnE{position:relative;top:-.5px}.Primer_Brand__ControlGroup-module__ControlGroup__validation--animate-in___RqXFv{animation:.17s Primer_Brand__ControlGroup-module__ControlGroupValidationFadeIn___XyNBx var(--brand-animation-easing-glide)}.Primer_Brand__ControlGroup-module__ControlGroup__container___k0gGq label{font-weight:var(--base-text-weight-medium)}@keyframes Primer_Brand__ControlGroup-module__ControlGroupValidationFadeIn___XyNBx{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}

package/esm/forms/ControlGroup/ControlGroup.module.js

@@ -0,0 +1,15 @@
+import './ControlGroup.module-B7ITrHM_.css';var e = {
+	ControlGroup__container: "Primer_Brand__ControlGroup-module__ControlGroup__container___k0gGq",
+	ControlGroup__label: "Primer_Brand__ControlGroup-module__ControlGroup__label___T4WJ_",
+	ControlGroup__validation: "Primer_Brand__ControlGroup-module__ControlGroup__validation___Mw_kk",
+	"ControlGroup__validation--success": "Primer_Brand__ControlGroup-module__ControlGroup__validation--success___MyYHt",
+	"ControlGroup__validation--error": "Primer_Brand__ControlGroup-module__ControlGroup__validation--error___LauSr",
+	"ControlGroup__validation-icon--success": "Primer_Brand__ControlGroup-module__ControlGroup__validation-icon--success___DM0ZI",
+	"ControlGroup__validation-icon--error": "Primer_Brand__ControlGroup-module__ControlGroup__validation-icon--error___IDxnE",
+	"ControlGroup__validation--animate-in": "Primer_Brand__ControlGroup-module__ControlGroup__validation--animate-in___RqXFv",
+	ControlGroupValidationFadeIn: "Primer_Brand__ControlGroup-module__ControlGroupValidationFadeIn___XyNBx"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=ControlGroup.module.js.map

package/esm/forms/ControlGroup/ControlGroup.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlGroup.module.js","names":[],"sources":["../../../src/forms/ControlGroup/ControlGroup.module.css"],"sourcesContent":[".ControlGroup__container {\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-size-8);\n  font-family: var(--brand-body-fontFamily);\n  font-size: var(--brand-text-size-100);\n  border: none;\n  margin: 0;\n  padding: 0;\n}\n\n.ControlGroup__label {\n  margin: 0;\n  padding: 0;\n  margin-block-end: var(--base-size-8);\n}\n\n.ControlGroup__validation {\n  display: flex;\n  gap: var(--base-size-4);\n  font-weight: var(--base-text-weight-medium);\n}\n\n.ControlGroup__validation--success {\n  color: var(--brand-color-success-fg);\n}\n\n.ControlGroup__validation--error {\n  color: var(--brand-color-danger-fg);\n}\n\n.ControlGroup__validation-icon--success {\n  position: relative;\n  top: -1px;\n}\n\n.ControlGroup__validation-icon--error {\n  position: relative;\n  top: -0.5px;\n}\n\n.ControlGroup__validation--animate-in {\n  animation: 170ms ControlGroupValidationFadeIn var(--brand-animation-easing-glide);\n}\n\n.ControlGroup__container label {\n  font-weight: var(--base-text-weight-medium);\n}\n\n@keyframes ControlGroupValidationFadeIn {\n  0% {\n    opacity: 0;\n    transform: translateY(-100%);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n"],"mappings":""}

package/esm/forms/ControlGroup/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ControlGroup';
+//# sourceMappingURL=index.d.ts.map

package/esm/forms/ControlGroup/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/forms/ControlGroup/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA"}

package/esm/forms/FormControl/FormControl.d.ts

@@ -0,0 +1,55 @@
+import { PropsWithChildren } from 'react';
+import type { BaseProps } from '../../component-helpers';
+import type { FormValidationStatus, FormInputSizes } from '../';
+export type FormControlProps = BaseProps<HTMLElement> & {
+    /**
+     * Apply a decorative border to the form control.
+     */
+    hasBorder?: boolean;
+    /**
+     * Applies full width styling.
+     */
+    fullWidth?: boolean;
+    /**
+     * A unique identifier for the form control.
+     * This is used to associate the form control with its associated label.
+     * If an id is not provided, a unique id will be generated.
+     */
+    id?: string;
+    /**
+     * Applies required styling to the label and input.
+     */
+    required?: boolean;
+    /**
+     * Alternative sizes for inputs and labels.
+     */
+    size?: FormInputSizes;
+    /**
+     * Provides contextual validation feedback to all children, showing relevant messaging where applicable.
+     */
+    validationStatus?: FormValidationStatus;
+};
+type FormControlLabelProps = {
+    htmlFor?: string;
+    required?: boolean;
+    showRequiredIndicator?: boolean;
+    size?: FormInputSizes;
+    validationStatus?: FormValidationStatus;
+    visuallyHidden?: boolean;
+} & BaseProps<HTMLLabelElement>;
+type FormControlValidationProps = {
+    children: string;
+    validationStatus?: FormValidationStatus;
+} & BaseProps<HTMLSpanElement>;
+type FormControlHintProps = PropsWithChildren<BaseProps<HTMLSpanElement>>;
+/**
+ * FormControl
+ * {@link https://primer.style/brand/components/FormControl/ See usage examples}.
+ */
+export declare const FormControl: (({ children, className, hasBorder, fullWidth, id, required, size, validationStatus, ...rest }: PropsWithChildren<FormControlProps>) => import("react/jsx-runtime").JSX.Element) & {
+    Label: ({ children, className, htmlFor, required, showRequiredIndicator, size, validationStatus, visuallyHidden, ...rest }: PropsWithChildren<FormControlLabelProps>) => import("react/jsx-runtime").JSX.Element;
+    Validation: ({ children, validationStatus, className, ...props }: FormControlValidationProps) => import("react/jsx-runtime").JSX.Element;
+    Hint: ({ className, ...rest }: FormControlHintProps) => import("react/jsx-runtime").JSX.Element;
+};
+export {};
+//# sourceMappingURL=FormControl.d.ts.map

package/esm/forms/FormControl/FormControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../../src/forms/FormControl/FormControl.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAK9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AACtD,OAAO,KAAK,EAAC,oBAAoB,EAAE,cAAc,EAAC,MAAM,KAAK,CAAA;AAW7D,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC,WAAW,CAAC,GAAG;IACtD;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;OAIG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;CACxC,CAAA;AA2JD,KAAK,qBAAqB,GAAG;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;IACvC,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,GAAG,SAAS,CAAC,gBAAgB,CAAC,CAAA;AA4C/B,KAAK,0BAA0B,GAAG;IAChC,QAAQ,EAAE,MAAM,CAAA;IAChB,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;CACxC,GAAG,SAAS,CAAC,eAAe,CAAC,CAAA;AA8B9B,KAAK,oBAAoB,GAAG,iBAAiB,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,CAAA;AAMzE;;;GAGG;AACH,eAAO,MAAM,WAAW,kGAnOrB,iBAAiB,CAAC,gBAAgB,CAAC;gIAwJnC,iBAAiB,CAAC,qBAAqB,CAAC;sEAqCuC,0BAA0B;mCA8B7D,oBAAoB;CAYjE,CAAA"}

package/esm/forms/FormControl/FormControl.js

@@ -0,0 +1,149 @@
+import e from "../../node_modules/clsx/dist/clsx.js";
+import { useId as t } from "../../hooks/useId.js";
+import { Text as n } from "../../Text/Text.js";
+import { AlertFillIcon as r, CheckCircleFillIcon as i } from "../../node_modules/@primer/octicons-react/dist/index.esm.js";
+import { Checkbox as a } from "../Checkbox/Checkbox.js";
+import { Textarea as o } from "../Textarea/Textarea.js";
+import { TextInput as s } from "../TextInput/TextInput.js";
+import { Select as c } from "../Select/Select.js";
+import { Radio as l } from "../Radio/Radio.js";
+import u from "./FormControl.module.js";
+import d from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/forms/FormControl/FormControl.tsx
+var m = ({ children: n, className: r, hasBorder: i, fullWidth: p, id: m, required: v, size: y = "medium", validationStatus: b, ...x }) => {
+	let S = t(m), C = d.Children.toArray(n), w = C.some((e) => d.isValidElement(e) && (e.type === a || e.type === l)), T = C.some((e) => d.isValidElement(e) && e.type === _), E = C.some((e) => d.isValidElement(e) && e.type === g);
+	return /* @__PURE__ */ f("section", {
+		id: `FormControl--${S}`,
+		className: e(u.FormControl, p && u["FormControl--fullWidth"], w && u["FormControl--checkbox"], i && u["FormControl--border"], r),
+		...x,
+		children: d.Children.map(n, (t) => {
+			if (!d.isValidElement(t)) return t;
+			let n = [T && `${S}-hint`, E && `${S}-validation`].filter(Boolean).join(" ") || void 0;
+			if (t.type === s) {
+				let r = t;
+				return d.cloneElement(r, {
+					className: e(r.props.className),
+					id: S,
+					name: r.props.name || S,
+					required: r.props.required || v,
+					validationStatus: r.props.validationStatus || b,
+					fullWidth: p,
+					size: y,
+					"aria-describedby": n
+				});
+			}
+			if (t.type === o) {
+				let r = t;
+				return d.cloneElement(r, {
+					className: e(r.props.className),
+					id: S,
+					name: r.props.name || S,
+					required: r.props.required || v,
+					validationStatus: r.props.validationStatus || b,
+					fullWidth: p,
+					size: y,
+					"aria-describedby": n
+				});
+			}
+			if (t.type === c) {
+				let r = t;
+				return d.cloneElement(r, {
+					className: e(r.props.className),
+					id: S,
+					name: r.props.name || S,
+					required: r.props.required || v,
+					validationStatus: r.props.validationStatus || b,
+					fullWidth: p,
+					size: y,
+					"aria-describedby": n
+				});
+			}
+			if (t.type === a) {
+				let r = t;
+				return d.cloneElement(r, {
+					className: e(r.props.className, u["FormControl-control--checkbox"]),
+					id: S,
+					name: r.props.name || S,
+					required: r.props.required || v,
+					validationStatus: r.props.validationStatus || b,
+					"aria-describedby": n
+				});
+			}
+			if (t.type === l) {
+				let r = t;
+				return d.cloneElement(r, {
+					className: e(w && u["FormControl-control--radio"], r.props.className),
+					id: S,
+					name: r.props.name,
+					required: r.props.required || v,
+					"aria-describedby": n
+				});
+			}
+			if (t.type === h) {
+				let n = t;
+				return d.cloneElement(n, {
+					className: e(w && u["FormControl-label--checkbox"], n.props.className),
+					htmlFor: S,
+					children: n.props.children,
+					required: v,
+					validationStatus: b,
+					size: y,
+					showRequiredIndicator: w ? !1 : n.props.showRequiredIndicator
+				});
+			}
+			if (t.type === g) {
+				let n = t;
+				return d.cloneElement(n, {
+					className: e(w && u["FormControl-validation-checkbox"], n.props.className),
+					validationStatus: b,
+					id: `${S}-validation`
+				});
+			}
+			if (t.type === _) {
+				let e = t;
+				return d.cloneElement(e, { id: `${S}-hint` });
+			}
+			return t;
+		})
+	});
+}, h = ({ children: t, className: n, htmlFor: r, required: i, showRequiredIndicator: a = !0, size: o = "medium", validationStatus: s, visuallyHidden: c, ...l }) => /* @__PURE__ */ p("label", {
+	htmlFor: r,
+	className: e(u["FormControl-label"], s && u[`FormControl-label--${s}`], u[`FormControl-label--${o}`], c && u["FormControl-label--visually-hidden"], n),
+	...l,
+	children: [d.Children.map(t, (t) => d.isValidElement(t) && t.type === _ ? d.cloneElement(t, { className: e(u["FormControl--visible"], t.props.className) }) : t), i && a && /* @__PURE__ */ p("span", {
+		className: u["FormControl-label-required"],
+		"aria-hidden": !0,
+		children: [" ", "*"]
+	})]
+}), g = ({ children: t, validationStatus: a, className: o, ...s }) => /* @__PURE__ */ p(n, {
+	as: "span",
+	size: "100",
+	className: e(u["FormControl-validation"], a && u["FormControl-validation--animate-in"], a && u[`FormControl-validation--${a}`], o),
+	...s,
+	children: [
+		a === "error" && /* @__PURE__ */ f("span", {
+			className: u["FormControl-validation-error-icon"],
+			children: /* @__PURE__ */ f(r, {})
+		}),
+		a === "success" && /* @__PURE__ */ f("span", {
+			className: u["FormControl-validation-success-icon"],
+			children: /* @__PURE__ */ f(i, {})
+		}),
+		t
+	]
+}), _ = ({ className: t, ...r }) => /* @__PURE__ */ f(n, {
+	as: "span",
+	size: "100",
+	variant: "muted",
+	className: e(u["FormControl-hint"], t),
+	...r
+}), v = Object.assign(m, {
+	Label: h,
+	Validation: g,
+	Hint: _
+});
+//#endregion
+export { v as FormControl };
+
+//# sourceMappingURL=FormControl.js.map

package/esm/forms/FormControl/FormControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormControl.js","names":[],"sources":["../../../src/forms/FormControl/FormControl.tsx"],"sourcesContent":["import React, {PropsWithChildren} from 'react'\nimport {useId} from '../../hooks/useId'\nimport {clsx} from 'clsx'\nimport {AlertFillIcon, CheckCircleFillIcon} from '@primer/octicons-react'\n\nimport type {BaseProps} from '../../component-helpers'\nimport type {FormValidationStatus, FormInputSizes} from '../'\n\nimport {Checkbox} from '../Checkbox'\nimport {Select} from '../Select'\nimport {TextInput} from '../TextInput'\nimport {Textarea} from '../Textarea'\nimport {Radio} from '../Radio'\nimport {Text} from '../../Text'\n\nimport styles from './FormControl.module.css'\n\nexport type FormControlProps = BaseProps<HTMLElement> & {\n  /**\n   * Apply a decorative border to the form control.\n   */\n  hasBorder?: boolean\n  /**\n   * Applies full width styling.\n   */\n  fullWidth?: boolean\n  /**\n   * A unique identifier for the form control.\n   * This is used to associate the form control with its associated label.\n   * If an id is not provided, a unique id will be generated.\n   */\n  id?: string\n  /**\n   * Applies required styling to the label and input.\n   */\n  required?: boolean\n  /**\n   * Alternative sizes for inputs and labels.\n   */\n  size?: FormInputSizes\n  /**\n   * Provides contextual validation feedback to all children, showing relevant messaging where applicable.\n   */\n  validationStatus?: FormValidationStatus\n}\n\n/**\n * The Checkbox and the Radio components both use the trick of using a <label> to render the visual control,\n * and visually hiding the <input>. This means that, when you add a FormControl.Label alongside your\n * Checkbox/Radio, the <input> technically has two <label> elements associated with it.\n * That doesn't appear to be a problem (it's valid HTML and NVDA announces it correctly) but it does annoy\n * our Storybook Axe tests because they only seem to look at one of the labels.\n * To fix this, we recommend that the FormControl.Label always appears before the Checkbox/Radio in the DOM,\n * even though it visually appears after the Checkbox/Radio, as this keeps Storybook Axe happy.\n */\n\nconst Root = ({\n  children,\n  className,\n  hasBorder,\n  fullWidth,\n  id,\n  required,\n  size = 'medium',\n  validationStatus,\n  ...rest\n}: PropsWithChildren<FormControlProps>) => {\n  const uniqueId = useId(id)\n  const childrenArr = React.Children.toArray(children)\n\n  const isInlineControl = childrenArr.some(\n    child => React.isValidElement(child) && (child.type === Checkbox || child.type === Radio),\n  )\n\n  const containsHint = childrenArr.some(child => React.isValidElement(child) && child.type === FormControlHint)\n  const containsValidation = childrenArr.some(\n    child => React.isValidElement(child) && child.type === FormControlValidation,\n  )\n\n  return (\n    <section\n      id={`FormControl--${uniqueId}`}\n      className={clsx(\n        styles.FormControl,\n        fullWidth && styles[`FormControl--fullWidth`],\n        isInlineControl && styles['FormControl--checkbox'],\n        hasBorder && styles['FormControl--border'],\n        className,\n      )}\n      {...rest}\n    >\n      {React.Children.map(children, child => {\n        if (!React.isValidElement(child)) return child\n\n        const describedBy =\n          [containsHint && `${uniqueId}-hint`, containsValidation && `${uniqueId}-validation`]\n            .filter(Boolean)\n            .join(' ') || undefined\n\n        if (child.type === TextInput) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof TextInput>>\n          return React.cloneElement(element, {\n            className: clsx(element.props.className),\n            id: uniqueId,\n            name: element.props.name || uniqueId,\n            required: element.props.required || required,\n            validationStatus: element.props.validationStatus || validationStatus,\n            fullWidth,\n            size,\n            'aria-describedby': describedBy,\n          })\n        }\n\n        if (child.type === Textarea) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof Textarea>>\n          return React.cloneElement(element, {\n            className: clsx(element.props.className),\n            id: uniqueId,\n            name: element.props.name || uniqueId,\n            required: element.props.required || required,\n            validationStatus: element.props.validationStatus || validationStatus,\n            fullWidth,\n            size,\n            'aria-describedby': describedBy,\n          })\n        }\n\n        if (child.type === Select) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof Select>>\n          return React.cloneElement(element, {\n            className: clsx(element.props.className),\n            id: uniqueId,\n            name: element.props.name || uniqueId,\n            required: element.props.required || required,\n            validationStatus: element.props.validationStatus || validationStatus,\n            fullWidth,\n            size,\n            'aria-describedby': describedBy,\n          })\n        }\n\n        if (child.type === Checkbox) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof Checkbox>>\n          return React.cloneElement(element, {\n            className: clsx(element.props.className, styles['FormControl-control--checkbox']),\n            id: uniqueId,\n            name: element.props.name || uniqueId,\n            required: element.props.required || required,\n            validationStatus: element.props.validationStatus || validationStatus,\n            'aria-describedby': describedBy,\n          })\n        }\n\n        if (child.type === Radio) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof Radio>>\n          return React.cloneElement(element, {\n            className: clsx(isInlineControl && styles['FormControl-control--radio'], element.props.className),\n            id: uniqueId,\n            name: element.props.name,\n            required: element.props.required || required,\n            'aria-describedby': describedBy,\n          })\n        }\n\n        if (child.type === FormControlLabel) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof FormControlLabel>>\n          return React.cloneElement(element, {\n            className: clsx(isInlineControl && styles['FormControl-label--checkbox'], element.props.className),\n            htmlFor: uniqueId,\n            children: element.props.children,\n            required,\n            validationStatus,\n            size,\n            showRequiredIndicator: isInlineControl ? false : element.props.showRequiredIndicator,\n          })\n        }\n\n        if (child.type === FormControlValidation) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof FormControlValidation>>\n          return React.cloneElement(element, {\n            className: clsx(isInlineControl && styles['FormControl-validation-checkbox'], element.props.className),\n            validationStatus,\n            id: `${uniqueId}-validation`,\n          })\n        }\n\n        if (child.type === FormControlHint) {\n          const element = child as React.ReactElement<React.ComponentProps<typeof FormControlHint>>\n          return React.cloneElement(element, {\n            id: `${uniqueId}-hint`,\n          })\n        }\n\n        return child\n      })}\n    </section>\n  )\n}\n\ntype FormControlLabelProps = {\n  htmlFor?: string\n  required?: boolean\n  showRequiredIndicator?: boolean\n  size?: FormInputSizes\n  validationStatus?: FormValidationStatus\n  visuallyHidden?: boolean\n} & BaseProps<HTMLLabelElement>\n\nconst FormControlLabel = ({\n  children,\n  className,\n  htmlFor,\n  required,\n  showRequiredIndicator = true,\n  size = 'medium',\n  validationStatus,\n  visuallyHidden,\n  ...rest\n}: PropsWithChildren<FormControlLabelProps>) => {\n  return (\n    <label\n      htmlFor={htmlFor}\n      className={clsx(\n        styles['FormControl-label'],\n        validationStatus && styles[`FormControl-label--${validationStatus}`],\n        styles[`FormControl-label--${size}`],\n        visuallyHidden && styles['FormControl-label--visually-hidden'],\n        className,\n      )}\n      {...rest}\n    >\n      {React.Children.map(children, child => {\n        if (React.isValidElement<FormControlHintProps>(child) && child.type === FormControlHint) {\n          return React.cloneElement(child, {\n            className: clsx(styles['FormControl--visible'], child.props.className),\n          })\n        }\n        return child\n      })}\n\n      {required && showRequiredIndicator && (\n        <span className={styles['FormControl-label-required']} aria-hidden>\n          {' '}\n          *\n        </span>\n      )}\n    </label>\n  )\n}\n\ntype FormControlValidationProps = {\n  children: string\n  validationStatus?: FormValidationStatus\n} & BaseProps<HTMLSpanElement>\n\nconst FormControlValidation = ({children, validationStatus, className, ...props}: FormControlValidationProps) => {\n  return (\n    <Text\n      as=\"span\"\n      size=\"100\"\n      className={clsx(\n        styles['FormControl-validation'],\n        validationStatus && styles['FormControl-validation--animate-in'],\n        validationStatus && styles[`FormControl-validation--${validationStatus}`],\n        className,\n      )}\n      {...props}\n    >\n      {validationStatus === 'error' && (\n        <span className={styles['FormControl-validation-error-icon']}>\n          <AlertFillIcon />\n        </span>\n      )}\n      {validationStatus === 'success' && (\n        <span className={styles['FormControl-validation-success-icon']}>\n          <CheckCircleFillIcon />\n        </span>\n      )}\n      {children}\n    </Text>\n  )\n}\n\ntype FormControlHintProps = PropsWithChildren<BaseProps<HTMLSpanElement>>\n\nconst FormControlHint = ({className, ...rest}: FormControlHintProps) => {\n  return <Text as=\"span\" size=\"100\" variant=\"muted\" className={clsx(styles['FormControl-hint'], className)} {...rest} />\n}\n\n/**\n * FormControl\n * {@link https://primer.style/brand/components/FormControl/ See usage examples}.\n */\nexport const FormControl = Object.assign(Root, {\n  Label: FormControlLabel,\n  Validation: FormControlValidation,\n  Hint: FormControlHint,\n})\n"],"mappings":"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"}

package/esm/forms/FormControl/FormControl.module-UQqb_zPR.css

@@ -0,0 +1 @@
+.Primer_Brand__FormControl-module__FormControl___xyCI6{font-family:var(--brand-body-fontFamily);gap:var(--base-size-8);flex-direction:column;display:inline-flex}.Primer_Brand__FormControl-module__FormControl--fullWidth____kgvY{width:100%}.Primer_Brand__FormControl-module__FormControl--checkbox___bF4ig{grid-template-columns:auto 1fr;display:grid}.Primer_Brand__FormControl-module__FormControl--border___JkgNP{border:1px solid var(--brand-control-color-border-default);border-radius:var(--brand-borderRadius-medium);padding:var(--base-size-12)}.Primer_Brand__FormControl-module__FormControl-label____oJE0{color:var(--brand-color-text-default);font-weight:var(--base-text-weight-medium);font-family:var(--brand-body-fontFamily)}.Primer_Brand__FormControl-module__FormControl-label--visually-hidden___1ZVMo{clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.Primer_Brand__FormControl-module__FormControl-label--medium___bj84g{letter-spacing:var(--brand-text-letterSpacing-100);font-size:var(--brand-text-size-100);line-height:var(--brand-text-lineHeight-100)}.Primer_Brand__FormControl-module__FormControl-label--large___o1TMW{letter-spacing:var(--brand-text-letterSpacing-300);font-size:var(--brand-text-size-300);line-height:var(--brand-text-lineHeight-300)}.Primer_Brand__FormControl-module__FormControl-label--checkbox___xZxFK{cursor:pointer;font-size:var(--brand-text-size-100);font-weight:var(--base-text-weight-medium);line-height:var(--base-size-24);width:100%;position:relative;top:2px}.Primer_Brand__FormControl-module__FormControl-control--radio___ml5zt{margin:2px 0 0}.Primer_Brand__FormControl-module__FormControl-hint___DmKlt{grid-column:1/3;display:block}.Primer_Brand__FormControl-module__FormControl-validation___GOPld{gap:var(--base-size-4);display:flex}.Primer_Brand__FormControl-module__FormControl-validation--success___kOKNY{color:var(--brand-color-success-fg)}.Primer_Brand__FormControl-module__FormControl-validation--error___T5KVh{color:var(--brand-color-danger-fg)}.Primer_Brand__FormControl-module__FormControl-validation-success-icon___zPbVN{position:relative;top:-1px}.Primer_Brand__FormControl-module__FormControl-validation-error-icon___hijkD{position:relative;top:-.5px}.Primer_Brand__FormControl-module__FormControl-validation--animate-in___bQToQ{animation:.17s cubic-bezier(.44,.74,.36,1) Primer_Brand__FormControl-module__FormControlValidationFadeIn___tj0TP}@keyframes Primer_Brand__FormControl-module__FormControlValidationFadeIn___tj0TP{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}.Primer_Brand__FormControl-module__FormControl-validation-checkbox___o5dVo{grid-column:1/3}