@finsweet/webflow-apps-utils 1.0.44 → 1.0.46

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.
Files changed (7) hide show
  1. package/dist/ui/components/button-group/ButtonGroup.svelte +10 -11
  2. package/dist/ui/components/select/Select.svelte +6 -6
  3. package/dist/ui/components/tooltip/Tooltip.svelte +9 -1
  4. package/dist/ui/icons/SettingsIcon.svelte +6 -2
  5. package/dist/ui/icons/UpgradeIcon.svelte +4 -4
  6. package/dist/ui/index.css +3 -0
  7. package/package.json +1 -1
package/dist/ui/components/button-group/ButtonGroup.svelte CHANGED
@@ -52,19 +52,18 @@
52
52
  <style>
53
53
  .btn-group {
54
54
  display: flex;
55
- background: var(
56
- --background5,
57
- linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.1) 100%)
58
- );
59
- border-radius: var(--border-radius);
60
- box-shadow: var(--boxShadows-action-secondary);
55
+ background: var(--actionSecondaryBackground);
56
+ border-radius: 4px;
57
+ box-shadow:
58
+ 0 0.5px 1px 0 #000,
59
+ 0 0.5px 0.5px 0 rgba(255, 255, 255, 0.12) inset;
61
60
  }
62
61
 
63
62
  .btn {
64
63
  padding: 4px 8px;
65
64
  cursor: pointer;
66
65
  background: transparent;
67
- border-radius: var(--border-radius);
66
+ border-radius: 4px;
68
67
  margin: 2px 0px;
69
68
  color: var(--text1);
70
69
  }
@@ -76,14 +75,14 @@
76
75
 
77
76
  .btn-group .btn:first-of-type {
78
77
  margin-left: 2px;
79
- border-top-left-radius: var(--border-radius);
80
- border-bottom-left-radius: var(--border-radius);
78
+ border-top-left-radius: 4px;
79
+ border-bottom-left-radius: 4px;
81
80
  }
82
81
 
83
82
  .btn-group .btn:last-of-type {
84
83
  margin-right: 2px;
85
- border-top-right-radius: var(--border-radius);
86
- border-bottom-right-radius: var(--border-radius);
84
+ border-top-right-radius: 4px;
85
+ border-bottom-right-radius: 4px;
87
86
  }
88
87
 
