@jamsrui/autocomplete 0.0.22 → 0.1.0

package/README.md

@@ -2,12 +2,11 @@
 
 **A comprehensive React UI component library designed for developers, with Tailwind CSS integration for seamless styling.**
 
-
 ## 📖 **Overview**
 
 [JamsrUI](https://jamsr-ui.jamsrworld.com) is designed to help developers build modern, fast and visually appealing web applications with ease.
 
-## 🚀 Getting Started 
+## 🚀 Getting Started
 
 Boost & Build your websites using [JamsrUI](https://jamsr-ui.jamsrworld.com).
 
@@ -37,4 +36,3 @@ We welcome contributions from developers of all skill levels!
 ## ⭐ Support the Project
 
 If you find **JamsrUI** helpful, consider giving it a ⭐ on [GitHub](https://github.com/jamsrworld/jamsr-ui).
-

package/dist/autocomplete-context.d.mts

@@ -1,13 +1,12 @@
 import * as react from 'react';
-import { u as useAutocomplete } from './autocomplete-Fn-_jn7o.mjs';
-import 'react/jsx-runtime';
+import { u as useAutocomplete } from './use-autocomplete-C-5IcNBN.mjs';
 import '@floating-ui/react';
 import '@jamsrui/input';
 import '@jamsrui/utils';
+import 'react/jsx-runtime';
 import './autocomplete-content.mjs';
 import './autocomplete-item.mjs';
 import './autocomplete-popover.mjs';
-import './styles.mjs';
 
 declare const useAutocompleteContext: () => AutocompleteContext.Props;
 declare const AutocompleteContext: react.Context<AutocompleteContext.Props | null>;

package/dist/autocomplete-item.mjs

@@ -1 +1 @@
-"use client";import{useListItem as I}from"@floating-ui/react";import{useHover as g,useMergeRefs as A,useRenderElement as P}from"@jamsrui/hooks";import{useAutocompleteContext as h}from"./autocomplete-context.mjs";const V=l=>{const{textValue:a,children:e,value:t,disabled:i,...n}=l,{getAutocompleteItemProps:c,activeIndex:d,value:m}=h(),s=a??(typeof e=="string"?e:t);s.length||console.warn(`No label provided for list item with value ${t}`);const{ref:p,index:u}=I({label:s}),o=i??!1,r=m.includes(t),f=d===u,{isHovered:v,ref:b}=g({isDisabled:o}),x=A([p,b]);return P("li",{props:[c(n),{ref:x,"aria-selected":r,"data-selected":r,"aria-disabled":o,"data-disabled":o,"data-active":f,"data-hovered":v,children:e}]})};export{V as AutocompleteItem};
+"use client";import{useListItem as x}from"@floating-ui/react";import{useHover as g,useMergeRefs as A,useRenderElement as L}from"@jamsrui/hooks";import{useAutocompleteContext as P}from"./autocomplete-context.mjs";const M=l=>{const{textValue:a,children:e,value:t,disabled:i,...n}=l,{getAutocompleteItemProps:c,activeIndex:d,value:m}=P(),s=a??(typeof e=="string"?e:t);s.length||console.warn(`No label provided for list item with value ${t}`);const{ref:p,index:u}=x({label:s}),o=i??!1,r=m.includes(t),f=d===u,{isHovered:v,ref:I}=g({isDisabled:o}),b=A([p,I]);return L("li",{props:[c(n),{ref:b,"aria-selected":r,"data-selected":r,"aria-disabled":o,"data-disabled":o,"data-active":f,"data-hovered":v,children:e}]})};export{M as AutocompleteItem};

package/dist/autocomplete.d.mts

@@ -1,5 +1,5 @@
 import 'react/jsx-runtime';
-export { A as Autocomplete } from './autocomplete-Fn-_jn7o.mjs';
+export { A as Autocomplete } from './use-autocomplete-C-5IcNBN.mjs';
 import '@floating-ui/react';
 import '@jamsrui/input';
 import '@jamsrui/utils';
@@ -7,4 +7,3 @@ import 'react';
 import './autocomplete-content.mjs';
 import './autocomplete-item.mjs';
 import './autocomplete-popover.mjs';
-import './styles.mjs';

package/dist/autocomplete.mjs

@@ -1 +1 @@
-"use client";import{Fragment as x,jsx as o,jsxs as v}from"react/jsx-runtime";import{useRenderElement as l}from"@jamsrui/hooks";import{Input as i}from"@jamsrui/input";import{mergeConfigProps as f}from"@jamsrui/utils";import{useAutocompleteConfig as A}from"./autocomplete-config.mjs";import{AutocompleteContent as d}from"./autocomplete-content.mjs";import{AutocompleteContext as P}from"./autocomplete-context.mjs";import{AutocompletePopover as g}from"./autocomplete-popover.mjs";import{useAutocomplete as C}from"./use-autocomplete.mjs";const w=e=>{const{children:p}=e,t=A(),m=f(t,t,e),r=C(m),{getRootProps:n,getInputProps:c}=r,s=v(x,{children:[o(i,{...c({})}),o(g,{children:o(d,{children:p})})]}),u=l("div",{props:[n({}),{children:s}]});return o(P,{value:r,children:u})};export{w as Autocomplete};
+"use client";import{Fragment as f,jsx as o,jsxs as P}from"react/jsx-runtime";import{useRenderElement as l}from"@jamsrui/hooks";import{Input as u}from"@jamsrui/input";import{AutocompleteContent as s}from"./autocomplete-content.mjs";import{AutocompleteContext as i}from"./autocomplete-context.mjs";import{AutocompletePopover as A}from"./autocomplete-popover.mjs";import{useAutocomplete as d}from"./use-autocomplete.mjs";const E=e=>{const{children:p}=e,t=d(e),{getRootProps:r,getInputProps:m}=t,n=P(f,{children:[o(u,{...m({})}),o(A,{children:o(s,{children:p})})]}),c=l("div",{props:[r({}),{children:n}]});return o(i,{value:t,children:c})};export{E as Autocomplete};

package/dist/index.d.mts

@@ -1,17 +1,12 @@
 import * as react from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { A as Autocomplete$1 } from './autocomplete-Fn-_jn7o.mjs';
-export { u as useAutocomplete } from './autocomplete-Fn-_jn7o.mjs';
-import { AutocompleteConfig } from './autocomplete-config.mjs';
-export { useAutocompleteConfig } from './autocomplete-config.mjs';
+import { A as Autocomplete$1 } from './use-autocomplete-C-5IcNBN.mjs';
 import { AutocompleteItem } from './autocomplete-item.mjs';
-export { AutocompleteSlots, AutocompleteVariantProps, autocompleteVariants } from './styles.mjs';
 import '@floating-ui/react';
 import '@jamsrui/input';
 import '@jamsrui/utils';
 import './autocomplete-content.mjs';
 import './autocomplete-popover.mjs';
-import '@jamsrui/core';
 
 declare const Autocomplete: ((props: Autocomplete$1.Props) => react_jsx_runtime.JSX.Element) & {
     Item: (props: AutocompleteItem.Props) => react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
@@ -19,10 +14,8 @@ declare const Autocomplete: ((props: Autocomplete$1.Props) => react_jsx_runtime.
 declare namespace Autocomplete {
     interface Props extends Autocomplete$1.Props {
     }
-    interface Config extends AutocompleteConfig.Props {
-    }
     interface Item extends AutocompleteItem.Props {
     }
 }
 
-export { Autocomplete, AutocompleteConfig, AutocompleteItem };
+export { Autocomplete };

package/dist/index.mjs

@@ -1 +1 @@
-import{Autocomplete as t}from"./autocomplete.mjs";import{AutocompleteConfig as e,useAutocompleteConfig as p}from"./autocomplete-config.mjs";import{AutocompleteItem as o}from"./autocomplete-item.mjs";import{autocompleteVariants as m}from"./styles.mjs";import{useAutocomplete as r}from"./use-autocomplete.mjs";const a=Object.assign(t,{Item:o});export{a as Autocomplete,e as AutocompleteConfig,o as AutocompleteItem,m as autocompleteVariants,r as useAutocomplete,p as useAutocompleteConfig};
+import{Autocomplete as e}from"./autocomplete.mjs";import{AutocompleteItem as t}from"./autocomplete-item.mjs";const m=Object.assign(e,{Item:t});export{m as Autocomplete};

package/dist/{autocomplete-Fn-_jn7o.d.mts → use-autocomplete-C-5IcNBN.d.mts}

@@ -1,12 +1,17 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { FloatingList, FloatingFocusManagerProps, Placement } from '@floating-ui/react';
 import { Input } from '@jamsrui/input';
-import { PropGetter, SlotsToClassNames } from '@jamsrui/utils';
+import { PropGetter } from '@jamsrui/utils';
 import { ComponentProps } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import { AutocompleteContent } from './autocomplete-content.mjs';
 import { AutocompleteItem } from './autocomplete-item.mjs';
 import { AutocompletePopover } from './autocomplete-popover.mjs';
-import { AutocompleteSlots, AutocompleteVariantProps } from './styles.mjs';
+
+declare const Autocomplete: (props: Autocomplete.Props) => react_jsx_runtime.JSX.Element;
+declare namespace Autocomplete {
+    interface Props extends useAutocomplete.Props {
+    }
+}
 
 declare const useAutocomplete: (props: useAutocomplete.Props) => {
     getAutocompleteItemProps: PropGetter<AutocompleteItem.Props>;
@@ -22,7 +27,6 @@ declare const useAutocomplete: (props: useAutocomplete.Props) => {
 };
 declare namespace useAutocomplete {
     interface InnerProps {
-        classNames?: SlotsToClassNames<AutocompleteSlots>;
         value?: string[];
         defaultValue?: string[];
         onValueChange?: (value: string[]) => void;
@@ -32,15 +36,9 @@ declare namespace useAutocomplete {
         onOpenChange?: (value: boolean) => void;
         isMultiple?: boolean;
     }
-    export interface Props extends Omit<Input.Props, keyof InnerProps>, AutocompleteVariantProps, InnerProps {
+    export interface Props extends Omit<Input.Props, keyof InnerProps>, InnerProps {
     }
     export {  };
 }
 
-declare const Autocomplete: (props: Autocomplete.Props) => react_jsx_runtime.JSX.Element;
-declare namespace Autocomplete {
-    interface Props extends useAutocomplete.Props {
-    }
-}
-
 export { Autocomplete as A, useAutocomplete as u };

package/dist/use-autocomplete.d.mts

@@ -2,9 +2,8 @@ import '@floating-ui/react';
 import '@jamsrui/input';
 import '@jamsrui/utils';
 import 'react';
-export { u as useAutocomplete } from './autocomplete-Fn-_jn7o.mjs';
+export { u as useAutocomplete } from './use-autocomplete-C-5IcNBN.mjs';
 import './autocomplete-content.mjs';
 import './autocomplete-item.mjs';
 import './autocomplete-popover.mjs';
-import './styles.mjs';
 import 'react/jsx-runtime';

package/dist/use-autocomplete.mjs

@@ -1 +1 @@
-"use client";import{useCallback as s,useMemo as B,useRef as J,useState as c}from"react";import{autoUpdate as Q,flip as X,offset as Y,size as Z,useDismiss as _,useFloating as ee,useInteractions as te,useListNavigation as oe,useRole as se}from"@floating-ui/react";import{useControlledState as M}from"@jamsrui/hooks";import{cn as r,dataAttrDev as a,mapPropsVariants as ne}from"@jamsrui/utils";import{autocompleteVariants as V}from"./styles.mjs";const ge=S=>{const[R,G]=ne(S,V.variantKeys),{classNames:t,isOpen:L,defaultOpen:T,onOpenChange:j,value:k,defaultValue:w,onValueChange:D,placement:u="bottom-start",isMultiple:ae,...p}=R,P=J([]),[l,H]=c(null),[$,re]=c(1),[pe,E]=c(!1),[m=!1,i]=M({defaultProp:T,onChange:j,prop:L}),[d=[],le]=M({defaultProp:w,onChange:D,prop:k}),{refs:{setReference:g,setFloating:f},floatingStyles:v,context:n}=ee({placement:u,open:m,onOpenChange:i,whileElementsMounted:Q,middleware:[Y(2),X({crossAxis:u.includes("-"),padding:0}),Z({apply({rects:e,elements:U,availableHeight:q}){Object.assign(U.floating.style,{maxHeight:`${Math.max(50,Math.min(400,q))}px`,minWidth:`${e.reference.width}px`})},padding:0})]}),W=oe(n,{listRef:P,activeIndex:l,selectedIndex:$,onNavigate:H,virtual:!0,loop:!0}),z=_(n,{outsidePress:!0}),K=se(n,{role:"listbox"}),{getReferenceProps:y,getFloatingProps:A,getItemProps:me}=te([W,z,K]),N=s(()=>{E(!0),i(e=>!e)},[i]),o=V(G),I=s(()=>({...p,"data-component":a("autocomplete"),"data-slot":a("root"),className:o.root({className:r(t?.root,p.className)})}),[t?.root,p,o]),C=s(e=>({...e,"data-slot":a("item"),className:o.item({className:r(t?.item,e.className)})}),[t?.item,o]),h=s(e=>({...e,"data-slot":a("popover"),className:o.popover({className:r(t?.popover,e.className)}),style:v,...A({}),ref:f}),[t?.popover,v,A,f,o]),x=s(e=>({...e,"data-slot":a("content"),className:o.content({className:r(t?.content,e.className)})}),[t?.content,o]),F=s(()=>({context:n,initialFocus:-1,visuallyHiddenDismiss:!0,modal:!0,restoreFocus:!0}),[n]),O=s(()=>({elementsRef:P}),[]),b=s(e=>({...e,...y({}),slotProps:{contentWrapper:{ref:g,onClick:N}}}),[y,N,g]);return B(()=>({getAutocompleteItemProps:C,getRootProps:I,getInputProps:b,getContentProps:x,getPopoverProps:h,getFloatingListProps:O,getFocusManagerProps:F,isOpen:m,activeIndex:l,value:d}),[l,C,x,O,F,b,h,I,m,d])};export{ge as useAutocomplete};
+"use client";import{useCallback as t,useMemo as T,useRef as $,useState as r}from"react";import{autoUpdate as z,flip as U,offset as W,size as q,useDismiss as B,useFloating as J,useInteractions as K,useListNavigation as Q,useRole as X}from"@floating-ui/react";import{useControlledState as F}from"@jamsrui/hooks";const pe=O=>{const{isOpen:A,defaultOpen:C,onOpenChange:b,value:M,defaultValue:R,onValueChange:G,placement:l="bottom-start",isMultiple:Y,...a}=O,i=$([]),[n,L]=r(null),[V,Z]=r(1),[_,S]=r(!1),[s=!1,p]=F({defaultProp:C,onChange:b,prop:A}),[u=[],ee]=F({defaultProp:R,onChange:G,prop:M}),{refs:{setReference:j,setFloating:m},floatingStyles:c,context:o}=J({placement:l,open:s,onOpenChange:p,whileElementsMounted:z,middleware:[W(2),U({crossAxis:l.includes("-"),padding:0}),q({apply({rects:e,elements:D,availableHeight:E}){Object.assign(D.floating.style,{maxHeight:`${Math.max(50,Math.min(400,E))}px`,minWidth:`${e.reference.width}px`})},padding:0})]}),w=Q(o,{listRef:i,activeIndex:n,selectedIndex:V,onNavigate:L,virtual:!0,loop:!0}),H=B(o,{outsidePress:!0}),N=X(o,{role:"listbox"}),{getReferenceProps:d,getFloatingProps:g,getItemProps:te}=K([w,H,N]),k=t(()=>{S(!0),p(e=>!e)},[p]),P=t(()=>({...a,"data-component":"autocomplete","data-slot":"root"}),[a]),f=t(e=>({...e,"data-slot":"item"}),[]),v=t(e=>({...e,"data-slot":"popover",style:c,...g({}),ref:m}),[c,g,m]),I=t(e=>({...e,"data-slot":"content"}),[]),h=t(()=>({context:o,initialFocus:-1,visuallyHiddenDismiss:!0,modal:!0,restoreFocus:!0}),[o]),x=t(()=>({elementsRef:i}),[]),y=t(e=>({...e,...d({})}),[d,k,j]);return T(()=>({getAutocompleteItemProps:f,getRootProps:P,getInputProps:y,getContentProps:I,getPopoverProps:v,getFloatingListProps:x,getFocusManagerProps:h,isOpen:s,activeIndex:n,value:u}),[n,f,I,x,h,y,v,P,s,u])};export{pe as useAutocomplete};

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@jamsrui/autocomplete",
-  "version": "0.0.22",
+  "version": "0.1.0",
   "peerDependencies": {
     "motion": ">=12",
     "react": ">=19"
   },
   "dependencies": {
     "@floating-ui/react": ">=0.27",
-    "@jamsrui/hooks": "^0.0.19",
-    "@jamsrui/utils": "^0.0.19",
-    "@jamsrui/input": "^0.0.22",
-    "@jamsrui/core": "^0.0.15"
+    "@jamsrui/hooks": "^0.1.0",
+    "@jamsrui/input": "^0.1.0",
+    "@jamsrui/utils": "^0.1.0",
+    "@jamsrui/core": "^0.1.0"
   },
   "exports": {
     ".": {

package/dist/autocomplete-config.d.mts

@@ -1,23 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { WithGlobalConfig } from '@jamsrui/core';
-import { A as Autocomplete } from './autocomplete-Fn-_jn7o.mjs';
-import '@floating-ui/react';
-import '@jamsrui/input';
-import '@jamsrui/utils';
-import 'react';
-import './autocomplete-content.mjs';
-import './autocomplete-item.mjs';
-import './autocomplete-popover.mjs';
-import './styles.mjs';
-
-declare const useAutocompleteConfig: () => AutocompleteConfig.Props;
-declare const AutocompleteConfig: (props: Omit<Partial<AutocompleteConfig.Props>, "children"> & {
-    merge?: boolean;
-    children: React.ReactNode;
-}) => react_jsx_runtime.JSX.Element;
-declare namespace AutocompleteConfig {
-    interface Props extends WithGlobalConfig<Autocomplete.Props> {
-    }
-}
-
-export { AutocompleteConfig, useAutocompleteConfig };

package/dist/autocomplete-config.mjs

@@ -1 +0,0 @@
-"use client";import{createConfigContext as o}from"@jamsrui/utils";const[t,p]=o({displayName:"AutocompleteConfig"});export{t as AutocompleteConfig,p as useAutocompleteConfig};

package/dist/styles.d.mts

@@ -1,59 +0,0 @@
-import * as _jamsrui_utils from '@jamsrui/utils';
-import { VariantProps } from '@jamsrui/utils';
-
-declare const autocompleteVariants: _jamsrui_utils.TVReturnType<{
-    radius: {
-        sm: {};
-        md: {};
-        lg: {};
-        xl: {};
-        "2xl": {};
-        "3xl": {};
-        full: {};
-        none: {};
-    };
-}, {
-    root: string[];
-    popover: string;
-    content: string;
-    emptyContent: string;
-    item: string[];
-}, undefined, {
-    radius: {
-        sm: {};
-        md: {};
-        lg: {};
-        xl: {};
-        "2xl": {};
-        "3xl": {};
-        full: {};
-        none: {};
-    };
-}, {
-    root: string[];
-    popover: string;
-    content: string;
-    emptyContent: string;
-    item: string[];
-}, _jamsrui_utils.TVReturnType<{
-    radius: {
-        sm: {};
-        md: {};
-        lg: {};
-        xl: {};
-        "2xl": {};
-        "3xl": {};
-        full: {};
-        none: {};
-    };
-}, {
-    root: string[];
-    popover: string;
-    content: string;
-    emptyContent: string;
-    item: string[];
-}, undefined, unknown, unknown, undefined>>;
-type AutocompleteSlots = keyof ReturnType<typeof autocompleteVariants>;
-type AutocompleteVariantProps = VariantProps<typeof autocompleteVariants>;
-
-export { type AutocompleteSlots, type AutocompleteVariantProps, autocompleteVariants };

package/dist/styles.mjs

@@ -1 +0,0 @@
-import{radiusVariant as e,tv as o}from"@jamsrui/utils";const r=o({slots:{root:["group relative flex w-full flex-col text-sm"],popover:"z-popover flex flex-col overflow-hidden rounded-2xl bg-surface shadow-md backdrop-blur-3xl focus:outline-none",content:"flex flex-col gap-px overflow-y-auto p-2",emptyContent:"text-foreground-500",item:["relative flex w-full cursor-pointer select-none items-center gap-2 rounded-xl p-2 text-sm","ui-hover:bg-surface-secondary","ui-active:bg-surface-secondary","ui-selected:bg-surface-secondary/50","ui-disabled:cursor-not-allowed ui-disabled:opacity-disabled"]},variants:{radius:e(["popover","item"])},defaultVariants:{radius:"md"}});export{r as autocompleteVariants};