@adhese/sdk-devtools 0.11.6 → 0.12.0

package/dist/cjs/components/tabs.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.cjs","sources":["../../../src/components/tabs.tsx"],"sourcesContent":["/* eslint-disable ts/naming-convention */\n\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\nimport { type ComponentPropsWithoutRef, type ElementRef, forwardRef } from 'react';\nimport { cn } from '../utils';\n\nconst Tabs = TabsPrimitive.Root;\n\nconst TabsList = forwardRef<\n  ElementRef<typeof TabsPrimitive.List>,\n  ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.List\n    ref={ref}\n    className={cn(\n      'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',\n      className,\n    )}\n    {...props}\n  />\n));\nTabsList.displayName = TabsPrimitive.List.displayName;\n\nconst TabsTrigger = forwardRef<\n  ElementRef<typeof TabsPrimitive.Trigger>,\n  ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',\n      className,\n    )}\n    {...props}\n  />\n));\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName;\n\nconst TabsContent = forwardRef<\n  ElementRef<typeof TabsPrimitive.Content>,\n  ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Content\n    ref={ref}\n    className={cn(\n      'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n      className,\n    )}\n    {...props}\n  />\n));\nTabsContent.displayName = TabsPrimitive.Content.displayName;\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent };\n"],"names":["TabsPrimitive","forwardRef","jsx","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,OAAOA,yBAAc;AAErB,MAAA,WAAWC,iBAGf,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1BC,2BAAA;AAAA,EAACF,yBAAc;AAAA,EAAd;AAAA,IACC;AAAA,IACA,WAAWG,MAAA;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA,EAAA;AACN,CACD;AACD,SAAS,cAAcH,yBAAc,KAAK;AAEpC,MAAA,cAAcC,iBAGlB,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1BC,2BAAA;AAAA,EAACF,yBAAc;AAAA,EAAd;AAAA,IACC;AAAA,IACA,WAAWG,MAAA;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA,EAAA;AACN,CACD;AACD,YAAY,cAAcH,yBAAc,QAAQ;AAE1C,MAAA,cAAcC,iBAGlB,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1BC,2BAAA;AAAA,EAACF,yBAAc;AAAA,EAAd;AAAA,IACC;AAAA,IACA,WAAWG,MAAA;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA,EAAA;AACN,CACD;AACD,YAAY,cAAcH,yBAAc,QAAQ;;;;;"}

package/dist/cjs/devtools.composables.cjs

@@ -0,0 +1,116 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const sdkShared = require("@adhese/sdk-shared");
+function useDevtoolsUi(context, { onInit, onDispose }) {
+  const wrapperElement = document.createElement("div");
+  let unmount;
+  async function initDevtools() {
+    const main = await Promise.resolve().then(() => require("./main.cjs"));
+    if (!unmount) {
+      document.body.appendChild(wrapperElement);
+      unmount = main.createAdheseDevtools(wrapperElement, context);
+    }
+  }
+  onInit(() => {
+    sdkShared.watch(() => [context.debug, context.isDisposed], async ([debug, isDisposed]) => {
+      if (debug && !isDisposed) {
+        await initDevtools();
+        if (context.isDisposed)
+          dispose();
+      } else {
+        dispose();
+      }
+    }, {
+      immediate: true
+    });
+  });
+  function dispose() {
+    unmount == null ? void 0 : unmount();
+    unmount = void 0;
+    if (wrapperElement.parentElement)
+      wrapperElement.outerHTML = "";
+  }
+  onDispose(dispose);
+}
+function useModifiedSlotsHijack(context, { onSlotCreate }, logger) {
+  async function initStore() {
+    const { modifiedSlotsStore: store } = await Promise.resolve().then(() => require("./modifiedSlots.store.cjs"));
+    return store;
+  }
+  onSlotCreate(
+    (slot) => ({
+      ...slot,
+      setup(slotContext, slotHooks) {
+        var _a;
+        (_a = slot.setup) == null ? void 0 : _a.call(slot, slotContext, slotHooks);
+        let store;
+        const state = sdkShared.ref(null);
+        const hijackSlot = sdkShared.ref(null);
+        const hijackSlotOptions = sdkShared.computed(() => {
+          var _a2, _b;
+          return (_b = state.value ?? (store == null ? void 0 : store.getState())) == null ? void 0 : _b.slots.get(((_a2 = slotContext.value) == null ? void 0 : _a2.name) ?? "");
+        });
+        let disposeSub;
+        async function createHijack() {
+          var _a2, _b, _c, _d, _e;
+          if (context.debug && slotContext.value && slotContext.value.element) {
+            (_a2 = hijackSlot.value) == null ? void 0 : _a2.dispose();
+            if (hijackSlotOptions.value) {
+              slotContext.value.renderMode = "none";
+              hijackSlot.value = ((_b = context.addSlot) == null ? void 0 : _b.call(context, {
+                ...sdkShared.omit(slotContext.value.options, ["setup"]),
+                ...hijackSlotOptions.value,
+                containingElement: slotContext.value.element,
+                lazyLoading: false,
+                lazyLoadingOptions: void 0,
+                pluginOptions: {
+                  devtools: {
+                    hijackedSlot: slotContext.value.name
+                  }
+                }
+              })) ?? null;
+              logger.value.debug(`Hijacking slot ${slotContext.value.name} with new slot ${(_c = hijackSlot.value) == null ? void 0 : _c.name}`);
+              await ((_d = hijackSlot.value) == null ? void 0 : _d.render());
+            } else {
+              slotContext.value.renderMode = slotContext.value.options.renderMode ?? "iframe";
+              (_e = hijackSlot.value) == null ? void 0 : _e.dispose();
+              hijackSlot.value = null;
+              await slotContext.value.render();
+            }
+          }
+        }
+        slotHooks.onInit(async () => {
+          if (context.debug && slotContext.value) {
+            store = await initStore();
+            disposeSub = store.subscribe((newState) => {
+              state.value = newState;
+            });
+            state.value = store.getState();
+            await createHijack();
+          }
+        });
+        slotHooks.onRender(async () => {
+          if (hijackSlot.value) {
+            await hijackSlot.value.render();
+          }
+        });
+        sdkShared.watch(state, async () => {
+          await createHijack();
+        }, { immediate: true });
+        sdkShared.watch(() => context.debug, async (debug) => {
+          var _a2;
+          if (!debug)
+            (_a2 = hijackSlot.value) == null ? void 0 : _a2.dispose();
+        });
+        slotHooks.onDispose(() => {
+          var _a2;
+          disposeSub == null ? void 0 : disposeSub();
+          (_a2 = hijackSlot.value) == null ? void 0 : _a2.dispose();
+        });
+      }
+    })
+  );
+}
+exports.useDevtoolsUi = useDevtoolsUi;
+exports.useModifiedSlotsHijack = useModifiedSlotsHijack;
+//# sourceMappingURL=devtools.composables.cjs.map

