@mucsi96/react-ui 0.2.0 → 0.4.0

package/README.md

@@ -27,6 +27,23 @@ 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.
 
+To normalize native headings, opt in to the typography reset before your
+application styles:
+
+```tsx
+import '@mucsi96/react-ui/styles.css';
+import '@mucsi96/react-ui/typography.css';
+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. 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.
+
 ## Buttons
 
 ```tsx
@@ -35,6 +52,7 @@ Components need no theme provider. The stylesheet defines the dark `--bt-*` toke
 <Button variant="outlined">Secondary</Button>
 <Button variant="text">Cancel</Button>
 <Button variant="icon" aria-label="Search"><SearchIcon /></Button>
+<Button variant="avatar" aria-label="User menu">IB</Button>
 <Button variant="fab"><PlusIcon />New item</Button>
 <Button variant="mini-fab" aria-label="Add"><PlusIcon /></Button>
 <Button isDisabled>Unavailable</Button>
@@ -45,6 +63,10 @@ Components need no theme provider. The stylesheet defines the dark `--bt-*` toke
 
 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. Compose it with
+`MenuTrigger` just like other buttons; keep the accessible name on the button.
+
 ## Forms
 
 ```tsx
@@ -68,6 +90,18 @@ 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.
 
+### Field and button sizing
+
+Fields default to `appearance="filled"`, with always-visible floating labels and
+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 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.
+
 ## Donut slider
 
 ```tsx
@@ -231,6 +265,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/button/button.d.ts

@@ -1,7 +1,7 @@
 import type { ButtonProps as AriaButtonProps, LinkProps } from 'react-aria-components';
 import type { CSSProperties, ReactNode, Ref } from 'react';
 import type { Tone } from '../../types';
-export type ButtonVariant = 'filled' | 'raised' | 'outlined' | 'text' | 'icon' | 'fab' | 'mini-fab';
+export type ButtonVariant = 'filled' | 'raised' | 'outlined' | 'text' | 'icon' | 'avatar' | 'fab' | 'mini-fab';
 interface Appearance {
     variant?: ButtonVariant;
     tone?: Tone;

package/dist/components/forms/select.d.ts

@@ -11,12 +11,13 @@ interface FieldProps {
     description?: ReactNode;
     error?: ReactNode;
     placeholder?: string;
+    appearance?: 'outlined' | 'filled';
     className?: string;
 }
 export interface SelectProps extends Omit<AriaSelectProps<SelectOption>, keyof FieldProps | 'children' | 'items'>, FieldProps {
 }
-export declare function Select({ label, options, description, error, placeholder, className, ...props }: SelectProps): import("react").JSX.Element;
+export declare function Select({ label, options, description, error, placeholder, appearance, className, ...props }: SelectProps): import("react").JSX.Element;
 export interface ComboBoxProps extends Omit<AriaComboBoxProps<SelectOption>, keyof FieldProps | 'children' | 'items' | 'defaultItems'>, FieldProps {
 }
-export declare function ComboBox({ label, options, description, error, placeholder, className, ...props }: ComboBoxProps): import("react").JSX.Element;
+export declare function ComboBox({ label, options, description, error, placeholder, appearance, className, ...props }: ComboBoxProps): import("react").JSX.Element;
 export {};