woby-tooltip 1.0.10 → 1.0.12

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/build/index.es.js CHANGED
@@ -223,7 +223,7 @@ class Owner {
223
223
  var _a2;
224
224
  return (_a2 = this.context) == null ? void 0 : _a2[symbol];
225
225
  }
226
- wrap(fn, owner, observer) {
226
+ wrap(fn, owner, observer, stack) {
227
227
  const ownerPrev = OWNER;
228
228
  const observerPrev = OBSERVER;
229
229
  setOwner(owner);
@@ -255,7 +255,7 @@ let Scheduler$2 = class Scheduler {
255
255
  this.waiting = [];
256
256
  this.counter = 0;
257
257
  this.locked = false;
258
- this.flush = () => {
258
+ this.flush = (stack) => {
259
259
  if (this.locked)
260
260
  return;
261
261
  if (this.counter)
@@ -269,8 +269,8 @@ let Scheduler$2 = class Scheduler {
269
269
  if (!queue.length)
270
270
  break;
271
271
  this.waiting = [];
272
- for (let i = 0, l = queue.length; i < l; i++) {
273
- queue[i].update();
272
+ for (let i = 0, l2 = queue.length; i < l2; i++) {
273
+ queue[i][0].update(queue[i][1]);
274
274
  }
275
275
  }
276
276
  } finally {
@@ -283,8 +283,8 @@ let Scheduler$2 = class Scheduler {
283
283
  this.counter -= 1;
284
284
  this.flush();
285
285
  };
286
- this.schedule = (observer) => {
287
- this.waiting.push(observer);
286
+ this.schedule = (observer, stack) => {
287
+ this.waiting.push([observer, stack]);
288
288
  };
289
289
  }
290
290
  };
@@ -310,31 +310,32 @@ class Observable {
310
310
  }
311
311
  return this.value;
312
312
  }
313
- set(value) {
313
+ set(value, stacks) {
314
314
  const equals = this.equals || is;
315
315
  const fresh = this.value === UNINITIALIZED || !equals(value, this.value);
316
316
  if (!fresh)
317
317
  return value;
318
318
  this.value = value;
319
+ const stack = void 0;
319
320
  SchedulerSync.counter += 1;
320
- this.stale(DIRTY_YES);
321
+ this.stale(DIRTY_YES, stack);
321
322
  SchedulerSync.counter -= 1;
322
- SchedulerSync.flush();
323
+ SchedulerSync.flush(stack);
323
324
  return value;
324
325
  }
325
- stale(status) {
326
+ stale(status, stack) {
326
327
  for (const observer of this.observers) {
327
328
  if (observer.status !== DIRTY_MAYBE_NO || observer.observables.has(this)) {
328
329
  if (observer.sync) {
329
330
  observer.status = Math.max(observer.status, status);
330
- SchedulerSync.schedule(observer);
331
+ SchedulerSync.schedule(observer, stack);
331
332
  } else {
332
- observer.stale(status);
333
+ observer.stale(status, stack);
333
334
  }
334
335
  }
335
336
  }
336
337
  }
337
- update(fn) {
338
+ update(fn, stack) {
338
339
  const value = fn(this.value);
339
340
  return this.set(value);
340
341
  }
@@ -400,7 +401,7 @@ class ObservablesArray {
400
401
  update() {
401
402
  var _a2;
402
403
  const { observables } = this;
403
- for (let i = 0, l = observables.length; i < l; i++) {
404
+ for (let i = 0, l2 = observables.length; i < l2; i++) {
404
405
  (_a2 = observables[i].parent) == null ? void 0 : _a2.update();
405
406
  }
406
407
  }
@@ -459,22 +460,22 @@ class Observer extends Owner {
459
460
  this.observables.dispose(deep);
460
461
  super.dispose(deep);
461
462
  }
462
- refresh(fn) {
463
+ refresh(fn, stack) {
463
464
  this.dispose(false);
464
465
  this.status = DIRTY_MAYBE_NO;
465
466
  try {
466
- return this.wrap(fn, this, this);
467
+ return this.wrap(fn, this, this, stack);
467
468
  } finally {
468
469
  this.observables.postdispose();
469
470
  }
470
471
  }
471
- run() {
472
+ run(stack) {
472
473
  throw new Error("Abstract method");
473
474
  }
474
- stale(status) {
475
+ stale(status, stack) {
475
476
  throw new Error("Abstract method");
476
477
  }
477
- update() {
478
+ update(stack) {
478
479
  if (this.disposed)
479
480
  return;
480
481
  if (this.status === DIRTY_MAYBE_YES) {
@@ -482,11 +483,11 @@ class Observer extends Owner {
482
483
  }
483
484
  if (this.status === DIRTY_YES) {
484
485
  this.status = DIRTY_MAYBE_NO;
485
- this.run();
486
+ this.run(stack);
486
487
  if (this.status === DIRTY_MAYBE_NO) {
487
488
  this.status = DIRTY_NO;
488
489
  } else {
489
- this.update();
490
+ this.update(stack);
490
491
  }
491
492
  } else {
492
493
  this.status = DIRTY_NO;
@@ -521,7 +522,7 @@ class Scheduler2 {
521
522
  this.waiting = [];
522
523
  this.locked = false;
523
524
  this.queued = false;
524
- this.flush = () => {
525
+ this.flush = (stack) => {
525
526
  if (this.locked)
526
527
  return;
527
528
  if (!this.waiting.length)
@@ -533,33 +534,33 @@ class Scheduler2 {
533
534
  if (!queue.length)
534
535
  break;
535
536
  this.waiting = [];
536
- for (let i = 0, l = queue.length; i < l; i++) {
537
- queue[i].update();
537
+ for (let i = 0, l2 = queue.length; i < l2; i++) {
538
+ queue[i].update(stack);
538
539
  }
539
540
  }
540
541
  } finally {
541
542
  this.locked = false;
542
543
  }
543
544
  };
544
- this.queue = () => {
545
+ this.queue = (stack) => {
545
546
  if (this.queued)
546
547
  return;
547
548
  this.queued = true;
548
- this.resolve();
549
+ this.resolve(stack);
549
550
  };
550
- this.resolve = () => {
551
+ this.resolve = (stack) => {
551
552
  queueMicrotask(() => {
552
553
  queueMicrotask(() => {
553
554
  {
554
555
  this.queued = false;
555
- this.flush();
556
+ this.flush(stack);
556
557
  }
557
558
  });
558
559
  });
559
560
  };
560
- this.schedule = (effect2) => {
561
+ this.schedule = (effect2, stack) => {
561
562
  this.waiting.push(effect2);
562
- this.queue();
563
+ this.queue(stack);
563
564
  };
564
565
  }
565
566
  }
@@ -586,36 +587,36 @@ class Effect extends Observer {
586
587
  }
587
588
  }
588
589
  /* API */
589
- run() {
590
- const result = super.refresh(this.fn);
590
+ run(stack) {
591
+ const result = super.refresh(this.fn, stack);
591
592
  if (isFunction$1(result)) {
592
593
  lazyArrayPush(this, "cleanups", result);
593
594
  }
594
595
  }
595
- schedule() {
596
+ schedule(stack) {
596
597
  var _a2;
597
598
  if ((_a2 = this.suspense) == null ? void 0 : _a2.suspended)
598
599
  return;
599
600
  if (this.sync) {
600
- this.update();
601
+ this.update(stack);
601
602
  } else {
602
- Scheduler$1.schedule(this);
603
+ Scheduler$1.schedule(this, stack);
603
604
  }
604
605
  }
605
- stale(status) {
606
+ stale(status, stack) {
606
607
  const statusPrev = this.status;
607
608
  if (statusPrev >= status)
608
609
  return;
609
610
  this.status = status;
610
611
  if (!this.sync || statusPrev !== 2 && statusPrev !== 3) {
611
- this.schedule();
612
+ this.schedule(stack);
612
613
  }
613
614
  }
614
- update() {
615
+ update(stack) {
615
616
  var _a2;
616
617
  if ((_a2 = this.suspense) == null ? void 0 : _a2.suspended)
617
618
  return;
618
- super.update();
619
+ super.update(stack);
619
620
  }
620
621
  }
621
622
  const effect = (fn, options2) => {
@@ -1154,7 +1155,7 @@ const getGettersAndSetters = (value) => {
1154
1155
  let getters;
1155
1156
  let setters;
1156
1157
  const keys = Object.keys(value);
1157
- for (let i = 0, l = keys.length; i < l; i++) {
1158
+ for (let i = 0, l2 = keys.length; i < l2; i++) {
1158
1159
  const key = keys[i];
1159
1160
  const descriptor = Object.getOwnPropertyDescriptor(value, key);
1160
1161
  if (!descriptor)
@@ -1307,7 +1308,7 @@ store.reconcile = /* @__PURE__ */ (() => {
1307
1308
  const unext = getTarget(next);
1308
1309
  const prevKeys = Object.keys(uprev);
1309
1310
  const nextKeys = Object.keys(unext);
1310
- for (let i = 0, l = nextKeys.length; i < l; i++) {
1311
+ for (let i = 0, l2 = nextKeys.length; i < l2; i++) {
1311
1312
  const key = nextKeys[i];
1312
1313
  const prevValue = uprev[key];
1313
1314
  const nextValue = unext[key];
@@ -1326,7 +1327,7 @@ store.reconcile = /* @__PURE__ */ (() => {
1326
1327
  prev[key] = void 0;
1327
1328
  }
1328
1329
  }
1329
- for (let i = 0, l = prevKeys.length; i < l; i++) {
1330
+ for (let i = 0, l2 = prevKeys.length; i < l2; i++) {
1330
1331
  const key = prevKeys[i];
1331
1332
  if (!(key in unext)) {
1332
1333
  delete prev[key];
@@ -1382,7 +1383,7 @@ const castArray = (value) => {
1382
1383
  return isArray(value) ? value : [value];
1383
1384
  };
1384
1385
  const flatten = (arr) => {
1385
- for (let i = 0, l = arr.length; i < l; i++) {
1386
+ for (let i = 0, l2 = arr.length; i < l2; i++) {
1386
1387
  if (!isArray(arr[i])) continue;
1387
1388
  return arr.flat(Infinity);
1388
1389
  }
@@ -1602,7 +1603,7 @@ const FragmentUtils = {
1602
1603
  const { values, length } = thiz;
1603
1604
  if (!length) return children;
1604
1605
  if (values instanceof Array) {
1605
- for (let i = 0, l = values.length; i < l; i++) {
1606
+ for (let i = 0, l2 = values.length; i < l2; i++) {
1606
1607
  const value = values[i];
1607
1608
  if (value instanceof Node) {
1608
1609
  children.push(value);
@@ -1712,7 +1713,7 @@ const resolveStyle = (styles, resolved = {}) => {
1712
1713
  const resolveArraysAndStatics = /* @__PURE__ */ (() => {
1713
1714
  const DUMMY_RESOLVED = [];
1714
1715
  const resolveArraysAndStaticsInner = (values, resolved, hasObservables) => {
1715
- for (let i = 0, l = values.length; i < l; i++) {
1716
+ for (let i = 0, l2 = values.length; i < l2; i++) {
1716
1717
  const value = values[i];
1717
1718
  const type = typeof value;
1718
1719
  if (type === "string" || type === "number" || type === "bigint") {
@@ -1818,7 +1819,7 @@ const setChildStatic = (parent, fragment, fragmentOnly, child, dynamic) => {
1818
1819
  }
1819
1820
  const fragmentNext = FragmentUtils.make();
1820
1821
  const children = Array.isArray(child) ? child : [child];
1821
- for (let i = 0, l = children.length; i < l; i++) {
1822
+ for (let i = 0, l2 = children.length; i < l2; i++) {
1822
1823
  const child2 = children[i];
1823
1824
  const type = typeof child2;
1824
1825
  if (type === "string" || type === "number" || type === "bigint") {
@@ -1935,7 +1936,7 @@ const setClassesStatic = (element, object, objectPrev) => {
1935
1936
  }
1936
1937
  } else if (isArray(objectPrev)) {
1937
1938
  objectPrev = store.unwrap(objectPrev);
1938
- for (let i = 0, l = objectPrev.length; i < l; i++) {
1939
+ for (let i = 0, l2 = objectPrev.length; i < l2; i++) {
1939
1940
  if (!objectPrev[i]) continue;
1940
1941
  setClassBoolean(element, false, objectPrev[i]);
1941
1942
  }
@@ -1949,12 +1950,12 @@ const setClassesStatic = (element, object, objectPrev) => {
1949
1950
  }
1950
1951
  if (isArray(object)) {
1951
1952
  if (isStore(object)) {
1952
- for (let i = 0, l = object.length; i < l; i++) {
1953
+ for (let i = 0, l2 = object.length; i < l2; i++) {
1953
1954
  const fn = untrack(() => isFunction(object[i]) ? object[i] : object[SYMBOL_STORE_OBSERVABLE](String(i)));
1954
1955
  setClassBoolean(element, true, fn);
1955
1956
  }
1956
1957
  } else {
1957
- for (let i = 0, l = object.length; i < l; i++) {
1958
+ for (let i = 0, l2 = object.length; i < l2; i++) {
1958
1959
  if (!object[i]) continue;
1959
1960
  setClassBoolean(element, true, object[i]);
1960
1961
  }
@@ -2021,7 +2022,7 @@ const setEventStatic = /* @__PURE__ */ (() => {
2021
2022
  return target;
2022
2023
  }
2023
2024
  });
2024
- for (let i = 0, l = targets.length; i < l; i++) {
2025
+ for (let i = 0, l2 = targets.length; i < l2; i++) {
2025
2026
  target = targets[i];
2026
2027
  const handler = target[key];
2027
2028
  if (!handler) continue;
@@ -2247,6 +2248,7 @@ const wrapCloneElement = (target, component, props) => {
2247
2248
  const createElement = (component, _props, ..._children) => {
2248
2249
  const children = _children.length > 1 ? _children : _children.length > 0 ? _children[0] : void 0;
2249
2250
  const hasChildren = !isVoidChild(children);
2251
+ const { ...rest } = _props ?? {};
2250
2252
  if (hasChildren && isObject(_props) && "children" in _props) {
2251
2253
  throw new Error('Providing "children" both as a prop and as rest arguments is forbidden');
2252
2254
  }
@@ -2334,7 +2336,7 @@ class Memo extends Observer {
2334
2336
  }
2335
2337
  }
2336
2338
  /* API */
2337
- run() {
2339
+ run(stack) {
2338
2340
  const result = super.refresh(this.fn);
2339
2341
  if (!this.disposed && this.observables.empty()) {
2340
2342
  this.disposed = true;
@@ -2343,14 +2345,14 @@ class Memo extends Observer {
2343
2345
  this.observable.set(result);
2344
2346
  }
2345
2347
  }
2346
- stale(status) {
2348
+ stale(status, stack) {
2347
2349
  const statusPrev = this.status;
2348
2350
  if (statusPrev >= status)
2349
2351
  return;
2350
2352
  this.status = status;
2351
2353
  if (statusPrev === DIRTY_MAYBE_YES)
2352
2354
  return;
2353
- this.observable.stale(DIRTY_MAYBE_YES);
2355
+ this.observable.stale(DIRTY_MAYBE_YES, stack);
2354
2356
  }
2355
2357
  }
2356
2358
  const memo = (fn, options2) => {
@@ -2378,7 +2380,7 @@ function resolve(value) {
2378
2380
  }
2379
2381
  if (value instanceof Array) {
2380
2382
  const resolved = new Array(value.length);
2381
- for (let i = 0, l = resolved.length; i < l; i++) {
2383
+ for (let i = 0, l2 = resolved.length; i < l2; i++) {
2382
2384
  resolved[i] = resolve(value[i]);
2383
2385
  }
2384
2386
  return resolved;
@@ -2405,22 +2407,22 @@ function createContext(defaultValue) {
2405
2407
  var n = function(t2, s, r, e) {
2406
2408
  var u;
2407
2409
  s[0] = 0;
2408
- for (var h = 1; h < s.length; h++) {
2409
- var p = s[h++], a = s[h] ? (s[0] |= p ? 1 : 2, r[s[h++]]) : s[++h];
2410
- 3 === p ? e[0] = a : 4 === p ? e[1] = Object.assign(e[1] || {}, a) : 5 === p ? (e[1] = e[1] || {})[s[++h]] = a : 6 === p ? e[1][s[++h]] += a + "" : p ? (u = t2.apply(a, n(t2, a, r, ["", null])), e.push(u), a[0] ? s[0] |= 2 : (s[h - 2] = 0, s[h] = u)) : e.push(a);
2410
+ for (var h2 = 1; h2 < s.length; h2++) {
2411
+ var p = s[h2++], a = s[h2] ? (s[0] |= p ? 1 : 2, r[s[h2++]]) : s[++h2];
2412
+ 3 === p ? e[0] = a : 4 === p ? e[1] = Object.assign(e[1] || {}, a) : 5 === p ? (e[1] = e[1] || {})[s[++h2]] = a : 6 === p ? e[1][s[++h2]] += a + "" : p ? (u = t2.apply(a, n(t2, a, r, ["", null])), e.push(u), a[0] ? s[0] |= 2 : (s[h2 - 2] = 0, s[h2] = u)) : e.push(a);
2411
2413
  }
2412
2414
  return e;
2413
2415
  }, t = /* @__PURE__ */ new Map();
2414
2416
  function htm(s) {
2415
2417
  var r = t.get(this);
2416
2418
  return r || (r = /* @__PURE__ */ new Map(), t.set(this, r)), (r = n(this, r.get(s) || (r.set(s, r = function(n2) {
2417
- for (var t2, s2, r2 = 1, e = "", u = "", h = [0], p = function(n3) {
2418
- 1 === r2 && (n3 || (e = e.replace(/^\s*\n\s*|\s*\n\s*$/g, ""))) ? h.push(0, n3, e) : 3 === r2 && (n3 || e) ? (h.push(3, n3, e), r2 = 2) : 2 === r2 && "..." === e && n3 ? h.push(4, n3, 0) : 2 === r2 && e && !n3 ? h.push(5, 0, true, e) : r2 >= 5 && ((e || !n3 && 5 === r2) && (h.push(r2, 0, e, s2), r2 = 6), n3 && (h.push(r2, n3, 0, s2), r2 = 6)), e = "";
2419
+ for (var t2, s2, r2 = 1, e = "", u = "", h2 = [0], p = function(n3) {
2420
+ 1 === r2 && (n3 || (e = e.replace(/^\s*\n\s*|\s*\n\s*$/g, ""))) ? h2.push(0, n3, e) : 3 === r2 && (n3 || e) ? (h2.push(3, n3, e), r2 = 2) : 2 === r2 && "..." === e && n3 ? h2.push(4, n3, 0) : 2 === r2 && e && !n3 ? h2.push(5, 0, true, e) : r2 >= 5 && ((e || !n3 && 5 === r2) && (h2.push(r2, 0, e, s2), r2 = 6), n3 && (h2.push(r2, n3, 0, s2), r2 = 6)), e = "";
2419
2421
  }, a = 0; a < n2.length; a++) {
2420
2422
  a && (1 === r2 && p(), p(a));
2421
- for (var l = 0; l < n2[a].length; l++) t2 = n2[a][l], 1 === r2 ? "<" === t2 ? (p(), h = [h], r2 = 3) : e += t2 : 4 === r2 ? "--" === e && ">" === t2 ? (r2 = 1, e = "") : e = t2 + e[0] : u ? t2 === u ? u = "" : e += t2 : '"' === t2 || "'" === t2 ? u = t2 : ">" === t2 ? (p(), r2 = 1) : r2 && ("=" === t2 ? (r2 = 5, s2 = e, e = "") : "/" === t2 && (r2 < 5 || ">" === n2[a][l + 1]) ? (p(), 3 === r2 && (h = h[0]), r2 = h, (h = h[0]).push(2, 0, r2), r2 = 0) : " " === t2 || " " === t2 || "\n" === t2 || "\r" === t2 ? (p(), r2 = 2) : e += t2), 3 === r2 && "!--" === e && (r2 = 4, h = h[0]);
2423
+ for (var l2 = 0; l2 < n2[a].length; l2++) t2 = n2[a][l2], 1 === r2 ? "<" === t2 ? (p(), h2 = [h2], r2 = 3) : e += t2 : 4 === r2 ? "--" === e && ">" === t2 ? (r2 = 1, e = "") : e = t2 + e[0] : u ? t2 === u ? u = "" : e += t2 : '"' === t2 || "'" === t2 ? u = t2 : ">" === t2 ? (p(), r2 = 1) : r2 && ("=" === t2 ? (r2 = 5, s2 = e, e = "") : "/" === t2 && (r2 < 5 || ">" === n2[a][l2 + 1]) ? (p(), 3 === r2 && (h2 = h2[0]), r2 = h2, (h2 = h2[0]).push(2, 0, r2), r2 = 0) : " " === t2 || " " === t2 || "\n" === t2 || "\r" === t2 ? (p(), r2 = 2) : e += t2), 3 === r2 && "!--" === e && (r2 = 4, h2 = h2[0]);
2422
2424
  }
2423
- return p(), h;
2425
+ return p(), h2;
2424
2426
  }(s)), r), arguments, [])).length > 1 ? r : r[0];
2425
2427
  }
2426
2428
  const render = (child, parent) => {
@@ -2437,9 +2439,9 @@ const render = (child, parent) => {
2437
2439
  var _a, _b;
2438
2440
  !!((_b = (_a = globalThis.CDATASection) == null ? void 0 : _a.toString) == null ? void 0 : _b.call(_a).match(/^\s*function\s+CDATASection\s*\(\s*\)\s*\{\s*\[native code\]\s*\}\s*$/));
2439
2441
  const registry = {};
2440
- const h2 = (type, props, ...children) => createElement(registry[type] || type, props, ...children);
2442
+ const h = (type, props, ...children) => createElement(registry[type] || type, props, ...children);
2441
2443
  const register = (components) => void assign(registry, components);
2442
- assign(htm.bind(h2), { register });
2444
+ assign(htm.bind(h), { register });
2443
2445
  let nanoid = (size = 21) => crypto.getRandomValues(new Uint8Array(size)).reduce((id, byte) => {
2444
2446
  byte &= 63;
2445
2447
  if (byte < 36) {
@@ -2486,7 +2488,57 @@ ${strings.map((str, i) => i < values.length ? str + get(values[i]) : str).join("
2486
2488
  return { comp, styled: styled2 };
2487
2489
  }
2488
2490
  const styled = Styled().styled;
2491
+ const getScreen = () => {
2492
+ if (typeof window !== "undefined" && window.screen) {
2493
+ return window.screen;
2494
+ }
2495
+ return void 0;
2496
+ };
2497
+ observable(getScreen());
2498
+ observable(0);
2499
+ observable(0);
2500
+ observable(0);
2501
+ observable(0);
2502
+ observable(0);
2503
+ observable(0);
2504
+ observable(0);
2505
+ observable(0);
2506
+ observable(0);
2489
2507
  createContext();
2508
+ function useLocation() {
2509
+ const location = observable(window.location);
2510
+ effect(() => {
2511
+ const handleLocationChange = () => location({ ...window.location });
2512
+ window.addEventListener("popstate", handleLocationChange);
2513
+ const originalPushState = window.history.pushState;
2514
+ const originalReplaceState = window.history.replaceState;
2515
+ window.history.pushState = function(...args) {
2516
+ originalPushState.apply(window.history, args);
2517
+ handleLocationChange();
2518
+ };
2519
+ window.history.replaceState = function(...args) {
2520
+ originalReplaceState.apply(window.history, args);
2521
+ handleLocationChange();
2522
+ };
2523
+ return () => {
2524
+ window.removeEventListener("popstate", handleLocationChange);
2525
+ window.history.pushState = originalPushState;
2526
+ window.history.replaceState = originalReplaceState;
2527
+ };
2528
+ });
2529
+ return location;
2530
+ }
2531
+ observable(0);
2532
+ observable();
2533
+ window.getSelection();
2534
+ observable();
2535
+ observable(0);
2536
+ observable();
2537
+ observable(0);
2538
+ observable(true);
2539
+ observable(0);
2540
+ observable("");
2541
+ observable([]);
2490
2542
  function useComputedStyle(target, patterns = []) {
2491
2543
  const styles = observable({});
2492
2544
  effect(() => {
@@ -2523,7 +2575,9 @@ function useComputedStyle(target, patterns = []) {
2523
2575
  });
2524
2576
  return styles;
2525
2577
  }
2526
- const tooltipDef = `text-left border-b-[#666] border-b border-dotted
2578
+ const l = useLocation();
2579
+ memo(() => get(l).host.toLowerCase().includes("localhost"));
2580
+ const tooltipDef = `
2527
2581
  [&:hover_.tpcontents]:visible [&:hover_.tpcontents]:opacity-100
2528
2582
  `;
2529
2583
  const tooltip = `inline-block relative
@@ -2666,14 +2720,14 @@ const TooltipContent = ({ children, style, class: cls = observable(), className,
2666
2720
  };
2667
2721
  const Demo = () => {
2668
2722
  observable();
2669
- return /* @__PURE__ */ jsx("div", { class: "place-items-center h-screen bg-gray-100", children: [
2723
+ return /* @__PURE__ */ jsx("div", { class: "flex flex-col items-center h-screen bg-gray-100 relative mx-auto w-[50%]", children: [
2670
2724
  "DEMO",
2671
2725
  /* @__PURE__ */ jsx("br", {}),
2672
2726
  /* @__PURE__ */ jsx("br", {}),
2673
2727
  /* @__PURE__ */ jsx("br", {}),
2674
2728
  /* @__PURE__ */ jsx("br", {}),
2675
2729
  /* @__PURE__ */ jsx("br", {}),
2676
- /* @__PURE__ */ jsx("table", { class: "[&_td]:h-[7rem] [&_td]:w-[7rem] [&_td]:text-center ", children: /* @__PURE__ */ jsx("tbody", { children: [
2730
+ /* @__PURE__ */ jsx("table", { class: "[&_td]:h-[7rem] [&_td]:w-[7rem] [&_td]:text-center mx-auto", children: /* @__PURE__ */ jsx("tbody", { children: [
2677
2731
  /* @__PURE__ */ jsx("tr", { children: [
2678
2732
  /* @__PURE__ */ jsx("td", {}),
2679
2733
  /* @__PURE__ */ jsx("td", { children: [
@@ -2681,7 +2735,7 @@ const Demo = () => {
2681
2735
  /* @__PURE__ */ jsx("div", { class: "top", children: /* @__PURE__ */ jsx(Tooltip, { children: [
2682
2736
  "Top",
2683
2737
  /* @__PURE__ */ jsx(TooltipContent, { position: "top", class: `bg-[#009cdc] text-[white] min-w-[300px] box-border border shadow-[0_1px_8px_#000000] transition-opacity duration-[0.8s] px-5 py-2.5 rounded-lg border-solid border-[#000000] `, children: [
2684
- /* @__PURE__ */ jsx("h3", { class: "font-[22px] font-bold", children: "Lorem Ipsum" }),
2738
+ /* @__PURE__ */ jsx("h3", { class: "text-[22px] font-bold", children: "Lorem Ipsum" }),
2685
2739
  /* @__PURE__ */ jsx("ul", { children: [
2686
2740
  /* @__PURE__ */ jsx("li", { children: "Aliquam ac odio ut est" }),
2687
2741
  /* @__PURE__ */ jsx("li", { children: "Cras porttitor orci" })
@@ -2707,7 +2761,7 @@ const Demo = () => {
2707
2761
  "Right",
2708
2762
  /* @__PURE__ */ jsx(TooltipContent, { position: "right", class: "min-w-[200px] w-[400px] translate-x-0 -translate-y-2/4 text-[#EEEEEE] bg-[#444444] box-border shadow-[0_1px_8px_rgba(0,0,0,0.5)] transition-opacity duration-[0.8s] p-5 rounded-lg left-full top-2/4", children: [
2709
2763
  /* @__PURE__ */ jsx("img", { src: "https://www.menucool.com/tooltip/cssttp/tooltip-head.jpg" }),
2710
- /* @__PURE__ */ jsx("h3", { class: "font-[22px] font-bold", children: "Fade in Effect" }),
2764
+ /* @__PURE__ */ jsx("h3", { class: "text-[22px] font-bold", children: "Fade in Effect" }),
2711
2765
  /* @__PURE__ */ jsx("ul", { children: [
2712
2766
  /* @__PURE__ */ jsx("li", { children: "This demo has fade in/out effect." }),
2713
2767
  /* @__PURE__ */ jsx("li", { children: "It is using CSS opacity, visibility, and transition property to toggle the tooltip." }),
@@ -2726,7 +2780,7 @@ const Demo = () => {
2726
2780
  "Bottom",
2727
2781
  /* @__PURE__ */ jsx(TooltipContent, { position: "bottom", class: `bg-[#eeeeee] min-w-[400px] box-border border shadow-[0_1px_8px_#000000] transition-opacity duration-[0.8s] px-5 py-2.5 rounded-lg border-solid border-[#000000] `, children: [
2728
2782
  /* @__PURE__ */ jsx("img", { class: "w-[400px]", src: "https://www.menucool.com/tooltip/cssttp/css-tooltip-image.jpg" }),
2729
- /* @__PURE__ */ jsx("h3", { class: "font-[22px] font-bold", children: "CSS Tooltip" }),
2783
+ /* @__PURE__ */ jsx("h3", { class: "text-[22px] font-bold", children: "CSS Tooltip" }),
2730
2784
  /* @__PURE__ */ jsx("p", { children: "The CSS tooltip appears when user moves the mouse over an element, or when user tap the element with a mobile device." })
2731
2785
  ] })
2732
2786
  ] }) }),
package/build/index.html CHANGED
@@ -10,7 +10,7 @@
10
10
  <link rel="stylesheet"
11
11
  href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.2/gh-fork-ribbon.min.css" />
12
12
  <script type="module" crossorigin src="/index.es.js"></script>
13
- <link rel="stylesheet" crossorigin href="/style.css">
13
+ <link rel="stylesheet" crossorigin href="/woby-tooltip.css">
14
14
  </head>
15
15
 
16
16
  <body>