package/dist/cjs/devtools.composables.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"devtools.composables.cjs","sources":["../../src/devtools.composables.ts"],"sourcesContent":["import type { AdheseContext, AdhesePlugin, AdheseSlot } from '@adhese/sdk';\nimport { computed, omit, ref, type useLogger, watch } from '@adhese/sdk-shared';\nimport type { ModifiedSlotsStore, modifiedSlotsStore } from './modifiedSlots.store';\n\nexport type DevtoolsSlotPluginOptions = {\n  hijackedSlot?: string;\n};\n\nexport function useDevtoolsUi(context: AdheseContext, { onInit, onDispose }: Parameters<AdhesePlugin>[1]['hooks']): void {\n  const wrapperElement = document.createElement('div');\n  let unmount: (() => void) | undefined;\n\n  async function initDevtools(): Promise<void> {\n    const main = await import('./main');\n\n    if (!unmount) {\n      document.body.appendChild(wrapperElement);\n\n      unmount = main.createAdheseDevtools(wrapperElement, context);\n    }\n  }\n\n  onInit(() => {\n    watch(() => [context.debug, context.isDisposed], async ([debug, isDisposed]) => {\n      if (debug && !isDisposed) {\n        await initDevtools();\n\n        if (context.isDisposed)\n          dispose();\n      }\n      else {\n        dispose();\n      }\n    }, {\n      immediate: true,\n    });\n  });\n\n  function dispose(): void {\n    unmount?.();\n    unmount = undefined;\n    if (wrapperElement.parentElement)\n      wrapperElement.outerHTML = '';\n  }\n\n  onDispose(dispose);\n}\n\nexport function useModifiedSlotsHijack(\n  context: AdheseContext,\n  { onSlotCreate }: Parameters<AdhesePlugin>[1]['hooks'],\n  logger: ReturnType<typeof useLogger>,\n): void {\n  async function initStore(): Promise<typeof modifiedSlotsStore> {\n    const { modifiedSlotsStore: store } = await import('./modifiedSlots.store');\n\n    return store;\n  }\n\n  onSlotCreate(slot =>\n    ({\n      ...slot,\n      setup(slotContext, slotHooks): void {\n        slot.setup?.(slotContext, slotHooks);\n\n        let store: typeof modifiedSlotsStore | undefined;\n        const state = ref<ModifiedSlotsStore | null>(null);\n        const hijackSlot = ref<AdheseSlot | null>(null);\n\n        const hijackSlotOptions = computed(() => (state.value ?? store?.getState())?.slots.get(slotContext.value?.name ?? ''));\n\n        let disposeSub: (() => void) | undefined;\n\n        async function createHijack(): Promise<void> {\n          if (context.debug && slotContext.value && slotContext.value.element) {\n            hijackSlot.value?.dispose();\n\n            if (hijackSlotOptions.value) {\n              slotContext.value.renderMode = 'none';\n\n              hijackSlot.value = context.addSlot?.({\n                ...omit(slotContext.value.options, ['setup']),\n                ...hijackSlotOptions.value,\n                containingElement: slotContext.value.element,\n                lazyLoading: false,\n                lazyLoadingOptions: undefined,\n                pluginOptions: {\n                  devtools: {\n                    hijackedSlot: slotContext.value.name,\n                  } satisfies DevtoolsSlotPluginOptions,\n                },\n              }) ?? null;\n\n              logger.value.debug(`Hijacking slot ${slotContext.value.name} with new slot ${hijackSlot.value?.name}`);\n\n              await hijackSlot.value?.render();\n            }\n            else {\n              slotContext.value.renderMode = slotContext.value.options.renderMode ?? 'iframe';\n\n              hijackSlot.value?.dispose();\n              hijackSlot.value = null;\n\n              await slotContext.value.render();\n            }\n          }\n        }\n\n        slotHooks.onInit(async () => {\n          if (context.debug && slotContext.value) {\n            store = await initStore();\n\n            disposeSub = store.subscribe((newState) => {\n              state.value = newState;\n            });\n\n            state.value = store.getState();\n\n            await createHijack();\n          }\n        });\n\n        slotHooks.onRender(async () => {\n          if (hijackSlot.value) {\n            await hijackSlot.value.render();\n          }\n        });\n\n        watch(state, async () => {\n          await createHijack();\n        }, { immediate: true });\n\n        watch(() => context.debug, async (debug) => {\n          if (!debug)\n            hijackSlot.value?.dispose();\n        });\n\n        slotHooks.onDispose(() => {\n          disposeSub?.();\n          hijackSlot.value?.dispose();\n        });\n      },\n    }),\n  );\n}\n"],"names":["watch","ref","computed","_a","omit"],"mappings":"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"}

