ab-nextjs-core 0.1.3 → 0.1.5

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 (11) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/README.md +15 -0
  3. package/ab-app-layout/index.tsx +4 -4
  4. package/ab-aside-layout/index.tsx +7 -5
  5. package/ab-main-layout/index.tsx +5 -4
  6. package/ab-screen-layout/index.tsx +4 -4
  7. package/package.json +2 -2
  8. package/server/ab-app-layout/index.tsx +4 -4
  9. package/server/ab-aside-layout/index.tsx +5 -4
  10. package/server/ab-main-layout/index.tsx +5 -4
  11. package/server/ab-screen-layout/index.tsx +4 -4
package/CHANGELOG.md ADDED
@@ -0,0 +1,18 @@
1
+ # Changelog
2
+
3
+ All notable changes to this project will be documented in this file.
4
+
5
+ ### 0.1.5 (2026-10-05)
6
+
7
+ * **Landmarks:** header / footer wrappers set `data-ab-part="header"` / `data-ab-part="footer"`
8
+
9
+ ### 0.1.4 (2026-10-05)
10
+
11
+ * **Semantics:** layout wrappers use landmark tags — `<header>` / `<footer>` (was `<div>`); `<main>` and `<aside>` unchanged; sidebar / bottom bar stay the consumer's `<nav>` (`AbSidebar` / `AbNavbar` in components)
12
+ * **Aside targeting:** `AbAsideLayout` sets `data-ab-part="aside"` (and keeps `class="AbAsideLayout"`) so `useAbDialog` / `useAbMenu` / `useAbToast` can find the real aside, never a sidebar
13
+ * **Main:** `AbMainLayout` sets `data-ab-part="main"`
14
+ * **Animation:** client `AbAsideLayout` uses the real `.slideFromRight` class from `ab-nextjs-animations` (was undefined `animate-slide-from-right`)
15
+
16
+ ### 0.1.3 (2026-10-03)
17
+
18
+ * Publish to npm with Trusted Publishing (OIDC); `next` peer `^16.3.4`
package/README.md CHANGED
@@ -48,6 +48,21 @@ Peer: `clsx`, `next@16.3.4`, `react@^19`, `react-dom@^19`.
48
48
 
49
49
  Optional: wrap client `AbAsideLayout` with `AbPageProvider` / `useAbPage` for aside open state.
50
50
 
51
+
52
+
53
+ ### Layout landmarks (0.1.4)
54
+
55
+ | Slot / layout | HTML tag | `data-ab-part` |
56
+ |:--------------|:---------|:---------------|
57
+ | `AbMainLayout` | `<main>` | `main` |
58
+ | `AbAsideLayout` | `<aside>` | `aside` |
59
+ | Header wrapper | `<header>` | `header` |
60
+ | Footer wrapper | `<footer>` | `footer` |
61
+ | Sidebar / bottom bar (via components) | `<nav>` (`AbSidebar` / `AbNavbar`) | `sidebar` (sidebar) |
62
+
63
+ The client aside opens with the `.slideFromRight` class from `ab-nextjs-animations` (import `ab-nextjs-animations/slide-from-right/styles.css`).
64
+
65
+
51
66
  ## Getting Started
52
67
 
53
68
  ### Installation
