@softwareone/spi-sv5-library 0.1.3 → 1.0.0

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 (55) hide show
  1. package/dist/Avatar/Avatar.svelte +33 -0
  2. package/dist/Avatar/Avatar.svelte.d.ts +10 -0
  3. package/dist/Breadcrumbs/Breadcrumbs.svelte +10 -20
  4. package/dist/Button/Button.svelte +59 -119
  5. package/dist/Button/Button.svelte.d.ts +8 -6
  6. package/dist/Card/Card.svelte +18 -44
  7. package/dist/Card/Card.svelte.d.ts +1 -1
  8. package/dist/Chips/Chips.svelte +25 -28
  9. package/dist/Chips/Chips.svelte.d.ts +2 -1
  10. package/dist/Chips/chipsState.svelte.d.ts +7 -0
  11. package/dist/Chips/chipsState.svelte.js +8 -0
  12. package/dist/ErrorPage/ErrorPage.svelte +98 -0
  13. package/dist/ErrorPage/ErrorPage.svelte.d.ts +8 -0
  14. package/dist/Footer/Footer.svelte +29 -135
  15. package/dist/Footer/Footer.svelte.d.ts +1 -1
  16. package/dist/Form/Input/Input.svelte +398 -0
  17. package/dist/Form/Input/Input.svelte.d.ts +14 -0
  18. package/dist/Form/Input/InputIcon.svelte +97 -0
  19. package/dist/Form/Input/InputIcon.svelte.d.ts +9 -0
  20. package/dist/Form/TextArea/TextArea.svelte +258 -0
  21. package/dist/Form/TextArea/TextArea.svelte.d.ts +13 -0
  22. package/dist/Form/Toggle/Toggle.svelte +120 -0
  23. package/dist/{Toggle → Form/Toggle}/Toggle.svelte.d.ts +4 -3
  24. package/dist/Header/Header.svelte +55 -133
  25. package/dist/Header/Header.svelte.d.ts +2 -1
  26. package/dist/Header/HeaderAccount.svelte +6 -29
  27. package/dist/HighlightPanel/HighlightPanel.svelte +125 -0
  28. package/dist/HighlightPanel/HighlightPanel.svelte.d.ts +10 -0
  29. package/dist/HighlightPanel/highlightPanelState.svelte.d.ts +35 -0
  30. package/dist/HighlightPanel/highlightPanelState.svelte.js +13 -0
  31. package/dist/Menu/Menu.svelte +158 -0
  32. package/dist/Menu/Menu.svelte.d.ts +8 -0
  33. package/dist/Menu/MenuItem.svelte +153 -0
  34. package/dist/Menu/MenuItem.svelte.d.ts +11 -0
  35. package/dist/Menu/Sidebar.svelte +228 -0
  36. package/dist/Menu/Sidebar.svelte.d.ts +11 -0
  37. package/dist/Menu/SidebarState.svelte.d.ts +6 -0
  38. package/dist/Menu/SidebarState.svelte.js +1 -0
  39. package/dist/Modal/Modal.svelte +2 -3
  40. package/dist/Modal/ModalContent.svelte +11 -18
  41. package/dist/Modal/ModalFooter.svelte +10 -14
  42. package/dist/Modal/ModalHeader.svelte +7 -9
  43. package/dist/ProgressWizard/ProgressWizard.svelte +19 -34
  44. package/dist/Tabs/Tabs.svelte +111 -0
  45. package/dist/Tabs/Tabs.svelte.d.ts +8 -0
  46. package/dist/Tabs/tabsState.svelte.d.ts +7 -0
  47. package/dist/Tabs/tabsState.svelte.js +1 -0
  48. package/dist/Toast/Toast.svelte +7 -12
  49. package/dist/Tooltip/Tooltip.svelte +168 -0
  50. package/dist/Tooltip/Tooltip.svelte.d.ts +13 -0
  51. package/dist/assets/icons/feedback.svg +5 -0
  52. package/dist/index.d.ts +25 -8
  53. package/dist/index.js +23 -9
  54. package/package.json +2 -1
  55. package/dist/Toggle/Toggle.svelte +0 -170
