@rozie-ui/toast-solid 0.1.0

package/src/index.ts

@@ -0,0 +1,5 @@
+export { default as Toaster } from './Toaster';
+export { default } from './Toaster';
+
+/** The `$expose` imperative handle received via `ref` — { show, dismiss, clear, patch, promise }. */
+export type { ToasterHandle } from './Toaster';

package/src/themes/base.css

@@ -0,0 +1,57 @@
+/*
+ * @rozie-ui/toast — base token reference.
+ *
+ * Every COSMETIC value the toast host renders is a `--rozie-toast-*` custom
+ * property. The component ships with inline `var(token, fallback)` defaults, so
+ * importing this file is OPTIONAL — it simply makes the full token surface
+ * explicit in one place so you can copy/override exactly what you need.
+ *
+ * The structural rules (the fixed-corner region, the flex stack, the per-toast
+ * box model, the close button) live in the component's scoped `<style>` (per-leaf,
+ * NOT consumer-overridable). Only the values below flow through tokens.
+ *
+ * Override any token at any ancestor scope (`:root`, `.dark`, a wrapper, or the
+ * `.rozie-toaster` element). See themes/shadcn.css, themes/material.css and
+ * themes/bootstrap.css for design-system bridges.
+ */
+.rozie-toaster {
+  /* region layout */
+  --rozie-toast-z: 9999;
+  --rozie-toast-gap: 0.5rem;
+  --rozie-toast-region-padding: 1rem;
+  --rozie-toast-max-width: calc(100vw - 2rem);
+  --rozie-toast-font: inherit;
+
+  /* per-toast box model */
+  --rozie-toast-content-gap: 0.75rem;
+  --rozie-toast-min-width: 16rem;
+  --rozie-toast-toast-max-width: 24rem;
+  --rozie-toast-padding: 0.75rem 1rem;
+  --rozie-toast-color: #fff;
+  --rozie-toast-bg: #333;
+  --rozie-toast-radius: 0.5rem;
+  --rozie-toast-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
+
+  /* per-type accents */
+  --rozie-toast-success-bg: #16a34a;
+  --rozie-toast-error-bg: #dc2626;
+  --rozie-toast-warning-bg: #ca8a04;
+  --rozie-toast-info-bg: var(--rozie-toast-bg, #333);
+
+  /* message + close button */
+  --rozie-toast-font-size: 0.9rem;
+  --rozie-toast-close-size: 1.25rem;
+  --rozie-toast-close-opacity: 0.75;
+
+  /* enter/exit lifecycle */
+  --rozie-toast-enter-duration: 200ms;
+  --rozie-toast-exit-duration: 200ms;
+
+  /* stacked mode (opt-in `stacked` prop) — collapsed depth transform */
+  --rozie-toast-stack-offset: 8px;
+  --rozie-toast-stack-scale-step: 0.05;
+
+  /* the decorative 'loading' type spinner */
+  --rozie-toast-spinner-size: 1em;
+  --rozie-toast-spinner-color: currentColor;
+}

package/src/themes/bootstrap.css

@@ -0,0 +1,27 @@
+/*
+ * @rozie-ui/toast — Bootstrap 5 bridge.
+ *
+ * Maps the toast tokens onto Bootstrap's `--bs-*` CSS variables (Bootstrap
+ * 5.2+). Reading them live means the toast host follows `data-bs-theme="dark"`
+ * and any custom `$primary` build automatically. Falls back to Bootstrap's
+ * default palette when the vars are absent. Mirrors Bootstrap's own toast /
+ * alert contextual colors.
+ *
+ *   import '@rozie-ui/toast-react/themes/bootstrap.css';
+ */
+.rozie-toaster {
+  --rozie-toast-color: #fff;
+  --rozie-toast-bg: var(--bs-dark, #212529);
+  --rozie-toast-radius: var(--bs-border-radius, 0.375rem);
+  --rozie-toast-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+
+  --rozie-toast-success-bg: var(--bs-success, #198754);
+  --rozie-toast-error-bg: var(--bs-danger, #dc3545);
+  --rozie-toast-warning-bg: var(--bs-warning, #ffc107);
+  --rozie-toast-info-bg: var(--bs-info, #0dcaf0);
+
+  /* Bootstrap's own $transition-fade / $toast-*-time defaults are ~150ms. */
+  --rozie-toast-enter-duration: 150ms;
+  --rozie-toast-exit-duration: 150ms;
+  --rozie-toast-spinner-color: #fff;
+}

package/src/themes/material.css

@@ -0,0 +1,28 @@
+/*
+ * @rozie-ui/toast — Material Design 3 bridge.
+ *
+ * Maps the toast tokens onto the MD3 system color roles
+ * (`--md-sys-color-*`) emitted by material-web / @material/material-color-utilities
+ * theme builders. Falls back to the baseline M3 light palette when those vars
+ * are absent, so it renders correctly even without a generated theme. The default
+ * (info) toast uses the M3 "inverse surface" snackbar convention.
+ *
+ *   import '@rozie-ui/toast-react/themes/material.css';
+ */
+.rozie-toaster {
+  --rozie-toast-color: var(--md-sys-color-inverse-on-surface, #f5eff7);
+  --rozie-toast-bg: var(--md-sys-color-inverse-surface, #322f35);
+  --rozie-toast-radius: 0.25rem;
+  --rozie-toast-shadow: 0 3px 5px rgba(0, 0, 0, 0.2), 0 6px 10px rgba(0, 0, 0, 0.14);
+
+  --rozie-toast-success-bg: #2e7d32;
+  --rozie-toast-error-bg: var(--md-sys-color-error, #b3261e);
+  --rozie-toast-warning-bg: #f9a825;
+  --rozie-toast-info-bg: var(--md-sys-color-inverse-surface, #322f35);
+
+  /* MD3's motion system favors slightly longer "emphasized" easing/duration
+     for surfaces entering/leaving the screen than the 200ms baseline. */
+  --rozie-toast-enter-duration: 250ms;
+  --rozie-toast-exit-duration: 250ms;
+  --rozie-toast-spinner-color: var(--md-sys-color-inverse-on-surface, #f5eff7);
+}

package/src/themes/shadcn.css

@@ -0,0 +1,29 @@
+/*
+ * @rozie-ui/toast — shadcn/ui (Radix) bridge.
+ *
+ * Maps the toast tokens onto the shadcn/ui CSS variables defined on `:root`
+ * / `.dark` (the classic HSL-channel convention: `--background: 0 0% 100%`
+ * consumed as `hsl(var(--background))`). Because it reads those vars live, the
+ * toast host automatically follows light/dark theme switches and accent changes.
+ *
+ *   import '@rozie-ui/toast-react/themes/shadcn.css';
+ *
+ * If your shadcn setup predates the `hsl()`-wrapping convention (Tailwind v4 /
+ * oklch tokens emit pre-formed colors), drop the `hsl(...)` wrappers below.
+ */
+.rozie-toaster {
+  --rozie-toast-color: hsl(var(--foreground, 222.2 84% 4.9%));
+  --rozie-toast-bg: hsl(var(--background, 0 0% 100%));
+  --rozie-toast-radius: var(--radius, 0.5rem);
+  --rozie-toast-shadow: 0 10px 38px -10px hsl(var(--foreground, 222.2 84% 4.9%) / 0.35), 0 10px 20px -15px hsl(var(--foreground, 222.2 84% 4.9%) / 0.2);
+
+  --rozie-toast-success-bg: hsl(142.1 76.2% 36.3%);
+  --rozie-toast-error-bg: hsl(var(--destructive, 0 84.2% 60.2%));
+  --rozie-toast-warning-bg: hsl(38 92% 50%);
+  --rozie-toast-info-bg: hsl(var(--muted, 210 40% 96.1%));
+
+  /* Radix's own Toast primitive animates fast (~150ms) — match that snap. */
+  --rozie-toast-enter-duration: 150ms;
+  --rozie-toast-exit-duration: 150ms;
+  --rozie-toast-spinner-color: hsl(var(--foreground, 222.2 84% 4.9%));
+}