@mshuja288/aksuicore 0.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 +46 -0
- package/PLAN.md +139 -0
- package/README.md +192 -0
- package/VERSIONING.md +33 -0
- package/dist/aksui.css +1633 -0
- package/dist/index.cjs +1145 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +182 -0
- package/dist/index.d.ts +182 -0
- package/dist/index.js +1127 -0
- package/dist/index.js.map +1 -0
- package/package.json +72 -0
- package/src/index.ts +5 -0
- package/src/patterns/AppShell.tsx +69 -0
- package/src/patterns/RecordWorkspace.tsx +567 -0
- package/src/patterns/index.ts +2 -0
- package/src/primitives/Button.tsx +29 -0
- package/src/primitives/DateField.tsx +255 -0
- package/src/primitives/Dialog.tsx +45 -0
- package/src/primitives/FormActions.tsx +36 -0
- package/src/primitives/Pagination.tsx +75 -0
- package/src/primitives/Select.tsx +195 -0
- package/src/primitives/SideNav.tsx +35 -0
- package/src/primitives/Snackbar.tsx +87 -0
- package/src/primitives/Topbar.tsx +89 -0
- package/src/primitives/index.ts +9 -0
- package/src/theme/aksui.css +70 -0
- package/src/theme/index.ts +3 -0
- package/src/theme/patterns.css +733 -0
- package/src/theme/primitives.css +732 -0
- package/src/theme/shell.css +92 -0
- package/src/theme/styles.css +4 -0
- package/src/theme/tokens.ts +22 -0
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
/* App shell — matches aksconfigurator_ui chrome */
|
|
2
|
+
|
|
3
|
+
.app-shell {
|
|
4
|
+
width: 100%;
|
|
5
|
+
min-height: 100dvh;
|
|
6
|
+
display: grid;
|
|
7
|
+
grid-template-rows: auto minmax(0, 1fr);
|
|
8
|
+
background: #f3f2ef;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.app-body {
|
|
12
|
+
display: grid;
|
|
13
|
+
grid-template-columns: 240px minmax(0, 1fr);
|
|
14
|
+
min-width: 0;
|
|
15
|
+
min-height: 0;
|
|
16
|
+
width: 100%;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.app-shell .screen {
|
|
20
|
+
display: flex;
|
|
21
|
+
flex-direction: column;
|
|
22
|
+
min-height: 0;
|
|
23
|
+
overflow: hidden;
|
|
24
|
+
padding: 12px;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.app-shell .screen > .list-workspace {
|
|
28
|
+
flex: 1 1 auto;
|
|
29
|
+
min-height: 0;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.bottom-nav {
|
|
33
|
+
display: none;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
@media (max-width: 900px) {
|
|
37
|
+
.app-body {
|
|
38
|
+
grid-template-columns: 1fr;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.app-shell .side-nav {
|
|
42
|
+
display: none;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.app-shell .screen {
|
|
46
|
+
padding: 10px 10px 88px;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.bottom-nav {
|
|
50
|
+
position: fixed;
|
|
51
|
+
left: 0;
|
|
52
|
+
right: 0;
|
|
53
|
+
bottom: 0;
|
|
54
|
+
z-index: 20;
|
|
55
|
+
display: grid;
|
|
56
|
+
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
|
|
57
|
+
gap: 6px;
|
|
58
|
+
padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
|
|
59
|
+
border-radius: 20px 20px 0 0;
|
|
60
|
+
background: var(--aks-brand);
|
|
61
|
+
box-shadow: 0 -8px 24px rgba(30, 39, 53, 0.18);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.bottom-nav button {
|
|
65
|
+
display: flex;
|
|
66
|
+
flex-direction: column;
|
|
67
|
+
align-items: center;
|
|
68
|
+
justify-content: center;
|
|
69
|
+
gap: 4px;
|
|
70
|
+
min-width: 0;
|
|
71
|
+
padding: 10px 4px;
|
|
72
|
+
background: transparent;
|
|
73
|
+
color: rgba(255, 255, 255, 0.72);
|
|
74
|
+
font-size: 10px;
|
|
75
|
+
line-height: 1.1;
|
|
76
|
+
white-space: nowrap;
|
|
77
|
+
box-shadow: none;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.bottom-nav button.active,
|
|
81
|
+
.bottom-nav button:hover {
|
|
82
|
+
transform: none;
|
|
83
|
+
background: var(--aks-accent);
|
|
84
|
+
color: #fff;
|
|
85
|
+
box-shadow: none;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.snackbar-host {
|
|
89
|
+
right: 16px;
|
|
90
|
+
bottom: calc(78px + env(safe-area-inset-bottom));
|
|
91
|
+
}
|
|
92
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/** Canonical theme token names mirrored from aksui.css */
|
|
2
|
+
export const aksuiTokens = {
|
|
3
|
+
brand: "#1E2735",
|
|
4
|
+
accent: "#E67E22",
|
|
5
|
+
ink: "#1E2735",
|
|
6
|
+
muted: "#667085",
|
|
7
|
+
line: "#e6e4df",
|
|
8
|
+
field: "#f6f5f3",
|
|
9
|
+
card: "#ffffff",
|
|
10
|
+
danger: "#b42318",
|
|
11
|
+
dangerBg: "#fff1f0",
|
|
12
|
+
ok: "#067647",
|
|
13
|
+
okBg: "#ecfdf3",
|
|
14
|
+
radius: "8px",
|
|
15
|
+
rowHeight: "34px",
|
|
16
|
+
tableHeaderHeight: "36px",
|
|
17
|
+
sideRailCollapsed: "52px",
|
|
18
|
+
sideRailExpanded: "280px",
|
|
19
|
+
previewPanelWidth: "300px",
|
|
20
|
+
} as const;
|
|
21
|
+
|
|
22
|
+
export type AksuiTokenName = keyof typeof aksuiTokens;
|