package/dist/cjs/main.cjs

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const client = require("react-dom/client");
+const react = require("react");
+const Devtools = require("./Devtools.cjs");
+const AdheseContext = require("./AdheseContext.cjs");
+function createAdheseDevtools(element, context) {
+  const root = client.createRoot(element);
+  root.render(/* @__PURE__ */ jsxRuntime.jsx(react.StrictMode, { children: /* @__PURE__ */ jsxRuntime.jsx(AdheseContext.AdheseProvider, { adhese: context, children: /* @__PURE__ */ jsxRuntime.jsx(Devtools.Devtools, {}) }) }));
+  return () => {
+    root.unmount();
+  };
+}
+exports.createAdheseDevtools = createAdheseDevtools;
+//# sourceMappingURL=main.cjs.map

package/dist/cjs/main.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.cjs","sources":["../../src/main.tsx"],"sourcesContent":["import { createRoot } from 'react-dom/client';\nimport type { AdheseContext } from '@adhese/sdk';\nimport { StrictMode } from 'react';\nimport { Devtools } from './Devtools';\nimport { AdheseProvider } from './AdheseContext';\n\nexport function createAdheseDevtools(element: HTMLElement, context: AdheseContext): () => void {\n  const root = createRoot(element);\n\n  root.render((\n    <StrictMode>\n      <AdheseProvider adhese={context}>\n        <Devtools />\n      </AdheseProvider>\n    </StrictMode>\n  ));\n\n  return () => {\n    root.unmount();\n  };\n}\n"],"names":["createRoot","jsx","StrictMode","AdheseProvider","Devtools"],"mappings":";;;;;;;AAMgB,SAAA,qBAAqB,SAAsB,SAAoC;AACvF,QAAA,OAAOA,kBAAW,OAAO;AAE1B,OAAA,OACFC,+BAAAC,MAAAA,YAAA,EACC,UAACD,2BAAA,IAAAE,8BAAA,EAAe,QAAQ,SACtB,UAACF,+BAAAG,SAAAA,UAAA,CAAA,CAAS,EACZ,CAAA,EACF,CAAA,CACD;AAED,SAAO,MAAM;AACX,SAAK,QAAQ;AAAA,EAAA;AAEjB;;"}

package/dist/cjs/modifiedSlots.store.cjs

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vanilla = require("zustand/vanilla");
+const zustand = require("zustand");
+const middleware = require("zustand/middleware");
+const _package = require("./package.json.cjs");
+const storeName = `${_package.name}/modifiedSlots`;
+const modifiedSlotsStore = vanilla.createStore(middleware.persist(
+  (set) => ({
+    slots: /* @__PURE__ */ new Map(),
+    set(name, slot) {
+      set((state) => {
+        state.slots.set(name, slot);
+        return {
+          slots: new Map(state.slots)
+        };
+      });
+      return name;
+    },
+    remove(id) {
+      set((state) => {
+        state.slots.delete(id);
+        return {
+          slots: new Map(state.slots)
+        };
+      });
+    }
+  }),
+  {
+    name: storeName,
+    version: Number(_package.version.split(".")[0]),
+    storage: {
+      getItem(key) {
+        const data = JSON.parse(localStorage.getItem(key) ?? "");
+        if (!data) {
+          return null;
+        }
+        return {
+          state: {
+            ...data.state,
+            slots: new Map(data.state.slots)
+          }
+        };
+      },
+      setItem(key, newValue) {
+        const str = JSON.stringify({
+          state: {
+            ...newValue.state,
+            slots: Array.from(newValue.state.slots.entries())
+          }
+        }, null);
+        localStorage.setItem(key, str);
+      },
+      removeItem(key) {
+        localStorage.removeItem(key);
+      }
+    }
+  }
+));
+const useModifiedSlots = () => zustand.useStore(modifiedSlotsStore);
+exports.modifiedSlotsStore = modifiedSlotsStore;
+exports.useModifiedSlots = useModifiedSlots;
+//# sourceMappingURL=modifiedSlots.store.cjs.map

