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

package/dist/index.mjs

@@ -10,7 +10,7 @@ import{forwardRef as Tt,useCallback as Le,useEffect as at,useImperativeHandle as
 .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 @@ import{forwardRef as Tt,useCallback as Le,useEffect as at,useImperativeHandle as
   --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 @@ import{forwardRef as Tt,useCallback as Le,useEffect as at,useImperativeHandle as
   --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 @@ import{forwardRef as Tt,useCallback as Le,useEffect as at,useImperativeHandle as
   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 @@ import{forwardRef as Tt,useCallback as Le,useEffect as at,useImperativeHandle as
      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 @@ import{forwardRef as Tt,useCallback as Le,useEffect as at,useImperativeHandle as
   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 @@ import{forwardRef as Tt,useCallback as Le,useEffect as at,useImperativeHandle as
     justify-content: space-around;
   }
 }
-`,document.head.appendChild(e)}import{jsx as Me}from"react/jsx-runtime";function le({gap:e,align:c="center",justify:i="start",noWrap:u=!1,inline:r=!1,className:n,children:s,...l}){let g=e?{"--aia-cluster-gap":e}:void 0,b={className:n?`aia-cluster ${n}`:"aia-cluster","data-align":c,"data-justify":i,"data-nowrap":u||void 0,"data-inline":r||void 0,style:g,...l};return r?Me("span",{...b,children:s}):Me("div",{...b,children:s})}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)}import{jsx as Me}from"react/jsx-runtime";function le({gap:e,align:c="center",justify:i="start",noWrap:u=!1,inline:r=!1,className:n,children:s,...l}){let g=e?{"--aia-cluster-gap":e}:void 0,b={className:n?`aia-cluster ${n}`:"aia-cluster","data-align":c,"data-justify":i,"data-nowrap":u||void 0,"data-inline":r||void 0,style:g,...l};return r?Me("span",{...b,children:s}):Me("div",{...b,children:s})}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 @@ import{forwardRef as Tt,useCallback as Le,useEffect as at,useImperativeHandle as
   }
   /* data-align="stretch" is the flex default \u2014 no rule needed. */
 }
-`,document.head.appendChild(e)}import{jsx as _t}from"react/jsx-runtime";function Qe({space:e,align:c="stretch",className:i,children:u,...r}){let n=e?{"--aia-stack-space":e}:void 0;return _t("div",{className:i?`aia-stack ${i}`:"aia-stack","data-align":c,style:n,...r,children:u})}import{jsx as oe,jsxs as St}from"react/jsx-runtime";var kt=[159,119,164];function Ce({suggestions:e,activeIndex:c,onSelect:i,onHighlight:u,isOpen:r,id:n,className:s,pills:l,onPillClick:g,showPills:b=!0,activeSelected:D=!1,isLoading:k=!1,hasTabbedToHighlight:I=!1,isInputEmpty:S=!1,optionsPosition:x="below"}){let R=e[0]?.options??[],z=!!(l&&l.length>0&&g),F=r&&(R.length>0||b&&z||k),t={suggestions:e,activeIndex:c,pills:l,showPills:b,activeSelected:D,isLoading:k,hasTabbedToHighlight:I,isInputEmpty:S},w=It(t);F&&(w.current=t);let m=F?t:w.current,T=m.suggestions[0]?.options??[],G=m.activeIndex>=0&&!!T[m.activeIndex]?.is_tappable,H=!!(m.pills&&m.pills.length>0&&g),C=m.showPills&&H,j=m.showPills&&!H&&m.isLoading,L=C||j,V=T.length>0,q=m.isLoading&&!V;return oe("div",{id:n,role:"listbox","data-aia-dropdown":"","data-options-position":x,"data-aia-loading":m.isLoading?"":void 0,className:`${ne.dropdown} ${F?ne.visible:""} ${s??""}`,onMouseDown:B=>B.preventDefault(),children:St(Qe,{space:"2px",children:[L&&oe(le,{noWrap:!0,className:ne.pillBar,"data-aia-pillbar":"",children:oe(ve,{pills:m.pills??[],activePillIndex:0,activeSelected:m.activeSelected,onSelectPill:g??(()=>{}),rounded:!0,loading:m.isLoading})}),V&&oe(Ue,{options:T,activeIndex:m.activeIndex,onSelect:i,onHighlight:u,listboxId:n,loading:m.isLoading}),q&&oe("div",{className:ne.skeletonBars,"data-aia-skeleton-bars":"",children:kt.map(B=>oe("span",{className:ne.skeletonBar,style:{width:B}},`bar-${B}`))}),oe(Ne,{hasTabbedToHighlight:m.hasTabbedToHighlight,isOptionHighlighted:G,isInputEmpty:m.isInputEmpty})]})})}import{buildQuery as zt,ModeController as Ft,setCursorOffset as Ht}from"@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)}import{jsx as _t}from"react/jsx-runtime";function Qe({space:e,align:c="stretch",className:i,children:u,...r}){let n=e?{"--aia-stack-space":e}:void 0;return _t("div",{className:i?`aia-stack ${i}`:"aia-stack","data-align":c,style:n,...r,children:u})}import{jsx as oe,jsxs as St}from"react/jsx-runtime";var kt=[159,119,164];function Ce({suggestions:e,activeIndex:c,onSelect:i,onHighlight:u,isOpen:r,id:n,className:s,pills:l,onPillClick:g,showPills:b=!0,activeSelected:D=!1,isLoading:k=!1,hasTabbedToHighlight:I=!1,isInputEmpty:S=!1,optionsPosition:x="below"}){let R=e[0]?.options??[],z=!!(l&&l.length>0&&g),F=r&&(R.length>0||b&&z||k),t={suggestions:e,activeIndex:c,pills:l,showPills:b,activeSelected:D,isLoading:k,hasTabbedToHighlight:I,isInputEmpty:S},w=It(t);F&&(w.current=t);let m=F?t:w.current,T=m.suggestions[0]?.options??[],G=m.activeIndex>=0&&!!T[m.activeIndex]?.is_tappable,H=!!(m.pills&&m.pills.length>0&&g),C=m.showPills&&H,j=m.showPills&&!H&&m.isLoading,L=C||j,V=T.length>0,q=m.isLoading&&!V;return oe("div",{id:n,role:"listbox","data-aia-dropdown":"","data-options-position":x,"data-aia-loading":m.isLoading?"":void 0,className:`${ne.dropdown} ${F?ne.visible:""} ${s??""}`,onMouseDown:B=>B.preventDefault(),children:St(Qe,{space:"8px",children:[L&&oe(le,{noWrap:!0,className:ne.pillBar,"data-aia-pillbar":"",children:oe(ve,{pills:m.pills??[],activePillIndex:0,activeSelected:m.activeSelected,onSelectPill:g??(()=>{}),rounded:!0,loading:m.isLoading})}),V&&oe(Ue,{options:T,activeIndex:m.activeIndex,onSelect:i,onHighlight:u,listboxId:n,loading:m.isLoading}),q&&oe("div",{className:ne.skeletonBars,"data-aia-skeleton-bars":"",children:kt.map(B=>oe("span",{className:ne.skeletonBar,style:{width:B}},`bar-${B}`))}),oe(Ne,{hasTabbedToHighlight:m.hasTabbedToHighlight,isOptionHighlighted:G,isInputEmpty:m.isInputEmpty})]})})}import{buildQuery as zt,ModeController as Ft,setCursorOffset as Ht}from"@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;