@onesaz/ui 0.3.3 → 0.3.5

package/dist/index.js

@@ -866,7 +866,7 @@ Caption.displayName = "Caption";
 import * as React6 from "react";
 import { jsx as jsx6 } from "react/jsx-runtime";
 var Button = React6.forwardRef(
-  ({ className, variant = "default", size = "default", ...props }, ref) => {
+  ({ className, variant = "default", size = "default", fullWidth = false, ...props }, ref) => {
     return /* @__PURE__ */ jsx6(
       "button",
       {
@@ -888,6 +888,7 @@ var Button = React6.forwardRef(
             "h-11 rounded-md px-8": size === "lg",
             "h-10 w-10": size === "icon"
           },
+          fullWidth && "w-full",
           className
         ),
         ref,
@@ -941,7 +942,16 @@ var sizeClasses = {
   lg: "h-12 text-base px-4"
 };
 var Input = React7.forwardRef(
-  ({ className, type, inputSize = "md", error, startAdornment, endAdornment, ...props }, ref) => {
+  ({
+    className,
+    type,
+    inputSize = "md",
+    error,
+    startAdornment,
+    endAdornment,
+    containerClassName,
+    ...props
+  }, ref) => {
     const hasAdornment = startAdornment || endAdornment;
     if (hasAdornment) {
       return /* @__PURE__ */ jsxs(
@@ -952,7 +962,8 @@ var Input = React7.forwardRef(
             "bg-background",
             error ? "border-destructive focus-within:ring-2 focus-within:ring-destructive/20" : "border-input focus-within:ring-2 focus-within:ring-ring/20 focus-within:border-ring",
             "transition-colors",
-            props.disabled && "opacity-50 cursor-not-allowed bg-muted"
+            props.disabled && "opacity-50 cursor-not-allowed bg-muted",
+            containerClassName
           ),
           children: [
             startAdornment && /* @__PURE__ */ jsx7("div", { className: "flex items-center pl-3 text-muted-foreground", children: startAdornment }),
@@ -1075,7 +1086,7 @@ var Label = React10.forwardRef(
 Label.displayName = "Label";
 
 // src/components/text-field.tsx
-import { jsx as jsx11, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx11, jsxs as jsxs2 } from "react/jsx-runtime";
 var TextField = React11.forwardRef(
   ({
     className,
@@ -1089,12 +1100,39 @@ var TextField = React11.forwardRef(
     error,
     startAdornment,
     endAdornment,
+    inputProps,
+    InputProps,
+    InputLabelProps,
+    inputRef,
     ...props
   }, ref) => {
     const generatedId = React11.useId();
     const id = idProp || generatedId;
     const helperId = `${id}-helper`;
     const hasError = error || !!errorMessage;
+    const mergedRef = (node) => {
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+      if (typeof inputRef === "function") inputRef(node);
+      else if (inputRef) inputRef.current = node;
+    };
+    const { className: inputPropsClassName, ...restInputProps } = inputProps ?? {};
+    const {
+      className: inputSlotClassName,
+      containerClassName,
+      startAdornment: inputSlotStart,
+      endAdornment: inputSlotEnd,
+      ...restInputSlotProps
+    } = InputProps ?? {};
+    const resolvedStartAdornment = inputSlotStart ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+      inputSlotStart,
+      startAdornment
+    ] }) : startAdornment;
+    const resolvedEndAdornment = inputSlotEnd ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+      endAdornment,
+      inputSlotEnd
+    ] }) : endAdornment;
+    const resolvedSize = size === "small" ? "sm" : size === "medium" ? "md" : size;
     return /* @__PURE__ */ jsxs2("div", { className: cn("grid gap-1.5", fullWidth && "w-full", className), children: [
       label && /* @__PURE__ */ jsxs2(
         Label,
@@ -1104,6 +1142,7 @@ var TextField = React11.forwardRef(
             "text-sm font-medium",
             hasError && "text-destructive"
           ),
+          ...InputLabelProps,
           children: [
             label,
             required && /* @__PURE__ */ jsx11("span", { className: "text-destructive ml-0.5", "aria-hidden": "true", children: "*" })
@@ -1113,15 +1152,19 @@ var TextField = React11.forwardRef(
       /* @__PURE__ */ jsx11(
         Input,
         {
-          ref,
+          ref: mergedRef,
           id,
-          inputSize: size,
+          inputSize: resolvedSize,
           error: hasError,
-          startAdornment,
-          endAdornment,
+          startAdornment: resolvedStartAdornment,
+          endAdornment: resolvedEndAdornment,
           "aria-describedby": helperText || errorMessage ? helperId : void 0,
           "aria-invalid": hasError,
-          ...props
+          className: cn(inputSlotClassName, inputPropsClassName),
+          containerClassName,
+          ...props,
+          ...restInputSlotProps,
+          ...restInputProps
         }
       ),
       (helperText || errorMessage) && /* @__PURE__ */ jsx11(
@@ -2036,12 +2079,12 @@ Spinner.displayName = "Spinner";
 import * as React23 from "react";
 import { jsx as jsx23, jsxs as jsxs9 } from "react/jsx-runtime";
 var variantStyles2 = {
-  default: "bg-muted border-border text-foreground",
-  info: "bg-blue-50 dark:bg-blue-950/30 border-blue-200 dark:border-blue-800 text-blue-800 dark:text-blue-200",
-  success: "bg-green-50 dark:bg-green-950/30 border-green-200 dark:border-green-800 text-green-800 dark:text-green-200",
-  warning: "bg-yellow-50 dark:bg-yellow-950/30 border-yellow-200 dark:border-yellow-800 text-yellow-800 dark:text-yellow-200",
-  error: "bg-red-50 dark:bg-red-950/30 border-red-200 dark:border-red-800 text-red-800 dark:text-red-200",
-  destructive: "bg-red-50 dark:bg-red-950/30 border-red-200 dark:border-red-800 text-red-800 dark:text-red-200"
+  default: "bg-muted border-border",
+  info: "bg-blue-50 dark:bg-blue-950/30 border-blue-200 dark:border-blue-800",
+  success: "bg-green-50 dark:bg-green-950/30 border-green-200 dark:border-green-800",
+  warning: "bg-yellow-50 dark:bg-yellow-950/30 border-yellow-200 dark:border-yellow-800",
+  error: "bg-red-50 dark:bg-red-950/30 border-red-200 dark:border-red-800",
+  destructive: "bg-red-50 dark:bg-red-950/30 border-red-200 dark:border-red-800"
 };
 var iconColors = {
   default: "text-muted-foreground",
@@ -2101,7 +2144,7 @@ var Alert = React23.forwardRef(
         ref,
         role: "alert",
         className: cn(
-          "relative flex items-start gap-3 rounded-lg border p-4",
+          "relative flex items-start gap-3 rounded-lg border p-4 text-foreground",
           variantStyles2[variant],
           className
         ),
@@ -2146,7 +2189,7 @@ var AlertTitle = React23.forwardRef(
     "h5",
     {
       ref,
-      className: cn("font-semibold leading-none tracking-tight", className),
+      className: cn("font-semibold leading-none tracking-tight text-foreground", className),
       ...props,
       children
     }
@@ -2158,7 +2201,7 @@ var AlertDescription = React23.forwardRef(
     "p",
     {
       ref,
-      className: cn("mt-1 text-sm opacity-90", className),
+      className: cn("mt-1 text-sm text-muted-foreground", className),
       ...props,
       children
     }
@@ -2169,7 +2212,7 @@ AlertDescription.displayName = "AlertDescription";
 // src/components/tooltip.tsx
 import * as React24 from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { Fragment, jsx as jsx24, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx24, jsxs as jsxs10 } from "react/jsx-runtime";
 var TooltipProvider = TooltipPrimitive.Provider;
 var TooltipRoot = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
@@ -2220,7 +2263,7 @@ var Tooltip = React24.forwardRef(
     className
   }, ref) => {
     if (disabled) {
-      return /* @__PURE__ */ jsx24(Fragment, { children });
+      return /* @__PURE__ */ jsx24(Fragment2, { children });
     }
     return /* @__PURE__ */ jsx24(TooltipProvider, { children: /* @__PURE__ */ jsxs10(
       TooltipRoot,
@@ -2916,7 +2959,7 @@ var PaginationNamespace = Object.assign(Pagination, {
 
 // src/components/combobox/index.tsx
 import * as React30 from "react";
-import { Fragment as Fragment2, jsx as jsx30, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx30, jsxs as jsxs15 } from "react/jsx-runtime";
 function isMultipleProps(props) {
   return props.multiple === true;
 }
@@ -2928,55 +2971,83 @@ var Combobox = React30.forwardRef(
       searchPlaceholder = "Search...",
       emptyMessage = "No results found.",
       disabled = false,
+      clearable = true,
+      openOnFocus = true,
       className
     } = props;
+    const labelKey = props.labelKey ?? "label";
+    const valueKey = props.valueKey ?? "value";
+    const normalizedOptions = React30.useMemo(() => {
+      return (options ?? []).map((option) => {
+        if (typeof option === "string") {
+          return { label: option, value: option };
+        }
+        const record = option;
+        const maybeLabel = record[labelKey];
+        const maybeValue = record[valueKey];
+        return {
+          label: typeof maybeLabel === "string" ? maybeLabel : String(maybeLabel ?? ""),
+          value: typeof maybeValue === "string" ? maybeValue : String(maybeValue ?? ""),
+          disabled: Boolean(option.disabled)
+        };
+      });
+    }, [options, labelKey, valueKey]);
     const [open, setOpen] = React30.useState(false);
-    const [search, setSearch] = React30.useState("");
+    const [internalSearch, setInternalSearch] = React30.useState("");
     const containerRef = React30.useRef(null);
+    const searchInputRef = React30.useRef(null);
     const isMultiple = isMultipleProps(props);
-    const [internalSingleValue, setInternalSingleValue] = React30.useState(
-      !isMultiple ? props.defaultValue ?? "" : ""
-    );
-    const [internalMultiValue, setInternalMultiValue] = React30.useState(
-      isMultiple ? props.defaultValue ?? [] : []
-    );
-    const singleValue = !isMultiple ? props.value !== void 0 ? props.value : internalSingleValue : "";
+    const selectAll = isMultiple ? props.selectAll ?? false : false;
+    const selectAllLabel = isMultiple ? props.selectAllLabel ?? "Select all" : "Select all";
+    const [internalSingleValue, setInternalSingleValue] = React30.useState(!isMultiple ? props.defaultValue ?? null : null);
+    const [internalMultiValue, setInternalMultiValue] = React30.useState(isMultiple ? props.defaultValue ?? [] : []);
+    const singleValue = !isMultiple ? props.value !== void 0 ? props.value : internalSingleValue : null;
     const multiValue = isMultiple ? props.value !== void 0 ? props.value : internalMultiValue : [];
+    const search = props.inputValue !== void 0 ? props.inputValue : internalSearch;
     const filteredOptions = React30.useMemo(() => {
-      if (!search) return options;
-      return options.filter(
+      if (!search) return normalizedOptions;
+      return normalizedOptions.filter(
         (option) => option.label.toLowerCase().includes(search.toLowerCase())
       );
-    }, [options, search]);
-    const selectedOption = !isMultiple ? options.find((option) => option.value === singleValue) : void 0;
-    const selectedOptions = isMultiple ? options.filter((option) => multiValue.includes(option.value)) : [];
-    const handleSingleSelect = (optionValue) => {
+    }, [normalizedOptions, search]);
+    const selectedOptions = isMultiple ? multiValue : [];
+    const selectableOptions = React30.useMemo(
+      () => normalizedOptions.filter((option) => !option.disabled),
+      [normalizedOptions]
+    );
+    const allSelected = isMultiple && selectableOptions.length > 0 && selectableOptions.every(
+      (option) => multiValue.some((item) => item.value === option.value)
+    );
+    const handleSingleSelect = (option) => {
       if (!isMultiple) {
         if (props.value === void 0) {
-          setInternalSingleValue(optionValue);
+          setInternalSingleValue(option);
         }
-        props.onValueChange?.(optionValue);
+        props.onChange?.(option);
         setOpen(false);
-        setSearch("");
+        if (props.inputValue === void 0) {
+          setInternalSearch("");
+        }
       }
     };
-    const handleMultiSelect = (optionValue) => {
+    const handleMultiSelect = (option) => {
       if (isMultiple) {
-        const newValue = multiValue.includes(optionValue) ? multiValue.filter((v) => v !== optionValue) : [...multiValue, optionValue];
+        const exists = multiValue.some((item) => item.value === option.value);
+        const newValue = exists ? multiValue.filter((item) => item.value !== option.value) : [...multiValue, option];
         if (props.value === void 0) {
           setInternalMultiValue(newValue);
         }
-        props.onValueChange?.(newValue);
+        props.onChange?.(newValue);
       }
     };
     const handleRemoveItem = (optionValue, e) => {
       e.stopPropagation();
       if (isMultiple) {
-        const newValue = multiValue.filter((v) => v !== optionValue);
+        const newValue = multiValue.filter((v) => v.value !== optionValue);
         if (props.value === void 0) {
           setInternalMultiValue(newValue);
         }
-        props.onValueChange?.(newValue);
+        props.onChange?.(newValue);
       }
     };
     const handleClearAll = (e) => {
@@ -2985,7 +3056,28 @@ var Combobox = React30.forwardRef(
         if (props.value === void 0) {
           setInternalMultiValue([]);
         }
-        props.onValueChange?.([]);
+        props.onChange?.([]);
+      }
+    };
+    const handleSelectAll = (e) => {
+      e.stopPropagation();
+      if (!isMultiple) return;
+      const nextValue = allSelected ? [] : selectableOptions;
+      if (props.value === void 0) {
+        setInternalMultiValue(nextValue);
+      }
+      props.onChange?.(nextValue);
+    };
+    const handleClearSingle = (e) => {
+      e.stopPropagation();
+      if (!isMultiple) {
+        if (props.value === void 0) {
+          setInternalSingleValue(null);
+        }
+        props.onChange?.(null);
+        if (props.inputValue === void 0) {
+          setInternalSearch("");
+        }
       }
     };
     React30.useEffect(() => {
@@ -2997,6 +3089,19 @@ var Combobox = React30.forwardRef(
       document.addEventListener("mousedown", handleClickOutside);
       return () => document.removeEventListener("mousedown", handleClickOutside);
     }, []);
+    React30.useEffect(() => {
+      if (open) {
+        searchInputRef.current?.focus();
+      }
+    }, [open]);
+    React30.useImperativeHandle(
+      ref,
+      () => searchInputRef.current,
+      []
+    );
+    const setSearchRef = (node) => {
+      searchInputRef.current = node;
+    };
     const maxDisplayItems = isMultiple ? props.maxDisplayItems ?? 3 : 0;
     const displayedOptions = selectedOptions.slice(0, maxDisplayItems);
     const remainingCount = selectedOptions.length - maxDisplayItems;
@@ -3018,7 +3123,7 @@ var Combobox = React30.forwardRef(
             className
           ),
           children: [
-            isMultiple ? /* @__PURE__ */ jsx30("div", { className: "flex flex-1 flex-wrap items-center gap-1", children: selectedOptions.length === 0 ? /* @__PURE__ */ jsx30("span", { className: "text-muted-foreground", children: placeholder }) : /* @__PURE__ */ jsxs15(Fragment2, { children: [
+            isMultiple ? /* @__PURE__ */ jsx30("div", { className: "flex flex-1 flex-wrap items-center gap-1", children: selectedOptions.length === 0 ? /* @__PURE__ */ jsx30("span", { className: "text-muted-foreground", children: placeholder }) : /* @__PURE__ */ jsxs15(Fragment3, { children: [
               displayedOptions.map((option) => /* @__PURE__ */ jsxs15(
                 "span",
                 {
@@ -3057,7 +3162,7 @@ var Combobox = React30.forwardRef(
                 remainingCount,
                 " more"
               ] })
-            ] }) }) : /* @__PURE__ */ jsx30("span", { className: cn(!selectedOption && "text-muted-foreground"), children: selectedOption?.label ?? placeholder }),
+            ] }) }) : /* @__PURE__ */ jsx30("span", { className: cn(!singleValue && "text-muted-foreground"), children: singleValue?.label ?? placeholder }),
             /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-1", children: [
               isMultiple && selectedOptions.length > 0 && /* @__PURE__ */ jsx30(
                 "button",
@@ -3083,6 +3188,31 @@ var Combobox = React30.forwardRef(
                   )
                 }
               ),
+              !isMultiple && clearable && singleValue && /* @__PURE__ */ jsx30(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleClearSingle,
+                  className: "rounded p-0.5 hover:bg-muted",
+                  "aria-label": "Clear selection",
+                  children: /* @__PURE__ */ jsx30(
+                    "svg",
+                    {
+                      xmlns: "http://www.w3.org/2000/svg",
+                      width: "14",
+                      height: "14",
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      className: "opacity-50 hover:opacity-100",
+                      children: /* @__PURE__ */ jsx30("path", { d: "M18 6 6 18M6 6l12 12" })
+                    }
+                  )
+                }
+              ),
               /* @__PURE__ */ jsx30(
                 "svg",
                 {
@@ -3130,82 +3260,133 @@ var Combobox = React30.forwardRef(
           /* @__PURE__ */ jsx30(
             "input",
             {
-              ref,
+              ref: setSearchRef,
               className: "flex h-10 w-full bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground",
               placeholder: searchPlaceholder,
               value: search,
-              onChange: (e) => setSearch(e.target.value)
+              onChange: (e) => {
+                if (props.inputValue === void 0) {
+                  setInternalSearch(e.target.value);
+                }
+                props.onInputChange?.(e.target.value);
+              },
+              onFocus: () => {
+                if (openOnFocus && !disabled) setOpen(true);
+              }
             }
           )
         ] }),
-        /* @__PURE__ */ jsx30("div", { className: "max-h-[300px] overflow-y-auto p-1", children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx30("div", { className: "py-6 text-center text-sm text-muted-foreground", children: emptyMessage }) : filteredOptions.map((option) => {
-          const isSelected = isMultiple ? multiValue.includes(option.value) : option.value === singleValue;
-          return /* @__PURE__ */ jsxs15(
+        /* @__PURE__ */ jsx30("div", { className: "max-h-[300px] overflow-y-auto p-1", children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx30("div", { className: "py-6 text-center text-sm text-muted-foreground", children: emptyMessage }) : /* @__PURE__ */ jsxs15(Fragment3, { children: [
+          isMultiple && selectAll && /* @__PURE__ */ jsxs15(
             "button",
             {
               type: "button",
-              disabled: option.disabled,
-              onClick: () => isMultiple ? handleMultiSelect(option.value) : handleSingleSelect(option.value),
+              onClick: handleSelectAll,
               className: cn(
                 "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
                 "hover:bg-muted hover:text-foreground",
                 "focus:bg-muted focus:text-foreground",
-                "disabled:pointer-events-none disabled:opacity-50",
-                isSelected && "bg-muted"
+                allSelected && "bg-muted"
               ),
               children: [
-                /* @__PURE__ */ jsx30("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: isMultiple ? (
-                  // Checkbox for multi-select
-                  /* @__PURE__ */ jsx30(
-                    "div",
-                    {
-                      className: cn(
-                        "h-4 w-4 rounded border border-input",
-                        isSelected && "bg-accent border-accent"
-                      ),
-                      children: isSelected && /* @__PURE__ */ jsx30(
-                        "svg",
-                        {
-                          xmlns: "http://www.w3.org/2000/svg",
-                          width: "24",
-                          height: "24",
-                          viewBox: "0 0 24 24",
-                          fill: "none",
-                          stroke: "white",
-                          strokeWidth: "3",
-                          strokeLinecap: "round",
-                          strokeLinejoin: "round",
-                          className: "h-4 w-4",
-                          children: /* @__PURE__ */ jsx30("polyline", { points: "20 6 9 17 4 12" })
-                        }
-                      )
-                    }
-                  )
-                ) : (
-                  // Checkmark for single-select
-                  isSelected && /* @__PURE__ */ jsx30(
-                    "svg",
-                    {
-                      xmlns: "http://www.w3.org/2000/svg",
-                      width: "24",
-                      height: "24",
-                      viewBox: "0 0 24 24",
-                      fill: "none",
-                      stroke: "currentColor",
-                      strokeWidth: "2",
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      className: "h-4 w-4",
-                      children: /* @__PURE__ */ jsx30("polyline", { points: "20 6 9 17 4 12" })
-                    }
-                  )
+                /* @__PURE__ */ jsx30("span", { className: "absolute left-2 flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ jsx30(
+                  "div",
+                  {
+                    className: cn(
+                      "flex h-4 w-4 items-center justify-center rounded border border-input",
+                      allSelected && "bg-accent border-accent"
+                    ),
+                    children: allSelected && /* @__PURE__ */ jsx30(
+                      "svg",
+                      {
+                        xmlns: "http://www.w3.org/2000/svg",
+                        width: "24",
+                        height: "24",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        stroke: "white",
+                        strokeWidth: "3",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        className: "h-3 w-3",
+                        children: /* @__PURE__ */ jsx30("polyline", { points: "20 6 9 17 4 12" })
+                      }
+                    )
+                  }
                 ) }),
-                option.label
+                selectAllLabel
               ]
-            },
-            option.value
-          );
-        }) })
+            }
+          ),
+          filteredOptions.map((option) => {
+            const isSelected = isMultiple ? multiValue.some((item) => item.value === option.value) : option.value === singleValue?.value;
+            return /* @__PURE__ */ jsxs15(
+              "button",
+              {
+                type: "button",
+                disabled: option.disabled,
+                onClick: () => isMultiple ? handleMultiSelect(option) : handleSingleSelect(option),
+                className: cn(
+                  "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
+                  "hover:bg-muted hover:text-foreground",
+                  "focus:bg-muted focus:text-foreground",
+                  "disabled:pointer-events-none disabled:opacity-50",
+                  isSelected && "bg-muted"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx30("span", { className: "absolute left-2 flex h-4 w-4 items-center justify-center", children: isMultiple ? (
+                    // Checkbox for multi-select
+                    /* @__PURE__ */ jsx30(
+                      "div",
+                      {
+                        className: cn(
+                          "flex h-4 w-4 items-center justify-center rounded border border-input",
+                          isSelected && "bg-accent border-accent"
+                        ),
+                        children: isSelected && /* @__PURE__ */ jsx30(
+                          "svg",
+                          {
+                            xmlns: "http://www.w3.org/2000/svg",
+                            width: "24",
+                            height: "24",
+                            viewBox: "0 0 24 24",
+                            fill: "none",
+                            stroke: "white",
+                            strokeWidth: "3",
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round",
+                            className: "h-3 w-3",
+                            children: /* @__PURE__ */ jsx30("polyline", { points: "20 6 9 17 4 12" })
+                          }
+                        )
+                      }
+                    )
+                  ) : (
+                    // Checkmark for single-select
+                    isSelected && /* @__PURE__ */ jsx30(
+                      "svg",
+                      {
+                        xmlns: "http://www.w3.org/2000/svg",
+                        width: "24",
+                        height: "24",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        className: "h-4 w-4",
+                        children: /* @__PURE__ */ jsx30("polyline", { points: "20 6 9 17 4 12" })
+                      }
+                    )
+                  ) }),
+                  option.label
+                ]
+              },
+              option.value
+            );
+          })
+        ] }) })
       ] })
     ] });
   }
@@ -4944,7 +5125,7 @@ var SheetFooter = DrawerFooter;
 
 // src/components/topbar.tsx
 import * as React36 from "react";
-import { Fragment as Fragment3, jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
 var sizeClasses4 = {
   sm: "h-12",
   md: "h-14",
@@ -4972,7 +5153,7 @@ var TopBar = React36.forwardRef(
 TopBar.displayName = "TopBar";
 var TopBarBrand = React36.forwardRef(
   ({ className, logo, name, href, children, ...props }, ref) => {
-    const content = /* @__PURE__ */ jsxs21(Fragment3, { children: [
+    const content = /* @__PURE__ */ jsxs21(Fragment4, { children: [
       logo && /* @__PURE__ */ jsx36("span", { className: "shrink-0", children: logo }),
       name && /* @__PURE__ */ jsx36("span", { className: "font-semibold text-lg", children: name }),
       children
@@ -5054,7 +5235,7 @@ TopBarDivider.displayName = "TopBarDivider";
 
 // src/components/sidebar.tsx
 import * as React37 from "react";
-import { Fragment as Fragment4, jsx as jsx37, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx37, jsxs as jsxs22 } from "react/jsx-runtime";
 var SidebarContext = React37.createContext(void 0);
 var useSidebar = () => {
   const context = React37.useContext(SidebarContext);
@@ -5163,9 +5344,9 @@ SidebarGroup.displayName = "SidebarGroup";
 var SidebarItem = React37.forwardRef(
   ({ className, icon, active, disabled, badge, onClick, href, children, ...props }, ref) => {
     const { collapsed } = useSidebar();
-    const content = /* @__PURE__ */ jsxs22(Fragment4, { children: [
+    const content = /* @__PURE__ */ jsxs22(Fragment5, { children: [
       icon && /* @__PURE__ */ jsx37("span", { className: cn("shrink-0", collapsed ? "mx-auto" : ""), children: icon }),
-      !collapsed && /* @__PURE__ */ jsxs22(Fragment4, { children: [
+      !collapsed && /* @__PURE__ */ jsxs22(Fragment5, { children: [
         /* @__PURE__ */ jsx37("span", { className: "flex-1 truncate", children }),
         badge && /* @__PURE__ */ jsx37("span", { className: "shrink-0", children: badge })
       ] })
@@ -5286,7 +5467,7 @@ SidebarToggle.displayName = "SidebarToggle";
 
 // src/components/sidebar-rail.tsx
 import * as React38 from "react";
-import { Fragment as Fragment5, jsx as jsx38, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx38, jsxs as jsxs23 } from "react/jsx-runtime";
 var SidebarRailContext = React38.createContext(void 0);
 var useSidebarRail = () => {
   const context = React38.useContext(SidebarRailContext);
@@ -5429,7 +5610,7 @@ var IconRailContent = React38.forwardRef(
       "div",
       {
         ref,
-        className: cn("flex-1 flex flex-col items-center py-2 gap-1 overflow-y-auto", className),
+        className: cn("flex-1 flex flex-col items-center py-2 px-2 gap-1 overflow-y-auto", className),
         ...props,
         children
       }
@@ -5576,7 +5757,7 @@ var RailPanelGroup = React38.forwardRef(
 RailPanelGroup.displayName = "RailPanelGroup";
 var RailPanelItem = React38.forwardRef(
   ({ className, icon, active, disabled, badge, href, children, onClick, ...props }, ref) => {
-    const content = /* @__PURE__ */ jsxs23(Fragment5, { children: [
+    const content = /* @__PURE__ */ jsxs23(Fragment6, { children: [
       icon && /* @__PURE__ */ jsx38("span", { className: "shrink-0", children: icon }),
       /* @__PURE__ */ jsx38("span", { className: "flex-1 truncate", children }),
       badge && /* @__PURE__ */ jsx38("span", { className: "shrink-0", children: badge })
@@ -5634,7 +5815,7 @@ var PlaygroundContent = () => {
   const [inputValue, setInputValue] = React39.useState("");
   const [textareaValue, setTextareaValue] = React39.useState("");
   const [selectValue, setSelectValue] = React39.useState("");
-  const [comboboxValue, setComboboxValue] = React39.useState("");
+  const [comboboxValue, setComboboxValue] = React39.useState(null);
   const comboboxOptions = [
     { value: "react", label: "React" },
     { value: "vue", label: "Vue" },
@@ -5752,7 +5933,7 @@ var PlaygroundContent = () => {
         {
           options: comboboxOptions,
           value: comboboxValue,
-          onValueChange: setComboboxValue,
+          onChange: setComboboxValue,
           placeholder: "Search frameworks..."
         }
       )