@umami/react-zen 0.25.0 → 0.26.0

package/dist/styles.css

@@ -2661,6 +2661,117 @@ body a.Button_button__YmM3M {
   }
 }
 
+/* virtual-css:css:d2946ea0055c0d1ebfac02670168114b */
+.Toast_toast__YjU0N {
+  display: grid;
+  grid-template-areas: "icon title action" "icon description action";
+  grid-template-columns: auto 1fr auto;
+  grid-auto-columns: auto;
+  align-items: center;
+  background-color: var(--background-color);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow-3);
+  padding: var(--spacing-4) var(--spacing-5);
+  border: var(--border);
+  position: relative;
+}
+.Toast_toast__YjU0N:has(.Toast_icon__YmFhZ) {
+  grid-template-columns: auto 1fr auto;
+  column-gap: var(--gap);
+}
+.Toast_icon__YmFhZ {
+  grid-area: icon;
+}
+.Toast_icon__YmFhZ:empty {
+  display: none;
+}
+.Toast_title__OGRhM {
+  grid-area: title;
+  color: var(--font-color);
+  font-weight: 700;
+}
+.Toast_description__MDBkN {
+  grid-area: description;
+}
+.Toast_action__MjUxO {
+  grid-area: action;
+  border: 0;
+  background: transparent;
+}
+.Toast_close__ZDVjN {
+  display: none;
+  color: currentColor;
+  position: absolute;
+  right: var(--spacing-3);
+  top: 50%;
+  transform: translateY(-50%);
+}
+.Toast_toast__YjU0N:hover .Toast_close__ZDVjN {
+  display: block;
+  cursor: pointer;
+}
+.Toast_toast__YjU0N.Toast_info__ZDRhY {
+  color: var(--primary-font-color);
+  background: var(--primary-color);
+  border: 0;
+}
+.Toast_toast__YjU0N.Toast_error__NmEwO {
+  color: var(--danger-font-color);
+  background: var(--danger-color);
+  border: 0;
+}
+
+/* virtual-css:css:11394aec644bbe21859c5e1cb74970ec */
+.Toaster_toaster__OGJjM {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-6);
+  gap: var(--spacing-5);
+  width: 460px;
+  max-width: 100vw;
+  margin: 0;
+  list-style: none;
+  z-index: 2147483647;
+  outline: none;
+}
+.Toaster_position-top__Y2YyM {
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.Toaster_position-top-right__Y2I1Y {
+  top: 0;
+  right: 0;
+}
+.Toaster_position-top-left__ZGZlM {
+  top: 0;
+  left: 0;
+}
+.Toaster_position-bottom__NjJmM {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.Toaster_position-bottom-right__MGVjY {
+  bottom: 0;
+  right: 0;
+}
+.Toaster_position-bottom-left__ODBhZ {
+  bottom: 0;
+  left: 0;
+}
+.Toaster_position-left__MWMzM {
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.Toaster_position-right__YWYzZ {
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
 /* virtual-css:css:fa53717340120f23a623f1ff98237d94 */
 .Accordion_accordion__ODg3O {
   display: flex;
@@ -2882,6 +2993,54 @@ body a.Button_button__YmM3M {
   padding: var(--spacing-1);
 }
 
+/* virtual-css:css:0fb02723d81c5960ed149d3d9f58f1ba */
+.List_list__NmQyZ {
+  min-width: 100px;
+  outline: none;
+}
+.List_separator__NTYwN {
+  border-bottom: var(--border);
+}
+.List_section__MzJkM {
+  margin-bottom: var(--spacing-4);
+}
+.List_header__MjllY {
+  font-size: var(--font-size-2);
+  font-weight: var(--font-weight-bold);
+  padding: var(--padding);
+}
+.List_item__MWE2M {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: var(--font-size);
+  color: var(--font-color);
+  background: var(--background-color);
+  padding: var(--padding);
+  gap: var(--gap);
+  min-width: 120px;
+  cursor: pointer;
+  outline: none;
+  border-radius: var(--border-radius);
+}
+.List_item__MWE2M[data-focus],
+.List_item__MWE2M[data-focus-visible] {
+  outline: var(--outline);
+  background: var(--highlight-color);
+}
+.List_item__MWE2M:hover {
+  background: var(--highlight-color);
+}
+.List_item__MWE2M[data-selected] {
+  font-weight: bold;
+}
+.List_item__MWE2M[data-selected] .List_check__NTFkY {
+  display: block;
+}
+.List_check__NTFkY {
+  display: none;
+}
+
 /* virtual-css:css:22e6c8058c0151ab54d204a5cd8c6d11 */
 .ListItem_item__MzQ0Z {
   display: flex;
@@ -2913,27 +3072,6 @@ body a.Button_button__YmM3M {
   display: none;
 }
 
-/* virtual-css:css:0fb02723d81c5960ed149d3d9f58f1ba */
-.List_list__OGNmY {
-  overflow: hidden;
-  min-width: 100px;
-  outline: none;
-}
-.List_item__ZTAwN {
-  border: var(--border-radius);
-}
-.List_separator__ZDRjM {
-  border-bottom: var(--border);
-}
-.List_section__MjY4N {
-  margin-bottom: var(--spacing-3);
-}
-.List_header__ZjI0N {
-  font-size: var(--font-size-2);
-  font-weight: var(--font-weight-bold);
-  padding: var(--padding-y) var(--padding-x);
-}
-
 /* virtual-css:css:f94974973c639ccc39a8a6465cbebeb2 */
 .Popover_popover__YmFhM[data-placement=top] {
   --origin: translateY(8px);
@@ -3796,125 +3934,6 @@ body a.Button_button__YmM3M {
   resize: vertical;
 }
 
-/* virtual-css:css:2660738c02b9f8e6e348a808b81b16d8 */
-.Toast_viewport__NzVhM {
-  --viewport-padding: 25px;
-  position: fixed;
-  bottom: 0;
-  right: 0;
-  display: flex;
-  flex-direction: column;
-  padding: var(--viewport-padding);
-  gap: 10px;
-  width: 460px;
-  max-width: 100vw;
-  margin: 0;
-  list-style: none;
-  z-index: 2147483647;
-  outline: none;
-}
-.Toast_toast__YWM3Z {
-  display: grid;
-  grid-template-areas: "icon title action" "icon description action";
-  grid-template-columns: auto 1fr auto;
-  grid-auto-columns: auto;
-  align-items: center;
-  background-color: var(--background-color);
-  border-radius: var(--border-radius);
-  box-shadow: var(--box-shadow-3);
-  padding: 1.25rem 1.5rem;
-  border: var(--border);
-  position: relative;
-}
-.Toast_toast__YWM3Z[data-state=open] {
-  animation: Toast_slide-in__ZDZhN 150ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-.Toast_toast__YWM3Z[data-state=closed] {
-  animation: Toast_hide__NjM0N 100ms ease-in;
-}
-.Toast_toast__YWM3Z[data-swipe=move] {
-  transform: translateX(0);
-}
-.Toast_toast__YWM3Z[data-swipe=cancel] {
-  transform: translateX(0);
-  transition: transform 200ms ease-out;
-}
-.Toast_toast__YWM3Z[data-swipe=end] {
-  animation: Toast_swipe-out__NzI3N 100ms ease-out;
-}
-.Toast_toast__YWM3Z:has(.Toast_icon__MmY1Y) {
-  grid-template-columns: auto 1fr auto;
-  column-gap: var(--gap);
-}
-.Toast_icon__MmY1Y {
-  grid-area: icon;
-}
-.Toast_icon__MmY1Y:empty {
-  display: none;
-}
-.Toast_title__OTU5Z {
-  grid-area: title;
-  color: var(--font-color);
-  font-weight: 700;
-}
-.Toast_description__OWJkZ {
-  grid-area: description;
-}
-.Toast_action__NjZiZ {
-  grid-area: action;
-  border: 0;
-  background: transparent;
-}
-.Toast_close__MjU1N {
-  color: currentColor;
-  position: absolute;
-  right: 10px;
-  top: 10px;
-  display: none;
-  border: 0;
-  background: transparent;
-}
-.Toast_toast__YWM3Z:hover .Toast_close__MjU1N {
-  display: block;
-  cursor: pointer;
-}
-.Toast_toast__YWM3Z.Toast_info__MTZkO {
-  color: var(--primary-font-color);
-  background: var(--primary-color);
-  border: 0;
-}
-.Toast_toast__YWM3Z.Toast_error__NTA3M {
-  color: var(--danger-font-color);
-  background: var(--danger-color);
-  border: 0;
-}
-@keyframes Toast_hide__NjM0N {
-  from {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateY(50px);
-  }
-}
-@keyframes Toast_slide-in__ZDZhN {
-  from {
-    transform: translateX(calc(100% + var(--viewport-padding)));
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-@keyframes Toast_swipe-out__NzI3N {
-  from {
-    transform: translateX(0);
-  }
-  to {
-    transform: translateX(calc(100% + var(--viewport-padding)));
-  }
-}
-
 /* virtual-css:css:9e5c8c52b82d4f77f80ba529f88ddc39 */
 .Toggle_toggle__OWVjZ {
   font-size: var(--font-size);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umami/react-zen",
-  "version": "0.25.0",
+  "version": "0.26.0",
   "description": "React components built by Umami",
   "author": "Umami <hello@umami.is>",
   "license": "MIT",
@@ -49,22 +49,22 @@
     "@mdx-js/loader": "^3.0.0",
     "@mdx-js/react": "^3.0.0",
     "@next/mdx": "^15.0.2",
-    "@radix-ui/react-slot": "^1.0.2",
-    "@radix-ui/react-toast": "^1.2.1",
+    "@react-spring/web": "^9.7.5",
     "classnames": "^2.5.1",
     "dts-bundle": "^0.7.3",
     "glob": "^10.3.10",
     "gray-matter": "^4.0.3",
-    "next": "15.0.2",
+    "next": "15.1.0",
     "next-mdx-remote": "^5.0.0",
-    "react": "^19.0.0-rc-66855b96-20241106",
+    "react": "^19.0.0",
     "react-aria-components": "^1.5.0",
-    "react-dom": "^19.0.0-rc-66855b96-20241106",
-    "react-hook-form": "^7.53.0",
-    "react-icons": "^5.2.1",
+    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.54.1",
+    "react-icons": "^5.4.0",
+    "react-transition-group": "^4.4.5",
     "recursive-readdir": "^2.2.3",
     "thenby": "^1.3.4",
-    "zustand": "^4.5.0"
+    "zustand": "^5.0.2"
   },
   "devDependencies": {
     "@deanc/esbuild-plugin-postcss": "^1.0.2",