Skip to content

Commit c89b9dd

Browse files
koculukoculu
committed
Improve page search component and alertbox.
1 parent 894b79e commit c89b9dd

36 files changed

Lines changed: 577 additions & 90 deletions

File tree

‎frontend/purestack.studio/components/actions/alert-box/alert-box.mdx‎

Lines changed: 69 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -27,31 +27,45 @@ nav:
2727
>
2828
<div class="component-recipe">
2929
<AlertBox
30-
tone="info"
30+
tone="success"
3131
variant="spotlight"
3232
eyebrow="DESIGN SYSTEM"
3333
title="Make feedback useful"
3434
badge="Tip"
3535
icon="lucide:check"
3636
meta="Semantic tones adapt to light and dark themes."
37-
><p>
37+
><p class="m-0">
3838
Explain what happened, why it matters, and what the reader can do next.
3939
</p>
4040
<template #actions
4141
><BtnLink
42+
class="max-w-full ws-normal"
4243
href="/guides/styling/semantic-tones/"
43-
tone="info"
44-
variant="outline"
44+
tone="success"
45+
variant="outlineFill"
4546
>Explore semantic tones</BtnLink></template></AlertBox>
4647
</div>
4748
</ComponentExample>
4849

4950
```html
50-
<AlertBox tone="info" variant="spotlight" eyebrow="DESIGN SYSTEM" title="Make feedback useful" badge="Tip" icon="lucide:check" meta="Semantic tones adapt to light and dark themes.">
51-
<p>Explain what happened, why it matters, and what the reader can do next.</p>
52-
<template #actions>
53-
<BtnLink href="/guides/styling/semantic-tones/" tone="info" variant="outline">Explore semantic tones</BtnLink>
54-
</template>
51+
<AlertBox
52+
tone="success"
53+
variant="spotlight"
54+
eyebrow="DESIGN SYSTEM"
55+
title="Make feedback useful"
56+
badge="Tip"
57+
icon="lucide:check"
58+
meta="Semantic tones adapt to light and dark themes."
59+
><p class="m-0">
60+
Explain what happened, why it matters, and what the reader can do next.
61+
</p>
62+
<template #actions
63+
><BtnLink
64+
class="max-w-full ws-normal"
65+
href="/guides/styling/semantic-tones/"
66+
tone="success"
67+
variant="outlineFill"
68+
>Explore semantic tones</BtnLink></template>
5569
</AlertBox>
5670
```
5771

