@dgithiomi/sbui-web 1.0.2 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -8,15 +8,15 @@ A **React** component library and **interactive playground** for building, previ
8
8
 
9
9
  ## What’s in this repo
10
10
 
11
- | Area | Path | Role |
12
- | ------------------ | ---------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
11
+ | Area | Path | Role |
12
+ | ------------------ | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
13
13
  | **Web components** | [`components/web`](./components/web) | Atomic React components (`TextArea`, `Tooltip`, …), built with **tsup**, shipped as **`@dgithiomi/sbui-web`** |
14
- | **Playground** | [`apps/playground`](./apps/playground) | Vite app to browse variants, API tables, and theme modes |
15
- | **Design tokens** | [`packages/assets`](./packages/assets) | Color primitives, themes (light/dark), shared token source |
16
- | **Icons** | [`packages/icons`](./packages/icons) | Shared SVG icon components (`@uniicy/icons`) |
17
- | **Utilities** | [`packages/libs`](./packages/libs) | Shared helpers (e.g. `cn()` via `classnames` + `tailwind-merge`) |
18
- | **Core** | [`packages/core`](./packages/core) | Shared hooks and utilities for apps in the monorepo |
19
- | **Consumer docs** | [`docs/consumer-integration-guide.md`](./docs/consumer-integration-guide.md) | Full guide for teams integrating the library in React or Next.js |
14
+ | **Playground** | [`apps/playground`](./apps/playground) | Vite app to browse variants, API tables, and theme modes |
15
+ | **Design tokens** | [`packages/assets`](./packages/assets) | Color primitives, themes (light/dark), shared token source |
16
+ | **Icons** | [`packages/icons`](./packages/icons) | Shared SVG icon components (`@uniicy/icons`) |
17
+ | **Utilities** | [`packages/libs`](./packages/libs) | Shared helpers (e.g. `cn()` via `classnames` + `tailwind-merge`) |
18
+ | **Core** | [`packages/core`](./packages/core) | Shared hooks and utilities for apps in the monorepo |
19
+ | **Consumer docs** | [`docs/consumer-integration-guide.md`](./docs/consumer-integration-guide.md) | Full guide for teams integrating the library in React or Next.js |
20
20
 
21
21
  ---
22
22
 
@@ -177,10 +177,67 @@ For **React + Vite**, **Next.js Pages/App Router**, Tailwind preset setup, dark
177
177
 
178
178
  ---
179
179
 
180
+ ## Global provider usage (recommended)
181
+
182
+ `SbuiProvider` is the single top-level wrapper for library features that require React context (Toast now, more features later).
183
+
184
+ ### Why `enableToastProvider` exists
185
+
186
+ - `enableToastProvider` is an **optional boolean prop** on `SbuiProvider`.
187
+ - Default is `true`, so Toast context is mounted automatically.
188
+ - You only set `enableToastProvider={false}` for advanced cases (for example:
189
+ tests, custom host-level toast system, or temporarily disabling Toast behavior).
190
+ - In normal consumer apps, you should **not** set it; keep default behavior.
191
+
192
+ ### One-wrapper setup
193
+
194
+ ```tsx
195
+ // main.tsx / app root
196
+ import { SbuiProvider } from "@dgithiomi/sbui-web";
197
+ import "@dgithiomi/sbui-web/styles.css";
198
+
199
+ export function Root() {
200
+ return (
201
+ <SbuiProvider>
202
+ <App />
203
+ </SbuiProvider>
204
+ );
205
+ }
206
+ ```
207
+
208
+ ### Triggering Toast from components
209
+
210
+ ```tsx
211
+ import { useToast } from "@dgithiomi/sbui-web";
212
+
213
+ export function SaveButton() {
214
+ const { showToast } = useToast();
215
+
216
+ return (
217
+ <button
218
+ onClick={() =>
219
+ showToast({
220
+ variant: "success",
221
+ title: "Saved",
222
+ message: "Your changes were saved.",
223
+ duration: "short",
224
+ })
225
+ }
226
+ >
227
+ Save
228
+ </button>
229
+ );
230
+ }
231
+ ```
232
+
233
+ If `enableToastProvider={false}`, `useToast()` will throw unless you provide `ToastProvider` yourself.
234
+
235
+ ---
236
+
180
237
  ## Package exports (`@dgithiomi/sbui-web`)
181
238
 
182
- | Import | Description |
183
- | -------------------------- | ----------------------------------- |
239
+ | Import | Description |
240
+ | ------------------------------------- | ----------------------------------- |
184
241
  | `@dgithiomi/sbui-web` | React components + TypeScript types |
185
242
  | `@dgithiomi/sbui-web/styles.css` | Global stylesheet (required) |
186
243
  | `@dgithiomi/sbui-web/tailwind-preset` | Tailwind v3 preset for host apps |
@@ -232,9 +289,9 @@ Prefer semantic classes in components so light/dark switches without changing JS
232
289
 
233
290
  Before publishing `@dgithiomi/sbui-web` to npm:
234
291
 
235
- 1. Run `bun run build` in `components/web` and verify `dist/` includes JS, types, and `styles.css`.
236
- 2. Confirm the package tarball has no `workspace:*` dependencies with `npm pack --dry-run`.
237
- 3. Publish from `components/web` using `npm publish --access public`.
292
+ 1. Run `bun run build` in `components/web` and verify `dist/` includes JS, types, and `styles.css`.
293
+ 2. Confirm the package tarball has no `workspace:*` dependencies with `npm pack --dry-run`.
294
+ 3. Publish from `components/web` using `npm publish --access public`.
238
295
  4. Install `@dgithiomi/sbui-web` in a separate React/Next.js app and import `@dgithiomi/sbui-web/styles.css` once.
239
296
 
240
297
  See the **Before publishing** section in [docs/consumer-integration-guide.md](./docs/consumer-integration-guide.md).
@@ -4,7 +4,13 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
4
  var __getOwnPropNames = Object.getOwnPropertyNames;
5
5
  var __getProtoOf = Object.getPrototypeOf;
6
6
  var __hasOwnProp = Object.prototype.hasOwnProperty;
7
- var __commonJS = (cb, mod) => function __require() {
7
+ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
8
+ get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
9
+ }) : x)(function(x) {
10
+ if (typeof require !== "undefined") return require.apply(this, arguments);
11
+ throw Error('Dynamic require of "' + x + '" is not supported');
12
+ });
13
+ var __commonJS = (cb, mod) => function __require2() {
8
14
  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
9
15
  };
10
16
  var __copyProps = (to, from, except, desc) => {
@@ -25,7 +31,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
25
31
  ));
26
32
 
27
33
  export {
34
+ __require,
28
35
  __commonJS,
29
36
  __toESM
30
37
  };
31
- //# sourceMappingURL=chunk-3QS3WKRC.mjs.map
38
+ //# sourceMappingURL=chunk-LZOMFHX3.mjs.map