package/dist/cjs/modifiedSlots.store.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"modifiedSlots.store.cjs","sources":["../../src/modifiedSlots.store.ts"],"sourcesContent":["import { createStore } from 'zustand/vanilla';\nimport { useStore } from 'zustand';\nimport { type StorageValue, persist } from 'zustand/middleware';\nimport { name as packageName, version } from '../package.json';\n\ntype SlotOptions = {\n  format: string;\n  slot?: string;\n};\n\nexport type ModifiedSlotsStore = {\n  slots: Map<string, SlotOptions>;\n  set(name: string, slot: SlotOptions): string;\n  remove(id: string): void;\n};\n\nconst storeName = `${packageName}/modifiedSlots`;\n\nexport const modifiedSlotsStore = createStore(persist<ModifiedSlotsStore>(\n  set => ({\n    slots: new Map(),\n    set(name: string, slot: SlotOptions): string {\n      set((state) => {\n        state.slots.set(name, slot);\n\n        return {\n          slots: new Map(state.slots),\n        };\n      });\n\n      return name;\n    },\n    remove(id: string): void {\n      set((state) => {\n        state.slots.delete(id);\n\n        return {\n          slots: new Map(state.slots),\n        };\n      });\n    },\n  }),\n  {\n    name: storeName,\n    version: Number(version.split('.')[0]),\n    storage: {\n      getItem(key) {\n        const data = JSON.parse(localStorage.getItem(key) ?? '') as StorageValue<ModifiedSlotsStore> | null;\n\n        if (!data) {\n          return null;\n        }\n\n        return {\n          state: {\n            ...data.state,\n            slots: new Map(data.state.slots),\n          },\n        };\n      },\n      setItem(key, newValue) {\n        const str = JSON.stringify({\n          state: {\n            ...newValue.state,\n            slots: Array.from(newValue.state.slots.entries()),\n          },\n        }, null);\n        localStorage.setItem(key, str);\n      },\n      removeItem(key) {\n        localStorage.removeItem(key);\n      },\n    },\n  },\n));\n\nexport const useModifiedSlots = (): ModifiedSlotsStore => useStore(modifiedSlotsStore);\n"],"names":["packageName","createStore","persist","version","useStore"],"mappings":";;;;;;AAgBA,MAAM,YAAY,GAAGA,aAAW;AAEzB,MAAM,qBAAqBC,QAAY,YAAAC,WAAA;AAAA,EAC5C,CAAQ,SAAA;AAAA,IACN,2BAAW,IAAI;AAAA,IACf,IAAI,MAAc,MAA2B;AAC3C,UAAI,CAAC,UAAU;AACP,cAAA,MAAM,IAAI,MAAM,IAAI;AAEnB,eAAA;AAAA,UACL,OAAO,IAAI,IAAI,MAAM,KAAK;AAAA,QAAA;AAAA,MAC5B,CACD;AAEM,aAAA;AAAA,IACT;AAAA,IACA,OAAO,IAAkB;AACvB,UAAI,CAAC,UAAU;AACP,cAAA,MAAM,OAAO,EAAE;AAEd,eAAA;AAAA,UACL,OAAO,IAAI,IAAI,MAAM,KAAK;AAAA,QAAA;AAAA,MAC5B,CACD;AAAA,IACH;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,MAAM;AAAA,IACN,SAAS,OAAOC,SAAA,QAAQ,MAAM,GAAG,EAAE,CAAC,CAAC;AAAA,IACrC,SAAS;AAAA,MACP,QAAQ,KAAK;AACX,cAAM,OAAO,KAAK,MAAM,aAAa,QAAQ,GAAG,KAAK,EAAE;AAEvD,YAAI,CAAC,MAAM;AACF,iBAAA;AAAA,QACT;AAEO,eAAA;AAAA,UACL,OAAO;AAAA,YACL,GAAG,KAAK;AAAA,YACR,OAAO,IAAI,IAAI,KAAK,MAAM,KAAK;AAAA,UACjC;AAAA,QAAA;AAAA,MAEJ;AAAA,MACA,QAAQ,KAAK,UAAU;AACf,cAAA,MAAM,KAAK,UAAU;AAAA,UACzB,OAAO;AAAA,YACL,GAAG,SAAS;AAAA,YACZ,OAAO,MAAM,KAAK,SAAS,MAAM,MAAM,SAAS;AAAA,UAClD;AAAA,WACC,IAAI;AACM,qBAAA,QAAQ,KAAK,GAAG;AAAA,MAC/B;AAAA,MACA,WAAW,KAAK;AACd,qBAAa,WAAW,GAAG;AAAA,MAC7B;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAEY,MAAA,mBAAmB,MAA0BC,QAAAA,SAAS,kBAAkB;;;"}

package/dist/cjs/package.json.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const name = "@adhese/sdk-devtools";
+const version = "0.12.0";
+exports.name = name;
+exports.version = version;
+//# sourceMappingURL=package.json.cjs.map

package/dist/cjs/package.json.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"package.json.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/cjs/sdkDevtools.cjs

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const sdkShared = require("@adhese/sdk-shared");
+const _package = require("./package.json.cjs");
+const devtools_composables = require("./devtools.composables.cjs");
+const devtoolsPlugin = (context, plugin) => {
+  const logger = sdkShared.useLogger({
+    scope: `${_package.name}@${_package.version}`
+  }, { context, plugin });
+  devtools_composables.useDevtoolsUi(context, plugin.hooks);
+  devtools_composables.useModifiedSlotsHijack(context, plugin.hooks, logger);
+  return {
+    name: "devtools"
+  };
+};
+exports.devtoolsPlugin = devtoolsPlugin;
+//# sourceMappingURL=sdkDevtools.cjs.map

package/dist/cjs/sdkDevtools.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sdkDevtools.cjs","sources":["../../src/sdkDevtools.ts"],"sourcesContent":["import type { AdhesePlugin } from '@adhese/sdk';\nimport { useLogger } from '@adhese/sdk-shared';\nimport { name, version } from '../package.json';\nimport { useDevtoolsUi, useModifiedSlotsHijack } from './devtools.composables';\n\nexport type { DevtoolsSlotPluginOptions } from './devtools.composables';\n\nexport const devtoolsPlugin: AdhesePlugin<{\n  name: 'devtools';\n}> = (context, plugin) => {\n  const logger = useLogger({\n    scope: `${name}@${version}`,\n  }, { context, plugin });\n\n  useDevtoolsUi(context, plugin.hooks);\n\n  useModifiedSlotsHijack(context, plugin.hooks, logger);\n\n  return {\n    name: 'devtools',\n  };\n};\n"],"names":["useLogger","name","version","useDevtoolsUi","useModifiedSlotsHijack"],"mappings":";;;;;AAOa,MAAA,iBAER,CAAC,SAAS,WAAW;AACxB,QAAM,SAASA,UAAAA,UAAU;AAAA,IACvB,OAAO,GAAGC,SAAAA,IAAI,IAAIC,SAAO,OAAA;AAAA,EAAA,GACxB,EAAE,SAAS,OAAA,CAAQ;AAERC,uBAAAA,cAAA,SAAS,OAAO,KAAK;AAEZC,uBAAAA,uBAAA,SAAS,OAAO,OAAO,MAAM;AAE7C,SAAA;AAAA,IACL,MAAM;AAAA,EAAA;AAEV;;"}

package/dist/cjs/utils.cjs

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const clsx = require("clsx");
+const tailwindMerge = require("tailwind-merge");
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+exports.cn = cn;
+//# sourceMappingURL=utils.cjs.map

