@gamecp/ui 0.1.30 → 0.1.32

package/dist/index.d.mts

@@ -302,11 +302,12 @@ declare function SmartDropdown({ isOpen, onClose, trigger, children, className,
 interface Option {
     value: string;
     label: string;
-    description?: string;
+    description?: React.ReactNode;
     icon?: React.ReactNode;
     metadata?: {
         isDefault?: boolean;
         args?: string[];
+        commandType?: 'command' | 'bash' | 'sh' | 'powershell';
     };
 }
 interface SmartSelectProps {
@@ -315,19 +316,21 @@ interface SmartSelectProps {
     onChange: (value: string | string[]) => void;
     placeholder?: string;
     className?: string;
-    description?: string;
+    description?: React.ReactNode;
     disabled?: boolean;
     multiple?: boolean;
-    width?: number;
+    width?: number | 'auto' | 'fit-content';
     searchable?: boolean;
     keepOpen?: boolean;
     clearable?: boolean;
+    variant?: 'default' | 'compact';
+    renderSelected?: (option: Option) => React.ReactNode;
     onOpen?: () => void;
     onClose?: () => void;
     onSearch?: (search: string) => void;
     isLoading?: boolean;
 }
-declare function SmartSelect({ options, value, onChange, placeholder, className, description, disabled, multiple, width, searchable, keepOpen, clearable, onOpen, onClose, onSearch, isLoading, }: SmartSelectProps): react_jsx_runtime.JSX.Element;
+declare function SmartSelect({ options, value, onChange, placeholder, className, description, disabled, multiple, width, searchable, keepOpen, clearable, variant, renderSelected, onOpen, onClose, onSearch, isLoading, }: SmartSelectProps): react_jsx_runtime.JSX.Element;
 
 interface SkeletonProps {
     className?: string;

package/dist/index.d.ts

@@ -302,11 +302,12 @@ declare function SmartDropdown({ isOpen, onClose, trigger, children, className,
 interface Option {
     value: string;
     label: string;
-    description?: string;
+    description?: React.ReactNode;
     icon?: React.ReactNode;
     metadata?: {
         isDefault?: boolean;
         args?: string[];
+        commandType?: 'command' | 'bash' | 'sh' | 'powershell';
     };
 }
 interface SmartSelectProps {
@@ -315,19 +316,21 @@ interface SmartSelectProps {
     onChange: (value: string | string[]) => void;
     placeholder?: string;
     className?: string;
-    description?: string;
+    description?: React.ReactNode;
     disabled?: boolean;
     multiple?: boolean;
-    width?: number;
+    width?: number | 'auto' | 'fit-content';
     searchable?: boolean;
     keepOpen?: boolean;
     clearable?: boolean;
+    variant?: 'default' | 'compact';
+    renderSelected?: (option: Option) => React.ReactNode;
     onOpen?: () => void;
     onClose?: () => void;
     onSearch?: (search: string) => void;
     isLoading?: boolean;
 }
-declare function SmartSelect({ options, value, onChange, placeholder, className, description, disabled, multiple, width, searchable, keepOpen, clearable, onOpen, onClose, onSearch, isLoading, }: SmartSelectProps): react_jsx_runtime.JSX.Element;
+declare function SmartSelect({ options, value, onChange, placeholder, className, description, disabled, multiple, width, searchable, keepOpen, clearable, variant, renderSelected, onOpen, onClose, onSearch, isLoading, }: SmartSelectProps): react_jsx_runtime.JSX.Element;
 
 interface SkeletonProps {
     className?: string;

package/dist/index.js

@@ -812,7 +812,7 @@ function SmartDropdown({
   trigger,
   children,
   className = "",
-  width = 384,
+  width = 300,
   maxHeight = 450,
   offset = 8,
   margin = 16,
@@ -860,7 +860,7 @@ function SmartDropdown({
       const availableLeftSpace = triggerRect.left - margin;
       const dynamicOffset = Math.max(20, availableLeftSpace * 0.2);
       right = viewportWidth - triggerRect.left + dynamicOffset;
-      left = 0;
+      left = void 0;
       calculatedWidth = Math.min(
         calculatedWidth,
         triggerRect.left - dynamicOffset - margin
@@ -912,13 +912,13 @@ function SmartDropdown({
       finalMaxHeight = Math.min(maxHeight, spaceBelow);
     } else if (position === "top-left-aligned") {
       right = viewportWidth - triggerRect.right;
-      left = 0;
+      left = void 0;
       top = triggerRect.top - offset;
       isAbove = true;
       finalMaxHeight = Math.min(maxHeight, spaceAbove);
     } else if (position === "bottom-left-aligned") {
       right = viewportWidth - triggerRect.right;
-      left = 0;
+      left = void 0;
       top = triggerRect.bottom + offset;
       isAbove = false;
       finalMaxHeight = Math.min(maxHeight, spaceBelow);
@@ -1017,20 +1017,13 @@ function SmartDropdown({
             top: dropdownPosition.top,
             ...dropdownPosition.left !== void 0 ? { left: dropdownPosition.left } : {},
             ...dropdownPosition.right !== void 0 ? { right: dropdownPosition.right } : {},
-            width: width === "fit-content" ? "auto" : dropdownPosition.width,
+            width: width ?? dropdownPosition.width,
             maxHeight: dropdownPosition.maxHeight
           },
           onClick: (e) => {
             e.stopPropagation();
           },
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: className ? className : "overflow-y-auto",
-              style: { maxHeight: dropdownPosition.maxHeight },
-              children: typeof children === "function" ? children({ isAbove: dropdownPosition.isAbove }) : children
-            }
-          )
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: className ? className : "overflow-y-auto h-full", children: typeof children === "function" ? children({ isAbove: dropdownPosition.isAbove }) : children })
         }
       ),
       document.body
@@ -1050,6 +1043,8 @@ function SmartSelect({
   searchable = false,
   keepOpen = false,
   clearable = true,
+  variant = "default",
+  renderSelected,
   // API integration props
   onOpen,
   onClose,
@@ -1070,7 +1065,7 @@ function SmartSelect({
   );
   const hasSelection = multiple ? selectedValues.length > 0 : value && value !== "";
   const filteredOptions = searchable && searchTerm.trim() ? options.filter(
-    (option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()) || option.value.toLowerCase().includes(searchTerm.toLowerCase()) || option.description?.toLowerCase().includes(searchTerm.toLowerCase())
+    (option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()) || option.value.toLowerCase().includes(searchTerm.toLowerCase()) || typeof option.description === "string" && option.description.toLowerCase().includes(searchTerm.toLowerCase())
   ) : options;
   const { focusedIndex, handleKeyDown, resetFocus } = useKeyboardNavigation({
     isOpen,
@@ -1179,10 +1174,10 @@ function SmartSelect({
               "aria-controls": "dropdown-listbox",
               "aria-autocomplete": "list",
               "aria-activedescendant": focusedIndex >= 0 ? `option-${focusedIndex}` : void 0,
-              className: `form-input truncate ${hasSelection ? "pr-12" : "pr-8"} ${disabled ? "opacity-50 cursor-not-allowed" : ""} ${className}`
+              className: `form-input truncate ${hasSelection ? "pr-12" : "pr-8"} ${disabled ? "cursor-not-allowed" : ""} ${className}`
             }
           ),
-          hasSelection && clearable && /* @__PURE__ */ jsxRuntime.jsx(
+          hasSelection && clearable && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
@@ -1238,7 +1233,7 @@ function SmartSelect({
               "aria-controls": "dropdown-listbox",
               "aria-label": placeholder,
               "aria-activedescendant": focusedIndex >= 0 ? `option-${focusedIndex}` : void 0,
-              className: `form-input flex items-center justify-between text-left ${hasSelection ? "pr-12" : "pr-8"} ${disabled ? "opacity-60 cursor-not-allowed" : ""} ${className}`,
+              className: `${variant === "compact" ? "bg-background border border-border rounded-lg px-2 py-1 text-xs h-auto min-h-0 hover:bg-muted/50" : "form-input"} flex items-center justify-between text-left ${hasSelection ? "pr-12" : "pr-8"} ${disabled ? "cursor-not-allowed" : ""} ${className}`,
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 "span",
                 {
@@ -1249,7 +1244,7 @@ function SmartSelect({
                       selectedOptions[0].icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: selectedOptions[0].icon }),
                       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: displayText })
                     ] });
-                  })() : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: placeholder }) : selectedOptions[0] ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1 min-w-0 flex-1", children: [
+                  })() : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: placeholder }) : selectedOptions[0] ? renderSelected ? renderSelected(selectedOptions[0]) : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1 min-w-0 flex-1", children: [
                     selectedOptions[0].icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: selectedOptions[0].icon }),
                     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: selectedOptions[0].label })
                   ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: placeholder })
