@dgithiomi/sbui-web 1.0.3 → 1.0.5

package/README.md

@@ -1,8 +1,8 @@
-# Uniicy UI — Component Library
+# SB UI — Sport Betting Component Library
 
 A **React** component library and **interactive playground** for building, previewing, and stress-testing UI used in the Uniicy sports-betting experience. The repo is a **Bun + Turborepo** monorepo: design tokens and shared utilities live in `packages/`, publishable web components live in `components/web`, and the playground in `apps/playground` is the live workbench for developers and QA.
 
-![Uniicy component playground — overview screen](../../docs/images/playground.png)
+![Uniicy component playground — overview screen](https://raw.githubusercontent.com/githiomi/sb-ui/main/docs/images/playground.png)
 
 ---
 

package/dist/index.cjs

@@ -12299,35 +12299,42 @@ var TOAST_VARIANTS = {
     backgroundColor: "rgb(var(--color-fg))",
     textColor: "rgb(var(--color-fg-inverse))",
     iconBackground: "rgb(var(--color-success-400))",
-    toastContentColor: "rgb(var(--color-success-400))",
+    toastContentColor: "rgb(var(--color-success-600))",
     icon: /* @__PURE__ */ import_react37.default.createElement(
       Success,
       {
-        color: "rgb(var(--color-success-700))",
-        className: "rounded-full"
+        size: 16,
+        className: "rounded-full",
+        color: "rgb(var(--color-success-600))"
       }
     )
   },
   error: {
     backgroundColor: "rgb(var(--color-fg))",
     textColor: "rgb(var(--color-fg-inverse))",
-    iconBackground: "rgb(var(--color-error-400))",
-    toastContentColor: "rgb(var(--color-error-400))",
-    icon: /* @__PURE__ */ import_react37.default.createElement(XFill, { color: "rgb(var(--color-error-700))" })
+    toastContentColor: "rgb(var(--color-error-600))",
+    iconBackground: "rgb(var(--color-error-400) / 80%)",
+    icon: /* @__PURE__ */ import_react37.default.createElement(XFill, { size: 16, color: "rgb(var(--color-error-600))" })
   },
   warning: {
     backgroundColor: "rgb(var(--color-fg))",
     textColor: "rgb(var(--color-fg-inverse))",
-    iconBackground: "rgb(var(--color-warning-400))",
-    toastContentColor: "rgb(var(--color-warning-400))",
-    icon: /* @__PURE__ */ import_react37.default.createElement(Warning, { color: "rgb(var(--color-warning-700))" })
+    iconBackground: "rgb(var(--color-warning-500))",
+    toastContentColor: "rgb(var(--color-warning-600))",
+    icon: /* @__PURE__ */ import_react37.default.createElement(Warning, { size: 16, color: "rgb(var(--color-warning-600))" })
   },
   info: {
     backgroundColor: "rgb(var(--color-fg))",
     textColor: "rgb(var(--color-fg-inverse))",
-    iconBackground: "rgb(var(--color-neutral-400))",
-    toastContentColor: "rgb(var(--color-neutral-400))",
-    icon: /* @__PURE__ */ import_react37.default.createElement(CircledInformation, { color: "white" })
+    iconBackground: "rgb(var(--color-primary-400))",
+    toastContentColor: "rgb(var(--color-primary-600))",
+    icon: /* @__PURE__ */ import_react37.default.createElement(
+      CircledInformation,
+      {
+        size: 16,
+        color: "rgb(var(--color-primary-600))"
+      }
+    )
   }
 };
 function secondsToMillis(seconds) {
@@ -12339,7 +12346,7 @@ var Toast = ({
   title,
   message,
   onClose,
-  variant,
+  variant = "success",
   duration = "short"
 }) => {
   const isMobile = useIsMobile();
@@ -12420,9 +12427,9 @@ var Toast = ({
         style: {
           borderColor: toastColors.closeIconBorderColor
         },
-        className: `cursor-pointer rounded-full border p-2 opacity-50 hover:opacity-100`
+        className: `cursor-pointer rounded-full border p-1 opacity-50 hover:opacity-100`
       },
-      /* @__PURE__ */ import_react39.default.createElement(X, { color: toastColors.closeIconColor })
+      /* @__PURE__ */ import_react39.default.createElement(X, { size: 16, color: toastColors.closeIconColor })
     )),
     /* @__PURE__ */ import_react39.default.createElement(
       motion.div,
@@ -12441,6 +12448,9 @@ var Toast = ({
   );
 };
 
+// src/molecules/Toast/useToast.ts
+var import_react43 = require("react");
+
 // src/molecules/Toast/Toast.provider.tsx
 var import_react40 = __toESM(require("react"), 1);
 var import_react_dom = require("react-dom");
@@ -12500,7 +12510,6 @@ var ToastProvider = ({
 };
 
 // src/molecules/Toast/useToast.ts
-var import_react43 = require("react");
 function useToast() {
   const toastContext = (0, import_react43.useContext)(ToastContext);
   if (!toastContext) {