npm - @commercetools/nimbus - Versions diffs - 3.2.0 → 3.4.0 - Mend

@commercetools/nimbus 3.2.0 → 3.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1806) hide show

package/dist/chunks/form-action-bar-DhmjijBw.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"form-action-bar-DhmjijBw.cjs.js","names":[],"sources":["../../src/patterns/actions/form-action-bar/intl/en.ts","../../src/patterns/actions/form-action-bar/intl/de.ts","../../src/patterns/actions/form-action-bar/intl/es.ts","../../src/patterns/actions/form-action-bar/intl/fr-FR.ts","../../src/patterns/actions/form-action-bar/intl/pt-BR.ts","../../src/patterns/actions/form-action-bar/form-action-bar.messages.ts","../../src/patterns/actions/form-action-bar/form-action-bar.tsx"],"sourcesContent":["/**\n * Pre-compiled en messages for FormActionBar\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default {\n ariaLabel: `Form actions`,\n cancel: `Cancel`,\n delete: `Delete`,\n save: `Save`,\n};\n","/**\n * Pre-compiled de messages for FormActionBar\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default {\n ariaLabel: `Formular-Aktionen`,\n cancel: `Abbrechen`,\n delete: `Löschen`,\n save: `Speichern`,\n};\n","/**\n * Pre-compiled es messages for FormActionBar\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default {\n ariaLabel: `Crear acciones`,\n cancel: `Cancelar`,\n delete: `Eliminar`,\n save: `Guardar`,\n};\n","/**\n * Pre-compiled fr-FR messages for FormActionBar\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default {\n ariaLabel: `Actions du formulaire`,\n cancel: `Annuler`,\n delete: `Supprimer`,\n save: `Enregistrer`,\n};\n","/**\n * Pre-compiled pt-BR messages for FormActionBar\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default {\n ariaLabel: `Ações de formulários`,\n cancel: `Cancelar`,\n delete: `Excluir`,\n save: `Salvar`,\n};\n","/**\n * Pre-compiled localized messages for FormActionBar component\n *\n * Generated by scripts/generate-dictionaries.ts\n * DO NOT EDIT MANUALLY\n *\n * @see https://react-spectrum.adobe.com/react-aria/internationalization.html\n */\n\nimport {\n type LocalizedString,\n type LocalizedStrings,\n} from \"@internationalized/string\";\nimport { normalizeMessages } from \"../../../utils/normalize-messages\";\n\n// Pre-compiled message functions\nimport formActionBarMessages_en from \"./intl/en\";\nimport formActionBarMessages_de from \"./intl/de\";\nimport formActionBarMessages_es from \"./intl/es\";\nimport formActionBarMessages_fr from \"./intl/fr-FR\";\nimport formActionBarMessages_pt from \"./intl/pt-BR\";\n\n// Raw LocalizedStrings object for use with useLocalizedStringFormatter hook\nexport const formActionBarMessagesStrings: LocalizedStrings<\n string,\n LocalizedString\n> = {\n en: normalizeMessages(formActionBarMessages_en),\n de: normalizeMessages(formActionBarMessages_de),\n es: normalizeMessages(formActionBarMessages_es),\n \"fr-FR\": normalizeMessages(formActionBarMessages_fr),\n \"pt-BR\": normalizeMessages(formActionBarMessages_pt),\n} as LocalizedStrings<string, LocalizedString>;\n\n/**\n * Available message keys for FormActionBar component\n */\nexport type FormActionBarMessageKey =\n \"ariaLabel\" | \"cancel\" | \"delete\" | \"save\";\n","import { Button } from \"@/components/button/button\";\nimport { Group } from \"@/components/group/group\";\nimport { LoadingSpinner } from \"@/components/loading-spinner/loading-spinner\";\nimport { useLocalizedStringFormatter } from \"@/hooks\";\nimport { formActionBarMessagesStrings } from \"./form-action-bar.messages\";\nimport type { FormActionBarProps } from \"./form-action-bar.types\";\n\n/**\n * # FormActionBar\n *\n * A pattern providing save / cancel / optional delete buttons for form footers.\n *\n * Works inside any footer slot: `DefaultPage.Footer`, `ModalPage.Footer`,\n * `Drawer.Footer`, `Dialog.Footer`. Replaces separate form-page wrappers.\n *\n * @example\n * ```tsx\n * <FormActionBar\n * onSave={handleSave}\n * onCancel={handleCancel}\n * onDelete={handleDelete}\n * isSaveDisabled={!isDirty}\n * isSaveLoading={isSaving}\n * />\n * ```\n */\nexport const FormActionBar = ({\n onSave,\n onCancel,\n onDelete,\n saveLabel,\n cancelLabel,\n deleteLabel,\n isSaveDisabled = false,\n isSaveLoading = false,\n isDeleteLoading = false,\n \"aria-label\": ariaLabel,\n cancelSlot,\n buttonSize,\n}: FormActionBarProps) => {\n const msg = useLocalizedStringFormatter(formActionBarMessagesStrings);\n const isBusy = isSaveLoading || isDeleteLoading;\n\n const resolvedSaveLabel = saveLabel ?? msg.format(\"save\");\n const resolvedCancelLabel = cancelLabel ?? msg.format(\"cancel\");\n const resolvedDeleteLabel = deleteLabel ?? msg.format(\"delete\");\n const resolvedAriaLabel = ariaLabel ?? msg.format(\"ariaLabel\");\n\n return (\n <Group aria-label={resolvedAriaLabel} gap=\"300\">\n {onDelete && (\n <Button\n variant=\"solid\"\n colorPalette=\"critical\"\n size={buttonSize}\n isDisabled={isBusy}\n onPress={onDelete}\n data-slot=\"delete\"\n >\n {resolvedDeleteLabel}\n {isDeleteLoading && <LoadingSpinner ml=\"100\" size=\"2xs\" />}\n </Button>\n )}\n <Button\n variant=\"outline\"\n size={buttonSize}\n isDisabled={isBusy}\n onPress={onCancel}\n slot={cancelSlot}\n data-slot=\"cancel\"\n >\n {resolvedCancelLabel}\n </Button>\n <Button\n variant=\"solid\"\n colorPalette=\"primary\"\n size={buttonSize}\n isDisabled={isSaveDisabled || isBusy}\n onPress={onSave}\n data-slot=\"save\"\n >\n {resolvedSaveLabel}\n {isSaveLoading && <LoadingSpinner ml=\"100\" size=\"2xs\" />}\n </Button>\n </Group>\n );\n};\n\nFormActionBar.displayName = \"FormActionBar\";\n"],"mappings":"qNKuBA,IAAa,EAGT,CACF,GAAI,EAAA,EAAkB,CLpBtB,UAAW,eACX,OAAQ,SACR,OAAQ,SACR,KAAM,MKiBgB,CAAwB,EAC9C,GAAI,EAAA,EAAkB,CJrBtB,UAAW,oBACX,OAAQ,YACR,OAAQ,UACR,KAAM,WIkBgB,CAAwB,EAC9C,GAAI,EAAA,EAAkB,CHtBtB,UAAW,iBACX,OAAQ,WACR,OAAQ,WACR,KAAM,SGmBgB,CAAwB,EAC9C,QAAS,EAAA,EAAkB,CFvB3B,UAAW,wBACX,OAAQ,UACR,OAAQ,YACR,KAAM,aEoBqB,CAAwB,EACnD,QAAS,EAAA,EAAkB,CDxB3B,UAAW,uBACX,OAAQ,WACR,OAAQ,UACR,KAAM,QCqBqB,CAAwB,CACrD,ECNa,GAAiB,CAC5B,SACA,WACA,WACA,YACA,cACA,cACA,iBAAiB,GACjB,gBAAgB,GAChB,kBAAkB,GAClB,aAAc,EACd,aACA,gBACwB,CACxB,IAAM,EAAM,EAAA,EAA4B,CAA4B,EAC9D,EAAS,GAAiB,EAE1B,EAAoB,GAAa,EAAI,OAAO,MAAM,EAClD,EAAsB,GAAe,EAAI,OAAO,QAAQ,EACxD,EAAsB,GAAe,EAAI,OAAO,QAAQ,EAG9D,OACE,EAAA,EAAA,KAAA,CAAC,EAAA,EAAD,CAAO,aAHiB,GAAa,EAAI,OAAO,WAAW,EAGrB,IAAI,eAA1C,CACG,IACC,EAAA,EAAA,KAAA,CAAC,EAAA,EAAD,CACE,QAAQ,QACR,aAAa,WACb,KAAM,EACN,WAAY,EACZ,QAAS,EACT,YAAU,kBANZ,CAQG,EACA,IAAmB,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CAAgB,GAAG,MAAM,KAAK,KAAO,CAAA,CACnD,KAEV,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CACE,QAAQ,UACR,KAAM,EACN,WAAY,EACZ,QAAS,EACT,KAAM,EACN,YAAU,kBAET,CACK,CAAA,GACR,EAAA,EAAA,KAAA,CAAC,EAAA,EAAD,CACE,QAAQ,QACR,aAAa,UACb,KAAM,EACN,WAAY,GAAkB,EAC9B,QAAS,EACT,YAAU,gBANZ,CAQG,EACA,IAAiB,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CAAgB,GAAG,MAAM,KAAK,KAAO,CAAA,CACjD,GACH,GAEX,EAEA,EAAc,YAAc"}

package/dist/chunks/form-dialog-CLrL718p.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ const e=require("./useControlledState-C-8MHM79.cjs.js"),t=require("./loading-spinner-p_cYuGNg.cjs.js"),n=require("./normalize-messages-BMq9y_ae.cjs.js"),r=require("./dialog-CwCG4NKh.cjs.js"),i=require("./button-D6f5OX0h.cjs.js");let a=require("react/jsx-runtime");var o={en:n.t({cancel:`Cancel`,save:`Save`}),de:n.t({cancel:`Abbrechen`,save:`Speichern`}),es:n.t({cancel:`Cancelar`,save:`Guardar`}),"fr-FR":n.t({cancel:`Annuler`,save:`Enregistrer`}),"pt-BR":n.t({cancel:`Cancelar`,save:`Salvar`})},s=({title:s,children:c,onSave:l,onCancel:u,isOpen:d,defaultOpen:f,onOpenChange:p,saveLabel:m,cancelLabel:h,isSaveDisabled:g=!1,isSaveLoading:_=!1,"aria-label":v})=>{let y=n.n(o),[b,x]=e.t(d,f??!1,p),S=m??y.format(`save`),C=h??y.format(`cancel`);return(0,a.jsx)(r.t.Root,{isOpen:b,onOpenChange:e=>{e\|\|u(),x(e)},"aria-label":v,isDismissable:!_,isKeyboardDismissDisabled:_,scrollBehavior:`inside`,children:(0,a.jsxs)(r.t.Content,{children:[(0,a.jsxs)(r.t.Header,{children:[(0,a.jsx)(r.t.Title,{children:s}),(0,a.jsx)(r.t.CloseTrigger,{isDisabled:_})]}),(0,a.jsx)(r.t.Body,{children:c}),(0,a.jsxs)(r.t.Footer,{children:[(0,a.jsx)(i.t,{variant:`outline`,isDisabled:_,onPress:()=>{u(),x(!1)},children:C}),(0,a.jsxs)(i.t,{variant:`solid`,colorPalette:`primary`,isDisabled:g\|\|_,onPress:async()=>{let e=l();if(e instanceof Promise)try{await e,x(!1)}catch{}else x(!1)},children:[S,_&&(0,a.jsx)(t.t,{ml:`100`,size:`2xs`})]})]})]})})};s.displayName=`FormDialog`,Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return s}});
2	+ //# sourceMappingURL=form-dialog-CLrL718p.cjs.js.map

