@mucsi96/react-ui 0.3.0 → 0.5.0

package/README.md

@@ -27,8 +27,8 @@ export function SaveAction() {
 
 Components need no theme provider. The stylesheet defines the dark `--bt-*` tokens and `color-scheme` on `:root`; all component selectors and animations are locally scoped. It does not reset your application's typography or layout. The library entry is marked as a client boundary for React Server Component frameworks.
 
-For applications migrating from `@mucsi96/angular-material-theme`, opt in to the
-matching typography baseline before your application styles:
+To normalize native headings, opt in to the typography reset before your
+application styles:
 
 ```tsx
 import '@mucsi96/react-ui/styles.css';
@@ -37,10 +37,52 @@ import './styles.css';
 ```
 
 This restores normal-weight, unscaled native headings with no default margins.
-Set page-specific heading sizes and spacing in your CSS Modules. `--bt-font`
-matches Angular Material's system-font stack; `--bt-font-body` matches Cooking's
-Apple/Roboto body stack. Bundle Roboto locally if your application uses that
-fallback. The optional stylesheet does not import fonts or reset page layouts.
+Set page-specific heading sizes and spacing in your CSS Modules. The single font
+token `--bt-font` uses only `system-ui`, including avatar initials. Code uses an
+inline `ui-monospace, monospace` stack without a font token. The main stylesheet applies
+the font to the document root, so applications need no font-family declarations
+or token overrides. No font downloads are needed.
+The optional stylesheet does not import fonts or reset page layouts.
+
+## Application layout
+
+```tsx
+import { AppHeader, AppHeaderActions, AppMain } from '@mucsi96/react-ui';
+
+<AppHeader>
+  <a href="/">My application</a>
+  <AppHeaderActions>
+    <nav aria-label="Main navigation">{/* Application links */}</nav>
+    <ProfileMenu />
+  </AppHeaderActions>
+</AppHeader>
+<AppMain id="main-content">{/* Page content */}</AppMain>
+```
+
+`AppHeader` renders a native `header` with a width-constrained inner flex row.
+Its safe-area top padding sits outside the row's minimum height, so iOS status
+bars do not compress controls. Children wrap as needed. `AppHeaderActions` is a
+wrapping, end-aligned `div`; make any nested navigation groups wrap as well.
+`AppMain` renders a native `main` with matching horizontal gutters, page spacing,
+and bottom safe-area padding. All three accept native element props, including
+`className`, `style`, and React 19 `ref`. They use ordinary document flow.
+
+Set these inherited CSS variables on a common ancestor to customize the layout:
+
+| Variable                 | Default | Purpose                                              |
+| ------------------------ | ------- | ---------------------------------------------------- |
+| `--bt-app-max-width`     | `90rem` | Header row and main maximum width, including gutters |
+| `--bt-app-gutter`        | `1rem`  | Minimum horizontal and bottom page padding           |
+| `--bt-app-header-height` | `4rem`  | Minimum header row height, excluding top safe area   |
+| `--bt-app-header-gap`    | `1rem`  | Space between header children and actions            |
+| `--bt-app-content-gap`   | `3rem`  | Main content top padding                             |
+
+The host document should reset the body margin and include
+`<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">`
+for edge-to-edge safe-area handling. The library does not modify document metadata
+or global layout. Keep routing, profile fetching, navigation labels, and menu
+contents in the application; compose profile menus with `MenuTrigger` and
+`Button variant="avatar"`.
 
 ## Buttons
 
@@ -62,7 +104,7 @@ fallback. The optional stylesheet does not import fonts or reset page layouts.
 Buttons expose React Aria's press API (`onPress`, `isDisabled`) and React 19's `ref` prop. Set `type="submit"` for form submission. Supply an accessible label for icon-only actions. Icons are ordinary React children; no icon package is imposed on consumers.
 
 Use `avatar` for initials-based profile/menu triggers: a 40px filled circle with
-normal-weight 18px initials, matching Cooking's Angular avatar. Compose it with
+normal-weight 18px initials. Compose it with
 `MenuTrigger` just like other buttons; keep the accessible name on the button.
 
 ## Forms
@@ -88,18 +130,17 @@ Labels, descriptions, and validation messages are associated with the input auto
 
 Select options have `{ id, label, isDisabled? }`; React Aria handles selection, typeahead, and filtering. Checkbox and switch controlled state uses `isSelected`/`onChange`; radio group state uses `value`/`onChange`. React Aria form `name` props support native form submissions.
 
-### Angular field and button baseline
+### Field and button sizing
 
 Fields default to `appearance="filled"`, with always-visible floating labels and
-the Angular theme's 56px content height (58px including its border). `TextField`,
+a 56px content height (58px including its border). `TextField`,
 `Select`, and `ComboBox` also accept `appearance="outlined"`. On an outlined field
 over a custom surface, set `--bt-field-label-background` to that surface color.
 Required markers are visual only; the accessible name remains the supplied label.
 
-Buttons use Angular's 40px default height; icon buttons are circular, and FABs
+Buttons use a 40px default height; icon buttons are circular, and FABs
 use 56px/40px sizes. Consumers needing taller touch targets can set `min-height`
-on their CSS Module class. See the repository's `docs/angular-component-audit.md`
-for the component-by-component comparison and remaining differences.
+on their CSS Module class.
 
 ## Donut slider
 
@@ -264,6 +305,6 @@ All loading animations respect reduced motion. `Card` supports `outlined` and `e
 }
 ```
 
-Use `className` to extend styles without reaching into internal module selectors. The public palette includes `surface-0` through `surface-4`, `outline`, `text-strong`, `text-default`, `text-muted`, `text-on-brand`, `primary`, `primary-hover`, `link`, `link-hint`, semantic `success`/`warn`/`error` colors, hover variants, soft variants, and success/error foreground tokens. Shared `--bt-font`, `--bt-font-mono`, `--bt-radius`, `--bt-radius-lg`, and `--bt-shadow` tokens complete the foundation.
+Use `className` to extend styles without reaching into internal module selectors. The public palette includes `surface-0` through `surface-4`, `outline`, `text-strong`, `text-default`, `text-muted`, `text-on-brand`, `primary`, `primary-hover`, `link`, `link-hint`, semantic `success`/`warn`/`error` colors, hover variants, soft variants, and success/error foreground tokens. Shared `--bt-font`, `--bt-radius`, `--bt-radius-lg`, and `--bt-shadow` tokens complete the foundation.
 
 MIT © Igor Bari

package/dist/components/app-layout/app-layout.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentPropsWithRef } from 'react';
+export type AppHeaderProps = ComponentPropsWithRef<'header'>;
+export type AppHeaderActionsProps = ComponentPropsWithRef<'div'>;
+export type AppMainProps = ComponentPropsWithRef<'main'>;
+export declare function AppHeader({ children, className, ...props }: AppHeaderProps): import("react").JSX.Element;
+export declare function AppHeaderActions({ className, ...props }: AppHeaderActionsProps): import("react").JSX.Element;
+export declare function AppMain({ className, ...props }: AppMainProps): import("react").JSX.Element;

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+export { AppHeader, AppHeaderActions, AppMain } from './components/app-layout/app-layout';
+export type { AppHeaderProps, AppHeaderActionsProps, AppMainProps, } from './components/app-layout/app-layout';
 export { Button, LinkButton } from './components/button/button';
 export type { ButtonProps, ButtonVariant, LinkButtonProps } from './components/button/button';
 export { TextField } from './components/forms/text-field';