@magicx-eng/ai-autocomplete-react 0.4.0 → 0.4.2

package/dist/index.d.mts

@@ -170,7 +170,7 @@ interface AIAutocompleteDropdownProps {
     isLoading?: boolean;
     /** Once the user has tabbed to highlight an option, the footer hint switches from "tab to select" to "→ to skip". Provided by `dropdownProps` from the hook. */
     hasTabbedToHighlight?: boolean;
-    /** When the input has no typed text, the footer hint reads "tab to skip" (Tab skips the active pill). Provided by `dropdownProps` from the hook. */
+    /** When the input has no typed text, the footer hint reads "tab to select". Provided by `dropdownProps` from the hook. */
     isInputEmpty?: boolean;
     /**
      * Where the dropdown opens relative to the input. When `"above"`, the dropdown

package/dist/index.d.ts

@@ -170,7 +170,7 @@ interface AIAutocompleteDropdownProps {
     isLoading?: boolean;
     /** Once the user has tabbed to highlight an option, the footer hint switches from "tab to select" to "→ to skip". Provided by `dropdownProps` from the hook. */
     hasTabbedToHighlight?: boolean;
-    /** When the input has no typed text, the footer hint reads "tab to skip" (Tab skips the active pill). Provided by `dropdownProps` from the hook. */
+    /** When the input has no typed text, the footer hint reads "tab to select". Provided by `dropdownProps` from the hook. */
     isInputEmpty?: boolean;
     /**
      * Where the dropdown opens relative to the input. When `"above"`, the dropdown

package/dist/index.js

@@ -10,7 +10,7 @@
 .AIAutocomplete-module_inputWrapper_FLq1b {
   padding: 12px 10px;
   border: 1px solid var(--aia-border, #b0b0b0);
-  border-radius: 24px;
+  border-radius: 20px;
   background: var(--aia-surface, #ffffff);
   overflow: hidden;
   display: flex;
@@ -173,7 +173,7 @@
   --aia-surface: #ffffff;
   --aia-border: #b0b0b0;
   --aia-dropdown-border: #e5e7eb;
-  --aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, 0.12);
+  --aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, 0.1);
   --aia-pill-bg: #bdbdbd;
   --aia-pill-color: #333539;
   --aia-pill-font-size: 14px;
@@ -208,12 +208,12 @@
   --aia-surface: #000000;
   --aia-border: #505050;
   --aia-dropdown-border: #484848;
-  --aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, 0.12);
+  --aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, 0.1);
   --aia-pill-bg: #bdbdbd;
   --aia-pill-color: #b0b0b0;
   --aia-pill-font-size: 14px;
 
-  --aia-option-bg: transparent;
+  --aia-option-bg: #323232;
   --aia-option-color: #b0b0b0;
   --aia-option-color-selected: #ffffff;
   --aia-option-font-size: 14px;
@@ -287,7 +287,7 @@
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
-  padding: 4px;
+  padding: 10px 8px;
   overflow: hidden;
   container-type: inline-size;
   z-index: 10;
@@ -298,8 +298,8 @@
      frosted-glass look with data-aia-surface="glass". */
   background: var(--aia-surface, #ffffff);
   border: 1px solid var(--aia-dropdown-border, #e5e7eb);
-  border-radius: 25px;
-  box-shadow: var(--aia-dropdown-shadow, 0 8px 12px rgba(0, 0, 0, 0.12));
+  border-radius: 18px;
+  box-shadow: var(--aia-dropdown-shadow, 0 8px 12px rgba(0, 0, 0, 0.1));
 }
 
 .AIAutocompleteDropdown-module_dropdown_yz2KC[data-aia-surface="glass"] {
@@ -324,10 +324,9 @@
   pointer-events: auto;
 }
 
-/* The dropdown owns a uniform 4px pad; each section adds its own 7px/8px inset
-   (matches the Figma PillList). */
+/* The dropdown container owns the 10px/8px edge padding and the 8px section
+   gaps (matching Figma); the pill row adds none \u2014 just horizontal scroll + fade. */
 .AIAutocompleteDropdown-module_pillBar_pwTXe {
-  padding: 7px 8px;
   overflow-x: auto;
   overflow-y: hidden;
   scrollbar-width: none;
@@ -415,18 +414,19 @@
     justify-content: space-around;
   }
 }
-`,document.head.appendChild(e)}var Re=require("react/jsx-runtime");function ge({gap:e,align:t="center",justify:o="start",noWrap:p=!1,inline:a=!1,className:s,children:l,...d}){let f=e?{"--aia-cluster-gap":e}:void 0,x={className:s?`aia-cluster ${s}`:"aia-cluster","data-align":t,"data-justify":o,"data-nowrap":p||void 0,"data-inline":a||void 0,style:f,...d};return a?(0,Re.jsx)("span",{...x,children:l}):(0,Re.jsx)("div",{...x,children:l})}if(typeof document<"u"&&!document.getElementById("ac-style-56b0c577")){let e=document.createElement("style");e.id="ac-style-56b0c577",e.textContent=`/* The footer adds its own 7px/8px inset (the dropdown owns a uniform 4px pad),
-   so the divider spans the full footer width yet still stays clear of the
-   dropdown's rounded edges. */
+`,document.head.appendChild(e)}var Re=require("react/jsx-runtime");function ge({gap:e,align:t="center",justify:o="start",noWrap:p=!1,inline:a=!1,className:s,children:l,...d}){let f=e?{"--aia-cluster-gap":e}:void 0,x={className:s?`aia-cluster ${s}`:"aia-cluster","data-align":t,"data-justify":o,"data-nowrap":p||void 0,"data-inline":a||void 0,style:f,...d};return a?(0,Re.jsx)("span",{...x,children:l}):(0,Re.jsx)("div",{...x,children:l})}if(typeof document<"u"&&!document.getElementById("ac-style-56b0c577")){let e=document.createElement("style");e.id="ac-style-56b0c577",e.textContent=`/* The footer adds its own 8px horizontal inset (no vertical padding \u2014 the 8px
+   section gap above and its own 8px gap provide the vertical rhythm), so the
+   divider spans the full footer width yet still stays clear of the dropdown's
+   rounded edges. */
 .DropdownFooter-module_footer_qQQ7x {
   display: flex;
   flex-direction: column;
   gap: 8px;
-  padding: 7px 8px;
+  padding: 0 8px;
 }
 
 .DropdownFooter-module_divider_FlX4C {
-  border-top: 0.5px solid var(--aia-footer-divider, rgba(176, 176, 176, 0.4));
+  border-top: 1px solid var(--aia-footer-divider, rgba(176, 176, 176, 0.4));
 }
 
 .DropdownFooter-module_hintGroup_ZzbPf {
@@ -969,7 +969,7 @@
   }
   /* data-align="stretch" is the flex default \u2014 no rule needed. */
 }