@@ -70,19 +84,21 @@ Make the next step part of the message. The actions slot keeps it alongside the
7084
<TabPane id="alert-box-sample-1-preview" label="Preview">
7185
<div class="component-preview-stage">
7286
<AlertBox
73-
tone="info"
87+
tone="danger"
7488
title="A shared design language"
7589
eyebrow="COMPONENT GUIDANCE"
7690
badge="Tip"
7791
icon="lucide:check"
7892
meta="Applies to both light and dark themes."
7993
>
80-
<p>Use semantic tones to communicate intent across your interface.</p>
94+
<p class="m-0">
95+
Use semantic tones to communicate intent across your interface.
96+
</p>
8197
<template #actions>
8298
<BtnLink
99+
class="max-w-full ws-normal"
83100
href="/components/layout/panel/"
84-
tone="info"
85-
variant="outline"
101+
variant="outlineFill"
86102
>
87103
Explore surfaces
88104
</BtnLink>
@@ -93,19 +109,25 @@ Make the next step part of the message. The actions slot keeps it alongside the
93109
<TabPane id="alert-box-sample-1-source-0" label="actionable-notice.mdx">
94110
```html
95111
<AlertBox
96-
tone="info"
97-
title="A shared design language"
98-
eyebrow="COMPONENT GUIDANCE"
99-
badge="Tip"
100-
icon="lucide:check"
101-
meta="Applies to both light and dark themes."
102-
>
103-
<p>Use semantic tones to communicate intent across your interface.</p>
104-
<template #actions>
105-
<BtnLink href="/components/layout/panel/" tone="info" variant="outline">
106-
Explore surfaces
107-
</BtnLink>
108-
</template>
112+
tone="danger"
113+
title="A shared design language"
114+
eyebrow="COMPONENT GUIDANCE"
115+
badge="Tip"
116+
icon="lucide:check"
117+
meta="Applies to both light and dark themes."
118+
>
119+
<p class="m-0">
120+
Use semantic tones to communicate intent across your interface.
121+
</p>
122+
<template #actions>
123+
<BtnLink
124+
class="max-w-full ws-normal"
125+
href="/components/layout/panel/"
126+
variant="outlineFill"
127+
>
128+
Explore surfaces
129+
</BtnLink>
130+
</template>
109131
</AlertBox>
110132
```
111133
</TabPane>
@@ -126,13 +148,26 @@ Keep the message explicit so color is never the only signal.
126148
<TabPane id="alert-box-sample-2-preview" label="Preview">
127149
<div class="component-preview-stage">
128150
<Flex direction="column">
129-
<AlertBox tone="success" title="All checks passed">
151+
<AlertBox
152+
tone="success"
153+
title="All checks passed"
154+
icon="tabler:circle-check"
155+
>
130156
The preview is ready for review.
131157
</AlertBox>
132-
<AlertBox tone="warning" title="Review required">
158+
<AlertBox
159+
tone="warning"
160+
title="Review required"
161+
icon="tabler:alert-triangle"
162+
>
133163
Check the content before publishing.
134164
</AlertBox>
135-
<AlertBox tone="danger" title="Build failed" variant="outline">
165+
<AlertBox
166+
tone="danger"
167+
title="Build failed"
168+
variant="outline"
169+
icon="tabler:alert-circle"
170+
>
136171
Correct the source error and build again.
137172
</AlertBox>
138173
</Flex>
@@ -141,13 +176,13 @@ Keep the message explicit so color is never the only signal.
141176
<TabPane id="alert-box-sample-2-source-0" label="message-tones.mdx">
142177
```html
143178
<Flex direction="column">
144-
<AlertBox tone="success" title="All checks passed">
179+
<AlertBox tone="success" title="All checks passed" icon="tabler:circle-check">
145180
The preview is ready for review.
146181
</AlertBox>
147-
<AlertBox tone="warning" title="Review required">
182+
<AlertBox tone="warning" title="Review required" icon="tabler:alert-triangle">
148183
Check the content before publishing.
149184
</AlertBox>
150-
<AlertBox tone="danger" title="Build failed" variant="outline">
185+
<AlertBox tone="danger" title="Build failed" variant="outline" icon="tabler:alert-circle">
151186
Correct the source error and build again.
152187
</AlertBox>
153188
</Flex>
@@ -323,6 +358,8 @@ Stateless is the default. Stateful enables hover, focus, and active styling; it
323358

324359
## Behavior and accessibility
325360

361+
The eyebrow sits above the title, the badge stays beside the title, and metadata follows the actions. Empty actions take no space. The optional icon uses a solid frame in the selected tone; variant controls the surrounding Panel. This layout uses existing spacing, typography, wrapping, and visibility utilities.
362+
326363
AlertBox is a visual content component and does not automatically announce messages. For newly inserted urgent messages use an appropriate live region; for routine form feedback use FormStatus. Static notices should not interrupt screen-reader users.
327364

328365
## API reference

‎frontend/purestack.studio/footer.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
</div>
77
<nav aria-label="Footer resources">
88
<div>
9-
<span class="footer-label">EXPLORE</span><a href="/#framework">The framework</a><a href="/#ecosystem">The ecosystem</a><a href="/#getting-started">Get started</a><a href="https://regor.purestack.studio" target="_blank" rel="noopener"
9+
<span class="footer-label">EXPLORE</span><a href="/guides/">Guides</a><a href="/components/">Components</a><a href="/#getting-started">Get started</a><a href="https://regor.purestack.studio" target="_blank" rel="noopener"
1010
>Regor ↗</a>
1111
</div>
1212
<div>

‎frontend/purestack.studio/header.mdx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,10 @@
44
<nav class="desktop-nav" aria-label="Main navigation">
55
<a href="/#framework">Framework</a>
66
<a href="/#ecosystem">Ecosystem</a>
7-
<a href="/guides/">Guides</a>
8-
<a href="/components/">Components</a>
7+
<a class="header-docs" href="/guides/"
8+
><Icon class="header-docs-icon" name="tabler:book"/>Guides</a>
9+
<a class="header-docs" href="/components/"
10+
><Icon class="header-docs-icon" name="tabler:components"/>Components</a>
911
<a href="/#getting-started">Get started</a>
1012
</nav>
1113
<div class="header-actions">
@@ -50,6 +52,11 @@
5052
<a href="/guides/">Guides</a>
5153
<a href="/components/">Components</a>
5254
<a href="/#getting-started">Get started</a>
55+
<a
56+
href="https://regor.purestack.studio"
57+
target="_blank"
58+
rel="noopener"
59+
>Regor ↗</a>
5360
<a
5461
href="https://github.com/PureStackStudio/PureStack"
5562
target="_blank"

‎frontend/styles/landing/navigation.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,4 +51,5 @@ export function registerNavigationStyles(root: Style, palette: ThemePalette) {
5151
.marginLeft('3px')
5252
root.select('.landing-page .header-source .icon').width('17px').height('17px')
5353
root.select('.landing-page .mobile-menu').display('none')
54+
root.select('.landing-page .desktop-nav .header-docs-icon').display('none')
5455
}

‎frontend/styles/landing/responsive.ts‎

Lines changed: 60 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -83,8 +83,8 @@ function registerBelowMediumStyles(root: Style, palette: ThemePalette) {
8383
root
8484
.media(mediaBelow(BREAKPOINTS.md))
8585
.select('.landing-page .header-inner')
86-
.height('68px')
87-
.gap('20px')
86+
.gridTemplateRows('68px auto')
87+
.columnGap('0.5rem')
8888
root
8989
.media(mediaBelow(BREAKPOINTS.md))
9090
.select('.landing-page .hero h1')
@@ -215,21 +215,72 @@ function registerMobileFrameStyles(root: Style) {
215215
root
216216
.media(mediaBelow(BREAKPOINTS.sm))
217217
.select('.landing-page .header-inner')
218-
.height('65px')
219-
.gap('20px')
218+
.gridTemplateRows('65px auto')
219+
.columnGap('0.5rem')
220220
}
221221

222222
function registerCompactNavigationStyles(root: Style, palette: ThemePalette) {
223223
const tone = palette.semanticTone
224224

225+
root
226+
.media(mediaBelow(BREAKPOINTS.lg))
227+
.select('.landing-page .header-inner')
228+
.display('grid')
229+
.gridTemplateColumns('minmax(0, 1fr) auto')
230+
.gridTemplateRows('78px auto')
231+
.height('auto')
232+
.gap('0 0.75rem')
225233
root
226234
.media(mediaBelow(BREAKPOINTS.lg))
227235
.select('.landing-page .desktop-nav')
236+
.display('flex')
237+
.gridColumn('1 / -1')
238+
.gridRow('2')
239+
.width('100%')
240+
.margin('0')
241+
.padding('0')
242+
.gap('0')
243+
.borderTop(`1px solid ${tone.neutral.border.subtle}`)
244+
root
245+
.media(mediaBelow(BREAKPOINTS.lg))
246+
.select('.landing-page .desktop-nav a:not(.header-docs)')
228247
.display('none')
248+
root
249+
.media(mediaBelow(BREAKPOINTS.lg))
250+
.select('.landing-page .desktop-nav .header-docs')
251+
.display('flex')
252+
.alignItems('center')
253+
.justifyContent('center')
254+
.flex('1 1 0')
255+
.gap('0.5rem')
256+
.minHeight('44px')
257+
.padding('0.5rem 0.75rem')
258+
.fontWeight('600')
259+
.color(tone.accent.text.default)
260+
root
261+
.media(mediaBelow(BREAKPOINTS.lg))
262+
.select('.landing-page .desktop-nav .header-docs + .header-docs')
263+
.borderInlineStart(`1px solid ${tone.neutral.border.subtle}`)
264+
root
265+
.media(mediaBelow(BREAKPOINTS.lg))
266+
.select('.landing-page .desktop-nav .header-docs-icon')
267+
.display('inline-flex')
268+
.width('16px')
269+
.height('16px')
229270
root
230271
.media(mediaBelow(BREAKPOINTS.lg))
231272
.select('.landing-page .header-actions')
273+
.gridColumn('2')
274+
.gridRow('1')
232275
.marginLeft('auto')
276+
root
277+
.media(mediaBelow(BREAKPOINTS.lg))
278+
.select(':scope:has(> body.landing-page)')
279+
.scrollPaddingTop('140px')
280+
root
281+
.media(mediaBelow(BREAKPOINTS.sm))
282+
.select('.landing-page .header-actions .topbar__actions > a')
283+
.display('none')
233284
root
234285
.media(mediaBelow(BREAKPOINTS.sm))
235286
.select('.landing-page .header-source > span')
@@ -249,8 +300,8 @@ function registerCompactNavigationStyles(root: Style, palette: ThemePalette) {
249300
.display('flex')
250301
.alignItems('center')
251302
.justifyContent('center')
252-
.width('34px')
253-
.height('38px')
303+
.width('44px')
304+
.height('44px')
254305
.listStyle('none')
255306
.cursor('pointer')
256307
.color(tone.neutral.surfaceAlt.rest.text)
@@ -268,6 +319,9 @@ function registerCompactNavigationStyles(root: Style, palette: ThemePalette) {
268319
.display('flex')
269320
.flexDirection('column')
270321
.padding('13px 20px 20px')
322+
.maxHeight('calc(100dvh - 8rem)')
323+
.overflowY('auto')
324+
.overscrollBehavior('contain')
271325
.background(tone.accent.canvas)
272326
.borderBottom(`1px solid ${tone.accent.surface.rest.border}`)
273327
.boxShadow(palette.effect.floatingShadow)

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"private": true,
33
"name": "purestack-repo",
4-
"version": "1.1.30",
4+
"version": "1.1.31",
55
"packageManager": "yarn@4.18.1",
66
"type": "module",
77
"sideEffects": false,

‎packages/purestack/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "purestack",
3-
"version": "1.1.30",
3+
"version": "1.1.31",
44
"packageManager": "yarn@4.9.2",
55
"module": "./dist/purestack.mjs",
66
"types": "./dist/purestack.d.mts",

‎packages/purestack/src/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
export const version: string = '1.1.30'
1+
export const version: string = '1.1.31'
22

33
export * from '@purestack/ts-ssg'

‎packages/ts-common/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@purestack/ts-common",
3-
"version": "1.1.30",
3+
"version": "1.1.31",
44
"packageManager": "yarn@4.9.2",
55
"module": "./dist/ts-common.mjs",
66
"types": "./dist/ts-common.d.mts",

‎packages/ts-components/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@purestack/ts-components",
3-
"version": "1.1.30",
3+
"version": "1.1.31",
44
"packageManager": "yarn@4.9.2",
55
"module": "./dist/ts-components.mjs",
66
"types": "./dist/ts-components.d.mts",

0 commit comments

Comments
 (0)