package/dist/Toggle/Toggle.svelte DELETED
@@ -1,170 +0,0 @@
1
- <script lang="ts">
2
- import { Check, X } from 'lucide-svelte';
3
-
4
- interface ToggleProps {
5
- status?: 'on' | 'off';
6
- disabled?: boolean;
7
- onToggle?: () => void;
8
- }
9
-
10
- let { status, disabled, onToggle }: ToggleProps = $props();
11
-
12
- status = status || 'off';
13
- disabled = disabled || false;
14
-
15
- if (!onToggle) {
16
- onToggle = () => {
17
- if (status === 'on') {
18
- status = 'off';
19
- } else {
20
- status = 'on';
21
- }
22
- };
23
- }
24
-
25
- </script>
26
-
27
- {#if status === 'off'}
28
- {#if disabled}
29
- <div class="toggle-container">
30
- <button class="toggle-off-disabled">
31
- <div class="toggle-icon-off-disabled">
32
- <X size="14" />
33
- </div>
34
- </button>
35
- </div>
36
- {:else}
37
- <div class="toggle-container">
38
- <button class="toggle-off" onclick={onToggle}>
39
- <div class="toggle-icon-off">
40
- <X size="14" />
41
- </div>
42
- </button>
43
- </div>
44
- {/if}
45
- {:else}
46
- {#if disabled}
47
- <div class="toggle-container">
48
- <button class="toggle-on-disabled">
49
- <div class="toggle-icon-on-disabled">
50
- <Check size="14" />
51
- </div>
52
- </button>
53
- </div>
54
- {:else}
55
- <div class="toggle-container">
56
- <button class="toggle-on" onclick={onToggle}>
57
- <div class="toggle-icon-on">
58
- <Check size="14" />
59
- </div>
60
- </button>
61
- </div>
62
- {/if}
63
- {/if}
64
-
65
-
66
- <style>
67
- .toggle-container {
68
- display: inline-flex;
69
- align-items: flex-start;
70
- gap: 10px;
71
- }
72
- .toggle-container:hover .toggle-on {
73
- background: var(--brand-primary, #3520BF);
74
- border: 2px solid var(--brand-primary, #3520BF);
75
- color: var(--brand-primary, #3520BF);
76
- }
77
- .toggle-container:hover .toggle-off {
78
- border: 2px solid var(--brand-primary, #434952);
79
- }
80
- .toggle-container:hover .toggle-icon-off {
81
- border: 2px solid var(--brand-primary, #434952);
82
- background: var(--brand-white, #434952);
83
- }
84
- .toggle-on {
85
- display: flex;
86
- width: 40px;
87
- padding: 2px;
88
- justify-content: flex-end;
89
- align-items: center;
90
- gap: 10px;
91
- border-radius: 12px;
92
- border: 2px solid var(--brand-primary, #472aff);
93
- background: var(--brand-primary, #472aff);
94
- cursor: pointer;
95
- color: var(--brand-primary, #472aff);
96
- }
97
- .toggle-icon-on {
98
- display: flex;
99
- flex-direction: column;
100
- align-items: flex-start;
101
- gap: 10px;
102
- border-radius: var(--Card-radius, 16px);
103
- border: 2px solid var(--brand-primary, #fff);
104
- background: var(--brand-white, #fff);
105
- }
106
- .toggle-off {
107
- display: flex;
108
- width: 40px;
109
- padding: 2px;
110
- justify-content: flex-start;
111
- align-items: center;
112
- gap: 10px;
113
- border-radius: 12px;
114
- border: 2px solid var(--brand-primary, #6b7180);
115
- background: var(--brand-primary, #fff);
116
- color: var(--brand-primary, #fff);
117
- cursor: pointer;
118
- }
119
- .toggle-icon-off {
120
- display: flex;
121
- flex-direction: column;
122
- align-items: flex-start;
123
- gap: 10px;
124
- border-radius: var(--Card-radius, 16px);
125
- border: 2px solid var(--brand-primary, #6b7180);
126
- background: var(--brand-white, #6b7180);
127
- }
128
- .toggle-on-disabled {
129
- display: flex;
130
- width: 40px;
131
- padding: 2px;
132
- justify-content: flex-end;
133
- align-items: center;
134
- gap: 10px;
135
- border-radius: 12px;
136
- border: 2px solid var(--brand-primary, #6B7180);
137
- background: var(--brand-primary, #6B7180);
138
- }
139
- .toggle-icon-on-disabled {
140
- display: flex;
141
- flex-direction: column;
142
- align-items: flex-start;
143
- gap: 10px;
144
- border-radius: var(--Card-radius, 16px);
145
- border: 2px solid var(--brand-primary, #fff);
146
- background: var(--brand-white, #fff);
147
- color: var(--brand-primary, #6B7180);
148
- }
149
- .toggle-off-disabled {
150
- display: flex;
151
- width: 40px;
152
- padding: 2px;
153
- justify-content: flex-start;
154
- align-items: center;
155
- gap: 10px;
156
- border-radius: 12px;
157
- border: 2px solid var(--brand-primary, #6b7180);
158
- background: var(--brand-primary, #E0E5E8);
159
- }
160
- .toggle-icon-off-disabled {
161
- display: flex;
162
- flex-direction: column;
163
- align-items: flex-start;
164
- gap: 10px;
165
- border-radius: var(--Card-radius, 16px);
166
- border: 2px solid var(--brand-primary, #6b7180);
167
- background: var(--brand-white, #6b7180);
168
- color: var(--brand-primary, #fff);
169
- }
170
- </style>