azamat-ui-kit-cli 0.3.13 → 0.3.14

package/vendor/src/components/inputs/input-decorator.tsx

@@ -26,8 +26,8 @@ const inputDecoratorVariants = cva("relative flex w-full items-center", {
 })
 
 export type InputDecoratorProps = Omit<React.ComponentProps<typeof InputPrimitive>, "value"> &
-  VariantProps<typeof inputDecoratorVariants> & {
-    value?: string | number | null
+  VariantProps<typeof inputDecoratorVariants> & {
+    value?: string | number | readonly string[] | null
     leading?: React.ReactNode
     trailing?: React.ReactNode
     leadingPointerEvents?: boolean
@@ -56,11 +56,19 @@ const InputDecorator = React.forwardRef<HTMLInputElement, InputDecoratorProps>(
       ...props
     },
     ref
-  ) => {
-    const hasLeading = Boolean(leading)
-    const hasTrailing = Boolean(trailing)
-
-    return (
+  ) => {
+    const hasLeading = Boolean(leading)
+    const hasTrailing = Boolean(trailing)
+    const resolvedValue =
+      value == null
+        ? value === null
+          ? ""
+          : undefined
+        : Array.isArray(value)
+          ? value
+          : String(value)
+
+    return (
       <div
         data-slot="input-decorator"
         data-has-leading={hasLeading || undefined}
@@ -82,7 +90,7 @@ const InputDecorator = React.forwardRef<HTMLInputElement, InputDecoratorProps>(
 
         <InputPrimitive
           ref={ref}
-          value={value == null ? "" : String(value)}
+          value={resolvedValue}
           className={cn(hasLeading && "pl-11", hasTrailing && "pr-12", inputClassName, className)}
           {...props}
         />

package/vendor/src/components/inputs/simple-select.tsx

@@ -78,13 +78,13 @@ function SimpleSelect({
 
   return (
     <Select value={value} onValueChange={(val) => onValueChange?.(val as string)} disabled={disabled || loading} {...props}>
-      <SelectTrigger
-        size={size}
-        className={cn(
-          "w-full border-border/80 bg-background/96 shadow-[0_1px_0_rgba(255,255,255,0.06)]",
-          triggerClassName
-        )}
-      >
+      <SelectTrigger
+        size={size}
+        className={cn(
+          "w-full",
+          triggerClassName
+        )}
+      >
         <SelectValue placeholder={placeholder}>{selectedOption?.label}</SelectValue>
         {loading ? <LoaderCircleIcon className="size-4 animate-spin text-muted-foreground" /> : null}
         {clearable && value && !disabled && !loading ? (
@@ -102,32 +102,32 @@ function SimpleSelect({
           </button>
         ) : null}
       </SelectTrigger>
-      <SelectContent
-        className={cn(
-          "border-border/80 bg-popover/98 shadow-[0_20px_60px_rgba(15,23,42,0.18)] backdrop-blur",
-          contentClassName
-        )}
-      >
-        {searchable ? (
-          <div className="sticky top-0 z-10 mb-1 flex items-center gap-2 rounded-[min(var(--radius-lg),14px)] border border-border/70 bg-background/95 px-2.5 py-2 text-sm">
-            <SearchIcon className="size-4 text-muted-foreground" />
-            <input
-              value={search}
-              onChange={(event) => setSearch(event.target.value)}
-              placeholder={searchPlaceholder}
+      <SelectContent
+        className={cn(
+          "w-(--anchor-width)",
+          contentClassName
+        )}
+      >
+        {searchable ? (
+          <div data-slot="select-search" className="sticky top-0 z-10 mb-1 flex items-center gap-2 rounded-[min(var(--radius-lg),14px)] border px-2.5 py-2 text-sm">
+            <SearchIcon className="size-4 text-muted-foreground" />
+            <input
+              value={search}
+              onChange={(event) => setSearch(event.target.value)}
+              placeholder={searchPlaceholder}
               className={cn("min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground", searchClassName)}
             />
           </div>
         ) : null}
 
-        {loading ? (
-          <div className="flex items-center gap-2 rounded-[min(var(--radius-lg),14px)] px-3 py-2.5 text-sm text-muted-foreground">
-            <LoaderCircleIcon className="size-4 animate-spin" />
-            {loadingLabel}
-          </div>
-        ) : filteredOptions.length === 0 ? (
-          <div className="rounded-[min(var(--radius-lg),14px)] px-3 py-2.5 text-sm text-muted-foreground">{emptyLabel}</div>
-        ) : (
+        {loading ? (
+          <div data-slot="select-state" className="flex items-center gap-2 rounded-[min(var(--radius-lg),14px)] px-3 py-2.5 text-sm text-muted-foreground">
+            <LoaderCircleIcon className="size-4 animate-spin" />
+            {loadingLabel}
+          </div>
+        ) : filteredOptions.length === 0 ? (
+          <div data-slot="select-state" className="rounded-[min(var(--radius-lg),14px)] px-3 py-2.5 text-sm text-muted-foreground">{emptyLabel}</div>
+        ) : (
           filteredOptions.map((option) => {
             const selected = option.value === value
             return (