@snokam/ui 2.1.0 → 2.2.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/CHANGELOG.md +6 -0
- package/dist/components/system-page/index.d.ts.map +1 -1
- package/dist/components/system-page/index.js +2 -2
- package/dist/components/system-page/index.js.map +1 -1
- package/dist/components/system-page/styled.d.ts +4 -0
- package/dist/components/system-page/styled.d.ts.map +1 -1
- package/dist/components/system-page/styled.js +14 -4
- package/dist/components/system-page/styled.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,12 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [2.2.0](https://github.com/snokam/components/compare/@snokam/ui@2.1.0...@snokam/ui@2.2.0) (2026-10-04)
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
- **ui:** solid footer with a wave on system pages; Snøsky wordmark ([#2584](https://github.com/snokam/components/issues/2584)) ([5da5509](https://github.com/snokam/components/commit/5da55096e5aaa5804110c49d9b7212bd6c7bc0a1))
|
|
11
|
+
|
|
6
12
|
# [2.1.0](https://github.com/snokam/components/compare/@snokam/ui@2.0.3...@snokam/ui@2.1.0) (2026-10-03)
|
|
7
13
|
|
|
8
14
|
### Features
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/system-page/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKlC,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA2BD,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,MAAM,EACN,QAAQ,EACR,GAAG,OAAO,EACX,EAAE,eAAe,+
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/system-page/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKlC,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA2BD,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,MAAM,EACN,QAAQ,EACR,GAAG,OAAO,EACX,EAAE,eAAe,+BA0BjB;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;CAK5B,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import {
|
|
3
|
+
import Layout, { AnimationType, LayoutTheme, TransitionType } from "../layout";
|
|
4
4
|
import { ThemeScope } from "../../theme/theme-scope";
|
|
5
5
|
import * as Styled from "./styled";
|
|
6
6
|
function SystemPageMessage({ code, icon, title, detail, message, actions, }) {
|
|
7
7
|
return (_jsxs(Styled.Content, { children: [icon && _jsx(Styled.IconBadge, { children: icon }), code && _jsx(Styled.Code, { "aria-hidden": true, children: code }), title && _jsx(Styled.Title, { children: title }), detail && _jsx(Styled.Detail, { children: detail }), message && _jsx(Styled.Message, { children: message }), actions && _jsx(Styled.Actions, { children: actions })] }));
|
|
8
8
|
}
|
|
9
9
|
export function SystemPage({ header, footer, children, ...message }) {
|
|
10
|
-
return (_jsxs(Styled.Shell, { children: [_jsx(
|
|
10
|
+
return (_jsxs(Styled.Shell, { children: [_jsx(Layout.Container, { theme: LayoutTheme.Dark, animation: { type: AnimationType.Blobs }, transitions: footer ? { bottom: { type: TransitionType.Wave } } : undefined, children: _jsxs(Styled.Backdrop, { children: [header, _jsx(ThemeScope, { theme: "dark", as: Styled.Band, children: children ? (_jsx(Styled.Stage, { children: children })) : (_jsx(SystemPageMessage, { ...message })) })] }) }), footer] }));
|
|
11
11
|
}
|
|
12
12
|
export const SystemPageAction = {
|
|
13
13
|
Primary: Styled.PrimaryLink,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/system-page/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,aAAa,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/system-page/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,MAAM,EAAE,EAAE,aAAa,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAC/E,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AAmBnC,SAAS,iBAAiB,CAAC,EACzB,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,MAAM,EACN,OAAO,EACP,OAAO,GACgB;IACvB,OAAO,CACL,MAAC,MAAM,CAAC,OAAO,eACZ,IAAI,IAAI,KAAC,MAAM,CAAC,SAAS,cAAE,IAAI,GAAoB,EACnD,IAAI,IAAI,KAAC,MAAM,CAAC,IAAI,mCAAc,IAAI,GAAe,EACrD,KAAK,IAAI,KAAC,MAAM,CAAC,KAAK,cAAE,KAAK,GAAgB,EAC7C,MAAM,IAAI,KAAC,MAAM,CAAC,MAAM,cAAE,MAAM,GAAiB,EACjD,OAAO,IAAI,KAAC,MAAM,CAAC,OAAO,cAAE,OAAO,GAAkB,EACrD,OAAO,IAAI,KAAC,MAAM,CAAC,OAAO,cAAE,OAAO,GAAkB,IACvC,CAClB,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,UAAU,CAAC,EACzB,MAAM,EACN,MAAM,EACN,QAAQ,EACR,GAAG,OAAO,EACM;IAChB,OAAO,CACL,MAAC,MAAM,CAAC,KAAK,eACX,KAAC,MAAM,CAAC,SAAS,IACf,KAAK,EAAE,WAAW,CAAC,IAAI,EACvB,SAAS,EAAE,EAAE,IAAI,EAAE,aAAa,CAAC,KAAK,EAAE,EACxC,WAAW,EACT,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,cAAc,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,YAGhE,MAAC,MAAM,CAAC,QAAQ,eACb,MAAM,EAEP,KAAC,UAAU,IAAC,KAAK,EAAC,MAAM,EAAC,EAAE,EAAE,MAAM,CAAC,IAAI,YACrC,QAAQ,CAAC,CAAC,CAAC,CACV,KAAC,MAAM,CAAC,KAAK,cAAE,QAAQ,GAAgB,CACxC,CAAC,CAAC,CAAC,CACF,KAAC,iBAAiB,OAAK,OAAO,GAAI,CACnC,GACU,IACG,GACD,EAElB,MAAM,IACM,CAChB,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,OAAO,EAAE,MAAM,CAAC,WAAW;IAC3B,aAAa,EAAE,MAAM,CAAC,aAAa;IACnC,KAAK,EAAE,MAAM,CAAC,WAAW;IACzB,SAAS,EAAE,MAAM,CAAC,SAAS;CAC5B,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -2,6 +2,10 @@ export declare const Shell: import("@emotion/styled").StyledComponent<{
|
|
|
2
2
|
theme?: import("@emotion/react").Theme;
|
|
3
3
|
as?: React.ElementType;
|
|
4
4
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
5
|
+
export declare const Backdrop: import("@emotion/styled").StyledComponent<{
|
|
6
|
+
theme?: import("@emotion/react").Theme;
|
|
7
|
+
as?: React.ElementType;
|
|
8
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
5
9
|
export declare const Band: import("@emotion/styled").StyledComponent<{
|
|
6
10
|
theme?: import("@emotion/react").Theme;
|
|
7
11
|
as?: React.ElementType;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../../src/components/system-page/styled.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,KAAK;;;
|
|
1
|
+
{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../../src/components/system-page/styled.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,KAAK;;;yGAqBjB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;yGAYpB,CAAC;AAEF,eAAO,MAAM,IAAI;;;mGAShB,CAAC;AAEF,eAAO,MAAM,OAAO;;;yGAYnB,CAAC;AAEF,eAAO,MAAM,KAAK;;;yGAWjB,CAAC;AAEF,eAAO,MAAM,SAAS;;;yGAgBrB,CAAC;AAEF,eAAO,MAAM,IAAI;;;qHAQhB,CAAC;AAEF,eAAO,MAAM,KAAK;;;iHAKjB,CAAC;AAEF,eAAO,MAAM,MAAM;;;mGAUlB,CAAC;AAEF,eAAO,MAAM,OAAO;;;qHAKnB,CAAC;AAEF,eAAO,MAAM,OAAO;;;yGAMnB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;UAmBvB,CAAC;AAwBF,eAAO,MAAM,WAAW;;;qHAEvB,CAAC;AAEF,eAAO,MAAM,SAAS;;;qHAKrB,CAAC;AAEF,eAAO,MAAM,aAAa;;;qHAoBzB,CAAC"}
|
|
@@ -9,11 +9,8 @@ const rise = keyframes `
|
|
|
9
9
|
export const Shell = styled.div `
|
|
10
10
|
position: relative;
|
|
11
11
|
|
|
12
|
-
/* The blob field is the page background: the chrome sits on it, not on its own fill. */
|
|
13
|
-
> header,
|
|
14
12
|
> footer {
|
|
15
13
|
flex: none;
|
|
16
|
-
background-color: transparent;
|
|
17
14
|
}
|
|
18
15
|
|
|
19
16
|
@media (prefers-reduced-motion: reduce) {
|
|
@@ -31,6 +28,19 @@ export const Shell = styled.div `
|
|
|
31
28
|
background: var(--color-primary, #071d41);
|
|
32
29
|
color: var(--color-light-blue, #e1f8ff);
|
|
33
30
|
`;
|
|
31
|
+
export const Backdrop = styled.div `
|
|
32
|
+
position: relative;
|
|
33
|
+
z-index: 1;
|
|
34
|
+
flex: 1;
|
|
35
|
+
width: 100%;
|
|
36
|
+
display: flex;
|
|
37
|
+
flex-direction: column;
|
|
38
|
+
|
|
39
|
+
> header {
|
|
40
|
+
flex: none;
|
|
41
|
+
background-color: transparent;
|
|
42
|
+
}
|
|
43
|
+
`;
|
|
34
44
|
export const Band = styled.main `
|
|
35
45
|
position: relative;
|
|
36
46
|
z-index: 1;
|
|
@@ -38,7 +48,7 @@ export const Band = styled.main `
|
|
|
38
48
|
display: flex;
|
|
39
49
|
align-items: center;
|
|
40
50
|
justify-content: center;
|
|
41
|
-
padding: 3rem 1.5rem 4rem;
|
|
51
|
+
padding: 3rem 1.5rem calc(4rem + 100px);
|
|
42
52
|
color: var(--color-light-blue, #e1f8ff);
|
|
43
53
|
`;
|
|
44
54
|
export const Content = styled.div `
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styled.js","sourceRoot":"","sources":["../../../src/components/system-page/styled.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,IAAI,MAAM,WAAW,CAAC;AAE7B,MAAM,IAAI,GAAG,SAAS,CAAA;;;CAGrB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"styled.js","sourceRoot":"","sources":["../../../src/components/system-page/styled.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,IAAI,MAAM,WAAW,CAAC;AAE7B,MAAM,IAAI,GAAG,SAAS,CAAA;;;CAGrB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;CAqB9B,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;CAYjC,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;;;;;CAS9B,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;eAOlB,IAAI;;;;;CAKlB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;eAMhB,IAAI;;;;;CAKlB,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;CAgBlC,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC,CAAC,CAAA;;;;;;;;CAQ3B,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;CAK7B,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;;;;;;CAUhC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC,CAAA;;;;;CAK9B,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMhC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;;;;;;;;;;;;;;;CAmBtC,CAAC;AAEF,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;CAoBhB,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAA;IACpC,KAAK;CACR,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,CAAC,CAAA;IAC7B,KAAK;;;;CAIR,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;;;;;;;;;;;;;;CAoBzC,CAAC"}
|
package/package.json
CHANGED