package/dist/chunks/form-dialog-CLrL718p.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"form-dialog-CLrL718p.cjs.js","names":[],"sources":["../../src/patterns/dialogs/form-dialog/intl/en.ts","../../src/patterns/dialogs/form-dialog/intl/de.ts","../../src/patterns/dialogs/form-dialog/intl/es.ts","../../src/patterns/dialogs/form-dialog/intl/fr-FR.ts","../../src/patterns/dialogs/form-dialog/intl/pt-BR.ts","../../src/patterns/dialogs/form-dialog/form-dialog.messages.ts","../../src/patterns/dialogs/form-dialog/form-dialog.tsx"],"sourcesContent":["/**\n * Pre-compiled en messages for FormDialog\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default { cancel: `Cancel`, save: `Save` };\n","/**\n * Pre-compiled de messages for FormDialog\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default { cancel: `Abbrechen`, save: `Speichern` };\n","/**\n * Pre-compiled es messages for FormDialog\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default { cancel: `Cancelar`, save: `Guardar` };\n","/**\n * Pre-compiled fr-FR messages for FormDialog\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default { cancel: `Annuler`, save: `Enregistrer` };\n","/**\n * Pre-compiled pt-BR messages for FormDialog\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default { cancel: `Cancelar`, save: `Salvar` };\n","/**\n * Pre-compiled localized messages for FormDialog component\n *\n * Generated by scripts/generate-dictionaries.ts\n * DO NOT EDIT MANUALLY\n *\n * @see https://react-spectrum.adobe.com/react-aria/internationalization.html\n */\n\nimport {\n type LocalizedString,\n type LocalizedStrings,\n} from \"@internationalized/string\";\nimport { normalizeMessages } from \"../../../utils/normalize-messages\";\n\n// Pre-compiled message functions\nimport formDialogMessages_en from \"./intl/en\";\nimport formDialogMessages_de from \"./intl/de\";\nimport formDialogMessages_es from \"./intl/es\";\nimport formDialogMessages_fr from \"./intl/fr-FR\";\nimport formDialogMessages_pt from \"./intl/pt-BR\";\n\n// Raw LocalizedStrings object for use with useLocalizedStringFormatter hook\nexport const formDialogMessagesStrings: LocalizedStrings<\n string,\n LocalizedString\n> = {\n en: normalizeMessages(formDialogMessages_en),\n de: normalizeMessages(formDialogMessages_de),\n es: normalizeMessages(formDialogMessages_es),\n \"fr-FR\": normalizeMessages(formDialogMessages_fr),\n \"pt-BR\": normalizeMessages(formDialogMessages_pt),\n} as LocalizedStrings<string, LocalizedString>;\n\n/**\n * Available message keys for FormDialog component\n */\nexport type FormDialogMessageKey = \"cancel\" | \"save\";\n","import { useControlledState } from \"react-stately/useControlledState\";\nimport { Button } from \"@/components/button/button\";\nimport { Dialog } from \"@/components/dialog/dialog\";\nimport { LoadingSpinner } from \"@/components/loading-spinner/loading-spinner\";\nimport { useLocalizedStringFormatter } from \"@/hooks\";\nimport { formDialogMessagesStrings } from \"./form-dialog.messages\";\nimport type { FormDialogProps } from \"./form-dialog.types\";\n\n/**\n * # FormDialog\n *\n * A pre-composed save/cancel dialog pattern built on top of the Nimbus\n * `Dialog` and `Button` primitives, shaped for hosting an editable form\n * in the body. Exposes a flat API (`title`, `children`, `onSave`,\n * `onCancel`, plus optional state, label, and accessibility props) for\n * the common case of editing data inside a modal.\n *\n * Close affordances: clicking the cancel button, the X button in the\n * header, pressing Escape, or clicking the overlay all invoke\n * `onCancel` and `onOpenChange(false)`. Clicking the save button\n * invokes `onSave` and then closes — synchronously for `void` returns,\n * or after the returned `Promise` fulfills for async saves; rejected\n * promises leave the dialog open so the consumer can surface\n * validation errors. The save path never fires `onCancel`.\n *\n * When `isSaveLoading` is `true` the entire dialog is locked: the save\n * button shows a spinner and is disabled, the cancel button is\n * disabled, and Escape / overlay click / close-button click are all\n * suppressed.\n *\n * The pattern does not wrap `children` in a native `<form>` element.\n * Consumers wanting Enter-to-submit semantics or browser-native\n * validation should wrap their fields in\n * `<form onSubmit={handleSubmit}>` inside `children` and call `onSave`\n * from `handleSubmit`.\n *\n * @example\n * ```tsx\n * const [isOpen, setIsOpen] = useState(false);\n *\n * <FormDialog\n * title=\"Edit profile\"\n * isOpen={isOpen}\n * onOpenChange={setIsOpen}\n * onSave={handleSave}\n * onCancel={() => setIsOpen(false)}\n * isSaveDisabled={!isDirty}\n * >\n * <TextInput label=\"Display name\" value={name} onChange={setName} />\n * </FormDialog>\n * ```\n */\nexport const FormDialog = ({\n title,\n children,\n onSave,\n onCancel,\n isOpen,\n defaultOpen,\n onOpenChange,\n saveLabel,\n cancelLabel,\n isSaveDisabled = false,\n isSaveLoading = false,\n \"aria-label\": ariaLabel,\n}: FormDialogProps) => {\n const msg = useLocalizedStringFormatter(formDialogMessagesStrings);\n\n // Internalize open state so we can close the dialog from our cancel\n // and save buttons without relying on `slot=\"close\"` (which races\n // its `onOpenChange` notification against the button's `onPress`\n // handler and double-fires the cancel callback).\n const [open, setOpen] = useControlledState<boolean>(\n isOpen,\n defaultOpen ?? false,\n onOpenChange\n );\n\n const resolvedSaveLabel = saveLabel ?? msg.format(\"save\");\n const resolvedCancelLabel = cancelLabel ?? msg.format(\"cancel\");\n\n const handleSave = async () => {\n const result = onSave();\n // If the consumer returns a Promise, wait for it to settle before\n // closing — otherwise the dialog vanishes synchronously and the\n // consumer's `isSaveLoading` lockout never paints. On rejection we\n // stay open so the consumer can surface validation errors and let\n // the user retry.\n if (result instanceof Promise) {\n try {\n await result;\n setOpen(false);\n } catch {\n // intentional: stay open on rejection\n }\n } else {\n setOpen(false);\n }\n };\n\n const handleCancelButton = () => {\n onCancel();\n setOpen(false);\n };\n\n // `Dialog.Root` invokes its `onOpenChange` for dismiss paths not\n // driven by an explicit `onPress` in this component — Escape,\n // overlay click, and the close-button X. Our cancel and save buttons\n // close via `setOpen(false)` directly and do NOT route through this\n // callback. The X close button is owned by the pattern via\n // `isDisabled={isSaveLoading}`, so this handler does not need to\n // re-check the loading flag for it.\n const handleAmbientOpenChange = (newOpen: boolean) => {\n if (!newOpen) {\n onCancel();\n }\n setOpen(newOpen);\n };\n\n return (\n <Dialog.Root\n isOpen={open}\n onOpenChange={handleAmbientOpenChange}\n aria-label={ariaLabel}\n isDismissable={!isSaveLoading}\n isKeyboardDismissDisabled={isSaveLoading}\n scrollBehavior=\"inside\"\n >\n <Dialog.Content>\n <Dialog.Header>\n <Dialog.Title>{title}</Dialog.Title>\n <Dialog.CloseTrigger isDisabled={isSaveLoading} />\n </Dialog.Header>\n <Dialog.Body>{children}</Dialog.Body>\n <Dialog.Footer>\n <Button\n variant=\"outline\"\n isDisabled={isSaveLoading}\n onPress={handleCancelButton}\n >\n {resolvedCancelLabel}\n </Button>\n <Button\n variant=\"solid\"\n colorPalette=\"primary\"\n isDisabled={isSaveDisabled || isSaveLoading}\n onPress={handleSave}\n >\n {resolvedSaveLabel}\n {isSaveLoading && <LoadingSpinner ml=\"100\" size=\"2xs\" />}\n </Button>\n </Dialog.Footer>\n </Dialog.Content>\n </Dialog.Root>\n );\n};\n\nFormDialog.displayName = \"FormDialog\";\n"],"mappings":"wQKuBA,IAAa,EAGT,CACF,GAAI,EAAA,EAAkB,CLrBP,OAAQ,SAAU,KAAM,MKqBjB,CAAqB,EAC3C,GAAI,EAAA,EAAkB,CJtBP,OAAQ,YAAa,KAAM,WIsBpB,CAAqB,EAC3C,GAAI,EAAA,EAAkB,CHvBP,OAAQ,WAAY,KAAM,SGuBnB,CAAqB,EAC3C,QAAS,EAAA,EAAkB,CFxBZ,OAAQ,UAAW,KAAM,aEwBb,CAAqB,EAChD,QAAS,EAAA,EAAkB,CDzBZ,OAAQ,WAAY,KAAM,QCyBd,CAAqB,CAClD,ECoBa,GAAc,CACzB,QACA,WACA,SACA,WACA,SACA,cACA,eACA,YACA,cACA,iBAAiB,GACjB,gBAAgB,GAChB,aAAc,KACO,CACrB,IAAM,EAAM,EAAA,EAA4B,CAAyB,EAM3D,CAAC,EAAM,GAAW,EAAA,EACtB,EACA,GAAe,GACf,CACF,EAEM,EAAoB,GAAa,EAAI,OAAO,MAAM,EAClD,EAAsB,GAAe,EAAI,OAAO,QAAQ,EAwC9D,OACE,EAAA,EAAA,IAAA,CAAC,EAAA,EAAO,KAAR,CACE,OAAQ,EACR,aAV6B,GAAqB,CAC/C,GACH,EAAS,EAEX,EAAQ,CAAO,CACjB,EAMI,aAAY,EACZ,cAAe,CAAC,EAChB,0BAA2B,EAC3B,eAAe,mBAEf,EAAA,EAAA,KAAA,CAAC,EAAA,EAAO,QAAR,CAAA,SAAA,EACE,EAAA,EAAA,KAAA,CAAC,EAAA,EAAO,OAAR,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,EAAA,EAAO,MAAR,CAAA,SAAe,CAAoB,CAAA,GACnC,EAAA,EAAA,IAAA,CAAC,EAAA,EAAO,aAAR,CAAqB,WAAY,CAAgB,CAAA,CACpC,CAAA,CAAA,GACf,EAAA,EAAA,IAAA,CAAC,EAAA,EAAO,KAAR,CAAc,UAAsB,CAAA,GACpC,EAAA,EAAA,KAAA,CAAC,EAAA,EAAO,OAAR,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CACE,QAAQ,UACR,WAAY,EACZ,YAtCuB,CAC/B,EAAS,EACT,EAAQ,EAAK,CACf,WAqCW,CACK,CAAA,GACR,EAAA,EAAA,KAAA,CAAC,EAAA,EAAD,CACE,QAAQ,QACR,aAAa,UACb,WAAY,GAAkB,EAC9B,QAAS,SAjEY,CAC7B,IAAM,EAAS,EAAO,EAMtB,GAAI,aAAkB,QACpB,GAAI,CACF,MAAM,EACN,EAAQ,EAAK,CACf,MAAQ,CAER,MAEA,EAAQ,EAAK,CAEjB,WA4CQ,CAMG,EACA,IAAiB,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CAAgB,GAAG,MAAM,KAAK,KAAO,CAAA,CACjD,GACK,CAAA,CAAA,CACD,CAAA,CAAA,CACL,CAAA,CAEjB,EAEA,EAAW,YAAc"}

package/dist/chunks/form-dialog-D86jNeIZ.esm.js ADDED Viewed

@@ -0,0 +1,74 @@
+import { t as e } from "./useControlledState-DH1pZlhP.esm.js";
+import { t } from "./loading-spinner-DZoySVDH.esm.js";
+import { n, t as r } from "./normalize-messages-B_f-0I5n.esm.js";
+import { t as i } from "./dialog-lxgomHvu.esm.js";
+import { t as a } from "./button-DyM-iqBq.esm.js";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#endregion
+//#region src/patterns/dialogs/form-dialog/form-dialog.messages.ts
+var c = {
+	en: r({
+		cancel: "Cancel",
+		save: "Save"
+	}),
+	de: r({
+		cancel: "Abbrechen",
+		save: "Speichern"
+	}),
+	es: r({
+		cancel: "Cancelar",
+		save: "Guardar"
+	}),
+	"fr-FR": r({
+		cancel: "Annuler",
+		save: "Enregistrer"
+	}),
+	"pt-BR": r({
+		cancel: "Cancelar",
+		save: "Salvar"
+	})
+}, l = ({ title: r, children: l, onSave: u, onCancel: d, isOpen: f, defaultOpen: p, onOpenChange: m, saveLabel: h, cancelLabel: g, isSaveDisabled: _ = !1, isSaveLoading: v = !1, "aria-label": y }) => {
+	let b = n(c), [x, S] = e(f, p ?? !1, m), C = h ?? b.format("save"), w = g ?? b.format("cancel");
+	return /* @__PURE__ */ o(i.Root, {
+		isOpen: x,
+		onOpenChange: (e) => {
+			e || d(), S(e);
+		},
+		"aria-label": y,
+		isDismissable: !v,
+		isKeyboardDismissDisabled: v,
+		scrollBehavior: "inside",
+		children: /* @__PURE__ */ s(i.Content, { children: [
+			/* @__PURE__ */ s(i.Header, { children: [/* @__PURE__ */ o(i.Title, { children: r }), /* @__PURE__ */ o(i.CloseTrigger, { isDisabled: v })] }),
+			/* @__PURE__ */ o(i.Body, { children: l }),
+			/* @__PURE__ */ s(i.Footer, { children: [/* @__PURE__ */ o(a, {
+				variant: "outline",
+				isDisabled: v,
+				onPress: () => {
+					d(), S(!1);
+				},
+				children: w
+			}), /* @__PURE__ */ s(a, {
+				variant: "solid",
+				colorPalette: "primary",
+				isDisabled: _ || v,
+				onPress: async () => {
+					let e = u();
+					if (e instanceof Promise) try {
+						await e, S(!1);
+					} catch {}
+					else S(!1);
+				},
+				children: [C, v && /* @__PURE__ */ o(t, {
+					ml: "100",
+					size: "2xs"
+				})]
+			})] })
+		] })
+	});
+};
+l.displayName = "FormDialog";
+//#endregion
+export { l as t };
+//# sourceMappingURL=form-dialog-D86jNeIZ.esm.js.map