89
88
  .btn.active {
package/dist/ui/components/select/Select.svelte CHANGED
@@ -95,7 +95,7 @@
95
95
  const dropdownStyles = $derived(() => {
96
96
  const base = {
97
97
  borderRadius: 'var(--border-radius, 4px)',
98
- background: 'var(--background5)',
98
+ background: 'var(--actionSecondaryBackground)',
99
99
  boxShadow: '0px 0.5px 1px 0px #000, 0px 0.5px 0.5px 0px rgba(255, 255, 255, 0.12) inset'
100
100
  };
101
101
 
@@ -123,7 +123,7 @@
123
123
  if (isHovered) {
124
124
  return {
125
125
  ...base,
126
- background: 'var(--background5)'
126
+ background: 'var(--actionSecondaryBackground)'
127
127
  };
128
128
  }
129
129
 
@@ -665,7 +665,7 @@
665
665
  }
666
666
 
667
667
  .dropdown-list :global(.dropdown-item.hover-state) {
668
- background: var(--background3);
668
+ background: var(--background5);
669
669
  }
670
670
 
671
671
  .dropdown-list {
@@ -677,8 +677,8 @@
677
677
  align-items: flex-start;
678
678
  gap: 4px;
679
679
  border-radius: 4px;
680
- border: 1px solid var(--border-border-1, #363636);
681
- background: var(--background2, #383838);
680
+ border: 1px solid var(--border1);
681
+ background: var(--background3);
682
682
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
683
683
 
684
684
  overflow-y: auto;
@@ -690,7 +690,7 @@
690
690
  align-items: center;
691
691
  gap: 4px;
692
692
  align-self: stretch;
693
- color: var(--text2, #bdbdbd);
693
+ color: var(--text2);
694
694
 
695
695
  font-size: 11px;
696
696
  font-style: normal;
package/dist/ui/components/tooltip/Tooltip.svelte CHANGED
@@ -276,8 +276,10 @@
276
276
 
277
277
  // Svelte 5 effect for hidden prop
278
278
  $effect(() => {
279
+ let timeoutId: ReturnType<typeof setTimeout> | undefined;
280
+
279
281
  if (hidden) {
280
- setTimeout(() => {
282
+ timeoutId = setTimeout(() => {
281
283
  tooltipInstance?.hideTooltip();
282
284
  const wrapper = document.querySelector<HTMLDivElement>('.finsweet-components');
283
285
  if (wrapper) {
@@ -286,6 +288,12 @@
286
288
  }
287
289
  }, 10);
288
290
  }
291
+
292
+ return () => {
293
+ if (timeoutId !== undefined) {
294
+ clearTimeout(timeoutId);
295
+ }
296
+ };
289
297
  });
290
298
 
291
299
  let isClickTarget = $state(listener === 'click' && listenerout === 'click');
package/dist/ui/icons/SettingsIcon.svelte CHANGED
@@ -1,8 +1,12 @@
1
- <svg width="100%" height="100%" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 11 11" fill="none">
2
+ <path
3
+ d="M4.92591 6C5.2941 6 5.59257 5.70152 5.59257 5.33333C5.59257 4.96514 5.2941 4.66667 4.92591 4.66667C4.55772 4.66667 4.25924 4.96514 4.25924 5.33333C4.25924 5.70152 4.55772 6 4.92591 6Z"
4
+ fill="currentColor"
5
+ />
2
6
  <path
3
7
  fill-rule="evenodd"
4
8
  clip-rule="evenodd"
5
- d="M1.30394 2.13401L3.95027 2.44964L5.00014 0L7.00011 0L8.04995 2.44964L10.6962 2.13404L11.6962 3.86607L10.0997 6.00003L11.6962 8.13397L10.6962 9.86602L8.04993 9.55043L7.00014 12L5.00014 12L3.95031 9.55044L1.30397 9.86608L0.303973 8.13403L1.90045 6.00004L0.303955 3.86604L1.30394 2.13401ZM4.86941 2.84356L5.65953 1H6.34071L7.13081 2.84356C7.30553 3.25125 7.72794 3.49513 8.16837 3.4426L10.1599 3.20509L10.5005 3.79501L9.29903 5.40098C9.03332 5.75615 9.03332 6.24391 9.29903 6.59907L10.5005 8.20503L10.1599 8.79497L8.16834 8.55747C7.72791 8.50494 7.3055 8.74883 7.13078 9.15652L6.34074 11L5.65953 11L4.86945 9.15651C4.69472 8.74882 4.27231 8.50495 3.83188 8.55748L1.8403 8.79502L1.49969 8.20508L2.70117 6.59907C2.96687 6.24391 2.96687 5.75616 2.70117 5.401L1.49968 3.79499L1.84027 3.20507L3.83184 3.4426C4.27228 3.49513 4.69468 3.25125 4.86941 2.84356ZM6.00003 7C6.55232 7 7.00003 6.55228 7.00003 6C7.00003 5.44772 6.55232 5 6.00003 5C5.44775 5 5.00003 5.44772 5.00003 6C5.00003 6.55228 5.44775 7 6.00003 7Z"
9
+ d="M4.49027 0C4.21237 0 3.96363 0.172382 3.86605 0.432584L3.16926 2.29068L1.21173 1.96507C0.937596 1.91947 0.663936 2.0487 0.524988 2.28937L0.0893211 3.04397C-0.0496271 3.28463 -0.0247135 3.58624 0.151841 3.80085L1.41262 5.33334L0.151869 6.8658C-0.0246854 7.08041 -0.049599 7.38202 0.0893492 7.62268L0.525016 8.37728C0.663964 8.61795 0.937625 8.74718 1.21175 8.70158L3.16926 8.37597L3.86605 10.2341C3.96363 10.4943 4.21237 10.6667 4.49027 10.6667H5.3616C5.6395 10.6667 5.88825 10.4943 5.98582 10.2341L6.68261 8.37598L8.64019 8.7016C8.91432 8.74719 9.18798 8.61796 9.32693 8.3773L9.76259 7.6227C9.90154 7.38204 9.87663 7.08042 9.70007 6.86582L8.43931 5.33334L9.7001 3.80083C9.87666 3.58623 9.90157 3.28461 9.76262 3.04395L9.32696 2.28935C9.18801 2.04869 8.91435 1.91946 8.64022 1.96505L6.68261 2.29068L5.98582 0.432584C5.88825 0.172382 5.6395 0 5.3616 0H4.49027ZM4.49027 0.666667H5.3616L6.05839 2.52476C6.17027 2.82312 6.47766 3.00059 6.792 2.94831L8.74961 2.62269L9.18527 3.37728L7.92448 4.90979C7.72203 5.15587 7.72203 5.51081 7.92448 5.75689L9.18524 7.28937L8.74958 8.04396L6.792 7.71835C6.47766 7.66606 6.17028 7.84353 6.05839 8.1419L5.3616 10H4.49027L3.79348 8.14189C3.68159 7.84353 3.3742 7.66606 3.05987 7.71834L1.10237 8.04395L0.6667 7.28935L1.92745 5.75689C2.12989 5.51081 2.12989 5.15587 1.92745 4.90979L0.666671 3.3773L1.10234 2.6227L3.05988 2.94831C3.37421 3.0006 3.6816 2.82313 3.79348 2.52476L4.49027 0.666667Z"
6
10
  fill="currentColor"
7
11
  />
8
12
  </svg>
package/dist/ui/icons/UpgradeIcon.svelte CHANGED
@@ -1,22 +1,22 @@
1
1
  <svg width="100%" height="100%" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
2
2
  <path
3
3
  d="M9.3125 2C8.82485 2 8.34781 2.04781 7.88599 2.13917L8.10432 3.24279C8.49462 3.16557 8.89855 3.125 9.3125 3.125C12.7298 3.125 15.5 5.89524 15.5 9.3125C15.5 12.7298 12.7298 15.5 9.3125 15.5C8.89855 15.5 8.49462 15.4594 8.10432 15.3822L7.88599 16.4858C8.34781 16.5772 8.82485 16.625 9.3125 16.625C13.3511 16.625 16.625 13.3511 16.625 9.3125C16.625 5.27392 13.3511 2 9.3125 2Z"
4
- fill="currentColor"
4
+ fill="#F5F5F5"
5
5
  fill-opacity="0.5"
6
6
  />
7
7
  <path
8
8
  d="M5.24916 3.23201C4.45197 3.76572 3.76572 4.45197 3.23201 5.24916L4.16685 5.87502C4.61875 5.20003 5.20003 4.61875 5.87502 4.16685L5.24916 3.23201Z"
9
- fill="currentColor"
9
+ fill="#F5F5F5"
10
10
  fill-opacity="0.5"
11
11
  />
12
12
  <path
13
13
  d="M2.13917 7.88599C2.04781 8.34781 2 8.82485 2 9.3125C2 9.80015 2.04781 10.2772 2.13917 10.739L3.24279 10.5207C3.16557 10.1304 3.125 9.72645 3.125 9.3125C3.125 8.89855 3.16557 8.49462 3.24279 8.10432L2.13917 7.88599Z"
14
- fill="currentColor"
14
+ fill="#F5F5F5"
15
15
  fill-opacity="0.5"
16
16
  />
17
17
  <path
18
18
  d="M3.23201 13.3758C3.76572 14.173 4.45197 14.8593 5.24916 15.393L5.87502 14.4581C5.20003 14.0062 4.61875 13.425 4.16685 12.75L3.23201 13.3758Z"
19
- fill="currentColor"
19
+ fill="#F5F5F5"
20
20
  fill-opacity="0.5"
21
21
  />
22
22
  <path
package/dist/ui/index.css CHANGED
@@ -13,6 +13,9 @@ body,
13
13
  --background3: #383838;
14
14
  --background4: #373737;
15
15
  --background5: #444444;
16
+ --actionSecondaryBackground:
17
+ linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.1) 100%),
18
+ rgba(255, 255, 255, 0.08);
16
19
  --backgroundInactive: #2e2e2e;
17
20
  --backgroundInverse: #ebebeb;
18
21
  --black: #000000;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@finsweet/webflow-apps-utils",
3
- "version": "1.0.44",
3
+ "version": "1.0.46",
4
4
  "description": "Shared utilities for Webflow apps",
5
5
  "homepage": "https://github.com/finsweet/webflow-apps-utils",
6
6
  "repository": {