@aivenio/aquarium 5.3.1 → 5.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 (16) hide show
  1. package/dist/atoms.cjs +33 -7
  2. package/dist/atoms.mjs +33 -7
  3. package/dist/src/atoms/Modal/Modal.d.ts +30 -0
  4. package/dist/src/atoms/Modal/Modal.js +34 -8
  5. package/dist/src/icons/index.d.ts +2 -0
  6. package/dist/src/icons/index.js +3 -1
  7. package/dist/src/icons/zoomIn.d.ts +8 -0
  8. package/dist/src/icons/zoomIn.js +9 -0
  9. package/dist/src/icons/zoomOut.d.ts +8 -0
  10. package/dist/src/icons/zoomOut.js +9 -0
  11. package/dist/src/molecules/Dialog/Dialog.js +2 -2
  12. package/dist/styles.css +27 -10
  13. package/dist/system.cjs +34 -8
  14. package/dist/system.mjs +34 -8
  15. package/dist/tsconfig.module.tsbuildinfo +1 -1
  16. package/package.json +1 -1
package/dist/system.cjs CHANGED
@@ -11184,8 +11184,8 @@ var modalStyles = (0, import_tailwind_variants24.tv)({
11184
11184
  variants: {
11185
11185
  kind: {
11186
11186
  dialog: {
11187
- overlay: "py-7 justify-center flex items-center",
11188
- dialog: "relative w-full rounded mx-7"
11187
+ overlay: "justify-center flex items-center",
11188
+ dialog: "relative"
11189
11189
  },
11190
11190
  drawer: {
11191
11191
  overlay: "overflow-x-hidden",
@@ -11204,6 +11204,10 @@ var modalStyles = (0, import_tailwind_variants24.tv)({
11204
11204
  bodyContent: "pt-6"
11205
11205
  }
11206
11206
  },
11207
+ isResponsive: {
11208
+ true: "",
11209
+ false: ""
11210
+ },
11207
11211
  noFooter: {
11208
11212
  true: {
11209
11213
  bodyContent: "pb-4"
@@ -11218,26 +11222,48 @@ var modalStyles = (0, import_tailwind_variants24.tv)({
11218
11222
  }
11219
11223
  }
11220
11224
  },
11225
+ defaultVariants: {
11226
+ isResponsive: true
11227
+ },
11221
11228
  compoundVariants: [
11229
+ {
11230
+ kind: "dialog",
11231
+ size: ["sm", "md", "full"],
11232
+ isResponsive: true,
11233
+ class: {
11234
+ overlay: "py-0 sm:py-7",
11235
+ dialog: "w-dvw h-dvh mx-0 rounded-none sm:h-auto sm:w-full sm:rounded sm:mx-7"
11236
+ }
11237
+ },
11238
+ {
11239
+ kind: "dialog",
11240
+ size: ["sm", "md", "full"],
11241
+ isResponsive: false,
11242
+ class: {
11243
+ overlay: "py-0",
11244
+ dialog: "h-auto w-full rounded mx-7"
11245
+ }
11246
+ },
11222
11247
  {
11223
11248
  kind: "dialog",
11224
11249
  size: "sm",
11225
11250
  class: {
11226
- dialog: "max-w-[600px]"
11251
+ dialog: "sm:max-w-[600px]"
11227
11252
  }
11228
11253
  },
11229
11254
  {
11230
11255
  kind: "dialog",
11231
11256
  size: "md",
11232
11257
  class: {
11233
- dialog: "max-w-[940px]"
11258
+ dialog: "sm:max-w-[940px]"
11234
11259
  }
11235
11260
  },
11236
11261
  {
11237
11262
  kind: "dialog",
11238
11263
  size: "full",
11239
11264
  class: {
11240
- dialog: "min-h-full"
11265
+ // Max width is max screen content width (1536px) + left and right paddings (32px each)
11266
+ dialog: "min-h-full sm:max-w-[1600px]"
11241
11267
  }
11242
11268
  },
11243
11269
  {
@@ -11278,8 +11304,8 @@ Modal.BackDrop = ({ className, ...rest }) => {
11278
11304
  return /* @__PURE__ */ import_react99.default.createElement("div", { ...rest, className: backdrop({ className }) });
11279
11305
  };
11280
11306
  Modal.Dialog = import_react99.default.forwardRef(
11281
- ({ kind = "dialog", children, className, size = "md", ...rest }, ref) => {
11282
- const { dialog } = modalStyles({ kind, size });
11307
+ ({ kind = "dialog", children, className, size = "md", isResponsive = true, ...rest }, ref) => {
11308
+ const { dialog } = modalStyles({ kind, size, isResponsive });
11283
11309
  return /* @__PURE__ */ import_react99.default.createElement("div", { ref, "aria-modal": "true", ...rest, className: dialog({ className }) }, children);
11284
11310
  }
11285
11311
  );
@@ -11330,7 +11356,7 @@ var Dialog2 = (props) => {
11330
11356
  if (!state.isOpen) {
11331
11357
  return null;
11332
11358
  }
11333
- return /* @__PURE__ */ import_react100.default.createElement(import_overlays6.Overlay, null, /* @__PURE__ */ import_react100.default.createElement(Modal, { className: "Aquarium-Dialog", open: true }, /* @__PURE__ */ import_react100.default.createElement(Modal.BackDrop, { ...underlayProps }), /* @__PURE__ */ import_react100.default.createElement(Modal.Dialog, { ref, size: "sm", ...modalProps }, /* @__PURE__ */ import_react100.default.createElement(DialogWrapper, { ...props }))));
11359
+ return /* @__PURE__ */ import_react100.default.createElement(import_overlays6.Overlay, null, /* @__PURE__ */ import_react100.default.createElement(Modal, { className: "Aquarium-Dialog", open: true }, /* @__PURE__ */ import_react100.default.createElement(Modal.BackDrop, { ...underlayProps }), /* @__PURE__ */ import_react100.default.createElement(Modal.Dialog, { ref, size: "sm", isResponsive: false, ...modalProps }, /* @__PURE__ */ import_react100.default.createElement(DialogWrapper, { ...props }))));
11334
11360
  };
11335
11361
  var DialogWrapper = ({
11336
11362
  title,
package/dist/system.mjs CHANGED
@@ -11063,8 +11063,8 @@ var modalStyles = tv24({
11063
11063
  variants: {
11064
11064
  kind: {
11065
11065
  dialog: {
11066
- overlay: "py-7 justify-center flex items-center",
11067
- dialog: "relative w-full rounded mx-7"
11066
+ overlay: "justify-center flex items-center",
11067
+ dialog: "relative"
11068
11068
  },
11069
11069
  drawer: {
11070
11070
  overlay: "overflow-x-hidden",
@@ -11083,6 +11083,10 @@ var modalStyles = tv24({
11083
11083
  bodyContent: "pt-6"
11084
11084
  }
11085
11085
  },
11086
+ isResponsive: {
11087
+ true: "",
11088
+ false: ""
11089
+ },
11086
11090
  noFooter: {
11087
11091
  true: {
11088
11092
  bodyContent: "pb-4"
@@ -11097,26 +11101,48 @@ var modalStyles = tv24({
11097
11101
  }
11098
11102
  }
11099
11103
  },
11104
+ defaultVariants: {
11105
+ isResponsive: true
11106
+ },
11100
11107
  compoundVariants: [
11108
+ {
11109
+ kind: "dialog",
11110
+ size: ["sm", "md", "full"],
11111
+ isResponsive: true,
11112
+ class: {
11113
+ overlay: "py-0 sm:py-7",
11114
+ dialog: "w-dvw h-dvh mx-0 rounded-none sm:h-auto sm:w-full sm:rounded sm:mx-7"
11115
+ }
11116
+ },
11117
+ {
11118
+ kind: "dialog",
11119
+ size: ["sm", "md", "full"],
11120
+ isResponsive: false,
11121
+ class: {
11122
+ overlay: "py-0",
11123
+ dialog: "h-auto w-full rounded mx-7"
11124
+ }
11125
+ },
11101
11126
  {
11102
11127
  kind: "dialog",
11103
11128
  size: "sm",
11104
11129
  class: {
11105
- dialog: "max-w-[600px]"
11130
+ dialog: "sm:max-w-[600px]"
11106
11131
  }
11107
11132
  },
11108
11133
  {
11109
11134
  kind: "dialog",
11110
11135
  size: "md",
11111
11136
  class: {
11112
- dialog: "max-w-[940px]"
11137
+ dialog: "sm:max-w-[940px]"
11113
11138
  }
11114
11139
  },
11115
11140
  {
11116
11141
  kind: "dialog",
11117
11142
  size: "full",
11118
11143
  class: {
11119
- dialog: "min-h-full"
11144
+ // Max width is max screen content width (1536px) + left and right paddings (32px each)
11145
+ dialog: "min-h-full sm:max-w-[1600px]"
11120
11146
  }
11121
11147
  },
11122
11148
  {
@@ -11157,8 +11183,8 @@ Modal.BackDrop = ({ className, ...rest }) => {
11157
11183
  return /* @__PURE__ */ React90.createElement("div", { ...rest, className: backdrop({ className }) });
11158
11184
  };
11159
11185
  Modal.Dialog = React90.forwardRef(
11160
- ({ kind = "dialog", children, className, size = "md", ...rest }, ref) => {
11161
- const { dialog } = modalStyles({ kind, size });
11186
+ ({ kind = "dialog", children, className, size = "md", isResponsive = true, ...rest }, ref) => {
11187
+ const { dialog } = modalStyles({ kind, size, isResponsive });
11162
11188
  return /* @__PURE__ */ React90.createElement("div", { ref, "aria-modal": "true", ...rest, className: dialog({ className }) }, children);
11163
11189
  }
11164
11190
  );
@@ -11209,7 +11235,7 @@ var Dialog2 = (props) => {
11209
11235
  if (!state.isOpen) {
11210
11236
  return null;
11211
11237
  }
11212
- return /* @__PURE__ */ React91.createElement(Overlay, null, /* @__PURE__ */ React91.createElement(Modal, { className: "Aquarium-Dialog", open: true }, /* @__PURE__ */ React91.createElement(Modal.BackDrop, { ...underlayProps }), /* @__PURE__ */ React91.createElement(Modal.Dialog, { ref, size: "sm", ...modalProps }, /* @__PURE__ */ React91.createElement(DialogWrapper, { ...props }))));
11238
+ return /* @__PURE__ */ React91.createElement(Overlay, null, /* @__PURE__ */ React91.createElement(Modal, { className: "Aquarium-Dialog", open: true }, /* @__PURE__ */ React91.createElement(Modal.BackDrop, { ...underlayProps }), /* @__PURE__ */ React91.createElement(Modal.Dialog, { ref, size: "sm", isResponsive: false, ...modalProps }, /* @__PURE__ */ React91.createElement(DialogWrapper, { ...props }))));
11213
11239
  };
11214
11240
  var DialogWrapper = ({
11215
11241
  title,