@@ -1257,7 +1252,7 @@ function SmartSelect({
               )
             }
           ),
-          hasSelection && clearable && /* @__PURE__ */ jsxRuntime.jsx(
+          hasSelection && clearable && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
@@ -1308,18 +1303,42 @@ function SmartSelect({
               e.stopPropagation();
               handleSelect(option.value);
             },
-            className: `w-full px-3 py-2 text-left text-sm hover:bg-accent flex items-center justify-between min-h-[40px] transition-colors ${selectedValues.includes(option.value) ? "bg-accent border-l-2 border-l-ring" : index === focusedIndex ? "bg-muted text-muted-foreground ring-2 ring-ring" : ""}`,
+            className: `w-full ${variant === "compact" ? "px-2 py-1.5 text-xs" : "px-3 py-1.5 text-sm"} text-left hover:bg-muted/50 flex items-center justify-between transition-colors ${selectedValues.includes(option.value) ? "bg-primary" : index === focusedIndex ? "bg-muted/50" : ""}`,
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: [
-                option.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: option.icon }),
+                option.icon && /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: `flex-shrink-0 ${selectedValues.includes(option.value) ? "text-primary-foreground" : ""}`,
+                    children: option.icon
+                  }
+                ),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-foreground truncate", children: option.label }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        className: `font-medium truncate ${selectedValues.includes(option.value) ? "text-primary-foreground" : "text-foreground"}`,
+                        children: option.label
+                      }
+                    ),
                     option.metadata?.isDefault && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium success-badge flex-shrink-0", children: "Default" })
                   ] }),