package/dist/chunks/form-dialog-D86jNeIZ.esm.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"form-dialog-D86jNeIZ.esm.js","names":[],"sources":["../../src/patterns/dialogs/form-dialog/intl/en.ts","../../src/patterns/dialogs/form-dialog/intl/de.ts","../../src/patterns/dialogs/form-dialog/intl/es.ts","../../src/patterns/dialogs/form-dialog/intl/fr-FR.ts","../../src/patterns/dialogs/form-dialog/intl/pt-BR.ts","../../src/patterns/dialogs/form-dialog/form-dialog.messages.ts","../../src/patterns/dialogs/form-dialog/form-dialog.tsx"],"sourcesContent":["/**\n * Pre-compiled en messages for FormDialog\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default { cancel: `Cancel`, save: `Save` };\n","/**\n * Pre-compiled de messages for FormDialog\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default { cancel: `Abbrechen`, save: `Speichern` };\n","/**\n * Pre-compiled es messages for FormDialog\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default { cancel: `Cancelar`, save: `Guardar` };\n","/**\n * Pre-compiled fr-FR messages for FormDialog\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default { cancel: `Annuler`, save: `Enregistrer` };\n","/**\n * Pre-compiled pt-BR messages for FormDialog\n * Generated by @internationalized/string-compiler\n * DO NOT EDIT MANUALLY\n */\n\nexport default { cancel: `Cancelar`, save: `Salvar` };\n","/**\n * Pre-compiled localized messages for FormDialog component\n *\n * Generated by scripts/generate-dictionaries.ts\n * DO NOT EDIT MANUALLY\n *\n * @see https://react-spectrum.adobe.com/react-aria/internationalization.html\n */\n\nimport {\n type LocalizedString,\n type LocalizedStrings,\n} from \"@internationalized/string\";\nimport { normalizeMessages } from \"../../../utils/normalize-messages\";\n\n// Pre-compiled message functions\nimport formDialogMessages_en from \"./intl/en\";\nimport formDialogMessages_de from \"./intl/de\";\nimport formDialogMessages_es from \"./intl/es\";\nimport formDialogMessages_fr from \"./intl/fr-FR\";\nimport formDialogMessages_pt from \"./intl/pt-BR\";\n\n// Raw LocalizedStrings object for use with useLocalizedStringFormatter hook\nexport const formDialogMessagesStrings: LocalizedStrings<\n string,\n LocalizedString\n> = {\n en: normalizeMessages(formDialogMessages_en),\n de: normalizeMessages(formDialogMessages_de),\n es: normalizeMessages(formDialogMessages_es),\n \"fr-FR\": normalizeMessages(formDialogMessages_fr),\n \"pt-BR\": normalizeMessages(formDialogMessages_pt),\n} as LocalizedStrings<string, LocalizedString>;\n\n/**\n * Available message keys for FormDialog component\n */\nexport type FormDialogMessageKey = \"cancel\" | \"save\";\n","import { useControlledState } from \"react-stately/useControlledState\";\nimport { Button } from \"@/components/button/button\";\nimport { Dialog } from \"@/components/dialog/dialog\";\nimport { LoadingSpinner } from \"@/components/loading-spinner/loading-spinner\";\nimport { useLocalizedStringFormatter } from \"@/hooks\";\nimport { formDialogMessagesStrings } from \"./form-dialog.messages\";\nimport type { FormDialogProps } from \"./form-dialog.types\";\n\n/**\n * # FormDialog\n *\n * A pre-composed save/cancel dialog pattern built on top of the Nimbus\n * `Dialog` and `Button` primitives, shaped for hosting an editable form\n * in the body. Exposes a flat API (`title`, `children`, `onSave`,\n * `onCancel`, plus optional state, label, and accessibility props) for\n * the common case of editing data inside a modal.\n *\n * Close affordances: clicking the cancel button, the X button in the\n * header, pressing Escape, or clicking the overlay all invoke\n * `onCancel` and `onOpenChange(false)`. Clicking the save button\n * invokes `onSave` and then closes — synchronously for `void` returns,\n * or after the returned `Promise` fulfills for async saves; rejected\n * promises leave the dialog open so the consumer can surface\n * validation errors. The save path never fires `onCancel`.\n *\n * When `isSaveLoading` is `true` the entire dialog is locked: the save\n * button shows a spinner and is disabled, the cancel button is\n * disabled, and Escape / overlay click / close-button click are all\n * suppressed.\n *\n * The pattern does not wrap `children` in a native `<form>` element.\n * Consumers wanting Enter-to-submit semantics or browser-native\n * validation should wrap their fields in\n * `<form onSubmit={handleSubmit}>` inside `children` and call `onSave`\n * from `handleSubmit`.\n *\n * @example\n * ```tsx\n * const [isOpen, setIsOpen] = useState(false);\n *\n * <FormDialog\n * title=\"Edit profile\"\n * isOpen={isOpen}\n * onOpenChange={setIsOpen}\n * onSave={handleSave}\n * onCancel={() => setIsOpen(false)}\n * isSaveDisabled={!isDirty}\n * >\n * <TextInput label=\"Display name\" value={name} onChange={setName} />\n * </FormDialog>\n * ```\n */\nexport const FormDialog = ({\n title,\n children,\n onSave,\n onCancel,\n isOpen,\n defaultOpen,\n onOpenChange,\n saveLabel,\n cancelLabel,\n isSaveDisabled = false,\n isSaveLoading = false,\n \"aria-label\": ariaLabel,\n}: FormDialogProps) => {\n const msg = useLocalizedStringFormatter(formDialogMessagesStrings);\n\n // Internalize open state so we can close the dialog from our cancel\n // and save buttons without relying on `slot=\"close\"` (which races\n // its `onOpenChange` notification against the button's `onPress`\n // handler and double-fires the cancel callback).\n const [open, setOpen] = useControlledState<boolean>(\n isOpen,\n defaultOpen ?? false,\n onOpenChange\n );\n\n const resolvedSaveLabel = saveLabel ?? msg.format(\"save\");\n const resolvedCancelLabel = cancelLabel ?? msg.format(\"cancel\");\n\n const handleSave = async () => {\n const result = onSave();\n // If the consumer returns a Promise, wait for it to settle before\n // closing — otherwise the dialog vanishes synchronously and the\n // consumer's `isSaveLoading` lockout never paints. On rejection we\n // stay open so the consumer can surface validation errors and let\n // the user retry.\n if (result instanceof Promise) {\n try {\n await result;\n setOpen(false);\n } catch {\n // intentional: stay open on rejection\n }\n } else {\n setOpen(false);\n }\n };\n\n const handleCancelButton = () => {\n onCancel();\n setOpen(false);\n };\n\n // `Dialog.Root` invokes its `onOpenChange` for dismiss paths not\n // driven by an explicit `onPress` in this component — Escape,\n // overlay click, and the close-button X. Our cancel and save buttons\n // close via `setOpen(false)` directly and do NOT route through this\n // callback. The X close button is owned by the pattern via\n // `isDisabled={isSaveLoading}`, so this handler does not need to\n // re-check the loading flag for it.\n const handleAmbientOpenChange = (newOpen: boolean) => {\n if (!newOpen) {\n onCancel();\n }\n setOpen(newOpen);\n };\n\n return (\n <Dialog.Root\n isOpen={open}\n onOpenChange={handleAmbientOpenChange}\n aria-label={ariaLabel}\n isDismissable={!isSaveLoading}\n isKeyboardDismissDisabled={isSaveLoading}\n scrollBehavior=\"inside\"\n >\n <Dialog.Content>\n <Dialog.Header>\n <Dialog.Title>{title}</Dialog.Title>\n <Dialog.CloseTrigger isDisabled={isSaveLoading} />\n </Dialog.Header>\n <Dialog.Body>{children}</Dialog.Body>\n <Dialog.Footer>\n <Button\n variant=\"outline\"\n isDisabled={isSaveLoading}\n onPress={handleCancelButton}\n >\n {resolvedCancelLabel}\n </Button>\n <Button\n variant=\"solid\"\n colorPalette=\"primary\"\n isDisabled={isSaveDisabled || isSaveLoading}\n onPress={handleSave}\n >\n {resolvedSaveLabel}\n {isSaveLoading && <LoadingSpinner ml=\"100\" size=\"2xs\" />}\n </Button>\n </Dialog.Footer>\n </Dialog.Content>\n </Dialog.Root>\n );\n};\n\nFormDialog.displayName = \"FormDialog\";\n"],"mappings":";;;;;;;;AKuBA,IAAa,IAGT;CACF,IAAI,EAAkB;ELrBP,QAAQ;EAAU,MAAM;CKqBjB,CAAqB;CAC3C,IAAI,EAAkB;EJtBP,QAAQ;EAAa,MAAM;CIsBpB,CAAqB;CAC3C,IAAI,EAAkB;EHvBP,QAAQ;EAAY,MAAM;CGuBnB,CAAqB;CAC3C,SAAS,EAAkB;EFxBZ,QAAQ;EAAW,MAAM;CEwBb,CAAqB;CAChD,SAAS,EAAkB;EDzBZ,QAAQ;EAAY,MAAM;CCyBd,CAAqB;AAClD,GCoBa,KAAc,EACzB,UACA,aACA,WACA,aACA,WACA,gBACA,iBACA,cACA,gBACA,oBAAiB,IACjB,mBAAgB,IAChB,cAAc,QACO;CACrB,IAAM,IAAM,EAA4B,CAAyB,GAM3D,CAAC,GAAM,KAAW,EACtB,GACA,KAAe,IACf,CACF,GAEM,IAAoB,KAAa,EAAI,OAAO,MAAM,GAClD,IAAsB,KAAe,EAAI,OAAO,QAAQ;CAwC9D,OACE,kBAAC,EAAO,MAAR;EACE,QAAQ;EACR,eAV6B,MAAqB;GAIpD,AAHK,KACH,EAAS,GAEX,EAAQ,CAAO;EACjB;EAMI,cAAY;EACZ,eAAe,CAAC;EAChB,2BAA2B;EAC3B,gBAAe;YAEf,kBAAC,EAAO,SAAR,EAAA,UAAA;GACE,kBAAC,EAAO,QAAR,EAAA,UAAA,CACE,kBAAC,EAAO,OAAR,EAAA,UAAe,EAAoB,CAAA,GACnC,kBAAC,EAAO,cAAR,EAAqB,YAAY,EAAgB,CAAA,CACpC,EAAA,CAAA;GACf,kBAAC,EAAO,MAAR,EAAc,YAAsB,CAAA;GACpC,kBAAC,EAAO,QAAR,EAAA,UAAA,CACE,kBAAC,GAAD;IACE,SAAQ;IACR,YAAY;IACZ,eAtCuB;KAE/B,AADA,EAAS,GACT,EAAQ,EAAK;IACf;cAqCW;GACK,CAAA,GACR,kBAAC,GAAD;IACE,SAAQ;IACR,cAAa;IACb,YAAY,KAAkB;IAC9B,SAAS,YAjEY;KAC7B,IAAM,IAAS,EAAO;KAMtB,IAAI,aAAkB,SACpB,IAAI;MAEF,AADA,MAAM,GACN,EAAQ,EAAK;KACf,QAAQ,CAER;UAEA,EAAQ,EAAK;IAEjB;cA4CQ,CAMG,GACA,KAAiB,kBAAC,GAAD;KAAgB,IAAG;KAAM,MAAK;IAAO,CAAA,CACjD;KACK,EAAA,CAAA;EACD,EAAA,CAAA;CACL,CAAA;AAEjB;AAEA,EAAW,cAAc"}

package/dist/chunks/form-field-B5H98u7s.esm.js ADDED Viewed

@@ -0,0 +1,231 @@
+import { t as e } from "./useObjectRef-B_3vY5-Q.esm.js";
+import { t } from "./useField-BODQaE6H.esm.js";
+import { n, t as r, u as i } from "./Dialog-Dy3vyR1i.esm.js";
+import { t as a } from "./icon-button-CyhrlrIv.esm.js";
+import { t as o } from "./box-CZyqYgLL.esm.js";
+import { t as s } from "./merge-refs-C1GcH9iY.esm.js";
+import { Children as c, cloneElement as l, createContext as u, isValidElement as d, useContext as f, useEffect as p, useMemo as m, useRef as h, useState as g } from "react";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import { ErrorOutline as y, HelpOutline as b } from "@commercetools/nimbus-icons";
+import { createSlotRecipeContext as x } from "@chakra-ui/react/styled-system";
+//#region src/components/form-field/components/form-field.context.tsx
+var S = u({
+	context: {
+		label: null,
+		description: null,
+		error: null,
+		info: null
+	},
+	setContext: () => {},
+	inputProps: {}
+}), { withProvider: C, withContext: w } = x({ key: "nimbusFormField" }), T = C("div", "root"), E = w("div", "label"), D = w("div", "input"), O = w("div", "description"), k = w("div", "error"), A = w("div", "popover"), j = function({ ref: c, id: l, isInvalid: u, isRequired: d, isDisabled: f, isReadOnly: x, children: C, ...w }) {
+	let D = e(s(h(null), c)), [j, M] = g({
+		label: null,
+		description: null,
+		error: null,
+		info: null,
+		isInvalid: u,
+		isRequired: d,
+		isDisabled: f,
+		isReadOnly: x
+	}), { labelProps: N, fieldProps: P, descriptionProps: F, errorMessageProps: I } = t(m(() => {
+		let e = {
+			id: l,
+			description: j.description,
+			errorMessage: j.error
+		};
+		return j.label ? e.label = j.label : (e["aria-label"] = "empty-label", e["aria-labelledby"] = "empty-label"), e;
+	}, [
+		l,
+		j.description,
+		j.error,
+		j.label
+	]));
+	p(() => {
+		M((e) => ({
+			...e,
+			isInvalid: u,
+			isRequired: d,
+			isDisabled: f,
+			isReadOnly: x
+		}));
+	}, [
+		u,
+		d,
+		f,
+		x
+	]);
+	let L = m(() => ({
+		...P,
+		isInvalid: u,
+		isRequired: d,
+		isDisabled: f,
+		isReadOnly: x
+	}), [
+		P,
+		u,
+		d,
+		f,
+		x
+	]), R = m(() => ({
+		context: j,
+		setContext: M,
+		inputProps: L
+	}), [j, L]);
+	return /* @__PURE__ */ _(S.Provider, {
+		value: R,
+		children: /* @__PURE__ */ v(T, {
+			ref: D,
+			...w,
+			children: [
+				j.label && /* @__PURE__ */ v(E, {
+					...j.labelSlotProps,
+					children: [/* @__PURE__ */ v("label", {
+						...N,
+						"data-required": d,
+						children: [j.label, d && /* @__PURE__ */ _("sup", {
+							"aria-hidden": "true",
+							children: "*"
+						})]
+					}), j.info && /* @__PURE__ */ v(r, { children: [/* @__PURE__ */ _(o, {
+						as: "span",
+						display: "inline-block",
+						position: "relative",
+						width: "1ch",
+						height: "1ch",
+						ml: "200",
+						children: /* @__PURE__ */ _(o, {
+							as: "span",
+							display: "inline-flex",
+							position: "absolute",
+							top: "50%",
+							right: "50%",
+							transform: "translate(50%, -50%)",
+							children: /* @__PURE__ */ _(a, {
+								"aria-label": "__MORE INFO",
+								size: "2xs",
+								colorPalette: "info",
+								variant: "link",
+								children: /* @__PURE__ */ _(b, {})
+							})
+						})
+					}), /* @__PURE__ */ _(i, { children: /* @__PURE__ */ _(A, {
+						asChild: !0,
+						children: /* @__PURE__ */ _(n, { children: /* @__PURE__ */ _(o, {
+							p: "300",
+							children: j.info
+						}) })
+					}) })] })]
+				}),
+				j.description && /* @__PURE__ */ _(O, {
+					...F,
+					...j.descriptionSlotProps,
+					children: j.description
+				}),
+				u && j.error && /* @__PURE__ */ v(k, {
+					...I,
+					...j.errorSlotProps,
+					children: [/* @__PURE__ */ _(o, {
+						as: y,
+						display: "inline-flex",
+						boxSize: "400",
+						flexShrink: "0",
+						mt: "50"
+					}), j.error]
+				}),
+				C
+			]
+		})
+	});
+};
+j.displayName = "FormField.Root";
+//#endregion
+//#region src/components/form-field/components/form-field.label.tsx
+var M = ({ children: e, ...t }) => {
+	let { setContext: n } = f(S);
+	return p(() => (n((n) => ({
+		...n,
+		label: e,
+		labelSlotProps: t
+	})), () => {
+		n((e) => ({
+			...e,
+			label: null,
+			labelSlotProps: void 0
+		}));
+	}), [e, n]), null;
+};
+M.displayName = "FormField.Label";
+//#endregion
+//#region src/components/form-field/components/form-field.input.tsx
+var N = ({ children: e, ...t }) => {
+	let { inputProps: n } = f(S);
+	return /* @__PURE__ */ _(D, {
+		...t,
+		children: c.map(e, (e) => d(e) ? l(e, n) : e)
+	});
+};
+N.displayName = "FormField.Input";
+//#endregion
+//#region src/components/form-field/components/form-field.description.tsx
+var P = ({ children: e, ...t }) => {
+	let { setContext: n } = f(S);
+	return p(() => (n((n) => ({
+		...n,
+		description: e,
+		descriptionSlotProps: t
+	})), () => {
+		n((e) => ({
+			...e,
+			description: null,
+			descriptionSlotProps: void 0
+		}));
+	}), [e, n]), null;
+};
+P.displayName = "FormField.Description";
+//#endregion
+//#region src/components/form-field/components/form-field.error.tsx
+var F = ({ children: e, ...t }) => {
+	let { setContext: n } = f(S);
+	return p(() => (n((n) => ({
+		...n,
+		error: e,
+		errorSlotProps: t
+	})), () => {
+		n((e) => ({
+			...e,
+			error: null,
+			errorSlotProps: void 0
+		}));
+	}), [e, n]), null;
+};
+F.displayName = "FormField.Error";
+//#endregion
+//#region src/components/form-field/components/form-field.info-box.tsx
+var I = ({ children: e }) => {
+	let { setContext: t } = f(S);
+	return p(() => (t((t) => ({
+		...t,
+		info: e
+	})), () => {
+		t((e) => ({
+			...e,
+			info: null
+		}));
+	}), [e, t]), null;
+};
+I.displayName = "FormField.InfoBox";
+//#endregion
+//#region src/components/form-field/form-field.tsx
+var L = {
+	Root: j,
+	Label: M,
+	Input: N,
+	Description: P,
+	Error: F,
+	InfoBox: I
+};
+//#endregion
+export { N as a, P as i, I as n, M as o, F as r, j as s, L as t };
+//# sourceMappingURL=form-field-B5H98u7s.esm.js.map

