@olwiba/cn 0.1.27 → 0.1.28

package/dist/index.d.ts

@@ -880,7 +880,7 @@ interface SliderProps extends React$1.ComponentPropsWithoutRef<typeof SliderPrim
 }
 declare const Slider: React$1.ForwardRefExoticComponent<SliderProps & React$1.RefAttributes<HTMLSpanElement>>;
 
-type ToasterProps = React.ComponentProps<typeof Toaster$1>;
+type ToasterProps = React$1.ComponentProps<typeof Toaster$1>;
 type ToasterMode = "playful" | "smooth";
 declare const Toaster: ({ mode: modeProp, className, style, ...props }: ToasterProps & {
     mode?: ToasterMode;

package/dist/index.js

@@ -35,7 +35,6 @@ import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as SliderPrimitive from '@radix-ui/react-slider';
-import { useTheme } from 'next-themes';
 import { Toaster as Toaster$1 } from 'sonner';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
@@ -4989,10 +4988,57 @@ var Slider = React37.forwardRef(({ className, size = "default", ...props }, ref)
   }
 ));
 Slider.displayName = SliderPrimitive.Root.displayName;
+function useDocumentTheme() {
+  const [theme, setTheme] = React37.useState("light");
+  React37.useEffect(() => {
+    const root = document.documentElement;
+    const read = () => setTheme(
+      root.classList.contains("dark") || root.dataset.theme === "dark" ? "dark" : "light"
+    );
+    read();
+    const observer = new MutationObserver(read);
+    observer.observe(root, { attributes: true, attributeFilter: ["class", "data-theme"] });
+    return () => observer.disconnect();
+  }, []);
+  return theme;
+}
 var Toaster = ({ mode: modeProp, className, style, ...props }) => {
-  const { theme = "system" } = useTheme();
-  const mode = modeProp ?? useUIVariant();
+  const theme = useDocumentTheme();
+  const ctxVariant = useUIVariant();
+  const mode = modeProp ?? ctxVariant;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: `
+        [data-sonner-toaster] {
+          --toast-close-button-start: unset;
+          --toast-close-button-end: 0.5rem;
+          --toast-close-button-transform: translateY(0.5rem);
+        }
+        [data-sonner-toaster] [data-sonner-toast][data-styled='true'] [data-close-button] {
+          height: 1.25rem;
+          width: 1.25rem;
+          padding: 0;
+          border: none;
+          border-radius: var(--radius-sm);
+          background: transparent;
+          /* Inherited rather than a fixed token: on a richColors toast the
+             text is already the only colour guaranteed to read against that
+             background, so borrowing it keeps the button legible on every
+             variant without a rule per type. */
+          color: inherit;
+          opacity: 0.6;
+          transition: opacity 150ms ease, background-color 150ms ease;
+        }
+        [data-sonner-toaster] [data-sonner-toast][data-styled='true'] [data-close-button] svg {
+          height: 0.75rem;
+          width: 0.75rem;
+        }
+        [data-sonner-toaster] [data-sonner-toast][data-styled='true']:hover [data-close-button]:hover {
+          background: color-mix(in oklab, currentColor 12%, transparent);
+          border-color: transparent;
+          color: inherit;
+          opacity: 1;
+        }
+      ` }),
     mode === "smooth" && /* @__PURE__ */ jsx("style", { children: `[data-sonner-toaster].toaster-smooth { --border-radius: 1.5rem; }` }),
     mode === "playful" && /* @__PURE__ */ jsx("style", { children: `
           [data-sonner-toaster].toaster-playful [data-sonner-toast][data-mounted=true] {