nexaas-ui-components 1.0.68 → 1.0.70

package/dist/index.cjs

@@ -243,7 +243,7 @@ var Button = ({
           ${appliedSize.text} 
           ${appliedPadding} 
           ${gapText} 
-          whitespace-nowrap group rounded-lg font-bold disabled:shadow-none active:shadow-none flex items-center disabled:pointer-events-none
+          whitespace-nowrap group rounded-lg font-bold disabled:shadow-none active:shadow-none flex items-center disabled:pointer-events-none focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-blue-500 focus-visible:ring-offset-[2px] focus-visible:rounded-[2px]
         `,
             children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
               props.icon && /* @__PURE__ */ jsxRuntime.jsx(
@@ -494,7 +494,7 @@ var Input = ({
   const hasError = fieldValidationMessages.some((item) => item !== void 0);
   const [showPassword, setShowPassword] = React5__namespace.default.useState(false);
   const styles = {
-    input: `text-p-md pl-2 peer text-paragraph bg-surface shadow-input border border-[0.5px] rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 focus-visible:border-1 focus-visible:border-blue-500 ${label ? "pt-[22px]" : "pt-[10px]"}
+    input: `text-p-md pl-2 peer text-paragraph bg-surface shadow-input border border-[0.5px] rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 focus-visible:ring-[1.5px] focus-visible:ring-blue-500 focus-visible:ring-offset-[2px] focus-visible:rounded-[2px] ${label ? "pt-[22px]" : "pt-[10px]"}
       ${!hasError ? "border-neutral-300" : ""}`,
     icon: `absolute bg-neutral-100 h-[44px] top-[1px] left-[1.5px] w-[38px] rounded-l-lg text-[20px] ${hasError ? "text-dangerous-500" : "text-label peer-focus:text-blue-500"} peer-focus:border-blue-500`,
     rightIcon: "absolute h-[44px] top-[1px] right-[1.5px] w-[38px] text-[22px]",
@@ -2804,9 +2804,9 @@ var customStyles = {
     ...provided,
     cursor: "pointer",
     border: state.selectProps.hasError ? "1px solid var(--dangerous-700)" : state.menuIsOpen ? "1px solid var(--blue-700)" : "1px solid var(--neutral-300)",
-    boxShadow: "none",
+    boxShadow: state.isFocused ? "0 0 0 2px var(--surface), 0 0 0 3.5px var(--blue-500)" : "none",
     outline: "none",
-    borderRadius: "0.5rem",
+    borderRadius: state.isFocused ? "2px" : "0.5rem",
     placeholder: " ",
     height: state.selectProps.smallField ? "30px" : "46px",
     backgroundColor: state.isDisabled ? "var(--light-100)" : "var(--surface)",
@@ -6642,23 +6642,21 @@ var StatusBall = ({
   variant = "info",
   labelPosition = "right"
 }) => {
-  const ball = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative shrink-0 h-3 w-3", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: clsx9__default.default(variants5[variant].big, "h-3 w-3 rounded-full")
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: clsx9__default.default(
-          variants5[variant].small,
-          "h-[8px] w-[8px] rounded-full absolute z-30 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
-        )
-      }
-    )
-  ] });
+  const ball = /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: clsx9__default.default(
+        variants5[variant].big,
+        "shrink-0 h-3 w-3 rounded-full flex items-center justify-center"
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: clsx9__default.default(variants5[variant].small, "h-[8px] w-[8px] rounded-full")
+        }
+      )
+    }
+  );
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center gap-2", children: labelPosition === "right" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     ball,
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-p-md text-paragraph font-normal", children: label })
@@ -6803,7 +6801,7 @@ var TextArea = ({
   const fieldValidationMessages = [error == null ? void 0 : error.message];
   const hasError = fieldValidationMessages.some((item) => item !== void 0);
   const styles = {
-    input: `border border-neutral-800 rounded-lg block pb-[10px] pt-[18px] w-full bg-surface disabled:bg-neutral-100 focus-visible:border-blue-500 focus-visible:border-1 text-p-md peer shadow-input pl-2 outline-none ${hasError ? "border-dangerous-500 text-dangerous-500" : "border-neutral-300 text-paragraph"}`,
+    input: `border border-neutral-800 rounded-lg block pb-[10px] pt-[18px] w-full bg-surface disabled:bg-neutral-100 focus-visible:ring-[1.5px] focus-visible:ring-blue-500 focus-visible:ring-offset-[2px] focus-visible:rounded-[2px] text-p-md peer shadow-input pl-2 outline-none ${hasError ? "border-dangerous-500 text-dangerous-500" : "border-neutral-300 text-paragraph"}`,
     label: `cursor-text absolute text-label top-[0.70rem] z-10 transform origin-[0] -translate-y-3 scale-75 duration-300 text-sm peer-focus:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-3 left-2.5`
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [