@magicx-eng/ai-autocomplete-react 0.1.24 → 0.1.26

package/README.md

@@ -58,7 +58,6 @@ function App() {
         console.log(result.raw_query);        // "Create a {{TASK_1}}"
         console.log(result.completed_params); // [{ placeholder: "{{TASK_1}}", type: "task", ... }]
       }}
-      placeholder="Create a"
       className="my-autocomplete"
     />
   );
@@ -140,7 +139,6 @@ function App() {
 | `apiConfig?` | `APIConfig` | — | Runtime API configuration (see below). |
 | `optionOverrides?` | `Record<string, (query: string) => SuggestionOption[]>` | — | Override options per suggestion type. |
 | `maskCompletedText?` | `boolean` | `false` | When `true`, omits completed params' literal text from API requests (for masking PII/sensitive values from the server). |
-| `placeholder?` | `string` | — | Fallback placeholder when the server doesn't return one. |
 | `className?` | `string` | — | CSS class applied to the container. |
 | `columns?` | `number` | `2` | Number of columns in the dropdown grid. |
 | `pillPlacement?` | `"inline" \| "dropdown" \| "hidden"` | `"inline"` | Where to render unfilled pills. `"hidden"` hides pills entirely. |
@@ -282,8 +280,13 @@ Override on the container (via `className`). All defaults use `:where()` (zero s
 | `--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-caret-color` | `--aia-written-text-color` | `--aia-written-text-color` | Textarea caret color. Override independently of input text color. |
+| `--aia-submit-bg` | `#000000` | `#ffffff` | Submit button background |
+| `--aia-submit-color` | `#ffffff` | `#000000` | Submit button icon color |
 | `--aia-dropdown-bg` | — | — | Optional bg color the dropdown's "glass" rim shadow tints toward. Set this to the page background behind the dropdown so the bottom-corner glow blends seamlessly. |
 | `--aia-scrollbar-thumb` | `rgba(0, 0, 0, 0.3)` | `rgba(0, 0, 0, 0.3)` | Color of the option list's scrollbar thumb (Firefox + WebKit). |
+| `--aia-streak-rgb` | `99, 102, 241` | `255, 255, 255` | Comma-separated RGB triplet used to tint the option-selection streak animation (consumed via `rgba(var(--aia-streak-rgb), …)`). |
+| `--aia-streak-glass-bg` | `rgba(99, 102, 241, 0.1)` | `rgba(255, 255, 255, 0.1)` | Background fill for the streak's glass-pill effect. |
 
 Legacy `--aia-color-*` variables are still supported as fallbacks.
 
@@ -298,6 +301,29 @@ Legacy `--aia-color-*` variables are still supported as fallbacks.
 }
 ```
 
+### Selector Hooks
+
+For styling beyond the CSS variables, target these stable `data-aia-*` attributes (CSS-module class hashes are not part of the public API):
+
+| Attribute | Element |
+|---|---|
+| `[data-aia-editor]` | Editor area wrapping the textarea + overlay |
+| `[data-aia-textarea]` | The `<textarea>` |
+| `[data-aia-submit]` | Submit button |
+| `[data-aia-pill]` | Each unfilled-suggestion pill |
+| `[data-aia-pillbar]` | Pill bar container inside the dropdown |
+| `[data-aia-option]` | Each suggestion option |
+| `[data-aia-dropdown]` | The dropdown root (listbox) |
+
+```css
+/* Solid (non-glass) dropdown */
+.my-autocomplete [data-aia-dropdown] {
+  background: #fff;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  backdrop-filter: none;
+}
+```
+
 ---
 
 ## Option Overrides

package/dist/index.d.mts

@@ -72,7 +72,6 @@ interface AIAutocompleteProps {
     onError?: (error: Error) => void;
     optionOverrides?: OptionOverrides;
     maskCompletedText?: boolean;
-    placeholder?: string;
     className?: string;
     apiConfig?: APIConfig;
     columns?: number;
@@ -101,7 +100,6 @@ interface UseAIAutocompleteOptions {
     onError?: (error: Error) => void;
     optionOverrides?: OptionOverrides;
     maskCompletedText?: boolean;
-    placeholder?: string;
     apiConfig?: APIConfig;
     columns?: number;
     /** When the dropdown appears. Default: "auto". */
@@ -130,6 +128,8 @@ interface UseAIAutocompleteReturn {
         placeholder: string | undefined;
         onChange: (e: ChangeEvent<HTMLTextAreaElement>) => void;
         onKeyDown: (e: KeyboardEvent<HTMLTextAreaElement>) => void;
+        onFocus: () => void;
+        onBlur: () => void;
         role: "combobox";
         "aria-expanded": boolean;
         "aria-activedescendant": string | undefined;
@@ -158,6 +158,6 @@ declare const AIAutocomplete: react.ForwardRefExoticComponent<AIAutocompleteProp
 
 declare function AIAutocompleteDropdown({ suggestions, activeIndex, onSelect, onHighlight, isOpen, id, className, pills, onPillClick, showPills, }: AIAutocompleteDropdownProps): react_jsx_runtime.JSX.Element;
 
-declare function useAIAutocomplete({ onSubmit, onError, optionOverrides, maskCompletedText, placeholder: customPlaceholder, apiConfig, columns, dropdownTrigger, value: controlledValue, completedParams: controlledParams, onChange: onChangeProp, onParamsChange, }: UseAIAutocompleteOptions): UseAIAutocompleteReturn;
+declare function useAIAutocomplete({ onSubmit, onError, optionOverrides, maskCompletedText, apiConfig, columns, dropdownTrigger, value: controlledValue, completedParams: controlledParams, onChange: onChangeProp, onParamsChange, }: UseAIAutocompleteOptions): UseAIAutocompleteReturn;
 
 export { AIAutocomplete, AIAutocompleteDropdown, type AIAutocompleteDropdownProps, type AIAutocompleteHandle, type AIAutocompleteProps, type APIConfig, type APIKeyConfig, type AccessTokenConfig, type AccessTokenResult, type AppearanceMode, type AutocompleteResult, type CompletedParam, type CompletedParamState, type OptionOverrides, type Segment, type Suggestion, type SuggestionOption, type TaskKind, type UseAIAutocompleteOptions, type UseAIAutocompleteReturn, useAIAutocomplete };

package/dist/index.d.ts

@@ -72,7 +72,6 @@ interface AIAutocompleteProps {
     onError?: (error: Error) => void;
     optionOverrides?: OptionOverrides;
     maskCompletedText?: boolean;
-    placeholder?: string;
     className?: string;
     apiConfig?: APIConfig;
     columns?: number;
@@ -101,7 +100,6 @@ interface UseAIAutocompleteOptions {
     onError?: (error: Error) => void;
     optionOverrides?: OptionOverrides;
     maskCompletedText?: boolean;
-    placeholder?: string;
     apiConfig?: APIConfig;
     columns?: number;
     /** When the dropdown appears. Default: "auto". */
@@ -130,6 +128,8 @@ interface UseAIAutocompleteReturn {
         placeholder: string | undefined;
         onChange: (e: ChangeEvent<HTMLTextAreaElement>) => void;
         onKeyDown: (e: KeyboardEvent<HTMLTextAreaElement>) => void;
+        onFocus: () => void;
+        onBlur: () => void;
         role: "combobox";
         "aria-expanded": boolean;
         "aria-activedescendant": string | undefined;
@@ -158,6 +158,6 @@ declare const AIAutocomplete: react.ForwardRefExoticComponent<AIAutocompleteProp
 
 declare function AIAutocompleteDropdown({ suggestions, activeIndex, onSelect, onHighlight, isOpen, id, className, pills, onPillClick, showPills, }: AIAutocompleteDropdownProps): react_jsx_runtime.JSX.Element;
 
-declare function useAIAutocomplete({ onSubmit, onError, optionOverrides, maskCompletedText, placeholder: customPlaceholder, apiConfig, columns, dropdownTrigger, value: controlledValue, completedParams: controlledParams, onChange: onChangeProp, onParamsChange, }: UseAIAutocompleteOptions): UseAIAutocompleteReturn;
+declare function useAIAutocomplete({ onSubmit, onError, optionOverrides, maskCompletedText, apiConfig, columns, dropdownTrigger, value: controlledValue, completedParams: controlledParams, onChange: onChangeProp, onParamsChange, }: UseAIAutocompleteOptions): UseAIAutocompleteReturn;
 
 export { AIAutocomplete, AIAutocompleteDropdown, type AIAutocompleteDropdownProps, type AIAutocompleteHandle, type AIAutocompleteProps, type APIConfig, type APIKeyConfig, type AccessTokenConfig, type AccessTokenResult, type AppearanceMode, type AutocompleteResult, type CompletedParam, type CompletedParamState, type OptionOverrides, type Segment, type Suggestion, type SuggestionOption, type TaskKind, type UseAIAutocompleteOptions, type UseAIAutocompleteReturn, useAIAutocomplete };