package/dist/cjs/utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.cjs","sources":["../../src/utils.ts"],"sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: Array<ClassValue>): string {\n  return twMerge(clsx(inputs));\n}\n"],"names":["twMerge","clsx"],"mappings":";;;;AAGO,SAAS,MAAM,QAAmC;AAChD,SAAAA,sBAAQC,KAAAA,KAAK,MAAM,CAAC;AAC7B;;"}

package/dist/components/badge.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../utils.js";
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({ className, variant, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn(badgeVariants({ variant }), className), ...props });
+}
+export {
+  Badge,
+  badgeVariants
+};
+//# sourceMappingURL=badge.js.map

package/dist/components/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","sources":["../../src/components/badge.tsx"],"sourcesContent":["import { type VariantProps, cva } from 'class-variance-authority';\nimport type { HTMLAttributes, ReactElement } from 'react';\nimport { cn } from '../utils';\n\nconst badgeVariants = cva(\n  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',\n  {\n    variants: {\n      variant: {\n        default:\n          'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',\n        secondary:\n          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        destructive:\n          'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',\n        outline: 'text-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n);\n\nexport interface BadgeProps\n  extends HTMLAttributes<HTMLDivElement>,\n  VariantProps<typeof badgeVariants> {}\n\n// eslint-disable-next-line ts/naming-convention\nfunction Badge({ className, variant, ...props }: BadgeProps): ReactElement {\n  return (\n    <div className={cn(badgeVariants({ variant }), className)} {...props} />\n  );\n}\n\nexport { Badge, badgeVariants };\n"],"names":[],"mappings":";;;AAIA,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IACX;AAAA,EACF;AACF;AAOA,SAAS,MAAM,EAAE,WAAW,SAAS,GAAG,SAAmC;AACzE,SACG,oBAAA,OAAA,EAAI,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS,GAAI,GAAG,MAAO,CAAA;AAE1E;"}

package/dist/components/button.js

@@ -0,0 +1,49 @@
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
+import { cn } from "../utils.js";
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-6 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+const Button = forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Component = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+export {
+  Button,
+  buttonVariants
+};
+//# sourceMappingURL=button.js.map

package/dist/components/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sources":["../../src/components/button.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport { type VariantProps, cva } from 'class-variance-authority';\nimport { type ButtonHTMLAttributes, forwardRef } from 'react';\nimport { cn } from '../utils';\n\nconst buttonVariants = cva(\n  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        default:\n          'bg-primary text-primary-foreground shadow hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',\n        outline:\n          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',\n        secondary:\n          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-9 px-4 py-2',\n        sm: 'h-6 rounded-md px-3 text-xs',\n        lg: 'h-10 rounded-md px-8',\n        icon: 'h-9 w-9',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\nexport interface ButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>,\n  VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n}\n\n// eslint-disable-next-line ts/naming-convention\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    // eslint-disable-next-line ts/naming-convention\n    const Component = asChild ? Slot : 'button';\n    return (\n      <Component\n        className={cn(buttonVariants({ variant, size, className }))}\n        ref={ref}\n        {...props}\n      />\n    );\n  },\n);\nButton.displayName = 'Button';\n\nexport { Button, buttonVariants };\n"],"names":[],"mappings":";;;;;AAKA,MAAM,iBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,WACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AASA,MAAM,SAAS;AAAA,EACb,CAAC,EAAE,WAAW,SAAS,MAAM,UAAU,OAAO,GAAG,MAAM,GAAG,QAAQ;AAE1D,UAAA,YAAY,UAAU,OAAO;AAEjC,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,eAAe,EAAE,SAAS,MAAM,UAAA,CAAW,CAAC;AAAA,QAC1D;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AACA,OAAO,cAAc;"}

package/dist/components/editSlot.js