-                  option.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground truncate", children: option.description }),
-                  option.metadata?.args && option.metadata.args.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-secondary-foreground mb-1", children: "Arguments:" }),
+                  option.description && /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: `text-xs truncate ${selectedValues.includes(option.value) ? "text-primary-foreground/80" : "text-muted-foreground"}`,
+                      children: option.description
+                    }
+                  ),
+                  option.metadata?.args && option.metadata.args.length > 0 && (!option.metadata.commandType || option.metadata.commandType === "command") && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        className: `text-xs mb-1 ${selectedValues.includes(option.value) ? "text-primary-foreground/80" : "text-muted-foreground"}`,
+                        children: "Arguments:"
+                      }
+                    ),
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-1", children: [
                       option.metadata.args.slice(0, 3).map((arg, argIndex) => /* @__PURE__ */ jsxRuntime.jsx(
                         "span",
@@ -1329,11 +1348,17 @@ function SmartSelect({
                         },
                         argIndex
                       )),
-                      option.metadata.args.length > 3 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-secondary-foreground", children: [
-                        "+",
-                        option.metadata.args.length - 3,
-                        " more"
-                      ] })
+                      option.metadata.args.length > 3 && /* @__PURE__ */ jsxRuntime.jsxs(
+                        "span",
+                        {
+                          className: `text-xs ${selectedValues.includes(option.value) ? "text-primary-foreground/80" : "text-muted-foreground"}`,
+                          children: [
+                            "+",
+                            option.metadata.args.length - 3,
+                            " more"
+                          ]
+                        }
+                      )
                     ] })
                   ] })
                 ] })
@@ -1347,11 +1372,11 @@ function SmartSelect({
                   },
                   className: "w-4 h-4 text-primary bg-muted border-border rounded focus:ring-primary focus:ring-2"
                 }
-              ) : selectedValues.includes(option.value) && /* @__PURE__ */ jsxRuntime.jsx(ri.RiCheckLine, { className: "w-4 h-4 text-primary flex-shrink-0" })
+              ) : selectedValues.includes(option.value) && /* @__PURE__ */ jsxRuntime.jsx(ri.RiCheckLine, { className: "w-4 h-4 text-primary-foreground flex-shrink-0" })
             ]
           },
           option.value
-        )) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 text-sm text-secondary-foreground flex items-center gap-2", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        )) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 text-sm text-muted-foreground flex items-center gap-2", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(ri.RiLoader4Line, { className: "w-4 h-4 animate-spin" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Loading..." })
         ] }) : searchTerm.trim() ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: "No results found" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: "No options available" }) }) })
@@ -2496,7 +2521,7 @@ function FormInput({
         }
       )
     ] }),
-    footerDescription && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs mt-1", children: footerDescription }),
+    footerDescription && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground mt-1", children: footerDescription }),
     error && /* @__PURE__ */ jsxRuntime.jsx("div", { id: `${name}-error`, className: "form-error", role: "alert", children: typeof error === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: error }) : error })
   ] }) });
 }
@@ -2776,32 +2801,32 @@ function Switch({
   const variants = {
     default: {
       checked: "bg-primary",
-      unchecked: "bg-input",
+      unchecked: "bg-muted-foreground/40",
       ring: "focus:ring-primary"
     },
     success: {
       checked: "bg-success",
-      unchecked: "bg-input",
+      unchecked: "bg-muted-foreground/40",
       ring: "focus:ring-success"
     },
     danger: {
       checked: "bg-destructive",
-      unchecked: "bg-input",
+      unchecked: "bg-muted-foreground/40",
       ring: "focus:ring-destructive"
     },
     warning: {
       checked: "bg-warning",
-      unchecked: "bg-input",
+      unchecked: "bg-muted-foreground/40",
       ring: "focus:ring-warning"
     },
     info: {
       checked: "bg-info",
-      unchecked: "bg-input",
+      unchecked: "bg-muted-foreground/40",
       ring: "focus:ring-info"
     },
     embedded: {
       checked: "bg-success",
-      unchecked: "bg-input",
+      unchecked: "bg-muted-foreground/40",
       ring: "focus:ring-success"
     }
   };
@@ -2822,9 +2847,9 @@ function Switch({
         disabled,
         onClick: toggle,
         className: `
-          relative inline-flex flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent 
+          relative inline-flex flex-shrink-0 cursor-pointer rounded-full border-2
           transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 ${currentVariant.ring} focus:ring-offset-2
-          ${checked ? currentVariant.checked : currentVariant.unchecked}
+          ${checked ? `${currentVariant.checked} border-transparent` : `${currentVariant.unchecked} border-muted-foreground/30`}
           ${disabled ? "opacity-50 cursor-not-allowed" : ""}
           ${currentSize.track}
         `,