@softwareone/spi-sv5-library 0.0.10 → 0.0.11

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/README.md +3 -2
  2. package/dist/Breadcrumbs/Breadcrumbs.svelte +1 -1
  3. package/dist/Chips/Chips.svelte +78 -0
  4. package/dist/Chips/Chips.svelte.d.ts +7 -0
  5. package/dist/index.d.ts +2 -1
  6. package/dist/index.js +2 -1
  7. package/package.json +3 -2
package/README.md CHANGED
@@ -30,7 +30,7 @@ npm install @softwareone/swo-spi-svelte5-library
30
30
  Import the components you need into your Svelte application:
31
31
 
32
32
  ```javascript
33
- import { Button, Modal, Spinner, Toaster, addToast, type Toast, Toggle, Header } from '@softwareone/swo-spi-svelte5-library';
33
+ import { Button, Modal, Spinner, Toaster, addToast, type Toast, Toggle, Header, Chips} from '@softwareone/swo-spi-svelte5-library';
34
34
  ```
35
35
 
36
36
  # List of components
@@ -40,4 +40,5 @@ import { Button, Modal, Spinner, Toaster, addToast, type Toast, Toggle, Header }
40
40
  - Toaster
41
41
  - Toggle
42
42
  - Header (including a loader)
43
- - Breadcrumbs
43
+ - Breadcrumbs
44
+ - Chips
package/dist/Breadcrumbs/Breadcrumbs.svelte CHANGED
@@ -36,7 +36,7 @@
36
36
  display: inline-flex;
37
37
  align-items: flex-end;
38
38
  gap: 9px;
39
- padding: 0;
39
+ padding: 8px 16px;
40
40
  color: var(--brand-primary, #472aff);
41
41
  /* regular/2 */
42
42
  font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
package/dist/Chips/Chips.svelte ADDED
@@ -0,0 +1,78 @@
1
+ <script lang="ts">
2
+ interface ChipsProps {
3
+ type?: 'info' | 'success' | 'warning' | 'error' | 'neutral';
4
+ text?: string;
5
+ }
6
+
7
+ let { type, text }: ChipsProps = $props();
8
+
9
+ type = type || 'info';
10
+ text = text || type.charAt(0).toUpperCase() + type.slice(1); // Default to capitalized type
11
+
12
+ let className = `chip chip-${type}`;
13
+ </script>
14
+
15
+ <div class={className}>
16
+ {text}
17
+ </div>
18
+
19
+ <style>
20
+ /* Base chip styles */
21
+ .chip {
22
+ display: inline-flex;
23
+ padding: 2px 8px;
24
+ align-items: center;
25
+ gap: 8px;
26
+ border-radius: 4px;
27
+ font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
28
+ font-size: 14px;
29
+ font-style: normal;
30
+ font-weight: 400;
31
+ line-height: 20px; /* 142.857% */
32
+
33
+ /* Default colors (can be overridden by specific types) */
34
+ background: var(--chip-bg, #eaecff);
35
+ color: var(--chip-text, #3520bf);
36
+ }
37
+
38
+ .chip:hover {
39
+ background: var(--chip-hover, #959bff);
40
+ }
41
+
42
+ .chip:focus {
43
+ background: var(--chip-hover, #959bff);
44
+ box-shadow: 0px 0px 0px 3px var(--chip-hover, #959bff);
45
+ }
46
+
47
+ /* Type-specific styles using CSS variables */
48
+ .chip-info {
49
+ --chip-bg: var(--alerts-info-1, #eaecff);
50
+ --chip-text: var(--alerts-info-3, #3520bf);
51
+ --chip-hover: var(--alerts-info-2, #959bff);
52
+ }
53
+
54
+ .chip-success {
55
+ --chip-bg: var(--alerts-success-1, #E6F9F2);
56
+ --chip-text: var(--alerts-success-3, #00784D);
57
+ --chip-hover: var(--alerts-success-2, #80E1AE);
58
+ }
59
+
60
+ .chip-warning {
61
+ --chip-bg: var(--alerts-warning-1, #FDF2E9);
62
+ --chip-text: var(--alerts-warning-3, #A15D26);
63
+ --chip-hover: var(--alerts-warning-2, #F1B178);
64
+ }
65
+
66
+ .chip-error {
67
+ --chip-bg: var(--alerts-error-1, #FCE8EA);
68
+ --chip-text: var(--alerts-error-3, #BB1425);
69
+ --chip-hover: var(--alerts-error-2, #EE8C96);
70
+ }
71
+
72
+ .chip-neutral {
73
+ --chip-bg: var(--alerts-neutral-1, #F4F6F8);
74
+ --chip-text: var(--alerts-neutral-3, #434952);
75
+ --chip-hover: var(--alerts-neutral-2, #E0E5E8);
76
+ }
77
+ </style>
78
+
package/dist/Chips/Chips.svelte.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ interface ChipsProps {
2
+ type?: 'info' | 'success' | 'warning' | 'error' | 'neutral';
3
+ text?: string;
4
+ }
5
+ declare const Chips: import("svelte").Component<ChipsProps, {}, "">;
6
+ type Chips = ReturnType<typeof Chips>;
7
+ export default Chips;
package/dist/index.d.ts CHANGED
@@ -7,4 +7,5 @@ import Toggle from './Toggle/Toggle.svelte';
7
7
  import Header from './Header/Header.svelte';
8
8
  import Breadcrumbs from './Breadcrumbs/Breadcrumbs.svelte';
9
9
  import { addBreadcrumbsNameMap, type BreadcrumbsNameMap } from './Breadcrumbs/breadcrumbsState.svelte.js';
10
- export { Button, Modal, Spinner, Toaster, addToast, type Toast, Toggle, Header, Breadcrumbs, addBreadcrumbsNameMap, type BreadcrumbsNameMap };
10
+ import Chips from './Chips/Chips.svelte';
11
+ export { Button, Modal, Spinner, Toaster, addToast, type Toast, Toggle, Header, Breadcrumbs, addBreadcrumbsNameMap, type BreadcrumbsNameMap, Chips };
package/dist/index.js CHANGED
@@ -8,4 +8,5 @@ import Toggle from './Toggle/Toggle.svelte';
8
8
  import Header from './Header/Header.svelte';
9
9
  import Breadcrumbs from './Breadcrumbs/Breadcrumbs.svelte';
10
10
  import { addBreadcrumbsNameMap } from './Breadcrumbs/breadcrumbsState.svelte.js';
11
- export { Button, Modal, Spinner, Toaster, addToast, Toggle, Header, Breadcrumbs, addBreadcrumbsNameMap };
11
+ import Chips from './Chips/Chips.svelte';
12
+ export { Button, Modal, Spinner, Toaster, addToast, Toggle, Header, Breadcrumbs, addBreadcrumbsNameMap, Chips };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@softwareone/spi-sv5-library",
3
- "version": "0.0.10",
3
+ "version": "0.0.11",
4
4
  "description": "Svelte components",
5
5
  "keywords": [
6
6
  "svelte",
@@ -58,6 +58,7 @@
58
58
  "vite": "^6.0.0"
59
59
  },
60
60
  "dependencies": {
61
- "lucide-svelte": "^0.475.0"
61
+ "lucide-svelte": "^0.475.0",
62
+ "@sveltejs/kit": "^2.16.0"
62
63
  }
63
64
  }