@rubenpazch/autocomplete 2.0.5 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/Autocomplete.d.ts.map +1 -1
  2. package/dist/index.cjs.js +82 -79
  3. package/dist/index.esm.js +82 -79
  4. package/package.json +6 -4
package/dist/Autocomplete.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../src/Autocomplete.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAChC;AAED,UAAU,iBAAiB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC9B,QAAQ,EAAE,CACR,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,EAC7B,MAAM,CAAC,EAAE,kBAAkB,KACxB,IAAI,CAAC;IACV,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,CACb,MAAM,EAAE,kBAAkB,EAC1B,UAAU,EAAE,OAAO,KAChB,KAAK,CAAC,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;CAC7B;AAgCD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA4c7C,CAAC;AAEF,eAAe,YAAY,CAAC"}
1
+ {"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../src/Autocomplete.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAChC;AAED,UAAU,iBAAiB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC9B,QAAQ,EAAE,CACR,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,EAC7B,MAAM,CAAC,EAAE,kBAAkB,KACxB,IAAI,CAAC;IACV,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,CACb,MAAM,EAAE,kBAAkB,EAC1B,UAAU,EAAE,OAAO,KAChB,KAAK,CAAC,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;CAC7B;AA6BD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAkc7C,CAAC;AAEF,eAAe,YAAY,CAAC"}
package/dist/index.cjs.js CHANGED
@@ -857,6 +857,40 @@ function requireJsxRuntime () {
857
857
 
858
858
  var jsxRuntimeExports = requireJsxRuntime();
859
859
 
860
+ function styleInject$1(css, ref) {
861
+ if ( ref === void 0 ) ref = {};
862
+ var insertAt = ref.insertAt;
863
+
864
+ if (typeof document === 'undefined') { return; }
865
+
866
+ var head = document.head || document.getElementsByTagName('head')[0];
867
+ var style = document.createElement('style');
868
+ style.type = 'text/css';
869
+
870
+ if (insertAt === 'top') {
871
+ if (head.firstChild) {
872
+ head.insertBefore(style, head.firstChild);
873
+ } else {
874
+ head.appendChild(style);
875
+ }
876
+ } else {
877
+ head.appendChild(style);
878
+ }
879
+
880
+ if (style.styleSheet) {
881
+ style.styleSheet.cssText = css;
882
+ } else {
883
+ style.appendChild(document.createTextNode(css));
884
+ }
885
+ }
886
+
887
+ var css_248z$1 = "/* Container */\n.LoadingSpinner-module_container__PHl1j {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.LoadingSpinner-module_containerInline__eD4FZ {\n display: inline-flex;\n}\n\n/* Inner wrapper */\n.LoadingSpinner-module_inner__SvATp {\n text-align: center;\n}\n\n.LoadingSpinner-module_innerInline__MPS3Y {\n display: inline-flex;\n}\n\n/* Spinner base */\n.LoadingSpinner-module_spinner__vu6Ri {\n border-radius: 9999px;\n border-width: 2px;\n animation: LoadingSpinner-module_spin__vEieX 1s linear infinite;\n}\n\n/* Sizes */\n.LoadingSpinner-module_sizeSm__tL-IR {\n height: 1rem;\n width: 1rem;\n}\n\n.LoadingSpinner-module_sizeMd__AT592 {\n height: 2rem;\n width: 2rem;\n}\n\n.LoadingSpinner-module_sizeLg__jyX27 {\n height: 3rem;\n width: 3rem;\n}\n\n/* Colors - spinner */\n.LoadingSpinner-module_colorBlue__Jtuu1 {\n border-color: #2563eb;\n}\n\n.LoadingSpinner-module_colorGray__-EMqs {\n border-color: #4b5563;\n}\n\n.LoadingSpinner-module_colorWhite__95Hoo {\n border-color: #ffffff;\n}\n\n/* Spinner transparent borders */\n.LoadingSpinner-module_spinnerTransparent__G3zcb {\n border-top-color: transparent;\n border-right-color: transparent;\n}\n\n/* Spacing */\n.LoadingSpinner-module_spacingDefault__8At6H {\n margin: 0 auto 1rem auto;\n}\n\n/* Dots container */\n.LoadingSpinner-module_dotsContainer__l3FsV {\n display: flex;\n gap: 0.25rem;\n}\n\n.LoadingSpinner-module_dotsContainerInline__Kl4Fz {\n display: flex;\n gap: 0.25rem;\n}\n\n/* Dot sizes */\n.LoadingSpinner-module_dotSizeSm__YuBra {\n height: 0.375rem;\n width: 0.375rem;\n}\n\n.LoadingSpinner-module_dotSizeMd__rXeyS {\n height: 0.625rem;\n width: 0.625rem;\n}\n\n.LoadingSpinner-module_dotSizeLg__M8etz {\n height: 0.875rem;\n width: 0.875rem;\n}\n\n/* Dot colors */\n.LoadingSpinner-module_dotColorBlue__5evmc {\n background-color: #2563eb;\n}\n\n.LoadingSpinner-module_dotColorGray__dr80J {\n background-color: #4b5563;\n}\n\n.LoadingSpinner-module_dotColorWhite__54ur- {\n background-color: #ffffff;\n}\n\n/* Dot */\n.LoadingSpinner-module_dot__tz0lA {\n border-radius: 9999px;\n animation: LoadingSpinner-module_bounce__7Raih 1s ease-in-out infinite;\n}\n\n.LoadingSpinner-module_dotDelay1__-94Os {\n animation-delay: 0ms;\n}\n\n.LoadingSpinner-module_dotDelay2__Oy8E- {\n animation-delay: 150ms;\n}\n\n.LoadingSpinner-module_dotDelay3__7EZYH {\n animation-delay: 300ms;\n}\n\n/* Pulse */\n.LoadingSpinner-module_pulse__gKUHJ {\n border-radius: 9999px;\n animation: LoadingSpinner-module_pulse__gKUHJ 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n/* Ring */\n.LoadingSpinner-module_ringContainer__4p8NG {\n position: relative;\n}\n\n.LoadingSpinner-module_ringBackground__aF2w1 {\n position: absolute;\n inset: 0;\n border-radius: 9999px;\n border-width: 2px;\n opacity: 0.25;\n}\n\n.LoadingSpinner-module_ringSpinner__b92-S {\n position: absolute;\n inset: 0;\n border-radius: 9999px;\n border-width: 2px;\n border-color: transparent;\n animation: LoadingSpinner-module_spin__vEieX 1s linear infinite;\n}\n\n.LoadingSpinner-module_ringSpinnerBlue__zGTgw {\n border-top-color: #2563eb;\n}\n\n.LoadingSpinner-module_ringSpinnerGray__kHnkJ {\n border-top-color: #4b5563;\n}\n\n.LoadingSpinner-module_ringSpinnerWhite__yu8d0 {\n border-top-color: #ffffff;\n}\n\n.LoadingSpinner-module_ringTransparent__DTSbu {\n border-right-color: transparent;\n border-bottom-color: transparent;\n border-left-color: transparent;\n}\n\n/* Message */\n.LoadingSpinner-module_message__FoOvh {\n color: #4b5563;\n font-size: 0.875rem;\n line-height: 1.25rem;\n margin-top: 0.5rem;\n}\n\n/* Animations */\n@keyframes LoadingSpinner-module_spin__vEieX {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n@keyframes LoadingSpinner-module_bounce__7Raih {\n 0%,\n 100% {\n transform: translateY(0);\n animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n }\n 50% {\n transform: translateY(-25%);\n animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\n }\n}\n\n@keyframes LoadingSpinner-module_pulse__gKUHJ {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.5;\n }\n}\n";
888
+ var styles$1 = {"container":"LoadingSpinner-module_container__PHl1j","containerInline":"LoadingSpinner-module_containerInline__eD4FZ","inner":"LoadingSpinner-module_inner__SvATp","innerInline":"LoadingSpinner-module_innerInline__MPS3Y","spinner":"LoadingSpinner-module_spinner__vu6Ri","spin":"LoadingSpinner-module_spin__vEieX","sizeSm":"LoadingSpinner-module_sizeSm__tL-IR","sizeMd":"LoadingSpinner-module_sizeMd__AT592","sizeLg":"LoadingSpinner-module_sizeLg__jyX27","colorBlue":"LoadingSpinner-module_colorBlue__Jtuu1","colorGray":"LoadingSpinner-module_colorGray__-EMqs","colorWhite":"LoadingSpinner-module_colorWhite__95Hoo","spinnerTransparent":"LoadingSpinner-module_spinnerTransparent__G3zcb","spacingDefault":"LoadingSpinner-module_spacingDefault__8At6H","dotsContainer":"LoadingSpinner-module_dotsContainer__l3FsV","dotsContainerInline":"LoadingSpinner-module_dotsContainerInline__Kl4Fz","dotSizeSm":"LoadingSpinner-module_dotSizeSm__YuBra","dotSizeMd":"LoadingSpinner-module_dotSizeMd__rXeyS","dotSizeLg":"LoadingSpinner-module_dotSizeLg__M8etz","dotColorBlue":"LoadingSpinner-module_dotColorBlue__5evmc","dotColorGray":"LoadingSpinner-module_dotColorGray__dr80J","dotColorWhite":"LoadingSpinner-module_dotColorWhite__54ur-","dot":"LoadingSpinner-module_dot__tz0lA","bounce":"LoadingSpinner-module_bounce__7Raih","dotDelay1":"LoadingSpinner-module_dotDelay1__-94Os","dotDelay2":"LoadingSpinner-module_dotDelay2__Oy8E-","dotDelay3":"LoadingSpinner-module_dotDelay3__7EZYH","pulse":"LoadingSpinner-module_pulse__gKUHJ","ringContainer":"LoadingSpinner-module_ringContainer__4p8NG","ringBackground":"LoadingSpinner-module_ringBackground__aF2w1","ringSpinner":"LoadingSpinner-module_ringSpinner__b92-S","ringSpinnerBlue":"LoadingSpinner-module_ringSpinnerBlue__zGTgw","ringSpinnerGray":"LoadingSpinner-module_ringSpinnerGray__kHnkJ","ringSpinnerWhite":"LoadingSpinner-module_ringSpinnerWhite__yu8d0","ringTransparent":"LoadingSpinner-module_ringTransparent__DTSbu","message":"LoadingSpinner-module_message__FoOvh"};
889
+ styleInject$1(css_248z$1);
890
+
891
+ function classNames$1(...classes) {
892
+ return classes.filter(Boolean).join(" ");
893
+ }
860
894
  /**
861
895
  * LoadingSpinner component
862
896
  * Displays a loading indicator with multiple style variants
@@ -866,65 +900,69 @@ var jsxRuntimeExports = requireJsxRuntime();
866
900
  * @param color - Color scheme: 'blue' (default), 'gray', 'white'
867
901
  */
868
902
  const LoadingSpinner = ({ message, size = "md", className = "", variant = "spinner", inline = false, color = "blue", }) => {
869
- const sizeClasses = {
870
- sm: "h-4 w-4",
871
- md: "h-8 w-8",
872
- lg: "h-12 w-12",
873
- };
874
- const colorClasses = {
875
- blue: "border-blue-600",
876
- gray: "border-gray-600",
877
- white: "border-white",
878
- };
879
- const dotColorClasses = {
880
- blue: "bg-blue-600",
881
- gray: "bg-gray-600",
882
- white: "bg-white",
883
- };
884
- const dotSizeClasses = {
885
- sm: "h-1.5 w-1.5",
886
- md: "h-2.5 w-2.5",
887
- lg: "h-3.5 w-3.5",
888
- };
903
+ const sizeClass = styles$1[`size${size.charAt(0).toUpperCase() + size.slice(1)}`];
904
+ const colorClass = styles$1[`color${color.charAt(0).toUpperCase() + color.slice(1)}`];
905
+ const dotColorClass = styles$1[`dotColor${color.charAt(0).toUpperCase() + color.slice(1)}`];
906
+ const dotSizeClass = styles$1[`dotSize${size.charAt(0).toUpperCase() + size.slice(1)}`];
889
907
  // Spinner variant (circular border)
890
908
  if (variant === "spinner") {
891
- return (jsxRuntimeExports.jsx("div", { className: inline ? className : `flex justify-center items-center ${className}`, children: jsxRuntimeExports.jsxs("div", { className: inline ? "" : "text-center", children: [jsxRuntimeExports.jsx("div", { className: `animate-spin rounded-full border-2 ${colorClasses[color]} ${sizeClasses[size]} ${inline ? "" : "mx-auto mb-4"}`, style: {
892
- borderTopColor: "transparent",
893
- borderRightColor: "transparent",
894
- } }), message && jsxRuntimeExports.jsx("p", { className: "text-gray-600 text-sm mt-2", children: message })] }) }));
909
+ return (jsxRuntimeExports.jsx("div", { className: classNames$1(inline ? styles$1.containerInline : styles$1.container, className), "data-testid": "loading-spinner", "data-variant": variant, "data-size": size, "data-color": color, children: jsxRuntimeExports.jsxs("div", { className: inline ? styles$1.innerInline : styles$1.inner, children: [jsxRuntimeExports.jsx("div", { className: classNames$1(styles$1.spinner, styles$1.spinnerTransparent, colorClass, sizeClass, !inline ? styles$1.spacingDefault : undefined) }), message && jsxRuntimeExports.jsx("p", { className: styles$1.message, children: message })] }) }));
895
910
  }
896
911
  // Dots variant (three bouncing dots)
897
912
  if (variant === "dots") {
898
- return (jsxRuntimeExports.jsx("div", { className: inline ? className : `flex justify-center items-center ${className}`, children: jsxRuntimeExports.jsxs("div", { className: inline ? "flex gap-1" : "text-center", children: [jsxRuntimeExports.jsxs("div", { className: `flex gap-1 ${inline ? "" : "mx-auto mb-4"}`, children: [jsxRuntimeExports.jsx("div", { className: `${dotSizeClasses[size]} ${dotColorClasses[color]} rounded-full animate-bounce`, style: { animationDelay: "0ms" } }), jsxRuntimeExports.jsx("div", { className: `${dotSizeClasses[size]} ${dotColorClasses[color]} rounded-full animate-bounce`, style: { animationDelay: "150ms" } }), jsxRuntimeExports.jsx("div", { className: `${dotSizeClasses[size]} ${dotColorClasses[color]} rounded-full animate-bounce`, style: { animationDelay: "300ms" } })] }), message && jsxRuntimeExports.jsx("p", { className: "text-gray-600 text-sm mt-2", children: message })] }) }));
913
+ return (jsxRuntimeExports.jsx("div", { className: classNames$1(inline ? styles$1.containerInline : styles$1.container, className), "data-testid": "loading-spinner", "data-variant": variant, "data-size": size, "data-color": color, children: jsxRuntimeExports.jsxs("div", { className: inline ? styles$1.innerInline : styles$1.inner, children: [jsxRuntimeExports.jsxs("div", { className: classNames$1(inline ? styles$1.dotsContainerInline : styles$1.dotsContainer, !inline ? styles$1.spacingDefault : undefined), children: [jsxRuntimeExports.jsx("div", { className: classNames$1(styles$1.dot, dotSizeClass, dotColorClass, styles$1.dotDelay1) }), jsxRuntimeExports.jsx("div", { className: classNames$1(styles$1.dot, dotSizeClass, dotColorClass, styles$1.dotDelay2) }), jsxRuntimeExports.jsx("div", { className: classNames$1(styles$1.dot, dotSizeClass, dotColorClass, styles$1.dotDelay3) })] }), message && jsxRuntimeExports.jsx("p", { className: styles$1.message, children: message })] }) }));
899
914
  }
900
915
  // Pulse variant (pulsing circle)
901
916
  if (variant === "pulse") {
902
- return (jsxRuntimeExports.jsx("div", { className: inline ? className : `flex justify-center items-center ${className}`, children: jsxRuntimeExports.jsxs("div", { className: inline ? "" : "text-center", children: [jsxRuntimeExports.jsx("div", { className: `${sizeClasses[size]} ${dotColorClasses[color]} rounded-full animate-pulse ${inline ? "" : "mx-auto mb-4"}` }), message && jsxRuntimeExports.jsx("p", { className: "text-gray-600 text-sm mt-2", children: message })] }) }));
917
+ return (jsxRuntimeExports.jsx("div", { className: classNames$1(inline ? styles$1.containerInline : styles$1.container, className), "data-testid": "loading-spinner", "data-variant": variant, "data-size": size, "data-color": color, children: jsxRuntimeExports.jsxs("div", { className: inline ? styles$1.innerInline : styles$1.inner, children: [jsxRuntimeExports.jsx("div", { className: classNames$1(styles$1.pulse, sizeClass, dotColorClass, !inline ? styles$1.spacingDefault : undefined) }), message && jsxRuntimeExports.jsx("p", { className: styles$1.message, children: message })] }) }));
903
918
  }
904
919
  // Ring variant (rotating ring with gradient)
905
920
  if (variant === "ring") {
906
- const ringColorMap = {
907
- blue: "border-blue-600",
908
- gray: "border-gray-600",
909
- white: "border-white",
910
- };
911
- return (jsxRuntimeExports.jsx("div", { className: inline ? className : `flex justify-center items-center ${className}`, children: jsxRuntimeExports.jsxs("div", { className: inline ? "" : "text-center", children: [jsxRuntimeExports.jsxs("div", { className: `relative ${sizeClasses[size]} ${inline ? "" : "mx-auto mb-4"}`, children: [jsxRuntimeExports.jsx("div", { className: `absolute inset-0 rounded-full border-2 ${colorClasses[color]} opacity-25` }), jsxRuntimeExports.jsx("div", { className: `absolute inset-0 rounded-full border-2 border-transparent ${ringColorMap[color]} animate-spin`, style: {
912
- borderTopColor: "currentColor",
913
- borderRightColor: "transparent",
914
- borderBottomColor: "transparent",
915
- borderLeftColor: "transparent",
916
- } })] }), message && jsxRuntimeExports.jsx("p", { className: "text-gray-600 text-sm mt-2", children: message })] }) }));
921
+ const ringSpinnerColorClass = styles$1[`ringSpinner${color.charAt(0).toUpperCase() + color.slice(1)}`];
922
+ return (jsxRuntimeExports.jsx("div", { className: classNames$1(inline ? styles$1.containerInline : styles$1.container, className), "data-testid": "loading-spinner", "data-variant": variant, "data-size": size, "data-color": color, children: jsxRuntimeExports.jsxs("div", { className: inline ? styles$1.innerInline : styles$1.inner, children: [jsxRuntimeExports.jsxs("div", { className: classNames$1(styles$1.ringContainer, sizeClass, !inline ? styles$1.spacingDefault : undefined), children: [jsxRuntimeExports.jsx("div", { className: classNames$1(styles$1.ringBackground, colorClass) }), jsxRuntimeExports.jsx("div", { className: classNames$1(styles$1.ringSpinner, styles$1.ringTransparent, ringSpinnerColorClass) })] }), message && jsxRuntimeExports.jsx("p", { className: styles$1.message, children: message })] }) }));
917
923
  }
918
924
  return null;
919
925
  };
920
926
 
927
+ function styleInject(css, ref) {
928
+ if ( ref === void 0 ) ref = {};
929
+ var insertAt = ref.insertAt;
930
+
931
+ if (typeof document === 'undefined') { return; }
932
+
933
+ var head = document.head || document.getElementsByTagName('head')[0];
934
+ var style = document.createElement('style');
935
+ style.type = 'text/css';
936
+
937
+ if (insertAt === 'top') {
938
+ if (head.firstChild) {
939
+ head.insertBefore(style, head.firstChild);
940
+ } else {
941
+ head.appendChild(style);
942
+ }
943
+ } else {
944
+ head.appendChild(style);
945
+ }
946
+
947
+ if (style.styleSheet) {
948
+ style.styleSheet.cssText = css;
949
+ } else {
950
+ style.appendChild(document.createTextNode(css));
951
+ }
952
+ }
953
+
954
+ var css_248z = ".Autocomplete-module_container__Qc33j {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.Autocomplete-module_label__-7YPH {\n display: block;\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: 500;\n color: #374151;\n}\n\n.Autocomplete-module_required__N3ZwR {\n color: #ef4444;\n margin-left: 0.25rem;\n}\n\n.Autocomplete-module_inputWrapper__NS450 {\n position: relative;\n}\n\n.Autocomplete-module_iconLeft__gee-m {\n position: absolute;\n left: 0.75rem;\n top: 50%;\n transform: translateY(-50%);\n color: #9ca3af;\n pointer-events: none;\n display: flex;\n align-items: center;\n}\n\n.Autocomplete-module_input__ZShCt {\n width: 100%;\n padding: 0.5rem 1rem;\n border-radius: 0.5rem;\n border: 2px solid #d1d5db;\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease;\n outline: none;\n font-weight: 500;\n color: #111827;\n}\n\n.Autocomplete-module_input__ZShCt::placeholder {\n color: #9ca3af;\n}\n\n.Autocomplete-module_input__ZShCt:disabled {\n background: #f3f4f6;\n color: #6b7280;\n cursor: not-allowed;\n}\n\n.Autocomplete-module_input__ZShCt:hover:not(:disabled):not(:focus) {\n border-color: #9ca3af;\n}\n\n.Autocomplete-module_input__ZShCt:focus {\n border-color: #3b82f6;\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n.Autocomplete-module_inputWithIcon__-qV4P {\n padding-left: 2.5rem;\n}\n\n.Autocomplete-module_inputWithClear__a8C83 {\n padding-right: 5rem;\n}\n\n.Autocomplete-module_inputWithoutClear__LN8yW {\n padding-right: 3rem;\n}\n\n.Autocomplete-module_inputReadOnly__dG7ZO {\n background: #f9fafb;\n cursor: default;\n}\n\n.Autocomplete-module_inputError__Kdk14 {\n border-color: #ef4444;\n}\n\n.Autocomplete-module_inputError__Kdk14:focus {\n border-color: #ef4444;\n box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);\n}\n\n.Autocomplete-module_inputWarning__XTQux {\n border-color: #eab308;\n}\n\n.Autocomplete-module_inputWarning__XTQux:focus {\n border-color: #eab308;\n box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.1);\n}\n\n.Autocomplete-module_inputFocused__1zKVR {\n border-color: #3b82f6;\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n.Autocomplete-module_rightIcons__ygVzq {\n position: absolute;\n right: 0.75rem;\n top: 50%;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.Autocomplete-module_clearButton__tVaO9 {\n color: #9ca3af;\n background: transparent;\n border: none;\n cursor: pointer;\n padding: 0;\n transition: color 150ms ease;\n}\n\n.Autocomplete-module_clearButton__tVaO9:hover {\n color: #4b5563;\n}\n\n.Autocomplete-module_toggleButton__nxFFh {\n color: #9ca3af;\n background: transparent;\n border: none;\n cursor: pointer;\n padding: 0;\n transition: color 150ms ease;\n}\n\n.Autocomplete-module_toggleButton__nxFFh:hover:not(:disabled) {\n color: #4b5563;\n}\n\n.Autocomplete-module_toggleButton__nxFFh:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n.Autocomplete-module_toggleIcon__fD90b {\n width: 1.25rem;\n height: 1.25rem;\n transition: transform 200ms ease;\n}\n\n.Autocomplete-module_toggleIconOpen__aFQVZ {\n transform: rotate(180deg);\n}\n\n.Autocomplete-module_dropdown__oT12R {\n position: absolute;\n z-index: 50;\n left: 0;\n right: 0;\n margin-top: 0.25rem;\n background: #ffffff;\n border: 2px solid #e5e7eb;\n border-radius: 0.5rem;\n box-shadow:\n 0 10px 15px -3px rgba(0, 0, 0, 0.1),\n 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n overflow: hidden;\n}\n\n.Autocomplete-module_dropdownTop__yN9gw {\n bottom: 100%;\n top: auto;\n margin-top: 0;\n margin-bottom: 0.25rem;\n}\n\n.Autocomplete-module_dropdownContent__0RNSN {\n overflow-y: auto;\n max-height: 100%;\n}\n\n.Autocomplete-module_loadingState__HQ2Vq {\n padding: 0.75rem 1rem;\n text-align: center;\n color: #6b7280;\n}\n\n.Autocomplete-module_loadingSpinner__9qSHW {\n margin: 0 auto;\n}\n\n.Autocomplete-module_loadingText__6g6Qb {\n display: block;\n margin-top: 0.5rem;\n font-size: 0.875rem;\n}\n\n.Autocomplete-module_option__O2-MC {\n padding: 0.75rem 1rem;\n cursor: pointer;\n transition: background-color 150ms ease;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.Autocomplete-module_option__O2-MC:hover:not(.Autocomplete-module_optionDisabled__kkjS2) {\n background: #f9fafb;\n}\n\n.Autocomplete-module_optionDisabled__kkjS2 {\n opacity: 0.5;\n cursor: not-allowed;\n background: #f9fafb;\n}\n\n.Autocomplete-module_optionHighlighted__WpIwj:not(.Autocomplete-module_optionDisabled__kkjS2) {\n background: #eff6ff;\n}\n\n.Autocomplete-module_optionSelected__CeDeN:not(.Autocomplete-module_optionDisabled__kkjS2) {\n background: #dbeafe;\n}\n\n.Autocomplete-module_optionContent__TzYTm {\n flex: 1;\n}\n\n.Autocomplete-module_optionLabel__5FOIH {\n font-weight: 500;\n color: #111827;\n}\n\n.Autocomplete-module_optionDescription__0HEsl {\n font-size: 0.75rem;\n line-height: 1rem;\n color: #6b7280;\n margin-top: 0.125rem;\n}\n\n.Autocomplete-module_optionCheckIcon__MEavu {\n width: 1.25rem;\n height: 1.25rem;\n color: #3b82f6;\n flex-shrink: 0;\n}\n\n.Autocomplete-module_highlight__MW3bw {\n background: #fef08a;\n font-weight: 600;\n color: #111827;\n}\n\n.Autocomplete-module_createOption__xIHDz {\n padding: 0.75rem 1rem;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n transition: background-color 150ms ease;\n}\n\n.Autocomplete-module_createOption__xIHDz:hover {\n background: #f9fafb;\n}\n\n.Autocomplete-module_createOptionWithBorder__BX0mv {\n border-top: 1px solid #e5e7eb;\n}\n\n.Autocomplete-module_createOptionHighlighted__-3e6V {\n background: #eff6ff;\n}\n\n.Autocomplete-module_createIcon__wh5Nu {\n color: #3b82f6;\n font-weight: 500;\n}\n\n.Autocomplete-module_createText__V9uqQ {\n color: #111827;\n}\n\n.Autocomplete-module_noResults__rAoto {\n padding: 0.75rem 1rem;\n text-align: center;\n color: #6b7280;\n font-size: 0.875rem;\n}\n\n.Autocomplete-module_hint__E-DXp {\n font-size: 0.75rem;\n line-height: 1rem;\n color: #6b7280;\n}\n\n.Autocomplete-module_warning__6-JRr {\n font-size: 0.75rem;\n line-height: 1rem;\n color: #ca8a04;\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n.Autocomplete-module_warningIcon__gEaAt {\n width: 1rem;\n height: 1rem;\n}\n\n.Autocomplete-module_error__XLtyW {\n font-size: 0.75rem;\n line-height: 1rem;\n color: #dc2626;\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n.Autocomplete-module_errorIcon__Ftizo {\n width: 1rem;\n height: 1rem;\n}\n";
955
+ var styles = {"container":"Autocomplete-module_container__Qc33j","label":"Autocomplete-module_label__-7YPH","required":"Autocomplete-module_required__N3ZwR","inputWrapper":"Autocomplete-module_inputWrapper__NS450","iconLeft":"Autocomplete-module_iconLeft__gee-m","input":"Autocomplete-module_input__ZShCt","inputWithIcon":"Autocomplete-module_inputWithIcon__-qV4P","inputWithClear":"Autocomplete-module_inputWithClear__a8C83","inputWithoutClear":"Autocomplete-module_inputWithoutClear__LN8yW","inputReadOnly":"Autocomplete-module_inputReadOnly__dG7ZO","inputError":"Autocomplete-module_inputError__Kdk14","inputWarning":"Autocomplete-module_inputWarning__XTQux","inputFocused":"Autocomplete-module_inputFocused__1zKVR","rightIcons":"Autocomplete-module_rightIcons__ygVzq","clearButton":"Autocomplete-module_clearButton__tVaO9","toggleButton":"Autocomplete-module_toggleButton__nxFFh","toggleIcon":"Autocomplete-module_toggleIcon__fD90b","toggleIconOpen":"Autocomplete-module_toggleIconOpen__aFQVZ","dropdown":"Autocomplete-module_dropdown__oT12R","dropdownTop":"Autocomplete-module_dropdownTop__yN9gw","dropdownContent":"Autocomplete-module_dropdownContent__0RNSN","loadingState":"Autocomplete-module_loadingState__HQ2Vq","loadingSpinner":"Autocomplete-module_loadingSpinner__9qSHW","loadingText":"Autocomplete-module_loadingText__6g6Qb","option":"Autocomplete-module_option__O2-MC","optionDisabled":"Autocomplete-module_optionDisabled__kkjS2","optionHighlighted":"Autocomplete-module_optionHighlighted__WpIwj","optionSelected":"Autocomplete-module_optionSelected__CeDeN","optionContent":"Autocomplete-module_optionContent__TzYTm","optionLabel":"Autocomplete-module_optionLabel__5FOIH","optionDescription":"Autocomplete-module_optionDescription__0HEsl","optionCheckIcon":"Autocomplete-module_optionCheckIcon__MEavu","highlight":"Autocomplete-module_highlight__MW3bw","createOption":"Autocomplete-module_createOption__xIHDz","createOptionWithBorder":"Autocomplete-module_createOptionWithBorder__BX0mv","createOptionHighlighted":"Autocomplete-module_createOptionHighlighted__-3e6V","createIcon":"Autocomplete-module_createIcon__wh5Nu","createText":"Autocomplete-module_createText__V9uqQ","noResults":"Autocomplete-module_noResults__rAoto","hint":"Autocomplete-module_hint__E-DXp","warning":"Autocomplete-module_warning__6-JRr","warningIcon":"Autocomplete-module_warningIcon__gEaAt","error":"Autocomplete-module_error__XLtyW","errorIcon":"Autocomplete-module_errorIcon__Ftizo"};
956
+ styleInject(css_248z);
957
+
958
+ const classNames = (...classes) => classes.filter(Boolean).join(" ");
921
959
  // Helper function to highlight matching text
922
960
  const highlightMatchText = (text, search, shouldHighlight = true) => {
923
961
  if (!shouldHighlight || !search || !text)
924
962
  return text;
925
963
  const regex = new RegExp(`(${search.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`, "gi");
926
964
  const parts = text.split(regex);
927
- return (jsxRuntimeExports$1.jsx(jsxRuntimeExports$1.Fragment, { children: parts.map((part, index) => regex.test(part) ? (jsxRuntimeExports$1.jsx("mark", { className: "bg-yellow-200 font-semibold text-gray-900", children: part }, index)) : (jsxRuntimeExports$1.jsx("span", { children: part }, index))) }));
965
+ return (jsxRuntimeExports$1.jsx(jsxRuntimeExports$1.Fragment, { children: parts.map((part, index) => regex.test(part) ? (jsxRuntimeExports$1.jsx("mark", { className: styles.highlight, children: part }, index)) : (jsxRuntimeExports$1.jsx("span", { children: part }, index))) }));
928
966
  };
929
967
  const Autocomplete = ({ label, value, onChange, options = [], placeholder = "Search or select...", error, warning, hint, required = false, disabled = false, loading = false, searchable = true, clearable = true, icon, className = "", maxHeight = "300px", onCreate, onSearch, readOnly = false, renderOption, onBlur, onFocus, createLabel = "Create", noResultsText = "No results found", loadingText = "Loading...", highlightMatch = true, minSearchLength = 0, debounceMs = 300, keepListOpen = false, position = "bottom", }) => {
930
968
  const [isOpen, setIsOpen] = require$$0.useState(false);
@@ -1086,56 +1124,21 @@ const Autocomplete = ({ label, value, onChange, options = [], placeholder = "Sea
1086
1124
  break;
1087
1125
  }
1088
1126
  };
1089
- const getBorderColor = () => {
1090
- if (error) {
1091
- return "border-red-500 focus:border-red-500 focus:ring-2 focus:ring-red-200";
1092
- }
1093
- if (warning) {
1094
- return "border-yellow-500 focus:border-yellow-500 focus:ring-2 focus:ring-yellow-200";
1095
- }
1096
- if (isFocused) {
1097
- return "border-blue-500 focus:ring-2 focus:ring-blue-200";
1098
- }
1099
- return "border-gray-300 hover:border-gray-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-200";
1127
+ const getInputClassName = () => {
1128
+ return classNames(styles.input, icon ? styles.inputWithIcon : undefined, clearable && value ? styles.inputWithClear : styles.inputWithoutClear, readOnly ? styles.inputReadOnly : undefined, error ? styles.inputError : undefined, warning && !error ? styles.inputWarning : undefined, isFocused && !error && !warning ? styles.inputFocused : undefined);
1100
1129
  };
1101
- return (jsxRuntimeExports$1.jsxs("div", { className: `flex flex-col gap-2 ${className}`, children: [label && (jsxRuntimeExports$1.jsxs("label", { className: "block text-sm font-medium text-gray-700", children: [label, required && jsxRuntimeExports$1.jsx("span", { className: "text-red-500 ml-1", children: "*" })] })), jsxRuntimeExports$1.jsxs("div", { ref: containerRef, className: "relative", children: [icon && (jsxRuntimeExports$1.jsx("div", { className: "absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none flex items-center", children: icon })), jsxRuntimeExports$1.jsx("input", { ref: inputRef, type: "text", value: displayValue, onChange: handleInputChange, onFocus: handleInputFocus, onBlur: handleInputBlur, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, readOnly: readOnly || !searchable, className: `
1102
- w-full px-4 py-2 rounded-lg border-2 transition-all outline-none
1103
- font-medium text-gray-900 placeholder-gray-400
1104
- disabled:bg-gray-100 disabled:text-gray-500 disabled:cursor-not-allowed
1105
- ${icon ? "pl-10" : ""}
1106
- ${clearable && value ? "pr-20" : "pr-12"}
1107
- ${getBorderColor()}
1108
- ${readOnly ? "bg-gray-50 cursor-default" : ""}
1109
- `, "data-testid": "autocomplete-input" }), jsxRuntimeExports$1.jsxs("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 flex items-center gap-2", children: [loading && jsxRuntimeExports$1.jsx(LoadingSpinner, { size: "sm", variant: "dots", inline: true }), clearable && value && !loading && !disabled && (jsxRuntimeExports$1.jsx("button", { type: "button", onClick: handleClear, className: "text-gray-400 hover:text-gray-600 transition-colors", "data-testid": "autocomplete-clear", "aria-label": "Clear selection", children: jsxRuntimeExports$1.jsx(M, { className: "w-4 h-4" }) })), jsxRuntimeExports$1.jsx("button", { type: "button", onClick: handleToggle, className: `text-gray-400 transition-all ${disabled || readOnly
1110
- ? "cursor-not-allowed opacity-50"
1111
- : "hover:text-gray-600"}`, disabled: disabled, "data-testid": "autocomplete-toggle", "aria-label": isOpen ? "Close dropdown" : "Open dropdown", children: jsxRuntimeExports$1.jsx(f, { className: `w-5 h-5 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}` }) })] }), isOpen && !disabled && !readOnly && (jsxRuntimeExports$1.jsxs("div", { ref: dropdownRef, className: `
1112
- absolute z-50 left-0 right-0 mt-1
1113
- bg-white border-2 border-gray-200 rounded-lg shadow-lg
1114
- overflow-hidden
1115
- ${position === "top" ? "bottom-full mb-1" : "top-full"}
1116
- `, style: { maxHeight }, "data-testid": "autocomplete-dropdown", children: [loading && filteredOptions.length === 0 && (jsxRuntimeExports$1.jsxs("div", { className: "px-4 py-3 text-center text-gray-500", children: [jsxRuntimeExports$1.jsx(LoadingSpinner, { size: "sm", variant: "spinner", className: "mx-auto" }), jsxRuntimeExports$1.jsx("span", { className: "block mt-2 text-sm", children: loadingText })] })), jsxRuntimeExports$1.jsx("div", { className: "overflow-y-auto max-h-full", children: !loading && filteredOptions.length > 0 && (jsxRuntimeExports$1.jsx(jsxRuntimeExports$1.Fragment, { children: filteredOptions.map((option, index) => {
1130
+ return (jsxRuntimeExports$1.jsxs("div", { className: classNames(styles.container, className), children: [label && (jsxRuntimeExports$1.jsxs("label", { className: styles.label, children: [label, required && jsxRuntimeExports$1.jsx("span", { className: styles.required, children: "*" })] })), jsxRuntimeExports$1.jsxs("div", { ref: containerRef, className: styles.inputWrapper, children: [icon && jsxRuntimeExports$1.jsx("div", { className: styles.iconLeft, children: icon }), jsxRuntimeExports$1.jsx("input", { ref: inputRef, type: "text", value: displayValue, onChange: handleInputChange, onFocus: handleInputFocus, onBlur: handleInputBlur, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, readOnly: readOnly || !searchable, className: getInputClassName(), "data-testid": "autocomplete-input", "data-has-error": error ? "true" : "false", "data-has-warning": warning ? "true" : "false", "data-is-focused": isFocused ? "true" : "false" }), jsxRuntimeExports$1.jsxs("div", { className: styles.rightIcons, children: [loading && jsxRuntimeExports$1.jsx(LoadingSpinner, { size: "sm", variant: "dots", inline: true }), clearable && value && !loading && !disabled && (jsxRuntimeExports$1.jsx("button", { type: "button", onClick: handleClear, className: styles.clearButton, "data-testid": "autocomplete-clear", "aria-label": "Clear selection", children: jsxRuntimeExports$1.jsx(M, { className: "w-4 h-4" }) })), jsxRuntimeExports$1.jsx("button", { type: "button", onClick: handleToggle, className: styles.toggleButton, disabled: disabled, "data-testid": "autocomplete-toggle", "aria-label": isOpen ? "Close dropdown" : "Open dropdown", children: jsxRuntimeExports$1.jsx(f, { className: classNames(styles.toggleIcon, isOpen && styles.toggleIconOpen) }) })] }), isOpen && !disabled && !readOnly && (jsxRuntimeExports$1.jsxs("div", { ref: dropdownRef, className: classNames(styles.dropdown, position === "top" && styles.dropdownTop), style: { maxHeight }, "data-testid": "autocomplete-dropdown", children: [loading && filteredOptions.length === 0 && (jsxRuntimeExports$1.jsxs("div", { className: styles.loadingState, children: [jsxRuntimeExports$1.jsx(LoadingSpinner, { size: "sm", variant: "spinner", className: styles.loadingSpinner }), jsxRuntimeExports$1.jsx("span", { className: styles.loadingText, children: loadingText })] })), jsxRuntimeExports$1.jsx("div", { className: styles.dropdownContent, children: !loading && filteredOptions.length > 0 && (jsxRuntimeExports$1.jsx(jsxRuntimeExports$1.Fragment, { children: filteredOptions.map((option, index) => {
1117
1131
  const isSelected = option.value === value;
1118
1132
  const isHighlighted = index === highlightedIndex;
1119
1133
  return (jsxRuntimeExports$1.jsx("div", { ref: (el) => {
1120
1134
  optionRefs.current[index] = el;
1121
- }, onClick: () => handleSelect(option), onMouseEnter: () => setHighlightedIndex(index), className: `
1122
- px-4 py-3 cursor-pointer transition-colors flex items-center justify-between
1123
- ${option.disabled ? "opacity-50 cursor-not-allowed bg-gray-50" : ""}
1124
- ${isHighlighted && !option.disabled ? "bg-blue-50" : ""}
1125
- ${isSelected && !option.disabled ? "bg-blue-100" : ""}
1126
- ${!isHighlighted && !isSelected && !option.disabled ? "hover:bg-gray-50" : ""}
1127
- `, "data-testid": `autocomplete-option-${option.value}`, children: renderOption ? (renderOption(option, isSelected)) : (jsxRuntimeExports$1.jsxs(jsxRuntimeExports$1.Fragment, { children: [jsxRuntimeExports$1.jsxs("div", { className: "flex-1", children: [jsxRuntimeExports$1.jsx("div", { className: "font-medium text-gray-900", children: highlightMatchText(option.label, searchTerm, highlightMatch) }), option.description && (jsxRuntimeExports$1.jsx("div", { className: "text-xs text-gray-500 mt-0.5", children: option.description }))] }), isSelected && (jsxRuntimeExports$1.jsx(p, { className: "w-5 h-5 text-blue-600 flex-shrink-0" }))] })) }, option.value));
1135
+ }, onClick: () => handleSelect(option), onMouseEnter: () => setHighlightedIndex(index), className: classNames(styles.option, option.disabled && styles.optionDisabled, isHighlighted && styles.optionHighlighted, isSelected && styles.optionSelected), "data-testid": `autocomplete-option-${option.value}`, "data-disabled": option.disabled ? "true" : "false", "data-selected": isSelected ? "true" : "false", "data-highlighted": isHighlighted ? "true" : "false", children: renderOption ? (renderOption(option, isSelected)) : (jsxRuntimeExports$1.jsxs(jsxRuntimeExports$1.Fragment, { children: [jsxRuntimeExports$1.jsxs("div", { className: styles.optionContent, children: [jsxRuntimeExports$1.jsx("div", { className: styles.optionLabel, children: highlightMatchText(option.label, searchTerm, highlightMatch) }), option.description && (jsxRuntimeExports$1.jsx("div", { className: styles.optionDescription, children: option.description }))] }), isSelected && (jsxRuntimeExports$1.jsx(p, { className: styles.optionCheckIcon }))] })) }, option.value));
1128
1136
  }) })) }), onCreate && searchTerm && (jsxRuntimeExports$1.jsxs("div", { onClick: () => {
1129
1137
  onCreate(searchTerm.trim());
1130
1138
  setIsOpen(false);
1131
1139
  setSearchTerm("");
1132
- }, className: `
1133
- px-4 py-3 cursor-pointer
1134
- flex items-center gap-2
1135
- ${filteredOptions.length > 0 ? "border-t border-gray-200" : ""}
1136
- transition-colors
1137
- ${highlightedIndex === filteredOptions.length ? "bg-blue-50" : "hover:bg-gray-50"}
1138
- `, "data-testid": "autocomplete-create", children: [jsxRuntimeExports$1.jsx("span", { className: "text-blue-600 font-medium", children: "+" }), jsxRuntimeExports$1.jsxs("span", { className: "text-gray-900", children: [createLabel, " \"", searchTerm, "\""] })] })), !loading && filteredOptions.length === 0 && !onCreate && (jsxRuntimeExports$1.jsx("div", { className: "px-4 py-3 text-center text-gray-500 text-sm", children: noResultsText }))] }))] }), hint && !error && !warning && (jsxRuntimeExports$1.jsx("p", { className: "text-xs text-gray-500", children: hint })), warning && !error && (jsxRuntimeExports$1.jsxs("p", { className: "text-xs text-yellow-600 flex items-center gap-1", children: [jsxRuntimeExports$1.jsx("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: jsxRuntimeExports$1.jsx("path", { fillRule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }), warning] })), error && (jsxRuntimeExports$1.jsxs("p", { className: "text-xs text-red-600 flex items-center gap-1", children: [jsxRuntimeExports$1.jsx("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: jsxRuntimeExports$1.jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z", clipRule: "evenodd" }) }), error] }))] }));
1140
+ }, className: classNames(styles.createOption, filteredOptions.length > 0 && styles.createOptionWithBorder, highlightedIndex === filteredOptions.length &&
1141
+ styles.createOptionHighlighted), "data-testid": "autocomplete-create", children: [jsxRuntimeExports$1.jsx("span", { className: styles.createIcon, children: "+" }), jsxRuntimeExports$1.jsxs("span", { className: styles.createText, children: [createLabel, " \"", searchTerm, "\""] })] })), !loading && filteredOptions.length === 0 && !onCreate && (jsxRuntimeExports$1.jsx("div", { className: styles.noResults, children: noResultsText }))] }))] }), hint && !error && !warning && jsxRuntimeExports$1.jsx("p", { className: styles.hint, children: hint }), warning && !error && (jsxRuntimeExports$1.jsxs("p", { className: styles.warning, children: [jsxRuntimeExports$1.jsx("svg", { className: styles.warningIcon, fill: "currentColor", viewBox: "0 0 20 20", children: jsxRuntimeExports$1.jsx("path", { fillRule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }), warning] })), error && (jsxRuntimeExports$1.jsxs("p", { className: styles.error, children: [jsxRuntimeExports$1.jsx("svg", { className: styles.errorIcon, fill: "currentColor", viewBox: "0 0 20 20", children: jsxRuntimeExports$1.jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z", clipRule: "evenodd" }) }), error] }))] }));
1139
1142
  };
1140
1143
 
1141
1144
  module.exports = Autocomplete;
package/dist/index.esm.js CHANGED
@@ -855,6 +855,40 @@ function requireJsxRuntime () {
855
855
 
856
856
  var jsxRuntimeExports = requireJsxRuntime();
857
857
 
858
+ function styleInject$1(css, ref) {
859
+ if ( ref === void 0 ) ref = {};
860
+ var insertAt = ref.insertAt;
861
+
862
+ if (typeof document === 'undefined') { return; }
863
+
864
+ var head = document.head || document.getElementsByTagName('head')[0];
865
+ var style = document.createElement('style');
866
+ style.type = 'text/css';
867
+
868
+ if (insertAt === 'top') {
869
+ if (head.firstChild) {
870
+ head.insertBefore(style, head.firstChild);
871
+ } else {
872
+ head.appendChild(style);
873
+ }
874
+ } else {
875
+ head.appendChild(style);
876
+ }
877
+
878
+ if (style.styleSheet) {
879
+ style.styleSheet.cssText = css;
880
+ } else {
881
+ style.appendChild(document.createTextNode(css));
882
+ }
883
+ }
884
+
885
+ var css_248z$1 = "/* Container */\n.LoadingSpinner-module_container__PHl1j {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.LoadingSpinner-module_containerInline__eD4FZ {\n display: inline-flex;\n}\n\n/* Inner wrapper */\n.LoadingSpinner-module_inner__SvATp {\n text-align: center;\n}\n\n.LoadingSpinner-module_innerInline__MPS3Y {\n display: inline-flex;\n}\n\n/* Spinner base */\n.LoadingSpinner-module_spinner__vu6Ri {\n border-radius: 9999px;\n border-width: 2px;\n animation: LoadingSpinner-module_spin__vEieX 1s linear infinite;\n}\n\n/* Sizes */\n.LoadingSpinner-module_sizeSm__tL-IR {\n height: 1rem;\n width: 1rem;\n}\n\n.LoadingSpinner-module_sizeMd__AT592 {\n height: 2rem;\n width: 2rem;\n}\n\n.LoadingSpinner-module_sizeLg__jyX27 {\n height: 3rem;\n width: 3rem;\n}\n\n/* Colors - spinner */\n.LoadingSpinner-module_colorBlue__Jtuu1 {\n border-color: #2563eb;\n}\n\n.LoadingSpinner-module_colorGray__-EMqs {\n border-color: #4b5563;\n}\n\n.LoadingSpinner-module_colorWhite__95Hoo {\n border-color: #ffffff;\n}\n\n/* Spinner transparent borders */\n.LoadingSpinner-module_spinnerTransparent__G3zcb {\n border-top-color: transparent;\n border-right-color: transparent;\n}\n\n/* Spacing */\n.LoadingSpinner-module_spacingDefault__8At6H {\n margin: 0 auto 1rem auto;\n}\n\n/* Dots container */\n.LoadingSpinner-module_dotsContainer__l3FsV {\n display: flex;\n gap: 0.25rem;\n}\n\n.LoadingSpinner-module_dotsContainerInline__Kl4Fz {\n display: flex;\n gap: 0.25rem;\n}\n\n/* Dot sizes */\n.LoadingSpinner-module_dotSizeSm__YuBra {\n height: 0.375rem;\n width: 0.375rem;\n}\n\n.LoadingSpinner-module_dotSizeMd__rXeyS {\n height: 0.625rem;\n width: 0.625rem;\n}\n\n.LoadingSpinner-module_dotSizeLg__M8etz {\n height: 0.875rem;\n width: 0.875rem;\n}\n\n/* Dot colors */\n.LoadingSpinner-module_dotColorBlue__5evmc {\n background-color: #2563eb;\n}\n\n.LoadingSpinner-module_dotColorGray__dr80J {\n background-color: #4b5563;\n}\n\n.LoadingSpinner-module_dotColorWhite__54ur- {\n background-color: #ffffff;\n}\n\n/* Dot */\n.LoadingSpinner-module_dot__tz0lA {\n border-radius: 9999px;\n animation: LoadingSpinner-module_bounce__7Raih 1s ease-in-out infinite;\n}\n\n.LoadingSpinner-module_dotDelay1__-94Os {\n animation-delay: 0ms;\n}\n\n.LoadingSpinner-module_dotDelay2__Oy8E- {\n animation-delay: 150ms;\n}\n\n.LoadingSpinner-module_dotDelay3__7EZYH {\n animation-delay: 300ms;\n}\n\n/* Pulse */\n.LoadingSpinner-module_pulse__gKUHJ {\n border-radius: 9999px;\n animation: LoadingSpinner-module_pulse__gKUHJ 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n/* Ring */\n.LoadingSpinner-module_ringContainer__4p8NG {\n position: relative;\n}\n\n.LoadingSpinner-module_ringBackground__aF2w1 {\n position: absolute;\n inset: 0;\n border-radius: 9999px;\n border-width: 2px;\n opacity: 0.25;\n}\n\n.LoadingSpinner-module_ringSpinner__b92-S {\n position: absolute;\n inset: 0;\n border-radius: 9999px;\n border-width: 2px;\n border-color: transparent;\n animation: LoadingSpinner-module_spin__vEieX 1s linear infinite;\n}\n\n.LoadingSpinner-module_ringSpinnerBlue__zGTgw {\n border-top-color: #2563eb;\n}\n\n.LoadingSpinner-module_ringSpinnerGray__kHnkJ {\n border-top-color: #4b5563;\n}\n\n.LoadingSpinner-module_ringSpinnerWhite__yu8d0 {\n border-top-color: #ffffff;\n}\n\n.LoadingSpinner-module_ringTransparent__DTSbu {\n border-right-color: transparent;\n border-bottom-color: transparent;\n border-left-color: transparent;\n}\n\n/* Message */\n.LoadingSpinner-module_message__FoOvh {\n color: #4b5563;\n font-size: 0.875rem;\n line-height: 1.25rem;\n margin-top: 0.5rem;\n}\n\n/* Animations */\n@keyframes LoadingSpinner-module_spin__vEieX {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n@keyframes LoadingSpinner-module_bounce__7Raih {\n 0%,\n 100% {\n transform: translateY(0);\n animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n }\n 50% {\n transform: translateY(-25%);\n animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\n }\n}\n\n@keyframes LoadingSpinner-module_pulse__gKUHJ {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.5;\n }\n}\n";
886
+ var styles$1 = {"container":"LoadingSpinner-module_container__PHl1j","containerInline":"LoadingSpinner-module_containerInline__eD4FZ","inner":"LoadingSpinner-module_inner__SvATp","innerInline":"LoadingSpinner-module_innerInline__MPS3Y","spinner":"LoadingSpinner-module_spinner__vu6Ri","spin":"LoadingSpinner-module_spin__vEieX","sizeSm":"LoadingSpinner-module_sizeSm__tL-IR","sizeMd":"LoadingSpinner-module_sizeMd__AT592","sizeLg":"LoadingSpinner-module_sizeLg__jyX27","colorBlue":"LoadingSpinner-module_colorBlue__Jtuu1","colorGray":"LoadingSpinner-module_colorGray__-EMqs","colorWhite":"LoadingSpinner-module_colorWhite__95Hoo","spinnerTransparent":"LoadingSpinner-module_spinnerTransparent__G3zcb","spacingDefault":"LoadingSpinner-module_spacingDefault__8At6H","dotsContainer":"LoadingSpinner-module_dotsContainer__l3FsV","dotsContainerInline":"LoadingSpinner-module_dotsContainerInline__Kl4Fz","dotSizeSm":"LoadingSpinner-module_dotSizeSm__YuBra","dotSizeMd":"LoadingSpinner-module_dotSizeMd__rXeyS","dotSizeLg":"LoadingSpinner-module_dotSizeLg__M8etz","dotColorBlue":"LoadingSpinner-module_dotColorBlue__5evmc","dotColorGray":"LoadingSpinner-module_dotColorGray__dr80J","dotColorWhite":"LoadingSpinner-module_dotColorWhite__54ur-","dot":"LoadingSpinner-module_dot__tz0lA","bounce":"LoadingSpinner-module_bounce__7Raih","dotDelay1":"LoadingSpinner-module_dotDelay1__-94Os","dotDelay2":"LoadingSpinner-module_dotDelay2__Oy8E-","dotDelay3":"LoadingSpinner-module_dotDelay3__7EZYH","pulse":"LoadingSpinner-module_pulse__gKUHJ","ringContainer":"LoadingSpinner-module_ringContainer__4p8NG","ringBackground":"LoadingSpinner-module_ringBackground__aF2w1","ringSpinner":"LoadingSpinner-module_ringSpinner__b92-S","ringSpinnerBlue":"LoadingSpinner-module_ringSpinnerBlue__zGTgw","ringSpinnerGray":"LoadingSpinner-module_ringSpinnerGray__kHnkJ","ringSpinnerWhite":"LoadingSpinner-module_ringSpinnerWhite__yu8d0","ringTransparent":"LoadingSpinner-module_ringTransparent__DTSbu","message":"LoadingSpinner-module_message__FoOvh"};
887
+ styleInject$1(css_248z$1);
888
+
889
+ function classNames$1(...classes) {
890
+ return classes.filter(Boolean).join(" ");
891
+ }
858
892
  /**
859
893
  * LoadingSpinner component
860
894
  * Displays a loading indicator with multiple style variants
@@ -864,65 +898,69 @@ var jsxRuntimeExports = requireJsxRuntime();
864
898
  * @param color - Color scheme: 'blue' (default), 'gray', 'white'
865
899
  */
866
900
  const LoadingSpinner = ({ message, size = "md", className = "", variant = "spinner", inline = false, color = "blue", }) => {
867
- const sizeClasses = {
868
- sm: "h-4 w-4",
869
- md: "h-8 w-8",
870
- lg: "h-12 w-12",
871
- };
872
- const colorClasses = {
873
- blue: "border-blue-600",
874
- gray: "border-gray-600",
875
- white: "border-white",
876
- };
877
- const dotColorClasses = {
878
- blue: "bg-blue-600",
879
- gray: "bg-gray-600",
880
- white: "bg-white",
881
- };
882
- const dotSizeClasses = {
883
- sm: "h-1.5 w-1.5",
884
- md: "h-2.5 w-2.5",
885
- lg: "h-3.5 w-3.5",
886
- };
901
+ const sizeClass = styles$1[`size${size.charAt(0).toUpperCase() + size.slice(1)}`];
902
+ const colorClass = styles$1[`color${color.charAt(0).toUpperCase() + color.slice(1)}`];
903
+ const dotColorClass = styles$1[`dotColor${color.charAt(0).toUpperCase() + color.slice(1)}`];
904
+ const dotSizeClass = styles$1[`dotSize${size.charAt(0).toUpperCase() + size.slice(1)}`];
887
905
  // Spinner variant (circular border)
888
906
  if (variant === "spinner") {
889
- return (jsxRuntimeExports.jsx("div", { className: inline ? className : `flex justify-center items-center ${className}`, children: jsxRuntimeExports.jsxs("div", { className: inline ? "" : "text-center", children: [jsxRuntimeExports.jsx("div", { className: `animate-spin rounded-full border-2 ${colorClasses[color]} ${sizeClasses[size]} ${inline ? "" : "mx-auto mb-4"}`, style: {
890
- borderTopColor: "transparent",
891
- borderRightColor: "transparent",
892
- } }), message && jsxRuntimeExports.jsx("p", { className: "text-gray-600 text-sm mt-2", children: message })] }) }));
907
+ return (jsxRuntimeExports.jsx("div", { className: classNames$1(inline ? styles$1.containerInline : styles$1.container, className), "data-testid": "loading-spinner", "data-variant": variant, "data-size": size, "data-color": color, children: jsxRuntimeExports.jsxs("div", { className: inline ? styles$1.innerInline : styles$1.inner, children: [jsxRuntimeExports.jsx("div", { className: classNames$1(styles$1.spinner, styles$1.spinnerTransparent, colorClass, sizeClass, !inline ? styles$1.spacingDefault : undefined) }), message && jsxRuntimeExports.jsx("p", { className: styles$1.message, children: message })] }) }));
893
908
  }
894
909
  // Dots variant (three bouncing dots)
895
910
  if (variant === "dots") {
896
- return (jsxRuntimeExports.jsx("div", { className: inline ? className : `flex justify-center items-center ${className}`, children: jsxRuntimeExports.jsxs("div", { className: inline ? "flex gap-1" : "text-center", children: [jsxRuntimeExports.jsxs("div", { className: `flex gap-1 ${inline ? "" : "mx-auto mb-4"}`, children: [jsxRuntimeExports.jsx("div", { className: `${dotSizeClasses[size]} ${dotColorClasses[color]} rounded-full animate-bounce`, style: { animationDelay: "0ms" } }), jsxRuntimeExports.jsx("div", { className: `${dotSizeClasses[size]} ${dotColorClasses[color]} rounded-full animate-bounce`, style: { animationDelay: "150ms" } }), jsxRuntimeExports.jsx("div", { className: `${dotSizeClasses[size]} ${dotColorClasses[color]} rounded-full animate-bounce`, style: { animationDelay: "300ms" } })] }), message && jsxRuntimeExports.jsx("p", { className: "text-gray-600 text-sm mt-2", children: message })] }) }));
911
+ return (jsxRuntimeExports.jsx("div", { className: classNames$1(inline ? styles$1.containerInline : styles$1.container, className), "data-testid": "loading-spinner", "data-variant": variant, "data-size": size, "data-color": color, children: jsxRuntimeExports.jsxs("div", { className: inline ? styles$1.innerInline : styles$1.inner, children: [jsxRuntimeExports.jsxs("div", { className: classNames$1(inline ? styles$1.dotsContainerInline : styles$1.dotsContainer, !inline ? styles$1.spacingDefault : undefined), children: [jsxRuntimeExports.jsx("div", { className: classNames$1(styles$1.dot, dotSizeClass, dotColorClass, styles$1.dotDelay1) }), jsxRuntimeExports.jsx("div", { className: classNames$1(styles$1.dot, dotSizeClass, dotColorClass, styles$1.dotDelay2) }), jsxRuntimeExports.jsx("div", { className: classNames$1(styles$1.dot, dotSizeClass, dotColorClass, styles$1.dotDelay3) })] }), message && jsxRuntimeExports.jsx("p", { className: styles$1.message, children: message })] }) }));
897
912
  }
898
913
  // Pulse variant (pulsing circle)
899
914
  if (variant === "pulse") {
900
- return (jsxRuntimeExports.jsx("div", { className: inline ? className : `flex justify-center items-center ${className}`, children: jsxRuntimeExports.jsxs("div", { className: inline ? "" : "text-center", children: [jsxRuntimeExports.jsx("div", { className: `${sizeClasses[size]} ${dotColorClasses[color]} rounded-full animate-pulse ${inline ? "" : "mx-auto mb-4"}` }), message && jsxRuntimeExports.jsx("p", { className: "text-gray-600 text-sm mt-2", children: message })] }) }));
915
+ return (jsxRuntimeExports.jsx("div", { className: classNames$1(inline ? styles$1.containerInline : styles$1.container, className), "data-testid": "loading-spinner", "data-variant": variant, "data-size": size, "data-color": color, children: jsxRuntimeExports.jsxs("div", { className: inline ? styles$1.innerInline : styles$1.inner, children: [jsxRuntimeExports.jsx("div", { className: classNames$1(styles$1.pulse, sizeClass, dotColorClass, !inline ? styles$1.spacingDefault : undefined) }), message && jsxRuntimeExports.jsx("p", { className: styles$1.message, children: message })] }) }));
901
916
  }
902
917
  // Ring variant (rotating ring with gradient)
903
918
  if (variant === "ring") {
904
- const ringColorMap = {
905
- blue: "border-blue-600",
906
- gray: "border-gray-600",
907
- white: "border-white",
908
- };
909
- return (jsxRuntimeExports.jsx("div", { className: inline ? className : `flex justify-center items-center ${className}`, children: jsxRuntimeExports.jsxs("div", { className: inline ? "" : "text-center", children: [jsxRuntimeExports.jsxs("div", { className: `relative ${sizeClasses[size]} ${inline ? "" : "mx-auto mb-4"}`, children: [jsxRuntimeExports.jsx("div", { className: `absolute inset-0 rounded-full border-2 ${colorClasses[color]} opacity-25` }), jsxRuntimeExports.jsx("div", { className: `absolute inset-0 rounded-full border-2 border-transparent ${ringColorMap[color]} animate-spin`, style: {
910
- borderTopColor: "currentColor",
911
- borderRightColor: "transparent",
912
- borderBottomColor: "transparent",
913
- borderLeftColor: "transparent",
914
- } })] }), message && jsxRuntimeExports.jsx("p", { className: "text-gray-600 text-sm mt-2", children: message })] }) }));
919
+ const ringSpinnerColorClass = styles$1[`ringSpinner${color.charAt(0).toUpperCase() + color.slice(1)}`];
920
+ return (jsxRuntimeExports.jsx("div", { className: classNames$1(inline ? styles$1.containerInline : styles$1.container, className), "data-testid": "loading-spinner", "data-variant": variant, "data-size": size, "data-color": color, children: jsxRuntimeExports.jsxs("div", { className: inline ? styles$1.innerInline : styles$1.inner, children: [jsxRuntimeExports.jsxs("div", { className: classNames$1(styles$1.ringContainer, sizeClass, !inline ? styles$1.spacingDefault : undefined), children: [jsxRuntimeExports.jsx("div", { className: classNames$1(styles$1.ringBackground, colorClass) }), jsxRuntimeExports.jsx("div", { className: classNames$1(styles$1.ringSpinner, styles$1.ringTransparent, ringSpinnerColorClass) })] }), message && jsxRuntimeExports.jsx("p", { className: styles$1.message, children: message })] }) }));
915
921
  }
916
922
  return null;
917
923
  };
918
924
 
925
+ function styleInject(css, ref) {
926
+ if ( ref === void 0 ) ref = {};
927
+ var insertAt = ref.insertAt;
928
+
929
+ if (typeof document === 'undefined') { return; }
930
+
931
+ var head = document.head || document.getElementsByTagName('head')[0];
932
+ var style = document.createElement('style');
933
+ style.type = 'text/css';
934
+
935
+ if (insertAt === 'top') {
936
+ if (head.firstChild) {
937
+ head.insertBefore(style, head.firstChild);
938
+ } else {
939
+ head.appendChild(style);
940
+ }
941
+ } else {
942
+ head.appendChild(style);
943
+ }
944
+
945
+ if (style.styleSheet) {
946
+ style.styleSheet.cssText = css;
947
+ } else {
948
+ style.appendChild(document.createTextNode(css));
949
+ }
950
+ }
951
+
952
+ var css_248z = ".Autocomplete-module_container__Qc33j {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.Autocomplete-module_label__-7YPH {\n display: block;\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: 500;\n color: #374151;\n}\n\n.Autocomplete-module_required__N3ZwR {\n color: #ef4444;\n margin-left: 0.25rem;\n}\n\n.Autocomplete-module_inputWrapper__NS450 {\n position: relative;\n}\n\n.Autocomplete-module_iconLeft__gee-m {\n position: absolute;\n left: 0.75rem;\n top: 50%;\n transform: translateY(-50%);\n color: #9ca3af;\n pointer-events: none;\n display: flex;\n align-items: center;\n}\n\n.Autocomplete-module_input__ZShCt {\n width: 100%;\n padding: 0.5rem 1rem;\n border-radius: 0.5rem;\n border: 2px solid #d1d5db;\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease;\n outline: none;\n font-weight: 500;\n color: #111827;\n}\n\n.Autocomplete-module_input__ZShCt::placeholder {\n color: #9ca3af;\n}\n\n.Autocomplete-module_input__ZShCt:disabled {\n background: #f3f4f6;\n color: #6b7280;\n cursor: not-allowed;\n}\n\n.Autocomplete-module_input__ZShCt:hover:not(:disabled):not(:focus) {\n border-color: #9ca3af;\n}\n\n.Autocomplete-module_input__ZShCt:focus {\n border-color: #3b82f6;\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n.Autocomplete-module_inputWithIcon__-qV4P {\n padding-left: 2.5rem;\n}\n\n.Autocomplete-module_inputWithClear__a8C83 {\n padding-right: 5rem;\n}\n\n.Autocomplete-module_inputWithoutClear__LN8yW {\n padding-right: 3rem;\n}\n\n.Autocomplete-module_inputReadOnly__dG7ZO {\n background: #f9fafb;\n cursor: default;\n}\n\n.Autocomplete-module_inputError__Kdk14 {\n border-color: #ef4444;\n}\n\n.Autocomplete-module_inputError__Kdk14:focus {\n border-color: #ef4444;\n box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);\n}\n\n.Autocomplete-module_inputWarning__XTQux {\n border-color: #eab308;\n}\n\n.Autocomplete-module_inputWarning__XTQux:focus {\n border-color: #eab308;\n box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.1);\n}\n\n.Autocomplete-module_inputFocused__1zKVR {\n border-color: #3b82f6;\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n.Autocomplete-module_rightIcons__ygVzq {\n position: absolute;\n right: 0.75rem;\n top: 50%;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.Autocomplete-module_clearButton__tVaO9 {\n color: #9ca3af;\n background: transparent;\n border: none;\n cursor: pointer;\n padding: 0;\n transition: color 150ms ease;\n}\n\n.Autocomplete-module_clearButton__tVaO9:hover {\n color: #4b5563;\n}\n\n.Autocomplete-module_toggleButton__nxFFh {\n color: #9ca3af;\n background: transparent;\n border: none;\n cursor: pointer;\n padding: 0;\n transition: color 150ms ease;\n}\n\n.Autocomplete-module_toggleButton__nxFFh:hover:not(:disabled) {\n color: #4b5563;\n}\n\n.Autocomplete-module_toggleButton__nxFFh:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n.Autocomplete-module_toggleIcon__fD90b {\n width: 1.25rem;\n height: 1.25rem;\n transition: transform 200ms ease;\n}\n\n.Autocomplete-module_toggleIconOpen__aFQVZ {\n transform: rotate(180deg);\n}\n\n.Autocomplete-module_dropdown__oT12R {\n position: absolute;\n z-index: 50;\n left: 0;\n right: 0;\n margin-top: 0.25rem;\n background: #ffffff;\n border: 2px solid #e5e7eb;\n border-radius: 0.5rem;\n box-shadow:\n 0 10px 15px -3px rgba(0, 0, 0, 0.1),\n 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n overflow: hidden;\n}\n\n.Autocomplete-module_dropdownTop__yN9gw {\n bottom: 100%;\n top: auto;\n margin-top: 0;\n margin-bottom: 0.25rem;\n}\n\n.Autocomplete-module_dropdownContent__0RNSN {\n overflow-y: auto;\n max-height: 100%;\n}\n\n.Autocomplete-module_loadingState__HQ2Vq {\n padding: 0.75rem 1rem;\n text-align: center;\n color: #6b7280;\n}\n\n.Autocomplete-module_loadingSpinner__9qSHW {\n margin: 0 auto;\n}\n\n.Autocomplete-module_loadingText__6g6Qb {\n display: block;\n margin-top: 0.5rem;\n font-size: 0.875rem;\n}\n\n.Autocomplete-module_option__O2-MC {\n padding: 0.75rem 1rem;\n cursor: pointer;\n transition: background-color 150ms ease;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.Autocomplete-module_option__O2-MC:hover:not(.Autocomplete-module_optionDisabled__kkjS2) {\n background: #f9fafb;\n}\n\n.Autocomplete-module_optionDisabled__kkjS2 {\n opacity: 0.5;\n cursor: not-allowed;\n background: #f9fafb;\n}\n\n.Autocomplete-module_optionHighlighted__WpIwj:not(.Autocomplete-module_optionDisabled__kkjS2) {\n background: #eff6ff;\n}\n\n.Autocomplete-module_optionSelected__CeDeN:not(.Autocomplete-module_optionDisabled__kkjS2) {\n background: #dbeafe;\n}\n\n.Autocomplete-module_optionContent__TzYTm {\n flex: 1;\n}\n\n.Autocomplete-module_optionLabel__5FOIH {\n font-weight: 500;\n color: #111827;\n}\n\n.Autocomplete-module_optionDescription__0HEsl {\n font-size: 0.75rem;\n line-height: 1rem;\n color: #6b7280;\n margin-top: 0.125rem;\n}\n\n.Autocomplete-module_optionCheckIcon__MEavu {\n width: 1.25rem;\n height: 1.25rem;\n color: #3b82f6;\n flex-shrink: 0;\n}\n\n.Autocomplete-module_highlight__MW3bw {\n background: #fef08a;\n font-weight: 600;\n color: #111827;\n}\n\n.Autocomplete-module_createOption__xIHDz {\n padding: 0.75rem 1rem;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n transition: background-color 150ms ease;\n}\n\n.Autocomplete-module_createOption__xIHDz:hover {\n background: #f9fafb;\n}\n\n.Autocomplete-module_createOptionWithBorder__BX0mv {\n border-top: 1px solid #e5e7eb;\n}\n\n.Autocomplete-module_createOptionHighlighted__-3e6V {\n background: #eff6ff;\n}\n\n.Autocomplete-module_createIcon__wh5Nu {\n color: #3b82f6;\n font-weight: 500;\n}\n\n.Autocomplete-module_createText__V9uqQ {\n color: #111827;\n}\n\n.Autocomplete-module_noResults__rAoto {\n padding: 0.75rem 1rem;\n text-align: center;\n color: #6b7280;\n font-size: 0.875rem;\n}\n\n.Autocomplete-module_hint__E-DXp {\n font-size: 0.75rem;\n line-height: 1rem;\n color: #6b7280;\n}\n\n.Autocomplete-module_warning__6-JRr {\n font-size: 0.75rem;\n line-height: 1rem;\n color: #ca8a04;\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n.Autocomplete-module_warningIcon__gEaAt {\n width: 1rem;\n height: 1rem;\n}\n\n.Autocomplete-module_error__XLtyW {\n font-size: 0.75rem;\n line-height: 1rem;\n color: #dc2626;\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n.Autocomplete-module_errorIcon__Ftizo {\n width: 1rem;\n height: 1rem;\n}\n";
953
+ var styles = {"container":"Autocomplete-module_container__Qc33j","label":"Autocomplete-module_label__-7YPH","required":"Autocomplete-module_required__N3ZwR","inputWrapper":"Autocomplete-module_inputWrapper__NS450","iconLeft":"Autocomplete-module_iconLeft__gee-m","input":"Autocomplete-module_input__ZShCt","inputWithIcon":"Autocomplete-module_inputWithIcon__-qV4P","inputWithClear":"Autocomplete-module_inputWithClear__a8C83","inputWithoutClear":"Autocomplete-module_inputWithoutClear__LN8yW","inputReadOnly":"Autocomplete-module_inputReadOnly__dG7ZO","inputError":"Autocomplete-module_inputError__Kdk14","inputWarning":"Autocomplete-module_inputWarning__XTQux","inputFocused":"Autocomplete-module_inputFocused__1zKVR","rightIcons":"Autocomplete-module_rightIcons__ygVzq","clearButton":"Autocomplete-module_clearButton__tVaO9","toggleButton":"Autocomplete-module_toggleButton__nxFFh","toggleIcon":"Autocomplete-module_toggleIcon__fD90b","toggleIconOpen":"Autocomplete-module_toggleIconOpen__aFQVZ","dropdown":"Autocomplete-module_dropdown__oT12R","dropdownTop":"Autocomplete-module_dropdownTop__yN9gw","dropdownContent":"Autocomplete-module_dropdownContent__0RNSN","loadingState":"Autocomplete-module_loadingState__HQ2Vq","loadingSpinner":"Autocomplete-module_loadingSpinner__9qSHW","loadingText":"Autocomplete-module_loadingText__6g6Qb","option":"Autocomplete-module_option__O2-MC","optionDisabled":"Autocomplete-module_optionDisabled__kkjS2","optionHighlighted":"Autocomplete-module_optionHighlighted__WpIwj","optionSelected":"Autocomplete-module_optionSelected__CeDeN","optionContent":"Autocomplete-module_optionContent__TzYTm","optionLabel":"Autocomplete-module_optionLabel__5FOIH","optionDescription":"Autocomplete-module_optionDescription__0HEsl","optionCheckIcon":"Autocomplete-module_optionCheckIcon__MEavu","highlight":"Autocomplete-module_highlight__MW3bw","createOption":"Autocomplete-module_createOption__xIHDz","createOptionWithBorder":"Autocomplete-module_createOptionWithBorder__BX0mv","createOptionHighlighted":"Autocomplete-module_createOptionHighlighted__-3e6V","createIcon":"Autocomplete-module_createIcon__wh5Nu","createText":"Autocomplete-module_createText__V9uqQ","noResults":"Autocomplete-module_noResults__rAoto","hint":"Autocomplete-module_hint__E-DXp","warning":"Autocomplete-module_warning__6-JRr","warningIcon":"Autocomplete-module_warningIcon__gEaAt","error":"Autocomplete-module_error__XLtyW","errorIcon":"Autocomplete-module_errorIcon__Ftizo"};
954
+ styleInject(css_248z);
955
+
956
+ const classNames = (...classes) => classes.filter(Boolean).join(" ");
919
957
  // Helper function to highlight matching text
920
958
  const highlightMatchText = (text, search, shouldHighlight = true) => {
921
959
  if (!shouldHighlight || !search || !text)
922
960
  return text;
923
961
  const regex = new RegExp(`(${search.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`, "gi");
924
962
  const parts = text.split(regex);
925
- return (jsxRuntimeExports$1.jsx(jsxRuntimeExports$1.Fragment, { children: parts.map((part, index) => regex.test(part) ? (jsxRuntimeExports$1.jsx("mark", { className: "bg-yellow-200 font-semibold text-gray-900", children: part }, index)) : (jsxRuntimeExports$1.jsx("span", { children: part }, index))) }));
963
+ return (jsxRuntimeExports$1.jsx(jsxRuntimeExports$1.Fragment, { children: parts.map((part, index) => regex.test(part) ? (jsxRuntimeExports$1.jsx("mark", { className: styles.highlight, children: part }, index)) : (jsxRuntimeExports$1.jsx("span", { children: part }, index))) }));
926
964
  };
927
965
  const Autocomplete = ({ label, value, onChange, options = [], placeholder = "Search or select...", error, warning, hint, required = false, disabled = false, loading = false, searchable = true, clearable = true, icon, className = "", maxHeight = "300px", onCreate, onSearch, readOnly = false, renderOption, onBlur, onFocus, createLabel = "Create", noResultsText = "No results found", loadingText = "Loading...", highlightMatch = true, minSearchLength = 0, debounceMs = 300, keepListOpen = false, position = "bottom", }) => {
928
966
  const [isOpen, setIsOpen] = useState(false);
@@ -1084,56 +1122,21 @@ const Autocomplete = ({ label, value, onChange, options = [], placeholder = "Sea
1084
1122
  break;
1085
1123
  }
1086
1124
  };
1087
- const getBorderColor = () => {
1088
- if (error) {
1089
- return "border-red-500 focus:border-red-500 focus:ring-2 focus:ring-red-200";
1090
- }
1091
- if (warning) {
1092
- return "border-yellow-500 focus:border-yellow-500 focus:ring-2 focus:ring-yellow-200";
1093
- }
1094
- if (isFocused) {
1095
- return "border-blue-500 focus:ring-2 focus:ring-blue-200";
1096
- }
1097
- return "border-gray-300 hover:border-gray-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-200";
1125
+ const getInputClassName = () => {
1126
+ return classNames(styles.input, icon ? styles.inputWithIcon : undefined, clearable && value ? styles.inputWithClear : styles.inputWithoutClear, readOnly ? styles.inputReadOnly : undefined, error ? styles.inputError : undefined, warning && !error ? styles.inputWarning : undefined, isFocused && !error && !warning ? styles.inputFocused : undefined);
1098
1127
  };
1099
- return (jsxRuntimeExports$1.jsxs("div", { className: `flex flex-col gap-2 ${className}`, children: [label && (jsxRuntimeExports$1.jsxs("label", { className: "block text-sm font-medium text-gray-700", children: [label, required && jsxRuntimeExports$1.jsx("span", { className: "text-red-500 ml-1", children: "*" })] })), jsxRuntimeExports$1.jsxs("div", { ref: containerRef, className: "relative", children: [icon && (jsxRuntimeExports$1.jsx("div", { className: "absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none flex items-center", children: icon })), jsxRuntimeExports$1.jsx("input", { ref: inputRef, type: "text", value: displayValue, onChange: handleInputChange, onFocus: handleInputFocus, onBlur: handleInputBlur, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, readOnly: readOnly || !searchable, className: `
1100
- w-full px-4 py-2 rounded-lg border-2 transition-all outline-none
1101
- font-medium text-gray-900 placeholder-gray-400
1102
- disabled:bg-gray-100 disabled:text-gray-500 disabled:cursor-not-allowed
1103
- ${icon ? "pl-10" : ""}
1104
- ${clearable && value ? "pr-20" : "pr-12"}
1105
- ${getBorderColor()}
1106
- ${readOnly ? "bg-gray-50 cursor-default" : ""}
1107
- `, "data-testid": "autocomplete-input" }), jsxRuntimeExports$1.jsxs("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 flex items-center gap-2", children: [loading && jsxRuntimeExports$1.jsx(LoadingSpinner, { size: "sm", variant: "dots", inline: true }), clearable && value && !loading && !disabled && (jsxRuntimeExports$1.jsx("button", { type: "button", onClick: handleClear, className: "text-gray-400 hover:text-gray-600 transition-colors", "data-testid": "autocomplete-clear", "aria-label": "Clear selection", children: jsxRuntimeExports$1.jsx(M, { className: "w-4 h-4" }) })), jsxRuntimeExports$1.jsx("button", { type: "button", onClick: handleToggle, className: `text-gray-400 transition-all ${disabled || readOnly
1108
- ? "cursor-not-allowed opacity-50"
1109
- : "hover:text-gray-600"}`, disabled: disabled, "data-testid": "autocomplete-toggle", "aria-label": isOpen ? "Close dropdown" : "Open dropdown", children: jsxRuntimeExports$1.jsx(f, { className: `w-5 h-5 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}` }) })] }), isOpen && !disabled && !readOnly && (jsxRuntimeExports$1.jsxs("div", { ref: dropdownRef, className: `
1110
- absolute z-50 left-0 right-0 mt-1
1111
- bg-white border-2 border-gray-200 rounded-lg shadow-lg
1112
- overflow-hidden
1113
- ${position === "top" ? "bottom-full mb-1" : "top-full"}
1114
- `, style: { maxHeight }, "data-testid": "autocomplete-dropdown", children: [loading && filteredOptions.length === 0 && (jsxRuntimeExports$1.jsxs("div", { className: "px-4 py-3 text-center text-gray-500", children: [jsxRuntimeExports$1.jsx(LoadingSpinner, { size: "sm", variant: "spinner", className: "mx-auto" }), jsxRuntimeExports$1.jsx("span", { className: "block mt-2 text-sm", children: loadingText })] })), jsxRuntimeExports$1.jsx("div", { className: "overflow-y-auto max-h-full", children: !loading && filteredOptions.length > 0 && (jsxRuntimeExports$1.jsx(jsxRuntimeExports$1.Fragment, { children: filteredOptions.map((option, index) => {
1128
+ return (jsxRuntimeExports$1.jsxs("div", { className: classNames(styles.container, className), children: [label && (jsxRuntimeExports$1.jsxs("label", { className: styles.label, children: [label, required && jsxRuntimeExports$1.jsx("span", { className: styles.required, children: "*" })] })), jsxRuntimeExports$1.jsxs("div", { ref: containerRef, className: styles.inputWrapper, children: [icon && jsxRuntimeExports$1.jsx("div", { className: styles.iconLeft, children: icon }), jsxRuntimeExports$1.jsx("input", { ref: inputRef, type: "text", value: displayValue, onChange: handleInputChange, onFocus: handleInputFocus, onBlur: handleInputBlur, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, readOnly: readOnly || !searchable, className: getInputClassName(), "data-testid": "autocomplete-input", "data-has-error": error ? "true" : "false", "data-has-warning": warning ? "true" : "false", "data-is-focused": isFocused ? "true" : "false" }), jsxRuntimeExports$1.jsxs("div", { className: styles.rightIcons, children: [loading && jsxRuntimeExports$1.jsx(LoadingSpinner, { size: "sm", variant: "dots", inline: true }), clearable && value && !loading && !disabled && (jsxRuntimeExports$1.jsx("button", { type: "button", onClick: handleClear, className: styles.clearButton, "data-testid": "autocomplete-clear", "aria-label": "Clear selection", children: jsxRuntimeExports$1.jsx(M, { className: "w-4 h-4" }) })), jsxRuntimeExports$1.jsx("button", { type: "button", onClick: handleToggle, className: styles.toggleButton, disabled: disabled, "data-testid": "autocomplete-toggle", "aria-label": isOpen ? "Close dropdown" : "Open dropdown", children: jsxRuntimeExports$1.jsx(f, { className: classNames(styles.toggleIcon, isOpen && styles.toggleIconOpen) }) })] }), isOpen && !disabled && !readOnly && (jsxRuntimeExports$1.jsxs("div", { ref: dropdownRef, className: classNames(styles.dropdown, position === "top" && styles.dropdownTop), style: { maxHeight }, "data-testid": "autocomplete-dropdown", children: [loading && filteredOptions.length === 0 && (jsxRuntimeExports$1.jsxs("div", { className: styles.loadingState, children: [jsxRuntimeExports$1.jsx(LoadingSpinner, { size: "sm", variant: "spinner", className: styles.loadingSpinner }), jsxRuntimeExports$1.jsx("span", { className: styles.loadingText, children: loadingText })] })), jsxRuntimeExports$1.jsx("div", { className: styles.dropdownContent, children: !loading && filteredOptions.length > 0 && (jsxRuntimeExports$1.jsx(jsxRuntimeExports$1.Fragment, { children: filteredOptions.map((option, index) => {
1115
1129
  const isSelected = option.value === value;
1116
1130
  const isHighlighted = index === highlightedIndex;
1117
1131
  return (jsxRuntimeExports$1.jsx("div", { ref: (el) => {
1118
1132
  optionRefs.current[index] = el;
1119
- }, onClick: () => handleSelect(option), onMouseEnter: () => setHighlightedIndex(index), className: `
1120
- px-4 py-3 cursor-pointer transition-colors flex items-center justify-between
1121
- ${option.disabled ? "opacity-50 cursor-not-allowed bg-gray-50" : ""}
1122
- ${isHighlighted && !option.disabled ? "bg-blue-50" : ""}
1123
- ${isSelected && !option.disabled ? "bg-blue-100" : ""}
1124
- ${!isHighlighted && !isSelected && !option.disabled ? "hover:bg-gray-50" : ""}
1125
- `, "data-testid": `autocomplete-option-${option.value}`, children: renderOption ? (renderOption(option, isSelected)) : (jsxRuntimeExports$1.jsxs(jsxRuntimeExports$1.Fragment, { children: [jsxRuntimeExports$1.jsxs("div", { className: "flex-1", children: [jsxRuntimeExports$1.jsx("div", { className: "font-medium text-gray-900", children: highlightMatchText(option.label, searchTerm, highlightMatch) }), option.description && (jsxRuntimeExports$1.jsx("div", { className: "text-xs text-gray-500 mt-0.5", children: option.description }))] }), isSelected && (jsxRuntimeExports$1.jsx(p, { className: "w-5 h-5 text-blue-600 flex-shrink-0" }))] })) }, option.value));
1133
+ }, onClick: () => handleSelect(option), onMouseEnter: () => setHighlightedIndex(index), className: classNames(styles.option, option.disabled && styles.optionDisabled, isHighlighted && styles.optionHighlighted, isSelected && styles.optionSelected), "data-testid": `autocomplete-option-${option.value}`, "data-disabled": option.disabled ? "true" : "false", "data-selected": isSelected ? "true" : "false", "data-highlighted": isHighlighted ? "true" : "false", children: renderOption ? (renderOption(option, isSelected)) : (jsxRuntimeExports$1.jsxs(jsxRuntimeExports$1.Fragment, { children: [jsxRuntimeExports$1.jsxs("div", { className: styles.optionContent, children: [jsxRuntimeExports$1.jsx("div", { className: styles.optionLabel, children: highlightMatchText(option.label, searchTerm, highlightMatch) }), option.description && (jsxRuntimeExports$1.jsx("div", { className: styles.optionDescription, children: option.description }))] }), isSelected && (jsxRuntimeExports$1.jsx(p, { className: styles.optionCheckIcon }))] })) }, option.value));
1126
1134
  }) })) }), onCreate && searchTerm && (jsxRuntimeExports$1.jsxs("div", { onClick: () => {
1127
1135
  onCreate(searchTerm.trim());
1128
1136
  setIsOpen(false);
1129
1137
  setSearchTerm("");
1130
- }, className: `
1131
- px-4 py-3 cursor-pointer
1132
- flex items-center gap-2
1133
- ${filteredOptions.length > 0 ? "border-t border-gray-200" : ""}
1134
- transition-colors
1135
- ${highlightedIndex === filteredOptions.length ? "bg-blue-50" : "hover:bg-gray-50"}
1136
- `, "data-testid": "autocomplete-create", children: [jsxRuntimeExports$1.jsx("span", { className: "text-blue-600 font-medium", children: "+" }), jsxRuntimeExports$1.jsxs("span", { className: "text-gray-900", children: [createLabel, " \"", searchTerm, "\""] })] })), !loading && filteredOptions.length === 0 && !onCreate && (jsxRuntimeExports$1.jsx("div", { className: "px-4 py-3 text-center text-gray-500 text-sm", children: noResultsText }))] }))] }), hint && !error && !warning && (jsxRuntimeExports$1.jsx("p", { className: "text-xs text-gray-500", children: hint })), warning && !error && (jsxRuntimeExports$1.jsxs("p", { className: "text-xs text-yellow-600 flex items-center gap-1", children: [jsxRuntimeExports$1.jsx("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: jsxRuntimeExports$1.jsx("path", { fillRule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }), warning] })), error && (jsxRuntimeExports$1.jsxs("p", { className: "text-xs text-red-600 flex items-center gap-1", children: [jsxRuntimeExports$1.jsx("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: jsxRuntimeExports$1.jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z", clipRule: "evenodd" }) }), error] }))] }));
1138
+ }, className: classNames(styles.createOption, filteredOptions.length > 0 && styles.createOptionWithBorder, highlightedIndex === filteredOptions.length &&
1139
+ styles.createOptionHighlighted), "data-testid": "autocomplete-create", children: [jsxRuntimeExports$1.jsx("span", { className: styles.createIcon, children: "+" }), jsxRuntimeExports$1.jsxs("span", { className: styles.createText, children: [createLabel, " \"", searchTerm, "\""] })] })), !loading && filteredOptions.length === 0 && !onCreate && (jsxRuntimeExports$1.jsx("div", { className: styles.noResults, children: noResultsText }))] }))] }), hint && !error && !warning && jsxRuntimeExports$1.jsx("p", { className: styles.hint, children: hint }), warning && !error && (jsxRuntimeExports$1.jsxs("p", { className: styles.warning, children: [jsxRuntimeExports$1.jsx("svg", { className: styles.warningIcon, fill: "currentColor", viewBox: "0 0 20 20", children: jsxRuntimeExports$1.jsx("path", { fillRule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }), warning] })), error && (jsxRuntimeExports$1.jsxs("p", { className: styles.error, children: [jsxRuntimeExports$1.jsx("svg", { className: styles.errorIcon, fill: "currentColor", viewBox: "0 0 20 20", children: jsxRuntimeExports$1.jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z", clipRule: "evenodd" }) }), error] }))] }));
1137
1140
  };
1138
1141
 
1139
1142
  export { Autocomplete as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rubenpazch/autocomplete",
3
- "version": "2.0.5",
3
+ "version": "3.0.0",
4
4
  "description": "Autocomplete component",
5
5
  "private": false,
6
6
  "main": "dist/index.cjs.js",
@@ -16,7 +16,9 @@
16
16
  "files": [
17
17
  "dist"
18
18
  ],
19
- "sideEffects": false,
19
+ "sideEffects": [
20
+ "**/*.css"
21
+ ],
20
22
  "exports": {
21
23
  ".": {
22
24
  "import": "./dist/index.esm.js",
@@ -29,8 +31,8 @@
29
31
  "react-dom": "^19.0.0"
30
32
  },
31
33
  "dependencies": {
32
- "@rubenpazch/icons": "3.0.4",
33
- "@rubenpazch/loading-spinner": "2.0.0"
34
+ "@rubenpazch/icons": "4.0.0",
35
+ "@rubenpazch/loading-spinner": "3.0.0"
34
36
  },
35
37
  "devDependencies": {
36
38
  "@rubenpazch/typescript-config": "3.0.0"