package/dist/chunks/form-field-B5H98u7s.esm.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"form-field-B5H98u7s.esm.js","names":[],"sources":["../../src/components/form-field/components/form-field.context.tsx","../../src/components/form-field/form-field.slots.tsx","../../src/components/form-field/components/form-field.root.tsx","../../src/components/form-field/components/form-field.label.tsx","../../src/components/form-field/components/form-field.input.tsx","../../src/components/form-field/components/form-field.description.tsx","../../src/components/form-field/components/form-field.error.tsx","../../src/components/form-field/components/form-field.info-box.tsx","../../src/components/form-field/form-field.tsx"],"sourcesContent":["import { createContext, type ReactNode } from \"react\";\nimport type {\n FormFieldDescriptionSlotProps,\n FormFieldErrorSlotProps,\n FormFieldLabelSlotProps,\n} from \"../form-field.types\";\n\nexport type FormFieldInputProps = Record<string, unknown>;\n\nexport type FormFieldContextPayloadType = {\n label: ReactNode;\n labelSlotProps?: FormFieldLabelSlotProps;\n description: ReactNode;\n descriptionSlotProps?: FormFieldDescriptionSlotProps;\n error: ReactNode;\n errorSlotProps?: FormFieldErrorSlotProps;\n info: ReactNode;\n isInvalid?: boolean;\n isRequired?: boolean;\n isDisabled?: boolean;\n isReadOnly?: boolean;\n};\n\nexport type FormFieldContextType = {\n context: FormFieldContextPayloadType;\n setContext: React.Dispatch<React.SetStateAction<FormFieldContextPayloadType>>;\n inputProps: FormFieldInputProps;\n};\n\nexport const FormFieldContext = createContext<FormFieldContextType>({\n context: {\n label: null,\n description: null,\n error: null,\n info: null,\n },\n setContext: () => {},\n inputProps: {},\n});\n","import { createSlotRecipeContext } from \"@chakra-ui/react/styled-system\";\nimport type {\n FormFieldRootSlotProps,\n FormFieldLabelSlotProps,\n FormFieldInputSlotProps,\n FormFieldDescriptionSlotProps,\n FormFieldErrorSlotProps,\n FormFieldPopoverSlotProps,\n} from \"./form-field.types\";\n\nconst { withProvider, withContext } = createSlotRecipeContext({\n key: \"nimbusFormField\",\n});\n\n// Root slot\nexport const FormFieldRootSlot = withProvider<\n HTMLDivElement,\n FormFieldRootSlotProps\n>(\"div\", \"root\");\n\n// Label Slot\nexport const FormFieldLabelSlot = withContext<\n HTMLDivElement,\n FormFieldLabelSlotProps\n>(\"div\", \"label\");\n\n// Input Slot\nexport const FormFieldInputSlot = withContext<\n HTMLDivElement,\n FormFieldInputSlotProps\n>(\"div\", \"input\");\n\n// Description Slot\nexport const FormFieldDescriptionSlot = withContext<\n HTMLDivElement,\n FormFieldDescriptionSlotProps\n>(\"div\", \"description\");\n\n// Error Slot\nexport const FormFieldErrorSlot = withContext<\n HTMLDivElement,\n FormFieldErrorSlotProps\n>(\"div\", \"error\");\n\n// Error Slot\nexport const FormFieldPopoverSlot = withContext<\n HTMLDivElement,\n FormFieldPopoverSlotProps\n>(\"div\", \"popover\");\n","import { useEffect, useMemo, useState, useRef } from \"react\";\nimport type { FormFieldProps } from \"../form-field.types\";\nimport { useField, useObjectRef } from \"react-aria\";\nimport { mergeRefs } from \"@/utils\";\nimport {\n FormFieldContext,\n type FormFieldContextPayloadType,\n} from \"./form-field.context\";\nimport {\n FormFieldDescriptionSlot,\n FormFieldErrorSlot,\n FormFieldLabelSlot,\n FormFieldPopoverSlot,\n FormFieldRootSlot,\n} from \"../form-field.slots\";\nimport { Dialog, DialogTrigger, Popover } from \"react-aria-components\";\nimport { Box, IconButton } from \"@/components\";\nimport { ErrorOutline, HelpOutline } from \"@commercetools/nimbus-icons\";\n\n/**\n * # FormField.Root\n *\n * displays miscellaneous inputs in a FormField context\n *\n * @supportsStyleProps\n */\nexport const FormFieldRoot = function FormFieldRoot({\n ref: forwardedRef,\n id,\n isInvalid,\n isRequired,\n isDisabled,\n isReadOnly,\n children,\n ...props\n}: FormFieldProps) {\n const localRef = useRef<HTMLDivElement>(null);\n const ref = useObjectRef(mergeRefs(localRef, forwardedRef));\n const [context, setContext] = useState<FormFieldContextPayloadType>({\n label: null,\n description: null,\n error: null,\n info: null,\n isInvalid,\n isRequired,\n isDisabled,\n isReadOnly,\n });\n\n const useFieldArgs: Parameters<typeof useField>[0] = useMemo(() => {\n const args: Parameters<typeof useField>[0] = {\n id,\n description: context.description,\n errorMessage: context.error,\n };\n\n if (context.label) {\n args.label = context.label;\n } else {\n // Context will always start out null, so we need to stub out some aria attributes\n // FIXME: This is a hack to get the form field to work, but it's not the best solution\n // FIXME: We should find a better way to handle this by redesigning the FormField component's structure\n args[\"aria-label\"] = \"empty-label\";\n args[\"aria-labelledby\"] = \"empty-label\";\n }\n\n return args;\n }, [id, context.description, context.error, context.label]);\n\n const { labelProps, fieldProps, descriptionProps, errorMessageProps } =\n useField(useFieldArgs);\n\n useEffect(() => {\n setContext((prevContext) => ({\n ...prevContext,\n isInvalid,\n isRequired,\n isDisabled,\n isReadOnly,\n }));\n }, [isInvalid, isRequired, isDisabled, isReadOnly]);\n\n const inputProps = useMemo(\n () => ({\n ...fieldProps,\n isInvalid,\n isRequired,\n isDisabled,\n isReadOnly,\n }),\n [fieldProps, isInvalid, isRequired, isDisabled, isReadOnly]\n );\n\n const contextValue = useMemo(\n () => ({ context, setContext, inputProps }),\n [context, inputProps]\n );\n\n return (\n <FormFieldContext.Provider value={contextValue}>\n <FormFieldRootSlot ref={ref} {...props}>\n {context.label && (\n <FormFieldLabelSlot {...context.labelSlotProps}>\n <label {...labelProps} data-required={isRequired}>\n {context.label}\n {isRequired && <sup aria-hidden=\"true\">*</sup>}\n </label>\n {context.info && (\n <DialogTrigger>\n <Box\n as=\"span\"\n display=\"inline-block\"\n position=\"relative\"\n width=\"1ch\"\n height=\"1ch\"\n ml=\"200\"\n >\n <Box\n as=\"span\"\n display=\"inline-flex\"\n position=\"absolute\"\n top=\"50%\"\n right=\"50%\"\n transform=\"translate(50%, -50%)\"\n >\n <IconButton\n aria-label=\"__MORE INFO\"\n size=\"2xs\"\n colorPalette=\"info\"\n variant=\"link\"\n >\n <HelpOutline />\n </IconButton>\n </Box>\n </Box>\n <Popover>\n <FormFieldPopoverSlot asChild>\n <Dialog>\n <Box p=\"300\">{context.info}</Box>\n </Dialog>\n </FormFieldPopoverSlot>\n </Popover>\n </DialogTrigger>\n )}\n </FormFieldLabelSlot>\n )}\n {context.description && (\n <FormFieldDescriptionSlot\n {...descriptionProps}\n {...context.descriptionSlotProps}\n >\n {context.description}\n </FormFieldDescriptionSlot>\n )}\n {isInvalid && context.error && (\n <FormFieldErrorSlot\n {...errorMessageProps}\n {...context.errorSlotProps}\n >\n <Box\n as={ErrorOutline}\n display=\"inline-flex\"\n boxSize=\"400\"\n flexShrink=\"0\"\n mt=\"50\"\n />\n {context.error}\n </FormFieldErrorSlot>\n )}\n {children}\n </FormFieldRootSlot>\n </FormFieldContext.Provider>\n );\n};\n\nFormFieldRoot.displayName = \"FormField.Root\";\n","import { useContext, useEffect } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\nimport type { FormFieldLabelSlotProps } from \"../form-field.types\";\n\n/**\n * FormField.Label - The label element for the form field\n *\n * @supportsStyleProps\n */\n// TODO: should this be wrapped in react-aria's `LabelContext` provider?, e.g. https://react-spectrum.adobe.com/react-aria/TextField.html#custom-children\nexport const FormFieldLabel = ({\n children,\n ...labelSlotProps\n}: FormFieldLabelSlotProps) => {\n const { setContext } = useContext(FormFieldContext);\n\n useEffect(() => {\n setContext((prevContext) => ({\n ...prevContext,\n label: children,\n labelSlotProps,\n }));\n\n // Cleanup: clear label when component unmounts\n return () => {\n setContext((prevContext) => ({\n ...prevContext,\n label: null,\n labelSlotProps: undefined,\n }));\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [children, setContext]);\n\n return null;\n};\n\nFormFieldLabel.displayName = \"FormField.Label\";\n","import { Children, cloneElement, isValidElement, useContext } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\nimport type { FormFieldInputSlotProps } from \"../form-field.types\";\nimport { FormFieldInputSlot } from \"../form-field.slots\";\n\n/**\n * FormField.Input - The input wrapper element for the form field\n *\n * Renders children directly (with injected field props) to avoid\n * the state-based indirection that causes cursor position issues\n * on controlled inputs.\n *\n * @supportsStyleProps\n */\nexport const FormFieldInput = ({\n children,\n ...inputSlotProps\n}: FormFieldInputSlotProps) => {\n const { inputProps } = useContext(FormFieldContext);\n\n return (\n <FormFieldInputSlot {...inputSlotProps}>\n {Children.map(children, (child) => {\n if (isValidElement(child)) {\n return cloneElement(child, inputProps);\n }\n return child;\n })}\n </FormFieldInputSlot>\n );\n};\n\nFormFieldInput.displayName = \"FormField.Input\";\n","import { useContext, useEffect } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\nimport type { FormFieldDescriptionSlotProps } from \"../form-field.types\";\n\n/**\n * FormField.Description - The description element for the form field\n *\n * @supportsStyleProps\n */\nexport const FormFieldDescription = ({\n children,\n ...descriptionSlotProps\n}: FormFieldDescriptionSlotProps) => {\n const { setContext } = useContext(FormFieldContext);\n\n useEffect(() => {\n setContext((prevContext) => ({\n ...prevContext,\n description: children,\n descriptionSlotProps,\n }));\n\n // Cleanup: clear description when component unmounts\n return () => {\n setContext((prevContext) => ({\n ...prevContext,\n description: null,\n descriptionSlotProps: undefined,\n }));\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [children, setContext]);\n\n return null;\n};\n\nFormFieldDescription.displayName = \"FormField.Description\";\n","import { useContext, useEffect } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\nimport type { FormFieldErrorSlotProps } from \"../form-field.types\";\n\n/**\n * FormField.Error - The error message element for the form field\n *\n * @supportsStyleProps\n */\nexport const FormFieldError = ({\n children,\n ...errorSlotProps\n}: FormFieldErrorSlotProps) => {\n const { setContext } = useContext(FormFieldContext);\n\n useEffect(() => {\n setContext((prevContext) => ({\n ...prevContext,\n error: children,\n errorSlotProps,\n }));\n\n // Cleanup: clear error when component unmounts\n return () => {\n setContext((prevContext) => ({\n ...prevContext,\n error: null,\n errorSlotProps: undefined,\n }));\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [children, setContext]);\n\n return null;\n};\n\nFormFieldError.displayName = \"FormField.Error\";\n","import { useContext, useEffect, type ReactNode } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\n\ntype FormFieldInfoBoxProps = {\n /**\n * The content to display in the InfoBox\n */\n children: ReactNode;\n};\n\n/**\n * FormField.InfoBox - The info box popover content for the form field\n *\n * @supportsStyleProps\n */\nexport const FormFieldInfoBox = ({ children }: FormFieldInfoBoxProps) => {\n const { setContext } = useContext(FormFieldContext);\n\n useEffect(() => {\n setContext((prevContext) => ({\n ...prevContext,\n info: children,\n }));\n\n // Cleanup: clear info when component unmounts\n return () => {\n setContext((prevContext) => ({\n ...prevContext,\n info: null,\n }));\n };\n }, [children, setContext]);\n\n return null;\n};\n\nFormFieldInfoBox.displayName = \"FormField.InfoBox\";\n","import {\n FormFieldRoot,\n FormFieldLabel,\n FormFieldInput,\n FormFieldDescription,\n FormFieldError,\n FormFieldInfoBox,\n} from \"./components\";\n\nexport const FormField = {\n /**\n * # FormField.Root\n *\n * The root container for the form field that provides context and state management\n * for all child components. Handles React Aria integration for accessibility,\n * manages field state (required, invalid, disabled, readonly), and coordinates\n * rendering of label, input, description, and error elements.\n *\n * @example\n * ```tsx\n * <FormField.Root isRequired isInvalid>\n * <FormField.Label>Username</FormField.Label>\n * <FormField.Input>\n * <TextInput />\n * </FormField.Input>\n * <FormField.Description>Enter your username</FormField.Description>\n * <FormField.Error>Username is required</FormField.Error>\n * </FormField.Root>\n * ```\n */\n Root: FormFieldRoot,\n\n /**\n * # FormField.Label\n *\n * The label element for the form field. Automatically associates with the input\n * via React Aria and displays a required indicator when the field is required.\n * Supports an optional info box trigger for additional field information.\n *\n * @example\n * ```tsx\n * <FormField.Root>\n * <FormField.Label>Email Address</FormField.Label>\n * <FormField.InfoBox>\n * Your email will be used for account notifications\n * </FormField.InfoBox>\n * <FormField.Input>\n * <TextInput />\n * </FormField.Input>\n * </FormField.Root>\n * ```\n */\n Label: FormFieldLabel,\n\n /**\n * # FormField.Input\n *\n * The input wrapper element that receives and displays the actual input component.\n * Automatically clones children and passes accessibility props, validation state,\n * and field attributes from React Aria.\n *\n * @example\n * ```tsx\n * <FormField.Root>\n * <FormField.Label>Password</FormField.Label>\n * <FormField.Input>\n * <PasswordInput />\n * </FormField.Input>\n * </FormField.Root>\n * ```\n */\n Input: FormFieldInput,\n\n /**\n * # FormField.Description\n *\n * The description element that provides helpful information about the field.\n * Automatically associates with the input via `aria-describedby` for screen readers.\n *\n * @example\n * ```tsx\n * <FormField.Root>\n * <FormField.Label>Username</FormField.Label>\n * <FormField.Input>\n * <TextInput />\n * </FormField.Input>\n * <FormField.Description>\n * Must be 3-20 characters, letters and numbers only\n * </FormField.Description>\n * </FormField.Root>\n * ```\n */\n Description: FormFieldDescription,\n\n /**\n * # FormField.Error\n *\n * The error message element that displays validation errors. Only visible when\n * the field is invalid. Automatically associates with the input via\n * `aria-errormessage` and includes an error icon.\n *\n * @example\n * ```tsx\n * <FormField.Root isInvalid>\n * <FormField.Label>Email</FormField.Label>\n * <FormField.Input>\n * <TextInput />\n * </FormField.Input>\n * <FormField.Error>Please enter a valid email address</FormField.Error>\n * </FormField.Root>\n * ```\n */\n Error: FormFieldError,\n\n /**\n * # FormField.InfoBox\n *\n * The info box content that appears in a popover when the help icon next to\n * the label is clicked. Use for additional context or instructions that don't\n * need to be visible by default.\n *\n * @example\n * ```tsx\n * <FormField.Root>\n * <FormField.Label>API Key</FormField.Label>\n * <FormField.InfoBox>\n * Your API key can be found in your account settings.\n * Keep it secure and never share it publicly.\n * </FormField.InfoBox>\n * <FormField.Input>\n * <TextInput />\n * </FormField.Input>\n * </FormField.Root>\n * ```\n */\n InfoBox: FormFieldInfoBox,\n};\n\nexport {\n FormFieldRoot as _FormFieldRoot,\n FormFieldLabel as _FormFieldLabel,\n FormFieldInput as _FormFieldInput,\n FormFieldDescription as _FormFieldDescription,\n FormFieldError as _FormFieldError,\n FormFieldInfoBox as _FormFieldInfoBox,\n};\n"],"mappings":"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"}