package/ab-app-layout/index.tsx CHANGED
@@ -75,17 +75,17 @@ const AbAppLayout = ({
75
75
  data-page-name={pageName}
76
76
  data-orientation={orientation ?? ''}
77
77
  >
78
- <div className={clsx(['HeaderWrapper', styles.abAppLayout__headerWrapper])}>
78
+ <header className={clsx(['HeaderWrapper', styles.abAppLayout__headerWrapper])} data-ab-part="header">
79
79
  {header}
80
- </div>
80
+ </header>
81
81
  <div className={clsx(['ContentWrapper', styles.abAppLayout__contentWrapper])}>
82
82
  {sideBar}
83
83
  {content ?? children}
84
84
  {navBar}
85
85
  </div>
86
- <div className={clsx(['FooterWrapper', styles.abAppLayout__footerWrapper])}>
86
+ <footer className={clsx(['FooterWrapper', styles.abAppLayout__footerWrapper])} data-ab-part="footer">
87
87
  {footer}
88
- </div>
88
+ </footer>
89
89
  <div id="backdrop" className={clsx(['Backdrop', styles.abAppLayout__backdrop])} hidden />
90
90
  <div id="menus" className={clsx(['Menus', styles.abAppLayout__menus])} hidden>
91
91
  {menus}
package/ab-aside-layout/index.tsx CHANGED
@@ -134,18 +134,20 @@ const AbAsideLayout = ({
134
134
  ref={asideRef}
135
135
  className={clsx(
136
136
  ['AbAsideLayout', 'group/aside-layout', styles.abAsideLayout, className],
137
- { 'is-open max-lg:!animate-slide-from-right': isAsideOpen },
137
+ { 'is-open': isAsideOpen },
138
+ { 'slideFromRight': isAsideOpen },
138
139
  { 'is-open-on-mobile': isAsideOpenOnMobile },
139
140
  { '!hidden': !isAsideOpen && !isAsideOpening && !isAsideClosing },
140
141
  )}
141
142
  hidden={hidden}
142
143
  data-page-name={pageName}
144
+ data-ab-part="aside"
143
145
  data-opened={isAsideOpen}
144
146
  data-open-on-mobile={isAsideOpenOnMobile}
145
147
  >
146
- <div className={clsx(['HeaderWrapper', styles.abAsideLayout__headerWrapper])}>
148
+ <header className={clsx(['HeaderWrapper', styles.abAsideLayout__headerWrapper])} data-ab-part="header">
147
149
  {header}
148
- </div>
150
+ </header>
149
151
 
150
152
  <div
151
153
  className={clsx([
@@ -157,9 +159,9 @@ const AbAsideLayout = ({
157
159
  {content ?? children}
158
160
  </div>
159
161
 
160
- <div className={clsx(['FooterWrapper', styles.abAsideLayout__footerWrapper])}>
162
+ <footer className={clsx(['FooterWrapper', styles.abAsideLayout__footerWrapper])} data-ab-part="footer">
161
163
  {footer}
162
- </div>
164
+ </footer>
163
165
 
164
166
  <div className={clsx(['Backdrop', styles.abAsideLayout__backdrop])} hidden />
165
167
  <div className={clsx(['Menus', styles.abAsideLayout__menus])} hidden>
package/ab-main-layout/index.tsx CHANGED
@@ -75,11 +75,12 @@ const AbMainLayout = ({
75
75
  style={{ maxHeight: screenName ? 'initial' : undefined }}
76
76
  hidden={hidden}
77
77
  data-page-name={pageName}
78
+ data-ab-part="main"
78
79
  data-screen-name={screenName}
79
80
  >
80
- <div className={clsx(['HeaderWrapper', styles.abMainLayout__headerWrapper])}>
81
+ <header className={clsx(['HeaderWrapper', styles.abMainLayout__headerWrapper])} data-ab-part="header">
81
82
  {header}
82
- </div>
83
+ </header>
83
84
  <div
84
85
  className={clsx([
85
86
  'ContentWrapper',
@@ -90,9 +91,9 @@ const AbMainLayout = ({
90
91
  >
91
92
  {content ?? children}
92
93
  </div>
93
- <div className={clsx(['FooterWrapper', styles.abMainLayout__footerWrapper])}>
94
+ <footer className={clsx(['FooterWrapper', styles.abMainLayout__footerWrapper])} data-ab-part="footer">
94
95
  {footer}
95
- </div>
96
+ </footer>
96
97
  <div className={clsx(['Backdrop', styles.abMainLayout__backdrop])} hidden />
97
98
  <div className={clsx(['Menus', styles.abMainLayout__menus])} hidden>
98
99
  {menus}
package/ab-screen-layout/index.tsx CHANGED
@@ -71,15 +71,15 @@ const AbScreenLayout = ({
71
71
  data-screen-name={screenName}
72
72
  data-orientation={orientation ?? ''}
73
73
  >
74
- <div className={clsx(['HeaderWrapper', styles.abScreenLayout__headerWrapper])}>
74
+ <header className={clsx(['HeaderWrapper', styles.abScreenLayout__headerWrapper])} data-ab-part="header">
75
75
  {header}
76
- </div>
76
+ </header>
77
77
  <div className={clsx(['ContentWrapper', styles.abScreenLayout__contentWrapper])}>
78
78
  {content ?? children}
79
79
  </div>
80
- <div className={clsx(['FooterWrapper', styles.abScreenLayout__footerWrapper])}>
80
+ <footer className={clsx(['FooterWrapper', styles.abScreenLayout__footerWrapper])} data-ab-part="footer">
81
81
  {footer}
82
- </div>
82
+ </footer>
83
83
  <div id="backdrop" className={clsx(['Backdrop', styles.abScreenLayout__backdrop])} hidden />
84
84
  <div id="menus" className={clsx(['Menus', styles.abScreenLayout__menus])} hidden>
85
85
  {menus}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "ab-nextjs-core",
3
- "version": "0.1.3",
4
- "description": "🌱 A lightweight collection of server & client React components as core abElements (i.e. ab-app-layout, ab-screen-layout, ...) created by Abraham Ukachi, and optimized for Next.js applications 😎.",
3
+ "version": "0.1.5",
4
+ "description": "\ud83c\udf31 A lightweight collection of server & client React components as core abElements (i.e. ab-app-layout, ab-screen-layout, ...) created by Abraham Ukachi, and optimized for Next.js applications \ud83d\ude0e.",
5
5
  "type": "module",
6
6
  "main": "index.ts",
7
7
  "types": "types/index.d.ts",
package/server/ab-app-layout/index.tsx CHANGED
@@ -76,9 +76,9 @@ const AbAppLayout = ({
76
76
  data-page-name={pageName}
77
77
  data-orientation={orientation ?? ''}
78
78
  >
79
- <div className={clsx(['HeaderWrapper', styles.abAppLayout__headerWrapper])}>
79
+ <header className={clsx(['HeaderWrapper', styles.abAppLayout__headerWrapper])} data-ab-part="header">
80
80
  {header}
81
- </div>
81
+ </header>
82
82
 
83
83
  <div className={clsx(['ContentWrapper', styles.abAppLayout__contentWrapper])}>
84
84
  {sideBar}
@@ -86,9 +86,9 @@ const AbAppLayout = ({
86
86
  {navBar}
87
87
  </div>
88
88
 
89
- <div className={clsx(['FooterWrapper', styles.abAppLayout__footerWrapper])}>
89
+ <footer className={clsx(['FooterWrapper', styles.abAppLayout__footerWrapper])} data-ab-part="footer">
90
90
  {footer}
91
- </div>
91
+ </footer>
92
92
 
93
93
  <div id="backdrop" className={clsx(['Backdrop', styles.abAppLayout__backdrop])} hidden />
94
94
  <div id="menus" className={clsx(['Menus', styles.abAppLayout__menus])} hidden>
package/server/ab-aside-layout/index.tsx CHANGED
@@ -71,10 +71,11 @@ const AbAsideLayout = ({
71
71
  className={clsx(['AbAsideLayout', styles.abAsideLayout, className])}
72
72
  hidden={hidden}
73
73
  data-page-name={pageName}
74
+ data-ab-part="aside"
74
75
  >
75
- <div className={clsx(['HeaderWrapper', styles.abAsideLayout__headerWrapper])}>
76
+ <header className={clsx(['HeaderWrapper', styles.abAsideLayout__headerWrapper])} data-ab-part="header">
76
77
  {header}
77
- </div>
78
+ </header>
78
79
 
79
80
  <div
80
81
  className={clsx([
@@ -86,9 +87,9 @@ const AbAsideLayout = ({
86
87
  {content ?? children}
87
88
  </div>
88
89
 
89
- <div className={clsx(['FooterWrapper', styles.abAsideLayout__footerWrapper])}>
90
+ <footer className={clsx(['FooterWrapper', styles.abAsideLayout__footerWrapper])} data-ab-part="footer">
90
91
  {footer}
91
- </div>
92
+ </footer>
92
93
 
93
94
  <div className={clsx(['Backdrop', styles.abAsideLayout__backdrop])} hidden />
94
95
  <div className={clsx(['Menus', styles.abAsideLayout__menus])} hidden>
package/server/ab-main-layout/index.tsx CHANGED
@@ -75,11 +75,12 @@ const AbMainLayout = ({
75
75
  style={{ maxHeight: screenName ? 'initial' : undefined }}
76
76
  hidden={hidden}
77
77
  data-page-name={pageName}
78
+ data-ab-part="main"
78
79
  data-screen-name={screenName}
79
80
  >
80
- <div className={clsx(['HeaderWrapper', styles.abMainLayout__headerWrapper])}>
81
+ <header className={clsx(['HeaderWrapper', styles.abMainLayout__headerWrapper])} data-ab-part="header">
81
82
  {header}
82
- </div>
83
+ </header>
83
84
 
84
85
  <div
85
86
  className={clsx([
@@ -92,9 +93,9 @@ const AbMainLayout = ({
92
93
  {content ?? children}
93
94
  </div>
94
95
 
95
- <div className={clsx(['FooterWrapper', styles.abMainLayout__footerWrapper])}>
96
+ <footer className={clsx(['FooterWrapper', styles.abMainLayout__footerWrapper])} data-ab-part="footer">
96
97
  {footer}
97
- </div>
98
+ </footer>
98
99
 
99
100
  <div className={clsx(['Backdrop', styles.abMainLayout__backdrop])} hidden />
100
101
  <div className={clsx(['Menus', styles.abMainLayout__menus])} hidden>
package/server/ab-screen-layout/index.tsx CHANGED
@@ -72,17 +72,17 @@ const AbScreenLayout = ({
72
72
  data-screen-name={screenName}
73
73
  data-orientation={orientation ?? ''}
74
74
  >
75
- <div className={clsx(['HeaderWrapper', styles.abScreenLayout__headerWrapper])}>
75
+ <header className={clsx(['HeaderWrapper', styles.abScreenLayout__headerWrapper])} data-ab-part="header">
76
76
  {header}
77
- </div>
77
+ </header>
78
78
 
79
79
  <div className={clsx(['ContentWrapper', styles.abScreenLayout__contentWrapper])}>
80
80
  {content ?? children}
81
81
  </div>
82
82
 
83
- <div className={clsx(['FooterWrapper', styles.abScreenLayout__footerWrapper])}>
83
+ <footer className={clsx(['FooterWrapper', styles.abScreenLayout__footerWrapper])} data-ab-part="footer">
84
84
  {footer}
85
- </div>
85
+ </footer>
86
86
 
87
87
  <div id="backdrop" className={clsx(['Backdrop', styles.abScreenLayout__backdrop])} hidden />
88
88
  <div id="menus" className={clsx(['Menus', styles.abScreenLayout__menus])} hidden>