@satoshibits/react-json-schema-builder 1.1.2 → 1.1.3

package/dist/index.es41.js

@@ -1,117 +1,89 @@
-import { jsx as e, jsxs as n } from "react/jsx-runtime";
-import { Root as l, Content as i, Close as r, Title as d, Description as c, Portal as g, Overlay as f } from "./index.es76.js";
-import { cn as o } from "./index.es22.js";
-import u from "./index.es30.js";
-function D({
-  ...t
-}) {
-  return /* @__PURE__ */ e(l, { "data-slot": "dialog", ...t });
-}
-function m({
-  ...t
-}) {
-  return /* @__PURE__ */ e(g, { "data-slot": "dialog-portal", ...t });
-}
-function p({
-  className: t,
-  ...a
-}) {
-  return /* @__PURE__ */ e(
-    f,
-    {
-      "data-slot": "dialog-overlay",
-      className: o(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
-        t
-      ),
-      ...a
-    }
-  );
-}
-function y({
-  className: t,
-  children: a,
-  ...s
-}) {
-  return /* @__PURE__ */ n(m, { "data-slot": "dialog-portal", children: [
-    /* @__PURE__ */ e(p, {}),
-    /* @__PURE__ */ n(
-      i,
-      {
-        "data-slot": "dialog-content",
-        className: o(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
-          t
-        ),
-        ...s,
-        children: [
-          a,
-          /* @__PURE__ */ n(r, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", children: [
-            /* @__PURE__ */ e(u, {}),
-            /* @__PURE__ */ e("span", { className: "sr-only", children: "Close" })
-          ] })
-        ]
-      }
-    )
-  ] });
-}
-function N({ className: t, ...a }) {
-  return /* @__PURE__ */ e(
+import { jsx as m } from "react/jsx-runtime";
+import * as s from "react";
+import { Slot as f } from "./index.es34.js";
+import { FormProvider as u, Controller as F, useFormContext as x, useFormState as I } from "react-hook-form";
+import { cn as a } from "./index.es22.js";
+import { Label as g } from "./index.es15.js";
+const S = u, c = s.createContext(
+  {}
+), $ = ({
+  ...e
+}) => /* @__PURE__ */ m(c.Provider, { value: { name: e.name }, children: /* @__PURE__ */ m(F, { ...e }) }), d = () => {
+  const e = s.useContext(c), r = s.useContext(l), { getFieldState: t } = x(), o = I({ name: e.name }), n = t(e.name, o);
+  if (!e)
+    throw new Error("useFormField should be used within <FormField>");
+  const { id: i } = r;
+  return {
+    id: i,
+    name: e.name,
+    formItemId: `${i}-form-item`,
+    formDescriptionId: `${i}-form-item-description`,
+    formMessageId: `${i}-form-item-message`,
+    ...n
+  };
+}, l = s.createContext(
+  {}
+);
+function M({ className: e, ...r }) {
+  const t = s.useId();
+  return /* @__PURE__ */ m(l.Provider, { value: { id: t }, children: /* @__PURE__ */ m(
     "div",
     {
-      "data-slot": "dialog-header",
-      className: o("flex flex-col gap-2 text-center sm:text-left", t),
-      ...a
+      "data-slot": "form-item",
+      className: a("grid gap-2", e),
+      ...r
     }
-  );
+  ) });
 }
-function z({ className: t, ...a }) {
-  return /* @__PURE__ */ e(
-    "div",
+function w({
+  className: e,
+  ...r
+}) {
+  const { error: t, formItemId: o } = d();
+  return /* @__PURE__ */ m(
+    g,
     {
-      "data-slot": "dialog-footer",
-      className: o(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        t
-      ),
-      ...a
+      "data-slot": "form-label",
+      "data-error": !!t,
+      className: a("data-[error=true]:text-destructive-foreground", e),
+      htmlFor: o,
+      ...r
     }
   );
 }
-function w({
-  className: t,
-  ...a
-}) {
-  return /* @__PURE__ */ e(
-    d,
+function N({ ...e }) {
+  const { error: r, formItemId: t, formDescriptionId: o, formMessageId: n } = d();
+  return /* @__PURE__ */ m(
+    f,
     {
-      "data-slot": "dialog-title",
-      className: o("text-lg leading-none font-semibold", t),
-      ...a
+      "data-slot": "form-control",
+      id: t,
+      "aria-describedby": r ? `${o} ${n}` : `${o}`,
+      "aria-invalid": !!r,
+      ...e
     }
   );
 }
-function k({
-  className: t,
-  ...a
-}) {
-  return /* @__PURE__ */ e(
-    c,
+function P({ className: e, ...r }) {
+  const { error: t, formMessageId: o } = d(), n = t ? String(t?.message ?? "") : r.children;
+  return n ? /* @__PURE__ */ m(
+    "p",
     {
-      "data-slot": "dialog-description",
-      className: o("text-muted-foreground text-sm", t),
-      ...a
+      "data-slot": "form-message",
+      id: o,
+      className: a("text-destructive-foreground text-sm", e),
+      ...r,
+      children: n
     }
-  );
+  ) : null;
 }
 export {
-  D as Dialog,
-  y as DialogContent,
-  k as DialogDescription,
-  z as DialogFooter,
-  N as DialogHeader,
-  p as DialogOverlay,
-  m as DialogPortal,
-  w as DialogTitle
+  S as Form,
+  N as FormControl,
+  $ as FormField,
+  M as FormItem,
+  w as FormLabel,
+  P as FormMessage,
+  d as useFormField
 };
 //# sourceMappingURL=index.es41.js.map

package/dist/index.es41.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es41.js","sources":["../src/components/ui/dialog.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { XIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Dialog({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content>) {\n  return (\n    <DialogPortal data-slot=\"dialog-portal\">\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <DialogPrimitive.Close className=\"ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\">\n          <XIcon />\n          <span className=\"sr-only\">Close</span>\n        </DialogPrimitive.Close>\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-2 text-center sm:text-left\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-lg leading-none font-semibold\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n"],"names":["Dialog","props","DialogPrimitive.Root","DialogPortal","DialogPrimitive.Portal","DialogOverlay","className","jsx","DialogPrimitive.Overlay","cn","DialogContent","children","jsxs","DialogPrimitive.Content","DialogPrimitive.Close","XIcon","DialogHeader","DialogFooter","DialogTitle","DialogPrimitive.Title","DialogDescription","DialogPrimitive.Description"],"mappings":";;;;AAMA,SAASA,EAAO;AAAA,EACd,GAAGC;AACL,GAAsD;AACpD,2BAAQC,GAAA,EAAqB,aAAU,UAAU,GAAGD,GAAO;AAC7D;AAQA,SAASE,EAAa;AAAA,EACpB,GAAGF;AACL,GAAwD;AACtD,2BAAQG,GAAA,EAAuB,aAAU,iBAAiB,GAAGH,GAAO;AACtE;AAQA,SAASI,EAAc;AAAA,EACrB,WAAAC;AAAA,EACA,GAAGL;AACL,GAAyD;AAErD,SAAA,gBAAAM;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACAH;AAAA,MACF;AAAA,MACC,GAAGL;AAAA,IAAA;AAAA,EACN;AAEJ;AAEA,SAASS,EAAc;AAAA,EACrB,WAAAJ;AAAA,EACA,UAAAK;AAAA,EACA,GAAGV;AACL,GAAyD;AAErD,SAAA,gBAAAW,EAACT,GAAa,EAAA,aAAU,iBACtB,UAAA;AAAA,IAAA,gBAAAI,EAACF,GAAc,EAAA;AAAA,IACf,gBAAAO;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,aAAU;AAAA,QACV,WAAWJ;AAAA,UACT;AAAA,UACAH;AAAA,QACF;AAAA,QACC,GAAGL;AAAA,QAEH,UAAA;AAAA,UAAAU;AAAA,UACA,gBAAAC,EAAAE,GAAA,EAAsB,WAAU,qWAC/B,UAAA;AAAA,YAAA,gBAAAP,EAACQ,GAAM,EAAA;AAAA,YACN,gBAAAR,EAAA,QAAA,EAAK,WAAU,WAAU,UAAK,QAAA,CAAA;AAAA,UAAA,EACjC,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;AAEA,SAASS,EAAa,EAAE,WAAAV,GAAW,GAAGL,KAAsC;AAExE,SAAA,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWE,EAAG,gDAAgDH,CAAS;AAAA,MACtE,GAAGL;AAAA,IAAA;AAAA,EACN;AAEJ;AAEA,SAASgB,EAAa,EAAE,WAAAX,GAAW,GAAGL,KAAsC;AAExE,SAAA,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWE;AAAA,QACT;AAAA,QACAH;AAAA,MACF;AAAA,MACC,GAAGL;AAAA,IAAA;AAAA,EACN;AAEJ;AAEA,SAASiB,EAAY;AAAA,EACnB,WAAAZ;AAAA,EACA,GAAGL;AACL,GAAuD;AAEnD,SAAA,gBAAAM;AAAA,IAACY;AAAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWV,EAAG,sCAAsCH,CAAS;AAAA,MAC5D,GAAGL;AAAA,IAAA;AAAA,EACN;AAEJ;AAEA,SAASmB,EAAkB;AAAA,EACzB,WAAAd;AAAA,EACA,GAAGL;AACL,GAA6D;AAEzD,SAAA,gBAAAM;AAAA,IAACc;AAAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWZ,EAAG,iCAAiCH,CAAS;AAAA,MACvD,GAAGL;AAAA,IAAA;AAAA,EACN;AAEJ;"}
+{"version":3,"file":"index.es41.js","sources":["../src/components/ui/form.tsx"],"sourcesContent":["import * as React from \"react\";\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport {\n  Controller,\n  FormProvider,\n  useFormContext,\n  useFormState,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues,\n} from \"react-hook-form\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Label } from \"@/components/ui/label\";\n\nconst Form = FormProvider;\n\ninterface FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> {\n  name: TName;\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\n  {} as FormFieldContextValue,\n);\n\nconst FormField = <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  );\n};\n\nconst useFormField = () => {\n  const fieldContext = React.useContext(FormFieldContext);\n  const itemContext = React.useContext(FormItemContext);\n  const { getFieldState } = useFormContext();\n  const formState = useFormState({ name: fieldContext.name });\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\ninterface FormItemContextValue {\n  id: string;\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue>(\n  {} as FormItemContextValue,\n);\n\nfunction FormItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  const id = React.useId();\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <div\n        data-slot=\"form-item\"\n        className={cn(\"grid gap-2\", className)}\n        {...props}\n      />\n    </FormItemContext.Provider>\n  );\n}\n\nfunction FormLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  const { error, formItemId } = useFormField();\n\n  return (\n    <Label\n      data-slot=\"form-label\"\n      data-error={!!error}\n      className={cn(\"data-[error=true]:text-destructive-foreground\", className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  );\n}\n\nfunction FormControl({ ...props }: React.ComponentProps<typeof Slot>) {\n  const { error, formItemId, formDescriptionId, formMessageId } =\n    useFormField();\n\n  return (\n    <Slot\n      data-slot=\"form-control\"\n      id={formItemId}\n      aria-describedby={\n        !error\n          ? `${formDescriptionId}`\n          : `${formDescriptionId} ${formMessageId}`\n      }\n      aria-invalid={!!error}\n      {...props}\n    />\n  );\n}\n\nfunction FormDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  const { formDescriptionId } = useFormField();\n\n  return (\n    <p\n      data-slot=\"form-description\"\n      id={formDescriptionId}\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction FormMessage({ className, ...props }: React.ComponentProps<\"p\">) {\n  const { error, formMessageId } = useFormField();\n\n  const body = error ? String(error?.message ?? \"\") : props.children;\n\n  if (!body) {\n    return null;\n  }\n\n  return (\n    <p\n      data-slot=\"form-message\"\n      id={formMessageId}\n      className={cn(\"text-destructive-foreground text-sm\", className)}\n      {...props}\n    >\n      {body}\n    </p>\n  );\n}\n\nexport {\n  useFormField,\n  Form,\n  FormItem,\n  FormLabel,\n  FormControl,\n  FormDescription,\n  FormMessage,\n  FormField,\n};\n"],"names":["Form","FormProvider","FormFieldContext","React","FormField","props","jsx","Controller","useFormField","fieldContext","itemContext","FormItemContext","getFieldState","useFormContext","formState","useFormState","fieldState","id","FormItem","className","cn","FormLabel","error","formItemId","Label","FormControl","formDescriptionId","formMessageId","Slot","FormMessage","body"],"mappings":";;;;;;AAgBA,MAAMA,IAAOC,GASPC,IAAmBC,EAAM;AAAA,EAC7B,CAAA;AACF,GAEMC,IAAY,CAGhB;AAAA,EACA,GAAGC;AACL,MAEK,gBAAAC,EAAAJ,EAAiB,UAAjB,EAA0B,OAAO,EAAE,MAAMG,EAAM,KAAA,GAC9C,UAAA,gBAAAC,EAACC,GAAY,EAAA,GAAGF,EAAO,CAAA,GACzB,GAIEG,IAAe,MAAM;AACnB,QAAAC,IAAeN,EAAM,WAAWD,CAAgB,GAChDQ,IAAcP,EAAM,WAAWQ,CAAe,GAC9C,EAAE,eAAAC,EAAc,IAAIC,EAAe,GACnCC,IAAYC,EAAa,EAAE,MAAMN,EAAa,MAAM,GACpDO,IAAaJ,EAAcH,EAAa,MAAMK,CAAS;AAE7D,MAAI,CAACL;AACG,UAAA,IAAI,MAAM,gDAAgD;AAG5D,QAAA,EAAE,IAAAQ,MAAOP;AAER,SAAA;AAAA,IACL,IAAAO;AAAA,IACA,MAAMR,EAAa;AAAA,IACnB,YAAY,GAAGQ,CAAE;AAAA,IACjB,mBAAmB,GAAGA,CAAE;AAAA,IACxB,eAAe,GAAGA,CAAE;AAAA,IACpB,GAAGD;AAAA,EACL;AACF,GAMML,IAAkBR,EAAM;AAAA,EAC5B,CAAA;AACF;AAEA,SAASe,EAAS,EAAE,WAAAC,GAAW,GAAGd,KAAsC;AAChE,QAAAY,IAAKd,EAAM,MAAM;AAEvB,2BACGQ,EAAgB,UAAhB,EAAyB,OAAO,EAAE,IAAAM,KACjC,UAAA,gBAAAX;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWc,EAAG,cAAcD,CAAS;AAAA,MACpC,GAAGd;AAAA,IAAA;AAAA,EAAA,GAER;AAEJ;AAEA,SAASgB,EAAU;AAAA,EACjB,WAAAF;AAAA,EACA,GAAGd;AACL,GAAqD;AACnD,QAAM,EAAE,OAAAiB,GAAO,YAAAC,EAAW,IAAIf,EAAa;AAGzC,SAAA,gBAAAF;AAAA,IAACkB;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,cAAY,CAAC,CAACF;AAAA,MACd,WAAWF,EAAG,iDAAiDD,CAAS;AAAA,MACxE,SAASI;AAAA,MACR,GAAGlB;AAAA,IAAA;AAAA,EACN;AAEJ;AAEA,SAASoB,EAAY,EAAE,GAAGpB,KAA4C;AACpE,QAAM,EAAE,OAAAiB,GAAO,YAAAC,GAAY,mBAAAG,GAAmB,eAAAC,EAAA,IAC5CnB,EAAa;AAGb,SAAA,gBAAAF;AAAA,IAACsB;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,IAAIL;AAAA,MACJ,oBACGD,IAEG,GAAGI,CAAiB,IAAIC,CAAa,KADrC,GAAGD,CAAiB;AAAA,MAG1B,gBAAc,CAAC,CAACJ;AAAA,MACf,GAAGjB;AAAA,IAAA;AAAA,EACN;AAEJ;AAeA,SAASwB,EAAY,EAAE,WAAAV,GAAW,GAAGd,KAAoC;AACvE,QAAM,EAAE,OAAAiB,GAAO,eAAAK,EAAc,IAAInB,EAAa,GAExCsB,IAAOR,IAAQ,OAAOA,GAAO,WAAW,EAAE,IAAIjB,EAAM;AAE1D,SAAKyB,IAKH,gBAAAxB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,IAAIqB;AAAA,MACJ,WAAWP,EAAG,uCAAuCD,CAAS;AAAA,MAC7D,GAAGd;AAAA,MAEH,UAAAyB;AAAA,IAAA;AAAA,EACH,IAXO;AAaX;"}

package/dist/index.es42.js

@@ -1,59 +1,63 @@
-import { jsxs as s, jsx as t } from "react/jsx-runtime";
-import { useState as u } from "react";
-import { Select as f, SelectTrigger as h, SelectValue as p, SelectContent as S, SelectItem as C } from "./index.es14.js";
-import { Button as v } from "./index.es11.js";
-import g from "./index.es23.js";
-const V = ({
-  availableDefinitions: i,
-  addedConstraints: a,
-  onAdd: c
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { Label as h } from "./index.es15.js";
+import { Input as x } from "./index.es28.js";
+import { InputErrorWrapper as y } from "./index.es29.js";
+import { useState as p } from "react";
+import E from "./index.es30.js";
+const w = ({
+  values: t,
+  onAddValue: s,
+  renderValues: o,
+  maxValues: n,
+  onRemoveValue: c,
+  ...u
 }) => {
-  const [n, r] = u(), d = () => {
-    if (!n) return;
-    const e = i.find(
-      (m) => m.name === n
-    );
-    if (!e) return;
-    const l = {
-      name: n,
-      value: e.defaultValue
-    };
-    c([...a, l]), r(void 0);
-  }, o = i.filter(
-    (e) => !a.some((l) => l.name === e.name)
-  );
-  return (
-    //Don't render the component if there are no constraints to add
-    o.length > 0 && /* @__PURE__ */ s("div", { className: "flex items-end gap-2", children: [
-      /* @__PURE__ */ t("div", { className: "flex-1", children: /* @__PURE__ */ s(
-        f,
-        {
-          value: n,
-          onValueChange: (e) => {
-            r(e);
+  const [i, d] = p(), [l, f] = p();
+  return /* @__PURE__ */ m(
+    y,
+    {
+      errorCode: i,
+      errorDescription: l,
+      showError: !!i,
+      className: "space-y-2",
+      children: [
+        /* @__PURE__ */ e(h, { children: "Add Input" }),
+        /* @__PURE__ */ e(
+          x,
+          {
+            ...u,
+            onKeyDown: (r) => {
+              r.key === "Enter" && (r.preventDefault(), r.stopPropagation());
+            },
+            onKeyUp: (r) => {
+              if (r.key === "Enter") {
+                if (n && t.length >= n) {
+                  d("Maximum reached"), f(
+                    "You have reached the maximum number of values"
+                  );
+                  return;
+                }
+                s?.(r.currentTarget.value), r.currentTarget.value = "";
+              }
+            }
+          }
+        ),
+        o ? o() : /* @__PURE__ */ e("div", { className: "space-x-2 flex", children: t.map((r, a) => /* @__PURE__ */ m(
+          "div",
+          {
+            className: "flex items-center text-xs border rounded p-1 w-max mt-2",
+            children: [
+              /* @__PURE__ */ e("span", { children: r }),
+              /* @__PURE__ */ e("button", { onClick: () => c(a), children: /* @__PURE__ */ e(E, { size: 16 }) })
+            ]
           },
-          children: [
-            /* @__PURE__ */ t(h, { className: "w-full", "aria-label": "Select constraint", children: /* @__PURE__ */ t(p, { placeholder: "Select a constraint" }) }),
-            /* @__PURE__ */ t(S, { children: o.map((e) => /* @__PURE__ */ t(C, { value: e.name, children: e.label }, e.name)) })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ t(
-        v,
-        {
-          type: "button",
-          variant: "outline",
-          size: "icon",
-          onClick: d,
-          disabled: !n,
-          "aria-label": "Add constraint",
-          children: /* @__PURE__ */ t(g, { className: "h-4 w-4" })
-        }
-      )
-    ] })
+          `${a}-${r}`
+        )) })
+      ]
+    }
   );
 };
 export {
-  V as default
+  w as default
 };
 //# sourceMappingURL=index.es42.js.map

package/dist/index.es42.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es42.js","sources":["../src/packages/constraints/constraint-add.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\nimport { Button } from \"@/components/ui/button\";\nimport { Plus } from \"lucide-react\";\nimport { Constraint, ConstraintDefinition } from \"./context\";\n\ninterface ConstraintsSectionProps {\n  /** The available constraints for a specific schema type */\n  availableDefinitions: ConstraintDefinition[];\n  addedConstraints: Constraint[];\n  onAdd: (constraints: Constraint[]) => void;\n}\n\nconst ConstraintsAdd = ({\n  availableDefinitions,\n  addedConstraints,\n  onAdd,\n}: ConstraintsSectionProps) => {\n  const [selectedConstraintDefinition, setSelectedConstraintDefinition] =\n    useState<Constraint[\"name\"]>();\n\n  const handleAddConstraint = () => {\n    if (!selectedConstraintDefinition) return;\n\n    const definition = availableDefinitions.find(\n      (c) => c.name === selectedConstraintDefinition,\n    );\n    if (!definition) return;\n\n    const newConstraint: Constraint = {\n      name: selectedConstraintDefinition,\n      value: definition.defaultValue,\n    };\n\n    onAdd([...addedConstraints, newConstraint]);\n    setSelectedConstraintDefinition(undefined);\n  };\n\n  const unusedConstraintDefinitions = availableDefinitions.filter(\n    (constraint) => !addedConstraints.some((v) => v.name === constraint.name),\n  );\n\n  return (\n    //Don't render the component if there are no constraints to add\n    unusedConstraintDefinitions.length > 0 && (\n      <div className=\"flex items-end gap-2\">\n        <div className=\"flex-1\">\n          <Select\n            value={selectedConstraintDefinition}\n            onValueChange={(newVal) => {\n              setSelectedConstraintDefinition(newVal as Constraint[\"name\"]);\n            }}\n          >\n            <SelectTrigger className=\"w-full\" aria-label=\"Select constraint\">\n              <SelectValue placeholder=\"Select a constraint\" />\n            </SelectTrigger>\n            <SelectContent>\n              {unusedConstraintDefinitions.map((constraint) => (\n                <SelectItem key={constraint.name} value={constraint.name}>\n                  {constraint.label}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size=\"icon\"\n          onClick={handleAddConstraint}\n          disabled={!selectedConstraintDefinition}\n          aria-label=\"Add constraint\"\n        >\n          <Plus className=\"h-4 w-4\" />\n        </Button>\n      </div>\n    )\n  );\n};\n\nexport default ConstraintsAdd;\n"],"names":["ConstraintsAdd","availableDefinitions","addedConstraints","onAdd","selectedConstraintDefinition","setSelectedConstraintDefinition","useState","handleAddConstraint","definition","c","newConstraint","unusedConstraintDefinitions","constraint","v","jsxs","jsx","Select","newVal","SelectTrigger","SelectValue","SelectContent","SelectItem","Button","Plus"],"mappings":";;;;;AAmBA,MAAMA,IAAiB,CAAC;AAAA,EACtB,sBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,OAAAC;AACF,MAA+B;AAC7B,QAAM,CAACC,GAA8BC,CAA+B,IAClEC,EAA6B,GAEzBC,IAAsB,MAAM;AAChC,QAAI,CAACH,EAA8B;AAEnC,UAAMI,IAAaP,EAAqB;AAAA,MACtC,CAACQ,MAAMA,EAAE,SAASL;AAAA,IACpB;AACA,QAAI,CAACI,EAAY;AAEjB,UAAME,IAA4B;AAAA,MAChC,MAAMN;AAAA,MACN,OAAOI,EAAW;AAAA,IACpB;AAEA,IAAAL,EAAM,CAAC,GAAGD,GAAkBQ,CAAa,CAAC,GAC1CL,EAAgC,MAAS;AAAA,EAC3C,GAEMM,IAA8BV,EAAqB;AAAA,IACvD,CAACW,MAAe,CAACV,EAAiB,KAAK,CAACW,MAAMA,EAAE,SAASD,EAAW,IAAI;AAAA,EAC1E;AAEA;AAAA;AAAA,IAEED,EAA4B,SAAS,KAClC,gBAAAG,EAAA,OAAA,EAAI,WAAU,wBACb,UAAA;AAAA,MAAC,gBAAAC,EAAA,OAAA,EAAI,WAAU,UACb,UAAA,gBAAAD;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,OAAOZ;AAAA,UACP,eAAe,CAACa,MAAW;AACzB,YAAAZ,EAAgCY,CAA4B;AAAA,UAC9D;AAAA,UAEA,UAAA;AAAA,YAAC,gBAAAF,EAAAG,GAAA,EAAc,WAAU,UAAS,cAAW,qBAC3C,UAAC,gBAAAH,EAAAI,GAAA,EAAY,aAAY,sBAAA,CAAsB,EACjD,CAAA;AAAA,8BACCC,GACE,EAAA,UAAAT,EAA4B,IAAI,CAACC,MAC/B,gBAAAG,EAAAM,GAAA,EAAiC,OAAOT,EAAW,MACjD,UAAWA,EAAA,SADGA,EAAW,IAE5B,CACD,EACH,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,GAEJ;AAAA,MACA,gBAAAG;AAAA,QAACO;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,SAASf;AAAA,UACT,UAAU,CAACH;AAAA,UACX,cAAW;AAAA,UAEX,UAAA,gBAAAW,EAACQ,GAAK,EAAA,WAAU,UAAU,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC5B,EACF,CAAA;AAAA;AAGN;"}
+{"version":3,"file":"index.es42.js","sources":["../src/components/multi-input.tsx"],"sourcesContent":["import { Label } from \"@/components/ui/label\";\nimport { Input } from \"@/components/ui/input\";\nimport { X } from \"lucide-react\";\nimport { InputErrorWrapper } from \"@/components/input-error\";\nimport { useState } from \"react\";\n\ninterface MultiInputProps {\n  renderValues?: () => React.ReactNode;\n  values: string[];\n  onAddValue: (newVal: string) => void;\n  onRemoveValue: (index: number) => void;\n  maxValues?: number;\n}\n\nconst MultiInput = ({\n  values,\n  onAddValue,\n  renderValues,\n  maxValues,\n  onRemoveValue,\n  ...props\n}: MultiInputProps &\n  Omit<React.ComponentProps<\"input\">, \"value\" | \"onChange\">) => {\n  const [primaryError, setPrimaryError] = useState<string>();\n  const [errorDescription, setErrorDescription] = useState<string>();\n\n  return (\n    <InputErrorWrapper\n      errorCode={primaryError}\n      errorDescription={errorDescription}\n      showError={!!primaryError}\n      className=\"space-y-2\"\n    >\n      <Label>Add Input</Label>\n      <Input\n        {...props}\n        onKeyDown={(e) => {\n          // Prevent form submission on Enter key press\n          if (e.key === \"Enter\") {\n            e.preventDefault();\n            //prevent bubbling up\n            e.stopPropagation();\n          }\n        }}\n        onKeyUp={(e) => {\n          // Add value on Enter key press\n          if (e.key === \"Enter\") {\n            if (maxValues && values.length >= maxValues) {\n              setPrimaryError(\"Maximum reached\");\n              setErrorDescription(\n                \"You have reached the maximum number of values\",\n              );\n              return;\n            }\n            onAddValue?.(e.currentTarget.value);\n            e.currentTarget.value = \"\";\n          }\n        }}\n      />\n      {renderValues ? (\n        renderValues()\n      ) : (\n        <div className=\"space-x-2 flex\">\n          {values.map((value, i) => (\n            <div\n              key={`${i}-${value}`}\n              className=\"flex items-center text-xs border rounded p-1 w-max mt-2\"\n            >\n              <span>{value}</span>\n              <button onClick={() => onRemoveValue(i)}>\n                <X size={16} />\n              </button>\n            </div>\n          ))}\n        </div>\n      )}\n    </InputErrorWrapper>\n  );\n};\n\nexport default MultiInput;\n"],"names":["MultiInput","values","onAddValue","renderValues","maxValues","onRemoveValue","props","primaryError","setPrimaryError","useState","errorDescription","setErrorDescription","jsxs","InputErrorWrapper","jsx","Label","Input","e","value","i","X"],"mappings":";;;;;;AAcA,MAAMA,IAAa,CAAC;AAAA,EAClB,QAAAC;AAAA,EACA,YAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,GAAGC;AACL,MACgE;AAC9D,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAAiB,GACnD,CAACC,GAAkBC,CAAmB,IAAIF,EAAiB;AAG/D,SAAA,gBAAAG;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWN;AAAA,MACX,kBAAAG;AAAA,MACA,WAAW,CAAC,CAACH;AAAA,MACb,WAAU;AAAA,MAEV,UAAA;AAAA,QAAA,gBAAAO,EAACC,KAAM,UAAS,YAAA,CAAA;AAAA,QAChB,gBAAAD;AAAA,UAACE;AAAA,UAAA;AAAA,YACE,GAAGV;AAAA,YACJ,WAAW,CAACW,MAAM;AAEZ,cAAAA,EAAE,QAAQ,YACZA,EAAE,eAAe,GAEjBA,EAAE,gBAAgB;AAAA,YAEtB;AAAA,YACA,SAAS,CAACA,MAAM;AAEV,kBAAAA,EAAE,QAAQ,SAAS;AACjB,oBAAAb,KAAaH,EAAO,UAAUG,GAAW;AAC3C,kBAAAI,EAAgB,iBAAiB,GACjCG;AAAA,oBACE;AAAA,kBACF;AACA;AAAA,gBAAA;AAEW,gBAAAT,IAAAe,EAAE,cAAc,KAAK,GAClCA,EAAE,cAAc,QAAQ;AAAA,cAAA;AAAA,YAC1B;AAAA,UACF;AAAA,QACF;AAAA,QACCd,IACCA,EAAa,IAEZ,gBAAAW,EAAA,OAAA,EAAI,WAAU,kBACZ,UAAOb,EAAA,IAAI,CAACiB,GAAOC,MAClB,gBAAAP;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAU;AAAA,YAEV,UAAA;AAAA,cAAA,gBAAAE,EAAC,UAAM,UAAMI,EAAA,CAAA;AAAA,cACb,gBAAAJ,EAAC,UAAO,EAAA,SAAS,MAAMT,EAAcc,CAAC,GACpC,UAAC,gBAAAL,EAAAM,GAAA,EAAE,MAAM,GAAI,CAAA,EACf,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UANK,GAAGD,CAAC,IAAID,CAAK;AAAA,QAAA,CAQrB,EACH,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ;AAEJ;"}