package/dist/chunks/form-field-CaTJgt57.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ const e=require("./useObjectRef-B_VeQHvx.cjs.js"),t=require("./useField-dHbFxjk0.cjs.js"),n=require("./Dialog-UjK50qiN.cjs.js"),r=require("./icon-button-BG5cQycc.cjs.js"),i=require("./box-B6vF0vdN.cjs.js"),a=require("./merge-refs-DjTl2ATo.cjs.js");let o=require("react"),s=require("react/jsx-runtime"),c=require("@commercetools/nimbus-icons"),l=require("@chakra-ui/react/styled-system");var u=(0,o.createContext)({context:{label:null,description:null,error:null,info:null},setContext:()=>{},inputProps:{}}),{withProvider:d,withContext:f}=(0,l.createSlotRecipeContext)({key:`nimbusFormField`}),p=d(`div`,`root`),m=f(`div`,`label`),h=f(`div`,`input`),g=f(`div`,`description`),_=f(`div`,`error`),v=f(`div`,`popover`),y=function({ref:l,id:d,isInvalid:f,isRequired:h,isDisabled:y,isReadOnly:b,children:x,...S}){let C=e.t(a.t((0,o.useRef)(null),l)),[w,T]=(0,o.useState)({label:null,description:null,error:null,info:null,isInvalid:f,isRequired:h,isDisabled:y,isReadOnly:b}),{labelProps:E,fieldProps:D,descriptionProps:O,errorMessageProps:k}=t.t((0,o.useMemo)(()=>{let e={id:d,description:w.description,errorMessage:w.error};return w.label?e.label=w.label:(e[`aria-label`]=`empty-label`,e[`aria-labelledby`]=`empty-label`),e},[d,w.description,w.error,w.label]));(0,o.useEffect)(()=>{T(e=>({...e,isInvalid:f,isRequired:h,isDisabled:y,isReadOnly:b}))},[f,h,y,b]);let A=(0,o.useMemo)(()=>({...D,isInvalid:f,isRequired:h,isDisabled:y,isReadOnly:b}),[D,f,h,y,b]),j=(0,o.useMemo)(()=>({context:w,setContext:T,inputProps:A}),[w,A]);return(0,s.jsx)(u.Provider,{value:j,children:(0,s.jsxs)(p,{ref:C,...S,children:[w.label&&(0,s.jsxs)(m,{...w.labelSlotProps,children:[(0,s.jsxs)(`label`,{...E,"data-required":h,children:[w.label,h&&(0,s.jsx)(`sup`,{"aria-hidden":`true`,children:`*`})]}),w.info&&(0,s.jsxs)(n.t,{children:[(0,s.jsx)(i.t,{as:`span`,display:`inline-block`,position:`relative`,width:`1ch`,height:`1ch`,ml:`200`,children:(0,s.jsx)(i.t,{as:`span`,display:`inline-flex`,position:`absolute`,top:`50%`,right:`50%`,transform:`translate(50%, -50%)`,children:(0,s.jsx)(r.t,{"aria-label":`__MORE INFO`,size:`2xs`,colorPalette:`info`,variant:`link`,children:(0,s.jsx)(c.HelpOutline,{})})})}),(0,s.jsx)(n.u,{children:(0,s.jsx)(v,{asChild:!0,children:(0,s.jsx)(n.n,{children:(0,s.jsx)(i.t,{p:`300`,children:w.info})})})})]})]}),w.description&&(0,s.jsx)(g,{...O,...w.descriptionSlotProps,children:w.description}),f&&w.error&&(0,s.jsxs)(_,{...k,...w.errorSlotProps,children:[(0,s.jsx)(i.t,{as:c.ErrorOutline,display:`inline-flex`,boxSize:`400`,flexShrink:`0`,mt:`50`}),w.error]}),x]})})};y.displayName=`FormField.Root`;var b=({children:e,...t})=>{let{setContext:n}=(0,o.useContext)(u);return(0,o.useEffect)(()=>(n(n=>({...n,label:e,labelSlotProps:t})),()=>{n(e=>({...e,label:null,labelSlotProps:void 0}))}),[e,n]),null};b.displayName=`FormField.Label`;var x=({children:e,...t})=>{let{inputProps:n}=(0,o.useContext)(u);return(0,s.jsx)(h,{...t,children:o.Children.map(e,e=>(0,o.isValidElement)(e)?(0,o.cloneElement)(e,n):e)})};x.displayName=`FormField.Input`;var S=({children:e,...t})=>{let{setContext:n}=(0,o.useContext)(u);return(0,o.useEffect)(()=>(n(n=>({...n,description:e,descriptionSlotProps:t})),()=>{n(e=>({...e,description:null,descriptionSlotProps:void 0}))}),[e,n]),null};S.displayName=`FormField.Description`;var C=({children:e,...t})=>{let{setContext:n}=(0,o.useContext)(u);return(0,o.useEffect)(()=>(n(n=>({...n,error:e,errorSlotProps:t})),()=>{n(e=>({...e,error:null,errorSlotProps:void 0}))}),[e,n]),null};C.displayName=`FormField.Error`;var w=({children:e})=>{let{setContext:t}=(0,o.useContext)(u);return(0,o.useEffect)(()=>(t(t=>({...t,info:e})),()=>{t(e=>({...e,info:null}))}),[e,t]),null};w.displayName=`FormField.InfoBox`;var T={Root:y,Label:b,Input:x,Description:S,Error:C,InfoBox:w};Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return x}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return S}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return w}}),Object.defineProperty(exports,"o",{enumerable:!0,get:function(){return b}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return C}}),Object.defineProperty(exports,"s",{enumerable:!0,get:function(){return y}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return T}});
2	+ //# sourceMappingURL=form-field-CaTJgt57.cjs.js.map

