@eightshift/ui-components 5.6.0 → 6.0.0

package/dist/components/input-field/input-field.js

@@ -1,18 +1,18 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { d as $2d73ec29415bd339$export$712718f7aec83d5, b as $3985021b0ad6602f$export$37fb8590cf2c088c, a as $a049562f99e7db0e$export$f9c6924e160136d1, $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-8yja_IHC.js";
-import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-DWVaNd2E.js";
-import { a as $64fa3d84918910a7$export$29f1550f4b0d4415, h as $64fa3d84918910a7$export$4d86445c2cf5e3, b as $3ef42575df84b30b$export$9d1611c77c2fe928, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, f as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, g as $64fa3d84918910a7$export$ef03459518577ad4, i as $64fa3d84918910a7$export$2881499e37b75b9a } from "../../utils-cvK1vxO7.js";
-import React__default, { forwardRef, createContext, useRef, useState, useCallback } from "react";
-import { w as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-BRDW3y7-.js";
-import { a as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-Cgm0R4Cf.js";
-import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-B8BgFmIQ.js";
+import { d as $2d73ec29415bd339$export$712718f7aec83d5, b as $3985021b0ad6602f$export$37fb8590cf2c088c, a as $a049562f99e7db0e$export$f9c6924e160136d1, $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-CNNksOWg.js";
+import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-D8a3eYb-.js";
+import { $ as $64fa3d84918910a7$export$29f1550f4b0d4415, g as $64fa3d84918910a7$export$4d86445c2cf5e3, a as $3ef42575df84b30b$export$9d1611c77c2fe928, d as $64fa3d84918910a7$export$fabf2dc03a41866e, e as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, f as $64fa3d84918910a7$export$ef03459518577ad4, h as $64fa3d84918910a7$export$2881499e37b75b9a } from "../../utils-DGpXyJOJ.js";
+import $dbSRa$react__default, { forwardRef, createContext, useRef, useState, useCallback } from "react";
+import { w as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-Bycb7BsD.js";
+import { a as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-D3b7Kh4P.js";
+import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-DwBG6m1U.js";
 import { a as $4e85f108e88277b8$export$698f465ec27e93df } from "../../RSPContexts-CJ-HBf0L.js";
 import { $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../Form-Cq3fu75_.js";
-import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-AxKZjtFm.js";
-import { $ as $f39a9eba43920ace$export$86427a43e3e48ebb } from "../../Hidden-rE6uR-lr.js";
+import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-ztX6G1zR.js";
+import { $ as $f39a9eba43920ace$export$86427a43e3e48ebb } from "../../Hidden-Rfj-STx7.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-D2C6R0DK.js";
 import { BaseControl } from "../base-control/base-control.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as cva } from "../../index-BHpUy2Ix.js";
 const $216918bed6669f72$export$2dc6166a7e65358c = /* @__PURE__ */ createContext({});
 let $216918bed6669f72$var$filterHoverProps = (props) => {
   let { onHoverStart, onHoverChange, onHoverEnd, ...otherProps } = props;
@@ -37,7 +37,7 @@ const $216918bed6669f72$export$f5c9f3c2c4054eec = /* @__PURE__ */ forwardRef(fun
     },
     defaultClassName: "react-aria-TextArea"
   });
-  return /* @__PURE__ */ React__default.createElement("textarea", {
+  return /* @__PURE__ */ $dbSRa$react__default.createElement("textarea", {
     ...$3ef42575df84b30b$export$9d1611c77c2fe928($216918bed6669f72$var$filterHoverProps(props), focusProps, hoverProps),
     ...renderProps,
     ref,
@@ -84,7 +84,7 @@ const $bcdf0525bf22703d$export$2c73285ae9390cec = /* @__PURE__ */ $f39a9eba43920
     global: true
   });
   delete DOMProps.id;
-  return /* @__PURE__ */ React__default.createElement("div", {
+  return /* @__PURE__ */ $dbSRa$react__default.createElement("div", {
     ...DOMProps,
     ...renderProps,
     ref,
@@ -93,7 +93,7 @@ const $bcdf0525bf22703d$export$2c73285ae9390cec = /* @__PURE__ */ $f39a9eba43920
     "data-invalid": validation.isInvalid || void 0,
     "data-readonly": props.isReadOnly || void 0,
     "data-required": props.isRequired || void 0
-  }, /* @__PURE__ */ React__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
+  }, /* @__PURE__ */ $dbSRa$react__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
     values: [
       [
         $01b77f81d0f07f68$export$75b6ee27786ba447,
@@ -159,11 +159,14 @@ const $bcdf0525bf22703d$export$2c73285ae9390cec = /* @__PURE__ */ $f39a9eba43920
  * @param {string} [props.className] - Classes to pass to the input field.
  * @param {string} [props.wrapperClassName] - Classes to pass to the input field wrapping element.
  * @param {boolean} [props.monospaceFont] - If `true`, the input uses a monospace font. Useful for things like IDs to make them easier to read.
+ * @param {boolean} [props.flat] - If `true`, component will look more flat. Useful for nested layer of controls.
+ * @param {InputSize} [props.size='default'] - Sets the size of the input field.
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The InputField component.
  *
  * @typedef {'text' | 'search' | 'url' | 'tel' | 'email' | 'password' | 'multiline'} InputType
+ * @typedef {'small' | 'medium' | 'default' | 'large'} InputSize
  *
  * @example
  * <InputField
@@ -175,10 +178,103 @@ const $bcdf0525bf22703d$export$2c73285ae9390cec = /* @__PURE__ */ $f39a9eba43920
  * @preserve
  */
 const InputField = (props) => {
-  const { icon, label, subtitle, help, actions, inline, value, onChange, type = "text", disabled, readOnly, className, wrapperClassName, hidden, monospaceFont, ...other } = props;
+  const {
+    icon,
+    label,
+    subtitle,
+    help,
+    actions,
+    inline,
+    value,
+    onChange,
+    type = "text",
+    disabled,
+    readOnly,
+    className,
+    flat,
+    size,
+    wrapperClassName,
+    hidden,
+    monospaceFont,
+    ...other
+  } = props;
   if (hidden) {
     return null;
   }
+  const inputClass = cva(
+    [
+      "es:leading-none",
+      "es:border-none",
+      "es:w-fill",
+      "es:rounded-lg es:focus:rounded-xl",
+      "es:transition-plus",
+      "es:any-focus:outline-hidden",
+      "es:inset-ring",
+      "es:focus-visible:ring-2 es:focus-visible:ring-accent-500/30",
+      "es:focus-visible:text-accent-950 es:focus-visible:inset-ring-accent-500",
+      "es:focus:placeholder:text-surface-400",
+      className
+    ],
+    {
+      variants: {
+        size: {
+          small: ["es:min-h-8", "es:px-2.5"],
+          medium: ["es:min-h-9", "es:px-3"],
+          default: ["es:min-h-10", "es:px-3"],
+          large: ["es:min-h-12", "es:px-4"]
+        },
+        mono: {
+          true: "es:font-mono es:text-12",
+          false: [
+            'es:text-13 es:font-variation-["wdth"_80,"YTLC"_520,"wght"_300,"slnt"_0]',
+            'es:tracking-wide es:placeholder-shown:font-variation-["wdth"_100,"YTLC"_500,"wght"_250,"slnt"_-8]'
+          ]
+        },
+        multiline: {
+          false: "es:py-2",
+          true: "es:py-3 es:rounded-br-sm!"
+        },
+        disabled: {
+          false: "es:selection:bg-surface-100 es:selection:text-accent-800",
+          true: "es:selection:bg-secondary-200 es:selection:text-secondary-600"
+        }
+      },
+      compoundVariants: [
+        {
+          flat: false,
+          disabled: false,
+          readOnly: false,
+          class: [
+            "es:bg-white",
+            "es:bg-linear-to-b es:from-secondary-100/0 es:to-secondary-100/50 es:from-25%",
+            "es:hover:from-surface-100/0 es:hover:to-surface-100/50",
+            "es:inset-ring-secondary-400/50 es:hover:inset-ring-surface-300 es:focus:inset-ring-surface-400",
+            "es:inset-shadow-sm es:inset-shadow-secondary-100/50",
+            "es:hover:placeholder:text-surface-400",
+            "es:placeholder:text-secondary-400",
+            "es:shadow-xs es:shadow-black/5"
+          ]
+        },
+        {
+          flat: true,
+          disabled: false,
+          readOnly: false,
+          class: [
+            "es:inset-ring-secondary-100",
+            "es:focus:text-accent-950",
+            "es:placeholder:text-secondary-500/80",
+            "es:bg-secondary-100 es:focus:bg-surface-50",
+            "es:inset-ring-secondary-200/15 es:hover:inset-ring-secondary-200/65 es:focus:inset-ring-surface-200",
+            "es:shadow-none"
+          ]
+        },
+        { disabled: true, class: ["es:bg-secondary-50 es:inset-ring-secondary-200 es:text-secondary-400"] },
+        { readOnly: true, flat: false, class: ["es:bg-secondary-50 es:inset-ring-secondary-300 es:text-secondary-400"] },
+        { readOnly: true, flat: true, class: ["es:bg-secondary-50 es:inset-ring-secondary-300/60 es:text-secondary-400"] }
+      ],
+      defaultVariants: { disabled: false, flat: false, mono: false, size: "default", multiline: false, readOnly: false }
+    }
+  );
   return /* @__PURE__ */ jsx(
     $bcdf0525bf22703d$export$2c73285ae9390cec,
     {
@@ -204,17 +300,7 @@ const InputField = (props) => {
               {
                 ...other,
                 type,
-                className: clsx(
-                  "es:min-h-10 es:w-full es:rounded-10 es:border es:border-secondary-300 es:p-2 es:text-sm es:shadow-sm es:not-readonly:focus:shadow-md es:transition es:selection:bg-accent-500/20 es:selection:text-accent-950 es:bg-white",
-                  "es:any-focus:outline-hidden",
-                  "es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50",
-                  "es:focus-visible:border-accent-500",
-                  "es:inset-ring es:inset-ring-secondary-100",
-                  "es:disabled:shadow-none! es:disabled:border-secondary-200 es:disabled:bg-secondary-50 es:disabled:text-secondary-500 es:disabled:cursor-default es:readonly:bg-secondary-50",
-                  type === "search" && "es:[&::-webkit-search-cancel-button]:hidden",
-                  (monospaceFont || type === "password") && "es:font-mono",
-                  className
-                ),
+                className: inputClass({ disabled, flat, size, readOnly, mono: monospaceFont || type === "password" }),
                 onKeyUp: (e) => {
                   if (type === "search" && e.key === "Escape") {
                     onChange("");
@@ -229,16 +315,7 @@ const InputField = (props) => {
               $216918bed6669f72$export$f5c9f3c2c4054eec,
               {
                 ...other,
-                className: clsx(
-                  "es:min-h-10 es:w-full es:rounded-10 es:border es:border-secondary-300 es:p-2 es:text-sm es:shadow-sm es:not-readonly:focus:shadow-md es:transition es:selection:bg-accent-500/20 es:selection:text-accent-950",
-                  "es:any-focus:outline-hidden",
-                  "es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50",
-                  "es:focus-visible:border-accent-500",
-                  "es:inset-ring es:inset-ring-secondary-100",
-                  "es:disabled:shadow-none! es:readonly:shadow-xs! es:disabled:border-secondary-200 es:disabled:bg-secondary-50 es:disabled:text-secondary-500 es:disabled:cursor-default es:readonly:bg-secondary-50",
-                  monospaceFont && "es:font-mono",
-                  className
-                )
+                className: inputClass({ disabled, flat, size, readOnly, mono: monospaceFont, multiline: true })
               }
             )
           ]

package/dist/components/item-collection/item-collection.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { Fragment } from "react";
-import { _ as __ } from "../../default-i18n-DBm-GqWM.js";
+import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
 /**
  * A simple component to manage a collection of items.
  *