@@ -0,0 +1,110 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useMemo, useState, useEffect } from "react";
+import { pick, watch } from "@adhese/sdk-shared";
+import { object, string } from "@adhese/sdk-shared/validators";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Pencil1Icon } from "@radix-ui/react-icons";
+import { useAdheseContext } from "../AdheseContext.js";
+import { useModifiedSlots } from "../modifiedSlots.store.js";
+import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription } from "./sheet.js";
+import { Form, FormField, FormItem, FormLabel, FormDescription, FormControl, FormMessage } from "./form.js";
+import { Input } from "./input.js";
+import { buttonVariants, Button } from "./button.js";
+const slotSchema = object({
+  format: string().min(1),
+  slot: string().optional()
+});
+function EditSlot({
+  id
+}) {
+  const slot = useSlot(id);
+  return /* @__PURE__ */ jsxs(Sheet, { children: [
+    /* @__PURE__ */ jsx(
+      SheetTrigger,
+      {
+        "aria-label": "Edit slot",
+        className: buttonVariants({
+          variant: "ghost",
+          size: "sm"
+        }),
+        children: /* @__PURE__ */ jsx(Pencil1Icon, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(SheetContent, { children: slot && /* @__PURE__ */ jsx(EditSlotForm, { slot }) })
+  ] });
+}
+function EditSlotForm({
+  slot
+}) {
+  const modifiedSlots = useModifiedSlots();
+  const modifiedSlot = useMemo(() => modifiedSlots.slots.get((slot == null ? void 0 : slot.name) ?? ""), [modifiedSlots, slot]);
+  const defaultValues = useMemo(() => pick(modifiedSlot ?? {
+    format: slot.format,
+    slot: slot.slot ?? ""
+  }, ["format", "slot"]), [slot, modifiedSlot]);
+  const form = useForm({
+    resolver: zodResolver(slotSchema),
+    defaultValues
+  });
+  const onSubmit = (data) => {
+    modifiedSlots.set(slot.name, pick({
+      ...slot,
+      ...data
+    }, ["format", "slot"]));
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(SheetHeader, { className: "mb-8", children: [
+      /* @__PURE__ */ jsx(SheetTitle, { children: "Edit slot" }),
+      /* @__PURE__ */ jsx(SheetDescription, { children: slot.name })
+    ] }),
+    /* @__PURE__ */ jsx(Form, { ...form, children: /* @__PURE__ */ jsxs("form", { onSubmit: form.handleSubmit(onSubmit), children: [
+      /* @__PURE__ */ jsx(
+        FormField,
+        {
+          control: form.control,
+          name: "format",
+          render: ({ field }) => /* @__PURE__ */ jsx(SlotFormItem, { label: "Format", children: /* @__PURE__ */ jsx(Input, { ...field }) })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FormField,
+        {
+          control: form.control,
+          name: "slot",
+          render: ({ field }) => /* @__PURE__ */ jsx(SlotFormItem, { label: "Slot", children: /* @__PURE__ */ jsx(Input, { ...field }) })
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { className: "w-full mt-10", children: "Edit" })
+    ] }) })
+  ] });
+}
+function SlotFormItem({
+  label,
+  description,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(FormItem, { className: "mb-3", children: [
+    /* @__PURE__ */ jsx(FormLabel, { children: label }),
+    description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
+    /* @__PURE__ */ jsx(FormControl, { children }),
+    /* @__PURE__ */ jsx(FormMessage, {})
+  ] });
+}
+function useSlot(id) {
+  const adheseContext = useAdheseContext();
+  const [slot, setSlot] = useState(adheseContext == null ? void 0 : adheseContext.slots.get(id));
+  useEffect(() => {
+    if (!adheseContext) {
+      return;
+    }
+    return watch(() => adheseContext.slots, (slots) => {
+      setSlot(slots.get(id));
+    }, { immediate: true, deep: true });
+  }, [adheseContext, id]);
+  return slot;
+}
+export {
+  EditSlot
+};
+//# sourceMappingURL=editSlot.js.map

package/dist/components/editSlot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editSlot.js","sources":["../../src/components/editSlot.tsx"],"sourcesContent":["import { type PropsWithChildren, type ReactElement, useEffect, useMemo, useState } from 'react';\nimport { pick, watch } from '@adhese/sdk-shared';\nimport type { AdheseSlot } from '@adhese/sdk';\nimport { type TypeOf, object, string } from '@adhese/sdk-shared/validators';\nimport { type SubmitHandler, useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { Pencil1Icon } from '@radix-ui/react-icons';\nimport { useAdheseContext } from '../AdheseContext';\nimport { useModifiedSlots } from '../modifiedSlots.store';\nimport { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from './sheet';\nimport { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from './form';\nimport { Input } from './input';\nimport { Button, buttonVariants } from './button';\n\nconst slotSchema = object({\n  format: string().min(1),\n  slot: string().optional(),\n});\n\ntype SlotSchema = TypeOf<typeof slotSchema>;\n\n// eslint-disable-next-line ts/naming-convention\nexport function EditSlot({\n  id,\n}: {\n  id: string;\n}): ReactElement {\n  const slot = useSlot(id);\n\n  return (\n    <Sheet>\n      <SheetTrigger\n        aria-label=\"Edit slot\"\n        className={buttonVariants({\n          variant: 'ghost',\n          size: 'sm',\n        })}\n      >\n        <Pencil1Icon />\n      </SheetTrigger>\n      <SheetContent>\n        {slot && <EditSlotForm slot={slot} />}\n      </SheetContent>\n    </Sheet>\n  );\n}\n\n// eslint-disable-next-line ts/naming-convention\nfunction EditSlotForm({\n  slot,\n}: {\n  slot: AdheseSlot;\n}): ReactElement {\n  const modifiedSlots = useModifiedSlots();\n  const modifiedSlot = useMemo(() => modifiedSlots.slots.get(slot?.name ?? ''), [modifiedSlots, slot]);\n\n  const defaultValues = useMemo(() => pick(modifiedSlot ?? {\n    format: slot.format,\n    slot: slot.slot ?? '',\n  }, ['format', 'slot']), [slot, modifiedSlot]);\n\n  const form = useForm<SlotSchema>({\n    resolver: zodResolver(slotSchema),\n    defaultValues,\n  });\n\n  const onSubmit: SubmitHandler<SlotSchema> = (data) => {\n    modifiedSlots.set(slot.name, pick({\n      ...slot,\n      ...data,\n    }, ['format', 'slot']));\n  };\n\n  return (\n    <>\n      <SheetHeader className=\"mb-8\">\n        <SheetTitle>\n          Edit slot\n        </SheetTitle>\n        <SheetDescription>\n          {slot.name}\n        </SheetDescription>\n      </SheetHeader>\n\n      <Form {...form}>\n        {/* eslint-disable-next-line ts/no-misused-promises */}\n        <form onSubmit={form.handleSubmit(onSubmit)}>\n          <FormField\n            control={form.control}\n            name=\"format\"\n            render={({ field }) => (\n              <SlotFormItem label=\"Format\">\n                <Input {...field} />\n              </SlotFormItem>\n            )}\n          />\n          <FormField\n            control={form.control}\n            name=\"slot\"\n            render={({ field }) => (\n              <SlotFormItem label=\"Slot\">\n                <Input {...field} />\n              </SlotFormItem>\n            )}\n          />\n\n          <Button className=\"w-full mt-10\">\n            Edit\n          </Button>\n        </form>\n      </Form>\n    </>\n  );\n}\n\n// eslint-disable-next-line ts/naming-convention\nfunction SlotFormItem({\n  label,\n  description,\n  children,\n}: PropsWithChildren<{\n  label: string;\n  description?: string;\n}>): ReactElement {\n  return (\n    <FormItem className=\"mb-3\">\n      <FormLabel>{label}</FormLabel>\n      {description && <FormDescription>{description}</FormDescription>}\n      <FormControl>\n        {children}\n      </FormControl>\n      <FormMessage />\n    </FormItem>\n  );\n}\n\nfunction useSlot(id: string): AdheseSlot | undefined {\n  const adheseContext = useAdheseContext();\n  const [slot, setSlot] = useState(adheseContext?.slots.get(id));\n\n  useEffect(() => {\n    if (!adheseContext) {\n      return;\n    }\n\n    return watch(() => adheseContext.slots, (slots) => {\n      setSlot(slots.get(id));\n    }, { immediate: true, deep: true });\n  }, [adheseContext, id]);\n  return slot;\n}\n"],"names":[],"mappings":"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"}

package/dist/components/form.js

@@ -0,0 +1,110 @@
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { useFormContext, FormProvider, Controller } from "react-hook-form";
+import { createContext, forwardRef, useId, useContext } from "react";
+import { cn } from "../utils.js";
+import { Label } from "./label.js";
+const Form = FormProvider;
+const FormFieldContext = createContext(
+  {}
+);
+function FormField({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
+}
+const FormItemContext = createContext(
+  {}
+);
+function useFormField() {
+  const fieldContext = useContext(FormFieldContext);
+  const itemContext = useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+  const fieldState = getFieldState(fieldContext.name, formState);
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+  const { id } = itemContext;
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState
+  };
+}
+const FormItem = forwardRef(({ className, ...props }, ref) => {
+  const id = useId();
+  return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx("div", { ref, className: cn("space-y-2", className), ...props }) });
+});
+FormItem.displayName = "FormItem";
+const FormLabel = forwardRef(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    Label,
+    {
+      ref,
+      className: cn(error && "text-destructive", className),
+      htmlFor: formItemId,
+      ...props
+    }
+  );
+});
+FormLabel.displayName = "FormLabel";
+const FormControl = forwardRef(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    Slot,
+    {
+      ref,
+      id: formItemId,
+      "aria-describedby": error ? `${formDescriptionId} ${formMessageId}` : `${formDescriptionId}`,
+      "aria-invalid": !!error,
+      ...props
+    }
+  );
+});
+FormControl.displayName = "FormControl";
+const FormDescription = forwardRef(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      id: formDescriptionId,
+      className: cn("text-[0.8rem] text-muted-foreground", className),
+      ...props
+    }
+  );
+});
+FormDescription.displayName = "FormDescription";
+const FormMessage = forwardRef(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error == null ? void 0 : error.message) : children;
+  if (!body) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      id: formMessageId,
+      className: cn("text-[0.8rem] font-medium text-destructive", className),
+      ...props,
+      children: body
+    }
+  );
+});
+FormMessage.displayName = "FormMessage";
+export {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  useFormField
+};
+//# sourceMappingURL=form.js.map