package/dist/chunks/form-field-CaTJgt57.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"form-field-CaTJgt57.cjs.js","names":[],"sources":["../../src/components/form-field/components/form-field.context.tsx","../../src/components/form-field/form-field.slots.tsx","../../src/components/form-field/components/form-field.root.tsx","../../src/components/form-field/components/form-field.label.tsx","../../src/components/form-field/components/form-field.input.tsx","../../src/components/form-field/components/form-field.description.tsx","../../src/components/form-field/components/form-field.error.tsx","../../src/components/form-field/components/form-field.info-box.tsx","../../src/components/form-field/form-field.tsx"],"sourcesContent":["import { createContext, type ReactNode } from \"react\";\nimport type {\n FormFieldDescriptionSlotProps,\n FormFieldErrorSlotProps,\n FormFieldLabelSlotProps,\n} from \"../form-field.types\";\n\nexport type FormFieldInputProps = Record<string, unknown>;\n\nexport type FormFieldContextPayloadType = {\n label: ReactNode;\n labelSlotProps?: FormFieldLabelSlotProps;\n description: ReactNode;\n descriptionSlotProps?: FormFieldDescriptionSlotProps;\n error: ReactNode;\n errorSlotProps?: FormFieldErrorSlotProps;\n info: ReactNode;\n isInvalid?: boolean;\n isRequired?: boolean;\n isDisabled?: boolean;\n isReadOnly?: boolean;\n};\n\nexport type FormFieldContextType = {\n context: FormFieldContextPayloadType;\n setContext: React.Dispatch<React.SetStateAction<FormFieldContextPayloadType>>;\n inputProps: FormFieldInputProps;\n};\n\nexport const FormFieldContext = createContext<FormFieldContextType>({\n context: {\n label: null,\n description: null,\n error: null,\n info: null,\n },\n setContext: () => {},\n inputProps: {},\n});\n","import { createSlotRecipeContext } from \"@chakra-ui/react/styled-system\";\nimport type {\n FormFieldRootSlotProps,\n FormFieldLabelSlotProps,\n FormFieldInputSlotProps,\n FormFieldDescriptionSlotProps,\n FormFieldErrorSlotProps,\n FormFieldPopoverSlotProps,\n} from \"./form-field.types\";\n\nconst { withProvider, withContext } = createSlotRecipeContext({\n key: \"nimbusFormField\",\n});\n\n// Root slot\nexport const FormFieldRootSlot = withProvider<\n HTMLDivElement,\n FormFieldRootSlotProps\n>(\"div\", \"root\");\n\n// Label Slot\nexport const FormFieldLabelSlot = withContext<\n HTMLDivElement,\n FormFieldLabelSlotProps\n>(\"div\", \"label\");\n\n// Input Slot\nexport const FormFieldInputSlot = withContext<\n HTMLDivElement,\n FormFieldInputSlotProps\n>(\"div\", \"input\");\n\n// Description Slot\nexport const FormFieldDescriptionSlot = withContext<\n HTMLDivElement,\n FormFieldDescriptionSlotProps\n>(\"div\", \"description\");\n\n// Error Slot\nexport const FormFieldErrorSlot = withContext<\n HTMLDivElement,\n FormFieldErrorSlotProps\n>(\"div\", \"error\");\n\n// Error Slot\nexport const FormFieldPopoverSlot = withContext<\n HTMLDivElement,\n FormFieldPopoverSlotProps\n>(\"div\", \"popover\");\n","import { useEffect, useMemo, useState, useRef } from \"react\";\nimport type { FormFieldProps } from \"../form-field.types\";\nimport { useField, useObjectRef } from \"react-aria\";\nimport { mergeRefs } from \"@/utils\";\nimport {\n FormFieldContext,\n type FormFieldContextPayloadType,\n} from \"./form-field.context\";\nimport {\n FormFieldDescriptionSlot,\n FormFieldErrorSlot,\n FormFieldLabelSlot,\n FormFieldPopoverSlot,\n FormFieldRootSlot,\n} from \"../form-field.slots\";\nimport { Dialog, DialogTrigger, Popover } from \"react-aria-components\";\nimport { Box, IconButton } from \"@/components\";\nimport { ErrorOutline, HelpOutline } from \"@commercetools/nimbus-icons\";\n\n/**\n * # FormField.Root\n *\n * displays miscellaneous inputs in a FormField context\n *\n * @supportsStyleProps\n */\nexport const FormFieldRoot = function FormFieldRoot({\n ref: forwardedRef,\n id,\n isInvalid,\n isRequired,\n isDisabled,\n isReadOnly,\n children,\n ...props\n}: FormFieldProps) {\n const localRef = useRef<HTMLDivElement>(null);\n const ref = useObjectRef(mergeRefs(localRef, forwardedRef));\n const [context, setContext] = useState<FormFieldContextPayloadType>({\n label: null,\n description: null,\n error: null,\n info: null,\n isInvalid,\n isRequired,\n isDisabled,\n isReadOnly,\n });\n\n const useFieldArgs: Parameters<typeof useField>[0] = useMemo(() => {\n const args: Parameters<typeof useField>[0] = {\n id,\n description: context.description,\n errorMessage: context.error,\n };\n\n if (context.label) {\n args.label = context.label;\n } else {\n // Context will always start out null, so we need to stub out some aria attributes\n // FIXME: This is a hack to get the form field to work, but it's not the best solution\n // FIXME: We should find a better way to handle this by redesigning the FormField component's structure\n args[\"aria-label\"] = \"empty-label\";\n args[\"aria-labelledby\"] = \"empty-label\";\n }\n\n return args;\n }, [id, context.description, context.error, context.label]);\n\n const { labelProps, fieldProps, descriptionProps, errorMessageProps } =\n useField(useFieldArgs);\n\n useEffect(() => {\n setContext((prevContext) => ({\n ...prevContext,\n isInvalid,\n isRequired,\n isDisabled,\n isReadOnly,\n }));\n }, [isInvalid, isRequired, isDisabled, isReadOnly]);\n\n const inputProps = useMemo(\n () => ({\n ...fieldProps,\n isInvalid,\n isRequired,\n isDisabled,\n isReadOnly,\n }),\n [fieldProps, isInvalid, isRequired, isDisabled, isReadOnly]\n );\n\n const contextValue = useMemo(\n () => ({ context, setContext, inputProps }),\n [context, inputProps]\n );\n\n return (\n <FormFieldContext.Provider value={contextValue}>\n <FormFieldRootSlot ref={ref} {...props}>\n {context.label && (\n <FormFieldLabelSlot {...context.labelSlotProps}>\n <label {...labelProps} data-required={isRequired}>\n {context.label}\n {isRequired && <sup aria-hidden=\"true\">*</sup>}\n </label>\n {context.info && (\n <DialogTrigger>\n <Box\n as=\"span\"\n display=\"inline-block\"\n position=\"relative\"\n width=\"1ch\"\n height=\"1ch\"\n ml=\"200\"\n >\n <Box\n as=\"span\"\n display=\"inline-flex\"\n position=\"absolute\"\n top=\"50%\"\n right=\"50%\"\n transform=\"translate(50%, -50%)\"\n >\n <IconButton\n aria-label=\"__MORE INFO\"\n size=\"2xs\"\n colorPalette=\"info\"\n variant=\"link\"\n >\n <HelpOutline />\n </IconButton>\n </Box>\n </Box>\n <Popover>\n <FormFieldPopoverSlot asChild>\n <Dialog>\n <Box p=\"300\">{context.info}</Box>\n </Dialog>\n </FormFieldPopoverSlot>\n </Popover>\n </DialogTrigger>\n )}\n </FormFieldLabelSlot>\n )}\n {context.description && (\n <FormFieldDescriptionSlot\n {...descriptionProps}\n {...context.descriptionSlotProps}\n >\n {context.description}\n </FormFieldDescriptionSlot>\n )}\n {isInvalid && context.error && (\n <FormFieldErrorSlot\n {...errorMessageProps}\n {...context.errorSlotProps}\n >\n <Box\n as={ErrorOutline}\n display=\"inline-flex\"\n boxSize=\"400\"\n flexShrink=\"0\"\n mt=\"50\"\n />\n {context.error}\n </FormFieldErrorSlot>\n )}\n {children}\n </FormFieldRootSlot>\n </FormFieldContext.Provider>\n );\n};\n\nFormFieldRoot.displayName = \"FormField.Root\";\n","import { useContext, useEffect } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\nimport type { FormFieldLabelSlotProps } from \"../form-field.types\";\n\n/**\n * FormField.Label - The label element for the form field\n *\n * @supportsStyleProps\n */\n// TODO: should this be wrapped in react-aria's `LabelContext` provider?, e.g. https://react-spectrum.adobe.com/react-aria/TextField.html#custom-children\nexport const FormFieldLabel = ({\n children,\n ...labelSlotProps\n}: FormFieldLabelSlotProps) => {\n const { setContext } = useContext(FormFieldContext);\n\n useEffect(() => {\n setContext((prevContext) => ({\n ...prevContext,\n label: children,\n labelSlotProps,\n }));\n\n // Cleanup: clear label when component unmounts\n return () => {\n setContext((prevContext) => ({\n ...prevContext,\n label: null,\n labelSlotProps: undefined,\n }));\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [children, setContext]);\n\n return null;\n};\n\nFormFieldLabel.displayName = \"FormField.Label\";\n","import { Children, cloneElement, isValidElement, useContext } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\nimport type { FormFieldInputSlotProps } from \"../form-field.types\";\nimport { FormFieldInputSlot } from \"../form-field.slots\";\n\n/**\n * FormField.Input - The input wrapper element for the form field\n *\n * Renders children directly (with injected field props) to avoid\n * the state-based indirection that causes cursor position issues\n * on controlled inputs.\n *\n * @supportsStyleProps\n */\nexport const FormFieldInput = ({\n children,\n ...inputSlotProps\n}: FormFieldInputSlotProps) => {\n const { inputProps } = useContext(FormFieldContext);\n\n return (\n <FormFieldInputSlot {...inputSlotProps}>\n {Children.map(children, (child) => {\n if (isValidElement(child)) {\n return cloneElement(child, inputProps);\n }\n return child;\n })}\n </FormFieldInputSlot>\n );\n};\n\nFormFieldInput.displayName = \"FormField.Input\";\n","import { useContext, useEffect } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\nimport type { FormFieldDescriptionSlotProps } from \"../form-field.types\";\n\n/**\n * FormField.Description - The description element for the form field\n *\n * @supportsStyleProps\n */\nexport const FormFieldDescription = ({\n children,\n ...descriptionSlotProps\n}: FormFieldDescriptionSlotProps) => {\n const { setContext } = useContext(FormFieldContext);\n\n useEffect(() => {\n setContext((prevContext) => ({\n ...prevContext,\n description: children,\n descriptionSlotProps,\n }));\n\n // Cleanup: clear description when component unmounts\n return () => {\n setContext((prevContext) => ({\n ...prevContext,\n description: null,\n descriptionSlotProps: undefined,\n }));\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [children, setContext]);\n\n return null;\n};\n\nFormFieldDescription.displayName = \"FormField.Description\";\n","import { useContext, useEffect } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\nimport type { FormFieldErrorSlotProps } from \"../form-field.types\";\n\n/**\n * FormField.Error - The error message element for the form field\n *\n * @supportsStyleProps\n */\nexport const FormFieldError = ({\n children,\n ...errorSlotProps\n}: FormFieldErrorSlotProps) => {\n const { setContext } = useContext(FormFieldContext);\n\n useEffect(() => {\n setContext((prevContext) => ({\n ...prevContext,\n error: children,\n errorSlotProps,\n }));\n\n // Cleanup: clear error when component unmounts\n return () => {\n setContext((prevContext) => ({\n ...prevContext,\n error: null,\n errorSlotProps: undefined,\n }));\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [children, setContext]);\n\n return null;\n};\n\nFormFieldError.displayName = \"FormField.Error\";\n","import { useContext, useEffect, type ReactNode } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\n\ntype FormFieldInfoBoxProps = {\n /**\n * The content to display in the InfoBox\n */\n children: ReactNode;\n};\n\n/**\n * FormField.InfoBox - The info box popover content for the form field\n *\n * @supportsStyleProps\n */\nexport const FormFieldInfoBox = ({ children }: FormFieldInfoBoxProps) => {\n const { setContext } = useContext(FormFieldContext);\n\n useEffect(() => {\n setContext((prevContext) => ({\n ...prevContext,\n info: children,\n }));\n\n // Cleanup: clear info when component unmounts\n return () => {\n setContext((prevContext) => ({\n ...prevContext,\n info: null,\n }));\n };\n }, [children, setContext]);\n\n return null;\n};\n\nFormFieldInfoBox.displayName = \"FormField.InfoBox\";\n","import {\n FormFieldRoot,\n FormFieldLabel,\n FormFieldInput,\n FormFieldDescription,\n FormFieldError,\n FormFieldInfoBox,\n} from \"./components\";\n\nexport const FormField = {\n /**\n * # FormField.Root\n *\n * The root container for the form field that provides context and state management\n * for all child components. Handles React Aria integration for accessibility,\n * manages field state (required, invalid, disabled, readonly), and coordinates\n * rendering of label, input, description, and error elements.\n *\n * @example\n * ```tsx\n * <FormField.Root isRequired isInvalid>\n * <FormField.Label>Username</FormField.Label>\n * <FormField.Input>\n * <TextInput />\n * </FormField.Input>\n * <FormField.Description>Enter your username</FormField.Description>\n * <FormField.Error>Username is required</FormField.Error>\n * </FormField.Root>\n * ```\n */\n Root: FormFieldRoot,\n\n /**\n * # FormField.Label\n *\n * The label element for the form field. Automatically associates with the input\n * via React Aria and displays a required indicator when the field is required.\n * Supports an optional info box trigger for additional field information.\n *\n * @example\n * ```tsx\n * <FormField.Root>\n * <FormField.Label>Email Address</FormField.Label>\n * <FormField.InfoBox>\n * Your email will be used for account notifications\n * </FormField.InfoBox>\n * <FormField.Input>\n * <TextInput />\n * </FormField.Input>\n * </FormField.Root>\n * ```\n */\n Label: FormFieldLabel,\n\n /**\n * # FormField.Input\n *\n * The input wrapper element that receives and displays the actual input component.\n * Automatically clones children and passes accessibility props, validation state,\n * and field attributes from React Aria.\n *\n * @example\n * ```tsx\n * <FormField.Root>\n * <FormField.Label>Password</FormField.Label>\n * <FormField.Input>\n * <PasswordInput />\n * </FormField.Input>\n * </FormField.Root>\n * ```\n */\n Input: FormFieldInput,\n\n /**\n * # FormField.Description\n *\n * The description element that provides helpful information about the field.\n * Automatically associates with the input via `aria-describedby` for screen readers.\n *\n * @example\n * ```tsx\n * <FormField.Root>\n * <FormField.Label>Username</FormField.Label>\n * <FormField.Input>\n * <TextInput />\n * </FormField.Input>\n * <FormField.Description>\n * Must be 3-20 characters, letters and numbers only\n * </FormField.Description>\n * </FormField.Root>\n * ```\n */\n Description: FormFieldDescription,\n\n /**\n * # FormField.Error\n *\n * The error message element that displays validation errors. Only visible when\n * the field is invalid. Automatically associates with the input via\n * `aria-errormessage` and includes an error icon.\n *\n * @example\n * ```tsx\n * <FormField.Root isInvalid>\n * <FormField.Label>Email</FormField.Label>\n * <FormField.Input>\n * <TextInput />\n * </FormField.Input>\n * <FormField.Error>Please enter a valid email address</FormField.Error>\n * </FormField.Root>\n * ```\n */\n Error: FormFieldError,\n\n /**\n * # FormField.InfoBox\n *\n * The info box content that appears in a popover when the help icon next to\n * the label is clicked. Use for additional context or instructions that don't\n * need to be visible by default.\n *\n * @example\n * ```tsx\n * <FormField.Root>\n * <FormField.Label>API Key</FormField.Label>\n * <FormField.InfoBox>\n * Your API key can be found in your account settings.\n * Keep it secure and never share it publicly.\n * </FormField.InfoBox>\n * <FormField.Input>\n * <TextInput />\n * </FormField.Input>\n * </FormField.Root>\n * ```\n */\n InfoBox: FormFieldInfoBox,\n};\n\nexport {\n FormFieldRoot as _FormFieldRoot,\n FormFieldLabel as _FormFieldLabel,\n FormFieldInput as _FormFieldInput,\n FormFieldDescription as _FormFieldDescription,\n FormFieldError as _FormFieldError,\n FormFieldInfoBox as _FormFieldInfoBox,\n};\n"],"mappings":"mYA6BA,IAAa,GAAA,EAAA,EAAA,cAAA,CAAuD,CAClE,QAAS,CACP,MAAO,KACP,YAAa,KACb,MAAO,KACP,KAAM,IACR,EACA,eAAkB,CAAC,EACnB,WAAY,CAAC,CACf,CAAC,EC5BK,CAAE,eAAc,gBAAA,EAAA,EAAA,wBAAA,CAAwC,CAC5D,IAAK,iBACP,CAAC,EAGY,EAAoB,EAG/B,MAAO,MAAM,EAGF,EAAqB,EAGhC,MAAO,OAAO,EAGH,EAAqB,EAGhC,MAAO,OAAO,EAGH,EAA2B,EAGtC,MAAO,aAAa,EAGT,EAAqB,EAGhC,MAAO,OAAO,EAGH,EAAuB,EAGlC,MAAO,SAAS,ECtBL,EAAgB,SAAuB,CAClD,IAAK,EACL,KACA,YACA,aACA,aACA,aACA,WACA,GAAG,GACc,CAEjB,IAAM,EAAM,EAAA,EAAa,EAAA,GAAA,EAAA,EAAA,OAAA,CADe,IACL,EAAU,CAAY,CAAC,EACpD,CAAC,EAAS,IAAA,EAAA,EAAA,SAAA,CAAoD,CAClE,MAAO,KACP,YAAa,KACb,MAAO,KACP,KAAM,KACN,YACA,aACA,aACA,YACF,CAAC,EAsBK,CAAE,aAAY,aAAY,mBAAkB,qBAChD,EAAA,GAAA,EAAA,EAAA,QAAA,KArBiE,CACjE,IAAM,EAAuC,CAC3C,KACA,YAAa,EAAQ,YACrB,aAAc,EAAQ,KACxB,EAYA,OAVI,EAAQ,MACV,EAAK,MAAQ,EAAQ,OAKrB,EAAK,cAAgB,cACrB,EAAK,mBAAqB,eAGrB,CACT,EAAG,CAAC,EAAI,EAAQ,YAAa,EAAQ,MAAO,EAAQ,KAAK,CAG9C,CAAY,GAEvB,EAAA,EAAA,UAAA,KAAgB,CACd,EAAY,IAAiB,CAC3B,GAAG,EACH,YACA,aACA,aACA,YACF,EAAE,CACJ,EAAG,CAAC,EAAW,EAAY,EAAY,CAAU,CAAC,EAElD,IAAM,GAAA,EAAA,EAAA,QAAA,MACG,CACL,GAAG,EACH,YACA,aACA,aACA,YACF,GACA,CAAC,EAAY,EAAW,EAAY,EAAY,CAAU,CAC5D,EAEM,GAAA,EAAA,EAAA,QAAA,MACG,CAAE,UAAS,aAAY,YAAW,GACzC,CAAC,EAAS,CAAU,CACtB,EAEA,OACE,EAAA,EAAA,IAAA,CAAC,EAAiB,SAAlB,CAA2B,MAAO,YAChC,EAAA,EAAA,KAAA,CAAC,EAAD,CAAwB,MAAK,GAAI,WAAjC,CACG,EAAQ,QACP,EAAA,EAAA,KAAA,CAAC,EAAD,CAAoB,GAAI,EAAQ,wBAAhC,EACE,EAAA,EAAA,KAAA,CAAC,QAAD,CAAO,GAAI,EAAY,gBAAe,WAAtC,CACG,EAAQ,MACR,IAAc,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,cAAY,gBAAO,GAAM,CAAA,CACxC,IACN,EAAQ,OACP,EAAA,EAAA,KAAA,CAAC,EAAA,EAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CACE,GAAG,OACH,QAAQ,eACR,SAAS,WACT,MAAM,MACN,OAAO,MACP,GAAG,gBAEH,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CACE,GAAG,OACH,QAAQ,cACR,SAAS,WACT,IAAI,MACJ,MAAM,MACN,UAAU,iCAEV,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CACE,aAAW,cACX,KAAK,MACL,aAAa,OACb,QAAQ,iBAER,EAAA,EAAA,IAAA,CAAC,EAAA,YAAD,CAAc,CAAA,CACJ,CAAA,CACT,CAAA,CACF,CAAA,GACL,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAAC,EAAD,CAAsB,QAAA,aACpB,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CAAK,EAAE,eAAO,EAAQ,IAAU,CAAA,CAC1B,CAAA,CACY,CAAA,CACf,CAAA,CACI,CAAA,CAAA,CAEC,IAErB,EAAQ,cACP,EAAA,EAAA,IAAA,CAAC,EAAD,CACE,GAAI,EACJ,GAAI,EAAQ,8BAEX,EAAQ,WACe,CAAA,EAE3B,GAAa,EAAQ,QACpB,EAAA,EAAA,KAAA,CAAC,EAAD,CACE,GAAI,EACJ,GAAI,EAAQ,wBAFd,EAIE,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CACE,GAAI,EAAA,aACJ,QAAQ,cACR,QAAQ,MACR,WAAW,IACX,GAAG,IACJ,CAAA,EACA,EAAQ,KACS,IAErB,CACgB,GACM,CAAA,CAE/B,EAEA,EAAc,YAAc,iBCrK5B,IAAa,GAAkB,CAC7B,WACA,GAAG,KAC0B,CAC7B,GAAM,CAAE,eAAA,EAAA,EAAA,WAAA,CAA0B,CAAgB,EAoBlD,OAlBA,EAAA,EAAA,UAAA,MACE,EAAY,IAAiB,CAC3B,GAAG,EACH,MAAO,EACP,gBACF,EAAE,MAGW,CACX,EAAY,IAAiB,CAC3B,GAAG,EACH,MAAO,KACP,eAAgB,IAAA,EAClB,EAAE,CACJ,GAEC,CAAC,EAAU,CAAU,CAAC,EAElB,IACT,EAEA,EAAe,YAAc,kBCvB7B,IAAa,GAAkB,CAC7B,WACA,GAAG,KAC0B,CAC7B,GAAM,CAAE,eAAA,EAAA,EAAA,WAAA,CAA0B,CAAgB,EAElD,OACE,EAAA,EAAA,IAAA,CAAC,EAAD,CAAoB,GAAI,WACrB,EAAA,SAAS,IAAI,EAAW,IACvB,EAAA,EAAA,eAAA,CAAmB,CAAK,GACtB,EAAA,EAAA,aAAA,CAAoB,EAAO,CAAU,EAEhC,CACR,CACiB,CAAA,CAExB,EAEA,EAAe,YAAc,kBCvB7B,IAAa,GAAwB,CACnC,WACA,GAAG,KACgC,CACnC,GAAM,CAAE,eAAA,EAAA,EAAA,WAAA,CAA0B,CAAgB,EAoBlD,OAlBA,EAAA,EAAA,UAAA,MACE,EAAY,IAAiB,CAC3B,GAAG,EACH,YAAa,EACb,sBACF,EAAE,MAGW,CACX,EAAY,IAAiB,CAC3B,GAAG,EACH,YAAa,KACb,qBAAsB,IAAA,EACxB,EAAE,CACJ,GAEC,CAAC,EAAU,CAAU,CAAC,EAElB,IACT,EAEA,EAAqB,YAAc,wBC3BnC,IAAa,GAAkB,CAC7B,WACA,GAAG,KAC0B,CAC7B,GAAM,CAAE,eAAA,EAAA,EAAA,WAAA,CAA0B,CAAgB,EAoBlD,OAlBA,EAAA,EAAA,UAAA,MACE,EAAY,IAAiB,CAC3B,GAAG,EACH,MAAO,EACP,gBACF,EAAE,MAGW,CACX,EAAY,IAAiB,CAC3B,GAAG,EACH,MAAO,KACP,eAAgB,IAAA,EAClB,EAAE,CACJ,GAEC,CAAC,EAAU,CAAU,CAAC,EAElB,IACT,EAEA,EAAe,YAAc,kBCrB7B,IAAa,GAAoB,CAAE,cAAsC,CACvE,GAAM,CAAE,eAAA,EAAA,EAAA,WAAA,CAA0B,CAAgB,EAiBlD,OAfA,EAAA,EAAA,UAAA,MACE,EAAY,IAAiB,CAC3B,GAAG,EACH,KAAM,CACR,EAAE,MAGW,CACX,EAAY,IAAiB,CAC3B,GAAG,EACH,KAAM,IACR,EAAE,CACJ,GACC,CAAC,EAAU,CAAU,CAAC,EAElB,IACT,EAEA,EAAiB,YAAc,oBC3B/B,IAAa,EAAY,CAqBvB,KAAM,EAsBN,MAAO,EAmBP,MAAO,EAqBP,YAAa,EAoBb,MAAO,EAuBP,QAAS,CACX"}

