@olwiba/cn 0.1.51 → 0.1.53

package/dist/index.d.ts

@@ -1000,7 +1000,7 @@ declare const Slider: React$1.ForwardRefExoticComponent<SliderProps & React$1.Re
 
 type ToasterProps = React$1.ComponentProps<typeof Toaster$1>;
 type ToasterMode = "playful" | "smooth";
-declare const Toaster: ({ mode: modeProp, className, style, duration, ...props }: ToasterProps & {
+declare const Toaster: ({ mode: modeProp, className, style, duration, closeButton, ...props }: ToasterProps & {
     mode?: ToasterMode;
 }) => React$1.JSX.Element;
 

package/dist/index.js

@@ -5188,6 +5188,12 @@ var Toaster = ({
   className,
   style,
   duration = DEFAULT_TOAST_DURATION,
+  // On by default, because the alternative was every consumer deciding
+  // separately: the apps passed `closeButton`, the docs site did not, and the
+  // same component then looked like two different components depending on where
+  // you met it. A toast carrying an action is also one you may want to dismiss
+  // without taking it, and waiting out the timer is not a dismissal.
+  closeButton = true,
   ...props
 }) => {
   const theme = useDocumentTheme();
@@ -5212,13 +5218,18 @@ var Toaster = ({
              so setting the properties directly is both simpler and no longer
              dependent on variables whose declaration site we do not control. */
           left: unset;
-          right: 0.5rem;
-          top: 0.5rem;
+          right: 0.375rem;
+          top: 0.375rem;
           height: 1.25rem;
           width: 1.25rem;
           padding: 0;
           border: none;
+          /* The top-right corner is rounded harder than the other three so the
+             hover fill nests inside the toast's own curve. Tucked this close to
+             the corner, a uniformly square-ish button reads as overhanging the
+             card the moment it gains a background. */
           border-radius: var(--radius-sm);
+          border-top-right-radius: 0.375rem;
           background: transparent;
           /* Inherited rather than a fixed token: on a richColors toast the
              text is already the only colour guaranteed to read against that
@@ -5255,6 +5266,46 @@ var Toaster = ({
           line-height: 1.45;
           opacity: 0.75;
         }
+        /* Grid rather than sonner's flex row.
+           Three things have to hold at once: the icon keeps its own column to
+           the left of the text, it sits at the top of that column rather than
+           centred, and the action takes a second row beneath the text instead of
+           running inline at the end of the first.
+
+           sonner centres every child, which is right for a one-line toast and
+           steadily worse as it grows: with a title, a description and an action
+           the icon drifts to the middle of a three-line block and stops reading
+           as the marker for the line it belongs to. Toasts have no height limit,
+           so that only gets worse the taller they are.
+
+           Flex could not express the third without disturbing the first.
+           Forcing a wrap with flex-basis: 100% and then clamping the width back
+           with max-content does nothing, because flex line-breaking measures the
+           item *after* max-width is applied: the button stayed narrow and stayed
+           inline. Stating the placement is shorter than coaxing it. */
+        [data-sonner-toaster] [data-sonner-toast][data-styled='true'] {
+          display: grid;
+          grid-template-columns: auto minmax(0, 1fr);
+          align-items: start;
+          column-gap: 6px;
+          row-gap: 0.5rem;
+        }
+        [data-sonner-toaster] [data-sonner-toast][data-styled='true'] [data-icon] {
+          grid-column: 1;
+          grid-row: 1;
+          /* Optical centring against the title's first line, not its box. */
+          margin-top: 0.0625rem;
+        }
+        [data-sonner-toaster] [data-sonner-toast][data-styled='true'] [data-content] {
+          grid-column: 2;
+          grid-row: 1;
+          min-width: 0;
+        }
+        /* A toast with no icon has nothing in column one, which collapses to
+           zero width, so the text still starts at the padding edge. */
+        [data-sonner-toaster] [data-sonner-toast][data-styled='true']:not(:has([data-icon])) [data-content] {
+          grid-column: 1 / -1;
+        }
         /* Buttons inherit the toast's own colour rather than the global
            primary, so an action on a richColors error still reads against red
            instead of disappearing into it. */
@@ -5264,10 +5315,33 @@ var Toaster = ({
           font-size: 0.75rem;
           font-weight: 500;
         }
+        /* Second row, under the text and sharing its left edge.
+           justify-self: start keeps it at its label width instead of
+           stretching across the column, which a grid item otherwise does. */
         [data-sonner-toaster] [data-sonner-toast][data-styled='true'] [data-action] {
-          background: color-mix(in oklab, currentColor 90%, transparent);
+          grid-column: 2;
+          grid-row: 2;
+          justify-self: start;
+          margin: 0;
+        }
+        [data-sonner-toaster] [data-sonner-toast][data-styled='true']:not(:has([data-icon])) [data-action] {
+          grid-column: 1 / -1;
+        }
+        /* Inverted against the toast: its text colour becomes the fill.
+           This used to read color-mix(in oklab, currentColor 90%, transparent)
+           for the background while the same rule set color: var(--normal-bg).
+           currentColor resolves to the element's own colour, so both ended up
+           as the toast background: a dark button with dark text on a dark
+           toast, invisible and impossible to aim at. Naming the token instead of
+           reaching for currentColor keeps the contrast pair explicit, and still
+           tracks a richColors toast, since sonner sets both variables per type. */
+        [data-sonner-toaster] [data-sonner-toast][data-styled='true'] [data-action] {
+          background: var(--normal-text);
           color: var(--normal-bg);
         }
+        [data-sonner-toaster] [data-sonner-toast][data-styled='true'] [data-action]:hover {
+          background: color-mix(in oklab, var(--normal-text) 88%, var(--normal-bg));
+        }
         [data-sonner-toaster] [data-sonner-toast][data-styled='true'] [data-cancel] {
           background: color-mix(in oklab, currentColor 10%, transparent);
           color: inherit;
@@ -5294,6 +5368,7 @@ var Toaster = ({
       {
         theme,
         duration,
+        closeButton,
         className: cn("toaster group", mode && `toaster-${mode}`, className),
         style: { zIndex: 9999999, ...style },
         icons: {