@keeper-security/keeper-js-ui 0.9.0 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [0.10.0](https://github.com/Keeper-Security/keeper-js-ui/compare/v0.9.0...v0.10.0) (2025-04-24)
+
+
+### Features
+
+* **Toast:** hide close button until hover ([#217](https://github.com/Keeper-Security/keeper-js-ui/issues/217)) ([13428c0](https://github.com/Keeper-Security/keeper-js-ui/commit/13428c0835b44280bdd4878941f11a16eef1068c))
+* **Toast:** pass className through useToast ([#218](https://github.com/Keeper-Security/keeper-js-ui/issues/218)) ([2ff1016](https://github.com/Keeper-Security/keeper-js-ui/commit/2ff10165b2e07e4f7945b6ba60fa4a9a61912c0a))
+* **Toast:** style tweaks ([#219](https://github.com/Keeper-Security/keeper-js-ui/issues/219)) ([4694f0b](https://github.com/Keeper-Security/keeper-js-ui/commit/4694f0b8f2bd41ae902cdaebeb0115ba4ecd5395))
+
+
+### Bug Fixes
+
+* **Toast:** create smaller breakpoint for centering ([#216](https://github.com/Keeper-Security/keeper-js-ui/issues/216)) ([e3acdcd](https://github.com/Keeper-Security/keeper-js-ui/commit/e3acdcdaf31292c8298fd5b85a33de370bd6458e))
+
 ## [0.9.0](https://github.com/Keeper-Security/keeper-js-ui/compare/v0.8.0...v0.9.0) (2025-04-22)
 
 

package/dist/index.es.js

@@ -10554,7 +10554,7 @@ const Lw = Tw, Ql = i.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */
         "ksjsui-fixed ksjsui-bottom-0 ksjsui-end-0 ksjsui-z-[100] ksjsui-flex ksjsui-max-h-screen ksjsui-w-full ksjsui-flex-col ksjsui-p-4",
         "empty:ksjsui-p-0",
         "empty:focus:ksjsui-outline-none",
-        "sm:ksjsui-max-w-[calc(theme(spacing.80)_+_theme(spacing.8))]"
+        "xs:ksjsui-max-w-[calc(theme(spacing.80)_+_theme(spacing.8))]"
       ],
       e
     ),
@@ -10563,15 +10563,15 @@ const Lw = Tw, Ql = i.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */
 ));
 Ql.displayName = Vl.displayName;
 const $w = ut([
-  "ksjsui-group ksjsui-pointer-events-auto ksjsui-relative ksjsui-flex ksjsui-w-full ksjsui-items-center ksjsui-justify-between ksjsui-space-x-2 ksjsui-overflow-hidden ksjsui-rounded-lg ksjsui-border ksjsui-border-transparent ksjsui-bg-toast ksjsui-p-3 ksjsui-text-toast-foreground ksjsui-shadow-lg ksjsui-transition-all",
+  "ksjsui-group ksjsui-pointer-events-auto ksjsui-relative ksjsui-flex ksjsui-w-full ksjsui-items-center ksjsui-justify-between ksjsui-space-x-2 ksjsui-overflow-hidden ksjsui-rounded-lg ksjsui-border ksjsui-border-transparent ksjsui-bg-toast ksjsui-p-3 ksjsui-text-toast-foreground ksjsui-shadow-lg ksjsui-outline-ring ksjsui-transition-all",
   "rtl:ksjsui-space-x-reverse",
+  "focus-visible:ksjsui-outline",
   "data-[swipe=cancel]:ksjsui-translate-x-0",
   "data-[swipe=end]:ksjsui-translate-x-[var(--radix-toast-swipe-end-x)]",
   "data-[swipe=move]:ksjsui-translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:ksjsui-transition-none",
   "data-[state=open]:ksjsui-animate-in data-[state=open]:ksjsui-slide-in-from-bottom-full",
   "data-[state=closed]:ksjsui-animate-out data-[state=closed]:ksjsui-fade-out-80",
-  "ltr:data-[state=closed]:ksjsui-slide-out-to-right-full",
-  "rtl:data-[state=closed]:ksjsui-slide-out-to-left-full"
+  "data-[state=closed]:ksjsui-slide-out-to-bottom-full"
 ]), Jl = i.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ m(
   Kl,
   {
@@ -10603,14 +10603,16 @@ const eu = i.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ m(
     ref: n,
     className: D(
       [
-        "ksjsui-self-start ksjsui-rounded-sm ksjsui-text-current ksjsui-transition-opacity",
-        "focus:ksjsui-outline-none focus:ksjsui-ring-2"
+        "ksjsui-text-current/50 ksjsui-absolute ksjsui-right-1 ksjsui-top-1 ksjsui-self-start ksjsui-rounded-sm ksjsui-p-1 ksjsui-opacity-0 ksjsui-transition-opacity",
+        "focus-visible:ksjsui-opacity-100 focus-visible:ksjsui-outline focus-visible:ksjsui-outline-ring",
+        "group-hover:ksjsui-opacity-100",
+        "group-focus-visible:ksjsui-opacity-100"
       ],
       e
     ),
     "toast-close": "",
     ...t,
-    children: /* @__PURE__ */ m(yi, { "aria-hidden": !0, className: "ksjsui-size-6" })
+    children: /* @__PURE__ */ m(yi, { "aria-hidden": !0, className: "ksjsui-size-4" })
   }
 ));
 eu.displayName = ql.displayName;
@@ -10637,27 +10639,36 @@ const cy = () => {
   return /* @__PURE__ */ Q(Lw, { children: [
     e.map(function({
       id: n,
-      title: o,
-      description: r,
-      action: s,
-      icon: c,
-      dismissButtonLabel: a,
-      ...u
+      className: o,
+      title: r,
+      description: s,
+      action: c,
+      icon: a,
+      dismissButtonLabel: u,
+      ...l
     }) {
-      return /* @__PURE__ */ Q(Jl, { ...u, className: "ksjsui-flex ksjsui-gap-x-2", children: [
-        c && /* @__PURE__ */ m("div", { className: "ksjsui-shrink-0", children: c }),
-        /* @__PURE__ */ Q("div", { className: "ksjsui-grid ksjsui-grow ksjsui-gap-1", children: [
-          o && /* @__PURE__ */ m(tu, { children: o }),
-          r && /* @__PURE__ */ m(nu, { children: r })
-        ] }),
-        s,
-        /* @__PURE__ */ m(
-          eu,
-          {
-            "aria-label": a || t.dismissButtonLabel
-          }
-        )
-      ] }, n);
+      return /* @__PURE__ */ Q(
+        Jl,
+        {
+          ...l,
+          className: D("ksjsui-flex ksjsui-gap-x-2", o),
+          children: [
+            a && /* @__PURE__ */ m("div", { className: "ksjsui-shrink-0", children: a }),
+            /* @__PURE__ */ Q("div", { className: "ksjsui-grid ksjsui-grow ksjsui-gap-1", children: [
+              r && /* @__PURE__ */ m(tu, { children: r }),
+              s && /* @__PURE__ */ m(nu, { children: s })
+            ] }),
+            c,
+            /* @__PURE__ */ m(
+              eu,
+              {
+                "aria-label": u || t.dismissButtonLabel
+              }
+            )
+          ]
+        },
+        n
+      );
     }),
     /* @__PURE__ */ m(Ql, {})
   ] });