package/dist/chunks/getScrollParent-C1Ls5EVW.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ const e=require("./scrollIntoView-BHYrUAMu.cjs.js");function t(t,n){let r=t;for(e.r(r,n)&&(r=r.parentElement);r&&!e.r(r,n);)r=r.parentElement;return r\|\|document.scrollingElement\|\|document.documentElement}Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return t}});
2	+ //# sourceMappingURL=getScrollParent-C1Ls5EVW.cjs.js.map

package/dist/chunks/getScrollParent-C1Ls5EVW.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"getScrollParent-C1Ls5EVW.cjs.js","names":["$901761b40e390936$export$2bb74740c4e19def"],"sources":["../../../../node_modules/.pnpm/react-aria@3.50.0_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/react-aria/dist/private/utils/getScrollParent.mjs"],"sourcesContent":["import {isScrollable as $901761b40e390936$export$2bb74740c4e19def} from \"./isScrollable.mjs\";\n\n/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */ \nfunction $3578607fe3d4b096$export$cfa2225e87938781(node, checkForOverflow) {\n let scrollableNode = node;\n if ((0, $901761b40e390936$export$2bb74740c4e19def)(scrollableNode, checkForOverflow)) scrollableNode = scrollableNode.parentElement;\n while(scrollableNode && !(0, $901761b40e390936$export$2bb74740c4e19def)(scrollableNode, checkForOverflow))scrollableNode = scrollableNode.parentElement;\n return scrollableNode || document.scrollingElement || document.documentElement;\n}\n\n\nexport {$3578607fe3d4b096$export$cfa2225e87938781 as getScrollParent};\n//# sourceMappingURL=getScrollParent.mjs.map\n"],"x_google_ignoreList":[0],"mappings":"oDAaA,SAAS,EAA0C,EAAM,EAAkB,CACvE,IAAI,EAAiB,EAErB,IADQA,EAAAA,EAA2C,EAAgB,CAAgB,IAAG,EAAiB,EAAe,eAChH,GAAkB,CAAKA,EAAAA,EAA2C,EAAgB,CAAgB,GAAE,EAAiB,EAAe,cAC1I,OAAO,GAAkB,SAAS,kBAAoB,SAAS,eACnE"}

package/dist/chunks/getScrollParent-DH0xzs6v.esm.js ADDED Viewed

@@ -0,0 +1,11 @@
+import { r as e } from "./scrollIntoView-Tm8PcLU5.esm.js";
+//#region ../../node_modules/.pnpm/react-aria@3.50.0_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/react-aria/dist/private/utils/getScrollParent.mjs
+function t(t, n) {
+	let r = t;
+	for (e(r, n) && (r = r.parentElement); r && !e(r, n);) r = r.parentElement;
+	return r || document.scrollingElement || document.documentElement;
+}
+//#endregion
+export { t };
+//# sourceMappingURL=getScrollParent-DH0xzs6v.esm.js.map

package/dist/chunks/getScrollParent-DH0xzs6v.esm.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"getScrollParent-DH0xzs6v.esm.js","names":[],"sources":["../../../../node_modules/.pnpm/react-aria@3.50.0_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/react-aria/dist/private/utils/getScrollParent.mjs"],"sourcesContent":["import {isScrollable as $901761b40e390936$export$2bb74740c4e19def} from \"./isScrollable.mjs\";\n\n/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */ \nfunction $3578607fe3d4b096$export$cfa2225e87938781(node, checkForOverflow) {\n let scrollableNode = node;\n if ((0, $901761b40e390936$export$2bb74740c4e19def)(scrollableNode, checkForOverflow)) scrollableNode = scrollableNode.parentElement;\n while(scrollableNode && !(0, $901761b40e390936$export$2bb74740c4e19def)(scrollableNode, checkForOverflow))scrollableNode = scrollableNode.parentElement;\n return scrollableNode || document.scrollingElement || document.documentElement;\n}\n\n\nexport {$3578607fe3d4b096$export$cfa2225e87938781 as getScrollParent};\n//# sourceMappingURL=getScrollParent.mjs.map\n"],"x_google_ignoreList":[0],"mappings":";;AAaA,SAAS,EAA0C,GAAM,GAAkB;CACvE,IAAI,IAAiB;CAErB,KADQ,EAA2C,GAAgB,CAAgB,MAAG,IAAiB,EAAe,gBAChH,KAAkB,CAAK,EAA2C,GAAgB,CAAgB,IAAE,IAAiB,EAAe;CAC1I,OAAO,KAAkB,SAAS,oBAAoB,SAAS;AACnE"}

package/dist/chunks/grid-BVn1K-vy.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"grid-BVn1K-vy.cjs.js","names":[],"sources":["../../src/components/grid/grid.tsx"],"sourcesContent":["import {\n Grid as ChakraGrid,\n GridItem,\n type GridProps as ChakraGridProps,\n} from \"@chakra-ui/react/grid\";\n\n/*\n # Grid\n \n An easily customizable Grid component, re-exported from Chakra UI, that provides a consistent layout structure across different products.\n \n @see {@link https://nimbus-documentation.vercel.app/components/layout/grid}\n */\nexport type GridProps = ChakraGridProps & {\n children?: React.ReactNode;\n ref?: React.Ref<HTMLDivElement>;\n};\n\nconst GridComponent = (props: GridProps) => {\n const { ref, ...restProps } = props;\n return <ChakraGrid ref={ref} {...restProps} />;\n};\n\nGridComponent.displayName = \"Grid\";\n\nexport const Grid = Object.assign(GridComponent, {\n Item: GridItem,\n});\n"],"mappings":"sEAkBA,IAAM,EAAiB,GAAqB,CAC1C,GAAM,CAAE,MAAK,GAAG,GAAc,EAC9B,OAAO,EAAA,EAAA,~~KAAC~~,EAAA,KAAD,CAAiB,MAAK,GAAI,CAAY,CAAA,CAC/C,EAEA,EAAc,YAAc,OAE5B,IAAa,EAAO,OAAO,OAAO,EAAe,CAC/C,KAAM,EAAA,QACR,CAAC"}
1	+ {"version":3,"file":"grid-BVn1K-vy.cjs.js","names":[],"sources":["../../src/components/grid/grid.tsx"],"sourcesContent":["import {\n Grid as ChakraGrid,\n GridItem,\n type GridProps as ChakraGridProps,\n} from \"@chakra-ui/react/grid\";\n\n/*\n # Grid\n \n An easily customizable Grid component, re-exported from Chakra UI, that provides a consistent layout structure across different products.\n \n @see {@link https://nimbus-documentation.vercel.app/components/layout/grid}\n */\nexport type GridProps = ChakraGridProps & {\n children?: React.ReactNode;\n ref?: React.Ref<HTMLDivElement>;\n};\n\nconst GridComponent = (props: GridProps) => {\n const { ref, ...restProps } = props;\n return <ChakraGrid ref={ref} {...restProps} />;\n};\n\nGridComponent.displayName = \"Grid\";\n\nexport const Grid = Object.assign(GridComponent, {\n Item: GridItem,\n});\n"],"mappings":"sEAkBA,IAAM,EAAiB,GAAqB,CAC1C,GAAM,CAAE,MAAK,GAAG,GAAc,EAC9B,OAAO,EAAA,EAAA,IAAA,CAAC,EAAA,KAAD,CAAiB,MAAK,GAAI,CAAY,CAAA,CAC/C,EAEA,EAAc,YAAc,OAE5B,IAAa,EAAO,OAAO,OAAO,EAAe,CAC/C,KAAM,EAAA,QACR,CAAC"}

package/dist/chunks/group-BdWGHf4v.esm.js ADDED Viewed

@@ -0,0 +1,16 @@
+import { t as e } from "./Group-D4Vbo9q9.esm.js";
+import { jsx as t } from "react/jsx-runtime";
+import { createRecipeContext as n } from "@chakra-ui/react/styled-system";
+//#region src/components/group/group.slots.tsx
+var { withContext: r } = n({ key: "nimbusGroup" }), i = r(e), a = (e) => {
+	let { ref: n, children: r, ...a } = e;
+	return /* @__PURE__ */ t(i, {
+		ref: n,
+		...a,
+		children: r
+	});
+};
+//#endregion
+export { a as t };
+//# sourceMappingURL=group-BdWGHf4v.esm.js.map

package/dist/chunks/group-BdWGHf4v.esm.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"group-BdWGHf4v.esm.js","names":[],"sources":["../../src/components/group/group.slots.tsx","../../src/components/group/group.tsx"],"sourcesContent":["import { createRecipeContext } from \"@chakra-ui/react/styled-system\";\nimport { Group as RaGroup } from \"react-aria-components\";\nimport type { SlotComponent } from \"@/type-utils\";\nimport type { GroupRootSlotProps } from \"./group.types\";\n\nconst { withContext } = createRecipeContext({\n key: \"nimbusGroup\",\n});\n\n/**\n * Slot component that provides the styling context for the Group component.\n * Uses Chakra UI's recipe context system for consistent styling across instances.\n */\nexport const GroupSlot: SlotComponent<typeof RaGroup, GroupRootSlotProps> =\n withContext<typeof RaGroup, GroupRootSlotProps>(RaGroup);\n","import { GroupSlot } from \"./group.slots\";\nimport type { GroupComponent } from \"./group.types\";\n\nexport const Group: GroupComponent = (props) => {\n const { ref, children, ...rest } = props;\n return (\n <GroupSlot ref={ref} {...rest}>\n {children}\n </GroupSlot>\n );\n};\n"],"mappings":";;;;AAKA,IAAM,EAAE,mBAAgB,EAAoB,EAC1C,KAAK,cACP,CAAC,GAMY,IACX,EAAgD,CAAO,GCX5C,KAAyB,MAAU;CAC9C,IAAM,EAAE,QAAK,aAAU,GAAG,MAAS;CACnC,OACE,kBAAC,GAAD;EAAgB;EAAK,GAAI;EACtB;CACQ,CAAA;AAEf"}

package/dist/chunks/group-CXRp7_JB.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ const e=require("./Group-Bw1Y-fMh.cjs.js");let t=require("react/jsx-runtime");var{withContext:n}=(0,require("@chakra-ui/react/styled-system").createRecipeContext)({key:`nimbusGroup`}),r=n(e.t),i=e=>{let{ref:n,children:i,...a}=e;return(0,t.jsx)(r,{ref:n,...a,children:i})};Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return i}});
2	+ //# sourceMappingURL=group-CXRp7_JB.cjs.js.map

package/dist/chunks/group-CXRp7_JB.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"group-CXRp7_JB.cjs.js","names":[],"sources":["../../src/components/group/group.slots.tsx","../../src/components/group/group.tsx"],"sourcesContent":["import { createRecipeContext } from \"@chakra-ui/react/styled-system\";\nimport { Group as RaGroup } from \"react-aria-components\";\nimport type { SlotComponent } from \"@/type-utils\";\nimport type { GroupRootSlotProps } from \"./group.types\";\n\nconst { withContext } = createRecipeContext({\n key: \"nimbusGroup\",\n});\n\n/**\n * Slot component that provides the styling context for the Group component.\n * Uses Chakra UI's recipe context system for consistent styling across instances.\n */\nexport const GroupSlot: SlotComponent<typeof RaGroup, GroupRootSlotProps> =\n withContext<typeof RaGroup, GroupRootSlotProps>(RaGroup);\n","import { GroupSlot } from \"./group.slots\";\nimport type { GroupComponent } from \"./group.types\";\n\nexport const Group: GroupComponent = (props) => {\n const { ref, children, ...rest } = props;\n return (\n <GroupSlot ref={ref} {...rest}>\n {children}\n </GroupSlot>\n );\n};\n"],"mappings":"8EAKA,GAAM,CAAE,gBAAA,0CAAA,CAAA,CAAA,oBAAA,CAAoC,CAC1C,IAAK,aACP,CAAC,EAMY,EACX,EAAgD,EAAA,CAAO,ECX5C,EAAyB,GAAU,CAC9C,GAAM,CAAE,MAAK,WAAU,GAAG,GAAS,EACnC,OACE,EAAA,EAAA,IAAA,CAAC,EAAD,CAAgB,MAAK,GAAI,EACtB,UACQ,CAAA,CAEf"}

package/dist/chunks/heading-COgniVU1.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ const e=require("./utils-Clf3FzjT.cjs.js"),t=require("./Heading-DKP6fK9r.cjs.js");let n=require("react/jsx-runtime");var{withContext:r}=(0,require("@chakra-ui/react/styled-system").createRecipeContext)({key:`nimbusHeading`}),i=r(`h2`),a=({ref:r,...a})=>{let[o,s]=e.n(a,r??null,t.n);return(0,n.jsx)(i,{ref:s,...o,as:a.as\|\|o.as,slot:a.slot??void 0})};a.displayName=`Heading`,Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return a}});
2	+ //# sourceMappingURL=heading-COgniVU1.cjs.js.map

package/dist/chunks/heading-COgniVU1.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"heading-COgniVU1.cjs.js","names":[],"sources":["../../src/components/heading/heading.slots.tsx","../../src/components/heading/heading.tsx"],"sourcesContent":["import { createRecipeContext } from \"@chakra-ui/react/styled-system\";\nimport type { HeadingRootSlotProps } from \"./heading.types\";\n\nconst { withContext } = createRecipeContext({ key: \"nimbusHeading\" });\n\nexport const HeadingRoot: React.FC<HeadingRootSlotProps> = withContext<\n HTMLHeadingElement,\n HeadingRootSlotProps\n>(\"h2\");\n","import { HeadingContext, useContextProps } from \"react-aria-components\";\nimport { HeadingRoot } from \"./heading.slots\";\nimport type { HeadingRootSlotProps } from \"./heading.types\";\n\n/**\n * Props for the Heading component.\n *\n * @property {React.Ref<HTMLHeadingElement>} [ref] - Ref to the underlying heading element.\n * @property {string | null | undefined} [slot] - Slot attribute for custom element slotting.\n */\nexport type HeadingProps = HeadingRootSlotProps & {\n /**\n * Ref to the underlying heading element.\n */\n ref?: React.Ref<HTMLHeadingElement>;\n /**\n * Slot attribute for custom element slotting.\n */\n slot?: string | null | undefined;\n};\n\n/**\n * # Heading\n *\n * renders a heading\n *\n * @see {@link https://nimbus-documentation.vercel.app/components/typography/heading}\n */\nexport const Heading = ({ ref: forwardedRef, ...props }: HeadingProps) => {\n const [contextProps, ref] = useContextProps(\n props,\n forwardedRef ?? null,\n HeadingContext\n );\n\n return (\n <HeadingRoot\n ref={ref as React.Ref<HTMLHeadingElement>}\n {...contextProps}\n as={props.as || contextProps.as}\n slot={props.slot ?? undefined}\n />\n );\n};\n\nHeading.displayName = \"Heading\";\n"],"mappings":"qHAGA,GAAM,CAAE,gBAAA,0CAAA,CAAA,CAAA,oBAAA,CAAoC,CAAE,IAAK,eAAgB,CAAC,EAEvD,EAA8C,EAGzD,IAAI,ECoBO,GAAW,CAAE,IAAK,EAAc,GAAG,KAA0B,CACxE,GAAM,CAAC,EAAc,GAAO,EAAA,EAC1B,EACA,GAAgB,KAChB,EAAA,CACF,EAEA,OACE,EAAA,EAAA,IAAA,CAAC,EAAD,CACO,MACL,GAAI,EACJ,GAAI,EAAM,IAAM,EAAa,GAC7B,KAAM,EAAM,MAAQ,IAAA,EACrB,CAAA,CAEL,EAEA,EAAQ,YAAc"}

package/dist/chunks/heading-DA_lAqus.esm.js ADDED Viewed

@@ -0,0 +1,19 @@
+import { n as e } from "./utils-BYIK8Yf2.esm.js";
+import { n as t } from "./Heading-nZpHPDFS.esm.js";
+import { jsx as n } from "react/jsx-runtime";
+import { createRecipeContext as r } from "@chakra-ui/react/styled-system";
+//#region src/components/heading/heading.slots.tsx
+var { withContext: i } = r({ key: "nimbusHeading" }), a = i("h2"), o = ({ ref: r, ...i }) => {
+	let [o, s] = e(i, r ?? null, t);
+	return /* @__PURE__ */ n(a, {
+		ref: s,
+		...o,
+		as: i.as || o.as,
+		slot: i.slot ?? void 0
+	});
+};
+o.displayName = "Heading";
+//#endregion
+export { o as t };
+//# sourceMappingURL=heading-DA_lAqus.esm.js.map

package/dist/chunks/heading-DA_lAqus.esm.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"heading-DA_lAqus.esm.js","names":[],"sources":["../../src/components/heading/heading.slots.tsx","../../src/components/heading/heading.tsx"],"sourcesContent":["import { createRecipeContext } from \"@chakra-ui/react/styled-system\";\nimport type { HeadingRootSlotProps } from \"./heading.types\";\n\nconst { withContext } = createRecipeContext({ key: \"nimbusHeading\" });\n\nexport const HeadingRoot: React.FC<HeadingRootSlotProps> = withContext<\n HTMLHeadingElement,\n HeadingRootSlotProps\n>(\"h2\");\n","import { HeadingContext, useContextProps } from \"react-aria-components\";\nimport { HeadingRoot } from \"./heading.slots\";\nimport type { HeadingRootSlotProps } from \"./heading.types\";\n\n/**\n * Props for the Heading component.\n *\n * @property {React.Ref<HTMLHeadingElement>} [ref] - Ref to the underlying heading element.\n * @property {string | null | undefined} [slot] - Slot attribute for custom element slotting.\n */\nexport type HeadingProps = HeadingRootSlotProps & {\n /**\n * Ref to the underlying heading element.\n */\n ref?: React.Ref<HTMLHeadingElement>;\n /**\n * Slot attribute for custom element slotting.\n */\n slot?: string | null | undefined;\n};\n\n/**\n * # Heading\n *\n * renders a heading\n *\n * @see {@link https://nimbus-documentation.vercel.app/components/typography/heading}\n */\nexport const Heading = ({ ref: forwardedRef, ...props }: HeadingProps) => {\n const [contextProps, ref] = useContextProps(\n props,\n forwardedRef ?? null,\n HeadingContext\n );\n\n return (\n <HeadingRoot\n ref={ref as React.Ref<HTMLHeadingElement>}\n {...contextProps}\n as={props.as || contextProps.as}\n slot={props.slot ?? undefined}\n />\n );\n};\n\nHeading.displayName = \"Heading\";\n"],"mappings":";;;;;AAGA,IAAM,EAAE,mBAAgB,EAAoB,EAAE,KAAK,gBAAgB,CAAC,GAEvD,IAA8C,EAGzD,IAAI,GCoBO,KAAW,EAAE,KAAK,GAAc,GAAG,QAA0B;CACxE,IAAM,CAAC,GAAc,KAAO,EAC1B,GACA,KAAgB,MAChB,CACF;CAEA,OACE,kBAAC,GAAD;EACO;EACL,GAAI;EACJ,IAAI,EAAM,MAAM,EAAa;EAC7B,MAAM,EAAM,QAAQ,KAAA;CACrB,CAAA;AAEL;AAEA,EAAQ,cAAc"}