@studiocms/ui 1.0.0 → 1.1.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.
- package/dist/components/Alert/Alert.astro +47 -0
- package/dist/components/Alert/alert.css +59 -0
- package/dist/events.d.ts +14 -12
- package/dist/index.js +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
---
|
|
2
|
+
import './alert.css';
|
|
3
|
+
import type { AvailableIcons } from 'studiocms:ui/icons';
|
|
4
|
+
import type { HTMLAttributes } from 'astro/types';
|
|
5
|
+
import type { StudioCMSColorway } from 'src/utils/colors';
|
|
6
|
+
import Icon from '../Icon/Icon.astro';
|
|
7
|
+
|
|
8
|
+
interface Props extends HTMLAttributes<'div'> {
|
|
9
|
+
/**
|
|
10
|
+
* The title/heading text displayed in the alert header
|
|
11
|
+
*/
|
|
12
|
+
title: string;
|
|
13
|
+
/**
|
|
14
|
+
* The visual style variant of the alert. Each variant has a default icon.
|
|
15
|
+
* @default "default"
|
|
16
|
+
*/
|
|
17
|
+
variant?: StudioCMSColorway;
|
|
18
|
+
/**
|
|
19
|
+
* Custom icon to display. Overrides the default variant icon when provided
|
|
20
|
+
*/
|
|
21
|
+
icon?: AvailableIcons;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
const { title, variant = 'default', icon, class: className, ...props } = Astro.props;
|
|
25
|
+
|
|
26
|
+
const variantToIcon: Record<StudioCMSColorway, AvailableIcons> = {
|
|
27
|
+
default: 'heroicons:information-circle',
|
|
28
|
+
primary: 'heroicons:light-bulb',
|
|
29
|
+
success: 'heroicons:check-circle',
|
|
30
|
+
danger: 'heroicons:shield-exclamation',
|
|
31
|
+
info: 'heroicons:information-circle',
|
|
32
|
+
warning: 'heroicons:exclamation-triangle',
|
|
33
|
+
mono: 'heroicons:information-circle',
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
const iconName = icon || variantToIcon[variant];
|
|
37
|
+
---
|
|
38
|
+
|
|
39
|
+
<div class:list={["sui-alert", className]} data-variant={variant} {...props}>
|
|
40
|
+
<div class="sui-alert-header">
|
|
41
|
+
<Icon class="sui-alert-icon" width={24} height={24} name={iconName} />
|
|
42
|
+
<span class="sui-alert-title">{title}</span>
|
|
43
|
+
</div>
|
|
44
|
+
<div class="sui-alert-content">
|
|
45
|
+
<slot />
|
|
46
|
+
</div>
|
|
47
|
+
</div>
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
.sui-alert {
|
|
2
|
+
--alert-accent: var(--primary-base);
|
|
3
|
+
display: flex;
|
|
4
|
+
flex-direction: column;
|
|
5
|
+
gap: 0.75rem;
|
|
6
|
+
padding: 1rem 1.25rem;
|
|
7
|
+
border-left: 4px solid var(--alert-accent);
|
|
8
|
+
border-radius: var(--radius-sm) var(--radius-md) var(--radius-md) var(--radius-sm);
|
|
9
|
+
}
|
|
10
|
+
.sui-alert-header {
|
|
11
|
+
display: flex;
|
|
12
|
+
align-items: flex-start;
|
|
13
|
+
justify-content: flex-start;
|
|
14
|
+
gap: 0.5rem;
|
|
15
|
+
color: var(--text-normal);
|
|
16
|
+
}
|
|
17
|
+
.sui-alert-icon {
|
|
18
|
+
flex-shrink: 0;
|
|
19
|
+
color: var(--alert-accent);
|
|
20
|
+
}
|
|
21
|
+
.sui-alert-title {
|
|
22
|
+
font-weight: 600;
|
|
23
|
+
font-size: 1.125em;
|
|
24
|
+
}
|
|
25
|
+
.sui-alert[data-variant=default] {
|
|
26
|
+
--alert-accent: var(--text-normal);
|
|
27
|
+
color: var(--text-dimmed);
|
|
28
|
+
background-color: var(--default-base);
|
|
29
|
+
}
|
|
30
|
+
.sui-alert[data-variant=primary] {
|
|
31
|
+
--alert-accent: var(--primary-base);
|
|
32
|
+
color: var(--text-dimmed);
|
|
33
|
+
background-color: var(--primary-flat);
|
|
34
|
+
}
|
|
35
|
+
.sui-alert[data-variant=success] {
|
|
36
|
+
--alert-accent: var(--success-base);
|
|
37
|
+
color: var(--text-dimmed);
|
|
38
|
+
background-color: var(--success-flat);
|
|
39
|
+
}
|
|
40
|
+
.sui-alert[data-variant=warning] {
|
|
41
|
+
--alert-accent: var(--warning-base);
|
|
42
|
+
color: var(--text-dimmed);
|
|
43
|
+
background-color: var(--warning-flat);
|
|
44
|
+
}
|
|
45
|
+
.sui-alert[data-variant=danger] {
|
|
46
|
+
--alert-accent: var(--danger-vibrant);
|
|
47
|
+
color: var(--text-dimmed);
|
|
48
|
+
background-color: var(--danger-flat);
|
|
49
|
+
}
|
|
50
|
+
.sui-alert[data-variant=info] {
|
|
51
|
+
--alert-accent: var(--info-vibrant);
|
|
52
|
+
color: var(--text-dimmed);
|
|
53
|
+
background-color: var(--info-flat);
|
|
54
|
+
}
|
|
55
|
+
.sui-alert[data-variant=mono] {
|
|
56
|
+
--alert-accent: var(--mono-base);
|
|
57
|
+
color: var(--text-dimmed);
|
|
58
|
+
background-color: var(--mono-flat);
|
|
59
|
+
}
|
package/dist/events.d.ts
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
/** biome-ignore-all lint/correctness/noUnusedVariables: Global augments */
|
|
2
|
+
|
|
1
3
|
/**
|
|
2
4
|
* CustomEventMap defines the custom events used in the application.
|
|
3
5
|
*
|
|
@@ -39,6 +41,18 @@ interface SuiTooltipApi {
|
|
|
39
41
|
hide: (id: string) => void;
|
|
40
42
|
}
|
|
41
43
|
|
|
44
|
+
interface Window {
|
|
45
|
+
/**
|
|
46
|
+
* The StudioCMS UI API, which includes various tools and utilities for the UI.
|
|
47
|
+
*/
|
|
48
|
+
sui: {
|
|
49
|
+
/**
|
|
50
|
+
* The tooltip API, which provides methods for managing tooltips in the UI.
|
|
51
|
+
*/
|
|
52
|
+
tooltips: SuiTooltipApi;
|
|
53
|
+
};
|
|
54
|
+
}
|
|
55
|
+
|
|
42
56
|
/**
|
|
43
57
|
* Extends the global `Document` interface to include custom event handling methods.
|
|
44
58
|
*
|
|
@@ -89,16 +103,4 @@ declare global {
|
|
|
89
103
|
*/
|
|
90
104
|
dispatchEvent<K extends keyof CustomEventMap>(ev: CustomEventMap[K]): void;
|
|
91
105
|
}
|
|
92
|
-
|
|
93
|
-
interface Window {
|
|
94
|
-
/**
|
|
95
|
-
* The StudioCMS UI API, which includes various tools and utilities for the UI.
|
|
96
|
-
*/
|
|
97
|
-
sui: {
|
|
98
|
-
/**
|
|
99
|
-
* The tooltip API, which provides methods for managing tooltips in the UI.
|
|
100
|
-
*/
|
|
101
|
-
tooltips: SuiTooltipApi;
|
|
102
|
-
};
|
|
103
|
-
}
|
|
104
106
|
}
|
package/dist/index.js
CHANGED
|
@@ -53,6 +53,7 @@ function integration(options = {}) {
|
|
|
53
53
|
}
|
|
54
54
|
icons = createIconifyCollection(optIcons);
|
|
55
55
|
const componentMap = {
|
|
56
|
+
"studiocms:ui/components/alert": `export { default as Alert } from '${resolve("./components/Alert/Alert.astro")}';`,
|
|
56
57
|
"studiocms:ui/components/button": `export { default as Button } from '${resolve("./components/Button/Button.astro")}';`,
|
|
57
58
|
"studiocms:ui/components/divider": `export { default as Divider } from '${resolve("./components/Divider/Divider.astro")}';`,
|
|
58
59
|
"studiocms:ui/components/input": `export { default as Input } from '${resolve("./components/Input/Input.astro")}';`,
|