@yakavkaz/uikit 0.0.30 → 0.0.31

package/dist/index.js

@@ -1530,66 +1530,75 @@ const y = c(
   ({
     children: e,
     className: g,
-    defaultValue: i,
-    triggerIcon: Y,
-    style: M,
-    placeholder: x,
-    label: m,
-    labelColor: n,
-    ...h
-  }, w) => {
-    const J = h.value !== void 0 ? h : { ...h, defaultValue: i };
-    return /* @__PURE__ */ B("div", { className: I("bg-light-100 flex flex-col gap-1", g), children: [
-      m && /* @__PURE__ */ A(l, { style: { color: n }, variant: "text_16_regular", children: m[0]?.toUpperCase() + m.slice(1) }),
-      /* @__PURE__ */ B(G.Root, { ...J, children: [
-        /* @__PURE__ */ B(
-          G.Trigger,
-          {
-            ref: w,
-            style: M,
-            "aria-label": m,
-            className: I(
-              "inline-flex items-center justify-between gap-2",
-              "text-black",
-              "transition-colors",
-              "hover:text-light-900",
-              "data-[disabled]:text-light-700",
-              "data-[placeholder]:text-light-900",
-              "data-[state=open]:text-light-900 outline-none"
-            ),
-            children: [
-              /* @__PURE__ */ A("div", { className: "flex items-center gap-2", children: Y && /* @__PURE__ */ A(G.Icon, { className: "h-6 w-6", children: Y }) }),
-              /* @__PURE__ */ A(G.Value, { placeholder: x }),
-              /* @__PURE__ */ A(G.Icon, { className: "text-black transition-transform duration-300 data-[state=open]:rotate-180", children: /* @__PURE__ */ A(C, { iconId: "KeyboardArrowDown", className: "h-6 w-6" }) })
-            ]
-          }
-        ),
-        /* @__PURE__ */ A(G.Portal, { children: /* @__PURE__ */ A(
-          G.Content,
-          {
-            className: "z-50 w-[var(--radix-select-trigger-width)] overflow-hidden bg-white shadow-lg",
-            position: "popper",
-            sideOffset: 4,
-            collisionPadding: 10,
-            children: /* @__PURE__ */ A(G.Viewport, { className: "max-h-[200px] overflow-y-auto p-1", children: e })
-          }
-        ) })
-      ] })
-    ] });
-  }
+    triggerClassName: i,
+    valueClassName: Y,
+    triggerIcon: M,
+    style: x,
+    placeholder: m,
+    label: n,
+    labelColor: h,
+    ...w
+  }, J) => /* @__PURE__ */ B("div", { className: I("flex flex-col gap-1", g), children: [
+    n && /* @__PURE__ */ A(
+      l,
+      {
+        style: { color: h },
+        variant: "text_16_regular",
+        className: "capitalize",
+        children: n
+      }
+    ),
+    /* @__PURE__ */ B(G.Root, { ...w, children: [
+      /* @__PURE__ */ B(
+        G.Trigger,
+        {
+          ref: J,
+          style: x,
+          "aria-label": n,
+          className: I(
+            "inline-flex items-center justify-between",
+            "border border-gray-200 bg-white px-3 py-2",
+            "text-black transition-colors",
+            "hover:border-gray-300",
+            "focus:ring-2 focus:ring-blue-500 focus:outline-none",
+            "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
+            "data-[placeholder]:text-gray-500",
+            i
+          ),
+          children: [
+            /* @__PURE__ */ B("div", { className: I("flex items-center", M && "gap-2"), children: [
+              M && /* @__PURE__ */ A("span", { className: "flex h-6 w-6 flex-shrink-0 items-center justify-center", children: M }),
+              /* @__PURE__ */ A(G.Value, { placeholder: m, className: Y })
+            ] }),
+            /* @__PURE__ */ A(G.Icon, { className: "text-gray-600 transition-transform duration-200 data-[state=open]:rotate-180", children: /* @__PURE__ */ A(C, { iconId: "KeyboardArrowDown", className: "h-4 w-4" }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ A(G.Portal, { children: /* @__PURE__ */ A(
+        G.Content,
+        {
+          className: "z-50 min-w-[var(--radix-select-trigger-width)] overflow-hidden border border-gray-200 bg-white shadow-lg",
+          position: "popper",
+          sideOffset: 4,
+          collisionPadding: 10,
+          children: /* @__PURE__ */ A(G.Viewport, { className: "max-h-60 overflow-y-auto p-1", children: e })
+        }
+      ) })
+    ] })
+  ] })
 );
 y.displayName = "Selector";
 const K = c(
-  ({ children: e, className: g = "", value: i, disabled: Y }, M) => /* @__PURE__ */ A(
+  ({ children: e, className: g, ...i }, Y) => /* @__PURE__ */ A(
     G.Item,
     {
-      ref: M,
-      value: i,
-      disabled: Y,
+      ref: Y,
+      ...i,
       className: I(
-        "relative flex cursor-pointer items-center px-3 py-1.5 text-sm select-none",
-        "data-[highlighted]:text-success-300",
-        "data-[disabled]:text-primary-900 data-[disabled]:pointer-events-none",
+        "relative flex cursor-pointer items-center rounded px-3 py-2 text-sm select-none",
+        "hover:bg-gray-100 focus:bg-gray-100",
+        "data-[highlighted]:bg-blue-50 data-[highlighted]:text-blue-900",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
         "outline-none",
         g
       ),