-`,document.head.appendChild(e)}var Qe=require("react/jsx-runtime");function Ue({space:e,align:t="stretch",className:o,children:p,...a}){let s=e?{"--aia-stack-space":e}:void 0;return(0,Qe.jsx)("div",{className:o?`aia-stack ${o}`:"aia-stack","data-align":t,style:s,...a,children:p})}var $=require("react/jsx-runtime"),bt=[159,119,164];function Ie({suggestions:e,activeIndex:t,onSelect:o,onHighlight:p,isOpen:a,id:s,className:l,pills:d,onPillClick:f,showPills:x=!0,activeSelected:L=!1,isLoading:P=!1,hasTabbedToHighlight:A=!1,isInputEmpty:C=!1,optionsPosition:v="below"}){let B=e[0]?.options??[],M=!!(d&&d.length>0&&f),N=a&&(B.length>0||x&&M||P),n={suggestions:e,activeIndex:t,pills:d,showPills:x,activeSelected:L,isLoading:P,hasTabbedToHighlight:A,isInputEmpty:C},_=(0,Xe.useRef)(n);N&&(_.current=n);let g=N?n:_.current,z=g.suggestions[0]?.options??[],U=g.activeIndex>=0&&!!z[g.activeIndex]?.is_tappable,K=!!(g.pills&&g.pills.length>0&&f),R=g.showPills&&K,Q=g.showPills&&!K&&g.isLoading,F=R||Q,X=z.length>0,J=g.isLoading&&!X;return(0,$.jsx)("div",{id:s,role:"listbox","data-aia-dropdown":"","data-options-position":v,"data-aia-loading":g.isLoading?"":void 0,className:`${ce.dropdown} ${N?ce.visible:""} ${l??""}`,onMouseDown:H=>H.preventDefault(),children:(0,$.jsxs)(Ue,{space:"2px",children:[F&&(0,$.jsx)(ge,{noWrap:!0,className:ce.pillBar,"data-aia-pillbar":"",children:(0,$.jsx)(_e,{pills:g.pills??[],activePillIndex:0,activeSelected:g.activeSelected,onSelectPill:f??(()=>{}),rounded:!0,loading:g.isLoading})}),X&&(0,$.jsx)($e,{options:z,activeIndex:g.activeIndex,onSelect:o,onHighlight:p,listboxId:s,loading:g.isLoading}),J&&(0,$.jsx)("div",{className:ce.skeletonBars,"data-aia-skeleton-bars":"",children:bt.map(H=>(0,$.jsx)("span",{className:ce.skeletonBar,style:{width:H}},`bar-${H}`))}),(0,$.jsx)(Ke,{hasTabbedToHighlight:g.hasTabbedToHighlight,isOptionHighlighted:U,isInputEmpty:g.isInputEmpty})]})})}var ue=require("@magicx-eng/ai-autocomplete-vanilla");if(typeof document<"u"&&!document.getElementById("ac-style-fdee06e6")){let e=document.createElement("style");e.id="ac-style-fdee06e6",e.textContent=`.SubmitButton-module_submitButton_otz7H {
+`,document.head.appendChild(e)}var Qe=require("react/jsx-runtime");function Ue({space:e,align:t="stretch",className:o,children:p,...a}){let s=e?{"--aia-stack-space":e}:void 0;return(0,Qe.jsx)("div",{className:o?`aia-stack ${o}`:"aia-stack","data-align":t,style:s,...a,children:p})}var $=require("react/jsx-runtime"),bt=[159,119,164];function Ie({suggestions:e,activeIndex:t,onSelect:o,onHighlight:p,isOpen:a,id:s,className:l,pills:d,onPillClick:f,showPills:x=!0,activeSelected:L=!1,isLoading:P=!1,hasTabbedToHighlight:A=!1,isInputEmpty:C=!1,optionsPosition:v="below"}){let B=e[0]?.options??[],M=!!(d&&d.length>0&&f),N=a&&(B.length>0||x&&M||P),n={suggestions:e,activeIndex:t,pills:d,showPills:x,activeSelected:L,isLoading:P,hasTabbedToHighlight:A,isInputEmpty:C},_=(0,Xe.useRef)(n);N&&(_.current=n);let g=N?n:_.current,z=g.suggestions[0]?.options??[],U=g.activeIndex>=0&&!!z[g.activeIndex]?.is_tappable,K=!!(g.pills&&g.pills.length>0&&f),R=g.showPills&&K,Q=g.showPills&&!K&&g.isLoading,F=R||Q,X=z.length>0,J=g.isLoading&&!X;return(0,$.jsx)("div",{id:s,role:"listbox","data-aia-dropdown":"","data-options-position":v,"data-aia-loading":g.isLoading?"":void 0,className:`${ce.dropdown} ${N?ce.visible:""} ${l??""}`,onMouseDown:H=>H.preventDefault(),children:(0,$.jsxs)(Ue,{space:"8px",children:[F&&(0,$.jsx)(ge,{noWrap:!0,className:ce.pillBar,"data-aia-pillbar":"",children:(0,$.jsx)(_e,{pills:g.pills??[],activePillIndex:0,activeSelected:g.activeSelected,onSelectPill:f??(()=>{}),rounded:!0,loading:g.isLoading})}),X&&(0,$.jsx)($e,{options:z,activeIndex:g.activeIndex,onSelect:o,onHighlight:p,listboxId:s,loading:g.isLoading}),J&&(0,$.jsx)("div",{className:ce.skeletonBars,"data-aia-skeleton-bars":"",children:bt.map(H=>(0,$.jsx)("span",{className:ce.skeletonBar,style:{width:H}},`bar-${H}`))}),(0,$.jsx)(Ke,{hasTabbedToHighlight:g.hasTabbedToHighlight,isOptionHighlighted:U,isInputEmpty:g.isInputEmpty})]})})}var ue=require("@magicx-eng/ai-autocomplete-vanilla");if(typeof document<"u"&&!document.getElementById("ac-style-fdee06e6")){let e=document.createElement("style");e.id="ac-style-fdee06e6",e.textContent=`.SubmitButton-module_submitButton_otz7H {
   flex-shrink: 0;
   width: 32px;
   height: 32px;