@avenue-ticketing/ui 0.12.0-beta.5 → 0.12.0-beta.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@avenue-ticketing/ui",
-  "version": "0.12.0-beta.5",
+  "version": "0.12.0-beta.6",
   "description": "Avenue UI components for React (Untitled UI beta)",
   "license": "MIT",
   "repository": {
@@ -16,12 +16,10 @@
   "type": "module",
   "files": [
     "dist",
-    "theme.css",
-    "source.css"
+    "theme.css"
   ],
   "exports": {
     "./theme.css": "./theme.css",
-    "./source.css": "./source.css",
     "./react/*": {
       "types": "./dist/react/*.d.ts",
       "import": "./dist/react/*.js",

package/theme.css

@@ -1,7 +1,7 @@
 /**
  * @avenue-ticketing/ui — default Tailwind v4 theme (tokens + component scan).
  * Usage: @import "tailwindcss"; @import "@avenue-ticketing/ui/theme.css";
- * Override tokens on :root / .dark after this import. Or use source.css if you own the tokens.
+ * Override tokens on :root / .dark after this import.
  */
 
 @source "./dist/**/*.js";
@@ -916,3 +916,88 @@
     --radius-4xl: var(--corner-4xl);
     --radius-full: var(--corner-full);
 }
+
+/**
+ * Sonner injects global styles even when `unstyled` is true. Layout + resets live here.
+ */
+
+[data-sonner-toast].avenue-toast {
+    display: grid !important;
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: start;
+    justify-items: start;
+    column-gap: 12px;
+    row-gap: 4px;
+}
+
+[data-sonner-toast].avenue-toast [data-icon] {
+    grid-column: 1;
+    grid-row: 1;
+    position: relative;
+    display: flex;
+    width: 20px;
+    min-width: 20px;
+    height: 24px;
+    align-items: center;
+    justify-content: flex-start;
+    align-self: start;
+}
+
+[data-sonner-toast].avenue-toast [data-content] {
+    grid-column: 2;
+    grid-row: 1;
+    min-width: 0;
+    text-align: left;
+}
+
+[data-sonner-toast].avenue-toast:not(:has([data-icon])) [data-content] {
+    grid-column: 1 / -1;
+}
+
+[data-sonner-toast].avenue-toast [data-title],
+[data-sonner-toast].avenue-toast [data-description] {
+    text-align: left;
+}
+
+[data-sonner-toast].avenue-toast [data-toast-actions] {
+    grid-column: 1 / -1;
+    grid-row: 2;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 12px;
+}
+
+[data-sonner-toast].avenue-toast:has([data-icon]) [data-toast-actions] {
+    padding-left: 32px;
+}
+
+[data-sonner-toast].avenue-toast [data-toast-actions] button {
+    margin: 0;
+}
+
+/* Sonner keeps rendering .sonner-loader after promise resolve — hide it once loading ends. */
+[data-sonner-toast].avenue-toast:not([data-type="loading"]) .sonner-loader,
+[data-sonner-toast].avenue-toast:not([data-type="loading"]) .sonner-loading-wrapper {
+    display: none !important;
+}
+
+/* Phosphor loader — undo Sonner's absolutely-centered .sonner-loader wrapper. */
+[data-sonner-toast].avenue-toast[data-type="loading"] .sonner-loader {
+    position: static !important;
+    top: auto !important;
+    left: auto !important;
+    transform: none !important;
+}
+
+/* Promise toasts keep data-promise=true after resolve — show the success/error icon immediately. */
+[data-sonner-toast].avenue-toast[data-promise="true"]:not([data-type="loading"]) [data-icon] svg {
+    opacity: 1 !important;
+    transform: none !important;
+    animation: none !important;
+}
+
+/* Let resolved promise toasts resize when the message changes. */
+[data-sonner-toast].avenue-toast[data-promise="true"]:not([data-type="loading"]) {
+    height: auto !important;
+}

package/source.css

@@ -1,10 +0,0 @@
-/**
- * Tailwind scan only — use when your app already defines the same Untitled UI tokens.
- *
- *   @import "tailwindcss";
- *   @import "@avenue-ticketing/ui/source.css";
- *
- * Do not import theme.css in that case — it would duplicate tokens.
- */
-
-@source "./dist/**/*.js";