@magicx-eng/ai-autocomplete-react 0.41.2 → 0.43.0

package/README.md

@@ -837,6 +837,15 @@ Every class name the package emits is namespaced — `aia-*` for its own (hashed
 
 Override on the container (via `className`). The variables are declared with `:where()` (zero specificity), so a value you set on the container always wins.
 
+The full input also accepts `--aia-input-radius` and `--aia-written-text-font-weight` on its container or an ancestor. Omit them to retain the default `10px` radius and `300` weight; changing `mode` does not reset these overrides. In dropdown-only integrations, style your own input directly.
+
+```css
+.my-search {
+  --aia-input-radius: 0;
+  --aia-written-text-font-weight: 500;
+}
+```
+
 | Variable | Light | Dark | Description |
 |---|---|---|---|
 | `--aia-font-family` | `inherit` | `inherit` | Font used by the library. Defaults to `inherit` so the library picks up your page's font automatically. Set this to pin a specific font on the library without changing the surrounding page. |
@@ -849,12 +858,14 @@ Override on the container (via `className`). The variables are declared with `:w
 | `--aia-option-font-size` | `19px` | `19px` | Option font size |
 | `--aia-written-text-color` | `#000000` | `#ffffff` | Input text |
 | `--aia-written-text-font-size` | `19px` | `19px` | Input text font size |
+| `--aia-written-text-font-weight` | `300` | `300` | Written text weight in the full input. Completed chips keep their own typography. |
 | `--aia-caret-color` | `--aia-written-text-color` | `--aia-written-text-color` | Editor caret color. Override independently of input text color. |
 | `--aia-submit-bg` | `#000000` | `#ffffff` | Submit button background. Solid + full-opacity at rest, even when the input is empty/disabled. |
 | `--aia-submit-color` | `#ffffff` | `#000000` | Submit button arrow color |
 | `--aia-submit-bg-disabled` | `--aia-submit-bg` | `--aia-submit-bg` | Submit background when disabled (empty input). Defaults to the enabled background so themed colors aren't washed out. Set this for a faded rest state. |
 | `--aia-submit-color-disabled` | `--aia-submit-color` | `--aia-submit-color` | Submit arrow color when disabled. Defaults to the enabled color. |
 | `--aia-border` | `rgba(17, 24, 39, 0.14)` | `#505050` | Input container border color |
+| `--aia-input-radius` | `10px` | `10px` | Full input corner radius. Set `0` for square corners. |
 | `--aia-shadow` | `none` | `none` | Input container elevation (box-shadow). Flat by default; set it to add one |
 | `--aia-dropdown-offset` | `13px` | `13px` | Gap between the input box and the dropdown (the dropdown's margin toward the input). |
 | `--aia-content-inset-left` | `16px` | `16px` | Left inset of the SDK's content: the input wrapper's left padding, and the line the dropdown's content (parameter label, option text, product strip) starts on. Set it when you pad the field to clear a leading icon of your own, so the dropdown's content stays aligned under the typed text. Practical minimum is `10px` (the option text's own inset); both surfaces floor it there. |

package/dist/index.js

@@ -17,7 +17,7 @@
      10px the two sides would diverge; flooring both keeps them together. */
   padding: 12px 16px 12px max(10px, var(--aia-content-inset-left, 16px));
   border: 1px solid var(--aia-border, #b0b0b0);
-  border-radius: 10px;
+  border-radius: var(--aia-input-radius, 10px);
   background: var(--aia-surface, #ffffff);
   /* Flat by default; consumers can set --aia-shadow for elevation. */
   box-shadow: var(--aia-shadow, none);
@@ -66,7 +66,7 @@
     --aia-caret-color,
     var(--aia-written-text-color, var(--aia-color-text-default, #fff))
   );
-  font-weight: 300;
+  font-weight: var(--aia-written-text-font-weight, 300);
   /* Align the text's inline box with the pill list (also vertical-align: middle)
      so they share a vertical center when pills stretch the line box to ~36px. */
   vertical-align: middle;