@mountainpass/addressr-react - npm Package Compare versions

Comparing version 0.6.0 to 0.6.1

package.json

 {
   "name": "@mountainpass/addressr-react",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "React address autocomplete component for Australian address search via Addressr",
@@ -38,3 +38,3 @@ "author": {
     "downshift": "^9.0.0",
-    "@mountainpass/addressr-core": "0.6.0"
+    "@mountainpass/addressr-core": "0.6.1"
   },
@@ -41,0 +41,0 @@ "devDependencies": {

README.md

@@ -45,5 +45,30 @@ # @mountainpass/addressr-react
 | `debounceMs` | `number` | `300` | Debounce delay in milliseconds |
+| `name` | `string` | `"address"` | Input name attribute for form submission |
+| `required` | `boolean` | -- | Sets `aria-required` on the input |
 | `apiUrl` | `string` | `"https://addressr.p.rapidapi.com/"` | API root URL |
 | `apiHost` | `string` | `"addressr.p.rapidapi.com"` | RapidAPI host header |
+| `renderLoading` | `() => ReactNode` | -- | Custom loading state renderer |
+| `renderNoResults` | `() => ReactNode` | -- | Custom no-results renderer |
+| `renderError` | `(error: Error) => ReactNode` | -- | Custom error renderer |
+| `renderItem` | `(item, highlighted, segments) => ReactNode` | -- | Custom result item renderer |
 
+### Render customization
+
+Override any rendering zone while keeping built-in search logic and keyboard navigation:
+
+```tsx
+<AddressAutocomplete
+  apiUrl="https://api.addressr.io/"
+  onSelect={handleSelect}
+  renderLoading={() => <li>Loading addresses...</li>}
+  renderNoResults={() => <li>No matches found</li>}
+  renderError={(err) => <div role="alert">Error: {err.message}</div>}
+  renderItem={(item, highlighted, segments) => (
+    <span>{segments.map((s, i) => s.highlighted ? <mark key={i}>{s.text}</mark> : s.text)}</span>
+  )}
+/>
+```
+
+When you provide a custom renderer, you are responsible for accessibility in that zone -- use appropriate roles and contrast ratios.
+
 ## Headless hook
@@ -95,2 +120,38 @@
 
+## Theming
+
+All visual styles use CSS custom properties. Override on any ancestor element:
+
+```css
+.my-form {
+  --addressr-font-family: 'Inter', sans-serif;
+  --addressr-border-color: #ccc;
+  --addressr-focus-color: #0066cc;
+  --addressr-highlight-bg: #e0f0ff;
+  --addressr-error-color: #c62828;
+}
+```
+
+| Token | Default | Description |
+|-------|---------|-------------|
+| `--addressr-font-family` | `system-ui, -apple-system, sans-serif` | Font stack |
+| `--addressr-padding-x` | `0.75rem` | Horizontal padding |
+| `--addressr-padding-y` | `0.625rem` | Vertical padding |
+| `--addressr-text-color` | `inherit` | Text color |
+| `--addressr-border-color` | `#767676` | Input and dropdown border |
+| `--addressr-border-radius` | `0.25rem` | Corner radius |
+| `--addressr-focus-color` | `#005fcc` | Focus ring and border |
+| `--addressr-z-index` | `1000` | Dropdown stacking order |
+| `--addressr-bg` | `#fff` | Dropdown background |
+| `--addressr-shadow` | `0 4px 6px rgba(0,0,0,0.1)` | Dropdown shadow |
+| `--addressr-highlight-bg` | `#e8f0fe` | Active item background |
+| `--addressr-mark-weight` | `700` | Search match font weight |
+| `--addressr-mark-color` | `inherit` | Search match text color |
+| `--addressr-muted-color` | `#555` | Status and empty text |
+| `--addressr-error-color` | `#d32f2f` | Error message text |
+| `--addressr-skeleton-from` | `#e0e0e0` | Loading skeleton base |
+| `--addressr-skeleton-to` | `#f0f0f0` | Loading skeleton shimmer |
+
+The loading state shows animated skeleton lines instead of text. The animation respects `prefers-reduced-motion: reduce`.
+
 ## Accessibility
@@ -97,0 +158,0 @@

New alerts

Unidentified License

License

Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Fixed alerts

Unidentified License

License

Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

14255

23.76%

Number of lines in readme file

173

54.46%

Dependency changes

• + Added

  @mountainpass/addressr-core@0.6.1
  (transitive)

• - Removed

  @mountainpass/addressr-core@0.6.0
  (transitive)

• Updated

  @mountainpass/addressr-core@0.6.1