@eightshift/ui-components 5.6.1 → 6.0.0

package/dist/components/placeholders/file-placeholder.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
-import { _ as __ } from "../../default-i18n-DBm-GqWM.js";
+import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
 import { icons } from "../../icons/icons.js";
 import { RichLabel } from "../rich-label/rich-label.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 /**
  * A simple file placeholder.
  *
@@ -10,6 +10,7 @@ import { c as clsx } from "../../lite-DVmmD_-j.js";
  * @param {Object} props - Component props.
  * @param {JSX.Element} [props.icon] - File type icon override.
  * @param {string} [props.fileName] - Current file name.
+ * @param {boolean} [props.flat] - If `true`, component will look more flat. Useful for nested layer of controls.
  * @param {string} [props.className] - Classes to pass to the component.
  *
  * @returns {JSX.Element} The FilePlaceholder component.
@@ -23,7 +24,7 @@ import { c as clsx } from "../../lite-DVmmD_-j.js";
  * @preserve
  */
 const FilePlaceholder = (props) => {
-  const { icon, fileName, className, children } = props;
+  const { icon, fileName, className, flat, children } = props;
   return /* @__PURE__ */ jsx(
     RichLabel,
     {
@@ -31,9 +32,16 @@ const FilePlaceholder = (props) => {
         "div",
         {
           className: clsx(
-            "es:w-fit es:rounded-xl es:border es:border-secondary-300 es:p-2",
-            fileName && "es:shadow-sm es:bg-gradient-to-br es:from-secondary-50 es:to-secondary-100 es:text-secondary-600",
-            !fileName && "es:border-dashed es:text-secondary-500"
+            "es:w-fit es:rounded-xl es:p-2",
+            fileName && [
+              "es:bg-linear-to-br es:from-surface-100 es:to-surface-200",
+              "es:inset-ring es:inset-ring-surface-300/40",
+              "es:inset-shadow-xs es:inset-shadow-surface-50/50",
+              "es:text-surface-800",
+              !flat && "es:shadow-xs es:shadow-black/5",
+              "es:cursor-pointer"
+            ],
+            !fileName && "es:bg-secondary-100 es:text-secondary-500"
           ),
           children: icon ?? icons.file
         }

package/dist/components/placeholders/image-placeholder.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { icons } from "../../icons/icons.js";
 /**
  * A simple image placeholder, with an empty state.
@@ -12,6 +12,7 @@ import { icons } from "../../icons/icons.js";
  * @param {ImagePlaceholderSize} [props.size='default'] - Size of the image placeholder.
  * @param {boolean} [props.noImage] - If `true`, the image within the placeholder will not be displayed, even if `url` is provided.
  * @param {string} [props.className] - Classes to pass to the component.
+ * @param {boolean} [props.flat] - If `true`, component will look more flat. Useful for nested layer of controls.
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  * @param {ImagePlaceholderImageMode} [props.imageMode='cover'] - Determines inner image display mode.
  *
@@ -27,13 +28,22 @@ import { icons } from "../../icons/icons.js";
  * @preserve
  */
 const ImagePlaceholder = (props) => {
-  const { url, alt, style = "default", size = "default", noImage, className, hidden, imageMode = "cover" } = props;
+  const { url, alt, style = "default", size = "default", noImage, className, hidden, imageMode = "cover", flat } = props;
   if (hidden) {
     return null;
   }
   const styleClassName = {
-    default: "es:rounded-2xl es:border es:border-secondary-300 es:bg-gradient-to-br es:from-white es:to-secondary-50 es:text-secondary-300 es:shadow-sm",
-    simple: "es:rounded-2xl es:border es:border-secondary-300 es:border-dashed es:text-secondary-300"
+    default: [
+      "es:rounded-2xl",
+      url && "es:ring es:ring-secondary-300",
+      !url && "es:inset-ring es:inset-ring-surface-300/30",
+      "es:bg-surface-200",
+      " es:bg-linear-to-b es:from-surface-100/50 es:to-surface-300/50 es:from-25%",
+      "es:text-surface-500",
+      "es:inset-shadow-sm es:inset-shadow-surface-50/30",
+      !flat && "es:shadow-xs es:shadow-black/5"
+    ],
+    simple: ["es:rounded-xl es:bg-surface-500 es:text-surface-50"]
   };
   const sizeClassName = {
     auto: "",

package/dist/components/placeholders/media-placeholder.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { icons } from "../../icons/icons.js";
 /**
  * A simple media placeholder, with an empty state.
@@ -11,6 +11,7 @@ import { icons } from "../../icons/icons.js";
  * @param {string} [props.className] - Classes to pass to the component.
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  * @param {JSX.Element} [props.icon] - Icon to show within the placeholder.
+ * @param {boolean} [props.flat] - If `true`, component will look more flat. Useful for nested layer of controls.
  * @param {string|JSX.Element} [props.helpText] - Text to show below the icon.
  *
  * @returns {JSX.Element} The MediaPlaceholder component.
@@ -24,13 +25,19 @@ import { icons } from "../../icons/icons.js";
  * @preserve
  */
 const MediaPlaceholder = (props) => {
-  const { style = "default", size = "default", className, icon, helpText, children, hidden } = props;
+  const { style = "default", size = "default", className, icon, helpText, children, flat, hidden } = props;
   if (hidden) {
     return null;
   }
   const styleClassName = {
-    default: "es:rounded-2xl es:border es:border-secondary-300 es:bg-secondary-50 es:text-secondary-400 es:shadow-sm",
-    simple: "es:rounded-2xl es:border es:border-secondary-300 es:border-dashed es:text-secondary-400"
+    default: [
+      "es:rounded-2xl es:bg-surface-100 es:text-surface-700",
+      "es:inset-ring es:inset-ring-surface-300/60",
+      "es:bg-linear-to-b es:from-surface-600/2 es:to-surface-500/16 es:from-25%",
+      "es:inset-shadow-sm es:inset-shadow-surface-50/30",
+      !flat && "es:shadow-xs es:shadow-black/5"
+    ],
+    simple: "es:rounded-2xl es:inset-ring es:inset-ring-surface-200/75 es:bg-surface-50 es:text-surface-700 es:bg-linear-to-br es:from-surface-100/5 es:to-surface-100/40"
   };
   const sizeClassName = {
     auto: "",

package/dist/components/popover/popover.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { e as $07b14b47974efb58$export$5b6b19405a83ff9d, f as $de32f1b87079253c$export$3ddf2d174ce01153, g as $de32f1b87079253c$export$2e1e1122cf0cba88 } from "../../Dialog-BMgMUQuN.js";
+import { $ as $07b14b47974efb58$export$5b6b19405a83ff9d, g as $de32f1b87079253c$export$3ddf2d174ce01153, h as $de32f1b87079253c$export$2e1e1122cf0cba88 } from "../../Dialog-D8bjn-nh.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
-import { _ as __ } from "../../default-i18n-DBm-GqWM.js";
+import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
 import { Button } from "../button/button.js";
 /**
  * @typedef {Object} PopoverProps
@@ -84,6 +84,7 @@ const Popover = (props) => {
     shouldCloseOnInteractOutside = () => true,
     "aria-label": rawAriaLabel,
     hidden,
+    popoverProps,
     ...other
   } = props;
   let ariaLabel = rawAriaLabel;
@@ -107,20 +108,22 @@ const Popover = (props) => {
       crossOffset,
       containerPadding,
       className: ({ isEntering, isExiting }) => clsx(
-        "es:rounded-2xl es:border es:border-secondary-300 es:bg-white/85 es:inset-ring es:inset-ring-secondary-100 es:shadow-xl es:outline-hidden",
-        "es:backdrop-blur-2xl es:backdrop-brightness-125 es:backdrop-saturate-150",
-        "es:inset-shadow-xs es:inset-shadow-secondary-100",
-        "es:motion-safe:motion-duration-200 es:motion-safe:motion-ease-spring-bouncy",
+        "es:rounded-2xl es:bg-linear-to-br es:from-surface-50/75 es:to-surface-50/75 es:inset-ring es:inset-ring-surface-500/15 es:shadow-xl es:outline-hidden",
+        "es:backdrop-blur-lg es:backdrop-brightness-110 es:backdrop-saturate-125",
+        "es:inset-shadow-xs es:inset-shadow-white/50",
         "es:placement-bottom:origin-top-left es:placement-top:origin-bottom-left",
         "es:placement-left:origin-right es:placement-right:origin-left",
-        isEntering || isExiting && "es:pointer-events-none",
-        isEntering && "es:motion-safe:motion-scale-in-95 es:motion-opacity-in-0",
-        isEntering && "es:motion-safe:placement-top:motion-translate-y-in-[5%] es:motion-safe:placement-bottom:motion-translate-y-in-[-5%] es:motion-safe:placement-left:motion-translate-x-in-[5%] es:motion-safe:placement-right:motion-translate-x-in-[-5%]",
-        isExiting && "es:motion-safe:motion-scale-out-95 es:motion-opacity-out-0",
-        isExiting && "es:motion-safe:placement-top:motion-translate-y-out-[5%] es:motion-safe:placement-bottom:motion-translate-y-out-[-5%] es:motion-safe:placement-left:motion-translate-x-out-[5%] es:motion-safe:placement-right:motion-translate-x-out-[-5%]",
+        "es:motion-duration-250 es:motion-ease-spring-bouncy",
+        isEntering && "es:*:pointer-events-none",
+        "es:placement-bottom:origin-top-left es:placement-top:origin-bottom-left",
+        isEntering && "es:motion-scale-x-in-95 es:motion-scale-y-in-85 es:motion-opacity-in-0 es:motion-blur-in-[1px]",
+        isEntering && "es:placement-top:motion-translate-y-in-[0.5rem] es:placement-bottom:motion-translate-y-in-[-0.5rem]",
+        isExiting && "es:motion-scale-x-out-95 es:motion-scale-y-out-85 es:motion-opacity-out-0 es:motion-blur-out-xs",
+        isExiting && "es:placement-top:motion-translate-y-out-[0.5rem] es:placement-bottom:motion-translate-y-out-[-0.5rem]",
         wrapperClassName
       ),
       style,
+      ...popoverProps,
       children: /* @__PURE__ */ jsx(
         $de32f1b87079253c$export$3ddf2d174ce01153,
         {

package/dist/components/portal-provider/portal-provider.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { $ as $96b38030c423d352$export$78efe591171d7d45 } from "../../PortalProvider---wyKpMr.js";
+import { $ as $96b38030c423d352$export$78efe591171d7d45 } from "../../PortalProvider-CHPnqDSH.js";
 /**
  * Component that allows changing the default target for transient components like `Menu`, `Popover`, etc.
  *