package/dist/components/form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.js","sources":["../../src/components/form.tsx"],"sourcesContent":["// eslint-disable-next-line ts/naming-convention\nimport type * as LabelPrimitive from '@radix-ui/react-label';\nimport { Slot } from '@radix-ui/react-slot';\nimport {\n  Controller,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues,\n  FormProvider,\n  useFormContext,\n} from 'react-hook-form';\n\nimport {\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n  type HTMLAttributes,\n  createContext,\n  forwardRef,\n  useContext,\n  useId,\n} from 'react';\nimport { cn } from '../utils';\nimport { Label } from './label';\n\n// eslint-disable-next-line ts/naming-convention\nconst Form = FormProvider;\n\ntype FormFieldContextValue<\n  T extends FieldValues = FieldValues,\n  U extends FieldPath<T> = FieldPath<T>,\n> = {\n  name: U;\n};\n\n// eslint-disable-next-line ts/naming-convention\nconst FormFieldContext = createContext<FormFieldContextValue>(\n  {} as FormFieldContextValue,\n);\n\n// eslint-disable-next-line ts/naming-convention,ts/explicit-function-return-type,ts/explicit-module-boundary-types\nfunction FormField<\n  T extends FieldValues = FieldValues,\n  U extends FieldPath<T> = FieldPath<T>,\n>({\n  ...props\n}: ControllerProps<T, U>) {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  );\n}\n\ntype FormItemContextValue = {\n  id: string;\n};\n\n// eslint-disable-next-line ts/naming-convention\nconst FormItemContext = createContext<FormItemContextValue>(\n  {} as FormItemContextValue,\n);\n\n// eslint-disable-next-line ts/explicit-function-return-type,ts/explicit-module-boundary-types\nfunction useFormField() {\n  const fieldContext = useContext(FormFieldContext);\n  const itemContext = useContext(FormItemContext);\n  const { getFieldState, formState } = useFormContext();\n\n  const fieldState = getFieldState(fieldContext.name, formState);\n\n  if (!fieldContext) {\n    throw new Error('useFormField should be used within <FormField>');\n  }\n\n  const { id } = itemContext;\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  };\n}\n\n// eslint-disable-next-line ts/naming-convention\nconst FormItem = forwardRef<\n  HTMLDivElement,\n  HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const id = useId();\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <div ref={ref} className={cn('space-y-2', className)} {...props} />\n    </FormItemContext.Provider>\n  );\n});\nFormItem.displayName = 'FormItem';\n\n// eslint-disable-next-line ts/naming-convention\nconst FormLabel = forwardRef<\n  ElementRef<typeof LabelPrimitive.Root>,\n  ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\n>(({ className, ...props }, ref) => {\n  const { error, formItemId } = useFormField();\n\n  return (\n    <Label\n      ref={ref}\n      className={cn(error && 'text-destructive', className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  );\n});\nFormLabel.displayName = 'FormLabel';\n\n// eslint-disable-next-line ts/naming-convention\nconst FormControl = forwardRef<\n  ElementRef<typeof Slot>,\n  ComponentPropsWithoutRef<typeof Slot>\n>(({ ...props }, ref) => {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();\n\n  return (\n    <Slot\n      ref={ref}\n      id={formItemId}\n      aria-describedby={\n        error ? `${formDescriptionId} ${formMessageId}` : `${formDescriptionId}`\n      }\n      aria-invalid={!!error}\n      {...props}\n    />\n  );\n});\nFormControl.displayName = 'FormControl';\n\n// eslint-disable-next-line ts/naming-convention\nconst FormDescription = forwardRef<\n  HTMLParagraphElement,\n  HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n  const { formDescriptionId } = useFormField();\n\n  return (\n    <p\n      ref={ref}\n      id={formDescriptionId}\n      className={cn('text-[0.8rem] text-muted-foreground', className)}\n      {...props}\n    />\n  );\n});\nFormDescription.displayName = 'FormDescription';\n\n// eslint-disable-next-line ts/naming-convention\nconst FormMessage = forwardRef<\n  HTMLParagraphElement,\n  HTMLAttributes<HTMLParagraphElement>\n>(({ className, children, ...props }, ref) => {\n  const { error, formMessageId } = useFormField();\n  const body = error ? String(error?.message) : children;\n\n  if (!body) {\n    return null;\n  }\n\n  return (\n    <p\n      ref={ref}\n      id={formMessageId}\n      className={cn('text-[0.8rem] font-medium text-destructive', className)}\n      {...props}\n    >\n      {body}\n    </p>\n  );\n});\nFormMessage.displayName = 'FormMessage';\n\nexport {\n  useFormField,\n  Form,\n  FormItem,\n  FormLabel,\n  FormControl,\n  FormDescription,\n  FormMessage,\n  FormField,\n};\n"],"names":[],"mappings":";;;;;;AAyBA,MAAM,OAAO;AAUb,MAAM,mBAAmB;AAAA,EACvB,CAAC;AACH;AAGA,SAAS,UAGP;AAAA,EACA,GAAG;AACL,GAA0B;AACxB,SACG,oBAAA,iBAAiB,UAAjB,EAA0B,OAAO,EAAE,MAAM,MAAM,KAAA,GAC9C,UAAA,oBAAC,YAAY,EAAA,GAAG,OAAO,EACzB,CAAA;AAEJ;AAOA,MAAM,kBAAkB;AAAA,EACtB,CAAC;AACH;AAGA,SAAS,eAAe;AAChB,QAAA,eAAe,WAAW,gBAAgB;AAC1C,QAAA,cAAc,WAAW,eAAe;AAC9C,QAAM,EAAE,eAAe,UAAU,IAAI,eAAe;AAEpD,QAAM,aAAa,cAAc,aAAa,MAAM,SAAS;AAE7D,MAAI,CAAC,cAAc;AACX,UAAA,IAAI,MAAM,gDAAgD;AAAA,EAClE;AAEM,QAAA,EAAE,GAAO,IAAA;AAER,SAAA;AAAA,IACL;AAAA,IACA,MAAM,aAAa;AAAA,IACnB,YAAY,GAAG,EAAE;AAAA,IACjB,mBAAmB,GAAG,EAAE;AAAA,IACxB,eAAe,GAAG,EAAE;AAAA,IACpB,GAAG;AAAA,EAAA;AAEP;AAGM,MAAA,WAAW,WAGf,CAAC,EAAE,WAAW,GAAG,SAAS,QAAQ;AAClC,QAAM,KAAK;AAEX,6BACG,gBAAgB,UAAhB,EAAyB,OAAO,EAAE,MACjC,UAAA,oBAAC,OAAI,EAAA,KAAU,WAAW,GAAG,aAAa,SAAS,GAAI,GAAG,OAAO,EACnE,CAAA;AAEJ,CAAC;AACD,SAAS,cAAc;AAGjB,MAAA,YAAY,WAGhB,CAAC,EAAE,WAAW,GAAG,SAAS,QAAQ;AAClC,QAAM,EAAE,OAAO,WAAW,IAAI,aAAa;AAGzC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,SAAS,oBAAoB,SAAS;AAAA,MACpD,SAAS;AAAA,MACR,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AACD,UAAU,cAAc;AAGxB,MAAM,cAAc,WAGlB,CAAC,EAAE,GAAG,MAAA,GAAS,QAAQ;AACvB,QAAM,EAAE,OAAO,YAAY,mBAAmB,cAAA,IAAkB;AAG9D,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,IAAI;AAAA,MACJ,oBACE,QAAQ,GAAG,iBAAiB,IAAI,aAAa,KAAK,GAAG,iBAAiB;AAAA,MAExE,gBAAc,CAAC,CAAC;AAAA,MACf,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AACD,YAAY,cAAc;AAGpB,MAAA,kBAAkB,WAGtB,CAAC,EAAE,WAAW,GAAG,SAAS,QAAQ;AAC5B,QAAA,EAAE,sBAAsB;AAG5B,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,IAAI;AAAA,MACJ,WAAW,GAAG,uCAAuC,SAAS;AAAA,MAC7D,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AACD,gBAAgB,cAAc;AAGxB,MAAA,cAAc,WAGlB,CAAC,EAAE,WAAW,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC5C,QAAM,EAAE,OAAO,cAAc,IAAI,aAAa;AAC9C,QAAM,OAAO,QAAQ,OAAO,+BAAO,OAAO,IAAI;AAE9C,MAAI,CAAC,MAAM;AACF,WAAA;AAAA,EACT;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,IAAI;AAAA,MACJ,WAAW,GAAG,8CAA8C,SAAS;AAAA,MACpE,GAAG;AAAA,MAEH,UAAA;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AACD,YAAY,cAAc;"}